Android_Retail/src/Pages/BookingScreen/Components/BSBillingTables/BSBillingTable2/BsBill2.jsx

import React, { useEffect, useState, Suspense } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Badge, message } from 'antd';
import defaultimage from '../../../../../Images/defaultItemImg.png';
import {
  GlobalOrderCardDetails,
  changeOrderCardDetails,
  GlobalBookingType,
  GlobalUnpaidData,
  GlobalPreviousOrderLength,
  GlobalHoldOrderDtl,
  changeReorderHoldDetails,
  changeUnpaidData,
  changeothersdata,
  GlobalSelProdWiseEst,
  GlobalBookingTypeBoth,
  GlobalOrderType,
  changeReorderProductDetails,
  changeBookingType,
  GlobalReorderProductDetails,
  changeAllProductTokenAvailable,
  changeTokenOnly,
  changeOrderType,
  ChangeNavHoldData,
  changeCustomerID,
  changeSelectedCustId,
  changeSelectedOption,
  ChangeSelectedCustDisable,
  GlobalEstimateBooking,
  changeSelProdWiseEst,
  PreferenceData,
  GlobalOtherSevices,
  GlobalDefaultBookingType,
  GlobalSelOption,
  GlobalCustId,
  changeBillEditingMode,
  changePreviousOrderPayment,
  changePreviousOrderOfferDetail,
} from '../../../../../Features/BookingScreen/BookingData/BookingData';
import {
  getTemplateData,
  SelectedGlobalBillingColorDetail,
  SelectedGlobalBillingFont,
} from '../../../../../Features/ThemeChange/ThemeChange';
import BSBillingEditQuantity from '../BSBillingEditQuantity/BSBillingEditQuantity';
import { settingDataSelector } from '../../../../../Features/PreferenceMaster/PreferenceMaster';
import WebFont from 'webfontloader';
import dineInIcon from '../../../../../Images/Dine In.svg';
import TakeAwayIcon from '../../../../../Images/Take away.svg';
import { getCustomerDisplayWindow } from '../../../../../Features/customerDisplayWindow/customerDisplayWindow.js';
import {
  ChangeTotalAmount,
  globalExtraTotalAmount,
} from '../../../../../Features/ExteraCharges/ExtraCharges.js';
import BSImeiDetails from '../BSImeiDetails/BSImeiDetails.jsx';
import { useApplyOfferto_CardDetail } from '../../UtillComponents/BSNavBarOffer/BSNavBarOffer_CustomHooks.jsx';
import { ClearOfferAppliedProducts } from '../../../../../Features/Offer/Offernew/BookingOffernew.js';
import { useUtilsComponent } from '../../../../../Services/utils.js';
import CustomerPriceHistory from '../../UtillComponents/CustomerPriceHistory.jsx';
import { calculateOverAllQtyLimit } from '../../../../../utils/calculations.js';

const MinusOutlined = React.lazy(
  () => import('@ant-design/icons/MinusOutlined')
);

const PlusOutlined = React.lazy(() => import('@ant-design/icons/PlusOutlined'));

const EditOutlined = React.lazy(() => import('@ant-design/icons/EditOutlined'));

const BsBill2 = () => {
  const { removeExtraCharge } = useUtilsComponent();
  const dispatch = useDispatch();
  const templateData = useSelector(getTemplateData);
  const OfferCheckedInSetup = templateData?.BookingNavbar?.[1].some(
    (item) => item?.OptionName == 'Offer'
  );
  const applyOffer = useApplyOfferto_CardDetail();
  const preferenceDatas = useSelector(PreferenceData);
  const preferenceOffer =
    preferenceDatas?.[0]?.['SettingDtlDetails']?.find(
      (item) => item.SettingIdName === 'Offer'
    )?.SettingValue === 'Y';
  const allowDecimal = preferenceDatas?.[0]?.SettingDtlDetails?.find(
    (setting) =>
      setting?.SettingIdName?.toLowerCase() === 'decimal' &&
      setting?.SettingValue === 'Y'
  );
  const [shortKeyMethod, setshortKeyMethod] = useState('');
  const preferenceshortcutkey = preferenceDatas?.[0]?.SettingDtlDetails?.find(
    (setting) =>
      setting?.SettingIdName?.toLowerCase() === 'shortcutkeys' &&
      setting?.SettingValue === 'Y'
  );
  const imeiModal = preferenceDatas?.[0]?.SettingDtlDetails?.some(
    (setting) =>
      setting?.SettingIdName?.toLowerCase() === 'imeidetails' &&
      setting?.SettingValue === 'Y'
  );
  console.log(imeiModal, "imeiModalimeiModal")
  const [count, setCount] = useState(1);
  const ReorderProductData = useSelector(GlobalReorderProductDetails);
  const CartOrderDetails = useSelector(GlobalOrderCardDetails);
  const BookingType = useSelector(GlobalBookingType);
  const defaultBookingType = useSelector(GlobalDefaultBookingType);

  const PreviousOrderLength = useSelector(GlobalPreviousOrderLength);
  const HoldOrderDtl = useSelector(GlobalHoldOrderDtl);
  const UnpaidData = useSelector(GlobalUnpaidData);
  const GlobProdwisedata = useSelector(GlobalSelProdWiseEst);
  const SelectedBillColor = useSelector(SelectedGlobalBillingColorDetail);
  const SettingDataSelector = useSelector(PreferenceData);
  const SelectedFont = useSelector(SelectedGlobalBillingFont);
  const BookingTypeBoth = useSelector(GlobalBookingTypeBoth);
  const OrderType = useSelector(GlobalOrderType);
  const GlobEstBooking = useSelector(GlobalEstimateBooking);

  const OtherServicesglobal = useSelector(GlobalOtherSevices);
  const GetCustId = useSelector(GlobalCustId);
  const selectedCustomer = useSelector(GlobalSelOption);

  const [customerPriceHistoryOpen, setCustomerPriceHistoryOpen] =
    useState(false);
  const [customerProduct, setCustomerProduct] = useState(null);

  const BillOrderPre = preferenceDatas?.[0]?.SettingDtlDetails?.find(
    (item) => item.SettingIdName === 'BillItemsOrder'
  )?.SettingValue;
  const [PreviousdataLength, setPreviousdataLength] =
    useState(PreviousOrderLength);
  const [Index, setIndex] = useState(null);
  const [triggerAnimation, setTriggerAnimation] = useState(true);
  const [EditQuantity, setEditQuantity] = useState(false);
  const [Modaldata, setModaldata] = useState([]);
  const [OpenImeiDetail, setOpenImeiDetail] = useState(false);
  const GlobalExtraCharge = useSelector(globalExtraTotalAmount);
  const productBasedExtraCharges = GlobalExtraCharge.filter(
    (obj) => 'ProdName' in obj
  );
  const overAllLimitPreferenece = preferenceDatas?.[0]?.[
    'SettingDtlDetails'
  ]?.find(
    (item) =>
      item.SettingIdName?.toLowerCase() === 'overalllimit' &&
      item?.SettingValue === 'Y'
  );
  const itemWiseLimitPreferenece = preferenceDatas?.[0]?.[
    'SettingDtlDetails'
  ]?.find(
    (item) =>
      item.SettingIdName?.toLowerCase() === 'itemwiselimit' &&
      item?.SettingValue === 'Y'
  );
  const maxQtyLimit =
    itemWiseLimitPreferenece?.SettingCount ||
    overAllLimitPreferenece?.SettingCount ||
    null;

  const tableDataDinein = CartOrderDetails?.filter(
    (a, b) => a.BookingTypeName === 'Dine In' && !a?.SalesId
  );
  const tableDataTakeAway =
    OrderType === 'Hold'
      ? CartOrderDetails?.filter((a, b) => a.BookingTypeName === 'TakeAway')
      : CartOrderDetails?.filter(
        (a, b) => a.BookingTypeName === 'TakeAway' && !a?.SalesId
      );
  const OldtableDataDinein = CartOrderDetails?.filter(
    (a, b) => a.BookingTypeName === 'Dine In' && a?.SalesId
  );
  const OldtableDataTakeAway =
    OrderType != 'Hold'
      ? CartOrderDetails?.filter(
        (a, b) => a.BookingTypeName === 'TakeAway' && a?.SalesId
      )
      : [];

  useEffect(() => {
    if (SelectedFont) {
      WebFont.load({
        google: {
          families: [SelectedFont], // Load the selected font
        },
      });
    }
  }, [SelectedFont]);

  useEffect(() => {
    const handleKeyDown = (e) => {
      if (e.ctrlKey && e.key.toLowerCase() === 'i') {
        e.preventDefault();

        const prodId = CartOrderDetails?.[0]?.ProdId;

        if (GetCustId && prodId) {
          setCustomerPriceHistoryOpen(true);
          setCustomerProduct(prodId);
        }
      }
    };

    window.addEventListener('keydown', handleKeyDown);

    return () => {
      window.removeEventListener('keydown', handleKeyDown);
    };
  }, [GetCustId, CartOrderDetails]);

  useEffect(() => {
    if (CartOrderDetails?.length === 0) {
      dispatch(ClearOfferAppliedProducts());
    }
    setTriggerAnimation(true);
    const customerDisplayWindow = getCustomerDisplayWindow();
    if (customerDisplayWindow && !customerDisplayWindow.closed) {
      const updatedData = {
        userData: CartOrderDetails,
      };
      customerDisplayWindow.postMessage(updatedData, '*');
    }
    const timer = setTimeout(() => {
      setTriggerAnimation(false);
    }, 400);

    return () => clearTimeout(timer);
  }, [CartOrderDetails]);

  useEffect(() => {
    const getSelectedItem = () => {
      const getItem = (data = []) => {
        if (!data.length) return null;
        return BillOrderPre === 'Y' ? data[0] : data[data.length - 1];
      };

      if (tableDataTakeAway?.length > 0) {
        return getItem(tableDataTakeAway);
      } else if (tableDataDinein?.length > 0) {
        return getItem(tableDataDinein);
      }
      return null;
    };

    const handleShortcut = (method) => {
      const item = getSelectedItem();
      if (!item) return;

      handleEditQuantity(item);
      setshortKeyMethod(method);
    };

    const handleKeyDown = (event) => {
      if (!preferenceshortcutkey) return;
      if (!event.ctrlKey) return;

      const key = event.key.toLowerCase();

      if (key === 'q') {
        event.preventDefault();
        handleShortcut('qty');
      }

      if (key === 'e') {
        event.preventDefault();
        handleShortcut('price');
      }
    };
    window.addEventListener('keydown', handleKeyDown);

    return () => {
      window.removeEventListener('keydown', handleKeyDown);
    };
  }, [preferenceshortcutkey, tableDataTakeAway, tableDataDinein, BillOrderPre]);
  function safeRound(amountStr) {
    if (amountStr == null) return allowDecimal ? '0.00' : '0';

    const cleaned = String(amountStr).replace(/[^0-9.-]+/g, '');
    const num = Number(cleaned);

    if (isNaN(num)) return allowDecimal ? '0.00' : '0';

    return allowDecimal ? num.toFixed(2) : Math.round(num).toString();
  }

  // useEffect(() => {
  //   setPreviousdataLength(PreviousOrderLength);
  // }, [PreviousOrderLength]);

  const handleImeiDetails = (value) => {
    setOpenImeiDetail(true);
    setModaldata(value);
  };
  const handleImeiDetailClose = () => {
    setOpenImeiDetail(false);
  };
  const handleCustomerProductPriceHistory = (item) => {
    setCustomerPriceHistoryOpen(true);
    setCustomerProduct(item?.ProdId);
  };
  const increase = async (item) => {
    if ((overAllLimitPreferenece || itemWiseLimitPreferenece) && maxQtyLimit) {
      if (overAllLimitPreferenece) {
        const calculatedOverAllQty = calculateOverAllQtyLimit(CartOrderDetails);
        if (calculatedOverAllQty + 1 > maxQtyLimit) {
          message.warning(`Overall Quantity Limit Exceeds than ${maxQtyLimit}`);
          return;
        }
      } else if (itemWiseLimitPreferenece) {

        const inwardQtyMap = CartOrderDetails.reduce((acc, curr) => {
          const inwardId = curr.InwardDtlId;
          const qty = Number(curr.OrderQty) || 0;

          if (acc[inwardId]) {
            acc[inwardId] += qty;
          } else {
            acc[inwardId] = qty;
          }

          return acc;
        }, {});

        const currentInwardId = item?.InwardDtlId;
        const addQty = 1;

        if (inwardQtyMap[currentInwardId]) {
          inwardQtyMap[currentInwardId] += addQty;
        } else {
          inwardQtyMap[currentInwardId] = addQty;
        }

        console.log("Final InwardDtlId Qty Map:", inwardQtyMap);
        const isExceeded = Object.values(inwardQtyMap).some(
          (qty) => qty > maxQtyLimit
        );

        if (isExceeded) {
          message.warning(`Item Quantity Limit Exceeds than ${maxQtyLimit}`);
          return;
        }
      }
    }
    const OtherOrderDatas = CartOrderDetails?.filter(
      (cartItem) =>
        !(
          cartItem?.ProdId === item?.ProdId &&
          cartItem?.InwardDtlId === item?.InwardDtlId &&
          cartItem?.OrderRate === item?.OrderRate &&
          cartItem?.BookingTypeName === item?.BookingTypeName
        ) && !cartItem?.SalesId
    );
    const OtherOrderDatawithsales = CartOrderDetails?.filter(
      (cartItem) => cartItem?.SalesId
    );
    const OtherorderDataforNormal = CartOrderDetails?.filter(
      (cartItem) =>
        !(
          cartItem?.ProdId === item?.ProdId &&
          cartItem?.InwardDtlId === item?.InwardDtlId &&
          cartItem?.OrderRate === item?.OrderRate &&
          cartItem?.BookingTypeName === item?.BookingTypeName &&
          !cartItem?.SalesId
        )
    );
    const isItemInCart = CartOrderDetails?.find(
      (cartItem) =>
        cartItem?.ProdId === item?.ProdId &&
        cartItem?.InwardDtlId === item?.InwardDtlId &&
        cartItem?.OrderRate === item?.OrderRate &&
        cartItem?.BookingTypeName === item?.BookingTypeName &&
        !cartItem?.SalesId
    ); // check if the item is already in the cart
    const isItemNotInDine = CartOrderDetails?.find(
      (cartItem) =>
        cartItem?.ProdId === item?.ProdId &&
        cartItem?.InwardDtlId === item?.InwardDtlId &&
        cartItem?.OrderRate === item?.OrderRate &&
        cartItem?.BookingTypeName === item?.BookingTypeName &&
        !cartItem?.SalesId
    ); // check if the item is already in the cart
    const isItemInCartHold = CartOrderDetails?.find(
      (cartItem) =>
        cartItem?.ProdId === item?.ProdId &&
        cartItem?.InwardDtlId === item?.InwardDtlId &&
        cartItem?.OrderRate === item?.OrderRate &&
        cartItem?.BookingTypeName === item?.BookingTypeName
    ); // check if the item is already in the cart
    const OtherorderDataforNormalWithoutSalesId = CartOrderDetails?.filter(
      (cartItem) =>
        !(
          cartItem?.ProdId === item?.ProdId &&
          cartItem?.InwardDtlId === item?.InwardDtlId &&
          cartItem?.OrderRate === item?.OrderRate &&
          cartItem?.BookingTypeName === item?.BookingTypeName
        )
    );

    const BookingTypeProd = item?.BookingTypeName;
    if (isItemInCart && BookingTypeProd != 'Dine In' && OrderType != 'Hold') {
      if (BillOrderPre === 'Y') {
        const UpdatedCartItem =
        // if the item is already in the cart, increase the quantity of the item
        {
          ...isItemInCart,
          OrderQty: isItemInCart?.OrderQty + 1,
          TotalAmt: (isItemInCart?.OrderQty + 1) * isItemInCart?.OrderRate,
          TaxAmt: (
            ((isItemInCart?.OrderQty + 1) *
              isItemInCart?.OrderRate *
              isItemInCart?.TaxPercentage) /
            (100 + isItemInCart?.TaxPercentage)
          ).toFixed(2),
          WithoutTaxRate:
            (isItemInCart?.OrderQty + 1) * isItemInCart?.OrderRate -
            (
              ((isItemInCart?.OrderQty + 1) *
                isItemInCart?.OrderRate *
                isItemInCart?.TaxPercentage) /
              (100 + isItemInCart?.TaxPercentage)
            ).toFixed(2),
        };

        const UpdatedData = [UpdatedCartItem, ...OtherorderDataforNormal];

        if (OfferCheckedInSetup && preferenceOffer) {
          await applyOffer(UpdatedData);
        } else {
          dispatch(changeOrderCardDetails(UpdatedData));
        }
      } else {
        const UpdatedCartItem =
        // if the item is already in the cart, increase the quantity of the item
        {
          ...isItemInCart,
          OrderQty: isItemInCart?.OrderQty + 1,
          TotalAmt: (isItemInCart?.OrderQty + 1) * isItemInCart?.OrderRate,
          TaxAmt: (
            ((isItemInCart?.OrderQty + 1) *
              isItemInCart?.OrderRate *
              isItemInCart?.TaxPercentage) /
            (100 + isItemInCart?.TaxPercentage)
          ).toFixed(2),
          WithoutTaxRate:
            (isItemInCart?.OrderQty + 1) * isItemInCart?.OrderRate -
            (
              ((isItemInCart?.OrderQty + 1) *
                isItemInCart?.OrderRate *
                isItemInCart?.TaxPercentage) /
              (100 + isItemInCart?.TaxPercentage)
            ).toFixed(2),
        };

        const UpdatedData = [...OtherorderDataforNormal, UpdatedCartItem];

        if (OfferCheckedInSetup && preferenceOffer) {
          await applyOffer(UpdatedData);
        } else {
          dispatch(changeOrderCardDetails(UpdatedData));
        }
      }
    }
    //mohan for both
    else if (
      isItemInCart &&
      BookingTypeProd === 'Dine In' &&
      OrderType != 'Hold'
    ) {
      if (BillOrderPre === 'Y') {
        const UpdatedCartItem =
        // if the item is already in the cart, increase the quantity of the item
        {
          ...isItemInCart,
          OrderQty: isItemInCart?.OrderQty + 1,
          TotalAmt: (isItemInCart?.OrderQty + 1) * isItemInCart?.OrderRate,
          TaxAmt: (
            ((isItemInCart?.OrderQty + 1) *
              isItemInCart?.OrderRate *
              isItemInCart?.TaxPercentage) /
            (100 + isItemInCart?.TaxPercentage)
          ).toFixed(2),
          WithoutTaxRate:
            (isItemInCart?.OrderQty + 1) * isItemInCart?.OrderRate -
            (
              ((isItemInCart?.OrderQty + 1) *
                isItemInCart?.OrderRate *
                isItemInCart?.TaxPercentage) /
              (100 + isItemInCart?.TaxPercentage)
            ).toFixed(2),
        };

        const UpdatedData = [UpdatedCartItem, ...OtherorderDataforNormal];

        if (OfferCheckedInSetup && preferenceOffer) {
          await applyOffer(UpdatedData);
        } else {
          dispatch(changeOrderCardDetails(UpdatedData));
        }
      } else {
        const UpdatedCartItem =
        // if the item is already in the cart, increase the quantity of the item
        {
          ...isItemInCart,
          OrderQty: isItemInCart?.OrderQty + 1,
          TotalAmt: (isItemInCart?.OrderQty + 1) * isItemInCart?.OrderRate,
          TaxAmt: (
            ((isItemInCart?.OrderQty + 1) *
              isItemInCart?.OrderRate *
              isItemInCart?.TaxPercentage) /
            (100 + isItemInCart?.TaxPercentage)
          ).toFixed(2),
          WithoutTaxRate:
            (isItemInCart?.OrderQty + 1) * isItemInCart?.OrderRate -
            (
              ((isItemInCart?.OrderQty + 1) *
                isItemInCart?.OrderRate *
                isItemInCart?.TaxPercentage) /
              (100 + isItemInCart?.TaxPercentage)
            ).toFixed(2),
        };

        const UpdatedData = [...OtherorderDataforNormal, UpdatedCartItem];

        if (OfferCheckedInSetup && preferenceOffer) {
          await applyOffer(UpdatedData);
        } else {
          dispatch(changeOrderCardDetails(UpdatedData));
        }
      }
    } else if (isItemInCartHold && OrderType === 'Hold') {
      if (BillOrderPre === 'Y') {
        const UpdatedCartItem =
        // if the item is already in the cart, increase the quantity of the item
        {
          ...isItemInCartHold,
          OrderQty: isItemInCartHold?.OrderQty + 1,
          TotalAmt:
            (isItemInCartHold?.OrderQty + 1) * isItemInCartHold?.OrderRate,
          TaxAmt: (
            ((isItemInCartHold?.OrderQty + 1) *
              isItemInCartHold?.OrderRate *
              isItemInCartHold?.TaxPercentage) /
            (100 + isItemInCartHold?.TaxPercentage)
          ).toFixed(2),
          WithoutTaxRate:
            (isItemInCartHold?.OrderQty + 1) * isItemInCartHold?.OrderRate -
            (
              ((isItemInCartHold?.OrderQty + 1) *
                isItemInCartHold?.OrderRate *
                isItemInCartHold?.TaxPercentage) /
              (100 + isItemInCartHold?.TaxPercentage)
            ).toFixed(2),
        };

        const UpdatedData = [
          UpdatedCartItem,
          ...OtherorderDataforNormalWithoutSalesId,
        ];

        if (OfferCheckedInSetup && preferenceOffer) {
          await applyOffer(UpdatedData);
        } else {
          dispatch(changeOrderCardDetails(UpdatedData));
        }
      } else {
        const UpdatedCartItem =
        // if the item is already in the cart, increase the quantity of the item
        {
          ...isItemInCartHold,
          OrderQty: isItemInCartHold?.OrderQty + 1,
          TotalAmt:
            (isItemInCartHold?.OrderQty + 1) * isItemInCartHold?.OrderRate,
          TaxAmt: (
            ((isItemInCartHold?.OrderQty + 1) *
              isItemInCartHold?.OrderRate *
              isItemInCartHold?.TaxPercentage) /
            (100 + isItemInCartHold?.TaxPercentage)
          ).toFixed(2),
          WithoutTaxRate:
            (isItemInCartHold?.OrderQty + 1) * isItemInCartHold?.OrderRate -
            (
              ((isItemInCartHold?.OrderQty + 1) *
                isItemInCartHold?.OrderRate *
                isItemInCartHold?.TaxPercentage) /
              (100 + isItemInCartHold?.TaxPercentage)
            ).toFixed(2),
        };

        const UpdatedData = [
          ...OtherorderDataforNormalWithoutSalesId,
          UpdatedCartItem,
        ];

        if (OfferCheckedInSetup && preferenceOffer) {
          await applyOffer(UpdatedData);
        } else {
          dispatch(changeOrderCardDetails(UpdatedData));
        }
      }
    } else if (
      isItemNotInDine &&
      BookingTypeProd == 'Dine In' &&
      OrderType != 'Hold'
    ) {
      if (BillOrderPre === 'Y') {
        const UpdatedCartItem = {
          ...isItemNotInDine,
          OrderQty: isItemNotInDine?.OrderQty + 1,
          TotalAmt:
            (isItemNotInDine?.OrderQty + 1) * isItemNotInDine?.OrderRate,
          TaxAmt: (
            ((isItemNotInDine?.OrderQty + 1) *
              isItemNotInDine?.OrderRate *
              isItemNotInDine?.TaxPercentage) /
            (100 + isItemNotInDine?.TaxPercentage)
          ).toFixed(2),
          WithoutTaxRate:
            (isItemNotInDine?.OrderQty + 1) * isItemNotInDine?.OrderRate -
            (
              ((isItemNotInDine?.OrderQty + 1) *
                isItemNotInDine?.OrderRate *
                isItemNotInDine?.TaxPercentage) /
              (100 + isItemNotInDine?.TaxPercentage)
            ).toFixed(2),
        };
        // otherwise, return the cart item
        const UpdatedData = [
          UpdatedCartItem,
          ...OtherOrderDatas,
          ...OtherOrderDatawithsales,
        ];

        if (OfferCheckedInSetup && preferenceOffer) {
          await applyOffer(UpdatedData);
        } else {
          dispatch(changeOrderCardDetails(UpdatedData));
        }
      } else {
        const UpdatedCartItem = {
          ...isItemNotInDine,
          OrderQty: isItemNotInDine?.OrderQty + 1,
          TotalAmt:
            (isItemNotInDine?.OrderQty + 1) * isItemNotInDine?.OrderRate,
          TaxAmt: (
            ((isItemNotInDine?.OrderQty + 1) *
              isItemNotInDine?.OrderRate *
              isItemNotInDine?.TaxPercentage) /
            (100 + isItemNotInDine?.TaxPercentage)
          ).toFixed(2),
          WithoutTaxRate:
            (isItemNotInDine?.OrderQty + 1) * isItemNotInDine?.OrderRate -
            (
              ((isItemNotInDine?.OrderQty + 1) *
                isItemNotInDine?.OrderRate *
                isItemNotInDine?.TaxPercentage) /
              (100 + isItemNotInDine?.TaxPercentage)
            ).toFixed(2),
        };
        // otherwise, return the cart item
        const UpdatedData = [
          ...OtherOrderDatawithsales,
          ...OtherOrderDatas,
          UpdatedCartItem,
        ];

        if (OfferCheckedInSetup && preferenceOffer) {
          await applyOffer(UpdatedData);
        } else {
          dispatch(changeOrderCardDetails(UpdatedData));
        }
      }
    }
    await dispatch(changeothersdata({}));

    setCount(count + 1);
  };
  const decline = async (item) => {
    setPreviousdataLength(CartOrderDetails?.length);
    const isItemInCart = CartOrderDetails?.find(
      (cartItem) =>
        cartItem?.ProdId === item?.ProdId &&
        cartItem?.InwardDtlId === item?.InwardDtlId &&
        cartItem?.OrderRate === item?.OrderRate &&
        cartItem?.BookingTypeName === item?.BookingTypeName
    ); // check if the item is already in the cart
    if (isItemInCart) {
      if (isItemInCart?.OrderQty > 1) {
        const OtherOrderDatas = CartOrderDetails?.filter(
          (cartItem) =>
            !(
              cartItem?.ProdId === item?.ProdId &&
              cartItem?.InwardDtlId === item?.InwardDtlId &&
              cartItem?.OrderRate === item?.OrderRate &&
              cartItem?.BookingTypeName === item?.BookingTypeName
            ) && !cartItem?.SalesId
        );
        const OtherOrderDatawithsales = CartOrderDetails?.filter(
          (cartItem) => cartItem?.SalesId
        );

        const OtherorderDataforNormal = CartOrderDetails?.filter(
          (cartItem) =>
            !(
              cartItem?.ProdId === item?.ProdId &&
              cartItem?.InwardDtlId === item?.InwardDtlId &&
              cartItem?.OrderRate === item?.OrderRate &&
              cartItem?.BookingTypeName === item?.BookingTypeName &&
              !cartItem?.SalesId
            )
        );
        const isItemInCart = CartOrderDetails?.find(
          (cartItem) =>
            cartItem?.ProdId === item?.ProdId &&
            cartItem?.InwardDtlId === item?.InwardDtlId &&
            cartItem?.OrderRate === item?.OrderRate &&
            cartItem?.BookingTypeName === item?.BookingTypeName &&
            !cartItem?.SalesId
        ); // check if the item is already in the cart
        const isItemNotInDine = CartOrderDetails?.find(
          (cartItem) =>
            cartItem?.ProdId === item?.ProdId &&
            cartItem?.InwardDtlId === item?.InwardDtlId &&
            cartItem?.OrderRate === item?.OrderRate &&
            cartItem?.BookingTypeName === item?.BookingTypeName &&
            !cartItem?.SalesId
        ); // check if the item is already in the cart
        const isItemInCartHold = CartOrderDetails?.find(
          (cartItem) =>
            cartItem?.ProdId === item?.ProdId &&
            cartItem?.InwardDtlId === item?.InwardDtlId &&
            cartItem?.OrderRate === item?.OrderRate &&
            cartItem?.BookingTypeName === item?.BookingTypeName
        ); // check if the item is already in the cart
        const OtherorderDataforNormalWithoutSalesId = CartOrderDetails?.filter(
          (cartItem) =>
            !(
              cartItem?.ProdId === item?.ProdId &&
              cartItem?.InwardDtlId === item?.InwardDtlId &&
              cartItem?.OrderRate === item?.OrderRate &&
              cartItem?.BookingTypeName === item?.BookingTypeName
            )
        );

        const BookingTypeProd = item?.BookingTypeName;
        if (
          isItemInCart &&
          BookingTypeProd !== 'Dine In' &&
          OrderType !== 'Hold'
        ) {
          if (BillOrderPre === 'Y') {
            const UpdatedCartItem =
            // if the item is already in the cart, increase the quantity of the item
            {
              ...isItemInCart,
              OrderQty: isItemInCart?.OrderQty - 1,
              TotalAmt:
                (isItemInCart?.OrderQty - 1) * isItemInCart?.OrderRate,
              TaxAmt: (
                ((isItemInCart?.OrderQty - 1) *
                  isItemInCart?.OrderRate *
                  isItemInCart?.TaxPercentage) /
                (100 + isItemInCart?.TaxPercentage)
              ).toFixed(2),
              WithoutTaxRate:
                (isItemInCart?.OrderQty - 1) * isItemInCart?.OrderRate -
                (
                  ((isItemInCart?.OrderQty - 1) *
                    isItemInCart?.OrderRate *
                    isItemInCart?.TaxPercentage) /
                  (100 + isItemInCart?.TaxPercentage)
                ).toFixed(2),
            };

            const UpdatedData = [UpdatedCartItem, ...OtherorderDataforNormal];

            if (OfferCheckedInSetup && preferenceOffer) {
              await applyOffer(UpdatedData);
            } else {
              dispatch(changeOrderCardDetails(UpdatedData));
            }
          } else {
            const UpdatedCartItem =
            // if the item is already in the cart, increase the quantity of the item
            {
              ...isItemInCart,
              OrderQty: isItemInCart?.OrderQty - 1,
              TotalAmt:
                (isItemInCart?.OrderQty - 1) * isItemInCart?.OrderRate,
              TaxAmt: (
                ((isItemInCart?.OrderQty - 1) *
                  isItemInCart?.OrderRate *
                  isItemInCart?.TaxPercentage) /
                (100 + isItemInCart?.TaxPercentage)
              ).toFixed(2),
              WithoutTaxRate:
                (isItemInCart?.OrderQty - 1) * isItemInCart?.OrderRate -
                (
                  ((isItemInCart?.OrderQty - 1) *
                    isItemInCart?.OrderRate *
                    isItemInCart?.TaxPercentage) /
                  (100 + isItemInCart?.TaxPercentage)
                ).toFixed(2),
            };

            const UpdatedData = [...OtherorderDataforNormal, UpdatedCartItem];

            if (OfferCheckedInSetup && preferenceOffer) {
              await applyOffer(UpdatedData);
            } else {
              dispatch(changeOrderCardDetails(UpdatedData));
            }
          }
        }
        //mohan for both
        else if (
          isItemInCart &&
          BookingTypeProd === 'Dine In' &&
          OrderType != 'Hold'
        ) {
          if (BillOrderPre === 'Y') {
            const UpdatedCartItem =
            // if the item is already in the cart, increase the quantity of the item
            {
              ...isItemInCart,
              OrderQty: isItemInCart?.OrderQty - 1,
              TotalAmt:
                (isItemInCart?.OrderQty - 1) * isItemInCart?.OrderRate,
              TaxAmt: (
                ((isItemInCart?.OrderQty - 1) *
                  isItemInCart?.OrderRate *
                  isItemInCart?.TaxPercentage) /
                (100 + isItemInCart?.TaxPercentage)
              ).toFixed(2),
              WithoutTaxRate:
                (isItemInCart?.OrderQty - 1) * isItemInCart?.OrderRate -
                (
                  ((isItemInCart?.OrderQty - 1) *
                    isItemInCart?.OrderRate *
                    isItemInCart?.TaxPercentage) /
                  (100 + isItemInCart?.TaxPercentage)
                ).toFixed(2),
            };

            const UpdatedData = [UpdatedCartItem, ...OtherorderDataforNormal];

            if (OfferCheckedInSetup && preferenceOffer) {
              await applyOffer(UpdatedData);
            } else {
              dispatch(changeOrderCardDetails(UpdatedData));
            }
          } else {
            const UpdatedCartItem =
            // if the item is already in the cart, increase the quantity of the item
            {
              ...isItemInCart,
              OrderQty: isItemInCart?.OrderQty - 1,
              TotalAmt:
                (isItemInCart?.OrderQty - 1) * isItemInCart?.OrderRate,
              TaxAmt: (
                ((isItemInCart?.OrderQty - 1) *
                  isItemInCart?.OrderRate *
                  isItemInCart?.TaxPercentage) /
                (100 + isItemInCart?.TaxPercentage)
              ).toFixed(2),
              WithoutTaxRate:
                (isItemInCart?.OrderQty - 1) * isItemInCart?.OrderRate -
                (
                  ((isItemInCart?.OrderQty - 1) *
                    isItemInCart?.OrderRate *
                    isItemInCart?.TaxPercentage) /
                  (100 + isItemInCart?.TaxPercentage)
                ).toFixed(2),
            };

            const UpdatedData = [...OtherorderDataforNormal, UpdatedCartItem];

            if (OfferCheckedInSetup && preferenceOffer) {
              await applyOffer(UpdatedData);
            } else {
              dispatch(changeOrderCardDetails(UpdatedData));
            }
          }
        } else if (isItemInCartHold && OrderType === 'Hold') {
          if (BillOrderPre === 'Y') {
            const UpdatedCartItem =
            // if the item is already in the cart, increase the quantity of the item
            {
              ...isItemInCartHold,
              OrderQty: isItemInCartHold?.OrderQty - 1,
              TotalAmt:
                (isItemInCartHold?.OrderQty - 1) *
                isItemInCartHold?.OrderRate,
              TaxAmt: (
                ((isItemInCartHold?.OrderQty - 1) *
                  isItemInCartHold?.OrderRate *
                  isItemInCartHold?.TaxPercentage) /
                (100 + isItemInCartHold?.TaxPercentage)
              ).toFixed(2),
              WithoutTaxRate:
                (isItemInCartHold?.OrderQty - 1) *
                isItemInCartHold?.OrderRate -
                (
                  ((isItemInCartHold?.OrderQty - 1) *
                    isItemInCartHold?.OrderRate *
                    isItemInCartHold?.TaxPercentage) /
                  (100 + isItemInCartHold?.TaxPercentage)
                ).toFixed(2),
            };

            const UpdatedData = [
              UpdatedCartItem,
              ...OtherorderDataforNormalWithoutSalesId,
            ];

            if (OfferCheckedInSetup && preferenceOffer) {
              await applyOffer(UpdatedData);
            } else {
              dispatch(changeOrderCardDetails(UpdatedData));
            }
          } else {
            const UpdatedCartItem =
            // if the item is already in the cart, increase the quantity of the item
            {
              ...isItemInCartHold,
              OrderQty: isItemInCartHold?.OrderQty - 1,
              TotalAmt:
                (isItemInCartHold?.OrderQty - 1) *
                isItemInCartHold?.OrderRate,
              TaxAmt: (
                ((isItemInCartHold?.OrderQty - 1) *
                  isItemInCartHold?.OrderRate *
                  isItemInCartHold?.TaxPercentage) /
                (100 + isItemInCartHold?.TaxPercentage)
              ).toFixed(2),
              WithoutTaxRate:
                (isItemInCartHold?.OrderQty - 1) *
                isItemInCartHold?.OrderRate -
                (
                  ((isItemInCartHold?.OrderQty - 1) *
                    isItemInCartHold?.OrderRate *
                    isItemInCartHold?.TaxPercentage) /
                  (100 + isItemInCartHold?.TaxPercentage)
                ).toFixed(2),
            };

            const UpdatedData = [
              ...OtherorderDataforNormalWithoutSalesId,
              UpdatedCartItem,
            ];

            if (OfferCheckedInSetup && preferenceOffer) {
              await applyOffer(UpdatedData);
            } else {
              dispatch(changeOrderCardDetails(UpdatedData));
            }
          }
        } else if (
          isItemNotInDine &&
          BookingTypeProd == 'Dine In' &&
          OrderType != 'Hold'
        ) {
          if (BillOrderPre === 'Y') {
            const UpdatedCartItem = {
              ...isItemNotInDine,
              OrderQty: isItemNotInDine?.OrderQty - 1,
              TotalAmt:
                (isItemNotInDine?.OrderQty - 1) * isItemNotInDine?.OrderRate,
              TaxAmt: (
                ((isItemNotInDine?.OrderQty - 1) *
                  isItemNotInDine?.OrderRate *
                  isItemNotInDine?.TaxPercentage) /
                (100 + isItemNotInDine?.TaxPercentage)
              ).toFixed(2),
              WithoutTaxRate:
                (isItemNotInDine?.OrderQty - 1) * isItemNotInDine?.OrderRate -
                (
                  ((isItemNotInDine?.OrderQty - 1) *
                    isItemNotInDine?.OrderRate *
                    isItemNotInDine?.TaxPercentage) /
                  (100 + isItemNotInDine?.TaxPercentage)
                ).toFixed(2),
            };
            // otherwise, return the cart item
            const UpdatedData = [
              UpdatedCartItem,
              ...OtherOrderDatas,
              ...OtherOrderDatawithsales,
            ];

            if (OfferCheckedInSetup && preferenceOffer) {
              await applyOffer(UpdatedData);
            } else {
              dispatch(changeOrderCardDetails(UpdatedData));
            }
          } else {
            const UpdatedCartItem = {
              ...isItemNotInDine,
              OrderQty: isItemNotInDine?.OrderQty - 1,
              TotalAmt:
                (isItemNotInDine?.OrderQty - 1) * isItemNotInDine?.OrderRate,
              TaxAmt: (
                ((isItemNotInDine?.OrderQty - 1) *
                  isItemNotInDine?.OrderRate *
                  isItemNotInDine?.TaxPercentage) /
                (100 + isItemNotInDine?.TaxPercentage)
              ).toFixed(2),
              WithoutTaxRate:
                (isItemNotInDine?.OrderQty - 1) * isItemNotInDine?.OrderRate -
                (
                  ((isItemNotInDine?.OrderQty - 1) *
                    isItemNotInDine?.OrderRate *
                    isItemNotInDine?.TaxPercentage) /
                  (100 + isItemNotInDine?.TaxPercentage)
                ).toFixed(2),
            };
            // otherwise, return the cart item
            const UpdatedData = [
              ...OtherOrderDatawithsales,
              ...OtherOrderDatas,
              UpdatedCartItem,
            ];

            if (OfferCheckedInSetup && preferenceOffer) {
              await applyOffer(UpdatedData);
            } else {
              dispatch(changeOrderCardDetails(UpdatedData));
            }
          }
        }
      } else {
        removeExtraCharge(item);
        await dispatch(
          ChangeTotalAmount(
            GlobalExtraCharge?.filter((extra) => {
              if (BookingType === 'Dine In') {
                // Remove extra charges linked to the removed product
                return !(extra.ProdId === item?.ProdId && !extra.SalesId);
              } else if (BookingType === 'TakeAway') {
                // Remove extra charges only if SalesId is not present
                return extra.ProdId !== item?.ProdId;
              }
              return true; // Keep everything else
            })
          )
        ); // if the quantity of the item is 1, remove the item from the cart
        if (item?.BookingTypeName !== 'Dine In' && OrderType !== 'Hold') {
          const UpdatedData = CartOrderDetails?.filter(
            (cartItem) =>
              !(
                cartItem?.ProdId === item?.ProdId &&
                cartItem?.InwardDtlId === item?.InwardDtlId &&
                cartItem?.OrderRate === item?.OrderRate &&
                cartItem?.BookingTypeName === item?.BookingTypeName &&
                !cartItem?.SalesId
              )
          );
          // if the quantity of the item is 1, remove the item from the cart
          if (CartOrderDetails?.length <= 1) {
            await dispatch(changeReorderHoldDetails({}));
            await dispatch(changeReorderProductDetails([]));
            await dispatch(changeUnpaidData(false));
            await dispatch(changeBookingType(defaultBookingType || 'TakeAway'));
            await dispatch(changeTokenOnly(false));
            await dispatch(changeAllProductTokenAvailable(false));
            await dispatch(changeSelProdWiseEst([]));
            await dispatch(ChangeTotalAmount([]));
            dispatch(changeBillEditingMode(false));
            await dispatch(changePreviousOrderPayment([]));
            await dispatch(changePreviousOrderOfferDetail([]));
          }

          if (OfferCheckedInSetup && preferenceOffer) {
            await applyOffer(UpdatedData);
          } else {
            dispatch(changeOrderCardDetails(UpdatedData));
          }
        } else if (
          item?.BookingTypeName !== 'Dine In' &&
          OrderType === 'Hold'
        ) {
          const UpdatedData = CartOrderDetails?.filter(
            (cartItem) =>
              !(
                cartItem?.ProdId === item?.ProdId &&
                cartItem?.InwardDtlId === item?.InwardDtlId &&
                cartItem?.OrderRate === item?.OrderRate &&
                cartItem?.BookingTypeName === item?.BookingTypeName
              )
          );

          if (OfferCheckedInSetup && preferenceOffer) {
            await applyOffer(UpdatedData);
          } else {
            dispatch(changeOrderCardDetails(UpdatedData));
          }

          // if the quantity of the item is 1, remove the item from the cart
          if (CartOrderDetails?.length <= 1) {
            await dispatch(changeReorderHoldDetails({}));
            await dispatch(changeUnpaidData(false));
            await dispatch(changeBookingType('TakeAway'));
            await dispatch(changeTokenOnly(false));
            await dispatch(changeAllProductTokenAvailable(false));
            await dispatch(changeSelProdWiseEst([]));
            await dispatch(ChangeTotalAmount([]));
            dispatch(changeBillEditingMode(false));
            await dispatch(changePreviousOrderPayment([]));
            await dispatch(changePreviousOrderOfferDetail([]));
          }
        } else if (item?.BookingTypeName === 'Dine In') {
          const UpdatedData = CartOrderDetails?.filter(
            (cartItem) =>
              !(
                cartItem?.ProdId === item?.ProdId &&
                cartItem?.InwardDtlId === item?.InwardDtlId &&
                cartItem?.OrderRate === item?.OrderRate &&
                cartItem?.BookingTypeName === item?.BookingTypeName &&
                !cartItem?.SalesId
              )
          );

          if (OfferCheckedInSetup && preferenceOffer) {
            await applyOffer(UpdatedData);
          } else {
            dispatch(changeOrderCardDetails(UpdatedData));
          }
          if (CartOrderDetails?.length <= 1) {
            await dispatch(changeReorderHoldDetails({}));
            await dispatch(changeUnpaidData(false));
            await dispatch(ChangeSelectedCustDisable(false));
            await dispatch(changeSelectedOption(false));
            await dispatch(changeBookingType('TakeAway'));
            await dispatch(changeTokenOnly(false));
            await dispatch(changeAllProductTokenAvailable(false));
            await dispatch(changeSelProdWiseEst([]));
            await dispatch(ChangeTotalAmount([]));
            dispatch(changeBillEditingMode(false));
            await dispatch(changePreviousOrderPayment([]));
            await dispatch(changePreviousOrderOfferDetail([]));
          }
        }
      }
    }
  };
  const returnCount = (item) => {
    console.log(item, 'itemitem');
    if (item?.SinglePc === 'Y') {
      let SelectedProduct = ReorderProductData?.filter(
        (a) =>
          a?.ProdId === item?.ProdId && a?.InwardDtlId === item?.InwardDtlId
      );
      let totalSelectedProductQty = SelectedProduct?.reduce(
        (accumulator, card) => {
          return (
            accumulator +
            parseInt(
              card?.StockAvailable === 'Y'
                ? card.SinglePc !== 'Y'
                  ? card.OrderQty * card.NoOfPcs
                  : card.OrderQty
                : 0
            )
          );
        },
        0
      );
      let getCurrentProdDtl = CartOrderDetails?.filter(
        (a) =>
          a?.ProdId === item?.ProdId && a?.InwardDtlId === item?.InwardDtlId
      );
      let totalOrderQty = getCurrentProdDtl?.reduce((accumulator, card) => {
        return (
          accumulator +
          parseInt(
            card.SinglePc !== 'Y' ? card.OrderQty * card.NoOfPcs : card.OrderQty
          )
        );
      }, 0);

      let OverallProdQty = totalOrderQty - totalSelectedProductQty;
      if (
        parseInt(item?.OverAllPcs) >
        parseInt(
          Object.keys(ReorderProductData)?.length > 0 && totalOrderQty
            ? OverallProdQty
            : getCurrentProdDtl
              ? totalOrderQty
              : 0
        )
      ) {
        let count =
          parseInt(item?.OverAllPcs) -
          parseInt(
            Object.keys(ReorderProductData)?.length > 0 && totalOrderQty
              ? OverallProdQty
              : getCurrentProdDtl
                ? totalOrderQty
                : 0
          );
        return parseInt(count);
      } else {
        let count = 0;
        return count;
      }
    } else {
      let SelectedProduct = ReorderProductData?.filter(
        (a) =>
          a?.ProdId === item?.ProdId && a?.InwardDtlId === item?.InwardDtlId
      );
      let totalSelectedProductQty = SelectedProduct?.reduce(
        (accumulator, card) => {
          return (
            accumulator +
            parseInt(
              card?.StockAvailable === 'Y'
                ? card.SinglePc !== 'Y'
                  ? card.OrderQty
                  : card.OverAllPcs % card.NoOfPcs >= card.OrderQty
                    ? 0
                    : card.OrderQty % card.NoOfPcs === 0
                      ? Math.floor(card.OrderQty / card.NoOfPcs)
                      : Math.floor(card.OrderQty / card.NoOfPcs) + 1
                : 0
            )
          );
        },
        0
      );
      let getCurrentProdDtl = CartOrderDetails?.filter(
        (a) =>
          a?.ProdId === item?.ProdId && a?.InwardDtlId === item?.InwardDtlId
      );

      let totalOrderQty = getCurrentProdDtl?.reduce((accumulator, card) => {
        return (
          accumulator +
          parseInt(
            card.SinglePc !== 'Y'
              ? card.OrderQty
              : card.OverAllPcs % card.NoOfPcs >= card.OrderQty
                ? 0
                : card.OrderQty % card.NoOfPcs === 0
                  ? Math.floor(card.OrderQty / card.NoOfPcs)
                  : Math.floor(card.OrderQty / card.NoOfPcs) + 1
          )
        );
      }, 0);

      let OverallProdQty = totalOrderQty - totalSelectedProductQty;

      if (
        parseInt(item?.BalanceQty) >
        parseInt(
          Object.keys(ReorderProductData)?.length > 0 && totalOrderQty
            ? OverallProdQty
            : getCurrentProdDtl
              ? totalOrderQty
              : 0
        )
      ) {
        let count =
          parseInt(item?.BalanceQty) -
          parseInt(
            Object.keys(ReorderProductData)?.length > 0 && totalOrderQty
              ? OverallProdQty
              : getCurrentProdDtl
                ? totalOrderQty
                : 0
          );
        return parseInt(count);
      } else {
        let count = 0;
        return count;
      }
    }
  };

  const handleEditQuantityCancel = () => {
    setEditQuantity(false);
  };

  const handleEditQuantity = (value) => {
    if (OtherServicesglobal && value.Type == 'OS' && value.ServiceType == 'I') {
      setEditQuantity(false);
    } else {
      setEditQuantity(true);
      setModaldata(value);
      setIndex(value?.localId);
    }
  };

  const ClearAllFun = async () => {
    await dispatch(changeOrderType(''));
    await dispatch(changeOrderCardDetails([]));
    await dispatch(ChangeTotalAmount([]));
    await dispatch(changeReorderHoldDetails({}));
    await dispatch(changeReorderProductDetails([]));
    await dispatch(ChangeNavHoldData(false));
    await dispatch(changeCustomerID(null));
    await dispatch(changeSelectedCustId());
    await dispatch(changeSelectedOption(null));
    await dispatch(changeBookingType('TakeAway'));
  };

  return (
    <>
      <div
        style={{ display: 'flex', justifyContent: 'flex-end', width: '99%' }}
      >
        {OrderType === 'Failed' && (
          <button
            style={{
              backgroundColor: '#1292ee',
              color: '#fff',
              padding: '5px 6px',
              border: 'none',
              borderRadius: '5px',
              cursor: 'pointer',
            }}
            onClick={() => {
              ClearAllFun();
            }}
          >
            Clear
          </button>
        )}
      </div>
      <div style={{ display: 'flex' }}>
        <div style={{ width: '100%' }} className="BSBillingTable2-div">
          {/* oldTakeAway */}
          <div className="BSBill2-cont">
            {OldtableDataTakeAway?.map((item, index) => (
              <div style={{ display: 'flex' }}>
                {BookingTypeBoth && (
                  <div
                    style={{
                      width: '40px',
                      backgroundColor: '#CFB59D',
                      display: 'flex',
                      flexDirection: 'column',
                      alignItems: 'center', // Center align items horizontally
                      justifyContent: 'center', // Center align items vertically
                    }}
                  >
                    {index ===
                      Math.floor((OldtableDataTakeAway.length - 1) / 2) && (
                        <img width="35px" alt="" src={TakeAwayIcon} />
                      )}
                  </div>
                )}
                <div
                  className={
                    BookingType === 'Dine In' && item?.SalesId
                      ? 'summary-list-disabled'
                      : 'summary-list'
                  }
                  style={{
                    fontFamily: SelectedFont,

                    backgroundColor:
                      BillOrderPre === 'Y'
                        ? item?.SalesId && OrderType !== 'Hold'
                          ? 'rgb(243, 248, 213)'
                          : triggerAnimation &&
                            index === 0 &&
                            !item?.SalesId &&
                            tableDataTakeAway?.length >= PreviousdataLength
                            ? 'wheat'
                            : triggerAnimation &&
                              index === 0 &&
                              tableDataTakeAway?.length >=
                              PreviousdataLength &&
                              !HoldOrderDtl &&
                              !UnpaidData
                              ? 'wheat'
                              : 'inherit'
                        : 'none',
                    background:
                      item?.SalesId && OrderType !== 'Hold'
                        ? 'rgb(243, 248, 213)'
                        : GlobEstBooking === 'ParEst' &&
                          GlobProdwisedata?.includes(
                            item?.InwardDtlId + ' ' + item?.BookingTypeName
                          )
                          ? '#b2d1f7'
                          : index % 2 === 0
                            ? 'white'
                            : SelectedBillColor?.['OverallBackgroundColor']
                              ? SelectedBillColor?.['OverallBackgroundColor']
                              : '#d6d6d6',
                    animation:
                      BillOrderPre === 'Y' && !BookingTypeBoth
                        ? triggerAnimation &&
                          index === 0 &&
                          !item?.SalesId &&
                          tableDataTakeAway?.length >= PreviousdataLength &&
                          !HoldOrderDtl &&
                          !UnpaidData
                          ? 'splashAnimation 0.5s ease-in-out'
                          : 'none'
                        : 'none',
                  }}
                >
                  <img
                    alt="pozo"
                    className=""
                    style={{ width: '4rem', height: '4rem' }}
                    loading="lazy"
                    src={
                      item?.ProdLogo &&
                        item?.ProdLogo != null &&
                        item?.ProdLogo != undefined
                        ? item?.ProdLogo
                        : defaultimage
                    }
                  />
                  <div className="sum-item-cont">
                    <p
                      className="sum-item-name"
                      style={{ fontFamily: SelectedFont }}
                      onClick={() =>
                        (item.FullProductIdentifierDtls?.length > 0 ||
                          item.ProductIdentifierDtls?.length > 0 || imeiModal) &&
                        handleImeiDetails(item)
                      }
                    >
                      {' '}
                      {item?.ProdName} &nbsp;{' '}
                      {item.BrandName !== null ? item.BrandName : ''}
                      <p
                        className="Tbl2-Variant"
                        style={{ fontFamily: SelectedFont }}
                      >
                        {item?.Type != 'C' && (
                          <>
                            <p
                              className="Tbl2-Variant"
                              style={{ fontFamily: SelectedFont }}
                            >
                              (
                              {!item?.ProdVariantName?.toLowerCase()?.includes(
                                'variant'
                              ) && <span>{item?.ProdVariantName} </span>}
                              {item?.Size}
                              {item?.SinglePc == 'Y' ? 'PCS' : item?.UomName})
                            </p>
                            {item?.OfferMessage &&
                              !Array.isArray(item.OfferMessage) && (
                                <p
                                  className={`offermessageTag ${!isMobile ? 'desktop' : ''}`}
                                >
                                  {item.OfferMessage?.split('>')?.[0] +
                                    `> ${item?.OrderQty} Eligible Free`}
                                </p>
                              )}
                          </>
                        )}
                        {item?.Type === 'C' && (
                          <div
                            className="Tbl2-Variant"
                            style={{ fontFamily: SelectedFont }}
                          >
                            {item.ProdDetail?.map((prod, index) => (
                              <p key={index}>
                                {prod.ProdName} - {prod.Size} {prod.UomName}
                              </p>
                            ))}
                          </div>
                        )}
                      </p>
                      {productBasedExtraCharges?.find(
                        (find) => find.ProdId === item.ProdId
                      ) !== undefined && (
                          <div
                            style={{
                              fontSize: '10px',
                              fontWeight: '500',
                              whiteSpace: 'nowrap',
                            }}
                          >
                            Extra Charges :{' '}
                            {
                              productBasedExtraCharges?.find(
                                (find) => find.ProdId === item.ProdId
                              )?.TotalAmt
                            }
                          </div>
                        )}
                    </p>

                    <p
                      className="sum-item-amt"
                      style={{ fontFamily: SelectedFont }}
                      onClick={(e) => {
                        e.stopPropagation();
                        if (GetCustId) {
                          handleCustomerProductPriceHistory(item);
                        }
                      }}
                    >
                      <span style={{ color: '#FF4D4F', marginRight: '0.5rem' }}>
                        -{' '}
                        {item?.Type != 'C'
                          ? item.Offer
                            ? item.Offer
                            : '-'
                          : item?.OfferPrice
                            ? item.OfferPrice
                            : '-'}{' '}
                        /-
                      </span>
                      Rs {item?.TotalAmt}/-
                    </p>

                    <div className="summary-listedit-div">
                      <div className="items-editables">
                        <MinusOutlined onClick={() => decline(item)} />

                        <Badge count={item?.OrderQty} overflowCount={10000}>
                          {' '}
                        </Badge>
                        {item?.StockAvailable === 'Y' ? (
                          returnCount(item) > 0 && (
                            <PlusOutlined onClick={() => increase(item)} />
                          )
                        ) : (
                          <PlusOutlined onClick={() => increase(item)} />
                        )}

                        <EditOutlined
                          style={{ fontSize: '14px' }}
                          onClick={() => handleEditQuantity(item)}
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            ))}
            {EditQuantity && OldtableDataTakeAway?.length > 0 && (
              <BSBillingEditQuantity
                handleEditQuantityCancel={handleEditQuantityCancel}
                BSBillingEditQuantity={EditQuantity}
                Productdata={Modaldata}
                Index={Index}
                shortKeyMethod={shortKeyMethod}
              />
            )}
          </div>
          {/* oldDineAway */}
          <div className="BSBill2-cont">
            {OldtableDataDinein?.map((item, index) => (
              <div style={{ display: 'flex' }}>
                {BookingTypeBoth && (
                  <div
                    style={{
                      width: '40px',
                      backgroundColor: '#A2C3CD',
                      display: 'flex',
                      flexDirection: 'column',
                      alignItems: 'center', // Center align items horizontally
                      justifyContent: 'center', // Center align items vertically
                    }}
                  >
                    {index ==
                      Math.round(OldtableDataDinein?.length / 2 - 0.1) && (
                        <img width="35px" alt="" src={dineInIcon} />
                      )}
                  </div>
                )}
                <div
                  className={
                    BookingType === 'Dine In' && item?.SalesId
                      ? 'summary-list-disabled'
                      : 'summary-list'
                  }
                  style={{
                    fontFamily: SelectedFont,

                    backgroundColor:
                      BillOrderPre === 'Y'
                        ? item?.SalesId
                          ? 'rgb(243, 248, 213)'
                          : BookingType === 'Dine In' &&
                            triggerAnimation &&
                            OldtableDataTakeAway?.length + index === 0 &&
                            !item?.SalesId &&
                            tableDataDinein?.length >= PreviousdataLength
                            ? 'wheat'
                            : BookingType !== 'Dine In' &&
                              triggerAnimation &&
                              OldtableDataTakeAway?.length + index === 0 &&
                              tableDataDinein?.length >= PreviousdataLength &&
                              !HoldOrderDtl &&
                              !UnpaidData
                              ? 'wheat'
                              : 'inherit'
                        : 'none',
                    background: item?.SalesId
                      ? 'rgb(243, 248, 213)'
                      : GlobEstBooking === 'ParEst' &&
                        GlobProdwisedata?.includes(
                          item?.InwardDtlId + ' ' + item?.BookingTypeName
                        )
                        ? '#b2d1f7'
                        : (OldtableDataTakeAway?.length + index) % 2 === 0
                          ? 'white'
                          : SelectedBillColor?.['OverallBackgroundColor']
                            ? SelectedBillColor?.['OverallBackgroundColor']
                            : '#d6d6d6',
                    animation:
                      BillOrderPre === 'Y' && !BookingTypeBoth
                        ? triggerAnimation &&
                          OldtableDataTakeAway?.length + index === 0 &&
                          !item?.SalesId &&
                          tableDataDinein?.length >= PreviousdataLength &&
                          !HoldOrderDtl &&
                          !UnpaidData
                          ? 'splashAnimation 0.5s ease-in-out'
                          : 'none'
                        : 'none',
                  }}
                >
                  <img
                    alt="pozo"
                    className=""
                    style={{ width: '4rem', height: '4rem' }}
                    loading="lazy"
                    src={
                      item?.ProdLogo &&
                        item?.ProdLogo != null &&
                        item?.ProdLogo != undefined
                        ? item?.ProdLogo
                        : defaultimage
                    }
                  />
                  <div className="sum-item-cont">
                    <p
                      className="sum-item-name"
                      style={{ fontFamily: SelectedFont }}
                    >
                      {' '}
                      {item?.ProdName} &nbsp;{' '}
                      {item.BrandName !== null ? item.BrandName : ''}
                      <p
                        className="Tbl2-Variant"
                        style={{ fontFamily: SelectedFont }}
                      >
                        {item?.Type != 'C' && (
                          <>
                            <p
                              className="Tbl2-Variant"
                              style={{ fontFamily: SelectedFont }}
                            >
                              (
                              {!item?.ProdVariantName?.toLowerCase()?.includes(
                                'variant'
                              ) && <span>{item?.ProdVariantName} </span>}
                              {item?.Size}
                              {item?.SinglePc == 'Y' ? 'PCS' : item?.UomName})
                            </p>
                            {item?.OfferMessage &&
                              !Array.isArray(item.OfferMessage) && (
                                <p
                                  className={`offermessageTag ${!isMobile ? 'desktop' : ''}`}
                                >
                                  {item.OfferMessage?.split('>')?.[0] +
                                    `> ${item?.OrderQty} Eligible Free`}
                                </p>
                              )}
                          </>
                        )}
                        {item?.Type === 'C' && (
                          <div
                            className="Tbl2-Variant"
                            style={{ fontFamily: SelectedFont }}
                          >
                            {item.ProdDetail?.map((prod, index) => (
                              <p key={index}>
                                {prod.ProdName} - {prod.Size} {prod.UomName}
                              </p>
                            ))}
                          </div>
                        )}
                      </p>
                      {productBasedExtraCharges?.find(
                        (find) => find.ProdId === item.ProdId
                      ) !== undefined && (
                          <div
                            style={{
                              fontSize: '10px',
                              fontWeight: '500',
                              whiteSpace: 'nowrap',
                            }}
                          >
                            Extra Charges :{' '}
                            {
                              productBasedExtraCharges?.find(
                                (find) => find.ProdId === item.ProdId
                              )?.TotalAmt
                            }
                          </div>
                        )}
                    </p>

                    <p
                      className="sum-item-amt"
                      style={{ fontFamily: SelectedFont }}
                      onClick={(e) => {
                        e.stopPropagation();
                        if (GetCustId) {
                          handleCustomerProductPriceHistory(item);
                        }
                      }}
                    >
                      <span style={{ color: '#FF4D4F', marginRight: '0.5rem' }}>
                        -{' '}
                        {item?.Type != 'C'
                          ? item.Offer
                            ? item.Offer
                            : '-'
                          : item?.OfferPrice
                            ? item.OfferPrice
                            : '-'}{' '}
                        /-
                      </span>
                      Rs {item?.TotalAmt}/-
                    </p>

                    <div className="summary-listedit-div">
                      <div className="items-editables">
                        {/* <MinusOutlined onClick={() => decline(item)} />
                         */}
                        <MinusOutlined onClick={() => decline(item)} />
                        <Badge count={item?.OrderQty} overflowCount={10000}>
                          {' '}
                        </Badge>
                        {item?.StockAvailable === 'Y' ? (
                          returnCount(item) > 0 && (
                            <PlusOutlined onClick={() => increase(item)} />
                          )
                        ) : (
                          <PlusOutlined onClick={() => increase(item)} />
                        )}

                        <EditOutlined
                          style={{ fontSize: '14px' }}
                          onClick={() => handleEditQuantity(item)}
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            ))}
            {OldtableDataDinein?.length > 0 && EditQuantity && (
              <BSBillingEditQuantity
                handleEditQuantityCancel={handleEditQuantityCancel}
                BSBillingEditQuantity={EditQuantity}
                Productdata={Modaldata}
                Index={Index}
                shortKeyMethod={shortKeyMethod}
              />
            )}
          </div>
          {/* TakeAway */}
          <div className="BSBill2-cont">
            {tableDataTakeAway?.map((item, index) => (
              <div style={{ display: 'flex' }}>
                {BookingTypeBoth && (
                  <div
                    style={{
                      width: '40px',
                      backgroundColor: '#CFB59D',
                      display: 'flex',
                      flexDirection: 'column',
                      alignItems: 'center', // Center align items horizontally
                      justifyContent: 'center', // Center align items vertically
                    }}
                  >
                    {index ==
                      Math.round(tableDataTakeAway?.length / 2 - 0.1) && (
                        <img width="35px" alt="" src={TakeAwayIcon} />
                      )}
                  </div>
                )}
                <div
                  className={
                    BookingType === 'Dine In' && item?.SalesId
                      ? 'summary-list-disabled'
                      : 'summary-list'
                  }
                  style={{
                    fontFamily: SelectedFont,

                    backgroundColor:
                      BillOrderPre === 'Y'
                        ? BookingType === 'Dine In' && item?.SalesId
                          ? 'rgb(243, 248, 213)'
                          : BookingType === 'Dine In' &&
                            triggerAnimation &&
                            OldtableDataDinein?.length +
                            OldtableDataTakeAway?.length +
                            index ===
                            0 &&
                            !item?.SalesId &&
                            tableDataTakeAway?.length >= PreviousdataLength
                            ? 'wheat'
                            : BookingType !== 'Dine In' &&
                              triggerAnimation &&
                              OldtableDataDinein?.length +
                              OldtableDataTakeAway?.length +
                              index ===
                              0 &&
                              tableDataTakeAway?.length >=
                              PreviousdataLength &&
                              !HoldOrderDtl &&
                              !UnpaidData
                              ? 'wheat'
                              : (OldtableDataDinein?.length +
                                OldtableDataTakeAway?.length +
                                index) %
                                2 ===
                                0
                                ? 'white'
                                : SelectedBillColor?.['OverallBackgroundColor']
                                  ? SelectedBillColor?.[
                                  'OverallBackgroundColor'
                                  ]
                                  : '#d6d6d6'
                        : (OldtableDataDinein?.length +
                          OldtableDataTakeAway?.length +
                          index) %
                          2 ===
                          0
                          ? 'white'
                          : SelectedBillColor?.['OverallBackgroundColor']
                            ? SelectedBillColor?.['OverallBackgroundColor']
                            : '#d6d6d6',
                    background:
                      BookingType === 'Dine In' && item?.SalesId
                        ? 'rgb(243, 248, 213)'
                        : GlobEstBooking === 'ParEst' &&
                          GlobProdwisedata?.includes(
                            item?.InwardDtlId + ' ' + item?.BookingTypeName
                          )
                          ? '#b2d1f7'
                          : (OldtableDataDinein?.length +
                            OldtableDataTakeAway?.length +
                            index) %
                            2 ===
                            0
                            ? 'white'
                            : SelectedBillColor?.['OverallBackgroundColor']
                              ? SelectedBillColor?.['OverallBackgroundColor']
                              : '#d6d6d6',
                    animation:
                      BillOrderPre === 'Y' && !BookingTypeBoth
                        ? triggerAnimation &&
                          OldtableDataDinein?.length +
                          OldtableDataTakeAway?.length +
                          index ===
                          0 &&
                          !item?.SalesId &&
                          tableDataTakeAway?.length >= PreviousdataLength &&
                          !HoldOrderDtl &&
                          !UnpaidData
                          ? 'splashAnimation 0.5s ease-in-out'
                          : 'none'
                        : 'none',
                  }}
                >
                  <img
                    alt="pozo"
                    className=""
                    style={{ width: '4rem', height: '4rem' }}
                    loading="lazy"
                    src={
                      item?.ProdLogo &&
                        item?.ProdLogo != null &&
                        item?.ProdLogo != undefined
                        ? item?.ProdLogo
                        : defaultimage
                    }
                  />
                  <div className="sum-item-cont">
                    <p
                      className="sum-item-name"
                      style={{ fontFamily: SelectedFont }}
                      onClick={() =>
                        (item.FullProductIdentifierDtls?.length > 0 ||
                          item.ProductIdentifierDtls?.length > 0 || imeiModal) &&
                        handleImeiDetails(item)
                      }
                    >
                      {' '}
                      {item?.Type !== 'OS'
                        ? item.ProdName
                        : item.ServiceName}{' '}
                      &nbsp; {item.BrandName !== null ? item.BrandName : ''}
                      <p
                        className="Tbl2-Variant"
                        style={{ fontFamily: SelectedFont }}
                      >
                        <p
                          className="Tbl2-Variant"
                          style={{ fontFamily: SelectedFont }}
                        >
                          {item?.Type !== 'OS' && (
                            <>
                              (
                              {!item?.ProdVariantName?.toLowerCase()?.includes(
                                'variant'
                              ) && <span>{item?.ProdVariantName} </span>}
                              {item?.Size}
                              {item?.SinglePc == 'Y' ? 'PCS' : item?.UomName})
                            </>
                          )}
                        </p>
                        {item?.Type === 'C' && (
                          <div
                            className="Tbl2-Variant"
                            style={{ fontFamily: SelectedFont }}
                          >
                            {item.ProdDetail?.map((prod, index) => (
                              <p key={index}>
                                {prod.ProdName} - {prod.Size} {prod.UomName}
                              </p>
                            ))}
                          </div>
                        )}
                      </p>
                      {productBasedExtraCharges?.find(
                        (find) => find.ProdId === item.ProdId
                      ) !== undefined && (
                          <div
                            style={{
                              fontSize: '10px',
                              fontWeight: '500',
                              whiteSpace: 'nowrap',
                            }}
                          >
                            Extra Charges :{' '}
                            {
                              productBasedExtraCharges?.find(
                                (find) => find.ProdId === item.ProdId
                              )?.TotalAmt
                            }
                          </div>
                        )}
                    </p>

                    <p
                      className="sum-item-amt"
                      style={{ fontFamily: SelectedFont }}
                      onClick={(e) => {
                        e.stopPropagation();
                        if (GetCustId) {
                          handleCustomerProductPriceHistory(item);
                        }
                      }}
                    >
                      <span style={{ color: '#FF4D4F', marginRight: '0.5rem' }}>
                        {item?.OfferPrice > 0 ||
                          (item?.Offer > 0 && (
                            <>
                              -{' '}
                              {item?.Type !== 'C'
                                ? item.Offer
                                  ? item.Offer
                                  : '-'
                                : item?.OfferPrice
                                  ? item.OfferPrice
                                  : '-'}{' '}
                              /-
                            </>
                          ))}
                      </span>
                      Rs {item?.TotalAmt}/-
                    </p>

                    <div className="summary-listedit-div">
                      <div className="items-editables">
                        <MinusOutlined onClick={() => decline(item)} />
                        <Badge count={item?.OrderQty} overflowCount={10000}>
                          {' '}
                        </Badge>
                        {item?.StockAvailable === 'Y' ? (
                          returnCount(item) > 0 && (
                            <PlusOutlined
                              onClick={() =>
                                item.Type == 'P' || item.Type == 'C'
                                  ? increase(item)
                                  : item.ServiceType == 'G'
                                    ? increase(item)
                                    : ''
                              }
                            />
                          )
                        ) : (
                          <PlusOutlined
                            onClick={() =>
                              item.Type == 'P' || item.Type == 'C'
                                ? increase(item)
                                : item.ServiceType == 'G'
                                  ? increase(item)
                                  : ''
                            }
                          />
                        )}

                        <EditOutlined
                          style={{ fontSize: '14px' }}
                          onClick={() => handleEditQuantity(item)}
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            ))}
            {tableDataTakeAway?.length > 0 && EditQuantity && (
              <BSBillingEditQuantity
                handleEditQuantityCancel={handleEditQuantityCancel}
                BSBillingEditQuantity={EditQuantity}
                Productdata={Modaldata}
                Index={Index}
                shortKeyMethod={shortKeyMethod}
              />
            )}
          </div>
          {/* Dine in */}
          <div className="BSBill2-cont">
            {tableDataDinein?.map((item, index) => (
              <div style={{ display: 'flex' }}>
                {BookingTypeBoth && (
                  <div
                    style={{
                      width: '40px',
                      backgroundColor: '#A2C3CD',
                      display: 'flex',
                      flexDirection: 'column',
                      alignItems: 'center', // Center align items horizontally
                      justifyContent: 'center', // Center align items vertically
                    }}
                  >
                    {index == Math.round(tableDataDinein?.length / 2 - 0.1) && (
                      <img width="35px" alt="" src={dineInIcon} />
                    )}
                  </div>
                )}
                <div
                  className={
                    BookingType === 'Dine In' && item?.SalesId
                      ? 'summary-list-disabled'
                      : 'summary-list'
                  }
                  style={{
                    fontFamily: SelectedFont,

                    backgroundColor:
                      BillOrderPre === 'Y' && !BookingTypeBoth
                        ? BookingType === 'Dine In' &&
                          item?.SalesId &&
                          !BookingTypeBoth
                          ? 'rgb(243, 248, 213)'
                          : BookingType === 'Dine In' &&
                            triggerAnimation &&
                            OldtableDataTakeAway?.length +
                            OldtableDataDinein?.length +
                            tableDataTakeAway?.length +
                            index ===
                            0 &&
                            !item?.SalesId &&
                            tableDataDinein?.length >= PreviousdataLength
                            ? 'wheat'
                            : BookingType !== 'Dine In' &&
                              triggerAnimation &&
                              OldtableDataTakeAway?.length +
                              OldtableDataDinein?.length +
                              tableDataTakeAway?.length +
                              index ===
                              0 &&
                              tableDataDinein?.length >= PreviousdataLength &&
                              !HoldOrderDtl &&
                              !UnpaidData
                              ? 'wheat'
                              : 'inherit'
                        : 'none',
                    background:
                      BookingType === 'Dine In' &&
                        item?.SalesId &&
                        !BookingTypeBoth
                        ? 'rgb(243, 248, 213)'
                        : GlobEstBooking === 'ParEst' &&
                          GlobProdwisedata?.includes(
                            item?.InwardDtlId + ' ' + item?.BookingTypeName
                          )
                          ? '#b2d1f7'
                          : (OldtableDataTakeAway?.length +
                            OldtableDataDinein?.length +
                            tableDataTakeAway?.length +
                            index) %
                            2 ===
                            0
                            ? 'white'
                            : SelectedBillColor?.['OverallBackgroundColor']
                              ? SelectedBillColor?.['OverallBackgroundColor']
                              : '#d6d6d6',
                    animation:
                      BillOrderPre === 'Y' && !BookingTypeBoth
                        ? triggerAnimation &&
                          OldtableDataTakeAway?.length +
                          OldtableDataDinein?.length +
                          tableDataTakeAway?.length +
                          index ===
                          0 &&
                          !item?.SalesId &&
                          tableDataDinein?.length >= PreviousdataLength &&
                          !HoldOrderDtl &&
                          !UnpaidData
                          ? 'splashAnimation 0.5s ease-in-out'
                          : 'none'
                        : 'none',
                  }}
                >
                  <img
                    alt="pozo"
                    className=""
                    style={{ width: '4rem', height: '4rem' }}
                    loading="lazy"
                    src={
                      item?.ProdLogo &&
                        item?.ProdLogo != null &&
                        item?.ProdLogo != undefined
                        ? item?.ProdLogo
                        : defaultimage
                    }
                  />
                  <div className="sum-item-cont">
                    <p
                      className="sum-item-name"
                      style={{ fontFamily: SelectedFont }}
                    >
                      {' '}
                      {item?.ProdName} &nbsp;{' '}
                      {item.BrandName !== null ? item.BrandName : ''}
                      <p
                        className="Tbl2-Variant"
                        style={{ fontFamily: SelectedFont }}
                      >
                        {item?.Type != 'C' && (
                          <>
                            <p
                              className="Tbl2-Variant"
                              style={{ fontFamily: SelectedFont }}
                            >
                              (
                              {!item?.ProdVariantName?.toLowerCase()?.includes(
                                'variant'
                              ) && <span>{item?.ProdVariantName} </span>}
                              {item?.Size}
                              {item?.SinglePc == 'Y' ? 'PCS' : item?.UomName})
                            </p>
                            {item?.OfferMessage &&
                              !Array.isArray(item.OfferMessage) && (
                                <p
                                  className={`offermessageTag ${!isMobile ? 'desktop' : ''}`}
                                >
                                  {item.OfferMessage?.split('>')?.[0] +
                                    `> ${item?.OrderQty} Eligible Free`}
                                </p>
                              )}
                          </>
                        )}
                        {item?.Type === 'C' && (
                          <div
                            className="Tbl2-Variant"
                            style={{ fontFamily: SelectedFont }}
                          >
                            {item.ProdDetail?.map((prod, index) => (
                              <p key={index}>
                                {prod.ProdName} - {prod.Size} {prod.UomName}
                              </p>
                            ))}
                          </div>
                        )}
                      </p>
                      {productBasedExtraCharges?.find(
                        (find) => find.ProdId === item.ProdId
                      ) !== undefined && (
                          <div
                            style={{
                              fontSize: '10px',
                              fontWeight: '500',
                              whiteSpace: 'nowrap',
                            }}
                          >
                            Extra Charges :{' '}
                            {
                              productBasedExtraCharges?.find(
                                (find) => find.ProdId === item.ProdId
                              )?.TotalAmt
                            }
                          </div>
                        )}
                    </p>

                    <p
                      className="sum-item-amt"
                      style={{ fontFamily: SelectedFont }}
                      onClick={(e) => {
                        e.stopPropagation();
                        if (GetCustId) {
                          handleCustomerProductPriceHistory(item);
                        }
                      }}
                    >
                      <span style={{ color: '#FF4D4F', marginRight: '0.5rem' }}>
                        -{' '}
                        {item?.Type != 'C'
                          ? item.Offer
                            ? item.Offer
                            : '-'
                          : item?.OfferPrice
                            ? item.OfferPrice
                            : '-'}{' '}
                        /-
                      </span>
                      Rs {item?.TotalAmt}/-
                    </p>

                    <div className="summary-listedit-div">
                      <div className="items-editables">
                        <MinusOutlined onClick={() => decline(item)} />
                        <Badge count={item?.OrderQty} overflowCount={10000}>
                          {' '}
                        </Badge>
                        {item?.StockAvailable === 'Y' ? (
                          returnCount(item) > 0 && (
                            <PlusOutlined onClick={() => increase(item)} />
                          )
                        ) : (
                          <PlusOutlined onClick={() => increase(item)} />
                        )}

                        <EditOutlined
                          style={{ fontSize: '14px' }}
                          onClick={() => handleEditQuantity(item)}
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            ))}
            {tableDataDinein?.length > 0 && EditQuantity && (
              <BSBillingEditQuantity
                handleEditQuantityCancel={handleEditQuantityCancel}
                BSBillingEditQuantity={EditQuantity}
                Productdata={Modaldata}
                Index={Index}
                shortKeyMethod={shortKeyMethod}
              />
            )}
            {OpenImeiDetail && (
              <BSImeiDetails
                DeviceDetails={OpenImeiDetail}
                handleDeviceDetailClose={handleImeiDetailClose}
                ProductDetail={Modaldata}
              />
            )}
            {customerPriceHistoryOpen && GetCustId && (
              <CustomerPriceHistory
                open={customerPriceHistoryOpen}
                custId={GetCustId}
                setCustomerPriceHistoryOpen={setCustomerPriceHistoryOpen}
                customerProduct={customerProduct}
                setCustomerProduct={setCustomerProduct}
                selectedCustomer={selectedCustomer}
              />
            )}
          </div>
        </div>
      </div>
    </>
  );
};

export default BsBill2;