add registering of payment products into form context

opengovsg · May 29, 2023 · 3952a80 · 3952a80
1 parent 128514f
commit 3952a80
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/...mponents/FormPaymentPage/stripe/components/PaymentItemDetails/PaymentItemDetailsBlock.tsx b/...mponents/FormPaymentPage/stripe/components/PaymentItemDetails/PaymentItemDetailsBlock.tsx
@@ -1,6 +1,8 @@
 import { useState } from 'react'
+import { useFormContext } from 'react-hook-form'
 import { Box, Flex, Stack, Text } from '@chakra-ui/react'
 
+import { PAYMENT_PRODUCT_FIELD_ID } from '~shared/constants'
 import {
   FormColorTheme,
   FormPaymentsField,
@@ -133,6 +135,8 @@ const PaymentItemBlockV2 = ({
   paymentDetails: FormPaymentsFieldV2
   colorTheme: FormColorTheme
 }) => {
+  const { register, setValue } = useFormContext()
+  register(PAYMENT_PRODUCT_FIELD_ID)
   const [productItems, updateProductItems] = useState<Array<ProductItem>>(
     () => {
       return paymentDetails.products.map((product) => ({
@@ -163,6 +167,7 @@ const PaymentItemBlockV2 = ({
       }
     })
     updateProductItems(updatedProductItems)
+    setValue(PAYMENT_PRODUCT_FIELD_ID, updatedProductItems)
   }
 
   return (

diff --git a/frontend/src/templates/Field/PaymentPreview/PaymentPreview.tsx b/frontend/src/templates/Field/PaymentPreview/PaymentPreview.tsx
@@ -6,6 +6,7 @@ import {
   EmailFieldBase,
   FormColorTheme,
   FormPaymentsField,
+  FormPaymentsFieldV2,
 } from '~shared/types'
 
 import { EmailFieldInput } from '~templates/Field/Email'
@@ -46,7 +47,9 @@ export const PaymentPreview = ({
       </Box>
       <Box mb="2rem">
         <PaymentItemDetailsBlock
-          paymentDetails={paymentDetails}
+          paymentDetails={
+            { ...paymentDetails, version: 2 } as FormPaymentsFieldV2
+          }
           colorTheme={colorTheme}
         />
       </Box>