feat: add some payment details to responses page (#5839)

* feat: add payment status * feat: use dollars for payment amount * feat: add created property to payments * fix: add conditional for paymentData * fix: use en-GB * fix: add timezone and submission time to indiv responses page * fix: revert payoutDate to use Date format * feat: make payment status uppercase
opengovsg · Feb 27, 2023 · e841303 · e841303
1 parent b7d0fef
commit e841303
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 8 deletions.
diff --git a/frontend/src/features/admin-form/responses/IndividualResponsePage/IndividualResponsePage.tsx b/frontend/src/features/admin-form/responses/IndividualResponsePage/IndividualResponsePage.tsx
@@ -186,34 +186,50 @@ export const IndividualResponsePage = (): JSX.Element => {
             </Text>
             {isPaymentLoading || isPaymentError ? (
               <Text>Payment was not enabled when this form was submitted</Text>
-            ) : (
+            ) : paymentData ? (
               <>
                 <Stack>
                   <Stack direction={{ base: 'column', md: 'row' }}>
                     <Text textStyle="subhead-1">Payment amount:</Text>
-                    <Text>{paymentData?.amount}</Text>
+                    <Text>
+                      S$
+                      {(paymentData.amount / 100).toLocaleString('en-GB', {
+                        minimumFractionDigits: 2,
+                        maximumFractionDigits: 2,
+                      })}
+                    </Text>
                   </Stack>
                   <Stack direction={{ base: 'column', md: 'row' }}>
                     <Text textStyle="subhead-1">Payment status:</Text>
-                    {/* TODO: Change this to actual status */}
-                    <Text>Success</Text>
+                    <Text>{paymentData.status.toUpperCase()}</Text>
                   </Stack>
                   <Stack direction={{ base: 'column', md: 'row' }}>
                     <Text textStyle="subhead-1">Payment date:</Text>
-                    {/* TODO: Change this to date of submission */}
-                    <Text>{new Date().toLocaleDateString('en-sg')}</Text>
+                    <Text>
+                      {new Intl.DateTimeFormat('en-GB', {
+                        year: 'numeric',
+                        month: 'numeric',
+                        day: 'numeric',
+                        hour: 'numeric',
+                        minute: 'numeric',
+                        second: 'numeric',
+                        timeZoneName: 'shortOffset',
+                      }).format(new Date(paymentData.created))}
+                    </Text>
                   </Stack>
                   <Stack direction={{ base: 'column', md: 'row' }}>
                     <Text textStyle="subhead-1">Payment intent ID:</Text>
-                    <Text>{paymentData?.paymentIntentId}</Text>
+                    <Text>{paymentData.paymentIntentId}</Text>
                   </Stack>
                   <Stack direction={{ base: 'column', md: 'row' }}>
                     <Text textStyle="subhead-1">Transaction fee:</Text>
-                    {/* TODO: Change this to actual transaction fee */}
+                    {/* TODO: Change this to actual transaction fee once application fee object has been added */}
                     <Text>$0.06</Text>
                   </Stack>
                 </Stack>
               </>
+            ) : (
+              <Text>Payment data not found</Text>
             )}
           </Stack>
         ) : null}

diff --git a/shared/types/payment.ts b/shared/types/payment.ts
@@ -1,4 +1,5 @@
 import Stripe from 'stripe'
+import { DateString } from './generic'
 
 export enum PaymentStatus {
   Failed = 'failed',
@@ -15,6 +16,7 @@ export type Payment = {
   chargeIdLatest: string
   payoutId: string
   payoutDate: Date
+  created: DateString
 }
 
 export type PaymentReceiptDto = {