Merge pull request #7978 from zsoh97/feat/iframe-messaging

feat: add frame messaging
opengovsg · Dec 6, 2024 · 4b38cc6 · 4b38cc6
2 parents 9dd7191 + 31c7eb5
commit 4b38cc6
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 0 deletions.
diff --git a/frontend/src/features/public-form/PublicFormProvider.tsx b/frontend/src/features/public-form/PublicFormProvider.tsx
@@ -68,6 +68,7 @@ import {
 
 import { FormNotFound } from './components/FormNotFound'
 import { decryptAttachment, decryptSubmission } from './utils/decryptSubmission'
+import { postIFrameMessage } from './utils/iframeMessaging'
 import { usePublicAuthMutations, usePublicFormMutations } from './mutations'
 import { PublicFormContext, SubmissionData } from './PublicFormContext'
 import { useEncryptedSubmission, usePublicFormView } from './queries'
@@ -626,6 +627,8 @@ export const PublicFormProvider = ({
         }
       }
 
+      postIFrameMessage({ state: 'submitting' })
+
       switch (form.responseMode) {
         case FormResponseMode.Email: {
           // Using mutateAsync so react-hook-form goes into loading state.
@@ -759,6 +762,7 @@ export const PublicFormProvider = ({
                     paymentData,
                   }) => {
                     trackSubmitForm(form)
+                    postIFrameMessage({ state: 'submitted', submissionId })
 
                     if (paymentData) {
                       navigate(getPaymentPageUrl(formId, paymentData.paymentId))
@@ -781,6 +785,7 @@ export const PublicFormProvider = ({
                 },
               )
               .catch(async (error) => {
+                postIFrameMessage({ state: 'submitError' })
                 datadogLogs.logger.warn(`handleSubmitForm: ${error.message}`, {
                   meta: {
                     ...logMeta,
@@ -823,6 +828,7 @@ export const PublicFormProvider = ({
                   paymentData,
                 }) => {
                   trackSubmitForm(form)
+                  postIFrameMessage({ state: 'submitted', submissionId })
                   if (paymentData) {
                     navigate(getPaymentPageUrl(formId, paymentData.paymentId))
                     storePaymentMemory(paymentData.paymentId)
@@ -844,6 +850,7 @@ export const PublicFormProvider = ({
               },
             )
             .catch(async (error) => {
+              postIFrameMessage({ state: 'submitError' })
               // TODO(#5826): Remove when we have resolved the Network Error
               datadogLogs.logger.warn(
                 `handleSubmitForm: submit with virus scan`,

diff --git a/frontend/src/features/public-form/utils/iframeMessaging.ts b/frontend/src/features/public-form/utils/iframeMessaging.ts
@@ -0,0 +1,21 @@
+export type PublicFormIFrameMessage =
+  | { state: 'submitting' | 'submitError' }
+  | { state: 'submitted'; submissionId: string }
+
+const TRUSTED_TARGET_ORIGINS = [
+  'https://pay.gov.sg',
+  'https://exp.pay.gov.sg',
+  'https://staging.pay.gov.sg',
+]
+
+export const postIFrameMessage = (message: PublicFormIFrameMessage): void => {
+  // De-risk by wrapping in try-catch even though this is synchronous. This should
+  // never block form submission.
+  try {
+    TRUSTED_TARGET_ORIGINS.forEach((origin) => {
+      window.parent.postMessage(message, origin)
+    })
+  } catch (error) {
+    console.warn('Error while posting form state to iframe parent', error)
+  }
+}