Merge pull request #662 from adamkendis/612-FRONT-cookieNotice

Cookie notice, privacy policy

src/App.jsx

@@ -7,6 +7,7 @@ import { getMetadataRequest } from '@reducers/metadata';
 
 import RouteChange from '@components/main/util/RouteChange';
 import actions from '@components/main/util/routeChangeActions';
+import CookieNotice from '@components/main/body/CookieNotice';
 import Routes from './Routes';
 import Header from './components/main/header/Header';
 import Footer from './components/main/footer/Footer';
@@ -26,10 +27,11 @@ const App = ({
       <Header />
       <Routes />
       <Switch>
-        <Route path="/(about|contact)" component={StaticFooter} />
+        <Route path="/(about|contact|privacy)" component={StaticFooter} />
         <Route path="/" component={Footer} />
       </Switch>
       <SnapshotRenderer />
+      <CookieNotice />
     </Router>
   );
 };

src/Routes.jsx

@@ -4,6 +4,7 @@ import {
   Route,
 } from 'react-router-dom';
 
+import PrivacyPolicy from '@components/privacyPolicy/PrivacyPolicy';
 import Contact from './components/contact/Contact';
 import About from './components/about/About';
 import Body from './components/main/body/Body';
@@ -13,6 +14,7 @@ export default function Routes() {
     <Switch>
       <Route path="/contact" component={Contact} />
       <Route path="/about" component={About} />
+      <Route path="/privacy" component={PrivacyPolicy} />
       <Route path="/comparison" component={Body} />
       <Route path="/" component={Body} />
     </Switch>

src/components/main/body/CookieNotice.jsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import PropTypes from 'proptypes';
+import { Link } from 'react-router-dom';
+import { connect } from 'react-redux';
+import { acceptCookies } from '@reducers/ui';
+
+import Button from '@components/common/Button';
+import Icon from '@components/common/Icon';
+
+
+const CookieNotice = ({
+  showCookieNotice,
+  acceptCookieNotice,
+}) => {
+  const handleClick = () => {
+    acceptCookieNotice();
+    sessionStorage.setItem('accept-cookies', true);
+  };
+
+  if (showCookieNotice) {
+    return (
+      <div className="cookie-notice">
+        <div className="cookie-title has-text is-size-6 has-text-weight-bold">
+          <Icon
+            id="tooltip-icon"
+            icon="info-circle"
+            size="small"
+            style={{ marginRight: '6px' }}
+          />
+          Cookies and Privacy Policy
+        </div>
+        <div className="text has-text is-size-7">
+          We use cookies and other tracking technologies to improve your browsing experience and to
+          better understand our website traffic. By browsing our website, you consent to our use of
+          cookies and other tracking technologies.&nbsp;
+          <Link to="/privacy">Learn more</Link>
+        </div>
+        <Button
+          id="cookie-notice"
+          label="Got it!"
+          size="small"
+          handleClick={handleClick}
+        />
+      </div>
+    );
+  }
+  return null;
+};
+
+const mapStateToProps = state => ({
+  showCookieNotice: !state.ui.cookiesAccepted,
+});
+
+const mapDispatchToProps = dispatch => ({
+  acceptCookieNotice: () => dispatch(acceptCookies()),
+});
+
+CookieNotice.propTypes = {
+  showCookieNotice: PropTypes.bool.isRequired,
+  acceptCookieNotice: PropTypes.func.isRequired,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(CookieNotice);

src/components/main/footer/StaticFooter.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 
 const StaticFooter = () => (
   <footer className="navbar has-navbar-fixed-bottom">
@@ -11,11 +12,7 @@ const StaticFooter = () => (
       <span className="empowerla">EmpowerLA</span>
     </div>
     <div className="static-footer level-right">
-      {/* **** NEED TO REPLACE HREF WITH VALID LINK WHEN AVAILABLE **** */}
-      <a href="/">Terms & Conditions</a>
-      &nbsp; | &nbsp;
-      {/* **** NEED TO REPLACE HREF WITH VALID LINK WHEN AVAILABLE **** */}
-      <a href="/">Privacy Policy</a>
+      <Link to="/privacy">Privacy Policy</Link>
     </div>
   </footer>
 );

src/components/main/header/Header.jsx

@@ -27,6 +27,9 @@ const Header = () => {
             <p style={cta1Style}>311</p>
             <p style={cta2Style}>DATA</p>
           </div>
+          <div className="navbar-item beta-tag-wrapper">
+            <span className="beta-tag">BETA</span>
+          </div>
         </Link>
       </div>
 

src/components/main/util/routeChangeActions.js

@@ -1,5 +1,8 @@
 import queryString from 'query-string';
 import Mixpanel from '@utils/Mixpanel';
+import { acceptCookies } from '@reducers/ui';
+import store from '../../../redux/store';
+
 
 const handleReferralCode = (
   location,
@@ -25,8 +28,16 @@ const logAboutPageVisit = location => {
   }
 };
 
+const checkAcceptedCookies = () => {
+  const { ui } = store.getState();
+  if (sessionStorage.getItem('accept-cookies') && !ui.cookiesAccepted) {
+    store.dispatch(acceptCookies());
+  }
+};
+
 
 export default [
   handleReferralCode,
   logAboutPageVisit,
+  checkAcceptedCookies,
 ];