Skip to content

Jay Mehta / zango-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit a3148dbd by jaymehta
Options

listing and detail

1 parent 87175bba
Inline Side-by-side
Showing 15 changed files with 1690 additions and 415 deletions
components/vendor/ActivityDetails.js
...@@ -10,12 +10,22 @@ import { getLoggedInVendor, pincodeSearchByFilter } from "../../redux/actions/ve ...@@ -10,12 +10,22 @@ import { getLoggedInVendor, pincodeSearchByFilter } from "../../redux/actions/ve
import { AsyncTypeahead } from "react-bootstrap-typeahead"; import { AsyncTypeahead } from "react-bootstrap-typeahead";
import Select from "react-select"; import Select from "react-select";
import makeAnimated from "react-select/animated"; import makeAnimated from "react-select/animated";
import { Select as AntSelect } from "antd"; import { Select as AntSelect, Switch } from "antd";
// import { getMasterDays } from "../../redux/actions/activityAction"; // import { getMasterDays } from "../../redux/actions/activityAction";
import axios from "axios"; import axios from "axios";
import { sanitizeTimeFormat } from "../../services/imageHandling"; import { sanitizeTimeFormat, sanitizeTimeRange } from "../../services/imageHandling";
import { createActivity } from "../../redux/actions/activityAction"; import { createActivity, updateActivityById } from "../../redux/actions/activityAction";
import { toast } from "react-toastify"; import { toast } from "react-toastify";
import { DatePicker, Space } from "antd";
import dayjs from "dayjs";
import customParseFormat from "dayjs/plugin/customParseFormat";
import LazyLoad from "react-lazyload";
import { ArrowLeftOutlined } from "@ant-design/icons";
import { useRouter } from "next/router";
dayjs.extend(customParseFormat);
const { RangePicker } = DatePicker;
const dateFormat = "YYYY/MM/DD";
const format = "HH:mm"; const format = "HH:mm";
let timeArray = []; let timeArray = [];
...@@ -113,12 +123,17 @@ const monthsArray = [ ...@@ -113,12 +123,17 @@ const monthsArray = [
// import { colourOptions } from '../data'; // import { colourOptions } from '../data';
const animatedComponents = makeAnimated(); const animatedComponents = makeAnimated();
const ActivityDetails = () => { const ActivityDetails = ({ isUpdate }) => {
const dispatch = useDispatch(); const dispatch = useDispatch();
const { categories } = useSelector(state => state.categories); const { categories } = useSelector(state => state.categories);
const { subCategories } = useSelector(state => state.subCategories); const { subCategories } = useSelector(state => state.subCategories);
const { loggedInVendor } = useSelector(state => state.loggedInVendor); const { loggedInVendor } = useSelector(state => state.loggedInVendor);
const { activityById } = useSelector(state => state.activityById);
console.log("activityById", activityById);
const currentDate = new Date();
const sanitizedCurrentDate = sanitizeTimeRange({ data: { $d: currentDate } });
// console.log("current date", sanitizedCurrentDate);
const router = useRouter();
let categoryRef = useRef(); let categoryRef = useRef();
let timeLines; let timeLines;
const activityDetailsValidationSchema = Yup.object().shape({ const activityDetailsValidationSchema = Yup.object().shape({
...@@ -139,7 +154,7 @@ const ActivityDetails = () => { ...@@ -139,7 +154,7 @@ const ActivityDetails = () => {
months: Yup.array(), months: Yup.array(),
minDuration: Yup.string().required("Min Duration is Required"), minDuration: Yup.string().required("Min Duration is Required"),
maxDuration: Yup.string().required("Max Duration is Required"), maxDuration: Yup.string().required("Max Duration is Required"),
durationUnit: Yup.string().required("Duration Unit is Required"), durationUnit: Yup.string().required("This is a required field"),
ageGroup: Yup.string().required("Age Group is Required"), ageGroup: Yup.string().required("Age Group is Required"),
linkOfBooking: Yup.string().required("Link of Booking is Required"), linkOfBooking: Yup.string().required("Link of Booking is Required"),
activityImages: Yup.array(), activityImages: Yup.array(),
...@@ -147,14 +162,28 @@ const ActivityDetails = () => { ...@@ -147,14 +162,28 @@ const ActivityDetails = () => {
countryCode: Yup.string(), countryCode: Yup.string(),
contactNumberForBooking: Yup.string().required("Number is a required field"), contactNumberForBooking: Yup.string().required("Number is a required field"),
cancellationPolicyFile: Yup.string(), cancellationPolicyFile: Yup.string(),
termsConditionsFile: Yup.string() termsConditionsFile: Yup.string(),
activityPeriod: Yup.array().required("Please mention both dates!")
// availableOnMonday: Yup.bool()
}); });
const [pincodeData, setPinCodeData] = useState(); const [pincodeData, setPinCodeData] = useState();
const [activeDays, setActiveDays] = useState(); const [activeDays, setActiveDays] = useState();
const [minDisabled, setMinDisabled] = useState(true); // const [minDisabled, setMinDisabled] = useState(true);
const [months, setMonths] = useState(true); // const [months, setMonths] = useState(true);
const [masterDays, setMasterDays] = useState(); const [masterDays, setMasterDays] = useState();
const [timeSlotError, setTimeSlotError] = useState(); // const [timeSlotError, setTimeSlotError] = useState();
const [activityPeriodState, setActivityPeriodState] = useState([]);
const [startDate, setStartDate] = useState();
const [endDate, setEndDate] = useState();
const [daysBoolean, setDaysBoolean] = useState({
availableOnMonday: false,
availableOnTuesday: false,
availableOnWednesday: false,
availableOnThursday: false,
availableOnFriday: false,
availableOnSaturday: false,
availableOnSunday: false
});
// const [timeArray, setTimeArray] = useState([]); // const [timeArray, setTimeArray] = useState([]);
console.log("loggedInVendor", loggedInVendor); console.log("loggedInVendor", loggedInVendor);
// const [timeLines, setTimeLines] = useState() // const [timeLines, setTimeLines] = useState()
...@@ -186,42 +215,68 @@ const ActivityDetails = () => { ...@@ -186,42 +215,68 @@ const ActivityDetails = () => {
useEffect(() => { useEffect(() => {
dispatch(getLoggedInVendor()); dispatch(getLoggedInVendor());
}, []); }, []);
useEffect(() => {
if (isUpdate) {
ref.current.state.selected = [{ id: activityById?.data.attributes?.masterPincode.data.id, name: activityById?.data.attributes?.masterPincode.data.attributes.name }];
setDaysBoolean({
availableOnSunday: activityById?.data.attributes.availableOnSunday ? activityById?.data.attributes.availableOnSunday : "",
availableOnMonday: activityById?.data.attributes.availableOnMonday ? activityById?.data.attributes.availableOnMonday : "",
availableOnTuesday: activityById?.data.attributes.availableOnTuesday ? activityById?.data.attributes.availableOnTuesday : "",
availableOnWednesday: activityById?.data.attributes.availableOnWednesday ? activityById?.data.attributes.availableOnWednesday : "",
availableOnThursday: activityById?.data.attributes.availableOnThursday ? activityById?.data.attributes.availableOnThursday : "",
availableOnFriday: activityById?.data.attributes.availableOnFriday ? activityById?.data.attributes.availableOnFriday : "",
availableOnSaturday: activityById?.data.attributes.availableOnSaturday ? activityById?.data.attributes.availableOnSaturday : ""
});
setStartDate(activityById?.data.attributes.fromDate);
setEndDate(activityById?.data.attributes.toDate);
}
}, []);
// useEffect(() => {
// dispatch(updateActivityById(8))
// }, [])
// console.log("masterDays", masterDays); // console.log("masterDays", masterDays);
console.log("activityPeriodState", activityPeriodState);
return ( return (
<Fragment> <Fragment>
<div className="container p-1"> <div className="container p-1">
<div className="row"> <div className="row">
<div className="col-12 col-lg-8"> <div className="col-12 col-lg-8">
<div className="content-div business-details"> <div className="content-div business-details">
{isUpdate ? <h2>{activityById?.data.attributes.name}</h2> : <div>Add Details</div>}
<div className="form-container"> <div className="form-container">
<Formik <Formik
enableReinitialize
initialValues={{ initialValues={{
category: "", category: activityById?.data.attributes?.subCategory?.data?.attributes?.category?.data?.attributes?.name
subCategory: "", ? activityById?.data.attributes?.subCategory?.data?.attributes?.category?.data?.attributes?.name
activityName: "", : "",
activityDescription: "", subCategory: activityById?.data.attributes?.subCategory?.data?.attributes.name ? activityById?.data.attributes?.subCategory?.data?.attributes.name : "",
activityName: activityById?.data.attributes.name ? activityById?.data.attributes.name : "",
activityDescription: activityById?.data.attributes?.description ? activityById?.data.attributes?.description : "",
location: "", location: "",
addressLine1: "", addressLine1: activityById?.data.attributes.address ? activityById?.data.attributes.address : "",
addressLine2: "", addressLine2: "",
pricePerPerson: "", pricePerPerson: activityById?.data.attributes.pricePerPerson ? activityById?.data.attributes.pricePerPerson : "",
giftingToSomeone: "", giftingToSomeone: activityById?.data.attributes.giftSomeone ? activityById?.data.attributes.giftSomeone : "",
place: "", place: activityById?.data.attributes.activityType ? activityById?.data.attributes.activityType : "",
contactPersonForActivity: "", contactPersonForActivity: activityById?.data.attributes.activityType ? activityById?.data.attributes.activityType : "",
minGroupSize: "", minGroupSize: activityById?.data.attributes.minGroupSize ? activityById?.data.attributes.minGroupSize : "",
maxGroupSize: "", maxGroupSize: activityById?.data.attributes.maxGroupSize ? activityById?.data.attributes.maxGroupSize : "",
months: [], months: [],
minDuration: "", minDuration: activityById?.data.attributes.minimumDuration ? activityById?.data.attributes.minimumDuration : "",
maxDuration: "", maxDuration: activityById?.data.attributes.maximumDuration ? activityById?.data.attributes.maximumDuration : "",
durationUnit: "", durationUnit: "",
ageGroup: "", ageGroup: activityById?.data.attributes.ageLowerLimit ? activityById?.data.attributes.ageLowerLimit : "",
linkOfBooking: "", linkOfBooking: activityById?.data.attributes.link ? activityById?.data.attributes.link : "",
activityImages: [], activityImages: [],
contactPersonForBooking: "", contactPersonForBooking: activityById?.data.attributes.contactPersonForBooking ? activityById?.data.attributes.contactPersonForBooking : "",
countryCode: "", countryCode: "",
contactNumberForBooking: "", contactNumberForBooking: "",
cancellationPolicyFile: "", cancellationPolicyFile: "",
termsConditionsFile: "" termsConditionsFile: "",
activityPeriod: [],
activityType: activityById?.data.attributes.activityType ? activityById?.data.attributes.activityType : ""
}} }}
validationSchema={activityDetailsValidationSchema} validationSchema={activityDetailsValidationSchema}
// enableReinitialize={true} // enableReinitialize={true}
...@@ -232,28 +287,54 @@ const ActivityDetails = () => { ...@@ -232,28 +287,54 @@ const ActivityDetails = () => {
onSubmit={async e => { onSubmit={async e => {
e.preventDefault(); e.preventDefault();
console.log("activity details values", values); console.log("activity details values", values);
let timeSlots = []; if (
timeSlots = timeArray.map(item => { !(
console.log("sanitizeTimeFormat({ data: item })", sanitizeTimeFormat({ data: item })); daysBoolean.availableOnMonday ||
if (!sanitizeTimeFormat({ data: item })) { daysBoolean.availableOnTuesday ||
console.log("sanitize 1", sanitizeTimeFormat({ data: item })); daysBoolean.availableOnWednesday ||
toast.error("Time slots can not be empty!"); daysBoolean.availableOnThursday ||
setTimeSlotError(true); daysBoolean.availableOnFriday ||
daysBoolean.availableOnSaturday ||
daysBoolean.availableOnSunday
)
) {
toast.error("Please select days you will be active on");
return; return;
} }
console.log("sanitize 2", sanitizeTimeFormat({ data: item })); let fromDate;
timeSlots = [...timeSlots, sanitizeTimeFormat({ data: item })]; let toDate;
return sanitizeTimeFormat({ data: item }); console.log("timeslots", activityPeriodState);
}); if (!startDate || !endDate) {
if (timeSlotError) { fromDate = sanitizeTimeRange({ data: activityPeriodState[0] });
toDate = sanitizeTimeRange({ data: activityPeriodState[1] });
if (!activityPeriodState || !activityPeriodState.length > 0) {
// 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 });
// });
toast.error("Please select time range");
return; return;
} }
} else if (startDate && endDate) {
fromDate = startDate;
toDate = endDate;
}
handleSubmit(); handleSubmit();
console.log("timeslots", timeSlots);
values = { values = {
...values, ...values,
timeSlots, // timeSlots,
months, // months,
pincode: ref.current.state.selected[0], pincode: ref.current.state.selected[0],
vendor: loggedInVendor, vendor: loggedInVendor,
name: values.activityName, name: values.activityName,
...@@ -264,23 +345,34 @@ const ActivityDetails = () => { ...@@ -264,23 +345,34 @@ const ActivityDetails = () => {
ageLowerLimit: values.ageGroup, ageLowerLimit: values.ageGroup,
phoneNumber: values.contactNumberForBooking, phoneNumber: values.contactNumberForBooking,
link: values.linkOfBooking, link: values.linkOfBooking,
giftSomeone: values.giftingToSomeone giftSomeone: values.giftingToSomeone,
fromDate,
toDate,
daysBoolean,
contactPersonForActivity: values.contactPersonForActivity,
duration: values.durationUnit.toString()
}; };
console.log("values 123", values); console.log("values 123", values);
if (isUpdate) {
console.log("router", router);
const updateRes = await dispatch(updateActivityById({ activityId: router.query.id, updatedData: values }));
console.log("updateRes", updateRes);
}
if (!isUpdate) {
const res = await dispatch(createActivity(values)); const res = await dispatch(createActivity(values));
console.log("res", res); console.log("res", res);
if (res.success) { if (res.success) {
toast.success("Activity added successfully!"); toast.success("Activity added successfully!");
resetForm(); resetForm();
setActiveDays([]); setActiveDays([]);
setMonths([]); // setMonths([]);
}
} }
}} }}
> >
<div className="activityDetails"> <div className="activityDetails">
<div> <div>
<div className="mt-4"> <div className="mt-4">
{/* <p className="textH">Basic Details</p> */}
<div className="d-flex justify-content-between"> <div className="d-flex justify-content-between">
<p className="textH">Basic Details</p> <p className="textH">Basic Details</p>
</div> </div>
...@@ -311,15 +403,12 @@ const ActivityDetails = () => { ...@@ -311,15 +403,12 @@ const ActivityDetails = () => {
</option> </option>
); );
})} })}
{/* <option value="Category 2">Category 2</option> */}
</select> </select>
{touched.category && errors.category && ( {touched.category && errors.category && (
<span className="form-error" style={{ color: "red", fontSize: "10px" }}> <span className="form-error" style={{ color: "red", fontSize: "10px" }}>
{errors.category} {errors.category}
</span> </span>
)} )}
{/* <ErrorMessage name="category" component="div" className="form-error" /> */}
</div> </div>
</div> </div>
<div className="col-12 col-lg-6"> <div className="col-12 col-lg-6">
...@@ -342,7 +431,6 @@ const ActivityDetails = () => { ...@@ -342,7 +431,6 @@ const ActivityDetails = () => {
{errors.subCategory} {errors.subCategory}
</span> </span>
)} )}
{/* <ErrorMessage name={`subCategory`} component="div" className="form-error" /> */}
</div> </div>
</div> </div>
</div> </div>
...@@ -356,7 +444,6 @@ const ActivityDetails = () => { ...@@ -356,7 +444,6 @@ const ActivityDetails = () => {
{errors.activityName} {errors.activityName}
</span> </span>
)} )}
{/* <ErrorMessage name={`activityName`} component="div" className="form-error" /> */}
</div> </div>
</div> </div>
<div className="col-12 col-lg-6"> <div className="col-12 col-lg-6">
...@@ -368,7 +455,6 @@ const ActivityDetails = () => { ...@@ -368,7 +455,6 @@ const ActivityDetails = () => {
{errors.activityDescription} {errors.activityDescription}
</span> </span>
)} )}
{/* <ErrorMessage name={`activityDescription`} component="div" className="form-error" /> */}
</div> </div>
</div> </div>
</div> </div>
...@@ -403,13 +489,6 @@ const ActivityDetails = () => { ...@@ -403,13 +489,6 @@ const ActivityDetails = () => {
// handleChange(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={`location`} component="div" className="form-error" /> */}
</div> </div>
</div> </div>
<div className="col-12 col-lg-6"> <div className="col-12 col-lg-6">
...@@ -421,7 +500,6 @@ const ActivityDetails = () => { ...@@ -421,7 +500,6 @@ const ActivityDetails = () => {
{errors.pricePerPerson} {errors.pricePerPerson}
</span> </span>
)} )}
{/* <ErrorMessage name={`pricePerPerson`} component="div" className="form-error" /> */}
</div> </div>
</div> </div>
</div> </div>
...@@ -435,19 +513,12 @@ const ActivityDetails = () => { ...@@ -435,19 +513,12 @@ const ActivityDetails = () => {
{errors.addressLine1} {errors.addressLine1}
</span> </span>
)} )}
{/* <ErrorMessage name={`addressLine1`} component="div" className="form-error" /> */}
</div> </div>
</div> </div>
<div className="col-12 col-lg-6"> <div className="col-12 col-lg-6">
<div className="input-group"> <div className="input-group">
<label>Address Line 2</label> <label>Address Line 2</label>
<input type="text" name={`addressLine2`} onChange={handleChange} onBlur={handleBlur} value={values.addressLine2} /> <input 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> </div>
</div> </div>
...@@ -471,13 +542,11 @@ const ActivityDetails = () => { ...@@ -471,13 +542,11 @@ const ActivityDetails = () => {
</span> </span>
)} )}
</div> </div>
{/* <ErrorMessage name={`giftingToSomeone`} component="div" className="form-error" /> */}
</div> </div>
</div> </div>
<div className="col-12 col-lg-6"> <div className="col-12 col-lg-6">
<div className="input-group mb-2"> <div className="input-group mb-2">
<label>Place</label> <label>Activity Type</label>
<div className="row"> <div className="row">
<div className=""> <div className="">
<div className="col-12 col-lg-12"> <div className="col-12 col-lg-12">
...@@ -496,7 +565,6 @@ const ActivityDetails = () => { ...@@ -496,7 +565,6 @@ const ActivityDetails = () => {
)} )}
</div> </div>
</div> </div>
{/* <ErrorMessage name={`place`} component="div" className="form-error" /> */}
</div> </div>
</div> </div>
</div> </div>
...@@ -514,7 +582,6 @@ const ActivityDetails = () => { ...@@ -514,7 +582,6 @@ const ActivityDetails = () => {
{errors.contactPersonForActivity} {errors.contactPersonForActivity}
</span> </span>
)} )}
{/* <ErrorMessage name={`contactPersonForActivity`} component="div" className="form-error" /> */}
</div> </div>
</div> </div>
<div className="col-12 col-lg-6"> <div className="col-12 col-lg-6">
...@@ -528,7 +595,6 @@ const ActivityDetails = () => { ...@@ -528,7 +595,6 @@ const ActivityDetails = () => {
{errors.minGroupSize} {errors.minGroupSize}
</span> </span>
)} )}
{/* <ErrorMessage name={`minGroupSize`} component="div" className="form-error" /> */}
</div> </div>
<div className="col-6 col-lg-5"> <div className="col-6 col-lg-5">
<input type="text" placeholder="Max." name={`maxGroupSize`} onChange={handleChange} onBlur={handleBlur} value={values.maxGroupSize} /> <input type="text" placeholder="Max." name={`maxGroupSize`} onChange={handleChange} onBlur={handleBlur} value={values.maxGroupSize} />
...@@ -537,7 +603,6 @@ const ActivityDetails = () => { ...@@ -537,7 +603,6 @@ const ActivityDetails = () => {
{errors.maxGroupSize} {errors.maxGroupSize}
</span> </span>
)} )}
{/* <ErrorMessage name={`maxGroupSize`} component="div" className="form-error" /> */}
</div> </div>
</div> </div>
</div> </div>
...@@ -548,323 +613,234 @@ const ActivityDetails = () => { ...@@ -548,323 +613,234 @@ const ActivityDetails = () => {
<div className="mt-4"> <div className="mt-4">
<p className="textH">Availability</p> <p className="textH">Availability</p>
<div className="row"> <div className="row">
<div className="col-md-6 "> <div className="col-md-12 ">
<div className="input-group"> <div className="input-group">
<label>Months</label> <span className="col-md-12 my-1">Start date and end date of the activity:</span>
<Select <LazyLoad>
className="multi-select" {isUpdate ? (
closeMenuOnSelect={false} <RangePicker
// value={values.months} id="activityPeriod"
components={animatedComponents} name="activityPeriod"
onBlur={handleBlur} defaultValue={[
isMulti dayjs(activityById?.data.attributes.fromDate ? activityById?.data.attributes.fromDate : sanitizedCurrentDate, dateFormat),
id={`months`} dayjs(activityById?.data.attributes.toDate ? activityById?.data.attributes.toDate : sanitizedCurrentDate, dateFormat)
name={`months`} ]}
format={dateFormat}
onBlur={() => {
if (true) {
}
}}
onChange={e => {
console.log("change", e);
setActivityPeriodState(e);
// handleChange(e);
}}
/>
) : (
<RangePicker
id="activityPeriod"
name="activityPeriod"
format={dateFormat}
onBlur={() => {
if (true) {
}
}}
onChange={e => { onChange={e => {
console.log(e); console.log("change", e);
// handleChange(e) setActivityPeriodState(e);
setMonths(e); // handleChange(e);
}} }}
options={monthsArray}
// value={values.months}
/> />
{/* {touched.months && errors.months && ( )}
</LazyLoad>
{touched.activityPeriod && errors.activityPeriod && (
<span className="form-error" style={{ color: "red", fontSize: "10px" }}> <span className="form-error" style={{ color: "red", fontSize: "10px" }}>
{errors.months} {errors.activityPeriod}
</span> </span>
)} */} )}
{/* <ErrorMessage name={`months`} component="div" className="form-error" /> */}
</div> </div>
</div> </div>
<div className="col-md-6 "> <div className="col-md-12 ">
<div className="input-group"> <div className="row">
<label>Day & Time</label> <label>Active on days:</label>
<Select <div className="col-6 my-2">
className="multi-select" <div className="d-flex">
closeMenuOnSelect={true} <span className="col-md-6">Select all:</span>
components={animatedComponents} <Switch
isMulti // style={{ backgroundColor: "green" }}
id={`dayTime`} className="col-md-4"
name={`dayTime`} value={
onChange={e => { daysBoolean.availableOnMonday &&
console.log("days", e); daysBoolean.availableOnTuesday &&
setActiveDays(e); daysBoolean.availableOnWednesday &&
timeArray.length > 0 && daysBoolean.availableOnThursday &&
timeArray.map((item, index) => { daysBoolean.availableOnFriday &&
// item.day -> active days daysBoolean.availableOnSaturday &&
daysBoolean.availableOnSunday
if (!e.map(j => j.value).includes(item.day)) {
return timeArray.splice(index, 1);
} }
id={"availableOnMonday"}
name="availableOnMonday"
onChange={e => {
setDaysBoolean({
availableOnMonday: e,
availableOnTuesday: e,
availableOnWednesday: e,
availableOnThursday: e,
availableOnFriday: e,
availableOnSaturday: e,
availableOnSunday: e
}); });
console.log("time final", timeArray); // setDaysBoolean({ ...daysBoolean, availableOnMonday: e });
// console.log("availableOnMonday", daysBoolean);
}} }}
options={ checkedChildren="Active"
// masterDays && unCheckedChildren="Not Active"
// 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}> </div>
<option value="">Select</option> </div>
<option value="Location 1">Location 1</option> <div className="col-6 my-2">
<option value="Location 2">Location 2</option> <div className="d-flex">
</select> */} <span className="col-md-6">Monday:</span>
{/* <ErrorMessage name={`dayTime`} component="div" className="form-error" /> */} <Switch
{/* {console.log("time Array", timeArray)} */} className="col-md-4"
<div> value={daysBoolean.availableOnMonday}
{activeDays && id={"availableOnMonday"}
activeDays.length > 0 && name="availableOnMonday"
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 => { onChange={e => {
setTimeSlotError(false); setDaysBoolean({ ...daysBoolean, availableOnMonday: e });
let stop = false; console.log("availableOnMonday", daysBoolean);
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} checkedChildren="Active"
unCheckedChildren="Not Active"
/> />
: </div>
<AntSelect </div>
disabled={minDisabled} <div className="col-6 my-2">
className="col-md-3" <div className="d-flex">
placeholder="minutes" <span className="col-md-6">Tuesday:</span>
<Switch
className="col-md-4"
value={daysBoolean.availableOnTuesday}
onChange={e => { onChange={e => {
setTimeSlotError(false); setDaysBoolean({ ...daysBoolean, availableOnTuesday: e });
if (!timeArray || !timeArray.length > 0) { // console.log("availableOnTuesday", daysBoolean);
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} id={"availableOnTuesday"}
// onChange={handleChange}
checkedChildren="Active"
unCheckedChildren="Not Active"
/> />
<AntSelect </div>
className="col-md-3 " </div>
placeholder="select" <div className="col-6 my-2">
options={[ <div className="d-flex">
{ value: "am", label: "AM" }, <span className="col-md-6">Wednesday:</span>
{ value: "pm", label: "PM" } <Switch
]} className="col-md-4"
value={daysBoolean.availableOnWednesday}
id={"availableOnWednesday"}
// onChange={handleChange}
onChange={e => { onChange={e => {
setTimeSlotError(false); setDaysBoolean({ ...daysBoolean, availableOnWednesday: e });
if (!timeArray || !timeArray.length > 0) { // console.log("availableOnTuesday", daysBoolean);
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);
}} }}
checkedChildren="Active"
unCheckedChildren="Not Active"
/> />
<div className="col-md-2">To</div> </div>
<AntSelect </div>
<div className="col-6 my-2">
<div className="d-flex">
<span className="col-md-6">Thursday:</span>
<Switch
className="col-md-4"
value={daysBoolean.availableOnThursday}
id={"availableOnThursday"}
onChange={e => { onChange={e => {
setTimeSlotError(false); setDaysBoolean({ ...daysBoolean, availableOnThursday: e });
let stop = false; // console.log("availableOnTuesday", daysBoolean);
// 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" checkedChildren="Active"
placeholder="hours" unCheckedChildren="Not Active"
options={hoursArray}
/> />
: </div>
<AntSelect </div>
<div className="col-6 my-2">
<div className="d-flex">
<span className="col-md-6">Friday:</span>
<Switch
className="col-md-4"
value={daysBoolean.availableOnFriday}
id={"availableOnFriday"}
onChange={e => { onChange={e => {
setTimeSlotError(false); setDaysBoolean({ ...daysBoolean, availableOnFriday: e });
if (!timeArray || !timeArray.length > 0) { // console.log("availableOnTuesday", daysBoolean);
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" checkedChildren="Active"
placeholder="minutes" unCheckedChildren="Not Active"
options={minutesArray}
/> />
<AntSelect </div>
</div>
<div className="col-6 my-2">
<div className="d-flex">
<span className="col-md-6">Saturday:</span>
<Switch
className="col-md-4"
value={daysBoolean.availableOnSaturday}
id={"availableOnSaturday"}
onChange={e => { onChange={e => {
setTimeSlotError(false); setDaysBoolean({ ...daysBoolean, availableOnSaturday: e });
if (!timeArray || !timeArray.length > 0) { // console.log("availableOnTuesday", daysBoolean);
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 " checkedChildren="Active"
placeholder="select" unCheckedChildren="Not Active"
options={[
{ value: "am", label: "AM" },
{ value: "pm", label: "PM" }
]}
/> />
<br />
<br />
<hr />
</div> </div>
); </div>
})} <div className="col-6 my-2">
<div className="d-flex">
<span className="col-md-6">Sunday:</span>
<Switch
className="col-md-4"
value={daysBoolean.availableOnSunday}
id={"availableOnSunday"}
onChange={e => {
setDaysBoolean({ ...daysBoolean, availableOnSunday: e });
// console.log("availableOnTuesday", daysBoolean);
}}
checkedChildren="Active"
unCheckedChildren="Not Active"
/>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div className="row"> </div>
<div className="row mt-5">
<div className="col-12 col-lg-6"> <div className="col-12 col-lg-6">
<div className="input-group"> <div className="input-group">
<label>Duration</label>
<div className="row"> <div className="row">
<div className="col-2 col-lg-4">
<label>Total duration (in Mins)</label>
<input type="number" id="durationUnit" name="durationUnit" onChange={handleChange} onBlur={handleBlur} style={{ width: "100%" }}></input>
{errors.durationUnit && touched.durationUnit && <span className="form-error">{errors.durationUnit}</span>}
</div>
<div className="col-5 col-lg-4"> <div className="col-5 col-lg-4">
<select id="minDuration" name="minDuration" onChange={handleChange} onBlur={handleBlur}> <label>Minimum duration</label>
<option value="min">Min</option> <input id="minDuration" name="minDuration" onChange={handleChange} onBlur={handleBlur}></input>
<option value="min">Min</option>
</select>
{touched.minDuration && errors.minDuration && ( {touched.minDuration && errors.minDuration && (
<span className="form-error" style={{ color: "red", fontSize: "10px" }}> <span className="form-error" style={{ color: "red", fontSize: "10px" }}>
{errors.minDuration} {errors.minDuration}
</span> </span>
)} )}
</div> </div>
<div className="col-5 col-lg-4">
<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>}
</div>
<div className="col-2 col-lg-4"> <div className="col-2 col-lg-4">
<select id="durationUnit" name="durationUnit" onChange={handleChange} onBlur={handleBlur}> <label>Minimum duration</label>
<option value="Hrs">Hrs</option> <input id="maxDuration" name="maxDuration" onChange={handleChange} onBlur={handleBlur} style={{ width: "100%" }}></input>
<option value="Mins">Mins</option> {errors.maxDuration && touched.maxDuration && <span className="form-error">{errors.maxDuration}</span>}
</select>
{errors.durationUnit && touched.durationUnit && <span className="form-error">{errors.durationUnit}</span>}
</div> </div>
</div> </div>
</div> </div>
...@@ -882,7 +858,6 @@ const ActivityDetails = () => { ...@@ -882,7 +858,6 @@ const ActivityDetails = () => {
{errors.ageGroup} {errors.ageGroup}
</span> </span>
)} )}
{/* <ErrorMessage name={"ageGroup"} component="div" className="form-error" /> */}
</div> </div>
</div> </div>
</div> </div>
...@@ -900,7 +875,6 @@ const ActivityDetails = () => { ...@@ -900,7 +875,6 @@ const ActivityDetails = () => {
{errors.linkOfBooking} {errors.linkOfBooking}
</span> </span>
)} )}
{/* <ErrorMessage name={`linkOfBooking`} component="div" className="form-error" /> */}
</div> </div>
</div> </div>
</div> </div>
...@@ -914,7 +888,6 @@ const ActivityDetails = () => { ...@@ -914,7 +888,6 @@ const ActivityDetails = () => {
{errors.contactPersonForBooking} {errors.contactPersonForBooking}
</span> </span>
)} )}
{/* <ErrorMessage name={`contactPersonForBooking`} component="div" className="form-error" /> */}
</div> </div>
</div> </div>
<div className="col-12 col-lg-6"> <div className="col-12 col-lg-6">
...@@ -932,7 +905,6 @@ const ActivityDetails = () => { ...@@ -932,7 +905,6 @@ const ActivityDetails = () => {
{errors.contactNumberForBooking} {errors.contactNumberForBooking}
</span> </span>
)} )}
{/* <ErrorMessage name={`contactNumberForBooking`} component="div" className="form-error" /> */}
</div> </div>
</div> </div>
</div> </div>
...@@ -966,7 +938,6 @@ const ActivityDetails = () => { ...@@ -966,7 +938,6 @@ const ActivityDetails = () => {
Upload Upload
</label> </label>
</div> </div>
{/* <ErrorMessage name={`cancellationPolicyFile`} component="div" className="form-error" /> */}
{values.cancellationPolicyFile && ( {values.cancellationPolicyFile && (
<div className="d-flex align-items-center justify-content-between p-1" style={{ width: "100%" }}> <div className="d-flex align-items-center justify-content-between p-1" style={{ width: "100%" }}>
<p className="textS m-0">{values.cancellationPolicyFile.name}</p> <p className="textS m-0">{values.cancellationPolicyFile.name}</p>
...@@ -1005,7 +976,6 @@ const ActivityDetails = () => { ...@@ -1005,7 +976,6 @@ const ActivityDetails = () => {
Upload Upload
</label> </label>
</div> </div>
{/* <ErrorMessage name={`termsConditionsFile`} component="div" className="form-error" /> */}
{values.termsConditionsFile && ( {values.termsConditionsFile && (
<div className="d-flex align-items-center justify-content-between p-1" style={{ width: "100%" }}> <div className="d-flex align-items-center justify-content-between p-1" style={{ width: "100%" }}>
<p className="textS m-0">{values.termsConditionsFile.name}</p> <p className="textS m-0">{values.termsConditionsFile.name}</p>
...@@ -1028,7 +998,6 @@ const ActivityDetails = () => { ...@@ -1028,7 +998,6 @@ const ActivityDetails = () => {
<Button type="submit" className="btn btn-primary btn-submit"> <Button type="submit" className="btn btn-primary btn-submit">
Submit Submit
</Button> </Button>
{/* <button type="submit" onClick={handleSubmit}>submit</button> */}
</div> </div>
</div> </div>
</div> </div>
......
components/vendor/ActivityListingRBAC.js
...@@ -2,16 +2,15 @@ import React, { useEffect, useRef, useState } from "react"; ...@@ -2,16 +2,15 @@ import React, { useEffect, useRef, useState } from "react";
import { Button, Input, Space, Table } from "antd"; import { Button, Input, Space, Table } from "antd";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
import Highlighter from "react-highlight-words"; import Highlighter from "react-highlight-words";
import { SearchOutlined } from "@ant-design/icons"; import { DeleteTwoTone, EditTwoTone, SearchOutlined } from "@ant-design/icons";
import { useRouter } from "next/router";
const onChange = (pagination, filters, sorter, extra) => { const onChange = (pagination, filters, sorter, extra) => {
console.log("params", pagination, filters, sorter, extra); console.log("params", pagination, filters, sorter, extra);
}; };
export const ActivityListingRBAC = () => { export const ActivityListingRBAC = () => {
const router = useRouter()
// let columns = [] // let columns = []
// useSelectors // useSelectors
const { allActivitiesData } = useSelector(state => state.allActivitiesData); const { allActivitiesData } = useSelector(state => state.allActivitiesData);
...@@ -23,8 +22,8 @@ export const ActivityListingRBAC = () => { ...@@ -23,8 +22,8 @@ export const ActivityListingRBAC = () => {
const [columns, setcolumns] = useState([]); const [columns, setcolumns] = useState([]);
const [data, setdata] = useState([]); const [data, setdata] = useState([]);
const [searchText, setSearchText] = useState(''); const [searchText, setSearchText] = useState("");
const [searchedColumn, setSearchedColumn] = useState(''); const [searchedColumn, setSearchedColumn] = useState("");
// functions // functions
const onSelectChange = newSelectedRowKeys => { const onSelectChange = newSelectedRowKeys => {
...@@ -38,27 +37,27 @@ export const ActivityListingRBAC = () => { ...@@ -38,27 +37,27 @@ export const ActivityListingRBAC = () => {
setSearchText(selectedKeys[0]); setSearchText(selectedKeys[0]);
setSearchedColumn(dataIndex); setSearchedColumn(dataIndex);
}; };
const handleReset = (clearFilters) => { const handleReset = clearFilters => {
clearFilters(); clearFilters();
setSearchText(''); setSearchText("");
}; };
const getColumnSearchProps = (dataIndex) => ({ const getColumnSearchProps = dataIndex => ({
filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters, close }) => ( filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters, close }) => (
<div <div
style={{ style={{
padding: 8, padding: 8
}} }}
onKeyDown={(e) => e.stopPropagation()} onKeyDown={e => e.stopPropagation()}
> >
<Input <Input
ref={searchInput} ref={searchInput}
placeholder={`Search ${dataIndex}`} placeholder={`Search ${dataIndex}`}
value={selectedKeys[0]} value={selectedKeys[0]}
onChange={(e) => setSelectedKeys(e.target.value ? [e.target.value] : [])} onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
onPressEnter={() => handleSearch(selectedKeys, confirm, dataIndex)} onPressEnter={() => handleSearch(selectedKeys, confirm, dataIndex)}
style={{ style={{
marginBottom: 8, marginBottom: 8,
display: 'block', display: "block"
}} }}
/> />
<Space> <Space>
...@@ -68,7 +67,7 @@ export const ActivityListingRBAC = () => { ...@@ -68,7 +67,7 @@ export const ActivityListingRBAC = () => {
icon={<SearchOutlined />} icon={<SearchOutlined />}
size="small" size="small"
style={{ style={{
width: 90, width: 90
}} }}
> >
Search Search
...@@ -77,7 +76,7 @@ export const ActivityListingRBAC = () => { ...@@ -77,7 +76,7 @@ export const ActivityListingRBAC = () => {
onClick={() => clearFilters && handleReset(clearFilters)} onClick={() => clearFilters && handleReset(clearFilters)}
size="small" size="small"
style={{ style={{
width: 90, width: 90
}} }}
> >
Reset Reset
...@@ -87,7 +86,7 @@ export const ActivityListingRBAC = () => { ...@@ -87,7 +86,7 @@ export const ActivityListingRBAC = () => {
size="small" size="small"
onClick={() => { onClick={() => {
confirm({ confirm({
closeDropdown: false, closeDropdown: false
}); });
setSearchText(selectedKeys[0]); setSearchText(selectedKeys[0]);
setSearchedColumn(dataIndex); setSearchedColumn(dataIndex);
...@@ -107,34 +106,33 @@ export const ActivityListingRBAC = () => { ...@@ -107,34 +106,33 @@ export const ActivityListingRBAC = () => {
</Space> </Space>
</div> </div>
), ),
filterIcon: (filtered) => ( filterIcon: filtered => (
<SearchOutlined <SearchOutlined
style={{ style={{
color: filtered ? '#1677ff' : undefined, color: filtered ? "#1677ff" : undefined
}} }}
/> />
), ),
onFilter: (value, record) => onFilter: (value, record) => record[dataIndex].toString().toLowerCase().includes(value.toLowerCase()),
record[dataIndex].toString().toLowerCase().includes(value.toLowerCase()), onFilterDropdownOpenChange: visible => {
onFilterDropdownOpenChange: (visible) => {
if (visible) { if (visible) {
setTimeout(() => searchInput.current?.select(), 100); setTimeout(() => searchInput.current?.select(), 100);
} }
}, },
render: (text) => render: text =>
searchedColumn === dataIndex ? ( searchedColumn === dataIndex ? (
<Highlighter <Highlighter
highlightStyle={{ highlightStyle={{
backgroundColor: '#ffc069', backgroundColor: "#ffc069",
padding: 0, padding: 0
}} }}
searchWords={[searchText]} searchWords={[searchText]}
autoEscape autoEscape
textToHighlight={text ? text.toString() : ''} textToHighlight={text ? text.toString() : ""}
/> />
) : ( ) : (
text text
), )
}); });
// useEffects // useEffects
...@@ -183,7 +181,7 @@ export const ActivityListingRBAC = () => { ...@@ -183,7 +181,7 @@ export const ActivityListingRBAC = () => {
title: "Name", title: "Name",
dataIndex: "name", dataIndex: "name",
key: "name", key: "name",
...getColumnSearchProps('name'), ...getColumnSearchProps("name"),
width: "15%" width: "15%"
}, },
{ {
...@@ -240,21 +238,42 @@ export const ActivityListingRBAC = () => { ...@@ -240,21 +238,42 @@ export const ActivityListingRBAC = () => {
width: "15%" width: "15%"
}, },
{
title: "Gift",
dataIndex: "gift",
// filters: [
// { // {
// text: "London", // title: "Gift",
// value: "London" // dataIndex: "gift",
// // filters: [
// // {
// // text: "London",
// // value: "London"
// // },
// // {
// // text: "New York",
// // value: "New York"
// // }
// // ],
// // onFilter: (value, record) => record.address.startsWith(value),
// // filterSearch: true,
// width: "10%"
// }, // },
// { {
// text: "New York", title: "Edit record",
// value: "New York" render: (_, record) => (
// } <Space size="middle">
// ], {/* <a>Invite {record.name}</a> */}
// onFilter: (value, record) => record.address.startsWith(value), <EditTwoTone style={{ fontSize: "22px" }}
// filterSearch: true, onClick={() => {
router.push(`/vendor/activities/${record.key}`)
console.log(record);
}}/>
{/* <DeleteTwoTone
twoToneColor="#FF0000"
style={{ fontSize: "22px" }}
onClick={() => {
console.log(record);
}}
/> */}
</Space>
),
width: "10%" width: "10%"
} }
]); ]);
......
components/vendor/UpdateActivity.js 0 → 100644
import React, { useEffect, useRef, useState } from "react";
import * as Yup from "yup";
import { useDispatch, useSelector } from "react-redux";
import makeAnimated from "react-select/animated";
import { getLoggedInVendor, pincodeSearchByFilter } from "../../redux/actions/vendorActions";
import axios from "axios";
import { Form, Formik } from "formik";
import { sanitizeTimeFormat } from "../../services/imageHandling";
import { toast } from "react-toastify";
import { createActivity } from "../../redux/actions/activityAction";
const format = "HH:mm";
let timeArray = [];
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 UpdateActivity = () => {
const dispatch = useDispatch();
const { categories } = useSelector(state => state.categories);
const { subCategories } = useSelector(state => state.subCategories);
const { loggedInVendor } = useSelector(state => state.loggedInVendor);
let categoryRef = useRef();
let timeLines;
const activityDetailsValidationSchema = Yup.object().shape({
category: Yup.string().required("Category 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(),
pricePerPerson: Yup.string().required("Price Per Person 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.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().required("Contact person is a required field"),
countryCode: Yup.string(),
contactNumberForBooking: Yup.string().required("Number is a required field"),
cancellationPolicyFile: 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());
}, []);
return (
<div>
<Fragment>
<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={{
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}
onSubmit={values => {}}
>
{({ values, errors, touched, handleChange, handleBlur, handleSubmit, setFieldValue, resetForm }) => (
<Form
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);
if (res.success) {
toast.success("Activity added successfully!");
resetForm();
setActiveDays([]);
setMonths([]);
}
}}
>
<div className="activityDetails">
<div>
<div className="mt-4">
{/* <p className="textH">Basic Details</p> */}
<div className="d-flex justify-content-between">
<p className="textH">Basic Details</p>
</div>
<div className="row">
<div className="col-12 col-lg-6">
<div className="input-group">
<label>Category</label>
<select
ref={categoryRef}
value={values.category}
name="category"
onChange={async e => {
handleChange(e);
console.log(categoryRef);
// console.log("subCategories", categoryRef.current.value);
await dispatch(getAllSubCategories(categoryRef.current.value));
}}
onBlur={handleBlur}
>
<option value="">Select</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>
{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>Sub Category</label>
<select id={`subCategory`} value={values.subCategory} name={`subCategory`} onChange={handleChange} onBlur={handleBlur}>
<option value="">Select</option>
{subCategories &&
subCategories?.data.length > 0 &&
subCategories.data.map((item, index) => {
return (
<option key={index} value={item.value}>
{item.attributes.name}
</option>
);
})}
</select>
{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>
<div className="row">
<div className="col-12 col-lg-6">
<div className="input-group">
<label>Activity Name</label>
<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={`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>
<div className="row">
<div className="col-12 col-lg-6">
<div className="input-group">
<label>Location</label>
<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={`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={`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>
<div className="row">
<div className="col-12 col-lg-6">
<div className="input-group">
<label>Address Line 1</label>
<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={`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>
<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-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={`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="">
<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>
{touched.activityType && errors.activityType && (
<span className="form-error" style={{ color: "red", fontSize: "10px" }}>
{errors.activityType}
</span>
)}
</div>
</div>
{/* <ErrorMessage name={`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={`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">
<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={`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={`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>
</div>
</div>
</div>
<hr />
<div className="mt-4">
<p className="textH">Availability</p>
<div className="row">
<div className="col-md-6 ">
<div className="input-group">
<label>Months</label>
<Select
className="multi-select"
closeMenuOnSelect={false}
// value={values.months}
components={animatedComponents}
onBlur={handleBlur}
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-md-6 ">
<div className="input-group">
<label>Day & Time</label>
<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={`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>
<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">Min</option>
<option value="min">Min</option>
</select>
{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">Max</option>
<option value="max">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 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>
</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={`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>
<div className="row">
<div className="col-12 col-lg-6">
<div className="input-group">
<label>Contact Person Name</label>
<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={`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={`contactNumberForBooking`} onChange={handleChange} onBlur={handleBlur} value={values.contactNumberForBooking} />
</div>
{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>
</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={`cancellationPolicyFile`}
name={`cancellationPolicyFile`}
onChange={event => {
if (event) {
const file = event.currentTarget.files[0];
setFieldValue(`cancellationPolicyFile`, file);
}
}}
onBlur={handleBlur}
onClick={event => {
const { target = {} } = event || {};
target.value = "";
}}
/>
<label className="custom-file-label" htmlFor={`cancellationPolicyFile`}>
Upload
</label>
</div>
{/* <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.cancellationPolicyFile.name}</p>
<FaTimes
style={{ cursor: "pointer" }}
onClick={() => {
setFieldValue(`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={`termsConditionsFile`}
name={`termsConditionsFile`}
onChange={event => {
if (event) {
const file = event.currentTarget.files[0];
setFieldValue(`termsConditionsFile`, file);
}
}}
onBlur={handleBlur}
onClick={event => {
const { target = {} } = event || {};
target.value = "";
}}
/>
<label className="custom-file-label" htmlFor={`termsConditionsFile`}>
Upload
</label>
</div>
{/* <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.termsConditionsFile.name}</p>
<FaTimes
style={{ cursor: "pointer" }}
onClick={() => {
setFieldValue(`termsConditionsFile`, "");
}}
/>
</div>
)}
</div>
</div>
</div>
</div>
</div>
<div className="row">
<div className="col-12 col-lg-5">
<div className="input-group">
<Button type="submit" className="btn btn-primary btn-submit">
Submit
</Button>
{/* <button type="submit" onClick={handleSubmit}>submit</button> */}
</div>
</div>
</div>
</div>
</Form>
)}
</Formik>
</div>
</div>
</div>
<div className="col-12 col-lg-4">
<div className="content-div help-center">
<h2>Help Center</h2>
<ul className="helplist">
<li>
<img src="/images/vendor/question.svg" className="img-fluid" />
<p>Lorem Ipsum Dolor Sit?</p>
</li>
<li>
<img src="/images/vendor/question.svg" className="img-fluid" />
<p>Lorem Ipsum Dolor Sit?</p>
</li>
<li>
<img src="/images/vendor/question.svg" className="img-fluid" />
<p>Lorem Ipsum Dolor Sit?</p>
</li>
<li>
<img src="/images/vendor/question.svg" className="img-fluid" />
<p>Lorem Ipsum Dolor Sit?</p>
</li>
<li>
<img src="/images/vendor/call.svg" className="img-fluid" />
<p>+1 (407) 8798 789</p>
</li>
</ul>
</div>
</div>
</div>
</div>
</Fragment>
</div>
);
};
export default UpdateActivity;
package.json
...@@ -13,6 +13,7 @@ ...@@ -13,6 +13,7 @@
"@stripe/stripe-js": "^1.35.0", "@stripe/stripe-js": "^1.35.0",
"antd": "^5.15.3", "antd": "^5.15.3",
"axios": "^0.27.2", "axios": "^0.27.2",
"dayjs": "^1.11.10",
"easyinvoice": "^2.3.3", "easyinvoice": "^2.3.3",
"formik": "^2.2.9", "formik": "^2.2.9",
"framer-motion": "^11.0.14", "framer-motion": "^11.0.14",
...@@ -30,6 +31,7 @@ ...@@ -30,6 +31,7 @@
"react-icons": "^5.0.1", "react-icons": "^5.0.1",
"react-image-gallery": "^1.3.0", "react-image-gallery": "^1.3.0",
"react-js-pagination": "^3.0.3", "react-js-pagination": "^3.0.3",
"react-lazyload": "^3.2.1",
"react-loading-icons": "^1.1.0", "react-loading-icons": "^1.1.0",
"react-multi-carousel": "^2.8.2", "react-multi-carousel": "^2.8.2",
"react-otp-input": "^3.1.1", "react-otp-input": "^3.1.1",
......
pages/vendor/activities/[id].js 0 → 100644
import { Layout } from "antd";
import React from "react";
import Sidebar from "../../../components/layout/VendorDashboardSidebar";
import ActivityDetails from "../../../components/vendor/ActivityDetails";
import ActivityListingRBAC from "../../../components/vendor/ActivityListingRBAC";
import UpdateActivity from "../../../components/vendor/UpdateActivity";
import { getActivitiesByVendor, getActivityById } from "../../../redux/actions/activityAction";
import { getAllCategories, getAllSubCategories } from "../../../redux/actions/categoriesAction";
import { loadUser } from "../../../redux/actions/userActions";
import { wrapper } from "../../../redux/store";
const EditActivityDetail = () => {
return (
<Layout>
<div className="sidebarContainer">
<Sidebar />
<div className="content">
{/* <ActivityListingRBAC /> */}
<ActivityDetails isUpdate={true} />
{/* <UpdateActivity /> */}
</div>
</div>
</Layout>
);
};
export default EditActivityDetail;
/** For server side rendering */
export const getServerSideProps = wrapper.getServerSideProps(store => async ({ req, query }) => {
// Get the menu data.
// await store.dispatch(getActivitiesByVendor())
await store.dispatch(loadUser());
await store.dispatch(getAllCategories());
await store.dispatch(getAllSubCategories());
await store.dispatch(getActivityById(query.id));
// get the locations data.
// await store.dispatch(getVendorDetails())
return {
props: {}
};
});
pages/vendor/activities/index.js
...@@ -6,11 +6,11 @@ import ActivityListing from "../../../components/vendor/ActivityListing"; ...@@ -6,11 +6,11 @@ import ActivityListing from "../../../components/vendor/ActivityListing";
import ActivityListingRBAC from "../../../components/vendor/ActivityListingRBAC"; import ActivityListingRBAC from "../../../components/vendor/ActivityListingRBAC";
import { getAllCategories, getAllSubCategories } from "../../../redux/actions/categoriesAction"; import { getAllCategories, getAllSubCategories } from "../../../redux/actions/categoriesAction";
import { getActivitiesByVendor } from "../../../redux/actions/activityAction"; import { getActivitiesByVendor } from "../../../redux/actions/activityAction";
import { loadUser } from "../../../redux/actions/userActions";
// import { loadUser } from "../redux/actions/userActions"; // import { loadUser } from "../redux/actions/userActions";
// import { wrapper } from "../redux/store"; // import { wrapper } from "../redux/store";
export default function ActivityListingPage() { export default function ActivityListingPage() {
return ( return (
<Layout> <Layout>
<div className="sidebarContainer"> <div className="sidebarContainer">
...@@ -21,20 +21,18 @@ export default function ActivityListingPage() { ...@@ -21,20 +21,18 @@ export default function ActivityListingPage() {
</div> </div>
</Layout> </Layout>
); );
}; }
/** For server side rendering */ /** For server side rendering */
export const getServerSideProps = wrapper.getServerSideProps(store => async ({ req, query }) => { export const getServerSideProps = wrapper.getServerSideProps(store => async ({ req, query }) => {
// Get the menu data. await store.dispatch(loadUser());
await store.dispatch(getActivitiesByVendor()) await store.dispatch(getActivitiesByVendor());
await store.dispatch(getAllCategories()) await store.dispatch(getAllCategories());
await store.dispatch(getAllSubCategories()) await store.dispatch(getAllSubCategories());
// get the locations data. // get the locations data.
// await store.dispatch(getVendorDetails()) // await store.dispatch(getVendorDetails())
return { return {
props: {}, props: {}
}; };
}); });
pages/vendor/activity-details/index.js
...@@ -10,7 +10,7 @@ export default function ActivityDetailsPage () { ...@@ -10,7 +10,7 @@ export default function ActivityDetailsPage () {
return ( return (
<Layout> <Layout>
<ActivityDetails /> <ActivityDetails isUpdate={false} />
</Layout> </Layout>
); );
}; };
......
redux/actions/activityAction.js
...@@ -6,7 +6,13 @@ import { ...@@ -6,7 +6,13 @@ import {
CREATE_ACTIVITY_SUCCESS, CREATE_ACTIVITY_SUCCESS,
GET_ACTIVITIES_FAIL, GET_ACTIVITIES_FAIL,
GET_ACTIVITIES_REQUEST, GET_ACTIVITIES_REQUEST,
GET_ACTIVITIES_SUCCESS GET_ACTIVITIES_SUCCESS,
GET_ACTIVITY_BY_ID_FAIL,
GET_ACTIVITY_BY_ID_REQUEST,
GET_ACTIVITY_BY_ID_SUCCESS,
UPDATE_ACTIVITY_BY_ID_FAIL,
UPDATE_ACTIVITY_BY_ID_REQUEST,
UPDATE_ACTIVITY_BY_ID_SUCCESS
} from "../constants/activitiesConstants"; } from "../constants/activitiesConstants";
import qs from "qs"; import qs from "qs";
import { getLoggedInVendor } from "./vendorActions"; import { getLoggedInVendor } from "./vendorActions";
...@@ -53,8 +59,8 @@ export const createActivity = data => async dispatch => { ...@@ -53,8 +59,8 @@ export const createActivity = data => async dispatch => {
export const getActivitiesByVendor = () => async dispatch => { export const getActivitiesByVendor = () => async dispatch => {
// console.log("data", data); // console.log("data", data);
// const session = await getSession(); const session = await getSession();
// console.log("session", session); console.log("session", session);
try { try {
// const vendorConfig = { // const vendorConfig = {
// headers: { // headers: {
...@@ -96,7 +102,7 @@ export const getActivitiesByVendor = () => async dispatch => { ...@@ -96,7 +102,7 @@ export const getActivitiesByVendor = () => async dispatch => {
const query = { const query = {
filters: {}, filters: {},
populate: ["masterMonths", "subCategory", "subCategory.category", "timeSlots", "masterPincode", "vendor"] populate: ["subCategory", "subCategory.category", "masterPincode", "vendor"]
}; };
const queryString = qs.stringify(query, { const queryString = qs.stringify(query, {
...@@ -109,7 +115,7 @@ export const getActivitiesByVendor = () => async dispatch => { ...@@ -109,7 +115,7 @@ export const getActivitiesByVendor = () => async dispatch => {
// }; // };
const response = await axios.get(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/experiences?${queryString}`, config); const response = await axios.get(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/experiences?${queryString}`, config);
// console.log("Response", response.data);
dispatch({ dispatch({
type: GET_ACTIVITIES_SUCCESS, type: GET_ACTIVITIES_SUCCESS,
payload: response.data payload: response.data
...@@ -123,6 +129,38 @@ export const getActivitiesByVendor = () => async dispatch => { ...@@ -123,6 +129,38 @@ export const getActivitiesByVendor = () => async dispatch => {
} }
}; };
export const getActivityById = id => async dispatch => {
try {
dispatch({
type: GET_ACTIVITY_BY_ID_REQUEST,
loading: true
});
const config = {
headers: {
"Content-Type": "application/json"
}
};
const query = {
populate: ["masterMonths", "subCategory", "subCategory.category", "timeSlots", "masterPincode", "vendor"]
};
const queryString = qs.stringify(query, {
encodeValuesOnly: true
});
const response = await axios.get(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/experiences/${id}/?${queryString}`, config);
dispatch({
type: GET_ACTIVITY_BY_ID_SUCCESS,
payload: response.data
});
} catch (error) {
dispatch({
type: GET_ACTIVITY_BY_ID_FAIL,
payload: error.response.data
});
}
};
// export const getMasterDays = async () => { // export const getMasterDays = async () => {
// const config = { // const config = {
// headers: { // headers: {
...@@ -133,3 +171,40 @@ export const getActivitiesByVendor = () => async dispatch => { ...@@ -133,3 +171,40 @@ export const getActivitiesByVendor = () => async dispatch => {
// console.log("response",response.data); // console.log("response",response.data);
// return response.data; // return response.data;
// }; // };
export const updateActivityById =
({ activityId, updatedData }) =>
async dispatch => {
try {
const session = await getSession();
if (activityId && updatedData) {
console.log("activity session", session);
dispatch({
type: UPDATE_ACTIVITY_BY_ID_REQUEST,
loading: true
});
const config = {
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${session.jwt}`
}
};
// const query = {}
const updateResponse = await axios.put(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/experiences/${activityId}`, {data: updatedData}, config);
dispatch({
type: UPDATE_ACTIVITY_BY_ID_SUCCESS,
payload: updateResponse.data
});
return updateResponse.data;
}
} catch (error) {
dispatch({
type: UPDATE_ACTIVITY_BY_ID_FAIL,
payload: error.response.data
});
}
};
redux/actions/categoriesAction.js
...@@ -10,9 +10,9 @@ import { ...@@ -10,9 +10,9 @@ import {
} from "../constants/categoryConstants"; } from "../constants/categoryConstants";
export const getAllCategories = () => async dispatch => { export const getAllCategories = () => async dispatch => {
console.log("here >"); // console.log("here >");
try { try {
console.log("here >>"); // console.log("here >>");
dispatch({ dispatch({
type: GET_CATEGORIES_REQUEST type: GET_CATEGORIES_REQUEST
...@@ -32,7 +32,7 @@ export const getAllCategories = () => async dispatch => { ...@@ -32,7 +32,7 @@ export const getAllCategories = () => async dispatch => {
}); });
const response = await axios.get(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/categories?${queryString}`, config); const response = await axios.get(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/categories?${queryString}`, config);
console.log("response > ", response); // console.log("response > ", response);
dispatch({ dispatch({
type: GET_CATEGORIES_SUCCESS, type: GET_CATEGORIES_SUCCESS,
payload: response.data payload: response.data
......
redux/constants/activitiesConstants.js
...@@ -6,4 +6,12 @@ export const GET_ACTIVITIES_REQUEST = "GET_ACTIVITIES_REQUEST" ...@@ -6,4 +6,12 @@ export const GET_ACTIVITIES_REQUEST = "GET_ACTIVITIES_REQUEST"
export const GET_ACTIVITIES_SUCCESS = "GET_ACTIVITIES_SUCCESS" export const GET_ACTIVITIES_SUCCESS = "GET_ACTIVITIES_SUCCESS"
export const GET_ACTIVITIES_FAIL = "GET_ACTIVITIES_FAIL" export const GET_ACTIVITIES_FAIL = "GET_ACTIVITIES_FAIL"
export const GET_ACTIVITY_BY_ID_REQUEST = "GET_ACTIVITY_BY_ID_REQUEST"
export const GET_ACTIVITY_BY_ID_SUCCESS = "GET_ACTIVITY_BY_ID_SUCCESS"
export const GET_ACTIVITY_BY_ID_FAIL = "GET_ACTIVITY_BY_ID_FAIL"
export const UPDATE_ACTIVITY_BY_ID_REQUEST = "UPDATE_ACTIVITY_BY_ID_REQUEST"
export const UPDATE_ACTIVITY_BY_ID_SUCCESS = "UPDATE_ACTIVITY_BY_ID_SUCCESS"
export const UPDATE_ACTIVITY_BY_ID_FAIL = "UPDATE_ACTIVITY_BY_ID_FAIL"
export const CLEAR_ERRORS = "CLEAR_ERRORS"; export const CLEAR_ERRORS = "CLEAR_ERRORS";
\ No newline at end of file \ No newline at end of file
redux/reducers/activitiesReducer.js
import { CREATE_ACTIVITY_FAIL, CREATE_ACTIVITY_REQUEST, CREATE_ACTIVITY_SUCCESS, GET_ACTIVITIES_FAIL, GET_ACTIVITIES_REQUEST, GET_ACTIVITIES_SUCCESS } from "../constants/activitiesConstants"; import {
CREATE_ACTIVITY_FAIL,
CREATE_ACTIVITY_REQUEST,
CREATE_ACTIVITY_SUCCESS,
GET_ACTIVITIES_FAIL,
GET_ACTIVITIES_REQUEST,
GET_ACTIVITIES_SUCCESS,
GET_ACTIVITY_BY_ID_FAIL,
GET_ACTIVITY_BY_ID_REQUEST,
GET_ACTIVITY_BY_ID_SUCCESS,
UPDATE_ACTIVITY_BY_ID_FAIL,
UPDATE_ACTIVITY_BY_ID_REQUEST,
UPDATE_ACTIVITY_BY_ID_SUCCESS
} from "../constants/activitiesConstants";
import { CLEAR_ERRORS } from "../constants/vendorConstants"; import { CLEAR_ERRORS } from "../constants/vendorConstants";
export const createActivityReducer = (state = {}, action) => { export const createActivityReducer = (state = {}, action) => {
...@@ -27,8 +40,7 @@ export const createActivityReducer = (state = {}, action) => { ...@@ -27,8 +40,7 @@ export const createActivityReducer = (state = {}, action) => {
default: default:
return state; return state;
} }
}; };
export const getActivitiesReducer = (state = {}, action) => { export const getActivitiesReducer = (state = {}, action) => {
switch (action.type) { switch (action.type) {
...@@ -57,3 +69,57 @@ export const getActivitiesReducer = (state = {}, action) => { ...@@ -57,3 +69,57 @@ export const getActivitiesReducer = (state = {}, action) => {
return state; return state;
} }
}; };
export const getActivityByIdReducer = (state = {}, action) => {
switch (action.type) {
case GET_ACTIVITY_BY_ID_REQUEST:
return {
loading: true
};
case GET_ACTIVITY_BY_ID_SUCCESS:
return {
loading: false,
activityById: action.payload
};
case GET_ACTIVITY_BY_ID_FAIL:
return {
loading: false,
error: action.payload.error.message
};
case CLEAR_ERRORS:
return {
...state,
error: null
};
default:
return state;
}
};
export const updateActivityByIdReducer = (state = {}, action) => {
switch (action.type) {
case UPDATE_ACTIVITY_BY_ID_REQUEST:
return {
loading: true
};
case UPDATE_ACTIVITY_BY_ID_SUCCESS:
return {
loading: true,
updatedActivity: action.payload
};
case UPDATE_ACTIVITY_BY_ID_FAIL:
return {
loading: true,
error: action.payload.error.message
};
case CLEAR_ERRORS:
return {
...state,
error: null
};
default:
return state;
}
};
redux/reducers/reducers.js
...@@ -5,7 +5,7 @@ import { authReducer, forgotPasswordReducer, loadedUserReducer, resetPasswordRed ...@@ -5,7 +5,7 @@ import { authReducer, forgotPasswordReducer, loadedUserReducer, resetPasswordRed
import { enquiryReducer } from "./enquiryReducer"; import { enquiryReducer } from "./enquiryReducer";
import { displayEnquireNowReducer } from "./enquireNowModalReducer"; import { displayEnquireNowReducer } from "./enquireNowModalReducer";
import { getVendorDetailsReducer, loggedInVendorReducer, updateVendorReducer } from "./vendorReducers"; import { getVendorDetailsReducer, loggedInVendorReducer, updateVendorReducer } from "./vendorReducers";
import { createActivityReducer, getActivitiesReducer } from "./activitiesReducer"; import { createActivityReducer, getActivitiesReducer, getActivityByIdReducer, updateActivityByIdReducer } from "./activitiesReducer";
import { getAllCategoriesReducer, getAllSubCategoriesReducer } from "./categoryReducer"; import { getAllCategoriesReducer, getAllSubCategoriesReducer } from "./categoryReducer";
import { getAllTestimonialReducer } from "./testimonialReducer"; import { getAllTestimonialReducer } from "./testimonialReducer";
...@@ -30,6 +30,8 @@ const reducers = combineReducers({ ...@@ -30,6 +30,8 @@ const reducers = combineReducers({
subCategories: getAllSubCategoriesReducer, subCategories: getAllSubCategoriesReducer,
testimonial: getAllTestimonialReducer, testimonial: getAllTestimonialReducer,
allActivitiesData: getActivitiesReducer, allActivitiesData: getActivitiesReducer,
activityById: getActivityByIdReducer,
updatedActivity: updateActivityByIdReducer,
}); });
export default reducers; export default reducers;
services/imageHandling.js
...@@ -32,11 +32,11 @@ export const renderImage = imagePath => { ...@@ -32,11 +32,11 @@ export const renderImage = imagePath => {
}; };
export const sanitizeTimeFormat = ({ data }) => { export const sanitizeTimeFormat = ({ data }) => {
console.log("here sant 1") console.log("here sant 1");
if (!data.fromHours || !data.fromMins || !data.toHours || !data.toMins) { if (!data.fromHours || !data.fromMins || !data.toHours || !data.toMins) {
console.log("here sant") console.log("here sant");
return null return null;
} }
const fromTime = `${data.fromHours}:${data.fromMins}:00`; const fromTime = `${data.fromHours}:${data.fromMins}:00`;
const toTime = `${data.toHours}:${data.toMins}:00`; const toTime = `${data.toHours}:${data.toMins}:00`;
...@@ -45,3 +45,19 @@ export const sanitizeTimeFormat = ({ data }) => { ...@@ -45,3 +45,19 @@ export const sanitizeTimeFormat = ({ data }) => {
return { fromTime, toTime, day }; return { fromTime, toTime, day };
// const day // const day
}; };
export const sanitizeTimeRange = ({ data }) => {
// console.log("data >", data[0].$d);
const date = new Date(data.$d);
const day = date.getDate();
const month = date.getMonth() + 1; // Month starts from 0, so add 1
const year = date.getFullYear();
const formattedDay = day < 10 ? "0" + day : day;
const formattedMonth = month < 10 ? "0" + month : month;
const formattedDate = `${year}-${formattedMonth}-${formattedDay}`;
// console.log("date", formattedDate);
return formattedDate;
// const endDate = new Date(data[1].$d);
};
styles/globals.css
...@@ -2734,6 +2734,14 @@ footer hr { ...@@ -2734,6 +2734,14 @@ footer hr {
width: 33px !important; width: 33px !important;
height: 33px !important; height: 33px !important;
} }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
@media (min-width: 992px) { @media (min-width: 992px) {
.navbar-expand-lg .navbar-nav .nav-link { .navbar-expand-lg .navbar-nav .nav-link {
margin: 0 2rem; margin: 0 2rem;
......
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!