@akinon/pz-flow-payment 1.96.0-snapshot-ZERO-35861-20250908151109 → 1.96.0-snapshot-ZERO-3620-20250915165755

package/CHANGELOG.md

@@ -1,6 +1,41 @@
 # @akinon/pz-flow-payment
 
-## 1.96.0-snapshot-ZERO-35861-20250908151109
+## 1.96.0-snapshot-ZERO-3620-20250915165755
+
+### Minor Changes
+
+- 69e4cc5: BRDG-14604: Refactor FlowPayment component to optimize flow initialization and cleanup logic
+- d8be48fb: ZERO-3422: Update fetch method to use dynamic request method in wallet complete redirection middleware
+- 8b1d24eb: ZERO-3422: Update fetch method to use dynamic request method in wallet complete redirection middleware
+
+## 1.96.0-rc.61
+
+### Minor Changes
+
+- 69e4cc5: BRDG-14604: Refactor FlowPayment component to optimize flow initialization and cleanup logic
+- d8be48fb: ZERO-3422: Update fetch method to use dynamic request method in wallet complete redirection middleware
+- 8b1d24eb: ZERO-3422: Update fetch method to use dynamic request method in wallet complete redirection middleware
+
+## 1.96.0-rc.60
+
+## 1.96.0-rc.59
+
+## 1.96.0-rc.58
+
+## 1.96.0-rc.57
+
+## 1.96.0-rc.56
+
+### Minor Changes
+
+- 69e4cc5: BRDG-14604: Refactor FlowPayment component to optimize flow initialization and cleanup logic
+
+## 1.96.0-rc.55
+
+### Minor Changes
+
+- d8be48fb: ZERO-3422: Update fetch method to use dynamic request method in wallet complete redirection middleware
+- 8b1d24eb: ZERO-3422: Update fetch method to use dynamic request method in wallet complete redirection middleware
 
 ## 1.95.0
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@akinon/pz-flow-payment",
   "license": "MIT",
-  "version": "1.96.0-snapshot-ZERO-35861-20250908151109",
+  "version": "1.96.0-snapshot-ZERO-3620-20250915165755",
   "main": "src/index.tsx",
   "dependencies": {
     "@checkout.com/checkout-web-components": "0.7.0-beta"

package/src/views/index.tsx

@@ -8,7 +8,7 @@ import {
   PaymentSessionResponse
 } from '@checkout.com/checkout-web-components';
 import { RootState } from '@theme/redux/store';
-import { useEffect } from 'react';
+import { useEffect, useRef, useMemo } from 'react';
 
 export default function FlowPayment({
   options
@@ -56,6 +56,15 @@ export default function FlowPayment({
     (state: RootState) => state.checkout
   );
   const dispatch = useAppDispatch();
+  const flowComponentRef = useRef<any>(null);
+  const lastAmountRef = useRef<string | null>(null);
+  const isInitializingRef = useRef<boolean>(false);
+  const walletPaymentInitialized = useRef<boolean>(false);
+
+  // Memoize the amount to track actual changes
+  const currentAmount = useMemo(() => {
+    return preOrder.total_amount;
+  }, [preOrder.total_amount]);
 
   const initWalletSelection = async () => {
     const walletSelectionPageResponse = await dispatch(
@@ -73,7 +82,11 @@ export default function FlowPayment({
       return;
     }
 
-    dispatch(checkoutApi.endpoints.setWalletPaymentPage.initiate({}));
+    // FIX: Only call setWalletPaymentPage if not already initialized
+    if (!walletPaymentInitialized.current) {
+      walletPaymentInitialized.current = true;
+      dispatch(checkoutApi.endpoints.setWalletPaymentPage.initiate({}));
+    }
   };
 
   const initFlowPaymentWebComponents = async ({
@@ -81,21 +94,81 @@ export default function FlowPayment({
   }: {
     publicKey: string;
   }) => {
-    const checkout = await loadCheckoutWebComponents({
-      publicKey,
-      environment: options?.environment || 'production',
-      locale: options?.locale || 'en',
-      translations: options?.translations,
-      paymentSession: preOrder.context_extras as PaymentSessionResponse,
-      appearance: options?.appearance,
-      componentOptions: options?.componentOptions
-        ? { flow: options.componentOptions }
-        : undefined
-    });
+    // Prevent multiple simultaneous initializations
+    if (isInitializingRef.current) {
+      return;
+    }
 
-    const flowComponent = checkout.create('flow');
+    // Check if amount has actually changed
+    if (lastAmountRef.current === currentAmount && flowComponentRef.current) {
+      return; // Don't recreate component if amount hasn't changed
+    }
 
-    flowComponent.mount(document.getElementById('flow-container')!);
+    isInitializingRef.current = true;
+
+    try {
+      // Destroy existing flow component if it exists
+      if (flowComponentRef.current) {
+        try {
+          flowComponentRef.current.destroy();
+        } catch (error) {
+          console.warn('Error destroying flow component:', error);
+        }
+        flowComponentRef.current = null;
+      }
+
+      // Clear any existing flow component before creating a new one
+      const container = document.getElementById('flow-container');
+      if (container) {
+        container.innerHTML = '';
+      }
+
+      // FIX: Use existing payment session instead of making another API call
+      let paymentSession = preOrder.context_extras;
+
+      // Only get fresh payment data if we don't have a valid session
+      if (!paymentSession && lastAmountRef.current !== currentAmount) {
+        // Check if another call is already in progress
+        if (!walletPaymentInitialized.current) {
+          walletPaymentInitialized.current = true;
+          const walletPaymentResponse = await dispatch(
+            checkoutApi.endpoints.setWalletPaymentPage.initiate({})
+          ).unwrap();
+          paymentSession =
+            walletPaymentResponse?.pre_order?.context_extras ||
+            preOrder.context_extras;
+        } else {
+          // Use existing context_extras if another call was already made
+          paymentSession = preOrder.context_extras;
+        }
+      }
+
+      // Update the last amount reference after getting fresh data
+      lastAmountRef.current = currentAmount;
+
+      const checkout = await loadCheckoutWebComponents({
+        publicKey,
+        environment: options?.environment || 'production',
+        locale: options?.locale || 'en',
+        translations: options?.translations,
+        paymentSession: paymentSession as PaymentSessionResponse,
+        appearance: options?.appearance,
+        componentOptions: options?.componentOptions
+          ? { flow: options.componentOptions }
+          : undefined
+      });
+
+      const flowComponent = checkout.create('flow');
+      flowComponentRef.current = flowComponent;
+
+      if (container) {
+        flowComponent.mount(container);
+      }
+    } catch (error) {
+      console.error('Error initializing flow payment components:', error);
+    } finally {
+      isInitializingRef.current = false;
+    }
   };
 
   useEffect(() => {
@@ -118,8 +191,24 @@ export default function FlowPayment({
   }, [
     preOrder.wallet_method,
     preOrder.token,
+    currentAmount, // Use memoized amount instead of preOrder.total_amount
     walletPaymentData?.data?.public_key
   ]);
 
+  // Cleanup function when component unmounts
+  useEffect(() => {
+    return () => {
+      if (flowComponentRef.current) {
+        try {
+          flowComponentRef.current.destroy();
+        } catch (error) {
+          console.warn('Error destroying flow component on unmount:', error);
+        }
+      }
+      // Reset initialization flag on unmount
+      walletPaymentInitialized.current = false;
+    };
+  }, []);
+
   return <div id="flow-container" className="flow-payment-container"></div>;
 }