l-min-components 1.7.1533 → 1.7.1535

package/package.json

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

package/src/components/AppMainLayout/index.jsx

@@ -5,8 +5,8 @@ import React, {
   useMemo,
   useCallback,
   forwardRef,
-} from 'react';
-import { Outlet, useLocation } from 'react-router-dom';
+} from "react";
+import { Outlet, useLocation } from "react-router-dom";
 import {
   Layout,
   CenterLayout,
@@ -15,7 +15,7 @@ import {
   MainLayout,
   ChildrenBox,
   ChildrenWrap,
-} from './index.styled';
+} from "./index.styled";
 import {
   Header as HeaderComponent,
   Banner,
@@ -23,16 +23,16 @@ import {
   SideMenu,
   FullPageLoader,
   DeveloperBanner,
-} from '../';
+} from "../";
 import {
   leftNavMenu,
   user,
   sideMenuOptions,
   getLeftRoutes,
-} from '../../hooks/leftNavMenu';
-import InstructorAccountSwitcher from '../instructorAccountSwitcher';
+} from "../../hooks/leftNavMenu";
+import InstructorAccountSwitcher from "../instructorAccountSwitcher";
 // import SideMenu from "../sideBar/sideMenu";
-import InstructorRightBar from '../fileRightBar/instructorRightBar2';
+import InstructorRightBar from "../fileRightBar/instructorRightBar2";
 import EnterpriseRightBar, {
   FallbackRightBar,
 } from "../fileRightBar/enterpriseRightBar";
@@ -56,18 +56,18 @@ const AppMainLayout = ({ children }) => {
   const [rightComponent, setRightComponent] = useState();
   const [generalData, setGeneralData] = useState({});
   const [coming, setComing] = useState();
-  const [activePage, setActivePage] = useState('reports');
-  const [page, setPage] = useState('index');
-  const [studyTab, setStudyTab] = useState('analysis');
+  const [activePage, setActivePage] = useState("reports");
+  const [page, setPage] = useState("index");
+  const [studyTab, setStudyTab] = useState("analysis");
   const [selectedCourseId, setSelectedCourseId] = useState(null);
   const [hasLayoutBackgroundImage, setHasLayoutBackgroundImage] =
     useState(false);
   const [sideMenuLayout, setSideMenuLayout] = useState(true);
-  const [defaultAcct, setDefaultAcct] = useState('');
+  const [defaultAcct, setDefaultAcct] = useState("");
   const [centerLayoutStyle, setCenterLayoutStyle] = useState({});
   const [affiliatesActive, setAffiliatesActive] = useState(false);
-  const [accessToken, setAccessToken] = useState('');
-  const [envType, setEnvType] = useState('');
+  const [accessToken, setAccessToken] = useState("");
+  const [envType, setEnvType] = useState("");
   const [newNotifications, setNewNotifications] = useState([]);
   const [affiliateAccount, setAffiliateAccount] = useState(null);
   const [gracePeriod, setGracePeriod] = useState(true); // test
@@ -77,7 +77,7 @@ const AppMainLayout = ({ children }) => {
   const [newLoadingForPostDefaultAccount, setNewLoadingForPostDefaultAccount] =
     useState(true);
   const [selectedAccount, setSelectedAccount] = useState();
-  const [affilitateSearch, setAffilitateSearch] = useState('');
+  const [affilitateSearch, setAffilitateSearch] = useState("");
   const [showChildren, setShowChildren] = useState(false);
   const [loading, setLoading] = useState(true);
 
@@ -92,15 +92,15 @@ const AppMainLayout = ({ children }) => {
   // for mobile view
   useEffect(() => {
     const handleResize = () => setDeviceWidth(window.innerWidth);
-    window.addEventListener('resize', handleResize);
-    return () => window.removeEventListener('resize', handleResize);
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
   }, []);
 
   // on page load check local storage for state of isOpen and set that to the state that controls the opening and closing of the navbar
   useEffect(() => {
-    window.localStorage.getItem('isOpen') &&
+    window.localStorage.getItem("isOpen") &&
       setIsOpen(
-        window.localStorage.getItem('isOpen') === 'true' ? true : false,
+        window.localStorage.getItem("isOpen") === "true" ? true : false
       );
   }, []);
 
@@ -108,21 +108,21 @@ const AppMainLayout = ({ children }) => {
   // active account type
   const activeAccountType = useMemo(
     () => String(generalData?.selectedAccount?.type).toLowerCase(),
-    [generalData],
+    [generalData]
   );
   const accountName = useMemo(() => {
     const { user: User, selectedAccount } = generalData;
-    if (!User || !selectedAccount) return '...'; // or an empty string
+    if (!User || !selectedAccount) return "..."; // or an empty string
     const defaultAccountName = String(User.first_name).concat(
-      ' ',
-      User.last_name,
+      " ",
+      User.last_name
     );
     switch (activeAccountType) {
-      case 'enterprise':
+      case "enterprise":
         return (
           selectedAccount?.metadata?.organization_name ?? defaultAccountName
         );
-      case 'developer':
+      case "developer":
         return (
           selectedAccount?.metadata?.organization_name ??
           selectedAccount?.metadata?.org_name ??
@@ -139,19 +139,19 @@ const AppMainLayout = ({ children }) => {
 
   const findAccountNames = useCallback(
     (account, User = generalData?.user) => {
-      if (!User || !account) return '';
+      if (!User || !account) return "";
       switch (String(account.type).toLowerCase()) {
-        case 'enterprise':
+        case "enterprise":
           return account?.metadata?.organization_name;
-        case 'developer':
+        case "developer":
           return (
             account?.metadata?.organization_name ?? account?.metadata?.org_name
           );
         default:
-          return User.first_name.concat(' ', User.last_name);
+          return User.first_name.concat(" ", User.last_name);
       }
     },
-    [generalData],
+    [generalData]
   );
   const {
     setDefaultAccount,
@@ -183,22 +183,24 @@ const AppMainLayout = ({ children }) => {
         ? ".learngual.ca"
         : ".learngual.com";
       document.cookie =
-        'defaultAccountID=' +
+        "defaultAccountID=" +
         getDefaultAccount?.data?.id +
         `; domain=${domain}; path=/; expires=${date.toUTCString()};`;
       document.cookie =
-        'defaultAccountType=' +
+        "defaultAccountType=" +
         getDefaultAccount?.data?.type +
         `; domain=${domain}; path=/; expires=${date.toUTCString()};`;
       localStorage.setItem("defaultLang", getDefaultAccount?.data?.language);
       const { registration_step } = getDefaultAccount?.data;
       // If registration step is "REGISTRATION_COMPLETED" - go to acct type selection page
-      if (registration_step === 'REGISTRATION_COMPLETED') {
-        window.location.href = '/auth/account-type';
+      if (registration_step === "REGISTRATION_COMPLETED") {
+        window.location.href = "/auth/account-type";
       }
       // If registration step is "REGISTRATION_PARTIALLY_COMPLETED" go to /register where the user can provide the missing fields.
-      else if (registration_step === 'REGISTRATION_PARTIALLY_COMPLETED') {
-        window.location.href = '/auth/register';
+      else if (registration_step === "REGISTRATION_PARTIALLY_COMPLETED") {
+        // Update the registration step cookie
+        document.cookie = `registrationStep=${registration_step}; expires=${date.toUTCString()}; path=/; domain=${domain}`;
+        window.location.href = "/auth/sign-in";
       }
 
       // set default acct when you receive the default acct data
@@ -213,17 +215,17 @@ const AppMainLayout = ({ children }) => {
       const defaultAccountType = getDefaultAccount?.data?.type?.toLowerCase();
       const excludedPaths = ["settings", "notifications", "help"];
       const shouldSkipNavigation = excludedPaths.some((path) =>
-        currentUrl.includes(path),
+        currentUrl.includes(path)
       );
       console.log(
-        'Navigation logic triggered - getDefaultAccount data received:',
+        "Navigation logic triggered - getDefaultAccount data received:",
         {
           currentUrl,
           defaultAccountType,
           shouldSkipNavigation,
           hostname: window.location.hostname,
           data: getDefaultAccount?.data,
-        },
+        }
       );
       if (!shouldSkipNavigation && defaultAccountType) {
         const urlContainsAccountType = currentUrl.includes(defaultAccountType);
@@ -237,7 +239,7 @@ const AppMainLayout = ({ children }) => {
             const targetUrl = `/${defaultAccountType}`;
 
             // Try using window.location.replace for staging compatibility
-            if (window.location.hostname.includes('staging')) {
+            if (window.location.hostname.includes("staging")) {
               window.location.replace(targetUrl);
             } else {
               window.location.href = targetUrl;
@@ -254,10 +256,10 @@ const AppMainLayout = ({ children }) => {
       handleGetUserPlan();
       if (
         setDefaultAccount?.response?.status === 207 &&
-        !window.location.host.includes('staging') &&
-        !window.location.host.includes('local')
+        !window.location.host.includes("staging") &&
+        !window.location.host.includes("local")
       ) {
-        window.location.href = '/auth/account-type';
+        window.location.href = "/auth/account-type";
       } else {
         setTimeout(() => {
           setNewLoadingForPostDefaultAccount(false);
@@ -266,7 +268,7 @@ const AppMainLayout = ({ children }) => {
     }
   }, [setDefaultAccount?.data]);
   useEffect(() => {
-    if (window.location.host.includes('coming')) {
+    if (window.location.host.includes("coming")) {
       setComing(true);
     } else {
       setComing(false);
@@ -274,12 +276,12 @@ const AppMainLayout = ({ children }) => {
   }, []);
   useEffect(() => {
     let cookieValue = null;
-    const cookieName = 'defaultAccountType';
+    const cookieName = "defaultAccountType";
     // Retrieve the value of the cookie
-    const cookies = document.cookie.split(';');
+    const cookies = document.cookie.split(";");
     for (let i = 0; i < cookies.length; i++) {
       const cookie = cookies[i].trim();
-      if (cookie.startsWith(cookieName + '=')) {
+      if (cookie.startsWith(cookieName + "=")) {
         cookieValue = cookie.substring(cookieName.length + 1);
         setDefaultAcct(cookieValue);
         break;
@@ -290,39 +292,39 @@ const AppMainLayout = ({ children }) => {
   // set access token from cookie to context
   useEffect(() => {
     let cookieValue = null;
-    const cookieName = 'access';
+    const cookieName = "access";
 
     // Retrieve the value of the cookie
-    const cookies = document.cookie.split(';');
+    const cookies = document.cookie.split(";");
     for (let i = 0; i < cookies.length; i++) {
       const cookie = cookies[i].trim();
-      if (cookie.startsWith(cookieName + '=')) {
+      if (cookie.startsWith(cookieName + "=")) {
         cookieValue = cookie.substring(cookieName.length + 1);
         setAccessToken(cookieValue);
         break;
       }
     }
-    console.log('Calling handleGetDefaultAccount on staging/local');
+    console.log("Calling handleGetDefaultAccount on staging/local");
     handleGetDefaultAccount();
   }, [defaultAcct]);
 
   // setting current environment type
   useEffect(() => {
-    if (window.location.hostname.includes('staging')) {
-      setEnvType('staging');
-    } else if (window.location.hostname.includes('localhost')) {
-      setEnvType('localhost');
+    if (window.location.hostname.includes("staging")) {
+      setEnvType("staging");
+    } else if (window.location.hostname.includes("localhost")) {
+      setEnvType("localhost");
     } else {
-      setEnvType('live');
+      setEnvType("live");
     }
     setLoading(true);
   }, []);
   useEffect(() => {
-    const locaLang = localStorage.getItem('defaultLang');
+    const locaLang = localStorage.getItem("defaultLang");
     const checkiIsObj =
       locaLang && locaLang.toLocaleLowerCase().includes("slug");
     if (checkiIsObj) {
-      localStorage.removeItem('defaultLang');
+      localStorage.removeItem("defaultLang");
       window.location.reload();
     }
   }, []);
@@ -330,41 +332,41 @@ const AppMainLayout = ({ children }) => {
   // const currentPlan = userPlanData?.data?.current_plan;
   const planState = userPlanData?.data?.state;
   const wordBank = [
-    'Sign out',
-    'Learning',
-    'Community',
-    'Fun',
-    'Duet',
-    'Speech',
-    'Settings',
-    'Notifications',
-    'Hello',
-    'API',
-    'Documentation',
-    'Reports',
-    'Created',
-    'Report',
-    'Dictionary',
+    "Sign out",
+    "Learning",
+    "Community",
+    "Fun",
+    "Duet",
+    "Speech",
+    "Settings",
+    "Notifications",
+    "Hello",
+    "API",
+    "Documentation",
+    "Reports",
+    "Created",
+    "Report",
+    "Dictionary",
     "What's your language?",
-    'Add account',
-    'Developer accounts',
-    'Developer',
-    'Search',
-    'Get started',
-    'Sign in',
-    'Sorry, you can’t access your account on a mobile browser.',
+    "Add account",
+    "Developer accounts",
+    "Developer",
+    "Search",
+    "Get started",
+    "Sign in",
+    "Sorry, you can’t access your account on a mobile browser.",
     "We know it's inconvenient. For better user accessibility, login with a desktop device or via our mobile app.",
-    'Download on google play',
-    'Download on apple store',
-    'Help',
-    '10% off your next subscription purchase?',
+    "Download on google play",
+    "Download on apple store",
+    "Help",
+    "10% off your next subscription purchase?",
     "Let's go!",
-    'Get a discount when you upgrade to a custom plan and unlock a new world of building.',
-    'Contact us',
-    'Get more API calls for less with our custom plan',
-    'Upgrade now for a 10% discount.',
-    'Build the future with Learngual!',
-    'Choose our custom plans for more calls and better flexibility.',
+    "Get a discount when you upgrade to a custom plan and unlock a new world of building.",
+    "Contact us",
+    "Get more API calls for less with our custom plan",
+    "Upgrade now for a 10% discount.",
+    "Build the future with Learngual!",
+    "Choose our custom plans for more calls and better flexibility.",
     "We know it's inconvenient. For better user accessibility, login with a desktop device.",
     // Additional text from codebase analysis - ONLY actual strings found
     "Student",
@@ -404,8 +406,8 @@ const AppMainLayout = ({ children }) => {
     "Ready",
     "play",
     // expired instructor
-    'You haven’t been added to an enterprise account yet',
-    'This account will be active once an enterprise assigns you as an instructor.',
+    "You haven’t been added to an enterprise account yet",
+    "This account will be active once an enterprise assigns you as an instructor.",
   ];
   const {
     setDefaultLang,
@@ -419,7 +421,7 @@ const AppMainLayout = ({ children }) => {
 
   const handleGetStorageSummary = async () => {
     const accountType = generalData?.selectedAccount?.type?.toLowerCase();
-    if (accountType === 'enterprise' || accountType === 'instructor') {
+    if (accountType === "enterprise" || accountType === "instructor") {
       const res = await handleGetFileStorageSummary(accountType);
       res?.data &&
         setStorageSummary({
@@ -438,11 +440,11 @@ const AppMainLayout = ({ children }) => {
     handleGetDefaultAffiliate,
   } = useHeader();
   useEffect(() => {
-    if (activeAccountType === 'instructor') {
+    if (activeAccountType === "instructor") {
       handleGetDefaultAffiliate();
     } else if (
       activeAccountType.length > 0 &&
-      activeAccountType?.toLowerCase() !== 'instructor'
+      activeAccountType?.toLowerCase() !== "instructor"
     ) {
       setLoading(false);
     }
@@ -468,7 +470,7 @@ const AppMainLayout = ({ children }) => {
   const affiliateList = getAllAffiliateData?.data?.results?.map?.((account) => {
     const image = account?.profile_photo?.url;
     return {
-      name: account?.metadata?.organization_name ?? '...',
+      name: account?.metadata?.organization_name ?? "...",
       image,
       id: account?.id,
     };
@@ -480,7 +482,7 @@ const AppMainLayout = ({ children }) => {
         id: hasAxtiveAffiliateId,
       });
     } else {
-      deleteCookies('affiliateAccount');
+      deleteCookies("affiliateAccount");
       setAffiliateAccount(null);
     }
   }, [hasAxtiveAffiliateId, activeAccountType]);
@@ -578,7 +580,7 @@ const AppMainLayout = ({ children }) => {
                     style={centerLayoutStyle}
                     href={window.location.href}
                   >
-                    {activeAccountType === 'instructor' &&
+                    {activeAccountType === "instructor" &&
                       !accountIsPendingDeletion &&
                       affiliateList?.length > 0 &&
                       defaultAffiliateIsSuccess && (
@@ -604,7 +606,7 @@ const AppMainLayout = ({ children }) => {
                     {!generalData?.selectedAccount ? (
                       <BlankState />
                     ) : accountIsPendingDeletion &&
-                      !window.location.pathname.includes('settings') ? (
+                      !window.location.pathname.includes("settings") ? (
                       <PendingDeleteState
                         deleteDate={
                           generalData?.selectedAccount?.pending_delete_datetime
@@ -612,12 +614,12 @@ const AppMainLayout = ({ children }) => {
                       />
                     ) : (
                       <>
-                        {activeAccountType === 'enterprise' &&
-                        (planState === 'GRACE PERIOD' ||
-                          planState === 'EXPIRED' ||
+                        {activeAccountType === "enterprise" &&
+                        (planState === "GRACE PERIOD" ||
+                          planState === "EXPIRED" ||
                           (!userPlanData?.loading && !planState)) &&
-                        !window.location.pathname.includes('file-m') &&
-                        !window.location.pathname.includes('settings') ? (
+                        !window.location.pathname.includes("file-m") &&
+                        !window.location.pathname.includes("settings") ? (
                           <GracePeriod
                             getCurrentSubscriptionData={
                               getCurrentSubscriptionData
@@ -626,11 +628,11 @@ const AppMainLayout = ({ children }) => {
                               handleCurrentSubscription
                             }
                             gracePeriod={gracePeriod}
-                            stateType={planState === 'GRACE PERIOD' ? 1 : 2}
+                            stateType={planState === "GRACE PERIOD" ? 1 : 2}
                             planState={planState}
                             findText={findText}
                           />
-                        ) : activeAccountType === 'instructor' &&
+                        ) : activeAccountType === "instructor" &&
                           !userPlanData?.loading &&
                           !planState &&
                           !loading &&
@@ -639,20 +641,20 @@ const AppMainLayout = ({ children }) => {
                           getDefaultAffiliateData?.data &&
                           !getDefaultAffiliateData?.loading &&
                           !getAllAffiliateData?.loading &&
-                          !window.location.pathname.includes('notif') ? (
+                          !window.location.pathname.includes("notif") ? (
                           <div className="instructor_expired">
-                            <h1>{findText('Dashboard')}</h1>
+                            <h1>{findText("Dashboard")}</h1>
                             <div className="instructor_expired_body">
                               <div className="instructor_expired_center">
                                 <img src={instructorImage} alt="" />
                                 <h4>
                                   {findText(
-                                    'You haven’t been added to an enterprise account yet',
+                                    "You haven’t been added to an enterprise account yet"
                                   )}
                                 </h4>
                                 <p>
                                   {findText(
-                                    'This account will be active once an enterprise assigns you as an instructor.',
+                                    "This account will be active once an enterprise assigns you as an instructor."
                                   )}
                                 </p>
                               </div>
@@ -678,13 +680,13 @@ const AppMainLayout = ({ children }) => {
                 {rightLayout && !coming && (
                   <RightLayout>
                     {rightComponent ??
-                      (activeAccountType === 'enterprise' ? (
+                      (activeAccountType === "enterprise" ? (
                         <EnterpriseRightBar
                           planState={planState}
                           affiliateAccount={affiliateAccount}
                           isPendingDelete={accountIsPendingDeletion}
                         />
-                      ) : activeAccountType === 'instructor' ? (
+                      ) : activeAccountType === "instructor" ? (
                         // <>
                         //   {affiliateAccount?.id ? (
                         //     <AffiliateRightBar
@@ -703,12 +705,12 @@ const AppMainLayout = ({ children }) => {
                             isPendingDelete={accountIsPendingDeletion}
                           />
                         )
-                      ) : activeAccountType === 'personal' ? (
+                      ) : activeAccountType === "personal" ? (
                         <PersonalRightBar
                           findText={findText}
                           onShowTest={setShowTest}
                         />
-                      ) : activeAccountType === 'developer' ? (
+                      ) : activeAccountType === "developer" ? (
                         <DeveloperBanner findText={findText} />
                       ) : (
                         <FallbackRightBar />

package/src/hooks/useTranslation.jsx

@@ -6,10 +6,11 @@ if (!window.translationCache) {
   window.translationCache = {};
 }
 
+const environment = window.location.hostname.includes("staging")
+  ? "learngual-bucket"
+  : "learngual-production";
 const CACHE_DURATION = 60 * 60 * 1000; // 1 hour in milliseconds
-const S3_BASE_URL = `https://learngual-bucket.sfo3.digitaloceanspaces.com/${
-  window.location.hostname.includes("staging") ? "" : "learngual-production/"
-}media/media/`;
+const S3_BASE_URL = `https://${environment}.sfo3.digitaloceanspaces.com/${environment}/media/media/`;
 
 const useTranslation = (initialSentences = []) => {
   const value = localStorage?.getItem("defaultLang");