Skip to content

Commit 232b122

Browse files
alxbridgealxbridge
committed
Update from samaritans.org 5fa97613
1 parent 11a012c commit 232b122

File tree

9 files changed

+310
-252
lines changed

9 files changed

+310
-252
lines changed

‎.eslintrc

+2-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@
1111
"rules": {
1212
"indent": [
1313
"error",
14-
4
14+
4,
15+
{"SwitchCase": 1}
1516
],
1617
"linebreak-style": [
1718
"error",

‎project_styleguide/templates/patterns/molecules/payments/braintree-payment-widgets.html

+5-7
Original file line numberDiff line numberDiff line change
@@ -33,9 +33,8 @@
3333
</ul>
3434
</nav>
3535

36-
{% if form.non_field_errors %}<div id="payments__braintree-errors-form" class="payments__braintree-error">{{ form.non_field_errors }}</div>{% endif %}
37-
3836
<div class="payments__error-wrapper">
37+
<span id="payments__braintree-errors-card" class="payments__braintree-error" hidden></span>
3938
<span id="payments__braintree-errors-paypal" class="payments__braintree-error" hidden></span>
4039
<span id="payments__braintree-errors-googlepay" class="payments__braintree-error" hidden></span>
4140
<span id="payments__braintree-errors-applepay" class="payments__braintree-error" hidden></span>
@@ -52,8 +51,6 @@
5251

5352
<div class="accordion__content tabccordion__content">
5453

55-
<div id="payments__braintree-errors-card" hidden></div>
56-
5754
<div class="form-item">
5855
<label for="card-number">Card number</label>
5956
<div class="form-item__wrapper payments__braintree-hosted-field" id="card-number"></div>
@@ -76,9 +73,9 @@
7673
<div class="button__shadow"></div>
7774
<div class="button__inner">
7875
{% if is_pay_in or is_event_payment %}
79-
{% blocktrans with amount=payment_amount|floatformat:"2"|intcomma %}Pay {{ currency_symbol }}{{ amount }}{% endblocktrans %}
76+
{% blocktrans %}Pay {{ currency_symbol }}{{ amount }}{% endblocktrans %}
8077
{% else %}
81-
{% blocktrans with amount=payment_amount|floatformat:"2"|intcomma %}Donate {{ currency_symbol }}{{ amount }} today{% endblocktrans %}
78+
{% blocktrans %}Donate {{ currency_symbol }}{{ amount }} today{% endblocktrans %}
8279
{% endif %}
8380
{% include "patterns/atoms/svg/icons/icon-chevron.html" with classes="icon button__icon" %}
8481
</div>
@@ -98,4 +95,5 @@
9895
</div>
9996
</div>
10097

101-
{{ braintree_params|json_script:"payments__braintree-params" }}
98+
{{ braintree_settings|json_script:"payments__braintree-settings" }}
99+
{{ personal_details|json_script:"payments__personal-details" }}

‎project_styleguide/templates/patterns/molecules/payments/monthly-payment-widgets.html

+81-76
Original file line numberDiff line numberDiff line change
@@ -1,93 +1,98 @@
1-
{% load form_tags i18n helper_tags %}
2-
3-
<div class="tabccordion tabccordion--light-bg tabccordion--payments js-tabccordion">
4-
<nav>
5-
<ul class="tabccordion__nav js-tabccordion-nav">
6-
{% comment %}
7-
Hide GoCardless option for Euros.
8-
{% endcomment%}
1+
{% load form_tags i18n helper_tags humanize %}
2+
3+
{% with amount=payment_amount|floatformat:"2"|intcomma %}
4+
5+
<div class="tabccordion tabccordion--light-bg tabccordion--payments js-tabccordion">
6+
<nav>
7+
<ul class="tabccordion__nav js-tabccordion-nav">
8+
{% comment %}
9+
Hide GoCardless option for Euros.
10+
{% endcomment%}
11+
{% if currency == "GBP" %}
12+
<li>
13+
<a href="#tab1" class="tabccordion__nav-item tabccordion__nav-item--card-payment">
14+
<svg class="" width="27" height="19">
15+
<use xlink:href="#credit-card" />
16+
</svg>
17+
{% trans 'Direct Debit' %}
18+
</a>
19+
</li>
20+
{% endif %}
21+
<li>
22+
<a href="#tab2" class="tabccordion__nav-item tabccordion__nav-item--card-payment">{% trans 'PayPal' %}</a>
23+
</li>
24+
</ul>
25+
</nav>
926
{% if currency == "GBP" %}
10-
<li>
11-
<a href="#tab1" class="tabccordion__nav-item tabccordion__nav-item--card-payment">
27+
<!-- Direct Debit tab -->
28+
<section id="tab1" class="accordion accordion--tabccordion accordion--no-border accordion--credit-card tabccordion__panel js-tabccordion-panel">
29+
30+
<a href="#tab1" class="tabccordion__nav-item tabccordion__nav-item--card-payment tabccordion__nav-item--card-payment-content">
1231
<svg class="" width="27" height="19">
1332
<use xlink:href="#credit-card" />
1433
</svg>
15-
{% trans 'Direct Debit' %}
34+
{% trans 'Direct debit' %}
1635
</a>
17-
</li>
18-
{% endif %}
19-
<li>
20-
<a href="#tab2" class="tabccordion__nav-item tabccordion__nav-item--card-payment">{% trans 'PayPal' %}</a>
21-
</li>
22-
</ul>
23-
</nav>
24-
{% if currency == "GBP" %}
25-
<!-- Direct Debit tab -->
26-
<section id="tab1" class="accordion accordion--tabccordion accordion--no-border accordion--credit-card tabccordion__panel js-tabccordion-panel">
27-
28-
<a href="#tab1" class="tabccordion__nav-item tabccordion__nav-item--card-payment tabccordion__nav-item--card-payment-content">
29-
<svg class="" width="27" height="19">
30-
<use xlink:href="#credit-card" />
31-
</svg>
32-
{% trans 'Direct debit' %}
33-
</a>
34-
35-
<div class="accordion__content tabccordion__content">
36-
<form action="{% url 'donate:payment_monthly_gocardless' %}" class="form" id="donate__gocardless-form" method="post" currency="{{ currency_code }}">
37-
{% csrf_token %}
38-
{{ gocardless_form.gift_aid.as_hidden }}
39-
40-
<div class="donate__direct-debit-fields light-bg">
41-
{% render_form_field gocardless_form.debit_date %}
42-
{% render_form_field gocardless_form.account_holder_name %}
43-
{% render_form_field gocardless_form.branch_code %}
44-
{% render_form_field gocardless_form.account_number %}
45-
{% render_form_field gocardless_form.authorisation %}
46-
</div>
4736

48-
<button value="{% blocktrans with amount=payment_amount|floatformat:"-2" %}Donate £{{ amount }}{% endblocktrans %}" class="button button--large" type="submit" id="donate__gocardless-submit">
49-
<div class="button__shadow"></div>
50-
<div class="button__inner">
51-
{% blocktrans with amount=payment_amount|floatformat:"-2" %}Donate £{{ amount }} a month{% endblocktrans %}
52-
{% include "patterns/atoms/svg/icons/icon-chevron.html" with classes="icon button__icon" %}
53-
</div>
54-
</button>
55-
</form>
56-
57-
{% include "patterns/molecules/donate/direct-debit-guarantee.html" %}
37+
<div class="accordion__content tabccordion__content">
38+
<form action="{% url 'donate:payment_monthly_gocardless' %}" class="form" id="donate__gocardless-form" method="post" currency="{{ currency_code }}">
39+
{% csrf_token %}
40+
{{ gocardless_form.gift_aid.as_hidden }}
41+
42+
<div class="donate__direct-debit-fields light-bg">
43+
{% render_form_field gocardless_form.debit_date %}
44+
{% render_form_field gocardless_form.account_holder_name %}
45+
{% render_form_field gocardless_form.branch_code %}
46+
{% render_form_field gocardless_form.account_number %}
47+
{% render_form_field gocardless_form.authorisation %}
48+
</div>
49+
50+
<button value="{% blocktrans %}Donate £{{ amount }}{% endblocktrans %}" class="button button--large" type="submit" id="donate__gocardless-submit">
51+
<div class="button__shadow"></div>
52+
<div class="button__inner">
53+
{% blocktrans %}Donate £{{ amount }} a month{% endblocktrans %}
54+
{% include "patterns/atoms/svg/icons/icon-chevron.html" with classes="icon button__icon" %}
55+
</div>
56+
</button>
57+
</form>
58+
59+
{% include "patterns/molecules/donate/direct-debit-guarantee.html" %}
60+
61+
{% include "patterns/molecules/donate/payments-by-gocardless.html" %}
62+
</div>
63+
</section>
64+
{% endif %}
5865

59-
{% include "patterns/molecules/donate/payments-by-gocardless.html" %}
60-
</div>
61-
</section>
62-
{% endif %}
66+
<!-- PayPal tab -->
67+
<section id="tab2" class="accordion accordion--tabccordion tabccordion__panel js-tabccordion-panel {% if active_payment_mode == 'paypal' %}is-active{% endif %}">
6368

64-
<!-- PayPal tab -->
65-
<section id="tab2" class="accordion accordion--tabccordion tabccordion__panel js-tabccordion-panel {% if active_payment_mode == 'paypal' %}is-active{% endif %}">
69+
<a href="#tab2" class="tabccordion__nav-item tabccordion__nav-item--card-payment tabccordion__nav-item--card-payment-content">
70+
{% trans 'PayPal' %}
71+
</a>
6672

67-
<a href="#tab2" class="tabccordion__nav-item tabccordion__nav-item--card-payment tabccordion__nav-item--card-payment-content">
68-
{% trans 'PayPal' %}
69-
</a>
73+
<div class="accordion__content tabccordion__content">
7074

71-
<div class="accordion__content tabccordion__content">
75+
<form action="{% url 'donate:payment_monthly_braintree' %}" class="form" id="donate__braintree-form" method="post" data-token="{{ braintree_tokenization_key }}">
76+
{% csrf_token %}
77+
{{ braintree_form.gift_aid.as_hidden }}
7278

73-
{{ braintree_params|json_script:"payments__braintree-params" }}
79+
<div class="donate__braintree-fields light-bg">
80+
{% render_form_field braintree_form.billing_day %}
81+
{% render_form_field braintree_form.payment_method_nonce %}
82+
<div>
7483

75-
<form action="{% url 'donate:payment_monthly_braintree' %}" class="form" id="donate__braintree-form" method="post" data-token="{{ braintree_tokenization_key }}">
76-
{% csrf_token %}
77-
{{ braintree_form.gift_aid.as_hidden }}
84+
<p>Checkout with PayPal to complete the process</p>
7885

79-
<div class="donate__braintree-fields light-bg">
80-
{% render_form_field braintree_form.billing_day %}
81-
{% render_form_field braintree_form.payment_method_nonce %}
82-
<div>
86+
<div id="donate__braintree-errors" class="donate__braintree-error" hidden></div>
87+
<div id="donate__paypal-button" class="donate__paypal-button"></div>
8388

84-
<p>Checkout with PayPal to complete the process</p>
89+
</form>
8590

86-
<div id="donate__braintree-errors" class="donate__braintree-error" hidden></div>
87-
<div id="donate__paypal-button" class="donate__paypal-button"></div>
91+
</div>
92+
</section>
93+
</div>
8894

89-
</form>
95+
{{ braintree_settings|json_script:"payments__braintree-settings" }}
96+
{{ personal_details|json_script:"payments__personal-details" }}
9097

91-
</div>
92-
</section>
93-
</div>
98+
{% endwith %}

‎project_styleguide/templates/patterns/pages/donate/donate_personal_details_view.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@ <h1>
110110
{% else %}
111111
{% include 'patterns/molecules/forms/form_field.html' with field=form.email tooltip="We'll use this to send you an email confirmation when you've made your donation, and we'll use it to keep you up-to-date if you choose to keep in touch." %}
112112
{% endif %}
113-
<h2>{% trans "Your address" %}</h2>
113+
<h2>{% trans "Your billing address" %}</h2>
114114

115115
{% render_form_field form.address_line_1 %}
116116
{% render_form_field form.address_line_2 %}

‎project_styleguide/templates/patterns/pages/donate/donate_single_payment_view.html

+36-29
Original file line numberDiff line numberDiff line change
@@ -8,45 +8,52 @@
88
{% endblock %}
99

1010
{% block content_inner %}
11-
<div id="payments__payment-wrapper">
12-
{% if gift_aid_allowed and currency == "GBP" %}
13-
{% if is_pay_in %}
14-
<h1 class="wrapper--small-width">{% blocktrans with amount=payment_amount|floatformat:"2"|intcomma gift_aid_amount=gift_aid_amount|floatformat:"-2" %}Boost your payment of {{ currency_symbol }}{{ amount }} to <span class="donate__gift-aid-figure">{{ currency_symbol }}{{ gift_aid_amount }}</span> at no extra cost to you with Gift Aid{% endblocktrans %}</h1>
15-
{% else %}
16-
<h1 class="wrapper--small-width">{% blocktrans with amount=payment_amount|floatformat:"2"|intcomma gift_aid_amount=gift_aid_amount|floatformat:"2"|intcomma %}Boost your single donation of {{ currency_symbol }}{{ amount }} to <span class="donate__gift-aid-figure">{{ currency_symbol }}{{ gift_aid_amount }}</span> at no extra cost to you with Gift Aid{% endblocktrans %}</h1>
17-
{% endif %}
18-
{% else %}
19-
{% if is_pay_in %}
20-
<h1 class="wrapper--small-width">{% blocktrans with amount=payment_amount|floatformat:"2"|intcomma %}You're making a payment of {{ currency_symbol }}{{ amount }}{% endblocktrans %}</h1>
11+
{% with amount=personal_details.amount|floatformat:"2"|intcomma gift_aid_amount=personal_details.gift_aid_amount|floatformat:"2"|intcomma %}
12+
13+
<div id="payments__payment-wrapper">
14+
{% if gift_aid_allowed and currency == "GBP" %}
15+
{% if is_pay_in %}
16+
<h1 class="wrapper--small-width">{% blocktrans %}Boost your payment of {{ currency_symbol }}{{ amount }} to <span class="donate__gift-aid-figure">{{ currency_symbol }}{{ gift_aid_amount }}</span> at no extra cost to you with Gift Aid{% endblocktrans %}</h1>
17+
{% else %}
18+
<h1 class="wrapper--small-width">{% blocktrans %}Boost your single donation of {{ currency_symbol }}{{ amount }} to <span class="donate__gift-aid-figure">{{ currency_symbol }}{{ gift_aid_amount }}</span> at no extra cost to you with Gift Aid{% endblocktrans %}</h1>
19+
{% endif %}
2120
{% else %}
22-
<h1 class="wrapper--small-width">{% blocktrans with amount=payment_amount|floatformat:"2"|intcomma %}You're making a single donation of {{ currency_symbol }}{{ amount }}{% endblocktrans %}</h1>
21+
{% if is_pay_in %}
22+
<h1 class="wrapper--small-width">{% blocktrans %}You're making a payment of {{ currency_symbol }}{{ amount }}{% endblocktrans %}</h1>
23+
{% else %}
24+
<h1 class="wrapper--small-width">{% blocktrans %}You're making a single donation of {{ currency_symbol }}{{ amount }}{% endblocktrans %}</h1>
25+
{% endif %}
2326
{% endif %}
24-
{% endif %}
25-
<form class="form" id="payments__braintree-form" method="post" data-token="{{ braintree_tokenization_key }}" data-amount="{{ payment_amount|floatformat }}" currency="{{ currency }}">
26-
{% csrf_token %}
2727

28-
{% if gift_aid_allowed and currency == "GBP" %}
29-
<p class="wrapper--small-width">{% trans "If you are a UK taxpayer, by ticking the box below the government will increase your donation by 25% and it won't cost you a penny." %}</p>
28+
<form class="form" id="payments__braintree-form" method="post" currency="{{ currency }}">
29+
{% csrf_token %}
30+
31+
{% if gift_aid_allowed and currency == "GBP" %}
32+
<p class="wrapper--small-width">{% trans "If you are a UK taxpayer, by ticking the box below the government will increase your donation by 25% and it won't cost you a penny." %}</p>
3033

31-
{% include "patterns/pages/donate/partials/gift_aid_block.html" %}
32-
{% endif %}
34+
{% include "patterns/pages/donate/partials/gift_aid_block.html" %}
35+
{% endif %}
3336

34-
{% render_form_field form.braintree_nonce %}
35-
{% render_form_field form.payment_mode %}
36-
</form>
37+
{% render_form_field form.braintree_nonce %}
38+
{% render_form_field form.payment_mode %}
39+
</form>
3740

38-
{% if is_pay_in %}
39-
<h2 class="heading-block">{% trans "Pay with" %}</h2>
40-
{% else %}
41-
<h2 class="heading-block heading-block--xxl">{% trans "Donate with" %}</h2>
42-
{% endif %}
41+
{% if form.non_field_errors %}
42+
<div id="payments__braintree-errors-form" class="payments__braintree-error">{{ form.non_field_errors }}</div>
43+
{% endif %}
44+
45+
{% if is_pay_in %}
46+
<h2 class="heading-block">{% trans "Pay with" %}</h2>
47+
{% else %}
48+
<h2 class="heading-block heading-block--xxl">{% trans "Donate with" %}</h2>
49+
{% endif %}
4350

44-
{% include "patterns/molecules/payments/braintree-payment-widgets.html" %}
45-
</div>
51+
{% include "patterns/molecules/payments/braintree-payment-widgets.html" %}
52+
</div>
4653

54+
{% endwith %}
4755
{% endblock %}
4856

49-
5057
{% block extra_js %}
5158
{{ tag_manager_events|json_script:"tag_manager_events" }}
5259
<script src="{% static 'js/donate.js' %}"></script>

‎project_styleguide/templates/patterns/pages/website/events/events_payment_view.html

+11-11
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{% extends "patterns/templates/donate-form-page.html" %}
2-
{% load i18n form_tags static wagtailimages_tags %}
2+
{% load i18n form_tags static wagtailimages_tags humanize %}
33

44
{% block title %}{% trans "Payment details | Event registration payment" %}{% endblock %}
55

@@ -8,21 +8,21 @@
88
{% endblock %}
99

1010
{% block content_inner %}
11-
<div id="payments__payment-wrapper">
12-
<h1 class="wrapper--small-width">{% blocktrans with amount=payment_amount|floatformat:"-2" %}You're making a payment of {{ currency_symbol }}{{ amount }}{% endblocktrans %}</h1>
11+
<div id="payments__payment-wrapper">
12+
<h1 class="wrapper--small-width">{% blocktrans with amount=personal_details.amount|floatformat:"2"|intcomma %}You're making a payment of {{ currency_symbol }}{{ amount }}{% endblocktrans %}</h1>
1313

14-
<form class="form" id="payments__braintree-form" method="post" data-token="{{ braintree_tokenization_key }}" data-amount="{{ payment_amount|floatformat }}" currency="{{ currency }}">
15-
{% csrf_token %}
14+
<form class="form" id="payments__braintree-form" method="post" currency="{{ currency }}">
15+
{% csrf_token %}
1616

17-
{% render_form_field form.braintree_nonce %}
18-
{% render_form_field form.payment_mode %}
19-
</form>
17+
{% render_form_field form.braintree_nonce %}
18+
{% render_form_field form.payment_mode %}
19+
</form>
2020

2121

22-
<h2 class="heading-block">{% trans "Pay with" %}</h2>
22+
<h2 class="heading-block">{% trans "Pay with" %}</h2>
2323

24-
{% include "patterns/molecules/payments/braintree-payment-widgets.html" with is_event_payment=True %}
25-
</div>
24+
{% include "patterns/molecules/payments/braintree-payment-widgets.html" with is_event_payment=True %}
25+
</div>
2626
{% endblock %}
2727

2828
{% block extra_js %}

0 commit comments

Comments
 (0)