@akinon/pz-flow-payment 1.95.0 → 1.96.0-rc.56

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @akinon/pz-flow-payment
 
+## 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
 
 ## 1.94.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@akinon/pz-flow-payment",
   "license": "MIT",
-  "version": "1.95.0",
+  "version": "1.96.0-rc.56",
   "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,14 @@ 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);
+
+  // Memoize the amount to track actual changes
+  const currentAmount = useMemo(() => {
+    return preOrder.total_amount;
+  }, [preOrder.total_amount]);
 
   const initWalletSelection = async () => {
     const walletSelectionPageResponse = await dispatch(
@@ -81,21 +89,73 @@ 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 = '';
+      }
+
+      // Only get fresh payment data when amount has changed from the last recorded amount
+      let paymentSession = preOrder.context_extras;
+
+      if (lastAmountRef.current !== currentAmount || !paymentSession) {
+        const walletPaymentResponse = await dispatch(
+          checkoutApi.endpoints.setWalletPaymentPage.initiate({})
+        ).unwrap();
+        paymentSession =
+          walletPaymentResponse?.pre_order?.context_extras ||
+          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 +178,22 @@ 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);
+        }
+      }
+    };
+  }, []);
+
   return <div id="flow-container" className="flow-payment-container"></div>;
 }