feat: add feedbackform on create wizard

.template-env

@@ -119,4 +119,7 @@ FORMSG_SDK_MODE=
 # AZURE_OPENAI_API_KEY=
 # AZURE_OPENAI_ENDPOINT=
 # AZURE_OPENAI_DEPLOYMENT_NAME=
-# AZURE_OPENAI_API_VERSION=
+# AZURE_OPENAI_API_VERSION=
+
+## Kill email mode configs, provide a valid storage form id
+# KILL_EMAIL_MODE_FEEDBACK_FORMID=

docker-compose.yml

@@ -131,6 +131,7 @@ services:
       - POSTMAN_BASE_URL=https://test.postman.gov.sg/api/v2
       - DOWNLOAD_FORM_WHITELIST_RATE_LIMIT
       - UPLOAD_FORM_WHITELIST_RATE_LIMIT
+      - KILL_EMAIL_MODE_FEEDBACK_FORMID=67642a79b207c811692cad51
 
   mockpass:
     build: https://github.com/opengovsg/mockpass.git#v4.3.1

frontend/src/features/public-form/PublicFormService.ts

@@ -63,6 +63,20 @@ export const getPublicFormView = async (
     .then(transformAllIsoStringsToDate)
 }
 
+/**
+ * TODO: (Kill Email Mode) Remove this route after kill email mode is fully implemented.
+ * Gets the BE defined feedback form for admins to answer why they are using email mode
+ * @returns Public view of form for admin email feedback form
+ */
+export const getAdminUseEmailModeFeedbackFormView =
+  async (): Promise<PublicFormViewDto> => {
+    return ApiService.get<PublicFormViewDto>(
+      `${PUBLIC_FORMS_ENDPOINT}/admin-use-email-feedback`,
+    )
+      .then(({ data }) => data)
+      .then(transformAllIsoStringsToDate)
+  }
+
 /**
  * Gets the redirect url for public form login
  * @param formId form id of form to log in.

frontend/src/features/public-form/queries.ts

@@ -7,6 +7,7 @@ import { ApiError } from '~typings/core'
 import { MONGODB_ID_REGEX } from '~constants/routes'
 
 import {
+  getAdminUseEmailModeFeedbackFormView,
   getMultirespondentSubmissionById,
   getPublicFormView,
 } from './PublicFormService'
@@ -62,3 +63,19 @@ export const useEncryptedSubmission = (
     },
   )
 }
+
+/**
+ * TODO: (Kill Email Mode) Remove this after kill email mode is fully implemented.
+ * Queries the BE defined feedback form for admins to answer why they are using email mode
+ * @returns
+ */
+export const useAdminUseEmailModeFormView = (): UseQueryResult<
+  PublicFormViewDto,
+  ApiError
+> => {
+  return useQuery<PublicFormViewDto, ApiError>(
+    publicFormKeys.id('useAdminUseEmailModeFormView'),
+    () => getAdminUseEmailModeFeedbackFormView(),
+    {},
+  )
+}

frontend/src/features/workspace/WorkspaceService.ts

@@ -1,4 +1,10 @@
-import { AdminFeedbackDto, AdminFeedbackRating } from '~shared/types'
+import {
+  AdminFeedbackDto,
+  AdminFeedbackRating,
+  AdminUseEmailModeFeedbackDto,
+  BasicField,
+  ErrorDto,
+} from '~shared/types'
 import {
   AdminDashboardFormMetaDto,
   CreateEmailFormBodyDto,
@@ -7,10 +13,15 @@ import {
   DuplicateFormBodyDto,
   FormDto,
   FormId,
+  PublicFormViewDto,
 } from '~shared/types/form/form'
 import { WorkspaceDto } from '~shared/types/workspace'
+import { removeAt } from '~shared/utils/immutable-array-fns'
 
 import { ApiService } from '~services/ApiService'
+import { CHECKBOX_OTHERS_INPUT_VALUE } from '~templates/Field/Checkbox/constants'
+
+import { PUBLIC_FORMS_ENDPOINT } from '~features/public-form/PublicFormService'
 
 export const ADMIN_FORM_ENDPOINT = '/admin/forms'
 const ADMIN_WORKSPACES_ENDPOINT = '/admin/workspaces'
@@ -112,6 +123,71 @@ export const createMultirespondentModeForm = async (
   )
 }
 
+const createFeedbackResponses = (
+  formInputs: AdminUseEmailModeFeedbackDto,
+  feedbackForm: PublicFormViewDto,
+) => {
+  // const feedbackFormFieldsStructure: [string, number][] = [['reason', 0]]
+
+  const { fieldType, title, _id } = feedbackForm.form.form_fields[0]
+
+  const reasonCheckboxAnswerArray = formInputs['reason']
+  let answerArray: string[] = []
+  if (
+    reasonCheckboxAnswerArray !== undefined &&
+    reasonCheckboxAnswerArray.value
+  ) {
+    const othersIndex = reasonCheckboxAnswerArray.value.findIndex(
+      (v) => v === CHECKBOX_OTHERS_INPUT_VALUE,
+    )
+    // Others is checked, so we need to add the input at othersInput to the answer array
+    if (othersIndex !== -1) {
+      answerArray = removeAt(reasonCheckboxAnswerArray.value, othersIndex)
+      answerArray.push(`Others: ${reasonCheckboxAnswerArray.othersInput}`)
+    } else {
+      answerArray = reasonCheckboxAnswerArray.value
+    }
+  }
+
+  const responses = [
+    {
+      _id,
+      question: title,
+      answerArray,
+      fieldType,
+    },
+  ]
+  return responses
+}
+
+const createAdminEmailModeUseFeedback = (
+  formInputs: AdminUseEmailModeFeedbackDto,
+  feedbackForm: PublicFormViewDto,
+) => {
+  const responses = createFeedbackResponses(formInputs, feedbackForm)
+  // convert content to FormData object
+  const formData = new FormData()
+  formData.append('body', JSON.stringify({ responses, version: 2.1 }))
+
+  return formData
+}
+
+// TODO: (Kill Email Mode) Remove this route after kill email mode is fully implemented.
+export const submitUseEmailFormFeedback = async ({
+  body,
+  feedbackForm,
+}: {
+  body: AdminUseEmailModeFeedbackDto
+  feedbackForm: PublicFormViewDto
+}): Promise<boolean | ErrorDto> => {
+  if (!feedbackForm) return new Error('feedback form not provided')
+  const formData = createAdminEmailModeUseFeedback(body, feedbackForm)
+  return ApiService.post<boolean>(
+    `${PUBLIC_FORMS_ENDPOINT}/submissions/storage/email-mode-feedback?captchaResponse=null`,
+    formData,
+  ).then(({ data }) => data)
+}
+
 export const dupeEmailModeForm = async (
   formId: string,
   body: DuplicateFormBodyDto,

frontend/src/features/workspace/components/CreateFormModal/CreateFormModalContent/CreateFormDetailsScreen.tsx

@@ -51,6 +51,7 @@ export const CreateFormDetailsScreen = (): JSX.Element => {
   const {
     formMethods,
     handleDetailsSubmit,
+    handleEmailFeedbackSubmit,
     isLoading,
     isFetching,
     modalHeader,
@@ -65,6 +66,9 @@ export const CreateFormDetailsScreen = (): JSX.Element => {
 
   const titleInputValue = watch('title')
   const responseModeValue = watch('responseMode')
+  const handleEmailButtonPress = () => {
+    handleEmailFeedbackSubmit()
+  }
 
   return (
     <>
@@ -98,7 +102,11 @@ export const CreateFormDetailsScreen = (): JSX.Element => {
                 control={control}
                 render={({ field }) => (
                   <WorkspaceRowsProvider>
-                    <FormResponseOptions {...field} isSingpass={isSingpass} />
+                    <FormResponseOptions
+                      {...field}
+                      isSingpass={isSingpass}
+                      handleEmailButtonPress={handleEmailButtonPress}
+                    />
                   </WorkspaceRowsProvider>
                 )}
                 rules={{ required: 'Please select a form response mode' }}

frontend/src/features/workspace/components/CreateFormModal/CreateFormModalContent/CreateFormModalContent.tsx

@@ -6,6 +6,7 @@ import {
 } from '../CreateFormWizardContext'
 
 import { CreateFormDetailsScreen } from './CreateFormDetailsScreen'
+import { EmailModeFeedbackAndCreateScreen } from './EmailModeFeedbackAndCreateScreen'
 import { SaveSecretKeyScreen } from './SaveSecretKeyScreen'
 
 /**
@@ -21,6 +22,10 @@ export const CreateFormModalContent = () => {
         <CreateFormDetailsScreen />
       )}
       {currentStep === CreateFormFlowStates.Landing && <SaveSecretKeyScreen />}
+      {/* TODO: (Kill Email Mode) Remove this route after kill email mode is fully implemented. */}
+      {currentStep === CreateFormFlowStates.EmailFeedback && (
+        <EmailModeFeedbackAndCreateScreen />
+      )}
     </XMotionBox>
   )
 }

frontend/src/features/workspace/components/CreateFormModal/CreateFormModalContent/EmailModeFeedbackAndCreateScreen.tsx

@@ -0,0 +1,100 @@
+import { FormProvider } from 'react-hook-form'
+import { BiRightArrowAlt } from 'react-icons/bi'
+import {
+  Container,
+  FormControl,
+  FormErrorMessage,
+  Input,
+  ModalBody,
+  Text,
+} from '@chakra-ui/react'
+
+import { BasicField } from '~shared/types'
+
+import { GUIDE_PREVENT_EMAIL_BOUNCE } from '~constants/links'
+import { FORM_TITLE_VALIDATION_RULES } from '~utils/formValidation'
+import Button from '~components/Button'
+import FormLabel from '~components/FormControl/FormLabel'
+import { CheckboxField, CheckboxFieldSchema } from '~templates/Field'
+
+import { useAdminUseEmailModeFormView } from '~features/public-form/queries'
+
+import { useCreateFormWizard } from '../CreateFormWizardContext'
+
+import { EmailFormRecipientsInput } from './EmailFormRecipientsInput'
+
+const CHECKBOX_FIELD_SCHEMA: CheckboxFieldSchema = {
+  _id: 'reason',
+  fieldOptions: [
+    'I need to collect Sensitive High data',
+    'I need to receive attachments via email',
+    'I use the JSON in Email mode responses for automations',
+  ],
+  othersRadioButton: true,
+  ValidationOptions: { customMax: null, customMin: null },
+  validateByValue: false,
+  fieldType: BasicField.Checkbox,
+  title: 'Why are you creating an Email mode form?',
+  description: '',
+  required: true,
+  disabled: false,
+}
+
+// TODO: (Kill Email Mode) Remove this route after kill email mode is fully implemented.
+export const EmailModeFeedbackAndCreateScreen = (): JSX.Element => {
+  const {
+    formMethods,
+
+    handleCreateEmailModeForm,
+    isLoading,
+    isFetching,
+  } = useCreateFormWizard()
+  const {
+    register,
+    formState: { errors },
+  } = formMethods
+
+  const { data: feedbackForm } = useAdminUseEmailModeFormView()
+  if (!feedbackForm) return <></>
+
+  return (
+    <ModalBody whiteSpace="pre-wrap">
+      <FormProvider {...formMethods}>
+        <Container maxW="42.5rem" p={0}>
+          <FormControl isRequired isInvalid={!!errors.title} mb="2.25rem">
+            <FormLabel useMarkdownForDescription>Form name</FormLabel>
+
+            <Input
+              autoFocus
+              {...register('title', FORM_TITLE_VALIDATION_RULES)}
+            />
+            <FormErrorMessage>{errors.title?.message}</FormErrorMessage>
+          </FormControl>
+
+          <FormControl isRequired isInvalid={!!errors.emails} mb="2.25rem">
+            <FormLabel
+              useMarkdownForDescription
+              description={`All email addresses below will be notified. Learn more on [how to guard against email bounces](${GUIDE_PREVENT_EMAIL_BOUNCE}).`}
+            >
+              Notifications for new responses
+            </FormLabel>
+            <EmailFormRecipientsInput />
+          </FormControl>
+
+          <FormControl isRequired isInvalid={!!errors.emails} mb="2.25rem">
+            <CheckboxField schema={CHECKBOX_FIELD_SCHEMA} />
+          </FormControl>
+          <Button
+            rightIcon={<BiRightArrowAlt fontSize="1.5rem" />}
+            type="submit"
+            isLoading={isLoading}
+            isDisabled={isFetching}
+            onClick={handleCreateEmailModeForm(feedbackForm)}
+          >
+            <Text lineHeight="1.5rem">Next step</Text>
+          </Button>
+        </Container>
+      </FormProvider>
+    </ModalBody>
+  )
+}