l-min-components 1.0.647 → 1.0.652

package/package.json

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

package/src/components/AppMainLayout/index.jsx

@@ -25,6 +25,7 @@ import InstructorAccountSwitcher from "../instructorAccountSwitcher";
 import InstructorRightBar from "../fileRightBar/instructorRightBar";
 import EnterpriseRightBar from "../fileRightBar/enterpriseRightBar";
 import PersonalRightBar from "../fileRightBar/personalRightBar";
+import useHeader from "../header/getHeaderDetails";
 
 const AppMainLayout = () => {
   const [isOpen, setIsOpen] = useState(true);
@@ -46,6 +47,7 @@ const AppMainLayout = () => {
   const [affiliatesActive, setAffiliatesActive] = useState(false);
   const [accessToken, setAccessToken] = useState("");
   const [envType, setEnvType] = useState("");
+  const { setDefaultAccount, handleSetDefaultAccount } = useHeader();
 
   useEffect(() => {
     if (window.location.host.includes("coming")) {
@@ -71,21 +73,42 @@ const AppMainLayout = () => {
   }, [defaultAcct]);
 
   // set access token from cookie to context
+
   useEffect(() => {
     let cookieValue = null;
     const cookieName = "access";
+
     // Retrieve the value of the cookie
+
     const cookies = document.cookie.split(";");
     for (let i = 0; i < cookies.length; i++) {
       const cookie = cookies[i].trim();
       if (cookie.startsWith(cookieName + "=")) {
         cookieValue = cookie.substring(cookieName.length + 1);
-        setDefaultAcct(cookieValue);
+        setAccessToken(cookieValue);
         break;
       }
     }
-    setAccessToken(cookieValue);
-  }, [defaultAcct]);
+  }, []);
+
+  // get current account and set as default acct on page load.
+
+  useEffect(() => {
+    let cookieValue = null;
+    const cookieName = "defaultAccountID";
+
+    // Retrieve the value of the cookie
+
+    const cookies = document.cookie.split(";");
+    for (let i = 0; i < cookies.length; i++) {
+      const cookie = cookies[i].trim();
+      if (cookie.startsWith(cookieName + "=")) {
+        cookieValue = cookie.substring(cookieName.length + 1);
+        handleSetDefaultAccount(cookieValue);
+        break;
+      }
+    }
+  }, []);
 
   // setting current environment type
   useEffect(() => {
@@ -97,7 +120,7 @@ const AppMainLayout = () => {
       setEnvType("live");
     }
   }, []);
-  console.log("envType", envType)
+  console.log("envType", envType);
 
   return (
     <OutletContext.Provider
@@ -124,7 +147,7 @@ const AppMainLayout = () => {
         setHideAffilicates,
         affiliatesActive,
         accessToken,
-        envType
+        envType,
       }}
     >
       <Layout
@@ -149,7 +172,8 @@ const AppMainLayout = () => {
                         ? "personal"
                         : window.location.pathname.includes("instructor")
                         ? "instructor"
-                        : window.location.pathname.includes("developer") || window.location.hostname.includes("developer")
+                        : window.location.pathname.includes("developer") ||
+                          window.location.hostname.includes("developer")
                         ? "developer"
                         : defaultAcct
                     }
@@ -187,7 +211,7 @@ const AppMainLayout = () => {
                 ) : window.location.pathname.includes("personal/courses") ? (
                   <InstructorRightBar personal />
                 ) : window.location.pathname.includes(
-                    "personal/library/selectlanguage",
+                    "personal/library/selectlanguage"
                   ) ? (
                   <InstructorRightBar personal />
                 ) : window.location.pathname.includes("personal/library") ? (

package/src/components/header/assets/svg/notification.jsx

@@ -30,3 +30,33 @@ export const NotificationIcon = ({ width, height, fill }) => (
     <circle cx="17.1797" cy="5" r="4.5" fill="#F39B33" stroke="white" />
   </svg>
 );
+export const NotificationEmptyIcon = ({ width, height, fill }) => (
+  <svg
+    width={width || "23"}
+    height={height || "23"}
+    viewBox="0 0 23 23"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M10.891 3.59375C7.94042 3.59375 5.54254 5.99163 5.54254 8.94218V11.5183C5.54254 12.0621 5.31077 12.8911 5.03444 13.3546L4.00932 15.0572C3.37642 16.1091 3.81321 17.2768 4.97204 17.669C8.814 18.9527 12.959 18.9527 16.801 17.669C17.8796 17.3125 18.352 16.0378 17.7637 15.0572L16.7386 13.3546C16.4712 12.8911 16.2394 12.0621 16.2394 11.5183V8.94218C16.2394 6.00055 13.8326 3.59375 10.891 3.59375Z"
+      stroke="#4A4D4D"
+      strokeWidth="1.5"
+      strokeMiterlimit="10"
+      strokeLinecap="round"
+    />
+    <path
+      d="M12.5404 3.85266C12.2641 3.77244 11.9788 3.71004 11.6846 3.67438C10.8289 3.56741 10.0088 3.62981 9.24219 3.85266C9.5007 3.19302 10.1425 2.72949 10.8913 2.72949C11.6401 2.72949 12.2819 3.19302 12.5404 3.85266Z"
+      stroke="#4A4D4D"
+      strokeWidth="1.5"
+      strokeMiterlimit="10"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M13.5672 17.9902C13.5672 19.4611 12.3638 20.6645 10.893 20.6645C10.162 20.6645 9.48455 20.3614 9.00319 19.88C8.52183 19.3987 8.21875 18.7212 8.21875 17.9902"
+      stroke="#4A4D4D"
+      strokeWidth="1.5"
+      strokeMiterlimit="10"
+    />
+  </svg>
+);

package/src/components/header/getHeaderDetails.js

@@ -68,6 +68,27 @@ const useHeader = () => {
       console.log(err);
     }
   };
+  const [{ ...unreadNotificationData }, getUnreadNotification] = useAxios(
+    {
+      method: "GET",
+    },
+    {
+      manual: true,
+    }
+  );
+
+  const handleGetUnreadNotification = async (read = false) => {
+    try {
+      await getUnreadNotification({
+        url: `/notify/v1/notifications/`,
+        params: {
+          read: read,
+        },
+      });
+    } catch (err) {
+      console.log(err);
+    }
+  };
 
   return {
     handleGetUserDetails,
@@ -78,6 +99,8 @@ const useHeader = () => {
     getDefaultAccount,
     handleSetDefaultAccount,
     setDefaultAccount,
+    unreadNotificationData,
+    handleGetUnreadNotification
   };
 };
 export default useHeader;

package/src/components/header/index.jsx

@@ -6,7 +6,7 @@ import { PeopleIcon } from "./assets/svg/people";
 import { MessageIcon } from "./assets/svg/message";
 import { SettingIcon } from "./assets/svg/setting";
 import { SearchIcon } from "./assets/svg/search";
-import { NotificationIcon } from "./assets/svg/notification";
+import { NotificationEmptyIcon, NotificationIcon } from "./assets/svg/notification";
 import { ArrowDownIcon } from "./assets/svg/arrow-down";
 import AccountDropdown from "./account-dropdown";
 import avatar from "./assets/images/avatar.png";
@@ -48,6 +48,8 @@ const HeaderComponent = (props) => {
     userDetails,
     getDefaultAccount,
     handleGetDefaultAccount,
+    unreadNotificationData,
+    handleGetUnreadNotification
   } = useHeader();
   const { pathname } = useLocation();
   const { setGeneralData, generalData } = useContext(OutletContext);
@@ -58,6 +60,7 @@ const HeaderComponent = (props) => {
     handleGetUserAccountsDetail();
     handleGetUserDetails();
     handleGetDefaultAccount();
+    handleGetUnreadNotification();
   }, []);
   useEffect(() => {
     if (userAccountsDetail?.data) {
@@ -273,11 +276,22 @@ const HeaderComponent = (props) => {
             <SettingIcon /> Settings
           </a>
         </li>
-        {/* <li>
-          <a href="#">
-            <NotificationIcon /> Notifications
+        <li>
+          <a
+            href="https://developer-staging-01.learngual.com/notifications/"
+            className={
+              window.location.pathname.includes("notifications") ? "active" : ""
+            }
+            style={{ cursor: "pointer" }}
+          >
+            {unreadNotificationData?.data?.count > 0 ? (
+              <NotificationIcon />
+            ) : (
+              <NotificationEmptyIcon />
+            )}
+            Notifications
           </a>
-        </li> */}
+        </li>
       </Nav>
 
       <NavGroup