Android_Retail/src/Pages/Kiosk/OrderView/OrderView1.jsx

import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { MdCurrencyRupee } from 'react-icons/md';
import KioskHeader from '../Components/KioskHeader';
import KioskFooter from '../Components/KioskFooter';
import KioskFooter2 from '../Components/KioskFooter2';
import {
  changeKioskPageName,
  getKioskLightColour,
} from '../../../Features/Kiosk/kiosk';
import {
  GlobalKioskOrderDetails,
  changeKioskOrderDetails,
} from '../../../Features/BookingScreen/BookingData/KioskBookingData';
import KioskFooter3 from '../Components/KioskFooter3';
import PozoDineInIcon from '../KioskIcons/KioskDineIn';
import TakeAway from '../KioskIcons/KioskTakeAway';
import '../../../Styles/Kiosk/OrderView/OrderView1.scss';

const OrderView1 = (props) => {
  const KioskThemeData = props?.hasOwnProperty('KioskThemeData')
    ? props['KioskThemeData']
    : null;
  const dispatch = useDispatch();
  const KioskOrderDetails = useSelector(GlobalKioskOrderDetails);
  const getKioskLightColourdata = useSelector(getKioskLightColour);

  const BackToCategory = async () => {
    await dispatch(changeKioskPageName('categoryPage'));
  };
  const removeFromCart = async (item) => {
    await dispatch(
      changeKioskOrderDetails(
        KioskOrderDetails?.filter(
          (cartItem) =>
            !(
              cartItem?.ProdId === item?.ProdId &&
              cartItem?.InwardDtlId === item?.InwardDtlId &&
              cartItem?.OrderRate === item?.OrderRate &&
              cartItem?.BookingTypeName === item?.BookingTypeName
            )
        )
      )
    );
  };
  const increase = async (item) => {
    await 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
        )
      )
    );
  };
  const decrease = async (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
    console.log(isItemInCart, 'isItemInCart');

    if (isItemInCart?.OrderQty > 1) {
      await 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 {
      await dispatch(
        changeKioskOrderDetails(
          KioskOrderDetails?.filter(
            (cartItem) =>
              !(
                cartItem.ProdId === item.ProdId &&
                cartItem.InwardDtlId === item.InwardDtlId &&
                cartItem.OrderRate === item.OrderRate &&
                cartItem?.BookingTypeName === item?.BookingTypeName
              )
          )
        )
      );
    }
  };
  return (
    <div className="KioskOrderList-master">
      <div
        className="KioskOrderList-main"
        style={{ backgroundColor: getKioskLightColourdata }}
      >
        {/* header area  */}

        <KioskHeader
          KioskThemeData={KioskThemeData}
          SessionDtl={props?.SessionDtl}
        />

        <div
          className={
            props?.Footer === '3'
              ? 'KioskOrderList-scrolling1'
              : 'KioskOrderList-scrolling'
          }
        >
          <div className="KioskOrderList-ordercard-main">
            {KioskOrderDetails.map((item) => (
              <div className="KioskOrderList-ordercards">
                <div
                  style={{ position: 'relative' }}
                  className="KioskOrderView2-item-img-comtainer"
                >
                  <div className="OrderViewCardIcon1">
                    {item?.BookingTypeName == 'Dine In' ? (
                      <PozoDineInIcon
                        style={{
                          height: '23px',
                          width: '23px',
                          color: '#40AF7A',
                        }}
                      />
                    ) : (
                      <TakeAway
                        style={{
                          height: '23px',
                          width: '23px',
                          color: '#8D765B',
                        }}
                      />
                    )}
                  </div>
                </div>

                <div className="KioskOrderList-dishname-prize">
                  <p>
                    {item?.ProdName} &nbsp;{' '}
                    {item.BrandName !== null ? item.BrandName : ''}(
                    {!item?.ProdVariantName?.toLowerCase().includes(
                      'variant'
                    ) && <span>{item?.ProdVariantName} </span>}
                    {item?.Size} {item?.SinglePc == 'Y' ? 'PCS' : item?.UomName}
                    )
                  </p>
                  <span>
                    {' '}
                    <MdCurrencyRupee
                      size={18}
                      style={{ marginRight: '-4px', marginBottom: '-3px' }}
                    />
                    {item?.TotalAmt}
                  </span>
                </div>
                <div className="KioskOrderList-add-remove">
                  <div className="add-remove">
                    <span onClick={() => decrease(item)}> - </span>
                    <p>{item?.OrderQty}</p>
                    <span
                      style={{
                        pointerEvents:
                          item?.StockAvailable === 'Y'
                            ? item?.BalanceQty <= item?.OrderQty && 'none'
                            : '',
                        opacity:
                          item?.StockAvailable === 'Y'
                            ? item?.BalanceQty <= item?.OrderQty && '30%'
                            : '',
                      }}
                      onClick={() => increase(item)}
                    >
                      {' '}
                      +{' '}
                    </span>
                  </div>

                  <div className="remove" onClick={() => removeFromCart(item)}>
                    remove
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
        <div
          className={
            props?.Footer === '3'
              ? 'KioskOrderList-addmore-footer3'
              : 'KioskOrderList-addmore'
          }
          onClick={() => BackToCategory()}
          style={{ backgroundColor: getKioskLightColourdata }}
        >
          {' '}
          <p>Add More + </p>
        </div>

        <div>
          {props?.Footer === '1' && (
            <KioskFooter SessionDtl={props?.SessionDtl} />
          )}
          {props?.Footer === '2' && (
            <>
              <div
                style={{
                  position: 'fixed',
                  bottom: 0,
                  width: '100%',
                  background: 'white',
                  padding: '1rem 0rem',
                }}
              >
                <KioskFooter2 SessionDtl={props?.SessionDtl} />
              </div>
            </>
          )}
          {props?.Footer === '3' && (
            <>
              <div
                style={{
                  position: 'fixed',
                  bottom: 0,
                  width: '100%',
                  background: 'white',
                  padding: '1rem 0rem',
                }}
              >
                <KioskFooter3 SessionDtl={props?.SessionDtl} />
              </div>
            </>
          )}
        </div>
      </div>
    </div>
  );
};

export default OrderView1;