1  import { Box, Typography, useMediaQuery, useTheme } from '@mui/material';
  2  import React, { useEffect, useState } from 'react';
  3  import { CookieConsent as AnalyticsConsentBanner } from 'react-cookie-consent';
  4  import { Link } from 'src/components/primitives/Link';
  5  import { useRootStore } from 'src/store/root';
  6  import { useShallow } from 'zustand/shallow';
  7  
  8  export default function AnalyticsBanner() {
  9    const [optInAnalytics, optOutAnalytics, analyticsConfigOpen] = useRootStore(
 10      useShallow((store) => [store.acceptAnalytics, store.rejectAnalytics, store.analyticsConfigOpen])
 11    );
 12  
 13    const [bannerVisible, setBannerVisible] = useState(false);
 14  
 15    useEffect(() => {
 16      // Adds a delay before showing the banner.
 17      const timerId = setTimeout(() => {
 18        setBannerVisible(true);
 19      }, 1000); // Start sliding in after 1 second.
 20  
 21      return () => clearTimeout(timerId);
 22    }, []);
 23  
 24    const theme = useTheme();
 25  
 26    const { breakpoints } = useTheme();
 27    const isMobile = useMediaQuery(breakpoints.down('sm'));
 28  
 29    const hasUserMadeChoice =
 30      typeof window !== 'undefined' && localStorage.getItem('userAcceptedAnalytics') !== null;
 31  
 32    // Note: If they have already chosen don't show again unless configured from footer
 33    if (hasUserMadeChoice) return null;
 34  
 35    return (
 36      <>
 37        <AnalyticsConsentBanner
 38          buttonText={<Typography>Allow analytics </Typography>}
 39          declineButtonText={<Typography>Opt-out</Typography>}
 40          disableStyles={true}
 41          visible={analyticsConfigOpen ? 'show' : 'hidden'}
 42          flipButtons
 43          style={{
 44            background: theme.palette.background.paper,
 45            bottom: isMobile ? '24px' : '24px',
 46            right: isMobile ? '50%' : '24px',
 47            left: isMobile ? '50%' : 'auto',
 48            position: 'fixed',
 49            width: '400px',
 50            // height: '184px',
 51            gap: '16px',
 52            display: 'flex',
 53            flexDirection: 'column',
 54            flexFlow: 'column',
 55            justifyContent: 'space-between',
 56            alignItems: 'center',
 57            color: theme.palette.text.primary,
 58            marginBottom: '16px',
 59            fontSize: '14px',
 60            lineHeight: '20.02px',
 61            padding: '16px 16px',
 62            zIndex: 100,
 63            borderRadius: '12px',
 64            border: '0.5px solid rgba(235, 235, 239, 0.42)',
 65            boxShadow: '0px 0px 2px rgba(0, 0, 0, 0.2), 0px 2px 10px rgba(0, 0, 0, 0.1)',
 66            transition: 'transform 0.5s ease-out', // Add this
 67  
 68            transform: bannerVisible
 69              ? isMobile
 70                ? 'translateX(-50%)'
 71                : 'none'
 72              : 'translateX(100%) translateY(100%)',
 73          }}
 74          buttonStyle={{
 75            background: theme.palette.mode === 'dark' ? '#F7F7F9' : '#383D51',
 76            color: theme.palette.mode === 'dark' ? '#383D51' : '#F7F7F9',
 77  
 78            fontSize: '14px',
 79            borderRadius: '4px',
 80            margin: '0px',
 81            border: '1px solid #000',
 82            width: '172px',
 83            height: '36px',
 84            fontWeight: '700',
 85            cursor: 'pointer',
 86          }}
 87          declineButtonStyle={{
 88            // background:  '#F7F7F9',
 89            background: theme.palette.mode === 'dark' ? '#383D51' : '#F7F7F9',
 90            color: theme.palette.mode === 'dark' ? '#EAEBEF' : '#383D51',
 91  
 92            fontFamily: 'Inter',
 93            fontWeight: '500',
 94            lineHeight: '24px',
 95            fontSize: '14px',
 96            borderRadius: '4px',
 97            margin: '10px',
 98            // padding: '10px 20px',
 99            border: `1px solid ${theme.palette.mode === 'dark' ? '#383D51' : '#EAEBEF'}`,
100            width: '172px',
101            height: '36px',
102            // padding: '0px',
103            cursor: 'pointer',
104          }}
105          enableDeclineButton
106          onDecline={() => {
107            optOutAnalytics();
108          }}
109          onAccept={() => {
110            optInAnalytics();
111          }}
112          cookieName="userAcceptedAnalytics"
113        >
114          <Box>
115            We may employ on-the-spot tracking techniques during your browsing session to collect data
116            on your interactions, preferences, and behaviour. This data helps us personalise your
117            experience and improve our services. See our
118            <Link sx={{ color: theme.palette.info.main }} href="https://aave.com/privacy-policy/">
119              {' '}
120              Privacy Policy.
121            </Link>
122          </Box>
123        </AnalyticsConsentBanner>
124      </>
125    );
126  }