diff --git a/frontend/src/constants/links.ts b/frontend/src/constants/links.ts index 2b2ae89b31..ba05b3ed6a 100644 --- a/frontend/src/constants/links.ts +++ b/frontend/src/constants/links.ts @@ -77,6 +77,7 @@ export const LANDING_PAGE_EXAMPLE_FORMS = [ export const OGP_ALL_PRODUCTS = 'https://www.open.gov.sg/products/overview' export const OGP_POSTMAN = 'https://postman.gov.sg' +export const OGP_CHECKPOINT = 'https://checkpoint.gov.sg' export const OGP_FORMSG_COLLATE = 'https://collate.form.gov.sg' export const OGP_SGID = 'https://go.gov.sg/sgid-formsg' diff --git a/frontend/src/features/admin-form/settings/components/EmailFormSection.tsx b/frontend/src/features/admin-form/settings/components/EmailFormSection.tsx index af944d4387..1e3e62ec4c 100644 --- a/frontend/src/features/admin-form/settings/components/EmailFormSection.tsx +++ b/frontend/src/features/admin-form/settings/components/EmailFormSection.tsx @@ -5,14 +5,17 @@ import { useForm, useFormContext, } from 'react-hook-form' -import { FormControl } from '@chakra-ui/react' +import { BiBulb } from 'react-icons/bi' +import { Flex, FormControl, Icon } from '@chakra-ui/react' import { get, isEmpty, isEqual } from 'lodash' import isEmail from 'validator/lib/isEmail' -import { GUIDE_PREVENT_EMAIL_BOUNCE } from '~constants/links' +import { GUIDE_PREVENT_EMAIL_BOUNCE, OGP_CHECKPOINT } from '~constants/links' +import { useMdComponents } from '~hooks/useMdComponents' import { ADMIN_EMAIL_VALIDATION_RULES } from '~utils/formValidation' import FormErrorMessage from '~components/FormControl/FormErrorMessage' import FormLabel from '~components/FormControl/FormLabel' +import { MarkdownText } from '~components/MarkdownText' import { TagInput } from '~components/TagInput' import { useMutateFormSettings } from '../mutations' @@ -48,19 +51,35 @@ export const EmailFormSection = ({ useEffect(() => reset({ emails: initialEmails }), [initialEmails, reset]) return ( - - - - Emails where responses will be sent - - - {get(errors, 'emails.message')} - - + <> + + + + + Emails where responses will be sent + + + {get(errors, 'emails.message')} + + + + ) +} + +const CheckpointAdvertisingInfobox = () => { + const mdComponents = useMdComponents() + + return ( + + + {`Require routing and approval? [Try using Checkpoint to set up an approval workflow](${OGP_CHECKPOINT})`} + ) } diff --git a/frontend/src/features/workspace/components/CreateFormModal/CreateFormModalContent/FormResponseOptions.tsx b/frontend/src/features/workspace/components/CreateFormModal/CreateFormModalContent/FormResponseOptions.tsx index eb2541728d..f2ca731298 100644 --- a/frontend/src/features/workspace/components/CreateFormModal/CreateFormModalContent/FormResponseOptions.tsx +++ b/frontend/src/features/workspace/components/CreateFormModal/CreateFormModalContent/FormResponseOptions.tsx @@ -70,6 +70,7 @@ export const FormResponseOptions = forwardRef< Receive responses in your inbox