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

Merge pull request 'CountUp Component Changes' (#295) from Sales-Optimization into main 

Reviewed-on: Pozomind/pozo-retail-app#295
This commit is contained in:
karthikalakshmi 2026-03-23 10:24:16 +05:30
parent a5a004bbcf 47705e35f9
commit f6431e1f2e
9 changed files with 296 additions and 2824 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/Pages/BookingScreen/Components/BSBillingTables/BSBillingTable1/BST1Payment.jsx
View File

@ -220,6 +220,7 @@ import BSCustomerSelect from '../../UtillComponents/BSSelectCustomer.jsx';
import PozoAddCustomerIcon from '../../UtillComponents/Pozo retail icons/PozoAddCustomerIcon.jsx'; import PozoAddCustomerIcon from '../../UtillComponents/Pozo retail icons/PozoAddCustomerIcon.jsx';
import PozoCartIcon from '../../UtillComponents/PozoCartIcon.jsx'; import PozoCartIcon from '../../UtillComponents/PozoCartIcon.jsx';
import BSBillingTable3 from '../BSBillingTable3/BSBillingTable3.jsx'; import BSBillingTable3 from '../BSBillingTable3/BSBillingTable3.jsx';
import useCountUp from '../../UtillComponents/useCountUp.jsx';
const subDirectory = import.meta.env.ENV_BASE_URL; const subDirectory = import.meta.env.ENV_BASE_URL;
const MainHomeUrl = import.meta.env.ENV_MAIN_BASE_URL; const MainHomeUrl = import.meta.env.ENV_MAIN_BASE_URL;
@ -3584,6 +3585,17 @@ export default function BST1Payment() {
(arr) => Array.isArray(arr) && arr.some((err) => err) (arr) => Array.isArray(arr) && arr.some((err) => err)
); );
}; };
const CountUp = useCountUp(
safeRound(
OrderType === 'Failed'
? FailedTotalAmt
: credit && overAllBal >= 0
? Math.max(0, TotalAmount - overAllBal)
: TotalAmount
)
);
return ( return (
<> <>
<div className="BST1-Payment-structure"> <div className="BST1-Payment-structure">
@ -4291,8 +4303,8 @@ export default function BST1Payment() {
</div> </div>
) : ( ) : (
<div> <div>
₹{' '} ₹{CountUp}
<CountUp {/* <CountUp
duration={0.4} duration={0.4}
className="counter" className="counter"
end={safeRound( end={safeRound(
@ -4302,7 +4314,7 @@ export default function BST1Payment() {
? Math.max(0, TotalAmount - overAllBal) ? Math.max(0, TotalAmount - overAllBal)
: TotalAmount : TotalAmount
)} )}
/> /> */}
</div> </div>
) )
) : ( ) : (

74
src/Pages/BookingScreen/Components/BSBillingTables/BSBillingTable1/BalanceAndReceived.jsx
View File

@ -7,12 +7,12 @@ import {
PreferenceData, PreferenceData,
} from '../../../../../Features/BookingScreen/BookingData/BookingData'; } from '../../../../../Features/BookingScreen/BookingData/BookingData';
import { GlobalSelectedFont } from '../../../../../Features/ThemeChange/ThemeChange'; import { GlobalSelectedFont } from '../../../../../Features/ThemeChange/ThemeChange';
import CountUp from 'react-countup';
import '../../../../../Styles/BookingScreen/Components/BSBillingTables/BSBillingTable1/BSBPayment.scss'; import '../../../../../Styles/BookingScreen/Components/BSBillingTables/BSBillingTable1/BSBPayment.scss';
import { useAuth } from '../../../../../AuthContext'; import { useAuth } from '../../../../../AuthContext';
import TooltipWrapper from '../../../../../Components/Tooltip/Tooltip'; import TooltipWrapper from '../../../../../Components/Tooltip/Tooltip';
import { isMobile } from 'react-device-detect'; import { isMobile } from 'react-device-detect';
import { getSession } from '../../../../../Services/Others'; import { getSession } from '../../../../../Services/Others';
import useCountUp from '../../UtillComponents/useCountUp';
const PaymentInput = ({ const PaymentInput = ({
orderType, orderType,
@ -50,7 +50,11 @@ const PaymentInput = ({
const [addnewAccess, setaddnewAccess] = useState(true); const [addnewAccess, setaddnewAccess] = useState(true);
const UserType = getSession('UserType'); const UserType = getSession('UserType');
const preferenceDatas = useSelector(PreferenceData); const preferenceDatas = useSelector(PreferenceData);
const allowDecimal = preferenceDatas?.[0]?.SettingDtlDetails?.find((setting) => setting?.SettingIdName?.toLowerCase() === "decimal" && setting?.SettingValue === 'Y'); const allowDecimal = preferenceDatas?.[0]?.SettingDtlDetails?.find(
(setting) =>
setting?.SettingIdName?.toLowerCase() === 'decimal' &&
setting?.SettingValue === 'Y'
);
useEffect(() => { useEffect(() => {
const receivedInput = document.getElementById('recived'); const receivedInput = document.getElementById('recived');
@ -116,6 +120,10 @@ const PaymentInput = ({
return allowDecimal ? num.toFixed(2) : Math.round(num).toString(); return allowDecimal ? num.toFixed(2) : Math.round(num).toString();
} }
const CountUp = useCountUp(
OrderType === 'Failed' ? failedTotalAmt : safeRound(totalAmount)
);
return ( return (
<> <>
{BillingTableName === 'BillingTable1' && ( {BillingTableName === 'BillingTable1' && (
@ -138,9 +146,9 @@ const PaymentInput = ({
addnewAccess addnewAccess
? 'price-button-disabled' ? 'price-button-disabled'
: FirstPaymentclick === false && : FirstPaymentclick === false &&
OrderCardDetail?.length > 0 && OrderCardDetail?.length > 0 &&
paybtnselected && paybtnselected &&
CheckBookingStatus != 'Close' CheckBookingStatus != 'Close'
? !OrderStatus ? !OrderStatus
? 'price-button' ? 'price-button'
: 'price-button Order' : 'price-button Order'
@ -157,31 +165,51 @@ const PaymentInput = ({
style={{ fontFamily: FontFamily['head'] }} style={{ fontFamily: FontFamily['head'] }}
> >
{isMobile && {isMobile &&
(!OrderStatus ? salesBillEdit && (currentOrderNetAmount < previousNetAmount) ? <div>Refund: ₹{(previousNetAmount || 0) - (currentOrderNetAmount || 0)}</div> : (!OrderStatus ? (
`₹ ${Math.round( salesBillEdit && currentOrderNetAmount < previousNetAmount ? (
OrderType === 'Failed' ? failedTotalAmt : credit && overAllBal >= 0 <div>
? Math.max(0, totalAmount - overAllBal) Refund: ₹
: totalAmount {(previousNetAmount || 0) - (currentOrderNetAmount || 0)}
)}` </div>
: 'ORDER')} ) : (
`₹ ${Math.round(
OrderType === 'Failed'
? failedTotalAmt
: credit && overAllBal >= 0
? Math.max(0, totalAmount - overAllBal)
: totalAmount
)}`
)
) : (
'ORDER'
))}
{!isMobile && !OrderStatus && ((salesBillEdit && (currentOrderNetAmount < previousNetAmount)) ? <div>Refund: ₹{(previousNetAmount || 0) - (currentOrderNetAmount || 0)}</div> : ( {!isMobile &&
<> !OrderStatus &&
₹{' '} (salesBillEdit && currentOrderNetAmount < previousNetAmount ? (
{/* <CountUp <div>
Refund: ₹
{(previousNetAmount || 0) - (currentOrderNetAmount || 0)}
</div>
) : (
<>
₹ {CountUp}
{/* <CountUp
duration={0.4} duration={0.4}
className="counter" className="counter"
end={( end={(
OrderType === "Failed" ? failedTotalAmt : safeRound(totalAmount) OrderType === "Failed" ? failedTotalAmt : safeRound(totalAmount)
)} )}
/> */} /> */}
{OrderType === 'Failed' {/* {OrderType === 'Failed'
? failedTotalAmt ? failedTotalAmt
: safeRound((credit && overAllBal >= 0) : safeRound(
? Math.max(0, totalAmount - overAllBal) credit && overAllBal >= 0
: totalAmount)} ? Math.max(0, totalAmount - overAllBal)
</> : totalAmount
))} )} */}
</>
))}
{!isMobile && OrderStatus && 'ORDER'} {!isMobile && OrderStatus && 'ORDER'}
</button> </button>

18
src/Pages/BookingScreen/Components/BSBillingTables/BSBillingTable3/BSBillingTable3pay.jsx
View File

@ -210,6 +210,7 @@ import UpiPopover from '../StandardTable/Utils/UpiPopOver.jsx';
import MobileMultiPdfPrintTrigger from '../../UtillComponents/MobileMultiPdfPrintTrigger.jsx'; import MobileMultiPdfPrintTrigger from '../../UtillComponents/MobileMultiPdfPrintTrigger.jsx';
import { useDateStore } from '../../../../../Features/BookingScreen/BookingData/DateStore.js'; import { useDateStore } from '../../../../../Features/BookingScreen/BookingData/DateStore.js';
import CustomerMobileNumberModal from '../../BookingFunctionality/CustomerOTP.jsx'; import CustomerMobileNumberModal from '../../BookingFunctionality/CustomerOTP.jsx';
import useCountUp from '../../UtillComponents/useCountUp.jsx';
const PaymentGatewayEmbedded = lazy( const PaymentGatewayEmbedded = lazy(
() => import('../../UtillComponents/PaymentGatewayEmbedded.jsx') () => import('../../UtillComponents/PaymentGatewayEmbedded.jsx')
); );
@ -3636,6 +3637,17 @@ const BSBillingTable3Pay = () => {
(arr) => Array.isArray(arr) && arr.some((err) => err) (arr) => Array.isArray(arr) && arr.some((err) => err)
); );
}; };
const CountUp = useCountUp(
safeRound(
OrderType === 'Failed'
? FailedTotalAmt
: credit && overAllBal >= 0
? Math.max(0, TotalAmount - overAllBal)
: TotalAmount
)
);
return ( return (
<> <>
<div className="BSBilling3PayMaster"> <div className="BSBilling3PayMaster">
@ -4537,8 +4549,8 @@ const BSBillingTable3Pay = () => {
)}` )}`
) : ( ) : (
<div> <div>
₹{' '} ₹ {CountUp}
<CountUp {/* <CountUp
duration={0.4} duration={0.4}
className="counter" className="counter"
end={safeRound( end={safeRound(
@ -4548,7 +4560,7 @@ const BSBillingTable3Pay = () => {
? Math.max(0, TotalAmount - overAllBal) ? Math.max(0, TotalAmount - overAllBal)
: TotalAmount : TotalAmount
)} )}
/> /> */}
</div> </div>
)} )}
</p> </p>

17
src/Pages/BookingScreen/Components/BSBillingTables/StandardTable/StandardTablePayment.jsx
View File

@ -233,6 +233,7 @@ import { MdSms } from 'react-icons/md';
import '../../../../BookingScreen/Components/BSBillingTables/StandardTable/StandardTable.scss'; import '../../../../BookingScreen/Components/BSBillingTables/StandardTable/StandardTable.scss';
import BSCustomerSelect from '../../UtillComponents/BSSelectCustomer.jsx'; import BSCustomerSelect from '../../UtillComponents/BSSelectCustomer.jsx';
import BSNavBarAddUser from '../../UtillComponents/BSNavBarAddUser.jsx'; import BSNavBarAddUser from '../../UtillComponents/BSNavBarAddUser.jsx';
import useCountUp from '../../UtillComponents/useCountUp.jsx';
// //
const subDirectory = import.meta.env.ENV_BASE_URL; const subDirectory = import.meta.env.ENV_BASE_URL;
@ -3430,6 +3431,16 @@ const StandardTablePayment = () => {
return allowDecimal ? num.toFixed(2) : Math.round(num).toString(); return allowDecimal ? num.toFixed(2) : Math.round(num).toString();
} }
const CountUp = useCountUp(
safeRound(
OrderType === 'Failed'
? FailedTotalAmt
: credit && overAllBal >= 0
? Math.max(0, TotalAmount - overAllBal)
: TotalAmount
)
);
return ( return (
<div className="booking-table-footer" style={{ padding: '0' }}> <div className="booking-table-footer" style={{ padding: '0' }}>
<Messages <Messages
@ -3942,8 +3953,8 @@ const StandardTablePayment = () => {
)}` )}`
) : ( ) : (
<div> <div>
₹{' '} ₹{CountUp}
<CountUp {/* <CountUp
duration={0.4} duration={0.4}
className="counter" className="counter"
end={safeRound( end={safeRound(
@ -3953,7 +3964,7 @@ const StandardTablePayment = () => {
? Math.max(0, TotalAmount - overAllBal) ? Math.max(0, TotalAmount - overAllBal)
: TotalAmount : TotalAmount
)} )}
/> /> */}
</div> </div>
)} )}
</p> </p>

2631
src/Pages/BookingScreen/Components/BSBillingTables/StandardTable/StandardTablePaymentBackup.jsx
View File

File diff suppressed because it is too large Load Diff

17
src/Pages/BookingScreen/Components/BSCombo/BSC1Payment.jsx
View File

@ -269,6 +269,7 @@ import {
} from '../../../../Features/Offer/Offernew/BookingOffernew.js'; } from '../../../../Features/Offer/Offernew/BookingOffernew.js';
import pozologoimg from '../../../../Images/pozologoimg.png'; import pozologoimg from '../../../../Images/pozologoimg.png';
import CustomerOrders from '../BookingFunctionality/CustomerOrders.jsx'; import CustomerOrders from '../BookingFunctionality/CustomerOrders.jsx';
import useCountUp from '../UtillComponents/useCountUp.jsx';
const PaymentGatewayEmbedded = lazy( const PaymentGatewayEmbedded = lazy(
() => import('../UtillComponents/PaymentGatewayEmbedded.jsx') () => import('../UtillComponents/PaymentGatewayEmbedded.jsx')
); );
@ -3505,6 +3506,16 @@ const BSC1Payment = (props) => {
); );
}; };
const CountUp = useCountUp(
safeRound(
OrderType === 'Failed'
? FailedTotalAmt
: credit && overAllBal >= 0
? Math.max(0, TotalAmount - overAllBal)
: TotalAmount
)
);
return ( return (
<> <>
<div <div
@ -4650,8 +4661,8 @@ const BSC1Payment = (props) => {
)}` )}`
) : ( ) : (
<div> <div>
₹ ₹ {CountUp}
<CountUp {/* <CountUp
duration={0.4} duration={0.4}
className="counter" className="counter"
end={safeRound( end={safeRound(
@ -4661,7 +4672,7 @@ const BSC1Payment = (props) => {
? Math.max(0, TotalAmount - overAllBal) ? Math.max(0, TotalAmount - overAllBal)
: TotalAmount : TotalAmount
)} )}
/> /> */}
</div> </div>
)} )}
<AiOutlineArrowRight width="25px" height="25px" /> <AiOutlineArrowRight width="25px" height="25px" />

315
src/Pages/BookingScreen/Components/UtillComponents/BSComboNavBarPreOrder.jsx
View File

@ -138,6 +138,7 @@ import { GlobalAddCustomerDetails } from '../../../../Features/BookingScreen/Cus
import SplitPayment from '../BookingFunctionality/SplitPaymentPreorder.jsx'; import SplitPayment from '../BookingFunctionality/SplitPaymentPreorder.jsx';
import PaymentPdfBooking from '../../../paymentpdfPage/PaymentPdfBooking.jsx'; import PaymentPdfBooking from '../../../paymentpdfPage/PaymentPdfBooking.jsx';
import { getCustomerDisplayWindow } from '../../../../Features/customerDisplayWindow/customerDisplayWindow.js'; import { getCustomerDisplayWindow } from '../../../../Features/customerDisplayWindow/customerDisplayWindow.js';
import useCountUp from './useCountUp.jsx';
const MainHomeUrl = import.meta.env.ENV_MAIN_BASE_URL; const MainHomeUrl = import.meta.env.ENV_MAIN_BASE_URL;
@ -276,10 +277,10 @@ const BSComboNavBarPreOrder = () => {
const [PrintOrderDetails, setPrintOrderDetails] = useState([]); const [PrintOrderDetails, setPrintOrderDetails] = useState([]);
const [CancelModal, setCancelModal] = useState(false); const [CancelModal, setCancelModal] = useState(false);
const [PreOrderData, setPreOrderData] = useState(); const [PreOrderData, setPreOrderData] = useState();
const [PreOrderRefund, setPreOrderRefund] = useState(0); const [PreOrderRefund, setPreOrderRefund] = useState(0);
const [CancelPaymentOption, setCancelPaymentOption] = useState(); const [CancelPaymentOption, setCancelPaymentOption] = useState();
const gatewayOptions = [ const gatewayOptions = [
{ option: 'Default', value: 'Default' }, { option: 'Default', value: 'Default' },
{ option: 'Payment Device', value: 'PaymentDevice' }, { option: 'Payment Device', value: 'PaymentDevice' },
@ -466,10 +467,10 @@ const BSComboNavBarPreOrder = () => {
TotalCalculation(); TotalCalculation();
}, [GlobalExtraCharge]); }, [GlobalExtraCharge]);
const OnChangeCancelPaymentOption = async (params) => { const OnChangeCancelPaymentOption = async (params) => {
setCancelPaymentOption(params); setCancelPaymentOption(params);
cancelformRef?.current?.setFieldsValue({ CancelPayOptions: params }); cancelformRef?.current?.setFieldsValue({ CancelPayOptions: params });
} };
useEffect(() => { useEffect(() => {
if (Array.isArray(PreOrderList)) { if (Array.isArray(PreOrderList)) {
@ -663,7 +664,9 @@ const OnChangeCancelPaymentOption = async (params) => {
), ),
onFilter: (value, record) => { onFilter: (value, record) => {
return ( return (
String(record.OrderId)?.toLowerCase().includes(value?.toLowerCase()) || String(record.OrderId)
?.toLowerCase()
.includes(value?.toLowerCase()) ||
String(record?.CustomerDetails?.[0]?.CustSuppName) String(record?.CustomerDetails?.[0]?.CustSuppName)
?.toLowerCase() ?.toLowerCase()
.includes(value?.toLowerCase()) || .includes(value?.toLowerCase()) ||
@ -673,7 +676,9 @@ const OnChangeCancelPaymentOption = async (params) => {
String(formatDate(record?.DeliveryDate, record.DeliveryTime)) String(formatDate(record?.DeliveryDate, record.DeliveryTime))
?.toLowerCase() ?.toLowerCase()
.includes(value?.toLowerCase()) || .includes(value?.toLowerCase()) ||
String(record.PaidAmount)?.toLowerCase().includes(value?.toLowerCase()) String(record.PaidAmount)
?.toLowerCase()
.includes(value?.toLowerCase())
); );
}, },
ellipsis: true, ellipsis: true,
@ -741,7 +746,6 @@ const OnChangeCancelPaymentOption = async (params) => {
return match ? match[1] : null; return match ? match[1] : null;
}; };
const handlerefundvalidator = (_, value) => { const handlerefundvalidator = (_, value) => {
const paidAmount = parseFloat(PreOrderData?.PaidAmount ?? 0); const paidAmount = parseFloat(PreOrderData?.PaidAmount ?? 0);
const refundAmount = parseFloat(value ?? 0); const refundAmount = parseFloat(value ?? 0);
@ -754,7 +758,6 @@ const OnChangeCancelPaymentOption = async (params) => {
const OnchangeRefund = async (e) => { const OnchangeRefund = async (e) => {
setPreOrderRefund(e?.target?.value); setPreOrderRefund(e?.target?.value);
}; };
const TotalCalculation = async () => { const TotalCalculation = async () => {
let totalSum; let totalSum;
@ -2736,53 +2739,47 @@ const OnChangeCancelPaymentOption = async (params) => {
}; };
const handlePreOrderDelete = async (params) => { const handlePreOrderDelete = async (params) => {
if (params?.PaidAmount > 0) { if (params?.PaidAmount > 0) {
setCancelModal(true); setCancelModal(true);
setPreOrderData(params) setPreOrderData(params);
} else {
PreOrderCancel(params);
} }
else {
PreOrderCancel(params)
}
}; };
const PreOrderCancel = async (params) => { const PreOrderCancel = async (params) => {
const CancelDat = {
AppId: AppId,
const CancelDat = { CompId: CompId,
AppId: AppId, BranchId: BranchId,
CompId: CompId, OrderId: params?.OrderId,
BranchId: BranchId, ...(params?.PaidAmount > 0 && {
OrderId: params?.OrderId, OrderPaymentDtl: [
...(params?.PaidAmount > 0 && { {
OrderPaymentDtl: [ PaymentType:
{ cancelformRef?.current?.getFieldsValue()?.CancelPayOptions,
PaymentType: cancelformRef?.current?.getFieldsValue()?.CancelPayOptions, Amount: cancelformRef?.current?.getFieldsValue()?.RefundAmount || 0,
Amount: cancelformRef?.current?.getFieldsValue()?.RefundAmount || 0, PaymentStatus: 'S',
PaymentStatus: "S" },
} ],
] }),
}), CreatedBy: UserId,
CreatedBy: UserId
}; };
let DeleteResponse = await dispatch(PreOrderBookingDataCancel(CancelDat)); let DeleteResponse = await dispatch(PreOrderBookingDataCancel(CancelDat));
if (DeleteResponse?.payload?.data?.statusCode === 1) { if (DeleteResponse?.payload?.data?.statusCode === 1) {
setMessageType('success'); setMessageType('success');
setMessageData('OrderStatus Deleted Successfully'); setMessageData('OrderStatus Deleted Successfully');
PendingApiCall(); PendingApiCall();
cancelformRef?.current?.resetFields(); cancelformRef?.current?.resetFields();
setCancelModal(false); setCancelModal(false);
setPreOrderData(); setPreOrderData();
setCancelPaymentOption(null); setCancelPaymentOption(null);
setPreOrderRefund(null); setPreOrderRefund(null);
} else { } else {
setMessageType('error'); setMessageType('error');
setMessageData(DeleteResponse?.payload?.data?.response); setMessageData(DeleteResponse?.payload?.data?.response);
} }
} };
const History_onSearch = (value) => { const History_onSearch = (value) => {
HistorysetSearchedText(value); HistorysetSearchedText(value);
@ -3043,6 +3040,8 @@ const OnChangeCancelPaymentOption = async (params) => {
await dispatch(ChangeSearchFocusPreOrder(true)); await dispatch(ChangeSearchFocusPreOrder(true));
}; };
const CountUp = useCountUp(Math.round(PreOrderAdvance));
return ( return (
<> <>
<Messages <Messages
@ -3130,9 +3129,9 @@ const OnChangeCancelPaymentOption = async (params) => {
<Button <Button
icon={<FiPlus />} icon={<FiPlus />}
onClick={async () => { onClick={async () => {
await dispatch(changePreOrderAdditem('AddItems')), (await dispatch(changePreOrderAdditem('AddItems')),
setTotalAmount(), setTotalAmount(),
setBalaceAmount(); setBalaceAmount());
}} }}
> >
Add Item Add Item
@ -3729,12 +3728,12 @@ const OnChangeCancelPaymentOption = async (params) => {
color: Color['lightColor'], color: Color['lightColor'],
}} }}
> >
₹{' '} ₹ {CountUp}
<CountUp {/* <CountUp
duration={0.4} duration={0.4}
className="counter" className="counter"
end={Math.round(PreOrderAdvance)} end={Math.round(PreOrderAdvance)}
/> /> */}
</button> </button>
{PreOrderAdvance > 1 && {PreOrderAdvance > 1 &&
PreOrderAdvance != null && PreOrderAdvance != null &&
@ -4300,114 +4299,118 @@ const OnChangeCancelPaymentOption = async (params) => {
)} )}
{CancelModal && ( {CancelModal && (
<Modal <Modal
title={<h2 className="PreOrder-title">Cancel Pre Booking</h2>} title={<h2 className="PreOrder-title">Cancel Pre Booking</h2>}
open={CancelModal} open={CancelModal}
onCancel={() => setCancelModal(false)} onCancel={() => setCancelModal(false)}
footer={false} footer={false}
width={700} width={700}
> >
<div className="PreOrder-cancel-details"> <div className="PreOrder-cancel-details">
{/* Summary Block */}
{/* Summary Block */} <div className="summary-box">
<div className="summary-box"> <div className="summary-row">
<div className="summary-row"> <span className="summary-label">Bill Amount:</span>
<span className="summary-label">Bill Amount:</span> <span className="summary-value">
<span className="summary-value">₹ {PreOrderData?.NetAmount ?? 0}</span> ₹ {PreOrderData?.NetAmount ?? 0}
</div> </span>
<div className="summary-row"> </div>
<span className="summary-label">Advance Paid:</span> <div className="summary-row">
<span className="summary-value">₹ {PreOrderData?.PaidAmount ?? 0}</span> <span className="summary-label">Advance Paid:</span>
</div> <span className="summary-value">
</div> ₹ {PreOrderData?.PaidAmount ?? 0}
</span>
{/* Refund Amount Input */} </div>
<Form style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }} ref={cancelformRef} onFinish={() => { PreOrderCancel(PreOrderData) }}> </div>
<Form.Item
name="RefundAmount" {/* Refund Amount Input */}
rules={[ <Form
{ style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}
required: true, ref={cancelformRef}
message: 'Please enter refund amount', onFinish={() => {
}, PreOrderCancel(PreOrderData);
{ }}
pattern: /^\d+(\.\d{1,2})?$/, >
message: 'Only valid numbers allowed (max 2 decimals)', <Form.Item
}, name="RefundAmount"
{ rules={[
validator: handlerefundvalidator, {
}, required: true,
]} message: 'Please enter refund amount',
> },
<InputField {
field="RefundAmount" pattern: /^\d+(\.\d{1,2})?$/,
autoComplete="off" message: 'Only valid numbers allowed (max 2 decimals)',
label={<label className="required">Refund Amount</label>} },
maxLength={10} {
fieldState={true} validator: handlerefundvalidator,
value={PreOrderRefund} },
fieldApi={true} ]}
onChange={OnchangeRefund} >
isOnChange={!!PreOrderRefund} <InputField
onKeyPress={(e) => { field="RefundAmount"
const char = String.fromCharCode(e.charCode); autoComplete="off"
const isValid = /[0-9.]$/.test(char); label={<label className="required">Refund Amount</label>}
if (!isValid) e.preventDefault(); maxLength={10}
if (char === '.' && e.currentTarget.value.includes('.')) { fieldState={true}
e.preventDefault(); value={PreOrderRefund}
} fieldApi={true}
}} onChange={OnchangeRefund}
/> isOnChange={!!PreOrderRefund}
</Form.Item> onKeyPress={(e) => {
const char = String.fromCharCode(e.charCode);
const isValid = /[0-9.]$/.test(char);
{/* Payment Method Dropdown */} if (!isValid) e.preventDefault();
<Form.Item if (char === '.' && e.currentTarget.value.includes('.')) {
name="CancelPayOptions" e.preventDefault();
rules={[ }
{ }}
required: true, />
message: 'Please select a payment method', </Form.Item>
},
]} {/* Payment Method Dropdown */}
> <Form.Item
<DropDowns name="CancelPayOptions"
options={PaymentOptions rules={[
?.filter(option => option.ModeName !== 'Credit' && option.ModeName !== 'Card') {
?.map(option => ({ required: true,
value: option.ModeId, message: 'Please select a payment method',
label: option.ModeName, },
})) ]}
} >
label={<label className="required">Payment Method</label>} <DropDowns
isOnchanges={!!CancelPaymentOption} options={PaymentOptions?.filter(
onChangeFunction={OnChangeCancelPaymentOption} (option) =>
valueData={CancelPaymentOption} option.ModeName !== 'Credit' &&
/> option.ModeName !== 'Card'
</Form.Item> )?.map((option) => ({
value: option.ModeId,
<div label: option.ModeName,
style={{ }))}
display: 'flex', label={<label className="required">Payment Method</label>}
flexWrap: 'wrap', isOnchanges={!!CancelPaymentOption}
justifyContent: 'end', onChangeFunction={OnChangeCancelPaymentOption}
width: '100%', valueData={CancelPaymentOption}
/>
}} </Form.Item>
>
<Buttons <div
buttonText="Refund" style={{
color="901D77" display: 'flex',
icon={<ArrowRightOutlined />} flexWrap: 'wrap',
/> justifyContent: 'end',
</div> width: '100%',
}}
>
<Buttons
</Form> buttonText="Refund"
color="901D77"
</div> icon={<ArrowRightOutlined />}
</Modal> />
</div>
</Form>
</div>
</Modal>
)} )}
</div> </div>
</> </>

3
src/Pages/BookingScreen/Components/UtillComponents/BSNavBarPreOrder.jsx
View File

@ -3952,8 +3952,7 @@ const BSNavBarPreOrder = ({
color: Color['lightColor'], color: Color['lightColor'],
}} }}
> >
{/* ₹ <CountUp duration={0.4} className="counter" end={Math.round(PreOrderAdvance)} /> */} ₹ {safeRound(PreOrderAdvance)}
₹ {safeRound(PreOrderAdvance)}
</button> </button>
{PreOrderAdvance > 1 && {PreOrderAdvance > 1 &&
PreOrderAdvance != null && PreOrderAdvance != null &&

27
src/Pages/BookingScreen/Components/UtillComponents/useCountUp.jsx Normal file
View File

@ -0,0 +1,27 @@
import { useEffect, useState } from "react";
export const useCountUp = (end, duration = 400) => {
const [value, setValue] = useState(0);
useEffect(() => {
let start = 0;
const increment = end / (duration / 16);
const counter = setInterval(() => {
start += increment;
if (start >= end) {
setValue(end);
clearInterval(counter);
} else {
setValue(Math.floor(start));
}
}, 16);
return () => clearInterval(counter);
}, [end, duration]);
return value;
};
export default useCountUp;