Skip to content

Jay Mehta / zango-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit a6321e4d by jaymehta
Options

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

2 parents 6892cb29 27c80214
Inline Side-by-side
Showing 16 changed files with 372 additions and 244 deletions
components/admin/GiftcardListing.js
import { Fragment, useEffect, useState } from "react"; import { Fragment, useEffect, useState } from "react";
import { Button, Image } from "react-bootstrap"; import { Button, Image } from "react-bootstrap";
import { getGiftCard } from "../../redux/actions/giftCardAction"; import { Dropdown, Menu, Space, Table, Tag } from "antd";
import { useDispatch, useSelector } from "react-redux";
import { Empty, Table } from "antd";
import axios from "axios"; import axios from "axios";
import { DownCircleOutlined, MoreOutlined } from "@ant-design/icons";
import { getSession } from "next-auth/react";
import { toast } from "react-toastify";
const GiftcardListing = () => { const GiftcardListing = () => {
const [giftData, setGiftData] = useState([]); const [session, setSession] = useState()
useEffect(() => { const [update, setupdate] = useState(false)
axios.get(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/gift-cards`).then((res) => { useEffect(() => {
let giftDatas = const fetchSession = async () => {
res.data && setSession(await getSession());
res.data.data.map((data) => { };
return { fetchSession();
key: data.id, // dispatch(getLoggedInVendor());
amount: data?.attributes?.amount, }, []);
senderEmail: data?.attributes?.senderEmail, const [giftData, setGiftData] = useState([]);
receiverEmail: data?.attributes?.receiverEmail, useEffect(() => {
status: data?.attributes?.status, axios.get(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/gift-cards`).then((res) => {
} let giftDatas =
}) res.data &&
setGiftData(giftDatas) res.data.data.map((data) => {
}).catch((err) => { return {
console.log(err) key: data.id,
amount: data?.attributes?.amount,
senderEmail: data?.attributes?.senderEmail,
receiverEmail: data?.attributes?.receiverEmail,
status: data?.attributes?.status,
}
}) })
}, []) setGiftData(giftDatas)
const columns = [ }).catch((err) => {
{ console.log(err)
title: "Sender Email Address", })
dataIndex: "senderEmail", }, [update])
key: "senderEmail", const changeStatusFn = async ({ id, data }) => {
render: text => <a>{text}</a> const config = {
}, headers: {
{ "Content-Type": "application/json",
title: "Receiver Email Address", Authorization: `Bearer ${session.jwt}`
dataIndex: "receiverEmail", }
key: "receiverEmail", }
render: text => <a>{text}</a> const giftdata = {
}, data
{ }
title: "Amount",
dataIndex: "amount", const response = await axios.put(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/gift-cards/${id}`, giftdata, config)
key: "amount", if (response.status == 200) {
render: text => <a>{text}</a> toast.success("Status changed")
}, setupdate(!update)
{ }
title: "Status", console.log("response gift card", response);
dataIndex: "status", }
key: "status", const columns = [
render: text => <a>{text}</a> {
}, title: "Sender Email Address",
] dataIndex: "senderEmail",
return ( key: "senderEmail",
<Fragment> render: text => <a>{text}</a>
<div className="p-5 h-100"> },
<div className="d-flex align-items-center justify-content-between px-2 mb-2"> {
<div> title: "Receiver Email Address",
<h2 style={{ fontSize: 28 }}>Gift Card Requests</h2> dataIndex: "receiverEmail",
<p>View all the gift cards</p> key: "receiverEmail",
</div> render: text => <a>{text}</a>
<div> },
<Button type="button" variant="" className="btnAdd m-0"> {
<Image alt="" width="16" height="16" src="/images/vendor/icon-filter.svg" className="me-2" /> Filter title: "Amount",
</Button> dataIndex: "amount",
</div> key: "amount",
</div> render: text => <a>{text}</a>
<Table columns={columns} dataSource={giftData} /> },
</div> {
</Fragment> title: "Status",
); dataIndex: "status",
key: "status",
render: tag => (
<span>
{tag == "rejected" ? (
<Tag color={"red"} key={tag}>
{tag.toUpperCase()}
</Tag>
) : (
<Tag color={"blue"} key={tag}>
{tag === "fulfilled" ? "APPROVED" : tag.toUpperCase()}
</Tag>
)}
</span>
)
},
{
title: 'Actions',
width: 100,
dataIndex: 'key',
key: 'key',
render: (_, record) => (
<Space size="middle">
{/* <a>Invite {record.name}</a> */}
<Dropdown
menu={{
items: [
{
key: "1",
label: (
<a
rel="noopener noreferrer"
onClick={async () => {
console.log("record", record);
await changeStatusFn({ id: record.key, data: { status: "fulfilled" } })
// setrejectionId(record.key);
// adminActions({ type: "reject", activityId: record.key });
}}
>
Approve
</a>
)
},
{
key: "2",
label: (
<a
target="_blank"
rel="noopener noreferrer"
onClick={async () => {
console.log("record", record);
await changeStatusFn({ id: record.key, data: { status: "rejected" } })
// setrejectionId(record.key);
// adminActions({ type: "reject", activityId: record.key });
}}
>
Reject
</a>
)
}
]
}}
placement="bottomLeft"
trigger={['click']}
>
<button className="btn border-0">
<DownCircleOutlined style={{ fontSize: "20px", color: "#08c" }} onClick={() => { }} />
</button>
</Dropdown>
</Space>
)
}
]
return (
<Fragment>
<div className="p-5 h-100">
<div className="d-flex align-items-center justify-content-between px-2 mb-2">
<div>
<h2 style={{ fontSize: 28 }}>Gift Card Requests</h2>
<p>View all the gift cards</p>
</div>
<div>
<Button type="button" variant="" className="btnAdd m-0">
<Image alt="" width="16" height="16" src="/images/vendor/icon-filter.svg" className="me-2" /> Filter
</Button>
</div>
</div>
<Table columns={columns} dataSource={giftData} />
</div>
</Fragment>
);
}; };
export default GiftcardListing; export default GiftcardListing;
components/blog/BlogItem.js
...@@ -10,47 +10,47 @@ export const BlogData = [ ...@@ -10,47 +10,47 @@ export const BlogData = [
title: "13 MOST Unique Places to Stay in Washington State", title: "13 MOST Unique Places to Stay in Washington State",
discription: "Undoubtedly, the most unique places to stay........", discription: "Undoubtedly, the most unique places to stay........",
read: "10-15 Read", read: "10-15 Read",
flag:"Adventure" flag: "Adventure"
}, },
{ {
image: "/images/blogs/02.png", image: "/images/blogs/02.png",
title: "13 MOST Unique Places to Stay in Washington State", title: "13 MOST Unique Places to Stay in Washington State",
discription: "Undoubtedly, the most unique places to stay........", discription: "Undoubtedly, the most unique places to stay........",
read: "10-15 Read", read: "10-15 Read",
flag:"Adventure" flag: "Adventure"
}, },
{ {
image: "/images/blogs/03.png", image: "/images/blogs/03.png",
title: "13 MOST Unique Places to Stay in Washington State", title: "13 MOST Unique Places to Stay in Washington State",
discription: "Undoubtedly, the most unique places to stay........", discription: "Undoubtedly, the most unique places to stay........",
read: "10-15 Read", read: "10-15 Read",
flag:"Art & History" flag: "Art & History"
}, },
{ {
image: "/images/blogs/01.png", image: "/images/blogs/01.png",
title: "13 MOST Unique Places to Stay in Washington State", title: "13 MOST Unique Places to Stay in Washington State",
discription: "Undoubtedly, the most unique places to stay........", discription: "Undoubtedly, the most unique places to stay........",
read: "10-15 Read", read: "10-15 Read",
flag:"Adventure" flag: "Adventure"
}, },
{ {
image: "/images/blogs/02.png", image: "/images/blogs/02.png",
title: "13 MOST Unique Places to Stay in Washington State", title: "13 MOST Unique Places to Stay in Washington State",
discription: "Undoubtedly, the most unique places to stay........", discription: "Undoubtedly, the most unique places to stay........",
read: "10-15 Read", read: "10-15 Read",
flag:"Adventure" flag: "Adventure"
}, },
{ {
image: "/images/blogs/03.png", image: "/images/blogs/03.png",
title: "13 MOST Unique Places to Stay in Washington State", title: "13 MOST Unique Places to Stay in Washington State",
discription: "Undoubtedly, the most unique places to stay........", discription: "Undoubtedly, the most unique places to stay........",
read: "10-15 Read", read: "10-15 Read",
flag:"Art & History" flag: "Art & History"
} }
]; ];
const BlogsItem = ({blogs}) => { const BlogsItem = ({ blogs }) => {
const [showContent, setShowContent] = useState(false); const [showContent, setShowContent] = useState(false);
const [isGridViewOpen, setIsGridViewOpen] = useState(false); const [isGridViewOpen, setIsGridViewOpen] = useState(false);
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
const toggleContent = () => { const toggleContent = () => {
...@@ -99,9 +99,9 @@ const BlogsItem = ({blogs}) => { ...@@ -99,9 +99,9 @@ const BlogsItem = ({blogs}) => {
</div> </div>
</div> </div>
<div className="listing-filter"> <div className="listing-filter">
<div className="box-01"> <div className="box-01">
<div className="inner"> <div className="inner">
<Accordion className="accordion-filter" defaultActiveKey="0" flush> <Accordion className="accordion-filter" defaultActiveKey="0" flush>
<Accordion.Item eventKey="0"> <Accordion.Item eventKey="0">
...@@ -290,7 +290,7 @@ const BlogsItem = ({blogs}) => { ...@@ -290,7 +290,7 @@ const BlogsItem = ({blogs}) => {
<div></div> <div></div>
</div> </div>
<div className="text-center"> <div className="text-center">
<Button variant="primary">Submit</Button> <Button variant="primary">Submit</Button>
</div> </div>
</div> </div>
</div> </div>
......
components/detail/Detail.js
...@@ -33,7 +33,7 @@ const Detail = () => { ...@@ -33,7 +33,7 @@ const Detail = () => {
<main> <main>
<section className="main-mt"> <section className="main-mt">
<div className="container mt-3"> <div className="container mt-3">
<div className="py-5"> <div className="py-4 py-lg-5 breadcrumb-wrap">
<ConfigProvider <ConfigProvider
theme={{ theme={{
components: { components: {
......
components/detail/DetailInfo.js
...@@ -143,15 +143,13 @@ const DetailInfo = ({ activityById }) => { ...@@ -143,15 +143,13 @@ const DetailInfo = ({ activityById }) => {
router.push("/gift-card"); router.push("/gift-card");
} }
}} }}
variant="secondary" variant="secondary me-3"
> >
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>
<Button <Button
disabled={loading} disabled={loading}
// onClick={() => { // onClick={() => {
...@@ -161,11 +159,12 @@ const DetailInfo = ({ activityById }) => { ...@@ -161,11 +159,12 @@ const DetailInfo = ({ activityById }) => {
// setenquiryModal(true); // setenquiryModal(true);
// } // }
// }} // }}
variant="primary me-3" variant="primary"
> >
Book Now Book Now
</Button> </Button>
</div> </div>
</div> </div>
</div> </div>
)} )}
......
components/detail/DetailSchedule.js
...@@ -36,7 +36,7 @@ const DetailSchedule = ({ activityById }) => { ...@@ -36,7 +36,7 @@ const DetailSchedule = ({ activityById }) => {
return array; return array;
}; };
return ( return (
<div className="row mb-5"> <div className="row mb-3 mb-lg-4">
{activityById && ( {activityById && (
<div className="col-12"> <div className="col-12">
<ul className="availability-wrappper"> <ul className="availability-wrappper">
......
components/detail/SimilarExperiences.js
...@@ -108,20 +108,20 @@ const SimilarExperiences = ({ allActivitiesData }) => { ...@@ -108,20 +108,20 @@ const SimilarExperiences = ({ allActivitiesData }) => {
<div className="browse-experiences-item"> <div className="browse-experiences-item">
<div className="img-wrapper"> <div className="img-wrapper">
<span className="image-container"> <span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src={data.image} /> <Image layout="fill" alt="" className="image img-fluid" src={data.image} priority />
</span> </span>
<div className="top-rated">{data.topRated}</div> {/* <div className="top-rated">{data.topRated}</div> */}
</div> </div>
<div className="info"> <div className="info">
<div className="top-name"> <div className="top-name">
<div className="title">{data.title}</div> <div className="title">{data.title}</div>
<div className="rating-wishlist"> <div className="rating-wishlist">
<div className="rating"> {/* <div className="rating">
<span className="number">8.8</span> <span className="number">8.8</span>
<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>
</div> </div> */}
{endUser && <WishlistComponent userId={endUser.id} activityId={data.id} />} {endUser && <WishlistComponent userId={endUser.id} activityId={data.id} />}
{/* <div className="wishlist"> {/* <div className="wishlist">
<span className="image-container"> <span className="image-container">
...@@ -132,16 +132,17 @@ const SimilarExperiences = ({ allActivitiesData }) => { ...@@ -132,16 +132,17 @@ const SimilarExperiences = ({ allActivitiesData }) => {
</div> </div>
<div className="discription"> <div className="discription">
{data.discription}{" "} {data.discription}{" "}
<a {/* <a
onClick={() => { onClick={() => {
router.push(`/activities/${data.id}`); router.push(`/activities/${data.id}`);
}} }}
> >
Read More Read More
</a> </a> */}
</div> </div>
<div className="price"> <div className="price">
${data.price} <span className="off">{data.offPrice} OFF</span> ${data.price}
{/* <span className="off">{data.offPrice} OFF</span> */}
</div> </div>
<div className="detail"> <div className="detail">
<div className="">{data.days}</div> <div className="">{data.days}</div>
......
components/detail/WIshlistComponent.js
...@@ -13,7 +13,7 @@ const WishlistComponent = ({ activityId, userId }) => { ...@@ -13,7 +13,7 @@ const WishlistComponent = ({ activityId, userId }) => {
wishlists && wishlists &&
wishlists.length > 0 && wishlists.length > 0 &&
wishlists.map(item => { wishlists.map(item => {
if (item.attributes.experience.data.id == activityId) { if (item?.attributes?.experience?.data?.id == activityId) {
setisActive(true); setisActive(true);
setwishlistId(item.id); setwishlistId(item.id);
} }
......
components/home/BrowseExperiences.js
...@@ -17,153 +17,155 @@ import WishlistComponent from "../detail/WIshlistComponent.js"; ...@@ -17,153 +17,155 @@ import WishlistComponent from "../detail/WIshlistComponent.js";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
import Link from "next/link.js"; import Link from "next/link.js";
const BrowseExperiences = ({ allActivitiesData }) => { const BrowseExperiences = ({ allActivitiesData }) => {
const { endUser } = useSelector(state => state.endUser); const { endUser } = useSelector(state => state.endUser);
const router = useRouter(); const router = useRouter();
return ( return (
<> <>
<section className="browse-experiences-session"> <section className="browse-experiences-session">
<div className="container"> <div className="container">
<div className="row"> <div className="row">
<div className="col-12"> <div className="col-12">
<div className="head-btn"> <div className="head-btn">
<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="head01"> <div className="head01">
<div className="title">Browse Experiences</div> <div className="title">Browse Experiences</div>
<h2>In New York</h2> <h2>In New York</h2>
</div> </div>
</motion.div> </motion.div>
<div className="view-all-btn"> <div className="view-all-btn">
<Link href={"/listing"} prefetch={true}> <Link href={"/listing"} prefetch={true}>
<Button <Button
variant="primary" variant="primary"
// onClick={() => { // onClick={() => {
// router.push("/listing"); // router.push("/listing");
// }} // }}
> >
View All View All
</Button> </Button>
</Link> </Link>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div className="row"> <div className="row">
<div className="col-12"> <div className="col-12">
<div className="browse-experiences-carousal position-relative"> <div className="browse-experiences-carousal position-relative">
<Swiper <Swiper
slidesPerView={1} slidesPerView={1}
// autoplay={{ // autoplay={{
// delay: 2500, // delay: 2500,
// disableOnInteraction: false // disableOnInteraction: false
// }} // }}
autoHeight={true} autoHeight={true}
navigation={{ nextEl: ".BrowseExperiences-left", prevEl: ".BrowseExperiences-right" }} navigation={{ nextEl: ".BrowseExperiences-left", prevEl: ".BrowseExperiences-right" }}
breakpoints={{ breakpoints={{
640: { 640: {
slidesPerView: 1, slidesPerView: 1,
spaceBetween: 0 spaceBetween: 0
}, },
768: { 768: {
slidesPerView: 2, slidesPerView: 2,
spaceBetween: 0 spaceBetween: 0
}, },
1024: { 1024: {
slidesPerView: 4, slidesPerView: 4,
spaceBetween: 0 spaceBetween: 0
} }
}} }}
modules={[Navigation, Autoplay]} modules={[Navigation, Autoplay]}
className="mySwiper01 mySwiper02" className="mySwiper01 mySwiper02"
> >
{allActivitiesData && {allActivitiesData &&
allActivitiesData.data.map(data => { allActivitiesData.data.map(data => {
return ( return (
<SwiperSlide key={data?.id}> <SwiperSlide key={data?.id}>
<motion.div variants={zoomIn("left", 0.3)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}> <motion.div variants={zoomIn("left", 0.3)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
<div className="browse-experiences-item"> <div className="browse-experiences-item">
<a href="/detail" className="img-wrapper"> <a href="/detail" className="img-wrapper">
<span className="image-container"> <span className="image-container">
<img layout="fill" alt="" className="image img-fluid" src={cleanImage(data.attributes?.image?.data?.attributes)} /> <img layout="fill" alt="" className="image img-fluid" src={cleanImage(data.attributes?.image?.data?.attributes)} />
</span> </span>
<div className="top-rated">Top Rated</div> {/* <div className="top-rated">Top Rated</div> */}
</a> </a>
<div className="info"> <div className="info">
<div className="top-name"> <div className="top-name">
<div className="title">{data?.attributes?.name}</div> <div className="title">{data?.attributes?.name}</div>
<div className="rating-wishlist"> <div className="rating-wishlist">
<div className="rating"> {/* <div className="rating">
<span className="number">{data?.attributes?.rating}</span> <span className="number">{data?.attributes?.rating}</span>
<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>
</div> </div> */}
<div className="wishlist"> <div className="wishlist">
{endUser && <WishlistComponent activityId={data.id} userId={endUser.id} />} {endUser && <WishlistComponent activityId={data.id} userId={endUser.id} />}
{/* <span className="image-container"> {/* <span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/wishlist.svg" /> <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/wishlist.svg" />
</span> */} </span> */}
</div>
</div>
</div>
<div className="discription">
<span>{data?.attributes?.description}</span>
{/* <a href="/detail">Read More</a> */}
</div>
<div className="price">
${data?.attributes?.pricePerPerson}
{/* <span className="off">{data?.attributes?.off}% OFF</span> */}
</div>
<div className="detail">
{/* <div className="">For 1 Night</div> */}
<div className="">Includes taxes & Fees</div>
</div>
<div className="explore-now">
<Link href={`/activities/${data.id}`}>
<Button
// onClick={() => {
// router.push(`/activities/${data.id}`);
// }}
variant="primary"
>
Explore Now
</Button>
</Link>
</div>
</div>
</div>
</motion.div>
</SwiperSlide>
);
})}
</Swiper>
<div className="swiper-nav">
<div className="navbutton d-flex justify-content-between ">
<button className="BrowseExperiences-right arrow" id="BrowseExperiences-right" aria-label="BrowseExperiences-right">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-left.svg" />
</span>
</button>
<button className="BrowseExperiences-left arrow" id="BrowseExperiences-left" aria-label="BrowseExperiences-left">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-right.svg" />
</span>
</button>
</div> </div>
</div>
</div> </div>
<div className="discription">
<span>{data?.attributes?.description}</span> <a href="/detail">Read More</a>
</div>
<div className="price">
${data?.attributes?.pricePerPerson} <span className="off">{data?.attributes?.off}% OFF</span>
</div>
<div className="detail">
<div className="">For 1 Night</div>
<div className="">Includes taxes & Fees</div>
</div>
<div className="explore-now">
<Link href={`/activities/${data.id}`}>
<Button
// onClick={() => {
// router.push(`/activities/${data.id}`);
// }}
variant="primary"
>
Explore Now
</Button>
</Link>
</div>
</div>
</div> </div>
</motion.div> </div>
</SwiperSlide> </div>
); {/* <div className="row">
})}
</Swiper>
<div className="swiper-nav">
<div className="navbutton d-flex justify-content-between ">
<button className="BrowseExperiences-right arrow" id="BrowseExperiences-right" aria-label="BrowseExperiences-right">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-left.svg" />
</span>
</button>
<button className="BrowseExperiences-left arrow" id="BrowseExperiences-left" aria-label="BrowseExperiences-left">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-right.svg" />
</span>
</button>
</div>
</div>
</div>
</div>
</div>
{/* <div className="row">
<div className="col-12"> <div className="col-12">
<div className="btn-center"> <div className="btn-center">
<Button variant="outline-secondary">Sign In for Member Price</Button> <Button variant="outline-secondary">Sign In for Member Price</Button>
</div> </div>
</div> </div>
</div> */} </div> */}
</div> </div>
</section> </section>
</> </>
); );
}; };
export default BrowseExperiences; export default BrowseExperiences;
components/home/ProductItem.js
...@@ -72,12 +72,12 @@ const ProductItem = () => { ...@@ -72,12 +72,12 @@ const ProductItem = () => {
<div className="top-name"> <div className="top-name">
<div className="title">{data.title}</div> <div className="title">{data.title}</div>
<div className="rating-wishlist"> <div className="rating-wishlist">
<div className="rating"> {/* <div className="rating">
<span className="number">8.8</span> <span className="number">8.8</span>
<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>
</div> </div> */}
<div className="wishlist"> <div className="wishlist">
<span className="image-container"> <span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/wishlist.svg" /> <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/wishlist.svg" />
...@@ -85,11 +85,12 @@ const ProductItem = () => { ...@@ -85,11 +85,12 @@ const ProductItem = () => {
</div> </div>
</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.price} <span className="off">{data.offPrice} OFF</span> ${data.price}
{/* <span className="off">{data.offPrice} OFF</span> */}
</div> </div>
<div className="detail"> <div className="detail">
<div className="">{data.days}</div> <div className="">{data.days}</div>
......
components/layout/Generics/GenericHeader.js
...@@ -3,6 +3,7 @@ import Image from "next/image" ...@@ -3,6 +3,7 @@ import Image from "next/image"
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { signOut } from "next-auth/react"; import { signOut } from "next-auth/react";
import { UserOutlined } from '@ant-design/icons'; import { UserOutlined } from '@ant-design/icons';
import { ToastContainer } from "react-toastify";
export const GenericHeader = ({ venderBusiness, venderEmail, businessLogo, adminName, adminEmail, isRoute }) => { export const GenericHeader = ({ venderBusiness, venderEmail, businessLogo, adminName, adminEmail, isRoute }) => {
const router = useRouter(); const router = useRouter();
const VenderDetails = () => { const VenderDetails = () => {
...@@ -14,7 +15,7 @@ export const GenericHeader = ({ venderBusiness, venderEmail, businessLogo, admin ...@@ -14,7 +15,7 @@ export const GenericHeader = ({ venderBusiness, venderEmail, businessLogo, admin
</div> </div>
: :
<div className="d-flex align-items-center gap-3"> <div className="d-flex align-items-center gap-3">
<Image src={businessLogo} height={50} width={70} objectFit="contain"/> <Image src={businessLogo} height={50} width={70} objectFit="contain" />
<div className="d-flex flex-column"> <div className="d-flex flex-column">
<p className="m-0">{venderBusiness}</p> <p className="m-0">{venderBusiness}</p>
<p className="m-0">{venderEmail}</p> <p className="m-0">{venderEmail}</p>
...@@ -51,6 +52,7 @@ export const GenericHeader = ({ venderBusiness, venderEmail, businessLogo, admin ...@@ -51,6 +52,7 @@ export const GenericHeader = ({ venderBusiness, venderEmail, businessLogo, admin
'-moz-box-shadow': '0px 4px 1px -3px rgba(0,0,0,0.56)' '-moz-box-shadow': '0px 4px 1px -3px rgba(0,0,0,0.56)'
}} }}
> >
<Image loading="lazy" objectFit="contain" height={50} width={100} alt="" className="" src="/images/main-logo.svg" /> <Image loading="lazy" objectFit="contain" height={50} width={100} alt="" className="" src="/images/main-logo.svg" />
<div className="d-flex align-items-center gap-5"> <div className="d-flex align-items-center gap-5">
{isRoute === 'vendor' && <VenderDetails />} {isRoute === 'vendor' && <VenderDetails />}
......
components/layout/Generics/GenericLayout.js
...@@ -6,7 +6,7 @@ import { GenericHeader } from "./GenericHeader"; ...@@ -6,7 +6,7 @@ import { GenericHeader } from "./GenericHeader";
import { GenericSidebar } from "./GenericSidebar"; import { GenericSidebar } from "./GenericSidebar";
import { getActivitiesForAdmin } from "../../../redux/actions/activityAction"; import { getActivitiesForAdmin } from "../../../redux/actions/activityAction";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { ToastContainer } from "react-bootstrap"; import { ToastContainer } from "react-toastify";
export const GenericLayout = ({ children }) => { export const GenericLayout = ({ children }) => {
const dispatch = useDispatch(); const dispatch = useDispatch();
......
components/layout/Header.js
...@@ -56,7 +56,7 @@ const Header = () => { ...@@ -56,7 +56,7 @@ const Header = () => {
</Navbar.Brand> </Navbar.Brand>
<Navbar.Toggle aria-controls="navbarScroll" /> <Navbar.Toggle aria-controls="navbarScroll" />
<Navbar.Collapse id="navbarScroll"> <Navbar.Collapse id="navbarScroll">
<Nav className=" my-2 my-lg-0" style={{ maxHeight: "100px" }} navbarScroll> <Nav className=" my-2 my-lg-0" navbarScroll>
<ActiveLink href="/user/wishlist" activeClassName="active"> <ActiveLink href="/user/wishlist" activeClassName="active">
<a className="nav-link ">Wishlist</a> <a className="nav-link ">Wishlist</a>
</ActiveLink> </ActiveLink>
......
components/listing/ListingItems.js
...@@ -67,7 +67,7 @@ console.log("queryParams", queryParams); ...@@ -67,7 +67,7 @@ console.log("queryParams", queryParams);
<span className="image-container"> <span className="image-container">
<img layout="fill" alt="" className="image img-fluid" src={cleanImage(data.attributes?.image?.data?.attributes)} /> <img layout="fill" alt="" className="image img-fluid" src={cleanImage(data.attributes?.image?.data?.attributes)} />
</span> </span>
<div className="top-rated">Top Rated</div> {/* <div className="top-rated">Top Rated</div> */}
</div> </div>
<div className="info"> <div className="info">
<div className="top-name"> <div className="top-name">
...@@ -92,7 +92,7 @@ console.log("queryParams", queryParams); ...@@ -92,7 +92,7 @@ console.log("queryParams", queryParams);
</span> </span>
</div> </div>
<div className="detail"> <div className="detail">
<div className="">For 1 Night</div> {/* <div className="">For 1 Night</div> */}
<div className="">Includes taxes & Fees</div> <div className="">Includes taxes & Fees</div>
</div> </div>
<div className="explore-now"> <div className="explore-now">
......
components/user/MyWhishList.js
...@@ -31,18 +31,18 @@ const MyWhishList = ({ data }) => { ...@@ -31,18 +31,18 @@ const MyWhishList = ({ data }) => {
<span className="image-container"> <span className="image-container">
<Image src={cleanImage(data?.attributes?.experience?.data?.attributes?.image?.data?.attributes)} layout="fill" className="image img-fluid" /> <Image src={cleanImage(data?.attributes?.experience?.data?.attributes?.image?.data?.attributes)} layout="fill" className="image img-fluid" />
</span> </span>
<div className="top-rated">Top Rated</div> {/* <div className="top-rated">Top Rated</div> */}
</div> </div>
<div className="info"> <div className="info">
<div className="top-name"> <div className="top-name">
<div className="title">{data?.attributes?.experience?.data?.attributes?.name}</div> <div className="title">{data?.attributes?.experience?.data?.attributes?.name}</div>
<div className="rating-wishlist"> <div className="rating-wishlist">
<div className="rating"> {/* <div className="rating">
<span className="number">{data?.attributes?.experience?.data?.attributes?.rating}</span> <span className="number">{data?.attributes?.experience?.data?.attributes?.rating}</span>
<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>
</div> </div> */}
<WishlistComponent activityId={data?.attributes?.experience?.data?.id} userId={data?.attributes?.endUser?.data?.id} /> <WishlistComponent activityId={data?.attributes?.experience?.data?.id} userId={data?.attributes?.endUser?.data?.id} />
</div> </div>
</div> </div>
...@@ -50,10 +50,11 @@ const MyWhishList = ({ data }) => { ...@@ -50,10 +50,11 @@ const MyWhishList = ({ data }) => {
<p className="text-trunc-2">{data?.attributes?.experience?.data?.attributes?.description}</p> <p className="text-trunc-2">{data?.attributes?.experience?.data?.attributes?.description}</p>
</div> </div>
<div className="price"> <div className="price">
${data?.attributes?.experience?.data?.attributes?.pricePerPerson} <span className="off">{}% OFF</span> ${data?.attributes?.experience?.data?.attributes?.pricePerPerson}
{/* <span className="off">{}% OFF</span> */}
</div> </div>
<div className="detail"> <div className="detail">
<div className="">For 1 Night</div> {/* <div className="">For 1 Night</div> */}
<div className="">Includes taxes & Fees</div> <div className="">Includes taxes & Fees</div>
</div> </div>
<div className="explore-now"> <div className="explore-now">
......
public/favicon.ico
No preview for this file type
styles/globals.css
...@@ -31,7 +31,7 @@ acronym, ...@@ -31,7 +31,7 @@ acronym,
address, address,
big, big,
cite, cite,
code, 55 code,
del, del,
dfn, dfn,
em, em,
...@@ -1959,7 +1959,7 @@ span.form-error, ...@@ -1959,7 +1959,7 @@ span.form-error,
} }
.similar-experiences-session { .similar-experiences-session {
padding: 2rem 0; padding: 1rem 0;
} }
.browse-experiences-item { .browse-experiences-item {
...@@ -2082,7 +2082,7 @@ span.form-error, ...@@ -2082,7 +2082,7 @@ span.form-error,
margin-bottom: 10px; margin-bottom: 10px;
} }
.browse-experiences-item .info .discription > span { .browse-experiences-item .info .discription {
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
...@@ -2750,13 +2750,14 @@ button:focus:not(:focus-visible) { ...@@ -2750,13 +2750,14 @@ button:focus:not(:focus-visible) {
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
margin-top: 2rem; margin-top: 2rem;
padding-left: 0;
} }
.availability-wrappper li { .availability-wrappper li {
width: 32%; width: 31%;
display: flex; display: flex;
align-items: center; align-items: center;
margin: 0.5rem; margin: 0.5rem 1rem 0.5rem 0.5rem;
} }
.availability-wrappper li > span { .availability-wrappper li > span {
...@@ -2805,7 +2806,7 @@ button:focus:not(:focus-visible) { ...@@ -2805,7 +2806,7 @@ button:focus:not(:focus-visible) {
} }
.guest-reviews-detail .head .name { .guest-reviews-detail .head .name {
font-size: 24px; font-size: calc(20px + (24 - 20) * (100vw - 320px) / (1920 - 320));
line-height: 24px; line-height: 24px;
} }
...@@ -2941,7 +2942,7 @@ button:focus:not(:focus-visible) { ...@@ -2941,7 +2942,7 @@ button:focus:not(:focus-visible) {
} }
.faqs-session { .faqs-session {
padding: 5rem 0; padding: 4rem 0;
} }
.subscribe label .btn { .subscribe label .btn {
...@@ -3899,6 +3900,7 @@ img:hover { ...@@ -3899,6 +3900,7 @@ img:hover {
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
margin-bottom: 4rem; margin-bottom: 4rem;
margin-top: 1.5rem;
} }
.load-more .pagination .page-item { .load-more .pagination .page-item {
...@@ -3933,6 +3935,19 @@ img:hover { ...@@ -3933,6 +3935,19 @@ img:hover {
.listing-wrapper .product-info { .listing-wrapper .product-info {
padding-left: 2rem; padding-left: 2rem;
} }
.breadcrumb-wrap .ant-breadcrumb ol li.ant-breadcrumb-separator {
margin: 0 0.8rem;
}
.breadcrumb-wrap .ant-breadcrumb ol li .ant-breadcrumb-link {
font-size: calc(14px + (14 - 14) * (100vw - 320px) / (1920 - 320));
}
.most-read-blogs-session,
.blogs-session {
padding-bottom: 3rem;
}
footer .footer-link ul {
padding-left: 0;
}
@media (min-width: 992px) { @media (min-width: 992px) {
.navbar-expand-lg .navbar-nav .nav-link { .navbar-expand-lg .navbar-nav .nav-link {
margin: 0 2rem; margin: 0 2rem;
...@@ -4115,6 +4130,17 @@ img:hover { ...@@ -4115,6 +4130,17 @@ img:hover {
} }
@media (max-width: 767px) { @media (max-width: 767px) {
.product-info .btn-row .btn {
padding-left: 5vw;
padding-right: 5vw;
}
.load-more {
justify-content: center;
}
.btn-primary,
.vendor-signup a {
padding: 0.6rem 2rem;
}
.browse-experiences-item .img-wrapper .image-container .image { .browse-experiences-item .img-wrapper .image-container .image {
height: 220px !important; height: 220px !important;
} }
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!