Android_Retail/src/Pages/Kiosk/CardPage/CardPage2.jsx

import React, { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Drawer, message } from 'antd';
import { DefaultModal } from '../../../Components/Modal/DefaultModal';
import {
  changeKioskPageName,
  getKioskLightColour,
} from '../../../Features/Kiosk/kiosk';
import { settingDataSelector } from '../../../Features/PreferenceMaster/PreferenceMaster.js';
import '../../../Styles/Kiosk/CardPage/CardPage2.scss';
import {
  GlobalBookingTypeKiosk,
  GlobalKioskOrderDetails,
  GlobalProductCardListKiosk,
  changeKioskOrderDetails,
} from '../../../Features/BookingScreen/BookingData/KioskBookingData';
import horizontal from '../../../Images/defaultItemImg.png';
import { getConfigType, PreferenceData } from '../../../Features/BookingScreen/BookingData/BookingData';
import { calculateOverAllQtyLimit } from '../../../utils/calculations.js';
import { IoIosWarning } from 'react-icons/io';

const CardPage2 = (props) => {
  const dispatch = useDispatch();
  const preferenceDatas = useSelector(PreferenceData);
  const kioskCategoriesCard = useSelector(GlobalProductCardListKiosk);
  const KioskOrderDetails = useSelector(GlobalKioskOrderDetails);
  const getKioskLightColourdata = useSelector(getKioskLightColour);
  const BookingType = useSelector(GlobalBookingTypeKiosk);
  const kioskTemplateData = props?.data;
  const [maxLimitExceeded, setMaxLimitExceeded] = useState(false);
  const [openQuantity, setopenQuantity] = useState(false);
  const [VariantOpen, setVariantOpen] = useState(false);
  const [onePeiceFlow, setOnePeiceFlow] = useState(false);
  const [qtydata, setQtydata] = useState();
  const [QtyIndex, setQtyIndex] = useState(0);
  const [ConfigDataList, setConfigDataList] = useState([]);
  const SettingDataSelector = useSelector(settingDataSelector);
  const UomPrint = SettingDataSelector?.[0]?.SettingDtlDetails.filter(
    (i) => i.SettingIdName === 'PrintUom'
  )?.[0];

  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;
  useEffect(() => {
    getBookingTypeId();
  }, []);

  const onClose = () => {
    setopenQuantity(false);
  };
  const handleClose = () => {
    setVariantOpen(false);
  };
  //Card on click function

  const CardOnClick = async (item, Parameter) => {
    if ((overAllLimitPreferenece || itemWiseLimitPreferenece) && maxQtyLimit) {
      if (overAllLimitPreferenece) {
        const calculatedOverAllQty = calculateOverAllQtyLimit(KioskOrderDetails);
        if ((calculatedOverAllQty + 1) > maxQtyLimit) {
          setMaxLimitExceeded(true);
          // Reset after 3 seconds
          setTimeout(() => {
            setMaxLimitExceeded(false);
          }, 2000);
          return;
        }
      }
    }

    setOnePeiceFlow(Parameter === 'OnePeiceProduct');

    const transformedItem = {
      ...item,
      ProductDetail: item.ProductDetail.filter(
        (detail) => detail.OnePcsAvailable === 'Y'
      ).map(({ ProdId, ProdName, ProdVariantDetails, ...rest }) => ({
        ProdId,
        ProdName,
        ProdVariantDetails,
        ...rest,
      })),
    };
    const modiffiedData =
      Parameter === 'OnePeiceProduct' ? transformedItem : item;
    setQtydata(modiffiedData);
    let count = modiffiedData?.ProductDetail?.length;
    if (count > 1) {
      setopenQuantity(true);
    } else {
      setQtyIndex(0);
      SingleQuantity(modiffiedData, Parameter === 'OnePeiceProduct');
    }
  };
  const SingleQuantity = (item, onePcs) => {
    let count = item?.ProductDetail?.[0]?.ProdVariantDetails?.length;
    if (count > 1) {
      setVariantOpen(true);
    } else {
      let Isincart = KioskOrderDetails?.find(
        (cartItem) =>
          cartItem?.ProdId === item?.ProductDetail?.[0]?.ProdId &&
          cartItem?.InwardDtlId ===
          item?.ProductDetail?.[0]?.ProdVariantDetails?.[0]?.StockDetails?.[0]
            ?.InwardDtlId &&
          cartItem?.OrderRate ===
          item?.ProductDetail?.[0]?.ProdVariantDetails?.[0]?.StockDetails?.[0]
            ?.SellPrice
      );
      if (Isincart && Isincart?.StockAvailable === 'Y') {
        if (Isincart?.BalanceQty > Isincart?.OrderQty) {
          dataTransfer(item, 0, 0, 0, onePcs);
        } else {
          dataTransfer(item, 0, 0, 1, onePcs);
        }
      } else {
        dataTransfer(item, 0, 0, 0, onePcs);
      }
    }
  };
  const VarientFun = (index) => {
    const selectedProIndex = qtydata?.ProductDetail?.findIndex(
      (item) =>
        item?.ProdId === index?.ProdId &&
        item?.Size === index?.Size &&
        item?.UomName === index?.UomName &&
        item?.Brand === index?.Brand
    );

    if (selectedProIndex !== -1) {
      const count =
        qtydata?.ProductDetail[selectedProIndex]?.ProdVariantDetails?.length ||
        0;

      if (count > 1) {
        setopenQuantity(false);
        setVariantOpen(true);
      } else {
        const item = { QtyIndex: selectedProIndex, VarientIndex: 0 };
        singleVarient(item);
        setopenQuantity(false);
      }
    }

    setQtyIndex(selectedProIndex);
    //   setRepeatedModel(false);
  };

  const singleVarient = (item) => {
    let Isincart = KioskOrderDetails?.find(
      (cartItem) =>
        cartItem?.ProdId === qtydata?.ProductDetail?.[item?.QtyIndex]?.ProdId &&
        cartItem?.InwardDtlId ===
        qtydata?.ProductDetail?.[item?.QtyIndex]?.ProdVariantDetails?.[
          item?.VarientIndex
        ]?.StockDetails?.[0]?.InwardDtlId &&
        cartItem?.OrderRate ===
        qtydata?.ProductDetail?.[item?.QtyIndex]?.ProdVariantDetails?.[
          item?.VarientIndex
        ]?.StockDetails?.[0]?.SellPrice
    );
    console.log(Isincart, item, KioskOrderDetails, 'IsincartsingleVarient');
    if (Isincart && Isincart?.StockAvailable === 'Y') {
      if (Isincart?.BalanceQty > Isincart?.OrderQty) {
        dataTransfer(
          qtydata,
          item?.QtyIndex,
          item?.VarientIndex,
          0,
          onePeiceFlow
        );
      } else {
        dataTransfer(
          qtydata,
          item?.QtyIndex,
          item?.VarientIndex,
          1,
          onePeiceFlow
        );
      }
    } else {
      dataTransfer(
        qtydata,
        item?.QtyIndex,
        item?.VarientIndex,
        0,
        onePeiceFlow
      );
    }
    // dataTransfer(qtydata, item?.QtyIndex, item?.VarientIndex, 0, onePeiceFlow);
    setopenQuantity(false);
  };
  const Stockfun = (item, index) => {
    console.log(item, 'itemstock');
    let Isincart = KioskOrderDetails?.find(
      (cartItem) =>
        cartItem?.ProdId === item?.ProdId &&
        cartItem?.InwardDtlId === item?.StockDetails?.[0]?.InwardDtlId &&
        cartItem?.OrderRate === item?.StockDetails?.[0]?.SellPrice
    );
    if (Isincart && Isincart?.StockAvailable === 'Y') {
      if (Isincart?.BalanceQty > Isincart?.OrderQty) {
        dataTransfer(qtydata, QtyIndex, index, 0, onePeiceFlow);
      } else {
        dataTransfer(qtydata, QtyIndex, index, 1, onePeiceFlow);
      }
    } else {
      dataTransfer(qtydata, QtyIndex, index, 0, onePeiceFlow);
    }
    // dataTransfer(qtydata, QtyIndex, index, 0, onePeiceFlow);
    setVariantOpen(false);
    // setVarientIndex(index);
  };
  // mohan
  const getBookingTypeId = async () => {
    let tempconfigdata = await dispatch(
      getConfigType({ TypeName: 'Booking Type' })
    ).unwrap();
    setConfigDataList(tempconfigdata?.data?.data);
  };
  //mohan
  //  card data conversion
  const dataTransfer = (a, QtyIndex, VarientIndex, stockIndex, onePcs) => {
    const TakAwayId = ConfigDataList?.find(
      (a) => a?.ConfigName === 'TakeAway'
    )?.ConfigId;
    const DineinId = ConfigDataList?.find(
      (a) => a?.ConfigName === 'Dine In'
    )?.ConfigId;

    let data = {
      Type: a?.Type,
      OverallQuantity: a?.OverAllQty,
      ActiveStatus: a?.ProductDetail?.[QtyIndex]?.ActiveStatus,
      AvailableFrom: a?.ProductDetail?.[QtyIndex]?.AvailableFrom,
      AvailableTo: a?.ProductDetail?.[QtyIndex]?.AvailableTo,
      Cess: a?.ProductDetail?.[QtyIndex]?.Cess,
      HSNCode: a?.ProductDetail?.[QtyIndex]?.HSNCode,
      BrandName: a?.ProductDetail?.[QtyIndex]?.BrandName,
      // 'ManufDate': a?.ProductDetail?.[QtyIndex]?.ManufDate,
      OpeningQty: a?.ProductDetail?.[QtyIndex]?.OpeningQty,
      PartNumber: a?.ProductDetail?.[QtyIndex]?.PartNumber,
      ProdId: a?.ProductDetail?.[QtyIndex]?.ProdId,
      ProdLogo: a?.ProductDetail?.[QtyIndex]?.ProdLogo,
      ProdName: a?.ProductDetail?.[QtyIndex]?.ProdName,
      QRCode: a?.ProductDetail?.[QtyIndex]?.QRCode,
      QtyBasedPrice: a?.ProductDetail?.[QtyIndex]?.QtyBasedPrice,
      Rack: a?.ProductDetail?.[QtyIndex]?.Rack,
      Size: a?.ProductDetail?.[QtyIndex]?.Size,
      StockAvailable: a?.ProductDetail?.[QtyIndex]?.StockAvailable,
      TaxId: a?.ProductDetail?.[QtyIndex]?.TaxId,
      TaxPercentage: a?.ProductDetail?.[QtyIndex]?.TaxPercentage,
      TaxName: a?.ProductDetail?.[QtyIndex]?.TaxIdName,
      UniqueId: a?.ProductDetail?.[QtyIndex]?.UniqueId,
      UomName: a?.ProductDetail?.[QtyIndex]?.UomName,
      SinglePc: onePcs ? 'Y' : 'N',
      NoOfPcs: onePcs
        ? a?.ProductDetail?.[QtyIndex]?.ProdVariantDetails?.[VarientIndex]
          ?.StockDetails?.[stockIndex]?.NoOfPcs
        : null,
      ProdVariantName:
        a?.ProductDetail?.[QtyIndex]?.ProdVariantDetails?.[VarientIndex]
          ?.ProdVariantName,
      BalanceQty:
        a?.ProductDetail?.[QtyIndex]?.ProdVariantDetails?.[VarientIndex]
          ?.StockDetails?.[stockIndex]?.BalanceQty,
      BatchRef:
        a?.ProductDetail?.[QtyIndex]?.ProdVariantDetails?.[VarientIndex]
          ?.StockDetails?.[stockIndex]?.BatchRef,
      InwardDate:
        a?.ProductDetail?.[QtyIndex]?.ProdVariantDetails?.[VarientIndex]
          ?.StockDetails?.[stockIndex]?.InwardDate,
      InwardDtlId:
        a?.ProductDetail?.[QtyIndex]?.ProdVariantDetails?.[VarientIndex]
          ?.StockDetails?.[stockIndex]?.InwardDtlId,
      ExpDate:
        a?.ProductDetail?.[QtyIndex]?.ProdVariantDetails?.[VarientIndex]
          ?.StockDetails?.[stockIndex]?.ExpDate,
      InwardId:
        a?.ProductDetail?.[QtyIndex]?.ProdVariantDetails?.[VarientIndex]
          ?.StockDetails?.[stockIndex]?.InwardId,
      MRP: onePcs
        ? a?.ProductDetail?.[QtyIndex]?.ProdVariantDetails?.[VarientIndex]
          ?.StockDetails?.[stockIndex]?.OnePcsPrice
        : a?.ProductDetail?.[QtyIndex]?.ProdVariantDetails?.[VarientIndex]
          ?.StockDetails?.[stockIndex]?.MRP,
      OrderRate: onePcs
        ? a?.ProductDetail?.[QtyIndex]?.ProdVariantDetails?.[VarientIndex]
          ?.StockDetails?.[stockIndex]?.OnePcsPrice
        : a?.ProductDetail?.[QtyIndex]?.ProdVariantDetails?.[VarientIndex]
          ?.StockDetails?.[stockIndex]?.SellPrice,
      SuppId:
        a?.ProductDetail?.[QtyIndex]?.ProdVariantDetails?.[VarientIndex]
          ?.StockDetails?.[stockIndex]?.SuppId,
      SuppName:
        a?.ProductDetail?.[QtyIndex]?.ProdVariantDetails?.[VarientIndex]
          ?.StockDetails?.[stockIndex]?.SuppName,
      Offer:
        a?.ProductDetail?.[QtyIndex]?.ProdVariantDetails?.[VarientIndex]
          ?.StockDetails?.[stockIndex]?.OfferPrice,
      OrderType: 'S',
      OrderStatus: 'O',
      BookingTypeName: BookingType,
      BookingType: BookingType === 'Dine In' ? DineinId : TakAwayId,
      ProdNameQty:
        UomPrint?.SettingValue === 'N'
          ? `${a?.ProductDetail?.[QtyIndex]?.ProdName} ${a?.ProductDetail?.[QtyIndex]?.UomName?.toLowerCase() === 'half' ? '(Half)' : ''}`
          : `${a?.ProductDetail?.[QtyIndex]?.ProdName} ${a?.ProductDetail?.[QtyIndex]?.Size} ${a?.ProductDetail?.[QtyIndex]?.UomName}`,
    };
    setopenQuantity(false);
    setVariantOpen(false);
    setQtyIndex(0);
    //   setVarientIndex(0)
    AddOrderDetails(data);
    setOnePeiceFlow(false);
  };
  //   add Product in cart state
  const AddOrderDetails = (item) => {
    const isItemInCart = KioskOrderDetails?.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) {
      dispatch(
        changeKioskOrderDetails(
          KioskOrderDetails?.map(
            (
              cartItem // if the item is already in the cart, increase the quantity of the item
            ) =>
              cartItem.ProdId === item.ProdId &&
                cartItem.InwardDtlId === item.InwardDtlId &&
                cartItem.OrderRate === item.OrderRate &&
                cartItem.BookingTypeName === item.BookingTypeName
                ? {
                  ...cartItem,
                  OrderQty: cartItem.OrderQty + 1,
                  TotalAmt: (cartItem.OrderQty + 1) * cartItem.OrderRate,
                  TaxAmt: (
                    ((cartItem.OrderQty + 1) *
                      cartItem.OrderRate *
                      cartItem.TaxPercentage) /
                    (100 + cartItem.TaxPercentage)
                  ).toFixed(2),
                  WithoutTaxRate:
                    (cartItem.OrderQty + 1) * cartItem.OrderRate -
                    (
                      ((cartItem.OrderQty + 1) *
                        cartItem.OrderRate *
                        cartItem.TaxPercentage) /
                      (100 + cartItem.TaxPercentage)
                    ).toFixed(2),
                }
                : cartItem // otherwise, return the cart item
          )
        )
      );
    } else {
      dispatch(
        changeKioskOrderDetails([
          ...KioskOrderDetails,
          {
            ...item,
            OrderQty: 1,
            TotalAmt: item.OrderRate,
            TaxAmt: (
              (item.OrderRate * item.TaxPercentage) /
              (100 + item.TaxPercentage)
            ).toFixed(2),
            WithoutTaxRate: (
              item.OrderRate -
              (item.OrderRate * item.TaxPercentage) / (100 + item.TaxPercentage)
            ).toFixed(2),
          },
        ])
      ); // if the item is not in the cart, add the item to the cart
    }
  };
  //Brand based display
  let brandMapping = {};
  // Group product details by Brand ID
  let filterqtydata = qtydata?.ProductDetail?.filter(
    (item) => item?.ProdVariantDetails?.length > 0
  );
  filterqtydata?.forEach((item) => {
    const brandId = item?.BrandName;
    if (!brandMapping[brandId]) {
      brandMapping[brandId] = [];
    }
    brandMapping[brandId].push(item);
  });
  const BrandCheckresult = qtydata?.ProductDetail.every((product) => {
    return product.BrandName === null || product.BrandName === undefined;
  });
  const ItemSellingPrice = (item) => {
    const variantWithDetails = item?.ProductDetail?.find(
      (variant) => variant?.ProdVariantDetails?.length > 0
    );

    if (variantWithDetails) {
      // Access the details of the first variant with ProdVariantDetails
      const firstVariantDetails =
        variantWithDetails?.ProdVariantDetails?.[0]?.StockDetails?.[0]
          ?.SellPrice;
      return firstVariantDetails;
    } else {
      // Handle the case where no variant satisfies the condition
      return null; // or any other value you want to return
    }
  };

  const ItemSize = (item) => {
    const variantWithDetails = item?.ProductDetail?.find(
      (variant) => variant?.ProdVariantDetails?.length > 0
    );

    if (variantWithDetails) {
      // Access the details of the first variant with ProdVariantDetails
      const firstVariantDetails = variantWithDetails?.Size;
      return firstVariantDetails;
    } else {
      // Handle the case where no variant satisfies the condition
      return null; // or any other value you want to return
    }
  };
  const ItemUomName = (item) => {
    const variantWithDetails = item?.ProductDetail?.find(
      (variant) => variant?.ProdVariantDetails?.length > 0
    );

    if (variantWithDetails) {
      // Access the details of the first variant with ProdVariantDetails
      const firstVariantDetails = variantWithDetails?.UomName;
      return firstVariantDetails;
    } else {
      // Handle the case where no variant satisfies the condition
      return null; // or any other value you want to return
    }
  };
  // Check stock availability by karthiga
  const stockavailablecard = (data) => {
    let fildata = data?.filter(
      (item) =>
        item?.ProductDetail?.[0]?.StockAvailable !== 'Y' ||
        (item?.ProductDetail?.[0]?.StockAvailable === 'Y' &&
          item?.OverAllQty > 0)
    );
    return fildata;
  };
  const returnCount = (ProdName, currentQty, KioskOrderDetails) => {
    let getCurrentProdDtl = KioskOrderDetails?.filter(
      (a) => a?.ProdName === ProdName
    );
    let totalOrderQty = getCurrentProdDtl?.reduce((accumulator, card) => {
      return accumulator + parseFloat(card.OrderQty || 0);
    }, 0);
    console.log(getCurrentProdDtl, 'getCurrentProdDtl');
    let count =
      parseInt(currentQty) - parseInt(getCurrentProdDtl ? totalOrderQty : 0);

    return count;
  };
  const returnQtyCount = (ProdId, item, orderDetails) => {
    let ItemQuantity = item?.ProdVariantDetails?.reduce((accumulator, card) => {
      return accumulator + parseInt(card.OverAllQty || 0);
    }, 0);

    let getCurrentProdDtl = orderDetails?.filter((a) => a?.ProdId === ProdId);
    let totalOrderQty = getCurrentProdDtl?.reduce((accumulator, card) => {
      return accumulator + parseInt(card.OrderQty || 0);
    }, 0);
    // let OverallProdQty = totalOrderQty - totalSelectedProductQty
    if (
      parseInt(ItemQuantity) > parseInt(getCurrentProdDtl ? totalOrderQty : 0)
    ) {
      let count =
        parseInt(ItemQuantity) -
        parseInt(getCurrentProdDtl ? totalOrderQty : 0);

      return parseInt(count);
    } else {
      let count = 0;
      return count;
    }
  };
  const returnVariantStock = (
    ProdId,
    currentQty,
    orderDetails,
    ProdVariantName
  ) => {
    let getCurrentProdDtl = orderDetails?.filter(
      (a) => a?.ProdId === ProdId && a?.ProdVariantName === ProdVariantName
    );
    let totalOrderQty = getCurrentProdDtl?.reduce((accumulator, card) => {
      return accumulator + parseFloat(card.OrderQty || 0);
    }, 0);

    if (
      parseInt(currentQty) > parseInt(getCurrentProdDtl ? totalOrderQty : 0)
    ) {
      let count =
        parseInt(currentQty) - parseInt(getCurrentProdDtl ? totalOrderQty : 0);
      return parseInt(count);
    } else {
      let count = 0;
      return count;
    }
  };
  return (
    <div
      className={props?.class ? props.class : 'CardPage2-loop'}
      style={{
        rowGap:
          kioskTemplateData?.KioskCategory == 'Category2'
            ? '1.5rem'
            : kioskTemplateData?.KioskCategory == 'Category3'
              ? '1rem'
              : kioskTemplateData?.KioskCategory == 'Category1'
                ? '1.5rem'
                : '',
      }}
    >
      {stockavailablecard(kioskCategoriesCard).map(
        (card) =>
          card?.OverAllExpStatus === 'N' && (
            <div
              className={
                (card?.OverAllQty !== undefined &&
                  returnCount(
                    card?.ProductDetail?.[0]?.ProdName,
                    card?.OverAllQty,
                    KioskOrderDetails
                  ) > 0) ||
                  card?.ProductDetail?.some(
                    (item) => item?.StockAvailable !== 'Y'
                  )
                  ? 'CardPage2-container'
                  : 'CardPage2-container-dis '
              }
              onClick={() => {
                CardOnClick(card);
              }}
            >
              <img
                src={
                  card?.ProductDetail?.[0]?.ProdLogo
                    ? card?.ProductDetail?.[0]?.ProdLogo
                    : horizontal
                }
                alt=""
              />
              <p className="CardPage2-container-name">{card?.ProdName}</p>
              {(card?.OverAllQty !== undefined &&
                returnCount(
                  card?.ProductDetail?.[0]?.ProdName,
                  card?.OverAllQty,
                  KioskOrderDetails
                ) > 0) ||
                card?.ProductDetail?.some(
                  (item) => item?.StockAvailable !== 'Y'
                ) ? (
                ''
              ) : (
                <div
                  style={{ color: 'red', marginTop: '5px', fontSize: '15px' }}
                >
                  Out Of Stock
                </div>
              )}
              {((card?.OverAllQty !== undefined &&
                returnCount(
                  card?.ProductDetail?.[0]?.ProdName,
                  card?.OverAllQty,
                  KioskOrderDetails
                ) > 0) ||
                card?.ProductDetail?.some(
                  (item) => item?.StockAvailable !== 'Y'
                )) && (
                  <p className="CardPage2-container-price">
                    {' '}
                    <span style={{ fontSize: '16px', fontFamily: 'gilroy' }}>
                      ₹
                    </span>
                    {ItemSellingPrice(card)}&nbsp;
                    <span className="BSItemCard-itemCount">
                      ({ItemSize(card)} {ItemUomName(card)})
                    </span>
                  </p>
                )}
            </div>
          )
      )}
      <div className={`Item3Warning ${maxLimitExceeded ? 'showing' : ''}`}>
        <p>
          <IoIosWarning size={30} color='#b99400' />Maximum Quantity ({maxQtyLimit}) Reached
        </p>
      </div>
      <Drawer
        title={<p className="cardpage-title">Select Quantity</p>}
        height={'max-content'}
        placement={'top'}
        closable={false}
        onClose={onClose}
        open={openQuantity}
        key={'top'}
      >
        <div className="CardPage3-varient-div">
          <div>
            <img
              className="CardPage3-varient-image"
              src={
                qtydata?.ProductDetail?.[0]?.ProdLogo
                  ? qtydata?.ProductDetail?.[0]?.ProdLogo
                  : horizontal
              }
              alt=""
            />
            <p
              style={{
                fontSize: '20px',
                fontWeight: '600',
                fontFamily: 'gilroy',
              }}
            >
              {qtydata?.ProductDetail?.[0]?.ProdName
                ? qtydata?.ProductDetail?.[0]?.ProdName
                : ''}
            </p>
          </div>
          <div className="CardPage3-varient-text">
            <h2>Quantity List</h2>
            {Object.entries(brandMapping).map(([brandName, brandItems]) => {
              const isValidBrandName =
                brandName !== 'null' && brandName !== 'undefined';
              return (
                <div key={brandName} className="Brand-Card">
                  {isValidBrandName && (
                    <div className="Brandname">
                      <h4>{brandName}</h4>
                    </div>
                  )}
                  <div className="BrandDetail">
                    {brandItems.map((item, index) => {
                      const expired = item.OverAllExpStatus === 'N';
                      const qtyCount = returnQtyCount(
                        item?.ProdId,
                        item,
                        KioskOrderDetails
                      );
                      const isAvailable = item?.StockAvailable !== 'Y';
                      const isDisabled = qtyCount > 0 || isAvailable;
                      return (
                        expired && (
                          <div key={`${brandName}-${index}`}>
                            <div
                              className={
                                isDisabled
                                  ? 'CardPage3-singlevarient-conatiner'
                                  : 'CardPage3-singlevarient-conatiner-dis'
                              }
                              onClick={() => VarientFun(item)}
                            >
                              <div
                                style={{
                                  display: 'flex',
                                  cursor: 'pointer',
                                  flexDirection: 'column',
                                  border: '1px solid #eaeaea',
                                  padding: '0.5rem',
                                  height: '9rem',
                                  alignItems: 'center',
                                  textAlign: 'center',
                                  justifyContent: 'space-around',
                                }}
                              >
                                <img
                                  src={item?.ProdLogo || horizontal}
                                  className="CardPage3-singlevarient-img"
                                  alt={`Product ${index}`}
                                />
                                {/* <p style={{ width: "6.5rem" }}>{item?.ProdName}</p> */}

                                <p>
                                  ₹{' '}
                                  {
                                    item?.ProdVariantDetails?.[0]
                                      ?.StockDetails?.[0]?.SellPrice
                                  }
                                  ({item?.Size + ' ' + item?.UomName})
                                </p>
                              </div>
                            </div>
                          </div>
                        )
                      );
                    })}
                  </div>
                </div>
              );
            })}
            {Object.keys(brandMapping).length === 0 && (
              <p>No product details available</p>
            )}
          </div>
        </div>
      </Drawer>
      <DefaultModal
        maskClosable={true}
        title={<p className="cardpage-title">Variants</p>}
        width={500}
        open={VariantOpen}
        top={20}
        footer={false}
        buttonText="Submit"
        handleCancel={handleClose}
        children={
          <>
            <div style={{ fontSize: '16px', fontWeight: '600' }}>
              {qtydata?.ProdName} ( {qtydata?.ProductDetail?.[QtyIndex]?.Size}{' '}
              {onePeiceFlow
                ? 'PCS'
                : qtydata?.ProductDetail?.[QtyIndex]?.UomName}
              )
            </div>
            <div
              style={{
                display: 'flex',
                flexDirection: 'column',
                columnGap: '1rem',
                rowGap: '0.5rem',
                paddingTop: '2rem',
                height: '30vh',
                overflow: 'auto',
              }}
            >
              {qtydata?.ProductDetail?.[QtyIndex]?.ProdVariantDetails?.map(
                (item, index) =>
                  item?.OverAllExpStatus === 'N' && (
                    <div
                      className={
                        returnVariantStock(
                          qtydata?.ProductDetail?.[QtyIndex]?.ProdId,
                          item?.OverAllQty,
                          KioskOrderDetails,
                          item?.ProdVariantName
                        ) > 0 ||
                          qtydata?.ProductDetail?.[QtyIndex]?.StockAvailable !==
                          'Y'
                          ? 'ProVariantCard'
                          : 'ProVariantCard-dis'
                      }
                      onClick={() => {
                        Stockfun(item, index);
                      }}
                    >
                      <div>{item?.ProdVariantName}</div>
                      {returnVariantStock(
                        qtydata?.ProductDetail?.[QtyIndex]?.ProdId,
                        item?.OverAllQty,
                        KioskOrderDetails,
                        item?.ProdVariantName
                      ) > 0 ||
                        qtydata?.ProductDetail?.[QtyIndex]?.StockAvailable !==
                        'Y' ? (
                        <div>₹ {item?.StockDetails?.[0]?.SellPrice}</div>
                      ) : (
                        'Out Of Stock'
                      )}
                    </div>
                  )
              )}
            </div>
          </>
        }
      />
    </div>
  );
};

export default CardPage2;