Merge pull request #6254 from opengovsg/release_v6.46.0

* fix: only return previous payment id (#6210) * fix: return payment id string instead of payment doc in controller * fix: update payment route method and comment * fix: update FE service * chore: fix name of test files * chore(deps-dev): bump @typescript-eslint/eslint-plugin from 5.59.0 to 5.59.1 in /shared (#6185) chore(deps-dev): bump @typescript-eslint/eslint-plugin in /shared Bumps [@typescript-eslint/eslint-plugin](https://github.com/typescript-eslint/typescript-eslint/tree/HEAD/packages/eslint-plugin) from 5.59.0 to 5.59.1. - [Release notes](https://github.com/typescript-eslint/typescript-eslint/releases) - [Changelog](https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/CHANGELOG.md) - [Commits](https://github.com/typescript-eslint/typescript-eslint/commits/v5.59.1/packages/eslint-plugin) --- updated-dependencies: - dependency-name: "@typescript-eslint/eslint-plugin" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * fix: add payout pending section to individual response page (#6214) * ci: use different payments secrets for separate staging environments (#6181) * ci: add new ENV_NAME to create .env file script * docs: update env vars used in aws systems manager * fix: update ENV_NAME conditional * ref: use ENV_SITE_NAME instead of ACTUAL_ENV_NAME * fix: rename variable * docs: add example for SSM_PREFIX * chore(deps-dev): bump @typescript-eslint/parser from 5.59.1 to 5.59.2 in /shared (#6225) chore(deps-dev): bump @typescript-eslint/parser in /shared Bumps [@typescript-eslint/parser](https://github.com/typescript-eslint/typescript-eslint/tree/HEAD/packages/parser) from 5.59.1 to 5.59.2. - [Release notes](https://github.com/typescript-eslint/typescript-eslint/releases) - [Changelog](https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/parser/CHANGELOG.md) - [Commits](https://github.com/typescript-eslint/typescript-eslint/commits/v5.59.2/packages/parser) --- updated-dependencies: - dependency-name: "@typescript-eslint/parser" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump @typescript-eslint/eslint-plugin from 5.59.1 to 5.59.2 in /shared (#6224) chore(deps-dev): bump @typescript-eslint/eslint-plugin in /shared Bumps [@typescript-eslint/eslint-plugin](https://github.com/typescript-eslint/typescript-eslint/tree/HEAD/packages/eslint-plugin) from 5.59.1 to 5.59.2. - [Release notes](https://github.com/typescript-eslint/typescript-eslint/releases) - [Changelog](https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/CHANGELOG.md) - [Commits](https://github.com/typescript-eslint/typescript-eslint/commits/v5.59.2/packages/eslint-plugin) --- updated-dependencies: - dependency-name: "@typescript-eslint/eslint-plugin" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * fix(deps): bump date-fns from 2.29.3 to 2.30.0 in /shared (#6220) Bumps [date-fns](https://github.com/date-fns/date-fns) from 2.29.3 to 2.30.0. - [Release notes](https://github.com/date-fns/date-fns/releases) - [Changelog](https://github.com/date-fns/date-fns/blob/v2.30.0/CHANGELOG.md) - [Commits](date-fns/date-fns@v2.29.3...v2.30.0) --- updated-dependencies: - dependency-name: date-fns dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * fix: move payment drawer to Payments tab within builder drawer (#6213) * fix: move payment drawer into builder drawer * fix: open payment drawer when payment preview box is clicked * chore: move FormPaymentPreview into PaymentPreview in frontend templates * chore: update width of payment preview box in builder * fix: add dirty modal functionality for payment editing holding state * fix: add check for email mode when rendering payment input drawer * fix: update payment modal to be fullpage on mobile (#6219) * Update FormPaymentModal to be fullpage on mobile * Update FormPaymentResumeModal and DuplicatePaymentModal to be fullpage on mobile * add new <ButtonGroup /> that supports full width display * refactor: remove redundant justifycontent styling * fix: missing paymentReceiptEmail for fetch fallback submissions (#6252) * chore: bump version to v6.46.0 --------- Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: Lin Huiqing <[email protected]> Co-authored-by: Foo Chi Fa <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Justyn Oh <[email protected]> Co-authored-by: Ken Lee Shu Ming <[email protected]> Co-authored-by: tshuli <[email protected]>
opengovsg · May 3, 2023 · 5d32818 · 5d32818
2 parents b59b2e4 + be1e65f
commit 5d32818
Show file tree

Hide file tree

Showing 44 changed files with 964 additions and 984 deletions.
diff --git a/.ebextensions/env-file-creation.config b/.ebextensions/env-file-creation.config
@@ -11,7 +11,8 @@ files:
         #!/bin/bash
         # Reach into the undocumented container config
         AWS_REGION='`{"Ref": "AWS::Region"}`'
-        ENV_NAME=$(/opt/elasticbeanstalk/bin/get-config environment -k SSM_PREFIX)
+        ENV_TYPE=$(/opt/elasticbeanstalk/bin/get-config environment -k SSM_PREFIX)
+        ENV_SITE_NAME=$(/opt/elasticbeanstalk/bin/get-config environment -k SSM_ENV_SITE_NAME)
         TARGET_DIR=/etc/formsg
 
         echo "Checking if ${TARGET_DIR} exists..."
@@ -25,18 +26,27 @@ files:
         else
             echo "Directory ${TARGET_DIR} already exists!"
         fi
-        echo "Creating config for ${ENV_NAME} in ${AWS_REGION}"
-        aws ssm get-parameter --name "${ENV_NAME}-general" --with-decryption --region $AWS_REGION | jq -r '.Parameter.Value' > $TARGET_DIR/.env
-        aws ssm get-parameter --name "${ENV_NAME}-captcha" --with-decryption --region $AWS_REGION | jq -r '.Parameter.Value' >> $TARGET_DIR/.env
-        aws ssm get-parameter --name "${ENV_NAME}-ga" --with-decryption --region $AWS_REGION | jq -r '.Parameter.Value' >> $TARGET_DIR/.env
-        aws ssm get-parameter --name "${ENV_NAME}-intranet" --with-decryption --region $AWS_REGION | jq -r '.Parameter.Value' >> $TARGET_DIR/.env
-        aws ssm get-parameter --name "${ENV_NAME}-sentry" --with-decryption --region $AWS_REGION | jq -r '.Parameter.Value' >> $TARGET_DIR/.env
-        aws ssm get-parameter --name "${ENV_NAME}-sms" --with-decryption --region $AWS_REGION | jq -r '.Parameter.Value' >> $TARGET_DIR/.env
-        aws ssm get-parameter --name "${ENV_NAME}-ndi" --with-decryption --region $AWS_REGION | jq -r '.Parameter.Value' >> $TARGET_DIR/.env
-        aws ssm get-parameter --name "${ENV_NAME}-sgid" --with-decryption --region $AWS_REGION | jq -r '.Parameter.Value' >> $TARGET_DIR/.env
-        aws ssm get-parameter --name "${ENV_NAME}-verified-fields" --with-decryption --region $AWS_REGION | jq -r '.Parameter.Value' >> $TARGET_DIR/.env
-        aws ssm get-parameter --name "${ENV_NAME}-webhook-verified-content" --with-decryption --region $AWS_REGION | jq -r '.Parameter.Value' >> $TARGET_DIR/.env
-        aws ssm get-parameter --name "${ENV_NAME}-payment" --with-decryption --region $AWS_REGION | jq -r '.Parameter.Value' >> $TARGET_DIR/.env
+
+        echo "Setting ENV_SITE_NAME config for payment credentials..."
+        if [ -z "${ENV_SITE_NAME}" ]; then
+            echo "setting ENV_SITE_NAME as ENV_TYPE (${ENV_TYPE})"
+            ENV_SITE_NAME=${ENV_TYPE}
+        else
+          echo "ENV_SITE_NAME already set as ${ENV_SITE_NAME} using SSM_ENV_SITE_NAME"
+        fi
+
+        echo "Creating config for ${ENV_SITE_NAME} in ${AWS_REGION}"
+        aws ssm get-parameter --name "${ENV_TYPE}-general" --with-decryption --region $AWS_REGION | jq -r '.Parameter.Value' > $TARGET_DIR/.env
+        aws ssm get-parameter --name "${ENV_TYPE}-captcha" --with-decryption --region $AWS_REGION | jq -r '.Parameter.Value' >> $TARGET_DIR/.env
+        aws ssm get-parameter --name "${ENV_TYPE}-ga" --with-decryption --region $AWS_REGION | jq -r '.Parameter.Value' >> $TARGET_DIR/.env
+        aws ssm get-parameter --name "${ENV_TYPE}-intranet" --with-decryption --region $AWS_REGION | jq -r '.Parameter.Value' >> $TARGET_DIR/.env
+        aws ssm get-parameter --name "${ENV_TYPE}-sentry" --with-decryption --region $AWS_REGION | jq -r '.Parameter.Value' >> $TARGET_DIR/.env
+        aws ssm get-parameter --name "${ENV_TYPE}-sms" --with-decryption --region $AWS_REGION | jq -r '.Parameter.Value' >> $TARGET_DIR/.env
+        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}-sgid" --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_SITE_NAME}-payment" --with-decryption --region $AWS_REGION | jq -r '.Parameter.Value' >> $TARGET_DIR/.env
 
 packages:
   yum: 

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,24 @@ 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.46.0](https://github.com/opengovsg/FormSG/compare/v6.45.0...v6.46.0)
+
+> 3 May 2023
+
+- fix: missing paymentReceiptEmail for fetch fallback submissions [`#6252`](https://github.com/opengovsg/FormSG/pull/6252)
+- fix: update payment modal to be fullpage on mobile [`#6219`](https://github.com/opengovsg/FormSG/pull/6219)
+- fix: move payment drawer to Payments tab within builder drawer [`#6213`](https://github.com/opengovsg/FormSG/pull/6213)
+- fix(deps): bump date-fns from 2.29.3 to 2.30.0 in /shared [`#6220`](https://github.com/opengovsg/FormSG/pull/6220)
+- chore(deps-dev): bump @typescript-eslint/eslint-plugin from 5.59.1 to 5.59.2 in /shared [`#6224`](https://github.com/opengovsg/FormSG/pull/6224)
+- chore(deps-dev): bump @typescript-eslint/parser from 5.59.1 to 5.59.2 in /shared [`#6225`](https://github.com/opengovsg/FormSG/pull/6225)
+- ci: use different payments secrets for separate staging environments [`#6181`](https://github.com/opengovsg/FormSG/pull/6181)
+- fix: add payout pending section to individual response page [`#6214`](https://github.com/opengovsg/FormSG/pull/6214)
+- chore(deps-dev): bump @typescript-eslint/eslint-plugin from 5.59.0 to 5.59.1 in /shared [`#6185`](https://github.com/opengovsg/FormSG/pull/6185)
+- fix: only return previous payment id [`#6210`](https://github.com/opengovsg/FormSG/pull/6210)
+- build: merge release v6.45.0 to develop [`#6205`](https://github.com/opengovsg/FormSG/pull/6205)
+- build: release v6.45.0 [`#6200`](https://github.com/opengovsg/FormSG/pull/6200)
+- chore: bump version to v6.46.0 [`3b5bba8`](https://github.com/opengovsg/FormSG/commit/3b5bba868cac6bf16bfb2512fb93d1dfbd15277d)
+
 #### [v6.45.0](https://github.com/opengovsg/FormSG/compare/v6.44.1...v6.45.0)
 
 > 26 April 2023
@@ -16,7 +34,8 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - 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)
+- chore: bump version to v6.45.0 [`336f4c8`](https://github.com/opengovsg/FormSG/commit/336f4c8ad072d3b582a646e21010eac4b5119ee7)
+- docs: fix CHANGELOG.md to have only 1 section for v6.45.0 [`4fe9d00`](https://github.com/opengovsg/FormSG/commit/4fe9d00234bed21f0943e26cc9d7c2db96afcdd3)
 
 #### [v6.44.1](https://github.com/opengovsg/FormSG/compare/v6.44.0...v6.44.1)
 
@@ -148,13 +167,13 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - fix: add staging-alt2 to deployment script [`#6019`](https://github.com/opengovsg/FormSG/pull/6019)
 - build: merge release 6.38.0 to develop [`#6017`](https://github.com/opengovsg/FormSG/pull/6017)
 - build: release v6.38.0 [`#6004`](https://github.com/opengovsg/FormSG/pull/6004)
+- feat: more logging on fetch fallback [`#6008`](https://github.com/opengovsg/FormSG/pull/6008)
 - chore: bump version to v6.39.0 [`081515a`](https://github.com/opengovsg/FormSG/commit/081515a2521c950dac7261f4b6c1b1b423c3af16)
 
 #### [v6.38.0](https://github.com/opengovsg/FormSG/compare/v6.37.0...v6.38.0)
 
-> 30 March 2023
+> 29 March 2023
 
-- feat: more logging on fetch fallback [`#6008`](https://github.com/opengovsg/FormSG/pull/6008)
 - feat: implement fetch API fallback for network error [`#5948`](https://github.com/opengovsg/FormSG/pull/5948)
 - fix: lowercase collaborator endpoint emails [`#5992`](https://github.com/opengovsg/FormSG/pull/5992)
 - chore(deps-dev): bump @typescript-eslint/parser from 5.56.0 to 5.57.0 in /shared [`#5995`](https://github.com/opengovsg/FormSG/pull/5995)
@@ -163,6 +182,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - fix(deps): bump type-fest from 3.7.0 to 3.7.1 in /shared [`#5991`](https://github.com/opengovsg/FormSG/pull/5991)
 - build: merge v6.37.0 into develop  [`#5989`](https://github.com/opengovsg/FormSG/pull/5989)
 - build: release v6.37.0 [`#5988`](https://github.com/opengovsg/FormSG/pull/5988)
+- chore: bump version to v6.38.0 [`d199213`](https://github.com/opengovsg/FormSG/commit/d19921314cae6b79920cf5ec3fb4f396794816d6)
 
 #### [v6.37.0](https://github.com/opengovsg/FormSG/compare/v6.36.0...v6.37.0)
 

diff --git a/docs/DEPLOYMENT_SETUP.md b/docs/DEPLOYMENT_SETUP.md
@@ -19,7 +19,7 @@ Infrastructure
 - AWS Elastic Beanstalk / EC2 for hosting and deployment
 - AWS Elastic File System for mounting files (i.e. SingPass/MyInfo private keys into the `/certs` directory)
 - AWS S3 for image and logo hosting, attachments for Storage Mode forms
-- AWS Service Manager - Parameter Store, for holding environment variable configuration
+- AWS Systems Manager - Parameter Store, for holding environment variable configuration
 
 DevOps
 
@@ -101,17 +101,20 @@ Store of AWS Service Manager. These groups have names formatted as `<environment
 
 The environment for each group is user-defined, and should be specified in the Elastic Beanstalk configuration
 as the environment variable `SSM_PREFIX`.
+The specific environment is user-defined, and should be specified in the Elastic Beanstalk configuration
+as the environment variable `SSM_ENV_SITE_NAME`. This variable is optional.
 
 The list of categories can be inferred by looking at the file `.ebextensions/env-file-creation.config`.
 
 ### Core Features
 
-#### AWS Service Manager
+#### AWS Systems Manager
 
 | Variable     | Description                                                                                                           |
 | :----------- | --------------------------------------------------------------------------------------------------------------------- |
-| `SSM_PREFIX` | String prefix (typically the environment name) for AWS SSM parameter names to create a .env file for FormSG.          |
-| `SECRET_ENV` | String (typically the environment name) to be used in building of AWS Secrets Manager keys in different environments. |
+| `SSM_PREFIX` | String prefix (typically the environment name) for AWS SSM parameter names to create a .env file for FormSG. (`staging`, `prod`)|
+| `SECRET_ENV` | String (typically the environment name) to be used in building of AWS Secrets Manager keys in different environments.|
+| `SSM_ENV_SITE_NAME` | String (the specific environment site name) to be used in building of AWS Secrets Manager keys in different environments. Optional. (`staging-alt`, `staging-alt2`)|
 
 #### App Config
 

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "form-frontend",
-  "version": "6.45.0",
+  "version": "6.46.0",
   "homepage": ".",
   "private": true,
   "dependencies": {

diff --git a/frontend/src/components/ButtonGroup/ButtonGroup.tsx b/frontend/src/components/ButtonGroup/ButtonGroup.tsx
@@ -0,0 +1,33 @@
+import {
+  ButtonGroup as CharkaButtonGroup,
+  ButtonGroupProps as ChakraButtonGroupProps,
+} from '@chakra-ui/react'
+
+export interface ButtonGroupProps extends ChakraButtonGroupProps {
+  /**
+   * If `true`, the button group will take up the full width of its container,
+   * and its children (<Button />) will be arranged in the reverse order
+   */
+  isFullWidth: boolean
+}
+
+export const ButtonGroup = ({
+  isFullWidth,
+  children,
+  ...rest
+}: ButtonGroupProps) => {
+  const buttonGrpResponsiveLayoutProps = isFullWidth
+    ? ({
+        flexDir: 'column-reverse',
+        w: '100%',
+        spacing: 0,
+        pt: '2rem',
+        rowGap: '0.75rem',
+      } as const)
+    : ({} as const)
+  return (
+    <CharkaButtonGroup {...buttonGrpResponsiveLayoutProps} {...rest}>
+      {children}
+    </CharkaButtonGroup>
+  )
+}
diff --git a/frontend/src/components/ButtonGroup/index.ts b/frontend/src/components/ButtonGroup/index.ts
@@ -0,0 +1 @@
+export { ButtonGroup as default } from './ButtonGroup'
diff --git a/frontend/src/features/admin-form/common/components/DirtyModal/DirtyModal.tsx b/frontend/src/features/admin-form/common/components/DirtyModal/DirtyModal.tsx
@@ -1,91 +1,84 @@
-import { useCallback, useMemo } from 'react'
-
 import { UnsavedChangesModal } from '~templates/NavigationPrompt'
 
+import { usePaymentStore } from '~features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/field-panels/usePaymentStore'
+import { FieldListTabIndex } from '~features/admin-form/create/builder-and-design/constants'
 import { useDesignStore } from '~features/admin-form/create/builder-and-design/useDesignStore'
 import { useFieldBuilderStore } from '~features/admin-form/create/builder-and-design/useFieldBuilderStore'
 import { useCreatePageSidebar } from '~features/admin-form/create/common'
 
 export const useDirtyModal = () => {
   const {
+    handleClose,
     handleBuilderClick,
     handleDesignClick,
     pendingTab,
     movePendingToActiveTab,
     clearPendingTab,
+    setFieldListTabIndex,
   } = useCreatePageSidebar()
 
   const { designHoldingState, designMoveFromHolding, designClearHoldingState } =
-    useDesignStore(
-      useCallback(
-        (state) => ({
-          designHoldingState: state.holdingState,
-          designMoveFromHolding: state.moveFromHolding,
-          designClearHoldingState: state.clearHoldingState,
-        }),
-        [],
-      ),
-    )
+    useDesignStore((state) => ({
+      designHoldingState: state.holdingState,
+      designMoveFromHolding: state.moveFromHolding,
+      designClearHoldingState: state.clearHoldingState,
+    }))
+
+  const {
+    paymentHoldingState,
+    paymentMoveFromHolding,
+    paymentClearHoldingState,
+  } = usePaymentStore((state) => ({
+    paymentHoldingState: state.holdingState,
+    paymentMoveFromHolding: state.moveFromHolding,
+    paymentClearHoldingState: state.clearHoldingState,
+  }))
 
   const {
     builderHoldingStateData,
     builderClearHoldingStateData,
     builderMoveFromHolding,
-  } = useFieldBuilderStore(
-    useCallback((state) => {
-      return {
-        builderHoldingStateData: state.holdingStateData,
-        builderClearHoldingStateData: state.clearHoldingStateData,
-        builderMoveFromHolding: state.moveFromHolding,
-      }
-    }, []),
-  )
+  } = useFieldBuilderStore((state) => ({
+    builderHoldingStateData: state.holdingStateData,
+    builderClearHoldingStateData: state.clearHoldingStateData,
+    builderMoveFromHolding: state.moveFromHolding,
+  }))
 
-  const handleConfirmNavigate = useCallback(() => {
+  const handleConfirmNavigate = () => {
     if (builderHoldingStateData !== null) {
       builderMoveFromHolding()
       handleBuilderClick(false)
     } else if (designHoldingState !== null) {
       designMoveFromHolding()
       handleDesignClick(false)
+    } else if (paymentHoldingState !== null) {
+      paymentMoveFromHolding()
+      // Simulate closing the builder drawer first to ensure that the drawer state resets
+      handleClose(false)
+      handleBuilderClick(false)
+      setFieldListTabIndex(FieldListTabIndex.Payments)
     } else if (pendingTab !== undefined) {
       movePendingToActiveTab()
     }
-  }, [
-    builderHoldingStateData,
-    builderMoveFromHolding,
-    designHoldingState,
-    designMoveFromHolding,
-    handleBuilderClick,
-    handleDesignClick,
-    movePendingToActiveTab,
-    pendingTab,
-  ])
+  }
 
-  const handleCancelNavigate = useCallback(() => {
+  const handleCancelNavigate = () => {
     if (builderHoldingStateData !== null) {
       builderClearHoldingStateData()
     } else if (designHoldingState !== null) {
       designClearHoldingState()
+    } else if (paymentHoldingState !== null) {
+      paymentClearHoldingState()
     } else if (pendingTab !== undefined) {
       clearPendingTab()
     }
-  }, [
-    builderClearHoldingStateData,
-    builderHoldingStateData,
-    clearPendingTab,
-    designClearHoldingState,
-    designHoldingState,
-    pendingTab,
-  ])
+  }
 
-  const isOpen = useMemo(() => {
-    return (
-      builderHoldingStateData !== null ||
-      designHoldingState !== null ||
-      pendingTab !== undefined
-    )
-  }, [builderHoldingStateData, designHoldingState, pendingTab])
+  const isOpen =
+    builderHoldingStateData !== null ||
+    designHoldingState !== null ||
+    paymentHoldingState !== null ||
+    pendingTab !== undefined
 
   return {
     isOpen,

diff --git a/...min-form/create/builder-and-design/BuilderAndDesignContent/FieldRow/FieldRowContainer.tsx b/...min-form/create/builder-and-design/BuilderAndDesignContent/FieldRow/FieldRowContainer.tsx
@@ -56,12 +56,16 @@ import {
 } from '~features/myinfo/utils'
 
 import { BuilderAndDesignContextProps } from '../../BuilderAndDesignContext'
+import {
+  setToInactiveSelector as setPaymentToInactiveSelector,
+  usePaymentStore,
+} from '../../BuilderAndDesignDrawer/FieldListDrawer/field-panels/usePaymentStore'
 import { useDeleteFormField } from '../../mutations/useDeleteFormField'
 import { useDuplicateFormField } from '../../mutations/useDuplicateFormField'
 import { useCreateTabForm } from '../../useCreateTabForm'
 import {
   DesignState,
-  setStateSelector,
+  setStateSelector as setDesignStateSelector,
   useDesignStore,
 } from '../../useDesignStore'
 import { isDirtySelector, useDirtyFieldStore } from '../../useDirtyFieldStore'
@@ -107,8 +111,10 @@ const FieldRowContainer = ({
   const isDirty = useDirtyFieldStore(isDirtySelector)
   const toast = useToast({ status: 'danger', isClosable: true })
 
-  const setDesignState = useDesignStore(setStateSelector)
-
+  const setDesignState = useDesignStore(setDesignStateSelector)
+  const setPaymentStateToInactive = usePaymentStore(
+    setPaymentToInactiveSelector,
+  )
   const { duplicateFieldMutation } = useDuplicateFormField()
   const { deleteFieldMutation } = useDeleteFormField()
 
@@ -157,17 +163,20 @@ const FieldRowContainer = ({
     }
     updateEditState(field)
     setDesignState(DesignState.Inactive)
+    setPaymentStateToInactive()
+
     if (!isMobile) {
       // Do not open builder if in mobile so user can view active state without
       // drawer blocking the view.
       handleBuilderClick(false)
     }
   }, [
-    isDirty,
     isActive,
+    isDirty,
     updateEditState,
     field,
     setDesignState,
+    setPaymentStateToInactive,
     isMobile,
     handleBuilderClick,
   ])
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { ButtonGroup as default } from './ButtonGroup'