Skip to content

Jay Mehta / zango-frontend

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

.

1 parent 6c6a3b27
Inline Side-by-side
Showing 11 changed files with 253 additions and 186 deletions
components/detail/DetailInfo.js
......@@ -16,6 +16,7 @@ import Link from "next/link.js";
import { checkWishlist, toggleWishlist } from "../../redux/actions/activityAction.js";
import WishlistComponent from "./WIshlistComponent.js";
import ShareWidget from "./ShareWidget.js";
import { sanitizeTimeRange } from "../../services/imageHandling";
const DetailInfo = ({ activityById }) => {
const router = useRouter();
......@@ -184,7 +185,9 @@ const DetailInfo = ({ activityById }) => {
setenquiryModal;
}}
>
<Modal.Header><h4>Send Enquiry</h4></Modal.Header>
<Modal.Header>
<h4>Send Enquiry</h4>
</Modal.Header>
<Modal.Body>
<div>Experience Name:</div>
<div className="" style={{ fontSize: "22px", fontWeight: "bold" }}>
......@@ -213,14 +216,16 @@ const DetailInfo = ({ activityById }) => {
<div className="mt-2">Date:</div>
<div className="">
<DatePicker popupStyle={{
position: "fixed", zIndex: 9999
}}
<DatePicker
popupStyle={{
position: "fixed",
zIndex: 9999
}}
onChange={e => {
e.preventDefault();
console.log(e);
// setenquireDate(e)
console.log(sanitizeTimeRange({ data: e }));
// e.preventDefault();
// console.log(e);
setenquireDate(sanitizeTimeRange({ data: e }));
}}
/>
</div>
......@@ -232,7 +237,9 @@ const DetailInfo = ({ activityById }) => {
onClick={async () => {
setloading(true);
console.log("hello");
let res = await sendEnquiry({ activityId: activityById.data.id, userId: endUser.id, vendorId: activityById.data.attributes.vendor.data.id, quantity });
if (!enquireDate) toast.error("Please select date!")
if (!quantity) toast.error("Please select quantity!")
let res = await sendEnquiry({ activityId: activityById.data.id, userId: endUser.id, vendorId: activityById.data.attributes.vendor.data.id, quantity, date: enquireDate });
console.log("res", res);
toast.success("Enquiry sent successfully, our team will get back to you shortly! Thank you!");
setloading(false);
......
components/gift-card/GiftCard.js
......@@ -14,8 +14,6 @@ import { postGiftCard } from "../../redux/actions/giftCardAction";
// import { getCurrentEndUser } from "../../redux/actions/userActions";
const validationSchema = Yup.object().shape({
customAmt: Yup.string().required("Full name is required"),
code: Yup.string().required("Please Enter 4-Digit Code"),
email: 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")
......@@ -97,6 +95,7 @@ const GiftCard = () => {
</a>
</div> */}
<Formik
validationSchema={validationSchema}
initialValues={{
customAmt: "",
email: "",
......@@ -310,7 +309,7 @@ const GiftCard = () => {
setIsStep2(true);
setIsStep1(false);
}}
disabled={!amount > 0 || !values.receiverEmail || !values.email}
disabled={!amount > 0 || !values.receiverEmail || !values.email || errors.email || errors.receiverEmail || errors.message}
>
{loading ? <Loader /> : "Continue"}
</button>
......@@ -329,13 +328,13 @@ const GiftCard = () => {
{isStep2 && (
<div className="gift-card-rt">
<div className="back-btn">
{/* <div className="back-btn">
<a href="">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-left-02.svg" />
</span>
</a>
</div>
</div> */}
<Formik
initialValues={{
code: ""
......@@ -345,27 +344,25 @@ const GiftCard = () => {
// Handle form submission here
console.log(values);
setSubmitting(false);
setIsStep2(false);
setIsStep1(false);
setIsResult(true);
}}
>
{({ isSubmitting, values, handleChange, handleBlur, touched, errors }) => (
<Form action="" className="form-01">
<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> */}
{console.log("values", form1Values)}
{/* {console.log("values", form1Values)} */}
<div className="row mt-4">
<div className="col-md-12 mb-4">
<label htmlFor="">Enter 4-Digit Code</label>
<Field
className="form-control"
type="text"
type="number"
name="code"
placeholder="Enter the code we emailed you"
onChange={handleChange}
onBlur={handleBlur}
value={values.code}
/>
{touched.code && errors.code && <div className="text-danger">{errors.code}</div>}
{/* <div className="link-a">
......@@ -382,7 +379,10 @@ const GiftCard = () => {
console.log("res", res.data);
if (!res.data.ok) {
toast.error(res.data.message);
// console.log("here");
return;
}
if (res.data.ok) {
const response = await postGiftCard({
data: {
......@@ -397,10 +397,13 @@ const GiftCard = () => {
}
});
console.log("response", response);
setIsStep2(false);
setIsStep1(false);
setIsResult(true);
toast.success("OTP verified!");
}
}}
disabled={isSubmitting}
disabled={!values.code || String(values.code).length < 4}
>
Confirm
</button>
......
components/home/Home.js
......@@ -21,10 +21,10 @@ const Home = () => {
const { testimonial } = useSelector(sate => sate.testimonial);
const { allActivitiesData } = useSelector(sate => sate.allActivitiesData);
const { homeBanner } = useSelector(state => state.homeBanner);
console.log("homeBanner", homeBanner);
console.log("categories", categories);
console.log("testimonial", testimonial);
console.log("allActivitiesData", allActivitiesData);
// console.log("homeBanner", homeBanner);
// console.log("categories", categories);
// console.log("testimonial", testimonial);
// console.log("allActivitiesData", allActivitiesData);
const dispatch = useDispatch();
useEffect(() => {
// dispatch(getHomePage())
......
components/layout/Header.js
......@@ -45,7 +45,9 @@ const Header = () => {
useEffect(() => {
dispatch(getCurrentEndUser());
}, []);
useEffect(() => {
dispatch(getCurrentEndUser());
}, [router]);
useEffect(() => {
if (endUser) dispatch(getWishlists({ endUser: endUser.id }));
}, [endUser]);
......@@ -284,7 +286,7 @@ const Header = () => {
</Form>
{!loading ? (
<>
{loadedUser && loadedUser.id ? (
{endUser && endUser.id ? (
<div className="top-btn hide-on-mobile">
<div className="logout-bk">
<a onClick={toggleGridViewDropdown} className="user-icon">
......
components/user/MyEnquires.js
import { Skeleton } from "antd";
import Image from "next/image";
import Link from "next/link";
import React, { Fragment } from "react";
import { renderImage } from "../../services/imageHandling";
import { Button } from "react-bootstrap";
import { useSelector } from "react-redux";
import { cleanImage, renderImage } from "../../services/imageHandling";
import ActiveLink from "../common/ActiveLink";
const MyEnquires = () => {
const bookingsData = [
{
id: "0",
name: "City Climb",
start_date: "Jan 8, 2021",
end_date: "Jan 9, 2021",
price: "$200",
status: "Confirmed",
image: "/images/user/image1.png"
},
{
id: "1",
name: "City Climb",
start_date: "Jan 8, 2021",
end_date: "Jan 9, 2021",
price: "$200",
status: "Confirmed",
image: "/images/user/image1.png"
},
{
id: "2",
name: "City Climb",
start_date: "Jan 8, 2021",
end_date: "Jan 9, 2021",
price: "$200",
status: "Confirmed",
image: "/images/user/image1.png"
},
{
id: "3",
name: "City Climb",
start_date: "Jan 8, 2021",
end_date: "Jan 9, 2021",
price: "$200",
status: "Confirmed",
image: "/images/user/image1.png"
}
]
const { enquiriesByEndUser, loading } = useSelector(state => state.enquiriesByEndUser);
console.log("enquiriesByEndUser", enquiriesByEndUser);
const calculateRating = data => {
let value = 0;
data.map(item => {
// console.log("item", item);
value = value + item.attributes.rating;
});
// console.log("value", value);
let length = data.length;
return Math.floor(value / length);
};
return (
<Fragment>
<div className="container">
<div className="row">
<div className="col-12 col-lg-12 form-container content-wraaper">
<h2 className="px-2 px-lg-0">My Enquires</h2>
<div className="row">
{bookingsData?.length && bookingsData.map((data, index) => (
<div className="col-12 col-sm-12 col-lg-3 col-md-6 px-4 px-lg-3" key={`1${index}`}>
<div className="card-booking">
<div className="card-booking-img">
<span className="image-container">
<Image src={renderImage(data.image)} layout="fill" className="image" />
</span>
</div>
<div className="card-booking-content">
<p className="activity-name">{data.name}</p>
<p>{data.start_date} - {data.end_date}</p>
<p>{data.price}</p>
<p className="status">{data.status}</p>
</div>
<div className="hr-div" />
<div className="card-booking-footer">
<div className="d-flex align-items-center justify-content-between">
<div className="d-flex align-items-center">
<span className="image-container me-2">
<Image src={renderImage("/images/user/icon-rebook.svg")} layout="fill" className="image" />
</span>
<p className="duration mb-0">Rebook this booking</p>
</div>
<div className="image-container">
<Image src={renderImage("/images/user/arrow-right.svg")} layout="fill" className="image" />
</div>
</div>
</div>
</div>
</div>
))}
</div>
<div className="row">
{bookingsData?.length && bookingsData.map((data, 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">
<Image src={renderImage(data.image)} layout="fill" className="image" />
</span>
</div>
<div className="card-booking-content">
<p className="activity-name">{data.name}</p>
<p>{data.start_date} - {data.end_date}</p>
<p>{data.price}</p>
<p className="status">{data.status}</p>
</div>
<div className="hr-div" />
<div className="card-booking-footer">
<div className="d-flex align-items-center justify-content-between">
<div className="d-flex align-items-center">
<span className="image-container me-2">
<Image src={renderImage("/images/user/icon-rebook.svg")} layout="fill" className="image" />
</span>
<p className="duration mb-0">Rebook this booking</p>
</div>
<div className="image-container">
<Image src={renderImage("/images/user/arrow-right.svg")} layout="fill" className="image" />
</div>
</div>
</div>
</div>
</div>
))}
</div>
<div className="row">
{bookingsData?.length && bookingsData.map((data, 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">
<Image src={renderImage(data.image)} layout="fill" className="image" />
</span>
</div>
<div className="card-booking-content">
<p className="activity-name">{data.name}</p>
<p>{data.start_date} - {data.end_date}</p>
<p>{data.price}</p>
<p className="status">{data.status}</p>
</div>
<div className="hr-div" />
<div className="card-booking-footer">
<div className="d-flex align-items-center justify-content-between">
<div className="d-flex align-items-center">
<span className="image-container me-2">
<Image src={renderImage("/images/user/icon-rebook.svg")} layout="fill" className="image" />
</span>
<p className="duration mb-0">Rebook this booking</p>
</div>
<div className="image-container">
<Image src={renderImage("/images/user/arrow-right.svg")} layout="fill" className="image" />
</div>
</div>
</div>
</div>
</div>
))}
return (
<Fragment>
<div className="container">
<div className="row">
<div className="col-12 col-lg-12 form-container content-wraaper">
<h2 className="px-2 px-lg-0">My Enquires</h2>
{!loading ? (
<div className="row">
{enquiriesByEndUser?.length &&
enquiriesByEndUser.map((data, index) => (
<div className="col-12 col-sm-12 col-lg-3 col-md-6 px-4 px-lg-3" key={`1${index}`}>
<div className="card-booking">
<div className="browse-experiences-item">
<div className="img-wrapper">
<span className="image-container">
<img layout="fill" alt="" className="image img-fluid" src={cleanImage(data.attributes.experience?.data.attributes.image?.data?.attributes)} />
</span>
{data.attributes.experience?.data.attributes.rating > 100 && <div className="top-rated">Top Rated</div>}
</div>
<div className="info">
<div className="top-name">
<div className="title">{data.attributes.experience?.data?.attributes?.name}</div>
<div className="rating-wishlist">
{data.attributes.experience?.data?.attributes?.reviews?.data.length > 0 && (
<div className="rating">
{<span className="number">{calculateRating(data.attributes.experience?.data?.attributes?.reviews.data)}</span>}
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" />
</span>
</div>
)}
</div>
</div>
<div className="">
<p>Enquired for date: {data.attributes.date}</p>
</div>
<div className="discription">
<span>
{data.attributes.experience?.data?.attributes?.description.slice(0, 52)}...{" "}
<Link href={`/activities/${data.attributes.experience?.data.id}`} prefetch>
Read More
</Link>
</span>
</div>
<div className="price">${data.attributes.experience?.data?.attributes?.pricePerPerson}</div>
<div className="detail">
<div className="">Includes taxes & Fees</div>
</div>
<div className="explore-now">
<ActiveLink href={`/activities/${data.attributes.experience?.data.id}`} prefetch>
<Button variant="primary">Explore Now</Button>
</ActiveLink>
</div>
</div>
</div>
</div>
</div>
))}
</div>
) : (
<div className="container">
<div className="py-5">
<div className="row">
{[1, 2, 3].map(() => (
<div className="col-lg-3 col-md-4 col-sm-12">
<div className="d-inline-flex flex-column">
<Skeleton.Button active style={{ height: 250, width: 290 }} />
<Skeleton.Button active style={{ marginTop: 10, width: 120 }} />
</div>
</div>
))}
</div>
</div>
</div>
</Fragment>
)
}
</div>
)}
</div>
</div>
</div>
</Fragment>
);
};
export default MyEnquires;
\ No newline at end of file
export default MyEnquires;
pages/activities/[id].js
......@@ -3,17 +3,21 @@ import { useDispatch } from "react-redux";
import Detail from "../../components/detail/Detail";
import Layout from "../../components/layout/Layout";
import { getActivityById } from "../../redux/actions/activityAction";
import { loadUser } from "../../redux/actions/userActions";
import { getCurrentEndUser, loadUser } from "../../redux/actions/userActions";
import { wrapper } from "../../redux/store";
import { getFaqs } from "../../redux/actions/faqsAction";
import { getReviewsAction } from "../../redux/actions/reviewsAction";
import { useRouter } from "next/router";
const ActivityDetailPage = () => {
const router = useRouter()
const dispatch = useDispatch();
useEffect(() => {
dispatch(loadUser());
}, []);
useEffect(() => {
dispatch(getCurrentEndUser());
}, [router]);
return (
<Layout>
<Detail />
......
pages/user/my-enquires/index.js
import React from "react";
import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import Layout from "../../../components/layout/Layout";
import MyBookings from "../../../components/user/MyBookings";
import MyEnquires from "../../../components/user/MyEnquires";
import { getEnquiriesByEndUser } from "../../../redux/actions/enquiryAction";
export default function UserMyEnquiresPage() {
const { endUser } = useSelector(state => state.endUser);
console.log("endUser", endUser);
const dispatch = useDispatch();
useEffect(() => {
if (endUser) {
dispatch(getEnquiriesByEndUser({ endUserId: endUser.id }));
}
}, [endUser]);
return (
<Layout>
<MyEnquires />
</Layout>
);
};
\ No newline at end of file
return (
<Layout>
<MyEnquires />
</Layout>
);
}
redux/actions/enquiryAction.js
......@@ -8,6 +8,9 @@ import {
GET_ENQUIRIES_BY_ADMIN_FAIL,
GET_ENQUIRIES_BY_ADMIN_REQUEST,
GET_ENQUIRIES_BY_ADMIN_SUCCESS,
GET_ENQUIRIES_BY_ENDUSER_FAIL,
GET_ENQUIRIES_BY_ENDUSER_REQUEST,
GET_ENQUIRIES_BY_ENDUSER_SUCCESS,
GET_ENQUIRIES_BY_VENDOR_FAIL,
GET_ENQUIRIES_BY_VENDOR_REQUEST,
GET_ENQUIRIES_BY_VENDOR_SUCCESS
......@@ -148,6 +151,57 @@ export const getEnquiriesByAdmin = () => async dispatch => {
});
}
};
export const getEnquiriesByEndUser =
({ endUserId }) =>
async dispatch => {
try {
dispatch({
type: GET_ENQUIRIES_BY_ENDUSER_REQUEST,
loading: true
});
const session = await getSession();
if (!session) {
return;
}
const config = {
headers: {
"Content-type": "application/json",
Authorization: `Bearer ${session.jwt}`
}
};
console.log("res enq");
const query = {
filters: {
end_user: {
id: {
$eq: endUserId
}
}
},
populate: ["vendor", "experience", "end_user", "experience.image", "experience.reviews"],
sort: ["createdAt:desc"]
};
const queryString = qs.stringify(query, {
encodeValuesOnly: true
});
const response = await axios.get(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/enquires/?${queryString}`, config);
dispatch({
type: GET_ENQUIRIES_BY_ENDUSER_SUCCESS,
payload: response.data.data,
loading: false
});
} catch (error) {
dispatch({
type: GET_ENQUIRIES_BY_ENDUSER_FAIL,
payload: error.response.data
});
}
};
export const changeEnquiryStatus = async ({ status, id }) => {
try {
const session = await getSession();
......
redux/constants/enquiryConstants.js
......@@ -10,6 +10,10 @@ export const GET_ENQUIRIES_BY_ADMIN_REQUEST = "GET_ENQUIRIES_BY_ADMIN_REQUEST";
export const GET_ENQUIRIES_BY_ADMIN_SUCCESS = "GET_ENQUIRIES_BY_ADMIN_SUCCESS";
export const GET_ENQUIRIES_BY_ADMIN_FAIL = "GET_ENQUIRIES_BY_ADMIN_FAIL";
export const GET_ENQUIRIES_BY_ENDUSER_REQUEST = "GET_ENQUIRIES_BY_ENDUSER_REQUEST";
export const GET_ENQUIRIES_BY_ENDUSER_SUCCESS = "GET_ENQUIRIES_BY_ENDUSER_SUCCESS";
export const GET_ENQUIRIES_BY_ENDUSER_FAIL = "GET_ENQUIRIES_BY_ENDUSER_FAIL";
export const CLEAR_ERRORS = "CLEAR_ERRORS";
// export const TOGGLE_SUCCESS
\ No newline at end of file
redux/reducers/enquiryReducer.js
......@@ -5,6 +5,9 @@ import {
GET_ENQUIRIES_BY_ADMIN_FAIL,
GET_ENQUIRIES_BY_ADMIN_REQUEST,
GET_ENQUIRIES_BY_ADMIN_SUCCESS,
GET_ENQUIRIES_BY_ENDUSER_FAIL,
GET_ENQUIRIES_BY_ENDUSER_REQUEST,
GET_ENQUIRIES_BY_ENDUSER_SUCCESS,
GET_ENQUIRIES_BY_VENDOR_FAIL,
GET_ENQUIRIES_BY_VENDOR_REQUEST,
GET_ENQUIRIES_BY_VENDOR_SUCCESS
......@@ -78,3 +81,26 @@ export const getEnquiriesByVendorReducer = (state = { enquiriesByAdmin: null },
return state;
}
};
export const getEnquiriesByEndUserReducer = (state = { enquiriesByEndUser: null }, action) => {
switch (action.type) {
case GET_ENQUIRIES_BY_ENDUSER_REQUEST:
return {
loading: true
};
case GET_ENQUIRIES_BY_ENDUSER_SUCCESS:
return {
loading: false,
enquiriesByEndUser: action.payload
};
case GET_ENQUIRIES_BY_ENDUSER_FAIL:
return {
loading: false,
error: action.payload.error.message
};
default:
return state;
}
};
redux/reducers/reducers.js
......@@ -2,10 +2,17 @@ import { combineReducers } from "redux";
import { projectReducer, projectsReducer, similarProjectsReducer } from "./projectsReducer";
import { townshipReducer, townshipsReducer } from "./townshipsReducer";
import { authReducer, forgotPasswordReducer, getEndUserReducer, loadedUserReducer, resetPasswordReducer, userReducer } from "./userReducers";
import { enquiryReducer, getEnquiriesByVendorReducer, getEnquiriesReducer } from "./enquiryReducer";
import { enquiryReducer, getEnquiriesByEndUserReducer, getEnquiriesByVendorReducer, getEnquiriesReducer } from "./enquiryReducer";
import { displayEnquireNowReducer } from "./enquireNowModalReducer";
import { getAllVendorsReducer, getVendorDetailsReducer, loggedInVendorReducer, updateVendorReducer } from "./vendorReducers";
import { createActivityReducer, getActivitiesReducer, getActivityByIdReducer, getWishlistsReducer, setActivityFilterReducer, updateActivityByIdReducer } from "./activitiesReducer";
import {
createActivityReducer,
getActivitiesReducer,
getActivityByIdReducer,
getWishlistsReducer,
setActivityFilterReducer,
updateActivityByIdReducer
} from "./activitiesReducer";
import { getAllCategoriesReducer, getAllSubCategoriesReducer } from "./categoryReducer";
import { getAllTestimonialReducer } from "./testimonialReducer";
import { blogReducer, blogsReducer } from "./blogReducer";
......@@ -26,7 +33,7 @@ const reducers = combineReducers({
resetPassword: resetPasswordReducer,
similarProjects: similarProjectsReducer,
enquiry: enquiryReducer,
displayEnquireNow:displayEnquireNowReducer,
displayEnquireNow: displayEnquireNowReducer,
loggedInVendor: loggedInVendorReducer,
updatedVendorData: updateVendorReducer,
vendorDetails: getVendorDetailsReducer,
......@@ -49,6 +56,7 @@ const reducers = combineReducers({
reviews: reviewsReducer,
giftCard: giftCardReducer,
enquiriesByAdmin: getEnquiriesByVendorReducer,
enquiriesByEndUser: getEnquiriesByEndUserReducer,
});
export default reducers;
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!