Android_Retail/src/Pages/BookingScreen/Components/BSBillingTables/BSBillingTable3/BSBillingTable3pay.jsx

import React, { useCallback, useEffect, useState, useRef } from 'react';
import { shallowEqual, useDispatch, useSelector } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import moment from 'moment';
import { BiRightArrowAlt } from 'react-icons/bi';
import { AiOutlineClose } from 'react-icons/ai';
import { Tables } from '../../../../../Components/Tables/Table';
import { DefaultModal } from '../../../../../Components/Modal/DefaultModal.jsx';
import {
  UpCircleOutlined,
  DownCircleOutlined,
  UpOutlined,
} from '@ant-design/icons';
import { Popover, Badge, Modal, Tooltip } from 'antd';
import {
  printDiv,
  extractLastNumberOrderId,
  encryptObject,
  decryptToObject,
} from '../../../../../Services/Others';
import { Messages } from '../../../../../Components/Notifications/Messages';
import BSBillingTable3 from './BSBillingTable3';
import paygate from '../../../../../Images/paygate.png';
import defaultupi from '../../../../../Images/defaultupi.png';
import pozologoimg from '../../../../../Images/pozologoimg.png';
import paydevice from '../../../../../Images/paydevice.png';
import BSSummery1 from '../../BSBillingTables/BSBillingTableSummery/BSSummery';
import QrComponent from '../../BookingFunctionality/DynamicQr.jsx';
import QrinScreen from '../../BookingFunctionality/DynamicScreenQr.jsx';
import { ArrowRightOutlined } from '@ant-design/icons';
import Buttons from '../../../../../Components/Forms/Buttons';
import WpIcon from '../../../../../Images/message.png';
import {
  GlobalSelectedFont,
  getTemplateData,
  SelectedPrintTemplate,
  StoredSessionData,
  GlobalprintDatas,
  GlobalPrinterMappingDtls,
  getPrinterMappingDetails,
  getPrintSelectionComponentData,
} from '../../../../../Features/ThemeChange/ThemeChange';
import {
  GlobalOrderCardDetails,
  changeOrderCardDetails,
  GlobalCustId,
  PostBookingData,
  GlobalSelectedTableDetails,
  GlobalBookingType,
  changeBookingType,
  getConfigType,
  PutBookingData,
  GlobalReorderHoldDetails,
  getUnpaidData,
  changeReorderHoldDetails,
  ChangeNavHoldData,
  GlobalNavHoldData,
  getSelectedFavItems,
  GlobalProductSubCategorie,
  GlobalProductCategorie,
  getCardDataWithoutSub,
  getCardDataWithoutSubmodule,
  changeSelectedCustId,
  GlobalSelCustId,
  getLayoutproductCard,
  changeSelectedOption,
  GlobalSelOption,
  changeCustomerID,
  changeUnpaidData,
  ChangeSelectedCustDisable,
  getSalesDetailData,
  GlobalSelectedCustDisable,
  SendPaymentLink,
  changeSummeryTotalAmount,
  changeUpiIDprint,
  changeSummeryTotalItems,
  changeSummeryQty,
  changeSummeryTotalWithoutTaxAmount,
  changeSummeryTotalTaxAmount,
  GlobalEstimateBooking,
  GlobalSelProdWiseEst,
  changeSelProdWiseEst,
  GlobalUpiIDprint,
  changeUpiIDName,
  GlobalUpiIDName,
  changeUpiIDoptionId,
  GlobalUpiIDoptionId,
  GlobalBookingTypeBoth,
  changeSelectTable,
  changeSelectChair,
  changeSelectedTableDetails,
  changeReorderProductDetails,
  PostPaymentdevice,
  GetPaymentdeviceResponse,
  PutBookingPaymentStatusChange,
  GlobalCommonPaymentOptions,
  changePaymentloader,
  GlobalPayementloader,
  PaymentGatewayGetdetail,
  changePaymentTransactionNumber,
  Globalunpaidflow,
  changeunpaidflow,
  PutPendingPaymentList,
  ChangeInitialPaymentName,
  PreferenceData,
  changeOrderType,
  GlobalOrderType,
  GlobalFailedTotalAmt,
  putSplitpaymentStatus,
  GlobalUnpaidListData,
  GlobalScreenSize,
  GlobalOverAllDiscEstimate,
  GlobalOverAllDiscSales,
  ChangeOverAllDiscSales,
  ChangeOverAllDiscEstimate,
  getAllCustomer,
  GlobalBranchFinancialStatus,
  changeSummeryComboOfferAmount,
  ChangeComboCarddata,
  GlobaltipAmount,
  changeTipAmount,
  GlobalOtherSevices,
  GlobalOtherServiceTicketClaim,
  changeOtherServiceTicketClaim,
  GlobalRetailWSSalesType,
  GlobalDefaultBookingType,
  GlobalComboOfferAmount,
  GlobalPaymentTrigger,
  GlobalCurrentOrderId,
  changeCurrentOrderId,
  GlobalCombocarddata,
  getCreditCustomer,
  GlobalSummeryTotalItems,
  GlobalSalesBillEdit,
  GlobalPreviousOrderPayment,
  GlobalPreviousOrderOfferDetails,
  GlobalpaymentOptionData,
  getPaymentOptions,
  putSalesBillEdit,
  changeBillEditingMode,
  changePreviousOrderPayment,
  changePreviousOrderOfferDetail,
} from '../../../../../Features/BookingScreen/BookingData/BookingData';
import { PrintStyleFunction } from '../../../../paymentpdfPage/PrintStyleFunction.js';
import FeaturesFunctionalities from '../../BookingFunctionality/FeaturesFunctionalities';
import BSCustomerSelect from '../../UtillComponents/BSSelectCustomer.jsx';
import { ChangeTotalAmount } from '../../../../../Features/ExteraCharges/ExtraCharges.js';
import {
  gettinghold,
  globalholddata,
  changeholddata,
} from '../../../../../Features/BookingScreen/HoldOption/HoldOption';
import PaymentPdfBooking from '../../../../paymentpdfPage/PaymentPdfBooking';
import { globalExtraTotalAmount } from '../../../../../Features/ExteraCharges/ExtraCharges';
import {
  getAddCustomerDetails,
  getDefaultPaymentOptions,
  GlobalAddCustomerDetails,
  ReprintDetails,
  triggerCustomerRefresh,
} from '../../../../../Features/BookingScreen/Customer/addCustomer';
import PozoHoldIcon from '../../UtillComponents/Pozo retail icons/PozoHoldIcon';
import PozoDineInIcon from '../../UtillComponents/Pozo retail icons/PozoDineIn.jsx';
import PozoUnpaidIcon from '../../UtillComponents/Pozo retail icons/PozoUnpaidIcon.jsx';
import PozoBillIcon from '../../UtillComponents/Pozo retail icons/PozoBIllIcon.jsx';
import PozoAddCustomerIcon from '../../UtillComponents/Pozo retail icons/PozoAddCustomerIcon.jsx';
import BsBillingCreditCustomer from '../../BookingFunctionality/BSBillingCreditCustomer.jsx';
import BSCreditCustomer from '../../UtillComponents/BSCreditCustomer.jsx';
import PozoAdvanceIcon from '../../UtillComponents/Pozo retail icons/PozoAdvanceIcon.jsx';
import { isMobile } from 'react-device-detect';
import MobilePrint from '../../BookingFunctionality/MobilePrint.jsx';
import CountUp from 'react-countup';
import SplitPayment from '../../BookingFunctionality/SplitPayment.jsx';
import { GlobalpreOrderOpen } from '../../../../../Features/BookingScreen/PreOrder/PreOrder.js';
import TokensinglePrint from '../../../../paymentpdfPage/TokenOnlyPrints/TokeninsinglePrint.jsx';
import SingleTokenMobilePrint from '../../BookingFunctionality/SingleTokenMobilePrint.jsx';
import IndividualTokenMobilePrint from '../../BookingFunctionality/IndividualTokenMobilePrint.jsx';
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_OverallOfferAmount } from '../../../../../Features/Offer/Offer.js';
import { useApplyOfferto_CardDetail } from '../../UtillComponents/BSNavBarOffer/BSNavBarOffer_CustomHooks.jsx';
import TooltipWrapper from '../../../../../Components/Tooltip/Tooltip';
import { useAuth } from '../../../../../AuthContext.jsx';
import '../../../../../Styles/BookingScreen/Components/BSBillingTables/BSBillingTables3/BSBillingTable3.scss';
import { GlobalBookingStatus } from '../../../../../Features/Payment/PaymentReceivedRetail/PaymentReceivedRetail.js';
import {
  changeSalesPaymentoption,
  GlobalSalesPaymentoption,
} from '../../../../../Features/Payment/Paymentoptions/Paymentoptions.js';
import Paymentoption from '../../../../Payment/PaymentOptions/PaymentOptions.jsx';
import { getPaymentOptionsData } from '../../../../../Features/BookingScreen/BookingData/KioskBookingData.js';
import { getCombolist } from '../../../../../Features/ComboMaster/ComboMaster.js';
import SMSShare from '../../../../WhatsAppShare/SmsShare.jsx';
import WhatsAppShare from '../../../../WhatsAppShare/whatsAppShare.jsx';
import { MdSms } from 'react-icons/md';
import { FaWhatsapp, FaPrint, FaCartPlus } from 'react-icons/fa';
import BSTipAmount from '../../UtillComponents/BSTipAmount.jsx';
import { ApplicationPreferences } from '../../../../../Features/BrachLogin/BranchLogin.js';
import { PostOtherServices } from '../../../../../Features/OtherServices/OtherServices.js';
import { TfiClipboard } from 'react-icons/tfi';
import OtherServicePrintStyle1 from '../../../PrintTemplates/ThermalPrinter/OtherServicePrintStyle1.jsx';
import OtherServiceMobilePrint from '../../BookingFunctionality/OtherServiceMobilePrint.jsx';
import BSOtherServiceClaim from '../../UtillComponents/BSOtherServiceClaim.jsx';
import { MobilePdfPrint } from '../../BookingFunctionality/MobilePdfPrint.js';
import { PublicQrCodepost } from '../../../../../Features/ConfigMasterPage/ConfigMasterPage.js';
import {
  ChangeFreeProductList,
  ChangeFullFreeProductList,
  changeFullOfferAppliedProducts,
  changeLoyaltyConsumedQuantities,
  GlobalFreeProdList,
  GlobalOfferAppliedProducts,
  GlobalOverAllOfferAmt,
} from '../../../../../Features/Offer/Offernew/BookingOffernew.js';
import CardPopover from '../StandardTable/Utils/CardPopover.jsx';
import UpiPopover from '../StandardTable/Utils/UpiPopOver.jsx';
import PaymentGatewayEmbedded from '../../UtillComponents/PaymentGatewayEmbedded.jsx';
import MobileMultiPdfPrintTrigger from '../../UtillComponents/MobileMultiPdfPrintTrigger.jsx';
import { useDateStore } from '../../../../../Features/BookingScreen/BookingData/DateStore.js';
import CustomerOrders from '../../BookingFunctionality/CustomerOrders.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 RetailApiurl = import.meta.env.ENV_API_URL;
const BSBillingTable3Pay = () => {
  const isF4Pressed = useRef(false);
  const applyOffer = useApplyOfferto_CardDetail();
  const { SadminuserAccess } = useAuth();
  let SAAccessCommonMaster = SadminuserAccess?.find(
    (e) => e?.MenuName === 'Sales'
  );
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const salesBillEdit = useSelector(GlobalSalesBillEdit);
  const previousOrderPayment = useSelector(GlobalPreviousOrderPayment);
  const previousOrderOfferDetails = useSelector(GlobalPreviousOrderOfferDetails);
  const AllPaymentOptions = useSelector(GlobalpaymentOptionData);
  const FreeProdList = useSelector(GlobalFreeProdList);
  const offerAppliedProducts = useSelector(
    GlobalOfferAppliedProducts,
    shallowEqual
  );
  const SessionData = useSelector(StoredSessionData);
  const screenwidth = useSelector(GlobalScreenSize);
  const globalTipAmount = useSelector(GlobaltipAmount);
  const RetailWSSalesType = useSelector(GlobalRetailWSSalesType, shallowEqual);
  const OtherServiceTicketClaim = useSelector(GlobalOtherServiceTicketClaim);
  const BranchFinancialStatus = useSelector(GlobalBranchFinancialStatus);
  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 AppId = SessionData?.AppId;
  const CompId = SessionData?.CompId;
  const BranchId = SessionData?.BranchId;
  const UserId = SessionData?.UserId;
  const UserType = SessionData?.UserType;
  const AuthToken = SessionData?.AuthToken;
  const SessionMobileNo = SessionData?.SessionMobileNo;
  const printerTemplateStyle = useSelector(SelectedPrintTemplate);
  const FontFamily = useSelector(GlobalSelectedFont);
  const GetCustId = useSelector(GlobalCustId);
  const SelCustId = useSelector(GlobalSelCustId);
  const selOption = useSelector(GlobalSelOption);
  const SelectedTableDetails = useSelector(GlobalSelectedTableDetails);
  const defaultBookingType = useSelector(GlobalDefaultBookingType);
  const Discount = useSelector(GlobalOverAllOfferAmt);
  const GlobalAddCustomerDetails1 = useSelector(GlobalAddCustomerDetails);
  const Holddata = useSelector(globalholddata);
  const ReportholdData = useSelector(GlobalReorderHoldDetails);
  const BookingType = useSelector(GlobalBookingType);
  const BookingTypeBoth = useSelector(GlobalBookingTypeBoth);
  const OverAllSales = useSelector(GlobalOverAllDiscSales);
  const OverAllEstimate = useSelector(GlobalOverAllDiscEstimate);
  const [SelectedBookingType, setSelectedBookingType] = useState(null);
  const [PaymentOptions, setPaymentOptions] = useState([]);
  const [PaymentUpiOptions, setPaymentUpiOptions] = useState([]);
  const GlobalExtraCharge = useSelector(globalExtraTotalAmount);
  const NavHoldData = useSelector(GlobalNavHoldData);
  const prodCat = useSelector(GlobalProductCategorie);
  const ProdSubCat = useSelector(GlobalProductSubCategorie);
  const BSLayoutData = useSelector(getTemplateData);
  const Combodata = useSelector(GlobalCombocarddata, shallowEqual);
  const OfferCheckedInSetup = BSLayoutData?.BookingNavbar?.[1].some(
    (item) => item?.OptionName == 'Offer'
  );
  const Custdisable = useSelector(GlobalSelectedCustDisable);
  const SettingDataSelector = useSelector(PreferenceData);
  const preferenceOffer =
    SettingDataSelector?.[0]?.['SettingDtlDetails']?.find(
      (item) => item.SettingIdName === 'Offer'
    )?.SettingValue === 'Y';
  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 Weightasquantity = SettingDataSelector?.[0]?.SettingDtlDetails?.some(
    (setting) =>
      setting?.SettingIdName?.toLowerCase() === 'weightasquantity' &&
      setting?.SettingValue === 'Y'
  );
  const preOrder = useSelector(GlobalpreOrderOpen);
  const OrderType = useSelector(GlobalOrderType);
  const FailedTotalAmt = useSelector(GlobalFailedTotalAmt);
  const OrderOfferDetail = useSelector(
    GlobalOfferAppliedProducts,
    shallowEqual
  );
  const tabledata = useSelector(GlobalUnpaidListData);
  const GlobalSalesPaymentoptions = useSelector(GlobalSalesPaymentoption);

  const defaultPaymentTrigger = useSelector(GlobalPaymentTrigger);
  const [defaultPaymentMode, setDefaultPaymentMode] = useState([]);
  const [defaultEnabled, setDefaultEnabled] = useState(false);
  const [messageType, setMessageType] = useState(null);
  const [messageData, setMessageData] = useState(null);
  const [empData, setEmpData] = useState();
  const [addnewAccess, setaddnewAccess] = useState(true);
  const [FirstPaymentclick, setFirstPaymentclick] = useState(false);
  const [open, setOpen] = useState(false);
  const [unpaidopen, setUnpaidOpen] = useState(false);
  const unpaidFlow = useSelector(Globalunpaidflow);
  const [open2, setOpen2] = useState(false);
  const [paybtns, setpaybtns] = useState([]);
  const [businessUPI, setBusinessUPI] = useState(false);
  const [businessUPIOrderId, setBusinessUPIOrderId] = useState(null);
  const [businessUPILink, setBusinessUPILink] = useState(null);
  const [paybtnselected, setPaybtnselected] = useState();
  const [Paybtnnameselected, setPaybtnnameselected] = useState();
  const [SelectedCardOption, setSelectedCardOption] = useState(null);
  const [SelectedUPIPayOption, setSelectedUPIPayOption] = useState('Default');
  const [SelectedUpiOption, setSelectedUpiOption] = useState('');
  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 [PrintOrderDetails, setPrintOrderDetails] = useState([]);
  const OrderCardDetail = useSelector(GlobalOrderCardDetails);
  const [customerPreviesOrders, setCustomerPreviesOrders] = useState(false);

  console.log(OrderCardDetail, 'OrderCardDetail');
  //Total calculation
  const TotalItems = OrderCardDetail?.length;
  const [formattedDate, setFormattedDate] = useState('');
  const [UpiOptionOpen, setUpiOptionOpen] = useState(false);
  const [CardOptionOpen, setCardOptionOpen] = useState(false);
  const Qty = OrderCardDetail?.reduce((acc, item) => {
    const isWeightScale = item?.ScaleType === 'weight';

    if (isWeightScale) {
      return (
        acc + (Weightasquantity ? 1 : Math.round(Number(item?.OrderQty || 0)))
      );
    }

    return acc + Math.round(Number(item?.OrderQty || 0));
  }, 0);
  const [UpiOption, setUpiOption] = useState('');
  const [UpiId, setUpiId] = useState('');
  const [qrCode, setQrCode] = useState(false);
  const [paymentSucess, setPaymentSuccess] = useState(false);
  const [UpinotSelected, setUpinotSelected] = useState(false);
  const [CardoptionnotSelected, setCardoptionnotSelected] = useState(false);
  const [Success, SetSuccess] = useState();
  const [brachName, setbrachName] = useState('');
  const [UpiOpen, setUpiOpen] = useState(false);
  const [CreditCustomer, setCreditCustomer] = useState(false);
  const [creditCustomerOpen, setcreditCustomerOpen] = useState(false);

  const tableOptions = BSLayoutData?.BookingBilling?.[1];
  const GlobEstBooking = useSelector(GlobalEstimateBooking);
  const GlobProdwisedata = useSelector(GlobalSelProdWiseEst);
  const GlobalUpiID = useSelector(GlobalUpiIDprint);
  const GlobalUpName = useSelector(GlobalUpiIDName);
  const GlobalUpiIDoptionIdd = useSelector(GlobalUpiIDoptionId);
  const [ConfigDataList, setConfigDataList] = useState([]);
  const [isUp, setIsUp] = useState(true);
  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 [CardPayOption, setCardPayOption] = useState([]);
  const [Splitpayment, setSplitpayment] = useState(false);
  const [urlData, setUrlData] = useState();

  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 TokenOnly = SettingDataSelector?.[0]?.SettingDtlDetails?.filter(
    (i) => i.SettingIdName === 'TokenOnly'
  )?.[0];
  const IndividualToken = SettingDataSelector?.[0]?.SettingDtlDetails?.filter(
    (i) => i.SettingIdName === 'AllProductindividualToken'
  )?.[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 [OrderStatus, setOrderStatus] = useState(true);
  const GlobaluseOptions = useSelector(GlobalCommonPaymentOptions);
  const [useOptions, setuseOptions] = useState([]);
  const paymentloader = useSelector(GlobalPayementloader);
  const [UnpaidConfirmation, setUnpaidConfirmation] = useState(false);
  const [unpaidselectedindex, setunpaidselectedindex] = useState();
  const [failedOrderData, setFailedOrderData] = useState();
  const [responsiveBill, setResponsiveBill] = useState(true);
  const [TotalAmount, setTotalAmount] = useState(0);
  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 [showWhatsAppShare, setShowWhatsAppShare] = useState(false);
  const [showSMSShare, setSMSShare] = useState(false);
  const allowedNames = ['whatsapp', 'Print', 'SMS'];
  const [MobileNoWhatsApp, setMobileNoWhatsApp] = useState();
  const printDatas = useSelector(GlobalprintDatas);
  const PrinterDetails = useSelector(GlobalPrinterMappingDtls);
  const OtherServicesglobal = useSelector(GlobalOtherSevices);
  const [OtherServicesModal, setOtherServicesModal] = useState(false);
  const [vehicleInputs, setVehicleInputs] = useState({});
  const [credit, setCredit] = useState(false);
  const [overAllBal, setOverAllBal] = useState(0);
  const [errors, setErrors] = useState({});
  const [OtherServicesPrintDetails, setOtherServicesPrintDetails] = useState(
    []
  );
  const [showCancelConfirm, setShowCancelConfirm] = useState(false);

  const filteredSettingNames = SettingDataSelector?.[0]?.['SettingDtlDetails']
    ?.filter(
      (item) =>
        allowedNames.includes(item?.SettingIdName) && item?.SettingValue === 'Y'
    )
    ?.map((item) => item?.SettingIdName);
  // for customised invoice number
  const { invoiceDate, clearInvoiceDate } = useDateStore();
  const CurrentOrderId = useSelector(GlobalCurrentOrderId);
  // Usage
  console.log(
    filteredSettingNames,
    SettingDataSelector?.[0]?.['SettingDtlDetails'],
    SettingDataSelector,
    'filteredSettingNames'
  );
  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 (!preOrder) {
      const totalSum = OrderCardDetail?.reduce(
        (acc, card) => acc + parseFloat(card.OrderRate * card.OrderQty || 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(() => {
    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 CheckOrderType = OrderCardDetail?.filter(
    (a) => a?.BookingTypeName !== BookingType
  );

  const handleResponsiveBill = () => {
    setResponsiveBill(!responsiveBill);
  };
  useEffect(() => {
    if (CompId && BranchId && AppId) {
      getHolddata();
      getUnpaiddatas();
      getCustomerData();
    }
  }, [CompId, BranchId, AppId]);

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

  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 (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]);

  // useEffect(() => {
  //   const handleKeyPress = (event) => {
  //     if (event.shiftKey && event.code === 'KeyM') {
  //       if (
  //         document.activeElement.tagName !== 'INPUT' &&
  //         document.activeElement.tagName !== 'TEXTAREA'
  //       ) {
  //         event.preventDefault();
  //         setBlink(true);
  //       }
  //     }
  //   };
  //   const handleClickOutside = (event) => {
  //     setBlink(false);
  //   };
  //   window.addEventListener('keydown', handleKeyPress);
  //   window.addEventListener('mousedown', handleClickOutside);
  //   return () => {
  //     window.removeEventListener('keydown', handleKeyPress);
  //     window.addEventListener('mousedown', handleClickOutside);
  //   };
  // }, []);

  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,
      })
    );
  };

  const handleIconClick = () => {
    setIsUp((prevIsUp) => !prevIsUp);
  };
  //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 (OrderCardDetail?.length <= 0) {
      dispatch(changeCustomerID(null));
      dispatch(changeSelectedCustId(null));
      dispatch(changeSelectedOption(null));
      dispatch(ChangeSelectedCustDisable(false));
    }
  }, [OrderCardDetail]);

  const handlesplitpaymentclose = () => {
    setSplitpayment(false);
    setPaybtnnameselected(PaymentOptionsModeName);
    setPaybtnselected(PaymentOptionsModeId);
    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 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 formatAmount = (value) => {
    return allowDecimal
      ? parseFloat(value || 0).toFixed(2)
      : Math.round(value || 0);
  };
  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.'
        );
      }
    }
  };

  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();
    }
  };

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

  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([]);
      }
    };
    setDefaultPaymentOption();
  }, [defaultPaymentTrigger]);

  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);
    }
  };
  // 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]);

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

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

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

  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();
      }
    }
  };
  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();
    }
  };

  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 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(() => {
    TotalWithoutTaxRate();
    TotalTaxAmt();
    OrderCardDetail?.length == 0 ? dispatch(changeunpaidflow(false)) : '';
  }, [OrderCardDetail]);

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

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

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

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

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

  //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);
    }
  };

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

  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' &&
        BookingType !== 'Dine In' &&
        tableOptions?.some((e) => e?.OptionName == 'Hold') &&
        paybtns?.length > 0
      ) {
        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,
  ]);

  //dhana

  const getPaymentOptionFeature = async () => {
    const FiltersalesPayment = GlobaluseOptions?.filter(
      (item) => item.FlowName?.toLowerCase() === 'sales'
    );
    setuseOptions(FiltersalesPayment);
    const FilterData = FiltersalesPayment?.[0];
    const filterpaycounter = FilterData?.OptionDetails?.filter(
      (item) => item?.OptionName?.toLowerCase() === 'pay at the counter'
    );
    const filterpaymentgateway = FilterData?.OptionDetails?.filter(
      (item) => item?.OptionName?.toLowerCase() === 'payment gateway'
    );
    const filterpaymentdevice = FilterData?.OptionDetails?.filter(
      (item) => item?.OptionName?.toLowerCase() === 'payment device'
    );
    const filterBusinessUpi = FilterData?.OptionDetails?.filter(
      (item) => item?.OptionName?.toLowerCase() === 'business upi'
    );
    const BusinessUpi = filterBusinessUpi?.[0];
    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 (BusinessUpi?.ModeDetails?.length > 0) {
      options.push({
        label: 'Business UPI',
        value: 'Business',
        imgSrc: pozologoimg,
        PaymentOptionId: BusinessUpi?.PaymentOptionId,
        PaymentFlowId: BusinessUpi?.PaymentFlowId,
        OptionId: BusinessUpi?.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 || []);
    // }
  };

  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 getUnpaiddatas = async () => {
    let data = {
      CompId: CompId,
      BranchId: BranchId,
      AppId: AppId,
    };
    await dispatch(getUnpaidData(data)).unwrap();
  };

  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 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 TotalWithoutTaxRate = async () => {
    const totalwithouttax = OrderCardDetail?.reduce((accumulator, card) => {
      return accumulator + parseFloat(card.WithoutTaxRate || 0);
    }, 0);
    await dispatch(
      changeSummeryTotalWithoutTaxAmount(formatAmount(totalwithouttax))
    );
  };

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

  const handleOpenChange = () => {
    setOpen((prev) => !prev);
  };

  const handleOpenChange2 = () => {
    setOpen2((prev) => !prev);
  };

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

  const handlePaymentMode = async (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, mode = false) => {
    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 HandleholdModelOpen = () => {
    setHold(true);
  };

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

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

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

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

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

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

  const ProductSummary = (salesData) => {
    const productMap = new Map();

    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') {
      setPaybtnnameselected(PaymentOptionsModeName);
      setPaybtnselected(PaymentOptionsModeId);
    }
    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(changeLoyaltyConsumedQuantities({}));
    dispatch(changeFullOfferAppliedProducts([]));
    dispatch(ChangeFullFreeProductList([]));
    dispatch(changeTipAmount(0));
    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));
    setPaybtnnameselected(PaymentOptionsModeName);
    setPaybtnselected(PaymentOptionsModeId);
    setQrCode(false);
    setCurrentOrderNetAmount(0);
    setPreviousNetAmount(0);
    setUpinotSelected(false);
    getHolddata();
    if (defaultBookingType === 'Both') {
      await dispatch(changeBookingType('TakeAway'));
    }
    await dispatch(changeSelProdWiseEst([]));
    await dispatch(ChangeOverAllDiscSales(null));
    await dispatch(ChangeOverAllDiscEstimate(null));
    // clearInvoiceDate
    clearInvoiceDate();
    dispatch(changeCurrentOrderId(null));
    // await dispatch(changeEstimateBooking(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));
  };

  function safeRound(amountStr) {
    if (amountStr == null) return allowDecimal ? '0.00' : '0';

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

    if (isNaN(num)) return allowDecimal ? '0.00' : '0';

    return allowDecimal ? num.toFixed(2) : Math.round(num).toString();
  }

  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,
      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,
      ServiceProvider: 0,
      ActiveStatus: 'A',
      CreatedBy: UserId,
      AddlInfo: 'test',
      BillAmount: totalwithouttax,
      OverallDiscSales: OverAllSales > 0 ? OverAllSales : 0,
      OverallDiscEst: OverAllEstimate > 0 ? OverAllEstimate : 0,
      TaxAmount: totaltax,
      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,
      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';
    }
    console.log(PostData, 'PostDataPostData');
    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 businessUPIfilter = response?.data?.PaymentOrderDtl?.filter(
        (item) =>
          item?.PaymentOptionType?.toLowerCase() === 'bu' &&
          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);
        filteredSettingNames?.includes('whatsapp') &&
          MobileNoWhatsApp?.value &&
          handleURL([response?.data]);
      }

      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));
                    setPaybtnnameselected(PaymentOptionsModeName);
                    setPaybtnselected(PaymentOptionsModeId);
                    setFirstPaymentclick(false);
                    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();
        }
      } 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);
                setPaybtnnameselected(PaymentOptionsModeName);
                setPaybtnselected(PaymentOptionsModeId);
                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);
            setPaybtnnameselected(PaymentOptionsModeName);
            setPaybtnselected(PaymentOptionsModeId);
            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);
        setPaybtnnameselected(PaymentOptionsModeName);
        setPaybtnselected(PaymentOptionsModeId);
        dispatch(changePaymentloader(false));
        CustomerDisplayRemovedData();
        ClearAllGlobalStateDatas(value);
      }
    }
  };

  const businessUPIFlow = async (
    businessUPIfilter,
    OrderId,
    PaymentStatusLink
  ) => {
    // Implement your business UPI flow here

    // You can add similar logic as PaymentDeviceFlow or PaymentGatewayFlow based on your requirements
    setBusinessUPILink(PaymentStatusLink);
    setBusinessUPI(true);
    setBusinessUPIOrderId(OrderId);
  };

  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?.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(changeReorderHoldDetails([tabledata?.[event]]?.[0]));
      await dispatch(
        changeReorderProductDetails(tabledata?.[event]?.productDetails)
      );
      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 (
      BSLayoutData?.BookingLayout?.[1]?.some(
        (item) => item?.OptionName === 'SubCategory'
      ) &&
      ProdSubCat
    ) {
      await dispatch(getLayoutproductCard(data1)).unwrap();
    } else if (
      !BSLayoutData?.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');
      }
    }
  };
  // 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 onComplete = useCallback(() => {
    setMessageData(null);
    setMessageType(null);
  }, []);

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

  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=${orderIdsArray}`;
  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 = BSLayoutData?.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]);

  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 (
    <>
      <div className="BSBilling3div">
        {screenwidth <= 768 && (
          <div
            className={`BSBillingTable1-summeryTable ${responsiveBill ? 'open' : 'closed'}`}
            style={{
              transition: 'max-height 0.3s ease-in-out',
              overflow: 'scroll',
              maxHeight: responsiveBill ? '180px' : '0px',
            }}
          >
            {Array.isArray(OrderCardDetail) && OrderCardDetail?.length >= 1 && (
              <BSBillingTable3 />
            )}
          </div>
        )}

        <div className="BSBilling3-customer">
          <Messages
            messageType={messageType}
            messageData={messageData}
            onComplete={onComplete}
          />
          {screenwidth <= 768 && (
            <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' }}
                  >
                    {screenwidth <= 768 && (
                      <div
                        style={{
                          width: '28px',
                          display: 'flex',
                          alignItems: 'center',
                          height: '26px',
                        }}
                      >
                        {' '}
                        <PozoCartIcon />{' '}
                      </div>
                    )}
                  </div>
                )}
            </div>
          )}
          <div className="BS3hold-sum">
            {(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>
            )}
            {tableOptions?.filter((item) => item.OptionName === 'AddCustomer')
              .length === 1 || navCust === true ? (
              <>
                {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'
                        )
                    )
                  ) && (
                    <div style={{ width: '2rem' }}>
                      <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>
                  )}
              </>
            ) : (
              ''
            )}
            {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 (Alt+S)"
                    isMobile={isMobile}
                  >
                    {' '}
                    <div
                      className="BSBillingNav-icon-table-icon"
                      onClick={
                        CheckBookingStatus != 'Close' && !addnewAccess
                          ? SplitPaymentOpen
                          : ''
                      }
                      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',
                      }}
                    >
                      <PozoSplitPaymentIcon />
                    </div>
                  </TooltipWrapper>
                )}
              </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 && (
              <>
                {tableOptions
                  .filter((item) => item.OptionName === 'UnpaidBill')
                  .map((filteredItem) => (
                    <div style={{ width: '2rem' }}>
                      <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 &&
              (BookingType === 'Dine In' ||
                BookingTypeBoth ||
                CheckOrderType?.length > 0) &&
              !unpaidFlow &&
              SelectedTableDetails?.length !== 0 && (
                <div
                  style={{
                    width: '4rem',
                    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>
              )}
            {!OtherServicesglobal && (
              <div style={{ width: '2rem' }}>
                {tableOptions?.map((item) => (
                  <>
                    {unpaidFlow == false
                      ? item?.OptionName == 'Hold' &&
                      BookingType !== 'Dine In' &&
                      !BookingTypeBoth &&
                      OrderCardDetail?.length != 0 &&
                      CheckOrderType?.length === 0 &&
                      OrderType != 'Failed' &&
                      CheckBookingStatus != 'Close' &&
                      paybtns?.length > 0 &&
                      !addnewAccess && (
                        <TooltipWrapper
                          title={'Hold (Alt+W)'}
                          isMobile={isMobile}
                        >
                          {' '}
                          <PozoHoldIcon
                            className="BSBillingNav-icon-table-icon"
                            onClick={() => AddBookingDetails('Hold', false)}
                            style={{
                              fontSize: '30px',
                              cursor: 'pointer',
                              color: '' ? '#52c41a' : '#1292EE',
                            }}
                          />
                        </TooltipWrapper>
                      )
                      : ''}
                    {unpaidFlow == false
                      ? item?.OptionName == 'Hold' &&
                      paybtns?.length > 0 &&
                      BookingType !== 'Dine In' &&
                      !BookingTypeBoth &&
                      Holddata?.length > 0 &&
                      paybtns?.length > 0 &&
                      OrderCardDetail?.length == 0 &&
                      CheckBookingStatus != 'Close' &&
                      !addnewAccess && (
                        <TooltipWrapper
                          title={'Recall (Alt+W)'}
                          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 className="Table3-Price-summarypopfullscrn">
              <Popover
                content={
                  <>
                    <a onClick={hide}>
                      <AiOutlineClose />
                    </a>

                    <BSSummery1 />
                  </>
                }
                trigger="click"
                open={open}
                onOpenChange={handleOpenChange}
              >
                <UpCircleOutlined
                  style={{
                    fontSize: '20px',
                    cursor: 'pointer',
                    color: '#1292EE',
                  }}
                />
              </Popover>
            </div>

            {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
              style={{
                display: 'flex',
                flexDirection: 'column',
                rowGap: '0.2rem',
              }}
            ></div>
          </div>
          <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>
          </div>
          <TooltipWrapper
            // title={'Payment Mode (SHIFT + M)'}
            isMobile={isMobile}
            placement={'left'}
          >
            <div className="Table3-payment-mode-tooltip">
              <div
                className="Table3-payment-mode"
                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
                            )
                        }
                      >
                        {/* {UpiOption === "" && payment?.ModeName?.toLowerCase() === "upi" && <p> UPI</p>} */}

                        <div
                          style={{
                            display: 'flex',
                            flexDirection: 'row',
                            columnGap: '0.5rem',
                            alignItems: 'center',
                          }}
                        >
                          {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}
                              UpiOption={UpiOption}
                              BusinessPayOption={BusinessPayOption}
                              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>
              {PrintOrderDetails?.length > 0 && (
                <div
                  style={{
                    display: 'flex',
                    gap: '1rem',
                    justifyContent: 'center',
                  }}
                >
                  {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>
              )}
            </div>
          </TooltipWrapper>
        </div>

        <vr className="Table3-vertical-line"></vr>

        <div className="Table3-price">
          <div className="Table3-Price-div">
            <div>
              <table className="Table3-total-price">
                <tr className="Table3-totalprice-row">
                  <td>
                    <p
                      className="Totalpay"
                      style={{
                        fontFamily: FontFamily['para'],
                      }}
                    >
                      Items :&nbsp;
                    </p>
                  </td>
                  <td
                    className="lstamount"
                    style={{ fontFamily: FontFamily['para'] }}
                  >
                    {TotalItems}
                  </td>
                </tr>
                <tr className="Table3-totalprice-row">
                  <td>
                    <p
                      className="Discountpay"
                      style={{
                        fontFamily: FontFamily['para'],
                      }}
                    >
                      Qty :&nbsp;
                    </p>
                  </td>
                  <td
                    className="lstamount"
                    style={{ fontFamily: FontFamily['para'] }}
                  >
                    {' '}
                    {Qty}
                  </td>
                </tr>
              </table>
            </div>
            {OrderCardDetail?.length > 0 &&
              ParkingDisplay &&
              !OtherServicesglobal && (
                <div
                  style={{
                    width: '1.5rem',
                    color: 'rgb(18, 146, 238)',
                    display: 'flex',
                    alignItems: 'center',
                    height: '2.46rem',
                  }}
                >
                  <BSOtherServiceClaim />
                </div>
              )}
            <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
              {!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="Table3-Price-summarypopT3">
                <Popover
                  content={
                    <>
                      <a onClick={hide}>
                        <AiOutlineClose color="#000" />
                      </a>

                      <BSSummery1 />
                    </>
                  }
                  trigger="click"
                  open={open2}
                  onOpenChange={handleOpenChange2}
                >
                  {!isMobile ? (
                    <TooltipWrapper title="Summary">
                      {!open2 ? (
                        <UpCircleOutlined
                          style={{
                            fontSize: '23px',
                            cursor: 'pointer',
                            color: '#1292EE',
                          }}
                          onClick={() => {
                            handleOpenChange2;
                          }}
                        />
                      ) : (
                        <DownCircleOutlined
                          style={{
                            fontSize: '23px',
                            cursor: 'pointer',
                            color: '#1292EE',
                          }}
                          onClick={() => {
                            handleOpenChange2;
                          }}
                        />
                      )}
                    </TooltipWrapper>
                  ) : (
                    <div>
                      {!open2 ? (
                        <UpCircleOutlined
                          style={{
                            fontSize: '23px',
                            cursor: 'pointer',
                            color: '#1292EE',
                          }}
                          onClick={() => {
                            handleOpenChange2;
                          }}
                        />
                      ) : (
                        <DownCircleOutlined
                          style={{
                            fontSize: '23px',
                            cursor: 'pointer',
                            color: '#1292EE',
                          }}
                          onClick={() => {
                            handleOpenChange2;
                          }}
                        />
                      )}
                    </div>
                  )}

                  {/* <TooltipWrapper title="Summary" isMobile={isMobile}>
                                    {!open2 ? (
                                        <UpCircleOutlined
                                            style={{ fontSize: '23px', cursor: 'pointer', color: '#1292EE' }}
                                            onClick={handleIconClick}
                                        />
                                    ) : (
                                        <DownCircleOutlined
                                            style={{ fontSize: '23px', cursor: 'pointer', color: '#1292EE' }}
                                            onClick={handleIconClick}
                                        />
                                    )}
                                </TooltipWrapper> */}
                </Popover>
              </div>
            </div>
          </div>
          <TooltipWrapper title="Create Bill (F4)" isMobile={isMobile}>
            <div
              className={
                // (empData?.AddAccess === "N" || SAAccessCommonMaster?.AddAccess === "N")
                addnewAccess
                  ? 'BSBillingTable3-paybtn-deactive'
                  : FirstPaymentclick === false &&
                    OrderCardDetail?.length > 0 &&
                    paybtnselected &&
                    CheckBookingStatus != 'Close'
                    ? !OrderStatus ? salesBillEdit && (currentOrderNetAmount < previousNetAmount) ?
                      'BSBillingTable3-paybtn'
                      : 'BSBillingTable3-paybtn'
                      : 'BSBillingTable3-paybtn Order'
                    : 'BSBillingTable3-paybtn-deactive'
              }
              //dhana
              // onClick={() => {
              //     (qrCode && SelectedUPIPayOption === "Default") ? UpiPayment() : OrderStatus ? AddBookingDetails("Dine-In", false) : AddBookingDetails(BookingType, true);
              // }}
              onClick={
                // BranchFinancialStatus==='N'?
                // financialYearError:
                handleButtonClick
              }
            //dhana
            >
              {!OrderStatus ? salesBillEdit && (currentOrderNetAmount < previousNetAmount) ? <p className="Table4-Order">Refund: ₹{(previousNetAmount || 0) - (currentOrderNetAmount || 0)}</p> : (
                <>
                  <p 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>
                    )}
                  </p>

                  <div className="BSBillingTable3-pay">
                    <BiRightArrowAlt />
                  </div>
                </>
              ) : (
                <div>ORDER</div>
              )}
            </div>
          </TooltipWrapper>
          {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>
          )}
        </div>
      </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}
        />
      )}

      <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)}
              />
            </>
          }
        />
      )}
    </>
  );
};

export default BSBillingTable3Pay;