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 1315 additions and 309 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={{
activities: [
{
category: "", category: "",
subcategory: "", subCategory: "",
activity_name: "", activityName: "",
activity_description: "", activityDescription: "",
location: "", location: "",
address: "", addressLine1: "",
price_per_person: "", addressLine2: "",
gifting_to_someone: "", pricePerPerson: "",
giftingToSomeone: "",
place: "", place: "",
contact_person_for_activity: "", contactPersonForActivity: "",
min_group_size: "", minGroupSize: "",
max_group_size: "", maxGroupSize: "",
month: "", months: "",
min_duration: "", minDuration: "",
max_duration: "", maxDuration: "",
durationUnit: "",
link_of_booking: "", ageGroup: "",
activity_images: [], linkOfBooking: "",
contact_person_for_booking: "", activityImages: [],
contact_number_for_booking: "", contactPersonForBooking: "",
cancellation_policy_file: "", countryCode: "",
terms_conditions_file: "", contactNumberForBooking: "",
cancellationPolicyFile: "",
termsConditionsFile: "",
}
]
}} }}
validationSchema={activityDetailsValidationSchema} validationSchema={activityDetailsValidationSchema}
// enableReinitialize={true} // enableReinitialize={true}
...@@ -94,23 +89,81 @@ const ActivityDetails = () => { ...@@ -94,23 +89,81 @@ 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">
{({ push, remove }) => (
<div className="activityDetails">
<div className="d-flex justify-content-between mb-3">
<h4 className="mb-0">Activity Details</h4>
<Button type="button" variant="" className="btnAdd m-0"
onClick={() => {
push({
category: "",
subCategory: "",
activityName: "",
activityDescription: "",
location: "",
addressLine1: "",
addressLine2: "",
pricePerPerson: "",
giftingToSomeone: "",
place: "",
contactPersonForActivity: "",
minGroupSize: "",
maxGroupSize: "",
months: "",
minDuration: "",
maxDuration: "",
durationUnit: "",
ageGroup: "",
linkOfBooking: "",
activityImages: [],
contactPersonForBooking: "",
countryCode: "",
contactNumberForBooking: "",
cancellationPolicyFile: "",
termsConditionsFile: "",
});
setExpandedIndex(values.activities.length);
}}
>
<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>
{values.activities.map((_, index) => (
<div key={index} className="accordionItem">
<AccordionItem
index={index}
expanded={expandedIndex === index}
toggleAccordion={() => toggleAccordion(index)}
remove={() => remove(index)}
>
<div> <div>
<div className="mt-4">
{/* <p className="textH">Basic Details</p> */}
<div className="d-flex justify-content-between">
<p className="textH">Basic Details</p> <p className="textH">Basic Details</p>
{index > 0 && (
<div style={{ cursor: "pointer" }} onClick={remove}><FaTrash style={{ marginTop: "-5px" }} /> Remove</div>
)}
</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>Category</label> <label>Category</label>
<select <select
id="category" id={`activities.${index}.category`}
name="category" name={`activities.${index}.category`}
onChange={handleChange} onChange={handleChange}
onBlur={handleBlur} onBlur={handleBlur}
> >
...@@ -118,15 +171,15 @@ const ActivityDetails = () => { ...@@ -118,15 +171,15 @@ const ActivityDetails = () => {
<option value="Category 1">Category 1</option> <option value="Category 1">Category 1</option>
<option value="Category 2">Category 2</option> <option value="Category 2">Category 2</option>
</select> </select>
{errors.category && touched.category && (<span className="form-error">{errors.category}</span>)} <ErrorMessage name={`activities.${index}.category`} 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>SubCategory</label> <label>SubCategory</label>
<select <select
id="subcategory" id={`activities.${index}.subCategory`}
name="subcategory" name={`activities.${index}.subCategory`}
onChange={handleChange} onChange={handleChange}
onBlur={handleBlur} onBlur={handleBlur}
> >
...@@ -134,45 +187,45 @@ const ActivityDetails = () => { ...@@ -134,45 +187,45 @@ const ActivityDetails = () => {
<option value="Sub Category 1">Sub Category 1</option> <option value="Sub Category 1">Sub Category 1</option>
<option value="Sub Category 2">Sub Category 2</option> <option value="Sub Category 2">Sub Category 2</option>
</select> </select>
{errors.subcategory && touched.subcategory && (<span className="form-error">{errors.subcategory}</span>)} <ErrorMessage name={`activities.${index}.category`} component="div" className="form-error" />
</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-6">
<div className="input-group"> <div className="input-group">
<label>Activity Name</label> <label>Activity Name</label>
<input <input
type="text" type="text"
name="activity_name" name={`activities.${index}.activityName`}
onChange={handleChange} onChange={handleChange}
onBlur={handleBlur} onBlur={handleBlur}
value={values.activity_name} value={values.activities[index].activityName}
/> />
{errors.activity_name && touched.activity_name && (<span className="form-error">{errors.activity_name}</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>Activity Description</label> <label>Activity Description</label>
<input <textarea
type="text" rows="4"
name="activity_description" name={`activities.${index}.activityDescription`}
onChange={handleChange} onChange={handleChange}
onBlur={handleBlur} onBlur={handleBlur}
value={values.activity_description} value={values.activities[index].activityDescription}
/> />
{errors.activity_description && touched.activity_description && (<span className="form-error">{errors.activity_description}</span>)} <ErrorMessage name={`activities.${index}.activityDescription`} component="div" className="form-error" />
</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-6">
<div className="input-group"> <div className="input-group">
<label>Location</label> <label>Location</label>
<select <select
id="location" id={`activities.${index}.location`}
name="location" name={`activities.${index}.location`}
onChange={handleChange} onChange={handleChange}
onBlur={handleBlur} onBlur={handleBlur}
> >
...@@ -180,161 +233,172 @@ const ActivityDetails = () => { ...@@ -180,161 +233,172 @@ const ActivityDetails = () => {
<option value="Location 1">Location 1</option> <option value="Location 1">Location 1</option>
<option value="Location 2">Location 2</option> <option value="Location 2">Location 2</option>
</select> </select>
{errors.location && touched.location && (<span className="form-error">{errors.location}</span>)} <ErrorMessage name={`activities.${index}.location`} 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>Address</label> <label>Price (per person)</label>
<input <input
type="text" type="text"
name="address" name={`activities.${index}.pricePerPerson`}
onChange={handleChange} onChange={handleChange}
onBlur={handleBlur} onBlur={handleBlur}
value={values.address} value={values.activities[index].pricePerPerson}
/> />
{errors.address && touched.address && (<span className="form-error">{errors.address}</span>)} <ErrorMessage name={`activities.${index}.pricePerPerson`} component="div" className="form-error" />
</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-6">
<div className="input-group"> <div className="input-group">
<label>Price (per person)</label> <label>Address Line 1</label>
<input <input
type="text" type="text"
name="price_per_person" name={`activities.${index}.addressLine1`}
onChange={handleChange} onChange={handleChange}
onBlur={handleBlur} onBlur={handleBlur}
value={values.price_per_person} value={values.activities[index].addressLine1}
/> />
{errors.price_per_person && touched.price_per_person && (<span className="form-error">{errors.price_per_person}</span>)} <ErrorMessage name={`activities.${index}.addressLine1`} 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>Address Line 2</label>
<input
type="text"
name={`activities.${index}.addressLine2`}
onChange={handleChange}
onBlur={handleBlur}
value={values.activities[index].addressLine2}
/>
<ErrorMessage name={`activities.${index}.addressLine2`} component="div" className="form-error" />
</div>
</div>
</div>
<div className="row">
<div className="col-12 col-lg-6">
<div className="input-group mb-2">
<label>Gifting to Someone</label> <label>Gifting to Someone</label>
<div className="row"> <div className="row">
<div className="col-6 col-lg-6"> <div className="col-6 col-lg-6">
<label htmlFor="gifting_allowed"> <label className="radioContainer" htmlFor={`gifting_allowed.${index}`}>
<input <input
type="radio" type="radio"
id="gifting_allowed" id={`gifting_allowed.${index}`}
name="gifting_to_someone" name={`activities.${index}.giftingToSomeone`}
onChange={handleChange} onChange={handleChange}
onBlur={handleBlur} onBlur={handleBlur}
value="gifting_allowed"
/> Allowed /> Allowed
<span className="checkmark"></span>
</label> </label>
</div> </div>
<div className="col-6 col-lg-6"> <div className="col-6 col-lg-6">
<label htmlFor="gifting_disallowed"> <label className="radioContainer" htmlFor={`gifting_disallowed.${index}`}>
<input <input
type="radio" type="radio"
id="gifting_disallowed" id={`gifting_disallowed.${index}`}
name="gifting_to_someone" name={`activities.${index}.giftingToSomeone`}
onChange={handleChange} onChange={handleChange}
onBlur={handleBlur} onBlur={handleBlur}
value="gifting_disallowed"
/> Disallowed /> Disallowed
<span className="checkmark"></span>
</label> </label>
</div> </div>
</div> </div>
{errors.gifting_to_someone && touched.gifting_to_someone && (<span className="form-error">{errors.gifting_to_someone}</span>)} <ErrorMessage name={`activities.${index}.giftingToSomeone`} component="div" className="form-error" />
</div>
</div> </div>
</div> </div>
<div className="row"> <div className="col-12 col-lg-6">
<div className="col-12 col-lg-5"> <div className="input-group mb-2">
<div className="input-group">
<label>Place</label> <label>Place</label>
<div className="row"> <div className="row">
<div className="col-4 col-lg-4"> <div className="col-4 col-lg-4">
<label htmlFor="indoor"> <label className="radioContainer" htmlFor={`indoor.${index}`}>
<input <input
type="radio" type="radio"
id="indoor" id={`indoor.${index}`}
name="place" name={`activities.${index}.place`}
onChange={handleChange} onChange={handleChange}
onBlur={handleBlur} onBlur={handleBlur}
value="indoor"
/> Indoor /> Indoor
<span className="checkmark"></span>
</label> </label>
</div> </div>
<div className="col-4 col-lg-4"> <div className="col-5 col-lg-5">
<label htmlFor="outdoor"> <label className="radioContainer" htmlFor={`outdoor.${index}`}>
<input <input
type="radio" type="radio"
id="outdoor" id={`outdoor.${index}`}
name="place" name={`activities.${index}.place`}
onChange={handleChange} onChange={handleChange}
onBlur={handleBlur} onBlur={handleBlur}
value="outdoor"
/> Outdoor /> Outdoor
<span className="checkmark"></span>
</label> </label>
</div> </div>
<div className="col-4 col-lg-4"> <div className="col-3 col-lg-3">
<label htmlFor="both"> <label className="radioContainer" htmlFor={`both.${index}`}>
<input <input
type="radio" type="radio"
id="both" id={`both.${index}`}
name="place" name={`activities.${index}.place`}
onChange={handleChange} onChange={handleChange}
onBlur={handleBlur} onBlur={handleBlur}
value="both"
/> Both /> Both
<span className="checkmark"></span>
</label> </label>
</div> </div>
</div> </div>
{errors.place && touched.place && (<span className="form-error">{errors.place}</span>)} <ErrorMessage name={`activities.${index}.place`} component="div" className="form-error" />
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<hr /> <hr />
<div> <div className="mt-4">
<p>Group Information</p> <p className="textH">Group Information</p>
<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>Contact Person for the Activity</label>
<input <input
type="text" type="text"
name="contact_person_for_activity" name={`activities.${index}.contactPersonForActivity`}
onChange={handleChange} onChange={handleChange}
onBlur={handleBlur} onBlur={handleBlur}
value={values.contact_person_for_activity} value={values.activities[index].contactPersonForActivity}
/> />
{errors.contact_person_for_activity && touched.contact_person_for_activity && (<span className="form-error">{errors.contact_person_for_activity}</span>)} <ErrorMessage name={`activities.${index}.contactPersonForActivity`} 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>Size of the Group</label>
<div className="row"> <div className="row">
<div className="col-6 col-lg-6"> <div className="col-6 col-lg-5">
<div className="input-group mb-0">
<input <input
type="text" type="text"
name="min_group_size" placeholder="Min."
name={`activities.${index}.minGroupSize`}
onChange={handleChange} onChange={handleChange}
onBlur={handleBlur} onBlur={handleBlur}
value={values.min_group_size} value={values.activities[index].minGroupSize}
/> />
{errors.min_group_size && touched.min_group_size && (<span className="form-error">{errors.min_group_size}</span>)} <ErrorMessage name={`activities.${index}.minGroupSize`} component="div" className="form-error" />
</div>
</div> </div>
<div className="col-6 col-lg-6"> <div className="col-6 col-lg-5">
<div className="input-group mb-0">
<input <input
type="text" type="text"
name="max_group_size" placeholder="Max."
name={`activities.${index}.maxGroupSize`}
onChange={handleChange} onChange={handleChange}
onBlur={handleBlur} onBlur={handleBlur}
value={values.max_group_size} value={values.activities[index].maxGroupSize}
/> />
{errors.max_group_size && touched.max_group_size && (<span className="form-error">{errors.max_group_size}</span>)} <ErrorMessage name={`activities.${index}.maxGroupSize`} component="div" className="form-error" />
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -342,15 +406,15 @@ const ActivityDetails = () => { ...@@ -342,15 +406,15 @@ const ActivityDetails = () => {
</div> </div>
</div> </div>
<hr /> <hr />
<div> <div className="mt-4">
<p>Availability</p> <p className="textH">Availability</p>
<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>Months</label> <label>Months</label>
<select <select
id="month" id={`activities.${index}.months`}
name="month" name={`activities.${index}.months`}
onChange={handleChange} onChange={handleChange}
onBlur={handleBlur} onBlur={handleBlur}
> >
...@@ -358,47 +422,221 @@ const ActivityDetails = () => { ...@@ -358,47 +422,221 @@ const ActivityDetails = () => {
<option value="Location 1">Location 1</option> <option value="Location 1">Location 1</option>
<option value="Location 2">Location 2</option> <option value="Location 2">Location 2</option>
</select> </select>
{errors.contact_person_for_activity && touched.contact_person_for_activity && (<span className="form-error">{errors.contact_person_for_activity}</span>)} <ErrorMessage name={`activities.${index}.months`} 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>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="row">
<div className="col-6 col-lg-6"> <div className="col-12 col-lg-6">
<div className="input-group mb-0"> <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 <input
type="text" type="text"
name="min_group_size" name={`activities.${index}.linkOfBooking`}
onChange={handleChange} onChange={handleChange}
onBlur={handleBlur} onBlur={handleBlur}
value={values.min_group_size} value={values.activities[index].linkOfBooking}
/> />
{errors.min_group_size && touched.min_group_size && (<span className="form-error">{errors.min_group_size}</span>)} <ErrorMessage name={`activities.${index}.linkOfBooking`} component="div" className="form-error" />
</div> </div>
</div> </div>
<div className="col-6 col-lg-6"> </div>
<div className="input-group mb-0"> <div className="row">
<div className="col-12 col-lg-6">
<div className="input-group">
<label>Contact Person Name</label>
<input <input
type="text" type="text"
name="max_group_size" name={`activities.${index}.contactPersonForBooking`}
onChange={handleChange} onChange={handleChange}
onBlur={handleBlur} onBlur={handleBlur}
value={values.max_group_size} value={values.activities[index].contactPersonForBooking}
/> />
{errors.max_group_size && touched.max_group_size && (<span className="form-error">{errors.max_group_size}</span>)} <ErrorMessage name={`activities.${index}.contactPersonForBooking`} component="div" className="form-error" />
</div> </div>
</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> </div>
<ErrorMessage name={`activities.${index}.contactNumberForBooking`} component="div" className="form-error" />
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div className="row mb-5"> <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>
</AccordionItem>
</div>
))}
</div>
)}
</FieldArray>
<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,9 +80,43 @@ const BusinessDetails = () => { ...@@ -65,9 +80,43 @@ 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>
{user && (
<div className="container p-5"> <div className="container p-5">
<div className="row"> <div className="row">
<div className="col-12 col-lg-8"> <div className="col-12 col-lg-8">
...@@ -82,6 +131,7 @@ const BusinessDetails = () => { ...@@ -82,6 +131,7 @@ const BusinessDetails = () => {
</p> </p>
<hr /> <hr />
<div className="form-container mt-4"> <div className="form-container mt-4">
<ApprovalStatus />
<Formik <Formik
enableReinitialize enableReinitialize
initialValues={{ initialValues={{
...@@ -109,7 +159,9 @@ const BusinessDetails = () => { ...@@ -109,7 +159,9 @@ const BusinessDetails = () => {
state: values.state, state: values.state,
city: values.city, city: values.city,
pincode: values.pincode, pincode: values.pincode,
country: values.country country: values.country,
addressLine1: values.addressLine1,
addressLine2: values.addressLine2
}; };
// await dispatch(updateVendorBusinessDetails({businessDetails, })) // await dispatch(updateVendorBusinessDetails({businessDetails, }))
...@@ -118,7 +170,10 @@ const BusinessDetails = () => { ...@@ -118,7 +170,10 @@ const BusinessDetails = () => {
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")
// console.log("updateBusinessDetails", updateBusinessDetails);
}} }}
> >
{({ values, errors, touched, handleChange, handleBlur, handleSubmit, setFieldValue }) => ( {({ values, errors, touched, handleChange, handleBlur, handleSubmit, setFieldValue }) => (
...@@ -135,7 +190,7 @@ const BusinessDetails = () => { ...@@ -135,7 +190,7 @@ const BusinessDetails = () => {
<div className="col-12 col-lg-5"> <div className="col-12 col-lg-5">
<div className="input-group"> <div className="input-group">
<label>Enter Business PAN No.</label> <label>Enter Business PAN No.</label>
<input type="text" name="panNumber" onChange={handleChange} onBlur={handleBlur} value={values.panNumber} /> <input type="text" name="panNumber" onChange={handleChange} onBlur={handleBlur} value={values.panNumber} disabled={disableFields} />
{errors.panNumber && touched.panNumber && <span className="form-error">{errors.panNumber}</span>} {errors.panNumber && touched.panNumber && <span className="form-error">{errors.panNumber}</span>}
</div> </div>
</div> </div>
...@@ -144,6 +199,7 @@ const BusinessDetails = () => { ...@@ -144,6 +199,7 @@ const BusinessDetails = () => {
<label>Upload PAN</label> <label>Upload PAN</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="panFile" id="panFile"
...@@ -185,7 +241,7 @@ const BusinessDetails = () => { ...@@ -185,7 +241,7 @@ const BusinessDetails = () => {
<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 type="text" name="gstNumber" onChange={handleChange} onBlur={handleBlur} value={values.gstNumber} /> <input disabled={disableFields} 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>
...@@ -194,6 +250,7 @@ const BusinessDetails = () => { ...@@ -194,6 +250,7 @@ const BusinessDetails = () => {
<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"
...@@ -215,7 +272,7 @@ const BusinessDetails = () => { ...@@ -215,7 +272,7 @@ const BusinessDetails = () => {
<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 type="text" name="businessName" onChange={handleChange} onBlur={handleBlur} value={values.businessName} /> <input disabled={disableFields} 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>
...@@ -224,6 +281,7 @@ const BusinessDetails = () => { ...@@ -224,6 +281,7 @@ const BusinessDetails = () => {
<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"
...@@ -270,14 +328,14 @@ const BusinessDetails = () => { ...@@ -270,14 +328,14 @@ 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 type="text" name="country" onChange={handleChange} onBlur={handleBlur} value={values.country} /> <input disabled={disableFields} 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>
...@@ -286,14 +344,14 @@ const BusinessDetails = () => { ...@@ -286,14 +344,14 @@ const BusinessDetails = () => {
<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 type="text" name="state" onChange={handleChange} onBlur={handleBlur} value={values.state} /> <input disabled={disableFields} 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> </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>City</label> <label>City</label>
<input type="text" name="city" onChange={handleChange} onBlur={handleBlur} value={values.city} /> <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>} {errors.city && touched.city && <span className="form-error">{errors.city}</span>}
</div> </div>
</div> </div>
...@@ -302,14 +360,14 @@ const BusinessDetails = () => { ...@@ -302,14 +360,14 @@ const BusinessDetails = () => {
<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> <label>Address Line 1</label>
<input type="text" name="addressLine1" onChange={handleChange} onBlur={handleBlur} value={values.addressLine1} /> <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>} {errors.addressLine1 && touched.addressLine1 && <span className="form-error">{errors.addressLine1}</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>Address Line 2</label> <label>Address Line 2</label>
<input type="text" name="addressLine2" onChange={handleChange} onBlur={handleBlur} value={values.addressLine2} /> <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>} {errors.addressLine2 && touched.addressLine2 && <span className="form-error">{errors.addressLine2}</span>}
</div> </div>
</div> </div>
...@@ -318,7 +376,7 @@ const BusinessDetails = () => { ...@@ -318,7 +376,7 @@ const BusinessDetails = () => {
<div className="row mt-3 mb-1"> <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">
<Button type="submit" className="btn btn-primary btn-submit"> <Button disabled={disableFields} type="submit" className="btn btn-primary btn-submit">
Send for Approval Send for Approval
</Button> </Button>
</div> </div>
...@@ -359,6 +417,7 @@ const BusinessDetails = () => { ...@@ -359,6 +417,7 @@ const BusinessDetails = () => {
</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
style={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
}}
onClick={() => handleToggleAccordion(index)}
>
<h3>Accordion {index + 1}</h3>
<button type="button" onClick={() => remove(index)}>
Remove
</button>
</div>
{expandedIndex === index && (
<div>
<div>
<label htmlFor={`items.${index}.title`}>Title</label>
<Field name={`items.${index}.title`} />
<ErrorMessage name={`items.${index}.title`} component="div" />
</div>
<div> <div>
<label htmlFor={`items.${index}.content`}>Content</label> <Field name={`items.${index}.title`} placeholder="Title" />
<Field name={`items.${index}.content`} /> <Field name={`items.${index}.content`} placeholder="Content" />
<ErrorMessage name={`items.${index}.content`} component="div" />
</div>
</div>
)}
</div> </div>
</AccordionItem>
</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>
); );
}; };
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; 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>
</>
);
case "pending":
return ( return (
<Layout> <>
<div className="sidebarContainer"> <div className="col-12 offset-lg-2 col-lg-8 ">
<Sidebar collapsed={collapsed} toggleSidebar={toggleSidebar} /> <div className="alert alert-danger alert-dismissible fade show text-center" role="alert">
<div className="content"> {/* <div className="bgCircleBlue">
<div className="row"> <Image alt="" src="/images/vendor/icon-tick.svg" width="15" height="10" />
<div className="col-12 offset-lg-2 col-lg-8"> </div> */}
<div className="infoSent"> <div className="text-center">
<p className="p1 text-center">Business information sent successfully.</p>
<p className="p2 text-center">Kindly wait until we verify the details. You can start adding activities once your account is verified.</p>
</div>
{/* <button type="button" className="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> */}
</div>
{/* <div className="infoSent">
<div className="bgCircleBlue"> <div className="bgCircleBlue">
<Image alt="" src="/images/vendor/icon-tick.svg" width="15" height="10" /> <Image alt="" src="/images/vendor/icon-tick.svg" width="15" height="10" />
</div> </div>
...@@ -31,9 +55,27 @@ const VendorDashboard = () => { ...@@ -31,9 +55,27 @@ const VendorDashboard = () => {
<div> <div>
<Image alt="" src="/images/vendor/icon-close.svg" width="14" height="14" /> <Image alt="" src="/images/vendor/icon-close.svg" width="14" height="14" />
</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"> <div className="d-flex justify-content-center py-4">
<span className="image-container"> <span className="image-container">
<Image alt="" layout="fill" src="/images/vendor/Isolation_Mode.png" className="image" /> <Image alt="" layout="fill" src="/images/vendor/Isolation_Mode.png" className="image" />
...@@ -41,14 +83,15 @@ const VendorDashboard = () => { ...@@ -41,14 +83,15 @@ const VendorDashboard = () => {
</div> </div>
<div className="text-center py-2 mb-5"> <div className="text-center py-2 mb-5">
<p className="p3">No information is available right now</p> <p className="p3">No information is available right now</p>
<Button type="button" variant="" className="btnAdd" disabled> <Button
<span className="image-container me-2"> onClick={() => {
<Image alt="" layout="fill" src="/images/vendor/icon-plus.svg" width="14" height="14" className="image" /> router.push("/vendor/activity-details");
</span> }}
{/* <FaPlus className="me-2" /> */} type="button"
<span>Add Activity</span> variant=""
</Button> className="btnAdd"
<Button type="button" variant="" className="btnAdd"> disabled={user?.approved != "approved"}
>
<span className="image-container me-2"> <span className="image-container me-2">
<Image alt="" layout="fill" src="/images/vendor/icon-plus.svg" width="14" height="14" className="image" /> <Image alt="" layout="fill" src="/images/vendor/icon-plus.svg" width="14" height="14" className="image" />
</span> </span>
...@@ -64,3 +107,15 @@ const VendorDashboard = () => { ...@@ -64,3 +107,15 @@ const VendorDashboard = () => {
}; };
export default VendorDashboard; 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
...@@ -211,3 +211,9 @@ ...@@ -211,3 +211,9 @@
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!