@akinon/pz-flow-payment 1.108.0-rc.0 → 1.108.0-rc.10

package/CHANGELOG.md

@@ -1,5 +1,49 @@
 # @akinon/pz-flow-payment
 
+## 1.108.0-rc.10
+
+### Minor Changes
+
+- 59ed7a7e: ZERO-3640: Add order number state and update FlowPayment component for wallet payment response handling
+
+## 1.108.0-rc.9
+
+## 1.108.0-rc.8
+
+### Minor Changes
+
+- f85464e9: ZERO-3640: Fix API call to use hyphenated key for payment ID in FlowPayment component
+
+## 1.108.0-rc.7
+
+## 1.108.0-rc.6
+
+## 1.108.0-rc.5
+
+### Minor Changes
+
+- 31a2d35: ZERO-3640: Refactor checkout API call to include useFormData option; update FlowPayment component for improved error handling and code readability
+
+## 1.108.0-rc.4
+
+### Minor Changes
+
+- d8883ce: ZERO-3640: Refactor wallet completion handling to accept additional parameters; update related API calls
+
+## 1.108.0-rc.3
+
+### Minor Changes
+
+- e00b4a8: ZERO-3640: Refactor wallet selection initialization and error handling; streamline payment session management
+
+## 1.108.0-rc.2
+
+## 1.108.0-rc.1
+
+### Minor Changes
+
+- 21d88c1: ZERO-3640: Remove redundant API calls
+
 ## 1.108.0-rc.0
 
 ### Minor Changes

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@akinon/pz-flow-payment",
   "license": "MIT",
-  "version": "1.108.0-rc.0",
+  "version": "1.108.0-rc.10",
   "main": "src/index.tsx",
   "dependencies": {
     "@checkout.com/checkout-web-components": "0.7.0-beta"

package/src/views/index.tsx

@@ -77,10 +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);
   const [errors, setErrors] = useState<any>(null);
-
-  const environment = options?.environment || 'sandbox';
+  const [walletSelectionReady, setWalletSelectionReady] =
+    useState<boolean>(false);
+  const [orderNumber, setOrderNumber] = useState<string | null>(null);
 
   // Memoize the amount to track actual changes
   const currentAmount = useMemo(() => {
@@ -100,63 +100,69 @@ export default function FlowPayment({
       );
 
     if (!walletPaymentPageContext) {
+      setErrors(
+        'Payment method not available. Please try a different payment option.'
+      );
+      setWalletSelectionReady(false);
       return;
     }
 
-    // FIX: Only call setWalletPaymentPage if not already initialized
-    if (!walletPaymentInitialized.current) {
-      walletPaymentInitialized.current = true;
-      dispatch(checkoutApi.endpoints.setWalletPaymentPage.initiate({}));
+    // 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;
     }
+
+    // Store the order number from the wallet payment page response
+    if (walletPaymentPageResponse.pre_order?.number) {
+      setOrderNumber(walletPaymentPageResponse.pre_order.number);
+    }
+
+    setWalletSelectionReady(true);
   };
 
   const handlePaymentSuccess = async (paymentData: any) => {
     setErrors(null);
 
     try {
-      const walletPaymentPageResponse = await dispatch(
-        checkoutApi.endpoints.setWalletPaymentPage.initiate({
-          payment_token: JSON.stringify(paymentData)
+      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 (walletPaymentPageResponse.errors) {
-        setErrors(walletPaymentPageResponse.errors);
+      if (paymentCompleteResponse.errors) {
+        setErrors(paymentCompleteResponse.errors);
         return;
       }
 
       if (
-        walletPaymentPageResponse.context_list.find(
-          (c) => c.page_name === 'WalletCompletePage'
+        paymentCompleteResponse.context_list.find(
+          (c) => c.page_name === 'ThankYouPage'
         )
       ) {
-        const paymentCompleteResponse = await dispatch(
-          checkoutApi.endpoints.setWalletCompletePage.initiate(true)
-        ).unwrap();
+        const redirectUrl = paymentCompleteResponse.context_list.find(
+          (c) => c.page_name === 'ThankYouPage'
+        )?.page_context.context_data.redirect_url;
 
-        if (paymentCompleteResponse.errors) {
-          setErrors(paymentCompleteResponse.errors);
-          return;
-        }
+        const redirectUrlWithLocale = `${
+          window.location.origin
+        }${getUrlPathWithLocale(redirectUrl, getCookie('pz-locale') || 'en')}`;
 
-        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;
-        }
+        window.location.href = redirectUrlWithLocale;
       }
     } catch (error) {
       console.error('Error processing payment completion:', error);
@@ -203,24 +209,15 @@ export default function FlowPayment({
         container.innerHTML = '';
       }
 
-      // FIX: Use existing payment session instead of making another API call
+      // FIX: Use existing payment session from preOrder.context_extras
       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;
-        }
+      // 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
@@ -265,9 +262,10 @@ export default function FlowPayment({
   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;
     }
@@ -279,7 +277,9 @@ export default function FlowPayment({
     preOrder.wallet_method,
     preOrder.token,
     currentAmount, // Use memoized amount instead of preOrder.total_amount
-    walletPaymentData?.data?.public_key
+    walletPaymentData?.data?.public_key,
+    walletSelectionReady,
+    preOrder.context_extras // Add payment session dependency
   ]);
 
   // Cleanup function when component unmounts
@@ -292,8 +292,6 @@ export default function FlowPayment({
           console.warn('Error destroying flow component on unmount:', error);
         }
       }
-      // Reset initialization flag on unmount
-      walletPaymentInitialized.current = false;
     };
   }, []);