Skip to content

Jay Mehta / zango-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 61d982d8 by jaymehta
Options

enquiries

1 parent 2fb6bccd
Inline Side-by-side
Showing 13 changed files with 597 additions and 247 deletions
components/detail/DetailGallery.js
...@@ -95,57 +95,59 @@ const DetailGallery = ({ activityById }) => { ...@@ -95,57 +95,59 @@ const DetailGallery = ({ activityById }) => {
</div> </div>
</div> </div>
<div className="row hide-on-mobile"> <div className="row hide-on-mobile">
<div className="col-12"> {activityById && (
<ul className="availability-wrappper"> <div className="col-12">
<li> <ul className="availability-wrappper">
<span className="image-container"> <li>
<Image layout="fill" alt="" className="image img-fluid" src="/images/availability/month.svg" /> <span className="image-container">
</span> <Image layout="fill" alt="" className="image img-fluid" src="/images/availability/month.svg" />
From: {activityById.data.attributes.fromDate} To: {activityById.data.attributes.toDate} </span>
</li> From: {activityById.data.attributes.fromDate} To: {activityById.data.attributes.toDate}
<li> </li>
<span className="image-container"> <li>
<Image layout="fill" alt="" className="image img-fluid" src="/images/availability/time.svg" /> <span className="image-container">
</span> <Image layout="fill" alt="" className="image img-fluid" src="/images/availability/time.svg" />
Time: {activityById.data.attributes.fromTime} - {activityById.data.attributes.toTime} </span>
</li> Time: {activityById.data.attributes.fromTime} - {activityById.data.attributes.toTime}
<li> </li>
<span className="image-container"> <li>
<Image layout="fill" alt="" className="image img-fluid" src="/images/availability/duration.svg" /> <span className="image-container">
</span> <Image layout="fill" alt="" className="image img-fluid" src="/images/availability/duration.svg" />
Duration: {activityById.data.attributes.minimumDuration}-{activityById.data.attributes.maximumDuration} Hours </span>
</li> Duration: {activityById.data.attributes.minimumDuration}-{activityById.data.attributes.maximumDuration} Hours
<li> </li>
<span className="image-container"> <li>
<Image layout="fill" alt="" className="image img-fluid" src="/images/availability/contact.svg" /> <span className="image-container">
</span> <Image layout="fill" alt="" className="image img-fluid" src="/images/availability/contact.svg" />
Contact: {activityById.data.attributes.phoneNumber} </span>
</li> Contact: {activityById.data.attributes.phoneNumber}
<li> </li>
<span className="image-container"> <li>
<Image layout="fill" alt="" className="image img-fluid" src="/images/availability/date.svg" /> <span className="image-container">
</span> <Image layout="fill" alt="" className="image img-fluid" src="/images/availability/date.svg" />
Active on:{" "} </span>
{returnAvilablleDaysArray({ data: activityById.data }) Active on:{" "}
.map(item => { {returnAvilablleDaysArray({ data: activityById.data })
return item.name; .map(item => {
}) return item.name;
.join(", ")} })
</li> .join(", ")}
<li> </li>
<span className="image-container"> <li>
<Image layout="fill" alt="" className="image img-fluid" src="/images/availability/age.svg" /> <span className="image-container">
</span> <Image layout="fill" alt="" className="image img-fluid" src="/images/availability/age.svg" />
Age: {activityById.data.attributes.ageLowerLimit}+ </span>
<div className="info-div"> Age: {activityById.data.attributes.ageLowerLimit}+
<a className="image-container info" onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}> <div className="info-div">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/info.svg" /> <a className="image-container info" onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
</a> <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/info.svg" />
{showInfo && <div className="info-text">13+. Climbers aged 13-17 must be accompanied by an adult (18+)</div>} </a>
</div> {showInfo && <div className="info-text">13+. Climbers aged 13-17 must be accompanied by an adult (18+)</div>}
</li> </div>
</ul> </li>
</div> </ul>
</div>
)}
</div> </div>
</div> </div>
</> </>
......
components/detail/DetailInfo.js
import Image from "next/image"; import Image from "next/image";
import React, { Fragment, useEffect, useState } from "react"; import React, { Fragment, useEffect, useState } from "react";
import { Button } from "react-bootstrap"; import { Button, Modal } from "react-bootstrap";
import { fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvariants.js"; import { fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvariants.js";
import { motion } from "framer-motion"; import { motion } from "framer-motion";
import { getSession } from "next-auth/react"; import { getSession } from "next-auth/react";
import { DatePicker } from "antd"; import { DatePicker, Input } from "antd";
import { date } from "yup"; import { date } from "yup";
import { sendEnquiry } from "../../redux/actions/enquiryAction.js"; import { sendEnquiry } from "../../redux/actions/enquiryAction.js";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
...@@ -12,9 +12,10 @@ import { toast } from "react-toastify"; ...@@ -12,9 +12,10 @@ import { toast } from "react-toastify";
import { getCurrentEndUser } from "../../redux/actions/userActions.js"; import { getCurrentEndUser } from "../../redux/actions/userActions.js";
import { Loader } from "react-bootstrap-typeahead"; import { Loader } from "react-bootstrap-typeahead";
import { useRouter } from "next/router.js"; import { useRouter } from "next/router.js";
import Link from "next/link.js";
const DetailInfo = ({ activityById }) => { const DetailInfo = ({ activityById }) => {
const router = useRouter() const router = useRouter();
const dispatch = useDispatch(); const dispatch = useDispatch();
useEffect(() => { useEffect(() => {
dispatch(getCurrentEndUser()); dispatch(getCurrentEndUser());
...@@ -23,6 +24,9 @@ const DetailInfo = ({ activityById }) => { ...@@ -23,6 +24,9 @@ const DetailInfo = ({ activityById }) => {
// const [session, setSession] = useState(null); // const [session, setSession] = useState(null);
const [enqDate, setenqDate] = useState(); const [enqDate, setenqDate] = useState();
const [loading, setloading] = useState(false); const [loading, setloading] = useState(false);
const [quantity, setquantity] = useState();
const [loginModal, setloginModal] = useState(false);
const [enquiryModal, setenquiryModal] = useState(false);
const { loadedUser } = useSelector(state => state.loadedUser); const { loadedUser } = useSelector(state => state.loadedUser);
const { endUser } = useSelector(state => state.endUser); const { endUser } = useSelector(state => state.endUser);
// useEffect(() => { // useEffect(() => {
...@@ -48,96 +52,104 @@ const DetailInfo = ({ activityById }) => { ...@@ -48,96 +52,104 @@ const DetailInfo = ({ activityById }) => {
return ( return (
<Fragment> <Fragment>
<div className="row"> <div className="row">
<div className="col-12"> {activityById && (
<div className="product-info"> <div className="col-12">
<div className="hide-on-mobile"> <div className="product-info">
<div className="top-row"> <div className="hide-on-mobile">
<div className="most-booked">Most Booked</div> <div className="top-row">
<div className="most-booked">Most Booked</div>
<div className="wishlist-share"> <div className="wishlist-share">
<a href="#" className={`add-to-wishlist ${isToggled ? "active" : ""}`} onClick={handleClick}> <a href="#" className={`add-to-wishlist ${isToggled ? "active" : ""}`} onClick={handleClick}>
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src={isToggled ? "/images/icons/wishlist-01-active.svg" : "/images/icons/wishlist-01.svg"} />
</span>
</a>
<a href="#" className="add-to-forwardt">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/forward.svg" />
</span>
</a>
</div>
</div>
<motion.div variants={slideFromRight(0.4)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
<div className="product-name">{activityById.data.attributes.name}</div>
</motion.div>
</div>
<div className="product-reviews">
<span className="rating">{activityById.data.attributes.rating}</span>
<span className="review">1,365 Reviews</span>
<span className="star">
<a href="">
<span className="image-container"> <span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src={isToggled ? "/images/icons/wishlist-01-active.svg" : "/images/icons/wishlist-01.svg"} /> <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" />
</span> </span>
</a> </a>
<a href="#" className="add-to-forwardt"> <a href="">
<span className="image-container"> <span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/forward.svg" /> <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" />
</span> </span>
</a> </a>
</div> <a href="">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" />
</span>
</a>
<a href="">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" />
</span>
</a>
<a href="">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" />
</span>
</a>
</span>
</div> </div>
<motion.div variants={slideFromRight(0.4)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}> <div className="mb-2">Per Person</div>
<div className="product-name">{activityById.data.attributes.name}</div> <div className="price">
</motion.div> ${activityById.data.attributes.pricePerPerson} {activityById.data.attributes.offers && <span>{activityById.data.attributes.offers}% Off</span>}
</div> </div>
<div className="product-reviews"> <div className="mb-4">{activityById.data.attributes.description}</div>
<span className="rating">{activityById.data.attributes.rating}</span> <div className="location">
<span className="review">1,365 Reviews</span> Location & Address <span>{activityById.data.attributes.activityType}</span>
<span className="star"> </div>
<a href=""> <div className="mb-2">Chelsea </div>
<span className="image-container"> <div className="">{activityById.data.attributes.address}</div>
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" /> <div className="btn-row">
</span> <Button
</a> disabled={loading}
<a href=""> onClick={() => {
<span className="image-container"> if (!endUser) {
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" /> setloginModal(true);
</span> } else {
</a> setenquiryModal(true);
<a href=""> }
<span className="image-container"> }}
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" /> variant="primary me-3"
</span> >
</a> {loading ? <Loader /> : "Enquire Now"}
<a href=""> </Button>
<span className="image-container"> <Button
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" /> onClick={() => {
</span> if (!endUser) {
</a> setloginModal(true);
<a href=""> } else {
<span className="image-container"> router.push("/gift-card");
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" /> }
}}
variant="secondary"
>
Gift Now
<span className="image-container btn-gift">
<Image layout="fill" className="image img-fluid" src="/images/icons/gift-card-icon.svg" />
</span> </span>
</a> </Button>
</span> </div>
</div>
<div className="mb-2">Per Person</div>
<div className="price">
${activityById.data.attributes.pricePerPerson} {activityById.data.attributes.offers && <span>{activityById.data.attributes.offers}% Off</span>}
</div>
<div className="mb-4">{activityById.data.attributes.description}</div>
<div className="location">
Location & Address <span>{activityById.data.attributes.activityType}</span>
</div>
<div className="mb-2">Chelsea </div>
<div className="">{activityById.data.attributes.address}</div>
<div className="btn-row">
<Button
disabled={loading}
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 });
console.log("res", res);
toast.success("Enquiry sent successfully, our team will get back to you shortly! Thank you!");
setloading(false);
}}
variant="primary me-3"
>
{loading ? <Loader /> : "Enquire Now"}
</Button>
<Button onClick={() => {
router.push("/gift-card")
}} variant="secondary">
Gift Now
<span className="image-container btn-gift">
<Image layout="fill" className="image img-fluid" src="/images/icons/gift-card-icon.svg" />
</span>
</Button>
</div> </div>
</div> </div>
</div> )}
</div> </div>
<div className="row hide-on-desktop"> <div className="row hide-on-desktop">
<div className="col-12"> <div className="col-12">
...@@ -187,6 +199,78 @@ const DetailInfo = ({ activityById }) => { ...@@ -187,6 +199,78 @@ const DetailInfo = ({ activityById }) => {
</ul> </ul>
</div> </div>
</div> </div>
<Modal
show={enquiryModal}
onHide={() => {
setenquiryModal(false);
setquantity();
}}
>
<Modal.Header>Send Enquiry</Modal.Header>
<Modal.Body>
<div>Experience Name:</div>
<div className="" style={{ fontSize: "22px", fontWeight: "bold" }}>
{activityById.data.attributes.name}
</div>
<div className="mt-2">Full Name:</div>
<div className="" style={{ fontWeight: "bold" }}>
{endUser?.attributes.name}
</div>
<div className="mt-2">Email ID:</div>
<div className="" style={{ fontSize: "22px", fontWeight: "bold" }}>
{endUser?.attributes.email}
</div>
<div className="mt-2">Quantity:</div>
<Input
type="number"
onChange={e => {
// console.log("e", e);
setquantity(e.target.value);
}}
></Input>
<Button
disabled={loading || !quantity}
className="mt-2"
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 });
console.log("res", res);
toast.success("Enquiry sent successfully, our team will get back to you shortly! Thank you!");
setloading(false);
setenquiryModal(false);
setquantity();
}}
>
{loading ? <Loader /> : "Submit"}
</Button>
</Modal.Body>
</Modal>
<Modal
show={loginModal}
centered
onHide={() => {
setloginModal(false);
}}
>
<Modal.Header closeButton>Please Log in</Modal.Header>
<Modal.Body>
<div className="text-center d-flex justify-content-center row">
<div className="col-12 m-2">Please login to avail this feature.</div>
<Button
className="col-6 m-2"
onClick={() => {
router.push("/login/user");
}}
>
Login
</Button>
<Link className="m-2" href={"/signup/user"}>
Or click here to sign up.
</Link>
</div>
</Modal.Body>
</Modal>
</Fragment> </Fragment>
); );
}; };
......
components/gift-card/GiftCard.js
...@@ -8,6 +8,7 @@ import axios from "axios"; ...@@ -8,6 +8,7 @@ import axios from "axios";
import { toast } from "react-toastify"; import { toast } from "react-toastify";
import { Loader } from "react-bootstrap-typeahead"; import { Loader } from "react-bootstrap-typeahead";
import { finishVendorOtpVerification } from "../../redux/actions/vendorActions"; import { finishVendorOtpVerification } from "../../redux/actions/vendorActions";
import { useRouter } from "next/router";
// import { getCurrentEndUser } from "../../redux/actions/userActions"; // import { getCurrentEndUser } from "../../redux/actions/userActions";
const validationSchema = Yup.object().shape({ const validationSchema = Yup.object().shape({
...@@ -21,6 +22,7 @@ const validationSchema = Yup.object().shape({ ...@@ -21,6 +22,7 @@ const validationSchema = Yup.object().shape({
let formik1; let formik1;
const GiftCard = () => { const GiftCard = () => {
const router = useRouter()
const dispatch = useDispatch(); const dispatch = useDispatch();
// useEffect(() => { // useEffect(() => {
// dispatch(getCurrentEndUser()); // dispatch(getCurrentEndUser());
...@@ -389,11 +391,13 @@ const GiftCard = () => { ...@@ -389,11 +391,13 @@ const GiftCard = () => {
<div className="col-12"> <div className="col-12">
<div className="result-box"> <div className="result-box">
<p> <p>
“Sorry, unable to process the Gift Card now. Gift card sent for approval, please wait till the vendor contacts you
<br /> This feature will be available shortly.” <br /> Thank you.
</p> </p>
<div> <div>
<button className="btn btn-primary" type="button" onClick={handleclose}> <button className="btn btn-primary" type="button" onClick={()=>{
router.push("/listing")
}}>
Browse Experiences Browse Experiences
</button> </button>
</div> </div>
......
components/layout/VendorDashboardSidebar.js
import Image from "next/image"; import Image from "next/image";
import Link from "next/link";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import React, { useState } from "react"; import React, { useState } from "react";
import { ToastContainer } from "react-toastify"; import { ToastContainer } from "react-toastify";
...@@ -21,22 +22,28 @@ const Sidebar = () => { ...@@ -21,22 +22,28 @@ const Sidebar = () => {
</button> */} </button> */}
<ul> <ul>
<li className={router.pathname === "/vendor/dashboard" ? "active" : ""}> <li className={router.pathname === "/vendor/dashboard" ? "active" : ""}>
<a href="/vendor/dashboard"> <span className="d-flex">
<Image alt="" width={22} height={15} src="/images/vendor/icon-dashboard.svg" /> <Image className="" alt="" width={22} height={15} src="/images/vendor/icon-dashboard.svg" />
<span>Dashboard</span> <div className="mx-2 text-center">
</a> <Link href="/vendor/dashboard">Dashboard</Link>
</div>
</span>
</li> </li>
<li className={router.pathname === "/vendor/orders" ? "active" : ""}> <li className={router.pathname === "/vendor/enquiries" ? "active" : ""}>
<a href="/vendor/orders"> <span className="d-flex">
<Image alt="" width={22} height={15} src="/images/vendor/icon-orders.svg" /> <Image alt="" width={22} height={15} src="/images/vendor/icon-orders.svg" />
<span>Orders</span> <div className="mx-2 text-center">
</a> <Link href="/vendor/enquiries">Enquiries</Link>
</div>
</span>
</li> </li>
<li className={router.pathname === "/vendor/activities" ? "active" : ""}> <li className={router.pathname === "/vendor/activities" ? "active" : ""}>
<a href="/vendor/activities"> <span className="d-flex">
<Image alt="" width={22} height={15} src="/images/vendor/icon-activities.svg" /> <Image alt="" width={22} height={15} src="/images/vendor/icon-activities.svg" />
<span>Activities</span> <div className="mx-2 text-center">
</a> <Link href="/vendor/activities">Activities</Link>
</div>
</span>
</li> </li>
</ul> </ul>
</div> </div>
......
components/vendor/ActivityListingRBAC.js
...@@ -170,10 +170,10 @@ export const ActivityListingRBAC = ({ setactivityDetailInfo, setShowActivityDeta ...@@ -170,10 +170,10 @@ export const ActivityListingRBAC = ({ setactivityDetailInfo, setShowActivityDeta
}; };
}); });
const categoryFilterArray = categories.data.map((item, index) => { const categoryFilterArray = categories?.data.map((item, index) => {
return { text: item.attributes.name, value: item.attributes.name }; return { text: item.attributes.name, value: item.attributes.name };
}); });
const subCategoryFilterArray = subCategories.data.map((item, index) => { const subCategoryFilterArray = subCategories?.data.map((item, index) => {
return { text: item.attributes.name, value: item.attributes.name }; return { text: item.attributes.name, value: item.attributes.name };
}); });
setdata(initialData); setdata(initialData);
......
components/vendor/OrderListing.js
import { Fragment } from "react"; import { EyeOutlined, EyeTwoTone } from "@ant-design/icons";
import { Button, Image, Table } from "react-bootstrap"; import { Space, Table, Tag } from "antd";
import { Fragment, useEffect, useState } from "react";
import { Button, Image, Modal } from "react-bootstrap";
import { useDispatch, useSelector } from "react-redux";
import { toast } from "react-toastify";
import { getActivitiesByVendor } from "../../redux/actions/activityAction";
import { changeEnquiryStatus, getEnquiriesByVendor } from "../../redux/actions/enquiryAction";
const OrderListing = () => { const OrderListing = () => {
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9] const dispatch = useDispatch();
return ( useEffect(() => {
<Fragment> dispatch(getEnquiriesByVendor());
<div className="row"> dispatch(getActivitiesByVendor());
<div className="col-12 col-lg-12"> }, []);
<div className="rightContent"> const { enquiriesByVendor } = useSelector(state => state.enquiriesByVendor);
<div className="d-flex align-items-center justify-content-between px-2 mb-2"> const { allActivitiesData } = useSelector(state => state.allActivitiesData);
<div> const [data, setData] = useState();
<h2>Orders</h2> const [activityFilters, setactivityFilters] = useState();
<p>View all the orders</p> const [enquiryDetails, setenquiryDetails] = useState();
</div> const [showEnquiryModal, setshowEnquiryModal] = useState(false);
<div> console.log("enquiriesByVendor", enquiriesByVendor);
<Button type="button" variant="" className="btnAdd m-0"> const columns = [
<Image alt="" width="16" height="16" src="/images/vendor/icon-filter.svg" className="me-2"/> Filter {
</Button> title: "Activity name",
</div> dataIndex: "activityName",
</div> filters: activityFilters,
<Table responsive className="listingTable"> // filterMode: "tree",
<thead> filterSearch: true,
<tr> onFilter: (value, record) => {
<th> console.log("value", value, record.name.startsWith(value));
<label className="check-container mb-0 ps-2" htmlFor="checkh"> return record.activityName.startsWith(value);
<input },
type="checkbox" width: "25%"
id="checkh" },
className="check-box" {
/> title: "Name",
<span className="checkmark"></span> dataIndex: "name",
</label> sorter: (a, b) => a.age - b.age,
</th> width: "25%"
<th>Order ID</th> },
<th>Order Date</th> {
<th>Items</th> title: "Status",
<th>Total Amount</th> dataIndex: "status",
<th>Status</th> filters: [
<th></th> {
</tr> text: "pending",
</thead> value: "pending"
<tbody> },
{array.map((data, index) => ( {
<tr key={index}> text: "closed",
<td> value: "closed"
<label className="check-container mb-0 ps-2" htmlFor={`check${index}`}> }
<input ],
type="checkbox" onFilter: (value, record) => record.status.startsWith(value),
id={`check${index}`} filterSearch: true,
className="check-box" width: "25%",
/> render: tag => (
<span className="checkmark"></span> <span>
</label> {tag == "pending" ? (
</td> <Tag color={"red"} key={tag}>
<td>ID_8797878</td> {tag.toUpperCase()}
<td>29 Jan 2024</td> </Tag>
<td>Edge City Climb <span style={{color:"blue"}}>+3more</span></td> ) : (
<td>$ 499</td> <Tag color={"blue"} key={tag}>
<td><div className="statusDiv processing">Processing</div></td> {tag.toUpperCase()}
<td><Image alt="" width={20} height={20} src="/images/vendor/icon-more-vertical.svg" /></td> </Tag>
</tr> )}
))} </span>
<tr> )
<td colSpan={7}>Showing Results 10 of 1567</td> },
</tr> {
</tbody> title: "Quantity",
</Table> dataIndex: "quantity",
</div> // filters: [
</div> // {
// text: "London",
// value: "London"
// },
// {
// text: "New York",
// value: "New York"
// }
// ],
// onFilter: (value, record) => record.address.startsWith(value),
// filterSearch: true,
width: "15%"
},
{
title: "Action",
width: "25%",
render: (_, record) => (
<Space size="middle">
<EyeTwoTone
onClick={() => {
setshowEnquiryModal(true);
console.log(record);
setenquiryDetails(enquiriesByVendor.filter(item => item.id == record.key));
}}
style={{ fontSize: "22px" }}
/>
{/* <a>Delete</a> */}
</Space>
)
}
];
useEffect(() => {
let rawData =
enquiriesByVendor &&
enquiriesByVendor.map(item => {
return {
key: item.id,
name: item.attributes.end_user.data.attributes.name,
quantity: item.attributes.quantity,
status: item.attributes.status,
activityName: item.attributes.experience.data.attributes.name
};
});
setData(rawData);
}, [enquiriesByVendor]);
useEffect(() => {
const activityFiltersRaw =
allActivitiesData &&
allActivitiesData.data.map(item => {
return {
text: item.attributes.name,
value: item.attributes.name
};
});
setactivityFilters(activityFiltersRaw);
}, [allActivitiesData]);
const onChange = (pagination, filters, sorter, extra) => {
// console.log("params", pagination, filters, sorter, extra);
};
return (
<Fragment>
<div className="row">
<div className="col-12 col-lg-12">
<div className="rightContent">
<div className="d-flex align-items-center justify-content-between px-2 mb-2">
<div>
<h2>Orders</h2>
<p>View all the orders</p>
</div>
<div>
{/* <Button type="button" variant="" className="btnAdd m-0">
<Image alt="" width="16" height="16" src="/images/vendor/icon-filter.svg" className="me-2" /> Filter
</Button> */}
</div>
</div> </div>
</Fragment> <Table columns={columns} dataSource={data} onChange={onChange} />
); </div>
</div>
</div>
<Modal
show={showEnquiryModal}
onHide={() => {
setshowEnquiryModal(false);
}}
>
{console.log("enquiryDetails", enquiryDetails)}
<Modal.Header>Enquiry Details</Modal.Header>
<Modal.Body>
{enquiryDetails && enquiryDetails.length > 0 && (
<>
<div className="p-2">Name: {enquiryDetails[0].attributes.end_user.data.attributes.name}</div>
<div className="p-2">Phone number: {enquiryDetails[0].attributes.end_user.data.attributes.phone}</div>
<div className="p-2">Email: {enquiryDetails[0].attributes.end_user.data.attributes.email}</div>
<div className="p-2">
Status: <Tag color={enquiryDetails[0].attributes.status == "pending" ? "red" : "blueI"}>{enquiryDetails[0].attributes.status.toUpperCase()}</Tag>
</div>
<Button
onClick={async () => {
if (enquiryDetails[0].attributes.status == "pending") {
let res = await changeEnquiryStatus({ status: "closed", id: enquiryDetails[0].id });
console.log("res", res);
} else {
let res = await changeEnquiryStatus({ status: "pending", id: enquiryDetails[0].id });
console.log("res", res);
}
await dispatch(getEnquiriesByVendor());
toast.success("Status changed");
setshowEnquiryModal(false);
}}
>
Change Status
</Button>
</>
)}
</Modal.Body>
</Modal>
</Fragment>
);
}; };
export default OrderListing; export default OrderListing;
pages/vendor/orders/index.js → pages/vendor/enquiries/index.js
...@@ -6,30 +6,28 @@ import Sidebar from "../../../components/layout/VendorDashboardSidebar"; ...@@ -6,30 +6,28 @@ import Sidebar from "../../../components/layout/VendorDashboardSidebar";
// import { loadUser } from "../redux/actions/userActions"; // import { loadUser } from "../redux/actions/userActions";
// import { wrapper } from "../redux/store"; // import { wrapper } from "../redux/store";
export default function OrderListingPage() { const OrderListingPage = () => {
return (
return ( <Layout>
<Layout> <div className="sidebarContainer">
<div className="sidebarContainer"> <Sidebar />
<Sidebar /> <div className="content">
<div className="content"> <OrderListing />
<OrderListing /> </div>
</div> </div>
</div> </Layout>
</Layout> );
);
}; };
export default OrderListingPage;
/** For server side rendering */ /** For server side rendering */
export const getServerSideProps = wrapper.getServerSideProps(store => async ({ req, query }) => { export const getServerSideProps = wrapper.getServerSideProps(store => async ({ req, query }) => {
// Get the menu data. // Get the menu data.
// get the locations data.
// await store.dispatch(getVendorDetails())
return { // get the locations data.
props: {}, // await store.dispatch(loadUser());
}; return {
props: {}
};
}); });
redux/actions/activityAction.js
...@@ -82,7 +82,7 @@ export const getActivitiesByVendor = () => async dispatch => { ...@@ -82,7 +82,7 @@ export const getActivitiesByVendor = () => async dispatch => {
const vendorResponse = await axios.get(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/vendors/?${vendorQueryString}`, vendorConfig); const vendorResponse = await axios.get(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/vendors/?${vendorQueryString}`, vendorConfig);
console.log("vendorResponse", vendorResponse.data.data[0].id); // console.log("vendorResponse", vendorResponse.data.data[0].id);
// const loggedinVendor = await getLoggedInVendor() // const loggedinVendor = await getLoggedInVendor()
// console.log("loggedinVendor", loggedinVendor); // console.log("loggedinVendor", loggedinVendor);
if (!session) { if (!session) {
......
redux/actions/enquiryAction.js
import axios from "axios"; import axios from "axios";
import { CLEAR_ERRORS, ENQUIRY_SUBMIT_FAIL, ENQUIRY_SUBMIT_REQUEST, ENQUIRY_SUBMIT_SUCCESS } from "../constants/enquiryConstants"; import { getSession } from "next-auth/react";
import {
CLEAR_ERRORS,
ENQUIRY_SUBMIT_FAIL,
ENQUIRY_SUBMIT_REQUEST,
ENQUIRY_SUBMIT_SUCCESS,
GET_ENQUIRIES_BY_VENDOR_FAIL,
GET_ENQUIRIES_BY_VENDOR_REQUEST,
GET_ENQUIRIES_BY_VENDOR_SUCCESS
} from "../constants/enquiryConstants";
import qs from "qs";
export const sendEnquiry = async ({ activityId, userId, date, vendorId }) => { export const sendEnquiry = async ({ activityId, userId, date, vendorId, quantity }) => {
const data = { const data = {
data: { data: {
experience: activityId, experience: activityId,
endUser: userId, end_user: userId,
vendor: vendorId, vendor: vendorId,
date, date,
status: "pending" status: "pending",
quantity
} }
}; };
const config = { const config = {
...@@ -28,3 +39,85 @@ export const clearErrors = () => async dispatch => { ...@@ -28,3 +39,85 @@ export const clearErrors = () => async dispatch => {
type: CLEAR_ERRORS type: CLEAR_ERRORS
}); });
}; };
export const getEnquiriesByVendor = () => async dispatch => {
try {
const session = await getSession();
if (!session) {
return;
}
const vendorConfig = {
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${session.jwt}`
}
};
const vendorQuery = {
filters: {
user: {
id: { $eq: session.id }
}
}
};
const vendorQueryString = qs.stringify(vendorQuery, {
encodeValuesOnly: true
});
const vendorResponse = await axios.get(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/vendors/?${vendorQueryString}`, vendorConfig);
console.log("session", vendorResponse.data.data[0].id);
dispatch({
type: GET_ENQUIRIES_BY_VENDOR_REQUEST
});
const config = {
headers: {
"Content-type": "application/json",
Authorization: `Bearer ${session.jwt}`
}
};
const query = {
filters: {
vendor: {
id: { $eq: vendorResponse.data.data[0].id }
}
},
populate: ["vendor", "experience", "end_user"]
};
const queryString = qs.stringify(query, {
encodeValuesOnly: true
});
// console.log("querystring", query);
const response = await axios.get(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/enquires/?${queryString}`, config);
console.log("response", response);
dispatch({
type: GET_ENQUIRIES_BY_VENDOR_SUCCESS,
payload: response.data.data
});
} catch (error) {
dispatch({
type: GET_ENQUIRIES_BY_VENDOR_FAIL,
payload: error.response.data
});
}
};
export const changeEnquiryStatus = async ({ status, id }) => {
try {
const session = await getSession();
if (!session) {
return;
}
const config = {
headers: {
"Content-type": "application/json",
Authorization: `Bearer ${session.jwt}`
}
};
const response = await axios.put(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/enquires/${id}`, { data: { status } }, config);
return response.data;
} catch (error) {}
};
redux/actions/userActions.js
...@@ -403,6 +403,9 @@ export const getCurrentEndUser = () => async dispatch => { ...@@ -403,6 +403,9 @@ export const getCurrentEndUser = () => async dispatch => {
try { try {
console.log("here action"); console.log("here action");
const session = await getSession(); const session = await getSession();
if (!session) {
return;
}
console.log("session action", session); console.log("session action", session);
dispatch({ dispatch({
type: GET_END_USER_REQUEST type: GET_END_USER_REQUEST
......
redux/constants/enquiryConstants.js
...@@ -2,6 +2,10 @@ export const ENQUIRY_SUBMIT_REQUEST = "ENQUIRY_SUBMIT_REQUEST"; ...@@ -2,6 +2,10 @@ export const ENQUIRY_SUBMIT_REQUEST = "ENQUIRY_SUBMIT_REQUEST";
export const ENQUIRY_SUBMIT_SUCCESS = "ENQUIRY_SUBMIT_SUCCESS"; export const ENQUIRY_SUBMIT_SUCCESS = "ENQUIRY_SUBMIT_SUCCESS";
export const ENQUIRY_SUBMIT_FAIL = "ENQUIRY_SUBMIT_FAIL"; export const ENQUIRY_SUBMIT_FAIL = "ENQUIRY_SUBMIT_FAIL";
export const GET_ENQUIRIES_BY_VENDOR_REQUEST = "GET_ENQUIRIES_BY_VENDOR_REQUEST";
export const GET_ENQUIRIES_BY_VENDOR_SUCCESS = "GET_ENQUIRIES_BY_VENDOR_SUCCESS";
export const GET_ENQUIRIES_BY_VENDOR_FAIL = "GET_ENQUIRIES_BY_VENDOR_FAIL";
export const CLEAR_ERRORS = "CLEAR_ERRORS"; export const CLEAR_ERRORS = "CLEAR_ERRORS";
// export const TOGGLE_SUCCESS // export const TOGGLE_SUCCESS
\ No newline at end of file \ No newline at end of file
redux/reducers/enquiryReducer.js
import { ENQUIRY_SUBMIT_FAIL, ENQUIRY_SUBMIT_REQUEST, ENQUIRY_SUBMIT_SUCCESS } from "../constants/enquiryConstants"; import {
ENQUIRY_SUBMIT_FAIL,
ENQUIRY_SUBMIT_REQUEST,
ENQUIRY_SUBMIT_SUCCESS,
GET_ENQUIRIES_BY_VENDOR_FAIL,
GET_ENQUIRIES_BY_VENDOR_REQUEST,
GET_ENQUIRIES_BY_VENDOR_SUCCESS
} from "../constants/enquiryConstants";
export const enquiryReducer = (state = { enquiry: null }, action) => { export const enquiryReducer = (state = { enquiry: null }, action) => {
switch (action.type) { switch (action.type) {
...@@ -11,7 +18,7 @@ export const enquiryReducer = (state = { enquiry: null }, action) => { ...@@ -11,7 +18,7 @@ export const enquiryReducer = (state = { enquiry: null }, action) => {
return { return {
loading: false, loading: false,
success: true, success: true,
referral: action.payload enquiry: action.payload
}; };
case ENQUIRY_SUBMIT_FAIL: case ENQUIRY_SUBMIT_FAIL:
return { return {
...@@ -24,3 +31,25 @@ export const enquiryReducer = (state = { enquiry: null }, action) => { ...@@ -24,3 +31,25 @@ export const enquiryReducer = (state = { enquiry: null }, action) => {
return state; return state;
} }
}; };
export const getEnquiriesReducer = (state = { enquiriesByVendor: null }, action) => {
switch (action.type) {
case GET_ENQUIRIES_BY_VENDOR_REQUEST:
return {
loading: true,
};
case GET_ENQUIRIES_BY_VENDOR_SUCCESS:
return {
loading: false,
enquiriesByVendor: action.payload
};
case GET_ENQUIRIES_BY_VENDOR_FAIL:
return {
loading: false,
error: action.payload.error.message
};
default:
return state;
}
};
redux/reducers/reducers.js
...@@ -2,7 +2,7 @@ import { combineReducers } from "redux"; ...@@ -2,7 +2,7 @@ import { combineReducers } from "redux";
import { projectReducer, projectsReducer, similarProjectsReducer } from "./projectsReducer"; import { projectReducer, projectsReducer, similarProjectsReducer } from "./projectsReducer";
import { townshipReducer, townshipsReducer } from "./townshipsReducer"; import { townshipReducer, townshipsReducer } from "./townshipsReducer";
import { authReducer, forgotPasswordReducer, getEndUserReducer, loadedUserReducer, resetPasswordReducer, userReducer } from "./userReducers"; import { authReducer, forgotPasswordReducer, getEndUserReducer, loadedUserReducer, resetPasswordReducer, userReducer } from "./userReducers";
import { enquiryReducer } from "./enquiryReducer"; import { enquiryReducer, getEnquiriesReducer } from "./enquiryReducer";
import { displayEnquireNowReducer } from "./enquireNowModalReducer"; import { displayEnquireNowReducer } from "./enquireNowModalReducer";
import { getAllVendorsReducer, getVendorDetailsReducer, loggedInVendorReducer, updateVendorReducer } from "./vendorReducers"; import { getAllVendorsReducer, getVendorDetailsReducer, loggedInVendorReducer, updateVendorReducer } from "./vendorReducers";
import { createActivityReducer, getActivitiesReducer, getActivityByIdReducer, updateActivityByIdReducer } from "./activitiesReducer"; import { createActivityReducer, getActivitiesReducer, getActivityByIdReducer, updateActivityByIdReducer } from "./activitiesReducer";
...@@ -39,6 +39,7 @@ const reducers = combineReducers({ ...@@ -39,6 +39,7 @@ const reducers = combineReducers({
homeBanner: getAllHomeBannerReducer, homeBanner: getAllHomeBannerReducer,
allVendors: getAllVendorsReducer, allVendors: getAllVendorsReducer,
endUser: getEndUserReducer, endUser: getEndUserReducer,
enquiriesByVendor: getEnquiriesReducer,
}); });
export default reducers; 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!