Feat: cookie consent

package.json

@@ -45,6 +45,7 @@
     "is-electron": "^2.2.1",
     "react": "^17.0.1",
     "react-collapsible": "^2.8.3",
+    "react-cookie-consent": "^7.2.1",
     "react-countdown": "^2.3.2",
     "react-dom": "^17.0.1",
     "react-i18next": "^11.12.0",

src/App.jsx

@@ -2,6 +2,7 @@ import React, { useEffect } from "react";
 import { useSelector, useDispatch } from "react-redux";
 import { Route, HashRouter, Redirect, Switch } from "react-router-dom";
 
+import CookieConsentBanner from "./Components/CookieConsentBanner/CookieConsentBanner.jsx";
 import LoadingIndicator from "./Components/Indicators/LoadingIndicator/LoadingIndicator.jsx";
 import AuthenticatedLayout from "./Components/Layout/AuthenticatedLayout/AuthenticatedLayout.jsx";
 import CleanLayout from "./Components/Layout/CleanLayout/CleanLayout.jsx";
@@ -38,7 +39,7 @@ const App = () => {
   const user = useSelector((state) => state.login.user);
 
   const shouldLogin = !!user.token && !isLoggedIn;
-  const { SHOW_PLANS: showPlans } = window.VOCASCAN_CONFIG;
+  const { SHOW_PLANS: showPlans, BASE_URL: baseURL } = window.VOCASCAN_CONFIG;
 
   // Try login if token is set
   useEffect(() => {
@@ -85,6 +86,7 @@ const App = () => {
   if (!isLoggedIn) {
     return (
       <HashRouter>
+        {baseURL && <CookieConsentBanner />}
         <Switch>
           {showPlans && <Route path="/plans" component={SelectionScreen} />}
           <Route path="/login" component={() => <Login image={Image} />} />
@@ -104,6 +106,7 @@ const App = () => {
         <SnackbarProvider>
           <AuthenticatedLayout>
             <Guide />
+            <CookieConsentBanner />
             <Switch>
               <Route path="/addVocab" component={AddVocab} />
               <Route path="/learn" component={Learn} />

src/Components/CookieConsentBanner/CookieConsentBanner.jsx

@@ -0,0 +1,40 @@
+import React from "react";
+import CookieConsent from "react-cookie-consent";
+import { useTranslation } from "react-i18next";
+
+import { pages } from "../../utils/constants.js";
+
+import "./CookieConsentBanner.scss";
+
+import useLinkCreator from "../../hooks/useLinkCreator";
+
+const CookieConsentBanner = () => {
+  const { t } = useTranslation();
+
+  const { isValid: isPrivacyPolicyValid, url: privacyPolicyUrl } =
+    useLinkCreator({ path: pages.privacyPolicy });
+
+  return (
+    <>
+      {isPrivacyPolicyValid && window.VOCASCAN_CONFIG.ENV === "web" && (
+        <CookieConsent
+          buttonText={t("components.cookieConsent.accept")}
+          cookieName="redux-strings"
+          disableStyles
+        >
+          {t("components.cookieConsent.text")}
+          <a
+            className="cookie-consent-link"
+            href={privacyPolicyUrl}
+            target="_blank"
+            rel="noreferrer"
+          >
+            {t("components.cookieConsent.learnMore")}
+          </a>
+        </CookieConsent>
+      )}
+    </>
+  );
+};
+
+export default CookieConsentBanner;

src/Components/CookieConsentBanner/CookieConsentBanner.scss

@@ -0,0 +1,44 @@
+@import "../../colors";
+
+/* stylelint-disable selector-class-pattern */
+.CookieConsent {
+  width: 40%;
+  background: $color-background-inverse;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  color: $color-main-text-inverse;
+  position: absolute;
+  z-index: 999;
+  padding: 15px;
+  left: 0;
+  right: 0;
+  margin-left: auto;
+  margin-right: auto;
+
+  div {
+    margin: auto 0;
+  }
+
+  button {
+    background: $color-primary;
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+    color: $color-main-text-inverse;
+    cursor: pointer;
+    flex: 0 0 auto;
+    padding: 5px 10px;
+    margin-left: 15px;
+  }
+
+  .cookie-consent-link {
+    color: $color-primary;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+/* stylelint-enable selector-class-pattern */

src/i18n/locales/en/default.json

@@ -131,6 +131,11 @@
       "expired": "Expired",
       "copyToClip": "Invite code copied to clipboard",
       "copyToClipFailed": "Copy invite code to clipboard failed"
+    },
+    "cookieConsent": {
+      "text": "This website uses cookies to enhance the user experience. ",
+      "learnMore": "Learn more",
+      "accept": "I understand"
     }
   },
   "screens": {
@@ -236,10 +241,9 @@
       "heading": "Select your option",
       "vocascanCloud": {
         "heading": "Vocascan cloud",
-        "pro": ["No need of a server", "sync every device"],
+        "pro": ["No need of a server", "sync every device", "Always and everywhere reachable", "Completely free"],
         "contra": [
-          "Your data is stored on vocascan servers",
-          "Not available for now"
+          "Your data is stored on Vocascan servers"
         ],
         "button": "Start for free"
       },