MyEnquires.js
4.94 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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
import { Skeleton } from "antd";
import Image from "next/image";
import Link from "next/link";
import React, { Fragment } from "react";
import { Button } from "react-bootstrap";
import { useSelector } from "react-redux";
import { cleanImage, renderImage } from "../../services/imageHandling";
import ActiveLink from "../common/ActiveLink";
const MyEnquires = () => {
const { enquiriesByEndUser, loading } = useSelector(state => state.enquiriesByEndUser);
console.log("enquiriesByEndUser", enquiriesByEndUser);
const calculateRating = data => {
let value = 0;
data.map(item => {
// console.log("item", item);
value = value + item.attributes.rating;
});
// console.log("value", value);
let length = data.length;
return Math.floor(value / length);
};
return (
<Fragment>
<div className="container">
<div className="row">
<div className="col-12 col-lg-12 form-container content-wraaper">
<h2 className="px-2 px-lg-0">My Enquires</h2>
{!loading ? (
<div className="row">
{enquiriesByEndUser?.length &&
enquiriesByEndUser.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="card-booking">
<div className="browse-experiences-item">
<div className="img-wrapper">
<span className="image-container">
<img layout="fill" alt="" className="image img-fluid" src={cleanImage(data.attributes.experience?.data.attributes.image?.data?.attributes)} />
</span>
{data.attributes.experience?.data.attributes.rating > 100 && <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">
{data.attributes.experience?.data?.attributes?.reviews?.data.length > 0 && (
<div className="rating">
{<span className="number">{calculateRating(data.attributes.experience?.data?.attributes?.reviews.data)}</span>}
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" />
</span>
</div>
)}
</div>
</div>
<div className="">
<p>Enquired for date: {data.attributes.date}</p>
</div>
<div className="discription">
<span>
{data.attributes.experience?.data?.attributes?.description.slice(0, 52)}...{" "}
<Link href={`/activities/${data.attributes.experience?.data.id}`} prefetch>
Read More
</Link>
</span>
</div>
<div className="price">${data.attributes.experience?.data?.attributes?.pricePerPerson}</div>
<div className="detail">
<div className="">Includes taxes & Fees</div>
</div>
<div className="explore-now">
<ActiveLink href={`/activities/${data.attributes.experience?.data.id}`} prefetch>
<Button variant="primary">Explore Now</Button>
</ActiveLink>
</div>
</div>
</div>
</div>
</div>
))}
</div>
) : (
<div className="container">
<div className="py-5">
<div className="row">
{[1, 2, 3].map(() => (
<div className="col-lg-3 col-md-4 col-sm-12">
<div className="d-inline-flex flex-column">
<Skeleton.Button active style={{ height: 250, width: 290 }} />
<Skeleton.Button active style={{ marginTop: 10, width: 120 }} />
</div>
</div>
))}
</div>
</div>
</div>
)}
</div>
</div>
</div>
</Fragment>
);
};
export default MyEnquires;