Skip to content

Jay Mehta / zango-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 0a9aece7 by Jyotsna
Options

activity details page ui

1 parent e0078142
Inline Side-by-side
Showing 5 changed files with 751 additions and 432 deletions
components/vendor/ActivityDetails.js
import Image from "next/image"; import Image from "next/image";
import { Formik } from "formik"; import { ErrorMessage, FieldArray, Formik } from "formik";
import { Fragment } from "react"; import { Fragment, useState } from "react";
import { Button, Form } from "react-bootstrap"; import { Button, Form } from "react-bootstrap";
import * as Yup from "yup"; import * as Yup from "yup";
import { FaTimes, FaTrash } from "react-icons/fa";
const ActivityDetails = () => { const ActivityDetails = () => {
const activityDetailsValidationSchema = Yup.object().shape({ const [expandedIndex, setExpandedIndex] = useState(0); // Initially set the first item as expanded
category: Yup.string()
.required("Category is Required"), const toggleAccordion = (index) => {
subcategory: Yup.string() setExpandedIndex((prevIndex) => (prevIndex === index ? null : index));
.required("SubCategory is Required"), };
activity_name: Yup.string()
.required("Activity Name is Required"),
activity_description: Yup.string()
.required("Activity Description is Required"),
location: Yup.string()
.required("Location is Required"),
address: Yup.string()
.required("Address is Required"),
price_per_person: Yup.string()
.required("Price Per Person is Required"),
gifting_to_someone: Yup.string()
.required("Gifting to someone is Required"),
place: Yup.string()
.required("Place is Required"),
contact_person_for_activity: Yup.string()
.required("City is Required"),
min_group_size: Yup.string()
.required("Address Line 1 is Required"),
max_group_size: Yup.string()
.required("Address Line 2 is Required"),
month: Yup.string()
.required("Month is Required"),
min_duration: Yup.string()
.required("Month is Required"),
max_duration: Yup.string()
.required("Month is Required"),
link_of_booking: Yup.string() const activityDetailsValidationSchema = Yup.object().shape({
.required("Link of Booking is Required"), activities: Yup.array().of(
activity_images: Yup.array(), Yup.object().shape({
contact_person_for_booking: Yup.string(), category: Yup.string().required("Category is Required"),
contact_number_for_booking: Yup.string(), subCategory: Yup.string().required("SubCategory is Required"),
cancellation_policy_file: Yup.string(), activityName: Yup.string().required("Activity Name is Required"),
terms_conditions_file: Yup.string(), activityDescription: Yup.string().required("Activity Description is Required"),
location: Yup.string().required("Location is Required"),
addressLine1: Yup.string().required("Address is Required"),
addressLine2: Yup.string().required("Address is Required"),
pricePerPerson: Yup.string().required("Price Per Person is Required"),
giftingToSomeone: Yup.string().required("Gifting to someone is Required"),
place: Yup.string().required("Place is Required"),
contactPersonForActivity: Yup.string().required("Contact Person Name is Required"),
minGroupSize: Yup.string().required("Min Group Size is Required"),
maxGroupSize: Yup.string().required("Max Group Size is Required"),
months: Yup.string().required("Month is Required"),
minDuration: Yup.string().required("Min Duration is Required"),
maxDuration: Yup.string().required("Max Duration is Required"),
durationUnit: Yup.string().required("Duration Unit is Required"),
ageGroup: Yup.string().required("Age Group is Required"),
linkOfBooking: Yup.string().required("Link of Booking is Required"),
activityImages: Yup.array(),
contactPersonForBooking: Yup.string(),
contactNumberForBooking: Yup.string(),
cancellationPolicyFile: Yup.string(),
termsConditionsFile: Yup.string(),
})
)
}); });
return ( return (
...@@ -52,41 +49,37 @@ const ActivityDetails = () => { ...@@ -52,41 +49,37 @@ const ActivityDetails = () => {
<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">
<div className="d-flex align-items-center justify-content-between">
<h4 className="mb-0">Activity Details</h4>
<Button type="button" variant="" className="btnAdd m-0">
<span className="image-container me-2">
<Image alt="" layout="fill" src="/images/vendor/icon-plus.svg" className="image" />
</span>
<span>Add Activity</span>
</Button>
</div>
<hr />
<div className="form-container"> <div className="form-container">
<Formik <Formik
initialValues={{ initialValues={{
category: "", activities: [
subcategory: "", {
activity_name: "", category: "",
activity_description: "", subCategory: "",
location: "", activityName: "",
address: "", activityDescription: "",
price_per_person: "", location: "",
gifting_to_someone: "", addressLine1: "",
place: "", addressLine2: "",
contact_person_for_activity: "", pricePerPerson: "",
min_group_size: "", giftingToSomeone: "",
max_group_size: "", place: "",
month: "", contactPersonForActivity: "",
min_duration: "", minGroupSize: "",
max_duration: "", maxGroupSize: "",
months: "",
link_of_booking: "", minDuration: "",
activity_images: [], maxDuration: "",
contact_person_for_booking: "", durationUnit: "",
contact_number_for_booking: "", ageGroup: "",
cancellation_policy_file: "", linkOfBooking: "",
terms_conditions_file: "", activityImages: [],
contactPersonForBooking: "",
contactNumberForBooking: "",
cancellationPolicyFile: "",
termsConditionsFile: "",
}
]
}} }}
validationSchema={activityDetailsValidationSchema} validationSchema={activityDetailsValidationSchema}
// enableReinitialize={true} // enableReinitialize={true}
...@@ -94,311 +87,541 @@ const ActivityDetails = () => { ...@@ -94,311 +87,541 @@ const ActivityDetails = () => {
console.log("activity details values", values) console.log("activity details values", values)
}} }}
> >
{({ values, errors, touched, handleChange, handleBlur, handleSubmit }) => ( {({ values, errors, touched, handleChange, handleBlur, handleSubmit, setFieldValue }) => (
<Form <Form
onSubmit={e => { onSubmit={e => {
e.preventDefault(); e.preventDefault();
handleSubmit(); handleSubmit();
}} }}
> >
<p className="textH">Activity Name 1</p> <FieldArray name="activities">
<div> {({ push, remove }) => (
<p className="textH">Basic Details</p> <div className="activityDetails">
<div className="row"> <div className="d-flex justify-content-between mb-3">
<div className="col-12 col-lg-5"> <h4 className="mb-0">Activity Details</h4>
<div className="input-group"> <Button type="button" variant="" className="btnAdd m-0"
<label>Category</label> onClick={() => {
<select push({
id="category" category: "",
name="category" subCategory: "",
onChange={handleChange} activityName: "",
onBlur={handleBlur} activityDescription: "",
> location: "",
<option value="">Select</option> addressLine1: "",
<option value="Category 1">Category 1</option> addressLine2: "",
<option value="Category 2">Category 2</option> pricePerPerson: "",
</select> giftingToSomeone: "",
{errors.category && touched.category && (<span className="form-error">{errors.category}</span>)} place: "",
</div> contactPersonForActivity: "",
</div> minGroupSize: "",
<div className="col-12 offset-lg-1 col-lg-5"> maxGroupSize: "",
<div className="input-group"> months: "",
<label>SubCategory</label> minDuration: "",
<select maxDuration: "",
id="subcategory" durationUnit: "",
name="subcategory" ageGroup: "",
onChange={handleChange} linkOfBooking: "",
onBlur={handleBlur} activityImages: [],
> contactPersonForBooking: "",
<option value="">Select</option> contactNumberForBooking: "",
<option value="Sub Category 1">Sub Category 1</option> cancellationPolicyFile: "",
<option value="Sub Category 2">Sub Category 2</option> termsConditionsFile: "",
</select> });
{errors.subcategory && touched.subcategory && (<span className="form-error">{errors.subcategory}</span>)} setExpandedIndex(values.activities.length);
</div> }}
</div>
</div>
<div className="row">
<div className="col-12 col-lg-5">
<div className="input-group">
<label>Activity Name</label>
<input
type="text"
name="activity_name"
onChange={handleChange}
onBlur={handleBlur}
value={values.activity_name}
/>
{errors.activity_name && touched.activity_name && (<span className="form-error">{errors.activity_name}</span>)}
</div>
</div>
<div className="col-12 offset-lg-1 col-lg-5">
<div className="input-group">
<label>Activity Description</label>
<input
type="text"
name="activity_description"
onChange={handleChange}
onBlur={handleBlur}
value={values.activity_description}
/>
{errors.activity_description && touched.activity_description && (<span className="form-error">{errors.activity_description}</span>)}
</div>
</div>
</div>
<div className="row">
<div className="col-12 col-lg-5">
<div className="input-group">
<label>Location</label>
<select
id="location"
name="location"
onChange={handleChange}
onBlur={handleBlur}
> >
<option value="">Select</option> <span className="image-container me-2">
<option value="Location 1">Location 1</option> <Image alt="" layout="fill" src="/images/vendor/icon-plus.svg" className="image" />
<option value="Location 2">Location 2</option> </span>
</select> <span>Add Activity</span>
{errors.location && touched.location && (<span className="form-error">{errors.location}</span>)} </Button>
</div>
</div>
<div className="col-12 offset-lg-1 col-lg-5">
<div className="input-group">
<label>Address</label>
<input
type="text"
name="address"
onChange={handleChange}
onBlur={handleBlur}
value={values.address}
/>
{errors.address && touched.address && (<span className="form-error">{errors.address}</span>)}
</div>
</div>
</div>
<div className="row">
<div className="col-12 col-lg-5">
<div className="input-group">
<label>Price (per person)</label>
<input
type="text"
name="price_per_person"
onChange={handleChange}
onBlur={handleBlur}
value={values.price_per_person}
/>
{errors.price_per_person && touched.price_per_person && (<span className="form-error">{errors.price_per_person}</span>)}
</div>
</div>
<div className="col-12 offset-lg-1 col-lg-5">
<div className="input-group">
<label>Gifting to Someone</label>
<div className="row">
<div className="col-6 col-lg-6">
<label htmlFor="gifting_allowed">
<input
type="radio"
id="gifting_allowed"
name="gifting_to_someone"
onChange={handleChange}
onBlur={handleBlur}
value="gifting_allowed"
/> Allowed
</label>
</div>
<div className="col-6 col-lg-6">
<label htmlFor="gifting_disallowed">
<input
type="radio"
id="gifting_disallowed"
name="gifting_to_someone"
onChange={handleChange}
onBlur={handleBlur}
value="gifting_disallowed"
/> Disallowed
</label>
</div>
</div>
{errors.gifting_to_someone && touched.gifting_to_someone && (<span className="form-error">{errors.gifting_to_someone}</span>)}
</div> </div>
</div> {values.activities.map((_, index) => (
</div> <div key={index} className="accordionItem">
<div className="row"> <AccordionItem
<div className="col-12 col-lg-5"> index={index}
<div className="input-group"> expanded={expandedIndex === index}
<label>Place</label> toggleAccordion={() => toggleAccordion(index)}
<div className="row"> remove={() => remove(index)}
<div className="col-4 col-lg-4"> >
<label htmlFor="indoor"> <div>
<input <div className="mt-4">
type="radio" {/* <p className="textH">Basic Details</p> */}
id="indoor" <div className="d-flex justify-content-between">
name="place" <p className="textH">Basic Details</p>
onChange={handleChange} {index > 0 && (
onBlur={handleBlur} <div style={{ cursor: "pointer" }} onClick={remove}><FaTrash style={{ marginTop: "-5px" }} /> Remove</div>
value="indoor" )}
/> Indoor </div>
</label>
</div> <div className="row">
<div className="col-4 col-lg-4"> <div className="col-12 col-lg-6">
<label htmlFor="outdoor"> <div className="input-group">
<input <label>Category</label>
type="radio" <select
id="outdoor" id={`activities.${index}.category`}
name="place" name={`activities.${index}.category`}
onChange={handleChange} onChange={handleChange}
onBlur={handleBlur} onBlur={handleBlur}
value="outdoor" >
/> Outdoor <option value="">Select</option>
</label> <option value="Category 1">Category 1</option>
</div> <option value="Category 2">Category 2</option>
<div className="col-4 col-lg-4"> </select>
<label htmlFor="both"> <ErrorMessage name={`activities.${index}.category`} component="div" className="form-error" />
<input </div>
type="radio" </div>
id="both" <div className="col-12 col-lg-6">
name="place" <div className="input-group">
onChange={handleChange} <label>SubCategory</label>
onBlur={handleBlur} <select
value="both" id={`activities.${index}.subCategory`}
/> Both name={`activities.${index}.subCategory`}
</label> onChange={handleChange}
</div> onBlur={handleBlur}
</div> >
{errors.place && touched.place && (<span className="form-error">{errors.place}</span>)} <option value="">Select</option>
</div> <option value="Sub Category 1">Sub Category 1</option>
</div> <option value="Sub Category 2">Sub Category 2</option>
</div> </select>
</div> <ErrorMessage name={`activities.${index}.category`} component="div" className="form-error" />
<hr /> </div>
<div> </div>
<p>Group Information</p> </div>
<div className="row"> <div className="row">
<div className="col-12 col-lg-5"> <div className="col-12 col-lg-6">
<div className="input-group"> <div className="input-group">
<label>Contact Person for the Activity</label> <label>Activity Name</label>
<input <input
type="text" type="text"
name="contact_person_for_activity" name={`activities.${index}.activityName`}
onChange={handleChange} onChange={handleChange}
onBlur={handleBlur} onBlur={handleBlur}
value={values.contact_person_for_activity} value={values.activities[index].activityName}
/> />
{errors.contact_person_for_activity && touched.contact_person_for_activity && (<span className="form-error">{errors.contact_person_for_activity}</span>)} <ErrorMessage name={`activities.${index}.activityName`} component="div" className="form-error" />
</div> </div>
</div> </div>
<div className="col-12 offset-lg-1 col-lg-5"> <div className="col-12 col-lg-6">
<div className="input-group"> <div className="input-group">
<label>Size of the Group</label> <label>Activity Description</label>
<div className="row"> <textarea
<div className="col-6 col-lg-6"> rows="4"
<div className="input-group mb-0"> name={`activities.${index}.activityDescription`}
<input onChange={handleChange}
type="text" onBlur={handleBlur}
name="min_group_size" value={values.activities[index].activityDescription}
onChange={handleChange} />
onBlur={handleBlur} <ErrorMessage name={`activities.${index}.activityDescription`} component="div" className="form-error" />
value={values.min_group_size} </div>
/> </div>
{errors.min_group_size && touched.min_group_size && (<span className="form-error">{errors.min_group_size}</span>)} </div>
</div> <div className="row">
</div> <div className="col-12 col-lg-6">
<div className="col-6 col-lg-6"> <div className="input-group">
<div className="input-group mb-0"> <label>Location</label>
<input <select
type="text" id={`activities.${index}.location`}
name="max_group_size" name={`activities.${index}.location`}
onChange={handleChange} onChange={handleChange}
onBlur={handleBlur} onBlur={handleBlur}
value={values.max_group_size} >
/> <option value="">Select</option>
{errors.max_group_size && touched.max_group_size && (<span className="form-error">{errors.max_group_size}</span>)} <option value="Location 1">Location 1</option>
</div> <option value="Location 2">Location 2</option>
</div> </select>
</div> <ErrorMessage name={`activities.${index}.location`} component="div" className="form-error" />
</div> </div>
</div> </div>
</div> <div className="col-12 col-lg-6">
</div> <div className="input-group">
<hr /> <label>Price (per person)</label>
<div> <input
<p>Availability</p> type="text"
<div className="row"> name={`activities.${index}.pricePerPerson`}
<div className="col-12 col-lg-5"> onChange={handleChange}
<div className="input-group"> onBlur={handleBlur}
<label>Months</label> value={values.activities[index].pricePerPerson}
<select />
id="month" <ErrorMessage name={`activities.${index}.pricePerPerson`} component="div" className="form-error" />
name="month" </div>
onChange={handleChange} </div>
onBlur={handleBlur} </div>
> <div className="row">
<option value="">Select</option> <div className="col-12 col-lg-6">
<option value="Location 1">Location 1</option> <div className="input-group">
<option value="Location 2">Location 2</option> <label>Address Line 1</label>
</select> <input
{errors.contact_person_for_activity && touched.contact_person_for_activity && (<span className="form-error">{errors.contact_person_for_activity}</span>)} type="text"
</div> name={`activities.${index}.addressLine1`}
</div> onChange={handleChange}
<div className="col-12 offset-lg-1 col-lg-5"> onBlur={handleBlur}
<div className="input-group"> value={values.activities[index].addressLine1}
<label>Size of the Group</label> />
<div className="row"> <ErrorMessage name={`activities.${index}.addressLine1`} component="div" className="form-error" />
<div className="col-6 col-lg-6"> </div>
<div className="input-group mb-0"> </div>
<input <div className="col-12 col-lg-6">
type="text" <div className="input-group">
name="min_group_size" <label>Address Line 2</label>
onChange={handleChange} <input
onBlur={handleBlur} type="text"
value={values.min_group_size} name={`activities.${index}.addressLine2`}
/> onChange={handleChange}
{errors.min_group_size && touched.min_group_size && (<span className="form-error">{errors.min_group_size}</span>)} onBlur={handleBlur}
</div> value={values.activities[index].addressLine2}
</div> />
<div className="col-6 col-lg-6"> <ErrorMessage name={`activities.${index}.addressLine2`} component="div" className="form-error" />
<div className="input-group mb-0"> </div>
<input </div>
type="text" </div>
name="max_group_size" <div className="row">
onChange={handleChange} <div className="col-12 col-lg-6">
onBlur={handleBlur} <div className="input-group mb-2">
value={values.max_group_size} <label>Gifting to Someone</label>
/> <div className="row">
{errors.max_group_size && touched.max_group_size && (<span className="form-error">{errors.max_group_size}</span>)} <div className="col-6 col-lg-6">
<label className="radioContainer" htmlFor={`gifting_allowed.${index}`}>
<input
type="radio"
id={`gifting_allowed.${index}`}
name={`activities.${index}.giftingToSomeone`}
onChange={handleChange}
onBlur={handleBlur}
/> Allowed
<span className="checkmark"></span>
</label>
</div>
<div className="col-6 col-lg-6">
<label className="radioContainer" htmlFor={`gifting_disallowed.${index}`}>
<input
type="radio"
id={`gifting_disallowed.${index}`}
name={`activities.${index}.giftingToSomeone`}
onChange={handleChange}
onBlur={handleBlur}
/> Disallowed
<span className="checkmark"></span>
</label>
</div>
</div>
<ErrorMessage name={`activities.${index}.giftingToSomeone`} component="div" className="form-error" />
</div>
</div>
<div className="col-12 col-lg-6">
<div className="input-group mb-2">
<label>Place</label>
<div className="row">
<div className="col-4 col-lg-4">
<label className="radioContainer" htmlFor={`indoor.${index}`}>
<input
type="radio"
id={`indoor.${index}`}
name={`activities.${index}.place`}
onChange={handleChange}
onBlur={handleBlur}
/> Indoor
<span className="checkmark"></span>
</label>
</div>
<div className="col-5 col-lg-5">
<label className="radioContainer" htmlFor={`outdoor.${index}`}>
<input
type="radio"
id={`outdoor.${index}`}
name={`activities.${index}.place`}
onChange={handleChange}
onBlur={handleBlur}
/> Outdoor
<span className="checkmark"></span>
</label>
</div>
<div className="col-3 col-lg-3">
<label className="radioContainer" htmlFor={`both.${index}`}>
<input
type="radio"
id={`both.${index}`}
name={`activities.${index}.place`}
onChange={handleChange}
onBlur={handleBlur}
/> Both
<span className="checkmark"></span>
</label>
</div>
</div>
<ErrorMessage name={`activities.${index}.place`} component="div" className="form-error" />
</div>
</div>
</div>
</div>
<hr />
<div className="mt-4">
<p className="textH">Group Information</p>
<div className="row">
<div className="col-12 col-lg-6">
<div className="input-group">
<label>Contact Person for the Activity</label>
<input
type="text"
name={`activities.${index}.contactPersonForActivity`}
onChange={handleChange}
onBlur={handleBlur}
value={values.activities[index].contactPersonForActivity}
/>
<ErrorMessage name={`activities.${index}.contactPersonForActivity`} component="div" className="form-error" />
</div>
</div>
<div className="col-12 col-lg-6">
<div className="input-group">
<label>Size of the Group</label>
<div className="row">
<div className="col-6 col-lg-5">
<input
type="text"
placeholder="Min."
name={`activities.${index}.minGroupSize`}
onChange={handleChange}
onBlur={handleBlur}
value={values.activities[index].minGroupSize}
/>
<ErrorMessage name={`activities.${index}.minGroupSize`} component="div" className="form-error" />
</div>
<div className="col-6 col-lg-5">
<input
type="text"
placeholder="Max."
name={`activities.${index}.maxGroupSize`}
onChange={handleChange}
onBlur={handleBlur}
value={values.activities[index].maxGroupSize}
/>
<ErrorMessage name={`activities.${index}.maxGroupSize`} component="div" className="form-error" />
</div>
</div>
</div>
</div>
</div>
</div>
<hr />
<div className="mt-4">
<p className="textH">Availability</p>
<div className="row">
<div className="col-12 col-lg-6">
<div className="input-group">
<label>Months</label>
<select
id={`activities.${index}.months`}
name={`activities.${index}.months`}
onChange={handleChange}
onBlur={handleBlur}
>
<option value="">Select</option>
<option value="Location 1">Location 1</option>
<option value="Location 2">Location 2</option>
</select>
<ErrorMessage name={`activities.${index}.months`} component="div" className="form-error" />
</div>
</div>
<div className="col-12 col-lg-6">
<div className="input-group">
<label>Day & Time</label>
<select
id={`activities.${index}.dayTime`}
name={`activities.${index}.dayTime`}
onChange={handleChange}
onBlur={handleBlur}
>
<option value="">Select</option>
<option value="Location 1">Location 1</option>
<option value="Location 2">Location 2</option>
</select>
<ErrorMessage name={`activities.${index}.dayTime`} component="div" className="form-error" />
</div>
</div>
</div>
<div className="row">
<div className="col-12 col-lg-6">
<div className="input-group">
<label>Duration</label>
<div className="row">
<div className="col-5 col-lg-4">
<select
id="minDuration"
name="minDuration"
onChange={handleChange}
onBlur={handleBlur}
>
<option value="">Min</option>
</select>
{errors.minDuration && touched.minDuration && (<span className="form-error">{errors.minDuration}</span>)}
</div>
<div className="col-5 col-lg-4">
<select
id="maxDuration"
name="maxDuration"
onChange={handleChange}
onBlur={handleBlur}
style={{ width: "100%" }}
>
<option value="">Max</option>
</select>
{errors.maxDuration && touched.maxDuration && (<span className="form-error">{errors.maxDuration}</span>)}
</div>
<div className="col-2 col-lg-4">
<select
id="durationUnit"
name="durationUnit"
onChange={handleChange}
onBlur={handleBlur}
>
<option value="Hrs">Hrs</option>
<option value="Mins">Mins</option>
</select>
{errors.durationUnit && touched.durationUnit && (<span className="form-error">{errors.durationUnit}</span>)}
</div>
</div>
</div>
</div>
</div>
</div>
<hr />
<div className="mt-4">
<p className="textH">Booking & Activity Information</p>
<div className="row">
<div className="col-12 col-lg-6">
<div className="input-group">
<label>Link of Booking</label>
<input
type="text"
name={`activities.${index}.linkOfBooking`}
onChange={handleChange}
onBlur={handleBlur}
value={values.activities[index].linkOfBooking}
/>
<ErrorMessage name={`activities.${index}.linkOfBooking`} component="div" className="form-error" />
</div>
</div>
</div>
<div className="row">
<div className="col-12 col-lg-6">
<div className="input-group">
<label>Contact Person Name</label>
<input
type="text"
name={`activities.${index}.contactPersonForBooking`}
onChange={handleChange}
onBlur={handleBlur}
value={values.activities[index].contactPersonForBooking}
/>
<ErrorMessage name={`activities.${index}.contactPersonForBooking`} component="div" className="form-error" />
</div>
</div>
<div className="col-12 col-lg-6">
<div className="input-group">
<label>Contact Person Number</label>
<input
type="text"
name={`activities.${index}.contactNumberForBooking`}
onChange={handleChange}
onBlur={handleBlur}
value={values.activities[index].contactNumberForBooking}
/>
<ErrorMessage name={`activities.${index}.contactNumberForBooking`} component="div" className="form-error" />
</div>
</div>
</div>
</div>
<hr />
<div className="mt-4">
<p className="textH">Policy & Terms</p>
<div className="row">
<div className="col-12 col-lg-6">
<div className="input-group">
<label>Cancellation Policy</label>
<div className="custom-file">
<input
type="file"
className="custom-file-input"
id={`activities.${index}.cancellationPolicyFile`}
name={`activities.${index}.cancellationPolicyFile`}
onChange={(event) => {
if (event) {
const file = event.currentTarget.files[0]
setFieldValue(`activities.${index}.cancellationPolicyFile`, file)
}
}}
onBlur={handleBlur}
onClick={event => {
const { target = {} } = event || {};
target.value = "";
}}
/>
<label className="custom-file-label" htmlFor={`activities.${index}.cancellationPolicyFile`}>
Upload
</label>
</div>
<ErrorMessage name={`activities.${index}.cancellationPolicyFile`} component="div" className="form-error" />
{values.activities[index].cancellationPolicyFile && (
<div className="d-flex align-items-center justify-content-between p-1" style={{ width: "100%" }}>
<p className="textS m-0">{values.activities[index].cancellationPolicyFile.name}</p>
<FaTimes style={{ cursor: "pointer" }} onClick={() => {
setFieldValue(`activities.${index}.cancellationPolicyFile`, "")
}} />
</div>
)}
</div>
</div>
<div className="col-12 col-lg-6">
<div className="input-group">
<label>Terms & Conditions</label>
<div className="custom-file">
<input
type="file"
className="custom-file-input"
id={`activities.${index}.termsConditionsFile`}
name={`activities.${index}.termsConditionsFile`}
onChange={(event) => {
if (event) {
const file = event.currentTarget.files[0]
setFieldValue(`activities.${index}.termsConditionsFile`, file)
}
}}
onBlur={handleBlur}
onClick={event => {
const { target = {} } = event || {};
target.value = "";
}}
/>
<label className="custom-file-label" htmlFor={`activities.${index}.termsConditionsFile`}>
Upload
</label>
</div>
<ErrorMessage name={`activities.${index}.termsConditionsFile`} component="div" className="form-error" />
{values.activities[index].termsConditionsFile && (
<div className="d-flex align-items-center justify-content-between p-1" style={{ width: "100%" }}>
<p className="textS m-0">{values.activities[index].termsConditionsFile.name}</p>
<FaTimes style={{ cursor: "pointer" }} onClick={() => {
setFieldValue(`activities.${index}.termsConditionsFile`, "")
}} />
</div>
)}
</div>
</div>
</div>
</div>
</div> </div>
</div> </AccordionItem>
</div> </div>
</div> ))}
</div> </div>
</div> )}
</div> </FieldArray>
<div className="row mb-5">
<div className="row">
<div className="col-12 col-lg-5"> <div className="col-12 col-lg-5">
<div className="input-group"> <div className="input-group">
<Button type="submit" className="btn btn-primary btn-submit"> <Button type="submit" className="btn btn-primary btn-submit" disabled>
Send for Approval Submit
</Button> </Button>
</div> </div>
</div> </div>
...@@ -438,8 +661,23 @@ const ActivityDetails = () => { ...@@ -438,8 +661,23 @@ const ActivityDetails = () => {
</div> </div>
</div> </div>
</div> </div>
</Fragment > </Fragment>
) )
} }
const AccordionItem = ({ index, expanded, toggleAccordion, remove, children }) => {
return (
<div>
<div className="d-flex align-items-center justify-content-between" onClick={toggleAccordion} style={{ cursor: "pointer" }}>
<p className="textH mb-0">Activity Name {index + 1}</p>
<div>
{expanded ? <Image alt="" width="24" height="24" src="/images/vendor/minus.svg" /> : <Image alt="" width="24" height="24" src="/images/vendor/plus.svg" />}
</div>
</div>
<div style={{ display: expanded ? 'block' : 'none' }}>{children}</div>
</div>
);
};
export default ActivityDetails; export default ActivityDetails;
\ No newline at end of file \ No newline at end of file
pages/test.js
// AccordionForm.js
import React, { useState } from 'react'; import React, { useState } from 'react';
import { Formik, FieldArray, Field, ErrorMessage } from 'formik'; import { Formik, Form, Field, FieldArray } from 'formik';
import * as Yup from 'yup';
const validationSchema = Yup.object().shape({
items: Yup.array().of(
Yup.object().shape({
title: Yup.string().required('Title is required'),
content: Yup.string().required('Content is required'),
})
),
});
const initialValues = {
items: [{ title: '', content: '' }],
};
const AccordionForm = () => { const AccordionForm = () => {
const [expandedIndex, setExpandedIndex] = useState(null); const [expandedIndex, setExpandedIndex] = useState(0); // Initially set the first item as expanded
const handleToggleAccordion = (index) => { const toggleAccordion = (index) => {
setExpandedIndex((prevIndex) => (prevIndex === index ? null : index)); setExpandedIndex((prevIndex) => (prevIndex === index ? null : index));
}; };
return ( return (
<div> <div>
<h1>Accordion Form</h1>
<Formik <Formik
initialValues={initialValues} initialValues={{
validationSchema={validationSchema} items: [{ title: '', content: '' }]
}}
onSubmit={(values) => { onSubmit={(values) => {
console.log(values); console.log(values);
}} }}
> >
{({ values }) => ( {({ values }) => (
<form> <Form>
<FieldArray name="items"> <FieldArray name="items">
{({ push, remove }) => ( {({ push, remove }) => (
<> <div>
{values.items.map((_, index) => ( {values.items.map((_, index) => (
<div key={index}> <div key={index}>
<div <AccordionItem
style={{ index={index}
border: '1px solid #ccc', expanded={expandedIndex === index}
padding: '10px', toggleAccordion={() => toggleAccordion(index)}
marginBottom: '10px', remove={() => remove(index)}
}}
> >
<div <div>
style={{ <Field name={`items.${index}.title`} placeholder="Title" />
display: 'flex', <Field name={`items.${index}.content`} placeholder="Content" />
justifyContent: 'space-between',
alignItems: 'center',
}}
onClick={() => handleToggleAccordion(index)}
>
<h3>Accordion {index + 1}</h3>
<button type="button" onClick={() => remove(index)}>
Remove
</button>
</div> </div>
{expandedIndex === index && ( </AccordionItem>
<div>
<div>
<label htmlFor={`items.${index}.title`}>Title</label>
<Field name={`items.${index}.title`} />
<ErrorMessage name={`items.${index}.title`} component="div" />
</div>
<div>
<label htmlFor={`items.${index}.content`}>Content</label>
<Field name={`items.${index}.content`} />
<ErrorMessage name={`items.${index}.content`} component="div" />
</div>
</div>
)}
</div>
</div> </div>
))} ))}
<button type="button" onClick={() => push({ title: '', content: '' })}> <button
Add Accordion type="button"
onClick={() => {
push({ title: '', content: '' });
setExpandedIndex(values.items.length);
}}
>
Add Item
</button> </button>
</> </div>
)} )}
</FieldArray> </FieldArray>
<button type="submit">Submit</button> <button type="submit">Submit</button>
</form> </Form>
)} )}
</Formik> </Formik>
</div> </div>
); );
}; };
export default AccordionForm;
\ No newline at end of file \ No newline at end of file
const AccordionItem = ({ index, expanded, toggleAccordion, remove, children }) => {
return (
<div>
<button type="button" onClick={toggleAccordion}>
{expanded ? '-' : '+'}
</button>
<button type="button" onClick={remove}>Remove</button>
<div style={{ display: expanded ? 'block' : 'none' }}>{children}</div>
</div>
);
};
export default AccordionForm;
public/images/vendor/minus.svg 0 → 100644
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19 11H5V13H19V11Z" fill="black"/>
</svg>
public/images/vendor/plus.svg 0 → 100644
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z" fill="black"/>
</svg>
styles/globals.css
...@@ -574,7 +574,7 @@ p { ...@@ -574,7 +574,7 @@ p {
line-height: normal; line-height: normal;
} }
span.form-error { span.form-error, .form-error {
color: red; color: red;
font-size: 0.8rem; font-size: 0.8rem;
font-family: "Sofia Pro Light"; font-family: "Sofia Pro Light";
...@@ -647,10 +647,11 @@ span.form-error { ...@@ -647,10 +647,11 @@ span.form-error {
font-size: 15px; font-size: 15px;
line-height: normal; line-height: normal;
margin-bottom: 10px; margin-bottom: 10px;
width: 100%;
} }
.form-container input, .form-container input,
.form-container select { .form-container select, .form-container textarea {
width: 100%; width: 100%;
border-radius: 10px !important; border-radius: 10px !important;
border: 0.814px solid #000; border: 0.814px solid #000;
...@@ -665,7 +666,7 @@ span.form-error { ...@@ -665,7 +666,7 @@ span.form-error {
} }
.form-container input:focus, .form-container input:focus,
.form-container select:focus { .form-container select:focus, .form-container textarea {
box-shadow: none; box-shadow: none;
outline: unset; outline: unset;
} }
...@@ -675,6 +676,11 @@ span.form-error { ...@@ -675,6 +676,11 @@ span.form-error {
background-color: transparent; background-color: transparent;
} }
.form-container textarea {
resize: none;
height: auto;
}
.contact-number { .contact-number {
width: 100%; width: 100%;
display: flex; display: flex;
...@@ -1133,11 +1139,12 @@ span.form-error { ...@@ -1133,11 +1139,12 @@ span.form-error {
/*----- vendor business details -------*/ /*----- vendor business details -------*/
.content-div { .content-div {
padding: 2rem 3rem 1rem; padding: 2rem 2rem 1rem;
background: #ffffff; background: #ffffff;
border-radius: 8px; border-radius: 8px;
box-shadow: 0px 4px 20px 0px #73737340; box-shadow: 0px 4px 20px 0px #73737340;
position: relative; position: relative;
min-height: 600px;
} }
.content-div h2 { .content-div h2 {
...@@ -1376,7 +1383,7 @@ span.form-error { ...@@ -1376,7 +1383,7 @@ span.form-error {
.btnAdd { .btnAdd {
background-color: #0070BD !important; background-color: #0070BD !important;
/* border: 1px solid #0070BD; */ /* border: 1px solid #0070BD; */
padding: 1rem 2rem !important; padding: 0.75rem 2rem !important;
border-radius: 10px !important; border-radius: 10px !important;
font-family: "Sofia Pro Bold"; font-family: "Sofia Pro Bold";
font-size: 16px !important; font-size: 16px !important;
...@@ -1389,15 +1396,104 @@ span.form-error { ...@@ -1389,15 +1396,104 @@ span.form-error {
justify-content: center; justify-content: center;
margin: 1rem auto; margin: 1rem auto;
} }
.btnAdd:disabled { .btnAdd:disabled {
background-color: #A4AFB7 !important; background-color: #A4AFB7 !important;
color: #FFFFFF; color: #FFFFFF;
border: none; border: none;
} }
.btnAdd:hover, .btnAdd:focus, .btnAdd:active {
.btnAdd:hover,
.btnAdd:focus,
.btnAdd:active {
border: 1px solid #0070BD; border: 1px solid #0070BD;
} }
.activityDetails .accordionItem {
padding: 1rem;
border-bottom: 1px solid #ECECEC;
}
.activityDetails .accordionItem:last-child {
border-bottom: none;
}
/* The radioContainer */
.radioContainer {
display: block;
position: relative;
cursor: pointer;
padding-left: 25px;
font-family: "Sofia Pro Regular";
font-size: 15px;
line-height: 15px;
letter-spacing: 0em;
text-align: left;
color: #000;
margin-top: 5px;
}
/* Hide the browser's default radio button */
.radioContainer input {
position: absolute;
opacity: 0;
cursor: pointer;
}
.form-container .radioContainer input {
height: 0;
width: 0;
}
/* Create a custom radio button */
.checkmark {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-55%);
height: 20px;
width: 20px;
background-color: #FFF;
border-radius: 50%;
border: 1px solid #75777B;
}
/* On mouse-over, add a grey background color */
.radioContainer:hover input~.checkmark {
background-color: #FFF;
}
/* When the radio button is checked, add a blue background */
.radioContainer input:checked~.checkmark {
color: #0070BD;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the indicator (dot/circle) when checked */
.radioContainer input:checked~.checkmark:after {
display: block;
}
/* Style the indicator (dot/circle) */
.radioContainer .checkmark:after {
top: 50%;
left: 50%;
width: 12px;
height: 12px;
border-radius: 50%;
background: #0070BD;
transform: translate(-50%, -50%);
}
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!