Skip to content

Jay Mehta / zango-frontend

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

Merge branch 'master' of https://git.logicloop.io/jaymehta/zango-frontend

2 parents e4bc11cc 5ff3e0ee
Inline Side-by-side
Showing 15 changed files with 1061 additions and 480 deletions
components/about-us/AboutUs.js
......@@ -9,7 +9,6 @@ import PageBanner from './PageBanner.js'
const AboutUs = () => {
return (
<>
<PageBanner />
<MissionVision />
<Offers />
......
components/layout/DropdownUserProfile.js deleted 100644 → 0
import { signOut } from "next-auth/react";
import Image from "next/image";
import Link from "next/link";
import { useRouter } from "next/router";
import React, { Fragment, useEffect, useState } from "react";
import { renderImage } from "../../services/imageHandling";
const DropdownUserProfile = () => {
const router = useRouter();
const logoutHandler = () => {
signOut();
};
return (
<Fragment>
<div className="row">
<div className="col-12 col-lg-12">
<div>
<ul className="link-list">
<li>
<Link href="/personal-details">
<a>
Personal Info <i className="arrow-right"></i>
</a>
</Link>
</li>
</ul>
</div>
</div>
</div>
</Fragment>
);
};
export default DropdownUserProfile;
components/login/Login.js
......@@ -24,7 +24,7 @@ const Login = props => {
<div className="row">
<div className="col-11 col-lg-4 login-div">
<div className="">
<h2>{props.type == "vendor" ? "Vendor Login" : "Login to Experience"}</h2>
<h2>{props.type == "user" ? "Login to Experience" : (props.type == "vendor" ? "Vendor Login" : "Admin Login")}</h2>
<div className="form-container">
<Formik
initialValues={{
......
components/vendor/ActivityDetails.js
import Image from "next/image";
import { ErrorMessage, FieldArray, Formik } from "formik";
import { Fragment, useState } from "react";
import { Fragment, useEffect, useRef, useState } from "react";
import { Button, Form } from "react-bootstrap";
import * as Yup from "yup";
import { FaTimes, FaTrash } from "react-icons/fa";
import { FaTimes } from "react-icons/fa";
import { useDispatch, useSelector } from "react-redux";
import { getAllSubCategories } from "../../redux/actions/categoriesAction";
import { getLoggedInVendor, pincodeSearchByFilter } from "../../redux/actions/vendorActions";
import { AsyncTypeahead } from "react-bootstrap-typeahead";
import Select from "react-select";
import makeAnimated from "react-select/animated";
import { Select as AntSelect } from "antd";
// import { getMasterDays } from "../../redux/actions/activityAction";
import axios from "axios";
import { sanitizeTimeFormat } from "../../services/imageHandling";
import { createActivity } from "../../redux/actions/activityAction";
import { toast } from "react-toastify";
const ActivityDetails = () => {
const [expandedIndex, setExpandedIndex] = useState(0); // Initially set the first item as expanded
const format = "HH:mm";
let timeArray = [];
const toggleAccordion = (index) => {
setExpandedIndex((prevIndex) => (prevIndex === index ? null : index));
};
const hoursArray = [
{ value: "01", label: "01" },
{ value: "02", label: "02" },
{ value: "03", label: "03" },
{ value: "04", label: "04" },
{ value: "05", label: "05" },
{ value: "06", label: "06" },
{ value: "07", label: "07" },
{ value: "08", label: "08" },
{ value: "09", label: "09" },
{ value: "10", label: "10" },
{ value: "11", label: "11" },
{ value: "12", label: "12" }
];
const minutesArray = [
{ value: "00", label: "00" },
{ value: "01", label: "01" },
{ value: "02", label: "02" },
{ value: "03", label: "03" },
{ value: "04", label: "04" },
{ value: "05", label: "05" },
{ value: "06", label: "06" },
{ value: "07", label: "07" },
{ value: "08", label: "08" },
{ value: "09", label: "09" },
{ value: "10", label: "10" },
{ value: "11", label: "11" },
{ value: "12", label: "12" },
{ value: "13", label: "13" },
{ value: "14", label: "14" },
{ value: "15", label: "15" },
{ value: "16", label: "16" },
{ value: "17", label: "17" },
{ value: "18", label: "18" },
{ value: "19", label: "19" },
{ value: "20", label: "20" },
{ value: "21", label: "21" },
{ value: "22", label: "22" },
{ value: "23", label: "23" },
{ value: "24", label: "24" },
{ value: "25", label: "25" },
{ value: "26", label: "26" },
{ value: "27", label: "27" },
{ value: "28", label: "28" },
{ value: "29", label: "29" },
{ value: "30", label: "30" },
{ value: "31", label: "31" },
{ value: "32", label: "32" },
{ value: "33", label: "33" },
{ value: "34", label: "34" },
{ value: "35", label: "35" },
{ value: "36", label: "36" },
{ value: "37", label: "37" },
{ value: "38", label: "38" },
{ value: "39", label: "39" },
{ value: "40", label: "40" },
{ value: "41", label: "41" },
{ value: "42", label: "42" },
{ value: "43", label: "43" },
{ value: "44", label: "44" },
{ value: "45", label: "45" },
{ value: "46", label: "46" },
{ value: "47", label: "47" },
{ value: "48", label: "48" },
{ value: "49", label: "49" },
{ value: "50", label: "50" },
{ value: "51", label: "51" },
{ value: "52", label: "52" },
{ value: "53", label: "53" },
{ value: "54", label: "54" },
{ value: "55", label: "55" },
{ value: "56", label: "56" },
{ value: "57", label: "57" },
{ value: "58", label: "58" },
{ value: "59", label: "59" }
];
const monthsArray = [
{ value: "january", label: "January" },
{ value: "february", label: "February" },
{ value: "march", label: "March" },
{ value: "april", label: "April" },
{ value: "may", label: "May" },
{ value: "june", label: "June" },
{ value: "july", label: "July" },
{ value: "august", label: "August" },
{ value: "september", label: "September" },
{ value: "october", label: "October" },
{ value: "november", label: "November" },
{ value: "december", label: "December" }
];
// import { colourOptions } from '../data';
const animatedComponents = makeAnimated();
const ActivityDetails = () => {
const dispatch = useDispatch();
const { categories } = useSelector(state => state.categories);
const { subCategories } = useSelector(state => state.subCategories);
const { loggedInVendor } = useSelector(state => state.loggedInVendor);
let categoryRef = useRef();
// console.log("categories", subCategories);
let timeLines;
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"),
subCategory: Yup.string().required("Sub Category 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"),
addressLine2: Yup.string(),
pricePerPerson: Yup.string().required("Price Per Person is Required"),
giftingToSomeone: Yup.string().required("Gifting to someone is Required"),
giftingToSomeone: Yup.string().required("Required field"),
place: Yup.string().required("Place is Required"),
activityType: Yup.string().required("Required field"),
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"),
months: Yup.array(),
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(),
contactPersonForBooking: Yup.string().required("Contact person is a required field"),
countryCode: Yup.string(),
contactNumberForBooking: Yup.string(),
contactNumberForBooking: Yup.string().required("Number is a required field"),
cancellationPolicyFile: Yup.string(),
termsConditionsFile: Yup.string(),
})
)
termsConditionsFile: Yup.string()
});
const [pincodeData, setPinCodeData] = useState();
const [activeDays, setActiveDays] = useState();
const [minDisabled, setMinDisabled] = useState(true);
const [months, setMonths] = useState(true);
const [masterDays, setMasterDays] = useState();
const [timeSlotError, setTimeSlotError] = useState();
// const [timeArray, setTimeArray] = useState([]);
console.log("loggedInVendor", loggedInVendor);
// const [timeLines, setTimeLines] = useState()
const ref = useRef(null);
// let
const handleSearch = async pin => {
if (isNaN(pin)) {
return;
}
let pincodeDataSet = await pincodeSearchByFilter(pin);
// console.log("pincodeData", pincodeDataSet.data.data);
setPinCodeData(pincodeDataSet.data.data);
};
// let masterDays;
const getMasterDays = async () => {
const config = {
headers: {
"Content-Type": "application/json"
}
};
const response = await axios.get(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/master-days`, config);
// console.log("response", response.data);
setMasterDays(response.data.data);
return response.data;
};
useEffect(() => {
getMasterDays();
}, []);
useEffect(() => {
dispatch(getLoggedInVendor());
}, []);
console.log("masterDays", masterDays);
return (
<Fragment>
<div className="container p-5">
<div className="container p-1">
<div className="row">
<div className="col-12 col-lg-8">
<div className="content-div business-details">
<div className="form-container">
<Formik
initialValues={{
activities: [
{
category: "",
subCategory: "",
activityName: "",
......@@ -68,7 +211,7 @@ const ActivityDetails = () => {
contactPersonForActivity: "",
minGroupSize: "",
maxGroupSize: "",
months: "",
months: [],
minDuration: "",
maxDuration: "",
durationUnit: "",
......@@ -79,82 +222,62 @@ const ActivityDetails = () => {
countryCode: "",
contactNumberForBooking: "",
cancellationPolicyFile: "",
termsConditionsFile: "",
}
]
termsConditionsFile: ""
}}
validationSchema={activityDetailsValidationSchema}
// enableReinitialize={true}
onSubmit={values => {
console.log("activity details values", values)
}}
onSubmit={values => {}}
>
{({ values, errors, touched, handleChange, handleBlur, handleSubmit, setFieldValue }) => (
<Form
onSubmit={e => {
onSubmit={async e => {
e.preventDefault();
console.log("activity details values", values);
let timeSlots = [];
timeSlots = timeArray.map(item => {
console.log("sanitizeTimeFormat({ data: item })", sanitizeTimeFormat({ data: item }));
if (!sanitizeTimeFormat({ data: item })) {
console.log("sanitize 1", sanitizeTimeFormat({ data: item }));
toast.error("Time slots can not be empty!")
setTimeSlotError(true);
return
}
console.log("sanitize 2", sanitizeTimeFormat({ data: item }));
timeSlots = [...timeSlots, sanitizeTimeFormat({ data: item })];
return sanitizeTimeFormat({ data: item });
});
if (timeSlotError) {
return
}
handleSubmit();
console.log("timeslots", timeSlots);
values = {
...values,
timeSlots,
months,
pincode: ref.current.state.selected[0],
vendor: loggedInVendor,
name: values.activityName,
description: values.activityDescription,
address: `${values.addressLine1}, ${values.addressLine2}`,
minimumDuration: values.minDuration,
maximumDuration: values.maxDuration,
ageLowerLimit: values.ageGroup,
phoneNumber: values.contactNumberForBooking,
link: values.linkOfBooking,
giftSomeone: values.giftingToSomeone,
};
console.log("values 123", values);
const res = await dispatch(createActivity(values));
console.log("res", res);
}}
>
<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 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">
......@@ -162,32 +285,58 @@ const ActivityDetails = () => {
<div className="input-group">
<label>Category</label>
<select
id={`activities.${index}.category`}
name={`activities.${index}.category`}
onChange={handleChange}
ref={categoryRef}
value={values.category}
name="category"
onChange={async e => {
handleChange(e);
console.log(categoryRef);
await dispatch(getAllSubCategories(categoryRef.current.value));
}}
onBlur={handleBlur}
>
<option value="">Select</option>
<option value="Category 1">Category 1</option>
<option value="Category 2">Category 2</option>
{categories &&
categories?.data.length > 0 &&
categories.data.map((item, index) => {
return (
<option key={index} value={item.attributes.name}>
{item.attributes.name}
</option>
);
})}
{/* <option value="Category 2">Category 2</option> */}
</select>
<ErrorMessage name={`activities.${index}.category`} component="div" className="form-error" />
{touched.category && errors.category && (
<span className="form-error" style={{ color: "red", fontSize: "10px" }}>
{errors.category}
</span>
)}
{/* <ErrorMessage name="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}
>
<label>Sub Category</label>
<select id={`subCategory`} value={values.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>
{subCategories &&
subCategories?.data.length > 0 &&
subCategories.data.map((item, index) => {
return (
<option key={index} value={item.value}>
{item.attributes.name}
</option>
);
})}
</select>
<ErrorMessage name={`activities.${index}.category`} component="div" className="form-error" />
{touched.subCategory && errors.subCategory && (
<span className="form-error" style={{ color: "red", fontSize: "10px" }}>
{errors.subCategory}
</span>
)}
{/* <ErrorMessage name={`subCategory`} component="div" className="form-error" /> */}
</div>
</div>
</div>
......@@ -195,27 +344,25 @@ const ActivityDetails = () => {
<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" />
<input type="text" name={`activityName`} onChange={handleChange} onBlur={handleBlur} value={values.activityName} />
{touched.activityName && errors.activityName && (
<span className="form-error" style={{ color: "red", fontSize: "10px" }}>
{errors.activityName}
</span>
)}
{/* <ErrorMessage name={`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" />
<textarea rows="4" name={`activityDescription`} onChange={handleChange} onBlur={handleBlur} value={values.activityDescription} />
{touched.activityDescription && errors.activityDescription && (
<span className="form-error" style={{ color: "red", fontSize: "10px" }}>
{errors.activityDescription}
</span>
)}
{/* <ErrorMessage name={`activityDescription`} component="div" className="form-error" /> */}
</div>
</div>
</div>
......@@ -223,30 +370,52 @@ const ActivityDetails = () => {
<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}
>
<AsyncTypeahead
type="number"
onSearch={handleSearch}
minLength={3}
value={values.location}
id="basic-behaviors-example"
labelKey="name"
options={
pincodeData &&
pincodeData.length > 0 &&
pincodeData.map(item => {
return { name: item.attributes.name, id: item.id };
})
}
placeholder="Choose a pincode"
ref={ref}
onBlur={() => {
console.log(ref.current);
if (!ref.current.state.selected.length > 0) {
ref.current?.clear();
}
}}
onChange={e => {
console.log("input change", e);
// handleChange(e);
}}
/>
{/* <select id={`location`} value={values.location} name={`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" />
</select> */}
{/* <ErrorMessage name={`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" />
<input type="text" name={`pricePerPerson`} onChange={handleChange} onBlur={handleBlur} value={values.pricePerPerson} />
{touched.pricePerPerson && errors.pricePerPerson && (
<span className="form-error" style={{ color: "red", fontSize: "10px" }}>
{errors.pricePerPerson}
</span>
)}
{/* <ErrorMessage name={`pricePerPerson`} component="div" className="form-error" /> */}
</div>
</div>
</div>
......@@ -254,27 +423,25 @@ const ActivityDetails = () => {
<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" />
<input type="text" name={`addressLine1`} onChange={handleChange} onBlur={handleBlur} value={values.addressLine1} />
{touched.addressLine1 && errors.addressLine1 && (
<span className="form-error" style={{ color: "red", fontSize: "10px" }}>
{errors.addressLine1}
</span>
)}
{/* <ErrorMessage name={`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" />
<input type="text" name={`addressLine2`} onChange={handleChange} onBlur={handleBlur} value={values.addressLine2} />
{/* {touched.addressLine2 && errors.addressLine2 && (
<span className="form-error" style={{ color: "red", fontSize: "10px" }}>
{errors.addressLine2}
</span>
)} */}
{/* <ErrorMessage name={`addressLine2`} component="div" className="form-error" /> */}
</div>
</div>
</div>
......@@ -283,76 +450,47 @@ const ActivityDetails = () => {
<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 className="col-12 col-lg-12">
<select id="giftingToSomeone" name="giftingToSomeone" value={values.giftingToSomeone} onChange={handleChange} onBlur={handleBlur}>
{" "}
Gift someone
<option value="">Select</option>
<option value={true}>Yes</option>
<option value={false}>No</option>
</select>
</div>
{touched.giftingToSomeone && errors.giftingToSomeone && (
<span className="form-error" style={{ color: "red", fontSize: "10px" }}>
{errors.giftingToSomeone}
</span>
)}
</div>
<ErrorMessage name={`activities.${index}.giftingToSomeone`} component="div" className="form-error" />
{/* <ErrorMessage name={`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 className="">
<div className="col-12 col-lg-12">
<select id="activityType" name="activityType" onChange={handleChange} onBlur={handleBlur} value={values.activityType}>
{" "}
Activity Type
<option value="">Select</option>
<option value={"indoor"}>Indoor</option>
<option value={"outdoor"}>Outdoor</option>
</select>
</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>
{touched.activityType && errors.activityType && (
<span className="form-error" style={{ color: "red", fontSize: "10px" }}>
{errors.activityType}
</span>
)}
</div>
</div>
<ErrorMessage name={`activities.${index}.place`} component="div" className="form-error" />
{/* <ErrorMessage name={`place`} component="div" className="form-error" /> */}
</div>
</div>
</div>
......@@ -364,14 +502,13 @@ const ActivityDetails = () => {
<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" />
<input type="text" name={`contactPersonForActivity`} onChange={handleChange} onBlur={handleBlur} value={values.contactPersonForActivity} />
{touched.contactPersonForActivity && errors.contactPersonForActivity && (
<span className="form-error" style={{ color: "red", fontSize: "10px" }}>
{errors.contactPersonForActivity}
</span>
)}
{/* <ErrorMessage name={`contactPersonForActivity`} component="div" className="form-error" /> */}
</div>
</div>
<div className="col-12 col-lg-6">
......@@ -379,26 +516,22 @@ const ActivityDetails = () => {
<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" />
<input type="text" placeholder="Min." name={`minGroupSize`} onChange={handleChange} onBlur={handleBlur} value={values.minGroupSize} />
{touched.minGroupSize && errors.minGroupSize && (
<span className="form-error" style={{ color: "red", fontSize: "10px" }}>
{errors.minGroupSize}
</span>
)}
{/* <ErrorMessage name={`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" />
<input type="text" placeholder="Max." name={`maxGroupSize`} onChange={handleChange} onBlur={handleBlur} value={values.maxGroupSize} />
{touched.maxGroupSize && errors.maxGroupSize && (
<span className="form-error" style={{ color: "red", fontSize: "10px" }}>
{errors.maxGroupSize}
</span>
)}
{/* <ErrorMessage name={`maxGroupSize`} component="div" className="form-error" /> */}
</div>
</div>
</div>
......@@ -409,36 +542,291 @@ const ActivityDetails = () => {
<div className="mt-4">
<p className="textH">Availability</p>
<div className="row">
<div className="col-12 col-lg-6">
<div className="col-md-6 ">
<div className="input-group">
<label>Months</label>
<select
id={`activities.${index}.months`}
name={`activities.${index}.months`}
onChange={handleChange}
<Select
className="multi-select"
closeMenuOnSelect={false}
// value={values.months}
components={animatedComponents}
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" />
isMulti
id={`months`}
name={`months`}
onChange={e => {
console.log(e);
// handleChange(e)
setMonths(e);
}}
options={monthsArray}
// value={values.months}
/>
{/* {touched.months && errors.months && (
<span className="form-error" style={{ color: "red", fontSize: "10px" }}>
{errors.months}
</span>
)} */}
{/* <ErrorMessage name={`months`} component="div" className="form-error" /> */}
</div>
</div>
<div className="col-12 col-lg-6">
<div className="col-md-6 ">
<div className="input-group">
<label>Day & Time</label>
<select
id={`activities.${index}.dayTime`}
name={`activities.${index}.dayTime`}
onChange={handleChange}
onBlur={handleBlur}
>
<Select
className="multi-select"
closeMenuOnSelect={true}
components={animatedComponents}
isMulti
id={`dayTime`}
name={`dayTime`}
onChange={e => {
console.log("days", e);
setActiveDays(e);
timeArray.length > 0 &&
timeArray.map((item, index) => {
// item.day -> active days
if (!e.map(j => j.value).includes(item.day)) {
return timeArray.splice(index, 1);
}
});
console.log("time final", timeArray);
}}
options={
// masterDays &&
// masterDays.map(item => {
// return { value: { day: item.attributes.name, id: item.id }, label: item.attributes.name };
// })
[
{ value: "monday", label: "Monday" },
{ value: "tuesday", label: "Tuesday" },
{ value: "wednesday", label: "Wednesday" },
{ value: "thursday", label: "Thursday" },
{ value: "friday", label: "Friday" },
{ value: "saturday", label: "Saturday" },
{ value: "sunday", label: "Sunday" }
]
}
/>
{/* <select id={`dayTime`} name={`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" />
</select> */}
{/* <ErrorMessage name={`dayTime`} component="div" className="form-error" /> */}
{/* {console.log("time Array", timeArray)} */}
<div>
{activeDays &&
activeDays.length > 0 &&
activeDays.map((item, index) => {
// console.log(item);
return (
<div key={index} className="row">
{/* {console.log("time Array", timeArray)} */}
<div className="col-md-6">Day:</div>
<div className="col-md-6">{item.label}</div>
<div className="col-md-2">From</div>
<AntSelect
className="col-md-3"
placeholder="hours"
onChange={e => {
setTimeSlotError(false);
let stop = false;
setMinDisabled(false);
if (!timeArray.length > 0) {
timeArray = [{ day: item.value, fromHours: e }];
return;
}
console.log("here time array", timeArray);
// timeArray.filter(i => i.day==)
timeArray.map((object, index) => {
if (stop) {
return;
}
console.log("object", timeArray.map(j => j.day).includes(object.day), object.day);
if (object.day == item.value) {
console.log("here 1");
object.fromHours = e;
return;
} else if (!timeArray.map(j => j.day).includes(item.value)) {
console.log("here 2");
timeArray = [...timeArray, { day: item.value, fromHours: e }];
stop = true;
return timeArray;
}
// console.log("object", timeArray);
});
console.log("timeArray", timeArray);
}}
options={hoursArray}
/>
:
<AntSelect
disabled={minDisabled}
className="col-md-3"
placeholder="minutes"
onChange={e => {
setTimeSlotError(false);
if (!timeArray || !timeArray.length > 0) {
timeArray = [{ day: item.value, fromMins: e }];
return;
}
timeArray.map((object, index) => {
console.log("object", object.day, item.value, object.day == item.value);
if (object.day == item.value) {
object.fromMins = e;
// return;
} else if (!object.day) {
console.log("mins second condition");
timeArray = [...timeArray, { day: item.value, fromMins: e }];
}
// else {
// object.fromMins = e;
// }
// console.log("object", timeArray);
});
console.log("timeArray", timeArray);
}}
options={minutesArray}
/>
<AntSelect
className="col-md-3 "
placeholder="select"
options={[
{ value: "am", label: "AM" },
{ value: "pm", label: "PM" }
]}
onChange={e => {
setTimeSlotError(false);
if (!timeArray || !timeArray.length > 0) {
timeArray = [{ day: item.value, fromDayTime: e }];
return;
}
timeArray.map((object, index) => {
if (object.day == item.value) {
object.fromDayTime = e;
return;
} else if (!object.day) {
timeArray = [...timeArray, { day: item.value, fromDayTime: e }];
}
// else {
// object.fromDayTime = e;
// }
// console.log("object", timeArray);
});
console.log("timeArray", timeArray);
}}
/>
<div className="col-md-2">To</div>
<AntSelect
onChange={e => {
setTimeSlotError(false);
let stop = false;
// setMinDisabled(false);
if (!timeArray.length > 0) {
timeArray = [{ day: item.value, toHours: e }];
return;
}
// timeArray.filter(i => i.day==)
timeArray.map((object, index) => {
if (stop) {
return;
}
if (object.day == item.value) {
console.log("here 1");
object.toHours = e;
return;
} else if (!timeArray.map(j => j.day).includes(item.value)) {
console.log("here 2");
timeArray = [...timeArray, { day: item.value, toHours: e }];
stop = true;
return timeArray;
}
// console.log("object", timeArray);
});
console.log("timeArray", timeArray);
}}
className="col-md-3"
placeholder="hours"
options={hoursArray}
/>
:
<AntSelect
onChange={e => {
setTimeSlotError(false);
if (!timeArray || !timeArray.length > 0) {
timeArray = [{ day: item.value, toMins: e }];
return;
}
timeArray.map((object, index) => {
console.log("object", object.day, item.value, object.day == item.value);
if (object.day == item.value) {
object.toMins = e;
// return;
} else if (!object.day) {
console.log("mins second condition");
timeArray = [...timeArray, { day: item.value, toMins: e }];
}
// else {
// object.fromMins = e;
// }
// console.log("object", timeArray);
});
console.log("timeArray", timeArray);
}}
className="col-md-3"
placeholder="minutes"
options={minutesArray}
/>
<AntSelect
onChange={e => {
setTimeSlotError(false);
if (!timeArray || !timeArray.length > 0) {
timeArray = [{ day: item.value, toDayTime: e }];
return;
}
timeArray.map((object, index) => {
if (object.day == item.value) {
object.toDayTime = e;
return;
} else if (!object.day) {
timeArray = [...timeArray, { day: item.value, toDayTime: e }];
}
// else {
// object.toDayTime = e;
// }
// console.log("object", timeArray);
});
console.log("timeArray", timeArray);
}}
className="col-md-3 "
placeholder="select"
options={[
{ value: "am", label: "AM" },
{ value: "pm", label: "PM" }
]}
/>
<br />
<br />
<hr />
</div>
);
})}
</div>
</div>
</div>
</div>
......@@ -448,41 +836,47 @@ const ActivityDetails = () => {
<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 id="minDuration" name="minDuration" onChange={handleChange} onBlur={handleBlur}>
<option value="min">Min</option>
<option value="min">Min</option>
</select>
{errors.minDuration && touched.minDuration && (<span className="form-error">{errors.minDuration}</span>)}
{touched.minDuration && errors.minDuration && (
<span className="form-error" style={{ color: "red", fontSize: "10px" }}>
{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 id="maxDuration" name="maxDuration" onChange={handleChange} onBlur={handleBlur} style={{ width: "100%" }}>
<option value="max">Max</option>
<option value="max">Max</option>
</select>
{errors.maxDuration && touched.maxDuration && (<span className="form-error">{errors.maxDuration}</span>)}
{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}
>
<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>)}
{errors.durationUnit && touched.durationUnit && <span className="form-error">{errors.durationUnit}</span>}
</div>
</div>
</div>
</div>
<div className="col-12 col-lg-6">
<div className="input-group">
<label>Age Group</label>
<select id={"ageGroup"} name={"ageGroup"} onChange={handleChange} onBlur={handleBlur}>
<option value="">Select</option>
<option value="Location 1">Location 1</option>
<option value="Location 2">Location 2</option>
</select>
{touched.ageGroup && errors.ageGroup && (
<span className="form-error" style={{ color: "red", fontSize: "10px" }}>
{errors.ageGroup}
</span>
)}
{/* <ErrorMessage name={"ageGroup"} component="div" className="form-error" /> */}
</div>
</div>
</div>
......@@ -494,14 +888,13 @@ const ActivityDetails = () => {
<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" />
<input type="text" name={`linkOfBooking`} onChange={handleChange} onBlur={handleBlur} value={values.linkOfBooking} />
{touched.linkOfBooking && errors.linkOfBooking && (
<span className="form-error" style={{ color: "red", fontSize: "10px" }}>
{errors.linkOfBooking}
</span>
)}
{/* <ErrorMessage name={`linkOfBooking`} component="div" className="form-error" /> */}
</div>
</div>
</div>
......@@ -509,39 +902,31 @@ const ActivityDetails = () => {
<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" />
<input type="text" name={`contactPersonForBooking`} onChange={handleChange} onBlur={handleBlur} value={values.contactPersonForBooking} />
{touched.contactPersonForBooking && errors.contactPersonForBooking && (
<span className="form-error" style={{ color: "red", fontSize: "10px" }}>
{errors.contactPersonForBooking}
</span>
)}
{/* <ErrorMessage name={`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" }}
>
<select id={`countryCode`} name={`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}
/>
<input type="text" name={`contactNumberForBooking`} onChange={handleChange} onBlur={handleBlur} value={values.contactNumberForBooking} />
</div>
<ErrorMessage name={`activities.${index}.contactNumberForBooking`} component="div" className="form-error" />
{touched.contactNumberForBooking && errors.contactNumberForBooking && (
<span className="form-error" style={{ color: "red", fontSize: "10px" }}>
{errors.contactNumberForBooking}
</span>
)}
{/* <ErrorMessage name={`contactNumberForBooking`} component="div" className="form-error" /> */}
</div>
</div>
</div>
......@@ -557,12 +942,12 @@ const ActivityDetails = () => {
<input
type="file"
className="custom-file-input"
id={`activities.${index}.cancellationPolicyFile`}
name={`activities.${index}.cancellationPolicyFile`}
onChange={(event) => {
id={`cancellationPolicyFile`}
name={`cancellationPolicyFile`}
onChange={event => {
if (event) {
const file = event.currentTarget.files[0]
setFieldValue(`activities.${index}.cancellationPolicyFile`, file)
const file = event.currentTarget.files[0];
setFieldValue(`cancellationPolicyFile`, file);
}
}}
onBlur={handleBlur}
......@@ -571,17 +956,20 @@ const ActivityDetails = () => {
target.value = "";
}}
/>
<label className="custom-file-label" htmlFor={`activities.${index}.cancellationPolicyFile`}>
<label className="custom-file-label" htmlFor={`cancellationPolicyFile`}>
Upload
</label>
</div>
<ErrorMessage name={`activities.${index}.cancellationPolicyFile`} component="div" className="form-error" />
{values.activities[index].cancellationPolicyFile && (
{/* <ErrorMessage name={`cancellationPolicyFile`} component="div" className="form-error" /> */}
{values.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`, "")
}} />
<p className="textS m-0">{values.cancellationPolicyFile.name}</p>
<FaTimes
style={{ cursor: "pointer" }}
onClick={() => {
setFieldValue(`cancellationPolicyFile`, "");
}}
/>
</div>
)}
</div>
......@@ -593,12 +981,12 @@ const ActivityDetails = () => {
<input
type="file"
className="custom-file-input"
id={`activities.${index}.termsConditionsFile`}
name={`activities.${index}.termsConditionsFile`}
onChange={(event) => {
id={`termsConditionsFile`}
name={`termsConditionsFile`}
onChange={event => {
if (event) {
const file = event.currentTarget.files[0]
setFieldValue(`activities.${index}.termsConditionsFile`, file)
const file = event.currentTarget.files[0];
setFieldValue(`termsConditionsFile`, file);
}
}}
onBlur={handleBlur}
......@@ -607,17 +995,20 @@ const ActivityDetails = () => {
target.value = "";
}}
/>
<label className="custom-file-label" htmlFor={`activities.${index}.termsConditionsFile`}>
<label className="custom-file-label" htmlFor={`termsConditionsFile`}>
Upload
</label>
</div>
<ErrorMessage name={`activities.${index}.termsConditionsFile`} component="div" className="form-error" />
{values.activities[index].termsConditionsFile && (
{/* <ErrorMessage name={`termsConditionsFile`} component="div" className="form-error" /> */}
{values.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`, "")
}} />
<p className="textS m-0">{values.termsConditionsFile.name}</p>
<FaTimes
style={{ cursor: "pointer" }}
onClick={() => {
setFieldValue(`termsConditionsFile`, "");
}}
/>
</div>
)}
</div>
......@@ -625,19 +1016,14 @@ const ActivityDetails = () => {
</div>
</div>
</div>
</AccordionItem>
</div>
))}
</div>
)}
</FieldArray>
<div className="row">
<div className="col-12 col-lg-5">
<div className="input-group">
<Button type="submit" className="btn btn-primary btn-submit" disabled>
<Button type="submit" className="btn btn-primary btn-submit">
Submit
</Button>
{/* <button type="submit" onClick={handleSubmit}>submit</button> */}
</div>
</div>
</div>
</div>
......@@ -677,20 +1063,18 @@ const ActivityDetails = () => {
</div>
</div>
</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>{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 style={{ display: expanded ? "block" : "none" }}>{children}</div>
</div>
);
};
......
package.json
......@@ -10,6 +10,7 @@
},
"dependencies": {
"@stripe/stripe-js": "^1.35.0",
"antd": "^5.15.3",
"axios": "^0.27.2",
"easyinvoice": "^2.3.3",
"formik": "^2.2.9",
......@@ -41,7 +42,7 @@
"redux": "^4.2.0",
"redux-devtools-extension": "^2.13.9",
"redux-thunk": "^2.4.1",
"swiper": "^11.0.7",
"swiper": "^11.1.0",
"validator": "^13.7.0",
"yup": "^0.32.11"
},
......
pages/vendor/activity-details/index.js
import React from "react";
import Layout from "../../../components/layout/Layout";
import ActivityDetails from "../../../components/vendor/ActivityDetails";
import { getAllCategories, getAllSubCategories } from "../../../redux/actions/categoriesAction";
import { loadUser } from "../../../redux/actions/userActions";
import { getLoggedInVendor } from "../../../redux/actions/vendorActions";
import { wrapper } from "../../../redux/store";
export default function ActivityDetailsPage () {
......@@ -10,3 +14,18 @@ export default function ActivityDetailsPage () {
</Layout>
);
};
/** For server side rendering */
export const getServerSideProps = wrapper.getServerSideProps(store => async ({ req, query }) => {
await store.dispatch(loadUser());
await store.dispatch(getAllCategories())
// await store.dispatch(getLoggedInVendor())
// await store.dispatch(getAllSubCategories())
return {
props: {}
};
});
\ No newline at end of file
redux/actions/activityAction.js
......@@ -3,6 +3,7 @@ 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 => {
console.log("data", data);
const session = await getSession();
try {
if (!session) {
......@@ -26,7 +27,7 @@ export const createActivity = data => async dispatch => {
}
};
const response = await axios.post(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/experiences`);
const response = await axios.post(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/experiences`, activityData, config);
dispatch({
type: CREATE_ACTIVITY_SUCCESS,
......@@ -40,3 +41,14 @@ export const createActivity = data => async dispatch => {
});
}
};
// export const getMasterDays = async () => {
// const config = {
// headers: {
// "Content-Type": "application/json"
// }
// };
// const response = await axios.get(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/master-days`, config);
// console.log("response",response.data);
// return response.data;
// };
redux/actions/categoriesAction.js 0 → 100644
import axios from "axios";
import qs from "qs";
import {
GET_CATEGORIES_FAIL,
GET_CATEGORIES_REQUEST,
GET_CATEGORIES_SUCCESS,
GET_SUB_CATEGORIES_FAIL,
GET_SUB_CATEGORIES_REQUEST,
GET_SUB_CATEGORIES_SUCCESS
} from "../constants/categoryConstants";
export const getAllCategories = () => async dispatch => {
try {
dispatch({
type: GET_CATEGORIES_REQUEST
});
const config = {
headers: {
"Content-Type": "application/json"
}
};
const response = await axios.get(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/categories`, config);
dispatch({
type: GET_CATEGORIES_SUCCESS,
payload: response.data
});
return response.data;
} catch (error) {
dispatch({
type: GET_CATEGORIES_FAIL,
payload: error.response.data
});
}
};
export const getAllSubCategories = categoryName => async dispatch => {
try {
dispatch({
type: GET_SUB_CATEGORIES_REQUEST
});
const config = {
headers: {
"Content-Type": "application/json"
}
};
const query = {
filters: {
category: {
name: { $eq: categoryName }
}
},
populate: ["category"]
};
const queryString = qs.stringify(query, {
encodeValuesOnly: true
});
const response = await axios.get(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/sub-categories/?${queryString}`, config);
dispatch({
type: GET_SUB_CATEGORIES_SUCCESS,
payload: response.data
});
return response.data;
} catch (error) {
dispatch({
type: GET_SUB_CATEGORIES_FAIL,
payload: error.response.data
});
}
};
redux/actions/vendorActions.js
......@@ -119,7 +119,8 @@ export const getLoggedInVendor = () => async dispatch => {
const response = await axios.get(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/vendors/?${queryString}`, config);
console.log("response", response.data.data[0]);
dispatch({
type: GET_LOGGED_IN_VENDOR_SUCCESS
type: GET_LOGGED_IN_VENDOR_SUCCESS,
payload: response.data.data[0]
});
return response.data.data[0];
} catch (error) {
......
redux/constants/categoryConstants.js 0 → 100644
export const GET_CATEGORIES_REQUEST = "GET_CATEGORIES_REQUEST"
export const GET_CATEGORIES_SUCCESS = "GET_CATEGORIES_SUCCESS"
export const GET_CATEGORIES_FAIL = "GET_CATEGORIES_FAIL"
export const GET_SUB_CATEGORIES_REQUEST = "GET_SUB_CATEGORIES_REQUEST"
export const GET_SUB_CATEGORIES_SUCCESS = "GET_SUB_CATEGORIES_SUCCESS"
export const GET_SUB_CATEGORIES_FAIL = "GET_SUB_CATEGORIES_FAIL"
export const CLEAR_ERRORS = "CLEAR_ERRORS";
\ No newline at end of file
redux/reducers/categoryReducer.js 0 → 100644
import { GET_CATEGORIES_REQUEST, CLEAR_ERRORS, GET_CATEGORIES_SUCCESS, GET_CATEGORIES_FAIL, GET_SUB_CATEGORIES_REQUEST, GET_SUB_CATEGORIES_FAIL, GET_SUB_CATEGORIES_SUCCESS } from "../constants/categoryConstants";
export const getAllCategoriesReducer = (state = { loading: true, success: false, categories: null }, action) => {
switch (action.type) {
case GET_CATEGORIES_REQUEST:
return {
loading: true,
};
case GET_CATEGORIES_SUCCESS:
return {
loading: false,
categories: action.payload
};
case GET_CATEGORIES_FAIL:
return {
loading: false,
error: action.payload.error.message
};
case CLEAR_ERRORS:
return {
...state,
error: null
};
default:
return state;
}
};
export const getAllSubCategoriesReducer = (state = { loading: true, success: false, subCategories: null }, action) => {
switch (action.type) {
case GET_SUB_CATEGORIES_REQUEST:
return {
loading: true,
};
case GET_SUB_CATEGORIES_SUCCESS:
return {
loading: false,
subCategories: action.payload
};
case GET_SUB_CATEGORIES_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
......@@ -6,6 +6,7 @@ import { enquiryReducer } from "./enquiryReducer";
import { displayEnquireNowReducer } from "./enquireNowModalReducer";
import { getVendorDetailsReducer, loggedInVendorReducer, updateVendorReducer } from "./vendorReducers";
import { createActivityReducer } from "./activitiesReducer";
import { getAllCategoriesReducer, getAllSubCategoriesReducer } from "./categoryReducer";
const reducers = combineReducers({
townships: townshipsReducer,
......@@ -24,6 +25,8 @@ const reducers = combineReducers({
updatedVendorData: updateVendorReducer,
vendorDetails: getVendorDetailsReducer,
activityData: createActivityReducer,
categories: getAllCategoriesReducer,
subCategories: getAllSubCategoriesReducer,
});
export default reducers;
services/imageHandling.js
......@@ -14,7 +14,6 @@ export const cleanImage = originalImage => {
return imageUrl;
};
export const renderImage = imagePath => {
let imageUrl = "/images/default.svg";
......@@ -32,3 +31,17 @@ export const renderImage = imagePath => {
return imageUrl;
};
export const sanitizeTimeFormat = ({ data }) => {
console.log("here sant 1")
if (!data.fromHours || !data.fromMins || !data.toHours || !data.toMins) {
console.log("here sant")
return null
}
const fromTime = `${data.fromHours}:${data.fromMins}:00`;
const toTime = `${data.toHours}:${data.toMins}:00`;
const day = data.day;
return { fromTime, toTime, day };
// const day
};
styles/globals.css
......@@ -394,25 +394,25 @@ header {
margin-right: 2rem;
font-size: 15px;
}
.home-banner-bg{
.home-banner-bg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.home-banner-bg>span{
.home-banner-bg > span {
height: 100%;
display: block;
}
.home-banner-bg>span>span{
.home-banner-bg > span > span {
height: 100% !important;
}
.home-banner-bg>span>span .image{
.home-banner-bg > span > span .image {
object-fit: cover !important;
border-radius: 0 0 136px 136px;
}
.banner-bg{
.banner-bg {
position: absolute;
left: 0;
top: 0;
......@@ -1428,23 +1428,21 @@ span.form-error,
border: 1px solid #0070bd;
}
.btnAdd:hover,
.btnAdd:focus,
.btnAdd:active {
border: 1px solid #0070BD;
border: 1px solid #0070bd;
}
.activityDetails .accordionItem {
padding: 1rem;
border-bottom: 1px solid #ECECEC;
border-bottom: 1px solid #ececec;
}
.activityDetails .accordionItem:last-child {
border-bottom: none;
}
/* The radioContainer */
.radioContainer {
display: block;
......@@ -1480,19 +1478,19 @@ span.form-error,
transform: translateY(-55%);
height: 20px;
width: 20px;
background-color: #FFF;
background-color: #fff;
border-radius: 50%;
border: 1px solid #75777B;
border: 1px solid #75777b;
}
/* On mouse-over, add a grey background color */
.radioContainer:hover input~.checkmark {
background-color: #FFF;
.radioContainer:hover input ~ .checkmark {
background-color: #fff;
}
/* When the radio button is checked, add a blue background */
.radioContainer input:checked~.checkmark {
color: #0070BD;
.radioContainer input:checked ~ .checkmark {
color: #0070bd;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
......@@ -1503,7 +1501,7 @@ span.form-error,
}
/* Show the indicator (dot/circle) when checked */
.radioContainer input:checked~.checkmark:after {
.radioContainer input:checked ~ .checkmark:after {
display: block;
}
......@@ -1514,7 +1512,7 @@ span.form-error,
width: 12px;
height: 12px;
border-radius: 50%;
background: #0070BD;
background: #0070bd;
transform: translate(-50%, -50%);
}
......@@ -1565,7 +1563,7 @@ span.form-error,
.customUploadImage {
position: relative;
display: inline-block;
border: .81px solid #000;
border: 0.81px solid #000;
border-radius: 10px;
width: 51px;
height: 51px;
......@@ -1605,14 +1603,13 @@ span.form-error,
font-size: 15px !important;
line-height: 15.17px !important;
text-align: left;
color: #0070BD;
color: #0070bd;
text-decoration: underline;
text-wrap: nowrap;
margin-top: 10px;
cursor: pointer;
}
/*--------- orders listing -----------*/
.rightContent h2 {
font-family: "Sofia Pro Bold";
......@@ -1633,9 +1630,9 @@ span.form-error,
}
.listingTable thead tr th {
background-color: #E9EEF0;
background-color: #e9eef0;
padding: 12px;
color: #1C1C1E;
color: #1c1c1e;
font-family: "Poppins SemiBold";
font-size: 16px;
line-height: 25px;
......@@ -1651,7 +1648,7 @@ span.form-error,
.listingTable .check-container .checkmark {
top: 5px;
border: 1px solid rgba(218, 220, 224, 1)
border: 1px solid rgba(218, 220, 224, 1);
}
.listingTable .check-container .checkmark:after {
......@@ -1676,7 +1673,7 @@ span.form-error,
font-family: "Poppins Regular";
font-size: 15px;
line-height: 22px;
color: #1C1C1E;
color: #1c1c1e;
}
.listingTable tbody tr td span {
......@@ -1695,19 +1692,17 @@ span.form-error,
}
.statusDiv.processing {
background-color: #DFF3FB;
border: 1px solid #01A7DB;
color: #3198F3;
background-color: #dff3fb;
border: 1px solid #01a7db;
color: #3198f3;
}
.statusDiv.completed {
background-color: #F1FFEB;
border: 1px solid #5ED028;
color: #5ED028;
background-color: #f1ffeb;
border: 1px solid #5ed028;
color: #5ed028;
}
/*--------------------------*/
.let-discover-carousal a {
......@@ -2600,8 +2595,47 @@ footer hr {
background-size: 100%;
display: block;
}
.mySwiper01 .swiper-button-prev:after {
.multi-select {
width: 100%;
border: 1px solid #000;
border-radius: 10px;
}
@media (min-width: 992px) {
.navbar-expand-lg .navbar-nav .nav-link {
margin: 0 2rem;
}
.navbar-expand-lg .navbar-collapse {
display: flex !important;
flex-basis: auto;
align-items: center;
justify-content: flex-end;
}
.navbar-expand-lg .navbar-nav .nav-link.gift-card {
display: flex;
align-items: center;
position: relative;
}
.navbar-expand-lg .navbar-nav .nav-link.gift-card::after {
content: "";
background: #000;
height: 2px;
width: 100%;
bottom: 0;
left: 0;
position: absolute;
}
.navbar-expand-lg .navbar-nav .nav-link.gift-card .image-container {
width: 21px;
margin-left: 10px;
}
.mySwiper01 .swiper-button-prev:after {
background: url(/images/icons/arrow-left.svg) no-repeat center;
}
}
.mySwiper01 .swiper-button-next:after {
background: url(/images/icons/arrow-right.svg) no-repeat center;
......@@ -2873,14 +2907,14 @@ footer hr {
height: 220px;
position: relative;
}
.blog-item .img-wrapper .image-container{
.blog-item .img-wrapper .image-container {
height: 100%;
display: block;
}
.blog-item .img-wrapper .image-container>span{
.blog-item .img-wrapper .image-container > span {
height: 100% !important;
}
.blog-item .img-wrapper .image-container>span>.image{
.blog-item .img-wrapper .image-container > span > .image {
object-fit: cover;
border-radius: 25px 25px 0 0;
}
......@@ -2929,7 +2963,7 @@ footer hr {
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.blog-item .info .read-more .btn{
.blog-item .info .read-more .btn {
font-size: 13px;
line-height: 15px;
padding-top: 0.675rem;
......@@ -2950,117 +2984,118 @@ footer hr {
padding: 0;
border-top: 0;
}
.blogs-filter .btn.btn-primary{
.blogs-filter .btn.btn-primary {
padding-top: 0.475rem;
padding-bottom: 0.475rem;
}
.blog-detail-inner-session .profile{
.blog-detail-inner-session .profile {
display: flex;
align-items: center;
}
.blog-detail-inner-session .profile .image-container{
.blog-detail-inner-session .profile .image-container {
width: 56px;
display: inline-block;
margin-right: 0.5rem;
}
.blog-detail-inner-session .date{
.blog-detail-inner-session .date {
display: flex;
align-items: center;
justify-content: flex-end;
}
.blog-detail-inner-session .date .image-container{
.blog-detail-inner-session .date .image-container {
width: 29px;
display: inline-block;
margin-right: 0.5rem;
}
.blog-detail-inner-session .flag-list{
.blog-detail-inner-session .flag-list {
padding: 2rem 0;
}
.blog-detail-inner-session .flag-list li{
.blog-detail-inner-session .flag-list li {
display: inline-block;
margin-right: 1rem;
}
.blog-detail-inner-session .flag-list li a{
background: #F7F5F1;
.blog-detail-inner-session .flag-list li a {
background: #f7f5f1;
border-radius: 5px;
color: #000;
padding: 0.5rem 1rem;
display: block;
}
.blog-detail-inner-session h2{
.blog-detail-inner-session h2 {
font-size: 32px;
line-height: 38px;
font-weight: 400;
margin-bottom: 2rem;
}
.blog-detail-inner-session p{
.blog-detail-inner-session p {
margin-bottom: 1.5rem;
}
.blog-detail-inner-session{
.blog-detail-inner-session {
padding-bottom: 3rem;
}
.s-page-session{
.s-page-session {
margin: 5rem 0;
}
.s-page-session h2{
.s-page-session h2 {
font-size: 32px;
line-height: 40px;
font-weight: 400;
margin-bottom: 1rem;
}
.s-page-session p{
.s-page-session p {
margin-bottom: 1.5rem;
}
.s-page-session ul{
.s-page-session ul {
list-style-type: disc;
list-style-position: inside;
margin-left: 2rem;
margin-bottom: 2rem;
}
.gift-card-session{
.gift-card-session {
padding: 5rem 0;
}
.gift-card-lt{
.gift-card-lt {
text-align: center;
width: 354px;
height: 228px;
}
.gift-card-lt .gift-box{
.gift-card-lt .gift-box {
height: 100%;
background: #F7F5F1;
background: #f7f5f1;
display: flex;
align-items: center;
justify-content: center;
border-radius: 13px;
margin-bottom: 1rem;
}
.gift-card-rt{
border-left: 2px solid #E9E9E9;
.gift-card-rt {
border-left: 2px solid #e9e9e9;
padding-left: 3rem;
}
.gift-card-session .back-btn .image-container{
.gift-card-session .back-btn .image-container {
width: 15px;
display: inline-block;
}
.gift-card-amt ul li{
.gift-card-amt ul li {
display: inline-block;
vertical-align: top;
}
.gift-card-amt ul li input[type=radio] {
.gift-card-amt ul li input[type="radio"] {
display: none;
}
.gift-card-amt ul li a,.gift-card-amt ul li label {
.gift-card-amt ul li a,
.gift-card-amt ul li label {
cursor: pointer;
padding: .5rem 1rem;
padding: 0.5rem 1rem;
display: inline-block;
/* border: 1px solid #000; */
border-radius: 12px;
font-size: 22px;
line-height: 22px;
margin: .5rem;
margin: 0.5rem;
min-width: 155px;
text-align: center;
background: #F7F5F1;
background: #f7f5f1;
display: flex;
flex-direction: column;
line-height: 13px;
......@@ -3068,25 +3103,27 @@ footer hr {
align-items: center;
justify-content: center;
}
.gift-card-amt ul li a,.gift-card-amt ul li label>span{
.gift-card-amt ul li a,
.gift-card-amt ul li label > span {
font-size: 14px;
}
.gift-card-amt ul li input[type=radio]:checked+label {
background: #0070BD;
color: #fff
.gift-card-amt ul li input[type="radio"]:checked + label {
background: #0070bd;
color: #fff;
}
.gift-card-amt ul li a,.gift-card-amt ul li label {
padding: 1.5rem 2rem
.gift-card-amt ul li a,
.gift-card-amt ul li label {
padding: 1.5rem 2rem;
}
.tooltip-wrapper{
.tooltip-wrapper {
position: relative;
}
.tooltips {
display: block;
position: absolute;
background: #fff;
box-shadow: 0px 3.2603139877319336px 15.81252384185791px 0px #0000001A;
box-shadow: 0px 3.2603139877319336px 15.81252384185791px 0px #0000001a;
color: #808080;
padding: 5px;
border-radius: 5px;
......@@ -3099,7 +3136,7 @@ footer hr {
.tooltip-btn {
position: relative;
}
.tooltip-btn .image-container{
.tooltip-btn .image-container {
width: 12px;
display: inline-block;
}
......@@ -3110,25 +3147,24 @@ footer hr {
.tooltip-btn:hover {
cursor: pointer;
}
.cl-gry{
.cl-gry {
color: #808080 !important;
}
.gift-card-rt .back-btn{
.gift-card-rt .back-btn {
margin-bottom: 1rem;
}
.gift-card-rt .title{
.gift-card-rt .title {
font-size: 32px;
margin-bottom: 0.5rem;
}
.gift-card-amt{
.gift-card-amt {
margin: 1rem 0;
}
.gift-card-rt .form-01 .form-control{
.gift-card-rt .form-01 .form-control {
border: 1px solid #000;
border-radius: 9px;
}
.gift-card-rt .form-01 .link-a{
.gift-card-rt .form-01 .link-a {
}
.gift-card-session .result-box {
text-align: center;
......@@ -3138,7 +3174,7 @@ footer hr {
align-items: center;
justify-content: center;
}
.gift-card-session .result-box p{
.gift-card-session .result-box p {
font-size: 32px;
line-height: 40px;
margin-bottom: 2rem;
......@@ -3277,31 +3313,32 @@ img:hover {
}
@media (max-width: 767px) {
.home-banner-bg>span>span .image {
.home-banner-bg > span > span .image {
border-radius: 0 0 20px 20px;
}
.gift-card-rt .title,.gift-card-rt .cl-gry {
}
.gift-card-rt .title,
.gift-card-rt .cl-gry {
padding-left: 1rem;
}
.gift-card-rt .back-btn{
}
.gift-card-rt .back-btn {
display: none;
}
.gift-card-amt ul{
.gift-card-amt ul {
text-align: center;
}
.gift-card-rt {
border-left: 0;
padding-left: 0;
padding-top: 2rem;
border-top: 2px solid #E9E9E9;
border-top: 2px solid #e9e9e9;
margin-top: 4rem;
}
}
.gift-card-lt {
margin: 0 auto;
}
}
.d-table-cell {
padding-top: 2rem;
}
}
.filter-dd {
justify-content: space-between;
}
......
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!