feat: payment by products (#6301)

* wip * refactor: move admin payments components to PaymentPanel folder * add AddProductModal and basic item creation flow * add BE payments product * wip * refactor admin payment products input * fix version not passed to BE * add _id to be exposed in product model, refactor product types * wip add responder payment * feat: add price calculation * add clear variant for SingleSelect * add ProductItem Quantity display * add full width variant for checkbox * refactor typing, add submit action to pass payment products * add missing field id constant * add registering of payment products into form context * refactor: extract stripe events fn to stripe.events.controller * refactor: break submission controller into its payment/non-payment creation handlers * refactor: extract checks into ensure pipelines * fix: remove duplicate PaymentItemDetailBlock * fix: next() to be awaited * refactor: extract price calculation to shared, rename ensuresIsX to ensureX * fix: hide payment items block for v2, update preview to render using version specific * refactor: submitEncryptModeForm * refactor: FieldListDrawer with mapped header+component * feat: add edit product * feat: changed ProductModal min/max qty input to hide when multiqty is disabled * fix: clicking PaymentPreview should redirect to their respective version of payment tab * fix: paymentpreview to update with latest products when paymentstore changes * feat: add product deletion flow for admin * fix: Payment v2 description, refactor PaymetnItemDetailsBlock * refactor: cleanup #1 * fix: edit mode multi_qty to reference incoming value, fix qty range generation * fix: merge conflicts, to render-able state * fix: be to compile-able state * chore: revert unintended changes * wip * fix: remove unnecessary payment checks in handle update payment product * fix(fe): adding products triggering local data replacement * feat: support non-multi selection * fix: quantity selection does not auto select item * chore: remove unused comments * feat: add full width variant on radio component * chore: camelcase checkbox component theme * feat: store purchased products into payment doc * chore: remove unused imports * fix: payment product quantity converted to boolean instead of number * fix: test cases failing due to incorrect object comparison * fix: duplicated code from incorrect merge resolution * chore: update payment page width to match design * feat: expose products to Payment Page * refactor: payment UI * feat: split payments summaries for fixed, variable, and products * feat: add full payment summary for products * fix: typing issues * feat: itemized invoice for payment by products (#6574) * fix: test cases failing due to incorrect object comparison * fix: add products button not disabled when panel is disabled * fix: products payment not showing title on paymentpreview * feat: add product qty validation * fix: remove stray test capture group * feat: show error message if no products are selected (#6585) * feat: add error message if no product is selected * fix: change copy * feat: set default quantity as min qty * feat: use isProductSelected function to check if at least 1 product is selected * fix: use Array.prototype.some() * feat: hide fixed payment type if form is not a fixed payment * fix: addproduct modal not displaying errors * chore: send log all payments info instead of only products * chore: remove unused files * fix: add product not validating if max qty-payment amount exceed global limits * chore: use divider instead of hr * chore: add strong joi validator * chore: update copy for payment qty-payment amount exceed * refactor: change function into class to better express side-effects * refactor: rename productitemschema to productschema * feat: add joi validation for handleupdatepaymentsproduct * chore: fix typo, remove unused comments nits * feat: add payment summary to thank you page (#6591) * feat: add CompletedPaymentSummary * feat: add payment_fields_snapshot to payment model * feat: show products and other payment metadata in thank you page * feat: db migration script for payment_fields_snapshot * fix: rename ProductItemSchema to ProductSchema * fix: use form payment_fields as source of truth in payments model * ref: refactor getProductNames * ref: remove unused code * test: update FormPaymentPage.stories * refactor: paymentproducts to share same joi validator, add validator to encrypt-submission * chore: copy changes, tweak order of payment type dropdown, fix padding when payment is not connected * chore: remove title for payments by product type * feat: add payment preview placeholder when admin has no items * chore: products description to be optional, ui changes on payment preview product item * feat: auto detect disabling multi product toggle * chore: update copy for payment summary * fix: unstuck divider with productitem on paymentpreview * chore: product modal to calculate qty, ui updates * fix: update text colors * fix: expand button to full width for mobile * fix: adjust spacing before recaptcha container * fix: new payment form not defaulting to products * fix: product payment type should not require name field validated * fix: remove mention of gst on product modal if form is not gst enabled * fix: update test cases to reflect new defaults * fix: payment date race condition (#6619) fix: move payment date to be returned together when receipt url exists --------- Co-authored-by: wanlingt <56983748+wanlingt@users.noreply.github.com> Co-authored-by: wanlingt <wanling@open.gov.sg>
opengovsg · Aug 15, 2023 · e5737f6 · e5737f6
1 parent 9ef4334
commit e5737f6
Show file tree

Hide file tree

Showing 74 changed files with 2,945 additions and 848 deletions.
diff --git a/frontend/src/components/Dropdown/SingleSelect/SingleSelectProvider.tsx b/frontend/src/components/Dropdown/SingleSelect/SingleSelectProvider.tsx
@@ -38,6 +38,8 @@ export interface SingleSelectProviderProps<
   children: React.ReactNode
   /** Color scheme of component */
   colorScheme?: ThemeColorScheme
+  /** Variant of component */
+  variant?: 'clear'
   fullWidth?: boolean
 }
 export const SingleSelectProvider = ({
@@ -60,6 +62,7 @@ export const SingleSelectProvider = ({
   inputAria,
   colorScheme,
   comboboxProps = {},
+  variant,
   fullWidth = false,
 }: SingleSelectProviderProps): JSX.Element => {
   const { items, getItemByValue } = useItems({ rawItems })
@@ -222,6 +225,7 @@ export const SingleSelectProvider = ({
   const styles = useMultiStyleConfig('SingleSelect', {
     isClearable,
     colorScheme,
+    variant,
   })
 
   const virtualListHeight = useMemo(() => {

diff --git a/frontend/src/components/Dropdown/components/SelectCombobox/SelectCombobox.tsx b/frontend/src/components/Dropdown/components/SelectCombobox/SelectCombobox.tsx
@@ -64,6 +64,7 @@ export const SelectCombobox = forwardRef<HTMLInputElement>(
             align="center"
             zIndex={2}
             aria-hidden
+            sx={styles.inputStack}
           >
             {selectedItemMeta.icon ? (
               <Icon

diff --git a/frontend/src/features/admin-form/common/AdminFormPageService.ts b/frontend/src/features/admin-form/common/AdminFormPageService.ts
@@ -1,5 +1,6 @@
 import {
   EndPageUpdateDto,
+  PaymentsProductUpdateDto,
   PaymentsUpdateDto,
   StartPageUpdateDto,
 } from '~shared/types'
@@ -58,3 +59,20 @@ export const updateFormPayments = async (
     newPayments,
   ).then(({ data }) => data)
 }
+
+/**
+ * Updates the payments for the given form referenced by its id
+ *
+ * @param formId the id of the form to update payments for
+ * @param newPayments the new payment to replace with
+ * @returns the updated payment on success
+ */
+export const updateFormPaymentProducts = async (
+  formId: string,
+  products: PaymentsProductUpdateDto,
+): Promise<PaymentsProductUpdateDto> => {
+  return ApiService.put<PaymentsProductUpdateDto>(
+    `${ADMIN_FORM_ENDPOINT}/${formId}/payments/products`,
+    products,
+  ).then(({ data }) => data)
+}
diff --git a/frontend/src/features/admin-form/common/mutations.ts b/frontend/src/features/admin-form/common/mutations.ts
@@ -8,6 +8,7 @@ import {
   EndPageUpdateDto,
   FormPermission,
   FormPermissionsDto,
+  PaymentsProductUpdateDto,
   PaymentsUpdateDto,
   StartPageUpdateDto,
 } from '~shared/types/form/form'
@@ -35,6 +36,7 @@ import { useCollaboratorWizard } from './components/CollaboratorModal/Collaborat
 import { permissionsToRole } from './components/CollaboratorModal/utils'
 import {
   updateFormEndPage,
+  updateFormPaymentProducts,
   updateFormPayments,
   updateFormStartPage,
 } from './AdminFormPageService'
@@ -422,10 +424,38 @@ export const useMutateFormPage = () => {
     },
   )
 
+  const paymentsProductMutation = useMutation(
+    (products: PaymentsProductUpdateDto) =>
+      updateFormPaymentProducts(formId, products),
+    {
+      onSuccess: (newData) => {
+        toast.closeAll()
+        queryClient.setQueryData<AdminStorageFormDto | undefined>(
+          adminFormKeys.products(formId, newData),
+          (oldData) =>
+            oldData
+              ? {
+                  ...oldData,
+                  payments_field: {
+                    ...oldData.payments_field,
+                    products: newData,
+                  },
+                }
+              : undefined,
+        )
+        toast({
+          description: 'Payments product was updated.',
+        })
+      },
+      onError: handleError,
+    },
+  )
+
   return {
     startPageMutation,
     endPageMutation,
     paymentsMutation,
+    paymentsProductMutation,
   }
 }
 

diff --git a/frontend/src/features/admin-form/common/queries.ts b/frontend/src/features/admin-form/common/queries.ts
@@ -2,6 +2,7 @@ import { useMemo } from 'react'
 import { useQuery, UseQueryOptions, UseQueryResult } from 'react-query'
 import { useParams } from 'react-router-dom'
 
+import { Product } from '~shared/types'
 import { AdminFormDto, PreviewFormViewDto } from '~shared/types/form/form'
 
 import { ApiError } from '~typings/core'
@@ -29,6 +30,8 @@ export const adminFormKeys = {
     [...adminFormKeys.id(id), 'previewForm'] as const,
   viewFormTemplate: (id: string) =>
     [...adminFormKeys.id(id), 'viewFormTemplate'] as const,
+  products: (id: string, products: Product[]) =>
+    [...adminFormKeys.id(id), 'products', ...products] as const,
 }
 
 /**

diff --git a/...form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/FieldListDrawer.tsx b/...form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/FieldListDrawer.tsx
@@ -19,6 +19,7 @@ import { useUser } from '~features/user/queries'
 
 import { useCreateTabForm } from '../../../builder-and-design/useCreateTabForm'
 import { CreatePageDrawerCloseButton } from '../../../common'
+import { FieldListTabIndex } from '../../constants'
 
 import {
   BasicFieldPanel,
@@ -36,6 +37,30 @@ export const FieldListDrawer = (): JSX.Element => {
   const displayPayments =
     user?.betaFlags?.payment || flags?.has(featureFlags.payment)
 
+  const tabsDataList = [
+    {
+      header: 'Basic',
+      component: BasicFieldPanel,
+      isHidden: false,
+      isDisabled: isLoading,
+      key: FieldListTabIndex.Basic,
+    },
+    {
+      header: 'MyInfo',
+      component: MyInfoFieldPanel,
+      isHidden: false,
+      isDisabled: isLoading,
+      key: FieldListTabIndex.MyInfo,
+    },
+    {
+      header: 'Payments',
+      component: PaymentsInputPanel,
+      isHidden: !displayPayments,
+      isDisabled: isLoading,
+      key: FieldListTabIndex.Payments,
+    },
+  ].filter((tab) => !tab.isHidden)
+
   return (
     <Tabs
       pos="relative"
@@ -54,24 +79,20 @@ export const FieldListDrawer = (): JSX.Element => {
           <CreatePageDrawerCloseButton />
         </Flex>
         <TabList mx="-0.25rem" w="100%">
-          <Tab isDisabled={isLoading}>Basic</Tab>
-          <Tab isDisabled={isLoading}>MyInfo</Tab>
-          {displayPayments && <Tab isDisabled={isLoading}>Payments</Tab>}
+          {tabsDataList.map((tab) => (
+            <Tab key={tab.key} isDisabled={tab.isDisabled}>
+              {tab.header}
+            </Tab>
+          ))}
         </TabList>
         <Divider w="auto" mx="-1.5rem" />
       </Box>
       <TabPanels pb="1rem" flex={1} overflowY="auto">
-        <TabPanel>
-          <BasicFieldPanel />
-        </TabPanel>
-        <TabPanel>
-          <MyInfoFieldPanel />
-        </TabPanel>
-        {displayPayments && (
-          <TabPanel>
-            <PaymentsInputPanel />
+        {tabsDataList.map((tab) => (
+          <TabPanel key={tab.key}>
+            <tab.component />
           </TabPanel>
-        )}
+        ))}
       </TabPanels>
     </Tabs>
   )