l-min-components 1.0.212 → 1.0.216

package/package.json

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

package/src/assets/svg/dashboard.jsx

@@ -1,3 +1,4 @@
+import React from "react";
 export const DashboardIcon = ({ width, height, stroke }) => (
   <svg
     width={width || "24"}

package/src/assets/svg/document.jsx

@@ -1,3 +1,4 @@
+import React from "react";
 export const DocumentIcon = ({ width, height, fill, onClick }) => (
   <svg
     onClick={onClick}

package/src/assets/svg/teams.jsx

@@ -1,3 +1,4 @@
+import React from "react";
 export const TeamsIcon = ({ width, height, fill }) => (
   <svg
     width={width || "24"}

package/src/assets/svg/volume.jsx

@@ -1,3 +1,4 @@
+import React from "react";
 export const VolumeIcon = ({ width, height, fill }) => (
   <svg
     width={width || "24"}

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

@@ -95,7 +95,7 @@ const AccountDropdown = (props) => {
     <>
       <AccountDropdownLayout>
         <AccountDropdownHeader>
-          <div>
+          <div className="img_div">
             <img
               src={selectedAccount?.profile_photo || props?.avatar}
               alt="account photo"

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,7 +42,10 @@ const HeaderComponent = (props) => {
     userAccountsDetail,
     userDetails,
   } = useHeader();
+  const { pathname } = useLocation();
   const { setGeneralData } = useContext(OutletContext);
+  const [selectedAccount, setSelectedAccount] = useState();
+
   useEffect(() => {
     setIsOpen(false);
     handleGetUserAccountsDetail();
@@ -53,6 +57,50 @@ const HeaderComponent = (props) => {
         ...generalData,
         accounts: userAccountsDetail?.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]);
 
@@ -125,8 +173,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>

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;