From 5b42cf2338086dac87a1ece6385b60b3f547b9f1 Mon Sep 17 00:00:00 2001
From: Sam Lord <hello@samlord.me>
Date: Thu, 9 Jan 2025 17:41:37 +0000
Subject: [PATCH] Portal: Refactored data-attributes file to use async / await

no issue

Will assist with later changes, like adding Captcha. Since Captcha is an
optional feature, it would complicate the promise chain considerably.
---
 apps/portal/src/data-attributes.js | 25 +++++++++++++------------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/apps/portal/src/data-attributes.js b/apps/portal/src/data-attributes.js
index 5e3dd6f563..4d3c3cb69c 100644
--- a/apps/portal/src/data-attributes.js
+++ b/apps/portal/src/data-attributes.js
@@ -3,7 +3,7 @@ import {getCheckoutSessionDataFromPlanAttribute, getUrlHistory} from './utils/he
 import {HumanReadableError, chooseBestErrorMessage} from './utils/errors';
 import i18nLib from '@tryghost/i18n';
 
-export function formSubmitHandler({event, form, errorEl, siteUrl, submitHandler},
+export async function formSubmitHandler({event, form, errorEl, siteUrl, submitHandler},
     t = (str) => {
         return str;
     }) {
@@ -60,12 +60,13 @@ export function formSubmitHandler({event, form, errorEl, siteUrl, submitHandler}
         }
     }
 
-    return fetch(`${siteUrl}/members/api/integrity-token/`, {
-        method: 'GET'
-    }).then((res) => {
-        return res.text();
-    }).then((integrityToken) => {
-        return fetch(`${siteUrl}/members/api/send-magic-link/`, {
+    try {
+        const integrityTokenRes = await fetch(`${siteUrl}/members/api/integrity-token/`, {
+            method: 'GET'
+        });
+        const integrityToken = await integrityTokenRes.text();
+
+        const magicLinkRes = await fetch(`${siteUrl}/members/api/send-magic-link/`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'
@@ -75,23 +76,23 @@ export function formSubmitHandler({event, form, errorEl, siteUrl, submitHandler}
                 integrityToken
             })
         });
-    }).then(function (res) {
+
         form.addEventListener('submit', submitHandler);
         form.classList.remove('loading');
-        if (res.ok) {
+        if (magicLinkRes.ok) {
             form.classList.add('success');
         } else {
-            return HumanReadableError.fromApiResponse(res).then((e) => {
+            return HumanReadableError.fromApiResponse(magicLinkRes).then((e) => {
                 throw e;
             });
         }
-    }).catch((err) => {
+    } catch (err) {
         if (errorEl) {
             // This theme supports a custom error element
             errorEl.innerText = chooseBestErrorMessage(err, t('There was an error sending the email, please try again'), t);
         }
         form.classList.add('error');
-    });
+    }
 }
 
 export function planClickHandler({event, el, errorEl, siteUrl, site, member, clickHandler}) {