stay_commerce-frontend 0.1.0 → 0.1.1

data/app/javascript/react/components/Listing-stay-Detail/BookingModal.jsx

@@ -5,6 +5,7 @@ import { useFormik } from "formik";
 import ButtonPrimary from "../../shared/Button/ButtonPrimary";
 import { currencySymbol } from "../../shared/CurrencySymbol";
 import Badge from "../../shared/Badge/Badge";
+import DatePicker from "react-datepicker";
 
 const BookingModal = ({
   isOpen,
@@ -13,10 +14,26 @@ const BookingModal = ({
   propertyData,
   onSubmit,
   isLoading,
+  error: externalError,
 }) => {
   const [error, setError] = useState("");
   const [isButtonDisabled, setIsButtonDisabled] = useState(true);
+  const bookedDateRanges = room?.booked_dates || [];
+  const excludedDates = bookedDateRanges.flatMap(([start, end]) => {
+    const startDate = moment(start);
+    const endDate = moment(end);
+    const dates = [];
 
+    for (
+      let m = startDate.clone();
+      m.isSameOrBefore(endDate);
+      m.add(1, "day")
+    ) {
+      dates.push(m.toDate());
+    }
+
+    return dates;
+  });
   const formik = useFormik({
     initialValues: {
       number_of_guests: null,
@@ -31,6 +48,14 @@ const BookingModal = ({
     },
   });
 
+  // Update error state when external error changes
+  useEffect(() => {
+    if (externalError) {
+      setError(externalError);
+    }
+  }, [externalError]);
+
+  // Update form validation
   useEffect(() => {
     const { booking_start, booking_end, number_of_guests } = formik.values;
     if (booking_start && booking_end && number_of_guests) {
@@ -40,12 +65,44 @@ const BookingModal = ({
     }
   }, [formik.values]);
 
+  // Reset form when room changes
+  useEffect(() => {
+    if (room) {
+      formik.setValues({
+        number_of_guests: null,
+        booking_start: null,
+        booking_end: null,
+        room_id: room.id,
+        price_per_month: room.price_per_month,
+      });
+      setError("");
+    }
+  }, [room]);
+
   const handleBackdropClick = (e) => {
     if (e.target === e.currentTarget) {
       onClose();
     }
   };
 
+  const handleFormSubmit = (e) => {
+    e.preventDefault();
+    if (
+      !formik.values.booking_start ||
+      !formik.values.booking_end ||
+      !formik.values.number_of_guests
+    ) {
+      setError("Please fill in all required fields");
+      return;
+    }
+
+    // Clear any existing errors
+    setError("");
+
+    // Call the submit handler
+    formik.handleSubmit();
+  };
+
   if (!isOpen || !room) return null;
 
   return (
@@ -99,10 +156,23 @@ const BookingModal = ({
         >
           <X size={20} />
         </button>
+
         <div style={{ marginBottom: "24px", paddingRight: "40px" }}>
           <h2 style={{ margin: 0, fontSize: "24px", fontWeight: "600" }}>
             {room?.name}
           </h2>
+          {/* Display Property Information */}
+          {propertyData && (
+            <p
+              style={{
+                margin: "8px 0 0 0",
+                color: "#6b7280",
+                fontSize: "14px",
+              }}
+            >
+              Property: {propertyData.title}
+            </p>
+          )}
         </div>
 
         <div className="listingSectionSidebar__wrap">
@@ -133,7 +203,7 @@ const BookingModal = ({
             </span>
           </div>
 
-          <form onSubmit={formik.handleSubmit}>
+          <form onSubmit={handleFormSubmit}>
             <div
               className="form-content"
               style={{ display: "flex", flexDirection: "column", gap: "10px" }}
@@ -149,21 +219,17 @@ const BookingModal = ({
                 >
                   Availability Start Date
                 </label>
-                <input
+                <DatePicker
                   id={`booking_start_${room?.id}`}
-                  type="date"
                   className="form-input-large"
-                  disabled={room?.to_book === false}
-                  value={
-                    formik?.values?.booking_start
-                      ? moment(formik?.values?.booking_start).format(
-                          "YYYY-MM-DD"
-                        )
-                      : ""
+                  selected={
+                    formik.values.booking_start
+                      ? new Date(formik.values.booking_start)
+                      : null
                   }
-                  onChange={(e) => {
+                  onChange={(date) => {
                     setError("");
-                    formik.setFieldValue("booking_start", e.target.value);
+                    formik.setFieldValue("booking_start", date);
                     formik.setFieldValue("booking_end", null);
                     formik.setFieldValue("number_of_guests", null);
                     formik.setFieldValue("room_id", room?.id);
@@ -172,10 +238,11 @@ const BookingModal = ({
                       room?.price_per_month
                     );
                   }}
-                  min={
+                  disabled={room?.to_book === false}
+                  minDate={
                     room?.to_book === true
-                      ? typeof room?.next_available_date === "string"
-                        ? moment(room?.next_available_date).format("YYYY-MM-DD")
+                      ? room?.next_available_date
+                        ? new Date(room.next_available_date)
                         : moment(
                             moment(
                               room?.booking_start ??
@@ -184,7 +251,7 @@ const BookingModal = ({
                               ? room?.booking_start ??
                                   propertyData?.availability_start
                               : new Date()
-                          ).format("YYYY-MM-DD")
+                          ).toDate()
                       : moment(
                           moment(
                             room?.booking_start ??
@@ -193,24 +260,19 @@ const BookingModal = ({
                             ? room?.booking_start ??
                                 propertyData?.availability_start
                             : new Date()
-                        ).format("YYYY-MM-DD")
+                        ).toDate()
                   }
-                  max={
+                  maxDate={
                     room?.booking_end
-                      ? moment(room?.booking_end).format("YYYY-MM-DD")
+                      ? new Date(room.booking_end)
                       : propertyData?.availability_end
-                      ? moment(propertyData?.availability_end).format(
-                          "YYYY-MM-DD"
-                        )
+                      ? new Date(propertyData.availability_end)
                       : undefined
                   }
-                  style={{
-                    width: "100%",
-                    padding: "12px",
-                    border: "1px solid #d1d5db",
-                    borderRadius: "8px",
-                    fontSize: "16px",
-                  }}
+                  excludeDates={excludedDates}
+                  placeholderText="Select start date"
+                  dateFormat="yyyy-MM-dd"
+                  isClearable
                 />
               </div>
 
@@ -225,42 +287,31 @@ const BookingModal = ({
                 >
                   Availability End Date
                 </label>
-                <input
-                  type="date"
+                <DatePicker
                   id={`booking_end_${room?.id}`}
                   className="form-input-large"
-                  disabled={room?.to_book === false}
-                  value={
-                    formik?.values?.booking_end
-                      ? moment(formik?.values?.booking_end).format("YYYY-MM-DD")
-                      : ""
+                  selected={
+                    formik.values.booking_end
+                      ? new Date(formik.values.booking_end)
+                      : null
                   }
-                  onChange={(e) => {
+                  onChange={(date) => {
                     setError("");
                     formik.setFieldValue("room_id", room?.id);
                     formik.setFieldValue(
                       "price_per_month",
                       room?.price_per_month
                     );
-                    formik.setFieldValue("booking_end", e.target.value);
+                    formik.setFieldValue("booking_end", date);
                   }}
-                  min={
-                    formik?.values?.booking_start
-                      ? moment(formik?.values?.booking_start)
-                          .add(1, "day")
-                          .format("YYYY-MM-DD")
-                      : room?.to_book === true
-                      ? typeof room.next_available_date === "string"
-                        ? moment(room.next_available_date).format("YYYY-MM-DD")
-                        : moment(
-                            moment(
-                              room?.booking_start ??
-                                propertyData?.availability_start
-                            ).isAfter(moment())
-                              ? room?.booking_start ??
-                                  propertyData?.availability_start
-                              : new Date()
-                          ).format("YYYY-MM-DD")
+                  disabled={room?.to_book === false}
+                  minDate={
+                    formik.values.booking_start
+                      ? moment(formik.values.booking_start)
+                          .add(1, "days")
+                          .toDate()
+                      : room?.next_available_date
+                      ? new Date(room.next_available_date)
                       : moment(
                           moment(
                             room?.booking_start ??
@@ -269,36 +320,22 @@ const BookingModal = ({
                             ? room?.booking_start ??
                                 propertyData?.availability_start
                             : new Date()
-                        ).format("YYYY-MM-DD")
+                        ).toDate()
                   }
-                  max={
+                  maxDate={
                     room?.booking_end
-                      ? moment(room?.booking_end).format("YYYY-MM-DD")
+                      ? new Date(room.booking_end)
                       : propertyData?.availability_end
-                      ? moment(propertyData?.availability_end).format(
-                          "YYYY-MM-DD"
-                        )
+                      ? new Date(propertyData.availability_end)
                       : undefined
                   }
-                  style={{
-                    width: "100%",
-                    padding: "12px",
-                    border: "1px solid #d1d5db",
-                    borderRadius: "8px",
-                    fontSize: "16px",
-                  }}
+                  excludeDates={excludedDates}
+                  placeholderText="Select end date"
+                  dateFormat="yyyy-MM-dd"
+                  isClearable
                 />
               </div>
 
-              {error && (
-                <span
-                  className="error-text"
-                  style={{ color: "#ef4444", fontSize: "14px" }}
-                >
-                  {error}
-                </span>
-              )}
-
               <div className="form-group">
                 <label
                   htmlFor={`number_of_guests_${room?.id}`}
@@ -323,14 +360,6 @@ const BookingModal = ({
                     !formik.values.booking_end ||
                     room?.to_book === false
                   }
-                  style={{
-                    width: "100%",
-                    padding: "12px",
-                    border: "1px solid #d1d5db",
-                    borderRadius: "8px",
-                    fontSize: "16px",
-                    backgroundColor: "white",
-                  }}
                 >
                   <option value="" disabled>
                     Select number of guests
@@ -342,53 +371,69 @@ const BookingModal = ({
                   ))}
                 </select>
               </div>
+
+              {error && (
+                <div
+                  className="error-text"
+                  style={{
+                    color: "#ef4444",
+                    fontSize: "14px",
+                    padding: "8px",
+                    backgroundColor: "#fef2f2",
+                    border: "1px solid #fecaca",
+                    borderRadius: "4px",
+                  }}
+                >
+                  {error}
+                </div>
+              )}
             </div>
-          </form>
 
-          <div
-            className="price-breakdown"
-            style={{
-              marginTop: "24px",
-              paddingTop: "15px",
-              borderTop: "1px solid #e5e7eb",
-            }}
-          >
             <div
-              className="price-row"
+              className="price-breakdown"
               style={{
-                display: "flex",
-                justifyContent: "space-between",
-                alignItems: "center",
+                paddingTop: "15px",
+                borderTop: "1px solid #e5e7eb",
               }}
             >
-              <div className="info-icon">
-                <span style={{ fontWeight: "500" }}>Amount</span>
+              <div
+                className="price-row"
+                style={{
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                }}
+              >
+                <div className="info-icon">
+                  <span style={{ fontWeight: "500" }}>Amount</span>
+                </div>
+                <span style={{ fontWeight: "600", fontSize: "18px" }}>
+                  {`${currencySymbol()} ${
+                    Number(room?.price_per_month)?.toFixed(2) || 0
+                  }`}
+                </span>
               </div>
-              <span style={{ fontWeight: "600", fontSize: "18px" }}>
-                {`${currencySymbol()} ${
-                  Number(room?.price_per_month)?.toFixed(2) || 0
-                }`}
-              </span>
             </div>
-          </div>
 
-          <div
-            className="button-group"
-            style={{ marginTop: "24px", width: "100%" }}
-          >
-            <ButtonPrimary
-              disabled={
-                isButtonDisabled ||
-                room?.status === "inactive" ||
-                room?.to_book === false
-              }
-              onClick={formik.handleSubmit}
-              loading={isLoading}
-              className="book-now-btn"
+            <div
+              className="button-group"
+              style={{ marginTop: "24px", width: "100%" }}
             >
-              Book Now
-            </ButtonPrimary>
-          </div>
+              <ButtonPrimary
+                type="submit"
+                disabled={
+                  isButtonDisabled ||
+                  room?.status === "inactive" ||
+                  room?.to_book === false ||
+                  isLoading
+                }
+                loading={isLoading}
+                className="book-now-btn"
+              >
+                Book Now
+              </ButtonPrimary>
+            </div>
+          </form>
         </div>
       </div>
     </div>