feat(mrf): disable unsupported features (#7106)

* feat: remove attachment field on mrf builder * feat: disable vfn on mobile no * feat: disable vfn on email * feat: hide feedback section on mrf * chore: remove redundant comments, rename boolean to be more grammatically consistent * feat: disable email cnfrmtn on email field * fix: add missing storybook params * chore: rename props
opengovsg · Feb 26, 2024 · ac0c695 · ac0c695
1 parent 7e1b9c8
commit ac0c695
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 16 deletions.
diff --git a/...-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditEmail/EditEmail.tsx b/...-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditEmail/EditEmail.tsx
@@ -139,6 +139,18 @@ export const EditEmail = ({ field }: EditEmailProps): JSX.Element => {
     }
   }, [isPdfResponseEnabled])
 
+  // vfn is not supported on MRF
+  const isToggleVfnDisabled = useMemo(
+    () => form?.responseMode === FormResponseMode.Multirespondent,
+    [form],
+  )
+
+  // email confirmation is not supported on MRF
+  const isToggleEmailConfirmationDisabled = useMemo(
+    () => form?.responseMode === FormResponseMode.Multirespondent,
+    [form],
+  )
+
   return (
     <CreatePageDrawerContentContainer>
       <FormControl isRequired isReadOnly={isLoading} isInvalid={!!errors.title}>
@@ -158,7 +170,7 @@ export const EditEmail = ({ field }: EditEmailProps): JSX.Element => {
       <FormControl isReadOnly={isLoading}>
         <Toggle {...register('required')} label="Required" />
       </FormControl>
-      <FormControl isReadOnly={isLoading}>
+      <FormControl isReadOnly={isLoading} isDisabled={isToggleVfnDisabled}>
         <Toggle
           {...register('isVerifiable')}
           label="OTP verification"
@@ -193,7 +205,10 @@ export const EditEmail = ({ field }: EditEmailProps): JSX.Element => {
         )}
       </Box>
       <Box>
-        <FormControl isReadOnly={isLoading}>
+        <FormControl
+          isReadOnly={isLoading}
+          isDisabled={isToggleEmailConfirmationDisabled}
+        >
           <Toggle
             {...register('autoReplyOptions.hasAutoReply')}
             description="Customise an email acknowledgement to respondents"

diff --git a/...nd-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditMobile/EditMobile.tsx b/...nd-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditMobile/EditMobile.tsx
@@ -2,6 +2,7 @@ import { useMemo } from 'react'
 import { Box, FormControl, useDisclosure } from '@chakra-ui/react'
 import { extend, pick } from 'lodash'
 
+import { FormResponseMode } from '~shared/types'
 import { MobileFieldBase } from '~shared/types/field'
 
 import { createBaseValidationRules } from '~utils/fieldValidation'
@@ -62,13 +63,20 @@ export const EditMobile = ({ field }: EditMobileProps): JSX.Element => {
 
   const { data: freeSmsCount } = useFreeSmsQuota()
   const isToggleVfnDisabled = useMemo(() => {
+    // vfn is not supported on MRF
+    if (form?.responseMode === FormResponseMode.Multirespondent) return true
     if (!freeSmsCount) return true
     return (
       !field.isVerifiable &&
       !hasTwilioCredentials &&
       freeSmsCount.freeSmsCounts >= freeSmsCount.quota
     )
-  }, [field.isVerifiable, freeSmsCount, hasTwilioCredentials])
+  }, [
+    field.isVerifiable,
+    freeSmsCount,
+    hasTwilioCredentials,
+    form?.responseMode,
+  ])
 
   const smsCountsDisclosure = useDisclosure()
 

diff --git a/...uilder-and-design/BuilderAndDesignDrawer/FieldListDrawer/field-panels/BasicFieldPanel.tsx b/...uilder-and-design/BuilderAndDesignDrawer/FieldListDrawer/field-panels/BasicFieldPanel.tsx
@@ -1,6 +1,9 @@
 import { Droppable } from 'react-beautiful-dnd'
 import { Box } from '@chakra-ui/react'
 
+import { BasicField, FormResponseMode } from '~shared/types'
+
+import { useAdminForm } from '~features/admin-form/common/queries'
 import {
   BASIC_FIELDS_ORDERED,
   CREATE_FIELD_DROP_ID,
@@ -13,20 +16,33 @@ import { FieldSection } from './FieldSection'
 
 export const BasicFieldPanel = () => {
   const { isLoading } = useCreateTabForm()
+  const { data: form } = useAdminForm()
 
   return (
     <Droppable isDropDisabled droppableId={CREATE_FIELD_DROP_ID}>
       {(provided) => (
         <Box ref={provided.innerRef} {...provided.droppableProps}>
           <FieldSection>
-            {BASIC_FIELDS_ORDERED.map((fieldType, index) => (
-              <DraggableBasicFieldListOption
-                index={index}
-                isDisabled={isLoading}
-                key={index}
-                fieldType={fieldType}
-              />
-            ))}
+            {BASIC_FIELDS_ORDERED.map((fieldType, index) => {
+              let shouldDisableField = isLoading
+
+              // Attachment is not supported on MRF
+              if (
+                fieldType === BasicField.Attachment &&
+                form?.responseMode === FormResponseMode.Multirespondent
+              ) {
+                shouldDisableField = true
+              }
+
+              return (
+                <DraggableBasicFieldListOption
+                  index={index}
+                  isDisabled={shouldDisableField}
+                  key={index}
+                  fieldType={fieldType}
+                />
+              )
+            })}
             <Box display="none">{provided.placeholder}</Box>
           </FieldSection>
         </Box>

diff --git a/frontend/src/features/public-form/components/FormEndPage/FormEndPage.stories.tsx b/frontend/src/features/public-form/components/FormEndPage/FormEndPage.stories.tsx
@@ -43,6 +43,8 @@ Default.args = {
     title:
       'Thank you for your submission with some super long backstory about how important the submission is to them',
     paragraph: 'We will get back to you shortly.\n\nOnce again,\r\nthank you.',
+    paymentTitle: '',
+    paymentParagraph: '',
   },
   submissionData: {
     id: 'mockSubmissionId',
@@ -84,7 +86,7 @@ ColorThemeOrange.args = {
 export const FeedbackSubmitted = Template.bind({})
 FeedbackSubmitted.args = {
   ...Default.args,
-  isFeedbackSubmitted: true,
+  isFeedbackSectionHidden: true,
 }
 
 export const Mobile = Template.bind({})

diff --git a/frontend/src/features/public-form/components/FormEndPage/FormEndPage.tsx b/frontend/src/features/public-form/components/FormEndPage/FormEndPage.tsx
@@ -13,13 +13,13 @@ export interface FormEndPageProps {
   endPage: FormDto['endPage']
   submissionData: SubmissionData
   handleSubmitFeedback: (inputs: FeedbackFormInput) => void
-  isFeedbackSubmitted: boolean
+  isFeedbackSectionHidden: boolean
   colorTheme: FormColorTheme
 }
 
 export const FormEndPage = ({
   handleSubmitFeedback,
-  isFeedbackSubmitted,
+  isFeedbackSectionHidden,
   colorTheme,
   ...endPageProps
 }: FormEndPageProps): JSX.Element => {
@@ -40,7 +40,7 @@ export const FormEndPage = ({
             {...endPageProps}
             colorTheme={colorTheme}
           />
-          {isFeedbackSubmitted ? null : (
+          {isFeedbackSectionHidden ? null : (
             <FeedbackBlock
               colorTheme={colorTheme}
               onSubmit={handleSubmitFeedback}

diff --git a/frontend/src/features/public-form/components/FormEndPage/FormEndPageContainer.tsx b/frontend/src/features/public-form/components/FormEndPage/FormEndPageContainer.tsx
@@ -72,14 +72,20 @@ export const FormEndPageContainer = (): JSX.Element | null => {
       />
     )
   }
+
+  const isFeedbackHidden =
+    // Feedback is not supported on MRF
+    form.responseMode === FormResponseMode.Multirespondent ||
+    isFeedbackSubmitted
+
   return (
     <Box py={{ base: '1.5rem', md: '2.5rem' }} w="100%">
       <FormEndPage
         colorTheme={form.startPage.colorTheme}
         submissionData={submissionData}
         formTitle={form.title}
         endPage={form.endPage}
-        isFeedbackSubmitted={isFeedbackSubmitted}
+        isFeedbackSectionHidden={isFeedbackHidden}
         handleSubmitFeedback={handleSubmitFeedback}
       />
     </Box>