chore: add paperless form banner (#7767)

* chore: add paperless form banner * chore: add storybook for no announcement modal * fix: render link as inline on mobile
opengovsg · Oct 14, 2024 · ab06e27 · ab06e27
1 parent a3c3639
commit ab06e27
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 0 deletions.
diff --git a/frontend/src/features/workspace/WorkspacePage.stories.tsx b/frontend/src/features/workspace/WorkspacePage.stories.tsx
@@ -2,6 +2,7 @@ import { Meta, StoryFn } from '@storybook/react'
 import { times } from 'lodash'
 import { rest } from 'msw'
 
+import { UserId } from '~shared/types'
 import {
   AdminDashboardFormMetaDto,
   FormResponseMode,
@@ -163,8 +164,38 @@ AllOpenDesktop.parameters = {
     ...BASE_MSW_HANDLERS,
   ],
 }
+
+export const AllOpenDesktopNoAnnouncementModal = Template.bind({})
+AllOpenDesktopNoAnnouncementModal.parameters = {
+  ...AllOpenDesktop.parameters,
+  msw: [
+    ...envHandlers,
+    rest.get<AdminDashboardFormMetaDto[]>(
+      '/api/v3/admin/forms',
+      (req, res, ctx) => {
+        return res(ctx.json(THIRTY_FORMS))
+      },
+    ),
+    getWorkspaces(),
+    getUser({
+      delay: 0,
+      mockUser: {
+        ...MOCK_USER,
+        _id: 'undefined' as UserId,
+        email: 'meh@example.com',
+      },
+    }),
+  ],
+}
+
 export const AllOpenMobile = Template.bind({})
 AllOpenMobile.parameters = {
   ...Mobile.parameters,
   ...AllOpenDesktop.parameters,
 }
+
+export const AllOpenMobileNoAnnouncementModal = Template.bind({})
+AllOpenMobileNoAnnouncementModal.parameters = {
+  ...Mobile.parameters,
+  ...AllOpenDesktopNoAnnouncementModal.parameters,
+}
diff --git a/frontend/src/features/workspace/WorkspacePage.tsx b/frontend/src/features/workspace/WorkspacePage.tsx
@@ -10,16 +10,20 @@ import {
   Grid,
   GridItem,
   Stack,
+  Text,
   useDisclosure,
 } from '@chakra-ui/react'
 
+import { PAPERLESS_FORMSG_RESEARCH_LINK } from '~shared/constants'
 import { Workspace } from '~shared/types/workspace'
 
 import { AdminNavBar } from '~/app/AdminNavBar/AdminNavBar'
 
 import { useIsMobile } from '~hooks/useIsMobile'
 import { getBannerProps } from '~utils/getBannerProps'
 import { Banner } from '~components/Banner'
+import InlineMessage from '~components/InlineMessage'
+import Link from '~components/Link'
 
 import { useEnv } from '~features/env/queries'
 import { useUser } from '~features/user/queries'
@@ -151,6 +155,18 @@ export const WorkspacePage = (): JSX.Element => {
             defaultWorkspace={DEFAULT_WORKSPACE}
             setCurrentWorkspace={setCurrWorkspaceId}
           >
+            <InlineMessage>
+              <Text>
+                Do you still have paper forms in your agency?{' '}
+                <Link
+                  display="inline"
+                  href={PAPERLESS_FORMSG_RESEARCH_LINK}
+                  target="_blank"
+                >
+                  Tell us more so that we can help you digitalise them.
+                </Link>
+              </Text>
+            </InlineMessage>
             <WorkspaceContent />
           </WorkspaceProvider>
         </GridItem>

diff --git a/shared/constants/links.ts b/shared/constants/links.ts
@@ -10,3 +10,5 @@ export const SGID_VALID_ORG_PAGE =
 // Growthbook proxy set up on cloudflare workers. For more info, see Worker script: https://github.com/opengovsg/formsg-private/pull/171.
 export const GROWTHBOOK_DEV_PROXY =
   'https://proxy-growthbook-stg.formsg.workers.dev'
+export const PAPERLESS_FORMSG_RESEARCH_LINK =
+  'https://go.gov.sg/paperformsresearch'