l-min-components 1.0.747 → 1.0.753

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "l-min-components",
-  "version": "1.0.747",
+  "version": "1.0.753",
   "type": "module",
   "files": [
     "src/assets",
@@ -24,6 +24,7 @@
     "lottie-web": "^5.12.2",
     "moment": "^2.29.4",
     "npm": "^10.2.5",
+    "papaparse": "^5.4.1",
     "prop-types": "^15.8.1",
     "rc-pagination": "^4.0.4",
     "rc-progress": "^3.5.1",

package/src/components/AppMainLayout/index.jsx

@@ -28,6 +28,7 @@ import PersonalRightBar from "../fileRightBar/personalRightBar";
 import useHeader from "../header/getHeaderDetails";
 import GracePeriod from "../deactivated";
 import MobileLayout from "../mobileLayout";
+import useTranslation from "../../hooks/useTranslation";
 
 const AppMainLayout = () => {
   const [isOpen, setIsOpen] = useState(true);
@@ -152,141 +153,156 @@ const AppMainLayout = () => {
   const currentPlan = userPlanData?.data?.current_plan;
   const planState = userPlanData?.data?.state;
 
+  const { textSchema, setDefaultLang, findText } = useTranslation();
+  // console.log(findText());
   return (
-    <OutletContext.Provider
-      value={{
-        setRightComponent,
-        setRightLayout,
-        generalData,
-        setGeneralData,
-        coming,
-        hasLayoutBackgroundImage,
-        setHasLayoutBackgroundImage,
-        setSideMenuLayout,
-        activePage,
-        setActivePage,
-        studyTab,
-        setStudyTab,
-        page,
-        setPage,
-        selectedCourseId,
-        setSelectedCourseId,
-        centerLayoutStyle,
-        setCenterLayoutStyle,
-        // return true if instructor affiliates is Active
-        setHideAffilicates,
-        affiliatesActive,
-        accessToken,
-        envType,
-        newNotifications,
-        setNewNotifications,
-        notificationMarkReadData,
-        handleGetNotificationMarkRead,
-      }}
-    >
-      {/* display mobile layout on device width*/}
-      {deviceWidth < 1200 ? (
-        <MobileLayout />
-      ) : (
-      <Layout
-        coming={coming}
-        hasLayoutBackgroundImage={hasLayoutBackgroundImage}
+    textSchema && (
+      <OutletContext.Provider
+        value={{
+          textSchema,
+          findText,
+          setDefaultLang,
+          setRightComponent,
+          setRightLayout,
+          generalData,
+          setGeneralData,
+          coming,
+          hasLayoutBackgroundImage,
+          setHasLayoutBackgroundImage,
+          setSideMenuLayout,
+          activePage,
+          setActivePage,
+          studyTab,
+          setStudyTab,
+          page,
+          setPage,
+          selectedCourseId,
+          setSelectedCourseId,
+          centerLayoutStyle,
+          setCenterLayoutStyle,
+          // return true if instructor affiliates is Active
+          setHideAffilicates,
+          affiliatesActive,
+          accessToken,
+          envType,
+          newNotifications,
+          setNewNotifications,
+          notificationMarkReadData,
+          handleGetNotificationMarkRead,
+        }}
       >
-        <HeaderComponent setNewNotifications={setNewNotifications} />
-        <MainLayout coming={coming}>
-          <LeftLayout>
-            <SideBar routes={leftNavMenu} />
-            {!coming && (
-              <>
-                {sideMenuLayout && (
-                  <SideMenu
-                    user={user}
-                    routes={sideMenuOptions}
-                    affiliatesActive={affiliatesActive}
-                    userType={generalData?.selectedAccount?.type?.toLowerCase()}
-                    isOpen={isOpen}
-                    setIsOpen={setIsOpen}
-                    setRightComponent={setRightComponent}
-                    planState={planState}
-                  />
+        {/* display mobile layout on device width*/}
+        {deviceWidth < 1200 ? (
+          <MobileLayout />
+        ) : (
+          <Layout
+            coming={coming}
+            hasLayoutBackgroundImage={hasLayoutBackgroundImage}
+          >
+            <HeaderComponent setNewNotifications={setNewNotifications} />
+            <MainLayout coming={coming}>
+              <LeftLayout>
+                <SideBar routes={leftNavMenu} />
+                {!coming && (
+                  <>
+                    {sideMenuLayout && (
+                      <SideMenu
+                        user={user}
+                        routes={sideMenuOptions}
+                        affiliatesActive={affiliatesActive}
+                        userType={generalData?.selectedAccount?.type?.toLowerCase()}
+                        isOpen={isOpen}
+                        setIsOpen={setIsOpen}
+                        setRightComponent={setRightComponent}
+                        planState={planState}
+                      />
+                    )}
+                  </>
                 )}
-              </>
-            )}
-            {
-              // window.location.pathname.includes("enterprise")
-              //   ? "enterprise"
-              //   : window.location.pathname.includes("personal")
-              //   ? "personal"
-              //   : window.location.pathname.includes("instructor")
-              //   ? "instructor"
-              //   : window.location.pathname.includes("developer") ||
-              //     window.location.hostname.includes("developer")
-              //   ? "developer"
-              //   : "developer"
-            }
-          </LeftLayout>
-          <CenterLayout isOpen={isOpen} style={centerLayoutStyle}>
-            {window.location.pathname.includes("instructor") &&
-              !window.location.pathname.includes("enterprise") &&
-              !window.location.pathname.includes("manage-teams") &&
-              !hideAffilicates && (
-                <InstructorAccountSwitcher
-                  setAccountType={setAffiliatesActive}
-                />
-              )}
-
-            {window.location.pathname.includes("enterprise") &&
-            planState === "GRACE PERIOD" ? (
-              <GracePeriod
-                getCurrentSubscriptionData={getCurrentSubscriptionData}
-                handleCurrentSubscription={handleCurrentSubscription}
-                gracePeriod={gracePeriod}
-              />
-            ) : (
-              <Outlet />
-            )}
-          </CenterLayout>
+                {
+                  // window.location.pathname.includes("enterprise")
+                  //   ? "enterprise"
+                  //   : window.location.pathname.includes("personal")
+                  //   ? "personal"
+                  //   : window.location.pathname.includes("instructor")
+                  //   ? "instructor"
+                  //   : window.location.pathname.includes("developer") ||
+                  //     window.location.hostname.includes("developer")
+                  //   ? "developer"
+                  //   : "developer"
+                }
+              </LeftLayout>
+              <CenterLayout isOpen={isOpen} style={centerLayoutStyle}>
+                {window.location.pathname.includes("instructor") &&
+                  !window.location.pathname.includes("enterprise") &&
+                  !window.location.pathname.includes("manage-teams") &&
+                  !hideAffilicates && (
+                    <InstructorAccountSwitcher
+                      setAccountType={setAffiliatesActive}
+                    />
+                  )}
 
-          {rightLayout && !coming && (
-            <RightLayout>
-              {rightComponent ??
-                (window.location.pathname.includes("enterprise") &&
-                !window.location.pathname.includes("file-manager") ? (
-                  <EnterpriseRightBar
+                {window.location.pathname.includes("enterprise") &&
+                planState === "GRACE PERIOD" ? (
+                  <GracePeriod
+                    getCurrentSubscriptionData={getCurrentSubscriptionData}
+                    handleCurrentSubscription={handleCurrentSubscription}
                     gracePeriod={gracePeriod}
-                    setGracePeriod={setGracePeriod}
-                    planState={planState}
                   />
-                ) : window.location.pathname.includes("personal/dashboard") ? (
-                  <PersonalRightBar />
-                ) : window.location.pathname.includes("personal/addons") ? (
-                  <InstructorRightBar personal />
-                ) : window.location.pathname.includes("personal/courses") ? (
-                  <InstructorRightBar personal />
-                ) : window.location.pathname.includes(
-                    "personal/library/selectlanguage",
-                  ) ? (
-                  <InstructorRightBar personal />
-                ) : window.location.pathname.includes("personal/library") ? (
-                  <PersonalRightBar personalLibrary />
-                ) : window.location.pathname.includes("personal/reports") ? (
-                  <PersonalRightBar personalReport />
-                ) : window.location.pathname.includes("instructor") &&
-                  !window.location.pathname.includes("manage-teams") &&
-                  !window.location.pathname.includes("file-manager") ? (
-                  <InstructorRightBar />
-                ) : window.location.pathname.includes("developer") ? (
-                  <Banner />
                 ) : (
-                  <Banner />
-                ))}
-              {/* {rightComponent ?? <Banner />} */}
-            </RightLayout>
-          )}
-        </MainLayout>
-      </Layout>
-      )}
-    </OutletContext.Provider>
+                  <Outlet />
+                )}
+              </CenterLayout>
+
+              {rightLayout && !coming && (
+                <RightLayout>
+                  {rightComponent ??
+                    (window.location.pathname.includes("enterprise") &&
+                    !window.location.pathname.includes("file-manager") ? (
+                      <EnterpriseRightBar
+                        gracePeriod={gracePeriod}
+                        setGracePeriod={setGracePeriod}
+                        planState={planState}
+                      />
+                    ) : window.location.pathname.includes(
+                        "personal/dashboard"
+                      ) ? (
+                      <PersonalRightBar />
+                    ) : window.location.pathname.includes("personal/addons") ? (
+                      <InstructorRightBar personal />
+                    ) : window.location.pathname.includes(
+                        "personal/courses"
+                      ) ? (
+                      <InstructorRightBar personal />
+                    ) : window.location.pathname.includes(
+                        "personal/library/selectlanguage"
+                      ) ? (
+                      <InstructorRightBar personal />
+                    ) : window.location.pathname.includes(
+                        "personal/library"
+                      ) ? (
+                      <PersonalRightBar personalLibrary />
+                    ) : window.location.pathname.includes(
+                        "personal/reports"
+                      ) ? (
+                      <PersonalRightBar personalReport />
+                    ) : window.location.pathname.includes("instructor") &&
+                      !window.location.pathname.includes("manage-teams") &&
+                      !window.location.pathname.includes("file-manager") ? (
+                      <InstructorRightBar />
+                    ) : window.location.pathname.includes("developer") ? (
+                      <Banner />
+                    ) : (
+                      <Banner />
+                    ))}
+                  {/* {rightComponent ?? <Banner />} */}
+                </RightLayout>
+              )}
+            </MainLayout>
+          </Layout>
+        )}
+      </OutletContext.Provider>
+    )
   );
 };
 

package/src/components/header/index.jsx

@@ -61,7 +61,7 @@ const HeaderComponent = (props) => {
     handleGetNotification,
   } = useHeader();
   const { pathname } = useLocation();
-  const { setGeneralData, generalData, notificationMarkReadData } =
+  const { setGeneralData, generalData, notificationMarkReadData, findText } =
     useContext(OutletContext);
   const [selectedAccount, setSelectedAccount] = useState();
   const { setDefaultAccount, handleSetDefaultAccount } = useHeader();
@@ -158,25 +158,25 @@ const HeaderComponent = (props) => {
   // Checking for delete account
   useEffect(() => {
     if (userAccountsDetail?.data) {
-      const validAccounts = userAccountsDetail.data.results.filter(account => !account.pending_delete);
+      const validAccounts = userAccountsDetail.data.results.filter(
+        (account) => !account.pending_delete
+      );
 
-      if (generalData?.selectedAccount && generalData?.selectedAccount?.pending_delete) {
-        const nextValidAccount = validAccounts[0]; 
+      if (
+        generalData?.selectedAccount &&
+        generalData?.selectedAccount?.pending_delete
+      ) {
+        const nextValidAccount = validAccounts[0];
         if (nextValidAccount) {
           setSelectedAccount(nextValidAccount);
-        }  else {
-            // Fallback to personal account or some default setting
-            setSelectedAccount(personalAccountData[0]);
-          }
+        } else {
+          // Fallback to personal account or some default setting
+          setSelectedAccount(personalAccountData[0]);
+        }
       }
-  
     }
-  }, [
-    generalData?.selectedAccount,
-    userAccountsDetail?.data,
+  }, [generalData?.selectedAccount, userAccountsDetail?.data]);
 
-  ]);
-  
   const containerRef = useRef(null);
   const secondContainerRef = useRef(null);
   const acctDropdownContainerRef = useRef(null);
@@ -266,7 +266,7 @@ const HeaderComponent = (props) => {
     if (path.includes("duet")) return "Duet";
     if (path.includes("speech")) return "Speech";
     if (path.includes("dictionary")) return "Dictionary";
-    return "Learning";
+    return findText("Learning");
   };
 
   // websocket for notifications initialization
@@ -371,8 +371,7 @@ const HeaderComponent = (props) => {
         onClick={() => {
           setLanguageDropdown();
           setIsOpen();
-        }}
-      >
+        }}>
         <li>
           <a className={isHomePage() ? "active" : ""}>
             <BookIcon /> {getNavLinkLabel()}
@@ -397,9 +396,8 @@ const HeaderComponent = (props) => {
             className={
               window.location.pathname.includes("settings") ? "active" : ""
             }
-            style={{ cursor: "pointer" }}
-          >
-            <SettingIcon /> Settings
+            style={{ cursor: "pointer" }}>
+            <SettingIcon /> {findText("Settings")}
           </a>
         </li>
         <li>
@@ -412,14 +410,13 @@ const HeaderComponent = (props) => {
             className={
               window.location.pathname.includes("notifications") ? "active" : ""
             }
-            style={{ cursor: "pointer" }}
-          >
+            style={{ cursor: "pointer" }}>
             {unreadNotificationData?.data?.count > 0 ? (
               <NotificationIcon />
             ) : (
               <NotificationEmptyIcon />
             )}
-            Notifications
+            {findText("Notifications")}
           </a>
         </li>
       </Nav>
@@ -428,8 +425,7 @@ const HeaderComponent = (props) => {
         onClick={() => {
           setLanguageDropdown();
           setIsOpen();
-        }}
-      >
+        }}>
         <SearchInputGroup>
           <SearchIcon />
           <SearchInput
@@ -446,7 +442,7 @@ const HeaderComponent = (props) => {
           {searchResultOpen && (
             <div className="search-result-wrapper">
               <p>
-                Website <span>UIUX </span> Design
+                {/* Website <span>UIUX </span> Design */}
               </p>
             </div>
           )}
@@ -458,8 +454,7 @@ const HeaderComponent = (props) => {
             onClick={() => {
               setLanguageDropdown(!languageDropdown);
               setIsOpen();
-            }}
-          >
+            }}>
             <img src={usFlag} alt="" />
             <ArrowDownIcon />
           </div>
@@ -477,8 +472,7 @@ const HeaderComponent = (props) => {
               setIsOpen(!isOpen);
               setLanguageDropdown();
             }}
-            ref={secondContainerRef}
-          >
+            ref={secondContainerRef}>
             <div className="user-img-container">
               <img
                 src={selectedAccount?.profile_photo?.url || avatar}

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

@@ -719,9 +719,14 @@ export const LanguageDropdownContainer = styled.div`
       margin: 16px 0;
       display: flex;
       align-items: center;
+      cursor: pointer;
       span {
         margin-left: 8px;
       }
+
+      img {
+        width: 20px;
+      }
     }
   }
 `;

package/src/components/header/languageDropdown.jsx

@@ -4,6 +4,7 @@ import useHeader from "./getHeaderDetails";
 import { OutletContext } from "..";
 import { useLocation } from "react-router-dom";
 import usFlag from "../../assets/images/usFlag.png";
+import koreanFlag from "../../assets/images/koreaFlag.png";
 import { LanguageDropdownContainer } from "./index.styled";
 import { RiCloseCircleFill } from "react-icons/ri";
 import { HiSearch } from "react-icons/hi";
@@ -20,7 +21,8 @@ import { DebounceInput } from "react-debounce-input";
  *
  */
 const LanguageDropdown = ({ languageDropdown, setLanguageDropdown }) => {
-  const { setGeneralData, generalData } = useContext(OutletContext);
+  const { setGeneralData, generalData, setDefaultLang, findText } =
+    useContext(OutletContext);
   const [filteredData, setFilteredData] = useState([]);
   const [isSearch, setIsSearch] = useState(false);
   const containerRef = useRef(null);
@@ -29,8 +31,8 @@ const LanguageDropdown = ({ languageDropdown, setLanguageDropdown }) => {
 
   const handleFilter = (event) => {
     const searchWord = event.target.value;
-    const newFilter = sampleSuggestions.filter((item) => {
-      return item?.toLowerCase().includes(searchWord.toLowerCase());
+    const newFilter = languagesData.filter((item) => {
+      return item?.name?.toLowerCase().includes(searchWord.toLowerCase());
     });
     console.log("newFilter", newFilter);
     if (searchWord === "") {
@@ -60,10 +62,23 @@ const LanguageDropdown = ({ languageDropdown, setLanguageDropdown }) => {
     };
   }, [setLanguageDropdown]);
 
+  const languagesData = [
+    {
+      name: "English",
+      flag: usFlag,
+      slug: "en",
+    },
+    {
+      name: "Korean",
+      flag: koreanFlag,
+      slug: "ko",
+    },
+  ];
+
   return (
     <LanguageDropdownContainer ref={containerRef}>
       <div className="ldc_header">
-        <p className="ldc_title"> Whats your language</p>
+        <p className="ldc_title"> {findText("Whats your language")}</p>
         <span onClick={() => setLanguageDropdown(false)}>
           <RiCloseCircleFill />
         </span>
@@ -91,21 +106,31 @@ const LanguageDropdown = ({ languageDropdown, setLanguageDropdown }) => {
           filteredData?.map((item, index) => (
             <p
               className="language_dropdown_item"
-              onClick={() => setLanguageDropdown()}
+              onClick={() => {
+                setLanguageDropdown();
+                setDefaultLang(item?.slug);
+                localStorage.setItem("defaultLang", item?.slug);
+              }}
             >
-              <img src={usFlag} alt="" /> <span>{item}</span>
+              <img src={item?.flag} alt="" /> <span>{item?.name}</span>
             </p>
           ))}
 
         {!isSearch && (
           <>
-            
-            <p
-              className="language_dropdown_item"
-              onClick={() => setLanguageDropdown()}
-            >
-              <img src={usFlag} alt="" /> <span>English</span>
-            </p>
+            {languagesData?.map((item, idx) => (
+              <p
+                className="language_dropdown_item"
+                onClick={() => {
+                  setLanguageDropdown();
+                  setDefaultLang(item?.slug);
+                  localStorage.setItem("defaultLang", item?.slug);
+                }}
+              >
+                <img src={item?.flag} alt="" />{" "}
+                <span>{findText(`${item?.name}`)}</span>
+              </p>
+            ))}
           </>
         )}
       </div>

package/src/components/header/login-header.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, useCallback } from "react";
+import React, { useState, useEffect, useRef, useCallback, useContext } from "react";
 import ReactFlagsSelect from "react-flags-select";
 import logo from "./assets/images/logo.png";
 import { Navbar2, NavGroup2, Nav2, CountryFlagGroup2 } from "./index.styled";
@@ -6,6 +6,7 @@ import { ArrowDownIcon } from "./assets/svg/arrow-down";
 import ButtonComponent from "../button";
 import { useLocation, useNavigate } from "react-router-dom";
 import usFlag from "../../assets/images/usFlag.png";
+import { OutletContext } from "..";
 
 /**
  * @param {{
@@ -17,6 +18,8 @@ import usFlag from "../../assets/images/usFlag.png";
  *
  */
 const HeaderComponentTwo = (props) => {
+  const { setGeneralData, generalData, setDefaultLang, findText } =
+  useContext(OutletContext);
   const [selected, setSelected] = useState("ES");
   const [isOpen, setIsOpen] = useState(false);
   const [searchResultOpen, setSearchResultOpen] = useState(false);
@@ -38,7 +41,7 @@ const HeaderComponentTwo = (props) => {
   const containerRef = useRef(null);
 
   const handleLogoClick = () => {
-    window.location.href = 'https://learngual.com/';
+    window.location.href = "https://learngual.com/";
   };
 
   useEffect(() => {
@@ -57,6 +60,19 @@ const HeaderComponentTwo = (props) => {
       document.removeEventListener("click", handleClickOutside);
     };
   }, [setLanguageDropdown]);
+
+  const languagesData = [
+    {
+      name: "English",
+      flag: usFlag,
+      slug: "en",
+    },
+    {
+      name: "Korean",
+      flag: koreanFlag,
+      slug: "ko",
+    },
+  ];
   return (
     <Navbar2
       onClick={() => {
@@ -92,9 +108,17 @@ const HeaderComponentTwo = (props) => {
           </div>
           {languageDropdown && (
             <ul className="dropdown_list" ref={containerRef}>
-              <li onClick={() => setLanguageDropdown()}>
-                <img src={usFlag} alt="" /> <span>English</span>
-              </li>
+              {languagesData?.map((item, idx) => (
+                <li
+                  onClick={() => {
+                    setLanguageDropdown();
+                    setDefaultLang(item?.slug);
+                    localStorage.setItem("defaultLang", item?.slug);
+                  }}
+                >
+                  <img src={item?.flag} alt="" /> <span>{item?.name}</span>
+                </li>
+              ))}
             </ul>
           )}
         </div>

package/src/hooks/useTranslation.jsx

@@ -0,0 +1,24 @@
+import { useCallback, useEffect, useState } from "react";
+import loadTranslations from "./utils/translation";
+
+const useTranslation = () => {
+  const value = localStorage.getItem("defaultLang");
+  const [textSchema, setTextSchema] = useState(null);
+
+  const [defaultLang, setDefaultLang] = useState(value || "en");
+  const findText = useCallback((str) => textSchema[str] ?? str, [textSchema]);
+
+  useEffect(() => {
+    loadTranslations(undefined, defaultLang).then((res) => setTextSchema(res));
+  }, [defaultLang]);
+
+  return {
+    textSchema,
+    setTextSchema,
+    setDefaultLang,
+    defaultLang,
+    findText,
+  };
+};
+
+export default useTranslation;

package/src/hooks/utils/translation.js

@@ -0,0 +1,65 @@
+// import Tabletop from "tabletop";
+import Papa from "papaparse";
+
+/**
+ * Loads translation data from a Google Sheet URL into a structured object.
+ *
+ * @param {string} sheetUrl - The URL of the published Google Sheet.
+ * @param {string[]} languages - Array of language codes (e.g., ['es', 'fr']) to include in the result.
+ * @returns {Promise<Object>} A Promise that resolves to an object with English keys and translated values.
+ */
+
+const protoUrl =
+  "https://docs.google.com/spreadsheets/d/e/2PACX-1vSvUIA_1eqpANaRTXafwYkh0y7ZYfbgvlHeLNjti21yjdtJjy6Fjk7pAuQjODROqT3uALC2Aq_odZy4/pub?gid=0&single=true&output=csv";
+
+async function loadTranslations(sheetUrl = protoUrl, language = "") {
+  try {
+    // 1. Fetch data from the Google Sheet
+    const response = await fetch(sheetUrl);
+
+    // Check if the request was successful
+    if (!response.ok) {
+      throw new Error(
+        `Failed to fetch from Google Sheet: ${response.status} ${response.statusText}`
+      );
+    }
+
+    const csvData = await response.text();
+
+    // 2. Parse CSV data (handling quoted fields with commas)
+    const parseResult = Papa.parse(csvData, { header: true });
+
+    // Check for parsing errors
+    if (parseResult.errors.length > 0) {
+      throw new Error(`Failed to parse CSV data: ${parseResult.errors}`);
+    }
+
+    const rows = parseResult.data;
+
+    // 3. Identify the English column and language columns
+    const headers = Object.keys(rows[0]);
+
+    const englishColumnIndex = headers.indexOf("en"); // Using 'en' instead of 'English' based on your feedback
+
+    // Ensure English column exists
+    if (englishColumnIndex === -1) {
+      throw new Error("English column not found in Google Sheet");
+    }
+
+    // if language exists
+    if (!headers.includes(language))
+      throw new Error(language.concat(" translation not found"));
+
+    const translations = {};
+    for (let row of rows) {
+      translations[row.en.trim().replace(/\r\n|\r/g, "\n")] = row[language];
+    }
+    return translations;
+  } catch (error) {
+    console.error("Error loading translations:", error);
+    return {};
+    // throw error; // Rethrow for handling elsewhere
+  }
+}
+
+export default loadTranslations;