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 PozoCartIcon from '../../UtillComponents/PozoCartIcon.jsx';
import BSBillingTable3 from '../BSBillingTable3/BSBillingTable3.jsx';
import useCountUp from '../../UtillComponents/useCountUp.jsx';
const subDirectory = import.meta.env.ENV_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)
);
};
const CountUp = useCountUp(
safeRound(
OrderType === 'Failed'
? FailedTotalAmt
: credit && overAllBal >= 0
? Math.max(0, TotalAmount - overAllBal)
: TotalAmount
)
);
return (
<>
<div className="BST1-Payment-structure">
@ -4291,8 +4303,8 @@ export default function BST1Payment() {
</div>
) : (
<div>
₹{' '}
<CountUp
₹{CountUp}
{/* <CountUp
duration={0.4}
className="counter"
end={safeRound(
@ -4302,7 +4314,7 @@ export default function BST1Payment() {
? Math.max(0, TotalAmount - overAllBal)
: TotalAmount
)}
/>
/> */}
</div>
)
) : (

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

@ -7,12 +7,12 @@ import {
PreferenceData,
} from '../../../../../Features/BookingScreen/BookingData/BookingData';
import { GlobalSelectedFont } from '../../../../../Features/ThemeChange/ThemeChange';
import CountUp from 'react-countup';
import '../../../../../Styles/BookingScreen/Components/BSBillingTables/BSBillingTable1/BSBPayment.scss';
import { useAuth } from '../../../../../AuthContext';
import TooltipWrapper from '../../../../../Components/Tooltip/Tooltip';
import { isMobile } from 'react-device-detect';
import { getSession } from '../../../../../Services/Others';
import useCountUp from '../../UtillComponents/useCountUp';
const PaymentInput = ({
orderType,
@ -50,7 +50,11 @@ const PaymentInput = ({
const [addnewAccess, setaddnewAccess] = useState(true);
const UserType = getSession('UserType');
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(() => {
const receivedInput = document.getElementById('recived');
@ -116,6 +120,10 @@ const PaymentInput = ({
return allowDecimal ? num.toFixed(2) : Math.round(num).toString();
}
const CountUp = useCountUp(
OrderType === 'Failed' ? failedTotalAmt : safeRound(totalAmount)
);
return (
<>
{BillingTableName === 'BillingTable1' && (
@ -138,9 +146,9 @@ const PaymentInput = ({
addnewAccess
? 'price-button-disabled'
: FirstPaymentclick === false &&
OrderCardDetail?.length > 0 &&
paybtnselected &&
CheckBookingStatus != 'Close'
OrderCardDetail?.length > 0 &&
paybtnselected &&
CheckBookingStatus != 'Close'
? !OrderStatus
? 'price-button'
: 'price-button Order'
@ -157,31 +165,51 @@ const PaymentInput = ({
style={{ fontFamily: FontFamily['head'] }}
>
{isMobile &&
(!OrderStatus ? salesBillEdit && (currentOrderNetAmount < previousNetAmount) ? <div>Refund: ₹{(previousNetAmount || 0) - (currentOrderNetAmount || 0)}</div> :
`₹ ${Math.round(
OrderType === 'Failed' ? failedTotalAmt : credit && overAllBal >= 0
? Math.max(0, totalAmount - overAllBal)
: totalAmount
)}`
: 'ORDER')}
(!OrderStatus ? (
salesBillEdit && currentOrderNetAmount < previousNetAmount ? (
<div>
Refund: ₹
{(previousNetAmount || 0) - (currentOrderNetAmount || 0)}
</div>
) : (
`₹ ${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> : (
<>
₹{' '}
{/* <CountUp
{!isMobile &&
!OrderStatus &&
(salesBillEdit && currentOrderNetAmount < previousNetAmount ? (
<div>
Refund: ₹
{(previousNetAmount || 0) - (currentOrderNetAmount || 0)}
</div>
) : (
<>
₹ {CountUp}
{/* <CountUp
duration={0.4}
className="counter"
end={(
OrderType === "Failed" ? failedTotalAmt : safeRound(totalAmount)
)}
/> */}
{OrderType === 'Failed'
? failedTotalAmt
: safeRound((credit && overAllBal >= 0)
? Math.max(0, totalAmount - overAllBal)
: totalAmount)}
</>
))}
{/* {OrderType === 'Failed'
? failedTotalAmt
: safeRound(
credit && overAllBal >= 0
? Math.max(0, totalAmount - overAllBal)
: totalAmount
)} */}
</>
))}
{!isMobile && OrderStatus && 'ORDER'}
</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 { useDateStore } from '../../../../../Features/BookingScreen/BookingData/DateStore.js';
import CustomerMobileNumberModal from '../../BookingFunctionality/CustomerOTP.jsx';
import useCountUp from '../../UtillComponents/useCountUp.jsx';
const PaymentGatewayEmbedded = lazy(
() => import('../../UtillComponents/PaymentGatewayEmbedded.jsx')
);
@ -3636,6 +3637,17 @@ const BSBillingTable3Pay = () => {
(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 (
<>
<div className="BSBilling3PayMaster">
@ -4537,8 +4549,8 @@ const BSBillingTable3Pay = () => {
)}`
) : (
<div>
₹{' '}
<CountUp
₹ {CountUp}
{/* <CountUp
duration={0.4}
className="counter"
end={safeRound(
@ -4548,7 +4560,7 @@ const BSBillingTable3Pay = () => {
? Math.max(0, TotalAmount - overAllBal)
: TotalAmount
)}
/>
/> */}
</div>
)}
</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 BSCustomerSelect from '../../UtillComponents/BSSelectCustomer.jsx';
import BSNavBarAddUser from '../../UtillComponents/BSNavBarAddUser.jsx';
import useCountUp from '../../UtillComponents/useCountUp.jsx';
//
const subDirectory = import.meta.env.ENV_BASE_URL;
@ -3430,6 +3431,16 @@ const StandardTablePayment = () => {
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 (
<div className="booking-table-footer" style={{ padding: '0' }}>
<Messages
@ -3942,8 +3953,8 @@ const StandardTablePayment = () => {
)}`
) : (
<div>
₹{' '}
<CountUp
₹{CountUp}
{/* <CountUp
duration={0.4}
className="counter"
end={safeRound(
@ -3953,7 +3964,7 @@ const StandardTablePayment = () => {
? Math.max(0, TotalAmount - overAllBal)
: TotalAmount
)}
/>
/> */}
</div>
)}
</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';
import pozologoimg from '../../../../Images/pozologoimg.png';
import CustomerOrders from '../BookingFunctionality/CustomerOrders.jsx';
import useCountUp from '../UtillComponents/useCountUp.jsx';
const PaymentGatewayEmbedded = lazy(
() => 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 (
<>
<div
@ -4650,8 +4661,8 @@ const BSC1Payment = (props) => {
)}`
) : (
<div>
₹
<CountUp
₹ {CountUp}
{/* <CountUp
duration={0.4}
className="counter"
end={safeRound(
@ -4661,7 +4672,7 @@ const BSC1Payment = (props) => {
? Math.max(0, TotalAmount - overAllBal)
: TotalAmount
)}
/>
/> */}
</div>
)}
<AiOutlineArrowRight width="25px" height="25px" />

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

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

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