From 0b99bd01db9a22dd886c93764c18736303a74b1e Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Thu, 27 Jul 2023 20:30:13 +0000
Subject: [PATCH 01/13] chore(deps-dev): bump eslint-config-prettier from 8.8.0
 to 8.9.0 in /shared (#6576)

chore(deps-dev): bump eslint-config-prettier in /shared

Bumps [eslint-config-prettier](https://github.com/prettier/eslint-config-prettier) from 8.8.0 to 8.9.0.
- [Changelog](https://github.com/prettier/eslint-config-prettier/blob/main/CHANGELOG.md)
- [Commits](https://github.com/prettier/eslint-config-prettier/compare/v8.8.0...v8.9.0)

---
updated-dependencies:
- dependency-name: eslint-config-prettier
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 shared/package-lock.json | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/shared/package-lock.json b/shared/package-lock.json
index 39a5553d2a..11e6c1286b 100644
--- a/shared/package-lock.json
+++ b/shared/package-lock.json
@@ -372,9 +372,9 @@
       }
     },
     "node_modules/eslint-config-prettier": {
-      "version": "8.8.0",
-      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.8.0.tgz",
-      "integrity": "sha512-wLbQiFre3tdGgpDv67NQKnJuTlcUVYHas3k+DZCc2U2BadthoEY4B7hLPvAxaqdyOGCzuLfii2fqGph10va7oA==",
+      "version": "8.9.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.9.0.tgz",
+      "integrity": "sha512-+sbni7NfVXnOpnRadUA8S28AUlsZt9GjgFvABIRL9Hkn8KqNzOp+7Lw4QWtrwn20KzU3wqu1QoOj2m+7rKRqkA==",
       "dev": true,
       "bin": {
         "eslint-config-prettier": "bin/cli.js"
@@ -1114,9 +1114,9 @@
       }
     },
     "eslint-config-prettier": {
-      "version": "8.8.0",
-      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.8.0.tgz",
-      "integrity": "sha512-wLbQiFre3tdGgpDv67NQKnJuTlcUVYHas3k+DZCc2U2BadthoEY4B7hLPvAxaqdyOGCzuLfii2fqGph10va7oA==",
+      "version": "8.9.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.9.0.tgz",
+      "integrity": "sha512-+sbni7NfVXnOpnRadUA8S28AUlsZt9GjgFvABIRL9Hkn8KqNzOp+7Lw4QWtrwn20KzU3wqu1QoOj2m+7rKRqkA==",
       "dev": true
     },
     "eslint-plugin-prettier": {

From bd4915522a833c81a5a44e20d300bc5706f9ec32 Mon Sep 17 00:00:00 2001
From: wanlingt <56983748+wanlingt@users.noreply.github.com>
Date: Fri, 28 Jul 2023 17:02:59 +0800
Subject: [PATCH 02/13] ref: remove download receipt URL (#6577)

* ref: remove download receipt URL

* test: remove downloadPaymentReceipt test
---
 .../components/DownloadReceiptBlock.tsx       | 21 +-----
 .../src/features/public-form/utils/urls.ts    |  7 --
 .../__tests__/stripe.controller.spec.ts       | 44 ------------
 src/app/modules/payments/stripe.controller.ts | 72 -------------------
 .../routes/api/v3/payments/payments.routes.ts | 15 +---
 5 files changed, 2 insertions(+), 157 deletions(-)

diff --git a/frontend/src/features/public-form/components/FormPaymentPage/stripe/components/DownloadReceiptBlock.tsx b/frontend/src/features/public-form/components/FormPaymentPage/stripe/components/DownloadReceiptBlock.tsx
index 0304ac64f8..8b16156b2f 100644
--- a/frontend/src/features/public-form/components/FormPaymentPage/stripe/components/DownloadReceiptBlock.tsx
+++ b/frontend/src/features/public-form/components/FormPaymentPage/stripe/components/DownloadReceiptBlock.tsx
@@ -3,10 +3,7 @@ import { BiDownload } from 'react-icons/bi'
 import { useToast } from '~hooks/useToast'
 import Button from '~components/Button'
 
-import {
-  getPaymentInvoiceDownloadUrl,
-  getPaymentReceiptDownloadUrl,
-} from '~features/public-form/utils/urls'
+import { getPaymentInvoiceDownloadUrl } from '~features/public-form/utils/urls'
 
 import { GenericMessageBlock } from './GenericMessageBlock'
 
@@ -23,13 +20,6 @@ export const DownloadReceiptBlock = ({
 }: DownloadReceiptBlockProps) => {
   const toast = useToast({ status: 'success', isClosable: true })
 
-  const handleReceiptClick = () => {
-    toast({
-      description: 'Receipt download started',
-    })
-    window.location.href = getPaymentReceiptDownloadUrl(formId, paymentId)
-  }
-
   const handleInvoiceClick = () => {
     toast({
       description: 'Proof of payment download started',
@@ -43,15 +33,6 @@ export const DownloadReceiptBlock = ({
       submissionId={submissionId}
     >
       <>
-        <Button
-          hidden // Currently hidden for JTC
-          mt="2.25rem"
-          mr="2.25rem"
-          leftIcon={<BiDownload fontSize="1.5rem" />}
-          onClick={handleReceiptClick}
-        >
-          Save payment receipt
-        </Button>
         <Button
           mt="2.25rem"
           leftIcon={<BiDownload fontSize="1.5rem" />}
diff --git a/frontend/src/features/public-form/utils/urls.ts b/frontend/src/features/public-form/utils/urls.ts
index bb56afe563..4bc2075bd9 100644
--- a/frontend/src/features/public-form/utils/urls.ts
+++ b/frontend/src/features/public-form/utils/urls.ts
@@ -6,13 +6,6 @@ export const getPaymentPageUrl = (formId: string, paymentId: string) => {
   return `/${formId}/payment/${paymentId}` as const
 }
 
-export const getPaymentReceiptDownloadUrl = (
-  formId: string,
-  paymentId: string,
-) => {
-  return `${API_BASE_URL}/payments/${formId}/${paymentId}/receipt/download` as const
-}
-
 export const getPaymentInvoiceDownloadUrl = (
   formId: string,
   paymentId: string,
diff --git a/src/app/modules/payments/__tests__/stripe.controller.spec.ts b/src/app/modules/payments/__tests__/stripe.controller.spec.ts
index cabea5bd24..5f1ccfd931 100644
--- a/src/app/modules/payments/__tests__/stripe.controller.spec.ts
+++ b/src/app/modules/payments/__tests__/stripe.controller.spec.ts
@@ -192,50 +192,6 @@ describe('stripe.controller', () => {
     })
   })
 
-  describe('downloadReceiptInvoice', () => {
-    beforeEach(async () => {
-      await dbHandler.clearCollection(Payment.collection.name)
-      await dbHandler.clearCollection(EncryptPendingSubmission.collection.name)
-    })
-    it('should generate return a pdf file when receipt url is present', async () => {
-      const pendingSubmission = await EncryptPendingSubmission.create({
-        submissionType: SubmissionType.Encrypt,
-        form: MOCK_FORM_ID,
-        encryptedContent: 'some random encrypted content',
-        version: 1,
-      })
-      const payment = await Payment.create({
-        formId: MOCK_FORM_ID,
-        targetAccountId: 'acct_MOCK_ACCOUNT_ID',
-        pendingSubmissionId: pendingSubmission._id,
-        amount: 12345,
-        status: PaymentStatus.Succeeded,
-        paymentIntentId: 'pi_MOCK_PAYMENT_INTENT',
-        email: 'formsg@tech.gov.sg',
-        completedPayment: {
-          receiptUrl: 'http://form.gov.sg',
-        },
-        gstEnabled: false,
-      })
-
-      const mockReq = expressHandler.mockRequest({
-        params: { formId: 'test@example.com', paymentId: payment._id },
-      })
-      const mockRes = expressHandler.mockResponse()
-      const axiosSpy = jest
-        .spyOn(axios, 'get')
-        .mockResolvedValueOnce({ data: '<html>>some html</html>' })
-
-      // Act
-      await StripeController.downloadPaymentReceipt(mockReq, mockRes, jest.fn())
-
-      // Assert
-      expect(mockRes.status).toHaveBeenCalledWith(200)
-      expect(mockRes.send).toHaveBeenCalledOnce()
-      expect(axiosSpy).toHaveBeenCalledOnce()
-    })
-  })
-
   describe('_handleConnectOauthCallback', () => {
     beforeEach(async () => {
       await dbHandler.clearCollection(Payment.collection.name)
diff --git a/src/app/modules/payments/stripe.controller.ts b/src/app/modules/payments/stripe.controller.ts
index b86497636c..3461eafc93 100644
--- a/src/app/modules/payments/stripe.controller.ts
+++ b/src/app/modules/payments/stripe.controller.ts
@@ -1,6 +1,5 @@
 // Use 'stripe-event-types' for better type discrimination.
 /// <reference types="stripe-event-types" />
-import axios from 'axios'
 import { celebrate, Joi, Segments } from 'celebrate'
 import { StatusCodes } from 'http-status-codes'
 import get from 'lodash/get'
@@ -18,7 +17,6 @@ import config from '../../config/config'
 import { paymentConfig } from '../../config/features/payment.config'
 import { createLoggerWithLabel } from '../../config/logger'
 import { stripe } from '../../loaders/stripe'
-import { generatePdfFromHtml } from '../../utils/convert-html-to-pdf'
 import { createReqMeta } from '../../utils/request'
 import { ControllerHandler } from '../core/core.types'
 import * as FormService from '../form/form.service'
@@ -221,76 +219,6 @@ export const downloadPaymentInvoice: ControllerHandler<{
     })
 }
 
-/**
- * Handler for GET /api/v3/payments/:formId/:paymentId/invoice/download
- * Receives Stripe webhooks and updates the database with transaction details.
- *
- * @returns 200 if webhook is successfully processed
- * @returns 404 if the PaymentId is not found
- * @returns 404 if the FormId is not found
- * @returns 404 if payment.completedPayment?.receiptUrl is not found
- */
-export const downloadPaymentReceipt: ControllerHandler<{
-  formId: string
-  paymentId: string
-}> = (req, res) => {
-  const { formId, paymentId } = req.params
-  logger.info({
-    message: 'downloadPaymentReceipt endpoint called',
-    meta: {
-      action: 'downloadPaymentReceipt',
-      formId,
-      paymentId,
-    },
-  })
-
-  return PaymentService.findPaymentById(paymentId)
-    .map((payment) => {
-      logger.info({
-        message: 'Found paymentId in payment document',
-        meta: {
-          action: 'downloadPaymentReceipt',
-          payment,
-        },
-      })
-      if (!payment.completedPayment?.receiptUrl) {
-        return res
-          .status(StatusCodes.NOT_FOUND)
-          .send({ message: 'Receipt url not ready' })
-      }
-      // retrieve receiptURL as html
-      return (
-        axios
-          .get<string>(payment.completedPayment.receiptUrl)
-          // convert to pdf and return
-          .then((receiptUrlResponse) => {
-            const html = receiptUrlResponse.data
-            const pdfBufferPromise = generatePdfFromHtml(html)
-            return pdfBufferPromise
-          })
-          .then((pdfBuffer) => {
-            res.set({
-              'Content-Type': 'application/pdf',
-              'Content-Disposition': `attachment; filename=${paymentId}-receipt.pdf`,
-            })
-            return res.status(StatusCodes.OK).send(pdfBuffer)
-          })
-      )
-    })
-    .mapErr((error) => {
-      logger.error({
-        message: 'Error retrieving receipt',
-        meta: {
-          action: 'downloadPaymentReceipt',
-          formId,
-          paymentId,
-        },
-        error,
-      })
-      return res.status(StatusCodes.NOT_FOUND).json({ message: error })
-    })
-}
-
 const _handleConnectOauthCallback: ControllerHandler<
   unknown,
   unknown,
diff --git a/src/app/routes/api/v3/payments/payments.routes.ts b/src/app/routes/api/v3/payments/payments.routes.ts
index 03ff819b07..19c27e72d9 100644
--- a/src/app/routes/api/v3/payments/payments.routes.ts
+++ b/src/app/routes/api/v3/payments/payments.routes.ts
@@ -20,24 +20,11 @@ PaymentsRouter.get(
   StripeController.checkPaymentReceiptStatus,
 )
 
-/**
- * Downloads the receipt pdf
- * @route GET /payments/:formId/:paymentId/receipt/download
- *
- * @returns 200 with receipt attatchment as content in PDF
- * @returns 404 if receipt url doesn't exist or payment does not exist
- */
-PaymentsRouter.get(
-  '/:formId([a-fA-F0-9]{24})/:paymentId([a-fA-F0-9]{24})/receipt/download',
-  limitRate({ max: rateLimitConfig.downloadPaymentReceipt }),
-  StripeController.downloadPaymentReceipt,
-)
-
 /**
  * Downloads the invoice pdf
  * @route GET /payments/:formId/:paymentId/invoice/download
  *
- * @returns 200 with receipt attatchment as content in PDF
+ * @returns 200 with receipt attachment as content in PDF
  * @returns 404 if receipt url doesn't exist or payment does not exist
  */
 PaymentsRouter.get(

From 6ad44c20d6d9955940bb4e5c93d63a3673946f4f Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Sun, 30 Jul 2023 19:35:24 +0000
Subject: [PATCH 03/13] fix(deps): bump libphonenumber-js from 1.10.37 to
 1.10.38 in /shared (#6580)

Bumps [libphonenumber-js](https://gitlab.com/catamphetamine/libphonenumber-js) from 1.10.37 to 1.10.38.
- [Changelog](https://gitlab.com/catamphetamine/libphonenumber-js/blob/master/CHANGELOG.md)
- [Commits](https://gitlab.com/catamphetamine/libphonenumber-js/compare/v1.10.37...v1.10.38)

---
updated-dependencies:
- dependency-name: libphonenumber-js
  dependency-type: direct:production
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 shared/package-lock.json | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/shared/package-lock.json b/shared/package-lock.json
index 11e6c1286b..57c350b013 100644
--- a/shared/package-lock.json
+++ b/shared/package-lock.json
@@ -608,9 +608,9 @@
       }
     },
     "node_modules/libphonenumber-js": {
-      "version": "1.10.37",
-      "resolved": "https://registry.npmjs.org/libphonenumber-js/-/libphonenumber-js-1.10.37.tgz",
-      "integrity": "sha512-Z10PCaOCiAxbUxLyR31DNeeNugSVP6iv/m7UrSKS5JHziEMApJtgku4e9Q69pzzSC9LnQiM09sqsGf2ticZnMw=="
+      "version": "1.10.38",
+      "resolved": "https://registry.npmjs.org/libphonenumber-js/-/libphonenumber-js-1.10.38.tgz",
+      "integrity": "sha512-4NjVXVUmpZ9Zsqq6FXa2+MKI+KAI3tOqA0pxXgXGluhpj4ge5didmbWJpMBqGB3AVGv1SnEtKdGTbxjSEG1kCQ=="
     },
     "node_modules/lie": {
       "version": "3.3.0",
@@ -1292,9 +1292,9 @@
       }
     },
     "libphonenumber-js": {
-      "version": "1.10.37",
-      "resolved": "https://registry.npmjs.org/libphonenumber-js/-/libphonenumber-js-1.10.37.tgz",
-      "integrity": "sha512-Z10PCaOCiAxbUxLyR31DNeeNugSVP6iv/m7UrSKS5JHziEMApJtgku4e9Q69pzzSC9LnQiM09sqsGf2ticZnMw=="
+      "version": "1.10.38",
+      "resolved": "https://registry.npmjs.org/libphonenumber-js/-/libphonenumber-js-1.10.38.tgz",
+      "integrity": "sha512-4NjVXVUmpZ9Zsqq6FXa2+MKI+KAI3tOqA0pxXgXGluhpj4ge5didmbWJpMBqGB3AVGv1SnEtKdGTbxjSEG1kCQ=="
     },
     "lie": {
       "version": "3.3.0",

From 18e3723940238f84d55dc926e2e835445064f26b Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 31 Jul 2023 10:08:28 +0800
Subject: [PATCH 04/13] fix(deps): bump type-fest from 3.13.0 to 4.1.0 in
 /shared (#6579)

Bumps [type-fest](https://github.com/sindresorhus/type-fest) from 3.13.0 to 4.1.0.
- [Release notes](https://github.com/sindresorhus/type-fest/releases)
- [Commits](https://github.com/sindresorhus/type-fest/compare/v3.13.0...v4.1.0)

---
updated-dependencies:
- dependency-name: type-fest
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 shared/package-lock.json | 16 ++++++++--------
 shared/package.json      |  2 +-
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/shared/package-lock.json b/shared/package-lock.json
index 57c350b013..1c90e3da75 100644
--- a/shared/package-lock.json
+++ b/shared/package-lock.json
@@ -13,7 +13,7 @@
         "jszip": "^3.7.1",
         "libphonenumber-js": "^1.9.43",
         "lodash": "^4.17.21",
-        "type-fest": "^3.2.0",
+        "type-fest": "^4.1.0",
         "validator": "^13.7.0",
         "zod": "^3.11.6"
       },
@@ -862,11 +862,11 @@
       }
     },
     "node_modules/type-fest": {
-      "version": "3.13.0",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-3.13.0.tgz",
-      "integrity": "sha512-Gur3yQGM9qiLNs0KPP7LPgeRbio2QTt4xXouobMCarR0/wyW3F+F/+OWwshg3NG0Adon7uQfSZBpB46NfhoF1A==",
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.1.0.tgz",
+      "integrity": "sha512-VJGJVepayd8OWavP+rgXt4i3bfLk+tSomTV7r4mca2XD/oTCWnkJlNkpXavkxdmtU2aKdAmFGeHvoQutOVHCZg==",
       "engines": {
-        "node": ">=14.16"
+        "node": ">=16"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
@@ -1475,9 +1475,9 @@
       }
     },
     "type-fest": {
-      "version": "3.13.0",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-3.13.0.tgz",
-      "integrity": "sha512-Gur3yQGM9qiLNs0KPP7LPgeRbio2QTt4xXouobMCarR0/wyW3F+F/+OWwshg3NG0Adon7uQfSZBpB46NfhoF1A=="
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.1.0.tgz",
+      "integrity": "sha512-VJGJVepayd8OWavP+rgXt4i3bfLk+tSomTV7r4mca2XD/oTCWnkJlNkpXavkxdmtU2aKdAmFGeHvoQutOVHCZg=="
     },
     "util-deprecate": {
       "version": "1.0.2",
diff --git a/shared/package.json b/shared/package.json
index e0dc092b53..4135e734fe 100644
--- a/shared/package.json
+++ b/shared/package.json
@@ -8,7 +8,7 @@
     "jszip": "^3.7.1",
     "libphonenumber-js": "^1.9.43",
     "lodash": "^4.17.21",
-    "type-fest": "^3.2.0",
+    "type-fest": "^4.1.0",
     "validator": "^13.7.0",
     "zod": "^3.11.6"
   },

From c24ef55b4c5f5c113735dfd9215db601573ca7a5 Mon Sep 17 00:00:00 2001
From: wanlingt <56983748+wanlingt@users.noreply.github.com>
Date: Tue, 1 Aug 2023 17:07:50 +0800
Subject: [PATCH 05/13] feat: remove divider in payments input panel (#6586)

---
 .../PaymentsInputPanel/PaymentsInputPanel.tsx | 54 ++++++++++---------
 1 file changed, 28 insertions(+), 26 deletions(-)

diff --git a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/field-panels/PaymentsInputPanel/PaymentsInputPanel.tsx b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/field-panels/PaymentsInputPanel/PaymentsInputPanel.tsx
index bf58a58545..ab3c8c4b5f 100644
--- a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/field-panels/PaymentsInputPanel/PaymentsInputPanel.tsx
+++ b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/field-panels/PaymentsInputPanel/PaymentsInputPanel.tsx
@@ -7,7 +7,7 @@ import {
 } from 'react-hook-form'
 import { Link as ReactLink } from 'react-router-dom'
 import { useDebounce } from 'react-use'
-import { Box, FormControl, Link, Text, Textarea } from '@chakra-ui/react'
+import { Box, FormControl, Link, Stack, Text, Textarea } from '@chakra-ui/react'
 import { cloneDeep } from 'lodash'
 
 import {
@@ -204,31 +204,33 @@ const PaymentInput = ({
           )}
         />
       </FormControl>
-      <FormControl
-        isReadOnly={paymentsMutation.isLoading}
-        isInvalid={!!errors.name}
-        isDisabled={isDisabled}
-        isRequired
-      >
-        <FormLabel description="This will be reflected on the proof of payment">
-          Product/service name
-        </FormLabel>
-        <Input
-          {...register('name', {
-            required: 'This field is required',
-          })}
-        />
-        <FormErrorMessage>{errors.name?.message}</FormErrorMessage>
-      </FormControl>
-      <FormControl
-        isReadOnly={paymentsMutation.isLoading}
-        isDisabled={isDisabled}
-        isRequired
-      >
-        <FormLabel>Description</FormLabel>
-        <Textarea {...register('description')} />
-        <FormErrorMessage>{errors.description?.message}</FormErrorMessage>
-      </FormControl>
+      <Stack spacing="2rem">
+        <FormControl
+          isReadOnly={paymentsMutation.isLoading}
+          isInvalid={!!errors.name}
+          isDisabled={isDisabled}
+          isRequired
+        >
+          <FormLabel description="This will be reflected on the proof of payment">
+            Product/service name
+          </FormLabel>
+          <Input
+            {...register('name', {
+              required: 'This field is required',
+            })}
+          />
+          <FormErrorMessage>{errors.name?.message}</FormErrorMessage>
+        </FormControl>
+        <FormControl
+          isReadOnly={paymentsMutation.isLoading}
+          isDisabled={isDisabled}
+          isRequired
+        >
+          <FormLabel>Description</FormLabel>
+          <Textarea {...register('description')} />
+          <FormErrorMessage>{errors.description?.message}</FormErrorMessage>
+        </FormControl>
+      </Stack>
       {paymentsData?.payment_type === PaymentType.Variable ? (
         <VariablePaymentAmountField
           isLoading={paymentsMutation.isLoading}

From cfa0544e6a55618b887e661845cb1609b06886ea Mon Sep 17 00:00:00 2001
From: wanlingt <56983748+wanlingt@users.noreply.github.com>
Date: Tue, 1 Aug 2023 18:51:47 +0800
Subject: [PATCH 06/13] feat: payments UI/UX clean up (#6581)

* feat: add helper text to variable payments field for min and max val

* feat: update payment settings page copy

* feat: misc copy changes

* fix: increase spacing between 'Payments' header and first element

* fix: update stripe onboarding guide link

* feat: change description from textarea to input

* fix: copy changes

* feat: remove placeholder from business address and gst reg no inputs

* feat: reorder payment item description

* feat: change button copy for paynow option

* fix: remove console.log

* fix: remove unused import
---
 frontend/src/constants/links.ts               |  3 +-
 .../FixedPaymentAmountField.tsx               |  2 +-
 .../PaymentsInputPanel/PaymentsInputPanel.tsx |  4 +--
 .../VariablePaymentAmountField.tsx            |  7 ++--
 .../common/utils/getPaymentDataView.ts        |  3 +-
 .../BusinessInfoSection.tsx                   | 14 ++++----
 .../PaymentSettingsSection.tsx                | 34 ++++++++++++-------
 .../PaymentsUnsupportedMsg.tsx                |  2 +-
 .../StripeConnectButton.tsx                   |  2 +-
 .../components/PaymentItemNameDescription.tsx |  4 ++-
 .../VariablePaymentItemDetailBlock.tsx        |  8 ++++-
 .../stripe/components/PaymentBlock.tsx        | 15 ++++++--
 .../rollout-announcement/Announcements.tsx    |  2 +-
 .../features/whats-new/FeatureUpdateList.ts   |  2 +-
 .../components/WorkspacePageContent.tsx       |  2 +-
 .../src/pages/Landing/Home/LandingPage.tsx    |  4 +--
 .../Landing/Payments/LandingPaymentsPage.tsx  | 10 +++---
 .../Field/PaymentPreview/PaymentPreview.tsx   |  2 +-
 src/app/services/mail/mail.utils.ts           |  6 ++--
 19 files changed, 76 insertions(+), 50 deletions(-)

diff --git a/frontend/src/constants/links.ts b/frontend/src/constants/links.ts
index 719942d8a0..52b38617d2 100644
--- a/frontend/src/constants/links.ts
+++ b/frontend/src/constants/links.ts
@@ -31,8 +31,7 @@ export const GUIDE_PREVENT_EMAIL_BOUNCE =
 export const GUIDE_EMAIL_RELIABILITY =
   'https://go.gov.sg/formsg-guide-email-reliability'
 export const GUIDE_PREFILL = 'https://go.gov.sg/formsg-guide-prefills'
-export const GUIDE_STRIPE_ONBOARDING =
-  'https://go.gov.sg/formsg-stripe-onboarding'
+export const GUIDE_STRIPE_ONBOARDING = 'https://go.gov.sg/formsg-payments'
 export const GUIDE_PAYMENTS_ENTRY = 'https://go.gov.sg/formsg-payment-overview'
 export const GUIDE_PAYMENTS_INVOICE_DIFFERENCES =
   'https://go.gov.sg/formsg-payments-invoice-differences'
diff --git a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/field-panels/PaymentsInputPanel/FixedPaymentAmountField.tsx b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/field-panels/PaymentsInputPanel/FixedPaymentAmountField.tsx
index bc9bf363c6..59918f320d 100644
--- a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/field-panels/PaymentsInputPanel/FixedPaymentAmountField.tsx
+++ b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/field-panels/PaymentsInputPanel/FixedPaymentAmountField.tsx
@@ -38,7 +38,7 @@ export const FixedPaymentAmountField = ({
       isInvalid={!!errors[DISPLAY_AMOUNT_FIELD_KEY]}
       isRequired
     >
-      <FormLabel isRequired description="Amount should include GST">
+      <FormLabel isRequired description="Including GST">
         Payment amount
       </FormLabel>
       <Controller
diff --git a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/field-panels/PaymentsInputPanel/PaymentsInputPanel.tsx b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/field-panels/PaymentsInputPanel/PaymentsInputPanel.tsx
index ab3c8c4b5f..f6a23afd8e 100644
--- a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/field-panels/PaymentsInputPanel/PaymentsInputPanel.tsx
+++ b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/field-panels/PaymentsInputPanel/PaymentsInputPanel.tsx
@@ -7,7 +7,7 @@ import {
 } from 'react-hook-form'
 import { Link as ReactLink } from 'react-router-dom'
 import { useDebounce } from 'react-use'
-import { Box, FormControl, Link, Stack, Text, Textarea } from '@chakra-ui/react'
+import { Box, FormControl, Link, Stack, Text } from '@chakra-ui/react'
 import { cloneDeep } from 'lodash'
 
 import {
@@ -227,7 +227,7 @@ const PaymentInput = ({
           isRequired
         >
           <FormLabel>Description</FormLabel>
-          <Textarea {...register('description')} />
+          <Input {...register('description')} />
           <FormErrorMessage>{errors.description?.message}</FormErrorMessage>
         </FormControl>
       </Stack>
diff --git a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/field-panels/PaymentsInputPanel/VariablePaymentAmountField.tsx b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/field-panels/PaymentsInputPanel/VariablePaymentAmountField.tsx
index bce9785704..3d9833f41e 100644
--- a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/field-panels/PaymentsInputPanel/VariablePaymentAmountField.tsx
+++ b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/field-panels/PaymentsInputPanel/VariablePaymentAmountField.tsx
@@ -59,10 +59,11 @@ export const VariablePaymentAmountField = ({
       isReadOnly={isLoading}
       // these invalid checks are required to trigger FormErrorMessage to display
       isInvalid={!!errors[MIN_FIELD_KEY]?.message || !!errors[MAX_FIELD_KEY]}
+      isDisabled={isDisabled}
     >
       <FormLabel
         isRequired
-        description="Customise the amount that respondents are allowed to define"
+        description="Set the minimum and maximum amounts respondents can pay"
       >
         Payment amount limit
       </FormLabel>
@@ -71,7 +72,7 @@ export const VariablePaymentAmountField = ({
           isInvalid={!!errors[MIN_FIELD_KEY]}
           isDisabled={isDisabled}
         >
-          <FormLabel isRequired>Minimum Amount</FormLabel>
+          <FormLabel isRequired>Minimum amount</FormLabel>
           <Controller
             name={MIN_FIELD_KEY}
             control={control}
@@ -91,7 +92,7 @@ export const VariablePaymentAmountField = ({
           isInvalid={!!errors[MAX_FIELD_KEY]}
           isDisabled={isDisabled}
         >
-          <FormLabel isRequired>Maximum Amount</FormLabel>
+          <FormLabel isRequired>Maximum amount</FormLabel>
           <Controller
             name={MAX_FIELD_KEY}
             control={control}
diff --git a/frontend/src/features/admin-form/responses/common/utils/getPaymentDataView.ts b/frontend/src/features/admin-form/responses/common/utils/getPaymentDataView.ts
index d5df6f1e55..f8dfc0f843 100644
--- a/frontend/src/features/admin-form/responses/common/utils/getPaymentDataView.ts
+++ b/frontend/src/features/admin-form/responses/common/utils/getPaymentDataView.ts
@@ -9,7 +9,8 @@ type PaymentDataViewItem = {
 }
 
 /** Utility functions for prettifying the output of the payment data view. */
-const centsToDollarString = (cents: number) => `S$${(cents / 100).toFixed(2)}`
+export const centsToDollarString = (cents: number) =>
+  `S$${(cents / 100).toFixed(2)}`
 const toSentenceCase = (str: string) =>
   `${str.charAt(0).toUpperCase()}${str.substring(1).toLowerCase()}`
     // replace underscores with a space
diff --git a/frontend/src/features/admin-form/settings/components/PaymentSettingsSection/BusinessInfoSection.tsx b/frontend/src/features/admin-form/settings/components/PaymentSettingsSection/BusinessInfoSection.tsx
index b03a9bceec..55c564fd66 100644
--- a/frontend/src/features/admin-form/settings/components/PaymentSettingsSection/BusinessInfoSection.tsx
+++ b/frontend/src/features/admin-form/settings/components/PaymentSettingsSection/BusinessInfoSection.tsx
@@ -24,12 +24,10 @@ import { useAdminFormSettings } from '../../queries'
 interface BusinessFieldInputProps {
   initialValue: string
   handleMutation: (newAddress: string) => void
-  placeholder: string
 }
 const BusinessFieldInput = ({
   initialValue,
   handleMutation,
-  placeholder,
 }: BusinessFieldInputProps): JSX.Element => {
   const [value, setValue] = useState(initialValue)
 
@@ -66,8 +64,6 @@ const BusinessFieldInput = ({
       onChange={handleValueChange}
       onKeyDown={handleKeydown}
       onBlur={handleBlur}
-      placeholder={placeholder}
-      _placeholder={{ opacity: 1 }}
     />
   )
 }
@@ -92,8 +88,9 @@ const BusinessInfoBlock = ({
         <FormControl mb="2.5rem" isReadOnly={mutateFormBusiness.isLoading}>
           <FormLabel isRequired>GST Registration Number</FormLabel>
           <BusinessFieldInput
-            placeholder={agencyDefaults?.gstRegNo || ''}
-            initialValue={settings.business?.gstRegNo || ''}
+            initialValue={
+              settings.business?.gstRegNo || agencyDefaults?.gstRegNo || ''
+            }
             handleMutation={handleGstRegNoMutation}
           />
         </FormControl>
@@ -101,8 +98,9 @@ const BusinessInfoBlock = ({
       <FormControl mb="2.5rem" isReadOnly={mutateFormBusiness.isLoading}>
         <FormLabel isRequired>Business Address</FormLabel>
         <BusinessFieldInput
-          placeholder={agencyDefaults?.address || ''}
-          initialValue={settings.business?.address || ''}
+          initialValue={
+            settings.business?.address || agencyDefaults?.address || ''
+          }
           handleMutation={handleAddressMutation}
         />
       </FormControl>
diff --git a/frontend/src/features/admin-form/settings/components/PaymentSettingsSection/PaymentSettingsSection.tsx b/frontend/src/features/admin-form/settings/components/PaymentSettingsSection/PaymentSettingsSection.tsx
index 4a503f48e9..02eca3cc8f 100644
--- a/frontend/src/features/admin-form/settings/components/PaymentSettingsSection/PaymentSettingsSection.tsx
+++ b/frontend/src/features/admin-form/settings/components/PaymentSettingsSection/PaymentSettingsSection.tsx
@@ -7,6 +7,7 @@ import {
   Icon,
   Skeleton,
   Text,
+  VStack,
 } from '@chakra-ui/react'
 
 import { FormResponseMode, PaymentChannel } from '~shared/types'
@@ -40,30 +41,39 @@ const BeforeConnectionInstructions = ({
   const { data: paymentGuideLink } = usePaymentGuideLink()
   if (isProductionEnv) {
     return (
-      <>
-        <InlineMessage variant="info" my="2rem">
+      <VStack spacing="2.5rem" alignItems="start">
+        <InlineMessage variant="info">
           <Text>
             Read{' '}
             <Link isExternal href={paymentGuideLink}>
               our guide
             </Link>{' '}
-            to learn more about onboarding to Stripe. To enjoy bulk tender
-            transaction rates,{' '}
-            <Link href={GUIDE_STRIPE_ONBOARDING} target="_blank">
-              use this form
-            </Link>{' '}
-            to submit your Stripe account ID and raise a purchase order to
-            Stripe.
+            to set up a Stripe account. If your agency already has a Stripe
+            account, you can connect it to this form.
           </Text>
         </InlineMessage>
+        <Text textStyle="h3" color="secondary.500">
+          Bulk transaction rates
+        </Text>
+        <Text>
+          To request bulk transaction rates for your payments, use{' '}
+          <Link href={GUIDE_STRIPE_ONBOARDING} target="_blank">
+            this form
+          </Link>{' '}
+          to contact us for assistance.{' '}
+          <Text as="b">
+            Without this step, you will be charged default transaction rates.
+          </Text>
+        </Text>
+
         {/* Stripe connect button should only be enabled when checkbox is checked. */}
         <Checkbox
           isChecked={allowConnect}
           mb="2rem"
           onChange={(e) => setAllowConnect(e.target.checked)}
         >
-          I understand that if I do not send my Stripe account ID and raise a
-          purchase order to Stripe, I will be paying default transaction rates.
+          I understand that I will be paying default transaction rates, unless I
+          have requested bulk transaction rates and received confirmation
         </Checkbox>
         <StripeConnectButton
           connectState={
@@ -72,7 +82,7 @@ const BeforeConnectionInstructions = ({
               : StripeConnectButtonStates.DISABLED
           }
         />
-      </>
+      </VStack>
     )
   } else {
     return (
diff --git a/frontend/src/features/admin-form/settings/components/PaymentSettingsSection/PaymentsUnsupportedMsg.tsx b/frontend/src/features/admin-form/settings/components/PaymentSettingsSection/PaymentsUnsupportedMsg.tsx
index 00e22bcd4e..0f91aff3a0 100644
--- a/frontend/src/features/admin-form/settings/components/PaymentSettingsSection/PaymentsUnsupportedMsg.tsx
+++ b/frontend/src/features/admin-form/settings/components/PaymentSettingsSection/PaymentsUnsupportedMsg.tsx
@@ -14,7 +14,7 @@ export const PaymentsUnsupportedMsg = (): JSX.Element => {
         Payments are not available in Email mode
       </Text>
       <Text textStyle="body-1" color="secondary.500" mb="2.5rem">
-        Citizens can now make payment for fees or services directly on your
+        Respondents can now make payment for fees or services directly on your
         form. This feature is only available in Storage Mode.&nbsp;
         <Link isExternal href={paymentGuideLink}>
           Learn more about payments
diff --git a/frontend/src/features/admin-form/settings/components/PaymentSettingsSection/StripeConnectButton.tsx b/frontend/src/features/admin-form/settings/components/PaymentSettingsSection/StripeConnectButton.tsx
index 617fe1de7b..5dd89f3662 100644
--- a/frontend/src/features/admin-form/settings/components/PaymentSettingsSection/StripeConnectButton.tsx
+++ b/frontend/src/features/admin-form/settings/components/PaymentSettingsSection/StripeConnectButton.tsx
@@ -41,7 +41,7 @@ export const StripeConnectButton = ({
         onClick={onLinkAccountClick}
         colorScheme="primary"
       >
-        Connect with my Stripe account
+        Connect my Stripe account
       </Button>
     )
   } else {
diff --git a/frontend/src/features/public-form/components/FormPaymentPage/components/PaymentItemNameDescription.tsx b/frontend/src/features/public-form/components/FormPaymentPage/components/PaymentItemNameDescription.tsx
index 0de8fac626..1f3e58523a 100644
--- a/frontend/src/features/public-form/components/FormPaymentPage/components/PaymentItemNameDescription.tsx
+++ b/frontend/src/features/public-form/components/FormPaymentPage/components/PaymentItemNameDescription.tsx
@@ -15,7 +15,9 @@ const PaymentItemNameDescription = ({
         <Text textStyle="subhead-1">{paymentItemName}</Text>
       ) : null}
       {paymentDescription ? (
-        <Text textStyle="body-2">{paymentDescription}</Text>
+        <Text textStyle="body-2" color="secondary.400">
+          {paymentDescription}
+        </Text>
       ) : null}
     </Box>
   )
diff --git a/frontend/src/features/public-form/components/FormPaymentPage/components/VariablePaymentItemDetailBlock.tsx b/frontend/src/features/public-form/components/FormPaymentPage/components/VariablePaymentItemDetailBlock.tsx
index 634c2cce39..1e3506084a 100644
--- a/frontend/src/features/public-form/components/FormPaymentPage/components/VariablePaymentItemDetailBlock.tsx
+++ b/frontend/src/features/public-form/components/FormPaymentPage/components/VariablePaymentItemDetailBlock.tsx
@@ -1,10 +1,12 @@
 import { Controller, useFormContext } from 'react-hook-form'
-import { Box, FormControl, FormErrorMessage } from '@chakra-ui/react'
+import { Box, FormControl, FormErrorMessage, Text } from '@chakra-ui/react'
 
 import { PAYMENT_VARIABLE_INPUT_AMOUNT_FIELD_ID } from '~shared/constants'
 
 import MoneyInput from '~components/MoneyInput'
 
+import { centsToDollarString } from '~features/admin-form/responses/common/utils/getPaymentDataView'
+
 import { usePaymentFieldValidation } from '../../../../../hooks/usePaymentFieldValidation'
 
 import PaymentItemNameDescription from './PaymentItemNameDescription'
@@ -51,6 +53,10 @@ export const VariablePaymentItemDetailsField = ({
             />
           )}
         />
+        <Text textStyle="body-2" color="secondary.400" mt="0.5rem">
+          The minimum amount is {centsToDollarString(paymentMin)} and the
+          maximum amount is {centsToDollarString(paymentMax)}.
+        </Text>
         <FormErrorMessage>
           {errors[PAYMENT_VARIABLE_INPUT_AMOUNT_FIELD_ID]?.message}
         </FormErrorMessage>
diff --git a/frontend/src/features/public-form/components/FormPaymentPage/stripe/components/PaymentBlock.tsx b/frontend/src/features/public-form/components/FormPaymentPage/stripe/components/PaymentBlock.tsx
index 5ea9ce5031..c7df66919b 100644
--- a/frontend/src/features/public-form/components/FormPaymentPage/stripe/components/PaymentBlock.tsx
+++ b/frontend/src/features/public-form/components/FormPaymentPage/stripe/components/PaymentBlock.tsx
@@ -48,6 +48,7 @@ const StripeCheckoutForm = ({
   const [stripeMessage, setStripeMessage] = useState('')
   const [isStripeProcessing, setIsStripeProcessing] = useState(false)
   const [, , clearPaymentMemory] = useBrowserStm(formId)
+  const [isPaynow, setIsPayNow] = useState(false)
 
   useEffect(() => {
     if (isRetry) {
@@ -100,7 +101,15 @@ const StripeCheckoutForm = ({
   return (
     <form onSubmit={handleSubmit}>
       <FormControl isInvalid={stripeMessage !== ''}>
-        <PaymentElement />
+        <PaymentElement
+          onChange={(e) => {
+            if (e.value.type === 'paynow') {
+              setIsPayNow(true)
+            } else {
+              setIsPayNow(false)
+            }
+          }}
+        />
         {stripeMessage !== '' ? (
           <FormErrorMessage>
             {`${stripeMessage} No payment has been taken. Please try again.`}
@@ -116,7 +125,7 @@ const StripeCheckoutForm = ({
           isLoading={isStripeProcessing}
           mt="2.5rem"
         >
-          Submit payment
+          {isPaynow ? 'Scan PayNow QR code' : 'Submit payment'}
         </Button>
       </FormControl>
     </form>
@@ -160,7 +169,7 @@ export const StripePaymentBlock = ({
           <VisuallyHidden aria-live="assertive">
             {submittedAriaText}
           </VisuallyHidden>
-          <Text textStyle="h3" textColor="primary.500" mb="1rem">
+          <Text textStyle="h3" textColor="primary.500" mb="2.25rem">
             Payment
           </Text>
           <PaymentItemDetailsBlock
diff --git a/frontend/src/features/rollout-announcement/Announcements.tsx b/frontend/src/features/rollout-announcement/Announcements.tsx
index 362b3f540e..474417ffde 100644
--- a/frontend/src/features/rollout-announcement/Announcements.tsx
+++ b/frontend/src/features/rollout-announcement/Announcements.tsx
@@ -9,7 +9,7 @@ export const NEW_FEATURES = [
     // Announcement date: 2023-05-31
     title: 'Collect payments on your form',
     description:
-      'Citizens can now pay for fees and services directly on your form! We integrate with Stripe to provide reliable payments and hassle-free reconciliations. Payment methods we support include debit / credit cards and PayNow.',
+      'Respondents can now pay for fees and services directly on your form! We integrate with Stripe to provide reliable payments and hassle-free reconciliations. Payment methods we support include debit / credit cards and PayNow.',
     learnMoreLink: GUIDE_PAYMENTS_ENTRY,
     animationData: PaymentsAnnouncementGraphic,
   },
diff --git a/frontend/src/features/whats-new/FeatureUpdateList.ts b/frontend/src/features/whats-new/FeatureUpdateList.ts
index a0ab0796f8..d60377e32a 100644
--- a/frontend/src/features/whats-new/FeatureUpdateList.ts
+++ b/frontend/src/features/whats-new/FeatureUpdateList.ts
@@ -35,7 +35,7 @@ export const FEATURE_UPDATE_LIST: FeatureUpdateList = {
     {
       title: 'Collect payments on your form',
       date: new Date('31 May 2023 GMT+8'),
-      description: `Citizens can now pay for fees and services directly on your form! We integrate with Stripe to provide reliable payments and hassle-free reconciliations. Payment methods we support include debit / credit cards and PayNow. [Learn more](${GUIDE_PAYMENTS_ENTRY})`,
+      description: `Respondents can now pay for fees and services directly on your form! We integrate with Stripe to provide reliable payments and hassle-free reconciliations. Payment methods we support include debit / credit cards and PayNow. [Learn more](${GUIDE_PAYMENTS_ENTRY})`,
       image: {
         animationData: Animation1,
         alt: 'Collect payments on your form',
diff --git a/frontend/src/features/workspace/components/WorkspacePageContent.tsx b/frontend/src/features/workspace/components/WorkspacePageContent.tsx
index 7fcae618e2..4aac02e3c2 100644
--- a/frontend/src/features/workspace/components/WorkspacePageContent.tsx
+++ b/frontend/src/features/workspace/components/WorkspacePageContent.tsx
@@ -40,7 +40,7 @@ export const WorkspacePageContent = ({
     [isUserLoading, hasSeenAnnouncement],
   )
 
-  const dashboardMessage = `Introducing payments! Citizens can now pay for fees and services directly on your form. [Learn more](${GUIDE_PAYMENTS_ENTRY})`
+  const dashboardMessage = `Introducing payments! Respondents can now pay for fees and services directly on your form. [Learn more](${GUIDE_PAYMENTS_ENTRY})`
 
   return totalFormsCount === 0 ? (
     <EmptyWorkspace
diff --git a/frontend/src/pages/Landing/Home/LandingPage.tsx b/frontend/src/pages/Landing/Home/LandingPage.tsx
index 9ff231b442..1e45809a9b 100644
--- a/frontend/src/pages/Landing/Home/LandingPage.tsx
+++ b/frontend/src/pages/Landing/Home/LandingPage.tsx
@@ -93,7 +93,7 @@ export const LandingPage = (): JSX.Element => {
     <>
       <FeatureBanner
         title="Introducing Payments"
-        body="Citizens can now pay for fees and services directly on your form!"
+        body="Respondents can now pay for fees and services directly on your form!"
         learnMoreLink={LANDING_PAYMENTS_ROUTE}
       />
       <AppPublicHeader />
@@ -447,7 +447,7 @@ export const LandingPage = (): JSX.Element => {
                 </ListItem>
                 <ListItem textStyle="body-2">
                   <OrderedListIcon index={3} />
-                  Build and share form link with citizens
+                  Build and share form link with respondents
                 </ListItem>
                 <ListItem textStyle="body-2">
                   <OrderedListIcon index={4} />
diff --git a/frontend/src/pages/Landing/Payments/LandingPaymentsPage.tsx b/frontend/src/pages/Landing/Payments/LandingPaymentsPage.tsx
index dcd90474f5..df0abd5389 100644
--- a/frontend/src/pages/Landing/Payments/LandingPaymentsPage.tsx
+++ b/frontend/src/pages/Landing/Payments/LandingPaymentsPage.tsx
@@ -137,7 +137,7 @@ export const LandingPaymentsPage = (): JSX.Element => {
         <FeatureGridItem
           image={featureReconImg}
           title="Simple reconciliation"
-          description="Associate a payment reference ID with every form submission ID. Track payments and payouts in one dashboard."
+          description="Associate a payment reference ID with every form response ID. Track payments and payouts in one dashboard."
         />
         <FeatureGridItem
           image={featureTrustedImg}
@@ -205,7 +205,7 @@ export const LandingPaymentsPage = (): JSX.Element => {
           </HelpAccordionItem>
           <HelpAccordionItem title="How does reconciliation work?">
             <Text>
-              Each payment reference ID is associated with a form submission ID.
+              Each payment reference ID is associated with a form response ID.
               Payment and payout status can be viewed in your form response page
               as well as on the Stripe dashboard.
             </Text>
@@ -248,9 +248,9 @@ export const LandingPaymentsPage = (): JSX.Element => {
               Collect payments on your form
             </Text>
             <SectionBodyText color={mainSectionTextColour}>
-              Citizens can now pay for fees and services directly on your form.
-              Enter your agency email to receive our guide on how to get started
-              with payments.
+              Respondents can now pay for fees and services directly on your
+              form. Enter your agency email to receive our guide on how to get
+              started with payments.
             </SectionBodyText>
             <FormProvider {...formMethods}>
               <Flex alignItems="start" mt="2rem">
diff --git a/frontend/src/templates/Field/PaymentPreview/PaymentPreview.tsx b/frontend/src/templates/Field/PaymentPreview/PaymentPreview.tsx
index 6ef9486bf1..6edb43b249 100644
--- a/frontend/src/templates/Field/PaymentPreview/PaymentPreview.tsx
+++ b/frontend/src/templates/Field/PaymentPreview/PaymentPreview.tsx
@@ -45,7 +45,7 @@ export const PaymentPreview = ({
 
   return (
     <>
-      <Box as="h2" mb="1rem" textStyle="h2" color={sectionColor}>
+      <Box as="h2" mb="2.25rem" textStyle="h2" color={sectionColor}>
         Payment
       </Box>
       <Box mb="2rem">
diff --git a/src/app/services/mail/mail.utils.ts b/src/app/services/mail/mail.utils.ts
index af3dc831df..392b0a2880 100644
--- a/src/app/services/mail/mail.utils.ts
+++ b/src/app/services/mail/mail.utils.ts
@@ -292,12 +292,12 @@ export const generatePaymentOnboardingHtml = ({
   appName: string
 }): string => {
   return dedent`
-  <p>Dear Sir or Madam,</p>
-  <p>Thank you for your interest in our payments feature! <a href="${paymentConfig.landingGuideLink}">Download the file</a> to learn how to get started with payments today!</p>
+  <p>Dear Form admin,</p>
+  <p>Thank you for your interest in our payments feature! <a href="${paymentConfig.landingGuideLink}">Download our payments guide</a> to learn how to start collecting payments on your form today!</p>
   <p>If you have any questions regarding payments, feel free to reach out to support@form.gov.sg.</p>
   <p>Regards,
   <br/>
-  ${appName} team</p>
+  ${appName}</p>
   `
 }
 

From 6cda5314600b3d100b19f988619087545b91465a Mon Sep 17 00:00:00 2001
From: Jiayee Lim <jiayeerawr@gmail.com>
Date: Wed, 2 Aug 2023 09:57:00 +0800
Subject: [PATCH 07/13] feat: add Country/Region field (#5132)

* feat: add country field backend (#3770)

* feat: add country field backend

* fix: Fix Property 'country' is missing

* fix: replace BasicField.Dropdown in CountryField story

* fix: import CountryField into FieldFactory

* fix: fix type errors due to lack of handling for new country field

Co-authored-by: Kar Rui <karrui.lau@gmail.com>

* feat: add CountryRegion field to frontend (#4112)

* feat: add country field backend (#3770)

* feat: add country field backend

* fix: Fix Property 'country' is missing

* fix: replace BasicField.Dropdown in CountryField story

* fix: import CountryField into FieldFactory

* fix: fix type errors due to lack of handling for new country field

Co-authored-by: Kar Rui <karrui.lau@gmail.com>

* feat: add Country field to frontend

* feat: move Singapore up to the first value in the Country enum

* test: add tests for CountryField

* fix: update the typed characters in the partial typing test case

* test: adjust test case for partial typing in Country field

* refactor: rename Country enum to CountryRegion

* refactor: rename BasicField.Country to BasicField.CountryRegion

* refactor: rename CountryField to CountryRegionField

* fix: commit renaming changes for tests/

* refactor: rename *Country* to *CountryRegion* in frontend edit field folder

* feat: sort CountryRegion enums inside CountryRegionField

* fix: remove removed isSaveEnabled prop

* fix: inline sort country options constant

* test: update CountryRegionField tests

* fix(CountryRegionField): correctly set singapore as the first option

also update tests to use the options that the field uses

* style: use flag icon and fix capitalisation for CountryRegion

* feat: allow validation rule overriding for DropdownField

* fix: update error message for invalid Country/Region

* test: fix country/region capitalisation in test

Co-authored-by: Kar Rui <karrui.lau@gmail.com>

* fix: remove duplicate country files

* fix: remove duplicate country field files and restore TODO

* chore: rename test file

* fix: add missing imports

* fix: use new CreatePageDrawerContentContainer component

* fix: dropdown now uses requiredSingleAnswerValidationFn for validation

* fix: add validation and processing of CountryRegion fields on client

* refactor: implement specific CRField instead of using DropdownField

* fix: remove unused field schema regression

* feat: make CountryRegion values uppercase when sent to the server

* Revert "feat: make CountryRegion values uppercase when sent to the server"

This reverts commit be8a9d39916ed032baa858cc4abdb3b2a2a67333.

* fix: use title-case country/region only in render

* Revert "fix: use title-case country/region only in render"

This reverts commit 589af797aa8a21135eb0dca0c7e72ed1e0f74a97.

* feat: transform Country/Region form inputs to upper-case on submit

* fix: validate against upper-case country/region, add comments on why this is done, and remove reference to any

* fix: remove reference to toString()

* fix: simulate transformations from handleSubmitForm in country-region-validation.spec.ts

* fix: resolve rebase and use === instead of ==

* fix: remove duplicate import

* chore: fix prettier violations

* fix: update generate-form-data import path

* fix: follow DropdownField's way of querying input element and casting options

* fix: update INVALID_COUNTRY_REGION_OPTION_ERROR

* fix: linting

* fix: use uppercased countryregion for non-fetch submission

---------

Co-authored-by: Kar Rui <karrui.lau@gmail.com>
Co-authored-by: Jiayee Lim <jylim@indeed.com>
Co-authored-by: Jiayee <jiayee@Jiayees-MacBook-Pro.local>
Co-authored-by: tshuli <shuli@open.gov.sg>
---
 .../backend/helpers/generate-form-data.ts     |   7 +
 frontend/src/constants/validation.ts          |   3 +
 .../FieldRow/FieldRowContainer.tsx            |   3 +
 .../EditFieldDrawer/EditFieldDrawer.tsx       |   3 +
 .../EditCountryRegion.stories.tsx             |  51 ++++
 .../EditCountryRegion/EditCountryRegion.tsx   |  92 +++++++
 .../edit-fieldtype/EditCountryRegion/index.ts |   1 +
 .../EditFieldDrawer/edit-fieldtype/index.ts   |   1 +
 .../create/builder-and-design/constants.ts    |   1 +
 .../builder-and-design/utils/fieldCreation.ts |   7 +
 .../features/admin-form/create/constants.ts   |   6 +
 .../public-form/PublicFormProvider.tsx        |  42 ++-
 .../components/FormFields/FieldFactory.tsx    |   3 +
 .../public-form/utils/createSubmission.ts     |   2 +-
 .../public-form/utils/inputTransformation.ts  |   7 +-
 .../public-form/utils/validateResponses.ts    |   3 +
 .../Field/CountryField/CountryField.tsx       |  28 --
 .../CountryRegionField.stories.tsx}           |  29 +-
 .../CountryRegionField.test.tsx               | 140 ++++++++++
 .../CountryRegionField/CountryRegionField.tsx |  63 +++++
 .../Field/CountryRegionField/index.ts         |   1 +
 .../Field/Dropdown/DropdownField.tsx          |   9 +-
 frontend/src/templates/Field/index.ts         |   2 +
 frontend/src/utils/fieldValidation.ts         |  38 ++-
 shared/constants/countries.ts                 | 256 ------------------
 shared/constants/countryRegion.ts             | 256 ++++++++++++++++++
 shared/constants/field/basic.ts               |   6 +
 shared/types/field/base.ts                    |   1 +
 shared/types/field/countryRegionField.ts      |   7 +
 shared/types/field/index.ts                   |   4 +
 shared/types/response.ts                      |   6 +
 src/app/models/field/countryRegionField.ts    |   9 +
 src/app/models/field/index.ts                 |   2 +
 src/app/models/form.server.model.ts           |   5 +
 .../answerValidator.factory.ts                |   3 +
 .../country-region-validation.spec.ts         | 115 ++++++++
 .../validators/countryRegionValidator.ts      |  38 +++
 src/types/field/countryRegionField.ts         |   9 +
 src/types/field/index.ts                      |   4 +
 39 files changed, 943 insertions(+), 320 deletions(-)
 create mode 100644 frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditCountryRegion/EditCountryRegion.stories.tsx
 create mode 100644 frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditCountryRegion/EditCountryRegion.tsx
 create mode 100644 frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditCountryRegion/index.ts
 delete mode 100644 frontend/src/templates/Field/CountryField/CountryField.tsx
 rename frontend/src/templates/Field/{CountryField/CountryField.stories.tsx => CountryRegionField/CountryRegionField.stories.tsx} (76%)
 create mode 100644 frontend/src/templates/Field/CountryRegionField/CountryRegionField.test.tsx
 create mode 100644 frontend/src/templates/Field/CountryRegionField/CountryRegionField.tsx
 create mode 100644 frontend/src/templates/Field/CountryRegionField/index.ts
 delete mode 100644 shared/constants/countries.ts
 create mode 100644 shared/constants/countryRegion.ts
 create mode 100644 shared/types/field/countryRegionField.ts
 create mode 100644 src/app/models/field/countryRegionField.ts
 create mode 100644 src/app/utils/field-validation/validators/__tests__/country-region-validation.spec.ts
 create mode 100644 src/app/utils/field-validation/validators/countryRegionValidator.ts
 create mode 100644 src/types/field/countryRegionField.ts

diff --git a/__tests__/unit/backend/helpers/generate-form-data.ts b/__tests__/unit/backend/helpers/generate-form-data.ts
index 799dd8bb73..69a3a72c50 100644
--- a/__tests__/unit/backend/helpers/generate-form-data.ts
+++ b/__tests__/unit/backend/helpers/generate-form-data.ts
@@ -13,6 +13,7 @@ import {
   IAttachmentFieldSchema,
   IAttachmentResponse,
   ICheckboxFieldSchema,
+  ICountryRegionFieldSchema,
   IDateFieldSchema,
   IDecimalFieldSchema,
   IDropdownFieldSchema,
@@ -117,6 +118,12 @@ export const generateDefaultField = (
         getQuestion: () => defaultParams.title,
         ...customParams,
       } as IDropdownFieldSchema
+    case BasicField.CountryRegion:
+      return {
+        ...defaultParams,
+        getQuestion: () => defaultParams.title,
+        ...customParams,
+      } as ICountryRegionFieldSchema
     case BasicField.Decimal:
       return {
         ...defaultParams,
diff --git a/frontend/src/constants/validation.ts b/frontend/src/constants/validation.ts
index 6f788ae951..d9157c8b40 100644
--- a/frontend/src/constants/validation.ts
+++ b/frontend/src/constants/validation.ts
@@ -6,3 +6,6 @@ export const INVALID_EMAIL_DOMAIN_ERROR =
 
 export const INVALID_DROPDOWN_OPTION_ERROR =
   'Entered value is not a valid dropdown option'
+
+export const INVALID_COUNTRY_REGION_OPTION_ERROR =
+  'Please select a valid country/region from the dropdown list'
diff --git a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/FieldRow/FieldRowContainer.tsx b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/FieldRow/FieldRowContainer.tsx
index 3759fc554c..9a362b47e5 100644
--- a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/FieldRow/FieldRowContainer.tsx
+++ b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/FieldRow/FieldRowContainer.tsx
@@ -25,6 +25,7 @@ import {
   AttachmentField,
   CheckboxField,
   ChildrenCompoundField,
+  CountryRegionField,
   DateField,
   DecimalField,
   DropdownField,
@@ -482,6 +483,8 @@ const FieldRow = ({ field, ...rest }: FieldRowProps) => {
       return <DateField schema={field} {...rest} />
     case BasicField.Dropdown:
       return <DropdownField schema={field} {...rest} />
+    case BasicField.CountryRegion:
+      return <CountryRegionField schema={field} {...rest} />
     case BasicField.ShortText:
       return <ShortTextField schema={field} {...rest} />
     case BasicField.LongText:
diff --git a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/EditFieldDrawer.tsx b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/EditFieldDrawer.tsx
index 5dbd3889c2..aaddf23aac 100644
--- a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/EditFieldDrawer.tsx
+++ b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/EditFieldDrawer.tsx
@@ -28,6 +28,7 @@ import {
 import {
   EditAttachment,
   EditCheckbox,
+  EditCountryRegion,
   EditDate,
   EditDecimal,
   EditDropdown,
@@ -130,6 +131,8 @@ export const MemoFieldDrawerContent = memo<MemoFieldDrawerContentProps>(
         return <EditCheckbox {...props} field={field} />
       case BasicField.Dropdown:
         return <EditDropdown {...props} field={field} />
+      case BasicField.CountryRegion:
+        return <EditCountryRegion {...props} field={field} />
       case BasicField.Mobile:
         return <EditMobile {...props} field={field} />
       case BasicField.HomeNo:
diff --git a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditCountryRegion/EditCountryRegion.stories.tsx b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditCountryRegion/EditCountryRegion.stories.tsx
new file mode 100644
index 0000000000..98fe7db376
--- /dev/null
+++ b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditCountryRegion/EditCountryRegion.stories.tsx
@@ -0,0 +1,51 @@
+import { Meta, Story } from '@storybook/react'
+
+import { CountryRegion } from '~shared/constants/countryRegion'
+import { BasicField, CountryRegionFieldBase } from '~shared/types'
+
+import { createFormBuilderMocks } from '~/mocks/msw/handlers/admin-form'
+
+import { EditFieldDrawerDecorator, StoryRouter } from '~utils/storybook'
+
+import { EditCountryRegion } from './EditCountryRegion'
+
+const DEFAULT_COUNTRY_REGION_FIELD: CountryRegionFieldBase = {
+  title: 'Storybook Country/Region',
+  description: 'Some description about Country/Region',
+  required: true,
+  disabled: false,
+  fieldType: BasicField.CountryRegion,
+  fieldOptions: Object.values(CountryRegion),
+  globalId: 'unused',
+}
+
+export default {
+  title: 'Features/AdminForm/EditFieldDrawer/EditCountryRegion',
+  component: EditCountryRegion,
+  decorators: [
+    StoryRouter({
+      initialEntries: ['/61540ece3d4a6e50ac0cc6ff'],
+      path: '/:formId',
+    }),
+    EditFieldDrawerDecorator,
+  ],
+  parameters: {
+    // Required so skeleton "animation" does not hide content.
+    chromatic: { pauseAnimationAtEnd: true },
+    msw: createFormBuilderMocks({}, 0),
+  },
+  args: {
+    field: DEFAULT_COUNTRY_REGION_FIELD,
+  },
+} as Meta<StoryArgs>
+
+interface StoryArgs {
+  field: CountryRegionFieldBase
+}
+
+const Template: Story<StoryArgs> = ({ field }) => {
+  return <EditCountryRegion field={field} />
+}
+
+export const Default = Template.bind({})
+Default.storyName = 'EditCountryRegion'
diff --git a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditCountryRegion/EditCountryRegion.tsx b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditCountryRegion/EditCountryRegion.tsx
new file mode 100644
index 0000000000..76871a0250
--- /dev/null
+++ b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditCountryRegion/EditCountryRegion.tsx
@@ -0,0 +1,92 @@
+import { useMemo } from 'react'
+import { FormControl } from '@chakra-ui/react'
+import { extend, pick } from 'lodash'
+
+import { CountryRegionFieldBase } from '~shared/types/field'
+
+import { createBaseValidationRules } from '~utils/fieldValidation'
+import FormErrorMessage from '~components/FormControl/FormErrorMessage'
+import FormLabel from '~components/FormControl/FormLabel'
+import Input from '~components/Input'
+import Textarea from '~components/Textarea'
+import Toggle from '~components/Toggle'
+
+import { CreatePageDrawerContentContainer } from '~features/admin-form/create/common'
+
+import { FormFieldDrawerActions } from '../common/FormFieldDrawerActions'
+import { EditFieldProps } from '../common/types'
+import { useEditFieldForm } from '../common/useEditFieldForm'
+
+type EditCountryRegionProps = EditFieldProps<CountryRegionFieldBase>
+
+const EDIT_COUNTRY_FIELD_KEYS = ['title', 'description', 'required'] as const
+
+type EditCountryRegionKeys = typeof EDIT_COUNTRY_FIELD_KEYS[number]
+
+type EditCountryRegionInputs = Pick<
+  CountryRegionFieldBase,
+  EditCountryRegionKeys
+>
+
+const transformCountryRegionFieldToEditForm = (
+  field: CountryRegionFieldBase,
+): EditCountryRegionInputs => {
+  return {
+    ...pick(field, EDIT_COUNTRY_FIELD_KEYS),
+  }
+}
+
+const transformCountryRegionEditFormToField = (
+  inputs: EditCountryRegionInputs,
+  originalField: CountryRegionFieldBase,
+): CountryRegionFieldBase => {
+  return extend({}, originalField, inputs, {})
+}
+
+export const EditCountryRegion = ({
+  field,
+}: EditCountryRegionProps): JSX.Element => {
+  const {
+    register,
+    formState: { errors },
+    buttonText,
+    handleUpdateField,
+    isLoading,
+    handleCancel,
+  } = useEditFieldForm<EditCountryRegionInputs, CountryRegionFieldBase>({
+    field,
+    transform: {
+      input: transformCountryRegionFieldToEditForm,
+      output: transformCountryRegionEditFormToField,
+    },
+  })
+
+  const requiredValidationRule = useMemo(
+    () => createBaseValidationRules({ required: true }),
+    [],
+  )
+
+  return (
+    <CreatePageDrawerContentContainer>
+      <FormControl isRequired isReadOnly={isLoading} isInvalid={!!errors.title}>
+        <FormLabel>Question</FormLabel>
+        <Input autoFocus {...register('title', requiredValidationRule)} />
+        <FormErrorMessage>{errors?.title?.message}</FormErrorMessage>
+      </FormControl>
+      <FormControl isReadOnly={isLoading} isInvalid={!!errors.description}>
+        <FormLabel>Description</FormLabel>
+        <Textarea {...register('description')} />
+        <FormErrorMessage>{errors?.description?.message}</FormErrorMessage>
+      </FormControl>
+      <FormControl isReadOnly={isLoading}>
+        <Toggle {...register('required')} label="Required" />
+      </FormControl>
+      <FormFieldDrawerActions
+        isLoading={isLoading}
+        buttonText={buttonText}
+        handleClick={handleUpdateField}
+        handleCancel={handleCancel}
+      />
+    </CreatePageDrawerContentContainer>
+  )
+}
diff --git a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditCountryRegion/index.ts b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditCountryRegion/index.ts
new file mode 100644
index 0000000000..b7639e6ab8
--- /dev/null
+++ b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditCountryRegion/index.ts
@@ -0,0 +1 @@
+export { EditCountryRegion } from './EditCountryRegion'
diff --git a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/index.ts b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/index.ts
index e7056479ad..e88b152019 100644
--- a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/index.ts
+++ b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/index.ts
@@ -1,5 +1,6 @@
 export * from './EditAttachment'
 export * from './EditCheckbox'
+export * from './EditCountryRegion'
 export * from './EditDate'
 export * from './EditDecimal'
 export * from './EditDropdown'
diff --git a/frontend/src/features/admin-form/create/builder-and-design/constants.ts b/frontend/src/features/admin-form/create/builder-and-design/constants.ts
index 82dc078800..2980ad5141 100644
--- a/frontend/src/features/admin-form/create/builder-and-design/constants.ts
+++ b/frontend/src/features/admin-form/create/builder-and-design/constants.ts
@@ -19,6 +19,7 @@ export const BASIC_FIELDS_ORDERED = [
   BasicField.Radio,
   BasicField.Checkbox,
   BasicField.Dropdown,
+  BasicField.CountryRegion,
   BasicField.Section,
   BasicField.Statement,
   BasicField.YesNo,
diff --git a/frontend/src/features/admin-form/create/builder-and-design/utils/fieldCreation.ts b/frontend/src/features/admin-form/create/builder-and-design/utils/fieldCreation.ts
index fb40dfc8b1..3a8d414a8b 100644
--- a/frontend/src/features/admin-form/create/builder-and-design/utils/fieldCreation.ts
+++ b/frontend/src/features/admin-form/create/builder-and-design/utils/fieldCreation.ts
@@ -184,6 +184,13 @@ export const getFieldCreationMeta = (fieldType: BasicField): FieldCreateDto => {
         minimumRows: 2,
       }
     }
+    case BasicField.CountryRegion: {
+      return {
+        fieldType,
+        ...baseMeta,
+        fieldOptions: [],
+      }
+    }
     case BasicField.Children: {
       return {
         fieldType,
diff --git a/frontend/src/features/admin-form/create/constants.ts b/frontend/src/features/admin-form/create/constants.ts
index 93e8864852..9f67303fe3 100644
--- a/frontend/src/features/admin-form/create/constants.ts
+++ b/frontend/src/features/admin-form/create/constants.ts
@@ -107,6 +107,12 @@ export const BASICFIELD_TO_DRAWER_META: {
     isSubmitted: true,
   },
 
+  [BasicField.CountryRegion]: {
+    label: 'Country/Region',
+    icon: BiFlag,
+    isSubmitted: true,
+  },
+
   [BasicField.Email]: {
     label: 'Email',
     icon: BiMailSend,
diff --git a/frontend/src/features/public-form/PublicFormProvider.tsx b/frontend/src/features/public-form/PublicFormProvider.tsx
index 1e0a06d7b1..afb071f892 100644
--- a/frontend/src/features/public-form/PublicFormProvider.tsx
+++ b/frontend/src/features/public-form/PublicFormProvider.tsx
@@ -20,7 +20,7 @@ import {
   PAYMENT_CONTACT_FIELD_ID,
   PAYMENT_VARIABLE_INPUT_AMOUNT_FIELD_ID,
 } from '~shared/constants'
-import { PaymentType } from '~shared/types'
+import { BasicField, PaymentType } from '~shared/types'
 import { CaptchaTypes } from '~shared/types/captcha'
 import {
   FormAuthType,
@@ -306,6 +306,28 @@ export const PublicFormProvider = ({
         },
       }
 
+      const countryRegionFieldIds = new Set(
+        form.form_fields
+          .filter((field) => field.fieldType === BasicField.CountryRegion)
+          .map((field) => field._id),
+      )
+      // We want users to see the country/region options in title-case but we also need the data in the backend to remain in upper-case.
+      // Country/region data in the backend needs to remain in upper-case so that they remain consistent with myinfo-countries.
+      const formInputsWithCountryRegionInUpperCase = Object.keys(
+        formInputs,
+      ).reduce((newFormInputs: typeof formInputs, fieldId) => {
+        const currentInput = formInputs[fieldId]
+        if (
+          countryRegionFieldIds.has(fieldId) &&
+          typeof currentInput === 'string'
+        ) {
+          newFormInputs[fieldId] = currentInput.toUpperCase()
+        } else {
+          newFormInputs[fieldId] = currentInput
+        }
+        return newFormInputs
+      }, {})
+
       const logMeta = {
         action: 'handleSubmitForm',
         useFetchForSubmissions,
@@ -339,7 +361,13 @@ export const PublicFormProvider = ({
             })
 
             return submitEmailModeFormFetchMutation
-              .mutateAsync(formData, { onSuccess })
+              .mutateAsync(
+                {
+                  ...formData,
+                  formInputs: formInputsWithCountryRegionInUpperCase,
+                },
+                { onSuccess },
+              )
               .catch(async (error) => {
                 datadogLogs.logger.warn(`handleSubmitForm: ${error.message}`, {
                   meta: {
@@ -371,7 +399,13 @@ export const PublicFormProvider = ({
 
             return (
               submitEmailModeFormMutation
-                .mutateAsync(formData, { onSuccess })
+                .mutateAsync(
+                  {
+                    ...formData,
+                    formInputs: formInputsWithCountryRegionInUpperCase,
+                  },
+                  { onSuccess },
+                )
                 // Using catch since we are using mutateAsync and react-hook-form will continue bubbling this up.
                 .catch(async (error) => {
                   // TODO(#5826): Remove when we have resolved the Network Error
@@ -415,6 +449,7 @@ export const PublicFormProvider = ({
               .mutateAsync(
                 {
                   ...formData,
+                  formInputs: formInputsWithCountryRegionInUpperCase,
                   publicKey: form.publicKey,
                   captchaResponse,
                   captchaType,
@@ -484,6 +519,7 @@ export const PublicFormProvider = ({
               .mutateAsync(
                 {
                   ...formData,
+                  formInputs: formInputsWithCountryRegionInUpperCase,
                   publicKey: form.publicKey,
                   captchaResponse,
                   captchaType,
diff --git a/frontend/src/features/public-form/components/FormFields/FieldFactory.tsx b/frontend/src/features/public-form/components/FormFields/FieldFactory.tsx
index d8de3e8e76..829530d862 100644
--- a/frontend/src/features/public-form/components/FormFields/FieldFactory.tsx
+++ b/frontend/src/features/public-form/components/FormFields/FieldFactory.tsx
@@ -7,6 +7,7 @@ import {
   AttachmentField,
   CheckboxField,
   ChildrenCompoundField,
+  CountryRegionField,
   DateField,
   DecimalField,
   DropdownField,
@@ -70,6 +71,8 @@ export const FieldFactory = memo(
         return <YesNoField schema={field} {...rest} />
       case BasicField.Dropdown:
         return <DropdownField schema={field} {...rest} />
+      case BasicField.CountryRegion:
+        return <CountryRegionField schema={field} {...rest} />
       case BasicField.Date:
         return <DateField schema={field} {...rest} />
       case BasicField.Uen:
diff --git a/frontend/src/features/public-form/utils/createSubmission.ts b/frontend/src/features/public-form/utils/createSubmission.ts
index 17978249fc..693d38290f 100644
--- a/frontend/src/features/public-form/utils/createSubmission.ts
+++ b/frontend/src/features/public-form/utils/createSubmission.ts
@@ -106,7 +106,7 @@ const createResponsesArray = (
 ): FieldResponse[] => {
   const transformedResponses = formFields
     .map((ff) => transformInputsToOutputs(ff, formInputs[ff._id]))
-    .filter((output): output is FieldResponse => output !== undefined)
+    .filter((output): output is FieldResponse => output !== null)
 
   return validateResponses(transformedResponses)
 }
diff --git a/frontend/src/features/public-form/utils/inputTransformation.ts b/frontend/src/features/public-form/utils/inputTransformation.ts
index ffc92b3685..86fb0f201f 100644
--- a/frontend/src/features/public-form/utils/inputTransformation.ts
+++ b/frontend/src/features/public-form/utils/inputTransformation.ts
@@ -199,12 +199,12 @@ const transformToChildOutput = (
  * Transforms form inputs to their desire output shapes for sending to the server
  * @param field schema to retrieve base field info
  * @param input the input corresponding to the field in the form
- * @returns If field type does not need an output, `undefined` is returned. Otherwise returns the transformed output.
+ * @returns If field type does not need an output, `null` is returned. Otherwise returns the transformed output.
  */
 export const transformInputsToOutputs = (
   field: FormFieldDto,
   input: FormFieldValue,
-): FieldResponse | undefined => {
+): FieldResponse | null => {
   switch (field.fieldType) {
     case BasicField.Section:
       return transformToSectionOutput(field)
@@ -250,6 +250,7 @@ export const transformInputsToOutputs = (
     case BasicField.LongText:
     case BasicField.HomeNo:
     case BasicField.Dropdown:
+    case BasicField.CountryRegion:
     case BasicField.Rating:
     case BasicField.Nric:
     case BasicField.Uen:
@@ -260,7 +261,7 @@ export const transformInputsToOutputs = (
     case BasicField.Statement:
     case BasicField.Image:
       // No output needed.
-      return undefined
+      return null
     case BasicField.Children:
       return transformToChildOutput(
         field,
diff --git a/frontend/src/features/public-form/utils/validateResponses.ts b/frontend/src/features/public-form/utils/validateResponses.ts
index 0be87d96a1..9443dd5434 100644
--- a/frontend/src/features/public-form/utils/validateResponses.ts
+++ b/frontend/src/features/public-form/utils/validateResponses.ts
@@ -3,6 +3,7 @@ import {
   BasicField,
   CheckboxResponse,
   ChildBirthRecordsResponse,
+  CountryRegionResponse,
   DateResponse,
   DecimalResponse,
   DropdownResponse,
@@ -62,6 +63,8 @@ export const validateResponses = (responses: unknown): FieldResponse[] => {
         return DateResponse.parse(response)
       case BasicField.Dropdown:
         return DropdownResponse.parse(response)
+      case BasicField.CountryRegion:
+        return CountryRegionResponse.parse(response)
       case BasicField.Email:
         return EmailResponse.parse(response)
       case BasicField.HomeNo:
diff --git a/frontend/src/templates/Field/CountryField/CountryField.tsx b/frontend/src/templates/Field/CountryField/CountryField.tsx
deleted file mode 100644
index 2021d78a41..0000000000
--- a/frontend/src/templates/Field/CountryField/CountryField.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { Country } from '~shared/constants/countries'
-import {
-  BasicField,
-  DropdownFieldBase,
-  FormFieldWithId,
-} from '~shared/types/field'
-
-import DropdownField from '~templates/Field/Dropdown'
-
-import { BaseFieldProps } from '../FieldContainer'
-
-// TODO: Change to CountryFieldBase when the new CountryField type is added in future PRs
-export type CountryFieldSchema = FormFieldWithId<DropdownFieldBase>
-export interface CountryFieldProps extends BaseFieldProps {
-  schema: CountryFieldSchema
-}
-
-export const CountryField = ({ schema }: CountryFieldProps): JSX.Element => {
-  return (
-    <DropdownField
-      schema={{
-        ...schema,
-        fieldType: BasicField.Dropdown,
-        fieldOptions: Object.values(Country),
-      }}
-    />
-  )
-}
diff --git a/frontend/src/templates/Field/CountryField/CountryField.stories.tsx b/frontend/src/templates/Field/CountryRegionField/CountryRegionField.stories.tsx
similarity index 76%
rename from frontend/src/templates/Field/CountryField/CountryField.stories.tsx
rename to frontend/src/templates/Field/CountryRegionField/CountryRegionField.stories.tsx
index 037b865497..ce93d376b1 100644
--- a/frontend/src/templates/Field/CountryField/CountryField.stories.tsx
+++ b/frontend/src/templates/Field/CountryRegionField/CountryRegionField.stories.tsx
@@ -8,24 +8,24 @@ import { BasicField } from '~shared/types/field'
 import Button from '~components/Button'
 
 import {
-  CountryField as CountryFieldComponent,
-  CountryFieldProps,
-  CountryFieldSchema,
-} from './CountryField'
+  CountryRegionField as CountryRegionFieldComponent,
+  CountryRegionFieldProps,
+  CountryRegionFieldSchema,
+} from './CountryRegionField'
 
-const baseSchema: CountryFieldSchema = {
-  title: 'Country',
-  description: 'Type or select your residential country',
+const baseSchema: CountryRegionFieldSchema = {
+  title: 'Country/Region',
+  description: 'Type or select your residential country/region',
   required: true,
   disabled: false,
-  fieldType: BasicField.Dropdown,
+  fieldType: BasicField.CountryRegion,
   fieldOptions: [],
   _id: 'random-id',
 }
 
 export default {
-  title: 'Templates/Field/CountryField',
-  component: CountryFieldComponent,
+  title: 'Templates/Field/CountryRegionField',
+  component: CountryRegionFieldComponent,
   decorators: [],
   parameters: {
     docs: {
@@ -42,11 +42,14 @@ export default {
   },
 } as Meta
 
-interface StoryCountryFieldProps extends CountryFieldProps {
+interface StoryCountryRegionFieldProps extends CountryRegionFieldProps {
   defaultValue?: string
 }
 
-const Template: Story<StoryCountryFieldProps> = ({ defaultValue, ...args }) => {
+const Template: Story<StoryCountryRegionFieldProps> = ({
+  defaultValue,
+  ...args
+}) => {
   const formMethods = useForm({
     defaultValues: {
       [args.schema._id]: defaultValue,
@@ -70,7 +73,7 @@ const Template: Story<StoryCountryFieldProps> = ({ defaultValue, ...args }) => {
   return (
     <FormProvider {...formMethods}>
       <form onSubmit={formMethods.handleSubmit(onSubmit)} noValidate>
-        <CountryFieldComponent {...args} />
+        <CountryRegionFieldComponent {...args} />
         <Button
           mt="1rem"
           type="submit"
diff --git a/frontend/src/templates/Field/CountryRegionField/CountryRegionField.test.tsx b/frontend/src/templates/Field/CountryRegionField/CountryRegionField.test.tsx
new file mode 100644
index 0000000000..aaa85223d9
--- /dev/null
+++ b/frontend/src/templates/Field/CountryRegionField/CountryRegionField.test.tsx
@@ -0,0 +1,140 @@
+import { composeStories } from '@storybook/testing-react'
+import { act, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+
+import { REQUIRED_ERROR } from '~constants/validation'
+
+import { SORTED_COUNTRY_OPTIONS } from './CountryRegionField'
+import * as stories from './CountryRegionField.stories'
+
+const { ValidationOptional, ValidationRequired } = composeStories(stories)
+
+describe('required field', () => {
+  it('renders error when field is not selected before submitting', async () => {
+    // Arrange
+    render(<ValidationRequired />)
+    const submitButton = screen.getByRole('button', { name: /submit/i })
+
+    // Act
+    await act(async () => userEvent.click(submitButton))
+
+    // Assert
+    // Should show error message.
+    expect(screen.getByText(REQUIRED_ERROR)).toBeInTheDocument()
+  })
+
+  it('renders success when a valid option is typed', async () => {
+    // Arrange
+    const user = userEvent.setup()
+    render(<ValidationRequired />)
+
+    const optionToType = SORTED_COUNTRY_OPTIONS[0]
+    const submitButton = screen.getByRole('button', { name: /submit/i })
+    const input = screen.getByPlaceholderText(
+      'Select an option',
+    ) as HTMLInputElement
+    // Act
+    await user.type(input, `${optionToType}{enter}`)
+    await user.click(submitButton)
+
+    // Assert
+    // Should show success message.
+    expect(
+      screen.getByText(`You have submitted: ${optionToType}`),
+    ).toBeInTheDocument()
+  })
+
+  it('renders success when a valid option is selected', async () => {
+    // Arrange
+    const user = userEvent.setup()
+    render(<ValidationRequired />)
+
+    const expectedOption = SORTED_COUNTRY_OPTIONS[1]
+    const submitButton = screen.getByRole('button', { name: /submit/i })
+    const input = screen.getByPlaceholderText(
+      'Select an option',
+    ) as HTMLInputElement
+    // Act
+    await user.click(input)
+    // Arrow down twice and select input.
+    // Third option should be selected since first option is already highlighted on click.
+    await user.type(input, '{arrowdown}{arrowdown}{enter}')
+    await user.click(submitButton)
+
+    // Assert
+    // Should show success message.
+    expect(
+      screen.getByText(`You have submitted: ${expectedOption}`),
+    ).toBeInTheDocument()
+  })
+})
+
+describe('optional field', () => {
+  it('renders success even when field has no input before submitting', async () => {
+    // Arrange
+    const user = userEvent.setup()
+    render(<ValidationOptional />)
+    const submitButton = screen.getByRole('button', { name: /submit/i })
+
+    // Act
+    await user.click(submitButton)
+
+    // Assert
+    // Should show success message.
+    expect(screen.getByText(/you have submitted/i)).toBeInTheDocument()
+  })
+
+  it('renders success when a valid option is partially typed then selected', async () => {
+    // Arrange
+    const user = userEvent.setup()
+    render(<ValidationOptional />)
+
+    const expectedOption = 'Singapore'
+    const submitButton = screen.getByRole('button', { name: /submit/i })
+    const input = screen.getByPlaceholderText(
+      'Select an option',
+    ) as HTMLInputElement
+    // Act
+    await user.click(input)
+    // Type the middle few characters of the option; dropdown should match properly,
+    // then select the option.
+    await user.type(input, `ingapor{arrowdown}{enter}`)
+    // Act required due to react-hook-form usage.
+    await user.click(submitButton)
+
+    // Assert
+    // Should show success message.
+    expect(
+      screen.getByText(`You have submitted: ${expectedOption}`),
+    ).toBeInTheDocument()
+  })
+})
+
+describe('dropdown validation', () => {
+  it('renders error when input does not match any dropdown option', async () => {
+    // Arrange
+    const user = userEvent.setup()
+    render(<ValidationRequired />)
+
+    const dropdownOptions: string[] = SORTED_COUNTRY_OPTIONS as string[]
+    const submitButton = screen.getByRole('button', { name: /submit/i })
+    const inputElement = screen.getByPlaceholderText(
+      'Select an option',
+    ) as HTMLInputElement
+    const inputToType = 'this is not a valid option'
+
+    expect(dropdownOptions.includes(inputToType)).toEqual(false)
+
+    // Act
+    await user.click(inputElement)
+    await user.type(inputElement, inputToType)
+    await user.tab()
+    // Input should blur and input value should be cleared (since nothing was selected).
+    expect(inputElement.value).toEqual('')
+    // Act required due to react-hook-form usage.
+    await user.click(submitButton)
+
+    // Assert
+    expect(screen.getByText(REQUIRED_ERROR)).toBeInTheDocument()
+  })
+})
diff --git a/frontend/src/templates/Field/CountryRegionField/CountryRegionField.tsx b/frontend/src/templates/Field/CountryRegionField/CountryRegionField.tsx
new file mode 100644
index 0000000000..9b04f40de1
--- /dev/null
+++ b/frontend/src/templates/Field/CountryRegionField/CountryRegionField.tsx
@@ -0,0 +1,63 @@
+import { useMemo } from 'react'
+import { Controller, useFormContext } from 'react-hook-form'
+
+import { CountryRegion } from '~shared/constants/countryRegion'
+import { FormColorTheme } from '~shared/types'
+import { CountryRegionFieldBase, FormFieldWithId } from '~shared/types/field'
+
+import { createCountryRegionValidationRules } from '~utils/fieldValidation'
+import { SingleSelect } from '~components/Dropdown'
+
+import { BaseFieldProps, FieldContainer } from '../FieldContainer'
+import { SingleAnswerFieldInput } from '../types'
+
+export type CountryRegionFieldSchema = FormFieldWithId<CountryRegionFieldBase>
+export interface CountryRegionFieldProps extends BaseFieldProps {
+  schema: CountryRegionFieldSchema
+}
+
+// Exported for testing
+export const SORTED_COUNTRY_OPTIONS = (() => {
+  const countryOptions = Object.values(CountryRegion)
+    .filter((country) => country !== CountryRegion.Singapore)
+    .sort((a, b) => a.localeCompare(b))
+  countryOptions.unshift(CountryRegion.Singapore)
+  return countryOptions
+})()
+
+export const CountryRegionField = ({
+  schema,
+  colorTheme = FormColorTheme.Blue,
+  ...fieldContainerProps
+}: CountryRegionFieldProps): JSX.Element => {
+  const schemaWithFieldOptions = useMemo(() => {
+    return {
+      ...schema,
+      fieldOptions: SORTED_COUNTRY_OPTIONS,
+    }
+  }, [schema])
+
+  const rules = useMemo(() => {
+    return createCountryRegionValidationRules(schemaWithFieldOptions)
+  }, [schemaWithFieldOptions])
+
+  const { control } = useFormContext<SingleAnswerFieldInput>()
+
+  return (
+    <FieldContainer schema={schemaWithFieldOptions} {...fieldContainerProps}>
+      <Controller
+        control={control}
+        rules={rules}
+        name={schemaWithFieldOptions._id}
+        defaultValue=""
+        render={({ field }) => (
+          <SingleSelect
+            colorScheme={`theme-${colorTheme}`}
+            items={schemaWithFieldOptions.fieldOptions}
+            {...field}
+          />
+        )}
+      />
+    </FieldContainer>
+  )
+}
diff --git a/frontend/src/templates/Field/CountryRegionField/index.ts b/frontend/src/templates/Field/CountryRegionField/index.ts
new file mode 100644
index 0000000000..8fa651f2ea
--- /dev/null
+++ b/frontend/src/templates/Field/CountryRegionField/index.ts
@@ -0,0 +1 @@
+export { CountryRegionField as default } from './CountryRegionField'
diff --git a/frontend/src/templates/Field/Dropdown/DropdownField.tsx b/frontend/src/templates/Field/Dropdown/DropdownField.tsx
index 5e929b477e..96ded6f810 100644
--- a/frontend/src/templates/Field/Dropdown/DropdownField.tsx
+++ b/frontend/src/templates/Field/Dropdown/DropdownField.tsx
@@ -21,10 +21,9 @@ export const DropdownField = ({
   colorTheme = FormColorTheme.Blue,
   ...fieldContainerProps
 }: DropdownFieldProps): JSX.Element => {
-  const validationRules = useMemo(
-    () => createDropdownValidationRules(schema),
-    [schema],
-  )
+  const rules = useMemo(() => {
+    return createDropdownValidationRules(schema)
+  }, [schema])
 
   const { control } = useFormContext<SingleAnswerFieldInput>()
 
@@ -32,7 +31,7 @@ export const DropdownField = ({
     <FieldContainer schema={schema} {...fieldContainerProps}>
       <Controller
         control={control}
-        rules={validationRules}
+        rules={rules}
         name={schema._id}
         defaultValue=""
         render={({ field }) => (
diff --git a/frontend/src/templates/Field/index.ts b/frontend/src/templates/Field/index.ts
index 154c16276a..7152825a0e 100644
--- a/frontend/src/templates/Field/index.ts
+++ b/frontend/src/templates/Field/index.ts
@@ -1,6 +1,7 @@
 import AttachmentField from './Attachment'
 import CheckboxField from './Checkbox'
 import ChildrenCompoundField from './ChildrenCompound'
+import CountryRegionField from './CountryRegionField'
 import DateField from './Date'
 import DecimalField from './Decimal'
 import DropdownField from './Dropdown'
@@ -26,6 +27,7 @@ export {
   AttachmentField,
   CheckboxField,
   ChildrenCompoundField,
+  CountryRegionField,
   DateField,
   DecimalField,
   DropdownField,
diff --git a/frontend/src/utils/fieldValidation.ts b/frontend/src/utils/fieldValidation.ts
index 5427a9c40d..65e57b2750 100644
--- a/frontend/src/utils/fieldValidation.ts
+++ b/frontend/src/utils/fieldValidation.ts
@@ -40,6 +40,7 @@ import {
 import { isUenValid } from '~shared/utils/uen-validation'
 
 import {
+  INVALID_COUNTRY_REGION_OPTION_ERROR,
   INVALID_DROPDOWN_OPTION_ERROR,
   INVALID_EMAIL_DOMAIN_ERROR,
   INVALID_EMAIL_ERROR,
@@ -129,19 +130,34 @@ export const createBaseValidationRules = (
 export const createDropdownValidationRules: ValidationRuleFn<
   DropdownFieldBase
 > = (schema): RegisterOptions => {
-  // TODO(#3360): Handle MyInfo dropdown validation
-  return {
-    validate: {
-      required: requiredSingleAnswerValidationFn(schema),
-      validOptions: (value: string) => {
-        if (!value) return
-        return (
-          schema.fieldOptions.includes(value) || INVALID_DROPDOWN_OPTION_ERROR
-        )
+  return createDropdownValidationRulesWithCustomErrorMessage(
+    INVALID_DROPDOWN_OPTION_ERROR,
+  )(schema)
+}
+
+export const createCountryRegionValidationRules: ValidationRuleFn<
+  DropdownFieldBase
+> = (schema): RegisterOptions => {
+  return createDropdownValidationRulesWithCustomErrorMessage(
+    INVALID_COUNTRY_REGION_OPTION_ERROR,
+  )(schema)
+}
+
+export const createDropdownValidationRulesWithCustomErrorMessage: (
+  errorMessage: string,
+) => ValidationRuleFn<DropdownFieldBase> =
+  (errorMessage) =>
+  (schema): RegisterOptions => {
+    return {
+      validate: {
+        required: requiredSingleAnswerValidationFn(schema),
+        validOptions: (value: string) => {
+          if (!value) return
+          return schema.fieldOptions.includes(value) || errorMessage
+        },
       },
-    },
+    }
   }
-}
 
 export const createRatingValidationRules: ValidationRuleFn<RatingFieldBase> = (
   schema,
diff --git a/shared/constants/countries.ts b/shared/constants/countries.ts
deleted file mode 100644
index ec4c6b3bda..0000000000
--- a/shared/constants/countries.ts
+++ /dev/null
@@ -1,256 +0,0 @@
-export enum Country {
-  Afghanistan = 'AFGHANISTAN',
-  Albania = 'ALBANIA',
-  Algeria = 'ALGERIA',
-  American_Samoa = 'AMERICAN SAMOA',
-  Andorra = 'ANDORRA',
-  Angola = 'ANGOLA',
-  Anguilla = 'ANGUILLA',
-  Antigua = 'ANTIGUA',
-  Argentina = 'ARGENTINA',
-  Armenia = 'ARMENIA',
-  Aruba = 'ARUBA',
-  Australia = 'AUSTRALIA',
-  Austria = 'AUSTRIA',
-  Azerbaijan = 'AZERBAIJAN',
-  Bahamas = 'BAHAMAS',
-  Bahrain = 'BAHRAIN',
-  Bangladesh = 'BANGLADESH',
-  Barbados = 'BARBADOS',
-  Belarus = 'BELARUS',
-  Belgium = 'BELGIUM',
-  Belize = 'BELIZE',
-  Benin = 'BENIN',
-  Bermuda = 'BERMUDA',
-  Bhutan = 'BHUTAN',
-  Bolivia = 'BOLIVIA',
-  Bosnia_Herzegovina = 'BOSNIA-HERZEGOVINA',
-  Botswana = 'BOTSWANA',
-  Brazil = 'BRAZIL',
-  British_Antarctic_Territory = 'BRITISH ANTARCTIC TERRITORY',
-  British_Indian_Ocean_Territory = 'BRITISH INDIAN OCEAN TERRITORY',
-  British_Virgin_Islands = 'BRITISH VIRGIN ISLANDS',
-  Brunei = 'BRUNEI',
-  Bulgaria = 'BULGARIA',
-  Burkina_Faso = 'BURKINA FASO',
-  Burundi = 'BURUNDI',
-  Cambodia = 'CAMBODIA',
-  Cameroon = 'CAMEROON',
-  Canada = 'CANADA',
-  Canton_and_Enderbury_Islands = 'CANTON & ENDERBURY ISLANDS',
-  Cape_Verde = 'CAPE VERDE',
-  Cayman_Islands = 'CAYMAN ISLANDS',
-  Central_African_Republic = 'CENTRAL AFRICAN REPUBLIC',
-  Chad = 'CHAD',
-  Channel_Islands = 'CHANNEL ISLANDS',
-  Chile = 'CHILE',
-  China = 'CHINA',
-  Christmas_Island = 'CHRISTMAS ISLAND',
-  Cocos_Keeling_Island = 'COCOS KEELING ISLAND',
-  Colombia = 'COLOMBIA',
-  Comoros = 'COMOROS',
-  Congo = 'CONGO',
-  Cook_Islands = 'COOK ISLANDS',
-  Costa_Rica = 'COSTA RICA',
-  Croatia = 'CROATIA',
-  Cuba = 'CUBA',
-  Cyprus = 'CYPRUS',
-  Czech_Republic = 'CZECH REPUBLIC',
-  Denmark = 'DENMARK',
-  Djibouti = 'DJIBOUTI',
-  Dominica = 'DOMINICA',
-  Dominican_Republic = 'DOMINICAN REPUBLIC',
-  East_Timor = 'EAST TIMOR',
-  Ecuador = 'ECUADOR',
-  Egypt = 'EGYPT',
-  El_Salvador = 'EL SALVADOR',
-  Equatorial_Guinea = 'EQUATORIAL GUINEA',
-  Eritrea = 'ERITREA',
-  Estonia = 'ESTONIA',
-  Ethiopia = 'ETHIOPIA',
-  Faeroe_Islands = 'FAEROE ISLANDS',
-  Falkland_Islands = 'FALKLAND ISLANDS',
-  Fiji = 'FIJI',
-  Finland = 'FINLAND',
-  France = 'FRANCE',
-  French_Guiana = 'FRENCH GUIANA',
-  French_Polynesia = 'FRENCH POLYNESIA',
-  French_Southern_and_Antarctic_Territories = 'FRENCH SOUTHERN & ANTARCTIC TERRITORIES',
-  Gabon = 'GABON',
-  Gambia = 'GAMBIA',
-  Gaza = 'GAZA',
-  Georgia = 'GEORGIA',
-  Germany = 'GERMANY',
-  Ghana = 'GHANA',
-  Gibraltar = 'GIBRALTAR',
-  Greece = 'GREECE',
-  Greenland = 'GREENLAND',
-  Grenada = 'GRENADA',
-  Guadeloupe = 'GUADELOUPE',
-  Guam = 'GUAM',
-  Guatemala = 'GUATEMALA',
-  Guernsey = 'GUERNSEY',
-  Guinea = 'GUINEA',
-  Guinea_Bissau = 'GUINEA-BISSAU',
-  Guyana = 'GUYANA',
-  Haiti = 'HAITI',
-  Heard_and_McDonald_Island = 'HEARD & MCDONALD ISLAND',
-  Honduras = 'HONDURAS',
-  Hong_Kong = 'HONG KONG',
-  Hong_Kong_SAR = 'HONG KONG SAR',
-  Hungary = 'HUNGARY',
-  Iceland = 'ICELAND',
-  India = 'INDIA',
-  Indonesia = 'INDONESIA',
-  Iran = 'IRAN',
-  Iraq = 'IRAQ',
-  Ireland = 'IRELAND',
-  Isle_Of_Man = 'ISLE OF MAN',
-  Israel = 'ISRAEL',
-  Italy = 'ITALY',
-  Ivory_Coast = 'IVORY COAST',
-  Jamaica = 'JAMAICA',
-  Japan = 'JAPAN',
-  Johnston_Island = 'JOHNSTON ISLAND',
-  Jordan = 'JORDAN',
-  Kazakhstan = 'KAZAKHSTAN',
-  Kenya = 'KENYA',
-  Kirghizia = 'KIRGHIZIA',
-  Kiribati = 'KIRIBATI',
-  Korea_North = 'KOREA, NORTH',
-  Korea_South = 'KOREA, SOUTH',
-  Kosovo = 'KOSOVO',
-  Kuwait = 'KUWAIT',
-  Kyrgyzstan = 'KYRGYZSTAN',
-  Laos = 'LAOS',
-  Latvia = 'LATVIA',
-  Lebanon = 'LEBANON',
-  Lesotho = 'LESOTHO',
-  Liberia = 'LIBERIA',
-  Libya = 'LIBYA',
-  Liechtenstein = 'LIECHTENSTEIN',
-  Lithuania = 'LITHUANIA',
-  Luxembourg = 'LUXEMBOURG',
-  Macao = 'MACAO',
-  Macau_SAR = 'MACAU SAR',
-  Macedonia = 'MACEDONIA',
-  Madagascar = 'MADAGASCAR',
-  Malawi = 'MALAWI',
-  Malaysia = 'MALAYSIA',
-  Maldives = 'MALDIVES',
-  Mali = 'MALI',
-  Malta = 'MALTA',
-  Marshall_Islands = 'MARSHALL ISLANDS',
-  Martinique = 'MARTINIQUE',
-  Mauritania = 'MAURITANIA',
-  Mauritius = 'MAURITIUS',
-  Mayotte = 'MAYOTTE',
-  Mexico = 'MEXICO',
-  Midway_Islands = 'MIDWAY ISLANDS',
-  Moldova = 'MOLDOVA',
-  Monaco = 'MONACO',
-  Mongolia = 'MONGOLIA',
-  Montenegro = 'MONTENEGRO',
-  Montserrat = 'MONTSERRAT',
-  Morocco = 'MOROCCO',
-  Mozambique = 'MOZAMBIQUE',
-  Myanmar = 'MYANMAR',
-  Namibia = 'NAMIBIA',
-  Nauru = 'NAURU',
-  Nepal = 'NEPAL',
-  Netherlands = 'NETHERLANDS',
-  Netherlands_Antililles = 'NETHERLANDS ANTILILLES',
-  New_Caledonia = 'NEW CALEDONIA',
-  New_Zealand = 'NEW ZEALAND',
-  Nicaragua = 'NICARAGUA',
-  Niger = 'NIGER',
-  Nigeria = 'NIGERIA',
-  Niue_Island = 'NIUE ISLAND',
-  Norfolk_Island = 'NORFOLK ISLAND',
-  Norway = 'NORWAY',
-  Oman = 'OMAN',
-  Others = 'OTHERS',
-  Pacific_Island_Trust_Territory = 'PACIFIC ISLAND TRUST TERRITORY',
-  Pakistan = 'PAKISTAN',
-  Palau = 'PALAU',
-  Palestine = 'PALESTINE',
-  Panama = 'PANAMA',
-  Panama_Canal_Zone = 'PANAMA CANAL ZONE',
-  Papua_New_Guinea = 'PAPUA NEW GUINEA',
-  Paraguay = 'PARAGUAY',
-  Peru = 'PERU',
-  Philippines = 'PHILIPPINES',
-  Pitcairn_Island = 'PITCAIRN ISLAND',
-  Poland = 'POLAND',
-  Portugal = 'PORTUGAL',
-  Puerto_Rico = 'PUERTO RICO',
-  Qatar = 'QATAR',
-  Reunion = 'REUNION',
-  Romania = 'ROMANIA',
-  Russia = 'RUSSIA',
-  Rwanda = 'RWANDA',
-  Samoa = 'SAMOA',
-  San_Marino = 'SAN MARINO',
-  Sao_Tome_and_Principe = 'SAO TOME & PRINCIPE',
-  Saudi_Arabia = 'SAUDI ARABIA',
-  Senegal = 'SENEGAL',
-  Serbia = 'SERBIA',
-  Serbia_Montenegro = 'SERBIA/MONTENEGRO',
-  Seychelles = 'SEYCHELLES',
-  Sierra_Leone = 'SIERRA LEONE',
-  Singapore = 'SINGAPORE',
-  Slovak_Republic = 'SLOVAK REPUBLIC',
-  Slovenia = 'SLOVENIA',
-  Solomon_Islands = 'SOLOMON ISLANDS',
-  Somalia = 'SOMALIA',
-  South_Africa = 'SOUTH AFRICA',
-  Spain = 'SPAIN',
-  Sri_Lanka = 'SRI LANKA',
-  St_Helena = 'ST. HELENA',
-  St_Kitts_Nevis = 'ST. KITTS-NEVIS',
-  St_Lucia = 'ST. LUCIA',
-  St_Pierre_and_Miquelon = 'ST. PIERRE & MIQUELON',
-  St_Vincent = 'ST. VINCENT',
-  Sudan = 'SUDAN',
-  Suriname = 'SURINAME',
-  Swaziland = 'SWAZILAND',
-  Sweden = 'SWEDEN',
-  Switzerland = 'SWITZERLAND',
-  Syria = 'SYRIA',
-  Taiwan = 'TAIWAN',
-  Tajikistan = 'TAJIKISTAN',
-  Tanzania = 'TANZANIA',
-  Thailand = 'THAILAND',
-  Timor = 'TIMOR',
-  Togo = 'TOGO',
-  Tokelau_Islands = 'TOKELAU ISLANDS',
-  Tonga = 'TONGA',
-  Trinidad_and_Tobago = 'TRINIDAD & TOBAGO',
-  Tunisia = 'TUNISIA',
-  Turkey = 'TURKEY',
-  Turkmenistan = 'TURKMENISTAN',
-  Turks_and_Caicos_Islands = 'TURKS & CAICOS ISLANDS',
-  Tuvalu = 'TUVALU',
-  Uganda = 'UGANDA',
-  Ukraine = 'UKRAINE',
-  United_Arab_Emirates = 'UNITED ARAB EMIRATES',
-  United_Kingdom = 'UNITED KINGDOM',
-  United_States = 'UNITED STATES',
-  Unknown = 'UNKNOWN',
-  Upper_Volta = 'UPPER VOLTA',
-  Uruguay = 'URUGUAY',
-  US_Virgin_Islands = 'US VIRGIN ISLANDS',
-  Uzbekistan = 'UZBEKISTAN',
-  Vanuatu = 'VANUATU',
-  Vatican_City_State = 'VATICAN CITY STATE',
-  Venezuela = 'VENEZUELA',
-  Vietnam = 'VIETNAM',
-  Wake_Island = 'WAKE ISLAND',
-  Wallis_and_Futuna = 'WALLIS AND FUTUNA',
-  Western_Sahara = 'WESTERN SAHARA',
-  Yemen = 'YEMEN',
-  Yugoslavia = 'YUGOSLAVIA',
-  Zaire = 'ZAIRE',
-  Zambia = 'ZAMBIA',
-  Zimbabwe = 'ZIMBABWE',
-}
diff --git a/shared/constants/countryRegion.ts b/shared/constants/countryRegion.ts
new file mode 100644
index 0000000000..393f342fc8
--- /dev/null
+++ b/shared/constants/countryRegion.ts
@@ -0,0 +1,256 @@
+export enum CountryRegion {
+  Afghanistan = 'Afghanistan',
+  Albania = 'Albania',
+  Algeria = 'Algeria',
+  American_Samoa = 'American Samoa',
+  Andorra = 'Andorra',
+  Angola = 'Angola',
+  Anguilla = 'Anguilla',
+  Antigua = 'Antigua',
+  Argentina = 'Argentina',
+  Armenia = 'Armenia',
+  Aruba = 'Aruba',
+  Australia = 'Australia',
+  Austria = 'Austria',
+  Azerbaijan = 'Azerbaijan',
+  Bahamas = 'Bahamas',
+  Bahrain = 'Bahrain',
+  Bangladesh = 'Bangladesh',
+  Barbados = 'Barbados',
+  Belarus = 'Belarus',
+  Belgium = 'Belgium',
+  Belize = 'Belize',
+  Benin = 'Benin',
+  Bermuda = 'Bermuda',
+  Bhutan = 'Bhutan',
+  Bolivia = 'Bolivia',
+  Bosnia_Herzegovina = 'Bosnia-Herzegovina',
+  Botswana = 'Botswana',
+  Brazil = 'Brazil',
+  British_Antarctic_Territory = 'British Antarctic Territory',
+  British_Indian_Ocean_Territory = 'British Indian Ocean Territory',
+  British_Virgin_Islands = 'British Virgin Islands',
+  Brunei = 'Brunei',
+  Bulgaria = 'Bulgaria',
+  Burkina_Faso = 'Burkina Faso',
+  Burundi = 'Burundi',
+  Cambodia = 'Cambodia',
+  Cameroon = 'Cameroon',
+  Canada = 'Canada',
+  Canton_and_Enderbury_Islands = 'Canton & Enderbury Islands',
+  Cape_Verde = 'Cape Verde',
+  Cayman_Islands = 'Cayman Islands',
+  Central_African_Republic = 'Central African Republic',
+  Chad = 'Chad',
+  Channel_Islands = 'Channel Islands',
+  Chile = 'Chile',
+  China = 'China',
+  Christmas_Island = 'Christmas Island',
+  Cocos_Keeling_Island = 'Cocos Keeling Island',
+  Colombia = 'Colombia',
+  Comoros = 'Comoros',
+  Congo = 'Congo',
+  Cook_Islands = 'Cook Islands',
+  Costa_Rica = 'Costa Rica',
+  Croatia = 'Croatia',
+  Cuba = 'Cuba',
+  Cyprus = 'Cyprus',
+  Czech_Republic = 'Czech Republic',
+  Denmark = 'Denmark',
+  Djibouti = 'Djibouti',
+  Dominica = 'Dominica',
+  Dominican_Republic = 'Dominican Republic',
+  East_Timor = 'East Timor',
+  Ecuador = 'Ecuador',
+  Egypt = 'Egypt',
+  El_Salvador = 'El Salvador',
+  Equatorial_Guinea = 'Equatorial Guinea',
+  Eritrea = 'Eritrea',
+  Estonia = 'Estonia',
+  Ethiopia = 'Ethiopia',
+  Faeroe_Islands = 'Faeroe Islands',
+  Falkland_Islands = 'Falkland Islands',
+  Fiji = 'Fiji',
+  Finland = 'Finland',
+  France = 'France',
+  French_Guiana = 'French Guiana',
+  French_Polynesia = 'French Polynesia',
+  French_Southern_and_Antarctic_Territories = 'French Southern & Antarctic Territories',
+  Gabon = 'Gabon',
+  Gambia = 'Gambia',
+  Gaza = 'Gaza',
+  Georgia = 'Georgia',
+  Germany = 'Germany',
+  Ghana = 'Ghana',
+  Gibraltar = 'Gibraltar',
+  Greece = 'Greece',
+  Greenland = 'Greenland',
+  Grenada = 'Grenada',
+  Guadeloupe = 'Guadeloupe',
+  Guam = 'Guam',
+  Guatemala = 'Guatemala',
+  Guernsey = 'Guernsey',
+  Guinea = 'Guinea',
+  Guinea_Bissau = 'Guinea-Bissau',
+  Guyana = 'Guyana',
+  Haiti = 'Haiti',
+  Heard_and_McDonald_Island = 'Heard & McDonald Island',
+  Honduras = 'Honduras',
+  Hong_Kong = 'Hong Kong',
+  Hong_Kong_SAR = 'Hong Kong SAR',
+  Hungary = 'Hungary',
+  Iceland = 'Iceland',
+  India = 'India',
+  Indonesia = 'Indonesia',
+  Iran = 'Iran',
+  Iraq = 'Iraq',
+  Ireland = 'Ireland',
+  Isle_Of_Man = 'Isle Of Man',
+  Israel = 'Israel',
+  Italy = 'Italy',
+  Ivory_Coast = 'Ivory Coast',
+  Jamaica = 'Jamaica',
+  Japan = 'Japan',
+  Johnston_Island = 'Johnston Island',
+  Jordan = 'Jordan',
+  Kazakhstan = 'Kazakhstan',
+  Kenya = 'Kenya',
+  Kirghizia = 'Kirghizia',
+  Kiribati = 'Kiribati',
+  Korea_North = 'Korea, North',
+  Korea_South = 'Korea, South',
+  Kosovo = 'Kosovo',
+  Kuwait = 'Kuwait',
+  Kyrgyzstan = 'Kyrgyzstan',
+  Laos = 'Laos',
+  Latvia = 'Latvia',
+  Lebanon = 'Lebanon',
+  Lesotho = 'Lesotho',
+  Liberia = 'Liberia',
+  Libya = 'Libya',
+  Liechtenstein = 'Liechtenstein',
+  Lithuania = 'Lithuania',
+  Luxembourg = 'Luxembourg',
+  Macao = 'Macao',
+  Macau_SAR = 'Macau SAR',
+  Macedonia = 'Macedonia',
+  Madagascar = 'Madagascar',
+  Malawi = 'Malawi',
+  Malaysia = 'Malaysia',
+  Maldives = 'Maldives',
+  Mali = 'Mali',
+  Malta = 'Malta',
+  Marshall_Islands = 'Marshall Islands',
+  Martinique = 'Martinique',
+  Mauritania = 'Mauritania',
+  Mauritius = 'Mauritius',
+  Mayotte = 'Mayotte',
+  Mexico = 'Mexico',
+  Midway_Islands = 'Midway Islands',
+  Moldova = 'Moldova',
+  Monaco = 'Monaco',
+  Mongolia = 'Mongolia',
+  Montenegro = 'Montenegro',
+  Montserrat = 'Montserrat',
+  Morocco = 'Morocco',
+  Mozambique = 'Mozambique',
+  Myanmar = 'Myanmar',
+  Namibia = 'Namibia',
+  Nauru = 'Nauru',
+  Nepal = 'Nepal',
+  Netherlands = 'Netherlands',
+  Netherlands_Antililles = 'Netherlands Antililles',
+  New_Caledonia = 'New Caledonia',
+  New_Zealand = 'New Zealand',
+  Nicaragua = 'Nicaragua',
+  Niger = 'Niger',
+  Nigeria = 'Nigeria',
+  Niue_Island = 'Niue Island',
+  Norfolk_Island = 'Norfolk Island',
+  Norway = 'Norway',
+  Oman = 'Oman',
+  Others = 'Others',
+  Pacific_Island_Trust_Territory = 'Pacific Island Trust Territory',
+  Pakistan = 'Pakistan',
+  Palau = 'Palau',
+  Palestine = 'Palestine',
+  Panama = 'Panama',
+  Panama_Canal_Zone = 'Panama Canal Zone',
+  Papua_New_Guinea = 'Papua New Guinea',
+  Paraguay = 'Paraguay',
+  Peru = 'Peru',
+  Philippines = 'Philippines',
+  Pitcairn_Island = 'Pitcairn Island',
+  Poland = 'Poland',
+  Portugal = 'Portugal',
+  Puerto_Rico = 'Puerto Rico',
+  Qatar = 'Qatar',
+  Reunion = 'Reunion',
+  Romania = 'Romania',
+  Russia = 'Russia',
+  Rwanda = 'Rwanda',
+  Samoa = 'Samoa',
+  San_Marino = 'San Marino',
+  Sao_Tome_and_Principe = 'Sao Tome & Principe',
+  Saudi_Arabia = 'Saudi Arabia',
+  Senegal = 'Senegal',
+  Serbia = 'Serbia',
+  Serbia_Montenegro = 'Serbia/Montenegro',
+  Seychelles = 'Seychelles',
+  Sierra_Leone = 'Sierra Leone',
+  Singapore = 'Singapore',
+  Slovak_Republic = 'Slovak Republic',
+  Slovenia = 'Slovenia',
+  Solomon_Islands = 'Solomon Islands',
+  Somalia = 'Somalia',
+  South_Africa = 'South Africa',
+  Spain = 'Spain',
+  Sri_Lanka = 'Sri Lanka',
+  St_Helena = 'St. Helena',
+  St_Kitts_Nevis = 'St. Kitts-Nevis',
+  St_Lucia = 'St. Lucia',
+  St_Pierre_and_Miquelon = 'St. Pierre & Miquelon',
+  St_Vincent = 'St. Vincent',
+  Sudan = 'Sudan',
+  Suriname = 'Suriname',
+  Swaziland = 'Swaziland',
+  Sweden = 'Sweden',
+  Switzerland = 'Switzerland',
+  Syria = 'Syria',
+  Taiwan = 'Taiwan',
+  Tajikistan = 'Tajikistan',
+  Tanzania = 'Tanzania',
+  Thailand = 'Thailand',
+  Timor = 'Timor',
+  Togo = 'Togo',
+  Tokelau_Islands = 'Tokelau Islands',
+  Tonga = 'Tonga',
+  Trinidad_and_Tobago = 'Trinidad & Tobago',
+  Tunisia = 'Tunisia',
+  Turkey = 'Turkey',
+  Turkmenistan = 'Turkmenistan',
+  Turks_and_Caicos_Islands = 'Turks & Caicos Islands',
+  Tuvalu = 'Tuvalu',
+  Uganda = 'Uganda',
+  Ukraine = 'Ukraine',
+  United_Arab_Emirates = 'United Arab Emirates',
+  United_Kingdom = 'United Kingdom',
+  United_States = 'United States',
+  Unknown = 'Unknown',
+  Upper_Volta = 'Upper Volta',
+  Uruguay = 'Uruguay',
+  US_Virgin_Islands = 'US Virgin Islands',
+  Uzbekistan = 'Uzbekistan',
+  Vanuatu = 'Vanuatu',
+  Vatican_City_State = 'Vatican City State',
+  Venezuela = 'Venezuela',
+  Vietnam = 'Vietnam',
+  Wake_Island = 'Wake Island',
+  Wallis_and_Futuna = 'Wallis and Futuna',
+  Western_Sahara = 'Western Sahara',
+  Yemen = 'Yemen',
+  Yugoslavia = 'Yugoslavia',
+  Zaire = 'Zaire',
+  Zambia = 'Zambia',
+  Zimbabwe = 'Zimbabwe',
+}
diff --git a/shared/constants/field/basic.ts b/shared/constants/field/basic.ts
index 9d8cb56467..ffd1589f92 100644
--- a/shared/constants/field/basic.ts
+++ b/shared/constants/field/basic.ts
@@ -78,6 +78,12 @@ export const types: BasicFieldBlock[] = [
     submitted: true,
     answerArray: false,
   },
+  {
+    name: BasicField.CountryRegion,
+    value: 'Country/Region',
+    submitted: true,
+    answerArray: false,
+  },
   {
     name: BasicField.YesNo,
     value: 'Yes/No',
diff --git a/shared/types/field/base.ts b/shared/types/field/base.ts
index 66b5c88457..6a2ffdab2b 100644
--- a/shared/types/field/base.ts
+++ b/shared/types/field/base.ts
@@ -10,6 +10,7 @@ export enum BasicField {
   ShortText = 'textfield',
   LongText = 'textarea',
   Dropdown = 'dropdown',
+  CountryRegion = 'country_region',
   YesNo = 'yes_no',
   Checkbox = 'checkbox',
   Radio = 'radiobutton',
diff --git a/shared/types/field/countryRegionField.ts b/shared/types/field/countryRegionField.ts
new file mode 100644
index 0000000000..a9f959ae53
--- /dev/null
+++ b/shared/types/field/countryRegionField.ts
@@ -0,0 +1,7 @@
+import { BasicField, MyInfoableFieldBase } from './base'
+import { CountryRegion } from '../../constants/countryRegion'
+
+export interface CountryRegionFieldBase extends MyInfoableFieldBase {
+  fieldType: BasicField.CountryRegion
+  fieldOptions: CountryRegion[]
+}
diff --git a/shared/types/field/index.ts b/shared/types/field/index.ts
index d20ebdbaf0..558a362cad 100644
--- a/shared/types/field/index.ts
+++ b/shared/types/field/index.ts
@@ -1,5 +1,6 @@
 import type { AttachmentFieldBase } from './attachmentField'
 import type { CheckboxFieldBase } from './checkboxField'
+import type { CountryRegionFieldBase } from './countryRegionField'
 import type { ChildrenCompoundFieldBase } from './childrenCompoundField'
 import type { DateFieldBase } from './dateField'
 import type { DecimalFieldBase } from './decimalField'
@@ -24,9 +25,11 @@ import type { SetRequired } from 'type-fest'
 export * from './attachmentField'
 export * from './base'
 export * from './checkboxField'
+export * from './countryRegionField'
 export * from './dateField'
 export * from './decimalField'
 export * from './dropdownField'
+export * from './countryRegionField'
 export * from './emailField'
 export * from './homeNoField'
 export * from './imageField'
@@ -51,6 +54,7 @@ export type FormField =
   | DateFieldBase
   | DecimalFieldBase
   | DropdownFieldBase
+  | CountryRegionFieldBase
   | EmailFieldBase
   | HomenoFieldBase
   | ImageFieldBase
diff --git a/shared/types/response.ts b/shared/types/response.ts
index ef2b258301..c42bd29e0a 100644
--- a/shared/types/response.ts
+++ b/shared/types/response.ts
@@ -78,6 +78,11 @@ export const DropdownResponse = MyInfoableSingleResponse.extend({
 })
 export type DropdownResponse = z.infer<typeof DropdownResponse>
 
+export const CountryRegionResponse = MyInfoableSingleResponse.extend({
+  fieldType: z.literal(BasicField.CountryRegion),
+})
+export type CountryRegionResponse = z.infer<typeof CountryRegionResponse>
+
 export const YesNoResponse = SingleAnswerResponse.extend({
   fieldType: z.literal(BasicField.YesNo),
 })
@@ -149,6 +154,7 @@ export type FieldResponse =
   | ShortTextResponse
   | LongTextResponse
   | DropdownResponse
+  | CountryRegionResponse
   | YesNoResponse
   | CheckboxResponse
   | RadioResponse
diff --git a/src/app/models/field/countryRegionField.ts b/src/app/models/field/countryRegionField.ts
new file mode 100644
index 0000000000..491b40eb28
--- /dev/null
+++ b/src/app/models/field/countryRegionField.ts
@@ -0,0 +1,9 @@
+import { Schema } from 'mongoose'
+
+import { ICountryRegionFieldSchema } from '../../../types'
+
+const createCountryRegionFieldSchema = () => {
+  return new Schema<ICountryRegionFieldSchema>({})
+}
+
+export default createCountryRegionFieldSchema
diff --git a/src/app/models/field/index.ts b/src/app/models/field/index.ts
index e48d56da68..6748a19290 100644
--- a/src/app/models/field/index.ts
+++ b/src/app/models/field/index.ts
@@ -2,6 +2,7 @@ import createAttachmentFieldSchema from './attachmentField'
 import { BaseFieldSchema } from './baseField'
 import createCheckboxFieldSchema from './checkboxField'
 import createchildrenCompoundFieldSchema from './childrenCompoundField'
+import createCountryRegionFieldSchema from './countryRegionField'
 import createDateFieldSchema from './dateField'
 import createDecimalFieldSchema from './decimalField'
 import createDropdownFieldSchema from './dropdownField'
@@ -27,6 +28,7 @@ export {
   createDateFieldSchema,
   createDecimalFieldSchema,
   createDropdownFieldSchema,
+  createCountryRegionFieldSchema,
   createEmailFieldSchema,
   createHomenoFieldSchema,
   createImageFieldSchema,
diff --git a/src/app/models/form.server.model.ts b/src/app/models/form.server.model.ts
index 7da691c30f..faf73cf6df 100644
--- a/src/app/models/form.server.model.ts
+++ b/src/app/models/form.server.model.ts
@@ -73,6 +73,7 @@ import {
   createAttachmentFieldSchema,
   createCheckboxFieldSchema,
   createchildrenCompoundFieldSchema,
+  createCountryRegionFieldSchema,
   createDateFieldSchema,
   createDecimalFieldSchema,
   createDropdownFieldSchema,
@@ -549,6 +550,10 @@ const compileFormModel = (db: Mongoose): IFormModel => {
     createAttachmentFieldSchema(),
   )
   FormFieldPath.discriminator(BasicField.Dropdown, createDropdownFieldSchema())
+  FormFieldPath.discriminator(
+    BasicField.CountryRegion,
+    createCountryRegionFieldSchema(),
+  )
   FormFieldPath.discriminator(
     BasicField.Children,
     createchildrenCompoundFieldSchema(),
diff --git a/src/app/utils/field-validation/answerValidator.factory.ts b/src/app/utils/field-validation/answerValidator.factory.ts
index ff8497722b..032589ccb5 100644
--- a/src/app/utils/field-validation/answerValidator.factory.ts
+++ b/src/app/utils/field-validation/answerValidator.factory.ts
@@ -14,6 +14,7 @@ import {
 import { constructAttachmentValidator } from './validators/attachmentValidator'
 import { constructCheckboxValidator } from './validators/checkboxValidator'
 import { constructChildrenValidator } from './validators/childrenValidator'
+import { constructCountryRegionValidator } from './validators/countryRegionValidator'
 import { constructDateValidator } from './validators/dateValidator'
 import { constructDecimalValidator } from './validators/decimalValidator'
 import { constructDropdownValidator } from './validators/dropdownValidator'
@@ -61,6 +62,8 @@ export const constructSingleAnswerValidator = (
       return constructDecimalValidator(formField)
     case BasicField.Dropdown:
       return constructDropdownValidator(formField)
+    case BasicField.CountryRegion:
+      return constructCountryRegionValidator()
     case BasicField.Email:
       return constructEmailValidator(formField)
     case BasicField.Uen:
diff --git a/src/app/utils/field-validation/validators/__tests__/country-region-validation.spec.ts b/src/app/utils/field-validation/validators/__tests__/country-region-validation.spec.ts
new file mode 100644
index 0000000000..12b0c50811
--- /dev/null
+++ b/src/app/utils/field-validation/validators/__tests__/country-region-validation.spec.ts
@@ -0,0 +1,115 @@
+import {
+  generateDefaultField,
+  generateNewSingleAnswerResponse,
+} from '__tests__/unit/backend/helpers/generate-form-data'
+
+import { ValidateFieldError } from 'src/app/modules/submission/submission.errors'
+import { validateField } from 'src/app/utils/field-validation'
+
+import { CountryRegion } from '../../../../../../shared/constants/countryRegion'
+import { BasicField } from '../../../../../../shared/types'
+
+// We want users to see the country/region options in title-case but we also need the data in the backend to remain in upper-case.
+// As such, in handleSubmitForm, which runs before validation, we change the title-case country/region value into upper-case.
+const simulateTransformationsHandleSubmitForm = (
+  countryRegion: CountryRegion,
+) => (countryRegion as string).toUpperCase()
+
+describe('Country/region validation', () => {
+  it('should allow valid option', () => {
+    const formField = generateDefaultField(BasicField.CountryRegion, {})
+    const response = generateNewSingleAnswerResponse(BasicField.CountryRegion, {
+      answer: simulateTransformationsHandleSubmitForm(CountryRegion.Singapore),
+    })
+
+    const validateResult = validateField('formId', formField, response)
+    expect(validateResult.isOk()).toBe(true)
+    expect(validateResult._unsafeUnwrap()).toEqual(true)
+  })
+
+  it('should disallow invalid option', () => {
+    const formField = generateDefaultField(BasicField.Dropdown, {})
+    const response = generateNewSingleAnswerResponse(BasicField.Dropdown, {
+      answer: 'NOT A COUNTRY/REGION',
+    })
+    const validateResult = validateField('formId', formField, response)
+    expect(validateResult.isErr()).toBe(true)
+    expect(validateResult._unsafeUnwrapErr()).toEqual(
+      new ValidateFieldError('Invalid answer submitted'),
+    )
+  })
+
+  it('should disallow empty answer when required', () => {
+    const formField = generateDefaultField(BasicField.CountryRegion, {})
+    const response = generateNewSingleAnswerResponse(BasicField.CountryRegion, {
+      answer: '',
+    })
+    const validateResult = validateField('formId', formField, response)
+    expect(validateResult.isErr()).toBe(true)
+    expect(validateResult._unsafeUnwrapErr()).toEqual(
+      new ValidateFieldError('Invalid answer submitted'),
+    )
+  })
+
+  it('should allow empty answer when not required', () => {
+    const formField = generateDefaultField(BasicField.CountryRegion, {
+      required: false,
+    })
+    const response = generateNewSingleAnswerResponse(BasicField.CountryRegion, {
+      answer: '',
+    })
+    const validateResult = validateField('formId', formField, response)
+    expect(validateResult.isOk()).toBe(true)
+    expect(validateResult._unsafeUnwrap()).toEqual(true)
+  })
+
+  it('should allow empty answer when it is required but not visible', () => {
+    const formField = generateDefaultField(BasicField.CountryRegion, {})
+    const response = generateNewSingleAnswerResponse(BasicField.CountryRegion, {
+      answer: '',
+      isVisible: false,
+    })
+    const validateResult = validateField('formId', formField, response)
+    expect(validateResult.isOk()).toBe(true)
+    expect(validateResult._unsafeUnwrap()).toEqual(true)
+  })
+
+  it('should disallow empty answer when it is required and visible', () => {
+    const formField = generateDefaultField(BasicField.CountryRegion, {})
+    const response = generateNewSingleAnswerResponse(BasicField.CountryRegion, {
+      answer: '',
+    })
+    const validateResult = validateField('formId', formField, response)
+    expect(validateResult.isErr()).toBe(true)
+    expect(validateResult._unsafeUnwrapErr()).toEqual(
+      new ValidateFieldError('Invalid answer submitted'),
+    )
+  })
+
+  it('should disallow multiple answers', () => {
+    const formField = generateDefaultField(BasicField.CountryRegion, {})
+    const response = generateNewSingleAnswerResponse(BasicField.CountryRegion, {
+      answer: [
+        simulateTransformationsHandleSubmitForm(CountryRegion.Singapore),
+        simulateTransformationsHandleSubmitForm(CountryRegion.Slovak_Republic),
+      ] as unknown as string,
+    })
+    const validateResult = validateField('formId', formField, response)
+    expect(validateResult.isErr()).toBe(true)
+    expect(validateResult._unsafeUnwrapErr()).toEqual(
+      new ValidateFieldError('Response has invalid shape'),
+    )
+  })
+  it('should disallow responses submitted for hidden fields', () => {
+    const formField = generateDefaultField(BasicField.CountryRegion, {})
+    const response = generateNewSingleAnswerResponse(BasicField.CountryRegion, {
+      answer: simulateTransformationsHandleSubmitForm(CountryRegion.Singapore),
+      isVisible: false,
+    })
+    const validateResult = validateField('formId', formField, response)
+    expect(validateResult.isErr()).toBe(true)
+    expect(validateResult._unsafeUnwrapErr()).toEqual(
+      new ValidateFieldError('Attempted to submit response on a hidden field'),
+    )
+  })
+})
diff --git a/src/app/utils/field-validation/validators/countryRegionValidator.ts b/src/app/utils/field-validation/validators/countryRegionValidator.ts
new file mode 100644
index 0000000000..c15a21b515
--- /dev/null
+++ b/src/app/utils/field-validation/validators/countryRegionValidator.ts
@@ -0,0 +1,38 @@
+import { chain, left, right } from 'fp-ts/lib/Either'
+import { flow } from 'fp-ts/lib/function'
+
+import { CountryRegion } from '../../../../../shared/constants/countryRegion'
+import { ResponseValidator } from '../../../../types/field/utils/validation'
+import { ProcessedSingleAnswerResponse } from '../../../modules/submission/submission.types'
+
+import { notEmptySingleAnswerResponse } from './common'
+import { isOneOfOptions } from './options'
+
+type CountryRegionValidator = ResponseValidator<ProcessedSingleAnswerResponse>
+type CountryRegionValidatorConstructor = () => CountryRegionValidator
+
+/**
+ * Returns a validation function
+ * to check if country/region selection is one of the options.
+ * We need to validate the response against options in upper-case because PublicFormProvider.handleSubmitForm transforms the response into upper-case.
+ * We want users to see the country/region options in title-case but we also need the data in the backend to remain in upper-case.
+ */
+const makeCountryRegionValidator: CountryRegionValidatorConstructor =
+  () => (response) => {
+    const validOptions = Object.values(CountryRegion)
+    const validOptionsInUpperCase = validOptions.map((option) =>
+      option.toUpperCase(),
+    )
+    const { answer } = response
+    return isOneOfOptions(validOptionsInUpperCase, answer)
+      ? right(response)
+      : left(
+          `CountryRegionValidator:\t answer is not a valid country/region option`,
+        )
+  }
+
+/**
+ * Returns a validation function for a country/region field when called.
+ */
+export const constructCountryRegionValidator: CountryRegionValidatorConstructor =
+  () => flow(notEmptySingleAnswerResponse, chain(makeCountryRegionValidator()))
diff --git a/src/types/field/countryRegionField.ts b/src/types/field/countryRegionField.ts
new file mode 100644
index 0000000000..517e23caa3
--- /dev/null
+++ b/src/types/field/countryRegionField.ts
@@ -0,0 +1,9 @@
+import { BasicField, CountryRegionFieldBase } from '../../../shared/types'
+
+import { IFieldSchema } from './baseField'
+
+export interface ICountryRegionFieldSchema
+  extends CountryRegionFieldBase,
+    IFieldSchema {
+  fieldType: BasicField.CountryRegion
+}
diff --git a/src/types/field/index.ts b/src/types/field/index.ts
index b68bb2c1b1..7fef28f146 100644
--- a/src/types/field/index.ts
+++ b/src/types/field/index.ts
@@ -4,6 +4,7 @@ import type { ConditionalExcept, Merge } from 'type-fest'
 import type { IAttachmentFieldSchema } from './attachmentField'
 import type { ICheckboxFieldSchema } from './checkboxField'
 import type { IChildrenCompoundFieldSchema } from './childrenCompoundField'
+import type { ICountryRegionFieldSchema } from './countryRegionField'
 import type { IDateFieldSchema } from './dateField'
 import type { IDecimalFieldSchema } from './decimalField'
 import type { IDropdownFieldSchema } from './dropdownField'
@@ -29,6 +30,7 @@ export * from './checkboxField'
 export * from './dateField'
 export * from './decimalField'
 export * from './dropdownField'
+export * from './countryRegionField'
 export * from './emailField'
 export * from './homeNoField'
 export * from './imageField'
@@ -63,6 +65,7 @@ export type FormFieldSchema =
   | IDateFieldSchema
   | IDecimalFieldSchema
   | IDropdownFieldSchema
+  | ICountryRegionFieldSchema
   | IEmailFieldSchema
   | IHomenoFieldSchema
   | IImageFieldSchema
@@ -104,6 +107,7 @@ export type FieldValidationSchema =
   | OmitUnusedValidatorProps<IDateFieldSchema>
   | OmitUnusedValidatorProps<IDecimalFieldSchema>
   | OmitUnusedValidatorProps<IDropdownFieldSchema>
+  | OmitUnusedValidatorProps<ICountryRegionFieldSchema>
   | OmitUnusedValidatorProps<IEmailFieldSchema>
   | OmitUnusedValidatorProps<IHomenoFieldSchema>
   | OmitUnusedValidatorProps<IImageFieldSchema>

From 4ab78227048e2c1a88555f0920ee8bf71ceb4a9a Mon Sep 17 00:00:00 2001
From: Lin Huiqing <37061143+LinHuiqing@users.noreply.github.com>
Date: Wed, 2 Aug 2023 16:16:49 +0800
Subject: [PATCH 08/13] chore: remove unused toastr dependency for snyk (#6589)

* chore: remove unused toastr dep

* docs: remove toastr package from credits
---
 CREDITS.md        | 30 ------------------------------
 package-lock.json | 13 -------------
 package.json      |  1 -
 3 files changed, 44 deletions(-)

diff --git a/CREDITS.md b/CREDITS.md
index ba986f91cc..08925dd82f 100644
--- a/CREDITS.md
+++ b/CREDITS.md
@@ -2229,36 +2229,6 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA
 02110-1301 USA
 
 
-## Project
-toastr
-
-### Source
-https://github.com/CodeSeven/toastr
-
-### License
-MIT License
-
-Copyright (c) 2017 Toastr Maintainers
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
-
-
 -------------------------------------------------------------------------------
 
 ## Project
diff --git a/package-lock.json b/package-lock.json
index b65119898a..f18abedf81 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -118,7 +118,6 @@
         "sqs-producer": "^2.1.0",
         "stripe": "^12.5.0",
         "text-encoding": "^0.7.0",
-        "toastr": "^2.1.4",
         "triple-beam": "^1.3.0",
         "ts-essentials": "^9.3.1",
         "tweetnacl": "^1.0.1",
@@ -26347,12 +26346,6 @@
         "node": ">=8.0"
       }
     },
-    "node_modules/toastr": {
-      "version": "2.1.4",
-      "dependencies": {
-        "jquery": ">=1.12.0"
-      }
-    },
     "node_modules/toidentifier": {
       "version": "1.0.1",
       "license": "MIT",
@@ -47145,12 +47138,6 @@
         "is-number": "^7.0.0"
       }
     },
-    "toastr": {
-      "version": "2.1.4",
-      "requires": {
-        "jquery": ">=1.12.0"
-      }
-    },
     "toidentifier": {
       "version": "1.0.1"
     },
diff --git a/package.json b/package.json
index 8a309d641d..a7bf9f8f01 100644
--- a/package.json
+++ b/package.json
@@ -162,7 +162,6 @@
     "sqs-producer": "^2.1.0",
     "stripe": "^12.5.0",
     "text-encoding": "^0.7.0",
-    "toastr": "^2.1.4",
     "triple-beam": "^1.3.0",
     "ts-essentials": "^9.3.1",
     "tweetnacl": "^1.0.1",

From cd12d337075586fc249e790c631272dac4a9b15a Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Thu, 3 Aug 2023 20:00:03 +0000
Subject: [PATCH 09/13] chore(deps-dev): bump eslint-config-prettier from 8.9.0
 to 8.10.0 in /shared (#6593)

chore(deps-dev): bump eslint-config-prettier in /shared

Bumps [eslint-config-prettier](https://github.com/prettier/eslint-config-prettier) from 8.9.0 to 8.10.0.
- [Changelog](https://github.com/prettier/eslint-config-prettier/blob/main/CHANGELOG.md)
- [Commits](https://github.com/prettier/eslint-config-prettier/compare/v8.9.0...v8.10.0)

---
updated-dependencies:
- dependency-name: eslint-config-prettier
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 shared/package-lock.json | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/shared/package-lock.json b/shared/package-lock.json
index 1c90e3da75..e509a8c938 100644
--- a/shared/package-lock.json
+++ b/shared/package-lock.json
@@ -372,9 +372,9 @@
       }
     },
     "node_modules/eslint-config-prettier": {
-      "version": "8.9.0",
-      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.9.0.tgz",
-      "integrity": "sha512-+sbni7NfVXnOpnRadUA8S28AUlsZt9GjgFvABIRL9Hkn8KqNzOp+7Lw4QWtrwn20KzU3wqu1QoOj2m+7rKRqkA==",
+      "version": "8.10.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.10.0.tgz",
+      "integrity": "sha512-SM8AMJdeQqRYT9O9zguiruQZaN7+z+E4eAP9oiLNGKMtomwaB1E9dcgUD6ZAn/eQAb52USbvezbiljfZUhbJcg==",
       "dev": true,
       "bin": {
         "eslint-config-prettier": "bin/cli.js"
@@ -1114,9 +1114,9 @@
       }
     },
     "eslint-config-prettier": {
-      "version": "8.9.0",
-      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.9.0.tgz",
-      "integrity": "sha512-+sbni7NfVXnOpnRadUA8S28AUlsZt9GjgFvABIRL9Hkn8KqNzOp+7Lw4QWtrwn20KzU3wqu1QoOj2m+7rKRqkA==",
+      "version": "8.10.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.10.0.tgz",
+      "integrity": "sha512-SM8AMJdeQqRYT9O9zguiruQZaN7+z+E4eAP9oiLNGKMtomwaB1E9dcgUD6ZAn/eQAb52USbvezbiljfZUhbJcg==",
       "dev": true
     },
     "eslint-plugin-prettier": {

From f7c465f3f76c8932acec9aa546d1b97a3ea935a9 Mon Sep 17 00:00:00 2001
From: Lin Huiqing <37061143+LinHuiqing@users.noreply.github.com>
Date: Fri, 4 Aug 2023 15:46:04 +0800
Subject: [PATCH 10/13] feat: BE endpoint to allow storage submissions before
 encryption (#6587)

* feat: endpoint for pre-encrypt storage payload

* refactor: extract receiver to separate module

* refactor: use receiver middleware for email

* doc: add comments to mark code for future removal

* refactor: share isAttachmentResponse

* doc: mark for future removal

* fix: expected metadata

* feat: add validateStorageSubmissionParams

- refactor: clean up submission types naming

* feat: check for newEncryptionBoundary flag

* fix: comments from pairing with sebastian

* fix: rm unnecessary undefined in filteredResponses

* refactor: use getFilteredResponse

- doc: remove reference implementation comments

* fix: relative imports

* refactor: move submission tests to right dir

* refactor: mv submissions params overlap to constants

* fix: use relative imports

* test: handleDuplicatesInAttachments

* fix: filesize limit based on submission type

* test: add storage mode for createMultipartReceiver

* fix: submission service test import

* fix: validate submission params middleware

- I was an idiot and replaced the params for the wrong middleware in d328c73

* fix: submission service relative imports

* refactor: separate receiveSubmission middlewares
---
 .../public-form/utils/createSubmission.ts     |   1 +
 .../form/admin-form/admin-form.controller.ts  |   3 +-
 .../submission.service.spec.ts                |   6 +-
 .../{submission => }/submission.utils.spec.ts |   2 +-
 .../__tests__/email-submission.util.spec.ts   |  90 +--------
 .../email-submission.controller.ts            |   3 +-
 .../email-submission.errors.ts                |  33 ----
 .../email-submission.middleware.ts            |  82 +-------
 .../email-submission.service.ts               |   4 +-
 .../email-submission/email-submission.util.ts | 107 +----------
 .../encrypt-submission.controller.spec.ts     |   6 +
 .../encrypt-submission.utils.spec.ts          |  29 +++
 .../encrypt-submission.controller.ts          | 181 +++++++++++++++++-
 .../encrypt-submission.middleware.ts          |  11 ++
 .../__tests__/receiver.service.spec.ts}       | 138 +++++++++----
 .../receiver/__tests__/receiver.utils.spec.ts |  94 +++++++++
 .../submission/receiver/receiver.errors.ts    |  34 ++++
 .../receiver/receiver.middleware.ts           |  97 ++++++++++
 .../receiver.service.ts}                      |  18 +-
 .../submission/receiver/receiver.types.ts     |   7 +
 .../submission/receiver/receiver.utils.ts     | 120 ++++++++++++
 .../submission/submission.constants.ts        |  40 ++++
 .../modules/submission/submission.types.ts    |   4 +-
 .../modules/submission/submission.utils.ts    |  13 ++
 .../forms/public-forms.submissions.routes.ts  |  19 +-
 src/types/api/email_submission.ts             |  16 +-
 src/types/api/encrypt_submission.ts           |  10 +
 src/types/api/index.ts                        |   1 +
 src/types/api/submission.ts                   |  13 ++
 src/types/response/index.ts                   |  10 +-
 30 files changed, 813 insertions(+), 379 deletions(-)
 rename src/app/modules/submission/__tests__/{submission => }/submission.service.spec.ts (99%)
 rename src/app/modules/submission/__tests__/{submission => }/submission.utils.spec.ts (95%)
 rename src/app/modules/submission/{email-submission/__tests__/email-submission.receiver.spec.ts => receiver/__tests__/receiver.service.spec.ts} (79%)
 create mode 100644 src/app/modules/submission/receiver/__tests__/receiver.utils.spec.ts
 create mode 100644 src/app/modules/submission/receiver/receiver.errors.ts
 create mode 100644 src/app/modules/submission/receiver/receiver.middleware.ts
 rename src/app/modules/submission/{email-submission/email-submission.receiver.ts => receiver/receiver.service.ts} (91%)
 create mode 100644 src/app/modules/submission/receiver/receiver.types.ts
 create mode 100644 src/app/modules/submission/receiver/receiver.utils.ts
 create mode 100644 src/app/modules/submission/submission.constants.ts
 create mode 100644 src/types/api/submission.ts

diff --git a/frontend/src/features/public-form/utils/createSubmission.ts b/frontend/src/features/public-form/utils/createSubmission.ts
index 693d38290f..319b30b48a 100644
--- a/frontend/src/features/public-form/utils/createSubmission.ts
+++ b/frontend/src/features/public-form/utils/createSubmission.ts
@@ -148,6 +148,7 @@ const getAttachmentsMap = (
   return attachmentsMap
 }
 
+// TODO (FRM-1232): Remove once encryption boundary has been shifted.
 /**
  * Utility to filter out responses that should be sent to the server. This includes:
  * 1. Email fields that have an autoreply enabled.
diff --git a/src/app/modules/form/admin-form/admin-form.controller.ts b/src/app/modules/form/admin-form/admin-form.controller.ts
index eebf6f577f..c367cf9429 100644
--- a/src/app/modules/form/admin-form/admin-form.controller.ts
+++ b/src/app/modules/form/admin-form/admin-form.controller.ts
@@ -75,6 +75,7 @@ import * as EncryptSubmissionMiddleware from '../../submission/encrypt-submissio
 import * as EncryptSubmissionService from '../../submission/encrypt-submission/encrypt-submission.service'
 import { mapRouteError as mapEncryptSubmissionError } from '../../submission/encrypt-submission/encrypt-submission.utils'
 import IncomingEncryptSubmission from '../../submission/encrypt-submission/IncomingEncryptSubmission.class'
+import * as ReceiverMiddleware from '../../submission/receiver/receiver.middleware'
 import * as SubmissionService from '../../submission/submission.service'
 import { extractEmailConfirmationData } from '../../submission/submission.utils'
 import * as UserService from '../../user/user.service'
@@ -1656,7 +1657,7 @@ export const submitEmailPreview: ControllerHandler<
 }
 
 export const handleEmailPreviewSubmission = [
-  EmailSubmissionMiddleware.receiveEmailSubmission,
+  ReceiverMiddleware.receiveEmailSubmission,
   EmailSubmissionMiddleware.validateResponseParams,
   submitEmailPreview,
 ] as ControllerHandler[]
diff --git a/src/app/modules/submission/__tests__/submission/submission.service.spec.ts b/src/app/modules/submission/__tests__/submission.service.spec.ts
similarity index 99%
rename from src/app/modules/submission/__tests__/submission/submission.service.spec.ts
rename to src/app/modules/submission/__tests__/submission.service.spec.ts
index 5c631bf003..501c277446 100644
--- a/src/app/modules/submission/__tests__/submission/submission.service.spec.ts
+++ b/src/app/modules/submission/__tests__/submission.service.spec.ts
@@ -29,12 +29,12 @@ import {
   AutoReplyOptions,
   BasicField,
   SubmissionType,
-} from '../../../../../../shared/types'
+} from '../../../../../shared/types'
 import {
   PendingSubmissionNotFoundError,
   SendEmailConfirmationError,
-} from '../../submission.errors'
-import { extractEmailConfirmationData } from '../../submission.utils'
+} from '../submission.errors'
+import { extractEmailConfirmationData } from '../submission.utils'
 
 jest.mock('src/app/services/mail/mail.service')
 const MockMailService = jest.mocked(MailService)
diff --git a/src/app/modules/submission/__tests__/submission/submission.utils.spec.ts b/src/app/modules/submission/__tests__/submission.utils.spec.ts
similarity index 95%
rename from src/app/modules/submission/__tests__/submission/submission.utils.spec.ts
rename to src/app/modules/submission/__tests__/submission.utils.spec.ts
index a702185ce1..e0ab2bb5fd 100644
--- a/src/app/modules/submission/__tests__/submission/submission.utils.spec.ts
+++ b/src/app/modules/submission/__tests__/submission.utils.spec.ts
@@ -1,6 +1,6 @@
 import { getResponseModeFilter } from 'src/app/modules/submission/submission.utils'
 
-import { BasicField, FormResponseMode } from '../../../../../../shared/types'
+import { BasicField, FormResponseMode } from '../../../../../shared/types'
 
 describe('submission.utils', () => {
   describe('getResponseModeFilter', () => {
diff --git a/src/app/modules/submission/email-submission/__tests__/email-submission.util.spec.ts b/src/app/modules/submission/email-submission/__tests__/email-submission.util.spec.ts
index 46fd3d7427..c7a1b821ba 100644
--- a/src/app/modules/submission/email-submission/__tests__/email-submission.util.spec.ts
+++ b/src/app/modules/submission/email-submission/__tests__/email-submission.util.spec.ts
@@ -13,13 +13,6 @@ import { ObjectId } from 'bson'
 import { readFileSync } from 'fs'
 import { cloneDeep, merge } from 'lodash'
 
-import {
-  FieldResponse,
-  IAttachmentResponse,
-  SingleAnswerFieldResponse,
-  SPCPFieldTitle,
-} from 'src/types'
-
 import { types as basicTypes } from '../../../../../../shared/constants/field/basic'
 import {
   BasicField,
@@ -27,6 +20,7 @@ import {
   MyInfoAttribute,
   TableRow,
 } from '../../../../../../shared/types'
+import { SingleAnswerFieldResponse, SPCPFieldTitle } from '../../../../../types'
 import { ProcessedFieldResponse } from '../../submission.types'
 import {
   ATTACHMENT_PREFIX,
@@ -36,12 +30,10 @@ import {
 } from '../email-submission.constants'
 import { ResponseFormattedForEmail } from '../email-submission.types'
 import {
-  addAttachmentToResponses,
   areAttachmentsMoreThan7MB,
   getFormDataPrefixedQuestion,
   getInvalidFileExtensions,
   getJsonPrefixedQuestion,
-  handleDuplicatesInAttachments,
   mapAttachmentsFromResponses,
   SubmissionEmailObj,
 } from '../email-submission.util'
@@ -196,66 +188,6 @@ describe('email-submission.util', () => {
     })
   })
 
-  describe('addAttachmentToResponses', () => {
-    it('should add attachments to responses correctly when inputs are valid', () => {
-      const firstAttachment = validSingleFile
-      const secondAttachment = zipOnlyValid
-      const firstResponse = getResponse(
-        firstAttachment.fieldId,
-        firstAttachment.filename,
-      )
-      const secondResponse = getResponse(
-        secondAttachment.fieldId,
-        secondAttachment.filename,
-      )
-      addAttachmentToResponses(
-        [firstResponse, secondResponse],
-        [firstAttachment, secondAttachment],
-      )
-      expect(firstResponse.answer).toBe(firstAttachment.filename)
-      expect((firstResponse as unknown as IAttachmentResponse).filename).toBe(
-        firstAttachment.filename,
-      )
-      expect((firstResponse as unknown as IAttachmentResponse).content).toEqual(
-        firstAttachment.content,
-      )
-      expect(secondResponse.answer).toBe(secondAttachment.filename)
-      expect((secondResponse as unknown as IAttachmentResponse).filename).toBe(
-        secondAttachment.filename,
-      )
-      expect(
-        (secondResponse as unknown as IAttachmentResponse).content,
-      ).toEqual(secondAttachment.content)
-    })
-
-    it('should overwrite answer with filename when they are different', () => {
-      const attachment = validSingleFile
-      const response = getResponse(attachment.fieldId, MOCK_ANSWER)
-      addAttachmentToResponses([response], [attachment])
-      expect(response.answer).toBe(attachment.filename)
-      expect((response as unknown as IAttachmentResponse).filename).toBe(
-        attachment.filename,
-      )
-      expect((response as unknown as IAttachmentResponse).content).toEqual(
-        attachment.content,
-      )
-    })
-
-    it('should do nothing when responses are empty', () => {
-      const responses: FieldResponse[] = []
-      addAttachmentToResponses(responses, [validSingleFile])
-      expect(responses).toEqual([])
-    })
-
-    it('should do nothing when there are no attachments', () => {
-      const responses = [getResponse(validSingleFile.fieldId, MOCK_ANSWER)]
-      addAttachmentToResponses(responses, [])
-      expect(responses).toEqual([
-        getResponse(validSingleFile.fieldId, MOCK_ANSWER),
-      ])
-    })
-  })
-
   describe('areAttachmentsMoreThan7MB', () => {
     it('should pass attachments when they are smaller than 7MB', () => {
       expect(areAttachmentsMoreThan7MB([validSingleFile, zipOnlyValid])).toBe(
@@ -280,26 +212,6 @@ describe('email-submission.util', () => {
     })
   })
 
-  // Note that if e.g. you have three attachments called abc.txt, abc.txt
-  // and 1-abc.txt, they will not be given unique names, i.e. one of the abc.txt
-  // will be renamed to 1-abc.txt so you end up with abc.txt, 1-abc.txt and 1-abc.txt.
-  describe('handleDuplicatesInAttachments', () => {
-    it('should make filenames unique by appending count when there are duplicates', () => {
-      const attachments = [
-        cloneDeep(validSingleFile),
-        cloneDeep(validSingleFile),
-        cloneDeep(validSingleFile),
-      ]
-      handleDuplicatesInAttachments(attachments)
-      const newFilenames = attachments.map((att) => att.filename)
-      // Expect uniqueness
-      expect(newFilenames.length).toBe(new Set(newFilenames).size)
-      expect(newFilenames).toContain(validSingleFile.filename)
-      expect(newFilenames).toContain(`1-${validSingleFile.filename}`)
-      expect(newFilenames).toContain(`2-${validSingleFile.filename}`)
-    })
-  })
-
   describe('mapAttachmentsFromParsedResponses', () => {
     it('should filter fields out when they are not attachments', () => {
       const response = getResponse(String(new ObjectId()), MOCK_ANSWER)
diff --git a/src/app/modules/submission/email-submission/email-submission.controller.ts b/src/app/modules/submission/email-submission/email-submission.controller.ts
index 1c66230ffe..da5333d0d2 100644
--- a/src/app/modules/submission/email-submission/email-submission.controller.ts
+++ b/src/app/modules/submission/email-submission/email-submission.controller.ts
@@ -31,6 +31,7 @@ import {
 import { SgidService } from '../../sgid/sgid.service'
 import { getOidcService } from '../../spcp/spcp.oidc.service'
 import * as EmailSubmissionMiddleware from '../email-submission/email-submission.middleware'
+import * as ReceiverMiddleware from '../receiver/receiver.middleware'
 import * as SubmissionService from '../submission.service'
 import { extractEmailConfirmationData } from '../submission.utils'
 import { reportSubmissionResponseTime } from '../submissions.statsd-client'
@@ -448,7 +449,7 @@ export const handleEmailSubmission = [
   // TODO: remove CaptchaMiddleware after extracting common components in Captcha and Turnstile
   CaptchaMiddleware.validateCaptchaParams,
   TurnstileMiddleware.validateTurnstileParams,
-  EmailSubmissionMiddleware.receiveEmailSubmission,
+  ReceiverMiddleware.receiveEmailSubmission,
   EmailSubmissionMiddleware.validateResponseParams,
   submitEmailModeForm,
 ] as ControllerHandler[]
diff --git a/src/app/modules/submission/email-submission/email-submission.errors.ts b/src/app/modules/submission/email-submission/email-submission.errors.ts
index 809d421ccb..2912039987 100644
--- a/src/app/modules/submission/email-submission/email-submission.errors.ts
+++ b/src/app/modules/submission/email-submission/email-submission.errors.ts
@@ -1,38 +1,5 @@
 import { ApplicationError } from '../../core/core.errors'
 
-/**
- * Error in headers passed to Busboy constructor
- */
-export class InitialiseMultipartReceiverError extends ApplicationError {
-  constructor(message = 'Error while initialising multipart receiver') {
-    super(message)
-  }
-}
-
-/**
- * Submission size too large
- */
-export class MultipartContentLimitError extends ApplicationError {
-  constructor(message = 'Multipart content size limit exceeded') {
-    super(message)
-  }
-}
-
-/**
- * Could not parse response body
- */
-export class MultipartContentParsingError extends ApplicationError {
-  constructor(message = 'Could not parse multipart form content') {
-    super(message)
-  }
-}
-
-export class MultipartError extends ApplicationError {
-  constructor(message = 'Error while receiving multipart content') {
-    super(message)
-  }
-}
-
 /**
  * Generic error for errors thrown while receiving multipart form data
  */
diff --git a/src/app/modules/submission/email-submission/email-submission.middleware.ts b/src/app/modules/submission/email-submission/email-submission.middleware.ts
index 1ab9e5bbbf..f135154228 100644
--- a/src/app/modules/submission/email-submission/email-submission.middleware.ts
+++ b/src/app/modules/submission/email-submission/email-submission.middleware.ts
@@ -1,88 +1,10 @@
 import { celebrate, Joi } from 'celebrate'
 
-import { BasicField, FieldResponse } from '../../../../../shared/types'
-import { createLoggerWithLabel } from '../../../config/logger'
-import { createReqMeta } from '../../../utils/request'
-import { ControllerHandler } from '../../core/core.types'
-
-import * as EmailSubmissionReceiver from './email-submission.receiver'
-import { mapRouteError } from './email-submission.util'
-
-const logger = createLoggerWithLabel(module)
-
-/**
- * Parses multipart-form data request. Parsed attachments are
- * placed into req.attachments and parsed fields are placed into
- * req.body.
- *
- * @param req - Express request object
- * @param res - Express response object
- * @param next - Express next middleware function
- */
-export const receiveEmailSubmission: ControllerHandler<
-  unknown,
-  { message: string },
-  { responses: FieldResponse[] }
-> = async (req, res, next) => {
-  const logMeta = {
-    action: 'receiveEmailSubmission',
-    ...createReqMeta(req),
-  }
-  return EmailSubmissionReceiver.createMultipartReceiver(req.headers)
-    .asyncAndThen((receiver) => {
-      const result =
-        EmailSubmissionReceiver.configureMultipartReceiver(receiver)
-      req.pipe(receiver)
-      return result
-    })
-    .map((parsed) => {
-      req.body = parsed
-      return next()
-    })
-    .mapErr((error) => {
-      logger.error({
-        message: 'Error while receiving multipart data',
-        meta: logMeta,
-        error,
-      })
-      const { errorMessage, statusCode } = mapRouteError(error)
-      return res.status(statusCode).json({ message: errorMessage })
-    })
-}
+import { sharedSubmissionParams } from '../submission.constants'
 
 /**
  * Celebrate validation for the email submissions endpoint.
  */
 export const validateResponseParams = celebrate({
-  body: Joi.object({
-    responses: Joi.array()
-      .items(
-        Joi.object()
-          .keys({
-            _id: Joi.string().required(),
-            question: Joi.string(),
-            fieldType: Joi.string()
-              .required()
-              .valid(...Object.values(BasicField)),
-            answer: Joi.string().allow(''),
-            answerArray: Joi.array(),
-            filename: Joi.string(),
-            content: Joi.binary(),
-            isHeader: Joi.boolean(),
-            myInfo: Joi.object(),
-            signature: Joi.string().allow(''),
-          })
-          .xor('answer', 'answerArray') // only answer or answerArray can be present at once
-          .with('filename', 'content'), // if filename is present, content must be present
-      )
-      .required(),
-    responseMetadata: Joi.object({
-      responseTimeMs: Joi.number(),
-      numVisibleFields: Joi.number(),
-    }),
-    /**
-     * @deprecated unused key, but frontend still sends it.
-     */
-    isPreview: Joi.boolean(),
-  }),
+  body: Joi.object(sharedSubmissionParams),
 })
diff --git a/src/app/modules/submission/email-submission/email-submission.service.ts b/src/app/modules/submission/email-submission/email-submission.service.ts
index 337dc5390e..85342c7d1a 100644
--- a/src/app/modules/submission/email-submission/email-submission.service.ts
+++ b/src/app/modules/submission/email-submission/email-submission.service.ts
@@ -15,7 +15,7 @@ import {
   IPopulatedEmailForm,
   IPopulatedForm,
 } from '../../../../types'
-import { ParsedEmailFormFieldResponse } from '../../../../types/api'
+import { ParsedClearFormFieldResponse } from '../../../../types/api'
 import { createLoggerWithLabel } from '../../../config/logger'
 import { getEmailSubmissionModel } from '../../../models/submission.server.model'
 import { DatabaseError } from '../../core/core.errors'
@@ -54,7 +54,7 @@ const logger = createLoggerWithLabel(module)
  * @returns errAsync(AttachmentTooLargeError) if total attachment size exceeds 7MB
  */
 export const validateAttachments = (
-  parsedResponses: ParsedEmailFormFieldResponse[],
+  parsedResponses: ParsedClearFormFieldResponse[],
 ): ResultAsync<true, InvalidFileExtensionError | AttachmentTooLargeError> => {
   const logMeta = { action: 'validateAttachments' }
   const attachments = mapAttachmentsFromResponses(parsedResponses)
diff --git a/src/app/modules/submission/email-submission/email-submission.util.ts b/src/app/modules/submission/email-submission/email-submission.util.ts
index b03bd409e8..e7f11c0878 100644
--- a/src/app/modules/submission/email-submission/email-submission.util.ts
+++ b/src/app/modules/submission/email-submission/email-submission.util.ts
@@ -17,10 +17,7 @@ import {
   MapRouteError,
   SPCPFieldTitle,
 } from '../../../../types'
-import {
-  ParsedEmailAttachmentResponse,
-  ParsedEmailFormFieldResponse,
-} from '../../../../types/api'
+import { ParsedClearFormFieldResponse } from '../../../../types/api'
 import { createLoggerWithLabel } from '../../../config/logger'
 import {
   CaptchaConnectionError,
@@ -86,6 +83,7 @@ import {
   ProcessedFieldResponse,
   ProcessedTableResponse,
 } from '../submission.types'
+import { isAttachmentResponse } from '../submission.utils'
 
 import {
   ATTACHMENT_PREFIX,
@@ -96,9 +94,7 @@ import {
 } from './email-submission.constants'
 import {
   AttachmentTooLargeError,
-  InitialiseMultipartReceiverError,
   InvalidFileExtensionError,
-  MultipartError,
   SubmissionHashError,
 } from './email-submission.errors'
 import { ResponseFormattedForEmail } from './email-submission.types'
@@ -344,21 +340,12 @@ export const areAttachmentsMoreThan7MB = (
   return totalAttachmentSize > 7000000
 }
 
-const isAttachmentResponse = (
-  response: ParsedEmailFormFieldResponse,
-): response is ParsedEmailAttachmentResponse => {
-  return (
-    response.fieldType === BasicField.Attachment &&
-    response.content !== undefined
-  )
-}
-
 /**
  * Extracts attachment fields from form responses
  * @param responses Form responses
  */
 export const mapAttachmentsFromResponses = (
-  responses: ParsedEmailFormFieldResponse[],
+  responses: ParsedClearFormFieldResponse[],
 ): IAttachmentInfo[] => {
   // look for attachments in parsedResponses
   // Could be undefined if it is not required, or hidden
@@ -371,16 +358,6 @@ export const mapAttachmentsFromResponses = (
 
 export const mapRouteError: MapRouteError = (error) => {
   switch (error.constructor) {
-    case InitialiseMultipartReceiverError:
-      return {
-        statusCode: StatusCodes.BAD_REQUEST,
-        errorMessage: 'Required headers are missing',
-      }
-    case MultipartError:
-      return {
-        statusCode: StatusCodes.UNPROCESSABLE_ENTITY,
-        errorMessage: 'Submission could not be parsed.',
-      }
     case DatabasePayloadSizeError:
       return {
         statusCode: StatusCodes.REQUEST_TOO_LONG,
@@ -534,84 +511,6 @@ export const mapRouteError: MapRouteError = (error) => {
   }
 }
 
-/**
- * Checks whether attachmentMap contains the given response
- * @param attachmentMap Map of field IDs to attachments
- * @param response The response to check
- * @returns true if response is in map, false otherwise
- */
-const isAttachmentResponseFromMap = (
-  attachmentMap: Record<IAttachmentInfo['fieldId'], IAttachmentInfo>,
-  response: ParsedEmailFormFieldResponse,
-): response is ParsedEmailAttachmentResponse => {
-  return !!attachmentMap[response._id]
-}
-
-/**
- * Adds the attachment's content, filename to each response,
- * based on their fieldId.
- * The response's answer is also changed to the attachment's filename.
- *
- * @param responses - Array of responses received
- * @param attachments - Array of file objects
- * @returns void. Modifies responses in place.
- */
-export const addAttachmentToResponses = (
-  responses: ParsedEmailFormFieldResponse[],
-  attachments: IAttachmentInfo[],
-): void => {
-  // Create a map of the attachments with fieldId as keys
-  const attachmentMap: Record<IAttachmentInfo['fieldId'], IAttachmentInfo> =
-    attachments.reduce<Record<string, IAttachmentInfo>>((acc, attachment) => {
-      acc[attachment.fieldId] = attachment
-      return acc
-    }, {})
-
-  if (responses) {
-    // matches responses to attachments using id, adding filename and content to response
-    responses.forEach((response) => {
-      if (isAttachmentResponseFromMap(attachmentMap, response)) {
-        const file = attachmentMap[response._id]
-        response.answer = file.filename
-        response.filename = file.filename
-        response.content = file.content
-      }
-    })
-  }
-}
-
-/**
- * Looks for duplicated filenames and changes the filename
- * to for example 1-abc.txt, 2-abc.txt.
- * One of the duplicated files will not have its name changed.
- * Two abc.txt will become 1-abc.txt and abc.txt
- * @param attachments - Array of file objects
- * @returns void. Modifies array in-place.
- */
-export const handleDuplicatesInAttachments = (
-  attachments: IAttachmentInfo[],
-): void => {
-  const names = new Map()
-
-  // fill up the map, the key: filename and value: count
-  attachments.forEach((a) => {
-    if (names.get(a.filename)) {
-      names.set(a.filename, names.get(a.filename) + 1)
-    } else {
-      names.set(a.filename, 1)
-    }
-  })
-
-  // Change names of duplicates
-  attachments.forEach((a) => {
-    if (names.get(a.filename) > 1) {
-      const count = names.get(a.filename) - 1
-      names.set(a.filename, count)
-      a.filename = `${count}-${a.filename}`
-    }
-  })
-}
-
 /**
  * Concatenate response into a string for hashing
  * @param formData Field-value tuples for admin email
diff --git a/src/app/modules/submission/encrypt-submission/__tests__/encrypt-submission.controller.spec.ts b/src/app/modules/submission/encrypt-submission/__tests__/encrypt-submission.controller.spec.ts
index 919b949ef9..25a87e767e 100644
--- a/src/app/modules/submission/encrypt-submission/__tests__/encrypt-submission.controller.spec.ts
+++ b/src/app/modules/submission/encrypt-submission/__tests__/encrypt-submission.controller.spec.ts
@@ -463,6 +463,12 @@ describe('encrypt-submission.controller', () => {
         number: 2,
         refNo: mockSubmissionId,
         submissionTime: 'some submission time',
+        payments: {
+          payoutDate: null,
+          paymentAmt: 0,
+          transactionFee: null,
+          email: '',
+        },
       }
 
       MockEncryptSubService.getSubmissionMetadata.mockReturnValueOnce(
diff --git a/src/app/modules/submission/encrypt-submission/__tests__/encrypt-submission.utils.spec.ts b/src/app/modules/submission/encrypt-submission/__tests__/encrypt-submission.utils.spec.ts
index 81dd31ccf6..f4fadb679c 100644
--- a/src/app/modules/submission/encrypt-submission/__tests__/encrypt-submission.utils.spec.ts
+++ b/src/app/modules/submission/encrypt-submission/__tests__/encrypt-submission.utils.spec.ts
@@ -1,14 +1,23 @@
 import { ObjectId } from 'bson-ext'
+import { readFileSync } from 'fs'
+import { cloneDeep } from 'lodash'
 import moment from 'moment-timezone'
 import { FormPaymentsField, PaymentType } from 'shared/types'
 
 import { SubmissionData } from 'src/types'
 
+import { handleDuplicatesInAttachments } from '../../receiver/receiver.utils'
 import {
   createEncryptedSubmissionDto,
   getPaymentAmount,
 } from '../encrypt-submission.utils'
 
+const validSingleFile = {
+  filename: 'govtech.jpg',
+  content: readFileSync('./__tests__/unit/backend/resources/govtech.jpg'),
+  fieldId: String(new ObjectId()),
+}
+
 describe('encrypt-submission.utils', () => {
   describe('createEncryptedSubmissionDto', () => {
     it('should create an encrypted submission DTO sucessfully', () => {
@@ -72,4 +81,24 @@ describe('encrypt-submission.utils', () => {
       expect(result).toEqual(expectedAmountCents)
     })
   })
+
+  // Note that if e.g. you have three attachments called abc.txt, abc.txt
+  // and 1-abc.txt, they will not be given unique names, i.e. one of the abc.txt
+  // will be renamed to 1-abc.txt so you end up with abc.txt, 1-abc.txt and 1-abc.txt.
+  describe('handleDuplicatesInAttachments', () => {
+    it('should make filenames unique by appending count when there are duplicates', () => {
+      const attachments = [
+        cloneDeep(validSingleFile),
+        cloneDeep(validSingleFile),
+        cloneDeep(validSingleFile),
+      ]
+      handleDuplicatesInAttachments(attachments)
+      const newFilenames = attachments.map((att) => att.filename)
+      // Expect uniqueness
+      expect(newFilenames.length).toBe(new Set(newFilenames).size)
+      expect(newFilenames).toContain(validSingleFile.filename)
+      expect(newFilenames).toContain(`1-${validSingleFile.filename}`)
+      expect(newFilenames).toContain(`2-${validSingleFile.filename}`)
+    })
+  })
 })
diff --git a/src/app/modules/submission/encrypt-submission/encrypt-submission.controller.ts b/src/app/modules/submission/encrypt-submission/encrypt-submission.controller.ts
index 89fd723cd4..08e8688305 100644
--- a/src/app/modules/submission/encrypt-submission/encrypt-submission.controller.ts
+++ b/src/app/modules/submission/encrypt-submission/encrypt-submission.controller.ts
@@ -1,8 +1,10 @@
 import JoiDate from '@joi/date'
+import { encode as encodeBase64 } from '@stablelib/base64'
 import { celebrate, Joi as BaseJoi, Segments } from 'celebrate'
 import { AuthedSessionData } from 'express-session'
 import { StatusCodes } from 'http-status-codes'
 import JSONStream from 'JSONStream'
+import { chain, omit } from 'lodash'
 import mongoose from 'mongoose'
 import { okAsync } from 'neverthrow'
 import Stripe from 'stripe'
@@ -14,6 +16,8 @@ import {
   FormSubmissionMetadataQueryDto,
   Payment,
   PaymentChannel,
+  StorageModeAttachment,
+  StorageModeAttachmentsMap,
   StorageModeSubmissionDto,
   StorageModeSubmissionMetadataList,
   SubmissionErrorDto,
@@ -21,9 +25,14 @@ import {
 } from '../../../../../shared/types'
 import { CaptchaTypes } from '../../../../../shared/types/captcha'
 import { StripePaymentMetadataDto } from '../../../../types'
-import { EncryptSubmissionDto } from '../../../../types/api'
+import {
+  EncryptFormFieldResponse,
+  EncryptSubmissionDto,
+  ParsedStorageModeSubmissionBody,
+} from '../../../../types/api'
 import config from '../../../config/config'
 import { paymentConfig } from '../../../config/features/payment.config'
+import formsgSdk from '../../../config/formsg-sdk'
 import { createLoggerWithLabel } from '../../../config/logger'
 import { stripe } from '../../../loaders/stripe'
 import getPaymentModel from '../../../models/payment.server.model'
@@ -46,6 +55,8 @@ import { getOidcService } from '../../spcp/spcp.oidc.service'
 import { getPopulatedUserById } from '../../user/user.service'
 import * as VerifiedContentService from '../../verified-content/verified-content.service'
 import * as EncryptSubmissionMiddleware from '../encrypt-submission/encrypt-submission.middleware'
+import * as ReceiverMiddleware from '../receiver/receiver.middleware'
+import { getFilteredResponses, isAttachmentResponse } from '../submission.utils'
 import { reportSubmissionResponseTime } from '../submissions.statsd-client'
 
 import {
@@ -647,6 +658,7 @@ const submitEncryptModeForm: ControllerHandler<
   )
 }
 
+// TODO (FRM-1232): remove endpoint after encryption boundary is shifted
 export const handleEncryptedSubmission = [
   CaptchaMiddleware.validateCaptchaParams,
   TurnstileMiddleware.validateTurnstileParams,
@@ -654,6 +666,173 @@ export const handleEncryptedSubmission = [
   submitEncryptModeForm,
 ] as ControllerHandler[]
 
+const encryptAttachment = async (
+  attachment: Buffer,
+  { id, publicKey }: { id: string; publicKey: string },
+): Promise<StorageModeAttachment & { id: string }> => {
+  let label
+
+  try {
+    label = 'Read file content'
+
+    const fileContentsView = new Uint8Array(attachment)
+
+    label = 'Encrypt content'
+    const encryptedAttachment = await formsgSdk.crypto.encryptFile(
+      fileContentsView,
+      publicKey,
+    )
+
+    label = 'Base64-encode encrypted content'
+    const encodedEncryptedAttachment = {
+      ...encryptedAttachment,
+      binary: encodeBase64(encryptedAttachment.binary),
+    }
+
+    return { id, encryptedFile: encodedEncryptedAttachment }
+  } catch (error) {
+    logger.error({
+      message: 'Error encrypting attachment',
+      meta: {
+        action: 'encryptAttachment',
+        label,
+        error,
+      },
+    })
+    throw error
+  }
+}
+
+const getEncryptedAttachmentsMapFromAttachmentsMap = async (
+  attachmentsMap: Record<string, Buffer>,
+  publicKey: string,
+): Promise<StorageModeAttachmentsMap> => {
+  const attachmentPromises = Object.entries(attachmentsMap).map(
+    ([id, attachment]) => encryptAttachment(attachment, { id, publicKey }),
+  )
+
+  return Promise.all(attachmentPromises).then((encryptedAttachmentsMeta) =>
+    chain(encryptedAttachmentsMeta)
+      .keyBy('id')
+      // Remove id from object.
+      .mapValues((v) => omit(v, 'id'))
+      .value(),
+  )
+}
+
+/**
+ * Encrypt submission content before saving to DB.
+ */
+const encryptSubmission: ControllerHandler<
+  { formId: string },
+  SubmissionResponseDto | SubmissionErrorDto,
+  ParsedStorageModeSubmissionBody
+> = async (req, res, next) => {
+  const { formId } = req.params
+
+  const logMeta = {
+    action: 'convertToEncryptMode',
+    ...createReqMeta(req),
+    formId,
+  }
+
+  // Retrieve form definition. TODO: extract this step when validation is added.
+  const formResult = await FormService.retrieveFullFormById(formId)
+  if (formResult.isErr()) {
+    logger.warn({
+      message: 'Failed to retrieve form from database',
+      meta: logMeta,
+      error: formResult.error,
+    })
+    const { errorMessage, statusCode } = mapRouteError(formResult.error)
+    return res.status(statusCode).json({ message: errorMessage })
+  }
+
+  // Guardrail to prevent new endpoint from being used for regular storage mode forms.
+  // TODO (FRM-1232): remove this guardrail when encryption boundary is shifted.
+  if (!formResult.value.get('newEncryptionBoundary')) {
+    return res
+      .status(StatusCodes.FORBIDDEN)
+      .json({ message: 'This endpoint has not been enabled for this form.' })
+  }
+
+  // Retrieve public key.
+  const publicKey = formResult.value.publicKey
+
+  if (!publicKey) {
+    logger.warn({
+      message: 'Form does not have a public key',
+      meta: logMeta,
+    })
+    return res.status(StatusCodes.INTERNAL_SERVER_ERROR).json({
+      message: 'Form does not have a public key',
+    })
+  }
+
+  const attachmentsMap: Record<string, Buffer> = {}
+
+  // Populate attachment map
+  req.body.responses.filter(isAttachmentResponse).forEach((response) => {
+    const fieldId = response._id
+    attachmentsMap[fieldId] = response.content
+  })
+
+  const encryptedAttachments =
+    await getEncryptedAttachmentsMapFromAttachmentsMap(
+      attachmentsMap,
+      publicKey,
+    )
+
+  const filteredResponses = getFilteredResponses(
+    formResult.value,
+    req.body.responses,
+  )
+
+  if (filteredResponses.isErr()) {
+    logger.warn({
+      message: filteredResponses.error.message,
+      meta: logMeta,
+    })
+    return res.status(StatusCodes.INTERNAL_SERVER_ERROR).json({
+      message: filteredResponses.error.message,
+    })
+  }
+
+  const encryptedContent = formsgSdk.crypto.encrypt(
+    req.body.responses.map((response) => {
+      if (isAttachmentResponse(response)) {
+        return {
+          ...response,
+          filename: undefined,
+          content: undefined, //Strip out attachment content
+        }
+      } else {
+        return response
+      }
+    }),
+    publicKey,
+  )
+
+  const encryptedVersion = {
+    attachments: encryptedAttachments,
+    responses: filteredResponses.value as EncryptFormFieldResponse[],
+    encryptedContent,
+    version: req.body.version,
+  }
+
+  req.body = encryptedVersion
+  return next()
+}
+
+export const handleStorageSubmission = [
+  CaptchaMiddleware.validateCaptchaParams,
+  TurnstileMiddleware.validateTurnstileParams,
+  ReceiverMiddleware.receiveStorageSubmission,
+  EncryptSubmissionMiddleware.validateStorageSubmissionParams,
+  encryptSubmission,
+  submitEncryptModeForm,
+] as ControllerHandler[]
+
 // Validates that the ending date >= starting date
 const validateDateRange = celebrate({
   [Segments.QUERY]: Joi.object()
diff --git a/src/app/modules/submission/encrypt-submission/encrypt-submission.middleware.ts b/src/app/modules/submission/encrypt-submission/encrypt-submission.middleware.ts
index ae3be8bbb9..aa98cd0d5b 100644
--- a/src/app/modules/submission/encrypt-submission/encrypt-submission.middleware.ts
+++ b/src/app/modules/submission/encrypt-submission/encrypt-submission.middleware.ts
@@ -2,6 +2,7 @@ import { celebrate, Joi, Segments } from 'celebrate'
 
 import { BasicField } from '../../../../../shared/types'
 import { paymentConfig } from '../../../config/features/payment.config'
+import { sharedSubmissionParams } from '../submission.constants'
 
 /**
  * Celebrate middleware for verifying shape of encrypted submission
@@ -67,3 +68,13 @@ export const validateEncryptSubmissionParams = celebrate({
     isPreview: Joi.boolean(),
   }),
 })
+
+/**
+ * Celebrate middleware for verifying shape of encrypted submission
+ */
+export const validateStorageSubmissionParams = celebrate({
+  [Segments.BODY]: Joi.object({
+    ...sharedSubmissionParams,
+    version: Joi.number().required(),
+  }),
+})
diff --git a/src/app/modules/submission/email-submission/__tests__/email-submission.receiver.spec.ts b/src/app/modules/submission/receiver/__tests__/receiver.service.spec.ts
similarity index 79%
rename from src/app/modules/submission/email-submission/__tests__/email-submission.receiver.spec.ts
rename to src/app/modules/submission/receiver/__tests__/receiver.service.spec.ts
index 4cbae4395a..a1cd469bb7 100644
--- a/src/app/modules/submission/email-submission/__tests__/email-submission.receiver.spec.ts
+++ b/src/app/modules/submission/receiver/__tests__/receiver.service.spec.ts
@@ -13,8 +13,8 @@ import { BasicField } from '../../../../../../shared/types'
 import {
   InitialiseMultipartReceiverError,
   MultipartError,
-} from '../email-submission.errors'
-import * as EmailSubmissionReceiver from '../email-submission.receiver'
+} from '../receiver.errors'
+import * as EmailSubmissionReceiver from '../receiver.service'
 
 jest.mock('busboy')
 const MockBusboy = jest.mocked(Busboy)
@@ -44,57 +44,119 @@ const VALID_UTF8_FILE_CONTENT = readFileSync(
   `${VALID_FILE_PATH}${VALID_UTF8_FILENAME}`,
 )
 
-describe('email-submission.receiver', () => {
+describe('receiver.service', () => {
   beforeEach(() => {
     MockBusboy.mockReset()
   })
   describe('createMultipartReceiver', () => {
-    it('should call Busboy constructor with the correct params', () => {
-      MockBusboy.mockReturnValueOnce(MOCK_BUSBOY)
+    describe('email submissions', () => {
+      it('should call Busboy constructor with the correct params', () => {
+        MockBusboy.mockReturnValueOnce(MOCK_BUSBOY)
+
+        const result = EmailSubmissionReceiver.createMultipartReceiver(
+          MOCK_HEADERS,
+          true,
+        )
+
+        expect(MockBusboy).toHaveBeenCalledWith({
+          headers: MOCK_HEADERS,
+          limits: {
+            fieldSize: 3 * MB,
+            fileSize: 7 * MB,
+          },
+        })
+        expect(result._unsafeUnwrap()).toEqual(MOCK_BUSBOY)
+      })
 
-      const result =
-        EmailSubmissionReceiver.createMultipartReceiver(MOCK_HEADERS)
+      it('should return error headers are missing content-type key-value', () => {
+        const result = EmailSubmissionReceiver.createMultipartReceiver(
+          omit(MOCK_HEADERS, 'content-type'),
+          true,
+        )
+
+        // Should have failed type guard and not have been called.
+        expect(MockBusboy).not.toHaveBeenCalled()
+        expect(result._unsafeUnwrapErr()).toEqual(
+          new InitialiseMultipartReceiverError(),
+        )
+      })
 
-      expect(MockBusboy).toHaveBeenCalledWith({
-        headers: MOCK_HEADERS,
-        limits: {
-          fieldSize: 3 * MB,
-          fileSize: 7 * MB,
-        },
+      it('should return error when busboy constructor errors', () => {
+        MockBusboy.mockImplementationOnce(() => {
+          throw new Error()
+        })
+
+        const result = EmailSubmissionReceiver.createMultipartReceiver(
+          MOCK_HEADERS,
+          true,
+        )
+
+        expect(MockBusboy).toHaveBeenCalledWith({
+          headers: MOCK_HEADERS,
+          limits: {
+            fieldSize: 3 * MB,
+            fileSize: 7 * MB,
+          },
+        })
+        expect(result._unsafeUnwrapErr()).toEqual(
+          new InitialiseMultipartReceiverError(),
+        )
       })
-      expect(result._unsafeUnwrap()).toEqual(MOCK_BUSBOY)
     })
 
-    it('should return error headers are missing content-type key-value', () => {
-      const result = EmailSubmissionReceiver.createMultipartReceiver(
-        omit(MOCK_HEADERS, 'content-type'),
-      )
+    describe('storage submissions', () => {
+      it('should call Busboy constructor with the correct params', () => {
+        MockBusboy.mockReturnValueOnce(MOCK_BUSBOY)
 
-      // Should have failed type guard and not have been called.
-      expect(MockBusboy).not.toHaveBeenCalled()
-      expect(result._unsafeUnwrapErr()).toEqual(
-        new InitialiseMultipartReceiverError(),
-      )
-    })
+        const result = EmailSubmissionReceiver.createMultipartReceiver(
+          MOCK_HEADERS,
+          false,
+        )
 
-    it('should return error when busboy constructor errors', () => {
-      MockBusboy.mockImplementationOnce(() => {
-        throw new Error()
+        expect(MockBusboy).toHaveBeenCalledWith({
+          headers: MOCK_HEADERS,
+          limits: {
+            fieldSize: 3 * MB,
+            fileSize: 20 * MB,
+          },
+        })
+        expect(result._unsafeUnwrap()).toEqual(MOCK_BUSBOY)
       })
 
-      const result =
-        EmailSubmissionReceiver.createMultipartReceiver(MOCK_HEADERS)
+      it('should return error headers are missing content-type key-value', () => {
+        const result = EmailSubmissionReceiver.createMultipartReceiver(
+          omit(MOCK_HEADERS, 'content-type'),
+          false,
+        )
+
+        // Should have failed type guard and not have been called.
+        expect(MockBusboy).not.toHaveBeenCalled()
+        expect(result._unsafeUnwrapErr()).toEqual(
+          new InitialiseMultipartReceiverError(),
+        )
+      })
 
-      expect(MockBusboy).toHaveBeenCalledWith({
-        headers: MOCK_HEADERS,
-        limits: {
-          fieldSize: 3 * MB,
-          fileSize: 7 * MB,
-        },
+      it('should return error when busboy constructor errors', () => {
+        MockBusboy.mockImplementationOnce(() => {
+          throw new Error()
+        })
+
+        const result = EmailSubmissionReceiver.createMultipartReceiver(
+          MOCK_HEADERS,
+          false,
+        )
+
+        expect(MockBusboy).toHaveBeenCalledWith({
+          headers: MOCK_HEADERS,
+          limits: {
+            fieldSize: 3 * MB,
+            fileSize: 20 * MB,
+          },
+        })
+        expect(result._unsafeUnwrapErr()).toEqual(
+          new InitialiseMultipartReceiverError(),
+        )
       })
-      expect(result._unsafeUnwrapErr()).toEqual(
-        new InitialiseMultipartReceiverError(),
-      )
     })
   })
 
diff --git a/src/app/modules/submission/receiver/__tests__/receiver.utils.spec.ts b/src/app/modules/submission/receiver/__tests__/receiver.utils.spec.ts
new file mode 100644
index 0000000000..008b0dcde6
--- /dev/null
+++ b/src/app/modules/submission/receiver/__tests__/receiver.utils.spec.ts
@@ -0,0 +1,94 @@
+import { ObjectId } from 'bson'
+import { readFileSync } from 'fs'
+import { BasicField } from 'shared/types'
+
+import {
+  FieldResponse,
+  IAttachmentResponse,
+  SingleAnswerFieldResponse,
+} from '../../../../../types'
+import { addAttachmentToResponses } from '../receiver.utils'
+
+const validSingleFile = {
+  filename: 'govtech.jpg',
+  content: readFileSync('./__tests__/unit/backend/resources/govtech.jpg'),
+  fieldId: String(new ObjectId()),
+}
+
+const zipOnlyValid = {
+  filename: 'onlyvalid.zip',
+  content: readFileSync('./__tests__/unit/backend/resources/onlyvalid.zip'),
+  fieldId: String(new ObjectId()),
+}
+
+const MOCK_ANSWER = 'mockAnswer'
+
+const getResponse = (_id: string, answer: string): SingleAnswerFieldResponse =>
+  ({
+    _id,
+    fieldType: BasicField.Attachment,
+    question: 'mockQuestion',
+    answer,
+  } as unknown as SingleAnswerFieldResponse)
+
+describe('email-submission.util', () => {
+  describe('addAttachmentToResponses', () => {
+    it('should add attachments to responses correctly when inputs are valid', () => {
+      const firstAttachment = validSingleFile
+      const secondAttachment = zipOnlyValid
+      const firstResponse = getResponse(
+        firstAttachment.fieldId,
+        firstAttachment.filename,
+      )
+      const secondResponse = getResponse(
+        secondAttachment.fieldId,
+        secondAttachment.filename,
+      )
+      addAttachmentToResponses(
+        [firstResponse, secondResponse],
+        [firstAttachment, secondAttachment],
+      )
+      expect(firstResponse.answer).toBe(firstAttachment.filename)
+      expect((firstResponse as unknown as IAttachmentResponse).filename).toBe(
+        firstAttachment.filename,
+      )
+      expect((firstResponse as unknown as IAttachmentResponse).content).toEqual(
+        firstAttachment.content,
+      )
+      expect(secondResponse.answer).toBe(secondAttachment.filename)
+      expect((secondResponse as unknown as IAttachmentResponse).filename).toBe(
+        secondAttachment.filename,
+      )
+      expect(
+        (secondResponse as unknown as IAttachmentResponse).content,
+      ).toEqual(secondAttachment.content)
+    })
+
+    it('should overwrite answer with filename when they are different', () => {
+      const attachment = validSingleFile
+      const response = getResponse(attachment.fieldId, MOCK_ANSWER)
+      addAttachmentToResponses([response], [attachment])
+      expect(response.answer).toBe(attachment.filename)
+      expect((response as unknown as IAttachmentResponse).filename).toBe(
+        attachment.filename,
+      )
+      expect((response as unknown as IAttachmentResponse).content).toEqual(
+        attachment.content,
+      )
+    })
+
+    it('should do nothing when responses are empty', () => {
+      const responses: FieldResponse[] = []
+      addAttachmentToResponses(responses, [validSingleFile])
+      expect(responses).toEqual([])
+    })
+
+    it('should do nothing when there are no attachments', () => {
+      const responses = [getResponse(validSingleFile.fieldId, MOCK_ANSWER)]
+      addAttachmentToResponses(responses, [])
+      expect(responses).toEqual([
+        getResponse(validSingleFile.fieldId, MOCK_ANSWER),
+      ])
+    })
+  })
+})
diff --git a/src/app/modules/submission/receiver/receiver.errors.ts b/src/app/modules/submission/receiver/receiver.errors.ts
new file mode 100644
index 0000000000..2ebc31e8d2
--- /dev/null
+++ b/src/app/modules/submission/receiver/receiver.errors.ts
@@ -0,0 +1,34 @@
+import { ApplicationError } from '../../core/core.errors'
+
+/**
+ * Error in headers passed to Busboy constructor
+ */
+export class InitialiseMultipartReceiverError extends ApplicationError {
+  constructor(message = 'Error while initialising multipart receiver') {
+    super(message)
+  }
+}
+
+/**
+ * Submission size too large
+ */
+export class MultipartContentLimitError extends ApplicationError {
+  constructor(message = 'Multipart content size limit exceeded') {
+    super(message)
+  }
+}
+
+/**
+ * Could not parse response body
+ */
+export class MultipartContentParsingError extends ApplicationError {
+  constructor(message = 'Could not parse multipart form content') {
+    super(message)
+  }
+}
+
+export class MultipartError extends ApplicationError {
+  constructor(message = 'Error while receiving multipart content') {
+    super(message)
+  }
+}
diff --git a/src/app/modules/submission/receiver/receiver.middleware.ts b/src/app/modules/submission/receiver/receiver.middleware.ts
new file mode 100644
index 0000000000..6e7459a67f
--- /dev/null
+++ b/src/app/modules/submission/receiver/receiver.middleware.ts
@@ -0,0 +1,97 @@
+import { Busboy } from 'busboy'
+import { NextFunction, Request, Response } from 'express-serve-static-core'
+import { Result } from 'neverthrow'
+
+import { FieldResponse } from '../../../../../shared/types'
+import { createLoggerWithLabel } from '../../../config/logger'
+import { createReqMeta } from '../../../utils/request'
+import { ControllerHandler } from '../../core/core.types'
+
+import { InitialiseMultipartReceiverError } from './receiver.errors'
+import * as SubmissionReceiver from './receiver.service'
+import { mapRouteError } from './receiver.utils'
+
+const logger = createLoggerWithLabel(module)
+
+/**
+ * Used for email mode only.
+ * Parses multipart-form data request. Parsed attachments are
+ * placed into req.attachments and parsed fields are placed into
+ * req.body.
+ *
+ * @param req - Express request object
+ * @param res - Express response object
+ * @param next - Express next middleware function
+ */
+export const receiveEmailSubmission: ControllerHandler<
+  unknown,
+  { message: string },
+  { responses: FieldResponse[] }
+> = async (req, res, next) => {
+  return receiveSubmission(
+    req,
+    res,
+    next,
+    SubmissionReceiver.createMultipartReceiver(req.headers, true),
+  )
+}
+
+/**
+ * Used for storage mode only.
+ * Parses multipart-form data request. Parsed attachments are
+ * placed into req.attachments and parsed fields are placed into
+ * req.body.
+ *
+ * @param req - Express request object
+ * @param res - Express response object
+ * @param next - Express next middleware function
+ */
+export const receiveStorageSubmission: ControllerHandler<
+  unknown,
+  { message: string },
+  { responses: FieldResponse[] }
+> = async (req, res, next) => {
+  return receiveSubmission(
+    req,
+    res,
+    next,
+    SubmissionReceiver.createMultipartReceiver(req.headers, false),
+  )
+}
+
+const receiveSubmission = async (
+  req: Request<
+    unknown,
+    { message: string },
+    { responses: FieldResponse[] },
+    unknown,
+    Record<string, unknown>
+  >,
+  res: Response<{ message: string }, Record<string, unknown>, number>,
+  next: NextFunction,
+  multipartReceiver: Result<Busboy, InitialiseMultipartReceiverError>,
+) => {
+  const logMeta = {
+    action: 'receiveSubmission',
+    ...createReqMeta(req),
+  }
+  return multipartReceiver
+    .asyncAndThen((receiver) => {
+      const result = SubmissionReceiver.configureMultipartReceiver(receiver)
+      req.pipe(receiver)
+      return result
+    })
+    .map((parsed) => {
+      req.body = parsed
+      return next()
+    })
+    .mapErr((error) => {
+      logger.error({
+        message: 'Error while receiving multipart data',
+        meta: logMeta,
+        error,
+      })
+      const { errorMessage, statusCode } = mapRouteError(error)
+      return res.status(statusCode).json({ message: errorMessage })
+    })
+}
diff --git a/src/app/modules/submission/email-submission/email-submission.receiver.ts b/src/app/modules/submission/receiver/receiver.service.ts
similarity index 91%
rename from src/app/modules/submission/email-submission/email-submission.receiver.ts
rename to src/app/modules/submission/receiver/receiver.service.ts
index f617106305..d10e07e032 100644
--- a/src/app/modules/submission/email-submission/email-submission.receiver.ts
+++ b/src/app/modules/submission/receiver/receiver.service.ts
@@ -11,18 +11,27 @@ import {
   MultipartContentLimitError,
   MultipartContentParsingError,
   MultipartError,
-} from './email-submission.errors'
-import { ParsedMultipartForm } from './email-submission.types'
+} from './receiver.errors'
+import { ParsedMultipartForm } from './receiver.types'
 import {
   addAttachmentToResponses,
   handleDuplicatesInAttachments,
-} from './email-submission.util'
+} from './receiver.utils'
 
 const logger = createLoggerWithLabel(module)
 
 const hasContentTypeHeaders = (headers: IncomingHttpHeaders) => {
   return !!headers['content-type']
 }
+/**
+ * Returns the file size limit in MB based on whether request is an email-mode submission
+ * @param isEmailMode boolean flag of whether request is in email-mode
+ * @returns 7 if email mode, 20 if not
+ */
+const fileSizeLimit = (isEmailMode: boolean) => {
+  if (isEmailMode) return 7
+  else return 20
+}
 
 /**
  * Initialises a Busboy object to receive the submission stream
@@ -30,6 +39,7 @@ const hasContentTypeHeaders = (headers: IncomingHttpHeaders) => {
  */
 export const createMultipartReceiver = (
   headers: IncomingHttpHeaders,
+  isEmailMode: boolean,
 ): Result<Busboy.Busboy, InitialiseMultipartReceiverError> => {
   if (!hasContentTypeHeaders(headers)) {
     logger.error({
@@ -47,7 +57,7 @@ export const createMultipartReceiver = (
       headers,
       limits: {
         fieldSize: 3 * MB,
-        fileSize: 7 * MB,
+        fileSize: fileSizeLimit(isEmailMode) * MB,
       },
     })
     return ok(busboy)
diff --git a/src/app/modules/submission/receiver/receiver.types.ts b/src/app/modules/submission/receiver/receiver.types.ts
new file mode 100644
index 0000000000..407ef60c7b
--- /dev/null
+++ b/src/app/modules/submission/receiver/receiver.types.ts
@@ -0,0 +1,7 @@
+import { ResponseMetadata } from '../../../../../shared/types'
+import { FieldResponse } from '../../../../types'
+
+export interface ParsedMultipartForm {
+  responses: FieldResponse[]
+  responseMetadata: ResponseMetadata
+}
diff --git a/src/app/modules/submission/receiver/receiver.utils.ts b/src/app/modules/submission/receiver/receiver.utils.ts
new file mode 100644
index 0000000000..c576fc7886
--- /dev/null
+++ b/src/app/modules/submission/receiver/receiver.utils.ts
@@ -0,0 +1,120 @@
+import { StatusCodes } from 'http-status-codes'
+
+import { IAttachmentInfo, MapRouteError } from '../../../../types'
+import {
+  ParsedClearAttachmentResponse,
+  ParsedClearFormFieldResponse,
+} from '../../../../types/api'
+import { createLoggerWithLabel } from '../../../config/logger'
+
+import {
+  InitialiseMultipartReceiverError,
+  MultipartError,
+} from './receiver.errors'
+
+const logger = createLoggerWithLabel(module)
+
+export const mapRouteError: MapRouteError = (error) => {
+  switch (error.constructor) {
+    case InitialiseMultipartReceiverError:
+      return {
+        statusCode: StatusCodes.BAD_REQUEST,
+        errorMessage: 'Required headers are missing',
+      }
+    case MultipartError:
+      return {
+        statusCode: StatusCodes.UNPROCESSABLE_ENTITY,
+        errorMessage: 'Submission could not be parsed.',
+      }
+    default:
+      logger.error({
+        message: 'mapRouteError called with unknown error type',
+        meta: {
+          action: 'mapRouteError',
+        },
+        error,
+      })
+      return {
+        statusCode: StatusCodes.INTERNAL_SERVER_ERROR,
+        errorMessage: 'Something went wrong. Please refresh and try again.',
+      }
+  }
+}
+
+/**
+ * Checks whether attachmentMap contains the given response
+ * @param attachmentMap Map of field IDs to attachments
+ * @param response The response to check
+ * @returns true if response is in map, false otherwise
+ */
+const isAttachmentResponseFromMap = (
+  attachmentMap: Record<IAttachmentInfo['fieldId'], IAttachmentInfo>,
+  response: ParsedClearFormFieldResponse,
+): response is ParsedClearAttachmentResponse => {
+  return !!attachmentMap[response._id]
+}
+
+/**
+ * Adds the attachment's content, filename to each response,
+ * based on their fieldId.
+ * The response's answer is also changed to the attachment's filename.
+ *
+ * @param responses - Array of responses received
+ * @param attachments - Array of file objects
+ * @returns void. Modifies responses in place.
+ */
+export const addAttachmentToResponses = (
+  responses: ParsedClearFormFieldResponse[],
+  attachments: IAttachmentInfo[],
+): void => {
+  // Create a map of the attachments with fieldId as keys
+  const attachmentMap: Record<IAttachmentInfo['fieldId'], IAttachmentInfo> =
+    attachments.reduce<Record<string, IAttachmentInfo>>((acc, attachment) => {
+      acc[attachment.fieldId] = attachment
+      return acc
+    }, {})
+
+  if (responses) {
+    // matches responses to attachments using id, adding filename and content to response
+    responses.forEach((response) => {
+      if (isAttachmentResponseFromMap(attachmentMap, response)) {
+        const file = attachmentMap[response._id]
+        response.answer = file.filename
+        response.filename = file.filename
+        response.content = file.content
+      }
+    })
+  }
+}
+
+/**
+ * Looks for duplicated filenames and changes the filename
+ * to for example 1-abc.txt, 2-abc.txt.
+ * One of the duplicated files will not have its name changed.
+ * Two abc.txt will become 1-abc.txt and abc.txt
+ * @param attachments - Array of file objects
+ * @returns void. Modifies array in-place.
+ */
+export const handleDuplicatesInAttachments = (
+  attachments: IAttachmentInfo[],
+): void => {
+  const names = new Map()
+
+  // fill up the map, the key: filename and value: count
+  attachments.forEach((a) => {
+    if (names.get(a.filename)) {
+      names.set(a.filename, names.get(a.filename) + 1)
+    } else {
+      names.set(a.filename, 1)
+    }
+  })
+
+  // Change names of duplicates
+  attachments.forEach((a) => {
+    if (names.get(a.filename) > 1) {
+      const count = names.get(a.filename) - 1
+      names.set(a.filename, count)
+      a.filename = `${count}-${a.filename}`
+    }
+  })
+}
diff --git a/src/app/modules/submission/submission.constants.ts b/src/app/modules/submission/submission.constants.ts
new file mode 100644
index 0000000000..d76fd4b57e
--- /dev/null
+++ b/src/app/modules/submission/submission.constants.ts
@@ -0,0 +1,40 @@
+import { Joi } from 'celebrate'
+
+import { BasicField } from '../../../../shared/types'
+import { paymentConfig } from '../../config/features/payment.config'
+
+export const sharedSubmissionParams = {
+  responses: Joi.array()
+    .items(
+      Joi.object()
+        .keys({
+          _id: Joi.string().required(),
+          question: Joi.string(),
+          fieldType: Joi.string()
+            .required()
+            .valid(...Object.values(BasicField)),
+          answer: Joi.string().allow(''),
+          answerArray: Joi.array(),
+          filename: Joi.string(),
+          content: Joi.binary(),
+          isHeader: Joi.boolean(),
+          myInfo: Joi.object(),
+          signature: Joi.string().allow(''),
+        })
+        .xor('answer', 'answerArray') // only answer or answerArray can be present at once
+        .with('filename', 'content'), // if filename is present, content must be present
+    )
+    .required(),
+  paymentReceiptEmail: Joi.string(),
+  payments: Joi.object({
+    amount_cents: Joi.number()
+      .integer()
+      .positive()
+      .min(paymentConfig.minPaymentAmountCents)
+      .max(paymentConfig.maxPaymentAmountCents),
+  }),
+  responseMetadata: Joi.object({
+    responseTimeMs: Joi.number(),
+    numVisibleFields: Joi.number(),
+  }),
+}
diff --git a/src/app/modules/submission/submission.types.ts b/src/app/modules/submission/submission.types.ts
index 6fd5e44050..f687cdbc41 100644
--- a/src/app/modules/submission/submission.types.ts
+++ b/src/app/modules/submission/submission.types.ts
@@ -9,7 +9,7 @@ import {
 } from '../../../../shared/types'
 import {
   EncryptAttachmentResponse,
-  ParsedEmailAttachmentResponse,
+  ParsedClearAttachmentResponse,
 } from '../../../types/api'
 import { FormFieldSchema } from '../../../types/field'
 import {
@@ -67,7 +67,7 @@ export type ProcessedChildrenResponse = ChildBirthRecordsResponse &
  * Storage mode attachment response is the default response.
  */
 export type ProcessedAttachmentResponse = (
-  | ParsedEmailAttachmentResponse
+  | ParsedClearAttachmentResponse
   | EncryptAttachmentResponse
 ) &
   ProcessedResponse
diff --git a/src/app/modules/submission/submission.utils.ts b/src/app/modules/submission/submission.utils.ts
index 672abb7f02..bc5b0bec5c 100644
--- a/src/app/modules/submission/submission.utils.ts
+++ b/src/app/modules/submission/submission.utils.ts
@@ -8,6 +8,10 @@ import {
   FormResponseMode,
 } from '../../../../shared/types'
 import { FieldResponse, FormFieldSchema, IFormDocument } from '../../../types'
+import {
+  ParsedClearAttachmentResponse,
+  ParsedClearFormFieldResponse,
+} from '../../../types/api'
 import { AutoReplyMailData } from '../../services/mail/mail.types'
 
 import { ConflictError } from './submission.errors'
@@ -155,3 +159,12 @@ export const getNormalisedResponseTime = (
 ) => {
   return (10 * responseTimeMs) / numVisibleFields
 }
+
+export const isAttachmentResponse = (
+  response: ParsedClearFormFieldResponse,
+): response is ParsedClearAttachmentResponse => {
+  return (
+    response.fieldType === BasicField.Attachment &&
+    response.content !== undefined
+  )
+}
diff --git a/src/app/routes/api/v3/forms/public-forms.submissions.routes.ts b/src/app/routes/api/v3/forms/public-forms.submissions.routes.ts
index 8988ad49b4..ad1c012a9c 100644
--- a/src/app/routes/api/v3/forms/public-forms.submissions.routes.ts
+++ b/src/app/routes/api/v3/forms/public-forms.submissions.routes.ts
@@ -30,8 +30,9 @@ PublicFormsSubmissionsRouter.route(
   EmailSubmissionController.handleEmailSubmission,
 )
 
+// TODO (FRM-1232): remove endpoint after encryption boundary is shifted
 /**
- * Submit a form response, submit a form response, and stores the encrypted
+ * Submit a form response, validate submission params and stores the encrypted
  * contents.
  * Optionally, an autoreply confirming submission is sent back to the user, if
  * an email address was given. SMS autoreplies for mobile number fields are also
@@ -48,3 +49,19 @@ PublicFormsSubmissionsRouter.route(
   limitRate({ max: rateLimitConfig.submissions }),
   EncryptSubmissionController.handleEncryptedSubmission,
 )
+
+/**
+ * Submit a form response before public key encryption, performs pre-encryption
+ * steps (e.g. field validation, virus scanning) and stores the encrypted contents.
+ * @route POST /forms/:formId/submissions/storage
+ * @param response.body.required - contains the entire form submission
+ * @param captchaResponse.query - contains the reCAPTCHA response artifact, if any
+ * @returns 200 - submission made
+ * @returns 400 - submission has bad data and could not be processed
+ */
+PublicFormsSubmissionsRouter.route(
+  '/:formId([a-fA-F0-9]{24})/submissions/storage',
+).post(
+  limitRate({ max: rateLimitConfig.submissions }),
+  EncryptSubmissionController.handleStorageSubmission,
+)
diff --git a/src/types/api/email_submission.ts b/src/types/api/email_submission.ts
index 5e9f2f3232..c52e7f83c7 100644
--- a/src/types/api/email_submission.ts
+++ b/src/types/api/email_submission.ts
@@ -1,23 +1,11 @@
 import type { Merge } from 'type-fest'
 
 import {
-  AttachmentResponse,
   EmailModeSubmissionContentDto,
-  FieldResponse,
   ResponseMetadata,
 } from '../../../shared/types'
 
-/**
- * AttachmentResponses with additional server injected metadata on email forms.
- */
-export type ParsedEmailAttachmentResponse = AttachmentResponse & {
-  filename: string
-  content: Buffer
-}
-
-export type ParsedEmailFormFieldResponse =
-  | Exclude<FieldResponse, AttachmentResponse>
-  | ParsedEmailAttachmentResponse
+import { ParsedClearFormFieldResponse } from './submission'
 
 /**
  * Email submission body after req.body's FormData has passed through the
@@ -26,7 +14,7 @@ export type ParsedEmailFormFieldResponse =
 export type ParsedEmailModeSubmissionBody = Merge<
   EmailModeSubmissionContentDto,
   {
-    responses: ParsedEmailFormFieldResponse[]
+    responses: ParsedClearFormFieldResponse[]
     responseMetadata?: ResponseMetadata
   }
 >
diff --git a/src/types/api/encrypt_submission.ts b/src/types/api/encrypt_submission.ts
index 55a948bbfc..0c1afb6c04 100644
--- a/src/types/api/encrypt_submission.ts
+++ b/src/types/api/encrypt_submission.ts
@@ -6,6 +6,8 @@ import {
   StorageModeSubmissionContentDto,
 } from '../../../shared/types'
 
+import { ParsedEmailModeSubmissionBody } from './email_submission'
+
 export type EncryptSubmissionDto = Merge<
   StorageModeSubmissionContentDto,
   { responses: EncryptFormFieldResponse[] }
@@ -19,3 +21,11 @@ export type EncryptAttachmentResponse = AttachmentResponse & {
 export type EncryptFormFieldResponse =
   | Exclude<FieldResponse, AttachmentResponse>
   | EncryptAttachmentResponse
+
+/**
+ * Storage submission body after req.body's FormData has passed through the
+ * ReceiverMiddleware.receiveStorageSubmission middleware.
+ */
+export type ParsedStorageModeSubmissionBody = ParsedEmailModeSubmissionBody & {
+  version: number
+}
diff --git a/src/types/api/index.ts b/src/types/api/index.ts
index f67633b409..2e91794e1a 100644
--- a/src/types/api/index.ts
+++ b/src/types/api/index.ts
@@ -2,3 +2,4 @@ export * from './field'
 export * from './form'
 export * from './encrypt_submission'
 export * from './email_submission'
+export * from './submission'
diff --git a/src/types/api/submission.ts b/src/types/api/submission.ts
new file mode 100644
index 0000000000..089f7558e2
--- /dev/null
+++ b/src/types/api/submission.ts
@@ -0,0 +1,13 @@
+import { AttachmentResponse, FieldResponse } from '../../../shared/types'
+
+/**
+ * AttachmentResponses with additional server injected metadata on email forms.
+ */
+export type ParsedClearAttachmentResponse = AttachmentResponse & {
+  filename: string
+  content: Buffer
+}
+
+export type ParsedClearFormFieldResponse =
+  | Exclude<FieldResponse, AttachmentResponse>
+  | ParsedClearAttachmentResponse
diff --git a/src/types/response/index.ts b/src/types/response/index.ts
index dd6607b200..4d6f110d0f 100644
--- a/src/types/response/index.ts
+++ b/src/types/response/index.ts
@@ -6,12 +6,12 @@ import {
 import {
   EncryptAttachmentResponse,
   EncryptFormFieldResponse,
-  ParsedEmailAttachmentResponse,
-  ParsedEmailFormFieldResponse,
+  ParsedClearAttachmentResponse,
+  ParsedClearFormFieldResponse,
 } from '../api'
 
 export type IAttachmentResponse =
-  | ParsedEmailAttachmentResponse
+  | ParsedClearAttachmentResponse
   | EncryptAttachmentResponse
 
 export type SingleAnswerFieldResponse =
@@ -23,7 +23,7 @@ export type SingleAnswerFieldResponse =
       | ChildBirthRecordsResponse
     >
   | Exclude<
-      ParsedEmailFormFieldResponse,
+      ParsedClearFormFieldResponse,
       | TableResponse
       | CheckboxResponse
       | IAttachmentResponse
@@ -32,4 +32,4 @@ export type SingleAnswerFieldResponse =
 
 export type FieldResponse =
   | EncryptFormFieldResponse
-  | ParsedEmailFormFieldResponse
+  | ParsedClearFormFieldResponse

From 33f1e2fb5f1cfe029dcd20e3bc718b74ab938fd7 Mon Sep 17 00:00:00 2001
From: Foo Chi Fa <59867455+foochifa@users.noreply.github.com>
Date: Mon, 7 Aug 2023 09:52:58 +0800
Subject: [PATCH 11/13] feat: toggle issue notification (#6590)

* feat: add notification flag to schema

* feat: update types and update settings middleware

* feat: FE integation to toggle issue notification

* fix: integration issues and toast copy

* feat: do not sent if notification flag is false

* test: fix test cases

* test: add test case to check that email is turned off

* chore: remove redundant settings check
---
 .../settings/SettingsGeneralPage.tsx          |  3 ++
 .../admin-form/settings/SettingsService.ts    |  8 ++++
 .../FormIssueNotificationToggle.tsx           | 38 +++++++++++++++++++
 .../features/admin-form/settings/mutations.ts | 18 +++++++++
 shared/constants/form.ts                      |  2 +
 shared/types/form/form.ts                     |  1 +
 .../__tests__/form.server.model.spec.ts       |  1 +
 src/app/models/form.server.model.ts           |  5 +++
 .../form/admin-form/admin-form.middlewares.ts |  1 +
 .../issue/__tests__/issue.controller.spec.ts  | 30 +++++++++++++++
 src/app/modules/issue/issue.controller.ts     |  5 ++-
 src/types/form.ts                             |  2 +
 12 files changed, 113 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/features/admin-form/settings/components/FormIssueNotificationToggle.tsx

diff --git a/frontend/src/features/admin-form/settings/SettingsGeneralPage.tsx b/frontend/src/features/admin-form/settings/SettingsGeneralPage.tsx
index 4d2e0cf92e..b9004ed49b 100644
--- a/frontend/src/features/admin-form/settings/SettingsGeneralPage.tsx
+++ b/frontend/src/features/admin-form/settings/SettingsGeneralPage.tsx
@@ -3,6 +3,7 @@ import { Divider } from '@chakra-ui/react'
 import { FormCaptchaToggle } from './components/FormCaptchaToggle'
 import { FormCustomisationSection } from './components/FormCustomisationSection'
 import { FormDetailsSection } from './components/FormDetailsSection'
+import { FormIssueNotificationToggle } from './components/FormIssueNotificationToggle'
 import { FormLimitToggle } from './components/FormLimitToggle'
 import { FormStatusToggle } from './components/FormStatusToggle'
 import { GeneralTabHeader } from './components/GeneralTabHeader'
@@ -17,6 +18,8 @@ export const SettingsGeneralPage = (): JSX.Element => {
       <Divider my="2.5rem" />
       <FormCaptchaToggle />
       <Divider my="2.5rem" />
+      <FormIssueNotificationToggle />
+      <Divider my="2.5rem" />
       <FormDetailsSection />
     </>
   )
diff --git a/frontend/src/features/admin-form/settings/SettingsService.ts b/frontend/src/features/admin-form/settings/SettingsService.ts
index 5b8f6b8729..bb1691c9e8 100644
--- a/frontend/src/features/admin-form/settings/SettingsService.ts
+++ b/frontend/src/features/admin-form/settings/SettingsService.ts
@@ -56,6 +56,14 @@ export const updateFormCaptcha: UpdateFormFn<'hasCaptcha'> = async (
   return updateFormSettings(formId, { hasCaptcha: newHasCaptcha })
 }
 
+export const updateFormIssueNotification: UpdateFormFn<
+  'hasIssueNotification'
+> = async (formId, newHasIssueNotifcation) => {
+  return updateFormSettings(formId, {
+    hasIssueNotification: newHasIssueNotifcation,
+  })
+}
+
 export const updateFormInactiveMessage: UpdateFormFn<
   'inactiveMessage'
 > = async (formId, newMessage) => {
diff --git a/frontend/src/features/admin-form/settings/components/FormIssueNotificationToggle.tsx b/frontend/src/features/admin-form/settings/components/FormIssueNotificationToggle.tsx
new file mode 100644
index 0000000000..a4c254bcb5
--- /dev/null
+++ b/frontend/src/features/admin-form/settings/components/FormIssueNotificationToggle.tsx
@@ -0,0 +1,38 @@
+import { useCallback, useMemo } from 'react'
+import { Skeleton } from '@chakra-ui/react'
+
+import Toggle from '~components/Toggle'
+
+import { useMutateFormSettings } from '../mutations'
+import { useAdminFormSettings } from '../queries'
+
+export const FormIssueNotificationToggle = (): JSX.Element => {
+  const { data: settings, isLoading: isLoadingSettings } =
+    useAdminFormSettings()
+
+  const hasIssueNotification = useMemo(
+    () => settings && settings?.hasIssueNotification,
+    [settings],
+  )
+
+  const { mutateFormIssueNotification } = useMutateFormSettings()
+
+  const handleToggleIssueNotification = useCallback(() => {
+    if (!settings || isLoadingSettings || mutateFormIssueNotification.isLoading)
+      return
+    const nextHasIssueNotification = !settings.hasIssueNotification
+    return mutateFormIssueNotification.mutate(nextHasIssueNotification)
+  }, [isLoadingSettings, mutateFormIssueNotification, settings])
+
+  return (
+    <Skeleton isLoaded={!isLoadingSettings}>
+      <Toggle
+        isLoading={mutateFormIssueNotification.isLoading}
+        isChecked={hasIssueNotification}
+        label="Enable email notifications for reports made by respondents"
+        description="You will receive a maximum of one email per form, per day if there are any issues reported."
+        onChange={() => handleToggleIssueNotification()}
+      />
+    </Skeleton>
+  )
+}
diff --git a/frontend/src/features/admin-form/settings/mutations.ts b/frontend/src/features/admin-form/settings/mutations.ts
index ce03163b7e..72c8d79ab4 100644
--- a/frontend/src/features/admin-form/settings/mutations.ts
+++ b/frontend/src/features/admin-form/settings/mutations.ts
@@ -32,6 +32,7 @@ import {
   updateFormEmails,
   updateFormEsrvcId,
   updateFormInactiveMessage,
+  updateFormIssueNotification,
   updateFormLimit,
   updateFormStatus,
   updateFormTitle,
@@ -148,6 +149,22 @@ export const useMutateFormSettings = () => {
     },
   )
 
+  const mutateFormIssueNotification = useMutation(
+    (nextHasIssueNotification: boolean) =>
+      updateFormIssueNotification(formId, nextHasIssueNotification),
+    {
+      onSuccess: (newData) => {
+        handleSuccess({
+          newData,
+          toastDescription: `Email notifications for reports are now ${
+            newData.hasIssueNotification ? 'enabled' : 'disabled'
+          } on your form.`,
+        })
+      },
+      onError: handleError,
+    },
+  )
+
   const mutateFormTitle = useMutation(
     (nextTitle: string) => updateFormTitle(formId, nextTitle),
     {
@@ -325,6 +342,7 @@ export const useMutateFormSettings = () => {
     mutateFormLimit,
     mutateFormInactiveMessage,
     mutateFormCaptcha,
+    mutateFormIssueNotification,
     mutateFormEmails,
     mutateFormTitle,
     mutateFormAuthType,
diff --git a/shared/constants/form.ts b/shared/constants/form.ts
index 00b227a88b..3f7ef15dd8 100644
--- a/shared/constants/form.ts
+++ b/shared/constants/form.ts
@@ -6,6 +6,7 @@ const PUBLIC_FORM_FIELDS = <const>[
   'form_fields',
   'form_logics',
   'hasCaptcha',
+  'hasIssueNotification',
   'startPage',
   'status',
   'title',
@@ -25,6 +26,7 @@ const FORM_SETTINGS_FIELDS = <const>[
   'authType',
   'esrvcId',
   'hasCaptcha',
+  'hasIssueNotification',
   'inactiveMessage',
   'status',
   'submissionLimit',
diff --git a/shared/types/form/form.ts b/shared/types/form/form.ts
index 58f7bf1f5f..7501016c41 100644
--- a/shared/types/form/form.ts
+++ b/shared/types/form/form.ts
@@ -119,6 +119,7 @@ export interface FormBase {
   endPage: FormEndPage
 
   hasCaptcha: boolean
+  hasIssueNotification: boolean
   authType: FormAuthType
 
   status: FormStatus
diff --git a/src/app/models/__tests__/form.server.model.spec.ts b/src/app/models/__tests__/form.server.model.spec.ts
index cdedd7e90e..65d99d708d 100644
--- a/src/app/models/__tests__/form.server.model.spec.ts
+++ b/src/app/models/__tests__/form.server.model.spec.ts
@@ -78,6 +78,7 @@ const FORM_DEFAULTS = {
     buttonText: 'Submit another response',
   },
   hasCaptcha: true,
+  hasIssueNotification: true,
   form_fields: [],
   form_logics: [],
   permissionList: [],
diff --git a/src/app/models/form.server.model.ts b/src/app/models/form.server.model.ts
index faf73cf6df..8947e47fd2 100644
--- a/src/app/models/form.server.model.ts
+++ b/src/app/models/form.server.model.ts
@@ -432,6 +432,11 @@ const compileFormModel = (db: Mongoose): IFormModel => {
         default: true,
       },
 
+      hasIssueNotification: {
+        type: Boolean,
+        default: true,
+      },
+
       authType: {
         type: String,
         enum: Object.values(FormAuthType),
diff --git a/src/app/modules/form/admin-form/admin-form.middlewares.ts b/src/app/modules/form/admin-form/admin-form.middlewares.ts
index 0c3a1f5aba..6434cf6dae 100644
--- a/src/app/modules/form/admin-form/admin-form.middlewares.ts
+++ b/src/app/modules/form/admin-form/admin-form.middlewares.ts
@@ -20,6 +20,7 @@ export const updateSettingsValidator = celebrate({
     ),
     esrvcId: Joi.string().allow(''),
     hasCaptcha: Joi.boolean(),
+    hasIssueNotification: Joi.boolean(),
     inactiveMessage: Joi.string(),
     status: Joi.string().valid(...Object.values(FormStatus)),
     submissionLimit: Joi.number().allow(null),
diff --git a/src/app/modules/issue/__tests__/issue.controller.spec.ts b/src/app/modules/issue/__tests__/issue.controller.spec.ts
index a4351dedb9..60879d5664 100644
--- a/src/app/modules/issue/__tests__/issue.controller.spec.ts
+++ b/src/app/modules/issue/__tests__/issue.controller.spec.ts
@@ -1,5 +1,6 @@
 import expressHandler from '__tests__/unit/backend/helpers/jest-express'
 import { ObjectId } from 'bson-ext'
+import { merge, omit } from 'lodash'
 import { err, errAsync, ok, okAsync } from 'neverthrow'
 
 import { FormStatus } from '../../../../../shared/types'
@@ -38,6 +39,7 @@ describe('issue.controller', () => {
       status: FormStatus.Public,
       permissionList: [MOCK_ADMIN_EMAIL],
       admin: { email: MOCK_ADMIN_EMAIL },
+      hasIssueNotification: true,
     } as unknown as IPopulatedForm
 
     const MOCK_FORM_ISSUE = {} as unknown as IFormIssueSchema
@@ -137,5 +139,33 @@ describe('issue.controller', () => {
         message: 'Successfully submitted issue.',
       })
     })
+
+    it('should return ok without sending email if notification is off', async () => {
+      // Arrange
+      const mockRes = expressHandler.mockResponse()
+      const mockFormWithoutNoti = merge(
+        omit(MOCK_FORM, 'hasIssueNotification'),
+        { hasIssueNotification: false },
+      )
+      MockFormService.retrieveFormKeysById.mockReturnValueOnce(
+        okAsync(mockFormWithoutNoti),
+      )
+      MockFormService.isFormPublic.mockReturnValueOnce(ok(true))
+      MockIssueService.insertFormIssue.mockReturnValueOnce(
+        okAsync(MOCK_FORM_ISSUE),
+      )
+      // Act
+      await FormIssueController.submitFormIssueForTesting(
+        MOCK_REQ,
+        mockRes,
+        jest.fn(),
+      )
+      // Assert
+      expect(mockRes.status).toHaveBeenCalledWith(200)
+      expect(MockIssueService.notifyFormAdmin).toHaveBeenCalledTimes(0)
+      expect(mockRes.json).toHaveBeenCalledWith({
+        message: 'Successfully submitted issue.',
+      })
+    })
   })
 })
diff --git a/src/app/modules/issue/issue.controller.ts b/src/app/modules/issue/issue.controller.ts
index 1a76a109c2..10bb581cdc 100644
--- a/src/app/modules/issue/issue.controller.ts
+++ b/src/app/modules/issue/issue.controller.ts
@@ -55,6 +55,7 @@ const submitFormIssue: ControllerHandler<
     'permissionList',
     'status',
     'title',
+    'hasIssueNotification',
   ])
     .andThen((form) => FormService.isFormPublic(form).map(() => form))
     .andThen((form) =>
@@ -63,7 +64,9 @@ const submitFormIssue: ControllerHandler<
         issue,
         email,
       }).map(async (formIssue) => {
-        await notifyFormAdmin({ form, formIssue })
+        if (form.hasIssueNotification) {
+          await notifyFormAdmin({ form, formIssue })
+        }
       }),
     )
     .map(async () => {
diff --git a/src/types/form.ts b/src/types/form.ts
index 6f8f520762..86d10af692 100644
--- a/src/types/form.ts
+++ b/src/types/form.ts
@@ -61,6 +61,7 @@ type FormDefaultableKey =
   | 'startPage'
   | 'endPage'
   | 'hasCaptcha'
+  | 'hasIssueNotification'
   | 'authType'
   | 'status'
   | 'inactiveMessage'
@@ -250,6 +251,7 @@ interface IFormBaseDocument<T extends IFormSchema> {
   form_logics: NonNullable<T['form_logics']>
   permissionList: NonNullable<T['permissionList']>
   hasCaptcha: NonNullable<T['hasCaptcha']>
+  hasIssueNotification: NonNullable<T['hasIssueNotification']>
   authType: NonNullable<T['authType']>
   status: NonNullable<T['status']>
   inactiveMessage: NonNullable<T['inactiveMessage']>

From f0ca3fa600ca898cf7115731b414718961a29995 Mon Sep 17 00:00:00 2001
From: sebastianwzq <136435307+sebastianwzq@users.noreply.github.com>
Date: Mon, 7 Aug 2023 10:11:28 +0800
Subject: [PATCH 12/13] fix: updated payment view to follow colour theme
 (#6598)

* updated payment view to follow colour theme

* updated payment view to follow colour theme
---
 .../BuilderAndDesignContent/PaymentView.tsx            |  4 +++-
 .../templates/Field/PaymentPreview/PaymentPreview.tsx  | 10 ++++++++--
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/PaymentView.tsx b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/PaymentView.tsx
index e7a738183b..fab0fa421a 100644
--- a/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/PaymentView.tsx
+++ b/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/PaymentView.tsx
@@ -11,6 +11,7 @@ import Tooltip from '~components/Tooltip'
 import { PaymentPreview } from '~templates/Field/PaymentPreview/PaymentPreview'
 
 import { useAdminForm } from '~features/admin-form/common/queries'
+import { useDesignColorTheme } from '~features/admin-form/create/builder-and-design/utils/useDesignColorTheme'
 
 import {
   CreatePageSidebarContextProps,
@@ -59,6 +60,7 @@ export const PaymentView = () => {
   })
 
   const paymentRef = useRef<HTMLDivElement | null>(null)
+  const colourTheme = useDesignColorTheme()
 
   useEffect(() => {
     if (paymentState === PaymentState.EditingPayment) {
@@ -113,7 +115,7 @@ export const PaymentView = () => {
           >
             <Box p={{ base: '0.75rem', md: '1.5rem' }}>
               <PaymentPreview
-                colorTheme={form?.startPage.colorTheme}
+                colorTheme={colourTheme}
                 paymentDetails={paymentDetailsWithPlaceholderPreview}
                 isBuilder
               />
diff --git a/frontend/src/templates/Field/PaymentPreview/PaymentPreview.tsx b/frontend/src/templates/Field/PaymentPreview/PaymentPreview.tsx
index 6edb43b249..cc21c96352 100644
--- a/frontend/src/templates/Field/PaymentPreview/PaymentPreview.tsx
+++ b/frontend/src/templates/Field/PaymentPreview/PaymentPreview.tsx
@@ -67,11 +67,17 @@ export const PaymentPreview = ({
         )}
       </Box>
       {isBuilder ? (
-        <VerifiableFieldBuilderContainer schema={emailFieldSchema}>
+        <VerifiableFieldBuilderContainer
+          schema={emailFieldSchema}
+          colorTheme={colorTheme}
+        >
           <EmailFieldInput schema={emailFieldSchema} />
         </VerifiableFieldBuilderContainer>
       ) : (
-        <VerifiableEmailField schema={emailFieldSchema} />
+        <VerifiableEmailField
+          schema={emailFieldSchema}
+          colorTheme={colorTheme}
+        />
       )}
     </>
   )

From 096c5e82c8aa665622d3a0e1ddc82e33d9a5ee37 Mon Sep 17 00:00:00 2001
From: foochifa <foochifa@gmail.com>
Date: Mon, 7 Aug 2023 11:32:32 +0800
Subject: [PATCH 13/13] chore: bump version to v6.69.0

---
 CHANGELOG.md               | 125 +++++++++++++++++++++++++------------
 frontend/package-lock.json |   4 +-
 frontend/package.json      |   2 +-
 package-lock.json          |   4 +-
 package.json               |   2 +-
 5 files changed, 92 insertions(+), 45 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 686e718090..12bd6efb60 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,8 +4,27 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [v6.69.0](https://github.com/opengovsg/FormSG/compare/v6.68.0...v6.69.0)
+
+- fix: updated payment view to follow colour theme [`#6598`](https://github.com/opengovsg/FormSG/pull/6598)
+- feat: toggle issue notification [`#6590`](https://github.com/opengovsg/FormSG/pull/6590)
+- feat: BE endpoint to allow storage submissions before encryption [`#6587`](https://github.com/opengovsg/FormSG/pull/6587)
+- chore(deps-dev): bump eslint-config-prettier from 8.9.0 to 8.10.0 in /shared [`#6593`](https://github.com/opengovsg/FormSG/pull/6593)
+- chore: remove unused toastr dependency for snyk [`#6589`](https://github.com/opengovsg/FormSG/pull/6589)
+- feat: add Country/Region field [`#5132`](https://github.com/opengovsg/FormSG/pull/5132)
+- feat: payments UI/UX clean up [`#6581`](https://github.com/opengovsg/FormSG/pull/6581)
+- feat: remove divider in payments input panel [`#6586`](https://github.com/opengovsg/FormSG/pull/6586)
+- fix(deps): bump type-fest from 3.13.0 to 4.1.0 in /shared [`#6579`](https://github.com/opengovsg/FormSG/pull/6579)
+- fix(deps): bump libphonenumber-js from 1.10.37 to 1.10.38 in /shared [`#6580`](https://github.com/opengovsg/FormSG/pull/6580)
+- ref: remove download receipt URL [`#6577`](https://github.com/opengovsg/FormSG/pull/6577)
+- chore(deps-dev): bump eslint-config-prettier from 8.8.0 to 8.9.0 in /shared [`#6576`](https://github.com/opengovsg/FormSG/pull/6576)
+- build: merge v6.68.0 into develop [`#6572`](https://github.com/opengovsg/FormSG/pull/6572)
+- build: release v6.68.0 [`#6571`](https://github.com/opengovsg/FormSG/pull/6571)
+
 #### [v6.68.0](https://github.com/opengovsg/FormSG/compare/v6.67.1...v6.68.0)
 
+> 27 July 2023
+
 - chore(deps-dev): bump @types/lodash from 4.14.195 to 4.14.196 in /shared [`#6570`](https://github.com/opengovsg/FormSG/pull/6570)
 - feat: rm bot protection for GSIB users [`#6568`](https://github.com/opengovsg/FormSG/pull/6568)
 - chore: lint and update commands in README [`#6567`](https://github.com/opengovsg/FormSG/pull/6567)
@@ -17,6 +36,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - build: merge v6.67.1 into develop [`#6559`](https://github.com/opengovsg/FormSG/pull/6559)
 - build: release v6.67.1 [`#6557`](https://github.com/opengovsg/FormSG/pull/6557)
 - fix: github warning about unused import [`#6558`](https://github.com/opengovsg/FormSG/pull/6558)
+- chore: bump version to v6.68.0 [`c69b1ce`](https://github.com/opengovsg/FormSG/commit/c69b1ce2a1313e0e49d1b94636af2815dc26e2c3)
 
 #### [v6.67.1](https://github.com/opengovsg/FormSG/compare/v6.67.0...v6.67.1)
 
@@ -26,7 +46,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - build: release v6.67.0 [`#6555`](https://github.com/opengovsg/FormSG/pull/6555)
 - chore: bump version to 6.67.1 [`b641094`](https://github.com/opengovsg/FormSG/commit/b641094d40a67a888e3a8ac967a43f9d1732bd49)
 
-#### [v6.67.0](https://github.com/opengovsg/FormSG/compare/v6.66.0...v6.67.0)
+#### [v6.67.0](https://github.com/opengovsg/FormSG/compare/v6.66.1...v6.67.0)
 
 > 20 July 2023
 
@@ -36,16 +56,23 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - build: release v6.66.0 [`#6550`](https://github.com/opengovsg/FormSG/pull/6550)
 - feat: MyInfo Children compound fields beta [`#6523`](https://github.com/opengovsg/FormSG/pull/6523)
 - ci: adjust timeouts for playwright pipe [`#6551`](https://github.com/opengovsg/FormSG/pull/6551)
+- fix: use proof-of-payment for payment receipt/invoice [`#6549`](https://github.com/opengovsg/FormSG/pull/6549)
+- build(deps-dev): bump word-wrap from 1.2.3 to 1.2.4 in /frontend [`#6548`](https://github.com/opengovsg/FormSG/pull/6548)
+- fix(deps): bump word-wrap from 1.2.3 to 1.2.4 [`#6547`](https://github.com/opengovsg/FormSG/pull/6547)
+- build(deps): bump winston-cloudwatch to v6.2.0 [`#6545`](https://github.com/opengovsg/FormSG/pull/6545)
+- chore: bump version to v6.66.0 [`0233ba8`](https://github.com/opengovsg/FormSG/commit/0233ba8018532d4978d13717fac065f81e2eb515)
 - chore: bump version to v6.67.0 [`6ca03c6`](https://github.com/opengovsg/FormSG/commit/6ca03c68cb162a4ae3af01f172425b3305742ae0)
 
+#### [v6.66.1](https://github.com/opengovsg/FormSG/compare/v6.66.0...v6.66.1)
+
+> 18 July 2023
+
+- revert: build(deps): bump winston-cloudwatch version to 6.2.0 [`#6542`](https://github.com/opengovsg/FormSG/pull/6542)
+
 #### [v6.66.0](https://github.com/opengovsg/FormSG/compare/v6.65.0...v6.66.0)
 
-> 19 July 2023
+> 18 July 2023
 
-- fix: use proof-of-payment for payment receipt/invoice [`#6549`](https://github.com/opengovsg/FormSG/pull/6549)
-- build(deps-dev): bump word-wrap from 1.2.3 to 1.2.4 in /frontend [`#6548`](https://github.com/opengovsg/FormSG/pull/6548)
-- fix(deps): bump word-wrap from 1.2.3 to 1.2.4 [`#6547`](https://github.com/opengovsg/FormSG/pull/6547)
-- build(deps): bump winston-cloudwatch to v6.2.0 [`#6545`](https://github.com/opengovsg/FormSG/pull/6545)
 - fix(deps): [Snyk] Security upgrade mongoose from 5.13.15 to 5.13.20 [`#6541`](https://github.com/opengovsg/FormSG/pull/6541)
 - feat: indicate if GST has been applied to a payment transaction [`#6538`](https://github.com/opengovsg/FormSG/pull/6538)
 - chore: reduce max payment limit [`#6543`](https://github.com/opengovsg/FormSG/pull/6543)
@@ -57,7 +84,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - build: merge v6.65.0 into develop [`#6531`](https://github.com/opengovsg/FormSG/pull/6531)
 - build: release v6.65.0 [`#6528`](https://github.com/opengovsg/FormSG/pull/6528)
 - fix: add FE validation rule that email domains must be non empty [`#6529`](https://github.com/opengovsg/FormSG/pull/6529)
-- chore: bump version to v6.66.0 [`0233ba8`](https://github.com/opengovsg/FormSG/commit/0233ba8018532d4978d13717fac065f81e2eb515)
+- chore: bump version to v6.66.0 [`b3a9818`](https://github.com/opengovsg/FormSG/commit/b3a9818762e334bc7126c029cdba63156bac85ed)
 
 #### [v6.65.0](https://github.com/opengovsg/FormSG/compare/v6.64.0...v6.65.0)
 
@@ -109,13 +136,14 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - chore(deps-dev): bump @typescript-eslint/eslint-plugin from 5.60.0 to 5.60.1 in /shared [`#6487`](https://github.com/opengovsg/FormSG/pull/6487)
 - chore(deps-dev): bump @typescript-eslint/parser from 5.60.0 to 5.60.1 in /shared [`#6488`](https://github.com/opengovsg/FormSG/pull/6488)
 - build: release v6.62.0 [`#6484`](https://github.com/opengovsg/FormSG/pull/6484)
+- fix: admin feedback capturing wrong local storage value [`#6485`](https://github.com/opengovsg/FormSG/pull/6485)
+- chore: bump version to v6.62.0 [`b5ab2e0`](https://github.com/opengovsg/FormSG/commit/b5ab2e0d1615a5e9b0ed1829adcaf040ef700adc)
 - chore: bump version to v6.63.0 [`b474dc7`](https://github.com/opengovsg/FormSG/commit/b474dc76f426ddbb101ba73c50f16e507b51a437)
 
 #### [v6.62.0](https://github.com/opengovsg/FormSG/compare/v6.61.1...v6.62.0)
 
 > 26 June 2023
 
-- fix: admin feedback capturing wrong local storage value [`#6485`](https://github.com/opengovsg/FormSG/pull/6485)
 - fix: escape form title in payment invoice's html content [`#6482`](https://github.com/opengovsg/FormSG/pull/6482)
 - feat: admin feedback modal [`#6465`](https://github.com/opengovsg/FormSG/pull/6465)
 - fix: potential html script injection [`#6481`](https://github.com/opengovsg/FormSG/pull/6481)
@@ -124,7 +152,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - chore: update issue feedback mail html [`#6478`](https://github.com/opengovsg/FormSG/pull/6478)
 - build: merge v6.61.0 into develop [`#6477`](https://github.com/opengovsg/FormSG/pull/6477)
 - fix: account for undefined response code when tracking webhook dd stats [`#6475`](https://github.com/opengovsg/FormSG/pull/6475)
-- chore: bump version to v6.62.0 [`b5ab2e0`](https://github.com/opengovsg/FormSG/commit/b5ab2e0d1615a5e9b0ed1829adcaf040ef700adc)
+- chore: bump version to v6.62.0 [`bafd12a`](https://github.com/opengovsg/FormSG/commit/bafd12a2bc228b606a24c0b65cd284a25d5f7521)
 
 #### [v6.61.1](https://github.com/opengovsg/FormSG/compare/v6.61.0...v6.61.1)
 
@@ -410,22 +438,23 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - fix: only return previous payment id [`#6210`](https://github.com/opengovsg/FormSG/pull/6210)
 - build: merge release v6.45.0 to develop [`#6205`](https://github.com/opengovsg/FormSG/pull/6205)
 - build: release v6.45.0 [`#6200`](https://github.com/opengovsg/FormSG/pull/6200)
+- chore: update payment guide in payment unsupported msg [`#6199`](https://github.com/opengovsg/FormSG/pull/6199)
+- fix(deps): bump type-fest from 3.8.0 to 3.9.0 in /shared [`#6195`](https://github.com/opengovsg/FormSG/pull/6195)
+- chore: bump version to v6.45.0 [`336f4c8`](https://github.com/opengovsg/FormSG/commit/336f4c8ad072d3b582a646e21010eac4b5119ee7)
 - chore: bump version to v6.46.0 [`87fda0e`](https://github.com/opengovsg/FormSG/commit/87fda0e0ec4c937350ebd013a4a9762f4acee802)
+- docs: fix CHANGELOG.md to have only 1 section for v6.45.0 [`4fe9d00`](https://github.com/opengovsg/FormSG/commit/4fe9d00234bed21f0943e26cc9d7c2db96afcdd3)
 
 #### [v6.45.0](https://github.com/opengovsg/FormSG/compare/v6.44.1...v6.45.0)
 
 > 26 April 2023
 
-- chore: update payment guide in payment unsupported msg [`#6199`](https://github.com/opengovsg/FormSG/pull/6199)
-- fix(deps): bump type-fest from 3.8.0 to 3.9.0 in /shared [`#6195`](https://github.com/opengovsg/FormSG/pull/6195)
 - chore: update previous payment typing and hooks [`#6191`](https://github.com/opengovsg/FormSG/pull/6191)
 - chore: add missed out changelog for 6.44.1 [`#6197`](https://github.com/opengovsg/FormSG/pull/6197)
 - build: merge release v6.44.1 to develop [`#6196`](https://github.com/opengovsg/FormSG/pull/6196)
 - build: release v6.44.1 [`#6193`](https://github.com/opengovsg/FormSG/pull/6193)
 - perf: memoize field row containers [`#6189`](https://github.com/opengovsg/FormSG/pull/6189)
 - build: merge release v6.44.0 to develop [`#6187`](https://github.com/opengovsg/FormSG/pull/6187)
-- chore: bump version to v6.45.0 [`336f4c8`](https://github.com/opengovsg/FormSG/commit/336f4c8ad072d3b582a646e21010eac4b5119ee7)
-- docs: fix CHANGELOG.md to have only 1 section for v6.45.0 [`4fe9d00`](https://github.com/opengovsg/FormSG/commit/4fe9d00234bed21f0943e26cc9d7c2db96afcdd3)
+- chore: bump version to v6.45.0 [`df24b16`](https://github.com/opengovsg/FormSG/commit/df24b16f04ba595a53062a309deaf90225b3a2ad)
 
 #### [v6.44.1](https://github.com/opengovsg/FormSG/compare/v6.44.0...v6.44.1)
 
@@ -531,7 +560,9 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - fix(deps): bump type-fest from 3.7.2 to 3.8.0 in /shared [`#6064`](https://github.com/opengovsg/FormSG/pull/6064)
 - build: merge release v6.40.0 into develop [`#6072`](https://github.com/opengovsg/FormSG/pull/6072)
 - build: release v6.40.0 [`#6071`](https://github.com/opengovsg/FormSG/pull/6071)
+- build: release v6.39.0 [`#6068`](https://github.com/opengovsg/FormSG/pull/6068)
 - chore: bump version to v6.41.0 [`5055b51`](https://github.com/opengovsg/FormSG/commit/5055b51c5505aab5e8f2a00907e2ee2a9f793e88)
+- chore: bump version to v6.39.0 [`081515a`](https://github.com/opengovsg/FormSG/commit/081515a2521c950dac7261f4b6c1b1b423c3af16)
 
 #### [v6.40.0](https://github.com/opengovsg/FormSG/compare/v6.39.0...v6.40.0)
 
@@ -539,7 +570,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 - build: merge release v6.39.0 into develop [`#6070`](https://github.com/opengovsg/FormSG/pull/6070)
 - fix(AttachmentField): correctly clear attachment on upload error [`#6069`](https://github.com/opengovsg/FormSG/pull/6069)
-- build: release v6.39.0 [`#6068`](https://github.com/opengovsg/FormSG/pull/6068)
 - chore: bump version to v6.40.0 [`d4441e2`](https://github.com/opengovsg/FormSG/commit/d4441e276a30b373d64dcc7838f1798049ccf105)
 
 #### [v6.39.0](https://github.com/opengovsg/FormSG/compare/v6.38.0...v6.39.0)
@@ -557,13 +587,13 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - fix: add staging-alt2 to deployment script [`#6019`](https://github.com/opengovsg/FormSG/pull/6019)
 - build: merge release 6.38.0 to develop [`#6017`](https://github.com/opengovsg/FormSG/pull/6017)
 - build: release v6.38.0 [`#6004`](https://github.com/opengovsg/FormSG/pull/6004)
+- feat: more logging on fetch fallback [`#6008`](https://github.com/opengovsg/FormSG/pull/6008)
 - chore: bump version to v6.39.0 [`081515a`](https://github.com/opengovsg/FormSG/commit/081515a2521c950dac7261f4b6c1b1b423c3af16)
 
 #### [v6.38.0](https://github.com/opengovsg/FormSG/compare/v6.37.0...v6.38.0)
 
-> 30 March 2023
+> 29 March 2023
 
-- feat: more logging on fetch fallback [`#6008`](https://github.com/opengovsg/FormSG/pull/6008)
 - feat: implement fetch API fallback for network error [`#5948`](https://github.com/opengovsg/FormSG/pull/5948)
 - fix: lowercase collaborator endpoint emails [`#5992`](https://github.com/opengovsg/FormSG/pull/5992)
 - chore(deps-dev): bump @typescript-eslint/parser from 5.56.0 to 5.57.0 in /shared [`#5995`](https://github.com/opengovsg/FormSG/pull/5995)
@@ -572,6 +602,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - fix(deps): bump type-fest from 3.7.0 to 3.7.1 in /shared [`#5991`](https://github.com/opengovsg/FormSG/pull/5991)
 - build: merge v6.37.0 into develop  [`#5989`](https://github.com/opengovsg/FormSG/pull/5989)
 - build: release v6.37.0 [`#5988`](https://github.com/opengovsg/FormSG/pull/5988)
+- chore: bump version to v6.38.0 [`d199213`](https://github.com/opengovsg/FormSG/commit/d19921314cae6b79920cf5ec3fb4f396794816d6)
 
 #### [v6.37.0](https://github.com/opengovsg/FormSG/compare/v6.36.0...v6.37.0)
 
@@ -606,6 +637,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - build: release v6.36.0 [`#5913`](https://github.com/opengovsg/FormSG/pull/5913)
 - chore: bump version to v6.37.0 [`b4d24eb`](https://github.com/opengovsg/FormSG/commit/b4d24eb14f8a80bff56d19e6fa23975d5661cce9)
 - chore: bump version to 6.36.1 [`faf75b5`](https://github.com/opengovsg/FormSG/commit/faf75b5a7d0d12745e9a0104c541fb66cca17258)
+- chore: bump version to v6.36.0 [`d8d2b59`](https://github.com/opengovsg/FormSG/commit/d8d2b59db62d195916a8fcc3d84659dd20687de4)
 
 #### [v6.36.0](https://github.com/opengovsg/FormSG/compare/v6.35.0...v6.36.0)
 
@@ -621,7 +653,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - chore(deps-dev): bump eslint-config-prettier from 8.6.0 to 8.7.0 in /shared [`#5895`](https://github.com/opengovsg/FormSG/pull/5895)
 - chore(deps-dev): bump eslint-plugin-simple-import-sort from 8.0.0 to 10.0.0 [`#5771`](https://github.com/opengovsg/FormSG/pull/5771)
 - chore(deps-dev): bump @typescript-eslint/parser from 5.54.0 to 5.54.1 in /shared [`#5892`](https://github.com/opengovsg/FormSG/pull/5892)
-- chore: bump version to v6.36.0 [`d8d2b59`](https://github.com/opengovsg/FormSG/commit/d8d2b59db62d195916a8fcc3d84659dd20687de4)
+- chore: bump version to v6.36.0 [`a51adf1`](https://github.com/opengovsg/FormSG/commit/a51adf1a129ff473e62f38b6836e5282afc5b83f)
 
 #### [v6.35.0](https://github.com/opengovsg/FormSG/compare/v6.34.0...v6.35.0)
 
@@ -646,13 +678,14 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - chore: revert "feat: merge payment-mvp branch into develop" [`#5858`](https://github.com/opengovsg/FormSG/pull/5858)
 - build: merge release v6.33.0 into develop  [`#5859`](https://github.com/opengovsg/FormSG/pull/5859)
 - build: release v6.33.0 [`#5853`](https://github.com/opengovsg/FormSG/pull/5853)
+- feat: merge payment-mvp branch into develop [`#5851`](https://github.com/opengovsg/FormSG/pull/5851)
+- chore: bump version to v6.33.0 [`6508dc0`](https://github.com/opengovsg/FormSG/commit/6508dc09bb519392afbc426c6b68257c4e83515d)
 - chore: bump version to v6.34.0 [`4624819`](https://github.com/opengovsg/FormSG/commit/46248191e9b5f69e7400ee9b03dd1decdae43e96)
 
 #### [v6.33.0](https://github.com/opengovsg/FormSG/compare/v6.32.0...v6.33.0)
 
 > 28 February 2023
 
-- feat: merge payment-mvp branch into develop [`#5851`](https://github.com/opengovsg/FormSG/pull/5851)
 - chore(deps-dev): bump @typescript-eslint/eslint-plugin from 5.52.0 to 5.54.0 in /shared [`#5847`](https://github.com/opengovsg/FormSG/pull/5847)
 - chore(deps-dev): bump @typescript-eslint/parser from 5.53.0 to 5.54.0 in /shared [`#5846`](https://github.com/opengovsg/FormSG/pull/5846)
 - fix(deps): bump libphonenumber-js from 1.10.20 to 1.10.21 in /shared [`#5841`](https://github.com/opengovsg/FormSG/pull/5841)
@@ -661,7 +694,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - build: merge release v6.32.0 into develop  [`#5833`](https://github.com/opengovsg/FormSG/pull/5833)
 - [Snyk] Security upgrade @aws-sdk/client-cloudwatch-logs from 3.241.0 to 3.276.0 [`#5835`](https://github.com/opengovsg/FormSG/pull/5835)
 - build: release v6.32.0 [`#5832`](https://github.com/opengovsg/FormSG/pull/5832)
-- chore: bump version to v6.33.0 [`6508dc0`](https://github.com/opengovsg/FormSG/commit/6508dc09bb519392afbc426c6b68257c4e83515d)
+- chore: bump version to v6.33.0 [`2e09f10`](https://github.com/opengovsg/FormSG/commit/2e09f1081a6c9f605f3e9ed179330b9b1b162d5e)
 
 #### [v6.32.0](https://github.com/opengovsg/FormSG/compare/v6.31.0...v6.32.0)
 
@@ -785,13 +818,14 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - fix(deps): bump libphonenumber-js from 1.10.15 to 1.10.17 in /shared [`#5690`](https://github.com/opengovsg/FormSG/pull/5690)
 - fix(deps): bump type-fest from 3.5.0 to 3.5.1 in /shared [`#5687`](https://github.com/opengovsg/FormSG/pull/5687)
 - build: release v6.27.0 [`#5684`](https://github.com/opengovsg/FormSG/pull/5684)
+- fix: add submission time to end page, returned from server [`#5672`](https://github.com/opengovsg/FormSG/pull/5672)
+- chore: bump version to v6.27.0 [`86b31d4`](https://github.com/opengovsg/FormSG/commit/86b31d4bd6959171842112bd7d8227841cbcda66)
 - chore: bump version to v6.28.0 [`f982046`](https://github.com/opengovsg/FormSG/commit/f982046d76bfb3b2d8ceec36daaf23dde3ac165b)
 
 #### [v6.27.0](https://github.com/opengovsg/FormSG/compare/v6.26.0...v6.27.0)
 
 > 4 January 2023
 
-- fix: add submission time to end page, returned from server [`#5672`](https://github.com/opengovsg/FormSG/pull/5672)
 - chore: log formAuthType when redirecting user to sp/cp/myinfo/sgid [`#5682`](https://github.com/opengovsg/FormSG/pull/5682)
 - chore(deps-dev): bump @typescript-eslint/parser from 5.47.1 to 5.48.0 in /shared [`#5680`](https://github.com/opengovsg/FormSG/pull/5680)
 - chore(deps-dev): bump @typescript-eslint/eslint-plugin from 5.47.1 to 5.48.0 in /shared [`#5679`](https://github.com/opengovsg/FormSG/pull/5679)
@@ -803,7 +837,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - build: backport v6.26.0 into develop [`#5669`](https://github.com/opengovsg/FormSG/pull/5669)
 - fix(deps): bump zod from 3.19.1 to 3.20.2 [`#5668`](https://github.com/opengovsg/FormSG/pull/5668)
 - build: release v6.26.0 [`#5666`](https://github.com/opengovsg/FormSG/pull/5666)
-- chore: bump version to v6.27.0 [`86b31d4`](https://github.com/opengovsg/FormSG/commit/86b31d4bd6959171842112bd7d8227841cbcda66)
+- chore: bump version to v6.27.0 [`3e2a28b`](https://github.com/opengovsg/FormSG/commit/3e2a28b6394b78e02eca138cfe781337cdee10b1)
 
 #### [v6.26.0](https://github.com/opengovsg/FormSG/compare/v6.25.0...v6.26.0)
 
@@ -837,6 +871,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - build: merge release v6.25.0 into develop [`#5632`](https://github.com/opengovsg/FormSG/pull/5632)
 - build: release v6.25.0 [`#5630`](https://github.com/opengovsg/FormSG/pull/5630)
 - chore: bump version to v6.26.0 [`8a0b8e2`](https://github.com/opengovsg/FormSG/commit/8a0b8e2df75af8d9f59df5feee03f50211c4339d)
+- chore: bump version to v6.25.0 [`8da99f6`](https://github.com/opengovsg/FormSG/commit/8da99f68dbb1ccbebda72ad95729aaf97e93a321)
 
 #### [v6.25.0](https://github.com/opengovsg/FormSG/compare/v6.24.1...v6.25.0)
 
@@ -851,20 +886,13 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - build: merge release 6.24.1 into develop [`#5622`](https://github.com/opengovsg/FormSG/pull/5622)
 - build: Release v6.24.1 hotfix [`#5621`](https://github.com/opengovsg/FormSG/pull/5621)
 - build: merge release 6.24.0 into develop [`#5619`](https://github.com/opengovsg/FormSG/pull/5619)
-- chore: bump version to v6.25.0 [`8da99f6`](https://github.com/opengovsg/FormSG/commit/8da99f68dbb1ccbebda72ad95729aaf97e93a321)
+- chore: bump version to v6.25.0 [`6080687`](https://github.com/opengovsg/FormSG/commit/6080687d7d8ee7ce343ac6602ae2853ffde20e62)
 
 #### [v6.24.1](https://github.com/opengovsg/FormSG/compare/v6.24.0...v6.24.1)
 
 > 23 December 2022
 
 - build: release v6.24.0 [`#5615`](https://github.com/opengovsg/FormSG/pull/5615)
-- Revert "fix(deps): bump sqs-producer from 2.1.0 to 3.1.0 (#5590)" [`df3e488`](https://github.com/opengovsg/FormSG/commit/df3e488591c29d63c7c4853fe77b10ffb6f724b7)
-- chore: bump version to v6.24.1 [`e2fd68c`](https://github.com/opengovsg/FormSG/commit/e2fd68cd0ca6ae62318ea33ffd03afdbe1594bd1)
-
-#### [v6.24.0](https://github.com/opengovsg/FormSG/compare/v6.23.3...v6.24.0)
-
-> 23 December 2022
-
 - feat: initialise datadog in head [`#5571`](https://github.com/opengovsg/FormSG/pull/5571)
 - build: merge 6.23.3 into develop [`#5614`](https://github.com/opengovsg/FormSG/pull/5614)
 - ci: separate e2e and backend ci flows [`#5483`](https://github.com/opengovsg/FormSG/pull/5483)
@@ -874,11 +902,15 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - fix(deps): bump @sentry/browser from 7.21.1 to 7.28.0 [`#5607`](https://github.com/opengovsg/FormSG/pull/5607)
 - build: merge release 6.23.2 back to develop [`#5606`](https://github.com/opengovsg/FormSG/pull/5606)
 - chore(deps-dev): bump regenerator from 0.14.9 to 0.14.10 [`#5608`](https://github.com/opengovsg/FormSG/pull/5608)
+- build: Release v6.23.2 hotfix [`#5602`](https://github.com/opengovsg/FormSG/pull/5602)
 - test: fix race condition in field schema test [`#5604`](https://github.com/opengovsg/FormSG/pull/5604)
 - fix: avoid using merge to set query after reordering fields [`#5605`](https://github.com/opengovsg/FormSG/pull/5605)
 - chore(deps-dev): bump @typescript-eslint/eslint-plugin from 5.46.1 to 5.47.0 in /shared [`#5592`](https://github.com/opengovsg/FormSG/pull/5592)
 - fix(deps): bump sqs-producer from 2.1.0 to 3.1.0 [`#5590`](https://github.com/opengovsg/FormSG/pull/5590)
 - feat: push static assets to s3 [`#5595`](https://github.com/opengovsg/FormSG/pull/5595)
+- fix: return 404 for unmatched static assets [`#5579`](https://github.com/opengovsg/FormSG/pull/5579)
+- test: fix selectors for tests [`#5597`](https://github.com/opengovsg/FormSG/pull/5597)
+- feat: push static assets to s3 [`#5595`](https://github.com/opengovsg/FormSG/pull/5595)
 - fix(deps): bump @aws-sdk/client-cloudwatch-logs from 3.218.0 to 3.234.0 [`#5599`](https://github.com/opengovsg/FormSG/pull/5599)
 - fix: return 404 for unmatched static assets [`#5579`](https://github.com/opengovsg/FormSG/pull/5579)
 - chore: merge v6.23.1 to develop [`#5594`](https://github.com/opengovsg/FormSG/pull/5594)
@@ -889,14 +921,23 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - fix(deps): bump libphonenumber-js from 1.10.14 to 1.10.15 [`#5553`](https://github.com/opengovsg/FormSG/pull/5553)
 - fix(deps): bump moment-timezone from 0.5.39 to 0.5.40 [`#5586`](https://github.com/opengovsg/FormSG/pull/5586)
 - chore(deps-dev): bump @playwright/test from 1.27.1 to 1.29.0 [`#5585`](https://github.com/opengovsg/FormSG/pull/5585)
+- * fix: trim email input in frontend and backend [`#5581`](https://github.com/opengovsg/FormSG/pull/5581)
+- fix(deps): bump formsg-javascript-sdk from 0.9.0 to 0.10.0 [`#5578`](https://github.com/opengovsg/FormSG/pull/5578)
 - fix(deps): bump zod from 3.19.1 to 3.20.2 in /shared [`#5562`](https://github.com/opengovsg/FormSG/pull/5562)
 - fix(deps): bump type-fest from 3.3.0 to 3.4.0 in /shared [`#5563`](https://github.com/opengovsg/FormSG/pull/5563)
 - fix(deps): bump formsg-javascript-sdk from 0.9.0 to 0.10.0 [`#5578`](https://github.com/opengovsg/FormSG/pull/5578)
 - fix: remove unecessary import [`#5576`](https://github.com/opengovsg/FormSG/pull/5576)
+- Revert "fix(deps): bump sqs-producer from 2.1.0 to 3.1.0 (#5590)" [`df3e488`](https://github.com/opengovsg/FormSG/commit/df3e488591c29d63c7c4853fe77b10ffb6f724b7)
+- chore: bump version to 6.23.2 [`1256707`](https://github.com/opengovsg/FormSG/commit/1256707db95a30486c2ccfc731d9ff6cbdb7dc40)
+- chore: bump version to v6.24.0 [`13fa4f6`](https://github.com/opengovsg/FormSG/commit/13fa4f6eb7854ef91e632d8e316d180e57bb759b)
+
+#### [v6.24.0](https://github.com/opengovsg/FormSG/compare/v6.23.3...v6.24.0)
+
+> 16 December 2022
+
 - feat: upgrade axios to 1.2.1 [`#5568`](https://github.com/opengovsg/FormSG/pull/5568)
 - chore: merge v6.23.0 into develop  [`#5574`](https://github.com/opengovsg/FormSG/pull/5574)
-- chore: bump version to v6.24.0 [`13fa4f6`](https://github.com/opengovsg/FormSG/commit/13fa4f6eb7854ef91e632d8e316d180e57bb759b)
-- Revert "fix(deps): bump sqs-consumer from 5.7.0 to 6.1.0 (#5591)" [`088902d`](https://github.com/opengovsg/FormSG/commit/088902d74fe8fde365859342aaacc7b735a777a3)
+- chore: bump version to v6.24.0 [`ef21f76`](https://github.com/opengovsg/FormSG/commit/ef21f76703d53d73e61d36e913167be37e48cdf3)
 
 #### [v6.23.3](https://github.com/opengovsg/FormSG/compare/v6.23.2...v6.23.3)
 
@@ -987,13 +1028,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - chore: decommission SAML support for Singpass / Corppass [`#5469`](https://github.com/opengovsg/FormSG/pull/5469)
 - chore: update chromatic GA to only run in PRs [`#5488`](https://github.com/opengovsg/FormSG/pull/5488)
 - build: release v6.19.0 [`#5481`](https://github.com/opengovsg/FormSG/pull/5481)
-- chore: bump version to v6.20.0 [`54131bd`](https://github.com/opengovsg/FormSG/commit/54131bd9c354fbb9aa478ca871817c34b1544aaa)
-- Merge pull request #5490 from opengovsg/release-al2 [`bf0984e`](https://github.com/opengovsg/FormSG/commit/bf0984e8ae74382fd455c0821b16976793990932)
-
-#### [v6.19.0](https://github.com/opengovsg/FormSG/compare/v6.18.5...v6.19.0)
-
-> 29 November 2022
-
 - feat: add public form `/use-template` redirection to admin form template page [`#5486`](https://github.com/opengovsg/FormSG/pull/5486)
 - fix: remove form title special characters validation [`#5485`](https://github.com/opengovsg/FormSG/pull/5485)
 - chore: merge hotfix release v6.18.5 to develop [`#5480`](https://github.com/opengovsg/FormSG/pull/5480)
@@ -1008,15 +1042,28 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - fix: extend MyInfo login expiry to match env var [`#5464`](https://github.com/opengovsg/FormSG/pull/5464)
 - chore: merge hotfix release v6.18.4 back to develop  [`#5472`](https://github.com/opengovsg/FormSG/pull/5472)
 - feat: improve admin storage mode response printability [`#5460`](https://github.com/opengovsg/FormSG/pull/5460)
+- fix: update field validators with more specific type guarantees [`#5468`](https://github.com/opengovsg/FormSG/pull/5468)
+- build: hotfix release v6.18.4 [`#5470`](https://github.com/opengovsg/FormSG/pull/5470)
+- fix: correctly perform logic validation on MyInfo prefilled fields [`#5467`](https://github.com/opengovsg/FormSG/pull/5467)
+- fix: trim dropdown option answer in backend and in angularjs frontend [`#5466`](https://github.com/opengovsg/FormSG/pull/5466)
 - chore(deps-dev): bump @babel/preset-env from 7.19.4 to 7.20.2 [`#5463`](https://github.com/opengovsg/FormSG/pull/5463)
 - test: add email submission e2e tests [`#5162`](https://github.com/opengovsg/FormSG/pull/5162)
 - feat: allow special chars in form title [`#5436`](https://github.com/opengovsg/FormSG/pull/5436)
+- fix: release v6.18.3 [`#5459`](https://github.com/opengovsg/FormSG/pull/5459)
 - chore(deps-dev): bump husky from 8.0.1 to 8.0.2 [`#5457`](https://github.com/opengovsg/FormSG/pull/5457)
 - fix(docker-compose): change ports from 5000 to 5001 [`#5455`](https://github.com/opengovsg/FormSG/pull/5455)
 - chore(deps-dev): bump @types/lodash from 4.14.189 to 4.14.190 in /shared [`#5454`](https://github.com/opengovsg/FormSG/pull/5454)
 - chore(deps-dev): bump @typescript-eslint/eslint-plugin from 5.43.0 to 5.44.0 [`#5453`](https://github.com/opengovsg/FormSG/pull/5453)
 - fix: update max dimension for image uploads [`#5451`](https://github.com/opengovsg/FormSG/pull/5451)
 - fix(deps): bump @sentry/browser from 7.17.3 to 7.20.1 [`#5449`](https://github.com/opengovsg/FormSG/pull/5449)
+- chore: bump version to v6.20.0 [`54131bd`](https://github.com/opengovsg/FormSG/commit/54131bd9c354fbb9aa478ca871817c34b1544aaa)
+- Merge pull request #5490 from opengovsg/release-al2 [`bf0984e`](https://github.com/opengovsg/FormSG/commit/bf0984e8ae74382fd455c0821b16976793990932)
+- fix(deps): bump @aws-sdk/client-cloudwatch-logs to 3.216.0 [`ac812ec`](https://github.com/opengovsg/FormSG/commit/ac812ecdd14b11f9500e3d95aa75050be40d8e24)
+
+#### [v6.19.0](https://github.com/opengovsg/FormSG/compare/v6.18.5...v6.19.0)
+
+> 22 November 2022
+
 - fix: disable submission in template mode [`#5443`](https://github.com/opengovsg/FormSG/pull/5443)
 - fix(docker-compose): include US and SG SES env vars [`#5442`](https://github.com/opengovsg/FormSG/pull/5442)
 - feat: use-template for forms [`#5377`](https://github.com/opengovsg/FormSG/pull/5377)
@@ -1035,7 +1082,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - fix(deps): bump aws-sdk from 2.1251.0 to 2.1255.0 [`#5415`](https://github.com/opengovsg/FormSG/pull/5415)
 - fix(deps): bump loader-utils from 1.4.0 to 1.4.2 [`#5416`](https://github.com/opengovsg/FormSG/pull/5416)
 - chore(deps-dev): bump eslint-plugin-jest from 27.1.3 to 27.1.5 [`#5414`](https://github.com/opengovsg/FormSG/pull/5414)
-- chore: bump version to v6.19.0 [`f245c66`](https://github.com/opengovsg/FormSG/commit/f245c66f1dbb133429101574889e55b479591061)
+- chore: bump version to v6.19.0 [`04762a2`](https://github.com/opengovsg/FormSG/commit/04762a268542a70f3b9d10e1f8c7f273d32ac9bc)
 - Merge pull request #5435 from opengovsg/release-al2 [`6023bac`](https://github.com/opengovsg/FormSG/commit/6023bac35189418bac8b1bb59cea53661df7fb76)
 
 #### [v6.18.5](https://github.com/opengovsg/FormSG/compare/v6.18.4...v6.18.5)
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 60aec3a455..aa2c03e612 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "form-frontend",
-  "version": "6.68.0",
+  "version": "6.69.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "form-frontend",
-      "version": "6.68.0",
+      "version": "6.69.0",
       "hasInstallScript": true,
       "dependencies": {
         "@chakra-ui/react": "^1.8.6",
diff --git a/frontend/package.json b/frontend/package.json
index f8cbc954ce..612d3f1862 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "form-frontend",
-  "version": "6.68.0",
+  "version": "6.69.0",
   "homepage": ".",
   "private": true,
   "dependencies": {
diff --git a/package-lock.json b/package-lock.json
index f18abedf81..607e8e2055 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "FormSG",
-  "version": "6.68.0",
+  "version": "6.69.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "FormSG",
-      "version": "6.68.0",
+      "version": "6.69.0",
       "hasInstallScript": true,
       "dependencies": {
         "@aws-sdk/client-cloudwatch-logs": "^3.347.1",
diff --git a/package.json b/package.json
index a7bf9f8f01..c2949f88b6 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "FormSG",
   "description": "Form Manager for Government",
-  "version": "6.68.0",
+  "version": "6.69.0",
   "homepage": "https://form.gov.sg",
   "authors": [
     "FormSG <formsg@data.gov.sg>"