@asaleh37/ui-base 25.8.10-6 → 25.8.10-7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asaleh37/ui-base",
-  "version": "25.8.10-6",
+  "version": "25.8.10-7",
   "description": "",
   "license": "ISC",
   "author": "Ahmed Saleh Mohamed",

package/src/components/common/NoLicenseComponent.tsx

@@ -4,10 +4,39 @@ import {
   LicenseCheckObject,
 } from "../../redux/features/common/AppInfoSlice";
 import { useSelector } from "react-redux";
+import { useEffect, useState } from "react";
+import { useAxios } from "../../hooks";
 
-const NoLicenseComponent: React.FC<LicenseCheckObject> = (props) => {
+const NoLicenseComponent: React.FC = () => {
+  const [licenseCheckObj, setLicenseCheckObject] = useState<LicenseCheckObject>(
+    { isLicensed: true, lastLicenseCheckMessage: "", lastLicenseCheckTime: "" }
+  );
+  const { handleGetRequest } = useAxios();
   const appInfo: AppInfo = useSelector((state: any) => state.AppInfo.value);
-  return (
+  const checkSystemLicense = async () => {
+    if (appInfo?.checkLicense?.endpoint) {
+      await handleGetRequest({
+        endPointURI: appInfo.checkLicense?.endpoint,
+        successCallBkFn: (response) => {
+          setLicenseCheckObject(response.data);
+        },
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (appInfo?.checkLicense?.endpoint) {
+      const interval = appInfo?.checkLicense?.interval || 60000;
+      const intervalId = setInterval(() => {
+        checkSystemLicense();
+      }, interval);
+      return () => {
+        clearInterval(intervalId);
+        console.log("Interval cleared");
+      };
+    }
+  }, [appInfo]);
+  return !licenseCheckObj.isLicensed ? (
     <Box
       sx={{
         flex: 1,
@@ -17,6 +46,11 @@ const NoLicenseComponent: React.FC<LicenseCheckObject> = (props) => {
         flexDirection: "column",
         alignItems: "center",
         justifyContent: "center",
+        position: "fixed",
+        top: 0,
+        background: "rgba(235, 235, 235, 0.8)",
+        left: 0,
+        zIndex: 9999,
       }}
     >
       <img src={appInfo.appLogo} />
@@ -30,12 +64,15 @@ const NoLicenseComponent: React.FC<LicenseCheckObject> = (props) => {
         Please reach out to your vendor for assistance.
       </Typography>
       <Typography>
-        License Check @{props?.lastLicenseCheckTime || "--------"}
+        License Check @{licenseCheckObj?.lastLicenseCheckTime || "--------"}
       </Typography>
       <Typography>
-        License Check Result : {props?.lastLicenseCheckMessage || "--------"}
+        License Check Result :{" "}
+        {licenseCheckObj?.lastLicenseCheckMessage || "--------"}
       </Typography>
     </Box>
+  ) : (
+    <></>
   );
 };
 

package/src/layout/Layout.tsx

@@ -8,17 +8,11 @@ import MainContent from "./MainContent";
 import { BrowserRouter } from "react-router-dom";
 import MobileDrawer from "./MobileDrawer";
 import { ToastContainer } from "react-toastify";
-import { useEffect, useState } from "react";
 import { useIsMobile } from "../hooks/UseMobile";
-import useAxios from "../hooks/useAxios";
 import { DRAWER_WIDTH } from "../redux/features/common/AppLayoutSlice";
 import { UserSessionProps } from "../redux/features/common/UserSessionSlice";
 import LoadingMask from "../components/common/LoadingMask";
 import Login from "../components/common/Login";
-import {
-  AppInfo,
-  LicenseCheckObject,
-} from "../redux/features/common/AppInfoSlice";
 import NoLicenseComponent from "../components/common/NoLicenseComponent";
 
 const Main = styled("main", {
@@ -61,40 +55,12 @@ const Main = styled("main", {
 
 export default function Layout() {
   const SideBarState = useSelector((state: any) => state.SideBar);
-  const [licenseCheckObj, setLicenseCheckObject] = useState<LicenseCheckObject>(
-    { isLicensed: true, lastLicenseCheckMessage: "", lastLicenseCheckTime: "" }
-  );
+
   const isMobile = useIsMobile();
-  const { handleGetRequest } = useAxios();
   const UserSession: UserSessionProps = useSelector(
     (state: any) => state.UserSession
   );
-  const appInfo: AppInfo = useSelector((state: any) => state.AppInfo.value);
   const AppLayout = useSelector((state: any) => state.AppLayout);
-  const checkSystemLicense = async () => {
-    if (appInfo?.checkLicense?.endpoint) {
-      await handleGetRequest({
-        endPointURI: appInfo.checkLicense?.endpoint,
-        successCallBkFn: (response) => {
-          setLicenseCheckObject(response.data);
-        },
-      });
-    }
-  };
-
-  useEffect(() => {
-    if (appInfo?.checkLicense?.endpoint) {
-      const interval = appInfo?.checkLicense?.interval || 60000;
-      const intervalId = setInterval(() => {
-        checkSystemLicense();
-      }, interval);
-      return () => {
-        clearInterval(intervalId);
-        console.log("Interval cleared");
-      };
-    }
-  }, [appInfo]);
-
   return (
     <BrowserRouter>
       <ToastContainer
@@ -104,18 +70,16 @@ export default function Layout() {
       />
       <LoadingMask />
       {UserSession.value.isAuthenticated === true ? (
-        licenseCheckObj?.isLicensed ? (
-          <Main open={SideBarState.isOpened}>
-            <CssBaseline />
-            <TopBar />
-            {!isMobile ? <SideBar /> : null}
-            {isMobile ? <MobileDrawer /> : null}
-            <DrawerHeader />
-            <MainContent />
-          </Main>
-        ) : (
-          <NoLicenseComponent {...licenseCheckObj} />
-        )
+        // licenseCheckObj?.isLicensed ? (
+        <Main open={SideBarState.isOpened}>
+          <CssBaseline />
+          <TopBar />
+          {!isMobile ? <SideBar /> : null}
+          {isMobile ? <MobileDrawer /> : null}
+          <DrawerHeader />
+          <MainContent />
+          <NoLicenseComponent />
+        </Main>
       ) : (
         <Login />
       )}