CGM_Public/pretix_cgo
1
0
Fork 0
forked from CGM_Public/pretix_original
Code Pull Requests Actions Activity

Use new fieldset panels throughout checkout (#4688)

Browse Source 
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
2024-12-12 15:48:27 +01:00
committed by GitHub
parent 3acae96021
commit a4385c8b6e
5 changed files with 142 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/pretix/plugins/paypal2/static/pretixplugins/paypal2/pretix-paypal.js
View File

@@ -92,8 +92,8 @@ var pretixpaypal = {
} }
// We are setting the cogwheel already here, as the renderAPM() method might take some time to get loaded. // 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]"); const apmtextselector = $("input[name=payment][value=paypal_apm]").closest("label").find(".accordion-label-text");
apmtextselector.prepend('<span class="fa fa-cog fa-spin"></span> '); apmtextselector.append(' <span aria-hidden="true" class="fa fa-cog fa-spin"></span>');
let sdk_url = 'https://www.paypal.com/sdk/js' + let sdk_url = 'https://www.paypal.com/sdk/js' +
'?client-id=' + pretixpaypal.client_id + '?client-id=' + pretixpaypal.client_id +
@@ -269,11 +269,7 @@ var pretixpaypal = {
renderAPMs: function () { renderAPMs: function () {
pretixpaypal.restore(); pretixpaypal.restore();
let inputselector = $("input[name=payment][value=paypal_apm]"); let inputselector = $("input[name=payment][value=paypal_apm]");
// The first selector is used on the regular payment-step of the checkout flow let textselector = inputselector.closest("label").find('.accordion-label-text');
// 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 eligibles = []; let eligibles = [];
pretixpaypal.paypal.getFundingSources().forEach(function (fundingSource) { pretixpaypal.paypal.getFundingSources().forEach(function (fundingSource) {
@@ -297,10 +293,6 @@ var pretixpaypal = {
textselector.text(eligibles.join(', ')); textselector.text(eligibles.join(', '));
textselector.fadeIn(300); textselector.fadeIn(300);
}); });
textselector2.fadeOut(300, function () {
textselector2[0].textContent = eligibles.join(', ');
textselector2.fadeIn(300);
});
}, },
guessLocale: function() { guessLocale: function() {

82
src/pretix/presale/templates/pretixpresale/event/checkout_customer.html
View File

@@ -8,22 +8,18 @@
<form method="post"> <form method="post">
{% csrf_token %} {% csrf_token %}
<div class="panel-group" id="customer"> <div class="panel-group" id="customer">
<div class="panel panel-default"> <fieldset class="panel panel-default accordion-panel">
<div class="accordion-radio"> <legend class="accordion-radio">
<div class="panel-heading"> <label class="panel-heading">
<p class="panel-title"> <span class="panel-title">
<input type="radio" name="customer_mode" value="login" <input type="radio" name="customer_mode" value="login"
data-parent="#customer"
{% if selected == "login" or not signup_allowed %}checked="checked"{% endif %} {% if selected == "login" or not signup_allowed %}checked="checked"{% endif %}
id="input_customer_login" aria-controls="customer_login" />
data-toggle="radiocollapse" data-target="#customer_login"/> {% trans "Log in with a customer account" %}
<label for="input_customer_login"><strong>{% trans "Log in with a customer account" %}</strong></label> </span>
</p> </label>
</div> </legend>
</div> <div id="customer_login" class="panel-body form-horizontal">
<div id="customer_login"
class="panel-collapse collapsed {% if selected == "login" or not signup_allowed %}in{% endif %}">
<div class="panel-body form-horizontal">
{% if customer %} {% if customer %}
<p> <p>
{% blocktrans trimmed with org=request.organizer.name %} {% blocktrans trimmed with org=request.organizer.name %}
@@ -77,25 +73,20 @@
<input type="hidden" name="login-sso-data" id="login_sso_data"> <input type="hidden" name="login-sso-data" id="login_sso_data">
{% endif %} {% endif %}
</div> </div>
</div> </fieldset>
</div>
{% if signup_allowed %} {% if signup_allowed %}
<div class="panel panel-default"> <fieldset class="panel panel-default accordion-panel">
<div class="accordion-radio"> <legend class="accordion-radio">
<div class="panel-heading"> <label class="panel-heading">
<p class="panel-title"> <span class="panel-title">
<input type="radio" name="customer_mode" value="register" <input type="radio" name="customer_mode" value="register"
data-parent="#customer"
{% if selected == "register" %}checked="checked"{% endif %} {% if selected == "register" %}checked="checked"{% endif %}
id="input_customer_register" aria-controls="customer_register" />
data-toggle="radiocollapse" data-target="#customer_register"/> {% trans "Create a new customer account" %}
<label for="input_customer_register"><strong>{% trans "Create a new customer account" %}</strong></label> </span>
</p> </label>
</div> </legend>
</div> <div id="customer_register" class="panel-body form-horizontal">
<div id="customer_register"
class="panel-collapse collapsed {% if selected == "register" %}in{% endif %}">
<div class="panel-body form-horizontal">
{% bootstrap_form register_form layout="checkout" %} {% bootstrap_form register_form layout="checkout" %}
<p> <p>
{% blocktrans trimmed with org=request.organizer.name %} {% blocktrans trimmed with org=request.organizer.name %}
@@ -105,27 +96,21 @@
{% endblocktrans %} {% endblocktrans %}
</p> </p>
</div> </div>
</div> </fieldset>
</div>
{% endif %} {% endif %}
{% if guest_allowed %} {% if guest_allowed %}
<div class="panel panel-default"> <fieldset class="panel panel-default accordion-panel">
<div class="accordion-radio"> <legend class="accordion-radio">
<div class="panel-heading"> <label class="panel-heading">
<p class="panel-title"> <span class="panel-title">
<input type="radio" name="customer_mode" value="guest" <input type="radio" name="customer_mode" value="guest"
data-parent="#customer"
{% if selected == "guest" %}checked="checked"{% endif %} {% if selected == "guest" %}checked="checked"{% endif %}
id="input_customer_guest" aria-controls="customer_guest" />
aria-describedby="customer_guest" {% trans "Continue as a guest" %}
data-toggle="radiocollapse" data-target="#customer_guest"/> </span>
<label for="input_customer_guest"><strong>{% trans "Continue as a guest" %}</strong></label> </label>
</p> </legend>
</div> <div id="customer_guest" class="panel-body form-horizontal">
</div>
<div id="customer_guest"
class="panel-collapse collapsed {% if selected == "guest" %}in{% endif %}">
<div class="panel-body form-horizontal">
<p> <p>
{% blocktrans trimmed %} {% blocktrans trimmed %}
You are not required to create an account. If you proceed as a guest, you will be able You are not required to create an account. If you proceed as a guest, you will be able
@@ -134,8 +119,7 @@
{% endblocktrans %} {% endblocktrans %}
</p> </p>
</div> </div>
</div> </fieldset>
</div>
{% endif %} {% endif %}
</div> </div>
<div class="row checkout-button-row"> <div class="row checkout-button-row">

28
src/pretix/presale/templates/pretixpresale/event/checkout_payment.html
View File

@@ -62,28 +62,23 @@
{% endif %} {% endif %}
<div class="panel-group" id="payment_accordion"> <div class="panel-group" id="payment_accordion">
{% for p in providers %} {% for p in providers %}
<div class="panel panel-default"> <fieldset class="panel panel-default accordion-panel">
<div class="accordion-radio"> <legend class="accordion-radio">
<div class="panel-heading"> <label class="panel-heading">
<p class="panel-title"> <span class="panel-title">
{% if show_fees %} {% if show_fees %}
<strong class="pull-right flip">{% if p.fee < 0 %}-{% else %}+{% endif %} {{ p.fee|money:event.currency|cut:"-" }}</strong> <strong class="pull-right flip">{% if p.fee < 0 %}-{% else %}+{% endif %} {{ p.fee|money:event.currency|cut:"-" }}</strong>
{% endif %} {% endif %}
<input type="radio" name="payment" value="{{ p.provider.identifier }}" <input type="radio" name="payment" value="{{ p.provider.identifier }}"
title="{{ p.provider.public_name }}" title="{{ p.provider.public_name }}"
data-parent="#payment_accordion"
{% if selected == p.provider.identifier %}checked="checked"{% endif %} {% if selected == p.provider.identifier %}checked="checked"{% endif %}
id="input_payment_{{ p.provider.identifier }}" aria-controls="payment_{{ p.provider.identifier }}"
aria-describedby="payment_{{ p.provider.identifier }}"
data-toggle="radiocollapse" data-target="#payment_{{ p.provider.identifier }}"
data-wallets="{{ p.provider.walletqueries|join:"|" }}" /> data-wallets="{{ p.provider.walletqueries|join:"|" }}" />
<label for="input_payment_{{ p.provider.identifier }}"><strong>{{ p.provider.public_name }}</strong></label> <strong class="accordion-label-text">{{ p.provider.public_name }}</strong>
</p> </span>
</div> </label>
</div> </legend>
<div id="payment_{{ p.provider.identifier }}" <div id="payment_{{ p.provider.identifier }}" class="panel-body form-horizontal">
class="panel-collapse collapsed {% if selected == p.provider.identifier %}in{% endif %}">
<div class="panel-body form-horizontal">
{% if request.event.testmode %} {% if request.event.testmode %}
{% if p.provider.test_mode_message %} {% if p.provider.test_mode_message %}
<div class="alert alert-info"> <div class="alert alert-info">
@@ -112,8 +107,7 @@
{% endif %} {% endif %}
{{ p.form }} {{ p.form }}
</div> </div>
</div> </fieldset>
</div>
{% endfor %} {% endfor %}
{% if not providers %} {% if not providers %}
<p><em>{% trans "There are no payment providers enabled." %}</em></p> <p><em>{% trans "There are no payment providers enabled." %}</em></p>

23
src/pretix/presale/templates/pretixpresale/event/order_pay_change.html
View File

@@ -29,29 +29,24 @@
{% endif %} {% endif %}
<div class="panel-group" id="payment_accordion"> <div class="panel-group" id="payment_accordion">
{% for p in providers %} {% for p in providers %}
<div class="panel panel-default" data-total="{{ p.total|money_numberfield:request.event.currency }}"> <fieldset class="panel panel-default accordion-panel" data-total="{{ p.total|money_numberfield:request.event.currency }}">
<div class="panel-heading"> <legend class="accordion-radio">
<h4 class="panel-title"> <label class="panel-heading">
<label class="radio"> <span class="panel-title">
{% if show_fees %} {% if show_fees %}
<strong class="pull-right flip">{% if p.fee_diff >= 0 %}+{% else %}-{% endif %} {{ p.fee_diff_abs|money:event.currency }}</strong> <strong class="pull-right flip">{% if p.fee_diff >= 0 %}+{% else %}-{% endif %} {{ p.fee_diff_abs|money:event.currency }}</strong>
{% endif %} {% endif %}
<input type="radio" name="payment" value="{{ p.provider.identifier }}" <input type="radio" name="payment" value="{{ p.provider.identifier }}"
data-parent="#payment_accordion"
{% if selected == p.provider.identifier %}checked="checked"{% endif %} {% if selected == p.provider.identifier %}checked="checked"{% endif %}
data-toggle="radiocollapse" data-target="#payment_{{ p.provider.identifier }}"
data-wallets="{{ p.provider.walletqueries|join:"|" }}"/> data-wallets="{{ p.provider.walletqueries|join:"|" }}"/>
<strong>{{ p.provider.public_name }}</strong> <strong class="accordion-label-text">{{ p.provider.public_name }}</strong>
</span>
</label> </label>
</h4> </legend>
</div> <div id="payment_{{ p.provider.identifier }}" class="panel-body form-horizontal">
<div id="payment_{{ p.provider.identifier }}"
class="panel-collapse collapsed {% if selected == p.provider.identifier %}in{% endif %}">
<div class="panel-body form-horizontal">
{{ p.form }} {{ p.form }}
</div> </div>
</div> </fieldset>
</div>
{% empty %} {% empty %}
<div class="alert alert-info"> <div class="alert alert-info">
{% trans "There are no alternative payment providers available for this order." %} {% trans "There are no alternative payment providers available for this order." %}

4
src/pretix/static/pretixpresale/js/walletdetection.js
View File

@@ -53,8 +53,8 @@ $(function () {
}); });
wallets.forEach(function(wallet) { wallets.forEach(function(wallet) {
const labels = $('[data-wallets*='+wallet+'] + label strong, [data-wallets*='+wallet+'] + strong') const labels = $('[data-wallets*='+wallet+'] + .accordion-label-text')
.append('<span class="wallet wallet-loading" data-wallet="'+wallet+'"> <i aria-hidden="true" class="fa fa-cog fa-spin"></i></span>') .append('<span class="wallet wallet-loading" data-wallet="'+wallet+'"> <span aria-hidden="true" class="fa fa-cog fa-spin"></span></span>')
walletdetection[wallet]() walletdetection[wallet]()
.then(function(result) { .then(function(result) {
const spans = labels.find(".wallet-loading[data-wallet=" + wallet + "]"); const spans = labels.find(".wallet-loading[data-wallet=" + wallet + "]");