@truworth/twc-auth 1.2.12-beta.0 → 1.2.12-beta.2

package/README.md

@@ -85,14 +85,15 @@ Truworth Auth Module - A comprehensive authentication solution for React Native
 
 | Package                  | Version  |
 | ------------------------ | -------- |
-| @truworth/twc-web-design | ^1.9.0   |
-| antd                     | ^5.6.3   |
-| framer-motion            | ^12.6.2  |
-| lodash                   | ^4.17.21 |
-| lucide-react             | ^0.483.0 |
+| @react-google-maps/api   | >=2.20.6 |
+| @truworth/twc-web-design | >=1.9.0  |
+| antd                     | >=5.6.3  |
+| framer-motion            | >=12.6.2 |
+| lodash                   | >=4.17.21 |
+| lucide-react             | >=0.483.0 |
 | next                     | ^15.0.4  |
-| react                    | ^18.2.0  |
-| react-dom                | ^18.2.0  |
+| react                    | >=18.2.0 |
+| react-dom                | >=18.2.0 |
 
 ### Web
 
@@ -106,13 +107,14 @@ Truworth Auth Module - A comprehensive authentication solution for React Native
    ```bash
    npm install \
      next@^15.0.4 \
-     @truworth/twc-web-design@^1.9.0 \
-     antd@^5.6.3 \
-     framer-motion@^12.6.2 \
-     lodash@^4.17.21 \
-     lucide-react@^0.483.0 \
-     react@^18.2.0 \
-     react-dom@^18.2.0
+     @react-google-maps/api@>=2.20.6 \
+     @truworth/twc-web-design@>=1.9.0 \
+     antd@>=5.6.3 \
+     framer-motion@>=12.6.2 \
+     lodash@>=4.17.21 \
+     lucide-react@>=0.483.0 \
+     react@>=18.2.0 \
+     react-dom@>=18.2.0
    ```
 
 ## Running the Example Applications of the TWC-Auth Package

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

@@ -37,8 +37,8 @@ const AdvancedTransitionWrapper = ({ children, isVisible = true, direction = 'ri
 export { AdvancedTransitionWrapper };
 const getAdvancedVariants = (direction, type, duration, delay, options) => {
     // Extract options with defaults
-    const { bounce = 0.25, damping = 10, mass = 1, velocity = 0, depth = 100, perspective = 1000, intensity = 1 } = options;
-    // Base variants 
+    const { bounce = 0.25, damping = 10, mass = 1, velocity = 0, depth = 100, intensity = 1 } = options;
+    // Base variants - using Record type to allow dynamic property assignment
     const baseVariants = {
         initial: { opacity: 0 },
         enter: {
@@ -104,17 +104,14 @@ const getAdvancedVariants = (direction, type, duration, delay, options) => {
             baseVariants.initial = {
                 ...baseVariants.initial,
                 [flipAxis]: direction === 'up' || direction === 'left' ? flipAmount : -flipAmount,
-                transformPerspective: perspective
             };
             baseVariants.enter = {
                 ...baseVariants.enter,
                 [flipAxis]: 0,
-                transformPerspective: perspective
             };
             baseVariants.exit = {
                 ...baseVariants.exit,
                 [flipAxis]: direction === 'up' || direction === 'left' ? -flipAmount : flipAmount,
-                transformPerspective: perspective
             };
             break;
         }
@@ -281,21 +278,18 @@ const getAdvancedVariants = (direction, type, duration, delay, options) => {
                 scale: direction === 'up' || direction === 'left' ? 1.5 * intensity : 0.6 / Math.max(0.1, intensity),
                 opacity: 0,
                 z: direction === 'up' || direction === 'left' ? -depth : depth,
-                transformPerspective: perspective
             };
             baseVariants.enter = {
                 ...baseVariants.enter,
                 scale: 1,
                 opacity: 1,
                 z: 0,
-                transformPerspective: perspective
             };
             baseVariants.exit = {
                 ...baseVariants.exit,
                 scale: direction === 'up' || direction === 'left' ? 0.6 / Math.max(0.1, intensity) : 1.5 * intensity,
                 opacity: 0,
                 z: direction === 'up' || direction === 'left' ? depth : -depth,
-                transformPerspective: perspective
             };
             break;
         }

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

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { IonIcon } from '../../components/IonIcon';
 import { Button, Flex, ResponsiveModal, Typography } from '@truworth/twc-web-design';
-const ConfirmationModal = ({ title, visible, onClose, onProceed, onDismiss, primaryLabel, secondaryLabel, iconName = "information-circle-outline", iconColor = "hsl(var(--tw-ui-utility---warning--main))", description }) => {
-    return (_jsx(ResponsiveModal, { title: "", open: visible, onClose: onClose, footer: null, showCloseButton: false, className: 'py-0', children: _jsxs(Flex, { direction: "column", align: "center", justify: "center", children: [_jsxs(Flex, { direction: "column", align: "center", justify: "center", children: [_jsx(IonIcon, { name: iconName, style: { color: iconColor, fontSize: 96 } }), title &&
+const ConfirmationModal = ({ title, visible, onClose, onProceed, onDismiss, primaryLabel, secondaryLabel, iconName = "information-circle-outline", iconClassName = "text-utility-warning-main", description }) => {
+    return (_jsx(ResponsiveModal, { title: "", open: visible, onClose: onClose, footer: null, showCloseButton: false, className: 'py-0', children: _jsxs(Flex, { direction: "column", align: "center", justify: "center", children: [_jsxs(Flex, { direction: "column", align: "center", justify: "center", children: [_jsx(IonIcon, { name: iconName, className: `text-[96px] ${iconClassName}` }), title &&
                             _jsx(Typography, { type: "heading", size: "h6", className: "mt-2 text-center", children: title }), description &&
                             _jsx(Typography, { type: "utility", size: "medium", color: 'gray-600', className: "mt-2 mb-6 text-center", children: description })] }), primaryLabel &&
                     _jsx(Button, { onClick: () => onProceed?.(), label: primaryLabel, className: 'w-full my-3' }), secondaryLabel &&

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

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { motion } from 'framer-motion';
+const LoadingAnimation = ({ height = 230, width = 250, }) => {
+    return (_jsxs("div", { style: {
+            height,
+            width,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexDirection: 'column',
+            gap: 16,
+        }, children: [_jsx(motion.div, { style: {
+                    display: 'flex',
+                    gap: 8,
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }, children: [0, 1, 2].map((i) => (_jsx(motion.div, { style: {
+                        width: 12,
+                        height: 12,
+                        borderRadius: '50%',
+                        backgroundColor: '#26C6DA',
+                    }, animate: {
+                        y: [0, -16, 0],
+                        opacity: [0.5, 1, 0.5],
+                    }, transition: {
+                        duration: 0.8,
+                        repeat: Infinity,
+                        delay: i * 0.15,
+                        ease: 'easeInOut',
+                    } }, i))) }), _jsx(motion.div, { style: {
+                    width: 120,
+                    height: 4,
+                    backgroundColor: '#E0E0E0',
+                    borderRadius: 2,
+                    overflow: 'hidden',
+                }, children: _jsx(motion.div, { style: {
+                        width: '40%',
+                        height: '100%',
+                        backgroundColor: '#26C6DA',
+                        borderRadius: 2,
+                    }, animate: {
+                        x: ['-100%', '250%'],
+                    }, transition: {
+                        duration: 1.2,
+                        repeat: Infinity,
+                        ease: 'easeInOut',
+                    } }) })] }));
+};
+export { LoadingAnimation };

package/build/src/constants/password-requirements.js

@@ -0,0 +1,7 @@
+export const strongPasswordRequirements = [
+    { regex: /.{6,}/, text: "At least 6 characters" },
+    { regex: /[0-9]/, text: "At least 1 number" },
+    { regex: /[a-z]/, text: "At least 1 lowercase letter" },
+    { regex: /[A-Z]/, text: "At least 1 uppercase letter" },
+    { regex: /[!@#$%^&*()_+]/, text: "At least 1 special character" }
+];

package/build/src/contexts/AuthContext.js

@@ -23,6 +23,8 @@ const AuthPackageContext = React.createContext(null);
  * Wraps both AuthContext (public) and AuthPackageContext (internal).
  *
  * @param children - React children to be rendered inside the provider
+ * @param router - Router adapter for navigation in web apps only
+ * @param basePath - Base path for web routes where the auth module is mounted (default: '')
  * @param LogoComponent - Optional component for branding/logo in auth flows
  * @param session - Initial session containing token & sessionTimeout (if available)
  * @param supportEmail - Optional support email for auth flows
@@ -34,7 +36,7 @@ const AuthPackageContext = React.createContext(null);
  * @param openChatSupport - Optional callback to open chat support
  * @param socialLoginConfig - Optional social login configuration
  */
-const AuthProvider = ({ children, LogoComponent, session, appConfig, onLogin, onLogout, onLaunchAuthSession, onRefreshSession, openChatSupport, socialLoginConfig }) => {
+const AuthProvider = ({ children, router, basePath = '', LogoComponent, session, appConfig, onLogin, onLogout, onLaunchAuthSession, onRefreshSession, openChatSupport, socialLoginConfig }) => {
     const [isLoadingProfile, setIsLoadingProfile] = useState(false);
     const [profile, setProfile] = useState(null);
     const [client, setClient] = useState(null);
@@ -168,6 +170,8 @@ const AuthProvider = ({ children, LogoComponent, session, appConfig, onLogin, on
     };
     const AuthPackageContextValues = {
         token,
+        router,
+        basePath,
         LogoComponent,
         appConfig: appConfigValue,
         registrationMethod,

package/build/src/hooks/useNavigator.js

@@ -0,0 +1,83 @@
+import { useContext, useMemo } from 'react';
+import { AuthPackageContext } from '../contexts/AuthContext';
+/**
+ * useNavigator Hook
+ *
+ * Provides framework-agnostic navigation capabilities.
+ * Uses the RouterAdapter provided by the host app through AuthProvider.
+ *
+ * @example
+ * ```tsx
+ * const navigator = useNavigator();
+ *
+ * // Relative navigation (uses basePath)
+ * navigator.push('/registration');
+ *
+ * // Absolute navigation (ignores basePath)
+ * navigator.pushAbsolute('/dashboard');
+ *
+ * // With query params
+ * navigator.push('/registration', { query: { email: 'test@example.com' } });
+ *
+ * // Access query params
+ * const { email } = navigator.query;
+ * ```
+ */
+const useNavigator = () => {
+    const context = useContext(AuthPackageContext);
+    if (!context?.router) {
+        throw new Error('useNavigator: router not found in context. ' +
+            'Make sure to wrap your component with AuthProvider and pass a router adapter.');
+    }
+    const { router, basePath = '' } = context;
+    const navigator = useMemo(() => ({
+        /**
+         * Navigate to a path relative to basePath
+         */
+        push: (path, options) => {
+            const fullPath = path.startsWith('/') ? `${basePath}${path}` : `${basePath}/${path}`;
+            router.push(fullPath, options);
+        },
+        /**
+         * Replace current path with a path relative to basePath
+         */
+        replace: (path, options) => {
+            const fullPath = path.startsWith('/') ? `${basePath}${path}` : `${basePath}/${path}`;
+            router.replace(fullPath, options);
+        },
+        /**
+         * Navigate to an absolute path (ignores basePath)
+         */
+        pushAbsolute: (path, options) => {
+            router.push(path, options);
+        },
+        /**
+         * Replace with an absolute path (ignores basePath)
+         */
+        replaceAbsolute: (path, options) => {
+            router.replace(path, options);
+        },
+        /**
+         * Go back to the previous page
+         */
+        back: () => router.back(),
+        /**
+         * Get current query parameters
+         */
+        get query() {
+            return router.getQuery();
+        },
+        /**
+         * Get current pathname
+         */
+        get pathname() {
+            return router.getPathname();
+        },
+        /**
+         * The base path where the auth module is mounted
+         */
+        basePath,
+    }), [router, basePath]);
+    return navigator;
+};
+export { useNavigator };

package/build/src/index.js

@@ -5,6 +5,7 @@ export * from './contexts/type';
 // export hooks
 export * from './hooks/useAuthContext';
 export * from './hooks/useRequest';
+export * from './hooks/useNavigator';
 // export axiosClient
 export * from './api/axiosClient';
 // export navigator/router
@@ -13,3 +14,10 @@ export * from './navigator';
 export * from './screens/Login/components/LoginWebComponent/index';
 export * from './screens/SignUp/components/SignUpWebComponent/index';
 export * from './screens/SSOLogin/SSOCallback/components/SSOCallbackComponent/index';
+// export partner SSO components
+export * from './screens/PartnerSSO/PartnerLogin/components/PartnerLoginWebComponent';
+export * from './screens/PartnerSSO/PartnerRegistration/components/PartnerRegistrationWebComponent';
+// export profile components
+export * from './screens/Profile';
+// export constants
+export { strongPasswordRequirements } from './constants/password-requirements';

package/build/src/screens/CountryCode/components/CountryCodeDropdown/index.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import Image from 'next/image';
 import React, { useMemo } from "react";
 import { Typography, SelectField, Flex } from '@truworth/twc-web-design';
 import { useCountryCode } from '../../hooks/internal/useCountryCode';
@@ -22,10 +21,10 @@ export const CountryCodeDropdown = React.memo(({ selectedCountry, handleSelect }
             const code = item.countryCode.toLowerCase();
             const flagUrl = `https://cdn.thewellnesscorner.com/country-flags/${code}.png`;
             return {
-                leftIcon: (_jsx(_Fragment, { children: isValidCountryCode(code) && (_jsx(Image, { src: flagUrl, width: 20, height: 20, className: "h-auto shrink-0", alt: `${item.name} flag`, loading: "lazy" })) })),
+                leftIcon: (_jsx(_Fragment, { children: isValidCountryCode(code) && (_jsx("img", { src: flagUrl, width: 20, height: 20, className: "h-5 w-5 shrink-0", alt: `${item.name} flag`, loading: "lazy" })) })),
                 label: (_jsxs(Typography, { type: "body", size: "small", children: [item.name, " (+", item.phoneCode, ")"] })),
                 value: code,
-                selectedField: (_jsxs(Flex, { align: "center", className: "gap-2 pl-2 pr-2 cursor-pointer", children: [isValidCountryCode(code) && (_jsx(Image, { src: flagUrl, width: 20, height: 20, className: "h-auto shrink-0", alt: `${item.name} flag`, loading: "lazy" })), _jsx(Typography, { type: "body", size: "medium", className: "countryCode cursor-pointer", children: `+${item.phoneCode}` })] })),
+                selectedField: (_jsxs(Flex, { align: "center", className: "gap-2 pl-2 pr-2 cursor-pointer", children: [isValidCountryCode(code) && (_jsx("img", { src: flagUrl, width: 20, height: 20, className: "h-5 w-5 shrink-0", alt: `${item.name} flag`, loading: "lazy" })), _jsx(Typography, { type: "body", size: "medium", className: "countryCode cursor-pointer", children: `+${item.phoneCode}` })] })),
             };
         });
     }, [countries]);

package/build/src/screens/CreatePassword/hooks/internal/useCreatePassword.js

@@ -4,12 +4,17 @@ import { defaultPolicy } from "../../../../constants/defaultPolicy";
  * @internal
  * Internal hook for managing CreatePassword screen state and auth context integration.
  * Not exposed to package consumers.
+ *
+ * Both web and native use the same pattern:
+ * - Hook manages password state internally
+ * - Use handlePassword/handleConfirmPassword to update state
+ * - Optional initial values for preserving state when navigating back
  */
-const useCreatePassword = () => {
+const useCreatePassword = (props) => {
     const [passwordVisible, setPasswordVisible] = useState(false);
     const [confirmPasswordVisible, setConfirmPasswordVisible] = useState(false);
-    const [password, setPassword] = useState('');
-    const [confirmPassword, setConfirmPassword] = useState('');
+    const [password, setPassword] = useState(props?.initialPassword || '');
+    const [confirmPassword, setConfirmPassword] = useState(props?.initialConfirmPassword || '');
     const [maxLength, setMaxLength] = useState(defaultPolicy.maxLength);
     const [criteria, setCriteria] = useState({});
     const handlePassword = (text) => {
@@ -23,7 +28,9 @@ const useCreatePassword = () => {
         setConfirmPassword('');
         onResult();
     };
-    const isContinueDisabled = !Object.keys(criteria).every(c => criteria[c]) || (password !== confirmPassword);
+    const allCriteriaMet = Object.keys(criteria).length > 0 && Object.keys(criteria).every(c => criteria[c]);
+    const passwordsMatch = password.length > 0 && password === confirmPassword;
+    const isContinueDisabled = !allCriteriaMet || !passwordsMatch;
     return {
         password, setPassword,
         confirmPassword, setConfirmPassword,

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

@@ -1,43 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Flex, Form, PasswordInput, Typography, useForm } from "@truworth/twc-web-design";
+import { Button, Flex, PasswordInput, Typography } from "@truworth/twc-web-design";
 import { useCreatePassword } from "./hooks/internal/useCreatePassword";
 import { ScreenLayout } from "../../components/ScreenLayout";
 import { PasswordCriteria } from "../../components/PasswordCriteria";
 const CreatePassword = ({ userDetails, handleBack, onContinue }) => {
     const { countryCode, email } = userDetails;
-    const form = useForm({
-        defaultValues: {
-            password: userDetails.password || '',
-            confirmPassword: userDetails.confirmPassword || '',
-        }
+    const { password, confirmPassword, handlePassword, handleConfirmPassword, passwordVisible, setPasswordVisible, confirmPasswordVisible, setConfirmPasswordVisible, criteria, setCriteria, maxLength, setMaxLength, handleSkip, isContinueDisabled } = useCreatePassword({
+        initialPassword: userDetails.password,
+        initialConfirmPassword: userDetails.confirmPassword,
     });
-    const { password, confirmPassword } = form.watch();
-    const { criteria, setCriteria, maxLength, setMaxLength, handleSkip, isContinueDisabled } = useCreatePassword();
     return (_jsx(ScreenLayout, { title: _jsxs(Flex, { justify: "between", align: "center", children: [_jsx(Typography, { type: "heading", size: "h5", children: "Create your Password" }), countryCode == '91' &&
-                    _jsx(Button, { label: "Skip Now", variant: "link", onClick: () => handleSkip({ onResult: onContinue }) })] }), subTitle: "Use a password that's easy to remember and fulfills all the requirements listed below.", buttonProps: {
+                    _jsx(Button, { label: "Skip Now", variant: "link", onClick: () => handleSkip({ onResult: () => onContinue('', '') }) })] }), subTitle: "Use a password that's easy to remember and fulfills all the requirements listed below.", buttonProps: {
             label: 'Continue',
             onClick: () => onContinue(password, confirmPassword),
             disabled: isContinueDisabled
-        }, onPressBack: handleBack, children: _jsxs(Form, { form: form, className: 'w-full', children: [_jsx(Form.Item, { name: "password", label: "Enter Password", normalize: (value) => value.replace(/\s/g, ''), rules: [
-                        {
-                            required: true,
-                            message: 'Please enter your password'
-                        }
-                    ], children: _jsx(PasswordInput, { placeholder: "Enter password", value: password, maxLength: maxLength, showStrengthIndicator: false }) }), _jsx(PasswordCriteria, { email: email, password: password, criteria: criteria, onCriteriaChange: setCriteria, onMaxLengthChange: setMaxLength }), _jsx(Form.Item, { name: "confirmPassword", label: "Confirm Password", className: "mt-6", normalize: (value) => value.replace(/\s/g, ''), rules: [
-                        {
-                            required: true,
-                            message: 'Please confirm your password',
-                        },
-                        {
-                            validator: async (_, value) => {
-                                const password = form.getValues('password');
-                                if (!value)
-                                    return;
-                                if (!value || password !== value) {
-                                    throw new Error('Passwords don’t match');
-                                }
-                            },
-                        },
-                    ], children: _jsx(PasswordInput, { className: "mb-6", value: confirmPassword, placeholder: "Re-enter password", maxLength: maxLength, showStrengthIndicator: false }) })] }) }));
+        }, onPressBack: handleBack, children: _jsxs("div", { style: { width: '100%' }, children: [_jsxs("div", { style: { marginBottom: '8px', width: '100%' }, children: [_jsx(Typography, { type: "body", size: "small", className: "mb-1 font-medium", children: "Enter Password" }), _jsx("div", { style: { width: '100%' }, children: _jsx(PasswordInput, { placeholder: "Enter password", value: password, onChange: (value) => handlePassword(value), maxLength: maxLength, showStrengthIndicator: false, style: { width: '100%' } }) })] }), _jsx(PasswordCriteria, { email: email, password: password, criteria: criteria, onCriteriaChange: setCriteria, onMaxLengthChange: setMaxLength }), _jsxs("div", { style: { marginTop: '24px', marginBottom: '24px', width: '100%' }, children: [_jsx(Typography, { type: "body", size: "small", className: "mb-1 font-medium", children: "Confirm Password" }), _jsx("div", { style: { width: '100%' }, children: _jsx(PasswordInput, { placeholder: "Re-enter password", value: confirmPassword, onChange: (value) => handleConfirmPassword(value), maxLength: maxLength, showStrengthIndicator: false, style: { width: '100%' } }) }), confirmPassword && password !== confirmPassword && (_jsx(Typography, { type: "body", size: "tiny", className: "text-red-500 mt-1", children: "Passwords don't match" }))] })] }) }));
 };
 export default CreatePassword;

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

@@ -23,7 +23,7 @@ const ExistingAccountsSheet = ({ visible, hide, phone, existingAccounts, onIniti
     };
     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) => {
+                    _jsxs(Flex, { align: 'center', className: 'bg-utility-warning-bg p-2 rounded-lg gap-1', children: [_jsx(IonIcon, { name: "information-circle-outline", className: "text-utility-warning-main text-2xl" }), _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));
             })] }));
 };

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

@@ -37,7 +37,10 @@ const useEnterMobile = () => {
             if (!mobileExist) {
                 onRegistrationMethodChange(RegistrationMethod.MOBILE);
             }
-            onValidate({ mobileExist, email: linkedAccounts?.[0]?.email ?? '' });
+            onValidate({
+                mobileExist,
+                memberId: linkedAccounts?.[0]?.memberId ?? ''
+            });
         }
         catch (err) {
             const errorMessage = err?.response?.data?.errors?.[0]?.message ?? 'Something went wrong';

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

@@ -3,7 +3,7 @@ import { Flex, Form, ResponsiveModal, TextInput, Typography, useForm } from '@tr
 import { ScreenLayout } from "../../components/ScreenLayout";
 import { useEnterMobile } from "./hooks/internal/useEnterMobile";
 import { CountryCodeDropdown } from '../CountryCode/components/CountryCodeDropdown';
-import { useRouter } from 'next/router';
+import { useNavigator } from '../../hooks/useNavigator';
 import { useState } from 'react';
 import { ExistingAccountsSheet } from './components/ExistingAccountsSheet';
 import LoginWithMobileOTP from '../LoginWithMobileOTP';
@@ -15,6 +15,7 @@ const EnterMobile = ({ onPressBack }) => {
     const [showVerifyLinkPrimaryEmailModal, setShowVerifyLinkPrimaryEmailModal] = useState(false);
     const [showVerifyLinkPrimaryMobileModal, setShowVerifyLinkPrimaryMobileModal] = useState(false);
     const [email, setEmail] = useState('');
+    const [memberId, setMemberId] = useState('');
     const [sessionToken, setSessionToken] = useState('');
     const [selectedCountry, setSelectedCountry] = useState({
         countryCode: "in",
@@ -22,18 +23,17 @@ const EnterMobile = ({ onPressBack }) => {
         name: "INDIA",
     });
     const form = useForm();
-    const router = useRouter();
+    const navigator = useNavigator();
     const { loading, phone, isValidPhone, countryCode, setCountryCode, existingAccounts, showExistingAccountsSheet, setShowExistingAccountsSheet, handleValidatePhone, handleEnterMobile, } = useEnterMobile();
     const handleSubmit = () => {
         handleValidatePhone({
-            onValidate: ({ mobileExist, email }) => {
-                if (mobileExist && email) {
-                    setEmail(email);
+            onValidate: ({ mobileExist, memberId }) => {
+                if (mobileExist && memberId) {
+                    setMemberId(memberId);
                     setShowLoginWithMobileOTPModal(true);
                 }
                 else {
-                    router.push({
-                        pathname: '/registration',
+                    navigator.pushAbsolute('/registration', {
                         query: { phone, registrationMethod: RegistrationMethod.MOBILE }
                     });
                 }
@@ -56,7 +56,7 @@ const EnterMobile = ({ onPressBack }) => {
                                     setCountryCode(country.phoneCode);
                                     setSelectedCountry(country);
                                 } }) }) }) }) }), showLoginWithMobileOTPModal &&
-                _jsx(LoginWithMobileOTPModal, { email: email, phone: phone, show: showLoginWithMobileOTPModal, hide: () => setShowLoginWithMobileOTPModal(false) }), showExistingAccountsSheet &&
+                _jsx(LoginWithMobileOTPModal, { memberId: memberId, phone: phone, show: showLoginWithMobileOTPModal, hide: () => setShowLoginWithMobileOTPModal(false) }), showExistingAccountsSheet &&
                 _jsx(ExistingAccountsSheet, { phone: phone, visible: showExistingAccountsSheet, existingAccounts: existingAccounts, onInitiateAccountLinking: ({ sessionToken, email }) => {
                         setSessionToken(sessionToken);
                         setEmail(email);
@@ -76,7 +76,7 @@ const VerifyLinkPrimaryAccountEmailOTPModal = ({ show, hide, email, sessionToken
 const VerifyLinkPrimaryAccountMobileOTPModal = ({ show, hide, phone, sessionToken }) => {
     return (_jsx(ResponsiveModal, { title: "Verify Mobile Number", open: show, onClose: hide, maskClosable: false, showCloseButton: false, size: 'sm', children: _jsx(VerifyLinkPrimaryAccountMobileOTP, { phone: phone, sessionToken: sessionToken }) }));
 };
-const LoginWithMobileOTPModal = ({ show, hide, email, phone }) => {
-    return (_jsx(ResponsiveModal, { open: show, onClose: hide, title: _jsx(Typography, { type: "heading", size: "h6", className: "text-center mb-0", children: "Verify Mobile Number" }), showCloseButton: false, maskClosable: false, size: 'sm', children: _jsx(LoginWithMobileOTP, { phone: phone, email: email }) }));
+const LoginWithMobileOTPModal = ({ show, hide, memberId, phone }) => {
+    return (_jsx(ResponsiveModal, { open: show, onClose: hide, title: _jsx(Typography, { type: "heading", size: "h6", className: "text-center mb-0", children: "Verify Mobile Number" }), showCloseButton: false, maskClosable: false, size: 'sm', children: _jsx(LoginWithMobileOTP, { phone: phone, memberId: memberId }) }));
 };
 export default EnterMobile;

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

@@ -23,11 +23,11 @@ const EnterMobile = ({ navigation }) => {
     const handleSubmit = () => {
         Keyboard.dismiss();
         handleValidatePhone({
-            onValidate: ({ mobileExist, email }) => {
-                if (mobileExist && email) {
+            onValidate: ({ mobileExist, memberId }) => {
+                if (mobileExist && memberId) {
                     navigation.navigate('LoginWithMobileOTP', {
                         phone,
-                        email
+                        memberId
                     });
                 }
                 else {

package/build/src/screens/Login/components/LoginWebComponent/index.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState } from 'react';
 import { Flex } from '@truworth/twc-web-design';
-import { useRouter } from 'next/router';
 import { AdvancedTransitionWrapper } from '../../../../components/AdvancedTransitionWrapper';
 import { useAuthPackageContext } from '../../../../hooks/internal/useAuthPackageContext';
+import { useNavigator } from '../../../../hooks/useNavigator';
 import EnterEmail from '../../../EnterEmail/index';
 import EnterPassword from '../../../EnterPassword/index';
 import ResetPassword from '../../../ResetPassword/index';
@@ -16,14 +16,13 @@ const LoginWebComponent = () => {
     const [sessionToken, setSessionToken] = useState('');
     const [selectedClient, setSelectedClient] = useState(null);
     const { LogoComponent } = useAuthPackageContext();
-    const router = useRouter();
+    const navigator = useNavigator();
     const onRedirectToPassword = (email) => {
         setEmail(email);
         setLoginState('EnterPassword');
     };
     const onRedirectToSignUp = (email) => {
-        router.push({
-            pathname: '/registration',
+        navigator.pushAbsolute('/registration', {
             query: { email, registrationMethod: 'email' }
         });
     };

package/build/src/screens/LoginWithMobileOTP/hooks/internal/useLoginWithMobileOTP.js

@@ -3,7 +3,7 @@ import { useAuthPackageContext } from "../../../../hooks/internal/useAuthPackage
 import { axiosClient } from "../../../../api/axiosClient";
 import { useInterval } from "../../../../hooks/internal/useTimer";
 import { showMessage } from "../../../../helpers/show-message";
-const useLoginWithMobileOTP = ({ phone, email, source }) => {
+const useLoginWithMobileOTP = ({ phone, source, memberId }) => {
     const [timer, setTimer] = useState(180);
     const [status, setStatus] = useState('timer');
     const [sessionToken, setSessionToken] = useState('');
@@ -19,7 +19,7 @@ const useLoginWithMobileOTP = ({ phone, email, source }) => {
         axiosClient({
             url: '/auth/login/mobile/v2',
             method: 'POST',
-            data: { phone, email, source },
+            data: { phone, source, memberId },
         }).then((res) => {
             setSessionToken(res.data.sessionToken);
             setStatus('timer');
@@ -28,7 +28,7 @@ const useLoginWithMobileOTP = ({ phone, email, source }) => {
             console.log(err);
             showMessage({ message: err.response.data.errors[0].message || "Verification failed" });
         });
-    }, [phone, email, source]);
+    }, [phone, source, memberId]);
     const verifyOtp = useCallback((otp) => {
         if (!sessionToken) {
             showMessage({ message: "Session expired. Please resend OTP." });
@@ -58,10 +58,10 @@ const useLoginWithMobileOTP = ({ phone, email, source }) => {
         });
     }, [sessionToken]);
     useEffect(() => {
-        if (email && source) {
+        if (memberId && phone && source) {
             sendOtp();
         }
-    }, [email, source, sendOtp]);
+    }, [memberId, phone, source, sendOtp]);
     return {
         timer,
         status,

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

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { VerifyMobileOTP } from '../../components/VerifyMobileOTP';
 import { useLoginWithMobileOTP } from './hooks/internal/useLoginWithMobileOTP';
-const LoginWithMobileOTP = ({ phone, email }) => {
-    const { timer, status, verifyOtp, sendOtp, } = useLoginWithMobileOTP({ phone, email, source: 'web' });
+const LoginWithMobileOTP = ({ phone, memberId }) => {
+    const { timer, status, verifyOtp, sendOtp, } = useLoginWithMobileOTP({ phone, memberId, source: 'web' });
     return (_jsx(VerifyMobileOTP, { timer: timer, phone: phone, status: status, validateOTP: verifyOtp, resendOTP: sendOtp }));
 };
 export default LoginWithMobileOTP;

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

@@ -3,8 +3,8 @@ import { VerifyMobileOTP } from '../../components/VerifyMobileOTP';
 import { useLoginWithMobileOTP } from './hooks/internal/useLoginWithMobileOTP';
 import { Platform } from 'react-native';
 const LoginWithMobileOTP = ({ route }) => {
-    const { phone, email } = route.params;
-    const { timer, status, verifyOtp, sendOtp, } = useLoginWithMobileOTP({ phone, email, source: Platform.OS });
+    const { phone, memberId } = route.params;
+    const { timer, status, verifyOtp, sendOtp, } = useLoginWithMobileOTP({ phone, memberId, source: Platform.OS });
     return (_jsx(VerifyMobileOTP, { timer: timer, phone: phone, status: status, validateOTP: verifyOtp, resendOTP: sendOtp }));
 };
 export default LoginWithMobileOTP;