import Svg from "@/components/svg"; import React, { useEffect, useState } from "react"; import { useForm, Controller } from "react-hook-form"; import { z } from "zod"; import { zodResolver } from "@hookform/resolvers/zod"; import { useAuth } from "@/context/useAuth"; import ImageWithFallback from "@/components/ImageWithFallback"; import { convertSlugToCapitalLetter } from "@/services/Comman"; import DatePicker from "react-datepicker"; import "react-datepicker/dist/react-datepicker.css"; import { postAPIAuthWithoutBearer } from "@/services/ApiService"; import { useMutation } from "@tanstack/react-query"; import { useRouter } from "next/navigation"; import { ShowToast } from "@/utils/ShowToast"; const schema = z.object({ firstName: z.string().min(1, "First name is required"), lastName: z.string().min(1, "Last name is required"), email: z.string().email("Enter a valid email").min(1, "Email is required"), phoneNumber: z .string() .min(10, "Phone number must be at least 10 digits") .max(15, "Phone number too long"), company: z.string().optional(), dates: z.array(z.date()).min(1, "Please select at least one date"), guests: z.string().min(1, "Please select number of guests"), message: z.string().optional(), }); const BuyPassPopup = ({ setIsOpen, spaceData,setIsUpdateAddressOpen }) => { const router = useRouter(); const { user, token } = useAuth(); const [open, setOpen] = useState(false); const [successScreen, setSuccessScreen] = useState(false); const { register, handleSubmit, control, setValue, formState: { errors }, watch, } = useForm({ resolver: zodResolver(schema), defaultValues: { firstName: "", lastName: "", email: "", phoneNumber: "", company: "", dates: [], guests: "1", message: "", }, }); const values = watch(); useEffect(() => { if (user) { setValue("firstName", user.firstName); setValue("lastName", user.lastName); setValue("email", user.email); setValue("phoneNumber", user.mobile); setValue("company", user.companyName); } }, [user]); const { mutate: paymentStatusMutate, isPending: isPaymentStatusPending } = useMutation({ mutationFn: async (payload) => { const res = await postAPIAuthWithoutBearer( `user/payment-status`, payload, token ); return res.data; }, onSuccess: (data) => { if (data?.success) { setSuccessScreen(true); setTimeout(() => { router.push(`/booking-detail/${data?.bookingId}`); }, 500); } else { ShowToast(data?.message,"error"); } }, onError: (error) => { ShowToast(error?.message,"error"); }, }); const { mutate: submitMutate, isPending: isSubmitPending } = useMutation({ mutationFn: async (payload) => { const res = await postAPIAuthWithoutBearer( `user/coworkingCreateBooking/${spaceData?.id}`, payload, token ); return res.data; }, onSuccess: (data) => { if (data?.success) { const options = { key: data.razorpayOrder.key_id, amount: data.razorpayOrder.amount_paid * 100, currency: "INR", name: data.razorpayOrder.product_name || "Booking Payment", description: data.razorpayOrder.description || "Payment", order_id: data.razorpayOrder.order_id, prefill: { name: data.userData?.name, email: data.userData?.email, contact: data.userData?.mobile || data.razorpayOrder.contact, }, handler: function (response) { const payload = { razorpay_payment_id: response.razorpay_payment_id, razorpay_order_id: response.razorpay_order_id, razorpay_signature: response.razorpay_signature, amount: data.razorpayOrder.amount_paid, }; paymentStatusMutate(payload); }, modal: { ondismiss: function () { ShowToast("Payment Failed!","error"); }, }, theme: { color: "#f76900" }, }; const rzp = new window.Razorpay(options); rzp.open(); } else { ShowToast(data?.message,"error"); } }, onError: (error) => { ShowToast(error.message,"error"); }, }); const onSubmit = (values) => { if(!user?.billingAddress){ setIsUpdateAddressOpen(true); return ; } const dates = values.dates.map((date) => { const d = new Date(date); d.setMinutes(d.getMinutes() - d.getTimezoneOffset()); return d.toISOString().split("T")[0]; }); const payload = { startDate: dates, firstName: values.firstName, lastName: values.lastName, email: values.email, mobile: values.phoneNumber, companyName: values.company, ofDays: 1, estimateArrivalTime: "00.00", noOfGuest: values.guests, message: values?.message, spaceLocation: spaceData?.location_name, }; submitMutate(payload); }; const subtotal = values?.dates?.reduce( (acc, item) => acc + spaceData?.originalPrice * values?.guests, 0 ); const gst = subtotal * 0.18; const total = subtotal + gst; return (
setIsOpen(false)} /> {successScreen ? (

Booking complete

) : (
setIsOpen(false)} >

Complete your Day Pass Booking

{/* First Name */}
{ e.target.value = e.target.value.replace(/[^A-Za-z\s]/g, ""); }} className="peer w-full border-b text-sm text-black placeholder:text-[#0000008a] border-[#0000006b] focus:border-[#3f51b5] outline-none pt-2.5 pb-1.5 bg-transparent" /> {errors.firstName && (

{errors.firstName.message}

)}
{/* Last Name */}
{ e.target.value = e.target.value.replace(/[^A-Za-z\s]/g, ""); }} className="peer w-full border-b text-sm text-black placeholder:text-[#0000008a] border-[#0000006b] focus:border-[#3f51b5] outline-none pt-2.5 pb-1.5 bg-transparent" /> {errors.lastName && (

{errors.lastName.message}

)}
{/* Email */}
{errors.email && (

{errors.email.message}

)}
{/* Phone */}
{errors.phoneNumber && (

{errors.phoneNumber.message}

)}
{/* Company */}
{ const handleDateChange = (date) => { const current = field.value || []; const exists = current.find( (d) => d.toDateString() === date.toDateString() ); let updatedDates; if (exists) { updatedDates = current.filter( (d) => d.toDateString() !== date.toDateString() ); } else { updatedDates = [...current, date]; } field.onChange(updatedDates); // Close calendar after selection setOpen(false); }; const removeDate = (dateToRemove) => { field.onChange( field.value.filter( (d) => d.toDateString() !== dateToRemove.toDateString() ) ); }; return ( <>
setOpen(true)} > {field.value.length === 0 ? ( Choose one and more dates ) : ( field.value.map((d, i) => (
{d.toLocaleDateString("en-IN")}
)) )}
{open && (
setOpen(false)} />
)} {errors.dates && (

{errors.dates.message}

)} ); }} />
{/* Guests */}
{errors.guests && (

{errors.guests.message}

)}
{/* Message */}
{/* Submit Button */}

You will not be charged until you confirm this booking on the next screen

{spaceData?.actual_name || spaceData?.name}

{convertSlugToCapitalLetter( spaceData?.location_name || "" )}

{" "} {" "} {spaceData?.originalPrice} / Day

Booking Summary

{values?.dates?.map((item, index) => (
{new Date(item).toLocaleDateString("en-US", { weekday: "short", year: "numeric", month: "short", day: "numeric", })} , Guest {values?.guests} X

{" "} {" "} {spaceData?.originalPrice}

{" "} {(values?.guests * spaceData?.originalPrice)?.toLocaleString("en-IN")}
))}
Subtotal {" "} {subtotal?.toLocaleString("en-IN")}
GST(18%) {" "} {gst?.toLocaleString("en-IN")}
Payable Now {" "} {total?.toLocaleString("en-IN")}
)}
); }; export default BuyPassPopup;