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";
import { cleanImage } from "../../services/imageHandling";
import { Button, Container, Form, Nav, Navbar } from "react-bootstrap";
import { loadUser } from "../../redux/actions/userActions";
import { useRouter } from "next/router";
const Header = () => {
const { user, error } = useSelector(state => state.loadedUser);
const dispatch = useDispatch();
// console.log("user", user);
const [isSticky, setIsSticky] = useState(false);
const router = useRouter();
useEffect(() => {
const handleScroll = () => {
// Check if the scroll position is greater than a certain threshold
......@@ -66,8 +67,10 @@ const Header = () => {
</div>
<p>{user.phone}</p>
<Button
onClick={() => {
onClick={async () => {
signOut({ redirect: false });
await router.push("/")
window.location.reload()
}}
className="me-3"
variant="primary"
......@@ -77,10 +80,14 @@ const Header = () => {
</div>
) : (
<div>
<Button className="me-3" variant="primary">
<Button onClick={()=> {
router.push("/signup/user")
}} className="me-3" variant="primary">
Sign Up
</Button>
<Button className="" variant="primary">
<Button onClick={()=> {
router.push("/login/user")
}} className="" variant="primary">
Log In
</Button>
</div>
......
components/layout/Layout.js
......@@ -5,7 +5,7 @@ import Footer from "./Footer";
import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import { loadUser } from "../../redux/actions/userActions";
import { useDispatch } from "react-redux";
import { useDispatch, useSelector } from "react-redux";
const Layout = ({ children, title = "Zango", description = "" }) => {
const dispatch = useDispatch();
......
components/layout/VendorDashboardSidebar.js
import Image from 'next/image';
import { useRouter } from 'next/router';
import React from 'react';
import React, { useState } from 'react';
const Sidebar = ({ collapsed, toggleSidebar }) => {
const Sidebar = () => {
const router = useRouter();
const [collapsed, setCollapsed] = useState(false);
const toggleSidebar = () => {
setCollapsed(!collapsed);
};
return (
<div className={`sidebar ${collapsed ? 'collapsed' : ''}`}>
{/* <button className="toggle-btn" onClick={toggleSidebar}>
......@@ -18,13 +24,13 @@ const Sidebar = ({ collapsed, toggleSidebar }) => {
</a>
</li>
<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" />
<span>Orders</span>
</a>
</li>
<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" />
<span>Activities</span>
</a>
......
components/signup/Signup.js
import React, { useState, useRef } from "react";
import React, { useState, useRef, useEffect } from "react";
import { Formik } from "formik";
import Link from "next/link";
import { Fragment } from "react";
......@@ -18,14 +18,12 @@ import { Loader } from "react-bootstrap-typeahead";
const Signup = props => {
console.log(props.type);
const router = useRouter();
const [otp, setOtp] = useState(new Array(4).fill(""));
const [isOtpSent, setOtpSent] = useState(false);
const [otpVerified, setOtpVerified] = useState(false);
const [loading, setLoading] = useState();
const dispatch = useDispatch();
const router = useRouter()
const otpValue = useRef();
const changeOtpRef = value => {
console.log(otpValue);
......@@ -76,7 +74,6 @@ const Signup = props => {
}
};
// console.log("otp", otp);
return (
<Fragment>
......@@ -252,7 +249,7 @@ const Signup = props => {
)}
<div className="input-group mb-0">
<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>
</div>
</Form>
......
components/vendor/ActivityDetails.js
import Image from "next/image";
import { Formik } from "formik";
import { Fragment } from "react";
import { ErrorMessage, FieldArray, Formik } from "formik";
import { Fragment, useState } from "react";
import { Button, Form } from "react-bootstrap";
import * as Yup from "yup";
import { FaTimes, FaTrash } from "react-icons/fa";
const ActivityDetails = () => {
const activityDetailsValidationSchema = Yup.object().shape({
category: Yup.string()
.required("Category is Required"),
subcategory: Yup.string()
.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"),
const [expandedIndex, setExpandedIndex] = useState(0); // Initially set the first item as expanded
const toggleAccordion = (index) => {
setExpandedIndex((prevIndex) => (prevIndex === index ? null : index));
};
link_of_booking: Yup.string()
.required("Link of Booking is Required"),
activity_images: Yup.array(),
contact_person_for_booking: Yup.string(),
contact_number_for_booking: Yup.string(),
cancellation_policy_file: Yup.string(),
terms_conditions_file: Yup.string(),
const activityDetailsValidationSchema = Yup.object().shape({
activities: Yup.array().of(
Yup.object().shape({
category: Yup.string().required("Category is Required"),
subCategory: Yup.string().required("SubCategory is Required"),
activityName: Yup.string().required("Activity Name is Required"),
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 (
......@@ -52,41 +50,38 @@ const ActivityDetails = () => {
<div className="row">
<div className="col-12 col-lg-8">
<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">
<Formik
initialValues={{
category: "",
subcategory: "",
activity_name: "",
activity_description: "",
location: "",
address: "",
price_per_person: "",
gifting_to_someone: "",
place: "",
contact_person_for_activity: "",
min_group_size: "",
max_group_size: "",
month: "",
min_duration: "",
max_duration: "",
link_of_booking: "",
activity_images: [],
contact_person_for_booking: "",
contact_number_for_booking: "",
cancellation_policy_file: "",
terms_conditions_file: "",
activities: [
{
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: "",
}
]
}}
validationSchema={activityDetailsValidationSchema}
// enableReinitialize={true}
......@@ -94,311 +89,554 @@ const ActivityDetails = () => {
console.log("activity details values", values)
}}
>
{({ values, errors, touched, handleChange, handleBlur, handleSubmit }) => (
{({ values, errors, touched, handleChange, handleBlur, handleSubmit, setFieldValue }) => (
<Form
onSubmit={e => {
e.preventDefault();
handleSubmit();
}}
>
<p className="textH">Activity Name 1</p>
<div>
<p className="textH">Basic Details</p>
<div className="row">
<div className="col-12 col-lg-5">
<div className="input-group">
<label>Category</label>
<select
id="category"
name="category"
onChange={handleChange}
onBlur={handleBlur}
>
<option value="">Select</option>
<option value="Category 1">Category 1</option>
<option value="Category 2">Category 2</option>
</select>
{errors.category && touched.category && (<span className="form-error">{errors.category}</span>)}
</div>
</div>
<div className="col-12 offset-lg-1 col-lg-5">
<div className="input-group">
<label>SubCategory</label>
<select
id="subcategory"
name="subcategory"
onChange={handleChange}
onBlur={handleBlur}
>
<option value="">Select</option>
<option value="Sub Category 1">Sub Category 1</option>
<option value="Sub Category 2">Sub Category 2</option>
</select>
{errors.subcategory && touched.subcategory && (<span className="form-error">{errors.subcategory}</span>)}
</div>
</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}
<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);
}}
>
<option value="">Select</option>
<option value="Location 1">Location 1</option>
<option value="Location 2">Location 2</option>
</select>
{errors.location && touched.location && (<span className="form-error">{errors.location}</span>)}
</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>)}
<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>
</div>
</div>
<div className="row">
<div className="col-12 col-lg-5">
<div className="input-group">
<label>Place</label>
<div className="row">
<div className="col-4 col-lg-4">
<label htmlFor="indoor">
<input
type="radio"
id="indoor"
name="place"
onChange={handleChange}
onBlur={handleBlur}
value="indoor"
/> Indoor
</label>
</div>
<div className="col-4 col-lg-4">
<label htmlFor="outdoor">
<input
type="radio"
id="outdoor"
name="place"
onChange={handleChange}
onBlur={handleBlur}
value="outdoor"
/> Outdoor
</label>
</div>
<div className="col-4 col-lg-4">
<label htmlFor="both">
<input
type="radio"
id="both"
name="place"
onChange={handleChange}
onBlur={handleBlur}
value="both"
/> Both
</label>
</div>
</div>
{errors.place && touched.place && (<span className="form-error">{errors.place}</span>)}
</div>
</div>
</div>
</div>
<hr />
<div>
<p>Group Information</p>
<div className="row">
<div className="col-12 col-lg-5">
<div className="input-group">
<label>Contact Person for the Activity</label>
<input
type="text"
name="contact_person_for_activity"
onChange={handleChange}
onBlur={handleBlur}
value={values.contact_person_for_activity}
/>
{errors.contact_person_for_activity && touched.contact_person_for_activity && (<span className="form-error">{errors.contact_person_for_activity}</span>)}
</div>
</div>
<div className="col-12 offset-lg-1 col-lg-5">
<div className="input-group">
<label>Size of the Group</label>
<div className="row">
<div className="col-6 col-lg-6">
<div className="input-group mb-0">
<input
type="text"
name="min_group_size"
onChange={handleChange}
onBlur={handleBlur}
value={values.min_group_size}
/>
{errors.min_group_size && touched.min_group_size && (<span className="form-error">{errors.min_group_size}</span>)}
</div>
</div>
<div className="col-6 col-lg-6">
<div className="input-group mb-0">
<input
type="text"
name="max_group_size"
onChange={handleChange}
onBlur={handleBlur}
value={values.max_group_size}
/>
{errors.max_group_size && touched.max_group_size && (<span className="form-error">{errors.max_group_size}</span>)}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<hr />
<div>
<p>Availability</p>
<div className="row">
<div className="col-12 col-lg-5">
<div className="input-group">
<label>Months</label>
<select
id="month"
name="month"
onChange={handleChange}
onBlur={handleBlur}
>
<option value="">Select</option>
<option value="Location 1">Location 1</option>
<option value="Location 2">Location 2</option>
</select>
{errors.contact_person_for_activity && touched.contact_person_for_activity && (<span className="form-error">{errors.contact_person_for_activity}</span>)}
</div>
</div>
<div className="col-12 offset-lg-1 col-lg-5">
<div className="input-group">
<label>Size of the Group</label>
<div className="row">
<div className="col-6 col-lg-6">
<div className="input-group mb-0">
<input
type="text"
name="min_group_size"
onChange={handleChange}
onBlur={handleBlur}
value={values.min_group_size}
/>
{errors.min_group_size && touched.min_group_size && (<span className="form-error">{errors.min_group_size}</span>)}
</div>
</div>
<div className="col-6 col-lg-6">
<div className="input-group mb-0">
<input
type="text"
name="max_group_size"
onChange={handleChange}
onBlur={handleBlur}
value={values.max_group_size}
/>
{errors.max_group_size && touched.max_group_size && (<span className="form-error">{errors.max_group_size}</span>)}
{values.activities.map((_, index) => (
<div key={index} className="accordionItem">
<AccordionItem
index={index}
expanded={expandedIndex === index}
toggleAccordion={() => toggleAccordion(index)}
remove={() => remove(index)}
>
<div>
<div className="mt-4">
{/* <p className="textH">Basic Details</p> */}
<div className="d-flex justify-content-between">
<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="col-12 col-lg-6">
<div className="input-group">
<label>Category</label>
<select
id={`activities.${index}.category`}
name={`activities.${index}.category`}
onChange={handleChange}
onBlur={handleBlur}
>
<option value="">Select</option>
<option value="Category 1">Category 1</option>
<option value="Category 2">Category 2</option>
</select>
<ErrorMessage name={`activities.${index}.category`} component="div" className="form-error" />
</div>
</div>
<div className="col-12 col-lg-6">
<div className="input-group">
<label>SubCategory</label>
<select
id={`activities.${index}.subCategory`}
name={`activities.${index}.subCategory`}
onChange={handleChange}
onBlur={handleBlur}
>
<option value="">Select</option>
<option value="Sub Category 1">Sub Category 1</option>
<option value="Sub Category 2">Sub Category 2</option>
</select>
<ErrorMessage name={`activities.${index}.category`} component="div" className="form-error" />
</div>
</div>
</div>
<div className="row">
<div className="col-12 col-lg-6">
<div className="input-group">
<label>Activity Name</label>
<input
type="text"
name={`activities.${index}.activityName`}
onChange={handleChange}
onBlur={handleBlur}
value={values.activities[index].activityName}
/>
<ErrorMessage name={`activities.${index}.activityName`} component="div" className="form-error" />
</div>
</div>
<div className="col-12 col-lg-6">
<div className="input-group">
<label>Activity Description</label>
<textarea
rows="4"
name={`activities.${index}.activityDescription`}
onChange={handleChange}
onBlur={handleBlur}
value={values.activities[index].activityDescription}
/>
<ErrorMessage name={`activities.${index}.activityDescription`} component="div" className="form-error" />
</div>
</div>
</div>
<div className="row">
<div className="col-12 col-lg-6">
<div className="input-group">
<label>Location</label>
<select
id={`activities.${index}.location`}
name={`activities.${index}.location`}
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}.location`} component="div" className="form-error" />
</div>
</div>
<div className="col-12 col-lg-6">
<div className="input-group">
<label>Price (per person)</label>
<input
type="text"
name={`activities.${index}.pricePerPerson`}
onChange={handleChange}
onBlur={handleBlur}
value={values.activities[index].pricePerPerson}
/>
<ErrorMessage name={`activities.${index}.pricePerPerson`} component="div" className="form-error" />
</div>
</div>
</div>
<div className="row">
<div className="col-12 col-lg-6">
<div className="input-group">
<label>Address Line 1</label>
<input
type="text"
name={`activities.${index}.addressLine1`}
onChange={handleChange}
onBlur={handleBlur}
value={values.activities[index].addressLine1}
/>
<ErrorMessage name={`activities.${index}.addressLine1`} component="div" className="form-error" />
</div>
</div>
<div className="col-12 col-lg-6">
<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>
<div className="row">
<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>
</AccordionItem>
</div>
</div>
))}
</div>
</div>
</div>
<div className="row mb-5">
)}
</FieldArray>
<div className="row">
<div className="col-12 col-lg-5">
<div className="input-group">
<Button type="submit" className="btn btn-primary btn-submit">
Send for Approval
<Button type="submit" className="btn btn-primary btn-submit" disabled>
Submit
</Button>
</div>
</div>
......@@ -438,8 +676,23 @@ const ActivityDetails = () => {
</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;
\ 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";
import "react-bootstrap-typeahead/css/Typeahead.css";
import { useDispatch, useSelector } from "react-redux";
import { getLoggedInVendor, updateVendorBusinessDetails } from "../../redux/actions/vendorActions";
import { loadUser, updateUserApprovalStatus } from "../../redux/actions/userActions";
import { useRouter } from "next/router";
const BusinessDetails = () => {
const [session, setSession] = useState(null);
const dispatch = useDispatch();
const router = useRouter()
const { loggedInVendor } = useSelector(state => state.loggedInVendor);
const { vendorDetails } = useSelector(state => state.vendorDetails);
const { user, error } = useSelector(state => state.loadedUser);
// const [pincodeData, setPinCodeData] = useState()
// 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(() => {
const fetchSession = async () => {
setSession(await getSession());
......@@ -25,7 +40,7 @@ const BusinessDetails = () => {
fetchSession();
// dispatch(getLoggedInVendor());
}, []);
console.log("session", loggedInVendor);
// console.log("session", loggedInVendor);
const businessDetailsValidationSchema = Yup.object().shape({
panNumber: Yup.string().required("Pan Number is Required"),
panFile: Yup.mixed(),
......@@ -65,191 +80,234 @@ const BusinessDetails = () => {
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);
return (
<Fragment>
<div className="container p-5">
<div className="row">
<div className="col-12 col-lg-8">
<div className="content-div business-details">
<h2>Tell us about your business</h2>
<p>Please have the following ready before you begin</p>
<p>
<FaArrowRight /> Your bank account details for receiving payments from ZanGO
</p>
<p className="mb-4">
<FaArrowRight /> Tax (GST/PAN) details of your business.
</p>
<hr />
<div className="form-container mt-4">
<Formik
enableReinitialize
initialValues={{
panNumber: vendorData?.panNumber ? vendorData?.panNumber : "",
panFile: vendorData?.panImage ? vendorData?.panImage : "",
gstNumber: vendorData?.gstNumber ? vendorData?.gstNumber : "",
gstCertificateFile: vendorData?.gstImage ? vendorData?.gstImage : "",
businessName: vendorData?.businessName ? vendorData?.businessName : "",
brandLogoFile: vendorData?.logo ? vendorData?.logo : "",
pincode: vendorData?.pincode ? vendorData?.pincode : "",
country: vendorData?.country ? vendorData?.country : "",
state: vendorData?.state ? vendorData?.state : "",
city: vendorData?.city ? vendorData?.city : "",
addressLine1: vendorData?.addressLine1 ? vendorData?.addressLine1 : "",
addressLine2: vendorData?.addressLine2 ? vendorData?.addressLine2 : ""
}}
validationSchema={businessDetailsValidationSchema}
// enableReinitialize={true}
onSubmit={async values => {
console.log("business details values", values);
const businessDetails = {
pan: values.panNumber,
gst: values.gstNumber,
businessName: values.businessName,
state: values.state,
city: values.city,
pincode: values.pincode,
country: values.country
};
// await dispatch(updateVendorBusinessDetails({businessDetails, }))
{user && (
<div className="container p-5">
<div className="row">
<div className="col-12 col-lg-8">
<div className="content-div business-details">
<h2>Tell us about your business</h2>
<p>Please have the following ready before you begin</p>
<p>
<FaArrowRight /> Your bank account details for receiving payments from ZanGO
</p>
<p className="mb-4">
<FaArrowRight /> Tax (GST/PAN) details of your business.
</p>
<hr />
<div className="form-container mt-4">
<ApprovalStatus />
<Formik
enableReinitialize
initialValues={{
panNumber: vendorData?.panNumber ? vendorData?.panNumber : "",
panFile: vendorData?.panImage ? vendorData?.panImage : "",
gstNumber: vendorData?.gstNumber ? vendorData?.gstNumber : "",
gstCertificateFile: vendorData?.gstImage ? vendorData?.gstImage : "",
businessName: vendorData?.businessName ? vendorData?.businessName : "",
brandLogoFile: vendorData?.logo ? vendorData?.logo : "",
pincode: vendorData?.pincode ? vendorData?.pincode : "",
country: vendorData?.country ? vendorData?.country : "",
state: vendorData?.state ? vendorData?.state : "",
city: vendorData?.city ? vendorData?.city : "",
addressLine1: vendorData?.addressLine1 ? vendorData?.addressLine1 : "",
addressLine2: vendorData?.addressLine2 ? vendorData?.addressLine2 : ""
}}
validationSchema={businessDetailsValidationSchema}
// enableReinitialize={true}
onSubmit={async values => {
console.log("business details values", values);
const businessDetails = {
pan: values.panNumber,
gst: values.gstNumber,
businessName: values.businessName,
state: values.state,
city: values.city,
pincode: values.pincode,
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 }));
console.log("updateBusinessDetails", updateBusinessDetails);
}}
>
{({ values, errors, touched, handleChange, handleBlur, handleSubmit, setFieldValue }) => (
<Form
onSubmit={e => {
e.preventDefault();
handleSubmit();
}}
>
<h4>Vendor Business Information</h4>
<div className="mt-3">
<p className="textH">Business documents</p>
<div className="row">
<div className="col-12 col-lg-5">
<div className="input-group">
<label>Enter Business PAN No.</label>
<input type="text" name="panNumber" onChange={handleChange} onBlur={handleBlur} value={values.panNumber} />
{errors.panNumber && touched.panNumber && <span className="form-error">{errors.panNumber}</span>}
</div>
</div>
<div className="col-12 offset-lg-1 col-lg-5">
<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>
const updateBusinessDetails = await dispatch(updateVendorBusinessDetails({ businessDetails, vendorId: response.id }));
await updateUserApprovalStatus({ status: "pending" });
await dispatch(loadUser());
router.push("/vendor/dashboard")
// console.log("updateBusinessDetails", updateBusinessDetails);
}}
>
{({ values, errors, touched, handleChange, handleBlur, handleSubmit, setFieldValue }) => (
<Form
onSubmit={e => {
e.preventDefault();
handleSubmit();
}}
>
<h4>Vendor Business Information</h4>
<div className="mt-3">
<p className="textH">Business documents</p>
<div className="row">
<div className="col-12 col-lg-5">
<div className="input-group">
<label>Enter Business PAN No.</label>
<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>}
</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 className="col-12 offset-lg-1 col-lg-5">
<div className="input-group">
<label>Upload PAN</label>
<div className="custom-file">
<input
disabled={disableFields}
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>
)}
<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 className="row">
<div className="col-12 col-lg-5">
<div className="input-group">
<label>GST Number</label>
<input type="text" name="gstNumber" onChange={handleChange} onBlur={handleBlur} value={values.gstNumber} />
{errors.gstNumber && touched.gstNumber && <span className="form-error">{errors.gstNumber}</span>}
<div className="row">
<div className="col-12 col-lg-5">
<div className="input-group">
<label>GST Number</label>
<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>}
</div>
</div>
</div>
<div className="col-12 offset-lg-1 col-lg-5">
<div className="input-group">
<label>GST Certificate</label>
<div className="custom-file">
<input
type="file"
className="custom-file-input"
id="gstCertificateFile"
name="gstCertificateFile"
onChange={handleChange}
onBlur={handleBlur}
value={values.gstCertificateFile}
/>
<label className="custom-file-label" htmlFor="gstCertificateFile">
Upload
</label>
<div className="col-12 offset-lg-1 col-lg-5">
<div className="input-group">
<label>GST Certificate</label>
<div className="custom-file">
<input
disabled={disableFields}
type="file"
className="custom-file-input"
id="gstCertificateFile"
name="gstCertificateFile"
onChange={handleChange}
onBlur={handleBlur}
value={values.gstCertificateFile}
/>
<label className="custom-file-label" htmlFor="gstCertificateFile">
Upload
</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>
<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 className="row">
<div className="col-12 col-lg-5">
<div className="input-group">
<label>Business Name</label>
<input type="text" name="businessName" onChange={handleChange} onBlur={handleBlur} value={values.businessName} />
{errors.businessName && touched.businessName && <span className="form-error">{errors.businessName}</span>}
<div className="row">
<div className="col-12 col-lg-5">
<div className="input-group">
<label>Business Name</label>
<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>}
</div>
</div>
</div>
<div className="col-12 offset-lg-1 col-lg-5">
<div className="input-group">
<label>Brand Logo</label>
<div className="custom-file">
<input
type="file"
className="custom-file-input"
id="brandLogoFile"
name="brandLogoFile"
onChange={handleChange}
onBlur={handleBlur}
value={values.brandLogoFile}
/>
<label className="custom-file-label" htmlFor="brandLogoFile">
Upload
</label>
<div className="col-12 offset-lg-1 col-lg-5">
<div className="input-group">
<label>Brand Logo</label>
<div className="custom-file">
<input
disabled={disableFields}
type="file"
className="custom-file-input"
id="brandLogoFile"
name="brandLogoFile"
onChange={handleChange}
onBlur={handleBlur}
value={values.brandLogoFile}
/>
<label className="custom-file-label" htmlFor="brandLogoFile">
Upload
</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>
<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>
<hr />
<div className="mt-4">
<p className="textH">Business Address</p>
<div className="row">
<div className="col-12 col-lg-5">
<div className="input-group">
<label>Pincode</label>
{/* <AsyncTypeahead
<hr />
<div className="mt-4">
<p className="textH">Business Address</p>
<div className="row">
<div className="col-12 col-lg-5">
<div className="input-group">
<label>Pincode</label>
{/* <AsyncTypeahead
onSearch={handleSearch}
minLength={3}
value={values.pincode}
......@@ -270,95 +328,96 @@ const BusinessDetails = () => {
console.log("input change", e);
}}
/> */}
<input type="text" name="pincode" onChange={handleChange} onBlur={handleBlur} value={values.pincode} />
{errors.pincode && touched.pincode && <span className="form-error">{errors.pincode}</span>}
<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>}
</div>
</div>
</div>
<div className="col-12 offset-lg-1 col-lg-5">
<div className="input-group">
<label>Country</label>
<input type="text" name="country" onChange={handleChange} onBlur={handleBlur} value={values.country} />
{errors.country && touched.country && <span className="form-error">{errors.country}</span>}
<div className="col-12 offset-lg-1 col-lg-5">
<div className="input-group">
<label>Country</label>
<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>}
</div>
</div>
</div>
</div>
<div className="row">
<div className="col-12 col-lg-5">
<div className="input-group">
<label>State</label>
<input type="text" name="state" onChange={handleChange} onBlur={handleBlur} value={values.state} />
{errors.state && touched.state && <span className="form-error">{errors.state}</span>}
<div className="row">
<div className="col-12 col-lg-5">
<div className="input-group">
<label>State</label>
<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>}
</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 className="col-12 offset-lg-1 col-lg-5">
<div className="input-group">
<label>City</label>
<input type="text" name="city" onChange={handleChange} onBlur={handleBlur} value={values.city} />
{errors.city && touched.city && <span className="form-error">{errors.city}</span>}
<div className="row">
<div className="col-12 col-lg-5">
<div className="input-group">
<label>Address Line 1</label>
<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 className="row">
<div className="row mt-3 mb-1">
<div className="col-12 col-lg-5">
<div className="input-group">
<label>Address Line 1</label>
<input 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 type="text" name="addressLine2" onChange={handleChange} onBlur={handleBlur} value={values.addressLine2} />
{errors.addressLine2 && touched.addressLine2 && <span className="form-error">{errors.addressLine2}</span>}
<Button disabled={disableFields} type="submit" className="btn btn-primary btn-submit">
Send for Approval
</Button>
</div>
</div>
</div>
</div>
<div className="row mt-3 mb-1">
<div className="col-12 col-lg-5">
<div className="input-group">
<Button type="submit" className="btn btn-primary btn-submit">
Send for Approval
</Button>
</div>
</div>
</div>
</Form>
)}
</Formik>
</Form>
)}
</Formik>
</div>
</div>
</div>
</div>
<div className="col-12 col-lg-4">
<div className="content-div help-center">
<h2>Help Center</h2>
<ul className="helplist">
<li>
<Image alt="" src="/images/vendor/question.svg" width="22" height="22" />
<p>Lorem Ipsum Dolor Sit?</p>
</li>
<li>
<Image alt="" src="/images/vendor/question.svg" width="22" height="22" />
<p>Lorem Ipsum Dolor Sit?</p>
</li>
<li>
<Image alt="" src="/images/vendor/question.svg" width="22" height="22" />
<p>Lorem Ipsum Dolor Sit?</p>
</li>
<li>
<Image alt="" src="/images/vendor/question.svg" width="22" height="22" />
<p>Lorem Ipsum Dolor Sit?</p>
</li>
<li>
<Image alt="" src="/images/vendor/call.svg" width="32" height="32" />
<p>+1 (407) 8798 789</p>
</li>
</ul>
<div className="col-12 col-lg-4">
<div className="content-div help-center">
<h2>Help Center</h2>
<ul className="helplist">
<li>
<Image alt="" src="/images/vendor/question.svg" width="22" height="22" />
<p>Lorem Ipsum Dolor Sit?</p>
</li>
<li>
<Image alt="" src="/images/vendor/question.svg" width="22" height="22" />
<p>Lorem Ipsum Dolor Sit?</p>
</li>
<li>
<Image alt="" src="/images/vendor/question.svg" width="22" height="22" />
<p>Lorem Ipsum Dolor Sit?</p>
</li>
<li>
<Image alt="" src="/images/vendor/question.svg" width="22" height="22" />
<p>Lorem Ipsum Dolor Sit?</p>
</li>
<li>
<Image alt="" src="/images/vendor/call.svg" width="32" height="32" />
<p>+1 (407) 8798 789</p>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
)}
</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 @@
"react-icons": "^5.0.1",
"react-image-gallery": "^1.3.0",
"react-js-pagination": "^3.0.3",
"react-loading-icons": "^1.1.0",
"react-multi-carousel": "^2.8.2",
"react-otp-input": "^3.1.1",
"react-owl-carousel": "^2.3.3",
......@@ -34,6 +35,7 @@
"react-player": "^2.11.0",
"react-rating": "^2.0.5",
"react-redux": "^8.0.2",
"react-select": "^5.8.0",
"react-toastify": "^9.0.8",
"reactjs-otp-input": "^2.0.8",
"redux": "^4.2.0",
......
pages/test.js
// AccordionForm.js
import React, { useState } from 'react';
import { Formik, FieldArray, Field, ErrorMessage } 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: '' }],
};
import { Formik, Form, Field, FieldArray } from 'formik';
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));
};
return (
<div>
<h1>Accordion Form</h1>
<Formik
initialValues={initialValues}
validationSchema={validationSchema}
initialValues={{
items: [{ title: '', content: '' }]
}}
onSubmit={(values) => {
console.log(values);
}}
>
{({ values }) => (
<form>
<Form>
<FieldArray name="items">
{({ push, remove }) => (
<>
<div>
{values.items.map((_, index) => (
<div key={index}>
<div
style={{
border: '1px solid #ccc',
padding: '10px',
marginBottom: '10px',
}}
<AccordionItem
index={index}
expanded={expandedIndex === index}
toggleAccordion={() => toggleAccordion(index)}
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>
<Field name={`items.${index}.title`} placeholder="Title" />
<Field name={`items.${index}.content`} placeholder="Content" />
</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>
<label htmlFor={`items.${index}.content`}>Content</label>
<Field name={`items.${index}.content`} />
<ErrorMessage name={`items.${index}.content`} component="div" />
</div>
</div>
)}
</div>
</AccordionItem>
</div>
))}
<button type="button" onClick={() => push({ title: '', content: '' })}>
Add Accordion
<button
type="button"
onClick={() => {
push({ title: '', content: '' });
setExpandedIndex(values.items.length);
}}
>
Add Item
</button>
</>
</div>
)}
</FieldArray>
<button type="submit">Submit</button>
</form>
</Form>
)}
</Formik>
</div>
);
};
export default AccordionForm;
\ 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 () {
);
};
/** 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())
await store.dispatch(loadUser());
return {
props: {},
props: {}
};
});
\ No newline at end of file
pages/vendor/dashboard/index.js
import Image from "next/image";
import React, { useState } from "react";
import React, { useEffect, useState } from "react";
import Sidebar from "../../../components/layout/VendorDashboardSidebar";
import Layout from "../../../components/layout/Layout";
import { Button } from "react-bootstrap";
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 { 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 = () => {
setCollapsed(!collapsed);
};
case "rejected":
return (
<>
<div class="alert alert-danger" role="alert">
Your profile has been rejected! Please contact the admin for more details!
</div>
</>
);
return (
<Layout>
<div className="sidebarContainer">
<Sidebar collapsed={collapsed} toggleSidebar={toggleSidebar} />
<div className="content">
<div className="row">
<div className="col-12 offset-lg-2 col-lg-8">
<div className="infoSent">
<div className="bgCircleBlue">
<Image alt="" src="/images/vendor/icon-tick.svg" width="15" height="10" />
</div>
<div className="px-3">
<p className="p1">Business information sent successfully.</p>
<p className="p2">Kindly wait until we verify the details. You can start adding activities once your account is verified.</p>
</div>
<div>
<Image alt="" src="/images/vendor/icon-close.svg" width="14" height="14" />
</div>
</div>
</div>
case "pending":
return (
<>
<div className="col-12 offset-lg-2 col-lg-8 ">
<div className="alert alert-danger alert-dismissible fade show text-center" role="alert">
{/* <div className="bgCircleBlue">
<Image alt="" src="/images/vendor/icon-tick.svg" width="15" height="10" />
</div> */}
<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="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 type="button" variant="" className="btnAdd" disabled>
<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>
<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 className="infoSent">
<div className="bgCircleBlue">
<Image alt="" src="/images/vendor/icon-tick.svg" width="15" height="10" />
</div>
<div className="px-3">
<p className="p1">Business information sent successfully.</p>
<p className="p2">Kindly wait until we verify the details. You can start adding activities once your account is verified.</p>
</div>
<div>
<Image alt="" src="/images/vendor/icon-close.svg" width="14" height="14" />
</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>
</Layout>
);
</div>
</div>
</div>
</Layout>
);
};
export default VendorDashboard;
\ 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 => {
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
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
redux/reducers/reducers.js
......@@ -5,6 +5,7 @@ import { authReducer, forgotPasswordReducer, loadedUserReducer, resetPasswordRed
import { enquiryReducer } from "./enquiryReducer";
import { displayEnquireNowReducer } from "./enquireNowModalReducer";
import { getVendorDetailsReducer, loggedInVendorReducer, updateVendorReducer } from "./vendorReducers";
import { createActivityReducer } from "./activitiesReducer";
const reducers = combineReducers({
townships: townshipsReducer,
......@@ -22,6 +23,7 @@ const reducers = combineReducers({
loggedInVendor: loggedInVendorReducer,
updatedVendorData: updateVendorReducer,
vendorDetails: getVendorDetailsReducer,
activityData: createActivityReducer,
});
export default reducers;
styles/fonts.css
......@@ -210,4 +210,10 @@
font-style: normal;
font-weight: 400;
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
styles/globals.css
......@@ -598,7 +598,8 @@ p {
line-height: 20px;
}
span.form-error {
span.form-error,
.form-error {
color: red;
font-size: 0.8rem;
font-family: "Sofia Pro Light";
......@@ -671,10 +672,12 @@ span.form-error {
font-size: 15px;
line-height: normal;
margin-bottom: 10px;
width: 100%;
}
.form-container input,
.form-container select {
.form-container select,
.form-container textarea {
width: 100%;
border-radius: 10px !important;
border: 0.814px solid #000;
......@@ -682,14 +685,14 @@ span.form-error {
color: #000;
font-family: "Sofia Pro Light";
font-size: 15px;
font-weight: 400;
line-height: normal;
height: 45px;
padding: 16px 22px;
}
.form-container input:focus,
.form-container select:focus {
.form-container select:focus,
.form-container textarea {
box-shadow: none;
outline: unset;
}
......@@ -699,6 +702,11 @@ span.form-error {
background-color: transparent;
}
.form-container textarea {
resize: none;
height: auto;
}
.contact-number {
width: 100%;
display: flex;
......@@ -820,23 +828,23 @@ span.form-error {
}
.check-container .checkmark:after {
left: 7px;
top: 0px;
width: 4px;
height: 11px;
left: 6px;
top: 1px;
width: 5px;
height: 10px;
border: solid #000;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.checkmark:after {
.check-container .checkmark:after {
content: "";
position: absolute;
display: none;
}
.check-container input {
position: absolute;
/* position: absolute; */
opacity: 0;
cursor: pointer;
height: 0;
......@@ -847,7 +855,7 @@ span.form-error {
background-color: #fff;
}
.checkmark {
.check-container .checkmark {
position: absolute;
top: 0;
left: 0;
......@@ -931,7 +939,6 @@ span.form-error {
.uploadProfileImage p {
font-family: "Sofia Pro Bold";
font-size: 20px;
font-weight: 700;
line-height: 28px;
letter-spacing: 0em;
color: #fff;
......@@ -1157,17 +1164,17 @@ span.form-error {
/*----- vendor business details -------*/
.content-div {
padding: 2rem 3rem 1rem;
padding: 2rem 2rem 1rem;
background: #ffffff;
border-radius: 8px;
box-shadow: 0px 4px 20px 0px #73737340;
position: relative;
min-height: 600px;
}
.content-div h2 {
font-family: "Sofia Pro Bold";
font-size: 36px;
font-weight: 700;
line-height: 50px;
letter-spacing: 0em;
margin-bottom: 20px;
......@@ -1176,7 +1183,6 @@ span.form-error {
.content-div h4 {
font-family: "Sofia Pro Light";
font-size: 30px;
font-weight: 300;
line-height: 37px;
letter-spacing: 0em;
margin-bottom: 20px;
......@@ -1234,7 +1240,7 @@ span.form-error {
.business-details .textS {
font-size: 12px;
line-height: 12px;
line-height: 13px;
margin-top: 10px;
margin-bottom: 5px;
}
......@@ -1269,7 +1275,6 @@ span.form-error {
color: #000;
font-family: "Sofia Pro Light";
font-size: 15px;
font-weight: 400;
line-height: normal;
height: 45px;
padding: 16px 22px;
......@@ -1298,13 +1303,13 @@ span.form-error {
}
.sidebar {
width: 250px;
width: 210px;
height: auto;
background-color: #242932;
color: #fff;
transition: width 0.3s ease;
margin-top: -20px;
padding-top: 3rem;
padding-top: 2rem;
}
.sidebar.collapsed {
......@@ -1318,7 +1323,7 @@ span.form-error {
}
.sidebar ul li {
padding: 1rem 2rem;
padding: 0.85rem 2rem;
}
.sidebar ul li.active {
......@@ -1344,7 +1349,7 @@ span.form-error {
.sidebarContainer .content {
flex: 1;
padding: 3rem 1rem;
padding: 2rem 1rem;
}
/*-------------------------*/
......@@ -1398,7 +1403,7 @@ span.form-error {
.btnAdd {
background-color: #0070bd !important;
/* border: 1px solid #0070BD; */
padding: 1rem 2rem !important;
padding: 0.75rem 2rem !important;
border-radius: 10px !important;
font-family: "Sofia Pro Bold";
font-size: 16px !important;
......@@ -1411,6 +1416,7 @@ span.form-error {
justify-content: center;
margin: 1rem auto;
}
.btnAdd:disabled {
background-color: #a4afb7 !important;
color: #ffffff;
......@@ -1422,6 +1428,286 @@ span.form-error {
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 {
......@@ -2283,6 +2569,7 @@ footer hr {
.faqs-session {
padding: 5rem 0;
}
.subscribe label .btn {
font-size: 16px;
padding-left: 1rem;
......@@ -2838,6 +3125,12 @@ footer hr {
font-size: 32px;
line-height: 40px;
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) {
......
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!