second half optimization

src/App.jsx

@@ -2,7 +2,6 @@ import { useEffect, lazy, Suspense } from 'react';
 import { Routes, Route } from 'react-router-dom';
 import { useSelector } from 'react-redux';
 import ProtectedRoutes from './ProtectedRoutes';
-import SelfBooking from './Pages/SelfBooking/SelfBooking.jsx';
 import { isMobile, isIOS } from 'react-device-detect';
 import { routesConfig } from './routesConfig';
 import { GlobalItemCard } from './Features/BookingScreen/BookingData/BookingData.js';
@@ -15,19 +14,30 @@ const KisokSelBooking = lazy(
 const IndividualBooking = lazy(
   () => import('./Pages/SelfBooking/IndividualBooking')
 );
+
+const CustomerMenuPage = lazy(
+  () => import('./Pages/Reports/MenuQRCode/CustomerMenuPage.jsx')
+);
+const WeightScaleApp = lazy(
+  () => import('./Pages/BookingScreen/WeightscaleApp.jsx')
+);
+const SelfBooking = lazy(() => import('./Pages/SelfBooking/SelfBooking.jsx'));
+
+import useSessionManager from './useSessionManager.js';
+import useSubscriptionManager from './useSubscriptionManager.js';
+const ExtendSubscriptionModal = lazy(
+  () => import('./Pages/ExtentedModal/ExtendSubscriptionModal.jsx')
+);
+
 const commonSubDir = import.meta.env.ENV_COMMON_BASE_URL;
 const subDirectory = import.meta.env.ENV_BASE_URL;
 import '../ownLib/my-ui-lib.css';
-import CustomerMenuPage from './Pages/Reports/MenuQRCode/CustomerMenuPage.jsx';
-import WeightScaleApp from './Pages/BookingScreen/WeightscaleApp.jsx';
-import useSubscriptionManager from './useSubscriptionManager.js';
-import useSessionManager from './useSessionManager.js';
-import ExtendSubscriptionModal from './Pages/ExtentedModal/ExtendSubscriptionModal.jsx';
 
 const AppRoutes = () => {
   const ItemCard = useSelector(GlobalItemCard);
   const { sessionData, logout } = useSessionManager(ItemCard);
-  const { remainingDays, handleCancel, freeExtend, extendModel,setExtendModel } = useSubscriptionManager(sessionData, logout);
+  const { remainingDays, handleCancel, handlePay, freeExtend, extendModel } =
+    useSubscriptionManager(sessionData, logout);
 
   useEffect(() => {
     const handlePopState = () => {
@@ -64,12 +74,12 @@ const AppRoutes = () => {
   //   return () => clearInterval(timer);
   // }, []);
 
-
   if (extendModel) {
     return (
       <ExtendSubscriptionModal
         onClose={handleCancel}
-        setExtendModel={setExtendModel}
+        onPayNow={handlePay}
+        onContinueWithCredits={freeExtend}
       />
     );
   }

src/AuthContext.jsx

@@ -5,13 +5,9 @@ import { getSession } from './Services/Others';
 import {
   getEmpAccesData,
   getSAdminUserAccesData,
-  PricingAppPricingName,
 } from './Features/BrachLogin/BranchLogin.js';
-import { changePricingAppPricingName } from './Features/ThemeChange/ThemeChange.js';
-import {
-  FeatureAddon,
-  GlobalFeatAddOnData,
-} from './Features/BookingScreen/BookingData/BookingData.js';
+import { PricingAppPricingNameData } from './Features/ThemeChange/ThemeChange.js';
+import { GlobalFeatAddOnData } from './Features/BookingScreen/BookingData/BookingData.js';
 import { useSelector } from 'react-redux';
 
 export const AuthContext = createContext();
@@ -50,16 +46,24 @@ export const AuthProvider = ({ children }) => {
 
   const getPricingName = async () => {
     if (!AppId || !UserId) return;
-    const data = {
-      appId: AppId,
-      userId: UserId,
-    };
+    let data;
+    if (UserType === 'Super Admin' || UserType === 'Super Admin User') {
+      data = {
+        appId: AppId,
+        compId: CompId,
+        branchId: BranchId,
+      };
+    } else {
+      data = {
+        appId: AppId,
+        userId: UserId,
+      };
+    }
     try {
-      const response = await dispatch(PricingAppPricingName(data)).unwrap();
+      const response = await dispatch(PricingAppPricingNameData(data)).unwrap();
       const responseData = response?.data;
       if (responseData?.statusCode !== 1) return setAdvance(false);
       const pricingData = responseData?.data;
-      await dispatch(changePricingAppPricingName(pricingData));
       const hasAdvance = pricingData.some(
         (item) => item.PricingName === 'Premium'
       );

src/Pages/BookingScreen/BookingPage.jsx

@@ -1,5 +1,6 @@
-import { useEffect, useState, lazy, Suspense } from 'react';
-import { useSelector, useDispatch } from 'react-redux';
+import { useEffect, useRef, lazy, Suspense, memo } from 'react';
+import { useSelector, useDispatch, shallowEqual } from 'react-redux';
+import { batch } from 'react-redux';
 
 const BSLayout1 = lazy(
   () => import('../../Pages/BookingScreen/Template/BSLayout1/BSLayout1.jsx')
@@ -29,7 +30,6 @@ import {
   getTemplateData,
   GlobalPricingAppPricingName,
   changetemplateData,
-  PricingAppPricingNameData,
   changeSessionData,
   GlobalScanTemplate,
   changeScanTemplate,
@@ -37,12 +37,12 @@ import {
 import {
   changeProductSubCategorie,
   ChangeScreenSize,
-  getConfigType,
+  getConfigTypeBookingType,
   getLayoutCategories,
-  getLayoutSubCategories,
+  // getLayoutSubCategories,
   getUnpaidData,
   GlobalFeatAddOnData,
-  GlobalProductCategorie,
+  // GlobalProductCategorie,
 } from '../../Features/BookingScreen/BookingData/BookingData.js';
 import { getSession } from '../../Services/Others';
 import { usePaymentOptions } from '../../Pages/BookingScreen/Template/PaymentOptions.js';
@@ -56,13 +56,16 @@ import Loader from '../../Components/Loader/Loader.jsx';
 
 const BookingPage = () => {
   const dispatch = useDispatch();
-  const templateData = useSelector(getTemplateData);
-  const ProdCat = useSelector(GlobalProductCategorie);
-  console.log(templateData, 'templateData');
+  const templateData = useSelector(getTemplateData, shallowEqual);
   const BookingLayout = templateData?.BookingLayout?.[0];
-  const [ismounted, setIsmounted] = useState(false);
-  const [templateLoaded, setTemplateLoaded] = useState(false);
-  const PricingAppPricingName = useSelector(GlobalPricingAppPricingName);
+
+  const templateLoadedRef = useRef(
+    Object.keys(templateData)?.length > 0 ? true : false
+  );
+  const PricingAppPricingName = useSelector(
+    GlobalPricingAppPricingName,
+    shallowEqual
+  );
 
   const CompId = getSession('CompId');
   const BranchId = getSession('BranchId');
@@ -72,10 +75,8 @@ const BookingPage = () => {
   const UserType = getSession('UserType');
   const AuthToken = sessionStorage.getItem('auth');
   const SessionMobileNo = getSession('MobileNo');
-  const UserName = getSession("UserName");
-  const SessionId =getSession("SessionId")
-  const FeatureAddonData = useSelector(GlobalFeatAddOnData);
-  const Scantemplatedata = useSelector(GlobalScanTemplate);
+  const FeatureAddonData = useSelector(GlobalFeatAddOnData, shallowEqual);
+  const Scantemplatedata = useSelector(GlobalScanTemplate, shallowEqual);
 
   useEffect(() => {
     if (BranchId) {
@@ -112,10 +113,8 @@ const BookingPage = () => {
       } else {
         dispatch(changeholddata([]));
       }
-    } catch {
-      (err) => {
-        console.log(err);
-      };
+    } catch (err) {
+      console.log(err);
     }
   };
 
@@ -130,8 +129,6 @@ const BookingPage = () => {
       AuthToken,
       SessionMobileNo,
       FeatureAddonData,
-      UserName,
-      SessionId
     };
     dispatch(changeSessionData(SessionData));
   }, [BranchId, FeatureAddonData]);
@@ -143,254 +140,35 @@ const BookingPage = () => {
     UserId: UserId,
   });
 
-  useEffect(() => {
-    ProdCat &&
-      dispatch(
-        getLayoutSubCategories({
-          CompId: CompId,
-          BranchId: BranchId,
-          AppId: AppId,
-          ProdCat: ProdCat,
-        })
-      ).unwrap();
-  }, [ProdCat]);
+  const initializeBookingPage = () => {
+    batch(() => {
+      dispatch(getConfigTypeBookingType({ TypeName: 'Booking Type' }));
+      dispatch(ChangeRedirectStatus(true));
+      dispatch(changeProductSubCategorie('NaN'));
+      dispatch(getLayoutCategories({ CompId, BranchId, AppId }));
+    });
+  };
 
   useEffect(() => {
-    dispatch(getConfigType({ TypeName: 'Booking Type' })).unwrap();
-    dispatch(ChangeRedirectStatus(true));
-    dispatch(changeProductSubCategorie('NaN'));
-    dispatch(
-      getLayoutCategories({ CompId: CompId, BranchId: BranchId, AppId: AppId })
-    ).unwrap();
-    let data;
-    if (UserType === 'Super Admin' || UserType === 'Super Admin User') {
-      data = {
-        appId: AppId,
-        compId: CompId,
-        branchId: BranchId,
-      };
-    } else {
-      data = {
-        appId: AppId,
-        userId: UserId,
-      };
-    }
+    initializeBookingPage();
+  }, [CompId, BranchId, AppId]);
+  useEffect(() => {
+    const handleUnload = () => {
+      const customerDisplayWindow = getCustomerDisplayWindow();
 
-    dispatch(PricingAppPricingNameData(data)).unwrap();
+      if (customerDisplayWindow && !customerDisplayWindow.closed) {
+        customerDisplayWindow.postMessage({ type: 'refresh' }, '*');
+      }
+    };
+
+    window.addEventListener('beforeunload', handleUnload);
+
+    return () => {
+      window.removeEventListener('beforeunload', handleUnload);
+    };
   }, []);
 
   useEffect(() => {
-    const fetchData = async (Plan) => {
-      if (templateLoaded) return; // STOP duplicate calls
-
-      const Data = { AppId, CompId, BranchId };
-      if (
-        Scantemplatedata?.Scantemplate &&
-        Scantemplatedata?.changetemp == 'Combo'
-      ) {
-        console.log('dont want any changes');
-      } else if (
-        Scantemplatedata?.changetemp == 'Layout' &&
-        (Scantemplatedata?.OldTemp == 'Combo1' ||
-          Scantemplatedata?.OldTemp == 'Combo2')
-      ) {
-        let tempdata = {
-          BookingLayout: [
-            'Layout2',
-            [
-              {
-                TemplateOptionsId: 71805,
-                OptionId: 45,
-                OptionName: 'Category',
-              },
-              {
-                TemplateOptionsId: 71807,
-                OptionId: 47,
-                OptionName: 'Card',
-              },
-              {
-                TemplateOptionsId: 71808,
-                OptionId: 48,
-                OptionName: 'Billing',
-              },
-              {
-                TemplateOptionsId: 71809,
-                OptionId: 166,
-                OptionName: 'Navbar',
-              },
-            ],
-          ],
-          BookingNavbar: [
-            'Navbar3',
-            [
-              {
-                TemplateOptionsId: 71811,
-                OptionId: 74,
-                OptionName: 'Search',
-              },
-              {
-                TemplateOptionsId: 71812,
-                OptionId: 75,
-                OptionName: 'RePrint',
-              },
-              {
-                TemplateOptionsId: 71813,
-                OptionId: 77,
-                OptionName: 'QuickAdd',
-              },
-              {
-                TemplateOptionsId: 71814,
-                OptionId: 76,
-                OptionName: 'DineIn',
-              },
-              {
-                TemplateOptionsId: 71815,
-                OptionId: 79,
-                OptionName: 'TakeAway',
-              },
-              {
-                TemplateOptionsId: 71816,
-                OptionId: 80,
-                OptionName: 'Offer',
-              },
-              {
-                TemplateOptionsId: 71817,
-                OptionId: 82,
-                OptionName: 'ExtraCharge',
-              },
-              {
-                TemplateOptionsId: 71825,
-                OptionId: 130,
-                OptionName: 'Hold',
-              },
-              {
-                TemplateOptionsId: 71826,
-                OptionId: 172,
-                OptionName: 'AddCustomer',
-              },
-            ],
-          ],
-          BookingCategory: [
-            'Category5',
-            [
-              {
-                TemplateOptionsId: 71818,
-                OptionId: 95,
-                OptionName: 'Image',
-              },
-              {
-                TemplateOptionsId: 71819,
-                OptionId: 96,
-                OptionName: 'Background',
-              },
-            ],
-          ],
-          BookingCard: [
-            'Card4',
-            [
-              {
-                TemplateOptionsId: 71821,
-                OptionId: 117,
-                OptionName: 'Background',
-              },
-              {
-                TemplateOptionsId: 71822,
-                OptionId: 119,
-                OptionName: 'Price',
-              },
-              {
-                TemplateOptionsId: 71823,
-                OptionId: 120,
-                OptionName: 'SmallImage',
-              },
-              {
-                TemplateOptionsId: 71824,
-                OptionId: 121,
-                OptionName: 'ImageLeft',
-              },
-            ],
-          ],
-          BookingBilling: [
-            'StandardBilling',
-            [
-              {
-                TemplateOptionsId: 71825,
-                OptionId: 130,
-                OptionName: 'Hold',
-              },
-              {
-                TemplateOptionsId: 71825,
-                OptionId: 130,
-                OptionName: 'DineIn',
-              },
-              {
-                TemplateOptionsId: 71826,
-                OptionId: 171,
-                OptionName: 'Background',
-              },
-              {
-                TemplateOptionsId: 71826,
-                OptionId: 172,
-                OptionName: 'AddCustomer',
-              },
-
-              {
-                TemplateOptionsId: 71828,
-                OptionId: 210,
-                OptionName: 'Sl.No',
-              },
-              {
-                TemplateOptionsId: 71829,
-                OptionId: 211,
-                OptionName: 'Item',
-              },
-              {
-                TemplateOptionsId: 71830,
-                OptionId: 214,
-                OptionName: 'Quantity',
-              },
-              {
-                TemplateOptionsId: 71831,
-                OptionId: 216,
-                OptionName: 'Amount',
-              },
-              {
-                TemplateOptionsId: 71832,
-                OptionId: 217,
-                OptionName: 'Edit',
-              },
-              {
-                TemplateOptionsId: 71833,
-                OptionId: 218,
-                OptionName: 'Delete',
-              },
-            ],
-          ],
-        };
-        await dispatch(
-          changeScanTemplate({
-            Scantemplate: false,
-            changetemp: Scantemplatedata?.changetemp,
-            Template: tempdata,
-            OldTemp: Scantemplatedata?.OldTemp,
-          })
-        );
-        // setIsmounted(false)
-      } else {
-        const templateResponse = await dispatch(
-          getTemplate({ CompId, BranchId, AppId })
-        ).unwrap();
-        dispatch(getPrintSelectionComponentData(Data)).unwrap();
-        setTemplateLoaded(true);
-        if (
-          !templateResponse?.data?.data ||
-          templateResponse.data.data.length === 0
-        ) {
-          Professional(Plan);
-        }
-      }
-      // Check if template data is empty or not
-    };
     const Advance = PricingAppPricingName?.some(
       (item) => item.PricingName === 'Premium'
     );
@@ -401,11 +179,7 @@ const BookingPage = () => {
       (item) => item?.FeatureAddonName?.toLowerCase() === 'customized template'
     );
     if (PricingAppPricingName?.length === 0) return;
-    console.log(
-      PricingAppPricingName,
-      FeatureAddonData,
-      'FeatureAddonDataFeatureAddonData'
-    );
+
     if (PricingAppPricingName?.length > 0) {
       if (Advance) {
         fetchData('Advance');
@@ -422,23 +196,217 @@ const BookingPage = () => {
       }
     }
   }, [PricingAppPricingName]);
-  useEffect(() => {
-    const handleUnload = () => {
-      const customerDisplayWindow = getCustomerDisplayWindow(); // Retrieve from your state/redux
-      if (customerDisplayWindow && !customerDisplayWindow.closed) {
-        customerDisplayWindow.postMessage({ type: 'refresh' }, '*');
+  const fetchData = async (Plan) => {
+    if (templateLoadedRef.current) return; // STOP duplicate calls
+
+    const Data = { AppId, CompId, BranchId };
+    if (
+      Scantemplatedata?.Scantemplate &&
+      Scantemplatedata?.changetemp == 'Combo'
+    ) {
+      console.log('dont want any changes');
+    } else if (
+      Scantemplatedata?.changetemp == 'Layout' &&
+      (Scantemplatedata?.OldTemp == 'Combo1' ||
+        Scantemplatedata?.OldTemp == 'Combo2')
+    ) {
+      let tempdata = {
+        BookingLayout: [
+          'Layout2',
+          [
+            {
+              TemplateOptionsId: 71805,
+              OptionId: 45,
+              OptionName: 'Category',
+            },
+            {
+              TemplateOptionsId: 71807,
+              OptionId: 47,
+              OptionName: 'Card',
+            },
+            {
+              TemplateOptionsId: 71808,
+              OptionId: 48,
+              OptionName: 'Billing',
+            },
+            {
+              TemplateOptionsId: 71809,
+              OptionId: 166,
+              OptionName: 'Navbar',
+            },
+          ],
+        ],
+        BookingNavbar: [
+          'Navbar3',
+          [
+            {
+              TemplateOptionsId: 71811,
+              OptionId: 74,
+              OptionName: 'Search',
+            },
+            {
+              TemplateOptionsId: 71812,
+              OptionId: 75,
+              OptionName: 'RePrint',
+            },
+            {
+              TemplateOptionsId: 71813,
+              OptionId: 77,
+              OptionName: 'QuickAdd',
+            },
+            {
+              TemplateOptionsId: 71814,
+              OptionId: 76,
+              OptionName: 'DineIn',
+            },
+            {
+              TemplateOptionsId: 71815,
+              OptionId: 79,
+              OptionName: 'TakeAway',
+            },
+            {
+              TemplateOptionsId: 71816,
+              OptionId: 80,
+              OptionName: 'Offer',
+            },
+            {
+              TemplateOptionsId: 71817,
+              OptionId: 82,
+              OptionName: 'ExtraCharge',
+            },
+            {
+              TemplateOptionsId: 71825,
+              OptionId: 130,
+              OptionName: 'Hold',
+            },
+            {
+              TemplateOptionsId: 71826,
+              OptionId: 172,
+              OptionName: 'AddCustomer',
+            },
+          ],
+        ],
+        BookingCategory: [
+          'Category5',
+          [
+            {
+              TemplateOptionsId: 71818,
+              OptionId: 95,
+              OptionName: 'Image',
+            },
+            {
+              TemplateOptionsId: 71819,
+              OptionId: 96,
+              OptionName: 'Background',
+            },
+          ],
+        ],
+        BookingCard: [
+          'Card4',
+          [
+            {
+              TemplateOptionsId: 71821,
+              OptionId: 117,
+              OptionName: 'Background',
+            },
+            {
+              TemplateOptionsId: 71822,
+              OptionId: 119,
+              OptionName: 'Price',
+            },
+            {
+              TemplateOptionsId: 71823,
+              OptionId: 120,
+              OptionName: 'SmallImage',
+            },
+            {
+              TemplateOptionsId: 71824,
+              OptionId: 121,
+              OptionName: 'ImageLeft',
+            },
+          ],
+        ],
+        BookingBilling: [
+          'StandardBilling',
+          [
+            {
+              TemplateOptionsId: 71825,
+              OptionId: 130,
+              OptionName: 'Hold',
+            },
+            {
+              TemplateOptionsId: 71825,
+              OptionId: 130,
+              OptionName: 'DineIn',
+            },
+            {
+              TemplateOptionsId: 71826,
+              OptionId: 171,
+              OptionName: 'Background',
+            },
+            {
+              TemplateOptionsId: 71826,
+              OptionId: 172,
+              OptionName: 'AddCustomer',
+            },
+
+            {
+              TemplateOptionsId: 71828,
+              OptionId: 210,
+              OptionName: 'Sl.No',
+            },
+            {
+              TemplateOptionsId: 71829,
+              OptionId: 211,
+              OptionName: 'Item',
+            },
+            {
+              TemplateOptionsId: 71830,
+              OptionId: 214,
+              OptionName: 'Quantity',
+            },
+            {
+              TemplateOptionsId: 71831,
+              OptionId: 216,
+              OptionName: 'Amount',
+            },
+            {
+              TemplateOptionsId: 71832,
+              OptionId: 217,
+              OptionName: 'Edit',
+            },
+            {
+              TemplateOptionsId: 71833,
+              OptionId: 218,
+              OptionName: 'Delete',
+            },
+          ],
+        ],
+      };
+      await dispatch(
+        changeScanTemplate({
+          Scantemplate: false,
+          changetemp: Scantemplatedata?.changetemp,
+          Template: tempdata,
+          OldTemp: Scantemplatedata?.OldTemp,
+        })
+      );
+      // setIsmounted(false)
+    } else {
+      const templateResponse = await dispatch(
+        getTemplate({ CompId, BranchId, AppId })
+      ).unwrap();
+      dispatch(getPrintSelectionComponentData(Data)).unwrap();
+      templateLoadedRef.current = true;
+      if (
+        !templateResponse?.data?.data ||
+        templateResponse.data.data.length === 0
+      ) {
+        //Professional(Plan);
       }
-    };
-
-    // Add beforeunload listener when the component mounts
-    window.addEventListener('beforeunload', handleUnload);
-
-    // Clean up the event listener when the component unmounts
-    return () => {
-      window.removeEventListener('beforeunload', handleUnload);
-    };
-  }, []);
-
+    }
+    // Check if template data is empty or not
+  };
   const Professional = async (data) => {
     const tempData = {
       SelectedApplication: AppId,
@@ -449,23 +417,6 @@ const BookingPage = () => {
     dispatch(changetemplateData(tempData));
   };
 
-  if (ismounted)
-    return (
-      <div
-        style={{
-          position: 'fixed',
-          top: '0',
-          left: '0',
-          right: '0',
-          bottom: '0',
-          height: '100vh',
-          width: '100vw',
-          backgroundColor: '#fff',
-        }}
-      >
-        <Loader />
-      </div>
-    );
   return (
     <div style={{ backgroundColor: '#fff !important' }}>
       {Object.keys(templateData)?.length > 0 ? (
@@ -484,6 +435,7 @@ const BookingPage = () => {
                   overflow: 'hidden',
                   flexDirection: 'column',
                   fontWeight: '500',
+                  bottom: '3rem',
                 }}
               >
                 Loading Layout...
@@ -503,10 +455,10 @@ const BookingPage = () => {
           </Suspense>
         </>
       ) : (
-        <>{/* {Advance ? <div>Loading...</div> : null} */}</>
+        <Loader />
       )}
     </div>
   );
 };
 
-export default BookingPage;
+export default memo(BookingPage);

src/Pages/BookingScreen/Components/OtherConponents/Reprint/BSReprint.jsx

@@ -30,7 +30,7 @@ import {
   SelectedPrintTemplate,
   GlobalPrinterMappingDtls,
   getPrinterMappingDetails,
-  getPrintSelectionComponentData,
+  // getPrintSelectionComponentData,
 } from '../../../../../Features/ThemeChange/ThemeChange';
 import FormHeader from '../../../../../Pages/PageComponents/FormHeader';
 import { ArrowRightOutlined } from '@ant-design/icons';
@@ -82,10 +82,14 @@ import {
 import { TbSettingsCog } from 'react-icons/tb';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { axiosRetailInstanceData } from '../../../../../Features/AuthenicationToken/AuthenticationToken.js';
-import { MdEdit } from "react-icons/md";
+import { MdEdit } from 'react-icons/md';
 import { v4 as uuidv4 } from 'uuid';
 import { changeOrderOfferDetail } from '../../../../../Features/Offer/Offer.js';
-import { ChangeFullFreeProductList, changeFullOfferAppliedProducts, changeLoyaltyConsumedQuantities } from '../../../../../Features/Offer/Offernew/BookingOffernew.js';
+import {
+  ChangeFullFreeProductList,
+  changeFullOfferAppliedProducts,
+  changeLoyaltyConsumedQuantities,
+} from '../../../../../Features/Offer/Offernew/BookingOffernew.js';
 import { ChangeTotalAmount } from '../../../../../Features/ExteraCharges/ExtraCharges.js';
 import { Radio } from 'antd';
 import ReprintPDFDataShare from './ReprintPDFDataShare.jsx';
@@ -93,7 +97,7 @@ import { ImShare } from 'react-icons/im';
 
 const RetailApiurl = import.meta.env.ENV_API_URL;
 
-function BSReprint({ setOpenModel = () => { } }) {
+function BSReprint({ setOpenModel = () => {} }) {
   const dispatch = useDispatch();
   const queryClient = useQueryClient();
   const appPreferences = useSelector(ApplicationPreferences);
@@ -167,7 +171,7 @@ function BSReprint({ setOpenModel = () => { } }) {
   const AuthToken = sessionStorage.getItem('auth');
   const SessionMobileNo = getSession('MobileNo');
   const [dateStrings, setDateStrings] = useState([]);
-  const [type, setType] = useState("Sales");
+  const [type, setType] = useState('Sales');
   const [showShareModal, setShowShareModal] = useState(false);
   // ---- 1. Fetch Function ----
   const fetchData = async ({ queryKey }) => {
@@ -180,7 +184,7 @@ function BSReprint({ setOpenModel = () => { } }) {
         OrderFromDate: dates?.[0] ?? '',
         OrderToDate: dates?.[1] ?? '',
         PageNumber: page,
-        Type: type
+        Type: type,
       })
     ).unwrap();
     if (Response?.data?.statusCode === 1) {
@@ -263,9 +267,8 @@ function BSReprint({ setOpenModel = () => { } }) {
       // UserId: UserId,
     };
     dispatch(getPrinterMappingDetails(data)).unwrap();
-    const Data1 = { AppId, CompId, BranchId };
-    dispatch(getPrintSelectionComponentData(Data1)).unwrap();
-
+    // const Data1 = { AppId, CompId, BranchId };
+    // dispatch(getPrintSelectionComponentData(Data1)).unwrap();
   }, []);
 
   const handleDateChange = (dates, dateStrings) => {
@@ -604,7 +607,7 @@ function BSReprint({ setOpenModel = () => { } }) {
 
     const selectedStyle =
       stylesMap[
-      printerTemplateStyle == undefined ? 'Style 13' : printerTemplateStyle
+        printerTemplateStyle == undefined ? 'Style 13' : printerTemplateStyle
       ];
     if (selectedStyle) {
       if (data === 'without') {
@@ -950,9 +953,8 @@ function BSReprint({ setOpenModel = () => { } }) {
           onClick={async (e) => await handleEditBill(e, row)}
         />
       ),
-    }
+    },
     // ] : [])
-    ,
     {
       title: () => (
         <div
@@ -1195,6 +1197,7 @@ function BSReprint({ setOpenModel = () => { } }) {
   const mutiplePrint = async (printType) => {
     setIsProcessing(true);
     setProcessingProgress(0);
+
     const result = await MobileMultiPdfPrint({
       printerTemplateStyle,
       printDatas,
@@ -1252,15 +1255,16 @@ function BSReprint({ setOpenModel = () => { } }) {
     const isWeightScale = item?.ScaleType === 'weight';
 
     if (isWeightScale) {
-      return acc + (
-        Weightasquantity
+      return (
+        acc +
+        (Weightasquantity
           ? Math.round(Number(item?.SalesQty || item?.OrderQty || 0))
-          : 1
+          : 1)
       );
     }
 
     return acc + Math.round(Number(item?.SalesQty || item?.OrderQty || 0));
-  }, 0)
+  }, 0);
 
   const widthOutTexAmt = table2Data?.[0]?.TaxDetails?.reduce(
     (sum, item) => sum + (item?.WithOutTaxAmount || 0),
@@ -1292,7 +1296,7 @@ function BSReprint({ setOpenModel = () => { } }) {
       OrderQty: item?.SalesQty,
       OrderRate: item?.Rate,
       SellingPrice: item?.Rate,
-      TaxPercentage: (item?.ProdTaxPercentage || 0)
+      TaxPercentage: item?.ProdTaxPercentage || 0,
       // TotalAmt: formatAmount((item.TotalAmt - item.OfferValue)),
     }));
 
@@ -1302,14 +1306,10 @@ function BSReprint({ setOpenModel = () => { } }) {
 
     if (RefDetails?.[0]?.OfferAppliedProductList) {
       dispatch(
-        changeFullOfferAppliedProducts(
-          RefDetails[0]?.OfferAppliedProductList
-        )
+        changeFullOfferAppliedProducts(RefDetails[0]?.OfferAppliedProductList)
       );
     }
 
-
-
     if (CustSuppId) {
       let res = await dispatch(
         getCustomerForHold({
@@ -1331,8 +1331,9 @@ function BSReprint({ setOpenModel = () => { } }) {
       }
 
       if (res?.data?.statusCode === 1) {
-
-        const loyaltyFreeProductOfferApplied = (RefDetails?.[0]?.OfferAppliedProductList || [])?.filter(
+        const loyaltyFreeProductOfferApplied = (
+          RefDetails?.[0]?.OfferAppliedProductList || []
+        )?.filter(
           (off) =>
             off?.FreeProductsList?.OfferMode === 'L' &&
             off?.TableUniqueName === 'FreeProduct'
@@ -1343,14 +1344,20 @@ function BSReprint({ setOpenModel = () => { } }) {
         );
 
         if (customerDetails) {
-          const { CustId, CustName, CustMobile, LoyaltyPointsDetail, TotalLoyaltyPoints } = customerDetails;
+          const {
+            CustId,
+            CustName,
+            CustMobile,
+            LoyaltyPointsDetail,
+            TotalLoyaltyPoints,
+          } = customerDetails;
           const data = {
             CustId: CustId,
             CustName: CustName,
             label: CustName ? CustName : CustMobile,
             value: CustMobile,
             LoyaltyPointsDetail: LoyaltyPointsDetail,
-            TotalLoyaltyPoints: TotalLoyaltyPoints
+            TotalLoyaltyPoints: TotalLoyaltyPoints,
           };
 
           dispatch(changeOrderOfferDetail([...OrderOfferDetails]));
@@ -1383,7 +1390,6 @@ function BSReprint({ setOpenModel = () => { } }) {
             console.log(loyaltyProdQuantities, 'loyaltyProdQuantities');
           }
         }
-
       }
     }
     await dispatch(changeOrderType('Hold'));
@@ -1395,7 +1401,8 @@ function BSReprint({ setOpenModel = () => { } }) {
     await dispatch(changePreviousOrderPayment(OrderPaymentDtl));
     await dispatch(changePreviousOrderOfferDetail(OrderOfferDetails));
     dispatch(changeOrderCardDetails(updated));
-    let temp = updated?.filter((item) => item.OrderType === 'E')
+    let temp = updated
+      ?.filter((item) => item.OrderType === 'E')
       .map((item) => item.InwardDtlId + ' ' + item.BookingTypeName);
     await dispatch(changeSelProdWiseEst(temp));
 
@@ -1406,11 +1413,11 @@ function BSReprint({ setOpenModel = () => { } }) {
       await dispatch(changeEstimateBooking('Sales'));
       await dispatch(ChangeOverAllDiscSales(parseFloat(OverallDisc)));
     }
-  }
+  };
 
   const typeOptions = [
-    { label: "Sales", value: "Sales" },
-    { label: "Estimate", value: "Est" },
+    { label: 'Sales', value: 'Sales' },
+    { label: 'Estimate', value: 'Est' },
   ];
 
   const typeChange = (e) => {
@@ -1455,15 +1462,17 @@ function BSReprint({ setOpenModel = () => { } }) {
       />
       <div style={{ width: '100%' }}>
         <div className="bsreprintmodaltable-flex">
-          {preferenceEstimate && <div>
-            <Radio.Group
-              options={typeOptions}
-              onChange={typeChange}
-              value={type}
-              optionType="button"
-              buttonStyle="solid"   // optional
-            />
-          </div>}
+          {preferenceEstimate && (
+            <div>
+              <Radio.Group
+                options={typeOptions}
+                onChange={typeChange}
+                value={type}
+                optionType="button"
+                buttonStyle="solid" // optional
+              />
+            </div>
+          )}
           <div>
             <RangePicker
               placeholder={['Start Date', 'End Date']}
@@ -1493,7 +1502,11 @@ function BSReprint({ setOpenModel = () => { } }) {
             }}
           />
           <div>
-            <ImShare fontSize={22} onClick={() => setShowShareModal(true)} style={{ cursor: 'pointer' }} />
+            <ImShare
+              fontSize={22}
+              onClick={() => setShowShareModal(true)}
+              style={{ cursor: 'pointer' }}
+            />
           </div>
           <div>
             {selectedRows.length > 0 && (
@@ -1507,9 +1520,6 @@ function BSReprint({ setOpenModel = () => { } }) {
                   onClick={() => mutiplePrint('whatsapp')}
                   className="icon-whatsapp"
                 />
-                {/* <ReprintPDFDataShare
-                  printData={selectedRows}
-                /> */}
               </div>
             )}
           </div>
@@ -1519,7 +1529,7 @@ function BSReprint({ setOpenModel = () => { } }) {
           <Tables
             columns={columns}
             data={filteredData}
-          // pagination={handlePageChange}
+            // pagination={handlePageChange}
           />
           {countOfProduct > 10 && (
             <Pagination
@@ -1856,13 +1866,15 @@ function BSReprint({ setOpenModel = () => { } }) {
           </div>
         ))}
 
-      {showShareModal && <ReprintPDFDataShare
-        printerTemplateStyle={printerTemplateStyle}
-        printDatas={printDatas}
-        SettingDataSelector={SettingDataSelector}
-        open={showShareModal}
-        onClose={() => setShowShareModal(false)}
-      />}
+      {showShareModal && (
+        <ReprintPDFDataShare
+          printerTemplateStyle={printerTemplateStyle}
+          printDatas={printDatas}
+          SettingDataSelector={SettingDataSelector}
+          open={showShareModal}
+          onClose={() => setShowShareModal(false)}
+        />
+      )}
     </>
   );
 }

src/Pages/BookingScreen/LayoutSubCategoryFetcher.jsx

@@ -0,0 +1,45 @@
+import { useEffect } from 'react';
+import { useSelector, useDispatch, shallowEqual } from 'react-redux';
+import {
+  getLayoutSubCategories,
+  GlobalProductCategorie,
+} from '../../Features/BookingScreen/BookingData/BookingData';
+import { getTemplateData } from '../../Features/ThemeChange/ThemeChange';
+import { getSession } from '../../Services/Others';
+
+const LayoutSubCategoryFetcher = () => {
+  const dispatch = useDispatch();
+
+  const ProdCat = useSelector(GlobalProductCategorie, shallowEqual);
+  const templateData = useSelector(getTemplateData, shallowEqual);
+
+  const CompId = getSession('CompId');
+  const BranchId = getSession('BranchId');
+  const AppId = getSession('AppId');
+
+  useEffect(() => {
+    if (!ProdCat) return;
+
+    const isCategory5 = templateData?.BookingCategory?.[0] === 'Category5';
+    const isLayout2 = templateData?.BookingLayout?.[0] === 'Layout2';
+
+    if (isCategory5 && isLayout2) {
+      dispatch(
+        getLayoutSubCategories({
+          CompId,
+          BranchId,
+          AppId,
+          ProdCat,
+        })
+      );
+    }
+  }, [
+    ProdCat,
+    templateData?.BookingCategory?.[0],
+    templateData?.BookingLayout?.[0],
+  ]);
+
+  return null; // this component renders nothing
+};
+
+export default LayoutSubCategoryFetcher;

src/Pages/BookingScreen/Template/BSLayout1/BSLayout1.jsx

@@ -1,7 +1,9 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { lazy, Suspense, useCallback, useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Tooltip, Badge, Popconfirm, DatePicker } from 'antd';
+import dayjs from 'dayjs';
 import moment from 'moment';
+import { Messages } from '../../../../Components/Notifications/Messages.jsx';
 import { isMobile } from 'react-device-detect';
 import BSNavbar1 from '../../Components/BSNavbar/BSNavbar1';
 import BSNavbar2 from '../../Components/BSNavbar/BSNavbar2';
@@ -12,7 +14,6 @@ import BSBillingTable4 from '../../Components/BSBillingTables/BSBillingTable4/BS
 import BSBillingTable5 from '../../Components/BSBillingTables/BSBillingTable5/BSBillingTable5';
 import BSBillingTable6 from '../../Components/BSBillingTables/BSBillingTable6/BSBTOverall6';
 import BSBillingTable7 from '../../Components/BSBillingTables/BSBillingTable7/BSBillingTable7Overall.jsx';
-import { ArrowUpOutlined } from '@ant-design/icons';
 import BSItemCard from '../../Components/BSItemCards/BSItemCard';
 import CategoryHorizontal from '../../Components/BSCategories/BSCategoryHorizontal';
 import SubCategoryVertical from '../../Components/BSSubCategories/BSSubCategoryVertical';
@@ -39,14 +40,12 @@ import {
   GlobalBtoBQuickProductTransfer,
   GlobalOtherSevices,
 } from '../../../../Features/BookingScreen/BookingData/BookingData.js';
+import { useDateStore } from '../../../../Features/BookingScreen/BookingData/DateStore.js';
 import { getSession } from '../../../../Services/Others.js';
-import { Messages } from '../../../../Components/Notifications/Messages.jsx';
-import BSKioskCounterPayment from '../../Components/UtillComponents/BSKioskCounterPayment.jsx';
 import {
   getKioskDatas,
   globalKioskSalesCount,
 } from '../../../../Features/Kiosk/kiosk.js';
-import SalesCountComponent from '../SalesCountComponent.jsx';
 import PozoKioskIcon from '../../Components/UtillComponents/Pozo retail icons/PozoKioskIcon.jsx';
 import {
   GLobalSadminUserPin,
@@ -54,37 +53,61 @@ import {
   checkSession,
   ApplicationPreferences,
 } from '../../../../Features/BrachLogin/BranchLogin';
-import SAdminUserNotification from '../../Components/BookingFunctionality/SAdminUserNotification.jsx';
 import {
   getBookingStatus,
   GlobalBookingStatus,
 } from '../../../../Features/Payment/PaymentReceivedRetail/PaymentReceivedRetail.js';
-import TooltipWrapper from '../../../../Components/Tooltip/Tooltip.jsx';
-import RetailBookingClosing from '../RetailBookingClose.jsx';
-import { PutBookingClose } from '../../../../Features/BookingScreen/RetailBookingClose.js';
-import BookingCloseIcon from '../../Components/UtillComponents/BookingCloseIcon.jsx';
-import ListOfSalesInvoices from '../../Components/BSBillingTables/ListofInvoices/ListOfSalesInvoices.jsx';
-import BSEwayBillicon from '../../Components/UtillComponents/BSEwayBillicon.jsx';
-import BSComboItemCard from '../../Components/BSItemCards/BSComboItemCard.jsx';
-import BranchTransferComponent from '../../Components/UtillComponents/BSQuickBranchToBranchTransferComponent.jsx';
-import BSExpireProductsList from '../../Components/UtillComponents/BSExpireProductsList.jsx';
-
-import BSOtherServiceItemCard from '../../Components/BSItemCards/BSOtherServiceItemCard.jsx';
 import BSOtherServicesHorizontalcat from '../../Components/BSCategories/BSOtherServicesHorizontalcat';
-import BSNavbar3 from '../../Components/BSNavbar/BSNavbar3.jsx';
-import SalesCountForStandard from '../SalesCountForStandard.jsx';
-import StandardTable from '../../Components/BSBillingTables/StandardTable/StandardTable.jsx';
-import { useDateStore } from '../../../../Features/BookingScreen/BookingData/DateStore.js';
-import dayjs from 'dayjs';
-import BsBookingitemCard from '../../Components/BSItemCards/BsBookingitemCard.jsx';
-import { CiShop } from 'react-icons/ci';
-import BranchName from '../BranchName.jsx';
-import ComboSalesBillTable from '../../Components/BSBillingTables/ComboSalesBillTable/ComboSalesBillTable.jsx';
-import PlanExpireNotification from '../PlanExpireNotification.jsx';
+import { PutBookingClose } from '../../../../Features/BookingScreen/RetailBookingClose.js';
+import TooltipWrapper from '../../../../Components/Tooltip/Tooltip.jsx';
+import BookingCloseIcon from '../../Components/UtillComponents/BookingCloseIcon.jsx';
+import BSEwayBillicon from '../../Components/UtillComponents/BSEwayBillicon.jsx';
+import SAdminUserNotification from '../../Components/BookingFunctionality/SAdminUserNotification.jsx';
+// Jsx Files
+const BSKioskCounterPayment = lazy(
+  () => import('../../Components/UtillComponents/BSKioskCounterPayment.jsx')
+);
+const RetailBookingClosing = lazy(() => import('../RetailBookingClose.jsx'));
+const ListOfSalesInvoices = lazy(
+  () =>
+    import('../../Components/BSBillingTables/ListofInvoices/ListOfSalesInvoices.jsx')
+);
+const BSComboItemCard = lazy(
+  () => import('../../Components/BSItemCards/BSComboItemCard.jsx')
+);
+const BranchTransferComponent = lazy(
+  () =>
+    import('../../Components/UtillComponents/BSQuickBranchToBranchTransferComponent.jsx')
+);
+const BSExpireProductsList = lazy(
+  () => import('../../Components/UtillComponents/BSExpireProductsList.jsx')
+);
+const BSOtherServiceItemCard = lazy(
+  () => import('../../Components/BSItemCards/BSOtherServiceItemCard.jsx')
+);
+const BSNavbar3 = lazy(() => import('../../Components/BSNavbar/BSNavbar3.jsx'));
+const SalesCountForStandard = lazy(
+  () => import('../SalesCountForStandard.jsx')
+);
+const StandardTable = lazy(
+  () =>
+    import('../../Components/BSBillingTables/StandardTable/StandardTable.jsx')
+);
+const BsBookingitemCard = lazy(
+  () => import('../../Components/BSItemCards/BsBookingitemCard.jsx')
+);
+const ComboSalesBillTable = lazy(
+  () =>
+    import('../../Components/BSBillingTables/ComboSalesBillTable/ComboSalesBillTable.jsx')
+);
+const SalesCountComponent = lazy(() => import('../SalesCountComponent.jsx'));
+const PlanExpireNotification = lazy(
+  () => import('../PlanExpireNotification.jsx')
+);
 
 const BSLayout1 = () => {
   const dispatch = useDispatch();
- 
+
   const { selectedDate, setSelectedDate } = useDateStore();
   const SessionData = useSelector(StoredSessionData);
   const AppId = SessionData?.AppId;
@@ -132,7 +155,7 @@ const BSLayout1 = () => {
   const SelectedBillColor = useSelector(SelectedGlobalBillingColorDetail);
 
   const currentDateValue = moment().format('YYYY-MM-DD HH:mm:ss');
- 
+
   const [popOverOpen, setPopOverOpen] = useState(false);
   const appPreferences = useSelector(ApplicationPreferences);
   const salespagefields = appPreferences?.find(
@@ -157,15 +180,16 @@ const BSLayout1 = () => {
     (i) => i.SettingIdName === 'DineIn'
   )?.[0];
   let containerHeight = isMobile
-    ? AppExpDate?.RemainingDays <= 7 || AppExpDate?.PlanType?.toLowerCase() === 'extend'
+    ? AppExpDate?.RemainingDays <= 7 ||
+      AppExpDate?.PlanType?.toLowerCase() === 'extend'
       ? '575px'
       : '595px'
-    : UserType != 'Super Admin' &&
-        UserType != 'Super Admin User' &&
-        AppExpDate?.RemainingDays <= 7 || AppExpDate?.PlanType?.toLowerCase() === 'extend'
+    : (UserType != 'Super Admin' &&
+          UserType != 'Super Admin User' &&
+          AppExpDate?.RemainingDays <= 7) ||
+        AppExpDate?.PlanType?.toLowerCase() === 'extend'
       ? '96vh'
       : '99vh';
- 
 
   useEffect(() => {
     if (AppId && CompId && BranchId && UserId) {
@@ -224,8 +248,6 @@ const BSLayout1 = () => {
     // setBadgeCount(length);
   };
 
- 
-  
   const onComplete = useCallback(() => {
     setMessageData(null);
     setMessageType(null);
@@ -298,352 +320,360 @@ const BSLayout1 = () => {
   };
   // BSLayout1Data?.BookingNavbar?.[1]?.some((item) => item?.OptionName === "AddCustomer")
   return (
-    <>
-      <Messages
-        messageType={messageType}
-        messageData={messageData}
-        onComplete={onComplete}
-      />
-      {UserType != 'Super Admin' &&
-        UserType != 'Super Admin User' &&
-        (AppExpDate?.RemainingDays <= 7 || AppExpDate === 'undefined' || AppExpDate?.PlanType?.toLowerCase() === 'extend') && (
-          <PlanExpireNotification />
-        )}
-      <div
-        className="BSLayout1-Master"
-        style={{ height: containerHeight, overflow: 'hidden' }}
-      >
-        <div className="BSLayout1-NavBar">
-          {BookingNavbar == 'Navbar1' && <BSNavbar1 />}
-          {BookingNavbar == 'Navbar2' && <BSNavbar2 />}
-          {BookingNavbar == 'Navbar3' && <BSNavbar3 />}
-        </div>
+    <Suspense fallback={<div>Loading…</div>}>
+      {' '}
+      <>
+        <Messages
+          messageType={messageType}
+          messageData={messageData}
+          onComplete={onComplete}
+        />
+        {UserType != 'Super Admin' &&
+          UserType != 'Super Admin User' &&
+          (AppExpDate?.RemainingDays <= 7 ||
+            AppExpDate === 'undefined' ||
+            AppExpDate?.PlanType?.toLowerCase() === 'extend') && (
+            <PlanExpireNotification />
+          )}
         <div
-          className={
-            BookingNavbar != 'Navbar3' ? 'BSLayout1' : 'BSLayout1Standard'
-          }
-          style={{
-            backgroundColor: GlobalLayoutColorDetail?.OverallBackgroundColor,
-          }}
+          className="BSLayout1-Master"
+          style={{ height: containerHeight, overflow: 'hidden' }}
         >
-          {BookingNavbar != 'Navbar3' ? (
-            <div className="Layout-bill-container" style={{ marginTop: '9px' }}>
+          <div className="BSLayout1-NavBar">
+            {BookingNavbar == 'Navbar1' && <BSNavbar1 />}
+            {BookingNavbar == 'Navbar2' && <BSNavbar2 />}
+            {BookingNavbar == 'Navbar3' && <BSNavbar3 />}
+          </div>
+          <div
+            className={
+              BookingNavbar != 'Navbar3' ? 'BSLayout1' : 'BSLayout1Standard'
+            }
+            style={{
+              backgroundColor: GlobalLayoutColorDetail?.OverallBackgroundColor,
+            }}
+          >
+            {BookingNavbar != 'Navbar3' ? (
               <div
-                className="Layout-bill-Subcontainer"
-                style={{ width: OtherServicesglobal ? '10%' : '100%' }}
+                className="Layout-bill-container"
+                style={{ marginTop: '9px' }}
               >
-                {UserType !== 'Employee' && (
-                  <div className="pricing-name-details">
-                    {PricingAppPricingName?.[0]?.PricingName +
-                      ' / ' +
-                      PricingAppPricingName?.[0]?.Type}
-                  </div>
-                )}
-                {AvailableDate && (
-                  <div
-                    style={{
-                      padding: '3px 5px',
-                      marginLeft: '1rem',
-                    }}
-                  >
-                    <DatePicker
-                      disabledDate={disablePastDates}
-                      // defaultValue={moment()} // today’s date
-                      format="DD-MMM-YYYY"
-                      value={selectedDate ? dayjs(selectedDate) : null}
-                      onChange={(date) => setSelectedDate(date)}
-                    />
-                  </div>
-                )}
-                {!OtherServicesglobal && (
-                  <SalesCountComponent
-                    DineInAccess={DineInAccess}
-                    GlobalsalesDetailData={GlobalsalesDetailData}
-                  />
-                )}
-                {SessionData?.FeatureAddonData?.FeatureDtls?.find(
-                  (item) =>
-                    item?.FeatureAddonName?.toLowerCase() === 'kiosk sales'
-                ) &&
-                  !sportsAppPreference && (
+                <div
+                  className="Layout-bill-Subcontainer"
+                  style={{ width: OtherServicesglobal ? '10%' : '100%' }}
+                >
+                  {UserType !== 'Employee' && (
+                    <div className="pricing-name-details">
+                      {PricingAppPricingName?.[0]?.PricingName +
+                        ' / ' +
+                        PricingAppPricingName?.[0]?.Type}
+                    </div>
+                  )}
+                  {AvailableDate && (
                     <div
                       style={{
-                        pointerEvents: OrderStatus > 0 ? 'none' : 'auto',
-                        opacity: OrderStatus > 0 ? 0.5 : 1,
+                        padding: '3px 5px',
+                        marginLeft: '1rem',
                       }}
                     >
-                      {!OtherServicesglobal && (
-                        <Tooltip title={'Kiosk Sales'}>
-                          <Badge
-                            count={badgeCount}
-                            offset={[-10, 3]}
-                            size="small"
-                          >
-                            <PozoKioskIcon
-                              onClick={() => openModalKiosk()}
-                              style={{ cursor: 'pointer', fontSize: '1.5rem' }}
-                              className="iconsize"
-                            />
-                          </Badge>
-                        </Tooltip>
-                      )}
-                    </div>
-                  )}
-                {!OtherServicesglobal && (
-                  <TooltipWrapper
-                    title={'Low Stock Alerts'}
-                    isMobile={isMobile}
-                  >
-                    {' '}
-                    <BSExpireProductsList />
-                  </TooltipWrapper>
-                )}
-                {Kioskopen && (
-                  <BSKioskCounterPayment
-                    Kioskopen={Kioskopen}
-                    closeKioskModal={closeModalKiosk}
-                  />
-                )}
-                {SAdminuserPin?.length > 0 &&
-                  UserType != 'Super Admin User' && (
-                    <div>
-                      <SAdminUserNotification
-                        SAdminuserPin={SAdminuserPin}
-                        popOverOpen={popOverOpen}
-                        handleSupportUser={handleSupportUser}
-                        handlePopOverOpen={handlePopOverOpen}
+                      <DatePicker
+                        disabledDate={disablePastDates}
+                        // defaultValue={moment()} // today’s date
+                        format="DD-MMM-YYYY"
+                        value={selectedDate ? dayjs(selectedDate) : null}
+                        onChange={(date) => setSelectedDate(date)}
                       />
                     </div>
                   )}
-                {!OtherServicesglobal && (
-                  <>
-                    <div>
-                      {CheckBookingStatus == 'Open' ? (
-                        <div style={{ marginLeft: '10px' }}>
-                          <TooltipWrapper
-                            title={'Booking Close'}
-                            isMobile={isMobile}
-                          >
-                            {' '}
-                            <BookingCloseIcon
-                              onClick={OpenBookingModal}
-                              bgFill={'#52c41a'}
-                              style={{
-                                fontSize: '16px',
-                                marginTop: '4px',
-                                color: '#52c41a',
-                                cursor: 'pointer',
-                              }}
-                            />
-                          </TooltipWrapper>
-                        </div>
-                      ) : (
-                        <div style={{ marginLeft: '10px' }}>
-                          <TooltipWrapper
-                            title="Booking Open"
-                            isMobile={isMobile}
-                          >
-                            <Popconfirm
-                              placement="leftTop"
-                              title="Booking Open"
-                              description="Are you sure you want to Open the sales?"
-                              okText="Yes"
-                              cancelText="No"
-                              onConfirm={() => BookingOpenFun('Open')}
-                            >
-                              <span>
-                                <BookingCloseIcon
-                                  bgFill="red"
-                                  style={{
-                                    fontSize: '16px',
-                                    marginTop: '4px',
-                                    color: '#52c41a',
-                                    cursor: 'pointer',
-                                  }}
-                                />
-                              </span>
-                            </Popconfirm>
-                          </TooltipWrapper>
-                        </div>
-                      )}
-                    </div>
-                    <div style={{ marginLeft: '10px' }}>
-                      <TooltipWrapper title={'E-way Bill'} isMobile={isMobile}>
-                        {''}
-                        <BSEwayBillicon
-                          style={{ cursor: 'pointer', marginTop: '5px' }}
-                          onClick={OpenListOfInvoices}
-                        />
-                      </TooltipWrapper>
-                    </div>
-                  </>
-                )}
-              </div>
-            </div>
-          ) : (
-            <SalesCountForStandard
-              PricingAppPricingName={PricingAppPricingName}
-              DineInAccess={DineInAccess}
-              GlobalsalesDetailData={GlobalsalesDetailData}
-            />
-          )}
-          <div className="BSLayout1-ContentDiv">
-            <div className="BSCategory1-Contentcont">
-              <div
-                style={{
-                  backgroundColor:
-                    SelectedCatgColor?.['OverallBackgroundColor'],
-                }}
-              >
-                {!OtherServicesglobal && (
-                  <CategoryHorizontal
-                    categoryFunction={dynamicComponentProps(
-                      'Category',
-                      BSLayout1Data?.BookingCategory?.[1],
-                      BSLayout1Data?.BookingCategory?.[0]
-                    )}
-                  />
-                )}
-                {OtherServicesglobal && (
-                  <BSOtherServicesHorizontalcat
-                    categoryFunction={dynamicComponentProps(
-                      'Category',
-                      BSLayout1Data?.BookingCategory?.[1],
-                      BSLayout1Data?.BookingCategory?.[0]
-                    )}
-                  />
-                )}
-              </div>
-
-              <div className="BSCategory1-Cardcont">
-                <div
-                  style={{
-                    backgroundColor:
-                      SelectedSubCatgColor?.['OverallBackgroundColor'],
-                  }}
-                >
-                  {Comboglobal === false && !OtherServicesglobal && (
-                    <SubCategoryVertical
-                      categoryFunction={dynamicComponentProps(
-                        'SubCategory',
-                        BSLayout1Data?.BookingSubCategory?.[1],
-                        BSLayout1Data?.BookingSubCategory?.[0]
-                      )}
+                  {!OtherServicesglobal && (
+                    <SalesCountComponent
+                      DineInAccess={DineInAccess}
+                      GlobalsalesDetailData={GlobalsalesDetailData}
                     />
                   )}
+                  {SessionData?.FeatureAddonData?.FeatureDtls?.find(
+                    (item) =>
+                      item?.FeatureAddonName?.toLowerCase() === 'kiosk sales'
+                  ) &&
+                    !sportsAppPreference && (
+                      <div
+                        style={{
+                          pointerEvents: OrderStatus > 0 ? 'none' : 'auto',
+                          opacity: OrderStatus > 0 ? 0.5 : 1,
+                        }}
+                      >
+                        {!OtherServicesglobal && (
+                          <Tooltip title={'Kiosk Sales'}>
+                            <Badge
+                              count={badgeCount}
+                              offset={[-10, 3]}
+                              size="small"
+                            >
+                              <PozoKioskIcon
+                                onClick={() => openModalKiosk()}
+                                style={{
+                                  cursor: 'pointer',
+                                  fontSize: '1.5rem',
+                                }}
+                                className="iconsize"
+                              />
+                            </Badge>
+                          </Tooltip>
+                        )}
+                      </div>
+                    )}
+                  {!OtherServicesglobal && (
+                    <TooltipWrapper
+                      title={'Low Stock Alerts'}
+                      isMobile={isMobile}
+                    >
+                      {' '}
+                      <BSExpireProductsList />
+                    </TooltipWrapper>
+                  )}
+                  {Kioskopen && (
+                    <BSKioskCounterPayment
+                      Kioskopen={Kioskopen}
+                      closeKioskModal={closeModalKiosk}
+                    />
+                  )}
+                  {SAdminuserPin?.length > 0 &&
+                    UserType != 'Super Admin User' && (
+                      <div>
+                        <SAdminUserNotification
+                          SAdminuserPin={SAdminuserPin}
+                          popOverOpen={popOverOpen}
+                          handleSupportUser={handleSupportUser}
+                          handlePopOverOpen={handlePopOverOpen}
+                        />
+                      </div>
+                    )}
+                  {!OtherServicesglobal && (
+                    <>
+                      <div>
+                        {CheckBookingStatus == 'Open' ? (
+                          <div style={{ marginLeft: '10px' }}>
+                            <TooltipWrapper
+                              title={'Booking Close'}
+                              isMobile={isMobile}
+                            >
+                              {' '}
+                              <BookingCloseIcon
+                                onClick={OpenBookingModal}
+                                bgFill={'#52c41a'}
+                                style={{
+                                  fontSize: '16px',
+                                  marginTop: '4px',
+                                  color: '#52c41a',
+                                  cursor: 'pointer',
+                                }}
+                              />
+                            </TooltipWrapper>
+                          </div>
+                        ) : (
+                          <div style={{ marginLeft: '10px' }}>
+                            <TooltipWrapper
+                              title="Booking Open"
+                              isMobile={isMobile}
+                            >
+                              <Popconfirm
+                                placement="leftTop"
+                                title="Booking Open"
+                                description="Are you sure you want to Open the sales?"
+                                okText="Yes"
+                                cancelText="No"
+                                onConfirm={() => BookingOpenFun('Open')}
+                              >
+                                <span>
+                                  <BookingCloseIcon
+                                    bgFill="red"
+                                    style={{
+                                      fontSize: '16px',
+                                      marginTop: '4px',
+                                      color: '#52c41a',
+                                      cursor: 'pointer',
+                                    }}
+                                  />
+                                </span>
+                              </Popconfirm>
+                            </TooltipWrapper>
+                          </div>
+                        )}
+                      </div>
+                      <div style={{ marginLeft: '10px' }}>
+                        <TooltipWrapper
+                          title={'E-way Bill'}
+                          isMobile={isMobile}
+                        >
+                          {''}
+                          <BSEwayBillicon
+                            style={{ cursor: 'pointer', marginTop: '5px' }}
+                            onClick={OpenListOfInvoices}
+                          />
+                        </TooltipWrapper>
+                      </div>
+                    </>
+                  )}
                 </div>
-
+              </div>
+            ) : (
+              <SalesCountForStandard
+                PricingAppPricingName={PricingAppPricingName}
+                DineInAccess={DineInAccess}
+                GlobalsalesDetailData={GlobalsalesDetailData}
+              />
+            )}
+            <div className="BSLayout1-ContentDiv">
+              <div className="BSCategory1-Contentcont">
                 <div
-                  className="layout1-card-content"
                   style={{
                     backgroundColor:
-                      SelectedCardColor?.['OverallBackgroundColor'],
-                    width: '100vw',
-                    display: 'flex',
+                      SelectedCatgColor?.['OverallBackgroundColor'],
                   }}
                 >
-                  {Comboglobal === false &&
-                    !OtherServicesglobal &&
-                    (AvailableDate ? (
-                      <BsBookingitemCard
-                        screenHeight={screenHeight}
-                        cardFunctionality={dynamicComponentProps(
-                          'Card',
-                          BSLayout1Data?.BookingCard?.[1],
-                          BSLayout1Data?.BookingCard?.[0]
-                        )}
-                      />
-                    ) : (
-                      <BSItemCard
-                        screenHeight={screenHeight}
-                        cardFunctionality={dynamicComponentProps(
-                          'Card',
-                          BSLayout1Data?.BookingCard?.[1],
-                          BSLayout1Data?.BookingCard?.[0]
-                        )}
-                      />
-                    ))}
-                  {Comboglobal === true && !OtherServicesglobal && (
-                    <BSComboItemCard
-                      screenHeight={screenHeight}
-                      cardFunctionality={dynamicComponentProps(
-                        'Card',
-                        BSLayout1Data?.BookingCard?.[1],
-                        BSLayout1Data?.BookingCard?.[0]
+                  {!OtherServicesglobal && (
+                    <CategoryHorizontal
+                      categoryFunction={dynamicComponentProps(
+                        'Category',
+                        BSLayout1Data?.BookingCategory?.[1],
+                        BSLayout1Data?.BookingCategory?.[0]
                       )}
                     />
                   )}
                   {OtherServicesglobal && (
-                    <BSOtherServiceItemCard
-                      screenHeight={screenHeight}
-                      cardFunctionality={dynamicComponentProps(
-                        'Card',
-                        BSLayout1Data?.BookingCard?.[1],
-                        BSLayout1Data?.BookingCard?.[0]
+                    <BSOtherServicesHorizontalcat
+                      categoryFunction={dynamicComponentProps(
+                        'Category',
+                        BSLayout1Data?.BookingCategory?.[1],
+                        BSLayout1Data?.BookingCategory?.[0]
                       )}
                     />
                   )}
                 </div>
+
+                <div className="BSCategory1-Cardcont">
+                  <div
+                    style={{
+                      backgroundColor:
+                        SelectedSubCatgColor?.['OverallBackgroundColor'],
+                    }}
+                  >
+                    {Comboglobal === false && !OtherServicesglobal && (
+                      <SubCategoryVertical
+                        categoryFunction={dynamicComponentProps(
+                          'SubCategory',
+                          BSLayout1Data?.BookingSubCategory?.[1],
+                          BSLayout1Data?.BookingSubCategory?.[0]
+                        )}
+                      />
+                    )}
+                  </div>
+
+                  <div
+                    className="layout1-card-content"
+                    style={{
+                      backgroundColor:
+                        SelectedCardColor?.['OverallBackgroundColor'],
+                      width: '100vw',
+                      display: 'flex',
+                    }}
+                  >
+                    {Comboglobal === false &&
+                      !OtherServicesglobal &&
+                      (AvailableDate ? (
+                        <BsBookingitemCard
+                          screenHeight={screenHeight}
+                          cardFunctionality={dynamicComponentProps(
+                            'Card',
+                            BSLayout1Data?.BookingCard?.[1],
+                            BSLayout1Data?.BookingCard?.[0]
+                          )}
+                        />
+                      ) : (
+                        <BSItemCard
+                          screenHeight={screenHeight}
+                          cardFunctionality={dynamicComponentProps(
+                            'Card',
+                            BSLayout1Data?.BookingCard?.[1],
+                            BSLayout1Data?.BookingCard?.[0]
+                          )}
+                        />
+                      ))}
+                    {Comboglobal === true && !OtherServicesglobal && (
+                      <BSComboItemCard
+                        screenHeight={screenHeight}
+                        cardFunctionality={dynamicComponentProps(
+                          'Card',
+                          BSLayout1Data?.BookingCard?.[1],
+                          BSLayout1Data?.BookingCard?.[0]
+                        )}
+                      />
+                    )}
+                    {OtherServicesglobal && (
+                      <BSOtherServiceItemCard
+                        screenHeight={screenHeight}
+                        cardFunctionality={dynamicComponentProps(
+                          'Card',
+                          BSLayout1Data?.BookingCard?.[1],
+                          BSLayout1Data?.BookingCard?.[0]
+                        )}
+                      />
+                    )}
+                  </div>
+                </div>
+              </div>
+              <div className="BSCategory1-tablecont">
+                {action ? (
+                  <BranchTransferComponent />
+                ) : (
+                  <>
+                    {BSLayout1Data?.BookingBilling?.[0] == 'Billing1' && (
+                      <BSBillingTable1 />
+                    )}
+                    {BSLayout1Data?.BookingBilling?.[0] == 'Billing2' && (
+                      <BSBillingTable2 />
+                    )}
+                    {BSLayout1Data?.BookingBilling?.[0] == 'Billing3' && (
+                      <BSBillingTable3 />
+                    )}
+                    {BSLayout1Data?.BookingBilling?.[0] == 'Billing4' && (
+                      <BSBillingTable4 />
+                    )}
+                    {BSLayout1Data?.BookingBilling?.[0] == 'Billing5' && (
+                      <BSBillingTable5 />
+                    )}
+                    {BSLayout1Data?.BookingBilling?.[0] == 'Billing6' && (
+                      <BSBillingTable6 />
+                    )}
+                    {BSLayout1Data?.BookingBilling?.[0] == 'Billing7' && (
+                      <BSBillingTable7 />
+                    )}
+                    {BookingBilling == 'Billing8' && <ComboSalesBillTable />}
+                    {BSLayout1Data?.BookingBilling?.[0] ==
+                      'StandardBilling' && (
+                      <div className="BSCategory2New">
+                        <StandardTable />
+                      </div>
+                    )}
+                  </>
+                )}
               </div>
-            </div>
-            <div className="BSCategory1-tablecont">
-              {action ? (
-                <BranchTransferComponent />
-              ) : (
-                <>
-                  {BSLayout1Data?.BookingBilling?.[0] == 'Billing1' && (
-                    <BSBillingTable1 />
-                  )}
-                  {BSLayout1Data?.BookingBilling?.[0] == 'Billing2' && (
-                    <BSBillingTable2 />
-                  )}
-                  {BSLayout1Data?.BookingBilling?.[0] == 'Billing3' && (
-                    <BSBillingTable3 />
-                  )}
-                  {BSLayout1Data?.BookingBilling?.[0] == 'Billing4' && (
-                    <BSBillingTable4 />
-                  )}
-                  {BSLayout1Data?.BookingBilling?.[0] == 'Billing5' && (
-                    <BSBillingTable5 />
-                  )}
-                  {BSLayout1Data?.BookingBilling?.[0] == 'Billing6' && (
-                    <BSBillingTable6 />
-                  )}
-                  {BSLayout1Data?.BookingBilling?.[0] == 'Billing7' && (
-                    <BSBillingTable7 />
-                  )}
-                  {BookingBilling == 'Billing8' && <ComboSalesBillTable />}
-                  {BSLayout1Data?.BookingBilling?.[0] == 'StandardBilling' && (
-                    <div className="BSCategory2New">
-                      <StandardTable />
-                    </div>
-                  )}
-                </>
-              )}
-              {/* <div className="salesStoreName"
-                style={{
-                  color: SelectedBillColor?.['FontColor'],
-                  backgroundColor: SelectedBillColor?.['BackgroundColor'],
-                }}>
-              <BranchName/>
-              </div> */}
             </div>
           </div>
         </div>
-      </div>
-      {BookingModalOpen && (
-        <RetailBookingClosing
-          PaymentOpen={BookingModalOpen}
-          PaymentClose={HandleBookingModalClose}
-        />
-      )}
-      {ListOfInvoices && (
-        <ListOfSalesInvoices
-          ListOfInvoicesOpen={ListOfInvoices}
-          handleInvoiceClose={handleInvoiceClose}
-        />
-      )}
-    </>
+        {BookingModalOpen && (
+          <RetailBookingClosing
+            PaymentOpen={BookingModalOpen}
+            PaymentClose={HandleBookingModalClose}
+          />
+        )}
+        {ListOfInvoices && (
+          <ListOfSalesInvoices
+            ListOfInvoicesOpen={ListOfInvoices}
+            handleInvoiceClose={handleInvoiceClose}
+          />
+        )}
+      </>
+    </Suspense>
   );
 };
 

src/Pages/BookingScreen/Template/BSLayout2/BSLayout2.jsx

@@ -110,6 +110,7 @@ const SalesCountForStandard = lazy(
   () => import('../SalesCountForStandard.jsx')
 );
 import BsBookingitemCard from '../../Components/BSItemCards/BsBookingitemCard.jsx';
+import LayoutSubCategoryFetcher from '../../LayoutSubCategoryFetcher.jsx';
 const ListOfSalesInvoices = lazy(
   () =>
     import('../../Components/BSBillingTables/ListofInvoices/ListOfSalesInvoices.jsx')
@@ -182,15 +183,17 @@ const BSLayout2 = () => {
     (i) => i.SettingIdName === 'DineIn'
   )?.[0];
   let containerHeight = isMobile
-    ? AppExpDate?.RemainingDays <= 7 || AppExpDate?.PlanType?.toLowerCase() === 'extend'
+    ? AppExpDate?.RemainingDays <= 7 ||
+      AppExpDate?.PlanType?.toLowerCase() === 'extend'
       ? '575px'
       : ''
-    : UserType != 'Super Admin' &&
-        UserType != 'Super Admin User' &&
-        AppExpDate?.RemainingDays <= 7 || AppExpDate?.PlanType?.toLowerCase() === 'extend'
+    : (UserType != 'Super Admin' &&
+          UserType != 'Super Admin User' &&
+          AppExpDate?.RemainingDays <= 7) ||
+        AppExpDate?.PlanType?.toLowerCase() === 'extend'
       ? '96vh'
       : '99vh';
-  
+
   const [ListOfInvoices, setListOfInvoices] = useState(false);
   const appPreferences = useSelector(ApplicationPreferences);
   const salespagefields = appPreferences?.find(
@@ -210,7 +213,6 @@ const BSLayout2 = () => {
       preference?.PreferredStatus == 'Y'
   );
 
-
   useEffect(() => {
     fetchAmount();
     if (
@@ -226,7 +228,7 @@ const BSLayout2 = () => {
       fetchBookingStatus();
     }
   }, [AppId, CompId, BranchId, UserId]);
- 
+
   const fetchAmount = async () => {
     let data = {
       CompId: CompId,
@@ -334,9 +336,11 @@ const BSLayout2 = () => {
       <div ref={elementRef} style={{ backgroundColor: '#fff' }}>
         {UserType != 'Super Admin' &&
           UserType != 'Super Admin User' &&
-          (AppExpDate?.RemainingDays <= 7 || AppExpDate === 'undefined' || AppExpDate?.PlanType?.toLowerCase() === 'extend') && (
+          (AppExpDate?.RemainingDays <= 7 ||
+            AppExpDate === 'undefined' ||
+            AppExpDate?.PlanType?.toLowerCase() === 'extend') && (
             <Suspense fallback={<div>Loading...</div>}>
-              <PlanExpireNotification/>
+              <PlanExpireNotification />
             </Suspense>
           )}
         <div
@@ -679,6 +683,8 @@ const BSLayout2 = () => {
           />
         </Suspense>
       )}
+
+      <LayoutSubCategoryFetcher />
     </>
   );
 };

src/Pages/BookingScreen/Template/BSLayout3/BSLayout3.jsx

@@ -1,10 +1,15 @@
-import React, { useEffect, useState, useCallback } from 'react';
+import React, {
+  useEffect,
+  useState,
+  useCallback,
+  lazy,
+  Suspense,
+  useMemo,
+} from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import moment from 'moment';
 import { Tooltip, Badge, Popconfirm } from 'antd';
 import { isMobile } from 'react-device-detect';
-import BSNavbar1 from '../../Components/BSNavbar/BSNavbar1';
-import BSNavbar2 from '../../Components/BSNavbar/BSNavbar2';
 import CategoryHorizontal from '../../Components/BSCategories/BSCategoryHorizontal';
 import SubCategoryHorizontal from '../../Components/BSSubCategories/BSSubCategoryHorizontal';
 import BSItemCard from '../../Components/BSItemCards/BSItemCard';
@@ -12,8 +17,8 @@ import BSBillingTable1 from '../../Components/BSBillingTables/BSBillingTable1/BS
 import BSBillingTable2 from '../../Components/BSBillingTables/BSBillingTable2/BSBillingTable2';
 import BSBillingTable3 from '../../Components/BSBillingTables/BSBillingTable3/BSBillingTable3overall';
 import BSBillingTable4 from '../../Components/BSBillingTables/BSBillingTable4/BSBillingTable4Full';
-import BSBillingTable5 from '../../Components/BSBillingTables/BSBillingTable5/BSBillingTable5';
 import BSBillingTable6 from '../../Components/BSBillingTables/BSBillingTable6/BSBTOverall6';
+import BSBillingTable5 from '../../Components/BSBillingTables/BSBillingTable5/BSBillingTable5';
 import BSBillingTable7 from '../../Components/BSBillingTables/BSBillingTable7/BSBillingTable7Overall.jsx';
 import { dynamicComponentProps } from '../DynamicComponentProps.js';
 import {
@@ -26,13 +31,10 @@ import {
   SelectedGlobalSubCatgColorDetail,
   StoredSessionData,
 } from '../../../../Features/ThemeChange/ThemeChange';
-import { ArrowUpOutlined } from '@ant-design/icons';
-import { settingDataSelector } from '../../../../Features/PreferenceMaster/PreferenceMaster.js';
 import {
   GlobalSalesDetailData,
   getSalesDetailData,
   GlobalCombosearch,
-  GlobalOrderCardDetails,
   PreferenceData,
   GlobalOrderStatus,
   GlobalAppExpDateData,
@@ -40,46 +42,77 @@ import {
   GlobalOtherSevices,
 } from '../../../../Features/BookingScreen/BookingData/BookingData.js';
 import { getSession } from '../../../../Services/Others.js';
-import BSKioskCounterPayment from '../../Components/UtillComponents/BSKioskCounterPayment.jsx';
+import { PutBookingClose } from '../../../../Features/BookingScreen/RetailBookingClose.js';
 import {
   getKioskDatas,
   globalKioskSalesCount,
 } from '../../../../Features/Kiosk/kiosk.js';
-import PozoKioskIcon from '../../Components/UtillComponents/Pozo retail icons/PozoKioskIcon.jsx';
 import {
   GLobalSadminUserPin,
   putSadminUserExit,
   checkSession,
   ApplicationPreferences,
-} from '../../../../Features/BrachLogin/BranchLogin';
+} from '../../../../Features/BrachLogin/BranchLogin.js';
+// Icons
+import PozoKioskIcon from '../../Components/UtillComponents/Pozo retail icons/PozoKioskIcon.jsx';
+import BookingCloseIcon from '../../Components/UtillComponents/BookingCloseIcon.jsx';
+import BSEwayBillicon from '../../Components/UtillComponents/BSEwayBillicon.jsx';
 import { Messages } from '../../../../Components/Notifications/Messages.jsx';
 import SAdminUserNotification from '../../Components/BookingFunctionality/SAdminUserNotification.jsx';
-import '../../../../Styles/BookingScreen/Template/BSLayout3/BSLayout3.scss';
-import SalesCountComponent from '../SalesCountComponent.jsx';
 import {
   getBookingStatus,
   GlobalBookingStatus,
 } from '../../../../Features/Payment/PaymentReceivedRetail/PaymentReceivedRetail.js';
 import TooltipWrapper from '../../../../Components/Tooltip/Tooltip.jsx';
 import RetailBookingClosing from '../RetailBookingClose.jsx';
-import { PutBookingClose } from '../../../../Features/BookingScreen/RetailBookingClose.js';
-import BookingCloseIcon from '../../Components/UtillComponents/BookingCloseIcon.jsx';
-import ListOfSalesInvoices from '../../Components/BSBillingTables/ListofInvoices/ListOfSalesInvoices.jsx';
-import BSEwayBillicon from '../../Components/UtillComponents/BSEwayBillicon.jsx';
-import BSComboItemCard from '../../Components/BSItemCards/BSComboItemCard.jsx';
-import BranchTransferComponent from '../../Components/UtillComponents/BSQuickBranchToBranchTransferComponent.jsx';
-import BSExpireProductsList from '../../Components/UtillComponents/BSExpireProductsList.jsx';
+// Jsx Files
+const SalesCountComponent = lazy(() => import('../SalesCountComponent.jsx'));
+const BSKioskCounterPayment = lazy(
+  () => import('../../Components/UtillComponents/BSKioskCounterPayment.jsx')
+);
+const ListOfSalesInvoices = lazy(
+  () =>
+    import('../../Components/BSBillingTables/ListofInvoices/ListOfSalesInvoices.jsx')
+);
+const BSComboItemCard = lazy(
+  () => import('../../Components/BSItemCards/BSComboItemCard.jsx')
+);
+const BranchTransferComponent = lazy(
+  () =>
+    import('../../Components/UtillComponents/BSQuickBranchToBranchTransferComponent.jsx')
+);
+const BSExpireProductsList = lazy(
+  () => import('../../Components/UtillComponents/BSExpireProductsList.jsx')
+);
+const BSOtherServiceItemCard = lazy(
+  () => import('../../Components/BSItemCards/BSOtherServiceItemCard.jsx')
+);
+const BSOtherServicesHorizontalcat = lazy(
+  () => import('../../Components/BSCategories/BSOtherServicesHorizontalcat')
+);
+const BSNavbar3 = lazy(() => import('../../Components/BSNavbar/BSNavbar3.jsx'));
+const SalesCountForStandard = lazy(
+  () => import('../SalesCountForStandard.jsx')
+);
+const StandardTable = lazy(
+  () =>
+    import('../../Components/BSBillingTables/StandardTable/StandardTable.jsx')
+);
+const ComboSalesBillTable = lazy(
+  () =>
+    import('../../Components/BSBillingTables/ComboSalesBillTable/ComboSalesBillTable.jsx')
+);
+const PlanExpireNotification = lazy(
+  () => import('../PlanExpireNotification.jsx')
+);
+const BSNavbar1 = lazy(() => import('../../Components/BSNavbar/BSNavbar1'));
+const BSNavbar2 = lazy(() => import('../../Components/BSNavbar/BSNavbar2'));
+// Scss
+import '../../../../Styles/BookingScreen/Template/BSLayout3/BSLayout3.scss';
+
 const subDirectory = import.meta.env.BASE_URL;
 const commonDirectory = import.meta.env.COMMON_BASE_URL;
-import BSOtherServiceItemCard from '../../Components/BSItemCards/BSOtherServiceItemCard.jsx';
-import BSOtherServicesHorizontalcat from '../../Components/BSCategories/BSOtherServicesHorizontalcat';
-import BSNavbar3 from '../../Components/BSNavbar/BSNavbar3.jsx';
-import SalesCountForStandard from '../SalesCountForStandard.jsx';
-import StandardTable from '../../Components/BSBillingTables/StandardTable/StandardTable.jsx';
-import { CiShop } from 'react-icons/ci';
-import BranchName from '../BranchName.jsx';
-import ComboSalesBillTable from '../../Components/BSBillingTables/ComboSalesBillTable/ComboSalesBillTable.jsx';
-import PlanExpireNotification from '../PlanExpireNotification.jsx';
+
 const BSLayout3 = () => {
   const dispatch = useDispatch();
   const { action, selectedProducts } = useSelector(
@@ -106,10 +139,12 @@ const BSLayout3 = () => {
   const BookingStatus = useSelector(GlobalBookingStatus);
   const appPreferences = useSelector(ApplicationPreferences);
   const commonModulePreference = appPreferences?.find(
-    (preference) => preference?.PreferredCatName === "Common Module"
+    (preference) => preference?.PreferredCatName === 'Common Module'
   )?.PreferenceCatDetails;
   const sportsAppPreference = commonModulePreference?.find(
-    (preference) => preference?.PreferredSubCatName === "SportsApp" && preference?.PreferredStatus == 'Y'
+    (preference) =>
+      preference?.PreferredSubCatName === 'SportsApp' &&
+      preference?.PreferredStatus == 'Y'
   );
   const CheckBookingStatus =
     BookingStatus?.find((item) => item.ScreenType === 'Booking')
@@ -124,10 +159,13 @@ const BSLayout3 = () => {
   const BookingSubCategory = BSLayout3Data?.BookingSubCategory;
   const BookingCard = BSLayout3Data?.BookingCard;
   const BookingBilling = BSLayout3Data?.BookingBilling?.[0];
- 
-  const DineInAccess = SettingDataSelector?.[0]?.SettingDtlDetails.filter(
-    (i) => i.SettingIdName === 'DineIn'
-  )?.[0];
+  const animations = ['example1', 'example2', 'example3'];
+  let ss = animations[count];
+  const DineInAccess = useMemo(() => {
+    return SettingDataSelector?.[0]?.SettingDtlDetails.filter(
+      (i) => i.SettingIdName === 'DineIn'
+    )?.[0];
+  }, [SettingDataSelector]);
   const [ListOfInvoices, setListOfInvoices] = useState(false);
   const AppId = SessionData?.AppId;
   const CompId = SessionData?.CompId;
@@ -136,12 +174,14 @@ const BSLayout3 = () => {
   const UserType = SessionData?.UserType;
   const currentDateValue = moment().format('YYYY-MM-DD HH:mm:ss');
   let containerHeight = isMobile
-    ? AppExpDate?.RemainingDays <= 7 || AppExpDate?.PlanType?.toLowerCase() === 'extend'
+    ? AppExpDate?.RemainingDays <= 7 ||
+      AppExpDate?.PlanType?.toLowerCase() === 'extend'
       ? '576px'
       : '590px'
-    : UserType != 'Super Admin' &&
-      UserType != 'Super Admin User' &&
-      AppExpDate?.RemainingDays <= 7 || AppExpDate?.PlanType?.toLowerCase() === 'extend'
+    : (UserType != 'Super Admin' &&
+          UserType != 'Super Admin User' &&
+          AppExpDate?.RemainingDays <= 7) ||
+        AppExpDate?.PlanType?.toLowerCase() === 'extend'
       ? '95vh'
       : '99vh';
   const SAdminuserPin = useSelector(GLobalSadminUserPin);
@@ -162,7 +202,6 @@ const BSLayout3 = () => {
     }
   }, [SessionData]);
 
- 
   const fetchKioskDatas = async () => {
     let data = {
       CompId: CompId,
@@ -261,302 +300,330 @@ const BSLayout3 = () => {
     setListOfInvoices(false);
   };
   return (
-    <>
-      <Messages
-        messageType={messageType}
-        messageData={messageData}
-        onComplete={onComplete}
-      />
-      {UserType != 'Super Admin' &&
-        UserType != 'Super Admin User' &&
-        (AppExpDate?.RemainingDays <= 7 || AppExpDate === 'undefined' || AppExpDate?.PlanType?.toLowerCase() === 'extend') && (
-         <PlanExpireNotification />
-        )}
-      <div
-        className="BSLayout3-Master"
-        style={{ height: containerHeight, overflow: 'hidden' }}
-      >
-        <div className="BSLayout3-NavBar">
-          {BookingNavbar == 'Navbar1' && <BSNavbar1 />}
-          {BookingNavbar == 'Navbar2' && <BSNavbar2 />}
-          {BookingNavbar == 'Navbar3' && <BSNavbar3 />}
-        </div>
+    <Suspense fallback={<div>Suspense Loading...</div>}>
+      <>
+        <Messages
+          messageType={messageType}
+          messageData={messageData}
+          onComplete={onComplete}
+        />
+        {UserType != 'Super Admin' &&
+          UserType != 'Super Admin User' &&
+          (AppExpDate?.RemainingDays <= 7 ||
+            AppExpDate === 'undefined' ||
+            AppExpDate?.PlanType?.toLowerCase() === 'extend') && (
+            <PlanExpireNotification />
+          )}
         <div
-          className={BookingNavbar != 'Navbar3' ? "BSLayout3" : "BSLayout3Standard"}
-          style={{
-            backgroundColor: GlobalLayoutColorDetail?.OverallBackgroundColor,
-          }}
+          className="BSLayout3-Master"
+          style={{ height: containerHeight, overflow: 'hidden' }}
         >
-          {BookingNavbar != 'Navbar3' ? (
-            <div className="Layout-bill-container" style={{ marginTop: '9px' }}>
-              <div className="Layout-bill-Subcontainer" style={{ width: OtherServicesglobal ? "10%" : "100%" }}>
-                {UserType !== 'Employee' &&
-                  <div className="pricing-name-details">
-                    {PricingAppPricingName?.[0]?.PricingName +
-                      ' / ' +
-                      PricingAppPricingName?.[0]?.Type}
-                  </div>
-                }
-                {!OtherServicesglobal && <SalesCountComponent
-                  DineInAccess={DineInAccess}
-                  GlobalsalesDetailData={GlobalsalesDetailData}
-                />}
-                {!OtherServicesglobal && SessionData?.FeatureAddonData?.FeatureDtls?.find(
-                  (item) =>
-                    item?.FeatureAddonName?.toLowerCase() === 'kiosk sales'
-                ) && !sportsAppPreference && (
-                    <div
-                      style={{
-                        pointerEvents: OrderStatus > 0 ? 'none' : 'auto',
-                        opacity: OrderStatus > 0 ? 0.5 : 1,
-                      }}
-                    >
-                      <Tooltip title={'Kiosk Sales'}>
-                        {''}
-                        <Badge count={badgeCount} offset={[-10, 3]} size="small">
-                          <PozoKioskIcon
-                            onClick={() => openModalKiosk()}
-                            style={{ cursor: 'pointer', fontSize: '1.5rem' }}
-                            className="iconsize"
-                          />
-                        </Badge>
-                      </Tooltip>
-                    </div>
-                  )}
-                {!OtherServicesglobal && (
-                  <TooltipWrapper title={'Low Stock Alerts'} isMobile={isMobile}>
-                    {' '}
-                    <BSExpireProductsList />
-                  </TooltipWrapper>
-                )}
-                {!OtherServicesglobal && Kioskopen && (
-                  <BSKioskCounterPayment
-                    Kioskopen={Kioskopen}
-                    closeKioskModal={closeModalKiosk}
-                  />
-                )}
-                {SAdminuserPin?.length > 0 && UserType != 'Super Admin User' && (
-                  <div>
-                    <SAdminUserNotification
-                      SAdminuserPin={SAdminuserPin}
-                      popOverOpen={popOverOpen}
-                      handleSupportUser={handleSupportUser}
-                      handlePopOverOpen={handlePopOverOpen}
-                    />
-                  </div>
-                )}
-
-                {!OtherServicesglobal && <> {CheckBookingStatus == 'Open' ? (
-                  <div style={{ marginLeft: "10px" }}>
-                    <TooltipWrapper title={'Booking Close'} isMobile={isMobile}>
-                      {' '}
-                      <BookingCloseIcon
-                        onClick={OpenBookingModal}
-                        bgFill={'#52c41a'}
-                        style={{
-                          fontSize: '16px',
-                          marginTop: '4px',
-                          color: '#52c41a',
-                          cursor: 'pointer',
-                        }}
-                      />
-                      {/* <button className="BookingCloseButton"
-                                                    onClick={OpenBookingModal}>Booking Close</button> */}
-                    </TooltipWrapper>
-                  </div>
-                ) : (
-                  <div style={{ marginLeft: "10px" }}>
-                    <TooltipWrapper title="Booking Open" isMobile={isMobile}>
-                      <Popconfirm
-                        placement="leftTop"
-                        title="Booking Open"
-                        description="Are you sure you want to Open the sales?"
-                        okText="Yes"
-                        cancelText="No"
-                        onConfirm={() => BookingOpenFun('Open')}
-                      >
-                        <span>
-                          <BookingCloseIcon
-                            bgFill="red"
-                            style={{
-                              fontSize: '16px',
-                              marginTop: '4px',
-                              color: '#52c41a',
-                              cursor: 'pointer',
-                            }}
-                          />
-                        </span>
-                      </Popconfirm>
-
-                    </TooltipWrapper>
-                  </div>
-                )} </>}
-                {!OtherServicesglobal &&
-                  <div style={{ marginLeft: "10px" }}>
-                    <TooltipWrapper title={'E-way Bill'} isMobile={isMobile}>
-                      {''}
-                      <BSEwayBillicon
-                        style={{ cursor: 'pointer', marginTop: '5px' }}
-                        onClick={OpenListOfInvoices}
-                      />
-                    </TooltipWrapper>
-                  </div>}
-              </div>
-            </div>
-          ) :
-            <SalesCountForStandard
-              PricingAppPricingName={PricingAppPricingName}
-              DineInAccess={DineInAccess}
-              GlobalsalesDetailData={GlobalsalesDetailData}
-            />
-          }
+          <div className="BSLayout3-NavBar">
+            {BookingNavbar == 'Navbar1' && <BSNavbar1 />}
+            {BookingNavbar == 'Navbar2' && <BSNavbar2 />}
+            {BookingNavbar == 'Navbar3' && <BSNavbar3 />}
+          </div>
           <div
-            className="BsLayout3-ContentDiv"
+            className={
+              BookingNavbar != 'Navbar3' ? 'BSLayout3' : 'BSLayout3Standard'
+            }
             style={{
               backgroundColor: GlobalLayoutColorDetail?.OverallBackgroundColor,
             }}
           >
-            <div className="BSCategory3-Contentcont">
+            {BookingNavbar != 'Navbar3' ? (
               <div
-                style={{
-                  backgroundColor:
-                    SelectedCatgColor?.['OverallBackgroundColor'],
-                }}
+                className="Layout-bill-container"
+                style={{ marginTop: '9px' }}
               >
-                {!OtherServicesglobal && (
-                  <CategoryHorizontal
-                    categoryFunction={dynamicComponentProps(
-                      'Category',
-                      BookingCategory?.[1],
-                      BookingCategory?.[0]
-                    )}
-                  />
-                )}
-                {OtherServicesglobal && (
-                  <BSOtherServicesHorizontalcat
-                    categoryFunction={dynamicComponentProps(
-                      'Category',
-                      BookingCategory?.[1],
-                      BookingCategory?.[0]
-                    )}
-                  />
-                )}
-              </div>
-
-              <div
-                style={{
-                  backgroundColor:
-                    SelectedSubCatgColor?.['OverallBackgroundColor'],
-                }}
-              >
-                {!OtherServicesglobal && Comboglobal === false && (
-                  <SubCategoryHorizontal
-                    categoryFunction={dynamicComponentProps(
-                      'SubCategory',
-                      BookingSubCategory?.[1],
-                      BookingSubCategory?.[0]
-                    )}
-                  />
-                )}
-              </div>
-
-              <div
-                className="BSCategory3-Cardcont"
-                style={{
-                  backgroundColor:
-                    SelectedCardColor?.['OverallBackgroundColor'],
-                  display: 'flex',
-                }}
-              >
-                {!OtherServicesglobal && Comboglobal === false && (
-                  <BSItemCard
-                    cardFunctionality={dynamicComponentProps(
-                      'Card',
-                      BookingCard?.[1],
-                      BookingCard?.[0]
-                    )}
-                  />
-                )}
-                {!OtherServicesglobal && Comboglobal === true && (
-                  <BSComboItemCard
-                    cardFunctionality={dynamicComponentProps(
-                      'Card',
-                      BookingCard?.[1],
-                      BookingCard?.[0]
-                    )}
-                  />
-                )}
-                {OtherServicesglobal && (
-                  <BSOtherServiceItemCard
-                    screenHeight={window.innerHeight}
-                    cardFunctionality={dynamicComponentProps(
-                      'Card',
-                      BookingCard?.[1],
-                      BookingCard?.[0]
-                    )}
-                  />
-                )}
-              </div>
-            </div>
-
-            <div className="BSCategory3-tablecont">
-              {action ? (
-                <BranchTransferComponent />
-              ) : (
-                <>
-                  {BSLayout3Data?.BookingBilling?.[0] == 'Billing1' && (
-                    <BSBillingTable1 />
-                  )}
-                  {BSLayout3Data?.BookingBilling?.[0] == 'Billing2' && (
-                    <BSBillingTable2 />
-                  )}
-                  {BSLayout3Data?.BookingBilling?.[0] == 'Billing3' && (
-                    <BSBillingTable3 />
-                  )}
-                  {BSLayout3Data?.BookingBilling?.[0] == 'Billing4' && (
-                    <BSBillingTable4 />
-                  )}
-                  {BSLayout3Data?.BookingBilling?.[0] == 'Billing5' && (
-                    <BSBillingTable5 />
-                  )}
-                  {BSLayout3Data?.BookingBilling?.[0] == 'Billing6' && (
-                    <BSBillingTable6 />
-                  )}
-                  {BSLayout3Data?.BookingBilling?.[0] == 'Billing7' && (
-                    <BSBillingTable7 />
-                  )}
-                  {BookingBilling == 'Billing8' && <ComboSalesBillTable />}
-                  {BSLayout3Data?.BookingBilling?.[0] == 'StandardBilling' && (
-                    <div className="BSCategory2New">
-                      <StandardTable />
+                <div
+                  className="Layout-bill-Subcontainer"
+                  style={{ width: OtherServicesglobal ? '10%' : '100%' }}
+                >
+                  {UserType !== 'Employee' && (
+                    <div className="pricing-name-details">
+                      {PricingAppPricingName?.[0]?.PricingName +
+                        ' / ' +
+                        PricingAppPricingName?.[0]?.Type}
                     </div>
                   )}
-                </>
-              )}
-              {/* <div className="salesStoreName"
-                style={{
-                  color: SelectedBillColor?.['FontColor'],
-                  backgroundColor: SelectedBillColor?.['BackgroundColor'],
-                }}>
-                <BranchName/>
-              </div> */}
+                  {!OtherServicesglobal && (
+                    <SalesCountComponent
+                      DineInAccess={DineInAccess}
+                      GlobalsalesDetailData={GlobalsalesDetailData}
+                    />
+                  )}
+                  {!OtherServicesglobal &&
+                    SessionData?.FeatureAddonData?.FeatureDtls?.find(
+                      (item) =>
+                        item?.FeatureAddonName?.toLowerCase() === 'kiosk sales'
+                    ) &&
+                    !sportsAppPreference && (
+                      <div
+                        style={{
+                          pointerEvents: OrderStatus > 0 ? 'none' : 'auto',
+                          opacity: OrderStatus > 0 ? 0.5 : 1,
+                        }}
+                      >
+                        <Tooltip title={'Kiosk Sales'}>
+                          {''}
+                          <Badge
+                            count={badgeCount}
+                            offset={[-10, 3]}
+                            size="small"
+                          >
+                            <PozoKioskIcon
+                              onClick={() => openModalKiosk()}
+                              style={{ cursor: 'pointer', fontSize: '1.5rem' }}
+                              className="iconsize"
+                            />
+                          </Badge>
+                        </Tooltip>
+                      </div>
+                    )}
+                  {!OtherServicesglobal && (
+                    <TooltipWrapper
+                      title={'Low Stock Alerts'}
+                      isMobile={isMobile}
+                    >
+                      {' '}
+                      <BSExpireProductsList />
+                    </TooltipWrapper>
+                  )}
+                  {!OtherServicesglobal && Kioskopen && (
+                    <BSKioskCounterPayment
+                      Kioskopen={Kioskopen}
+                      closeKioskModal={closeModalKiosk}
+                    />
+                  )}
+                  {SAdminuserPin?.length > 0 &&
+                    UserType != 'Super Admin User' && (
+                      <div>
+                        <SAdminUserNotification
+                          SAdminuserPin={SAdminuserPin}
+                          popOverOpen={popOverOpen}
+                          handleSupportUser={handleSupportUser}
+                          handlePopOverOpen={handlePopOverOpen}
+                        />
+                      </div>
+                    )}
+
+                  {!OtherServicesglobal && (
+                    <>
+                      {' '}
+                      {CheckBookingStatus == 'Open' ? (
+                        <div style={{ marginLeft: '10px' }}>
+                          <TooltipWrapper
+                            title={'Booking Close'}
+                            isMobile={isMobile}
+                          >
+                            {' '}
+                            <BookingCloseIcon
+                              onClick={OpenBookingModal}
+                              bgFill={'#52c41a'}
+                              style={{
+                                fontSize: '16px',
+                                marginTop: '4px',
+                                color: '#52c41a',
+                                cursor: 'pointer',
+                              }}
+                            />
+                            {/* <button className="BookingCloseButton"
+                                                    onClick={OpenBookingModal}>Booking Close</button> */}
+                          </TooltipWrapper>
+                        </div>
+                      ) : (
+                        <div style={{ marginLeft: '10px' }}>
+                          <TooltipWrapper
+                            title="Booking Open"
+                            isMobile={isMobile}
+                          >
+                            <Popconfirm
+                              placement="leftTop"
+                              title="Booking Open"
+                              description="Are you sure you want to Open the sales?"
+                              okText="Yes"
+                              cancelText="No"
+                              onConfirm={() => BookingOpenFun('Open')}
+                            >
+                              <span>
+                                <BookingCloseIcon
+                                  bgFill="red"
+                                  style={{
+                                    fontSize: '16px',
+                                    marginTop: '4px',
+                                    color: '#52c41a',
+                                    cursor: 'pointer',
+                                  }}
+                                />
+                              </span>
+                            </Popconfirm>
+                          </TooltipWrapper>
+                        </div>
+                      )}{' '}
+                    </>
+                  )}
+                  {!OtherServicesglobal && (
+                    <div style={{ marginLeft: '10px' }}>
+                      <TooltipWrapper title={'E-way Bill'} isMobile={isMobile}>
+                        {''}
+                        <BSEwayBillicon
+                          style={{ cursor: 'pointer', marginTop: '5px' }}
+                          onClick={OpenListOfInvoices}
+                        />
+                      </TooltipWrapper>
+                    </div>
+                  )}
+                </div>
+              </div>
+            ) : (
+              <>
+                <SalesCountForStandard />
+              </>
+            )}
+            <div
+              className="BsLayout3-ContentDiv"
+              style={{
+                backgroundColor:
+                  GlobalLayoutColorDetail?.OverallBackgroundColor,
+              }}
+            >
+              <div className="BSCategory3-Contentcont">
+                <div
+                  style={{
+                    backgroundColor:
+                      SelectedCatgColor?.['OverallBackgroundColor'],
+                  }}
+                >
+                  {!OtherServicesglobal && (
+                    <CategoryHorizontal
+                      categoryFunction={dynamicComponentProps(
+                        'Category',
+                        BookingCategory?.[1],
+                        BookingCategory?.[0]
+                      )}
+                    />
+                  )}
+                  {OtherServicesglobal && (
+                    <BSOtherServicesHorizontalcat
+                      categoryFunction={dynamicComponentProps(
+                        'Category',
+                        BookingCategory?.[1],
+                        BookingCategory?.[0]
+                      )}
+                    />
+                  )}
+                </div>
+
+                <div
+                  style={{
+                    backgroundColor:
+                      SelectedSubCatgColor?.['OverallBackgroundColor'],
+                  }}
+                >
+                  {!OtherServicesglobal && Comboglobal === false && (
+                    <SubCategoryHorizontal
+                      categoryFunction={dynamicComponentProps(
+                        'SubCategory',
+                        BookingSubCategory?.[1],
+                        BookingSubCategory?.[0]
+                      )}
+                    />
+                  )}
+                </div>
+
+                <div
+                  className="BSCategory3-Cardcont"
+                  style={{
+                    backgroundColor:
+                      SelectedCardColor?.['OverallBackgroundColor'],
+                    display: 'flex',
+                  }}
+                >
+                  {!OtherServicesglobal && Comboglobal === false && (
+                    <BSItemCard
+                      cardFunctionality={dynamicComponentProps(
+                        'Card',
+                        BookingCard?.[1],
+                        BookingCard?.[0]
+                      )}
+                    />
+                  )}
+                  {!OtherServicesglobal && Comboglobal === true && (
+                    <BSComboItemCard
+                      cardFunctionality={dynamicComponentProps(
+                        'Card',
+                        BookingCard?.[1],
+                        BookingCard?.[0]
+                      )}
+                    />
+                  )}
+                  {OtherServicesglobal && (
+                    <BSOtherServiceItemCard
+                      screenHeight={window.innerHeight}
+                      cardFunctionality={dynamicComponentProps(
+                        'Card',
+                        BookingCard?.[1],
+                        BookingCard?.[0]
+                      )}
+                    />
+                  )}
+                </div>
+              </div>
+
+              <div className="BSCategory3-tablecont">
+                {action ? (
+                  <BranchTransferComponent />
+                ) : (
+                  <>
+                    {BSLayout3Data?.BookingBilling?.[0] == 'Billing1' && (
+                      <BSBillingTable1 />
+                    )}
+                    {BSLayout3Data?.BookingBilling?.[0] == 'Billing2' && (
+                      <BSBillingTable2 />
+                    )}
+                    {BSLayout3Data?.BookingBilling?.[0] == 'Billing3' && (
+                      <BSBillingTable3 />
+                    )}
+                    {BSLayout3Data?.BookingBilling?.[0] == 'Billing4' && (
+                      <BSBillingTable4 />
+                    )}
+                    {BSLayout3Data?.BookingBilling?.[0] == 'Billing5' && (
+                      <BSBillingTable5 />
+                    )}
+                    {BSLayout3Data?.BookingBilling?.[0] == 'Billing6' && (
+                      <BSBillingTable6 />
+                    )}
+                    {BSLayout3Data?.BookingBilling?.[0] == 'Billing7' && (
+                      <BSBillingTable7 />
+                    )}
+                    {BookingBilling == 'Billing8' && <ComboSalesBillTable />}
+                    {BSLayout3Data?.BookingBilling?.[0] ==
+                      'StandardBilling' && (
+                      <div className="BSCategory2New">
+                        <StandardTable />
+                      </div>
+                    )}
+                  </>
+                )}
+              </div>
             </div>
           </div>
         </div>
-      </div>
-      {BookingModalOpen && !OtherServicesglobal && (
-        <RetailBookingClosing
-          PaymentOpen={BookingModalOpen}
-          PaymentClose={HandleBookingModalClose}
-        />
-      )}
-      {ListOfInvoices && !OtherServicesglobal && (
-        <ListOfSalesInvoices
-          ListOfInvoicesOpen={ListOfInvoices}
-          handleInvoiceClose={handleInvoiceClose}
-        />
-      )}
-    </>
+        {BookingModalOpen && !OtherServicesglobal && (
+          <RetailBookingClosing
+            PaymentOpen={BookingModalOpen}
+            PaymentClose={HandleBookingModalClose}
+          />
+        )}
+        {ListOfInvoices && !OtherServicesglobal && (
+          <ListOfSalesInvoices
+            ListOfInvoicesOpen={ListOfInvoices}
+            handleInvoiceClose={handleInvoiceClose}
+          />
+        )}
+      </>
+    </Suspense>
   );
 };
 

src/Pages/BookingScreen/Template/BSLayout4/BSLayout4.jsx

@@ -1,21 +1,43 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import {lazy, Suspense, useCallback, useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import moment from 'moment';
 import { Tooltip, Badge, Popconfirm } from 'antd';
 import { isMobile } from 'react-device-detect';
-import { ArrowUpOutlined } from '@ant-design/icons';
 import BookingCloseIcon from '../../Components/UtillComponents/BookingCloseIcon.jsx';
-import BSNavbar1 from '../../Components/BSNavbar/BSNavbar1';
-import BSNavbar2 from '../../Components/BSNavbar/BSNavbar2';
-import CategoryVertical from '../../Components/BSCategories/BSCategoryVertical';
-import BSItemCard from '../../Components/BSItemCards/BSItemCard';
-import BSBillingTable1 from '../../Components/BSBillingTables/BSBillingTable1/BSBTOverall1';
-import BSBillingTable2 from '../../Components/BSBillingTables/BSBillingTable2/BSBillingTable2';
-import BSBillingTable3 from '../../Components/BSBillingTables/BSBillingTable3/BSBillingTable3overall';
-import BSBillingTable4 from '../../Components/BSBillingTables/BSBillingTable4/BSBillingTable4Full';
-import BSBillingTable5 from '../../Components/BSBillingTables/BSBillingTable5/BSBillingTable5';
-import BSBillingTable6 from '../../Components/BSBillingTables/BSBillingTable6/BSBTOverall6';
-import BSBillingTable7 from '../../Components/BSBillingTables/BSBillingTable7/BSBillingTable7Overall.jsx';
+const BSNavbar1 = lazy(() => import('../../Components/BSNavbar/BSNavbar1'));
+const BSNavbar2 = lazy(() => import('../../Components/BSNavbar/BSNavbar2'));
+const CategoryVertical = lazy(
+  () => import('../../Components/BSCategories/BSCategoryVertical')
+);
+const BSItemCard = lazy(
+  () => import('../../Components/BSItemCards/BSItemCard')
+);
+const BSBillingTable1 = lazy(
+  () => import('../../Components/BSBillingTables/BSBillingTable1/BSBTOverall1')
+);
+const BSBillingTable2 = lazy(
+  () =>
+    import('../../Components/BSBillingTables/BSBillingTable2/BSBillingTable2')
+);
+const BSBillingTable3 = lazy(
+  () =>
+    import('../../Components/BSBillingTables/BSBillingTable3/BSBillingTable3overall')
+);
+const BSBillingTable4 = lazy(
+  () =>
+    import('../../Components/BSBillingTables/BSBillingTable4/BSBillingTable4Full')
+);
+const BSBillingTable5 = lazy(
+  () =>
+    import('../../Components/BSBillingTables/BSBillingTable5/BSBillingTable5')
+);
+const BSBillingTable6 = lazy(
+  () => import('../../Components/BSBillingTables/BSBillingTable6/BSBTOverall6')
+);
+const BSBillingTable7 = lazy(
+  () =>
+    import('../../Components/BSBillingTables/BSBillingTable7/BSBillingTable7Overall.jsx')
+);
 import { dynamicComponentProps } from '../DynamicComponentProps.js';
 import {
   getTemplateData,
@@ -51,31 +73,66 @@ import {
 } from '../../../../Features/BrachLogin/BranchLogin';
 import { Messages } from '../../../../Components/Notifications/Messages.jsx';
 import SAdminUserNotification from '../../Components/BookingFunctionality/SAdminUserNotification.jsx';
-import '../../../../Styles/BookingScreen/Template/BSLayout4/BSLayout4.scss';
-import SalesCountComponent from '../SalesCountComponent.jsx';
+const SalesCountComponent = lazy(() => import('../SalesCountComponent.jsx'));
 import {
   getBookingStatus,
   GlobalBookingStatus,
 } from '../../../../Features/Payment/PaymentReceivedRetail/PaymentReceivedRetail.js';
 import { PutBookingClose } from '../../../../Features/BookingScreen/RetailBookingClose.js';
 import TooltipWrapper from '../../../../Components/Tooltip/Tooltip.jsx';
-import RetailBookingClosing from '../RetailBookingClose.jsx';
-import ListOfSalesInvoices from '../../Components/BSBillingTables/ListofInvoices/ListOfSalesInvoices.jsx';
-import BSEwayBillicon from '../../Components/UtillComponents/BSEwayBillicon.jsx';
-import BSComboItemCard from '../../Components/BSItemCards/BSComboItemCard.jsx';
-import BranchTransferComponent from '../../Components/UtillComponents/BSQuickBranchToBranchTransferComponent.jsx';
-import BSExpireProductsList from '../../Components/UtillComponents/BSExpireProductsList.jsx';
-import BSOtherServiceItemCard from '../../Components/BSItemCards/BSOtherServiceItemCard.jsx';
-import BSOtherServicesHorizontalcat from '../../Components/BSCategories/BSOtherServicesHorizontalcat';
-import BSOtherServicesVerticalcat from '../../Components/BSCategories/BSOtherServicesVerticalcat.jsx';
-import BSNavbar3 from '../../Components/BSNavbar/BSNavbar3.jsx';
-import SalesCountForStandard from '../SalesCountForStandard.jsx';
-import StandardTable from '../../Components/BSBillingTables/StandardTable/StandardTable.jsx';
-import { CiShop } from 'react-icons/ci';
-import BranchName from '../BranchName.jsx';
-import ComboSalesBillTable from '../../Components/BSBillingTables/ComboSalesBillTable/ComboSalesBillTable.jsx';
-import PlanExpireNotification from '../PlanExpireNotification.jsx';
+const RetailBookingClosing = lazy(() => import('../RetailBookingClose.jsx'));
 
+const ListOfSalesInvoices = lazy(
+  () =>
+    import('../../Components/BSBillingTables/ListofInvoices/ListOfSalesInvoices.jsx')
+);
+
+const BSEwayBillicon = lazy(
+  () => import('../../Components/UtillComponents/BSEwayBillicon.jsx')
+);
+
+const BSComboItemCard = lazy(
+  () => import('../../Components/BSItemCards/BSComboItemCard.jsx')
+);
+
+const BranchTransferComponent = lazy(
+  () =>
+    import('../../Components/UtillComponents/BSQuickBranchToBranchTransferComponent.jsx')
+);
+
+const BSExpireProductsList = lazy(
+  () => import('../../Components/UtillComponents/BSExpireProductsList.jsx')
+);
+
+const BSOtherServiceItemCard = lazy(
+  () => import('../../Components/BSItemCards/BSOtherServiceItemCard.jsx')
+);
+
+const BSOtherServicesVerticalcat = lazy(
+  () => import('../../Components/BSCategories/BSOtherServicesVerticalcat.jsx')
+);
+
+const BSNavbar3 = lazy(() => import('../../Components/BSNavbar/BSNavbar3.jsx'));
+
+const SalesCountForStandard = lazy(
+  () => import('../SalesCountForStandard.jsx')
+);
+
+const StandardTable = lazy(
+  () =>
+    import('../../Components/BSBillingTables/StandardTable/StandardTable.jsx')
+);
+
+const ComboSalesBillTable = lazy(
+  () =>
+    import('../../Components/BSBillingTables/ComboSalesBillTable/ComboSalesBillTable.jsx')
+);
+import PlanExpireNotification from '../PlanExpireNotification.jsx';
+// Scss
+import '../../../../Styles/BookingScreen/Template/BSLayout4/BSLayout4.scss';
+
+const subDirectory = import.meta.env.BASE_URL;
+const commonDirectory = import.meta.env.COMMON_BASE_URL;
 
 const BSLayout4 = () => {
   const dispatch = useDispatch();
@@ -103,10 +160,12 @@ const BSLayout4 = () => {
   const SelectedBillColor = useSelector(SelectedGlobalBillingColorDetail);
   const appPreferences = useSelector(ApplicationPreferences);
   const commonModulePreference = appPreferences?.find(
-    (preference) => preference?.PreferredCatName === "Common Module"
+    (preference) => preference?.PreferredCatName === 'Common Module'
   )?.PreferenceCatDetails;
   const sportsAppPreference = commonModulePreference?.find(
-    (preference) => preference?.PreferredSubCatName === "SportsApp" && preference?.PreferredStatus == 'Y'
+    (preference) =>
+      preference?.PreferredSubCatName === 'SportsApp' &&
+      preference?.PreferredStatus == 'Y'
   );
   // const [AppExpDate, setAppExpDate] = useState(0);
   const [Kioskopen, setKioskopen] = useState(false);
@@ -130,12 +189,14 @@ const BSLayout4 = () => {
   const UserType = SessionData?.UserType;
   const currentDateValue = moment().format('YYYY-MM-DD HH:mm:ss');
   let containerHeight = isMobile
-    ? AppExpDate?.RemainingDays <= 7 || AppExpDate?.PlanType?.toLowerCase() === 'extend'
+    ? AppExpDate?.RemainingDays <= 7 ||
+      AppExpDate?.PlanType?.toLowerCase() === 'extend'
       ? '575px'
       : '590px'
-    : UserType != 'Super Admin' &&
-      UserType != 'Super Admin User' &&
-      AppExpDate?.RemainingDays <= 7 || AppExpDate?.PlanType?.toLowerCase() === 'extend'
+    : (UserType != 'Super Admin' &&
+          UserType != 'Super Admin User' &&
+          AppExpDate?.RemainingDays <= 7) ||
+        AppExpDate?.PlanType?.toLowerCase() === 'extend'
       ? '96vh'
       : '99vh';
   const [ListOfInvoices, setListOfInvoices] = useState(false);
@@ -203,7 +264,6 @@ const BSLayout4 = () => {
     setKioskopen(false);
   };
 
-  
   const handlePopOverOpen = () => {
     setPopOverOpen(!popOverOpen);
   };
@@ -257,103 +317,127 @@ const BSLayout4 = () => {
     setBookingModalOpen(false);
   };
   return (
-    <>
-      <Messages
-        messageType={messageType}
-        messageData={messageData}
-        onComplete={onComplete}
-      />
-      {UserType != 'Super Admin' &&
-        UserType != 'Super Admin User' &&
-        (AppExpDate?.RemainingDays <= 7 || AppExpDate === 'undefined' || AppExpDate?.PlanType?.toLowerCase() === 'extend') && (
-          <PlanExpireNotification />
-        )}
-      <div
-        className="BsLayout4-Master"
-        style={{ height: containerHeight, overflow: 'hidden' }}
-      >
-        <div className="Bslayout4_navbar">
-          {BookingNavbar == 'Navbar1' && <BSNavbar1 />}
-          {BookingNavbar == 'Navbar2' && <BSNavbar2 />}
-          {BookingNavbar == 'Navbar3' && <BSNavbar3 />}
-        </div>
-        {BookingNavbar != 'Navbar3' ? (
-          <div className="Layout-bill-container" style={{ margin: '0' }}>
-            <div className="Layout-bill-Subcontainer" style={{ width: OtherServicesglobal ? "10%" : "100%" }}>
-              {UserType !== 'Employee' &&
-                <div className="pricing-name-details">
-                  {PricingAppPricingName?.[0]?.PricingName +
-                    ' / ' +
-                    PricingAppPricingName?.[0]?.Type}
-                </div>
-              }
-              {!OtherServicesglobal && <SalesCountComponent
-                DineInAccess={DineInAccess}
-                GlobalsalesDetailData={GlobalsalesDetailData}
-              />}
-              {!OtherServicesglobal && SessionData?.FeatureAddonData?.FeatureDtls?.find(
-                (item) => item?.FeatureAddonName?.toLowerCase() === 'kiosk sales'
-              ) && !sportsAppPreference && (
-                  <div
-                    style={{
-                      pointerEvents: OrderStatus > 0 ? 'none' : 'auto',
-                      opacity: OrderStatus > 0 ? 0.5 : 1,
-                    }}
-                  >
-                    <Tooltip title={'Kiosk Sales'}>
-                      <Badge count={badgeCount} offset={[-10, 3]} size="small">
-                        <PozoKioskIcon
-                          onClick={() => openModalKiosk()}
-                          style={{ cursor: 'pointer', fontSize: '1.5rem' }}
-                          className="iconsize"
-                        />
-                      </Badge>
-                    </Tooltip>
+    <Suspense fallback={<div>Loading...</div>}>
+      <>
+        <Messages
+          messageType={messageType}
+          messageData={messageData}
+          onComplete={onComplete}
+        />
+        {UserType != 'Super Admin' &&
+          UserType != 'Super Admin User' &&
+          (AppExpDate?.RemainingDays <= 7 ||
+            AppExpDate === 'undefined' ||
+            AppExpDate?.PlanType?.toLowerCase() === 'extend') && (
+            <PlanExpireNotification />
+          )}
+        <div
+          className="BsLayout4-Master"
+          style={{ height: containerHeight, overflow: 'hidden' }}
+        >
+          <div className="Bslayout4_navbar">
+            {BookingNavbar == 'Navbar1' && <BSNavbar1 />}
+            {BookingNavbar == 'Navbar2' && <BSNavbar2 />}
+            {BookingNavbar == 'Navbar3' && <BSNavbar3 />}
+          </div>
+          {BookingNavbar != 'Navbar3' ? (
+            <div className="Layout-bill-container" style={{ margin: '0' }}>
+              <div
+                className="Layout-bill-Subcontainer"
+                style={{ width: OtherServicesglobal ? '10%' : '100%' }}
+              >
+                {UserType !== 'Employee' && (
+                  <div className="pricing-name-details">
+                    {PricingAppPricingName?.[0]?.PricingName +
+                      ' / ' +
+                      PricingAppPricingName?.[0]?.Type}
                   </div>
                 )}
-              {!OtherServicesglobal && (
-                <TooltipWrapper title={'Low Stock Alerts'} isMobile={isMobile}>
-                  {' '}
-                  <BSExpireProductsList />
-                </TooltipWrapper>
-              )}
-              {!OtherServicesglobal && Kioskopen && (
-                <BSKioskCounterPayment
-                  Kioskopen={Kioskopen}
-                  closeKioskModal={closeModalKiosk}
-                />
-              )}
-              {SAdminuserPin?.length > 0 && UserType != 'Super Admin User' && (
-                <div>
-                  <SAdminUserNotification
-                    SAdminuserPin={SAdminuserPin}
-                    popOverOpen={popOverOpen}
-                    handleSupportUser={handleSupportUser}
-                    handlePopOverOpen={handlePopOverOpen}
+                {!OtherServicesglobal && (
+                  <SalesCountComponent
+                    DineInAccess={DineInAccess}
+                    GlobalsalesDetailData={GlobalsalesDetailData}
                   />
-                </div>
-              )}
-              {CheckBookingStatus == 'Open' ? !OtherServicesglobal && (
-                <div style={{ marginLeft: "10px" }}>
-                  <TooltipWrapper title={'Booking Close'} isMobile={isMobile}>
-                    {' '}
-                    <BookingCloseIcon
-                      onClick={OpenBookingModal}
-                      bgFill={'#52c41a'}
+                )}
+                {!OtherServicesglobal &&
+                  SessionData?.FeatureAddonData?.FeatureDtls?.find(
+                    (item) =>
+                      item?.FeatureAddonName?.toLowerCase() === 'kiosk sales'
+                  ) &&
+                  !sportsAppPreference && (
+                    <div
                       style={{
-                        fontSize: '16px',
-                        marginTop: '4px',
-                        color: '#52c41a',
-                        cursor: 'pointer',
+                        pointerEvents: OrderStatus > 0 ? 'none' : 'auto',
+                        opacity: OrderStatus > 0 ? 0.5 : 1,
                       }}
-                    />
-                    {/* <button className="BookingCloseButton"
-                                        >Booking Close</button> */}
+                    >
+                      <Tooltip title={'Kiosk Sales'}>
+                        <Badge
+                          count={badgeCount}
+                          offset={[-10, 3]}
+                          size="small"
+                        >
+                          <PozoKioskIcon
+                            onClick={() => openModalKiosk()}
+                            style={{ cursor: 'pointer', fontSize: '1.5rem' }}
+                            className="iconsize"
+                          />
+                        </Badge>
+                      </Tooltip>
+                    </div>
+                  )}
+                {!OtherServicesglobal && (
+                  <TooltipWrapper
+                    title={'Low Stock Alerts'}
+                    isMobile={isMobile}
+                  >
+                    {' '}
+                    <BSExpireProductsList />
                   </TooltipWrapper>
-                </div>
-              ) : (
-                <div style={{ marginLeft: "10px" }}>
-                 <TooltipWrapper title="Booking Open" isMobile={isMobile}>
+                )}
+                {!OtherServicesglobal && Kioskopen && (
+                  <BSKioskCounterPayment
+                    Kioskopen={Kioskopen}
+                    closeKioskModal={closeModalKiosk}
+                  />
+                )}
+                {SAdminuserPin?.length > 0 &&
+                  UserType != 'Super Admin User' && (
+                    <div>
+                      <SAdminUserNotification
+                        SAdminuserPin={SAdminuserPin}
+                        popOverOpen={popOverOpen}
+                        handleSupportUser={handleSupportUser}
+                        handlePopOverOpen={handlePopOverOpen}
+                      />
+                    </div>
+                  )}
+                {CheckBookingStatus == 'Open' ? (
+                  !OtherServicesglobal && (
+                    <div style={{ marginLeft: '10px' }}>
+                      <TooltipWrapper
+                        title={'Booking Close'}
+                        isMobile={isMobile}
+                      >
+                        {' '}
+                        <BookingCloseIcon
+                          onClick={OpenBookingModal}
+                          bgFill={'#52c41a'}
+                          style={{
+                            fontSize: '16px',
+                            marginTop: '4px',
+                            color: '#52c41a',
+                            cursor: 'pointer',
+                          }}
+                        />
+                        {/* <button className="BookingCloseButton"
+                                        >Booking Close</button> */}
+                      </TooltipWrapper>
+                    </div>
+                  )
+                ) : (
+                  <div style={{ marginLeft: '10px' }}>
+                    <TooltipWrapper title="Booking Open" isMobile={isMobile}>
                       <Popconfirm
                         placement="leftTop"
                         title="Booking Open"
@@ -374,157 +458,160 @@ const BSLayout4 = () => {
                           />
                         </span>
                       </Popconfirm>
-
                     </TooltipWrapper>
-                </div>
-              )}
-              {!OtherServicesglobal &&
-                <div style={{ marginLeft: "10px" }}>
-                  <TooltipWrapper title={'E-way Bill'} isMobile={isMobile}>
-                    {''}
-                    <BSEwayBillicon
-                      style={{ cursor: 'pointer', marginTop: '5px' }}
-                      onClick={OpenListOfInvoices}
-                    />
-                  </TooltipWrapper>
-                </div>}
-            </div>
-          </div>
-        ) :
-          <SalesCountForStandard
-            PricingAppPricingName={PricingAppPricingName}
-            DineInAccess={DineInAccess}
-            GlobalsalesDetailData={GlobalsalesDetailData}
-          />
-        }
-        <div
-          className="Bslayout4_overall"
-          style={{
-            backgroundColor: GlobalLayoutColorDetail?.OverallBackgroundColor,
-          }}
-        >
-          <div className="BSlayout_subdiv">
-            <div
-              className="Bslayout4_ctg"
-              style={{
-                backgroundColor: SelectedCatgColor?.['OverallBackgroundColor'],
-              }}
-            >
-              {!OtherServicesglobal && (
-                <CategoryVertical
-                  categoryFunction={dynamicComponentProps(
-                    'Category',
-                    BookingCategory?.[1],
-                    BookingCategory?.[0]
-                  )}
-                />
-              )}
-              {OtherServicesglobal && (
-                <BSOtherServicesVerticalcat
-                  categoryFunction={dynamicComponentProps(
-                    'Category',
-                    BookingCategory?.[1],
-                    BookingCategory?.[0]
-                  )}
-                />
-              )}
-            </div>
-            <div
-              className="Bslayout4_card"
-              style={{
-                backgroundColor: SelectedCardColor?.['OverallBackgroundColor'],
-                width: '100vw',
-                display: 'flex',
-              }}
-            >
-              {!OtherServicesglobal && Comboglobal === false && (
-                <BSItemCard
-                  cardFunctionality={dynamicComponentProps(
-                    'Card',
-                    BookingCard?.[1],
-                    BookingCard?.[0]
-                  )}
-                />
-              )}
-              {!OtherServicesglobal && Comboglobal === true && (
-                <BSComboItemCard
-                  cardFunctionality={dynamicComponentProps(
-                    'Card',
-
-                    BookingCard?.[1],
-                    BookingCard?.[0]
-                  )}
-                />
-              )}
-              {OtherServicesglobal && (
-                <BSOtherServiceItemCard
-                  screenHeight={window.innerHeight}
-                  cardFunctionality={dynamicComponentProps(
-                    'Card',
-                    BookingCard?.[1],
-                    BookingCard?.[0]
-                  )}
-                />
-              )}
-            </div>
-          </div>
-          <div className="Bslayout4_table">
-            {action ? (
-              <BranchTransferComponent />
-            ) : (
-              <>
-                {BSLayout4Data?.BookingBilling?.[0] == 'Billing1' && (
-                  <BSBillingTable1 />
-                )}
-                {BSLayout4Data?.BookingBilling?.[0] == 'Billing2' && (
-                  <BSBillingTable2 />
-                )}
-                {BSLayout4Data?.BookingBilling?.[0] == 'Billing3' && (
-                  <BSBillingTable3 />
-                )}
-                {BSLayout4Data?.BookingBilling?.[0] == 'Billing4' && (
-                  <BSBillingTable4 />
-                )}
-                {BSLayout4Data?.BookingBilling?.[0] == 'Billing5' && (
-                  <BSBillingTable5 />
-                )}
-                {BSLayout4Data?.BookingBilling?.[0] == 'Billing6' && (
-                  <BSBillingTable6 />
-                )}
-                {BSLayout4Data?.BookingBilling?.[0] == 'Billing7' && (
-                  <BSBillingTable7 />
-                )}
-                {BookingBilling == 'Billing8' && <ComboSalesBillTable />}
-                {BSLayout4Data?.BookingBilling?.[0] == 'StandardBilling' && (
-                  <div className="BSCategory2New">
-                    <StandardTable />
                   </div>
                 )}
-              </>
-            )}
-            {/* <div className="salesStoreName"
+                {!OtherServicesglobal && (
+                  <div style={{ marginLeft: '10px' }}>
+                    <TooltipWrapper title={'E-way Bill'} isMobile={isMobile}>
+                      {''}
+                      <BSEwayBillicon
+                        style={{ cursor: 'pointer', marginTop: '5px' }}
+                        onClick={OpenListOfInvoices}
+                      />
+                    </TooltipWrapper>
+                  </div>
+                )}
+              </div>
+            </div>
+          ) : (
+            <SalesCountForStandard
+              PricingAppPricingName={PricingAppPricingName}
+              DineInAccess={DineInAccess}
+              GlobalsalesDetailData={GlobalsalesDetailData}
+            />
+          )}
+          <div
+            className="Bslayout4_overall"
+            style={{
+              backgroundColor: GlobalLayoutColorDetail?.OverallBackgroundColor,
+            }}
+          >
+            <div className="BSlayout_subdiv">
+              <div
+                className="Bslayout4_ctg"
+                style={{
+                  backgroundColor:
+                    SelectedCatgColor?.['OverallBackgroundColor'],
+                }}
+              >
+                {!OtherServicesglobal && (
+                  <CategoryVertical
+                    categoryFunction={dynamicComponentProps(
+                      'Category',
+                      BookingCategory?.[1],
+                      BookingCategory?.[0]
+                    )}
+                  />
+                )}
+                {OtherServicesglobal && (
+                  <BSOtherServicesVerticalcat
+                    categoryFunction={dynamicComponentProps(
+                      'Category',
+                      BookingCategory?.[1],
+                      BookingCategory?.[0]
+                    )}
+                  />
+                )}
+              </div>
+              <div
+                className="Bslayout4_card"
+                style={{
+                  backgroundColor:
+                    SelectedCardColor?.['OverallBackgroundColor'],
+                  width: '100vw',
+                  display: 'flex',
+                }}
+              >
+                {!OtherServicesglobal && Comboglobal === false && (
+                  <BSItemCard
+                    cardFunctionality={dynamicComponentProps(
+                      'Card',
+                      BookingCard?.[1],
+                      BookingCard?.[0]
+                    )}
+                  />
+                )}
+                {!OtherServicesglobal && Comboglobal === true && (
+                  <BSComboItemCard
+                    cardFunctionality={dynamicComponentProps(
+                      'Card',
+
+                      BookingCard?.[1],
+                      BookingCard?.[0]
+                    )}
+                  />
+                )}
+                {OtherServicesglobal && (
+                  <BSOtherServiceItemCard
+                    screenHeight={window.innerHeight}
+                    cardFunctionality={dynamicComponentProps(
+                      'Card',
+                      BookingCard?.[1],
+                      BookingCard?.[0]
+                    )}
+                  />
+                )}
+              </div>
+            </div>
+            <div className="Bslayout4_table">
+              {action ? (
+                <BranchTransferComponent />
+              ) : (
+                <>
+                  {BSLayout4Data?.BookingBilling?.[0] == 'Billing1' && (
+                    <BSBillingTable1 />
+                  )}
+                  {BSLayout4Data?.BookingBilling?.[0] == 'Billing2' && (
+                    <BSBillingTable2 />
+                  )}
+                  {BSLayout4Data?.BookingBilling?.[0] == 'Billing3' && (
+                    <BSBillingTable3 />
+                  )}
+                  {BSLayout4Data?.BookingBilling?.[0] == 'Billing4' && (
+                    <BSBillingTable4 />
+                  )}
+                  {BSLayout4Data?.BookingBilling?.[0] == 'Billing5' && (
+                    <BSBillingTable5 />
+                  )}
+                  {BSLayout4Data?.BookingBilling?.[0] == 'Billing6' && (
+                    <BSBillingTable6 />
+                  )}
+                  {BSLayout4Data?.BookingBilling?.[0] == 'Billing7' && (
+                    <BSBillingTable7 />
+                  )}
+                  {BookingBilling == 'Billing8' && <ComboSalesBillTable />}
+                  {BSLayout4Data?.BookingBilling?.[0] == 'StandardBilling' && (
+                    <div className="BSCategory2New">
+                      <StandardTable />
+                    </div>
+                  )}
+                </>
+              )}
+              {/* <div className="salesStoreName"
               style={{
                 color: SelectedBillColor?.['FontColor'],
                 backgroundColor: SelectedBillColor?.['BackgroundColor'],
               }}>
               <BranchName/>
             </div> */}
+            </div>
           </div>
         </div>
-      </div>
-      {BookingModalOpen && !OtherServicesglobal && (
-        <RetailBookingClosing
-          PaymentOpen={BookingModalOpen}
-          PaymentClose={HandleBookingModalClose}
-        />
-      )}
-      {ListOfInvoices && !OtherServicesglobal && (
-        <ListOfSalesInvoices
-          ListOfInvoicesOpen={ListOfInvoices}
-          handleInvoiceClose={handleInvoiceClose}
-        />
-      )}
-    </>
+        {BookingModalOpen && !OtherServicesglobal && (
+          <RetailBookingClosing
+            PaymentOpen={BookingModalOpen}
+            PaymentClose={HandleBookingModalClose}
+          />
+        )}
+        {ListOfInvoices && !OtherServicesglobal && (
+          <ListOfSalesInvoices
+            ListOfInvoicesOpen={ListOfInvoices}
+            handleInvoiceClose={handleInvoiceClose}
+          />
+        )}
+      </>
+    </Suspense>
   );
 };
 

src/Pages/BookingScreen/Template/BSLayout5/BSLayout5.jsx

@@ -1,17 +1,42 @@
-import { React, useCallback, useEffect, useState } from 'react';
+import {lazy,useCallback, useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { isMobile } from 'react-device-detect';
 import moment from 'moment';
 import { Tooltip, Badge, Popconfirm } from 'antd';
-import BSNavbar1 from '../../Components/BSNavbar/BSNavbar1';
-import BSNavbar2 from '../../Components/BSNavbar/BSNavbar2';
-import BSBillingTable1 from '../../Components/BSBillingTables/BSBillingTable1/BSBTOverall1';
-import BSBillingTable2 from '../../Components/BSBillingTables/BSBillingTable2/BSBillingTable2';
-import BSBillingTable3 from '../../Components/BSBillingTables/BSBillingTable3/BSBillingTable3overall';
+
+const BSNavbar1 = lazy(() => import('../../Components/BSNavbar/BSNavbar1'));
+
+const BSNavbar2 = lazy(() => import('../../Components/BSNavbar/BSNavbar2'));
+
+const BSBillingTable1 = lazy(
+  () => import('../../Components/BSBillingTables/BSBillingTable1/BSBTOverall1')
+);
+
+const BSBillingTable2 = lazy(
+  () =>
+    import('../../Components/BSBillingTables/BSBillingTable2/BSBillingTable2')
+);
+
+const BSBillingTable3 = lazy(
+  () =>
+    import('../../Components/BSBillingTables/BSBillingTable3/BSBillingTable3overall')
+);
+
 import BSBillingTable4 from '../../Components/BSBillingTables/BSBillingTable4/BSBillingTable4Full';
-import BSBillingTable5 from '../../Components/BSBillingTables/BSBillingTable5/BSBillingTable5';
-import BSBillingTable6 from '../../Components/BSBillingTables/BSBillingTable6/BSBTOverall6';
-import BSBillingTable7 from '../../Components/BSBillingTables/BSBillingTable7/BSBillingTable7Overall.jsx';
+
+const BSBillingTable5 = lazy(
+  () =>
+    import('../../Components/BSBillingTables/BSBillingTable5/BSBillingTable5')
+);
+
+const BSBillingTable6 = lazy(
+  () => import('../../Components/BSBillingTables/BSBillingTable6/BSBTOverall6')
+);
+
+const BSBillingTable7 = lazy(
+  () =>
+    import('../../Components/BSBillingTables/BSBillingTable7/BSBillingTable7Overall.jsx')
+);
 import BSItemCard from '../../Components/BSItemCards/BSItemCard';
 import CategoryVertical from '../../Components/BSCategories/BSCategoryVertical';
 import { dynamicComponentProps } from '../DynamicComponentProps.js';
@@ -45,7 +70,6 @@ import {
   globalKioskSalesCount,
 } from '../../../../Features/Kiosk/kiosk.js';
 import SalesCountComponent from '../SalesCountComponent.jsx';
-import '../../../../Styles/BookingScreen/Template/BSLayout5/BSLayout5.scss';
 import PozoKioskIcon from '../../Components/UtillComponents/Pozo retail icons/PozoKioskIcon.jsx';
 import {
   GLobalSadminUserPin,
@@ -66,9 +90,11 @@ import RetailBookingClosing from '../RetailBookingClose.jsx';
 import ListOfSalesInvoices from '../../Components/BSBillingTables/ListofInvoices/ListOfSalesInvoices.jsx';
 import BSEwayBillicon from '../../Components/UtillComponents/BSEwayBillicon.jsx';
 import BSComboItemCard from '../../Components/BSItemCards/BSComboItemCard.jsx';
-import BranchTransferComponent from '../../Components/UtillComponents/BSQuickBranchToBranchTransferComponent.jsx';
+const BranchTransferComponent = lazy(
+  () =>
+    import('../../Components/UtillComponents/BSQuickBranchToBranchTransferComponent.jsx')
+);
 import BSExpireProductsList from '../../Components/UtillComponents/BSExpireProductsList.jsx';
-
 import BSOtherServiceItemCard from '../../Components/BSItemCards/BSOtherServiceItemCard.jsx';
 import BSOtherServicesHorizontalcat from '../../Components/BSCategories/BSOtherServicesHorizontalcat';
 import BSOtherServicesVerticalcat from '../../Components/BSCategories/BSOtherServicesVerticalcat.jsx';
@@ -79,6 +105,8 @@ import { CiShop } from 'react-icons/ci';
 import BranchName from '../BranchName.jsx';
 import ComboSalesBillTable from '../../Components/BSBillingTables/ComboSalesBillTable/ComboSalesBillTable.jsx';
 import PlanExpireNotification from '../PlanExpireNotification.jsx';
+const subDirectory = import.meta.env.BASE_URL;
+const commonDirectory = import.meta.env.COMMON_BASE_URL;
 
 const BSLayout5 = () => {
   const dispatch = useDispatch();
@@ -115,13 +143,15 @@ const BSLayout5 = () => {
   const DineInAccess = SettingDataSelector?.[0]?.SettingDtlDetails.filter(
     (i) => i.SettingIdName === 'DineIn'
   )?.[0];
+  const AppName = SessionData?.AppName;
   const AppId = SessionData?.AppId;
   const CompId = SessionData?.CompId;
   const BranchId = SessionData?.BranchId;
   const UserId = SessionData?.UserId;
   const UserType = SessionData?.UserType;
   const currentDateValue = moment().format('YYYY-MM-DD HH:mm:ss');
-  
+  const animations = ['example1', 'example2', 'example3'];
+  let ss = animations[count];
   let containerHeight = isMobile
     ? AppExpDate?.RemainingDays <= 7 || AppExpDate?.PlanType?.toLowerCase() === 'extend'
       ? '580px'

src/Pages/BookingScreen/Template/BSLayout6/BSLayout6.jsx

@@ -1,19 +1,48 @@
-import React, { useEffect, useState, useCallback } from 'react';
+import React, { useEffect, useState, useCallback, lazy, Suspense } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { isMobile } from 'react-device-detect';
 import moment from 'moment';
 import { Tooltip, Badge, Popconfirm } from 'antd';
-import BSNavbar1 from '../../Components/BSNavbar/BSNavbar1';
-import BSNavbar2 from '../../Components/BSNavbar/BSNavbar2';
-import BSBillingTable1 from '../../Components/BSBillingTables/BSBillingTable1/BSBTOverall1';
-import BSBillingTable2 from '../../Components/BSBillingTables/BSBillingTable2/BSBillingTable2';
-import BSBillingTable3 from '../../Components/BSBillingTables/BSBillingTable3/BSBillingTable3overall';
-import BSBillingTable4 from '../../Components/BSBillingTables/BSBillingTable4/BSBillingTable4Full';
-import BSBillingTable5 from '../../Components/BSBillingTables/BSBillingTable5/BSBillingTable5';
-import BSBillingTable6 from '../../Components/BSBillingTables/BSBillingTable6/BSBTOverall6';
-import BSBillingTable7 from '../../Components/BSBillingTables/BSBillingTable7/BSBillingTable7Overall.jsx';
+const BSNavbar1 = lazy(() => import('../../Components/BSNavbar/BSNavbar1'));
+
+const BSNavbar2 = lazy(() => import('../../Components/BSNavbar/BSNavbar2'));
+
+const BSBillingTable1 = lazy(
+  () => import('../../Components/BSBillingTables/BSBillingTable1/BSBTOverall1')
+);
+
+const BSBillingTable2 = lazy(
+  () =>
+    import('../../Components/BSBillingTables/BSBillingTable2/BSBillingTable2')
+);
+
+const BSBillingTable3 = lazy(
+  () =>
+    import('../../Components/BSBillingTables/BSBillingTable3/BSBillingTable3overall')
+);
+
+const BSBillingTable4 = lazy(
+  () =>
+    import('../../Components/BSBillingTables/BSBillingTable4/BSBillingTable4Full')
+);
+
+const BSBillingTable5 = lazy(
+  () =>
+    import('../../Components/BSBillingTables/BSBillingTable5/BSBillingTable5')
+);
+
+const BSBillingTable6 = lazy(
+  () => import('../../Components/BSBillingTables/BSBillingTable6/BSBTOverall6')
+);
+
+const BSBillingTable7 = lazy(
+  () =>
+    import('../../Components/BSBillingTables/BSBillingTable7/BSBillingTable7Overall.jsx')
+);
 import BSItemCard from '../../Components/BSItemCards/BSItemCard';
-import CategoryHorizontal from '../../Components/BSCategories/BSCategoryHorizontal';
+const CategoryHorizontal = lazy(
+  () => import('../../Components/BSCategories/BSCategoryHorizontal')
+);
 import { dynamicComponentProps } from '../DynamicComponentProps.js';
 import {
   GlobalPricingAppPricingName,
@@ -55,7 +84,6 @@ import {
 import { Messages } from '../../../../Components/Notifications/Messages.jsx';
 import SAdminUserNotification from '../../Components/BookingFunctionality/SAdminUserNotification.jsx';
 import SalesCountComponent from '../SalesCountComponent.jsx';
-import '../../../../Styles/BookingScreen/Template/BSLayout6/BSLayout6.scss';
 import {
   getBookingStatus,
   GlobalBookingStatus,
@@ -64,18 +92,29 @@ import { PutBookingClose } from '../../../../Features/BookingScreen/RetailBookin
 import TooltipWrapper from '../../../../Components/Tooltip/Tooltip.jsx';
 import BookingCloseIcon from '../../Components/UtillComponents/BookingCloseIcon.jsx';
 import RetailBookingClosing from '../RetailBookingClose.jsx';
-import ListOfSalesInvoices from '../../Components/BSBillingTables/ListofInvoices/ListOfSalesInvoices.jsx';
-import BSEwayBillicon from '../../Components/UtillComponents/BSEwayBillicon.jsx';
-import BSComboItemCard from '../../Components/BSItemCards/BSComboItemCard.jsx';
-import BranchTransferComponent from '../../Components/UtillComponents/BSQuickBranchToBranchTransferComponent.jsx';
-import BSExpireProductsList from '../../Components/UtillComponents/BSExpireProductsList.jsx';
+const ListOfSalesInvoices = lazy(
+  () =>
+    import('../../Components/BSBillingTables/ListofInvoices/ListOfSalesInvoices.jsx')
+);
+const BSEwayBillicon = lazy(
+  () => import('../../Components/UtillComponents/BSEwayBillicon.jsx')
+);
+const BSComboItemCard = lazy(
+  () => import('../../Components/BSItemCards/BSComboItemCard.jsx')
+);
+const BranchTransferComponent = lazy(
+  () =>
+    import('../../Components/UtillComponents/BSQuickBranchToBranchTransferComponent.jsx')
+);
+const BSExpireProductsList = lazy(
+  () => import('../../Components/UtillComponents/BSExpireProductsList.jsx')
+);
+
 import BSOtherServiceItemCard from '../../Components/BSItemCards/BSOtherServiceItemCard.jsx';
 import BSOtherServicesHorizontalcat from '../../Components/BSCategories/BSOtherServicesHorizontalcat';
 import BSNavbar3 from '../../Components/BSNavbar/BSNavbar3.jsx';
 import SalesCountForStandard from '../SalesCountForStandard.jsx';
 import StandardTable from '../../Components/BSBillingTables/StandardTable/StandardTable.jsx';
-import { CiShop } from 'react-icons/ci';
-import BranchName from '../BranchName.jsx';
 import ComboSalesBillTable from '../../Components/BSBillingTables/ComboSalesBillTable/ComboSalesBillTable.jsx';
 import PlanExpireNotification from '../PlanExpireNotification.jsx';
 const BSLayout6 = () => {
@@ -112,10 +151,12 @@ const BSLayout6 = () => {
   const AppExpDate = useSelector(GlobalAppExpDateData);
   const [screenHeight, setScreenHeight] = useState(window?.innerHeight);
   // const [AppExpDate, setAppExpDate] = useState(0);
+  const [count, setcount] = useState(0);
   const BookingNavbar = BSLayout6Data?.BookingNavbar?.[0];
   const BookingCategory = BSLayout6Data?.BookingCategory;
   const BookingCard = BSLayout6Data?.BookingCard;
   const BookingBilling = BSLayout6Data?.BookingBilling?.[0];
+  const AppName = SessionData?.AppName;
   const AppId = SessionData?.AppId;
   const CompId = SessionData?.CompId;
   const BranchId = SessionData?.BranchId;
@@ -128,12 +169,9 @@ const BSLayout6 = () => {
   )?.[0];
 
   const currentDateValue = moment().format('YYYY-MM-DD HH:mm:ss');
-  const tableData = useSelector(GlobalOrderCardDetails);
   const PricingAppPricingName = useSelector(GlobalPricingAppPricingName);
   const SAdminuserPin = useSelector(GLobalSadminUserPin);
 
-  const SelectedBillColor = useSelector(SelectedGlobalBillingColorDetail);
-
   const [messageType, setMessageType] = useState(null);
   const [messageData, setMessageData] = useState(null);
   const [popOverOpen, setPopOverOpen] = useState(false);
@@ -149,7 +187,6 @@ const BSLayout6 = () => {
     }
   }, [SessionData]);
 
- 
   useEffect(() => {
     if (AppId && CompId && BranchId && UserId) {
       fetchBookingStatus();
@@ -185,16 +222,17 @@ const BSLayout6 = () => {
   };
 
   let containerHeight = isMobile
-    ? AppExpDate?.RemainingDays <= 7 || AppExpDate?.PlanType?.toLowerCase() === 'extend'
+    ? AppExpDate?.RemainingDays <= 7 ||
+      AppExpDate?.PlanType?.toLowerCase() === 'extend'
       ? '577px'
       : '595px'
-    : UserType != 'Super Admin' &&
-        UserType != 'Super Admin User' &&
-        AppExpDate?.RemainingDays <= 7 || AppExpDate?.PlanType?.toLowerCase() === 'extend'
+    : (UserType != 'Super Admin' &&
+          UserType != 'Super Admin User' &&
+          AppExpDate?.RemainingDays <= 7) ||
+        AppExpDate?.PlanType?.toLowerCase() === 'extend'
       ? '96vh'
       : '99vh';
 
-  
   useEffect(() => {
     function handleResize() {
       setScreenHeight(window.innerHeight);
@@ -207,7 +245,6 @@ const BSLayout6 = () => {
     };
   }, []);
 
- 
   const openModalKiosk = () => {
     setKioskopen(true);
   };
@@ -277,312 +314,317 @@ const BSLayout6 = () => {
     setBookingModalOpen(false);
   };
   return (
-    <>
-      <Messages
-        messageType={messageType}
-        messageData={messageData}
-        onComplete={onComplete}
-      />
-      {UserType != 'Super Admin' &&
-        UserType != 'Super Admin User' &&
-        (AppExpDate?.RemainingDays <= 30 || AppExpDate === 'undefined' || AppExpDate?.PlanType?.toLowerCase() === 'extend') && (
-          <PlanExpireNotification  />
-        )}
+    <Suspense fallback={<div>Loading components...</div>}>
+      <>
+        <Messages
+          messageType={messageType}
+          messageData={messageData}
+          onComplete={onComplete}
+        />
+        {UserType != 'Super Admin' &&
+          UserType != 'Super Admin User' &&
+          (AppExpDate?.RemainingDays <= 30 ||
+            AppExpDate === 'undefined' ||
+            AppExpDate?.PlanType?.toLowerCase() === 'extend') && (
+            <PlanExpireNotification />
+          )}
 
-      <div
-        className="BSLayout6-fullbody"
-        style={{ height: containerHeight, overflow: 'hidden' }}
-      >
-        <div className="BSLayout6-fullnav">
-          <div className="BSLayout6-Navbar">
-            {BookingNavbar == 'Navbar1' && <BSNavbar1 />}
-            {BookingNavbar == 'Navbar2' && <BSNavbar2 />}
-            {BookingNavbar == 'Navbar3' && <BSNavbar3 />}
-          </div>
-          {BookingNavbar != 'Navbar3' ? (
-            <div className="Layout-bill-container">
-              <div
-                className="Layout-bill-Subcontainer"
-                style={{ width: OtherServicesglobal ? '10%' : '100%' }}
-              >
-                {UserType !== 'Employee' && (
-                  <div className="pricing-name-details">
-                    {PricingAppPricingName?.[0]?.PricingName +
-                      ' / ' +
-                      PricingAppPricingName?.[0]?.Type}
-                  </div>
-                )}
-                {!OtherServicesglobal && (
-                  <SalesCountComponent
-                    DineInAccess={DineInAccess}
-                    GlobalsalesDetailData={GlobalsalesDetailData}
-                  />
-                )}
-                {!OtherServicesglobal &&
-                  SessionData?.FeatureAddonData?.FeatureDtls?.find(
-                    (item) =>
-                      item?.FeatureAddonName?.toLowerCase() === 'kiosk sales'
-                  ) &&
-                  !sportsAppPreference && (
-                    <div
-                      style={{
-                        pointerEvents: OrderStatus > 0 ? 'none' : 'auto',
-                        opacity: OrderStatus > 0 ? 0.5 : 1,
-                      }}
-                    >
-                      <Tooltip title={'Kiosk Sales'}>
-                        {''}
-                        <Badge
-                          count={badgeCount}
-                          offset={[-10, 3]}
-                          size="small"
-                        >
-                          <PozoKioskIcon
-                            onClick={() => openModalKiosk()}
-                            style={{ cursor: 'pointer', fontSize: '1.5rem' }}
-                            className="iconsize"
-                          />
-                        </Badge>
-                      </Tooltip>
+        <div
+          className="BSLayout6-fullbody"
+          style={{ height: containerHeight, overflow: 'hidden' }}
+        >
+          <div className="BSLayout6-fullnav">
+            <div className="BSLayout6-Navbar">
+              {BookingNavbar == 'Navbar1' && <BSNavbar1 />}
+              {BookingNavbar == 'Navbar2' && <BSNavbar2 />}
+              {BookingNavbar == 'Navbar3' && <BSNavbar3 />}
+            </div>
+            {BookingNavbar != 'Navbar3' ? (
+              <div className="Layout-bill-container">
+                <div
+                  className="Layout-bill-Subcontainer"
+                  style={{ width: OtherServicesglobal ? '10%' : '100%' }}
+                >
+                  {UserType !== 'Employee' && (
+                    <div className="pricing-name-details">
+                      {PricingAppPricingName?.[0]?.PricingName +
+                        ' / ' +
+                        PricingAppPricingName?.[0]?.Type}
                     </div>
                   )}
-                {!OtherServicesglobal && (
-                  <TooltipWrapper
-                    title={'Low Stock Alerts'}
-                    isMobile={isMobile}
-                  >
-                    {' '}
-                    <BSExpireProductsList />
-                  </TooltipWrapper>
-                )}
-                {!OtherServicesglobal && Kioskopen && (
-                  <BSKioskCounterPayment
-                    Kioskopen={Kioskopen}
-                    closeKioskModal={closeModalKiosk}
-                  />
-                )}
-                {SAdminuserPin?.length > 0 &&
-                  UserType != 'Super Admin User' && (
-                    <div>
-                      <SAdminUserNotification
-                        SAdminuserPin={SAdminuserPin}
-                        popOverOpen={popOverOpen}
-                        handleSupportUser={handleSupportUser}
-                        handlePopOverOpen={handlePopOverOpen}
-                      />
-                    </div>
+                  {!OtherServicesglobal && (
+                    <SalesCountComponent
+                      DineInAccess={DineInAccess}
+                      GlobalsalesDetailData={GlobalsalesDetailData}
+                    />
                   )}
-                {!OtherServicesglobal && (
-                  <>
-                    {' '}
-                    {CheckBookingStatus == 'Open' ? (
-                      <div style={{ marginLeft: '10px' }}>
-                        <TooltipWrapper
-                          title={'Booking Close'}
-                          isMobile={isMobile}
-                        >
-                          {' '}
-                          <BookingCloseIcon
-                            onClick={OpenBookingModal}
-                            bgFill={'#52c41a'}
-                            style={{
-                              fontSize: '16px',
-                              marginTop: '4px',
-                              color: '#52c41a',
-                              cursor: 'pointer',
-                            }}
-                          />
-                          {/* <button className="BookingCloseButton"
-                                        >Booking Close</button> */}
-                        </TooltipWrapper>
-                      </div>
-                    ) : (
-                      <div style={{ marginLeft: '10px' }}>
-                        <TooltipWrapper
-                          title="Booking Open"
-                          isMobile={isMobile}
-                        >
-                          <Popconfirm
-                            placement="leftTop"
-                            title="Booking Open"
-                            description="Are you sure you want to Open the sales?"
-                            okText="Yes"
-                            cancelText="No"
-                            onConfirm={() => BookingOpenFun('Open')}
+                  {!OtherServicesglobal &&
+                    SessionData?.FeatureAddonData?.FeatureDtls?.find(
+                      (item) =>
+                        item?.FeatureAddonName?.toLowerCase() === 'kiosk sales'
+                    ) &&
+                    !sportsAppPreference && (
+                      <div
+                        style={{
+                          pointerEvents: OrderStatus > 0 ? 'none' : 'auto',
+                          opacity: OrderStatus > 0 ? 0.5 : 1,
+                        }}
+                      >
+                        <Tooltip title={'Kiosk Sales'}>
+                          {''}
+                          <Badge
+                            count={badgeCount}
+                            offset={[-10, 3]}
+                            size="small"
                           >
-                            <span>
-                              <BookingCloseIcon
-                                bgFill="red"
-                                style={{
-                                  fontSize: '16px',
-                                  marginTop: '4px',
-                                  color: '#52c41a',
-                                  cursor: 'pointer',
-                                }}
-                              />
-                            </span>
-                          </Popconfirm>
-                        </TooltipWrapper>
+                            <PozoKioskIcon
+                              onClick={() => openModalKiosk()}
+                              style={{ cursor: 'pointer', fontSize: '1.5rem' }}
+                              className="iconsize"
+                            />
+                          </Badge>
+                        </Tooltip>
+                      </div>
+                    )}
+                  {!OtherServicesglobal && (
+                    <TooltipWrapper
+                      title={'Low Stock Alerts'}
+                      isMobile={isMobile}
+                    >
+                      {' '}
+                      <BSExpireProductsList />
+                    </TooltipWrapper>
+                  )}
+                  {!OtherServicesglobal && Kioskopen && (
+                    <BSKioskCounterPayment
+                      Kioskopen={Kioskopen}
+                      closeKioskModal={closeModalKiosk}
+                    />
+                  )}
+                  {SAdminuserPin?.length > 0 &&
+                    UserType != 'Super Admin User' && (
+                      <div>
+                        <SAdminUserNotification
+                          SAdminuserPin={SAdminuserPin}
+                          popOverOpen={popOverOpen}
+                          handleSupportUser={handleSupportUser}
+                          handlePopOverOpen={handlePopOverOpen}
+                        />
+                      </div>
+                    )}
+                  {!OtherServicesglobal && (
+                    <>
+                      {' '}
+                      {CheckBookingStatus == 'Open' ? (
+                        <div style={{ marginLeft: '10px' }}>
+                          <TooltipWrapper
+                            title={'Booking Close'}
+                            isMobile={isMobile}
+                          >
+                            {' '}
+                            <BookingCloseIcon
+                              onClick={OpenBookingModal}
+                              bgFill={'#52c41a'}
+                              style={{
+                                fontSize: '16px',
+                                marginTop: '4px',
+                                color: '#52c41a',
+                                cursor: 'pointer',
+                              }}
+                            />
+                            {/* <button className="BookingCloseButton"
+                                        >Booking Close</button> */}
+                          </TooltipWrapper>
+                        </div>
+                      ) : (
+                        <div style={{ marginLeft: '10px' }}>
+                          <TooltipWrapper
+                            title="Booking Open"
+                            isMobile={isMobile}
+                          >
+                            <Popconfirm
+                              placement="leftTop"
+                              title="Booking Open"
+                              description="Are you sure you want to Open the sales?"
+                              okText="Yes"
+                              cancelText="No"
+                              onConfirm={() => BookingOpenFun('Open')}
+                            >
+                              <span>
+                                <BookingCloseIcon
+                                  bgFill="red"
+                                  style={{
+                                    fontSize: '16px',
+                                    marginTop: '4px',
+                                    color: '#52c41a',
+                                    cursor: 'pointer',
+                                  }}
+                                />
+                              </span>
+                            </Popconfirm>
+                          </TooltipWrapper>
+                        </div>
+                      )}
+                    </>
+                  )}
+                  {!OtherServicesglobal && (
+                    <div style={{ marginLeft: '10px' }}>
+                      <TooltipWrapper title={'E-way Bill'} isMobile={isMobile}>
+                        {''}
+                        <BSEwayBillicon
+                          style={{ cursor: 'pointer', marginTop: '5px' }}
+                          onClick={OpenListOfInvoices}
+                        />
+                      </TooltipWrapper>
+                    </div>
+                  )}
+                </div>
+              </div>
+            ) : (
+              <SalesCountForStandard
+                PricingAppPricingName={PricingAppPricingName}
+                DineInAccess={DineInAccess}
+                GlobalsalesDetailData={GlobalsalesDetailData}
+              />
+            )}
+            <div
+              className="BSLayout6-category-div"
+              style={{
+                backgroundColor: SelectedCatgColor?.['OverallBackgroundColor'],
+              }}
+            >
+              {!OtherServicesglobal && Comboglobal === false && (
+                <CategoryHorizontal
+                  categoryFunction={dynamicComponentProps(
+                    'Category',
+                    BSLayout6Data?.BookingCategory?.[1],
+                    BSLayout6Data?.BookingCategory?.[0]
+                  )}
+                />
+              )}
+              {OtherServicesglobal && (
+                <BSOtherServicesHorizontalcat
+                  categoryFunction={dynamicComponentProps(
+                    'Category',
+                    BSLayout6Data?.BookingCategory?.[1],
+                    BSLayout6Data?.BookingCategory?.[0]
+                  )}
+                />
+              )}
+            </div>
+          </div>
+
+          <div
+            className="BSLayout6-fulldiv"
+            style={{
+              backgroundColor: GlobalLayoutColorDetail?.OverallBackgroundColor,
+            }}
+          >
+            <div
+              className="BSLayout6-cards"
+              style={{
+                backgroundColor: SelectedCardColor?.['OverallBackgroundColor'],
+                width: '100vw',
+                display: 'flex',
+              }}
+            >
+              {!OtherServicesglobal && Comboglobal === false && (
+                <BSItemCard
+                  // screenHeight={screenHeight}
+                  cardFunctionality={dynamicComponentProps(
+                    'Card',
+                    BSLayout6Data?.BookingCard?.[1],
+                    BSLayout6Data?.BookingCard?.[0]
+                  )}
+                />
+              )}
+              {!OtherServicesglobal && Comboglobal === true && (
+                <BSComboItemCard
+                  cardFunctionality={dynamicComponentProps(
+                    'Card',
+                    BSLayout6Data?.BookingCard?.[1],
+                    BSLayout6Data?.BookingCard?.[0]
+                  )}
+                />
+              )}
+              {OtherServicesglobal && (
+                <BSOtherServiceItemCard
+                  screenHeight={window.innerHeight}
+                  cardFunctionality={dynamicComponentProps(
+                    'Card',
+                    BookingCard?.[1],
+                    BookingCard?.[0]
+                  )}
+                />
+              )}
+            </div>
+
+            <div className="BSLayout6table-fulldiv">
+              <div className="BSLayout6-table">
+                {action ? (
+                  <BranchTransferComponent />
+                ) : (
+                  <>
+                    {BSLayout6Data?.BookingBilling?.[0] == 'Billing1' && (
+                      <BSBillingTable1 />
+                    )}
+                    {BSLayout6Data?.BookingBilling?.[0] == 'Billing2' && (
+                      <BSBillingTable2 />
+                    )}
+                    {BSLayout6Data?.BookingBilling?.[0] == 'Billing3' && (
+                      <BSBillingTable3 />
+                    )}
+                    {BSLayout6Data?.BookingBilling?.[0] == 'Billing4' && (
+                      <BSBillingTable4 />
+                    )}
+                    {BSLayout6Data?.BookingBilling?.[0] == 'Billing5' && (
+                      <BSBillingTable5 />
+                    )}
+                    {BSLayout6Data?.BookingBilling?.[0] == 'Billing6' && (
+                      <BSBillingTable6 />
+                    )}
+                    {BSLayout6Data?.BookingBilling?.[0] == 'Billing7' && (
+                      <BSBillingTable7 />
+                    )}
+                    {BookingBilling == 'Billing8' && <ComboSalesBillTable />}
+                    {BSLayout6Data?.BookingBilling?.[0] ==
+                      'StandardBilling' && (
+                      <div
+                        className="BSCategory2New"
+                        style={{
+                          height: BSLayout6Data ? '88vh' : '99vh',
+                        }}
+                      >
+                        <StandardTable />
                       </div>
                     )}
                   </>
                 )}
-                {!OtherServicesglobal && (
-                  <div style={{ marginLeft: '10px' }}>
-                    <TooltipWrapper title={'E-way Bill'} isMobile={isMobile}>
-                      {''}
-                      <BSEwayBillicon
-                        style={{ cursor: 'pointer', marginTop: '5px' }}
-                        onClick={OpenListOfInvoices}
-                      />
-                    </TooltipWrapper>
-                  </div>
-                )}
-              </div>
-            </div>
-          ) : (
-            <SalesCountForStandard
-              PricingAppPricingName={PricingAppPricingName}
-              DineInAccess={DineInAccess}
-              GlobalsalesDetailData={GlobalsalesDetailData}
-            />
-          )}
-          <div
-            className="BSLayout6-category-div"
-            style={{
-              backgroundColor: SelectedCatgColor?.['OverallBackgroundColor'],
-            }}
-          >
-            {!OtherServicesglobal && Comboglobal === false && (
-              <CategoryHorizontal
-                categoryFunction={dynamicComponentProps(
-                  'Category',
-                  BSLayout6Data?.BookingCategory?.[1],
-                  BSLayout6Data?.BookingCategory?.[0]
-                )}
-              />
-            )}
-            {OtherServicesglobal && (
-              <BSOtherServicesHorizontalcat
-                categoryFunction={dynamicComponentProps(
-                  'Category',
-                  BSLayout6Data?.BookingCategory?.[1],
-                  BSLayout6Data?.BookingCategory?.[0]
-                )}
-              />
-            )}
-          </div>
-        </div>
-
-        <div
-          className="BSLayout6-fulldiv"
-          style={{
-            backgroundColor: GlobalLayoutColorDetail?.OverallBackgroundColor,
-          }}
-        >
-          <div
-            className="BSLayout6-cards"
-            style={{
-              backgroundColor: SelectedCardColor?.['OverallBackgroundColor'],
-              width: '100vw',
-              display: 'flex',
-            }}
-          >
-            {!OtherServicesglobal && Comboglobal === false && (
-              <BSItemCard
-                // screenHeight={screenHeight}
-                cardFunctionality={dynamicComponentProps(
-                  'Card',
-                  BSLayout6Data?.BookingCard?.[1],
-                  BSLayout6Data?.BookingCard?.[0]
-                )}
-              />
-            )}
-            {!OtherServicesglobal && Comboglobal === true && (
-              <BSComboItemCard
-                cardFunctionality={dynamicComponentProps(
-                  'Card',
-                  BSLayout6Data?.BookingCard?.[1],
-                  BSLayout6Data?.BookingCard?.[0]
-                )}
-              />
-            )}
-            {OtherServicesglobal && (
-              <BSOtherServiceItemCard
-                screenHeight={window.innerHeight}
-                cardFunctionality={dynamicComponentProps(
-                  'Card',
-                  BookingCard?.[1],
-                  BookingCard?.[0]
-                )}
-              />
-            )}
-          </div>
-
-          <div className="BSLayout6table-fulldiv">
-            <div className="BSLayout6-table">
-              {action ? (
-                <BranchTransferComponent />
-              ) : (
-                <>
-                  {BSLayout6Data?.BookingBilling?.[0] == 'Billing1' && (
-                    <BSBillingTable1 />
-                  )}
-                  {BSLayout6Data?.BookingBilling?.[0] == 'Billing2' && (
-                    <BSBillingTable2 />
-                  )}
-                  {BSLayout6Data?.BookingBilling?.[0] == 'Billing3' && (
-                    <BSBillingTable3 />
-                  )}
-                  {BSLayout6Data?.BookingBilling?.[0] == 'Billing4' && (
-                    <BSBillingTable4 />
-                  )}
-                  {BSLayout6Data?.BookingBilling?.[0] == 'Billing5' && (
-                    <BSBillingTable5 />
-                  )}
-                  {BSLayout6Data?.BookingBilling?.[0] == 'Billing6' && (
-                    <BSBillingTable6 />
-                  )}
-                  {BSLayout6Data?.BookingBilling?.[0] == 'Billing7' && (
-                    <BSBillingTable7 />
-                  )}
-                  {BookingBilling == 'Billing8' && <ComboSalesBillTable />}
-                  {BSLayout6Data?.BookingBilling?.[0] == 'StandardBilling' && (
-                    <div
-                      className="BSCategory2New"
-                      style={{
-                        height: BSLayout6Data ? '88vh' : '99vh',
-                      }}
-                    >
-                      <StandardTable />
-                    </div>
-                  )}
-                </>
-              )}
-              {/* <div className="salesStoreName"
+                {/* <div className="salesStoreName"
                 style={{
                   color: SelectedBillColor?.['FontColor'],
                   backgroundColor: SelectedBillColor?.['BackgroundColor'],
                 }}>
                 <BranchName />
               </div> */}
+              </div>
             </div>
           </div>
+          {BookingModalOpen && !OtherServicesglobal && (
+            <RetailBookingClosing
+              PaymentOpen={BookingModalOpen}
+              PaymentClose={HandleBookingModalClose}
+            />
+          )}
+          {ListOfInvoices && !OtherServicesglobal && (
+            <ListOfSalesInvoices
+              ListOfInvoicesOpen={ListOfInvoices}
+              handleInvoiceClose={handleInvoiceClose}
+            />
+          )}
         </div>
-        {BookingModalOpen && !OtherServicesglobal && (
-          <RetailBookingClosing
-            PaymentOpen={BookingModalOpen}
-            PaymentClose={HandleBookingModalClose}
-          />
-        )}
-        {ListOfInvoices && !OtherServicesglobal && (
-          <ListOfSalesInvoices
-            ListOfInvoicesOpen={ListOfInvoices}
-            handleInvoiceClose={handleInvoiceClose}
-          />
-        )}
-      </div>
-    </>
+      </>
+    </Suspense>
   );
 };
 export default BSLayout6;

src/Pages/BookingScreen/Template/BSLayout7/BSCombo1.jsx

@@ -1,17 +1,38 @@
-import React, { useEffect, useState, useCallback } from 'react';
+import React, { useEffect, useState, useCallback, lazy, Suspense } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import moment from 'moment';
 import { Tooltip, Badge, Popconfirm } from 'antd';
-import BSBillingTable1 from '../../Components/BSBillingTables/BSBillingTable1/BSBillingTable1';
-import BSBillingTable2 from '../../Components/BSBillingTables/BSBillingTable2/BsBill2';
-import BSBillingTable3 from '../../Components/BSBillingTables/BSBillingTable3/BSBillingTable3';
-import BSBillingTable4 from '../../Components/BSBillingTables/BSBillingTable4/BSBillingTable4';
-import BSBillingTable5 from '../../Components/BSBillingTables/BSBillingTable5/BsBill';
-import BSBillingTable6 from '../../Components/BSBillingTables/BSBillingTable6/BSBillingTable6';
-import BSBillingTable7 from '../../Components/BSBillingTables/BSBillingTable7/BSBillingTable7';
-import BSC1Payment from '../../Components/BSCombo/BSC1Payment';
-import BSC1NavBar from '../../Components/BSCombo/BSC1NavBar';
-import BSC1Search from '../../Components/BSCombo/BSC1Search';
+const BSBillingTable1 = lazy(
+  () =>
+    import('../../Components/BSBillingTables/BSBillingTable1/BSBillingTable1')
+);
+const BSBillingTable2 = lazy(
+  () => import('../../Components/BSBillingTables/BSBillingTable2/BsBill2')
+);
+const BSBillingTable3 = lazy(
+  () =>
+    import('../../Components/BSBillingTables/BSBillingTable3/BSBillingTable3')
+);
+const BSBillingTable4 = lazy(
+  () =>
+    import('../../Components/BSBillingTables/BSBillingTable4/BSBillingTable4')
+);
+const BSBillingTable5 = lazy(
+  () => import('../../Components/BSBillingTables/BSBillingTable5/BsBill')
+);
+const BSBillingTable6 = lazy(
+  () =>
+    import('../../Components/BSBillingTables/BSBillingTable6/BSBillingTable6')
+);
+const BSBillingTable7 = lazy(
+  () =>
+    import('../../Components/BSBillingTables/BSBillingTable7/BSBillingTable7')
+);
+
+// Combo components (lazy)
+const BSC1Payment = lazy(() => import('../../Components/BSCombo/BSC1Payment'));
+const BSC1NavBar = lazy(() => import('../../Components/BSCombo/BSC1NavBar'));
+const BSC1Search = lazy(() => import('../../Components/BSCombo/BSC1Search'));
 import {
   GlobalCombosearch,
   GlobalPayementloader,
@@ -29,8 +50,13 @@ import {
 import { isMobile } from 'react-device-detect';
 import { ArrowUpOutlined } from '@ant-design/icons';
 import { getSession } from '../../../../Services/Others.js';
-import BSNavBarComboSearch from '../../Components/UtillComponents/BSNavBarComboSearch.jsx';
-import BSKioskCounterPayment from '../../Components/UtillComponents/BSKioskCounterPayment.jsx';
+const BSNavBarComboSearch = lazy(
+  () => import('../../Components/UtillComponents/BSNavBarComboSearch.jsx')
+);
+
+const BSKioskCounterPayment = lazy(
+  () => import('../../Components/UtillComponents/BSKioskCounterPayment.jsx')
+);
 import {
   getKioskDatas,
   globalKioskSalesCount,
@@ -58,21 +84,43 @@ import {
 import { PutBookingClose } from '../../../../Features/BookingScreen/RetailBookingClose.js';
 import TooltipWrapper from '../../../../Components/Tooltip/Tooltip.jsx';
 import BookingCloseIcon from '../../Components/UtillComponents/BookingCloseIcon.jsx';
-import RetailBookingClosing from '../RetailBookingClose.jsx';
-import ListOfSalesInvoices from '../../Components/BSBillingTables/ListofInvoices/ListOfSalesInvoices.jsx';
-import BSEwayBillicon from '../../Components/UtillComponents/BSEwayBillicon.jsx';
-import BranchTransferComponent from '../../Components/UtillComponents/BSQuickBranchToBranchTransferComponent.jsx';
-import BSExpireProductsList from '../../Components/UtillComponents/BSExpireProductsList.jsx';
-import ComboSalesBillTable from '../../Components/BSBillingTables/ComboSalesBillTable/ComboSalesBillTable.jsx';
+const RetailBookingClosing = lazy(() => import('../RetailBookingClose.jsx'));
+
+const ListOfSalesInvoices = lazy(
+  () =>
+    import('../../Components/BSBillingTables/ListofInvoices/ListOfSalesInvoices.jsx')
+);
+
+const BranchTransferComponent = lazy(
+  () =>
+    import('../../Components/UtillComponents/BSQuickBranchToBranchTransferComponent.jsx')
+);
+
+const BSExpireProductsList = lazy(
+  () => import('../../Components/UtillComponents/BSExpireProductsList.jsx')
+);
+
+const ComboSalesBillTable = lazy(
+  () =>
+    import('../../Components/BSBillingTables/ComboSalesBillTable/ComboSalesBillTable.jsx')
+);
 import { GiBasket } from 'react-icons/gi';
 import { FaRegKeyboard } from 'react-icons/fa';
 import { CgSearchLoading } from 'react-icons/cg';
 import { DefaultModal } from '../../../../Components/Modal/DefaultModal.jsx';
-import MultipleSearch from '../../Components/UtillComponents/MultipleSearch.jsx';
-import VerfiedProducts from '../../Components/BSNavbar/verfiedProduct/VerfiedProducts.jsx';
+const MultipleSearch = lazy(
+  () => import('../../Components/UtillComponents/MultipleSearch.jsx')
+);
+
+const VerfiedProducts = lazy(
+  () => import('../../Components/BSNavbar/verfiedProduct/VerfiedProducts.jsx')
+);
 import ShortcutKeyHelper from '../../Components/UtillComponents/ShortcutKeyHelper.jsx';
 import PlanExpireNotification from '../PlanExpireNotification.jsx';
 
+const subDirectory = import.meta.env.BASE_URL;
+const commonDirectory = import.meta.env.COMMON_BASE_URL;
+
 export default function BSCombo1() {
   const dispatch = useDispatch();
   const { action, selectedProducts } = useSelector(
@@ -123,6 +171,7 @@ export default function BSCombo1() {
       item.SettingIdName === 'VerifyProduct' && item?.SettingValue === 'Y'
   );
 
+  const AppName = SessionData?.AppName;
   const AppId = SessionData?.AppId;
   const CompId = SessionData?.CompId;
   const BranchId = SessionData?.BranchId;
@@ -134,30 +183,11 @@ export default function BSCombo1() {
       ?.ScreenStatus ?? 'Open';
   const [BookingModalOpen, setBookingModalOpen] = useState(false);
   const currentDateValue = moment().format('YYYY-MM-DD HH:mm:ss');
-
+  const animations = ['example1', 'example2', 'example3'];
+  let ss = animations[count];
   const [ListOfInvoices, setListOfInvoices] = useState(false);
   const [ComboDropDown, setComboDropDown] = useState();
 
-  const [isAltPressed, setIsAltPressed] = useState(false);
-
-  useEffect(() => {
-    const handleKeyDown = (e) => {
-      if (e.key === 'F2') setIsAltPressed(true);
-    };
-
-    const handleKeyUp = (e) => {
-      if (e.key === 'F2') setIsAltPressed(false);
-    };
-
-    window.addEventListener('keydown', handleKeyDown);
-    window.addEventListener('keyup', handleKeyUp);
-
-    return () => {
-      window.removeEventListener('keydown', handleKeyDown);
-      window.removeEventListener('keyup', handleKeyUp);
-    };
-  }, []);
-
   useEffect(() => {
     fetchAmount();
     if (
@@ -169,6 +199,15 @@ export default function BSCombo1() {
     }
   }, [SessionData]);
 
+  useEffect(() => {
+    if (AppExpDate?.RemainingDays <= 7) {
+      const interval = setInterval(() => {
+        setcount((prevCount) => (prevCount >= 2 ? 0 : prevCount + 1));
+      }, 22000);
+
+      return () => clearInterval(interval);
+    }
+  }, [count == 2]);
   useEffect(() => {
     Combodata();
     if (AppId && CompId && BranchId && UserId) {
@@ -294,314 +333,327 @@ export default function BSCombo1() {
     }
   };
   return (
-    <>
-      <Messages
-        messageType={messageType}
-        messageData={messageData}
-        onComplete={onComplete}
-      />
-      {UserType != 'Super Admin' &&
-        UserType != 'Super Admin User' &&
-        (AppExpDate?.RemainingDays <= 7 ||
-          AppExpDate === 'undefined' ||
-          AppExpDate?.PlanType?.toLowerCase() === 'extend') && (
-          <PlanExpireNotification />
-        )}
+    <Suspense fallback={<div>Loading...</div>}>
+      <>
+        <Messages
+          messageType={messageType}
+          messageData={messageData}
+          onComplete={onComplete}
+        />
+        {UserType != 'Super Admin' &&
+          UserType != 'Super Admin User' &&
+          (AppExpDate?.RemainingDays <= 7 ||
+            AppExpDate === 'undefined' ||
+            AppExpDate?.PlanType?.toLowerCase() === 'extend') && (
+            <PlanExpireNotification />
+          )}
 
-      {/* Combo Container */}
-      <div className="overall-bscombo-container">
-        <div className="SearchSubnavbar-combo">
-          <BSC1NavBar data={BSComboData} SessionData={SessionData} />
-          <div className="comboNavbarSubMain">
-            {/* Multiple search  */}
-            <Tooltip title={'Multiple Search'}>
-              <div className="MultiSearchIconDiv">
-                <CgSearchLoading onClick={() => setMultiple(true)} />
-              </div>
-            </Tooltip>
-            {Comboglobal === false && (
-              <Tooltip
-                placement="bottom"
-                trigger={[]}
-                title="SHIFT + S"
-                open={isAltPressed}
-              >
-                <BSC1Search
-                  data={BSComboData?.BookingLayout[0]}
-                  OrderType={OrderType}
-                />
-              </Tooltip>
-            )}
-            {Comboglobal === true && (
-              <Tooltip
-                placement="bottom"
-                trigger={[]}
-                title="SHIFT + S"
-                open={isAltPressed}
-              >
-                <div style={{ padding: '4px' }} className="CombomainSearch">
-                  <div className="M">
-                    <div className="BSC1Search-div1">
-                      <BSNavBarComboSearch SessionData={SessionData} />
-                    </div>
-                  </div>
+        {/* Combo Container */}
+        <div className="overall-bscombo-container">
+          <div className="SearchSubnavbar-combo">
+            <BSC1NavBar data={BSComboData} SessionData={SessionData} />
+            <div className="comboNavbarSubMain">
+              {/* Multiple search  */}
+              <Tooltip title={'Multiple Search'}>
+                <div className="MultiSearchIconDiv">
+                  <CgSearchLoading onClick={() => setMultiple(true)} />
                 </div>
               </Tooltip>
-            )}
+              {Comboglobal === false && (
+                <Tooltip
+                  placement="bottom"
+                  trigger={[]}
+                  title="SHIFT + S"
+                  open={isAltPressed}
+                >
+                  <BSC1Search
+                    data={BSComboData?.BookingLayout[0]}
+                    OrderType={OrderType}
+                  />
+                </Tooltip>
+              )}
+              {Comboglobal === true && (
+                <Tooltip
+                  placement="bottom"
+                  trigger={[]}
+                  title="SHIFT + S"
+                  open={isAltPressed}
+                >
+                  <div style={{ padding: '4px' }} className="CombomainSearch">
+                    <div className="M">
+                      <div className="BSC1Search-div1">
+                        <BSNavBarComboSearch SessionData={SessionData} />
+                      </div>
+                    </div>
+                  </div>
+                </Tooltip>
+              )}
 
-            {/* <div className="Layout-bill-container" style={{ margin: '0' }}> */}
-            <div className="Layout-bill-Subcontainer ComboSubNavbar">
-              {UserType !== 'Employee' && (
-                <div className="pricing-name-details">
-                  <p>{PricingAppPricingName?.[0]?.PricingName}</p>
-                  <p>{PricingAppPricingName?.[0]?.Type}</p>
-                  {/* {PricingAppPricingName?.[0]?.PricingName +
+              {/* <div className="Layout-bill-container" style={{ margin: '0' }}> */}
+              <div className="Layout-bill-Subcontainer ComboSubNavbar">
+                {UserType !== 'Employee' && (
+                  <div className="pricing-name-details">
+                    <p>{PricingAppPricingName?.[0]?.PricingName}</p>
+                    <p>{PricingAppPricingName?.[0]?.Type}</p>
+                    {/* {PricingAppPricingName?.[0]?.PricingName +
                       ' / ' +
                       PricingAppPricingName?.[0]?.Type} */}
-                </div>
-              )}
-
-              {SessionData?.FeatureAddonData?.FeatureDtls?.find(
-                (item) =>
-                  item?.FeatureAddonName?.toLowerCase() === 'kiosk sales'
-              ) &&
-                !sportsAppPreference && (
-                  <div
-                    style={{
-                      pointerEvents: OrderStatus > 0 ? 'none' : 'auto',
-                      opacity: OrderStatus > 0 ? 0.5 : 1,
-                    }}
-                  >
-                    <Tooltip title={'Kiosk Sales'}>
-                      {''}
-                      <Badge count={badgeCount} offset={[-10, 3]} size="small">
-                        <PozoKioskIcon
-                          onClick={() => openModalKiosk()}
-                          style={{ cursor: 'pointer', fontSize: '1.5rem' }}
-                          className="iconsize"
-                        />
-                      </Badge>
-                    </Tooltip>
                   </div>
                 )}
 
-              {Kioskopen && (
-                <BSKioskCounterPayment
-                  Kioskopen={Kioskopen}
-                  closeKioskModal={closeModalKiosk}
-                />
-              )}
-              {SAdminuserPin?.length > 0 && UserType != 'Super Admin User' && (
-                <div>
-                  <SAdminUserNotification
-                    SAdminuserPin={SAdminuserPin}
-                    popOverOpen={popOverOpen}
-                    handleSupportUser={handleSupportUser}
-                    handlePopOverOpen={handlePopOverOpen}
-                  />
-                </div>
-              )}
-
-              <div className="combuSubNavbarRightSide">
-                <SalesCountComponent
-                  DineInAccess={DineInAccess}
-                  GlobalsalesDetailData={GlobalsalesDetailData}
-                />
-                {/* LOW STOCK ALERT  */}
-                <div className="BookingCloseCombo">
-                  <TooltipWrapper
-                    title={'Low Stock Alerts'}
-                    isMobile={isMobile}
-                  >
-                    {' '}
-                    <BSExpireProductsList />
-                  </TooltipWrapper>
-                </div>
-
-                {CheckBookingStatus == 'Open' ? (
-                  <div
-                    style={{ marginLeft: '2px' }}
-                    className="BookingCloseCombo"
-                  >
-                    <TooltipWrapper title={'Booking Close'} isMobile={isMobile}>
-                      {' '}
-                      <BookingCloseIcon
-                        onClick={OpenBookingModal}
-                        bgFill={'#1292ee'}
-                        style={{
-                          fontSize: '20px',
-                          marginTop: '4px',
-                          color: '#52c41a',
-                          cursor: 'pointer',
-                        }}
-                      />
-                      {/* <button className="BookingCloseButton"
-                          >Booking Close</button> */}
-                    </TooltipWrapper>
-                  </div>
-                ) : (
-                  <div style={{ marginLeft: '10px' }}>
-                    <TooltipWrapper title="Booking Open" isMobile={isMobile}>
-                      <Popconfirm
-                        placement="leftTop"
-                        title="Booking Open"
-                        description="Are you sure you want to Open the sales?"
-                        okText="Yes"
-                        cancelText="No"
-                        onConfirm={() => BookingOpenFun('Open')}
-                      >
-                        <span>
-                          <BookingCloseIcon
-                            bgFill="red"
-                            style={{
-                              fontSize: '16px',
-                              marginTop: '4px',
-                              color: '#52c41a',
-                              cursor: 'pointer',
-                            }}
-                          />
-                        </span>
-                      </Popconfirm>
-                    </TooltipWrapper>
-                  </div>
-                )}
-                {/* Verify Products */}
-                {VerifyTheProducts && (
-                  <TooltipWrapper
-                    title={'Verfied Products'}
-                    isMobile={isMobile}
-                  >
-                    <div>
-                      <VerfiedProducts />
-                    </div>
-                  </TooltipWrapper>
-                )}
-                <div
-                  style={{ display: 'flex', alignItems: 'center' }}
-                  className="comboPrichangeBTN"
-                >
-                  {ComboDropDown?.length >= 1 && (
+                {SessionData?.FeatureAddonData?.FeatureDtls?.find(
+                  (item) =>
+                    item?.FeatureAddonName?.toLowerCase() === 'kiosk sales'
+                ) &&
+                  !sportsAppPreference && (
                     <div
                       style={{
-                        fontSize: '1.5rem',
+                        pointerEvents: OrderStatus > 0 ? 'none' : 'auto',
+                        opacity: OrderStatus > 0 ? 0.5 : 1,
                       }}
                     >
-                      <TooltipWrapper title="Combo Product" isMobile={isMobile}>
-                        <GiBasket
-                          fill={Comboglobal === true ? '#52C41A' : '#1292EE'}
-                          enableBackground={
-                            Comboglobal === true ? '#1292EE' : '#52C41A'
-                          }
-                          onClick={handleClick}
+                      <Tooltip title={'Kiosk Sales'}>
+                        {''}
+                        <Badge
+                          count={badgeCount}
+                          offset={[-10, 3]}
+                          size="small"
+                        >
+                          <PozoKioskIcon
+                            onClick={() => openModalKiosk()}
+                            style={{ cursor: 'pointer', fontSize: '1.5rem' }}
+                            className="iconsize"
+                          />
+                        </Badge>
+                      </Tooltip>
+                    </div>
+                  )}
+
+                {Kioskopen && (
+                  <BSKioskCounterPayment
+                    Kioskopen={Kioskopen}
+                    closeKioskModal={closeModalKiosk}
+                  />
+                )}
+                {SAdminuserPin?.length > 0 &&
+                  UserType != 'Super Admin User' && (
+                    <div>
+                      <SAdminUserNotification
+                        SAdminuserPin={SAdminuserPin}
+                        popOverOpen={popOverOpen}
+                        handleSupportUser={handleSupportUser}
+                        handlePopOverOpen={handlePopOverOpen}
+                      />
+                    </div>
+                  )}
+
+                <div className="combuSubNavbarRightSide">
+                  <SalesCountComponent
+                    DineInAccess={DineInAccess}
+                    GlobalsalesDetailData={GlobalsalesDetailData}
+                  />
+                  {/* LOW STOCK ALERT  */}
+                  <div className="BookingCloseCombo">
+                    <TooltipWrapper
+                      title={'Low Stock Alerts'}
+                      isMobile={isMobile}
+                    >
+                      {' '}
+                      <BSExpireProductsList />
+                    </TooltipWrapper>
+                  </div>
+
+                  {CheckBookingStatus == 'Open' ? (
+                    <div
+                      style={{ marginLeft: '2px' }}
+                      className="BookingCloseCombo"
+                    >
+                      <TooltipWrapper
+                        title={'Booking Close'}
+                        isMobile={isMobile}
+                      >
+                        {' '}
+                        <BookingCloseIcon
+                          onClick={OpenBookingModal}
+                          bgFill={'#1292ee'}
                           style={{
-                            pointerEvents:
-                              OrderType === 'Failed' ? 'none' : 'auto',
+                            fontSize: '20px',
+                            marginTop: '4px',
+                            color: '#52c41a',
                             cursor: 'pointer',
                           }}
                         />
+                        {/* <button className="BookingCloseButton"
+                          >Booking Close</button> */}
+                      </TooltipWrapper>
+                    </div>
+                  ) : (
+                    <div style={{ marginLeft: '10px' }}>
+                      <TooltipWrapper title="Booking Open" isMobile={isMobile}>
+                        <Popconfirm
+                          placement="leftTop"
+                          title="Booking Open"
+                          description="Are you sure you want to Open the sales?"
+                          okText="Yes"
+                          cancelText="No"
+                          onConfirm={() => BookingOpenFun('Open')}
+                        >
+                          <span>
+                            <BookingCloseIcon
+                              bgFill="red"
+                              style={{
+                                fontSize: '16px',
+                                marginTop: '4px',
+                                color: '#52c41a',
+                                cursor: 'pointer',
+                              }}
+                            />
+                          </span>
+                        </Popconfirm>
                       </TooltipWrapper>
                     </div>
                   )}
-                </div>
-                {/* {preferenceshortcutkey && (
+                  {/* Verify Products */}
+                  {VerifyTheProducts && (
+                    <TooltipWrapper
+                      title={'Verfied Products'}
+                      isMobile={isMobile}
+                    >
+                      <div>
+                        <VerfiedProducts />
+                      </div>
+                    </TooltipWrapper>
+                  )}
+                  <div
+                    style={{ display: 'flex', alignItems: 'center' }}
+                    className="comboPrichangeBTN"
+                  >
+                    {ComboDropDown?.length >= 1 && (
+                      <div
+                        style={{
+                          fontSize: '1.5rem',
+                        }}
+                      >
+                        <TooltipWrapper
+                          title="Combo Product"
+                          isMobile={isMobile}
+                        >
+                          <GiBasket
+                            fill={Comboglobal === true ? '#52C41A' : '#1292EE'}
+                            enableBackground={
+                              Comboglobal === true ? '#1292EE' : '#52C41A'
+                            }
+                            onClick={handleClick}
+                            style={{
+                              pointerEvents:
+                                OrderType === 'Failed' ? 'none' : 'auto',
+                              cursor: 'pointer',
+                            }}
+                          />
+                        </TooltipWrapper>
+                      </div>
+                    )}
+                  </div>
+                  {/* {preferenceshortcutkey && (
                   <div className="keyboardShortcut">
                     <ShortcutKeyHelper />
                   </div>)} */}
+                </div>
               </div>
+              {/* </div> */}
             </div>
-            {/* </div> */}
           </div>
-        </div>
-        <div
-          // className="BSC1-Master"  comment by sree here this class name issues
-          className="ComboScreenPageTable"
-          style={{
-            height: isMobile ? '56vh' : '70vh',
-            overflow: 'hidden',
-          }}
-        >
-          {/* <div className="BS1ComboTable"> */}
           <div
-            className={
-              ComboSalesBillTable
-                ? 'BS1ComboTableComboSalesBillTable'
-                : 'BS1ComboTable'
-            }
+            // className="BSC1-Master"  comment by sree here this class name issues
+            className="ComboScreenPageTable"
+            style={{
+              height: isMobile ? '56vh' : '70vh',
+              overflow: 'hidden',
+            }}
           >
-            {action ? (
-              <BranchTransferComponent />
-            ) : (
-              // <ComboSalesBillTable />
-              <>
-                {BookingBilling == 'Billing1' && <BSBillingTable1 />}
-                {BookingBilling == 'Billing2' && <BSBillingTable2 />}
-                {BookingBilling == 'Billing3' && <BSBillingTable3 />}
-                {BookingBilling == 'Billing4' && <BSBillingTable4 />}
-                {BookingBilling == 'Billing5' && <BSBillingTable5 />}
-                {BookingBilling == 'Billing6' && <BSBillingTable6 />}
-                {BookingBilling == 'Billing7' && <BSBillingTable7 />}
-                {BookingBilling == 'Billing8' && <ComboSalesBillTable />}
-              </>
-            )}
-          </div>
-
-          <div style={{ position: 'fixed', bottom: '0' }}>
-            <BSC1Payment optionNames={BSComboData} />
-          </div>
-        </div>
-        {paymentloader === true && (
-          <div class="Payment-loader1">
-            <div class="Payment-loader">
-              <div class="contener_mixte">
-                <div class="ballcolor ball_1">&nbsp;</div>
-              </div>
-              <div class="contener_mixte">
-                <div class="ballcolor ball_2">&nbsp;</div>
-              </div>
-              <div class="contener_mixte">
-                <div class="ballcolor ball_3">&nbsp;</div>
-              </div>
-              <div class="contener_mixte">
-                <div class="ballcolor ball_4">&nbsp;</div>
-              </div>
-              <p style={{ marginTop: '2rem' }}>
-                {' '}
-                Please wait while we process your payment
-              </p>
-              {PaymentTransactionNumber != null && (
-                <p style={{ fontSize: '16px', fontWeight: '600' }}>
-                  Transaction Number : {PaymentTransactionNumber}
-                </p>
+            {/* <div className="BS1ComboTable"> */}
+            <div
+              className={
+                ComboSalesBillTable
+                  ? 'BS1ComboTableComboSalesBillTable'
+                  : 'BS1ComboTable'
+              }
+            >
+              {action ? (
+                <BranchTransferComponent />
+              ) : (
+                // <ComboSalesBillTable />
+                <>
+                  {BookingBilling == 'Billing1' && <BSBillingTable1 />}
+                  {BookingBilling == 'Billing2' && <BSBillingTable2 />}
+                  {BookingBilling == 'Billing3' && <BSBillingTable3 />}
+                  {BookingBilling == 'Billing4' && <BSBillingTable4 />}
+                  {BookingBilling == 'Billing5' && <BSBillingTable5 />}
+                  {BookingBilling == 'Billing6' && <BSBillingTable6 />}
+                  {BookingBilling == 'Billing7' && <BSBillingTable7 />}
+                  {BookingBilling == 'Billing8' && <ComboSalesBillTable />}
+                </>
               )}
             </div>
+
+            <div style={{ position: 'fixed', bottom: '0' }}>
+              <BSC1Payment optionNames={BSComboData} />
+            </div>
           </div>
+          {paymentloader === true && (
+            <div class="Payment-loader1">
+              <div class="Payment-loader">
+                <div class="contener_mixte">
+                  <div class="ballcolor ball_1">&nbsp;</div>
+                </div>
+                <div class="contener_mixte">
+                  <div class="ballcolor ball_2">&nbsp;</div>
+                </div>
+                <div class="contener_mixte">
+                  <div class="ballcolor ball_3">&nbsp;</div>
+                </div>
+                <div class="contener_mixte">
+                  <div class="ballcolor ball_4">&nbsp;</div>
+                </div>
+                <p style={{ marginTop: '2rem' }}>
+                  {' '}
+                  Please wait while we process your payment
+                </p>
+                {PaymentTransactionNumber != null && (
+                  <p style={{ fontSize: '16px', fontWeight: '600' }}>
+                    Transaction Number : {PaymentTransactionNumber}
+                  </p>
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+        {BookingModalOpen && (
+          <RetailBookingClosing
+            PaymentOpen={BookingModalOpen}
+            PaymentClose={HandleBookingModalClose}
+          />
         )}
-      </div>
-      {BookingModalOpen && (
-        <RetailBookingClosing
-          PaymentOpen={BookingModalOpen}
-          PaymentClose={HandleBookingModalClose}
+        {ListOfInvoices && (
+          <ListOfSalesInvoices
+            ListOfInvoicesOpen={ListOfInvoices}
+            handleInvoiceClose={handleInvoiceClose}
+          />
+        )}
+        <DefaultModal
+          open={multiple}
+          title="Multiple Search"
+          footer={false}
+          width={350}
+          handleCancel={() => setMultiple(false)}
+          destroyOnClose={true}
+          children={
+            <>
+              <MultipleSearch close={setMultiple} />
+            </>
+          }
         />
-      )}
-      {ListOfInvoices && (
-        <ListOfSalesInvoices
-          ListOfInvoicesOpen={ListOfInvoices}
-          handleInvoiceClose={handleInvoiceClose}
-        />
-      )}
-      <DefaultModal
-        open={multiple}
-        title="Multiple Search"
-        footer={false}
-        width={350}
-        handleCancel={() => setMultiple(false)}
-        destroyOnClose={true}
-        children={
-          <>
-            <MultipleSearch close={setMultiple} />
-          </>
-        }
-      />
-    </>
+      </>
+    </Suspense>
   );
 }

src/Pages/BookingScreen/Template/PlanExpireNotification.jsx

@@ -19,7 +19,7 @@ import "../../../Styles/BookingScreen/Template/BSLayout3/BSLayout3.scss";
 
 const subDirectory = import.meta.env.ENV_BASE_URL;
 const commonDirectory = import.meta.env.ENV_COMMON_BASE_URL;
-console.log('commonDirectory', commonDirectory);
+
 const PlanExpireNotification = () => {
   const navigate = useNavigate();
   const dispatch = useDispatch();

src/Pages/CancelReschedule/ChangePaymentmode.jsx

@@ -14,7 +14,6 @@ import { InputField } from '../../Components/Forms/InputField';
 import Buttons from '../../Components/Forms/Buttons';
 import { ArrowRightOutlined } from '@ant-design/icons';
 import { DropDowns } from '../../Components/Forms/DropDown';
-import { RadioGrpButton } from '../../Components/Forms/RadioGroup.jsx';
 import '../../Styles/CancelReschedule/ChangePaymentMode.scss';
 import {
   ChangeSelectedCustDisable,
@@ -93,13 +92,14 @@ const ChangePaymentmode = () => {
 
   const appPreferences = useSelector(ApplicationPreferences);
   const commonModulePreference = appPreferences?.find(
-    (preference) => preference?.PreferredCatName === "Common Module"
+    (preference) => preference?.PreferredCatName === 'Common Module'
   )?.PreferenceCatDetails;
   const sportsAppPreference = commonModulePreference?.find(
-    (preference) => preference?.PreferredSubCatName === "SportsApp" && preference?.PreferredStatus == 'Y'
+    (preference) =>
+      preference?.PreferredSubCatName === 'SportsApp' &&
+      preference?.PreferredStatus == 'Y'
   );
 
-
   const [messageType, setMessageType] = useState(null);
   const [messageData, setMessageData] = useState(null);
   const [selCancelPay, setselCancelPay] = useState('CR');
@@ -147,11 +147,10 @@ const ChangePaymentmode = () => {
       name: 'Home',
       link: `${subDirectory}app-page/home`,
     },
-     {
+    {
       name: ' Cancel/Payment Change',
       link: `${subDirectory}setting/cancel-paymentchange`,
     },
-   
   ];
 
   useEffect(() => {
@@ -212,8 +211,6 @@ const ChangePaymentmode = () => {
     // third;
   };
   const disabledDate = (current) => current && current > dayjs().endOf('day');
-  const disabledFeatureDate = (current) =>
-    current && current < dayjs().endOf('day');
 
   const getCreditcustDetail = async () => {
     let Credata = {
@@ -249,7 +246,7 @@ const ChangePaymentmode = () => {
     let date;
     const billormobile =
       formRef.current?.getFieldsValue()?.[
-      selCancelPay === 'CR' ? 'OrderId' : 'PaymodeOrderId'
+        selCancelPay === 'CR' ? 'OrderId' : 'PaymodeOrderId'
       ];
     if (segmentValue === 'Mobile') {
       if (selCancelPay === 'CR') {
@@ -326,15 +323,13 @@ const ChangePaymentmode = () => {
       setSalesDetail([]);
       setFullSalesDetail([]);
 
-      if (segmentValue == "Mobile" && billormobile && fromDate && toDate) {
+      if (segmentValue == 'Mobile' && billormobile && fromDate && toDate) {
+        setMessageType('error');
+        setMessageData(res?.data?.response);
+      } else {
         setMessageType('error');
         setMessageData(res?.data?.response);
       }
-      else {
-        setMessageType('error');
-        setMessageData(res?.data?.response);
-      }
-
     }
     setisdisabled(true);
   };
@@ -384,7 +379,6 @@ const ChangePaymentmode = () => {
     setFullSalesDetail([]);
   };
 
-
   // Debounce utility
   const debounce = (func, delay) => {
     let timer;
@@ -442,7 +436,7 @@ const ChangePaymentmode = () => {
     let date;
     const billormobile =
       formRef.current?.getFieldsValue()?.[
-      selCancelPay === 'CR' ? 'OrderId' : 'PaymodeOrderId'
+        selCancelPay === 'CR' ? 'OrderId' : 'PaymodeOrderId'
       ];
     if (segmentValue === 'Mobile') {
       if (selCancelPay === 'CR') {
@@ -781,7 +775,7 @@ const ChangePaymentmode = () => {
           dispatch(changeSelectedCustId(null));
           dispatch(changeSelectedOption({}));
           dispatch(ChangeSelectedCustDisable(false));
-          SelectCanPaymode(null)
+          SelectCanPaymode(null);
         }
       } catch (error) {
         console.error('Payment mode change failed:', error);
@@ -790,8 +784,7 @@ const ChangePaymentmode = () => {
     if (selCancelPay === 'CR' && selActivityType === 'Cancel') {
       if (SelCancelType === 'OverAll') {
         const { NetAmount } = FullSalesDetail?.[0];
-        const { ChargeType, ChargesFixed } =
-          SelCanReason?.[0];
+        const { ChargeType, ChargesFixed } = SelCanReason?.[0];
 
         if (ChargeType === 'P') {
           const temCanCharge = (NetAmount * ChargesFixed) / 100;
@@ -804,24 +797,44 @@ const ChangePaymentmode = () => {
         try {
           const prodDtl = (FullSalesDetail || [])?.find(
             (f) => f.OrderId === selectedRowKey
-          )?.productDetails
+          )?.productDetails;
           const SalesId = prodDtl?.[0]?.SalesId;
-          const ProductDetails = (prodDtl || []).map(({ ProdId, InwardDtlId, Type, SalesQty, Rate, TaxAmt, SinglePc }) => ({
-            ProdId, InwardDtlId, Type, Qty: SalesQty, Rate, TotalAmt: SalesQty * Rate, TaxAmt, SinglePc,
-          }));
+          const ProductDetails = (prodDtl || []).map(
+            ({
+              ProdId,
+              InwardDtlId,
+              Type,
+              SalesQty,
+              Rate,
+              TaxAmt,
+              SinglePc,
+            }) => ({
+              ProdId,
+              InwardDtlId,
+              Type,
+              Qty: SalesQty,
+              Rate,
+              TotalAmt: SalesQty * Rate,
+              TaxAmt,
+              SinglePc,
+            })
+          );
 
           if (ProductDetails?.length === 0) {
             throw new Error('No orders selected');
           }
 
-          const Amount = ProductDetails.reduce((acc, item) => acc + (item.TotalAmt || 0), 0);
+          const Amount = ProductDetails.reduce(
+            (acc, item) => acc + (item.TotalAmt || 0),
+            0
+          );
           const payload = {
             AppId,
             CompId,
             BranchId,
             SalesId,
             ProductDetails,
-            SalesType: "C",
+            SalesType: 'C',
             OrderId: selectedRowKey,
             CreatedBy: UserId,
             CreatedDate: dayjs()?.format('YYYY-MM-DD'),
@@ -829,27 +842,27 @@ const ChangePaymentmode = () => {
               {
                 PaymentType: SelCanPaymode,
                 Amount,
-                PaymentStatus: "S"
-              }
-            ]
+                PaymentStatus: 'S',
+              },
+            ],
           };
 
           const res = await dispatch(PostSalesCancellation(payload)).unwrap();
           if (res?.data?.statusCode === 1) {
             setMessageType('success');
-            setMessageData(res?.data?.response || "Posted successfully");
-            setSelectedRowKey()
-            formRef.current?.resetFields()
+            setMessageData(res?.data?.response || 'Posted successfully');
+            setSelectedRowKey();
+            formRef.current?.resetFields();
             setFullSalesDetail([]);
-            SelectCanPaymode(null)
-            setSegmentValue('Bill No')
+            SelectCanPaymode(null);
+            setSegmentValue('Bill No');
           } else {
             setMessageType('success');
-            setMessageData(res?.data?.response || "Posted successfully");
+            setMessageData(res?.data?.response || 'Posted successfully');
           }
         } catch (error) {
-          setMessageType("error");
-          setMessageData(error?.message || "An error occurred");
+          setMessageType('error');
+          setMessageData(error?.message || 'An error occurred');
         } finally {
           setIsPosting(false); // enable button
         }
@@ -920,7 +933,7 @@ const ChangePaymentmode = () => {
       const formatted = date?.format('YYYY-MM-DD');
       const billormobile =
         formRef.current?.getFieldsValue()?.[
-        selCancelPay === 'CR' ? 'OrderId' : 'PaymodeOrderId'
+          selCancelPay === 'CR' ? 'OrderId' : 'PaymodeOrderId'
         ];
       let toDate;
       if (selCancelPay === 'CR') {
@@ -930,14 +943,10 @@ const ChangePaymentmode = () => {
           toDate = formRef.current?.getFieldsValue()?.ReschedulToDate;
         }
       } else if (selCancelPay === 'CP') {
-        toDate = formRef.current?.getFieldsValue()?.["Change- PaymentToDate"];
+        toDate = formRef.current?.getFieldsValue()?.['Change- PaymentToDate'];
       }
 
-      if (
-        segmentValue === 'Mobile' &&
-        formatted &&
-        toDate !== undefined
-      ) {
+      if (segmentValue === 'Mobile' && formatted && toDate !== undefined) {
         if (billormobile === undefined) {
           setMessageType('error');
           setMessageData('Please enter the mobile number.');
@@ -955,7 +964,7 @@ const ChangePaymentmode = () => {
       const formatted = date?.format('YYYY-MM-DD');
       const billormobile =
         formRef.current?.getFieldsValue()?.[
-        selCancelPay === 'CR' ? 'OrderId' : 'PaymodeOrderId'
+          selCancelPay === 'CR' ? 'OrderId' : 'PaymodeOrderId'
         ];
       let fromDate;
       if (selCancelPay === 'CR') {
@@ -968,11 +977,7 @@ const ChangePaymentmode = () => {
         fromDate =
           formRef.current?.getFieldsValue()?.['Change-PaymentFromDate'];
       }
-      if (
-        segmentValue === 'Mobile' &&
-        fromDate != undefined &&
-        formatted
-      ) {
+      if (segmentValue === 'Mobile' && fromDate != undefined && formatted) {
         if (billormobile === undefined) {
           setMessageType('error');
           setMessageData('Please enter the mobile number.');
@@ -1107,8 +1112,8 @@ const ChangePaymentmode = () => {
           {record?.ProdName +
             (record?.Size
               ? ' - ' +
-              record?.Size +
-              (record?.UomName ? ' - ' + record?.UomName : '')
+                record?.Size +
+                (record?.UomName ? ' - ' + record?.UomName : '')
               : '')}
         </span>
       ),
@@ -1209,13 +1214,13 @@ const ChangePaymentmode = () => {
     ...(appPreferences
       ? []
       : [
-        {
-          title: 'BookingType Name',
-          dataIndex: 'BookingTypeName',
-          key: 'BookingTypeName',
-          width: '100px',
-        },
-      ]),
+          {
+            title: 'BookingType Name',
+            dataIndex: 'BookingTypeName',
+            key: 'BookingTypeName',
+            width: '100px',
+          },
+        ]),
     {
       title: sportsAppPreference ? 'Slot Details' : 'Product Details',
       dataIndex: 'productDetails',
@@ -1340,7 +1345,7 @@ const ChangePaymentmode = () => {
                             display: 'flex',
                             gap: '0.5rem',
                             alignItems: 'center',
-                            flexWrap: "wrap"
+                            flexWrap: 'wrap',
                           }}
                         >
                           <div style={{ fontWeight: 500 }}>Mode Type :</div>
@@ -1381,8 +1386,6 @@ const ChangePaymentmode = () => {
                             onChange={segmentOnChange}
                           />
                         </div> */}
-
-
                       </div>
                     </div>
                     {selCancelPay === 'CR' && (
@@ -1423,15 +1426,10 @@ const ChangePaymentmode = () => {
                             gap: '0.5rem',
                             alignItems: 'center',
                           }}
-                        >
-
-
-
-                        </div>
+                        ></div>
                         {selActivityType === 'Cancel' && (
                           <div className="Cancellation-div">
                             <div style={{ marginBottom: '10px' }}>
-
                               <DropDowns
                                 options={[
                                   { value: 'Bill No', label: 'Bill No' },
@@ -1451,7 +1449,7 @@ const ChangePaymentmode = () => {
                                 alignItems: 'center',
                                 gap: '10px',
                                 // marginTop: '10px',
-                                flexWrap: 'wrap'
+                                flexWrap: 'wrap',
                               }}
                             >
                               {segmentValue === 'Date' ? (
@@ -1479,17 +1477,23 @@ const ChangePaymentmode = () => {
                                         await validateSafeInput(value); // Your existing input sanitization
 
                                         if (!value) {
-                                          return Promise.reject(`Please enter ${segmentValue}`);
+                                          return Promise.reject(
+                                            `Please enter ${segmentValue}`
+                                          );
                                         }
 
                                         const digitOnlyRegex = /^[0-9]+$/;
                                         if (!digitOnlyRegex.test(value)) {
-                                          return Promise.reject(`${segmentValue} should contain digits only`);
+                                          return Promise.reject(
+                                            `${segmentValue} should contain digits only`
+                                          );
                                         }
 
                                         if (segmentValue === 'Bill No') {
                                           if (value.length > 30) {
-                                            return Promise.reject('Bill No should not exceed 30 characters');
+                                            return Promise.reject(
+                                              'Bill No should not exceed 30 characters'
+                                            );
                                           }
                                         }
 
@@ -1497,29 +1501,37 @@ const ChangePaymentmode = () => {
                                           const mobileRegex = /^[6-9]\d{9}$/;
 
                                           if (!value || value.length !== 10) {
-                                            return Promise.reject('Mobile Number must be exactly 10 digits');
+                                            return Promise.reject(
+                                              'Mobile Number must be exactly 10 digits'
+                                            );
                                           }
 
                                           if (!mobileRegex.test(value)) {
-                                            return Promise.reject('Mobile number must start with 6, 7, 8, or 9');
+                                            return Promise.reject(
+                                              'Mobile number must start with 6, 7, 8, or 9'
+                                            );
                                           }
 
                                           await getSalesDetailapi(value);
                                         }
                                         await getSalesDetailapi(value);
                                         return Promise.resolve();
-                                      }
-                                    }
-
+                                      },
+                                    },
                                   ]}
                                 >
                                   <InputField
                                     field="OrderId"
                                     autoComplete="off"
                                     inputMode="numeric"
-                                    maxLength={segmentValue === 'Mobile' ? 10 : 30}
+                                    maxLength={
+                                      segmentValue === 'Mobile' ? 10 : 30
+                                    }
                                     onInput={(e) =>
-                                      (e.target.value = e.target.value.replace(/[^0-9]/g, ''))
+                                      (e.target.value = e.target.value.replace(
+                                        /[^0-9]/g,
+                                        ''
+                                      ))
                                     }
                                     label={
                                       <label class="required">
@@ -1536,7 +1548,7 @@ const ChangePaymentmode = () => {
                                     display: 'flex',
                                     alignItems: 'center',
                                     gap: '10px',
-                                    flexWrap: 'wrap'
+                                    flexWrap: 'wrap',
                                   }}
                                 >
                                   <Form.Item
@@ -1932,22 +1944,28 @@ const ChangePaymentmode = () => {
                                     pattern: /^[0-9]+$/, // only digits allowed
                                     message: `Please enter a valid ${segmentValue} (numbers only)`,
                                   },
-                          {
+                                  {
                                     validator: async (_, value) => {
                                       await validateSafeInput(value); // Your existing input sanitization
 
                                       if (!value) {
-                                        return Promise.reject(`Please enter ${segmentValue}`);
+                                        return Promise.reject(
+                                          `Please enter ${segmentValue}`
+                                        );
                                       }
 
                                       const digitOnlyRegex = /^[0-9]+$/;
                                       if (!digitOnlyRegex.test(value)) {
-                                        return Promise.reject(`${segmentValue} should contain digits only`);
+                                        return Promise.reject(
+                                          `${segmentValue} should contain digits only`
+                                        );
                                       }
 
                                       if (segmentValue === 'Bill No') {
                                         if (value.length > 30) {
-                                          return Promise.reject('Bill No should not exceed 30 characters');
+                                          return Promise.reject(
+                                            'Bill No should not exceed 30 characters'
+                                          );
                                         }
                                       }
 
@@ -1955,19 +1973,23 @@ const ChangePaymentmode = () => {
                                         const mobileRegex = /^[6-9]\d{9}$/;
 
                                         if (!value || value.length !== 10) {
-                                          return Promise.reject('Mobile Number must be exactly 10 digits');
+                                          return Promise.reject(
+                                            'Mobile Number must be exactly 10 digits'
+                                          );
                                         }
 
                                         if (!mobileRegex.test(value)) {
-                                          return Promise.reject('Mobile number must start with 6, 7, 8, or 9');
+                                          return Promise.reject(
+                                            'Mobile number must start with 6, 7, 8, or 9'
+                                          );
                                         }
 
                                         await getSalesDetailapi(value);
                                       }
                                       await getSalesDetailapi(value);
                                       return Promise.resolve();
-                                    }
-                                  }
+                                    },
+                                  },
                                 ]}
                               >
                                 <InputField
@@ -2091,21 +2113,26 @@ const ChangePaymentmode = () => {
                         <div
                           style={{ display: 'flex', flexDirection: 'column' }}
                         >
-                          {selectedRowKey !== null && (<>
-                            <Table
-                              columns={paymentRowRadiocolumns}
-                              rowKey="PaymentType"
-                              dataSource={
-                                FullSalesDetail?.find(
-                                  (f) => f.OrderId === selectedRowKey
-                                )?.OrderPaymentDtls
-                              }
-                            /></>
+                          {selectedRowKey !== null && (
+                            <>
+                              <Table
+                                columns={paymentRowRadiocolumns}
+                                rowKey="PaymentType"
+                                dataSource={
+                                  FullSalesDetail?.find(
+                                    (f) => f.OrderId === selectedRowKey
+                                  )?.OrderPaymentDtls
+                                }
+                              />
+                            </>
                           )}
                           {FullSalesDetail?.length > 0 && (
-                            <div style={{
-                              height: "60vh", overflow: "auto"
-                            }}>
+                            <div
+                              style={{
+                                height: '60vh',
+                                overflow: 'auto',
+                              }}
+                            >
                               <Table
                                 rowSelection={rowSelection}
                                 columns={rowradiocolumns}
@@ -2160,7 +2187,11 @@ const ChangePaymentmode = () => {
       />
       <Modal
         open={viewProductDetails?.view}
-        title={<FormHeader title={sportsAppPreference ? 'Slot Details' : 'Product Details'} />}
+        title={
+          <FormHeader
+            title={sportsAppPreference ? 'Slot Details' : 'Product Details'}
+          />
+        }
         width={900}
         footer={false}
         onCancel={() => {
@@ -2239,39 +2270,39 @@ const ChangePaymentmode = () => {
                 </div>
                 {CreditCustDetails?.length > 0
                   ? CreditCustDetails?.[0]?.CustName && (
-                    <div style={{ fontSize: '16px', fontWeight: '600' }}>
-                      Name:{' '}
-                      <span style={{ fontSize: '16px', fontWeight: '400' }}>
-                        {CreditCustDetails?.[0]?.CustName}{' '}
-                      </span>
-                    </div>
-                  )
+                      <div style={{ fontSize: '16px', fontWeight: '600' }}>
+                        Name:{' '}
+                        <span style={{ fontSize: '16px', fontWeight: '400' }}>
+                          {CreditCustDetails?.[0]?.CustName}{' '}
+                        </span>
+                      </div>
+                    )
                   : NewCustomer?.[0]?.CustName && (
-                    <div style={{ fontSize: '16px', fontWeight: '600' }}>
-                      Name:{' '}
-                      <span style={{ fontSize: '16px', fontWeight: '400' }}>
-                        {NewCustomer?.[0]?.CustName}
-                      </span>
-                    </div>
-                  )}
+                      <div style={{ fontSize: '16px', fontWeight: '600' }}>
+                        Name:{' '}
+                        <span style={{ fontSize: '16px', fontWeight: '400' }}>
+                          {NewCustomer?.[0]?.CustName}
+                        </span>
+                      </div>
+                    )}
                 {CreditCustDetails?.length > 0
                   ? CreditCustDetails?.[0]?.Address1 && (
-                    <div style={{ fontSize: '16px', fontWeight: '600' }}>
-                      Address:{' '}
-                      <span style={{ fontSize: '16px', fontWeight: '400' }}>
-                        {CreditCustDetails?.[0]?.Address1},
-                        {CreditCustDetails?.[0]?.Dist}
-                      </span>
-                    </div>
-                  )
+                      <div style={{ fontSize: '16px', fontWeight: '600' }}>
+                        Address:{' '}
+                        <span style={{ fontSize: '16px', fontWeight: '400' }}>
+                          {CreditCustDetails?.[0]?.Address1},
+                          {CreditCustDetails?.[0]?.Dist}
+                        </span>
+                      </div>
+                    )
                   : NewCustomer?.[0]?.Address1 && (
-                    <div style={{ fontSize: '16px', fontWeight: '600' }}>
-                      Address:{' '}
-                      <span style={{ fontSize: '16px', fontWeight: '400' }}>
-                        {NewCustomer?.[0]?.Address1},{NewCustomer?.[0]?.Dist}
-                      </span>
-                    </div>
-                  )}
+                      <div style={{ fontSize: '16px', fontWeight: '600' }}>
+                        Address:{' '}
+                        <span style={{ fontSize: '16px', fontWeight: '400' }}>
+                          {NewCustomer?.[0]?.Address1},{NewCustomer?.[0]?.Dist}
+                        </span>
+                      </div>
+                    )}
               </div>
               <div>
                 <p style={{ fontSize: '18px', fontWeight: '600' }}>
@@ -2319,7 +2350,7 @@ const ChangePaymentmode = () => {
                       </div>
                     </div>
                     {ApiPaymentName?.toLowerCase() === 'credit' &&
-                      DropSelPaymentName?.toLowerCase() !== 'credit' ? (
+                    DropSelPaymentName?.toLowerCase() !== 'credit' ? (
                       <div
                         style={{
                           display: 'flex',
@@ -2333,7 +2364,7 @@ const ChangePaymentmode = () => {
                         <div style={{ fontSize: '16px', fontWeight: '500' }}>
                           {CreditCustDetails?.[0]?.OverAllBal +
                             FullSalesDetail?.[0]?.NetAmount >
-                            0
+                          0
                             ? 'Remaining Amount'
                             : 'Payable Amount'}
                         </div>
@@ -2342,7 +2373,7 @@ const ChangePaymentmode = () => {
                             color:
                               CreditCustDetails?.[0]?.OverAllBal +
                                 FullSalesDetail?.[0]?.NetAmount >
-                                0
+                              0
                                 ? 'green'
                                 : 'red',
                             fontSize: '16px',
@@ -2351,7 +2382,7 @@ const ChangePaymentmode = () => {
                         >
                           {Math.abs(
                             CreditCustDetails?.[0]?.OverAllBal +
-                            FullSalesDetail?.[0]?.NetAmount
+                              FullSalesDetail?.[0]?.NetAmount
                           ).toFixed(2)}
                         </div>
                       </div>
@@ -2369,7 +2400,7 @@ const ChangePaymentmode = () => {
                         <div style={{ fontSize: '16px', fontWeight: '500' }}>
                           {CreditCustDetails?.[0]?.OverAllBal -
                             FullSalesDetail?.[0]?.NetAmount >
-                            0
+                          0
                             ? 'Remaining Amount'
                             : 'Payable Amount'}
                         </div>
@@ -2378,7 +2409,7 @@ const ChangePaymentmode = () => {
                             color:
                               CreditCustDetails?.[0]?.OverAllBal -
                                 FullSalesDetail?.[0]?.NetAmount >
-                                0
+                              0
                                 ? 'green'
                                 : 'red',
                             fontSize: '16px',
@@ -2387,36 +2418,36 @@ const ChangePaymentmode = () => {
                         >
                           {Math.abs(
                             CreditCustDetails?.[0]?.OverAllBal -
-                            FullSalesDetail?.[0]?.NetAmount
+                              FullSalesDetail?.[0]?.NetAmount
                           ).toFixed(2)}
                         </div>
                       </div>
                     )}
                     {CreditCustDetails?.[0]?.OverAllBal !== 0 &&
-                      DropSelPaymentName?.toLowerCase() === 'credit'
+                    DropSelPaymentName?.toLowerCase() === 'credit'
                       ? CreditCustDetails?.[0]?.OverAllBal -
-                      FullSalesDetail?.[0]?.NetAmount <
-                      0 && (
-                        <div
-                          style={{
-                            fontSize: '16px',
-                            fontWeight: '400',
-                            padding: '10px 0',
-                            margin: '5px 0',
-                          }}
-                        >
-                          {CreditCustDetails?.[0]?.MobileNo
-                            ? CreditCustDetails?.[0]?.MobileNo
-                            : CreditCustDetails?.[0]?.CustName}{' '}
-                          customer already has an outstanding amount (
-                          {CreditCustDetails?.[0]?.OverAllBal &&
-                            Math.abs(
-                              Number(CreditCustDetails?.[0]?.OverAllBal)
-                            ).toFixed(2)}
-                          ) to pay. Therefore, should we proceed with the
-                          current bill amount?
-                        </div>
-                      )
+                          FullSalesDetail?.[0]?.NetAmount <
+                          0 && (
+                          <div
+                            style={{
+                              fontSize: '16px',
+                              fontWeight: '400',
+                              padding: '10px 0',
+                              margin: '5px 0',
+                            }}
+                          >
+                            {CreditCustDetails?.[0]?.MobileNo
+                              ? CreditCustDetails?.[0]?.MobileNo
+                              : CreditCustDetails?.[0]?.CustName}{' '}
+                            customer already has an outstanding amount (
+                            {CreditCustDetails?.[0]?.OverAllBal &&
+                              Math.abs(
+                                Number(CreditCustDetails?.[0]?.OverAllBal)
+                              ).toFixed(2)}
+                            ) to pay. Therefore, should we proceed with the
+                            current bill amount?
+                          </div>
+                        )
                       : ''}
                   </>
                 ) : (
@@ -2444,4 +2475,4 @@ const ChangePaymentmode = () => {
     </>
   );
 };
-export default ChangePaymentmode; 
+export default ChangePaymentmode;

src/Pages/CustomerMaster/CustMasterForm.jsx

@@ -824,22 +824,22 @@ const CustomerForm = ({ formType }) => {
   // };
 
   const handleRemoveAddress = (index) => {
-  setAddressPreview((prev) =>
-    prev.map((item, i) =>
-      i === index ? { ...item, ActiveStatus: "D" } : item
-    )
-  );
-  setAddressesList((prev) =>
-    prev.map((item, i) =>
-      i === index ? { ...item, ActiveStatus: "D" } : item
-    )
-  );
-  setNewAddress((prev) =>
-    prev.map((item, i) =>
-      i === index ? { ...item, ActiveStatus: "D" } : item
-    )
-  );
-};
+    setAddressPreview((prev) =>
+      prev.map((item, i) =>
+        i === index ? { ...item, ActiveStatus: 'D' } : item
+      )
+    );
+    setAddressesList((prev) =>
+      prev.map((item, i) =>
+        i === index ? { ...item, ActiveStatus: 'D' } : item
+      )
+    );
+    setNewAddress((prev) =>
+      prev.map((item, i) =>
+        i === index ? { ...item, ActiveStatus: 'D' } : item
+      )
+    );
+  };
 
   return (
     <div className="CustomerForm-Master">
@@ -1616,136 +1616,143 @@ const CustomerForm = ({ formType }) => {
 
                       <div className="customer-address-details-list">
                         {addressPreview?.length > 0 ? (
-                          addressPreview?.filter((addr) => addr.ActiveStatus !== "D")?.map((addr, idx) => (
-                            <div key={idx} className="address-card">
-                              <div className="address-header">
-                                <div className="header-left">
-                                  <h4>Address {idx + 1}</h4>
-                                  {/* <h4>Address</h4> */}
+                          addressPreview
+                            ?.filter((addr) => addr.ActiveStatus !== 'D')
+                            ?.map((addr, idx) => (
+                              <div key={idx} className="address-card">
+                                <div className="address-header">
+                                  <div className="header-left">
+                                    <h4>Address {idx + 1}</h4>
+                                    {/* <h4>Address</h4> */}
+                                  </div>
                                 </div>
-                              </div>
 
-                              <div className="address-type-section">
-                                <div
-                                  style={{
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    flexWrap: 'wrap',
-                                  }}
-                                >
-                                  <Checkbox
-                                    checked={(addressTypes[idx] || []).includes(
-                                      'Delivery Address'
-                                    )}
-                                    onChange={(e) =>
-                                      handleAddressTypeChange(
-                                        idx,
-                                        'Delivery Address',
-                                        e.target.checked
-                                      )
-                                    }
+                                <div className="address-type-section">
+                                  <div
+                                    style={{
+                                      display: 'flex',
+                                      alignItems: 'center',
+                                      flexWrap: 'wrap',
+                                    }}
                                   >
-                                    Delivery Address
-                                  </Checkbox>
-                                  <Checkbox
-                                    checked={(addressTypes[idx] || []).includes(
-                                      'Billing Address'
-                                    )}
-                                    onChange={(e) =>
-                                      handleAddressTypeChange(
-                                        idx,
-                                        'Billing Address',
-                                        e.target.checked
-                                      )
-                                    }
-                                  >
-                                    Billing Address
-                                  </Checkbox>
-                                  <Checkbox
-                                    checked={(addressTypes[idx] || []).includes(
-                                      'Both Address'
-                                    )}
-                                    onChange={(e) =>
-                                      handleAddressTypeChange(
-                                        idx,
-                                        'Both Address',
-                                        e.target.checked
-                                      )
-                                    }
-                                  >
-                                    Both Address
-                                  </Checkbox>
-                                </div>
-                              </div>
-
-                              <div className="address-details-grid">
-                                <div className="address-detail-item address1">
-                                  <div className="value">
-                                    {addr?.Address1 || ''}
+                                    <Checkbox
+                                      checked={(
+                                        addressTypes[idx] || []
+                                      ).includes('Delivery Address')}
+                                      onChange={(e) =>
+                                        handleAddressTypeChange(
+                                          idx,
+                                          'Delivery Address',
+                                          e.target.checked
+                                        )
+                                      }
+                                    >
+                                      Delivery Address
+                                    </Checkbox>
+                                    <Checkbox
+                                      checked={(
+                                        addressTypes[idx] || []
+                                      ).includes('Billing Address')}
+                                      onChange={(e) =>
+                                        handleAddressTypeChange(
+                                          idx,
+                                          'Billing Address',
+                                          e.target.checked
+                                        )
+                                      }
+                                    >
+                                      Billing Address
+                                    </Checkbox>
+                                    <Checkbox
+                                      checked={(
+                                        addressTypes[idx] || []
+                                      ).includes('Both Address')}
+                                      onChange={(e) =>
+                                        handleAddressTypeChange(
+                                          idx,
+                                          'Both Address',
+                                          e.target.checked
+                                        )
+                                      }
+                                    >
+                                      Both Address
+                                    </Checkbox>
                                   </div>
                                 </div>
 
-                                <div className="address-detail-item address2">
-                                  <div className="value">
-                                    {addr?.Address2 || ''}
-                                  </div>
-                                </div>
-
-                                <div className="address-detail-item zip">
-                                  <div className="value">{addr?.Zip || ''}</div>
-                                </div>
-
-                                <div className="address-detail-item city">
-                                  <div className="value">
-                                    {addr?.City || ''}
-                                  </div>
-                                </div>
-
-                                <div className="address-detail-item district">
-                                  <div className="value">
-                                    {addr?.Dist || ''}
-                                  </div>
-                                </div>
-
-                                <div className="address-detail-item state">
-                                  <div className="value">
-                                    {addr?.State || ''}
-                                  </div>
-                                </div>
-
-                                {addr?.Latitude && (
-                                  <div className="address-detail-item coordinates">
-                                    <div className="value coordinates">
-                                      <MdLocationOn /> {addr?.Latitude || ''},{' '}
-                                      {addr?.Longitude || ''}
+                                <div className="address-details-grid">
+                                  <div className="address-detail-item address1">
+                                    <div className="value">
+                                      {addr?.Address1 || ''}
                                     </div>
                                   </div>
-                                )}
-                              </div>
-                              <div className="header-actions">
-                                <button
-                                  type="button"
-                                  onClick={() => handleEditAddress(idx)}
-                                  className="edit-btn"
-                                >
-                                  <FaEdit /> Edit
-                                </button>
 
-                                <Popconfirm
-                                  title="Remove Address"
-                                  description="Are you sure you want to remove this address?"
-                                  onConfirm={() => handleRemoveAddress(idx)}
-                                  okText="Yes, Remove"
-                                  cancelText="Cancel"
-                                  okType="danger"
-                                >
-                                  <button className="remove-btn" type="button">
-                                    <FaTrash /> Remove
+                                  <div className="address-detail-item address2">
+                                    <div className="value">
+                                      {addr?.Address2 || ''}
+                                    </div>
+                                  </div>
+
+                                  <div className="address-detail-item zip">
+                                    <div className="value">
+                                      {addr?.Zip || ''}
+                                    </div>
+                                  </div>
+
+                                  <div className="address-detail-item city">
+                                    <div className="value">
+                                      {addr?.City || ''}
+                                    </div>
+                                  </div>
+
+                                  <div className="address-detail-item district">
+                                    <div className="value">
+                                      {addr?.Dist || ''}
+                                    </div>
+                                  </div>
+
+                                  <div className="address-detail-item state">
+                                    <div className="value">
+                                      {addr?.State || ''}
+                                    </div>
+                                  </div>
+
+                                  {addr?.Latitude && (
+                                    <div className="address-detail-item coordinates">
+                                      <div className="value coordinates">
+                                        <MdLocationOn /> {addr?.Latitude || ''},{' '}
+                                        {addr?.Longitude || ''}
+                                      </div>
+                                    </div>
+                                  )}
+                                </div>
+                                <div className="header-actions">
+                                  <button
+                                    type="button"
+                                    onClick={() => handleEditAddress(idx)}
+                                    className="edit-btn"
+                                  >
+                                    <FaEdit /> Edit
                                   </button>
-                                </Popconfirm>
+
+                                  <Popconfirm
+                                    title="Remove Address"
+                                    description="Are you sure you want to remove this address?"
+                                    onConfirm={() => handleRemoveAddress(idx)}
+                                    okText="Yes, Remove"
+                                    cancelText="Cancel"
+                                    okType="danger"
+                                  >
+                                    <button
+                                      className="remove-btn"
+                                      type="button"
+                                    >
+                                      <FaTrash /> Remove
+                                    </button>
+                                  </Popconfirm>
+                                </div>
                               </div>
-                            </div>
-                          ))
+                            ))
                         ) : (
                           <div className="empty-state">
                             <MdHome />
@@ -2007,16 +2014,7 @@ const CustomerForm = ({ formType }) => {
                           <button
                             type="button"
                             onClick={handleAddOrUpdateAddress}
-                            style={{
-                              backgroundColor: '#1677ff',
-                              color: '#fff',
-                              padding: '6px 12px',
-                              border: 'none',
-                              borderRadius: '6px',
-                              cursor: 'pointer',
-                              marginTop: '8px',
-                              fontWeight: '500',
-                            }}
+                            className="CusAddressAddBtn"
                           >
                             {editingIndex !== null
                               ? 'Update Address'

src/Pages/DashBoard/RetailDashboard.jsx

@@ -1408,7 +1408,7 @@ const RetailDashboard = () => {
                       display: 'flex',
                       alignItems: 'center',
                       gap: '5px',
-                      lineHeight:"1.1"
+                      lineHeight: '1.1',
                     }}
                   >
                     <img src={sandClock} alt="" width={25} />

src/Pages/Offer/OfferCode/OfferCodeList.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useCallback } from 'react';
+import { useEffect, useState, useCallback } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
 import { useDispatch } from 'react-redux';
 import {
@@ -25,10 +25,16 @@ import {
   deleteOfferCode,
 } from '../../../Features/Offer/OfferCode/OfferCode.js';
 import { useAuth } from '../../../AuthContext.jsx';
-import { getAllCustomer, getPreferenceData } from '../../../Features/BookingScreen/BookingData/BookingData.js';
+import {
+  getAllCustomer,
+  getPreferenceData,
+} from '../../../Features/BookingScreen/BookingData/BookingData.js';
 import { DefaultModal } from '../../../Components/Modal/DefaultModal.jsx';
 import { BiSolidCoupon } from 'react-icons/bi';
-import { postCustomerOfferMail, postSMSOffer } from '../../../Features/Payment/PaymentDetails/PaymentDetails.js';
+import {
+  postCustomerOfferMail,
+  postSMSOffer,
+} from '../../../Features/Payment/PaymentDetails/PaymentDetails.js';
 const CheckboxGroup = Checkbox.Group;
 const subDirectory = import.meta.env.ENV_BASE_URL;
 
@@ -46,11 +52,25 @@ const items = [
 
 const plainOptions = [
   {
-    label: (<div style={{ display: "flex", alignItems: "center", marginTop: "0.2rem" }}><AiOutlineMail size={18} style={{ marginRight: 5 }} />Mail</div>),
+    label: (
+      <div
+        style={{ display: 'flex', alignItems: 'center', marginTop: '0.2rem' }}
+      >
+        <AiOutlineMail size={18} style={{ marginRight: 5 }} />
+        Mail
+      </div>
+    ),
     value: 'Mail',
   },
   {
-    label: (<div style={{ display: "flex", alignItems: "center", marginTop: "0.2rem" }}><MdOutlineTextsms size={18} style={{ marginRight: 5 }} />SMS</div>),
+    label: (
+      <div
+        style={{ display: 'flex', alignItems: 'center', marginTop: '0.2rem' }}
+      >
+        <MdOutlineTextsms size={18} style={{ marginRight: 5 }} />
+        SMS
+      </div>
+    ),
     value: 'SMS',
   },
   // {
@@ -94,15 +114,20 @@ const OfferCodeList = () => {
   const [selectedRowKeys, setSelectedRowKeys] = useState([]);
   const [isLoading, setIsLoading] = useState(false);
   const checkAll = plainOptions.length === checkedList.length;
-  const indeterminate = checkedList.length > 0 && checkedList.length < plainOptions.length;
+  const indeterminate =
+    checkedList.length > 0 && checkedList.length < plainOptions.length;
   const getPreference = async () => {
     const data = { AppId: AppId, CompId: CompId, BranchId: BranchId };
-    const { data: res } = await dispatch(getPreferenceData(data)).unwrap()
-    const decimalSetting = res?.data?.[0]?.SettingDtlDetails?.find((setting) => setting?.SettingIdName?.toLowerCase() === "decimal" && setting?.SettingValue === 'Y');
+    const { data: res } = await dispatch(getPreferenceData(data)).unwrap();
+    const decimalSetting = res?.data?.[0]?.SettingDtlDetails?.find(
+      (setting) =>
+        setting?.SettingIdName?.toLowerCase() === 'decimal' &&
+        setting?.SettingValue === 'Y'
+    );
     if (decimalSetting) {
-      setAllowDecimal(true)
+      setAllowDecimal(true);
     }
-  }
+  };
 
   const onComplete = useCallback(() => {
     setMessageData(null);
@@ -116,8 +141,8 @@ const OfferCodeList = () => {
       setMessageData(location?.state?.Notiffy.messageData);
     }
     TableData();
-    getPreference()
-    fetchCustomerApi()
+    getPreference();
+    fetchCustomerApi();
     // if (UserType === "Employee") {
     //   fetchApi()
     // }
@@ -142,11 +167,14 @@ const OfferCodeList = () => {
     setaddnewAccess(!hasAccess);
   }, [empData, SAAccessCommonMaster, UserType]);
 
-
   const fetchCustomerApi = async () => {
-    let res = await dispatch(getAllCustomer({ CompId, AppId, branchId: BranchId })).unwrap();
+    let res = await dispatch(
+      getAllCustomer({ CompId, AppId, branchId: BranchId })
+    ).unwrap();
     if (res?.data?.statusCode === 1) {
-      setCustomerData(res?.data?.data?.map((item, index) => ({ ...item, key: index + 1 })));
+      setCustomerData(
+        res?.data?.data?.map((item, index) => ({ ...item, key: index + 1 }))
+      );
     } else {
       setCustomerData([]);
     }
@@ -257,7 +285,9 @@ const OfferCodeList = () => {
           String(record.OfferName)
             ?.toLowerCase()
             ?.includes(value?.toLowerCase()) ||
-          String(record.MinQty)?.toLowerCase()?.includes(value?.toLowerCase()) ||
+          String(record.MinQty)
+            ?.toLowerCase()
+            ?.includes(value?.toLowerCase()) ||
           String(record.MinPurchase)
             ?.toLowerCase()
             ?.includes(value?.toLowerCase()) ||
@@ -354,13 +384,13 @@ const OfferCodeList = () => {
           onClick={() =>
             record.ActiveStatus === 'A'
               ? (UserType === 'Super Admin' ||
-                (UserType === 'Super Admin User' &&
-                  SAAccessCommonMaster?.UpdateAccess === 'Y') ||
-                (UserType === 'Employee' &&
-                  (empData?.UpdateAccess === 'Y' ||
-                    empData?.AddAccess === 'Y')) ||
-                UserType === 'Admin') &&
-              handleShareOfferCode(record)
+                  (UserType === 'Super Admin User' &&
+                    SAAccessCommonMaster?.UpdateAccess === 'Y') ||
+                  (UserType === 'Employee' &&
+                    (empData?.UpdateAccess === 'Y' ||
+                      empData?.AddAccess === 'Y')) ||
+                  UserType === 'Admin') &&
+                handleShareOfferCode(record)
               : null
           }
           style={{
@@ -464,7 +494,9 @@ const OfferCodeList = () => {
           String(record.OfferName)
             ?.toLowerCase()
             ?.includes(value?.toLowerCase()) ||
-          String(record.MinQty)?.toLowerCase()?.includes(value?.toLowerCase()) ||
+          String(record.MinQty)
+            ?.toLowerCase()
+            ?.includes(value?.toLowerCase()) ||
           String(record.MinPurchase)
             ?.toLowerCase()
             ?.includes(value?.toLowerCase()) ||
@@ -475,7 +507,8 @@ const OfferCodeList = () => {
         );
       },
       sorter: (a, b) => a?.OfferName?.length - b?.OfferName?.length,
-      sortOrder: sortedInfo1.columnKey === 'OfferName' ? sortedInfo1.order : null,
+      sortOrder:
+        sortedInfo1.columnKey === 'OfferName' ? sortedInfo1.order : null,
       ellipsis: true,
     },
     {
@@ -502,15 +535,17 @@ const OfferCodeList = () => {
   ];
 
   const handleShareOfferCode = async (record) => {
-    setSelectedOfferCode(record)
-    setOpen(prev => !prev);
-  }
-
-  const onCheckAllChange = e => {
-    setCheckedList(e.target.checked ? plainOptions?.map(({ value }) => value) : []);
+    setSelectedOfferCode(record);
+    setOpen((prev) => !prev);
   };
 
-  const onChange = list => {
+  const onCheckAllChange = (e) => {
+    setCheckedList(
+      e.target.checked ? plainOptions?.map(({ value }) => value) : []
+    );
+  };
+
+  const onChange = (list) => {
     setCheckedList(list);
   };
 
@@ -522,7 +557,7 @@ const OfferCodeList = () => {
     setSortedInfo1(sorter);
   };
 
-  const onSelectChange = newSelectedRowKeys => {
+  const onSelectChange = (newSelectedRowKeys) => {
     setSelectedRowKeys(newSelectedRowKeys);
   };
 
@@ -530,10 +565,12 @@ const OfferCodeList = () => {
     selectedRowKeys,
     onChange: onSelectChange,
   };
-  
+
   const handleSubmit = async () => {
-    if (checkedList?.includes("Mail") || checkedList?.includes("SMS")) {
-      const selectedCustomers = customerData?.filter((_, index) => selectedRowKeys.includes(index))
+    if (checkedList?.includes('Mail') || checkedList?.includes('SMS')) {
+      const selectedCustomers = customerData?.filter((_, index) =>
+        selectedRowKeys.includes(index)
+      );
       if (selectedCustomers?.length > 0) {
         const { BrName, BrEmail } = selectedCustomers?.[0] || {};
         const {
@@ -547,49 +584,114 @@ const OfferCodeList = () => {
           ProdCount,
           RewardOrderTypeDetails,
           RewardTypeDetails,
-          RewardFreeTypeDetails } = selectedOfferCode;
-        let response = { mail: "", sms: "" };
+          RewardFreeTypeDetails,
+        } = selectedOfferCode;
+        let response = { mail: '', sms: '' };
         setIsLoading(true);
 
-        if (checkedList?.includes("Mail")) {
-          const applicableEmailCustomers = selectedCustomers?.filter(({ CustEmail }) => CustEmail !== null)?.map(({ CustId, CustName, CustMobile, CustEmail }) => ({
-            CustId, CustName, CustMobile, CustEmail,
-          })) || [];
+        if (checkedList?.includes('Mail')) {
+          const applicableEmailCustomers =
+            selectedCustomers
+              ?.filter(({ CustEmail }) => CustEmail !== null)
+              ?.map(({ CustId, CustName, CustMobile, CustEmail }) => ({
+                CustId,
+                CustName,
+                CustMobile,
+                CustEmail,
+              })) || [];
           if (applicableEmailCustomers?.length > 0) {
-            let Categories = ''
-            let Products = ''
+            let Categories = '';
+            let Products = '';
             if (RewardTypeName === 'Discount' && AppliesTo === 'S') {
-              Categories = RewardOrderTypeDetails?.filter(({ ProdCat }) => ProdCat !== 0 || ProdCat !== null)?.map(({ ProdCatName }) => ProdCatName)?.filter(Boolean).join()
-              Products = RewardOrderTypeDetails?.filter(({ ProdCat }) => ProdCat === 0 || ProdCat === null)?.map(({ ProdName }) => ProdName)?.filter(Boolean).join()
+              Categories = RewardOrderTypeDetails?.filter(
+                ({ ProdCat }) => ProdCat !== 0 || ProdCat !== null
+              )
+                ?.map(({ ProdCatName }) => ProdCatName)
+                ?.filter(Boolean)
+                .join();
+              Products = RewardOrderTypeDetails?.filter(
+                ({ ProdCat }) => ProdCat === 0 || ProdCat === null
+              )
+                ?.map(({ ProdName }) => ProdName)
+                ?.filter(Boolean)
+                .join();
             } else if (RewardTypeName === 'Free Products') {
-              Products = [...RewardTypeDetails?.map(({ ProdName }) => ProdName), ...RewardFreeTypeDetails?.map(({ ProdName }) => ProdName)]?.filter(Boolean).join()
+              Products = [
+                ...RewardTypeDetails?.map(({ ProdName }) => ProdName),
+                ...RewardFreeTypeDetails?.map(({ ProdName }) => ProdName),
+              ]
+                ?.filter(Boolean)
+                .join();
             }
             const postEmailData = {
-              BrName, BrEmail, Description, MinQty, MinPurchase, OfferCode,
-              CustomerDtl: applicableEmailCustomers, RewardTypeName, AppliesTo, Categories, Products, Amount: OfferAmt,
-              Qty: ProdCount
+              BrName,
+              BrEmail,
+              Description,
+              MinQty,
+              MinPurchase,
+              OfferCode,
+              CustomerDtl: applicableEmailCustomers,
+              RewardTypeName,
+              AppliesTo,
+              Categories,
+              Products,
+              Amount: OfferAmt,
+              Qty: ProdCount,
             };
-            response.mail = await dispatch(postCustomerOfferMail(postEmailData)).unwrap();
+            response.mail = await dispatch(
+              postCustomerOfferMail(postEmailData)
+            ).unwrap();
           }
         }
 
-        if (checkedList?.includes("SMS")) {
-          const applicableSMSCustomers = selectedCustomers?.filter(({ CustMobile }) => CustMobile !== null)?.map(({ CustId, CustName, CustMobile, CustEmail }) => ({
-            CustId, CustName, CustMobile, CustEmail,
-          })) || [];
+        if (checkedList?.includes('SMS')) {
+          const applicableSMSCustomers =
+            selectedCustomers
+              ?.filter(({ CustMobile }) => CustMobile !== null)
+              ?.map(({ CustId, CustName, CustMobile, CustEmail }) => ({
+                CustId,
+                CustName,
+                CustMobile,
+                CustEmail,
+              })) || [];
           if (applicableSMSCustomers?.length > 0) {
-            let Categories = ''
-            let Products = ''
+            let Categories = '';
+            let Products = '';
             if (RewardTypeName === 'Discount' && AppliesTo === 'S') {
-              Categories = RewardOrderTypeDetails?.filter(({ ProdCat }) => ProdCat !== 0 || ProdCat !== null)?.map(({ ProdCatName }) => ProdCatName)?.filter(Boolean).join()
-              Products = RewardOrderTypeDetails?.filter(({ ProdCat }) => ProdCat === 0 || ProdCat === null)?.map(({ ProdName }) => ProdName)?.filter(Boolean).join()
+              Categories = RewardOrderTypeDetails?.filter(
+                ({ ProdCat }) => ProdCat !== 0 || ProdCat !== null
+              )
+                ?.map(({ ProdCatName }) => ProdCatName)
+                ?.filter(Boolean)
+                .join();
+              Products = RewardOrderTypeDetails?.filter(
+                ({ ProdCat }) => ProdCat === 0 || ProdCat === null
+              )
+                ?.map(({ ProdName }) => ProdName)
+                ?.filter(Boolean)
+                .join();
             } else if (RewardTypeName === 'Free Products') {
-              Products = [...RewardTypeDetails?.map(({ ProdName }) => ProdName), ...RewardFreeTypeDetails?.map(({ ProdName }) => ProdName)]?.filter(Boolean).join()
+              Products = [
+                ...RewardTypeDetails?.map(({ ProdName }) => ProdName),
+                ...RewardFreeTypeDetails?.map(({ ProdName }) => ProdName),
+              ]
+                ?.filter(Boolean)
+                .join();
             }
             const postSMSData = {
-              BrName, BrEmail, Description, MinQty, MinPurchase, OfferCode,
-              CustomerDtl: applicableSMSCustomers, RewardTypeName, AppliesTo, Categories, Products, Amount: OfferAmt,
-              Qty: ProdCount
+              BrName,
+              BrEmail,
+              Description,
+              MinQty,
+              MinPurchase,
+              OfferCode,
+              CustomerDtl: applicableSMSCustomers,
+              RewardTypeName,
+              AppliesTo,
+              Categories,
+              Products,
+              Amount: OfferAmt,
+              Qty: ProdCount,
             };
 
             response.sms = await dispatch(postSMSOffer(postSMSData)).unwrap();
@@ -597,12 +699,17 @@ const OfferCodeList = () => {
         }
 
         setIsLoading(false);
-        setOpen(prev => !prev);
+        setOpen((prev) => !prev);
         setSelectedRowKeys([]);
-        setCheckedList([])
-        if (response?.mail?.data?.statusCode === 1 || response?.sms?.data?.statusCode === 1) {
+        setCheckedList([]);
+        if (
+          response?.mail?.data?.statusCode === 1 ||
+          response?.sms?.data?.statusCode === 1
+        ) {
           setMessageType('success');
-          setMessageData(`${response?.mail?.data?.response} & ${response?.sms?.data?.response}`);
+          setMessageData(
+            `${response?.mail?.data?.response} & ${response?.sms?.data?.response}`
+          );
           return;
         } else {
           setMessageType('error');
@@ -615,14 +722,16 @@ const OfferCodeList = () => {
       }
     } else {
       setMessageType('error');
-      setMessageData('Please select at least one communication method (Mail/SMS)');
+      setMessageData(
+        'Please select at least one communication method (Mail/SMS)'
+      );
     }
   };
 
   const handleCancel = () => {
-    setOpen(prev => !prev)
+    setOpen((prev) => !prev);
     setSelectedRowKeys([]);
-  }
+  };
 
   return (
     <>
@@ -673,26 +782,45 @@ const OfferCodeList = () => {
             width={1100}
             children={
               <>
-              <Spin spinning={isLoading} tip="Sending...">
-                <div style={{ display: 'flex', flexDirection: "column", gap: "0.5rem", border: "1px solid #d9d9d9", padding: "0.5rem", borderRadius: "0.50rem" }}>
-                  <p style={{ fontSize: '14px', fontWeight: '500' }}>Share Codes via :</p>
-                  <Checkbox indeterminate={indeterminate} onChange={onCheckAllChange} checked={checkAll}>
-                    Check All
-                  </Checkbox>
-                  <CheckboxGroup options={plainOptions} value={checkedList} onChange={onChange} />
-                </div>
-                <Table
-                  rowSelection={rowSelection}
-                  columns={columns1}
-                  dataSource={customerData}
-                  pagination={{
-                    onChange: handlePage1Change,
-                    defaultPageSize: 10,
-                    showSizeChanger: false,
-                    hideOnSinglePage: true,
-                  }}
-                  onChange={handleChange1}
-                />
+                <Spin spinning={isLoading} tip="Sending...">
+                  <div
+                    style={{
+                      display: 'flex',
+                      flexDirection: 'column',
+                      gap: '0.5rem',
+                      border: '1px solid #d9d9d9',
+                      padding: '0.5rem',
+                      borderRadius: '0.50rem',
+                    }}
+                  >
+                    <p style={{ fontSize: '14px', fontWeight: '500' }}>
+                      Share Codes via :
+                    </p>
+                    <Checkbox
+                      indeterminate={indeterminate}
+                      onChange={onCheckAllChange}
+                      checked={checkAll}
+                    >
+                      Check All
+                    </Checkbox>
+                    <CheckboxGroup
+                      options={plainOptions}
+                      value={checkedList}
+                      onChange={onChange}
+                    />
+                  </div>
+                  <Table
+                    rowSelection={rowSelection}
+                    columns={columns1}
+                    dataSource={customerData}
+                    pagination={{
+                      onChange: handlePage1Change,
+                      defaultPageSize: 10,
+                      showSizeChanger: false,
+                      hideOnSinglePage: true,
+                    }}
+                    onChange={handleChange1}
+                  />
                 </Spin>
               </>
             }

src/Pages/Payment/PaymentFailedDetails/PaymentFailedSales.jsx

@@ -87,316 +87,333 @@ const PaymentFailedSales = ({ paymentFailedStatusFun, OpenFailData }) => {
   const columns =
     clickedPaymentButton == 'Payment Gateway'
       ? [
-        {
-          title: 'Sl.No',
-          key: 'sno',
-          align: 'center',
-          width: '50px',
-          render: (text, object, index) => (
-            <a style={{ color: 'black' }}>{index + 1}</a>
-          ),
-          onCell: (record) => {
-            const productDetails = record?.productDetails;
-            const Combodtl =
-              record?.productDetails?.[0]?.comboDtl?.[0]
-                ?.ComboInwardDetails?.[0]?.ComboDetails;
-            return {
-              onClick: () => {
-                HoldPutfun(productDetails, record, Combodtl);
-              },
-            };
-          },
-        },
-        {
-          title: 'Order Date',
-          dataIndex: 'OrderPaymentDtl',
-          key: 'CreatedDate',
-          width: '100px',
-          render: (text) => (
-            <a style={{ color: 'black' }}>
-              {text?.length > 0 &&
-                dateTimeFormatChange(text?.[0]?.CreatedDate)}
-            </a>
-          ),
-          onCell: (record) => {
-            const productDetails = record?.productDetails;
-            const Combodtl =
-              record?.productDetails?.[0]?.comboDtl?.[0]
-                ?.ComboInwardDetails?.[0]?.ComboDetails;
-
-            return {
-              onClick: () => {
-                HoldPutfun(productDetails, record, Combodtl);
-              },
-            };
-          },
-        },
-        {
-          title: 'Transaction Number',
-          dataIndex: 'OrderPaymentDtl',
-          key: 'OrderPaymentDtl',
-          width: '80px',
-          render: (text) => (
-            <a style={{ color: 'black' }}>{text?.[0]?.PaymentOrderId}</a>
-          ),
-          onCell: (record) => {
-            const productDetails = record?.productDetails;
-            const Combodtl =
-              record?.productDetails?.[0]?.comboDtl?.[0]
-                ?.ComboInwardDetails?.[0]?.ComboDetails;
-
-            return {
-              onClick: () => {
-                HoldPutfun(productDetails, record, Combodtl);
-              },
-            };
-          },
-        },
-        {
-          title: 'Order Details',
-          dataIndex: 'OrderDetails',
-          key: 'OrderDetails',
-          width: '40px',
-          align: 'center',
-          render: (_, record) => (
-            <IoEye
-              style={{ fontSize: '18px', color: '#000', cursor: 'pointer' }}
-              onClick={() => handleOrderDetails(record)}
-            />
-          ),
-          // onCell: (record) => {
-
-          //     const productDetails = record?.productDetails;
-          //     const Combodtl = record?.productDetails?.[0]?.comboDtl?.[0]?.ComboInwardDetails?.[0]?.ComboDetails;
-
-          //     return {
-          //       onClick: () => {
-          //         HoldPutfun(productDetails, record,Combodtl)
-          //       },
-          //     };
-          //   },
-        },
-        {
-          title: 'Payment Details',
-          key: 'PaymentDetails',
-          dataIndex: 'PaymentDetails',
-          width: '40px',
-          align: 'center',
-          render: (_, record) => (
-            <IoEye
-              style={{ fontSize: '18px', color: '#000', cursor: 'pointer' }}
-              onClick={() => handlePaymentDetails(record)}
-            />
-          ),
-          // onCell: (record) => {
-
-          //     const productDetails = record?.productDetails;
-          //     const Combodtl = record?.productDetails?.[0]?.comboDtl?.[0]?.ComboInwardDetails?.[0]?.ComboDetails;
-
-          //     return {
-          //       onClick: () => {
-          //         HoldPutfun(productDetails, record,Combodtl)
-          //       },
-          //     };
-          //   },
-        },
-
-        {
-          title: 'Total Amount',
-          dataIndex: 'OrderPaymentDtl',
-          key: 'OrderPaymentDtl',
-          width: '80px',
-          render: (text) => (
-            <a style={{ color: 'black' }}>{text?.[0]?.Amount}</a>
-          ),
-          onCell: (record) => {
-            const productDetails = record?.productDetails;
-            const Combodtl =
-              record?.productDetails?.[0]?.comboDtl?.[0]
-                ?.ComboInwardDetails?.[0]?.ComboDetails;
-
-            return {
-              onClick: () => {
-                HoldPutfun(productDetails, record, Combodtl);
-              },
-            };
-          },
-        },
-        {
-          title: 'Payment Status',
-          key: 'ResponseTrackingDetails',
-          dataIndex: 'ResponseTrackingDetails',
-          width: '40px',
-          align: 'center',
-          render: (_, record) =>
-            record?.ResponseTrackingDetails.length > 0 &&
-              record?.ResponseTrackingDetails?.[0]?.order_status ==
-              'Success' ? (
-              <p style={{ color: '#52c41a' }}>Success</p>
-            ) : (
-              <p style={{ color: '#ff3434' }}>
-                As of now, the status of the Payment Gateway is marked as
-                'Failed.' A manual verification is required.
-              </p>
+          {
+            title: 'Sl.No',
+            key: 'sno',
+            align: 'center',
+            width: '50px',
+            render: (text, object, index) => (
+              <a style={{ color: 'black' }}>{index + 1}</a>
             ),
-        },
-      ]
-      : [
-        {
-          title: 'Sl.No',
-          key: 'sno',
-          align: 'center',
-          width: '50px',
-
-          render: (text, object, index) => (
-            <a style={{ color: 'black' }}>{(page - 1) * 10 + index + 1}</a>
-          ),
-          onCell: (record) => {
-            const productDetails = record?.productDetails;
-            const Combodtl =
-              record?.productDetails?.[0]?.comboDtl?.[0]
-                ?.ComboInwardDetails?.[0]?.ComboDetails;
-
-            return {
-              onClick: () => {
-                HoldPutfun(productDetails, record, Combodtl);
-              },
-            };
+            onCell: (record) => {
+              const productDetails = record?.productDetails;
+              const Combodtl =
+                record?.productDetails?.[0]?.comboDtl?.[0]
+                  ?.ComboInwardDetails?.[0]?.ComboDetails;
+              return {
+                onClick: () => {
+                  HoldPutfun(productDetails, record, Combodtl);
+                },
+              };
+            },
           },
-        },
-        {
-          title: 'Order Date',
-          dataIndex: 'OrderPaymentDtl',
-          key: 'CreatedDate',
-          width: '100px',
-          render: (text) => (
-            <a style={{ color: 'black' }}>
-              {text?.length > 0 &&
-                dateTimeFormatChange(text?.[0]?.CreatedDate)}
-            </a>
-          ),
-          onCell: (record) => {
-            const productDetails = record?.productDetails;
-            const Combodtl =
-              record?.productDetails?.[0]?.comboDtl?.[0]
-                ?.ComboInwardDetails?.[0]?.ComboDetails;
+          {
+            title: 'Order Date',
+            dataIndex: 'OrderPaymentDtl',
+            key: 'CreatedDate',
+            width: '100px',
+            render: (text) => (
+              <a style={{ color: 'black' }}>
+                {text?.length > 0 &&
+                  dateTimeFormatChange(text?.[0]?.CreatedDate)}
+              </a>
+            ),
+            onCell: (record) => {
+              const productDetails = record?.productDetails;
+              const Combodtl =
+                record?.productDetails?.[0]?.comboDtl?.[0]
+                  ?.ComboInwardDetails?.[0]?.ComboDetails;
 
-            return {
-              onClick: () => {
-                HoldPutfun(productDetails, record, Combodtl);
-              },
-            };
+              return {
+                onClick: () => {
+                  HoldPutfun(productDetails, record, Combodtl);
+                },
+              };
+            },
           },
-        },
-        {
-          title: 'Transaction Number',
-          dataIndex: 'OrderPaymentDtl',
-          key: 'OrderPaymentDtl',
-          width: '80px',
-          render: (text) => (
-            <a style={{ color: 'black' }}>{text?.[0]?.PaymentOrderId}</a>
-          ),
-          onCell: (record) => {
-            const productDetails = record?.productDetails;
-            const Combodtl =
-              record?.productDetails?.[0]?.comboDtl?.[0]
-                ?.ComboInwardDetails?.[0]?.ComboDetails;
+          {
+            title: 'Transaction Number',
+            dataIndex: 'OrderPaymentDtl',
+            key: 'OrderPaymentDtl',
+            width: '80px',
+            render: (text) => (
+              <a style={{ color: 'black' }}>{text?.[0]?.PaymentOrderId}</a>
+            ),
+            onCell: (record) => {
+              const productDetails = record?.productDetails;
+              const Combodtl =
+                record?.productDetails?.[0]?.comboDtl?.[0]
+                  ?.ComboInwardDetails?.[0]?.ComboDetails;
 
-            return {
-              onClick: () => {
-                HoldPutfun(productDetails, record, Combodtl);
-              },
-            };
+              return {
+                onClick: () => {
+                  HoldPutfun(productDetails, record, Combodtl);
+                },
+              };
+            },
           },
-        },
-        {
-          title: 'Order Details',
-          dataIndex: 'OrderDetails',
-          key: 'OrderDetails',
-          width: '40px',
-          align: 'center',
-          render: (_, record) => (
-            <IoEye
-              style={{ fontSize: '18px', color: '#000', cursor: 'pointer' }}
-              onClick={() => handleOrderDetails(record)}
-            />
-          ),
-          onCell: (record) => {
-            const productDetails = record?.productDetails;
-            const Combodtl =
-              record?.productDetails?.[0]?.comboDtl?.[0]
-                ?.ComboInwardDetails?.[0]?.ComboDetails;
-
-            return {
-              onClick: () => {
-                HoldPutfun(productDetails, record, Combodtl);
-              },
-            };
-          },
-        },
-
-        {
-          title: 'Total Amount',
-          dataIndex: 'OrderPaymentDtl',
-          key: 'OrderPaymentDtl',
-          width: '80px',
-          render: (text) => (
-            <a style={{ color: 'black' }}>{text?.[0]?.Amount}</a>
-          ),
-          onCell: (record) => {
-            const productDetails = record?.productDetails;
-            const Combodtl =
-              record?.productDetails?.[0]?.comboDtl?.[0]
-                ?.ComboInwardDetails?.[0]?.ComboDetails;
-
-            return {
-              onClick: () => {
-                HoldPutfun(productDetails, record, Combodtl);
-              },
-            };
-          },
-        },
-
-        {
-          title: 'Payment Status',
-          key: 'ResponseTrackingDetails',
-          dataIndex: 'ResponseTrackingDetails',
-          width: '150px',
-          render: (_, record, index) =>
-            PaymentStatus?.filter(
-              (item) => item.status == 'success' && item.index == index
-            ).length > 0 ? (
-              <p style={{ color: '#52c41a' }}>Success</p>
-            ) : PaymentStatus?.filter(
-              (item) => item.status == 'failed' && item.index == index
-            ).length > 0 ? (
-              <p style={{ color: '#ff3434' }}>Failed</p>
-            ) : (
-              <GoChecklist
+          {
+            title: 'Order Details',
+            dataIndex: 'OrderDetails',
+            key: 'OrderDetails',
+            width: '40px',
+            align: 'center',
+            render: (_, record) => (
+              <IoEye
                 style={{ fontSize: '18px', color: '#000', cursor: 'pointer' }}
-                onClick={() => handlePaymentStatuschange(record, index)}
+                onClick={() => handleOrderDetails(record)}
               />
             ),
-        },
-        {
-          title: 'Actions',
-          key: 'ResponseTrackingDetails',
-          dataIndex: 'ResponseTrackingDetails',
-          width: '130px',
-          render: (_, record, index) => {
-            const productDetails = record?.productDetails;
-            const Combodtl =
-              record?.productDetails?.[0]?.comboDtl?.[0]
-                ?.ComboInwardDetails?.[0]?.ComboDetails;
-            const isPaymentSuccess = PaymentStatus?.some(
-              (item) => item.status === 'success' && item.index === index
-            );
-            const isPaymentFailed = PaymentStatus?.some(
-              (item) => item.status === 'failed' && item.index === index
-            );
+            // onCell: (record) => {
 
-            return isPaymentSuccess ? (
-              PrintOrderDetails?.[0]?.OrderDetails?.length > 0 ? (
+            //     const productDetails = record?.productDetails;
+            //     const Combodtl = record?.productDetails?.[0]?.comboDtl?.[0]?.ComboInwardDetails?.[0]?.ComboDetails;
+
+            //     return {
+            //       onClick: () => {
+            //         HoldPutfun(productDetails, record,Combodtl)
+            //       },
+            //     };
+            //   },
+          },
+          {
+            title: 'Payment Details',
+            key: 'PaymentDetails',
+            dataIndex: 'PaymentDetails',
+            width: '40px',
+            align: 'center',
+            render: (_, record) => (
+              <IoEye
+                style={{ fontSize: '18px', color: '#000', cursor: 'pointer' }}
+                onClick={() => handlePaymentDetails(record)}
+              />
+            ),
+            // onCell: (record) => {
+
+            //     const productDetails = record?.productDetails;
+            //     const Combodtl = record?.productDetails?.[0]?.comboDtl?.[0]?.ComboInwardDetails?.[0]?.ComboDetails;
+
+            //     return {
+            //       onClick: () => {
+            //         HoldPutfun(productDetails, record,Combodtl)
+            //       },
+            //     };
+            //   },
+          },
+
+          {
+            title: 'Total Amount',
+            dataIndex: 'OrderPaymentDtl',
+            key: 'OrderPaymentDtl',
+            width: '80px',
+            render: (text) => (
+              <a style={{ color: 'black' }}>{text?.[0]?.Amount}</a>
+            ),
+            onCell: (record) => {
+              const productDetails = record?.productDetails;
+              const Combodtl =
+                record?.productDetails?.[0]?.comboDtl?.[0]
+                  ?.ComboInwardDetails?.[0]?.ComboDetails;
+
+              return {
+                onClick: () => {
+                  HoldPutfun(productDetails, record, Combodtl);
+                },
+              };
+            },
+          },
+          {
+            title: 'Payment Status',
+            key: 'ResponseTrackingDetails',
+            dataIndex: 'ResponseTrackingDetails',
+            width: '40px',
+            align: 'center',
+            render: (_, record) =>
+              record?.ResponseTrackingDetails.length > 0 &&
+              record?.ResponseTrackingDetails?.[0]?.order_status ==
+                'Success' ? (
+                <p style={{ color: '#52c41a' }}>Success</p>
+              ) : (
+                <p style={{ color: '#ff3434' }}>
+                  As of now, the status of the Payment Gateway is marked as
+                  'Failed.' A manual verification is required.
+                </p>
+              ),
+          },
+        ]
+      : [
+          {
+            title: 'Sl.No',
+            key: 'sno',
+            align: 'center',
+            width: '50px',
+
+            render: (text, object, index) => (
+              <a style={{ color: 'black' }}>{(page - 1) * 10 + index + 1}</a>
+            ),
+            onCell: (record) => {
+              const productDetails = record?.productDetails;
+              const Combodtl =
+                record?.productDetails?.[0]?.comboDtl?.[0]
+                  ?.ComboInwardDetails?.[0]?.ComboDetails;
+
+              return {
+                onClick: () => {
+                  HoldPutfun(productDetails, record, Combodtl);
+                },
+              };
+            },
+          },
+          {
+            title: 'Order Date',
+            dataIndex: 'OrderPaymentDtl',
+            key: 'CreatedDate',
+            width: '100px',
+            render: (text) => (
+              <a style={{ color: 'black' }}>
+                {text?.length > 0 &&
+                  dateTimeFormatChange(text?.[0]?.CreatedDate)}
+              </a>
+            ),
+            onCell: (record) => {
+              const productDetails = record?.productDetails;
+              const Combodtl =
+                record?.productDetails?.[0]?.comboDtl?.[0]
+                  ?.ComboInwardDetails?.[0]?.ComboDetails;
+
+              return {
+                onClick: () => {
+                  HoldPutfun(productDetails, record, Combodtl);
+                },
+              };
+            },
+          },
+          {
+            title: 'Transaction Number',
+            dataIndex: 'OrderPaymentDtl',
+            key: 'OrderPaymentDtl',
+            width: '80px',
+            render: (text) => (
+              <a style={{ color: 'black' }}>{text?.[0]?.PaymentOrderId}</a>
+            ),
+            onCell: (record) => {
+              const productDetails = record?.productDetails;
+              const Combodtl =
+                record?.productDetails?.[0]?.comboDtl?.[0]
+                  ?.ComboInwardDetails?.[0]?.ComboDetails;
+
+              return {
+                onClick: () => {
+                  HoldPutfun(productDetails, record, Combodtl);
+                },
+              };
+            },
+          },
+          {
+            title: 'Order Details',
+            dataIndex: 'OrderDetails',
+            key: 'OrderDetails',
+            width: '40px',
+            align: 'center',
+            render: (_, record) => (
+              <IoEye
+                style={{ fontSize: '18px', color: '#000', cursor: 'pointer' }}
+                onClick={() => handleOrderDetails(record)}
+              />
+            ),
+            onCell: (record) => {
+              const productDetails = record?.productDetails;
+              const Combodtl =
+                record?.productDetails?.[0]?.comboDtl?.[0]
+                  ?.ComboInwardDetails?.[0]?.ComboDetails;
+
+              return {
+                onClick: () => {
+                  HoldPutfun(productDetails, record, Combodtl);
+                },
+              };
+            },
+          },
+
+          {
+            title: 'Total Amount',
+            dataIndex: 'OrderPaymentDtl',
+            key: 'OrderPaymentDtl',
+            width: '80px',
+            render: (text) => (
+              <a style={{ color: 'black' }}>{text?.[0]?.Amount}</a>
+            ),
+            onCell: (record) => {
+              const productDetails = record?.productDetails;
+              const Combodtl =
+                record?.productDetails?.[0]?.comboDtl?.[0]
+                  ?.ComboInwardDetails?.[0]?.ComboDetails;
+
+              return {
+                onClick: () => {
+                  HoldPutfun(productDetails, record, Combodtl);
+                },
+              };
+            },
+          },
+
+          {
+            title: 'Payment Status',
+            key: 'ResponseTrackingDetails',
+            dataIndex: 'ResponseTrackingDetails',
+            width: '150px',
+            render: (_, record, index) =>
+              PaymentStatus?.filter(
+                (item) => item.status == 'success' && item.index == index
+              ).length > 0 ? (
+                <p style={{ color: '#52c41a' }}>Success</p>
+              ) : PaymentStatus?.filter(
+                  (item) => item.status == 'failed' && item.index == index
+                ).length > 0 ? (
+                <p style={{ color: '#ff3434' }}>Failed</p>
+              ) : (
+                <GoChecklist
+                  style={{ fontSize: '18px', color: '#000', cursor: 'pointer' }}
+                  onClick={() => handlePaymentStatuschange(record, index)}
+                />
+              ),
+          },
+          {
+            title: 'Actions',
+            key: 'ResponseTrackingDetails',
+            dataIndex: 'ResponseTrackingDetails',
+            width: '130px',
+            render: (_, record, index) => {
+              const productDetails = record?.productDetails;
+              const Combodtl =
+                record?.productDetails?.[0]?.comboDtl?.[0]
+                  ?.ComboInwardDetails?.[0]?.ComboDetails;
+              const isPaymentSuccess = PaymentStatus?.some(
+                (item) => item.status === 'success' && item.index === index
+              );
+              const isPaymentFailed = PaymentStatus?.some(
+                (item) => item.status === 'failed' && item.index === index
+              );
+
+              return isPaymentSuccess ? (
+                PrintOrderDetails?.[0]?.OrderDetails?.length > 0 ? (
+                  <button
+                    style={{
+                      backgroundColor: '#1292ee',
+                      color: '#fff',
+                      border: 'none',
+                      padding: '10px',
+                      borderRadius: '5px',
+                      cursor: 'pointer',
+                    }}
+                    onClick={() => PrintFun()}
+                  >
+                    Print
+                  </button>
+                ) : (
+                  ''
+                )
+              ) : isPaymentFailed ? (
                 <button
                   style={{
                     backgroundColor: '#1292ee',
@@ -406,50 +423,33 @@ const PaymentFailedSales = ({ paymentFailedStatusFun, OpenFailData }) => {
                     borderRadius: '5px',
                     cursor: 'pointer',
                   }}
-                  onClick={() => PrintFun()}
+                  onClick={() => HoldPutfun(productDetails, record, Combodtl)}
                 >
-                  Print
+                  Sales
                 </button>
+              ) : isPaymentSuccess &&
+                PrintOrderDetails?.[0]?.OrderDetails?.length === 0 ? (
+                <p style={{ color: '#52c41a' }}>
+                  Order payment partially completed
+                </p>
               ) : (
-                ''
-              )
-            ) : isPaymentFailed ? (
-              <button
-                style={{
-                  backgroundColor: '#1292ee',
-                  color: '#fff',
-                  border: 'none',
-                  padding: '10px',
-                  borderRadius: '5px',
-                  cursor: 'pointer',
-                }}
-                onClick={() => HoldPutfun(productDetails, record, Combodtl)}
-              >
-                Sales
-              </button>
-            ) : isPaymentSuccess &&
-              PrintOrderDetails?.[0]?.OrderDetails?.length === 0 ? (
-              <p style={{ color: '#52c41a' }}>
-                Order payment partially completed
-              </p>
-            ) : (
-              <button
-                style={{
-                  backgroundColor: '#1292ee',
-                  color: '#fff',
-                  border: 'none',
-                  padding: '10px',
-                  borderRadius: '5px',
-                  cursor: 'pointer',
-                }}
-                onClick={() => handlePaymentStatuschange(record, index)}
-              >
-                Check Status
-              </button>
-            );
+                <button
+                  style={{
+                    backgroundColor: '#1292ee',
+                    color: '#fff',
+                    border: 'none',
+                    padding: '10px',
+                    borderRadius: '5px',
+                    cursor: 'pointer',
+                  }}
+                  onClick={() => handlePaymentStatuschange(record, index)}
+                >
+                  Check Status
+                </button>
+              );
+            },
           },
-        },
-      ];
+        ];
 
   // Order details
 
@@ -783,27 +783,16 @@ const PaymentFailedSales = ({ paymentFailedStatusFun, OpenFailData }) => {
     gateWaySubmit();
   }, []);
 
-  const AllProductTokenFunction = () => { };
-  // useEffect(() => {
-  //     if (PrintOrderDetails?.length > 0) {
-  //         if (isMobile) {
-  //             MobilePrint(PrintOrderDetails, UpiId, "Booking")
-  //         }
-  //         else {
-  //             Print()
-  //         }
-
-  //         // setPrintOrderDetails([])
-  //     } //change by karthiga
-  // }, [PrintOrderDetails])
-  //
-
-  //function
-
   const PrintFun = () => {
     if (PrintOrderDetails?.length > 0) {
       if (isMobile) {
-        MobilePrint(appPreferences, PrintOrderDetails, UpiId, 'Booking', SettingDataSelector);
+        MobilePrint(
+          appPreferences,
+          PrintOrderDetails,
+          UpiId,
+          'Booking',
+          SettingDataSelector
+        );
       } else {
         Print();
       }
@@ -1063,14 +1052,14 @@ const PaymentFailedSales = ({ paymentFailedStatusFun, OpenFailData }) => {
       'Style 11': 'PrintStyle11',
       'Style 12': 'PrintStyle12',
       'Style 13': 'RePrint',
-      "A4": "PrintStyleA4",
-      "A5": "PrintStyleA5",
-      "A4Standard": "A4Standard"
+      A4: 'PrintStyleA4',
+      A5: 'PrintStyleA5',
+      A4Standard: 'A4Standard',
     };
 
     const selectedStyle =
       stylesMap[
-      printerTemplateStyle == undefined ? 'Style 13' : printerTemplateStyle
+        printerTemplateStyle == undefined ? 'Style 13' : printerTemplateStyle
       ];
     console.log(selectedStyle, 'checkPrintOrderDetails');
     if (PrintOrderDetails?.[0]?.OrderDetails) {

src/Pages/Payment/PaymentOptions/PaymentOptions.jsx

@@ -1,5 +1,5 @@
 import { useEffect, useState, useCallback } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import { ArrowRightOutlined } from '@ant-design/icons';
 import { Radio } from 'antd';
 import { Messages } from '../../../Components/Notifications/Messages';
@@ -12,13 +12,7 @@ import {
 import { getSession } from '../../../Services/Others.js';
 import '../../../Styles/Payment/PaymentOptions/PaymentOptions.scss';
 import { useAuth } from '../../../AuthContext.jsx';
-// import {getPaymentOptionFeature} from '../../BookingScreen/Components/BSBillingTables/BSBillingTable1/BST1Payment.jsx'
-import {
-  changeCommonPaymentOptions,
-  getPaymentOptionFeatureApi,
-  GlobalCommonPaymentOptions,
-} from '../../../Features/BookingScreen/BookingData/BookingData.js';
-import BST1Payment from '../../BookingScreen/Components/BSBillingTables/BSBillingTable1/BST1Payment.jsx';
+import { changeCommonPaymentOptions } from '../../../Features/BookingScreen/BookingData/BookingData.js';
 import { fetchAndSetPaymentOptions } from '../../BookingScreen/Template/PaymentOptions.js';
 import {
   getPaymentConfigData,
@@ -41,7 +35,6 @@ function PaymentOptions({ setModalOpen }) {
   );
 
   const dispatch = useDispatch();
-
   const AppId = getSession('AppId');
   const UserId = getSession('UserId');
   const CompId = getSession('CompId');
@@ -83,7 +76,6 @@ function PaymentOptions({ setModalOpen }) {
       (item) =>
         item.FlowName === 'sales' && item.Option === 'Pay at the counter'
     );
-    console.log(salesPayAtCounter);
 
     const modeSet = new Set();
 
@@ -354,10 +346,7 @@ function PaymentOptions({ setModalOpen }) {
       const paymentOptionResponse = await dispatch(
         getPaymentConfigData({ typeName: 'Payment Option' })
       ).unwrap();
-      console.log(
-        paymentOptionResponse?.data?.data,
-        ' paymentOptionResponse?.data?.data'
-      );
+
       if (paymentOptionResponse?.data?.statusCode == 1) {
         const requiredFeatureNames = ['Payment Gateway', 'Payment Device'];
         const featureNames = checkPaymentFeatures?.data?.data?.flatMap((app) =>
@@ -432,6 +421,7 @@ function PaymentOptions({ setModalOpen }) {
           BranchId: BranchId,
           DetailType: 'BU',
         };
+        ALERT('HIH');
         const Businessupidetails = await dispatch(
           getPaymentUPIDetails(BusiData)
         ).unwrap();
@@ -1259,7 +1249,7 @@ function PaymentOptions({ setModalOpen }) {
     const result = {};
 
     data?.forEach((item) => {
-      const { FlowId, FlowName, Option, OptionDetails } = item;
+      const { FlowId, FlowName, OptionDetails } = item;
 
       if (!result[FlowId]) {
         result[FlowId] = {
@@ -1590,7 +1580,7 @@ function PaymentOptions({ setModalOpen }) {
               </>
             )}
 
-          <div className="SBTNPaymentOptions">
+          <div className=" submitButtonDiv">
             <Buttons
               buttonText="SUBMIT"
               color="901D77"

src/Pages/Payment/PaymentReceivedRetail/PaymentReceivedRetail.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { useState, useEffect, useRef, useCallback } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import {
   getSession,
@@ -9,7 +9,6 @@ import { Tables } from '../../../Components/Tables/Table';
 import { Form } from 'antd';
 import { InputField } from '../../../Components/Forms/InputField.jsx';
 import Buttons from '../../../Components/Forms/Buttons.jsx';
-import { PlusOutlined } from '@ant-design/icons';
 import { DropDowns } from '../../../Components/Forms/DropDown.jsx';
 import { getWholeSalePayments } from '../../../Features/WSTransaction/WSTransaction.js';
 import { Messages } from '../../../Components/Notifications/Messages.jsx';
@@ -17,7 +16,10 @@ import { DatePicProd } from '../../../Components/Forms/DatePickerProduct.jsx';
 import moment from 'moment';
 import { GlobalLastEntryDateDtl } from '../../../Features/WholeSale/WholesaleData.js';
 import { useAuth } from '../../../AuthContext.jsx';
-import { changeBreadCrumb, getEmpAccess } from '../../../Features/AppPage/CenterPage.js';
+import {
+  changeBreadCrumb,
+  getEmpAccess,
+} from '../../../Features/AppPage/CenterPage.js';
 import '../../../Styles/Payment/PaymentReceivedRetail/PaymentReceivedRetail.scss';
 import FormHeader from '../../PageComponents/FormHeader.jsx';
 import {
@@ -43,7 +45,6 @@ const PaymentReceivedRetail = () => {
 
   const [page, setpage] = useState(1);
   const [SelectedCustomer, setSelectedCustomer] = useState();
-  console.log(SelectedCustomer, 'SelectedCustomerSelectedCustomer');
   const [SelectedCustomerRole, setSelectedCustomerRole] = useState();
   const [customer, setCustomer] = useState();
   const [CustPaymentModes, setPaymentModesCust] = useState([]);
@@ -77,7 +78,6 @@ const PaymentReceivedRetail = () => {
     dispatch(changeBreadCrumb({ items: items }));
   }, []);
 
-
   useEffect(() => {
     const PaymentCredit =
       CustPaymentModes?.find((a) => a?.ConfigId === selectedPaymentMode)
@@ -288,28 +288,6 @@ const PaymentReceivedRetail = () => {
   useEffect(() => {
     fetchWholeSaleEmployee();
   }, [EmployeePaymentModes]);
-  // const fetchWholeSaleCustomer = async () => {
-
-  //     const Data = {
-  //         "CompId": CompId,
-  //         "BranchId": BranchId,
-  //         "AppId": AppId
-  //     }
-  //     const gettingTableData = await dispatch(
-  //         getCustmentWholeSaleTran(Data)
-  //     ).unwrap();
-  //     if (gettingTableData?.data?.statusCode === 1) {
-  //         setCustomer(gettingTableData?.data?.data);
-  //         let cutDefaultValue = CustPaymentModes?.[0]
-  //         setSelectedPaymentMode(cutDefaultValue?.ConfigId)
-  //     }
-  //     else {
-  //         setCustomer([])
-  //         setSelectedPaymentMode('')
-  //     }
-
-  // };
-
   const fetchWholeSaleEmployee = async () => {
     const Data = {
       CompId: CompId,
@@ -328,12 +306,16 @@ const PaymentReceivedRetail = () => {
   };
   const getPreference = async () => {
     const data = { AppId: AppId, CompId: CompId, BranchId: BranchId };
-    const { data: res } = await dispatch(getPreferenceData(data)).unwrap()
-    const decimalSetting = res?.data?.[0]?.SettingDtlDetails?.find((setting) => setting?.SettingIdName?.toLowerCase() === "decimal" && setting?.SettingValue === 'Y');
+    const { data: res } = await dispatch(getPreferenceData(data)).unwrap();
+    const decimalSetting = res?.data?.[0]?.SettingDtlDetails?.find(
+      (setting) =>
+        setting?.SettingIdName?.toLowerCase() === 'decimal' &&
+        setting?.SettingValue === 'Y'
+    );
     if (decimalSetting) {
-      setAllowDecimal(true)
+      setAllowDecimal(true);
     }
-  }
+  };
   const onFinish = async (values) => {
     setButtonDisabled(true);
     const postData = {
@@ -607,14 +589,11 @@ const PaymentReceivedRetail = () => {
                 }}
               >
                 <p className="TransactionList-title">Transaction List</p>
-                {/* {PaymentType != 'O' &&
-        <p className='TransactionList-title' style={{ fontSize: "14px", cursor: "pointer" }}>Total Amount : <span style={{ color: FilterAmount < 0 ? "red" : "green" }}>{
-            // PaidListData?.[0]?.OverAllTotalAmount || 0
-            Math.abs(FilterAmount)
-        }</span></p>
-    } */}
               </div>
-              <div className="AllEntryShowList" style={{ overflow: 'scroll' }}>
+              <div
+                className="AllEntryShowList"
+                style={{ overflow: 'scroll', scrollbarWidth: 'none' }}
+              >
                 <div className="Re-Print-table">
                   <Tables
                     columns={columns}

src/Pages/Reports/DateWiseReport/DateWiseReport.jsx

@@ -1,13 +1,10 @@
 import React, { useEffect, useState, useRef } from 'react';
 import { useDispatch } from 'react-redux';
 import { Switch, Tooltip, Form, DatePicker } from 'antd';
-import moment from 'moment';
-import { DatePicProd } from '../../../Components/Forms/DatePickerProduct.jsx';
-import { Tables } from '../../../Components/Tables/Table';
 import { BiSolidPrinter, BiUpArrowCircle } from 'react-icons/bi';
 import Denomination from '../Denomination/Denomination';
-import { Popover } from 'antd';
 import '../../../Styles/Reports/DateWiseReport/DateWiseReport.scss';
+import '../../../Styles/Reports/ItemWiseReport/ItemWiseReport.scss';
 import { changeBreadCrumb } from '../../../Features/AppPage/CenterPage';
 import {
   getDatewiseReport,
@@ -20,7 +17,6 @@ import { getSession, printDiv } from '../../../Services/WSOthers';
 import DatewiseReportPdf from '../../paymentpdfPage/DateWiseReportPdf';
 import { DropDowns } from '../../../Components/Forms/DropDown.jsx';
 import { isMobile } from 'react-device-detect';
-import logo from '../../../Images/pozologoimg.png';
 import { RadioGrpButton } from '../../../Components/Forms/RadioGroup.jsx';
 import { IoSearch } from 'react-icons/io5';
 import { ExtractDateFormate } from '../../../Services/Others.js';
@@ -62,7 +58,11 @@ const DateWiseReport = () => {
     Amounts: {},
     OverAllTotal: 0,
   });
-  const MobileA4Print = SettingDataSelector?.[0]?.SettingDtlDetails?.find((setting) => setting?.SettingIdName?.toLowerCase() === "mobilea4" && setting?.SettingValue === 'Y');
+  const MobileA4Print = SettingDataSelector?.[0]?.SettingDtlDetails?.find(
+    (setting) =>
+      setting?.SettingIdName?.toLowerCase() === 'mobilea4' &&
+      setting?.SettingValue === 'Y'
+  );
   console.log(MobileA4Print, 'MobileA4PrintMobileA4Print');
 
   useEffect(() => {
@@ -85,28 +85,29 @@ const DateWiseReport = () => {
     });
     return formattedDate;
   };
-  const formatAmount = (value) => {
-    return allowDecimal ? parseFloat(value || 0).toFixed(2) : Math.round(value || 0);
-  };
+
   const mobileDateWisePrintFun = async (data) => {
+    const Dataa = ['Cash', 'Upi', 'Card', 'Credit']
+      ?.map((method) => {
+        const amountKey = `${method}Amount`;
+        const countKey = `${method}Count`;
+        let TableData = AppType ? WholeDataSource : dataSource;
+        const total = TableData?.reduce(
+          (acc, entry) => {
+            acc.amount += entry[amountKey] || 0;
+            acc.count += entry[countKey] || 0;
+            return acc;
+          },
+          { amount: 0, count: 0 }
+        );
 
-
-    const Dataa = ["Cash", "Upi", "Card", "Credit"]?.map(method => {
-      const amountKey = `${method}Amount`;
-      const countKey = `${method}Count`;
-      let TableData = AppType ? WholeDataSource : dataSource;
-      const total = TableData?.reduce((acc, entry) => {
-        acc.amount += entry[amountKey] || 0;
-        acc.count += entry[countKey] || 0;
-        return acc;
-      }, { amount: 0, count: 0 });
-
-      return {
-        PaymentMethod: method,
-        CountOfPaymentType: total.count,
-        NetAmount: total.amount
-      };
-    })?.filter(entry => entry.NetAmount > 0);
+        return {
+          PaymentMethod: method,
+          CountOfPaymentType: total.count,
+          NetAmount: total.amount,
+        };
+      })
+      ?.filter((entry) => entry.NetAmount > 0);
 
     let Tabledata = Dataa?.map((data, index) => {
       const snoSpacing = Math.max(0, 3 - String(index + 1).length);
@@ -141,22 +142,22 @@ const DateWiseReport = () => {
     const Billamountspace = Math.max(
       0,
       6 -
-      String(
-        (AppType
-          ? datewiseData?.[0]?.WholeSaleExpenseNetAmount
-          : datewiseData?.[0]?.TotalBillAmount
-        )?.toFixed(2)
-      ).length
+        String(
+          (AppType
+            ? datewiseData?.[0]?.WholeSaleExpenseNetAmount
+            : datewiseData?.[0]?.TotalBillAmount
+          )?.toFixed(2)
+        ).length
     );
     const Taxamountspace = Math.max(
       0,
       6 -
-      String(
-        (AppType
-          ? datewiseData?.[0]?.WholeSaleExpenseTaxAmount
-          : datewiseData?.[0]?.TaxAmount
-        )?.toFixed(2)
-      ).length
+        String(
+          (AppType
+            ? datewiseData?.[0]?.WholeSaleExpenseTaxAmount
+            : datewiseData?.[0]?.TaxAmount
+          )?.toFixed(2)
+        ).length
     );
     const Chargesamountspace = Math.max(
       0,
@@ -169,22 +170,22 @@ const DateWiseReport = () => {
     const Discountamountspace = Math.max(
       0,
       6 -
-      String(
-        (AppType
-          ? datewiseData?.[0]?.WholeSaleExpenseTotalOverallDisc
-          : datewiseData?.[0]?.TotalOfferAmount
-        )?.toFixed(2)
-      ).length
+        String(
+          (AppType
+            ? datewiseData?.[0]?.WholeSaleExpenseTotalOverallDisc
+            : datewiseData?.[0]?.TotalOfferAmount
+          )?.toFixed(2)
+        ).length
     );
     const Netamountspace = Math.max(
       0,
       6 -
-      String(
-        (AppType
-          ? datewiseData?.[0]?.WholeSaleExpenseNetAmount
-          : datewiseData?.[0]?.TotalNetAmount
-        )?.toFixed(2)
-      ).length
+        String(
+          (AppType
+            ? datewiseData?.[0]?.WholeSaleExpenseNetAmount
+            : datewiseData?.[0]?.TotalNetAmount
+          )?.toFixed(2)
+        ).length
     );
     var data = datewiseData && datewiseData[0] ? datewiseData[0] : {};
     var receiptTextdata =
@@ -207,8 +208,8 @@ const DateWiseReport = () => {
       parseFloat(
         !AppType
           ? (data?.TotalBillAmount || 0) -
-          (data?.TotalExtraChargeAmount || 0) +
-          (data?.TotalOfferAmount || 0)
+              (data?.TotalExtraChargeAmount || 0) +
+              (data?.TotalOfferAmount || 0)
           : data?.WholeSaleExpenseNetAmount || 0
       ).toFixed(2) +
       ' '.repeat(Billamountspace) +
@@ -263,7 +264,7 @@ const DateWiseReport = () => {
           AppType
             ? datewiseData?.[0]?.WholeSaleExpenseNetAmount || 0
             : datewiseData?.[0]?.TotalNetAmount +
-            (datewiseData?.[0]?.PreOrderNetAmount || 0) || 0
+                (datewiseData?.[0]?.PreOrderNetAmount || 0) || 0
         )
       ).toFixed(2) +
       ' '.repeat(Netamountspace) +
@@ -358,7 +359,7 @@ const DateWiseReport = () => {
     </style>`;
 
   useEffect(() => {
-    getPreference()
+    getPreference();
     dispatch(changeBreadCrumb({ items: items }));
     fetchInitialData();
     if (UserRole != 'Employee') {
@@ -368,12 +369,16 @@ const DateWiseReport = () => {
 
   const getPreference = async () => {
     const data = { AppId: AppId, CompId: CompId, BranchId: BranchId };
-    const { data: res } = await dispatch(getPreferenceData(data)).unwrap()
-    const decimalSetting = res?.data?.[0]?.SettingDtlDetails?.find((setting) => setting?.SettingIdName?.toLowerCase() === "decimal" && setting?.SettingValue === 'Y');
+    const { data: res } = await dispatch(getPreferenceData(data)).unwrap();
+    const decimalSetting = res?.data?.[0]?.SettingDtlDetails?.find(
+      (setting) =>
+        setting?.SettingIdName?.toLowerCase() === 'decimal' &&
+        setting?.SettingValue === 'Y'
+    );
     if (decimalSetting) {
-      setAllowDecimal(true)
+      setAllowDecimal(true);
     }
-  }
+  };
 
   const userDropData = async () => {
     const gettinguserDropDown = await dispatch(
@@ -400,7 +405,10 @@ const DateWiseReport = () => {
   const fetchInitialData = async () => {
     let currentDate = new Date().toJSON().slice(0, 10);
     formRef?.current?.setFieldsValue({
-      dateRange: [dayjs(currentDate, 'YYYY-MM-DD'), dayjs(currentDate, 'YYYY-MM-DD')],
+      dateRange: [
+        dayjs(currentDate, 'YYYY-MM-DD'),
+        dayjs(currentDate, 'YYYY-MM-DD'),
+      ],
     });
     setOrderFromDate(currentDate + 'T00:00:00');
     setOrderToDate(currentDate + 'T23:59:59');
@@ -495,18 +503,6 @@ const DateWiseReport = () => {
   //   },
   // ];
 
-  const onChange = (checked) => {
-    setOpenDenomination(checked);
-  };
-
-  const hide = () => {
-    setOpen(false);
-  };
-  const handleOpenChange = (newOpen) => {
-    setOpen(newOpen);
-  };
-
-
   const UserDropDownChange = async (e) => {
     setUserId(e);
     let mob = userDropDown?.filter((item) => item?.UserId === e);
@@ -554,8 +550,7 @@ const DateWiseReport = () => {
           printId: 'RePrint',
           printStyle: style,
         });
-      }
-      else {
+      } else {
         var textEncoded = encodeURI(receiptText);
         var TypeCheck = 'PrintReceipt';
         var scheme = 'pozoprinter';
@@ -681,28 +676,28 @@ const DateWiseReport = () => {
               style={{ display: 'flex', flexDirection: 'row', rowGap: '1rem' }}
             >
               <div className="DateWiseReport-datepic">
-             <div className="DateWiseReport-DateFrom">
-                 <Form.Item
-                  name="dateRange"
-                  initialValue={[dayjs(), dayjs()]} // ✅ Preselect today for both From and To
-                  rules={[
-                    {
-                      required: true,
-                      message: 'Please select From and To Dates',
-                    },
-                  ]}
-                >
-                  <RangePicker
-                    format="DD-MM-YYYY"
-                    allowClear
-                    disabledDate={(current) => current && current > dayjs()} // Disable future dates
-                    onChange={(dates, dateStrings) => {
-                      OrderDateRangeFetch(dates, dateStrings);
-                    }}
-                    placeholder={['From Date', 'To Date']}
-                  />
-                </Form.Item>
-             </div>
+                <div className="DateWiseReport-DateFrom">
+                  <Form.Item
+                    name="dateRange"
+                    initialValue={[dayjs(), dayjs()]} // ✅ Preselect today for both From and To
+                    rules={[
+                      {
+                        required: true,
+                        message: 'Please select From and To Dates',
+                      },
+                    ]}
+                  >
+                    <RangePicker
+                      format="DD-MM-YYYY"
+                      allowClear
+                      disabledDate={(current) => current && current > dayjs()} // Disable future dates
+                      onChange={(dates, dateStrings) => {
+                        OrderDateRangeFetch(dates, dateStrings);
+                      }}
+                      placeholder={['From Date', 'To Date']}
+                    />
+                  </Form.Item>
+                </div>
                 <div className="datewise-userDropDown">
                   {UserRole != 'Employee' && (
                     <Form.Item
@@ -728,7 +723,7 @@ const DateWiseReport = () => {
                         onChangeFunction={(e) => UserDropDownChange(e)}
                         isOnchanges={selectedUserData ? true : false}
                         valueData={selectedUserData}
-                      // defaultValue={LastSelectConfig}
+                        // defaultValue={LastSelectConfig}
                       />
                     </Form.Item>
                   )}
@@ -798,9 +793,11 @@ const DateWiseReport = () => {
                     <th rowSpan="2" style={{ textAlign: 'center' }}>
                       S.No
                     </th>
-                    {dataSource?.[0]?.Date && <th rowSpan="2" style={{ textAlign: 'center' }}>
-                      Date
-                    </th>}
+                    {dataSource?.[0]?.Date && (
+                      <th rowSpan="2" style={{ textAlign: 'center' }}>
+                        Date
+                      </th>
+                    )}
                     <th colSpan="2" style={{ textAlign: 'center' }}>
                       Cash
                     </th>
@@ -853,7 +850,9 @@ const DateWiseReport = () => {
                     return (
                       <tr key={Date + idx}>
                         <td style={{ textAlign: 'center' }}>{idx + 1}</td>
-                        {dataSource?.[0]?.Date && <td style={{ textAlign: 'center' }}>{date}</td>}
+                        {dataSource?.[0]?.Date && (
+                          <td style={{ textAlign: 'center' }}>{date}</td>
+                        )}
                         <td style={{ textAlign: 'right' }}>{CashCount ?? 0}</td>
                         <td style={{ textAlign: 'right' }}>
                           {safeRound(CashAmount)}
@@ -866,7 +865,9 @@ const DateWiseReport = () => {
                         <td style={{ textAlign: 'right' }}>
                           {safeRound(CardAmount)}
                         </td>
-                        <td style={{ textAlign: 'right' }}>{CreditCount ?? 0}</td>
+                        <td style={{ textAlign: 'right' }}>
+                          {CreditCount ?? 0}
+                        </td>
                         <td style={{ textAlign: 'right' }}>
                           {safeRound(CreditAmount)}
                         </td>
@@ -919,26 +920,26 @@ const DateWiseReport = () => {
                       <td>
                         {!AppType
                           ? (datewiseData?.[0]?.TotalBillAmount || 0) -
-                          (datewiseData?.[0]?.TotalExtraChargeAmount || 0) +
-                          (datewiseData?.[0]?.TotalOfferAmount || 0)
+                            (datewiseData?.[0]?.TotalExtraChargeAmount || 0) +
+                            (datewiseData?.[0]?.TotalOfferAmount || 0)
                           : datewiseData?.[0]?.WholeSaleExpenseNetAmount}
                       </td>
                     </tr>
                     {!AppType
                       ? datewiseData?.[0]?.TaxAmount > 0 && (
-                        <tr>
-                          <td>Tax</td>
-                          <td>{datewiseData?.[0]?.TaxAmount}</td>
-                        </tr>
-                      )
+                          <tr>
+                            <td>Tax</td>
+                            <td>{datewiseData?.[0]?.TaxAmount}</td>
+                          </tr>
+                        )
                       : datewiseData?.[0]?.WholeSaleExpenseTaxAmount > 0 && (
-                        <tr>
-                          <td>Tax</td>
-                          <td>
-                            {datewiseData?.[0]?.WholeSaleExpenseTaxAmount}
-                          </td>
-                        </tr>
-                      )}
+                          <tr>
+                            <td>Tax</td>
+                            <td>
+                              {datewiseData?.[0]?.WholeSaleExpenseTaxAmount}
+                            </td>
+                          </tr>
+                        )}
                     {datewiseData?.[0]?.TotalExtraChargeAmount > 0 && (
                       <tr>
                         <td>Charges</td>
@@ -953,23 +954,23 @@ const DateWiseReport = () => {
                     )}
                     {AppType
                       ? datewiseData?.[0]?.WholeSaleExpenseTotalOverallDisc >
-                      0 && (
-                        <tr>
-                          <td>Discount(-)</td>
-                          <td>
-                            {
-                              datewiseData?.[0]
-                                ?.WholeSaleExpenseTotalOverallDisc
-                            }
-                          </td>
-                        </tr>
-                      )
+                          0 && (
+                          <tr>
+                            <td>Discount(-)</td>
+                            <td>
+                              {
+                                datewiseData?.[0]
+                                  ?.WholeSaleExpenseTotalOverallDisc
+                              }
+                            </td>
+                          </tr>
+                        )
                       : datewiseData?.[0]?.TotalOfferAmount > 0 && (
-                        <tr>
-                          <td>Discount(-)</td>
-                          <td>{datewiseData?.[0]?.TotalOfferAmount}</td>
-                        </tr>
-                      )}
+                          <tr>
+                            <td>Discount(-)</td>
+                            <td>{datewiseData?.[0]?.TotalOfferAmount}</td>
+                          </tr>
+                        )}
 
                     <p className="DateWiseReport-border-dashed"></p>
                     <tr>
@@ -977,12 +978,12 @@ const DateWiseReport = () => {
                       <td className="DateWiseReport-netAmount">
                         {AppType
                           ? safeRound(
-                            datewiseData?.[0]?.WholeSaleExpenseNetAmount
-                          ) || 0
+                              datewiseData?.[0]?.WholeSaleExpenseNetAmount
+                            ) || 0
                           : safeRound(
-                            datewiseData?.[0]?.TotalNetAmount +
-                            (datewiseData?.[0]?.PreOrderNetAmount || 0)
-                          ) || 0}
+                              datewiseData?.[0]?.TotalNetAmount +
+                                (datewiseData?.[0]?.PreOrderNetAmount || 0)
+                            ) || 0}
                       </td>
                     </tr>
                   </tbody>
@@ -997,7 +998,7 @@ const DateWiseReport = () => {
                   <Denomination onchange={handleDenominationChange} />
                   {TotalCashInHand[0]?.PaymentMethod === 'Cash' &&
                     TotalCashInHand[0]?.NetAmount <
-                    parseInt(denominationData?.OverAllTotal) &&
+                      parseInt(denominationData?.OverAllTotal) &&
                     parseInt(denominationData?.OverAllTotal) > 0 && (
                       <div
                         className="amountMissmatch"

src/Pages/Wholesalespreorder/WholesalePreorderForm.jsx

@@ -1,4 +1,11 @@
-import { useState, useEffect, useRef, useCallback } from 'react';
+import {
+  useState,
+  useEffect,
+  useRef,
+  useCallback,
+  lazy,
+  Suspense,
+} from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { InputField } from '../../Components/Forms/InputField.jsx';
 import Buttons from '../../Components/Forms/Buttons.jsx';
@@ -47,8 +54,10 @@ import {
   GlobalWSDate,
 } from '../../Features/WholeSale/WholesaleData.js';
 import { IoMdAdd, IoMdAddCircle } from 'react-icons/io';
-import AddUOMPreorder from '../PurchaseScreen/WholeSaleComponent/AddUomPreorder.jsx';
-import Search from '../../Components/Forms/Search.jsx';
+const AddUOMPreorder = lazy(
+  () => import('../PurchaseScreen/WholeSaleComponent/AddUomPreorder.jsx')
+);
+const Search = lazy(() => import('../../Components/Forms/Search.jsx'));
 
 const subDirectory = import.meta.env.BASE_URL;
 
@@ -533,10 +542,14 @@ const WsPreOrderForm = ({
       onFilter: (value, record) => {
         return (
           String(record.CustShortName)
-           ?.toLowerCase()
+            ?.toLowerCase()
             ?.includes(value?.toLowerCase()) ||
-          String(record.CustName)?.toLowerCase()?.includes(value?.toLowerCase()) ||
-          String(record.CustMobile)?.toLowerCase()?.includes(value?.toLowerCase())
+          String(record.CustName)
+            ?.toLowerCase()
+            ?.includes(value?.toLowerCase()) ||
+          String(record.CustMobile)
+            ?.toLowerCase()
+            ?.includes(value?.toLowerCase())
         );
       },
       render: (text, record, row) => (
@@ -767,411 +780,418 @@ const WsPreOrderForm = ({
     setSearchedText(e?.target?.value);
   };
   return (
-    <div className="WsPreOrderForm-Master">
-      <div className="pageOverAll" style={{ height: Mode == 'Y' && '100%' }}>
-        {(addcustomer || hold) && (
-          <FeaturesFunctionalities
-            handleAddCustomerCancel={handleAddCustomerCancel}
-            addcustomer={addcustomer}
-            handleHoldCancel={handleHoldCancel}
-            modalOpen={hold}
-          />
-        )}
-        <div className="userPage">
-          <div className="userPageContent">
-            <Messages
-              messageType={messageType}
-              messageData={messageData}
-              onComplete={onComplete}
+    <Suspense fallback={<div>Loading…</div>}>
+      <div className="WsPreOrderForm-Master">
+        <div className="pageOverAll" style={{ height: Mode == 'Y' && '100%' }}>
+          {(addcustomer || hold) && (
+            <FeaturesFunctionalities
+              handleAddCustomerCancel={handleAddCustomerCancel}
+              addcustomer={addcustomer}
+              handleHoldCancel={handleHoldCancel}
+              modalOpen={hold}
             />
-            <div className="formName">
-              <FormHeader title={'Preorder'} />
-            </div>
+          )}
+          <div className="userPage">
+            <div className="userPageContent">
+              <Messages
+                messageType={messageType}
+                messageData={messageData}
+                onComplete={onComplete}
+              />
+              <div className="formName">
+                <FormHeader title={'Preorder'} />
+              </div>
 
-            <div
-              className="formDiv"
-              style={{
-                height:
-                  Mode === 'Y'
-                    ? WholeSalePreOrder
-                      ? '76vh'
-                      : HigherorderComponents
-                        ? '67vh'
-                        : '80vh'
-                    : '65vh',
-              }}
-            >
-              <Form
-                ref={formRef}
-                className="formDivAnt"
-                onFinish={onFinish}
-                initialValues={{ ...editstate }}
+              <div
+                className="formDiv"
+                style={{
+                  height:
+                    Mode === 'Y'
+                      ? WholeSalePreOrder
+                        ? '76vh'
+                        : HigherorderComponents
+                          ? '67vh'
+                          : '80vh'
+                      : '65vh',
+                }}
               >
-                <div className="HeaderofselectStatus">
-                  {formType == 'add' && (
-                    <Radio.Group onChange={onchangeStatus} value={Mode}>
-                      <Radio value="N">Individual</Radio>
-                      <Radio value="Y">Customers</Radio>
-                    </Radio.Group>
-                  )}
+                <Form
+                  ref={formRef}
+                  className="formDivAnt"
+                  onFinish={onFinish}
+                  initialValues={{ ...editstate }}
+                >
+                  <div className="HeaderofselectStatus">
+                    {formType == 'add' && (
+                      <Radio.Group onChange={onchangeStatus} value={Mode}>
+                        <Radio value="N">Individual</Radio>
+                        <Radio value="Y">Customers</Radio>
+                      </Radio.Group>
+                    )}
 
-                  {Mode == 'Y' && (
-                    <div className="dateandandproductPRE">
-                      <Form.Item
-                        name="ProdList"
-                        rules={[
-                          {
-                            required: true,
-                            message: 'Please Enter Product',
-                          },
-                        ]}
-                      >
-                        <DropDowns
-                          defaultValue={selectedValue}
-                          options={CommonDataFilter?.map((option) => ({
-                            value: option?.ProdId,
-                            label: option?.ProdName,
-                            data: option,
-                          }))}
-                          label={<label>Product </label>}
-                          className="field-DropDown"
-                          onChangeFunction={(e) => ChangeProduct(e)}
-                          valueData={selectedValue}
-                          disabled={EditStatus ? true : false}
-                        />
-                      </Form.Item>
-
-                      <Form.Item
-                        name="Date"
-                        rules={[
-                          {
-                            required: Checked ? false : true,
-                            message: 'Please Enter Date',
-                          },
-                        ]}
-                      >
-                        <label style={{ fontWeight: '600' }}>Date : </label>
-                        <br />
-                        <br />
-                        <DatePicProd
-                          canSelectPast={true}
-                          onChange={wsPreOrderDate}
-                          valueData={WsPreorderDate}
-                          disabled={Checked}
-                          minDate={WSLastEntryDate}
-                        />
-                      </Form.Item>
-
-                      <p>
-                        All Days : &nbsp;{' '}
-                        <Checkbox onClick={(e) => Checking(e)} />{' '}
-                      </p>
-                      <div className="AllCustomerAlldays">
-                        <div className="searchAddDiv">
-                          <Search
-                            placeholder="Search"
-                            onSearch={onSearch}
-                            onSearchChange={onSearchChange}
+                    {Mode == 'Y' && (
+                      <div className="dateandandproductPRE">
+                        <Form.Item
+                          name="ProdList"
+                          rules={[
+                            {
+                              required: true,
+                              message: 'Please Enter Product',
+                            },
+                          ]}
+                        >
+                          <DropDowns
+                            defaultValue={selectedValue}
+                            options={CommonDataFilter?.map((option) => ({
+                              value: option?.ProdId,
+                              label: option?.ProdName,
+                              data: option,
+                            }))}
+                            label={<label>Product </label>}
+                            className="field-DropDown"
+                            onChangeFunction={(e) => ChangeProduct(e)}
+                            valueData={selectedValue}
+                            disabled={EditStatus ? true : false}
                           />
+                        </Form.Item>
+
+                        <Form.Item
+                          name="Date"
+                          rules={[
+                            {
+                              required: Checked ? false : true,
+                              message: 'Please Enter Date',
+                            },
+                          ]}
+                        >
+                          <label style={{ fontWeight: '600' }}>Date : </label>
+                          <br />
+                          <br />
+                          <DatePicProd
+                            canSelectPast={true}
+                            onChange={wsPreOrderDate}
+                            valueData={WsPreorderDate}
+                            disabled={Checked}
+                            minDate={WSLastEntryDate}
+                          />
+                        </Form.Item>
+
+                        <p>
+                          All Days : &nbsp;{' '}
+                          <Checkbox onClick={(e) => Checking(e)} />{' '}
+                        </p>
+                        <div className="AllCustomerAlldays">
+                          <div className="searchAddDiv">
+                            <Search
+                              placeholder="Search"
+                              onSearch={onSearch}
+                              onSearchChange={onSearchChange}
+                            />
+                          </div>
                         </div>
                       </div>
-                    </div>
-                  )}
-                </div>
-                {Mode == 'N' && (
-                  <div className="formDivS">
-                    <div
-                      style={{
-                        display: 'flex',
-                        flexDirection: 'column',
-                        flexWrap: 'wrap',
-                      }}
-                    >
-                      <div className="wspreorder-input1">
-                        <div className="inputForm">
-                          <Form.Item
-                            name="Customer"
-                            rules={[
-                              {
-                                required: true,
-                                message: 'Please Enter Customer',
-                              },
-                            ]}
+                    )}
+                  </div>
+                  {Mode == 'N' && (
+                    <div className="formDivS">
+                      <div
+                        style={{
+                          display: 'flex',
+                          flexDirection: 'column',
+                          flexWrap: 'wrap',
+                        }}
+                      >
+                        <div className="wspreorder-input1">
+                          <div className="inputForm">
+                            <Form.Item
+                              name="Customer"
+                              rules={[
+                                {
+                                  required: true,
+                                  message: 'Please Enter Customer',
+                                },
+                              ]}
+                            >
+                              <div className="customeraddcustomer">
+                                <DropDowns
+                                  defaultValue={SelectedCustomer}
+                                  options={customer?.map((option) => ({
+                                    value: option?.CustId,
+                                    label: option?.CustShortName
+                                      ? option?.CustShortName
+                                      : option?.CustName
+                                        ? option?.CustName
+                                        : option?.CustMobile,
+                                  }))}
+                                  label={
+                                    <label className="required">Customer</label>
+                                  }
+                                  className="field-DropDown"
+                                  onChangeFunction={(e) => ChangeCustomer(e)}
+                                  valueData={SelectedCustomer}
+                                  disabled={
+                                    formType == 'edit' || HigherorderComponents
+                                      ? true
+                                      : false
+                                  }
+                                />
+                                {!HigherorderComponents && (
+                                  <Tooltip title="Add Customer" placement="top">
+                                    <PozoAddCustomerIcon
+                                      className="BSBillingNav-icon-table-icon"
+                                      onClick={handleAddCustomer}
+                                      style={{
+                                        fontSize: '25px',
+                                        color: '#1292EE',
+                                      }}
+                                    />
+                                  </Tooltip>
+                                )}
+                              </div>
+                            </Form.Item>
+                          </div>
+                          <div
+                            style={{
+                              display: 'flex',
+                              flexDirection: 'row',
+                              alignItems: 'baseline',
+                              gap: '1rem',
+                              whiteSpace: 'nowrap',
+                            }}
                           >
-                            <div className="customeraddcustomer">
+                            <Form.Item
+                              name="Date"
+                              rules={[
+                                {
+                                  required: Checked ? false : true,
+                                  message: 'Please Enter Date',
+                                },
+                              ]}
+                            >
+                              <label style={{ fontWeight: '600' }}>
+                                Date :{' '}
+                              </label>
+                              <br />
+                              <br />
+                              <DatePicProd
+                                canSelectPast={true}
+                                onChange={wsPreOrderDate}
+                                valueData={WsPreorderDate}
+                                disabled={Checked}
+                                minDate={WSLastEntryDate}
+                              />
+                            </Form.Item>
+                            <p>All Days : </p>
+
+                            <Checkbox
+                              // checked={SelectData?.includes(record.UniqueId) ? true : false}
+                              onClick={(e) => Checking(e)}
+                              // disabled={(Object.keys(ReorderHoldDetails).length !== 0 && BookingType === "Dine In" && GlobalExtraCharge.some(item => item.ExtraChargeId === record.UniqueId)) ? true : false}
+                            />
+                          </div>
+                        </div>
+
+                        <div className="wspreorder-input1">
+                          <div>
+                            <Form.Item
+                              name="ProdList"
+                              rules={[
+                                {
+                                  required: true,
+                                  message: 'Please Enter Product',
+                                },
+                              ]}
+                            >
                               <DropDowns
-                                defaultValue={SelectedCustomer}
-                                options={customer?.map((option) => ({
-                                  value: option?.CustId,
-                                  label: option?.CustShortName
-                                    ? option?.CustShortName
-                                    : option?.CustName
-                                      ? option?.CustName
-                                      : option?.CustMobile,
+                                defaultValue={selectedValue}
+                                options={CommonDataFilter?.map((option) => ({
+                                  value: option?.ProdId,
+                                  label: option?.ProdName,
+                                  data: option,
                                 }))}
                                 label={
-                                  <label className="required">Customer</label>
+                                  <label className="required">Product</label>
                                 }
                                 className="field-DropDown"
-                                onChangeFunction={(e) => ChangeCustomer(e)}
-                                valueData={SelectedCustomer}
-                                disabled={
-                                  formType == 'edit' || HigherorderComponents
+                                onChangeFunction={(e) => ChangeProduct(e)}
+                                valueData={selectedValue}
+                                disabled={EditStatus ? true : false}
+                              />
+                            </Form.Item>
+                          </div>
+
+                          <div className="inputForm1">
+                            <Form.Item
+                              name="Size"
+                              rules={[
+                                {
+                                  validator: async (_, value) => {
+                                    await validateSafeInput(value); // To block HTML tags & SQL keywords
+                                    return Promise.resolve();
+                                  },
+                                },
+                              ]}
+                            >
+                              <InputField
+                                field="Size"
+                                value={size}
+                                label={<label>Requested Qty</label>}
+                                fieldState={true}
+                                type="number"
+                                fieldApi={true}
+                                autocomplete="off"
+                                onChange={handleMobileNumberChange}
+                                isOnChange={
+                                  formRef.current?.getFieldsValue()?.Size
                                     ? true
                                     : false
                                 }
                               />
-                              {!HigherorderComponents && (
-                                <Tooltip title="Add Customer" placement="top">
-                                  <PozoAddCustomerIcon
-                                    className="BSBillingNav-icon-table-icon"
-                                    onClick={handleAddCustomer}
-                                    style={{
-                                      fontSize: '25px',
-                                      color: '#1292EE',
-                                    }}
-                                  />
-                                </Tooltip>
-                              )}
-                            </div>
-                          </Form.Item>
-                        </div>
-                        <div
-                          style={{
-                            display: 'flex',
-                            flexDirection: 'row',
-                            alignItems: 'baseline',
-                            gap: '1rem',
-                            whiteSpace: 'nowrap',
-                          }}
-                        >
-                          <Form.Item
-                            name="Date"
-                            rules={[
-                              {
-                                required: Checked ? false : true,
-                                message: 'Please Enter Date',
-                              },
-                            ]}
-                          >
-                            <label style={{ fontWeight: '600' }}>Date : </label>
-                            <br />
-                            <br />
-                            <DatePicProd
-                              canSelectPast={true}
-                              onChange={wsPreOrderDate}
-                              valueData={WsPreorderDate}
-                              disabled={Checked}
-                              minDate={WSLastEntryDate}
-                            />
-                          </Form.Item>
-                          <p>All Days : </p>
 
-                          <Checkbox
-                            // checked={SelectData?.includes(record.UniqueId) ? true : false}
-                            onClick={(e) => Checking(e)}
-                            // disabled={(Object.keys(ReorderHoldDetails).length !== 0 && BookingType === "Dine In" && GlobalExtraCharge.some(item => item.ExtraChargeId === record.UniqueId)) ? true : false}
-                          />
-                        </div>
-                      </div>
-
-                      <div className="wspreorder-input1">
-                        <div>
-                          <Form.Item
-                            name="ProdList"
-                            rules={[
-                              {
-                                required: true,
-                                message: 'Please Enter Product',
-                              },
-                            ]}
-                          >
-                            <DropDowns
-                              defaultValue={selectedValue}
-                              options={CommonDataFilter?.map((option) => ({
-                                value: option?.ProdId,
-                                label: option?.ProdName,
-                                data: option,
-                              }))}
-                              label={
-                                <label className="required">Product</label>
-                              }
-                              className="field-DropDown"
-                              onChangeFunction={(e) => ChangeProduct(e)}
-                              valueData={selectedValue}
-                              disabled={EditStatus ? true : false}
-                            />
-                          </Form.Item>
-                        </div>
-
-                        <div className="inputForm1">
-                          <Form.Item
-                            name="Size"
-                            rules={[
-                              {
-                                validator: async (_, value) => {
-                                  await validateSafeInput(value); // To block HTML tags & SQL keywords
-                                  return Promise.resolve();
-                                },
-                              },
-                            ]}
-                          >
-                            <InputField
-                              field="Size"
-                              value={size}
-                              label={<label>Requested Qty</label>}
-                              fieldState={true}
-                              type="number"
-                              fieldApi={true}
-                              autocomplete="off"
-                              onChange={handleMobileNumberChange}
-                              isOnChange={
-                                formRef.current?.getFieldsValue()?.Size
-                                  ? true
-                                  : false
-                              }
-                            />
-
-                            <Form.Item className="kgsDD" name="UOM">
-                              <DropDowns
-                                options={UomData?.filter(
-                                  (item) => item.ActiveStatus === 'A'
-                                )?.map((option) => ({
-                                  value: option.ConfigId,
-                                  label: option.ConfigName,
-                                }))}
-                                onChangeFunction={(e) => UOMDropDownChange(e)}
-                                valueData={selectedUOM}
-                                disabled={editstate?.UOM ? true : false}
+                              <Form.Item className="kgsDD" name="UOM">
+                                <DropDowns
+                                  options={UomData?.filter(
+                                    (item) => item.ActiveStatus === 'A'
+                                  )?.map((option) => ({
+                                    value: option.ConfigId,
+                                    label: option.ConfigName,
+                                  }))}
+                                  onChangeFunction={(e) => UOMDropDownChange(e)}
+                                  valueData={selectedUOM}
+                                  disabled={editstate?.UOM ? true : false}
+                                />
+                              </Form.Item>
+                              <IoMdAddCircle
+                                style={{
+                                  fontSize: '1.5rem',
+                                  paddingTop: '8px',
+                                }}
+                                onClick={() => {
+                                  AddUomModalFun(true);
+                                }}
                               />
                             </Form.Item>
-                            <IoMdAddCircle
-                              style={{ fontSize: '1.5rem', paddingTop: '8px' }}
-                              onClick={() => {
-                                AddUomModalFun(true);
-                              }}
-                            />
-                          </Form.Item>
+                          </div>
+                          <div></div>
                         </div>
-                        <div></div>
-                      </div>
-                      <div className="submitButton1">
-                        <Buttons
-                          buttonText="ADD"
-                          color="901D77"
-                          icon={<IoMdAdd color="#ffffff" size={16} />}
-                        />
-                      </div>
-                    </div>
-
-                    <div className="reportTable">
-                      <div
-                        style={{
-                          color: '#000',
-                          fontSize: '14px',
-                          fontWeight: '600',
-                          overflow: 'hidden',
-                        }}
-                      >
-                        Preorder List
-                      </div>
-                      <div className="preorder-table">
-                        <Tables
-                          columns={columns}
-                          data={TableData}
-                          dataSource={TableData}
-                          pagination={handlePageChange}
-                          onChange={handleChange}
-                        />
-                      </div>
-                      <div className="PROCEEDTBN1">
-                        {TableData?.length > 0 && (
+                        <div className="submitButton1">
                           <Buttons
-                            buttonText="PROCEED"
-                            handleSubmit={handleFormSubmit}
-                          />
-                        )}
-                      </div>
-                    </div>
-                  </div>
-                )}
-                <>
-                  {Mode == 'Y' && (
-                    <div className="PreOrderFormWithCustomer">
-                      <div
-                        className="reportTable11"
-                        style={{
-                          height: WholeSalePreOrder
-                            ? '50vh'
-                            : HigherorderComponents
-                              ? '47vh'
-                              : '60vh',
-                        }}
-                      >
-                        <h3 className="headPreorderCustomer-Table">
-                          Listed Customers
-                        </h3>
-                        <Tables
-                          columns={columnswithCustomer}
-                          data={TableDatawithCustomer}
-                          dataSource={TableDatawithCustomer}
-                          pagination={handlePageChange}
-                          onChange={handleChange}
-                          rowSelection={rowSelection}
-                        />{' '}
-                      </div>
-                      {Mode == 'Y' && (
-                        <div className="PROCEEDTBN">
-                          <Buttons
-                            buttonText="PROCEED"
+                            buttonText="ADD"
                             color="901D77"
-                            icon={<ArrowRightOutlined />}
-                            //   handleSubmit={() => { HandleSelectedEst() }}
+                            icon={<IoMdAdd color="#ffffff" size={16} />}
                           />
                         </div>
-                      )}
+                      </div>
 
-                      <div className="reportTable112">
-                        {Mode == 'Y' && (
-                          <>
-                            <h3 className="headPreorderCustomer-Table">
-                              Today Listed Customers
-                            </h3>
-                            <Tables
-                              columns={SelectedPreorderCustomer}
-                              data={CUstomerName}
-                              dataSource={CUstomerName}
-                              pagination={handlePageChange1}
-                              onChange={handleChange}
+                      <div className="reportTable">
+                        <div
+                          style={{
+                            color: '#000',
+                            fontSize: '14px',
+                            fontWeight: '600',
+                            overflow: 'hidden',
+                          }}
+                        >
+                          Preorder List
+                        </div>
+                        <div className="preorder-table">
+                          <Tables
+                            columns={columns}
+                            data={TableData}
+                            dataSource={TableData}
+                            pagination={handlePageChange}
+                            onChange={handleChange}
+                          />
+                        </div>
+                        <div className="PROCEEDTBN1">
+                          {TableData?.length > 0 && (
+                            <Buttons
+                              buttonText="PROCEED"
+                              handleSubmit={handleFormSubmit}
                             />
-                          </>
-                        )}
+                          )}
+                        </div>
                       </div>
                     </div>
                   )}
-                </>
-                {Mode == 'Y' && (
-                  <div className="PROCEEDTBN-RES">
-                    <Buttons
-                      buttonText="PROCEED"
-                      color="901D77"
-                      icon={<ArrowRightOutlined />}
-                      //   handleSubmit={() => { HandleSelectedEst() }}
-                    />
-                  </div>
+                  <>
+                    {Mode == 'Y' && (
+                      <div className="PreOrderFormWithCustomer">
+                        <div
+                          className="reportTable11"
+                          style={{
+                            height: WholeSalePreOrder
+                              ? '50vh'
+                              : HigherorderComponents
+                                ? '47vh'
+                                : '60vh',
+                          }}
+                        >
+                          <h3 className="headPreorderCustomer-Table">
+                            Listed Customers
+                          </h3>
+                          <Tables
+                            columns={columnswithCustomer}
+                            data={TableDatawithCustomer}
+                            dataSource={TableDatawithCustomer}
+                            pagination={handlePageChange}
+                            onChange={handleChange}
+                            rowSelection={rowSelection}
+                          />{' '}
+                        </div>
+                        {Mode == 'Y' && (
+                          <div className="PROCEEDTBN">
+                            <Buttons
+                              buttonText="PROCEED"
+                              color="901D77"
+                              icon={<ArrowRightOutlined />}
+                              //   handleSubmit={() => { HandleSelectedEst() }}
+                            />
+                          </div>
+                        )}
+
+                        <div className="reportTable112">
+                          {Mode == 'Y' && (
+                            <>
+                              <h3 className="headPreorderCustomer-Table">
+                                Today Listed Customers
+                              </h3>
+                              <Tables
+                                columns={SelectedPreorderCustomer}
+                                data={CUstomerName}
+                                dataSource={CUstomerName}
+                                pagination={handlePageChange1}
+                                onChange={handleChange}
+                              />
+                            </>
+                          )}
+                        </div>
+                      </div>
+                    )}
+                  </>
+                  {Mode == 'Y' && (
+                    <div className="PROCEEDTBN-RES">
+                      <Buttons
+                        buttonText="PROCEED"
+                        color="901D77"
+                        icon={<ArrowRightOutlined />}
+                        //   handleSubmit={() => { HandleSelectedEst() }}
+                      />
+                    </div>
+                  )}
+                </Form>
+                {AddUomModalOpen && (
+                  <AddUOMPreorder
+                    AddsuppOpen={AddUomModalOpen}
+                    HandleModalClose={() => AddUomModalFun(false)}
+                  />
                 )}
-              </Form>
-              {AddUomModalOpen && (
-                <AddUOMPreorder
-                  AddsuppOpen={AddUomModalOpen}
-                  HandleModalClose={() => AddUomModalFun(false)}
-                />
-              )}
+              </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
+    </Suspense>
   );
 };
 

src/Pages/paymentpdfPage/PaymentPdfBooking.jsx

@@ -1,37 +1,67 @@
-import React, { useEffect, useState } from 'react';
+import React, { lazy, useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import moment from 'moment';
 import {
-  dateFormatChange,
   dateFormatChange1,
   extractLastNumber,
   extractLastNumberOrderId,
   getSession,
 } from '../../Services/Others';
-import {
-  ApplicationPreferences,
-  getBranchDetail,
-} from '../../Features/BrachLogin/BranchLogin';
-import PrintStyle1 from '../BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle1';
-import PrintStyle2 from '../BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle2';
-import PrintStyle3 from '../BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle3';
-import PrintStyle4 from '../BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle4';
-import PrintStyle5 from '../BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle5';
-import PrintStyle6 from '../BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle6';
-import PrintStyle7 from '../BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle7';
-import PrintStyle8 from '../BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle8';
-import PrintStyle9 from '../BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle9';
-import PrintStyle10 from '../BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle10';
-import PrintStyle11 from '../BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle11';
-import PrintStyle12 from '../BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle12';
+import { ApplicationPreferences } from '../../Features/BrachLogin/BranchLogin.js';
 import { SelectedPrintTemplate } from '../../Features/ThemeChange/ThemeChange';
-import PrintA4Style11 from '../BookingScreen/PrintTemplates/A4/PrintA4Style11';
-import PrintA5Style11 from '../BookingScreen/PrintTemplates/A4/PrintStyleA5';
-import A4Standard from '../BookingScreen/PrintTemplates/A4/A4Standard';
-import TaxInvoice from '../BookingScreen/PrintTemplates/A4/TaxInvoice';
-import { settingDataSelector } from '../../Features/PreferenceMaster/PreferenceMaster';
-import { PreferenceData } from '../../Features/BookingScreen/BookingData/BookingData';
+import { PreferenceData } from '../../Features/BookingScreen/BookingData/BookingData.js';
 
+// js Files
+const PrintStyle1 = lazy(
+  () => import('../BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle1.jsx')
+);
+const PrintStyle2 = lazy(
+  () => import('../BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle2.jsx')
+);
+const PrintStyle3 = lazy(
+  () => import('../BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle3.jsx')
+);
+const PrintStyle4 = lazy(
+  () => import('../BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle4.jsx')
+);
+const PrintStyle5 = lazy(
+  () => import('../BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle5.jsx')
+);
+const PrintStyle6 = lazy(
+  () => import('../BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle6.jsx')
+);
+const PrintStyle7 = lazy(
+  () => import('../BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle7.jsx')
+);
+const PrintStyle8 = lazy(
+  () => import('../BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle8.jsx')
+);
+const PrintStyle9 = lazy(
+  () => import('../BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle9.jsx')
+);
+const PrintStyle10 = lazy(
+  () =>
+    import('../BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle10.jsx')
+);
+const PrintStyle11 = lazy(
+  () =>
+    import('../BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle11.jsx')
+);
+const PrintStyle12 = lazy(
+  () =>
+    import('../BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle12.jsx')
+);
+const PrintA4Style11 = lazy(
+  () => import('../BookingScreen/PrintTemplates/A4/PrintA4Style11.jsx')
+);
+const PrintA5Style11 = lazy(
+  () => import('../BookingScreen/PrintTemplates/A4/PrintStyleA5.jsx')
+);
+const A4Standard = lazy(
+  () => import('../BookingScreen/PrintTemplates/A4/A4Standard.jsx')
+);
+const TaxInvoice = lazy(
+  () => import('../BookingScreen/PrintTemplates/A4/TaxInvoice.jsx')
+);
 const PaymentPdfBooking = ({
   index,
   orderId,
@@ -49,7 +79,7 @@ const PaymentPdfBooking = ({
   let PaymentStatusSuccess = PaymentStatus?.filter(
     (ps) => ps.PaymentStatus === 'S'
   );
-  const isEditedBill = PaymentStatus?.some(payment => {
+  const isEditedBill = PaymentStatus?.some((payment) => {
     const type = payment?.AdjustmentType?.toLowerCase();
     return (
       (type === 'extra' || type === 'refund') &&
@@ -59,8 +89,11 @@ const PaymentPdfBooking = ({
   });
   const lastTransaction = PaymentStatus?.find(
     (ps) => ps.PaymentStatus === 'S' && ps?.LastOrderTran === 'Y'
-  )
-  console.log(singleData2?.filter(data => data?.EditTokenAvailable !== 'N'), "singleData2")
+  );
+  console.log(
+    singleData2?.filter((data) => data?.EditTokenAvailable !== 'N'),
+    'singleData2'
+  );
   const ExtraChargeTotal = table2Data?.ExtraChargeDetails?.reduce(
     (accumulator, currentObject) => {
       return accumulator + currentObject.TotalAmt;
@@ -92,7 +125,7 @@ const PaymentPdfBooking = ({
   const [BranchZip, setBranchZip] = useState();
   const CashierName = getSession('userName');
   const printerTemplateStyle = useSelector(SelectedPrintTemplate);
-  console.log(printerTemplateStyle, "printerTemplateStyle")
+  console.log(printerTemplateStyle, 'printerTemplateStyle');
   const appPreferences = useSelector(ApplicationPreferences);
   const SettingData = useSelector(PreferenceData);
   const estimatePrintHeader =
@@ -369,8 +402,8 @@ const PaymentPdfBooking = ({
                     {table2Data?.AddressDetails?.[0]?.City &&
                       table2Data?.AddressDetails?.[0]?.Zip &&
                       table2Data?.AddressDetails?.[0]?.City +
-                      '- ' +
-                      table2Data?.AddressDetails?.[0]?.Zip}
+                        '- ' +
+                        table2Data?.AddressDetails?.[0]?.Zip}
                   </p>
                 )}
 
@@ -386,9 +419,17 @@ const PaymentPdfBooking = ({
                     GSTIN: {table2Data?.BrGSTIN}
                   </p>
                 )}
-                {table2Data?.BrMobile && <p style={{ fontSize: '9px', margin: '7px 0 0 0', padding: 0 }}>
-                  Mobile:+91 {table2Data?.BrMobile}
-                </p>}
+                {table2Data?.BrMobile && (
+                  <p
+                    style={{
+                      fontSize: '9px',
+                      margin: '7px 0 0 0',
+                      padding: 0,
+                    }}
+                  >
+                    Mobile:+91 {table2Data?.BrMobile}
+                  </p>
+                )}
               </div>
             </div>
           </div>
@@ -540,27 +581,27 @@ const PaymentPdfBooking = ({
                               &nbsp;
                               {item?.ProductIdentifierDtls?.length > 0
                                 ? item?.ProductIdentifierDtls.filter(
-                                  (items) =>
-                                    items.SerialNumber &&
-                                    items.SerialNumber !== ''
-                                ).map((a, i) => (
-                                  <div key={i}>{a.SerialNumber}</div>
-                                ))
+                                    (items) =>
+                                      items.SerialNumber &&
+                                      items.SerialNumber !== ''
+                                  ).map((a, i) => (
+                                    <div key={i}>{a.SerialNumber}</div>
+                                  ))
                                 : ''}
                               {item?.ProductIdentifierDtls?.length > 0
                                 ? item?.ProductIdentifierDtls.filter(
-                                  (id) => id.IMEI1 !== '' || id.IMEI2 !== ''
-                                ).map((id, i) => {
-                                  const imei1 = id.IMEI1 || '';
-                                  const imei2 = id.IMEI2 || '';
-                                  return (
-                                    <div key={i}>
-                                      {[imei1, imei2]
-                                        .filter(Boolean)
-                                        .join(',')}
-                                    </div>
-                                  );
-                                })
+                                    (id) => id.IMEI1 !== '' || id.IMEI2 !== ''
+                                  ).map((id, i) => {
+                                    const imei1 = id.IMEI1 || '';
+                                    const imei2 = id.IMEI2 || '';
+                                    return (
+                                      <div key={i}>
+                                        {[imei1, imei2]
+                                          .filter(Boolean)
+                                          .join(',')}
+                                      </div>
+                                    );
+                                  })
                                 : ''}
                             </span>
                           </div>
@@ -577,25 +618,25 @@ const PaymentPdfBooking = ({
                             &nbsp;
                             {item?.ProductIdentifierDtls?.length > 0
                               ? item?.ProductIdentifierDtls.filter(
-                                (items) =>
-                                  items.SerialNumber &&
-                                  items.SerialNumber !== ''
-                              ).map((a, i) => (
-                                <div key={i}>{a.SerialNumber}</div>
-                              ))
+                                  (items) =>
+                                    items.SerialNumber &&
+                                    items.SerialNumber !== ''
+                                ).map((a, i) => (
+                                  <div key={i}>{a.SerialNumber}</div>
+                                ))
                               : ''}
                             {item?.ProductIdentifierDtls?.length > 0
                               ? item?.ProductIdentifierDtls.filter(
-                                (id) => id.IMEI1 !== '' || id.IMEI2 !== ''
-                              ).map((id, i) => {
-                                const imei1 = id.IMEI1 || '';
-                                const imei2 = id.IMEI2 || '';
-                                return (
-                                  <div key={i}>
-                                    {[imei1, imei2].filter(Boolean).join(',')}
-                                  </div>
-                                );
-                              })
+                                  (id) => id.IMEI1 !== '' || id.IMEI2 !== ''
+                                ).map((id, i) => {
+                                  const imei1 = id.IMEI1 || '';
+                                  const imei2 = id.IMEI2 || '';
+                                  return (
+                                    <div key={i}>
+                                      {[imei1, imei2].filter(Boolean).join(',')}
+                                    </div>
+                                  );
+                                })
                               : ''}
                           </span>
                         )}
@@ -819,25 +860,40 @@ const PaymentPdfBooking = ({
                         <table style={{ width: '90%' }}>
                           <tr>
                             <td
-                              style={{ fontSize: '10px', textAlign: 'center' }}
+                              style={{
+                                fontSize: '10px',
+                                textAlign: 'center',
+                              }}
                             ></td>
                             <td
-                              style={{ fontSize: '10px', textAlign: 'center' }}
+                              style={{
+                                fontSize: '10px',
+                                textAlign: 'center',
+                              }}
                             >
                               Taxable Amount
                             </td>
                             <td
-                              style={{ fontSize: '10px', textAlign: 'center' }}
+                              style={{
+                                fontSize: '10px',
+                                textAlign: 'center',
+                              }}
                             >
                               CGST
                             </td>
                             <td
-                              style={{ fontSize: '10px', textAlign: 'center' }}
+                              style={{
+                                fontSize: '10px',
+                                textAlign: 'center',
+                              }}
                             >
                               SGST
                             </td>
                             <td
-                              style={{ fontSize: '10px', textAlign: 'center' }}
+                              style={{
+                                fontSize: '10px',
+                                textAlign: 'center',
+                              }}
                             >
                               Total Amount
                             </td>
@@ -845,7 +901,10 @@ const PaymentPdfBooking = ({
                           {OrderDetailGST?.map((item) => (
                             <tr>
                               <td
-                                style={{ fontSize: '10px', textAlign: 'right' }}
+                                style={{
+                                  fontSize: '10px',
+                                  textAlign: 'right',
+                                }}
                               >
                                 {item?.TaxPercentage} %
                               </td>
@@ -1137,7 +1196,7 @@ const PaymentPdfBooking = ({
           ></div>
         )}
 
-        {(PaymentStatusSuccess?.length > 1 && !isEditedBill) && (
+        {PaymentStatusSuccess?.length > 1 && !isEditedBill && (
           <>
             {/* <p>Split Payment:</p> */}
             {Object.keys(aggregatedPayments)?.map((paymentType) => (
@@ -1151,21 +1210,30 @@ const PaymentPdfBooking = ({
           </>
         )}
         {isEditedBill && lastTransaction && (
-          <div style={{
-            width: '90%', marginTop: '2px',
-            marginLeft: '10px',
-            paddingTop: '2px', display: 'flex', justifyContent: 'center', alignItems: 'center',
-            flexDirection: 'column', borderTop: '1px dashed #ccc'
-          }}>
+          <div
+            style={{
+              width: '90%',
+              marginTop: '2px',
+              marginLeft: '10px',
+              paddingTop: '2px',
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+              flexDirection: 'column',
+              borderTop: '1px dashed #ccc',
+            }}
+          >
             <div
               style={{
                 fontSize: '12px',
-                width: '70%'
+                width: '70%',
               }}
             >
               <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                 <span style={{ color: '#333' }}>Bill Gross Amount</span>
-                <strong>{(lastTransaction?.BeforeAdjustment || 0).toFixed(2)}</strong>
+                <strong>
+                  {(lastTransaction?.BeforeAdjustment || 0).toFixed(2)}
+                </strong>
               </div>
               <div
                 style={{
@@ -1182,13 +1250,17 @@ const PaymentPdfBooking = ({
                 <span>{'Adjustment Amount'}</span>
                 <span>
                   {lastTransaction?.AdjustmentType === 'REFUND' ? '-' : '+'}
-                  {Math.abs((lastTransaction?.BeforeAdjustment ?? 0) -
-  (lastTransaction?.AfterAdjustment ?? 0)).toFixed(2)}
+                  {Math.abs(
+                    (lastTransaction?.BeforeAdjustment ?? 0) -
+                      (lastTransaction?.AfterAdjustment ?? 0)
+                  ).toFixed(2)}
                 </span>
               </div>
               <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                 <span style={{ color: '#333' }}>Net Bill Amount</span>
-                <strong>{(lastTransaction?.AfterAdjustment || 0).toFixed(2)}</strong>
+                <strong>
+                  {(lastTransaction?.AfterAdjustment || 0).toFixed(2)}
+                </strong>
               </div>
             </div>
           </div>
@@ -1653,20 +1725,22 @@ const PaymentPdfBooking = ({
 
       {/* Token print */}
       {Object.entries(
-        singleData2?.filter(data => data?.EditTokenAvailable !== 'N')?.reduce((acc, item, idx) => {
-          if (item.TokenAvailable === 'Y') {
-            if (!item.CounterName) {
-              // For null or empty CounterName, print each item individually
-              acc[`individual-${idx}-${item.ProdId}`] = [item];
-            } else {
-              if (!acc[item.CounterName]) {
-                acc[item.CounterName] = [];
+        singleData2
+          ?.filter((data) => data?.EditTokenAvailable !== 'N')
+          ?.reduce((acc, item, idx) => {
+            if (item.TokenAvailable === 'Y') {
+              if (!item.CounterName) {
+                // For null or empty CounterName, print each item individually
+                acc[`individual-${idx}-${item.ProdId}`] = [item];
+              } else {
+                if (!acc[item.CounterName]) {
+                  acc[item.CounterName] = [];
+                }
+                acc[item.CounterName].push(item); // Group by CounterName
               }
-              acc[item.CounterName].push(item); // Group by CounterName
             }
-          }
-          return acc;
-        }, {})
+            return acc;
+          }, {})
       ).map(([counterName, items], index) => (
         <div style={{ display: 'none' }} key={index}>
           <div
@@ -1696,9 +1770,21 @@ const PaymentPdfBooking = ({
                   <tr className="Re-print-body-Tr" key={idx}>
                     <td className="Re-print-td">{idx + 1}</td>
                     <td className="Re-print-body-Product">{item.ProdName}</td>
-                    <td className="Re-print-body-Rate">{item?.EditTokenAvailable === 'Y' ? item?.EditTokenQty : item.SalesQty}</td>
+                    <td className="Re-print-body-Rate">
+                      {item?.EditTokenAvailable === 'Y'
+                        ? item?.EditTokenQty
+                        : item.SalesQty}
+                    </td>
                     <td className="Re-print-body-Rate">{item.Rate}</td>
-                    <td className="Re-print-body-Rate">{((item?.EditTokenAvailable === 'Y' ? item?.EditTokenQty : item.SalesQty) * item.Rate) - ((item?.EditTokenAvailable === 'Y' ? (item?.OfferAmt / item?.EditTokenQty) : item?.OfferAmt))}</td>
+                    <td className="Re-print-body-Rate">
+                      {(item?.EditTokenAvailable === 'Y'
+                        ? item?.EditTokenQty
+                        : item.SalesQty) *
+                        item.Rate -
+                        (item?.EditTokenAvailable === 'Y'
+                          ? item?.OfferAmt / item?.EditTokenQty
+                          : item?.OfferAmt)}
+                    </td>
                   </tr>
                 ))}
               </tbody>

src/ProtectedRoutes.jsx

@@ -11,9 +11,14 @@ import {
   getCommonAppPreference,
 } from './Features/BrachLogin/BranchLogin.js';
 import { clearSession, getSession } from './Services/Others';
-import { FeatureAddon } from './Features/BookingScreen/BookingData/BookingData.js';
+import {
+  FeatureAddon,
+  GlobalFeatAddOnData,
+} from './Features/BookingScreen/BookingData/BookingData.js';
 import { Suspense } from 'react';
 import { gettableData } from './Features/PreferenceMaster/PreferenceMaster.js';
+import { useSelector } from 'react-redux';
+import { useTemplate } from './utils/useTemplate.js';
 
 const commonUrl = import.meta.env.ENV_COMMON_BASE_URL;
 const subDirectory = import.meta.env.BASE_URL;
@@ -29,6 +34,8 @@ const ProtectedRoutes = ({ routesConfig }) => {
   const UserId = getSession('UserId');
   const sessionId = getSession('SessionId');
   const [accessCheckComplete, setAccessCheckComplete] = useState(false);
+  const FeatureAddonData = useSelector(GlobalFeatAddOnData);
+  useTemplate(CompId, BranchId, AppId);
 
   useEffect(() => {
     getApplicationPreference();
@@ -262,14 +269,18 @@ const ProtectedRoutes = ({ routesConfig }) => {
         let featureAddonData;
 
         if (UserType !== 'Super Admin' && UserType !== 'Super Admin User') {
-          featureAddon = await dispatch(
-            FeatureAddon({ AppId: AppId, UserId: UserId })
-          ).unwrap();
-          if (featureAddon?.data?.statusCode === 1) {
-            featureAddonData =
-              featureAddon?.data?.data?.[0]?.FeatAddonHdr?.[0]?.FeatureDtls;
+          if (FeatureAddonData?.FeatureDtls?.length > 0) {
+            featureAddonData = FeatureAddonData?.FeatureDtls;
           } else {
-            featureAddonData = [];
+            featureAddon = await dispatch(
+              FeatureAddon({ AppId: AppId, UserId: UserId })
+            ).unwrap();
+            if (featureAddon?.data?.statusCode === 1) {
+              featureAddonData =
+                featureAddon?.data?.data?.[0]?.FeatAddonHdr?.[0]?.FeatureDtls;
+            } else {
+              featureAddonData = [];
+            }
           }
         }
 
@@ -277,7 +288,7 @@ const ProtectedRoutes = ({ routesConfig }) => {
         let shouldNavigate = false;
 
         // Find the current route in routesConfig based on currentPath
-        const currentRoute = routesConfig.find((route) => {
+        const currentRoute = routesConfig?.find((route) => {
           if (route.path === currentPath) return true;
           if (route.children) {
             return route.children.some((child) => {
@@ -303,7 +314,7 @@ const ProtectedRoutes = ({ routesConfig }) => {
           currentRoute,
           currentPath
         );
-        console.log('empAccessData', empAccessData);
+
         const checkPreferenceAccessData = ['Dine In', 'KOT', 'Estimate'];
         const checkPlanAccessData = [
           'Product Catalogue',

src/useSubscriptionManager.js

@@ -6,9 +6,13 @@ import {
   getAppSubscriptionDate,
 } from './Features/BookingScreen/BookingData/BookingData.js';
 import { sendSms } from './Features/Payment/PaymentDetails/PaymentDetails.js';
+import {
+  getPurchasedAppDetails,
+  postInvoice,
+} from './Features/BookingScreen/Pricing/Pricing.js';
 import { getSession } from './Services/Others.js';
 import { useNavigate } from 'react-router-dom';
-const subDirectory = import.meta.env.ENV_BASE_URL;
+
 const useSubscriptionManager = (sessionData, logout) => {
   const dispatch = useDispatch();
   const navigate = useNavigate();
@@ -17,10 +21,13 @@ const useSubscriptionManager = (sessionData, logout) => {
   const [extendModel, setExtendModel] = useState(false);
   const handleCancel = () => {
     logout();
-    setExtendModel(false)
-
-  }
- 
+    setExtendModel(false);
+  };
+  const handlePay = () => {
+    setExtendModel(false);
+    let AppName = getSession('AppName');
+    navigate(`${subDirectory}PricingPage`, { state: { AppName: AppName } });
+  };
   function formatDate(date) {
     const year = date.getFullYear();
     const month = String(date.getMonth() + 1).padStart(2, '0');
@@ -33,8 +40,71 @@ const useSubscriptionManager = (sessionData, logout) => {
     return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}.${milliseconds}`;
   }
 
-  
- 
+  function addDays(dateString, days) {
+    // Make it ISO-safe for iOS / WebView
+    const isoDate = dateString.replace(' ', 'T');
+    const currentDate = new Date(isoDate);
+
+    currentDate.setDate(currentDate.getDate() + Number(days));
+
+    return formatDate(currentDate);
+  }
+
+  // ---------------- MAIN FUNCTION ----------------
+  const freeExtend = async () => {
+    try {
+      const UserId = getSession('UserId');
+      const AppId = getSession('AppId');
+      // Current date
+      const now = new Date();
+      const currentDate = formatDate(now);
+
+      // 1️⃣ Get purchased app details
+      const response1 = await dispatch(
+        getPurchasedAppDetails({ AppId, UserId })
+      ).unwrap();
+
+      const PurchasedDetails = response1?.data?.data;
+
+      if (!PurchasedDetails || !PurchasedDetails.length) {
+        console.error('No purchased details found');
+        return;
+      }
+
+      // 2️⃣ Prepare post data
+      const postData = {
+        UserId: UserId,
+        AppId: AppId,
+        PricingId: PurchasedDetails[0]?.PricingId,
+        PurDate: currentDate,
+        NoofDays: 30,
+        PaymentMode: 27,
+        PaymentStatus: 'S',
+        LicenseStatus: PurchasedDetails[0]?.LicenseStatus,
+        Price: PurchasedDetails[0]?.Price ?? 0,
+        TaxId: PurchasedDetails[0]?.TaxId ?? 0,
+        NetPrice: PurchasedDetails[0]?.ExistingPlanNetPrice ?? 0,
+        ValidityStart: currentDate,
+        ValidityEnd: addDays(currentDate, PurchasedDetails[0]?.NoOfDays),
+        CreatedBy: UserId,
+        TaxAmount: PurchasedDetails[0]?.TaxAmount ?? 0,
+        MobileNo: getSession('MobileNo'),
+        MailId: 'ts@gmmail.com',
+        Type: 'FreeExtend',
+      };
+
+      // 3️⃣ Post invoice
+      const response = await dispatch(postInvoice(postData)).unwrap();
+
+      // 4️⃣ Send SMS if required
+      if (response?.data?.statusCode === 1 && response?.data?.SMSbody) {
+        await dispatch(sendSms({ body: response.data.SMSbody }));
+        setExtendModel(false);
+      }
+    } catch (error) {
+      console.error('freeExtend error:', error);
+    }
+  };
   useEffect(() => {
     if (!sessionData) return;
 
@@ -62,23 +132,20 @@ const useSubscriptionManager = (sessionData, logout) => {
           expData.RemainingSeconds < 1 &&
           UserType !== 'Super Admin'
         ) {
-
           if (
-            (UserType !== 'Super Admin' ||
-              UserType !== 'Super Admin User') && (expData?.PlanType?.toLowerCase() == "extend expired")
+            (UserType !== 'Super Admin' || UserType !== 'Super Admin User') &&
+            expData?.PlanType?.toLowerCase() == 'extend expired'
           ) {
             console.log('Subscription expired, logging out...');
             alert('Subscription expired');
             logout();
-          }
-          else if (
-            (UserType !== 'Super Admin' ||
-              UserType !== 'Super Admin User') && (expData?.PlanType?.toLowerCase() == "plan expired")
+          } else if (
+            (UserType !== 'Super Admin' || UserType !== 'Super Admin User') &&
+            expData?.PlanType?.toLowerCase() == 'plan expired'
           ) {
-            setExtendModel(true)
+            setExtendModel(true);
           }
         }
-
       }
     };
 
@@ -87,7 +154,7 @@ const useSubscriptionManager = (sessionData, logout) => {
     return () => clearInterval(interval);
   }, [sessionData]);
 
-  return { remainingDays, handleCancel,extendModel,setExtendModel };
+  return { remainingDays, handleCancel, handlePay, freeExtend, extendModel };
 };
 
 export default useSubscriptionManager;

src/utils/useTemplate.js

@@ -0,0 +1,18 @@
+import { useEffect } from 'react';
+import { useDispatch } from 'react-redux';
+import { getTemplate } from '../Features/ThemeChange/ThemeChange.js';
+
+export const useTemplate = (CompId, BranchId, AppId) => {
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    const fetchTemplate = async () => {
+      try {
+        await dispatch(getTemplate({ CompId, BranchId, AppId })).unwrap();
+      } catch (error) {
+        console.error('Failed to fetch template:', error);
+      }
+    };
+    fetchTemplate();
+  }, [dispatch, CompId, BranchId, AppId]);
+};