@akinon/pz-hepsipay 2.0.0-beta.13 → 2.0.0-beta.14

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @akinon/pz-hepsipay
 
+## 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-hepsipay",
-  "version": "2.0.0-beta.13",
+  "version": "2.0.0-beta.14",
   "license": "MIT",
   "main": "src/index.tsx",
   "peerDependencies": {

package/src/index.tsx

@@ -1,4 +1,5 @@
 import { Button, Icon } from '@akinon/next/components';
+import { checkPaymentWillRedirect } from '@akinon/next/utils';
 import Script from 'next/script';
 import { useEffect, useCallback, useState } from 'react';
 import { RootState } from 'redux/store';
@@ -70,12 +71,13 @@ export const Hepsipay = ({
   const {
     handleSubmit,
     control,
-    formState: { errors }
+    formState: { errors, isSubmitting }
   } = useForm({
     resolver: yupResolver(hepsiPayFormSchema()) as any
   });
 
   const [isPaymentSuccessful, setIsPaymentSuccessful] = useState(false);
+  const [isProcessing, setIsProcessing] = useState(false);
 
   const context_extras = useAppSelector(
     (state: RootState) => state.checkout.preOrder?.context_extras
@@ -125,11 +127,18 @@ export const Hepsipay = ({
     }
   }, [initHepsipay]);
 
+  const isButtonDisabled = isSubmitting || isProcessing;
+
   const onSubmit: SubmitHandler<null> = async () => {
+    if (isButtonDisabled) return;
+
+    setIsProcessing(true);
+
     if (window.HepsipaySdk) {
       window.HepsipaySdk.initPayment();
     } else {
       console.error('Hepsipay SDK is not available');
+      setIsProcessing(false);
     }
   };
 
@@ -159,6 +168,7 @@ export const Hepsipay = ({
                 <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>{_translations.placeholderInput}</span>