import Image from "next/image";
import { ErrorMessage, FieldArray, Formik } from "formik";
import { Fragment, useEffect, useRef, useState } from "react";
import { Button, Form, Modal } from "react-bootstrap";
import * as Yup from "yup";
import { FaTimes } from "react-icons/fa";
import { useDispatch, useSelector } from "react-redux";
import { getAllSubCategories } from "../../redux/actions/categoriesAction";
import { getLoggedInVendor, pincodeSearchByFilter } from "../../redux/actions/vendorActions";
import { AsyncTypeahead } from "react-bootstrap-typeahead";
import Select from "react-select";
import makeAnimated from "react-select/animated";
import { Select as AntSelect, Switch, Upload, Image as AntImage, message } from "antd";
// import { Image as AntSelect, Switch, Upload } from "antd";
// import { getMasterDays } from "../../redux/actions/activityAction";
import axios from "axios";
import { sanitizeTimeFormat, sanitizeTimeRange } from "../../services/imageHandling";
import { createActivity, getActivityById, updateActivityById } from "../../redux/actions/activityAction";
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, CheckCircleTwoTone, PlusOutlined } from "@ant-design/icons";
import { useRouter } from "next/router";
import ImageUploadPopUp from "./ImageUploadPopUp";
import { loadUser } from "../../redux/actions/userActions";
import UploadImageComponent from "./UploadImageComponent";
import UploadImageCustom from "./UploadImageCustom";
dayjs.extend(customParseFormat);
const { RangePicker } = DatePicker;
const dateFormat = "YYYY/MM/DD";
const getBase64 = file =>
new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
});
// import { colourOptions } from '../data';
const animatedComponents = makeAnimated();
const ActivityDetails = ({ isUpdate }) => {
// const [fileList, setFileList] = useState([]);
// const [uploading, setUploading] = useState(false);
const [showImageUploadModal, setshowImageUploadModal] = useState(false);
const [imagesArrayComponent, setimagesArrayComponent] = useState([]);
const [image1, setimage1] = useState();
const [image2, setimage2] = useState();
const [image3, setimage3] = useState();
const [image4, setimage4] = useState();
const [image5, setimage5] = useState();
const [displayImage, setdisplayImage] = useState();
const [termsConditions, settermsConditions] = useState();
const [cancellationPolicy, setCancellationPolicy] = useState();
useEffect(() => {
// dispatch(loadUser());
// setFileList([
// // {
// // uid: "-1",
// // name: "image.png",
// // status: "done",
// // url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
// // },
// // {
// // uid: "-2",
// // name: "image.png",
// // status: "done",
// // url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
// // },
// // {
// // uid: "-3",
// // name: "image.png",
// // status: "done",
// // url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
// // },
// // {
// // uid: "-4",
// // name: "image.png",
// // status: "done",
// // url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
// // },
// // {
// // uid: "-xxx",
// // percent: 50,
// // name: "image.png",
// // status: "uploading",
// // url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
// // },
// // {
// // uid: "-5",
// // name: "image.png",
// // status: "error"
// // }
// ]);
}, []);
const ActivityApprovalStatus = ({ status }) => {
if (status) {
switch (status) {
case "approved":
return (
<>
<div className=" ">
<div className="alert alert-success alert-dismissible fade show text-center" role="alert">
<div className="text-center">
<span>
<p className=" text-center">
Activity approved! <CheckCircleTwoTone twoToneColor="#00b33c" />
</p>
</span>
<p className=" text-center">If you make changes, the details will be sent again for approval.</p>
</div>
</div>
</div>
</>
);
case "rejected":
return (
<>
<div className="col-12 offset-lg-2 col-lg-8 ">
<div className="alert alert-danger alert-dismissible fade show text-center" role="alert">
<div className="text-center">
<p className="p1 text-center">Your profile has been rejected!</p>
<p className="p2 text-center"> Please contact the admin for more details!</p>
</div>
</div>
</div>
</>
);
case "pending":
return (
<>
<div className="col-12 offset-lg-2 col-lg-8 ">
<div className="alert alert-warning alert-dismissible fade show text-center" role="alert">
<div className="text-center">
<p className="p1 text-center">Your profile has been sent for approval!</p>
<p className="p2 text-center"> Please wait till the vendor takes action!</p>
</div>
</div>
</div>
</>
);
default:
break;
}
}
};
const dispatch = useDispatch();
const { categories } = useSelector(state => state.categories);
const { subCategories } = useSelector(state => state.subCategories);
const { loggedInVendor } = useSelector(state => state.loggedInVendor);
const { activityById } = useSelector(state => state.activityById);
console.log("activityById", activityById);
// console.log("tostring",activityById?.data.attributes.duration.toString())
const currentDate = new Date();
const sanitizedCurrentDate = sanitizeTimeRange({ data: { $d: currentDate } });
console.log("subCategories", subCategories);
const router = useRouter();
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(),
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(),
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("This is a required field"),
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(),
activityPeriod: Yup.array().required("Please mention both dates!")
// availableOnMonday: Yup.bool()
});
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 [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([]);
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("pincodeDataSet.data.data", pincodeDataSet.data.data);
// if (pincodeDataSet.data.data.length > 0) {
// return { label: "no values available" };
// }
setPinCodeData(pincodeDataSet.data.data);
};
useEffect(() => {
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 : false,
availableOnMonday: activityById?.data.attributes.availableOnMonday ? activityById?.data.attributes.availableOnMonday : false,
availableOnTuesday: activityById?.data.attributes.availableOnTuesday ? activityById?.data.attributes.availableOnTuesday : false,
availableOnWednesday: activityById?.data.attributes.availableOnWednesday ? activityById?.data.attributes.availableOnWednesday : false,
availableOnThursday: activityById?.data.attributes.availableOnThursday ? activityById?.data.attributes.availableOnThursday : false,
availableOnFriday: activityById?.data.attributes.availableOnFriday ? activityById?.data.attributes.availableOnFriday : false,
availableOnSaturday: activityById?.data.attributes.availableOnSaturday ? activityById?.data.attributes.availableOnSaturday : false
});
setStartDate(activityById?.data.attributes.fromDate);
setEndDate(activityById?.data.attributes.toDate);
setimagesArrayComponent(activityById?.data.attributes.imagesComponent.map(item => item.image.data?.id));
setimage1(activityById?.data.attributes.imagesComponent[0].image.data?.id);
setimage2(activityById?.data.attributes.imagesComponent[1].image.data?.id);
setimage3(activityById?.data.attributes.imagesComponent[2].image.data?.id);
setimage4(activityById?.data.attributes.imagesComponent[3].image.data?.id);
setimage5(activityById?.data.attributes.imagesComponent[4].image.data?.id);
setdisplayImage(activityById?.data.attributes.image?.data?.id);
setCancellationPolicy(activityById?.data.attributes.cancellationPolicy?.data?.id);
settermsConditions(activityById?.data.attributes.termsConditions?.data?.id);
}
}, []);
// useEffect(() => {
// dispatch(updateActivityById(8))
// }, [])
console.log("pincodeData", pincodeData && pincodeData.length > 0);
console.log("activityById", activityById);
console.log("activityPeriodState", activityPeriodState);
return (
<Fragment>
<div className="container p-5">
<div className="row">
<div className="col-12 col-lg-8">
<div className="content-div business-details">
{isUpdate ? <h2>{activityById?.data.attributes.name}</h2> : <div>Add Details</div>}
{isUpdate && <ActivityApprovalStatus status={activityById?.data.attributes.approved} />}
<div className="form-container">
<Formik
enableReinitialize
initialValues={{
category: activityById?.data.attributes?.subCategory?.data?.attributes?.category?.data?.attributes?.name
? activityById?.data.attributes?.subCategory?.data?.attributes?.category?.data?.attributes?.name
: "",
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: "",
addressLine1: activityById?.data.attributes.address ? activityById?.data.attributes.address : "",
addressLine2: "",
pricePerPerson: activityById?.data.attributes.pricePerPerson ? activityById?.data.attributes.pricePerPerson : "",
giftingToSomeone: activityById?.data.attributes.giftSomeone ? activityById?.data.attributes.giftSomeone : "",
place: activityById?.data.attributes.activityType ? activityById?.data.attributes.activityType : "",
contactPersonForActivity: activityById?.data.attributes.activityType ? activityById?.data.attributes.activityType : "",
minGroupSize: activityById?.data.attributes.minGroupSize ? activityById?.data.attributes.minGroupSize : "",
maxGroupSize: activityById?.data.attributes.maxGroupSize ? activityById?.data.attributes.maxGroupSize : "",
months: [],
minDuration: activityById?.data.attributes.minimumDuration ? activityById?.data.attributes.minimumDuration.toString() : "",
maxDuration: activityById?.data.attributes.maximumDuration ? activityById?.data.attributes.maximumDuration.toString() : "",
durationUnit: activityById?.data.attributes.duration ? activityById?.data.attributes.duration.toString() : "",
ageGroup: activityById?.data.attributes.ageLowerLimit ? activityById?.data.attributes.ageLowerLimit.toString() : "",
linkOfBooking: activityById?.data.attributes.link ? activityById?.data.attributes.link : "",
activityImages: [],
contactPersonForBooking: activityById?.data.attributes.contactPersonForBooking ? activityById?.data.attributes.contactPersonForBooking : "",
countryCode: "",
contactNumberForBooking: activityById?.data.attributes.phoneNumber ? activityById?.data.attributes.phoneNumber : "",
cancellationPolicyFile: "",
termsConditionsFile: "",
activityPeriod: [],
activityType: activityById?.data.attributes.activityType ? activityById?.data.attributes.activityType : ""
}}
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);
if (
!(
daysBoolean.availableOnMonday ||
daysBoolean.availableOnTuesday ||
daysBoolean.availableOnWednesday ||
daysBoolean.availableOnThursday ||
daysBoolean.availableOnFriday ||
daysBoolean.availableOnSaturday ||
daysBoolean.availableOnSunday
)
) {
toast.error("Please select days you will be active on");
return;
}
let fromDate;
let toDate;
console.log("timeslots", activityPeriodState, startDate, endDate);
if (!startDate || !endDate) {
fromDate = sanitizeTimeRange({ data: activityPeriodState[0] });
toDate = sanitizeTimeRange({ data: activityPeriodState[1] });
if (!activityPeriodState || !activityPeriodState.length > 0) {
toast.error("Please select time range");
return;
}
} else if (startDate && endDate) {
fromDate = startDate;
toDate = endDate;
}
if (!image1 || !image2 || !image3 || !image4 || !image5) {
toast.error("You need to upload 5 images!");
return;
}
if (!displayImage) {
toast.error("You need to upload a display image!");
return;
}
handleSubmit();
values = {
...values,
// timeSlots,
// months,
pincode: ref.current.state.selected[0],
vendor: loggedInVendor,
name: values.activityName,
description: values.activityDescription,
address: `${values.addressLine1}`,
minimumDuration: values.minDuration,
maximumDuration: values.maxDuration,
ageLowerLimit: values.ageGroup,
phoneNumber: values.contactNumberForBooking,
link: values.linkOfBooking,
giftSomeone: values.giftingToSomeone,
fromDate,
toDate,
daysBoolean,
contactPersonForActivity: values.contactPersonForActivity,
duration: values.durationUnit.toString(),
imagesComponent: [image1, image2, image3, image4, image5],
image: displayImage,
approved: "pending",
termsConditions: termsConditions,
cancellationPolicy: cancellationPolicy
};
if (!ref.current.state.selected[0]) {
toast.error("Please select location!");
}
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);
toast.success("Activity sent for approval.");
}
if (!isUpdate) {
const res = await dispatch(createActivity(values));
console.log("res", res);
if (res.success) {
toast.success("Activity added successfully!");
resetForm();
setActiveDays([]);
// setMonths([]);
}
}
dispatch(getActivityById(router.query.id));
}}
>
<div className="activityDetails">
<div>
<div className="mt-4">
<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));
setFieldValue("subCategory", "");
}}
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>
);
})}
</select>
{touched.category && errors.category && (
<span className="form-error" style={{ color: "red", fontSize: "10px" }}>
{errors.category}
</span>
)}
</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>
)}
</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>
)}
</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>
)}
</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);
}}
/>
</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>
)}
</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>
)}
</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} />
</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>
</div>
</div>
<div className="col-12 col-lg-6">
<div className="input-group mb-2">
<label>Activity Type</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>
</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>
)}
</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>
)}
</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>
)}
</div>
</div>
</div>
</div>
</div>
</div>
<hr />
<div className="mt-4">
<p className="textH">Availability</p>
<div className="row">
<div className="col-md-12 ">
<div className="input-group">
<span className="col-md-12 my-1">Start date and end date of the activity:</span>
{/* <LazyLoad> */}
{isUpdate ? (
<RangePicker
id="activityPeriod"
name="activityPeriod"
defaultValue={[
dayjs(activityById?.data.attributes.fromDate ? activityById?.data.attributes.fromDate : sanitizedCurrentDate, dateFormat),
dayjs(activityById?.data.attributes.toDate ? activityById?.data.attributes.toDate : sanitizedCurrentDate, dateFormat)
]}
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 => {
console.log("change", e);
setActivityPeriodState(e);
// handleChange(e);
}}
/>
)}
{/* </LazyLoad> */}
{touched.activityPeriod && errors.activityPeriod && (
<span className="form-error" style={{ color: "red", fontSize: "10px" }}>
{errors.activityPeriod}
</span>
)}
</div>
</div>
<div className="col-md-12 ">
<div className="row">
<label>Active on days:</label>
<div className="col-6 my-2">
<div className="d-flex">
<span className="col-md-6">Select all:</span>
<Switch
// style={{ backgroundColor: "green" }}
className="col-md-4"
value={
daysBoolean.availableOnMonday &&
daysBoolean.availableOnTuesday &&
daysBoolean.availableOnWednesday &&
daysBoolean.availableOnThursday &&
daysBoolean.availableOnFriday &&
daysBoolean.availableOnSaturday &&
daysBoolean.availableOnSunday
}
id={"availableOnMonday"}
name="availableOnMonday"
onChange={e => {
setDaysBoolean({
availableOnMonday: e === true ? true : false,
availableOnTuesday: e === true ? true : false,
availableOnWednesday: e === true ? true : false,
availableOnThursday: e === true ? true : false,
availableOnFriday: e === true ? true : false,
availableOnSaturday: e === true ? true : false,
availableOnSunday: e === true ? true : false
});
// setDaysBoolean({ ...daysBoolean, availableOnMonday: e });
// console.log("availableOnMonday", daysBoolean);
}}
checkedChildren="Active"
unCheckedChildren="Not Active"
/>
</div>
</div>
<div className="col-6 my-2">
<div className="d-flex">
<span className="col-md-6">Monday:</span>
<Switch
className="col-md-4"
value={daysBoolean.availableOnMonday}
id={"availableOnMonday"}
name="availableOnMonday"
onChange={e => {
setDaysBoolean({ ...daysBoolean, availableOnMonday: e === true ? true : false });
console.log("availableOnMonday", daysBoolean);
}}
checkedChildren="Active"
unCheckedChildren="Not Active"
/>
</div>
</div>
<div className="col-6 my-2">
<div className="d-flex">
<span className="col-md-6">Tuesday:</span>
<Switch
className="col-md-4"
value={daysBoolean.availableOnTuesday}
onChange={e => {
setDaysBoolean({ ...daysBoolean, availableOnTuesday: e === true ? true : false });
// console.log("availableOnTuesday", daysBoolean);
}}
id={"availableOnTuesday"}
// onChange={handleChange}
checkedChildren="Active"
unCheckedChildren="Not Active"
/>
</div>
</div>
<div className="col-6 my-2">
<div className="d-flex">
<span className="col-md-6">Wednesday:</span>
<Switch
className="col-md-4"
value={daysBoolean.availableOnWednesday}
id={"availableOnWednesday"}
// onChange={handleChange}
onChange={e => {
setDaysBoolean({ ...daysBoolean, availableOnWednesday: e === true ? true : false });
// console.log("availableOnTuesday", daysBoolean);
}}
checkedChildren="Active"
unCheckedChildren="Not Active"
/>
</div>
</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 => {
setDaysBoolean({ ...daysBoolean, availableOnThursday: e === true ? true : false });
// console.log("availableOnTuesday", daysBoolean);
}}
checkedChildren="Active"
unCheckedChildren="Not Active"
/>
</div>
</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 => {
setDaysBoolean({ ...daysBoolean, availableOnFriday: e === true ? true : false });
// console.log("availableOnTuesday", daysBoolean);
}}
checkedChildren="Active"
unCheckedChildren="Not Active"
/>
</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 => {
setDaysBoolean({ ...daysBoolean, availableOnSaturday: e === true ? true : false });
// console.log("availableOnTuesday", daysBoolean);
}}
checkedChildren="Active"
unCheckedChildren="Not Active"
/>
</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 === true ? true : false });
// console.log("availableOnTuesday", daysBoolean);
}}
checkedChildren="Active"
unCheckedChildren="Not Active"
/>
</div>
</div>
</div>
</div>
</div>
<div className="row mt-5">
<div className="col-12 col-lg-6">
<div className="input-group">
<div className="row">
<div className="col-2 col-lg-4">
<label>Total duration (in Mins)</label>
<input
value={values.durationUnit}
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">
<label>Minimum duration</label>
<input value={values.minDuration} id="minDuration" name="minDuration" onChange={handleChange} onBlur={handleBlur}></input>
{touched.minDuration && errors.minDuration && (
<span className="form-error" style={{ color: "red", fontSize: "10px" }}>
{errors.minDuration}
</span>
)}
</div>
<div className="col-2 col-lg-4">
<label>Maximum duration</label>
<input
value={values.maxDuration}
id="maxDuration"
name="maxDuration"
onChange={handleChange}
onBlur={handleBlur}
style={{ width: "100%" }}
></input>
{errors.maxDuration && touched.maxDuration && <span className="form-error">{errors.maxDuration}</span>}
</div>
</div>
</div>
</div>
<div className="col-12 col-lg-6">
<div className="input-group">
<label>Age Group</label>
<select value={values.ageGroup} id={"ageGroup"} name={"ageGroup"} onChange={handleChange} onBlur={handleBlur}>
<option value="">Select</option>
<option value="5">5+</option>
<option value="10">10+</option>
<option value="15">15+</option>
<option value="20">20+</option>
<option value="25">25+</option>
</select>
{touched.ageGroup && errors.ageGroup && (
<span className="form-error" style={{ color: "red", fontSize: "10px" }}>
{errors.ageGroup}
</span>
)}
</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>
)}
</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>
)}
</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>
)}
</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">
<UploadImageCustom
isUpdate={isUpdate}
setImage={setCancellationPolicy}
populatedImages={activityById?.data.attributes.termsConditions}
isPdf={true}
/>
{console.log("cancellationPolicy", cancellationPolicy, termsConditions)}
</div>
{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">
<UploadImageCustom
isUpdate={isUpdate}
setImage={settermsConditions}
populatedImages={activityById?.data.attributes.cancellationPolicy}
isPdf={true}
/>
</div>
{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>
<hr />
</div>
<div className="row d-flex mt-4">
<p className="textH">Add display image</p>
{/* {console.log(displayImage)} */}
<UploadImageCustom isUpdate={isUpdate} setImage={setdisplayImage} populatedImages={activityById?.data.attributes.image} />
<hr />
</div>
<div className="row d-flex ">
<p className="textH">Add other images</p>
<div className="col-2">
<ImageUploadPopUp
isUpdate={isUpdate}
setimagesArrayComponent={setimage1}
imagesArrayComponent={imagesArrayComponent}
populatedImages={activityById?.data.attributes.imagesComponent[0]}
/>
</div>
<div className="col-2">
<ImageUploadPopUp
isUpdate={isUpdate}
setimagesArrayComponent={setimage2}
imagesArrayComponent={imagesArrayComponent}
populatedImages={activityById?.data.attributes.imagesComponent[1]}
/>
</div>
<div className="col-2">
<ImageUploadPopUp
isUpdate={isUpdate}
setimagesArrayComponent={setimage3}
imagesArrayComponent={imagesArrayComponent}
populatedImages={activityById?.data.attributes.imagesComponent[2]}
/>
</div>
<div className="col-2">
<ImageUploadPopUp
isUpdate={isUpdate}
setimagesArrayComponent={setimage4}
imagesArrayComponent={imagesArrayComponent}
populatedImages={activityById?.data.attributes.imagesComponent[3]}
/>
</div>
<div className="col-2">
<ImageUploadPopUp
isUpdate={isUpdate}
setimagesArrayComponent={setimage5}
imagesArrayComponent={imagesArrayComponent}
populatedImages={activityById?.data.attributes.imagesComponent[4]}
/>
</div>
</div>
{console.log("setimagesArrayComponent", [image1, image2, image3, image4, image5])}
{/* <button
onClick={e => {
e.preventDefault();
console.log("ids", [image1, image2, image3, image4, image5]);
}}
>
asd
</button> */}
<br />
<br />
<br />
<br />
<>
{/* <button
onClick={e => {
e.preventDefault();
setshowImageUploadModal(true);
}}
>
Open{" "}
</button> */}
{/* <br />
<br /> */}
</>
{console.log("errors", errors)}
<div className="row">
<div className="col-6 col-lg-5">
<div className="input-group">
<Button type="submit" className="btn btn-primary btn-submit" disabled={Object.keys(errors).length > 0}>
Submit
</Button>
</div>
</div>
<div className="col-6 col-lg-5">
<div className="input-group">
<Button
onClick={() => {
router.push("/vendor/activities");
}}
className="btn btn-primary btn-submit"
>
See all activities
</Button>
</div>
</div>
</div>
</div>
</Form>
)}
</Formik>
</div>
</div>
</div>
{/* <Modal show={showImageUploadModal} centered onHide={() => setshowImageUploadModal()}>
<Modal.Header closeButton>Add Images</Modal.Header>
<Modal.Body>
</Modal.Body>
</Modal> */}
<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>
);
};
const AccordionItem = ({ index, expanded, toggleAccordion, remove, children }) => {
return (
<div>
<div className="d-flex align-items-center justify-content-between" onClick={toggleAccordion} style={{ cursor: "pointer" }}>
<p className="textH mb-0">Activity Name {index + 1}</p>
<div>{expanded ? <Image alt="" width="24" height="24" src="/images/vendor/minus.svg" /> : <Image alt="" width="24" height="24" src="/images/vendor/plus.svg" />}</div>
</div>
<div style={{ display: expanded ? "block" : "none" }}>{children}</div>
</div>
);
};
export default ActivityDetails;