@truworth/twc-auth 1.1.0 → 1.2.1

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

@@ -0,0 +1,86 @@
+import { useCallback, useState } from "react";
+import { showMessage } from "../../../../helpers/show-message";
+import { useAuthPackageContext } from "../../../../hooks/internal/useAuthPackageContext";
+import { axiosClient } from "../../../../api/axiosClient";
+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,}))$/;
+/**
+ * @internal
+ * Internal hook for managing EnterEmail screen state and auth context integration. Not exposed to package consumers.
+ */
+const useEnterEmail = () => {
+    const [loading, setLoading] = useState(false);
+    const [isInvalidEmail, setInvalidEmail] = useState(true);
+    const [loginConflictModalVisible, setLoginConflictModalVisible] = useState(false);
+    const [loginType, setLoginType] = useState('');
+    const [email, setEmail] = useState('');
+    const { appConfig, onRegistrationMethodChange } = useAuthPackageContext();
+    const enterEmail = useCallback((text) => {
+        const value = text.toLowerCase().trim();
+        setInvalidEmail(!emailRegex.test(value));
+        setEmail(value);
+    }, [emailRegex]);
+    const handleValidateEmail = ({ onResult }) => {
+        if (loading || isInvalidEmail || !email)
+            return;
+        setLoading(true);
+        axiosClient({
+            url: '/auth/email-exists',
+            method: 'post',
+            data: { email }
+        }).then((res) => {
+            setLoading(false);
+            const code = Number(res.data.loginType);
+            const isKnown = code === 1 || code === 2 || code === 3 || code === 4;
+            if (!isKnown) {
+                showMessage('Unsupported login method. Please try again later.');
+                return;
+            }
+            if (code !== 1) {
+                let providerName = 'your social account';
+                switch (code) {
+                    case 2:
+                        providerName = 'Facebook';
+                        break;
+                    case 3:
+                        providerName = 'Google';
+                        break;
+                    case 4:
+                        providerName = 'Apple';
+                        break;
+                }
+                setLoginType(providerName);
+                setLoginConflictModalVisible(true);
+                return;
+            }
+            onResult({ email, emailExist: true });
+        }).catch(err => {
+            console.log(err);
+            setLoading(false);
+            if (err?.response?.status === 404) {
+                onResult({ email, emailExist: false });
+            }
+            if (err?.response?.status >= 500) {
+                showMessage('Something went wrong');
+            }
+        });
+    };
+    const clearText = useCallback(() => {
+        setEmail('');
+        setInvalidEmail(true);
+    }, []);
+    return {
+        email,
+        appName: appConfig.appName,
+        isInvalidEmail,
+        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}.`,
+    };
+};
+export { useEnterEmail };

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

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Form, TextInput, 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';
+const EnterEmail = ({ onResult }) => {
+    const { loading, email, isInvalidEmail, loginConflictModalVisible, loginConflictErrorTitle, loginConflictErrorDescription, enterEmail, appName, handleValidateEmail, setLoginConflictModalVisible, } = 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({ onResult });
+                        }
+                    },
+                    disabled: isInvalidEmail || loading,
+                }, children: [_jsx(Form, { className: "w-full", form: form, onSubmit: () => {
+                            if (!loading && !isInvalidEmail) {
+                                handleValidateEmail({ onResult });
+                            }
+                        }, 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);
+                                    }
+                                }) }) }) }), loginConflictModalVisible &&
+                        _jsx(LoginConflictModal, { title: loginConflictErrorTitle, primaryLabel: 'Okay', description: loginConflictErrorDescription, visible: loginConflictModalVisible, onProceed: () => setLoginConflictModalVisible(false), onClose: () => setLoginConflictModalVisible(false) })] }), _jsx(SupportDetails, {})] }));
+};
+export default EnterEmail;

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

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Keyboard } from 'react-native';
+import { Layout } from '@ui-kitten/components';
+import { Colors, TextInputField } from '@truworth/twc-rn-common';
+import { useEnterEmail } from './hooks/internal/useEnterEmail';
+import { ScreenLayout } from '../../components/ScreenLayout/index.native';
+import { ConfirmationModal as LoginConflictModal } from '../../components/ConfirmationModal';
+const { utility } = Colors;
+const EnterEmail = ({ navigation }) => {
+    const { loading, email, isInvalidEmail, loginConflictModalVisible, loginConflictErrorTitle, loginConflictErrorDescription, enterEmail, clearText, handleValidateEmail, onRegistrationMethodChange, setLoginConflictModalVisible, } = useEnterEmail();
+    return (_jsxs(Layout, { style: { flex: 1, backgroundColor: '#FFFFFF' }, children: [_jsx(ScreenLayout, { title: "Enter Your Email", buttonProps: {
+                    loading,
+                    label: 'Continue',
+                    onPress: () => {
+                        Keyboard.dismiss();
+                        if (!loading && !isInvalidEmail) {
+                            handleValidateEmail({
+                                onResult: (params) => {
+                                    if (params.emailExist) {
+                                        navigation.navigate('EnterPassword', { email });
+                                    }
+                                    else {
+                                        onRegistrationMethodChange('email');
+                                        navigation.navigate('SignUp', { email });
+                                    }
+                                }
+                            });
+                        }
+                    },
+                    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' })] }));
+};
+export default EnterEmail;

package/build/src/screens/EnterPassword/hooks/internal/useEnterPassword.js

@@ -0,0 +1,47 @@
+import { useCallback, useState } from "react";
+import { useAuthPackageContext } from "../../../../hooks/internal/useAuthPackageContext";
+import { axiosClient } from "../../../../api/axiosClient";
+/**
+ * @internal
+ * Internal hook for managing EnterPassword screen state and auth context integration. Not exposed to package consumers.
+ */
+const useEnterPassword = () => {
+    const [password, setPassword] = useState('');
+    const [isPasswordVisible, setPasswordVisible] = useState(false);
+    const [isInvalidPassword, setInvalidPassword] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const { onTokenChange, onLogin, appConfig } = useAuthPackageContext();
+    const togglePasswordVisibility = useCallback(() => setPasswordVisible(v => !v), []);
+    const handleSubmit = async ({ email, source }) => {
+        setLoading(true);
+        setInvalidPassword(false);
+        axiosClient({
+            url: '/auth/login',
+            method: 'POST',
+            data: { email, password, source },
+        }).then(res => {
+            onTokenChange(res.data.token);
+            onLogin(res.data);
+        }).catch(err => {
+            if (err?.response?.status === 400) {
+                setInvalidPassword(true);
+            }
+        }).finally(() => {
+            setLoading(false);
+        });
+    };
+    const onPassword = useCallback((text) => {
+        setPassword(text);
+        if (isInvalidPassword)
+            setInvalidPassword(false);
+    }, [isInvalidPassword]);
+    return {
+        loading,
+        password, setPassword,
+        isPasswordVisible, togglePasswordVisibility,
+        isInvalidPassword, setInvalidPassword,
+        handleSubmit, onPassword,
+        appName: appConfig.appName,
+    };
+};
+export { useEnterPassword };

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

@@ -0,0 +1,22 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Form, PasswordInput, Typography, useForm } from '@truworth/twc-web-design';
+import { ScreenLayout } from "../../components/ScreenLayout";
+import { useEnterPassword } from './hooks/internal/useEnterPassword';
+import { SupportDetails } from '../../components/SupportDetails';
+const EnterPassword = ({ email, onPressBack }) => {
+    const { loading, password, isInvalidPassword, handleSubmit, onPassword, appName } = useEnterPassword();
+    const form = useForm({ defaultValues: { password } });
+    return (_jsxs(_Fragment, { children: [_jsx(ScreenLayout, { title: `Hi, Welcome To ${appName}!`, subTitle: email, buttonProps: {
+                    loading,
+                    label: 'Continue',
+                    onClick: () => { if (email)
+                        handleSubmit({ email, source: 'web' }); },
+                    disabled: !password || !email || loading,
+                }, onPressBack: onPressBack, children: _jsx(Form, { className: "w-full", form: form, onSubmit: () => { if (email)
+                        handleSubmit({ email, source: 'web' }); }, children: _jsx(Form.Item, { name: "password", label: "Password", description: isInvalidPassword &&
+                            _jsx(Typography, { type: "body", size: "small", className: "h-1", color: "text-utility-danger-main", children: "Email and password do not match!" }), children: _jsx(PasswordInput, { placeholder: "Enter your password", value: password, showStrengthIndicator: false, className: `border rounded-md px-3 py-2 
+                                ${isInvalidPassword ? "border-red-500" : "border-gray-300"}`, ...form.register('password', {
+                                onChange: (e) => onPassword(e.target.value)
+                            }) }) }) }) }), _jsx(SupportDetails, {})] }));
+};
+export default EnterPassword;

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

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { TextInputField } from '@truworth/twc-rn-common';
+import { Layout } from '@ui-kitten/components';
+import { ScreenLayout } from '../../components/ScreenLayout/index.native';
+import { useEnterPassword } from './hooks/internal/useEnterPassword';
+const EnterPassword = ({ route }) => {
+    const { email } = route.params;
+    const { loading, password, isPasswordVisible, togglePasswordVisibility, isInvalidPassword, handleSubmit, onPassword } = useEnterPassword();
+    return (_jsx(Layout, { style: { flex: 1, backgroundColor: '#FFFFFF' }, children: _jsx(ScreenLayout, { title: "Enter Your Password", buttonProps: {
+                loading,
+                label: 'Continue',
+                onPress: () => { if (email)
+                    handleSubmit({ email, source: 'web' }); },
+                disabled: password.length == 0 || isInvalidPassword || loading,
+            }, children: _jsx(View, { style: { position: 'relative' }, children: _jsx(TextInputField, { placeholder: 'Enter password...', onChangeValue: onPassword, secureTextEntry: !isPasswordVisible, value: password, rightIcon2: isPasswordVisible
+                        ? 'eye-outline'
+                        : 'eye-off-outline', onPressRightIcon2: () => togglePasswordVisibility(), error: {
+                        show: isInvalidPassword,
+                        message: isInvalidPassword ? 'Email and password do not match!' : ''
+                    }, autoFocus: true }) }) }) }));
+};
+export default EnterPassword;

package/build/src/screens/EnterPassword/types.js

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

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

@@ -0,0 +1,44 @@
+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 EnterEmail from '../../../EnterEmail/index';
+import EnterPassword from '../../../EnterPassword/index';
+const LoginWebComponent = () => {
+    const [email, setEmail] = useState('');
+    const [loginState, setLoginState] = useState('EnterEmail');
+    const { LogoComponent } = useAuthPackageContext();
+    const router = useRouter();
+    const onRedirectToPassword = (email) => {
+        setEmail(email);
+        setLoginState('EnterPassword');
+    };
+    const onRedirectToSignUp = (email) => {
+        router.push({
+            pathname: '/registration',
+            query: { email, registrationMethod: 'email' }
+        });
+    };
+    const renderStep = () => {
+        switch (loginState) {
+            case 'EnterEmail':
+                return (_jsx(EnterEmail, { onResult: (params) => {
+                        if (params.emailExist) {
+                            onRedirectToPassword(params.email);
+                        }
+                        else {
+                            onRedirectToSignUp(params.email);
+                        }
+                    } }));
+            case 'EnterPassword':
+                return (_jsx(EnterPassword, { email: email, onPressBack: () => setLoginState('EnterEmail') }));
+            default:
+                return null;
+        }
+    };
+    return (_jsx(AdvancedTransitionWrapper, { type: 'slide', duration: 0.5, children: _jsxs(Flex, { direction: 'column', justify: 'center', style: { width: '70%' }, className: `lg:w-[70%] lg:h-screen mx-auto h-full my-10`, children: [React.isValidElement(LogoComponent)
+                    && LogoComponent, renderStep()] }) }));
+};
+export { LoginWebComponent };

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

@@ -0,0 +1,6 @@
+const LoginWebComponent = () => {
+    if (__DEV__)
+        console.warn("[@truworth/twc-auth] LoginWebComponent is web-only");
+    return null;
+};
+export { LoginWebComponent };

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

@@ -0,0 +1,10 @@
+'use client';
+const Login = () => {
+    if (process.env.NODE_ENV !== 'production') {
+        if (typeof window !== 'undefined') {
+            console.warn("[@truworth/twc-auth] We use only LoginWebComponent for login");
+        }
+    }
+    return null;
+};
+export default Login;

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

@@ -0,0 +1,6 @@
+const Login = () => {
+    if (__DEV__)
+        console.warn("[@truworth/twc-auth] we use only LoginWebComponent for login");
+    return null;
+};
+export default Login;

package/build/src/screens/SignUp/components/SignUpForm/index.js

@@ -0,0 +1,181 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import Image from "next/image";
+import React, { useEffect, useState } from "react";
+import { CDN_IMAGES_URL } from "@truworth/twc-web-common";
+import { Button, Col, CustomCheckbox, DatePicker, Flex, Form, RadioGroup, ResponsiveModal, Row, TextInput, Typography, useForm, validationPatterns } from "@truworth/twc-web-design";
+import { CalendarDays } from "lucide-react";
+import { SupportDetails } from "../../../../components/SupportDetails";
+import { ScreenLayout } from "../../../../components/ScreenLayout";
+import { CountryCodeDropdown } from "../../../CountryCode/components/CountryCodeDropdown";
+import { useSignUp } from "../../hooks/internal/useSignUp";
+import ReCAPTCHA from 'react-google-recaptcha';
+import moment from "moment";
+import dayjs from 'dayjs';
+const isProduction = process.env.NODE_ENV === 'production';
+const SignUpFormComponent = ({ email, registrationMethod, userDetails, onContinue, onGoToLogin }) => {
+    const [isHuman, setIsHuman] = useState(isProduction ? false : true);
+    const [termsAndConditions, setTermsAndConditions] = useState(false);
+    const [selectedCountry, setSelectedCountry] = useState({
+        countryCode: "in",
+        phoneCode: "91",
+        name: "INDIA",
+    });
+    const form = useForm({
+        liveValidation: true,
+        defaultValues: {
+            firstName: userDetails.firstName ?? "",
+            lastName: userDetails.lastName ?? "",
+            dateOfBirth: userDetails.selectedDOB,
+            phone: userDetails.phone ?? "",
+            gender: userDetails.gender ?? "",
+            referralCode: userDetails.referralCode ?? "",
+        }
+    });
+    const values = form.watch();
+    const { loading, setGender, setSelectedDOB, phone, setPhone, setEmail, setReferralCode, setCountryCode, countryCode, setIsPhoneValid, existingAccounts, existingAccountModal, setExistingAccountModal, onFirstName, onLastName, handleSubmit, getLoginTypeText, appName, termsAndConditionsUrl, } = useSignUp();
+    useEffect(() => {
+        if (values.phone) {
+            setPhone(values.phone);
+            setEmail(email);
+        }
+    }, [values.phone]);
+    const disabledDate = (current) => {
+        const currentDate = dayjs(current);
+        if (!currentDate.isValid()) {
+            return false;
+        }
+        const thirteenYearsAgo = dayjs().subtract(13, 'years');
+        const oldestAllowedDate = dayjs('1900-01-01');
+        return currentDate.isAfter(thirteenYearsAgo) || currentDate.isBefore(oldestAllowedDate);
+    };
+    const handleCaptcha = (value) => {
+        setIsHuman(Boolean(value));
+    };
+    const enterMobile = (text) => {
+        const digits = String(text).replace(/\D/g, '');
+        setPhone(digits);
+        if (countryCode === "91") {
+            setIsPhoneValid(/^\d{10}$/.test(digits));
+        }
+        else {
+            setIsPhoneValid(digits.length > 5);
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(ScreenLayout, { title: "Looks like you're new here!", subTitle: "Tell us more about you so we can set up your account.", buttonProps: {
+                    loading,
+                    label: 'Continue',
+                    onClick: () => {
+                        handleSubmit({
+                            onResult: () => {
+                                onContinue({
+                                    firstName: values.firstName,
+                                    lastName: values.lastName,
+                                    gender: values.gender,
+                                    selectedDOB: values.dateOfBirth,
+                                    referralCode: values.referralCode,
+                                    email: email,
+                                    phone,
+                                    countryCode,
+                                    registrationMethod,
+                                });
+                            }
+                        });
+                    },
+                    disabled: !values.firstName || !values.lastName || !values.gender || !values.dateOfBirth || !values.phone || !termsAndConditions || !isHuman
+                }, onPressBack: onGoToLogin, children: _jsxs(Form, { form: form, className: "w-full", onSubmit: () => { }, children: [_jsxs(Row, { gutter: 18, className: "py-0 my-0", children: [_jsx(Col, { xs: 24, md: 12, children: _jsx(Form.Item, { name: "firstName", label: "First Name", className: 'mt-5', rules: [
+                                            {
+                                                required: true,
+                                                message: 'Please enter your first name'
+                                            },
+                                            {
+                                                pattern: validationPatterns.nameOnly,
+                                                message: 'Name can only contain letters'
+                                            },
+                                            {
+                                                validator: async (_, value) => {
+                                                    if (value && value.length < 3) {
+                                                        throw new Error('Name must be at least 3 characters');
+                                                    }
+                                                },
+                                            },
+                                        ], normalize: (value) => (value ?? '').replace(/[^a-zA-Z]/g, ''), children: _jsx(TextInput, { placeholder: "Enter your first name", ...form.register('firstName', {
+                                                onChange: (e) => onFirstName(e.target.value)
+                                            }) }) }) }), _jsx(Col, { xs: 24, md: 12, children: _jsx(Form.Item, { name: "lastName", label: "Last Name", className: 'mt-5', rules: [
+                                            {
+                                                required: true,
+                                                message: 'Please enter your last name'
+                                            },
+                                            {
+                                                pattern: validationPatterns.nameOnly,
+                                                message: 'Name can only contain letters'
+                                            },
+                                            {
+                                                validator: async (_, value) => {
+                                                    if (value && value.length < 3) {
+                                                        throw new Error('Name must be at least 3 characters');
+                                                    }
+                                                },
+                                            },
+                                        ], normalize: (value) => (value ?? '').replace(/[^a-zA-Z]/g, ''), children: _jsx(TextInput, { placeholder: "Enter your last name", ...form.register('lastName', {
+                                                onChange: (e) => onLastName(e.target.value)
+                                            }) }) }) })] }), _jsxs(Row, { gutter: 18, className: "py-0 mt-4 relative", children: [_jsx(Col, { xs: 18, md: 19, children: _jsx(Typography, { type: "body", size: "large", className: "text-gray-700", children: "Your biological sex at the time of birth" }) }), _jsxs(Col, { xs: 6, md: 5, className: "flex justify-end group", children: [_jsx(Typography, { type: "body", size: "large", className: "text-primary cursor-pointer whitespace-nowrap", children: "Know More" }), _jsxs(Flex, { className: "hidden group-hover:block w-full absolute left-2 top-6 rounded-md p-4 z-10 text-gray-950 bg-white shadow-[0_0_10px_0_rgba(0,0,0,0.3)]", children: [_jsxs(Flex, { className: "p-0 mb-3 gap-3", children: [_jsx(Image, { src: `${CDN_IMAGES_URL}/registration/gender-diversity.svg`, alt: "gender diversity", width: 44, height: 44, className: "h-auto" }), _jsxs(Typography, { type: "body", size: "large", className: "text-gray-800", children: ["The ", appName, " respects Gender Diversity & Inclusion!"] })] }), _jsxs(Typography, { type: "body", size: "small", className: "text-gray-500", children: [appName, " aims to provide you with a personalized wellness experience. This requires us to incorporate certain algorithms based on protocols provided by established health & medical institutions around the world. These protocols are based on your biological sex at birth."] })] })] })] }), _jsx(Row, { className: "py-0 mb-5", children: _jsx(Col, { children: _jsx(Form.Item, { name: "gender", className: "mt-4", rules: [
+                                        {
+                                            required: true,
+                                            message: 'Please select your biological sex'
+                                        }
+                                    ], children: _jsx(RadioGroup, { orientation: "horizontal", options: [
+                                            { label: 'Male', value: 'M' },
+                                            { label: 'Female', value: 'F' },
+                                        ], ...form.register('gender', {
+                                            onChange: (e) => setGender(e.target.value)
+                                        }) }) }) }) }), _jsxs(Row, { gutter: 18, className: "py-0 my-5", children: [_jsx(Col, { xs: 24, md: 24, lg: 12, children: _jsx(Form.Item, { name: "dateOfBirth", label: "Date of Birth", rules: [
+                                            {
+                                                required: true,
+                                                message: 'Please select your date of birth'
+                                            }
+                                        ], children: _jsx(DatePicker, { required: true, size: "middle", format: "dd/MM/yyyy", placeholder: "DD/MM/YYYY", 
+                                            /* @ts-ignore */
+                                            disabledDate: disabledDate, iconPosition: "right", defaultPickerValue: dayjs('1990-01-01').toDate(), suffixIcon: _jsx(CalendarDays, { className: "-mt-2" }), ...form.register('dateOfBirth', {
+                                                onChange: (value, dateString) => setSelectedDOB(dateString ?? (value?.toISOString ? value.toISOString() : String(value)))
+                                            }) }) }) }), _jsx(Col, { xs: 24, md: 24, lg: 12, children: _jsx(Form.Item, { label: "Mobile Number", className: "mb-0", name: "phone", rules: [
+                                            {
+                                                required: true,
+                                                message: 'Please enter your mobile number'
+                                            }
+                                        ], children: _jsx(Flex, { className: "border border-gray-400 rounded-md", children: _jsx(TextInput, { type: "tel", value: values.phone, placeholder: "Mobile number", maxLength: countryCode === "91" ? 10 : 14, className: "py-4 border-0 md:text-base", addonBefore: _jsx(CountryCodeDropdown, { selectedCountry: selectedCountry, handleSelect: (country) => {
+                                                        setCountryCode(country.phoneCode);
+                                                        setSelectedCountry(country);
+                                                        setIsPhoneValid(country.phoneCode === "91"
+                                                            ? /^[0-9]+$/.test(phone) && phone.length >= 10
+                                                            : phone.length > 5);
+                                                    } }), ...form.register("phone", {
+                                                    onChange: (e) => enterMobile(e.target.value)
+                                                }) }) }) }) })] }), _jsx(Col, { children: _jsx(Form.Item, { name: "referralCode", label: "Referral Code (Optional)", className: "mt-4", children: _jsx(TextInput, { placeholder: "Referral code", ...form.register('referralCode', {
+                                        onChange: (e) => setReferralCode(e.target.value)
+                                    }) }) }) }), isProduction && (process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY
+                            ? _jsx(RecaptchaComponent, { onChange: handleCaptcha })
+                            : _jsx(Typography, { type: "utility", size: "small", color: "red-600", children: "reCAPTCHA misconfigured. Set NEXT_PUBLIC_RECAPTCHA_SITE_KEY." })), _jsx(Row, { className: "py-0 my-5", children: _jsx(Col, { children: _jsx(Form.Item, { name: "termsAndConditions", rules: [
+                                        {
+                                            required: true,
+                                            message: 'Please accept the Terms & Conditions'
+                                        }
+                                    ], 
+                                    /* @ts-ignore */
+                                    valuePropName: "checked", children: _jsx(CustomCheckbox, { checked: termsAndConditions, onClick: (e) => {
+                                            setTermsAndConditions(prev => !prev);
+                                        }, className: "mt-4", label: _jsxs(Typography, { type: "body", size: "medium", children: ["I accept the", _jsx("a", { target: "_blank", rel: "noopener noreferrer", href: termsAndConditionsUrl, className: "px-1 text-primary", children: "Terms & Conditions" }), "listed on ", appName] }) }) }) }) })] }) }), _jsxs(Flex, { align: 'center', className: 'p-0 mt-4', children: [_jsx(Typography, { type: "body", size: "large", className: "text-gray-700", children: "Already have an account?" }), _jsx(Button, { label: "Sign-In", variant: "link", size: "medium", className: "ml-2 h-auto px-0", onClick: onGoToLogin })] }), existingAccountModal &&
+                _jsx(ExistingAccountsModal, { phone: phone, countryCode: countryCode, visible: existingAccountModal, hide: () => setExistingAccountModal(false), existingAccounts: existingAccounts, getLoginTypeText: getLoginTypeText, onGoToLogin: onGoToLogin })] }));
+};
+const ExistingAccountsModal = ({ visible, hide, existingAccounts, countryCode, phone, getLoginTypeText, onGoToLogin }) => {
+    return (_jsxs(ResponsiveModal, { open: visible, onClose: hide, onOpenChange: hide, title: _jsxs(_Fragment, { children: [_jsx(Typography, { type: "heading", size: "h6", children: "Mobile Number Already Linked" }), _jsxs(Typography, { type: "utility", size: "medium", color: "gray-600", className: "mt-2 mb-3", children: ["The mobile number +", countryCode, " ", String(phone).replace(/\d(?=\d{2})/g, 'X'), " is linked to the following ", existingAccounts.length === 1 ? 'account' : `${existingAccounts.length} accounts`, "."] }), _jsx("hr", {})] }), centered: true, showCloseButton: false, className: "px-0", footer: _jsxs(Flex, { direction: "column", children: [_jsx(Button, { isFullWidth: true, variant: "primary", label: "Go to Login", onClick: () => {
+                        onGoToLogin();
+                        hide();
+                    }, className: "!ml-0 mb-[-4px]" }), _jsx(SupportDetails, {})] }), children: [_jsx(Typography, { type: "utility", size: "medium", children: "Please login through any of the below account or contact our support team for assistance" }), existingAccounts.map((item) => {
+                const key = item.id ?? item.email ?? `${item.loginType}-${item.createdOn}`;
+                return (_jsxs(Flex, { direction: "column", className: "border border-gray-300 p-4 rounded-md mt-3", children: [_jsxs(Flex, { direction: "column", className: "border-b-2 pb-2", children: [_jsx(Typography, { type: "utility", size: "large", children: item.name }), _jsx(Typography, { type: "utility", size: "medium", color: "primary", children: item.email })] }), _jsxs(Flex, { justify: "between", className: "mt-3", children: [_jsx(Typography, { type: "utility", size: "medium", color: "gray-700", children: "Login Type" }), _jsx(Typography, { type: "utility", size: "medium", color: "gray-800", children: getLoginTypeText(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: moment(item.createdOn).format('DD/MM/YYYY') })] })] }, key));
+            })] }));
+};
+const RecaptchaComponent = React.memo(({ onChange }) => {
+    return (_jsx(Row, { gutter: 10, children: _jsx(Col, { span: 24, children: _jsx(ReCAPTCHA, { className: "g-recaptcha", sitekey: process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY || '', onChange: (token) => onChange(token ?? ''), onExpired: () => onChange(''), onErrored: () => onChange(''), size: "normal" }) }) }));
+});
+export { SignUpFormComponent };

package/build/src/screens/SignUp/components/SignUpForm/index.native.js

@@ -0,0 +1,6 @@
+const SignUpForm = () => {
+    if (__DEV__)
+        console.warn("[@truworth/twc-auth] SignUpWebComponent is web-only");
+    return null;
+};
+export { SignUpForm };

package/build/src/screens/SignUp/components/SignUpForm/type.js

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

package/build/src/screens/SignUp/components/SignUpWebComponent/index.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Flex, ResponsiveModal } from "@truworth/twc-web-design";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+import { AdvancedTransitionWrapper } from "../../../../components/AdvancedTransitionWrapper";
+import { useAuthPackageContext } from "../../../../hooks/internal/useAuthPackageContext";
+import { SignUpFormComponent } from "../SignUpForm";
+import CreatePassword from "../../../CreatePassword";
+import UserConsent from "../../../UserConsent";
+import VerifyMobile from "../../../VerifyMobile";
+import VerifyEmail from "../../../VerifyEmail";
+const SignUpWebComponent = () => {
+    const router = useRouter();
+    const [email, setEmail] = useState('');
+    const [signUpStep, setSignUpStep] = useState('registration');
+    const [userDetails, setUserDetails] = useState({});
+    const [registrationParams, setRegistrationParams] = useState({});
+    const [showVerifyMobileModal, setShowVerifyMobileModal] = useState(false);
+    const [showVerifyEmailModal, setShowVerifyEmailModal] = useState(false);
+    const { onRegistrationMethodChange, registrationMethod } = useAuthPackageContext();
+    useEffect(() => {
+        const rawEmail = router.query.email;
+        const rawMethod = router.query.registrationMethod;
+        const emailFromQuery = Array.isArray(rawEmail) ? rawEmail[0] : rawEmail;
+        const registrationMethodFromQuery = Array.isArray(rawMethod) ? rawMethod[0] : rawMethod;
+        const isValidEmail = (val) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val);
+        if (typeof emailFromQuery === 'string') {
+            if (isValidEmail(emailFromQuery)) {
+                setEmail(emailFromQuery);
+            }
+            else {
+                console.warn('Ignoring invalid email in query:', emailFromQuery);
+            }
+        }
+        if (typeof registrationMethodFromQuery === 'string') {
+            const method = registrationMethodFromQuery.toLowerCase();
+            if (method === 'email' || method === 'mobile') {
+                onRegistrationMethodChange(method);
+            }
+        }
+    }, [router.query.email, router.query.registrationMethod, onRegistrationMethodChange]);
+    const onGoToLogin = () => {
+        router.push('/login');
+    };
+    const renderStep = () => {
+        switch (signUpStep) {
+            case 'registration':
+                return (_jsx(SignUpFormComponent, { email: email, userDetails: userDetails, registrationMethod: registrationMethod, onContinue: (userDetails) => {
+                        setUserDetails(userDetails);
+                        setSignUpStep('create-password');
+                    }, onGoToLogin: onGoToLogin }));
+            case 'create-password':
+                return userDetails && (_jsx(CreatePassword, { userDetails: userDetails, handleBack: () => setSignUpStep('registration'), onContinue: (password, confirmPassword) => {
+                        setUserDetails({ ...userDetails, password, confirmPassword });
+                        setSignUpStep('user-consent');
+                    } }));
+            case 'user-consent':
+                return (_jsx(UserConsent, { routeParams: userDetails, onBackHandler: () => setSignUpStep('create-password'), onVerifyEmail: ({ email, phone, sessionToken }) => {
+                        setRegistrationParams({ email, phone, sessionToken });
+                        setShowVerifyEmailModal(true);
+                    }, onVerifyMobile: ({ phone, sessionToken }) => {
+                        setRegistrationParams({ phone, sessionToken });
+                        setShowVerifyMobileModal(true);
+                    } }));
+            default:
+                return null;
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(AdvancedTransitionWrapper, { type: 'slide', duration: 0.5, children: _jsx(Flex, { direction: 'column', justify: 'center', style: { width: '70%' }, className: `lg:w-[70%] lg:h-screen mx-auto h-full my-10`, children: renderStep() }) }), showVerifyMobileModal &&
+                _jsx(VerifyMobileModal, { visible: showVerifyMobileModal, hide: () => setShowVerifyMobileModal(false), sessionToken: registrationParams?.sessionToken || '', phone: registrationParams?.phone || '' }), showVerifyEmailModal &&
+                _jsx(VerifyEmailModal, { email: email, visible: showVerifyEmailModal, hide: () => setShowVerifyEmailModal(false), sessionToken: registrationParams?.sessionToken || '', onVerifiedOTP: () => {
+                        setShowVerifyEmailModal(false);
+                        setShowVerifyMobileModal(true);
+                    } })] }));
+};
+export { SignUpWebComponent };
+const VerifyMobileModal = ({ visible, hide, sessionToken, phone }) => {
+    return (_jsx(ResponsiveModal, { title: 'Verify Mobile', open: visible, onClose: hide, onOpenChange: hide, maskClosable: false, showCloseButton: false, children: _jsx(VerifyMobile, { sessionToken: sessionToken, phone: phone }) }));
+};
+const VerifyEmailModal = ({ visible, hide, sessionToken, email, onVerifiedOTP }) => {
+    return (_jsx(ResponsiveModal, { title: 'Verify Email', open: visible, onOpenChange: hide, onClose: hide, maskClosable: false, showCloseButton: false, children: _jsx(VerifyEmail, { email: email, sessionToken: sessionToken, onVerifiedOTP: onVerifiedOTP }) }));
+};

package/build/src/screens/SignUp/components/SignUpWebComponent/index.native.js

@@ -0,0 +1,6 @@
+const SignUpWebComponent = () => {
+    if (__DEV__)
+        console.warn("[@truworth/twc-auth] SignUpWebComponent is web-only");
+    return null;
+};
+export { SignUpWebComponent };

package/build/src/screens/SignUp/components/SignUpWebComponent/types.js

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