feat: required copy updates for payment launch on prod (#6327)

* feat: update banner copy on payment forms preview

* feat: add test card banner for non-production envs

* feat: update payments settings page with guide

* chore: remove unnecessary Box import

* fix: remove external link icon for payment guide

* refactor: extract textProps in preview banner

* fix: put px back into payments input panel infobox

* refactor: extract uat link to constant file

* fix: preview banner env condition

frontend/src/constants/links.ts

@@ -78,3 +78,5 @@ export const OGP_FORMSG_COLLATE = 'https://collate.form.gov.sg'
 export const OGP_SGID = 'https://go.gov.sg/sgid-formsg'
 
 export const OGP_FORMSG_REPO = 'https://github.com/opengovsg/formsg'
+
+export const FORMSG_UAT = 'https://uat.form.gov.sg'

frontend/src/features/admin-form/common/components/PreviewFormBanner/PreviewFormBanner.tsx

@@ -15,9 +15,11 @@ import {
   Slide,
   Stack,
   Text,
+  TextProps,
   useDisclosure,
 } from '@chakra-ui/react'
 
+import { FORMSG_UAT } from '~constants/links'
 import { ADMINFORM_ROUTE, DASHBOARD_ROUTE } from '~constants/routes'
 import Button, { ButtonProps } from '~components/Button'
 import Link from '~components/Link'
@@ -41,6 +43,14 @@ interface PreviewFormBannerProps {
   isTemplate?: boolean
 }
 
+const textProps: TextProps = {
+  textStyle: 'body-2',
+  color: 'white',
+  ml: '2rem',
+  mt: '0.5rem',
+  mb: '0.5rem',
+}
+
 export const PreviewFormBanner = ({
   isTemplate,
 }: PreviewFormBannerProps): JSX.Element => {
@@ -166,16 +176,20 @@ export const PreviewFormBanner = ({
         </Drawer>
       </Flex>
       {isPaymentEnabled && (
-        <Flex backgroundColor={'#3A3E46'}>
-          <Text
-            textStyle="body-2"
-            color="white"
-            ml="2rem"
-            mt="0.5rem"
-            mb="0.5rem"
-          >
-            Payments made in Form Preview mode will not reflect on Stripe.
-          </Text>
+        <Flex backgroundColor="neutral.900">
+          {process.env.SECRET_ENV === 'production' ? (
+            <Text {...textProps}>
+              To test your payment form, replicate this form on our{' '}
+              <Link isExternal color="white" href={FORMSG_UAT}>
+                testing platform.
+              </Link>
+            </Text>
+          ) : (
+            <Text {...textProps}>
+              You will not be able to make a test payment in Form Preview mode.
+              Open your form to make a test payment.
+            </Text>
+          )}
         </Flex>
       )}
       <Divider />

frontend/src/features/admin-form/settings/components/PaymentSettingsSection/PaymentSettingsSection.tsx

@@ -10,8 +10,11 @@ import {
 import { FormResponseMode, PaymentChannel } from '~shared/types'
 
 import { BxsCheckCircle, BxsError, BxsInfoCircle } from '~assets/icons'
+import { GUIDE_PAYMENTS } from '~constants/links'
 import FormLabel from '~components/FormControl/FormLabel'
+import InlineMessage from '~components/InlineMessage'
 import Input from '~components/Input'
+import Link from '~components/Link'
 
 import { useAdminFormPayments, useAdminFormSettings } from '../../queries'
 
@@ -125,8 +128,17 @@ const PaymentsSectionText = () => {
   return (
     <Skeleton isLoaded={!isLoading} mb="2.5rem">
       <Text>
-        Link your form to a Stripe account to start collecting payments.
+        Connect your Stripe account to this form to start collecting payments.
       </Text>
+      <InlineMessage variant="info" mt="2rem">
+        <Text>
+          Don't have a Stripe account? Follow{' '}
+          <Link target="_blank" href={GUIDE_PAYMENTS}>
+            this guide
+          </Link>{' '}
+          to create one.
+        </Text>
+      </InlineMessage>
     </Skeleton>
   )
 }

frontend/src/features/public-form/components/FormPaymentPage/FormPaymentPage.tsx

@@ -3,6 +3,7 @@ import { useParams } from 'react-router-dom'
 import { Box, Container, Flex, Skeleton, Text } from '@chakra-ui/react'
 
 import { fillMinHeightCss } from '~utils/fillHeightCss'
+import InlineMessage from '~components/InlineMessage'
 
 import { FormBanner } from '~features/public-form/components/FormBanner'
 import { FormSectionsProvider } from '~features/public-form/components/FormFields/FormSectionsContext'
@@ -28,7 +29,7 @@ export const FormPaymentPage = () => {
           <PublicFormLogo />
           <FormStartPage />
           <PublicFormWrapper>
-            <Box py={{ base: '1.5rem', md: '2.5rem' }} w="100%">
+            <Box py="1rem" w="100%">
               <Container w="42.5rem" maxW="100%" p={0}>
                 <Suspense
                   fallback={
@@ -39,6 +40,13 @@ export const FormPaymentPage = () => {
                     </Skeleton>
                   }
                 >
+                  {process.env.SECRET_ENV === '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.
+                    </InlineMessage>
+                  )}
                   <StripePaymentElement paymentId={paymentId} />
                 </Suspense>
               </Container>