Skip to content

Commit 66ec64c

Browse files
tobihagemanntobihagemann
committed
improved state changes in donate-creditcard
1 parent ea7a08c commit 66ec64c

File tree

1 file changed

+52
-49
lines changed

1 file changed

+52
-49
lines changed

‎layouts/partials/donate-creditcard.html‎

Lines changed: 52 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,69 @@
11
<div x-data="{amount: 15, currency: 'EUR', frequency: 'once', oneTimePayment: null, oneTimePaymentStatus: {validCardNum: false, captcha: null, errorMessage: '', inProgress: false, success: false}, recurringPayment: new RecurringPayment(), acceptTerms: false, captchaState: null}" x-init="oneTimePayment = new OneTimePayment(oneTimePaymentStatus)">
2-
<div class="flex flex-wrap md:flex-nowrap">
3-
<div class="w-full mb-4 md:w-1/2 md:pr-3">
4-
<label class="label-uppercase mb-2">{{ i18n "donate_creditcard_amount" }}</label>
5-
<div class="flex items-center rounded-sm bg-gray-300">
6-
<div class="shrink-0 relative text-gray-700 w-16">
7-
<select x-model="currency" class="w-full rounded-l border-gray-300 bg-gray-300 focus:ring-0 focus:border-secondary">
8-
<option value="EUR">€</option>
9-
<option value="USD">$</option>
10-
</select>
2+
<div x-show="!oneTimePaymentStatus.success">
3+
<div class="flex flex-wrap md:flex-nowrap">
4+
<div class="w-full mb-4 md:w-1/2 md:pr-3">
5+
<label class="label-uppercase mb-2">{{ i18n "donate_creditcard_amount" }}</label>
6+
<div class="flex items-center rounded-sm bg-gray-300">
7+
<div class="shrink-0 relative text-gray-700 w-16">
8+
<select x-model="currency" class="w-full rounded-l border-gray-300 bg-gray-300 focus:ring-0 focus:border-secondary">
9+
<option value="EUR">€</option>
10+
<option value="USD">$</option>
11+
</select>
12+
</div>
13+
<input type="number" min="1" step="1" x-model="amount" class="grow min-w-0 text-right input-box rounded-none" placeholder="{{ i18n "donate_creditcard_amount_placeholder" }}" required/>
14+
<div class="shrink-0 text-gray-700 px-3">{{ i18n "donate_creditcard_amount_suffix" }}</div>
1115
</div>
12-
<input type="number" min="1" step="1" x-model="amount" class="grow min-w-0 text-right input-box rounded-none" placeholder="{{ i18n "donate_creditcard_amount_placeholder" }}" required/>
13-
<div class="shrink-0 text-gray-700 px-3">{{ i18n "donate_creditcard_amount_suffix" }}</div>
1416
</div>
15-
</div>
1617

17-
<div class="w-full mb-4 md:w-1/2 md:pl-3">
18-
<label class="label-uppercase mb-2">{{ i18n "donate_creditcard_frequency" }}</label>
19-
<div class="flex">
20-
<button class="w-1/2 py-2 border border-gray-300 rounded-l bg-gray-300 text-gray-700 hover:border-gray-400 hover:bg-gray-400 focus:bg-gray-400 focus:border-secondary" :class="{'border-gray-400 bg-gray-400 text-gray-800 font-medium': frequency === 'once'}" @click="frequency = 'once'">
21-
<i class="fas fa-check" x-show="frequency === 'once'"></i>
22-
{{ i18n "donate_creditcard_frequency_once" }}
23-
</button>
24-
<button class="w-1/2 py-2 border border-gray-300 rounded-r bg-gray-300 text-gray-700 hover:border-gray-400 hover:bg-gray-400 focus:bg-gray-400 focus:border-secondary" :class="{'border-gray-400 bg-gray-400 text-gray-800 font-medium': frequency === 'recurring'}" @click="frequency = 'recurring'">
25-
<i class="fas fa-check" x-show="frequency === 'recurring'"></i>
26-
{{ i18n "donate_creditcard_frequency_recurring" }}
27-
</button>
18+
<div class="w-full mb-4 md:w-1/2 md:pl-3">
19+
<label class="label-uppercase mb-2">{{ i18n "donate_creditcard_frequency" }}</label>
20+
<div class="flex">
21+
<button class="w-1/2 py-2 border border-gray-300 rounded-l bg-gray-300 text-gray-700 hover:border-gray-400 hover:bg-gray-400 focus:bg-gray-400 focus:border-secondary" :class="{'border-gray-400 bg-gray-400 text-gray-800 font-medium': frequency === 'once'}" @click="frequency = 'once'">
22+
<i class="fas fa-check" x-show="frequency === 'once'"></i>
23+
{{ i18n "donate_creditcard_frequency_once" }}
24+
</button>
25+
<button class="w-1/2 py-2 border border-gray-300 rounded-r bg-gray-300 text-gray-700 hover:border-gray-400 hover:bg-gray-400 focus:bg-gray-400 focus:border-secondary" :class="{'border-gray-400 bg-gray-400 text-gray-800 font-medium': frequency === 'recurring'}" @click="frequency = 'recurring'">
26+
<i class="fas fa-check" x-show="frequency === 'recurring'"></i>
27+
{{ i18n "donate_creditcard_frequency_recurring" }}
28+
</button>
29+
</div>
2830
</div>
2931
</div>
30-
</div>
3132

32-
<form x-show="frequency === 'once'" @submit.prevent="oneTimePayment.charge(amount, currency); $refs.captcha.reset()">
33-
<div class="mb-4">
34-
<label class="label-uppercase mb-2">{{ i18n "donate_creditcard_number" }}</label>
35-
<div> <!-- wrapper needed for stripe text field -->
36-
<input type="text" x-ref="stripePlaceholder" class="input-box w-full" @focus.once="oneTimePayment.initStripeField($refs.stripePlaceholder, '{{ i18n "donate_creditcard_once_loading" }}', '{{ .Site.Language.Lang }}')"/>
33+
<form x-show="frequency === 'once'" @submit.prevent="oneTimePayment.charge(amount, currency); $refs.captcha.reset()">
34+
<div class="mb-4">
35+
<label class="label-uppercase mb-2">{{ i18n "donate_creditcard_number" }}</label>
36+
<div> <!-- wrapper needed for stripe text field -->
37+
<input type="text" x-ref="stripePlaceholder" class="input-box w-full" @focus.once="oneTimePayment.initStripeField($refs.stripePlaceholder, '{{ i18n "donate_creditcard_once_loading" }}', '{{ .Site.Language.Lang }}')"/>
38+
</div>
3739
</div>
38-
</div>
3940

40-
<div class="text-center mt-8" x-show="!oneTimePaymentStatus.success">
41-
<p class="font-p mb-4">{{ i18n "donate_creditcard_once_instruction" | safeHTML }}</p>
41+
<div class="text-center mt-8">
42+
<p class="font-p mb-4">{{ i18n "donate_creditcard_once_instruction" | safeHTML }}</p>
4243

43-
<p class="font-p mb-4">{{ partial "checkbox.html" (dict "context" . "alpineVariable" "acceptTerms" "label" (i18n "accept_privacy" | safeHTML)) }}</p>
44+
<p class="font-p mb-4">{{ partial "checkbox.html" (dict "context" . "alpineVariable" "acceptTerms" "label" (i18n "accept_privacy" | safeHTML)) }}</p>
4445

45-
<button :disabled="oneTimePaymentStatus.inProgress || !oneTimePaymentStatus.validCardNum || !acceptTerms || captchaState == 'verifying'" class="btn btn-primary w-full md:w-64 plausible-event-name=donate-creditcard-onetime-checkout" data-umami-event="donate-creditcard-onetime-checkout">
46-
<i class="fas fa-credit-card"></i>
47-
{{ i18n "donate_creditcard_once_paynow" }}
48-
<i class="fas fa-spinner fa-spin" x-show="oneTimePaymentStatus.inProgress" aria-hidden="true"></i>
49-
</button>
46+
<button :disabled="oneTimePaymentStatus.inProgress || !oneTimePaymentStatus.validCardNum || !acceptTerms || captchaState == 'verifying'" class="btn btn-primary w-full md:w-64 plausible-event-name=donate-creditcard-onetime-checkout" data-umami-event="donate-creditcard-onetime-checkout">
47+
<i :class="{'fa-credit-card': !oneTimePaymentStatus.inProgress, 'fa-spinner fa-spin': oneTimePaymentStatus.inProgress}" class="fas fa-fw" aria-hidden="true"></i>
48+
{{ i18n "donate_creditcard_once_paynow" }}
49+
</button>
5050

51-
{{ partial "captcha.html" (dict "captchaPayload" "oneTimePaymentStatus.captcha" "captchaState" "captchaState") }}
51+
{{ partial "captcha.html" (dict "captchaPayload" "oneTimePaymentStatus.captcha" "captchaState" "captchaState") }}
5252

53-
<p class="text-sm text-red-600 mt-2" x-text="oneTimePaymentStatus.errorMessage"></p>
54-
</div>
53+
<p class="text-sm text-red-600 mt-2" x-text="oneTimePaymentStatus.errorMessage"></p>
54+
</div>
55+
</form>
5556

56-
<p class="text-lg text-center mt-8" x-show="oneTimePaymentStatus.success">{{ ":+1:" | emojify }} {{ i18n "donate_creditcard_once_success" }}</p>
57-
</form>
57+
<div x-show="frequency === 'recurring'" class="text-center">
58+
<p class="font-p mb-4">{{ i18n "donate_creditcard_recurring_instruction" | safeHTML }}</p>
59+
<p class="font-p mb-4">{{ partial "checkbox.html" (dict "context" . "alpineVariable" "acceptTerms" "label" (i18n "accept_privacy" | safeHTML)) }}</p>
60+
<button type="button" class="btn btn-primary w-full md:w-64 plausible-event-name=donate-creditcard-recurring-checkout" data-umami-event="donate-creditcard-recurring-checkout" @click="recurringPayment.checkout(amount, currency, '{{ .Site.Language.Lang }}')" :disabled="!acceptTerms">
61+
<i class="fas fa-external-link" aria-hidden="true"></i> {{ i18n "donate_creditcard_recurring_calltoaction" }}
62+
</button>
63+
</div>
64+
</div>
5865

59-
<div x-show="frequency === 'recurring'" class="text-center">
60-
<p class="font-p mb-4">{{ i18n "donate_creditcard_recurring_instruction" | safeHTML }}</p>
61-
<p class="font-p mb-4">{{ partial "checkbox.html" (dict "context" . "alpineVariable" "acceptTerms" "label" (i18n "accept_privacy" | safeHTML)) }}</p>
62-
<button type="submit" class="btn btn-primary w-full md:w-64 plausible-event-name=donate-creditcard-recurring-checkout" data-umami-event="donate-creditcard-recurring-checkout" @click="recurringPayment.checkout(amount, currency, '{{ .Site.Language.Lang }}')" :disabled="!acceptTerms">
63-
<i class="fas fa-external-link" aria-hidden="true"></i> {{ i18n "donate_creditcard_recurring_calltoaction" }}
64-
</button>
66+
<div x-show="oneTimePaymentStatus.success" x-cloak>
67+
<p class="text-lg text-center">{{ ":+1:" | emojify }} {{ i18n "donate_creditcard_once_success" }}</p>
6568
</div>
6669
</div>

0 commit comments

Comments
 (0)