l-min-components 1.7.1305 → 1.7.1306

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "l-min-components",
-  "version": "1.7.1305",
+  "version": "1.7.1306",
   "type": "module",
   "files": [
     "src/assets",
@@ -77,5 +77,6 @@
     "@types/react-dom": "^18.0.10",
     "@vitejs/plugin-react": "^3.1.0",
     "vite": "^4.1.0"
-  }
+  },
+  "packageManager": "yarn@1.22.22+sha1.ac34549e6aa8e7ead463a7407e1c7390f61a6610"
 }

package/src/components/AppMainLayout/index.jsx

@@ -131,10 +131,10 @@ const AppMainLayout = ({ children }) => {
     handleCurrentSubscription,
     getDefaultAccount,
     handleGetDefaultAccount,
-    user,
-    userDetails,
-  } = useHeader({ default: true });
-  // get current default account and store in cookie (from api);
+  } = useHeader();
+
+  // get current default account and store in cookie (from api)
+
   useEffect(() => {
     if (getDefaultAccount?.data) {
       const date = new Date();
@@ -298,17 +298,15 @@ const AppMainLayout = ({ children }) => {
     setIsTranslationsLoading,
   } = useTranslation(wordBank);
 
-  const messageKit = useMessageKit(); // useMessageKit
+  const messageKit = useMessageKit({ affiliateAccount }); // useMessageKit
 
   return (
     <OutletContext.Provider
       value={{
         messageKit,
         affiliateAccount,
-        userDetails,
         findAccountNames,
         accountName,
-        user,
         setRightComponent,
         setRightLayout,
         generalData,

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

@@ -45,7 +45,7 @@ export const MainLayout = styled.div`
   width: 100%;
   padding: 84px 20px 20px 0;
   /* max-height: 100vh; */
-  max-height: 100vh;
+  min-height: 100vh;
 `;
 
 export const LeftLayout = styled.div`

package/src/components/fileRightBar/instructorRightBar2/index.jsx

@@ -86,7 +86,7 @@ const InstructorRightBar = ({ planState }) => {
             marginBottom: "40px",
           }}
           onClick={() => {
-            window.location.href = `${protocol}//${host}${port}/instructor/courses/create-course`;
+            window.location.href = `${protocol}//${host}${port}/enterprise/courses/create-course`;
           }}
         />
       </RecentAddedEnterprie>

package/src/components/header/getHeaderDetails.js

@@ -1,17 +1,9 @@
 import useAxios from "axios-hooks";
 import { useEffect } from "react";
 
-const useHeader = (props = { default: false }) => {
+const useHeader = () => {
   // get user details
-  const [userDetails, getUserDetails] = useAxios(
-    {
-      method: "get",
-      url: "/iam/v1/users/me/",
-    },
-    {
-      manual: !props.default,
-    }
-  );
+  const [{ ...userDetails }, getUserDetails] = useAxios();
 
   const handleGetUserDetails = async () => {
     await getUserDetails({
@@ -377,11 +369,15 @@ const useHeader = (props = { default: false }) => {
     }
   };
 
+  //defaults
+  // get user info
+  useEffect(() => {
+    handleGetUserDetails();
+  }, []);
+
   return {
     handleGetUserDetails,
     userDetails,
-    user: userDetails.data,
-    getUserDetails,
     handleGetUserAccountsDetail,
     userAccountsDetail,
     handleGetDefaultAccount,
@@ -402,7 +398,7 @@ const useHeader = (props = { default: false }) => {
     handleGetAllAffiliate,
     handleSetDefaultAffiliate,
     setDefaultAffiliateData,
-    plan: userPlanData?.data,
+
     userPlanData,
     handleGetUserPlan,
     getCurrentSubscriptionData,

package/src/components/header/index.jsx

@@ -56,7 +56,9 @@ const HeaderComponent = (props) => {
   // in general data find user info and replace where user details is being used
   const {
     handleGetUserAccountsDetail,
+    handleGetUserDetails,
     userAccountsDetail,
+    userDetails,
     // getDefaultAccount,
     // handleGetDefaultAccount,
     unreadNotificationData,
@@ -73,13 +75,8 @@ const HeaderComponent = (props) => {
     handleSetDefaultAccount,
   } = useHeader();
   const { pathname } = useLocation();
-  const {
-    setGeneralData,
-    generalData,
-    notificationMarkReadData,
-    accountName,
-    userDetails,
-  } = useContext(OutletContext);
+  const { setGeneralData, generalData, notificationMarkReadData, accountName } =
+    useContext(OutletContext);
   const [accountType, setAccountType] = useState("");
   const currentAccountType = props?.selectedAccount?.type
     ? props?.selectedAccount?.type?.toLowerCase()
@@ -94,6 +91,7 @@ const HeaderComponent = (props) => {
   useEffect(() => {
     setIsOpen(false);
     handleGetUserAccountsDetail();
+    handleGetUserDetails();
     props?.handleGetDefaultAccount();
   }, []);
 
@@ -379,6 +377,7 @@ const HeaderComponent = (props) => {
         const data = JSON.parse(event?.data); //check for incoming message from socket
         if (data.event === "new.notification.result") {
           if (data.data) {
+            handleGetUnreadNotification(accountType);
           }
         }
         if (data.event === "message.new") {
@@ -423,7 +422,8 @@ const HeaderComponent = (props) => {
         onClick={() => {
           setLanguageDropdown();
           setIsOpen();
-        }}>
+        }}
+      >
         <li>
           <a className={isHomePage() ? "active" : ""}>
             {getNavLinkIcon()} {props.findText(getNavLinkLabel())}
@@ -442,7 +442,8 @@ const HeaderComponent = (props) => {
               className={
                 window.location.pathname.includes("settings") ? "active" : ""
               }
-              style={{ cursor: "pointer" }}>
+              style={{ cursor: "pointer" }}
+            >
               <SettingIcon /> {props.findText("Settings")}
             </a>
           </li>
@@ -475,7 +476,8 @@ const HeaderComponent = (props) => {
                   ? "disabled"
                   : ""
               }
-              style={{ cursor: isPendingDelete ? "not-allowed" : "pointer" }}>
+              style={{ cursor: isPendingDelete ? "not-allowed" : "pointer" }}
+            >
               {unreadNotificationData?.data?.count > 0 ? (
                 <NotificationIcon />
               ) : (
@@ -509,7 +511,8 @@ const HeaderComponent = (props) => {
         onClick={() => {
           setLanguageDropdown();
           setIsOpen();
-        }}>
+        }}
+      >
         {/* {(!isDeveloper || !window.location.hostname.includes("coming")) && ( // when developer and on staging, don't show
           <SearchInputGroup>
             <SearchIcon />
@@ -538,7 +541,8 @@ const HeaderComponent = (props) => {
             onClick={() => {
               setLanguageDropdown(!languageDropdown);
               setIsOpen();
-            }}>
+            }}
+          >
             <img src={selectedLanguageData[value] || usFlag} alt="" />
             <ArrowDownIcon />
           </div>
@@ -560,7 +564,8 @@ const HeaderComponent = (props) => {
               setIsOpen(!isOpen);
               setLanguageDropdown();
             }}
-            ref={secondContainerRef}>
+            ref={secondContainerRef}
+          >
             <div className="user-img-container">
               <img
                 src={props?.selectedAccount?.profile_photo?.url || avatar}

package/src/components/index.js

@@ -56,4 +56,3 @@ export { default as DeveloperBanner } from "./banner/developerBanner";
 export { default as VideoPlayer } from "./video-player";
 export { default as useAudioPlayer } from "./useAudioPlayer";
 export { default as AudioWaveComponent } from "./useAudioPlayer/audioWave";
-export { default as InputEmoji } from "./InputEmoji";

package/src/components/instructorAccountSwitcher/index.jsx

@@ -98,6 +98,7 @@ const InstructorAccountSwitcher = ({ generalData, onChange }) => {
   };
 
   const { accountName, planState } = useContext(OutletContext);
+
   // handle if account does not have subscription but is an affiliate
   const prioritizedAffiliateId = useMemo(() => {
     let prioritizedAffiliateId = null;
@@ -106,13 +107,11 @@ const InstructorAccountSwitcher = ({ generalData, onChange }) => {
       // Priority 1: Use cookie value if it exists
       prioritizedAffiliateId = cookieValue;
     } else if (
-      planState !== "ACTIVE" &&
-      planState !== "GRACE PERIOD" && // Check for NO subscription
+      !planState && // Check for NO subscription
       getAllAffiliateData?.data?.results?.length > 0 // Check if the list exists and is not empty
     ) {
       // Priority 2: If no cookie, no subscription, and list exists...
       // Assign the ID of the *first* affiliate directly from the results array
-      setCookie(getAllAffiliateData.data.results[0]?.id);
       prioritizedAffiliateId = getAllAffiliateData.data.results[0]?.id; // Optional chaining on 'id'
     }
     return prioritizedAffiliateId;
@@ -189,30 +188,28 @@ const InstructorAccountSwitcher = ({ generalData, onChange }) => {
         <div className="left">
           {switchValue !== "affiliates" && <p>{accountName}</p>}
           {switchValue === "affiliates" && (
-            <OutsideAlerter handleClick={() => setDropdown(false)}>
-              <AffiliatesDropDown>
-                {!selectedValue ? (
-                  <div
-                    className="placeholder"
-                    onClick={() => setDropdown(!dropdown)}
-                  >
-                    <p>Select affiliate</p>
-                    <ArrowDown />
-                  </div>
-                ) : (
-                  <div
-                    className="selected"
-                    onClick={() => setDropdown(!dropdown)}
-                  >
-                    <div>
-                      <img src={selectedValue?.image} alt="" />
-                      <p>{selectedValue?.name}</p>
-                    </div>
-                    <ArrowDown />
+            <AffiliatesDropDown>
+              {!selectedValue ? (
+                <div
+                  className="placeholder"
+                  onClick={() => setDropdown(!dropdown)}>
+                  <p>Select affiliate</p>
+                  <ArrowDown />
+                </div>
+              ) : (
+                <div
+                  className="selected"
+                  onClick={() => setDropdown(!dropdown)}>
+                  <div>
+                    <img src={selectedValue?.image} alt="" />
+                    <p>{selectedValue?.name}</p>
                   </div>
-                )}
+                  <ArrowDown />
+                </div>
+              )}
 
-                {dropdown && switchValue === "affiliates" ? (
+              {dropdown && switchValue === "affiliates" ? (
+                <OutsideAlerter handleClick={() => setDropdown(false)}>
                   <AffiliatesDropDownWrapper>
                     <div className="search_wrapper">
                       <Search
@@ -226,8 +223,7 @@ const InstructorAccountSwitcher = ({ generalData, onChange }) => {
                           key={item?.id}
                           onClick={() => {
                             handleSelection(item);
-                          }}
-                        >
+                          }}>
                           <div className="left">
                             <img src={item?.image} alt="" />
                             <p>{item?.name}</p>
@@ -237,26 +233,24 @@ const InstructorAccountSwitcher = ({ generalData, onChange }) => {
                       ))}
                     </ul>
                   </AffiliatesDropDownWrapper>
-                ) : null}
-              </AffiliatesDropDown>
-            </OutsideAlerter>
+                </OutsideAlerter>
+              ) : null}
+            </AffiliatesDropDown>
           )}
         </div>
         {
           <div className="btn__wrapper">
-            {(planState === "ACTIVE" || planState === "GRACE PERIOD") && (
+            {!!!prioritizedAffiliateId && (
               <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>
@@ -360,7 +354,6 @@ const AffiliatesDropDown = styled.div`
       img {
         width: 36px;
         height: 36px;
-        border-radius: 50%;
       }
       p {
         color: #00c2c2;
@@ -414,8 +407,6 @@ const AffiliatesDropDownWrapper = styled.div`
         img {
           width: 20px;
           height: 20px;
-          border-radius: 50%;
-          object-fit: cover;
         }
       }
       span {

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

@@ -288,7 +288,7 @@ const SideMenu = ({
           }
         }}
         key={index}
-        className={cx({ active, [route.text]: true, disabled: route.disabled })}
+        className={cx(`${route.text} ${active && "active"}`)}
         minimal={isOpen}>
         <IconContainer active={active}>
           {active ? iconActive : icon}
@@ -348,7 +348,6 @@ SideMenu.propTypes = {
           icon: PropTypes.element.isRequired,
           text: PropTypes.string.isRequired,
           notifications: PropTypes.number,
-          disabled: PropTypes.bool,
         })
       ).isRequired,
     })

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

@@ -120,10 +120,6 @@ export const NavigationItemContainer = styled.p`
       background: #949999;
     }
   }
-  &.disabled {
-    pointer-events: none;
-    opacity: 0.5;
-  }
 `;
 
 export const IconContainer = styled.div`

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

@@ -12,12 +12,14 @@ import Loader from "../../loader";
 import avatar from "../../../assets/images/avatar.png";
 import { OutletContext } from "../../AppMainLayout";
 
-const UserCard = ({ isOpen, findText }) => {
-  const { handleSetDefaultAccount } = useHeader();
+const UserCard = ({ user, isOpen, findText }) => {
+  const { handleGetUserDetails, userDetails, handleSetDefaultAccount } =
+    useHeader();
   const [organizationName, setOrganizationName] = useState();
-  const { generalData, accountName, userDetails } = useContext(OutletContext);
+  const { generalData, accountName } = useContext(OutletContext);
 
   useEffect(() => {
+    handleGetUserDetails();
     if (generalData?.selectedAccount) {
       const date = new Date();
       date.setDate(date.getDate() + 28);
@@ -69,9 +71,9 @@ const UserCard = ({ isOpen, findText }) => {
             src={generalData?.selectedAccount?.profile_photo?.url || avatar}
             isOpen={isOpen}
             onClick={() => {
-              // if (window.location.pathname.includes("personal")) {
-              //   window.location.href = `${window.location.protocol}//${window.location.hostname}/personal/profile`;
-              // }
+              if (window.location.pathname.includes("personal")) {
+                window.location.href = `${window.location.protocol}//${window.location.hostname}/personal/profile`;
+              }
               if (window.location.pathname.includes("enterprise")) {
                 window.location.href = `${window.location.protocol}//${window.location.hostname}/enterprise/profile`;
               }

package/src/hooks/leftNavMenu.jsx

@@ -179,7 +179,6 @@ export const sideMenuOptions = [
         icon: <AwardIcon />,
         iconActive: <AwardIconActive />,
         text: "Manage report",
-        // disabled: true,
       },
       {
         path: "/instructor/courses",
@@ -229,14 +228,12 @@ export const sideMenuOptions = [
         icon: <DashboardIcon />,
         iconActive: <DashboardIconActive />,
         text: "Dashboard",
-        disabled: true,
       },
       {
         path: "/personal/library",
         icon: <LibraryIcon />,
         iconActive: <LibraryIconActive />,
         text: "Library",
-        disabled: true,
       },
       {
         path: "/personal/courses",
@@ -262,7 +259,6 @@ export const sideMenuOptions = [
         icon: <AddOnIcon />,
         iconActive: <AddOnIconActive />,
         text: "Add on",
-        disabled: true,
       },
     ],
   },

package/src/hooks/messaging-kit/index.jsx

@@ -1,7 +1,6 @@
 import useAxios from "axios-hooks";
 import { useCallback, useEffect, useMemo, useState, useRef } from "react";
 import sound from "./new-notification-7-210334.mp3";
-import { cookieGrabber, useCookiePolling } from "../utils/cookiePolling";
 
 /**
  * Represents the details of the last message in a chat room overview.
@@ -237,28 +236,38 @@ import { cookieGrabber, useCookiePolling } from "../utils/cookiePolling";
  * @property {any | null} media - The media data (e.g., File object, FormData details). Needs proper handling before API call.
  */
 
-const useMessageKit = () => {
-  const selectedAccountId = useCookiePolling("defaultAccountID");
-  const defaultAccountType = useCookiePolling("defaultAccountType");
-  const selectedAccount = {
-    id: selectedAccountId,
-    type: defaultAccountType,
+const useMessageKit = ({ affiliateAccount: AffiliateAccount }) => {
+  const cookieGrabber = (key = "") => {
+    const cookies = document.cookie;
+    const string = cookies.split(";").find((cookie) => {
+      cookie = cookie.trim();
+      if (cookie.startsWith(key.trim() + "=")) return true;
+    });
+
+    if (!string) return "";
+    return string.split("=")[1].trim();
   };
-  const token = useCookiePolling("access");
+  const selectedAccount = useMemo(
+    () => ({
+      id: cookieGrabber("defaultAccountID"),
+      type: cookieGrabber("defaultAccountType"),
+    }),
+    []
+  );
   const buildSocketUrl = useCallback(() => {
     const baseUrl =
       window.location.hostname.includes("staging") ||
       window.location.hostname.includes("localhost")
         ? "https://dev-117782726-api.learngual.com"
         : "https://api.learngual.com";
-
+    const token = cookieGrabber("access");
     return (
       baseUrl.replace("http", "ws") +
       `/notify/v1/ws/connect/?authorization=${token}&_account=${selectedAccount.id}`
     );
   }, []);
 
-  const affiliateAccount = useCookiePolling("affiliateAccount", 1000);
+  const affiliateAccount = cookieGrabber("affiliateAccount");
   // console.log(affiliateAccount, affiliatesActive, "affiliate");
   // get account type
   const [, request] = useAxios(
@@ -361,13 +370,14 @@ const useMessageKit = () => {
       });
     }
 
-    if (selectedAccount.type.toLowerCase() === "instructor") {
+    if (
+      selectedAccount.type.toLowerCase() === "instructor" &&
+      affiliateAccount
+      // &&
+      // affiliatesActive
+    ) {
       response = await request({
-        url:
-          nextPage ||
-          `/notify/v1/instructor${
-            affiliateAccount ? "/".concat(affiliateAccount) : ""
-          }/rooms/`,
+        url: nextPage || `/notify/v1/instructor/${affiliateAccount}/rooms/`,
         params: {
           limit,
           _account: selectedAccount.id,
@@ -428,13 +438,14 @@ const useMessageKit = () => {
         });
       }
 
-      if (String(selectedAccount.type).toLowerCase() === "instructor") {
+      if (
+        String(selectedAccount.type).toLowerCase() === "instructor" &&
+        affiliateAccount
+        //  &&
+        // affiliatesActive
+      ) {
         response = await request({
-          url:
-            nextPage ||
-            `/notify/v1/instructor${
-              affiliateAccount ? "/".concat(affiliateAccount) : ""
-            }/chats/`,
+          url: nextPage || `/notify/v1/instructor/${affiliateAccount}/chats/`,
           params: {
             _account: selectedAccount.id,
             room_id: roomId,
@@ -574,11 +585,12 @@ const useMessageKit = () => {
           url: `/notify/v1/enterprise/chats/${latestMessageId}/read_message/`,
         });
       }
-      if (String(selectedAccount.type).toLowerCase() === "instructor") {
+      if (
+        String(selectedAccount.type).toLowerCase() === "instructor" &&
+        affiliateAccount
+      ) {
         await request({
-          url: `/notify/v1/instructor${
-            affiliateAccount ? "/".concat(affiliateAccount) : ""
-          }/chats/${latestMessageId}/read_message/`,
+          url: `/notify/v1/instructor/${affiliateAccount}/chats/${latestMessageId}/read_message/`,
         });
       }
       if (String(selectedAccount.type).toLowerCase() === "personal") {
@@ -873,12 +885,11 @@ const useMessageKit = () => {
             method: "Post",
           });
         } else if (
-          String(selectedAccount.type).toLowerCase() === "instructor"
+          String(selectedAccount.type).toLowerCase() === "instructor" &&
+          affiliateAccount
         ) {
           response = await request({
-            url: `/notify/v1/instructor${
-              affiliateAccount ? "/".concat(affiliateAccount) : ""
-            }/chats/`,
+            url: `/notify/v1/instructor/${affiliateAccount}/chats/`,
             params: requestParams,
             data: requestData,
             method: "Post",
@@ -1284,11 +1295,14 @@ const useMessageKit = () => {
           method: "patch",
         });
       }
-      if (selectedAccount.type.toLowerCase() === "instructor") {
+      if (
+        selectedAccount.type.toLowerCase() === "instructor" &&
+        affiliateAccount
+        // &&
+        // affiliatesActive
+      ) {
         response = await request({
-          url: `/notify/v1/instructor${
-            affiliateAccount ? "/".concat(affiliateAccount) : ""
-          }/rooms/${roomId}/change_pin_status/`,
+          url: `/notify/v1/instructor/${affiliateAccount}/rooms/${roomId}/change_pin_status/`,
           method: "patch",
         });
       } // incomplete
@@ -1361,11 +1375,14 @@ const useMessageKit = () => {
           method: "delete",
         });
       }
-      if (selectedAccount.type.toLowerCase() === "instructor") {
+      if (
+        selectedAccount.type.toLowerCase() === "instructor" &&
+        affiliateAccount
+        // &&
+        // affiliatesActive
+      ) {
         await request({
-          url: `/notify/v1/instructor${
-            affiliateAccount ? "/".concat(affiliateAccount) : ""
-          }/rooms/${roomId}/`,
+          url: `/notify/v1/instructor/${affiliateAccount}/rooms/${roomId}/`,
           method: "delete",
         });
       } // incomplete
@@ -1402,11 +1419,12 @@ const useMessageKit = () => {
         data,
       });
     }
-    if (selectedAccount.type.toLowerCase() === "instructor") {
+    if (
+      selectedAccount.type.toLowerCase() === "instructor" &&
+      affiliateAccount
+    ) {
       response = await request({
-        url: `/notify/v1/instructor${
-          affiliateAccount ? "/".concat(affiliateAccount) : ""
-        }/chats/reports/`,
+        url: `/notify/v1/instructor/${affiliateAccount}/chats/reports/`,
         method: "post",
         data,
       });
@@ -1423,7 +1441,6 @@ const useMessageKit = () => {
   // Initial data fetch effect
   useEffect(() => {
     (async () => {
-      if (!selectedAccountId || !defaultAccountType || !token) return;
       await getMessageRoomsByCourses();
       // reportChat({
       //   reasons: ["Verbal harassment"],
@@ -1445,7 +1462,7 @@ const useMessageKit = () => {
       //   accountId: "24dbaeede1",
       // });
     })();
-  }, [affiliateAccount, token, defaultAccountType, selectedAccountId]); // Rerun when selectedAccount changes
+  }, [AffiliateAccount]); // Rerun when selectedAccount changes
   // console.log(
   //   getMessagesForRoom("5be9b48281ac4c2885d3b719654ed59d", "878", "24dbaeede1"),
   //   "hold versions"