Adds payment success confirmation page for Lallans issues

4 files changed, 95 insertions, 29 deletions

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);
 
   <div class="lallans-issue__header-block-end">
     <img alt="" src={`/images/lallans/issue${issue.issueNumber}.jpg`} />
-    <PayPalButtons />
+    <PayPalButtons successPageUrl={`./${issue.issueNumber}/payment-success-confirmation`} />
   </div>
 </div>
 
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;
 ---
 
-<paypal-buttons data-paypal-client-id={PAYPAL_CLIENT_ID}>
+<paypal-buttons data-paypal-client-id={PAYPAL_CLIENT_ID} data-success-page-url={successPageUrl}>
   <div id="paypal-button-container"></div>
 </paypal-buttons>
 
@@ -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<PayPalNamespace>['Buttons']) {
+    makePaypalButtons(
+      constructButtons: Required<PayPalNamespace>['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);
-</script>
\ No newline at end of file
+</script>
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<Raw>;
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;
+---
+
+<Page locale={locale} title={t(tPage, { key: 'title' })}>
+  <section>
+    <h1>{t(tPage, { key: 'title' })}</h1>
+    <p>{t(tPage, { key: 'payment-confirmation-message', issueNumber: `${issueNumber}` })}</p>
+    <a class="link" href="./">
+      {t(tPage, { key: 'back-button-text', issueNumber: `${issueNumber}` })}
+    </a>
+  </section>
+</Page>