@truworth/twc-auth 3.0.7 → 3.0.9

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

@@ -0,0 +1,215 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useEffect, useState } from "react";
+import { CDN_IMAGES_URL } from "../../../../constants/cdn-url";
+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 { useNavigator } from "../../../../hooks/useNavigator";
+import ReCAPTCHA from 'react-google-recaptcha';
+import moment from "moment";
+import dayjs from 'dayjs';
+import { RegistrationMethod } from "../../../../enums";
+import { showMessage } from "../../../../helpers/show-message";
+const getQueryParam = (param) => {
+    if (Array.isArray(param))
+        return param[0];
+    return param;
+};
+const isProduction = process.env.NODE_ENV === 'production';
+const SignUpFormComponent = ({ userDetails, onContinue }) => {
+    const [isHuman, setIsHuman] = useState(isProduction ? false : true);
+    const [termsAndConditions, setTermsAndConditions] = useState(false);
+    const [selectedCountry, setSelectedCountry] = useState({ countryCode: "in", phoneCode: "91", name: "INDIA" });
+    const navigator = useNavigator();
+    const routerQuery = navigator.query;
+    const form = useForm({
+        liveValidation: true,
+        defaultValues: {
+            firstName: userDetails.firstName ?? getQueryParam(routerQuery.firstName),
+            lastName: userDetails.lastName ?? getQueryParam(routerQuery.lastName),
+            dateOfBirth: userDetails.selectedDOB,
+            email: userDetails.email ?? "",
+            phone: userDetails.phone ?? "",
+            gender: userDetails.gender ?? "",
+            referralCode: userDetails.referralCode ?? "",
+        }
+    });
+    const values = form.watch();
+    useEffect(() => {
+        const rawMethod = routerQuery.registrationMethod;
+        const registrationMethodFromQuery = Array.isArray(rawMethod) ? rawMethod[0] : rawMethod;
+        if (typeof registrationMethodFromQuery === 'string') {
+            const method = registrationMethodFromQuery.toLowerCase();
+            // Validate that method is a valid RegistrationMethod value
+            const validMethods = Object.values(RegistrationMethod);
+            if (!validMethods.includes(method)) {
+                showMessage({ message: `Invalid registration method: ${method}` });
+                return;
+            }
+            onRegistrationMethodChange(method);
+        }
+    }, [routerQuery.registrationMethod]);
+    const { loading, setGender, setSelectedDOB, phone, setPhone, email, setEmail, setReferralCode, setCountryCode, countryCode, linkedAccounts, registrationMethod, onRegistrationMethodChange, linkedAccountsSheet, showLinkedAccountsSheet, handleFirstNameChange, handleLastNameChange, handleEmailChange, handleMobileChange, handleSubmit, getLoginTypeText, appName, termsAndConditionsUrl } = useSignUp();
+    useEffect(() => {
+        if (!registrationMethod) {
+            const registrationMethodFromQuery = routerQuery.registrationMethod;
+            if (typeof registrationMethodFromQuery === 'string') {
+                const method = registrationMethodFromQuery.toLowerCase();
+                onRegistrationMethodChange(method);
+            }
+        }
+        ;
+    }, [registrationMethod]);
+    useEffect(() => {
+        if (routerQuery.registrationToken) {
+            form.reset({
+                firstName: getQueryParam(routerQuery.firstName) ?? userDetails.firstName,
+                lastName: getQueryParam(routerQuery.lastName) ?? userDetails.lastName,
+            });
+        }
+    }, []);
+    useEffect(() => {
+        if (values.phone || values.email) {
+            if (registrationMethod === RegistrationMethod.MOBILE) {
+                setEmail(values.email);
+            }
+            else {
+                setPhone(values.phone);
+            }
+        }
+    }, [values.phone, values.email, registrationMethod]);
+    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 onGoToLogin = () => {
+        navigator.pushAbsolute('/login');
+    };
+    const onProceed = () => {
+        const params = {
+            firstName: values.firstName,
+            lastName: values.lastName,
+            gender: values.gender,
+            selectedDOB: values.dateOfBirth,
+            referralCode: values.referralCode,
+            email: email.length > 0 ? email : getQueryParam(routerQuery.email) || '',
+            phone: phone.length > 0 ? phone : getQueryParam(routerQuery.phone) || '',
+            countryCode,
+        };
+        onContinue(params);
+    };
+    const isMobileRegistration = registrationMethod === RegistrationMethod.MOBILE;
+    const isDisabled = !values.firstName
+        || !values.lastName
+        || !values.gender
+        || !values.dateOfBirth
+        || (!isMobileRegistration && !values.phone)
+        || !termsAndConditions
+        || !isHuman;
+    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({ onProceed }); },
+                    disabled: isDisabled
+                }, onPressBack: onGoToLogin, children: _jsxs(Form, { form: form, className: "w-full", children: [_jsxs(Row, { gutter: 18, className: "py-0 my-0", children: [_jsx(Col, { xs: 24, md: 12, children: _jsx(Form.Item, { label: "First Name", 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, ''), ...form.register('firstName', {
+                                            onChange: (e) => handleFirstNameChange(e.target.value)
+                                        }), children: _jsx(TextInput, { placeholder: "Enter your first name" }) }) }), _jsx(Col, { xs: 24, md: 12, children: _jsx(Form.Item, { label: "Last Name", 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, ''), ...form.register('lastName', {
+                                            onChange: (e) => handleLastNameChange(e.target.value)
+                                        }), children: _jsx(TextInput, { placeholder: "Enter your last name" }) }) })] }), _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("img", { 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, { className: "mt-4", rules: [
+                                        {
+                                            required: true,
+                                            message: 'Please select your biological sex'
+                                        }
+                                    ], ...form.register('gender', {
+                                        onChange: (e) => setGender(e.target.value)
+                                    }), children: _jsx(RadioGroup, { orientation: "horizontal", options: [
+                                            { label: 'Male', value: 'M' },
+                                            { label: 'Female', value: 'F' },
+                                        ] }) }) }) }), _jsxs(Row, { gutter: 18, className: "py-0 my-5", children: [_jsx(Col, { xs: 24, md: 24, lg: !isMobileRegistration ? 12 : 24, children: _jsx(Form.Item, { label: "Date of Birth", rules: [
+                                            {
+                                                required: true,
+                                                message: 'Please select your date of birth'
+                                            }
+                                        ], ...form.register('dateOfBirth', {
+                                            onChange: (value, dateString) => setSelectedDOB(dateString ?? (value?.toISOString ? value.toISOString() : String(value)))
+                                        }), 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" }) }) }) }), !isMobileRegistration &&
+                                    _jsx(Col, { xs: 24, md: 24, lg: 12, children: _jsx(Form.Item, { label: "Mobile Number", className: "mb-0", rules: [
+                                                {
+                                                    required: true,
+                                                    message: 'Please enter your mobile number'
+                                                }
+                                            ], ...form.register("phone", {
+                                                onChange: (e) => handleMobileChange(e.target.value)
+                                            }), children: _jsx(Flex, { className: "border border-gray-400 rounded-md", children: _jsx(TextInput, { type: "tel", value: 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);
+                                                        } }) }) }) }) })] }), isMobileRegistration &&
+                            _jsx(Col, { children: _jsx(Form.Item, { label: "Enter Your Email (Optional)", className: "mt-4", ...form.register('email', {
+                                        onChange: (e) => handleEmailChange(e.target.value)
+                                    }), children: _jsx(TextInput, { value: email, placeholder: "Enter Your Email (Optional)" }) }) }), _jsx(Col, { children: _jsx(Form.Item, { name: "referralCode", label: "Referral Code (Optional)", className: "mt-6", 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(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 })] }), linkedAccountsSheet &&
+                _jsx(LinkedAccountsSheet, { phone: phone, countryCode: countryCode, visible: linkedAccountsSheet, hide: () => showLinkedAccountsSheet(false), linkedAccounts: linkedAccounts, getLoginTypeText: getLoginTypeText, onGoToLogin: onGoToLogin })] }));
+};
+const LinkedAccountsSheet = ({ visible, hide, linkedAccounts, 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 ", linkedAccounts.length === 1 ? 'account' : `${linkedAccounts.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" }), linkedAccounts.map((item) => {
+                const key = item.memberId ?? 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", 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(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 mt-4", 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,62 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Flex } from "@truworth/twc-web-design";
+import { useEffect, useState } from "react";
+import { AdvancedTransitionWrapper } from "../../../../components/AdvancedTransitionWrapper";
+import { SignUpFormComponent } from "../SignUpForm";
+import CreatePassword from "../../../CreatePassword";
+import UserConsent from "../../../UserConsent";
+import { useNavigator } from "../../../../hooks/useNavigator";
+const SignUpWebComponent = () => {
+    const navigator = useNavigator();
+    const [signUpStep, setSignUpStep] = useState('registration');
+    const [userDetails, setUserDetails] = useState({});
+    const [registrationToken, setRegistrationToken] = useState('');
+    const [fbUserId, setFbUserId] = useState('');
+    const [googleUserId, setGoogleUserId] = useState('');
+    useEffect(() => {
+        const query = navigator.query;
+        const rawRegistrationToken = query.registrationToken;
+        const rawFbUserId = query.fbUserId;
+        const rawGoogleUserId = query.googleUserId;
+        if (typeof rawRegistrationToken === 'string') {
+            setRegistrationToken(rawRegistrationToken);
+        }
+        if (typeof rawFbUserId === 'string') {
+            setFbUserId(rawFbUserId);
+        }
+        if (typeof rawGoogleUserId === 'string') {
+            setGoogleUserId(rawGoogleUserId);
+        }
+    }, [navigator.query.registrationToken]);
+    const renderStep = () => {
+        switch (signUpStep) {
+            case 'registration':
+                return (_jsx(SignUpFormComponent, { userDetails: userDetails, onContinue: (userDetails) => {
+                        if (registrationToken) {
+                            setUserDetails({ ...userDetails, registrationToken, fbUserId, googleUserId });
+                            setSignUpStep('user-consent');
+                            return;
+                        }
+                        setUserDetails({ ...userDetails });
+                        setSignUpStep('create-password');
+                    } }));
+            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, { userDetails: userDetails, handleBack: () => {
+                        if (registrationToken) {
+                            setSignUpStep('registration');
+                            return;
+                        }
+                        setSignUpStep('create-password');
+                    } }));
+            default:
+                return null;
+        }
+    };
+    return (_jsx(AdvancedTransitionWrapper, { type: 'slide', duration: 0.5, children: _jsx(Flex, { direction: 'column', justify: 'center', className: `lg:w-[70%] lg:h-screen mx-auto h-full my-10`, children: renderStep() }) }));
+};
+export { SignUpWebComponent };

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 {};

package/build/src/screens/SignUp/hooks/internal/useSignUp.js

@@ -0,0 +1,134 @@
+import { useMemo, useState } from "react";
+import { validateEmojiRegex } from "../../../../helpers/validation";
+import { showMessage } from "../../../../helpers/show-message";
+import { useAuthPackageContext } from "../../../../hooks/internal/useAuthPackageContext";
+import { RegistrationMethod } from "../../../../enums";
+import { checkMobileExists, checkEmailExists } from "../../../../api/auth";
+/**
+ * @internal
+ * Hook for managing SignUp screen state and auth context integration.
+ */
+const useSignUp = () => {
+    const [loading, setLoading] = useState(false);
+    const [datePicker, showDatePicker] = useState(false);
+    const [linkedAccounts, setLinkedAccounts] = useState([]);
+    const [linkedAccountsSheet, showLinkedAccountsSheet] = useState(false);
+    const [firstName, setFirstName] = useState('');
+    const [lastName, setLastName] = useState('');
+    const [phone, setPhone] = useState('');
+    const [email, setEmail] = useState('');
+    const [gender, setGender] = useState('');
+    const [referralCode, setReferralCode] = useState('');
+    const [selectedDOB, setSelectedDOB] = useState('');
+    const [countryCode, setCountryCode] = useState('91');
+    const [error, setError] = useState({});
+    const { appConfig, registrationMethod, onRegistrationMethodChange } = useAuthPackageContext();
+    /** Initialize default values */
+    const initializeValues = (params) => {
+        setFirstName(params?.firstName || '');
+        setLastName(params?.lastName || '');
+        setCountryCode(params?.countryCode || '91');
+    };
+    /** Validate first name */
+    const handleFirstNameChange = (text) => {
+        text = validateEmojiRegex(text).replace(/[^A-Za-z]/g, '');
+        setFirstName(text);
+    };
+    /** Validate last name */
+    const handleLastNameChange = (text) => {
+        text = validateEmojiRegex(text).replace(/[^A-Za-z]/g, '');
+        setLastName(text);
+    };
+    /** Validate email input */
+    const handleEmailChange = (emailInput) => {
+        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,}))$/;
+        setEmail(emailInput);
+        setError(prev => ({ ...prev, email: !emailRegex.test(emailInput) }));
+    };
+    const handleMobileChange = (mobileInput) => {
+        setPhone(mobileInput);
+        const isNumeric = /^[0-9\b]+$/.test(mobileInput);
+        const isValid = (countryCode === '91' && isNumeric && mobileInput.length === 10) ||
+            (countryCode !== '91' && mobileInput.length > 5);
+        setError((prev) => ({ ...prev, phone: !isValid }));
+    };
+    /** Handle submit for signup */
+    const handleSubmit = async ({ onProceed }) => {
+        setLoading(true);
+        try {
+            if (phone) {
+                const { mobileExist, linkedAccounts = [] } = await checkMobileExists(phone);
+                if (mobileExist) {
+                    setLinkedAccounts(linkedAccounts);
+                    showLinkedAccountsSheet(true);
+                    return;
+                }
+            }
+            if (email) {
+                const { emailExist } = await checkEmailExists(email);
+                if (emailExist) {
+                    showMessage({ message: 'This email is already linked with another user.' });
+                    return;
+                }
+            }
+            onProceed();
+        }
+        catch (err) {
+            const errorMessage = err?.response?.data?.errors?.[0]?.message ?? 'Something went wrong';
+            showMessage({ message: errorMessage });
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    /** Get display text for login type */
+    const getLoginTypeText = (loginType) => {
+        switch (loginType) {
+            case 1: return 'Email';
+            case 2: return 'Google';
+            case 3: return 'Facebook';
+            case 4: return 'Apple';
+            case 5: return 'Microsoft';
+            default: return 'Email';
+        }
+    };
+    /** Disable submit button logic */
+    const disabled = useMemo(() => {
+        const isPhoneInvalid = !phone || error.phone;
+        // Optional email: treat empty as valid; only flag when provided and invalid
+        const isEmailInvalid = email && error.email;
+        return (!firstName
+            || firstName.length < 3
+            || !lastName
+            || lastName.length < 3
+            || !selectedDOB
+            || !gender
+            || (registrationMethod === RegistrationMethod.MOBILE && isEmailInvalid)
+            || (registrationMethod !== RegistrationMethod.MOBILE && isPhoneInvalid));
+    }, [firstName, lastName, selectedDOB, gender, phone, email, error.phone, error.email, registrationMethod]);
+    return {
+        loading,
+        firstName, lastName,
+        gender, setGender,
+        datePicker, showDatePicker,
+        selectedDOB, setSelectedDOB,
+        phone, setPhone,
+        referralCode, setReferralCode,
+        countryCode, setCountryCode,
+        error, setError,
+        email, setEmail,
+        linkedAccounts,
+        linkedAccountsSheet, showLinkedAccountsSheet,
+        handleFirstNameChange, handleLastNameChange,
+        handleEmailChange,
+        handleMobileChange,
+        handleSubmit,
+        getLoginTypeText,
+        disabled,
+        registrationMethod, onRegistrationMethodChange,
+        appName: appConfig.appName,
+        termsAndConditionsUrl: appConfig.termsAndConditionsUrl,
+        initializeValues
+    };
+};
+export { useSignUp };

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

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