@akinon/pz-flow-payment 1.96.0-rc.56 → 1.96.0-snapshot-ZERO-35861-20250908151109

package/CHANGELOG.md

@@ -1,17 +1,6 @@
 # @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.96.0-snapshot-ZERO-35861-20250908151109
 
 ## 1.95.0
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@akinon/pz-flow-payment",
   "license": "MIT",
-  "version": "1.96.0-rc.56",
+  "version": "1.96.0-snapshot-ZERO-35861-20250908151109",
   "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, useRef, useMemo } from 'react';
+import { useEffect } from 'react';
 
 export default function FlowPayment({
   options
@@ -56,14 +56,6 @@ 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(
@@ -89,73 +81,21 @@ export default function FlowPayment({
   }: {
     publicKey: string;
   }) => {
-    // Prevent multiple simultaneous initializations
-    if (isInitializingRef.current) {
-      return;
-    }
+    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
+    });
 
-    // Check if amount has actually changed
-    if (lastAmountRef.current === currentAmount && flowComponentRef.current) {
-      return; // Don't recreate component if amount hasn't changed
-    }
+    const flowComponent = checkout.create('flow');
 
-    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;
-    }
+    flowComponent.mount(document.getElementById('flow-container')!);
   };
 
   useEffect(() => {
@@ -178,22 +118,8 @@ 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>;
 }