stay_commerce-frontend 0.1.0 → 0.1.1

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

@@ -0,0 +1,285 @@
+import React, { useEffect, useState } from "react";
+import { CardElement, useElements, useStripe } from "@stripe/react-stripe-js";
+import { useDispatch } from "react-redux";
+import { toast } from "react-toastify";
+import { CreditCard, Plus, X, Trash2, Lock, Shield } from "lucide-react";
+import "../../styles/CardManager.scss";
+import {
+  deleteCard,
+  getCard,
+  saveCard,
+} from "../../redux/slices/PropertySlice/PropertySlice";
+
+const CardManager = () => {
+  const dispatch = useDispatch();
+  const stripe = useStripe();
+  const elements = useElements();
+
+  const [savedCards, setSavedCards] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [addingCards, setAddingCards] = useState([]);
+  const [deletingCard, setDeletingCard] = useState(null);
+
+  useEffect(() => {
+    dispatch(getCard())
+      .unwrap()
+      .then((data) => {
+        if (Array.isArray(data)) {
+          setSavedCards(data);
+        } else if (data?.payment_method_token) {
+          setSavedCards([data]);
+        } else {
+          setSavedCards([]);
+        }
+      })
+      .catch(() => {
+        toast.error("❌ Could not retrieve cards");
+        setSavedCards([]);
+      });
+  }, [dispatch]);
+
+  const handleDeleteCard = async (cardId) => {
+    setDeletingCard(cardId);
+    try {
+      await dispatch(deleteCard(cardId)).unwrap();
+      setSavedCards((prev) => prev.filter((card) => card.id !== cardId));
+      toast.success("Card deleted successfully");
+    } catch (error) {
+      toast.error(`❌ ${error.message}`);
+    } finally {
+      setDeletingCard(null);
+    }
+  };
+
+  const handleAddCard = () => {
+    const formId = Date.now();
+    setAddingCards((prev) => [...prev, formId]);
+  };
+
+  const handleSaveCard = async (formId) => {
+    if (!stripe || !elements) {
+      toast.error("❌ Stripe not ready");
+      return;
+    }
+
+    const cardElement = elements.getElement(CardElement);
+    if (!cardElement) {
+      toast.error("Card element not found");
+      return;
+    }
+
+    setLoading(true);
+    try {
+      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();
+
+      setSavedCards((prev) => [...prev, saved]);
+      setAddingCards((prev) => prev.filter((id) => id !== formId));
+      toast.success("Card added successfully");
+    } catch (error) {
+      toast.error(`❌ ${error.message}`);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleCancelAdd = (formId) => {
+    setAddingCards((prev) => prev.filter((id) => id !== formId));
+  };
+
+  const getCardIcon = (brand) => {
+    switch (brand?.toLowerCase()) {
+      case "visa":
+        return "💳";
+      case "mastercard":
+        return "💳";
+      case "amex":
+        return "💳";
+      default:
+        return "💳";
+    }
+  };
+
+  return (
+    <div className="card-manager">
+      <div className="card-manager__container">
+        {/* Header */}
+        <div className="card-manager__header">
+          <div className="card-manager__header-icon">
+            <CreditCard className="icon" />
+          </div>
+          <h1 className="card-manager__title">Payment Cards</h1>
+          <p className="card-manager__subtitle">
+            Manage your saved payment methods securely
+          </p>
+        </div>
+        <div className="card-manager__content">
+          <div className="saved-cards">
+            <h2 className="saved-cards__title">
+              <Lock className="icon" />
+              Saved Cards ({savedCards?.length})
+            </h2>
+
+            {savedCards?.length > 0 ? (
+              <div
+                className={`saved-cards__grid ${
+                  savedCards?.length === 1 ? "single-card" : ""
+                }`}
+              >
+                {savedCards?.map((card) => (
+                  <div
+                    key={card.id}
+                    className={`credit-card credit-card--${
+                      card.brand || "default"
+                    }`}
+                  >
+                    <div className="credit-card__pattern"></div>
+                    <div className="credit-card__content">
+                      <div className="credit-card__header">
+                        <div className="credit-card__icon">
+                          {getCardIcon(card.brand)}
+                        </div>
+                        <button
+                          onClick={() => handleDeleteCard(card.id)}
+                          disabled={deletingCard === card.id}
+                          className="credit-card__delete-btn"
+                        >
+                          {deletingCard === card.id ? (
+                            <div className="Card_spinner"></div>
+                          ) : (
+                            <Trash2 className="icon" />
+                          )}
+                        </button>
+                      </div>
+
+                      <div className="credit-card__number">
+                        <p>•••• •••• •••• {card.cc_number?.slice(-4)}</p>
+                      </div>
+
+                      <div className="credit-card__details">
+                        <div className="credit-card__expiry">
+                          <p className="label">EXPIRES</p>
+                          <p className="value">
+                            {String(card.exp_month || card.month).padStart(
+                              2,
+                              "0"
+                            )}
+                            /{String(card.exp_year || card.year).slice(-2)}
+                          </p>
+                        </div>
+                        <div className="credit-card__type">
+                          <p className="label">TYPE</p>
+                          <p className="value">{card.brand || "Card"}</p>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <div className="empty-state">
+                <div className="empty-state__icon">
+                  <CreditCard className="icon" />
+                </div>
+                <p className="empty-state__title">No cards saved yet</p>
+                <p className="empty-state__subtitle">
+                  Add your first payment method to get started
+                </p>
+              </div>
+            )}
+          </div>
+          {addingCards.map((formId) => (
+            <div key={formId} className="card-form">
+              <div className="card-form__container">
+                <div className="card-form__header">
+                  <h3 className="card-form__title">
+                    <Plus className="icon" />
+                    Add New Card
+                  </h3>
+                  <button
+                    onClick={() => handleCancelAdd(formId)}
+                    className="card-form__close-btn"
+                  >
+                    <X className="icon" />
+                  </button>
+                </div>
+                <div className="card-form__input">
+                  <CardElement
+                    className="stripe-card-element"
+                    options={{
+                      hidePostalCode: true,
+                      style: {
+                        base: {
+                          fontSize: "16px",
+                          color: "#424770",
+                          "::placeholder": {
+                            color: "#aab7c4",
+                          },
+                        },
+                      },
+                    }}
+                  />
+                </div>
+
+                <div className="card-form__actions">
+                  <button
+                    onClick={() => handleSaveCard(formId)}
+                    disabled={loading || !stripe || !elements}
+                    className="btn btn--primary"
+                  >
+                    {loading ? (
+                      <>
+                        <div className="Card_spinner"></div>
+                        Saving...
+                      </>
+                    ) : (
+                      <>
+                        <Shield className="icon" />
+                        Save Card Securely
+                      </>
+                    )}
+                  </button>
+                  <button
+                    onClick={() => handleCancelAdd(formId)}
+                    className="btn btn--secondary"
+                  >
+                    Cancel
+                  </button>
+                </div>
+              </div>
+            </div>
+          ))}
+          <div className="add-card-section">
+            <button
+              onClick={handleAddCard}
+              disabled={addingCards.length > 0}
+              className="btn btn--add-card"
+            >
+              <Plus className="icon" />
+              Add New Payment Method
+            </button>
+          </div>
+        </div>
+
+        {/* Security Footer */}
+        <div className="card-manager__footer">
+          <p>
+            <Lock className="icon" />
+            Your payment information is encrypted and secure
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CardManager;

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

@@ -30,33 +30,29 @@ const CheckoutForm = ({ bookingId, totalAmount }) => {
   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 [cards, setCards] = useState([]);
+  const [selectedCard, setSelectedCard] = useState(null);
+  const [showNewCardForm, setShowNewCardForm] = useState(true);
   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) || "****",
-          });
+    const fetchCards = async () => {
+      try {
+        const data = await dispatch(getCard()).unwrap();
+        setCards(data || []);
+        if (data && data.length > 0) {
+          setSelectedCard(data[0].payment_method_token);
+          setShowNewCardForm(false); // Hide new card form if cards exist
         } else {
-          setCardExists(false);
-          setPaymentMethod(null);
+          setShowNewCardForm(true); // Show new card form if no cards
         }
-      })
-      .catch((err) => {
-        console.error("Failed to get card:", err);
-        toast.error("❌ Could not retrieve card");
-        setCardExists(false);
-        setPaymentMethod(null);
-      });
+      } catch (err) {
+        console.error("Failed to get cards:", err);
+        toast.error("❌ Could not retrieve cards");
+        setShowNewCardForm(true); // Show new card form on error
+      }
+    };
+
+    fetchCards();
   }, [dispatch]);
 
   useEffect(() => {
@@ -73,17 +69,38 @@ const CheckoutForm = ({ bookingId, totalAmount }) => {
     fetchPaymentMethods();
   }, [dispatch]);
 
-  const handleDeleteCard = async () => {
+  const handleDeleteCard = async (cardId) => {
     try {
       await dispatch(deleteCardThunk(cardId)).unwrap();
-      setCardExists(false);
-      setPaymentMethod(null);
+      const updatedCards = cards.filter((card) => card.id !== cardId);
+      setCards(updatedCards);
+
+      if (selectedCard === cardId) {
+        setSelectedCard(
+          updatedCards.length > 0 ? updatedCards[0].payment_method_token : null
+        );
+      }
+
+      if (updatedCards.length === 0) {
+        setShowNewCardForm(true);
+      }
+
       successHandler("Card deleted successfully");
     } catch (error) {
       toast.error(`❌ ${error.message}`);
     }
   };
 
+  const handleCardSelection = (paymentMethodToken) => {
+    setSelectedCard(paymentMethodToken);
+    setShowNewCardForm(false);
+  };
+
+  const handleAddNewCard = () => {
+    setShowNewCardForm(true);
+    setSelectedCard(null);
+  };
+
   const handleSubmit = async (e) => {
     e.preventDefault();
 
@@ -91,14 +108,17 @@ const CheckoutForm = ({ bookingId, totalAmount }) => {
       toast.error("❌ Stripe not ready");
       return;
     }
+
     setLoading(true);
     try {
-      if (!cardExists) {
+      // If adding a new card
+      if (showNewCardForm) {
         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,
@@ -107,28 +127,23 @@ const CheckoutForm = ({ bookingId, totalAmount }) => {
         };
 
         const saved = await dispatch(saveCard(cardData)).unwrap();
-
-        setPaymentMethod({
-          id: saved.payment_method_token,
-          last4: saved.cc_number?.slice(-4) || "****",
-        });
-        setCardExists(true);
-        setCardId(saved.id);
-
+        setCards([...cards, saved]);
+        setSelectedCard(saved.payment_method_token);
+        setShowNewCardForm(false);
         toast.success("Card added successfully");
         setLoading(false);
-        return;
+        return; // Return after adding card, let user explicitly click pay
       }
-      if (!paymentMethod?.id) {
-        toast.error("Please add your card.");
-        setLoading(false);
-        return;
+
+      // Proceed with payment
+      if (!selectedCard) {
+        throw new Error("Please select or add a payment method");
       }
 
       await dispatch(
         createPayment({
           bookingId,
-          paymentMethodId: paymentMethod?.id,
+          paymentMethodId: selectedCard,
         })
       ).unwrap();
 
@@ -152,7 +167,85 @@ const CheckoutForm = ({ bookingId, totalAmount }) => {
 
   return (
     <form onSubmit={handleSubmit} style={{ marginTop: 20 }}>
-      {!cardExists && (
+      {cards.length > 0 && (
+        <div style={{ marginBottom: 20 }}>
+          <h3 style={{ marginBottom: 15 }}>Saved Payment Methods</h3>
+          {cards.map((card) => (
+            <div
+              key={card.id}
+              style={{
+                padding: 15,
+                border: `1px solid ${
+                  selectedCard === card.payment_method_token
+                    ? "rgb(212 235 255)"
+                    : "#ccc"
+                }`,
+                borderRadius: 6,
+                backgroundColor:
+                  selectedCard === card.payment_method_token
+                    ? "rgb(212 235 255)"
+                    : "#f8f9fa",
+                marginBottom: 10,
+                color: "#155724",
+                position: "relative",
+                display: "flex",
+                alignItems: "center",
+              }}
+            >
+              <input
+                type="radio"
+                id={`card-${card.id}`}
+                name="paymentMethod"
+                checked={
+                  selectedCard === card.payment_method_token && !showNewCardForm
+                }
+                onChange={() => handleCardSelection(card.payment_method_token)}
+                style={{ marginRight: 10 }}
+              />
+              <label htmlFor={`card-${card.id}`} style={{ flex: 1 }}>
+                ****{card.cc_number} - Expires {card.month}/{card.year}
+              </label>
+              <button
+                type="button"
+                onClick={() => handleDeleteCard(card.id)}
+                style={{
+                  background: "none",
+                  border: "none",
+                  color: "#c82333",
+                  cursor: "pointer",
+                  fontWeight: "bold",
+                  fontSize: 18,
+                }}
+              >
+                ✕
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {!showNewCardForm && cards.length > 0 && (
+        <button
+          type="button"
+          onClick={handleAddNewCard}
+          style={{
+            width: "100%",
+            padding: "10px",
+            backgroundColor: "var(--primary-color)",
+            border: "1px dashed #ccc",
+            borderRadius: 5,
+            cursor: "pointer",
+            fontSize: 16,
+            marginBottom: 20,
+            color: "#fff",
+            fontWeight: 600,
+          }}
+        >
+          + Add New Card
+        </button>
+      )}
+
+      {showNewCardForm && (
         <div
           style={{
             padding: 10,
@@ -177,48 +270,17 @@ const CheckoutForm = ({ bookingId, totalAmount }) => {
         </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}
+        disabled={!stripe || loading || (!selectedCard && !showNewCardForm)}
         style={{
           width: "100%",
           padding: "12px 20px",
           backgroundColor:
-            !stripe || loading ? "#ccc" : cardExists ? "#28a745" : "#ffcc00",
-          color: cardExists ? "#fff" : "#000",
+            !stripe || loading
+              ? "var(--primary-color)"
+              : "var(--primary-color)",
+          color: "#fff",
           border: "none",
           borderRadius: 5,
           cursor: loading ? "not-allowed" : "pointer",
@@ -227,12 +289,12 @@ const CheckoutForm = ({ bookingId, totalAmount }) => {
         }}
       >
         {loading
-          ? cardExists
-            ? "Processing Payment..."
-            : "Saving Card..."
-          : cardExists
-          ? `Pay $${(totalAmount / 100).toFixed(2)}`
-          : "Add Card"}
+          ? showNewCardForm
+            ? "Adding Card..."
+            : "Processing Payment..."
+          : showNewCardForm
+          ? "Add Card"
+          : `Pay $${(totalAmount / 100).toFixed(2)}`}
       </button>
 
       {message && (
@@ -286,6 +348,7 @@ const CheckOutPagePageMain = ({ bookingId, totalAmount }) => {
       >
         Booking ID: {bookingId}
       </p>
+
       <Elements stripe={stripePromise}>
         <CheckoutForm bookingId={bookingId} totalAmount={totalAmount} />
       </Elements>

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

@@ -105,7 +105,6 @@ const StayDetailPageContainer = () => {
       const start = moment(bookingStart, "YYYY-MM-DD");
       const end = moment(bookingEnd, "YYYY-MM-DD");
       const uniqueMonths = new Set();
-      const MAX_CHAR_LIMIT = 250;
       let current = start.clone();
       while (current.isBefore(end, "day") || current.isSame(end, "day")) {
         uniqueMonths.add(`${current.year()}-${current.month() + 1}`);
@@ -141,9 +140,6 @@ const StayDetailPageContainer = () => {
       try {
         const action = await dispatch(reserveBooking(postData));
         if (action?.type === "payment/reserveBooking/fulfilled" && action) {
-          successHandler(
-            "Booking request sent. Please ! wait for owner's confirmation!!"
-          );
           const bookingId = action?.payload?.id;
           if (bookingId) {
             setError("");
@@ -445,7 +441,6 @@ const StayDetailPageContainer = () => {
             </div>
           );
         })}
-
         <BookingModal
           isOpen={isBookingModalOpen}
           onClose={closeBookingModal}
@@ -457,7 +452,6 @@ const StayDetailPageContainer = () => {
       </>
     );
   };
-
   return (
     <div className="container listing-detail-page">
       <header className="listing-header" onClick={handleOpenModalImageGallery}>
@@ -497,7 +491,7 @@ const StayDetailPageContainer = () => {
       <section className="similar-properties-section">
         {/* <RoomSection propertyData={propertyData} /> */}
         <RenderSection />
-        <PropertyDetailsCard propertyData={propertyData} />
+        {/* <PropertyDetailsCard propertyData={propertyData} /> */}
       </section>
 
       {imageModal && (