Android_Retail/src/Pages/BookingScreen/Components/BSBillingTables/BSBillingTable2/BSBillingTable2.jsx

import React, {
  useCallback,
  useEffect,
  useState,
  useRef,
  lazy,
  Suspense,
} from 'react';
import { shallowEqual, useDispatch, useSelector } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import moment from 'moment';
import { Badge, Popover, Modal, Tooltip } from 'antd';
import {
  ArrowRightOutlined,
  UpCircleOutlined,
  UpOutlined,
} from '@ant-design/icons';
import { BsPauseFill } from 'react-icons/bs';
import { AiOutlineClose } from 'react-icons/ai';
import paygate from '../../../../../Images/paygate.png';
import defaultupi from '../../../../../Images/defaultupi.png';
import paydevice from '../../../../../Images/paydevice.png';
import { Tables } from '../../../../../Components/Tables/Table';
import {
  printDiv,
  extractLastNumberOrderId,
  encryptObject,
} from '../../../../../Services/Others';
import { Messages } from '../../../../../Components/Notifications/Messages';
import { DefaultModal } from '../../../../../Components/Modal/DefaultModal.jsx';
import {
  GlobalSelectedFont,
  getTemplateData,
  SelectedPrintTemplate,
  StoredSessionData,
  GlobalprintDatas,
  GlobalPrinterMappingDtls,
  getPrinterMappingDetails,
  getPrintSelectionComponentData,
} from '../../../../../Features/ThemeChange/ThemeChange';
import { PrintStyleFunction } from '../../../../paymentpdfPage/PrintStyleFunction.js';
import {
  GlobalOrderCardDetails,
  changeOrderCardDetails,
  GlobalCustId,
  PostBookingData,
  GlobalSelectedTableDetails,
  GlobalBookingType,
  changeBookingType,
  getConfigType,
  PutBookingData,
  GlobalReorderHoldDetails,
  getUnpaidData,
  changeReorderHoldDetails,
  ChangeNavHoldData,
  GlobalNavHoldData,
  getSelectedFavItems,
  GlobalProductSubCategorie,
  getCardDataWithoutSub,
  getCardDataWithoutSubmodule,
  GlobalProductCategorie,
  changeSelectedCustId,
  GlobalSelCustId,
  GlobalSelOption,
  changeSelectedOption,
  getLayoutproductCard,
  changeCustomerID,
  changeUnpaidData,
  ChangeSelectedCustDisable,
  getSalesDetailData,
  GlobalSelectedCustDisable,
  SendPaymentLink,
  changeSummeryTotalAmount,
  changeSummeryTotalItems,
  changeSummeryTotalWithoutTaxAmount,
  changeSummeryTotalTaxAmount,
  GlobalExpDateforHeight,
  changeSummeryQty,
  changeUpiIDprint,
  GlobalEstimateBooking,
  GlobalSelProdWiseEst,
  changeSelProdWiseEst,
  GlobalUpiIDprint,
  GlobalUpiIDName,
  GlobalUpiIDoptionId,
  GlobalBookingTypeBoth,
  changeSelectTable,
  changeSelectChair,
  changeSelectedTableDetails,
  changeReorderProductDetails,
  GlobalCommonPaymentOptions,
  changeUpiIDoptionId,
  changeUpiIDName,
  PostPaymentdevice,
  GetPaymentdeviceResponse,
  PutBookingPaymentStatusChange,
  changePaymentloader,
  GlobalPayementloader,
  changePaymentTransactionNumber,
  Globalunpaidflow,
  changeunpaidflow,
  PutPendingPaymentList,
  ChangeInitialPaymentName,
  PreferenceData,
  changeOrderType,
  GlobalOrderType,
  GlobalFailedTotalAmt,
  putSplitpaymentStatus,
  GlobalOverAllDiscEstimate,
  GlobalOverAllDiscSales,
  ChangeOverAllDiscSales,
  ChangeOverAllDiscEstimate,
  PaymentGatewayGetdetail,
  GlobalUnpaidListData,
  getAllCustomer,
  GlobalBranchFinancialStatus,
  changeSummeryComboOfferAmount,
  ChangeComboCarddata,
  GlobaltipAmount,
  changeTipAmount,
  GlobalOtherSevices,
  GlobalOtherServiceTicketClaim,
  changeOtherServiceTicketClaim,
  GlobalRetailWSSalesType,
  GlobalDefaultBookingType,
  GlobalPaymentTrigger,
  GlobalCurrentOrderId,
  changeCurrentOrderId,
  GlobalCombocarddata,
  getCreditCustomer,
  GlobalSalesBillEdit,
  GlobalPreviousOrderPayment,
  GlobalPreviousOrderOfferDetails,
  GlobalpaymentOptionData,
  getPaymentOptions,
  putSalesBillEdit,
  changeBillEditingMode,
  changePreviousOrderPayment,
  changePreviousOrderOfferDetail,
} from '../../../../../Features/BookingScreen/BookingData/BookingData.js';
import {
  ChangeFullFreeProductList,
  changeFullOfferAppliedProducts,
  changeLoyaltyConsumedQuantities,
  GlobalFreeProdList,
  GlobalOfferAppliedProducts,
  GlobalOverAllOfferAmt,
} from '../../../../../Features/Offer/Offernew/BookingOffernew.js';
import {
  gettinghold,
  globalholddata,
  changeholddata,
} from '../../../../../Features/BookingScreen/HoldOption/HoldOption';
import { ChangeTotalAmount } from '../../../../../Features/ExteraCharges/ExtraCharges.js'; //Shifayath Date:27/12/2023
import { globalExtraTotalAmount } from '../../../../../Features/ExteraCharges/ExtraCharges';
import {
  getAddCustomerDetails,
  getDefaultPaymentOptions,
  GlobalAddCustomerDetails,
  ReprintDetails,
  triggerCustomerRefresh,
} from '../../../../../Features/BookingScreen/Customer/addCustomer.js';
import TooltipWrapper from '../../../../../Components/Tooltip/Tooltip';
import '../../../../../Styles/BookingScreen/Components/BSBillingTables/BSBillingTable2/BSBIllingTable2.scss';
import PozoHoldIcon from '../../UtillComponents/Pozo retail icons/PozoHoldIcon';
import PozoUnpaidIcon from '../../UtillComponents/Pozo retail icons/PozoUnpaidIcon.jsx';
import PozoAdvanceIcon from '../../UtillComponents/Pozo retail icons/PozoAdvanceIcon.jsx';
import PozoBillIcon from '../../UtillComponents/Pozo retail icons/PozoBIllIcon.jsx';
import PozoAddCustomerIcon from '../../UtillComponents/Pozo retail icons/PozoAddCustomerIcon';
import Buttons from '../../../../../Components/Forms/Buttons';
import WpIcon from '../../../../../Images/message.png';
import { isMobile } from 'react-device-detect';
import { settingDataSelector } from '../../../../../Features/PreferenceMaster/PreferenceMaster.js';
import CountUp from 'react-countup';
import { GlobalpreOrderOpen } from '../../../../../Features/BookingScreen/PreOrder/PreOrder.js';
import { getCustomerDisplayWindow } from '../../../../../Features/customerDisplayWindow/customerDisplayWindow.js';
import { getEmpAccess } from '../../../../../Features/AppPage/CenterPage.js';
import PozoSplitPaymentIcon from '../../UtillComponents/Pozo retail icons/PozoSplitPaymentIcon.jsx';
import PozoCartIcon from '../../../../../Pages/BookingScreen/Components/UtillComponents/PozoCartIcon.jsx';
import {
  Global_CoupenCodeAmount,
  Global_loyaltyPointsDiscountAmount,
  Global_OrderOfferDetail,
  Global_OverallOfferAmount,
  Global_SalesWiseOfferAmount,
} from '../../../../../Features/Offer/Offer.js';
import { useDateStore } from '../../../../../Features/BookingScreen/BookingData/DateStore.js';
import { useAuth } from '../../../../../AuthContext.jsx';
import { useApplyOfferto_CardDetail } from '../../UtillComponents/BSNavBarOffer/BSNavBarOffer_CustomHooks.jsx';
import { GlobalBookingStatus } from '../../../../../Features/Payment/PaymentReceivedRetail/PaymentReceivedRetail.js';
import {
  changeSalesPaymentoption,
  getPaymentOptionsData,
  GlobalSalesPaymentoption,
} from '../../../../../Features/Payment/Paymentoptions/Paymentoptions.js';
import { getCombolist } from '../../../../../Features/ComboMaster/ComboMaster.js';
import { MdSms } from 'react-icons/md';
import { FaWhatsapp, FaPrint, FaCartPlus } from 'react-icons/fa';
import { ApplicationPreferences } from '../../../../../Features/BrachLogin/BranchLogin.js';
import { PostOtherServices } from '../../../../../Features/OtherServices/OtherServices.js';
import { TfiClipboard } from 'react-icons/tfi';
import { PublicQrCodepost } from '../../../../../Features/ConfigMasterPage/ConfigMasterPage.js';
import CardPopover from '../StandardTable/Utils/CardPopover.jsx';
import UpiPopover from '../StandardTable/Utils/UpiPopOver.jsx';
import pozologoimg from '../../../../../Images/pozologoimg.png';
import PaymentGatewayEmbedded from '../../UtillComponents/PaymentGatewayEmbedded.jsx';
import MobileMultiPdfPrintTrigger from '../../UtillComponents/MobileMultiPdfPrintTrigger.jsx';
// Jsx Files
const CustomerOrders = lazy(
  () => import('../../BookingFunctionality/CustomerOrders.jsx')
);
const BSCustomerSelect = lazy(
  () => import('../../UtillComponents/BSSelectCustomer.jsx')
);
const BSCreditCustomer = lazy(
  () => import('../../UtillComponents/BSCreditCustomer.jsx')
);
const OtherServicePrintStyle1 = lazy(
  () =>
    import('../../../PrintTemplates/ThermalPrinter/OtherServicePrintStyle1.jsx')
);
import OtherServiceMobilePrint from '../../BookingFunctionality/OtherServiceMobilePrint.jsx';
import BillingTableSkeleton from '../../../../../Components/Skeleton/BillingTableSkeleton.jsx';
const BSOtherServiceClaim = lazy(
  () => import('../../UtillComponents/BSOtherServiceClaim.jsx')
);
const SplitPayment = lazy(
  () => import('../../BookingFunctionality/SplitPayment.jsx')
);
const FeaturesFunctionalities = lazy(
  () => import('../../BookingFunctionality/FeaturesFunctionalities.jsx')
);
const Paymentoption = lazy(
  () => import('../../../../Payment/PaymentOptions/PaymentOptions.jsx')
);

const BsBill2 = lazy(() => import('./BsBill2'));
const BsBill2Sum = lazy(() => import('./BsBill2Sum'));
const BSSummery1 = lazy(() => import('../BSBillingTableSummery/BSSummery'));
const PaymentPdfBooking = lazy(
  () => import('../../../../paymentpdfPage/PaymentPdfBooking')
);
const PozoDineInIcon = lazy(
  () => import('../../UtillComponents/Pozo retail icons/PozoDineIn.jsx')
);
const QrComponent = lazy(
  () => import('../../BookingFunctionality/DynamicQr.jsx')
);
const QrinScreen = lazy(
  () => import('../../BookingFunctionality/DynamicScreenQr.jsx')
);
const BsBillingCreditCustomer = lazy(
  () => import('../../BookingFunctionality/BSBillingCreditCustomer.jsx')
);
const MobilePrint = lazy(
  () => import('../../BookingFunctionality/MobilePrint.jsx')
);
const TokensinglePrint = lazy(
  () =>
    import('../../../../paymentpdfPage/TokenOnlyPrints/TokeninsinglePrint.jsx')
);
const SingleTokenMobilePrint = lazy(
  () => import('../../BookingFunctionality/SingleTokenMobilePrint.jsx')
);
const IndividualTokenMobilePrint = lazy(
  () => import('../../BookingFunctionality/IndividualTokenMobilePrint.jsx')
);
const SMSShare = lazy(() => import('../../../../WhatsAppShare/SmsShare.jsx'));
const WhatsAppShare = lazy(
  () => import('../../../../WhatsAppShare/whatsAppShare.jsx')
);
const BSTipAmount = lazy(() => import('../../UtillComponents/BSTipAmount.jsx'));

const subDirectory = import.meta.env.ENV_BASE_URL;
const MainHomeUrl = import.meta.env.ENV_MAIN_BASE_URL;

const currentDateValue = moment().format('YYYY-MM-DD HH:mm:ss');
const BSBillingTable2 = () => {
  const isF4Pressed = useRef(false);
  const applyOffer = useApplyOfferto_CardDetail();
  const RetailWSSalesType = useSelector(GlobalRetailWSSalesType);

  const { SadminuserAccess } = useAuth();

  console.log(SadminuserAccess, 'SadminuserAccess');

  let SAAccessCommonMaster = SadminuserAccess?.find(
    (e) => e?.MenuName === 'Sales'
  );
  const Discount = useSelector(GlobalOverAllOfferAmt);
  const SessionData = useSelector(StoredSessionData);
  const CompId = SessionData?.CompId;
  const BranchId = SessionData?.BranchId;
  const AppId = SessionData?.AppId;
  const UserId = SessionData?.UserId;
  const UserType = SessionData?.UserType;
  const AuthToken = SessionData?.AuthToken;
  const SessionMobileNo = SessionData?.SessionMobileNo;
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const salesBillEdit = useSelector(GlobalSalesBillEdit);
  const previousOrderPayment = useSelector(GlobalPreviousOrderPayment);
  const previousOrderOfferDetails = useSelector(
    GlobalPreviousOrderOfferDetails
  );
  const AllPaymentOptions = useSelector(GlobalpaymentOptionData);
  const defaultBookingType = useSelector(GlobalDefaultBookingType);
  const globalTipAmount = useSelector(GlobaltipAmount);
  const OtherServiceTicketClaim = useSelector(GlobalOtherServiceTicketClaim);
  const printerTemplateStyle = useSelector(SelectedPrintTemplate);
  const appPreferences = useSelector(ApplicationPreferences);
  const bookingTypePreference = appPreferences?.find(
    (preference) => preference?.PreferredCatName === 'Booking Type'
  )?.PreferenceCatDetails;
  const dinePreference = bookingTypePreference?.find(
    (type) =>
      type?.PreferredSubCatName?.toLowerCase() === 'dine in' &&
      type?.PreferredStatus === 'Y'
  );
  const FontFamily = useSelector(GlobalSelectedFont);
  const Holddata = useSelector(globalholddata);
  const ReportholdData = useSelector(GlobalReorderHoldDetails);
  const NavHoldData = useSelector(GlobalNavHoldData);
  const GetCustId = useSelector(GlobalCustId);
  const GlobalUpiID = useSelector(GlobalUpiIDprint);
  const SelCustId = useSelector(GlobalSelCustId);
  const selOption = useSelector(GlobalSelOption);
  const BookingType = useSelector(GlobalBookingType);
  const SelectedTableDetails = useSelector(GlobalSelectedTableDetails);
  const GlobalAddCustomerDetails1 = useSelector(GlobalAddCustomerDetails);
  const SettingDataSelector = useSelector(PreferenceData);
  const preferenceOffer =
    SettingDataSelector?.[0]?.['SettingDtlDetails']?.find(
      (item) => item.SettingIdName === 'Offer'
    )?.SettingValue === 'Y';
  const GlobalUpName = useSelector(GlobalUpiIDName);
  const GlobalUpiIDoptionIdd = useSelector(GlobalUpiIDoptionId);
  const preOrder = useSelector(GlobalpreOrderOpen);
  const OrderOfferDetail = useSelector(Global_OrderOfferDetail, shallowEqual);
  const prodCat = useSelector(GlobalProductCategorie);
  const ProdSubCat = useSelector(GlobalProductSubCategorie);
  const templateData = useSelector(getTemplateData);
  const [urlData, setUrlData] = useState();
  const OfferCheckedInSetup = templateData?.BookingNavbar?.[1].some(
    (item) => item?.OptionName == 'Offer'
  );
  const allowDecimal = SettingDataSelector?.[0]?.SettingDtlDetails?.find(
    (setting) =>
      setting?.SettingIdName?.toLowerCase() === 'decimal' &&
      setting?.SettingValue === 'Y'
  );
  const Custombill = SettingDataSelector?.[0]?.SettingDtlDetails?.some(
    (setting) =>
      setting?.SettingIdName?.toLowerCase() === 'customisedbillnumber' &&
      setting?.SettingValue === 'Y'
  );
  const FreeProdList = useSelector(GlobalFreeProdList);
  const offerAppliedProducts = useSelector(GlobalOfferAppliedProducts);
  const Custdisable = useSelector(GlobalSelectedCustDisable);
  const GlobEstBooking = useSelector(GlobalEstimateBooking);
  const GlobProdwisedata = useSelector(GlobalSelProdWiseEst);
  const BookingTypeBoth = useSelector(GlobalBookingTypeBoth);
  const OrderCardDetail = useSelector(GlobalOrderCardDetails);
  const GlobalExtraCharge = useSelector(globalExtraTotalAmount);
  const [empData, setEmpData] = useState();
  const [addnewAccess, setaddnewAccess] = useState(true);
  const OrderType = useSelector(GlobalOrderType);
  const FailedTotalAmt = useSelector(GlobalFailedTotalAmt);
  const BranchFinancialStatus = useSelector(GlobalBranchFinancialStatus);
  const GlobalSalesPaymentoptions = useSelector(GlobalSalesPaymentoption);
  const Combodata = useSelector(GlobalCombocarddata, shallowEqual);
  const [showWhatsAppShare, setShowWhatsAppShare] = useState(false);
  const [showSMSShare, setSMSShare] = useState(false);

  const [SelectedBookingType, setSelectedBookingType] = useState(null);
  const [PaymentOptions, setPaymentOptions] = useState([]);
  const [PaymentUpiOptions, setPaymentUpiOptions] = useState([]);
  const [messageType, setMessageType] = useState(null);
  const [messageData, setMessageData] = useState(null);
  const [credit, setCredit] = useState(false);
  const [overAllBal, setOverAllBal] = useState(0);
  const [creditCustomerOpen, setcreditCustomerOpen] = useState(false);
  const [hold, setHold] = useState(false);
  const [refundPayBtns, setRefundPayBtns] = useState([]);
  const [refundPaySelected, setRefundPaySelected] = useState();
  const [refundPaySelectedName, setRefundPaySelectedName] = useState(null);
  const [currentOrderNetAmount, setCurrentOrderNetAmount] = useState(0);
  const [previousNetAmount, setPreviousNetAmount] = useState(0);
  const [addcustomer, setAddCustomer] = useState(false);
  const [paybtns, setpaybtns] = useState([]);
  const tableOptions = templateData?.BookingBilling?.[1];
  const [paybtnselected, setPaybtnselected] = useState();
  const [Paybtnnameselected, setPaybtnnameselected] = useState();
  const defaultPaymentTrigger = useSelector(GlobalPaymentTrigger);
  const [defaultPaymentMode, setDefaultPaymentMode] = useState([]);
  const [defaultEnabled, setDefaultEnabled] = useState(false);
  const [SelectedCardOption, setSelectedCardOption] = useState(null);
  const [SelectedUPIPayOption, setSelectedUPIPayOption] = useState('Default');
  const [SelectedUpiOption, setSelectedUpiOption] = useState();
  const [UpiOptionOpen, setUpiOptionOpen] = useState(false);
  const [CardOptionOpen, setCardOptionOpen] = useState(false);
  const [UpiOption, setUpiOption] = useState('');
  const [UpiId, setUpiId] = useState();
  const [TotalAmount, setTotalAmount] = useState('');
  const [TotalWithoutTaxAmount, setTotalWithoutTaxAmount] = useState('');
  const [TotalTaxAmount, setTotalTaxAmount] = useState('');
  const [open, setOpen] = useState(false);
  const [qrCode, setQrCode] = useState(false);
  const [FirstPaymentclick, setFirstPaymentclick] = useState(false);
  const [PrintOrderDetails, setPrintOrderDetails] = useState([]);
  const [formattedDate, setFormattedDate] = useState();
  const tabledata = useSelector(GlobalUnpaidListData);
  const [unpaidopen, setUnpaidOpen] = useState(false);
  const unpaidFlow = useSelector(Globalunpaidflow);
  const [UpinotSelected, setUpinotSelected] = useState(false);
  const [CardoptionnotSelected, setCardoptionnotSelected] = useState(false);
  const [CreditCustomer, setCreditCustomer] = useState(false);
  const ExpDate = useSelector(GlobalExpDateforHeight);
  const [Success, SetSuccess] = useState();
  const [brachName, setbrachName] = useState('');
  const [UpiOpen, setUpiOpen] = useState(false);
  const [customerPreviesOrders, setCustomerPreviesOrders] = useState(false);
  const OverAllSales = useSelector(GlobalOverAllDiscSales);
  const OverAllEstimate = useSelector(GlobalOverAllDiscEstimate);

  const holdCheckedSalesSetup = tableOptions?.some(
    (item) => item?.OptionName === 'Hold'
  );

  const PaymentOptionsModeName =
    PaymentOptions?.find((e) => e.ModeDefault?.toUpperCase() === 'Y')
      ?.ModeName || PaymentOptions?.[0]?.ModeName;
  const PaymentOptionsModeId =
    PaymentOptions?.find((e) => e.ModeDefault?.toUpperCase() === 'Y')?.ModeId ||
    PaymentOptions?.[0]?.ModeId;

  const UomPrint = SettingDataSelector?.[0]?.SettingDtlDetails.filter(
    (i) => i.SettingIdName === 'PrintUom'
  )?.[0];
  const Estimation = SettingDataSelector?.[0]?.SettingDtlDetails?.find(
    (item) => item.SettingIdName == 'Estimation'
  );
  const ParkingDisplay = SettingDataSelector?.[0]?.SettingDtlDetails?.find(
    (setting) =>
      setting?.SettingIdName?.toLowerCase() === 'parking' &&
      setting?.SettingValue === 'Y'
  );
  const MobileA4Print = SettingDataSelector?.[0]?.SettingDtlDetails?.find(
    (setting) =>
      setting?.SettingIdName?.toLowerCase() === 'mobilea4' &&
      setting?.SettingValue === 'Y'
  );
  const UpiQRPreference = SettingDataSelector?.[0]?.SettingDtlDetails?.find(
    (setting) =>
      setting?.SettingIdName?.toLowerCase() === 'upiqr' &&
      setting?.SettingValue === 'Y'
  );

  const [ConfigDataList, setConfigDataList] = useState([]);
  const [OrderStatus, setOrderStatus] = useState(true);
  const CheckOrderType = OrderCardDetail?.filter(
    (a) => a?.BookingTypeName !== BookingType
  );
  const [PaymentgatewayCard, setPaymentgatewayCard] = useState([]);
  const [PaymentDeviceCard, setPaymentDeviceCard] = useState([]);
  const [PaymentgatewayUPI, setPaymentgatewayUPI] = useState([]);
  const [PaymentDeviceUPI, setPaymentDeviceUPI] = useState([]);
  const [UpiPayOption, setUpiPayOption] = useState([]);
  const [BusinessPayOption, setBusinessPayoption] = useState([]);
  const [paymentSucess, setPaymentSuccess] = useState(false);
  const [businessUPI, setBusinessUPI] = useState(false);
  const [businessUPIOrderId, setBusinessUPIOrderId] = useState(null);
  const [businessUPILink, setBusinessUPILink] = useState(null);
  const [CardPayOption, setCardPayOption] = useState([]);
  const [Splitpayment, setSplitpayment] = useState(false);
  const GlobaluseOptions = useSelector(GlobalCommonPaymentOptions);
  const [useOptions, setuseOptions] = useState([]);
  const paymentloader = useSelector(GlobalPayementloader);
  const TokenOnly = SettingDataSelector?.[0]?.SettingDtlDetails?.filter(
    (i) => i.SettingIdName === 'TokenOnly'
  )?.[0];
  const IndividualToken = SettingDataSelector?.[0]?.SettingDtlDetails?.filter(
    (i) => i.SettingIdName === 'AllProductindividualToken'
  )?.[0];
  const [UnpaidConfirmation, setUnpaidConfirmation] = useState(false);
  const [unpaidselectedindex, setunpaidselectedindex] = useState();
  const [failedOrderData, setFailedOrderData] = useState();
  const [responsiveBill, setResponsiveBill] = useState(true);
  const [blink, setBlink] = useState(false);
  const BookingStatus = useSelector(GlobalBookingStatus);
  const CheckBookingStatus =
    BookingStatus?.find((item) => item.ScreenType === 'Booking')
      ?.ScreenStatus ?? 'Open';
  const OverallOfferAmount = useSelector(Global_OverallOfferAmount);
  const allowedNames = ['whatsapp', 'Print', 'SMS'];
  const [MobileNoWhatsApp, setMobileNoWhatsApp] = useState();

  const filteredSettingNames = SettingDataSelector?.[0]?.['SettingDtlDetails']
    ?.filter(
      (item) =>
        allowedNames.includes(item?.SettingIdName) && item?.SettingValue === 'Y'
    )
    ?.map((item) => item?.SettingIdName);
  const printDatas = useSelector(GlobalprintDatas);

  const OtherServicesglobal = useSelector(GlobalOtherSevices);
  const [OtherServicesModal, setOtherServicesModal] = useState(false);
  const [vehicleInputs, setVehicleInputs] = useState({});
  const [errors, setErrors] = useState({});
  const [OtherServicesPrintDetails, setOtherServicesPrintDetails] = useState(
    []
  );
  const PrinterDetails = useSelector(GlobalPrinterMappingDtls);
  const [showCancelConfirm, setShowCancelConfirm] = useState(false);
  // for customised invoice number
  const { invoiceDate, clearInvoiceDate } = useDateStore();
  const CurrentOrderId = useSelector(GlobalCurrentOrderId);
  // Usage
  const preferenceshortcutkey = SettingDataSelector?.[0]?.[
    'SettingDtlDetails'
  ]?.some(
    (item) =>
      item.SettingIdName.toLowerCase() === 'shortcutkeys' &&
      item.SettingValue === 'Y'
  );

  useEffect(() => {
    const fetchCreditCustomer = async () => {
      const selectedMode = paybtns?.find(
        (pay) => paybtnselected === pay?.ModeId
      )?.ModeName;

      if (
        selectedMode?.toLowerCase() === 'credit' &&
        (!UpinotSelected || !CardoptionnotSelected)
      ) {
        setCredit(true);
        try {
          const res = await dispatch(
            getCreditCustomer({
              CompId,
              AppId,
              BranchId,
              CustId: selOption?.CustId,
            })
          ).unwrap();

          if (res?.data?.statusCode === 1 && res?.data?.data?.length > 0) {
            setOverAllBal(res.data.data[0]?.OverAllBal ?? 0);
          } else {
            setOverAllBal(0);
          }
        } catch (error) {
          console.error('Credit fetch failed', error);
          setOverAllBal(0);
        }
      } else {
        setCredit(false);
        setOverAllBal(0);
      }
    };

    fetchCreditCustomer();
  }, [paybtnselected, selOption, paybtns]);

  useEffect(() => {
    if (salesBillEdit) {
      dispatch(getPaymentOptions()).unwrap();
    }
  }, [salesBillEdit]);

  useEffect(() => {
    if (salesBillEdit) {
      if (SelCustId) {
        setRefundPayBtns(AllPaymentOptions);
        setRefundPaySelected(AllPaymentOptions?.[0]?.ConfigId);
        setRefundPaySelectedName(AllPaymentOptions?.[0]?.ConfigName);
      } else {
        const withoutCustomer = AllPaymentOptions?.filter?.(
          (item) => item?.ConfigName?.toLowerCase() !== 'credit'
        );
        setRefundPaySelected(withoutCustomer?.[0]?.ConfigId);
        setRefundPaySelectedName(withoutCustomer?.[0]?.ConfigName);
        setRefundPayBtns(withoutCustomer);
      }
    }
  }, [AllPaymentOptions, SelCustId, salesBillEdit]);

  useEffect(() => {
    if (!preOrder) {
      const totalSum = OrderCardDetail?.reduce(
        // (acc, card) => acc + parseFloat(card.OrderRate * card.OrderQty || 0),
        (acc, card) => acc + parseFloat(card.TotalAmt || 0),
        0
      );

      const extra = GlobalExtraCharge?.reduce(
        (acc, obj) => acc + (obj.TotalAmt || 0),
        0
      );

      let withComboSum = 0;
      const withComboOffer_CardDetail = OrderCardDetail?.filter(
        (item) => item.Type === 'C'
      );
      if (withComboOffer_CardDetail?.length > 0) {
        withComboSum = withComboOffer_CardDetail.reduce(
          (acc, card) =>
            acc +
            parseFloat(card.OrderRate * card.OrderQty - card.TotalAmt || 0),
          0
        );
      }

      let Total =
        extra === undefined
          ? totalSum - OverallOfferAmount - withComboSum
          : totalSum + extra - OverallOfferAmount - withComboSum;

      // Subtract OtherServiceTicketClaim?.totalTicketamount if present and > 0
      if (OtherServiceTicketClaim?.TotalAmt > 0) {
        if (Total - OtherServiceTicketClaim.TotalAmt > 0) {
          Total -= OtherServiceTicketClaim.TotalAmt;
        } else {
          dispatch(
            changeOtherServiceTicketClaim({
              TicketId: null,
              TotalAmt: 0,
              ParkingClaimed: false,
              ServiceCategory: null,
            })
          );
        }
      } else if (OtherServiceTicketClaim?.OtherType == 'Remove') {
        dispatch(
          changeOtherServiceTicketClaim({
            TicketId: null,
            TotalAmt: 0,
            ParkingClaimed: false,
            ServiceCategory: null,
          })
        );
      }

      const filteredPayments =
        previousOrderPayment?.filter(
          (p) =>
            p?.LastOrderTran === 'Y' &&
            p?.AfterAdjustment != null &&
            p?.AfterAdjustment !== '' &&
            p?.AfterAdjustment
        ) || [];

      const paymentsToUse =
        filteredPayments.length > 0
          ? filteredPayments
          : previousOrderPayment || [];

      const totalPreviouspayment = paymentsToUse?.reduce(
        (acc, payment) =>
          acc + parseFloat(payment.AfterAdjustment || payment.Amount || 0),
        0
      );

      const totalPreviousOfferAmount = previousOrderOfferDetails?.reduce(
        (acc, offer) => acc + parseFloat(offer.OfferAmount || 0),
        0
      );

      const previousNetAmount = totalPreviouspayment || 0;

      let withdiscTotal =
        Total -
        ((OverAllSales || 0) +
          (OverAllEstimate || 0) +
          (Discount > 0 ? Discount : 0));

      const currentOrderNetAmount = formatAmount(
        withdiscTotal >= 0
          ? (Number(withdiscTotal) + Number(globalTipAmount)).toFixed(2)
          : (Number(Total) + Number(globalTipAmount)).toFixed(2)
      );

      setTotalAmount(
        salesBillEdit
          ? currentOrderNetAmount > previousNetAmount
            ? currentOrderNetAmount - previousNetAmount
            : 0
          : currentOrderNetAmount
      );
      setCurrentOrderNetAmount(currentOrderNetAmount);
      setPreviousNetAmount(previousNetAmount);
      dispatch(
        changeSummeryTotalAmount(
          salesBillEdit
            ? currentOrderNetAmount > previousNetAmount
              ? currentOrderNetAmount - previousNetAmount
              : 0
            : currentOrderNetAmount
        )
      );

      dispatch(changeSummeryComboOfferAmount(withComboSum));

      // if (withdiscTotal <= 0) {
      //   dispatch(ChangeOverAllDiscSales(0));
      //   dispatch(ChangeOverAllDiscEstimate(0));
      // }
    } else {
      setTotalAmount(0);
      dispatch(changeSummeryTotalAmount(0));
      dispatch(changeSummeryComboOfferAmount(0));
    }
  }, [
    OrderCardDetail,
    GlobalExtraCharge,
    OverAllSales,
    OverAllEstimate,
    globalTipAmount,
    OtherServiceTicketClaim,
    Discount,
  ]);
  useEffect(() => {
    let data = {
      CompId: CompId,
      BranchId: BranchId,
      AppId: AppId,
      UserId: UserId,
    };
    dispatch(getPrinterMappingDetails(data)).unwrap();
    // const Data1 = { AppId, CompId, BranchId };
    // dispatch(getPrintSelectionComponentData(Data1)).unwrap();
  }, []);
  useEffect(() => {
    if (CompId && BranchId && AppId) {
      if (holdCheckedSalesSetup) {
        getHolddata();
      }

      // getUnpaiddatas();
      getCustomerData();
    }
  }, [CompId, BranchId, AppId]);

  useEffect(() => {
    gettodaydate();
    getBookingTypeId();
    getPaymentOptionFeature();
    // if (UserType === "Employee") {
    //   fetchApi()
    // }
  }, []);

  useEffect(() => {
    if (UserType === 'Employee') {
      fetchApi();
    }
  }, [UserType]);

  useEffect(() => {
    let hasAccess = false;

    if (UserType === 'Admin' || UserType === 'Super Admin') {
      hasAccess = true;
    } else if (UserType === 'Employee') {
      hasAccess = empData?.AddAccess === 'Y';
    } else if (UserType === 'Super Admin User') {
      hasAccess = SAAccessCommonMaster?.AddAccess === 'Y';
    }

    setaddnewAccess(!hasAccess);
  }, [empData, SAAccessCommonMaster, UserType]);

  const handleResponsiveBill = () => {
    setResponsiveBill(!responsiveBill);
  };

  const fetchApi = async () => {
    let data = {
      CompId: CompId,
      BranchId: BranchId,
      AppId: AppId,
      EmpId: UserId,
    };
    let response = await dispatch(getEmpAccess(data)).unwrap();
    let datas = response?.data?.data?.[0]?.EmpAccessDetails?.filter(
      (item) => item.ConfigName === 'Sales'
    );
    setEmpData(datas?.[0]);
  };

  const getCustomerData = async () => {
    // await dispatch(
    //   getAllCustomer({ CompId: CompId, AppId: AppId, branchId: BranchId })
    // );
    await dispatch(
      getAddCustomerDetails({
        CompId: CompId,
        AppId: AppId,
        branchId: BranchId,
      })
    );
  };

  useEffect(() => {
    if (OrderCardDetail?.length <= 0) {
      dispatch(changeCustomerID(null));
      dispatch(changeSelectedCustId());
      dispatch(changeSelectedOption(null));
      dispatch(ChangeSelectedCustDisable(false));
    }
  }, [OrderCardDetail]);

  //mohan stoped data
  useEffect(() => {
    if (
      (BookingType === 'Dine In' ||
        BookingTypeBoth ||
        CheckOrderType?.length > 0) &&
      !unpaidFlow &&
      SelectedTableDetails?.length !== 0
    ) {
      setOrderStatus(true);
    } else {
      setOrderStatus(false);
    }
  }, [BookingTypeBoth, BookingType, unpaidFlow]);
  //mohan end

  useEffect(() => {
    if (SelCustId) {
      setpaybtns(PaymentOptions);
    } else {
      const withoutCustomer = PaymentOptions?.filter?.(
        (item) => item?.ModeName?.toLowerCase() !== 'credit'
      );

      setpaybtns(withoutCustomer);
    }
  }, [PaymentUpiOptions, PaymentOptions, SelCustId]);

  useEffect(() => {
    getPaymentOptionFeature();
  }, [GlobaluseOptions]);

  useEffect(() => {
    if (selOption) {
      closePrintOption();
      setMobileNoWhatsApp(selOption);
    }
  }, [selOption]);

  useEffect(() => {
    if (
      OrderCardDetail?.length === 1 &&
      OrderCardDetail?.[0]?.OrderQty === 1 &&
      !SelCustId
    ) {
      console.log(OrderCardDetail, 'OrderCardDetail');
      closePrintOption();
      setPrintOrderDetails([]);
    }
  }, [OrderCardDetail]);

  //dhana
  // Function to check if the button is active
  const isButtonActive = () => {
    const baseCondition =
      FirstPaymentclick === false &&
      OrderCardDetail?.length > 0 &&
      paybtnselected &&
      CheckBookingStatus !== 'Close';
    let accessCondition = true;
    if (UserType === 'Employee') {
      accessCondition = empData?.AddAccess === 'Y';
    } else if (UserType === 'Super Admin User') {
      accessCondition = SAAccessCommonMaster?.AddAccess === 'Y';
    }
    return baseCondition && accessCondition;
  };

  // Function to handle the button click
  const handleButtonClick = () => {
    if (qrCode && SelectedUPIPayOption === 'Default' && UpiQRPreference) {
      UpiPayment();
    } else if (
      salesBillEdit &&
      currentOrderNetAmount < previousNetAmount &&
      !refundPaySelected
    ) {
      setMessageType('warning');
      setMessageData('Please Select Refund Payment Method');
      return;
    } else {
      OrderStatus
        ? AddBookingDetails('Dine-In', false)
        : AddBookingDetails(BookingType, true);
    }
  };

  useEffect(() => {
    const handleKeyPress = (event) => {
      if (!preferenceshortcutkey) return;

      if (event.key === 'F4' && isButtonActive() && !isF4Pressed.current) {
        isF4Pressed.current = true;
        // BranchFinancialStatus==='N'? financialYearError():
        handleButtonClick();
        setTimeout(() => {
          isF4Pressed.current = false; // Reset after a short delay
        }, 1000);
      }

      if (
        event.altKey &&
        event.key === 'w' &&
        paybtns?.length > 0 &&
        BookingType !== 'Dine In' &&
        tableOptions?.some((e) => e?.OptionName == 'Hold')
      ) {
        event.preventDefault();
        if (
          OrderCardDetail?.length > 0 &&
          CheckBookingStatus !== 'Close' &&
          !addnewAccess
        ) {
          AddBookingDetails('Hold', false);
        } else if (
          Holddata?.length > 0 &&
          OrderCardDetail?.length === 0 &&
          CheckBookingStatus !== 'Close' &&
          !addnewAccess
        ) {
          HandleholdModelOpen();
        }
      }

      // Alt+S for Split Payment
      if (event.altKey && event.key === 's' && paybtns?.length > 1) {
        event.preventDefault();
        if (
          OrderCardDetail?.length > 0 &&
          CheckBookingStatus !== 'Close' &&
          !addnewAccess &&
          !unpaidFlow &&
          !OrderStatus
        ) {
          SplitPaymentOpen();
        }
      }
    };

    window.addEventListener('keydown', handleKeyPress);
    return () => {
      window.removeEventListener('keydown', handleKeyPress);
    };
  }, [
    paybtns,
    FirstPaymentclick,
    OrderCardDetail,
    paybtnselected,
    OrderStatus,
    qrCode,
    SelectedUPIPayOption,
    TotalAmount,
    SelectedUpiOption,
    SelectedCardOption,
    BookingType,
    Holddata,
    CheckBookingStatus,
    addnewAccess,
    preferenceshortcutkey,
    paybtns,
    unpaidFlow,
  ]);
  const formatAmount = (value) => {
    return allowDecimal
      ? parseFloat(value || 0).toFixed(2)
      : parseInt(value || 0);
  };
  //dhana

  const getPaymentOptionFeature = async () => {
    const FiltersalesPayment = GlobaluseOptions?.filter(
      (item) => item.FlowName?.toLowerCase() === 'sales'
    );
    setuseOptions(FiltersalesPayment);
    const filterpaycounter = FiltersalesPayment?.[0]?.OptionDetails?.filter(
      (item) => item?.OptionName?.toLowerCase() === 'pay at the counter'
    );
    const filterpaymentgateway = FiltersalesPayment?.[0]?.OptionDetails?.filter(
      (item) => item?.OptionName?.toLowerCase() === 'payment gateway'
    );
    const filterpaymentdevice = FiltersalesPayment?.[0]?.OptionDetails?.filter(
      (item) => item?.OptionName?.toLowerCase() === 'payment device'
    );
    const filterBusinessUpi = FiltersalesPayment?.[0]?.OptionDetails?.filter(
      (item) => item?.OptionName?.toLowerCase() === 'business upi'
    );
    const cardinpaymentgateway =
      filterpaymentgateway?.[0]?.ModeDetails?.filter((item) =>
        item?.ModeName?.toLowerCase()?.includes('card')
      ) || [];
    const cardinpaymentdevice =
      filterpaymentdevice?.[0]?.ModeDetails?.filter((item) =>
        item?.ModeName?.toLowerCase()?.includes('card')
      ) || [];
    const upiinpaymentgateway =
      filterpaymentgateway?.[0]?.ModeDetails?.filter((item) =>
        item?.ModeName?.toLowerCase()?.includes('upi')
      ) || [];
    const upiinpaymentdevice =
      filterpaymentdevice?.[0]?.ModeDetails?.filter((item) =>
        item?.ModeName?.toLowerCase()?.includes('upi')
      ) || [];

    setPaymentOptions(filterpaycounter?.[0]?.ModeDetails);
    setPaymentUpiOptions(
      FiltersalesPayment?.[0]?.PaymentDetails?.Payatthecounter
    );
    setPaymentDeviceCard(cardinpaymentdevice);
    setPaymentgatewayCard(cardinpaymentgateway);
    setPaymentgatewayUPI(upiinpaymentgateway);
    setPaymentDeviceUPI(upiinpaymentdevice);
    const cardoptions = [];
    if (cardinpaymentgateway?.length > 0) {
      cardoptions.push({
        label: 'Payment Gateway',
        value: 'PG',
        imgSrc: paygate,
      });
    }
    if (cardinpaymentdevice?.length > 0) {
      cardoptions.push({
        label: 'Payment Device',
        value: 'PD',
        imgSrc: paydevice,
      });
    }
    setCardPayOption(cardoptions);
    const options = [];

    if (FiltersalesPayment?.[0]?.PaymentDetails?.Payatthecounter?.length > 0) {
      options.push({
        label: 'Personal UPI',
        value: 'Default',
        imgSrc: defaultupi,
      });
    }
    if (filterBusinessUpi?.[0]?.ModeDetails?.length > 0) {
      options.push({
        label: 'Business UPI',
        value: 'Business',
        imgSrc: pozologoimg,
        PaymentOptionId: filterBusinessUpi?.[0]?.PaymentOptionId,
        PaymentFlowId: filterBusinessUpi?.[0]?.PaymentFlowId,
        OptionId: filterBusinessUpi?.[0]?.OptionId,
      });
    }

    if (upiinpaymentgateway?.length > 0) {
      options.push({
        label: 'Payment Gateway',
        value: 'PG',
        imgSrc: paygate,
        PaymentOptionId: upiinpaymentgateway?.[0]?.PaymentOptionId,
        PaymentModeId: upiinpaymentgateway?.[0]?.PaymentModeId,
        ModeId: upiinpaymentgateway?.[0]?.ModeId,
      });
    }

    if (upiinpaymentdevice?.length > 0) {
      options.push({ label: 'Payment Device', value: 'PD', imgSrc: paydevice });
    }
    setUpiPayOption(options);
    setBusinessPayoption(filterBusinessUpi?.[0]?.ModeDetails || []);

    // }
  };

  useEffect(() => {
    TotalWithoutTaxRate();
    TotalTaxAmt();
    OrderCardDetail?.length == 0 ? dispatch(changeunpaidflow(false)) : '';
  }, [OrderCardDetail]);

  useEffect(() => {
    setPaybtnselected(PaymentOptionsModeId);
    setPaybtnnameselected(PaymentOptionsModeName);
  }, [PaymentOptions]);

  useEffect(() => {
    const customerDisplayWindow = getCustomerDisplayWindow();
    if (customerDisplayWindow && !customerDisplayWindow.closed) {
      const updatedData = {
        ExtraCharges: GlobalExtraCharge,
      };
      customerDisplayWindow.postMessage(updatedData, '*');
    } else {
      console.error(
        'Customer display window is not available or has been closed.'
      );
    }
  }, [GlobalExtraCharge]);

  useEffect(() => {
    if (NavHoldData) {
      AddBookingDetails('Hold');
    }
  }, [NavHoldData]);

  // useEffect(() => {
  //   if (
  //     PrintOrderDetails?.length > 0 &&
  //     (!filteredSettingNames ||
  //       filteredSettingNames?.includes('Print') ||
  //       filteredSettingNames?.length === 0) &&
  //     (
  //       (!filteredSettingNames?.includes('whatsapp') &&
  //         (!isMobile || !filteredSettingNames?.includes('SMS'))) ||
  //       (
  //         (filteredSettingNames?.includes('whatsapp') ||
  //           (isMobile && filteredSettingNames?.includes('SMS'))) &&
  //         (!MobileNoWhatsApp || Object.keys(MobileNoWhatsApp).length === 0)
  //       )
  //     )
  //   ) {

  //     handlePrintOrToken();
  //   }
  // }, [PrintOrderDetails]);

  useEffect(() => {
    if (!PrintOrderDetails?.length) return;

    const selectedOptions = filteredSettingNames || [];
    const count = selectedOptions.length;

    if (count === 0) {
      handlePrintOrToken();
      return;
    }
    if (count === 1) {
      const option = selectedOptions[0];

      switch (option) {
        case 'whatsapp':
          if (!selOption && MobileNoWhatsApp?.value) {
            handleWhatsAppClick();
          } else {
            handlePrintOrToken();
          }
          return;

        case 'SMS':
          if (isMobile) handleSMSClick();
          else handlePrintOrToken();
          return;

        case 'Print':
          handlePrintOrToken();
          return;

        // case "Email":
        //   handleEmailClick();
        //   return;

        default:
          return;
      }
    }
    return;
  }, [PrintOrderDetails]);

  const handlePrintOrToken = async () => {
    const dinein =
      PrintOrderDetails?.[0]?.OrderDetails?.[0]?.productDetails?.some(
        (product) => product.BookingTypeName === 'Dine In'
      );
    const Tokenthere =
      PrintOrderDetails?.[0]?.OrderDetails?.[0]?.productDetails?.some(
        (product) => product.TokenAvailable === 'Y'
      );
    const PrintLogo = SettingDataSelector?.[0]?.SettingDtlDetails?.filter(
      (i) => i.SettingIdName === 'PrintLogo'
    )?.[0];
    const PrintGreeting = SettingDataSelector?.[0]?.SettingDtlDetails?.filter(
      (i) => i.SettingIdName === 'PrintGreetings'
    )?.[0];
    const preferenceDetails = SettingDataSelector?.[0]?.SettingDtlDetails;
    if (isMobile) {
      if (MobileA4Print) {
        //
        await MobileMultiPdfPrintTrigger({
          preferenceDetails,
          printerTemplateStyle,
          printDatas,
          PrinterDetails,
          PrintOrderDetails,
          SessionData,
          bookingTypePreference,
        });
      } else {
        if (Tokenthere && TokenOnly?.SettingValue === 'Y' && !dinein) {
          if (IndividualToken?.SettingValue === 'Y' && !dinein) {
            IndividualTokenMobilePrint(PrintOrderDetails, UpiId, 'Booking');
            closePrintOption();
          } else {
            SingleTokenMobilePrint(PrintOrderDetails, UpiId, 'Booking');
            closePrintOption();
          }
        } else {
          MobilePrint(
            appPreferences,
            PrintOrderDetails,
            UpiId,
            'Booking',
            SettingDataSelector
          );
          closePrintOption();
        }
      }
    } else {
      if (Tokenthere && TokenOnly?.SettingValue === 'Y' && !dinein) {
        AllProductTokenFunction();
      } else {
        Print();
      }
    }
  };

  useEffect(() => {
    getBookingTypeId();
  }, [BookingType, BookingTypeBoth]);

  useEffect(() => {
    let data = selOption != null ? selOption : GetCustId;
    const customerDisplayWindow = getCustomerDisplayWindow();
    if (customerDisplayWindow && !customerDisplayWindow.closed) {
      const updatedData = {
        customer: data,
      };
      customerDisplayWindow.postMessage(updatedData, '*');
    } else {
      console.error(
        'Customer display window is not available or has been closed.'
      );
    }
  }, [selOption, GetCustId]);

  useEffect(() => {
    let data = GlobalUpiID;
    const customerDisplayWindow = getCustomerDisplayWindow();
    if (customerDisplayWindow && !customerDisplayWindow.closed) {
      const updatedData = {
        upi: data,
      };
      customerDisplayWindow.postMessage(updatedData, '*');
    } else {
      console.error(
        'Customer display window is not available or has been closed.'
      );
    }
    setUpiOption(GlobalUpName);
    setSelectedUpiOption(GlobalUpiIDoptionIdd);
    setUpiId(GlobalUpiID);
  }, [GlobalUpiID]);

  useEffect(() => {
    const customerDisplayWindow = getCustomerDisplayWindow();
    if (customerDisplayWindow && !customerDisplayWindow.closed) {
      const updatedData = {
        paymentMethod: Paybtnnameselected,
        Paymentgateway: false,
      };
      customerDisplayWindow.postMessage(updatedData, '*');
    } else {
      console.error(
        'Customer display window is not available or has been closed.'
      );
    }
    dispatch(ChangeInitialPaymentName(Paybtnnameselected));
  }, [Paybtnnameselected]);

  useEffect(() => {
    const getPrintData = async () => {
      try {
        const data = {
          AppId,
          CompId,
          BranchId,
          OrderId: businessUPIOrderId,
        };

        const res = await dispatch(ReprintDetails(data)).unwrap();

        if (res?.data?.statusCode === 1 && res?.data?.data?.length > 0) {
          const orderData = [{ OrderDetails: res.data.data }];

          // Reset states first
          setBusinessUPIOrderId(null);
          setBusinessUPI(false);
          setPaymentSuccess(false);

          // Then set new data and trigger side effects
          setPrintOrderDetails(orderData);
          CustomerDisplay();
          ClearAllGlobalStateDatas();
          filteredSettingNames?.includes('whatsapp') &&
            MobileNoWhatsApp?.value &&
            handleURL(orderData);
        }
      } catch (error) {
        console.error('Failed to fetch print data:', error);
        // Reset states even on error
        setBusinessUPI(false);
        setPaymentSuccess(false);
      }
    };

    if (paymentSucess && businessUPIOrderId) {
      const timer = setTimeout(() => {
        getPrintData();
      }, 3000);

      return () => clearTimeout(timer);
    }
  }, [paymentSucess, businessUPIOrderId, AppId, CompId, BranchId, dispatch]);

  const getHolddata = async () => {
    const data = { CompId: CompId, BranchId: BranchId, AppId: AppId };
    let response = await dispatch(gettinghold(data)).unwrap();
    if (response?.data?.statusCode == 1) {
      // handleHold();
      await dispatch(changeholddata(response?.data?.data));
    } else {
      await dispatch(changeholddata([]));
    }
  };

  const handleWhatsAppClick = () => {
    setShowWhatsAppShare(true);
  };

  const handleSMSClick = () => {
    setSMSShare(true);
  };

  const handlePaymentMode = (id, name) => {
    if (name?.toLowerCase() !== 'credit') {
      setOverAllBal(0);
      setCredit(false);
    }
    if (paymentloader === false) {
      setPaybtnselected(id);
      setPaybtnnameselected(name);
      if (CardPayOption?.length === 1) {
        setSelectedCardOption(CardPayOption?.[0]?.value);
      }
      setUpiOptionOpen(false);
      setQrCode(false);
      setUpinotSelected(false);
      setCardoptionnotSelected(false);
    }
  };

  const handleRefundPaymentMode = (id, name) => {
    setRefundPaySelected(id);
    setRefundPaySelectedName(name);
  };

  const addUpiOption = async (id, name, UPIId) => {
    await dispatch(changeUpiIDprint(UPIId));
    await dispatch(changeUpiIDName(name));
    await dispatch(changeUpiIDoptionId(id));
    setSelectedUpiOption(id);
    setUpiOption(name);
    setUpiId(UPIId);
    setUpinotSelected(false);
    setCardoptionnotSelected(false);
    // setQrCode(true)
  };

  const AddCardOption = (data) => {
    setSelectedCardOption(data);
    setCardOptionOpen(false);
    setCardoptionnotSelected(false);
  };

  const AddUPIPaymentOption = async (data) => {
    setSelectedUpiOption('');
    setUpiOption('');
    setUpiId('');
    await dispatch(changeUpiIDprint(null));
    await dispatch(changeUpiIDName(''));
    await dispatch(changeUpiIDoptionId(null));
    setSelectedUPIPayOption(data);
    setUpinotSelected(false);
    setCardoptionnotSelected(false);
    if (data !== 'Default' && data !== 'Business' && !mode) {
      setUpiOptionOpen(false);
    }
  };

  const handleUPIButtonClick = (id, name) => {
    if (paymentloader === false) {
      setPaybtnnameselected(name);
      setPaybtnselected(id);
      let brachName1 = PaymentUpiOptions?.[0]?.BrName;
      setbrachName(brachName1);
      if (UpiPayOption?.length === 1) {
        setSelectedUPIPayOption(UpiPayOption?.[0]?.value);
        if (UpiPayOption?.[0]?.value?.toLowerCase() === 'default') {
          if (PaymentUpiOptions?.length === 1) {
            addUpiOption(
              PaymentUpiOptions?.[0]?.Mode,
              PaymentUpiOptions?.[0]?.ModeName,
              PaymentUpiOptions?.[0]?.UPIId
            );
          }
        }
      }

      setQrCode(true);
      SetSuccess(true);
    }
  };

  const EnableUpiOptions = () => {
    setUpiOptionOpen(!UpiOptionOpen);
  };

  const EnableCardOptions = () => {
    setCardOptionOpen(!CardOptionOpen);
  };

  const TotalWithoutTaxRate = async () => {
    const totalwithouttax = OrderCardDetail?.reduce((accumulator, card) => {
      return accumulator + parseFloat(card.WithoutTaxRate || 0);
    }, 0);
    setTotalWithoutTaxAmount(totalwithouttax.toFixed(2));
    await dispatch(
      changeSummeryTotalWithoutTaxAmount(totalwithouttax.toFixed(2))
    );
  };

  const TotalTaxAmt = async () => {
    const totaltax = OrderCardDetail?.reduce((accumulator, card) => {
      return accumulator + parseFloat(card.TaxAmt || 0);
    }, 0);
    setTotalTaxAmount(totaltax.toFixed(2));
    await dispatch(changeSummeryTotalTaxAmount(totaltax.toFixed(2)));
  };

  const hide = () => {
    setOpen(false);
  };

  const handleOpenChange = (newOpen) => {
    setOpen(newOpen);
  };

  const hideDefault = () => {
    setUpiOptionOpen(false);
  };

  const handlePopoverVisibleChange = (visible) => {
    setUpiOptionOpen(visible);
  };

  const handlePopoverVisibleChangeCard = (visible) => {
    setCardOptionOpen(visible);
  };

  const HandleholdModelOpen = () => {
    setHold(true);
  };

  const handleHoldCancel = () => {
    setHold(false);
  };

  const handleAddCustomer = () => {
    if (Custdisable === false) {
      setAddCustomer(true);
    }
  };

  const handleAddCustomerCancel = () => {
    setAddCustomer(false);
  };

  const gettodaydate = () => {
    const currentDate = new Date();
    const day = String(currentDate.getDate()).padStart(2, '0');
    const month = String(currentDate.getMonth() + 1).padStart(2, '0'); // Month is 0-based, so we add 1.
    const year = currentDate.getFullYear();

    const tempformattedDate = `${year}-${month}-${day}`;
    setFormattedDate(tempformattedDate);
  };

  const getBookingTypeId = async () => {
    let tempconfigdata = await dispatch(
      getConfigType({ TypeName: 'Booking Type' })
    ).unwrap();

    if (tempconfigdata?.data?.statusCode == 1) {
      setConfigDataList(tempconfigdata?.data?.data);
      let configdata = tempconfigdata?.data?.data;
      let checkName = BookingTypeBoth ? 'DineIn,TakeAway' : BookingType;

      let filterconfigdata = configdata?.find(
        (a) => a?.ConfigName === checkName
      );
      setSelectedBookingType(filterconfigdata?.ConfigId);
    }
  };

  const Print = async () => {
    const style = await PrintStyleFunction(
      printerTemplateStyle == undefined ? 'Style 13' : printerTemplateStyle,
      'Sales'
    );
    const stylesMap = {
      'Style 1': 'PrintStyle1',
      'Style 2': 'PrintStyle2',
      'Style 3': 'PrintStyle3',
      'Style 4': 'PrintStyle4',
      'Style 5': 'PrintStyle5',
      'Style 6': 'PrintStyle6',
      'Style 7': 'PrintStyle7',
      'Style 8': 'PrintStyle8',
      'Style 9': 'PrintStyle9',
      'Style 10': 'PrintStyle10',
      'Style 11': 'PrintStyle11',
      'Style 12': 'PrintStyle12',
      'Style 13': 'RePrint',
      A4: 'PrintStyleA4',
      A5: 'PrintStyleA5',
      A4Standard: 'A4Standard',
      TaxInvoice: 'TaxInvoice',
    };

    const selectedStyle =
      stylesMap[
        printerTemplateStyle == undefined ? 'Style 13' : printerTemplateStyle
      ];

    if (selectedStyle) {
      await Promise.all(
        PrintOrderDetails?.[0]?.OrderDetails?.map(
          async (orderDetail, index) => {
            await printDiv(`${selectedStyle}-${index}`, style); // Use unique IDs for each print
            if (orderDetail?.BookingTypeName !== 'Dine In') {
              const groupedTokens = orderDetail?.productDetails?.reduce(
                (acc, item, idx) => {
                  if (item.TokenAvailable === 'Y') {
                    if (!item.CounterName) {
                      // If CounterName is null or empty
                      acc[`individual-${idx}-${item.ProdId}`] = [item]; // Unique entry for each null/empty CounterName item
                    } else {
                      if (!acc[item.CounterName]) {
                        acc[item.CounterName] = [];
                      }
                      acc[item.CounterName].push(item); // Group by CounterName
                    }
                  }
                  return acc;
                },
                {}
              );

              // Iterate over grouped tokens and print them
              const tokensToPrint = Object.entries(groupedTokens).map(
                async ([counterName, items], idx) => {
                  // Use the counterName (or unique identifier for individual items) as part of the tokenId
                  const tokenId = `${idx}-${items?.[0]?.ProdId}-${counterName}`;
                  await TokenPrint(tokenId, items); // Pass all grouped items to the print function
                }
              );
              if (tokensToPrint?.length > 0) {
                await Promise.all(tokensToPrint);
              }
            }
          }
        )
      );

      setPrintOrderDetails([]);
      closePrintOption();
    }
  };

  const TokenPrint = async (index) => {
    try {
      console.log(`Starting token print for index ${index}`);

      const stylePrint = `<style> 
      *{
        font-family:Poppins;
      }
    
      .Reprint-body{  
        height: 100%;
        margin: 0vw 0vh;
        padding: 1vw 2vh;
      }
    
      .Re-print-body-Tr {
        text-align: center;
        font-family: Poppins;
      }
      .Re-print-body-Product{
        text-align:left;
        font-size:12px;
        border: 1px solid black;
        border-collapse: collapse;
        font-family: Poppins;
        padding-left:5px;
      }
      .Re-print-body-Rate{
        text-align:right;
          font-size:12px;
          padding-right:5px;
          border: 1px solid black;
          border-collapse: collapse;
          font-family: Poppins;
      }
      .Re-print-Logo{
        width: 50px ;
        height: 50px;
        margin-bottom: -20px;
       }
    
      .Re-print-title {
        font-size: 19px;
        font-weight: 600;
        font-family: Gilroy;
        margin-bottom: -10px;
        text-align:center;
      }
      
      .Re-print-Add {
        font-size: 12px;
        font-family: Poppins;
        margin-bottom: -5px;
      }
      
      .Re-print-GST {
        font-size: 12px;
        font-family: Poppins;
      }
    
      .Re-print-top {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
      }
    
      .Re-print-top2 {
        display: flex;
        width: 90%;
        margin:0px 10px;
        font-family: Gilroy;
        justify-content: space-between;
      }
      .Re-print-top3 {
        display: flex;
        width: 75%;
        margin:0px 30px;
        font-family: Gilroy;
        justify-content: space-between;
        margin-bottom: 5px;
      }
      .Re-print-bold{
        font-size: 8px;
        font-weight: 400;
        font-family: Poppins;
        letter-spacing: 1px;
      }
    
      .Re-print-bold1{
        font-size: 12px;
        font-weight: 600;
        font-family: Poppins;
        letter-spacing: 1px;
      }
      .Re-print-bold2{
        width:100%;
        font-size: 12px;
        font-family: Poppins;
        text-align:center;
      }
    
      .Re-print-Table {
          width: 90%;
          margin:0px 10px;
        }
    
      .Re-print-Table ,.Re-print-th ,.Re-print-td {
          border: 1px solid black;
          border-collapse: collapse;
          font-family: Poppins;
        }
        .Re-print-td
        {
          font-size:12px;
        }
    
      </style>`;
      if (TokenOnly?.SettingValue === 'Y') {
        if (IndividualToken?.SettingValue === 'Y') {
          await printDiv(`TokenOnlySingle${index}`, stylePrint);
        } else {
          await printDiv(`TokenOnlyMultiple${index}`, stylePrint);
        }
      } else {
        await printDiv(`TakeawayToken${index}`, stylePrint);
      }
    } catch (error) {
      console.error(`Error printing token for index ${index}:`, error);
    }
  };

  const AllProductTokenFunction = async () => {
    if (IndividualToken?.SettingValue === 'Y') {
      await Promise.all(
        PrintOrderDetails?.[0]?.OrderDetails?.map(
          async (orderDetail, index) => {
            const groupedTokens = orderDetail?.productDetails?.reduce(
              (acc, item, idx) => {
                if (item.TokenAvailable === 'Y') {
                  if (!item.CounterName) {
                    // If CounterName is null or empty
                    acc[`single-${idx}-${item.ProdId}`] = [item]; // Unique entry for each null/empty CounterName item
                  } else {
                    if (!acc[item.CounterName]) {
                      acc[item.CounterName] = [];
                    }
                    acc[item.CounterName].push(item); // Group by CounterName
                  }
                }
                return acc;
              },
              {}
            );

            // Iterate over grouped tokens and print them
            const tokensToPrint = Object.entries(groupedTokens).map(
              async ([counterName, items], idx) => {
                // Use the counterName (or unique identifier for individual items) as part of the tokenId
                const tokenId = `${idx}-${items?.[0]?.ProdId}-${counterName}`;
                await TokenPrint(tokenId, items); // Pass all grouped items to the print function
              }
            );
            if (tokensToPrint?.length > 0) {
              await Promise.all(tokensToPrint);
            }
            setPrintOrderDetails([]);
            closePrintOption();
          }
        )
      );
    } else {
      await Promise.all(
        PrintOrderDetails?.[0]?.OrderDetails?.map(
          async (orderDetail, index) => {
            await TokenPrint(`${index}-${orderDetail?.OrderId}`);
          }
        )
      );
      setPrintOrderDetails([]);
      closePrintOption();
    }
  };

  const closePrintOption = () => {
    setShowWhatsAppShare(false);
    setSMSShare(false);
    setPrintOrderDetails([]);
    setMobileNoWhatsApp();
  };

  const getUnpaiddatas = async () => {
    let data = {
      CompId: CompId,
      BranchId: BranchId,
      AppId: AppId,
    };
    await dispatch(getUnpaidData(data)).unwrap();
  };

  const ProductSummary = (salesData) => {
    // Create a map to store the aggregated values for each unique product
    const productMap = new Map();
    // Iterate over the sales data to aggregate values
    salesData.forEach((item) => {
      let offerMode = item?.OfferMode?.trim();
      offerMode = offerMode && offerMode !== '' ? offerMode : null;

      let OfferId = null;
      if (
        item?.OfferMessage &&
        Array.isArray(item.OfferMessage) &&
        item.OfferMessage.length > 0
      ) {
        OfferId = item.OfferMessage[0]?.OfferId || null;
      }

      const keyData = [
        item.ProdId || null,
        item.InwardDtlId || null,
        item.BookingType || null,
        item.SinglePc || null,
        item.OrderRate || null,
        offerMode,
        OfferId,
      ];

      const key = keyData.join('-');

      if (productMap.has(key)) {
        const existingItem = productMap.get(key);
        existingItem.OrderQty =
          (existingItem.OrderQty || 0) + (item.OrderQty || 0);
        existingItem.TotalAmt =
          (existingItem.TotalAmt || 0) + (item.TotalAmt || 0);
        existingItem.TaxAmt =
          (parseFloat(existingItem.TaxAmt) || 0) +
          (parseFloat(item.TaxAmt) || 0);
      } else {
        const newItem = {
          ...item,
          OfferMode: offerMode,
          OfferMessage:
            item?.OfferMessage && Array.isArray(item.OfferMessage)
              ? item.OfferMessage
              : null,
        };
        productMap.set(key, newItem);
      }
    });

    // Convert the map values back to an array
    const aggregatedProducts = Array.from(productMap.values());

    return aggregatedProducts;
  };

  const UpiPayment = () => {
    if (OrderStatus) {
      AddBookingDetails('Dine-In', false);
    } else {
      if (SelectedUpiOption && TotalAmount == 0) {
        Upimodel('Submit');
      } else if (SelectedUpiOption) {
        setUpiOpen(true);
        const customerDisplayWindow = getCustomerDisplayWindow();
        if (customerDisplayWindow && !customerDisplayWindow.closed) {
          const updatedData = {
            OrderTotalAmount: TotalAmount,
          };
          customerDisplayWindow.postMessage(updatedData, '*');
        } else {
          console.error(
            'Customer display window is not available or has been closed.'
          );
        }
      } else {
        setUpinotSelected(true);
        setMessageType('error');
        setMessageData('Please Select Upi Option');
      }
    }
  };

  const handleCreditCustomer = (type) => {
    setCreditCustomer(false);
    if (type == 'Submit') {
      Booking(BookingType, true);
    }
    if (type == 'Cancel') {
      setPaybtnselected(PaymentOptionsModeId);
      setPaybtnnameselected(PaymentOptionsModeName);
    }
    const customerDisplayWindow = getCustomerDisplayWindow();
    if (customerDisplayWindow && !customerDisplayWindow.closed) {
      const updatedRemovedData = {
        type: 'remove',
        keyValue: 'OrderTotalAmount',
      };
      customerDisplayWindow.postMessage(updatedRemovedData, '*');
    } else {
      console.error(
        'Customer display window is not available or has been closed.'
      );
    }
  };

  const ClearAllGlobalStateDatas = async (value) => {
    if (OfferCheckedInSetup && preferenceOffer) {
      await applyOffer([]);
    } else {
      dispatch(changeOrderCardDetails([]));
    }
    dispatch(changeBillEditingMode(false));
    await dispatch(changePreviousOrderPayment([]));
    await dispatch(changePreviousOrderOfferDetail([]));
    dispatch(changeTipAmount(0));
    dispatch(changeFullOfferAppliedProducts([]));
    dispatch(ChangeFullFreeProductList([]));
    dispatch(changeLoyaltyConsumedQuantities({}));
    await dispatch(ChangeTotalAmount([]));
    await dispatch(changeReorderHoldDetails({}));
    await dispatch(changeReorderProductDetails([]));
    setFirstPaymentclick(false);
    await dispatch(ChangeNavHoldData(false));
    await dispatch(changeCustomerID(null));
    await dispatch(changeSelectedCustId());
    await dispatch(changeSelectedOption(null));
    setPaybtnselected(PaymentOptionsModeId);
    setPaybtnnameselected(PaymentOptionsModeName);
    setQrCode(false);
    setUpinotSelected(false);
    setCurrentOrderNetAmount(0);
    setPreviousNetAmount(0);

    if (holdCheckedSalesSetup) {
      getHolddata();
    }
    if (defaultBookingType === 'Both') {
      await dispatch(changeBookingType('TakeAway'));
    }
    await dispatch(changeSelProdWiseEst([]));
    await dispatch(ChangeOverAllDiscSales(null));
    await dispatch(ChangeOverAllDiscEstimate(null));
    // await dispatch(changeEstimateBooking(null))
    // clearInvoiceDate
    clearInvoiceDate();
    dispatch(changeCurrentOrderId(null));
    getstockbadge();
    Combodata?.length > 0 && Combocarddata();
    getUnpaiddatas();
    await dispatch(changeSelectTable([]));
    await dispatch(changeSelectChair([]));
    await dispatch(changeSelectedTableDetails([]));
    await dispatch(changeOrderType());
    if (value === 'Dine-In') {
      navigate(`${subDirectory}sales/dine-in`);
    }
    let data = {
      CompId: CompId,
      BranchId: BranchId,
      AppId: AppId,
      UserId: UserId,
      FromDate: currentDateValue,
      ToDate: currentDateValue,
    };
    await dispatch(getSalesDetailData(data));
  };

  const AddBookingDetails = async (value, pay) => {
    const customerDisplayWindow = getCustomerDisplayWindow();
    const OnUpiSelected = PaymentOptions?.find(
      (item) => item.ModeId === paybtnselected
    );

    if (
      OnUpiSelected?.ModeName?.toLowerCase() === 'upi' &&
      (SelectedUPIPayOption?.toLowerCase() === 'default' ||
        SelectedUPIPayOption?.toLowerCase() === 'business')
    ) {
      SetSuccess(false);
      setTimeout(function () {
        SetSuccess(true);
        // Add your state change code here
        // For example:
        // setNewState(newValue);
      }, 3000);
      if (SelectedUpiOption) {
        Booking(value, pay);
      } else {
        setUpinotSelected(true);
        setMessageType('error');
        setMessageData('Please Select Upi Option');
      }
    } else if (
      OnUpiSelected?.ModeName?.toLowerCase() === 'card' &&
      PaymentgatewayCard?.length > 0 &&
      PaymentDeviceCard?.length > 0
    ) {
      if (SelectedCardOption) {
        if (SelectedCardOption?.toLowerCase() === 'pg') {
          if (customerDisplayWindow && !customerDisplayWindow.closed) {
            if (SelCustId) {
              Booking(value, pay);
            } else {
              setMessageType('error');
              setMessageData('Please Select Customer');
            }
          } else {
            setMessageType('error');
            setMessageData('Please Set the customer display');
          }
        } else {
          Booking(value, pay);
        }
      } else {
        setCardoptionnotSelected(true);
        setMessageType('error');
        setMessageData('Please Select Card Option');
      }
    } else if (OnUpiSelected?.ModeName?.toLowerCase() === 'credit') {
      if (!SelCustId) {
        setMessageType('error');
        setMessageData('Please Select Customer');
      } else {
        setCreditCustomer(true);
        const customerDisplayWindow = getCustomerDisplayWindow();
        if (customerDisplayWindow && !customerDisplayWindow.closed) {
          const updatedData = {
            OrderTotalAmount: TotalAmount,
          };
          customerDisplayWindow.postMessage(updatedData, '*');
        } else {
          console.error(
            'Customer display window is not available or has been closed.'
          );
        }
      }
    } else if (
      OnUpiSelected?.ModeName?.toLowerCase() === 'upi' &&
      SelectedUPIPayOption?.toLowerCase() === 'pg'
    ) {
      if (customerDisplayWindow && !customerDisplayWindow.closed) {
        if (SelCustId) {
          Booking(value, pay);
        } else {
          setMessageType('error');
          setMessageData('Please Select Customer');
        }
      } else {
        setMessageType('error');
        setMessageData('Please Set the customer display');
      }
    } else if (
      OnUpiSelected?.ModeName?.toLowerCase() === 'card' &&
      SelectedCardOption?.toLowerCase() === 'pg'
    ) {
      if (customerDisplayWindow && !customerDisplayWindow.closed) {
        if (SelCustId) {
          Booking(value, pay);
        } else {
          setMessageType('error');
          setMessageData('Please Select Customer');
        }
      } else {
        setMessageType('error');
        setMessageData('Please Set the customer display');
      }
    } else {
      Booking(value, pay);
    }
  };

  const extrachargesbookingtype = (extradata) => {
    const TakAwayId = ConfigDataList?.find(
      (a) => a?.ConfigName === 'TakeAway'
    )?.ConfigId;
    const DineinId = ConfigDataList?.find(
      (a) => a?.ConfigName === 'Dine In'
    )?.ConfigId;
    let tempdata = extradata?.map((data) => ({
      ...data,
      BookingType: data?.BookingTypeName === 'Dine In' ? DineinId : TakAwayId,
    }));
    return tempdata;
  };

  const Booking = async (value, pay) => {
    const TakAwayId = ConfigDataList?.find(
      (a) => a?.ConfigName === 'TakeAway'
    )?.ConfigId;
    const DineinId = ConfigDataList?.find(
      (a) => a?.ConfigName === 'Dine In'
    )?.ConfigId;
    setFirstPaymentclick(true);
    let temporderdetail = OrderCardDetail?.map((a) => ({
      ProdId: a.ProdId,
      Type: a.Type,
      OrderQty: a.OrderQty,
      OrderRate: a.OrderRate,
      // TotalAmt: a.OrderQty * a.OrderRate,
      TotalAmt: a.TotalAmt,
      TaxAmt: a.TaxAmt,
      RefundQty: 0,
      InwardDtlId: a.InwardDtlId,
      TaxId: a.TaxId,
      ProdNameQty:
        UomPrint?.SettingValue === 'N'
          ? `${a.ProdName} ${a.UomName?.toLowerCase() === 'half' ? '(Half)' : ''}`
          : `${a.ProdName} ${a.Size} ${a.UomName}`,
      OrderStatus: 'O',
      OrderType:
        BookingType === 'Dine In' ||
        BookingTypeBoth ||
        Estimation?.SettingValue == 'N'
          ? 'S'
          : GlobEstBooking === 'OvrAllEst'
            ? 'E'
            : GlobEstBooking === 'ParEst'
              ? GlobProdwisedata?.includes(
                  a.InwardDtlId + ' ' + a?.BookingTypeName
                )
                ? 'E'
                : 'S'
              : 'S',
      SinglePc: a.SinglePc,
      BookingType: a.BookingTypeName === 'Dine In' ? DineinId : TakAwayId,
      OfferValue: a?.Type === 'C' ? a?.OfferValue : a.Offer,
      OfferAmt: a?.Type === 'C' ? a?.TotalAmt : a.Offer,
      OfferType: a?.Type === 'C' ? a?.OfferType : '',
      OfferMode: a?.OfferMode,
      OfferMessage: a?.OfferMessage,
      CounterName: a?.TokenAvailable === 'Y' ? a?.CounterName : null,
      ProductIdentifierDtls: a.ProductIdentifierDtls,
      ModelNumber: a.ModelNumber,
      BatchRef: a.BatchRef,
      PackageDtl: a.PackageDtl,
      SetCount: a.SetCount,
    }));
    const NotSlectedTypeFind = temporderdetail?.find(
      (a) => a?.BookingType != SelectedBookingType
    );
    const { totalwithouttax, totaltax } = OrderCardDetail?.reduce(
      (totals, card) => {
        totals.totalwithouttax += parseFloat(card.WithoutTaxRate || 0);
        totals.totaltax += parseFloat(card.TaxAmt || 0);
        return totals;
      },
      { totalwithouttax: 0, totaltax: 0 }
    ) || { totalwithouttax: 0, totaltax: 0 };
    let updatedOfferDetails = offerAppliedProducts;
    if (GlobEstBooking !== 'Sales') {
      updatedOfferDetails = offerAppliedProducts?.filter(
        (item) =>
          !(
            item.TableName === 'LoyaltyPoints' &&
            item.TableUniqueName === 'UniqueId' &&
            item.Type === 'A'
          )
      );
    }
    let temppostdata = {
      SalesMode: RetailWSSalesType || 'R',
      CompId: CompId,
      BranchId: BranchId,
      AppId: AppId,
      OrderDate: Custombill ? invoiceDate : null,
      CustomOrderNo: Custombill ? CurrentOrderId : null,
      OrderType:
        Object.keys(ReportholdData)?.length > 0
          ? ReportholdData?.OrderType
          : 'S',
      CustSuppId: SelCustId ? SelCustId : null,
      Reference: 'test',
      BookingType:
        NotSlectedTypeFind && !BookingTypeBoth
          ? NotSlectedTypeFind?.BookingType
          : SelectedBookingType,
      // (NotSlectedTypeFind?.length>0 && !BookingTypeBoth)?NotSlectedTypeFind?.[0]?.BookingTypeName:

      ServiceProvider: 0,
      ActiveStatus: 'A',
      CreatedBy: UserId,
      AddlInfo: 'test',
      BillAmount: totalwithouttax.toFixed(2),
      OverallDiscSales: OverAllSales > 0 ? OverAllSales : 0,
      OverallDiscEst: OverAllEstimate > 0 ? OverAllEstimate : 0,
      TaxAmount: totaltax.toFixed(2),
      VatAmount: 0,
      NetAmount: Math.round(TotalAmount),
      PaymentType:
        Paybtnnameselected?.toLowerCase() === 'upi'
          ? SelectedUPIPayOption?.toLowerCase() === 'pd'
            ? PaymentDeviceUPI?.[0]?.ModeId
            : SelectedUPIPayOption?.toLowerCase() === 'pg'
              ? PaymentgatewayUPI?.[0]?.ModeId
              : paybtnselected
          : paybtnselected
            ? paybtnselected
            : null,
      GivenAmt: 0,
      BalGiven: 0,
      BookingMedia: 'DW',
      RefundAmount: 0,
      ServiceCategory: OtherServiceTicketClaim?.ServiceCategory || null,
      OtherServiceTicketId: OtherServiceTicketClaim?.TicketId || null,
      OtherServiceTicketAmount: OtherServiceTicketClaim?.TotalAmt || null,
      PaymentStatus:
        Paybtnnameselected?.toLowerCase() === 'cash'
          ? 'S'
          : Paybtnnameselected?.toLowerCase() === 'credit'
            ? 'S'
            : Paybtnnameselected?.toLowerCase() === 'upi' &&
                SelectedUPIPayOption?.toLowerCase() === 'default'
              ? 'S'
              : 'P',
      OrderDtlDetails:
        Object.keys(ReportholdData)?.length > 0
          ? ProductSummary(temporderdetail)
          : temporderdetail,
      // (BookingType === "Dine In" || BookingTypeBoth)
      ExtraChargeDetails:
        GlobalExtraCharge?.length > 0
          ? extrachargesbookingtype(GlobalExtraCharge)
          : null,
      SalesTableLinkDetails:
        SelectedTableDetails?.length > 0
          ? globalTipAmount === 0
            ? SelectedTableDetails
            : SelectedTableDetails?.map((item) => ({
                ...item,
                TipsAmount: globalTipAmount,
              }))
          : null,
      // "Credit": TotalAmount,
      // "Debit": 0,
      SalesPaymentType: 'normal',
      PaymentDetail: [
        {
          PaymentType:
            salesBillEdit && currentOrderNetAmount < previousNetAmount
              ? refundPaySelected
              : Paybtnnameselected?.toLowerCase() === 'upi'
                ? SelectedUPIPayOption?.toLowerCase() === 'pd'
                  ? PaymentDeviceUPI?.[0]?.ModeId
                  : SelectedUPIPayOption?.toLowerCase() === 'pg'
                    ? PaymentgatewayUPI?.[0]?.ModeId
                    : SelectedUPIPayOption?.toLowerCase() === 'business'
                      ? BusinessPayOption?.find(
                          (busupi) => busupi?.ModeId === UpiId
                        )?.ModeId
                      : paybtnselected
                : paybtnselected
                  ? paybtnselected
                  : null,
          Amount:
            salesBillEdit && currentOrderNetAmount < previousNetAmount
              ? previousNetAmount - currentOrderNetAmount
              : Math.round(TotalAmount),
          MerchantId:
            salesBillEdit && currentOrderNetAmount < previousNetAmount
              ? null
              : Paybtnnameselected?.toLowerCase() === 'upi' &&
                  SelectedUPIPayOption?.toLowerCase() === 'business'
                ? BusinessPayOption?.find((busupi) => busupi?.ModeId === UpiId)
                    ?.MerchantId
                : null,
          PaymentOptionType:
            salesBillEdit &&
            currentOrderNetAmount < previousNetAmount &&
            (refundPaySelectedName?.toLowerCase() === 'cash' ||
              refundPaySelectedName?.toLowerCase() === 'credit')
              ? 'PC'
              : Paybtnnameselected?.toLowerCase() === 'cash'
                ? 'PC'
                : Paybtnnameselected?.toLowerCase() === 'credit'
                  ? 'PC'
                  : Paybtnnameselected?.toLowerCase() === 'card'
                    ? SelectedCardOption
                    : Paybtnnameselected?.toLowerCase() === 'upi'
                      ? SelectedUPIPayOption?.toLowerCase() === 'default'
                        ? 'PC'
                        : SelectedUPIPayOption?.toLowerCase() === 'business'
                          ? 'BU'
                          : SelectedUPIPayOption
                      : null,
          ModeOfPayment:
            salesBillEdit && currentOrderNetAmount < previousNetAmount
              ? null
              : SelectedUPIPayOption?.toLowerCase() === 'default'
                ? PaymentUpiOptions?.find((upipay) => upipay?.UPIId === UpiId)
                    ?.UPIDetailId
                : SelectedUPIPayOption?.toLowerCase() === 'business'
                  ? BusinessPayOption?.find(
                      (busupi) => busupi?.ModeId === UpiId
                    )?.MerchantUPIId
                  : null,
          AccountDtl:
            salesBillEdit && currentOrderNetAmount < previousNetAmount
              ? []
              : Paybtnnameselected?.toLowerCase() === 'upi' &&
                  SelectedUPIPayOption?.toLowerCase() === 'default'
                ? useOptions?.[0]?.PaymentDetails?.Payatthecounter?.find(
                    (upipay) => upipay?.UPIId === UpiId
                  )
                : (Paybtnnameselected?.toLowerCase() === 'upi' &&
                      SelectedUPIPayOption?.toLowerCase() === 'pd') ||
                    (Paybtnnameselected?.toLowerCase() === 'card' &&
                      SelectedCardOption?.toLowerCase() === 'pd')
                  ? useOptions?.[0]?.PaymentDetails?.PaymentDevice
                  : (Paybtnnameselected?.toLowerCase() === 'upi' &&
                        SelectedUPIPayOption?.toLowerCase() === 'pg') ||
                      (Paybtnnameselected?.toLowerCase() === 'card' &&
                        SelectedCardOption?.toLowerCase() === 'pg')
                    ? useOptions?.[0]?.PaymentDetails?.PaymentGateway
                    : [],
          PaymentStatus:
            salesBillEdit && currentOrderNetAmount < previousNetAmount
              ? 'S'
              : Paybtnnameselected?.toLowerCase() === 'cash'
                ? 'S'
                : Paybtnnameselected?.toLowerCase() === 'credit'
                  ? 'S'
                  : Paybtnnameselected?.toLowerCase() === 'upi' &&
                      SelectedUPIPayOption?.toLowerCase() === 'default'
                    ? 'S'
                    : 'P',
          Debit:
            salesBillEdit &&
            currentOrderNetAmount < previousNetAmount &&
            refundPaySelectedName?.toLowerCase() === 'credit'
              ? Math.round(previousNetAmount - currentOrderNetAmount)
              : 0,
          Credit: salesBillEdit
            ? currentOrderNetAmount > previousNetAmount &&
              Paybtnnameselected?.toLowerCase() === 'credit'
              ? Math.round(TotalAmount)
              : 0
            : Paybtnnameselected?.toLowerCase() === 'credit'
              ? Math.round(TotalAmount)
              : 0,
        },
      ],
      OrderOfferDetail: updatedOfferDetails,
      RefDetails: [
        {
          FreeProdList: FreeProdList,
          OfferAppliedProductList: offerAppliedProducts,
        },
      ],
    };
    let PostData = temppostdata;

    if (value === 'Dine-In') {
      PostData['PaymentStatus'] = pay ? 'S' : 'P';
      PostData['PaymentDetail'] = !pay && [];
      PostData['PaymentType'] = !pay && '';
    } else if (value === 'Hold') {
      ((PostData['PaymentStatus'] = pay ? 'S' : 'P'),
        (PostData['PaymentDetail'] = !pay && []));
      PostData['PaymentType'] = !pay && '';
      PostData['ActiveStatus'] = pay ? 'A' : 'D';
    } else if (value === 'Unpaid') {
      PostData['PaymentStatus'] = pay ? 'S' : 'P';
      PostData['PaymentDetail'] = !pay && [];
      PostData['PaymentType'] = !pay && '';
      PostData['PrintType'] = 'Y';
    }

    Object.keys(ReportholdData)?.length > 0
      ? OrderType === 'Failed'
        ? PutFailedPayment(PostData, value, pay)
        : PutBooking(PostData, value, pay)
      : !OtherServicesglobal
        ? PostBooking(PostData, value)
        : OtherServicePostBooking(PostData, value);
    // getHolddata()
    // getstockbadge();
    // Combocarddata();
  };

  const PostBooking = async (PostData, value) => {
    let response = await dispatch(PostBookingData(PostData)).unwrap();
    if (response?.data?.statusCode == 1) {
      let Paymentdevicefilter = response?.data?.PaymentOrderDtl?.filter(
        (item) =>
          item?.PaymentOptionType?.toLowerCase() === 'pd' &&
          item?.PaymentStatus === 'P'
      );
      let PaymentGatewayfilter = response?.data?.PaymentOrderDtl?.filter(
        (item) =>
          item?.PaymentOptionType?.toLowerCase() === 'pg' &&
          item?.PaymentStatus === 'P'
      );
      let PayatCounterfilter = response?.data?.PaymentOrderDtl?.filter(
        (item) => item?.PaymentOptionType?.toLowerCase() === 'pc'
      );
      let businessUPIfilter = response?.data?.PaymentOrderDtl?.filter(
        (item) =>
          item?.PaymentOptionType?.toLowerCase() === 'bu' &&
          item?.PaymentStatus === 'P'
      );
      if (
        PayatCounterfilter?.length === 1 ||
        response?.data?.PaymentOrderDtl?.length === 0
      ) {
        setMessageType('success');
        setMessageData(
          response?.data?.response +
            ' ' +
            (response?.data?.OrderDetails?.length > 0
              ? response?.data?.OrderId &&
                extractLastNumberOrderId(
                  response?.data?.OrderId,
                  response?.data?.OrderDetails?.[0]?.FYStatus
                )
              : '')
        );
        response?.data?.OrderDetails?.length > 0 &&
          setPrintOrderDetails([response?.data]);
        CustomerDisplay(value);
        filteredSettingNames?.includes('whatsapp') &&
          MobileNoWhatsApp?.value &&
          handleURL([response?.data]);
        ClearAllGlobalStateDatas(value);
      }

      if (Paymentdevicefilter?.length === 1) {
        if (
          Paymentdevicefilter?.[0]?.PaymentOptionType?.toLowerCase() === 'pd'
        ) {
          PaymentDeviceFlow(Paymentdevicefilter, value);
        }
      } else {
        console.log('more pd data');
      }
      if (PaymentGatewayfilter?.length === 1) {
        if (
          PaymentGatewayfilter?.[0]?.PaymentOptionType?.toLowerCase() === 'pg'
        ) {
          await dispatch(changePaymentloader(true));
          const customerDisplayWindow = getCustomerDisplayWindow();
          if (customerDisplayWindow && !customerDisplayWindow.closed) {
            const updatedData = {
              OrderBookingId: PaymentGatewayfilter?.[0]?.OrderId,
              Paymentgateway: true,
              OrderPaymentId: PaymentGatewayfilter?.[0]?.PaymentOrderId,
              OrderTotalAmount: PaymentGatewayfilter?.[0]?.Amount,
            };
            customerDisplayWindow.postMessage(updatedData, '*');
          } else {
            console.error(
              'Customer display window is not available or has been closed.'
            );
          }
          const checkPaymentStatus = async () => {
            const intervalId = setInterval(async () => {
              try {
                let getpaymentgatewaydetail = await dispatch(
                  PaymentGatewayGetdetail(PaymentGatewayfilter?.[0]?.OrderId)
                ).unwrap();

                if (getpaymentgatewaydetail?.data?.statusCode === 1) {
                  let paymentdataget =
                    getpaymentgatewaydetail?.data?.PaymentOrderDtl?.find(
                      (item) =>
                        item?.PaymentOrderId ===
                        PaymentGatewayfilter?.[0]?.PaymentOrderId
                    )?.PaymentStatus;

                  if (paymentdataget === 'S') {
                    setMessageType('success');
                    setMessageData('Payment Success');
                    await dispatch(changePaymentloader(false));
                    if (
                      getpaymentgatewaydetail?.data?.OrderDetails?.length > 0
                    ) {
                      setPrintOrderDetails([getpaymentgatewaydetail?.data]);
                      CustomerDisplay(value);

                      ClearAllGlobalStateDatas(value);
                    }
                    clearInterval(intervalId); // Stop the loop when payment is successful
                  } else if (paymentdataget === 'F') {
                    setMessageType('error');
                    setMessageData('Payment Failed');
                    await dispatch(changePaymentloader(false));
                    setFirstPaymentclick(false);
                    setPaybtnselected(PaymentOptionsModeId);
                    setPaybtnnameselected(PaymentOptionsModeName);
                    clearInterval(intervalId); // Stop the loop when payment fails
                    CustomerDisplayRemovedData();
                    ClearAllGlobalStateDatas(value);
                  }
                }
              } catch (error) {
                console.error('Error fetching payment details: ', error);
              }
            }, 3000); // Call the API every 3 seconds
          };

          // Call the function to start checking payment status
          checkPaymentStatus();
        }
      } else {
        console.log('more pg data');
      }
      if (businessUPIfilter?.length === 1) {
        businessUPIFlow(
          businessUPIfilter,
          response?.data?.OrderId,
          response?.data?.PaymentPageLink
        );
      }
      dispatch(triggerCustomerRefresh());
    } else {
      setMessageType('error');
      setMessageData(response?.data?.response);
      setFirstPaymentclick(false);
      // clearInvoiceDate
      clearInvoiceDate();
      dispatch(changeCurrentOrderId(null));
    }
  };

  const PutBooking = async (putdatas, value, pay) => {
    let putdata = putdatas;
    putdata['OrderId'] = ReportholdData?.OrderId;
    putdata['SalesId'] = ReportholdData?.SalesId;
    putdata['UpdatedBy'] = UserId;
    if (value === 'Dine-In') {
      putdata['PaymentStatus'] = pay ? 'S' : 'P';
      putdata['PaymentDetail'] = !pay && [];
      putdata['PaymentType'] = !pay && '';
    } else if (value === 'Hold') {
      ((putdata['PaymentStatus'] = pay ? 'S' : 'P'),
        (putdata['PaymentDetail'] = !pay && []));
      putdata['PaymentType'] = !pay && '';
      putdata['ActiveStatus'] = pay ? 'A' : 'D';
    } else if (value === 'Unpaid') {
      putdata['PaymentStatus'] = pay ? 'S' : 'P';
      putdata['PaymentDetail'] = !pay && [];
      putdata['PaymentType'] = !pay && '';
      putdata['PrintType'] = 'Y';
    }
    let response = null;
    if (salesBillEdit) {
      response = await dispatch(putSalesBillEdit(putdata)).unwrap();
    } else {
      response = await dispatch(PutBookingData(putdata)).unwrap();
    }
    if (value !== 'Unpaid') {
      if (response?.data?.statusCode == 1) {
        let Paymentdevicefilter = response?.data?.PaymentOrderDtl?.filter(
          (item) =>
            item?.PaymentOptionType?.toLowerCase() === 'pd' &&
            item?.PaymentStatus === 'P'
        );
        let PaymentGatewayfilter = response?.data?.PaymentOrderDtl?.filter(
          (item) =>
            item?.PaymentOptionType?.toLowerCase() === 'pg' &&
            item?.PaymentStatus === 'P'
        );
        let PayatCounterfilter = response?.data?.PaymentOrderDtl?.filter(
          (item) => item?.PaymentOptionType?.toLowerCase() === 'pc'
        );
        if (
          PayatCounterfilter?.length === 1 ||
          response?.data?.PaymentOrderDtl?.length === 0
        ) {
          setMessageType('success');
          setMessageData(
            response?.data?.response +
              ' ' +
              (response?.data?.OrderDetails?.length > 0
                ? response?.data?.OrderId &&
                  extractLastNumberOrderId(
                    response?.data?.OrderId,
                    response?.data?.OrderDetails?.[0]?.FYStatus
                  )
                : '')
          );
          response?.data?.OrderDetails?.length > 0 &&
            setPrintOrderDetails([response?.data]);
          CustomerDisplay(value);

          ClearAllGlobalStateDatas(value);
        }
        if (Paymentdevicefilter?.length === 1) {
          if (
            Paymentdevicefilter?.[0]?.PaymentOptionType?.toLowerCase() === 'pd'
          ) {
            PaymentDeviceFlow(Paymentdevicefilter, value);
          }
        } else {
          console.log('more pd data');
        }
        if (PaymentGatewayfilter?.length === 1) {
          PaymentGatewayFlow(PaymentGatewayfilter);
        } else {
          setPrintOrderDetails([response?.data]);
          // CustomerDisplay();
          ClearAllGlobalStateDatas();
          console.log('more pg data');
        }
      } else {
        // clearInvoiceDate
        clearInvoiceDate();
        dispatch(changeCurrentOrderId(null));
      }
    } else {
      setPrintOrderDetails([response?.data]);
      await dispatch(changeOrderCardDetails([]));
      await dispatch(changeReorderHoldDetails({}));
      await dispatch(changeReorderProductDetails([]));
      setFirstPaymentclick(false);
      if (defaultBookingType === 'Both') {
        await dispatch(changeBookingType('TakeAway'));
      }
      await dispatch(changeSelectTable([]));
      await dispatch(changeSelectChair([]));
      getUnpaiddatas();
    }
  };

  const PutFailedPayment = async (PayData, value, pay) => {
    console.log(PayData?.PaymentDetail?.[0]?.PaymentType, 'mohanPayData');
    let tempsplitdata = {
      CompId: PayData?.CompId,
      BranchId: PayData?.BranchId,
      AppId: PayData?.AppId,
      CustSuppId: PayData?.SelCustId ? SelCustId : null,
      UpdatedBy: UserId,
      OrderId: ReportholdData?.OrderId,
      PaymentType: PayData?.PaymentDetail?.[0]?.PaymentType,
      Amount: FailedTotalAmt,
      PaymentOptionType: PayData?.PaymentDetail?.[0]?.PaymentOptionType,
      ModeOfPayment: PayData?.PaymentDetail?.[0]?.ModeOfPayment,
      AccountDtl: PayData?.PaymentDetail?.[0]?.AccountDtl,
      PaymentStatus: PayData?.PaymentDetail?.[0]?.PaymentStatus,
      Debit: PayData?.PaymentDetail?.[0]?.Debit,
      Credit: PayData?.PaymentDetail?.[0]?.Credit,
    };

    let response = await dispatch(
      putSplitpaymentStatus(tempsplitdata)
    ).unwrap();
    if (response?.data?.statusCode == 1) {
      let Paymentdevicefilter = response?.data?.PaymentOrderDtl?.filter(
        (item) =>
          item?.PaymentOptionType?.toLowerCase() === 'pd' &&
          item?.PaymentStatus === 'P'
      );
      let PaymentGatewayfilter = response?.data?.PaymentOrderDtl?.filter(
        (item) =>
          item?.PaymentOptionType?.toLowerCase() === 'pg' &&
          item?.PaymentStatus === 'P'
      );
      let PayatCounterfilter = response?.data?.PaymentOrderDtl?.filter(
        (item) =>
          item?.PaymentOptionType?.toLowerCase() === 'pc' &&
          item?.PaymentType === PayData?.PaymentDetail?.[0]?.PaymentType
      );
      if (
        PayatCounterfilter?.length > 0 ||
        response?.data?.PaymentOrderDtl?.length === 0
      ) {
        setMessageType('success');

        // setSplitSelPayMode({...SplitSelPayMode,...{[`PaymentStatus-${i}`]:"S"}})

        const customerDisplayWindow = getCustomerDisplayWindow();
        if (customerDisplayWindow && !customerDisplayWindow.closed) {
          const updatedData = {
            upi: null,
          };
          customerDisplayWindow.postMessage(updatedData, '*');
        } else {
          console.error(
            'Customer display window is not available or has been closed.'
          );
        }
        setMessageData(
          response?.data?.response +
            ' ' +
            (response?.data?.OrderDetails?.length > 0
              ? response?.data?.OrderId &&
                extractLastNumberOrderId(
                  response?.data?.OrderId,
                  response?.data?.OrderDetails?.[0]?.FYStatus
                )
              : '')
        );
        if (response?.data?.OrderDetails?.length > 0) {
          setPrintOrderDetails([response?.data]);
          CustomerDisplay();
          ClearAllGlobalStateDatas();
        }
      }
      if (Paymentdevicefilter?.length === 1) {
        if (
          Paymentdevicefilter?.[0]?.PaymentOptionType?.toLowerCase() === 'pd'
        ) {
          PaymentDeviceFlow(Paymentdevicefilter, value);
        }
      }

      if (PaymentGatewayfilter?.length === 1) {
        if (
          PaymentGatewayfilter?.[0]?.PaymentOptionType?.toLowerCase() === 'pg'
        ) {
          PaymentGatewayFlow(PaymentGatewayfilter, value);
        }
      }
    }
  };

  const PaymentGatewayFlow = async (PaymentGatewayfilter) => {
    if (PaymentGatewayfilter?.[0]?.PaymentOptionType?.toLowerCase() === 'pg') {
      await dispatch(changePaymentloader(true));
      const customerDisplayWindow = getCustomerDisplayWindow();
      if (customerDisplayWindow && !customerDisplayWindow.closed) {
        const updatedData = {
          OrderBookingId: PaymentGatewayfilter?.[0]?.OrderId,
          Paymentgateway: true,
          OrderPaymentId: PaymentGatewayfilter?.[0]?.PaymentOrderId,
          OrderTotalAmount: PaymentGatewayfilter?.[0]?.Amount,
        };
        customerDisplayWindow.postMessage(updatedData, '*');
      } else {
        console.error(
          'Customer display window is not available or has been closed.'
        );
      }
      const checkPaymentStatus = async () => {
        const intervalId = setInterval(async () => {
          try {
            let getpaymentgatewaydetail = await dispatch(
              PaymentGatewayGetdetail(PaymentGatewayfilter?.[0]?.OrderId)
            ).unwrap();

            if (getpaymentgatewaydetail?.data?.statusCode === 1) {
              let paymentdataget =
                getpaymentgatewaydetail?.data?.PaymentOrderDtl?.find(
                  (item) =>
                    item?.PaymentOrderId ===
                    PaymentGatewayfilter?.[0]?.PaymentOrderId
                )?.PaymentStatus;

              if (paymentdataget === 'S') {
                setMessageType('success');
                setMessageData('Payment Success');
                await dispatch(changePaymentloader(false));
                if (getpaymentgatewaydetail?.data?.OrderDetails?.length > 0) {
                  setPrintOrderDetails([getpaymentgatewaydetail?.data]);
                  CustomerDisplay(value);

                  ClearAllGlobalStateDatas(value);
                }
                clearInterval(intervalId); // Stop the loop when payment is successful
              } else if (paymentdataget === 'F') {
                setMessageType('error');
                setMessageData('Payment Failed');
                await dispatch(changePaymentloader(false));
                setFirstPaymentclick(false);
                setPaybtnselected(PaymentOptionsModeId);
                setPaybtnnameselected(PaymentOptionsModeName);
                clearInterval(intervalId); // Stop the loop when payment fails
                CustomerDisplayRemovedData();
                ClearAllGlobalStateDatas(value);
                // const customerDisplayWindow = getCustomerDisplayWindow();
                // if (customerDisplayWindow && !customerDisplayWindow.closed) {
                //     const updatedData = {
                //         userData: OrderCardDetail,
                //         ExtraCharges: GlobalExtraCharge,
                //         upi: GlobalUpiID,
                //         customer: selOption != null ? selOption : GetCustId,
                //         paymentMethod: Paybtnnameselected,
                //         Paymentgateway: false,
                //         OrderTotalAmount: PaymentGatewayfilter?.[0]?.Amount

                //     };
                //     customerDisplayWindow.postMessage(updatedData, '*');
                // }
              }
            }
          } catch (error) {
            console.error('Error fetching payment details: ', error);
          }
        }, 3000); // Call the API every 3 seconds
      };

      // Call the function to start checking payment status
      checkPaymentStatus();
    }
  };

  const PaymentDeviceFlow = async (Paymentdevicefilter, value) => {
    await dispatch(changePaymentloader(true));
    await dispatch(
      changePaymentTransactionNumber(Paymentdevicefilter?.[0]?.PaymentOrderId)
    );
    let paymentdetail = {
      TransactionNumber: Paymentdevicefilter?.[0]?.PaymentOrderId,
      SequenceNumber: 1,
      AllowedPaymentMode:
        Paymentdevicefilter?.[0]?.PaymentTypeName?.toLowerCase() === 'card'
          ? '1'
          : Paymentdevicefilter?.[0]?.PaymentTypeName?.toLowerCase() === 'upi'
            ? '10'
            : '',
      Amount: `${parseInt(Paymentdevicefilter?.[0]?.Amount) * 100}`,
      ClientID: useOptions?.[0]?.PDConfigDetails?.[0]?.ClientId,
      StoreID: useOptions?.[0]?.PDConfigDetails?.[0]?.StoreId,
      UserID: useOptions?.[0]?.PDConfigDetails?.[0]?.UserId,
      MerchantID: useOptions?.[0]?.PDConfigDetails?.[0]?.MerchantId,
      SecurityToken: useOptions?.[0]?.PDConfigDetails?.[0]?.SecurityToken,
      IMEI: useOptions?.[0]?.PDConfigDetails?.[0]?.IMEI,
      AutoCancelDurationInMinutes:
        useOptions?.[0]?.PDConfigDetails?.[0]?.AutoCancelDurationInMinutes,
    };
    let apiresponse = await dispatch(PostPaymentdevice(paymentdetail)).unwrap();
    if (apiresponse?.ResponseMessage?.toLowerCase() === 'approved') {
      let pendingPaymentList = {
        MerchantID: useOptions?.[0]?.PDConfigDetails?.[0]?.MerchantId,
        SecurityToken: useOptions?.[0]?.PDConfigDetails?.[0]?.SecurityToken,
        ClientID: useOptions?.[0]?.PDConfigDetails?.[0]?.ClientId,
        StoreID: useOptions?.[0]?.PDConfigDetails?.[0]?.StoreId,
        IMEI: useOptions?.[0]?.PDConfigDetails?.[0]?.IMEI,
        PlutusTransactionReferenceId: apiresponse?.PlutusTransactionReferenceID,
        PaymentOrderId: Paymentdevicefilter?.[0]?.PaymentOrderId,
        UpdatedBy: UserId,
      };
      await dispatch(PutPendingPaymentList(pendingPaymentList)).unwrap();
      let isApproved = false;
      const startTime = Date.now();
      let postpaymentdata = {
        MerchantID: useOptions?.[0]?.PDConfigDetails?.[0]?.MerchantId,
        SecurityToken: useOptions?.[0]?.PDConfigDetails?.[0]?.SecurityToken,
        ClientID: useOptions?.[0]?.PDConfigDetails?.[0]?.ClientId,
        StoreID: useOptions?.[0]?.PDConfigDetails?.[0]?.StoreId,
        IMEI: useOptions?.[0]?.PDConfigDetails?.[0]?.IMEI,
        PlutusTransactionReferenceID: apiresponse?.PlutusTransactionReferenceID,
      };
      // Loop to call the second API every 3 seconds
      while (!isApproved) {
        let ApiResponseget = await dispatch(
          GetPaymentdeviceResponse(postpaymentdata)
        ).unwrap();

        if (ApiResponseget?.ResponseMessage?.toLowerCase() === 'txn approved') {
          let putbookingdata = {
            OrderBookingId: Paymentdevicefilter?.[0]?.OrderId,
            OrderId: Paymentdevicefilter?.[0]?.PaymentOrderId,
            PaymentStatus: 'S',
            Amount: Paymentdevicefilter?.[0]?.Amount,
            ResponseDtl: [ApiResponseget],
            PaymentType: Paymentdevicefilter?.[0]?.PaymentType,
            UpdatedBy: UserId,
          };

          let bookingpaymentupdate = await dispatch(
            PutBookingPaymentStatusChange(putbookingdata)
          ).unwrap();
          if (bookingpaymentupdate?.data?.statusCode === 1) {
            setMessageType('success');
            setMessageData(
              bookingpaymentupdate?.data?.response +
                ' ' +
                (bookingpaymentupdate?.data?.OrderDetails?.length > 0
                  ? bookingpaymentupdate?.data?.OrderId &&
                    extractLastNumberOrderId(
                      bookingpaymentupdate?.data?.OrderId,
                      bookingpaymentupdate?.data?.OrderDetail?.[0]?.FYStatus
                    )
                  : '')
            );
            bookingpaymentupdate?.data?.OrderDetails?.length > 0 &&
              setPrintOrderDetails([bookingpaymentupdate?.data]);
            CustomerDisplay(value);

            ClearAllGlobalStateDatas(value);
            await dispatch(changePaymentloader(false));
          }
          isApproved = true;
          console.log('Transaction Approved!');
          // Exit the loop
          break;
        }

        // Check if 1 minute has passed
        if (
          Date.now() - startTime >
          useOptions?.[0]?.PDConfigDetails?.[0]?.AutoCancelDurationInMinutes *
            60000
        ) {
          // 60,000 ms = 1 minute

          let putbookingdata = {
            OrderBookingId: Paymentdevicefilter?.[0]?.OrderId,
            OrderId: Paymentdevicefilter?.[0]?.PaymentOrderId,
            PaymentStatus: 'F',
            Amount: Paymentdevicefilter?.[0]?.Amount,
            ResponseDtl: [ApiResponseget],
            PaymentType: Paymentdevicefilter?.[0]?.PaymentType,
            UpdatedBy: UserId,
          };

          let bookingpaymentupdate = await dispatch(
            PutBookingPaymentStatusChange(putbookingdata)
          ).unwrap();
          if (bookingpaymentupdate?.data?.statusCode === 1) {
            setMessageType('error');
            setMessageData(
              `Payment Failed. Your Transaction Number is ${Paymentdevicefilter?.[0]?.PaymentOrderId}`
            );
            setFirstPaymentclick(false);
            setPaybtnselected(PaymentOptionsModeId);
            setPaybtnnameselected(PaymentOptionsModeName);
            await dispatch(changePaymentloader(false));
            CustomerDisplayRemovedData();
            ClearAllGlobalStateDatas(value);
          }

          console.error('Transaction not approved within 1 minute.');
          // Send an error message or handle the timeout
          // You can dispatch an action, show a notification, etc.
          break;
        }

        // Wait for 3 seconds before making the next call
        await new Promise((resolve) => setTimeout(resolve, 3000));
      }
    } else {
      let putbookingdata = {
        OrderBookingId: Paymentdevicefilter?.[0]?.OrderId,
        OrderId: Paymentdevicefilter?.[0]?.PaymentOrderId,
        PaymentStatus: 'F',
        Amount: Paymentdevicefilter?.[0]?.Amount,
        PaymentType: Paymentdevicefilter?.[0]?.PaymentType,
        UpdatedBy: UserId,
      };
      let bookingpaymentupdate = await dispatch(
        PutBookingPaymentStatusChange(putbookingdata)
      ).unwrap();
      if (bookingpaymentupdate?.data?.statusCode === 1) {
        setMessageType('error');
        setMessageData(apiresponse?.ResponseMessage);
        setFirstPaymentclick(false);
        setPaybtnselected(PaymentOptionsModeId);
        setPaybtnnameselected(PaymentOptionsModeName);
        dispatch(changePaymentloader(false));
        CustomerDisplayRemovedData();
        ClearAllGlobalStateDatas(value);
      }
    }
  };

  const businessUPIFlow = async (
    businessUPIfilter,
    OrderId,
    PaymentStatusLink
  ) => {
    // Implement your business UPI flow here
    console.log('Business UPI Flow Triggered', businessUPIfilter);
    // You can add similar logic as PaymentDeviceFlow or PaymentGatewayFlow based on your requirements
    setBusinessUPILink(PaymentStatusLink);
    setBusinessUPI(true);
    setBusinessUPIOrderId(OrderId);
  };

  const CustomerDisplayRemovedData = () => {
    const customerDisplayWindow = getCustomerDisplayWindow();
    if (customerDisplayWindow && !customerDisplayWindow.closed) {
      const updatedData = {
        userData: [],
        ExtraCharges: [],
        Paymentgateway: false,
        type: 'remove',
        keyValue: 'customer',
      };
      customerDisplayWindow.postMessage(updatedData, '*');
      const updatedRemovedData = {
        type: 'remove',
        keyValue: 'OrderTotalAmount',
      };
      customerDisplayWindow.postMessage(updatedRemovedData, '*');
    } else {
      console.error(
        'Customer display window is not available or has been closed.'
      );
    }
  };

  const CustomerDisplay = (value) => {
    const customerDisplayWindow = getCustomerDisplayWindow();
    if (value == 'TakeAway') {
      if (customerDisplayWindow && !customerDisplayWindow.closed) {
        const updatedData = {
          userData: [],
          ExtraCharges: [],
          Paymentgateway: false,
          upioption1: 'okk',
          type: 'remove',
          keyValue: 'customer',
        };
        customerDisplayWindow.postMessage(updatedData, '*');
        const updatedRemovedData = {
          type: 'remove',
          keyValue: 'OrderTotalAmount',
        };
        customerDisplayWindow.postMessage(updatedRemovedData, '*');
      } else {
        console.error(
          'Customer display window is not available or has been closed.'
        );
      }
    } else {
      if (customerDisplayWindow && !customerDisplayWindow.closed) {
        const updatedData = {
          type: 'remove',
          keyValue: 'customer',
        };
        customerDisplayWindow.postMessage(updatedData, '*');
      } else {
        console.error(
          'Customer display window is not available or has been closed.'
        );
      }
    }
  };

  function safeRound(amountStr) {
    if (amountStr == null) return '0.00';

    const cleaned = String(amountStr).replace(/[^0-9.-]+/g, '');
    const num = Number(cleaned);

    return isNaN(num) ? '0.00' : num.toFixed(2); // return as string with 2 decimals
  }

  const columns = [
    {
      title: 'Sl.No',
      key: 'sno',
      align: 'center',
      width: '100px',
      render: (text, object, index) => (
        <a style={{ color: 'black' }}>{index + 1}</a>
      ),
    },
    {
      title: 'Table Name/Chair Name',
      dataIndex: 'TableName',
      key: 'TableName',
      width: '150px',
      onCell: (_, record, index) => {
        return {
          onClick: () => {
            Unpaidfun(record);
          },
        };
      },
    },
    {
      title: 'Order Id',
      dataIndex: 'OrderID',
      key: 'OrderID',
      width: '150px',
      align: 'right',
      onCell: (_, record, index) => {
        return {
          onClick: () => {
            Unpaidfun(record);
          },
        };
      },
    },
    {
      title: "Item's",
      dataIndex: 'ProductName',
      key: 'ProductName',
      width: '250px',
      onCell: (_, record, index) => {
        return {
          onClick: () => {
            Unpaidfun(record);
          },
        };
      },
    },
    {
      title: 'Amount',
      dataIndex: 'TotalAmount',
      key: 'TotalAmount',
      width: '150px',
      align: 'right',
      render: (text) => <span>{safeRound(text)}</span>,
      onCell: (_, record, index) => {
        return {
          onClick: () => {
            Unpaidfun(record);
          },
        };
      },
    },
  ];

  const TableData = [];
  tabledata?.map((item) =>
    TableData.push({
      TableName: item.SalesTableLinkDetails?.map((item) =>
        item.ChairName == null ? item.TableName : item.ChairName
      )?.join(','),
      OrderID: extractLastNumberOrderId(item?.OrderId, item?.FYStatus),
      // 'ProductName': item.productDetails?.map(item => item?.ProdName + '-' + item?.OrderQty)?.join(','),
      // 'ProductName': item?.productDetails?.map(item => `${item?.ProdName} ${item?.Type != 'C' ? - item?.OrderQty : "1 Combo"}`).join(','),
      ProductName: item.productDetails
        ?.map(
          (item) =>
            item?.ProdName +
            '-' +
            (item?.Type != 'C' ? item?.OrderQty : '1 Combo')
        )
        ?.join(','),
      TotalAmount: item.NetAmount,
    })
  );

  const Unpaidfun = async (event) => {
    dispatch(changeunpaidflow(true));
    if (
      OrderCardDetail?.length > 0 &&
      (BookingType === 'Dine In' || BookingTypeBoth)
    ) {
      // await dispatch(changeOrderCardDetails([]))
      // await dispatch(changeOrderCardDetails(tabledata?.[event]?.productDetails))
      // await dispatch(ChangeTotalAmount(tabledata?.[event]?.ExtraChargeDetails))
      // await dispatch(changeUnpaidData(true))
      // await dispatch(changeReorderHoldDetails([tabledata?.[event]]?.[0]));
      // await dispatch(changeReorderProductDetails(tabledata?.[event]?.productDetails))
      // setUnpaidOpen(false)
      setUnpaidConfirmation(true);
      setunpaidselectedindex(event);
    } else {
      const UpdatedData = tabledata?.[event]?.productDetails;
      if (OfferCheckedInSetup && preferenceOffer) {
        await applyOffer(UpdatedData);
      } else {
        dispatch(changeOrderCardDetails(UpdatedData));
      }
      await dispatch(
        changeReorderProductDetails(tabledata?.[event]?.productDetails)
      );
      await dispatch(changeReorderHoldDetails([tabledata?.[event]]?.[0]));
      await dispatch(ChangeTotalAmount(tabledata?.[event]?.ExtraChargeDetails));
      await dispatch(changeUnpaidData(true));
      setUnpaidOpen(false);
    }
  };

  const UnpaidOk = async () => {
    setOrderStatus(false);
    await dispatch(changeSelectedTableDetails([]));
    await dispatch(changeSelectTable([]));
    await dispatch(changeSelectChair([]));
    if (defaultBookingType === 'Both') {
      await dispatch(changeBookingType('TakeAway'));
    }
    await dispatch(
      changeOrderCardDetails(tabledata?.[unpaidselectedindex]?.productDetails)
    );
    await dispatch(
      changeReorderProductDetails(
        tabledata?.[unpaidselectedindex]?.productDetails
      )
    );
    await dispatch(
      changeReorderHoldDetails([tabledata?.[unpaidselectedindex]]?.[0])
    );
    await dispatch(
      ChangeTotalAmount(tabledata?.[unpaidselectedindex]?.ExtraChargeDetails)
    );
    await dispatch(changeUnpaidData(true));
    setUnpaidOpen(false);
    setUnpaidConfirmation(false);
  };

  const Unpaidclose = async () => {
    dispatch(changeunpaidflow(false));
    setUnpaidOpen(false);
    setUnpaidConfirmation(false);
  };

  const Recipt = async () => {
    AddBookingDetails('Unpaid', false);
  };

  const getstockbadge = async () => {
    let data = {
      CompId: CompId,
      BranchId: BranchId,
      AppId: AppId,
    };
    await dispatch(getSelectedFavItems(data)).unwrap();

    let data1 = {
      CompId: CompId,
      BranchId: BranchId,
      AppId: AppId,
      ProdSubCat: ProdSubCat,
    };

    let data2 = {
      compId: CompId,
      branchId: BranchId,
      appId: AppId,
      prodCat: prodCat,
    };

    if (
      templateData?.BookingLayout?.[1]?.some(
        (item) => item?.OptionName === 'SubCategory'
      ) &&
      ProdSubCat
    ) {
      await dispatch(getLayoutproductCard(data1)).unwrap();
    } else if (
      !templateData?.BookingLayout?.[1]?.some(
        (item) => item?.OptionName === 'SubCategory'
      )
    ) {
      await dispatch(getCardDataWithoutSubmodule(data2)).unwrap();
    } else {
      await dispatch(getCardDataWithoutSub(data2)).unwrap();
    }
  };

  const Combocarddata = async () => {
    let data = {
      CompId: CompId,
      BranchId: BranchId,
      AppId: AppId,
      ActiveStatus: 'A',
    };

    let response = await dispatch(getCombolist(data)).unwrap();
    let datas = response?.data?.data;
    await dispatch(ChangeComboCarddata(datas));
    if (response?.data?.statusCode === 1) {
      // let Data = response?.data?.data
      //             let comboList = Data?.map((item, index) => ({
      //                 ...item,
      //                 id: `${item.ComboName || 'Combo'}-${index}`,
      //                 ProdName:item?.ComboName,
      //                 OverAllQty:item?.OverallQuantity
      //             }));
      //             setCombocardata(comboList);
    }
  };

  const Upimodel = (type) => {
    setUpiOpen(false);
    if (type == 'Submit') {
      AddBookingDetails(BookingType, true);
    }
    const customerDisplayWindow = getCustomerDisplayWindow();
    if (customerDisplayWindow && !customerDisplayWindow.closed) {
      const updatedRemovedData = {
        type: 'remove',
        keyValue: 'OrderTotalAmount',
      };
      customerDisplayWindow.postMessage(updatedRemovedData, '*');
    } else {
      console.error(
        'Customer display window is not available or has been closed.'
      );
    }
  };

  const today = new Date();
  const year = today.getFullYear();
  // Note: Months are zero-based, so we add 1 to get the actual month
  const month = today.getMonth() + 1;
  const day = today.getDate();

  // Creating a formatted date string (in the format YYYY-MM-DD)
  const Todaydate = `${day < 10 ? '0' : ''}${day}-${month < 10 ? '0' : ''}${month}-${year}`;
  const OrderId = PrintOrderDetails?.[0]?.OrderDetails?.[0]?.OrderId;
  let MobileNo = selOption?.value;

  const onFinalSubmit = async () => {
    let url = `${MainHomeUrl}payment-page?amt=${TotalAmount}&Id=${MobileNo}&cus=${SelCustId} &CusN=${selOption?.CustName}&Br=${brachName}`;
    let response = await dispatch(SendPaymentLink({ MobileNo, url })).unwrap();
    if (response?.data?.statusCode === 1) {
      setMessageType('success');
      setMessageData('Link Sent Successfully');
    }
  };

  const CreditCustomerHAndleCancel = () => {
    setcreditCustomerOpen(false);
  };

  const CreditCustomerFun = () => {
    if (
      OrderCardDetail?.length === 0 &&
      (selOption?.value !== undefined ||
        GlobalAddCustomerDetails1?.length > 0 ||
        GetCustId?.CustMobile !== undefined)
    ) {
      setcreditCustomerOpen(true);
    } else {
      if (selOption?.value == undefined) {
        setMessageType('warning');
        setMessageData('Please Select the Customer');
      }
    }
  };
  let containerHeight = '';

  if (templateData?.BookingLayout?.[0] === 'Layout6') {
    containerHeight = isMobile
      ? ExpDate <= 7
        ? '430px'
        : '410px'
      : ExpDate <= 7
        ? '72vh'
        : '';
  } else if (templateData?.BookingLayout?.[0] === 'Layout2') {
    containerHeight = isMobile
      ? ExpDate <= 7
        ? '510px'
        : '475px' //billing table 2 height in POS -- Layout 2
      : ExpDate <= 7
        ? '84vh'
        : '';
  } else if (templateData?.BookingLayout?.[0] === 'Layout1') {
    containerHeight = isMobile
      ? ExpDate <= 7
        ? '480px'
        : '470px' //billing table 2 height in POS -- Layout 1
      : ExpDate <= 7
        ? '82vh'
        : '';
  } else if (templateData?.BookingLayout?.[0] === 'Layout3') {
    containerHeight = isMobile
      ? ExpDate <= 7
        ? '480px'
        : '460px'
      : ExpDate <= 7
        ? '82vh'
        : '';
  } else if (templateData?.BookingLayout?.[0] === 'Layout4') {
    containerHeight = isMobile
      ? ExpDate <= 7
        ? '500px'
        : '475px'
      : ExpDate <= 7
        ? '85vh'
        : '';
  } else if (templateData?.BookingLayout?.[0] === 'Layout5') {
    containerHeight = isMobile
      ? ExpDate <= 7
        ? '490px'
        : '475px'
      : ExpDate <= 7
        ? '85vh'
        : '';
  }

  const changeOrderStatus = () => {
    setOrderStatus(!OrderStatus);
    setPaybtnselected(PaymentOptionsModeId);
    setPaybtnnameselected(PaymentOptionsModeName);
  };

  // split payments
  const SplitPaymentOpen = () => {
    if (OrderCardDetail?.length > 0 && TotalAmount > 0) {
      const updatedData = {
        userData: OrderCardDetail,
        ExtraCharges: GlobalExtraCharge,
        customer: selOption != null ? selOption : GetCustId,
        Paymentgateway: false,
      };
      setFailedOrderData(updatedData);
      setSplitpayment(true);
    } else {
      if (TotalAmount <= 0) {
        setMessageType('warning');
        setMessageData('Cannot split when total amount is zero or less');
        return;
      }
      setMessageType('warning');
      setMessageData('Please Select the Product');
    }
  };

  const handlesplitpaymentclose = () => {
    setSplitpayment(false);
    setPaybtnselected(PaymentOptionsModeId);
    setPaybtnnameselected(PaymentOptionsModeName);
    const customerDisplayWindow = getCustomerDisplayWindow();
    if (customerDisplayWindow && !customerDisplayWindow.closed) {
      const updatedData = {
        paymentMethod: PaymentOptions?.[0]?.ModeName,
        Paymentgateway: false,
      };
      customerDisplayWindow.postMessage(updatedData, '*');
    } else {
      console.error(
        'Customer display window is not available or has been closed.'
      );
    }
  };

  const financialYearError = async () => {
    setMessageType('error');
    setMessageData('Financial Year-Based Sales Not Yet Started');
  };

  const onComplete = useCallback(() => {
    setMessageData(null);
    setMessageType(null);
  }, []);

  // const orderIdsArray =
  //   PrintOrderDetails?.[0]?.OrderDetails?.map(
  //     (orderDetail) => orderDetail?.OrderId
  //   ) || [];

  const handleURL = async (PrintOrderDetails) => {
    let orderIdsArray = PrintOrderDetails?.[0]?.OrderDetails?.map(
      (orderDetail) => orderDetail?.OrderId
    );

    const encrypted = encryptObject(orderIdsArray);

    const postData = {
      Url: encrypted,
      CreatedBy: UserId,
    };
    if (orderIdsArray) {
      const res = await dispatch(PublicQrCodepost(postData)).unwrap();
      const urlData = res?.data?.ReferenceNo;
      setUrlData(urlData);
    }
  };
  const customerNameOrMobile = MobileNoWhatsApp?.CustName?.trim()
    ? `Dear ${MobileNoWhatsApp?.CustName}`
    : `Dear ${MobileNoWhatsApp?.value}`;
  const documentUrl = `${MainHomeUrl}viewbill?code=${urlData}`;
  const encodedMessage = `${customerNameOrMobile},\n\n🙏 Thank you for being a valuable customer!\n\n🧾 To view your bill, please click the link below:\n${documentUrl}`;

  const navCust = templateData?.BookingNavbar?.[1]?.some(
    (item) => item?.OptionName === 'AddCustomer'
  );

  const handlepaymentoptions = async () => {
    await dispatch(changeSalesPaymentoption(true));
    await dispatch(
      getPaymentOptionsData({
        AppId: AppId,
        CompId: CompId,
        BranchId: BranchId,
      })
    );
  };

  // ------------------------------------------------OTHER SERVICES FUNCTIONALITY-----------------------------------------------------------------------------------

  useEffect(() => {
    if (isMobile) {
      OtherServiceMobilePrint(
        OtherServicesPrintDetails,
        UpiId,
        'Booking',
        SettingDataSelector
      );
    } else {
      Otherserviceprint();
    }
  }, [OtherServicesPrintDetails]);

  useEffect(() => {
    const setDefaultPaymentOption = async () => {
      const res = await dispatch(
        getDefaultPaymentOptions({ AppId, CompId, BranchId })
      )?.unwrap();
      const defaultDetail = res?.data?.data?.[0]?.DefaultDetails?.[0];
      if (res?.data?.data?.length > 0 && defaultDetail) {
        setDefaultEnabled(true);
        setDefaultPaymentMode(defaultDetail);
        const { option, card } = defaultDetail;
        if (option?.value) setSelectedUPIPayOption(option.value);
        if (card) {
          const isDefault =
            String(option?.value ?? '').toLowerCase() === 'default';
          const idToUse = isDefault ? card?.UPIId : card?.ModeId;

          if (idToUse) {
            addUpiOption(card?.Mode, card?.ModeName, idToUse);
          }
        }
      } else {
        setDefaultEnabled(false);
        setDefaultPaymentMode([]);
      }
    };
    if (salesBillEdit) {
      setDefaultPaymentOption();
    }
  }, [defaultPaymentTrigger, salesBillEdit]);

  const Otherserviceprint = async () => {
    if (OtherServicesPrintDetails?.length > 0) {
      const style = await PrintStyleFunction('OtherServices1');
      const stylesMap = {
        OtherServices1: 'OtherServices1',
      };

      const selectedStyle = stylesMap['OtherServices1'];

      console.log(selectedStyle, 'selectedStyle');

      await printDiv('OtherServices1', style); // Use unique IDs for each print

      setOtherServicesPrintDetails([]);
      closePrintOption();
    }
  };

  const OtherServicePostBooking = async (PostData, value) => {
    console.log(PostData, value, 'PostData, value');

    let postdata = {
      AppId: AppId,
      CompId: CompId,
      BranchId: BranchId,
      BillAmount: PostData?.BillAmount,
      TaxAmount: PostData?.TaxAmount,
      NetAmount: PostData?.NetAmount,
      OtherServicesTicketDetails: OrderCardDetail.map((item) => ({
        ServiceId: item.ServiceId,
        ServiceCategory: item.ServiceCategory,
        VehicleNumber: item.VehicleNo || '',
        Qty: item.OrderQty,
        Rate: item.Rate,
        TaxAmount: item.TaxAmt,
        TotalAmount: item.TotalAmt,
      })),
      PaymentDetail: PostData?.PaymentDetail,
      CreatedBy: UserId,
    };

    let Response = await dispatch(PostOtherServices(postdata)).unwrap();

    if (Response?.data?.statusCode == 1) {
      setMessageType('success');
      setMessageData(Response?.data?.response);
      ClearAllGlobalStateDatas(value);
      setOtherServicesPrintDetails([
        Response?.data?.OtherServicesTicketDetails?.[0],
      ]);
    }

    console.log(postdata, 'PostdataPostdataPostdata');
  };

  const Otherservicesvehicleno = () => {
    setOtherServicesModal(true);
  };

  const handleInputChange = (key, index, value, serviceType, item) => {
    const uppercasedValue = value.toUpperCase();
    const regex = /^[A-Z]{2}[0-9]{2}[A-Z]{1,2}[0-9]{4}$/;
    const isValid = regex.test(uppercasedValue);

    if (serviceType === 'G') {
      const existing = vehicleInputs[key] ? [...vehicleInputs[key]] : [];
      existing[index] = uppercasedValue;

      setVehicleInputs((prev) => ({ ...prev, [key]: existing }));

      const updatedErrors = {
        ...errors,
        [key]: [...(errors[key] || [])],
      };
      // updatedErrors[key][index] = isValid ? '' : 'Invalid format (e.g., KA01AB1234)';
      updatedErrors[key][index] =
        uppercasedValue === ''
          ? ''
          : isValid
            ? ''
            : 'Invalid format (e.g., KA01AB1234)';

      setErrors(updatedErrors);

      vehiclesvalues({ ...vehicleInputs, [key]: existing });
    } else {
      const uniqueKey = `${key}__${item.__index}`;
      const updatedInputs = {
        ...vehicleInputs,
        [uniqueKey]: [uppercasedValue],
      };

      const updatedErrors = { ...errors };
      // updatedErrors[uniqueKey] = [isValid ? '' : 'Invalid format (e.g., KA01AB1234)'];

      updatedErrors[uniqueKey] = [
        uppercasedValue === ''
          ? ''
          : isValid
            ? ''
            : 'Invalid format (e.g., KA01AB1234)',
      ];

      setVehicleInputs(updatedInputs);
      setErrors(updatedErrors);

      vehiclesvalues(updatedInputs);
    }
  };

  const vehiclesvalues = (vehicleData) => {
    const updated = OrderCardDetail.map((item) => {
      const key =
        item.ServiceType === 'G'
          ? item.id // using `id` now
          : `${item.ServiceId}__${item.__index}`;

      // if (vehicleData[key]) {
      //   return {
      //     ...item,
      //     VehicleNo: vehicleData[key],
      //   };
      // }
      // return item;

      const value = vehicleData[key];

      if (value && value.length) {
        return {
          ...item,
          VehicleNo:
            item.ServiceType === 'G'
              ? value.join(',') // 👈 convert array to comma-separated string
              : value[0], // 👈 single string from array
        };
      }

      return item;
    });

    dispatch(changeOrderCardDetails(updated));
  };

  const Handlevehiclenumbers = () => {
    setOtherServicesModal(false);
  };
  const hasVehicleInputErrors = () => {
    return Object.values(errors).some(
      (arr) => Array.isArray(arr) && arr.some((err) => err)
    );
  };
  return (
     <Suspense fallback={<BillingTableSkeleton />}>
      <div
        className={
          templateData?.BookingLayout?.[0] === 'Layout6'
            ? 'BsTable2-Master BsTable2-Master-6'
            : 'BsTable2-Master'
        }
        style={{
          height: containerHeight,
        }}
      >
        <div className="BSBillingTable2-Summary">
          {(addcustomer || hold) && (
            <FeaturesFunctionalities
              handleAddCustomerCancel={handleAddCustomerCancel}
              addcustomer={addcustomer}
              handleHoldCancel={handleHoldCancel}
              modalOpen={hold}
            />
          )}
          {creditCustomerOpen && (
            <BSCreditCustomer
              creditCustomerOpen={creditCustomerOpen}
              CreditCustomerHAndleCancel={CreditCustomerHAndleCancel}
            />
          )}
          {TotalAmount == 0 && Success && (
            <div>
              <QrComponent com={`WelcomeScreen**${brachName}`} />
            </div>
          )}
          {TotalAmount > 0 &&
            qrCode &&
            PaymentUpiOptions?.length > 0 &&
            SelectedUpiOption && (
              <div>
                <QrComponent
                  com={`DisplayQRCodeScreen**upi://pay?pa=${UpiId}&pn=Bonrix&cu=INR&am=${TotalAmount}&pn=Bonrix%20Software%20Systems**${TotalAmount}**${UpiId}`}
                />
              </div>
            )}

          {PaymentUpiOptions?.length > 0 && OrderId && (
            <div>
              <QrComponent
                com={`DisplaySuccessQRCodeScreen**...**${extractLastNumberOrderId(OrderId, PrintOrderDetails?.[0]?.OrderDetails?.[0]?.FYStatus)}**${Todaydate}`}
              />
            </div>
          )}
          <div className="BSBillingTable2-orders-div">
            <div className="BSBillingTable2-bill-cont">
              <Messages
                messageType={messageType}
                messageData={messageData}
                onComplete={onComplete}
              />
              <div className="BSBillingTable2-bill2-cont">
                <BsBill2 />
              </div>
            </div>
          </div>
        </div>
        <div className="BSBillingTable2-summary-container">
          {/* {Array.isArray(OrderCardDetail) && OrderCardDetail?.length >= 1 && (
          <span className="Table3-Price-div-table">
            {" "}
            <BsBill2 />
          </span>
        )} */}
          <div
            className={`BSBillingTable1-summeryTable ${responsiveBill ? 'open' : 'closed'}`}
            style={{
              transition: 'max-height 0.3s ease-in-out',
              overflow: 'scroll',
              maxHeight: responsiveBill ? '200px' : '0px',
            }}
          >
            {Array.isArray(OrderCardDetail) && OrderCardDetail?.length >= 1 && (
              <div style={{ width: '100%', overflow: 'scroll' }}>
                <BsBill2 />
              </div>
            )}
          </div>
          <div
            style={{
              display: 'flex',
              alignItems: 'flex-end',
              justifyContent: 'flex-end',
              width: '100%',
            }}
          >
            {Array.isArray(OrderCardDetail) && OrderCardDetail?.length >= 1 && (
              <div
                onClick={handleResponsiveBill}
                className="Btn-responsiveBill"
                style={{ color: responsiveBill ? '#52c41a' : '#1292ee' }}
              >
                <div
                  style={{
                    width: '28px',
                    display: 'flex',
                    alignItems: 'center',
                    height: '26px',
                  }}
                >
                  {' '}
                  <PozoCartIcon />{' '}
                </div>
              </div>
            )}
          </div>
          <div className="" style={{ display: 'flex' }}>
            <div className="CustomerAddSrch">
              <div style={{ height: '2.1rem' }}>
                {tableOptions
                  ?.filter((item) => item.OptionName === 'AddCustomer')
                  .map((filteredItem) => (
                    <React.Fragment key={filteredItem.TemplateOptionsId}>
                      <div
                        style={{
                          display: 'flex',
                          alignItems: 'center',
                          columnGap: '0.5rem',
                        }}
                      >
                        <BSCustomerSelect />

                        <TooltipWrapper
                          title={'Add Customer'}
                          isMobile={isMobile}
                        >
                          {' '}
                          <PozoAddCustomerIcon
                            className="BSBillingNav-icon-table-icon"
                            onClick={handleAddCustomer}
                            style={{
                              fontSize: '25px',
                              color:
                                selOption || GetCustId ? '#52c41a' : '#1292EE',
                              cursor: Custdisable ? 'not-allowed' : 'pointer',
                            }}
                          />
                        </TooltipWrapper>
                      </div>
                    </React.Fragment>
                  ))}
              </div>
              {paybtns?.length > 1 && (
                <div
                  style={{
                    pointerEvents:
                      (BookingType === 'Dine In' ||
                        BookingTypeBoth ||
                        CheckOrderType?.length > 0) &&
                      !unpaidFlow &&
                      OrderStatus
                        ? 'none'
                        : 'auto',
                    opacity:
                      (BookingType === 'Dine In' ||
                        BookingTypeBoth ||
                        CheckOrderType?.length > 0) &&
                      !unpaidFlow &&
                      OrderStatus
                        ? 0.5
                        : 1,
                    width: '2rem',
                  }}
                >
                  {!OtherServicesglobal && (
                    <TooltipWrapper title="Split Payment" isMobile={isMobile}>
                      {' '}
                      <div
                        className="BSBillingNav-icon-table-icon"
                        onClick={
                          CheckBookingStatus != 'Close' && !addnewAccess
                            ? SplitPaymentOpen
                            : ''
                        }
                        style={{
                          width: '1.6rem',
                          cursor:
                            OrderCardDetail?.length === 0 ||
                            CheckBookingStatus == 'Close' ||
                            addnewAccess
                              ? 'not-allowed'
                              : 'pointer',
                          color:
                            OrderCardDetail?.length === 0 ||
                            CheckBookingStatus == 'Close' ||
                            addnewAccess
                              ? 'gray'
                              : 'rgb(18, 146, 238)',
                          display: 'flex',
                          alignItems: 'center',
                          height: '2.46rem',
                        }}
                      >
                        <PozoSplitPaymentIcon />
                      </div>
                    </TooltipWrapper>
                  )}
                  {OtherServicesglobal && OrderCardDetail.length >= 1 && (
                    <TooltipWrapper title="Vehicle Number" isMobile={isMobile}>
                      {' '}
                      <div
                        className="BSBillingNav-icon-table-icon"
                        onClick={
                          // CheckBookingStatus != 'Close' && !addnewAccess?
                          Otherservicesvehicleno
                          // : ''
                        }
                        style={{
                          width: '1.5rem',
                          cursor:
                            OrderCardDetail?.length === 0 ||
                            CheckBookingStatus == 'Close' ||
                            addnewAccess
                              ? 'not-allowed'
                              : 'pointer',
                          color:
                            OrderCardDetail?.length === 0 ||
                            CheckBookingStatus == 'Close' ||
                            addnewAccess
                              ? 'gray'
                              : 'rgb(18, 146, 238)',
                          display: 'flex',
                          alignItems: 'center',
                          height: '2.46rem',
                        }}
                      >
                        <TfiClipboard />
                      </div>
                    </TooltipWrapper>
                  )}
                </div>
              )}
            </div>

            <div
              style={{
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'space-around',
                width: '100%',
              }}
            >
              <BsBill2Sum />
              {OrderCardDetail?.length > 0 &&
                ParkingDisplay &&
                !OtherServicesglobal && (
                  <div
                    style={{
                      width: '1.5rem',
                      color: 'rgb(18, 146, 238)',
                      display: 'flex',
                      alignItems: 'center',
                      height: '2.46rem',
                    }}
                  >
                    <BSOtherServiceClaim />
                  </div>
                )}
              {!OtherServicesglobal && unpaidFlow == true ? (
                <TooltipWrapper title="Print Bill" isMobile={isMobile}>
                  {' '}
                  <PozoBillIcon
                    className="Hover"
                    style={{
                      fontSize: '25px',
                      cursor: 'pointer',
                      color: unpaidFlow ? '#52c41a' : '#1292EE',
                    }}
                    onClick={() => {
                      Recipt();
                    }}
                  />
                </TooltipWrapper>
              ) : (
                ''
              )}
              <div className="BsBill-Popover">
                <Popover
                  content={
                    <>
                      <a onClick={hide}>
                        <AiOutlineClose color="black" />
                      </a>
                      {/* <span className="Table3-Price-div-table">
                      {" "}
                      <BsBill2 />
                    </span> */}
                      <BSSummery1 />
                    </>
                  }
                  trigger="click"
                  // width={1000}
                  open={open}
                  onOpenChange={handleOpenChange}
                >
                  <UpCircleOutlined
                    style={{
                      fontSize: '25px',
                      cursor: 'pointer',
                      color: '#1292EE',
                    }}
                  />
                </Popover>
              </div>
            </div>
          </div>

          <div className="BSBillingTable2-pay-btn-div">
            <TooltipWrapper
              // title={'Payment Mode (SHIFT + M)'}
              isMobile={isMobile}
              placement={'left'}
            >
              <div
                className="pay-options-btns"
                style={{
                  pointerEvents:
                    (BookingType === 'Dine In' ||
                      BookingTypeBoth ||
                      CheckOrderType?.length > 0) &&
                    !unpaidFlow &&
                    OrderStatus
                      ? 'none'
                      : 'auto',
                  opacity:
                    (BookingType === 'Dine In' ||
                      BookingTypeBoth ||
                      CheckOrderType?.length > 0) &&
                    !unpaidFlow &&
                    OrderStatus
                      ? 0.5
                      : 1,
                }}
              >
                {paybtns?.length > 0 &&
                currentOrderNetAmount >= previousNetAmount ? (
                  paybtns?.map((payment) => (
                    <div className="Table3-cash">
                      <button
                        className={
                          paybtnselected === payment.ModeId &&
                          (UpinotSelected || CardoptionnotSelected)
                            ? 'Btn-payment-mode-notupisel'
                            : paybtnselected === payment.ModeId &&
                                (!UpinotSelected || !CardoptionnotSelected)
                              ? 'Btn-payment-mode'
                              : 'Btn-payment-mode-sel'
                        }
                        style={{
                          fontFamily: FontFamily['para'],
                          position: 'relative',
                          animation: blink
                            ? 'blink-animation 0.5s infinite alternate'
                            : 'none',
                        }}
                        onClick={() =>
                          payment?.ModeName?.toLowerCase() === 'upi' // Change the condition to payment.Id
                            ? handleUPIButtonClick(
                                payment.ModeId,
                                payment.ModeName
                              )
                            : handlePaymentMode(
                                payment.ModeId,
                                payment.ModeName
                              )
                        }
                      >
                        <div
                          style={{
                            display: 'flex',
                            flexDirection: 'row',
                            columnGap: '0.5rem',
                          }}
                        >
                          {payment.ModeName}
                          {payment?.ModeName?.toLowerCase() === 'card' && (
                            <CardPopover
                              CardPayOption={CardPayOption}
                              SelectedCardOption={SelectedCardOption}
                              AddCardOption={AddCardOption}
                              CardOptionOpen={CardOptionOpen}
                              EnableCardOptions={EnableCardOptions}
                              paygate={paygate}
                              paydevice={paydevice}
                            />
                          )}
                          {payment?.ModeName?.toLowerCase() === 'upi' && (
                            <UpiPopover
                              defaultPaymentMode={defaultPaymentMode}
                              defaultEnabled={defaultEnabled}
                              setDefaultEnabled={setDefaultEnabled}
                              UpiOptionOpen={UpiOptionOpen}
                              UpiPayOption={UpiPayOption}
                              SelectedUPIPayOption={SelectedUPIPayOption}
                              AddUPIPaymentOption={AddUPIPaymentOption}
                              PaymentUpiOptions={PaymentUpiOptions}
                              BusinessPayOption={BusinessPayOption}
                              UpiOption={UpiOption}
                              UpiId={UpiId}
                              paygate={paygate}
                              paydevice={paydevice}
                              EnableUpiOptions={EnableUpiOptions}
                              PaymentgatewayUPI={PaymentgatewayUPI}
                              PaymentDeviceUPI={PaymentDeviceUPI}
                              SelectedUpiOption={SelectedUpiOption}
                              addUpiOption={addUpiOption}
                              hideDefault={hideDefault}
                            />
                          )}
                        </div>
                      </button>
                    </div>
                  ))
                ) : currentOrderNetAmount < previousNetAmount &&
                  salesBillEdit &&
                  refundPayBtns.length > 0 ? (
                  refundPayBtns.map((payment) => (
                    <div className="Table3-cash">
                      <button
                        className={
                          refundPaySelected === payment.ConfigId &&
                          (UpinotSelected || CardoptionnotSelected)
                            ? 'Btn-payment-mode-notupisel'
                            : refundPaySelected === payment.ConfigId &&
                                (!UpinotSelected || !CardoptionnotSelected)
                              ? 'Btn-payment-mode'
                              : 'Btn-payment-mode-sel'
                        }
                        style={{
                          fontFamily: FontFamily['para'],
                          position: 'relative',
                          animation: blink
                            ? 'blink-animation 0.5s infinite alternate'
                            : 'none',
                        }}
                        onClick={() =>
                          handleRefundPaymentMode(
                            payment?.ConfigId,
                            payment?.ConfigName
                          )
                        }
                      >
                        {/* {UpiOption === "" && payment?.ModeName?.toLowerCase() === "upi" && <p> UPI</p>} */}

                        <div
                          style={{
                            display: 'flex',
                            flexDirection: 'row',
                            columnGap: '0.5rem',
                          }}
                        >
                          {payment.ConfigName}
                        </div>
                      </button>
                    </div>
                  ))
                ) : (
                  <div
                    onClick={handlepaymentoptions}
                    style={{ cursor: 'pointer' }}
                    className="payment-error-msg"
                  >
                    Please Set Payment Options
                  </div>
                )}
              </div>
            </TooltipWrapper>
            {tableOptions?.filter((item) => item.OptionName === 'AddCustomer')
              .length === 1 || navCust === true ? (
              <div style={{ width: '2rem' }}>
                {Object.keys(useOptions)?.length > 0 &&
                  useOptions?.some((flow) =>
                    flow.OptionDetails.some(
                      (option) =>
                        option.OptionName === 'Pay at the counter' &&
                        option.ModeDetails.some(
                          (mode) => mode.ModeName === 'Credit'
                        )
                    )
                  ) && (
                    <React.Fragment key="CreditCustomerFragment">
                      {!OtherServicesglobal && (
                        <TooltipWrapper
                          title="Advance Amount"
                          isMobile={isMobile}
                        >
                          {' '}
                          <PozoAdvanceIcon
                            className="BSBillingNav-icon-table-icon"
                            onClick={CreditCustomerFun}
                            style={{
                              cursor:
                                OrderCardDetail?.length > 0 && 'not-allowed',
                              color:
                                OrderCardDetail?.length > 0 ||
                                (selOption?.value === undefined &&
                                  GlobalAddCustomerDetails1?.length === 0 &&
                                  GetCustId?.CustMobile === undefined)
                                  ? 'gray'
                                  : 'rgb(18, 146, 238)',
                              fontSize: '28px',
                            }}
                          />
                        </TooltipWrapper>
                      )}
                    </React.Fragment>
                  )}
              </div>
            ) : (
              ''
            )}

            {/* Customer Orders */}
            {GetCustId && (
              <Tooltip title="Customer Orders" isMobile={isMobile}>
                {' '}
                <div
                  className="BSBillingNav-icon-table-icon"
                  onClick={() => {
                    if (
                      CheckBookingStatus !== 'Close' &&
                      !addnewAccess &&
                      !(OrderCardDetail?.length > 0)
                    ) {
                      setCustomerPreviesOrders(true);
                    }
                  }}
                  style={{
                    cursor: OrderCardDetail?.length > 0 && 'not-allowed',
                    color:
                      OrderCardDetail?.length > 0 ||
                      (OrderCardDetail?.length > 0 &&
                        GetCustId?.CustMobile === undefined)
                        ? 'gray'
                        : 'rgb(18, 146, 238)',
                    fontSize: '25px',
                    display: 'flex',
                    alignItems: 'center',
                    height: '2.46rem',
                    width: '1.5rem',
                  }}
                >
                  <FaCartPlus />
                </div>
              </Tooltip>
            )}
            {tabledata?.length > 0 && (
              <div style={{ width: '2rem' }}>
                {tableOptions
                  ?.filter((item) => item.OptionName === 'UnpaidBill')
                  .map((filteredItem) => (
                    <React.Fragment key={filteredItem.TemplateOptionsId}>
                      {!OtherServicesglobal && (
                        <TooltipWrapper
                          title="Unpaid Bills"
                          isMobile={isMobile}
                        >
                          {' '}
                          <PozoUnpaidIcon
                            className="BSBillingNav-icon-table-icon"
                            style={{
                              fontSize: '27px',
                              cursor: 'pointer',
                              color: unpaidFlow ? '#52c41a' : '#1292EE',
                            }}
                            onClick={() => {
                              (setUnpaidOpen(true), getUnpaiddatas());
                            }}
                          />
                        </TooltipWrapper>
                      )}
                    </React.Fragment>
                  ))}
              </div>
            )}

            {dinePreference && (
              <div>
                {(BookingType === 'Dine In' ||
                  BookingTypeBoth ||
                  CheckOrderType?.length > 0) &&
                  !unpaidFlow &&
                  SelectedTableDetails?.length !== 0 && (
                    <div style={{ display: 'flex', alignItems: 'center' }}>
                      <TooltipWrapper title="ORDER" isMobile={isMobile}>
                        {' '}
                        <PozoDineInIcon
                          className={
                            FirstPaymentclick === false && !addnewAccess
                              ? OrderStatus
                                ? 'Dinein-order-btn pulse-element ChairClrRed'
                                : 'Dinein-order-btn pulse-element ChairClrGreen'
                              : 'Dinein-order-btn-disabled pulse-element'
                          }
                          onClick={() =>
                            FirstPaymentclick === false && !addnewAccess
                              ? changeOrderStatus()
                              : ''
                          }
                        />
                      </TooltipWrapper>
                      {FirstPaymentclick === false &&
                        !addnewAccess &&
                        !OrderStatus && <BSTipAmount />}
                    </div>
                  )}
              </div>
            )}
            {!OtherServicesglobal && (
              <div>
                {tableOptions?.map((item) => (
                  <>
                    {unpaidFlow == false
                      ? item?.OptionName == 'Hold' &&
                        BookingType !== 'Dine In' &&
                        !BookingTypeBoth &&
                        OrderCardDetail?.length != 0 &&
                        !OrderStatus &&
                        OrderType != 'Failed' &&
                        paybtns?.length > 0 &&
                        CheckBookingStatus != 'Close' &&
                        !addnewAccess && (
                          <>
                            <TooltipWrapper title={'Hold'} isMobile={isMobile}>
                              <button
                                onClick={() => AddBookingDetails('Hold')}
                                className={
                                  FirstPaymentclick === false
                                    ? 'hold-btn'
                                    : 'hold-btn-disable'
                                }
                              >
                                <BsPauseFill />
                                <p
                                  className="hold-btn-txt"
                                  style={{
                                    fontFamily: FontFamily['para'],
                                  }}
                                >
                                  Hold
                                </p>
                              </button>
                            </TooltipWrapper>
                          </>
                        )
                      : ''}
                    {unpaidFlow == false
                      ? item?.OptionName == 'Hold' &&
                        BookingType !== 'Dine In' &&
                        !BookingTypeBoth &&
                        Holddata?.length > 0 &&
                        OrderCardDetail?.length == 0 &&
                        CheckBookingStatus != 'Close' &&
                        paybtns?.length > 0 &&
                        !addnewAccess && (
                          <TooltipWrapper title={'Recall'} isMobile={isMobile}>
                            {' '}
                            <Badge
                              count={Holddata?.length}
                              size={'small'}
                              offset={[0, 7]}
                            >
                              <PozoHoldIcon
                                className="BSBillingNav-icon-table-icon"
                                onClick={() => HandleholdModelOpen()}
                                style={{
                                  fontSize: '28px',
                                  cursor: 'pointer',
                                  color: Holddata ? '#52c41a' : 'default',
                                  pointerEvents:
                                    OrderType === 'Failed' ? 'none' : 'auto',
                                }}
                              />
                            </Badge>
                          </TooltipWrapper>
                        )
                      : ''}
                  </>
                ))}
              </div>
            )}
          </div>

          <div className="billing-div">
            <TooltipWrapper title="Create Bill (F4)" isMobile={isMobile}>
              <button
                className={
                  // (empData?.AddAccess === "N" || SAAccessCommonMaster?.AddAccess === "N")
                  addnewAccess
                    ? 'billing-btn-deactive'
                    : FirstPaymentclick === false &&
                        OrderCardDetail?.length > 0 &&
                        paybtnselected &&
                        CheckBookingStatus != 'Close'
                      ? salesBillEdit &&
                        currentOrderNetAmount < previousNetAmount
                        ? 'billing-btn'
                        : 'billing-btn'
                      : 'billing-btn-deactive'
                }
                // onClick={() => {
                //   (qrCode && SelectedUPIPayOption === "Default") ? UpiPayment() : OrderStatus ? AddBookingDetails("Dine-In") : AddBookingDetails(BookingType, true);
                // }}
                onClick={
                  // BranchFinancialStatus==='N'? financialYearError:
                  handleButtonClick
                }
              >
                {!OrderStatus ? (
                  salesBillEdit && currentOrderNetAmount < previousNetAmount ? (
                    <div
                      className="billing-in-style-Order"
                      style={{ fontFamily: FontFamily['head'] }}
                    >
                      Refund: ₹
                      {(previousNetAmount || 0) - (currentOrderNetAmount || 0)}
                    </div>
                  ) : (
                    <>
                      <div className="billing-in-style">
                        <h1 style={{ fontFamily: FontFamily['head'] }}>
                          Total
                        </h1>
                      </div>

                      <div>
                        <h1 style={{ fontFamily: FontFamily['head'] }}>
                          {' '}
                          {isMobile ? (
                            `₹ ${safeRound(
                              OrderType === 'Failed'
                                ? FailedTotalAmt
                                : credit && overAllBal >= 0
                                  ? Math.max(0, TotalAmount - overAllBal)
                                  : TotalAmount
                            )}`
                          ) : (
                            <div>
                              ₹{' '}
                              <CountUp
                                duration={0.4}
                                className="counter"
                                end={safeRound(
                                  OrderType === 'Failed'
                                    ? FailedTotalAmt
                                    : credit && overAllBal >= 0
                                      ? Math.max(0, TotalAmount - overAllBal)
                                      : TotalAmount
                                )}
                              />
                            </div>
                          )}
                        </h1>
                      </div>
                    </>
                  )
                ) : (
                  <div
                    className="billing-in-style-Order"
                    style={{ fontFamily: FontFamily['head'] }}
                  >
                    ORDER
                  </div>
                )}

                <ArrowRightOutlined style={{ fontSize: '20px' }} />
              </button>
            </TooltipWrapper>
          </div>
          {UpiOpen && (
            <DefaultModal
              open={UpiOpen}
              title="UPI PAYMENT"
              width={500}
              handleCancel={() => {
                Upimodel('Cancel');
              }}
              footer={false}
              children={
                <div style={{ overflow: 'scroll' }}>
                  <div
                    style={{
                      display: 'flex',
                      flexDirection: 'column',
                      justifyContent: 'space-evenly',
                      alignItems: 'center',
                    }}
                  >
                    <div>
                      <QrinScreen
                        Amount={
                          OrderType === 'Failed'
                            ? FailedTotalAmt
                            : Math.round(TotalAmount)
                        }
                        UpiId={UpiId}
                      />
                    </div>

                    <div>
                      <h1>
                        {' '}
                        RS :
                        {OrderType === 'Failed'
                          ? FailedTotalAmt
                          : Math.round(TotalAmount)}{' '}
                      </h1>
                    </div>
                  </div>

                  <div className="sentok">
                    {(selOption || SelCustId) && (
                      <div className="sentLink" onClick={onFinalSubmit}>
                        Sent Payment Link
                        <img
                          src={WpIcon}
                          alt="Your Alt Text"
                          style={{ width: '30px', height: '30px' }}
                        />
                      </div>
                    )}

                    <div
                      style={{
                        display: 'flex',
                        flexDirection: 'row-reverse',
                        width: '100px',
                      }}
                    >
                      <Buttons
                        buttonText="OK"
                        color="901D77"
                        icon={<ArrowRightOutlined />}
                        handleSubmit={() => {
                          Upimodel('Submit');
                        }}
                      />
                    </div>
                  </div>
                </div>
              }
            />
          )}
          {PrintOrderDetails?.length > 0 &&
            PrintOrderDetails?.[0]?.OrderDetails?.map((orderDetail, index) => (
              <div style={{ display: 'none' }}>
                <PaymentPdfBooking
                  index={index}
                  table2Data={orderDetail}
                  singleData2={orderDetail?.productDetails}
                  orderId={
                    orderDetail?.OrderId &&
                    extractLastNumberOrderId(
                      orderDetail?.OrderId,
                      orderDetail?.FYStatus
                    )
                  }
                  CreatedDate={orderDetail?.CreatedDate}
                  PaymentStatus={PrintOrderDetails?.[0]?.PaymentOrderDtl}
                  Preference={SettingDataSelector}
                  printDatas={printDatas}
                />
              </div>
            ))}
          {PrintOrderDetails?.length > 0 &&
            (TokenOnly?.SettingValue === 'Y' ||
              IndividualToken?.SettingValue === 'Y') &&
            PrintOrderDetails?.[0]?.OrderDetails?.map((orderDetail, index) => (
              <div style={{ display: 'none' }}>
                <TokensinglePrint
                  index={index}
                  table2Data={orderDetail}
                  singleData2={orderDetail?.productDetails}
                  orderId={
                    orderDetail?.OrderId &&
                    extractLastNumberOrderId(
                      orderDetail?.OrderId,
                      orderDetail?.FYStatus
                    )
                  }
                  CreatedDate={orderDetail?.CreatedDate}
                  PaymentStatus={PrintOrderDetails?.[0]?.PaymentOrderDtl}
                />
              </div>
            ))}
          {CreditCustomer && (
            <div style={{ display: 'none' }}>
              <BsBillingCreditCustomer
                ModalCreditCustomer={CreditCustomer}
                handlemodalclose={() => {
                  handleCreditCustomer('Cancel');
                }}
                handleOk={() => {
                  handleCreditCustomer('Submit');
                }}
              />
            </div>
          )}
          {unpaidopen && (
            <DefaultModal
              open={unpaidopen}
              title="UNPAID BILL'S"
              width={1000}
              handleCancel={() => {
                setUnpaidOpen(false);
              }}
              footer={false}
              children={
                <div style={{ height: '400px', overflow: 'scroll' }}>
                  <Tables
                    columns={columns}
                    data={TableData}
                    dataSource={TableData}
                  />
                </div>
              }
            />
          )}
          {UnpaidConfirmation && (
            <Modal
              open={UnpaidConfirmation}
              width={500}
              children={
                <>
                  <div>
                    You have already selected a table. If you click 'OK,' the
                    table selection will be removed, and the unpaid flow will
                    continue. If you click 'Cancel,' the dine-in flow will
                    proceed as selected.
                  </div>
                </>
              }
              onOk={UnpaidOk}
              onCancel={Unpaidclose}
            />
          )}
          {Splitpayment && (
            <SplitPayment
              SplitPaymentModal={Splitpayment}
              handlesplitpaymentclose={handlesplitpaymentclose}
              TotalNetAmount={
                OrderType === 'Failed'
                  ? FailedTotalAmt
                  : Math.round(
                      OrderCardDetail?.reduce(
                        (acc, data) => data?.TotalAmt + acc,
                        0
                      ) -
                        ((OverAllSales > 0 ? OverAllSales : 0) +
                          (OverAllEstimate > 0 ? OverAllEstimate : 0) +
                          (Discount > 0 ? Discount : 0))
                    )
              }
              failedOrderData={failedOrderData}
            />
          )}
          {PrintOrderDetails?.length > 0 && (
            <div
              style={{
                display: 'flex',
                gap: '1rem',
                justifyContent: 'center',
                margin: '1rem 0',
              }}
            >
              {filteredSettingNames?.includes('whatsapp') &&
                MobileNoWhatsApp?.value && (
                  <FaWhatsapp
                    size={32}
                    color="#25D366"
                    style={{ cursor: 'pointer' }}
                    onClick={handleWhatsAppClick}
                    title="Share on WhatsApp"
                  />
                )}

              <FaPrint
                size={32}
                color="#1292EE"
                style={{ cursor: 'pointer' }}
                onClick={handlePrintOrToken}
                title="Print"
              />

              {filteredSettingNames?.includes('SMS') && isMobile && (
                <MdSms
                  size={32}
                  color="#FF8800"
                  style={{ cursor: 'pointer' }}
                  onClick={handleSMSClick}
                  title="Send SMS"
                />
              )}
              {/* WhatsAppShare modal/component */}
              {showWhatsAppShare && (
                <WhatsAppShare
                  message={encodedMessage}
                  mobileNumber={MobileNoWhatsApp?.value}
                  onClose={() => closePrintOption(false)}
                />
              )}
              {showSMSShare && isMobile && (
                <SMSShare
                  message={encodedMessage}
                  mobileNumber={MobileNoWhatsApp?.value}
                  onClose={() => closePrintOption(false)}
                />
              )}
            </div>
          )}

          <DefaultModal
            className={'paymentoptionsModal'}
            open={GlobalSalesPaymentoptions}
            width={500}
            height={1000}
            handleCancel={() => {
              dispatch(changeSalesPaymentoption(false));
            }}
            footer={false}
            children={
              <div
                className="paymentoptionsModalContent"
                style={{ overflow: 'scroll' }}
              >
                <Paymentoption onSuccess={getPaymentOptionFeature} />
              </div>
            }
          />

          {
            OtherServicesPrintDetails?.length > 0 && (
              // PrintOrderDetails?.[0]?.OrderDetails?.map((orderDetail, index) => (
              <div style={{ display: 'none' }}>
                <OtherServicePrintStyle1
                  // index={index}
                  table2Data={OtherServicesPrintDetails}
                  singleData2={OtherServicesPrintDetails?.productDetails}
                  orderId={
                    OtherServicesPrintDetails?.OrderId &&
                    extractLastNumberOrderId(
                      OtherServicesPrintDetails?.OrderId,
                      OtherServicesPrintDetails?.FYStatus
                    )
                  }
                  CreatedDate={OtherServicesPrintDetails?.CreatedDate}
                  PaymentStatus={
                    OtherServicesPrintDetails?.[0]?.PaymentOrderDtl
                  }
                  Preference={SettingDataSelector}
                  printDatas={printDatas}
                />
              </div>
            )
            // ))
          }

          <DefaultModal
            className={'paymentoptionsModal'}
            open={OtherServicesModal}
            title="Vehicle No"
            handleCancel={() => {
              setOtherServicesModal(false);
            }}
            // handleSubmit={Handlevehiclenumbers}
            footer={false}
            children={
              <div
                className="paymentoptionsModalContent"
                style={{ overflow: 'scroll' }}
              >
                {OrderCardDetail.map((item, i) => {
                  const isGroup = item.ServiceType === 'G';
                  const groupKey = item.id; // 🔁 using `id` for groups now
                  const uniqueKey = `${item.ServiceId}__${item.__index}`;

                  // For G-type: render input only once for the group
                  if (
                    isGroup &&
                    i !== OrderCardDetail.findIndex((o) => o.id === groupKey)
                  ) {
                    return null;
                  }

                  const qty = isGroup
                    ? OrderCardDetail.filter((o) => o.id === groupKey).reduce(
                        (sum, o) => sum + (o.OrderQty || 1),
                        0
                      )
                    : item.OrderQty || 1;

                  return (
                    <div
                      key={isGroup ? groupKey : uniqueKey}
                      style={{ marginBottom: 20 }}
                    >
                      <h4>{item.ServiceName}</h4>

                      {Array.from({ length: qty }).map((_, index) => {
                        const inputKey = isGroup
                          ? item.id
                          : `${item.ServiceId}__${item.__index}`;
                        const value = vehicleInputs[inputKey]?.[index] || '';
                        const error = errors[inputKey]?.[index] || '';

                        return (
                          <div
                            key={`${inputKey}-${index}`}
                            style={{ marginBottom: 10 }}
                          >
                            <input
                              placeholder={`Vehicle No ${index + 1}`}
                              value={value}
                              onChange={(e) =>
                                handleInputChange(
                                  isGroup ? item.id : item.ServiceId,
                                  index,
                                  e.target.value,
                                  item.ServiceType,
                                  item
                                )
                              }
                              onKeyPress={(e) => {
                                if (!/[A-Za-z0-9]/.test(e.key)) {
                                  e.preventDefault();
                                }
                              }}
                              style={{
                                width: '100%',
                                padding: 8,
                                borderRadius: 4,
                                border: error
                                  ? '1px solid red'
                                  : '1px solid #ccc',
                              }}
                            />
                            {error && (
                              <span style={{ color: 'red', fontSize: 12 }}>
                                {error}
                              </span>
                            )}
                          </div>
                        );
                      })}
                    </div>
                  );
                })}
                <div style={{ textAlign: 'right', marginTop: 16 }}>
                  <button
                    type="button"
                    onClick={Handlevehiclenumbers}
                    disabled={hasVehicleInputErrors()}
                    style={{
                      padding: '8px 24px',
                      fontFamily: 'Gilroy',
                      background: hasVehicleInputErrors() ? '#ccc' : '#8f1e78',
                      color: '#fff',
                      border: 'none',
                      borderRadius: 4,
                      cursor: hasVehicleInputErrors()
                        ? 'not-allowed'
                        : 'pointer',
                    }}
                  >
                    Submit
                  </button>
                </div>
              </div>
            }
          />

          <DefaultModal
            open={businessUPI}
            handleCancel={() => setShowCancelConfirm(true)}
            footer={false}
            width={500}
            children={
              <>
                <PaymentGatewayEmbedded
                  orderId={businessUPIOrderId}
                  setBusinessUPIOrderId={setBusinessUPIOrderId}
                  businessUPILink={businessUPILink}
                  setBusinessUPI={setBusinessUPI}
                  setPaymentSuccess={setPaymentSuccess}
                  paymentSucess={paymentSucess}
                  ClearAllGlobalStateDatas={ClearAllGlobalStateDatas}
                  CustomerDisplay={CustomerDisplay}
                />
              </>
            }
          />
          {showCancelConfirm && (
            <Modal
              open={showCancelConfirm}
              title="Cancel Payment"
              onOk={() => {
                setBusinessUPI(false);
                setShowCancelConfirm(false);
                ClearAllGlobalStateDatas();
                CustomerDisplay();
              }}
              onCancel={() => setShowCancelConfirm(false)}
              okText="Yes"
              cancelText="No"
            >
              Do you want to cancel the payment?
            </Modal>
          )}
          {customerPreviesOrders && (
            <DefaultModal
              open={customerPreviesOrders}
              handleCancel={() => setCustomerPreviesOrders(false)}
              footer={false}
              width={700}
              className={'ModalPaymentGatewayEmbedded'}
              children={
                <>
                  <CustomerOrders
                    CustomerDetails={selOption}
                    close={() => setCustomerPreviesOrders(false)}
                  />
                </>
              }
            />
          )}
        </div>
      </div>
    </Suspense>
  );
};

export default BSBillingTable2;