@akinon/pz-bkm 2.0.0-beta.13 → 2.0.0-beta.15

package/CHANGELOG.md

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

package/src/views/bkm-option.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, useId } from 'react';
+import React, { ReactElement, useId, useState } from 'react';
 import Script from 'next/script';
 import * as yup from 'yup';
 import { yupResolver } from '@hookform/resolvers/yup';
@@ -53,56 +53,68 @@ const BKMOption = ({
   customUIRender
 }: BKMOptionProps) => {
   const id = useId();
+  const [isProcessing, setIsProcessing] = useState(false);
   const {
     handleSubmit,
     control,
-    formState: { errors },
+    formState: { errors, isSubmitting },
     getValues
   } = useForm<BKMOptionForm>({
     resolver: yupResolver(formSchema(translations?.required)) as any
   });
-  const [setBkm] = useSetBkmMutation();
+  const [setBkm, { isLoading: isSettingBkm }] = useSetBkmMutation();
   const [completeBkm] = useCompleteBkmMutation();
 
+  const isButtonDisabled = isSubmitting || isSettingBkm || isProcessing;
+
   const onSubmit: SubmitHandler<BKMOptionForm> = async () => {
-    const response = await setBkm(getValues('agreement')).unwrap();
+    if (isButtonDisabled) return;
 
-    const bexContext = response.context_list.find(
-      (context) => context.page_name === 'BexBinNumberPage'
-    );
+    setIsProcessing(true);
 
-    if (!bexContext) {
-      return;
-    }
+    try {
+      const response = await setBkm(getValues('agreement')).unwrap();
 
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    window.Bex.init(
-      {
-        id: bexContext.page_context.transaction_id,
-        path: bexContext.page_context.path,
-        token: bexContext.page_context.token
-      },
-      'modal',
-      {
-        container: `js-bkm-frame-${id}`,
-        buttonSize: [500, 500],
-        skipButton: true,
-        onComplete: async (status) => {
-          if (status == 'success') {
-            const data = await completeBkm().unwrap();
-            const redirectUrl =
-              data.context_list?.[0]?.page_context?.redirect_url;
-
-            if (!redirectUrl) {
-              return;
-            }
+      const bexContext = response.context_list.find(
+        (context) => context.page_name === 'BexBinNumberPage'
+      );
+
+      if (!bexContext) {
+        setIsProcessing(false);
+        return;
+      }
 
-            window.location.href = redirectUrl;
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      window.Bex.init(
+        {
+          id: bexContext.page_context.transaction_id,
+          path: bexContext.page_context.path,
+          token: bexContext.page_context.token
+        },
+        'modal',
+        {
+          container: `js-bkm-frame-${id}`,
+          buttonSize: [500, 500],
+          skipButton: true,
+          onComplete: async (status) => {
+            if (status == 'success') {
+              const data = await completeBkm().unwrap();
+              const redirectUrl =
+                data.context_list?.[0]?.page_context?.redirect_url;
+
+              if (!redirectUrl) {
+                return;
+              }
+
+              window.location.href = redirectUrl;
+            }
           }
         }
-      }
-    );
+      );
+    } catch (error) {
+      setIsProcessing(false);
+    }
   };
 
   if (customUIRender) {
@@ -166,6 +178,7 @@ const BKMOption = ({
                 classes?.button
               )}
               type="submit"
+              disabled={isButtonDisabled}
               data-testid="checkout-bank-account-place-order"
             >
               <span>{translations?.button ?? 'Pay with BKM Express'}</span>