karthikalakshmi
/
Android_Retail
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Reviewed-on: Pozomind/pozo-retail-app#209
This commit is contained in:
karthikalakshmi 2026-03-03 10:06:16 +05:30
parent 7f817033b8 05e90ab4fd
commit 1869b0afb7
13 changed files with 276 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/Pages/Kiosk/CardPage/CardPage1.jsx
View File

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

13
src/Pages/Kiosk/CardPage/CardPage2.jsx
View File

@ -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'}

13
src/Pages/Kiosk/CardPage/CardPage3.jsx
View File

@ -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'}

14
src/Pages/Kiosk/CardPage/CardPage4.jsx
View File

@ -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'}

16
src/Pages/Kiosk/OrderCart/OrderCart1.jsx
View File

@ -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>

14
src/Pages/Kiosk/OrderCart/OrderCart2.jsx
View File

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

14
src/Pages/Kiosk/OrderCart/OrderCart3.jsx
View File

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

16
src/Pages/Kiosk/OrderView/OrderView1.jsx
View File

@ -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>

16
src/Pages/Kiosk/OrderView/OrderView2.jsx
View File

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

15
src/Pages/Kiosk/OrderView/OrderView3.jsx
View File

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

40
src/Pages/Kiosk/Payment/KioskPaymentWithModal.jsx
View File

@ -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);
setMessageType('warning');
// setMessageData(withinTimeLimit?.response);
// 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);
setMessageType('warning');
// setMessageData(withinTimeLimit?.response);
// 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' }}>

61
src/Styles/Kiosk/CardPage/CardPage1.scss
View File

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

55
src/Styles/Kiosk/OrderCart/OrderCart1.scss
View File

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