@zezosoft/zezo-ott-react-native-ui-kit 1.1.3 → 1.1.6

package/lib/module/components/Auth/Two/Login/LoginWithEmail.js

@@ -0,0 +1,226 @@
+"use strict";
+
+/**
+ * @author Naresh Dhamu
+ * @lastModified Mon 16 Jun 2025 at 03:05 PM
+ */
+
+import React, { useCallback, useMemo } from 'react';
+import { StyleSheet, View, Keyboard, KeyboardAvoidingView, Platform } from 'react-native';
+import { useForm, Controller } from 'react-hook-form';
+import { scale, verticalScale } from 'react-native-size-matters';
+import { Input } from "../../../Input/Input.js";
+import { Button } from "../../../Button/index.js";
+import HideKeyboard from "../../../Keyboard/HideKeyboard.js";
+import TextButton from "../../../Button/TextButton.js";
+import { RFValue } from 'react-native-responsive-fontsize';
+import AuthLoginShell from "./AuthLoginShell.js";
+import { useInternalTheme } from "../../../../theme/hook/useInternalTheme.js";
+import { useKeyboard } from "../../../../hooks/useKeyboard.js";
+import { Lock, Mail } from 'lucide-react-native';
+import BackgroundLayoutOne from "../../../BackgroundLayout/BackgroundLayoutOne.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const LoginWithEmail = /*#__PURE__*/React.memo(({
+  title = 'Ready to watch?',
+  description = 'Enter your email or phone number to create your account.',
+  bottomTitle = 'By proceeding you agree to our Terms of Service and Privacy Policy',
+  onSubmit,
+  onSignup,
+  onForgotPassword,
+  onSwitchToPhoneLogin,
+  containerStyle,
+  formStyle,
+  inputStyle,
+  inputContainerStyle,
+  loadingSubmitBtn,
+  minPasswordLength = 6,
+  // backgroundImage,
+  logoUri,
+  theme: overrideTheme,
+  text
+}) => {
+  const {
+    isKeyboardOpen
+  } = useKeyboard();
+  const {
+    theme: resolvedTheme
+  } = useInternalTheme(overrideTheme);
+  const [isLoading, setIsLoading] = React.useState(false);
+  const {
+    control,
+    handleSubmit,
+    formState: {
+      errors,
+      isValid,
+      touchedFields
+    }
+  } = useForm({
+    defaultValues: {
+      email: '',
+      password: ''
+    },
+    mode: 'onChange'
+  });
+  const handleFormSubmit = useCallback(async data => {
+    if (!onSubmit) return;
+    setIsLoading(true);
+    try {
+      await onSubmit(data);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [onSubmit]);
+  const handleKeyboardDismiss = useCallback(callback => {
+    Keyboard.dismiss();
+    requestAnimationFrame(() => callback?.());
+  }, []);
+  const isDisabled = useMemo(() => loadingSubmitBtn || isLoading, [loadingSubmitBtn, isLoading]);
+
+  // const gradientSplitBackground = useMemo(
+  //   () => (isKeyboardOpen ? 0.31 : 0.35),
+  //   [isKeyboardOpen]
+  // );
+
+  return /*#__PURE__*/_jsx(BackgroundLayoutOne, {
+    children: /*#__PURE__*/_jsx(KeyboardAvoidingView, {
+      style: {
+        flex: 1,
+        width: '100%'
+      },
+      behavior: Platform.OS === 'ios' ? 'padding' : undefined,
+      keyboardVerticalOffset: Platform.OS === 'ios' ? 20 : 0,
+      children: /*#__PURE__*/_jsx(View, {
+        style: [styles.container, containerStyle],
+        children: /*#__PURE__*/_jsx(HideKeyboard, {
+          children: /*#__PURE__*/_jsx(AuthLoginShell, {
+            activeTab: "email",
+            logoUri: logoUri,
+            onPhonePress: onSwitchToPhoneLogin,
+            onSignup: onSignup,
+            title: title,
+            description: description,
+            bottomTitle: bottomTitle,
+            theme: overrideTheme,
+            children: /*#__PURE__*/_jsxs(View, {
+              style: [styles.form, formStyle],
+              children: [/*#__PURE__*/_jsx(Controller, {
+                control: control,
+                name: "email",
+                rules: {
+                  required: 'Email is required',
+                  pattern: {
+                    value: /^\S+@\S+\.\S+$/,
+                    message: 'Enter a valid email address'
+                  }
+                },
+                render: ({
+                  field: {
+                    onChange,
+                    onBlur,
+                    value
+                  }
+                }) => /*#__PURE__*/_jsx(Input.Three, {
+                  label: text?.emailLabel || 'Email',
+                  placeholder: text?.emailPlaceholder || 'Email',
+                  value: value,
+                  onChangeText: inputText => onChange(inputText.replace(/[^\w@.\-+]/g, '')),
+                  onBlur: onBlur,
+                  disabled: isDisabled,
+                  error: !!touchedFields.email && !!errors.email,
+                  errorMessage: errors.email?.message,
+                  inputStyle: inputStyle,
+                  containerStyle: inputContainerStyle,
+                  theme: overrideTheme,
+                  textContentType: "emailAddress",
+                  autoCapitalize: "none",
+                  keyboardType: "email-address",
+                  autoCorrect: false,
+                  leftIcon: /*#__PURE__*/_jsx(Mail, {
+                    size: 22
+                  })
+                })
+              }), /*#__PURE__*/_jsx(Controller, {
+                control: control,
+                name: "password",
+                rules: {
+                  required: 'Password is required',
+                  minLength: {
+                    value: minPasswordLength,
+                    message: `Password must be at least ${minPasswordLength} characters`
+                  }
+                },
+                render: ({
+                  field: {
+                    onChange,
+                    onBlur,
+                    value
+                  }
+                }) => /*#__PURE__*/_jsxs(_Fragment, {
+                  children: [/*#__PURE__*/_jsx(Input.Three, {
+                    label: text?.passwordLabel || 'Password',
+                    placeholder: text?.passwordPlaceholder || 'Password',
+                    value: value,
+                    secureTextEntry: true,
+                    onChangeText: inputText => onChange(inputText.replace(/[^\w@.\-+]/g, '')),
+                    onBlur: onBlur,
+                    disabled: isDisabled,
+                    error: !!touchedFields.password && !!errors.password,
+                    errorMessage: errors.password?.message,
+                    inputStyle: inputStyle,
+                    containerStyle: inputContainerStyle,
+                    textContentType: "none",
+                    autoCapitalize: "none",
+                    spellCheck: false,
+                    autoCorrect: false,
+                    autoComplete: "off",
+                    theme: overrideTheme,
+                    leftIcon: /*#__PURE__*/_jsx(Lock, {
+                      size: 22
+                    })
+                  }), !isKeyboardOpen && onForgotPassword && /*#__PURE__*/_jsx(TextButton, {
+                    title: text?.forgotPassword || 'Forgot password?',
+                    onPress: () => handleKeyboardDismiss(onForgotPassword),
+                    color: resolvedTheme.colors.button,
+                    align: "right",
+                    style: styles.forgotPasswordText
+                  })]
+                })
+              }), /*#__PURE__*/_jsx(Button.Primary, {
+                title: text?.loginButton || 'Login',
+                onPress: handleSubmit(handleFormSubmit),
+                disabled: isDisabled || !isValid,
+                loading: isDisabled,
+                theme: overrideTheme,
+                titleStyle: {
+                  fontSize: RFValue(14)
+                },
+                loadingText: text?.loadingSubmitBtnText || 'Logging in...'
+              })]
+            })
+          })
+        })
+      })
+    })
+  });
+});
+export default LoginWithEmail;
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    width: '100%',
+    paddingHorizontal: scale(16),
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  form: {
+    width: '100%',
+    gap: verticalScale(10)
+  },
+  forgotPasswordText: {
+    textAlign: 'right',
+    marginRight: scale(4),
+    marginTop: -verticalScale(10),
+    marginBottom: verticalScale(8)
+  }
+});
+//# sourceMappingURL=LoginWithEmail.js.map

package/lib/module/components/Auth/Two/Login/LoginWithEmail.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","useMemo","StyleSheet","View","Keyboard","KeyboardAvoidingView","Platform","useForm","Controller","scale","verticalScale","Input","Button","HideKeyboard","TextButton","RFValue","AuthLoginShell","useInternalTheme","useKeyboard","Lock","Mail","BackgroundLayoutOne","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","LoginWithEmail","memo","title","description","bottomTitle","onSubmit","onSignup","onForgotPassword","onSwitchToPhoneLogin","containerStyle","formStyle","inputStyle","inputContainerStyle","loadingSubmitBtn","minPasswordLength","logoUri","theme","overrideTheme","text","isKeyboardOpen","resolvedTheme","isLoading","setIsLoading","useState","control","handleSubmit","formState","errors","isValid","touchedFields","defaultValues","email","password","mode","handleFormSubmit","data","handleKeyboardDismiss","callback","dismiss","requestAnimationFrame","isDisabled","children","style","flex","width","behavior","OS","undefined","keyboardVerticalOffset","styles","container","activeTab","onPhonePress","form","name","rules","required","pattern","value","message","render","field","onChange","onBlur","Three","label","emailLabel","placeholder","emailPlaceholder","onChangeText","inputText","replace","disabled","error","errorMessage","textContentType","autoCapitalize","keyboardType","autoCorrect","leftIcon","size","minLength","passwordLabel","passwordPlaceholder","secureTextEntry","spellCheck","autoComplete","forgotPassword","onPress","color","colors","button","align","forgotPasswordText","Primary","loginButton","loading","titleStyle","fontSize","loadingText","loadingSubmitBtnText","create","paddingHorizontal","justifyContent","alignItems","gap","textAlign","marginRight","marginTop","marginBottom"],"sourceRoot":"../../../../../../src","sources":["components/Auth/Two/Login/LoginWithEmail.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/Auth/Two/Login/LoginWithPhone.js

@@ -0,0 +1,143 @@
+"use strict";
+
+/**
+ * @author Naresh Dhamu
+ * @lastModified Mon 16 Jun 2025 at 04:10 PM
+ */
+
+import React, { memo, useCallback, useMemo } from 'react';
+import { StyleSheet, View, KeyboardAvoidingView, Platform } from 'react-native';
+import { useForm, Controller } from 'react-hook-form';
+import { scale, verticalScale } from 'react-native-size-matters';
+import HideKeyboard from "../../../Keyboard/HideKeyboard.js";
+import { Button } from "../../../Button/index.js";
+import PhoneNumberInputOne from "../../../Input/PhoneNumberInputTwo.js";
+import AuthLoginShell from "./AuthLoginShell.js";
+import { useInternalTheme } from "../../../../theme/hook/useInternalTheme.js";
+import BackgroundLayoutOne from "../../../BackgroundLayout/BackgroundLayoutOne.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const LoginWithPhone = ({
+  title = 'Ready to watch?',
+  description = 'Enter your email or phone number to create your account.',
+  bottomTitle = 'By proceeding you agree to our Terms of Service and Privacy Policy',
+  onSubmit,
+  onLoginWithEmail,
+  onSignup,
+  containerStyle,
+  formStyle,
+  inputStyle,
+  inputContainerStyle,
+  // backgroundImage,
+  loadingSubmitBtn,
+  logoUri,
+  theme: overrideTheme
+}) => {
+  useInternalTheme(overrideTheme);
+  // const { isKeyboardOpen } = useKeyboard();
+  const [isLoading, setIsLoading] = React.useState(false);
+  const {
+    control,
+    handleSubmit,
+    formState: {
+      errors,
+      isValid
+    }
+  } = useForm({
+    defaultValues: {
+      phone: {
+        fullNumber: '',
+        countryCode: '91',
+        formattedNumber: ''
+      }
+    },
+    mode: 'onChange'
+  });
+  const handleFormSubmit = useCallback(async data => {
+    if (!onSubmit) return;
+    setIsLoading(true);
+    try {
+      await onSubmit(data);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [onSubmit]);
+  const isDisabled = useMemo(() => loadingSubmitBtn || isLoading, [loadingSubmitBtn, isLoading]);
+
+  // const gradientSplitBackground = useMemo(
+  //   () => (isKeyboardOpen ? 0.3 : 0.4),
+  //   [isKeyboardOpen]
+  // );
+
+  const styles = useMemo(() => StyleSheet.create({
+    container: {
+      flex: 1,
+      width: '100%',
+      paddingHorizontal: scale(16),
+      justifyContent: 'center',
+      alignItems: 'center'
+    },
+    form: {
+      width: '100%',
+      gap: verticalScale(12),
+      alignItems: 'center'
+    }
+  }), []);
+  return /*#__PURE__*/_jsx(BackgroundLayoutOne, {
+    children: /*#__PURE__*/_jsx(KeyboardAvoidingView, {
+      style: {
+        flex: 1,
+        width: '100%'
+      },
+      behavior: Platform.OS === 'ios' ? 'padding' : undefined,
+      keyboardVerticalOffset: Platform.OS === 'ios' ? 20 : 0,
+      children: /*#__PURE__*/_jsx(View, {
+        style: [styles.container, containerStyle],
+        children: /*#__PURE__*/_jsx(HideKeyboard, {
+          children: /*#__PURE__*/_jsx(AuthLoginShell, {
+            activeTab: "phone",
+            logoUri: logoUri,
+            onEmailPress: onLoginWithEmail,
+            onSignup: onSignup,
+            title: title,
+            description: description,
+            bottomTitle: bottomTitle,
+            theme: overrideTheme,
+            children: /*#__PURE__*/_jsxs(View, {
+              style: [styles.form, formStyle],
+              children: [/*#__PURE__*/_jsx(Controller, {
+                control: control,
+                name: "phone",
+                rules: {
+                  validate: value => value?.fullNumber?.length >= 10 ? true : 'Please enter a valid phone number'
+                },
+                render: ({
+                  field: {
+                    onChange,
+                    value
+                  }
+                }) => /*#__PURE__*/_jsx(PhoneNumberInputOne, {
+                  value: value.formattedNumber,
+                  onChangeText: onChange,
+                  disabled: isDisabled,
+                  error: !!errors.phone,
+                  errorMessage: errors.phone?.message,
+                  inputStyle: inputStyle,
+                  containerStyle: inputContainerStyle,
+                  theme: overrideTheme
+                })
+              }), /*#__PURE__*/_jsx(Button.Primary, {
+                title: "Login",
+                disabled: !isValid || isDisabled,
+                loading: isDisabled,
+                onPress: handleSubmit(handleFormSubmit),
+                theme: overrideTheme
+              })]
+            })
+          })
+        })
+      })
+    })
+  });
+};
+export default /*#__PURE__*/memo(LoginWithPhone);
+//# sourceMappingURL=LoginWithPhone.js.map

package/lib/module/components/Auth/Two/Login/LoginWithPhone.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","memo","useCallback","useMemo","StyleSheet","View","KeyboardAvoidingView","Platform","useForm","Controller","scale","verticalScale","HideKeyboard","Button","PhoneNumberInputOne","AuthLoginShell","useInternalTheme","BackgroundLayoutOne","jsx","_jsx","jsxs","_jsxs","LoginWithPhone","title","description","bottomTitle","onSubmit","onLoginWithEmail","onSignup","containerStyle","formStyle","inputStyle","inputContainerStyle","loadingSubmitBtn","logoUri","theme","overrideTheme","isLoading","setIsLoading","useState","control","handleSubmit","formState","errors","isValid","defaultValues","phone","fullNumber","countryCode","formattedNumber","mode","handleFormSubmit","data","isDisabled","styles","create","container","flex","width","paddingHorizontal","justifyContent","alignItems","form","gap","children","style","behavior","OS","undefined","keyboardVerticalOffset","activeTab","onEmailPress","name","rules","validate","value","length","render","field","onChange","onChangeText","disabled","error","errorMessage","message","Primary","loading","onPress"],"sourceRoot":"../../../../../../src","sources":["components/Auth/Two/Login/LoginWithPhone.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/Auth/{OTP → Two/OTP}/OTP.js

@@ -4,53 +4,50 @@ import React, { memo, useMemo, useState, useCallback, useEffect } from 'react';
 import { View, StyleSheet, Platform } from 'react-native';
 import { CodeField, Cursor, useBlurOnFulfill, useClearByFocusCell } from 'react-native-confirmation-code-field';
 import { scale, verticalScale } from 'react-native-size-matters';
-import { BackgroundLayout } from "../../BackgroundLayout/BackgroundLayout.js";
-import HideKeyboard from "../../Keyboard/HideKeyboard.js";
-import { useKeyboard } from "../../../hooks/useKeyboard.js";
-import BackBtn from "../../Button/BackBtn.js";
-import { useInternalTheme } from "../../../theme/hook/useInternalTheme.js";
-import { Logo } from "../../Logo/Logo.js";
-import { Button } from "../../Button/index.js";
-import Display from "../../../utils/Display.js";
-import { Text } from "../../Text/index.js";
+import HideKeyboard from "../../../Keyboard/HideKeyboard.js";
+import { useKeyboard } from "../../../../hooks/useKeyboard.js";
+import BackBtn from "../../../Button/BackBtn.js";
+import { useInternalTheme } from "../../../../theme/hook/useInternalTheme.js";
+import { Button } from "../../../Button/index.js";
+import Display from "../../../../utils/Display.js";
+import { Text } from "../../../Text/index.js";
 import { RFValue } from 'react-native-responsive-fontsize';
+import BackgroundLayoutOne from "../../../BackgroundLayout/BackgroundLayoutOne.js";
+import { MessageSquare } from 'lucide-react-native';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const DEFAULT_TEXT = {
   otpLabel: 'Enter OTP',
   otpPlaceholder: '••••',
   submitButton: 'Verify OTP',
   loadingSubmitBtnText: 'Verifying...',
-  otpSentText: 'A One-Time OTP has been sent to',
+  otpSentText: 'A OTP has been sent to',
   resendOtpText: 'Resend OTP',
   resendOtpCountdownText: 'Resend OTP in'
 };
 const OTP = ({
-  title,
+  // title,
   onSubmit,
   onTopBackBtnPress,
   containerStyle,
-  titleStyle,
+  // titleStyle,
   formStyle,
   backBtnStyle,
-  backgroundImage,
   loading = false,
-  logoUri,
   theme: overrideTheme,
   otpDigitCount = 4,
   keyboardType = 'number-pad',
   phoneNumber,
+  countryCode = '91',
   enableAutoFill = true,
   autoSubmitOnFill = true,
   text = DEFAULT_TEXT,
   onResendOtp,
-  renderResendButton,
   resendDisabledTime = 30,
-  renderLogo,
   renderSubmitButton,
   renderBackButton,
-  renderOtpHeader,
+  // renderOtpHeader,
   renderOtpInput,
-  renderPhoneText,
+  // renderPhoneText,
   cellStyle,
   focusCellStyle
 }) => {
@@ -79,12 +76,29 @@ const OTP = ({
       justifyContent: 'center',
       alignItems: 'center'
     },
+    header: {
+      alignItems: 'center',
+      gap: scale(8)
+    },
     topBackBtnWrapper: {
       position: 'absolute',
-      top: verticalScale(6),
-      left: 0,
+      top: verticalScale(5),
+      left: scale(10),
+      right: scale(16),
       zIndex: 10
     },
+    headerRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingVertical: verticalScale(12)
+    },
+    headerTitle: {
+      fontSize: RFValue(20),
+      fontWeight: '400',
+      marginLeft: scale(55),
+      marginTop: verticalScale(20),
+      color: resolvedTheme.colors.textPrimary
+    },
     centerContent: {
       flex: 1,
       width: '100%',
@@ -127,7 +141,7 @@ const OTP = ({
       fontSize: RFValue(26),
       fontWeight: '500',
       paddingTop: Platform.OS === 'ios' ? scale(9) : scale(7),
-      borderWidth: scale(1),
+      borderWidth: scale(0.5),
       borderRadius: scale(8),
       justifyContent: 'center',
       alignItems: 'center',
@@ -135,13 +149,37 @@ const OTP = ({
       alignSelf: 'center',
       overflow: 'hidden',
       color: resolvedTheme.colors.textPrimary,
-      borderColor: resolvedTheme.colors.outline
+      borderColor: resolvedTheme.colors.textPrimary
     },
     focusCell: {
       borderColor: resolvedTheme.colors.primary,
       backgroundColor: resolvedTheme.colors.surfaceVariant
+    },
+    otpInfoRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginTop: verticalScale(12),
+      flexWrap: 'wrap'
+    },
+    otpInfoText: {
+      fontSize: RFValue(12),
+      color: resolvedTheme.colors.onSurfaceVariant,
+      flexShrink: 0
+    },
+    otpPhone: {
+      fontSize: RFValue(13),
+      fontWeight: '500',
+      marginLeft: scale(4),
+      color: resolvedTheme.colors.textPrimary,
+      flexShrink: 0
+    },
+    resendRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: scale(6)
     }
-  }), [isKeyboardOpen, resolvedTheme.colors.onSurfaceVariant, resolvedTheme.colors.outline, resolvedTheme.colors.primary, resolvedTheme.colors.surfaceVariant, resolvedTheme.colors.textPrimary]);
+  }), [isKeyboardOpen, resolvedTheme.colors.onSurfaceVariant, resolvedTheme.colors.primary, resolvedTheme.colors.surfaceVariant, resolvedTheme.colors.textPrimary]);
   useEffect(() => {
     if (resendTimer <= 0) return;
     const timer = setInterval(() => {
@@ -182,47 +220,37 @@ const OTP = ({
   const isLoading = useMemo(() => loading || isSubmitting, [loading, isSubmitting]);
   const isSubmitDisabled = useMemo(() => otp.length !== otpDigitCount || isLoading, [otp.length, otpDigitCount, isLoading]);
   const shouldRender = useMemo(() => condition => typeof condition === 'function' || !!condition, []);
-
-  // Memoize gradient split background
-  const gradientSplitBackground = useMemo(() => isKeyboardOpen ? 0.3 : 0.4, [isKeyboardOpen]);
-  return /*#__PURE__*/_jsx(BackgroundLayout, {
-    theme: overrideTheme,
-    backgroundImage: backgroundImage?.source,
-    gradientSplitBackground: gradientSplitBackground,
+  return /*#__PURE__*/_jsx(BackgroundLayoutOne, {
     children: /*#__PURE__*/_jsxs(View, {
       style: [styles.container, containerStyle],
       children: [shouldRender(renderBackButton || onTopBackBtnPress) && /*#__PURE__*/_jsx(View, {
         style: styles.topBackBtnWrapper,
         children: renderBackButton ? renderBackButton({
           onPress: onTopBackBtnPress ?? (() => {})
-        }) : /*#__PURE__*/_jsx(BackBtn, {
-          theme: overrideTheme,
-          style: backBtnStyle,
-          onPress: onTopBackBtnPress
+        }) : /*#__PURE__*/_jsxs(View, {
+          style: styles.headerRow,
+          children: [/*#__PURE__*/_jsx(BackBtn, {
+            theme: overrideTheme,
+            style: backBtnStyle,
+            onPress: onTopBackBtnPress
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.headerTitle,
+            children: "Verify OTP"
+          })]
         })
       }), /*#__PURE__*/_jsx(HideKeyboard, {
         children: /*#__PURE__*/_jsxs(View, {
           style: styles.centerContent,
-          children: [renderLogo ? renderLogo() : logoUri ? /*#__PURE__*/_jsx(Logo, {
-            logoUri: logoUri
-          }) : null, renderOtpHeader ? renderOtpHeader() : /*#__PURE__*/_jsx(Text, {
-            style: [styles.title, titleStyle],
-            children: title
-          }), phoneNumber && (renderPhoneText ? renderPhoneText(phoneNumber) : /*#__PURE__*/_jsxs(View, {
-            style: styles.sentNumberContainer,
+          children: [phoneNumber && /*#__PURE__*/_jsxs(View, {
+            style: styles.otpInfoRow,
             children: [/*#__PURE__*/_jsx(Text, {
-              style: styles.sentText,
-              children: text?.otpSentText
-            }), /*#__PURE__*/_jsx(Text, {
-              style: {
-                fontWeight: '700',
-                fontSize: RFValue(13),
-                marginTop: verticalScale(4),
-                color: resolvedTheme.colors.primary
-              },
-              children: phoneNumber
+              style: styles.otpInfoText,
+              children: "A OTP has been sent to"
+            }), /*#__PURE__*/_jsxs(Text, {
+              style: styles.otpPhone,
+              children: ["+", countryCode, " ", phoneNumber.replace(/\D/g, '')]
             })]
-          })), /*#__PURE__*/_jsxs(View, {
+          }), /*#__PURE__*/_jsxs(View, {
             style: [styles.form, formStyle],
             children: [renderOtpInput ? renderOtpInput({
               value: otp,
@@ -268,17 +296,19 @@ const OTP = ({
                 alignItems: 'center',
                 marginTop: verticalScale(10)
               },
-              children: renderResendButton ? renderResendButton({
-                onPress: handleResendOtp,
-                disabled: resendTimer > 0
-              }) : /*#__PURE__*/_jsx(Text, {
-                onPress: resendTimer <= 0 ? handleResendOtp : undefined,
-                style: {
-                  fontSize: RFValue(12),
-                  color: resendTimer > 0 ? resolvedTheme.colors.onSurfaceVariant : resolvedTheme.colors.primary,
-                  textAlign: 'center'
-                },
-                children: resendTimer > 0 ? `${text?.resendOtpCountdownText || DEFAULT_TEXT.resendOtpCountdownText} ${resendTimer}s` : text?.resendOtpText || DEFAULT_TEXT.resendOtpText
+              children: /*#__PURE__*/_jsxs(View, {
+                style: styles.resendRow,
+                children: [/*#__PURE__*/_jsx(MessageSquare, {
+                  size: scale(14),
+                  color: resendTimer > 0 ? resolvedTheme.colors.onSurfaceVariant : resolvedTheme.colors.textPrimary
+                }), /*#__PURE__*/_jsx(Text, {
+                  onPress: resendTimer <= 0 ? handleResendOtp : undefined,
+                  style: {
+                    fontSize: RFValue(12),
+                    color: resendTimer > 0 ? resolvedTheme.colors.onSurfaceVariant : resolvedTheme.colors.textPrimary
+                  },
+                  children: resendTimer > 0 ? `${text?.resendOtpCountdownText || DEFAULT_TEXT.resendOtpCountdownText} ${resendTimer}s` : text?.resendOtpText || DEFAULT_TEXT.resendOtpText
+                })]
               })
             })]
           })]