903 lines
31 KiB
React
903 lines
31 KiB
React
|
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;
|