@truworth/twc-auth 1.2.4 → 1.2.6

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/assets/email_icon.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="22" height="18" viewBox="0 0 22 18">
+    <g fill="#ACD7D3">
+        <path d="M6.058 5.341c0 .568-.462 1.031-1.032 1.031H2.62c-.57 0-1.032-.463-1.032-1.03 0-.57.463-1.033 1.032-1.033h2.406c.57 0 1.032.463 1.032 1.032zM8.78 8.97c0 .568-.462 1.031-1.033 1.031H5.341c-.569 0-1.032-.463-1.032-1.03 0-.57.463-1.033 1.032-1.033h2.406c.57 0 1.032.463 1.032 1.032zM11.274 12.6c0 .567-.462 1.03-1.032 1.03H7.836c-.569 0-1.032-.463-1.032-1.03 0-.57.463-1.033 1.032-1.033h2.406c.57 0 1.032.463 1.032 1.032z"/>
+        <path d="M18.448.005H3.462C3.454.005 3.447 0 3.438 0H1.032C.462 0 0 .463 0 1.032 0 1.6.463 2.063 1.032 2.063h4.126l5.277 5.347c1.375 1.392 3.623 1.407 5.016.033l4.406-4.349c.048.145.08.297.08.457v10.361c0 .82-.668 1.488-1.489 1.488h-6.232c-.016 0-.03-.01-.047-.01H9.763c-.57 0-1.032.464-1.032 1.033 0 .568.463 1.03 1.032 1.03h.595v.006h8.09c1.956 0 3.547-1.59 3.547-3.547V3.552c0-1.957-1.59-3.547-3.547-3.547zm-4.443 5.973c-.584.576-1.529.57-2.105-.014L8.05 2.063h9.92l-3.965 3.915z"/>
+    </g>
+</svg>

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/constants/social-login-options.js

@@ -0,0 +1,16 @@
+import { SocialLoginsEnum } from "../enums";
+const socialLoginOptions = [
+    {
+        type: SocialLoginsEnum.Google,
+        iconImageUrl: `https://cdn-thewellnesscorner.s3.amazonaws.com/twc-web-images/template/google-icon.png`,
+    },
+    {
+        type: SocialLoginsEnum.Facebook,
+        iconImageUrl: `https://cdn-thewellnesscorner.s3.amazonaws.com/twc-web-images/template/facebook-icon.png`,
+    },
+    {
+        type: SocialLoginsEnum.Apple,
+        iconImageUrl: `https://cdn-thewellnesscorner.s3.amazonaws.com/twc-web-images/template/apple-icon.png`,
+    }
+];
+export { socialLoginOptions };

package/build/src/contexts/AuthContext.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useEffect, useState, useMemo, useCallback } from 'react';
 import { MEMBER_IMAGES_URL } from '../constants/cdn-url';
-import { createHttpClient } from '../helpers/Network';
+import { createHttpClient } from '../helpers/network';
 /**
  * Public Auth Authentication Context
  *
@@ -31,8 +31,10 @@ 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
+ * @param socialLoginConfig - Optional social login configuration
  */
-const AuthProvider = ({ children, LogoComponent, session, appConfig, onLogin, onLogout, onLaunchAuthSession, onRefreshSession }) => {
+const AuthProvider = ({ children, LogoComponent, session, appConfig, onLogin, onLogout, onLaunchAuthSession, onRefreshSession, openChatSupport, socialLoginConfig }) => {
     const [isLoadingProfile, setIsLoadingProfile] = useState(false);
     const [profile, setProfile] = useState(null);
     const [client, setClient] = useState(null);
@@ -170,6 +172,7 @@ const AuthProvider = ({ children, LogoComponent, session, appConfig, onLogin, on
         LogoComponent,
         appConfig: appConfigValue,
         registrationMethod,
+        socialLoginConfig,
         onLaunchAuthSession,
         onLogin,
         logout,
@@ -177,6 +180,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/index.js

@@ -1,2 +1,3 @@
 export * from './registrationMethod.enum';
 export * from './loginMethod.enum';
+export * from './socialLogins.enum';

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/enums/socialLogins.enum.js

@@ -0,0 +1,6 @@
+export var SocialLoginsEnum;
+(function (SocialLoginsEnum) {
+    SocialLoginsEnum["Google"] = "google";
+    SocialLoginsEnum["Facebook"] = "facebook";
+    SocialLoginsEnum["Apple"] = "apple";
+})(SocialLoginsEnum || (SocialLoginsEnum = {}));

package/build/src/helpers/{Network.js → network.js}

@@ -1,5 +1,5 @@
 import { axiosClient } from '../api/axiosClient';
-import { showMessage } from '../helpers/show-message';
+import { showMessage } from './show-message';
 import {} from 'axios';
 export const createHttpClient = ({ token, onRefreshSession, onLogout }) => {
     let currentToken = token;

package/build/src/hooks/useRequest.js

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useState } from 'react';
 import { showMessage } from '../helpers/show-message';
 import { useAuthPackageContext } from './internal/useAuthPackageContext';
-import { createHttpClient } from '../helpers/Network';
+import { createHttpClient } from '../helpers/network';
 const useRequest = () => {
     const { token: sessionToken, logout, refreshSession } = useAuthPackageContext();
     const [token, setToken] = useState(sessionToken);

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,77 @@
-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,
-        onRegistrationMethodChange,
-        loginConflictErrorTitle: `Sign in with ${loginType}`,
-        loginConflictErrorDescription: `Looks like you previously registered using ${loginType}. Please go back and sign in with ${loginType}.`,
+        handleEmailChange,
+        handleEmailExists,
+        handleClearEmail,
+        isLoginConflictModalVisible,
+        setIsLoginConflictModalVisible,
+        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

@@ -1,28 +1,54 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Button, Form, TextInput, useForm } from '@truworth/twc-web-design';
+import { Button, Flex, Form, TextInput, Typography, useForm } from '@truworth/twc-web-design';
 import { ConfirmationModal as LoginConflictModal } from '../../components/ConfirmationModal';
 import { ScreenLayout } from "../../components/ScreenLayout";
 import { useEnterEmail } from "./hooks/internal/useEnterEmail";
 import { SupportDetails } from '../../components/SupportDetails';
+import { useWelcome } from '../Welcome/hooks/internal/useWelcome';
+import { socialLoginOptions } from '../../constants/social-login-options';
+import { SocialLoginModal } from '../Welcome/components/SocialLoginModal';
+import { useSocialAuth } from '../Welcome/SocialAuth/hooks/useSocialAuth.web';
+import { SocialLoginsEnum } from '../../enums';
+import _ from 'lodash';
 const EnterEmail = ({ onContinue, onPressSignInWithSSO }) => {
-    const { loading, email, isInvalidEmail, loginConflictModalVisible, loginConflictErrorTitle, loginConflictErrorDescription, enterEmail, appName, handleValidateEmail, setLoginConflictModalVisible, } = useEnterEmail();
+    const { loginWithGoogle, loginWithFacebook } = useSocialAuth();
+    const { email, isEmailValid, handleEmailChange, appName, handleEmailExists, loading, loginConflictTitle, loginConflictDescription, isLoginConflictModalVisible, setIsLoginConflictModalVisible, } = useEnterEmail();
+    const { showSocialLoginModal, setShowSocialLoginModal, socialLoginType, setSocialLoginType, isSocialLoginEnabled, socialLoginConfig, } = useWelcome();
     const form = useForm({ defaultValues: { email } });
+    const handleLogin = () => {
+        setShowSocialLoginModal(false);
+        switch (socialLoginType) {
+            case SocialLoginsEnum.Google:
+                return loginWithGoogle();
+            case SocialLoginsEnum.Facebook:
+                return loginWithFacebook();
+            default:
+                return;
+        }
+    };
     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 }), isSocialLoginEnabled && (_jsxs(_Fragment, { children: [_jsxs(Flex, { align: "center", className: "my-6", children: [_jsx(Flex, { className: "flex-1 border-t border-gray-300" }), _jsx(Typography, { type: 'body', size: 'small', className: "text-gray-500 px-4", children: "or continue with" }), _jsx(Flex, { className: "flex-1 border-t border-gray-300" })] }), _jsx(Flex, { justify: 'center', align: 'center', className: "gap-4", children: socialLoginOptions.map(({ type, iconImageUrl }) => {
+                            if (type === SocialLoginsEnum.Apple) {
+                                return null;
+                            }
+                            return socialLoginConfig?.[type]?.enabled && (_jsxs("button", { type: "button", className: "flex justify-center p-3 gap-2 items-center\n                                             rounded-[50px] flex-1 border text-gray-800 hover:text-gray-800\n                                             border-gray-100 bg-gray-100 hover:border-gray-300 transition-all duration-300 cursor-pointer", onClick: () => {
+                                    setSocialLoginType(type);
+                                    setShowSocialLoginModal(true);
+                                }, children: [_jsx("img", { src: iconImageUrl, style: { width: 20, height: 20 } }), _jsx(Typography, { type: 'utility', size: 'medium', children: _.startCase(type) })] }, type));
+                        }) })] })), showSocialLoginModal &&
+                _jsx(SocialLoginModal, { visible: showSocialLoginModal, hide: () => setShowSocialLoginModal(false), socialLoginType: socialLoginType, onClick: handleLogin }), _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 };