diff --git a/frontend/src/constants/links.ts b/frontend/src/constants/links.ts index 09d9a5c7d4..3bc7fcc3f4 100644 --- a/frontend/src/constants/links.ts +++ b/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' diff --git a/frontend/src/features/admin-form/common/components/PreviewFormBanner/PreviewFormBanner.tsx b/frontend/src/features/admin-form/common/components/PreviewFormBanner/PreviewFormBanner.tsx index 9f17bd2809..c22325bc0b 100644 --- a/frontend/src/features/admin-form/common/components/PreviewFormBanner/PreviewFormBanner.tsx +++ b/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 = ({ {isPaymentEnabled && ( - - - Payments made in Form Preview mode will not reflect on Stripe. - + + {process.env.SECRET_ENV === 'production' ? ( + + To test your payment form, replicate this form on our{' '} + + testing platform. + + + ) : ( + + You will not be able to make a test payment in Form Preview mode. + Open your form to make a test payment. + + )} )} diff --git a/frontend/src/features/admin-form/settings/components/PaymentSettingsSection/PaymentSettingsSection.tsx b/frontend/src/features/admin-form/settings/components/PaymentSettingsSection/PaymentSettingsSection.tsx index 419ff9192b..a2358a5807 100644 --- a/frontend/src/features/admin-form/settings/components/PaymentSettingsSection/PaymentSettingsSection.tsx +++ b/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 ( - Link your form to a Stripe account to start collecting payments. + Connect your Stripe account to this form to start collecting payments. + + + Don't have a Stripe account? Follow{' '} + + this guide + {' '} + to create one. + + ) } diff --git a/frontend/src/features/public-form/components/FormPaymentPage/FormPaymentPage.tsx b/frontend/src/features/public-form/components/FormPaymentPage/FormPaymentPage.tsx index a0426a5b7e..fcfee2c94c 100644 --- a/frontend/src/features/public-form/components/FormPaymentPage/FormPaymentPage.tsx +++ b/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 = () => { - + { } > + {process.env.SECRET_ENV === 'production' ? null : ( + + 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. + + )}