l-min-components 1.0.270 → 1.0.275

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "l-min-components",
-  "version": "1.0.270",
+  "version": "1.0.275",
   "type": "module",
   "files": [
     "src/assets",
@@ -17,6 +17,7 @@
     "axios-hooks": "^4.0.0",
     "chart.js": "^4.2.1",
     "classnames": "^2.3.2",
+    "js-cookie": "^3.0.5",
     "l-min-components": "^1.0.220",
     "moment": "^2.29.4",
     "prop-types": "^15.8.1",

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

@@ -55,7 +55,7 @@ const AccountDropdown = (props) => {
             />
           </div>
           <div>
-            <h1>
+            <h1 style={{ textTransform: "capitalize" }}>
               {" "}
               {props?.selectedAccount?.metadata?.organization_name ||
                 props?.activeAccountName}
@@ -101,7 +101,7 @@ const AccountDropdown = (props) => {
           )} */}
           {props?.developerAccountData.length > 0 && (
             <div>
-              <h3 style={{ marginBottom: 10 }}>Developer account</h3>
+              <h3 style={{ marginBottom: 10 }}>Developer accounts</h3>
               {props?.developerAccountData?.map((developerItem, idx) => (
                 <div
                   className={`account-info ${
@@ -131,7 +131,7 @@ const AccountDropdown = (props) => {
                     />
                   </div>
                   <div className="account-details">
-                    <h1>
+                    <h1 style={{ textTransform: "capitalize" }}>
                       {" "}
                       {developerItem?.metadata?.organization_name ||
                         props.accountName}

package/src/components/header/index.jsx

@@ -275,7 +275,9 @@ const HeaderComponent = (props) => {
               />
             </div>
             <div className="user-info-container">
-              <h5>{selectedAccount?.metadata?.organization_name}</h5>
+              <h5 style={{ textTransform: "capitalize" }}>
+                {selectedAccount?.metadata?.organization_name}
+              </h5>
               <h6 style={{ textTransform: "capitalize" }}>
                 {selectedAccount?.type?.toLowerCase()}
               </h6>

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

@@ -3,7 +3,7 @@ import styled from "styled-components";
 /* styles for header component authenticated users */
 export const Navbar = styled.nav`
   background-color: rgba(255, 255, 255, 1);
-  padding: 10px 10px 10px 20px;
+  padding: 10px 30px 10px 20px;
   display: flex;
   font-family: "Nunito";
   width: 100%;
@@ -43,7 +43,7 @@ export const NavGroup = styled.div`
     }
     .dropdown_list {
       position: absolute;
-      top: 75px;
+      top: 65px;
       width: fit-content;
       background: white;
       padding: 15px 0;
@@ -542,7 +542,7 @@ export const NavGroup2 = styled.div`
     }
     .dropdown_list {
       position: absolute;
-      top: 75px;
+      top: 65px;
       width: fit-content;
       background: white;
       padding: 15px 0;

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

@@ -35,7 +35,7 @@ const UserCard = ({ user, isOpen }) => {
 
       generalData?.accounts?.results?.map((account, idx) => {
         if (account?.id === activeDeveloperAccount) {
-          return setOrganizationName(account?.metadata?.organization_name);
+          return setOrganizationName(account);
         }
       });
     }
@@ -49,7 +49,7 @@ const UserCard = ({ user, isOpen }) => {
       ) : (
         <>
           <Avatar
-            src={userDetails?.data?.profile_picture?.url || avatar}
+            src={organizationName?.profile_photo?.url || avatar}
             isOpen={isOpen}
           />
           <UserDetail isOpen={isOpen}>
@@ -60,7 +60,7 @@ const UserCard = ({ user, isOpen }) => {
                 fontWeight: 700,
                 fontSize: 15,
               }}
-            >{`${organizationName}.`}</Handle>
+            >{`${organizationName?.metadata?.organization_name}.`}</Handle>
           </UserDetail>
         </>
       )}

package/src/components/sideNav/index.jsx

@@ -9,18 +9,56 @@ import {
 } from "./styles";
 import { CiLogout } from "react-icons/ci";
 import { HiOutlineLogout } from "react-icons/hi";
-import LogoutIcon from "./svg/logout"
+import LogoutIcon from "./svg/logout";
+// import deleteCookies from "../../utils/deleteCookies";
+import Cookies from "js-cookie";
 
 const SideBar = ({ routes }) => {
+  const deleteCookies = (name) => {
+    const date = new Date();
+    date.setHours(date.getHours() - 1);
+    const { host } = window.location;
+    const env = host.includes("localhost")
+      ? "local"
+      : host.includes("test") || host.includes("staging")
+      ? "staging"
+      : "production";
+    if (env === "staging") {
+      Cookies.remove(name, {
+        domain: ".learngual.com",
+        expires: date,
+        path: "/",
+      });
+    } else if (env === "local") {
+      Cookies.remove(name, {
+        domain: ".localhost",
+        expires: date,
+        path: "/",
+      });
+    } else {
+      Cookies.remove(name, {
+        domain: ".learngual.com",
+        expires: date,
+        path: "/",
+      });
+    }
+  };
   return (
     <NavWrapper>
       <NavItems>
         {routes.map((route) => (
           <NavItem key={route.path}>
             <NavLinkStyled
-              to={route.path}
-              activeClassName="active"
-              // className={route?.label === "Learning" ? "active" : ""}
+              onClick={() => (window.location.href = route.path)}
+              className={
+                route?.label !== "Learning"
+                  ? window.location.pathname.includes(
+                      route?.label.toLowerCase()
+                    )
+                    ? "active"
+                    : ""
+                  : !window.location.host?.includes("comingsoon") && "active"
+              }
             >
               <Icon>{route.icon}</Icon>
               <span className="text">{route.label}</span>
@@ -28,7 +66,23 @@ const SideBar = ({ routes }) => {
           </NavItem>
         ))}
       </NavItems>
-      <IconContainer>
+      <IconContainer
+        onClick={() => {
+          deleteCookies("access");
+          deleteCookies("refresh");
+          setTimeout(() => {
+            if (
+              window.location.hostname.includes("localhost") ||
+              window.location.hostname.includes("staging")
+            ) {
+              window.location.href =
+                "demo-test-01.learngual.com/login/developer";
+            } else {
+              window.location.href = "demo.learngual.com/login/developer";
+            }
+          }, 500);
+        }}
+      >
         <LogoutIcon className="logout" />
         <p>Sign Out</p>
       </IconContainer>

package/src/hooks/leftNavMenu.jsx

@@ -40,32 +40,32 @@ export const user = {
 
 export const leftNavMenu = [
   {
-    path: "/learning",
+    path: "https://developer-staging-01.learngual.com/",
     label: "Learning",
     icon: <Learning />,
   },
   {
-    path: "/community",
+    path: "https://comingsoon.learngual.com/community",
     label: "Community",
     icon: <CommunityIcon />,
   },
   {
-    path: "/fun",
+    path: "https://comingsoon.learngual.com/fun",
     label: "Fun",
     icon: <FunIcon />,
   },
   {
-    path: "/duet",
+    path: "https://comingsoon.learngual.com/duet",
     label: "Duet",
     icon: <DuetIcon />,
   },
   {
-    path: "/speech",
+    path: "https://comingsoon.learngual.com/speech",
     label: "Speech",
     icon: <SpeechIcon />,
   },
   {
-    path: "/dictionary",
+    path: "https://comingsoon.learngual.com/dictionary",
     label: "Dictionary",
     icon: <DictionaryIcon />,
   },