l-min-components 1.0.214 → 1.0.220

package/package.json

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

package/src/components/AppMainLayout/index.jsx

@@ -26,6 +26,9 @@ const AppMainLayout = () => {
   const [rightLayout, setRightLayout] = useState(true);
   const [rightComponent, setRightComponent] = useState();
   const [generalData, setGeneralData] = useState({});
+  console.log("====================================");
+  console.log(generalData);
+  console.log("====================================");
   return (
     <OutletContext.Provider
       value={{ setRightComponent, setRightLayout, generalData, setGeneralData }}

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

@@ -22,7 +22,7 @@ const AccountDropdown = (props) => {
   const [developerAccountData, setDeveloperAccountData] = useState([]);
   const [instructorAccountData, setInstructorAccountData] = useState([]);
   const [enterpriseAccountData, setEnterpriseAccountData] = useState([]);
-  const [selectedAccount, setSelectedAccount] = useState();
+  // const [selectedAccount, setSelectedAccount] = useState();
   const navigate = useNavigate();
   const { pathname } = useLocation();
   useEffect(() => {}, [pathname]);
@@ -64,52 +64,52 @@ const AccountDropdown = (props) => {
       });
 
       if (pathname?.includes("personal")) {
-        setSelectedAccount(personalArray[0]);
+        props?.setSelectedAccount(personalArray[0]);
       }
       if (window.location.host?.includes("developer")) {
-        setSelectedAccount(developerArray[0]);
+        props?.setSelectedAccount(developerArray[0]);
       }
       if (pathname?.includes("instructor")) {
-        setSelectedAccount(instructorArray[0]);
+        props?.setSelectedAccount(instructorArray[0]);
       }
       if (pathname?.includes("enterprise")) {
-        setSelectedAccount(enterpriseArray[0]);
+        props?.setSelectedAccount(enterpriseArray[0]);
       }
     }
   }, [props?.data?.data]);
   useEffect(() => {
-    if (selectedAccount?.type === "DEVELOPER") {
+    if (props?.selectedAccount?.type === "DEVELOPER") {
       const date = new Date();
       date.setDate(date.getDate() + 28);
       document.cookie =
         "activeDeveloperAccount=" +
-        selectedAccount?.id +
+        props?.selectedAccount?.id +
         `; domain=${
           window.location.href.includes("localhost")
             ? ".localhost"
             : ".learngual.com"
         }; path=/; expires=${date.toUTCString()};`;
     }
-  }, [selectedAccount]);
+  }, [props?.selectedAccount]);
   return (
     <>
       <AccountDropdownLayout>
         <AccountDropdownHeader>
-          <div>
+          <div className="img_div">
             <img
-              src={selectedAccount?.profile_photo || props?.avatar}
+              src={props?.selectedAccount?.profile_photo || props?.avatar}
               alt="account photo"
             />
           </div>
           <div>
             <h1>
               {" "}
-              {selectedAccount?.display_name ||
-                selectedAccount?.metadata?.organization_name ||
-                props.activeAccountName}
+              {props?.selectedAccount?.display_name ||
+                props?.selectedAccount?.metadata?.organization_name ||
+                props?.activeAccountName}
             </h1>
             <h2 style={{ textTransform: "capitalize" }}>
-              {selectedAccount?.type || props.activeAccountType}{" "}
+              {props?.selectedAccount?.type || props.activeAccountType}{" "}
             </h2>
           </div>
           <CloseIcon onClick={(e) => props.setIsOpen(!props.isOpen)} />
@@ -124,7 +124,7 @@ const AccountDropdown = (props) => {
                 <div
                   className="account-info"
                   onClick={() => {
-                    setSelectedAccount(personalItem);
+                    props?.setSelectedAccount(personalItem);
                     if (window.location.port) {
                       window.location.href = `${window.location.protocol}//${window.location.hostname}:${window.location.port}/personal`;
                     } else {
@@ -154,7 +154,7 @@ const AccountDropdown = (props) => {
                 <div
                   className="account-info"
                   onClick={() => {
-                    setSelectedAccount(developerItem);
+                    props?.setSelectedAccount(developerItem);
 
                     if (
                       window.location.port &&
@@ -191,7 +191,7 @@ const AccountDropdown = (props) => {
                 <div
                   className="account-info"
                   onClick={() => {
-                    setSelectedAccount(instructorItem);
+                    props?.setSelectedAccount(instructorItem);
                     if (window.location.port) {
                       window.location.href = `${window.location.protocol}//${window.location.hostname}:${window.location.port}/instructor`;
                     } else {
@@ -224,7 +224,7 @@ const AccountDropdown = (props) => {
                 <div
                   className="account-info"
                   onClick={() => {
-                    setSelectedAccount(enterpriseItem);
+                    props?.setSelectedAccount(enterpriseItem);
                     if (window.location.port) {
                       window.location.href = `${window.location.protocol}//${window.location.hostname}:${window.location.port}/enterprise`;
                     } else {

package/src/components/header/index.jsx

@@ -21,6 +21,7 @@ import {
 } from "./index.styled";
 import useHeader from "./getHeaderDetails";
 import { OutletContext } from "..";
+import { useLocation } from "react-router-dom";
 
 /**
  * @param {{
@@ -41,18 +42,66 @@ const HeaderComponent = (props) => {
     userAccountsDetail,
     userDetails,
   } = useHeader();
+  const { pathname } = useLocation();
   const { setGeneralData } = useContext(OutletContext);
+  const [selectedAccount, setSelectedAccount] = useState();
+
   useEffect(() => {
     setIsOpen(false);
     handleGetUserAccountsDetail();
-    // handleGetUserDetails();
+    handleGetUserDetails();
   }, []);
   useEffect(() => {
     if (userAccountsDetail?.data) {
       setGeneralData((generalData) => ({
         ...generalData,
         accounts: userAccountsDetail?.data,
+        user: userDetails?.data,
       }));
+
+      let personalArray = [];
+      let developerArray = [];
+      let instructorArray = [];
+      let enterpriseArray = [];
+      props?.data?.data?.results?.map((accountItem, idx) => {
+        if (
+          accountItem?.type === "PERSONAL" &&
+          !personalAccountData?.includes(accountItem)
+        ) {
+          personalArray.push(accountItem);
+        }
+        if (
+          accountItem?.type === "DEVELOPER" &&
+          !developerAccountData?.includes(accountItem)
+        ) {
+          developerArray.push(accountItem);
+        }
+        if (
+          accountItem?.type === "INSTRUCTOR" &&
+          !instructorAccountData?.includes(accountItem)
+        ) {
+          instructorArray.push(accountItem);
+        }
+        if (
+          accountItem?.type === "ENTERPRISE" &&
+          !enterpriseAccountData?.includes(accountItem)
+        ) {
+          enterpriseArray.push(accountItem);
+        }
+      });
+
+      if (pathname?.includes("personal")) {
+        setSelectedAccount(personalArray[0]);
+      }
+      if (window.location.host?.includes("developer")) {
+        setSelectedAccount(developerArray[0]);
+      }
+      if (pathname?.includes("instructor")) {
+        setSelectedAccount(instructorArray[0]);
+      }
+      if (pathname?.includes("enterprise")) {
+        setSelectedAccount(enterpriseArray[0]);
+      }
     }
   }, [userAccountsDetail?.data]);
 
@@ -76,7 +125,12 @@ const HeaderComponent = (props) => {
           </a>
         </li> */}
         <li>
-          <a href="#">
+          <a
+            onClick={() => {
+              window.location.href =
+                "https://developer-staging-01.learngual.com/settings/payment";
+            }}
+          >
             <SettingIcon /> Settings
           </a>
         </li>
@@ -125,8 +179,13 @@ const HeaderComponent = (props) => {
             <img src={props.avatar} alt="profile" />
           </div>
           <div className="user-info-container">
-            <h5>{props.accounts}</h5>
-            <h6>{props.accountType}</h6>
+            <h5>
+              {selectedAccount?.display_name ||
+                selectedAccount?.metadata?.organization_name}
+            </h5>
+            <h6 style={{ textTransform: "capitalize" }}>
+              {selectedAccount?.type}
+            </h6>
           </div>
           <ArrowDownIcon width={16} height={10} />
         </UserProfile>
@@ -143,6 +202,8 @@ const HeaderComponent = (props) => {
           isOpen={isOpen}
           setIsOpen={setIsOpen}
           data={userAccountsDetail}
+          selectedAccount={selectedAccount}
+          setSelectedAccount={setSelectedAccount}
         />
       )}
     </Navbar>

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

@@ -239,7 +239,17 @@ export const AccountDropdownHeader = styled.div`
   border-radius: 30px 30px 0 0;
   width: 100%;
   border-bottom: 1px solid rgba(51, 51, 51, 0.15);
-
+  & .img_div {
+    max-width: 50px;
+    max-height: 50px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
   & h1 {
     font-family: "Poppins";
     font-weight: 600;

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

@@ -19,7 +19,7 @@ const SideMenu = ({
   routes,
   userType,
   onLogout = () => {},
-  isOpen = false,
+  isOpen,
   setIsOpen,
 }) => {
   // const [isOpen, setIsOpen] = useState(false);
@@ -38,11 +38,24 @@ const SideMenu = ({
 
     return (
       <NavigationItemContainer
-        to={route.path}
+        onClick={() => {
+          if (
+            window.location.hostname.includes("staging") &&
+            window.location.hostname.includes("developer")
+          ) {
+            window.location.href = `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("developer") &&
+            !window.location.hostname.includes("staging")
+          ) {
+            window.location.href = `developer.learngual.com/${path}`;
+          }
+        }}
+        // to={route.path}
         key={index}
-        className={cx(`${route.text}`, ({ isActive, isPending }) => {
-          isActive ? "active" : "";
-        })}
+        className={cx(`${route.text} ${active ? "active" : ""}`)}
         minimal={isOpen}
       >
         <IconContainer active={active}>{icon}</IconContainer>

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

@@ -39,7 +39,7 @@ export const NavigationContainer = styled.div`
   justify-content: center;
   margin-top: 20px;
 `;
-export const NavigationItemContainer = styled(NavLink)`
+export const NavigationItemContainer = styled.p`
   text-decoration: none;
   display: flex;
   align-items: center;