l-min-components 1.0.828 → 1.0.831

package/package.json

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

package/src/components/header/getHeaderDetails.js

@@ -11,6 +11,30 @@ const useHeader = () => {
     });
   };
 
+  const [{ ...retrieveUserDetailsData }, retrieveUserDetails] = useAxios();
+
+  const handleRetrieveUserDetails = async (data) => {
+    await retrieveUserDetails({
+      method: "patch",
+      url: "/iam/v1/users/me/",
+      data: {
+        ...data,
+      },
+    });
+  };
+
+  const [{ ...updateUserAccountData }, updateUserAccount] = useAxios();
+
+  const handleUpdateUserAccount = async (id, data) => {
+    await updateUserAccount({
+      method: "patch",
+      url: `/iam/v1/accounts/${id}/`,
+      data: {
+        ...data,
+      },
+    });
+  };
+
   // get user accounts detail
 
   const [{ ...userAccountsDetail }, getUserAccountsDetail] = useAxios();
@@ -216,6 +240,10 @@ const useHeader = () => {
     handleGetUserPlan,
     getCurrentSubscriptionData,
     handleCurrentSubscription,
+    retrieveUserDetailsData,
+    handleRetrieveUserDetails,
+    updateUserAccountData,
+    handleUpdateUserAccount
   };
 };
 export default useHeader;

package/src/components/header/index.jsx

@@ -29,6 +29,7 @@ import usFlag from "../../assets/images/usFlag.png";
 import LanguageDropdown from "./languageDropdown";
 import { getCookie } from "./getCookies";
 import { data } from "../GraphMap/data";
+import { languagesData } from "./languages";
 /**
  * @param {{
  *  type: string,
@@ -59,6 +60,10 @@ const HeaderComponent = (props) => {
     handleGeneralNotificationCount,
     notificationData,
     handleGetNotification,
+    retrieveUserDetailsData,
+    handleRetrieveUserDetails,
+    updateUserAccountData,
+    handleUpdateUserAccount
   } = useHeader();
   const { pathname } = useLocation();
   const {
@@ -69,6 +74,7 @@ const HeaderComponent = (props) => {
     defaultLang,
     isLoading,
     setIsLoading,
+    setDefaultLang
   } = useContext(OutletContext);
   const [selectedAccount, setSelectedAccount] = useState();
   const { setDefaultAccount, handleSetDefaultAccount } = useHeader();
@@ -382,8 +388,17 @@ const HeaderComponent = (props) => {
     handleGetUnreadNotification();
     handleGeneralNotificationCount();
   }, [notificationMarkReadData?.response]);
+
+  useEffect(() => {
+    if (generalData?.defaultAccount?.language) {
+      setDefaultLang(generalData?.defaultAccount?.language); 
+    }
+  }, [generalData]);
+
+  
   const value = JSON?.parse(localStorage.getItem("defaultLang"));
   const currentFlag = value?.flag;
+  const selectedLanguage = languagesData.find((lang) => lang?.slug === defaultLang);
   //console.log("defaultLang", defaultLang);
 
   // When Developer and on staging
@@ -489,7 +504,7 @@ const HeaderComponent = (props) => {
               setIsOpen();
             }}
           >
-            <img src={currentFlag || usFlag} alt="" />
+            <img src={selectedLanguage?.flag || currentFlag || usFlag} alt="" />
             <ArrowDownIcon />
           </div>
           {languageDropdown && (

package/src/components/header/languageDropdown.jsx

@@ -30,6 +30,13 @@ const LanguageDropdown = ({ languageDropdown, setLanguageDropdown }) => {
     isLoading,
     setIsLoading,
   } = useContext(OutletContext);
+  const {
+    retrieveUserDetailsData,
+    handleRetrieveUserDetails,
+    updateUserAccountData,
+    handleUpdateUserAccount,
+  } = useHeader();
+
   const languagesData = [
     {
       name: "English",
@@ -139,10 +146,18 @@ const LanguageDropdown = ({ languageDropdown, setLanguageDropdown }) => {
                     ? setIsLoading(false)
                     : setIsLoading(true);
                   localStorage.setItem("defaultLang", JSON.stringify(item));
+                  if (generalData?.defaultAccount?.id) {
+                    handleUpdateUserAccount(generalData?.defaultAccount?.id, {
+                      ...generalData?.selectedAccount?.metadata,
+                      language: item?.slug,
+                    });
+                    handleRetrieveUserDetails({
+                      language: item?.slug,
+                    });
+                  }
                 }}
               >
-                <img src={item?.flag} alt="" />{" "}
-                <span>{findText(item?.name)}</span>
+                <img src={item?.flag} alt="" /> <span>{item?.name}</span>
               </p>
             ))}
           </>

package/src/components/header/languages.js

@@ -0,0 +1,15 @@
+import usFlag from "../../assets/images/usFlag.png";
+import koreanFlag from "../../assets/images/koreaFlag.png";
+
+export const languagesData = [
+    {
+      name: "English",
+      flag: usFlag,
+      slug: "en",
+    },
+    {
+      name: "Korean",
+      flag: koreanFlag,
+      slug: "ko",
+    },
+  ];

package/src/hooks/useTranslation.jsx

@@ -1,15 +1,23 @@
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useContext, useEffect, useState } from "react";
 import loadTranslations from "./utils/translation";
 import { db } from "./utils/db";
 import { useLiveQuery } from "dexie-react-hooks";
+import { OutletContext } from "../components";
 
 const useTranslation = () => {
   const screenId = btoa(window.location.href);
   const value = JSON?.parse(localStorage.getItem("defaultLang"));
+  const { generalData } = useContext(OutletContext);
 
   const [defaultLang, setDefaultLang] = useState(value?.slug ?? "en");
   const [isLoading, setIsLoading] = useState(false);
   const [textSchemaLoading, setTextSchemaLoading] = useState(true);
+  useEffect(() => {
+    if (generalData?.defaultAccount?.language) {
+      setDefaultLang(generalData?.defaultAccount?.language); 
+    }
+  }, [generalData]);
+
   /**
    * @type {{key: string; value: string; updatedAt: string; screenId: string}[]}
    */