l-min-components 1.0.394 → 1.0.400

package/package.json

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

package/src/components/AppMainLayout/index.jsx

@@ -22,6 +22,8 @@ import {
 import { leftNavMenu, user, sideMenuOptions } from "../../hooks/leftNavMenu";
 import InstructorAccountSwitcher from "../instructorAccountSwitcher";
 // import SideMenu from "../sideBar/sideMenu";
+import InstructorRightBar from "../fileRightBar/instructorRightBar";
+import EnterpriseRightBar from "../fileRightBar/enterpriseRightBar";
 
 const AppMainLayout = () => {
   const [isOpen, setIsOpen] = useState(true);
@@ -41,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")) {
@@ -65,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={{
@@ -89,6 +109,7 @@ const AppMainLayout = () => {
         // return true if instructor affiliates is Active
         setHideAffilicates,
         affiliatesActive,
+        accessToken
       }}
     >
       <Layout
@@ -119,6 +140,7 @@ const AppMainLayout = () => {
                     }
                     isOpen={isOpen}
                     setIsOpen={setIsOpen}
+                    setRightComponent={setRightComponent}
                   />
                 )}
               </>

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;

package/src/components/sideBar/sideMenu/index.jsx

@@ -13,6 +13,8 @@ import { IoIosArrowBack, IoIosArrowForward } from "react-icons/io";
 import { CiLogout } from "react-icons/ci";
 import UserCard from "../userCard";
 import cx from "classnames";
+import InstructorRightBar from "../../fileRightBar/instructorRightBar";
+import EnterpriseRightBar from "../../fileRightBar/enterpriseRightBar";
 
 const SideMenu = ({
   user,
@@ -22,6 +24,7 @@ const SideMenu = ({
   isOpen,
   setIsOpen,
   affiliatesActive,
+  setRightComponent
 }) => {
   // const [isOpen, setIsOpen] = useState(false);
   const onToggle = () => {
@@ -47,6 +50,10 @@ const SideMenu = ({
       setRouteFilter(filteredRoutes);
     }
   }, [affiliatesActive]);
+  
+  // Right bars
+  const EnterpriseRight = <EnterpriseRightBar />
+  const InstructorRight  = <InstructorRightBar />    
 
   const renderNavigationItem = (route, index) => {
     const { icon, iconActive, text, notifications, path, affiliates } = route;
@@ -87,6 +94,7 @@ const SideMenu = ({
         window.location.pathname.includes("/personal/courses") &&
         path === "/personal/courses"
       ) {
+        setRightComponent(InstructorRight)
         return (statusText = true);
       }
       if (
@@ -114,18 +122,21 @@ const SideMenu = ({
         window.location.pathname.includes("/enterprise/dashboard") &&
         path === "/enterprise/dashboard"
       ) {
+        setRightComponent(EnterpriseRight)
         return (statusText = true);
       }
       if (
         window.location.pathname.includes("/enterprise/courses") &&
         path === "/enterprise/courses"
       ) {
+        setRightComponent(EnterpriseRight)
         return (statusText = true);
       }
       if (
         window.location.pathname.includes("/enterprise/reports") &&
         path === "/enterprise/reports"
       ) {
+        setRightComponent(EnterpriseRight)
         return (statusText = true);
       }
       if (
@@ -144,6 +155,7 @@ const SideMenu = ({
         window.location.pathname.includes("/enterprise/announcements") &&
         path === "/enterprise/announcements"
       ) {
+        setRightComponent(EnterpriseRight)
         return (statusText = true);
       }
       if (
@@ -159,30 +171,35 @@ const SideMenu = ({
         window.location.pathname.includes("/instructor/dashboard") &&
         path === "/instructor/dashboard"
       ) {
+        setRightComponent(InstructorRight)
         return (statusText = true);
       }
       if (
         window.location.pathname.includes("/instructor/courses") &&
         path === "/instructor/courses"
       ) {
+        setRightComponent(InstructorRight)
         return (statusText = true);
       }
       if (
         window.location.pathname.includes("/instructor/reports") &&
         path === "/instructor/reports"
       ) {
+        setRightComponent(InstructorRight)
         return (statusText = true);
       }
       if (
         window.location.pathname.includes("/instructor/manage-teams") &&
         path === "/instructor/manage-teams"
       ) {
+        setRightComponent(InstructorRight)
         return (statusText = true);
       }
       if (
         window.location.pathname.includes("/instructor/manage-students") &&
         path === "/instructor/manage-students"
       ) {
+        setRightComponent(InstructorRight)
         return (statusText = true);
       }
       if (
@@ -195,12 +212,14 @@ const SideMenu = ({
         window.location.pathname.includes("/instructor/contracts") &&
         path === "/instructor/contracts"
       ) {
+        setRightComponent(InstructorRight)
         return (statusText = true);
       }
       if (
         window.location.pathname.includes("/instructor/announcements") &&
         path === "/instructor/announcements"
       ) {
+        setRightComponent(InstructorRight)
         return (statusText = true);
       }
       if (