Compare commits

...

9 Commits

Author SHA1 Message Date
Mira
bde42d5178 Apply suggestions from code review 2024-12-12 15:17:35 +01:00
Mira Weller
df1ba5e194 Use same selector in walletdetection.js 2024-12-10 17:09:47 +01:00
Mira Weller
5f2a3fab34 Fix dynamic PayPal and Stripe payment forms, unify checkout_payment and order_pay_change 2024-12-10 17:04:29 +01:00
Richard Schreiber
d46ad7ff2a more paypal2 selector updates 2024-12-10 16:20:05 +01:00
Richard Schreiber
7406403939 hopefully fix label-selector for paypal2 2024-12-10 16:20:05 +01:00
Mira
55ad29cd8d Apply suggestions from code review
Co-authored-by: Richard Schreiber <schreiber@rami.io>
2024-12-10 16:20:05 +01:00
Mira Weller
2a3654ef3c Change element types 2024-12-10 16:20:05 +01:00
Mira Weller
7f9942ebbe Use <fieldset> in checkout_payment 2024-12-10 16:20:05 +01:00
Mira Weller
d55411fb8b Use <fieldset> in checkout_customer 2024-12-10 16:20:05 +01:00
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() {

View File

@@ -8,134 +8,118 @@
<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>
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 %}
You are currently logged in with the following credentials.
{% endblocktrans %}
</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">
{% if customer %}
<p>
{% blocktrans trimmed with org=request.organizer.name %}
You are currently logged in with the following credentials.
{% endblocktrans %}
</p>
<dl class="dl-horizontal">
<dt>{% trans "Email" %}</dt>
<dd>
{{ customer.email }}
</dd>
<dt>{% trans "Name" %}</dt>
<dd>{{ customer.name }}</dd>
<dt>{% trans "Customer ID" %}</dt>
<dd>
#{{ customer.identifier }}
</dd>
</dl>
{% else %}
<p>
{% blocktrans trimmed with org=request.organizer.name %}
If you created a customer account at {{ org }} before, you can log in now and connect
your order to your account. This will allow you to see all your orders in one place
and access them at any time.
{% endblocktrans %}
</p>
{% if request.organizer.settings.customer_accounts_native %}
{% bootstrap_form login_form layout="checkout" %}
<div class="row">
<div class="col-md-offset-3 col-md-9">
<a
href="{% abseventurl request.organizer "presale:organizer.customer.resetpw" %}"
target="_blank">
{% trans "Reset password" %}
</a>
</div>
</div>
{% endif %}
<dl class="dl-horizontal">
<dt>{% trans "Email" %}</dt>
<dd>
{{ customer.email }}
</dd>
<dt>{% trans "Name" %}</dt>
<dd>{{ customer.name }}</dd>
<dt>{% trans "Customer ID" %}</dt>
<dd>
#{{ customer.identifier }}
</dd>
</dl>
{% else %}
<p>
{% blocktrans trimmed with org=request.organizer.name %}
If you created a customer account at {{ org }} before, you can log in now and connect
your order to your account. This will allow you to see all your orders in one place
and access them at any time.
{% endblocktrans %}
</p>
{% if request.organizer.settings.customer_accounts_native %}
{% bootstrap_form login_form layout="checkout" %}
<div class="row">
<div class="col-md-6 col-md-offset-3">
{% for provider in request.organizer.sso_providers.all %}
{% if provider.is_active %}
<a href="{% eventurl request.organizer "presale:organizer.customer.login" provider=provider.pk %}?next={% if request.event_domain %}{{ request.scheme }}://{{ request.get_host }}{% endif %}{{ request.get_full_path|urlencode }}"
class="btn btn-primary btn-lg btn-block" data-open-in-popup-window>
{{ provider.button_label }}
</a>
{% endif %}
{% endfor %}
<div class="col-md-offset-3 col-md-9">
<a
href="{% abseventurl request.organizer "presale:organizer.customer.resetpw" %}"
target="_blank">
{% trans "Reset password" %}
</a>
</div>
</div>
<input type="hidden" name="login-sso-data" id="login_sso_data">
{% endif %}
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">
{% for provider in request.organizer.sso_providers.all %}
{% if provider.is_active %}
<a href="{% eventurl request.organizer "presale:organizer.customer.login" provider=provider.pk %}?next={% if request.event_domain %}{{ request.scheme }}://{{ request.get_host }}{% endif %}{{ request.get_full_path|urlencode }}"
class="btn btn-primary btn-lg btn-block" data-open-in-popup-window>
{{ provider.button_label }}
</a>
{% endif %}
{% endfor %}
</div>
</div>
<input type="hidden" name="login-sso-data" id="login_sso_data">
{% endif %}
</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>
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 %}
We will send you an email with a link to activate your account and set a password, so
you can use the account for future orders at {{ org }}. You can still go ahead with this
purchase before you received the email.
{% endblocktrans %}
</p>
</div>
<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" %}
<p>
{% blocktrans trimmed with org=request.organizer.name %}
We will send you an email with a link to activate your account and set a password, so
you can use the account for future orders at {{ org }}. You can still go ahead with this
purchase before you received the email.
{% 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>
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
to access the details and status of your order any time through the secret link we will
send you via email once the order is complete.
{% endblocktrans %}
</p>
</div>
<div id="customer_guest"
class="panel-collapse collapsed {% if selected == "guest" %}in{% endif %}">
<div 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
to access the details and status of your order any time through the secret link we will
send you via email once the order is complete.
{% endblocktrans %}
</p>
</div>
</div>
</div>
</fieldset>
{% endif %}
</div>
<div class="row checkout-button-row">

View File

@@ -62,58 +62,52 @@
{% 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">
{% if request.event.testmode %}
{% if p.provider.test_mode_message %}
<div class="alert alert-info">
<p>{{ p.provider.test_mode_message }}</p>
</div>
{% if not request.sales_channel.type_instance.testmode_supported %}
<div class="alert alert-danger">
<p>
{% trans "This sales channel does not provide support for test mode." %}
<strong>
{% trans "If you continue, you might pay an actual order with non-existing money!" %}
</strong>
</p>
</div>
{% endif %}
{% else %}
<div class="alert alert-warning">
<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">
<p>{{ p.provider.test_mode_message }}</p>
</div>
{% if not request.sales_channel.type_instance.testmode_supported %}
<div class="alert alert-danger">
<p>
{% trans "This payment provider does not provide support for test mode." %}
{% trans "This sales channel does not provide support for test mode." %}
<strong>
{% trans "If you continue, actual money might be transferred." %}
{% trans "If you continue, you might pay an actual order with non-existing money!" %}
</strong>
</p>
</div>
{% endif %}
{% else %}
<div class="alert alert-warning">
<p>
{% trans "This payment provider does not provide support for test mode." %}
<strong>
{% trans "If you continue, actual money might be transferred." %}
</strong>
</p>
</div>
{% endif %}
{{ p.form }}
</div>
{% endif %}
{{ p.form }}
</div>
</div>
</fieldset>
{% endfor %}
{% if not providers %}
<p><em>{% trans "There are no payment providers enabled." %}</em></p>

View File

@@ -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>
</label>
</h4>
<strong class="accordion-label-text">{{ p.provider.public_name }}</strong>
</span>
</label>
</legend>
<div id="payment_{{ p.provider.identifier }}" class="panel-body form-horizontal">
{{ p.form }}
</div>
<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 }}
</div>
</div>
</div>
</fieldset>
{% empty %}
<div class="alert alert-info">
{% trans "There are no alternative payment providers available for this order." %}

View File

@@ -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 + "]");