Skip to content

Jay Mehta / zango-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 7ab9b79a by jaymehta
Options

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

2 parents 2112b695 d4d6a659
Inline Side-by-side
Showing 18 changed files with 344 additions and 198 deletions
components/admin/ActivityDetailGallaryModal.js 0 → 100644
import { Empty, Modal } from "antd"
import Image from "next/image"
import { cleanImage } from '../../services/imageHandling.js'
const ActivityDetailGallaryModal = ({ activityDetailInfo }) => {
return (
<>
{activityDetailInfo[0].attributes.imagesComponent.length > 0 ?
<div className="p-4">
<div className="row">
{activityDetailInfo[0].attributes.imagesComponent.map((data, index) => (
<div className="col-4" key={index}>
<Image className="img-fluid" height={400} width={400} alt="" src={cleanImage(data.image.data.attributes)} />
</div>
))}
</div>
</div>
:
<div className="d-flex align-items-center justify-content-center" style={{height : '60vh'}}>
<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
</div>
}
</>
)
}
export default ActivityDetailGallaryModal
\ No newline at end of file
components/admin/ActivityDetailsModal.js
......@@ -4,13 +4,24 @@ import { Button, Modal } from "react-bootstrap";
import { Loader } from "react-bootstrap-typeahead";
import { toast } from "react-toastify";
import { updateActivityStatusAdmin } from "../../redux/actions/userActions";
import ActivityDetailGallaryModal from "./ActivityDetailGallaryModal";
import { CloseCircleOutlined } from "@ant-design/icons";
const ActivityDetailsModal = ({ show, handleClose, activityDetailInfo }) => {
const [viewDesc, setViewDesc] = useState();
const [rejectPopUp, setrejectPopUp] = useState(false);
const [rejectionReasonText, setrejectionReasonText] = useState("");
const [showActivityImages, setShowActivityImages] = useState(false);
console.log("activityDetailInfo", activityDetailInfo);
const getUrls = (url) => {
let a = activityDetailInfo[0]?.attributes?.cancellationPolicy?.data
console.log("checking data", url)
if (a !== null) {
window.open(url, '_blank')
} else {
toast.warning("No Data Found")
}
}
return (
<Fragment>
<Modal show={show} onHide={handleClose} size="xl" aria-labelledby="contained-modal-title-vcenter" centered>
......@@ -127,7 +138,7 @@ const ActivityDetailsModal = ({ show, handleClose, activityDetailInfo }) => {
</div>
<div className="row">
<p className="col-12 col-lg-6">Images of Activities</p>
<p className="col-12 col-lg-6 pview">View Images</p>
<p className="col-12 col-lg-6 pview cursor-pointer" onClick={() => { setShowActivityImages(true); console.log("checking") }}>View Images</p>
</div>
<div className="row">
<p className="col-12 col-lg-6">Brand Logo</p>
......@@ -137,12 +148,31 @@ const ActivityDetailsModal = ({ show, handleClose, activityDetailInfo }) => {
<div>
<p className="phead">Policy & Terms</p>
<div className="row">
<p className="col-12 col-lg-6">Cancellation Policy</p>
<p className="col-12 col-lg-6 pview">View</p>
<div className="col-12 col-lg-6 ">
<p>Cancellation Policy</p>
</div>
<div className="col-12 col-lg-6 ">
<p
className="pview cursor-pointer"
onClick={() => getUrls(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}${activityDetailInfo[0]?.attributes?.cancellationPolicy?.data?.attributes?.url}`)}
>
View
</p>
</div>
</div>
<div className="row">
<p className="col-12 col-lg-6">Terms & Conditions</p>
<p className="col-12 col-lg-6 pview">View</p>
<div className="col-12 col-lg-6 ">
<p>
Terms & Conditions
</p>
</div>
<div className="col-12 col-lg-6">
<p className="pview cursor-pointer"
onClick={() => getUrls(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}${activityDetailInfo[0]?.attributes?.termsConditions?.data?.attributes?.url}`)}
>
View
</p>
</div>
</div>
</div>
</div>
......@@ -229,6 +259,15 @@ const ActivityDetailsModal = ({ show, handleClose, activityDetailInfo }) => {
</div>
</Modal.Body>
</Modal>
<Modal size="xl" show={showActivityImages} onHide={() => setShowActivityImages(false)} centered contentClassName="p-3">
<div className="text-end">
<span className="image-container" style={{ cursor: "pointer" }} onClick={() => setShowActivityImages(false)}>
<Image width={13} height={13} alt="" src="/images/admin/icon-close.svg" className="image" />
</span>
</div>
<ActivityDetailGallaryModal activityDetailInfo={activityDetailInfo} showActivityImages={showActivityImages} setShowActivityImages={setShowActivityImages} />
</Modal>
</Fragment>
);
};
......
components/admin/VendorDetails.js
......@@ -18,6 +18,7 @@ const VendorDetails = ({ id, backClick, setShowDetail, showDetail, detail }) =>
const dispatch = useDispatch();
useEffect(() => {
dispatch(getActivitiesForAdmin({ vendorId: detail[0].id }));
console.log("cancel policy", detail[0])
}, []);
useEffect(() => {
......@@ -41,32 +42,30 @@ const VendorDetails = ({ id, backClick, setShowDetail, showDetail, detail }) =>
setShowRejectModal(false);
};
// const UserStatus = () => {
// if (!detail || !detail.length > 0) return;
// const currentStatus = detail[0].attributes.user.data.attributes.approved;
// let message;
// let color;
// switch (currentStatus) {
// case "approved":
// message = "Approved";
// color = "success";
// break;
// case "rejected":
// message = "Rejected";
// color = "error";
// break;
// case "pending":
// message = "Pending";
// color = "warning";
// break;
// default:
// break;
// }
// return <Tag color={color}>{message}</Tag>;
// };
const UserStatus = () => {
if (!detail || !detail.length > 0) return;
const currentStatus = detail[0].attributes.user.data.attributes.approved;
let message;
let color;
switch (currentStatus) {
case "approved":
message = "Approved";
color = "success";
break;
case "rejected":
message = "Rejected";
color = "error";
break;
case "pending":
message = "Pending";
color = "warning";
break;
default:
break;
}
return <Tag color={color}>{message.toUpperCase()}</Tag>;
};
return (
<Fragment>
<div className="vendorDetails">
......@@ -88,7 +87,7 @@ const VendorDetails = ({ id, backClick, setShowDetail, showDetail, detail }) =>
<div className="col-8 col-lg-8 mt-4">
<h4>Business Information</h4>
<div className="row">
<div className="col-12 col-lg-4">
<div className="col-12 col-lg-5">
<p className="phead">Business Documents</p>
<div className="row">
<p className="col-12 col-lg-6">Business PAN No.</p>
......@@ -111,7 +110,7 @@ const VendorDetails = ({ id, backClick, setShowDetail, showDetail, detail }) =>
<p className="col-12 col-lg-6">{detail[0].attributes.businessName}</p>
</div>
</div>
<div className="col-12 col-lg-5 borderLeft">
<div className="col-12 col-lg-7 borderLeft">
<p className="phead">Business Address</p>
<div className="row">
<p className="col-12 col-lg-4">Pincode</p>
......@@ -140,6 +139,7 @@ const VendorDetails = ({ id, backClick, setShowDetail, showDetail, detail }) =>
</div>
</div>
</div>
<div className=" col-4">
<div className="row">
{/* <div className="col-12">
......@@ -166,6 +166,11 @@ const VendorDetails = ({ id, backClick, setShowDetail, showDetail, detail }) =>
Reject
</Button>
</div>
<div className="col-12">
<div className="d-flex align-items-center gap-4">
<p className="phead m-0">Status :</p> <UserStatus />
</div>
</div>
</div>
</div>
<div className="col-12 col-lg-12 mt-4">
......
components/home/BrowseExperiences.js
......@@ -60,15 +60,15 @@ const BrowseExperiences = ({ allActivitiesData }) => {
breakpoints={{
640: {
slidesPerView: 1,
spaceBetween: 20
spaceBetween: 0
},
768: {
slidesPerView: 2,
spaceBetween: 40
spaceBetween: 0
},
1024: {
slidesPerView: 4,
spaceBetween: 20
spaceBetween: 0
}
}}
modules={[Navigation, Autoplay]}
......
components/home/LetDiscover.js
......@@ -97,7 +97,7 @@ const LetDiscover = ({ categories }) => {
}}
>
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src={cleanImage(data?.attributes?.image?.data?.attributes)} />
<Image priority={false} loading="lazy" layout="fill" alt="" className="image img-fluid" src={cleanImage(data?.attributes?.image?.data?.attributes)} />
</span>
<div className="title">{data?.attributes?.name}</div>
</a>
......
components/layout/Footer.js
......@@ -45,8 +45,8 @@ const Footer = () => {
<div className="col-md-3">
<div className="footer-link">
<h3>VENDOR SIGN UP</h3>
<div className="">
<Button href="/login/vendor" variant="light me-3">
<div className="vendor-signup">
<Button href="/login/vendor" variant="light me-3 mb-md-2 mb-lg-0 mb-0">
Log In
</Button>
<Button href="/signup/vendor" variant="primary">
......@@ -62,7 +62,7 @@ const Footer = () => {
</div>
</div>
<div className="row">
<div className="col-md-3">
<div className="col-sm-12 col-md-6 col-lg-3">
<div className="footer-link mtp-0">
<h3>QUICK LINKS</h3>
<ul>
......@@ -87,7 +87,7 @@ const Footer = () => {
</ul>
</div>
</div>
<div className="col-md-3">
<div className="col-sm-12 col-md-6 col-lg-3">
<div className="footer-link">
<h3>CONTACT </h3>
<div className="icon-text">
......@@ -116,7 +116,7 @@ const Footer = () => {
</div>
</div>
</div>
<div className="col-md-3">
<div className="col-sm-12 col-md-6 col-lg-3 mt-md-4">
<div className="footer-link">
<h3>HELP</h3>
<ul>
......@@ -135,7 +135,7 @@ const Footer = () => {
</ul>
</div>
</div>
<div className="col-md-3">
<div className="col-sm-12 col-md-6 col-lg-3 mt-md-4">
<div className="footer-link mb-3">
<h3>FOLLOW US ON</h3>
<div className="social-icon">
......@@ -162,7 +162,7 @@ const Footer = () => {
<div className="subscribe">
<form onSubmit={handleSubmit}>
<div className="row">
<div className="col-12 d-flex align-items-center justify-content-between">
<div className="col-12 d-flex align-items-center justify-content-start justify-content-lg-between">
<input
id="subscribe"
onChange={e => {
......
components/layout/Header.js
......@@ -46,11 +46,12 @@ const Header = () => {
}, [endUser]);
return (
<header className={`header_wrap ${isSticky ? "stick" : ""}`}>
{isSticky && <div style={{height :76}} className="bg-transparent"></div>}
<Navbar expand="lg" className="bg-body-tertiary">
<Container fluid>
<Navbar.Brand href="/">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/Zango-logo.svg" />
<Image loading="lazy" layout="fill" alt="" className="image img-fluid" src="/images/Zango-logo.svg" />
</span>
</Navbar.Brand>
<Navbar.Toggle aria-controls="navbarScroll" />
......@@ -60,9 +61,12 @@ const Header = () => {
<a className="nav-link ">Blogs</a>
</ActiveLink>
<ActiveLink href="/gift-card" activeClassName="active ">
<a className="nav-link gift-card">Gift Card <span className="image-container">
<a className="nav-link gift-card">
Gift Card{" "}
<span className="image-container">
<Image layout="fill" className="image img-fluid" src="/images/icons/gift-card-icon.svg" alt="" />
</span></a>
</span>
</a>
</ActiveLink>
{/* <Nav.Link href="/gift-card" className="gift-card">
......@@ -71,7 +75,6 @@ const Header = () => {
<Image layout="fill" className="image img-fluid" src="/images/icons/gift-card-icon.svg" alt="" />
</span>
</Nav.Link> */}
</Nav>
<Form className="d-flex me-3">
<div className="header-search">
......
components/user/MyBookings.js
......@@ -47,10 +47,10 @@ const MyBookings = () => {
<div className="container">
<div className="row">
<div className="col-12 col-lg-12 form-container content-wraaper">
<h2>My Bookings</h2>
<h2 className="px-2 px-lg-0">My Bookings</h2>
<div className="row">
{bookingsData?.length && bookingsData.map((data, index) => (
<div className="col-12 col-lg-3" key={`1${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="card-booking-img">
<span className="image-container">
......@@ -83,7 +83,7 @@ const MyBookings = () => {
</div>
<div className="row">
{bookingsData?.length && bookingsData.map((data, index) => (
<div className="col-12 col-lg-3" key={`2${index}`}>
<div className="col-12 col-sm-12 col-lg-3 col-md-6 px-4 px-lg-3" key={`2${index}`}>
<div className="card-booking">
<div className="card-booking-img">
<span className="image-container">
......@@ -116,7 +116,7 @@ const MyBookings = () => {
</div>
<div className="row">
{bookingsData?.length && bookingsData.map((data, index) => (
<div className="col-12 col-lg-3" key={`3${index}`}>
<div className="col-12 col-sm-12 col-lg-3 col-md-6 px-4 px-lg-3" key={`3${index}`}>
<div className="card-booking">
<div className="card-booking-img">
<span className="image-container">
......
components/user/MyGiftCard.js
......@@ -13,10 +13,10 @@ const MyGiftCard = () => {
<div className="container">
<div className="row">
<div className="col-12 col-lg-12 form-container content-wraaper">
<h2>My Gift Card</h2>
<h2 className="px-2 px-lg-0">My Gift Card</h2>
<div className="row">
{giftCard?.length && giftCard.map((data, index) => (
<div className="col-12 col-lg-4" key={`1${index}`}>
<div className="col-12 col-lg-4 px-4 px-lg-3" key={`1${index}`}>
<div className="card-booking">
<div className="card-booking-img bgGrey">
<span className="image-container">
......
components/user/MyProfile.js
......@@ -4,11 +4,13 @@ import React, { Fragment, useEffect, useRef, useState } from 'react';
import { Button, Form, Table } from 'react-bootstrap';
import * as Yup from "yup";
import { renderImage } from '../../services/imageHandling';
import { useSelector } from 'react-redux';
const MyProfile = () => {
let formikUploadImage;
const [readOnly, setReadOnly] = useState(true);
const { endUser } = useSelector(state => state.endUser);
console.log("users info", endUser);
const profileValidationSchema = Yup.object().shape({
first_name: Yup.string()
.required("First Name is Required"),
......@@ -75,7 +77,7 @@ const MyProfile = () => {
<h2>My Profile</h2>
<Table className='abc'>
{/* <Table className='abc'>
<thead>
<tr>
<th>1</th>
......@@ -113,7 +115,7 @@ const MyProfile = () => {
<td>33</td>
</tr>
</tbody>
</Table>
</Table> */}
<div className="bg-white border-div">
<Formik
initialValues={{ profile_image: null }}
......@@ -157,14 +159,16 @@ const MyProfile = () => {
console.log(errors)
}}
>
<div className="d-flex align-items-center justify-content-between">
<div className="col-lg-6 d-flex align-items-center">
<span className="image-container me-4">
<div className="row align-items-center justify-content-between">
<div className="col-lg-12 d-flex align-items-center">
<span className="image-container me-4 profile-img-s">
<Image layout="fill" alt="" src="/images/user/user-big.jpg" className="image" />
</span>
<p className="username">John Doe</p>
<p className="username">
{endUser?.attributes?.name}
</p>
</div>
<div className="col-lg-4">
{/* <div className="col-lg-4">
<label className="uploadProfileImage" htmlFor="file-upload">
<p className="mb-0">Upload Profile Photo</p>
<Image alt="" src="/images/user/icon-upload.svg" width="24" height="24" className="pb-1" />
......@@ -182,7 +186,7 @@ const MyProfile = () => {
}}
/>
{errors.profile_image && touched.profile_image && (<span className="form-error">{errors.profile_image}</span>)}
</div>
</div> */}
</div>
</Form>
)}
......@@ -208,30 +212,44 @@ const MyProfile = () => {
<div className="d-flex justify-content-between mb-4">
<h2 className="mb-0">Personal Information</h2>
{/* onClick={() => setReadOnly(prevState => !prevState)} */}
{readOnly && (
{/* {readOnly && (
<div className="btn-edit">
<span className="me-3">Edit</span>
<i className="fa fa-edit"></i>
</div>
)}
)} */}
</div>
<div className="row">
<div className="col-12 col-lg-5">
<div className="input-group">
<label>Your First Name</label>
<label>Your Full Name</label>
<Field
type="text"
name="first_name"
onChange={handleChange}
onBlur={handleBlur}
value={values.first_name}
value={endUser?.attributes?.name}
readOnly={readOnly}
innerRef={firstFieldRef}
/>
{errors.first_name && touched.first_name && (<span className="form-error">{errors.first_name}</span>)}
{/* {errors.first_name && touched.first_name && (<span className="form-error">{errors.first_name}</span>)} */}
</div>
</div>
<div className="col-12 offset-lg-1 col-lg-5">
<div className="col-12 col-lg-5">
<div className="input-group">
<label>Email Id</label>
<Field
type="text"
name="email"
onChange={handleChange}
onBlur={handleBlur}
value={endUser?.attributes?.email}
readOnly={readOnly}
/>
{/* {errors.email && touched.email && (<span className="form-error">{errors.email}</span>)} */}
</div>
</div>
{/* <div className="col-12 offset-lg-1 col-lg-5">
<div className="input-group">
<label>Your Last Name</label>
<Field
......@@ -244,10 +262,10 @@ const MyProfile = () => {
/>
{errors.last_name && touched.last_name && (<span className="form-error">{errors.last_name}</span>)}
</div>
</div>
</div> */}
</div>
<div className="row">
<div className="col-12 col-lg-5">
{/* <div className="col-12 col-lg-5">
<div className="input-group">
<label>Email Id</label>
<Field
......@@ -260,12 +278,12 @@ const MyProfile = () => {
/>
{errors.email && touched.email && (<span className="form-error">{errors.email}</span>)}
</div>
</div>
<div className="col-12 offset-lg-1 col-lg-5">
</div> */}
<div className="col-12 col-lg-5">
<div className="input-group">
<label>Mobile Number</label>
<div className="contact-number">
{readOnly && (
{/* {readOnly && (
<Field
type="text"
name="country_code"
......@@ -275,7 +293,7 @@ const MyProfile = () => {
readOnly={readOnly}
style={{ width: "80px" }}
/>
)}
)} */}
{!readOnly && (
<select
id="country_code"
......@@ -289,19 +307,20 @@ const MyProfile = () => {
</select>
)}
<Field
className='m-0'
type="text"
name="mobile"
onChange={handleChange}
onBlur={handleBlur}
value={values.mobile}
value={endUser?.attributes?.phone}
readOnly={readOnly}
/>
</div>
{errors.mobile && touched.mobile && (<span className="form-error">{errors.mobile}</span>)}
{/* {errors.mobile && touched.mobile && (<span className="form-error">{errors.mobile}</span>)} */}
</div>
</div>
</div>
<div className="row">
{/* <div className="row">
<div className="col-12 col-lg-5">
<div className="input-group">
<label>Current Password</label>
......@@ -316,7 +335,7 @@ const MyProfile = () => {
/>
</div>
</div>
</div>
</div> */}
</>
</Form>
)}
......@@ -324,7 +343,7 @@ const MyProfile = () => {
</div>
<div className="bg-white border-div">
{/* <div className="bg-white border-div">
<Formik
initialValues={{
addresses: [
......@@ -449,7 +468,7 @@ const MyProfile = () => {
</Form>
)}
</Formik>
</div>
</div> */}
</div>
</div>
</div>
......
components/user/MyWhishList.js
......@@ -57,54 +57,64 @@ const MyWhishList = () => {
return (
<Fragment>
<div className="container">
<div className="container pb-5">
<div className="row">
<div className="col-12 col-lg-12 form-container content-wraaper">
<h2>My Bookings</h2>
<h2 className="px-2 px-lg-0">My Bookings</h2>
<div className="listing-items">
<div className="row">
{whishListData?.length && whishListData.map((data, index) => (
<div className="col-12 col-lg-3" key={`1${index}`}>
<div className="card-booking">
<div className="card-booking-img">
<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={renderImage(data.image)} layout="fill" className="image" />
<Image src={renderImage(data.image)} layout="fill" className="image img-fluid" />
</span>
<p className="type">{data.type}</p>
<div className="top-rated">Top Rated</div>
</div>
<div className="card-booking-content">
<div className="d-flex align-items-start justify-content-between">
<p className="activity-name">{data.name}</p>
<div className="d-flex align-items-center">
<div className="info">
<div className="top-name">
<div className="title">{data.name}</div>
<div className="rating-wishlist">
<div className="rating">
<span className="me-1 pt-1">{data.rating}</span>
<span className="number">{data.rating}</span>
<span className="image-container">
<Image src={renderImage("/images/user/star.svg")} layout="fill" className="image" />
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" />
</span>
</div>
<span className="image-container">
<Image src={renderImage("/images/user/heart.svg")} layout="fill" className="image" />
</span>
</div>
</div>
<div className="discription">Lorem ipsum dolor sit amet, consectetur adipiscing elit, <a href="">Read More</a></div>
{/* <p className="price">{data.price} <span>{data.discount}</span></p> */}
<p className="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, <span>Read More</span></p>
<p className="price">{data.price} <span>{data.discount}</span></p>
<p className="other">{data.availablity}</p>
<p className="other">{data.other}</p>
<div className="price">
${data?.price} <span className="off">{data.discount}</span>
</div>
<div className="detail">
<div>{data.availablity}</div>
<div>{data.other}</div>
</div>
<div className="card-booking-footer pt-0">
<Button id="exploreNow" aria-label="Explore Now" type="button" className="btn btn-primary btn-explore">
<div className="explore-now">
<Button
variant="primary"
>
Explore Now
</Button>
</div>
</div>
</div>
</div>
</div>
))}
</div>
</div>
</div>
</div>
</div>
</Fragment>
)
}
......
components/vendor/ActivityDetails.js
......@@ -334,7 +334,7 @@ const ActivityDetails = ({ isUpdate }) => {
setStartDate(activityById?.data.attributes.fromDate);
setEndDate(activityById?.data.attributes.toDate);
setimagesArrayComponent(activityById?.data.attributes.imagesComponent.map(item => item.image.data?.id));
setdisplayImage(activityById?.data.attributes.image?.data.id);
setdisplayImage(activityById?.data.attributes.image?.data?.id);
setCancellationPolicy(activityById?.data.attributes.cancellationPolicy?.data?.id);
settermsConditions(activityById?.data.attributes.termsConditions?.data?.id);
}
......
components/vendor/OrderListing.js
......@@ -172,7 +172,7 @@ const OrderListing = () => {
<div className="p-2">Phone number: {enquiryDetails[0].attributes.end_user.data.attributes.phone}</div>
<div className="p-2">Email: {enquiryDetails[0].attributes.end_user.data.attributes.email}</div>
<div className="p-2">
Status: <Tag color={enquiryDetails[0].attributes.status == "pending" ? "red" : "blueI"}>{enquiryDetails[0].attributes.status.toUpperCase()}</Tag>
Status: <Tag color={enquiryDetails[0].attributes.status == "pending" ? "red" : "blue"}>{enquiryDetails[0].attributes.status.toUpperCase()}</Tag>
</div>
<Button
onClick={async () => {
......
public/images/icons/add-icon.svg 0 → 100644
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<line x1="8.54687" y1="2.09668" x2="8.54687" y2="14.8603" stroke="#808080" stroke-width="2.5" stroke-linecap="round"/>
<line x1="1.73633" y1="8.48462" x2="14.7422" y2="8.48462" stroke="#808080" stroke-width="2.5" stroke-linecap="round"/>
</svg>
public/images/icons/edit-icon.svg 0 → 100644
<svg width="23" height="22" viewBox="0 0 23 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_670_955)">
<path d="M22.9249 3.2853C22.8676 3.48187 22.8454 3.69711 22.7451 3.87088C22.5704 4.1736 22.3893 4.49058 22.1386 4.73257C18.9389 7.82015 15.7273 10.8964 12.5132 13.9702C12.3978 14.0805 12.2358 14.1699 12.0789 14.2128C10.6081 14.6144 9.13415 15.0053 7.66007 15.3957C7.09642 15.545 6.74959 15.2163 6.90396 14.6783C7.30974 13.264 7.71668 11.85 8.13434 10.439C8.17899 10.2881 8.27056 10.1316 8.38556 10.021C11.5949 6.93289 14.8074 3.84787 18.0256 0.768339C19.0692 -0.230204 20.5651 -0.222105 21.6113 0.768544C21.7947 0.942203 21.9755 1.11839 22.1583 1.2927C22.5501 1.66645 22.8071 2.10735 22.8902 2.63604C22.8942 2.66124 22.913 2.68428 22.9249 2.70833L22.9249 3.2853ZM12.077 12.8643C14.724 10.3253 17.3805 7.7772 20.0169 5.24834C19.1752 4.44104 18.3223 3.62294 17.4821 2.81705C14.8424 5.34906 12.1858 7.89727 9.54231 10.433C10.3804 11.2369 11.2295 12.0514 12.077 12.8643ZM18.3244 1.95904C19.1972 2.79624 20.0512 3.61533 20.9124 4.44144C21.1003 4.2522 21.3298 4.04425 21.5308 3.81342C21.923 3.363 21.9354 2.66405 21.5386 2.21833C21.2614 1.90696 20.9553 1.61349 20.6293 1.34933C20.1696 0.97694 19.4458 0.991548 18.9844 1.36195C18.7388 1.5591 18.5169 1.78347 18.3244 1.95904ZM8.19049 14.1632C9.1534 13.9068 10.08 13.6602 10.9811 13.4203C10.3018 12.769 9.63141 12.1262 8.96286 11.4851C8.71315 12.3509 8.45708 13.2388 8.19049 14.1632Z" fill="#808080"/>
<path d="M11.3495 21.0188C8.82187 21.0188 6.29422 21.0204 3.76658 21.0181C2.57073 21.017 1.68414 20.5098 1.18403 19.4661C1.02772 19.1399 0.939274 18.7532 0.938014 18.3939C0.921993 13.8264 0.921645 9.25888 0.931087 4.6914C0.93404 3.26281 2.06975 2.12395 3.56115 2.0892C5.20707 2.05084 6.85463 2.07443 8.50146 2.07695C8.83653 2.07746 9.07702 2.30644 9.07874 2.59544C9.08047 2.88839 8.82461 3.12033 8.48477 3.12078C6.90947 3.12286 5.33416 3.11973 3.75886 3.12268C2.90942 3.12428 2.28938 3.56772 2.07992 4.32917C2.03502 4.4924 2.02534 4.66841 2.02523 4.83855C2.02242 9.30989 2.02231 13.7812 2.02362 18.2526C2.02387 19.1077 2.45865 19.6978 3.2479 19.9068C3.41788 19.9518 3.60069 19.9704 3.77761 19.9705C8.82573 19.9738 13.8739 19.9737 18.922 19.9726C19.7808 19.9724 20.4068 19.5387 20.6189 18.7876C20.6687 18.6115 20.6823 18.4216 20.6829 18.2379C20.6879 16.7544 20.6848 15.2708 20.6865 13.7872C20.6869 13.4383 20.915 13.2042 21.2392 13.2085C21.5122 13.2121 21.7468 13.4177 21.7685 13.6812C21.7787 13.8041 21.7745 13.9283 21.7744 14.0519C21.7727 15.5423 21.79 17.033 21.7627 18.523C21.7384 19.8522 20.5749 20.9785 19.1899 21.0048C17.5938 21.0351 15.9966 21.0169 14.3999 21.0186C13.3831 21.0198 12.3663 21.0189 11.3495 21.0188Z" fill="#808080"/>
</g>
<defs>
<clipPath id="clip0_670_955">
<rect width="22" height="21" fill="white" transform="translate(0.924805 0.0224915)"/>
</clipPath>
</defs>
</svg>
styles/globals.css
......@@ -259,6 +259,11 @@ h6 {
font-weight: 600;
}
/* cursor pointer */
.cursor-pointer{
cursor: pointer;
}
/*ST Images*/
.image-container {
width: auto;
......@@ -281,7 +286,6 @@ h6 {
position: relative !important;
height: unset !important;
}
header {
position: relative;
z-index: 99;
......@@ -290,7 +294,7 @@ header {
.header_wrap.stick .navbar {
position: fixed;
top: -100px;
transition: transform 0.5s;
transition: transform 0.5s ease-in-out;
transform: translateY(100px);
background-color: #fff;
}
......@@ -554,21 +558,21 @@ header {
border-radius: 73px;
background: #fff;
box-shadow: 0px 4px 57.5px -8px rgba(0, 0, 0, 0.25);
height: 90px;
padding: 1.5rem 2.2rem;
height: calc(40px + (90 - 40) * (100vw - 320px) / (1920 - 320));
padding: 1.25vw 1.833vw;
}
.searchbar-h input {
width: 100%;
border: 0;
font-size: 20px;
font-size: calc(16px + (20 - 16) * (100vw - 320px) / (1920 - 320));
padding-right: 5rem;
}
.searchbar-h .search-icon {
position: absolute;
right: 35px;
top: 30px;
right: 1.823vw;
top: 1.563vw;
background: transparent !important;
border: 0;
}
......@@ -630,29 +634,6 @@ span.form-error,
font-family: "Sofia Pro Light";
}
/*ST Images*/
.image-container {
width: auto;
position: relative;
}
.image-container > span {
position: unset !important;
/* display: inline-block !important; */
}
.image-container.d-inblock > span {
position: unset !important;
display: inline-block !important;
}
.image {
object-fit: contain;
width: 100% !important;
position: relative !important;
height: unset !important;
}
.login-banner-image {
background-repeat: no-repeat;
background-position: center;
......@@ -965,15 +946,15 @@ span.form-error,
.uploadProfileImage p {
font-family: "Sofia Pro Bold";
font-size: 20px;
line-height: 28px;
font-size: calc(16px + (20 - 16) * (100vw - 320px) / (1920 - 320));
line-height: calc(25px + (28 - 25) * (100vw - 320px) / (1920 - 320));
letter-spacing: 0em;
color: #fff;
}
/*-------- My Bookings ----------*/
.content-wraaper {
padding: 3rem 3rem 0;
padding: 3rem 0 0;
}
.content-wraaper h2 {
......@@ -988,9 +969,9 @@ span.form-error,
.username {
font-family: "Sofia Pro Light";
font-size: 21px;
font-size: calc(16px + (21 - 16) * (100vw - 320px) / (1920 - 320));
line-height: calc(20px + (24 - 20) * (100vw - 320px) / (1920 - 320));
font-weight: 600;
line-height: 24px;
letter-spacing: 0em;
text-align: left;
color: #000;
......@@ -999,9 +980,9 @@ span.form-error,
.btn-edit {
font-family: "Sofia Pro Light";
font-size: 18px;
font-size: calc(16px + (18 - 16) * (100vw - 320px) / (1920 - 320));
line-height: calc(22px + (18 - 22) * (100vw - 320px) / (1920 - 320));
font-weight: 600;
line-height: 28px;
letter-spacing: 0em;
text-align: center;
color: #808080;
......@@ -1009,8 +990,16 @@ span.form-error,
border-radius: 6px;
padding: 0.5rem 1rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.btn-edit > span:first-child {
margin-top: 0.2rem;
}
.btn-edit .image-container .image {
width: calc(16px + (20 - 16) * (100vw - 320px) / (1920 - 320)) !important;
}
.content-wraaper label {
color: #646464;
font-size: 18px;
......@@ -1172,8 +1161,8 @@ span.form-error,
.card-booking-content .details-div > p:first-child {
font-family: "Sofia Pro Light";
font-size: calc(14px + (14 - 14) * (100vw - 320px) / (1920 - 320) );
line-height: calc(20px + (20 - 20) * (100vw - 320px) / (1920 - 320) );
font-size: calc(14px + (14 - 14) * (100vw - 320px) / (1920 - 320));
line-height: calc(20px + (20 - 20) * (100vw - 320px) / (1920 - 320));
letter-spacing: 0em;
text-align: left;
color: #808080;
......@@ -1183,8 +1172,8 @@ span.form-error,
.card-booking-content .details-div > p:last-child {
font-family: "Sofia Pro Light";
font-size: 16px;
font-size: calc(16px + (16 - 16) * (100vw - 320px) / (1920 - 320) );
line-height: calc(20px + (20 - 20) * (100vw - 320px) / (1920 - 320) );
font-size: calc(16px + (16 - 16) * (100vw - 320px) / (1920 - 320));
line-height: calc(20px + (20 - 20) * (100vw - 320px) / (1920 - 320));
letter-spacing: 0em;
text-align: left;
color: #000000;
......@@ -1457,7 +1446,7 @@ span.form-error,
color: #ffffff;
border: none;
}
.btnAdd:disabled .image-container .image{
.btnAdd:disabled .image-container .image {
width: 14px !important;
}
.btnAdd:hover,
......@@ -1898,7 +1887,7 @@ span.form-error,
.browse-experiences-session {
background: #f7f5f1;
padding: 2rem 0;
padding: 2rem 0 1rem;
}
.similar-experiences-session {
......@@ -1940,7 +1929,7 @@ span.form-error,
color: #000;
}
.browse-experiences-item .img-wrapper .image-container .image {
height: 220px !important;
height: calc(220px + (220 - 220) * (100vw - 320px) / (1920 - 320)) !important;
background-color: #adadad;
border-radius: 24px 24px 0 0;
object-fit: cover !important;
......@@ -1953,7 +1942,7 @@ span.form-error,
background: #fff;
border-radius: 6px;
padding: 0.3rem 0.5rem;
font-size: 13px;
font-size: calc(12px + (13 - 12) * (100vw - 320px) / (1920 - 320)) !important;
}
.info .top-name .title {
......@@ -1981,20 +1970,20 @@ span.form-error,
height: 19px;
display: block;
}
.rs{
.rs {
/* font-size: calc(32px + (55.008 - 32) * (100vw - 320px) / (1920 - 320)) */
}
.share-social-container{
.share-social-container {
display: flex;
align-items: center;
}
.anticon.anticon-copy{
.anticon.anticon-copy {
cursor: pointer;
}
.share-social-container .share-social-some-network{
.share-social-container .share-social-some-network {
margin-right: 1rem;
}
.wishlist-share .wishlist{
.wishlist-share .wishlist {
width: 29px;
height: 29px;
}
......@@ -2131,7 +2120,7 @@ span.form-error,
.signUp-to-experience-our-platform-session {
background: url(../public/images/sign-up-exp-bg.webp) no-repeat;
background-size: 100%;
background-size: 100% 100%;
object-fit: cover;
padding: 4rem;
color: #fff;
......@@ -2182,6 +2171,7 @@ footer .icon-text .image-container {
width: 20px;
display: block;
margin-right: 1rem;
flex: 0 0 auto;
}
footer .icon-text {
......@@ -2215,9 +2205,9 @@ footer .subscribe input {
border: 1px solid #fff;
border-radius: 5px;
background: transparent;
font-size: 12px;
font-size: calc(12px + (12px - 12px) * (100vw - 320px) / (1920 - 320));
line-height: 14px;
padding: 0.6rem;
padding: 0.5vw;
color: #fff;
margin-right: 0.5rem;
width: 100%;
......@@ -2660,6 +2650,7 @@ button:focus:not(:focus-visible) {
width: 30px;
display: block;
margin-right: 10px;
flex: 0 0 auto;
}
.availability-wrappper li .info {
......@@ -2836,9 +2827,9 @@ button:focus:not(:focus-visible) {
}
.subscribe label .btn {
font-size: 16px;
padding-left: 1rem;
padding-right: 1rem;
font-size: calc(12px + (16 - 12) * (100vw - 320px) / (1920 - 320));
line-height: calc(14px + (18 - 14) * (100vw - 320px) / (1920 - 320));
padding: 0.5vw;
}
.mySwiper01 .swiper-button-prev:after,
......@@ -2973,7 +2964,7 @@ input[type="number"]::-webkit-outer-spin-button {
.home_nav {
position: absolute;
left: 0;
width: 107%;
width: 106%;
margin-left: -2.5vw;
}
......@@ -3500,7 +3491,7 @@ input[type="number"]::-webkit-outer-spin-button {
align-items: center;
justify-content: center;
}
.gift-card-amt>ul{
.gift-card-amt > ul {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(auto-fill, minmax(calc(33.33% - 15px), 1fr));
......@@ -3723,10 +3714,12 @@ img:hover {
font-size: 16px;
border-radius: 5px;
}
.see-my-gift-cards-row{
.see-my-gift-cards-row {
margin-bottom: 4rem;
}
.browse-experiences-carousal .swiper-slide{
padding: 1rem;
}
@media (min-width: 992px) {
.navbar-expand-lg .navbar-nav .nav-link {
margin: 0 2rem;
......@@ -3815,14 +3808,22 @@ img:hover {
}
}
@media (max-width: 1023px) {
.gift-card-amt ul li a, .gift-card-amt ul li label {
padding: 1.5rem 2.8rem;
.browse-experiences-item .img-wrapper .image-container .image {
height: 120px !important;
}
.footer-link h3 {
font-size: 1.85vw;
line-height: 1.85vw;
}
.gift-card-amt ul li a,
.gift-card-amt ul li label {
padding: 1.5rem 2.8rem;
}
.gift-card-lt {
width: 100%;
height: 200px;
padding-right: 0;
}
}
.swiper-nav,
.home_nav {
margin-left: -33px;
......@@ -3876,28 +3877,54 @@ img:hover {
margin-right: 0;
}
}
@media (max-width: 991px) {
.vendor-signup a{
min-width: 140px;
}
}
@media (max-width: 767px) {
.browse-experiences-item .img-wrapper .image-container .image {
height: 220px !important;
}
.subscribe label .btn {
padding: 2.8vw;
}
footer .subscribe input {
padding: 2.8vw;
}
.form-container.content-wraaper .bg-white.border-div .profile-img-s{
width: 12vw;
}
.gift-an-experience-session {
margin-bottom: 2rem;
}
.content-wraaper label {
margin-top: 1rem;
}
.border-div {
padding: 1.5rem;
}
.gift-card-rt .title {
font-size: 4.667vw;
}
.gift-card-amt>ul {
}
.gift-card-amt > ul {
grid-gap: 10px;
}
.gift-card-amt ul li a, .gift-card-amt ul li label {
}
.gift-card-amt ul li a,
.gift-card-amt ul li label {
padding: 1rem;
}
.see-my-gift-cards-row{
}
.see-my-gift-cards-row {
text-align: center;
margin-bottom: 3rem;
}
.card-booking-img.bgGrey {
padding: 4rem 4rem;
}
}
.rightContent h2 {
font-size: 4.172vw;
line-height: 4.172vw;
}
}
.sub-categories {
margin-bottom: 1rem;
}
......@@ -4243,7 +4270,7 @@ img:hover {
background: url(../public/images/sign-up-exp-bg-m.webp) no-repeat;
background-size: 100%;
object-fit: cover;
padding: 1rem;
padding: 2rem 1rem;
color: #fff;
}
......
yarn.lock
......@@ -352,11 +352,6 @@
resolved "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.2.5.tgz"
integrity sha512-0szyAo8jMCClkjNK0hknjhmAngUppoRekW6OAezbEYwHXN/VNtsXbfzgYOqjKWxEx3OoAzrT3jLwAF0HdX2MEw==
"@next/swc-linux-x64-musl@12.2.5":
version "12.2.5"
resolved "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.2.5.tgz"
integrity sha512-zg/Y6oBar1yVnW6Il1I/08/2ukWtOG6s3acdJdEyIdsCzyQi4RLxbbhkD/EGQyhqBvd3QrC6ZXQEXighQUAZ0g==
"@nodelib/fs.scandir@2.1.5":
version "2.1.5"
resolved "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz"
......@@ -5665,17 +5660,22 @@ source-map-url@^0.4.0:
resolved "https://registry.npmjs.org/source-map-url/-/source-map-url-0.4.1.tgz"
integrity sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw==
source-map@^0.5.6:
source-map@^0.5.6, source-map@^0.5.7:
version "0.5.7"
resolved "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz"
integrity sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==
source-map@^0.5.7:
version "0.5.7"
resolved "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz"
integrity sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==
source-map@^0.6.0:
version "0.6.1"
resolved "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz"
integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
source-map@^0.6.1:
version "0.6.1"
resolved "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz"
integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
source-map@~0.6.1:
version "0.6.1"
resolved "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz"
integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
......@@ -5986,22 +5986,22 @@ tsconfig-paths@^3.14.1:
minimist "^1.2.6"
strip-bom "^3.0.0"
tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.3:
tslib@^1.10.0:
version "1.14.1"
resolved "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz"
integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
tslib@^2.0.1:
version "2.6.2"
resolved "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz"
integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
tslib@^1.8.1:
version "1.14.1"
resolved "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz"
integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
tslib@^2.4.0:
version "2.4.0"
resolved "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz"
integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
tslib@^1.9.3:
version "1.14.1"
resolved "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz"
integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
tslib@^2.6.2:
tslib@^2.0.1, tslib@^2.4.0, tslib@^2.6.2:
version "2.6.2"
resolved "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz"
integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!