@truworth/twc-auth 1.2.4 → 1.2.5

package/README.md

@@ -70,7 +70,6 @@ Truworth Auth Module - A comprehensive authentication solution for React Native
 | react                                  | >=18.2.0 |
 | react-native                           | >=0.74.5 |
 | react-native-fast-image                | >=8.6.3  |
-| react-native-freshchat-sdk             | >=4.6.6  |
 | react-native-gesture-handler           | >=2.16.0 |
 | react-native-linear-gradient           | >=2.8.3  |
 | react-native-modalize                  | >=2.1.1  |
@@ -80,13 +79,12 @@ Truworth Auth Module - A comprehensive authentication solution for React Native
 | react-native-svg                       | >=15.8.0 |
 | react-native-vector-icons              | >=9.2.0  |
 
-> Note: lottie-react-native, react-native-fast-image, and react-native-freshchat-sdk are optional and only needed if your app uses features that depend on them.
+> Note: lottie-react-native, react-native-fast-image are optional and only needed if your app uses features that depend on them.
 
 #### Web Dependencies
 
 | Package                  | Version  |
 | ------------------------ | -------- |
-| @truworth/twc-web-common | ^1.0.11  |
 | @truworth/twc-web-design | ^1.9.0   |
 | antd                     | ^5.6.3   |
 | framer-motion            | ^12.6.2  |
@@ -108,7 +106,6 @@ Truworth Auth Module - A comprehensive authentication solution for React Native
    ```bash
    npm install \
      next@^15.0.4 \
-     @truworth/twc-web-common@^1.0.11 \
      @truworth/twc-web-design@^1.9.0 \
      antd@^5.6.3 \
      framer-motion@^12.6.2 \

package/build/src/api/axiosClient/index.js

@@ -1,4 +1,4 @@
-import { BASE_URL } from "@truworth/twc-web-common";
+import { BASE_URL } from '../../constants/base-url';
 import axios from "axios";
 export const axiosClient = axios.create({
     baseURL: BASE_URL,

package/build/src/api/axiosClient/index.native.js

@@ -1,4 +1,4 @@
-import { BASE_URL } from '@truworth/twc-rn-common';
+import { BASE_URL } from "../../constants/base-url";
 import axios from 'axios';
 export const axiosClient = axios.create({
     baseURL: BASE_URL,

package/build/src/components/VerifyMobileOTP/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
 import { Button, Flex, OTPInput, Typography } from "@truworth/twc-web-design";
-const VerifyMobileOTP = ({ validateOTP, timer, resendOTP, phone, status, resendTextClassName }) => {
+const VerifyMobileOTP = ({ validateOTP, timer, resendOTP, phone, status }) => {
     const [otp, setOtp] = useState('');
     const [otpError, setOtpError] = useState(false);
     useEffect(() => {
@@ -10,14 +10,16 @@ const VerifyMobileOTP = ({ validateOTP, timer, resendOTP, phone, status, resendT
             setOtp('');
         }
     }, [status]);
-    const defaultPhoneDisplayText = (_jsxs(Typography, { type: 'body', size: 'large', className: 'mb-6 text-gray-400 text-center', children: ["OTP sent to", _jsx("span", { className: 'pl-2 text-secondary-dark', children: phone ? `XXXXXXX${phone.slice(-3)}` : 'your registered mobile number' })] }));
-    return (_jsxs(_Fragment, { children: [defaultPhoneDisplayText, _jsx(OTPInput, { value: otp, onChange: (code) => {
+    return (_jsxs(_Fragment, { children: [_jsxs(Typography, { type: 'body', size: 'large', className: 'mb-6 text-gray-400 text-center', children: ["OTP sent to", _jsx("span", { className: 'pl-2 text-secondary-dark', children: phone ? `XXXXXXX${phone.slice(-3)}` : 'your registered mobile number' })] }), _jsx(OTPInput, { value: otp, onChange: (code) => {
                     setOtp(code);
                     setOtpError(false);
                 }, error: otpError, maxLength: 6, className: `!w-auto ${otpError ? '!border-destructive' : ''}` }), otpError &&
-                _jsx(Typography, { type: "utility", size: "medium", className: "mt-4", color: "text-utility-danger-main", children: "Please enter the correct OTP." }), (timer <= 0) ?
-                _jsxs(Flex, { justify: 'between', align: 'center', className: 'mt-4', children: [_jsx(Typography, { type: 'utility', size: 'medium', className: resendTextClassName, children: "Didn't receive OTP?" }), _jsx(Button, { label: 'Resend Code', size: 'small', variant: 'link', onClick: () => resendOTP() })] })
+                _jsx(Typography, { type: "utility", size: "medium", className: "mt-4", color: "text-utility-danger-main", children: "Please enter the correct OTP." }), timer <= 0 ?
+                _jsxs(Flex, { justify: 'between', align: 'center', className: 'mt-4', children: [_jsx(Typography, { type: 'utility', size: 'medium', children: "Didn't receive OTP?" }), _jsx(Button, { label: 'Re-send OTP', size: 'small', variant: 'link', onClick: () => {
+                                setOtp('');
+                                resendOTP();
+                            } })] })
                 :
-                    _jsxs(Typography, { type: 'utility', size: 'medium', className: `mt-3 ${resendTextClassName}`, children: ["Resend Code in ", timer > 0 ? `${timer} seconds` : 'OTP expired'] }), _jsx(Button, { label: "Continue", isFullWidth: true, onClick: () => validateOTP?.(otp), disabled: otp ? otp?.length < 6 : true, className: "mt-6" })] }));
+                    _jsxs(Typography, { type: 'utility', size: 'medium', className: 'mt-3', children: ["Resend Code in ", timer, " seconds"] }), _jsx(Button, { label: "Continue", isFullWidth: true, onClick: () => validateOTP?.(otp), disabled: otp ? otp?.length < 6 : true, className: "mt-6" })] }));
 };
 export { VerifyMobileOTP };

package/build/src/components/VerifyMobileOTP/index.native.js

@@ -8,30 +8,25 @@ import { OTPStatusLabel } from '../OTPStatusLabel/index.native';
 import OTPInputView from '@twotalltotems/react-native-otp-input';
 const { gray } = Colors;
 const VerifyMobileOTP = ({ validateOTP, timer, status, resendOTP, phone }) => {
-    const [otp, setOTP] = useState('');
+    const [otp, setOtp] = useState('');
     const { otpValue } = useAuthPackageContext();
-    useEffect(() => {
-        if (otp?.length === 6) {
-            validateOTP(otp);
-        }
-    }, [otp]);
     useEffect(() => {
         if (otpValue && otpValue.length == 6) {
-            setOTP(otpValue);
+            setOtp(otpValue);
         }
     }, [otpValue]);
     return (_jsxs(Layout, { style: { flex: 1, backgroundColor: '#FFFFFF' }, children: [_jsx(Header, {}), _jsxs(CustomKeyboardAvoidingView, { behavior: Platform.OS === 'ios' ? 'padding' : undefined, keyboardVerticalOffset: 0, children: [_jsxs(ScrollView, { style: { paddingHorizontal: 20, paddingTop: 32, flex: 1 }, children: [_jsxs(Text, { textBreakStrategy: 'simple', style: {
                                     fontSize: 20, fontWeight: '600', color: gray.gray_900,
                                     lineHeight: 32, marginBottom: 32,
-                                }, children: ["OTP sent to ", '\n', phone ? phone.replace(/\d(?=\d{4})/g, 'x') : ''] }), _jsx(View, { style: { justifyContent: 'center', flexDirection: 'row', marginBottom: 30, position: 'relative' }, children: _jsx(OTPInputView, { pinCount: 6, autoFocusOnLoad: false, onCodeChanged: text => setOTP(text), codeInputFieldStyle: {
+                                }, children: ["OTP sent to ", '\n', phone ? phone.replace(/\d(?=\d{4})/g, 'x') : ''] }), _jsx(View, { style: { justifyContent: 'center', flexDirection: 'row', marginBottom: 30, position: 'relative' }, children: _jsx(OTPInputView, { pinCount: 6, autoFocusOnLoad: false, onCodeChanged: text => setOtp(text), codeInputFieldStyle: {
                                         fontSize: 20, color: 'black', width: 30,
                                         height: 45, borderWidth: 0, borderBottomWidth: 1,
                                     }, codeInputHighlightStyle: { borderColor: '#03DAC6' }, style: {
                                         height: 50,
                                         width: Dimensions.get('window').width - 100,
-                                    }, code: otp ?? '', onCodeFilled: code => setOTP(code) }) }), timer <= 0 &&
-                                _jsxs(View, { style: { flexDirection: 'row', alignItems: 'center' }, children: [_jsxs(Text, { style: { fontSize: 12, color: '#000', fontWeight: '400', opacity: 0.5 }, children: ["Did not receive OTP?", ' '] }), _jsx(TouchableOpacity, { disabled: timer > 0, onPress: () => {
-                                                setOTP('');
+                                    }, code: otp ?? '', onCodeFilled: code => validateOTP(code) }) }), timer <= 0 &&
+                                _jsxs(View, { style: { flexDirection: 'row', alignItems: 'center' }, children: [_jsx(Text, { style: { fontSize: 12, color: '#000', fontWeight: '400', opacity: 0.5 }, children: "Did not receive OTP?" }), _jsx(TouchableOpacity, { disabled: timer > 0, onPress: () => {
+                                                setOtp('');
                                                 resendOTP();
                                             }, children: _jsx(Text, { style: { fontSize: 14, color: '#2cbaa4', fontWeight: '400', opacity: 1 }, children: "Re-send OTP" }) })] })] }), _jsx(View, { style: { width: '100%' }, children: _jsx(OTPStatusLabel, { status: status, timer: timer }) })] })] }));
 };

package/build/src/constants/base-url/index.js

@@ -0,0 +1,5 @@
+const baseUrl = process.env.NEXT_PUBLIC_TWC_API_BASE_URL;
+if (!baseUrl) {
+    throw new Error('NEXT_PUBLIC_TWC_API_BASE_URL environment variable is required');
+}
+export const BASE_URL = baseUrl;

package/build/src/constants/base-url/index.native.js

@@ -0,0 +1 @@
+export const BASE_URL = process.env.BASE_URL;

package/build/src/constants/cdn-url/index.js

@@ -1 +1,2 @@
-export { MEMBER_IMAGES_URL } from "@truworth/twc-web-common";
+export const MEMBER_IMAGES_URL = process.env.NEXT_PUBLIC_MEMBER_IMAGES_URL;
+export const CDN_IMAGES_URL = process.env.NEXT_PUBLIC_CDN_IMAGES_URL;

package/build/src/contexts/AuthContext.js

@@ -31,8 +31,9 @@ const AuthPackageContext = React.createContext(null);
  * @param onLogout - Optional callback after successful logout
  * @param onLaunchAuthSession - Optional callback after successfully launching the auth session. For example, it can be used to set the Firebase notification token or request Android permissions.
  * @param onRefreshSession - Optional handler for refreshing user session
+ * @param openChatSupport - Optional callback to open chat support
  */
-const AuthProvider = ({ children, LogoComponent, session, appConfig, onLogin, onLogout, onLaunchAuthSession, onRefreshSession }) => {
+const AuthProvider = ({ children, LogoComponent, session, appConfig, onLogin, onLogout, onLaunchAuthSession, onRefreshSession, openChatSupport }) => {
     const [isLoadingProfile, setIsLoadingProfile] = useState(false);
     const [profile, setProfile] = useState(null);
     const [client, setClient] = useState(null);
@@ -177,6 +178,7 @@ const AuthProvider = ({ children, LogoComponent, session, appConfig, onLogin, on
         onTokenChange: (token) => setToken(token),
         onRegistrationMethodChange: (method) => setRegistrationMethod(method),
         otpValue,
+        openChatSupport
     };
     return (_jsx(AuthContext.Provider, { value: AuthContextValues, children: _jsx(AuthPackageContext.Provider, { value: AuthPackageContextValues, children: children }) }));
 };

package/build/src/enums/loginMethod.enum.js

@@ -1,6 +1,6 @@
 export var LoginMethodCode;
 (function (LoginMethodCode) {
-    LoginMethodCode[LoginMethodCode["EmailPassword"] = 1] = "EmailPassword";
+    LoginMethodCode[LoginMethodCode["Email"] = 1] = "Email";
     LoginMethodCode[LoginMethodCode["Facebook"] = 2] = "Facebook";
     LoginMethodCode[LoginMethodCode["Google"] = 3] = "Google";
     LoginMethodCode[LoginMethodCode["Apple"] = 4] = "Apple";

package/build/src/navigator/index.native.js

@@ -16,8 +16,12 @@ import SSOSearchOrganization from '../screens/SSOLogin/SearchOrganization/index.
 import SSOAuthenticationMethods from '../screens/SSOLogin/AuthenticationMethods/index.native';
 import SSOAuthWebView from '../screens/SSOLogin/AuthWebView/index.native';
 import SSOCallback from '../screens/SSOLogin/SSOCallback/index.native';
+import LoginWithMobileOTP from '../screens/LoginWithMobileOTP/index.native';
+import EnterMobile from '../screens/EnterMobile/index.native';
+import VerifyLinkPrimaryAccountEmailOTP from '../screens/VerifyLinkPrimaryAccountEmailOTP/index.native';
+import VerifyLinkPrimaryAccountMobileOTP from '../screens/VerifyLinkPrimaryAccountMobileOTP/index.native';
 const { Navigator, Screen } = createNativeStackNavigator();
 const AuthNavigator = () => {
-    return (_jsxs(Navigator, { screenOptions: { headerShown: false }, children: [_jsx(Screen, { name: "Welcome", component: Welcome }), _jsx(Screen, { name: "EnterEmail", component: EnterEmail }), _jsx(Screen, { name: "EnterPassword", component: EnterPassword }), _jsx(Screen, { name: "SignUp", component: SignUp }), _jsx(Screen, { name: "CountryCode", component: CountryCode }), _jsx(Screen, { name: "CreatePassword", component: CreatePassword }), _jsx(Screen, { name: "UserConsent", component: UserConsent }), _jsx(Screen, { name: "VerifyMobile", component: VerifyMobile }), _jsx(Screen, { name: "VerifyEmail", component: VerifyEmail }), _jsx(Screen, { name: "LoginWithEmailOTP", component: LoginWithEmailOTP }), _jsx(Screen, { name: "VerifyResetPasswordOTP", component: VerifyResetPasswordOTP }), _jsx(Screen, { name: "ResetPassword", component: ResetPassword }), _jsx(Screen, { name: "SSOSearchOrganization", component: SSOSearchOrganization }), _jsx(Screen, { name: "SSOAuthenticationMethods", component: SSOAuthenticationMethods }), _jsx(Screen, { name: "SSOAuthWebView", component: SSOAuthWebView }), _jsx(Screen, { name: "SSOCallback", component: SSOCallback })] }));
+    return (_jsxs(Navigator, { screenOptions: { headerShown: false }, children: [_jsx(Screen, { name: "Welcome", component: Welcome }), _jsx(Screen, { name: "EnterEmail", component: EnterEmail }), _jsx(Screen, { name: "EnterPassword", component: EnterPassword }), _jsx(Screen, { name: "SignUp", component: SignUp }), _jsx(Screen, { name: "CountryCode", component: CountryCode }), _jsx(Screen, { name: "CreatePassword", component: CreatePassword }), _jsx(Screen, { name: "UserConsent", component: UserConsent }), _jsx(Screen, { name: "VerifyMobile", component: VerifyMobile }), _jsx(Screen, { name: "VerifyEmail", component: VerifyEmail }), _jsx(Screen, { name: "LoginWithEmailOTP", component: LoginWithEmailOTP }), _jsx(Screen, { name: "VerifyResetPasswordOTP", component: VerifyResetPasswordOTP }), _jsx(Screen, { name: "ResetPassword", component: ResetPassword }), _jsx(Screen, { name: "LoginWithMobileOTP", component: LoginWithMobileOTP }), _jsx(Screen, { name: "EnterMobile", component: EnterMobile }), _jsx(Screen, { name: "VerifyLinkPrimaryAccountEmailOTP", component: VerifyLinkPrimaryAccountEmailOTP }), _jsx(Screen, { name: "VerifyLinkPrimaryAccountMobileOTP", component: VerifyLinkPrimaryAccountMobileOTP }), _jsx(Screen, { name: "SSOSearchOrganization", component: SSOSearchOrganization }), _jsx(Screen, { name: "SSOAuthenticationMethods", component: SSOAuthenticationMethods }), _jsx(Screen, { name: "SSOAuthWebView", component: SSOAuthWebView }), _jsx(Screen, { name: "SSOCallback", component: SSOCallback })] }));
 };
 export { AuthNavigator };

package/build/src/screens/EnterEmail/hooks/internal/useEnterEmail.js

@@ -1,68 +1,78 @@
-import { useCallback, useState } from "react";
+import { useState, useCallback } from "react";
 import { showMessage } from "../../../../helpers/show-message";
 import { useAuthPackageContext } from "../../../../hooks/internal/useAuthPackageContext";
 import { checkEmailExists } from "../../../../api/auth";
-import { LoginMethodCode } from "../../../../enums";
-const emailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+import { LoginMethodCode, RegistrationMethod } from "../../../../enums";
+const EMAIL_REGEX = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
 /**
  * @internal
- * Internal hook for managing EnterEmail screen state and auth context integration. Not exposed to package consumers.
+ * Hook for managing Enter Email screen logic and authentication integration.
  */
 const useEnterEmail = () => {
+    const [email, setEmail] = useState("");
+    const [loginType, setLoginType] = useState("");
     const [loading, setLoading] = useState(false);
-    const [isInvalidEmail, setInvalidEmail] = useState(true);
-    const [loginConflictModalVisible, setLoginConflictModalVisible] = useState(false);
-    const [loginType, setLoginType] = useState('');
-    const [email, setEmail] = useState('');
+    const [isEmailValid, setIsEmailValid] = useState(false);
+    const [isLoginConflictModalVisible, setIsLoginConflictModalVisible] = useState(false);
     const { appConfig, onRegistrationMethodChange } = useAuthPackageContext();
-    const enterEmail = useCallback((text) => {
-        const value = text.toLowerCase().trim();
-        setInvalidEmail(!emailRegex.test(value));
-        setEmail(value);
-    }, [emailRegex]);
-    const handleValidateEmail = async ({ onContinue }) => {
+    /**
+     * Handles email input change with validation
+     */
+    const handleEmailChange = useCallback((value) => {
+        const normalizedEmail = value.toLowerCase().trim();
+        setEmail(normalizedEmail);
+        setIsEmailValid(EMAIL_REGEX.test(normalizedEmail));
+    }, []);
+    /**
+     * Validates email existence and handles login conflicts
+     */
+    const handleEmailExists = useCallback(async ({ onValidate }) => {
         setLoading(true);
         try {
             const { emailExist, loginType } = await checkEmailExists(email);
-            const code = Number(loginType);
-            if (emailExist && code !== LoginMethodCode.EmailPassword) {
-                const loginTypesMap = {
-                    [LoginMethodCode.Facebook]: 'Facebook',
-                    [LoginMethodCode.Google]: 'Google',
-                    [LoginMethodCode.Apple]: 'Apple',
-                    [LoginMethodCode.SSO]: 'SSO',
+            const loginCode = Number(loginType);
+            if (emailExist && loginCode !== LoginMethodCode.Email) {
+                const loginMethodMap = {
+                    [LoginMethodCode.Facebook]: "Facebook",
+                    [LoginMethodCode.Google]: "Google",
+                    [LoginMethodCode.Apple]: "Apple",
+                    [LoginMethodCode.SSO]: "SSO",
                 };
-                setLoginType(loginTypesMap[code] || 'your social account');
-                setLoginConflictModalVisible(true);
+                setLoginType(loginMethodMap[loginCode] || "your social account");
+                setIsLoginConflictModalVisible(true);
                 return;
             }
-            onContinue({ emailExist });
+            onRegistrationMethodChange(RegistrationMethod.EMAIL);
+            onValidate({ emailExist });
         }
-        catch (err) {
-            const errorMessage = err?.response?.data?.errors?.[0]?.message ?? 'Something went wrong';
-            showMessage({ message: errorMessage });
+        catch (error) {
+            const message = error?.response?.data?.errors?.[0]?.message ?? "Something went wrong";
+            showMessage({ message });
         }
         finally {
             setLoading(false);
         }
-    };
-    const clearText = useCallback(() => {
-        setEmail('');
-        setInvalidEmail(true);
+    }, [email]);
+    /**
+     * Clears email input field
+     */
+    const handleClearEmail = useCallback(() => {
+        setEmail("");
+        setIsEmailValid(false);
     }, []);
     return {
         email,
-        appName: appConfig.appName,
-        isInvalidEmail,
+        isEmailValid,
         loading,
-        enterEmail,
-        handleValidateEmail,
-        clearText,
-        loginConflictModalVisible,
-        setLoginConflictModalVisible,
+        handleEmailChange,
+        handleEmailExists,
+        handleClearEmail,
+        isLoginConflictModalVisible,
+        setIsLoginConflictModalVisible,
         onRegistrationMethodChange,
-        loginConflictErrorTitle: `Sign in with ${loginType}`,
-        loginConflictErrorDescription: `Looks like you previously registered using ${loginType}. Please go back and sign in with ${loginType}.`,
+        appName: appConfig.appName,
+        loginConflictTitle: `Sign in with ${loginType}`,
+        loginConflictDescription: `Looks like you previously registered using ${loginType}. Please go back and sign in with ${loginType}.`,
     };
 };
 export { useEnterEmail };

package/build/src/screens/EnterEmail/index.js

@@ -5,24 +5,22 @@ import { ScreenLayout } from "../../components/ScreenLayout";
 import { useEnterEmail } from "./hooks/internal/useEnterEmail";
 import { SupportDetails } from '../../components/SupportDetails';
 const EnterEmail = ({ onContinue, onPressSignInWithSSO }) => {
-    const { loading, email, isInvalidEmail, loginConflictModalVisible, loginConflictErrorTitle, loginConflictErrorDescription, enterEmail, appName, handleValidateEmail, setLoginConflictModalVisible, } = useEnterEmail();
+    const { email, isEmailValid, handleEmailChange, appName, handleEmailExists, loading, loginConflictTitle, loginConflictDescription, isLoginConflictModalVisible, setIsLoginConflictModalVisible } = useEnterEmail();
     const form = useForm({ defaultValues: { email } });
     return (_jsxs(_Fragment, { children: [_jsxs(ScreenLayout, { title: `Hi, Welcome To ${appName}!`, subTitle: "Please enter email to get started.", buttonProps: {
                     loading,
                     label: 'Continue',
                     onClick: () => {
-                        if (!loading && !isInvalidEmail) {
-                            handleValidateEmail({
-                                onContinue: (params) => onContinue({ email, emailExist: params.emailExist })
-                            });
-                        }
+                        handleEmailExists({
+                            onValidate: ({ emailExist }) => onContinue({ email, emailExist })
+                        });
                     },
-                    disabled: isInvalidEmail || loading,
+                    disabled: !isEmailValid,
                 }, children: [_jsx(Form, { className: "w-full", form: form, children: _jsx(Form.Item, { name: "email", label: "Email", children: _jsx(TextInput, { type: "email", value: email, size: "medium", placeholder: "example@domain", ...form.register('email', {
                                     onChange: (e) => {
-                                        enterEmail(e.target.value);
+                                        handleEmailChange(e.target.value);
                                     }
-                                }) }) }) }), loginConflictModalVisible &&
-                        _jsx(LoginConflictModal, { title: loginConflictErrorTitle, primaryLabel: 'Okay', description: loginConflictErrorDescription, visible: loginConflictModalVisible, onProceed: () => setLoginConflictModalVisible(false), onClose: () => setLoginConflictModalVisible(false) })] }), _jsx(Button, { isFullWidth: true, type: "button", label: 'Sign In with SSO', variant: 'secondary', className: 'flex-none mt-6', onClick: onPressSignInWithSSO }), _jsx(SupportDetails, {})] }));
+                                }) }) }) }), isLoginConflictModalVisible &&
+                        _jsx(LoginConflictModal, { title: loginConflictTitle, description: loginConflictDescription, visible: isLoginConflictModalVisible, onProceed: () => setIsLoginConflictModalVisible(false), onClose: () => setIsLoginConflictModalVisible(false), primaryLabel: 'Okay' })] }), _jsx(Button, { isFullWidth: true, type: "button", label: 'Sign In with SSO', variant: 'secondary', className: 'flex-none mt-6', onClick: onPressSignInWithSSO }), _jsx(SupportDetails, {})] }));
 };
 export default EnterEmail;

package/build/src/screens/EnterEmail/index.native.js

@@ -8,13 +8,12 @@ import { ConfirmationModal as LoginConflictModal } from '../../components/Confir
 import { RegistrationMethod } from '../../enums';
 const { utility } = Colors;
 const EnterEmail = ({ navigation }) => {
-    const { loading, email, isInvalidEmail, loginConflictModalVisible, loginConflictErrorTitle, loginConflictErrorDescription, enterEmail, clearText, handleValidateEmail, onRegistrationMethodChange, setLoginConflictModalVisible, } = useEnterEmail();
-    const onContinue = (params) => {
+    const { email, isEmailValid, handleEmailChange, handleClearEmail, handleEmailExists, loading, loginConflictTitle, loginConflictDescription, isLoginConflictModalVisible, setIsLoginConflictModalVisible } = useEnterEmail();
+    const onValidate = (params) => {
         if (params.emailExist) {
             navigation.navigate('EnterPassword', { email });
         }
         else {
-            onRegistrationMethodChange(RegistrationMethod.EMAIL);
             navigation.navigate('SignUp', { email });
         }
     };
@@ -23,12 +22,10 @@ const EnterEmail = ({ navigation }) => {
                     label: 'Continue',
                     onPress: () => {
                         Keyboard.dismiss();
-                        if (!loading && !isInvalidEmail) {
-                            handleValidateEmail({ onContinue });
-                        }
+                        handleEmailExists({ onValidate });
                     },
-                    disabled: isInvalidEmail || loading,
-                }, children: _jsx(TextInputField, { value: email, placeholder: 'Enter here...', onChangeValue: text => enterEmail(text), rightIcon2: email.length > 0 ? 'close' : '', onPressRightIcon2: clearText, autoFocus: true, autoCapitalize: 'none', keyboardType: 'email-address' }) }), loginConflictModalVisible &&
-                _jsx(LoginConflictModal, { title: loginConflictErrorTitle, description: loginConflictErrorDescription, visible: loginConflictModalVisible, onProceed: () => setLoginConflictModalVisible(false), onClose: () => setLoginConflictModalVisible(false), iconColor: utility.warning_main, primaryLabel: 'Okay' })] }));
+                    disabled: !isEmailValid,
+                }, children: _jsx(TextInputField, { value: email, placeholder: 'Enter here...', onChangeValue: handleEmailChange, rightIcon2: email.length > 0 ? 'close' : '', onPressRightIcon2: handleClearEmail, autoFocus: true, autoCapitalize: 'none', keyboardType: 'email-address' }) }), isLoginConflictModalVisible &&
+                _jsx(LoginConflictModal, { title: loginConflictTitle, description: loginConflictDescription, visible: isLoginConflictModalVisible, onProceed: () => setIsLoginConflictModalVisible(false), onClose: () => setIsLoginConflictModalVisible(false), iconColor: utility.warning_main, primaryLabel: 'Okay' })] }));
 };
 export default EnterEmail;

package/build/src/screens/EnterMobile/components/ExistingAccountsSheet/hooks/internal/useExistingAccountsSheet.js

@@ -0,0 +1,36 @@
+import { useCallback, useState } from "react";
+import { axiosClient } from '../../../../../../api/axiosClient';
+import { showMessage } from "../../../../../../helpers/show-message";
+/**
+ * @internal
+ * Internal hook for managing useExistingAccountsSheet hook state and auth context integration. Not exposed to package consumers.
+ */
+const useExistingAccountsSheet = () => {
+    const [loading, setLoading] = useState(false);
+    const [selectedAccount, setSelectedAccount] = useState(null);
+    const linkPrimaryAccount = useCallback(({ phone, onInitiateLinking }) => {
+        setLoading(true);
+        axiosClient({
+            url: '/auth/mobile/link-primary-account/initiate',
+            method: 'POST',
+            data: {
+                phone,
+                memberId: selectedAccount?.memberId,
+            },
+        })
+            .then((res) => onInitiateLinking(res.data))
+            .catch((error) => {
+            console.log(error);
+            const message = error?.response?.data?.errors?.[0]?.message ?? 'Unable to initiate linking. Please try again.';
+            showMessage({ message });
+        })
+            .finally(() => setLoading(false));
+    }, [selectedAccount]);
+    return {
+        loading,
+        linkPrimaryAccount,
+        selectedAccount,
+        setSelectedAccount
+    };
+};
+export { useExistingAccountsSheet };

package/build/src/screens/EnterMobile/components/ExistingAccountsSheet/index.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useExistingAccountsSheet } from './hooks/internal/useExistingAccountsSheet';
+import { ResponsiveModal, Typography, Flex, Button, Card, Radio } from '@truworth/twc-web-design';
+import { SupportDetails } from '../../../../components/SupportDetails';
+import { IonIcon } from '../../../../components/IonIcon';
+import { LoginMethodCode } from '../../../../enums';
+import moment from 'moment';
+const ExistingAccountsSheet = ({ visible, hide, phone, existingAccounts, onInitiateAccountLinking }) => {
+    const { loading, linkPrimaryAccount, selectedAccount, setSelectedAccount, } = useExistingAccountsSheet();
+    const onContinue = () => {
+        if (!phone || !selectedAccount?.email) {
+            return;
+        }
+        linkPrimaryAccount({
+            phone,
+            onInitiateLinking: ({ sessionToken }) => {
+                onInitiateAccountLinking?.({
+                    sessionToken,
+                    email: selectedAccount?.email
+                });
+            }
+        });
+    };
+    const displayPhone = phone ? `+91${phone.replace(/^.{8}/, 'XXXXXXXX')}` : '+91**********';
+    return (_jsxs(ResponsiveModal, { open: visible, onClose: hide, onOpenChange: hide, maskClosable: false, title: _jsxs(_Fragment, { children: [_jsx(Typography, { type: "heading", size: "h6", children: "Multiple Accounts Found" }), _jsxs(Typography, { type: "utility", size: "medium", color: "gray-600", className: "mt-2 mb-3", children: ["The phone number ", displayPhone, " is linked to the following accounts."] }), _jsx("hr", {})] }), centered: true, showCloseButton: false, className: "px-0", footer: _jsxs(Flex, { direction: "column", className: 'pt-1', children: [_jsx(Flex, { className: "flex-1 border-t border-gray-300 mb-2" }), selectedAccount &&
+                    _jsxs(Flex, { align: 'center', className: 'bg-utility-warning-bg p-2 rounded-lg gap-1', children: [_jsx(IonIcon, { name: "information-circle-outline", style: { color: "hsl(var(--tw-ui-utility---warning--main))", fontSize: 24 } }), _jsxs(Typography, { type: "utility", size: "small", children: [_jsx("span", { className: "text-gray-500 text-[12px]", children: "Once you proceed, this phone number will be removed" }), " from other accounts."] })] }), _jsx(Button, { isFullWidth: true, loading: loading, variant: "primary", label: "Link and Continue", className: 'mt-4 mb-[-16px]', onClick: onContinue, disabled: !selectedAccount }), _jsx(SupportDetails, {})] }), children: [_jsx(Typography, { type: "utility", size: "medium", className: "mb-4", children: "Select account you want to continue with." }), existingAccounts.map((item) => {
+                return (_jsx(OptionCard, { item: item, onClick: () => setSelectedAccount(item), selectedItem: selectedAccount }, item.memberId));
+            })] }));
+};
+const OptionCard = ({ item, onClick, selectedItem }) => {
+    return (_jsx(Card, { containerStyle: `p-4 mb-2 ${item.memberId === selectedItem?.memberId ? 'border-primary' : 'border-gray-200'}`, children: _jsxs(Flex, { className: 'gap-2', onClick: onClick, children: [_jsx(Radio, { selectedValue: selectedItem?.memberId, options: [{ label: '', value: item.memberId }] }), _jsx(Flex, { direction: 'column', className: 'mt-[-2px]', children: _jsxs(_Fragment, { children: [_jsxs(Flex, { direction: "column", className: "border-b-2 pb-2 w-full", children: [_jsx(Typography, { type: "utility", size: "large", className: "break-words w-full mb-1", children: item.name }), _jsx(Typography, { type: "utility", size: "medium", color: "primary", className: "truncate w-full", children: item.email })] }), _jsxs(_Fragment, { children: [_jsxs(Flex, { justify: "between", className: "mt-3", children: [_jsx(Typography, { type: "utility", size: "medium", color: "gray-700", children: "Registration Source" }), _jsx(Typography, { type: "utility", size: "medium", color: "gray-800", children: item.loginType ? LoginMethodCode[item.loginType] : '—' })] }), _jsxs(Flex, { justify: "between", className: "mt-3", children: [_jsx(Typography, { type: "utility", size: "medium", color: "gray-700", children: "Registration Date" }), _jsx(Typography, { type: "utility", size: "medium", color: "gray-800", children: item.createdOn ? moment(item.createdOn).format('DD/MM/YYYY') : '—' })] })] })] }) })] }) }));
+};
+export { ExistingAccountsSheet };

package/build/src/screens/EnterMobile/components/ExistingAccountsSheet/index.native.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { Divider } from '@ui-kitten/components';
+import { Platform, Text, TouchableOpacity, View } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import { BottomSheet, Colors, isIphoneX, RadioButton, RoundedButton } from '@truworth/twc-rn-common';
+import { useModalize } from 'react-native-modalize';
+import { useExistingAccountsSheet } from './hooks/internal/useExistingAccountsSheet';
+import { useAuthPackageContext } from '../../../../hooks/internal/useAuthPackageContext';
+import { LoginMethodCode } from '../../../../enums';
+import moment from 'moment';
+import IonIcons from 'react-native-vector-icons/Ionicons';
+const { primary, gray, utility } = Colors;
+const ExistingAccountsSheet = ({ visible, hide, phone, existingAccounts }) => {
+    const { ref: sheetRef, open: openSheet, close: closeSheet } = useModalize();
+    const navigation = useNavigation();
+    const { openChatSupport } = useAuthPackageContext();
+    const { loading, linkPrimaryAccount, selectedAccount, setSelectedAccount } = useExistingAccountsSheet();
+    useEffect(() => {
+        if (visible) {
+            openSheet();
+        }
+        else {
+            closeSheet();
+        }
+    }, [visible]);
+    const onContinue = () => {
+        if (!phone || !selectedAccount?.email) {
+            return;
+        }
+        linkPrimaryAccount({
+            phone,
+            onInitiateLinking: ({ sessionToken }) => {
+                navigation.navigate('VerifyLinkPrimaryAccountEmailOTP', {
+                    phone,
+                    sessionToken,
+                    email: selectedAccount?.email
+                });
+                hide();
+            }
+        });
+    };
+    const displayPhone = phone ? `+91${phone.replace(/^.{8}/, 'XXXXXXXX')}` : '+91**********';
+    return (_jsx(BottomSheet, { sheetRef: sheetRef, onClose: hide, panGestureEnabled: false, HeaderComponent: _jsxs(_Fragment, { children: [_jsxs(View, { style: { paddingTop: 22, marginHorizontal: 22 }, children: [_jsx(Text, { style: { fontSize: 16, fontWeight: '600', color: gray.gray_900, textAlign: 'center' }, children: "Multiple Accounts Found" }), _jsxs(Text, { style: { fontSize: 12, fontWeight: '500', color: gray.gray_500, lineHeight: 20, textAlign: 'center', marginHorizontal: 16 }, children: ["The phone number ", displayPhone, " is linked to the following accounts."] })] }), _jsx(View, { style: { backgroundColor: gray.gray_200, height: 2, marginVertical: 8 } })] }), flatListProps: {
+            showsVerticalScrollIndicator: false,
+            contentContainerStyle: { flexGrow: 1 },
+            data: existingAccounts,
+            keyExtractor: (item) => item.memberId,
+            ListHeaderComponent: _jsx(Text, { style: { fontSize: 14, fontWeight: '600', color: gray.gray_900, marginHorizontal: 16, marginTop: 8 }, children: "Select account you want to continue with." }),
+            renderItem: ({ item }) => {
+                return (_jsxs(TouchableOpacity, { activeOpacity: 0.8, style: { padding: 16, margin: 8, borderWidth: 1, borderRadius: 8, borderColor: selectedAccount?.memberId === item.memberId ? primary.primary_main : gray.gray_200 }, onPress: () => setSelectedAccount(item), children: [_jsxs(View, { style: { flexDirection: 'row', alignItems: 'center' }, children: [_jsx(RadioButton, { checked: selectedAccount?.memberId === item.memberId, onChecked: () => setSelectedAccount(item) }), _jsxs(View, { style: { flex: 1, marginStart: 8 }, children: [_jsx(Text, { style: { fontSize: 14, fontWeight: '600', color: gray.gray_900 }, children: item.name }), _jsx(Text, { style: { fontSize: 12, fontWeight: '500', color: primary.primary_main, marginTop: 3 }, children: item.email })] })] }), _jsx(Divider, { style: { marginVertical: 8, backgroundColor: gray.gray_200 } }), _jsxs(View, { style: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }, children: [_jsx(Text, { style: { fontSize: 12, fontWeight: '500', color: gray.gray_500 }, children: "Registration Source" }), _jsx(Text, { style: { fontSize: 12, fontWeight: '600', color: gray.gray_800 }, children: LoginMethodCode[item.loginType] || 'Unknown' })] }), _jsxs(View, { style: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginTop: 8 }, children: [_jsx(Text, { style: { fontSize: 12, fontWeight: '500', color: gray.gray_500 }, children: "Registration Date" }), _jsx(Text, { style: { fontSize: 12, fontWeight: '600', color: gray.gray_800, }, children: moment(item.createdOn).format('DD/MM/YYYY') })] })] }, item.memberId));
+            }
+        }, FooterComponent: _jsxs(View, { style: {
+                width: '100%', backgroundColor: 'white', marginTop: 8,
+                padding: 16, marginBottom: isIphoneX() ? 30 : 0,
+                borderTopWidth: Platform.OS == 'android' ? 1 : 0, borderTopColor: gray.gray_300,
+                shadowColor: '#DDDDDD', shadowOffset: { width: 0, height: -2 },
+                shadowOpacity: 1, shadowRadius: 3, elevation: 3
+            }, children: [selectedAccount &&
+                    _jsxs(View, { style: {
+                            backgroundColor: utility.warning_bg,
+                            padding: 8,
+                            borderRadius: 8,
+                            marginBottom: 8,
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                        }, children: [_jsx(IonIcons, { size: 16, name: "information-circle", style: { marginRight: 8 }, color: utility.warning_main }), _jsxs(Text, { style: {
+                                    flex: 1, fontSize: 12, fontWeight: '500',
+                                    lineHeight: 18, color: gray.gray_500,
+                                }, children: ["Once you proceed, this phone number will be ", _jsx(Text, { style: { fontWeight: '600', color: gray.gray_900 }, children: "removed from other accounts." })] })] }), _jsx(RoundedButton, { label: 'Link and Continue', size: 'large', loading: loading, disabled: !selectedAccount, onPress: onContinue, containerStyle: { marginBottom: 8 } }), openChatSupport &&
+                    _jsxs(TouchableOpacity, { activeOpacity: 0.8, onPress: openChatSupport, style: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', padding: 8 }, children: [_jsx(IonIcons, { size: 12, name: 'headset', color: primary.primary_main }), _jsx(Text, { style: { fontSize: 14, fontWeight: '600', color: primary.primary_main, marginStart: 8 }, children: "Connect with Support" })] })] }) }));
+};
+export { ExistingAccountsSheet };

package/build/src/screens/EnterMobile/components/ExistingAccountsSheet/types.js

@@ -0,0 +1 @@
+export {};

package/build/src/screens/EnterMobile/hooks/internal/useEnterMobile.js

@@ -0,0 +1,67 @@
+import { useState } from "react";
+import { checkMobileExists } from "../../../../api/auth";
+import { showMessage } from "../../../../helpers/show-message";
+import { useAuthPackageContext } from "../../../../hooks/internal/useAuthPackageContext";
+import { RegistrationMethod } from "../../../../enums";
+const useEnterMobile = () => {
+    const [loading, setLoading] = useState(false);
+    const [isValidPhone, setValidPhone] = useState(false);
+    const [showExistingAccountsSheet, setShowExistingAccountsSheet] = useState(false);
+    const [phone, setPhone] = useState('');
+    const [countryCode, setCountryCode] = useState('91');
+    const [existingAccounts, setExistingAccounts] = useState([]);
+    const { onRegistrationMethodChange } = useAuthPackageContext();
+    const handleEnterMobile = (text) => {
+        setPhone(text);
+        const isNumeric = /^[0-9]+$/.test(text);
+        if (countryCode === '91' && text.length === 10 && isNumeric) {
+            setValidPhone(true);
+        }
+        else if (countryCode !== '91' && text.length >= 6 && text.length <= 15 && isNumeric) {
+            setValidPhone(true);
+        }
+        else {
+            setValidPhone(false);
+        }
+    };
+    const handleValidatePhone = async ({ onValidate }) => {
+        setLoading(true);
+        try {
+            const { mobileExist, linkedAccounts } = await checkMobileExists(phone);
+            if (mobileExist) {
+                if (linkedAccounts && linkedAccounts.length > 1) {
+                    setExistingAccounts(linkedAccounts);
+                    return setShowExistingAccountsSheet(true);
+                }
+            }
+            if (!mobileExist) {
+                onRegistrationMethodChange(RegistrationMethod.MOBILE);
+            }
+            onValidate({ mobileExist, email: linkedAccounts?.[0]?.email ?? '' });
+        }
+        catch (err) {
+            const errorMessage = err?.response?.data?.errors?.[0]?.message ?? 'Something went wrong';
+            showMessage({ message: errorMessage });
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    const handleClearPhoneInput = () => {
+        setPhone('');
+        setValidPhone(false);
+    };
+    return {
+        loading,
+        phone,
+        isValidPhone,
+        countryCode, setCountryCode,
+        existingAccounts,
+        showExistingAccountsSheet,
+        setShowExistingAccountsSheet,
+        handleValidatePhone,
+        handleEnterMobile,
+        handleClearPhoneInput,
+    };
+};
+export { useEnterMobile };