test(story): add chromatic story to ensure thankyou page renders

frontend/src/features/public-form/PublicFormPage.stories.tsx

@@ -15,6 +15,8 @@ import { envHandlers } from '~/mocks/msw/handlers/env'
 import {
   getPublicFormErrorResponse,
   getPublicFormResponse,
+  getPublicFormSubmissionSuccessResponse,
+  getPublicFormWithoutSectionsResponse,
   postGenerateVfnOtpResponse,
   postVerifyVfnOtpResponse,
   postVfnTransactionResponse,
@@ -790,6 +792,7 @@ FormNotFoundMobile.parameters = {
 }
 
 export const WithMyInfo = Template.bind({})
+WithMyInfo.storyName = 'With MyInfo'
 WithMyInfo.parameters = {
   msw: [
     getPublicFormResponse({
@@ -821,3 +824,42 @@ WithPayment.parameters = {
     ...DEFAULT_MSW_HANDLERS,
   ],
 }
+
+export const ThankYouPage = Template.bind({})
+ThankYouPage.parameters = {
+  msw: [
+    getPublicFormWithoutSectionsResponse(),
+    getPublicFormSubmissionSuccessResponse(),
+    ...DEFAULT_MSW_HANDLERS,
+  ],
+}
+ThankYouPage.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement)
+  await waitFor(async () => {
+    await expect(canvas.getByText(/yes\/no/i)).toBeInTheDocument
+  })
+  await waitFor(async () => {
+    const noQuestionChoice = canvas.getByRole('button', {
+      name: /1\. yes\/no no option, unselected/i,
+    })
+    await userEvent.click(noQuestionChoice)
+  })
+  await waitFor(
+    async () => {
+      await userEvent.click(canvas.getByRole('button', { name: /submit/i }))
+    },
+    {
+      timeout: 5000,
+    },
+  )
+  await waitFor(
+    async () => {
+      await expect(
+        canvas.getByRole('link', { name: /submit another form/i }),
+      ).toBeInTheDocument()
+    },
+    {
+      timeout: 5000,
+    },
+  )
+}

frontend/src/mocks/msw/handlers/public-form.ts

@@ -486,6 +486,24 @@ export const getPublicFormWithoutSectionsResponse = ({
   )
 }
 
+export const getPublicFormSubmissionSuccessResponse = (
+  type: 'email' | 'storage' = 'email',
+) => {
+  return rest.post(
+    `/api/v3/forms/:formId/submissions/${type}`,
+    (_req, res, ctx) => {
+      return res(
+        ctx.status(200),
+        ctx.json({
+          message: 'Form submission successful.',
+          submissionId: '6625dfd68f4364af26332097',
+          timestamp: 1713758166140,
+        }),
+      )
+    },
+  )
+}
+
 export const getPublicFormErrorResponse = ({
   delay = 0,
   status = 404,