l-min-components 1.7.1388 → 1.7.1390

package/package.json

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

package/src/components/AppMainLayout/index.jsx

@@ -45,6 +45,8 @@ import PersonalRightBar from "../fileRightBar/instructorRightBar2/personalRightB
 import TestModal from "../fileRightBar/instructorRightBar2/testModal";
 import BlankState from "../dashboardState/blankState";
 import PendingDeleteState from "../dashboardState/pendingDeleteState";
+import { getCookie, setCookie } from "../header/getCookies";
+import deleteCookies from "../instructorAccountSwitcher/deleteCookies";
 
 const AppMainLayout = ({ children }) => {
   const [isOpen, setIsOpen] = useState(true);
@@ -73,6 +75,7 @@ const AppMainLayout = ({ children }) => {
   const [newLoadingForPostDefaultAccount, setNewLoadingForPostDefaultAccount] =
     useState(true);
   const [selectedAccount, setSelectedAccount] = useState();
+  const [affilitateSearch, setAffilitateSearch] = useState("");
   // for mobile view
   useEffect(() => {
     const handleResize = () => setDeviceWidth(window.innerWidth);
@@ -267,9 +270,7 @@ const AppMainLayout = ({ children }) => {
 
   // const currentPlan = userPlanData?.data?.current_plan;
   const planState = userPlanData?.data?.state;
-  console.log("====================================");
-  console.log(planState, "PLAN");
-  console.log("====================================");
+
   const wordBank = [
     "Sign out",
     "Learning",
@@ -320,8 +321,6 @@ const AppMainLayout = ({ children }) => {
 
   const messageKit = useMessageKit(); // useMessageKit
 
-  const [isAffiliateLoading, setIsAffiliateLoading] = useState(true);
-
   const handleGetStorageSummary = async () => {
     const accountType = generalData?.selectedAccount?.type?.toLowerCase();
     if (accountType === "enterprise" || accountType === "instructor") {
@@ -334,6 +333,47 @@ const AppMainLayout = ({ children }) => {
     handleGetStorageSummary();
   }, [generalData?.selectedAccount]);
 
+  const {
+    handleGetAllAffiliate,
+    getAllAffiliateData,
+    getDefaultAffiliateData,
+    handleGetDefaultAffiliate,
+  } = useHeader();
+
+  useEffect(() => {
+    if (activeAccountType === "instructor") {
+      handleGetDefaultAffiliate();
+    }
+  }, [activeAccountType]);
+
+  useEffect(() => {
+    if (activeAccountType === "instructor") {
+      handleGetAllAffiliate({ search: affilitateSearch });
+    }
+  }, [activeAccountType, affilitateSearch]);
+
+  // handling instructor affiliate cookie
+  const hasAxtiveAffiliateId = getDefaultAffiliateData?.data?.id;
+
+  const affiliateList = getAllAffiliateData?.data?.results?.map?.((account) => {
+    const image = account?.profile_photo?.url;
+    return {
+      name: account?.metadata?.organization_name ?? "...",
+      image,
+      id: account?.id,
+    };
+  });
+
+  useEffect(() => {
+    if (hasAxtiveAffiliateId && activeAccountType === "instructor") {
+      setCookie("affiliateAccount", hasAxtiveAffiliateId);
+      setAffiliateAccount({ id: hasAxtiveAffiliateId });
+    } else {
+      deleteCookies("affiliateAccount");
+      setAffiliateAccount(null);
+    }
+  }, [hasAxtiveAffiliateId, activeAccountType]);
+
   const accountIsPendingDeletion = generalData?.selectedAccount?.pending_delete;
 
   return (
@@ -425,13 +465,22 @@ const AppMainLayout = ({ children }) => {
                 </LeftLayout>
                 <CenterLayout isOpen={isOpen} style={centerLayoutStyle}>
                   {activeAccountType === "instructor" &&
-                    !accountIsPendingDeletion && (
-                      <InstructorAccountSwitcher
-                        // setAccountType={setAffiliatesActive}
-                        generalData={generalData}
-                        onChange={(v) => setAffiliateAccount(v)}
-                        setIsAffiliateLoading={setIsAffiliateLoading}
-                      />
+                    !accountIsPendingDeletion &&
+                    affiliateList?.length > 0 && (
+                      <>
+                        {(getDefaultAffiliateData?.loading ||
+                          getAllAffiliateData?.loading) && (
+                          <FullPageLoader fixed hasBackground />
+                        )}
+                        <InstructorAccountSwitcher
+                          // setAccountType={setAffiliatesActive}
+                          affiliateList={affiliateList}
+                          generalData={generalData}
+                          onChange={(v) => setAffiliateAccount(v)}
+                          setSearch={setAffilitateSearch}
+                          defaultAffiliate={getDefaultAffiliateData?.data}
+                        />
+                      </>
                     )}
                   {!generalData?.selectedAccount ? (
                     <BlankState />
@@ -444,7 +493,7 @@ const AppMainLayout = ({ children }) => {
                     />
                   ) : (
                     <>
-                      {window.location.pathname.includes("enterprise") &&
+                      {activeAccountType === "enterprise" &&
                       (planState === "GRACE PERIOD" ||
                         planState === "EXPIRED" ||
                         (!userPlanData?.loading && !planState)) &&
@@ -457,11 +506,9 @@ const AppMainLayout = ({ children }) => {
                           gracePeriod={gracePeriod}
                           stateType={planState === "GRACE PERIOD" ? 1 : 2}
                         />
-                      ) : window.location.pathname.includes("instructor") &&
+                      ) : activeAccountType === "instructor" &&
                         !planState &&
-                        !userPlanData?.loading &&
-                        !isAffiliateLoading &&
-                        !affiliateAccount?.id &&
+                        !hasAxtiveAffiliateId &&
                         !window.location.pathname.includes("notif") ? (
                         <div className="instructor_expired">
                           <h1>Dashboard</h1>
@@ -514,10 +561,10 @@ const AppMainLayout = ({ children }) => {
                         //   )}
 
                         // </>
-                        affiliateAccount?.id && (
+                        hasAxtiveAffiliateId && (
                           <AffiliateRightBar
                             planState={planState}
-                            affiliateAccount={affiliateAccount.id}
+                            affiliateAccount={hasAxtiveAffiliateId}
                             isPendingDelete={accountIsPendingDeletion}
                           />
                         )

package/src/components/header/getCookies.js

@@ -1,38 +1,51 @@
 export function getCookie(name) {
-    // Split cookie string and get all individual name=value pairs in an array
-    var cookieArr = document.cookie.split(";");
-  
-    // Loop through the array elements
-    for (var i = 0; i < cookieArr.length; i++) {
-      var cookiePair = cookieArr[i].split("=");
-  
-      /* Removing whitespace at the beginning of the cookie name
+  // Split cookie string and get all individual name=value pairs in an array
+  var cookieArr = document.cookie.split(";");
+
+  // Loop through the array elements
+  for (var i = 0; i < cookieArr.length; i++) {
+    var cookiePair = cookieArr[i].split("=");
+
+    /* Removing whitespace at the beginning of the cookie name
           and compare it with the given string */
-      if (name == cookiePair[0].trim()) {
-        // Decode the cookie value and return
-        return decodeURIComponent(cookiePair[1]);
-      }
+    if (name == cookiePair[0].trim()) {
+      // Decode the cookie value and return
+      return decodeURIComponent(cookiePair[1]);
     }
-  
-    // Return null if not found
-    return null;
   }
 
-  export const getCookieAffiliate = () => {
-    const cookies = document.cookie;
-    const cookieArray = cookies.split(";");
-  
-    let affiliateAccount = null;
-  
-    cookieArray?.forEach((cookieValue) => {
-      const cookie = cookieValue?.trim();
-      if (cookie.startsWith("affiliateAccount=")) {
-        affiliateAccount = cookie.substring(
-          "affiliateAccount=".length,
-          cookie.length
-        );
-      }
-    });
-  
-    return affiliateAccount;
-  };
+  // Return null if not found
+  return null;
+}
+
+export const getCookieAffiliate = () => {
+  const cookies = document.cookie;
+  const cookieArray = cookies.split(";");
+
+  let affiliateAccount = null;
+
+  cookieArray?.forEach((cookieValue) => {
+    const cookie = cookieValue?.trim();
+    if (cookie.startsWith("affiliateAccount=")) {
+      affiliateAccount = cookie.substring(
+        "affiliateAccount=".length,
+        cookie.length
+      );
+    }
+  });
+
+  return affiliateAccount;
+};
+
+export const setCookie = (name, data) => {
+  const date = new Date();
+  date.setDate(date.getDate() + 20);
+  const expires = "; expires=" + date.toUTCString();
+  const path = "; path=/";
+  const domain = window.location.href.includes("localhost")
+    ? "localhost"
+    : window.location.hostname?.includes("ca")
+    ? ".learngual.ca"
+    : ".learngual.com";
+  document.cookie = `${name}=` + data + expires + path + "; domain=" + domain;
+};

package/src/components/header/getHeaderDetails.js

@@ -157,13 +157,12 @@ const useHeader = (props = { default: false }) => {
     }
   );
 
-  const handleGetUnreadNotification = async (
-    account_type = "",
-    read = false
-  ) => {
+  const handleGetUnreadNotification = async (account_type, read = false) => {
     try {
       await getUnreadNotification({
-        url: `/notify/v1/${account_type}/notifications/`,
+        url: `/notify/v1/${
+          account_type?.toLowerCase() === "personal" ? "" : account_type + "/"
+        }notifications/`,
         params: {
           read: read,
         },
@@ -210,7 +209,9 @@ const useHeader = (props = { default: false }) => {
   const handleGeneralNotificationCount = async (account_type = "") => {
     try {
       await generalNotificationCount({
-        url: `/notify/v1/${account_type}/notifications/general_notification_count/`,
+        url: `/notify/v1/${
+          account_type?.toLowerCase() === "personal" ? "" : account_type + "/"
+        }notifications/general_notification_count/`,
       });
     } catch (err) {
       //console.log(err);

package/src/components/header/index.jsx

@@ -262,13 +262,6 @@ const HeaderComponent = (props) => {
     };
   }, [setIsOpen]);
 
-  // get current default account and store in cookie from path
-  useEffect(() => {
-    if (pathname?.includes("personal")) {
-      // document.cookie = "activeAccount" + path;
-    }
-  }, []);
-
   // Determine home page for active style purpose
   const isHomePage = () =>
     window.location.pathname === "/" ||
@@ -302,9 +295,13 @@ const HeaderComponent = (props) => {
   };
 
   // websocket for notifications initialization
-  const [socketUrl, setSocketUrl] = useState(
-    "dev-117782726-api.learngual.com/notify/v1/ws/connect/"
-  );
+  const socketUrl = `${
+    window.location.hostname.includes("localhost") ||
+    window.location.hostname.includes("staging")
+      ? "dev-117782726-api"
+      : "api"
+  }.learngual.com/notify/v1/ws/connect/`;
+
   const token = getCookie("access");
   const defaultAcctId = getCookie("defaultAccountID");
   const account_id = generalData?.defaultAccount?.id || defaultAcctId;
@@ -315,24 +312,12 @@ const HeaderComponent = (props) => {
       `wss://${socketUrl}?_account=${account_id}&authorization=${token}`
     );
 
-    websocket.onopen = () => {
-      //check if socket is connected
-      // console.log("websocket connection established");
-    };
-
-    websocket.onmessage = (event) => {
-      const data = JSON.parse(event.data);
-      //console.log("websocket data", data);
-    };
-
     const handler = (event) => {
       if (event?.data) {
         const data = JSON.parse(event?.data); //check for incoming message from socket
         if (data.event === "new.notification.result") {
           if (data.data) {
             props.setNewNotifications((prev) => [...prev, data.data]);
-
-            //console.log(data);
             if (accountType) {
               handleGetUnreadNotification(accountType);
               handleGeneralNotificationCount();
@@ -346,7 +331,6 @@ const HeaderComponent = (props) => {
 
     return () => {
       websocket.removeEventListener("message", handler);
-      //console.log("websocket closed");
     };
   }, []);
 
@@ -356,28 +340,19 @@ const HeaderComponent = (props) => {
       `wss://${socketUrl}?_account=${account_id}&authorization=${token}&room_id=${account_id}`
     );
 
-    websocket2.onopen = () => {
-      //check if socket is connected
-      // console.log("room websocket connection established");
-    };
-
-    websocket2.onmessage = (event) => {
-      const data = JSON.parse(event.data);
-      //console.log("websocket data for room", data);
-    };
-
     const handler = (event) => {
       if (event?.data) {
         const data = JSON.parse(event?.data); //check for incoming message from socket
         if (data.event === "new.notification.result") {
           if (data.data) {
-            handleGetUnreadNotification(accountType);
+            if (accountType) {
+              handleGetUnreadNotification(accountType);
+            }
           }
         }
         if (data.event === "message.new") {
         }
         if (data.event === "new.room.result") {
-          //console.log(data);
           if (data.status) {
             if (accountType) {
               handleGetUnreadNotification(accountType);
@@ -392,7 +367,6 @@ const HeaderComponent = (props) => {
 
     return () => {
       websocket2.removeEventListener("message", handler);
-      //console.log("room websocket closed");
     };
   }, []);
 
@@ -443,12 +417,6 @@ const HeaderComponent = (props) => {
           </li>
           <li>
             <a
-              // href={`https://559staging.learngual.com/${
-              //   selectedAccount?.type
-              //     ? selectedAccount?.type?.toLowerCase()
-              //     : userAccountsDetail?.data?.[0]?.type?.toLowerCase()
-              // }/notifications/`}
-
               onClick={(e) => {
                 if (isPendingDelete) {
                   e.preventDefault();

package/src/components/instructorAccountSwitcher/index.jsx

@@ -14,36 +14,14 @@ import { OutletContext } from "..";
 const InstructorAccountSwitcher = ({
   generalData,
   onChange,
-  setIsAffiliateLoading,
+  affiliateList,
+  setSearch,
+  defaultAffiliate,
 }) => {
   // const [expiryFlow, setExpiryFlow] = useState();
   const [switchValue, setSwitchValue] = useState(null);
   const [selectedValue, setSelectedValue] = useState(null);
-  const [search, setSearch] = useState("");
-  const {
-    getDefaultAffiliateData,
-    handleGetDefaultAffiliate,
-    handleSetDefaultAffiliate,
-    setDefaultAffiliateData,
-    handleGetAllAffiliate,
-    getAllAffiliateData,
-  } = useHeader();
-
-  useEffect(() => {
-    const account = generalData?.selectedAccount;
-    if (account?.type?.toLocaleLowerCase() === "instructor") {
-      handleGetAllAffiliate({ search });
-    }
-  }, [generalData?.selectedAccount, search]);
-
-  const dropdownList = getAllAffiliateData?.data?.results?.map((item) => {
-    const image = item?.profile_photo?.url;
-    return {
-      name: item?.metadata?.organization_name ?? "...",
-      image,
-      id: item?.id,
-    };
-  });
+  const { handleSetDefaultAffiliate, setDefaultAffiliateData } = useHeader();
 
   const [dropdown, setDropdown] = useState(false);
 
@@ -123,15 +101,14 @@ const InstructorAccountSwitcher = ({
       prioritizedAffiliateId = cookieValue;
     } else if (
       planState !== "ACTIVE" &&
-      planState !== "GRACE PERIOD" && // Check for NO subscription
-      getAllAffiliateData?.data?.results?.length > 0 // Check if the list exists and is not empty
+      planState !== "GRACE PERIOD" // Check if the list exists and is not empty
     ) {
-      setCookie(getAllAffiliateData.data.results[0]?.id);
-      handleSelection(getAllAffiliateData.data.results[0]);
-      prioritizedAffiliateId = getAllAffiliateData.data.results[0]?.id; // Optional chaining on 'id'
+      prioritizedAffiliateId = cookieValue;
+      // handleSelection(getAllAffiliateData.data.results[0]);
+      // prioritizedAffiliateId = getAllAffiliateData.data.results[0]?.id; // Optional chaining on 'id'
     }
     return prioritizedAffiliateId;
-  }, [getAllAffiliateData, planState]);
+  }, [planState]);
 
   useEffect(() => {
     const cookie = prioritizedAffiliateId ?? cookieValue;
@@ -140,47 +117,17 @@ const InstructorAccountSwitcher = ({
       // store cookie
       setCookie(cookie);
       onChange({ id: cookie });
-      setIsAffiliateLoading(false);
     } else {
       setSwitchValue(null);
       onChange(null);
-      setIsAffiliateLoading(false);
     }
   }, [prioritizedAffiliateId]);
 
-  const getDefault = async () => {
-    const res = await handleGetDefaultAffiliate();
-    const value = res?.data;
-    const error = res?.response?.data?.errors?.length > 0;
-    if (value) {
-      const image = value?.profile_photo?.url;
-      setSelectedValue(() => ({
-        name: value?.metadata?.organization_name,
-        image,
-        id: value?.id,
-      }));
-    } else if (error) {
-      deleteCookies("affiliateAccount");
-    }
-  };
-
-  useEffect(() => {
-    if (getAllAffiliateData?.data?.results?.length > 0) {
-      getDefault();
-    } else if (getAllAffiliateData?.data?.results?.length === 0) {
-      onChange && onChange(null);
-      cookieValue && deleteCookies("affiliateAccount");
-    }
-  }, [getAllAffiliateData?.data]);
-
-  //useeffect to supply loading state
-  useEffect(() => {}, [getAllAffiliateData]);
-
-  return getAllAffiliateData?.data?.results?.length > 0 && !search ? (
+  return (
     <>
-      {(setDefaultAffiliateData?.loading ||
-        getDefaultAffiliateData?.loading ||
-        getAllAffiliateData?.loading) && <FullPageLoader fixed hasBackground />}
+      {setDefaultAffiliateData?.loading && (
+        <FullPageLoader fixed hasBackground />
+      )}
       {/* {expiryFlow === "renew" && (
         <RenewModal
           close={() => setExpiryFlow(null)}
@@ -210,7 +157,7 @@ const InstructorAccountSwitcher = ({
           {switchValue === "affiliates" && (
             <OutsideAlerter handleClick={() => setDropdown(false)}>
               <AffiliatesDropDown>
-                {!selectedValue ? (
+                {!defaultAffiliate ? (
                   <div
                     className="placeholder"
                     onClick={() => setDropdown(!dropdown)}
@@ -224,8 +171,8 @@ const InstructorAccountSwitcher = ({
                     onClick={() => setDropdown(!dropdown)}
                   >
                     <div>
-                      <img src={selectedValue?.image} alt="" />
-                      <p>{selectedValue?.name}</p>
+                      <img src={defaultAffiliate?.cover_photo?.url} alt="" />
+                      <p>{defaultAffiliate?.metadata?.organization_name}</p>
                     </div>
                     <ArrowDown />
                   </div>
@@ -240,7 +187,7 @@ const InstructorAccountSwitcher = ({
                       />
                     </div>
                     <ul>
-                      {dropdownList?.map((item) => (
+                      {affiliateList?.map((item) => (
                         <li
                           key={item?.id}
                           onClick={() => {
@@ -283,8 +230,6 @@ const InstructorAccountSwitcher = ({
         }
       </Container>
     </>
-  ) : (
-    <></>
   );
 };