feat(form-v2/react-to-angular/3): remove infoboxes when rollout perce…

…ntages hit thresholds (#4514)

* feat: remove infobox when public form respondents hits threshold

* feat: remove infobox for admins

* ref: change thresholds to constants

* fix: add frontend envvars

frontend/src/features/public-form/components/PublicFormWrapper.tsx

@@ -1,7 +1,9 @@
 import { useMemo } from 'react'
 import { Flex, Spacer } from '@chakra-ui/react'
 
-import { FormColorTheme } from '~shared/types'
+import { FormColorTheme, FormResponseMode } from '~shared/types'
+
+import { useEnv } from '~features/env/queries'
 
 import { usePublicFormContext } from '../PublicFormContext'
 
@@ -38,18 +40,29 @@ export const PublicFormWrapper = ({
   isPreview,
   children,
 }: PublicFormWrapperProps): JSX.Element => {
+  const REMOVE_RESPONDENTS_INFOBOX_THRESHOLD = 10
   const { form, isLoading, isAuthRequired } = usePublicFormContext()
+  const { data: { respondentRolloutEmail, respondentRolloutStorage } = {} } =
+    useEnv()
 
   const bgColour = useBgColor({
     colorTheme: isLoading ? undefined : form?.startPage.colorTheme,
   })
-
+  const isEmailForm = form?.responseMode === FormResponseMode.Email
+  const switchEnvRolloutPercentage = isEmailForm
+    ? respondentRolloutEmail
+    : respondentRolloutStorage
+  // Remove the switch env message if the React rollout for public form respondents is >10%
+  const showSwitchEnvMessage = !!(
+    switchEnvRolloutPercentage &&
+    switchEnvRolloutPercentage <= REMOVE_RESPONDENTS_INFOBOX_THRESHOLD
+  )
   return (
     <Flex bg={bgColour} p={{ base: 0, md: '1.5rem' }} flex={1} justify="center">
       {isAuthRequired ? null : <SectionSidebar />}
       <Flex flexDir="column" maxW="57rem" w="100%">
         {/* TODO(#4279): Remove switch env message on full rollout */}
-        {!isPreview && <PublicSwitchEnvMessage />}
+        {!isPreview && showSwitchEnvMessage && <PublicSwitchEnvMessage />}
         {children}
       </Flex>
       {isAuthRequired ? null : <Spacer />}

frontend/src/features/workspace/components/AdminSwitchEnvMessage.tsx

@@ -5,11 +5,15 @@ import Button from '~components/Button'
 import InlineMessage from '~components/InlineMessage'
 
 import { useEnvMutations } from '~features/env/mutations'
+import { useEnv } from '~features/env/queries'
 
 export const AdminSwitchEnvMessage = (): JSX.Element => {
+  const REMOVE_ADMIN_INFOBOX_THRESHOLD = 100
   const { adminSwitchEnvMutation } = useEnvMutations()
-
-  return (
+  const { data: { adminRollout } = {} } = useEnv()
+  const showSwitchEnvMessage =
+    adminRollout && adminRollout < REMOVE_ADMIN_INFOBOX_THRESHOLD
+  return showSwitchEnvMessage ? (
     <InlineMessage>
       <Text>
         Welcome to the new FormSG! You can still{' '}
@@ -19,5 +23,7 @@ export const AdminSwitchEnvMessage = (): JSX.Element => {
         which is available until 28 May 2022.
       </Text>
     </InlineMessage>
+  ) : (
+    <></>
   )
 }

shared/types/core.ts

@@ -26,4 +26,7 @@ export type ClientEnvVars = {
   myInfoBannerContent: string // MyInfo maintenance message
   GATrackingID: string | null
   spcpCookieDomain: string // Cookie domain used for removing spcp cookies
+  respondentRolloutEmail: number
+  respondentRolloutStorage: number
+  adminRollout: number
 }

src/app/loaders/express/locals.ts

@@ -25,6 +25,11 @@ const frontendVars = {
   reactMigrationRespondentCookieName:
     config.reactMigration.respondentCookieName,
   reactMigrationAdminCookieName: config.reactMigration.adminCookieName,
+  reactMigrationRespondentRolloutEmail:
+    config.reactMigration.respondentRolloutEmail,
+  reactMigrationRespondentRolloutStorage:
+    config.reactMigration.respondentRolloutStorage,
+  reactMigrationAdminRollout: config.reactMigration.adminRollout,
 }
 const environment = ejs.render(
   `
@@ -51,6 +56,9 @@ const environment = ejs.render(
     // React Migration
     var reactMigrationRespondentCookieName = "<%= reactMigrationRespondentCookieName%>"
     var reactMigrationAdminCookieName = "<%= reactMigrationAdminCookieName%>"
+    var reactMigrationRespondentRolloutEmail = "<%= reactMigrationRespondentRolloutEmail%>"
+    var reactMigrationRespondentRolloutStorage = "<%= reactMigrationRespondentRolloutStorage%>"
+    var reactMigrationAdminRollout = "<%= reactMigrationAdminRollout%>"
   `,
   frontendVars,
 )

src/app/modules/frontend/frontend.service.ts

@@ -20,5 +20,8 @@ export const getClientEnvVars = (): ClientEnvVars => {
     myInfoBannerContent: spcpMyInfoConfig.myInfoBannerContent, // MyInfo maintenance message
     GATrackingID: googleAnalyticsConfig.GATrackingID,
     spcpCookieDomain: spcpMyInfoConfig.spcpCookieDomain, // Cookie domain used for removing spcp cookies
+    respondentRolloutEmail: config.reactMigration.respondentRolloutEmail,
+    respondentRolloutStorage: config.reactMigration.respondentRolloutStorage,
+    adminRollout: config.reactMigration.adminRollout,
   }
 }

src/public/utils/injectedVariables.ts

@@ -14,6 +14,9 @@ interface FrontendInjectedVariables {
   myInfoBannerContent: string | null
   GATrackingID: string | null
   spcpCookieDomain: string | null
+  respondentRolloutEmail: number
+  respondentRolloutStorage: number
+  adminRollout: number
 }
 
 // NOTE: As these variables are not injected until runtime
@@ -35,4 +38,7 @@ export const injectedVariables: FrontendInjectedVariables = {
   myInfoBannerContent: formsgWindow.myInfoBannerContent ?? null,
   GATrackingID: formsgWindow.GATrackingID ?? null,
   spcpCookieDomain: formsgWindow.spcpCookieDomain ?? null,
+  respondentRolloutEmail: formsgWindow.respondentRolloutEmail,
+  respondentRolloutStorage: formsgWindow.respondentRolloutStorage,
+  adminRollout: formsgWindow.adminRollout,
 }