From 9d93b735ab5cc504ed60c37299cca48053a4c4e9 Mon Sep 17 00:00:00 2001
From: katspaugh <katspaugh@gmail.com>
Date: Wed, 20 Nov 2024 07:35:32 +0100
Subject: [PATCH] Feat: feature flag for targeted survey

---
 .../OutreachPopup/OutreachPopup.tsx           | 139 +++++++++++++++++
 .../components/OutreachPopup/index.tsx        | 145 ++----------------
 src/utils/chains.ts                           |   1 +
 3 files changed, 150 insertions(+), 135 deletions(-)
 create mode 100644 src/features/targetedOutreach/components/OutreachPopup/OutreachPopup.tsx

diff --git a/src/features/targetedOutreach/components/OutreachPopup/OutreachPopup.tsx b/src/features/targetedOutreach/components/OutreachPopup/OutreachPopup.tsx
new file mode 100644
index 0000000000..f635d3947e
--- /dev/null
+++ b/src/features/targetedOutreach/components/OutreachPopup/OutreachPopup.tsx
@@ -0,0 +1,139 @@
+import { useCreateSubmissionMutation, useGetSubmissionQuery } from '@/store/api/gateway'
+import { skipToken } from '@reduxjs/toolkit/query'
+import { useEffect, type ReactElement } from 'react'
+import { Avatar, Box, Button, Chip, IconButton, Link, Paper, Stack, ThemeProvider, Typography } from '@mui/material'
+import { Close } from '@mui/icons-material'
+import type { Theme } from '@mui/material/styles'
+import { useAppDispatch, useAppSelector } from '@/store'
+import css from './styles.module.css'
+import { closeOutreachBanner, openOutreachBanner, selectOutreachBanner } from '@/store/popupSlice'
+import useLocalStorage, { useSessionStorage } from '@/services/local-storage/useLocalStorage'
+import useShowOutreachPopup from '@/features/targetedOutreach/hooks/useShowOutreachPopup'
+import { ACTIVE_OUTREACH, OUTREACH_LS_KEY, OUTREACH_SS_KEY } from '@/features/targetedOutreach/constants'
+import Track from '@/components/common/Track'
+import { OUTREACH_EVENTS } from '@/services/analytics/events/outreach'
+import SafeThemeProvider from '@/components/theme/SafeThemeProvider'
+import useChainId from '@/hooks/useChainId'
+import useSafeAddress from '@/hooks/useSafeAddress'
+import useWallet from '@/hooks/wallets/useWallet'
+
+const OutreachPopup = (): ReactElement | null => {
+  const dispatch = useAppDispatch()
+  const outreachPopup = useAppSelector(selectOutreachBanner)
+  const [isClosed, setIsClosed] = useLocalStorage<boolean>(OUTREACH_LS_KEY)
+  const currentChainId = useChainId()
+  const safeAddress = useSafeAddress()
+  const wallet = useWallet()
+  const [createSubmission] = useCreateSubmissionMutation()
+  const { data: submission } = useGetSubmissionQuery(
+    !wallet || !safeAddress
+      ? skipToken
+      : {
+          outreachId: ACTIVE_OUTREACH.id,
+          chainId: currentChainId,
+          safeAddress,
+          signerAddress: wallet?.address,
+        },
+  )
+
+  const [askAgainLaterTimestamp, setAskAgainLaterTimestamp] = useSessionStorage<number>(OUTREACH_SS_KEY)
+
+  const shouldOpen = useShowOutreachPopup(isClosed, askAgainLaterTimestamp, submission)
+
+  const handleClose = () => {
+    setIsClosed(true)
+    dispatch(closeOutreachBanner())
+  }
+
+  const handleAskAgainLater = () => {
+    setAskAgainLaterTimestamp(Date.now())
+    dispatch(closeOutreachBanner())
+  }
+
+  // Decide whether to show the popup.
+  useEffect(() => {
+    if (shouldOpen) {
+      dispatch(openOutreachBanner())
+    } else {
+      dispatch(closeOutreachBanner())
+    }
+  }, [dispatch, shouldOpen])
+
+  if (!outreachPopup.open) return null
+
+  const handleOpenSurvey = async () => {
+    if (wallet) {
+      await createSubmission({
+        outreachId: ACTIVE_OUTREACH.id,
+        chainId: currentChainId,
+        safeAddress,
+        signerAddress: wallet.address,
+      })
+    }
+    dispatch(closeOutreachBanner())
+  }
+
+  return (
+    // Enforce light theme for the popup
+    <SafeThemeProvider mode="light">
+      {(safeTheme: Theme) => (
+        <ThemeProvider theme={safeTheme}>
+          <Box className={css.popup}>
+            <Paper className={css.container}>
+              <Stack gap={2}>
+                <Box display="flex">
+                  <Avatar alt="Clem, product lead" src="/images/common/outreach-popup-avatar.png" />
+                  <Box ml={1}>
+                    <Typography variant="body2">Clem</Typography>
+                    <Typography variant="body2" color="primary.light">
+                      Product Lead
+                    </Typography>
+                  </Box>
+                </Box>
+                <Box>
+                  <Chip
+                    size="small"
+                    sx={{ backgroundColor: 'text.primary', color: 'background.paper', mt: '-2px' }}
+                    label={
+                      <Typography fontWeight={700} variant="overline">
+                        EARN REWARDS
+                      </Typography>
+                    }
+                  />
+                </Box>
+                <Typography variant="h4" fontWeight={700}>
+                  You&apos;re invited!
+                </Typography>
+                <Typography>
+                  As one of our top users, we&apos;d love to hear your feedback on how we can enhance Safe. Share your
+                  contact info, and we&apos;ll reach out for a short interview.
+                </Typography>
+                <Track {...OUTREACH_EVENTS.OPEN_SURVEY}>
+                  <Link rel="noreferrer noopener" target="_blank" href={ACTIVE_OUTREACH.url}>
+                    <Button fullWidth variant="contained" onClick={handleOpenSurvey}>
+                      Get Involved
+                    </Button>
+                  </Link>
+                </Track>
+                <Track {...OUTREACH_EVENTS.ASK_AGAIN_LATER}>
+                  <Button fullWidth variant="text" onClick={handleAskAgainLater}>
+                    Ask me later
+                  </Button>
+                </Track>
+                <Typography variant="body2" color="primary.light" mx="auto">
+                  It&apos;ll only take 2 minutes.
+                </Typography>
+                <Track {...OUTREACH_EVENTS.CLOSE_POPUP}>
+                  <IconButton className={css.close} aria-label="close" onClick={handleClose}>
+                    <Close />
+                  </IconButton>
+                </Track>
+              </Stack>
+            </Paper>
+          </Box>
+        </ThemeProvider>
+      )}
+    </SafeThemeProvider>
+  )
+}
+export default OutreachPopup
diff --git a/src/features/targetedOutreach/components/OutreachPopup/index.tsx b/src/features/targetedOutreach/components/OutreachPopup/index.tsx
index f635d3947e..cf30149c68 100644
--- a/src/features/targetedOutreach/components/OutreachPopup/index.tsx
+++ b/src/features/targetedOutreach/components/OutreachPopup/index.tsx
@@ -1,139 +1,14 @@
-import { useCreateSubmissionMutation, useGetSubmissionQuery } from '@/store/api/gateway'
-import { skipToken } from '@reduxjs/toolkit/query'
-import { useEffect, type ReactElement } from 'react'
-import { Avatar, Box, Button, Chip, IconButton, Link, Paper, Stack, ThemeProvider, Typography } from '@mui/material'
-import { Close } from '@mui/icons-material'
-import type { Theme } from '@mui/material/styles'
-import { useAppDispatch, useAppSelector } from '@/store'
-import css from './styles.module.css'
-import { closeOutreachBanner, openOutreachBanner, selectOutreachBanner } from '@/store/popupSlice'
-import useLocalStorage, { useSessionStorage } from '@/services/local-storage/useLocalStorage'
-import useShowOutreachPopup from '@/features/targetedOutreach/hooks/useShowOutreachPopup'
-import { ACTIVE_OUTREACH, OUTREACH_LS_KEY, OUTREACH_SS_KEY } from '@/features/targetedOutreach/constants'
-import Track from '@/components/common/Track'
-import { OUTREACH_EVENTS } from '@/services/analytics/events/outreach'
-import SafeThemeProvider from '@/components/theme/SafeThemeProvider'
-import useChainId from '@/hooks/useChainId'
-import useSafeAddress from '@/hooks/useSafeAddress'
-import useWallet from '@/hooks/wallets/useWallet'
+import dynamic from 'next/dynamic'
+import { useHasFeature } from '@/hooks/useChains'
+import { FEATURES } from '@/utils/chains'
 
-const OutreachPopup = (): ReactElement | null => {
-  const dispatch = useAppDispatch()
-  const outreachPopup = useAppSelector(selectOutreachBanner)
-  const [isClosed, setIsClosed] = useLocalStorage<boolean>(OUTREACH_LS_KEY)
-  const currentChainId = useChainId()
-  const safeAddress = useSafeAddress()
-  const wallet = useWallet()
-  const [createSubmission] = useCreateSubmissionMutation()
-  const { data: submission } = useGetSubmissionQuery(
-    !wallet || !safeAddress
-      ? skipToken
-      : {
-          outreachId: ACTIVE_OUTREACH.id,
-          chainId: currentChainId,
-          safeAddress,
-          signerAddress: wallet?.address,
-        },
-  )
+const LazyOutreachPopup = dynamic(() => import('./OutreachPopup'), {
+  ssr: false,
+})
 
-  const [askAgainLaterTimestamp, setAskAgainLaterTimestamp] = useSessionStorage<number>(OUTREACH_SS_KEY)
-
-  const shouldOpen = useShowOutreachPopup(isClosed, askAgainLaterTimestamp, submission)
-
-  const handleClose = () => {
-    setIsClosed(true)
-    dispatch(closeOutreachBanner())
-  }
-
-  const handleAskAgainLater = () => {
-    setAskAgainLaterTimestamp(Date.now())
-    dispatch(closeOutreachBanner())
-  }
-
-  // Decide whether to show the popup.
-  useEffect(() => {
-    if (shouldOpen) {
-      dispatch(openOutreachBanner())
-    } else {
-      dispatch(closeOutreachBanner())
-    }
-  }, [dispatch, shouldOpen])
-
-  if (!outreachPopup.open) return null
-
-  const handleOpenSurvey = async () => {
-    if (wallet) {
-      await createSubmission({
-        outreachId: ACTIVE_OUTREACH.id,
-        chainId: currentChainId,
-        safeAddress,
-        signerAddress: wallet.address,
-      })
-    }
-    dispatch(closeOutreachBanner())
-  }
-
-  return (
-    // Enforce light theme for the popup
-    <SafeThemeProvider mode="light">
-      {(safeTheme: Theme) => (
-        <ThemeProvider theme={safeTheme}>
-          <Box className={css.popup}>
-            <Paper className={css.container}>
-              <Stack gap={2}>
-                <Box display="flex">
-                  <Avatar alt="Clem, product lead" src="/images/common/outreach-popup-avatar.png" />
-                  <Box ml={1}>
-                    <Typography variant="body2">Clem</Typography>
-                    <Typography variant="body2" color="primary.light">
-                      Product Lead
-                    </Typography>
-                  </Box>
-                </Box>
-                <Box>
-                  <Chip
-                    size="small"
-                    sx={{ backgroundColor: 'text.primary', color: 'background.paper', mt: '-2px' }}
-                    label={
-                      <Typography fontWeight={700} variant="overline">
-                        EARN REWARDS
-                      </Typography>
-                    }
-                  />
-                </Box>
-                <Typography variant="h4" fontWeight={700}>
-                  You&apos;re invited!
-                </Typography>
-                <Typography>
-                  As one of our top users, we&apos;d love to hear your feedback on how we can enhance Safe. Share your
-                  contact info, and we&apos;ll reach out for a short interview.
-                </Typography>
-                <Track {...OUTREACH_EVENTS.OPEN_SURVEY}>
-                  <Link rel="noreferrer noopener" target="_blank" href={ACTIVE_OUTREACH.url}>
-                    <Button fullWidth variant="contained" onClick={handleOpenSurvey}>
-                      Get Involved
-                    </Button>
-                  </Link>
-                </Track>
-                <Track {...OUTREACH_EVENTS.ASK_AGAIN_LATER}>
-                  <Button fullWidth variant="text" onClick={handleAskAgainLater}>
-                    Ask me later
-                  </Button>
-                </Track>
-                <Typography variant="body2" color="primary.light" mx="auto">
-                  It&apos;ll only take 2 minutes.
-                </Typography>
-                <Track {...OUTREACH_EVENTS.CLOSE_POPUP}>
-                  <IconButton className={css.close} aria-label="close" onClick={handleClose}>
-                    <Close />
-                  </IconButton>
-                </Track>
-              </Stack>
-            </Paper>
-          </Box>
-        </ThemeProvider>
-      )}
-    </SafeThemeProvider>
-  )
+function OutreachPopup() {
+  const isEnabled = useHasFeature(FEATURES.TARGETED_SURVEY)
+  return isEnabled ? <LazyOutreachPopup /> : null
 }
+
 export default OutreachPopup
diff --git a/src/utils/chains.ts b/src/utils/chains.ts
index ec3786dd41..329aaee6a7 100644
--- a/src/utils/chains.ts
+++ b/src/utils/chains.ts
@@ -38,6 +38,7 @@ export enum FEATURES {
   MULTI_CHAIN_SAFE_CREATION = 'MULTI_CHAIN_SAFE_CREATION',
   MULTI_CHAIN_SAFE_ADD_NETWORK = 'MULTI_CHAIN_SAFE_ADD_NETWORK',
   PROPOSERS = 'PROPOSERS',
+  TARGETED_SURVEY = 'TARGETED_SURVEY',
 }
 
 export const FeatureRoutes = {