Creating cookie consent component

.env

@@ -13,4 +13,6 @@ API_STAC_ENDPOINT='https://staging.openveda.cloud/api/stac'
 GOOGLE_FORM = 'https://docs.google.com/forms/d/e/1FAIpQLSfGcd3FDsM3kQIOVKjzdPn4f88hX8RZ4Qef7qBsTtDqxjTSkg/viewform?embedded=true'
 
 FEATURE_NEW_EXPLORATION = 'TRUE'
-SHOW_CONFIGURABLE_COLOR_MAP = 'FALSE'
+COOKIE_CONSENT_FORM = 'TRUE'
+SHOW_CONFIGURABLE_COLOR_MAP = 'FALSE'
+

app/scripts/components/common/cookie-consent/cookieConsent.spec.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+
+import { render, screen, fireEvent } from '@testing-library/react';
+import { CookieConsent } from './index';
+
+describe('Cookie consent form should render with correct content.', () => {
+  const cookieData = {
+    title: 'Cookie Consent',
+    copy: 'We use cookies to enhance your browsing experience and to help us understand how our website is used. These cookies allow us to collect data on site usage and improve our services based on your interactions. To learn more about it, see our [Privacy Policy](https://www.nasa.gov/privacy/#cookies)'
+  };
+  const onFormInteraction = jest.fn();
+  beforeEach(() => {
+    render(
+      <CookieConsent {...cookieData} onFormInteraction={onFormInteraction} />
+    );
+  });
+  it('Renders correct content', () => {
+    expect(
+      screen.getByRole('link', { name: 'Privacy Policy' })
+    ).toHaveAttribute('href', 'https://www.nasa.gov/privacy/#cookies');
+    expect(
+      screen.getByRole('button', { name: 'Decline Cookies' })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: 'Accept Cookies' })
+    ).toBeInTheDocument();
+    expect(screen.getByText('Cookie Consent')).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        'We use cookies to enhance your browsing experience and to help us understand how our website is used. These cookies allow us to collect data on site usage and improve our services based on your interactions. To learn more about it, see our'
+      )
+    ).toBeInTheDocument();
+  });
+
+  it('Check correct cookie initialization', () => {
+    const resultCookie = document.cookie;
+
+    expect(resultCookie).toBe(
+      'CookieConsent={"responded":false,"answer":false}'
+    );
+  });
+
+  it('Check correct cookie content on Decline click', () => {
+    const button = screen.getByRole('button', { name: 'Decline Cookies' });
+    fireEvent.click(button);
+    const resultCookie = document.cookie;
+    expect(resultCookie).toBe(
+      'CookieConsent={"responded":true,"answer":false}'
+    );
+  });
+
+  it('Check correct cookie content on Accept click', () => {
+    const button = screen.getByRole('button', { name: 'Accept Cookies' });
+    fireEvent.click(button);
+    const resultCookie = document.cookie;
+
+    expect(resultCookie).toBe('CookieConsent={"responded":true,"answer":true}');
+  });
+});

app/scripts/components/common/cookie-consent/index.scss

@@ -0,0 +1,24 @@
+.modal {
+  z-index: 999;
+  position: fixed;
+  max-width: 725px;
+  bottom: 65px;
+  @media screen and (min-width: 768px) {
+    bottom: 0;
+    right: 0;
+  }
+}
+.hide-modal {
+  bottom: -500px;
+  opacity: 0;
+  transition: bottom 1.125s ease-in-out 0.125s, opacity 1s ease-in-out 0.125s;
+}
+
+.close {
+  padding: 0;
+  & svg {
+    @media screen and (min-width: 768px) {
+      right: -50px;
+    }
+  }
+}

app/scripts/components/common/cookie-consent/index.tsx

@@ -0,0 +1,127 @@
+import React, { useState, useEffect } from 'react';
+
+import {
+  Alert,
+  Button,
+  ButtonGroup,
+  Link,
+  Icon
+} from '@trussworks/react-uswds';
+import './index.scss';
+
+interface CookieConsentProps {
+  title: string;
+  copy: string;
+  onFormInteraction: () => void;
+}
+
+export const CookieConsent = ({
+  title,
+  copy,
+  onFormInteraction
+}: CookieConsentProps) => {
+  const [cookieConsentResponded, SetCookieConsentResponded] = useState(Boolean);
+  const [cookieConsentAnswer, SetCookieConsentAnswer] = useState(Boolean);
+  const [closeConsent, setCloseConsent] = useState(Boolean);
+  //Setting expiration date for cookie to expire and re-ask user for consent.
+  const setCookieExpiration = () => {
+    const today = new Date();
+    today.setMonth(today.getMonth() + 3);
+    return today.toUTCString();
+  };
+
+  const setCookie = (cookieValue, closeConsent) => {
+    document.cookie = `CookieConsent=${JSON.stringify(
+      cookieValue
+    )}; path=/; expires=${closeConsent ? '0' : setCookieExpiration()}`;
+  };
+
+  const renderContent = () => {
+    const bracketsParenthRegex = /\[(.*?)\)/;
+    const interiroBracketsRegex = /\]\(/;
+
+    const parts = copy.split(bracketsParenthRegex);
+
+    const updatedContent = parts.map((item, key) => {
+      if (interiroBracketsRegex.test(item)) {
+        const linkParts = item.split(interiroBracketsRegex);
+
+        const newItem = (
+          /* eslint-disable react/no-array-index-key */
+
+          <Link key={key} href={linkParts[1]} target='_blank'>
+            {linkParts[0]}
+          </Link>
+        );
+        /* eslint-enable react/no-array-index-key */
+
+        return newItem;
+      }
+      return item;
+    });
+    return updatedContent;
+  };
+
+  useEffect(() => {
+    // if (readCookie('CookieConsent') ) {
+    //   console.log('document.cookie[CookieConsent]', readCookie('CookieConsent'))
+    const cookieValue = {
+      responded: cookieConsentResponded,
+      answer: cookieConsentAnswer
+    };
+
+      setCookie(cookieValue, closeConsent);
+      onFormInteraction();
+    // }
+  }, [cookieConsentResponded, cookieConsentAnswer]);
+
+  return (
+    <div
+      className={`modal margin-2 shadow-2 ${
+        cookieConsentResponded || closeConsent ? 'hide-modal' : ''
+      }`}
+    >
+      <Alert
+        type='info'
+        heading={title && title}
+        headingLevel='h1'
+        noIcon={true}
+        className='radius-lg'
+      >
+        <Button
+          type='button'
+          className='usa-modal__close close'
+          onClick={() => {
+            setCloseConsent(true);
+          }}
+        >
+          <Icon.Close />
+        </Button>
+
+        {copy && renderContent()}
+        <ButtonGroup className='padding-top-2'>
+          <Button
+            onClick={() => {
+              SetCookieConsentResponded(true);
+              SetCookieConsentAnswer(false);
+
+            }}
+            outline={true}
+            type='button'
+          >
+            Decline Cookies
+          </Button>
+          <Button
+            onClick={() => {
+              SetCookieConsentResponded(true);
+              SetCookieConsentAnswer(true);
+            }}
+            type='button'
+          >
+            Accept Cookies
+          </Button>
+        </ButtonGroup>
+      </Alert>
+    </div>
+  );
+};

app/scripts/components/common/cookie-consent/util.tsx

@@ -0,0 +1,11 @@
+export const readCookie = (name) => {
+    const nameEQ = name + '=';
+    const attribute = document.cookie.split(';');
+    for (let i = 0; i < attribute.length; i++) {
+      let c = attribute[i];
+      while (c.charAt(0) == ' ') c = c.substring(1, c.length);
+      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
+    }
+    return null;
+  };
+

app/scripts/components/common/layout-root/index.tsx

@@ -1,18 +1,26 @@
-import React, { ReactNode, useContext, useCallback } from 'react';
+import React, { ReactNode, useContext, useCallback, useEffect } from 'react';
 import { useDeepCompareEffect } from 'use-deep-compare';
 import styled from 'styled-components';
 import { Outlet } from 'react-router';
 import { reveal } from '@devseed-ui/animation';
+import { getCookieConsentFromVedaConfig } from 'veda';
 import MetaTags from '../meta-tags';
 import PageFooter from '../page-footer';
 import Banner from '../banner';
+import { CookieConsent } from '../cookie-consent';
+
 import { LayoutRootContext } from './context';
 
-import { useGoogleTagManager } from '$utils/use-google-tag-manager';
+import { setGoogleTagManager } from '$utils/use-google-tag-manager';
 
 import NavWrapper from '$components/common/nav-wrapper';
 import Logo from '$components/common/page-header/logo';
-import { mainNavItems, subNavItems} from '$components/common/page-header/default-config';
+import {
+  mainNavItems,
+  subNavItems
+} from '$components/common/page-header/default-config';
+
+import { checkEnvFlag } from '$utils/utils';
 
 const appTitle = process.env.APP_TITLE;
 const appDescription = process.env.APP_DESCRIPTION;
@@ -35,17 +43,58 @@ const PageBody = styled.div`
 `;
 
 function LayoutRoot(props: { children?: ReactNode }) {
+  const useConsentForm = checkEnvFlag(process.env.COOKIE_CONSENT_FORM);
+
+  const readCookie = (name) => {
+    const nameEQ = name + '=';
+    const attribute = document.cookie.split(';');
+    for (let i = 0; i < attribute.length; i++) {
+      let c = attribute[i];
+      while (c.charAt(0) == ' ') c = c.substring(1, c.length);
+      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
+    }
+    return null;
+  };
   const { children } = props;
+  let cookieContents;
+
+  function getCookie() {
+    if (document.cookie != '') {
+      const cookie = readCookie('CookieConsent');
+      if (cookie != null) {
+        cookieContents = JSON.parse(cookie);
+
+        cookieContents.answer && setGoogleTagManager();
+
+        return cookieContents;
+      }
+    }
+    cookieContents = 'NO COOKIE';
+  }
+
+  const cookieConsentContent = getCookieConsentFromVedaConfig();
+  const showForm = () => {
+    getCookie();
+
+    if (cookieContents === 'NO COOKIE') {
+      return true;
+    } else {
+      return !cookieContents.responded;
+    }
+  };
 
-  useGoogleTagManager();
+  useEffect(() => {
+    !useConsentForm && setGoogleTagManager();
+
+  }, []);
 
   const { title, thumbnail, description, banner, hideFooter } =
     useContext(LayoutRootContext);
 
   const truncatedTitle =
     title?.length > 32 ? `${title.slice(0, 32)}...` : title;
-
   const fullTitle = truncatedTitle ? `${truncatedTitle} — ` : '';
+
   return (
     <Page>
       <MetaTags
@@ -54,10 +103,20 @@ function LayoutRoot(props: { children?: ReactNode }) {
         thumbnail={thumbnail}
       />
       {banner && <Banner appTitle={title} {...banner} />}
-      <NavWrapper mainNavItems={mainNavItems} subNavItems={subNavItems} logo={<Logo />} />
+      <NavWrapper
+        mainNavItems={mainNavItems}
+        subNavItems={subNavItems}
+        logo={<Logo />}
+      />
       <PageBody id={PAGE_BODY_ID} tabIndex={-1}>
         <Outlet />
         {children}
+        {useConsentForm && showForm() && (
+          <CookieConsent
+            {...cookieConsentContent}
+            onFormInteraction={getCookie}
+          />
+        )}
       </PageBody>
       <PageFooter isHidden={hideFooter} />
     </Page>

app/scripts/components/home/index.tsx

@@ -25,6 +25,7 @@ import {
   ContentOverride
 } from '$components/common/page-overrides';
 
+
 const homeContent = getOverride('homeContent');
 
 const Connections = styled(Hug)`
@@ -112,10 +113,10 @@ const getCoverProps = () => {
 
     return author
       ? {
-          ...coverProps,
-          attributionAuthor: author.name,
-          attributionUrl: author.url
-        }
+        ...coverProps,
+        attributionAuthor: author.name,
+        attributionUrl: author.url
+      }
       : coverProps;
   } else {
     return {
@@ -138,9 +139,8 @@ function RootHome() {
     <PageMainContent>
       <LayoutProps
         title='Welcome'
-        banner={renderBanner? {...banner}: null}
+        banner={renderBanner ? { ...banner } : null}
       />
-
       <ComponentOverride with='homeHero'>
         <PageHeroHome
           title={homeContent?.data.title ?? `Welcome to the ${appTitle}`}
@@ -171,6 +171,7 @@ function RootHome() {
       </ComponentOverride>
 
       <ContentOverride with='homeContent'>
+
         <Audience />
 
         <FeaturedStories />