MyWhishList.js
6.07 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
import Image from "next/image";
import React, { Fragment } from "react";
import { Button } from "react-bootstrap";
import { cleanImage } from "../../services/imageHandling";
import WishlistComponent from "../detail/WIshlistComponent";
import { useRouter } from "next/router";
import { useSelector } from "react-redux";
const MyWhishList = ({ data }) => {
const router = useRouter();
const { endUser } = useSelector(state => state.endUser)
console.log("checking end user", endUser);
return (
<Fragment>
<div className="container pb-5">
<div className="row">
<div className="col-12 col-lg-12 form-container content-wraaper">
<h2 className="px-2 px-lg-0">My Bookings</h2>
{endUser === null || endUser === undefined || endUser === "" ?
<h1>You need to login first!</h1>
:
<div className="listing-items">
<div className="row">
{data?.length > 0 ?
<>
{data.map((data, index) => (
<div className="col-12 col-sm-12 col-lg-3 col-md-6 px-4 px-lg-3" key={`1${index}`}>
<div className="item">
<div className="browse-experiences-item">
<div className="img-wrapper">
<span className="image-container">
<Image src={cleanImage(data?.attributes?.experience?.data?.attributes?.image?.data?.attributes)} layout="fill" className="image img-fluid" />
</span>
<div className="top-rated">Top Rated</div>
</div>
<div className="info">
<div className="top-name">
<div className="title">{data?.attributes?.experience?.data?.attributes?.name}</div>
<div className="rating-wishlist">
<div className="rating">
<span className="number">{data?.attributes?.experience?.data?.attributes?.rating}</span>
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" />
</span>
</div>
<WishlistComponent activityId={data?.attributes?.experience?.data?.id} userId={data?.attributes?.endUser?.data?.id} />
</div>
</div>
<div className="discription"><p className="text-trunc-2">{data?.attributes?.experience?.data?.attributes?.description}</p></div>
<div className="price">
${data?.attributes?.experience?.data?.attributes?.pricePerPerson} <span className="off">{ }% OFF</span>
</div>
<div className="detail">
<div className="">For 1 Night</div>
<div className="">Includes taxes & Fees</div>
</div>
<div className="explore-now">
<Button
variant="primary"
onClick={() => {
router.push(`/activities/${data?.attributes?.experience?.data?.id}`);
}}
>
Explore Now
</Button>
</div>
</div>
</div>
</div>
</div>
))}
</>
:
<>
<p>No Item Found</p>
</>
}
</div>
</div>
}
</div>
</div>
</div>
</Fragment>
)
}
export default MyWhishList;