Differential D11410 Diff 37550 subscriptions/templates/subscriptions/join/billing_address.html

Changeset View

Standalone View

subscriptions/templates/subscriptions/join/billing_address.html

	{% extends 'checkout/checkout_base.html' %}			{% extends 'checkout/checkout_base.html' %}
	{% load common_extras %}			{% load common_extras %}
	{% load looper %}			{% load looper %}
	{% load pipeline %}			{% load pipeline %}

	{% block content %}			{% block content %}
	<form id="payment-form" class="checkout-form" method="post">			<form id="payment-form" class="checkout-form" method="post">

	{% include "subscriptions/components/header_jumbotron.html" %}			{% include "subscriptions/components/header_jumbotron.html" %}


	{% with form\|add_form_classes as form %}			{% with form\|add_form_classes as form %}
	<div class="container-xl mt-4 mb-3">			<div class="container-xl mt-4 mb-3">
	<div class="row">			<div class="row">
	<div class="col-md-7 mb-3">			<div class="col-md-7 mb-3">
	<section class="checkout-form-fields mb-n2">			<section class="checkout-form-fields mb-n2">
	<h2 class="mb-0">Billing Details</h2>			<h2 class="mb-0">Billing Details</h2>
	<p class="subtitle">Fill in your billing address. Required fields are marked with (<span class="subtitle font-weight-bold">*</span>).</p>			<p class="subtitle">Fill in your billing address. Required fields are marked with (<span class="subtitle font-weight-bold">*</span>).</p>
	<fieldset class="payment-form-billing-address mt-2">			<fieldset class="payment-form-billing-address mt-2">
	{% include "subscriptions/components/billing_address_form.html" %}			{% include "subscriptions/components/billing_address_form.html" %}
	</fieldset>			</fieldset>
	</section>			</section>
	</div>			</div>

	<div class="col-md-5 col-lg-4 offset-lg-1 mb-3">			<div class="col-md-5 col-lg-4 offset-lg-1 mb-3">
	{% if messages %}			{% if messages %}
	{% for message in messages %}			{% for message in messages %}
	<p {% if message.tags %} class="alert alert-sm alert-success alert-{{ message.tags }}" {% endif %}>			<p {% if message.tags %} class="alert alert-sm alert-success alert-{{ message.tags }}" {% endif %}>
	{{ message }}			{{ message }}
	</p>			</p>
	{% endfor %}			{% endfor %}
	{% endif %}			{% endif %}
	{% include "subscriptions/components/plan_selector.html" with submit_button_text="Continue to payment" %}			{% include "subscriptions/components/plan_selector.html" with submit_button_text="Continue to payment" %}

	</div>			</div>
	</div>			</div>
	</div>			</div>
	{% endwith %}			{% endwith %}

	{% include 'subscriptions/components/footer_currency.html' %}			{% include 'subscriptions/components/footer_currency.html' %}
	</form>			</form>
	{% endblock content %}			{% endblock content %}

	{% block scripts %}			{% block scripts %}
	{% javascript "subscriptions" %}			{% javascript "subscriptions" %}
	<script>			<script>
	const form = document.querySelector('form');			const form = document.querySelector('form');
	const submitButton = document.getElementById('submit-button');			const submitButton = document.getElementById('submit-button');

	function enableSubmitButton() {			function enableSubmitButton() {
	submitButton.disabled = false;			submitButton.disabled = false;
	submitButton.setAttribute('aria-disabled', 'false');			submitButton.setAttribute('aria-disabled', 'false');
	submitButton.classList.remove('disabled');			submitButton.classList.remove('disabled');
	submitButton.classList.add('btn-success');			submitButton.classList.add('btn-success');
	}			}

	function allowSubmit() {			function allowSubmit() {
	if (form.checkValidity()) {			if (form.checkValidity()) {
	enableSubmitButton();			enableSubmitButton();
	}			}
	}			}
	form.addEventListener('change', allowSubmit);			form.addEventListener('change', allowSubmit);
	allowSubmit();			allowSubmit();

	</script>			</script>
	{% endblock scripts %}			{% endblock scripts %}