@akinon/pz-apple-pay 2.0.0-beta.13 → 2.0.0-beta.15

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @akinon/pz-apple-pay
 
+## 2.0.0-beta.15
+
+## 2.0.0-beta.14
+
+### Minor Changes
+
+- 6ad72e8d: ZERO-4032: Add loading state management for payment submissions across multiple components and add safe guarding
+
 ## 2.0.0-beta.13
 
 ## 1.118.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/pz-apple-pay",
-  "version": "2.0.0-beta.13",
+  "version": "2.0.0-beta.15",
   "license": "MIT",
   "main": "src/index.tsx",
   "peerDependencies": {

package/src/hooks/use-apple-pay.tsx

@@ -3,6 +3,7 @@ import { useAppSelector, useAppDispatch } from '@akinon/next/redux/hooks';
 import { getCookie } from '@akinon/next/utils';
 import { getUrlPathWithLocale } from '@akinon/next/utils/localization';
 import { RootState } from '@theme/redux/store';
+import { useLocalization } from '@akinon/next/hooks';
 import { useState, useMemo } from 'react';
 
 export default function useApplePay() {
@@ -10,7 +11,9 @@ export default function useApplePay() {
     (state: RootState) => state.checkout
   );
   const dispatch = useAppDispatch();
+  const { t } = useLocalization();
   const [errors, setErrors] = useState(null);
+  const [isProcessing, setIsProcessing] = useState(false);
 
   const paymentErrors = useMemo(() => {
     if (typeof errors === 'string') {
@@ -79,60 +82,70 @@ export default function useApplePay() {
   }, [walletPaymentData]);
 
   const initPaymentRequest = async () => {
-    setErrors(null);
-
-    const request = paymentRequest;
-    const paymentRequestResponse = await request.show();
+    if (isProcessing) return;
 
-    if (paymentRequestResponse.details?.token?.paymentData) {
-      const paymentData = paymentRequestResponse.details.token.paymentData;
+    setIsProcessing(true);
+    setErrors(null);
 
-      const walletPaymentPageResponse = await dispatch(
-        checkoutApi.endpoints.setWalletPaymentPage.initiate({
-          payment_token: JSON.stringify(paymentData)
-        })
-      ).unwrap();
+    try {
+      const request = paymentRequest;
+      const paymentRequestResponse = await request.show();
 
-      if (walletPaymentPageResponse.errors) {
-        setErrors(walletPaymentPageResponse.errors);
-      }
+      if (paymentRequestResponse.details?.token?.paymentData) {
+        const paymentData = paymentRequestResponse.details.token.paymentData;
 
-      if (
-        walletPaymentPageResponse.context_list.find(
-          (c) => c.page_name === 'WalletCompletePage'
-        )
-      ) {
-        const paymentCompleteResponse = await dispatch(
-          checkoutApi.endpoints.setWalletCompletePage.initiate({
-            success: true
+        const walletPaymentPageResponse = await dispatch(
+          checkoutApi.endpoints.setWalletPaymentPage.initiate({
+            payment_token: JSON.stringify(paymentData)
           })
         ).unwrap();
 
-        if (paymentCompleteResponse.errors) {
-          setErrors(paymentCompleteResponse.errors);
+        if (walletPaymentPageResponse.errors) {
+          setErrors(walletPaymentPageResponse.errors);
         }
 
         if (
-          paymentCompleteResponse.context_list.find(
-            (c) => c.page_name === 'ThankYouPage'
+          walletPaymentPageResponse.context_list.find(
+            (c) => c.page_name === 'WalletCompletePage'
           )
         ) {
-          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'))}`;
-
-          await paymentRequestResponse.complete('success');
-          window.location.href = redirectUrlWithLocale;
+          const paymentCompleteResponse = await dispatch(
+            checkoutApi.endpoints.setWalletCompletePage.initiate({
+              success: true
+            })
+          ).unwrap();
+
+          if (paymentCompleteResponse.errors) {
+            setErrors(paymentCompleteResponse.errors);
+          }
+
+          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'))}`;
+
+            await paymentRequestResponse.complete('success');
+            window.location.href = redirectUrlWithLocale;
+          } else {
+            await paymentRequestResponse.complete('fail');
+          }
         } else {
           await paymentRequestResponse.complete('fail');
         }
-      } else {
-        await paymentRequestResponse.complete('fail');
       }
+    } catch (error) {
+      console.error('Apple Pay error:', error);
+      setErrors(error?.message || t('checkout.apple_pay.payment_failed'));
+    } finally {
+      setIsProcessing(false);
     }
   };
 
@@ -141,6 +154,7 @@ export default function useApplePay() {
     paymentErrors,
     setPaymentErrors: setErrors,
     onMerchantValidation,
-    initPaymentRequest
+    initPaymentRequest,
+    isProcessing
   };
 }

package/src/views/index.tsx

@@ -2,6 +2,7 @@
 
 import { JSX } from 'react';
 import { useAppSelector } from '@akinon/next/redux/hooks';
+import { useLocalization } from '@akinon/next/hooks';
 import { RootState } from '@theme/redux/store';
 import useApplePay from '../hooks/use-apple-pay';
 
@@ -16,7 +17,8 @@ export default function ApplePay({ customUIRender }: ApplePayProps) {
   const { walletPaymentData } = useAppSelector(
     (state: RootState) => state.checkout
   );
-  const { paymentErrors, initPaymentRequest } = useApplePay();
+  const { t } = useLocalization();
+  const { paymentErrors, initPaymentRequest, isProcessing } = useApplePay();
 
   if (!walletPaymentData) {
     return null;
@@ -31,7 +33,9 @@ export default function ApplePay({ customUIRender }: ApplePayProps) {
 
   return (
     <div>
-      <button onClick={initPaymentRequest}>Pay with Apple Pay</button>
+      <button onClick={initPaymentRequest} disabled={isProcessing}>
+        {isProcessing ? t('checkout.apple_pay.processing') : t('checkout.apple_pay.pay_button')}
+      </button>
 
       {paymentErrors?.length > 0 && (
         <div className="text-error-100 text-xs mt-5">{paymentErrors}</div>