@zezosoft/zezo-ott-react-native-ui-kit 1.0.2 → 1.0.4

package/src/components/Auth/Login/LoginWithEmail.tsx

@@ -3,7 +3,13 @@
  * @lastModified Mon 16 Jun 2025 at 03:05 PM
  */
 import React, { useCallback } from 'react';
-import { StyleSheet, View, Keyboard, type ViewStyle, type TextStyle } from 'react-native';
+import {
+  StyleSheet,
+  View,
+  Keyboard,
+  type ViewStyle,
+  type TextStyle,
+} from 'react-native';
 import { useForm, Controller } from 'react-hook-form';
 import { scale, verticalScale } from 'react-native-size-matters';
 import { Input } from '../../Input/Input';
@@ -66,8 +72,14 @@ type LoginWithEmailProps = {
   renderForgotPassword?: () => React.ReactNode;
   renderEmailHeader?: () => React.ReactNode;
   renderSignupPrompt?: (props: { onPress: () => void }) => React.ReactNode;
-  renderSubmitButton?: (props: { onPress: () => void; disabled: boolean; loading: boolean }) => React.ReactNode;
-  renderSwitchToPhoneLogin?: (props: { onPress: () => void }) => React.ReactNode;
+  renderSubmitButton?: (props: {
+    onPress: () => void;
+    disabled: boolean;
+    loading: boolean;
+  }) => React.ReactNode;
+  renderSwitchToPhoneLogin?: (props: {
+    onPress: () => void;
+  }) => React.ReactNode;
   renderTopBackBtn?: (props: { onPress: () => void }) => React.ReactNode;
 };
 
@@ -98,7 +110,7 @@ const LoginWithEmail: React.FC<LoginWithEmailProps> = ({
   renderSignupPrompt,
   renderSubmitButton,
   renderSwitchToPhoneLogin,
-  renderTopBackBtn
+  renderTopBackBtn,
 }) => {
   const { isKeyboardOpen } = useKeyboard();
   const { theme: resolvedTheme } = useTheme(overrideTheme);
@@ -106,10 +118,10 @@ const LoginWithEmail: React.FC<LoginWithEmailProps> = ({
   const {
     control,
     handleSubmit,
-    formState: { errors, isValid, touchedFields }
+    formState: { errors, isValid, touchedFields },
   } = useForm<FormValues>({
     defaultValues: { email: '', password: '' },
-    mode: 'onChange'
+    mode: 'onChange',
   });
 
   const handleFormSubmit = useCallback(
@@ -132,7 +144,8 @@ const LoginWithEmail: React.FC<LoginWithEmailProps> = ({
     requestAnimationFrame(() => callback?.());
   };
 
-  const shouldRender = (condition?: boolean | unknown): boolean => typeof condition === 'function' || !!condition;
+  const shouldRender = (condition?: boolean | unknown): boolean =>
+    typeof condition === 'function' || !!condition;
 
   return (
     <BackgroundLayout
@@ -145,18 +158,30 @@ const LoginWithEmail: React.FC<LoginWithEmailProps> = ({
           <View style={styles.topBackBtnWrapper}>
             {renderTopBackBtn ? (
               renderTopBackBtn({
-                onPress: onTopBackBtnPress ?? (() => {})
+                onPress: onTopBackBtnPress ?? (() => {}),
               })
             ) : (
-              <BackBtn theme={resolvedTheme} style={topBackBtnStyle} onPress={onTopBackBtnPress} />
+              <BackBtn
+                theme={resolvedTheme}
+                style={topBackBtnStyle}
+                onPress={onTopBackBtnPress}
+              />
             )}
           </View>
         )}
         <HideKeyboard>
           <View style={styles.centerContent}>
-            {renderLogo ? renderLogo() : logoUri ? <Logo logoUri={logoUri} /> : null}
+            {renderLogo ? (
+              renderLogo()
+            ) : logoUri ? (
+              <Logo logoUri={logoUri} />
+            ) : null}
 
-            {renderEmailHeader ? renderEmailHeader() : <Text style={[styles.title, titleStyle]}>{title}</Text>}
+            {renderEmailHeader ? (
+              renderEmailHeader()
+            ) : (
+              <Text style={[styles.title, titleStyle]}>{title}</Text>
+            )}
 
             <View style={[styles.form, formStyle]}>
               <Controller
@@ -166,8 +191,8 @@ const LoginWithEmail: React.FC<LoginWithEmailProps> = ({
                   required: 'Email is required',
                   pattern: {
                     value: /^\S+@\S+\.\S+$/,
-                    message: 'Enter a valid email address'
-                  }
+                    message: 'Enter a valid email address',
+                  },
                 }}
                 render={({ field: { onChange, onBlur, value } }) => (
                   <Input.One
@@ -200,8 +225,8 @@ const LoginWithEmail: React.FC<LoginWithEmailProps> = ({
                   required: 'Password is required',
                   minLength: {
                     value: minPasswordLength,
-                    message: `Password must be at least ${minPasswordLength} characters`
-                  }
+                    message: `Password must be at least ${minPasswordLength} characters`,
+                  },
                 }}
                 render={({ field: { onChange, onBlur, value } }) => (
                   <>
@@ -234,7 +259,9 @@ const LoginWithEmail: React.FC<LoginWithEmailProps> = ({
                       ) : (
                         <TextButton
                           title={text?.forgotPassword || 'Forgot password?'}
-                          onPress={() => handleKeyboardDismiss(onForgotPassword)}
+                          onPress={() =>
+                            handleKeyboardDismiss(onForgotPassword)
+                          }
                           color={resolvedTheme.colors.button}
                           align="right"
                           style={styles.forgotPasswordText}
@@ -249,7 +276,7 @@ const LoginWithEmail: React.FC<LoginWithEmailProps> = ({
                   renderSubmitButton({
                     onPress: handleSubmit(handleFormSubmit),
                     disabled: loadingSubmitBtn || !isValid || isLoading,
-                    loading: loadingSubmitBtn || isLoading
+                    loading: loadingSubmitBtn || isLoading,
                   })
                 ) : (
                   <Button.Primary
@@ -258,7 +285,7 @@ const LoginWithEmail: React.FC<LoginWithEmailProps> = ({
                     disabled={loadingSubmitBtn || !isValid || isLoading}
                     theme={resolvedTheme}
                     titleStyle={{
-                      fontSize: RFValue(14)
+                      fontSize: RFValue(14),
                     }}
                     loadingText={text?.loadingSubmitBtnText || 'Logging in...'}
                     loading={loadingSubmitBtn || isLoading}
@@ -270,7 +297,7 @@ const LoginWithEmail: React.FC<LoginWithEmailProps> = ({
               shouldRender(onSwitchToPhoneLogin || renderSwitchToPhoneLogin) &&
               (renderSwitchToPhoneLogin ? (
                 renderSwitchToPhoneLogin({
-                  onPress: () => handleKeyboardDismiss(onSwitchToPhoneLogin)
+                  onPress: () => handleKeyboardDismiss(onSwitchToPhoneLogin),
                 })
               ) : (
                 <TextButton
@@ -289,11 +316,14 @@ const LoginWithEmail: React.FC<LoginWithEmailProps> = ({
             <View style={styles.signupContainer}>
               {renderSignupPrompt ? (
                 renderSignupPrompt({
-                  onPress: () => handleKeyboardDismiss(onSignup)
+                  onPress: () => handleKeyboardDismiss(onSignup),
                 })
               ) : (
                 <View style={styles.loginRow}>
-                  <Text style={[styles.loginPrompt, signupTextProps]} color={resolvedTheme.colors.textPrimary}>
+                  <Text
+                    style={[styles.loginPrompt, signupTextProps]}
+                    color={resolvedTheme.colors.textPrimary}
+                  >
                     {text?.signupPrompt || `Don't have an account?`}
                   </Text>
                   <TextButton
@@ -323,54 +353,54 @@ const styles = StyleSheet.create({
     width: '100%',
     paddingHorizontal: scale(16),
     justifyContent: 'center',
-    alignItems: 'center'
+    alignItems: 'center',
   },
   topBackBtnWrapper: {
     position: 'absolute',
     top: verticalScale(6),
     left: 0,
-    zIndex: 10
+    zIndex: 10,
   },
   centerContent: {
     flex: 1,
     width: '100%',
     alignItems: 'center',
-    justifyContent: 'center'
+    justifyContent: 'center',
   },
   title: {
     fontSize: RFValue(21),
     fontWeight: '700',
     marginTop: verticalScale(5),
-    marginBottom: verticalScale(20)
+    marginBottom: verticalScale(20),
   },
   form: {
     width: '100%',
-    gap: verticalScale(10)
+    gap: verticalScale(10),
   },
   forgotPasswordText: {
     textAlign: 'right',
     marginRight: scale(4),
     marginTop: -verticalScale(10),
-    marginBottom: verticalScale(8)
+    marginBottom: verticalScale(8),
   },
   switchPhoneText: {
-    marginTop: verticalScale(10)
+    marginTop: verticalScale(10),
   },
   signupContainer: {
     position: 'absolute',
     bottom: verticalScale(30),
     left: 0,
     right: 0,
-    alignItems: 'center'
+    alignItems: 'center',
   },
   loginRow: {
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
-    flexWrap: 'wrap'
+    flexWrap: 'wrap',
   },
   loginPrompt: {
     textAlign: 'center',
-    marginRight: 4
-  }
+    marginRight: 4,
+  },
 });

package/src/components/Auth/Login/LoginWithPhone.tsx

@@ -59,7 +59,11 @@ type LoginWithPhoneProps = {
   };
   renderLogo?: () => React.ReactNode;
   renderPhoneHeader?: () => React.ReactNode;
-  renderSubmitButton?: (props: { onPress: () => void; disabled: boolean; loading: boolean }) => React.ReactNode;
+  renderSubmitButton?: (props: {
+    onPress: () => void;
+    disabled: boolean;
+    loading: boolean;
+  }) => React.ReactNode;
   renderLoginWithEmail?: () => React.ReactNode;
   onLoginWithEmail?: () => void;
   renderTopBackBtn?: (props: { onPress: () => void }) => React.ReactNode;
@@ -70,7 +74,7 @@ const DEFAULT_TEXT = {
   phonePlaceholder: 'Enter phone number',
   loginButton: 'Login',
   loadingSubmitBtnText: 'Logging in...',
-  loginWithEmailButton: 'Login With Email'
+  loginWithEmailButton: 'Login With Email',
 };
 
 const LoginWithPhone: React.FC<LoginWithPhoneProps> = ({
@@ -93,7 +97,7 @@ const LoginWithPhone: React.FC<LoginWithPhoneProps> = ({
   renderSubmitButton,
   renderLoginWithEmail,
   onLoginWithEmail,
-  renderTopBackBtn
+  renderTopBackBtn,
 }) => {
   const { isKeyboardOpen } = useKeyboard();
   const { theme: resolvedTheme } = useTheme(overrideTheme);
@@ -102,12 +106,12 @@ const LoginWithPhone: React.FC<LoginWithPhoneProps> = ({
   const {
     control,
     handleSubmit,
-    formState: { errors, isValid }
+    formState: { errors, isValid },
   } = useForm<FormValues>({
     defaultValues: {
-      phone: { fullNumber: '', countryCode: '91', formattedNumber: '' }
+      phone: { fullNumber: '', countryCode: '91', formattedNumber: '' },
     },
-    mode: 'onChange'
+    mode: 'onChange',
   });
 
   const handleFormSubmit = useCallback(
@@ -139,77 +143,98 @@ const LoginWithPhone: React.FC<LoginWithPhoneProps> = ({
           width: '100%',
           paddingHorizontal: scale(16),
           justifyContent: 'center',
-          alignItems: 'center'
+          alignItems: 'center',
         },
         topBackBtnWrapper: {
           position: 'absolute',
           top: verticalScale(6),
           left: 0,
-          zIndex: 10
+          zIndex: 10,
         },
         centerContent: {
           flex: 1,
           width: '100%',
           alignItems: 'center',
           justifyContent: 'center',
-          maxWidth: scale(400)
+          maxWidth: scale(400),
         },
         title: {
           fontSize: RFValue(21),
           fontWeight: '700',
           marginTop: verticalScale(8),
           marginBottom: verticalScale(24),
-          color: resolvedTheme.colors.textPrimary
+          color: resolvedTheme.colors.textPrimary,
         },
         form: {
           width: '100%',
           gap: verticalScale(10),
-          alignItems: 'center'
+          alignItems: 'center',
         },
         switchEmailText: {
-          marginTop: verticalScale(10)
-        }
+          marginTop: verticalScale(10),
+        },
       }),
     [resolvedTheme]
   );
-  const shouldRender = (condition?: boolean | unknown): boolean => typeof condition === 'function' || !!condition;
+  const shouldRender = (condition?: boolean | unknown): boolean =>
+    typeof condition === 'function' || !!condition;
   return (
     <BackgroundLayout
       backgroundImage={backgroundImage?.source}
       theme={resolvedTheme}
       gradientSplitBackground={isKeyboardOpen ? 0.3 : 0.4}
     >
-      <View style={[styles.container, containerStyle]} testID="login-with-phone">
+      <View
+        style={[styles.container, containerStyle]}
+        testID="login-with-phone"
+      >
         {shouldRender(renderTopBackBtn || onTopBackBtnPress) && (
           <View style={styles.topBackBtnWrapper}>
             {renderTopBackBtn ? (
               renderTopBackBtn({
-                onPress: onTopBackBtnPress ?? (() => {})
+                onPress: onTopBackBtnPress ?? (() => {}),
               })
             ) : (
-              <BackBtn theme={resolvedTheme} style={topBackBtnStyle} onPress={onTopBackBtnPress} />
+              <BackBtn
+                theme={resolvedTheme}
+                style={topBackBtnStyle}
+                onPress={onTopBackBtnPress}
+              />
             )}
           </View>
         )}
         <HideKeyboard>
           <View style={styles.centerContent}>
-            {renderLogo ? renderLogo() : logoUri ? <Logo logoUri={logoUri} /> : null}
+            {renderLogo ? (
+              renderLogo()
+            ) : logoUri ? (
+              <Logo logoUri={logoUri} />
+            ) : null}
 
-            {renderPhoneHeader ? renderPhoneHeader() : <Text style={[styles.title, titleStyle]}>{title}</Text>}
+            {renderPhoneHeader ? (
+              renderPhoneHeader()
+            ) : (
+              <Text style={[styles.title, titleStyle]}>{title}</Text>
+            )}
 
             <View style={[styles.form, formStyle]}>
               <Controller
                 control={control}
                 name="phone"
                 rules={{
-                  validate: (value) => (value?.fullNumber?.length >= 10 ? true : 'Please enter a valid phone number')
+                  validate: (value) =>
+                    value?.fullNumber?.length >= 10
+                      ? true
+                      : 'Please enter a valid phone number',
                 }}
                 render={({ field: { onChange, value } }) => (
                   <PhoneNumberInput
                     value={value.formattedNumber}
                     onChangeText={onChange}
                     label={text.phoneLabel || DEFAULT_TEXT.phoneLabel}
-                    placeholder={text.phonePlaceholder || DEFAULT_TEXT.phonePlaceholder}
+                    placeholder={
+                      text.phonePlaceholder || DEFAULT_TEXT.phonePlaceholder
+                    }
                     disabled={loadingSubmitBtn || isLoading}
                     error={!!errors.phone}
                     errorMessage={errors.phone?.message}
@@ -225,7 +250,7 @@ const LoginWithPhone: React.FC<LoginWithPhoneProps> = ({
                 renderSubmitButton({
                   onPress: handleSubmit(handleFormSubmit),
                   disabled: !isValid || loadingSubmitBtn || isLoading,
-                  loading: loadingSubmitBtn || isLoading
+                  loading: loadingSubmitBtn || isLoading,
                 })
               ) : (
                 <Button.Primary
@@ -233,7 +258,10 @@ const LoginWithPhone: React.FC<LoginWithPhoneProps> = ({
                   disabled={loadingSubmitBtn || !isValid || isLoading}
                   theme={resolvedTheme}
                   onPress={handleSubmit(handleFormSubmit)}
-                  loadingText={text.loadingSubmitBtnText || DEFAULT_TEXT.loadingSubmitBtnText}
+                  loadingText={
+                    text.loadingSubmitBtnText ||
+                    DEFAULT_TEXT.loadingSubmitBtnText
+                  }
                   loading={loadingSubmitBtn || isLoading}
                 />
               )}
@@ -244,7 +272,10 @@ const LoginWithPhone: React.FC<LoginWithPhoneProps> = ({
                 renderLoginWithEmail()
               ) : (
                 <TextButton
-                  title={text.loginWithEmailButton || DEFAULT_TEXT.loginWithEmailButton}
+                  title={
+                    text.loginWithEmailButton ||
+                    DEFAULT_TEXT.loginWithEmailButton
+                  }
                   onPress={handleEmailLogin}
                   color={resolvedTheme.colors.button}
                   style={styles.switchEmailText}