import React, { useEffect, useState, useCallback } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { MdOutlinePayments } from 'react-icons/md';
import { HiOutlineBackspace } from 'react-icons/hi';
import { ArrowRightOutlined, ExclamationCircleFilled } from '@ant-design/icons';
import { Modal } from 'antd';
import { CiSearch } from 'react-icons/ci';
import { Collapse, Radio } from 'antd';
import Buttons from '../../../Components/Forms/Buttons';
import Search from '../../../Components/Forms/Search.jsx';
import UPI from '../../../Images/upinew.svg';
import Card from '../../../Images/card.png';
import CrediCard from '../../../Images/PayOptImgs/creditcard.png';
import DebitCard from '../../../Images/PayOptImgs/debitcard.png';
import CashCard from '../../../Images/PayOptImgs/cashcard.png';
import NetBank from '../../../Images/PayOptImgs/netbank.png';
import Wallet from '../../../Images/PayOptImgs/wallet.png';
import { DefaultModal } from '../../../Components/Modal/DefaultModal';
import { Messages } from '../../../Components/Notifications/Messages';
import '../Payment/KioskPaymentWithModal.scss';
import {
  getKioskLightColour,
  changeKioskCustomerMobileNo,
  globalKioskCustomerMobileNo,
  changeKioskPageName,
  changeSelectedKioskPaymentOption,
  getKioskTemplate,
  GlobalKioskPrinterDetails,
  getKioskPrinterDetails,
} from '../../../Features/Kiosk/kiosk';
import {
  GlobalBookingTypeKiosk,
  GlobalKioskBookingTypeBoth,
  GlobalKioskOrderDetails,
  PostKioskBookingData,
  PutBookingPaymentStatusChange,
  changeOrderId,
  postPaymentDevice,
  getPaymentDeviceResponse,
  getPaymentGatewayDetails,
  getPaymentOptionsData,
  getPaymentDeviceAccessData,
  getPaymentGatewayAccessData,
  changeAllGlbStatustData,
  PutKioskBookingData,
  GlobalPGFailedTransId,
  changePGFailedTransId,
  changePaymentgatewayRedirect,
  getProductCategories,
  GlobalPGFailedAmt,
  changePGFailedAmt,
  getPaymentVerfication,
  GlobalOrderId,
} from '../../../Features/BookingScreen/BookingData/KioskBookingData';
import {
  getPrintSelectionComponentData,
  GlobalprintDatas,
  SelectedPrintTemplate,
} from '../../../Features/ThemeChange/ThemeChange';
import {
  getConfigType,
  getPreferenceData,
  PreferenceData,
  PutPendingPaymentList,
} from '../../../Features/BookingScreen/BookingData/BookingData';
import { isMobile } from 'react-device-detect';
import MobilePrint from '../../../Pages/BookingScreen/Components/BookingFunctionality/MobilePrint.jsx';
import KioskMobilePrint from '../../../Pages/BookingScreen/Components/BookingFunctionality/KioskMobilePrint.jsx';
import { PrintStyleFunction } from '../../../Pages/paymentpdfPage/PrintStyleFunction.js';
import {
  printDiv,
  extractLastNumberOrderId,
  encryptedValuesFun,
  getSession,
} from '../../../Services/Others';
import PaymentPdfBooking from '../../paymentpdfPage/PaymentPdfBooking.jsx';
import KioskBookingReceipt from '../../paymentpdfPage/KioskBookingReceipt.jsx';
import { getSalesDetails } from '../../../Features/PaymentGateway/PaymentGateway.js';
import { sendSms } from '../../../Features/Payment/PaymentDetails/PaymentDetails.js';
import { ApplicationPreferences } from '../../../Features/BrachLogin/BranchLogin.js';
import { VerifiedPaymentDtl } from '../../../Features/BookingScreen/Customer/addCustomer.js';
import PaymentGatewayEmbedded from '../../BookingScreen/Components/UtillComponents/PaymentGatewayEmbedded.jsx';
import MobileMultiPdfPrintTrigger from '../../BookingScreen/Components/UtillComponents/MobileMultiPdfPrintTrigger.jsx';
import { checkLastOrderTimeLimit, sendupiotp } from '../../../Features/UpiDetails/UpiDetails.js';
import { isIndianMobile } from '../../../utils/calculations.js';

const CustomPaymentUrl = import.meta.env.ENV_CUSTOM_PAYMENT_URL;

const KioskPayment = (props) => {
  const paymentGatewayRef = React.useRef(null);
  const dispatch = useDispatch();
  const SessionData = props?.sessionData;
  const DeviceMacAddress = getSession('DeviceAddress');
  console.log(DeviceMacAddress, 'DeviceMacAddress');

  const [open, setOpen] = useState(props.modalOpen);
  const [width, setWidth] = useState(window.innerWidth);
  const [showCancelConfirm, setShowCancelConfirm] = useState(false);
  const appPreferences = useSelector(ApplicationPreferences);
  const CustomerMobileNumber = useSelector(globalKioskCustomerMobileNo);
  const OrderId = useSelector(GlobalOrderId);
  console.log(OrderId, 'OrderIdOrderId');
  const PGfailedId = useSelector(GlobalPGFailedTransId);
  const PGfailedAmt = useSelector(GlobalPGFailedAmt);
  const KioskPrinterList = useSelector(GlobalKioskPrinterDetails);
  const [counterAvailability, setCounterAvailability] = useState(false);
  const [cardAvailability, setCardAvailability] = useState(false);
  const [upiAvailability, setUpiAvailability] = useState(false);
  const [SelectedBookingType, setSelectedBookingType] = useState(null);
  const [TotalTaxAmount, setTotalTaxAmount] = useState(null);
  const [TotalBillAmount, setBillAmount] = useState(null);
  const [TotalNetAmount, setTotalNetAmount] = useState(null);
  const [PrintOrderDetails, setPrintOrderDetails] = useState([]);
  const [PaymentOptionsData, setPaymentOptionsData] = useState([]);
  const [messageType, setMessageType] = useState(null);
  const [messageData, setMessageData] = useState(null);
  const [paymentDeviceAccess, setPaymentDeviceAccess] = useState([]);
  const [paymentGatewayAccess, setPaymentGatewayAccess] = useState([]);
  const [paymentDefalutOption, setPaymentDefaultOption] = useState(null);
  const [showPaymentGatewayOptions, setShowPaymentGatewayOptions] =
    useState(false);
  const [paymentGatewayMethods, setPaymentGatewayMethods] = useState([]);
  const [paymentOptionDetailsBusinessUpi, setPaymentOptionDetailsBusinessUpi] =
    useState(null);
  const [selectedOption, setselectedOption] = useState();
  const [value, setValue] = useState();
  const [itemsdata, setItemsdata] = useState();
  const [dataAccept, setDataAccept] = useState();
  const [cardName, setCardName] = useState();
  const [selectedPaymentOption, setSelectedPaymentOption] = useState(null);
  const [devicePaymentStatus, setDevicePaymentStatus] = useState(false);
  const [FailedTranId, setFailedTranId] = useState(null);
  const getKioskLightColourdata = useSelector(getKioskLightColour);
  const KioskOrderDetails = useSelector(GlobalKioskOrderDetails);
  console.log(CustomerMobileNumber, 'CustomerMobileNumber');
  const [number, setNumber] = useState(
    CustomerMobileNumber ? CustomerMobileNumber : ''
  );
  const BookingTypeBoth = useSelector(GlobalKioskBookingTypeBoth);
  const BookingType = useSelector(GlobalBookingTypeKiosk);
  const printerTemplateStyle = useSelector(SelectedPrintTemplate);
  const printDatas = useSelector(GlobalprintDatas);
  const SettingDataSelector = useSelector(PreferenceData);
  console.log(
    SettingDataSelector,
    KioskPrinterList,
    'SettingDataSelectorSettingDataSelector'
  );
  const MobileA4Print = SettingDataSelector?.[0]?.SettingDtlDetails?.find(
    (setting) =>
      setting?.SettingIdName?.toLowerCase() === 'mobilea4' &&
      setting?.SettingValue === 'Y'
  );
  const isOtpEnabled = SettingDataSelector?.[0]?.SettingDtlDetails?.find(
    (setting) =>
      setting?.SettingIdName?.toLowerCase() === 'kioskotp' &&
      setting?.SettingValue === 'Y'
  );
  const isTimeLimitEnabled = SettingDataSelector?.[0]?.SettingDtlDetails?.find(
    (setting) =>
      (setting?.SettingIdName?.toLowerCase() === 'hours' || setting?.SettingIdName?.toLowerCase() === 'minutes') &&
      setting?.SettingValue === 'Y'
  );

  const bookingTypePreference = appPreferences?.find(
    (preference) => preference?.PreferredCatName === 'Booking Type'
  )?.PreferenceCatDetails;
  const [showPaymentMethods, setShowPaymentMethods] = useState(null);
  const [resendTimer, setResendTimer] = useState(0)
  const [canResend, setCanResend] = useState(true)
  const [otpInput, setOtpInput] = useState(['', '', '', '']);
  const [otpIndex, setOtpIndex] = useState(0);
  const [otpSent, setOtpSent] = useState(false);
  const [otpVerifed, setOtpVerified] = useState(false);
  const [otpNumber, setOTPNumber] = useState(null);
  const [paymentUrl, setpaymentUrl] = useState(null);
  const [businessUPI, setBusinessUPI] = useState(false);
  console.log(PrintOrderDetails, 'PrintOrderDetails');
  const [TransctionId, setTransctionId] = useState(null);
  const [paymentSucess, setPaymentSuccess] = useState(false);
  useEffect(() => {
    fetchPaymentAccess();
  }, []);
  useEffect(() => {
    TotalCalculation();
  }, [KioskOrderDetails]);
  useEffect(() => {
    if (SessionData.CompId && SessionData.BranchId && SessionData.AppId) {
      if (DeviceMacAddress) {
        let data = {
          CompId: SessionData.CompId,
          BranchId: SessionData.BranchId,
          AppId: SessionData.AppId,
          DeviceMacAddress: DeviceMacAddress,
        };
        dispatch(getKioskPrinterDetails(data)).unwrap();
      }
      dispatch(getPreferenceData({ CompId: SessionData.CompId, BranchId: SessionData.BranchId, AppId: SessionData.AppId })).unwrap();
    }
  }, [SessionData.CompId, SessionData.BranchId, SessionData.AppId]);

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

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

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

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

          // Then set new data and trigger side effects
          setPrintOrderDetails(orderData);
          // dispatch(changeKioskPageName('initialPage'));
          // dispatch(changeAllGlbStatustData());
          // CustomerDisplay();
          // ClearAllGlobalStateDatas();
          // handleURL(orderData);
        }
      } catch (error) {
        console.error('Failed to fetch print data:', error);
        // Reset states even on error
        setBusinessUPI(false);
        setPaymentSuccess(false);
      }
    };

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

      return () => clearTimeout(timer);
    }
  }, [paymentSucess, TransctionId]);

  useEffect(() => {
    getBookingTypeId();
  }, [BookingType]);
  useEffect(() => {
    getSalesDetail();
  }, [FailedTranId, PGfailedId]);
  const getSalesDetail = async () => {
    if (PGfailedId) {
      let OrderId = PGfailedId;
      let response = await dispatch(
        getSalesDetails({ SalesId: OrderId })
      ).unwrap();
      console.log(response, 'salesdetail');
      if (response?.data?.statusCode === 1) {
        if (response?.data?.PaymentOrderDtl?.length >= 2) {
          setMessageType('error');
          setMessageData('Your transaction limt exceeds, Please contact admin');
          clearAllStates();
          dispatch(
            getProductCategories({
              AppId: SessionData.AppId,
              CompId: SessionData.CompId,
              BranchId: SessionData.BranchId,
            })
          ).unwrap();
          setTimeout(function () {
            dispatch(changeKioskPageName('initialPage'));
            dispatch(changeAllGlbStatustData());
          }, 2000);
        }
      }
    }
  };
  useEffect(() => {
    if (PrintOrderDetails?.length > 0) {
      if (selectedPaymentOption == 'Counter') {
        if (isMobile) {
          KioskMobilePrint(PrintOrderDetails?.[0]?.OrderDetails?.[0]);
          setTimeout(function () {
            dispatch(changeKioskPageName('paymentPage'));
          }, 3000);
        } else {
          Print();
        }
      }
      if (selectedPaymentOption == 'BU') {
        if (isMobile) {
          if (MobileA4Print) {
            const preferenceDetails =
              SettingDataSelector?.[0]?.SettingDtlDetails;
            let PrinterDetails = KioskPrinterList;
            MobileMultiPdfPrintTrigger({
              preferenceDetails,
              printerTemplateStyle,
              printDatas,
              PrinterDetails,
              PrintOrderDetails,
              SessionData,
              bookingTypePreference,
            });
            //
          } else {
            MobilePrint(
              appPreferences,
              PrintOrderDetails,
              '',
              'Booking',
              SettingDataSelector
            );
            setTimeout(function () {
              dispatch(changeKioskPageName('paymentPage'));
            }, 3000);
          }
          dispatch(changeKioskPageName('initialPage'));
          dispatch(changeAllGlbStatustData());
          ClearAllGlobalStateDatas();
        } else {
          PrintDevice();
        }
      }
      if (devicePaymentStatus && selectedPaymentOption != 'Counter') {
        if (isMobile) {
          MobilePrint(
            appPreferences,
            PrintOrderDetails,
            '',
            'Booking',
            SettingDataSelector
          );
          setTimeout(function () {
            dispatch(changeKioskPageName('paymentPage'));
          }, 3000);
        } else {
          PrintDevice();
        }
      }
    }
  }, [PrintOrderDetails]);

  useEffect(() => {
    function handleResize() {
      setWidth(window.innerWidth);
    }
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, [width]);

  useEffect(() => {
    isIndianMobile(number) && dispatch(changeKioskCustomerMobileNo(number));
  }, [number]);

  const onChange = (e) => {
    setValue(e?.target?.value);
    setDataAccept(
      itemsdata?.[e.target.value]?.DataAcceptedAt == 'CCAvenue' ? 'Y' : 'N'
    );
    setCardName(itemsdata?.[e.target.value]?.CardName);
  };
  const onSearchChange = (e) => {
    let Details = paymentGatewayMethods?.[selectedOption]?.MethodDetails;
    let searchTerm = e.target.value?.toLowerCase();

    let updated = Details.filter((item) =>
      item.CardName?.toLowerCase().startsWith(searchTerm)
    );

    setItemsdata(updated);
  };
  const items = [
    {
      key: '1',
      label: `${paymentGatewayMethods?.[selectedOption]?.CardType == 'CRDC' ||
        paymentGatewayMethods?.[selectedOption]?.CardType == 'DBCRD'
        ? 'Choose Your Card'
        : paymentGatewayMethods?.[selectedOption]?.CardType == 'WLT'
          ? 'Choose Your Wallet'
          : 'Choose Your Bank'
        } `,
      children: (
        <Radio.Group
          onChange={onChange}
          value={value}
          style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}
        >
          {itemsdata?.map((item, index) => {
            return (
              <>
                <Radio
                  value={index}
                  style={{
                    width: '106%',
                    marginLeft: '-15px',
                    borderBottom: '1px solid #dadada',
                  }}
                >
                  {item.CardName}
                </Radio>
              </>
            );
          })}
        </Radio.Group>
      ),
    },
  ];
  const onComplete = useCallback(() => {
    setMessageData(null);
    setMessageType(null);
  }, []);

  const setNumberFun = (newValue) => {
    setNumber((prevNumber) => {
      if (prevNumber.length < 10) {
        return prevNumber + newValue;
      }
      return prevNumber;
    });
  };

  const handleOtpNumber = (num) => {
    if (otpIndex > 3) return;

    const newOtp = [...otpInput];
    newOtp[otpIndex] = num.toString();
    setOtpInput(newOtp);

    if (otpIndex < 3) {
      setOtpIndex(otpIndex + 1);
    }
  };

  const handleOtpBackspace = () => {
    if (otpIndex < 0) return;

    const newOtp = [...otpInput];

    if (newOtp[otpIndex]) {
      newOtp[otpIndex] = '';
    } else if (otpIndex > 0) {
      newOtp[otpIndex - 1] = '';
      setOtpIndex(otpIndex - 1);
    }

    setOtpInput(newOtp);
  };

  const handleBackspace = () => {
    setNumber((prevNumber) => prevNumber.slice(0, -1));
  };

  const fetchPaymentAccess = async () => {
    const Data1 = {
      AppId: SessionData.AppId,
      CompId: SessionData.CompId,
      BranchId: SessionData.BranchId,
    };
    dispatch(getPrintSelectionComponentData(Data1)).unwrap();
    const paymentDeviceAccessResponse = await dispatch(
      getPaymentDeviceAccessData({
        AppId: SessionData.AppId,
        CompId: SessionData.CompId,
        BranchId: SessionData.BranchId,
        UserId: SessionData.UserId,
      })
    ).unwrap();
    setPaymentDeviceAccess(paymentDeviceAccessResponse?.data?.data);
    const paymentGatewayAccessResponse = await dispatch(
      getPaymentGatewayAccessData({
        AppId: SessionData.AppId,
        CompId: SessionData.CompId,
        BranchId: SessionData.BranchId,
        ActiveStatus: 'A',
      })
    ).unwrap();
    setPaymentGatewayAccess(paymentGatewayAccessResponse?.data?.data);
    fetchPaymentOptionsData(
      paymentDeviceAccessResponse?.data?.data,
      paymentGatewayAccessResponse?.data?.data
    );
  };
  function updatePaymentDetails(
    paymentDetails,
    paymentDeviceAccess,
    paymentGatewayAccess
  ) {
    const kioskSalesFlow = paymentDetails.find(
      (detail) => detail.FlowName === 'Kiosk Sales'
    );

    if (kioskSalesFlow) {
      kioskSalesFlow.OptionDetails = kioskSalesFlow.OptionDetails.filter(
        (option) => {
          if (option.OptionName === 'Payment Device') {
            return paymentDeviceAccess.length > 0;
          }
          if (option.OptionName === 'Payment Gateway') {
            return paymentGatewayAccess.length > 0;
          }
          return true;
        }
      );
    }

    return paymentDetails;
  }

  const fetchPaymentOptionsData = async (
    paymentDeviceAccess,
    paymentGatewayAccess
  ) => {
    const paymentOptionsResponse = await dispatch(
      getPaymentOptionsData({
        AppId: SessionData.AppId,
        CompId: SessionData.CompId,
        BranchId: SessionData.BranchId,
      })
    ).unwrap();
    if (paymentOptionsResponse?.data?.data?.length > 0) {
      setPaymentDefaultOption(
        paymentOptionsResponse?.data?.data?.[0]?.['KioskDefaultOption']
      );
      setPaymentOptionDetailsBusinessUpi(
        paymentOptionsResponse?.data?.data?.[0].PaymentDetails?.filter(
          (element) => element.FlowName === 'Kiosk Sales'
        )[0]?.OptionDetails?.find((e) => e?.OptionName === 'Business Upi')
      );

      const updatedPaymentDetails = updatePaymentDetails(
        paymentOptionsResponse?.data?.data?.[0].PaymentDetails,
        paymentDeviceAccess,
        paymentGatewayAccess
      );

      updatedPaymentDetails?.forEach((app) => {
        if (app.FlowName === 'Kiosk Sales') {
          app?.OptionDetails?.forEach((option) => {
            if (option.OptionName === 'Pay at the counter') {
              setCounterAvailability(true);
            }
            if (
              (option.OptionName === 'Payment Gateway' ||
                option.OptionName === 'Payment Device') &&
              option.ModeDetails.some((mode) => mode.ModeName === 'UPI')
            ) {
              setUpiAvailability(true);
            }
            if (
              (option.OptionName === 'Payment Gateway' &&
                option.ModeDetails.some(
                  (mode) =>
                    mode.ModeName === 'CreditCard' ||
                    mode.ModeName === 'DebitCard'
                )) ||
              (option.OptionName === 'Payment Device' &&
                option.ModeDetails.some((mode) => mode.ModeName === 'Card'))
            ) {
              setCardAvailability(true);
            }
          });
          setPaymentOptionsData(app);
        }
      });
    }
  };

  const getBookingTypeId = async () => {
    let tempconfigdata = await dispatch(
      getConfigType({ TypeName: 'Booking Type' })
    ).unwrap();
    let configdata = tempconfigdata?.data?.data;
    let checkName = BookingTypeBoth ? 'DineIn,TakeAway' : BookingType;

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

    setSelectedBookingType(filterconfigdata?.ConfigId);
  };

  const TotalCalculation = () => {
    const totalwithouttax = KioskOrderDetails?.reduce((accumulator, card) => {
      return accumulator + parseFloat(card.WithoutTaxRate || 0);
    }, 0);
    setBillAmount(parseFloat(totalwithouttax)?.toFixed(2));
    const totalPrice = KioskOrderDetails?.reduce((accumulator, card) => {
      return accumulator + parseFloat(card.TotalAmt || 0);
    }, 0);
    setTotalNetAmount(parseFloat(totalPrice)?.toFixed(2));
    const totalTaxAmt = KioskOrderDetails?.reduce((accumulator, card) => {
      return accumulator + parseFloat(card.TaxAmt || 0);
    }, 0);

    setTotalTaxAmount(parseFloat(totalTaxAmt)?.toFixed(2));
  };

  function getKioskDefaultOption(
    paymentDetails,
    selectedOption,
    kioskDefaultOption
  ) {
    if (kioskDefaultOption === 'PD') {
      if (selectedOption === 'UPI') {
        const paymentDevice = paymentDetails.OptionDetails.find(
          (option) => option.OptionName === 'Payment Device'
        );
        if (
          paymentDevice &&
          paymentDevice.ModeDetails.some((mode) => mode.ModeName === 'UPI')
        ) {
          return 'PD';
        }
        const paymentGateway = paymentDetails.OptionDetails.find(
          (option) => option.OptionName === 'Payment Gateway'
        );
        if (
          paymentGateway &&
          paymentGateway.ModeDetails.some((mode) => mode.ModeName === 'UPI')
        ) {
          return 'PG';
        }
        const payAtCounter = paymentDetails.OptionDetails.find(
          (option) => option.OptionName === 'Pay at the counter'
        );
        if (
          payAtCounter &&
          payAtCounter.ModeDetails.some((mode) => mode.ModeName === 'UPI')
        ) {
          return 'PC';
        }
      } else if (selectedOption === 'Card') {
        const paymentDevice = paymentDetails.OptionDetails.find(
          (option) => option.OptionName === 'Payment Device'
        );
        if (
          paymentDevice &&
          paymentDevice.ModeDetails.some((mode) => mode.ModeName === 'Card')
        ) {
          return 'PD';
        }
        const paymentGateway = paymentDetails.OptionDetails.find(
          (option) => option.OptionName === 'Payment Gateway'
        );
        if (
          paymentGateway &&
          paymentGateway.ModeDetails.some(
            (mode) =>
              mode.ModeName === 'CreditCard' || mode.ModeName === 'DebitCard'
          )
        ) {
          return 'PG';
        }
      }
    } else if (kioskDefaultOption === 'PG') {
      if (selectedOption === 'UPI') {
        const paymentGateway = paymentDetails.OptionDetails.find(
          (option) => option.OptionName === 'Payment Gateway'
        );
        if (
          paymentGateway &&
          paymentGateway.ModeDetails.some((mode) => mode.ModeName === 'UPI')
        ) {
          return 'PG';
        }
        const paymentDevice = paymentDetails.OptionDetails.find(
          (option) => option.OptionName === 'Payment Device'
        );
        if (
          paymentDevice &&
          paymentDevice.ModeDetails.some((mode) => mode.ModeName === 'UPI')
        ) {
          return 'PD';
        }
        const payAtCounter = paymentDetails.OptionDetails.find(
          (option) => option.OptionName === 'Pay at the counter'
        );
        if (
          payAtCounter &&
          payAtCounter.ModeDetails.some((mode) => mode.ModeName === 'UPI')
        ) {
          return 'PC';
        }
      } else if (selectedOption === 'Card') {
        const paymentGateway = paymentDetails.OptionDetails.find(
          (option) => option.OptionName === 'Payment Gateway'
        );
        if (
          paymentGateway &&
          paymentGateway.ModeDetails.some(
            (mode) =>
              mode.ModeName === 'CreditCard' || mode.ModeName === 'DebitCard'
          )
        ) {
          return 'PG';
        }
        const paymentDevice = paymentDetails.OptionDetails.find(
          (option) => option.OptionName === 'Payment Device'
        );
        if (
          paymentDevice &&
          paymentDevice.ModeDetails.some((mode) => mode.ModeName === 'Card')
        ) {
          return 'PD';
        }
      }
    } else if (kioskDefaultOption === null) {
      if (selectedOption === 'UPI') {
        const paymentDevice = paymentDetails.OptionDetails.find(
          (option) => option.OptionName === 'Payment Device'
        );
        if (
          paymentDevice &&
          paymentDevice.ModeDetails.some((mode) => mode.ModeName === 'UPI')
        ) {
          return 'PD';
        }
        const paymentGateway = paymentDetails.OptionDetails.find(
          (option) => option.OptionName === 'Payment Gateway'
        );
        if (
          paymentGateway &&
          paymentGateway.ModeDetails.some((mode) => mode.ModeName === 'UPI')
        ) {
          return 'PG';
        }
        const payAtCounter = paymentDetails.OptionDetails.find(
          (option) => option.OptionName === 'Pay at the counter'
        );
        if (
          payAtCounter &&
          payAtCounter.ModeDetails.some((mode) => mode.ModeName === 'UPI')
        ) {
          return 'PC';
        }
      } else if (selectedOption === 'Card') {
        const paymentDevice = paymentDetails.OptionDetails.find(
          (option) => option.OptionName === 'Payment Device'
        );
        if (
          paymentDevice &&
          paymentDevice.ModeDetails.some((mode) => mode.ModeName === 'Card')
        ) {
          return 'PD';
        }
        const paymentGateway = paymentDetails.OptionDetails.find(
          (option) => option.OptionName === 'Payment Gateway'
        );
        if (
          paymentGateway &&
          paymentGateway.ModeDetails.some(
            (mode) =>
              mode.ModeName === 'CreditCard' || mode.ModeName === 'DebitCard'
          )
        ) {
          return 'PG';
        }
      }
    }

    return null;
  }

  const checkLast30MinOrder = async (MobileNo) => {
    const response = await dispatch(checkLastOrderTimeLimit({
      MobileNo,
      AppId: SessionData.AppId,
      CompId: SessionData.CompId,
      BranchId: SessionData.BranchId,
    }))?.unwrap();
    return response?.data;
  };

  const handlePaymentOption = async (option) => {

    if (isTimeLimitEnabled) {
      const withinTimeLimit = await checkLast30MinOrder(number);
      if (withinTimeLimit?.IsEligible === false) {
        setMessageData(withinTimeLimit?.response);
        setMessageType('warning');
        return;
      }
    }

    setSelectedPaymentOption(option);
    dispatch(changeSelectedKioskPaymentOption(option));

    if (option == 'UPI' || option == 'Card') {
      const kioskDefaultOption = getKioskDefaultOption(
        PaymentOptionsData,
        option,
        paymentDefalutOption
      );
      if (kioskDefaultOption == 'PD') {
        handleDevice(PaymentOptionsData, option);
      } else if (kioskDefaultOption == 'PG') {
        if (option == 'UPI') {
          const filteredUpiData = {
            ...PaymentOptionsData,
            OptionDetails: PaymentOptionsData.OptionDetails.filter(
              (option) => option.OptionName === 'Payment Gateway'
            ).map((option) => ({
              ...option,
              ModeDetails: option.ModeDetails.filter(
                (mode) => mode.ModeName == 'UPI'
              ),
            })),
          };
          handleGateway(
            PaymentOptionsData,
            option,
            filteredUpiData?.OptionDetails?.[0]?.ModeDetails
          );
        } else {
          const filteredData = {
            ...PaymentOptionsData,
            OptionDetails: PaymentOptionsData.OptionDetails.filter(
              (option) => option.OptionName === 'Payment Gateway'
            ).map((option) => ({
              ...option,
              ModeDetails: option.ModeDetails.filter(
                (mode) => mode.ModeName !== 'UPI'
              ),
            })),
          };

          setPaymentGatewayMethods(
            filteredData?.OptionDetails?.[0]?.ModeDetails
          );
          setselectedOption(0);
          setItemsdata(
            filteredData?.OptionDetails?.[0]?.ModeDetails?.[0]?.MethodDetails
          );
          setShowPaymentGatewayOptions(true);
        }
      } else {
        setMessageType('error');
        setMessageData('Something went wrong');
      }
    } else if (option == 'BU') {
      handleCounterBusinessUpi();
    } else {
      handleCounter();
    }
  };

  async function getModeId(paymentDetails, option, optionName) {
    const paymentDeviceOption = paymentDetails.OptionDetails.find(
      (option) => option.OptionName === optionName
    );
    if (!paymentDeviceOption) {
      return null;
    }
    const selectedMode = paymentDeviceOption.ModeDetails.find(
      (mode) => mode.ModeName === option
    );
    if (!selectedMode) {
      return null;
    }

    return selectedMode.ModeId;
  }
  const clearAllStates = () => {
    setFailedTranId(null);
    dispatch(changeKioskCustomerMobileNo(null));
    dispatch(changePaymentgatewayRedirect(false));
    dispatch(changePGFailedAmt(null));
  };

  const handleCounter = async () => {
    const NotSlectedTypeFind = KioskOrderDetails?.find(
      (a) => a?.BookingType != SelectedBookingType
    );
    let putdevicedata;
    if (FailedTranId || PGfailedId) {
      putdevicedata = {
        CompId: SessionData.CompId,
        BranchId: SessionData.BranchId,
        AppId: SessionData.AppId,
        CustSuppId: CustomerMobileNumber,
        UpdatedBy: SessionData.UserId,
        OrderId: PGfailedId ? PGfailedId : FailedTranId,
        Amount: PGfailedId ? PGfailedAmt : TotalNetAmount,
        PaymentType: 0,
        PaymentOptionType: 'PC',
        PaymentStatus: 'P',
        Debit: 0,
        Credit: 0,
      };
    }
    let postCounterData = {
      CompId: SessionData.CompId,
      BranchId: SessionData.BranchId,
      OrderType: 'O',
      MobileNo: CustomerMobileNumber,
      BookingType:
        NotSlectedTypeFind && !BookingTypeBoth
          ? NotSlectedTypeFind?.BookingType
          : SelectedBookingType,
      ActiveStatus: 'A',
      CreatedBy: SessionData.UserId,
      AppId: SessionData.AppId,
      RefundAmount: 0,
      BillAmount: TotalBillAmount,
      OverallDisc: 0,
      TaxAmount: TotalTaxAmount,
      VatAmount: 0,
      NetAmount: TotalNetAmount,
      PaymentType: 0,
      GivenAmt: 0,
      BalGiven: 0,
      BookingMedia: 'KW',
      PaymentStatus: 'P',
      OrderDtlDetails: KioskOrderDetails,
      Type: 0,
      Debit: 0,
      Credit: 0,
      SalesPaymentType: 'normal',
      PaymentDetail: [
        {
          Amount: TotalNetAmount,
          PaymentOptionType: 'PC',
          PaymentStatus: 'P',
          Debit: 0,
          Credit: 0,
        },
      ],
    };
    let response;
    if (FailedTranId || PGfailedId) {
      response = await dispatch(PutKioskBookingData(putdevicedata)).unwrap();
    } else {
      response = await dispatch(PostKioskBookingData(postCounterData)).unwrap();
    }
    if (response?.data?.statusCode == 1) {
      await dispatch(
        changeOrderId(
          response?.data?.OrderDetails?.[0]?.SalesId
            ? extractLastNumberOrderId(
              response?.data?.OrderDetails?.[0]?.SalesId,
              response?.data?.OrderDetails?.[0]?.FYStatus
            )
            : null
        )
      );
      setPrintOrderDetails([response?.data]);
      setOpen(false);
      if (response?.data?.SMSbody) {
        const postData = {
          body: response?.data?.SMSbody,
        };
        await dispatch(sendSms(postData));
      }
      clearAllStates();
    } else {
      if (
        response?.data?.statusCode == 0 &&
        response?.data?.response == 'Order Limit Exceeded'
      ) {
        setMessageType('error');
        setMessageData('Order Limit Exceeded');
      } else {
        setMessageType('error');
        setMessageData('Something went wrong');
      }
      setTimeout(function () {
        dispatch(changeKioskPageName('initialPage'));
        dispatch(changeAllGlbStatustData());
      }, 2000);
    }
  };
  const handleCounterBusinessUpi = async () => {
    const NotSlectedTypeFind = KioskOrderDetails?.find(
      (a) => a?.BookingType != SelectedBookingType
    );
    let putdevicedata;
    if (FailedTranId || PGfailedId) {
      putdevicedata = {
        CompId: SessionData.CompId,
        BranchId: SessionData.BranchId,
        AppId: SessionData.AppId,
        CustSuppId: CustomerMobileNumber,
        UpdatedBy: SessionData.UserId,
        OrderId: PGfailedId ? PGfailedId : FailedTranId,
        Amount: PGfailedId ? PGfailedAmt : TotalNetAmount,
        PaymentType: 0,
        PaymentOptionType: 'PC',
        PaymentStatus: 'P',
        Debit: 0,
        Credit: 0,
      };
    }
    let BusinessUpi = paymentOptionDetailsBusinessUpi?.ModeDetails?.[0];
    let postCounterData = {
      CompId: SessionData.CompId,
      BranchId: SessionData.BranchId,
      OrderType: 'O',
      MobileNo: CustomerMobileNumber,
      BookingType:
        NotSlectedTypeFind && !BookingTypeBoth
          ? NotSlectedTypeFind?.BookingType
          : SelectedBookingType,
      ActiveStatus: 'A',
      CreatedBy: SessionData.UserId,
      AppId: SessionData.AppId,
      RefundAmount: 0,
      BillAmount: TotalBillAmount,
      OverallDisc: 0,
      TaxAmount: TotalTaxAmount,
      VatAmount: 0,
      NetAmount: TotalNetAmount,
      PaymentType: 0,
      GivenAmt: 0,
      BalGiven: 0,
      BookingMedia: 'KW',
      PaymentStatus: 'P',
      OrderDtlDetails: KioskOrderDetails,
      Type: 0,
      Debit: 0,
      Credit: 0,
      SalesPaymentType: 'normal',
      PaymentDetail: [
        {
          AccountDtl: [],
          Amount: TotalNetAmount,
          Credit: 0,
          Debit: 0,
          PaymentOptionType: 'BU',
          PaymentStatus: 'P',
          PaymentType: BusinessUpi?.ModeId || 0,
          ModeOfPayment: null,
          MerchantId: BusinessUpi?.MerchantId,
        },
      ],
    };
    let response;
    if (FailedTranId || PGfailedId) {
      response = await dispatch(PutKioskBookingData(putdevicedata)).unwrap();
    } else {
      response = await dispatch(PostKioskBookingData(postCounterData)).unwrap();
    }
    if (response?.data?.statusCode == 1) {
      console.log(response?.data?.OrderDetails?.[0]?.SalesId, 'hhhh');

      setOpen(false);
      dispatch(
        changeOrderId(
          response?.data?.OrderDetails?.[0]?.SalesId
            ? extractLastNumberOrderId(
              response?.data?.OrderDetails?.[0]?.SalesId,
              response?.data?.OrderDetails?.[0]?.FYStatus
            )
            : null
        )
      );
      let OrderId = response?.data?.OrderId;
      setTransctionId(OrderId);
      setBusinessUPI(true);

      setpaymentUrl(response?.data?.PaymentPageLink);
    } else {
      if (
        response?.data?.statusCode == 0 &&
        response?.data?.response == 'Order Limit Exceeded'
      ) {
        setMessageType('error');
        setMessageData('Order Limit Exceeded');
      } else {
        setMessageType('error');
        setMessageData('Something went wrong');
      }
      setTimeout(function () {
        dispatch(changeKioskPageName('initialPage'));
        dispatch(changeAllGlbStatustData());
      }, 2000);
    }
  };

  const handleDevice = async (paymentDetails, option) => {
    const paymentDeviceDetails = await dispatch(
      getPaymentGatewayDetails({
        AppId: SessionData.AppId,
        CompId: SessionData.CompId,
        BranchId: SessionData.BranchId,
        DetailType: 'D',
      })
    ).unwrap();
    const NotSlectedTypeFind = KioskOrderDetails?.find(
      (a) => a?.BookingType != SelectedBookingType
    );
    let putdevicedata;
    const modeId = await getModeId(paymentDetails, option, 'Payment Device');
    if (FailedTranId || PGfailedId) {
      putdevicedata = {
        CompId: SessionData.CompId,
        BranchId: SessionData.BranchId,
        AppId: SessionData.AppId,
        CustSuppId: CustomerMobileNumber,
        UpdatedBy: SessionData.UserId,
        PaymentType: modeId,
        OrderId: PGfailedId ? PGfailedId : FailedTranId,
        Amount: PGfailedId ? PGfailedAmt : TotalNetAmount,
        PaymentOptionType: 'PD',
        PaymentStatus: 'P',
        Debit: 0,
        Credit: 0,
        ModeOfPayment: null,
        AccountDtl: paymentDeviceDetails?.data?.data,
      };
    }
    let postDeviceData = {
      CompId: SessionData.CompId,
      BranchId: SessionData.BranchId,
      OrderType: 'O',
      MobileNo: CustomerMobileNumber,
      BookingType:
        NotSlectedTypeFind && !BookingTypeBoth
          ? NotSlectedTypeFind?.BookingType
          : SelectedBookingType,
      ActiveStatus: 'A',
      CreatedBy: SessionData.UserId,
      AppId: SessionData.AppId,
      RefundAmount: 0,
      BillAmount: TotalBillAmount,
      OverallDisc: 0,
      TaxAmount: TotalTaxAmount,
      VatAmount: 0,
      NetAmount: TotalNetAmount,
      PaymentType: 0,
      GivenAmt: 0,
      BalGiven: 0,
      BookingMedia: 'KW',
      PaymentStatus: 'P',
      OrderDtlDetails: KioskOrderDetails,
      Type: 0,
      Debit: 0,
      Credit: 0,
      SalesPaymentType: 'normal',
      PaymentDetail: [
        {
          Amount: TotalNetAmount,
          PaymentType: modeId,
          PaymentOptionType: 'PD',
          PaymentStatus: 'P',
          Debit: 0,
          Credit: 0,
          ModeOfPayment: null,
          AccountDtl: paymentDeviceDetails?.data?.data,
        },
      ],
    };
    let response;
    if (FailedTranId || PGfailedId) {
      response = await dispatch(PutKioskBookingData(putdevicedata)).unwrap();
    } else {
      response = await dispatch(PostKioskBookingData(postDeviceData)).unwrap();
    }
    if (response?.data?.statusCode == 1) {
      let PaymentOrderDetails = response?.data?.PaymentOrderDtl?.filter(
        (item) => item.PaymentOptionType == 'PD' && item.PaymentStatus == 'P'
      );
      let PaymentOrderIndividualDetails =
        PaymentOrderDetails?.length == 1 ? PaymentOrderDetails?.[0] : [];
      let paymentDeviceData = {
        TransactionNumber: PaymentOrderIndividualDetails?.['PaymentOrderId'],
        SequenceNumber: 1,
        AllowedPaymentMode:
          option === 'Card' ? '1' : option === 'UPI' ? '10' : '',
        Amount: `${parseInt(TotalNetAmount) * 100}`,
        ClientID: paymentDeviceAccess?.[0]?.['ClientId'],
        StoreID: paymentDeviceAccess?.[0]?.['StoreId'],
        UserID: SessionData?.UserId,
        MerchantID: paymentDeviceAccess?.[0]?.['MerchantId'],
        SecurityToken: paymentDeviceAccess?.[0]?.['SecurityToken'],
        IMEI: paymentDeviceAccess?.[0]?.['IMEI'],
        AutoCancelDurationInMinutes:
          paymentDeviceAccess?.[0]?.['AutoCancelDurationInMinutes'],
      };
      let apiresponse = await dispatch(
        postPaymentDevice(paymentDeviceData)
      ).unwrap();
      if (apiresponse?.ResponseMessage?.toLowerCase() === 'approved') {
        let pendingPaymentList = {
          MerchantID: paymentDeviceAccess?.[0]?.['MerchantId'],
          SecurityToken: paymentDeviceAccess?.[0]?.['SecurityToken'],
          ClientID: paymentDeviceAccess?.[0]?.['ClientId'],
          StoreID: paymentDeviceAccess?.[0]?.['StoreId'],
          IMEI: paymentDeviceAccess?.[0]?.['IMEI'],
          PlutusTransactionReferenceId:
            apiresponse?.PlutusTransactionReferenceID,
          PaymentOrderId: PaymentOrderIndividualDetails?.['PaymentOrderId'],
          UpdatedBy: SessionData?.UserId,
        };
        await dispatch(PutPendingPaymentList(pendingPaymentList)).unwrap();
        let isApproved = false;
        const startTime = Date.now();
        let postPaymentDeviceData = {
          MerchantID: paymentDeviceAccess?.[0]?.['MerchantId'],
          SecurityToken: paymentDeviceAccess?.[0]?.['SecurityToken'],
          ClientID: paymentDeviceAccess?.[0]?.['ClientId'],
          StoreID: paymentDeviceAccess?.[0]?.['StoreId'],
          IMEI: paymentDeviceAccess?.[0]?.['IMEI'],
          PlutusTransactionReferenceID:
            apiresponse?.PlutusTransactionReferenceID,
        };
        while (!isApproved) {
          let ApiResponseget = await dispatch(
            getPaymentDeviceResponse(postPaymentDeviceData)
          ).unwrap();
          if (
            ApiResponseget?.ResponseMessage?.toLowerCase() === 'txn approved'
          ) {
            let putPaymentDeviceData = {
              OrderBookingId: PaymentOrderIndividualDetails?.OrderId,
              OrderId: PaymentOrderIndividualDetails?.PaymentOrderId,
              PaymentStatus: 'S',
              Amount: PaymentOrderIndividualDetails?.Amount,
              AccountDtl: [paymentDeviceDetails?.data?.data],
              ResponseDtl: [ApiResponseget],
              PaymentType: PaymentOrderIndividualDetails?.PaymentType,
              UpdatedBy: SessionData?.UserId,
            };
            let putPaymentDeviceResponse = await dispatch(
              PutBookingPaymentStatusChange(putPaymentDeviceData)
            ).unwrap();
            if (putPaymentDeviceResponse?.data?.statusCode === 1) {
              setDevicePaymentStatus(true);
              await dispatch(
                changeOrderId(
                  putPaymentDeviceResponse?.data?.OrderDetails?.[0]?.SalesId
                    ? extractLastNumberOrderId(
                      putPaymentDeviceResponse?.data?.OrderDetails?.[0]
                        ?.SalesId,
                      putPaymentDeviceResponse?.data?.OrderDetails?.[0]
                        ?.FYStatus
                    )
                    : null
                )
              );
              setPrintOrderDetails([putPaymentDeviceResponse?.data]);
              clearAllStates();
            } else {
              setMessageType('error');
              setMessageData('Something went wrong, Please Contact Admin');
              setTimeout(function () {
                dispatch(changeKioskPageName('initialPage'));
                dispatch(changeAllGlbStatustData());
              }, 2000);
            }
            isApproved = true;
            console.log('Transaction Approved!');
            break;
          }

          if (
            Date.now() - startTime >
            paymentDeviceAccess?.[0]?.['AutoCancelDurationInMinutes'] * 60000
          ) {
            console.error('Transaction not approved within 1 minute.');
            let putPaymentDeviceFailureData = {
              OrderBookingId: PaymentOrderIndividualDetails?.OrderId,
              OrderId: PaymentOrderIndividualDetails?.PaymentOrderId,
              PaymentStatus: 'F',
              Amount: PaymentOrderIndividualDetails?.Amount,
              AccountDtl: [paymentDeviceDetails?.data?.data],
              ResponseDtl: [ApiResponseget],
              PaymentType: PaymentOrderIndividualDetails?.PaymentType,
              UpdatedBy: SessionData?.UserId,
            };
            await dispatch(
              PutBookingPaymentStatusChange(putPaymentDeviceFailureData)
            ).unwrap();

            if (response?.data?.PaymentOrderDtl?.length < 2) {
              setFailedTranId(PaymentOrderIndividualDetails?.OrderId);
              setMessageType('error');
              setMessageData('Payment Failed, Try again..');
            } else {
              setMessageType('error');
              setMessageData(
                'Your transaction limt exceeds, Please contact admin'
              );
              setTimeout(function () {
                dispatch(changeKioskPageName('initialPage'));
                dispatch(changeAllGlbStatustData());
              }, 2000);
            }
            setSelectedPaymentOption(null);
            break;
          }

          await new Promise((resolve) => setTimeout(resolve, 3000));
        }
      } else {
        let putPaymentDeviceFailureData = {
          OrderBookingId: PaymentOrderIndividualDetails?.OrderId,
          OrderId: PaymentOrderIndividualDetails?.PaymentOrderId,
          PaymentStatus: 'F',
          Amount: PaymentOrderIndividualDetails?.Amount,
          AccountDtl: [paymentDeviceDetails?.data?.data],
          ResponseDtl: [],
          PaymentType: PaymentOrderIndividualDetails?.PaymentType,
          UpdatedBy: SessionData?.UserId,
        };
        await dispatch(
          PutBookingPaymentStatusChange(putPaymentDeviceFailureData)
        ).unwrap();

        if (response?.data?.PaymentOrderDtl?.length < 2) {
          setFailedTranId(PaymentOrderIndividualDetails?.OrderId);
          setMessageType('error');
          setMessageData('Payment Failed, Try again..');
        } else {
          setMessageType('error');
          setMessageData('Your transaction limt exceeds, Please contact admin');
          setTimeout(function () {
            dispatch(changeKioskPageName('initialPage'));
            dispatch(changeAllGlbStatustData());
          }, 2000);
        }
        setSelectedPaymentOption(null);
      }
      if (response?.data?.SMSbody) {
        const postData = {
          body: response?.data?.SMSbody,
        };
        await dispatch(sendSms(postData));
      }
    } else {
      if (
        response?.data?.statusCode == 0 &&
        response?.data?.response == 'Order Limit Exceeded'
      ) {
        setMessageType('error');
        setMessageData('Order Limit Exceeded');
      } else {
        setMessageType('error');
        setMessageData('Something went wrong');
      }
      setTimeout(function () {
        dispatch(changeKioskPageName('initialPage'));
        dispatch(changeAllGlbStatustData());
      }, 2000);
    }
  };

  const handleGateway = async (paymentDetails, option, upiData) => {
    let bankDetails = {
      PayOpt: paymentGatewayMethods?.[selectedOption]?.PayOpt,
      CardType: paymentGatewayMethods?.[selectedOption]?.CardType,
      cardName: cardName,
    };
    if (
      (bankDetails?.PayOpt != undefined &&
        bankDetails?.CardType != undefined &&
        bankDetails?.cardName != undefined &&
        value !== undefined) ||
      option == 'UPI'
    ) {
      const paymentGatewayDetails = await dispatch(
        getPaymentGatewayDetails({
          AppId: SessionData.AppId,
          CompId: SessionData.CompId,
          BranchId: SessionData.BranchId,
          DetailType: 'P',
        })
      ).unwrap();
      const NotSlectedTypeFind = KioskOrderDetails?.find(
        (a) => a?.BookingType != SelectedBookingType
      );

      const modeId = await getModeId(
        paymentDetails,
        option == 'UPI'
          ? option
          : paymentGatewayMethods?.[selectedOption]?.ModeName,
        'Payment Gateway'
      );
      let putGatewaydata;
      if (FailedTranId || PGfailedId) {
        putGatewaydata = {
          CompId: SessionData.CompId,
          BranchId: SessionData.BranchId,
          AppId: SessionData.AppId,
          CustSuppId: CustomerMobileNumber,
          UpdatedBy: SessionData.UserId,
          OrderId: PGfailedId ? PGfailedId : FailedTranId,
          PaymentType: modeId,
          Amount: PGfailedId ? PGfailedAmt : TotalNetAmount,
          PaymentOptionType: 'PG',
          PaymentStatus: 'P',
          Debit: 0,
          Credit: 0,
          ModeOfPayment: null,
          AccountDtl: paymentGatewayDetails?.data?.data,
        };
      }
      let postGatewayData = {
        CompId: SessionData.CompId,
        BranchId: SessionData.BranchId,
        OrderType: 'O',
        MobileNo: CustomerMobileNumber,
        BookingType:
          NotSlectedTypeFind && !BookingTypeBoth
            ? NotSlectedTypeFind?.BookingType
            : SelectedBookingType,
        ActiveStatus: 'A',
        CreatedBy: SessionData.UserId,
        AppId: SessionData.AppId,
        RefundAmount: 0,
        BillAmount: TotalBillAmount,
        OverallDisc: 0,
        TaxAmount: TotalTaxAmount,
        VatAmount: 0,
        NetAmount: TotalNetAmount,
        PaymentType: 0,
        GivenAmt: 0,
        BalGiven: 0,
        BookingMedia: 'KW',
        PaymentStatus: 'P',
        OrderDtlDetails: KioskOrderDetails,
        Type: 0,
        Debit: 0,
        Credit: 0,
        SalesPaymentType: 'normal',
        PaymentDetail: [
          {
            Amount: TotalNetAmount,
            PaymentType: modeId,
            PaymentOptionType: 'PG',
            PaymentStatus: 'P',
            Debit: 0,
            Credit: 0,
            ModeOfPayment: null,
            AccountDtl: paymentGatewayDetails?.data?.data,
          },
        ],
      };
      let response;
      if (FailedTranId || PGfailedId) {
        response = await dispatch(PutKioskBookingData(putGatewaydata)).unwrap();
      } else {
        response = await dispatch(
          PostKioskBookingData(postGatewayData)
        ).unwrap();
      }
      if (response?.data?.statusCode == 1) {
        let PaymentOrderDetails = response?.data?.PaymentOrderDtl?.filter(
          (item) => item.PaymentOptionType == 'PG' && item.PaymentStatus == 'P'
        );
        let PaymentOrderIndividualDetails =
          PaymentOrderDetails?.length == 1 ? PaymentOrderDetails?.[0] : [];
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = `${CustomPaymentUrl}/ccavRetailRequestHandler`;
        form.style.display = 'none'; // Hide the form
        console.log('upiDataupiData', upiData);
        const data1 = {
          merchant_id: paymentGatewayAccess?.[0]?.['MerchantId'],
          order_id: PaymentOrderIndividualDetails?.PaymentOrderId,
          currency: 'INR',
          amount: TotalNetAmount,
          redirect_url:
            'https://pozo.app/CustomPaymentGateway/CustomPaymentGateway/ccavRetailResponseHandler',
          cancel_url:
            'https://pozo.app/CustomPaymentGateway/CustomPaymentGateway/ccavRetailResponseHandler',
          payment_option:
            option == 'UPI'
              ? upiData?.[0]?.PayOpt
              : paymentGatewayMethods?.[selectedOption]?.PayOpt,
          card_type:
            option == 'UPI'
              ? upiData?.[0]?.CardType
              : paymentGatewayMethods?.[selectedOption]?.CardType,
          card_name: option == 'UPI' ? 'UPI' : cardName,
          data_accept:
            option == 'UPI'
              ? upiData?.[0]?.MethodDetails?.[0]?.DataAcceptedAt == 'CCAvenue'
                ? 'Y'
                : 'N'
              : dataAccept,
          language: 'EN',
          billing_name: 'User',
          billing_address: 'xyz',
          billing_city: 'xyz',
          billing_state: 'xyz',
          billing_zip: '000000',
          billing_country: 'India',
          billing_tel: CustomerMobileNumber,
          billing_email: 'xyz@gmail.com',
          delivery_name: '',
          delivery_address: SessionData?.AppId,
          delivery_city: 'K',
          delivery_zip: SessionData?.BranchId,
          delivery_country: modeId,
          delivery_tel: SessionData?.MobileNo,
          merchant_param1: SessionData?.userName,
          merchant_param2: PaymentOrderIndividualDetails?.OrderId,
          merchant_param3: SessionData?.UserId,
          merchant_param4: SessionData?.CompId,
          merchant_param5: 'paymentRetailHandler.html',
          promo_code: '',
          customer_identifier: '',
          workingKey: paymentGatewayAccess?.[0]?.['WorkingKey'], // Include the working key
          accessCode: paymentGatewayAccess?.[0]?.['AccessCode'],
        };
        console.log('data1data1', data1);
        Object.keys(data1).forEach((key) => {
          const input = document.createElement('input');
          input.type = 'hidden';
          input.name = key;
          input.value = encryptedValuesFun(data1[key]);
          form.appendChild(input);
        });

        document.body.appendChild(form);

        form.submit();
        if (response?.data?.SMSbody) {
          const postData = {
            body: response?.data?.SMSbody,
          };
          await dispatch(sendSms(postData));
        }
      } else {
        if (
          response?.data?.statusCode == 0 &&
          response?.data?.response == 'Order Limit Exceeded'
        ) {
          setMessageType('error');
          setMessageData('Order Limit Exceeded');
        } else {
          setMessageType('error');
          setMessageData('Something went wrong');
        }
        setTimeout(function () {
          dispatch(changeKioskPageName('initialPage'));
          dispatch(changeAllGlbStatustData());
        }, 2000);
      }
    } else {
      setMessageType('error');
      setMessageData('Please Select the Payment');
    }
  };
  const Print = async () => {
    const style = `<style> 
    *{
      font-family:Poppins;
    }

    .Kiosk-Print-body{  
      height: 100%;
      margin: 0vw 0vh;
      padding: 1vw 2vh;
    }

    
    .kiosk-print-title {
      font-size: 19px;
      font-weight: 600;
      font-family: Gilroy;
      margin-bottom: -10px;
      text-align:center;
    }

    .kiosk-print-Add {
      font-size: 12px;
      font-family: Poppins;
      margin-bottom: -5px;
    }

    .kiosk-print-GST {
      font-size: 9px;
      font-family: Poppins;
    }

    .kiosk-print-top {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
    }

    .kiosk-print-bill {
      display: flex;
      flex-direction: column;
      font-family: Gilroy;
    }
    

    .kiosk-print-bold{
      font-size: 12px;
      font-family: Poppins;
      letter-spacing: 1px;
    }
    
     

    </style>`;
    await printDiv('Kiosk-Print', style);
    await dispatch(changeKioskPageName('paymentPage'));
  };
  const PrintDevice = 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',
    };

    const selectedStyle =
      stylesMap[
      printerTemplateStyle == undefined ? 'Style 13' : printerTemplateStyle
      ];
    if (selectedStyle) {
      await Promise.all(
        PrintOrderDetails?.[0]?.OrderDetails?.map(
          async (orderDetail, index) => {
            await printDiv(`${selectedStyle}-${index}`, style);

            if (orderDetail?.BookingTypeName !== 'Dine In') {
              const tokensToPrint = orderDetail?.productDetails?.map(
                async (item, idx) => {
                  if (item.TokenAvailable === 'Y') {
                    await TokenPrint(`${idx}-${item?.ProdId}`);
                  }
                }
              );

              if (tokensToPrint?.length > 0) {
                await Promise.all(tokensToPrint);
              }
            }
          }
        )
      );

      setPrintOrderDetails([]);
      await dispatch(changeKioskPageName('paymentPage'));
    }
    await dispatch(changeKioskPageName('initialPage'));
    await dispatch(changeAllGlbStatustData());
    ClearAllGlobalStateDatas();
  };
  const TokenPrint = async (index) => {
    try {
      console.log(`Starting token print for index ${index}`);

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

  const HandleCloseModal = () => {
    if (FailedTranId || PGfailedId) {
      showDeleteConfirm();
    } else {
      props.handleCancel();
    }
  };
  const { confirm } = Modal;
  const showDeleteConfirm = () => {
    confirm({
      title: 'Are you sure cancel this order?',
      icon: <ExclamationCircleFilled />,
      content: '',
      okText: 'Yes',
      okType: 'danger',
      cancelText: 'No',
      onOk() {
        console.log('OK');
        props.handleCancel();
        dispatch(changeKioskPageName('initialPage'));
        dispatch(changeAllGlbStatustData());
        dispatch(changePaymentgatewayRedirect(false));
        dispatch(changeKioskCustomerMobileNo(null));
        dispatch(changePGFailedTransId(null));
        dispatch(
          getKioskTemplate({
            AppId: SessionData.AppId,
            CompId: SessionData.CompId,
            BranchId: SessionData.BranchId,
          })
        ).unwrap();
        dispatch(
          getProductCategories({
            AppId: SessionData.AppId,
            CompId: SessionData.CompId,
            BranchId: SessionData.BranchId,
          })
        ).unwrap();
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  };
  const ClearAllGlobalStateDatas = () => {
    setSelectedPaymentOption(null);
    props.handleCancel();
    clearAllStates();
  };

  const sendOTP = async () => {
    const valid = isIndianMobile(number);
    if (valid) {
      if (isTimeLimitEnabled) {
        const withinTimeLimit = await checkLast30MinOrder(number);
        if (withinTimeLimit?.IsEligible === false) {
          setMessageData(withinTimeLimit?.response);
          setMessageType('warning');
          return;
        }
      }
    } else {
      setMessageData('Please enter valid mobile No.');
      setMessageType('warning');
      return
    }
    try {
      setOtpIndex(0);
      setOtpSent(true);
      let response = await dispatch(sendupiotp({
        "MobileNo": number,
        "CreatedBy": 0
      }))?.unwrap()
      if (response?.data?.statusCode == 1) {
        setMessageData('OTP sent to your mobile number');
        setMessageType('success');
        setOTPNumber(response?.data?.OTP);
        startResendTimer();
      }
    }
    catch (error) {
      console.log(error)
    }
  }

  const startResendTimer = () => {
    setCanResend(false);
    setResendTimer(30);
    const timer = setInterval(() => {
      setResendTimer((prev) => {
        if (prev <= 1) {
          clearInterval(timer);
          setCanResend(true);
          return 0;
        }
        return prev - 1;
      });
    }, 1000);
  }

  const handleOtpChange = (e, index) => {
    const value = e.target.value.replace(/\D/g, '');

    const newOtp = [...otpInput];
    newOtp[index] = value;
    setOtpInput(newOtp);
  };

  const verifyOtp = () => {
    const enteredOtp = otpInput.join('');

    if (enteredOtp === otpNumber?.toString()) {
      setMessageType('success');
      setMessageData('OTP Verified Successfully');
      setOtpSent(false);
      setOtpInput(['', '', '', '']);
      setShowPaymentMethods(true);
      setOtpVerified(true);
    } else {
      setMessageType('error');
      setMessageData('Invalid OTP');
    }
  };

  return (
    <div>
      <Messages
        messageType={messageType}
        messageData={messageData}
        onComplete={onComplete}
      />
      <DefaultModal
        open={open}
        handleCancel={!selectedPaymentOption && HandleCloseModal}
        footer={false}
        width={width > 768 ? 800 : 600}
        children={
          showPaymentGatewayOptions ? (
            <div className="paymentCardMain">
              <div className="cardChooice">
                <div className="cardoption">
                  <div>
                    <div
                      className="titleofpay"
                      style={{
                        textAlign: 'center',
                        width: '100%',
                        fontSize: '22px',
                        fontWeight: '500',
                      }}
                    >
                      Payment Options
                    </div>
                  </div>
                </div>
                {paymentGatewayMethods?.map((item, index) => (
                  <div
                    className="cardoption"
                    key={index}
                    onClick={() => {
                      setselectedOption(index);
                      setItemsdata(
                        paymentGatewayMethods?.[index]?.MethodDetails
                      );
                      setValue(undefined);
                    }}
                    style={{
                      borderLeft:
                        selectedOption === index ? '5px solid #52C41A' : 'none',
                      backgroundColor:
                        selectedOption === index ? ' #52c41a2e' : ' ',
                      color: selectedOption === index ? ' #000' : ' ',
                    }}
                  >
                    <div>
                      {item?.ModeName == 'EMI' && <img src={Emi} alt="emi" />}
                      {item?.ModeName == 'CreditCard' && (
                        <img src={CrediCard} alt="CrediCard" />
                      )}
                      {item?.ModeName == 'DebitCard' && (
                        <img src={DebitCard} alt="DebitCard" />
                      )}
                      {item?.ModeName == 'NetBanking' && (
                        <img src={NetBank} alt="NetBanking" />
                      )}
                      {item?.ModeName == 'CashCard' && (
                        <img src={CashCard} alt="CashCard" />
                      )}
                      {item?.ModeName == 'Wallet' && (
                        <img src={Wallet} alt="Wallet" />
                      )}
                    </div>
                    <div
                      style={{
                        display: 'flex',
                        alignItems: 'flex-start',
                        flexDirection: 'column',
                      }}
                    >
                      <div className="cardname">{item?.ModeName}</div>
                      <div className="cardname2">
                        {' '}
                        Google Pay PhonePe & More
                      </div>
                    </div>
                  </div>
                ))}
              </div>

              <div className="bankChooice">
                <div className="search-bar">
                  <div className="searchbar">
                    <CiSearch />
                    <Search
                      placeholder={
                        paymentGatewayMethods?.[selectedOption]?.CardType ==
                          'CRDC' ||
                          paymentGatewayMethods?.[selectedOption]?.CardType ==
                          'DBCRD'
                          ? 'Search Your Card'
                          : paymentGatewayMethods?.[selectedOption]?.CardType ==
                            'WLT'
                            ? 'Search Your Wallet'
                            : 'Search Your Bank'
                      }
                      onSearchChange={onSearchChange}
                    />
                  </div>
                  <div className="choosecardMain">
                    <div className="choosecard">
                      <div className="bankname">
                        <Collapse items={items} defaultActiveKey={['1']} />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div className="buttonOfpay">
                <div className="inr">INR ₹ {TotalNetAmount}</div>
                <Buttons
                  type="submit"
                  buttonText="PROCEED TO PAY"
                  className="sbmt-btn"
                  handleSubmit={() => {
                    handleGateway(PaymentOptionsData, 'Card', []);
                  }}
                  icon={<ArrowRightOutlined />}
                ></Buttons>
              </div>
            </div>
          ) : (
            <div className="paymentModal-Master">
              <h4 className="Titlepayment">{isOtpEnabled && !showPaymentMethods
                ? "Verify Mobile Number"
                : "PAYMENT"}</h4>
              <div className="paymentModal_main">
                {!otpSent && !otpVerifed && (<>
                  <div className="prompt">
                    <p style={{ fontFamily: 'Poppins', fontWeight: '600' }}>
                      Get your order bill on your mobile <br />
                      via SMS / Whatsapp
                    </p>
                  </div>

                  <div
                    className={`KioskPayment-inputModal ${number ? 'green-border' : ''}`}
                  >
                    <input type="text" value={number} readOnly />
                    {number?.length === 10 && !isIndianMobile(number) && <div className='input-err'>Please Enter Valid Mobile Number</div>}
                  </div>


                  {/* input boxxes */}
                  <div
                    className="KioskPayment-dailpad-main"
                    style={{
                      pointerEvents: selectedPaymentOption && 'none',
                      opacity: selectedPaymentOption && '40%',
                    }}
                  >
                    <div
                      className="Kiosk-dailpadModal"
                      style={{ backgroundColor: getKioskLightColourdata }}
                    >
                      <div className="KioskPayment-dailpad-1">
                        <p onClick={() => setNumberFun(1)}>1</p>
                        <p onClick={() => setNumberFun(2)}>2</p>
                        <p onClick={() => setNumberFun(3)}>3</p>
                      </div>
                      <div className="KioskPayment-dailpad-2">
                        <p onClick={() => setNumberFun(4)}>4</p>
                        <p onClick={() => setNumberFun(5)}>5</p>
                        <p onClick={() => setNumberFun(6)}>6</p>
                      </div>
                      <div className="KioskPayment-dailpad-3">
                        <p onClick={() => setNumberFun(7)}>7</p>
                        <p onClick={() => setNumberFun(8)}>8</p>
                        <p onClick={() => setNumberFun(9)}>9</p>
                      </div>
                      <div className="KioskPayment-dailpad-4">
                        <p onClick={handleBackspace}>
                          <HiOutlineBackspace
                            size={30}
                            style={{ marginBottom: '-2px' }}
                          />
                        </p>
                        <p onClick={() => setNumberFun(0)}>0</p>
                        <p style={{ background: 'none' }}></p>
                      </div>
                    </div>
                  </div>
                  {isOtpEnabled && (
                    <>
                      <button className='KioskOPTBTn'
                        // disabled={number?.length === 10}
                        onClick={() => sendOTP()}
                      >Get OTP</button>
                    </>
                  )}
                </>)}
                {(isOtpEnabled && otpSent) && (
                  <div className="otp-section">

                    {/* Mobile Number + Edit */}
                    <div className="otp-mobile-row">
                      <span className="otp-mobile-number">{number}</span>
                      <button
                        className="otp-edit-btn"
                        onClick={() => {
                          setOtpSent(false);
                          setOtpInput(['', '', '', '']);
                          setShowPaymentMethods(false);
                        }}
                      >
                        Edit
                      </button>
                    </div>

                    {/* 4 Digit OTP Input */}
                    <div className="otp-input-container">
                      {otpInput.map((digit, index) => (
                        <input
                          key={index}
                          type="text"
                          value={digit}
                          className={`otp-box ${index === otpIndex ? 'active' : ''}`}
                          onClick={() => setOtpIndex(index)}
                          readOnly
                        />
                      ))}
                    </div>
                    <div className="KioskPayment-dailpad-main">
                      <div
                        className="Kiosk-dailpadModal"
                        style={{ backgroundColor: getKioskLightColourdata }}
                      >
                        <div className="KioskPayment-dailpad-1">
                          <p onClick={() => handleOtpNumber(1)}>1</p>
                          <p onClick={() => handleOtpNumber(2)}>2</p>
                          <p onClick={() => handleOtpNumber(3)}>3</p>
                        </div>
                        <div className="KioskPayment-dailpad-2">
                          <p onClick={() => handleOtpNumber(4)}>4</p>
                          <p onClick={() => handleOtpNumber(5)}>5</p>
                          <p onClick={() => handleOtpNumber(6)}>6</p>
                        </div>
                        <div className="KioskPayment-dailpad-3">
                          <p onClick={() => handleOtpNumber(7)}>7</p>
                          <p onClick={() => handleOtpNumber(8)}>8</p>
                          <p onClick={() => handleOtpNumber(9)}>9</p>
                        </div>
                        <div className="KioskPayment-dailpad-4">
                          <p onClick={handleOtpBackspace}>
                            <HiOutlineBackspace size={30} />
                          </p>
                          <p onClick={() => handleOtpNumber(0)}>0</p>
                          <p style={{ background: 'none' }}></p>
                        </div>
                      </div>
                    </div>

                    {/* Buttons */}
                    <div className="otp-buttons">
                      <button
                        className="verify-btn"
                        disabled={otpInput.join('').length !== 4}
                        onClick={verifyOtp}
                      >
                        Verify
                      </button>

                      <button
                        className="resend-btn"
                        disabled={!canResend}
                        onClick={sendOTP}
                      >
                        {canResend ? "Resend OTP" : `Resend in ${resendTimer}s`}
                      </button>
                    </div>

                  </div>
                )}
                {(!isOtpEnabled || (showPaymentMethods && otpVerifed)) && <>
                  <p className="choiseTitle">Select Payment Method</p>
                  {console.log('selectedOption', selectedPaymentOption)}
                  <div
                    className="paymentChoise"
                    style={{
                      pointerEvents:
                        (!isIndianMobile(number) || selectedPaymentOption) &&
                        'none',
                      opacity:
                        (!isIndianMobile(number) || selectedPaymentOption) && '40%',
                    }}
                  >
                    {/* {upiAvailability && (
                    <div
                      className="upi"
                      onClick={() => handlePaymentOption('UPI')}
                    >
                      <img src={UPI} alt="" width={80} />
                      <p>UPI</p>
                    </div>
                  )} */}
                    {/* {cardAvailability && (
                    <div
                      className="upi"
                      onClick={() => handlePaymentOption('Card')}
                    >
                      <img src={Card} alt="" width={60} />
                      <p>CARD</p>
                    </div>
                  )} */}
                    {counterAvailability && (
                      <div
                        className="upi"
                        onClick={() => handlePaymentOption('Counter')}
                      >
                        <MdOutlinePayments size={50} opacity={0.5} />
                        <p style={{ fontSize: '12px', textAlign: 'center' }}>
                          PAY AT THE COUNTER
                        </p>
                      </div>
                    )}
                    {paymentOptionDetailsBusinessUpi && (
                      <div
                        className="upi"
                        onClick={() => handlePaymentOption('BU')}
                      >
                        <img src={UPI} alt="" width={60} />
                        <p> UPI</p>
                      </div>
                    )}
                    {!paymentOptionDetailsBusinessUpi && !counterAvailability && (
                      <div className="payment-error-msg">
                        Please Set Payment Options Contact Admin
                      </div>
                    )}
                  </div>
                </>}
              </div>
            </div>
          )
        }
      ></DefaultModal>
      {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}
            />
            {selectedPaymentOption == 'Counter' && (
              <KioskBookingReceipt
                BranchDetails={orderDetail}
                CreatedDate={orderDetail?.CreatedDate}
                OrderId={
                  orderDetail?.SalesId &&
                  extractLastNumberOrderId(
                    orderDetail?.SalesId,
                    orderDetail?.FYStatus
                  )
                }
              />
            )}
          </div>
        ))}
      {/* {paymentUrl != null && (
        <div className="payment-modal">
          <div className="modal-header">
            <h2>Complete Payment</h2>
            <button
              className="paymentclose-btn"
              onClick={() => {
                props.handleCancel();
                setpaymentUrl(null);
              }}
            >
              ✖
            </button>
          </div>

          <iframe
            src={paymentUrl}
            title="Payment"
            className="payment-frame"
          ></iframe>
        </div>
      )} */}

      <DefaultModal
        open={businessUPI}
        handleCancel={() => setShowCancelConfirm(true)}
        footer={false}
        width={500}
        children={
          <>
            <PaymentGatewayEmbedded
              orderId={TransctionId}
              setBusinessUPIOrderId={setTransctionId}
              businessUPILink={paymentUrl}
              setBusinessUPI={setBusinessUPI}
              setPaymentSuccess={setPaymentSuccess}
              paymentSucess={paymentSucess}
              ClearAllGlobalStateDatas={ClearAllGlobalStateDatas}
              // CustomerDisplay={CustomerDisplay}
              ref={paymentGatewayRef}
            />
          </>
        }
      />
      {showCancelConfirm && (
        <Modal
          open={showCancelConfirm}
          title="Cancel Payment"
          onOk={() => {
            paymentGatewayRef.current?.clearPolling();
            setBusinessUPI(false);
            setShowCancelConfirm(false);
            ClearAllGlobalStateDatas();
          }}
          onCancel={() => setShowCancelConfirm(false)}
          okText="Yes"
          cancelText="No"
        >
          Do you want to cancel the payment?
        </Modal>
      )}
    </div>
  );
};

export default KioskPayment;