@akinon/pz-flow-payment 1.108.0-rc.87 → 1.108.0

package/CHANGELOG.md

@@ -1,13 +1,16 @@
 # @akinon/pz-flow-payment
 
-## 1.108.0-rc.87
+## 1.108.0
 
 ### Minor Changes
 
-- 1b9e9bee: 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
-- 33d4d0c9: ZERO-3615: remove custom not found
+- 21d88c1b: ZERO-3640: Remove redundant API calls
+- d8883ce6: ZERO-3640: Refactor wallet completion handling to accept additional parameters; update related API calls
+- f85464e9: ZERO-3640: Fix API call to use hyphenated key for payment ID in FlowPayment component
+- ce2e9e20: ZERO-3640: Add error handling and WalletCompletePage request to FlowPayment
+- e00b4a82: ZERO-3640: Refactor wallet selection initialization and error handling; streamline payment session management
+- 59ed7a7e: ZERO-3640: Add order number state and update FlowPayment component for wallet payment response handling
+- 31a2d35a: ZERO-3640: Refactor checkout API call to include useFormData option; update FlowPayment component for improved error handling and code readability
 
 ## 1.107.0
 
@@ -48,29 +51,6 @@
 ### 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.108.0-rc.87",
+  "version": "1.108.0",
   "main": "src/index.tsx",
   "dependencies": {
     "@checkout.com/checkout-web-components": "0.7.0-beta"

package/src/views/index.tsx

@@ -1,10 +1,7 @@
 import { checkoutApi } from '@akinon/next/data/client/checkout';
 import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
-import {
-  useSetPaymentOptionMutation,
-  useSetWalletSelectionPageMutation,
-  useSetWalletPaymentPageMutation
-} from '@akinon/next/data/client/checkout';
+import { getCookie } from '@akinon/next/utils';
+import { getUrlPathWithLocale } from '@akinon/next/utils/localization';
 import {
   ComponentOptions,
   CustomTranslations,
@@ -13,7 +10,23 @@ import {
   PaymentSessionResponse
 } from '@checkout.com/checkout-web-components';
 import { RootState } from '@theme/redux/store';
-import { useEffect, useRef, useMemo } from 'react';
+import { useEffect, useRef, useMemo, useState } from 'react';
+
+const formatErrorMessage = (errors: any): string => {
+  if (typeof errors === 'string') {
+    return errors;
+  }
+
+  if (Array.isArray(errors)) {
+    return errors.join(', ');
+  }
+
+  if (typeof errors === 'object' && errors !== null) {
+    return Object.values(errors).join(', ');
+  }
+
+  return 'An error occurred during payment processing';
+};
 
 export default function FlowPayment({
   options
@@ -64,12 +77,10 @@ export default function FlowPayment({
   const flowComponentRef = useRef<any>(null);
   const lastAmountRef = useRef<string | null>(null);
   const isInitializingRef = useRef<boolean>(false);
-  const walletPaymentInitialized = useRef<boolean>(false);
-
-  // RTK Query mutations
-  const [setPaymentOption] = useSetPaymentOptionMutation();
-  const [setWalletSelectionPage] = useSetWalletSelectionPageMutation();
-  const [setWalletPaymentPage] = useSetWalletPaymentPageMutation();
+  const [errors, setErrors] = useState<any>(null);
+  const [walletSelectionReady, setWalletSelectionReady] =
+    useState<boolean>(false);
+  const [orderNumber, setOrderNumber] = useState<string | null>(null);
 
   // Memoize the amount to track actual changes
   const currentAmount = useMemo(() => {
@@ -77,100 +88,110 @@ export default function FlowPayment({
   }, [preOrder.total_amount]);
 
   const initWalletSelection = async () => {
-    if (!walletPaymentInitialized.current) {
-      walletPaymentInitialized.current = true;
-
-      const walletSelectionPageResponse = await dispatch(
-        checkoutApi.endpoints.setWalletSelectionPage.initiate({
-          payment_option: preOrder.payment_option?.pk
-        })
-      ).unwrap();
+    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'
-        );
+    const walletPaymentPageContext =
+      walletSelectionPageResponse.context_list.find(
+        (c) => c.page_name === 'WalletPaymentPage'
+      );
 
-      if (walletPaymentPageContext) {
-        dispatch(checkoutApi.endpoints.setWalletPaymentPage.initiate({}));
-      }
+    if (!walletPaymentPageContext) {
+      setErrors(
+        'Payment method not available. Please try a different payment option.'
+      );
+      setWalletSelectionReady(false);
+      return;
     }
-  };
 
-  const refreshPaymentSessionAndInitFlow = async ({
-    publicKey
-  }: {
-    publicKey: string;
-  }) => {
-    // Prevent multiple simultaneous initializations
-    if (isInitializingRef.current) {
+    // Initialize wallet payment page to get payment session data
+    const walletPaymentPageResponse = await dispatch(
+      checkoutApi.endpoints.setWalletPaymentPage.initiate({
+        payment_method: 'checkout_flow',
+        wallet_method: preOrder.wallet_method
+      })
+    ).unwrap();
+
+    if (walletPaymentPageResponse.errors) {
+      setErrors(walletPaymentPageResponse.errors);
+      setWalletSelectionReady(false);
       return;
     }
 
-    isInitializingRef.current = true;
+    // Store the order number from the wallet payment page response
+    if (walletPaymentPageResponse.pre_order?.number) {
+      setOrderNumber(walletPaymentPageResponse.pre_order.number);
+    }
 
-    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;
-        }
-      }
+    setWalletSelectionReady(true);
+  };
 
-      // Step 2: Set wallet selection page
-      const walletSelectionResponse = await setWalletSelectionPage({
-        payment_option: preOrder.payment_option?.pk
-      }).unwrap();
+  const handlePaymentSuccess = async (paymentData: any) => {
+    setErrors(null);
 
-      const walletPaymentPageContext =
-        walletSelectionResponse.context_list?.find(
-          (c) => c.page_name === 'WalletPaymentPage'
-        );
+    try {
+      const ckoPaymentId = paymentData?.id;
+      const isSuccess = paymentData?.status === 'Approved';
+
+      const paymentCompleteResponse = await dispatch(
+        checkoutApi.endpoints.setWalletCompletePage.initiate({
+          success: isSuccess,
+          'cko-payment-id': ckoPaymentId,
+          oid: orderNumber
+        })
+      ).unwrap();
 
-      if (!walletPaymentPageContext) {
+      if (paymentCompleteResponse.errors) {
+        setErrors(paymentCompleteResponse.errors);
         return;
       }
 
-      // Step 3: Set wallet payment page to get updated payment session
-      const walletPaymentResponse = await setWalletPaymentPage({}).unwrap();
+      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;
 
-      // Step 4: Initialize flow component with fresh payment session
-      await initFlowPaymentWebComponents({
-        publicKey,
-        paymentSession:
-          walletPaymentResponse?.pre_order?.context_extras ||
-          preOrder.context_extras
-      });
+        const redirectUrlWithLocale = `${
+          window.location.origin
+        }${getUrlPathWithLocale(redirectUrl, getCookie('pz-locale') || 'en')}`;
+
+        window.location.href = redirectUrlWithLocale;
+      }
     } catch (error) {
-      console.error(
-        'Error refreshing payment session and initializing flow:',
-        error
-      );
-    } finally {
-      isInitializingRef.current = false;
+      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 ({
-    publicKey,
-    paymentSession
+    publicKey
   }: {
     publicKey: string;
-    paymentSession?: any;
   }) => {
+    // Prevent multiple simultaneous initializations
+    if (isInitializingRef.current) {
+      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 {
       // Destroy existing flow component if it exists
       if (flowComponentRef.current) {
@@ -188,7 +209,18 @@ export default function FlowPayment({
         container.innerHTML = '';
       }
 
-      // Update the last amount reference
+      // FIX: Use existing payment session from preOrder.context_extras
+      let paymentSession = preOrder.context_extras;
+
+      // If we don't have payment session data, we need to wait for it
+      if (!paymentSession) {
+        console.warn(
+          'FlowPayment: Payment session not available yet, component will retry when data is ready'
+        );
+        return;
+      }
+
+      // Update the last amount reference after getting fresh data
       lastAmountRef.current = currentAmount;
 
       const checkout = await loadCheckoutWebComponents({
@@ -196,15 +228,21 @@ export default function FlowPayment({
         environment: options?.environment || 'production',
         locale: options?.locale || 'en',
         translations: options?.translations,
-        paymentSession:
-          paymentSession || (preOrder.context_extras as PaymentSessionResponse),
+        paymentSession: paymentSession as PaymentSessionResponse,
         appearance: options?.appearance,
         componentOptions: options?.componentOptions
           ? { flow: options.componentOptions }
           : undefined
       });
 
-      const flowComponent = checkout.create('flow');
+      const flowComponent = checkout.create('flow', {
+        onPaymentCompleted: async (_self, paymentResponse) => {
+          handlePaymentSuccess(paymentResponse);
+        },
+        onError: async (_self, error) => {
+          handlePaymentError(error);
+        }
+      });
       flowComponentRef.current = flowComponent;
 
       if (container) {
@@ -212,6 +250,8 @@ export default function FlowPayment({
       }
     } catch (error) {
       console.error('Error initializing flow payment components:', error);
+    } finally {
+      isInitializingRef.current = false;
     }
   };
 
@@ -219,48 +259,29 @@ export default function FlowPayment({
     initWalletSelection();
   }, []);
 
-  // Initial flow component initialization
   useEffect(() => {
     if (
       !preOrder.wallet_method ||
-      !preOrder.token ||
       !walletPaymentData?.data?.public_key ||
-      preOrder.wallet_method !== 'checkout_flow'
+      preOrder.wallet_method !== 'checkout_flow' ||
+      !walletSelectionReady ||
+      !preOrder.context_extras
     ) {
       return;
     }
 
-    // Only initialize if component doesn't exist yet (initial mount)
-    if (!flowComponentRef.current) {
-      initFlowPaymentWebComponents({
-        publicKey: walletPaymentData.data.public_key
-      });
-    }
+    initFlowPaymentWebComponents({
+      publicKey: walletPaymentData.data.public_key
+    });
   }, [
     preOrder.wallet_method,
     preOrder.token,
-    walletPaymentData?.data?.public_key
+    currentAmount, // Use memoized amount instead of preOrder.total_amount
+    walletPaymentData?.data?.public_key,
+    walletSelectionReady,
+    preOrder.context_extras // Add payment session dependency
   ]);
 
-  // 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 () => {
@@ -271,10 +292,17 @@ export default function FlowPayment({
           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>;
+  return (
+    <div className="flow-payment-container">
+      <div id="flow-container"></div>
+      {errors && (
+        <div className="text-error-100 text-xs mt-5">
+          {formatErrorMessage(errors)}
+        </div>
+      )}
+    </div>
+  );
 }