diff --git a/src/check.jsx b/src/check.jsx
index d993a1b..0a876eb 100644
--- a/src/check.jsx
+++ b/src/check.jsx
@@ -1,829 +1,4608 @@
-export const style = `<style>
-.heading
-{
-  color: #1292EE;
-}
-.container
-{
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-}
-.barcode
-{
-  font-family:'Libre Barcode 39';
-  font-size: 4px;
-}
-.Sticker0
-{
-  padding: 1px 5px 0px 7px;
-  width:15mm;
-  height:15mm;
-  text-align: center;
-  font-size: 6px;
-  //border:1px solid black;
-  font-weight: bold;
-}
-// .Sticker1
-// {
-//   padding:0px 5px 0px 5px ;
-//   width:35mm;
-//   height:22mm;
-//   text-align: center;
-//   font-size: 9px;
-//   display:flex;
-//   flex-direction:row;
-//   font-weight: bold;
-// }
-.Sticker2
-{
-  padding: 0px 5px 0px 5px;
-  width:80px;
-  height:80px;
-  text-align: center;
-  font-size: 10px;
-  margin-top:-3px;
-}
+import React, { useEffect, useState, useRef } from 'react';
+import { FaWhatsapp, FaPrint, FaParking, FaCartPlus } from 'react-icons/fa';
+import { useDispatch, useSelector } from 'react-redux';
+import { useNavigate } from 'react-router-dom';
+import moment from 'moment';
+import { Badge, Popover, Modal, Tooltip } 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,
+} 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,
+  GlobalAddCustomerDetails,
+} 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 CustomerOrders from '../BookingFunctionality/CustomerOrders.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;
 
-.Sticker3
-{
-  padding: 5px;  
-  width:170px;
-  height:86px;
-  text-align: center;
-  font-size: 12px;
-  display:flex;
-  flex-direction:row;
-  font-weight: bold;
-}
-  .Sticker4{
-  padding: 0px 5px 0px 5px;  
-  width:180px;
-  height:86px;
-  text-align: center;
-  font-size: 12px;
-  display:flex;
-  flex-direction:row;
-  font-weight: bold;
-}
-  .Sticker5{
-  padding: 0px 5px 0px 5px;  
-  width:180px;
-  height:86px;
-  text-align: center;
-  font-size: 12px;
-  display:flex;
-  flex-direction:row;
-  font-weight: bold;
-}
+const currentDateValue = moment().format('YYYY-MM-DD HH:mm:ss');
 
-.Sticker6 {
-display: flex;
-align-items: center;
-justify-content: space-between; 
-width: 55mm;
-height: auto; 
-// padding: 5px; 
-font-size: 8px;
-font-weight: bold;
-}
+const BSC1Payment = (props) => {
+  const isF4Pressed = useRef(false);
+  const applyOffer = useApplyOfferto_CardDetail();
+  const { SadminuserAccess } = useAuth();
+  let SAAccessCommonMaster = SadminuserAccess?.find(
+    (e) => e?.MenuName === 'Sales'
+  );
 
-.text-section6 {
-flex: 1; 
-text-align: left;
-}
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+  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);
 
-.Sticker7 {
-display: flex;
-align-items: center;
-justify-content: space-between; 
-width: 70mm;
-height: auto; 
-font-size: 8px;
-font-weight: bold;
-}
+  const allowedNames = ['whatsapp', 'Print', 'SMS'];
 
-.text-section7 {
-flex: 1; 
-text-align: left;
-}
+  const filteredSettingNames = SettingDataSelector?.[0]?.['SettingDtlDetails']
+    ?.filter(
+      (item) =>
+        allowedNames.includes(item?.SettingIdName) && item?.SettingValue === 'Y'
+    )
+    ?.map((item) => item?.SettingIdName);
 
-.OverAllSticker8{
-  height: 149mm;   
-}
+  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 [customerPreviesOrders, setCustomerPreviesOrders] = useState(false);
+  const [UpiOption, setUpiOption] = useState('');
+  const [UpiId, setUpiId] = useState();
+  const [hold, setHold] = useState(false);
+  const appPreferences = useSelector(ApplicationPreferences);
+  const commonModulePreference = appPreferences?.find(
+    (preference) => preference?.PreferredCatName === 'Common Module'
+  )?.PreferenceCatDetails;
+  const sportsAppPreference = commonModulePreference?.find(
+    (preference) => preference?.PreferredSubCatName === 'SportsApp'
+  );
+  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'
+  );
 
-.Sticker8 {
-display: flex;
-justify-content: space-between; 
-width: 100mm;
-height: 149mm; 
-font-size: 16px;
-font-weight: bold;
-}
+  const preferenceshortcutkey = SettingDataSelector?.[0]?.[
+    'SettingDtlDetails'
+  ]?.some(
+    (item) =>
+      item.SettingIdName.toLowerCase() === 'shortcutkeys' &&
+      item.SettingValue === 'Y'
+  );
 
-.text-section8 {
-flex: 1; 
-text-align: left;
-width: 50%;
-}
-.StikerBr8{
- text-align: center;
- font-size: 16px;
- font-weight: bold;
- display: flex;
- justify-content:center;
- align-items: center;
- width:100%;
-}
- .text-section8 .field-value {
-  flex: 1; 
-  text-align: right; 
-  word-wrap: break-word; 
-  word-break: break-word;
-  overflow-wrap: break-word;
-}
+  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 [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 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 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;
 
-.BarQrprint5 {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-    gap: 6px;
-    width: 56.692896px;
-    height: 56.692896px;
-    background-color: #fff;
-    padding: 1px 4px;
-    border-radius: 6px;
-    flex-direction: row-reverse;
-    >img{
-    width:80%;
-    height:50px;
+  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);
+
+  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 fetchCreditCustomer = async () => {
+      const selectedMode = paybtns?.find(
+        (pay) => paybtnselected === pay?.ModeId
+      )?.ModeName;
+
+      if (
+        selectedMode?.toLowerCase() === 'credit' &&
+        (!UpinotSelected || !CardoptionnotSelected)
+      ) {
+        setCredit(true);
+        try {
+          const res = await dispatch(
+            getCreditCustomer({
+              CompId,
+              AppId,
+              BranchId,
+              CustId: selOption?.CustId,
+            })
+          ).unwrap();
+
+          if (res?.data?.statusCode === 1 && res?.data?.data?.length > 0) {
+            setOverAllBal(res.data.data[0]?.OverAllBal ?? 0);
+          } else {
+            setOverAllBal(0);
+          }
+        } catch (error) {
+          console.error('Credit fetch failed', error);
+          setOverAllBal(0);
+        }
+      } else {
+        setCredit(false);
+        setOverAllBal(0);
+      }
+    };
+
+    fetchCreditCustomer();
+  }, [paybtnselected, selOption, paybtns]);
+  useEffect(() => {
+    if (!preOrder) {
+      const totalSum = OrderCardDetail?.reduce(
+        (acc, card) => acc + parseFloat(card.OrderRate * card.OrderQty || 0),
+        0
+      );
+
+      const extra = GlobalExtraCharge?.reduce(
+        (acc, obj) => acc + (obj.TotalAmt || 0),
+        0
+      );
+
+      let withComboSum = 0;
+      const withComboOffer_CardDetail = OrderCardDetail?.filter(
+        (item) => item.Type === 'C'
+      );
+      if (withComboOffer_CardDetail?.length > 0) {
+        withComboSum = 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,
+          })
+        );
+      }
+
+      let withdiscTotal =
+        Total - ((OverAllSales || 0) + (OverAllEstimate || 0));
+
+      setTotalAmount(
+        withdiscTotal >= 0
+          ? (Number(withdiscTotal) + Number(globalTipAmount)).toFixed(2)
+          : (Number(Total) + Number(globalTipAmount)).toFixed(2)
+      );
+
+      dispatch(
+        changeSummeryTotalAmount(
+          withdiscTotal > 0 ? withdiscTotal : Number(Total)
+        )
+      );
+
+      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,
+  ]);
+  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;
 
-.BarQrprint4 {
-  width: 35mm;
-  height: 22mm;
+    const handleKeyPress = (event) => {
+      if (!event.altKey) return;
 
-  box-sizing: border-box;
-  padding: 1mm;
+      const key = event.key.toLowerCase();
 
-  display: flex;
-  align-items: center;
-  justify-content: center;
+      switch (key) {
+        case 'n':
+          event.preventDefault();
+          setQuickOpen();
+          break;
 
-  background: #fff;
-  border-radius: 0;       /* IMPORTANT for printers */
+        case 'w':
+          event.preventDefault();
+          if (canHold) {
+            AddBookingDetails('Hold');
+          } else if (canRecall) {
+            HandleholdModelOpen();
+          }
+          break;
 
-  .productNameBQSmall{
-    font-size: 9px;
-  }
-}
+        case 'a':
+          if (canExtracharge) {
+            event.preventDefault();
+            handleextraCharges();
+          }
+          break;
 
-// .BarQrprint3 {
-//     display: flex;
-//     align-items: center;
-//     justify-content: center;
-//     gap: 6px;
-//     width: 80px;
-//     height: 80px;
-//     background-color: #fff;
-//     padding: 0px 4px;
-//     border-radius: 6px;
-//     flex-direction: row-reverse;
+        case 'r':
+          if (canReprint) {
+            event.preventDefault();
+            handleReprint();
+          }
+          break;
 
-// }
+        case 's':
+          if (canSplitPayment) {
+            event.preventDefault();
+            SplitPaymentOpen();
+          }
+          break;
 
-.BarQrprint8 {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 6px;
-    width: 50mm;
-    height: 25mm;
-    background-color: #fff;
-    padding: 0px 4px;
-    border-radius: 6px;
-}
+        default:
+          break;
+      }
+    };
 
-.Barcodeimage {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
+    window.addEventListener('keydown', handleKeyPress);
+    return () => {
+      window.removeEventListener('keydown', handleKeyPress);
+    };
+  }, [
+    preferenceshortcutkey,
+    canHold,
+    canRecall,
+    canExtracharge,
+    canSplitPayment,
+  ]);
 
-    img {
-     width: 50%;
-    object-fit: contain;
+  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';
     }
 
-    .MRPBQ{
-        font-size: 10px;
-    }
-}
+    setaddnewAccess(!hasAccess);
+  }, [empData, SAAccessCommonMaster, UserType]);
+  useEffect(() => {
+    getBookingTypeId();
+  }, [BookingType, BookingTypeBoth]);
 
-.BarQrprint6 {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 6px;
-    width: 100%;
-    height: 86px;
-    background-color: #fff;
-    padding: 0px 2px;
-    border-radius: 6px;
-    .MandateBQ,
-    .ExpdateBQ{
-        font-size: 10px;
+  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.'
+      );
     }
-    .MRPBQ{
+  }, [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 {
+      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 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 (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);
+    // }
+  };
+
+  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 AddCardOption = (data) => {
+    setSelectedCardOption(data);
+    setCardOptionOpen(false);
+    setCardoptionnotSelected(false);
+  };
+  const AddUPIPaymentOption = async (data) => {
+    setSelectedUpiOption('');
+    setUpiOption('');
+    setUpiId('');
+    await dispatch(changeUpiIDprint(null));
+    await dispatch(changeUpiIDName(''));
+    await dispatch(changeUpiIDoptionId(null));
+    setSelectedUPIPayOption(data);
+    setUpinotSelected(false);
+    setCardoptionnotSelected(false);
+    if (data !== 'Default') {
+      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;
-    }
-}
-.BarQrprint2 {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 6px;
-    width: 180px;
-    height: 86px;
-    background-color: #fff;
-    padding: 0px 4px;
-    border-radius: 6px;
-    flex-direction: row-reverse;
-    .productNameBQ,
-    .MandateBQ{
-        font-size: 10px;
-    }
-
- .BarQrprint1details{
-    gap: 6px;
-}
-}
-.BarQrprint9 {
-      .BarQrprint1details1 {
+        font-family: Poppins;
+        margin-bottom: -5px;
+      }
+      
+      .Re-print-GST {
+        font-size: 12px;
+        font-family: Poppins;
+      }
+    
+      .Re-print-top {
         display: flex;
         flex-direction: column;
-        gap: 2px;
-        font-size: 10px;
-        text-transform: capitalize;
-        font-weight: 600;
         align-items: center;
         width: 100%;
       }
-}
-.BarQrprint1 {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 6px;
-    width: 70mm;
-    background-color: #fff;
-    padding: 2px 4px;
-    border-radius: 6px;
+    
+      .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;
+              },
+              {}
+            );
 
-}
-.BarQrprint7 {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 6px;
-width: 100mm;
-height: 149mm; 
-    background-color: #fff;
-    padding: 4px 4px;
-    border-radius: 6px;
-}
-// .Qrcodeimage,
-// .Barcodeimage {
-//     display: flex;
-//     gap: 6px;
-//     align-items: center;
+            // 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();
+    }
+  };
 
-//     >img {
-//     width:50%;
-//         object-fit: cover;
-//     }
-// }
-.BarQrprint1details {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 2px;
-    font-size: 12px;
-    text-transform: capitalize;
-    font-weight: 600;
-         width: 100%;
- }
-.flexDirection {
-    flex-direction: column
-}
+  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();
+  };
 
-.printingstickermain{
-  display: flex;
-  align-items: flex-start;
-  gap: 6px;
-  flex-wrap: wrap;
-  width: 100%;
-  flex-direction: row;
+  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)
+        );
+      }
 
-// .container{
-//   display: flex;
-//   gap: 6px;
-//   align-items: flex-start;
-//   flex-wrap: wrap;
-//       width: 100%;
-//     justify-content: space-evenly;
-// }
+      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
+      ];
 
-  #StickerPrints0{
-  width: 90mm;
+    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();
+    }
+  };
+
+  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
   }
-
-  .Sticker1 {
-  width: 35mm;
-  height: 22mm;
-  padding-left: 2mm;
-  box-sizing: border-box;
-
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-
-  font-size: 9px;
-  font-weight: bold;
-}
-
-.grid15x15_6cross {
-  display: grid;
-  grid-template-columns: repeat(6, 15mm);
-  width: 90mm;
-  column-gap: 0.5mm;
-}
-
-    .BarQrprint3 {
-  width: 25mm;
-  height: 25mm;
-  box-sizing: border-box;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  background: #fff;
-  border-radius: 0;   /* IMPORTANT for thermal printers */
-}
-
-// 25x25 4 Cross Dummy
-
-@media print {
-  body {
-    margin: 0 !important;
-    padding: 0 !important;
-  }
-
-  img {
-    display: block !important;
-    visibility: visible !important;
-  }
-}
-
-// 25x25 4Cross
-
-#25X254cross {
-  width: 100mm;
-  margin: 0 !important;
-  padding: 0 !important;
-}
-
-.grid25x25_4cross {
-  display: grid;
-  grid-template-columns: repeat(4, 25mm);
-  width: 100mm;
-  column-gap: 0;
-}
-
-.barcode-wrapper-25x25 {
-  width: 25mm;
-  height: 25mm;
-
-  box-sizing: border-box;
-  padding: 1mm;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  background: #fff;
-}
-
-.barcode-container-25x25 {
-  width: 100%;
-  height: 100%;
-
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-
-  gap: 1mm;
-  text-align: center;
-
-  .productNameBQ {
-    font-size: 9px;
-    line-height: 1;
-    white-space: nowrap;
-    text-align: center;
-    max-width: 100%;
-    font-weight: 600;
-  }
-
-  .MRPBQ {
-    font-size: 9px;
-    line-height: 1;
-    white-space: nowrap;
-    font-weight: 600;
-  }
-
-  .MandateBQ,
-  .ExpdateBQ {
-    font-size: 8px;
-    line-height: 1;
-    white-space: nowrap;
-    font-weight: 600;
-  }
-}
-
-.barcode-wrapper img {
-  height: auto;
-  object-fit: contain;
-}
-
-// 25x25 4Cross Dummy
-
-#StickerPrints2 {
-  width: 100mm;
-  margin: 0 !important;
-  padding: 0 !important;
-}
-
-.sticker25x25{
-    width: 25mm;
-  height: 25mm;
-  box-sizing: border-box;
-  padding: 1mm;
-
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-
-  background: #fff;
-}
-
-.sticker25x25-name {
-  margin: 0;
-  padding: 0;
-  text-align: center;
-  line-height: 1;
-}
-
-.product-name2 {
-  font-size: 10px;
-  white-space: nowrap;
-  font-weight: bold;
-}
-
-.product-nameSmall2 {
-  font-size: 8px;
-  white-space: nowrap;
-  font-weight: bold;
-}
-
-.product-size2 {
-  font-size: 10px;
-  font-weight: bold;
-}
-
-.product-sizeSmall2 {
-  font-size: 8px;
-  font-weight: bold;
-}
-
-.sticker25-img {
-  width: 16mm;
-  height: auto;
-  object-fit: contain;
-}
-  .product-id2 {
-  margin: 0;
-  padding: 0;
-  font-size: 6px;
-  line-height: 1;
-  text-align: center;
-  word-break: break-word;
-}
-
-// 22x35 3cross
-
-  #22X353cross {
-  width: 105mm;
-  margin: 0;
-  padding: 0;
-}
-
-.grid22x35_3cross {
-  display: grid;
-  grid-template-columns: repeat(3, 35mm);
-  width: 105mm;
-  column-gap: 0;
-  padding: 0;
-}
-
-.barcode-wrapper-22x35 {
-   width: 35mm;
-  height: 22mm;
-
-  box-sizing: border-box;
-  padding: 1.2mm;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  background: #fff;
-}
-
-.barcode-wrapper-22x35 img {
-  height: auto;
-  object-fit: contain;
-}
-
-.barcode-container-22x35 {
-  width: 100%;
-  height: 100%;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  gap: 1mm;
-  text-align: center;
-
-  .productNameBQ {
-    font-weight: 600;
-    font-size: 9px;
-    line-height: 1;
-    white-space: nowrap;
-    text-align: center;
-    max-width: 100%;
-  }
-
-  .productNameBQSmall {
-    font-size: 7px;
-    font-weight: 600;
-  }
-  .MRPBQ {
-    font-size: 8px;
-    font-weight: 600;
-    line-height: 1;
-    white-space: nowrap;
-  }
-
-}
-
-// 22x35 3cross Dummy
-#StickerPrints1 {
-  width: 105mm;
-  margin: 0;
-  padding: 0;
-}
-
-.label-wrapper-22x35 {
-  width: 35mm;
-  height: 22mm;
-
-  box-sizing: border-box;
-  padding: 1mm;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap : 0;
-  background: #fff;
-}
-
-.label-wrapper-22x35 p {
-  margin: 0;
-  padding: 0;
-  font-size: 10px;
-  font-weight: 600;
-  line-height: 1.1;
-}
-
-.label-wrapper-22x35 p:last-child {
-  margin-top: 2px;
-  font-size: 8px;
-  font-weight: 600;
-}
-
-.label-wrapper-22x35 img {
-  width: 14mm;
-  height: 14mm;
-  object-fit: contain;
-}
-
-// 25x50 2 Cross
-
-#25X502cross {
-  margin: 0 !important;
-  padding: 0 !important;
-  width: 100mm;
-}
-
-.grid25x50_2cross {
-  display: grid;
-  grid-template-columns: repeat(2, 50mm);
-  width: 100mm;
-  column-gap: 0;
-  padding: 0;
-}
-
-.label25x50-wrapper {
-  width: 50mm;
-  height: 25mm;
-
-  box-sizing: border-box;
-  padding: 1.5mm;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  background: #fff;
-}
-
-.label25x50-name {
-  font-size: 10px;
-  line-height: 1;
-  white-space: nowrap;
-  font-weight: 600;
-}
-
-.label25x50-mrp {
-  font-size: 9px;
-  line-height: 1;
-  white-space: nowrap;
-  font-weight: 600;
-}
-
-.label25x50-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-}
-
-.label25x50-container img {
-  width: 16mm;
-  height: 16mm;
-  object-fit: contain;
-}
-
-// 25x50 2 Cross Dummy
-
-#StickerPrints3 {
-  width: 100mm;
-  margin: 0;
-  padding: 0;
-}
-
-.label-25x50-content {
-  width: 50mm;
-  height: 25mm;
-
-  box-sizing: border-box;
-  padding: 1.5mm;
-
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-
-  background: #fff;
-}
-
-.label-25x50-content > div {
-  width: 60%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: 1mm;
-  font-weight: 600;
-}
-
-.label-25x50-content p {
-  margin: 0;
-  padding: 0;
-  font-size: 10px;
-  line-height: 1;
-}
-
-.label-25x50-content p:last-child {
-  font-size: 9px;
-  white-space: nowrap;
-}
-
-.label-25x50-content img {
-  width: 20mm;     /* QR SAFE SIZE */
-  height: 20mm;
-  object-fit: contain;
-}
-
-// 15x15 6 Cross
-
-#label-15X156cross {
-  width: 92mm;
-  margin: 0 !important;
-  padding: 0 !important;
-}
-
-.label-15x15-container {
-  display: grid;
-  grid-template-columns: repeat(6, 15mm);
-  width: 100%;
-  column-gap: 0.5mm;
-  row-gap: 0;
-  align-items: flex-start;
-}
-
-.label-15x15-wrapper {
-  width: 15mm;
-  height: 15mm;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  background: #fff;
-}
-
-.label-15x15-content {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-start;
-
-  text-align: center;
-}
-
-.label-15x15-name,
-.label-15x15-mrp {
-  font-size: 6px;
-  white-space: nowrap;
-}
-
-.label-15x15-wrapper img {
-  width: 7.5mm;
-  height: 7.5mm;
-  object-fit: contain;
-}
-
-
-.text-ellipsis {
-  width: 90%;
-  white-space: nowrap;
-  overflow: hidden;
-  text-align: center;
-  text-overflow: ellipsis;
-}
-
-.text-clamp-2 {
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  line-height: 1.1;
-  max-height: 2.8em;
-}
-</style>`;
-
-export const getPageStyle = (width) => `
-  <style>
-    @media print {
-      @page {
-        size: ${width}mm auto;
-        margin: 0;
+  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(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);
+    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'
+    ) {
+      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?.OfferPrice : a.Offer,
+      OfferAmt: a?.Type === 'C' ? a?.TotalAmt : a.Offer,
+      OfferType: a?.Type === 'C' ? a?.OfferType : '',
+      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 = OrderOfferDetail;
+    if (GlobEstBooking !== 'Sales') {
+      updatedOfferDetails = OrderOfferDetail?.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:
+            Paybtnnameselected?.toLowerCase() === 'upi'
+              ? SelectedUPIPayOption?.toLowerCase() === 'pd'
+                ? PaymentDeviceUPI?.[0]?.ModeId
+                : SelectedUPIPayOption?.toLowerCase() === 'pg'
+                  ? PaymentgatewayUPI?.[0]?.ModeId
+                  : paybtnselected
+              : paybtnselected
+                ? paybtnselected
+                : null,
+          // SelectedUPIPayOption?.toLowerCase() === "pg" ?
+          Amount: Math.round(TotalAmount),
+          PaymentOptionType:
+            Paybtnnameselected?.toLowerCase() === 'cash'
+              ? 'PC'
+              : Paybtnnameselected?.toLowerCase() === 'credit'
+                ? 'PC'
+                : Paybtnnameselected?.toLowerCase() === 'card'
+                  ? SelectedCardOption
+                  : Paybtnnameselected?.toLowerCase() === 'upi'
+                    ? SelectedUPIPayOption?.toLowerCase() === 'default'
+                      ? 'PC'
+                      : SelectedUPIPayOption
+                    : null,
+          ModeOfPayment:
+            SelectedUPIPayOption?.toLowerCase() === 'default'
+              ? PaymentUpiOptions?.find((upipay) => upipay?.UPIId === UpiId)
+                ?.UPIDetailId
+              : null,
+          AccountDtl:
+            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:
+            Paybtnnameselected?.toLowerCase() === 'cash'
+              ? 'S'
+              : Paybtnnameselected?.toLowerCase() === 'credit'
+                ? 'S'
+                : Paybtnnameselected?.toLowerCase() === 'upi' &&
+                  SelectedUPIPayOption?.toLowerCase() === 'default'
+                  ? 'S'
+                  : 'P',
+          Debit: 0,
+          Credit:
+            Paybtnnameselected?.toLowerCase() === 'credit'
+              ? Math.round(TotalAmount)
+              : 0,
+        },
+      ],
+      OrderOfferDetail: updatedOfferDetails,
+    };
+    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'
+      );
+      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');
+      }
+    } 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 = 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 {
+          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);
+        }
       }
     }
-  </style>
-`;
\ No newline at end of file
+  };
+  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) {
+      const updatedData = {
+        userData: OrderCardDetail,
+        ExtraCharges: GlobalExtraCharge,
+        customer: selOption != null ? selOption : GetCustId,
+        Paymentgateway: false,
+      };
+      setFailedOrderData(updatedData);
+      setSplitpayment(true);
+    } else {
+      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>
+                        <PozoReprintIcon className="BSC1Payment-icon" />
+                        Re-Print
+                      </div>
+
+                      <span style={{ fontSize: '9px', letterSpacing: '0.5px' }}>
+                        (Alt + R)
+                      </span>
+                    </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 ? (
+              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
+                          UpiOptionOpen={UpiOptionOpen}
+                          UpiPayOption={UpiPayOption}
+                          SelectedUPIPayOption={SelectedUPIPayOption}
+                          AddUPIPaymentOption={AddUPIPaymentOption}
+                          PaymentUpiOptions={PaymentUpiOptions}
+                          UpiOption={UpiOption}
+                          UpiId={UpiId}
+                          paygate={paygate}
+                          paydevice={paydevice}
+                          EnableUpiOptions={EnableUpiOptions}
+                          PaymentgatewayUPI={PaymentgatewayUPI}
+                          PaymentDeviceUPI={PaymentDeviceUPI}
+                          SelectedUpiOption={SelectedUpiOption}
+                          addUpiOption={addUpiOption}
+                          hideDefault={hideDefault}
+                        />
+                      )}
+                    </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: '45px',
+                            width: '45px',
+                            borderRadius: '6px',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            padding: '4px 8px 14px 8px',
+                          }}
+                        >
+                          <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 8px 14px 8px',
+                            }}
+                            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',
+                          }}
+                        >
+                          {' '}
+                          <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>
+                  )}
+              </>
+            ) : (
+              ''
+            )}
+
+            {/* Customer Orders */}
+            {GetCustId && (
+              <Tooltip title="Customer Orders" isMobile={isMobile}>
+                {' '}
+                <div
+                  className="BSBillingNav-icon-table-icon"
+                  onClick={() => {
+                    if (
+                      CheckBookingStatus !== 'Close' &&
+                      !addnewAccess &&
+                      !(OrderCardDetail?.length > 0)
+                    ) {
+                      setCustomerPreviesOrders(true);
+                    }
+                  }}
+                  style={{
+                    cursor: OrderCardDetail?.length > 0 && 'not-allowed',
+                    color:
+                      OrderCardDetail?.length > 0 ||
+                        (OrderCardDetail?.length > 0 &&
+                          GetCustId?.CustMobile === undefined)
+                        ? 'gray'
+                        : 'rgb(255, 255, 255)',
+                    color: '#fff',
+                    height: '40px',
+                    width: '45px',
+                    borderRadius: '6px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    padding: '5px 5px 6px 5px',
+                    background: 'rgb(18, 146, 238)'
+                  }}
+                >
+                  <FaCartPlus style={{
+                    fontSize: '20px',
+                  }} />Cust Orders
+                </div>
+              </Tooltip>
+            )}
+            {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
+                        ? '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 ? (
+                  <>
+                    {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: 'scroll' }}>
+              <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(TotalAmount)
+          }
+          failedOrderData={failedOrderData}
+        />
+      )}
+      {PrintOrderDetails?.length > 0 && (
+        <div
+          style={{
+            display: 'flex',
+            gap: '1rem',
+            justifyContent: 'center',
+            margin: '1rem 0',
+          }}
+        >
+          {filteredSettingNames?.includes('whatsapp') &&
+            MobileNoWhatsApp?.value && (
+              <FaWhatsapp
+                size={32}
+                color="#25D366"
+                style={{ cursor: 'pointer' }}
+                onClick={handleWhatsAppClick}
+                title="Share on WhatsApp"
+              />
+            )}
+
+          <FaPrint
+            size={32}
+            color="#1292EE"
+            style={{ cursor: 'pointer' }}
+            onClick={handlePrintOrToken}
+            title="Print"
+          />
+
+          {filteredSettingNames?.includes('SMS') && isMobile && (
+            <MdSms
+              size={32}
+              color="#FF8800"
+              style={{ cursor: 'pointer' }}
+              onClick={handleSMSClick}
+              title="Send SMS"
+            />
+          )}
+          {/* WhatsAppShare modal/component */}
+          {showWhatsAppShare && (
+            <WhatsAppShare
+              message={encodedMessage}
+              mobileNumber={MobileNoWhatsApp?.value}
+              onClose={() => closePrintOption(false)}
+            />
+          )}
+          {showSMSShare && isMobile && (
+            <SMSShare
+              message={encodedMessage}
+              mobileNumber={MobileNoWhatsApp?.value}
+              onClose={() => closePrintOption(false)}
+            />
+          )}
+        </div>
+      )}
+      <DefaultModal
+        className={'paymentoptionsModal'}
+        open={GlobalSalesPaymentoptions}
+        width={500}
+        height={1000}
+        handleCancel={() => {
+          dispatch(changeSalesPaymentoption(false));
+        }}
+        footer={false}
+        children={
+          <div
+            className="paymentoptionsModalContent"
+            style={{ overflow: 'scroll' }}
+          >
+            <Paymentoption onSuccess={getPaymentOptionFeature} />
+          </div>
+        }
+      />
+      {customerPreviesOrders && (
+        <DefaultModal
+          open={customerPreviesOrders}
+          handleCancel={() => setCustomerPreviesOrders(false)}
+          footer={false}
+          width={700}
+          className={'ModalPaymentGatewayEmbedded'}
+          children={
+            <>
+              <CustomerOrders
+                CustomerDetails={selOption}
+                close={() => setCustomerPreviesOrders(false)}
+              />
+            </>
+          }
+        />
+      )}
+    </>
+  );
+};
+
+export default BSC1Payment;
\ No newline at end of file