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

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

src/Pages/BookingScreen/Components/BSBillingTables/BSBillingTable1/BST1Payment.jsx

@@ -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>
                   )
                 ) : (

src/Pages/BookingScreen/Components/BSBillingTables/BSBillingTable1/BalanceAndReceived.jsx

@@ -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' && (
@@ -157,17 +165,35 @@ const PaymentInput = ({
               style={{ fontFamily: FontFamily['head'] }}
             >
               {isMobile &&
-                (!OrderStatus ? salesBillEdit && (currentOrderNetAmount < previousNetAmount) ? <div>Refund: ₹{(previousNetAmount || 0) - (currentOrderNetAmount || 0)}</div> :
+                (!OrderStatus ? (
+                  salesBillEdit && currentOrderNetAmount < previousNetAmount ? (
+                    <div>
+                      Refund: ₹
+                      {(previousNetAmount || 0) - (currentOrderNetAmount || 0)}
+                    </div>
+                  ) : (
                     `₹ ${Math.round(
-                    OrderType === 'Failed' ? failedTotalAmt : credit && overAllBal >= 0
+                      OrderType === 'Failed'
+                        ? failedTotalAmt
+                        : credit && overAllBal >= 0
                           ? Math.max(0, totalAmount - overAllBal)
                           : totalAmount
                     )}`
-                  : 'ORDER')}
+                  )
+                ) : (
+                  'ORDER'
+                ))}
 
-              {!isMobile && !OrderStatus && ((salesBillEdit && (currentOrderNetAmount < previousNetAmount)) ? <div>Refund: ₹{(previousNetAmount || 0) - (currentOrderNetAmount || 0)}</div> : (
+              {!isMobile &&
+                !OrderStatus &&
+                (salesBillEdit && currentOrderNetAmount < previousNetAmount ? (
+                  <div>
+                    Refund: ₹
+                    {(previousNetAmount || 0) - (currentOrderNetAmount || 0)}
+                  </div>
+                ) : (
                   <>
-                  ₹{' '}
+                    ₹ {CountUp}
                     {/* <CountUp
                 duration={0.4}
                 className="counter"
@@ -175,11 +201,13 @@ const PaymentInput = ({
                   OrderType === "Failed" ? failedTotalAmt : safeRound(totalAmount)
                 )}
               /> */}
-                  {OrderType === 'Failed'
+                    {/* {OrderType === 'Failed'
                       ? failedTotalAmt
-                    : safeRound((credit && overAllBal >= 0)
+                      : safeRound(
+                          credit && overAllBal >= 0
                             ? Math.max(0, totalAmount - overAllBal)
-                      : totalAmount)}
+                            : totalAmount
+                        )} */}
                   </>
                 ))}
 

src/Pages/BookingScreen/Components/BSBillingTables/BSBillingTable3/BSBillingTable3pay.jsx

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

src/Pages/BookingScreen/Components/BSBillingTables/StandardTable/StandardTablePayment.jsx

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

src/Pages/BookingScreen/Components/BSCombo/BSC1Payment.jsx

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

src/Pages/BookingScreen/Components/UtillComponents/BSComboNavBarPreOrder.jsx

@@ -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;
 
@@ -469,7 +470,7 @@ const BSComboNavBarPreOrder = () => {
   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,21 +2739,15 @@ 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,
@@ -2759,13 +2756,14 @@ const OnChangeCancelPaymentOption = async (params) => {
       ...(params?.PaidAmount > 0 && {
         OrderPaymentDtl: [
           {
-              PaymentType: cancelformRef?.current?.getFieldsValue()?.CancelPayOptions,
+            PaymentType:
+              cancelformRef?.current?.getFieldsValue()?.CancelPayOptions,
             Amount: cancelformRef?.current?.getFieldsValue()?.RefundAmount || 0,
-              PaymentStatus: "S"
+            PaymentStatus: 'S',
-            }
+          },
-          ]
+        ],
       }),
-        CreatedBy: UserId
+      CreatedBy: UserId,
     };
     let DeleteResponse = await dispatch(PreOrderBookingDataCancel(CancelDat));
     if (DeleteResponse?.payload?.data?.statusCode === 1) {
@@ -2781,8 +2779,7 @@ const OnChangeCancelPaymentOption = async (params) => {
       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 &&
@@ -4308,21 +4307,30 @@ const OnChangeCancelPaymentOption = async (params) => {
             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>
+                  <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>
+                  <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
+                style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}
+                ref={cancelformRef}
+                onFinish={() => {
+                  PreOrderCancel(PreOrderData);
+                }}
+              >
                 <Form.Item
                   name="RefundAmount"
                   rules={[
@@ -4360,7 +4368,6 @@ const OnChangeCancelPaymentOption = async (params) => {
                   />
                 </Form.Item>
 
-        
                 {/* Payment Method Dropdown */}
                 <Form.Item
                   name="CancelPayOptions"
@@ -4372,13 +4379,14 @@ const OnChangeCancelPaymentOption = async (params) => {
                   ]}
                 >
                   <DropDowns
-                            options={PaymentOptions
+                    options={PaymentOptions?.filter(
-                              ?.filter(option => option.ModeName !== 'Credit' && option.ModeName !== 'Card')
+                      (option) =>
-                              ?.map(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}
@@ -4392,7 +4400,6 @@ const OnChangeCancelPaymentOption = async (params) => {
                     flexWrap: 'wrap',
                     justifyContent: 'end',
                     width: '100%',
-        
                   }}
                 >
                   <Buttons
@@ -4401,11 +4408,7 @@ const OnChangeCancelPaymentOption = async (params) => {
                     icon={<ArrowRightOutlined />}
                   />
                 </div>
-        
-        
-        
               </Form>
-        
             </div>
           </Modal>
         )}

src/Pages/BookingScreen/Components/UtillComponents/BSNavBarPreOrder.jsx

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

src/Pages/BookingScreen/Components/UtillComponents/useCountUp.jsx

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