l-min-components 1.0.321 → 1.0.325

package/src/components/AppMainLayout/index.jsx

@@ -30,8 +30,8 @@ const AppMainLayout = () => {
   const [generalData, setGeneralData] = useState({});
   const [coming, setComing] = useState();
   const [activePage, setActivePage] = useState("reports");
-  const [page, setPage] = useState("index")
-  const [studyTab, setStudyTab] = useState("analysis")
+  const [page, setPage] = useState("index");
+  const [studyTab, setStudyTab] = useState("analysis");
   const [selectedCourseId, setSelectedCourseId] = useState(null);
   const [hasLayoutBackgroundImage, setHasLayoutBackgroundImage] =
     useState(false);
@@ -56,14 +56,14 @@ const AppMainLayout = () => {
         hasLayoutBackgroundImage,
         setHasLayoutBackgroundImage,
         setSideMenuLayout,
-        activePage, 
-        setActivePage, 
-        studyTab, 
+        activePage,
+        setActivePage,
+        studyTab,
         setStudyTab,
         page,
         setPage,
-        selectedCourseId, 
-        setSelectedCourseId
+        selectedCourseId,
+        setSelectedCourseId,
       }}
     >
       <Layout
@@ -80,7 +80,17 @@ const AppMainLayout = () => {
                   <SideMenu
                     user={user}
                     routes={sideMenuOptions}
-                    userType={"developer"}
+                    userType={
+                      window.location.pathname.includes("enterprise")
+                        ? "enterprise"
+                        : window.location.pathname.includes("personal")
+                        ? "personal"
+                        : window.location.pathname.includes("instructor")
+                        ? "instructor"
+                        : window.location.pathname.includes("developer")
+                        ? "developer"
+                        : "developer"
+                    }
                     isOpen={isOpen}
                     setIsOpen={setIsOpen}
                   />

package/src/components/header/account-dropdown.jsx

@@ -8,6 +8,7 @@ import {
   AccountDropdownFooter,
 } from "./index.styled";
 import { useLocation, useNavigate } from "react-router-dom";
+import useHeader from "./getHeaderDetails";
 /**
  * @param {{
  *  type: string,
@@ -22,6 +23,7 @@ const AccountDropdown = (props) => {
   const navigate = useNavigate();
   const { pathname } = useLocation();
   useEffect(() => {}, [pathname]);
+  const { setDefaultAccount, handleSetDefaultAccount } = useHeader();
 
   useEffect(() => {
     if (props?.selectedAccount?.type === "DEVELOPER") {
@@ -44,6 +46,7 @@ const AccountDropdown = (props) => {
     }
   }, [props?.selectedAccount]);
   console.log(props?.selectedAccount, "selected");
+
   return (
     <>
       <AccountDropdownLayout>
@@ -109,7 +112,7 @@ const AccountDropdown = (props) => {
                   }`}
                   onClick={() => {
                     props?.setSelectedAccount(developerItem);
-
+                    handleSetDefaultAccount(developerItem?.id);
                     if (
                       window.location.port &&
                       window.location.host.includes("developer")
@@ -152,6 +155,7 @@ const AccountDropdown = (props) => {
                   }`}
                   onClick={() => {
                     props?.setSelectedAccount(instructorItem);
+                    handleSetDefaultAccount(instructorItem?.id);
                     if (window.location.port) {
                       window.location.href = `${window.location.protocol}//${window.location.hostname}:${window.location.port}/instructor`;
                     } else {
@@ -187,6 +191,7 @@ const AccountDropdown = (props) => {
                   }`}
                   onClick={() => {
                     props?.setSelectedAccount(enterpriseItem);
+                    handleSetDefaultAccount(enterpriseItem?.id);
                     if (window.location.port) {
                       window.location.href = `${window.location.protocol}//${window.location.hostname}:${window.location.port}/enterprise`;
                     } else {

package/src/components/header/getHeaderDetails.js

@@ -21,11 +21,63 @@ const useHeader = () => {
       url: "/iam/v1/accounts/",
     });
   };
+
+  // get user default account
+  const [{ ...getDefaultAccount }, defaultAccount] = useAxios(
+    {
+      method: "GET",
+    },
+    {
+      manual: true,
+    }
+  );
+
+  const handleGetDefaultAccount = async (data) => {
+    try {
+      await defaultAccount({
+        url: "/iam/v1/users/default_account/",
+      });
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
+  // set user default account
+  const [{ ...setDefaultAccount }, postDefaultAccount] = useAxios(
+    {
+      method: "POST",
+    },
+    {
+      manual: true,
+    }
+  );
+
+  const handleSetDefaultAccount = async (accountID) => {
+    try {
+      await postDefaultAccount({
+        url: "/iam/v1/users/default_account/",
+        params: {
+          _account: accountID,
+        },
+        // headers: {
+        //   "Content-Type": "application/json",
+        //   account: accountID,
+        // },
+      });
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
   return {
     handleGetUserDetails,
     userDetails,
     handleGetUserAccountsDetail,
     userAccountsDetail,
+    handleGetDefaultAccount,
+    getDefaultAccount,
+    handleSetDefaultAccount,
+    setDefaultAccount,
   };
 };
 export default useHeader;

package/src/components/header/index.jsx

@@ -45,15 +45,18 @@ const HeaderComponent = (props) => {
     handleGetUserDetails,
     userAccountsDetail,
     userDetails,
+    getDefaultAccount,
+    handleGetDefaultAccount,
   } = useHeader();
   const { pathname } = useLocation();
-  const { setGeneralData } = useContext(OutletContext);
+  const { setGeneralData, generalData } = useContext(OutletContext);
   const [selectedAccount, setSelectedAccount] = useState();
 
   useEffect(() => {
     setIsOpen(false);
     handleGetUserAccountsDetail();
     handleGetUserDetails();
+    handleGetDefaultAccount();
   }, []);
   useEffect(() => {
     if (userAccountsDetail?.data) {
@@ -62,6 +65,7 @@ const HeaderComponent = (props) => {
         accounts: userAccountsDetail?.data,
         user: userDetails?.data,
         selectedAccount,
+        defaultAccount: getDefaultAccount?.data,
       }));
       const cookies = document.cookie;
       const cookieArray = cookies.split(";");
@@ -80,6 +84,7 @@ const HeaderComponent = (props) => {
       let developerArray = [];
       let instructorArray = [];
       let enterpriseArray = [];
+
       userAccountsDetail?.data?.results?.map((accountItem, idx) => {
         if (
           accountItem?.type === "PERSONAL" &&
@@ -170,6 +175,32 @@ const HeaderComponent = (props) => {
       document.removeEventListener("click", handleClickOutside);
     };
   }, [setIsOpen]);
+
+  // get current default account and store in cookie
+  useEffect(() => {
+    if (getDefaultAccount?.data) {
+      const date = new Date();
+      date.setDate(date.getDate() + 28);
+      document.cookie =
+        "defaultAccountID=" +
+        getDefaultAccount?.data?.id +
+        `; domain=${
+          window.location.href.includes("localhost")
+            ? ".localhost"
+            : ".learngual.com"
+        }; path=/; expires=${date.toUTCString()};`;
+
+      document.cookie =
+        "defaultAccountType=" +
+        getDefaultAccount?.data?.type +
+        `; domain=${
+          window.location.href.includes("localhost")
+            ? ".localhost"
+            : ".learngual.com"
+        }; path=/; expires=${date.toUTCString()};`;
+    }
+  }, [getDefaultAccount?.response]);
+
   return (
     <Navbar>
       <img src={logo} alt="Learngual logo" />

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

@@ -32,10 +32,11 @@ const SideMenu = ({
   )?.routes;
 
   const renderNavigationItem = (route, index) => {
-    const { icon, text, notifications, path } = route;
+    const { icon, iconActive, text, notifications, path } = route;
     const handlePathCheck = () => {
       let statusText;
       console.log(window.location.pathname, "pathname");
+      // checking developer account routes
       if (
         (window.location.pathname.includes("api") && path === "/") ||
         (window.location.pathname === "/" && path === "/")
@@ -50,6 +51,146 @@ const SideMenu = ({
       }
       if (window.location.pathname.includes("report") && path === "/report") {
         return (statusText = true);
+      }
+
+      // checking personal account routes
+      if (
+        window.location.pathname.includes("/personal/dashboard") &&
+        path === "/personal/dashboard"
+      ) {
+        return (statusText = true);
+      }
+      if (
+        window.location.pathname.includes("/personal/library") &&
+        path === "/personal/library"
+      ) {
+        return (statusText = true);
+      }
+      if (
+        window.location.pathname.includes("/personal/courses") &&
+        path === "/personal/courses"
+      ) {
+        return (statusText = true);
+      }
+      if (
+        window.location.pathname.includes("/personal/reports") &&
+        path === "/personal/reports"
+      ) {
+        return (statusText = true);
+      }
+      if (
+        window.location.pathname.includes("/personal/messages") &&
+        path === "/personal/messages"
+      ) {
+        return (statusText = true);
+      }
+      if (
+        window.location.pathname.includes("/personal/addons") &&
+        path === "/personal/addons"
+      ) {
+        return (statusText = true);
+      }
+
+      // checking enterprise account routes
+
+      if (
+        window.location.pathname.includes("/enterprise/dashboard") &&
+        path === "/enterprise/dashboard"
+      ) {
+        return (statusText = true);
+      }
+      if (
+        window.location.pathname.includes("/enterprise/courses") &&
+        path === "/enterprise/courses"
+      ) {
+        return (statusText = true);
+      }
+      if (
+        window.location.pathname.includes("/enterprise/reports") &&
+        path === "/enterprise/reports"
+      ) {
+        return (statusText = true);
+      }
+      if (
+        window.location.pathname.includes("/enterprise/manage-teams") &&
+        path === "/enterprise/manage-teams"
+      ) {
+        return (statusText = true);
+      }
+      if (
+        window.location.pathname.includes("/enterprise/messages") &&
+        path === "/enterprise/messages"
+      ) {
+        return (statusText = true);
+      }
+      if (
+        window.location.pathname.includes("/enterprise/announcements") &&
+        path === "/enterprise/announcements"
+      ) {
+        return (statusText = true);
+      }
+      if (
+        window.location.pathname.includes("/enterprise/file-manager") &&
+        path === "/enterprise/file-manager"
+      ) {
+        return (statusText = true);
+      }
+
+      // checking instructor account routes
+
+      if (
+        window.location.pathname.includes("/instructor/dashboard") &&
+        path === "/instructor/dashboard"
+      ) {
+        return (statusText = true);
+      }
+      if (
+        window.location.pathname.includes("/instructor/manage-courses") &&
+        path === "/instructor/manage-courses"
+      ) {
+        return (statusText = true);
+      }
+      if (
+        window.location.pathname.includes("/instructor/reports") &&
+        path === "/instructor/reports"
+      ) {
+        return (statusText = true);
+      }
+      if (
+        window.location.pathname.includes("/instructor/manage-teams") &&
+        path === "/instructor/manage-teams"
+      ) {
+        return (statusText = true);
+      }
+      if (
+        window.location.pathname.includes("/instructor/manage-students") &&
+        path === "/instructor/manage-students"
+      ) {
+        return (statusText = true);
+      }
+      if (
+        window.location.pathname.includes("/instructor/messages") &&
+        path === "/instructor/messages"
+      ) {
+        return (statusText = true);
+      }
+      if (
+        window.location.pathname.includes("/instructor/contracts") &&
+        path === "/instructor/contracts"
+      ) {
+        return (statusText = true);
+      }
+      if (
+        window.location.pathname.includes("/instructor/announcements") &&
+        path === "/instructor/announcements"
+      ) {
+        return (statusText = true);
+      }
+      if (
+        window.location.pathname.includes("/instructor/file-manager") &&
+        path === "/instructor/file-manager"
+      ) {
+        return (statusText = true);
       } else {
         return (statusText = false);
       }
@@ -72,13 +213,29 @@ const SideMenu = ({
           ) {
             window.location.href = `https://developer.learngual.com${path}`;
           }
+
+          if (
+            window.location.hostname.includes("staging") &&
+            window.location.hostname.includes("enterprise")
+          ) {
+            window.location.href = `https://developer-staging-01.learngual.com${path}`;
+          } else if (window.location.hostname.includes("localhost")) {
+            window.location.href = `http://localhost:${window.location.port}${path}`;
+          } else if (
+            window.location.hostname.includes("enterprise") &&
+            !window.location.hostname.includes("staging")
+          ) {
+            window.location.href = `https://developer.learngual.com${path}`;
+          }
         }}
         // to={route.path}
         key={index}
         className={cx(`${route.text} ${active ? "active" : ""}`)}
         minimal={isOpen}
       >
-        <IconContainer active={active}>{icon}</IconContainer>
+        <IconContainer active={active}>
+          {active ? iconActive : icon}
+        </IconContainer>
 
         <TextContainer minimal={isOpen}>{text}</TextContainer>
 

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

@@ -5,7 +5,7 @@ export const SideMenuContainer = styled.div`
   position: fixed;
 
   width: ${({ isOpen }) => (isOpen ? "239px" : "48px")};
-   height: 625px;
+  height: 625px;
   // max-height: 609px;
   display: flex;
   flex-direction: column;
@@ -37,7 +37,7 @@ export const NavigationContainer = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
-  margin-top: 20px;
+  margin-top: 5px;
 `;
 export const NavigationItemContainer = styled.p`
   text-decoration: none;
@@ -53,6 +53,10 @@ export const NavigationItemContainer = styled.p`
   &:hover {
     color: #ffffff;
     background-color: #31cdcd;
+
+    > div {
+      opacity: 1;
+    }
   }
   &.active {
     background-color: rgba(0, 153, 153, 0.5);
@@ -78,12 +82,15 @@ export const IconContainer = styled.div`
   align-items: center;
   justify-content: center;
   font-size: 25px;
+  opacity: ${({ active }) => (active ? "1" : "0.625")};
 `;
 
 export const TextContainer = styled.div`
   display: ${({ minimal }) => (minimal ? "flex" : "none")};
   align-items: center;
   font-size: 16px;
+  letter-spacing: 0.32px;
+  font-weight: 600;
 `;
 
 export const NotificationCount = styled.div`