Untitled
unknown
plain_text
a year ago
15 kB
9
Indexable
import { useState, useEffect, useRef } from "react";
import { HiShare } from "react-icons/hi";
import { AiOutlineClockCircle } from "react-icons/ai";
import { PiArrowFatDownFill } from "react-icons/pi";
import { IoLocationOutline } from "react-icons/io5";
import "../assets/css/actd.css";
import { BsCalendarCheck } from "react-icons/bs";
import { GrGroup } from "react-icons/gr";
import { LiaCarSideSolid } from "react-icons/lia";
import { FcCancel } from "react-icons/fc";
import { FaTelegram } from "react-icons/fa6";
import "../assets/css/hd.css";
import { BiSolidLeftArrow } from "react-icons/bi";
import { BiSolidRightArrow } from "react-icons/bi";
import { useParams } from "react-router-dom";
import Cookies from "js-cookie";
const Activity_details = () => {
const containerRef = useRef(null);
const { id } = useParams();
const [apidata, setapidata] = useState(false);
useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch(`http://127.0.0.1:3232/experience/${id}`);
const result = await response.json();
console.log(result);
/**
const mongoose = require("mongoose");
const availabilityModel = require("./availability.model");
const pricingModel = require("./pricing.model");
const meetingPickupMode = require("./meetingPickup.model");
const bookingCutoffMap = {
rightUpUntilStart: "I take booking right up until the start of the activity",
min15Before: "15 minutes before start time",
min30Before: "30 minutes before start time",
hour1Before: "1 hour before start time",
hour2Before: "2 hours before start time",
hour3Before: "3 hours before start time",
hour4Before: "4 hours before start time",
hour8Before: "8 hours before start time",
day1Before: "1 day before start time",
day2Before: "2 days before start time",
day3Before: "3 days before start time",
day4Before: "4 days before start time",
day5Before: "5 days before start time",
day6Before: "6 days before start time",
week1Before: "1 week before start time",
week2Before: "2 weeks before start time",
week4Before: "4 weeks before start time",
week8Before: "8 weeks before start time",
custom: "I want to define my own booking cutoff",
};
const expirenceSchema = mongoose.Schema({
title: {
type: String,
required: true,
},
duration: String,
location: {
location: String,
city: String,
state: String,
},
category_theme: {
category: String,
theme: String,
},
description: {
short_des: String,
detail_dec: String,
},
video_link: [String],
img_link: {
filename: String,
path: String,
mimetype: {
type: String,
default: "image/png",
},
},
inclusions: {
short_des: String,
detail_dec: String,
},
exclusions: {
short_des: String,
detail_dec: String,
},
availabilityType: {
type: String,
enum: ["date_time", "date", "pass"],
},
predefinedTimeAllowances: {
type: String,
enum: Object.keys(bookingCutoffMap),
default: "rightUpUntilStart",
},
availability_detail: [
{
type: mongoose.Schema.Types.ObjectId,
ref: "Availability",
},
],
start_time: [
{
type: mongoose.Schema.Types.ObjectId,
ref: "TimingAvailability",
},
],
allow_custom_availability: {
type: Boolean,
default: false,
},
customTimeAllowance: {
type: {
type: String,
enum: ["date", "date_time"],
},
value: {
type: String,
},
},
capacity: {
type: String,
enum: ["sale", "limited", "on_request"],
default: "sale",
},
pricing: [
{
type: mongoose.Schema.Types.ObjectId,
ref: "Pricing",
},
],
travelling_facility: {
pick_up_and_drop: {
price: {
type: Number,
},
},
pick_up_only: {
price: {
type: Number,
},
},
drop_only: {
price: {
type: Number,
},
},
},
traveller_facilty: {
type: String,
enum: ["meet_on_location", "pick_up_only", "meet_on_location_or_pickup"],
},
meeting_point: [
{
type: mongoose.Schema.Types.ObjectId,
ref: "MeetingPoint",
},
],
});
*/
// setapidata(result.data)
const data = {
packageName: result.title,
packageDuration: result.duration,
startLocation: result.location?.city,
activityLocation: result.location?.city,
price: result.pricing[0]?.occupancy,
themeImg: result.img_link[0],
mapLink: result?.loaction?.location,
_id: result._id,
};
setapidata(data);
} catch (error) {
console.error("Error fetching data:", error);
}
};
fetchData();
}, []);
if (apidata === false) {
}
const handleNext = () => {
if (containerRef.current) {
containerRef.current.scrollBy({
left: 500, // Adjust the scroll distance as needed
behavior: "smooth",
});
}
};
console.log(Cookies.get("room_guest"));
const handlePrev = () => {
if (containerRef.current) {
containerRef.current.scrollBy({
left: -500, // Adjust the scroll distance as needed
behavior: "smooth",
});
}
};
return (
<div className="activity_details">
<div className="wrapper">
<div className="img_container" ref={containerRef}>
<img src="https://images.unsplash.com/photo-1681311869180-72bc056afa1b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY5NjAxMjE4MA&ixlib=rb-4.0.3&q=80&w=2000" />
<img src="https://images.unsplash.com/photo-1681311869180-72bc056afa1b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY5NjAxMjE4MA&ixlib=rb-4.0.3&q=80&w=2000" />
<img src="https://images.unsplash.com/photo-1681311869180-72bc056afa1b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY5NjAxMjE4MA&ixlib=rb-4.0.3&q=80&w=2000" />
<img src="https://images.unsplash.com/photo-1681311869180-72bc056afa1b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY5NjAxMjE4MA&ixlib=rb-4.0.3&q=80&w=2000" />
<img src="https://images.unsplash.com/photo-1681311869180-72bc056afa1b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY5NjAxMjE4MA&ixlib=rb-4.0.3&q=80&w=2000" />
<img src="https://images.unsplash.com/photo-1681311869180-72bc056afa1b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY5NjAxMjE4MA&ixlib=rb-4.0.3&q=80&w=2000" />
<img src="https://images.unsplash.com/photo-1681311869180-72bc056afa1b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY5NjAxMjE4MA&ixlib=rb-4.0.3&q=80&w=2000" />
<img src="https://images.unsplash.com/photo-1681311869180-72bc056afa1b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY5NjAxMjE4MA&ixlib=rb-4.0.3&q=80&w=2000" />
<img src="https://images.unsplash.com/photo-1681311869180-72bc056afa1b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY5NjAxMjE4MA&ixlib=rb-4.0.3&q=80&w=2000" />
<img src="https://plus.unsplash.com/premium_photo-1695290756957-f15d77b83a6c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY5NjAxNjI2Mw&ixlib=rb-4.0.3&q=80&w=1080" />
<img src="https://images.unsplash.com/photo-1681311869180-72bc056afa1b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY5NjAxMjE4MA&ixlib=rb-4.0.3&q=80&w=2000" />
<img src="https://images.unsplash.com/photo-1681311869180-72bc056afa1b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY5NjAxMjE4MA&ixlib=rb-4.0.3&q=80&w=2000" />
<img src="https://images.unsplash.com/photo-1681311869180-72bc056afa1b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY5NjAxMjE4MA&ixlib=rb-4.0.3&q=80&w=2000" />
<img src="https://images.unsplash.com/photo-1681311869180-72bc056afa1b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY5NjAxMjE4MA&ixlib=rb-4.0.3&q=80&w=2000" />
<img src="https://images.unsplash.com/photo-1681311869180-72bc056afa1b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY5NjAxMjE4MA&ixlib=rb-4.0.3&q=80&w=2000" />
<img src="https://images.unsplash.com/photo-1681311869180-72bc056afa1b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY5NjAxMjE4MA&ixlib=rb-4.0.3&q=80&w=2000" />
<img src="https://images.unsplash.com/photo-1681311869180-72bc056afa1b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY5NjAxMjE4MA&ixlib=rb-4.0.3&q=80&w=2000" />
<img src="https://images.unsplash.com/photo-1681311869180-72bc056afa1b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY5NjAxMjE4MA&ixlib=rb-4.0.3&q=80&w=2000" />
</div>
<button class="prev" onClick={handlePrev}>
<BiSolidLeftArrow />
</button>
<button class="next" onClick={handleNext}>
<BiSolidRightArrow />
</button>
</div>
<div className="activity_body">
<div className="head_section">
<h1 className="title">
{apidata?.packageName}
<p>
<span style={{ paddingRight: "5px" }}>
<IoLocationOutline />
</span>
{apidata?.activityLocation}
</p>
</h1>
<div className="share-down">
<i>
<HiShare />
</i>
<i>
<PiArrowFatDownFill />
</i>
</div>
</div>
<div className="activity_component">
<div className="component_head">
<h3 className="titile">Tour Snapshot</h3>
<div className="tour_info">
<div className="icons">
<h6>
{" "}
<span style={{ paddingRight: "5px" }}>
<AiOutlineClockCircle />
</span>
Duration
</h6>
<p>{apidata?.packageDuration} hrs</p>
</div>
<div className="icons">
<h6>
<span style={{ paddingRight: "5px" }}>
<GrGroup />
</span>
Group size
</h6>
<p>{apidata?.groupSize} </p>
</div>
<div className="icons">
<h6>
<span style={{ paddingRight: "5px" }}>
<LiaCarSideSolid />
</span>
Public Transit
</h6>
<p>11 </p>
</div>
<div className="icons">
<h6>
<span style={{ paddingRight: "5px" }}>
<FcCancel />
</span>
Cancellation
</h6>
<p style={{ color: "rgba(39, 137, 255, 1)" }}>Learn more </p>
</div>
</div>
</div>
<div className="overview">
<h3>Overview</h3>
<p>
{apidata?.overview} <span className="overview-more">More</span>
</p>
</div>
<div className="language">
<h3>Available Language</h3>
<p>{apidata?.availableLanguage}</p>
</div>
<div className="cancellation">
<h3>Cancellation policy</h3>
<p>{apidata?.cancellationPolicy}</p>
</div>
<div className="highlights">
<h3>Highlights</h3>
<p>{apidata?.highlight}</p>
</div>
<div className="included">
<h3>What‘s Included</h3>
<p>Entry ticket to Harry Potter Warner Bros Studio Tour</p>
<p>Return transfers in air-conditioned coach</p>
</div>
<div className="excluded">
<h3>What‘s Excluded</h3>
<p>Food and drinks</p>
<p>Gratuities</p>
</div>
<div className="location">
<iframe
src={apidata?.mapLink}
width="100%"
height="400px"
style={{ border: 0 }}
allowFullScreen=""
loading="lazy"
referrerPolicy="no-referrer-when-downgrade"
/>
</div>
</div>
<div className="price-calc">
<div className="dis-price">
<p className="discount-price">
₹ <del>22,541</del>
</p>
<h4 className="offer">40% Off</h4>
</div>
<div className="net-price">
<p>
<span>₹15,456</span> per person*
</p>
<p>*Excluding applicable taxes</p>
</div>
<div className="hd-calendar">
<div className="cal-date">
<span>
<BsCalendarCheck />
</span>
<span>18 Aug - 21 Aug</span>
</div>
<h4 className="modify-cal">MODIFY</h4>
</div>
<h4 className="booking-process">Proceed to Book Online</h4>
</div>
</div>
<div className="footer-section">
<div className="footer-box">
<h1 className="footer-title">
<span>Contact</span> Request Call Back or Email Inquiry
</h1>
<p className="footer-text">
Need assistance? Request a call back or inquire via email for prompt
support tailored to your requirements.
</p>
<div className="subscribe">
<input
type="text"
name=""
id=""
placeholder="Enter phone or email"
/>
<i>
<FaTelegram />
</i>
</div>
</div>
</div>
</div>
);
};
export default Activity_details;
Editor is loading...
Leave a Comment