Android_Retail/src/Pages/BookingScreen/Components/BSCombo/BSC1Payment.jsx

import React, { useEffect, useState, useRef } from 'react';
import { FaWhatsapp, FaPrint, FaParking } from 'react-icons/fa';
import { useDispatch, useSelector } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import moment from 'moment';
import { Badge, Popover, Modal } from 'antd';
import { AiOutlineClose, AiOutlineArrowRight } from 'react-icons/ai';
import { GiBasket } from 'react-icons/gi';
import {
  UpCircleOutlined,
  UpOutlined,
  TransactionOutlined,
} from '@ant-design/icons';
import {
  printDiv,
  extractLastNumberOrderId,
  encryptObject,
} from '../../../../Services/Others';
import PaymentPdfBooking from '../../../paymentpdfPage/PaymentPdfBooking';
import { Messages } from '../../../../Components/Notifications/Messages';
import { MdMoneyOff } from 'react-icons/md';
import paygate from '../../../../Images/paygate.png';
import defaultupi from '../../../../Images/defaultupi.png';
import paydevice from '../../../../Images/paydevice.png';
import paymentFailure from '../../../../Images/payment-failure2.png';
import BSSummery1 from '../BSBillingTables/BSBillingTableSummery/BSSummery';
import { DefaultModal } from '../../../../Components/Modal/DefaultModal.jsx';
import { Tables } from '../../../../Components/Tables/Table';
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 '../../../../Styles/BookingScreen/Template/BSLayout7/BSC1Payment.scss';
import '../../../../Styles/BookingScreen/Template/BSLayout7/CustomFloatMenu.scss';
import PozoPreOrderIcon from '../UtillComponents/Pozo retail icons/PozoPreOrderIcon.jsx';
import {
  GlobalOrderCardDetails,
  changeOrderCardDetails,
  GlobalCustId,
  PostBookingData,
  GlobalSelectedTableDetails,
  GlobalBookingType,
  changeBookingType,
  getConfigType,
  PutBookingData,
  GlobalReorderHoldDetails,
  getUnpaidData,
  changeReorderHoldDetails,
  ChangeNavHoldData,
  GlobalReprintModal,
  changeSelectedTableDetails,
  GlobalNavHoldData,
  getPreferenceData,
  changeSelectedCustId,
  GlobalSelCustId,
  changeSelectedOption,
  GlobalSelOption,
  changeCustomerID,
  changeCompoPaymentIconStatus,
  getSalesDetailData,
  SendPaymentLink,
  changeSummeryTotalAmount,
  changeCreditFocus,
  changeUpiIDprint,
  GlobalSelectedCustDisable,
  changeSummeryTotalItems,
  changeSummeryQty,
  changeSummeryTotalWithoutTaxAmount,
  changeSummeryTotalTaxAmount,
  GlobalEstimateBooking,
  GlobalSelProdWiseEst,
  changeSelProdWiseEst,
  changeEstimateBooking,
  GlobalUpiIDprint,
  GlobalUpiIDName,
  GlobalUpiIDoptionId,
  GlobalBookingTypeBoth,
  changeSelectTable,
  changeSelectChair,
  GlobalOrderType,
  changeReorderProductDetails,
  FeatureAddon,
  GlobalCommonPaymentOptions,
  PostPaymentdevice,
  changeUpiIDName,
  changeUpiIDoptionId,
  GetPaymentdeviceResponse,
  PutBookingPaymentStatusChange,
  changeCombosearch,
  GlobalCombosearch,
  Comboget,
  GlobalPayementloader,
  changePaymentloader,
  PaymentGatewayGetdetail,
  changePaymentTransactionNumber,
  Globalunpaidflow,
  changeunpaidflow,
  PutPendingPaymentList,
  changealldata,
  PreferenceData,
  changeOrderType,
  putSplitpaymentStatus,
  GlobalFailedTotalAmt,
  GlobalOverAllDiscEstimate,
  GlobalOverAllDiscSales,
  ChangeOverAllDiscSales,
  ChangeOverAllDiscEstimate,
  GlobalUnpaidListData,
  changeUnpaidData,
  getAllCustomer,
  GlobalBranchFinancialStatus,
  changeSummeryComboOfferAmount,
  changeTipAmount,
  GlobaltipAmount,
  GlobalFeatAddOnData,
  GlobalOtherServiceTicketClaim,
  changeOtherServiceTicketClaim,
  GlobalOtherSevices,
  changeOtherServices,
  changeComboRedirectionToDefaultLayoutForParking,
  GlobalRetailWSSalesType,
  GlobalCurrentOrderId,
  changeCurrentOrderId,
  getCreditCustomer,
  ChangeSelectedCustDisable,
  GlobalSalesBillEdit,
  GlobalPreviousOrderPayment,
  GlobalPreviousOrderOfferDetails,
  GlobalpaymentOptionData,
  getPaymentOptions,
  putSalesBillEdit,
  changeBillEditingMode,
  changePreviousOrderPayment,
  changePreviousOrderOfferDetail,
  GlobalPaymentTrigger,
} from '../../../../Features/BookingScreen/BookingData/BookingData';
import { PrintStyleFunction } from '../../../paymentpdfPage/PrintStyleFunction.js';
import {
  gettinghold,
  globalholddata,
  changeholddata,
} from '../../../../Features/BookingScreen/HoldOption/HoldOption';

import {
  changetemplateData,
  SelectedPrintTemplate,
  StoredSessionData,
  GlobalprintDatas,
  GlobalPrinterMappingDtls,
  getPrinterMappingDetails,
  getPrintSelectionComponentData,
} from '../../../../Features/ThemeChange/ThemeChange';
import FeaturesFunctionalities from '../BookingFunctionality/FeaturesFunctionalities';
import {
  globalExtraTotalAmount,
  ChangeTotalAmount,
} from '../../../../Features/ExteraCharges/ExtraCharges';
import {
  getAddCustomerDetails,
  getDefaultPaymentOptions,
  GlobalAddCustomerDetails,
  ReprintDetails,
  triggerCustomerRefresh,
} from '../../../../Features/BookingScreen/Customer/addCustomer';
import BSCustomerSelect from '../UtillComponents/BSSelectCustomer.jsx';
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 PozoTakeAway from '../UtillComponents/Pozo retail icons/PozoTakeAwayIcon';
import PozoQuickAddIcon from '../UtillComponents/Pozo retail icons/PozoQuickAddIcon.jsx';
import PozoReprintIcon from '../UtillComponents/Pozo retail icons/PozoReprintIcon';
import PozoExtraChargesIcon from '../UtillComponents/Pozo retail icons/PozoExtraChargesIcon.jsx';
import PozoAddCustomerIcon from '../UtillComponents/Pozo retail icons/PozoAddCustomerIcon.jsx';
import BsBillingCreditCustomer from '../BookingFunctionality/BSBillingCreditCustomer.jsx';
import { TfiMoreAlt } from 'react-icons/tfi';
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 SplitPayment from '../BookingFunctionality/SplitPayment.jsx';
import BSNavBarEstimate from '../UtillComponents/BSNavBarEst.jsx';
import CountUp from 'react-countup';
import BSNavBarPreOrder from '../UtillComponents/BSComboNavBarPreOrder.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 {
  GlobalPreOrderPendingCount,
  PreOrderGet,
  changePreOrderPendingCount,
  changepreOrder,
  changePreOrderAdditem,
  changepreOrderList,
  changePreOrderCusName,
  changePreOrderCusMob,
  changePreOrderDate,
  changePreOrderTime,
  changePreOrderAdd1,
  changePreOrderAdd2,
  changePreOrderAdvance,
  changePreOrderzip,
  changePreOrderCity,
  changePreOrderDistrict,
  changePreOrderState,
} from '../../../../Features/BookingScreen/PreOrder/PreOrder.js';
import PaymentFailedSales from '../../../Payment/PaymentFailedDetails/PaymentFailedSales.jsx';
import PozoSplitPaymentIcon from '../UtillComponents/Pozo retail icons/PozoSplitPaymentIcon.jsx';
import PozoFailedPaymentsIcon from '../UtillComponents/Pozo retail icons/PozoFailedPaymentsIcon.jsx';
import {
  Global_CoupenCodeAmount,
  Global_loyaltyPointsDiscountAmount,
  Global_OrderOfferDetail,
  Global_OverallOfferAmount,
  Global_SalesWiseOfferAmount,
} from '../../../../Features/Offer/Offer.js';
import { useApplyOfferto_CardDetail } from '../UtillComponents/BSNavBarOffer/BSNavBarOffer_CustomHooks.jsx';
import TooltipWrapper from '../../../../Components/Tooltip/Tooltip';
import BSNavBarOffer from '../UtillComponents/BSNavBarOffer/BSNavBarOffer.jsx';
import { getEmpAccess } from '../../../../Features/AppPage/CenterPage.js';
import { useAuth } from '../../../../AuthContext.jsx';
import { GlobalBookingStatus } from '../../../../Features/Payment/PaymentReceivedRetail/PaymentReceivedRetail.js';
import WhatsAppShare from '../../../WhatsAppShare/whatsAppShare.jsx';
import CryptoJS from 'crypto-js';
import SMSShare from '../../../WhatsAppShare/SmsShare.jsx';
import { MdSms } from 'react-icons/md';
import {
  changeSalesPaymentoption,
  GlobalSalesPaymentoption,
} from '../../../../Features/Payment/Paymentoptions/Paymentoptions.js';
import Paymentoption from '../../../Payment/PaymentOptions/PaymentOptions.jsx';
import BSTipAmount from '../UtillComponents/BSTipAmount.jsx';
import { ApplicationPreferences } from '../../../../Features/BrachLogin/BranchLogin.js';
import BSOtherServiceClaim from '../UtillComponents/BSOtherServiceClaim.jsx';
import { OtherServicesCardlistdata } from '../../../../Features/OtherServices/OtherServices.js';
import { MobilePdfPrint } from '../BookingFunctionality/MobilePdfPrint.js';
import { PublicQrCodepost } from '../../../../Features/ConfigMasterPage/ConfigMasterPage.js';
import BSMembership from '../UtillComponents/BSMembership.jsx';
import CardPopover from '../BSBillingTables/StandardTable/Utils/CardPopover.jsx';
import UpiPopover from '../BSBillingTables/StandardTable/Utils/UpiPopOver.jsx';
import { useDateStore } from '../../../../Features/BookingScreen/BookingData/DateStore.js';
import { getPaymentOptionsData } from '../../../../Features/BookingScreen/BookingData/KioskBookingData.js';
import { GlobalFreeProdList, GlobalOfferAppliedProducts, GlobalOverAllOfferAmt } from '../../../../Features/Offer/Offernew/BookingOffernew.js';
import BSNavBarTable from '../UtillComponents/BSNavBarTable.jsx';
import pozologoimg from '../../../../Images/pozologoimg.png';
import PaymentGatewayEmbedded from '../UtillComponents/PaymentGatewayEmbedded.jsx';

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

const currentDateValue = moment().format('YYYY-MM-DD HH:mm:ss');

const BSC1Payment = (props) => {
  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 SessionData = useSelector(StoredSessionData);
  const BranchFinancialStatus = useSelector(GlobalBranchFinancialStatus);
  const globalTipAmount = useSelector(GlobaltipAmount);
  const OtherServiceTicketClaim = useSelector(GlobalOtherServiceTicketClaim);
  const RetailWSSalesType = useSelector(GlobalRetailWSSalesType);
  const BranchId = SessionData?.BranchId;
  const AppName = SessionData?.AppName;
  const AppId = SessionData?.AppId;
  const CompId = SessionData?.CompId;
  const UserId = SessionData?.UserId;
  const UserType = SessionData?.UserType;
  const AuthToken = SessionData?.AuthToken;
  const SessionMobileNo = SessionData?.SessionMobileNo;
  const [open, setOpen] = useState(false);
  const printerTemplateStyle = useSelector(SelectedPrintTemplate);
  const SelectedTableDetails = useSelector(GlobalSelectedTableDetails);
  const Custdisable = useSelector(GlobalSelectedCustDisable);
  const OrderCardDetail = useSelector(GlobalOrderCardDetails);
  const GlobalExtraCharge = useSelector(globalExtraTotalAmount);
  const ReportholdData = useSelector(GlobalReorderHoldDetails);
  const ReprintModal = useSelector(GlobalReprintModal);
  const GetCustId = useSelector(GlobalCustId);
  const GlobalUpiID = useSelector(GlobalUpiIDprint);
  const SelCustId = useSelector(GlobalSelCustId);
  const selOption = useSelector(GlobalSelOption);
  const Holddata = useSelector(globalholddata);
  const BookingType = useSelector(GlobalBookingType);
  const BookingTypeBoth = useSelector(GlobalBookingTypeBoth);
  const OrderType = useSelector(GlobalOrderType);
  const GlobalAddCustomerDetails1 = useSelector(GlobalAddCustomerDetails);
  const SettingDataSelector = useSelector(PreferenceData);
  const GlobalSalesPaymentoptions = useSelector(GlobalSalesPaymentoption);
  const FeatureAddonData = useSelector(GlobalFeatAddOnData);

  const allowedNames = ['whatsapp', 'Print', 'SMS'];

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

  const preferenceOffer =
    SettingDataSelector?.[0]?.['SettingDtlDetails']?.find(
      (item) => item.SettingIdName === 'Offer'
    )?.SettingValue === 'Y';
  const GlobalUpName = useSelector(GlobalUpiIDName);
  const GlobalUpiIDoptionIdd = useSelector(GlobalUpiIDoptionId);
  const NavHoldData = useSelector(GlobalNavHoldData);
  const GlobEstBooking = useSelector(GlobalEstimateBooking);
  const GlobProdwisedata = useSelector(GlobalSelProdWiseEst);
  const preOrder = useSelector(GlobalpreOrderOpen);
  const Comboglobal = useSelector(GlobalCombosearch);
  const FailedTotalAmt = useSelector(GlobalFailedTotalAmt);
  const OrderOfferDetail = useSelector(Global_OrderOfferDetail);
  const [SelectedUpiOption, setSelectedUpiOption] = useState();
  const [credit, setCredit] = useState(false);
  const [overAllBal, setOverAllBal] = useState(0);
  const [SelectedBookingType, setSelectedBookingType] = useState(null);
  const [TotalItems, setTotalItems] = useState('');
  const [showWhatsAppShare, setShowWhatsAppShare] = useState(false);
  const [showSMSShare, setSMSShare] = useState(false);
  const [TotalWithoutTaxAmount, setTotalWithoutTaxAmount] = useState('');
  const [TotalTaxAmount, setTotalTaxAmount] = useState('');
  const [Qty, setQty] = useState(null);
  const [formattedDate, setFormattedDate] = useState('');
  const [UpiOptionOpen, setUpiOptionOpen] = useState(false);
  const [UpiOption, setUpiOption] = useState('');
  const [UpiId, setUpiId] = 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 appPreferences = useSelector(ApplicationPreferences);
  const commonModulePreference = appPreferences?.find(
    (preference) => preference?.PreferredCatName === 'Common Module'
  )?.PreferenceCatDetails;
  const sportsAppPreference = commonModulePreference?.find(
    (preference) => preference?.PreferredSubCatName === 'SportsApp'
     &&
      preference?.PreferredStatus == 'Y'
  );
  console.log(sportsAppPreference,commonModulePreference,"sportsAppPreference")
  const bookingTypePreference = appPreferences?.find(
    (preference) => preference?.PreferredCatName === 'Booking Type'
  )?.PreferenceCatDetails;
  const dinePreference = bookingTypePreference?.find(
    (type) =>
      type?.PreferredSubCatName?.toLowerCase() === 'dine in' &&
      type?.PreferredStatus === 'Y'
  );
  const takeAwayPreference = bookingTypePreference?.find(
    (type) =>
      type?.PreferredSubCatName?.toLowerCase() === 'take away' &&
      type?.PreferredStatus === 'Y'
  );

  const preferenceshortcutkey = SettingDataSelector?.[0]?.[
    'SettingDtlDetails'
  ]?.some(
    (item) =>
      item.SettingIdName.toLowerCase() === 'shortcutkeys' &&
      item.SettingValue === 'Y'
  );

  const [addcustomer, setAddCustomer] = useState(false);
  const [PrintOrderDetails, setPrintOrderDetails] = useState([]);
  const tabledata = useSelector(GlobalUnpaidListData);
  const [FirstPaymentclick, setFirstPaymentclick] = useState(false);
  const [unpaidopen, setUnpaidOpen] = useState(false);
  const unpaidFlow = useSelector(Globalunpaidflow);
  const [messageType, setMessageType] = useState(null);
  const [messageData, setMessageData] = useState(null);
  const [reprint1, setReprint1] = useState(false);
  const [extraCharges, setExtraCharges] = useState(false);
  const [QuickAdd, setQuickAdd] = useState(false);
  const [DineInPreference, setDineInPreference] = useState({});
  const [UpinotSelected, setUpinotSelected] = useState(false);
  const [qrCode, setQrCode] = useState(false);
  const [paybtns, setpaybtns] = useState([]);
  const [CreditCustomer, setCreditCustomer] = useState(false);
  const [creditCustomerOpen, setcreditCustomerOpen] = useState(false);
  const [Success, SetSuccess] = useState();
  const [brachName, setbrachName] = useState('');
  const [UpiOpen, setUpiOpen] = useState(false);
  const [ConfigDataList, setConfigDataList] = useState([]);
  const BSComboData = props?.hasOwnProperty('optionNames')
    ? props['optionNames']
    : null;
  const BSComboNavbar =
    BSComboData?.BookingLayout?.[0] === 'Combo1'
      ? BSComboData?.BookingCombo1
      : BSComboData?.BookingCombo2;
  const OfferCheckedInSetup = BSComboNavbar?.[1]?.some(
    (some) => some.OptionName === 'Offer'
  );
  const UomPrint = SettingDataSelector?.[0]?.SettingDtlDetails.filter(
    (i) => i.SettingIdName === 'PrintUom'
  )?.[0];
  const Estimation = SettingDataSelector?.[0]?.SettingDtlDetails?.find(
    (item) => item.SettingIdName == 'Estimation'
  );
  const ParkingDisplay = SettingDataSelector?.[0]?.SettingDtlDetails?.find(
    (setting) =>
      setting?.SettingIdName?.toLowerCase() === 'parking' &&
      setting?.SettingValue === 'Y'
  );
  const MobileA4Print = SettingDataSelector?.[0]?.SettingDtlDetails?.find(
    (setting) =>
      setting?.SettingIdName?.toLowerCase() === 'mobilea4' &&
      setting?.SettingValue === 'Y'
  );
  const Weightasquantity = SettingDataSelector?.[0]?.SettingDtlDetails?.some(
    (setting) =>
      setting?.SettingIdName?.toLowerCase() === 'weightasquantity' &&
      setting?.SettingValue === 'Y'
  );
  const [OrderStatus, setOrderStatus] = useState(true);
  // const [FeatureAddonData, setFeatureAddonData] = useState([]);
  const [Splitpayment, setSplitpayment] = useState(false);
  const [urlData, setUrlData] = useState();
  const [PaymentOptions, setPaymentOptions] = useState([]);
  const [paybtnselected, setPaybtnselected] = useState();
  const [Paybtnnameselected, setPaybtnnameselected] = useState();
  const [OtherServiceStatus, setOtherServiceStatus] = useState(false);
  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 [SelectedCardOption, setSelectedCardOption] = useState(null);
  const [SelectedUPIPayOption, setSelectedUPIPayOption] = useState('Default');
  const [CardOptionOpen, setCardOptionOpen] = useState(false);
  const [CardoptionnotSelected, setCardoptionnotSelected] = useState(false);
  const [PaymentgatewayCard, setPaymentgatewayCard] = useState([]);
  const [PaymentDeviceCard, setPaymentDeviceCard] = useState([]);
  const [PaymentgatewayUPI, setPaymentgatewayUPI] = useState([]);
  const [PaymentDeviceUPI, setPaymentDeviceUPI] = useState([]);
  const [UpiPayOption, setUpiPayOption] = useState([]);
  const [BusinessPayOption, setBusinessPayoption] = useState([]);
  const [paymentSucess, setPaymentSuccess] = useState(false);
  const [businessUPI, setBusinessUPI] = useState(false);
  const [businessUPIOrderId, setBusinessUPIOrderId] = useState(null);
  const [businessUPILink, setBusinessUPILink] = useState(null);
  const defaultPaymentTrigger = useSelector(GlobalPaymentTrigger);
  const [defaultPaymentMode, setDefaultPaymentMode] = useState([]);
  const [defaultEnabled, setDefaultEnabled] = useState(false);
  const [CardPayOption, setCardPayOption] = useState([]);
  const [PaymentUpiOptions, setPaymentUpiOptions] = useState([]);
  const GlobaluseOptions = useSelector(GlobalCommonPaymentOptions);
  const [useOptions, setuseOptions] = useState([]);
  const CheckOrderType = OrderCardDetail?.filter(
    (a) => a?.BookingTypeName !== BookingType
  );
  // const [ComboDropDown, setComboDropDown] = useState();
  const paymentloader = useSelector(GlobalPayementloader);
  const TokenOnly = SettingDataSelector?.[0]?.SettingDtlDetails?.filter(
    (i) => i.SettingIdName === 'TokenOnly'
  )?.[0];
  const IndividualToken = SettingDataSelector?.[0]?.SettingDtlDetails?.filter(
    (i) => i.SettingIdName === 'AllProductindividualToken'
  )?.[0];
  const [UnpaidConfirmation, setUnpaidConfirmation] = useState(false);
  const [unpaidselectedindex, setunpaidselectedindex] = useState();
  const [preOrderOpen, setPreOrderOpen] = useState(false);
  const preOrderPendingCount = useSelector(GlobalPreOrderPendingCount);
  const [failedOrderData, setFailedOrderData] = useState();
  const [OpenFailData, SetOpenFailData] = useState(false);
  const [paymentfeataddon, setpaymentfeataddon] = useState(false);
  const [isFloatMenuOpen, setIsFloatMenuOpen] = useState(false);
  const Discount = useSelector(GlobalOverAllOfferAmt);
  const OverAllSales = useSelector(GlobalOverAllDiscSales);
  const OverAllEstimate = useSelector(GlobalOverAllDiscEstimate);
  const [blink, setBlink] = useState(false);
  const [empData, setEmpData] = useState();
  const [MobileNoWhatsApp, setMobileNoWhatsApp] = useState();
  const printDatas = useSelector(GlobalprintDatas);
  const PrinterDetails = useSelector(GlobalPrinterMappingDtls);
  const [addnewAccess, setaddnewAccess] = useState(true);
  const [showCancelConfirm, setShowCancelConfirm] = useState(false);
  const BookingStatus = useSelector(GlobalBookingStatus);

  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 CheckBookingStatus =
    BookingStatus?.find((item) => item.ScreenType === 'Booking')
      ?.ScreenStatus ?? 'Open';
  const OverallOfferAmount = useSelector(Global_OverallOfferAmount);

  const [TotalAmount, setTotalAmount] = useState(0);
  // for customised invoice number
  const { invoiceDate, clearInvoiceDate } = useDateStore();
  const CurrentOrderId = useSelector(GlobalCurrentOrderId);
  const FreeProdList = useSelector(GlobalFreeProdList);
  const offerAppliedProducts = useSelector(GlobalOfferAppliedProducts);

  console.log(BSComboData, 'BSComboData');
  const canHold =
    unpaidFlow === false &&
    BookingType !== 'Dine In' &&
    !BookingTypeBoth &&
    OrderCardDetail?.length !== 0 &&
    CheckOrderType?.length === 0 &&
    OrderType !== 'Failed' &&
    CheckBookingStatus !== 'Close' &&
    !addnewAccess &&
    BSComboData?.BookingBilling?.[1]?.some(
      (e) => e?.OptionName?.toLowerCase() == 'hold'
    );
  const canRecall =
    unpaidFlow === false &&
    BookingType !== 'Dine In' &&
    !BookingTypeBoth &&
    OrderCardDetail?.length == 0 &&
    OrderType !== 'Failed' &&
    Holddata?.length > 0 &&
    CheckBookingStatus !== 'Close' &&
    !addnewAccess &&
    BSComboData?.BookingBilling?.[1]?.some(
      (e) => e?.OptionName?.toLowerCase() == 'hold'
    );

  const canExtracharge =
    BSComboNavbar?.[1]?.some(
      (e) => e?.OptionName?.toLowerCase() == 'extracharge'
    ) && OrderCardDetail?.length !== 0;
  const canSplitPayment =
    paybtns?.length > 1 &&
    OrderCardDetail?.length > 0 &&
    CheckBookingStatus !== 'Close' &&
    !addnewAccess;

  console.log(canSplitPayment, 'canSplitPayment');
  const canReprint = BSComboNavbar?.[1]?.some(
    (e) => e?.OptionName?.toLowerCase() == 'reprint'
  );
  console.log(
    BSComboData?.BookingBilling?.[1]?.some(
      (e) => e?.OptionName?.toLowerCase() == 'hold'
    ),
    '11111111111111'
  );
  // Usage
  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]);

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

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

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

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

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

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

  useEffect(() => {

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

  }, [AllPaymentOptions, SelCustId, salesBillEdit])

  useEffect(() => {
    if (!preOrder) {
      const totalSum = OrderCardDetail?.reduce(
        (acc, card) => acc + parseFloat(card.OrderRate * card.OrderQty || 0),
        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 = formatAmount(
          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();
    handleOtherData();
  }, []);
  useEffect(() => {
    if (!preferenceshortcutkey) return;

    const handleKeyPress = (event) => {
      if (!event.altKey) return;

      const key = event.key.toLowerCase();

      switch (key) {
        case 'n':
          event.preventDefault();
          setQuickOpen();
          break;

        case 'w':
          event.preventDefault();
          if (canHold) {
            AddBookingDetails('Hold');
          } else if (canRecall) {
            HandleholdModelOpen();
          }
          break;

        case 'a':
          if (canExtracharge) {
            event.preventDefault();
            handleextraCharges();
          }
          break;

        case 'r':
          if (canReprint) {
            event.preventDefault();
            handleReprint();
          }
          break;

        case 's':
          if (canSplitPayment) {
            event.preventDefault();
            SplitPaymentOpen();
          }
          break;

        default:
          break;
      }
    };

    window.addEventListener('keydown', handleKeyPress);
    return () => {
      window.removeEventListener('keydown', handleKeyPress);
    };
  }, [
    preferenceshortcutkey,
    canHold,
    canRecall,
    canExtracharge,
    canSplitPayment,
  ]);

  useEffect(() => {
    if (NavHoldData) {
      AddBookingDetails('Hold');
    }
  }, [NavHoldData]); //change by karthiga
  //mohan stoped data
  useEffect(() => {
    if (
      (BookingType === 'Dine In' ||
        BookingTypeBoth ||
        CheckOrderType?.length > 0) &&
      !unpaidFlow
    ) {
      setOrderStatus(true);
    } else {
      setOrderStatus(false);
    }
  }, [BookingTypeBoth, BookingType, unpaidFlow]);
  //mohan end
  const paymentFailedStatusFun = async () => {
    SetOpenFailData(!OpenFailData);
  };
  // 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 handleOtherData = async () => {
    let data = {
      CompId: CompId,
      BranchId: BranchId,
      AppId: AppId,
    };
    let response = await dispatch(OtherServicesCardlistdata(data)).unwrap();
    if (response?.data?.statusCode == 1) {
      setOtherServiceStatus(true);
    } else {
      setOtherServiceStatus(false);
    }
  };

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

  useEffect(() => {
    if (CompId && BranchId && AppId) {
      getHolddata();
      getUnpaiddatas();
      getCustomerData();
    }
  }, [CompId, BranchId, AppId]);

  useEffect(() => {
    gettodaydate();
    getBookingTypeId();
    getPaymentOptionFeature();
    getPreferenceDinein();

    // Combodata();
    BadgePendingApi();
    // if (UserType === "Employee") {
    //   fetchApi()
    // }
  }, []);
  useEffect(() => {
    if (UserType !== 'Super Admin' && UserType !== 'Super Admin User') {
      getFeatureAddonData();
    }
  }, [FeatureAddonData]);
  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(() => {
    getBookingTypeId();
  }, [BookingType, BookingTypeBoth]);

  useEffect(() => {
    const customerDisplayWindow = getCustomerDisplayWindow();
    if (customerDisplayWindow && !customerDisplayWindow.closed) {
      const updatedData = {
        ExtraCharges: GlobalExtraCharge,
      };
      customerDisplayWindow.postMessage(updatedData, '*');
    } else {
      console.error(
        'Customer display window is not available or has been closed.'
      );
    }
  }, [GlobalExtraCharge]);
  useEffect(() => {
    if (
      OrderCardDetail?.length === 1 &&
      OrderCardDetail?.[0]?.OrderQty === 1 &&
      !SelCustId
    ) {
      console.log(OrderCardDetail, 'OrderCardDetail');
      closePrintOption();
      setPrintOrderDetails([]);
    }
  }, [OrderCardDetail]);
  useEffect(() => {
    TotalItemsCalculation();
    TotalWithoutTaxRate();
    TotalTaxAmt();
    OrderCardDetail?.length == 0 ? dispatch(changeunpaidflow(false)) : '';
  }, [OrderCardDetail]);
  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.'
      );
    }
  }, [Paybtnnameselected]);
  useEffect(() => {
    setPaybtnnameselected(PaymentOptionsModeName);
    setPaybtnselected(PaymentOptionsModeId);
  }, [PaymentOptions]);
  // 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(() => {
    getPaymentOptionFeature();
  }, [GlobaluseOptions]);
  const formatAmount = (value) => {
    return allowDecimal
      ? parseFloat(value || 0).toFixed(2)
      : parseInt(value || 0);
  };
  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 handleWhatsAppClick = () => {
    setShowWhatsAppShare(true);
  };
  const handleSMSClick = () => {
    setSMSShare(true);
  };

  //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') {
      UpiPayment();
    } else if (salesBillEdit && currentOrderNetAmount < previousNetAmount && !refundPaySelected) {
      setMessageType('warning');
      setMessageData('Please Select Refund Payment Method');
      return;
    } else {
      OrderStatus
        ? AddBookingDetails('Dine-In', false)
        : AddBookingDetails(BookingType, true);
    }
  };

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

    window.addEventListener('keydown', handleKeyPress);
    return () => {
      window.removeEventListener('keydown', handleKeyPress);
    };
  }, [
    FirstPaymentclick,
    OrderCardDetail,
    paybtnselected,
    OrderStatus,
    qrCode,
    SelectedUPIPayOption,
    TotalAmount,
    SelectedUpiOption,
    SelectedCardOption,
  ]);

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

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

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

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

  const getFeatureAddonData = async () => {
    // let featureAddon = await dispatch(
    //   FeatureAddon({ AppId: AppId, UserId: UserId })
    // ).unwrap();
    // if (featureAddon?.data?.statusCode === 1) {
    //   setFeatureAddonData(featureAddon?.data?.data?.[0]?.FeatAddonHdr?.[0]);
    const hasPaymentFeatures = FeatureAddonData?.FeatureDtls?.some(
      (item) =>
        item.FeatureAddonName === 'Payment Gateway' ||
        item.FeatureAddonName === 'Payment Device'
    );
    setpaymentfeataddon(hasPaymentFeatures);
    // } else {
    //   setFeatureAddonData([]);
    //   setpaymentfeataddon([]);
    // }
  };
  const handlePaymentMode = (id, name) => {
    if (name?.toLowerCase() !== 'credit') {
      setOverAllBal(0);
      setCredit(false);
    }
    if (paymentloader === false) {
      setPaybtnselected(id);
      setPaybtnnameselected(name);
      if (CardPayOption?.length === 1) {
        setSelectedCardOption(CardPayOption?.[0]?.value);
      }
      setUpiOptionOpen(false);
      setQrCode(false);
      setUpinotSelected(false);
      setCardoptionnotSelected(false);
    }
  };

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

  const 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 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 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 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 getPreferenceDinein = async () => {
    // const response = await dispatch(
    //   getPreferenceData({ CompId: CompId, BranchId: BranchId, AppId: AppId })
    // ).unwrap();
    // if (response?.data?.statusCode === 1) { //comment by karthiga
    const PreferenceDineDtl = SettingDataSelector?.[0]?.SettingDtlDetails;
    const DineinPreference = PreferenceDineDtl.find(
      (item) => item.SettingIdName === 'DineIn'
    );
    setDineInPreference(DineinPreference || {});
    // } else {
    //   setDineInPreference();
    // }
  };
  const ChangeTakeAway = async () => {
    await dispatch(changeBookingType('TakeAway'));
  };
  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 TokenPrint = async (index) => {
    try {
      console.log(`Starting token print for index ${index}`);

      const stylePrint = `<style> 
      *{
        font-family:Poppins;
      }
    
      .Reprint-body{  
        height: 100%;
        margin: 0vw 0vh;
        padding: 1vw 2vh;
      }
    
      .Re-print-body-Tr {
        text-align: center;
        font-family: Poppins;
      }
      .Re-print-body-Product{
        text-align:left;
        font-size:12px;
        border: 1px solid black;
        border-collapse: collapse;
        font-family: Poppins;
        padding-left:5px;
      }
      .Re-print-body-Rate{
        text-align:right;
          font-size:12px;
          padding-right:5px;
          border: 1px solid black;
          border-collapse: collapse;
          font-family: Poppins;
      }
      .Re-print-Logo{
        width: 50px ;
        height: 50px;
        margin-bottom: -20px;
       }
    
      .Re-print-title {
        font-size: 19px;
        font-weight: 600;
        font-family: Gilroy;
        margin-bottom: -10px;
        text-align:center;
      }
      
      .Re-print-Add {
        font-size: 12px;
        font-family: Poppins;
        margin-bottom: -5px;
      }
      
      .Re-print-GST {
        font-size: 12px;
        font-family: Poppins;
      }
    
      .Re-print-top {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
      }
    
      .Re-print-top2 {
        display: flex;
        width: 90%;
        margin:0px 10px;
        font-family: Gilroy;
        justify-content: space-between;
      }
      .Re-print-top3 {
        display: flex;
        width: 75%;
        margin:0px 30px;
        font-family: Gilroy;
        justify-content: space-between;
        margin-bottom: 5px;
      }
      .Re-print-bold{
        font-size: 8px;
        font-weight: 400;
        font-family: Poppins;
        letter-spacing: 1px;
      }
    
      .Re-print-bold1{
        font-size: 12px;
        font-weight: 600;
        font-family: Poppins;
        letter-spacing: 1px;
      }
      .Re-print-bold2{
        width:100%;
        font-size: 12px;
        font-family: Poppins;
        text-align:center;
      }
    
      .Re-print-Table {
          width: 90%;
          margin:0px 10px;
        }
    
      .Re-print-Table ,.Re-print-th ,.Re-print-td {
          border: 1px solid black;
          border-collapse: collapse;
          font-family: Poppins;
        }
        .Re-print-td
        {
          font-size:12px;
        }
    
      </style>`;
      if (TokenOnly?.SettingValue === 'Y') {
        if (IndividualToken?.SettingValue === 'Y') {
          await printDiv(`TokenOnlySingle${index}`, stylePrint);
        } else {
          await printDiv(`TokenOnlyMultiple${index}`, stylePrint);
        }
      } else {
        await printDiv(`TakeawayToken${index}`, stylePrint);
      }
    } catch (error) {
      console.error(`Error printing token for index ${index}:`, error);
    }
  };
  const AllProductTokenFunction = async () => {
    if (IndividualToken?.SettingValue === 'Y') {
      await Promise.all(
        PrintOrderDetails?.[0]?.OrderDetails?.map(
          async (orderDetail, index) => {
            const groupedTokens = orderDetail?.productDetails?.reduce(
              (acc, item, idx) => {
                if (item.TokenAvailable === 'Y') {
                  if (!item.CounterName) {
                    // If CounterName is null or empty
                    acc[`single-${idx}-${item.ProdId}`] = [item]; // Unique entry for each null/empty CounterName item
                  } else {
                    if (!acc[item.CounterName]) {
                      acc[item.CounterName] = [];
                    }
                    acc[item.CounterName].push(item); // Group by CounterName
                  }
                }
                return acc;
              },
              {}
            );

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

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

  const TotalItemsCalculation = async () => {
    let tempTotalitems = OrderCardDetail?.length;
    let OverAllQty = OrderCardDetail?.reduce((acc, item) => {
      const isWeightScale = item?.ScaleType === 'weight';

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

      return acc + Math.round(Number(item?.OrderQty || 0));
    }, 0);
    setTotalItems(tempTotalitems);
    setQty(OverAllQty);
  };
  const Print = async () => {
    const style = await PrintStyleFunction(
      printerTemplateStyle == undefined ? 'Style 13' : printerTemplateStyle,
      'Sales'
    );

    const stylesMap = {
      'Style 1': 'PrintStyle1',
      'Style 2': 'PrintStyle2',
      'Style 3': 'PrintStyle3',
      'Style 4': 'PrintStyle4',
      'Style 5': 'PrintStyle5',
      'Style 6': 'PrintStyle6',
      'Style 7': 'PrintStyle7',
      'Style 8': 'PrintStyle8',
      'Style 9': 'PrintStyle9',
      'Style 10': 'PrintStyle10',
      'Style 11': 'PrintStyle11',
      'Style 12': 'PrintStyle12',
      'Style 13': 'RePrint',
      A4: 'PrintStyleA4',
      A5: 'PrintStyleA5',
      A4Standard: 'A4Standard',
      TaxInvoice: 'TaxInvoice',
    };

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

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

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

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

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

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

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

    return isNaN(num) ? '0.00' : num.toFixed(2); // return as string with 2 decimals
  }
  const TotalWithoutTaxRate = async () => {
    const totalwithouttax = OrderCardDetail?.reduce((accumulator, card) => {
      return accumulator + parseFloat(card.WithoutTaxRate || 0);
    }, 0);
    setTotalWithoutTaxAmount(totalwithouttax.toFixed(2));
    await dispatch(
      changeSummeryTotalWithoutTaxAmount(totalwithouttax.toFixed(2))
    );
  };
  const TotalTaxAmt = async () => {
    const totaltax = OrderCardDetail?.reduce((accumulator, card) => {
      return accumulator + parseFloat(card.TaxAmt || 0);
    }, 0);
    setTotalTaxAmount(totaltax.toFixed(2));
    await dispatch(changeSummeryTotalTaxAmount(totaltax.toFixed(2)));
  };

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

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

  const handleOpenChange = (newOpen) => {
    setOpen(newOpen);
  };
  const hide = () => {
    setOpen(false);
  };
  const hideDefault = () => {
    setUpiOptionOpen(false);
  };
  const handlePopoverVisibleChange = (visible) => {
    setUpiOptionOpen(visible);
  };

  const handleextraCharges = () => {
    setExtraCharges(true);
  };
  const handleextraChargesCancel = () => {
    setExtraCharges(false);
  };

  const handleQuickCancel = async () => {
    await dispatch(changeCompoPaymentIconStatus(false));
    //
    setQuickAdd(false);
  };
  const setQuickOpen = async () => {
    await dispatch(changeCompoPaymentIconStatus(true));
    setQuickAdd(true);
  };

  const ProductSummary = (salesData) => {
    // Create a map to store the aggregated values for each unique product
    const productMap = new Map();
    // Iterate over the sales data to aggregate values
    salesData.forEach((item) => {
      const key = `${item.ProdId}-${item.InwardDtlId}-${item.BookingType}-${item.SinglePc}-${item.OrderRate}`;
      if (productMap.has(key)) {
        const existingItem = productMap.get(key);
        existingItem.OrderQty += item.OrderQty || 0;
        existingItem.TotalAmt += item.TotalAmt || 0;
        existingItem.TaxAmt =
          parseFloat(existingItem.TaxAmt) + parseFloat(item.TaxAmt) || 0;
        // existingItem.WithoutTaxRate += parseFloat(item.WithoutTaxRate) || 0;
      } else {
        // If the key doesn't exist, add a new entry
        productMap.set(key, { ...item });
      }
    });

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

    return aggregatedProducts;
  };
  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 BadgePendingApi = async () => {
    let Data = {
      compId: CompId,
      branchId: BranchId,
      appId: AppId,
      deliveryStatus: 'P',
    };
    let PendingResponse = await dispatch(PreOrderGet(Data)).unwrap();
    if (PendingResponse?.data?.statusCode === 1) {
      await dispatch(
        changePreOrderPendingCount(PendingResponse?.data?.data?.length)
      );
    }
  };

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

  const ClearAllGlobalStateDatas = async (value) => {
    if (OfferCheckedInSetup && preferenceOffer) {
      await applyOffer([]);
    } else {
      dispatch(changeOrderCardDetails([]));
    }
    dispatch(changeBillEditingMode(false));
    await dispatch(changePreviousOrderPayment([]));
    await dispatch(changePreviousOrderOfferDetail([]));
    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(null));
    await dispatch(changeSelectedOption(null));
    setPaybtnnameselected(PaymentOptionsModeName);
    setPaybtnselected(PaymentOptionsModeId);
    setQrCode(false);
    setUpinotSelected(false);
    setCurrentOrderNetAmount(0);
    setPreviousNetAmount(0);
    getHolddata();
    getUnpaiddatas();
    await dispatch(changeBookingType('TakeAway'));
    await dispatch(changeSelProdWiseEst([]));
    await dispatch(ChangeOverAllDiscSales(0));
    await dispatch(ChangeOverAllDiscEstimate(0));
    // await dispatch(changeEstimateBooking(null))
    // clearInvoiceDate
    clearInvoiceDate();
    dispatch(changeCurrentOrderId(null));
    await dispatch(changeSelectTable([]));
    await dispatch(changeSelectChair([]));
    await dispatch(changeSelectedTableDetails([]));
    await dispatch(changeOrderType());
    if (value === 'Dine-In') {
      navigate(`${subDirectory}sales/dine-in`);
    }
    let data = {
      CompId: CompId,
      BranchId: BranchId,
      AppId: AppId,
      UserId: UserId,
      FromDate: currentDateValue,
      ToDate: currentDateValue,
    };
    await dispatch(getSalesDetailData(data));
  };

  const AddBookingDetails = async (value, pay) => {
    const customerDisplayWindow = getCustomerDisplayWindow();

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

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

  const Booking = async (value, pay) => {
    const TakAwayId = ConfigDataList?.find(
      (a) => a?.ConfigName === 'TakeAway'
    )?.ConfigId;
    const DineinId = ConfigDataList?.find(
      (a) => a?.ConfigName === 'Dine In'
    )?.ConfigId;

    setFirstPaymentclick(true);
    let temporderdetail = OrderCardDetail?.map((a) => ({
      ProdId: a.ProdId,
      Type: a.Type,
      OrderQty: a.OrderQty,
      OrderRate: a.OrderRate,
      TotalAmt: a.OrderQty * a.OrderRate,
      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,
    }));
    const NotSlectedTypeFind = temporderdetail?.find(
      (a) => a?.BookingType != SelectedBookingType
    );
    let updatedOfferDetails = offerAppliedProducts;
    if (GlobEstBooking !== 'Sales') {
      updatedOfferDetails = offerAppliedProducts?.filter(
        (item) =>
          !(
            item.TableName === 'LoyaltyPoints' &&
            item.TableUniqueName === 'UniqueId' &&
            item.Type === 'A'
          )
      );
    }

    let temppostdata = {
      SalesMode: RetailWSSalesType || 'R',
      CompId: CompId,
      BranchId: BranchId,
      AppId: AppId,
      OrderDate: Custombill ? invoiceDate : null,
      CustomOrderNo: Custombill ? CurrentOrderId : null,
      OrderType:
        Object.keys(ReportholdData)?.length > 0
          ? ReportholdData?.OrderType
          : 'S',
      CustSuppId: SelCustId ? SelCustId : null,
      Reference: 'test',
      BookingType:
        NotSlectedTypeFind && !BookingTypeBoth
          ? NotSlectedTypeFind?.BookingType
          : SelectedBookingType,
      // (NotSlectedTypeFind?.length>0 && !BookingTypeBoth)?NotSlectedTypeFind?.[0]?.BookingTypeName:

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

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

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

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

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

                  if (paymentdataget === 'S') {
                    setMessageType('success');
                    setMessageData('Payment Success');
                    await dispatch(changePaymentloader(false));
                    if (
                      getpaymentgatewaydetail?.data?.OrderDetails?.length > 0
                    ) {
                      setPrintOrderDetails([getpaymentgatewaydetail?.data]);
                      CustomerDisplay(value);
                      ClearAllGlobalStateDatas(value);
                    }
                    clearInterval(intervalId); // Stop the loop when payment is successful
                  } else if (paymentdataget === 'F') {
                    setMessageType('error');
                    setMessageData('Payment Failed');
                    await dispatch(changePaymentloader(false));
                    setFirstPaymentclick(false);
                    setPaybtnnameselected(PaymentOptionsModeName);
                    setPaybtnselected(PaymentOptionsModeId);
                    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();
    }
    let PayatCounterfilter = response?.data?.PaymentOrderDtl?.filter(
      (item) => item?.PaymentOptionType?.toLowerCase() === 'pc'
    );

    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'
        );

        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) {
          await PaymentGatewayFlow(PaymentGatewayfilter);
        } else {
          setPrintOrderDetails([response?.data]);
          ClearAllGlobalStateDatas();
          console.log('more pg data');
        }
      } else {
        // clearInvoiceDate
        clearInvoiceDate();
        dispatch(changeCurrentOrderId(null));
      }
    } else {
      setPrintOrderDetails([response?.data]);

      if (OfferCheckedInSetup && preferenceOffer) {
        await applyOffer([]);
      } else {
        dispatch(changeOrderCardDetails([]));
      }
      await dispatch(changeReorderHoldDetails({}));
      await dispatch(changeReorderProductDetails([]));
      setFirstPaymentclick(false);
      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 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);
            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);
            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 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 CustomerDisplayRemovedData = () => {
    const customerDisplayWindow = getCustomerDisplayWindow();
    if (customerDisplayWindow && !customerDisplayWindow.closed) {
      const updatedData = {
        userData: [],
        ExtraCharges: [],
        Paymentgateway: false,
        type: 'remove',
        keyValue: 'customer',
      };
      customerDisplayWindow.postMessage(updatedData, '*');
      const updatedRemovedData = {
        type: 'remove',
        keyValue: 'OrderTotalAmount',
      };
      customerDisplayWindow.postMessage(updatedRemovedData, '*');
    } else {
      console.error(
        'Customer display window is not available or has been closed.'
      );
    }
  };
  const CustomerDisplay = (value) => {
    const customerDisplayWindow = getCustomerDisplayWindow();
    if (value == 'TakeAway') {
      if (customerDisplayWindow && !customerDisplayWindow.closed) {
        const updatedData = {
          userData: [],
          ExtraCharges: [],
          Paymentgateway: false,
          upioption1: 'okk',
          type: 'remove',
          keyValue: 'customer',
        };
        customerDisplayWindow.postMessage(updatedData, '*');
        const updatedRemovedData = {
          type: 'remove',
          keyValue: 'OrderTotalAmount',
        };
        customerDisplayWindow.postMessage(updatedRemovedData, '*');
      } else {
        console.error(
          'Customer display window is not available or has been closed.'
        );
      }
    } else {
      if (customerDisplayWindow && !customerDisplayWindow.closed) {
        const updatedData = {
          type: 'remove',
          keyValue: 'customer',
        };
        customerDisplayWindow.postMessage(updatedData, '*');
      } else {
        console.error(
          'Customer display window is not available or has been closed.'
        );
      }
    }
  };
  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) => {
    const UpdatedData = tabledata?.[event]?.productDetails;
    dispatch(changeunpaidflow(true));
    if (
      OrderCardDetail?.length > 0 &&
      (BookingType === 'Dine In' || BookingTypeBoth)
    ) {
      if (OfferCheckedInSetup && preferenceOffer) {
        await applyOffer([]);
      } else {
        dispatch(changeOrderCardDetails([]));
      }
      // 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 {
      if (OfferCheckedInSetup && preferenceOffer) {
        await applyOffer(UpdatedData);
      } else {
        dispatch(changeOrderCardDetails(UpdatedData));
      }
      dispatch(changeReorderHoldDetails([tabledata?.[event]]?.[0]));
      await dispatch(
        changeReorderProductDetails(tabledata?.[event]?.productDetails)
      );
      dispatch(ChangeTotalAmount(tabledata?.[event]?.ExtraChargeDetails));
      setUnpaidOpen(false);
    }
  };

  const UnpaidOk = async () => {
    setOrderStatus(false);
    await dispatch(changeSelectedTableDetails([]));
    await dispatch(changeSelectTable([]));
    await dispatch(changeSelectChair([]));
    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 navigateDineIn = async () => {
    navigate(`${subDirectory}sales/dine-in`);
    await dispatch(changeBookingType('Dine In'));
    await dispatch(changeEstimateBooking('Sales'));
    if (OrderType === 'Hold') {
      await dispatch(changeReorderHoldDetails({}));
      await dispatch(changeReorderProductDetails([]));

      if (OfferCheckedInSetup && preferenceOffer) {
        await applyOffer([]);
      } else {
        dispatch(changeOrderCardDetails([]));
      }
    }
  };

  useEffect(() => {
    if (ReprintModal === true) {
      setReprint1(false);
    }
  }, [ReprintModal]);
  const handleReprint = () => {
    // setReprint1(true)
    window.dispatchEvent(new Event('CLICK REPRINT'));
  };
  const handleReprintCancel = () => {
    setReprint1(false);
  };
  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;
  useEffect(() => {
    if (selOption) {
      closePrintOption();
      setMobileNoWhatsApp(selOption);
    }
  }, [selOption]);
  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 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 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 CreditCustomerHAndleCancel = async () => {
    setcreditCustomerOpen(false);
    await dispatch(changeCreditFocus(false));
  };

  const CreditCustomerFun = async () => {
    if (
      OrderCardDetail?.length === 0 &&
      (selOption?.value !== undefined ||
        GlobalAddCustomerDetails1.length > 0 ||
        GetCustId.CustMobile !== undefined)
    ) {
      setcreditCustomerOpen(true);
      await dispatch(changeCreditFocus(true));
    } else {
      if (selOption?.value == undefined) {
        setMessageType('warning');
        setMessageData('Please Select the Customer');
      }
    }
  };
  const changeOrderStatus = () => {
    setOrderStatus(!OrderStatus);
    setPaybtnnameselected(PaymentOptionsModeName);
    setPaybtnselected(PaymentOptionsModeId);
  };
  // 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 handlePopoverVisibleChangeCard = (visible) => {
    setCardOptionOpen(visible);
  };

  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 handleClick = async () => {
  //   if (Comboglobal == false) {
  //     await dispatch(changeCombosearch(true));
  //   } else {
  //     await dispatch(changeCombosearch(false));
  //   }
  // };

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

  //   let Response = await dispatch(Comboget(data)).unwrap();
  //   if (Response?.data?.statusCode == 1) {
  //     setComboDropDown(Response?.data?.data);
  //   }
  // };

  const openPreOrder = async () => {
    setPreOrderOpen((prevState) => !prevState);
    if (preOrderOpen) {
      const customerDisplayWindow = getCustomerDisplayWindow();
      if (customerDisplayWindow && !customerDisplayWindow.closed) {
        const updatedRemovedData = {
          userData: [],
          ExtraCharges: [],
          paymentMethod: 'Cash',
          type: 'remove',
          keyValue: 'customer',
        };
        customerDisplayWindow.postMessage(updatedRemovedData, '*');
      } else {
        console.error(
          'Customer display window is not available or has been closed.'
        );
      }
      await dispatch(changeBookingType('TakeAway'));
      await dispatch(changepreOrder(false));
      await dispatch(changepreOrderList(null));
      await dispatch(changePreOrderCusName(null));
      await dispatch(changePreOrderCusMob(null));
      await dispatch(changePreOrderDate());
      await dispatch(changePreOrderTime(null));
      await dispatch(changePreOrderAdd1(null));
      await dispatch(changePreOrderAdd2(null));
      await dispatch(changePreOrderAdvance(null));
      await dispatch(changePreOrderzip(null));
      await dispatch(changePreOrderCity(null));
      await dispatch(changePreOrderDistrict(null));
      await dispatch(changePreOrderState(null));
      await dispatch(changePreOrderAdditem('AddDetails'));
      await dispatch(changeSelectedOption(null));
      await dispatch(changeCustomerID(null));
      await dispatch(changealldata(false));
      await dispatch(changeSelectedCustId(null));
    }
  };

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

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

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

    const postData = {
      Url: encrypted,
      CreatedBy: UserId,
    };
    if (orderIdsArray) {
      const res = await dispatch(PublicQrCodepost(postData)).unwrap();
      const urlData = res?.data?.ReferenceNo;
      setUrlData(urlData);
    }
  };

  const customerNameOrMobile = MobileNoWhatsApp?.CustName?.trim()
    ? `Dear ${MobileNoWhatsApp?.CustName}`
    : `Dear ${MobileNoWhatsApp?.value}`;
  const documentUrl = `${MainHomeUrl}viewbill?code=${urlData}`;
  const encodedMessage = `${customerNameOrMobile},\n\n🙏 Thank you for being a valuable customer!\n\n🧾 To view your bill, please click the link below:\n${documentUrl}`;
  const handlepaymentoptions = async () => {
    await dispatch(changeSalesPaymentoption(true));
    await dispatch(
      getPaymentOptionsData({
        AppId: AppId,
        CompId: CompId,
        BranchId: BranchId,
      })
    );
  };

  const handleotherservices = () => {
    dispatch(changeOtherServices(true));
    dispatch(changeComboRedirectionToDefaultLayoutForParking(true));
    dispatch(
      changetemplateData({
        AppName,
        SelectedApplication: AppId,
        Type: 'ParkingRedirect',
      })
    );
  };

  return (
    <>
      <div
        className="BSC1Payment-Container"
        style={{
          // backgroundColor:
          //   BSComboData?.BookingLayout?.[0] === 'Combo1'
          //     ? '#645CAA'
          //     : '#08A7B8',
          background: 'linear-gradient(to bottom right, #1e2536, #2a3447)',
        }}
      >
        <Messages messageType={messageType} messageData={messageData} />
        <div className="BSC1Payment-div1-1">
          <div className="BSC1Payment-div1-sub1">
            {BSComboNavbar?.[1]?.map((item) => (
              <>
                {item?.OptionName == 'QuickAdd' && (
                  <TooltipWrapper title={'QuickAdd'} isMobile={isMobile}>
                    <div
                      className="BSC1Payment-div1-btns"
                      onClick={setQuickOpen}
                      style={{
                        pointerEvents: OrderType === 'Failed' ? 'none' : 'auto',
                      }}
                    >
                      <PozoQuickAddIcon className="BSC1Payment-icon " />
                      <div
                        style={{
                          display: 'flex',
                          flexDirection: 'column',
                          alignItems: 'center',
                          justifyContent: 'center',
                        }}
                      >
                        Quick Add
                        <span
                          style={{ fontSize: '9px', letterSpacing: '0.5px' }}
                        >
                          (Alt + N)
                        </span>
                      </div>
                    </div>
                  </TooltipWrapper>
                )}
                {item?.OptionName == 'DineIn' &&
                  DineInPreference?.SettingValue === 'Y' &&
                  dinePreference && (
                    <TooltipWrapper title={'Dine In'} isMobile={isMobile}>
                      <div
                        className={
                          BookingType === 'Dine In'
                            ? 'BSC1Payment-div1-btns-select'
                            : 'BSC1Payment-div1-btns'
                        }
                        onClick={navigateDineIn}
                        style={{
                          pointerEvents:
                            OrderType === 'Failed' ? 'none' : 'auto',
                        }}
                      >
                        <PozoDineInIcon className="BSC1Payment-icon" />
                        DINE IN
                      </div>
                    </TooltipWrapper>
                  )}
                {item?.OptionName == 'TakeAway' && takeAwayPreference && (
                  <TooltipWrapper title={'TakeAway'} isMobile={isMobile}>
                    <div
                      className={
                        BookingType === 'TakeAway'
                          ? 'BSC1Payment-div1-btns-select'
                          : 'BSC1Payment-div1-btns'
                      }
                      onClick={() =>
                        BookingType !== 'TakeAway' && ChangeTakeAway()
                      }
                      style={{
                        pointerEvents: OrderType === 'Failed' ? 'none' : 'auto',
                      }}
                    >
                      <PozoTakeAway
                        className="BSC1Payment-icon"
                        style={{ width: '23px', height: '30px' }}
                      />
                      {/* TAKE AWAY */}
                      Take Away
                    </div>
                  </TooltipWrapper>
                )}
              </>
            ))}

            {OtherServiceStatus && (
              <div
                className="BSC1Payment-div1-btns"
                onClick={handleotherservices}
              >
                <TooltipWrapper title={'Other Services'} isMobile={isMobile}>
                  <div
                    style={{
                      display: 'flex',
                      gap: '2px',
                      alignItems: 'center',
                      whiteSpace: 'nowrap',
                    }}
                  >
                    <FaParking className="BSC1Payment-icon" />
                    Other Services
                  </div>
                </TooltipWrapper>
              </div>
            )}
          </div>

          <div className="BSC1Payment-div1-sub2">
            {BSComboNavbar?.[1]?.map((item) => (
              <>
                {item?.OptionName == 'Offer' && (
                  <div
                    className="BSC1Payment-div1-btns"
                    style={{
                      pointerEvents: OrderType === 'Failed' ? 'none' : 'auto',
                    }}
                  >
                    <BSNavBarOffer layoutType="Combo" />
                  </div>
                )}
                {item?.OptionName == 'ExtraCharge' && (
                  <TooltipWrapper title={'Extra Charge'} isMobile={isMobile}>
                    <div
                      className="BSC1Payment-div1-btns"
                      onClick={handleextraCharges}
                      style={{
                        pointerEvents: OrderType === 'Failed' ? 'none' : 'auto',
                        display: 'flex',
                        flexDirection: 'column',
                        alignItems: 'center',
                        justifyContent: 'center',
                      }}
                    >
                      <div style={{ display: 'flex' }}>
                        <PozoExtraChargesIcon className="BSC1Payment-icon" />
                        {/* EXTRA CHARGE */}
                        Extra Charge
                      </div>

                      <div style={{ fontSize: '9px', letterSpacing: '0.5px' }}>
                        (Alt + A)
                      </div>
                    </div>
                  </TooltipWrapper>
                )}
                {item?.OptionName == 'RePrint' && (
                  <TooltipWrapper title={'RePrint'} isMobile={isMobile}>
                    <div
                      className="BSC1Payment-div1-btns"
                      onClick={handleReprint}
                      style={{
                        pointerEvents: OrderType === 'Failed' ? 'none' : 'auto',
                        display: 'flex',
                        flexDirection: 'column',
                        alignItems: 'center',
                        justifyContent: 'center',
                      }}
                    >
                      <div
                        style={{
                          display: 'flex',
                          alignItems: 'center',
                          gap: '4px',
                          whiteSpace: 'nowrap',
                        }}
                      >
                        <PozoReprintIcon className="BSC1Payment-icon" />
                        Re-Print
                        <span
                          style={{ fontSize: '9px', letterSpacing: '0.5px' }}
                        >
                          (Alt + R)
                        </span>
                      </div>
                    </div>
                  </TooltipWrapper>
                )}
              </>
            ))}
            {/* {reprint1 && (
              <FeaturesFunctionalities
                handleReprintCancel={handleReprintCancel}
                reprint={reprint1}
              />
            )} */}
            {extraCharges && (
              <FeaturesFunctionalities
                ExtraChargesCancle={handleextraChargesCancel}
                ExtraCharges={extraCharges}
              />
            )}
            {QuickAdd && (
              <FeaturesFunctionalities
                handleQuickAddCancel={handleQuickCancel}
                QuickAdd={QuickAdd}
              />
            )}
            {creditCustomerOpen && (
              <BSCreditCustomer
                creditCustomerOpen={creditCustomerOpen}
                CreditCustomerHAndleCancel={CreditCustomerHAndleCancel}
              />
            )}
            {TotalAmount == 0 && Success && (
              <div>
                <QrComponent com={`WelcomeScreen**${brachName}`} />
              </div>
            )}
            {TotalAmount > 0 &&
              qrCode &&
              PaymentUpiOptions?.length > 0 &&
              SelectedUpiOption && (
                <div>
                  <QrComponent
                    com={`DisplayQRCodeScreen**upi://pay?pa=${UpiId}&pn=Bonrix&cu=INR&am=${TotalAmount}&pn=Bonrix%20Software%20Systems**${TotalAmount}**${UpiId}`}
                  />
                </div>
              )}

            {PaymentUpiOptions?.length > 0 && OrderId && (
              <div>
                <QrComponent
                  com={`DisplaySuccessQRCodeScreen**...**${extractLastNumberOrderId(OrderId, PrintOrderDetails?.[0]?.OrderDetails?.[0]?.FYStatus)}**${Todaydate}`}
                />
              </div>
            )}
          </div>
        </div>

        <div className="BSC1Payment-div1-2">
          <div className="custom-float-menu">
            <div
              className="custom-float-trigger"
              onClick={() => setIsFloatMenuOpen(!isFloatMenuOpen)}
            >
              <TfiMoreAlt
                style={{ fontSize: '40px' }}
                className="BSC1Payment-icon"
              />
            </div>

            {isFloatMenuOpen && (
              <div className="custom-float-items">
                {!OtherServiceStatus && (
                  <div className="custom-float-item">
                    <TooltipWrapper
                      placement="rightTop"
                      title="Other Services"
                      isMobile={isMobile}
                    >
                      <div onClick={handleotherservices}>
                        <FaParking className="BSC1Payment-icon" />
                        <p style={{ fontSize: '9px' }}>Parking</p>
                      </div>
                    </TooltipWrapper>
                  </div>
                )}
                {BSComboNavbar?.[1]?.map((item) => (
                  <>
                    {item?.OptionName == 'QuickAdd' && (
                      <div className="custom-float-item">
                        <TooltipWrapper
                          placement="rightTop"
                          title="QUICK ADD"
                          isMobile={isMobile}
                        >
                          <div onClick={setQuickOpen}>
                            <PozoQuickAddIcon className="BSC1Payment-icon quickaddIconCombo" />
                            <p style={{ fontSize: '9px' }}>
                              Quick Add <br /> (Alt +N)
                            </p>
                          </div>
                        </TooltipWrapper>
                      </div>
                    )}
                    {item?.OptionName == 'DineIn' &&
                      DineInPreference?.SettingValue === 'Y' && (
                        <>
                          <div className="custom-float-item">
                            <TooltipWrapper
                              placement="rightTop"
                              title="DINE IN"
                              isMobile={isMobile}
                            >
                              <div onClick={navigateDineIn}>
                                <PozoDineInIcon className="BSC1Payment-icon1" />
                                <p style={{ fontSize: '9px' }}>Dine In</p>
                              </div>
                            </TooltipWrapper>
                          </div>
                          {FirstPaymentclick === false &&
                            !addnewAccess &&
                            !OrderStatus && (
                              <div className="custom-float-item">
                                <BSTipAmount />
                              </div>
                            )}
                        </>
                      )}
                    {item?.OptionName == 'TakeAway' && (
                      <div className="custom-float-item">
                        <TooltipWrapper
                          placement="rightTop"
                          title="TAKE AWAY"
                          isMobile={isMobile}
                        >
                          <div>
                            <PozoTakeAway className="BSC1Payment-icon1" />
                            <p style={{ fontSize: '9px' }}>Take Away</p>
                          </div>
                        </TooltipWrapper>
                      </div>
                    )}
                    {item?.OptionName == 'Offer' && (
                      <div className="custom-float-item">
                        <BSNavBarOffer
                          layoutType="ComboMobile"
                          propsPlacement="rightTop"
                        />
                      </div>
                    )}
                    {item?.OptionName == 'ExtraCharge' && (
                      <div className="custom-float-item">
                        <TooltipWrapper
                          placement="rightTop"
                          title="ADD ON"
                          onClick={handleextraCharges}
                          isMobile={isMobile}
                        >
                          <div>
                            <PozoExtraChargesIcon className="BSC1Payment-icon1" />
                            <p style={{ fontSize: '9px' }}>Extra Charge</p>
                          </div>
                        </TooltipWrapper>
                      </div>
                    )}
                    {item?.OptionName == 'RePrint' && (
                      <div className="custom-float-item">
                        <TooltipWrapper
                          placement="rightTop"
                          title="RE PRINT"
                          onClick={handleReprint}
                          isMobile={isMobile}
                        >
                          <div>
                            <PozoReprintIcon className="BSC1Payment-icon1" />
                            <p style={{ fontSize: '9px' }}>Re Print</p>
                          </div>
                        </TooltipWrapper>
                      </div>
                    )}
                  </>
                ))}
              </div>
            )}
          </div>
        </div>

        <div class="BSC1Payment-vl"></div>
        <TooltipWrapper
          //  title={'Payment Mode (SHIFT + M)'}
          isMobile={isMobile}
        >
          <div
            className="BSC1Payment-div2-1"
            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={{
                      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',
                        fontFamily: 'Poppins',
                      }}
                    >
                      {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}
                          UpiId={UpiId}
                          BusinessPayOption={BusinessPayOption}
                          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={{
                      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>
            )}

            {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,
                }}
              >
                <TooltipWrapper
                  title="Split Payment (Alt + S)"
                  isMobile={isMobile}
                >
                  {' '}
                  <div
                    className="BSBillingNav-icon-table-icon splitpaymantBTNCombo"
                    onClick={
                      CheckBookingStatus != 'Close' && !addnewAccess
                        ? SplitPaymentOpen
                        : ''
                    }
                    style={{
                      cursor:
                        OrderCardDetail?.length === 0 ||
                          CheckBookingStatus == 'Close' ||
                          addnewAccess
                          ? 'not-allowed'
                          : 'pointer',
                      color:
                        OrderCardDetail?.length === 0 ||
                          CheckBookingStatus == 'Close' ||
                          addnewAccess
                          ? '#fff'
                          : '#ffffffff',
                      alignItems: 'center',
                    }}
                  >
                    <div
                      style={{
                        display: 'flex',
                        alignItems: 'center',
                        width: '100%',
                        justifyContent: 'center',
                        gap: '4px',
                      }}
                    >
                      <PozoSplitPaymentIcon />
                      Split Pay
                    </div>
                  </div>
                </TooltipWrapper>
              </div>
            )}
          </div>
        </TooltipWrapper>

        {/* <div className='BSC1Payment-div2-2'>
                    <select className='BSC1Payment-div2-button'>
                        <option className='BSC1Payment-div1-btns'>CASH</option>
                        <option className='BSC1Payment-div1-btns'>CARD</option>
                        <option className='BSC1Payment-div1-btns'>UPI</option>
                    </select>
                </div> */}

        <div class="BSC1Payment-vl"></div>

        <div className="BSC1Payment-div3">
          <div className="BSC1Payment-div4-sub1">
            <div
              style={{
                display: 'flex',
                flexDirection: 'column',
                rowGap: '1rem',
              }}
            >
              <div
                style={{ display: 'flex', alignItems: 'center' }}
                className="BSC1Payment-div4-naming"
              >
                <div style={{ width: '3rem' }}>Items </div>
                <div style={{ width: '4px' }}> : </div>
                <div style={{ textAlign: 'right', width: '1rem' }}>
                  {' '}
                  {TotalItems}{' '}
                </div>
              </div>
              <div
                style={{ display: 'flex', alignItems: 'center' }}
                className="BSC1Payment-div4-naming"
              >
                <div style={{ width: '3rem' }}>Qty </div>
                <div style={{ width: '4px' }}> : </div>
                <div style={{ textAlign: 'right', width: '1rem' }}> {Qty} </div>
              </div>
            </div>
          </div>
        </div>
        <div class="BSC1Payment-vl"></div>

        <div className="BSC1Payment-div4">
          {(addcustomer || hold) && (
            <FeaturesFunctionalities
              handleAddCustomerCancel={handleAddCustomerCancel}
              addcustomer={addcustomer}
              handleHoldCancel={handleHoldCancel}
              modalOpen={hold}
              closeModal={() => setHold(false)}
            />
          )}
          <div className="BSC1Payment-div4-payment newPaySectionCombo">
            {Estimation?.SettingValue == 'Y' &&
              BookingType !== 'Dine In' &&
              !BookingTypeBoth && (
                <div
                  style={{
                    color: '#1292EE',
                    pointerEvents: OrderType === 'Failed' ? 'none' : 'auto',
                  }}
                >
                  <BSNavBarEstimate />
                </div>
              )}
            {BSComboData?.BookingBilling?.[1]?.map((item) => (
              <>
                {/* {item?.OptionName=="Hold" && */}
                {unpaidFlow == false
                  ? item?.OptionName == 'Hold' &&
                  BookingType !== 'Dine In' &&
                  !BookingTypeBoth &&
                  OrderCardDetail?.length != 0 &&
                  CheckOrderType?.length === 0 &&
                  OrderType != 'Failed' &&
                  CheckBookingStatus != 'Close' &&
                  !addnewAccess && (
                    <TooltipWrapper title={'Hold'} isMobile={isMobile}>
                      {' '}
                      <div
                        style={{
                          backgroundColor: '' ? '#52c41a' : '#1292EE',
                          color: '' ? '#52c41a' : '#ffffffff',
                          height: '40px',
                          width: '45px',
                          borderRadius: '6px',
                          display: 'flex',
                          alignItems: 'center',
                          justifyContent: 'center',
                          padding: '8px 8px 12px 8px',
                        }}
                      >
                        <PozoHoldIcon
                          className="BSBillingNav-icon-table-icon"
                          onClick={() => AddBookingDetails('Hold')}
                          style={{
                            cursor: 'pointer',
                            // color: '' ? '#52c41a' : '#1292EE',
                          }}
                        />{' '}
                        {/* <p className="payOptionDecition"> Hold</p> */}
                      </div>
                    </TooltipWrapper>
                  )
                  : ''}

                {unpaidFlow == false
                  ? item?.OptionName == 'Hold' &&
                  BookingType !== 'Dine In' &&
                  !BookingTypeBoth &&
                  Holddata?.length > 0 &&
                  OrderCardDetail?.length == 0 &&
                  CheckBookingStatus != 'Close' &&
                  !addnewAccess && (
                    <TooltipWrapper title={'Recall'} isMobile={isMobile}>
                      {' '}
                      <Badge
                        count={Holddata?.length}
                        size={'small'}
                        offset={[0, 7]}
                      >
                        <div
                          style={{
                            backgroundColor: Holddata ? '#52c41a' : 'default',
                            color: Holddata ? '#ffffffff' : 'default',
                            height: '40px',
                            width: '45px',
                            borderRadius: '6px',
                            display: 'flex',
                            alignItems: 'center',
                            justifyContent: 'center',
                            padding: '8px 8px 12px 8px',
                          }}
                        >
                          <PozoHoldIcon
                            className="BSBillingNav-icon-table-icon"
                            onClick={() => HandleholdModelOpen()}
                            style={{
                              cursor: 'pointer',
                              // color: Holddata ? '#52c41a' : 'default',
                              pointerEvents:
                                OrderType === 'Failed' ? 'none' : 'auto',
                            }}
                          />
                        </div>
                      </Badge>
                    </TooltipWrapper>
                  )
                  : ''}
                {tabledata?.length > 0 && dinePreference && (
                  <>
                    {item?.OptionName == 'UnpaidBill' && (
                      <TooltipWrapper title="Unpaid Bills" isMobile={isMobile}>
                        {' '}
                        <div
                          style={{
                            backgroundColor: unpaidFlow ? '#52c41a' : '#1292EE',
                            color: unpaidFlow ? '#ffffffff' : '#ffffffff',
                            height: '40px',
                            width: '40px',
                            borderRadius: '6px',
                            display: 'flex',
                            alignItems: 'center',
                            justifyContent: 'center',
                            padding: '4px 4px 16px 4px',
                          }}
                        >
                          <PozoUnpaidIcon
                            className="BSBillingNav-icon-table-icon"
                            style={{
                              fontSize: '27px',
                              cursor: 'pointer',
                              pointerEvents:
                                OrderType === 'Failed' ? 'none' : 'auto',
                              height: '45px',
                              width: '45px',
                              borderRadius: '6px',
                              display: 'flex',
                              alignItems: 'center',
                              justifyContent: 'center',
                              padding: '4px 6px 4px 6px',
                            }}
                            onClick={() => {
                              (setUnpaidOpen(true), getUnpaiddatas());
                            }}
                          />
                        </div>
                      </TooltipWrapper>
                    )}
                  </>
                )}
              </>
            ))}
            {BSComboData?.BookingBilling?.[1]?.filter(
              (item) => item.OptionName === 'AddCustomer'
            ).length === 1 ? (
              <>
                {Object.keys(useOptions)?.length > 0 &&
                  useOptions?.some((flow) =>
                    flow.OptionDetails.some(
                      (option) =>
                        option.OptionName === 'Pay at the counter' &&
                        option.ModeDetails.some(
                          (mode) => mode.ModeName === 'Credit'
                        )
                    )
                  ) && (
                    <React.Fragment key="CreditCustomerFragment">
                      <TooltipWrapper
                        title="Advance Amount"
                        isMobile={isMobile}
                      >
                        <div
                          style={{
                            backgroundColor:
                              OrderCardDetail?.length > 0 ||
                                (selOption?.value === undefined &&
                                  GlobalAddCustomerDetails1?.length === 0 &&
                                  GetCustId?.CustMobile === undefined)
                                ? 'gray'
                                : '#1292eeff',
                            color: '#fff',
                            height: '40px',
                            width: '45px',
                            borderRadius: '6px',
                            display: 'flex',
                            alignItems: 'center',
                            justifyContent: 'center',
                            padding: '8px 8px 12px 8px',
                          }}
                          className="AsAmtCombo"
                        >
                          {' '}
                          <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'
                              //     : '#1292eeff',
                              fontSize: '28px',
                            }}
                          />{' '}
                          <p className="payOptionDecition">Adv Amt</p>
                        </div>
                      </TooltipWrapper>
                    </React.Fragment>
                  )}
              </>
            ) : (
              ''
            )}
            {FeatureAddonData?.FeatureDtls?.find(
              (item) => item?.FeatureAddonName?.toLowerCase() === 'preorder'
            ) && (
                <>
                  {
                    <div
                      style={{
                        pointerEvents:
                          OrderCardDetail?.length > 0 || OrderType === 'Failed'
                            ? 'none'
                            : 'auto',
                        opacity: OrderCardDetail?.length > 0 ? 0.5 : 1,
                      }}
                    >
                      <TooltipWrapper title={'Pre Order'} isMobile={isMobile}>
                        <Badge
                          count={preOrderPendingCount}
                          offset={[-5, 10]}
                          size="small"
                        >
                          <PozoPreOrderIcon
                            className="BSBillingNav-icon"
                            fill={preOrderOpen ? '#52C41A' : '#1292EE'}
                            onClick={() => {
                              openPreOrder();
                            }}
                          />
                        </Badge>
                      </TooltipWrapper>
                    </div>
                  }
                </>
              )}
            {preOrderOpen && <BSNavBarPreOrder />}
            {sportsAppPreference && <BSMembership />}
            {dinePreference &&
              (BookingType === 'Dine In' ||
                BookingTypeBoth ||
                CheckOrderType?.length > 0) &&
              !unpaidFlow && (
                <>
                  <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()
                          : ''
                      }
                      style={{
                        pointerEvents: OrderType === 'Failed' ? 'none' : 'auto',
                      }}
                    />
                  </TooltipWrapper>
                  {FirstPaymentclick === false &&
                    !addnewAccess &&
                    !OrderStatus && <BSTipAmount />}
                </>
              )}
            {OrderCardDetail?.length > 0 && ParkingDisplay && (
              <div
                style={{
                  width: '1.5rem',
                  color: 'rgb(18, 146, 238)',
                  display: 'flex',
                  alignItems: 'center',
                  height: '2.46rem',
                }}
              >
                <BSOtherServiceClaim />
              </div>
            )}
            {unpaidFlow == true ? (
              <TooltipWrapper title="Print Bill" isMobile={isMobile}>
                <PozoBillIcon
                  className="Hover"
                  style={{
                    fontSize: '25px',
                    cursor: 'pointer',
                    color: unpaidFlow ? '#52c41a' : '#1292EE',
                  }}
                  onClick={() => {
                    Recipt();
                  }}
                />
              </TooltipWrapper>
            ) : (
              ''
            )}
            {/* <div>
              <Popover
                content={<><a onClick={hide}><AiOutlineClose color='black' /></a>
                  <BSSummery1 />
                </>
                }
                trigger="click"
                open={open}
                onOpenChange={handleOpenChange}
              >
                <TooltipWrapper placement="topRight" title='SUMMARY' isMobile={isMobile}><UpCircleOutlined style={{ color: "rgb(18, 146, 238)" }} className='BSC1Payment-icon-button' /></TooltipWrapper>
              </Popover>
            </div> */}
            {/* {ComboDropDown?.length >= 1 && (
              <div style={{ fontSize: '1.5rem', color: 'rgb(18, 146, 238)' }}>
                <TooltipWrapper title="Combo Product" isMobile={isMobile}>
                  <GiBasket
                    fill={Comboglobal === true ? '#52C41A' : '#1292EE'}
                    onClick={handleClick}
                    style={{
                      pointerEvents: OrderType === 'Failed' ? 'none' : 'auto',
                      cursor: 'pointer',
                    }}
                  />
                </TooltipWrapper>
              </div>
            )} */}
            {paymentfeataddon && (
              <TooltipWrapper title="Failed Payment" isMobile={isMobile}>
                <div
                  onClick={() => {
                    paymentFailedStatusFun();
                  }}
                  style={{
                    width: '27px',
                    cursor: 'pointer',
                    fontWeight: '600',
                    color: 'rgb(18, 146, 238)',
                  }}
                >
                  <PozoFailedPaymentsIcon />
                </div>
              </TooltipWrapper>
            )}
            {OpenFailData && (
              <PaymentFailedSales
                paymentFailedStatusFun={paymentFailedStatusFun}
                OpenFailData={OpenFailData}
              />
            )}
          </div>
        </div>
        <div className="selctcusandpayBTNforCombo">
          {BSComboData?.BookingBilling?.[1]?.map((item) => (
            <>
              {item?.OptionName == 'AddCustomer' && !preOrderOpen && (
                <div
                  style={{ display: 'flex', gap: '0', alignItems: 'center' }}
                >
                  <BSCustomerSelect />
                  <TooltipWrapper title={'Add Customer'} isMobile={isMobile}>
                    <div>
                      <PozoAddCustomerIcon
                        className="BSBillingNav-icon-table-icon bspaymentcomboAddCus"
                        onClick={handleAddCustomer}
                        style={{
                          display: 'flex',
                          fontSize: '20px',
                          width: '35px',
                          height: '40px',
                          padding: '4px',
                          borderRadius: '0 6px 6px 0',
                          cursor: Custdisable ? 'not-allowed' : 'pointer',
                          color:
                            selOption || GetCustId ? '#ffffffff' : '#ffffffff',
                          backgroundColor:
                            selOption || GetCustId ? '#52c41a' : '#1292EE',
                        }}
                      />
                    </div>
                  </TooltipWrapper>
                </div>
              )}
            </>
          ))}

          <div className="comboTotalBillBTN">
            <TooltipWrapper title="Create Bill (F4)" isMobile={isMobile}>
              <button
                className={
                  // (empData?.AddAccess === "N" || SAAccessCommonMaster?.AddAccess === "N")
                  addnewAccess
                    ? 'BSC1Payment-div4-button-disable'
                    : FirstPaymentclick === false &&
                      OrderCardDetail?.length > 0 &&
                      paybtnselected &&
                      CheckBookingStatus != 'Close'
                      ? !OrderStatus ? salesBillEdit && (currentOrderNetAmount < previousNetAmount) ?
                        'BSC1Payment-div4-button'
                        : 'BSC1Payment-div4-button'
                        : 'BSC1Payment-div4-button Order'
                      : 'BSC1Payment-div4-button-disable'
                }
                // onClick={() => {
                //   (qrCode && SelectedUPIPayOption === "Default") ? UpiPayment() : OrderStatus ? AddBookingDetails("Dine-In") : AddBookingDetails(BookingType, true);
                // }}
                onClick={handleButtonClick}
                style={{ borderRadius: '6px 0 0 6px' }}
              >
                {!OrderStatus ? salesBillEdit && (currentOrderNetAmount < previousNetAmount) ? <div className="Table4-Order">Refund: ₹{(previousNetAmount || 0) - (currentOrderNetAmount || 0)}</div> : (
                  <>
                    {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>
                    )}
                    <AiOutlineArrowRight width="25px" height="25px" />
                  </>
                ) : (
                  <div className="Table4-Order">ORDER</div>
                )}
              </button>
            </TooltipWrapper>
            <Popover
              content={
                <>
                  <a onClick={hide}>
                    <AiOutlineClose color="black" />
                  </a>
                  <BSSummery1 />
                </>
              }
              trigger="click"
              open={open}
              onOpenChange={handleOpenChange}
            >
              <TooltipWrapper
                placement="topRight"
                title="SUMMARY"
                isMobile={isMobile}
              >
                <UpCircleOutlined
                  style={{
                    color: '#ffffffff',
                    backgroundColor: '#1292ee',
                    height: '50px',
                    width: '35px',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    borderRadius: '0 6px 6px 0',
                    padding: '7px',
                    marginTop: '0px',
                  }}
                  className="BSC1Payment-icon-button"
                />
              </TooltipWrapper>
            </Popover>
          </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}
              />
            </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>
      {UpiOpen && (
        <DefaultModal
          open={UpiOpen}
          title="UPI PAYMENT"
          width={500}
          handleCancel={() => {
            Upimodel('Cancel');
          }}
          footer={false}
          children={
            <div style={{ overflow: 'scroll' }}>
              {/* <h1 className="formHeader">UPI PAYMENT</h1> */}

              <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' }}
                    />
                    {/* <ArrowRightOutlined /> */}
                  </div>
                )}

                <div
                  style={{
                    display: 'flex',
                    flexDirection: 'row-reverse',
                    width: '100px',
                  }}
                >
                  <Buttons
                    buttonText="OK"
                    color="901D77"
                    icon={<ArrowRightOutlined />}
                    handleSubmit={() => {
                      Upimodel('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: 'auto' }}>
              <Tables
                columns={columns}
                data={TableData}
                dataSource={TableData}
              // pagination={handlePageChange}
              // onChange={handleChange}
              />
            </div>
          }
        />
      )}
      {/* <Modal title="Add Customer" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>

            </Modal> */}
      {UnpaidConfirmation && (
        <Modal
          open={UnpaidConfirmation}
          width={500}
          children={
            <>
              <div>
                You have already selected a table. If you click 'OK,' the table
                selection will be removed, and the unpaid flow will continue. If
                you click 'Cancel,' the dine-in flow will proceed as selected.
              </div>
            </>
          }
          onOk={UnpaidOk}
          onCancel={Unpaidclose}
        />
      )}
      {Splitpayment && (
        <SplitPayment
          SplitPaymentModal={Splitpayment}
          handlesplitpaymentclose={handlesplitpaymentclose}
          TotalNetAmount={
            OrderType === 'Failed' ? FailedTotalAmt : Math.round(OrderCardDetail?.reduce((acc, data) => data?.TotalAmt + acc, 0) -
              ((OverAllSales > 0 ? OverAllSales : 0) +
                (OverAllEstimate > 0 ? OverAllEstimate : 0) +
                (Discount > 0 ? Discount : 0)))
          }
          failedOrderData={failedOrderData}
        />
      )}
      {PrintOrderDetails?.length > 0 && (
        <div
          style={{
            display: 'flex',
            gap: '1rem',
            justifyContent: 'center',
            margin: '1rem 0',
          }}
        >
          {filteredSettingNames?.includes('whatsapp') &&
            MobileNoWhatsApp?.value && (
              <FaWhatsapp
                size={32}
                color="#25D366"
                style={{ cursor: 'pointer' }}
                onClick={handleWhatsAppClick}
                title="Share on WhatsApp"
              />
            )}

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

          {filteredSettingNames?.includes('SMS') && isMobile && (
            <MdSms
              size={32}
              color="#FF8800"
              style={{ cursor: 'pointer' }}
              onClick={handleSMSClick}
              title="Send SMS"
            />
          )}
          {/* WhatsAppShare modal/component */}
          {showWhatsAppShare && (
            <WhatsAppShare
              message={encodedMessage}
              mobileNumber={MobileNoWhatsApp?.value}
              onClose={() => closePrintOption(false)}
            />
          )}
          {showSMSShare && isMobile && (
            <SMSShare
              message={encodedMessage}
              mobileNumber={MobileNoWhatsApp?.value}
              onClose={() => closePrintOption(false)}
            />
          )}
        </div>
      )}
      <DefaultModal
        className={'paymentoptionsModal'}
        open={GlobalSalesPaymentoptions}
        width={500}
        height={1000}
        destroyOnClose={true}
        handleCancel={() => {
          dispatch(changeSalesPaymentoption(false));
        }}
        footer={false}
        children={
          <div
            className="paymentoptionsModalContent"
            style={{ overflow: 'scroll' }}
          >
            <Paymentoption onSuccess={getPaymentOptionFeature} />
          </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>
      )}
    </>
  );
};

export default BSC1Payment;