feat: reavamp of payment details thank you page

opengovsg · Dec 12, 2023 · f0be292 · f0be292
1 parent c1571ed
commit f0be292
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 61 deletions.
diff --git a/frontend/src/features/admin-form/create/end-page/EndPageContent.tsx b/frontend/src/features/admin-form/create/end-page/EndPageContent.tsx
@@ -42,7 +42,7 @@ export const EndPageContent = (): JSX.Element => {
     showDefaultLogoIfNoLogo: true,
   })
 
-  const backgroundColor = useBgColor({ colorTheme })
+  // const backgroundColor = useBgColor({ colorTheme })
 
   return (
     <Flex
@@ -55,7 +55,7 @@ export const EndPageContent = (): JSX.Element => {
       justify="center"
       overflow="auto"
     >
-      <Stack w="100%" h="fit-content" bg="white">
+      <Stack w="100%" h="fit-content" bg="primary.100">
         <FormBannerLogo
           isLoading={isLoading}
           {...formBannerLogoProps}
@@ -66,25 +66,27 @@ export const EndPageContent = (): JSX.Element => {
               : undefined
           }
         />
-        <Flex backgroundColor={backgroundColor} justifyContent="center">
+        <Flex backgroundColor="primary.100" justifyContent="center">
           <ThankYouSvgr h="100%" pt="2.5rem" />
         </Flex>
 
-        <Box
-          py={{ base: '1.5rem', md: '3rem' }}
-          px={{ base: '1.5rem', md: '4rem' }}
-          w="100%"
-        >
-          <EndPageBlock
-            formTitle={form?.title}
-            endPage={endPage ?? { title: '', buttonText: '' }}
-            submissionData={{
-              id: form?._id ?? 'Submission ID',
-              timestamp: Date.now(),
-            }}
-            colorTheme={colorTheme ?? FormColorTheme.Blue}
-          />
-        </Box>
+        <Stack>
+          <Box
+            py={{ base: '1.5rem', md: '3rem' }}
+            px={{ base: '1.5rem', md: '4rem' }}
+            backgroundColor="white"
+          >
+            <EndPageBlock
+              formTitle={form?.title}
+              endPage={endPage ?? { title: '', buttonText: '' }}
+              submissionData={{
+                id: form?._id ?? 'Submission ID',
+                timestamp: Date.now(),
+              }}
+              colorTheme={colorTheme ?? FormColorTheme.Blue}
+            />
+          </Box>
+        </Stack>
       </Stack>
     </Flex>
   )

diff --git a/frontend/src/features/admin-form/create/end-page/EndPageDrawer.tsx b/frontend/src/features/admin-form/create/end-page/EndPageDrawer.tsx
@@ -78,7 +78,7 @@ export const EndPageInput = ({
   const { handleClose } = useCreatePageSidebar()
 
   const paymentDefaults = {
-    title: 'Your payment has been made successfully.',
+    title: 'Thank you, your payment has been made successfully.',
     paragraph: 'Your form has been submitted and payment has been made.',
     buttonLink: 'Default proof of payment link',
     buttonText: 'Save proof of payment',

diff --git a/frontend/src/features/public-form/components/FormEndPage/components/EndPageBlock.tsx b/frontend/src/features/public-form/components/FormEndPage/components/EndPageBlock.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useRef } from 'react'
-import { Box, Flex, Text, VisuallyHidden } from '@chakra-ui/react'
+import { Box, Flex, Stack, Text, VisuallyHidden } from '@chakra-ui/react'
 import { format } from 'date-fns'
 
 import { FormColorTheme, FormDto } from '~shared/types/form'
@@ -54,7 +54,7 @@ export const EndPageBlock = ({
   }, [formTitle])
 
   return (
-    <Flex flexDir="column">
+    <>
       <Box ref={focusRef}>
         <VisuallyHidden aria-live="assertive">
           {submittedAriaText}
@@ -70,24 +70,26 @@ export const EndPageBlock = ({
           </Box>
         ) : null}
       </Box>
-      <Box mt="2rem">
-        <Text textColor="secondary.300" textStyle="caption-2">
-          Response ID: {submissionData.id}
-        </Text>
-        <Text mt="0.25rem" textColor="secondary.300" textStyle="caption-2">
-          {submissionTimestamp}
-        </Text>
-      </Box>
-      <Box mt="2.25rem">
-        <Button
-          as="a"
-          href={endPage.buttonLink || window.location.href}
-          variant="solid"
-          colorScheme={`theme-${colorTheme}`}
-        >
-          {endPage.buttonText || 'Submit another response'}
-        </Button>
+      <Box mt="1.5rem">
+        <Box>
+          <Text textColor="secondary.400" textStyle="caption-2">
+            {submissionTimestamp}
+          </Text>
+          <Text mt="0.25rem" textColor="secondary.300" textStyle="caption-2">
+            Response ID: {submissionData.id}
+          </Text>
+        </Box>
+        <Box mt="2.25rem">
+          <Button
+            as="a"
+            href={endPage.buttonLink || window.location.href}
+            variant="solid"
+            colorScheme={`theme-${colorTheme}`}
+          >
+            {endPage.buttonText || 'Submit another response'}
+          </Button>
+        </Box>
       </Box>
-    </Flex>
+    </>
   )
 }
diff --git a/frontend/src/features/public-form/components/FormPaymentPage/components/PaymentStack.tsx b/frontend/src/features/public-form/components/FormPaymentPage/components/PaymentStack.tsx
@@ -9,7 +9,7 @@ export const PaymentStack = ({ children }: { children: React.ReactNode }) => (
     spacing={{ base: '1.5rem', md: '2.25rem' }}
     py={{ base: '1.5rem', md: '3rem' }}
     px={{ base: '1.5rem', md: '4rem' }}
-    bg="primary.100"
+    bg="grey.100"
     w="100%"
     divider={<Divider />}
   >

diff --git a/...end/src/features/public-form/components/FormPaymentPage/stripe/StripeReceiptContainer.tsx b/...end/src/features/public-form/components/FormPaymentPage/stripe/StripeReceiptContainer.tsx
@@ -1,5 +1,5 @@
 import { useCallback, useState } from 'react'
-import { Stack, useToast } from '@chakra-ui/react'
+import { Box, Stack, useToast } from '@chakra-ui/react'
 
 import { FormPaymentsField, ProductItem } from '~shared/types'
 
@@ -74,7 +74,7 @@ export const StripeReceiptContainer = ({
     /**
      * PaymentStack is explictly added in this component due to https://github.com/chakra-ui/chakra-ui/issues/6757
      */
-    <Stack spacing="1.5rem">
+    <Stack>
       <PaymentStack>
         <DownloadReceiptBlock
           formId={formId}
@@ -87,11 +87,15 @@ export const StripeReceiptContainer = ({
           paymentDate={paymentReceiptStatus.paymentDate}
         />
       </PaymentStack>
-      {/* <PaymentStack>
-        {!isFeedbackSubmitted && (
-          <FeedbackBlock onSubmit={handleSubmitFeedback} />
-        )}
-      </PaymentStack> */}
+      {
+        <PaymentStack>
+          {!isFeedbackSubmitted && (
+            <Box backgroundColor="white" p="2rem">
+              <FeedbackBlock onSubmit={handleSubmitFeedback} />
+            </Box>
+          )}
+        </PaymentStack>
+      }
     </Stack>
   )
 }
diff --git a/...eatures/public-form/components/FormPaymentPage/stripe/components/DownloadReceiptBlock.tsx b/...eatures/public-form/components/FormPaymentPage/stripe/components/DownloadReceiptBlock.tsx
@@ -37,7 +37,7 @@ const PaymentDetailsRow = ({
   return (
     <Stack
       direction={{ base: 'column', md: 'row' }}
-      spacing={{ base: 0, md: '0.5rem' }}
+      spacing={{ base: 0, md: '1.5rem' }}
     >
       <Text textStyle="body-1" width="6.5rem" color="secondary.400">
         {title}
@@ -77,13 +77,6 @@ const PaymentSummaryRow = ({
   )
 }
 
-// Extract selected product names for payment by products
-// const getProductNames = (product: ProductItem[]): string[] => {
-//   return product
-//     .filter((product) => product.selected)
-//     .map((product) => `${product.data.name} x ${product.quantity}`)
-// }
-
 const LineItem = ({
   productItem,
 }: {
@@ -122,8 +115,6 @@ export const DownloadReceiptBlock = ({
         : 'Payment date not found',
     [paymentDate],
   )
-  // const productName =
-  //   paymentType === PaymentType.Products ? getProductNames(products) : name
 
   const handleInvoiceClick = () => {
     toast({
@@ -136,7 +127,7 @@ export const DownloadReceiptBlock = ({
       <Box bgColor="white" p="2rem">
         <Stack tabIndex={-1} spacing="0.75rem">
           <Text textStyle="h2" color="secondary.500">
-            Your payment has been made successfully.
+            Thank you, your payment has been made successfully.
           </Text>
           <Text textStyle="subhead-1" color="secondary.500">
             This is a message that the admins can customise on their thank you
@@ -150,13 +141,13 @@ export const DownloadReceiptBlock = ({
       </Box>
       <Box mt="2rem" px="1rem" py="2rem" bgColor="white">
         <Stack>
-          <Stack mb="1.5rem">
+          <Box mb="1.5rem" px="1.5rem">
             <Text textStyle="h2" mb="0.5rem" color="secondary.500">
               Payment details
             </Text>
-            <PaymentDetailsRow title="Payment Date" input={paymentTimestamp} />
+            <PaymentDetailsRow title="Payment date" input={paymentTimestamp} />
             <PaymentDetailsRow title="Response ID" input={submissionId} />
-          </Stack>
+          </Box>
           <Box
             bgColor="primary.100"
             flexDir="row"