Skip to content

Jay Mehta / zango-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit c45eea89 by jaymehta
Options

changes

1 parent c0cbf072
Expand all
Inline Side-by-side
Showing 11 changed files with 263 additions and 55 deletions
components/common-components/OtpTimer.js 0 → 100644
import Image from "next/image";
import React, { useState, useEffect } from "react";
import { toast } from "react-toastify";
import { registerEndUser, registerVendor } from "../../redux/actions/userActions";
import { renderImage } from "../../services/imageHandling";
const OtpTimer = ({ initialTime, role, userData }) => {
const [timeLeft, setTimeLeft] = useState(initialTime);
const [isDisabled, setIsDisabled] = useState(true);
useEffect(() => {
if (timeLeft === 0) {
setIsDisabled(false);
return;
}
const timerId = setInterval(() => {
setTimeLeft(prevTime => prevTime - 1);
}, 1000);
return () => clearInterval(timerId);
}, [timeLeft]);
const handleResend = async () => {
setTimeLeft(initialTime);
setIsDisabled(true);
if (role == "user") {
await registerEndUser(userData);
}
if (role == "vendor") {
await registerVendor(userData);
}
toast.success("OTP has been sent again.");
// if (onResend) {
// onResend();
// }
};
const formatTime = seconds => {
const minutes = Math.floor(seconds / 60);
const secs = seconds % 60;
return `${minutes}:${secs < 10 ? "0" : ""}${secs}`;
};
return (
<div>
<p>Resend OTP in: {formatTime(timeLeft)}</p>
<button className="d-flex resend-otp" onClick={handleResend} disabled={isDisabled}>
Resend OTP
</button>
{/* <div className="d-flex resend-otp">
<span className="image-container me-2">
<Image src={renderImage("/images/login/icon-resend.png")} layout="fill" className="image" />
</span>
<p className="mb-0">Resend</p>
</div> */}
</div>
);
};
export default OtpTimer;
components/detail/Detail.js
......@@ -41,7 +41,7 @@ const Detail = () => {
separatorMargin: 20,
fontWeight: 500,
fontSize: 16,
fontFamily: 'Sofia Pro',
fontFamily: "Sofia Pro"
}
}
}}
......@@ -50,20 +50,20 @@ const Detail = () => {
separator={<RightOutlined />}
items={[
{
title: 'Home',
href: '/'
title: "Home",
href: "/"
},
{
title: activityById?.data?.attributes?.vendor?.data?.attributes?.city,
title: activityById?.data?.attributes?.vendor?.data?.attributes?.city
},
{
title: activityById?.data?.attributes?.category?.data?.attributes?.name,
href: `/listing?category=${activityById?.data.attributes.category?.data?.id}`,
href: `/listing?category=${activityById?.data.attributes.category?.data?.id}`
},
{
title: activityById?.data?.attributes?.name,
href: `/listing?category=${activityById?.data.attributes.category?.data?.id}`,
},
href: `/listing?category=${activityById?.data.attributes.category?.data?.id}`
}
]}
/>
</ConfigProvider>
......@@ -91,6 +91,23 @@ const Detail = () => {
<DetailSchedule activityById={activityById} />
</div>
</section>
{activityById && activityById.data.attributes.cancellationPolicyText && (
<div className="container">
<div className="row">
<div className="col-12 my-2">
<div className="head-btn">
<div className="head01">
<div className="title">Cancellation Policy</div>
</div>
{/* <a href="" className="view-all-reviews-btn">
View All Reviews
</a> */}
</div>
</div>
<div className="col-12 my-2">{activityById.data.attributes.cancellationPolicyText}</div>
</div>
</div>
)}
<GuestReviews activityById={activityById} />
<SimilarExperiences allActivitiesData={allActivitiesData} />
<Faqs faqs={faqs} />
......
components/gift-card/GiftCard.js
......@@ -118,75 +118,75 @@ const GiftCard = () => {
<li>
<input
name="amt"
id="amt-250"
id="amt-20"
type="radio"
value=""
data-gtm-Form-interact-field-id="1"
onChange={e => {
setAmount(250);
setAmount(20);
setcustom(false);
}}
/>
<label for="amt-250">$250</label>
<label for="amt-20">$20</label>
</li>
<li>
<input
name="amt"
id="amt-500"
id="amt-50"
type="radio"
value=""
data-gtm-form-interact-field-id="1"
onChange={e => {
setAmount(500);
setAmount(50);
setcustom(false);
}}
/>
<label for="amt-500">$500</label>
<label for="amt-50">$50</label>
</li>
<li>
<input
name="amt"
id="amt-750"
id="amt-100"
type="radio"
value=""
data-gtm-form-interact-field-id="1"
onChange={e => {
setAmount(750);
setAmount(100);
setcustom(false);
}}
/>
<label for="amt-750">
<label for="amt-100">
<span>Most Popular</span>
<br /> $750
<br /> $100
</label>
</li>
<li>
<input
name="amt"
id="amt-1000"
id="amt-250"
type="radio"
value=""
data-gtm-form-interact-field-id="1"
onChange={e => {
setAmount(1000);
setAmount(250);
setcustom(false);
}}
/>
<label for="amt-1000"> $1000</label>
<label for="amt-250"> $250</label>
</li>
<li>
<input
name="amt"
id="amt-1500"
id="amt-500"
type="radio"
value=""
data-gtm-form-interact-field-id="1"
onChange={e => {
setAmount(1500);
setAmount(500);
setcustom(false);
}}
/>
<label for="amt-1500"> $1500</label>
<label for="amt-500"> $500</label>
</li>
<li>
<input
......
components/listing/ListingFilter.js
......@@ -9,7 +9,7 @@ import { TimePicker } from "antd";
import dayjs from "dayjs";
import { Input } from "react-bootstrap-typeahead";
const format = "HH:mm";
const suitableAgeGroups = [2, 5, 8, 10, 12, 14, 16];
const suitableAgeGroups = [[2, 5], [5, 10], [10, 16], [16, 18], [18]];
const ListingFilter = () => {
const [showContent, setShowContent] = useState(false);
const [sliderLowerValue, setsliderLowerValue] = useState(0);
......@@ -17,12 +17,21 @@ const ListingFilter = () => {
const dispatch = useDispatch();
const { activityFilters } = useSelector(sate => sate.activityFilters);
const { subCategories, loading } = useSelector(sate => sate.subCategories);
const [customDate, setcustomDate] = useState();
const toggleContent = () => {
setShowContent(!showContent);
};
const onChange = (date, dateString) => {
console.log(date, dateString);
};
const disabledDate = current => {
// Can not select days before today and today
return current && current < dayjs().startOf("day");
};
const disabledDate2 = (current, customDate) => {
// Can not select days before today and today
return current && current < dayjs(customDate).startOf("day");
};
return (
<>
<div className="listing-filter">
......@@ -220,7 +229,9 @@ const ListingFilter = () => {
<label>From</label>
<Space direction="vertical">
<DatePicker
disabledDate={disabledDate}
onChange={(date, dateString) => {
setcustomDate(date);
console.log("date", date, dateString);
dispatch(setActivityFilters({ filters: { ...activityFilters, startDate: dateString !== "" ? dateString : null } }));
}}
......@@ -231,6 +242,7 @@ const ListingFilter = () => {
<label>To</label>
<Space direction="vertical">
<DatePicker
disabledDate={current => disabledDate2(current, customDate)}
onChange={(date, dateString) => {
console.log("date", date, dateString);
dispatch(setActivityFilters({ filters: { ...activityFilters, endDate: dateString !== "" ? dateString : null } }));
......@@ -270,7 +282,7 @@ const ListingFilter = () => {
</div>
<div className="time">
<div>
<label>maximum duration:</label>
<label>Maximum duration:</label>
</div>
<div className="">
<Input
......@@ -360,23 +372,30 @@ const ListingFilter = () => {
<div className="inner">
<Form.Select
onChange={e => {
console.log(e.target.value);
// console.log("filter 123", e);
if (e.target.value != "select") {
dispatch(setActivityFilters({ filters: { ...activityFilters, minAge: e.target.value } }));
} else {
dispatch(setActivityFilters({ filters: { ...activityFilters, minAge: null } }));
}
// setTimeout(() => {
// }, 1500);
}}
// onSelect={(e) => {
// console.log("filter 123", e);
// }}
aria-label="Default select example"
>
<option>Select</option>
{suitableAgeGroups.map(item => {
return <option value={item}> {item}+ </option>;
return <option value={item}> {item[1] ? `${item[0]} - ${item[1]}` : `${item[0]}+`} </option>;
})}
{/* {[
{ start: 5, end: 10 },
{ start: 10, end: 20 }
].map(item => {
return <option value={item}> {item.end ? `${item.start} - ${item.end}` : `${item[0]}+`} </option>;
})} */}
</Form.Select>
</div>
</div>
......
components/listing/ListingItems.js
......@@ -14,6 +14,7 @@ import Link from "next/link";
const ListingItems = ({ allActivitiesData, loading, gridClass, totalCount }) => {
// const [gridClass, setGridClass] = useState('col-md-3');
const { endUser } = useSelector(state => state.endUser);
const { activityFilters } = useSelector(state => state.activityFilters);
const router = useRouter();
const [readMoreText, setreadMoreText] = useState();
const [showModal, setshowModal] = useState(false);
......@@ -49,7 +50,70 @@ const ListingItems = ({ allActivitiesData, loading, gridClass, totalCount }) =>
// router.push({
// query: `/listing?page=${pageNumber}`
// });
dispatch(getActivitiesByFilters({ currentPage: pageNumber }));
// dispatch(getActivitiesByFilters({ currentPage: pageNumber }));
let filters = {};
// console.log("subcategory here", activityFilters.startDate);
if (activityFilters.category) {
filters["category"] = { id: { $eq: activityFilters.category } };
}
if (activityFilters.subCategories?.length > 0) {
filters["category"] = null;
filters["subCategory"] = activityFilters.subCategories.map(item => {
return { subCategory: { id: { $eq: item } } };
});
}
if (activityFilters.activityType) {
filters["activityType"] = activityFilters.activityType;
}
if (activityFilters.startDate) {
filters["fromDate"] = activityFilters.startDate;
}
if (activityFilters.endDate) {
filters["toDate"] = activityFilters.endDate;
}
if (activityFilters.minDuration > 0) {
filters["minimumDuration"] = activityFilters.minDuration;
}
if (activityFilters.maxDuration > 0) {
filters["maximumDuration"] = activityFilters.maxDuration;
}
if (activityFilters.minGroupSize > 0) {
filters["minGroupSize"] = activityFilters.minGroupSize;
}
if (activityFilters.maxGroupSize > 0) {
filters["maxGroupSize"] = activityFilters.maxGroupSize;
}
if (activityFilters.minAge > 0) {
filters["ageLowerLimit"] = activityFilters.minAge;
}
if (activityFilters.sorting) {
filters["sort"] = activityFilters.sorting;
}
if (activityFilters.priceUpperLimit) {
filters["priceUpperLimit"] = activityFilters.priceUpperLimit;
}
if (activityFilters.priceLowerLimit) {
filters["priceLowerLimit"] = activityFilters.priceLowerLimit;
}
console.log("router query", filters.category);
dispatch(
getActivitiesByFilters({
subCategory: filters.subCategory,
category: filters.category,
activityType: filters.activityType,
fromDate: filters.fromDate,
toDate: filters.toDate,
minimumDuration: filters.minimumDuration,
maximumDuration: filters.maximumDuration,
minGroupSize: filters.minGroupSize,
maxGroupSize: filters.maxGroupSize,
ageLowerLimit: filters.ageLowerLimit,
sort: filters.sort,
priceUpperLimit: filters.priceUpperLimit,
priceLowerLimit: filters.priceLowerLimit,
currentPage: pageNumber
})
);
};
console.log("page", page);
useEffect(() => {
......
components/signup/Signup.js
......@@ -16,11 +16,14 @@ import { finishVendorOtpVerification } from "../../redux/actions/vendorActions";
import { signIn } from "next-auth/react";
import { Loader } from "react-bootstrap-typeahead";
import qs from "qs";
import PhoneInput from "react-phone-input-2";
import OtpTimer from "../common-components/OtpTimer";
const Signup = props => {
console.log("props.type", props.type);
const [otp, setOtp] = useState(new Array(4).fill(""));
const [isOtpSent, setOtpSent] = useState(false);
const [otpVerified, setOtpVerified] = useState(false);
const [otpTimer, setotpTimer] = useState(30);
const [loading, setLoading] = useState();
const dispatch = useDispatch();
const router = useRouter();
......@@ -42,9 +45,8 @@ const Signup = props => {
.required("Confirm Password is Required")
.oneOf([Yup.ref("password"), null], "Passwords must match"),
countryCode: Yup.string().required("Country Code is Required"),
mobile: Yup.string()
.required("Mobile Number is Required")
.matches(/^[0-9\s]+$/, "Please Enter Correct Mobile No."),
mobile: Yup.string().required("Mobile Number is Required"),
// .matches(/^[0-9\s]+$/, "Please Enter Correct Mobile No."),
termsConditions: Yup.bool().oneOf([true], "Please Accept Terms & Conditions"),
otp: Yup.string().when("isOtpSent", {
is: true,
......@@ -73,7 +75,13 @@ const Signup = props => {
if (props.type == "user") {
}
};
const startTimer = () => {
setotpTimer(otpTimer - 1);
// while (otpTimer > 0) {
// setTimeout(() => {
// }, 1000);
// }
};
return (
<Fragment>
<div className="contaier-fluid login-banner-image">
......@@ -109,7 +117,7 @@ const Signup = props => {
// }
// }}
>
{({ values, errors, touched, handleChange, handleBlur, handleSubmit, isValid, isSubmitting }) => (
{({ values, errors, touched, handleChange, handleBlur, handleSubmit, isValid, isSubmitting, setValues, setFieldValue }) => (
<Form
onSubmit={async e => {
e.preventDefault();
......@@ -160,6 +168,7 @@ const Signup = props => {
}
setOtpSent(true);
setLoading(false);
// startTimer();
} else {
e.preventDefault();
setLoading(true);
......@@ -220,14 +229,21 @@ const Signup = props => {
<div className="input-group">
<label>Mobile No.</label>
<div className="contact-numbe w-100">
<input
type="text"
{/* <input name="mobile" onChange={handleChange} onBlur={handleBlur} value={values.mobile} placeholder="" style={{ flex: "0 100%" }} /> */}
<PhoneInput
placeholder="Enter phone number"
name="mobile"
onChange={handleChange}
onChange={e => {
console.log(values.mobile);
setValues({ ...values, mobile: e });
// handleChange(e);
}}
onBlur={handleBlur}
value={values.mobile}
placeholder="#@$!%@#"
style={{ flex: "0 100%" }}
// placeholder=""
// style={{ flex: "0 100%" }}
// value={value}
// onChange={setValue}
/>
</div>
{errors.mobile && touched.mobile && <span className="form-error">{errors.mobile}</span>}
......@@ -250,18 +266,28 @@ const Signup = props => {
{errors.termsConditions && touched.termsConditions && <span className="form-error">{errors.termsConditions}</span>}
</div>
{isOtpSent && (
// true
<>
<div className="input-group">
<label>
OTP <span style={{ marginLeft: "190px" }}>00:30</span>
</label>
{/* <label>
OTP <span style={{ marginLeft: "190px" }}>{otpTimer}</span>
</label> */}
<div className="otp-input">
<OTPInput setOtp={setOtp} otp={otp} />
</div>
{errors.otp && touched.otp && <span className="form-error">{errors.otp}</span>}
</div>
<div>
<p>4 digit OTP is been sent on your email address.</p>
{/* <p>OTP Timer Example</p> */}
<OtpTimer
initialTime={30}
role={props.type}
userData={{ mobileNo: values.mobile, name: values.fullname, email: values.email, password: values.password }}
/>
</div>
<div>
<p className="mt-4">4 digit OTP is been sent on your email address.</p>
<div className="d-flex align-items-center mb-4">
<p className="mb-0 me-5">Didn’t Receive Yet?</p>
{/* <div className="d-flex resend-otp">
......
redux/actions/activityAction.js
......@@ -113,7 +113,7 @@ export const getActivitiesByVendor = () => async dispatch => {
}
},
pagination: {
pageSize: 1000,
pageSize: 1000
},
populate: [
"masterMonths",
......@@ -274,7 +274,7 @@ export const getActivitiesForAdmin =
}
},
pagination: {
pageSize: 1000,
pageSize: 1000
},
populate: [
"masterMonths",
......@@ -335,11 +335,11 @@ export const getActivitiesForEndUser = () => async dispatch => {
filters: {
approved: { $eq: "approved" }
},
sort: [{ createdAt: 'asc' }],
sort: [{ createdAt: "asc" }],
pagination: {
pageSize: 5
},
populate: [
"masterMonths",
"subCategory",
......@@ -463,8 +463,10 @@ export const getActivitiesByFilters =
query.filters["activityType"] = activityType;
}
// { fromDate: {$lte: "2022-07-09"}}
if (fromDate && toDate) {
query.filters["$and"] = [{ fromDate: { $gte: fromDate } }, { toDate: { $lte: toDate } }];
// query.filters["$or"] = [{ fromDate: { $gte: fromDate } }, { toDate: { $lte: toDate } }];
delete query.filters.fromDate;
delete query.filters.toDate;
}
......@@ -477,12 +479,28 @@ export const getActivitiesByFilters =
}
}
if (maximumDuration) {
query.filters["maximumDuration"] = { $lte: maximumDuration };
if (maximumDuration && minimumDuration) {
query.filters["$and"] = [{ maximumDuration: { $lte: maximumDuration } }, { minimumDuration: { $gte: minimumDuration } }];
// query.filters["$or"] = [{ maximumDuration: { $gte: maximumDuration } }, { minimumDuration: { $lte: minimumDuration } }];
delete query.filters.maximumDuration;
delete query.filters.minimumDuration;
}
if (minimumDuration) {
query.filters["minimumDuration"] = { $gte: minimumDuration };
if (!(maximumDuration && minimumDuration)) {
if (maximumDuration) {
query.filters["maximumDuration"] = { $lte: maximumDuration };
}
if (minimumDuration) {
query.filters["minimumDuration"] = { $gte: minimumDuration };
}
}
// if (maximumDuration) {
// query.filters["maximumDuration"] = { $gte: maximumDuration };
// }
// if (minimumDuration) {
// query.filters["minimumDuration"] = { $lte: minimumDuration };
// }
if (minGroupSize) {
query.filters["minGroupSize"] = { $gte: minGroupSize };
}
......
redux/actions/userActions.js
......@@ -83,7 +83,7 @@ export const registerUser = userData => async dispatch => {
}
};
const registerVendor = async vendorData => {
export const registerVendor = async vendorData => {
const authUser = await axios.post(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/auth/local`, {
identifier: vendorData.email,
password: vendorData.password
......@@ -109,7 +109,7 @@ const registerVendor = async vendorData => {
return response;
};
const registerEndUser = async vendorData => {
export const registerEndUser = async vendorData => {
const authUser = await axios.post(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/auth/local`, {
identifier: vendorData.email,
password: vendorData.password
......
styles/globals.css
......@@ -3956,6 +3956,9 @@ footer .footer-link ul {
padding: 0.5rem 0;
cursor: pointer;
}
.contact-numbe .special-label {
display: none !important;
}
@media (min-width: 992px) {
.navbar-expand-lg .navbar-nav .nav-link {
margin: 0 2rem;
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!