build: release v6.97.0

CHANGELOG.md

@@ -4,21 +4,25 @@ 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.96.0](https://github.com/opengovsg/FormSG/compare/v6.96.0...v6.96.0)
+#### [v6.97.0](https://github.com/opengovsg/FormSG/compare/v6.96.0...v6.97.0)
 
-- revert: "feat: Payments thank you page" [`#6973`](https://github.com/opengovsg/FormSG/pull/6973)
+- fix(mrf): form duplication with MRF [`#6985`](https://github.com/opengovsg/FormSG/pull/6985)
+- fix: payments thank you page [`#6975`](https://github.com/opengovsg/FormSG/pull/6975)
+- build: merge v6.96.0 into develop  [`#6974`](https://github.com/opengovsg/FormSG/pull/6974)
+- build: release v6.96.0 [`#6972`](https://github.com/opengovsg/FormSG/pull/6972)
 
 #### [v6.96.0](https://github.com/opengovsg/FormSG/compare/v6.95.0...v6.96.0)
 
 > 21 December 2023
 
+- revert: "feat: Payments thank you page" [`#6973`](https://github.com/opengovsg/FormSG/pull/6973)
 - feat: multi-respondent forms [`#6960`](https://github.com/opengovsg/FormSG/pull/6960)
 - feat: Payments thank you page [`#6961`](https://github.com/opengovsg/FormSG/pull/6961)
 - fix(deps): bump libphonenumber-js from 1.10.51 to 1.10.52 in /shared [`#6963`](https://github.com/opengovsg/FormSG/pull/6963)
 - build: merge v6.95.0 into develop [`#6957`](https://github.com/opengovsg/FormSG/pull/6957)
 - chore: use responses instead of results [`#6922`](https://github.com/opengovsg/FormSG/pull/6922)
 - build: release v6.95.0 [`#6956`](https://github.com/opengovsg/FormSG/pull/6956)
-- chore: bump version to v6.96.0 [`1195d9d`](https://github.com/opengovsg/FormSG/commit/1195d9db2f6ca396db832b07eb6c7dfb4290c159)
+- chore: bump version to v6.96.0 [`b0cdd4e`](https://github.com/opengovsg/FormSG/commit/b0cdd4ef3d34be8acae79a8e3411c34ef1b06afe)
 
 #### [v6.95.0](https://github.com/opengovsg/FormSG/compare/v6.94.0...v6.95.0)
 

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "form-frontend",
-  "version": "6.96.0",
+  "version": "6.97.0",
   "homepage": ".",
   "private": true,
   "dependencies": {

frontend/src/features/admin-form/template/TemplateFormService.ts

@@ -1,5 +1,6 @@
 import {
   CreateEmailFormBodyDto,
+  CreateMultirespondentFormBodyDto,
   CreateStorageFormBodyDto,
   FormDto,
 } from '~shared/types'
@@ -18,9 +19,9 @@ export const createEmailModeTemplateForm = async (
   ).then(({ data }) => data)
 }
 
-export const createStorageModeTemplateForm = async (
+export const createStorageModeOrMultirespondentTemplateForm = async (
   formId: string,
-  body: CreateStorageFormBodyDto,
+  body: CreateStorageFormBodyDto | CreateMultirespondentFormBodyDto,
 ): Promise<FormDto> => {
   return ApiService.post<FormDto>(
     `${ADMIN_FORM_ENDPOINT}/${formId}/use-template`,

frontend/src/features/admin-form/template/UseTemplateModal/UseTemplateWizardProvider.tsx

@@ -43,14 +43,22 @@ export const useUseTemplateWizardContext = (
 
   const {
     useEmailModeFormTemplateMutation,
-    useStorageModeFormTemplateMutation,
+    useStorageModeOrMultirespondentFormTemplateMutation,
   } = useUseTemplateMutations()
 
-  const handleCreateStorageModeForm = handleSubmit(
+  const handleCreateStorageModeOrMultirespondentForm = handleSubmit(
     ({ title, responseMode }) => {
-      if (responseMode !== FormResponseMode.Encrypt || !formId) return
-
-      return useStorageModeFormTemplateMutation.mutate({
+      if (
+        !(
+          responseMode === FormResponseMode.Encrypt ||
+          responseMode === FormResponseMode.Multirespondent
+        ) ||
+        !formId
+      ) {
+        return
+      }
+
+      return useStorageModeOrMultirespondentFormTemplateMutation.mutate({
         formIdToDuplicate: formId,
         title,
         responseMode,
@@ -76,13 +84,13 @@ export const useUseTemplateWizardContext = (
     isFetching: isTemplateFormLoading,
     isLoading:
       useEmailModeFormTemplateMutation.isLoading ||
-      useStorageModeFormTemplateMutation.isLoading,
+      useStorageModeOrMultirespondentFormTemplateMutation.isLoading,
     keypair,
     currentStep,
     direction,
     formMethods,
     handleDetailsSubmit,
-    handleCreateStorageModeForm,
+    handleCreateStorageModeOrMultirespondentForm,
     modalHeader: 'Duplicate form',
   }
 }

frontend/src/features/admin-form/template/mutation.ts

@@ -4,6 +4,7 @@ import { useNavigate } from 'react-router-dom'
 
 import {
   CreateEmailFormBodyDto,
+  CreateMultirespondentFormBodyDto,
   CreateStorageFormBodyDto,
   FormDto,
 } from '~shared/types'
@@ -18,7 +19,7 @@ import { workspaceKeys } from '~features/workspace/queries'
 
 import {
   createEmailModeTemplateForm,
-  createStorageModeTemplateForm,
+  createStorageModeOrMultirespondentTemplateForm,
 } from './TemplateFormService'
 
 const useCommonHooks = () => {
@@ -67,13 +68,15 @@ export const useUseTemplateMutations = () => {
     },
   )
 
-  const useStorageModeFormTemplateMutation = useMutation<
+  const useStorageModeOrMultirespondentFormTemplateMutation = useMutation<
     FormDto,
     ApiError,
-    CreateStorageFormBodyDto & { formIdToDuplicate: string }
+    (CreateStorageFormBodyDto | CreateMultirespondentFormBodyDto) & {
+      formIdToDuplicate: string
+    }
   >(
     ({ formIdToDuplicate, ...params }) =>
-      createStorageModeTemplateForm(formIdToDuplicate, params),
+      createStorageModeOrMultirespondentTemplateForm(formIdToDuplicate, params),
     {
       onSuccess: handleSuccess,
       onError: handleError,
@@ -82,6 +85,6 @@ export const useUseTemplateMutations = () => {
 
   return {
     useEmailModeFormTemplateMutation,
-    useStorageModeFormTemplateMutation,
+    useStorageModeOrMultirespondentFormTemplateMutation,
   }
 }

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

@@ -10,6 +10,8 @@ import FormErrorMessage from '~components/FormControl/FormErrorMessage'
 import FormLabel from '~components/FormControl/FormLabel'
 import Textarea from '~components/Textarea'
 
+import { usePublicFormContext } from '~features/public-form/PublicFormContext'
+
 export type FeedbackFormInput = {
   rating: number
   comment?: string
@@ -34,6 +36,12 @@ export const FeedbackBlock = ({
 
   const handleFormSubmit = handleSubmit((inputs) => onSubmit(inputs))
 
+  const { isPaymentEnabled } = usePublicFormContext()
+
+  const feedbackTitle = isPaymentEnabled
+    ? 'How was your experience making payment on this form?'
+    : 'How was your form filling experience today?'
+
   const colorScheme = useMemo(() => {
     return `theme-${colorTheme}` as const
   }, [colorTheme])
@@ -43,7 +51,7 @@ export const FeedbackBlock = ({
       <chakra.form w="100%" maxW="100%" noValidate onSubmit={handleFormSubmit}>
         <FormControl isInvalid={!!errors.rating} id="rating">
           <FormLabel isRequired color="content.strong">
-            How was your form filling experience today?
+            {feedbackTitle}
           </FormLabel>
           <Controller
             rules={{ required: 'Please select a rating' }}

frontend/src/features/public-form/components/FormPaymentPage/components/PaymentStack.tsx

@@ -4,15 +4,24 @@ import { Divider, Stack } from '@chakra-ui/react'
 /**
  * Presentational wrapper over chakra-ui's `<Stack />` for payment elements.
  */
-export const PaymentStack = ({ children }: { children: React.ReactNode }) => (
-  <Stack
-    spacing={{ base: '1.5rem', md: '2.25rem' }}
-    py={{ base: '1.5rem', md: '3rem' }}
-    px={{ base: '1.5rem', md: '4rem' }}
-    bg="white"
-    w="100%"
-    divider={<Divider />}
-  >
-    {children}
-  </Stack>
-)
+export const PaymentStack = ({
+  noBg,
+  children,
+}: {
+  noBg?: boolean
+  children: React.ReactNode
+}) => {
+  const backgroundColour = noBg ? 'transparent' : 'white'
+  return (
+    <Stack
+      spacing={{ base: '1.5rem', md: '2.25rem' }}
+      py={{ base: '1.5rem', md: '3rem' }}
+      px={{ base: '1.5rem', md: '4rem' }}
+      bg={backgroundColour}
+      w="100%"
+      divider={<Divider />}
+    >
+      {children}
+    </Stack>
+  )
+}

frontend/src/features/public-form/components/FormPaymentPage/components/assets/PaymentSuccessSvgr.tsx

@@ -3,75 +3,18 @@ import { chakra } from '@chakra-ui/react'
 
 export const PaymentSuccessSvgr = chakra((props: SVGProps<SVGSVGElement>) => (
   <svg
-    width={283}
-    height={165}
+    width="64"
+    height="64"
+    viewBox="0 0 64 64"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
-    {...props}
   >
-    <path
-      d="M1.074 12.18C1.074 6.005 6.08 1 12.254 1h258.783c6.175 0 11.18 5.005 11.18 11.18V165H1.074V12.18Z"
-      fill="#FBFCFD"
-    />
-    <path
-      d="M272.069 1.094H12.112A10.963 10.963 0 0 0 1.249 12.157v6.883h281.676v-6.883c.056-6.053-4.804-11.005-10.856-11.063Z"
-      fill="#000"
-    />
-    <ellipse cx={15.96} cy={10.073} rx={1.733} ry={1.765} fill="#fff" />
-    <ellipse cx={26.653} cy={10.073} rx={1.733} ry={1.765} fill="#fff" />
-    <ellipse cx={37.353} cy={10.073} rx={1.733} ry={1.765} fill="#fff" />
-    <path d="M1.256 19.059h281.669v4.461H1.255v-4.461Z" fill="#C9CCCF" />
-    <rect
-      x={45.769}
-      y={109.338}
-      width={67.474}
-      height={192.825}
-      rx={4.51}
-      transform="rotate(-90 45.769 109.338)"
-      fill="#E4E7F6"
-    />
-    <rect
-      x={45.769}
-      y={129.77}
-      width={9.577}
-      height={192.825}
-      rx={4.51}
-      transform="rotate(-90 45.769 129.77)"
-      fill="#E4E7F6"
-    />
-    <rect
-      x={45.769}
-      y={150.202}
-      width={9.577}
-      height={192.825}
-      rx={4.51}
-      transform="rotate(-90 45.769 150.202)"
-      fill="#E4E7F6"
-    />
-    <circle
-      cx={142.338}
-      cy={75.727}
-      r={18.498}
-      fill="#05CC9A"
-      stroke="#000"
-      strokeWidth={0.638}
-    />
-    <path
-      transform="rotate(42.529 -31.564 208.703) skewX(.036)"
-      stroke="#000"
-      strokeWidth={0.638}
-      d="M0-.319h8.672"
-    />
-    <path
-      transform="rotate(-45.018 168.638 -126.857)"
-      stroke="#000"
-      strokeWidth={0.638}
-      d="M0-.319h18.082"
-    />
-    <path
-      d="M282.217 165V12.18c0-6.175-5.005-11.18-11.18-11.18H12.254C6.08 1 1.074 6.005 1.074 12.18V165"
-      stroke="#000"
-      strokeWidth={0.638}
-    />
+    <g id="Icon/check-circle-solid">
+      <path
+        id="Vector"
+        d="M32.0006 5.33203C17.2967 5.33203 5.33398 17.2947 5.33398 31.9987C5.33398 46.7027 17.2967 58.6654 32.0006 58.6654C46.7046 58.6654 58.6673 46.7027 58.6673 31.9987C58.6673 17.2947 46.7046 5.33203 32.0006 5.33203ZM26.67 43.7667L16.7687 33.8867L20.534 30.1107L26.6646 36.2307L40.782 22.1134L44.5527 25.884L26.67 43.7667Z"
+        fill="#05CC9A"
+      />
+    </g>
   </svg>
 ))

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

@@ -1,5 +1,5 @@
 import { useCallback, useState } from 'react'
-import { Stack, useToast } from '@chakra-ui/react'
+import { Box, Stack, useToast } from '@chakra-ui/react'
 
 import { FormPaymentsField, ProductItem } from '~shared/types'
 
@@ -74,8 +74,8 @@ export const StripeReceiptContainer = ({
     /**
      * PaymentStack is explictly added in this component due to https://github.com/chakra-ui/chakra-ui/issues/6757
      */
-    <Stack spacing="1.5rem">
-      <PaymentStack>
+    <Stack>
+      <PaymentStack noBg>
         <DownloadReceiptBlock
           formId={formId}
           submissionId={submissionId}
@@ -87,9 +87,11 @@ export const StripeReceiptContainer = ({
           paymentDate={paymentReceiptStatus.paymentDate}
         />
       </PaymentStack>
-      <PaymentStack>
+      <PaymentStack noBg>
         {!isFeedbackSubmitted && (
-          <FeedbackBlock onSubmit={handleSubmitFeedback} />
+          <Box backgroundColor="white" p="2rem">
+            <FeedbackBlock onSubmit={handleSubmitFeedback} />
+          </Box>
         )}
       </PaymentStack>
     </Stack>