Skip to content

Jay Mehta / zango-frontend

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

css conflict merge

2 parents 4e17bce3 3f5e62d5
Inline Side-by-side
Showing 29 changed files with 1762 additions and 756 deletions
components/layout/Header.js
...@@ -6,13 +6,14 @@ import { useDispatch, useSelector } from "react-redux"; ...@@ -6,13 +6,14 @@ import { useDispatch, useSelector } from "react-redux";
import { cleanImage } from "../../services/imageHandling"; import { cleanImage } from "../../services/imageHandling";
import { Button, Container, Form, Nav, Navbar } from "react-bootstrap"; import { Button, Container, Form, Nav, Navbar } from "react-bootstrap";
import { loadUser } from "../../redux/actions/userActions"; import { loadUser } from "../../redux/actions/userActions";
import { useRouter } from "next/router";
const Header = () => { const Header = () => {
const { user, error } = useSelector(state => state.loadedUser); const { user, error } = useSelector(state => state.loadedUser);
const dispatch = useDispatch(); const dispatch = useDispatch();
// console.log("user", user); // console.log("user", user);
const [isSticky, setIsSticky] = useState(false); const [isSticky, setIsSticky] = useState(false);
const router = useRouter();
useEffect(() => { useEffect(() => {
const handleScroll = () => { const handleScroll = () => {
// Check if the scroll position is greater than a certain threshold // Check if the scroll position is greater than a certain threshold
...@@ -66,8 +67,10 @@ const Header = () => { ...@@ -66,8 +67,10 @@ const Header = () => {
</div> </div>
<p>{user.phone}</p> <p>{user.phone}</p>
<Button <Button
onClick={() => { onClick={async () => {
signOut({ redirect: false }); signOut({ redirect: false });
await router.push("/")
window.location.reload()
}} }}
className="me-3" className="me-3"
variant="primary" variant="primary"
...@@ -77,10 +80,14 @@ const Header = () => { ...@@ -77,10 +80,14 @@ const Header = () => {
</div> </div>
) : ( ) : (
<div> <div>
<Button className="me-3" variant="primary"> <Button onClick={()=> {
router.push("/signup/user")
}} className="me-3" variant="primary">
Sign Up Sign Up
</Button> </Button>
<Button className="" variant="primary"> <Button onClick={()=> {
router.push("/login/user")
}} className="" variant="primary">
Log In Log In
</Button> </Button>
</div> </div>
......
components/layout/Layout.js
...@@ -5,7 +5,7 @@ import Footer from "./Footer"; ...@@ -5,7 +5,7 @@ import Footer from "./Footer";
import { ToastContainer } from "react-toastify"; import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css"; import "react-toastify/dist/ReactToastify.css";
import { loadUser } from "../../redux/actions/userActions"; import { loadUser } from "../../redux/actions/userActions";
import { useDispatch } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
const Layout = ({ children, title = "Zango", description = "" }) => { const Layout = ({ children, title = "Zango", description = "" }) => {
const dispatch = useDispatch(); const dispatch = useDispatch();
......
components/layout/VendorDashboardSidebar.js
import Image from 'next/image'; import Image from 'next/image';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import React from 'react'; import React, { useState } from 'react';
const Sidebar = ({ collapsed, toggleSidebar }) => { const Sidebar = () => {
const router = useRouter(); const router = useRouter();
const [collapsed, setCollapsed] = useState(false);
const toggleSidebar = () => {
setCollapsed(!collapsed);
};
return ( return (
<div className={`sidebar ${collapsed ? 'collapsed' : ''}`}> <div className={`sidebar ${collapsed ? 'collapsed' : ''}`}>
{/* <button className="toggle-btn" onClick={toggleSidebar}> {/* <button className="toggle-btn" onClick={toggleSidebar}>
...@@ -18,13 +24,13 @@ const Sidebar = ({ collapsed, toggleSidebar }) => { ...@@ -18,13 +24,13 @@ const Sidebar = ({ collapsed, toggleSidebar }) => {
</a> </a>
</li> </li>
<li className={router.pathname === "/vendor/orders" ? "active" : ""}> <li className={router.pathname === "/vendor/orders" ? "active" : ""}>
<a href="#"> <a href="/vendor/orders">
<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> <span>Orders</span>
</a> </a>
</li> </li>
<li className={router.pathname === "/vendor/activities" ? "active" : ""}> <li className={router.pathname === "/vendor/activities" ? "active" : ""}>
<a href="#"> <a href="/vendor/activities">
<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> <span>Activities</span>
</a> </a>
......
components/signup/Signup.js
import React, { useState, useRef } from "react"; import React, { useState, useRef, useEffect } from "react";
import { Formik } from "formik"; import { Formik } from "formik";
import Link from "next/link"; import Link from "next/link";
import { Fragment } from "react"; import { Fragment } from "react";
...@@ -18,14 +18,12 @@ import { Loader } from "react-bootstrap-typeahead"; ...@@ -18,14 +18,12 @@ import { Loader } from "react-bootstrap-typeahead";
const Signup = props => { const Signup = props => {
console.log(props.type); console.log(props.type);
const router = useRouter();
const [otp, setOtp] = useState(new Array(4).fill("")); const [otp, setOtp] = useState(new Array(4).fill(""));
const [isOtpSent, setOtpSent] = useState(false); const [isOtpSent, setOtpSent] = useState(false);
const [otpVerified, setOtpVerified] = useState(false); const [otpVerified, setOtpVerified] = useState(false);
const [loading, setLoading] = useState(); const [loading, setLoading] = useState();
const dispatch = useDispatch(); const dispatch = useDispatch();
const router = useRouter()
const otpValue = useRef(); const otpValue = useRef();
const changeOtpRef = value => { const changeOtpRef = value => {
console.log(otpValue); console.log(otpValue);
...@@ -76,7 +74,6 @@ const Signup = props => { ...@@ -76,7 +74,6 @@ const Signup = props => {
} }
}; };
// console.log("otp", otp);
return ( return (
<Fragment> <Fragment>
...@@ -252,7 +249,7 @@ const Signup = props => { ...@@ -252,7 +249,7 @@ const Signup = props => {
)} )}
<div className="input-group mb-0"> <div className="input-group mb-0">
<Button type="submit" className="btn btn-primary btn-submit" disabled={(!values.termsConditions && !isValid) || loading}> <Button type="submit" className="btn btn-primary btn-submit" disabled={(!values.termsConditions && !isValid) || loading}>
{loading ? <Loader/> : `${isOtpSent ? "Verify OTP" : "Sign Up Now"}`} {loading ? <Loader /> : `${isOtpSent ? "Verify OTP" : "Sign Up Now"}`}
</Button> </Button>
</div> </div>
</Form> </Form>
......
components/vendor/ActivityDetails.js
import Image from "next/image"; import Image from "next/image";
import { Formik } from "formik"; import { ErrorMessage, FieldArray, Formik } from "formik";
import { Fragment } from "react"; import { Fragment, useState } from "react";
import { Button, Form } from "react-bootstrap"; import { Button, Form } from "react-bootstrap";
import * as Yup from "yup"; import * as Yup from "yup";
import { FaTimes, FaTrash } from "react-icons/fa";
const ActivityDetails = () => { const ActivityDetails = () => {
const activityDetailsValidationSchema = Yup.object().shape({ const [expandedIndex, setExpandedIndex] = useState(0); // Initially set the first item as expanded
category: Yup.string()
.required("Category is Required"), const toggleAccordion = (index) => {
subcategory: Yup.string() setExpandedIndex((prevIndex) => (prevIndex === index ? null : index));
.required("SubCategory is Required"), };
activity_name: Yup.string()
.required("Activity Name is Required"),
activity_description: Yup.string()
.required("Activity Description is Required"),
location: Yup.string()
.required("Location is Required"),
address: Yup.string()
.required("Address is Required"),
price_per_person: Yup.string()
.required("Price Per Person is Required"),
gifting_to_someone: Yup.string()
.required("Gifting to someone is Required"),
place: Yup.string()
.required("Place is Required"),
contact_person_for_activity: Yup.string()
.required("City is Required"),
min_group_size: Yup.string()
.required("Address Line 1 is Required"),
max_group_size: Yup.string()
.required("Address Line 2 is Required"),
month: Yup.string()
.required("Month is Required"),
min_duration: Yup.string()
.required("Month is Required"),
max_duration: Yup.string()
.required("Month is Required"),
link_of_booking: Yup.string() const activityDetailsValidationSchema = Yup.object().shape({
.required("Link of Booking is Required"), activities: Yup.array().of(
activity_images: Yup.array(), Yup.object().shape({
contact_person_for_booking: Yup.string(), category: Yup.string().required("Category is Required"),
contact_number_for_booking: Yup.string(), subCategory: Yup.string().required("SubCategory is Required"),
cancellation_policy_file: Yup.string(), activityName: Yup.string().required("Activity Name is Required"),
terms_conditions_file: Yup.string(), activityDescription: Yup.string().required("Activity Description is Required"),
location: Yup.string().required("Location is Required"),
addressLine1: Yup.string().required("Address is Required"),
addressLine2: Yup.string().required("Address is Required"),
pricePerPerson: Yup.string().required("Price Per Person is Required"),
giftingToSomeone: Yup.string().required("Gifting to someone is Required"),
place: Yup.string().required("Place is Required"),
contactPersonForActivity: Yup.string().required("Contact Person Name is Required"),
minGroupSize: Yup.string().required("Min Group Size is Required"),
maxGroupSize: Yup.string().required("Max Group Size is Required"),
months: Yup.string().required("Month is Required"),
minDuration: Yup.string().required("Min Duration is Required"),
maxDuration: Yup.string().required("Max Duration is Required"),
durationUnit: Yup.string().required("Duration Unit is Required"),
ageGroup: Yup.string().required("Age Group is Required"),
linkOfBooking: Yup.string().required("Link of Booking is Required"),
activityImages: Yup.array(),
contactPersonForBooking: Yup.string(),
countryCode: Yup.string(),
contactNumberForBooking: Yup.string(),
cancellationPolicyFile: Yup.string(),
termsConditionsFile: Yup.string(),
})
)
}); });
return ( return (
...@@ -52,41 +50,38 @@ const ActivityDetails = () => { ...@@ -52,41 +50,38 @@ const ActivityDetails = () => {
<div className="row"> <div className="row">
<div className="col-12 col-lg-8"> <div className="col-12 col-lg-8">
<div className="content-div business-details"> <div className="content-div business-details">
<div className="d-flex align-items-center justify-content-between">
<h4 className="mb-0">Activity Details</h4>
<Button type="button" variant="" className="btnAdd m-0">
<span className="image-container me-2">
<Image alt="" layout="fill" src="/images/vendor/icon-plus.svg" className="image" />
</span>
<span>Add Activity</span>
</Button>
</div>
<hr />
<div className="form-container"> <div className="form-container">
<Formik <Formik
initialValues={{ initialValues={{
category: "", activities: [
subcategory: "", {
activity_name: "", category: "",
activity_description: "", subCategory: "",
location: "", activityName: "",
address: "", activityDescription: "",
price_per_person: "", location: "",
gifting_to_someone: "", addressLine1: "",
place: "", addressLine2: "",
contact_person_for_activity: "", pricePerPerson: "",
min_group_size: "", giftingToSomeone: "",
max_group_size: "", place: "",
month: "", contactPersonForActivity: "",
min_duration: "", minGroupSize: "",
max_duration: "", maxGroupSize: "",
months: "",
link_of_booking: "", minDuration: "",
activity_images: [], maxDuration: "",
contact_person_for_booking: "", durationUnit: "",
contact_number_for_booking: "", ageGroup: "",
cancellation_policy_file: "", linkOfBooking: "",
terms_conditions_file: "", activityImages: [],
contactPersonForBooking: "",
countryCode: "",
contactNumberForBooking: "",
cancellationPolicyFile: "",
termsConditionsFile: "",
}
]
}} }}
validationSchema={activityDetailsValidationSchema} validationSchema={activityDetailsValidationSchema}
// enableReinitialize={true} // enableReinitialize={true}
...@@ -94,311 +89,554 @@ const ActivityDetails = () => { ...@@ -94,311 +89,554 @@ const ActivityDetails = () => {
console.log("activity details values", values) console.log("activity details values", values)
}} }}
> >
{({ values, errors, touched, handleChange, handleBlur, handleSubmit }) => ( {({ values, errors, touched, handleChange, handleBlur, handleSubmit, setFieldValue }) => (
<Form <Form
onSubmit={e => { onSubmit={e => {
e.preventDefault(); e.preventDefault();
handleSubmit(); handleSubmit();
}} }}
> >
<p className="textH">Activity Name 1</p> <FieldArray name="activities">
<div> {({ push, remove }) => (
<p className="textH">Basic Details</p> <div className="activityDetails">
<div className="row"> <div className="d-flex justify-content-between mb-3">
<div className="col-12 col-lg-5"> <h4 className="mb-0">Activity Details</h4>
<div className="input-group"> <Button type="button" variant="" className="btnAdd m-0"
<label>Category</label> onClick={() => {
<select push({
id="category" category: "",
name="category" subCategory: "",
onChange={handleChange} activityName: "",
onBlur={handleBlur} activityDescription: "",
> location: "",
<option value="">Select</option> addressLine1: "",
<option value="Category 1">Category 1</option> addressLine2: "",
<option value="Category 2">Category 2</option> pricePerPerson: "",
</select> giftingToSomeone: "",
{errors.category && touched.category && (<span className="form-error">{errors.category}</span>)} place: "",
</div> contactPersonForActivity: "",
</div> minGroupSize: "",
<div className="col-12 offset-lg-1 col-lg-5"> maxGroupSize: "",
<div className="input-group"> months: "",
<label>SubCategory</label> minDuration: "",
<select maxDuration: "",
id="subcategory" durationUnit: "",
name="subcategory" ageGroup: "",
onChange={handleChange} linkOfBooking: "",
onBlur={handleBlur} activityImages: [],
> contactPersonForBooking: "",
<option value="">Select</option> countryCode: "",
<option value="Sub Category 1">Sub Category 1</option> contactNumberForBooking: "",
<option value="Sub Category 2">Sub Category 2</option> cancellationPolicyFile: "",
</select> termsConditionsFile: "",
{errors.subcategory && touched.subcategory && (<span className="form-error">{errors.subcategory}</span>)} });
</div> setExpandedIndex(values.activities.length);
</div> }}
</div>
<div className="row">
<div className="col-12 col-lg-5">
<div className="input-group">
<label>Activity Name</label>
<input
type="text"
name="activity_name"
onChange={handleChange}
onBlur={handleBlur}
value={values.activity_name}
/>
{errors.activity_name && touched.activity_name && (<span className="form-error">{errors.activity_name}</span>)}
</div>
</div>
<div className="col-12 offset-lg-1 col-lg-5">
<div className="input-group">
<label>Activity Description</label>
<input
type="text"
name="activity_description"
onChange={handleChange}
onBlur={handleBlur}
value={values.activity_description}
/>
{errors.activity_description && touched.activity_description && (<span className="form-error">{errors.activity_description}</span>)}
</div>
</div>
</div>
<div className="row">
<div className="col-12 col-lg-5">
<div className="input-group">
<label>Location</label>
<select
id="location"
name="location"
onChange={handleChange}
onBlur={handleBlur}
> >
<option value="">Select</option> <span className="image-container me-2">
<option value="Location 1">Location 1</option> <Image alt="" layout="fill" src="/images/vendor/icon-plus.svg" className="image" />
<option value="Location 2">Location 2</option> </span>
</select> <span>Add Activity</span>
{errors.location && touched.location && (<span className="form-error">{errors.location}</span>)} </Button>
</div>
</div>
<div className="col-12 offset-lg-1 col-lg-5">
<div className="input-group">
<label>Address</label>
<input
type="text"
name="address"
onChange={handleChange}
onBlur={handleBlur}
value={values.address}
/>
{errors.address && touched.address && (<span className="form-error">{errors.address}</span>)}
</div>
</div>
</div>
<div className="row">
<div className="col-12 col-lg-5">
<div className="input-group">
<label>Price (per person)</label>
<input
type="text"
name="price_per_person"
onChange={handleChange}
onBlur={handleBlur}
value={values.price_per_person}
/>
{errors.price_per_person && touched.price_per_person && (<span className="form-error">{errors.price_per_person}</span>)}
</div>
</div>
<div className="col-12 offset-lg-1 col-lg-5">
<div className="input-group">
<label>Gifting to Someone</label>
<div className="row">
<div className="col-6 col-lg-6">
<label htmlFor="gifting_allowed">
<input
type="radio"
id="gifting_allowed"
name="gifting_to_someone"
onChange={handleChange}
onBlur={handleBlur}
value="gifting_allowed"
/> Allowed
</label>
</div>
<div className="col-6 col-lg-6">
<label htmlFor="gifting_disallowed">
<input
type="radio"
id="gifting_disallowed"
name="gifting_to_someone"
onChange={handleChange}
onBlur={handleBlur}
value="gifting_disallowed"
/> Disallowed
</label>
</div>
</div>
{errors.gifting_to_someone && touched.gifting_to_someone && (<span className="form-error">{errors.gifting_to_someone}</span>)}
</div> </div>
</div> {values.activities.map((_, index) => (
</div> <div key={index} className="accordionItem">
<div className="row"> <AccordionItem
<div className="col-12 col-lg-5"> index={index}
<div className="input-group"> expanded={expandedIndex === index}
<label>Place</label> toggleAccordion={() => toggleAccordion(index)}
<div className="row"> remove={() => remove(index)}
<div className="col-4 col-lg-4"> >
<label htmlFor="indoor"> <div>
<input <div className="mt-4">
type="radio" {/* <p className="textH">Basic Details</p> */}
id="indoor" <div className="d-flex justify-content-between">
name="place" <p className="textH">Basic Details</p>
onChange={handleChange} {index > 0 && (
onBlur={handleBlur} <div style={{ cursor: "pointer" }} onClick={remove}><FaTrash style={{ marginTop: "-5px" }} /> Remove</div>
value="indoor" )}
/> Indoor </div>
</label>
</div> <div className="row">
<div className="col-4 col-lg-4"> <div className="col-12 col-lg-6">
<label htmlFor="outdoor"> <div className="input-group">
<input <label>Category</label>
type="radio" <select
id="outdoor" id={`activities.${index}.category`}
name="place" name={`activities.${index}.category`}
onChange={handleChange} onChange={handleChange}
onBlur={handleBlur} onBlur={handleBlur}
value="outdoor" >
/> Outdoor <option value="">Select</option>
</label> <option value="Category 1">Category 1</option>
</div> <option value="Category 2">Category 2</option>
<div className="col-4 col-lg-4"> </select>
<label htmlFor="both"> <ErrorMessage name={`activities.${index}.category`} component="div" className="form-error" />
<input </div>
type="radio" </div>
id="both" <div className="col-12 col-lg-6">
name="place" <div className="input-group">
onChange={handleChange} <label>SubCategory</label>
onBlur={handleBlur} <select
value="both" id={`activities.${index}.subCategory`}
/> Both name={`activities.${index}.subCategory`}
</label> onChange={handleChange}
</div> onBlur={handleBlur}
</div> >
{errors.place && touched.place && (<span className="form-error">{errors.place}</span>)} <option value="">Select</option>
</div> <option value="Sub Category 1">Sub Category 1</option>
</div> <option value="Sub Category 2">Sub Category 2</option>
</div> </select>
</div> <ErrorMessage name={`activities.${index}.category`} component="div" className="form-error" />
<hr /> </div>
<div> </div>
<p>Group Information</p> </div>
<div className="row"> <div className="row">
<div className="col-12 col-lg-5"> <div className="col-12 col-lg-6">
<div className="input-group"> <div className="input-group">
<label>Contact Person for the Activity</label> <label>Activity Name</label>
<input <input
type="text" type="text"
name="contact_person_for_activity" name={`activities.${index}.activityName`}
onChange={handleChange} onChange={handleChange}
onBlur={handleBlur} onBlur={handleBlur}
value={values.contact_person_for_activity} value={values.activities[index].activityName}
/> />
{errors.contact_person_for_activity && touched.contact_person_for_activity && (<span className="form-error">{errors.contact_person_for_activity}</span>)} <ErrorMessage name={`activities.${index}.activityName`} component="div" className="form-error" />
</div> </div>
</div> </div>
<div className="col-12 offset-lg-1 col-lg-5"> <div className="col-12 col-lg-6">
<div className="input-group"> <div className="input-group">
<label>Size of the Group</label> <label>Activity Description</label>
<div className="row"> <textarea
<div className="col-6 col-lg-6"> rows="4"
<div className="input-group mb-0"> name={`activities.${index}.activityDescription`}
<input onChange={handleChange}
type="text" onBlur={handleBlur}
name="min_group_size" value={values.activities[index].activityDescription}
onChange={handleChange} />
onBlur={handleBlur} <ErrorMessage name={`activities.${index}.activityDescription`} component="div" className="form-error" />
value={values.min_group_size} </div>
/> </div>
{errors.min_group_size && touched.min_group_size && (<span className="form-error">{errors.min_group_size}</span>)} </div>
</div> <div className="row">
</div> <div className="col-12 col-lg-6">
<div className="col-6 col-lg-6"> <div className="input-group">
<div className="input-group mb-0"> <label>Location</label>
<input <select
type="text" id={`activities.${index}.location`}
name="max_group_size" name={`activities.${index}.location`}
onChange={handleChange} onChange={handleChange}
onBlur={handleBlur} onBlur={handleBlur}
value={values.max_group_size} >
/> <option value="">Select</option>
{errors.max_group_size && touched.max_group_size && (<span className="form-error">{errors.max_group_size}</span>)} <option value="Location 1">Location 1</option>
</div> <option value="Location 2">Location 2</option>
</div> </select>
</div> <ErrorMessage name={`activities.${index}.location`} component="div" className="form-error" />
</div> </div>
</div> </div>
</div> <div className="col-12 col-lg-6">
</div> <div className="input-group">
<hr /> <label>Price (per person)</label>
<div> <input
<p>Availability</p> type="text"
<div className="row"> name={`activities.${index}.pricePerPerson`}
<div className="col-12 col-lg-5"> onChange={handleChange}
<div className="input-group"> onBlur={handleBlur}
<label>Months</label> value={values.activities[index].pricePerPerson}
<select />
id="month" <ErrorMessage name={`activities.${index}.pricePerPerson`} component="div" className="form-error" />
name="month" </div>
onChange={handleChange} </div>
onBlur={handleBlur} </div>
> <div className="row">
<option value="">Select</option> <div className="col-12 col-lg-6">
<option value="Location 1">Location 1</option> <div className="input-group">
<option value="Location 2">Location 2</option> <label>Address Line 1</label>
</select> <input
{errors.contact_person_for_activity && touched.contact_person_for_activity && (<span className="form-error">{errors.contact_person_for_activity}</span>)} type="text"
</div> name={`activities.${index}.addressLine1`}
</div> onChange={handleChange}
<div className="col-12 offset-lg-1 col-lg-5"> onBlur={handleBlur}
<div className="input-group"> value={values.activities[index].addressLine1}
<label>Size of the Group</label> />
<div className="row"> <ErrorMessage name={`activities.${index}.addressLine1`} component="div" className="form-error" />
<div className="col-6 col-lg-6"> </div>
<div className="input-group mb-0"> </div>
<input <div className="col-12 col-lg-6">
type="text" <div className="input-group">
name="min_group_size" <label>Address Line 2</label>
onChange={handleChange} <input
onBlur={handleBlur} type="text"
value={values.min_group_size} name={`activities.${index}.addressLine2`}
/> onChange={handleChange}
{errors.min_group_size && touched.min_group_size && (<span className="form-error">{errors.min_group_size}</span>)} onBlur={handleBlur}
</div> value={values.activities[index].addressLine2}
</div> />
<div className="col-6 col-lg-6"> <ErrorMessage name={`activities.${index}.addressLine2`} component="div" className="form-error" />
<div className="input-group mb-0"> </div>
<input </div>
type="text" </div>
name="max_group_size" <div className="row">
onChange={handleChange} <div className="col-12 col-lg-6">
onBlur={handleBlur} <div className="input-group mb-2">
value={values.max_group_size} <label>Gifting to Someone</label>
/> <div className="row">
{errors.max_group_size && touched.max_group_size && (<span className="form-error">{errors.max_group_size}</span>)} <div className="col-6 col-lg-6">
<label className="radioContainer" htmlFor={`gifting_allowed.${index}`}>
<input
type="radio"
id={`gifting_allowed.${index}`}
name={`activities.${index}.giftingToSomeone`}
onChange={handleChange}
onBlur={handleBlur}
/> Allowed
<span className="checkmark"></span>
</label>
</div>
<div className="col-6 col-lg-6">
<label className="radioContainer" htmlFor={`gifting_disallowed.${index}`}>
<input
type="radio"
id={`gifting_disallowed.${index}`}
name={`activities.${index}.giftingToSomeone`}
onChange={handleChange}
onBlur={handleBlur}
/> Disallowed
<span className="checkmark"></span>
</label>
</div>
</div>
<ErrorMessage name={`activities.${index}.giftingToSomeone`} component="div" className="form-error" />
</div>
</div>
<div className="col-12 col-lg-6">
<div className="input-group mb-2">
<label>Place</label>
<div className="row">
<div className="col-4 col-lg-4">
<label className="radioContainer" htmlFor={`indoor.${index}`}>
<input
type="radio"
id={`indoor.${index}`}
name={`activities.${index}.place`}
onChange={handleChange}
onBlur={handleBlur}
/> Indoor
<span className="checkmark"></span>
</label>
</div>
<div className="col-5 col-lg-5">
<label className="radioContainer" htmlFor={`outdoor.${index}`}>
<input
type="radio"
id={`outdoor.${index}`}
name={`activities.${index}.place`}
onChange={handleChange}
onBlur={handleBlur}
/> Outdoor
<span className="checkmark"></span>
</label>
</div>
<div className="col-3 col-lg-3">
<label className="radioContainer" htmlFor={`both.${index}`}>
<input
type="radio"
id={`both.${index}`}
name={`activities.${index}.place`}
onChange={handleChange}
onBlur={handleBlur}
/> Both
<span className="checkmark"></span>
</label>
</div>
</div>
<ErrorMessage name={`activities.${index}.place`} component="div" className="form-error" />
</div>
</div>
</div>
</div>
<hr />
<div className="mt-4">
<p className="textH">Group Information</p>
<div className="row">
<div className="col-12 col-lg-6">
<div className="input-group">
<label>Contact Person for the Activity</label>
<input
type="text"
name={`activities.${index}.contactPersonForActivity`}
onChange={handleChange}
onBlur={handleBlur}
value={values.activities[index].contactPersonForActivity}
/>
<ErrorMessage name={`activities.${index}.contactPersonForActivity`} component="div" className="form-error" />
</div>
</div>
<div className="col-12 col-lg-6">
<div className="input-group">
<label>Size of the Group</label>
<div className="row">
<div className="col-6 col-lg-5">
<input
type="text"
placeholder="Min."
name={`activities.${index}.minGroupSize`}
onChange={handleChange}
onBlur={handleBlur}
value={values.activities[index].minGroupSize}
/>
<ErrorMessage name={`activities.${index}.minGroupSize`} component="div" className="form-error" />
</div>
<div className="col-6 col-lg-5">
<input
type="text"
placeholder="Max."
name={`activities.${index}.maxGroupSize`}
onChange={handleChange}
onBlur={handleBlur}
value={values.activities[index].maxGroupSize}
/>
<ErrorMessage name={`activities.${index}.maxGroupSize`} component="div" className="form-error" />
</div>
</div>
</div>
</div>
</div>
</div>
<hr />
<div className="mt-4">
<p className="textH">Availability</p>
<div className="row">
<div className="col-12 col-lg-6">
<div className="input-group">
<label>Months</label>
<select
id={`activities.${index}.months`}
name={`activities.${index}.months`}
onChange={handleChange}
onBlur={handleBlur}
>
<option value="">Select</option>
<option value="Location 1">Location 1</option>
<option value="Location 2">Location 2</option>
</select>
<ErrorMessage name={`activities.${index}.months`} component="div" className="form-error" />
</div>
</div>
<div className="col-12 col-lg-6">
<div className="input-group">
<label>Day & Time</label>
<select
id={`activities.${index}.dayTime`}
name={`activities.${index}.dayTime`}
onChange={handleChange}
onBlur={handleBlur}
>
<option value="">Select</option>
<option value="Location 1">Location 1</option>
<option value="Location 2">Location 2</option>
</select>
<ErrorMessage name={`activities.${index}.dayTime`} component="div" className="form-error" />
</div>
</div>
</div>
<div className="row">
<div className="col-12 col-lg-6">
<div className="input-group">
<label>Duration</label>
<div className="row">
<div className="col-5 col-lg-4">
<select
id="minDuration"
name="minDuration"
onChange={handleChange}
onBlur={handleBlur}
>
<option value="">Min</option>
</select>
{errors.minDuration && touched.minDuration && (<span className="form-error">{errors.minDuration}</span>)}
</div>
<div className="col-5 col-lg-4">
<select
id="maxDuration"
name="maxDuration"
onChange={handleChange}
onBlur={handleBlur}
style={{ width: "100%" }}
>
<option value="">Max</option>
</select>
{errors.maxDuration && touched.maxDuration && (<span className="form-error">{errors.maxDuration}</span>)}
</div>
<div className="col-2 col-lg-4">
<select
id="durationUnit"
name="durationUnit"
onChange={handleChange}
onBlur={handleBlur}
>
<option value="Hrs">Hrs</option>
<option value="Mins">Mins</option>
</select>
{errors.durationUnit && touched.durationUnit && (<span className="form-error">{errors.durationUnit}</span>)}
</div>
</div>
</div>
</div>
</div>
</div>
<hr />
<div className="mt-4">
<p className="textH">Booking & Activity Information</p>
<div className="row">
<div className="col-12 col-lg-6">
<div className="input-group">
<label>Link of Booking</label>
<input
type="text"
name={`activities.${index}.linkOfBooking`}
onChange={handleChange}
onBlur={handleBlur}
value={values.activities[index].linkOfBooking}
/>
<ErrorMessage name={`activities.${index}.linkOfBooking`} component="div" className="form-error" />
</div>
</div>
</div>
<div className="row">
<div className="col-12 col-lg-6">
<div className="input-group">
<label>Contact Person Name</label>
<input
type="text"
name={`activities.${index}.contactPersonForBooking`}
onChange={handleChange}
onBlur={handleBlur}
value={values.activities[index].contactPersonForBooking}
/>
<ErrorMessage name={`activities.${index}.contactPersonForBooking`} component="div" className="form-error" />
</div>
</div>
<div className="col-12 col-lg-6">
<div className="input-group">
<label>Contact Person Number</label>
<div className="contact-number">
<select
id={`activities.${index}.countryCode`}
name={`activities.${index}.countryCode`}
onChange={handleChange}
onBlur={handleBlur}
style={{ width: "80px" }}
>
<option value="+91">+91</option>
<option value="+44">+44</option>
</select>
<input
type="text"
name={`activities.${index}.contactNumberForBooking`}
onChange={handleChange}
onBlur={handleBlur}
value={values.activities[index].contactNumberForBooking}
/>
</div>
<ErrorMessage name={`activities.${index}.contactNumberForBooking`} component="div" className="form-error" />
</div>
</div>
</div>
</div>
<hr />
<div className="mt-4">
<p className="textH">Policy & Terms</p>
<div className="row">
<div className="col-12 col-lg-6">
<div className="input-group">
<label>Cancellation Policy</label>
<div className="custom-file">
<input
type="file"
className="custom-file-input"
id={`activities.${index}.cancellationPolicyFile`}
name={`activities.${index}.cancellationPolicyFile`}
onChange={(event) => {
if (event) {
const file = event.currentTarget.files[0]
setFieldValue(`activities.${index}.cancellationPolicyFile`, file)
}
}}
onBlur={handleBlur}
onClick={event => {
const { target = {} } = event || {};
target.value = "";
}}
/>
<label className="custom-file-label" htmlFor={`activities.${index}.cancellationPolicyFile`}>
Upload
</label>
</div>
<ErrorMessage name={`activities.${index}.cancellationPolicyFile`} component="div" className="form-error" />
{values.activities[index].cancellationPolicyFile && (
<div className="d-flex align-items-center justify-content-between p-1" style={{ width: "100%" }}>
<p className="textS m-0">{values.activities[index].cancellationPolicyFile.name}</p>
<FaTimes style={{ cursor: "pointer" }} onClick={() => {
setFieldValue(`activities.${index}.cancellationPolicyFile`, "")
}} />
</div>
)}
</div>
</div>
<div className="col-12 col-lg-6">
<div className="input-group">
<label>Terms & Conditions</label>
<div className="custom-file">
<input
type="file"
className="custom-file-input"
id={`activities.${index}.termsConditionsFile`}
name={`activities.${index}.termsConditionsFile`}
onChange={(event) => {
if (event) {
const file = event.currentTarget.files[0]
setFieldValue(`activities.${index}.termsConditionsFile`, file)
}
}}
onBlur={handleBlur}
onClick={event => {
const { target = {} } = event || {};
target.value = "";
}}
/>
<label className="custom-file-label" htmlFor={`activities.${index}.termsConditionsFile`}>
Upload
</label>
</div>
<ErrorMessage name={`activities.${index}.termsConditionsFile`} component="div" className="form-error" />
{values.activities[index].termsConditionsFile && (
<div className="d-flex align-items-center justify-content-between p-1" style={{ width: "100%" }}>
<p className="textS m-0">{values.activities[index].termsConditionsFile.name}</p>
<FaTimes style={{ cursor: "pointer" }} onClick={() => {
setFieldValue(`activities.${index}.termsConditionsFile`, "")
}} />
</div>
)}
</div>
</div>
</div>
</div>
</div> </div>
</div> </AccordionItem>
</div> </div>
</div> ))}
</div> </div>
</div> )}
</div> </FieldArray>
<div className="row mb-5">
<div className="row">
<div className="col-12 col-lg-5"> <div className="col-12 col-lg-5">
<div className="input-group"> <div className="input-group">
<Button type="submit" className="btn btn-primary btn-submit"> <Button type="submit" className="btn btn-primary btn-submit" disabled>
Send for Approval Submit
</Button> </Button>
</div> </div>
</div> </div>
...@@ -438,8 +676,23 @@ const ActivityDetails = () => { ...@@ -438,8 +676,23 @@ const ActivityDetails = () => {
</div> </div>
</div> </div>
</div> </div>
</Fragment > </Fragment>
) )
} }
const AccordionItem = ({ index, expanded, toggleAccordion, remove, children }) => {
return (
<div>
<div className="d-flex align-items-center justify-content-between" onClick={toggleAccordion} style={{ cursor: "pointer" }}>
<p className="textH mb-0">Activity Name {index + 1}</p>
<div>
{expanded ? <Image alt="" width="24" height="24" src="/images/vendor/minus.svg" /> : <Image alt="" width="24" height="24" src="/images/vendor/plus.svg" />}
</div>
</div>
<div style={{ display: expanded ? 'block' : 'none' }}>{children}</div>
</div>
);
};
export default ActivityDetails; export default ActivityDetails;
\ No newline at end of file \ No newline at end of file
components/vendor/ActivityListing.js 0 → 100644
import { Fragment } from "react";
import { Button, Image, Table } from "react-bootstrap";
import { FaFilter } from "react-icons/fa";
const ActivityListing = () => {
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9]
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>Activities</h2>
<p>View all the Activities</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>
<Table responsive className="listingTable">
<thead>
<tr>
<th>
<label className="check-container mb-0 ps-2" htmlFor="checkh">
<input
type="checkbox"
id="checkh"
className="check-box"
/>
<span className="checkmark"></span>
</label>
</th>
<th>Category</th>
<th>Sub Category</th>
<th>Name</th>
<th>Location</th>
<th>Price</th>
<th>Place</th>
<th>Gift</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
{array.map((data, index) => (
<tr key={index}>
<td>
<label className="check-container mb-0 ps-2" htmlFor={`check${index}`}>
<input
type="checkbox"
id={`check${index}`}
className="check-box"
/>
<span className="checkmark"></span>
</label>
</td>
<td>Adventure</td>
<td>Ice-Skating</td>
<td>Ice-Skating in NY</td>
<td>North Avenue</td>
<td>$ 479</td>
<td>Outdoor</td>
<td>Allowed</td>
<td><Image alt="" width={20} height={20} src="/images/vendor/icon-view.svg" /></td>
<td><Image alt="" width={20} height={20} src="/images/vendor/icon-more-vertical.svg" /></td>
</tr>
))}
<tr>
<td colSpan={10}>Showing Results 10 of 1567</td>
</tr>
</tbody>
</Table>
</div>
</div>
</div>
</Fragment>
);
};
export default ActivityListing;
components/vendor/BusinessDetails.js
...@@ -8,16 +8,31 @@ import { getSession } from "next-auth/react"; ...@@ -8,16 +8,31 @@ import { getSession } from "next-auth/react";
import "react-bootstrap-typeahead/css/Typeahead.css"; import "react-bootstrap-typeahead/css/Typeahead.css";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
import { getLoggedInVendor, updateVendorBusinessDetails } from "../../redux/actions/vendorActions"; import { getLoggedInVendor, updateVendorBusinessDetails } from "../../redux/actions/vendorActions";
import { loadUser, updateUserApprovalStatus } from "../../redux/actions/userActions";
import { useRouter } from "next/router";
const BusinessDetails = () => { const BusinessDetails = () => {
const [session, setSession] = useState(null); const [session, setSession] = useState(null);
const dispatch = useDispatch(); const dispatch = useDispatch();
const router = useRouter()
const { loggedInVendor } = useSelector(state => state.loggedInVendor); const { loggedInVendor } = useSelector(state => state.loggedInVendor);
const { vendorDetails } = useSelector(state => state.vendorDetails); const { vendorDetails } = useSelector(state => state.vendorDetails);
const { user, error } = useSelector(state => state.loadedUser);
// const [pincodeData, setPinCodeData] = useState() // const [pincodeData, setPinCodeData] = useState()
// const ref = useRef(null); // const ref = useRef(null);
console.log("vendorDetails", vendorDetails); // console.log("vendorDetails", vendorDetails);
const [disableFields, setdisableFields] = useState();
useEffect(() => {
console.log("user", user);
if (user) {
if (user.approved == "approved" || user.approved == "rejected") {
setdisableFields(false);
} else if (user.approved == "pending") {
setdisableFields(true);
}
}
}, [user]);
// console.log("userStatus", userStatus);
useEffect(() => { useEffect(() => {
const fetchSession = async () => { const fetchSession = async () => {
setSession(await getSession()); setSession(await getSession());
...@@ -25,7 +40,7 @@ const BusinessDetails = () => { ...@@ -25,7 +40,7 @@ const BusinessDetails = () => {
fetchSession(); fetchSession();
// dispatch(getLoggedInVendor()); // dispatch(getLoggedInVendor());
}, []); }, []);
console.log("session", loggedInVendor); // console.log("session", loggedInVendor);
const businessDetailsValidationSchema = Yup.object().shape({ const businessDetailsValidationSchema = Yup.object().shape({
panNumber: Yup.string().required("Pan Number is Required"), panNumber: Yup.string().required("Pan Number is Required"),
panFile: Yup.mixed(), panFile: Yup.mixed(),
...@@ -65,191 +80,234 @@ const BusinessDetails = () => { ...@@ -65,191 +80,234 @@ const BusinessDetails = () => {
addressLine2: vendorDetails.attributes.addressLine2 addressLine2: vendorDetails.attributes.addressLine2
}; };
} }
const ApprovalStatus = () => {
if (user) {
switch (user.approved) {
case "approved":
return <></>;
case "rejected":
return (
<>
<div class="alert alert-danger" role="alert">
Your profile has been rejected! Please contact the admin for more details!
</div>
</>
);
case "pending":
return (
<>
<div class="alert alert-primary" role="alert">
Your profile is under consideration, please wait till admin gives approval
</div>
</>
);
case "none":
return <></>;
default:
break;
}
}
};
// vendorDetails && console.log("vendorData", vendorData, vendorDetails.length > 0); // vendorDetails && console.log("vendorData", vendorData, vendorDetails.length > 0);
return ( return (
<Fragment> <Fragment>
<div className="container p-5"> {user && (
<div className="row"> <div className="container p-5">
<div className="col-12 col-lg-8"> <div className="row">
<div className="content-div business-details"> <div className="col-12 col-lg-8">
<h2>Tell us about your business</h2> <div className="content-div business-details">
<p>Please have the following ready before you begin</p> <h2>Tell us about your business</h2>
<p> <p>Please have the following ready before you begin</p>
<FaArrowRight /> Your bank account details for receiving payments from ZanGO <p>
</p> <FaArrowRight /> Your bank account details for receiving payments from ZanGO
<p className="mb-4"> </p>
<FaArrowRight /> Tax (GST/PAN) details of your business. <p className="mb-4">
</p> <FaArrowRight /> Tax (GST/PAN) details of your business.
<hr /> </p>
<div className="form-container mt-4"> <hr />
<Formik <div className="form-container mt-4">
enableReinitialize <ApprovalStatus />
initialValues={{ <Formik
panNumber: vendorData?.panNumber ? vendorData?.panNumber : "", enableReinitialize
panFile: vendorData?.panImage ? vendorData?.panImage : "", initialValues={{
gstNumber: vendorData?.gstNumber ? vendorData?.gstNumber : "", panNumber: vendorData?.panNumber ? vendorData?.panNumber : "",
gstCertificateFile: vendorData?.gstImage ? vendorData?.gstImage : "", panFile: vendorData?.panImage ? vendorData?.panImage : "",
businessName: vendorData?.businessName ? vendorData?.businessName : "", gstNumber: vendorData?.gstNumber ? vendorData?.gstNumber : "",
brandLogoFile: vendorData?.logo ? vendorData?.logo : "", gstCertificateFile: vendorData?.gstImage ? vendorData?.gstImage : "",
pincode: vendorData?.pincode ? vendorData?.pincode : "", businessName: vendorData?.businessName ? vendorData?.businessName : "",
country: vendorData?.country ? vendorData?.country : "", brandLogoFile: vendorData?.logo ? vendorData?.logo : "",
state: vendorData?.state ? vendorData?.state : "", pincode: vendorData?.pincode ? vendorData?.pincode : "",
city: vendorData?.city ? vendorData?.city : "", country: vendorData?.country ? vendorData?.country : "",
addressLine1: vendorData?.addressLine1 ? vendorData?.addressLine1 : "", state: vendorData?.state ? vendorData?.state : "",
addressLine2: vendorData?.addressLine2 ? vendorData?.addressLine2 : "" city: vendorData?.city ? vendorData?.city : "",
}} addressLine1: vendorData?.addressLine1 ? vendorData?.addressLine1 : "",
validationSchema={businessDetailsValidationSchema} addressLine2: vendorData?.addressLine2 ? vendorData?.addressLine2 : ""
// enableReinitialize={true} }}
onSubmit={async values => { validationSchema={businessDetailsValidationSchema}
console.log("business details values", values); // enableReinitialize={true}
const businessDetails = { onSubmit={async values => {
pan: values.panNumber, console.log("business details values", values);
gst: values.gstNumber, const businessDetails = {
businessName: values.businessName, pan: values.panNumber,
state: values.state, gst: values.gstNumber,
city: values.city, businessName: values.businessName,
pincode: values.pincode, state: values.state,
country: values.country city: values.city,
}; pincode: values.pincode,
// await dispatch(updateVendorBusinessDetails({businessDetails, })) country: values.country,
addressLine1: values.addressLine1,
addressLine2: values.addressLine2
};
// await dispatch(updateVendorBusinessDetails({businessDetails, }))
const response = await dispatch(getLoggedInVendor()); const response = await dispatch(getLoggedInVendor());
console.log("loggedInVendorReducer", response); console.log("loggedInVendorReducer", response);
const updateBusinessDetails = await dispatch(updateVendorBusinessDetails({ businessDetails, vendorId: response.id })); const updateBusinessDetails = await dispatch(updateVendorBusinessDetails({ businessDetails, vendorId: response.id }));
console.log("updateBusinessDetails", updateBusinessDetails); await updateUserApprovalStatus({ status: "pending" });
}} await dispatch(loadUser());
> router.push("/vendor/dashboard")
{({ values, errors, touched, handleChange, handleBlur, handleSubmit, setFieldValue }) => ( // console.log("updateBusinessDetails", updateBusinessDetails);
<Form }}
onSubmit={e => { >
e.preventDefault(); {({ values, errors, touched, handleChange, handleBlur, handleSubmit, setFieldValue }) => (
handleSubmit(); <Form
}} onSubmit={e => {
> e.preventDefault();
<h4>Vendor Business Information</h4> handleSubmit();
<div className="mt-3"> }}
<p className="textH">Business documents</p> >
<div className="row"> <h4>Vendor Business Information</h4>
<div className="col-12 col-lg-5"> <div className="mt-3">
<div className="input-group"> <p className="textH">Business documents</p>
<label>Enter Business PAN No.</label> <div className="row">
<input type="text" name="panNumber" onChange={handleChange} onBlur={handleBlur} value={values.panNumber} /> <div className="col-12 col-lg-5">
{errors.panNumber && touched.panNumber && <span className="form-error">{errors.panNumber}</span>} <div className="input-group">
</div> <label>Enter Business PAN No.</label>
</div> <input type="text" name="panNumber" onChange={handleChange} onBlur={handleBlur} value={values.panNumber} disabled={disableFields} />
<div className="col-12 offset-lg-1 col-lg-5"> {errors.panNumber && touched.panNumber && <span className="form-error">{errors.panNumber}</span>}
<div className="input-group">
<label>Upload PAN</label>
<div className="custom-file">
<input
type="file"
className="custom-file-input"
id="panFile"
name="panFile"
onChange={event => {
if (event) {
const file = event.currentTarget.files[0];
setFieldValue("panFile", file);
}
}}
onBlur={handleBlur}
// value={values.panFile}
onClick={event => {
const { target = {} } = event || {};
target.value = "";
}}
/>
<label className="custom-file-label" htmlFor="panFile">
Upload
</label>
</div> </div>
<p className="textS">Upload in .PNG or .JPG/JPEG format</p> </div>
{errors.panFile && touched.panFile && <span className="form-error">{errors.panFile}</span>} <div className="col-12 offset-lg-1 col-lg-5">
{values.panFile && ( <div className="input-group">
<div className="d-flex align-items-center justify-content-between p-1" style={{ width: "100%" }}> <label>Upload PAN</label>
<p className="textS m-0">{values.panFile.name}</p> <div className="custom-file">
<FaTimes <input
style={{ cursor: "pointer" }} disabled={disableFields}
onClick={() => { type="file"
setFieldValue("panFile", ""); className="custom-file-input"
id="panFile"
name="panFile"
onChange={event => {
if (event) {
const file = event.currentTarget.files[0];
setFieldValue("panFile", file);
}
}}
onBlur={handleBlur}
// value={values.panFile}
onClick={event => {
const { target = {} } = event || {};
target.value = "";
}} }}
/> />
<label className="custom-file-label" htmlFor="panFile">
Upload
</label>
</div> </div>
)} <p className="textS">Upload in .PNG or .JPG/JPEG format</p>
{errors.panFile && touched.panFile && <span className="form-error">{errors.panFile}</span>}
{values.panFile && (
<div className="d-flex align-items-center justify-content-between p-1" style={{ width: "100%" }}>
<p className="textS m-0">{values.panFile.name}</p>
<FaTimes
style={{ cursor: "pointer" }}
onClick={() => {
setFieldValue("panFile", "");
}}
/>
</div>
)}
</div>
</div> </div>
</div> </div>
</div> <div className="row">
<div className="row"> <div className="col-12 col-lg-5">
<div className="col-12 col-lg-5"> <div className="input-group">
<div className="input-group"> <label>GST Number</label>
<label>GST Number</label> <input disabled={disableFields} type="text" name="gstNumber" onChange={handleChange} onBlur={handleBlur} value={values.gstNumber} />
<input type="text" name="gstNumber" onChange={handleChange} onBlur={handleBlur} value={values.gstNumber} /> {errors.gstNumber && touched.gstNumber && <span className="form-error">{errors.gstNumber}</span>}
{errors.gstNumber && touched.gstNumber && <span className="form-error">{errors.gstNumber}</span>} </div>
</div> </div>
</div> <div className="col-12 offset-lg-1 col-lg-5">
<div className="col-12 offset-lg-1 col-lg-5"> <div className="input-group">
<div className="input-group"> <label>GST Certificate</label>
<label>GST Certificate</label> <div className="custom-file">
<div className="custom-file"> <input
<input disabled={disableFields}
type="file" type="file"
className="custom-file-input" className="custom-file-input"
id="gstCertificateFile" id="gstCertificateFile"
name="gstCertificateFile" name="gstCertificateFile"
onChange={handleChange} onChange={handleChange}
onBlur={handleBlur} onBlur={handleBlur}
value={values.gstCertificateFile} value={values.gstCertificateFile}
/> />
<label className="custom-file-label" htmlFor="gstCertificateFile"> <label className="custom-file-label" htmlFor="gstCertificateFile">
Upload Upload
</label> </label>
</div>
<p className="textS">Upload in .PNG or .JPG/JPEG format</p>
{errors.gstCertificateFile && touched.gstCertificateFile && <span className="form-error">{errors.gstCertificateFile}</span>}
</div> </div>
<p className="textS">Upload in .PNG or .JPG/JPEG format</p>
{errors.gstCertificateFile && touched.gstCertificateFile && <span className="form-error">{errors.gstCertificateFile}</span>}
</div> </div>
</div> </div>
</div> <div className="row">
<div className="row"> <div className="col-12 col-lg-5">
<div className="col-12 col-lg-5"> <div className="input-group">
<div className="input-group"> <label>Business Name</label>
<label>Business Name</label> <input disabled={disableFields} type="text" name="businessName" onChange={handleChange} onBlur={handleBlur} value={values.businessName} />
<input type="text" name="businessName" onChange={handleChange} onBlur={handleBlur} value={values.businessName} /> {errors.businessName && touched.businessName && <span className="form-error">{errors.businessName}</span>}
{errors.businessName && touched.businessName && <span className="form-error">{errors.businessName}</span>} </div>
</div> </div>
</div> <div className="col-12 offset-lg-1 col-lg-5">
<div className="col-12 offset-lg-1 col-lg-5"> <div className="input-group">
<div className="input-group"> <label>Brand Logo</label>
<label>Brand Logo</label> <div className="custom-file">
<div className="custom-file"> <input
<input disabled={disableFields}
type="file" type="file"
className="custom-file-input" className="custom-file-input"
id="brandLogoFile" id="brandLogoFile"
name="brandLogoFile" name="brandLogoFile"
onChange={handleChange} onChange={handleChange}
onBlur={handleBlur} onBlur={handleBlur}
value={values.brandLogoFile} value={values.brandLogoFile}
/> />
<label className="custom-file-label" htmlFor="brandLogoFile"> <label className="custom-file-label" htmlFor="brandLogoFile">
Upload Upload
</label> </label>
</div>
<p className="textS">Upload in .PNG or .JPG/JPEG format</p>
{errors.brandLogoFile && touched.brandLogoFile && <span className="form-error">{errors.brandLogoFile}</span>}
</div> </div>
<p className="textS">Upload in .PNG or .JPG/JPEG format</p>
{errors.brandLogoFile && touched.brandLogoFile && <span className="form-error">{errors.brandLogoFile}</span>}
</div> </div>
</div> </div>
</div> </div>
</div> <hr />
<hr /> <div className="mt-4">
<div className="mt-4"> <p className="textH">Business Address</p>
<p className="textH">Business Address</p> <div className="row">
<div className="row"> <div className="col-12 col-lg-5">
<div className="col-12 col-lg-5"> <div className="input-group">
<div className="input-group"> <label>Pincode</label>
<label>Pincode</label> {/* <AsyncTypeahead
{/* <AsyncTypeahead
onSearch={handleSearch} onSearch={handleSearch}
minLength={3} minLength={3}
value={values.pincode} value={values.pincode}
...@@ -270,95 +328,96 @@ const BusinessDetails = () => { ...@@ -270,95 +328,96 @@ const BusinessDetails = () => {
console.log("input change", e); console.log("input change", e);
}} }}
/> */} /> */}
<input type="text" name="pincode" onChange={handleChange} onBlur={handleBlur} value={values.pincode} /> <input disabled={disableFields} type="text" name="pincode" onChange={handleChange} onBlur={handleBlur} value={values.pincode} />
{errors.pincode && touched.pincode && <span className="form-error">{errors.pincode}</span>} {errors.pincode && touched.pincode && <span className="form-error">{errors.pincode}</span>}
</div>
</div> </div>
</div> <div className="col-12 offset-lg-1 col-lg-5">
<div className="col-12 offset-lg-1 col-lg-5"> <div className="input-group">
<div className="input-group"> <label>Country</label>
<label>Country</label> <input disabled={disableFields} type="text" name="country" onChange={handleChange} onBlur={handleBlur} value={values.country} />
<input type="text" name="country" onChange={handleChange} onBlur={handleBlur} value={values.country} /> {errors.country && touched.country && <span className="form-error">{errors.country}</span>}
{errors.country && touched.country && <span className="form-error">{errors.country}</span>} </div>
</div> </div>
</div> </div>
</div> <div className="row">
<div className="row"> <div className="col-12 col-lg-5">
<div className="col-12 col-lg-5"> <div className="input-group">
<div className="input-group"> <label>State</label>
<label>State</label> <input disabled={disableFields} type="text" name="state" onChange={handleChange} onBlur={handleBlur} value={values.state} />
<input type="text" name="state" onChange={handleChange} onBlur={handleBlur} value={values.state} /> {errors.state && touched.state && <span className="form-error">{errors.state}</span>}
{errors.state && touched.state && <span className="form-error">{errors.state}</span>} </div>
</div>
<div className="col-12 offset-lg-1 col-lg-5">
<div className="input-group">
<label>City</label>
<input disabled={disableFields} type="text" name="city" onChange={handleChange} onBlur={handleBlur} value={values.city} />
{errors.city && touched.city && <span className="form-error">{errors.city}</span>}
</div>
</div> </div>
</div> </div>
<div className="col-12 offset-lg-1 col-lg-5"> <div className="row">
<div className="input-group"> <div className="col-12 col-lg-5">
<label>City</label> <div className="input-group">
<input type="text" name="city" onChange={handleChange} onBlur={handleBlur} value={values.city} /> <label>Address Line 1</label>
{errors.city && touched.city && <span className="form-error">{errors.city}</span>} <input disabled={disableFields} type="text" name="addressLine1" onChange={handleChange} onBlur={handleBlur} value={values.addressLine1} />
{errors.addressLine1 && touched.addressLine1 && <span className="form-error">{errors.addressLine1}</span>}
</div>
</div>
<div className="col-12 offset-lg-1 col-lg-5">
<div className="input-group">
<label>Address Line 2</label>
<input disabled={disableFields} type="text" name="addressLine2" onChange={handleChange} onBlur={handleBlur} value={values.addressLine2} />
{errors.addressLine2 && touched.addressLine2 && <span className="form-error">{errors.addressLine2}</span>}
</div>
</div> </div>
</div> </div>
</div> </div>
<div className="row"> <div className="row mt-3 mb-1">
<div className="col-12 col-lg-5"> <div className="col-12 col-lg-5">
<div className="input-group"> <div className="input-group">
<label>Address Line 1</label> <Button disabled={disableFields} type="submit" className="btn btn-primary btn-submit">
<input type="text" name="addressLine1" onChange={handleChange} onBlur={handleBlur} value={values.addressLine1} /> Send for Approval
{errors.addressLine1 && touched.addressLine1 && <span className="form-error">{errors.addressLine1}</span>} </Button>
</div>
</div>
<div className="col-12 offset-lg-1 col-lg-5">
<div className="input-group">
<label>Address Line 2</label>
<input type="text" name="addressLine2" onChange={handleChange} onBlur={handleBlur} value={values.addressLine2} />
{errors.addressLine2 && touched.addressLine2 && <span className="form-error">{errors.addressLine2}</span>}
</div> </div>
</div> </div>
</div> </div>
</div> </Form>
<div className="row mt-3 mb-1"> )}
<div className="col-12 col-lg-5"> </Formik>
<div className="input-group"> </div>
<Button type="submit" className="btn btn-primary btn-submit">
Send for Approval
</Button>
</div>
</div>
</div>
</Form>
)}
</Formik>
</div> </div>
</div> </div>
</div> <div className="col-12 col-lg-4">
<div className="col-12 col-lg-4"> <div className="content-div help-center">
<div className="content-div help-center"> <h2>Help Center</h2>
<h2>Help Center</h2> <ul className="helplist">
<ul className="helplist"> <li>
<li> <Image alt="" src="/images/vendor/question.svg" width="22" height="22" />
<Image alt="" src="/images/vendor/question.svg" width="22" height="22" /> <p>Lorem Ipsum Dolor Sit?</p>
<p>Lorem Ipsum Dolor Sit?</p> </li>
</li> <li>
<li> <Image alt="" src="/images/vendor/question.svg" width="22" height="22" />
<Image alt="" src="/images/vendor/question.svg" width="22" height="22" /> <p>Lorem Ipsum Dolor Sit?</p>
<p>Lorem Ipsum Dolor Sit?</p> </li>
</li> <li>
<li> <Image alt="" src="/images/vendor/question.svg" width="22" height="22" />
<Image alt="" src="/images/vendor/question.svg" width="22" height="22" /> <p>Lorem Ipsum Dolor Sit?</p>
<p>Lorem Ipsum Dolor Sit?</p> </li>
</li> <li>
<li> <Image alt="" src="/images/vendor/question.svg" width="22" height="22" />
<Image alt="" src="/images/vendor/question.svg" width="22" height="22" /> <p>Lorem Ipsum Dolor Sit?</p>
<p>Lorem Ipsum Dolor Sit?</p> </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>+1 (407) 8798 789</p> </li>
</li> </ul>
</ul> </div>
</div> </div>
</div> </div>
</div> </div>
</div> )}
</Fragment> </Fragment>
); );
}; };
......
components/vendor/OrderListing.js 0 → 100644
import { Fragment } from "react";
import { Button, Image, Table } from "react-bootstrap";
import { FaFilter } from "react-icons/fa";
const OrderListing = () => {
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9]
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>
<Table responsive className="listingTable">
<thead>
<tr>
<th>
<label className="check-container mb-0 ps-2" htmlFor="checkh">
<input
type="checkbox"
id="checkh"
className="check-box"
/>
<span className="checkmark"></span>
</label>
</th>
<th>Order ID</th>
<th>Order Date</th>
<th>Items</th>
<th>Total Amount</th>
<th>Status</th>
<th></th>
</tr>
</thead>
<tbody>
{array.map((data, index) => (
<tr key={index}>
<td>
<label className="check-container mb-0 ps-2" htmlFor={`check${index}`}>
<input
type="checkbox"
id={`check${index}`}
className="check-box"
/>
<span className="checkmark"></span>
</label>
</td>
<td>ID_8797878</td>
<td>29 Jan 2024</td>
<td>Edge City Climb <span>+3more</span></td>
<td>$ 499</td>
<td><div className="statusDiv processing">Processing</div></td>
<td><Image alt="" width={20} height={20} src="/images/vendor/icon-more-vertical.svg" /></td>
</tr>
))}
<tr>
<td colSpan={7}>Showing Results 10 of 1567</td>
</tr>
</tbody>
</Table>
</div>
</div>
</div>
</Fragment>
);
};
export default OrderListing;
package.json
...@@ -27,6 +27,7 @@ ...@@ -27,6 +27,7 @@
"react-icons": "^5.0.1", "react-icons": "^5.0.1",
"react-image-gallery": "^1.3.0", "react-image-gallery": "^1.3.0",
"react-js-pagination": "^3.0.3", "react-js-pagination": "^3.0.3",
"react-loading-icons": "^1.1.0",
"react-multi-carousel": "^2.8.2", "react-multi-carousel": "^2.8.2",
"react-otp-input": "^3.1.1", "react-otp-input": "^3.1.1",
"react-owl-carousel": "^2.3.3", "react-owl-carousel": "^2.3.3",
...@@ -34,6 +35,7 @@ ...@@ -34,6 +35,7 @@
"react-player": "^2.11.0", "react-player": "^2.11.0",
"react-rating": "^2.0.5", "react-rating": "^2.0.5",
"react-redux": "^8.0.2", "react-redux": "^8.0.2",
"react-select": "^5.8.0",
"react-toastify": "^9.0.8", "react-toastify": "^9.0.8",
"reactjs-otp-input": "^2.0.8", "reactjs-otp-input": "^2.0.8",
"redux": "^4.2.0", "redux": "^4.2.0",
......
pages/test.js
// AccordionForm.js
import React, { useState } from 'react'; import React, { useState } from 'react';
import { Formik, FieldArray, Field, ErrorMessage } from 'formik'; import { Formik, Form, Field, FieldArray } from 'formik';
import * as Yup from 'yup';
const validationSchema = Yup.object().shape({
items: Yup.array().of(
Yup.object().shape({
title: Yup.string().required('Title is required'),
content: Yup.string().required('Content is required'),
})
),
});
const initialValues = {
items: [{ title: '', content: '' }],
};
const AccordionForm = () => { const AccordionForm = () => {
const [expandedIndex, setExpandedIndex] = useState(null); const [expandedIndex, setExpandedIndex] = useState(0); // Initially set the first item as expanded
const handleToggleAccordion = (index) => { const toggleAccordion = (index) => {
setExpandedIndex((prevIndex) => (prevIndex === index ? null : index)); setExpandedIndex((prevIndex) => (prevIndex === index ? null : index));
}; };
return ( return (
<div> <div>
<h1>Accordion Form</h1>
<Formik <Formik
initialValues={initialValues} initialValues={{
validationSchema={validationSchema} items: [{ title: '', content: '' }]
}}
onSubmit={(values) => { onSubmit={(values) => {
console.log(values); console.log(values);
}} }}
> >
{({ values }) => ( {({ values }) => (
<form> <Form>
<FieldArray name="items"> <FieldArray name="items">
{({ push, remove }) => ( {({ push, remove }) => (
<> <div>
{values.items.map((_, index) => ( {values.items.map((_, index) => (
<div key={index}> <div key={index}>
<div <AccordionItem
style={{ index={index}
border: '1px solid #ccc', expanded={expandedIndex === index}
padding: '10px', toggleAccordion={() => toggleAccordion(index)}
marginBottom: '10px', remove={() => remove(index)}
}}
> >
<div <div>
style={{ <Field name={`items.${index}.title`} placeholder="Title" />
display: 'flex', <Field name={`items.${index}.content`} placeholder="Content" />
justifyContent: 'space-between',
alignItems: 'center',
}}
onClick={() => handleToggleAccordion(index)}
>
<h3>Accordion {index + 1}</h3>
<button type="button" onClick={() => remove(index)}>
Remove
</button>
</div> </div>
{expandedIndex === index && ( </AccordionItem>
<div>
<div>
<label htmlFor={`items.${index}.title`}>Title</label>
<Field name={`items.${index}.title`} />
<ErrorMessage name={`items.${index}.title`} component="div" />
</div>
<div>
<label htmlFor={`items.${index}.content`}>Content</label>
<Field name={`items.${index}.content`} />
<ErrorMessage name={`items.${index}.content`} component="div" />
</div>
</div>
)}
</div>
</div> </div>
))} ))}
<button type="button" onClick={() => push({ title: '', content: '' })}> <button
Add Accordion type="button"
onClick={() => {
push({ title: '', content: '' });
setExpandedIndex(values.items.length);
}}
>
Add Item
</button> </button>
</> </div>
)} )}
</FieldArray> </FieldArray>
<button type="submit">Submit</button> <button type="submit">Submit</button>
</form> </Form>
)} )}
</Formik> </Formik>
</div> </div>
); );
}; };
export default AccordionForm;
\ No newline at end of file \ No newline at end of file
const AccordionItem = ({ index, expanded, toggleAccordion, remove, children }) => {
return (
<div>
<button type="button" onClick={toggleAccordion}>
{expanded ? '-' : '+'}
</button>
<button type="button" onClick={remove}>Remove</button>
<div style={{ display: expanded ? 'block' : 'none' }}>{children}</div>
</div>
);
};
export default AccordionForm;
pages/vendor/activities/index.js 0 → 100644
import React from "react";
import Layout from "../../../components/layout/Layout";
import { wrapper } from "../../../redux/store";
import Sidebar from "../../../components/layout/VendorDashboardSidebar";
import ActivityListing from "../../../components/vendor/ActivityListing";
// import { loadUser } from "../redux/actions/userActions";
// import { wrapper } from "../redux/store";
export default function ActivityListingPage() {
return (
<Layout>
<div className="sidebarContainer">
<Sidebar />
<div className="content">
<ActivityListing />
</div>
</div>
</Layout>
);
};
/** For server side rendering */
export const getServerSideProps = wrapper.getServerSideProps(store => async ({ req, query }) => {
// Get the menu data.
// get the locations data.
// await store.dispatch(getVendorDetails())
return {
props: {},
};
});
pages/vendor/business-details/index.js
...@@ -21,17 +21,16 @@ export default function BusinessDetailsPage () { ...@@ -21,17 +21,16 @@ export default function BusinessDetailsPage () {
); );
}; };
/** 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. // get the locations data.
// await store.dispatch(getVendorDetails()) await store.dispatch(loadUser());
return { return {
props: {}, props: {}
}; };
}); });
\ No newline at end of file \ No newline at end of file
pages/vendor/dashboard/index.js
import Image from "next/image"; import Image from "next/image";
import React, { useState } from "react"; import React, { useEffect, useState } from "react";
import Sidebar from "../../../components/layout/VendorDashboardSidebar"; import Sidebar from "../../../components/layout/VendorDashboardSidebar";
import Layout from "../../../components/layout/Layout"; import Layout from "../../../components/layout/Layout";
import { Button } from "react-bootstrap"; import { Button } from "react-bootstrap";
import { FaPlus } from "react-icons/fa"; import { FaPlus } from "react-icons/fa";
import { useDispatch, useSelector } from "react-redux";
import { loadUser } from "../../../redux/actions/userActions";
import { wrapper } from "../../../redux/store";
import { useRouter } from "next/router";
const VendorDashboard = () => { const VendorDashboard = () => {
const { user, error } = useSelector(state => state.loadedUser);
const router = useRouter();
console.log("user", user);
const [collapsed, setCollapsed] = useState(false); const ApprovalStatus = () => {
if (user) {
switch (user.approved) {
case "approved":
return <></>;
const toggleSidebar = () => { case "rejected":
setCollapsed(!collapsed); return (
}; <>
<div class="alert alert-danger" role="alert">
Your profile has been rejected! Please contact the admin for more details!
</div>
</>
);
return ( case "pending":
<Layout> return (
<div className="sidebarContainer"> <>
<Sidebar collapsed={collapsed} toggleSidebar={toggleSidebar} /> <div className="col-12 offset-lg-2 col-lg-8 ">
<div className="content"> <div className="alert alert-danger alert-dismissible fade show text-center" role="alert">
<div className="row"> {/* <div className="bgCircleBlue">
<div className="col-12 offset-lg-2 col-lg-8"> <Image alt="" src="/images/vendor/icon-tick.svg" width="15" height="10" />
<div className="infoSent"> </div> */}
<div className="bgCircleBlue"> <div className="text-center">
<Image alt="" src="/images/vendor/icon-tick.svg" width="15" height="10" /> <p className="p1 text-center">Business information sent successfully.</p>
</div> <p className="p2 text-center">Kindly wait until we verify the details. You can start adding activities once your account is verified.</p>
<div className="px-3"> </div>
<p className="p1">Business information sent successfully.</p> {/* <button type="button" className="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> */}
<p className="p2">Kindly wait until we verify the details. You can start adding activities once your account is verified.</p> </div>
</div>
<div>
<Image alt="" src="/images/vendor/icon-close.svg" width="14" height="14" />
</div>
</div>
</div>
<div className="d-flex justify-content-center py-4"> {/* <div className="infoSent">
<span className="image-container"> <div className="bgCircleBlue">
<Image alt="" layout="fill" src="/images/vendor/Isolation_Mode.png" className="image" /> <Image alt="" src="/images/vendor/icon-tick.svg" width="15" height="10" />
</span> </div>
</div> <div className="px-3">
<div className="text-center py-2 mb-5"> <p className="p1">Business information sent successfully.</p>
<p className="p3">No information is available right now</p> <p className="p2">Kindly wait until we verify the details. You can start adding activities once your account is verified.</p>
<Button type="button" variant="" className="btnAdd" disabled> </div>
<span className="image-container me-2"> <div>
<Image alt="" layout="fill" src="/images/vendor/icon-plus.svg" width="14" height="14" className="image" /> <Image alt="" src="/images/vendor/icon-close.svg" width="14" height="14" />
</span>
{/* <FaPlus className="me-2" /> */}
<span>Add Activity</span>
</Button>
<Button type="button" variant="" className="btnAdd">
<span className="image-container me-2">
<Image alt="" layout="fill" src="/images/vendor/icon-plus.svg" width="14" height="14" className="image" />
</span>
{/* <FaPlus className="me-2" /> */}
<span>Add Activity</span>
</Button>
</div>
</div>
</div> </div>
</div> */}
</div>
</>
);
case "none":
return <></>;
default:
break;
}
}
};
return (
<Layout>
<div className="sidebarContainer">
<Sidebar />
<div className="content">
<div className="row">
<ApprovalStatus />
<div className="d-flex justify-content-center py-4">
<span className="image-container">
<Image alt="" layout="fill" src="/images/vendor/Isolation_Mode.png" className="image" />
</span>
</div>
<div className="text-center py-2 mb-5">
<p className="p3">No information is available right now</p>
<Button
onClick={() => {
router.push("/vendor/activity-details");
}}
type="button"
variant=""
className="btnAdd"
disabled={user?.approved != "approved"}
>
<span className="image-container me-2">
<Image alt="" layout="fill" src="/images/vendor/icon-plus.svg" width="14" height="14" className="image" />
</span>
{/* <FaPlus className="me-2" /> */}
<span>Add Activity</span>
</Button>
</div> </div>
</Layout> </div>
); </div>
</div>
</Layout>
);
}; };
export default VendorDashboard;
\ No newline at end of file \ No newline at end of file
export default VendorDashboard;
/** For server side rendering */
export const getServerSideProps = wrapper.getServerSideProps(store => async ({ req, query }) => {
// Get the menu data.
// get the locations data.
await store.dispatch(loadUser());
return {
props: {}
};
});
pages/vendor/orders/index.js 0 → 100644
import React from "react";
import Layout from "../../../components/layout/Layout";
import { wrapper } from "../../../redux/store";
import OrderListing from "../../../components/vendor/OrderListing";
import Sidebar from "../../../components/layout/VendorDashboardSidebar";
// import { loadUser } from "../redux/actions/userActions";
// import { wrapper } from "../redux/store";
export default function OrderListingPage() {
return (
<Layout>
<div className="sidebarContainer">
<Sidebar />
<div className="content">
<OrderListing />
</div>
</div>
</Layout>
);
};
/** For server side rendering */
export const getServerSideProps = wrapper.getServerSideProps(store => async ({ req, query }) => {
// Get the menu data.
// get the locations data.
// await store.dispatch(getVendorDetails())
return {
props: {},
};
});
public/fonts/Poppins-SemiBold.ttf 0 → 100644
No preview for this file type
public/images/vendor/icon-filter.svg 0 → 100644
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.17071 16C4.58254 14.8348 5.69378 14 7 14C8.3062 14 9.4175 14.8348 9.8293 16H20V18H9.8293C9.4175 19.1652 8.3062 20 7 20C5.69378 20 4.58254 19.1652 4.17071 18H0V16H4.17071ZM10.1707 9C10.5825 7.83481 11.6938 7 13 7C14.3062 7 15.4175 7.83481 15.8293 9H20V11H15.8293C15.4175 12.1652 14.3062 13 13 13C11.6938 13 10.5825 12.1652 10.1707 11H0V9H10.1707ZM4.17071 2C4.58254 0.83481 5.69378 0 7 0C8.3062 0 9.4175 0.83481 9.8293 2H20V4H9.8293C9.4175 5.16519 8.3062 6 7 6C5.69378 6 4.58254 5.16519 4.17071 4H0V2H4.17071Z" fill="white"/>
</svg>
public/images/vendor/icon-img.svg 0 → 100644
<svg width="20" height="18" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18 2H2V16L11.2923 6.70649C11.6828 6.31595 12.3159 6.31591 12.7065 6.70641L18 12.0104V2ZM0 0.9934C0 0.44476 0.45531 0 0.9918 0H19.0082C19.556 0 20 0.44495 20 0.9934V17.0066C20 17.5552 19.5447 18 19.0082 18H0.9918C0.44405 18 0 17.5551 0 17.0066V0.9934ZM6 8C4.89543 8 4 7.1046 4 6C4 4.89543 4.89543 4 6 4C7.10457 4 8 4.89543 8 6C8 7.1046 7.10457 8 6 8Z" fill="black"/>
</svg>
public/images/vendor/icon-more-vertical.svg 0 → 100644
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 20C11.45 20 10.9792 19.8042 10.5875 19.4125C10.1958 19.0208 10 18.55 10 18C10 17.45 10.1958 16.9792 10.5875 16.5875C10.9792 16.1958 11.45 16 12 16C12.55 16 13.0208 16.1958 13.4125 16.5875C13.8042 16.9792 14 17.45 14 18C14 18.55 13.8042 19.0208 13.4125 19.4125C13.0208 19.8042 12.55 20 12 20ZM12 14C11.45 14 10.9792 13.8042 10.5875 13.4125C10.1958 13.0208 10 12.55 10 12C10 11.45 10.1958 10.9792 10.5875 10.5875C10.9792 10.1958 11.45 10 12 10C12.55 10 13.0208 10.1958 13.4125 10.5875C13.8042 10.9792 14 11.45 14 12C14 12.55 13.8042 13.0208 13.4125 13.4125C13.0208 13.8042 12.55 14 12 14ZM12 8C11.45 8 10.9792 7.80417 10.5875 7.4125C10.1958 7.02083 10 6.55 10 6C10 5.45 10.1958 4.97917 10.5875 4.5875C10.9792 4.19583 11.45 4 12 4C12.55 4 13.0208 4.19583 13.4125 4.5875C13.8042 4.97917 14 5.45 14 6C14 6.55 13.8042 7.02083 13.4125 7.4125C13.0208 7.80417 12.55 8 12 8Z" fill="#686767"/>
</svg>
public/images/vendor/icon-view.svg 0 → 100644
<svg width="22" height="18" viewBox="0 0 22 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.0003 0C16.3924 0 20.8784 3.87976 21.8189 9C20.8784 14.1202 16.3924 18 11.0003 18C5.60812 18 1.12215 14.1202 0.181641 9C1.12215 3.87976 5.60812 0 11.0003 0ZM11.0003 16C15.2359 16 18.8603 13.052 19.7777 9C18.8603 4.94803 15.2359 2 11.0003 2C6.7646 2 3.14022 4.94803 2.22278 9C3.14022 13.052 6.7646 16 11.0003 16ZM11.0003 13.5C8.51498 13.5 6.50026 11.4853 6.50026 9C6.50026 6.51472 8.51498 4.5 11.0003 4.5C13.4855 4.5 15.5003 6.51472 15.5003 9C15.5003 11.4853 13.4855 13.5 11.0003 13.5ZM11.0003 11.5C12.381 11.5 13.5003 10.3807 13.5003 9C13.5003 7.6193 12.381 6.5 11.0003 6.5C9.6196 6.5 8.50026 7.6193 8.50026 9C8.50026 10.3807 9.6196 11.5 11.0003 11.5Z" fill="black"/>
</svg>
public/images/vendor/minus.svg 0 → 100644
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19 11H5V13H19V11Z" fill="black"/>
</svg>
public/images/vendor/plus.svg 0 → 100644
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z" fill="black"/>
</svg>
redux/actions/activityAction.js 0 → 100644
import axios from "axios";
import { getSession } from "next-auth/react";
import { CREATE_ACTIVITY_FAIL, CREATE_ACTIVITY_REQUEST, CREATE_ACTIVITY_SUCCESS } from "../constants/activitiesConstants";
export const createActivity = data => async dispatch => {
const session = await getSession();
try {
if (!session) {
return "You are not authenticated, please log in.";
}
dispatch({
type: CREATE_ACTIVITY_REQUEST,
loading: true
});
const config = {
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${session.jwt}`
}
};
let activityData = {
data: {
...data
}
};
const response = await axios.post(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/experiences`);
dispatch({
type: CREATE_ACTIVITY_SUCCESS,
payload: response.data
});
return response.data;
} catch (error) {
dispatch({
type: CREATE_ACTIVITY_FAIL,
payload: error.response.data
});
}
};
redux/actions/userActions.js
...@@ -381,3 +381,26 @@ export const finishEndUserOtpVerification = async verificationData => { ...@@ -381,3 +381,26 @@ export const finishEndUserOtpVerification = async verificationData => {
return await axios.post(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/end-users/finish-otp-verification`, verificationData, config); return await axios.post(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/end-users/finish-otp-verification`, verificationData, config);
}; };
export const updateUserApprovalStatus = async ({ status }) => {
const session = await getSession();
if (!session) {
console.log("You are not authorized, please login");
}
const config = {
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${session.jwt}`
}
};
const response = await axios.put(
`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/users/${session.id}`,
{
approved: status
},
config
);
return response;
};
redux/constants/activitiesConstants.js 0 → 100644
export const CREATE_ACTIVITY_REQUEST = "CREATE_ACTIVITY_REQUEST"
export const CREATE_ACTIVITY_SUCCESS = "CREATE_ACTIVITY_SUCCESS"
export const CREATE_ACTIVITY_FAIL = "CREATE_ACTIVITY_FAIL"
export const CLEAR_ERRORS = "CLEAR_ERRORS";
\ No newline at end of file \ No newline at end of file
redux/reducers/activitiesReducer.js 0 → 100644
import { CREATE_ACTIVITY_FAIL, CREATE_ACTIVITY_REQUEST, CREATE_ACTIVITY_SUCCESS } from "../constants/activitiesConstants";
import { CLEAR_ERRORS } from "../constants/vendorConstants";
export const createActivityReducer = (state = {}, action) => {
switch (action.type) {
case CREATE_ACTIVITY_REQUEST:
return { loading: true };
case CREATE_ACTIVITY_SUCCESS:
return {
loading: false,
activityData: action.payload
};
case CREATE_ACTIVITY_FAIL:
return {
loading: false,
error: action.payload.error.message
};
case CLEAR_ERRORS:
return {
...state,
error: null
};
default:
return state;
}
};
\ No newline at end of file \ No newline at end of file
redux/reducers/reducers.js
...@@ -5,6 +5,7 @@ import { authReducer, forgotPasswordReducer, loadedUserReducer, resetPasswordRed ...@@ -5,6 +5,7 @@ import { authReducer, forgotPasswordReducer, loadedUserReducer, resetPasswordRed
import { enquiryReducer } from "./enquiryReducer"; import { enquiryReducer } from "./enquiryReducer";
import { displayEnquireNowReducer } from "./enquireNowModalReducer"; import { displayEnquireNowReducer } from "./enquireNowModalReducer";
import { getVendorDetailsReducer, loggedInVendorReducer, updateVendorReducer } from "./vendorReducers"; import { getVendorDetailsReducer, loggedInVendorReducer, updateVendorReducer } from "./vendorReducers";
import { createActivityReducer } from "./activitiesReducer";
const reducers = combineReducers({ const reducers = combineReducers({
townships: townshipsReducer, townships: townshipsReducer,
...@@ -22,6 +23,7 @@ const reducers = combineReducers({ ...@@ -22,6 +23,7 @@ const reducers = combineReducers({
loggedInVendor: loggedInVendorReducer, loggedInVendor: loggedInVendorReducer,
updatedVendorData: updateVendorReducer, updatedVendorData: updateVendorReducer,
vendorDetails: getVendorDetailsReducer, vendorDetails: getVendorDetailsReducer,
activityData: createActivityReducer,
}); });
export default reducers; export default reducers;
styles/fonts.css
...@@ -210,4 +210,10 @@ ...@@ -210,4 +210,10 @@
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
src: local('Poppons Regular'), url('../public/fonts/Poppins-Regular.ttf') format('truetype'); src: local('Poppons Regular'), url('../public/fonts/Poppins-Regular.ttf') format('truetype');
}
@font-face {
font-family: 'Poppins SemiBold';
font-style: normal;
font-weight: 600;
src: local('Poppons SemiBold'), url('../public/fonts/Poppins-SemiBold.ttf') format('truetype');
} }
\ No newline at end of file \ No newline at end of file
styles/globals.css
...@@ -598,7 +598,8 @@ p { ...@@ -598,7 +598,8 @@ p {
line-height: 20px; line-height: 20px;
} }
span.form-error { span.form-error,
.form-error {
color: red; color: red;
font-size: 0.8rem; font-size: 0.8rem;
font-family: "Sofia Pro Light"; font-family: "Sofia Pro Light";
...@@ -671,10 +672,12 @@ span.form-error { ...@@ -671,10 +672,12 @@ span.form-error {
font-size: 15px; font-size: 15px;
line-height: normal; line-height: normal;
margin-bottom: 10px; margin-bottom: 10px;
width: 100%;
} }
.form-container input, .form-container input,
.form-container select { .form-container select,
.form-container textarea {
width: 100%; width: 100%;
border-radius: 10px !important; border-radius: 10px !important;
border: 0.814px solid #000; border: 0.814px solid #000;
...@@ -682,14 +685,14 @@ span.form-error { ...@@ -682,14 +685,14 @@ span.form-error {
color: #000; color: #000;
font-family: "Sofia Pro Light"; font-family: "Sofia Pro Light";
font-size: 15px; font-size: 15px;
font-weight: 400;
line-height: normal; line-height: normal;
height: 45px; height: 45px;
padding: 16px 22px; padding: 16px 22px;
} }
.form-container input:focus, .form-container input:focus,
.form-container select:focus { .form-container select:focus,
.form-container textarea {
box-shadow: none; box-shadow: none;
outline: unset; outline: unset;
} }
...@@ -699,6 +702,11 @@ span.form-error { ...@@ -699,6 +702,11 @@ span.form-error {
background-color: transparent; background-color: transparent;
} }
.form-container textarea {
resize: none;
height: auto;
}
.contact-number { .contact-number {
width: 100%; width: 100%;
display: flex; display: flex;
...@@ -820,23 +828,23 @@ span.form-error { ...@@ -820,23 +828,23 @@ span.form-error {
} }
.check-container .checkmark:after { .check-container .checkmark:after {
left: 7px; left: 6px;
top: 0px; top: 1px;
width: 4px; width: 5px;
height: 11px; height: 10px;
border: solid #000; border: solid #000;
border-width: 0 2px 2px 0; border-width: 0 2px 2px 0;
transform: rotate(45deg); transform: rotate(45deg);
} }
.checkmark:after { .check-container .checkmark:after {
content: ""; content: "";
position: absolute; position: absolute;
display: none; display: none;
} }
.check-container input { .check-container input {
position: absolute; /* position: absolute; */
opacity: 0; opacity: 0;
cursor: pointer; cursor: pointer;
height: 0; height: 0;
...@@ -847,7 +855,7 @@ span.form-error { ...@@ -847,7 +855,7 @@ span.form-error {
background-color: #fff; background-color: #fff;
} }
.checkmark { .check-container .checkmark {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
...@@ -931,7 +939,6 @@ span.form-error { ...@@ -931,7 +939,6 @@ span.form-error {
.uploadProfileImage p { .uploadProfileImage p {
font-family: "Sofia Pro Bold"; font-family: "Sofia Pro Bold";
font-size: 20px; font-size: 20px;
font-weight: 700;
line-height: 28px; line-height: 28px;
letter-spacing: 0em; letter-spacing: 0em;
color: #fff; color: #fff;
...@@ -1157,17 +1164,17 @@ span.form-error { ...@@ -1157,17 +1164,17 @@ span.form-error {
/*----- vendor business details -------*/ /*----- vendor business details -------*/
.content-div { .content-div {
padding: 2rem 3rem 1rem; padding: 2rem 2rem 1rem;
background: #ffffff; background: #ffffff;
border-radius: 8px; border-radius: 8px;
box-shadow: 0px 4px 20px 0px #73737340; box-shadow: 0px 4px 20px 0px #73737340;
position: relative; position: relative;
min-height: 600px;
} }
.content-div h2 { .content-div h2 {
font-family: "Sofia Pro Bold"; font-family: "Sofia Pro Bold";
font-size: 36px; font-size: 36px;
font-weight: 700;
line-height: 50px; line-height: 50px;
letter-spacing: 0em; letter-spacing: 0em;
margin-bottom: 20px; margin-bottom: 20px;
...@@ -1176,7 +1183,6 @@ span.form-error { ...@@ -1176,7 +1183,6 @@ span.form-error {
.content-div h4 { .content-div h4 {
font-family: "Sofia Pro Light"; font-family: "Sofia Pro Light";
font-size: 30px; font-size: 30px;
font-weight: 300;
line-height: 37px; line-height: 37px;
letter-spacing: 0em; letter-spacing: 0em;
margin-bottom: 20px; margin-bottom: 20px;
...@@ -1234,7 +1240,7 @@ span.form-error { ...@@ -1234,7 +1240,7 @@ span.form-error {
.business-details .textS { .business-details .textS {
font-size: 12px; font-size: 12px;
line-height: 12px; line-height: 13px;
margin-top: 10px; margin-top: 10px;
margin-bottom: 5px; margin-bottom: 5px;
} }
...@@ -1269,7 +1275,6 @@ span.form-error { ...@@ -1269,7 +1275,6 @@ span.form-error {
color: #000; color: #000;
font-family: "Sofia Pro Light"; font-family: "Sofia Pro Light";
font-size: 15px; font-size: 15px;
font-weight: 400;
line-height: normal; line-height: normal;
height: 45px; height: 45px;
padding: 16px 22px; padding: 16px 22px;
...@@ -1298,13 +1303,13 @@ span.form-error { ...@@ -1298,13 +1303,13 @@ span.form-error {
} }
.sidebar { .sidebar {
width: 250px; width: 210px;
height: auto; height: auto;
background-color: #242932; background-color: #242932;
color: #fff; color: #fff;
transition: width 0.3s ease; transition: width 0.3s ease;
margin-top: -20px; margin-top: -20px;
padding-top: 3rem; padding-top: 2rem;
} }
.sidebar.collapsed { .sidebar.collapsed {
...@@ -1318,7 +1323,7 @@ span.form-error { ...@@ -1318,7 +1323,7 @@ span.form-error {
} }
.sidebar ul li { .sidebar ul li {
padding: 1rem 2rem; padding: 0.85rem 2rem;
} }
.sidebar ul li.active { .sidebar ul li.active {
...@@ -1344,7 +1349,7 @@ span.form-error { ...@@ -1344,7 +1349,7 @@ span.form-error {
.sidebarContainer .content { .sidebarContainer .content {
flex: 1; flex: 1;
padding: 3rem 1rem; padding: 2rem 1rem;
} }
/*-------------------------*/ /*-------------------------*/
...@@ -1398,7 +1403,7 @@ span.form-error { ...@@ -1398,7 +1403,7 @@ span.form-error {
.btnAdd { .btnAdd {
background-color: #0070bd !important; background-color: #0070bd !important;
/* border: 1px solid #0070BD; */ /* border: 1px solid #0070BD; */
padding: 1rem 2rem !important; padding: 0.75rem 2rem !important;
border-radius: 10px !important; border-radius: 10px !important;
font-family: "Sofia Pro Bold"; font-family: "Sofia Pro Bold";
font-size: 16px !important; font-size: 16px !important;
...@@ -1411,6 +1416,7 @@ span.form-error { ...@@ -1411,6 +1416,7 @@ span.form-error {
justify-content: center; justify-content: center;
margin: 1rem auto; margin: 1rem auto;
} }
.btnAdd:disabled { .btnAdd:disabled {
background-color: #a4afb7 !important; background-color: #a4afb7 !important;
color: #ffffff; color: #ffffff;
...@@ -1422,6 +1428,286 @@ span.form-error { ...@@ -1422,6 +1428,286 @@ span.form-error {
border: 1px solid #0070bd; border: 1px solid #0070bd;
} }
.btnAdd:hover,
.btnAdd:focus,
.btnAdd:active {
border: 1px solid #0070BD;
}
.activityDetails .accordionItem {
padding: 1rem;
border-bottom: 1px solid #ECECEC;
}
.activityDetails .accordionItem:last-child {
border-bottom: none;
}
/* The radioContainer */
.radioContainer {
display: block;
position: relative;
cursor: pointer;
padding-left: 25px;
font-family: "Sofia Pro Regular";
font-size: 15px;
line-height: 15px;
letter-spacing: 0em;
text-align: left;
color: #000;
margin-top: 5px;
}
/* Hide the browser's default radio button */
.radioContainer input {
position: absolute;
opacity: 0;
cursor: pointer;
}
.form-container .radioContainer input {
height: 0;
width: 0;
}
/* Create a custom radio button */
.radioContainer .checkmark {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-55%);
height: 20px;
width: 20px;
background-color: #FFF;
border-radius: 50%;
border: 1px solid #75777B;
}
/* On mouse-over, add a grey background color */
.radioContainer:hover input~.checkmark {
background-color: #FFF;
}
/* When the radio button is checked, add a blue background */
.radioContainer input:checked~.checkmark {
color: #0070BD;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.radioContainer .checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the indicator (dot/circle) when checked */
.radioContainer input:checked~.checkmark:after {
display: block;
}
/* Style the indicator (dot/circle) */
.radioContainer .checkmark:after {
top: 50%;
left: 50%;
width: 12px;
height: 12px;
border-radius: 50%;
background: #0070BD;
transform: translate(-50%, -50%);
}
/*--------- multiselect dropdown --------*/
.css-b62m3t-container {
width: 100%;
}
.select__control {
border: 0.81px solid #000 !important;
border-radius: 10px !important;
font-family: "Sofia Pro Light";
font-size: 15px;
text-align: left;
color: #000;
min-height: 45px !important;
height: 45px !important;
}
.select__value-container.select__value-container--is-multi,
.select__input-container {
height: 45px !important;
}
.select__input-container {
margin: 0 !important;
}
.select__control.select__control--is-focused {
border-color: #000 !important;
box-shadow: unset !important;
}
.select__menu {
font-family: "Sofia Pro Light";
font-size: 15px;
text-align: left;
color: #000;
}
.select__indicator.select__dropdown-indicator svg {
fill: #000 !important;
stroke: #000 !important;
}
/*---- activity images upload----*/
.customUploadImage {
position: relative;
display: inline-block;
border: .81px solid #000;
border-radius: 10px;
width: 51px;
height: 51px;
margin-right: 1rem;
padding: 8px;
cursor: pointer;
}
.customUploadImage label {
margin: 0 auto !important;
padding: 0;
}
.customUploadImage img {
min-width: 20px !important;
min-height: 18px !important;
}
.customUploadImage input[type="file"] {
position: absolute;
z-index: 2;
margin: 0;
opacity: 0;
top: 0;
left: 0;
}
.removeImage {
position: absolute;
top: -5px;
right: -5px;
cursor: pointer;
}
.textAdd {
font-family: "Sofia Pro Light";
font-size: 15px !important;
line-height: 15.17px !important;
text-align: left;
color: #0070BD;
text-decoration: underline;
text-wrap: nowrap;
margin-top: 10px;
cursor: pointer;
}
/*--------- orders listing -----------*/
.rightContent h2 {
font-family: "Sofia Pro Bold";
font-size: 32px;
line-height: 40px;
letter-spacing: 0em;
margin-bottom: 0;
}
.rightContent .btn {
padding: 10px 15px !important;
}
.listingTable {
padding: 0 10px;
border-collapse: separate;
border-spacing: 0 12px;
}
.listingTable thead tr th {
background-color: #E9EEF0;
padding: 12px;
color: #1C1C1E;
font-family: "Poppins SemiBold";
font-size: 16px;
line-height: 25px;
}
.listingTable thead tr th:first-child {
border-radius: 12px 0 0 0;
}
.listingTable thead tr th:last-child {
border-radius: 0 12px 0 0;
}
.listingTable .check-container .checkmark {
top: 5px;
border: 1px solid rgba(218, 220, 224, 1)
}
.listingTable .check-container .checkmark:after {
left: 7px;
top: 2px;
}
.listingTable tbody tr {
box-shadow: 0px 4px 4px 0px rgba(156, 156, 156, 0.15);
}
.listingTable tbody tr:last-child {
border-radius: 0 0 12px 12px;
}
.listingTable tbody tr:last-child td {
color: rgba(178, 178, 182, 1);
}
.listingTable tbody tr td {
padding: 12px;
font-family: "Poppins Regular";
font-size: 15px;
line-height: 22px;
color: #1C1C1E;
}
.listingTable tbody tr td span {
color: Blue;
text-decoration: underline;
}
.statusDiv {
border-radius: 50px;
padding: 5px;
font-family: "Poppins Regular";
font-size: 15px;
line-height: 22px;
text-align: center;
cursor: pointer;
}
.statusDiv.processing {
background-color: #DFF3FB;
border: 1px solid #01A7DB;
color: #3198F3;
}
.statusDiv.completed {
background-color: #F1FFEB;
border: 1px solid #5ED028;
color: #5ED028;
}
/*--------------------------*/ /*--------------------------*/
.let-discover-carousal a { .let-discover-carousal a {
...@@ -2283,6 +2569,7 @@ footer hr { ...@@ -2283,6 +2569,7 @@ footer hr {
.faqs-session { .faqs-session {
padding: 5rem 0; padding: 5rem 0;
} }
.subscribe label .btn { .subscribe label .btn {
font-size: 16px; font-size: 16px;
padding-left: 1rem; padding-left: 1rem;
...@@ -2838,6 +3125,12 @@ footer hr { ...@@ -2838,6 +3125,12 @@ footer hr {
font-size: 32px; font-size: 32px;
line-height: 40px; line-height: 40px;
margin-bottom: 2rem; margin-bottom: 2rem;
input:disabled {
cursor: not-allowed;
background-color: -internal-light-dark(rgba(239, 239, 239, 0.3), rgba(59, 59, 59, 0.3)) !important;
color: -internal-light-dark(rgb(84, 84, 84), rgb(170, 170, 170)) !important;
border-color: rgba(118, 118, 118, 0.3) !important;
} }
@media (min-width: 992px) { @media (min-width: 992px) {
......
yarn.lock
This diff could not be displayed because it is too large.
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!