dhre-ui-kit 0.0.232 → 0.0.234

package/lib/index.mjs

@@ -3988,11 +3988,14 @@ const OTPInput = React.forwardRef(
     resendOtpColor,
     label = "OTP",
     resendText = "Resend OTP",
-    mode
+    mode,
+    disabled
   }, ref) => {
     const [otp, setOTP] = useState("");
     const [isResendOtpEnable, setIsResendOtpEnable] = useState(false);
     const [activeInput, setActiveInput] = useState(null);
+    const [resendOTPCount, setResendOTPCount] = useState(0);
+    const [errorMessageMaxReachCount, setErrorMessageMaxReachCount] = useState("");
     const filteredTheme = Object?.keys(theme)?.reduce(
       (acc, key) => {
         acc[key] = theme[key][mode];
@@ -4007,16 +4010,32 @@ const OTPInput = React.forwardRef(
       enableResendOtp();
     }, []);
     const onClickResendOTP = () => {
-      setIsResendOtpEnable(false);
-      enableResendOtp();
-      resendOTP?.();
-      setOTP("");
+      if (resendOTPCount >= 3) {
+        setErrorMessageMaxReachCount("You have exceeded the maximum number of attempts.");
+        return;
+      }
+      if (resendOTPCount < 3) {
+        setIsResendOtpEnable(false);
+        setResendOTPCount(resendOTPCount + 1);
+        enableResendOtp();
+        resendOTP?.();
+        setOTP("");
+      }
     };
     const enableResendOtp = () => {
       setTimeout(() => {
         setIsResendOtpEnable(true);
       }, 5e3);
     };
+    const disableResendButton = () => {
+      if (disabled === true && resendOTPCount >= 3) {
+        setIsResendOtpEnable(true);
+        return true;
+      } else {
+        setIsResendOtpEnable(false);
+        return false;
+      }
+    };
     useEffect(() => {
       if (Platform.OS === "android") {
         onStartListeningOtp();
@@ -4096,7 +4115,7 @@ const OTPInput = React.forwardRef(
         style: {
           ...styles$5.textInputStyle,
           color: theme$1.CONTENT_PRIMARY,
-          borderColor: errorMessage ? theme$1.ERROR : otp.length === length ? theme$1.SUCCESS : activeInput === index ? theme$1.BORDER_INVERTED : theme$1.BORDER_PRIMARY,
+          borderColor: errorMessage || errorMessageMaxReachCount ? theme$1.ERROR : otp.length === length ? theme$1.SUCCESS : activeInput === index ? theme$1.BORDER_INVERTED : theme$1.BORDER_PRIMARY,
           ...textInputStyle
         },
         onFocus: () => setActiveInput(index),
@@ -4118,7 +4137,7 @@ const OTPInput = React.forwardRef(
       {
         onPress: onClickResendOTP,
         style: styles$5.resendOTPStyle,
-        disabled: !isResendOtpEnable
+        disabled: disableResendButton() || !isResendOtpEnable
       },
       /* @__PURE__ */ React.createElement(
         CustomTypography,
@@ -4132,7 +4151,7 @@ const OTPInput = React.forwardRef(
           }
         }
       )
-    ), /* @__PURE__ */ React.createElement(View, { style: styles$5.resendOtpContainer }, errorMessage ? /* @__PURE__ */ React.createElement(
+    ), errorMessage ? /* @__PURE__ */ React.createElement(View, { style: styles$5.resendOtpContainer }, /* @__PURE__ */ React.createElement(
       CustomTypography,
       {
         text: errorMessage,
@@ -4142,7 +4161,17 @@ const OTPInput = React.forwardRef(
           color: theme$1.ERROR
         }
       }
-    ) : /* @__PURE__ */ React.createElement(View, null)));
+    )) : null, errorMessageMaxReachCount ? /* @__PURE__ */ React.createElement(View, { style: styles$5.resendOtpContainer }, /* @__PURE__ */ React.createElement(
+      CustomTypography,
+      {
+        text: errorMessageMaxReachCount,
+        variant: FontStyle.L2_REGULAR,
+        style: {
+          alignSelf: "flex-start",
+          color: theme$1.ERROR
+        }
+      }
+    )) : null);
   }
 );
 var index$4 = withThemeProvider(OTPInput);