diff --git a/cypress/integration/smoke/dashboard.spec.js b/cypress/integration/smoke/dashboard.spec.js index c3306b656e..ea085bc505 100644 --- a/cypress/integration/smoke/dashboard.spec.js +++ b/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', () => { diff --git a/public/mobile-banner/1.png b/public/mobile-banner/1.png deleted file mode 100644 index daa70a1ceb..0000000000 Binary files a/public/mobile-banner/1.png and /dev/null differ diff --git a/public/mobile-banner/2.png b/public/mobile-banner/2.png deleted file mode 100644 index f4a083dbaf..0000000000 Binary files a/public/mobile-banner/2.png and /dev/null differ diff --git a/public/mobile-banner/3.png b/public/mobile-banner/3.png deleted file mode 100644 index 9aec3a035c..0000000000 Binary files a/public/mobile-banner/3.png and /dev/null differ diff --git a/public/mobile-banner/4.png b/public/mobile-banner/4.png deleted file mode 100644 index 64edc55816..0000000000 Binary files a/public/mobile-banner/4.png and /dev/null differ diff --git a/public/mobile-banner/5.png b/public/mobile-banner/5.png deleted file mode 100644 index bc490eb9a9..0000000000 Binary files a/public/mobile-banner/5.png and /dev/null differ diff --git a/public/mobile-banner/6.png b/public/mobile-banner/6.png deleted file mode 100644 index e623389882..0000000000 Binary files a/public/mobile-banner/6.png and /dev/null differ diff --git a/public/rebranding-banner.png b/public/rebranding-banner.png new file mode 100644 index 0000000000..befbca282a Binary files /dev/null and b/public/rebranding-banner.png differ diff --git a/src/components/AppLayout/Header/components/AnimatedLogo.tsx b/src/components/AppLayout/Header/components/AnimatedLogo.tsx index fed247a7a7..7771fd2f68 100644 --- a/src/components/AppLayout/Header/components/AnimatedLogo.tsx +++ b/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 + return } export default AnimatedLogo diff --git a/src/components/AppLayout/Header/components/Layout.tsx b/src/components/AppLayout/Header/components/Layout.tsx index 18a75394f7..f5ea4442e9 100644 --- a/src/components/AppLayout/Header/components/Layout.tsx +++ b/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', diff --git a/src/components/AppLayout/Sidebar/index.tsx b/src/components/AppLayout/Sidebar/index.tsx index 5afe6d47be..9ef669a3ff 100644 --- a/src/components/AppLayout/Sidebar/index.tsx +++ b/src/components/AppLayout/Sidebar/index.tsx @@ -131,7 +131,7 @@ const Sidebar = ({ {!isDesktop && BEAMER_ID && ( - + What's new diff --git a/src/components/Dashboard/MobileAppBanner/index.tsx b/src/components/Dashboard/MobileAppBanner/index.tsx deleted file mode 100644 index b0ffb6b76e..0000000000 --- a/src/components/Dashboard/MobileAppBanner/index.tsx +++ /dev/null @@ -1,173 +0,0 @@ -import { ReactElement, useCallback, useState } from 'react' -import styled from 'styled-components' -import { Grid } from '@material-ui/core' -import { Button } from '@gnosis.pm/safe-react-components' -import AppstoreButton from 'src/components/AppstoreButton' -import { trackEvent, CustomEvent } from 'src/utils/googleTagManager' -import useCachedState from 'src/utils/storage/useCachedState' -import MOBILE_APP_EVENTS from 'src/utils/events/mobile-app-promotion' -import { WidgetTitle } from '../styled' - -const MAX_SLIDES = 5 -const CLOSE_SLIDE = 6 -const localStorageKey = 'mobileBannerClosed' - -const StyledContainer = styled.div` - position: relative; - width: 480px; - height: 224px; -` - -const StyledBanner = styled.div` - background-color: ${(props) => props.theme.colors.white}; - border-radius: 8px; - background-position: 0 0; - background-repeat: no-repeat; - background-size: 100%; - background-image: ${({ $count }: { $count: number }) => `url(./mobile-banner/${$count}.png)`}; - transition: background-image 100ms linear; - cursor: ${({ $count }: { $count: number }) => ($count === 1 ? 'default' : 'pointer')}; - height: 100%; - width: 100%; - - &:after { - content: ''; - background-image: ${({ $count }: { $count: number }) => - $count !== CLOSE_SLIDE ? `url(./mobile-banner/${$count + 1}.png)` : 'none'}; - } - - &:before { - content: ''; - position: absolute; - z-index: 2; - right: 24px; - bottom: 27px; - width: 119px; - height: 38px; - cursor: pointer; - } -` - -const StyledAppstoreButton = styled.div` - position: absolute; - z-index: 2; - left: 37px; - bottom: 27px; - opacity: 0; - cursor: pointer; -` - -const StyledCloseButton = styled.button` - position: absolute; - z-index: 2; - right: 21px; - top: 22px; - opacity: 0.5; - width: 20px; - height: 20px; - cursor: pointer; - opacity: 0; -` - -const StyledBackButton = styled.button` - position: absolute; - z-index: 2; - left: 38px; - bottom: 30px; - opacity: 0.5; - width: 35px; - height: 35px; - cursor: pointer; - opacity: 0; -` - -const StyledButtons = styled.div` - position: absolute; - z-index: 2; - left: 22px; - bottom: 30px; - cursor: pointer; - opacity: 0; -` - -const UserSurvey = ({ onDone }: { onDone: () => void }): ReactElement => { - const onReply = useCallback( - (event: CustomEvent) => { - trackEvent(event) - - setTimeout(() => { - onDone() - }, 300) - }, - [onDone], - ) - - return ( - <> - - - - - - - - - ) -} - -const MobileAppBanner = (): ReactElement | null => { - const [count, setCount] = useState(1) - const [closing, setClosing] = useState(false) - const [closed, setClosed] = useCachedState(localStorageKey) - - const onClick = useCallback(() => { - setCount((prevCount) => (prevCount === MAX_SLIDES ? 1 : prevCount + 1)) - trackEvent(MOBILE_APP_EVENTS.dashboardBannerClick) - }, []) - - const onBack = useCallback(() => { - setCount((prevCount) => (prevCount === 1 ? MAX_SLIDES : prevCount - 1)) - trackEvent(MOBILE_APP_EVENTS.dashboardBannerClick) - }, []) - - const onClose = useCallback(() => { - setClosing(true) - trackEvent(MOBILE_APP_EVENTS.dashboardBannerClose) - }, []) - - const onDone = useCallback(() => { - setClosed(true) - }, [setClosed]) - - return closed ? null : ( - -   - - - {closing ? ( - - ) : ( - <> - - - - - - - {count === 1 && ( - - - - )} - - )} - - - ) -} - -export default MobileAppBanner diff --git a/src/components/Dashboard/RebrandingBanner/index.tsx b/src/components/Dashboard/RebrandingBanner/index.tsx new file mode 100644 index 0000000000..f8aedd0979 --- /dev/null +++ b/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(COOKIES_KEY) + if (!cookiesState) { + dispatch(openCookieBanner({ cookieBannerOpen: true })) + return + } + if (!cookiesState.acceptedSupportAndUpdates) { + dispatch( + openCookieBanner({ + cookieBannerOpen: true, + key: COOKIE_IDS.BEAMER, + }), + ) + } + } + + return ( + +   + + + + + + ) +} + +export default RebrandingBanner diff --git a/src/components/Dashboard/index.tsx b/src/components/Dashboard/index.tsx index 264505f398..f26188c794 100644 --- a/src/components/Dashboard/index.tsx +++ b/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 => { - + + + diff --git a/src/utils/beamer.ts b/src/utils/beamer.ts index 721732b8e4..65fcc16d87 100644 --- a/src/utils/beamer.ts +++ b/src/utils/beamer.ts @@ -27,7 +27,7 @@ export const loadBeamer = async (): Promise => { window.beamer_config = { product_id: BEAMER_ID, - selector: 'whats-new-button', + selector: '.beamer-trigger', display: 'left', button: false, bounce: false, diff --git a/src/utils/events/mobile-app-promotion.ts b/src/utils/events/mobile-app-promotion.ts index 4694889a61..021004fabd 100644 --- a/src/utils/events/mobile-app-promotion.ts +++ b/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', }, }