l-min-components 1.6.1271 → 1.6.1273

package/package.json

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

package/src/components/AppMainLayout/index.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, createContext } from "react";
+import React, { useState, useEffect, createContext, useMemo } from "react";
 import { Outlet, useLocation } from "react-router-dom";
 import {
   Layout,
@@ -42,13 +42,11 @@ const AppMainLayout = ({ children }) => {
   const [sideMenuLayout, setSideMenuLayout] = useState(true);
   const [defaultAcct, setDefaultAcct] = useState("");
   const [centerLayoutStyle, setCenterLayoutStyle] = useState({});
-  const [hideAffilicates, setHideAffilicates] = useState(false);
   const [affiliatesActive, setAffiliatesActive] = useState(false);
   const [accessToken, setAccessToken] = useState("");
   const [envType, setEnvType] = useState("");
   const [newNotifications, setNewNotifications] = useState([]);
   const [affiliateAccount, setAffiliateAccount] = useState(null);
-  const [deactivated, setDeactivated] = useState(true); // testing, until we get account setup
   const [gracePeriod, setGracePeriod] = useState(true); // test
   const [deviceWidth, setDeviceWidth] = useState(window.innerWidth);
   const [newLoadingForPostDefaultAccount, setNewLoadingForPostDefaultAccount] =
@@ -69,6 +67,34 @@ const AppMainLayout = ({ children }) => {
       );
   }, []);
 
+  // getting account name
+  // active account type
+  const activeAccountType = useMemo(
+    () => String(generalData?.selectedAccount?.type).toLowerCase(),
+    [generalData]
+  );
+  const accountName = useMemo(() => {
+    const { user: User, selectedAccount } = generalData;
+    if (!User || !selectedAccount) return "..."; // or an empty string
+    const defaultAccountName = String(User.first_name).concat(
+      " ",
+      User.last_name
+    );
+
+    switch (activeAccountType) {
+      case "enterprise":
+        return selectedAccount.metadata.organization_name ?? defaultAccountName;
+      case "developer":
+        return (
+          selectedAccount.metadata.organization_name ??
+          selectedAccount.metadata.org_name ??
+          defaultAccountName
+        );
+      default:
+        return defaultAccountName;
+    }
+  }, [generalData]);
+  console.log(activeAccountType, "activeAccountType");
   const {
     setDefaultAccount,
     handleSetDefaultAccount,
@@ -119,8 +145,8 @@ const AppMainLayout = ({ children }) => {
     if (setDefaultAccount?.data) {
       if (
         setDefaultAccount?.response?.status === 207 &&
-        (!window.location.host.includes("staging") &&
-          !window.location.host.includes("local"))
+        !window.location.host.includes("staging") &&
+        !window.location.host.includes("local")
       ) {
         window.location.href = "/auth/account-type";
       } else {
@@ -253,6 +279,7 @@ const AppMainLayout = ({ children }) => {
       value={{
         messageKit,
         affiliateAccount,
+        accountName,
         setRightComponent,
         setRightLayout,
         generalData,
@@ -271,8 +298,6 @@ const AppMainLayout = ({ children }) => {
         setSelectedCourseId,
         centerLayoutStyle,
         setCenterLayoutStyle,
-        // return true if instructor affiliates is Active
-        setHideAffilicates,
         affiliatesActive,
         accessToken,
         envType,
@@ -280,8 +305,7 @@ const AppMainLayout = ({ children }) => {
         setNewNotifications,
         notificationMarkReadData,
         handleGetNotificationMarkRead,
-      }}
-    >
+      }}>
       {/* display mobile layout on device width*/}
       {deviceWidth < 1200 ? (
         <MobileLayout findText={findText} />
@@ -293,8 +317,7 @@ const AppMainLayout = ({ children }) => {
           ) : (
             <Layout
               coming={coming}
-              hasLayoutBackgroundImage={hasLayoutBackgroundImage}
-            >
+              hasLayoutBackgroundImage={hasLayoutBackgroundImage}>
               <HeaderComponent
                 setNewNotifications={setNewNotifications}
                 findText={findText}

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

@@ -18,25 +18,6 @@ export const Layout = styled.div`
     hasLayoutBackgroundImage ? "100%" : ""};
   background-position: ${({ hasLayoutBackgroundImage }) =>
     hasLayoutBackgroundImage ? "bottom" : ""};
-
-  overflow-y: auto;
-  scrollbar-width: thin;
-
-  min-height: 100vh;
-  /* "auto" or "thin" depending on browser support */
-  scrollbar-color: transparent transparent;
-
-  &::-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 MainLayout = styled.div`
@@ -63,8 +44,23 @@ export const CenterLayout = styled.div`
   @media screen and (max-width: 1023px) {
     margin-right: 0;
   }
-
+  overflow-y: scroll;
+  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

@@ -50,7 +50,7 @@ const AccountDropdown = (props) => {
     // //console.log(id, "bam");
   };
 
-  //console.log(props?.selectedAccount, "selected");
+  // console.log(props?.selectedAccount, "selected");
 
   return (
     <>
@@ -132,8 +132,7 @@ const AccountDropdown = (props) => {
                             handleRedirectFunc(developerItem);
                           }, 1000);
                         }}
-                        key={idx}
-                      >
+                        key={idx}>
                         <div className="avatar-container">
                           <img
                             src={
@@ -179,8 +178,7 @@ const AccountDropdown = (props) => {
                             handleRedirectFunc(instructorItem);
                           }, 1000);
                         }}
-                        key={idx}
-                      >
+                        key={idx}>
                         <div className="avatar-container">
                           <img
                             src={
@@ -221,8 +219,7 @@ const AccountDropdown = (props) => {
                               handleRedirectFunc(enterpriseItem);
                             }, 1000);
                           }}
-                          key={idx}
-                        >
+                          key={idx}>
                           <div className="avatar-container">
                             <img
                               src={
@@ -266,8 +263,7 @@ const AccountDropdown = (props) => {
                             handleRedirectFunc(personalItem);
                           }, 1000);
                         }}
-                        key={idx}
-                      >
+                        key={idx}>
                         <div className="avatar-container">
                           <img
                             src={
@@ -301,8 +297,7 @@ const AccountDropdown = (props) => {
             onClick={() => {
               window.location.href = "/auth/account-type";
             }}
-            style={{ cursor: "pointer" }}
-          >
+            style={{ cursor: "pointer" }}>
             <AddIcon /> {props.findText("Add account")}
           </button>
         </AccountDropdownFooter>

package/src/components/header/getHeaderDetails.js

@@ -1,4 +1,5 @@
 import useAxios from "axios-hooks";
+import { useEffect } from "react";
 
 const useHeader = () => {
   // get user details
@@ -332,7 +333,6 @@ const useHeader = () => {
     }
   };
 
-
   const [{ ...getTotalMessagesCountData }, getTotalMessagesCount] = useAxios(
     {
       method: "GET",
@@ -369,6 +369,11 @@ const useHeader = () => {
     }
   };
 
+  //defaults
+  // get user info
+  useEffect(() => {
+    handleGetUserDetails();
+  }, []);
 
   return {
     handleGetUserDetails,

package/src/components/header/index.jsx

@@ -53,6 +53,7 @@ const HeaderComponent = (props) => {
   const [languageDropdown, setLanguageDropdown] = useState();
   const [isOpen, setIsOpen] = useState(false);
   // const [searchResultOpen, setSearchResultOpen] = useState(false);
+  // in general data find user info and replace where user details is being used
   const {
     handleGetUserAccountsDetail,
     handleGetUserDetails,
@@ -74,7 +75,7 @@ const HeaderComponent = (props) => {
     handleSetDefaultAccount,
   } = useHeader();
   const { pathname } = useLocation();
-  const { setGeneralData, generalData, notificationMarkReadData } =
+  const { setGeneralData, generalData, notificationMarkReadData, accountName } =
     useContext(OutletContext);
   const [accountType, setAccountType] = useState("");
   const currentAccountType = props?.selectedAccount?.type
@@ -420,8 +421,7 @@ const HeaderComponent = (props) => {
         onClick={() => {
           setLanguageDropdown();
           setIsOpen();
-        }}
-      >
+        }}>
         <li>
           <a className={isHomePage() ? "active" : ""}>
             {getNavLinkIcon()} {props.findText(getNavLinkLabel())}
@@ -440,8 +440,7 @@ const HeaderComponent = (props) => {
               className={
                 window.location.pathname.includes("settings") ? "active" : ""
               }
-              style={{ cursor: "pointer" }}
-            >
+              style={{ cursor: "pointer" }}>
               <SettingIcon /> {props.findText("Settings")}
             </a>
           </li>
@@ -474,8 +473,7 @@ const HeaderComponent = (props) => {
                   ? "disabled"
                   : ""
               }
-              style={{ cursor: isPendingDelete ? "not-allowed" : "pointer" }}
-            >
+              style={{ cursor: isPendingDelete ? "not-allowed" : "pointer" }}>
               {unreadNotificationData?.data?.count > 0 ? (
                 <NotificationIcon />
               ) : (
@@ -509,8 +507,7 @@ const HeaderComponent = (props) => {
         onClick={() => {
           setLanguageDropdown();
           setIsOpen();
-        }}
-      >
+        }}>
         {/* {(!isDeveloper || !window.location.hostname.includes("coming")) && ( // when developer and on staging, don't show
           <SearchInputGroup>
             <SearchIcon />
@@ -539,8 +536,7 @@ const HeaderComponent = (props) => {
             onClick={() => {
               setLanguageDropdown(!languageDropdown);
               setIsOpen();
-            }}
-          >
+            }}>
             <img src={selectedLanguageData[value] || usFlag} alt="" />
             <ArrowDownIcon />
           </div>
@@ -562,8 +558,7 @@ const HeaderComponent = (props) => {
               setIsOpen(!isOpen);
               setLanguageDropdown();
             }}
-            ref={secondContainerRef}
-          >
+            ref={secondContainerRef}>
             <div className="user-img-container">
               <img
                 src={props?.selectedAccount?.profile_photo?.url || avatar}
@@ -571,10 +566,7 @@ const HeaderComponent = (props) => {
               />
             </div>
             <div className="user-info-container">
-              <h5 style={{ textTransform: "capitalize" }}>
-                {props?.selectedAccount?.metadata?.organization_name ||
-                  props?.selectedAccount?.display_name}
-              </h5>
+              <h5 style={{ textTransform: "capitalize" }}>{accountName}</h5>
               <h6 style={{ textTransform: "capitalize" }}>
                 {props?.selectedAccount?.type?.toLowerCase()}
               </h6>

package/src/components/instructorAccountSwitcher/index.jsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import styled from "styled-components";
 // import ExpiryModal from "./components/expiry modal";
 import Search from "../searchBar";
@@ -9,6 +9,7 @@ import useHeader from "../header/getHeaderDetails";
 import OutsideAlerter from "../outsideEventChecker";
 import FullPageLoader from "../fullPageLoader";
 import deleteCookies from "./deleteCookies";
+import { OutletContext } from "..";
 
 const InstructorAccountSwitcher = ({ generalData, onChange }) => {
   // const [expiryFlow, setExpiryFlow] = useState();
@@ -32,12 +33,14 @@ const InstructorAccountSwitcher = ({ generalData, onChange }) => {
   }, [generalData?.selectedAccount, search]);
 
   const dropdownList = getAllAffiliateData?.data?.results?.map((item) => {
-    const image = item?.profile_photo?.url || item?.profile_photo[1][1];
-    return { name: item?.display_name, image, id: item?.id };
+    const image = item?.profile_photo?.url;
+    return {
+      name: item?.metadata.organization_name ?? "...",
+      image,
+      id: item?.id,
+    };
   });
 
-  console.log(dropdownList, getAllAffiliateData);
-
   const [dropdown, setDropdown] = useState(false);
 
   const getCookie = () => {
@@ -111,7 +114,7 @@ const InstructorAccountSwitcher = ({ generalData, onChange }) => {
           const value = res?.data;
           const image = value?.profile_photo?.url;
           setSelectedValue(() => ({
-            name: value?.display_name,
+            name: value?.metadata.organization_name,
             image,
             id: value?.id,
           }));
@@ -130,6 +133,8 @@ const InstructorAccountSwitcher = ({ generalData, onChange }) => {
     }
   };
 
+  const { accountName } = useContext(OutletContext);
+  console.log(selectedValue, "selected..");
   return getAllAffiliateData?.data?.results?.length > 0 && !search ? (
     <>
       {(setDefaultAffiliateData?.loading ||
@@ -160,24 +165,20 @@ const InstructorAccountSwitcher = ({ generalData, onChange }) => {
       )} */}
       <Container className="instructor_account_switcher">
         <div className="left">
-          {switchValue !== "affiliates" && (
-            <p>{generalData?.selectedAccount?.display_name}</p>
-          )}
+          {switchValue !== "affiliates" && <p>{accountName}</p>}
           {switchValue === "affiliates" && (
             <AffiliatesDropDown>
               {!selectedValue ? (
                 <div
                   className="placeholder"
-                  onClick={() => setDropdown(!dropdown)}
-                >
+                  onClick={() => setDropdown(!dropdown)}>
                   <p>Select affiliate</p>
                   <ArrowDown />
                 </div>
               ) : (
                 <div
                   className="selected"
-                  onClick={() => setDropdown(!dropdown)}
-                >
+                  onClick={() => setDropdown(!dropdown)}>
                   <div>
                     <img src={selectedValue?.image} alt="" />
                     <p>{selectedValue?.name}</p>
@@ -201,8 +202,7 @@ const InstructorAccountSwitcher = ({ generalData, onChange }) => {
                           key={item?.id}
                           onClick={() => {
                             handleSelection(item);
-                          }}
-                        >
+                          }}>
                           <div className="left">
                             <img src={item?.image} alt="" />
                             <p>{item?.name}</p>
@@ -220,15 +220,13 @@ const InstructorAccountSwitcher = ({ generalData, onChange }) => {
         <div className="btn__wrapper">
           <button
             className={switchValue !== "affiliates" ? "active" : ""}
-            onClick={() => handleSwitch(1)}
-          >
+            onClick={() => handleSwitch(1)}>
             <span>My Account</span>
             <span className="circle"></span>
           </button>
           <button
             className={switchValue === "affiliates" ? "active" : ""}
-            onClick={() => handleSwitch(2)}
-          >
+            onClick={() => handleSwitch(2)}>
             <span>Affiliates</span>
             <span className="circle"></span>
           </button>

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

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from "react";
+import React, { useContext, useEffect, useMemo, useState } from "react";
 import PropTypes from "prop-types";
 import {
   UserCardContainer,
@@ -16,7 +16,7 @@ const UserCard = ({ user, isOpen, findText }) => {
   const { handleGetUserDetails, userDetails, handleSetDefaultAccount } =
     useHeader();
   const [organizationName, setOrganizationName] = useState();
-  const { generalData } = useContext(OutletContext);
+  const { generalData, accountName } = useContext(OutletContext);
 
   useEffect(() => {
     handleGetUserDetails();
@@ -59,7 +59,7 @@ const UserCard = ({ user, isOpen, findText }) => {
       }
     }
   }, [generalData]);
-  // console.log(generalData, "data");
+  console.log(generalData, "data...");
 
   return (
     <UserCardContainer isOpen={isOpen}>
@@ -94,20 +94,16 @@ const UserCard = ({ user, isOpen, findText }) => {
               if (window.location.pathname.includes("instructor")) {
                 window.location.href = `${window.location.protocol}//${window.location.hostname}/instructor/profile`;
               }
-            }}
-          >
+            }}>
             <UserName>{findText("Hello")}</UserName>
             <Handle
               style={{
                 textTransform: "capitalize",
                 fontWeight: 700,
                 fontSize: 15,
-              }}
-            >{`${
-              organizationName
-                ? organizationName
-                : generalData?.selectedAccount?.display_name ?? ""
-            }.`}</Handle>
+              }}>
+              {accountName}
+            </Handle>
           </UserDetail>
         </>
       )}