Skip to content

Jay Mehta / zango-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 5d70984e by Ravindra Kanojiya
Options

updated ui

1 parent d53a7dc4
Inline Side-by-side
Showing 14 changed files with 576 additions and 495 deletions
components/blog-details/MostReadBlogs.js
...@@ -12,6 +12,7 @@ import "swiper/css/pagination"; ...@@ -12,6 +12,7 @@ import "swiper/css/pagination";
import "swiper/css/navigation"; import "swiper/css/navigation";
import { BlogData } from "../blog/BlogItem.js"; import { BlogData } from "../blog/BlogItem.js";
import Image from "next/image.js"; import Image from "next/image.js";
import ActiveLink from "../common/ActiveLink.js";
const MostReadBlogs = () => { const MostReadBlogs = () => {
return ( return (
<section className="most-read-blogs-session"> <section className="most-read-blogs-session">
...@@ -26,7 +27,8 @@ const MostReadBlogs = () => { ...@@ -26,7 +27,8 @@ const MostReadBlogs = () => {
</div> </div>
</motion.div> </motion.div>
<div className="view-all-btn"> <div className="view-all-btn">
<Button variant="primary">View All</Button> <ActiveLink prefetch href="/blog"><Button variant="primary">View All</Button></ActiveLink>
</div> </div>
</div> </div>
</div> </div>
...@@ -74,7 +76,7 @@ const MostReadBlogs = () => { ...@@ -74,7 +76,7 @@ const MostReadBlogs = () => {
<div className="info"> <div className="info">
<div className="read-row"> <div className="read-row">
<span className="image-container"> <span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/clock.svg" /> <Image priority layout="fill" alt="" className="image img-fluid" src="/images/icons/clock.svg" />
</span> </span>
<div className="">{data.read}</div> <div className="">{data.read}</div>
</div> </div>
......
components/detail/Detail.js
...@@ -109,7 +109,7 @@ const Detail = () => { ...@@ -109,7 +109,7 @@ const Detail = () => {
</div> </div>
)} )}
<GuestReviews activityById={activityById} /> <GuestReviews activityById={activityById} />
<SimilarExperiences allActivitiesData={allActivitiesData} /> <SimilarExperiences allActivitiesData={allActivitiesData} activityById={activityById} />
<Faqs faqs={faqs} /> <Faqs faqs={faqs} />
<SignUpToExperienceOurPlatform /> <SignUpToExperienceOurPlatform />
</main> </main>
......
components/detail/DetailInfo.js
...@@ -20,6 +20,7 @@ import { sanitizeTimeRange } from "../../services/imageHandling"; ...@@ -20,6 +20,7 @@ import { sanitizeTimeRange } from "../../services/imageHandling";
const DetailInfo = ({ activityById }) => { const DetailInfo = ({ activityById }) => {
const router = useRouter(); const router = useRouter();
console.log("activityById >>>>>", activityById)
const dispatch = useDispatch(); const dispatch = useDispatch();
useEffect(() => { useEffect(() => {
dispatch(getCurrentEndUser()); dispatch(getCurrentEndUser());
...@@ -176,7 +177,7 @@ const DetailInfo = ({ activityById }) => { ...@@ -176,7 +177,7 @@ const DetailInfo = ({ activityById }) => {
</Modal.Body> </Modal.Body>
</Modal> </Modal>
{activityById && ( {activityById && (
<Modal <Modal dialogClassName="modal-01-session"
centered centered
show={enquiryModal} show={enquiryModal}
onHide={() => { onHide={() => {
...@@ -186,19 +187,19 @@ const DetailInfo = ({ activityById }) => { ...@@ -186,19 +187,19 @@ const DetailInfo = ({ activityById }) => {
}} }}
> >
<Modal.Header> <Modal.Header>
<h4>Send Enquiry</h4> <h2>Send Enquiry</h2>
</Modal.Header> </Modal.Header>
<Modal.Body> <Modal.Body>
<div>Experience Name:</div> <div>Experience Name:</div>
<div className="" style={{ fontSize: "22px", fontWeight: "bold" }}> <div className="text01">
{activityById.data.attributes.name} {activityById.data.attributes.name}
</div> </div>
<div className="mt-3">Full Name:</div> <div className="mt-3">Full Name:</div>
<div className="" style={{ fontWeight: "bold" }}> <div className="text01">
{endUser?.attributes.name} {endUser?.attributes.name}
</div> </div>
<div className="mt-3">Email ID:</div> <div className="mt-3">Email ID:</div>
<div className="" style={{ fontSize: "22px", fontWeight: "bold" }}> <div className="text01">
{endUser?.attributes.email} {endUser?.attributes.email}
</div> </div>
<div className="row d-flex justify-content-center"> <div className="row d-flex justify-content-center">
......
components/detail/SimilarExperiences.js
...@@ -15,7 +15,8 @@ import { cleanImage } from "../../services/imageHandling.js"; ...@@ -15,7 +15,8 @@ import { cleanImage } from "../../services/imageHandling.js";
import { useRouter } from "next/router.js"; import { useRouter } from "next/router.js";
import WishlistComponent from "./WIshlistComponent.js"; import WishlistComponent from "./WIshlistComponent.js";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
const SimilarExperiences = ({ allActivitiesData }) => { import ActiveLink from "../common/ActiveLink.js";
const SimilarExperiences = ({ allActivitiesData, activityById }) => {
const router = useRouter(); const router = useRouter();
const [listingData, setListingData] = useState([]); const [listingData, setListingData] = useState([]);
const { endUser } = useSelector(state => state.endUser); const { endUser } = useSelector(state => state.endUser);
...@@ -71,7 +72,10 @@ const SimilarExperiences = ({ allActivitiesData }) => { ...@@ -71,7 +72,10 @@ const SimilarExperiences = ({ allActivitiesData }) => {
</div> </div>
</motion.div> </motion.div>
<div className="view-all-btn"> <div className="view-all-btn">
<Button variant="primary">View All</Button> <ActiveLink prefetch href={`/listing?category=${activityById?.data.attributes.category?.data?.id}`}>
<Button variant="primary">View All</Button>
</ActiveLink>
</div> </div>
</div> </div>
</div> </div>
......
components/gift-card/GiftCard.js
...@@ -11,17 +11,20 @@ import { finishVendorOtpVerification } from "../../redux/actions/vendorActions"; ...@@ -11,17 +11,20 @@ import { finishVendorOtpVerification } from "../../redux/actions/vendorActions";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { Button } from "react-bootstrap"; import { Button } from "react-bootstrap";
import { postGiftCard } from "../../redux/actions/giftCardAction"; import { postGiftCard } from "../../redux/actions/giftCardAction";
import TermsAndConditionModel from "../signup/TermsAndConditionModel";
// import { getCurrentEndUser } from "../../redux/actions/userActions"; // import { getCurrentEndUser } from "../../redux/actions/userActions";
const validationSchema = Yup.object().shape({ const validationSchema = Yup.object().shape({
email: Yup.string().email("Invalid email").required("Email is required"), email: Yup.string().email("Invalid email").required("Email is required"),
receiverEmail: Yup.string().email("Invalid email").required("Email is required"), receiverEmail: Yup.string().email("Invalid email").required("Email is required"),
message: Yup.string().required("Message is required") message: Yup.string().required("Message is required"),
termsConditions: Yup.bool().oneOf([true], "Please Accept Terms & Conditions"),
}); });
let formik1; let formik1;
const GiftCard = () => { const GiftCard = () => {
const [isOpenEis, setIsOpenEis] = useState(false);
const router = useRouter(); const router = useRouter();
const dispatch = useDispatch(); const dispatch = useDispatch();
// useEffect(() => { // useEffect(() => {
...@@ -57,394 +60,412 @@ const GiftCard = () => { ...@@ -57,394 +60,412 @@ const GiftCard = () => {
}; };
return ( return (
<section className="gift-card-session"> <>
<div className="container"> <section className="gift-card-session">
<div className="row justify-content-center"> <div className="container">
<div className="col-md-10"> <div className="row justify-content-center">
<div className="see-my-gift-cards-row"> <div className="col-md-10">
<Button <div className="see-my-gift-cards-row">
onClick={() => { <Button
if (!session) { onClick={() => {
toast.warning("Please log in to see your gift cards."); if (!session) {
return; toast.warning("Please log in to see your gift cards.");
} return;
router.push("/user/giftcard"); }
}} router.push("/user/giftcard");
> }}
See my gift cards >
</Button> See my gift cards
</div> </Button>
{!isResult && ( </div>
<div className="row"> {!isResult && (
<div className="col-md-5"> <div className="row">
<div className="gift-card-lt"> <div className="col-md-5">
<div className="gift-box"> <div className="gift-card-lt">
<img src="/images/gift-card.svg" alt="Gift Card" /> <div className="gift-box">
<img src="/images/gift-card.svg" alt="Gift Card" />
</div>
<h3>Amount: ${amount}</h3>
</div> </div>
<h3>Amount: ${amount}</h3>
</div> </div>
</div> <div className="col-md-7">
<div className="col-md-7"> {isStep1 && (
{isStep1 && ( <div className="gift-card-rt">
<div className="gift-card-rt"> {/* <div className="back-btn">
{/* <div className="back-btn">
<a href=""> <a href="">
<span className="image-container"> <span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-left-02.svg" /> <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-left-02.svg" />
</span> </span>
</a> </a>
</div> */} </div> */}
<Formik <Formik
validationSchema={validationSchema} validationSchema={validationSchema}
initialValues={{ initialValues={{
customAmt: "", customAmt: "",
email: "", email: "",
receiverEmail: "", receiverEmail: "",
message: "" message: "",
}} termsConditions: false
enableReinitialize={true} }}
// validationSchema={validationSchema} enableReinitialize={true}
onSubmit={(values, { setSubmitting }) => { // validationSchema={validationSchema}
// Handle form submission here onSubmit={(values, { setSubmitting }) => {
}} // Handle form submission here
> }}
{({ isSubmitting, values, handleChange, handleBlur, touched, errors }) => ( >
<Form action="" className="form-01"> {({ isSubmitting, values, handleChange, handleBlur, touched, errors }) => (
<div className="title">Buy a gift card</div> <Form action="" className="form-01">
<div className="cl-gry">Please select an amount</div> <div className="title">Buy a gift card</div>
<div className="gift-card-amt"> <div className="cl-gry">Please select an amount</div>
<ul> <div className="gift-card-amt">
<li> <ul>
<input <li>
name="amt" <input
id="amt-20" name="amt"
type="radio" id="amt-20"
value="" type="radio"
data-gtm-Form-interact-field-id="1" value=""
onChange={e => { data-gtm-Form-interact-field-id="1"
setAmount(20); onChange={e => {
setcustom(false); setAmount(20);
}} setcustom(false);
/> }}
<label for="amt-20">$20</label> />
</li> <label for="amt-20">$20</label>
<li> </li>
<input <li>
name="amt" <input
id="amt-50" name="amt"
type="radio" id="amt-50"
value="" type="radio"
data-gtm-form-interact-field-id="1" value=""
onChange={e => { data-gtm-form-interact-field-id="1"
setAmount(50); onChange={e => {
setcustom(false); setAmount(50);
}} setcustom(false);
/> }}
<label for="amt-50">$50</label> />
</li> <label for="amt-50">$50</label>
<li> </li>
<input <li>
name="amt" <input
id="amt-100" name="amt"
type="radio" id="amt-100"
value="" type="radio"
data-gtm-form-interact-field-id="1" value=""
onChange={e => { data-gtm-form-interact-field-id="1"
setAmount(100); onChange={e => {
setcustom(false); setAmount(100);
}} setcustom(false);
/> }}
<label for="amt-100"> />
<span>Most Popular</span> <label for="amt-100">
<br /> $100 <span>Most Popular</span>
</label> <br /> $100
</li> </label>
<li> </li>
<input <li>
name="amt" <input
id="amt-250" name="amt"
type="radio" id="amt-250"
value="" type="radio"
data-gtm-form-interact-field-id="1" value=""
onChange={e => { data-gtm-form-interact-field-id="1"
setAmount(250); onChange={e => {
setcustom(false); setAmount(250);
}} setcustom(false);
/> }}
<label for="amt-250"> $250</label> />
</li> <label for="amt-250"> $250</label>
<li> </li>
<input <li>
name="amt" <input
id="amt-500" name="amt"
type="radio" id="amt-500"
value="" type="radio"
data-gtm-form-interact-field-id="1" value=""
onChange={e => { data-gtm-form-interact-field-id="1"
setAmount(500); onChange={e => {
setcustom(false); setAmount(500);
}} setcustom(false);
/> }}
<label for="amt-500"> $500</label> />
</li> <label for="amt-500"> $500</label>
<li> </li>
<input <li>
name="amt" <input
id="amt-custom" name="amt"
type="radio" id="amt-custom"
value="" type="radio"
data-gtm-form-interact-field-id="1" value=""
onChange={e => { data-gtm-form-interact-field-id="1"
setcustom(true); onChange={e => {
setAmount(null); setcustom(true);
}} setAmount(null);
/> }}
<label for="amt-custom"> $ Custom</label> />
</li> <label for="amt-custom"> $ Custom</label>
</ul> </li>
</div> </ul>
<div className="row"> </div>
{custom && ( <div className="row">
{custom && (
<div className="col-md-12 mb-4">
<label htmlFor="">Custom Amount</label>
<Field
className="form-control"
type="number"
name="customAmt"
placeholder="Enter your amount"
onChange={e => {
setAmount(e.target.value);
}}
onBlur={handleBlur}
value={amount}
/>
{touched.customAmt && errors.customAmt && <div className="text-danger">{errors.customAmt}</div>}
</div>
)}
<div className="col-md-12 mb-4"> <div className="col-md-12 mb-4">
<label htmlFor="">Custom Amount</label> <label htmlFor="">Email Id</label>
<Field <Field
className="form-control" className="form-control"
type="number" type="email"
name="customAmt" name="email"
placeholder="Enter your amount" placeholder="yourname@example.com"
onChange={e => { onChange={handleChange}
setAmount(e.target.value);
}}
onBlur={handleBlur} onBlur={handleBlur}
value={amount} value={values.email}
/> />
{touched.customAmt && errors.customAmt && <div className="text-danger">{errors.customAmt}</div>} {touched.email && errors.email && <div className="text-danger">{errors.email}</div>}
</div> <div className="tooltip-wrapper">
)} <a className="tooltip-btn" onMouseEnter={() => setShowTooltip1(true)} onMouseLeave={() => setShowTooltip1(false)}>
<div className="col-md-12 mb-4"> <span className="image-container">
<label htmlFor="">Email Id</label> <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/info.svg" />
<Field </span>
className="form-control" </a>
type="email"
name="email"
placeholder="yourname@example.com"
onChange={handleChange}
onBlur={handleBlur}
value={values.email}
/>
{touched.email && errors.email && <div className="text-danger">{errors.email}</div>}
<div className="tooltip-wrapper">
<a className="tooltip-btn" onMouseEnter={() => setShowTooltip1(true)} onMouseLeave={() => setShowTooltip1(false)}>
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/info.svg" />
</span>
</a>
{/* Tooltip */} {/* Tooltip */}
{showTooltip1 && <div className="tooltips">{tooltipText1}</div>} {showTooltip1 && <div className="tooltips">{tooltipText1}</div>}
</div>
</div> </div>
</div>
<div className="col-md-12 mb-4"> <div className="col-md-12 mb-4">
<label htmlFor="">Receiver’s Email Id</label> <label htmlFor="">Receiver’s Email Id</label>
<Field <Field
className="form-control" className="form-control"
type="receiverEmail" type="receiverEmail"
name="receiverEmail" name="receiverEmail"
placeholder="yourname@example.com" placeholder="yourname@example.com"
onChange={handleChange} onChange={handleChange}
onBlur={handleBlur} onBlur={handleBlur}
value={values.receiverEmail} value={values.receiverEmail}
/> />
{touched.receiverEmail && errors.receiverEmail && <div className="text-danger">{errors.receiverEmail}</div>} {touched.receiverEmail && errors.receiverEmail && <div className="text-danger">{errors.receiverEmail}</div>}
<div className="tooltip-wrapper"> <div className="tooltip-wrapper">
<a className="tooltip-btn" onMouseEnter={() => setShowTooltip2(true)} onMouseLeave={() => setShowTooltip2(false)}> <a className="tooltip-btn" onMouseEnter={() => setShowTooltip2(true)} onMouseLeave={() => setShowTooltip2(false)}>
<span className="image-container"> <span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/info.svg" /> <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/info.svg" />
</span> </span>
</a> </a>
{showTooltip2 && <div className="tooltips">{tooltipText2}</div>} {showTooltip2 && <div className="tooltips">{tooltipText2}</div>}
</div>
</div> </div>
</div>
<div className="col-md-12 mb-4"> <div className="col-md-12 mb-4">
<Field <Field
className="form-control" className="form-control"
as="textarea" as="textarea"
rows={7} rows={7}
name="message" name="message"
placeholder="Type your message..." placeholder="Type your message..."
onChange={handleChange} onChange={handleChange}
onBlur={handleBlur} onBlur={handleBlur}
value={values.message} value={values.message}
/> />
{touched.message && errors.message && <div className="text-danger">{errors.message}</div>} {touched.message && errors.message && <div className="text-danger">{errors.message}</div>}
</div> </div>
<div className="col-md-12 mb-3"> <div className="col-md-12 mb-3">
<button <button
className="btn btn-primary w-100" className="btn btn-primary w-100"
onClick={async () => { onClick={async () => {
setloading(true); setloading(true);
if (!session) { if (!session) {
toast.warning("Please log in to buy a gift card."); toast.warning("Please log in to buy a gift card.");
return; return;
}
const config = {
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${session.jwt}`
}
};
const data = {
data: {
userId: session.id
} }
}; const config = {
const response = await axios.post(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/end-user/verify-gift-card-otp`, data, config); headers: {
setvalues({ ...values, amount }); "Content-Type": "application/json",
console.log("response", response.data); Authorization: `Bearer ${session.jwt}`
setloading(false); }
console.log(values); };
setIsStep2(true); const data = {
setIsStep1(false); data: {
}} userId: session.id
disabled={!amount > 0 || !values.receiverEmail || !values.email || errors.email || errors.receiverEmail || errors.message} }
> };
{loading ? <Loader /> : "Continue"} const response = await axios.post(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/end-user/verify-gift-card-otp`, data, config);
</button> setvalues({ ...values, amount });
</div> console.log("response", response.data);
<div className="col-12"> setloading(false);
<p> console.log(values);
By continuing you agree to our <a href="/terms-and-conditions">Terms</a> and <a href="/privacy-policy">Privacy Policy</a> setIsStep2(true);
</p> setIsStep1(false);
}}
disabled={!amount > 0 || !values.receiverEmail || !values.email || errors.email || errors.receiverEmail || errors.message}
>
{loading ? <Loader /> : "Continue"}
</button>
</div>
<div className="col-12">
<label className="check-container mb-0 pt-1 d-flex mb-2" htmlFor="termsConditions">
<input
type="checkbox"
id="termsConditions"
name="termsConditions"
className="check-box me-2"
checked={values.termsConditions}
onChange={handleChange}
onBlur={handleBlur}
/>
<span className="checkmark"></span>
{/* By continuing you agree to our <a className="cl-blue" onClick={() => { setIsOpenEis(true) }}>terms & conditions*</a> */}
<p>
By continuing you agree to our <a className="cl-blue" onClick={() => { setIsOpenEis(true) }}>Terms</a> and <a href="/privacy-policy">Privacy Policy</a>
</p>
</label>
{errors.termsConditions && touched.termsConditions && <span className="form-error pl-5">{errors.termsConditions}</span>}
</div>
</div> </div>
</div> </Form>
</Form> )}
)} </Formik>
</Formik> </div>
</div> )}
)}
{isStep2 && ( {isStep2 && (
<div className="gift-card-rt"> <div className="gift-card-rt">
{/* <div className="back-btn"> {/* <div className="back-btn">
<a href=""> <a href="">
<span className="image-container"> <span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-left-02.svg" /> <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-left-02.svg" />
</span> </span>
</a> </a>
</div> */} </div> */}
<Formik <Formik
initialValues={{ initialValues={{
code: "" code: ""
}} }}
// validationSchema={validationSchema} // validationSchema={validationSchema}
onSubmit={(values, { setSubmitting }) => { onSubmit={(values, { setSubmitting }) => {
// Handle form submission here // Handle form submission here
console.log(values); console.log(values);
setSubmitting(false); setSubmitting(false);
}} }}
> >
{({ isSubmitting, values, handleChange, handleBlur, touched, errors }) => ( {({ isSubmitting, values, handleChange, handleBlur, touched, errors }) => (
<Form action="" className="form-01"> <Form action="" className="form-01">
<div className="title">We emailed you a 4-digit code</div> <div className="title">We emailed you a 4-digit code</div>
{/* <div className="cl-gry">Please enter it below to create or login into your account:</div> */} {/* <div className="cl-gry">Please enter it below to create or login into your account:</div> */}
{/* {console.log("values", form1Values)} */} {/* {console.log("values", form1Values)} */}
<div className="row mt-4"> <div className="row mt-4">
<div className="col-md-12 mb-4"> <div className="col-md-12 mb-4">
<label htmlFor="">Enter 4-Digit Code</label> <label htmlFor="">Enter 4-Digit Code</label>
<Field <Field
className="form-control" className="form-control"
type="number" type="number"
name="code" name="code"
placeholder="Enter the code we emailed you" placeholder="Enter the code we emailed you"
onChange={handleChange} onChange={handleChange}
onBlur={handleBlur} onBlur={handleBlur}
value={values.code} value={values.code}
/> />
{touched.code && errors.code && <div className="text-danger">{errors.code}</div>} {touched.code && errors.code && <div className="text-danger">{errors.code}</div>}
{/* <div className="link-a"> {/* <div className="link-a">
<a href="">Resend Code</a> <a href="">Resend Code</a>
</div> */} </div> */}
</div>
</div> </div>
</div> <div className="row">
<div className="row"> <div className="col-md-12 mb-3">
<div className="col-md-12 mb-3"> <button
<button className="btn btn-primary w-100"
className="btn btn-primary w-100" onClick={async () => {
onClick={async () => { const res = await await finishVendorOtpVerification({ email: session.user.email, oneTimePassword: values.code });
const res = await await finishVendorOtpVerification({ email: session.user.email, oneTimePassword: values.code }); console.log("res", res.data);
console.log("res", res.data); if (!res.data.ok) {
if (!res.data.ok) { toast.error(res.data.message);
toast.error(res.data.message); // console.log("here");
// console.log("here"); return;
return; }
}
if (res.data.ok) { if (res.data.ok) {
const response = await postGiftCard({ const response = await postGiftCard({
data: { data: {
senderEmail: form1Values.email, senderEmail: form1Values.email,
senderName: form1Values.email, senderName: form1Values.email,
receiverEmail: form1Values.receiverEmail, receiverEmail: form1Values.receiverEmail,
receiverName: form1Values.receiverEmail, receiverName: form1Values.receiverEmail,
amount: form1Values.amount, amount: form1Values.amount,
note: form1Values.message, note: form1Values.message,
endUser: endUser.id, endUser: endUser.id,
status: "new" status: "new"
} }
}); });
console.log("response", response); console.log("response", response);
setIsStep2(false); setIsStep2(false);
setIsStep1(false); setIsStep1(false);
setIsResult(true); setIsResult(true);
toast.success("OTP verified!"); toast.success("OTP verified!");
} }
}} }}
disabled={!values.code || String(values.code).length < 4} disabled={!values.code || String(values.code).length < 4}
> >
Confirm Confirm
</button> </button>
</div>
</div> </div>
</div> </Form>
</Form> )}
)} </Formik>
</Formik> </div>
</div> )}
)} </div>
</div> </div>
</div> )}
)}
{isResult && ( {isResult && (
<div className="row"> <div className="row">
<div className="col-12"> <div className="col-12">
<div className="result-box"> <div className="result-box">
<p> <p>
Gift card sent for approval, please wait till the vendor contacts you Gift card sent for approval, please wait till the vendor contacts you
<br /> Thank you. <br /> Thank you.
</p> </p>
<div> <div>
<button <button
className="btn btn-primary" className="btn btn-primary"
type="button" type="button"
onClick={() => { onClick={() => {
router.push("/listing"); router.push("/listing");
}} }}
> >
Browse Experiences Browse Experiences
</button> </button>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> )}
)} </div>
</div> </div>
</div> </div>
</div> </section>
</section> <TermsAndConditionModel isOpenEis={isOpenEis} setIsOpenEis={setIsOpenEis} />
</>
); );
}; };
......
components/home/BrowseExperiences.js
...@@ -18,6 +18,8 @@ import { useSelector } from "react-redux"; ...@@ -18,6 +18,8 @@ import { useSelector } from "react-redux";
import Link from "next/link.js"; import Link from "next/link.js";
import ActiveLink from "../common/ActiveLink.js"; import ActiveLink from "../common/ActiveLink.js";
const BrowseExperiences = ({ allActivitiesData }) => { const BrowseExperiences = ({ allActivitiesData }) => {
console.log("allActivitiesData>>>>>>", allActivitiesData);
const { endUser } = useSelector(state => state.endUser); const { endUser } = useSelector(state => state.endUser);
const calculateRating = data => { const calculateRating = data => {
let value = 0; let value = 0;
...@@ -108,7 +110,7 @@ const BrowseExperiences = ({ allActivitiesData }) => { ...@@ -108,7 +110,7 @@ const BrowseExperiences = ({ allActivitiesData }) => {
{/* {console.log(">>", calculateRating(data?.attributes?.reviews.data))} */} {/* {console.log(">>", calculateRating(data?.attributes?.reviews.data))} */}
{<span className="number">{calculateRating(data?.attributes?.reviews.data)}</span>} {<span className="number">{calculateRating(data?.attributes?.reviews.data)}</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="" priority className="image img-fluid" src="/images/icons/star.svg" />
</span> </span>
</div> </div>
)} )}
...@@ -133,11 +135,24 @@ const BrowseExperiences = ({ allActivitiesData }) => { ...@@ -133,11 +135,24 @@ const BrowseExperiences = ({ allActivitiesData }) => {
// onClick={() => { // onClick={() => {
// router.push(`/activities/${data.id}`); // router.push(`/activities/${data.id}`);
// }} // }}
variant="primary" variant="primary me-2"
> >
Explore Now Explore Now
</Button> </Button>
</ActiveLink> </ActiveLink>
{data?.attributes.link && (
<Button
// disabled={loading}
onClick={() => {
window.open(data?.attributes?.link, "_blank", "noopener,noreferrer");
}}
variant="primary"
>
Book Now
</Button>
)}
</div> </div>
</div> </div>
</div> </div>
......
components/listing/ListingItems.js
...@@ -194,10 +194,21 @@ const ListingItems = ({ allActivitiesData, loading, gridClass, totalCount }) => ...@@ -194,10 +194,21 @@ const ListingItems = ({ allActivitiesData, loading, gridClass, totalCount }) =>
onClick={() => { onClick={() => {
router.push(`/activities/${data.id}`); router.push(`/activities/${data.id}`);
}} }}
variant="primary" variant="primary me-2"
> >
Explore Now Explore Now
</Button> </Button>
{data?.attributes.link && (
<Button
// disabled={loading}
onClick={() => {
window.open(data?.attributes?.link, "_blank", "noopener,noreferrer");
}}
variant="primary"
>
Book Now
</Button>
)}
</div> </div>
</div> </div>
</div> </div>
......
components/signup/Signup.js
...@@ -270,7 +270,7 @@ const Signup = props => { ...@@ -270,7 +270,7 @@ const Signup = props => {
onChange={handleChange} onChange={handleChange}
onBlur={handleBlur} onBlur={handleBlur}
/> />
<span className="checkmark"></span>I Agree to the <a onClick={() => { setIsOpenEis(true) }}>terms & conditions*</a> <span className="checkmark"></span>I Agree to the <a className="cl-blue" onClick={() => { setIsOpenEis(true) }}>terms & conditions*</a>
</label> </label>
<br /> <br />
......
components/vendor/ActivityDetails.js
...@@ -457,7 +457,7 @@ const ActivityDetails = ({ isUpdate }) => { ...@@ -457,7 +457,7 @@ const ActivityDetails = ({ isUpdate }) => {
<div className="col-12 col-lg-6"> <div className="col-12 col-lg-6">
<div className="input-group"> <div className="input-group">
<label>Location</label> <label>Location</label>
<AsyncTypeahead <AsyncTypeahead className="w-100"
type="number" type="number"
onSearch={handleSearch} onSearch={handleSearch}
minLength={3} minLength={3}
...@@ -521,45 +521,37 @@ const ActivityDetails = ({ isUpdate }) => { ...@@ -521,45 +521,37 @@ const ActivityDetails = ({ isUpdate }) => {
<div className="col-12 col-lg-6"> <div className="col-12 col-lg-6">
<div className="input-group mb-2"> <div className="input-group mb-2">
<label>Gifting to Someone</label> <label>Gifting to Someone</label>
<div className="row"> <select id="giftingToSomeone" name="giftingToSomeone" value={values.giftingToSomeone} onChange={handleChange} onBlur={handleBlur}>
<div className="col-12 col-lg-12"> {" "}
<select id="giftingToSomeone" name="giftingToSomeone" value={values.giftingToSomeone} onChange={handleChange} onBlur={handleBlur}> Gift someone
{" "} <option value="">Select</option>
Gift someone <option value={true}>Yes</option>
<option value="">Select</option> <option value={false}>No</option>
<option value={true}>Yes</option> </select>
<option value={false}>No</option> {touched.giftingToSomeone && errors.giftingToSomeone && (
</select> <span className="form-error" style={{ color: "red", fontSize: "10px" }}>
</div> {errors.giftingToSomeone}
{touched.giftingToSomeone && errors.giftingToSomeone && ( </span>
<span className="form-error" style={{ color: "red", fontSize: "10px" }}> )}
{errors.giftingToSomeone}
</span>
)}
</div>
</div> </div>
</div> </div>
<div className="col-12 col-lg-6"> <div className="col-12 col-lg-6">
<div className="input-group mb-2"> <div className="input-group mb-2">
<label>Activity Type</label> <label>Activity Type</label>
<div className="row"> <select id="activityType" name="activityType" onChange={handleChange} onBlur={handleBlur} value={values.activityType}>
<div className=""> {" "}
<div className="col-12 col-lg-12"> Activity Type
<select id="activityType" name="activityType" onChange={handleChange} onBlur={handleBlur} value={values.activityType}> <option value="">Select</option>
{" "} <option value={"indoor"}>Indoor</option>
Activity Type <option value={"outdoor"}>Outdoor</option>
<option value="">Select</option> </select>
<option value={"indoor"}>Indoor</option> {touched.activityType && errors.activityType && (
<option value={"outdoor"}>Outdoor</option> <span className="form-error" style={{ color: "red", fontSize: "10px" }}>
</select> {errors.activityType}
</div> </span>
{touched.activityType && errors.activityType && ( )}
<span className="form-error" style={{ color: "red", fontSize: "10px" }}>
{errors.activityType}
</span>
)}
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -583,7 +575,7 @@ const ActivityDetails = ({ isUpdate }) => { ...@@ -583,7 +575,7 @@ const ActivityDetails = ({ isUpdate }) => {
<div className="input-group"> <div className="input-group">
<label>Size of the Group</label> <label>Size of the Group</label>
<div className="row"> <div className="row">
<div className="col-6 col-lg-5"> <div className="col-6 col-lg-5 p-0 pe-3">
<input type="text" placeholder="Min." name={`minGroupSize`} onChange={handleChange} onBlur={handleBlur} value={values.minGroupSize} /> <input type="text" placeholder="Min." name={`minGroupSize`} onChange={handleChange} onBlur={handleBlur} value={values.minGroupSize} />
{touched.minGroupSize && errors.minGroupSize && ( {touched.minGroupSize && errors.minGroupSize && (
<span className="form-error" style={{ color: "red", fontSize: "10px" }}> <span className="form-error" style={{ color: "red", fontSize: "10px" }}>
...@@ -591,7 +583,7 @@ const ActivityDetails = ({ isUpdate }) => { ...@@ -591,7 +583,7 @@ const ActivityDetails = ({ isUpdate }) => {
</span> </span>
)} )}
</div> </div>
<div className="col-6 col-lg-5"> <div className="col-6 col-lg-5 p-0 pe-3">
<input type="text" placeholder="Max." name={`maxGroupSize`} onChange={handleChange} onBlur={handleBlur} value={values.maxGroupSize} /> <input type="text" placeholder="Max." name={`maxGroupSize`} onChange={handleChange} onBlur={handleBlur} value={values.maxGroupSize} />
{touched.maxGroupSize && errors.maxGroupSize && ( {touched.maxGroupSize && errors.maxGroupSize && (
<span className="form-error" style={{ color: "red", fontSize: "10px" }}> <span className="form-error" style={{ color: "red", fontSize: "10px" }}>
...@@ -664,7 +656,7 @@ const ActivityDetails = ({ isUpdate }) => { ...@@ -664,7 +656,7 @@ const ActivityDetails = ({ isUpdate }) => {
<span className="col-md-6">Select all:</span> <span className="col-md-6">Select all:</span>
<Switch <Switch
// style={{ backgroundColor: "green" }} // style={{ backgroundColor: "green" }}
className="col-md-4" className="col-md-4 active-on-day"
value={ value={
daysBoolean.availableOnMonday && daysBoolean.availableOnMonday &&
daysBoolean.availableOnTuesday && daysBoolean.availableOnTuesday &&
...@@ -698,7 +690,7 @@ const ActivityDetails = ({ isUpdate }) => { ...@@ -698,7 +690,7 @@ const ActivityDetails = ({ isUpdate }) => {
<div className="d-flex"> <div className="d-flex">
<span className="col-md-6">Monday:</span> <span className="col-md-6">Monday:</span>
<Switch <Switch
className="col-md-4" className="col-md-4 active-on-day"
value={daysBoolean.availableOnMonday} value={daysBoolean.availableOnMonday}
id={"availableOnMonday"} id={"availableOnMonday"}
name="availableOnMonday" name="availableOnMonday"
...@@ -715,7 +707,7 @@ const ActivityDetails = ({ isUpdate }) => { ...@@ -715,7 +707,7 @@ const ActivityDetails = ({ isUpdate }) => {
<div className="d-flex"> <div className="d-flex">
<span className="col-md-6">Tuesday:</span> <span className="col-md-6">Tuesday:</span>
<Switch <Switch
className="col-md-4" className="col-md-4 active-on-day"
value={daysBoolean.availableOnTuesday} value={daysBoolean.availableOnTuesday}
onChange={e => { onChange={e => {
setDaysBoolean({ ...daysBoolean, availableOnTuesday: e === true ? true : false }); setDaysBoolean({ ...daysBoolean, availableOnTuesday: e === true ? true : false });
...@@ -732,7 +724,7 @@ const ActivityDetails = ({ isUpdate }) => { ...@@ -732,7 +724,7 @@ const ActivityDetails = ({ isUpdate }) => {
<div className="d-flex"> <div className="d-flex">
<span className="col-md-6">Wednesday:</span> <span className="col-md-6">Wednesday:</span>
<Switch <Switch
className="col-md-4" className="col-md-4 active-on-day"
value={daysBoolean.availableOnWednesday} value={daysBoolean.availableOnWednesday}
id={"availableOnWednesday"} id={"availableOnWednesday"}
// onChange={handleChange} // onChange={handleChange}
...@@ -749,7 +741,7 @@ const ActivityDetails = ({ isUpdate }) => { ...@@ -749,7 +741,7 @@ const ActivityDetails = ({ isUpdate }) => {
<div className="d-flex"> <div className="d-flex">
<span className="col-md-6">Thursday:</span> <span className="col-md-6">Thursday:</span>
<Switch <Switch
className="col-md-4" className="col-md-4 active-on-day"
value={daysBoolean.availableOnThursday} value={daysBoolean.availableOnThursday}
id={"availableOnThursday"} id={"availableOnThursday"}
onChange={e => { onChange={e => {
...@@ -765,7 +757,7 @@ const ActivityDetails = ({ isUpdate }) => { ...@@ -765,7 +757,7 @@ const ActivityDetails = ({ isUpdate }) => {
<div className="d-flex"> <div className="d-flex">
<span className="col-md-6">Friday:</span> <span className="col-md-6">Friday:</span>
<Switch <Switch
className="col-md-4" className="col-md-4 active-on-day"
value={daysBoolean.availableOnFriday} value={daysBoolean.availableOnFriday}
id={"availableOnFriday"} id={"availableOnFriday"}
onChange={e => { onChange={e => {
...@@ -781,7 +773,7 @@ const ActivityDetails = ({ isUpdate }) => { ...@@ -781,7 +773,7 @@ const ActivityDetails = ({ isUpdate }) => {
<div className="d-flex"> <div className="d-flex">
<span className="col-md-6">Saturday:</span> <span className="col-md-6">Saturday:</span>
<Switch <Switch
className="col-md-4" className="col-md-4 active-on-day"
value={daysBoolean.availableOnSaturday} value={daysBoolean.availableOnSaturday}
id={"availableOnSaturday"} id={"availableOnSaturday"}
onChange={e => { onChange={e => {
...@@ -797,7 +789,7 @@ const ActivityDetails = ({ isUpdate }) => { ...@@ -797,7 +789,7 @@ const ActivityDetails = ({ isUpdate }) => {
<div className="d-flex"> <div className="d-flex">
<span className="col-md-6">Sunday:</span> <span className="col-md-6">Sunday:</span>
<Switch <Switch
className="col-md-4" className="col-md-4 active-on-day"
value={daysBoolean.availableOnSunday} value={daysBoolean.availableOnSunday}
id={"availableOnSunday"} id={"availableOnSunday"}
onChange={e => { onChange={e => {
...@@ -983,7 +975,7 @@ const ActivityDetails = ({ isUpdate }) => { ...@@ -983,7 +975,7 @@ const ActivityDetails = ({ isUpdate }) => {
<p className="textH">Add display image</p> <p className="textH">Add display image</p>
{/* {console.log(displayImage)} */} {/* {console.log(displayImage)} */}
<UploadImageCustom isUpdate={isUpdate} setImage={setdisplayImage} populatedImages={activityById?.data.attributes.image} /> <UploadImageCustom isUpdate={isUpdate} setImage={setdisplayImage} populatedImages={activityById?.data.attributes.image} />
<hr /> <hr className="mt-4" />
</div> </div>
<div className="row d-flex "> <div className="row d-flex ">
<p className="textH">Add other images</p> <p className="textH">Add other images</p>
...@@ -1040,7 +1032,7 @@ const ActivityDetails = ({ isUpdate }) => { ...@@ -1040,7 +1032,7 @@ const ActivityDetails = ({ isUpdate }) => {
<br /> <br />
<br /> <br />
<br /> <br />
<br />
<> <>
{/* <button {/* <button
onClick={e => { onClick={e => {
...@@ -1109,7 +1101,7 @@ const ActivityDetails = ({ isUpdate }) => { ...@@ -1109,7 +1101,7 @@ const ActivityDetails = ({ isUpdate }) => {
</li> </li>
<li> <li>
<img src="/images/vendor/call.svg" className="img-fluid" /> <img src="/images/vendor/call.svg" className="img-fluid" />
<p>+1 (407) 8798 789</p> <p className="number">+1 (407) 8798 789</p>
</li> </li>
</ul> </ul>
</div> </div>
......
components/vendor/BusinessDetails.js
...@@ -89,7 +89,7 @@ const BusinessDetails = () => { ...@@ -89,7 +89,7 @@ const BusinessDetails = () => {
useEffect(() => { useEffect(() => {
setbrandLogo(vendorDetails?.attributes.brandLogo.data?.id) setbrandLogo(vendorDetails?.attributes.brandLogo.data?.id)
}, []) }, [])
const ApprovalStatus = () => { const ApprovalStatus = () => {
if (loadedUser) { if (loadedUser) {
switch (loadedUser.approved) { switch (loadedUser.approved) {
...@@ -212,7 +212,7 @@ const BusinessDetails = () => { ...@@ -212,7 +212,7 @@ const BusinessDetails = () => {
</div> </div>
</div> </div>
<div className="col-12 col-lg-5"> <div className="col-12 col-lg-5">
<div className="input-group"> <div className="input-group align-items-center">
<label>Brand Logo</label> <label>Brand Logo</label>
{/* <div className="custom-file"> {/* <div className="custom-file">
<input <input
...@@ -230,7 +230,7 @@ const BusinessDetails = () => { ...@@ -230,7 +230,7 @@ const BusinessDetails = () => {
</label> </label>
</div> */} </div> */}
<UploadImageCustom disabled={disableFields} setImage={setbrandLogo} isPdf={false} populatedImages={vendorDetails?.attributes.brandLogo} /> <UploadImageCustom disabled={disableFields} setImage={setbrandLogo} isPdf={false} populatedImages={vendorDetails?.attributes.brandLogo} />
<p className="textS">Upload in .PNG or .JPG/JPEG format</p> <p className="textS pe-5 pt-2">Upload in .PNG or .JPG/JPEG format</p>
{errors.brandLogoFile && touched.brandLogoFile && <span className="form-error">{errors.brandLogoFile}</span>} {errors.brandLogoFile && touched.brandLogoFile && <span className="form-error">{errors.brandLogoFile}</span>}
</div> </div>
</div> </div>
...@@ -359,7 +359,7 @@ const BusinessDetails = () => { ...@@ -359,7 +359,7 @@ const BusinessDetails = () => {
</li> </li>
<li> <li>
<Image alt="" src="/images/vendor/call.svg" width="32" height="32" /> <Image alt="" src="/images/vendor/call.svg" width="32" height="32" />
<p>+1 (407) 8798 789</p> <p className="number">+1 (407) 8798 789</p>
</li> </li>
</ul> </ul>
</div> </div>
......
components/vendor/OrderListing.js
...@@ -143,18 +143,18 @@ const OrderListing = () => { ...@@ -143,18 +143,18 @@ const OrderListing = () => {
<div className="col-12 col-lg-12"> <div className="col-12 col-lg-12">
<div className="rightContent"> <div className="rightContent">
<div className="d-flex align-items-center justify-content-between px-2 mb-2"> */} <div className="d-flex align-items-center justify-content-between px-2 mb-2"> */}
<div className="mb-3"> <div className="mb-3 d-flex align-items-center justify-content-between">
<h2 style={{fontSize: 28}}>Orders</h2> <h2 style={{ fontSize: 28 }}>Orders</h2>
<p>View all the orders</p> <p><a href="">View all the orders</a></p>
</div> </div>
{/* <div> {/* <div>
<Button type="button" variant="" className="btnAdd m-0"> <Button type="button" variant="" className="btnAdd m-0">
<Image alt="" width="16" height="16" src="/images/vendor/icon-filter.svg" className="me-2" /> Filter <Image alt="" width="16" height="16" src="/images/vendor/icon-filter.svg" className="me-2" /> Filter
</Button> </Button>
</div> </div>
</div> */} </div> */}
<Table columns={columns} dataSource={data} onChange={onChange} /> <Table columns={columns} dataSource={data} onChange={onChange} />
{/* </div> {/* </div>
</div> </div>
</div> */} </div> */}
<Modal <Modal
......
components/vendor/UpdateActivity.js
...@@ -217,7 +217,7 @@ const UpdateActivity = () => { ...@@ -217,7 +217,7 @@ const UpdateActivity = () => {
}} }}
validationSchema={activityDetailsValidationSchema} validationSchema={activityDetailsValidationSchema}
// enableReinitialize={true} // enableReinitialize={true}
onSubmit={values => {}} onSubmit={values => { }}
> >
{({ values, errors, touched, handleChange, handleBlur, handleSubmit, setFieldValue, resetForm }) => ( {({ values, errors, touched, handleChange, handleBlur, handleSubmit, setFieldValue, resetForm }) => (
<Form <Form
...@@ -558,7 +558,7 @@ const UpdateActivity = () => { ...@@ -558,7 +558,7 @@ const UpdateActivity = () => {
setMonths(e); setMonths(e);
}} }}
options={monthsArray} options={monthsArray}
// value={values.months} // value={values.months}
/> />
{/* {touched.months && errors.months && ( {/* {touched.months && errors.months && (
<span className="form-error" style={{ color: "red", fontSize: "10px" }}> <span className="form-error" style={{ color: "red", fontSize: "10px" }}>
...@@ -1053,7 +1053,7 @@ const UpdateActivity = () => { ...@@ -1053,7 +1053,7 @@ const UpdateActivity = () => {
</li> </li>
<li> <li>
<img src="/images/vendor/call.svg" className="img-fluid" /> <img src="/images/vendor/call.svg" className="img-fluid" />
<p>+1 (407) 8798 789</p> <p className="number">+1 (407) 8798 789 asdasd</p>
</li> </li>
</ul> </ul>
</div> </div>
......
pages/index.js
import Home from "../components/home/Home"; import Home from "../components/home/Home";
import Layout from "../components/layout/Layout"; import Layout from "../components/layout/Layout";
import { getActivitiesByVendor, getActivitiesForEndUser } from "../redux/actions/activityAction"; import { getActivitiesByVendor, getActivitiesForEndUser, getActivityById } from "../redux/actions/activityAction";
import { getAllCategories } from "../redux/actions/categoriesAction"; import { getAllCategories } from "../redux/actions/categoriesAction";
import { getHomeBanner } from "../redux/actions/homeBannerAction"; import { getHomeBanner } from "../redux/actions/homeBannerAction";
import { getTestimonial } from "../redux/actions/testimonialAction"; import { getTestimonial } from "../redux/actions/testimonialAction";
...@@ -32,18 +32,19 @@ export const getServerSideProps = wrapper.getServerSideProps(store => async ({ r ...@@ -32,18 +32,19 @@ export const getServerSideProps = wrapper.getServerSideProps(store => async ({ r
await store.dispatch(getTestimonial()) await store.dispatch(getTestimonial())
await store.dispatch(getActivitiesForEndUser()) await store.dispatch(getActivitiesForEndUser())
await store.dispatch(getHomeBanner()) await store.dispatch(getHomeBanner())
await store.dispatch(getActivityById())
return { return {
props: {}, props: {},
// Next.js will attempt to re-generate the page: // Next.js will attempt to re-generate the page:
// - Any requests to the page after the initial request and before 10 seconds are also cached and instantaneous. // - Any requests to the page after the initial request and before 10 seconds are also cached and instantaneous.
// - After the 10-second window, the next request will still show the cached (stale) page // - After the 10-second window, the next request will still show the cached (stale) page
// - Next.js triggers a regeneration of the page in the background. // - Next.js triggers a regeneration of the page in the background.
// - Once the page generates successfully, Next.js will invalidate the cache and show the updated page. If the background regeneration fails, the old page would still be unaltered. // - Once the page generates successfully, Next.js will invalidate the cache and show the updated page. If the background regeneration fails, the old page would still be unaltered.
// In seconds // In seconds
// revalidate: Number(process.env.NEXT_PUBLIC_ISR_REVALIDATE_AFTER) // revalidate: Number(process.env.NEXT_PUBLIC_ISR_REVALIDATE_AFTER)
}; };
} catch (error) { } catch (error) {
console.log("index.js", error); console.log("index.js", error);
} }
}); });
styles/globals.css
...@@ -270,12 +270,12 @@ h6 { ...@@ -270,12 +270,12 @@ h6 {
position: relative; position: relative;
} }
.image-container>span { .image-container > span {
position: unset !important; position: unset !important;
/* display: inline-block !important; */ /* display: inline-block !important; */
} }
.image-container.d-inblock>span { .image-container.d-inblock > span {
position: unset !important; position: unset !important;
display: inline-block !important; display: inline-block !important;
} }
...@@ -376,7 +376,7 @@ header { ...@@ -376,7 +376,7 @@ header {
font-size: 0.833vw; font-size: 0.833vw;
} }
.header-search>.form-control { .header-search > .form-control {
font-size: 0.833vw; font-size: 0.833vw;
} }
...@@ -434,16 +434,16 @@ header { ...@@ -434,16 +434,16 @@ header {
border-radius: 0 0 8rem 8rem; border-radius: 0 0 8rem 8rem;
} }
.home-banner-bg>span { .home-banner-bg > span {
height: 100%; height: 100%;
display: block; display: block;
} }
.home-banner-bg>span>span { .home-banner-bg > span > span {
height: 100% !important; height: 100% !important;
} }
.home-banner-bg>span>span .image { .home-banner-bg > span > span .image {
object-fit: cover !important; object-fit: cover !important;
border-radius: 0 0 136px 136px; border-radius: 0 0 136px 136px;
} }
...@@ -509,7 +509,7 @@ header { ...@@ -509,7 +509,7 @@ header {
position: relative; position: relative;
} }
.owl-custom01.owl-carousel .owl-nav button.owl-prev>span { .owl-custom01.owl-carousel .owl-nav button.owl-prev > span {
background: url(/images/icons/arrow-left.svg) no-repeat center; background: url(/images/icons/arrow-left.svg) no-repeat center;
width: 14px; width: 14px;
height: 22px; height: 22px;
...@@ -517,7 +517,7 @@ header { ...@@ -517,7 +517,7 @@ header {
display: block; display: block;
} }
.owl-custom01.owl-carousel .owl-nav button.owl-next>span { .owl-custom01.owl-carousel .owl-nav button.owl-next > span {
background: url(/images/icons/arrow-right.svg) no-repeat center; background: url(/images/icons/arrow-right.svg) no-repeat center;
width: 14px; width: 14px;
height: 22px; height: 22px;
...@@ -749,6 +749,7 @@ span.form-error, ...@@ -749,6 +749,7 @@ span.form-error,
.form-container select { .form-container select {
padding: 12px 5px; padding: 12px 5px;
background-color: transparent; background-color: transparent;
font-family: sans-serif !important;
} }
.form-container textarea { .form-container textarea {
...@@ -872,7 +873,7 @@ span.form-error, ...@@ -872,7 +873,7 @@ span.form-error,
user-select: none; user-select: none;
} }
.check-container input:checked~.checkmark:after { .check-container input:checked ~ .checkmark:after {
display: block; display: block;
} }
...@@ -900,7 +901,7 @@ span.form-error, ...@@ -900,7 +901,7 @@ span.form-error,
width: 0; width: 0;
} }
.check-container input:checked~.checkmark { .check-container input:checked ~ .checkmark {
background-color: #fff; background-color: #fff;
} }
...@@ -1036,7 +1037,7 @@ span.form-error, ...@@ -1036,7 +1037,7 @@ span.form-error,
justify-content: center; justify-content: center;
} }
.btn-edit>span:first-child { .btn-edit > span:first-child {
margin-top: 0.2rem; margin-top: 0.2rem;
} }
...@@ -1114,7 +1115,7 @@ span.form-error, ...@@ -1114,7 +1115,7 @@ span.form-error,
color: #808080; color: #808080;
} }
.card-booking-content>p:last-child { .card-booking-content > p:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
...@@ -1157,7 +1158,7 @@ span.form-error, ...@@ -1157,7 +1158,7 @@ span.form-error,
color: #808080; color: #808080;
} }
.card-booking-content .description>span { .card-booking-content .description > span {
color: #646464; color: #646464;
text-decoration: underline; text-decoration: underline;
} }
...@@ -1167,7 +1168,7 @@ span.form-error, ...@@ -1167,7 +1168,7 @@ span.form-error,
font-weight: 600; font-weight: 600;
} }
.card-booking-content .price>span { .card-booking-content .price > span {
font-size: 0.8rem; font-size: 0.8rem;
color: #808080; color: #808080;
} }
...@@ -1203,7 +1204,7 @@ span.form-error, ...@@ -1203,7 +1204,7 @@ span.form-error,
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.card-booking-content .details-div>p:first-child { .card-booking-content .details-div > p:first-child {
font-family: "Sofia Pro Light"; font-family: "Sofia Pro Light";
font-size: calc(14px + (14 - 14) * (100vw - 320px) / (1920 - 320)); font-size: calc(14px + (14 - 14) * (100vw - 320px) / (1920 - 320));
line-height: calc(20px + (20 - 20) * (100vw - 320px) / (1920 - 320)); line-height: calc(20px + (20 - 20) * (100vw - 320px) / (1920 - 320));
...@@ -1213,7 +1214,7 @@ span.form-error, ...@@ -1213,7 +1214,7 @@ span.form-error,
margin-bottom: 0; margin-bottom: 0;
} }
.card-booking-content .details-div>p:last-child { .card-booking-content .details-div > p:last-child {
font-family: "Sofia Pro Light"; font-family: "Sofia Pro Light";
font-size: 16px; font-size: 16px;
font-size: calc(16px + (16 - 16) * (100vw - 320px) / (1920 - 320)); font-size: calc(16px + (16 - 16) * (100vw - 320px) / (1920 - 320));
...@@ -1291,7 +1292,10 @@ span.form-error, ...@@ -1291,7 +1292,10 @@ span.form-error,
margin-bottom: 0; margin-bottom: 0;
margin-left: 1rem; margin-left: 1rem;
} }
.helplist li p.number {
font-size: calc(16px + (16 - 16) * (100vw - 320px) / (1920 - 320));
line-height: calc(16px + (20 - 16) * (100vw - 320px) / (1920 - 320));
}
.business-details p { .business-details p {
margin-left: 0; margin-left: 0;
margin-bottom: 1rem; margin-bottom: 1rem;
...@@ -1394,7 +1398,7 @@ span.form-error, ...@@ -1394,7 +1398,7 @@ span.form-error,
align-items: center; align-items: center;
} }
.primary-sidebar ul li a>span { .primary-sidebar ul li a > span {
flex: 0 0 auto; flex: 0 0 auto;
} }
...@@ -1447,7 +1451,7 @@ span.form-error, ...@@ -1447,7 +1451,7 @@ span.form-error,
align-items: center; align-items: center;
} }
.sidebar ul li a>span { .sidebar ul li a > span {
flex: 0 0 auto; flex: 0 0 auto;
} }
...@@ -1601,12 +1605,12 @@ span.form-error, ...@@ -1601,12 +1605,12 @@ span.form-error,
} }
/* On mouse-over, add a grey background color */ /* On mouse-over, add a grey background color */
.radioContainer:hover input~.checkmark { .radioContainer:hover input ~ .checkmark {
background-color: #fff; background-color: #fff;
} }
/* When the radio button is checked, add a blue background */ /* When the radio button is checked, add a blue background */
.radioContainer input:checked~.checkmark { .radioContainer input:checked ~ .checkmark {
color: #0070bd; color: #0070bd;
} }
...@@ -1618,7 +1622,7 @@ span.form-error, ...@@ -1618,7 +1622,7 @@ span.form-error,
} }
/* Show the indicator (dot/circle) when checked */ /* Show the indicator (dot/circle) when checked */
.radioContainer input:checked~.checkmark:after { .radioContainer input:checked ~ .checkmark:after {
display: block; display: block;
} }
...@@ -2032,10 +2036,12 @@ span.form-error, ...@@ -2032,10 +2036,12 @@ span.form-error,
border-radius: 24px 24px 0 0; border-radius: 24px 24px 0 0;
object-fit: cover !important; object-fit: cover !important;
} }
.business-details :where(.css-dev-only-do-not-override-1kuana8).ant-upload-wrapper.ant-upload-picture-card-wrapper {
display: block;
}
.top-rated { .top-rated {
position: absolute; position: absolute;
bottom: 10px; bottom: 12px;
left: 10px; left: 10px;
background: #fff; background: #fff;
border-radius: 6px; border-radius: 6px;
...@@ -2045,12 +2051,29 @@ span.form-error, ...@@ -2045,12 +2051,29 @@ span.form-error,
height: calc(25px + (25 - 25) * (100vw - 320px) / (1920 - 320)) !important; height: calc(25px + (25 - 25) * (100vw - 320px) / (1920 - 320)) !important;
padding-top: 7px; padding-top: 7px;
} }
.modal-01-session h2 {
font-size: calc(32px + (32 - 32) * (100vw - 320px) / (1920 - 320));
line-height: calc(44px + (44 - 44) * (100vw - 320px) / (1920 - 320));
}
.modal-01-session .text01 {
font-size: calc(20px + (20 - 20) * (100vw - 320px) / (1920 - 320));
padding-top: 0.2rem;
padding-bottom: 1rem;
}
.info .top-name .title { .info .top-name .title {
font-size: 0.885vw; font-size: 0.885vw;
line-height: 20px; line-height: 20px;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
margin-right: 5px;
/* height: 40px; */
}
.cl-blue {
color: #0a58ca !important;
} }
.info .rating-wishlist .rating { .info .rating-wishlist .rating {
background: #002c5f; background: #002c5f;
border-radius: 4px; border-radius: 4px;
...@@ -2102,7 +2125,7 @@ span.form-error, ...@@ -2102,7 +2125,7 @@ span.form-error,
margin-left: 4px; margin-left: 4px;
} }
.product-info .wishlist-share>div { .product-info .wishlist-share > div {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
...@@ -2149,7 +2172,7 @@ span.form-error, ...@@ -2149,7 +2172,7 @@ span.form-error,
margin-bottom: 10px; margin-bottom: 10px;
} }
.browse-experiences-item .info .detail>div { .browse-experiences-item .info .detail > div {
margin-bottom: 0.4rem; margin-bottom: 0.4rem;
} }
...@@ -2462,6 +2485,7 @@ footer hr { ...@@ -2462,6 +2485,7 @@ footer hr {
border-color: #c3c3c3; border-color: #c3c3c3;
padding: 0.575rem 2.55rem 0.575rem 0.95rem; padding: 0.575rem 2.55rem 0.575rem 0.95rem;
margin-bottom: 1rem; margin-bottom: 1rem;
font-family: sans-serif !important;
} }
.box-01 .show-all { .box-01 .show-all {
...@@ -2700,7 +2724,7 @@ footer hr { ...@@ -2700,7 +2724,7 @@ footer hr {
line-height: 2.083vw; line-height: 2.083vw;
} }
.product-info .price>span { .product-info .price > span {
color: #808080; color: #808080;
font-size: 14px; font-size: 14px;
} }
...@@ -2711,7 +2735,7 @@ footer hr { ...@@ -2711,7 +2735,7 @@ footer hr {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
.product-info .location>span { .product-info .location > span {
color: #808080; color: #808080;
font-size: 16px; font-size: 16px;
} }
...@@ -2769,7 +2793,7 @@ footer hr { ...@@ -2769,7 +2793,7 @@ footer hr {
padding: 1rem 0; padding: 1rem 0;
} }
.image-gallery-thumbnail+.image-gallery-thumbnail { .image-gallery-thumbnail + .image-gallery-thumbnail {
margin-left: 1rem; margin-left: 1rem;
border-radius: 12px; border-radius: 12px;
} }
...@@ -2778,7 +2802,7 @@ footer hr { ...@@ -2778,7 +2802,7 @@ footer hr {
width: 100px; width: 100px;
} }
.breadcrumb-item+.breadcrumb-item::before { .breadcrumb-item + .breadcrumb-item::before {
content: ""; content: "";
background: url(/images/icons/arrow-right-grey.svg) no-repeat; background: url(/images/icons/arrow-right-grey.svg) no-repeat;
width: 24px; width: 24px;
...@@ -2794,13 +2818,18 @@ footer hr { ...@@ -2794,13 +2818,18 @@ footer hr {
font-size: 0.833vw; font-size: 0.833vw;
} }
.btn-check:focus+.btn, /* .btn-check:focus + .btn,
.btn:focus, .btn:focus,
button:focus:not(:focus-visible) { button:focus:not(:focus-visible) {
box-shadow: none; box-shadow: none;
background-color: transparent; background-color: transparent;
} }
.active-on-day .btn-check:focus + .active-on-day .btn,
.btn:focus,
button:focus:not(:focus-visible).active-on-day {
box-shadow: inherit;
background-color: #00000040;
} */
.availability-wrappper { .availability-wrappper {
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -2820,7 +2849,7 @@ button:focus:not(:focus-visible) { ...@@ -2820,7 +2849,7 @@ button:focus:not(:focus-visible) {
color: #000; color: #000;
} }
.availability-wrappper li>span { .availability-wrappper li > span {
width: 30px; width: 30px;
display: block; display: block;
margin-right: 10px; margin-right: 10px;
...@@ -2913,7 +2942,7 @@ button:focus:not(:focus-visible) { ...@@ -2913,7 +2942,7 @@ button:focus:not(:focus-visible) {
margin-bottom: 2rem; margin-bottom: 2rem;
} }
.guest-reviews-session>.container { .guest-reviews-session > .container {
border-top: 1px solid #c9c9c9; border-top: 1px solid #c9c9c9;
padding-top: 3rem; padding-top: 3rem;
} }
...@@ -3141,7 +3170,7 @@ header .top-btn .user-icon .image-container.arrow-d { ...@@ -3141,7 +3170,7 @@ header .top-btn .user-icon .image-container.arrow-d {
scrollbar-width: none; scrollbar-width: none;
} }
.active>.page-link, .active > .page-link,
.page-link.active { .page-link.active {
background-color: #0070bd; background-color: #0070bd;
border-color: #0070bd; border-color: #0070bd;
...@@ -3277,7 +3306,7 @@ input[type="number"]::-webkit-outer-spin-button { ...@@ -3277,7 +3306,7 @@ input[type="number"]::-webkit-outer-spin-button {
background: transparent; background: transparent;
} }
.swiper-nav button .image-container>span { .swiper-nav button .image-container > span {
width: 14px !important; width: 14px !important;
} }
...@@ -3313,7 +3342,7 @@ input[type="number"]::-webkit-outer-spin-button { ...@@ -3313,7 +3342,7 @@ input[type="number"]::-webkit-outer-spin-button {
display: block; display: block;
} }
.page-title-area .banner-bg .image-container>span { .page-title-area .banner-bg .image-container > span {
height: 100% !important; height: 100% !important;
} }
...@@ -3477,7 +3506,7 @@ input[type="number"]::-webkit-outer-spin-button { ...@@ -3477,7 +3506,7 @@ input[type="number"]::-webkit-outer-spin-button {
.swiper-pagination-fraction, .swiper-pagination-fraction,
.swiper-pagination-custom, .swiper-pagination-custom,
.swiper-horizontal>.swiper-pagination-bullets, .swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal { .swiper-pagination-bullets.swiper-pagination-horizontal {
bottom: -5px !important; bottom: -5px !important;
} }
...@@ -3593,11 +3622,11 @@ input[type="number"]::-webkit-outer-spin-button { ...@@ -3593,11 +3622,11 @@ input[type="number"]::-webkit-outer-spin-button {
display: block; display: block;
} }
.blog-item .img-wrapper .image-container>span { .blog-item .img-wrapper .image-container > span {
height: 100% !important; height: 100% !important;
} }
.blog-item .img-wrapper .image-container>span>.image { .blog-item .img-wrapper .image-container > span > .image {
object-fit: cover; object-fit: cover;
border-radius: 25px 25px 0 0; border-radius: 25px 25px 0 0;
} }
...@@ -3611,6 +3640,7 @@ input[type="number"]::-webkit-outer-spin-button { ...@@ -3611,6 +3640,7 @@ input[type="number"]::-webkit-outer-spin-button {
padding: 0.3rem 0.5rem; padding: 0.3rem 0.5rem;
font-size: 0.677vw; font-size: 0.677vw;
font-weight: 700; font-weight: 700;
line-height: inherit !important;
} }
.blog-item .info { .blog-item .info {
...@@ -3821,18 +3851,18 @@ input[type="number"]::-webkit-outer-spin-button { ...@@ -3821,18 +3851,18 @@ input[type="number"]::-webkit-outer-spin-button {
justify-content: center; justify-content: center;
} }
.gift-card-amt>ul { .gift-card-amt > ul {
display: grid; display: grid;
grid-gap: 20px; grid-gap: 20px;
grid-template-columns: repeat(auto-fill, minmax(calc(33.33% - 15px), 1fr)); grid-template-columns: repeat(auto-fill, minmax(calc(33.33% - 15px), 1fr));
} }
.gift-card-amt ul li a, .gift-card-amt ul li a,
.gift-card-amt ul li label>span { .gift-card-amt ul li label > span {
font-size: 14px; font-size: 14px;
} }
.gift-card-amt ul li input[type="radio"]:checked+label { .gift-card-amt ul li input[type="radio"]:checked + label {
background: #0070bd; background: #0070bd;
color: #fff; color: #fff;
} }
...@@ -3869,7 +3899,7 @@ input[type="number"]::-webkit-outer-spin-button { ...@@ -3869,7 +3899,7 @@ input[type="number"]::-webkit-outer-spin-button {
display: inline-block; display: inline-block;
} }
.tooltip-btn:hover+.tooltips { .tooltip-btn:hover + .tooltips {
display: block; display: block;
} }
...@@ -3904,7 +3934,8 @@ input[type="number"]::-webkit-outer-spin-button { ...@@ -3904,7 +3934,8 @@ input[type="number"]::-webkit-outer-spin-button {
border-radius: 9px; border-radius: 9px;
} }
.gift-card-rt .form-01 .link-a {} .gift-card-rt .form-01 .link-a {
}
.gift-card-session .result-box { .gift-card-session .result-box {
text-align: center; text-align: center;
...@@ -4065,7 +4096,8 @@ img:hover { ...@@ -4065,7 +4096,8 @@ img:hover {
margin-top: 1.5rem; margin-top: 1.5rem;
} }
.load-more .pagination .page-item {} .load-more .pagination .page-item {
}
.page-item:not(:first-child) .page-link { .page-item:not(:first-child) .page-link {
margin-left: 10px; margin-left: 10px;
...@@ -4179,7 +4211,9 @@ footer .footer-link ul { ...@@ -4179,7 +4211,9 @@ footer .footer-link ul {
.suitable-age-group .anticon.anticon-down { .suitable-age-group .anticon.anticon-down {
display: none; display: none;
} }
.vendor-signup .btn-light {
background: #fff;
}
@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;
...@@ -4410,7 +4444,7 @@ footer .footer-link ul { ...@@ -4410,7 +4444,7 @@ footer .footer-link ul {
font-size: 4.667vw; font-size: 4.667vw;
} }
.gift-card-amt>ul { .gift-card-amt > ul {
grid-gap: 10px; grid-gap: 10px;
} }
...@@ -4486,7 +4520,7 @@ footer .footer-link ul { ...@@ -4486,7 +4520,7 @@ footer .footer-link ul {
} }
.gift-card-amt ul li a, .gift-card-amt ul li a,
.gift-card-amt ul li label>span { .gift-card-amt ul li label > span {
font-size: 12px; font-size: 12px;
} }
...@@ -4632,7 +4666,7 @@ footer .footer-link ul { ...@@ -4632,7 +4666,7 @@ footer .footer-link ul {
width: 3.585vw; width: 3.585vw;
} }
.header-search>.form-control { .header-search > .form-control {
font-size: 3vw; font-size: 3vw;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
...@@ -4654,7 +4688,7 @@ footer .footer-link ul { ...@@ -4654,7 +4688,7 @@ footer .footer-link ul {
line-height: 4vw; line-height: 4vw;
} }
.home-banner-bg>span>span .image { .home-banner-bg > span > span .image {
border-radius: 0 0 20px 20px; border-radius: 0 0 20px 20px;
} }
...@@ -4772,7 +4806,7 @@ footer .footer-link ul { ...@@ -4772,7 +4806,7 @@ footer .footer-link ul {
top: 40%; top: 40%;
} }
.swiper-nav button .image-container>span { .swiper-nav button .image-container > span {
width: 10px !important; width: 10px !important;
} }
...@@ -4910,7 +4944,7 @@ footer .footer-link ul { ...@@ -4910,7 +4944,7 @@ footer .footer-link ul {
top: 0.8rem !important; top: 0.8rem !important;
} }
.rbt-menu>.dropdown-item { .rbt-menu > .dropdown-item {
font-size: 13px; font-size: 13px;
} }
...@@ -4945,4 +4979,4 @@ footer .footer-link ul { ...@@ -4945,4 +4979,4 @@ footer .footer-link ul {
/* min height */ /* min height */
.min-height-40 { .min-height-40 {
min-height: 40vh; min-height: 40vh;
}
\ No newline at end of file \ No newline at end of file
}
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!