l-min-components 1.0.397 → 1.0.400

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "l-min-components",
-  "version": "1.0.397",
+  "version": "1.0.400",
   "type": "module",
   "files": [
     "src/assets",

package/src/components/AppMainLayout/index.jsx

@@ -43,6 +43,7 @@ const AppMainLayout = () => {
   const [centerLayoutStyle, setCenterLayoutStyle] = useState({});
   const [hideAffilicates, setHideAffilicates] = useState(false);
   const [affiliatesActive, setAffiliatesActive] = useState(false);
+  const [accessToken, setAccessToken] = useState("");
 
   useEffect(() => {
     if (window.location.host.includes("coming")) {
@@ -67,6 +68,23 @@ const AppMainLayout = () => {
     }
   }, [defaultAcct]);
 
+  // set access token from cookie to context
+  useEffect(() => {
+    let cookieValue = null;
+    const cookieName = "access";
+    // Retrieve the value of the cookie
+    const cookies = document.cookie.split(";");
+    for (let i = 0; i < cookies.length; i++) {
+      const cookie = cookies[i].trim();
+      if (cookie.startsWith(cookieName + "=")) {
+        cookieValue = cookie.substring(cookieName.length + 1);
+        setDefaultAcct(cookieValue);
+        break;
+      }
+    }
+    setAccessToken(cookieValue)
+  }, [defaultAcct]);
+
   return (
     <OutletContext.Provider
       value={{
@@ -91,6 +109,7 @@ const AppMainLayout = () => {
         // return true if instructor affiliates is Active
         setHideAffilicates,
         affiliatesActive,
+        accessToken
       }}
     >
       <Layout

package/src/components/header/index.styled.js

@@ -49,6 +49,9 @@ export const NavGroup = styled.div`
       padding: 15px 0;
       border-radius: 15px;
       box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
+      left: 50%;
+      transform: translateX(-50%);
+      
       li {
         list-style-type: none;
         display: flex;

package/src/components/header/languageDropdown.jsx

@@ -0,0 +1,52 @@
+import React, { useState, useEffect, useRef, useContext } from "react";
+import ReactFlagsSelect from "react-flags-select";
+import useHeader from "./getHeaderDetails";
+import { OutletContext } from "..";
+import { useLocation } from "react-router-dom";
+import usFlag from "../../assets/images/usFlag.png";
+/**
+ * @param {{
+ *  type: string,
+ *  text: string,
+ *  onClick: Function,
+ *  style: CSSProperties,
+ * }} props - properties of Header Component
+ *
+ */
+const LanguageDropdown = (props) => {
+  const [languageDropdown, setLanguageDropdown] = useState();
+  const { pathname } = useLocation();
+  const { setGeneralData, generalData } = useContext(OutletContext);
+
+  const containerRef = useRef(null);
+
+  // logic for closing language dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(event.target)
+      ) {
+        setLanguageDropdown();
+      }
+    };
+
+    document.addEventListener("click", handleClickOutside);
+
+    return () => {
+      document.removeEventListener("click", handleClickOutside);
+    };
+  }, [setLanguageDropdown]);
+
+  return (
+    <>
+      <ul className="dropdown_list" ref={containerRef}>
+        <li onClick={() => setLanguageDropdown()}>
+          <img src={usFlag} alt="" /> <span>English</span>
+        </li>
+      </ul>
+    </>
+  );
+};
+
+export default LanguageDropdown;