Feat: create new outreach campaign targeting all safes [SW-638] (#4672)

* feat: add url params for safe and signer address to typeform link * feat: update styles for outreach banner and pass addresses as url params to survey * feat: target all safes * fix: popup flickers when survey has already been completed * compress avatar image
safe-global · Dec 19, 2024 · 9a20297 · 9a20297
1 parent f6750be
commit 9a20297
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 30 deletions.
diff --git a/public/images/common/outreach-popup-avatar.png b/public/images/common/outreach-popup-avatar.png
diff --git a/src/features/targetedOutreach/components/OutreachPopup/OutreachPopup.tsx b/src/features/targetedOutreach/components/OutreachPopup/OutreachPopup.tsx
@@ -1,7 +1,7 @@
 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 { Avatar, Box, Button, 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'
@@ -36,6 +36,8 @@ const OutreachPopup = (): ReactElement | null => {
         },
   )
 
+  const outreachUrl = `${ACTIVE_OUTREACH.url}#safe_address=${safeAddress}&signer_address=${wallet?.address}&chain_id=${currentChainId}`
+
   const [askAgainLaterTimestamp, setAskAgainLaterTimestamp] = useSessionStorage<number>(OUTREACH_SS_KEY)
 
   const shouldOpen = useShowOutreachPopup(isClosed, askAgainLaterTimestamp, submission)
@@ -81,35 +83,30 @@ const OutreachPopup = (): ReactElement | null => {
           <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 display="flex" alignItems="center">
+                  <Avatar
+                    alt="Product marketing lead avatar"
+                    src="/images/common/outreach-popup-avatar.png"
+                    className={css.avatar}
+                  />
                   <Box ml={1}>
-                    <Typography variant="body2">Clem</Typography>
+                    <Typography variant="body2">Danilo Pereira</Typography>
                     <Typography variant="body2" color="primary.light">
-                      Product Lead
+                      Product Marketing 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!
+                  Your voice matters!
+                  <br />
+                  Help us improve {'Safe{Wallet}'}.
                 </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.
+                  In 1 minute, tell us why you use {'Safe{Wallet}'}. Your input will help us create a better, smarter
+                  wallet experience for you!
                 </Typography>
                 <Track {...OUTREACH_EVENTS.OPEN_SURVEY}>
-                  <Link rel="noreferrer noopener" target="_blank" href={ACTIVE_OUTREACH.url}>
+                  <Link rel="noreferrer noopener" target="_blank" href={outreachUrl}>
                     <Button fullWidth variant="contained" onClick={handleOpenSurvey}>
                       Get Involved
                     </Button>
@@ -121,14 +118,14 @@ const OutreachPopup = (): ReactElement | null => {
                   </Button>
                 </Track>
                 <Typography variant="body2" color="primary.light" mx="auto">
-                  It&apos;ll only take 2 minutes.
+                  It&apos;ll only take 1 minute.
                 </Typography>
-                <Track {...OUTREACH_EVENTS.CLOSE_POPUP}>
-                  <IconButton className={css.close} aria-label="close" onClick={handleClose}>
-                    <Close />
-                  </IconButton>
-                </Track>
               </Stack>
+              <Track {...OUTREACH_EVENTS.CLOSE_POPUP}>
+                <IconButton className={css.close} aria-label="close" onClick={handleClose}>
+                  <Close />
+                </IconButton>
+              </Track>
             </Paper>
           </Box>
         </ThemeProvider>

diff --git a/src/features/targetedOutreach/components/OutreachPopup/styles.module.css b/src/features/targetedOutreach/components/OutreachPopup/styles.module.css
@@ -3,7 +3,7 @@
   z-index: 1300;
   bottom: var(--space-2);
   right: var(--space-2);
-  max-width: 400px;
+  max-width: 340px;
 }
 
 .container {
@@ -20,6 +20,11 @@
   padding: var(--space-1);
 }
 
+.avatar {
+  height: 32px;
+  width: 32px;
+}
+
 @media (max-width: 599.99px) {
   .popup {
     right: 0;

diff --git a/src/features/targetedOutreach/constants.ts b/src/features/targetedOutreach/constants.ts
@@ -1,4 +1,4 @@
-export const ACTIVE_OUTREACH = { id: 1, url: 'https://app.opinionx.co/safe-power-user-survey/' }
+export const ACTIVE_OUTREACH = { id: 2, url: 'https://wn2n6ocviur.typeform.com/to/nlQlP7lU', targetAll: true }
 
 export const OUTREACH_LS_KEY = 'outreachPopup'
 export const OUTREACH_SS_KEY = 'outreachPopup_session'

diff --git a/src/features/targetedOutreach/hooks/useShowOutreachPopup.tsx b/src/features/targetedOutreach/hooks/useShowOutreachPopup.tsx
@@ -1,5 +1,5 @@
 import useIsSafeOwner from '@/hooks/useIsSafeOwner'
-import { MAX_ASK_AGAIN_DELAY } from '@/features/targetedOutreach/constants'
+import { ACTIVE_OUTREACH, MAX_ASK_AGAIN_DELAY } from '@/features/targetedOutreach/constants'
 import { useAppSelector } from '@/store'
 import { selectCookieBanner } from '@/store/popupSlice'
 import type { getSubmission } from '@safe-global/safe-client-gateway-sdk'
@@ -12,7 +12,8 @@ const useShowOutreachPopup = (
   const cookiesPopup = useAppSelector(selectCookieBanner)
   const isSigner = useIsSafeOwner()
 
-  const isTargetedSafe = !!submission?.outreachId
+  const submissionHasLoaded = submission !== undefined
+  const isTargetedSafe = submissionHasLoaded && (ACTIVE_OUTREACH.targetAll || !!submission?.outreachId)
   const hasCompletedSurvey = !!submission?.completionDate
 
   if (cookiesPopup?.open || isDismissed || !isSigner || !isTargetedSafe || hasCompletedSurvey) {