l-min-components 1.7.1508 → 1.7.1510

package/package.json

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

package/src/components/AppMainLayout/index.jsx

@@ -170,10 +170,10 @@ const AppMainLayout = ({ children }) => {
     user,
     userDetails,
     handleGetFileStorageSummary,
-    getFileStorageSummaryData,
+    // getFileStorageSummaryData,
   } = useHeader({ default: true });
 
-  // get current default account and store in cookie (from api);
+  // Get current default account and store in cookie (from api);
   useEffect(() => {
     if (getDefaultAccount?.data) {
       const date = new Date();
@@ -197,6 +197,16 @@ const AppMainLayout = ({ children }) => {
 
       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 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";
+      }
+
       // set default acct when you receive the default acct data
       handleSetDefaultAccount(getDefaultAccount?.data?.id);
 
@@ -237,7 +247,6 @@ const AppMainLayout = ({ children }) => {
           // Use setTimeout to ensure navigation happens after React Router is ready
           setTimeout(() => {
             const targetUrl = `/${defaultAccountType}`;
-            console.log(`Navigating to: ${targetUrl}`);
 
             // Try using window.location.replace for staging compatibility
             if (window.location.hostname.includes("staging")) {
@@ -245,7 +254,7 @@ const AppMainLayout = ({ children }) => {
             } else {
               window.location.href = targetUrl;
             }
-          }, 100);
+          }, 1000);
         }
       }
     }
@@ -311,16 +320,6 @@ const AppMainLayout = ({ children }) => {
     handleGetDefaultAccount();
   }, [defaultAcct]);
 
-  // Debug the API response
-  useEffect(() => {
-    console.log("getDefaultAccount state changed:", {
-      data: getDefaultAccount?.data,
-      loading: getDefaultAccount?.loading,
-      error: getDefaultAccount?.error,
-      response: getDefaultAccount?.response,
-    });
-  }, [getDefaultAccount]);
-
   // setting current environment type
   useEffect(() => {
     if (window.location.hostname.includes("staging")) {
@@ -384,12 +383,12 @@ const AppMainLayout = ({ children }) => {
     "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
+
+    // Additional text from codebase analysis - ONLY actual strings found
     "Student",
     "Instructor account",
     "Enterprise account",
     "Student account",
-    "Personal Account",
     "Dashboard",
     "Courses",
     "My courses",
@@ -406,188 +405,28 @@ const AppMainLayout = ({ children }) => {
     "Demo",
     "Explore",
     "Connect",
-    "Log out",
+    "Select affiliate",
+    "Search affiliates",
+    "Affiliates",
+    "GRACE PERIOD",
+    "ACTIVE",
+    "Oops!",
+    "Select plans",
+    "Renew subscription",
+    "Instructor",
+    "Learngual logo",
     "profile",
     "account photo",
-    "Active",
-    "Expired",
-    "Pending",
-    "Loading",
-    "Error",
-    "Success",
-    "Warning",
-    "Info",
-    "Confirm",
-    "Yes",
-    "No",
-    "OK",
-    "Cancel",
-    "Continue",
-    "Back",
-    "Next",
-    "Submit",
-    "Close",
-    "Open",
-    "View",
-    "Edit",
-    "Delete",
-    "Save",
-    "Create",
-    "Update",
-    "Name",
-    "Email",
-    "Password",
-    "Username",
-    "Login",
-    "Logout",
-    "Register",
-    "Signup",
-    "Signin",
-    "User",
-    "Admin",
-    "Account",
-    "Profile",
-    "Preferences",
-    "Configuration",
-    "Options",
-    "Language",
-    "Translation",
+    "Select Plans",
+    "Search by Name / Email / Username",
     "Text",
-    "File",
-    "Document",
-    "Folder",
-    "Upload",
-    "Download",
-    "Share",
-    "Copy",
-    "Move",
-    "Rename",
-    "Filter",
-    "Sort",
-    "Search",
-    "Results",
-    "Total",
-    "Count",
-    "Date",
-    "Time",
-    "Status",
-    "Type",
-    "Category",
-    "Priority",
-    "Level",
-    "Progress",
-    "Score",
-    "Grade",
-    "Free",
-    "Premium",
-    "Basic",
-    "Advanced",
-    "Pro",
-    "Enterprise",
-    "Personal",
-    "Public",
-    "Private",
-    "Online",
-    "Offline",
-    "Available",
-    "Unavailable",
-    "Enabled",
-    "Disabled",
-    "Required",
-    "Optional",
-    "Popular",
-    "Featured",
-    "Latest",
-    "Recent",
-    "New",
-    "Updated",
-    "Completed",
-    "In Progress",
-    "Approved",
-    "Rejected",
-    "Cancelled",
-    "Scheduled",
-    "Valid",
-    "Invalid",
-    "Correct",
-    "Incorrect",
-    "Start",
-    "Stop",
-    "Play",
-    "Pause",
-    "Resume",
-    "Record",
-    "Volume",
-    "Speed",
-    "Quality",
-    "Size",
-    "Format",
-    "Original",
-    "Source",
-    "Target",
-    "Input",
-    "Output",
-    "Audio",
-    "Video",
-    "Image",
-    "Button",
-    "Menu",
-    "Page",
-    "Section",
-    "Header",
-    "Footer",
-    "Content",
-    "Navigation",
-    "List",
-    "Table",
-    "Row",
-    "Column",
-    "Field",
-    "Value",
-    "Option",
-    "Selection",
-    "Modal",
-    "Dialog",
-    "Alert",
-    "Notification",
-    "Message",
-    "Card",
-    "Item",
-    "Entry",
-    "Record",
-    "Data",
-    "Information",
-    "Details",
-    "Summary",
-    "Overview",
-    "Preview",
-    "Icon",
-    "Avatar",
-    "Theme",
-    "Style",
-    "Color",
-    "Font",
-    "Mobile",
-    "Desktop",
-    "Tablet",
-    "Device",
-    "Browser",
-    "Application",
-    "System",
-    "Network",
-    "Internet",
-    "Connection",
-    "Server",
-    "Database",
-    "Storage",
-    "Session",
-    "Token",
-    "Key",
-    "Permission",
-    "Role",
-    "Member",
-    "Customer",
-    "Visitor",
+    "add",
+    "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.",
   ];
 
   const {
@@ -782,6 +621,7 @@ const AppMainLayout = ({ children }) => {
                             onChange={(v) => setAffiliateAccount(v)}
                             setSearch={setAffilitateSearch}
                             defaultAffiliate={getDefaultAffiliateData?.data}
+                            findText={findText}
                           />
                         </>
                       )}
@@ -812,6 +652,7 @@ const AppMainLayout = ({ children }) => {
                             gracePeriod={gracePeriod}
                             stateType={planState === "GRACE PERIOD" ? 1 : 2}
                             planState={planState}
+                            findText={findText}
                           />
                         ) : activeAccountType === "instructor" &&
                           !userPlanData?.loading &&
@@ -824,17 +665,19 @@ const AppMainLayout = ({ children }) => {
                           !getAllAffiliateData?.loading &&
                           !window.location.pathname.includes("notif") ? (
                           <div className="instructor_expired">
-                            <h1>Dashboard</h1>
+                            <h1>{findText("Dashboard")}</h1>
                             <div className="instructor_expired_body">
                               <div className="instructor_expired_center">
                                 <img src={instructorImage} alt="" />
                                 <h4>
-                                  You haven’t been added to an enterprise
-                                  account yet
+                                  {findText(
+                                    "You haven’t been added to an enterprise account yet"
+                                  )}
                                 </h4>
                                 <p>
-                                  This account will be active once an enterprise
-                                  assigns you as an instructor.
+                                  {findText(
+                                    "This account will be active once an enterprise assigns you as an instructor."
+                                  )}
                                 </p>
                               </div>
                             </div>

package/src/components/deactivated/index.jsx

@@ -22,6 +22,7 @@ const GracePeriod = ({
   handleCurrentSubscription,
   gracePeriod,
   stateType,
+  findText,
 }) => {
   console.log("🚀 ~ gracePeriod:", gracePeriod);
   const location = useLocation();
@@ -80,7 +81,7 @@ const GracePeriod = ({
 
   return (
     <GracePeriodWrapper>
-      <h1>{pageTitle}</h1>
+      <h1>{findText(pageTitle)}</h1>
       {stateType === 1 ? (
         <div
           className="grace_period_body"
@@ -94,26 +95,26 @@ const GracePeriod = ({
           }}
         >
           <img src={warning} alt="" />
-          <h2>Your subscription to Learngual has expired</h2>
-          <p>
-            Your students and instructors will no longer <br />
-            be able to access your courses after <br />
-            <span
-              style={{
-                fontWeight: 700,
-                color: "red",
-              }}
-            >
-              {timeLeft}{" "}
-            </span>
-          </p>
+          <h2>{findText("Your subscription to Learngual has expired")}</h2>
+          <p
+            dangerouslySetInnerHTML={{
+              __html: findText(
+                "Your students and instructors will no longer {br1} be able to access your courses after {br2} {span}",
+                {
+                  br1: `<br>`,
+                  br2: `<br>`,
+                  span: `<span style="fontWeight: 700; color: red;">${timeLeft}</span>`,
+                }
+              ),
+            }}
+          ></p>
           <div
             onClick={() => {
               window.location.href = "/settings/payment";
             }}
           >
             <Button
-              text="Renew subscription"
+              text={findText("Renew subscription")}
               styles={{
                 height: "35px",
                 padding: "4px 20px",
@@ -125,10 +126,11 @@ const GracePeriod = ({
       ) : (
         <>
           <Expire>
-            <h4>Your subscription has expired</h4>
+            <h4>{findText("Your subscription has expired")}</h4>
             <h5>
-              You don’t have an active plan, renew your subscription to gain
-              full access to your account.
+              {findText(
+                "You don’t have an active plan, renew your subscription to gain full access to your account."
+              )}
             </h5>
 
             <div
@@ -137,7 +139,7 @@ const GracePeriod = ({
               }}
             >
               <Button
-                text="Choose plan"
+                text={findText("Choose plan")}
                 styles={{
                   height: "35px",
                   padding: "4px 20px",
@@ -155,7 +157,7 @@ const GracePeriod = ({
               }}
             />
             <div className="content">
-              <p>Sorry, you can’t access your account</p>
+              <p>{findText("Sorry, you can’t access your account")}</p>
             </div>
           </div>
         </>

package/src/components/deactivated/modal/subscription-expired-modal.jsx

@@ -75,10 +75,6 @@ const SubscriptionExpiredModal = ({
   //   };
   // }, []);
 
-  const noSubError = () => {
-    toast.error("Error getting your subscription, please try again!");
-  };
-
   const subId = getCurrentSubscriptionData?.data?.id;
 
   const handleNavigateRenewal = () => {

package/src/components/errorPage/index.jsx

@@ -22,8 +22,8 @@ const Index = () => {
             <h3>Opss...</h3>
             <h2>Page not found</h2>
             <p>
-              Seems we can't find the page your looking for. Let's
-              get you back home.
+              Seems we can't find the page your looking for. Let's get you back
+              home.
             </p>
             <ButtonComponent
               text="Go Back"

package/src/components/getErrorFeatures/errorWrapper.jsx

@@ -3,9 +3,10 @@ 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";
+import useTranslation from "../../hooks/useTranslation";
+import FullPageLoader from "../fullPageLoader";
 
 const ErrorWrapper = ({
   title = "Oops!",
@@ -31,7 +32,21 @@ const ErrorWrapper = ({
       navigate(fallbackPath || "/", { reload: true });
     }
   };
-  return (
+
+  const wordBank = [
+    "Opss...",
+    "Page not found",
+    "Seems we can't find the page your looking for. Let's get you back home.",
+    "Go Back",
+    "There was an error",
+  ];
+
+  const { findText, translations, isTranslationsLoading } =
+    useTranslation(wordBank);
+
+  return isTranslationsLoading && Object.keys(translations)?.length === 0 ? (
+    <FullPageLoader hasBackground fixed={true} />
+  ) : (
     <Container>
       <Navbar>
         <a href="/">
@@ -40,13 +55,13 @@ const ErrorWrapper = ({
       </Navbar>
       <Content>
         <LeftDiv>
-          <h1>{title}</h1>
+          <h1>{findText(title)}</h1>
           <div>
-            {subTitle && <h2>{subTitle}</h2>}
-            {message && <p>{message}</p>}
+            {subTitle && <h2>{findText(subTitle)}</h2>}
+            {message && <p>{findText(message)}</p>}
           </div>
 
-          <button onClick={handleNav}>{btnText}</button>
+          <button onClick={handleNav}>{findText(btnText)}</button>
         </LeftDiv>
         <ImageBox>
           <img src={bgSrc || bg} alt="" />

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

@@ -183,7 +183,9 @@ const AccountDropdown = (props) => {
           <>
             {props?.instructorAccountData?.length > 0 && (
               <div>
-                <h3 style={{ marginBottom: 10 }}>Instructor account</h3>
+                <h3 style={{ marginBottom: 10 }}>
+                  {props.findText("Instructor account")}
+                </h3>
                 {props?.instructorAccountData?.map((instructorItem, idx) => {
                   console.log("account>>", instructorItem);
                   return (
@@ -233,7 +235,9 @@ const AccountDropdown = (props) => {
             )}
             {props?.enterpriseAccountData?.length > 0 && (
               <div>
-                <h3 style={{ marginBottom: 10 }}>Enterprise account</h3>
+                <h3 style={{ marginBottom: 10 }}>
+                  {props?.findText("Enterprise account")}
+                </h3>
                 {props?.enterpriseAccountData?.map((enterpriseItem, idx) => (
                   <div
                     className={`account-info ${
@@ -279,7 +283,9 @@ const AccountDropdown = (props) => {
               // dont show personal accounts for developer user
               props?.personalAccountData?.length > 0 && (
                 <div>
-                  <h3 style={{ marginBottom: 10 }}>Student account</h3>
+                  <h3 style={{ marginBottom: 10 }}>
+                    {props?.findText("Student account")}
+                  </h3>
                   {props?.personalAccountData?.map((personalItem, idx) => (
                     <div
                       className={`account-info ${
@@ -329,7 +335,10 @@ const AccountDropdown = (props) => {
         <AccountDropdownFooter>
           <button
             onClick={() => {
-              window.location.href = "/auth/account-type";
+              window.location.hostname?.includes("coming")
+                ? (window.location.href =
+                    "https://learngual.com/auth/account-type")
+                : (window.location.href = "/auth/account-type");
             }}
             style={{ cursor: "pointer" }}
           >

package/src/components/header/index.jsx

@@ -552,8 +552,10 @@ const HeaderComponent = (props) => {
               <h5 style={{ textTransform: "capitalize" }}>{accountName}</h5>
               <h6 style={{ textTransform: "capitalize" }}>
                 {props?.selectedAccount?.type?.toLowerCase() === "personal"
-                  ? "Student"
-                  : props?.selectedAccount?.type?.toLowerCase()}
+                  ? props?.findText("Student")
+                  : props?.findText(
+                      props?.selectedAccount?.type?.toLowerCase()
+                    )}
               </h6>
             </div>
             <ArrowDownIcon width={16} height={10} />

package/src/components/instructorAccountSwitcher/components/renew modal/index.jsx

@@ -33,11 +33,11 @@ const RenewModal = ({
           <BtnGroup>
             <Button
               type="secondary"
-              text={btn1Text || "Select Plans"}
+              text={btn1Text || "Select plans"}
               onClick={btn1onClick}
             />
             <Button
-              text={btn2Text || "Renew Subscription"}
+              text={btn2Text || "Renew subscription"}
               onClick={btn2onClick}
             />
           </BtnGroup>

package/src/components/instructorAccountSwitcher/index.jsx

@@ -17,6 +17,7 @@ const InstructorAccountSwitcher = ({
   affiliateList,
   setSearch,
   defaultAffiliate,
+  findText,
 }) => {
   // const [expiryFlow, setExpiryFlow] = useState();
   const [switchValue, setSwitchValue] = useState("affiliates");
@@ -169,7 +170,7 @@ const InstructorAccountSwitcher = ({
                     className="placeholder"
                     onClick={() => setDropdown(!dropdown)}
                   >
-                    <p>Select affiliate</p>
+                    <p>{findText("Select affiliate")}</p>
                     <ArrowDown />
                   </div>
                 ) : (
@@ -189,7 +190,7 @@ const InstructorAccountSwitcher = ({
                   <AffiliatesDropDownWrapper>
                     <div className="search_wrapper">
                       <Search
-                        placeholder="Search Affiliates"
+                        placeholder={findText("Search affiliates")}
                         onSubmit={setSearch}
                       />
                     </div>
@@ -205,7 +206,9 @@ const InstructorAccountSwitcher = ({
                             <img src={item?.image} alt="" />
                             <p>{item?.name}</p>
                           </div>
-                          {item.count ? <span>{item.count}</span> : null}
+                          {item.count ? (
+                            <span>{findText(item.count)}</span>
+                          ) : null}
                         </li>
                       ))}
                     </ul>
@@ -222,7 +225,7 @@ const InstructorAccountSwitcher = ({
                 className={switchValue !== "affiliates" ? "active" : ""}
                 onClick={() => handleSwitch(1)}
               >
-                <span>Personal</span>
+                <span>{findText("Personal")}</span>
                 <span className="circle"></span>
               </button>
             )}
@@ -230,7 +233,7 @@ const InstructorAccountSwitcher = ({
               className={switchValue === "affiliates" ? "active" : ""}
               onClick={() => handleSwitch(2)}
             >
-              <span>Affiliates</span>
+              <span>{findText("Affiliates")}</span>
               <span className="circle"></span>
             </button>
           </div>

package/src/hooks/adminSideMenuItems.jsx

@@ -23,7 +23,10 @@ import {
   AccountsIconActive,
 } from "../assets/adminSvg/accountsIcon";
 import { ManagersIcon, ManagersIconActive } from "../assets/adminSvg/managers";
-import { RequestsIcon, RequestsIconActive } from "../assets/adminSvg/requestsIcon";
+import {
+  RequestsIcon,
+  RequestsIconActive,
+} from "../assets/adminSvg/requestsIcon";
 
 export const adminSideMenuOptions = [
   {
@@ -139,25 +142,25 @@ export const adminSideMenuOptions = [
             path: "/personal-account",
             hasNotification: false,
             notifications: null,
-            text: "Personal Account",
+            text: "Personal account",
           },
           {
             path: "/instructor-account",
             hasNotification: false,
             notifications: null,
-            text: "Instructor Account",
+            text: "Instructor account",
           },
           {
             path: "/enterprise-account",
             hasNotification: false,
             notifications: null,
-            text: "Enterprise Account",
+            text: "Enterprise account",
           },
           {
             path: "/developer-account",
             hasNotification: false,
             notifications: null,
-            text: "Developer Account",
+            text: "Developer account",
           },
         ],
       },
@@ -220,7 +223,7 @@ export const adminSideMenuOptions = [
         path: "/all-users",
         icon: <UsersIcon />,
         iconActive: <UsersIconActive />,
-        text: "All Users",
+        text: "All users",
         hasNotification: false,
         hasDropdown: false,
         notifications: null,
@@ -229,7 +232,7 @@ export const adminSideMenuOptions = [
     ],
   },
   {
-    optionType: "Dev. Management",
+    optionType: "Dev. management",
     routes: [
       {
         path: "/accounts",