Skip to content

Jay Mehta / zango-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 8107e696 by jaymehta
Options

Merge branch 'master' of https://git.logicloop.io/jaymehta/zango-frontend

2 parents 5685c638 5ef61bb4
Inline Side-by-side
Showing 7 changed files with 249 additions and 230 deletions
components/blog/BlogItem.js
...@@ -308,15 +308,15 @@ const BlogsItem = ({blogs}) => { ...@@ -308,15 +308,15 @@ const BlogsItem = ({blogs}) => {
<span className="image-container"> <span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src={cleanImage(data?.attributes?.image?.data?.attributes)} /> <Image layout="fill" alt="" className="image img-fluid" src={cleanImage(data?.attributes?.image?.data?.attributes)} />
</span> </span>
<div className="top-rated">{data?.attributes?.categories}</div> {/* <div className="top-rated">{data?.attributes?.categories}</div> */}
</div> </div>
<div className="info"> <div className="info">
<div className="read-row"> {/* <div className="read-row">
<span className="image-container"> <span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/clock.svg" /> <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/clock.svg" />
</span> </span>
<div className="">{data?.attributes?.read} Read</div> <div className="">{data?.attributes?.read} Read</div>
</div> </div> */}
<div className="title">{data?.attributes?.title}</div> <div className="title">{data?.attributes?.title}</div>
<div className="discription" dangerouslySetInnerHTML={{ __html: data?.attributes?.description }}></div> <div className="discription" dangerouslySetInnerHTML={{ __html: data?.attributes?.description }}></div>
<div className="read-more"> <div className="read-more">
......
components/detail/DetailInfo.js
...@@ -18,144 +18,159 @@ import WishlistComponent from "./WIshlistComponent.js"; ...@@ -18,144 +18,159 @@ import WishlistComponent from "./WIshlistComponent.js";
import ShareWidget from "./ShareWidget.js"; import ShareWidget from "./ShareWidget.js";
const DetailInfo = ({ activityById }) => { const DetailInfo = ({ activityById }) => {
const router = useRouter(); const router = useRouter();
const dispatch = useDispatch(); const dispatch = useDispatch();
useEffect(() => { useEffect(() => {
dispatch(getCurrentEndUser()); dispatch(getCurrentEndUser());
}, []); }, []);
const [session, setSession] = useState(null); const [session, setSession] = useState(null);
const [enqDate, setenqDate] = useState(); const [enqDate, setenqDate] = useState();
const [loading, setloading] = useState(false); const [loading, setloading] = useState(false);
const [quantity, setquantity] = useState(); const [quantity, setquantity] = useState();
const [loginModal, setloginModal] = useState(false); const [loginModal, setloginModal] = useState(false);
const [enquiryModal, setenquiryModal] = useState(false); const [enquiryModal, setenquiryModal] = useState(false);
const [showshareWidget, setshowshareWidget] = useState(false); const [showshareWidget, setshowshareWidget] = useState(false);
const { loadedUser } = useSelector(state => state.loadedUser); const { loadedUser } = useSelector(state => state.loadedUser);
const { endUser } = useSelector(state => state.endUser); const { endUser } = useSelector(state => state.endUser);
useEffect(() => { useEffect(() => {
const fetchSession = async () => { const fetchSession = async () => {
setSession(await getSession()); setSession(await getSession());
};
fetchSession();
// dispatch(getLoggedInVendor());
}, []);
const [showInfo, setShowInfo] = useState(false);
const [isToggled, setIsToggled] = useState(false);
console.log("endUser", endUser);
const handleMouseEnter = () => {
setShowInfo(true);
}; };
fetchSession();
// dispatch(getLoggedInVendor());
}, []);
const [showInfo, setShowInfo] = useState(false);
const [isToggled, setIsToggled] = useState(false);
console.log("endUser", endUser);
const handleMouseEnter = () => {
setShowInfo(true);
};
const handleMouseLeave = () => { const handleMouseLeave = () => {
setShowInfo(false); setShowInfo(false);
}; };
return ( return (
<Fragment> <Fragment>
<div className="row"> <div className="row">
{activityById && ( {activityById && (
<div className="col-12"> <div className="col-12">
<div className="product-info"> <div className="product-info">
<div className="hide-on-mobile"> <div className="hide-on-mobile">
<div className="top-row"> <div className="top-row">
<div className="most-booked">Most Booked</div> <div className="most-booked">Most Booked</div>
<div className="wishlist-share"> <div className="wishlist-share">
{endUser && <WishlistComponent activityId={activityById.data.id} userId={endUser.id} />} {endUser && <WishlistComponent activityId={activityById.data.id} userId={endUser.id} />}
<a href="#" className="add-to-forwardt"> <a href="#" className="add-to-forwardt">
<span className="image-container"> <span className="image-container">
<Image <Image
onClick={() => { onClick={() => {
setshowshareWidget(true); setshowshareWidget(true);
}} }}
layout="fill" layout="fill"
alt="" alt=""
className="image img-fluid" className="image img-fluid"
src="/images/icons/forward.svg" src="/images/icons/forward.svg"
/> />
</span> </span>
</a> </a>
</div> </div>
</div> </div>
<motion.div variants={slideFromRight(0.4)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}> <motion.div variants={slideFromRight(0.4)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
<div className="product-name">{activityById.data.attributes.name}</div> <div className="product-name">{activityById.data.attributes.name}</div>
</motion.div> </motion.div>
</div> </div>
<div className="product-reviews"> <div className="product-reviews">
<span className="rating">{activityById.data.attributes.rating}</span> <span className="rating">{activityById.data.attributes.rating}</span>
<span className="review">1,365 Reviews</span> <span className="review">1,365 Reviews</span>
<span className="star"> <span className="star">
<a href=""> <a href="">
<span className="image-container"> <span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" /> <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" />
</span> </span>
</a> </a>
<a href=""> <a href="">
<span className="image-container"> <span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" /> <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" />
</span> </span>
</a> </a>
<a href=""> <a href="">
<span className="image-container"> <span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" /> <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" />
</span> </span>
</a> </a>
<a href=""> <a href="">
<span className="image-container"> <span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" /> <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" />
</span> </span>
</a> </a>
<a href=""> <a href="">
<span className="image-container"> <span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" /> <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" />
</span> </span>
</a> </a>
</span> </span>
</div> </div>
<div className="mb-2">Per Person</div> <div className="mb-2">Per Person</div>
<div className="price"> <div className="price">
${activityById.data.attributes.pricePerPerson} {activityById.data.attributes.offers && <span>{activityById.data.attributes.offers}% Off</span>} ${activityById.data.attributes.pricePerPerson} {activityById.data.attributes.offers && <span>{activityById.data.attributes.offers}% Off</span>}
</div> </div>
<div className="mb-4">{activityById.data.attributes.description}</div> <div className="mb-4">{activityById.data.attributes.description}</div>
<div className="location">Location & Address</div> <div className="location">Location & Address</div>
{/* <div className="mb-2">Chelsea </div> */} {/* <div className="mb-2">Chelsea </div> */}
<div className="">{activityById.data.attributes.address}</div> <div className="">{activityById.data.attributes.address}</div>
<div className="btn-row"> <div className="btn-row">
<Button <Button
disabled={loading} disabled={loading}
onClick={() => { onClick={() => {
if (!endUser) { if (!endUser) {
setloginModal(true); setloginModal(true);
} else { } else {
setenquiryModal(true); setenquiryModal(true);
} }
}} }}
variant="primary me-3" variant="primary me-3"
> >
{loading ? <Loader /> : "Enquire Now"} {loading ? <Loader /> : "Enquire Now"}
</Button> </Button>
<Button <Button
onClick={() => { onClick={() => {
if (!endUser) { if (!endUser) {
setloginModal(true); setloginModal(true);
} else { } else {
router.push("/gift-card"); router.push("/gift-card");
} }
}} }}
variant="secondary" variant="secondary"
> >
Gift Now Gift Now
<span className="image-container btn-gift"> <span className="image-container btn-gift">
<Image layout="fill" className="image img-fluid" src="/images/icons/gift-card-icon.svg" /> <Image layout="fill" className="image img-fluid" src="/images/icons/gift-card-icon.svg" />
</span> </span>
</Button> </Button>
</div> </div>
<div>
<Button
disabled={loading}
// onClick={() => {
// if (!endUser) {
// setloginModal(true);
// } else {
// setenquiryModal(true);
// }
// }}
variant="primary me-3"
>
Book Now
</Button>
</div>
</div>
</div>
)}
</div> </div>
</div> {/* {activityById && (
)}
</div>
{/* {activityById && (
<div className="row hide-on-desktop"> <div className="row hide-on-desktop">
<div className="col-12"> <div className="col-12">
<ul className="availability-wrappper"> <ul className="availability-wrappper">
...@@ -205,94 +220,94 @@ const DetailInfo = ({ activityById }) => { ...@@ -205,94 +220,94 @@ const DetailInfo = ({ activityById }) => {
</div> </div>
</div> </div>
)} */} )} */}
<Modal <Modal
centered centered
show={showshareWidget} show={showshareWidget}
onHide={() => { onHide={() => {
setshowshareWidget(false); setshowshareWidget(false);
}} }}
>
<Modal.Header closeButton>Share on social media</Modal.Header>
<Modal.Body>
<ShareWidget />
</Modal.Body>
</Modal>
{activityById && (
<Modal
show={enquiryModal}
onHide={() => {
setenquiryModal(false);
setquantity();
}}
>
<Modal.Header>Send Enquiry</Modal.Header>
<Modal.Body>
<div>Experience Name:</div>
<div className="" style={{ fontSize: "22px", fontWeight: "bold" }}>
{activityById.data.attributes.name}
</div>
<div className="mt-2">Full Name:</div>
<div className="" style={{ fontWeight: "bold" }}>
{endUser?.attributes.name}
</div>
<div className="mt-2">Email ID:</div>
<div className="" style={{ fontSize: "22px", fontWeight: "bold" }}>
{endUser?.attributes.email}
</div>
<div className="mt-2">Quantity:</div>
<Input
type="number"
onChange={e => {
// console.log("e", e);
setquantity(e.target.value);
}}
></Input>
<Button
disabled={loading || !quantity}
className="mt-2"
onClick={async () => {
setloading(true);
console.log("hello");
let res = await sendEnquiry({ activityId: activityById.data.id, userId: endUser.id, vendorId: activityById.data.attributes.vendor.data.id, quantity });
console.log("res", res);
toast.success("Enquiry sent successfully, our team will get back to you shortly! Thank you!");
setloading(false);
setenquiryModal(false);
setquantity();
}}
> >
{loading ? <Loader /> : "Submit"} <Modal.Header closeButton>Share on social media</Modal.Header>
</Button> <Modal.Body>
</Modal.Body> <ShareWidget />
</Modal> </Modal.Body>
)} </Modal>
<Modal {activityById && (
show={loginModal} <Modal
centered show={enquiryModal}
onHide={() => { onHide={() => {
setloginModal(false); setenquiryModal(false);
}} setquantity();
> }}
<Modal.Header closeButton>Please Log in</Modal.Header> >
<Modal.Body> <Modal.Header>Send Enquiry</Modal.Header>
<div className="text-center d-flex justify-content-center row"> <Modal.Body>
<div className="col-12 m-2">Please login to avail this feature.</div> <div>Experience Name:</div>
<Button <div className="" style={{ fontSize: "22px", fontWeight: "bold" }}>
className="col-6 m-2" {activityById.data.attributes.name}
onClick={() => { </div>
router.push("/login/user"); <div className="mt-2">Full Name:</div>
}} <div className="" style={{ fontWeight: "bold" }}>
{endUser?.attributes.name}
</div>
<div className="mt-2">Email ID:</div>
<div className="" style={{ fontSize: "22px", fontWeight: "bold" }}>
{endUser?.attributes.email}
</div>
<div className="mt-2">Quantity:</div>
<Input
type="number"
onChange={e => {
// console.log("e", e);
setquantity(e.target.value);
}}
></Input>
<Button
disabled={loading || !quantity}
className="mt-2"
onClick={async () => {
setloading(true);
console.log("hello");
let res = await sendEnquiry({ activityId: activityById.data.id, userId: endUser.id, vendorId: activityById.data.attributes.vendor.data.id, quantity });
console.log("res", res);
toast.success("Enquiry sent successfully, our team will get back to you shortly! Thank you!");
setloading(false);
setenquiryModal(false);
setquantity();
}}
>
{loading ? <Loader /> : "Submit"}
</Button>
</Modal.Body>
</Modal>
)}
<Modal
show={loginModal}
centered
onHide={() => {
setloginModal(false);
}}
> >
Login <Modal.Header closeButton>Please Log in</Modal.Header>
</Button> <Modal.Body>
<Link className="m-2" href={"/signup/user"}> <div className="text-center d-flex justify-content-center row">
Or click here to sign up. <div className="col-12 m-2">Please login to avail this feature.</div>
</Link> <Button
</div> className="col-6 m-2"
</Modal.Body> onClick={() => {
</Modal> router.push("/login/user");
</Fragment> }}
); >
Login
</Button>
<Link className="m-2" href={"/signup/user"}>
Or click here to sign up.
</Link>
</div>
</Modal.Body>
</Modal>
</Fragment>
);
}; };
export default DetailInfo; export default DetailInfo;
components/home/Testimonial.js
...@@ -54,8 +54,9 @@ const Testimonial = ({ testimonial }) => { ...@@ -54,8 +54,9 @@ const Testimonial = ({ testimonial }) => {
rating={rating} rating={rating}
starRatedColor="#ffe200" // Set the rated color to yellow starRatedColor="#ffe200" // Set the rated color to yellow
starHoverColor="#ffe200" // Set the hover color to yellow starHoverColor="#ffe200" // Set the hover color to yellow
changeRating={handleRatingChange} // changeRating={handleRatingChange}
numberOfStars={5} numberOfStars={5}
isSelectable={false}
name="rating" name="rating"
starDimension="16px" // Set star width and height starDimension="16px" // Set star width and height
/> />
......
components/listing/LetDiscover.js
...@@ -120,7 +120,7 @@ const LetDiscover = ({ categories }) => { ...@@ -120,7 +120,7 @@ const LetDiscover = ({ categories }) => {
}} }}
> >
<span className="image-container"> <span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src={"/images/discover/01.png"} /> <Image layout="fill" alt="" className="image img-fluid" src={"/images/discover/01.webp"} />
</span> </span>
<div className="title">{"All"}</div> <div className="title">{"All"}</div>
</a> </a>
......
components/listing/ListingItems.js
...@@ -82,10 +82,13 @@ const ListingItems = ({ allActivitiesData, loading, gridClass, totalCount }) => ...@@ -82,10 +82,13 @@ const ListingItems = ({ allActivitiesData, loading, gridClass, totalCount }) =>
</div> </div>
</div> </div>
<div className="discription"> <div className="discription">
{data.discription} <a href="">Read More</a> {data.discription}
{/* <a href="">Read More</a> */}
</div> </div>
<div className="price"> <div className="price">
${data?.attributes?.pricePerPerson} <span className="off">{data?.attributes?.off}% OFF</span> ${data?.attributes?.pricePerPerson} <span className="off">{data?.attributes?.off}
{/* % OFF */}
</span>
</div> </div>
<div className="detail"> <div className="detail">
<div className="">For 1 Night</div> <div className="">For 1 Night</div>
......
components/login/Login.js
...@@ -123,7 +123,7 @@ const Login = props => { ...@@ -123,7 +123,7 @@ const Login = props => {
</Link> </Link>
</p> </p>
</div> </div>
{props && props.type == "user" && ( {/* {props && props.type == "user" && (
<> <>
<div className="input-group mb-0"> <div className="input-group mb-0">
<div className="btn-continue"> <div className="btn-continue">
...@@ -150,7 +150,7 @@ const Login = props => { ...@@ -150,7 +150,7 @@ const Login = props => {
</div> </div>
</div> </div>
</> </>
)} )} */}
</div> </div>
</div> </div>
</div> </div>
......
components/signup/Signup.js
...@@ -190,8 +190,8 @@ const Signup = props => { ...@@ -190,8 +190,8 @@ const Signup = props => {
</div> </div>
<div className="input-group"> <div className="input-group">
<label>Mobile No.</label> <label>Mobile No.</label>
<div className="contact-number"> <div className="contact-numbe w-100">
<select {/* <select
id="countryCode" id="countryCode"
name="countryCode" name="countryCode"
onChange={handleChange} onChange={handleChange}
...@@ -203,7 +203,7 @@ const Signup = props => { ...@@ -203,7 +203,7 @@ const Signup = props => {
> >
<option value="+91">+91</option> <option value="+91">+91</option>
<option value="+44">+44</option> <option value="+44">+44</option>
</select> </select> */}
<input <input
type="text" type="text"
name="mobile" name="mobile"
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!