feat: show disclaimer as popup when opening partner links (#200)

Co-authored-by: James Mealy <[email protected]>
safe-global · Aug 30, 2024 · 9c57b1a · 9c57b1a
1 parent 4c084d7
commit 9c57b1a
Show file tree

Hide file tree

Showing 6 changed files with 162 additions and 60 deletions.
diff --git a/src/components/DisclaimerLink/index.tsx b/src/components/DisclaimerLink/index.tsx
@@ -0,0 +1,77 @@
+import type { ReactElement } from 'react'
+import { Box, Button, Divider, Paper, Stack, Typography } from '@mui/material'
+import css from './styles.module.css'
+import { InfoOutlined } from '@mui/icons-material'
+import { SAFE_TERMS_AND_CONDITIONS_URL } from '@/config/constants'
+import { ExternalLink } from '../ExternalLink'
+
+export const DisclaimerLink = ({
+  title,
+  buttonText,
+  href,
+  onCancel,
+  onAccept,
+}: {
+  title: string
+  buttonText?: string
+  href: string
+  onCancel: () => void
+  onAccept: () => void
+}): ReactElement => {
+  return (
+    <div className={css.container}>
+      <Paper sx={{ p: 3 }}>
+        <Stack padding="var(--space-3)" gap={2} display="flex" alignItems="center" mb={3}>
+          <Box>
+            <InfoOutlined />
+          </Box>
+          <Typography variant="h3" fontWeight={700}>
+            {title}
+          </Typography>
+          <Typography variant="body2" mb={1}>
+            <b>
+              Safe{'{'}Pass{'}'}Partner third party app.{' '}
+            </b>{' '}
+            <br />
+            By accessing third party applications provided by a partner of Safe
+            {'{'}Pass{'}'} Program (&quot;Partner&quot; and/or &quot;Safe{'{'}Pass{'}'}Partner&quot;) you acknowledge
+            and agree that Safe Ecosystem Foundation and/or Safe{'{'}Wallet{'}'} do not own, control, maintain, or audit
+            these third party applications of Partner and that Safe Ecosystem Foundation and/or Safe{'{'}Wallet{'}'} may
+            not be held liable for any loss you may incur in connection with your interaction with the Safe{'{'}Pass
+            {'}'}Partner third party applications and/or programs and we may not be held liable for any and all legal,
+            regulatory, and/or material defects related to the rewards and/or the reward programs provided by Safe{'{'}
+            Pass{'}'}
+            Partner. <br />
+            <br />
+            Safe{'{'}Pass{'}'}Partners are solely responsible for ensuring that their rewards and/or partner reward
+            programs are operated in accordance with applicable laws and regulations and in accordance with their
+            respective terms as published by Partner, including when such rewards are granted for your use of Partner
+            services via your Safe Account, or when listed on our website and/or announced on our social media and the
+            like. <br />
+            <br />
+            Please{' '}
+            <ExternalLink href={SAFE_TERMS_AND_CONDITIONS_URL} sx={{ fontSize: '12px !important' }}>
+              read our terms
+            </ExternalLink>{' '}
+            for further information.
+          </Typography>
+        </Stack>
+        <Divider sx={{ ml: -3, mr: -3 }} />
+        <Typography variant="body2" mt={3}>
+          By clicking <i>Continue</i> you confirm to have read and understood our terms and this message, and agree to
+          them.
+        </Typography>
+        <Box display="flex" justifyContent="center" gap={3} mt={3}>
+          <Button variant="text" onClick={onCancel} color="secondary">
+            Cancel
+          </Button>
+          <Button variant="contained" href={href} rel="noopener noreferrer" target="_blank" onClick={onAccept}>
+            {buttonText}
+          </Button>
+        </Box>
+      </Paper>
+    </div>
+  )
+}
+
+export default DisclaimerLink
diff --git a/src/components/DisclaimerLink/styles.module.css b/src/components/DisclaimerLink/styles.module.css
@@ -0,0 +1,14 @@
+.container {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.iconCircle {
+  color: var(--color-info-main);
+  border-radius: 50%;
+  display: flex;
+  padding: var(--space-1);
+  background: #d7f6ff;
+}
diff --git a/src/components/ExternalLink/index.tsx b/src/components/ExternalLink/index.tsx
@@ -1,41 +1,82 @@
-import { Button, Link } from '@mui/material'
+import { Button, Dialog, Link } from '@mui/material'
 import type { LinkProps } from '@mui/material'
-import { CSSProperties, forwardRef, ReactElement } from 'react'
+import { CSSProperties, forwardRef, ReactElement, useState } from 'react'
 
 import LinkIcon from '@/public/images/link.svg'
 import Track from '../Track'
 import { NAVIGATION_EVENTS } from '@/analytics/navigation'
+import { localItem } from '@/services/storage/local'
+import DisclaimerLink from '../DisclaimerLink'
 
 const styles: CSSProperties = {
   marginLeft: '4px',
 }
 
 export const ExternalLink = forwardRef<
   HTMLAnchorElement,
-  LinkProps & { href: string; icon?: boolean; variant?: string }
->(({ children, icon = true, variant = 'link', href, ...props }, ref): ReactElement => {
+  LinkProps & { href: string; icon?: boolean; variant?: string; isPartner?: boolean }
+>(({ children, isPartner = false, icon = true, variant = 'link', href, ...props }, ref): ReactElement => {
+  const DISCLAIMER_ACCEPTED_KEY = 'disclaimerAccepted'
+  const disclaimerAccepted = localItem<boolean>(DISCLAIMER_ACCEPTED_KEY)
+
+  const isDisclaimerAccepted = disclaimerAccepted.get()
+
+  const [showDisclaimer, setShowDisclaimer] = useState(false)
+
+  const triggerDisclaimer = !isDisclaimerAccepted && isPartner
+
+  const onClick = triggerDisclaimer
+    ? () => {
+        setShowDisclaimer(true)
+      }
+    : undefined
+
+  const onAccept = () => {
+    setShowDisclaimer(false)
+    disclaimerAccepted.set(true)
+  }
+
   return (
-    <Track {...NAVIGATION_EVENTS.OPEN_EXTERNAL_LINK} label={href}>
-      {variant === 'button' ? (
-        <Button rel="noopener noreferrer" variant="outlined" href={href} target="_blank" sx={props.sx}>
-          {children}
-          {icon && <LinkIcon style={styles} />}
-        </Button>
-      ) : (
-        <Link
-          rel="noopener noreferrer"
+    <>
+      <Track {...NAVIGATION_EVENTS.OPEN_EXTERNAL_LINK} label={href}>
+        {variant === 'button' ? (
+          <Button
+            rel="noopener noreferrer"
+            variant="outlined"
+            href={triggerDisclaimer ? '' : href}
+            onClick={onClick}
+            target="_blank"
+            sx={props.sx}
+          >
+            {children}
+            {icon && <LinkIcon style={styles} />}
+          </Button>
+        ) : (
+          <Link
+            rel="noopener noreferrer"
+            href={triggerDisclaimer ? undefined : href}
+            target="_blank"
+            display="inline-flex"
+            alignItems="center"
+            onClick={onClick}
+            {...props}
+            ref={ref}
+          >
+            {children}
+            {icon && <LinkIcon style={styles} />}
+          </Link>
+        )}
+      </Track>
+      <Dialog open={showDisclaimer} onClose={() => setShowDisclaimer(false)} fullWidth>
+        <DisclaimerLink
+          onCancel={() => setShowDisclaimer(false)}
+          onAccept={onAccept}
           href={href}
-          target="_blank"
-          display="inline-flex"
-          alignItems="center"
-          {...props}
-          ref={ref}
-        >
-          {children}
-          {icon && <LinkIcon style={styles} />}
-        </Link>
-      )}
-    </Track>
+          title="Disclaimer"
+          buttonText="Continue"
+        />
+      </Dialog>
+    </>
   )
 })
 ExternalLink.displayName = 'ExternalLink'
diff --git a/src/components/Points/CampaignDisclaimer.tsx b/src/components/Points/CampaignDisclaimer.tsx
diff --git a/src/components/Points/CampaignPromo.tsx b/src/components/Points/CampaignPromo.tsx
@@ -102,14 +102,18 @@ export const CampaignPromo = () => {
         </Typography>
         <Typography variant="body2">& Safe points</Typography>
         <Typography variant="body2" color="text.secondary" mt={5}>
-          <ExternalLink href="https://dub.sh/morphocampaign">Learn more</ExternalLink> and participate in campaign:
+          <ExternalLink href="https://dub.sh/morphocampaign" isPartner>
+            Learn more
+          </ExternalLink>{' '}
+          and participate in campaign:
         </Typography>
         <Stack direction="row" alignItems="center" spacing={2} mt={2}>
-          <ExternalLink variant="button" color="primary" href={safeAppUrl} target="_blank">
+          <ExternalLink variant="button" color="primary" href={safeAppUrl} target="_blank" isPartner>
             Safe App
           </ExternalLink>
           <Typography>or</Typography>
           <ExternalLink
+            isPartner
             href="https://app.morpho.org/"
             target="_blank"
             variant="button"

diff --git a/src/components/Points/index.tsx b/src/components/Points/index.tsx
@@ -15,7 +15,6 @@ import { useTheme } from '@mui/material/styles'
 import { useGlobalCampaignId } from '@/hooks/useGlobalCampaignId'
 import { CampaignTitle } from './CampaignTitle'
 import { CampaignPromo } from './CampaignPromo'
-import { CampaignDisclaimer } from './CampaignDisclaimer'
 
 const Points = () => {
   const globalCampaignId = useGlobalCampaignId()
@@ -104,7 +103,6 @@ const Points = () => {
           {!isSmallScreen && <TotalPoints />}
           <CampaignPromo />
           <CampaignInfo campaign={campaign} />
-          <CampaignDisclaimer />
         </Stack>
       </Grid>
       <Grid item xs={12}>