903 lines
31 KiB
JavaScript
903 lines
31 KiB
JavaScript
import { HiLocationMarker, HiOutlineBadgeCheck } from "react-icons/hi";
|
||
import { TbTruckDelivery } from "react-icons/tb";
|
||
import { BsLightningChargeFill } from "react-icons/bs";
|
||
import { TbShare3 } from "react-icons/tb";
|
||
import { RiDeleteBinLine } from "react-icons/ri";
|
||
import { BiBookmark } from "react-icons/bi";
|
||
import React, { useEffect, useState } from "react";
|
||
import PropTypes from "prop-types";
|
||
import { RiArrowDownSFill } from "react-icons/ri";
|
||
import { BiRupee, BiStopwatch } from "react-icons/bi";
|
||
import { AiOutlineHeart, AiFillStar } from "react-icons/ai";
|
||
import { CiShop } from "react-icons/ci";
|
||
import { GiScooter } from "react-icons/gi";
|
||
import { IoCloseSharp } from "react-icons/io5";
|
||
import ModalPozoPublic from "../../Components/PozoPublicCard/ModalPozoPublic.jsx";
|
||
// import ShopCardQuantity from "./ShopCardQuantity";
|
||
import HeartSvg from "../../Images/Assets/HeartSvg";
|
||
import "../../Styles/Components/ShopCard.scss";
|
||
import pozologoimg from "../../Images/PozoStore.svg";
|
||
import { useNavigate } from "react-router-dom";
|
||
import FullPageLoader from "../../Components/Loader/PozoPublicLoader.jsx";
|
||
import { useDispatch } from "react-redux";
|
||
import { changeCartShow } from "../../Features/Cart/GlobalPublicBooking.js";
|
||
|
||
const ShopCard = ({
|
||
id,
|
||
shopName,
|
||
dishName,
|
||
imageUrl,
|
||
price,
|
||
deliveryTime,
|
||
deliveryDistance,
|
||
offer,
|
||
isVeg,
|
||
isNonVeg,
|
||
isFavorite,
|
||
addToCartBtn,
|
||
showCartShopName,
|
||
showQuantityModal,
|
||
showChangeQuantity,
|
||
offerValue,
|
||
deliveryAvailable,
|
||
MRP,
|
||
Buy,
|
||
QuantityPrice,
|
||
Review,
|
||
buyNow,
|
||
direction,
|
||
cartSDS,
|
||
deliveryStatus,
|
||
Cartoffer,
|
||
shopNameShow,
|
||
CartMRP,
|
||
Color,
|
||
Size,
|
||
Accredited,
|
||
showSize,
|
||
showColor,
|
||
youSave,
|
||
SDSIcon,
|
||
multiQty,
|
||
HomePrice,
|
||
ShowPinCodecheck,
|
||
ProductDescription,
|
||
InfoReview,
|
||
SingleImage,
|
||
ImageForwad,
|
||
Imagebackward,
|
||
imageChangeButtons,
|
||
imgwidth,
|
||
imgheight,
|
||
ShopCardDetailswidth,
|
||
Type,
|
||
}) => {
|
||
const navigate = useNavigate();
|
||
const dispatch = useDispatch();
|
||
|
||
const [fillColor, setFillColor] = useState(isFavorite ? "white" : "#D42527");
|
||
const [quantity, setQuantity] = useState(0);
|
||
const [isVisible, setIsVisible] = useState(false);
|
||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||
const [loading, setLoading] = useState(false);
|
||
|
||
|
||
|
||
const [isOpen, setIsOpen] = useState(false);
|
||
const [isCartVisible, setIsCartVisible] = useState(false);
|
||
|
||
const openModal2 = () => setIsOpen(true);
|
||
const closeModal2 = () => setIsOpen(false);
|
||
const handleHeartClick = () => {
|
||
setFillColor((prevColor) => (prevColor === "white" ? "#D42527" : "white"));
|
||
};
|
||
|
||
const handleAddToCartClick = () => {
|
||
setIsVisible(true);
|
||
setIsCartVisible(true);
|
||
setQuantity((prevQuantity) => prevQuantity + 1);
|
||
dispatch(changeCartShow(true));
|
||
};
|
||
|
||
const handleQuantityChange = (change) => {
|
||
setQuantity((prevQuantity) => {
|
||
const newQuantity = Math.max(prevQuantity + change, 0);
|
||
if (newQuantity === 0) {
|
||
setIsVisible(false);
|
||
dispatch(changeCartShow(false));
|
||
}
|
||
return newQuantity;
|
||
});
|
||
};
|
||
|
||
const openModal = () => {
|
||
setIsModalOpen(true);
|
||
};
|
||
|
||
const closeModal = () => {
|
||
setIsModalOpen(false);
|
||
};
|
||
|
||
const PageNavigate = () => {
|
||
setLoading(true);
|
||
|
||
setTimeout(() => {
|
||
navigate("/Store");
|
||
}, 700);
|
||
};
|
||
|
||
const PageIndividualNavigate = () => {
|
||
setLoading(true);
|
||
|
||
setTimeout(() => {
|
||
navigate("/IndividualCard");
|
||
}, 700);
|
||
};
|
||
|
||
const [currentImage, setCurrentImage] = useState(imageUrl);
|
||
const [fade, setFade] = useState(true);
|
||
|
||
useEffect(() => {
|
||
changeImage(imageUrl);
|
||
}, [imageUrl]);
|
||
const changeImage = (newImage) => {
|
||
setFade(false);
|
||
setTimeout(() => {
|
||
setCurrentImage(newImage);
|
||
setFade(true);
|
||
}, 300); // Duration of the fade-out effect
|
||
};
|
||
return (
|
||
<>
|
||
{loading && <FullPageLoader />}
|
||
{isOpen && (
|
||
<div className="modal-overlay" onClick={closeModal2}>
|
||
<div className="modal-content" onClick={(e) => e.stopPropagation()}>
|
||
<button className="close-button" onClick={closeModal2}>
|
||
×
|
||
</button>
|
||
<img
|
||
className={`slider-image ${fade ? "fade-in" : "fade-out"}`}
|
||
src={imageUrl}
|
||
alt="large"
|
||
/>
|
||
<button
|
||
onClick={() => {
|
||
Imagebackward();
|
||
}}
|
||
className="Shopcard-carosel-left-big"
|
||
>
|
||
❮
|
||
</button>
|
||
<button
|
||
onClick={() => {
|
||
ImageForwad();
|
||
}}
|
||
className="Shopcard-carosel-right-big"
|
||
>
|
||
❯
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
<div style={{ width: "inherit" }}>
|
||
<div className="ShopCard-Master">
|
||
<div
|
||
className="ShopCard-main"
|
||
key={id}
|
||
style={{ flexDirection: `${direction}` }}
|
||
>
|
||
{Type == "individualCard" ? (
|
||
<div className="ShopCard-img-parrent">
|
||
<div className="ShopCard-img">
|
||
{imageChangeButtons && (
|
||
<div style={{ position: "unset" }}>
|
||
<button
|
||
onClick={() => {
|
||
Imagebackward();
|
||
}}
|
||
className="Shopcard-carosel-left"
|
||
>
|
||
❮
|
||
</button>
|
||
</div>
|
||
)}
|
||
|
||
<img
|
||
style={{
|
||
width: imgwidth ? imgwidth : "",
|
||
height: imgheight ? imgheight : imgwidth ? imgwidth : "",
|
||
}}
|
||
// className={`slider-image ${fade ? "fade-in" : "fade-out"}`}
|
||
src={imageUrl}
|
||
alt={dishName}
|
||
onClick={
|
||
SingleImage == "Y" ? openModal2 : PageIndividualNavigate
|
||
}
|
||
/>
|
||
|
||
{imageChangeButtons && (
|
||
<div style={{ position: "unset" }}>
|
||
<button
|
||
onClick={() => {
|
||
ImageForwad();
|
||
}}
|
||
className="Shopcard-carosel-right"
|
||
>
|
||
❯
|
||
</button>
|
||
</div>
|
||
)}
|
||
|
||
{isFavorite == "Y" && (
|
||
<p onClick={handleHeartClick}>
|
||
<HeartSvg
|
||
fillColor={fillColor}
|
||
strokeColor="gray"
|
||
height="20px"
|
||
width="20px"
|
||
position="absolute"
|
||
top="0"
|
||
left="-3"
|
||
/>
|
||
</p>
|
||
)}
|
||
{offer == "Y" && (
|
||
<span>{offerValue ? `${offerValue} % OFF` : ""}</span>
|
||
)}
|
||
{isVeg == "veg" && (
|
||
<div className="veg">
|
||
<div
|
||
style={{
|
||
display: "flex",
|
||
alignItems: "center",
|
||
justifyContent: "center",
|
||
color: "#007E1C",
|
||
fontSize: "26px",
|
||
paddingBottom: "3px",
|
||
paddingRight: "1px",
|
||
}}
|
||
>
|
||
●
|
||
</div>
|
||
</div>
|
||
)}
|
||
{isNonVeg == "Y" && (
|
||
<div className="nonveg">
|
||
<div
|
||
style={{
|
||
display: "flex",
|
||
alignItems: "center",
|
||
justifyContent: "center",
|
||
color: "#BD0606",
|
||
fontSize: "26px",
|
||
paddingBottom: "3px",
|
||
paddingRight: "1px",
|
||
}}
|
||
>
|
||
●
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div className="ShopCard-img">
|
||
{imageChangeButtons && (
|
||
<div style={{ position: "unset" }}>
|
||
<button
|
||
onClick={() => {
|
||
Imagebackward();
|
||
}}
|
||
className="Shopcard-carosel-left"
|
||
>
|
||
❮
|
||
</button>
|
||
</div>
|
||
)}
|
||
|
||
<img
|
||
style={{
|
||
width: imgwidth ? imgwidth : "",
|
||
height: imgheight ? imgheight : imgwidth ? imgwidth : "",
|
||
}}
|
||
className={`slider-image ${fade ? "fade-in" : "fade-out"}`}
|
||
src={imageUrl}
|
||
alt={dishName}
|
||
onClick={
|
||
SingleImage == "Y" ? openModal2 : PageIndividualNavigate
|
||
}
|
||
/>
|
||
|
||
{imageChangeButtons && (
|
||
<div style={{ position: "unset" }}>
|
||
<button
|
||
onClick={() => {
|
||
ImageForwad();
|
||
}}
|
||
className="Shopcard-carosel-right"
|
||
>
|
||
❯
|
||
</button>
|
||
</div>
|
||
)}
|
||
|
||
{isFavorite == "Y" && (
|
||
<p onClick={handleHeartClick}>
|
||
<HeartSvg
|
||
fillColor={fillColor}
|
||
strokeColor="gray"
|
||
height="20px"
|
||
width="20px"
|
||
position="absolute"
|
||
top="0"
|
||
left="-3"
|
||
/>
|
||
</p>
|
||
)}
|
||
{offer == "Y" && (
|
||
<span>{offerValue ? `${offerValue} % OFF` : ""}</span>
|
||
)}
|
||
{isVeg == "veg" && (
|
||
<div className="veg">
|
||
<div
|
||
style={{
|
||
display: "flex",
|
||
alignItems: "center",
|
||
justifyContent: "center",
|
||
color: "#007E1C",
|
||
fontSize: "26px",
|
||
paddingBottom: "3px",
|
||
paddingRight: "1px",
|
||
}}
|
||
>
|
||
●
|
||
</div>
|
||
</div>
|
||
)}
|
||
{isNonVeg == "Y" && (
|
||
<div className="nonveg">
|
||
<div
|
||
style={{
|
||
display: "flex",
|
||
alignItems: "center",
|
||
justifyContent: "center",
|
||
color: "#BD0606",
|
||
fontSize: "26px",
|
||
paddingBottom: "3px",
|
||
paddingRight: "1px",
|
||
}}
|
||
>
|
||
●
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
<div
|
||
className="ShopCard-details"
|
||
style={{
|
||
width:
|
||
direction == "row"
|
||
? ShopCardDetailswidth
|
||
? ShopCardDetailswidth
|
||
: "80vw"
|
||
: "",
|
||
}}
|
||
>
|
||
{showQuantityModal == "Y" && (
|
||
<div
|
||
style={{
|
||
display: "flex",
|
||
justifyContent: "space-between",
|
||
width: "100%",
|
||
alignItems: "center",
|
||
}}
|
||
>
|
||
<div>
|
||
<div className="add-quantity-modal">
|
||
400 g <RiArrowDownSFill size={18} />
|
||
</div>
|
||
{QuantityPrice && (
|
||
<p
|
||
style={{
|
||
color: "Green",
|
||
fontSize: "19px",
|
||
fontWeight: "600",
|
||
fontFamily: "Gilroy",
|
||
}}
|
||
>
|
||
<BiRupee size={17} style={{ marginRight: "-3px" }} />
|
||
{QuantityPrice}
|
||
</p>
|
||
)}
|
||
</div>
|
||
|
||
<div className="ShopCard-review" style={{ fontSize: "12px" }}>
|
||
<p>
|
||
<AiFillStar color="#FF7A00" /> <span>4.5</span>
|
||
</p>
|
||
<div className="reviewHover">(1 Review)</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{shopNameShow == "Y" && (
|
||
<div className="ShopCard-shopName" onClick={PageNavigate}>
|
||
{Type == "PozoCart" ? "From" : "Visit"} <CiShop size={15} />
|
||
<small className="scroll-shop">{shopName}</small>
|
||
</div>
|
||
)}
|
||
|
||
<div className="ShopCard-dishName-review">
|
||
<div className="ShopCard-dishName">
|
||
<p
|
||
className="Shoopcard-productName"
|
||
style={{ paddingRight: "2rem !important" }}
|
||
>
|
||
{dishName}
|
||
</p>
|
||
{deliveryAvailable == "Y" && (
|
||
<div className="delivery">
|
||
<GiScooter size={18} style={{ marginBottom: "-3px" }} />{" "}
|
||
Delivery Available
|
||
</div>
|
||
)}
|
||
{ProductDescription == "Y" && (
|
||
<div>
|
||
<p
|
||
style={{
|
||
fontSize: "12px",
|
||
lineHeight: "1rem",
|
||
color: "#515151",
|
||
padding: "15px 10px 15px 0 ",
|
||
}}
|
||
>
|
||
Bluetooth Soundbar w/ 500W RMS Signature Sound,5.1
|
||
Channel Surround Sound,BTv5.3, Wall Mountable
|
||
Design,Bass&Treble Controls&Master Remote
|
||
Control(Premium Black)
|
||
</p>
|
||
</div>
|
||
)}
|
||
{showCartShopName == "Y" && (
|
||
<div className="ShopCard-shopName2">
|
||
From <CiShop size={15} />
|
||
<small className="scroll-shop">{shopName}</small>
|
||
</div>
|
||
)}
|
||
{Accredited == "Y" && (
|
||
<div className="Accredited">
|
||
<img src={pozologoimg} alt="pozologoimg" width={40} />
|
||
<span>
|
||
{" "}
|
||
<HiOutlineBadgeCheck
|
||
color="white"
|
||
size={15}
|
||
style={{ marginBottom: "-4px" }}
|
||
/>
|
||
Accredited
|
||
</span>
|
||
</div>
|
||
)}
|
||
{InfoReview == "Y" && (
|
||
<div>
|
||
<div className="ShopCard-review">
|
||
<p>
|
||
<AiFillStar
|
||
style={{ fontSize: "20px" }}
|
||
color="#FF7A00"
|
||
/>{" "}
|
||
<span style={{ fontSize: "20px" }}>4.5</span>
|
||
</p>
|
||
<div className="reviewHover">(1 Review)</div>
|
||
<span className="review-modal">
|
||
Lorem ipsum dolor sit amet consectetur adipisicing
|
||
elit. At quas eius quaerat rerum, accusantium quis
|
||
maxime reiciendis
|
||
</span>
|
||
</div>
|
||
</div>
|
||
)}
|
||
<div className="ShopCard-prize-btn">
|
||
{Type == "individualCard" && (
|
||
<div className="ShopCard-prize">
|
||
<div style={{ display: "flex", columnGap: "10px" }}>
|
||
{price && (
|
||
<p className="shopcard-price-p">
|
||
<BiRupee
|
||
size={13}
|
||
style={{
|
||
marginBottom: "2px",
|
||
marginRight: "-3px",
|
||
}}
|
||
/>
|
||
{price}
|
||
</p>
|
||
)}
|
||
{HomePrice && (
|
||
<p>
|
||
From{" "}
|
||
<BiRupee
|
||
size={16}
|
||
style={{
|
||
marginBottom: "-1px",
|
||
marginRight: "-3px",
|
||
}}
|
||
/>{" "}
|
||
{HomePrice} /-
|
||
</p>
|
||
)}
|
||
|
||
{CartMRP == "Y" && (
|
||
<span
|
||
className="shop-cart-mrp"
|
||
style={{ fontSize: "10px" }}
|
||
>
|
||
M.R.P.: <s>₹1,0099.00</s>
|
||
</span>
|
||
)}
|
||
|
||
{Cartoffer == "Y" && (
|
||
<span
|
||
className="shopcard-offertag"
|
||
style={{
|
||
backgroundColor: "#D42527",
|
||
borderRadius: "50px",
|
||
color: "#FFFFFF",
|
||
padding: "5px 10px",
|
||
fontWeight: "600",
|
||
fontFamily: "Gilroy",
|
||
}}
|
||
>
|
||
{offerValue ? `${offerValue} % OFF` : ""}
|
||
</span>
|
||
)}
|
||
{youSave && (
|
||
<div className="you-save">You Save ₹{youSave}</div>
|
||
)}
|
||
</div>
|
||
|
||
{deliveryTime && (
|
||
<div className="ShopCard-stopwatch">
|
||
<BiStopwatch size={16} /> {deliveryTime}{" "}
|
||
{deliveryDistance && " • " + deliveryDistance}
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{ShowPinCodecheck == "Y" && (
|
||
<div className="ShopCard-pincode">
|
||
<div
|
||
style={{
|
||
display: "flex",
|
||
alignItems: "center",
|
||
gap: "0.3rem",
|
||
backgroundColor: "#f4f4f4",
|
||
padding: "4px 10px",
|
||
borderRadius: "8px",
|
||
}}
|
||
>
|
||
<HiLocationMarker
|
||
style={{ color: "#E33333", fontSize: "20px" }}
|
||
/>
|
||
<input
|
||
placeholder="Enter Pincode"
|
||
type="number"
|
||
maxLength={5}
|
||
style={{
|
||
width: "6rem",
|
||
outline: "none",
|
||
border: "none",
|
||
padding: "3px 0px",
|
||
backgroundColor: "#f4f4f4",
|
||
}}
|
||
onInput={(e) => {
|
||
if (e.target.value.length > 6) {
|
||
e.target.value = e.target.value.slice(0, 6);
|
||
}
|
||
}}
|
||
/>
|
||
</div>
|
||
<p style={{ fontSize: "12px", cursor: "pointer" }}>
|
||
Check Delivery
|
||
</p>
|
||
</div>
|
||
)}
|
||
|
||
<div
|
||
style={{
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
rowGap: "2px",
|
||
marginTop: "0.5rem",
|
||
}}
|
||
>
|
||
{showSize == "Y" && (
|
||
<div className="size">
|
||
Size : <div> {Size}</div>
|
||
</div>
|
||
)}
|
||
|
||
{showColor == "Y" && (
|
||
<div className="color">
|
||
Color : <div> {Color}</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
{Review == "Y" && (
|
||
<div className="ShopCard-review">
|
||
<p style={{ display: "flex" }}>
|
||
<AiFillStar color="#FF7A00" /> <span>4.5</span>
|
||
</p>
|
||
<div className="reviewHover">(1 Review)</div>
|
||
<span className="review-modal">
|
||
Lorem ipsum dolor sit amet consectetur adipisicing elit.
|
||
At quas eius quaerat rerum, accusantium quis maxime
|
||
reiciendis
|
||
</span>
|
||
</div>
|
||
)}
|
||
{cartSDS == "Y" && (
|
||
<div className="cart-sds">
|
||
<p>
|
||
<BiBookmark
|
||
size={14}
|
||
color="#1C1C1C"
|
||
style={{ marginBottom: "-2px" }}
|
||
/>{" "}
|
||
Save for later
|
||
</p>
|
||
<p>
|
||
<RiDeleteBinLine
|
||
size={15}
|
||
style={{ marginBottom: "-2px" }}
|
||
/>{" "}
|
||
delete
|
||
</p>
|
||
<p>
|
||
<TbShare3 size={15} style={{ marginBottom: "-2px" }} />{" "}
|
||
share
|
||
</p>
|
||
</div>
|
||
)}
|
||
|
||
{SDSIcon == "Y" && (
|
||
<div className="SDSIcon">
|
||
<p style={{ display: "flex", columnGap: "10px" }}>
|
||
<BiBookmark
|
||
size={20}
|
||
color="#1C1C1C"
|
||
style={{ marginBottom: "-2px", strokeWidth: "0.1" }}
|
||
/>
|
||
<RiDeleteBinLine
|
||
size={20}
|
||
strokeWidth={0.7}
|
||
style={{ marginBottom: "-2px", strokeWidth: "0.1" }}
|
||
/>
|
||
<TbShare3
|
||
className="share-icon"
|
||
size={30}
|
||
style={{ marginBottom: "-2px", strokeWidth: "0.7" }}
|
||
/>{" "}
|
||
</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
<div className="ShopCard-quantity-button">
|
||
{MRP && <s>M.R.P.:₹{MRP}</s>}
|
||
{Buy == "Y" && <p>BUY</p>}
|
||
</div>
|
||
|
||
<div className="ShopCard-prize-btn">
|
||
{Type !== "individualCard" && (
|
||
<div className="ShopCard-prize">
|
||
<div style={{ display: 'flex', columnGap: "10px" }}>
|
||
{price && (
|
||
<p className="shopcard-price-p">
|
||
<BiRupee size={13} style={{ marginBottom: "2px", marginRight: "-3px" }} />{price}
|
||
</p>
|
||
)}
|
||
{HomePrice && (
|
||
<p>
|
||
From <BiRupee size={16} style={{ marginBottom: "-1px", marginRight: "-3px" }} /> {HomePrice} /-
|
||
</p>
|
||
)}
|
||
|
||
{/*================== cart MRP ============= */}
|
||
{CartMRP == "Y" && (
|
||
<span className="shop-cart-mrp" style={{ fontSize: "10px", }}>M.R.P.: <s>₹1,0099.00</s></span>
|
||
)}
|
||
|
||
{Cartoffer == "Y" && (
|
||
<span
|
||
className="shopcard-offertag"
|
||
style={{
|
||
backgroundColor: "#D42527",
|
||
borderRadius: "50px",
|
||
color: "#FFFFFF",
|
||
padding: "5px 10px",
|
||
fontWeight: "600",
|
||
fontFamily: "Gilroy"
|
||
}}>
|
||
{offerValue ? `${offerValue} % OFF` : ""}
|
||
</span>)}
|
||
{youSave && (
|
||
<div className="you-save">
|
||
You Save ₹{youSave}
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{deliveryTime && (
|
||
<div className="ShopCard-stopwatch">
|
||
<BiStopwatch size={16} /> {deliveryTime} {deliveryDistance && " • " + deliveryDistance}
|
||
</div>
|
||
)}
|
||
|
||
</div>
|
||
)}
|
||
|
||
|
||
<div style={{ display: "flex" }}>
|
||
|
||
{deliveryStatus == "Y" && (
|
||
<div className="delivery-status">
|
||
<TbTruckDelivery
|
||
size={14}
|
||
style={{ marginBottom: "-3px" }}
|
||
/>
|
||
<span> DELIVERY </span>Free •{" "}
|
||
<span>6 | Jul | Saturday </span>
|
||
{" "}
|
||
<BsLightningChargeFill
|
||
color="#FA9600"
|
||
size={12}
|
||
style={{ marginBottom: "-2px" }}
|
||
/>
|
||
Fast • <span>Today</span>
|
||
</div>
|
||
)}
|
||
|
||
<div className="ShopCard-btn">
|
||
{showChangeQuantity == "Y" && (
|
||
<div className="add-quantity" onClick={openModal}>
|
||
400 g <RiArrowDownSFill size={18} />
|
||
</div>
|
||
)}
|
||
{buyNow == "Y" && <p className="buy-now">BUY NOW </p>}
|
||
{isVisible ? (
|
||
<div className="add-minus">
|
||
<span onClick={() => handleQuantityChange(-1)}>-</span>
|
||
<p
|
||
style={{
|
||
fontFamily: "Gilroy",
|
||
fontWeight: "600",
|
||
fontSize: "17px",
|
||
}}
|
||
>
|
||
{quantity}
|
||
</p>
|
||
<span onClick={() => handleQuantityChange(1)}>+</span>
|
||
</div>
|
||
)
|
||
: (
|
||
addToCartBtn == "Y" && (
|
||
<>
|
||
<div className="buy" onClick={handleAddToCartClick}>
|
||
Add to Cart
|
||
</div>
|
||
</>
|
||
)
|
||
)}
|
||
</div>
|
||
</div>
|
||
<ModalPozoPublic
|
||
onClose={closeModal}
|
||
width="700px"
|
||
height="400px"
|
||
maxWidth="90%"
|
||
maxHeight="90%"
|
||
top="auto"
|
||
right="auto"
|
||
left="auto"
|
||
bottom="auto"
|
||
closeIcon={<IoCloseSharp />}
|
||
title="Select your Quantity"
|
||
isOpen={isModalOpen}
|
||
>
|
||
<div>
|
||
{multiQty?.map((data) => (
|
||
<ShopCard
|
||
imageUrl={data.imageUrl}
|
||
Buy="Y"
|
||
isFavorite="Y"
|
||
offer="Y"
|
||
offerValue="30"
|
||
showQuantityModal="Y"
|
||
QuantityPrice="35.00"
|
||
isNonVeg={data?.continental == "NonVeg" && "Y"}
|
||
isVeg={data?.continental == "Veg" && "Y"}
|
||
/>
|
||
))}
|
||
</div>
|
||
</ModalPozoPublic>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</>
|
||
);
|
||
};
|
||
// console.log(ShopCard.propTypes, "ShopCardShopCard");
|
||
ShopCard.propTypes = {
|
||
id: PropTypes.number.isRequired,
|
||
shopName: PropTypes.string.isRequired,
|
||
dishName: PropTypes.string.isRequired,
|
||
imageUrl: PropTypes.string.isRequired,
|
||
price: PropTypes.string.isRequired,
|
||
deliveryTime: PropTypes.string.isRequired,
|
||
deliveryDistance: PropTypes.string.isRequired,
|
||
direction: PropTypes.string.isRequired,
|
||
QuantityPrice: PropTypes.string.isRequired,
|
||
Color: PropTypes.string.isRequired,
|
||
Size: PropTypes.string.isRequired,
|
||
youSave: PropTypes.string.isRequired,
|
||
HomePrice: PropTypes.string.isRequired,
|
||
|
||
offer: PropTypes.bool,
|
||
isVeg: PropTypes.bool,
|
||
isNonVeg: PropTypes.bool,
|
||
isFavorite: PropTypes.bool,
|
||
addToCartBtn: PropTypes.bool,
|
||
showCartShopName: PropTypes.bool,
|
||
showQuantityModal: PropTypes.bool,
|
||
showChangeQuantity: PropTypes.bool,
|
||
deliveryAvailable: PropTypes.bool,
|
||
Buy: PropTypes.bool,
|
||
Review: PropTypes.bool,
|
||
buyNow: PropTypes.bool,
|
||
cartSDS: PropTypes.bool,
|
||
deliveryStatus: PropTypes.bool,
|
||
Cartoffer: PropTypes.bool,
|
||
shopNameShow: PropTypes.bool,
|
||
CartMRP: PropTypes.bool,
|
||
Accredited: PropTypes.bool,
|
||
showSize: PropTypes.bool,
|
||
showColor: PropTypes.bool,
|
||
youSave: PropTypes.bool,
|
||
SDSIcon: PropTypes.bool,
|
||
};
|
||
|
||
ShopCard.defaultProps = {
|
||
offer: true,
|
||
isVeg: false,
|
||
isNonVeg: false,
|
||
isFavorite: true,
|
||
addToCartBtn: true,
|
||
showCartShopName: true,
|
||
showQuantityModal: true,
|
||
showChangeQuantity: true,
|
||
deliveryAvailable: true,
|
||
Buy: true,
|
||
Review: true,
|
||
buyNow: true,
|
||
cartSDS: true,
|
||
deliveryStatus: true,
|
||
Cartoffer: true,
|
||
shopNameShow: true,
|
||
CartMRP: true,
|
||
Accredited: true,
|
||
showSize: true,
|
||
showColor: true,
|
||
SDSIcon: false,
|
||
};
|
||
|
||
export default ShopCard;
|