fix: UI fixes for payment preview block in form builder and public form

opengovsg · May 11, 2023 · fe7a088 · fe7a088
1 parent 8cc18d8
commit fe7a088
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 60 deletions.
diff --git a/...src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/PaymentView.tsx b/...src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/PaymentView.tsx
@@ -83,13 +83,27 @@ export const PaymentView = () => {
   return (
     <Box w="100%" maxW="57rem" alignSelf="center" ref={paymentRef}>
       <FormProvider {...formMethods}>
-        <PaymentPreview
-          colorTheme={form?.startPage.colorTheme}
-          paymentDetails={paymentDetails}
-          isBuilder
-          isActive={isActive}
-          onClick={handlePaymentClick}
-        />
+        <Box mt="2.5rem" bg="white" py="2.5rem" px="1.5rem">
+          <Box
+            transition="background 0.2s ease"
+            _hover={{ bg: 'secondary.100', cursor: 'pointer' }}
+            borderRadius="4px"
+            _active={{
+              bg: 'secondary.100',
+              boxShadow: '0 0 0 2px var(--chakra-colors-primary-500)',
+            }}
+            data-active={isActive || undefined}
+            onClick={handlePaymentClick}
+          >
+            <Box p={{ base: '0.75rem', md: '1.5rem' }}>
+              <PaymentPreview
+                colorTheme={form?.startPage.colorTheme}
+                paymentDetails={paymentDetails}
+                isBuilder
+              />
+            </Box>
+          </Box>
+        </Box>
       </FormProvider>
     </Box>
   )

diff --git a/...der-and-design/BuilderAndDesignDrawer/FieldListDrawer/field-panels/PaymentsInputPanel.tsx b/...der-and-design/BuilderAndDesignDrawer/FieldListDrawer/field-panels/PaymentsInputPanel.tsx
@@ -226,7 +226,9 @@ export const PaymentInput = ({ isDisabled }: { isDisabled: boolean }) => {
         isDisabled={!paymentIsEnabled}
         isRequired
       >
-        <FormLabel isRequired>Payment amount</FormLabel>
+        <FormLabel isRequired description="Amount should include GST">
+          Payment amount
+        </FormLabel>
         <Controller
           name="display_amount"
           control={control}

diff --git a/frontend/src/features/public-form/components/FormFields/FormFields.tsx b/frontend/src/features/public-form/components/FormFields/FormFields.tsx
@@ -111,7 +111,7 @@ export const FormFields = ({
     <FormProvider {...formMethods}>
       <form noValidate>
         {!!formFields?.length && (
-          <Box bg={'white'} py="2.5rem" px={{ base: '1rem', md: '2.5rem' }}>
+          <Box bg="white" py="2.5rem" px={{ base: '1rem', md: '2.5rem' }}>
             <Stack spacing="2.25rem">
               {!isEmpty(fieldPrefillMap) && (
                 <InlineMessage variant="warning">
@@ -132,10 +132,17 @@ export const FormFields = ({
           </Box>
         )}
         {form?.responseMode === FormResponseMode.Encrypt && (
-          <PaymentPreview
-            colorTheme={colorTheme}
-            paymentDetails={form?.payments_field}
-          />
+          <Box
+            mt="2.5rem"
+            bg="white"
+            py="2.5rem"
+            px={{ base: '1rem', md: '2.5rem' }}
+          >
+            <PaymentPreview
+              colorTheme={colorTheme}
+              paymentDetails={form?.payments_field}
+            />
+          </Box>
         )}
         <PublicFormPaymentResumeModal />
         <PublicFormSubmitButton

diff --git a/frontend/src/templates/Field/FieldContainer.tsx b/frontend/src/templates/Field/FieldContainer.tsx
@@ -78,11 +78,13 @@ export const FieldContainer = ({
         >
           {schema.title}
         </FormLabel>
-        <Box hidden={!showMyInfoBadge} gridArea="myinfobadge">
-          <Badge variant="subtle" colorScheme="secondary">
-            MyInfo
-          </Badge>
-        </Box>
+        {showMyInfoBadge && (
+          <Box gridArea="myinfobadge">
+            <Badge variant="subtle" colorScheme="secondary">
+              MyInfo
+            </Badge>
+          </Box>
+        )}
       </Grid>
       {children}
       <FormErrorMessage>{error?.message}</FormErrorMessage>

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 } from '@chakra-ui/react'
+import { Box } from '@chakra-ui/react'
 
 import { PAYMENT_CONTACT_FIELD_ID } from '~shared/constants'
 import {
@@ -23,65 +23,43 @@ type PaymentPreviewProps = {
   colorTheme?: FormColorTheme
   paymentDetails?: FormPaymentsField
   isBuilder?: boolean
-  isActive?: boolean
-  onClick?: () => void
 }
 
 export const PaymentPreview = ({
   colorTheme = FormColorTheme.Blue,
   paymentDetails,
   isBuilder,
-  isActive,
-  onClick,
 }: PaymentPreviewProps) => {
   const sectionColor = useSectionColor(colorTheme)
   const emailFieldSchema: VerifiableEmailFieldSchema = {
     ...(getFieldCreationMeta(BasicField.Email) as EmailFieldBase),
     title: 'Email Address',
     _id: PAYMENT_CONTACT_FIELD_ID,
-    description: 'For delivery of invoice',
+    description: 'Proof of payment will be sent to this email',
     isVerifiable: true,
   }
 
   if (!paymentDetails || !paymentDetails.enabled) return null
 
   return (
-    <Stack px={{ base: '1rem', md: 0 }} pt="2.5rem">
-      <Box
-        bg={'white'}
-        py="2.5rem"
-        px={{ base: '1rem', md: '2.5rem' }}
-        {...(isBuilder && {
-          _hover: { bg: 'secondary.100', cursor: 'pointer' },
-          _active: {
-            bg: 'secondary.100',
-            boxShadow: '0 0 0 2px var(--chakra-colors-primary-500)',
-            borderRadius: '4px',
-          },
-          'data-active': isActive || undefined,
-          transition: 'ease',
-          transitionDuration: '0.2s',
-          onClick,
-        })}
-      >
-        <Box as="h2" mb="1rem" textStyle="h2" color={sectionColor}>
-          Payment
-        </Box>
-        <Box mb="2rem">
-          <PaymentItemDetailsBlock
-            paymentItemName={paymentDetails.description}
-            colorTheme={colorTheme}
-            paymentAmount={paymentDetails.amount_cents}
-          />
-        </Box>
-        {isBuilder ? (
-          <VerifiableFieldBuilderContainer schema={emailFieldSchema}>
-            <EmailFieldInput schema={emailFieldSchema} />
-          </VerifiableFieldBuilderContainer>
-        ) : (
-          <VerifiableEmailField schema={emailFieldSchema} />
-        )}
+    <>
+      <Box as="h2" mb="1rem" textStyle="h2" color={sectionColor}>
+        Payment
       </Box>
-    </Stack>
+      <Box mb="2rem">
+        <PaymentItemDetailsBlock
+          paymentItemName={paymentDetails.description}
+          colorTheme={colorTheme}
+          paymentAmount={paymentDetails.amount_cents}
+        />
+      </Box>
+      {isBuilder ? (
+        <VerifiableFieldBuilderContainer schema={emailFieldSchema}>
+          <EmailFieldInput schema={emailFieldSchema} />
+        </VerifiableFieldBuilderContainer>
+      ) : (
+        <VerifiableEmailField schema={emailFieldSchema} />
+      )}
+    </>
   )
 }