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

package/CHANGELOG.md

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

package/src/views/Otp.tsx

@@ -73,6 +73,7 @@ export const Otp = ({
   const [canResend, setCanResend] = useState(false);
   const [time, setTime] = useState(timer);
   const [hasError, setHasError] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
   const dispatch = useAppDispatch();
   const { isPopupVisible } = useAppSelector((state) => state.otp);
 
@@ -84,18 +85,26 @@ export const Otp = ({
   const onSubmit = async (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
 
-    if (submitAction) {
-      data.code = otp;
-      data.phone = phone;
-      const res = await submitAction(data);
+    if (isSubmitting) return;
 
-      if (res?.status !== 200 || error) {
-        setHasError(true);
-      }
+    setIsSubmitting(true);
+
+    try {
+      if (submitAction) {
+        data.code = otp;
+        data.phone = phone;
+        const res = await submitAction(data);
+
+        if (res?.status !== 200 || error) {
+          setHasError(true);
+        }
 
-      if (res?.status === 200) {
-        dispatch(hidePopup());
+        if (res?.status === 200) {
+          dispatch(hidePopup());
+        }
       }
+    } finally {
+      setIsSubmitting(false);
     }
   };
 
@@ -225,6 +234,7 @@ export const Otp = ({
           {error && <p className="text-xs text-error mt-2">{error}</p>}
           <Button
             type="submit"
+            disabled={isSubmitting}
             className={twMerge(
               'mt-5 h-auto w-full py-4 text-lg font-medium uppercase',
               classes?.submitButton