l-min-components 1.7.1385 → 1.7.1386

package/package.json

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

package/src/components/AppMainLayout/index.jsx

@@ -158,15 +158,22 @@ const AppMainLayout = ({ children }) => {
     if (getDefaultAccount?.data) {
       const date = new Date();
       date.setDate(date.getDate() + 28);
+
+      const domain = window.location.href.includes("localhost")
+        ? "localhost"
+        : window.location.hostname?.includes("ca")
+        ? ".learngual.ca"
+        : ".learngual.com";
+
       document.cookie =
         "defaultAccountID=" +
         getDefaultAccount?.data?.id +
-        `; path=/; expires=${date.toUTCString()};`;
+        `; domain=${domain}; path=/; expires=${date.toUTCString()};`;
 
       document.cookie =
         "defaultAccountType=" +
         getDefaultAccount?.data?.type +
-        `; path=/; expires=${date.toUTCString()};`;
+        `; domain=${domain}; path=/; expires=${date.toUTCString()};`;
 
       localStorage.setItem("defaultLang", getDefaultAccount?.data?.language);
 
@@ -418,7 +425,8 @@ const AppMainLayout = ({ children }) => {
                 </LeftLayout>
                 <CenterLayout isOpen={isOpen} style={centerLayoutStyle}>
                   {(window.location.pathname.includes("instructor") ||
-                    activeAccountType === "instructor") && (
+                    (activeAccountType === "instructor" &&
+                      !accountIsPendingDeletion)) && (
                     <InstructorAccountSwitcher
                       // setAccountType={setAffiliatesActive}
                       generalData={generalData}

package/src/components/dashboardState/pendingDeleteState.jsx

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import warning from "./images/warning-db.png";
+import warning from "./images/information-icon.png";
 import ButtonComponent from "../button";
 import moment from "moment";
 import redirectURL from "../../utils/redirectURL";

package/src/components/getErrorFeatures/errorWrapper.jsx

@@ -0,0 +1,205 @@
+import React from "react";
+import styled from "styled-components";
+
+import logo from "../../assets/images/logo.png";
+import bg from "./images/bg-404.png";
+import redirectURL from "../../utils/redirectURL";
+import useCustomNavigate from "../../hooks/useCustomNavigate";
+import getCookie from "../../utils/getCookie";
+
+const ErrorWrapper = ({
+  title = "Oops!",
+  subTitle = "Page not found",
+  message = "Seems we can't find the page you are looking for. Let's get you back home.",
+  btnText = "Go to home page",
+  bgSrc,
+  fallbackPath,
+  isDashboard,
+}) => {
+  const navigate = useCustomNavigate();
+  const handleNav = () => {
+    const accountType = getCookie("defaultAccountType")?.toLocaleLowerCase();
+
+    if (isDashboard && accountType) {
+      const route =
+        accountType === "developer"
+          ? "/developer"
+          : `/${accountType}/dashboard`;
+
+      navigate(fallbackPath || route || "/", { reload: true });
+    } else {
+      navigate(fallbackPath || "/", { reload: true });
+    }
+  };
+  return (
+    <Container>
+      <Navbar>
+        <a href="/">
+          <img src={logo} alt="Learngual logo" />
+        </a>
+      </Navbar>
+      <Content>
+        <LeftDiv>
+          <h1>{title}</h1>
+          <div>
+            {subTitle && <h2>{subTitle}</h2>}
+            {message && <p>{message}</p>}
+          </div>
+
+          <button onClick={handleNav}>{btnText}</button>
+        </LeftDiv>
+        <ImageBox>
+          <img src={bgSrc || bg} alt="" />
+        </ImageBox>
+      </Content>
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  min-height: 100vh;
+  width: 100%;
+  background-color: #fff;
+  padding: 0 25px;
+  display: flex;
+  flex-direction: column;
+  @media screen and (min-width: 850px) {
+    padding: 0 104px;
+  }
+`;
+
+const Navbar = styled.nav`
+  width: 100%;
+  height: 80px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  img {
+    width: 52px;
+  }
+  @media screen and (min-width: 850px) {
+    height: 100px;
+    img {
+      width: 60px;
+    }
+  }
+`;
+
+const Content = styled.div`
+  flex: 1;
+  display: flex;
+  align-items: center;
+  padding-bottom: 80px;
+  gap: 30px;
+  flex-direction: column-reverse;
+  justify-content: flex-end;
+  padding-top: 60px;
+  max-width: 390px;
+  margin: 0 auto;
+  @media screen and (min-width: 850px) {
+    flex-direction: row;
+    padding-top: 0px;
+    justify-content: flex-start;
+    gap: 100px;
+    padding-bottom: 100px;
+    max-width: none;
+    margin: 0px;
+  }
+`;
+
+const LeftDiv = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  text-align: center;
+  align-items: center;
+  color: #313333;
+  border-radius: 15px;
+  background: #f5f7f7;
+  padding: 20px 18px;
+  h1 {
+    font-size: 25px;
+  }
+  > div {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    h2 {
+      font-weight: 500;
+      font-size: 18px;
+    }
+    p {
+      font-size: 16px;
+      color: #636666;
+    }
+  }
+  button {
+    width: fit-content;
+    height: 40px;
+    padding: 0px 40px;
+    border-radius: 6px;
+    background: #febf10;
+    box-shadow: 0px 10px 20px 0px rgba(254, 191, 16, 0.25);
+    border: none;
+    outline: none;
+    cursor: pointer;
+    color: white;
+    font-weight: 700;
+    font-size: 14px;
+    margin-top: 12px;
+  }
+
+  @media screen and (min-width: 850px) {
+    max-width: 462px;
+    gap: 24px;
+    text-align: left;
+    flex: none;
+    align-items: flex-start;
+    border-radius: 0px;
+    background: transparent;
+    padding: 0px;
+    flex: 1;
+    h1 {
+      font-size: 44px;
+    }
+    > div {
+      gap: 12px;
+      h2 {
+        font-size: 30px;
+      }
+      p {
+        font-size: 18px;
+        line-height: 32px;
+        color: #313333;
+      }
+    }
+    button {
+      margin-top: 0;
+      height: 50px;
+      font-size: 16px;
+      border-radius: 12px;
+    }
+  }
+`;
+
+const ImageBox = styled.div`
+  width: 100%;
+  height: 160px;
+  display: grid;
+  place-items: center;
+  img {
+    width: 100%;
+    max-width: 550px;
+    height: 100%;
+    max-height: 550px;
+    object-fit: contain;
+  }
+
+  @media screen and (min-width: 850px) {
+    height: 100%;
+    flex: 1;
+  }
+`;
+export default ErrorWrapper;

package/src/components/getErrorFeatures/index.jsx

@@ -0,0 +1,158 @@
+import ErrorWrapper from "./errorWrapper";
+import bg403 from "./images/bg-403.png";
+import bg500 from "./images/bg-500.png";
+import bg503 from "./images/bg-503.png";
+
+const Error404 = ({ btnText, fallbackPath, isDashboard }) => (
+  <ErrorWrapper
+    fallbackPath={fallbackPath}
+    btnText={btnText}
+    isDashboard={isDashboard}
+  />
+);
+const Error403 = ({ btnText, fallbackPath, isDashboard }) => (
+  <ErrorWrapper
+    subTitle="Sorry, you don’t have permission to access this page."
+    message="If you believe this is a mistake, please contact the site administrator or check if you have the correct login credentials."
+    bgSrc={bg403}
+    fallbackPath={fallbackPath}
+    btnText={btnText}
+    isDashboard={isDashboard}
+  />
+);
+const Error500 = ({ btnText, fallbackPath, isDashboard }) => (
+  <ErrorWrapper
+    subTitle="Something went wrong"
+    message="We’re so sorry about that! Our tech team is already on the case. Please try again later."
+    bgSrc={bg500}
+    fallbackPath={fallbackPath}
+    btnText={btnText}
+    isDashboard={isDashboard}
+  />
+);
+const Error503 = ({ btnText, fallbackPath, isDashboard }) => (
+  <ErrorWrapper
+    subTitle=""
+    message="It'll be back up and running in a jiffy. Try again later."
+    title="Our servers are temporarily busy."
+    bgSrc={bg503}
+    fallbackPath={fallbackPath}
+    btnText={btnText}
+    isDashboard={isDashboard}
+  />
+);
+
+function ErrorBoundary({
+  routeError,
+  isRouteErrorResponse,
+  fallbackPath,
+  btnText,
+  isDashboard,
+}) {
+  if (isRouteErrorResponse?.(routeError)) {
+    if (error.status === 404)
+      return (
+        <Error404
+          fallbackPath={fallbackPath}
+          btnText={btnText}
+          isDashboard={isDashboard}
+        />
+      );
+    if (error.status === 403)
+      return (
+        <Error403
+          fallbackPath={fallbackPath}
+          btnText={btnText}
+          isDashboard={isDashboard}
+        />
+      );
+    if (error.status === 500)
+      return (
+        <Error500
+          fallbackPath={fallbackPath}
+          btnText={btnText}
+          isDashboard={isDashboard}
+        />
+      );
+    if (error.status === 503)
+      return (
+        <Error503
+          fallbackPath={fallbackPath}
+          btnText={btnText}
+          isDashboard={isDashboard}
+        />
+      );
+    return (
+      <Error500
+        fallbackPath={fallbackPath}
+        btnText={btnText}
+        isDashboard={isDashboard}
+      />
+    );
+  }
+
+  if (error instanceof Error)
+    return (
+      <Error500
+        fallbackPath={fallbackPath}
+        btnText={btnText}
+        isDashboard={isDashboard}
+      />
+    );
+  return (
+    <Error500
+      fallbackPath={fallbackPath}
+      btnText={btnText}
+      isDashboard={isDashboard}
+    />
+  );
+}
+
+function ErrorComponent({ fallbackPath, btnText, isDashboard = false }) {
+  const params = new URLSearchParams(window.location.search);
+  const errorParam = params.get("error-status");
+
+  if (errorParam === "_403_")
+    return (
+      <Error403
+        fallbackPath={fallbackPath}
+        btnText={btnText}
+        isDashboard={isDashboard}
+      />
+    );
+  if (errorParam === "_500_")
+    return (
+      <Error500
+        fallbackPath={fallbackPath}
+        btnText={btnText}
+        isDashboard={isDashboard}
+      />
+    );
+  if (errorParam === "_503_")
+    return (
+      <Error503
+        fallbackPath={fallbackPath}
+        btnText={btnText}
+        isDashboard={isDashboard}
+      />
+    );
+  return (
+    <Error404
+      fallbackPath={fallbackPath}
+      btnText={btnText}
+      isDashboard={isDashboard}
+    />
+  );
+}
+
+const getErrorFeatures = () => {
+  return {
+    Error404,
+    Error403,
+    Error500,
+    Error503,
+    ErrorBoundary,
+    ErrorComponent,
+  };
+};
+export default getErrorFeatures;

package/src/components/header/index.jsx

@@ -10,15 +10,7 @@ import {
 import { ArrowDownIcon } from "./assets/svg/arrow-down";
 import AccountDropdown from "./account-dropdown";
 import avatar from "./assets/images/avatar.png";
-import {
-  Navbar,
-  NavGroup,
-  Nav,
-  SearchInputGroup,
-  SearchInput,
-  UserProfile,
-  Help,
-} from "./index.styled";
+import { Navbar, NavGroup, Nav, UserProfile } from "./index.styled";
 import useHeader from "./getHeaderDetails";
 import { FullPageLoader, OutletContext } from "..";
 import { useLocation } from "react-router-dom";

package/src/components/index.js

@@ -62,3 +62,5 @@ export { default as useAiUtils } from "../utils/useAiUtils";
 export { default as useAudioRecorder } from "../hooks/recorder-kit";
 export { default as useCookiePolling } from "../hooks/utils/cookiePolling";
 export { default as convertBlobToWav } from "../utils/webm2wav";
+export { default as useErrorFeatures } from "./getErrorFeatures";
+export { default as useCustomNavigate } from "../hooks/useCustomNavigate";

package/src/components/instructorAccountSwitcher/deleteCookies.jsx

@@ -11,16 +11,23 @@ const deleteCookies = (name) => {
     : "production";
   if (env === "staging") {
     Cookies.remove(name, {
+      domain: window.location.hostname?.includes("ca")
+        ? ".learngual.ca"
+        : ".learngual.com",
       expires: date,
       path: "/",
     });
   } else if (env === "local") {
     Cookies.remove(name, {
+      domain: "localhost",
       expires: date,
       path: "/",
     });
   } else {
     Cookies.remove(name, {
+      domain: window.location.hostname?.includes("ca")
+        ? ".learngual.ca"
+        : ".learngual.com",
       expires: date,
       path: "/",
     });

package/src/components/instructorAccountSwitcher/index.jsx

@@ -71,7 +71,13 @@ const InstructorAccountSwitcher = ({
     date.setDate(date.getDate() + 20);
     const expires = "; expires=" + date.toUTCString();
     const path = "; path=/";
-    document.cookie = "affiliateAccount=" + id + expires + path;
+    const domain = window.location.href.includes("localhost")
+      ? "localhost"
+      : window.location.hostname?.includes("ca")
+      ? ".learngual.ca"
+      : ".learngual.com";
+    document.cookie =
+      "affiliateAccount=" + id + expires + path + "; domain=" + domain;
   };
 
   const cookieValue = getCookie();
@@ -262,7 +268,7 @@ const InstructorAccountSwitcher = ({
                 className={switchValue !== "affiliates" ? "active" : ""}
                 onClick={() => handleSwitch(1)}
               >
-                <span>My Account</span>
+                <span>Personal</span>
                 <span className="circle"></span>
               </button>
             )}

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

@@ -83,11 +83,10 @@ const SideMenu = ({
   }, [affiliatesActive, filteredRoutes]);
 
   // Right bars
-  const EnterpriseRight = <EnterpriseRightBar />;
-  const InstructorRight = <InstructorRightBar />;
+  // const EnterpriseRight = <EnterpriseRightBar />;
+  // const InstructorRight = <InstructorRightBar />;
 
   const renderNavigationItem = (route, index) => {
-    console.log(route, "route");
     let notificationCount;
     const { icon, iconActive, text, notifications, path, affiliates, newTab } =
       route;

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

@@ -20,19 +20,25 @@ const UserCard = ({ isOpen, findText }) => {
   useEffect(() => {
     if (generalData?.selectedAccount) {
       const date = new Date();
+      const domain = window.location.href.includes("localhost")
+        ? "localhost"
+        : window.location.hostname?.includes("ca")
+        ? ".learngual.ca"
+        : ".learngual.com";
+
       date.setDate(date.getDate() + 28);
       document.cookie =
         "activeDeveloperAccount=" +
         generalData?.selectedAccount?.id +
-        `; path=/; expires=${date.toUTCString()};`;
+        `; path=/; domain=${domain}; expires=${date.toUTCString()};`;
       document.cookie =
         "defaultAccountID=" +
         generalData?.selectedAccount?.id +
-        `; path=/; expires=${date.toUTCString()};`;
+        `; path=/; domain=${domain}; expires=${date.toUTCString()};`;
       document.cookie =
         "defaultAccountType=" +
         generalData?.selectedAccount?.type +
-        `; path=/; expires=${date.toUTCString()};`;
+        `; path=/; domain=${domain}; expires=${date.toUTCString()};`;
 
       handleSetDefaultAccount(generalData?.selectedAccount?.id);
 
@@ -45,7 +51,6 @@ const UserCard = ({ isOpen, findText }) => {
       }
     }
   }, [generalData]);
-  console.log(generalData, "data...");
 
   return (
     <UserCardContainer isOpen={isOpen}>

package/src/components/sideNav/index.jsx

@@ -24,16 +24,23 @@ const SideBar = ({ routes, findText }) => {
       : "production";
     if (env === "staging") {
       Cookies.remove(name, {
+        domain: window.location.hostname?.includes("ca")
+          ? ".learngual.ca"
+          : ".learngual.com",
         expires: date,
         path: "/",
       });
     } else if (env === "local") {
       Cookies.remove(name, {
+        domain: "localhost",
         expires: date,
         path: "/",
       });
     } else {
       Cookies.remove(name, {
+        domain: window.location.hostname?.includes("ca")
+          ? ".learngual.ca"
+          : ".learngual.com",
         expires: date,
         path: "/",
       });

package/src/hooks/leftNavMenu.jsx

@@ -83,7 +83,9 @@ export const leftNavMenu = [
     icon: <DictionaryIcon />,
   },
   {
-    path: "https://demo.learngual.com/type-select",
+    path: window.location.hostname.includes("ca")
+      ? "https://demo.learngual.ca/type-select"
+      : "https://demo.learngual.com/type-select",
     label: "Demo",
     icon: <CompuetrerIcon />,
   },
@@ -92,7 +94,9 @@ export const leftNavMenu = [
 export const getLeftRoutes = (accoutType) => {
   const leftNavMenu = [
     {
-      path: `https://www.learngual.com/${accoutType}`,
+      path: window.location.hostname.includes("ca")
+        ? `https://www.learngual.ca/${accoutType}`
+        : `https://www.learngual.com/${accoutType}`,
       label: "Learning",
       icon: <Learning />,
     },
@@ -122,7 +126,9 @@ export const getLeftRoutes = (accoutType) => {
       icon: <DictionaryIcon />,
     },
     {
-      path: "https://demo.learngual.com/type-select",
+      path: window.location.hostname.includes("ca")
+        ? "https://demo.learngual.ca/type-select"
+        : "https://demo.learngual.com/type-select",
       label: "Demo",
       icon: <CompuetrerIcon />,
     },

package/src/hooks/useCustomNavigate.jsx

@@ -0,0 +1,21 @@
+export default function useCustomNavigate() {
+  return (path, { replace = false, state = null, reload = false } = {}) => {
+    if (reload) {
+      if (replace) {
+        window.location.replace(path);
+      } else {
+        window.location.href = path;
+      }
+      return;
+    }
+
+    const historyState = { ...state };
+    if (replace) {
+      window.history.replaceState(historyState, "", path);
+    } else {
+      window.history.pushState(historyState, "", path);
+    }
+    //ssss
+    window.dispatchEvent(new PopStateEvent("popstate"));
+  };
+}

package/src/utils/deleteCookies.js

@@ -31,12 +31,18 @@ const deleteCookies = (names) => {
     if (env === "local") {
       // For local environment
       deleteSingleCookie(name, {
+        domain: "localhost",
         expires: date,
         path: "/",
       });
     } else {
       // For staging and production environments
       deleteSingleCookie(name, {
+        domain: window.location.href.includes("localhost")
+          ? "localhost"
+          : window.location.hostname?.includes("ca")
+          ? ".learngual.ca"
+          : ".learngual.com",
         expires: date,
         path: "/",
       });

package/src/utils/getCookie.js

@@ -0,0 +1,13 @@
+function getCookie(name) {
+  const cookieStr = document.cookie;
+  const cookies = cookieStr.split("; ");
+
+  for (const cookie of cookies) {
+    const [key, value] = cookie.split("=");
+    if (key === name) return decodeURIComponent(value);
+  }
+
+  return null; // Not found
+}
+
+export default getCookie;