l-min-components 1.0.828 → 1.0.833

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "l-min-components",
-  "version": "1.0.828",
+  "version": "1.0.833",
   "type": "module",
   "files": [
     "src/assets",
@@ -43,6 +43,7 @@
     "react-flags-select": "^2.2.3",
     "react-google-charts": "^4.0.1",
     "react-icons": "^4.8.0",
+    "react-image": "^4.1.0",
     "react-input-emoji": "^5.3.1",
     "react-lottie": "^1.2.4",
     "react-mic": "^12.4.6",

package/src/components/ImageComponent/index.jsx

@@ -0,0 +1,103 @@
+import React from "react";
+import { Img } from "react-image";
+import { ImageFallbackContainer } from "./index.styled";
+
+/**
+ * @param {Object} props
+ * @param {"extra-small"| "small"| "medium" | "big"} props.fallbackLogoSize
+ * @param {string} props.src
+ * @param {string} props.alt
+ * @param {string} props.width  - please use this for sizing and add "px" at the end of the value
+ * @param {string} props.height  - please use this for sizing and add "px" at the end of the value
+ * @returns {JSX.Element}
+ */
+const ImageComponents = ({
+  src,
+  fallbackLogoSize = "medium",
+  width = "200px",
+  height = "200px",
+  alt,
+  className,
+}) => {
+  return (
+    <Img
+      className={className}
+      src="https://images.pexels.com/photos/460672/pexels-photo-460672.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
+      width={width}
+      height={height}
+      alt={alt}
+      loader={
+        <FallbackImage size={fallbackLogoSize} width={width} height={height} />
+      }
+    />
+  );
+};
+
+const FallbackImage = ({ size, width, height }) => {
+  return (
+    <ImageFallbackContainer $size={size} $width={width} $height={height}>
+      <Logo />
+    </ImageFallbackContainer>
+  );
+};
+
+const Logo = () => (
+  <svg
+    width="31"
+    height="21"
+    viewBox="0 0 31 21"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clipPath="url(#clip0_37964_330186)">
+      <path
+        d="M0 0.472656H2.02205V8.20059H6.67623V9.87664H0V0.472656Z"
+        fill="#C6CCCC"
+      />
+      <path
+        d="M8.78635 6.75914C8.78635 7.64253 9.22744 8.50434 10.1956 8.50434C11.0063 8.50434 11.2371 8.17648 11.4212 7.75013H13.3663C13.1137 8.6143 12.3504 10.0316 10.1449 10.0316C7.83193 10.0316 6.82812 8.29353 6.82812 6.44073C6.8288 4.226 7.95757 2.64844 10.2148 2.64844C12.6373 2.65316 13.4479 4.40241 13.4479 6.16515C13.4532 6.36341 13.4444 6.56179 13.4217 6.7588L8.78635 6.75914ZM11.4998 5.56205C11.4853 4.74106 11.1588 4.05128 10.2121 4.05128C9.26541 4.05128 8.90527 4.69215 8.82196 5.55969L11.4998 5.56205Z"
+        fill="#C6CCCC"
+      />
+      <path
+        d="M16.1261 10.0505C14.4336 10.0505 13.5938 8.91311 13.5938 7.81924C13.5938 6.21267 14.8767 5.47061 16.932 5.47061H17.9335V5.03953C17.9335 4.53932 17.7548 4.04584 16.8534 4.04584C16.0307 4.04584 15.852 4.39529 15.7636 4.90765H13.9203C14.0251 3.65322 14.7978 2.64064 16.9317 2.65245C18.813 2.66425 19.8359 3.40193 19.8359 5.08102V8.00577C19.8383 8.03203 19.8383 8.05844 19.8359 8.0847C19.414 10.3689 16.1261 10.0505 16.1261 10.0505ZM17.9429 6.66061H17.1514C15.9783 6.66061 15.5442 7.01984 15.5442 7.6995C15.5383 7.83099 15.561 7.96221 15.6108 8.08397C15.6606 8.20573 15.7363 8.31511 15.8326 8.40447C15.9288 8.49383 16.0433 8.56101 16.1681 8.60133C16.2929 8.64164 16.425 8.65411 16.5551 8.63788C17.7904 8.63788 17.9429 7.77607 17.9429 6.84478V6.66061Z"
+        fill="#C6CCCC"
+      />
+      <path
+        d="M16.1238 17.8005C14.4309 17.8005 13.5938 16.6635 13.5938 15.5716C13.5938 13.965 14.8767 13.223 16.932 13.223H17.9335V12.7919C17.9335 12.2917 17.7548 11.7982 16.8534 11.7982C16.0307 11.7982 15.852 12.1476 15.7636 12.6576H13.9179C14.0228 11.4056 14.7954 10.3906 16.9317 10.4024C18.813 10.4143 19.8359 11.1519 19.8359 12.831V15.7564C19.8383 15.7827 19.8383 15.8091 19.8359 15.8354C19.4116 18.1213 16.1238 17.8005 16.1238 17.8005ZM17.9405 14.4082H17.1491C15.9759 14.4082 15.5419 14.7675 15.5419 15.4471C15.5359 15.5787 15.5586 15.7101 15.6083 15.832C15.658 15.9539 15.7337 16.0635 15.8299 16.153C15.9261 16.2426 16.0407 16.31 16.1655 16.3506C16.2904 16.3911 16.4225 16.4039 16.5528 16.3879C17.788 16.3879 17.9405 15.5261 17.9405 14.5948V14.4082Z"
+        fill="#C6CCCC"
+      />
+      <path
+        d="M24.6914 4.59116C24.6914 3.99278 24.6914 3.33437 24.6797 2.81492H26.5643C26.605 3.11267 26.6297 3.41241 26.6382 3.71282C26.8768 3.26994 27.4465 2.65234 28.6768 2.65234C30.0861 2.65234 31.0039 3.60994 31.0039 5.38146V9.86758H29.0581V5.59666C29.0581 4.80433 28.7957 4.22957 27.9373 4.22957C27.079 4.22957 26.6379 4.69167 26.6379 5.93666V9.86758H24.6921L24.6914 4.59116Z"
+        fill="#C6CCCC"
+      />
+      <path
+        d="M6.79079 16.778C6.79079 19.0426 5.95866 20.4745 3.29696 20.4745C0.731352 20.4745 0.237849 19.0356 0.159238 18.2409H2.14602C2.28443 18.7198 2.63952 19.0548 3.38901 19.0548C4.65284 19.0548 4.88867 18.2814 4.88867 16.9001V16.5628C4.52384 17.1733 3.93492 17.5538 2.90962 17.5538C1.05386 17.5538 0 16.0359 0 14.1349C0 11.9303 1.31388 10.4219 3.07121 10.4219C4.26348 10.4219 4.77848 10.9916 4.8833 11.3221C4.89774 11.1305 4.9478 10.7022 4.95956 10.5848H6.80524C6.79348 11.2145 6.79079 11.9303 6.79079 12.6086V16.778ZM1.9982 14.0479C1.9982 15.2622 2.6029 15.9776 3.46225 15.9776C4.63302 15.9776 4.94545 15.1708 4.94545 13.9858C4.94545 12.8009 4.73817 11.9843 3.51466 11.9843C2.65867 11.9853 1.9982 12.6386 1.9982 14.0479Z"
+        fill="#C6CCCC"
+      />
+      <path
+        d="M13.2359 15.5856C13.2359 16.2656 13.2359 17.0053 13.2477 17.635H11.3402C11.314 17.4458 11.2995 17.0677 11.2878 16.8211C10.8705 17.5392 10.2507 17.7993 9.35405 17.7993C7.92326 17.7993 7.00781 16.9277 7.00781 15.166V10.582H8.95125V14.7858C8.95125 15.564 9.18978 16.2079 10.0337 16.2079C10.9206 16.2079 11.2878 15.7289 11.2878 14.3359V10.582H13.2335L13.2359 15.5856Z"
+        fill="#C6CCCC"
+      />
+      <path
+        d="M22.0615 4.06497C22.0615 3.68415 22.0353 2.9856 22.0091 2.8274H20.1016C20.1016 3.41633 20.116 4.03866 20.116 4.74261V6.67231H20.1016V15.7734C20.1016 17.0677 20.7803 17.7149 22.1377 17.7149C22.4839 17.7214 22.8292 17.6779 23.163 17.5857V15.9488H23.0915C22.8471 15.9789 22.601 15.9933 22.3547 15.992C22.1532 15.992 22.0524 15.8506 22.0524 15.5707V9.86791V6.79172C22.0524 4.85965 22.8939 4.47917 24.3056 4.51493V2.65234C23.1274 2.65707 22.3715 3.246 22.0615 4.06497Z"
+        fill="#C6CCCC"
+      />
+      <path
+        d="M26.5346 18.0197C27.6842 18.0197 28.6162 17.084 28.6162 15.9298C28.6162 14.7755 27.6842 13.8398 26.5346 13.8398C25.3851 13.8398 24.4531 14.7755 24.4531 15.9298C24.4531 17.084 25.3851 18.0197 26.5346 18.0197Z"
+        fill="#C6CCCC"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_37964_330186">
+        <rect
+          width="31"
+          height="20"
+          fill="white"
+          transform="translate(0 0.472656)"
+        />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+export default ImageComponents;

package/src/components/ImageComponent/index.styled.jsx

@@ -0,0 +1,29 @@
+import styled from "styled-components";
+
+export const ImageFallbackContainer = styled.div`
+  background: #dfe5e5;
+  place-items: center;
+  display: grid;
+  width: ${({ $width }) => $width};
+  height: ${({ $height }) => $height};
+  overflow: hidden;
+
+  svg {
+    width: ${({ $size }) =>
+      $size === "extra-small"
+        ? "24px"
+        : $size === "small"
+        ? "32px"
+        : $size === "big"
+        ? "96px"
+        : "64px"};
+    height: ${({ $size }) =>
+      $size === "extra-small"
+        ? "24px"
+        : $size === "small"
+        ? "32px"
+        : $size === "big"
+        ? "96px"
+        : "64px"};
+  }
+`;

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/components/index.js

@@ -1,54 +1,55 @@
-export { default as Header } from './header/index';
-export { default as LoginHeader } from './header/login-header';
-export { default as Banner } from './banner/';
-export { default as SideNav } from './sideNav';
-export { default as SideMenu } from './sideBar/sideMenu';
-export { default as ProgressBar } from './progressBar';
-export { default as Radio } from './radio';
-export { default as Checkbox } from './checkBoxes/checkbox/index2';
-export { default as CheckboxGroup } from './checkBoxes/checkboxGroup';
-export { default as RequestList } from './friendRequest/friendRequestList';
-export { default as CourseList } from './course/courseList';
-export { default as ApiProgressBar } from './ApiProgress/ApiProgressBar';
-export { default as ApiConsumption } from './ApiProgress/ApiConsumption';
-export { default as Loader } from './loader';
-export { default as SearchComponent } from './searchBar';
-export { default as ButtonComponent } from './button';
-export { default as ToggleButtonComponent } from './toggle button';
-export { default as InputComponent } from './input';
-export { default as MainLayout } from './authentication/mainLayout';
-export { default as SocialBtn } from './button/socialBtn';
-export { default as SuccessCard } from './successCard/index';
-export { default as DropDownComponent } from './dropdown component/dropdown';
-export { default as SelectDropdown } from './select';
-export { default as SelectDropdownGraph } from './graph';
-export { default as NotificationThresholdComponent } from './notificationThreshold';
-export { default as DevAPIdocs } from './developerAPIdocs';
-export { default as Calender } from './calender/input';
-export { default as ErrorPage } from './errorPage';
-export { default as AppMainLayout } from './AppMainLayout';
-export { OutletContext as OutletContext } from './AppMainLayout';
-export { default as DatePickerCalender } from './datePicker';
-export { default as TextEditor } from './textEditor';
-export { default as MessageAddon } from './messageAddon/messages';
-export { default as InstructorAccountSwitcher } from './instructorAccountSwitcher';
-export { default as InstructorRightBar } from './fileRightBar/instructorRightBar';
+export { default as Header } from "./header/index";
+export { default as LoginHeader } from "./header/login-header";
+export { default as Banner } from "./banner/";
+export { default as SideNav } from "./sideNav";
+export { default as SideMenu } from "./sideBar/sideMenu";
+export { default as ProgressBar } from "./progressBar";
+export { default as Radio } from "./radio";
+export { default as Checkbox } from "./checkBoxes/checkbox/index2";
+export { default as CheckboxGroup } from "./checkBoxes/checkboxGroup";
+export { default as RequestList } from "./friendRequest/friendRequestList";
+export { default as CourseList } from "./course/courseList";
+export { default as ApiProgressBar } from "./ApiProgress/ApiProgressBar";
+export { default as ApiConsumption } from "./ApiProgress/ApiConsumption";
+export { default as Loader } from "./loader";
+export { default as SearchComponent } from "./searchBar";
+export { default as ButtonComponent } from "./button";
+export { default as ToggleButtonComponent } from "./toggle button";
+export { default as InputComponent } from "./input";
+export { default as MainLayout } from "./authentication/mainLayout";
+export { default as SocialBtn } from "./button/socialBtn";
+export { default as SuccessCard } from "./successCard/index";
+export { default as DropDownComponent } from "./dropdown component/dropdown";
+export { default as SelectDropdown } from "./select";
+export { default as SelectDropdownGraph } from "./graph";
+export { default as NotificationThresholdComponent } from "./notificationThreshold";
+export { default as DevAPIdocs } from "./developerAPIdocs";
+export { default as Calender } from "./calender/input";
+export { default as ErrorPage } from "./errorPage";
+export { default as AppMainLayout } from "./AppMainLayout";
+export { OutletContext as OutletContext } from "./AppMainLayout";
+export { default as DatePickerCalender } from "./datePicker";
+export { default as TextEditor } from "./textEditor";
+export { default as MessageAddon } from "./messageAddon/messages";
+export { default as InstructorAccountSwitcher } from "./instructorAccountSwitcher";
+export { default as InstructorRightBar } from "./fileRightBar/instructorRightBar";
 
-export { default as EnterpriseRightBar } from './fileRightBar/enterpriseRightBar';
-export { default as FullPageLoader } from './fullPageLoader';
-export { default as AdminAppMainLayout } from './AdminAppMainLayout';
-export { default as PaginationComponent } from './paginate';
-export { default as VideoPlayer } from './video-player';
-export { default as AdminLogin } from './AdminLogin';
-export { default as AdminResetPassword } from './AdminResetPassword';
-export { default as AdminChangePassword } from './AdminResetPassword/change-password';
-export { default as AdminPasswordSuccess } from './AdminResetPassword/success-screen';
+export { default as EnterpriseRightBar } from "./fileRightBar/enterpriseRightBar";
+export { default as FullPageLoader } from "./fullPageLoader";
+export { default as AdminAppMainLayout } from "./AdminAppMainLayout";
+export { default as PaginationComponent } from "./paginate";
+export { default as VideoPlayer } from "./video-player";
+export { default as AdminLogin } from "./AdminLogin";
+export { default as AdminResetPassword } from "./AdminResetPassword";
+export { default as AdminChangePassword } from "./AdminResetPassword/change-password";
+export { default as AdminPasswordSuccess } from "./AdminResetPassword/success-screen";
 export { default as AdminDashboard } from "./AdminDashboard/admin-dashboard";
-export { default as AdminNotification } from './AdminNotification';
-export { default as AdminSecurity } from './AdminSecuritySettings';
-export { default as GraphMap } from './GraphMap';
-export { default as AdminRolesPermissions } from './AdminRolesPermission';
-export { default as AdminCreateRolesPermissions } from './AdminRolesPermission/create';
-export { default as MobileLayout } from './mobileLayout';
-export { default as useTranslation } from '../hooks/useTranslation'
-export { default as preLoadWords } from "../hooks/utils/translation"
+export { default as AdminNotification } from "./AdminNotification";
+export { default as AdminSecurity } from "./AdminSecuritySettings";
+export { default as GraphMap } from "./GraphMap";
+export { default as AdminRolesPermissions } from "./AdminRolesPermission";
+export { default as AdminCreateRolesPermissions } from "./AdminRolesPermission/create";
+export { default as MobileLayout } from "./mobileLayout";
+export { default as useTranslation } from "../hooks/useTranslation";
+export { default as preLoadWords } from "../hooks/utils/translation";
+export { default as ImageComponent } from "./ImageComponent";

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}[]}
    */