l-min-components 1.0.321 → 1.0.331

package/src/components/AppMainLayout/index.jsx

@@ -30,12 +30,14 @@ 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);
   const [sideMenuLayout, setSideMenuLayout] = useState(true);
+  const [defaultAcct, setDefaultAcct] = useState("");
+  const centerLayoutStyle = {};
 
   useEffect(() => {
     if (window.location.host.includes("coming")) {
@@ -45,6 +47,21 @@ const AppMainLayout = () => {
     }
   }, []);
 
+  useEffect(() => {
+    let cookieValue = null;
+    const cookieName = "defaultAccountType";
+    // 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;
+      }
+    }
+  }, [defaultAcct]);
+  
   return (
     <OutletContext.Provider
       value={{
@@ -56,14 +73,15 @@ const AppMainLayout = () => {
         hasLayoutBackgroundImage,
         setHasLayoutBackgroundImage,
         setSideMenuLayout,
-        activePage, 
-        setActivePage, 
-        studyTab, 
+        activePage,
+        setActivePage,
+        studyTab,
         setStudyTab,
         page,
         setPage,
-        selectedCourseId, 
-        setSelectedCourseId
+        selectedCourseId,
+        setSelectedCourseId,
+        centerLayoutStyle,
       }}
     >
       <Layout
@@ -80,7 +98,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"
+                        : defaultAcct
+                    }
                     isOpen={isOpen}
                     setIsOpen={setIsOpen}
                   />
@@ -88,7 +116,7 @@ const AppMainLayout = () => {
               </>
             )}
           </LeftLayout>
-          <CenterLayout isOpen={isOpen}>
+          <CenterLayout isOpen={isOpen} style={centerLayoutStyle}>
             <Outlet />
           </CenterLayout>
 

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,10 +155,11 @@ 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`;
+                      window.location.href = `${window.location.protocol}//${window.location.hostname}:${window.location.port}/instructor/dashboard`;
                     } else {
-                      window.location.href = `${window.location.protocol}//${window.location.hostname}/instructor`;
+                      window.location.href = `${window.location.protocol}//${window.location.hostname}/instructor/dashboard`;
                     }
                   }}
                   key={idx}
@@ -187,10 +191,11 @@ 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`;
+                      window.location.href = `${window.location.protocol}//${window.location.hostname}:${window.location.port}/enterprise/dashboard`;
                     } else {
-                      window.location.href = `${window.location.protocol}//${window.location.hostname}/enterprise`;
+                      window.location.href = `${window.location.protocol}//${window.location.hostname}/enterprise/dashboard`;
                     }
                   }}
                   key={idx}
@@ -212,6 +217,42 @@ const AccountDropdown = (props) => {
               ))}
             </div>
           )}
+          {props?.personalAccountData?.length > 0 && (
+            <div>
+              <h3>Personal account</h3>
+              {props?.personalAccountData?.map((personalItem, idx) => (
+                <div
+                  className={`account-info ${
+                    personalItem === props?.selectedAccount ? "activated" : ""
+                  }`}
+                  onClick={() => {
+                    props?.setSelectedAccount(personalItem);
+                    handleSetDefaultAccount(personalItem?.id);
+                    if (window.location.port) {
+                      window.location.href = `${window.location.protocol}//${window.location.hostname}:${window.location.port}/personal/dashboard`;
+                    } else {
+                      window.location.href = `${window.location.protocol}//${window.location.hostname}/personal/dashboard`;
+                    }
+                  }}
+                  key={idx}
+                >
+                  <div className="avatar-container">
+                    <img
+                      src={personalItem?.profile_photo?.url || props.avatar}
+                      alt="account photo"
+                    />
+                  </div>
+                  <div className="account-details">
+                    <h1>
+                      {" "}
+                      {personalItem?.display_name || props.accountName}
+                    </h1>
+                    <span>{props.notificationCount} </span>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
           {/* // )} */}
         </AccountDropdownBody>
 

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,39 @@ const HeaderComponent = (props) => {
       document.removeEventListener("click", handleClickOutside);
     };
   }, [setIsOpen]);
+
+  // get current default account and store in cookie (from api)
+  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]);
+
+  // get current default account and store in cookie from path
+  useEffect(() => {
+    if (pathname?.includes("personal")) {
+      // document.cookie = "activeAccount" + path;
+    }
+  }, []);
+
   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,24 @@ const SideMenu = ({
           ) {
             window.location.href = `https://developer.learngual.com${path}`;
           }
+
+          if (
+            window.location.hostname.includes("staging")
+          ) {
+            window.location.href = `https://559staging.learngual.com/${path}`;
+          } else if (window.location.hostname.includes("localhost")) {
+            window.location.href = `http://localhost:${window.location.port}${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;
@@ -49,10 +49,14 @@ export const NavigationItemContainer = styled.p`
   position: relative;
   padding: ${({ minimal }) => (minimal ? "12px 16px" : "12px 12px")};
   color: ${({ active }) =>
-    active ? "rgb(255, 255, 255)" : "rgba(255, 255, 255, 0.625)"};
+    active ? "rgb(255, 255, 255) !important" : "rgba(255, 255, 255, 0.625) !important"};
   &:hover {
-    color: #ffffff;
+    color: #ffffff !important;
     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`