fix BannerRedirect

Author: GonzalezMaxi

src/components/BannerRedirect/BannerRedirect.js

@@ -1,71 +1,51 @@
-import React, { useState, useEffect } from 'react';
-import './BannerRedirect.scss';
-import { MdClose } from "react-icons/md";
+import React, { useState, useEffect } from "react"
+import "./BannerRedirect.scss"
+import { MdClose } from "react-icons/md"
 
 function BannerRedirect() {
-  const [isOpen, setIsOpen] = useState(true);
+  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 REDIRECT = Object.freeze({
+    title: `Would you like to visit our English site?`,
+    url: "https://en.bitlogic.io",
+    callToAction: "Let’s go!",
+  })
 
   const closeBanner = () => {
-    setIsOpen(false);
+    setIsOpen(false)
 
-    if (typeof window !== 'undefined') {
-      localStorage.setItem('BannerRedirect', 'closed')
+    if (typeof window !== "undefined") {
+      localStorage.setItem("BannerRedirect", "closed")
     }
-  };
-
-  const userLanguage = typeof window !== 'undefined' ? 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()
+    const bannerStorage =
+      typeof window !== "undefined"
+        ? localStorage.getItem("BannerRedirect")
+        : undefined
+    if (bannerStorage === "closed") {
+      setIsOpen(false)
     }
-  }, [userLanguage, userLocation]);
-
-  const bannerStorage = typeof window !== 'undefined'
-    ? localStorage.getItem('BannerRedirect')
-    : undefined
+  }, [])
 
-  if (bannerStorage === 'closed' || !isOpen) return null;
+  if (!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()}
-          >
+    <section className="BannerRedirect container">
+      <div className="BannerRedirect__wrapper">
+        <div className="d-flex flex-direction-row">
+          <h6>{REDIRECT.title}</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 className="BannerRedirect__wrapper__btn" onClick={closeBanner}>
+          <a href={REDIRECT.url}>{REDIRECT.callToAction}</a>
         </button>
       </div>
     </section>
-  );
+  )
 }
 
-export default BannerRedirect;
+export default BannerRedirect

src/components/layout.js

@@ -1,12 +1,13 @@
-import * as React from "react"
+import React, { lazy, Suspense } from "react"
 import Header from "./header"
 import "./layout.scss"
 import Footer from "./Footer/Footer"
 import ScriptTag from "react-script-tag"
 import useGlobalConfig from "../hooks/useGlobalConfig"
 import ThemeProvider from "../context/themeContext"
-import { Helmet } from 'react-helmet';
-import BannerRedirect from "./BannerRedirect/BannerRedirect"
+import { Helmet } from "react-helmet"
+
+const BannerRedirect = lazy(() => import("./BannerRedirect/BannerRedirect"))
 
 const Layout = ({ children, options = {}, location }) => {
   const defaultOptions = {
@@ -16,6 +17,9 @@ const Layout = ({ children, options = {}, location }) => {
 
   options = { ...defaultOptions, ...options }
 
+  const userLanguage =
+    typeof window !== "undefined" ? navigator.language : undefined
+
   const config = useGlobalConfig()
   const scripts = config?.allStrapiGlobalConfig?.nodes.map(item =>
     item?.script?.map(script =>
@@ -44,7 +48,11 @@ const Layout = ({ children, options = {}, location }) => {
     <ThemeProvider>
       {scripts}
       {options.hasHeader && <Header />}
-      <BannerRedirect />
+      {userLanguage?.startsWith("en") && (
+        <Suspense fallback>
+          <BannerRedirect />
+        </Suspense>
+      )}
       <Helmet>
         <script>
           {`
@@ -72,7 +80,10 @@ const Layout = ({ children, options = {}, location }) => {
             })();
           `}
         </script>
-        <script src="https://leadbooster-chat.pipedrive.com/assets/loader.js" async></script>
+        <script
+          src="https://leadbooster-chat.pipedrive.com/assets/loader.js"
+          async
+        ></script>
       </Helmet>
       <main>{children}</main>
       {options.hasFooter && <Footer />}