refactor: resolve payment issue in paypal mode

2025-05-13 06:01:15 +05:30
parent 5bb3be0aa4
commit 4851f34357
2 changed files with 120 additions and 82 deletions
--- a/components/payment/paymentComponent.jsx
+++ b/components/payment/paymentComponent.jsx
@@ -20,6 +20,7 @@ const PaymentComponent = ({ amount, onSuccess }) => {
    country_code: "",
    postal_code: "",
  });
+  const [shippingInfoCollected, setShippingInfoCollected] = useState(false);

  useEffect(() => {
    const fetchExchangeRate = async () => {
@@ -56,7 +57,6 @@ const PaymentComponent = ({ amount, onSuccess }) => {
          throw new Error("Failed to fetch exchange rate");
        }
      } catch (err) {
-        // setError("Currency conversion failed. Please try again later.");
        console.error("Exchange rate error:", err);
      }
    };
@@ -80,22 +80,14 @@ const PaymentComponent = ({ amount, onSuccess }) => {
  const handlePaymentSuccess = (response) => {
    onSuccess?.({
      ...response,
-      shippingData, // Include the shipping data in the success callback
+      address: shippingData, // Include the shipping data in the success callback
    });
  };

  const handleRazorpayPayment = async () => {
-    if (!shippingData.address_line_1 || !shippingData.city || !shippingData.postal_code) {
-      setError("Please fill in all required fields.");
-      return;
-    }
-
    try {
      const order = await createOrder();
-      console.log(shippingData)
-      // log env varaible NEXT_RAZORPAY_CLIENT_ID in next js
      
-      console.log("Razorpay Client ID:", process.env.NEXT_PUBLIC_RAZORPAY_CLIENT_ID);
      const options = {
        key: "rzp_test_Xf4wnkvQQeUnCq",
        amount: order.amount,
@@ -109,8 +101,8 @@ const PaymentComponent = ({ amount, onSuccess }) => {
          contact: shippingData.city,
        },
        handler: (response) => {
-          response.address = shippingData
-          handlePaymentSuccess(response); // Pass the response to the success handler
+          response.address = shippingData;
+          handlePaymentSuccess(response);
        },
      };

@@ -123,13 +115,23 @@ const PaymentComponent = ({ amount, onSuccess }) => {
  };

  const handlePopupSubmit = () => {
+    if (!shippingData.address_line_1 || !shippingData.city || !shippingData.postal_code) {
+      setError("Please fill in all required fields.");
+      return;
+    }
+    
    setShowPopup(false);
-    handleRazorpayPayment();
+    setShippingInfoCollected(true);
+    setError(null);
  };

-  // if (!usdAmount) {
-  //   return <div className="text-center p-4">Loading exchange rates...</div>;
-  // }
+  const validateShippingInfo = () => {
+    if (!shippingInfoCollected) {
+      setShowPopup(true);
+      return false;
+    }
+    return true;
+  };

  return (
    <div className="max-w-md mx-auto">
@@ -143,6 +145,32 @@ const PaymentComponent = ({ amount, onSuccess }) => {
          Error loading Razorpay: {razorpayError}
        </div>
      )}
+      
+      {/* Show shipping info status */}
+      {shippingInfoCollected && (
+        <div className="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
+          Shipping information collected ✓
+          <button 
+            onClick={() => setShowPopup(true)}
+            className="ml-2 text-sm underline"
+          >
+            Edit
+          </button>
+        </div>
+      )}
+
+      {/* Collect shipping info button */}
+      {!shippingInfoCollected && (
+        <button
+          onClick={() => setShowPopup(true)}
+          className="w-full bg-gray-200 text-gray-800 py-2 px-4 rounded hover:bg-gray-300 mb-4"
+        >
+          Enter Shipping Information
+        </button>
+      )}
+
+      {/* Payment options - only enabled after shipping info is collected */}
+      <div className={!shippingInfoCollected ? "opacity-50 pointer-events-none" : ""}>
        <PayPalScriptProvider
          options={{
            "client-id": process.env.NEXT_PUBLIC_CLIENT_ID,
@@ -155,7 +183,7 @@ const PaymentComponent = ({ amount, onSuccess }) => {
              tagline: false,
              fundingicons: true,
            }}
-          disabled={isProcessing}
+            disabled={isProcessing || !shippingInfoCollected}
            className="w-full"
            createOrder={(data, actions) => {
              return actions.order.create({
@@ -176,7 +204,8 @@ const PaymentComponent = ({ amount, onSuccess }) => {
              try {
                setIsProcessing(true);
                const order = await actions.order.capture();
-              onSuccess?.(order);
+                order.address = shippingData; // Add shipping data to PayPal order
+                handlePaymentSuccess(order);
              } catch (err) {
                setError("Payment failed. Please try again.");
                console.error("Payment error:", err);
@@ -191,20 +220,21 @@ const PaymentComponent = ({ amount, onSuccess }) => {
        </PayPalScriptProvider>

        <button
-        onClick={() => setShowPopup(true)}
-        disabled={isProcessing || isLoading}
+          onClick={handleRazorpayPayment}
+          disabled={isProcessing || isLoading || !shippingInfoCollected}
          className="mt-4 w-full bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600"
        >
          {isLoading ? "Loading Razorpay..." : "Pay with Razorpay"}
        </button>
+      </div>

      {showPopup && (
-        <div className=" fixed inset-0 flex items-center justify-center bg-black bg-opacity-50" style={{ zIndex: 1000 }}>
+        <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50" style={{ zIndex: 1000 }}>
          <div className="bg-white p-6 rounded-lg shadow-lg w-96">
            <h3 className="text-lg font-medium mb-4">Enter Your Shipping Details</h3>
            <input
              type="text"
-              placeholder="Address Line 1"
+              placeholder="Address Line 1 *"
              value={shippingData.address_line_1}
              onChange={(e) => setShippingData({ ...shippingData, address_line_1: e.target.value })}
              className="w-full p-2 mb-4 border border-gray-300 rounded"
@@ -218,7 +248,7 @@ const PaymentComponent = ({ amount, onSuccess }) => {
            />
            <input
              type="text"
-              placeholder="City"
+              placeholder="City *"
              value={shippingData.city}
              onChange={(e) => setShippingData({ ...shippingData, city: e.target.value })}
              className="w-full p-2 mb-4 border border-gray-300 rounded"
@@ -232,26 +262,34 @@ const PaymentComponent = ({ amount, onSuccess }) => {
            />
            <input
              type="text"
-              placeholder="Country Code"
+              placeholder="Country Code *"
              value={shippingData.country_code}
              onChange={(e) => setShippingData({ ...shippingData, country_code: e.target.value })}
              className="w-full p-2 mb-4 border border-gray-300 rounded"
            />
            <input
              type="text"
-              placeholder="Postal Code"
+              placeholder="Postal Code *"
              value={shippingData.postal_code}
              onChange={(e) => setShippingData({ ...shippingData, postal_code: e.target.value })}
              className="w-full p-2 mb-4 border border-gray-300 rounded"
            />
+            <div className="flex gap-2">
+              <button
+                onClick={() => setShowPopup(false)}
+                className="w-1/2 bg-gray-300 text-gray-800 py-2 px-4 rounded hover:bg-gray-400"
+              >
+                Cancel
+              </button>
              <button
                onClick={handlePopupSubmit}
-              className="w-full bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600"
+                className="w-1/2 bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600"
              >
-              Submit
+                Save Address
              </button>
            </div>
          </div>
+        </div>
      )}

      <p className="mt-4 text-sm text-gray-600 text-center">
--- a/components/shopping-cart/shoppingCart.jsx
+++ b/components/shopping-cart/shoppingCart.jsx
@@ -112,7 +112,7 @@ const ShoppingCart = () => {
        paymentId: order.id,
        payerEmail: order.payer.email_address,
        cartId: cartItems[0].id,
-        address: shippingAddress, // Include the shipping address
+        address: order.address, 
      };

      const apiResponse = await authAxios.post("/orders/payment/", paymentData);