@akinon/pz-flow-payment 1.99.0-snapshot-ZERO-3640-20250919140935 → 1.100.0-rc.71

package/CHANGELOG.md

@@ -1,10 +1,18 @@
 # @akinon/pz-flow-payment
 
-## 1.99.0-snapshot-ZERO-3640-20250919140935
+## 1.100.0-rc.71
 
 ### Minor Changes
 
-- ce2e9e2: ZERO-3640: Add error handling and WalletCompletePage request to FlowPayment
+- 1b9e9be: BRDG-14604: Refactor FlowPayment component to utilize RTK Query mutations for payment options and wallet selection, enhancing session management and initialization 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.99.0
+
+### Minor Changes
+
+- d58538b: ZERO-3638: Enhance RC pipeline: add fetch, merge, and pre-release setup with conditional commit
 
 ## 1.98.0
 
@@ -19,6 +27,29 @@
 ### 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.99.0-snapshot-ZERO-3640-20250919140935",
+  "version": "1.100.0-rc.71",
   "main": "src/index.tsx",
   "dependencies": {
     "@checkout.com/checkout-web-components": "0.7.0-beta"

package/src/views/index.tsx

@@ -1,7 +1,10 @@
 import { checkoutApi } from '@akinon/next/data/client/checkout';
 import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
-import { getCookie } from '@akinon/next/utils';
-import { getUrlPathWithLocale } from '@akinon/next/utils/localization';
+import {
+  useSetPaymentOptionMutation,
+  useSetWalletSelectionPageMutation,
+  useSetWalletPaymentPageMutation
+} from '@akinon/next/data/client/checkout';
 import {
   ComponentOptions,
   CustomTranslations,
@@ -9,7 +12,8 @@ import {
   PartialDesignTokens,
   PaymentSessionResponse
 } from '@checkout.com/checkout-web-components';
-import { useEffect, useRef, useMemo, useState } from 'react';
+import { RootState } from '@theme/redux/store';
+import { useEffect, useRef, useMemo } from 'react';
 
 export default function FlowPayment({
   options
@@ -17,7 +21,7 @@ export default function FlowPayment({
   options?: {
     /**
      * Environment to use for the payment components.
-     * Defaults to 'sandbox'.
+     * Defaults to 'production'.
      * If you want to test the payment components, you can set this to 'sandbox'.
      */
     environment?: 'sandbox' | 'production';
@@ -54,16 +58,18 @@ export default function FlowPayment({
   };
 }) {
   const { preOrder, walletPaymentData } = useAppSelector(
-    (state: any) => state.checkout
+    (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);
-  const [errors, setErrors] = useState<any>(null);
 
-  const environment = options?.environment || 'sandbox';
+  // RTK Query mutations
+  const [setPaymentOption] = useSetPaymentOptionMutation();
+  const [setWalletSelectionPage] = useSetWalletSelectionPageMutation();
+  const [setWalletPaymentPage] = useSetWalletPaymentPageMutation();
 
   // Memoize the amount to track actual changes
   const currentAmount = useMemo(() => {
@@ -71,88 +77,27 @@ export default function FlowPayment({
   }, [preOrder.total_amount]);
 
   const initWalletSelection = async () => {
-    const walletSelectionPageResponse = await dispatch(
-      checkoutApi.endpoints.setWalletSelectionPage.initiate({
-        payment_option: preOrder.payment_option?.pk
-      })
-    ).unwrap();
-
-    const walletPaymentPageContext =
-      walletSelectionPageResponse.context_list.find(
-        (c) => c.page_name === 'WalletPaymentPage'
-      );
-
-    if (!walletPaymentPageContext) {
-      return;
-    }
-
-    // FIX: Only call setWalletPaymentPage if not already initialized
     if (!walletPaymentInitialized.current) {
       walletPaymentInitialized.current = true;
-      dispatch(checkoutApi.endpoints.setWalletPaymentPage.initiate({}));
-    }
-  };
 
-  const handlePaymentSuccess = async (paymentData: any) => {
-    setErrors(null);
-
-    try {
-      const walletPaymentPageResponse = await dispatch(
-        checkoutApi.endpoints.setWalletPaymentPage.initiate({
-          payment_token: JSON.stringify(paymentData)
+      const walletSelectionPageResponse = await dispatch(
+        checkoutApi.endpoints.setWalletSelectionPage.initiate({
+          payment_option: preOrder.payment_option?.pk
         })
       ).unwrap();
 
-      if (walletPaymentPageResponse.errors) {
-        setErrors(walletPaymentPageResponse.errors);
-        return;
-      }
-
-      if (
-        walletPaymentPageResponse.context_list.find(
-          (c) => c.page_name === 'WalletCompletePage'
-        )
-      ) {
-        const paymentCompleteResponse = await dispatch(
-          checkoutApi.endpoints.setWalletCompletePage.initiate(true)
-        ).unwrap();
+      const walletPaymentPageContext =
+        walletSelectionPageResponse.context_list.find(
+          (c) => c.page_name === 'WalletPaymentPage'
+        );
 
-        if (paymentCompleteResponse.errors) {
-          setErrors(paymentCompleteResponse.errors);
-          return;
-        }
-
-        if (
-          paymentCompleteResponse.context_list.find(
-            (c) => c.page_name === 'ThankYouPage'
-          )
-        ) {
-          const redirectUrl = paymentCompleteResponse.context_list.find(
-            (c) => c.page_name === 'ThankYouPage'
-          )?.page_context.context_data.redirect_url;
-
-          const redirectUrlWithLocale = `${
-            window.location.origin
-          }${getUrlPathWithLocale(
-            redirectUrl,
-            getCookie('pz-locale') || 'en'
-          )}`;
-
-          window.location.href = redirectUrlWithLocale;
-        }
+      if (walletPaymentPageContext) {
+        dispatch(checkoutApi.endpoints.setWalletPaymentPage.initiate({}));
       }
-    } catch (error) {
-      console.error('Error processing payment completion:', error);
-      setErrors(error);
     }
   };
 
-  const handlePaymentError = async (error: any) => {
-    console.error('Payment error occurred:', error);
-    setErrors(error);
-  };
-
-  const initFlowPaymentWebComponents = async ({
+  const refreshPaymentSessionAndInitFlow = async ({
     publicKey
   }: {
     publicKey: string;
@@ -162,13 +107,70 @@ export default function FlowPayment({
       return;
     }
 
-    // Check if amount has actually changed
-    if (lastAmountRef.current === currentAmount && flowComponentRef.current) {
-      return; // Don't recreate component if amount hasn't changed
-    }
-
     isInitializingRef.current = true;
 
+    try {
+      // Step 1: Re-set the current payment option to refresh the session with new amount
+      if (preOrder.payment_option?.pk) {
+        const paymentOptionResponse = await setPaymentOption(
+          preOrder.payment_option.pk
+        ).unwrap();
+
+        // Check if WalletSelectionPage is available in the context list
+        const walletSelectionPageContext =
+          paymentOptionResponse.context_list?.find(
+            (c) => c.page_name === 'WalletSelectionPage'
+          );
+
+        if (!walletSelectionPageContext) {
+          console.warn(
+            'WalletSelectionPage not found in payment option response context list'
+          );
+          return;
+        }
+      }
+
+      // Step 2: Set wallet selection page
+      const walletSelectionResponse = await setWalletSelectionPage({
+        payment_option: preOrder.payment_option?.pk
+      }).unwrap();
+
+      const walletPaymentPageContext =
+        walletSelectionResponse.context_list?.find(
+          (c) => c.page_name === 'WalletPaymentPage'
+        );
+
+      if (!walletPaymentPageContext) {
+        return;
+      }
+
+      // Step 3: Set wallet payment page to get updated payment session
+      const walletPaymentResponse = await setWalletPaymentPage({}).unwrap();
+
+      // Step 4: Initialize flow component with fresh payment session
+      await initFlowPaymentWebComponents({
+        publicKey,
+        paymentSession:
+          walletPaymentResponse?.pre_order?.context_extras ||
+          preOrder.context_extras
+      });
+    } catch (error) {
+      console.error(
+        'Error refreshing payment session and initializing flow:',
+        error
+      );
+    } finally {
+      isInitializingRef.current = false;
+    }
+  };
+
+  const initFlowPaymentWebComponents = async ({
+    publicKey,
+    paymentSession
+  }: {
+    publicKey: string;
+    paymentSession?: any;
+  }) => {
     try {
       // Destroy existing flow component if it exists
       if (flowComponentRef.current) {
@@ -186,49 +188,23 @@ export default function FlowPayment({
         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
+      // Update the last amount reference
       lastAmountRef.current = currentAmount;
 
       const checkout = await loadCheckoutWebComponents({
         publicKey,
-        environment,
+        environment: options?.environment || 'production',
         locale: options?.locale || 'en',
         translations: options?.translations,
-        paymentSession: paymentSession as PaymentSessionResponse,
+        paymentSession:
+          paymentSession || (preOrder.context_extras as PaymentSessionResponse),
         appearance: options?.appearance,
         componentOptions: options?.componentOptions
           ? { flow: options.componentOptions }
           : undefined
       });
 
-      const flowComponent = checkout.create('flow', {
-        onPaymentCompleted: async (_self, paymentResponse) => {
-          handlePaymentSuccess(paymentResponse);
-        },
-        onError: async (_self, error) => {
-          handlePaymentError(error);
-        }
-      });
+      const flowComponent = checkout.create('flow');
       flowComponentRef.current = flowComponent;
 
       if (container) {
@@ -236,8 +212,6 @@ export default function FlowPayment({
       }
     } catch (error) {
       console.error('Error initializing flow payment components:', error);
-    } finally {
-      isInitializingRef.current = false;
     }
   };
 
@@ -245,6 +219,7 @@ export default function FlowPayment({
     initWalletSelection();
   }, []);
 
+  // Initial flow component initialization
   useEffect(() => {
     if (
       !preOrder.wallet_method ||
@@ -255,16 +230,37 @@ export default function FlowPayment({
       return;
     }
 
-    initFlowPaymentWebComponents({
-      publicKey: walletPaymentData.data.public_key
-    });
+    // Only initialize if component doesn't exist yet (initial mount)
+    if (!flowComponentRef.current) {
+      initFlowPaymentWebComponents({
+        publicKey: walletPaymentData.data.public_key
+      });
+    }
   }, [
     preOrder.wallet_method,
     preOrder.token,
-    currentAmount, // Use memoized amount instead of preOrder.total_amount
     walletPaymentData?.data?.public_key
   ]);
 
+  // Handle amount changes by refreshing payment session
+  useEffect(() => {
+    if (
+      !preOrder.wallet_method ||
+      !preOrder.token ||
+      !walletPaymentData?.data?.public_key ||
+      preOrder.wallet_method !== 'checkout_flow'
+    ) {
+      return;
+    }
+
+    // Only refresh if component exists and amount has changed
+    if (flowComponentRef.current && lastAmountRef.current !== currentAmount) {
+      refreshPaymentSessionAndInitFlow({
+        publicKey: walletPaymentData.data.public_key
+      });
+    }
+  }, [currentAmount]);
+
   // Cleanup function when component unmounts
   useEffect(() => {
     return () => {
@@ -280,20 +276,5 @@ export default function FlowPayment({
     };
   }, []);
 
-  return (
-    <div className="flow-payment-container">
-      <div id="flow-container"></div>
-      {errors && (
-        <div className="text-error-100 text-xs mt-5">
-          {typeof errors === 'string'
-            ? errors
-            : Array.isArray(errors)
-            ? errors.join(', ')
-            : typeof errors === 'object'
-            ? Object.values(errors ?? {}).join(', ')
-            : 'An error occurred during payment processing'}
-        </div>
-      )}
-    </div>
-  );
+  return <div id="flow-container" className="flow-payment-container"></div>;
 }