l-min-components 1.7.1507 → 1.7.1509

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "l-min-components",
-  "version": "1.7.1507",
+  "version": "1.7.1509",
   "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,6 +383,50 @@ 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 - ONLY actual strings found
+    "Student",
+    "Instructor account",
+    "Enterprise account",
+    "Student account",
+    "Dashboard",
+    "Courses",
+    "My courses",
+    "Manage courses",
+    "Manage report",
+    "Manage teams",
+    "Manage student",
+    "Messages",
+    "Announcements",
+    "File manager",
+    "Library",
+    "Add on",
+    "Contracts",
+    "Demo",
+    "Explore",
+    "Connect",
+    "Select affiliate",
+    "Search affiliates",
+    "Affiliates",
+    "GRACE PERIOD",
+    "ACTIVE",
+    "Oops!",
+    "Select plans",
+    "Renew subscription",
+    "Instructor",
+    "Learngual logo",
+    "profile",
+    "account photo",
+    "Select Plans",
+    "Search by Name / Email / Username",
+    "Text",
+    "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 {
@@ -578,6 +621,7 @@ const AppMainLayout = ({ children }) => {
                             onChange={(v) => setAffiliateAccount(v)}
                             setSearch={setAffilitateSearch}
                             defaultAffiliate={getDefaultAffiliateData?.data}
+                            findText={findText}
                           />
                         </>
                       )}
@@ -608,6 +652,7 @@ const AppMainLayout = ({ children }) => {
                             gracePeriod={gracePeriod}
                             stateType={planState === "GRACE PERIOD" ? 1 : 2}
                             planState={planState}
+                            findText={findText}
                           />
                         ) : activeAccountType === "instructor" &&
                           !userPlanData?.loading &&
@@ -620,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/header/languages.js

@@ -7,11 +7,11 @@ export const languagesData = [
     flag: usFlag,
     slug: "en",
   },
-  // {
-  //   name: "Korean",
-  //   flag: koreanFlag,
-  //   slug: "ko",
-  // },
+  {
+    name: "Korean",
+    flag: koreanFlag,
+    slug: "ko",
+  },
 ];
 
 export const selectedLanguageData = {

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",

package/src/hooks/useTranslation.jsx

@@ -1,6 +1,15 @@
 import React, { useCallback, useContext, useEffect, useState } from "react";
 import useAxios from "axios-hooks";
 
+// Global cache for master translations
+if (!window.translationCache) {
+  window.translationCache = {};
+}
+
+const CACHE_DURATION = 60 * 60 * 1000; // 1 hour in milliseconds
+const S3_BASE_URL =
+  "https://learngual-bucket.sfo3.digitaloceanspaces.com/media/media/";
+
 const useTranslation = (initialSentences = []) => {
   const value = localStorage?.getItem("defaultLang");
 
@@ -14,7 +23,7 @@ const useTranslation = (initialSentences = []) => {
   }, [value]);
 
   const [defaultLang, setDefaultLang] = useState(value ?? "en");
-  const [translations, setTranslations] = useState({}); // returned translation from backend
+  const [translations, setTranslations] = useState({}); // returned translation from S3
   const [isTranslationsLoading, setIsTranslationsLoading] = useState(true);
 
   const findText = useCallback(
@@ -24,7 +33,7 @@ const useTranslation = (initialSentences = []) => {
     [translations]
   );
 
-  // api request for sending data to backend
+  // api request for sending data to backend (fire-and-forget)
   const [{ ...translateData }, translate] = useAxios(
     {
       method: "POST",
@@ -34,14 +43,17 @@ const useTranslation = (initialSentences = []) => {
     }
   );
 
-  const handleTranslate = async (language, words) => {
+  /**
+   * Send translation request to backend (fire-and-forget)
+   */
+  const sendTranslationRequestToBackend = async (language, words) => {
     try {
-      await translate({
+      // Fire-and-forget - don't await or use response
+      translate({
         url: `/iam/v1/utils/translate/`,
         data: {
           language,
           sentences: words,
-          // kwargs,
         },
         params: {
           _account: "",
@@ -51,38 +63,135 @@ const useTranslation = (initialSentences = []) => {
         },
       });
     } catch (err) {
-      console.log(err);
+      console.warn("Translation request failed:", err);
     }
   };
 
-  useEffect(() => {
-    handleTranslate(defaultLang, initialSentences);
-  }, [defaultLang]);
+  /**
+   * Fetch master translations from S3 with caching
+   */
+  const getMasterTranslationsWithCache = async () => {
+    const now = Date.now();
+    const cached = window.translationCache.master;
 
-  useEffect(() => {
-    if (translateData?.data) {
-      const newTranslations = {};
-      initialSentences.map((word, index) => {
-        newTranslations[word] = translateData?.data?.result[index];
+    // Check if cache is valid and not expired
+    if (cached && cached.data && cached.expires > now) {
+      return cached.data;
+    }
+
+    try {
+      // Fetch from S3 - master JSON contains all languages
+      const response = await fetch(
+        `${S3_BASE_URL}qFpINMa05DrgUgzO0PEboReejximpq2r3VL2AmFZAwIq6fTN3A.json`
+      );
+
+      if (!response.ok) {
+        throw new Error(`Failed to fetch translations: ${response.status}`);
+      }
+
+      const masterTranslations = await response.json();
+
+      console.log(masterTranslations, "MASTER");
+
+      // Cache in memory (single cache for all languages since JSON contains all)
+      window.translationCache.master = {
+        data: masterTranslations,
+        timestamp: now,
+        expires: now + CACHE_DURATION,
+      };
+
+      return masterTranslations;
+    } catch (error) {
+      console.error("Failed to fetch master translations:", error);
+
+      // Fallback to cached data if available (even if expired)
+      if (cached && cached.data) {
+        return cached.data;
+      }
+
+      throw error;
+    }
+  };
+
+  /**
+   * Extract relevant translations for specific texts
+   */
+  const extractRelevantTranslations = (masterTranslations, words, language) => {
+    const relevantTranslations = {};
+    const languageCode = language.toUpperCase(); // ko -> KO, fr -> FR
+
+    words.forEach((word) => {
+      if (masterTranslations[word] && masterTranslations[word][languageCode]) {
+        const translation = masterTranslations[word][languageCode];
+        // Only use translation if it's not empty
+        relevantTranslations[word] = translation.trim() || word;
+      } else {
+        // Return original text if translation not found
+        relevantTranslations[word] = word;
+      }
+    });
+
+    return relevantTranslations;
+  };
+
+  const handleTranslate = async (language, words) => {
+    if (!words || words.length === 0) {
+      setIsTranslationsLoading(false);
+      return;
+    }
+
+    try {
+      // Step 1: Fire-and-forget translation request to backend
+      sendTranslationRequestToBackend(language, words);
+
+      // Step 2: Get master translations (cached or fresh from S3)
+      const masterTranslations = await getMasterTranslationsWithCache();
+
+      // Step 3: Extract only the translations we need
+      const relevantTranslations = extractRelevantTranslations(
+        masterTranslations,
+        words,
+        language
+      );
+
+      // Step 4: Update state
+      setTranslations((prevTranslations) => ({
+        ...prevTranslations,
+        ...relevantTranslations,
+      }));
+
+      setIsTranslationsLoading(false);
+    } catch (error) {
+      console.error("Failed to load translations:", error);
+
+      // Fallback: return original texts
+      const fallbackTranslations = {};
+      words.forEach((word) => {
+        fallbackTranslations[word] = word;
       });
+
       setTranslations((prevTranslations) => ({
         ...prevTranslations,
-        ...newTranslations,
+        ...fallbackTranslations,
       }));
+
+      setIsTranslationsLoading(false);
     }
-  }, [translateData?.data]);
+  };
 
   useEffect(() => {
-    if (Object.keys(translations)?.length > 0) {
+    if (initialSentences && initialSentences.length > 0) {
+      handleTranslate(defaultLang, initialSentences);
+    } else {
       setIsTranslationsLoading(false);
     }
-  }, [translations]);
-  console.log("translateData", translateData);
+  }, [defaultLang]);
 
+  // Remove the old useEffect that processed translateData.data since we don't use API response anymore
   return {
     defaultLang,
     setDefaultLang,
-    translateData,
+    translateData, // Keep for backward compatibility (though not used anymore)
     handleTranslate,
     translations,
     findText,

package/src/utils/translation.js

@@ -1,6 +1,142 @@
 import { db } from "./db";
 import axios from "./axiosConfig";
 
+// Global cache for master translations
+if (!window.translationCache) {
+  window.translationCache = {};
+}
+
+const CACHE_DURATION = 60 * 60 * 1000; // 1 hour in milliseconds
+const S3_BASE_URL =
+  "https://learngual-bucket.sfo3.digitaloceanspaces.com/media/media/";
+
+/**
+ * Send translation request to backend (fire-and-forget)
+ */
+async function sendTranslationRequest(texts, kwargs, language) {
+  try {
+    axios({
+      url: "/iam/v1/utils/translate/",
+      method: "POST",
+      data: {
+        language,
+        sentences: texts,
+        kwargs,
+      },
+      params: {
+        _account: "",
+      },
+      authRequired: false,
+    });
+  } catch (error) {
+    // Fire-and-forget, ignore errors
+    console.warn("Translation request failed:", error);
+  }
+}
+
+/**
+ * Fetch master translations from S3 with caching
+ * Since the JSON contains all languages, we cache it once regardless of language
+ */
+async function getMasterTranslationsWithCache() {
+  const now = Date.now();
+  const cached = window.translationCache.master;
+
+  // Check if cache is valid and not expired
+  if (cached && cached.data && cached.expires > now) {
+    return cached.data;
+  }
+
+  try {
+    // Fetch from S3 - master JSON contains all languages
+    const response = await fetch(
+      `${S3_BASE_URL}qFpINMa05DrgUgzO0PEboReejximpq2r3VL2AmFZAwIq6fTN3A.json`
+    );
+
+    if (!response.ok) {
+      throw new Error(`Failed to fetch translations: ${response.status}`);
+    }
+
+    const masterTranslations = await response.json();
+
+    // Cache in memory (single cache for all languages since JSON contains all)
+    window.translationCache.master = {
+      data: masterTranslations,
+      timestamp: now,
+      expires: now + CACHE_DURATION,
+    };
+
+    console.log(masterTranslations, "master");
+
+    return masterTranslations;
+  } catch (error) {
+    console.error("Failed to fetch master translations:", error);
+
+    // Fallback to cached data if available (even if expired)
+    if (cached && cached.data) {
+      return cached.data;
+    }
+
+    throw error;
+  }
+}
+
+/**
+ * Extract relevant translations for specific texts
+ * Supports multiple languages: ko -> KO, fr -> FR, etc.
+ */
+function extractRelevantTranslations(masterTranslations, texts, language) {
+  const relevantTranslations = {};
+  const languageCode = language.toUpperCase(); // ko -> KO, fr -> FR
+
+  texts.forEach((text) => {
+    if (masterTranslations[text] && masterTranslations[text][languageCode]) {
+      const translation = masterTranslations[text][languageCode];
+      // Only use translation if it's not empty
+      relevantTranslations[text] = translation.trim() || text;
+    } else {
+      // Return original text if translation not found
+      relevantTranslations[text] = text;
+    }
+  });
+
+  return relevantTranslations;
+}
+
+/**
+ * Cache screen-specific translations in IndexedDB
+ */
+async function cacheScreenTranslations(translations, screenId, language) {
+  try {
+    const translationEntries = Object.keys(translations).map((key) => ({
+      key,
+      value: translations[key],
+      screenId,
+      updatedAt: new Date().toDateString(),
+    }));
+
+    await db[language].bulkPut(translationEntries);
+  } catch (error) {
+    console.error("Failed to cache translations:", error);
+  }
+}
+
+/**
+ * Get cached translations from IndexedDB as fallback
+ */
+async function getCachedTranslations(screenId, language) {
+  try {
+    const cached = await db[language].where({ screenId }).toArray();
+    return cached.reduce((acc, item) => {
+      acc[item.key] = item.value;
+      return acc;
+    }, {});
+  } catch (error) {
+    console.error("Failed to get cached translations:", error);
+    return {};
+  }
+}
+
 async function loadTranslations(language = "ko") {
   await new Promise((resolve) => {
     //check if loading else resolve
@@ -25,38 +161,42 @@ async function loadTranslations(language = "ko") {
    */
   const kwargList = await db.kwarg.where({ screenId }).toArray();
   const kwargs = kwargList.reduce((x, t) => ({ ...x, [t.key]: t.value }), {});
-  /**
-   * @type {{ data: {has_translated: boolean; result: string[]} }}
-   */
-  const res = await axios({
-    url: "/iam/v1/utils/translate/",
-    method: "POST",
-    data: {
-      language,
-      sentences: texts,
-      kwargs,
-    },
-    params: {
-      _account: "",
-    },
-    authRequired: false,
-  });
-  // build an object using texts as key and results from request as value
-  if (!res.data) return {}; // somehow data was not found
-  const translations = texts.reduce(
-    (x, y, z) => ({ ...x, [y]: res.data.result[z] }),
-    {}
-  );
-  db[language].bulkPut(
-    Object.keys(translations).map((x, i) => ({
-      key: texts[i],
-      value: translations[x],
-      screenId,
-      updatedAt: new Date().toDateString(),
-    }))
-  );
 
-  return translations;
+  // Step 1: Fire-and-forget translation request to backend
+  sendTranslationRequest(texts, kwargs, language);
+
+  try {
+    // Step 2: Get master translations (cached or fresh from S3)
+    const masterTranslations = await getMasterTranslationsWithCache();
+
+    // Step 3: Extract only the translations we need
+    const relevantTranslations = extractRelevantTranslations(
+      masterTranslations,
+      texts,
+      language
+    );
+
+    // Step 4: Cache the extracted translations in IndexedDB
+    await cacheScreenTranslations(relevantTranslations, screenId, language);
+
+    return relevantTranslations;
+  } catch (error) {
+    console.error("Failed to load translations:", error);
+
+    // Step 5: Fallback to cached translations from IndexedDB
+    const cachedTranslations = await getCachedTranslations(screenId, language);
+
+    // If we have cached translations, return them
+    if (Object.keys(cachedTranslations).length > 0) {
+      return cachedTranslations;
+    }
+
+    // Last resort: return original texts
+    return texts.reduce((acc, text) => {
+      acc[text] = text;
+      return acc;
+    }, {});
+  }
 }
 
 export function extractBracedText(text) {