build: release v6.45.0

CHANGELOG.md

@@ -4,8 +4,32 @@ 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.45.0](https://github.com/opengovsg/FormSG/compare/v6.44.1...v6.45.0)
+
+> 26 April 2023
+
+- chore: update payment guide in payment unsupported msg [`#6199`](https://github.com/opengovsg/FormSG/pull/6199)
+- fix(deps): bump type-fest from 3.8.0 to 3.9.0 in /shared [`#6195`](https://github.com/opengovsg/FormSG/pull/6195)
+- chore: update previous payment typing and hooks [`#6191`](https://github.com/opengovsg/FormSG/pull/6191)
+- chore: add missed out changelog for 6.44.1 [`#6197`](https://github.com/opengovsg/FormSG/pull/6197)
+- build: merge release v6.44.1 to develop [`#6196`](https://github.com/opengovsg/FormSG/pull/6196)
+- build: release v6.44.1 [`#6193`](https://github.com/opengovsg/FormSG/pull/6193)
+- perf: memoize field row containers [`#6189`](https://github.com/opengovsg/FormSG/pull/6189)
+- build: merge release v6.44.0 to develop [`#6187`](https://github.com/opengovsg/FormSG/pull/6187)
+- chore: bump version to v6.45.0 [`df24b16`](https://github.com/opengovsg/FormSG/commit/df24b16f04ba595a53062a309deaf90225b3a2ad)
+
+#### [v6.44.1](https://github.com/opengovsg/FormSG/compare/v6.44.0...v6.44.1)
+
+> 25 April 2023
+
+- build: release v6.44.0 [`#6186`](https://github.com/opengovsg/FormSG/pull/6186)
+- chore: bump version to v6.44.1 [`d9da624`](https://github.com/opengovsg/FormSG/commit/d9da62488b59373c3c2c80878a343028861db912)
+- update copy for invoice [`66823d3`](https://github.com/opengovsg/FormSG/commit/66823d32d6ae56002f681b903f0725db814b40f9)
+
 #### [v6.44.0](https://github.com/opengovsg/FormSG/compare/v6.43.0...v6.44.0)
 
+> 25 April 2023
+
 - chore(deps-dev): bump @typescript-eslint/parser from 5.59.0 to 5.59.1 in /shared [`#6184`](https://github.com/opengovsg/FormSG/pull/6184)
 - fix: move form title and response id to the end of invoice [`#6180`](https://github.com/opengovsg/FormSG/pull/6180)
 - feat: email check for previous payment  [`#6170`](https://github.com/opengovsg/FormSG/pull/6170)
@@ -14,6 +38,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - fix: add description to verify payment email field [`#6176`](https://github.com/opengovsg/FormSG/pull/6176)
 - build: merge release v6.43.0 to develop [`#6171`](https://github.com/opengovsg/FormSG/pull/6171)
 - build: release v6.43.0 [`#6169`](https://github.com/opengovsg/FormSG/pull/6169)
+- chore: bump version to v6.44.0 [`197d5d7`](https://github.com/opengovsg/FormSG/commit/197d5d7be592526dd0f647a8a6d51e3dedde8b40)
 
 #### [v6.43.0](https://github.com/opengovsg/FormSG/compare/v6.42.2...v6.43.0)
 

frontend/package.json

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

frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/BuilderFields.tsx

@@ -1,8 +1,17 @@
 import { AdminFormDto } from '~shared/types/form'
 
+import { useCreatePageSidebar } from '~features/admin-form/create/common/CreatePageSidebarContext'
 import { augmentWithQuestionNo } from '~features/form/utils'
 import { FieldIdSet } from '~features/logic/types'
 
+import { useBuilderAndDesignContext } from '../BuilderAndDesignContext'
+import { PENDING_CREATE_FIELD_ID } from '../constants'
+import {
+  FieldBuilderState,
+  stateDataSelector,
+  useFieldBuilderStore,
+} from '../useFieldBuilderStore'
+
 import FieldRow from './FieldRow'
 
 interface BuilderFieldsProps {
@@ -17,6 +26,13 @@ export const BuilderFields = ({
   isDraggingOver,
 }: BuilderFieldsProps) => {
   const fieldsWithQuestionNos = augmentWithQuestionNo(fields)
+  const stateData = useFieldBuilderStore(stateDataSelector)
+
+  const { handleBuilderClick } = useCreatePageSidebar()
+  const {
+    deleteFieldModalDisclosure: { onOpen: onDeleteModalOpen },
+  } = useBuilderAndDesignContext()
+
   return (
     <>
       {fieldsWithQuestionNos.map((f, i) => (
@@ -26,6 +42,16 @@ export const BuilderFields = ({
           field={f}
           isHiddenByLogic={!visibleFieldIds.has(f._id)}
           isDraggingOver={isDraggingOver}
+          isActive={
+            stateData.state === FieldBuilderState.EditingField
+              ? f._id === stateData.field._id
+              : stateData.state === FieldBuilderState.CreatingField
+              ? f._id === PENDING_CREATE_FIELD_ID
+              : false
+          }
+          fieldBuilderState={stateData.state}
+          handleBuilderClick={handleBuilderClick}
+          onDeleteModalOpen={onDeleteModalOpen}
         />
       ))}
     </>

frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/FieldRow/FieldRowContainer.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useRef } from 'react'
+import { memo, useCallback, useEffect, useMemo, useRef } from 'react'
 import { Draggable } from 'react-beautiful-dnd'
 import { FormProvider, useForm } from 'react-hook-form'
 import { BiCog, BiDuplicate, BiGridHorizontal, BiTrash } from 'react-icons/bi'
@@ -12,7 +12,7 @@ import {
   Flex,
   Icon,
 } from '@chakra-ui/react'
-import { times } from 'lodash'
+import { isEqual, times } from 'lodash'
 
 import { FormColorTheme } from '~shared/types'
 import { BasicField, FormFieldDto } from '~shared/types/field'
@@ -47,16 +47,15 @@ import { MobileFieldInput } from '~templates/Field/Mobile'
 import { createTableRow } from '~templates/Field/Table/utils/createRow'
 
 import { adminFormKeys } from '~features/admin-form/common/queries'
-import { useCreatePageSidebar } from '~features/admin-form/create/common/CreatePageSidebarContext'
+import { CreatePageSidebarContextProps } from '~features/admin-form/create/common'
 import {
   augmentWithMyInfoDisplayValue,
   extractPreviewValue,
   hasExistingFieldValue,
   isMyInfo,
 } from '~features/myinfo/utils'
 
-import { useBuilderAndDesignContext } from '../../BuilderAndDesignContext'
-import { PENDING_CREATE_FIELD_ID } from '../../constants'
+import { BuilderAndDesignContextProps } from '../../BuilderAndDesignContext'
 import { useDeleteFormField } from '../../mutations/useDeleteFormField'
 import { useDuplicateFormField } from '../../mutations/useDuplicateFormField'
 import { useCreateTabForm } from '../../useCreateTabForm'
@@ -69,7 +68,6 @@ import { isDirtySelector, useDirtyFieldStore } from '../../useDirtyFieldStore'
 import {
   FieldBuilderState,
   setToInactiveSelector,
-  stateDataSelector,
   updateEditStateSelector,
   useFieldBuilderStore,
 } from '../../useFieldBuilderStore'
@@ -84,35 +82,33 @@ export interface FieldRowContainerProps {
   index: number
   isHiddenByLogic: boolean
   isDraggingOver: boolean
+  isActive: boolean
+  fieldBuilderState: FieldBuilderState
+  handleBuilderClick: CreatePageSidebarContextProps['handleBuilderClick']
+  onDeleteModalOpen: BuilderAndDesignContextProps['deleteFieldModalDisclosure']['onOpen']
 }
 
-export const FieldRowContainer = ({
+const FieldRowContainer = ({
   field,
   index,
   isHiddenByLogic,
   isDraggingOver,
+  isActive,
+  fieldBuilderState,
+  handleBuilderClick,
+  onDeleteModalOpen,
 }: FieldRowContainerProps): JSX.Element => {
   const isMobile = useIsMobile()
   const { data: form } = useCreateTabForm()
   const numFormFieldMutations = useIsMutating(adminFormKeys.base)
-  const { stateData, setToInactive, updateEditState } = useFieldBuilderStore(
-    useCallback(
-      (state) => ({
-        stateData: stateDataSelector(state),
-        setToInactive: setToInactiveSelector(state),
-        updateEditState: updateEditStateSelector(state),
-      }),
-      [],
-    ),
-  )
+  const setToInactive = useFieldBuilderStore(setToInactiveSelector)
+  const updateEditState = useFieldBuilderStore(updateEditStateSelector)
 
   const isDirty = useDirtyFieldStore(isDirtySelector)
   const toast = useToast({ status: 'danger', isClosable: true })
 
   const setDesignState = useDesignStore(setStateSelector)
 
-  const { handleBuilderClick } = useCreatePageSidebar()
-
   const { duplicateFieldMutation } = useDuplicateFormField()
   const { deleteFieldMutation } = useDeleteFormField()
 
@@ -141,19 +137,6 @@ export const FieldRowContainer = ({
     defaultValues: defaultFieldValues,
   })
 
-  const isActive = useMemo(() => {
-    if (stateData.state === FieldBuilderState.EditingField) {
-      return field._id === stateData.field._id
-    } else if (stateData.state === FieldBuilderState.CreatingField) {
-      return field._id === PENDING_CREATE_FIELD_ID
-    }
-    return false
-  }, [stateData, field])
-
-  const {
-    deleteFieldModalDisclosure: { onOpen: onDeleteModalOpen },
-  } = useBuilderAndDesignContext()
-
   const ref = useRef<HTMLDivElement | null>(null)
   useEffect(() => {
     if (isActive) {
@@ -208,7 +191,7 @@ export const FieldRowContainer = ({
   const handleDuplicateClick = useCallback(() => {
     if (!form) return
     // Duplicate button should be hidden if field is not yet created, but guard here just in case
-    if (stateData.state === FieldBuilderState.CreatingField) return
+    if (fieldBuilderState === FieldBuilderState.CreatingField) return
     // Disallow duplicating attachment fields if after the dupe, the filesize exceeds the limit
     if (field.fieldType === BasicField.Attachment) {
       const existingAttachmentsSize = form.form_fields.reduce(
@@ -230,15 +213,15 @@ export const FieldRowContainer = ({
       }
     }
     duplicateFieldMutation.mutate(field._id)
-  }, [stateData.state, field, duplicateFieldMutation, form, toast])
+  }, [fieldBuilderState, field, duplicateFieldMutation, form, toast])
 
   const handleDeleteClick = useCallback(() => {
-    if (stateData.state === FieldBuilderState.CreatingField) {
+    if (fieldBuilderState === FieldBuilderState.CreatingField) {
       setToInactive()
-    } else if (stateData.state === FieldBuilderState.EditingField) {
+    } else if (fieldBuilderState === FieldBuilderState.EditingField) {
       onDeleteModalOpen()
     }
-  }, [setToInactive, stateData.state, onDeleteModalOpen])
+  }, [setToInactive, fieldBuilderState, onDeleteModalOpen])
 
   const isAnyMutationLoading = useMemo(
     () => duplicateFieldMutation.isLoading || deleteFieldMutation.isLoading,
@@ -250,9 +233,9 @@ export const FieldRowContainer = ({
       !isActive ||
       isDirty ||
       !!numFormFieldMutations ||
-      stateData.state === FieldBuilderState.CreatingField
+      fieldBuilderState === FieldBuilderState.CreatingField
     )
-  }, [isActive, isDirty, numFormFieldMutations, stateData.state])
+  }, [isActive, isDirty, numFormFieldMutations, fieldBuilderState])
 
   return (
     <Draggable
@@ -331,7 +314,7 @@ export const FieldRowContainer = ({
                     snapshot.isDragging ? 'secondary.300' : 'secondary.200'
                   }
                 >
-                  {stateData.state === FieldBuilderState.EditingField &&
+                  {fieldBuilderState === FieldBuilderState.EditingField &&
                   !isDragDisabled ? (
                     <Icon as={BiGridHorizontal} fontSize="1.5rem" />
                   ) : (
@@ -377,7 +360,7 @@ export const FieldRowContainer = ({
                     ) : null}
                     {
                       // Fields which are not yet created cannot be duplicated
-                      stateData.state !== FieldBuilderState.CreatingField && (
+                      fieldBuilderState !== FieldBuilderState.CreatingField && (
                         <Tooltip label="Duplicate field">
                           <IconButton
                             aria-label="Duplicate field"
@@ -410,6 +393,10 @@ export const FieldRowContainer = ({
   )
 }
 
+export const MemoizedFieldRow = memo(FieldRowContainer, (prevProps, newProps) =>
+  isEqual(prevProps, newProps),
+)
+
 type FieldRowProps = {
   field: FormFieldDto
   colorTheme?: FormColorTheme

frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/FieldRow/index.ts

@@ -1 +1 @@
-export { FieldRowContainer as default } from './FieldRowContainer'
+export { MemoizedFieldRow as default } from './FieldRowContainer'

frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContext.ts

@@ -1,7 +1,7 @@
 import { createContext, useContext } from 'react'
 import { UseDisclosureReturn } from '@chakra-ui/react'
 
-type BuilderAndDesignContextProps = {
+export type BuilderAndDesignContextProps = {
   deleteFieldModalDisclosure: UseDisclosureReturn
 }
 

frontend/src/features/admin-form/create/common/CreatePageSidebarContext/CreatePageSidebarContext.tsx

@@ -35,7 +35,7 @@ export enum DrawerTabs {
   EndPage,
 }
 
-type CreatePageSidebarContextProps = {
+export type CreatePageSidebarContextProps = {
   activeTab: DrawerTabs | null
   pendingTab?: DrawerTabs | null
   movePendingToActiveTab: () => void

frontend/src/features/admin-form/settings/components/PaymentSettingsSection/PaymentsUnsupportedMsg.tsx

@@ -1,5 +1,8 @@
 import { Flex, Text } from '@chakra-ui/react'
 
+import { GUIDE_PAYMENTS } from '~constants/links'
+import Link from '~components/Link'
+
 import { SettingsUnsupportedSvgr } from '~features/admin-form/settings/svgrs/SettingsUnsupportedSvgr'
 
 export const PaymentsUnsupportedMsg = (): JSX.Element => {
@@ -10,7 +13,10 @@ export const PaymentsUnsupportedMsg = (): JSX.Element => {
       </Text>
       <Text textStyle="body-1" color="secondary.500" mb="2.5rem">
         Collect payments through FormSG via integration with Stripe. This
-        feature is only available in Storage Mode.
+        feature is only available in Storage Mode.&nbsp;
+        <Link isExternal href={GUIDE_PAYMENTS}>
+          Read more about payments
+        </Link>
       </Text>
       <SettingsUnsupportedSvgr />
     </Flex>

frontend/src/features/public-form/components/FormFields/PublicFormSubmitButton.tsx

@@ -42,8 +42,7 @@ export const PublicFormSubmitButton = ({
   onSubmit,
   trigger,
 }: PublicFormSubmitButtonProps): JSX.Element => {
-  const [isDuplicate, setDuplicate] = useState(false)
-  const [paymentId, setPaymentId] = useState('')
+  const [prevPaymentId, setPrevPaymentId] = useState('')
 
   const isMobile = useIsMobile()
   const { isSubmitting } = useFormState()
@@ -75,12 +74,9 @@ export const PublicFormSubmitButton = ({
           paymentEmailField.value,
           formId,
         )
-        if (payment) {
-          setDuplicate(true)
-          setPaymentId(payment._id)
-        }
+        setPrevPaymentId(payment._id)
       } catch (err) {
-        setDuplicate(false)
+        setPrevPaymentId('')
       }
       onOpen()
     }
@@ -93,13 +89,13 @@ export const PublicFormSubmitButton = ({
   return (
     <Stack px={{ base: '1rem', md: 0 }} pt="2.5rem" pb="4rem">
       {isOpen ? (
-        isDuplicate ? (
+        prevPaymentId ? (
           <DuplicatePaymentModal
             onSubmit={onSubmit}
             onClose={onClose}
             isSubmitting={isSubmitting}
             formId={formId}
-            paymentId={paymentId}
+            paymentId={prevPaymentId}
           />
         ) : (
           <FormPaymentModal

frontend/src/features/public-form/components/FormPaymentPage/FormPaymentService.ts

@@ -47,9 +47,9 @@ export const getPaymentInfo = async (paymentId: string) => {
 export const getPreviousPayment = async (
   email: string,
   formId: string,
-): Promise<PaymentDto | undefined> => {
+): Promise<PaymentDto> => {
   const emailData = { email }
-  return ApiService.post<PaymentDto | undefined>(
+  return ApiService.post<PaymentDto>(
     `${PAYMENTS_ENDPOINT}/${formId}/payments/previous/`,
     emailData,
   ).then(({ data }) => data)