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;