Skip to content

Commit 11a012c

Browse files
alxbridgealxbridge
committed
Update from samaritans.org cc1ed309
1 parent 1a21bcf commit 11a012c

File tree

9 files changed

+252
-310
lines changed

9 files changed

+252
-310
lines changed

‎.eslintrc

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

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

+7-5
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,9 @@
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+
3638
<div class="payments__error-wrapper">
37-
<span id="payments__braintree-errors-card" class="payments__braintree-error" hidden></span>
3839
<span id="payments__braintree-errors-paypal" class="payments__braintree-error" hidden></span>
3940
<span id="payments__braintree-errors-googlepay" class="payments__braintree-error" hidden></span>
4041
<span id="payments__braintree-errors-applepay" class="payments__braintree-error" hidden></span>
@@ -51,6 +52,8 @@
5152

5253
<div class="accordion__content tabccordion__content">
5354

55+
<div id="payments__braintree-errors-card" hidden></div>
56+
5457
<div class="form-item">
5558
<label for="card-number">Card number</label>
5659
<div class="form-item__wrapper payments__braintree-hosted-field" id="card-number"></div>
@@ -73,9 +76,9 @@
7376
<div class="button__shadow"></div>
7477
<div class="button__inner">
7578
{% if is_pay_in or is_event_payment %}
76-
{% blocktrans %}Pay {{ currency_symbol }}{{ amount }}{% endblocktrans %}
79+
{% blocktrans with amount=payment_amount|floatformat:"2"|intcomma %}Pay {{ currency_symbol }}{{ amount }}{% endblocktrans %}
7780
{% else %}
78-
{% blocktrans %}Donate {{ currency_symbol }}{{ amount }} today{% endblocktrans %}
81+
{% blocktrans with amount=payment_amount|floatformat:"2"|intcomma %}Donate {{ currency_symbol }}{{ amount }} today{% endblocktrans %}
7982
{% endif %}
8083
{% include "patterns/atoms/svg/icons/icon-chevron.html" with classes="icon button__icon" %}
8184
</div>
@@ -95,5 +98,4 @@
9598
</div>
9699
</div>
97100

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

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

+76-81
Original file line numberDiff line numberDiff line change
@@ -1,98 +1,93 @@
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>
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%}
269
{% if currency == "GBP" %}
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">
10+
<li>
11+
<a href="#tab1" class="tabccordion__nav-item tabccordion__nav-item--card-payment">
3112
<svg class="" width="27" height="19">
3213
<use xlink:href="#credit-card" />
3314
</svg>
34-
{% trans 'Direct debit' %}
15+
{% trans 'Direct Debit' %}
3516
</a>
36-
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>
17+
</li>
6418
{% 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>
47+
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" %}
6558

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

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

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

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 }}
71+
<div class="accordion__content tabccordion__content">
7872

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>
73+
{{ braintree_params|json_script:"payments__braintree-params" }}
8374

84-
<p>Checkout with PayPal to complete the process</p>
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 }}
8578

86-
<div id="donate__braintree-errors" class="donate__braintree-error" hidden></div>
87-
<div id="donate__paypal-button" class="donate__paypal-button"></div>
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>
8883

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

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

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

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

‎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 billing address" %}</h2>
113+
<h2>{% trans "Your 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

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

1010
{% block content_inner %}
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 %}
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>
2015
{% else %}
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 %}
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>
2617
{% 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>
21+
{% 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>
23+
{% 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-
<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>
33-
34-
{% include "patterns/pages/donate/partials/gift_aid_block.html" %}
35-
{% endif %}
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>
3630

37-
{% render_form_field form.braintree_nonce %}
38-
{% render_form_field form.payment_mode %}
39-
</form>
31+
{% include "patterns/pages/donate/partials/gift_aid_block.html" %}
32+
{% endif %}
4033

41-
{% if form.non_field_errors %}
42-
<div id="payments__braintree-errors-form" class="payments__braintree-error">{{ form.non_field_errors }}</div>
43-
{% endif %}
34+
{% render_form_field form.braintree_nonce %}
35+
{% render_form_field form.payment_mode %}
36+
</form>
4437

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 %}
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 %}
5043

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

54-
{% endwith %}
5547
{% endblock %}
5648

49+
5750
{% block extra_js %}
5851
{{ tag_manager_events|json_script:"tag_manager_events" }}
5952
<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 humanize %}
2+
{% load i18n form_tags static wagtailimages_tags %}
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=personal_details.amount|floatformat:"2"|intcomma %}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=payment_amount|floatformat:"-2" %}You're making a payment of {{ currency_symbol }}{{ amount }}{% endblocktrans %}</h1>
1313

14-
<form class="form" id="payments__braintree-form" method="post" currency="{{ currency }}">
15-
{% csrf_token %}
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 %}
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)