Add Mollie payment integration: Implement lazy loading for PaymentSuccess page, update CartTab and OrderProcessingService to handle Mollie payment intents, and enhance ProfilePage to manage payment completion for both Stripe and Mollie. Update base URL for development environment.

src/components/profile/OrderProcessingService.js

@@ -49,18 +49,29 @@ class OrderProcessingService {
   waitForVerifyTokenAndProcessOrder() {
     // Check if window.cart is already populated (verifyToken already completed)
     if (Array.isArray(window.cart) && window.cart.length > 0) {
-      this.processStripeOrderWithCart(window.cart);
+      if (this.paymentCompletionData && this.paymentCompletionData.paymentType === 'mollie') {
+        this.processMollieOrderWithCart(window.cart);
+      } else {
+        this.processStripeOrderWithCart(window.cart);
+      }
       return;
     }
     
     // Listen for cart event which is dispatched after verifyToken completes
     this.verifyTokenHandler = () => {
       if (Array.isArray(window.cart) && window.cart.length > 0) {
-        this.processStripeOrderWithCart([...window.cart]); // Copy the cart
+        const cartCopy = [...window.cart]; // Copy the cart
         
         // Clear window.cart after copying
         window.cart = [];
         window.dispatchEvent(new CustomEvent("cart"));
+        
+        // Process based on payment type
+        if (this.paymentCompletionData && this.paymentCompletionData.paymentType === 'mollie') {
+          this.processMollieOrderWithCart(cartCopy);
+        } else {
+          this.processStripeOrderWithCart(cartCopy);
+        }
       } else {
         this.setState({ 
           completionError: "Cart is empty. Please add items to your cart before placing an order." 
@@ -111,6 +122,21 @@ class OrderProcessingService {
     });
   }
 
+  processMollieOrderWithCart(cartItems) {
+    // Clear timeout if it exists
+    if (this.verifyTokenTimeout) {
+      clearTimeout(this.verifyTokenTimeout);
+      this.verifyTokenTimeout = null;
+    }
+    
+    // Store cart items in state and process order
+    this.setState({ 
+      originalCartItems: cartItems 
+    }, () => {
+      this.processMollieOrder();
+    });
+  }
+
   processStripeOrder() {
     // If no original cart items, don't process
     if (!this.getState().originalCartItems || this.getState().originalCartItems.length === 0) {
@@ -205,6 +231,20 @@ class OrderProcessingService {
     });
   }
 
+  processMollieOrder() {
+    // For Mollie payments, the backend handles order creation automatically
+    // when payment is successful. We just need to show success state.
+    this.setState({
+      isCompletingOrder: false,
+      orderCompleted: true,
+      completionError: null,
+    });
+    
+    // Clear the cart since order was created by backend
+    window.cart = [];
+    window.dispatchEvent(new CustomEvent("cart"));
+  }
+
   // Process regular (non-Stripe) orders
   processRegularOrder(orderData) {
     const context = this.getContext();
@@ -271,6 +311,40 @@ class OrderProcessingService {
     }
   }
 
+  // Create Mollie payment intent
+  createMollieIntent(mollieOrderData) {
+    const context = this.getContext();
+    if (context && context.socket && context.socket.connected) {
+      context.socket.emit(
+        "createMollieIntent",
+        mollieOrderData,
+        (response) => {
+          if (response.success) {
+            // Store pending payment info and redirect
+            localStorage.setItem('pendingPayment', JSON.stringify({
+              paymentId: response.paymentId,
+              amount: mollieOrderData.amount,
+              timestamp: Date.now()
+            }));
+            window.location.href = response.checkoutUrl;
+          } else {
+            console.error("Error:", response.error);
+            this.setState({
+              isCompletingOrder: false,
+              completionError: response.error || "Failed to create Mollie payment intent. Please try again.",
+            });
+          }
+        }
+      );
+    } else {
+      console.error("Socket context not available");
+      this.setState({
+        isCompletingOrder: false,
+        completionError: "Cannot connect to server. Please try again later.",
+      });
+    }
+  }
+
   // Calculate delivery cost
   getDeliveryCost() {
     const { deliveryMethod, paymentMethod } = this.getState();