Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 9 commits into from
May 16, 2023
Merged

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

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
4bf098c
feat: update banner copy on payment forms preview
LinHuiqing May 15, 2023
3437318
feat: add test card banner for non-production envs
LinHuiqing May 15, 2023
53d0c96
feat: update payments settings page with guide
LinHuiqing May 15, 2023
b9507ae
chore: remove unnecessary Box import
LinHuiqing May 16, 2023
06edefa
fix: remove external link icon for payment guide
LinHuiqing May 16, 2023
2d15015
refactor: extract textProps in preview banner
LinHuiqing May 16, 2023
af4923f
fix: put px back into payments input panel infobox
LinHuiqing May 16, 2023
2276aa5
refactor: extract uat link to constant file
LinHuiqing May 16, 2023
8b1c6c3
fix: preview banner env condition
LinHuiqing May 16, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 26 additions & 10 deletions frontend/src/features/admin-form/common/components/PreviewFormBanner/PreviewFormBanner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -166,16 +166,32 @@ 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
textStyle="body-2"
LinHuiqing marked this conversation as resolved.
Show resolved Hide resolved
color="white"
ml="2rem"
mt="0.5rem"
mb="0.5rem"
>
To test your payment form, replicate this form on our{' '}
<Link isExternal color="white" href="https://uat.form.gov.sg">
LinHuiqing marked this conversation as resolved.
Show resolved Hide resolved
testing platform.
</Link>
</Text>
) : (
<Text
textStyle="body-2"
color="white"
ml="2rem"
mt="0.5rem"
mb="0.5rem"
>
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 />
Expand Down
2 changes: 1 addition & 1 deletion ...der-and-design/BuilderAndDesignDrawer/FieldListDrawer/field-panels/PaymentsInputPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -302,7 +302,7 @@ export const PaymentsInputPanel = (): JSX.Element | null => {
return (
<>
{isPaymentDisabled && (
<Box px="1.5rem" pt="2rem" pb="1.5rem">
<Box pt="2rem" pb="1.5rem">
LinHuiqing marked this conversation as resolved.
Show resolved Hide resolved
<InlineMessage variant="info">
<Text>{paymentDisabledMessage}</Text>
</InlineMessage>
Expand Down
14 changes: 13 additions & 1 deletion ...features/admin-form/settings/components/PaymentSettingsSection/PaymentSettingsSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'

Expand Down Expand Up @@ -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>
)
}
Expand Down
10 changes: 9 additions & 1 deletion frontend/src/features/public-form/components/FormPaymentPage/FormPaymentPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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={
Expand All @@ -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>
Expand Down