From dbae29d9a592e2ee5b19ccfdf77e8f654ee88b13 Mon Sep 17 00:00:00 2001
From: Ken <ken@open.gov.sg>
Date: Fri, 1 Mar 2024 19:03:14 +0800
Subject: [PATCH 1/2] feat: update copy, copy btn

---
 .../stripe/StripePaymentElement.tsx           | 26 ++++++++++++++-----
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/frontend/src/features/public-form/components/FormPaymentPage/stripe/StripePaymentElement.tsx b/frontend/src/features/public-form/components/FormPaymentPage/stripe/StripePaymentElement.tsx
index 8f5b491b8e..8ae786b8df 100644
--- a/frontend/src/features/public-form/components/FormPaymentPage/stripe/StripePaymentElement.tsx
+++ b/frontend/src/features/public-form/components/FormPaymentPage/stripe/StripePaymentElement.tsx
@@ -1,6 +1,6 @@
 import { useMemo, useState } from 'react'
 import { useParams } from 'react-router-dom'
-import { Box, Center, Container } from '@chakra-ui/react'
+import { Box, Center, Container, Flex, Stack, Text } from '@chakra-ui/react'
 import { Elements, useStripe } from '@stripe/react-stripe-js'
 import { loadStripe } from '@stripe/stripe-js'
 
@@ -11,6 +11,7 @@ import {
 } from '~shared/types'
 
 import InlineMessage from '~components/InlineMessage'
+import { CopyButton } from '~templates/CopyButton'
 
 import { useEnv } from '~features/env/queries'
 
@@ -31,7 +32,7 @@ import { getPaymentViewStates, PaymentViewStates } from './utils'
 const PaymentFormWrapper = ({ children }: { children: React.ReactNode }) => {
   return (
     <PublicFormWrapper>
-      <Box
+      <Flex
         pt={{ base: '2.5rem', md: '0' }}
         mb={{ base: '1.5rem', md: '0' }}
         w="100%"
@@ -39,7 +40,7 @@ const PaymentFormWrapper = ({ children }: { children: React.ReactNode }) => {
         <Container w="100%" maxW="57rem" p={0}>
           {children}
         </Container>
-      </Box>
+      </Flex>
     </PublicFormWrapper>
   )
 }
@@ -155,9 +156,22 @@ const StripePaymentContainer = ({
             <PaymentFormWrapper>
               {secretEnv === 'production' ? null : (
                 <InlineMessage variant="warning" mb="1rem">
-                  Use '4242 4242 4242 4242' as your card number to test payments
-                  on this form. Payments made on this form will only show in
-                  test mode in Stripe.
+                  <Stack>
+                    <Text>
+                      Make a test payment with the card number below! Payments
+                      made on this form will only show in test mode in Stripe.
+                    </Text>
+                    <Flex align="center">
+                      <Text mr="0.25rem">4242 4242 4242 4242</Text>
+                      <Flex boxSize="1.5rem" align="center" justify="center">
+                        <CopyButton
+                          colorScheme="secondary"
+                          stringToCopy={`4242424242424242`}
+                          aria-label="Copy test card number"
+                        />
+                      </Flex>
+                    </Flex>
+                  </Stack>
                 </InlineMessage>
               )}
               <PaymentStack>

From 79b8d6babc24d1c812222fb8a55ed9225b4a31a7 Mon Sep 17 00:00:00 2001
From: Ken <ken@open.gov.sg>
Date: Fri, 1 Mar 2024 19:06:43 +0800
Subject: [PATCH 2/2] chore: remove unintended box-flex switch

---
 .../FormPaymentPage/stripe/StripePaymentElement.tsx           | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/features/public-form/components/FormPaymentPage/stripe/StripePaymentElement.tsx b/frontend/src/features/public-form/components/FormPaymentPage/stripe/StripePaymentElement.tsx
index 8ae786b8df..b90a493aa7 100644
--- a/frontend/src/features/public-form/components/FormPaymentPage/stripe/StripePaymentElement.tsx
+++ b/frontend/src/features/public-form/components/FormPaymentPage/stripe/StripePaymentElement.tsx
@@ -32,7 +32,7 @@ import { getPaymentViewStates, PaymentViewStates } from './utils'
 const PaymentFormWrapper = ({ children }: { children: React.ReactNode }) => {
   return (
     <PublicFormWrapper>
-      <Flex
+      <Box
         pt={{ base: '2.5rem', md: '0' }}
         mb={{ base: '1.5rem', md: '0' }}
         w="100%"
@@ -40,7 +40,7 @@ const PaymentFormWrapper = ({ children }: { children: React.ReactNode }) => {
         <Container w="100%" maxW="57rem" p={0}>
           {children}
         </Container>
-      </Flex>
+      </Box>
     </PublicFormWrapper>
   )
 }