Added Payment QR Code model Close Funtionalies

src/Pages/Kiosk/Components/SelfBookingFooter.jsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { Popconfirm, Drawer, Badge } from 'antd';
+import { Popconfirm, Drawer, Badge, Modal } from 'antd';
 import { QuestionCircleOutlined } from '@ant-design/icons';
 import { useDispatch, useSelector } from 'react-redux';
 import { IoIosArrowForward } from 'react-icons/io';
@@ -43,7 +43,7 @@ import KioskPayment from '../Payment/KioskPaymentWithModal';
 import { ApplicationPreferences } from '../../../Features/BrachLogin/BranchLogin';
 import { FaAngleUp, FaCircleCheck } from 'react-icons/fa6';
 import { FaAngleDown } from 'react-icons/fa';
-import { PostBookingData } from '../../../Features/BookingScreen/BookingData/BookingData';
+import { PostBookingData, PostCancelPayment } from '../../../Features/BookingScreen/BookingData/BookingData';
 import {
   generateRandomKey,
   getSession,
@@ -129,6 +129,7 @@ const selfKioskFooter = (props) => {
   const [chairInformation, setChairInformation] = useState();
   const [TableINformation, setTableINformation] = useState();
   const [paymentUrl, setpaymentUrl] = useState(null);
+  const [showCancelConfirm, setShowCancelConfirm] = useState(null);
   const [TransctionId, setTransctionId] = useState(null);
   const [paymentGatewayAccess, setPaymentGatewayAccess] = useState([]);
   //   let chairInformation = getSession('table');
@@ -939,6 +940,15 @@ const selfKioskFooter = (props) => {
     setMessageType(null);
   }, []);
 
+     // PostCancelPayment
+        const CancelPayment = async () => {
+          const response = await dispatch(PostCancelPayment({OrderId: TransctionId})).unwrap()
+          if (response?.data?.statusCode) {
+            // setBusinessUPI(false);
+            setpaymentUrl(null)
+          }
+        }
+
   return (
     <div>
       <Messages
@@ -1462,7 +1472,8 @@ const selfKioskFooter = (props) => {
             <button
               className="paymentclose-btn"
               onClick={() => {
-                setpaymentUrl(null);
+                // setpaymentUrl(null);
+                setShowCancelConfirm(true);
               }}
             >
               ✖
@@ -1476,6 +1487,21 @@ const selfKioskFooter = (props) => {
           ></iframe>
         </div>
       )}
+            {showCancelConfirm && (
+               <Modal
+                                open={showCancelConfirm}
+                                title="Cancel Payment"
+                                onOk={() => {
+                                  setShowCancelConfirm(false);
+                                  CancelPayment()
+                                }}
+                                onCancel={() => setShowCancelConfirm(false)}
+                                okText="Yes"
+                                cancelText="No"
+                              >
+                                Do you want to cancel the payment?
+                              </Modal>
+            )}
     </div>
   );
 };