@truworth/twc-auth 1.2.3 → 1.2.5

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

@@ -1,44 +1,85 @@
 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 { 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 { useRouter } from "next/router";
 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 = ({ email, registrationMethod, userDetails, onContinue, onGoToLogin }) => {
+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 [selectedCountry, setSelectedCountry] = useState({ countryCode: "in", phoneCode: "91", name: "INDIA" });
+    const router = useRouter();
     const form = useForm({
         liveValidation: true,
         defaultValues: {
             firstName: userDetails.firstName ?? "",
             lastName: userDetails.lastName ?? "",
             dateOfBirth: userDetails.selectedDOB,
+            email: userDetails.email ?? "",
             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);
+        const rawMethod = router.query.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);
+        }
+    }, [router.query.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 = router.query.registrationMethod;
+            if (typeof registrationMethodFromQuery === 'string') {
+                const method = registrationMethodFromQuery.toLowerCase();
+                onRegistrationMethodChange(method);
+            }
+        }
+        ;
+    }, [registrationMethod]);
+    useEffect(() => {
+        if (router.query.registrationToken) {
+            form.reset({
+                firstName: getQueryParam(router.query.firstName) ?? userDetails.firstName,
+                lastName: getQueryParam(router.query.lastName) ?? userDetails.lastName,
+            });
+        }
+    }, []);
+    useEffect(() => {
+        if (values.phone || values.email) {
+            if (registrationMethod === RegistrationMethod.MOBILE) {
+                setEmail(values.email);
+            }
+            else {
+                setPhone(values.phone);
+            }
         }
-    }, [values.phone]);
+    }, [values.phone, values.email, registrationMethod]);
     const disabledDate = (current) => {
         const currentDate = dayjs(current);
         if (!currentDate.isValid()) {
@@ -51,38 +92,36 @@ const SignUpFormComponent = ({ email, registrationMethod, userDetails, onContinu
     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);
-        }
+    const onGoToLogin = () => {
+        router.push('/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(router.query.email) || '',
+            phone: phone.length > 0 ? phone : getQueryParam(router.query.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({
-                            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, { label: "First Name", className: 'mt-5', rules: [
+                    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'
@@ -99,8 +138,8 @@ const SignUpFormComponent = ({ email, registrationMethod, userDetails, onContinu
                                                 },
                                             },
                                         ], normalize: (value) => (value ?? '').replace(/[^a-zA-Z]/g, ''), ...form.register('firstName', {
-                                            onChange: (e) => onFirstName(e.target.value)
-                                        }), children: _jsx(TextInput, { placeholder: "Enter your first name" }) }) }), _jsx(Col, { xs: 24, md: 12, children: _jsx(Form.Item, { label: "Last Name", className: 'mt-5', rules: [
+                                            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'
@@ -117,8 +156,8 @@ const SignUpFormComponent = ({ email, registrationMethod, userDetails, onContinu
                                                 },
                                             },
                                         ], normalize: (value) => (value ?? '').replace(/[^a-zA-Z]/g, ''), ...form.register('lastName', {
-                                            onChange: (e) => onLastName(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(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, { className: "mt-4", rules: [
+                                            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'
@@ -128,7 +167,7 @@ const SignUpFormComponent = ({ email, registrationMethod, userDetails, onContinu
                                     }), 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: 12, children: _jsx(Form.Item, { label: "Date of Birth", rules: [
+                                        ] }) }) }) }), _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'
@@ -137,35 +176,37 @@ const SignUpFormComponent = ({ email, registrationMethod, userDetails, onContinu
                                             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" }) }) }) }), _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) => enterMobile(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);
-                                                        setIsPhoneValid(country.phoneCode === "91"
-                                                            ? /^[0-9]+$/.test(phone) && phone.length >= 10
-                                                            : phone.length > 5);
-                                                    } }) }) }) }) })] }), _jsx(Col, { children: _jsx(Form.Item, { name: "referralCode", label: "Referral Code (Optional)", className: "mt-4", children: _jsx(TextInput, { placeholder: "Referral code", ...form.register('referralCode', {
+                                            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 })] }), existingAccountModal &&
-                _jsx(ExistingAccountsModal, { phone: phone, countryCode: countryCode, visible: existingAccountModal, hide: () => setExistingAccountModal(false), existingAccounts: existingAccounts, getLoginTypeText: getLoginTypeText, onGoToLogin: onGoToLogin })] }));
+                                    }, 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 })] }));
 };
-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();
+const LinkedAccountsSheet = ({ visible, hide, linkedAccounts, countryCode, phone, getLoginTypeText }) => {
+    const router = useRouter();
+    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: () => {
+                        router.push('/login');
                         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));
+                    }, 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 }) => {

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

@@ -1,82 +1,51 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Flex, ResponsiveModal } from "@truworth/twc-web-design";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Flex } 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();
+    const [registrationToken, setRegistrationToken] = useState('');
     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);
-            }
+        const rawRegistrationToken = router.query.registrationToken;
+        if (typeof rawRegistrationToken === 'string') {
+            setRegistrationToken(rawRegistrationToken);
         }
-        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');
-    };
+    }, [router.query.registrationToken]);
     const renderStep = () => {
         switch (signUpStep) {
             case 'registration':
-                return (_jsx(SignUpFormComponent, { email: email, userDetails: userDetails, registrationMethod: registrationMethod, onContinue: (userDetails) => {
-                        setUserDetails(userDetails);
+                return (_jsx(SignUpFormComponent, { userDetails: userDetails, onContinue: (userDetails) => {
+                        if (registrationToken) {
+                            setUserDetails({ ...userDetails, registrationToken });
+                            setSignUpStep('user-consent');
+                            return;
+                        }
+                        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);
+                return (_jsx(UserConsent, { userDetails: userDetails, handleBack: () => {
+                        if (registrationToken) {
+                            setSignUpStep('registration');
+                            return;
+                        }
+                        setSignUpStep('create-password');
                     } }));
             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);
-                    } })] }));
+    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 };
-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/hooks/internal/useSignUp.js

@@ -1,101 +1,87 @@
 import { useMemo, useState } from "react";
 import { validateEmojiRegex } from "../../../../helpers/Validation";
-import { axiosClient } from "../../../../api/axiosClient";
 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.
-* This hook is not exposed to package consumers.
-*/
+ * @internal
+ * Hook for managing SignUp screen state and auth context integration.
+ */
 const useSignUp = () => {
     const [loading, setLoading] = useState(false);
     const [datePicker, showDatePicker] = useState(false);
-    const [isPhoneValid, setIsPhoneValid] = useState(false);
-    const [existingAccountModal, setExistingAccountModal] = 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 [phoneError, setPhoneError] = useState(false);
-    const [email, setEmail] = useState('');
-    const [emailLinkedError, setEmailLinkedError] = useState('');
-    const [existingAccounts, setExistingAccounts] = useState([]);
-    const { appConfig, registrationMethod } = useAuthPackageContext();
-    const onFirstName = (text) => {
+    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);
     };
-    const onLastName = (text) => {
+    /** Validate last name */
+    const handleLastNameChange = (text) => {
         text = validateEmojiRegex(text).replace(/[^A-Za-z]/g, '');
-        ;
         setLastName(text);
     };
-    const handleEmail = (text) => {
-        let reg = /^(([^<>()\[\]\\.,;:\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,}))$/;
-        if (text.length === 0) {
-            setEmailLinkedError('');
-        }
-        else if (reg.test(text) === false) {
-            setEmailLinkedError('Invalid email');
-        }
-        else {
-            setEmailLinkedError('');
-        }
-        setEmail(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 }));
     };
-    const handleSubmit = ({ onResult }) => {
-        if (registrationMethod === 'email' && countryCode === '91') {
-            setLoading(true);
-            axiosClient({
-                url: '/auth/mobile-exists',
-                method: 'POST',
-                data: { phone }
-            }).then(res => {
-                setLoading(false);
-                if (res?.data?.exists) {
-                    setExistingAccounts(res?.data?.memberDetails || []);
-                    setExistingAccountModal(true);
+    /** 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;
                 }
-                onResult();
-            }).catch(err => onHandleError(err, onResult));
-        }
-        else if (registrationMethod === 'mobile' && email) {
-            setLoading(true);
-            axiosClient({
-                url: '/auth/email-exists',
-                method: 'POST',
-                data: { email }
-            }).then(() => {
-                setLoading(false);
-                setEmailLinkedError('This email is already linked with another user.');
-            }).catch(err => onHandleError(err, onResult));
-        }
-        else {
-            onResult();
-        }
-    };
-    const onHandleError = (err, onResult) => {
-        setLoading(false);
-        const status = err?.response?.status;
-        if (!status) {
-            return showMessage({ message: 'Network error. Please try again.' });
-        }
-        if (status === 404) {
-            return onResult();
+            }
+            if (email) {
+                const { emailExist } = await checkEmailExists(email);
+                if (emailExist) {
+                    showMessage({ message: 'This email is already linked with another user.' });
+                    return;
+                }
+            }
+            onProceed();
         }
-        if (status === 400) {
-            return showMessage({ message: err?.response?.data?.errors?.[0]?.message ?? 'Something went wrong' });
+        catch (err) {
+            const errorMessage = err?.response?.data?.errors?.[0]?.message ?? 'Something went wrong';
+            showMessage({ message: errorMessage });
         }
-        if (typeof status === 'number' && status >= 500) {
-            return showMessage({ message: 'Something went wrong' });
+        finally {
+            setLoading(false);
         }
     };
+    /** Get display text for login type */
     const getLoginTypeText = (loginType) => {
         switch (loginType) {
             case 1: return 'Email';
@@ -106,10 +92,20 @@ const useSignUp = () => {
             default: return 'Email';
         }
     };
+    /** Disable submit button logic */
     const disabled = useMemo(() => {
-        return !firstName || firstName.length < 3 || !lastName || lastName.length < 3 || !selectedDOB || !gender
-            || (registrationMethod == "email" && (!phone || !isPhoneValid)) || emailLinkedError.length > 0;
-    }, [firstName, lastName, selectedDOB, gender, phone, isPhoneValid, emailLinkedError, registrationMethod]);
+        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,
@@ -121,18 +117,18 @@ const useSignUp = () => {
         countryCode, setCountryCode,
         error, setError,
         email, setEmail,
-        phoneError, setPhoneError,
-        isPhoneValid, setIsPhoneValid,
-        emailLinkedError,
-        existingAccounts,
-        existingAccountModal, setExistingAccountModal,
-        onFirstName, onLastName,
-        handleEmail, handleSubmit,
+        linkedAccounts,
+        linkedAccountsSheet, showLinkedAccountsSheet,
+        handleFirstNameChange, handleLastNameChange,
+        handleEmailChange,
+        handleMobileChange,
+        handleSubmit,
         getLoginTypeText,
         disabled,
-        registrationMethod,
+        registrationMethod, onRegistrationMethodChange,
         appName: appConfig.appName,
-        termsAndConditionsUrl: appConfig.termsAndConditionsUrl
+        termsAndConditionsUrl: appConfig.termsAndConditionsUrl,
+        initializeValues
     };
 };
 export { useSignUp };