feat: cookie consent

nventive · Aug 6, 2024 · 1c2508c · 1c2508c
1 parent 9db012e
commit 1c2508c
Show file tree

Hide file tree

Showing 39 changed files with 999 additions and 80 deletions.
diff --git a/frontend/index.html b/frontend/index.html
@@ -14,7 +14,7 @@
     />
     <title>React Template</title>
   </head>
-  <body>
+  <body id="body">
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>

diff --git a/frontend/package.json b/frontend/package.json
@@ -56,7 +56,7 @@
     "postcss": "^8.4.29",
     "prettier": "^3.3.2",
     "sass": "^1.77.6",
-    "sheet2i18n": "^1.0.2",
+    "sheet2i18n": "^1.1.2",
     "stylelint": "^16.6.1",
     "stylelint-config-prettier-scss": "^1.0.0",
     "stylelint-config-standard-scss": "^13.1.0",

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -1,4 +1,6 @@
 import Loading from "@components/loading/Loading";
+import CookieConsent from "@containers/cookieConsent/CookieConsent";
+import { hasConsent } from "@containers/cookieConsent/cookieConsentHelper";
 import DebugBanner from "@containers/debugBanner/DebugBanner";
 import Router from "@routes/Router";
 import "@shared/i18n";
@@ -9,16 +11,18 @@ import { ToastContainer } from "react-toastify";
 
 function App() {
   useEffect(() => {
-    ReactGA.initialize([
-      {
-        trackingId: __GA_TRACKING_ID__,
-      },
-    ]);
+    if (hasConsent("analytics"))
+      ReactGA.initialize([
+        {
+          trackingId: __GA_TRACKING_ID__,
+        },
+      ]);
   }, []);
 
   return (
     <Suspense fallback={<Loading />}>
       <DebugBanner />
+      <CookieConsent />
       <ToastContainer
         position="top-right"
         autoClose={5000}

diff --git a/frontend/src/app/components/accordion/Accordion.tsx b/frontend/src/app/components/accordion/Accordion.tsx
@@ -0,0 +1,24 @@
+import {
+  AccordionProps,
+  Accordion as MuiAccordion,
+  styled,
+} from "@mui/material";
+import style from "@styles/style.module.scss";
+
+const StyledMuiAccordion = styled(MuiAccordion)({
+  border: `1px solid ${style["stone-veryLight"]}`,
+  "&:not(:last-child)": {
+    borderBottom: 0,
+  },
+  "&::before": {
+    display: "none",
+  },
+});
+
+export default function Accordion({ children, ...props }: AccordionProps) {
+  return (
+    <StyledMuiAccordion {...props} disableGutters elevation={0} square>
+      {children}
+    </StyledMuiAccordion>
+  );
+}
diff --git a/frontend/src/app/components/accordionSummary/AccordionSummary.tsx b/frontend/src/app/components/accordionSummary/AccordionSummary.tsx
@@ -0,0 +1,30 @@
+import CaretIcon from "@icons/CaretIcon";
+import {
+  AccordionSummaryProps,
+  AccordionSummary as MuiAccordionSummary,
+  styled,
+} from "@mui/material";
+import style from "@styles/style.module.scss";
+
+const StyledMuiAccordionSummary = styled(MuiAccordionSummary)({
+  flexDirection: "row-reverse",
+  "& .MuiAccordionSummary-expandIconWrapper.Mui-expanded": {
+    transform: "rotate(90deg)",
+  },
+  "& .MuiAccordionSummary-content": {
+    marginLeft: style["spacing-md"],
+    alignItems: "center",
+  },
+});
+
+export default function AccordionSummary({
+  children,
+  expandIcon = <CaretIcon width={16} height={16} />,
+  ...props
+}: AccordionSummaryProps) {
+  return (
+    <StyledMuiAccordionSummary {...props} expandIcon={expandIcon}>
+      {children}
+    </StyledMuiAccordionSummary>
+  );
+}
diff --git a/frontend/src/app/components/button/Button.tsx b/frontend/src/app/components/button/Button.tsx
@@ -2,7 +2,7 @@ import { ButtonProps, Button as MuiButton, styled } from "@mui/material";
 import style from "@styles/style.module.scss";
 
 const StyledMuiButton = styled(MuiButton)({
-  borderRadius: style["border-radius-lg"],
+  borderRadius: style["border-radius-xs"],
 });
 
 interface IButton extends ButtonProps {

diff --git a/frontend/src/app/components/dialog/Dialog.tsx b/frontend/src/app/components/dialog/Dialog.tsx
@@ -0,0 +1,32 @@
+import Slide from "@components/slide/Slide";
+import { DialogProps, Dialog as MuiDialog, styled } from "@mui/material";
+import { TransitionProps } from "@mui/material/transitions";
+import style from "@styles/style.module.scss";
+import { forwardRef, JSXElementConstructor, ReactElement, Ref } from "react";
+
+const StyledMuiDialog = styled(MuiDialog)({
+  "& .MuiDialog-paper": {
+    margin: style["spacing-md"],
+  },
+});
+
+const Transition = forwardRef(function Transition(
+  props: TransitionProps & {
+    children: ReactElement<unknown, JSXElementConstructor<unknown>>;
+  },
+  ref: Ref<unknown>,
+) {
+  return <Slide direction="up" ref={ref} {...props} timeout={500} />;
+});
+
+export default function Dialog({ ...props }: DialogProps) {
+  return (
+    <StyledMuiDialog
+      disableScrollLock
+      TransitionComponent={Transition}
+      {...props}
+    >
+      {props.children}
+    </StyledMuiDialog>
+  );
+}
diff --git a/frontend/src/app/components/iconButton/IconButton.tsx b/frontend/src/app/components/iconButton/IconButton.tsx
@@ -0,0 +1,5 @@
+import { IconButtonProps, IconButton as MuiIconButton } from "@mui/material";
+
+export default function IconButton({ ...props }: IconButtonProps) {
+  return <MuiIconButton {...props} />;
+}
diff --git a/frontend/src/app/components/layout/layout.scss b/frontend/src/app/components/layout/layout.scss
@@ -8,15 +8,15 @@
     align-items: center;
     background-color: get-color(basic, background);
 
-    @media screen and (min-width: get-media(md)) {
+    @media (min-width: get-media(md)) {
       padding: get-spacing(lg);
     }
 
-    @media screen and (min-width: get-media(lg)) {
+    @media (min-width: get-media(lg)) {
       padding: get-spacing(lg) 4rem;
     }
 
-    @media screen and (min-width: get-media(xl)) {
+    @media (min-width: get-media(xl)) {
       padding: get-spacing(lg) 6rem;
     }
 
@@ -34,7 +34,7 @@
     align-items: center;
     background-color: get-color(basic, background);
 
-    @media screen and (min-width: get-media(xs)) {
+    @media (min-width: get-media(xs)) {
       flex: 1 1 auto;
     }
 
@@ -43,7 +43,7 @@
       padding: get-spacing(md);
       background-color: get-color(basic, brightest);
 
-      @media screen and (min-width: get-media(xs)) {
+      @media (min-width: get-media(xs)) {
         max-width: 442px;
         border-radius: get-border-radius(md);
         padding: get-spacing(xl);

diff --git a/frontend/src/app/components/slide/Slide.tsx b/frontend/src/app/components/slide/Slide.tsx
@@ -0,0 +1,9 @@
+import { Slide as MuiSlide, SlideProps } from "@mui/material";
+
+export default function Slide({
+  direction = "up",
+  timeout = 500,
+  ...props
+}: SlideProps) {
+  return <MuiSlide direction={direction} timeout={timeout} {...props} />;
+}
diff --git a/frontend/src/app/components/switch/Switch.tsx b/frontend/src/app/components/switch/Switch.tsx
@@ -0,0 +1,39 @@
+import { Switch as MuiSwitch, styled, SwitchProps } from "@mui/material";
+import style from "@styles/style.module.scss";
+
+const StyledMuiSwitch = styled(MuiSwitch)({
+  padding: style["spacing-xs"],
+  transform: "scale(1.125)",
+
+  "& .MuiSwitch-track": {
+    borderRadius: style["border-radius-md"],
+
+    "&::before, &::after": {
+      content: '""',
+      position: "absolute",
+      top: "50%",
+      transform: "translateY(-50%)",
+      width: 16,
+      height: 16,
+    },
+    "&::before": {
+      backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 24 24"><path fill="%23fff" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"/></svg>')`,
+      left: 12,
+    },
+    "&::after": {
+      backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 24 24"><path fill="%23fff" d="M19,13H5V11H19V13Z" /></svg>')`,
+      right: 12,
+    },
+  },
+
+  "& .MuiSwitch-thumb": {
+    boxShadow: "none",
+    width: 16,
+    height: 16,
+    margin: 2,
+  },
+});
+
+export default function Switch({ ...props }: SwitchProps) {
+  return <StyledMuiSwitch {...props} />;
+}
diff --git a/frontend/src/app/components/table/Table.tsx b/frontend/src/app/components/table/Table.tsx
@@ -0,0 +1,30 @@
+import {
+  Table as MuiTable,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableProps,
+  TableRow,
+} from "@mui/material";
+
+interface ITable extends TableProps {
+  columnTitles: Array<string>;
+}
+
+export default function Table({ children, columnTitles, ...props }: ITable) {
+  return (
+    <TableContainer>
+      <MuiTable {...props}>
+        <TableHead>
+          <TableRow>
+            {columnTitles.map((columnTitle, index) => (
+              <TableCell key={index}>{columnTitle}</TableCell>
+            ))}
+          </TableRow>
+        </TableHead>
+        <TableBody>{children}</TableBody>
+      </MuiTable>
+    </TableContainer>
+  );
+}
diff --git a/frontend/src/app/components/tableRow/TableRow.tsx b/frontend/src/app/components/tableRow/TableRow.tsx
@@ -0,0 +1,28 @@
+import {
+  TableRow as MuiTableRow,
+  styled,
+  TableCell,
+  TableRowProps,
+} from "@mui/material";
+import style from "@styles/style.module.scss";
+
+interface ITableRow extends TableRowProps {
+  columns: Array<string>;
+}
+
+const StyledMuiTableRow = styled(MuiTableRow)({
+  "&:last-child td, &:last-child th": { border: 0 },
+  "&:nth-of-type(odd)": {
+    backgroundColor: style["basic-background"],
+  },
+});
+
+export default function TableRowRow({ columns, ...props }: ITableRow) {
+  return (
+    <StyledMuiTableRow {...props}>
+      {columns.map((column, index) => (
+        <TableCell key={index}>{column}</TableCell>
+      ))}
+    </StyledMuiTableRow>
+  );
+}