Merge pull request 'added time and qty limit' (#209) from qty-limit-time-limit into main

Reviewed-on: Pozomind/pozo-retail-app#209

src/Pages/Kiosk/CardPage/CardPage1.jsx

@@ -18,6 +18,8 @@ import {
 import horizontal from '../../../Images/defaultItemImg.png';
 import { getConfigType, PreferenceData } from '../../../Features/BookingScreen/BookingData/BookingData';
 import { calculateOverAllQtyLimit } from '../../../utils/calculations.js';
+import { IoIosWarning } from "react-icons/io";
+
 
 const CardPage1 = (props) => {
   const dispatch = useDispatch();
@@ -32,6 +34,7 @@ const CardPage1 = (props) => {
   const [qtydata, setQtydata] = useState();
   const [QtyIndex, setQtyIndex] = useState(0);
   const [ConfigDataList, setConfigDataList] = useState([]);
+  const [maxLimitExceeded, setMaxLimitExceeded] = useState(false);
   const kioskTemplateData = props?.data;
   const SettingDataSelector = useSelector(settingDataSelector);
   const UomPrint = SettingDataSelector?.[0]?.SettingDtlDetails.filter(
@@ -61,7 +64,12 @@ const CardPage1 = (props) => {
       if (overAllLimitPreferenece) {
         const calculatedOverAllQty = calculateOverAllQtyLimit(KioskOrderDetails);
         if ((calculatedOverAllQty + 1) > maxQtyLimit) {
-          message.warning(`Overall Quantity Limit Exceeds than ${maxQtyLimit}`)
+          setMaxLimitExceeded(true);
+          // Reset after 3 seconds
+          setTimeout(() => {
+            setMaxLimitExceeded(false);
+          }, 2000);
+
           return;
         }
       }
@@ -782,6 +790,11 @@ const CardPage1 = (props) => {
           </>
         }
       />
+      <div className={`Item3Warning ${maxLimitExceeded ? 'showing' : ''}`}>
+        <p>
+          <IoIosWarning size={30} color='#b99400' />Maximum Quantity ({maxQtyLimit}) Reached
+        </p>
+      </div>
     </div>
   );
 };

src/Pages/Kiosk/CardPage/CardPage2.jsx

@@ -17,6 +17,7 @@ import {
 import horizontal from '../../../Images/defaultItemImg.png';
 import { getConfigType, PreferenceData } from '../../../Features/BookingScreen/BookingData/BookingData';
 import { calculateOverAllQtyLimit } from '../../../utils/calculations.js';
+import { IoIosWarning } from 'react-icons/io';
 
 const CardPage2 = (props) => {
   const dispatch = useDispatch();
@@ -26,6 +27,7 @@ const CardPage2 = (props) => {
   const getKioskLightColourdata = useSelector(getKioskLightColour);
   const BookingType = useSelector(GlobalBookingTypeKiosk);
   const kioskTemplateData = props?.data;
+  const [maxLimitExceeded, setMaxLimitExceeded] = useState(false);
   const [openQuantity, setopenQuantity] = useState(false);
   const [VariantOpen, setVariantOpen] = useState(false);
   const [onePeiceFlow, setOnePeiceFlow] = useState(false);
@@ -61,7 +63,11 @@ const CardPage2 = (props) => {
       if (overAllLimitPreferenece) {
         const calculatedOverAllQty = calculateOverAllQtyLimit(KioskOrderDetails);
         if ((calculatedOverAllQty + 1) > maxQtyLimit) {
-          message.warning(`Overall Quantity Limit Exceeds than ${maxQtyLimit}`)
+          setMaxLimitExceeded(true);
+          // Reset after 3 seconds
+          setTimeout(() => {
+            setMaxLimitExceeded(false);
+          }, 2000);
           return;
         }
       }
@@ -593,6 +599,11 @@ const CardPage2 = (props) => {
             </div>
           )
       )}
+      <div className={`Item3Warning ${maxLimitExceeded ? 'showing' : ''}`}>
+        <p>
+          <IoIosWarning size={30} color='#b99400' />Maximum Quantity ({maxQtyLimit}) Reached
+        </p>
+      </div>
       <Drawer
         title={<p className="cardpage-title">Select Quantity</p>}
         height={'max-content'}

src/Pages/Kiosk/CardPage/CardPage3.jsx

@@ -16,6 +16,7 @@ import horizontal from '../../../Images/defaultItemImg.png';
 import { getKioskLightColour } from '../../../Features/Kiosk/kiosk';
 import { getConfigType, PreferenceData } from '../../../Features/BookingScreen/BookingData/BookingData';
 import { calculateOverAllQtyLimit } from '../../../utils/calculations.js';
+import { IoIosWarning } from 'react-icons/io';
 
 const CardPage3 = (props) => {
   const dispatch = useDispatch();
@@ -25,6 +26,7 @@ const CardPage3 = (props) => {
   console.log(KioskOrderDetails, 'KioskOrderDetailsKioskOrderDetails');
   const getKioskLightColourdata = useSelector(getKioskLightColour);
   const BookingType = useSelector(GlobalBookingTypeKiosk);
+  const [maxLimitExceeded, setMaxLimitExceeded] = useState(false);
   const [openQuantity, setopenQuantity] = useState(false);
   const [VariantOpen, setVariantOpen] = useState(false);
   const [onePeiceFlow, setOnePeiceFlow] = useState(false);
@@ -60,7 +62,11 @@ const CardPage3 = (props) => {
       if (overAllLimitPreferenece) {
         const calculatedOverAllQty = calculateOverAllQtyLimit(KioskOrderDetails);
         if ((calculatedOverAllQty + 1) > maxQtyLimit) {
-          message.warning(`Overall Quantity Limit Exceeds than ${maxQtyLimit}`)
+          setMaxLimitExceeded(true);
+          // Reset after 3 seconds
+          setTimeout(() => {
+            setMaxLimitExceeded(false);
+          }, 2000);
           return;
         }
       }
@@ -596,6 +602,11 @@ const CardPage3 = (props) => {
             </div>
           )
       )}
+      <div className={`Item3Warning ${maxLimitExceeded ? 'showing' : ''}`}>
+        <p>
+          <IoIosWarning size={30} color='#b99400' />Maximum Quantity ({maxQtyLimit}) Reached
+        </p>
+      </div>
       <Drawer
         title={<p className="cardpage-title">Select Quantity</p>}
         height={'max-content'}

src/Pages/Kiosk/CardPage/CardPage4.jsx

@@ -16,6 +16,7 @@ import horizontal from '../../../Images/defaultItemImg.png';
 import { getKioskLightColour } from '../../../Features/Kiosk/kiosk';
 import { getConfigType, PreferenceData } from '../../../Features/BookingScreen/BookingData/BookingData';
 import { calculateOverAllQtyLimit } from '../../../utils/calculations.js';
+import { IoIosWarning } from 'react-icons/io';
 
 const CardPage4 = (props) => {
   const dispatch = useDispatch();
@@ -25,6 +26,7 @@ const CardPage4 = (props) => {
   console.log(KioskOrderDetails, 'KioskOrderDetails');
   const getKioskLightColourdata = useSelector(getKioskLightColour);
   const BookingType = useSelector(GlobalBookingTypeKiosk);
+  const [maxLimitExceeded, setMaxLimitExceeded] = useState(false);
   const [quantities, setQuantities] = useState({});
   const [openQuantity, setopenQuantity] = useState(false);
   const [VariantOpen, setVariantOpen] = useState(false);
@@ -91,7 +93,11 @@ const CardPage4 = (props) => {
       if (overAllLimitPreferenece) {
         const calculatedOverAllQty = calculateOverAllQtyLimit(KioskOrderDetails);
         if ((calculatedOverAllQty + 1) > maxQtyLimit) {
-          message.warning(`Overall Quantity Limit Exceeds than ${maxQtyLimit}`)
+          setMaxLimitExceeded(true);
+          // Reset after 3 seconds
+          setTimeout(() => {
+            setMaxLimitExceeded(false);
+          }, 2000);
           return;
         }
       }
@@ -617,7 +623,11 @@ const CardPage4 = (props) => {
             </div>
           )
       )}
-
+      <div className={`Item3Warning ${maxLimitExceeded ? 'showing' : ''}`}>
+        <p>
+          <IoIosWarning size={30} color='#b99400' />Maximum Quantity ({maxQtyLimit}) Reached
+        </p>
+      </div>
       <Drawer
         title={<p className="cardpage-title">Select Quantity</p>}
         height={'max-content'}

src/Pages/Kiosk/OrderCart/OrderCart1.jsx

@@ -6,11 +6,13 @@ import TakeAway from '../KioskIcons/KioskTakeAway';
 import '../../../Styles/Kiosk/OrderCart/OrderCart1.scss';
 import { useSelector } from 'react-redux';
 import { PreferenceData } from '../../../Features/BookingScreen/BookingData/BookingData';
-import { message } from 'antd';
 import { calculateOverAllQtyLimit } from '../../../utils/calculations';
+import { IoIosWarning } from 'react-icons/io';
+import { useState } from 'react';
 
 const KisokOrderCart1 = (props) => {
   const dispatch = useDispatch();
+  const [maxLimitExceeded, setMaxLimitExceeded] = useState(false);
   const preferenceDatas = useSelector(PreferenceData);
   const overAllLimitPreferenece =
     preferenceDatas?.[0]?.['SettingDtlDetails']?.find(
@@ -41,7 +43,12 @@ const KisokOrderCart1 = (props) => {
       if (overAllLimitPreferenece) {
         const calculatedOverAllQty = calculateOverAllQtyLimit(KioskOrderDetails);
         if ((calculatedOverAllQty + 1) > maxQtyLimit) {
-          message.warning(`Overall Quantity Limit Exceeds than ${maxQtyLimit}`)
+          setMaxLimitExceeded(true);
+          // Reset after 3 seconds
+          setTimeout(() => {
+            setMaxLimitExceeded(false);
+          }, 2000);
+
           return;
         }
       }
@@ -202,6 +209,11 @@ const KisokOrderCart1 = (props) => {
                 remove
               </div>
             </div>
+            <div className={`Item3Warning ${maxLimitExceeded ? 'showing' : ''}`}>
+              <p>
+                <IoIosWarning size={30} color='#b99400' />Maximum Quantity ({maxQtyLimit}) Reached
+              </p>
+            </div>
           </div>
         ))}
       </div>

src/Pages/Kiosk/OrderCart/OrderCart2.jsx

@@ -10,10 +10,13 @@ import { calculateOverAllQtyLimit } from '../../../utils/calculations';
 import { PreferenceData } from '../../../Features/BookingScreen/BookingData/BookingData';
 import { useSelector } from 'react-redux';
 import { message } from 'antd';
+import { useState } from 'react';
+import { IoIosWarning } from 'react-icons/io';
 
 const KisokOrderCart2 = (props) => {
   const dispatch = useDispatch();
   const preferenceDatas = useSelector(PreferenceData);
+  const [maxLimitExceeded, setMaxLimitExceeded] = useState(false);
   const overAllLimitPreferenece =
     preferenceDatas?.[0]?.['SettingDtlDetails']?.find(
       (item) => (item.SettingIdName?.toLowerCase() === 'overalllimit') && item?.SettingValue === 'Y');
@@ -44,7 +47,11 @@ const KisokOrderCart2 = (props) => {
       if (overAllLimitPreferenece) {
         const calculatedOverAllQty = calculateOverAllQtyLimit(KioskOrderDetails);
         if ((calculatedOverAllQty + 1) > maxQtyLimit) {
-          message.warning(`Overall Quantity Limit Exceeds than ${maxQtyLimit}`)
+          setMaxLimitExceeded(true);
+          // Reset after 3 seconds
+          setTimeout(() => {
+            setMaxLimitExceeded(false);
+          }, 2000);
           return;
         }
       }
@@ -223,6 +230,11 @@ const KisokOrderCart2 = (props) => {
           </div>
         ))}
       </div>
+      <div className={`Item3Warning ${maxLimitExceeded ? 'showing' : ''}`}>
+        <p>
+          <IoIosWarning size={30} color='#b99400' />Maximum Quantity ({maxQtyLimit}) Reached
+        </p>
+      </div>
     </div>
   );
 };

src/Pages/Kiosk/OrderCart/OrderCart3.jsx

@@ -11,9 +11,12 @@ import '../../../Styles/Kiosk/OrderCart/OrderCart3.scss';
 import { calculateOverAllQtyLimit } from '../../../utils/calculations';
 import { message } from 'antd';
 import { PreferenceData } from '../../../Features/BookingScreen/BookingData/BookingData';
+import { IoIosWarning } from 'react-icons/io';
+import { useState } from 'react';
 
 const KisokOrderCart3 = (props) => {
   const dispatch = useDispatch();
+  const [maxLimitExceeded, setMaxLimitExceeded] = useState(false);
   const getKioskDarkColourdata = useSelector(getKioskDarkColour);
   const preferenceDatas = useSelector(PreferenceData);
   const overAllLimitPreferenece =
@@ -47,7 +50,11 @@ const KisokOrderCart3 = (props) => {
       if (overAllLimitPreferenece) {
         const calculatedOverAllQty = calculateOverAllQtyLimit(KioskOrderDetails);
         if ((calculatedOverAllQty + 1) > maxQtyLimit) {
-          message.warning(`Overall Quantity Limit Exceeds than ${maxQtyLimit}`)
+          setMaxLimitExceeded(true);
+          // Reset after 3 seconds
+          setTimeout(() => {
+            setMaxLimitExceeded(false);
+          }, 2000);
           return;
         }
       }
@@ -236,6 +243,11 @@ const KisokOrderCart3 = (props) => {
           </div>
         ))}
       </div>
+      <div className={`Item3Warning ${maxLimitExceeded ? 'showing' : ''}`}>
+        <p>
+          <IoIosWarning size={30} color='#b99400' />Maximum Quantity ({maxQtyLimit}) Reached
+        </p>
+      </div>
     </div>
   );
 };

src/Pages/Kiosk/OrderView/OrderView1.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { MdCurrencyRupee } from 'react-icons/md';
 import KioskHeader from '../Components/KioskHeader';
@@ -19,12 +19,14 @@ import '../../../Styles/Kiosk/OrderView/OrderView1.scss';
 import { PreferenceData } from '../../../Features/BookingScreen/BookingData/BookingData';
 import { calculateOverAllQtyLimit } from '../../../utils/calculations';
 import { message } from 'antd';
+import { IoIosWarning } from 'react-icons/io';
 
 const OrderView1 = (props) => {
   const KioskThemeData = props?.hasOwnProperty('KioskThemeData')
     ? props['KioskThemeData']
     : null;
   const dispatch = useDispatch();
+  const [maxLimitExceeded, setMaxLimitExceeded] = useState(false);
   const KioskOrderDetails = useSelector(GlobalKioskOrderDetails);
   const getKioskLightColourdata = useSelector(getKioskLightColour);
   const preferenceDatas = useSelector(PreferenceData);
@@ -61,7 +63,11 @@ const OrderView1 = (props) => {
       if (overAllLimitPreferenece) {
         const calculatedOverAllQty = calculateOverAllQtyLimit(KioskOrderDetails);
         if ((calculatedOverAllQty + 1) > maxQtyLimit) {
-          message.warning(`Overall Quantity Limit Exceeds than ${maxQtyLimit}`)
+          setMaxLimitExceeded(true);
+          // Reset after 3 seconds
+          setTimeout(() => {
+            setMaxLimitExceeded(false);
+          }, 2000);
           return;
         }
       }
@@ -172,7 +178,6 @@ const OrderView1 = (props) => {
           KioskThemeData={KioskThemeData}
           SessionDtl={props?.SessionDtl}
         />
-
         <div
           className={
             props?.Footer === '3'
@@ -253,6 +258,11 @@ const OrderView1 = (props) => {
                     remove
                   </div>
                 </div>
+                <div className={`Item3Warning ${maxLimitExceeded ? 'showing' : ''}`}>
+                  <p>
+                    <IoIosWarning size={30} color='#b99400' />Maximum Quantity ({maxQtyLimit}) Reached
+                  </p>
+                </div>
               </div>
             ))}
           </div>

src/Pages/Kiosk/OrderView/OrderView2.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { MdCurrencyRupee } from 'react-icons/md';
 import '../../../Styles/Kiosk/OrderView/OrderView2.scss';
@@ -14,7 +14,7 @@ import {
   changeKioskOrderDetails,
 } from '../../../Features/BookingScreen/BookingData/KioskBookingData';
 import KioskFooter3 from '../Components/KioskFooter3';
-import { IoMdClose } from 'react-icons/io';
+import { IoIosWarning, IoMdClose } from 'react-icons/io';
 import defaultImg from '../../../Images/defaultItemImg.png';
 import PozoDineInIcon from '../KioskIcons/KioskDineIn';
 import TakeAway from '../KioskIcons/KioskTakeAway';
@@ -29,6 +29,7 @@ const KioskOrderView2 = (props) => {
     : null;
   const dispatch = useDispatch();
   const preferenceDatas = useSelector(PreferenceData);
+  const [maxLimitExceeded, setMaxLimitExceeded] = useState(false);
   const overAllLimitPreferenece =
     preferenceDatas?.[0]?.['SettingDtlDetails']?.find(
       (item) => (item.SettingIdName?.toLowerCase() === 'overalllimit') && item?.SettingValue === 'Y');
@@ -70,7 +71,11 @@ const KioskOrderView2 = (props) => {
       if (overAllLimitPreferenece) {
         const calculatedOverAllQty = calculateOverAllQtyLimit(KioskOrderDetails);
         if ((calculatedOverAllQty + 1) > maxQtyLimit) {
-          message.warning(`Overall Quantity Limit Exceeds than ${maxQtyLimit}`)
+          setMaxLimitExceeded(true);
+          // Reset after 3 seconds
+          setTimeout(() => {
+            setMaxLimitExceeded(false);
+          }, 2000);
           return;
         }
       }
@@ -332,6 +337,11 @@ const KioskOrderView2 = (props) => {
           )}
         </div>
       </div>
+      <div className={`Item3Warning ${maxLimitExceeded ? 'showing' : ''}`}>
+        <p>
+          <IoIosWarning size={30} color='#b99400' />Maximum Quantity ({maxQtyLimit}) Reached
+        </p>
+      </div>
     </div>
   );
 };

src/Pages/Kiosk/OrderView/OrderView3.jsx

@@ -1,5 +1,5 @@
 import { RiDeleteBin6Line } from 'react-icons/ri';
-import React from 'react';
+import React, { useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { MdCurrencyRupee } from 'react-icons/md';
 import horizontal from '../../../Images/defaultItemImg.png';
@@ -21,6 +21,7 @@ import TakeAway from '../KioskIcons/KioskTakeAway';
 import { PreferenceData } from '../../../Features/BookingScreen/BookingData/BookingData';
 import { calculateOverAllQtyLimit } from '../../../utils/calculations';
 import { message } from 'antd';
+import { IoIosWarning } from 'react-icons/io';
 
 const KioskOrderView = (props) => {
   console.log(props, 'propsprops');
@@ -31,6 +32,7 @@ const KioskOrderView = (props) => {
   const KioskOrderDetails = useSelector(GlobalKioskOrderDetails);
   const getKioskLightColourdata = useSelector(getKioskLightColour);
   const preferenceDatas = useSelector(PreferenceData);
+  const [maxLimitExceeded, setMaxLimitExceeded] = useState(false);
   const overAllLimitPreferenece =
     preferenceDatas?.[0]?.['SettingDtlDetails']?.find(
       (item) => (item.SettingIdName?.toLowerCase() === 'overalllimit') && item?.SettingValue === 'Y');
@@ -63,7 +65,11 @@ const KioskOrderView = (props) => {
       if (overAllLimitPreferenece) {
         const calculatedOverAllQty = calculateOverAllQtyLimit(KioskOrderDetails);
         if ((calculatedOverAllQty + 1) > maxQtyLimit) {
-          message.warning(`Overall Quantity Limit Exceeds than ${maxQtyLimit}`)
+          setMaxLimitExceeded(true);
+          // Reset after 3 seconds
+          setTimeout(() => {
+            setMaxLimitExceeded(false);
+          }, 2000);
           return;
         }
       }
@@ -323,6 +329,11 @@ const KioskOrderView = (props) => {
           )}
         </div>
       </div>
+      <div className={`Item3Warning ${maxLimitExceeded ? 'showing' : ''}`}>
+        <p>
+          <IoIosWarning size={30} color='#b99400' />Maximum Quantity ({maxQtyLimit}) Reached
+        </p>
+      </div>
     </div>
   );
 };

src/Pages/Kiosk/Payment/KioskPaymentWithModal.jsx

@@ -28,6 +28,7 @@ import {
   GlobalKioskPrinterDetails,
   getKioskPrinterDetails,
 } from '../../../Features/Kiosk/kiosk';
+import '../../../Styles/Kiosk/CardPage/CardPage1.scss';
 import {
   GlobalBookingTypeKiosk,
   GlobalKioskBookingTypeBoth,
@@ -83,6 +84,7 @@ import PaymentGatewayEmbedded from '../../BookingScreen/Components/UtillComponen
 import MobileMultiPdfPrintTrigger from '../../BookingScreen/Components/UtillComponents/MobileMultiPdfPrintTrigger.jsx';
 import { checkLastOrderTimeLimit, sendupiotp } from '../../../Features/UpiDetails/UpiDetails.js';
 import { isIndianMobile } from '../../../utils/calculations.js';
+import { IoIosWarning } from 'react-icons/io';
 
 const CustomPaymentUrl = import.meta.env.ENV_CUSTOM_PAYMENT_URL;
 
@@ -165,6 +167,8 @@ const KioskPayment = (props) => {
   const bookingTypePreference = appPreferences?.find(
     (preference) => preference?.PreferredCatName === 'Booking Type'
   )?.PreferenceCatDetails;
+  const [maxLimitExceeded, setMaxLimitExceeded] = useState(null);
+  const [maxLimitExceededMessage, setMaxLimitExceededMessage] = useState(null);
   const [showPaymentMethods, setShowPaymentMethods] = useState(null);
   const [resendTimer, setResendTimer] = useState(0)
   const [canResend, setCanResend] = useState(true)
@@ -773,12 +777,18 @@ const KioskPayment = (props) => {
   };
 
   const handlePaymentOption = async (option) => {
-
     if (isTimeLimitEnabled) {
       const withinTimeLimit = await checkLast30MinOrder(number);
       if (withinTimeLimit?.IsEligible === false) {
-        setMessageData(withinTimeLimit?.response);
+        // setMessageData(withinTimeLimit?.response);
-        setMessageType('warning');
+        // setMessageType('warning');
+        setMaxLimitExceededMessage(withinTimeLimit?.response);
+        setMaxLimitExceeded(true);
+        // Reset after 3 seconds
+        setTimeout(() => {
+          setMaxLimitExceeded(false);
+          setMaxLimitExceededMessage(null);
+        }, 2500);
         return;
       }
     }
@@ -1840,8 +1850,15 @@ const KioskPayment = (props) => {
       if (isTimeLimitEnabled) {
         const withinTimeLimit = await checkLast30MinOrder(number);
         if (withinTimeLimit?.IsEligible === false) {
-          setMessageData(withinTimeLimit?.response);
+          // setMessageData(withinTimeLimit?.response);
-          setMessageType('warning');
+          // setMessageType('warning');
+          setMaxLimitExceededMessage(withinTimeLimit?.response);
+          setMaxLimitExceeded(true);
+          // Reset after 3 seconds
+          setTimeout(() => {
+            setMaxLimitExceeded(false);
+            setMaxLimitExceededMessage(null);
+          }, 2500);
           return;
         }
       }
@@ -2033,6 +2050,7 @@ const KioskPayment = (props) => {
                   icon={<ArrowRightOutlined />}
                 ></Buttons>
               </div>
+
             </div>
           ) : (
             <div className="paymentModal-Master">
@@ -2042,10 +2060,10 @@ const KioskPayment = (props) => {
               <div className="paymentModal_main">
                 {!otpSent && !otpVerifed && (<>
                   <div className="prompt">
-                    <p style={{ fontFamily: 'Poppins', fontWeight: '600' }}>
+                    {/* <p style={{ fontFamily: 'Poppins', fontWeight: '600' }}>
                       Get your order bill on your mobile <br />
                       via SMS / Whatsapp
-                    </p>
+                    </p> */}
                   </div>
 
                   <div
@@ -2106,7 +2124,7 @@ const KioskPayment = (props) => {
                 </>)}
                 {(isOtpEnabled && otpSent) && (
                   <div className="otp-section">
-
+                    <div style={{ fontFamily: 'Poppins', fontSize: '16px' }}>Enter OTP</div>
                     {/* Mobile Number + Edit */}
                     <div className="otp-mobile-row">
                       <span className="otp-mobile-number">{number}</span>
@@ -2245,10 +2263,16 @@ const KioskPayment = (props) => {
                   </div>
                 </>}
               </div>
+              <div className={`Item3Warning ${maxLimitExceeded ? 'showing' : ''}`}>
+                <p>
+                  <IoIosWarning size={30} color='#b99400' />{maxLimitExceededMessage}
+                </p>
+              </div>
             </div>
           )
         }
       ></DefaultModal>
+
       {PrintOrderDetails?.length > 0 &&
         PrintOrderDetails?.[0]?.OrderDetails?.map((orderDetail, index) => (
           <div style={{ display: 'none' }}>

src/Styles/Kiosk/CardPage/CardPage1.scss

@@ -416,7 +416,8 @@
         background-color: #ffebee;
         border-color: #f44336;
       }
-       &.selected {
+
+      &.selected {
         background-color: #ffebee;
         border-color: #9e1c60;
       }
@@ -443,7 +444,7 @@
   width: 48%;
   white-space: nowrap;
 
-  > div:nth-child(1) {
+  >div:nth-child(1) {
     font-size: 14px;
     font-weight: 500;
     line-height: 1.1;
@@ -674,9 +675,63 @@
   flex-wrap: wrap;
   gap: 10px;
 }
-.sportsCardContinueButton{
+
+.sportsCardContinueButton {
   display: flex;
   flex-direction: row-reverse;
   align-items: center;
 
 }
+
+.Item3Warning {
+  position: fixed;
+  top: 0%;
+  left: 0%;
+  bottom: 0;
+  right: 0%;
+  background-color: #00000096;
+  z-index: 100;
+  font-family: "Poppins";
+  font-size: 16px;
+  font-weight: 500;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  flex-direction: column;
+  backdrop-filter: blur(4px);
+
+  /* Animation initial state */
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.3s ease, visibility 0.3s ease;
+
+  p {
+    display: flex;
+    box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px,
+      rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    background-color: #fff;
+    padding: 15px 20px;
+    border-radius: 8px;
+
+    /* popup animation */
+    transform: scale(0.8);
+    transition: transform 0.3s ease;
+  }
+}
+
+/* When visible */
+.Item3Warning.showing {
+  opacity: 1;
+  visibility: visible;
+
+  p {
+    transform: scale(1);
+  }
+}

src/Styles/Kiosk/OrderCart/OrderCart1.scss

@@ -57,6 +57,7 @@
       text-transform: uppercase;
       text-wrap: wrap;
     }
+
     p {
       width: 65%;
     }
@@ -122,4 +123,58 @@
   justify-content: center;
   padding: 2px 6px;
 }
+
 //mohan
+
+.Item3Warning {
+  position: fixed;
+  top: 0%;
+  left: 0%;
+  bottom: 0;
+  right: 0%;
+  background-color: #00000096;
+  z-index: 100;
+  font-family: "Poppins";
+  font-size: 16px;
+  font-weight: 500;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  flex-direction: column;
+  backdrop-filter: blur(4px);
+
+  /* Animation initial state */
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.3s ease, visibility 0.3s ease;
+
+  p {
+    display: flex;
+    box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px,
+      rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    background-color: #fff;
+    padding: 15px 20px;
+    border-radius: 8px;
+
+    /* popup animation */
+    transform: scale(0.8);
+    transition: transform 0.3s ease;
+  }
+}
+
+/* When visible */
+.Item3Warning.showing {
+  opacity: 1;
+  visibility: visible;
+
+  p {
+    transform: scale(1);
+  }
+}