@akinon/projectzero 2.0.0-beta.13 → 2.0.0-beta.14

package/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @akinon/projectzero
 
+## 2.0.0-beta.14
+
 ## 2.0.0-beta.13
 
 ## 1.118.0

package/app-template/CHANGELOG.md

@@ -1,5 +1,44 @@
 # projectzeronext
 
+## 2.0.0-beta.14
+
+### Minor Changes
+
+- 6ad72e8d: ZERO-4032: Add loading state management for payment submissions across multiple components and add safe guarding
+
+### Patch Changes
+
+- Updated dependencies [6ad72e8d]
+- Updated dependencies [aef81c5d]
+- Updated dependencies [0754c835]
+- Updated dependencies [c6c5c1cd]
+  - @akinon/pz-pay-on-delivery@2.0.0-beta.14
+  - @akinon/pz-credit-payment@2.0.0-beta.14
+  - @akinon/pz-google-pay@2.0.0-beta.14
+  - @akinon/pz-masterpass@2.0.0-beta.14
+  - @akinon/pz-saved-card@2.0.0-beta.14
+  - @akinon/pz-apple-pay@2.0.0-beta.14
+  - @akinon/pz-hepsipay@2.0.0-beta.14
+  - @akinon/pz-gpay@2.0.0-beta.14
+  - @akinon/pz-bkm@2.0.0-beta.14
+  - @akinon/pz-otp@2.0.0-beta.14
+  - @akinon/next@2.0.0-beta.14
+  - @akinon/pz-virtual-try-on@2.0.0-beta.14
+  - @akinon/pz-akifast@2.0.0-beta.14
+  - @akinon/pz-b2b@2.0.0-beta.14
+  - @akinon/pz-basket-gift-pack@2.0.0-beta.14
+  - @akinon/pz-checkout-gift-pack@2.0.0-beta.14
+  - @akinon/pz-click-collect@2.0.0-beta.14
+  - @akinon/pz-cybersource-uc@2.0.0-beta.14
+  - @akinon/pz-flow-payment@2.0.0-beta.14
+  - @akinon/pz-haso@2.0.0-beta.14
+  - @akinon/pz-masterpass-rest@2.0.0-beta.14
+  - @akinon/pz-multi-basket@2.0.0-beta.14
+  - @akinon/pz-one-click-checkout@2.0.0-beta.14
+  - @akinon/pz-similar-products@2.0.0-beta.14
+  - @akinon/pz-tabby-extension@2.0.0-beta.14
+  - @akinon/pz-tamara-extension@2.0.0-beta.14
+
 ## 2.0.0-beta.13
 
 ### Minor Changes

package/app-template/package.json

@@ -1,6 +1,6 @@
 {
   "name": "projectzeronext",
-  "version": "2.0.0-beta.13",
+  "version": "2.0.0-beta.14",
   "private": true,
   "license": "MIT",
   "scripts": {
@@ -24,32 +24,32 @@
     "test:middleware": "jest middleware-matcher.test.ts --bail"
   },
   "dependencies": {
-    "@akinon/next": "2.0.0-beta.13",
-    "@akinon/pz-akifast": "2.0.0-beta.13",
-    "@akinon/pz-apple-pay": "2.0.0-beta.13",
-    "@akinon/pz-b2b": "2.0.0-beta.13",
-    "@akinon/pz-basket-gift-pack": "2.0.0-beta.13",
-    "@akinon/pz-bkm": "2.0.0-beta.13",
-    "@akinon/pz-checkout-gift-pack": "2.0.0-beta.13",
-    "@akinon/pz-click-collect": "2.0.0-beta.13",
-    "@akinon/pz-credit-payment": "2.0.0-beta.13",
-    "@akinon/pz-cybersource-uc": "2.0.0-beta.13",
-    "@akinon/pz-flow-payment": "2.0.0-beta.13",
-    "@akinon/pz-google-pay": "2.0.0-beta.13",
-    "@akinon/pz-gpay": "2.0.0-beta.13",
-    "@akinon/pz-haso": "2.0.0-beta.13",
-    "@akinon/pz-hepsipay": "2.0.0-beta.13",
-    "@akinon/pz-masterpass": "2.0.0-beta.13",
-    "@akinon/pz-masterpass-rest": "2.0.0-beta.13",
-    "@akinon/pz-multi-basket": "2.0.0-beta.13",
-    "@akinon/pz-one-click-checkout": "2.0.0-beta.13",
-    "@akinon/pz-otp": "2.0.0-beta.13",
-    "@akinon/pz-pay-on-delivery": "2.0.0-beta.13",
-    "@akinon/pz-saved-card": "2.0.0-beta.13",
-    "@akinon/pz-similar-products": "2.0.0-beta.13",
-    "@akinon/pz-tabby-extension": "2.0.0-beta.13",
-    "@akinon/pz-tamara-extension": "2.0.0-beta.13",
-    "@akinon/pz-virtual-try-on": "2.0.0-beta.13",
+    "@akinon/next": "2.0.0-beta.14",
+    "@akinon/pz-akifast": "2.0.0-beta.14",
+    "@akinon/pz-apple-pay": "2.0.0-beta.14",
+    "@akinon/pz-b2b": "2.0.0-beta.14",
+    "@akinon/pz-basket-gift-pack": "2.0.0-beta.14",
+    "@akinon/pz-bkm": "2.0.0-beta.14",
+    "@akinon/pz-checkout-gift-pack": "2.0.0-beta.14",
+    "@akinon/pz-click-collect": "2.0.0-beta.14",
+    "@akinon/pz-credit-payment": "2.0.0-beta.14",
+    "@akinon/pz-cybersource-uc": "2.0.0-beta.14",
+    "@akinon/pz-flow-payment": "2.0.0-beta.14",
+    "@akinon/pz-google-pay": "2.0.0-beta.14",
+    "@akinon/pz-gpay": "2.0.0-beta.14",
+    "@akinon/pz-haso": "2.0.0-beta.14",
+    "@akinon/pz-hepsipay": "2.0.0-beta.14",
+    "@akinon/pz-masterpass": "2.0.0-beta.14",
+    "@akinon/pz-masterpass-rest": "2.0.0-beta.14",
+    "@akinon/pz-multi-basket": "2.0.0-beta.14",
+    "@akinon/pz-one-click-checkout": "2.0.0-beta.14",
+    "@akinon/pz-otp": "2.0.0-beta.14",
+    "@akinon/pz-pay-on-delivery": "2.0.0-beta.14",
+    "@akinon/pz-saved-card": "2.0.0-beta.14",
+    "@akinon/pz-similar-products": "2.0.0-beta.14",
+    "@akinon/pz-tabby-extension": "2.0.0-beta.14",
+    "@akinon/pz-tamara-extension": "2.0.0-beta.14",
+    "@akinon/pz-virtual-try-on": "2.0.0-beta.14",
     "@hookform/resolvers": "2.9.0",
     "@next/third-parties": "16.1.6",
     "@react-google-maps/api": "2.17.1",
@@ -72,7 +72,7 @@
     "yup": "0.32.11"
   },
   "devDependencies": {
-    "@akinon/eslint-plugin-projectzero": "2.0.0-beta.13",
+    "@akinon/eslint-plugin-projectzero": "2.0.0-beta.14",
     "@semantic-release/changelog": "6.0.2",
     "@semantic-release/exec": "6.0.3",
     "@semantic-release/git": "10.0.1",

package/app-template/public/locales/en/checkout.json

@@ -154,5 +154,10 @@
   "error": {
     "title": "An unexpected error has occurred. Please try again later.",
     "button": "Try Again"
+  },
+  "apple_pay": {
+    "processing": "Processing...",
+    "pay_button": "Pay with Apple Pay",
+    "payment_failed": "Payment failed"
   }
 }

package/app-template/public/locales/tr/checkout.json

@@ -154,5 +154,10 @@
   "error": {
     "title": "Beklenmeyen bir hata oluştu. Lütfen daha sonra tekrar deneyiniz.",
     "button": "Tekrar deneyin"
+  },
+  "apple_pay": {
+    "processing": "İşleniyor...",
+    "pay_button": "Apple Pay ile Öde",
+    "payment_failed": "Ödeme başarısız oldu"
   }
 }

package/app-template/src/views/checkout/steps/payment/options/credit-card/index.tsx

@@ -16,7 +16,7 @@ import PaymentHeader from '../../payment-header';
 import CreditCardInstallments from './installments';
 import { useLocalization } from '@akinon/next/hooks';
 import { Image } from '@akinon/next/components/image';
-import { getPosError } from '@akinon/next/utils';
+import { getPosError, checkPaymentWillRedirect } from '@akinon/next/utils';
 import PluginModule, { Component } from '@akinon/next/components/plugin-module';
 import { PaymentOption } from '@akinon/next/types';
 
@@ -101,7 +101,7 @@ const CheckoutCreditCard = () => {
     setValue: setFormValue,
     trigger: validateInput,
     control,
-    formState: { errors },
+    formState: { errors, isSubmitting },
     setError,
     getValues,
     clearErrors
@@ -119,8 +119,12 @@ const CheckoutCreditCard = () => {
   const [years, setYears] = useState([]);
   const [formError, setFormError] = useState(null);
   const [cardBinNumber, setCardBinNumber] = useState(null);
+  const [isProcessing, setIsProcessing] = useState(false);
   const [setBinNumber] = useSetBinNumberMutation();
-  const [completeCreditCardPayment] = useCompleteCreditCardPaymentMutation();
+  const [completeCreditCardPayment, { isLoading: isCompletingPayment }] =
+    useCompleteCreditCardPaymentMutation();
+
+  const isButtonDisabled = isSubmitting || isCompletingPayment || isProcessing;
 
   const handleCardNumberChange = (value) => {
     const binNumber = value.replace(/\D/g, '').substring(0, 6);
@@ -136,9 +140,20 @@ const CheckoutCreditCard = () => {
   };
 
   const onSubmit: SubmitHandler<CreditCardForm> = async (data) => {
-    const response = await completeCreditCardPayment(data).unwrap();
+    if (isButtonDisabled) return;
+
+    setIsProcessing(true);
+
+    try {
+      const response = await completeCreditCardPayment(data).unwrap();
+      setFormError(response?.errors);
 
-    setFormError(response?.errors);
+      if (response?.errors || !checkPaymentWillRedirect(response)) {
+        setIsProcessing(false);
+      }
+    } catch (error) {
+      setIsProcessing(false);
+    }
   };
 
   useEffect(() => {
@@ -392,6 +407,7 @@ const CheckoutCreditCard = () => {
             <Button
               className="group uppercase mt-4 inline-flex items-center justify-center"
               type="submit"
+              disabled={isButtonDisabled}
               data-testid="checkout-credit-card-place-order"
             >
               <span>{t('checkout.payment.credit_card.form.button')}</span>

package/app-template/src/views/checkout/steps/payment/options/funds-transfer.tsx

@@ -12,6 +12,7 @@ import * as yup from 'yup';
 import CheckoutAgreements from '../agreements';
 import PaymentHeader from '../payment-header';
 import { useLocalization } from '@akinon/next/hooks';
+import { checkPaymentWillRedirect } from '@akinon/next/utils';
 import { Image } from '@akinon/next/components/image';
 import { Trans } from '@akinon/next/components/trans';
 
@@ -25,21 +26,39 @@ const CheckoutFundsTransfer = () => {
   const {
     handleSubmit,
     control,
-    formState: { errors }
+    formState: { errors, isSubmitting }
   } = useForm({
     resolver: yupResolver(fundsTransferFormSchema())
   });
   const [formError, setFormError] = useState(null);
+  const [isProcessing, setIsProcessing] = useState(false);
   const { bankAccounts, selectedBankAccountPk, preOrder } = useAppSelector(
     (state: RootState) => state.checkout
   );
   const [setFundsTransferOption] = useSetFundsTransferOptionMutation();
-  const [completeFundsTransfer] = useCompleteFundsTransferMutation();
+  const [completeFundsTransfer, { isLoading: isCompletingPayment }] =
+    useCompleteFundsTransferMutation();
 
-  const onSubmit: SubmitHandler<null> = async () => {
-    const response = await completeFundsTransfer().unwrap();
+  const isButtonDisabled = isSubmitting || isCompletingPayment || isProcessing;
 
-    setFormError(response?.errors?.non_field_errors);
+  const onSubmit: SubmitHandler<null> = async () => {
+    if (isButtonDisabled) return;
+
+    setIsProcessing(true);
+
+    try {
+      const response = await completeFundsTransfer().unwrap();
+      setFormError(response?.errors?.non_field_errors);
+
+      if (
+        response?.errors?.non_field_errors ||
+        !checkPaymentWillRedirect(response)
+      ) {
+        setIsProcessing(false);
+      }
+    } catch (error) {
+      setIsProcessing(false);
+    }
   };
 
   useEffect(() => {
@@ -155,6 +174,7 @@ const CheckoutFundsTransfer = () => {
           <Button
             className="group uppercase mt-4 inline-flex items-center justify-center w-full"
             type="submit"
+            disabled={isButtonDisabled}
             data-testid="checkout-bank-account-place-order"
           >
             <span> {t('checkout.payment.fund_transfer.button')}</span>

package/app-template/src/views/checkout/steps/payment/options/loyalty.tsx

@@ -1,16 +1,35 @@
 'use client';
 
+import { useState } from 'react';
 import { useCompleteLoyaltyPaymentMutation } from '@akinon/next/data/client/checkout';
 import { useAppSelector } from '@akinon/next/redux/hooks';
 import { useForm } from 'react-hook-form';
+import { checkPaymentWillRedirect } from '@akinon/next/utils';
 
 export default function LoyaltyPayment() {
   const { payment_option } = useAppSelector((state) => state.checkout.preOrder);
   const { handleSubmit } = useForm();
-  const [completeLoyaltyPayment] = useCompleteLoyaltyPaymentMutation();
+  const [completeLoyaltyPayment, { isLoading: isCompletingPayment }] =
+    useCompleteLoyaltyPaymentMutation();
+  const [isProcessing, setIsProcessing] = useState(false);
+
+  const isButtonDisabled = isCompletingPayment || isProcessing;
 
   const onSubmit = async () => {
-    completeLoyaltyPayment();
+    if (isButtonDisabled) return;
+
+    setIsProcessing(true);
+
+    try {
+      const response = await completeLoyaltyPayment().unwrap();
+
+      if (response?.errors || !checkPaymentWillRedirect(response)) {
+        setIsProcessing(false);
+      }
+    } catch (error) {
+      console.error('Error completing loyalty payment:', error);
+      setIsProcessing(false);
+    }
   };
 
   return (

package/app-template/src/views/checkout/steps/payment/options/redirection.tsx

@@ -8,7 +8,7 @@ import { useForm } from 'react-hook-form';
 import { twMerge } from 'tailwind-merge';
 import * as yup from 'yup';
 import { useEffect, useState } from 'react';
-import { getPosError } from '@akinon/next/utils';
+import { getPosError, checkPaymentWillRedirect } from '@akinon/next/utils';
 import { useMessageListener } from '@akinon/next/hooks';
 
 interface FormValues {
@@ -26,16 +26,33 @@ const formSchema = () =>
 export default function RedirectionPayment() {
   const { payment_option } = useAppSelector((state) => state.checkout.preOrder);
   const [formError, setFormError] = useState(null);
+  const [isProcessing, setIsProcessing] = useState(false);
   const {
     register,
     handleSubmit,
-    formState: { errors }
+    formState: { errors, isSubmitting }
   } = useForm<FormValues>({
     resolver: yupResolver(formSchema())
   });
-  const [completeRedirectionPayment] = useCompleteRedirectionPaymentMutation();
+  const [completeRedirectionPayment, { isLoading: isCompletingPayment }] =
+    useCompleteRedirectionPaymentMutation();
+
+  const isButtonDisabled = isSubmitting || isCompletingPayment || isProcessing;
+
   const onSubmit = async () => {
-    completeRedirectionPayment();
+    if (isButtonDisabled) return;
+
+    setIsProcessing(true);
+
+    try {
+      const response = await completeRedirectionPayment().unwrap();
+
+      if (response?.errors || !checkPaymentWillRedirect(response)) {
+        setIsProcessing(false);
+      }
+    } catch (error) {
+      setIsProcessing(false);
+    }
   };
 
   useMessageListener();
@@ -91,6 +108,7 @@ export default function RedirectionPayment() {
 
         <Button
           data-testid="checkout-submit-button"
+          disabled={isButtonDisabled}
           className={twMerge('w-full md:w-36 px-4 md:px-0')}
         >
           {payment_option.name}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/projectzero",
-  "version": "2.0.0-beta.13",
+  "version": "2.0.0-beta.14",
   "private": false,
   "description": "CLI tool to manage your Project Zero Next project",
   "bin": {