From e9755981b06470c495edde3fbfc3934b1bc5c107 Mon Sep 17 00:00:00 2001 From: Joe Carstairs <65492573+Sycamost@users.noreply.github.com> Date: Sat, 12 Aug 2023 17:42:59 +0100 Subject: Adds payment success confirmation page for Lallans issues --- src/components/LallansIssue.astro | 2 +- src/components/PayPalButtons.astro | 66 +++++++++++++--------- .../lallansIssuePaymentSuccessConfirmation.ts | 26 +++++++++ .../payment-success-confirmation.astro | 30 ++++++++++ 4 files changed, 95 insertions(+), 29 deletions(-) create mode 100644 src/i18n/translations/pages/lallansIssuePaymentSuccessConfirmation.ts create mode 100644 src/pages/[locale]/furthsettins/lallans/[issueNumber]/payment-success-confirmation.astro (limited to 'src') diff --git a/src/components/LallansIssue.astro b/src/components/LallansIssue.astro index d60e2fe..26ead54 100644 --- a/src/components/LallansIssue.astro +++ b/src/components/LallansIssue.astro @@ -24,7 +24,7 @@ const t = translate(locale);
- +
diff --git a/src/components/PayPalButtons.astro b/src/components/PayPalButtons.astro index 0d9b606..91050dc 100644 --- a/src/components/PayPalButtons.astro +++ b/src/components/PayPalButtons.astro @@ -1,12 +1,17 @@ --- import env from '../lib/env'; -const PAYPAL_CLIENT_ID = env.ENVIRONMENT === 'prod' - ? env.PAYPAL_LIVE_CLIENT_ID - : env.PAYPAL_SANDBOX_CLIENT_ID; +interface Props { + successPageUrl: string; +} + +const { successPageUrl } = Astro.props; + +const PAYPAL_CLIENT_ID = + env.ENVIRONMENT === 'prod' ? env.PAYPAL_LIVE_CLIENT_ID : env.PAYPAL_SANDBOX_CLIENT_ID; --- - +
@@ -20,7 +25,7 @@ const PAYPAL_CLIENT_ID = env.ENVIRONMENT === 'prod' super(); const paypalClientId = this.dataset['paypalClientId']; - if (!paypalClientId || typeof(paypalClientId) !== 'string') { + if (!paypalClientId || typeof paypalClientId !== 'string') { throw new Error('PayPal Client ID not provided to PayPalButtons component.'); } @@ -32,35 +37,40 @@ const PAYPAL_CLIENT_ID = env.ENVIRONMENT === 'prod' intent: 'capture', }; - loadScript(paypalOptions).catch((err) => { - throw new Error('Failed to load the PayPal JS SDK script. ', err); - }).then(paypal => { - const constructButtons = paypal?.Buttons; - if (paypal && constructButtons) { - this.makePaypalButtons(constructButtons).render('#paypal-button-container'); - } - }); + loadScript(paypalOptions) + .catch((err) => { + throw new Error('Failed to load the PayPal JS SDK script. ', err); + }) + .then((paypal) => { + const constructButtons = paypal?.Buttons; + if (paypal && constructButtons) { + const successPageUrl = this.dataset['successPageUrl'] ?? '.'; + this.makePaypalButtons(constructButtons, successPageUrl).render( + '#paypal-button-container' + ); + } + }); } - makePaypalButtons(constructButtons: Required['Buttons']) { + makePaypalButtons( + constructButtons: Required['Buttons'], + successPageUrl: string + ) { return constructButtons({ // This function is called to set up the transaction details without actually carrying it out async createOrder() { const body = JSON.stringify({ - productDescription: "my product description", - shortDescription: "my product", + productDescription: 'my product description', + shortDescription: 'my product', totalPrice: 15.5, }); const headers = { - 'Content-Type': 'application/json' + 'Content-Type': 'application/json', }; let response; try { - response = await fetch( - `${backendUrl}/order`, - { method: "POST", body, headers } - ); + response = await fetch(`${backendUrl}/order`, { method: 'POST', body, headers }); } catch (err) { throw new Error(`Failed to create order. ${err}`); } @@ -84,7 +94,7 @@ const PAYPAL_CLIENT_ID = env.ENVIRONMENT === 'prod' async onApprove(data) { const body = JSON.stringify({ id: data.orderID, - isApproved: true + isApproved: true, }); const headers = { 'Content-Type': 'application/json', @@ -92,10 +102,7 @@ const PAYPAL_CLIENT_ID = env.ENVIRONMENT === 'prod' let response; try { - response = await fetch( - `${backendUrl}/order`, - { method: 'PATCH', body, headers } - ); + response = await fetch(`${backendUrl}/order`, { method: 'PATCH', body, headers }); } catch (err) { throw new Error(`Failed to capture order. ${err}`); } @@ -112,10 +119,13 @@ const PAYPAL_CLIENT_ID = env.ENVIRONMENT === 'prod' Successfully captured order with ID ${orderId}, request status is ${requestStatus}. `); - } + + console.info('Redirecting to confirmation page...'); + window.location.href = successPageUrl; + }, }); } } customElements.define('paypal-buttons', PayPalButtons); - \ No newline at end of file + diff --git a/src/i18n/translations/pages/lallansIssuePaymentSuccessConfirmation.ts b/src/i18n/translations/pages/lallansIssuePaymentSuccessConfirmation.ts new file mode 100644 index 0000000..c47ce0f --- /dev/null +++ b/src/i18n/translations/pages/lallansIssuePaymentSuccessConfirmation.ts @@ -0,0 +1,26 @@ +import type { TranslationsDictionary } from '../../../types/TranslationsDictionary'; + +const lallansIssuePaymentSuccessConfirmation = { + title: { + sco: () => 'Payment Success', + 'en-GB': () => 'Payment Success', + }, + 'payment-confirmation-message': { + sco: ({ issueNumber }: { issueNumber: string }) => ` + Gin ye hae been sent til this page, at means ye hae successfully ordered + Lallans ${issueNumber} an we’ll be pittin it in the post fur ye belyve! + `, + 'en-GB': ({ issueNumber }: { issueNumber: string }) => ` + If you have been directed to this page, that means you have successfully + ordered Lallans ${issueNumber} and we shall be putting it in the post for + you right away! + `, + }, + 'back-button-text': { + sco: ({ issueNumber }: { issueNumber: string }) => `Retour til Lallans ${issueNumber}`, + 'en-GB': ({ issueNumber }: { issueNumber: string }) => `Return to Lallans ${issueNumber}`, + }, +}; + +type Raw = typeof lallansIssuePaymentSuccessConfirmation; +export default lallansIssuePaymentSuccessConfirmation as TranslationsDictionary; diff --git a/src/pages/[locale]/furthsettins/lallans/[issueNumber]/payment-success-confirmation.astro b/src/pages/[locale]/furthsettins/lallans/[issueNumber]/payment-success-confirmation.astro new file mode 100644 index 0000000..bd3ad87 --- /dev/null +++ b/src/pages/[locale]/furthsettins/lallans/[issueNumber]/payment-success-confirmation.astro @@ -0,0 +1,30 @@ +--- +import Page from '../../../../../layouts/Page.astro'; +import localeStaticPaths from '../../../../../lib/localeStaticPaths'; +import translate from '../../../../../i18n/translate'; +import tPage from '../../../../../i18n/translations/pages/lallansIssuePaymentSuccessConfirmation'; +import type Locale from '../../../../../types/Locale'; +import { getLallansIssue } from '../../../../../data/lallans'; +import type LallansIssueNumber from '../../../../../types/LallansIssueNumber'; + +export async function getStaticPaths() { + const lallansIssueNumbers = Object.keys(getLallansIssue) as `${LallansIssueNumber}`[]; + return lallansIssueNumbers.flatMap((n) => + localeStaticPaths.map((p) => ({ ...p, params: { ...p.params, issueNumber: n } })) + ); +} + +const locale = Astro.params.locale as Locale; +const t = translate(locale); +const issueNumber = new Number(Astro.params.issueNumber).valueOf() as LallansIssueNumber; +--- + + +
+

{t(tPage, { key: 'title' })}

+

{t(tPage, { key: 'payment-confirmation-message', issueNumber: `${issueNumber}` })}

+ + {t(tPage, { key: 'back-button-text', issueNumber: `${issueNumber}` })} + +
+ -- cgit v1.2.3