feat: add single submission toggle to auth settings page

frontend/src/features/admin-form/settings/SettingsAuthPage.stories.tsx

@@ -150,6 +150,25 @@ PrivateEmailMyInfoFormNricMaskingEnabled.parameters = {
   ],
 }
 
+export const PrivateEmailSingpassFormSingleSubmissionEnabled = Template.bind({})
+PrivateEmailSingpassFormSingleSubmissionEnabled.parameters = {
+  msw: buildMswRoutes({
+    status: FormStatus.Private,
+    authType: FormAuthType.SGID,
+    isSingleSubmission: true,
+  }),
+}
+
+export const PrivateEmailSingpassFormAllTogglesEnabled = Template.bind({})
+PrivateEmailSingpassFormAllTogglesEnabled.parameters = {
+  msw: buildMswRoutes({
+    status: FormStatus.Private,
+    authType: FormAuthType.SGID,
+    isSingleSubmission: true,
+    isNricMaskEnabled: true,
+  }),
+}
+
 export const Loading = Template.bind({})
 Loading.parameters = {
   msw: [getAdminFormSettings({ delay: 'infinite' })],

frontend/src/features/admin-form/settings/SettingsService.ts

@@ -100,6 +100,14 @@ export const updateFormNricMask: UpdateFormFn<'isNricMaskEnabled'> = async (
   })
 }
 
+export const updateIsSingleSubmission: UpdateFormFn<
+  'isSingleSubmission'
+> = async (formId, newIsSingleSubmission) => {
+  return updateFormSettings(formId, {
+    isSingleSubmission: newIsSingleSubmission,
+  })
+}
+
 export const updateFormEsrvcId: UpdateFormFn<'esrvcId'> = async (
   formId,
   newEsrvcId,

frontend/src/features/admin-form/settings/components/AuthSettingsSection/AuthSettingsSingpassSection.tsx

@@ -3,6 +3,7 @@ import { Divider } from '@chakra-ui/react'
 import { FormSettings } from '~shared/types/form'
 
 import { FormNricMaskToggle } from './FormNricMaskToggle'
+import { FormSingleSubmissionToggle } from './FormSingleSubmissionToggle'
 import { SingpassAuthOptionsRadio } from './SingpassAuthOptionsRadio'
 
 export interface AuthSettingsSingpassSectionProps {
@@ -24,6 +25,11 @@ export const AuthSettingsSingpassSection = ({
       />
       <Divider my="2.5rem" />
       <FormNricMaskToggle settings={settings} isDisabled={isFormPublic} />
+      <Divider my="2.5rem" />
+      <FormSingleSubmissionToggle
+        settings={settings}
+        isDisabled={isFormPublic}
+      />
     </>
   )
 }

frontend/src/features/admin-form/settings/components/AuthSettingsSection/FormNricMaskToggle.tsx

@@ -15,7 +15,7 @@ export const FormNricMaskToggle = ({
   settings,
   isDisabled,
 }: FormNricMaskToggleProps): JSX.Element => {
-  const isNricMaskEnabled = settings?.isNricMaskEnabled
+  const isNricMaskEnabled = !!settings?.isNricMaskEnabled
 
   const { mutateNricMask } = useMutateFormSettings()
 

frontend/src/features/admin-form/settings/components/AuthSettingsSection/FormSingleSubmissionToggle.tsx

@@ -0,0 +1,40 @@
+import { useCallback } from 'react'
+
+import { FormSettings } from '~shared/types/form'
+
+import Toggle from '~components/Toggle'
+
+import { useMutateFormSettings } from '../../mutations'
+
+interface FormSingleSubmissionPerNricToggleProps {
+  settings: FormSettings
+  isDisabled: boolean
+}
+
+export const FormSingleSubmissionToggle = ({
+  settings,
+  isDisabled,
+}: FormSingleSubmissionPerNricToggleProps): JSX.Element => {
+  const { mutateIsSingleSubmission } = useMutateFormSettings()
+  const isSingleSubmission = !!settings?.isSingleSubmission
+  const isLoading =
+    !settings?.isSingleSubmission !== undefined ||
+    mutateIsSingleSubmission.isLoading
+
+  const handleToggleIsSingleSubmission = useCallback(() => {
+    if (!settings || mutateIsSingleSubmission.isLoading) return
+    const nextIsSingleSubmission = !settings.isNricMaskEnabled
+    return mutateIsSingleSubmission.mutate(nextIsSingleSubmission)
+  }, [mutateIsSingleSubmission, settings])
+
+  return (
+    <Toggle
+      containerStyles={{ opacity: isDisabled ? 0.3 : 1 }}
+      isDisabled={isDisabled}
+      isLoading={isLoading}
+      isChecked={isSingleSubmission}
+      label="Limit each unique NRIC/FIN to one response"
+      onChange={handleToggleIsSingleSubmission}
+    />
+  )
+}

frontend/src/features/admin-form/settings/mutations.ts

@@ -42,6 +42,7 @@ import {
   updateFormWebhookRetries,
   updateFormWebhookUrl,
   updateGstEnabledFlag,
+  updateIsSingleSubmission,
   updateTwilioCredentials,
 } from './SettingsService'
 
@@ -321,6 +322,27 @@ export const useMutateFormSettings = () => {
     },
   )
 
+  const mutateIsSingleSubmission = useMutation(
+    (nextIsSingleSubmissionPerNricEnabled: boolean) => {
+      console.log('mutating')
+      return updateIsSingleSubmission(
+        formId,
+        nextIsSingleSubmissionPerNricEnabled,
+      )
+    },
+    {
+      onSuccess: (newData) => {
+        handleSuccess({
+          newData,
+          toastDescription: newData.isSingleSubmission
+            ? 'Single submission per NRIC/FIN is now enabled on your form.'
+            : 'Single submission per NRIC/FIN is now disabled on your form.',
+        })
+      },
+      onError: handleError,
+    },
+  )
+
   const mutateFormWebhookUrl = useMutation(
     (nextUrl?: string) => updateFormWebhookUrl(formId, nextUrl),
     {
@@ -391,6 +413,7 @@ export const useMutateFormSettings = () => {
     mutateFormTitle,
     mutateFormAuthType,
     mutateNricMask,
+    mutateIsSingleSubmission,
     mutateFormEsrvcId,
     mutateFormBusiness,
     mutateGST,

shared/constants/form.ts

@@ -31,6 +31,7 @@ const FORM_SETTINGS_FIELDS = <const>[
   'responseMode',
   'authType',
   'isNricMaskEnabled',
+  'isSingleSubmission',
   'esrvcId',
   'hasCaptcha',
   'hasIssueNotification',

shared/types/form/form.ts

@@ -146,6 +146,7 @@ export interface FormBase {
   hasIssueNotification: boolean
   authType: FormAuthType
   isNricMaskEnabled: boolean
+  isSingleSubmission: boolean
 
   status: FormStatus