feat: add payment item details to payment page (#6235)

* feat: extract payment item details into PaymentItemDetailsBlock * feat: add PaymentItemDetailsBlock to PaymentBlock * ref: use shared component PaymentItemDetailsBlock * fix: remove mb from PaymentItemDetailsBlock
opengovsg · May 4, 2023 · 917fe25 · 917fe25
1 parent 178942c
commit 917fe25
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 27 deletions.
diff --git a/...nd/src/features/public-form/components/FormPaymentPage/stripe/components/PaymentBlock.tsx b/...nd/src/features/public-form/components/FormPaymentPage/stripe/components/PaymentBlock.tsx
@@ -19,13 +19,14 @@ import { loadStripe } from '@stripe/stripe-js'
 import { FormColorTheme, FormResponseMode } from '~shared/types/form'
 
 import { useBrowserStm } from '~hooks/payments'
-import { centsToDollars } from '~utils/payments'
 import Button from '~components/Button'
 
 import { usePublicFormContext } from '~features/public-form/PublicFormContext'
 
 import { FormPaymentPageProps } from '../../FormPaymentPage'
 
+import { PaymentItemDetailsBlock } from './PaymentItemDetailsBlock'
+
 // Make sure to call `loadStripe` outside of a component’s render to avoid
 // recreating the `Stripe` object on every render.
 
@@ -171,19 +172,15 @@ export const StripePaymentBlock = ({
           <VisuallyHidden aria-live="assertive">
             {submittedAriaText}
           </VisuallyHidden>
-          <Text textStyle="h3" textColor="primary.500">
+          <Text textStyle="h3" textColor="primary.500" mb="1rem">
             Payment
           </Text>
-          <Text textStyle="body-2" textColor="secondary.500">
-            This amount is inclusive of GST
-          </Text>
+          <PaymentItemDetailsBlock
+            paymentItemName={form.payments_field?.description}
+            colorTheme={colorTheme}
+            paymentAmount={form.payments_field?.amount_cents}
+          />
         </Box>
-        <Text textStyle="body-1" textColor="secondary.700">
-          Your credit card will be charged:{' '}
-          <Text as="span" fontWeight="bold">
-            S${centsToDollars(form.payments_field?.amount_cents || 0)}
-          </Text>
-        </Text>
         {paymentClientSecret && (
           <Elements
             stripe={stripePromise}

diff --git a/...ures/public-form/components/FormPaymentPage/stripe/components/PaymentItemDetailsBlock.tsx b/...ures/public-form/components/FormPaymentPage/stripe/components/PaymentItemDetailsBlock.tsx
@@ -0,0 +1,34 @@
+import { Box, Text } from '@chakra-ui/react'
+
+import { FormColorTheme } from '~shared/types'
+
+import { centsToDollars } from '~utils/payments'
+
+export interface PaymentItemDetailsBlockProps {
+  paymentItemName: string | undefined
+  colorTheme: FormColorTheme
+  paymentAmount: number | undefined
+}
+
+export const PaymentItemDetailsBlock = ({
+  paymentItemName,
+  colorTheme,
+  paymentAmount,
+}: PaymentItemDetailsBlockProps): JSX.Element => {
+  return (
+    <Box
+      backgroundColor={`theme-${colorTheme}.100`}
+      borderWidth="1px"
+      borderColor={`theme-${colorTheme}.300`}
+      borderRadius="4px"
+      p="0.7rem"
+    >
+      <Text textStyle="body-1" mb="0.5rem">
+        {paymentItemName}
+      </Text>
+      <Box as="h2" textStyle="h2">{`${centsToDollars(
+        paymentAmount ?? 0,
+      )} SGD`}</Box>
+    </Box>
+  )
+}
diff --git a/frontend/src/templates/Field/PaymentPreview/PaymentPreview.tsx b/frontend/src/templates/Field/PaymentPreview/PaymentPreview.tsx
@@ -1,4 +1,4 @@
-import { Box, Stack, Text } from '@chakra-ui/react'
+import { Box, Stack } from '@chakra-ui/react'
 
 import { PAYMENT_CONTACT_FIELD_ID } from '~shared/constants'
 import {
@@ -8,12 +8,12 @@ import {
   FormPaymentsField,
 } from '~shared/types'
 
-import { centsToDollars } from '~utils/payments'
 import { EmailFieldInput } from '~templates/Field/Email'
 import { useSectionColor } from '~templates/Field/Section/SectionField'
 
 import { VerifiableFieldBuilderContainer } from '~features/admin-form/create/builder-and-design/BuilderAndDesignContent/FieldRow/VerifiableFieldBuilderContainer'
 import { getFieldCreationMeta } from '~features/admin-form/create/builder-and-design/utils/fieldCreation'
+import { PaymentItemDetailsBlock } from '~features/public-form/components/FormPaymentPage/stripe/components/PaymentItemDetailsBlock'
 import {
   VerifiableEmailField,
   VerifiableEmailFieldSchema,
@@ -67,20 +67,12 @@ export const PaymentPreview = ({
         <Box as="h2" mb="1rem" textStyle="h2" color={sectionColor}>
           Payment
         </Box>
-        <Box
-          backgroundColor={`theme-${colorTheme}.100`}
-          borderWidth="1px"
-          borderColor={`theme-${colorTheme}.300`}
-          borderRadius="4px"
-          p="0.7rem"
-          mb="2rem"
-        >
-          <Text textStyle="body-1" mb="0.5rem">
-            {paymentDetails.description}
-          </Text>
-          <Box as="h2" textStyle="h2">{`${centsToDollars(
-            paymentDetails.amount_cents ?? 0,
-          )} SGD`}</Box>
+        <Box mb="1rem">
+          <PaymentItemDetailsBlock
+            paymentItemName={paymentDetails.description}
+            colorTheme={colorTheme}
+            paymentAmount={paymentDetails.amount_cents}
+          />
         </Box>
         {isBuilder ? (
           <VerifiableFieldBuilderContainer schema={emailFieldSchema}>