chore: add advertising for Checkpoint (#7005)

opengovsg · Jan 8, 2024 · 4d2cd06 · 4d2cd06
1 parent e852fe4
commit 4d2cd06
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 15 deletions.
diff --git 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
@@ -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 (
-    <FormProvider {...formMethods}>
-      <FormControl isInvalid={!isEmpty(errors)}>
-        <FormLabel
-          isRequired
-          useMarkdownForDescription
-          description={`Add at least **2 recipients** to prevent loss of response. Learn more on [how to guard against email bounces](${GUIDE_PREVENT_EMAIL_BOUNCE}).`}
-        >
-          Emails where responses will be sent
-        </FormLabel>
-        <AdminEmailRecipientsInput onSubmit={handleSubmitEmails} />
-        <FormErrorMessage>{get(errors, 'emails.message')}</FormErrorMessage>
-      </FormControl>
-    </FormProvider>
+    <>
+      <CheckpointAdvertisingInfobox />
+      <FormProvider {...formMethods}>
+        <FormControl isInvalid={!isEmpty(errors)}>
+          <FormLabel
+            isRequired
+            useMarkdownForDescription
+            description={`Add at least **2 recipients** to prevent loss of response. Learn more on [how to guard against email bounces](${GUIDE_PREVENT_EMAIL_BOUNCE}).`}
+          >
+            Emails where responses will be sent
+          </FormLabel>
+          <AdminEmailRecipientsInput onSubmit={handleSubmitEmails} />
+          <FormErrorMessage>{get(errors, 'emails.message')}</FormErrorMessage>
+        </FormControl>
+      </FormProvider>
+    </>
+  )
+}
+
+const CheckpointAdvertisingInfobox = () => {
+  const mdComponents = useMdComponents()
+
+  return (
+    <Flex bg="primary.100" p="1rem">
+      <Icon as={BiBulb} color="primary.500" fontSize="1.5rem" mr="0.5rem" />
+      <MarkdownText
+        components={mdComponents}
+      >{`Require routing and approval? [Try using Checkpoint to set up an approval workflow](${OGP_CHECKPOINT})`}</MarkdownText>
+    </Flex>
   )
 }
 

diff --git a/...tures/workspace/components/CreateFormModal/CreateFormModalContent/FormResponseOptions.tsx b/...tures/workspace/components/CreateFormModal/CreateFormModalContent/FormResponseOptions.tsx
@@ -70,6 +70,7 @@ export const FormResponseOptions = forwardRef<
         <Tile.Subtitle>Receive responses in your inbox</Tile.Subtitle>
         <OptionDescription
           listItems={[
+            'Supported by Checkpoint, an approval workflow tool',
             'Attachments: up to 7MB per form',
             'Up to Restricted and Sensitive (High) data',
           ]}