790 lines
28 KiB
JavaScript
790 lines
28 KiB
JavaScript
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)}
|
|
<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;
|