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
2024-12-12 15:48:27 +01:00
committed by GitHub
parent 3acae96021
commit a4385c8b6e
5 changed files with 142 additions and 177 deletions

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.
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() {