SBIT-305: Create BannerRedirect

src/components/BannerRedirect/BannerRedirect.js

@@ -0,0 +1,71 @@
+import React, { useState, useEffect } from 'react';
+import './BannerRedirect.scss';
+import { MdClose } from "react-icons/md";
+
+function BannerRedirect() {
+  const [isOpen, setIsOpen] = useState(true);
+
+  const WEBSITES = Object.freeze({
+    ES: 'https://es.bitlogic.io',
+    EN: 'https://en.bitlogic.io',
+  });
+
+  const titleEs = `¿Te gustaría visitar nuestro sitio en español?`;
+  const titleEn = `Would you like to visit our English site?`;
+
+  const closeBanner = () => {
+    setIsOpen(false);
+
+    if (typeof window !== 'undefined') {
+      localStorage.setItem('BannerRedirect', 'closed')
+    }
+  };
+
+  const userLanguage = navigator?.language;
+  const userLocation = typeof window !== 'undefined' ? window?.location?.origin : ''
+
+  useEffect(() => {
+    if (
+      (userLanguage?.startsWith('es') && userLocation?.includes('es')) ||
+      (userLanguage?.startsWith('en') && userLocation?.includes('en'))
+    ) {
+      closeBanner()
+    }
+  }, [userLanguage, userLocation]);
+
+  const bannerStorage = typeof window !== 'undefined'
+    ? localStorage.getItem('BannerRedirect')
+    : undefined
+
+  if (bannerStorage === 'closed' || !isOpen) return null;
+
+  return (
+    <section className='BannerRedirect container'>
+      <div className='BannerRedirect__wrapper'>
+        <div className='d-flex flex-direction-row'>
+          <h6>{userLanguage?.startsWith('es')
+            ? titleEs
+            : titleEn}
+          </h6>
+          <button aria-label='Close Banner'
+            onClick={() => closeBanner()}
+          >
+            <MdClose />
+          </button>
+        </div>
+        <button className='BannerRedirect__wrapper__btn'
+          onClick={() => closeBanner()}
+        >
+          <a href={userLanguage?.startsWith('es')
+            ? WEBSITES.ES
+            : WEBSITES.EN}
+          >
+            {userLanguage?.startsWith('es') ? 'Vamos!' : 'Let´s go!'}
+          </a>
+        </button>
+      </div>
+    </section>
+  );
+}
+
+export default BannerRedirect;

src/components/BannerRedirect/BannerRedirect.scss

@@ -0,0 +1,73 @@
+@import '../../styles/global.scss';
+
+.BannerRedirect {
+  background-color: $nav-footer-container;
+  position: fixed;
+  bottom: 0px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 100%;
+  height: max-content;
+  border-radius: 12px;
+  z-index: 9999;
+  border: 2px solid #8f8e8e93;
+  box-shadow: rgba(0, 0, 0, 0.624) 0px 0px 16px 3px;
+  animation: show-banner 0.5s ease-in-out;
+
+  &__wrapper {
+    width: 100%;
+    height: 100%;
+    padding: 16px 1px;
+    color: $primary;
+
+    &>div {
+      gap: 16px;
+      color: $white;
+      margin-bottom: 16px;
+      justify-content: space-between;
+
+      h6 {
+        margin: 0;
+        text-wrap: pretty;
+      }
+
+      button {
+        color: $grey-light;
+        border: none;
+        align-self: self-start;
+        background-color: transparent;
+        padding: 3px;
+        transition: all .3s ease-in-out;
+        border-radius: 50%;
+
+        &:hover {
+          background-color: $grey;
+        }
+      }
+    }
+
+    &__btn {
+      @include primaryBtn;
+      color: $primary-invert;
+      background-color: $secondary;
+    }
+  }
+
+  @media (min-width: $breakpoint-lg) {
+    transform: none;
+    left: auto;
+    max-width: 350px;
+    right: 15%;
+    top: 0px;
+  }
+}
+
+@keyframes show-banner {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}

src/components/layout.js

@@ -5,6 +5,7 @@ import Footer from "./Footer/Footer"
 import ScriptTag from "react-script-tag"
 import useGlobalConfig from "../hooks/useGlobalConfig"
 import ThemeProvider from "../context/themeContext"
+import BannerRedirect from "./BannerRedirect/BannerRedirect"
 
 const Layout = ({ children, options = {}, location }) => {
   const defaultOptions = {
@@ -42,7 +43,7 @@ const Layout = ({ children, options = {}, location }) => {
     <ThemeProvider>
       {scripts}
       {options.hasHeader && <Header />}
-
+      <BannerRedirect />
       <main>{children}</main>
       {options.hasFooter && <Footer />}
       {/*© {new Date().getFullYear()}, Built with*/}