Feat: rebranding widget on dashboard (#4059)

* Feat: rebranding widger on dashboard

* Rm mobile banner events

* Update dashboard e2e tests

* Rm unnecessary container

* Hide beamer icon

* Fix animated logo on mobile

* Add important

* style: Update banner image

Co-authored-by: Usame Algan <[email protected]>

cypress/integration/smoke/dashboard.spec.js

@@ -19,16 +19,8 @@ describe('Dashboard', () => {
     cy.contains(`main a[href="/app/${SAFE}/balances/nfts"]`, 'NFTs0')
   })
 
-  it('should display the mobile banner', () => {
-    const appStoreLink =
-      'https://apps.apple.com/app/apple-store/id1515759131?pt=119497694&ct=Web%20App%20Dashboard&mt=8'
-    cy.get(`a[href="${appStoreLink}"]`).should('exist')
-
-    cy.get('button[aria-label="Close mobile banner"]').click()
-    cy.contains('button', 'Already use it!')
-    cy.contains('button', 'Not interested').click()
-
-    cy.get(`a[href="${appStoreLink}"]`).should('not.exist')
+  it('should display the rebranding banner', () => {
+    cy.get('main .beamer-trigger').should('exist')
   })
 
   it('should display the tx queue widget', () => {

src/components/AppLayout/Header/components/AnimatedLogo.tsx

@@ -1,5 +1,4 @@
 import { useEffect, useState, ReactElement } from 'react'
-import Img from 'src/components/layout/Img'
 import SafeLogo from '../assets/transition-logo.gif'
 
 const useInterval = (delay: number): number => {
@@ -20,7 +19,7 @@ const AnimatedLogo = (): ReactElement => {
   const RESTART_DELAY = 2 * 60e3 // 2 minutes
   const restartKey = useInterval(RESTART_DELAY)
 
-  return <Img alt="Safe" src={`${SafeLogo}?${restartKey}`} id="safe-logo" height={36} />
+  return <img alt="Safe" src={`${SafeLogo}?${restartKey}`} id="safe-logo" height={36} />
 }
 
 export default AnimatedLogo

src/components/AppLayout/Header/components/Layout.tsx

@@ -45,6 +45,14 @@ const styles = () => ({
       paddingLeft: md,
       paddingRight: md,
     },
+    [`@media (max-width: ${screenSm}px)`]: {
+      maxWidth: '95px',
+      overflow: 'hidden',
+      '& img': {
+        width: '72px',
+        height: 'auto',
+      },
+    },
     '& a': {
       display: 'flex',
       flexDirection: 'column',

src/components/AppLayout/Sidebar/index.tsx

@@ -131,7 +131,7 @@ const Sidebar = ({
         <HelpList>
           {!isDesktop && BEAMER_ID && (
             <Track {...OVERVIEW_EVENTS.WHATS_NEW}>
-              <StyledListItem id="whats-new-button" button onClick={handleClick}>
+              <StyledListItem className="beamer-trigger" button onClick={handleClick}>
                 <ListIcon type="gift" color="secondary" size="sm" />
                 <StyledListItemText>What&apos;s new</StyledListItemText>
               </StyledListItem>

src/components/Dashboard/RebrandingBanner/index.tsx

@@ -0,0 +1,53 @@
+import { ReactElement } from 'react'
+import { useDispatch } from 'react-redux'
+import Track from 'src/components/Track'
+import { BannerCookiesType, COOKIES_KEY, COOKIE_IDS } from 'src/logic/cookies/model/cookie'
+import { openCookieBanner } from 'src/logic/cookies/store/actions/openCookieBanner'
+import { loadFromCookie } from 'src/logic/cookies/utils'
+import styled from 'styled-components'
+import { WidgetContainer, WidgetTitle } from '../styled'
+
+// Banner + hide anything inside, incl. the Beamer icon
+const StyledContainer = styled.div`
+  width: 474px;
+  height: 227px;
+  background: url('./rebranding-banner.png') no-repeat 0 0;
+  background-size: contain;
+  cursor: pointer;
+
+  & * {
+    display: none !important;
+  }
+`
+
+const RebrandingBanner = (): ReactElement => {
+  const dispatch = useDispatch()
+
+  const onClick = (): void => {
+    const cookiesState = loadFromCookie<BannerCookiesType>(COOKIES_KEY)
+    if (!cookiesState) {
+      dispatch(openCookieBanner({ cookieBannerOpen: true }))
+      return
+    }
+    if (!cookiesState.acceptedSupportAndUpdates) {
+      dispatch(
+        openCookieBanner({
+          cookieBannerOpen: true,
+          key: COOKIE_IDS.BEAMER,
+        }),
+      )
+    }
+  }
+
+  return (
+    <WidgetContainer>
+      <WidgetTitle>&nbsp;</WidgetTitle>
+
+      <Track category="rebranding" action="banner-click">
+        <StyledContainer onClick={onClick} className="beamer-trigger" />
+      </Track>
+    </WidgetContainer>
+  )
+}
+
+export default RebrandingBanner

src/components/Dashboard/index.tsx

@@ -5,8 +5,8 @@ import PendingTxsList from './PendingTxs/PendingTxsList'
 import Overview from './Overview/Overview'
 import SafeApps from './SafeApps'
 import { FeaturedApps } from './FeaturedApps/FeaturedApps'
-import MobileAppBanner from './MobileAppBanner'
 import { DashboardTitle } from './styled'
+import RebrandingBanner from './RebrandingBanner'
 
 const Dashboard = (): ReactElement => {
   return (
@@ -17,7 +17,9 @@ const Dashboard = (): ReactElement => {
         <Overview />
       </Grid>
 
-      <MobileAppBanner />
+      <Grid item xs={12} md={12} lg={6}>
+        <RebrandingBanner />
+      </Grid>
 
       <Grid item xs={12} md={6}>
         <PendingTxsList size={4} />

src/utils/beamer.ts

@@ -27,7 +27,7 @@ export const loadBeamer = async (): Promise<void> => {
 
   window.beamer_config = {
     product_id: BEAMER_ID,
-    selector: 'whats-new-button',
+    selector: '.beamer-trigger',
     display: 'left',
     button: false,
     bounce: false,

src/utils/events/mobile-app-promotion.ts

@@ -1,35 +1,9 @@
 import { GTM_EVENT } from '../googleTagManager'
 
-const event = GTM_EVENT.CLICK
-const category = 'mobile-app-promotion'
-const surveyAction = 'dashboard-banner-survey'
-
 const MOBILE_APP_EVENTS = {
-  dashboardBannerClick: {
-    event,
-    category,
-    action: 'dashboard-banner-click',
-  },
-  alreadyUse: {
-    event,
-    category,
-    action: surveyAction,
-    label: 'already-use',
-  },
-  notInterested: {
-    event,
-    category,
-    action: surveyAction,
-    label: 'not-interested',
-  },
-  dashboardBannerClose: {
-    event,
-    category,
-    action: 'dashboard-banner-close',
-  },
   appstoreButtonClick: {
-    event,
-    category,
+    event: GTM_EVENT.CLICK,
+    category: 'mobile-app-promotion',
     action: 'appstore-button-click',
   },
 }