stay_commerce-frontend 0.1.0

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

@@ -0,0 +1,398 @@
+import React, { useState, useEffect } from "react";
+import { X } from "lucide-react";
+import moment from "moment";
+import { useFormik } from "formik";
+import ButtonPrimary from "../../shared/Button/ButtonPrimary";
+import { currencySymbol } from "../../shared/CurrencySymbol";
+import Badge from "../../shared/Badge/Badge";
+
+const BookingModal = ({
+  isOpen,
+  onClose,
+  room,
+  propertyData,
+  onSubmit,
+  isLoading,
+}) => {
+  const [error, setError] = useState("");
+  const [isButtonDisabled, setIsButtonDisabled] = useState(true);
+
+  const formik = useFormik({
+    initialValues: {
+      number_of_guests: null,
+      booking_start: null,
+      booking_end: null,
+      room_id: room?.id || null,
+      price_per_month: room?.price_per_month || null,
+    },
+    enableReinitialize: true,
+    onSubmit: (values) => {
+      onSubmit(values);
+    },
+  });
+
+  useEffect(() => {
+    const { booking_start, booking_end, number_of_guests } = formik.values;
+    if (booking_start && booking_end && number_of_guests) {
+      setIsButtonDisabled(false);
+    } else {
+      setIsButtonDisabled(true);
+    }
+  }, [formik.values]);
+
+  const handleBackdropClick = (e) => {
+    if (e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+
+  if (!isOpen || !room) return null;
+
+  return (
+    <div
+      className="modal-overlay"
+      onClick={handleBackdropClick}
+      style={{
+        position: "fixed",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: "rgba(0, 0, 0, 0.5)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        zIndex: 1000,
+        padding: "20px",
+      }}
+    >
+      <div
+        className="modal-content"
+        style={{
+          backgroundColor: "white",
+          borderRadius: "12px",
+          padding: "24px",
+          maxWidth: "500px",
+          width: "100%",
+          maxHeight: "90vh",
+          overflowY: "auto",
+          position: "relative",
+          boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
+        }}
+      >
+        {/* Close Button */}
+        <button
+          onClick={onClose}
+          style={{
+            position: "absolute",
+            top: "16px",
+            right: "16px",
+            background: "none",
+            border: "none",
+            cursor: "pointer",
+            padding: "8px",
+            borderRadius: "50%",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+        >
+          <X size={20} />
+        </button>
+        <div style={{ marginBottom: "24px", paddingRight: "40px" }}>
+          <h2 style={{ margin: 0, fontSize: "24px", fontWeight: "600" }}>
+            {room?.name}
+          </h2>
+        </div>
+
+        <div className="listingSectionSidebar__wrap">
+          {room?.status === "inactive" && (
+            <Badge
+              name={room?.status === "inactive" ? "Room is Inactive" : ""}
+            />
+          )}
+
+          <div className="price-parents" style={{ marginBottom: "24px" }}>
+            <span
+              className="price-header"
+              style={{ fontSize: "28px", fontWeight: "600" }}
+            >
+              {`${currencySymbol()} ${
+                Number(room?.price_per_month)?.toFixed(2) || 0
+              }`}
+              <span
+                className="price-period"
+                style={{
+                  fontSize: "16px",
+                  fontWeight: "400",
+                  color: "#6b7280",
+                }}
+              >
+                /month
+              </span>
+            </span>
+          </div>
+
+          <form onSubmit={formik.handleSubmit}>
+            <div
+              className="form-content"
+              style={{ display: "flex", flexDirection: "column", gap: "10px" }}
+            >
+              <div className="form-group">
+                <label
+                  htmlFor={`booking_start_${room?.id}`}
+                  style={{
+                    display: "block",
+                    marginBottom: "8px",
+                    fontWeight: "500",
+                  }}
+                >
+                  Availability Start Date
+                </label>
+                <input
+                  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"
+                        )
+                      : ""
+                  }
+                  onChange={(e) => {
+                    setError("");
+                    formik.setFieldValue("booking_start", e.target.value);
+                    formik.setFieldValue("booking_end", null);
+                    formik.setFieldValue("number_of_guests", null);
+                    formik.setFieldValue("room_id", room?.id);
+                    formik.setFieldValue(
+                      "price_per_month",
+                      room?.price_per_month
+                    );
+                  }}
+                  min={
+                    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")
+                      : moment(
+                          moment(
+                            room?.booking_start ??
+                              propertyData?.availability_start
+                          ).isAfter(moment())
+                            ? room?.booking_start ??
+                                propertyData?.availability_start
+                            : new Date()
+                        ).format("YYYY-MM-DD")
+                  }
+                  max={
+                    room?.booking_end
+                      ? moment(room?.booking_end).format("YYYY-MM-DD")
+                      : propertyData?.availability_end
+                      ? moment(propertyData?.availability_end).format(
+                          "YYYY-MM-DD"
+                        )
+                      : undefined
+                  }
+                  style={{
+                    width: "100%",
+                    padding: "12px",
+                    border: "1px solid #d1d5db",
+                    borderRadius: "8px",
+                    fontSize: "16px",
+                  }}
+                />
+              </div>
+
+              <div className="form-group">
+                <label
+                  htmlFor={`booking_end_${room?.id}`}
+                  style={{
+                    display: "block",
+                    marginBottom: "8px",
+                    fontWeight: "500",
+                  }}
+                >
+                  Availability End Date
+                </label>
+                <input
+                  type="date"
+                  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")
+                      : ""
+                  }
+                  onChange={(e) => {
+                    setError("");
+                    formik.setFieldValue("room_id", room?.id);
+                    formik.setFieldValue(
+                      "price_per_month",
+                      room?.price_per_month
+                    );
+                    formik.setFieldValue("booking_end", e.target.value);
+                  }}
+                  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")
+                      : moment(
+                          moment(
+                            room?.booking_start ??
+                              propertyData?.availability_start
+                          ).isAfter(moment())
+                            ? room?.booking_start ??
+                                propertyData?.availability_start
+                            : new Date()
+                        ).format("YYYY-MM-DD")
+                  }
+                  max={
+                    room?.booking_end
+                      ? moment(room?.booking_end).format("YYYY-MM-DD")
+                      : propertyData?.availability_end
+                      ? moment(propertyData?.availability_end).format(
+                          "YYYY-MM-DD"
+                        )
+                      : undefined
+                  }
+                  style={{
+                    width: "100%",
+                    padding: "12px",
+                    border: "1px solid #d1d5db",
+                    borderRadius: "8px",
+                    fontSize: "16px",
+                  }}
+                />
+              </div>
+
+              {error && (
+                <span
+                  className="error-text"
+                  style={{ color: "#ef4444", fontSize: "14px" }}
+                >
+                  {error}
+                </span>
+              )}
+
+              <div className="form-group">
+                <label
+                  htmlFor={`number_of_guests_${room?.id}`}
+                  style={{
+                    display: "block",
+                    marginBottom: "8px",
+                    fontWeight: "500",
+                  }}
+                >
+                  Number of Guests
+                </label>
+                <select
+                  id={`number_of_guests_${room?.id}`}
+                  name="number_of_guests"
+                  className="form-input-large"
+                  onChange={(e) => {
+                    formik.setFieldValue("number_of_guests", e.target.value);
+                  }}
+                  value={formik.values.number_of_guests || ""}
+                  disabled={
+                    !formik.values.booking_start ||
+                    !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
+                  </option>
+                  {Array.from({ length: room?.max_guests || 1 }, (_, i) => (
+                    <option key={i + 1} value={i + 1}>
+                      {i + 1}
+                    </option>
+                  ))}
+                </select>
+              </div>
+            </div>
+          </form>
+
+          <div
+            className="price-breakdown"
+            style={{
+              marginTop: "24px",
+              paddingTop: "15px",
+              borderTop: "1px solid #e5e7eb",
+            }}
+          >
+            <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>
+          </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"
+            >
+              Book Now
+            </ButtonPrimary>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BookingModal;

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

@@ -0,0 +1,296 @@
+import React, { useEffect, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { loadStripe } from "@stripe/stripe-js";
+import {
+  Elements,
+  CardElement,
+  useStripe,
+  useElements,
+} from "@stripe/react-stripe-js";
+import {
+  getCard,
+  deleteCard as deleteCardThunk,
+  saveCard,
+  createPayment,
+  confirmBooking,
+  getPaymentmethods,
+} from "../../redux/slices/PropertySlice/PropertySlice";
+import { toast } from "react-toastify";
+import successHandler from "../../utils/helpers/SuccessHandler";
+import { useNavigate } from "react-router-dom";
+
+const stripePromise = loadStripe(
+  "pk_test_51LCfAAJQIRLPDLbLcKwKmAbKIHjTiJYCUsWXxfbQ0UlF5N3AO2tfLgKXt4GPI7UZYJUVHi94Q4TEol5YN1PQD4AI00N1uBrnnR"
+);
+
+const CheckoutForm = ({ bookingId, totalAmount }) => {
+  const stripe = useStripe();
+  const navigate = useNavigate();
+  const elements = useElements();
+  const dispatch = useDispatch();
+  const [message, setMessage] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [cardExists, setCardExists] = useState(false);
+  const [paymentMethod, setPaymentMethod] = useState(null);
+  const [cardId, setCardId] = useState(null);
+  const [paymentMethodIds, setPaymentMethodIds] = useState([]);
+
+  useEffect(() => {
+    dispatch(getCard())
+      .unwrap()
+      .then((data) => {
+        if (data?.payment_method_token) {
+          setCardExists(true);
+          setCardId(data.id);
+          setPaymentMethod({
+            id: data.payment_method_token,
+            last4: data.cc_number?.slice(-4) || "****",
+          });
+        } else {
+          setCardExists(false);
+          setPaymentMethod(null);
+        }
+      })
+      .catch((err) => {
+        console.error("Failed to get card:", err);
+        toast.error("❌ Could not retrieve card");
+        setCardExists(false);
+        setPaymentMethod(null);
+      });
+  }, [dispatch]);
+
+  useEffect(() => {
+    const fetchPaymentMethods = async () => {
+      try {
+        const data = await dispatch(getPaymentmethods()).unwrap();
+        const ids = data.map((method) => method.id);
+        setPaymentMethodIds(ids);
+      } catch (error) {
+        console.error("Failed to fetch payment methods:", error);
+      }
+    };
+
+    fetchPaymentMethods();
+  }, [dispatch]);
+
+  const handleDeleteCard = async () => {
+    try {
+      await dispatch(deleteCardThunk(cardId)).unwrap();
+      setCardExists(false);
+      setPaymentMethod(null);
+      successHandler("Card deleted successfully");
+    } catch (error) {
+      toast.error(`❌ ${error.message}`);
+    }
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    if (!stripe || !elements) {
+      toast.error("❌ Stripe not ready");
+      return;
+    }
+    setLoading(true);
+    try {
+      if (!cardExists) {
+        const cardElement = elements.getElement(CardElement);
+        if (!cardElement) throw new Error("Card element not found");
+
+        const { token, error } = await stripe.createToken(cardElement);
+        if (error) throw new Error(error.message);
+        const cardData = {
+          cc_number: token?.card?.last4 || "****",
+          month: token?.card?.exp_month,
+          year: token?.card?.exp_year,
+          card_token: token?.id,
+        };
+
+        const saved = await dispatch(saveCard(cardData)).unwrap();
+
+        setPaymentMethod({
+          id: saved.payment_method_token,
+          last4: saved.cc_number?.slice(-4) || "****",
+        });
+        setCardExists(true);
+        setCardId(saved.id);
+
+        toast.success("Card added successfully");
+        setLoading(false);
+        return;
+      }
+      if (!paymentMethod?.id) {
+        toast.error("Please add your card.");
+        setLoading(false);
+        return;
+      }
+
+      await dispatch(
+        createPayment({
+          bookingId,
+          paymentMethodId: paymentMethod?.id,
+        })
+      ).unwrap();
+
+      await dispatch(
+        confirmBooking({
+          bookingId,
+          paymentMethodId: paymentMethodIds[0],
+          amount: totalAmount,
+        })
+      ).unwrap();
+
+      successHandler("🎉 Booking confirmed!");
+      navigate(`/bookingDetails/${bookingId}`);
+    } catch (error) {
+      console.error("Payment error:", error);
+      toast.error(`❌ ${error.message || "Payment failed"}`);
+    }
+
+    setLoading(false);
+  };
+
+  return (
+    <form onSubmit={handleSubmit} style={{ marginTop: 20 }}>
+      {!cardExists && (
+        <div
+          style={{
+            padding: 10,
+            border: "1px solid #ccc",
+            borderRadius: 6,
+            background: "#f8f9fa",
+            marginBottom: 20,
+          }}
+        >
+          <CardElement
+            options={{
+              style: {
+                base: {
+                  fontSize: "16px",
+                  color: "#424770",
+                  "::placeholder": { color: "#aab7c4" },
+                },
+                invalid: { color: "#9e2146" },
+              },
+            }}
+          />
+        </div>
+      )}
+
+      {cardExists && paymentMethod && (
+        <div
+          style={{
+            padding: 15,
+            border: "1px solid #28a745",
+            borderRadius: 6,
+            backgroundColor: "#d4edda",
+            marginBottom: 20,
+            color: "#155724",
+            position: "relative",
+          }}
+        >
+          ✅ Card on file: ****{paymentMethod.last4}
+          <button
+            type="button"
+            onClick={handleDeleteCard}
+            style={{
+              position: "absolute",
+              right: 10,
+              top: 10,
+              background: "none",
+              border: "none",
+              color: "#c82333",
+              cursor: "pointer",
+              fontWeight: "bold",
+              fontSize: 18,
+            }}
+          >
+            ✕
+          </button>
+        </div>
+      )}
+
+      <button
+        type="submit"
+        disabled={!stripe || loading}
+        style={{
+          width: "100%",
+          padding: "12px 20px",
+          backgroundColor:
+            !stripe || loading ? "#ccc" : cardExists ? "#28a745" : "#ffcc00",
+          color: cardExists ? "#fff" : "#000",
+          border: "none",
+          borderRadius: 5,
+          cursor: loading ? "not-allowed" : "pointer",
+          fontSize: 16,
+          fontWeight: 600,
+        }}
+      >
+        {loading
+          ? cardExists
+            ? "Processing Payment..."
+            : "Saving Card..."
+          : cardExists
+          ? `Pay $${(totalAmount / 100).toFixed(2)}`
+          : "Add Card"}
+      </button>
+
+      {message && (
+        <p
+          style={{
+            marginTop: 15,
+            padding: 10,
+            borderRadius: 5,
+            backgroundColor: message.includes("❌") ? "#f8d7da" : "#d1ecf1",
+            color: message.includes("❌") ? "#721c24" : "#0c5460",
+            border: `1px solid ${
+              message.includes("❌") ? "#f5c6cb" : "#bee5eb"
+            }`,
+            textAlign: "center",
+          }}
+        >
+          {message}
+        </p>
+      )}
+    </form>
+  );
+};
+
+const CheckOutPagePageMain = ({ bookingId, totalAmount }) => {
+  return (
+    <div
+      style={{
+        padding: "10px",
+        borderRadius: "12px",
+        backgroundColor: "#fff",
+      }}
+    >
+      <h2
+        style={{
+          fontSize: "28px",
+          fontWeight: "700",
+          marginBottom: "10px",
+          textAlign: "center",
+          color: "#333",
+        }}
+      >
+        Confirm Your Payment
+      </h2>
+      <p
+        style={{
+          textAlign: "center",
+          color: "#666",
+          marginBottom: "25px",
+          fontSize: "16px",
+        }}
+      >
+        Booking ID: {bookingId}
+      </p>
+      <Elements stripe={stripePromise}>
+        <CheckoutForm bookingId={bookingId} totalAmount={totalAmount} />
+      </Elements>
+    </div>
+  );
+};
+
+export default CheckOutPagePageMain;