l-min-components 1.0.244 → 1.0.248

package/package.json

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

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

@@ -24,9 +24,26 @@ export const LeftLayout = styled.div`
 export const CenterLayout = styled.div`
   width: 100%;
   /* max-width: 900px; */
-  margin: ${({ isOpen }) => (isOpen ? "0px 252px 0 336px" : "0px 252px 0 145px")};
+  margin: ${({ isOpen }) =>
+    isOpen ? "0px 252px 0 336px" : "0px 252px 0 145px"};
   overflow-y: scroll;
   transition: all 0.3s;
+  scrollbar-width: thin;
+  /* "auto" or "thin" depending on browser support */
+  scrollbar-color: transparent transparent;
+  /* color values for thumb and track */
+
+  &::-webkit-scrollbar {
+    width: 6px;
+    /* adjust as needed */
+    background-color: transparent;
+    /* color value for track */
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: transparent;
+    /* color value for thumb */
+  }
 `;
 
 export const RightLayout = styled.div`

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

@@ -18,81 +18,77 @@ import { useLocation, useNavigate } from "react-router-dom";
  *
  */
 const AccountDropdown = (props) => {
-  const [personalAccountData, setPersonalAccountData] = useState([]);
-  const [developerAccountData, setDeveloperAccountData] = useState([]);
-  const [instructorAccountData, setInstructorAccountData] = useState([]);
-  const [enterpriseAccountData, setEnterpriseAccountData] = useState([]);
   // const [selectedAccount, setSelectedAccount] = useState();
   const navigate = useNavigate();
   const { pathname } = useLocation();
   useEffect(() => {}, [pathname]);
-  useEffect(() => {
-    if (props?.data?.data) {
-      let personalArray = [];
-      let developerArray = [];
-      let instructorArray = [];
-      let enterpriseArray = [];
-      const cookies = document.cookie;
-      const cookieArray = cookies.split(";");
-      let activeDeveloperAccount;
-      for (let i = 0; i < cookieArray.length; i++) {
-        const cookie = cookieArray[i].trim();
-        if (cookie.startsWith("activeDeveloperAccount=")) {
-          activeDeveloperAccount = cookie.substring(
-            "activeDeveloperAccount=".length,
-            cookie.length
-          );
-          break;
-        }
-      }
-      props?.data?.data?.results?.map((accountItem, idx) => {
-        if (
-          accountItem?.type === "PERSONAL" &&
-          !personalAccountData?.includes(accountItem)
-        ) {
-          personalArray.push(accountItem);
-          setPersonalAccountData(personalArray);
-        }
-        if (
-          accountItem?.type === "DEVELOPER" &&
-          !developerAccountData?.includes(accountItem)
-        ) {
-          developerArray.push(accountItem);
-          setDeveloperAccountData(developerArray);
-        }
-        if (
-          accountItem?.type === "INSTRUCTOR" &&
-          !instructorAccountData?.includes(accountItem)
-        ) {
-          instructorArray.push(accountItem);
-          setInstructorAccountData(instructorArray);
-        }
-        if (
-          accountItem?.type === "ENTERPRISE" &&
-          !enterpriseAccountData?.includes(accountItem)
-        ) {
-          enterpriseArray.push(accountItem);
-          setEnterpriseAccountData(enterpriseArray);
-        }
-      });
+  // useEffect(() => {
+  //   if (props?.data?.data) {
+  //     let personalArray = [];
+  //     let developerArray = [];
+  //     let instructorArray = [];
+  //     let enterpriseArray = [];
+  //     const cookies = document.cookie;
+  //     const cookieArray = cookies.split(";");
+  //     let activeDeveloperAccount;
+  //     for (let i = 0; i < cookieArray.length; i++) {
+  //       const cookie = cookieArray[i].trim();
+  //       if (cookie.startsWith("activeDeveloperAccount=")) {
+  //         activeDeveloperAccount = cookie.substring(
+  //           "activeDeveloperAccount=".length,
+  //           cookie.length
+  //         );
+  //         break;
+  //       }
+  //     }
+  //     props?.data?.data?.results?.map((accountItem, idx) => {
+  //       if (
+  //         accountItem?.type === "PERSONAL" &&
+  //         !props?.personalAccountData?.includes(accountItem)
+  //       ) {
+  //         personalArray.push(accountItem);
+  //         props?.setPersonalAccountData(personalArray);
+  //       }
+  //       if (
+  //         accountItem?.type === "DEVELOPER" &&
+  //         !props?.developerAccountData?.includes(accountItem)
+  //       ) {
+  //         developerArray.push(accountItem);
+  //         props?.setDeveloperAccountData(developerArray);
+  //       }
+  //       if (
+  //         accountItem?.type === "INSTRUCTOR" &&
+  //         !props?.instructorAccountData?.includes(accountItem)
+  //       ) {
+  //         instructorArray.push(accountItem);
+  //         props?.setInstructorAccountData(instructorArray);
+  //       }
+  //       if (
+  //         accountItem?.type === "ENTERPRISE" &&
+  //         !props?.enterpriseAccountData?.includes(accountItem)
+  //       ) {
+  //         enterpriseArray.push(accountItem);
+  //         props?.setEnterpriseAccountData(enterpriseArray);
+  //       }
+  //     });
 
-      if (pathname?.includes("personal")) {
-        props?.setSelectedAccount(personalArray[0]);
-      }
-      if (window.location.host?.includes("developer")) {
-        props?.setSelectedAccount(
-          developerArray.find((item) => item.id === activeDeveloperAccount) ??
-            {}
-        );
-      }
-      if (pathname?.includes("instructor")) {
-        props?.setSelectedAccount(instructorArray[0]);
-      }
-      if (pathname?.includes("enterprise")) {
-        props?.setSelectedAccount(enterpriseArray[0]);
-      }
-    }
-  }, [props?.data?.data]);
+  //     if (pathname?.includes("personal")) {
+  //       props?.setSelectedAccount(personalArray[0]);
+  //     }
+  //     if (window.location.host?.includes("developer")) {
+  //       props?.setSelectedAccount(
+  //         developerArray.find((item) => item.id === activeDeveloperAccount) ??
+  //           item
+  //       );
+  //     }
+  //     if (pathname?.includes("instructor")) {
+  //       props?.setSelectedAccount(instructorArray[0]);
+  //     }
+  //     if (pathname?.includes("enterprise")) {
+  //       props?.setSelectedAccount(enterpriseArray[0]);
+  //     }
+  //   }
+  // }, [props?.data?.data]);
   useEffect(() => {
     if (props?.selectedAccount?.type === "DEVELOPER") {
       const date = new Date();
@@ -113,7 +109,7 @@ const AccountDropdown = (props) => {
         <AccountDropdownHeader>
           <div className="img_div">
             <img
-              src={props?.selectedAccount?.profile_photo || props?.avatar}
+              src={props?.selectedAccount?.profile_photo?.url || props?.avatar}
               alt="account photo"
             />
           </div>
@@ -162,10 +158,10 @@ const AccountDropdown = (props) => {
               ))}
             </div>
           )} */}
-          {developerAccountData.length > 0 && (
+          {props?.developerAccountData.length > 0 && (
             <div>
               <h3>Developer account</h3>
-              {developerAccountData?.map((developerItem, idx) => (
+              {props?.developerAccountData?.map((developerItem, idx) => (
                 <div
                   className="account-info"
                   onClick={() => {
@@ -187,22 +183,22 @@ const AccountDropdown = (props) => {
                 >
                   <div className="avatar-container">
                     <img
-                      src={developerItem?.profile_photo || props.avatar}
+                      src={developerItem?.profile_photo?.url || props.avatar}
                       alt="account photo"
                     />
                   </div>
                   <div className="account-details">
                     <h1> {developerItem?.display_name || props.accountName}</h1>
-                    <span>{props.notificationCount} </span>
+                    {/* <span>{props.notificationCount} </span> */}
                   </div>
                 </div>
               ))}
             </div>
           )}
-          {instructorAccountData?.length > 0 && (
+          {props?.instructorAccountData?.length > 0 && (
             <div>
               <h3>Instructor account</h3>
-              {instructorAccountData?.map((instructorItem, idx) => (
+              {props?.instructorAccountData?.map((instructorItem, idx) => (
                 <div
                   className="account-info"
                   onClick={() => {
@@ -217,7 +213,7 @@ const AccountDropdown = (props) => {
                 >
                   <div className="avatar-container">
                     <img
-                      src={instructorItem?.profile_photo || props.avatar}
+                      src={instructorItem?.profile_photo?.url || props.avatar}
                       alt="account photo"
                     />
                   </div>
@@ -232,10 +228,10 @@ const AccountDropdown = (props) => {
               ))}
             </div>
           )}
-          {enterpriseAccountData?.length > 0 && (
+          {props?.enterpriseAccountData?.length > 0 && (
             <div>
               <h3>Enterprise account</h3>
-              {enterpriseAccountData?.map((enterpriseItem, idx) => (
+              {props?.enterpriseAccountData?.map((enterpriseItem, idx) => (
                 <div
                   className="account-info"
                   onClick={() => {
@@ -250,7 +246,7 @@ const AccountDropdown = (props) => {
                 >
                   <div className="avatar-container">
                     <img
-                      src={enterpriseItem?.profile_photo || props.avatar}
+                      src={enterpriseItem?.profile_photo?.url || props.avatar}
                       alt="account photo"
                     />
                   </div>
@@ -269,7 +265,13 @@ const AccountDropdown = (props) => {
         </AccountDropdownBody>
 
         <AccountDropdownFooter>
-          <button>
+          <button
+            onClick={() => {
+              window.location.href =
+                "https://559staging.learngual.com/auth/sign-up/developer/organization-details";
+            }}
+            style={{ cursor: "pointer" }}
+          >
             <AddIcon /> Add Account
           </button>
         </AccountDropdownFooter>

package/src/components/header/index.jsx

@@ -22,7 +22,7 @@ import {
 import useHeader from "./getHeaderDetails";
 import { OutletContext } from "..";
 import { useLocation } from "react-router-dom";
-
+import usFlag from "../../assets/images/18165.jpg";
 /**
  * @param {{
  *  type: string,
@@ -33,7 +33,11 @@ import { useLocation } from "react-router-dom";
  *
  */
 const HeaderComponent = (props) => {
-  const [selected, setSelected] = useState("ES");
+  const [personalAccountData, setPersonalAccountData] = useState([]);
+  const [developerAccountData, setDeveloperAccountData] = useState([]);
+  const [instructorAccountData, setInstructorAccountData] = useState([]);
+  const [enterpriseAccountData, setEnterpriseAccountData] = useState([]);
+  const [languageDropdown, setLanguageDropdown] = useState();
   const [isOpen, setIsOpen] = useState(false);
   const [searchResultOpen, setSearchResultOpen] = useState(false);
   const {
@@ -75,40 +79,44 @@ const HeaderComponent = (props) => {
       let developerArray = [];
       let instructorArray = [];
       let enterpriseArray = [];
-      props?.data?.data?.results?.map((accountItem, idx) => {
+      userAccountsDetail?.data?.results?.map((accountItem, idx) => {
         if (
           accountItem?.type === "PERSONAL" &&
           !personalAccountData?.includes(accountItem)
         ) {
           personalArray.push(accountItem);
+          setPersonalAccountData(personalArray);
         }
-        if (
-          accountItem?.type === "DEVELOPER" &&
-          !developerAccountData?.includes(accountItem)
-        ) {
+        if (accountItem?.type === "DEVELOPER") {
           developerArray.push(accountItem);
+          setDeveloperAccountData(developerArray);
         }
         if (
           accountItem?.type === "INSTRUCTOR" &&
           !instructorAccountData?.includes(accountItem)
         ) {
           instructorArray.push(accountItem);
+          setInstructorAccountData(instructorArray);
         }
         if (
           accountItem?.type === "ENTERPRISE" &&
           !enterpriseAccountData?.includes(accountItem)
         ) {
           enterpriseArray.push(accountItem);
+          setEnterpriseAccountData(enterpriseArray);
         }
       });
 
       if (pathname?.includes("personal")) {
         setSelectedAccount(personalArray[0]);
       }
-      if (window.location.host?.includes("developer")) {
+      if (
+        window.location.host?.includes("developer") ||
+        window.location.host?.includes("localhost")
+      ) {
         setSelectedAccount(
-          developerArray.find((item) => item.id === activeDeveloperAccount) ??
-            {}
+          developerArray.find((item) => item?.id === activeDeveloperAccount) ??
+            item
         );
       }
       if (pathname?.includes("instructor")) {
@@ -179,33 +187,43 @@ const HeaderComponent = (props) => {
           )}
         </SearchInputGroup>
 
-        <CountryFlagGroup>
-          <ReactFlagsSelect
-            // disabled
-            // countries={["US", "GB", "FR", "DE", "IT"]}
-            countries={["US",]}
-            selected={"US"}
-            onSelect={(code) => setSelected(code)}
-            showOptionLabel={true}
-          />
-          <ArrowDownIcon />
-        </CountryFlagGroup>
-
-        <UserProfile onClick={() => setIsOpen(!isOpen)}>
-          <div className="user-img-container">
-            <img src={props.avatar} alt="profile" />
-          </div>
-          <div className="user-info-container">
-            <h5>
-              {selectedAccount?.display_name ||
-                selectedAccount?.metadata?.organization_name}
-            </h5>
-            <h6 style={{ textTransform: "capitalize" }}>
-              {selectedAccount?.type}
-            </h6>
+        <div className="language_dropdown">
+          <div
+            className="drop_holder"
+            onClick={() => setLanguageDropdown(!languageDropdown)}
+          >
+            <img src={usFlag} alt="" />
+            <ArrowDownIcon />
           </div>
-          <ArrowDownIcon width={16} height={10} />
-        </UserProfile>
+          {languageDropdown && (
+            <ul className="dropdown_list">
+              <li onClick={() => setLanguageDropdown()}>
+                <img src={usFlag} alt="" /> <span>English</span>
+              </li>
+            </ul>
+          )}
+        </div>
+
+        {selectedAccount && (
+          <UserProfile onClick={() => setIsOpen(!isOpen)}>
+            <div className="user-img-container">
+              <img
+                src={selectedAccount?.profile_photo?.url || avatar}
+                alt="profile"
+              />
+            </div>
+            <div className="user-info-container">
+              <h5>
+                {selectedAccount?.display_name ||
+                  selectedAccount?.metadata?.organization_name}
+              </h5>
+              <h6 style={{ textTransform: "capitalize" }}>
+                {selectedAccount?.type?.toLowerCase()}
+              </h6>
+            </div>
+            <ArrowDownIcon width={16} height={10} />
+          </UserProfile>
+        )}
       </NavGroup>
 
       {isOpen && (
@@ -221,6 +239,14 @@ const HeaderComponent = (props) => {
           data={userAccountsDetail}
           selectedAccount={selectedAccount}
           setSelectedAccount={setSelectedAccount}
+          developerAccountData={developerAccountData}
+          setDeveloperAccountData={setDeveloperAccountData}
+          personalAccountData={personalAccountData}
+          setPersonalAccountData={setPersonalAccountData}
+          instructorAccountData={instructorAccountData}
+          setInstructorAccountData={setInstructorAccountData}
+          enterpriseAccountData={enterpriseAccountData}
+          setEnterpriseAccountData={setEnterpriseAccountData}
         />
       )}
     </Navbar>

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

@@ -13,9 +13,51 @@ export const Navbar = styled.nav`
 `;
 
 export const NavGroup = styled.div`
-  width: 40%;
+  width: 44%;
   display: flex;
   justify-content: end;
+  .language_dropdown {
+    display: flex;
+    align-items: center;
+    position: relative;
+    .drop_holder {
+      display: flex;
+      align-items: center;
+      border: 1px solid rgba(173, 178, 178, 1);
+      padding: 9px 12px;
+      border-radius: 37px;
+      cursor: pointer;
+      img {
+        width: 24px;
+        height: 16px;
+        margin-right: 10px;
+      }
+    }
+    .dropdown_list {
+      position: absolute;
+      top: 40px;
+      width: fit-content;
+      background: white;
+      padding: 5px;
+      border-radius: 5px;
+      li {
+        list-style-type: none;
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+        padding: 5px 10px;
+        font-size: 12px;
+        &:hover {
+          background: rgba(173, 178, 178, 0.3);
+        }
+        img {
+          width: 20px;
+          height: 11px;
+          margin-right: 10px;
+        }
+      }
+    }
+  }
 `;
 
 export const Nav = styled.ul`
@@ -135,7 +177,14 @@ export const UserProfile = styled.div`
   display: flex;
   align-items: center;
   cursor: pointer;
-
+  .user-img-container {
+    width: 37px;
+    height: 37px;
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
   & h5 {
     margin: 0;
     color: rgba(49, 51, 51, 1);

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

@@ -9,6 +9,7 @@ import {
 } from "./styles";
 import useHeader from "../../header/getHeaderDetails";
 import Loader from "../../loader";
+import avatar from "../../../assets/images/avatar.png";
 
 const UserCard = ({ user, isOpen }) => {
   const { handleGetUserDetails, userDetails } = useHeader();
@@ -21,7 +22,10 @@ const UserCard = ({ user, isOpen }) => {
         <Loader zoom={0.3} />
       ) : (
         <>
-          <Avatar src={user.avatar} isOpen={isOpen} />
+          <Avatar
+            src={userDetails?.data?.profile_picture?.url || avatar}
+            isOpen={isOpen}
+          />
           <UserDetail isOpen={isOpen}>
             <UserName>
               {userDetails?.data?.first_name +