l-min-components 1.0.761 → 1.0.768

package/package.json

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

package/src/components/AppMainLayout/index.jsx

@@ -153,7 +153,7 @@ const AppMainLayout = () => {
   const currentPlan = userPlanData?.data?.current_plan;
   const planState = userPlanData?.data?.state;
 
-  const { textSchema, setDefaultLang, findText } = useTranslation();
+  const { textSchema, setDefaultLang, defaultLang, findText } = useTranslation();
   // console.log(findText());
   return (
     textSchema && (
@@ -161,6 +161,7 @@ const AppMainLayout = () => {
         value={{
           textSchema,
           findText,
+          defaultLang,
           setDefaultLang,
           setRightComponent,
           setRightLayout,

package/src/components/button/index.jsx

@@ -1,5 +1,6 @@
 import React, { useCallback, CSSProperties } from "react";
 import styled from "styled-components";
+import useTranslation from "../../hooks/useTranslation";
 /**
  * @param {{
  *  type?: ("primary" | "secondary" | "tertiary"),
@@ -19,6 +20,8 @@ import styled from "styled-components";
  *
  */
 const ButtonComponent = (props) => {
+  const { textSchema, findText } = useTranslation();
+
   const handleClick = useCallback((e) => {
     props.onClick && props.onClick(e);
   }, []);
@@ -26,6 +29,7 @@ const ButtonComponent = (props) => {
   switch (props.type) {
     case "primary":
       return (
+        textSchema &&
         <Button
           disabled={props.disabled}
           onClick={handleClick}
@@ -49,7 +53,7 @@ const ButtonComponent = (props) => {
               />
             )
           )}
-          {props.text ?? "Text"}
+          {findText(props.text) ?? "Text"}
           {props.icon?.right && props.icon.jsx ? (
             <props.icon.jsx
               {...{
@@ -73,6 +77,7 @@ const ButtonComponent = (props) => {
       );
     case "secondary":
       return (
+        textSchema &&
         <SecondaryButton
           disabled={props.disabled}
           onClick={handleClick}
@@ -96,7 +101,7 @@ const ButtonComponent = (props) => {
               />
             )
           )}
-          {props.text ?? "Text"}
+          {findText(props.text) ?? "Text"}
           {props.icon?.right && props.icon.jsx ? (
             <props.icon.jsx
               {...{
@@ -143,7 +148,7 @@ const ButtonComponent = (props) => {
               />
             )
           )}
-          {props.text ?? "Text"}
+          {findText(props.text) ?? "Text"}
           {props.icon?.right && props.icon.jsx ? (
             <props.icon.jsx
               {...{
@@ -167,6 +172,7 @@ const ButtonComponent = (props) => {
       );
     default:
       return (
+        textSchema &&
         <Button
           disabled={props.disabled}
           onClick={handleClick}
@@ -190,7 +196,7 @@ const ButtonComponent = (props) => {
               />
             )
           )}
-          {props.text ?? "Text"}
+          {findText(props.text) ?? "Text"}
           {props.icon?.right && props.icon.jsx ? (
             <props.icon.jsx
               {...{

package/src/components/header/index.jsx

@@ -61,7 +61,7 @@ const HeaderComponent = (props) => {
     handleGetNotification,
   } = useHeader();
   const { pathname } = useLocation();
-  const { setGeneralData, generalData, notificationMarkReadData, findText } =
+  const { setGeneralData, generalData, notificationMarkReadData, findText, defaultLang } =
     useContext(OutletContext);
   const [selectedAccount, setSelectedAccount] = useState();
   const { setDefaultAccount, handleSetDefaultAccount } = useHeader();
@@ -365,7 +365,7 @@ const HeaderComponent = (props) => {
   }, [notificationMarkReadData?.response]);
   const value = JSON?.parse(localStorage.getItem("defaultLang"));
   const currentFlag = value?.flag;
-  
+console.log("defaultLang", defaultLang)
   return (
     <Navbar>
       <img src={logo} alt="Learngual logo" />

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

@@ -1,4 +1,10 @@
-import React, { useState, useEffect, useRef, useCallback, useContext } 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";
@@ -8,6 +14,7 @@ import { useLocation, useNavigate } from "react-router-dom";
 import usFlag from "../../assets/images/usFlag.png";
 import koreanFlag from "../../assets/images/koreaFlag.png";
 import { OutletContext } from "..";
+import useTranslation from "../../hooks/useTranslation";
 
 /**
  * @param {{
@@ -19,8 +26,8 @@ import { OutletContext } from "..";
  *
  */
 const HeaderComponentTwo = (props) => {
-  const { setGeneralData, generalData, setDefaultLang, findText } =
-  useContext(OutletContext);
+  // const { setDefaultLang, } = useTranslation();
+
   const [selected, setSelected] = useState("ES");
   const [isOpen, setIsOpen] = useState(false);
   const [searchResultOpen, setSearchResultOpen] = useState(false);
@@ -30,7 +37,6 @@ const HeaderComponentTwo = (props) => {
 
   const navigate = useNavigate();
   const location = useLocation();
-  // console.log(location);
   useEffect(() => {
     setIsOpen(false);
   }, []);
@@ -115,7 +121,7 @@ const HeaderComponentTwo = (props) => {
                 <li
                   onClick={() => {
                     setLanguageDropdown();
-                    setDefaultLang(item?.slug);
+                    props?.setDefaultLang(item?.slug);
                     localStorage.setItem("defaultLang", JSON.stringify(item));
                   }}
                 >

package/src/components/input/index.jsx

@@ -1,5 +1,7 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useContext } from "react";
 import { Input, Label, ErrorMsg } from "./index.styled";
+import { OutletContext } from "../AppMainLayout";
+import useTranslation from "../../hooks/useTranslation";
 
 /**
  * @param {{
@@ -17,6 +19,8 @@ import { Input, Label, ErrorMsg } from "./index.styled";
 const InputComponent = (props) => {
   const [value, setValue] = useState("");
   const [formErrors, setFormErrors] = useState(false);
+  const { textSchema, findText } = useTranslation();
+
 
   const validate = (e) => {
     if (!e.target.value) {
@@ -35,16 +39,17 @@ const InputComponent = (props) => {
   };
 
   return (
+    textSchema &&
     <div style={props.style}>
       <Label htmlFor={props.in} style={props.customLabelStyle}>
-        {props.label}
+        {findText(props.label)}
       </Label>
       <Input
         type={props.inputType}
         name={props.inputName}
         value={props.value}
         id={props.inputId}
-        placeholder={props.placeholder}
+        placeholder={findText(props.placeholder)}
         style={props.customInputStyle}
         disabled={props.disabled}
         hasError={props.hasError}

package/src/hooks/useTranslation.jsx

@@ -2,10 +2,10 @@ import React, { useCallback, useEffect, useState } from "react";
 import loadTranslations from "./utils/translation";
 
 const useTranslation = () => {
-  const value = localStorage.getItem("defaultLang");
+  const value = JSON?.parse(localStorage.getItem("defaultLang"));
   const [textSchema, setTextSchema] = useState(null);
 
-  const [defaultLang, setDefaultLang] = useState(value || "en");
+  const [defaultLang, setDefaultLang] = useState(value?.slug || "en");
   const findText = useCallback((str) => textSchema[str] ?? str, [textSchema]);
 
   useEffect(() => {