From fe38ef430afc3308e4e283a4af1ad04fd62ec6e0 Mon Sep 17 00:00:00 2001
From: jackiettran <41605212+jackiettran@users.noreply.github.com>
Date: Thu, 1 Jan 2026 18:48:01 -0500
Subject: [PATCH] Fixed a bug with What will you use it for, fixed a bug with
 the sticky pricing card, text change

---
 .../src/components/EmbeddedStripeCheckout.tsx | 29 ++++++++++++++-----
 frontend/src/pages/ItemDetail.tsx             |  8 ++---
 frontend/src/pages/RentItem.tsx               | 17 ++++++-----
 3 files changed, 34 insertions(+), 20 deletions(-)

diff --git a/frontend/src/components/EmbeddedStripeCheckout.tsx b/frontend/src/components/EmbeddedStripeCheckout.tsx
index 01006d1..0d1c64a 100644
--- a/frontend/src/components/EmbeddedStripeCheckout.tsx
+++ b/frontend/src/components/EmbeddedStripeCheckout.tsx
@@ -26,6 +26,18 @@ const EmbeddedStripeCheckout: React.FC<EmbeddedStripeCheckoutProps> = ({
   const [sessionId, setSessionId] = useState<string>("");
   const hasCreatedSession = useRef(false);
 
+  // Use refs to avoid recreating handleComplete when props change
+  const rentalDataRef = useRef(rentalData);
+  const onSuccessRef = useRef(onSuccess);
+  const onErrorRef = useRef(onError);
+  const sessionIdRef = useRef(sessionId);
+
+  // Keep refs up to date
+  rentalDataRef.current = rentalData;
+  onSuccessRef.current = onSuccess;
+  onErrorRef.current = onError;
+  sessionIdRef.current = sessionId;
+
   const createCheckoutSession = useCallback(async () => {
     // Prevent multiple session creations
     if (hasCreatedSession.current) return;
@@ -54,16 +66,17 @@ const EmbeddedStripeCheckout: React.FC<EmbeddedStripeCheckoutProps> = ({
     createCheckoutSession();
   }, [createCheckoutSession]);
 
+  // Use useCallback with empty deps - refs provide access to latest values
   const handleComplete = useCallback(() => {
     // For embedded checkout, we need to retrieve the session to get payment method
     (async () => {
       try {
-        if (!sessionId) {
+        if (!sessionIdRef.current) {
           throw new Error("No session ID available");
         }
 
         // Get the completed checkout session
-        const sessionResponse = await stripeAPI.getCheckoutSession(sessionId);
+        const sessionResponse = await stripeAPI.getCheckoutSession(sessionIdRef.current);
         const { status: sessionStatus, setup_intent } = sessionResponse.data;
 
         if (sessionStatus !== "complete") {
@@ -75,8 +88,8 @@ const EmbeddedStripeCheckout: React.FC<EmbeddedStripeCheckoutProps> = ({
         }
 
         // Extract payment method ID - handle both string ID and object cases
-        const paymentMethodId = typeof setup_intent.payment_method === 'string' 
-          ? setup_intent.payment_method 
+        const paymentMethodId = typeof setup_intent.payment_method === 'string'
+          ? setup_intent.payment_method
           : setup_intent.payment_method.id;
 
         if (!paymentMethodId) {
@@ -85,17 +98,17 @@ const EmbeddedStripeCheckout: React.FC<EmbeddedStripeCheckoutProps> = ({
 
         // Create the rental with the payment method ID
         const rentalPayload = {
-          ...rentalData,
+          ...rentalDataRef.current,
           stripePaymentMethodId: paymentMethodId
         };
 
         await rentalAPI.createRental(rentalPayload);
-        onSuccess();
+        onSuccessRef.current();
       } catch (error: any) {
-        onError(error.response?.data?.error || error.message || "Failed to complete rental request");
+        onErrorRef.current(error.response?.data?.error || error.message || "Failed to complete rental request");
       }
     })();
-  }, [sessionId, rentalData, onSuccess, onError]);
+  }, []);
 
   if (creating) {
     return (
diff --git a/frontend/src/pages/ItemDetail.tsx b/frontend/src/pages/ItemDetail.tsx
index 55fa552..d23664a 100644
--- a/frontend/src/pages/ItemDetail.tsx
+++ b/frontend/src/pages/ItemDetail.tsx
@@ -588,7 +588,7 @@ const ItemDetail: React.FC = () => {
               </div>
 
               {/* Mobile Pricing Card - shown inline on mobile */}
-              <div className="d-md-none mb-4">
+              <div className="d-md-none mb-4" id="mobile-pricing-card">
                 <div className="card sticky-pricing-card">
                   <div className="card-body text-center">
                     {(() => {
@@ -1132,9 +1132,9 @@ const ItemDetail: React.FC = () => {
               <button
                 className="btn btn-primary btn-lg"
                 onClick={() => {
-                  const pricingCard = document.getElementById("pricing-card");
-                  if (pricingCard) {
-                    pricingCard.scrollIntoView({
+                  const mobilePricingCard = document.getElementById("mobile-pricing-card");
+                  if (mobilePricingCard) {
+                    mobilePricingCard.scrollIntoView({
                       behavior: "smooth",
                       block: "start",
                     });
diff --git a/frontend/src/pages/RentItem.tsx b/frontend/src/pages/RentItem.tsx
index a923c39..14d50f1 100644
--- a/frontend/src/pages/RentItem.tsx
+++ b/frontend/src/pages/RentItem.tsx
@@ -455,19 +455,20 @@ const RentItem: React.FC = () => {
                         <>
                           <div className="card mb-3">
                             <div className="card-body">
-                              <h6 className="mb-3">
+                              <p className="mb-0">
                                 Add your payment method to complete your
                                 request. You'll only be charged if the owner
-                                approves your request
-                              </h6>
-                              <EmbeddedStripeCheckout
-                                rentalData={getRentalData()}
-                                onSuccess={() => setCompleted(true)}
-                                onError={(error) => setError(error)}
-                              />
+                                approves your request.
+                              </p>
                             </div>
                           </div>
 
+                          <EmbeddedStripeCheckout
+                            rentalData={getRentalData()}
+                            onSuccess={() => setCompleted(true)}
+                            onError={(error) => setError(error)}
+                          />
+
                           <div className="text-center mt-3">
                             <button
                               type="button"