feat: add cookies modal

cardano-foundation · May 23, 2024 · cbf8ad2 · cbf8ad2
1 parent 8cd4772
commit cbf8ad2
Show file tree

Hide file tree

Showing 5 changed files with 132 additions and 29 deletions.
diff --git a/ui/summit-2024/src/App.tsx b/ui/summit-2024/src/App.tsx
@@ -5,6 +5,7 @@ import Header from "./components/common/Header/Header";
 import { PageRouter } from "./routes";
 import { Footer } from "./components/common/Footer/Footer";
 import { TermsAndConditionsModal } from "./components/LegalOptInModal/TermsAndConditionsModal";
+import {Cookies} from "./components/LegalOptInModal/Cookies";
 
 const eventCache = {
   id: "1",
@@ -46,6 +47,7 @@ function App() {
               <Footer />
             </Grid>
           </Grid>
+          <Cookies />
           <TermsAndConditionsModal />
         </Container>
       </BrowserRouter>

diff --git a/ui/summit-2024/src/common/constants/local.ts b/ui/summit-2024/src/common/constants/local.ts
@@ -1,3 +1,4 @@
 const USER_SESSION_KEY = "userInSession";
 const CB_TERMS_AND_PRIVACY = "CB_TERMS_AND_PRIVACY";
-export { USER_SESSION_KEY, CB_TERMS_AND_PRIVACY };
+const CB_COOKIES = "CB_COOKIES";
+export { USER_SESSION_KEY, CB_TERMS_AND_PRIVACY, CB_COOKIES };
diff --git a/ui/summit-2024/src/components/LegalOptInModal/Cookies.tsx b/ui/summit-2024/src/components/LegalOptInModal/Cookies.tsx
@@ -0,0 +1,114 @@
+import Modal from "../common/Modal/Modal";
+import {useLocalStorage} from "../../common/hooks/useLocalStorage";
+import {CB_COOKIES} from "../../common/constants/local";
+import {Box, Button, Typography} from "@mui/material";
+
+export enum CookiesStatus {
+    ACCEPT = "ACCEPT",
+    REJECT = "REJECT"
+}
+
+const Cookies = () => {
+    const [cookies, setCookies] =
+        useLocalStorage(CB_COOKIES, undefined);
+
+    const handleAccept = (status?:string) => {
+        setCookies(status || CookiesStatus.ACCEPT)
+    }
+
+    const handleReject = () => {
+        setCookies(true)
+    }
+
+    const handlePrivacyPolicy = () => {
+        // TODO: open privacy and policy page
+    }
+
+    return (
+        <>
+            <Modal
+                id="connect-wallet-modal"
+                isOpen={!cookies}
+                name="connect-wallet-modal"
+                title="Cookie Policy"
+                width={"620px"}
+                onClose={() => setCookies(CookiesStatus.REJECT)}
+                onBack={() => setCookies(CookiesStatus.REJECT)}
+                disableBackdropClick
+            >
+                <Box sx={{
+                    padding: 2,
+                    borderRadius: 1,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    gap: 2
+                }}>
+                    <Typography sx={{
+                        color: 'var(--neutralLight, #D2D2D9)',
+                        fontSize: '16px',
+                        fontWeight: 500,
+                        lineHeight: '24px',
+                        textAlign: 'center'
+                    }}>
+                        We use cookies on this website to help improve your overall experience. By clicking accept you agree to our privacy policy.
+                    </Typography>
+                    <Box sx={{ display: 'flex', gap: 1 }}>
+                        <Button onClick={handlePrivacyPolicy} sx={{
+                            display: 'flex',
+                            width: '180px',
+                            padding: '16px 24px',
+                            justifyContent: 'center',
+                            alignItems: 'center',
+                            borderRadius: '12px',
+                            border: '1px solid var(--orange, #EE9766)',
+                            color: 'var(--orange, #EE9766)',
+                            fontSize: '16px',
+                            fontWeight: 500,
+                            lineHeight: '24px',
+                            textTransform: "none"
+                        }}>
+                            Privacy Policy
+                        </Button>
+                        <Button onClick={handleReject} sx={{
+                            display: 'flex',
+                            width: '180px',
+                            padding: '16px 24px',
+                            justifyContent: 'center',
+                            alignItems: 'center',
+                            borderRadius: '12px',
+                            border: '1px solid var(--orange, #EE9766)',
+                            color: 'var(--orange, #EE9766)',
+                            fontSize: '16px',
+                            fontWeight: 500,
+                            lineHeight: '24px',
+                            textTransform: "none"
+                        }}>
+                            Reject
+                        </Button>
+                        <Button onClick={handleAccept} sx={{
+                            display: 'flex',
+                            width: '180px',
+                            padding: '16px 24px',
+                            justifyContent: 'center',
+                            alignItems: 'center',
+                            borderRadius: '12px',
+                            background: 'linear-gradient(70deg, #0C7BC5 -105.24%, #40407D -53.72%, #EE9766 -0.86%, #EE9766 103.82%)',
+                            color: 'var(--neutralDarkest, #121212)',
+                            fontSize: '16px',
+                            fontWeight: 500,
+                            lineHeight: '24px',
+                            textTransform: "none"
+                        }}>
+                            Accept
+                        </Button>
+                    </Box>
+                </Box>
+            </Modal>
+        </>
+    )
+}
+
+export {
+    Cookies
+}
diff --git a/ui/summit-2024/src/components/LegalOptInModal/TermsAndConditionsModal.tsx b/ui/summit-2024/src/components/LegalOptInModal/TermsAndConditionsModal.tsx
@@ -15,29 +15,7 @@ import {TabsSegment} from "../common/TabPanel/TabsSegment";
 import termsData from "../../common/resources/data/termsAndConditions.json";
 import privacyData from "../../common/resources/data/privacyPolicy.json";
 import theme from "../../common/styles/theme";
-import {List} from "./TermsAndConditionsModal.type";
-
-interface ExtraDetails {
-    [key: string]: string;
-}
-
-interface Subsection {
-    title: string;
-    content: string[];
-    extras?: ExtraDetails;
-}
-
-interface Section {
-    title: string;
-    subsections: Subsection[];
-}
-
-interface PrivacyPolicyData {
-    title: string;
-    date: string;
-    description: string[];
-    sections: Section[];
-}
+import {ExtraDetails, List} from "./TermsAndConditionsModal.type";
 
 const TermsAndConditionsModal = () => {
     const isMobile = useIsPortrait();
@@ -152,18 +130,18 @@ const TermsAndConditionsModal = () => {
             case 1: {
                 const renderExtras = (extras: ExtraDetails) => {
                     return Object.entries(extras).map(([key, value], index) => (
-                        <Typography key={index} sx={{ color: 'var(--neutralLight, #D2D2D9)', fontFamily: 'Roboto', fontSize: '16px', fontStyle: 'normal', fontWeight: 500, lineHeight: '24px', mt: 1 }} dangerouslySetInnerHTML={{ __html: value }} />
+                        <Typography key={index} sx={{ color: 'var(--neutralLight, #D2D2D9)', fontSize: '16px', fontStyle: 'normal', fontWeight: 500, lineHeight: '24px', mt: 1 }} dangerouslySetInnerHTML={{ __html: value }} />
                     ));
                 };
                 return <>
                     <Typography sx={{ color: 'var(--neutralLightest, #FAF9F6)', fontFamily: 'Dosis', fontSize: '32px', fontStyle: 'normal', fontWeight: 700, lineHeight: '36px' }}>
                         {privacyData.title}
                     </Typography>
-                    <Typography sx={{ color: 'var(--neutralLight, #D2D2D9)', fontFamily: 'Roboto', fontSize: '16px', fontStyle: 'normal', fontWeight: 500, lineHeight: '24px' }}>
+                    <Typography sx={{ color: 'var(--neutralLight, #D2D2D9)', fontSize: '16px', fontStyle: 'normal', fontWeight: 500, lineHeight: '24px' }}>
                         {privacyData.date}
                     </Typography>
                     {privacyData.description.map((paragraph, index) => (
-                        <Typography key={index} sx={{ color: 'var(--neutralLight, #D2D2D9)', fontFamily: 'Roboto', fontSize: '16px', fontStyle: 'normal', fontWeight: 500, lineHeight: '24px' }}>
+                        <Typography key={index} sx={{ color: 'var(--neutralLight, #D2D2D9)', fontSize: '16px', fontStyle: 'normal', fontWeight: 500, lineHeight: '24px' }}>
                             {paragraph}
                         </Typography>
                     ))}
@@ -182,7 +160,7 @@ const TermsAndConditionsModal = () => {
                                         {subsection.title}
                                     </Typography>
                                     {subsection.content.map((content, contentIndex) => (
-                                        <Typography key={contentIndex} sx={{ color: 'var(--neutralLight, #D2D2D9)', fontFamily: 'Roboto', fontSize: '16px', fontStyle: 'normal', fontWeight: 500, lineHeight: '24px', mt: 1 }}>
+                                        <Typography key={contentIndex} sx={{ color: 'var(--neutralLight, #D2D2D9)', fontSize: '16px', fontStyle: 'normal', fontWeight: 500, lineHeight: '24px', mt: 1 }}>
                                             {content}
                                         </Typography>
                                     ))}
@@ -227,7 +205,8 @@ const TermsAndConditionsModal = () => {
         <Dialog
             open={!termsAndConditionsChecked}
             keepMounted
-            onClose={() => setTermsAndConditionsChecked(true)}
+            disableBackdropClick
+            onClose={() => setTermsAndConditionsChecked(false)}
             scroll={'paper'}
             maxWidth={isMobile ? 'sm' : 'md'}
             sx={{
@@ -236,6 +215,7 @@ const TermsAndConditionsModal = () => {
             }}
             aria-labelledby='terms-modal-title'
             aria-describedby='terms-modal-description'
+
         >
             <DialogTitle  sx={{backgroundColor: theme.palette.background.default}} >
                 <TabsSegment tabs={tabs} currentTab={currentTab} setCurrentTab={(tab) => setCurrentTab(tab)}/>

diff --git a/ui/summit-2024/src/components/LegalOptInModal/TermsAndConditionsModal.type.tsx b/ui/summit-2024/src/components/LegalOptInModal/TermsAndConditionsModal.type.tsx
@@ -1,7 +1,12 @@
+
 interface Definition {
     [key: string]: string;
 }
 
+interface ExtraDetails {
+    [key: string]: string;
+}
+
 interface Subsection {
     title: string;
     content: string[];
@@ -49,6 +54,7 @@ interface TermsData {
 
 export {
     Definition,
+    ExtraDetails,
     Subsection,
     Section,
     List,