forked from CGM_Public/pretix_original
Use new fieldset panels throughout checkout (#4688)
Use <fieldset> accordion-panels in checkout_customer, checkout_payment and order_pay_change. Unify markup in checkout_payment and order_pay_change. Adapt Javascript in the dynamic PayPal and Stripe payment forms. --------- Co-authored-by: Richard Schreiber <schreiber@rami.io>
This commit is contained in:
Mira
@@ -92,8 +92,8 @@ var pretixpaypal = {
|
||||
}
|
||||
|
||||
// We are setting the cogwheel already here, as the renderAPM() method might take some time to get loaded.
|
||||
let apmtextselector = $("label[for=input_payment_paypal_apm]");
|
||||
apmtextselector.prepend('<span class="fa fa-cog fa-spin"></span> ');
|
||||
const apmtextselector = $("input[name=payment][value=paypal_apm]").closest("label").find(".accordion-label-text");
|
||||
apmtextselector.append(' <span aria-hidden="true" class="fa fa-cog fa-spin"></span>');
|
||||
|
||||
let sdk_url = 'https://www.paypal.com/sdk/js' +
|
||||
'?client-id=' + pretixpaypal.client_id +
|
||||
@@ -269,11 +269,7 @@ var pretixpaypal = {
|
||||
renderAPMs: function () {
|
||||
pretixpaypal.restore();
|
||||
let inputselector = $("input[name=payment][value=paypal_apm]");
|
||||
// The first selector is used on the regular payment-step of the checkout flow
|
||||
// The second selector is used for the payment method change view.
|
||||
// In the long run, the layout of both pages should be adjusted to be one.
|
||||
let textselector = $("label[for=input_payment_paypal_apm]");
|
||||
let textselector2 = inputselector.next("strong");
|
||||
let textselector = inputselector.closest("label").find('.accordion-label-text');
|
||||
let eligibles = [];
|
||||
|
||||
pretixpaypal.paypal.getFundingSources().forEach(function (fundingSource) {
|
||||
@@ -297,10 +293,6 @@ var pretixpaypal = {
|
||||
textselector.text(eligibles.join(', '));
|
||||
textselector.fadeIn(300);
|
||||
});
|
||||
textselector2.fadeOut(300, function () {
|
||||
textselector2[0].textContent = eligibles.join(', ');
|
||||
textselector2.fadeIn(300);
|
||||
});
|
||||
},
|
||||
|
||||
guessLocale: function() {
|
||||
|
||||
@@ -8,22 +8,18 @@
|
||||
<form method="post">
|
||||
{% csrf_token %}
|
||||
<div class="panel-group" id="customer">
|
||||
<div class="panel panel-default">
|
||||
<div class="accordion-radio">
|
||||
<div class="panel-heading">
|
||||
<p class="panel-title">
|
||||
<fieldset class="panel panel-default accordion-panel">
|
||||
<legend class="accordion-radio">
|
||||
<label class="panel-heading">
|
||||
<span class="panel-title">
|
||||
<input type="radio" name="customer_mode" value="login"
|
||||
data-parent="#customer"
|
||||
{% if selected == "login" or not signup_allowed %}checked="checked"{% endif %}
|
||||
id="input_customer_login"
|
||||
data-toggle="radiocollapse" data-target="#customer_login"/>
|
||||
<label for="input_customer_login"><strong>{% trans "Log in with a customer account" %}</strong></label>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="customer_login"
|
||||
class="panel-collapse collapsed {% if selected == "login" or not signup_allowed %}in{% endif %}">
|
||||
<div class="panel-body form-horizontal">
|
||||
aria-controls="customer_login" />
|
||||
{% trans "Log in with a customer account" %}
|
||||
</span>
|
||||
</label>
|
||||
</legend>
|
||||
<div id="customer_login" class="panel-body form-horizontal">
|
||||
{% if customer %}
|
||||
<p>
|
||||
{% blocktrans trimmed with org=request.organizer.name %}
|
||||
@@ -77,25 +73,20 @@
|
||||
<input type="hidden" name="login-sso-data" id="login_sso_data">
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
{% if signup_allowed %}
|
||||
<div class="panel panel-default">
|
||||
<div class="accordion-radio">
|
||||
<div class="panel-heading">
|
||||
<p class="panel-title">
|
||||
<fieldset class="panel panel-default accordion-panel">
|
||||
<legend class="accordion-radio">
|
||||
<label class="panel-heading">
|
||||
<span class="panel-title">
|
||||
<input type="radio" name="customer_mode" value="register"
|
||||
data-parent="#customer"
|
||||
{% if selected == "register" %}checked="checked"{% endif %}
|
||||
id="input_customer_register"
|
||||
data-toggle="radiocollapse" data-target="#customer_register"/>
|
||||
<label for="input_customer_register"><strong>{% trans "Create a new customer account" %}</strong></label>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="customer_register"
|
||||
class="panel-collapse collapsed {% if selected == "register" %}in{% endif %}">
|
||||
<div class="panel-body form-horizontal">
|
||||
aria-controls="customer_register" />
|
||||
{% trans "Create a new customer account" %}
|
||||
</span>
|
||||
</label>
|
||||
</legend>
|
||||
<div id="customer_register" class="panel-body form-horizontal">
|
||||
{% bootstrap_form register_form layout="checkout" %}
|
||||
<p>
|
||||
{% blocktrans trimmed with org=request.organizer.name %}
|
||||
@@ -105,27 +96,21 @@
|
||||
{% endblocktrans %}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
{% endif %}
|
||||
{% if guest_allowed %}
|
||||
<div class="panel panel-default">
|
||||
<div class="accordion-radio">
|
||||
<div class="panel-heading">
|
||||
<p class="panel-title">
|
||||
<fieldset class="panel panel-default accordion-panel">
|
||||
<legend class="accordion-radio">
|
||||
<label class="panel-heading">
|
||||
<span class="panel-title">
|
||||
<input type="radio" name="customer_mode" value="guest"
|
||||
data-parent="#customer"
|
||||
{% if selected == "guest" %}checked="checked"{% endif %}
|
||||
id="input_customer_guest"
|
||||
aria-describedby="customer_guest"
|
||||
data-toggle="radiocollapse" data-target="#customer_guest"/>
|
||||
<label for="input_customer_guest"><strong>{% trans "Continue as a guest" %}</strong></label>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="customer_guest"
|
||||
class="panel-collapse collapsed {% if selected == "guest" %}in{% endif %}">
|
||||
<div class="panel-body form-horizontal">
|
||||
aria-controls="customer_guest" />
|
||||
{% trans "Continue as a guest" %}
|
||||
</span>
|
||||
</label>
|
||||
</legend>
|
||||
<div id="customer_guest" class="panel-body form-horizontal">
|
||||
<p>
|
||||
{% blocktrans trimmed %}
|
||||
You are not required to create an account. If you proceed as a guest, you will be able
|
||||
@@ -134,8 +119,7 @@
|
||||
{% endblocktrans %}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="row checkout-button-row">
|
||||
|
||||
@@ -62,28 +62,23 @@
|
||||
{% endif %}
|
||||
<div class="panel-group" id="payment_accordion">
|
||||
{% for p in providers %}
|
||||
<div class="panel panel-default">
|
||||
<div class="accordion-radio">
|
||||
<div class="panel-heading">
|
||||
<p class="panel-title">
|
||||
<fieldset class="panel panel-default accordion-panel">
|
||||
<legend class="accordion-radio">
|
||||
<label class="panel-heading">
|
||||
<span class="panel-title">
|
||||
{% if show_fees %}
|
||||
<strong class="pull-right flip">{% if p.fee < 0 %}-{% else %}+{% endif %} {{ p.fee|money:event.currency|cut:"-" }}</strong>
|
||||
{% endif %}
|
||||
<input type="radio" name="payment" value="{{ p.provider.identifier }}"
|
||||
title="{{ p.provider.public_name }}"
|
||||
data-parent="#payment_accordion"
|
||||
{% if selected == p.provider.identifier %}checked="checked"{% endif %}
|
||||
id="input_payment_{{ p.provider.identifier }}"
|
||||
aria-describedby="payment_{{ p.provider.identifier }}"
|
||||
data-toggle="radiocollapse" data-target="#payment_{{ p.provider.identifier }}"
|
||||
aria-controls="payment_{{ p.provider.identifier }}"
|
||||
data-wallets="{{ p.provider.walletqueries|join:"|" }}" />
|
||||
<label for="input_payment_{{ p.provider.identifier }}"><strong>{{ p.provider.public_name }}</strong></label>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="payment_{{ p.provider.identifier }}"
|
||||
class="panel-collapse collapsed {% if selected == p.provider.identifier %}in{% endif %}">
|
||||
<div class="panel-body form-horizontal">
|
||||
<strong class="accordion-label-text">{{ p.provider.public_name }}</strong>
|
||||
</span>
|
||||
</label>
|
||||
</legend>
|
||||
<div id="payment_{{ p.provider.identifier }}" class="panel-body form-horizontal">
|
||||
{% if request.event.testmode %}
|
||||
{% if p.provider.test_mode_message %}
|
||||
<div class="alert alert-info">
|
||||
@@ -112,8 +107,7 @@
|
||||
{% endif %}
|
||||
{{ p.form }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
{% endfor %}
|
||||
{% if not providers %}
|
||||
<p><em>{% trans "There are no payment providers enabled." %}</em></p>
|
||||
|
||||
@@ -29,29 +29,24 @@
|
||||
{% endif %}
|
||||
<div class="panel-group" id="payment_accordion">
|
||||
{% for p in providers %}
|
||||
<div class="panel panel-default" data-total="{{ p.total|money_numberfield:request.event.currency }}">
|
||||
<div class="panel-heading">
|
||||
<h4 class="panel-title">
|
||||
<label class="radio">
|
||||
<fieldset class="panel panel-default accordion-panel" data-total="{{ p.total|money_numberfield:request.event.currency }}">
|
||||
<legend class="accordion-radio">
|
||||
<label class="panel-heading">
|
||||
<span class="panel-title">
|
||||
{% if show_fees %}
|
||||
<strong class="pull-right flip">{% if p.fee_diff >= 0 %}+{% else %}-{% endif %} {{ p.fee_diff_abs|money:event.currency }}</strong>
|
||||
{% endif %}
|
||||
<input type="radio" name="payment" value="{{ p.provider.identifier }}"
|
||||
data-parent="#payment_accordion"
|
||||
{% if selected == p.provider.identifier %}checked="checked"{% endif %}
|
||||
data-toggle="radiocollapse" data-target="#payment_{{ p.provider.identifier }}"
|
||||
data-wallets="{{ p.provider.walletqueries|join:"|" }}"/>
|
||||
<strong>{{ p.provider.public_name }}</strong>
|
||||
<strong class="accordion-label-text">{{ p.provider.public_name }}</strong>
|
||||
</span>
|
||||
</label>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="payment_{{ p.provider.identifier }}"
|
||||
class="panel-collapse collapsed {% if selected == p.provider.identifier %}in{% endif %}">
|
||||
<div class="panel-body form-horizontal">
|
||||
</legend>
|
||||
<div id="payment_{{ p.provider.identifier }}" class="panel-body form-horizontal">
|
||||
{{ p.form }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
{% empty %}
|
||||
<div class="alert alert-info">
|
||||
{% trans "There are no alternative payment providers available for this order." %}
|
||||
|
||||
@@ -53,8 +53,8 @@ $(function () {
|
||||
});
|
||||
|
||||
wallets.forEach(function(wallet) {
|
||||
const labels = $('[data-wallets*='+wallet+'] + label strong, [data-wallets*='+wallet+'] + strong')
|
||||
.append('<span class="wallet wallet-loading" data-wallet="'+wallet+'"> <i aria-hidden="true" class="fa fa-cog fa-spin"></i></span>')
|
||||
const labels = $('[data-wallets*='+wallet+'] + .accordion-label-text')
|
||||
.append('<span class="wallet wallet-loading" data-wallet="'+wallet+'"> <span aria-hidden="true" class="fa fa-cog fa-spin"></span></span>')
|
||||
walletdetection[wallet]()
|
||||
.then(function(result) {
|
||||
const spans = labels.find(".wallet-loading[data-wallet=" + wallet + "]");
|
||||
|
||||
Reference in New Issue
Block a user