Skip to content

Jay Mehta / zango-frontend

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

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

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