chore: merge with develop to resolve conflicts

.ebextensions/env-file-creation.config

@@ -46,6 +46,7 @@ files:
         aws ssm get-parameter --name "${ENV_TYPE}-ndi" --with-decryption --region $AWS_REGION | jq -r '.Parameter.Value' >> $TARGET_DIR/.env
         aws ssm get-parameter --name "${ENV_TYPE}-verified-fields" --with-decryption --region $AWS_REGION | jq -r '.Parameter.Value' >> $TARGET_DIR/.env
         aws ssm get-parameter --name "${ENV_TYPE}-webhook-verified-content" --with-decryption --region $AWS_REGION | jq -r '.Parameter.Value' >> $TARGET_DIR/.env
+        aws ssm get-parameter --name "${ENV_TYPE}-wogaa" --with-decryption --region $AWS_REGION | jq -r '.Parameter.Value' >> $TARGET_DIR/.env
         aws ssm get-parameter --name "${ENV_SITE_NAME}-sgid" --with-decryption --region $AWS_REGION | jq -r '.Parameter.Value' >> $TARGET_DIR/.env
         aws ssm get-parameter --name "${ENV_SITE_NAME}-payment" --with-decryption --region $AWS_REGION | jq -r '.Parameter.Value' >> $TARGET_DIR/.env
         aws ssm get-parameter --name "${ENV_SITE_NAME}-cron-payment" --with-decryption --region $AWS_REGION | jq -r '.Parameter.Value' >> $TARGET_DIR/.env

docker-compose.yml

@@ -129,6 +129,11 @@ services:
       - GROWTHBOOK_CLIENT_KEY
       # env vars for virus scanner
       - VIRUS_SCANNER_LAMBDA_FUNCTION_NAME=function
+      - WOGAA_SECRET_KEY
+      - WOGAA_START_ENDPOINT
+      - WOGAA_SUBMIT_ENDPOINT
+      - WOGAA_FEEDBACK_ENDPOINT
+
 
   mockpass:
     build: https://github.com/opengovsg/mockpass.git#v4.0.4

frontend/src/features/admin-form/common/components/PreviewFormBanner/PreviewFormBanner.tsx

@@ -47,7 +47,7 @@ interface PreviewFormBannerProps {
 const textProps: TextProps = {
   textStyle: 'body-2',
   color: 'white',
-  ml: '2rem',
+  mx: '2rem',
   mt: '0.5rem',
   mb: '0.5rem',
 }

frontend/src/features/admin-form/create/builder-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"

frontend/src/features/admin-form/create/builder-and-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()
 

frontend/src/features/admin-form/create/builder-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>

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({})

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}

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>

frontend/src/features/public-form/components/FormEndPage/components/PaymentEndPagePreview.tsx

@@ -31,8 +31,9 @@ export const PaymentEndPagePreview = ({
         </Box>
         <Stack
           pt={{ base: '1rem', md: '1.5rem' }}
-          mx={{ base: '1rem', md: '2rem' }}
+          px={{ base: '1rem', md: '4rem' }}
           bg="transparent"
+          w="100%"
         >
           <PaymentEndPageBlock focusOnMount {...endPageProps} />
           {isFeedbackSubmitted ? null : (

frontend/src/features/public-form/components/FormPaymentPage/stripe/StripePaymentElement.tsx

@@ -1,6 +1,6 @@
 import { useMemo, useState } from 'react'
 import { useParams } from 'react-router-dom'
-import { Box, Center, Container } from '@chakra-ui/react'
+import { Box, Center, Container, Flex, Stack, Text } from '@chakra-ui/react'
 import { Elements, useStripe } from '@stripe/react-stripe-js'
 import { loadStripe } from '@stripe/stripe-js'
 
@@ -11,6 +11,7 @@ import {
 } from '~shared/types'
 
 import InlineMessage from '~components/InlineMessage'
+import { CopyButton } from '~templates/CopyButton'
 
 import { useEnv } from '~features/env/queries'
 
@@ -155,9 +156,22 @@ const StripePaymentContainer = ({
             <PaymentFormWrapper>
               {secretEnv === 'production' ? null : (
                 <InlineMessage variant="warning" mb="1rem">
-                  Use '4242 4242 4242 4242' as your card number to test payments
-                  on this form. Payments made on this form will only show in
-                  test mode in Stripe.
+                  <Stack>
+                    <Text>
+                      Make a test payment with the card number below! Payments
+                      made on this form will only show in test mode in Stripe.
+                    </Text>
+                    <Flex align="center">
+                      <Text mr="0.25rem">4242 4242 4242 4242</Text>
+                      <Flex boxSize="1.5rem" align="center" justify="center">
+                        <CopyButton
+                          colorScheme="secondary"
+                          stringToCopy={`4242424242424242`}
+                          aria-label="Copy test card number"
+                        />
+                      </Flex>
+                    </Flex>
+                  </Stack>
                 </InlineMessage>
               )}
               <PaymentStack>

serverless/virus-scanner/src/__tests/index.spec.ts

@@ -97,7 +97,7 @@ describe('handler', () => {
     expect(mockLoggerWarn).toHaveBeenCalledWith(
       expect.objectContaining({
         message: 'File not found',
-        error: new Error('File not found'),
+        err: new Error('File not found'),
         quarantineFileKey: mockUUID,
       }),
     )
@@ -175,7 +175,7 @@ describe('handler', () => {
     expect(mockLoggerError).toHaveBeenCalledWith(
       expect.objectContaining({
         message: 'Failed to scan file',
-        error: new Error('Failed to scan file'),
+        err: new Error('Failed to scan file'),
         quarantineFileKey: mockUUID,
       }),
     )
@@ -248,7 +248,7 @@ describe('handler', () => {
     expect(mockLoggerError).toHaveBeenCalledWith(
       expect.objectContaining({
         message: 'Failed to move file to clean bucket',
-        error: new Error('Failed to move file'),
+        err: new Error('Failed to move file'),
         bucket: 'local-virus-scanner-quarantine-bucket',
         key: mockUUID,
       }),

serverless/virus-scanner/src/__tests/s3.service.spec.ts

@@ -145,7 +145,7 @@ describe('S3Service', () => {
         expect.objectContaining({
           bucketName: 'bucketName',
           objectKey: 'objectKey',
-          error: new Error('Body is empty'),
+          err: new Error('Body is empty'),
         }),
         'Failed to get object from s3',
       )
@@ -172,7 +172,7 @@ describe('S3Service', () => {
         expect.objectContaining({
           bucketName: 'bucketName',
           objectKey: 'objectKey',
-          error: new Error('VersionId is empty'),
+          err: new Error('VersionId is empty'),
         }),
         'Failed to get object from s3',
       )

serverless/virus-scanner/src/index.ts

@@ -66,10 +66,10 @@ export const handler = async (
       bucketName: quarantineBucket,
       objectKey: quarantineFileKey,
     })
-  } catch (error) {
+  } catch (err) {
     logger.warn({
       message: 'File not found',
-      error,
+      err,
       quarantineFileKey,
     })
     return {
@@ -88,10 +88,10 @@ export const handler = async (
   let scanResult
   try {
     scanResult = await scanFileStream(body)
-  } catch (error) {
+  } catch (err) {
     logger.error({
       message: 'Failed to scan file',
-      error,
+      err,
       quarantineFileKey,
     })
     return {
@@ -122,11 +122,11 @@ export const handler = async (
         objectKey: quarantineFileKey,
         versionId,
       })
-    } catch (error) {
+    } catch (err) {
       // Log but do not halt execution as we still want to return 400 for malicious file
       logger.error({
         message: 'Failed to delete file from quarantine bucket',
-        error,
+        err,
         key: quarantineFileKey,
       })
     }
@@ -158,10 +158,10 @@ export const handler = async (
         destinationBucketName: cleanBucket,
         destinationObjectKey: cleanFileKey,
       })
-    } catch (error) {
+    } catch (err) {
       logger.error({
         message: 'Failed to move file to clean bucket',
-        error,
+        err,
         bucket: quarantineBucket,
         key: quarantineFileKey,
       })