From ab06e278413d31c11d4111c3b9da4bb1ae59b57f Mon Sep 17 00:00:00 2001
From: Ken Lee Shu Ming <ken@open.gov.sg>
Date: Mon, 14 Oct 2024 15:16:45 +0800
Subject: [PATCH] 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
---
 .../workspace/WorkspacePage.stories.tsx       | 31 +++++++++++++++++++
 .../src/features/workspace/WorkspacePage.tsx  | 16 ++++++++++
 shared/constants/links.ts                     |  2 ++
 3 files changed, 49 insertions(+)

diff --git a/frontend/src/features/workspace/WorkspacePage.stories.tsx b/frontend/src/features/workspace/WorkspacePage.stories.tsx
index f63416678d..ff2a963792 100644
--- 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
index 434226dd3f..74a957dfc6 100644
--- a/frontend/src/features/workspace/WorkspacePage.tsx
+++ b/frontend/src/features/workspace/WorkspacePage.tsx
@@ -10,9 +10,11 @@ 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'
@@ -20,6 +22,8 @@ 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
index 07c8865d61..0ce66a9962 100644
--- 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'