l-min-components 1.0.699 → 1.0.701

package/package.json

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

package/src/components/AppMainLayout/index.jsx

@@ -157,7 +157,7 @@ const AppMainLayout = () => {
         newNotifications,
         setNewNotifications,
         notificationMarkReadData,
-        handleGetNotificationMarkRead
+        handleGetNotificationMarkRead,
       }}
     >
       <Layout
@@ -175,18 +175,7 @@ const AppMainLayout = () => {
                     user={user}
                     routes={sideMenuOptions}
                     affiliatesActive={affiliatesActive}
-                    userType={
-                      window.location.pathname.includes("enterprise")
-                        ? "enterprise"
-                        : window.location.pathname.includes("personal")
-                        ? "personal"
-                        : window.location.pathname.includes("instructor")
-                        ? "instructor"
-                        : window.location.pathname.includes("developer") ||
-                          window.location.hostname.includes("developer")
-                        ? "developer"
-                        : "developer"
-                    }
+                    userType={generalData?.selectedAccount?.type?.toLowerCase()}
                     isOpen={isOpen}
                     setIsOpen={setIsOpen}
                     setRightComponent={setRightComponent}
@@ -194,6 +183,18 @@ const AppMainLayout = () => {
                 )}
               </>
             )}
+            {
+              // window.location.pathname.includes("enterprise")
+              //   ? "enterprise"
+              //   : window.location.pathname.includes("personal")
+              //   ? "personal"
+              //   : window.location.pathname.includes("instructor")
+              //   ? "instructor"
+              //   : window.location.pathname.includes("developer") ||
+              //     window.location.hostname.includes("developer")
+              //   ? "developer"
+              //   : "developer"
+            }
           </LeftLayout>
           <CenterLayout isOpen={isOpen} style={centerLayoutStyle}>
             {window.location.pathname.includes("instructor") &&

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

@@ -8,7 +8,7 @@ import {
   AccountDropdownFooter,
 } from "./index.styled";
 import { useLocation, useNavigate } from "react-router-dom";
-import useHeader from "./getHeaderDetails";
+// import useHeader from "./getHeaderDetails";
 import { OutletContext } from "..";
 /**
  * @param {{
@@ -20,29 +20,14 @@ import { OutletContext } from "..";
  *
  */
 const AccountDropdown = (props) => {
-  // const [selectedAccount, setSelectedAccount] = useState();
-  const navigate = useNavigate();
   const { pathname } = useLocation();
   useEffect(() => {}, [pathname]);
-  const {
-    setDefaultAccount,
-    handleSetDefaultAccount,
-  } = useHeader();
 
   const { envType } = useContext(OutletContext);
+  // const { setGeneralData, generalData } = useContext(OutletContext);
 
   useEffect(() => {
-    if (props?.selectedAccount?.type === "DEVELOPER") {
-      const date = new Date();
-      date.setDate(date.getDate() + 28);
-      document.cookie =
-        "activeDeveloperAccount=" +
-        props?.selectedAccount?.id +
-        `; domain=${
-          window.location.href.includes("localhost")
-            ? ".localhost"
-            : ".learngual.com"
-        }; path=/; expires=${date.toUTCString()};`;
+    if (props?.selectedAccount) {
       props?.setGeneralData((generalData) => ({
         ...generalData,
         accounts: props?.userAccountsDetail?.data,
@@ -51,11 +36,25 @@ const AccountDropdown = (props) => {
       }));
     }
   }, [props?.selectedAccount]);
+
+  const handleRedirectFunc = ({ type, id }) => {
+    if (window.location.port) {
+      window.location.href = `${window.location.protocol}//${
+        window.location.hostname
+      }:${window.location.port}/${type?.toLowerCase()}`;
+    } else {
+      window.location.href = `${window.location.protocol}//${
+        window.location.hostname
+      }/${type?.toLowerCase()}`;
+    }
+    // console.log(id, "bam");
+  };
+
   console.log(props?.selectedAccount, "selected");
 
   return (
     <>
-      <AccountDropdownLayout>
+      <AccountDropdownLayout ref={props?.ref}>
         <AccountDropdownHeader>
           <div className="img_div">
             <img
@@ -109,189 +108,207 @@ const AccountDropdown = (props) => {
             </div>
           )} */}
 
-
           {/* {envType === "live"  &&  */}
           <>
-          {props?.developerAccountData.length > 0 && (
-            <div>
-              <h3 style={{ marginBottom: 10 }}>Developer accounts</h3>
-              {props?.developerAccountData?.map((developerItem, idx) => (
-                <div
-                  className={`account-info ${
-                    developerItem === props?.selectedAccount ? "activated" : ""
-                  }`}
-                  onClick={() => {
-                    props?.setSelectedAccount(developerItem);
-                    handleSetDefaultAccount(developerItem?.id);
-                    if (
-                      window.location.port &&
-                      window.location.host.includes("developer")
-                    ) {
-                      window.location.href = `${window.location.protocol}//${window.location.hostname}:${window.location.port}/developer`;
-                    } else if (
-                      !window.location.port &&
-                      window.location.host.includes("developer")
-                    ) {
-                      window.location.href = `${window.location.protocol}//${window.location.hostname}/developer`;
-                    }
-                  }}
-                  key={idx}
-                >
-                  <div className="avatar-container">
-                    <img
-                      src={developerItem?.profile_photo?.url || props.avatar}
-                      alt="account photo"
-                    />
-                  </div>
-                  <div className="account-details">
-                    <h1 style={{ textTransform: "capitalize" }}>
-                      {" "}
-                      {developerItem?.metadata?.organization_name ||
-                        props.accountName}
-                    </h1>
-                    {developerItem?.notification_count > 0 && (
-                      <span>{developerItem?.notification_count}</span>
-                    )}
-                  </div>
-                </div>
-              ))}
-            </div>
-          )}
+            {props?.developerAccountData.length > 0 && (
+              <div>
+                <h3 style={{ marginBottom: 10 }}>Developer accounts</h3>
+                {props?.developerAccountData?.map((developerItem, idx) => {
+                  return (
+                    <div
+                      className={`account-info ${
+                        developerItem?.id === props?.selectedAccount?.id
+                          ? "activated"
+                          : ""
+                      }`}
+                      onClick={() => {
+                        props?.setSelectedAccount(developerItem);
+
+                        setTimeout(() => {
+                          handleRedirectFunc(developerItem);
+                        }, 1000);
+                      }}
+                      key={idx}
+                    >
+                      <div className="avatar-container">
+                        <img
+                          src={
+                            developerItem?.profile_photo?.url || props.avatar
+                          }
+                          alt="account photo"
+                        />
+                      </div>
+                      <div className="account-details">
+                        <h1 style={{ textTransform: "capitalize" }}>
+                          {" "}
+                          {developerItem?.metadata?.organization_name ||
+                            props.accountName}
+                        </h1>
+                        {developerItem?.notification_count > 0 && (
+                          <span>{developerItem?.notification_count}</span>
+                        )}
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            )}
           </>
           {/* } */}
 
-          {envType === "staging" || envType === "localhost" ? 
-          <> 
-          {props?.instructorAccountData?.length > 0 && (
-            <div>
-              <h3>Instructor account</h3>
-              {props?.instructorAccountData?.map((instructorItem, idx) => (
-                <div
-                  className={`account-info ${
-                    instructorItem === props?.selectedAccount ? "activated" : ""
-                  }`}
-                  onClick={() => {
-                    props?.setSelectedAccount(instructorItem);
-                    handleSetDefaultAccount(instructorItem?.id);
-                    if (window.location.port) {
-                      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/dashboard`;
-                    }
-                  }}
-                  key={idx}
-                >
-                  <div className="avatar-container">
-                    <img
-                      src={instructorItem?.profile_photo?.url || props.avatar}
-                      alt="account photo"
-                    />
-                  </div>
-                  <div className="account-details">
-                    <h1>
-                      {" "}
-                      {instructorItem?.display_name || props.accountName}
-                    </h1>
-                    {instructorItem?.notification_count > 0 && (
-                      <span>{instructorItem?.notification_count} </span>
-                    )}
-                  </div>
-                </div>
-              ))}
-            </div>
-          )}
-          {envType === "staging" || envType === "localhost" && props?.enterpriseAccountData?.length > 0 && (
-            <div>
-              <h3>Enterprise account</h3>
-              {props?.enterpriseAccountData?.map((enterpriseItem, idx) => (
-                <div
-                  className={`account-info ${
-                    enterpriseItem === props?.selectedAccount ? "activated" : ""
-                  }`}
-                  onClick={() => {
-                    props?.setSelectedAccount(enterpriseItem);
-                    handleSetDefaultAccount(enterpriseItem?.id);
-                    if (window.location.port) {
-                      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/dashboard`;
-                    }
-                  }}
-                  key={idx}
-                >
-                  <div className="avatar-container">
-                    <img
-                      src={enterpriseItem?.profile_photo?.url || props.avatar}
-                      alt="account photo"
-                    />
-                  </div>
-                  <div className="account-details">
-                    <h1>
-                      {" "}
-                      {enterpriseItem?.display_name || props.accountName}
-                    </h1>
-                    {enterpriseItem?.notification_count > 0 && (
-                      <span>{enterpriseItem?.notification_count} </span>
-                    )}
-                  </div>
+          {envType === "staging" || envType === "localhost" ? (
+            <>
+              {props?.instructorAccountData?.length > 0 && (
+                <div>
+                  <h3>Instructor account</h3>
+                  {props?.instructorAccountData?.map((instructorItem, idx) => {
+                    console.log(
+                      instructorItem?.id,
+                      props?.selectedAccount?.id,
+                      "run"
+                    );
+                    return (
+                      <div
+                        className={`account-info ${
+                          instructorItem?.id === props?.selectedAccount?.id
+                            ? "activated"
+                            : ""
+                        }`}
+                        onClick={() => {
+                          props?.setSelectedAccount(instructorItem);
+                          setTimeout(() => {
+                            handleRedirectFunc(instructorItem);
+                          }, 1000);
+                        }}
+                        key={idx}
+                      >
+                        <div className="avatar-container">
+                          <img
+                            src={
+                              instructorItem?.profile_photo?.url || props.avatar
+                            }
+                            alt="account photo"
+                          />
+                        </div>
+                        <div className="account-details">
+                          <h1>
+                            {" "}
+                            {instructorItem?.display_name || props.accountName}
+                          </h1>
+                          {instructorItem?.notification_count > 0 && (
+                            <span>{instructorItem?.notification_count} </span>
+                          )}
+                        </div>
+                      </div>
+                    );
+                  })}
                 </div>
-              ))}
-            </div>
-          )}
-          
-          {envType === "staging" || envType === "localhost" && 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>
-                    {personalItem?.notification_count > 0 && (
-                      <span>{personalItem?.notification_count} </span>
-                    )}
-                  </div>
-                </div>
-              ))}
-            </div>
+              )}
+              {envType === "staging" ||
+                (envType === "localhost" &&
+                  props?.enterpriseAccountData?.length > 0 && (
+                    <div>
+                      <h3>Enterprise account</h3>
+                      {props?.enterpriseAccountData?.map(
+                        (enterpriseItem, idx) => (
+                          <div
+                            className={`account-info ${
+                              enterpriseItem?.id === props?.selectedAccount?.id
+                                ? "activated"
+                                : ""
+                            }`}
+                            onClick={() => {
+                              props?.setSelectedAccount(enterpriseItem);
+                              setTimeout(() => {
+                                handleRedirectFunc(enterpriseItem);
+                              }, 1000);
+                            }}
+                            key={idx}
+                          >
+                            <div className="avatar-container">
+                              <img
+                                src={
+                                  enterpriseItem?.profile_photo?.url ||
+                                  props.avatar
+                                }
+                                alt="account photo"
+                              />
+                            </div>
+                            <div className="account-details">
+                              <h1>
+                                {" "}
+                                {enterpriseItem?.display_name ||
+                                  props.accountName}
+                              </h1>
+                              {enterpriseItem?.notification_count > 0 && (
+                                <span>
+                                  {enterpriseItem?.notification_count}{" "}
+                                </span>
+                              )}
+                            </div>
+                          </div>
+                        )
+                      )}
+                    </div>
+                  ))}
+
+              {envType === "staging" ||
+                (envType === "localhost" &&
+                  props?.personalAccountData?.length > 0 && (
+                    <div>
+                      <h3>Personal account</h3>
+                      {props?.personalAccountData?.map((personalItem, idx) => (
+                        <div
+                          className={`account-info ${
+                            personalItem?.id === props?.selectedAccount?.id
+                              ? "activated"
+                              : ""
+                          }`}
+                          onClick={() => {
+                            props?.setSelectedAccount(personalItem);
+                            setTimeout(() => {
+                              handleRedirectFunc(personalItem);
+                            }, 1000);
+                          }}
+                          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>
+                            {personalItem?.notification_count > 0 && (
+                              <span>{personalItem?.notification_count} </span>
+                            )}
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  ))}
+            </>
+          ) : (
+            <></>
           )}
-          </> : 
-          <></>
-          }
           {/* // )} */}
         </AccountDropdownBody>
 
         <AccountDropdownFooter>
           <button
             onClick={() => {
-              if(window.location.hostname.includes("staging")){
+              if (window.location.hostname.includes("staging")) {
                 window.location.href =
-                "https://559staging.learngual.com/auth/account-type";
-              }
-              else if(!window.location.hostname.includes("localhost")){
-                window.location.href= "https://learngual.com/auth/account-type";
+                  "https://559staging.learngual.com/auth/account-type";
+              } else if (!window.location.hostname.includes("localhost")) {
+                window.location.href =
+                  "https://learngual.com/auth/account-type";
               }
             }}
             style={{ cursor: "pointer" }}

package/src/components/header/index.jsx

@@ -58,11 +58,13 @@ const HeaderComponent = (props) => {
     generalNotificationCountData,
     handleGeneralNotificationCount,
     notificationData,
-    handleGetNotification
+    handleGetNotification,
   } = useHeader();
   const { pathname } = useLocation();
-  const { setGeneralData, generalData, notificationMarkReadData } = useContext(OutletContext);
+  const { setGeneralData, generalData, notificationMarkReadData } =
+    useContext(OutletContext);
   const [selectedAccount, setSelectedAccount] = useState();
+  const { setDefaultAccount, handleSetDefaultAccount } = useHeader();
 
   useEffect(() => {
     setIsOpen(false);
@@ -118,10 +120,7 @@ const HeaderComponent = (props) => {
       let enterpriseArray = [];
 
       allUserAccountsDetail?.map((accountItem, idx) => {
-        if (
-          accountItem?.type === "PERSONAL" &&
-          !personalAccountData?.includes(accountItem)
-        ) {
+        if (accountItem?.type === "PERSONAL") {
           personalArray.push(accountItem);
           setPersonalAccountData(personalArray);
         }
@@ -129,64 +128,22 @@ const HeaderComponent = (props) => {
           developerArray.push(accountItem);
           setDeveloperAccountData(developerArray);
         }
-        if (
-          accountItem?.type === "INSTRUCTOR" &&
-          !instructorAccountData?.includes(accountItem)
-        ) {
+        if (accountItem?.type === "INSTRUCTOR") {
           instructorArray.push(accountItem);
           setInstructorAccountData(instructorArray);
         }
-        if (
-          accountItem?.type === "ENTERPRISE" &&
-          !enterpriseAccountData?.includes(accountItem)
-        ) {
+        if (accountItem?.type === "ENTERPRISE") {
           enterpriseArray.push(accountItem);
           setEnterpriseAccountData(enterpriseArray);
         }
       });
-
-      if (window.location.pathname.includes("personal")) {
-        setSelectedAccount(personalArray?.find(
-          (item) => (item?.id === defaultAcctId || item?.id === account_id) ?? item
-        ));
-      }
-      if (
-        window.location.host?.includes("developer") ||
-        window.location.host?.includes("coming") ||
-        window.location.host?.includes("localhost") ||
-        window.location.pathname.includes("developer")
-      ) {
-        setSelectedAccount(
-          developerArray?.find(
-            (item) => item?.id === activeDeveloperAccount ?? item
-          )
-        );
-      }
-      if (window.location.pathname.includes("instructor")) {
-        setSelectedAccount(instructorArray?.find(
-          (item) => (item?.id === defaultAcctId || item?.id === account_id) ?? item
-        ));
-      }
-      if (window.location.pathname.includes("enterprise")) {
-        setSelectedAccount(enterpriseArray?.find(
-          (item) => (item?.id === defaultAcctId || item?.id === account_id) ?? item
-        ));
-      }
-      // if all fails, set selected acct to developer
-      else{
-        setSelectedAccount(
-          developerArray?.find(
-            (item) => item?.id === activeDeveloperAccount ?? item
-          )
-        );
-      }
     }
   }, [userAccountsDetail?.data, generalNotificationCountData?.response]);
 
   // update general data when selected acct changes
 
   useEffect(() => {
-    if (selectedAccount) {
+    if (selectedAccount?.id) {
       setGeneralData((generalData) => ({
         ...generalData,
         selectedAccount: selectedAccount,
@@ -196,6 +153,7 @@ const HeaderComponent = (props) => {
 
   const containerRef = useRef(null);
   const secondContainerRef = useRef(null);
+  const acctDropdownContainerRef = useRef(null);
 
   // logic for closing language dropdown when clicking outside
 
@@ -222,7 +180,9 @@ const HeaderComponent = (props) => {
     const handleClickOutside = (event) => {
       if (
         secondContainerRef.current &&
-        !secondContainerRef.current.contains(event.target)
+        acctDropdownContainerRef.current &&
+        !secondContainerRef.current.contains(event.target) &&
+        !acctDropdownContainerRef.current.contains(event.target)
       ) {
         setIsOpen();
       }
@@ -257,8 +217,10 @@ const HeaderComponent = (props) => {
             ? ".localhost"
             : ".learngual.com"
         }; path=/; expires=${date.toUTCString()};`;
+
+      setSelectedAccount(getDefaultAccount?.data);
     }
-  }, [getDefaultAccount?.response]);
+  }, [getDefaultAccount?.data]);
 
   // get current default account and store in cookie from path
   useEffect(() => {
@@ -285,8 +247,6 @@ const HeaderComponent = (props) => {
   const [socketUrl, setSocketUrl] = useState(
     "dev-117782726-api.learngual.com/notify/v1/ws/connect/"
   );
-  const socket = useRef();
-  const generalSocket = useRef();
   const token = getCookie("access");
   const defaultAcctId = getCookie("defaultAccountID");
   const account_id = generalData?.defaultAccount?.id || defaultAcctId;
@@ -332,7 +292,6 @@ const HeaderComponent = (props) => {
 
   // websocket for room
   useEffect(() => {
-
     const websocket2 = new WebSocket(
       `wss://${socketUrl}?account=${account_id}&authorization=${token}&room_id=${account_id}`
     );
@@ -378,7 +337,9 @@ const HeaderComponent = (props) => {
     handleGetUnreadNotification();
     handleGeneralNotificationCount();
   }, [notificationMarkReadData?.response]);
-
+  console.log("====================================");
+  console.log(selectedAccount, "sel");
+  console.log("====================================");
   return (
     <Navbar>
       <img src={logo} alt="Learngual logo" />
@@ -485,7 +446,6 @@ const HeaderComponent = (props) => {
             />
           )}
         </div>
-
         {selectedAccount && (
           <UserProfile
             onClick={(e) => {
@@ -503,7 +463,8 @@ const HeaderComponent = (props) => {
             </div>
             <div className="user-info-container">
               <h5 style={{ textTransform: "capitalize" }}>
-                {selectedAccount?.metadata?.organization_name}
+                {selectedAccount?.metadata?.organization_name ||
+                  selectedAccount?.display_name}
               </h5>
               <h6 style={{ textTransform: "capitalize" }}>
                 {selectedAccount?.type?.toLowerCase()}
@@ -517,7 +478,7 @@ const HeaderComponent = (props) => {
       {isOpen && (
         <AccountDropdown
           avatar={avatar}
-          activeAccountName={"Default name"}
+          activeAccountName={selectedAccount?.display_name}
           activeAccountType={"Personal Account"}
           accountName={"Default name"}
           accountType={"Default Account"}
@@ -538,6 +499,9 @@ const HeaderComponent = (props) => {
           setGeneralData={setGeneralData}
           userAccountsDetail={userAccountsDetail}
           userDetails={userDetails}
+          setDefaultAccount={setDefaultAccount}
+          handleSetDefaultAccount={handleSetDefaultAccount}
+          ref={acctDropdownContainerRef}
         />
       )}
     </Navbar>

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

@@ -109,13 +109,13 @@ export const Nav = styled.ul`
       font-weight: 600;
       &::after {
         content: "";
-         position: absolute;
-         left: 0;
-         bottom: -9px;
-         width: 40px;
-         height: 4px;
-         background-color: rgba(0, 194, 194, 1);
-         transition: width 0.3s ease-in-out;
+        position: absolute;
+        left: 0;
+        bottom: -9px;
+        width: 40px;
+        height: 4px;
+        background-color: rgba(0, 194, 194, 1);
+        transition: width 0.3s ease-in-out;
       }
     }
 
@@ -124,87 +124,12 @@ export const Nav = styled.ul`
     }
 
     & svg path {
-      stroke: ${({ isActive }) => (isActive ? 'rgba(0, 194, 194, 1)' : 'currentcolor')};
+      stroke: ${({ isActive }) =>
+        isActive ? "rgba(0, 194, 194, 1)" : "currentcolor"};
     }
   }
 `;
 
-// export const Nav = styled.ul`
-//   display: flex;
-//   list-style: none;
-//   align-items: center;
-//   margin: 0 10px;
-//   padding: 0 5px;
-//   width: 57%;
-//   @media screen and (max-width: 1530px) {
-//     width: 40%;
-//   }
-//   & li {
-//     display: flex;
-//     align-items: center;
-//     margin: 0 10px;
-//   }
-
-//   & li:nth-of-type(1) {
-//     margin-right: 75px;
-//     margin-left: 35px;
-//   }
-
-//   & a.active {
-//     color: rgba(0, 194, 194, 1) !important;
-//     font-size: 21px;
-//     font-weight: 600;
-//     & svg path {
-//       stroke: rgba(0, 194, 194, 1);
-//     }
-//   }
-//   /* & a.active:after {
-//       content: "";
-//       position: absolute;
-//       left: 0;
-//       bottom: -9px;
-//       width: 40px;
-//       height: 4px;
-//       background-color: rgba(0, 194, 194, 1);
-//       transition: width 0.3s ease-in-out;
-//     } */
-
-//   & a {
-//     text-decoration: none;
-//     display: flex;
-//     align-items: center;
-//     color: #4a4d4d;
-//     font-size: 15px;
-//     font-style: normal;
-//     font-weight: 600;
-//     line-height: normal;
-//     position: relative;
-
-//     &:hover:after {
-//       content: "";
-//       position: absolute;
-//       left: 0;
-//       bottom: -9px;
-//       width: 40px;
-//       height: 4px;
-//       background-color: rgba(0, 194, 194, 1);
-//       transition: width 0.3s ease-in-out;
-//     }
-
-//     & svg {
-//       margin-right: 12px;
-//     }
-
-//     &:hover {
-//       color: rgba(0, 194, 194, 1);
-//       // border-bottom: 2px solid rgba(0, 194, 194, 1);
-//       & svg path {
-//         stroke: rgba(0, 194, 194, 1);
-//       }
-//     }
-//   }
-// `;
-
 export const SearchInputGroup = styled.div`
   background-color: transparent;
   border-radius: 60px;
@@ -296,6 +221,10 @@ export const UserProfile = styled.div`
     color: rgba(49, 51, 51, 1);
     font-size: 16px;
     font-weight: 700;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    max-width: 150px;
     @media screen and (max-width: 1530px) {
       font-size: 12px;
     }
@@ -432,7 +361,8 @@ export const AccountDropdownHeader = styled.div`
 export const AccountDropdownBody = styled.div`
   background-color: #ffffff;
   width: 100%;
-
+  overflow-y: scroll;
+  height: 100%;
   & h3 {
     font-family: "Nunito";
     font-style: normal;
@@ -549,7 +479,7 @@ export const Navbar2 = styled.nav`
   z-index: 99;
   justify-content: space-between;
 
-  img{
+  img {
     cursor: pointer;
   }
 `;

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

@@ -40,11 +40,24 @@ const SideMenu = ({
   }, [isOpen]);
 
   // Normal route filter
-  const filteredRoutes = routes.find(
-    (route) => route.userType === userType
-  )?.routes;
-  const [routeFilter, setRouteFilter] = useState(filteredRoutes);
+  const [filteredRoutes, setFilteredRoutes] = useState();
 
+  useEffect(() => {
+    if (userType) {
+      setFilteredRoutes(
+        routes.find((route) => route.userType === userType)?.routes
+      );
+    }
+  }, [userType]);
+
+  console.log("====================================");
+  console.log(filteredRoutes, "rar");
+  console.log("====================================");
+
+  const [routeFilter, setRouteFilter] = useState();
+  useEffect(() => {
+    setRouteFilter(filteredRoutes);
+  }, []);
   // filter route to remove contract
   const affiliatesFilteredRoute = filteredRoutes?.filter(
     (route) => !route.affiliates
@@ -57,7 +70,7 @@ const SideMenu = ({
     } else {
       setRouteFilter(filteredRoutes);
     }
-  }, [affiliatesActive]);
+  }, [affiliatesActive, filteredRoutes]);
 
   // Right bars
   const EnterpriseRight = <EnterpriseRightBar />;

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

@@ -13,32 +13,49 @@ import avatar from "../../../assets/images/avatar.png";
 import { OutletContext } from "../../AppMainLayout";
 
 const UserCard = ({ user, isOpen }) => {
-  const { handleGetUserDetails, userDetails } = useHeader();
+  const { handleGetUserDetails, userDetails, handleSetDefaultAccount } =
+    useHeader();
   const [organizationName, setOrganizationName] = useState();
   const { generalData } = useContext(OutletContext);
   useEffect(() => {
     handleGetUserDetails();
-    if (generalData?.accounts) {
-      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;
-        }
-      }
+    if (generalData?.selectedAccount) {
+      const date = new Date();
+      date.setDate(date.getDate() + 28);
+      document.cookie =
+        "activeDeveloperAccount=" +
+        generalData?.selectedAccount?.id +
+        `; domain=${
+          window.location.href.includes("localhost")
+            ? ".localhost"
+            : ".learngual.com"
+        }; path=/; expires=${date.toUTCString()};`;
+      document.cookie =
+        "defaultAccountID=" +
+        generalData?.selectedAccount?.id +
+        `; domain=${
+          window.location.href.includes("localhost")
+            ? ".localhost"
+            : ".learngual.com"
+        }; path=/; expires=${date.toUTCString()};`;
+      document.cookie =
+        "defaultAccountType=" +
+        generalData?.selectedAccount?.type +
+        `; domain=${
+          window.location.href.includes("localhost")
+            ? ".localhost"
+            : ".learngual.com"
+        }; path=/; expires=${date.toUTCString()};`;
+
+      handleSetDefaultAccount(generalData?.selectedAccount?.id);
 
-     
-        if (generalData?.selectedAccount?.type === 'PERSONAL') {
-          setOrganizationName(generalData?.selectedAccount?.display_name)
-        }else{
-          return setOrganizationName(generalData?.selectedAccount?.metadata?.organization_name);
-        }
+      if (generalData?.selectedAccount?.type === "PERSONAL") {
+        setOrganizationName(generalData?.selectedAccount?.display_name);
+      } else {
+        return setOrganizationName(
+          generalData?.selectedAccount?.metadata?.organization_name
+        );
+      }
     }
   }, [generalData]);
   console.log(generalData, "data");
@@ -85,7 +102,11 @@ const UserCard = ({ user, isOpen }) => {
                 fontWeight: 700,
                 fontSize: 15,
               }}
-            >{`${organizationName? organizationName : ''}.`}</Handle>
+            >{`${
+              organizationName
+                ? organizationName
+                : generalData?.selectedAccount?.display_name ?? ""
+            }.`}</Handle>
           </UserDetail>
         </>
       )}

package/src/components/sideNav/index.jsx

@@ -50,7 +50,7 @@ const SideBar = ({ routes }) => {
           <NavItem key={route.path}>
             <NavLinkStyled
               activeClassName="active"
-              to={route?.path}
+              to={route?.newTab ? "" : route?.path}
               onClick={() =>
                 window.open(route.path, route?.newTab ? "_blank" : "")
               }