@truworth/twc-auth 1.2.2 → 1.2.4

package/build/src/screens/SSOLogin/SearchOrganization/hooks/internal/useSSOSearchOrganization.js

@@ -0,0 +1,71 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { axiosClient } from "../../../../../api/axiosClient";
+import { showMessage } from "../../../../../helpers/show-message";
+/**
+ * @internal
+ * Hook for managing SSOSearchOrganization screen state and auth context integration.
+ * This hook is not exposed to package consumers.
+ */
+const useSSOSearchOrganization = () => {
+    const [search, setSearch] = useState('');
+    const [noSearchResult, setNoSearchResult] = useState(false);
+    const [searchLoading, setSearchLoading] = useState(false);
+    const [selectedClient, setSelectedClient] = useState(undefined);
+    const [clientList, setClientList] = useState([]);
+    const latestQueryRef = useRef('');
+    const handleSearch = useCallback(() => {
+        const query = search.trim();
+        if (query.length > 2) {
+            latestQueryRef.current = query;
+            setNoSearchResult(false);
+            setSearchLoading(true);
+            axiosClient({
+                url: `/auth/login-sso/search-clients`,
+                method: 'POST',
+                data: { query },
+            }).then((res) => {
+                if (latestQueryRef.current !== query)
+                    return;
+                if (!res.data.length) {
+                    setNoSearchResult(true);
+                    return;
+                }
+                setClientList(res.data);
+            }).catch((error) => {
+                if (latestQueryRef.current !== query)
+                    return;
+                showMessage({ message: error?.response?.data?.errors?.[0]?.message || 'Something went wrong' });
+            }).finally(() => {
+                if (latestQueryRef.current !== query)
+                    return;
+                setSearchLoading(false);
+            });
+        }
+        else {
+            setClientList([]);
+            setNoSearchResult(false);
+            setSearchLoading(false);
+        }
+    }, [search]);
+    const handleSelect = (client) => {
+        setSelectedClient(client);
+        setClientList([]);
+    };
+    useEffect(() => {
+        setClientList([]);
+        const timerId = setTimeout(handleSearch, 1000);
+        return () => clearTimeout(timerId);
+    }, [handleSearch]);
+    return {
+        search,
+        clientList,
+        searchLoading,
+        noSearchResult,
+        selectedClient,
+        setSearch,
+        handleSelect,
+        setNoSearchResult,
+        setSelectedClient,
+    };
+};
+export { useSSOSearchOrganization };

package/build/src/screens/SSOLogin/SearchOrganization/index.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { AutoCompleteField, Flex, Typography } from "@truworth/twc-web-design";
+import { ChevronDown, Search } from "lucide-react";
+import { useSSOSearchOrganization } from "./hooks/internal/useSSOSearchOrganization";
+import { ScreenLayout } from "../../../components/ScreenLayout";
+import _ from "lodash";
+const SSOSearchOrganization = ({ onPressBack, onContinue }) => {
+    const [inputActive, setInputActive] = useState(false);
+    const { search, clientList, selectedClient, searchLoading, noSearchResult, setSearch, setSelectedClient, setNoSearchResult, handleSelect, } = useSSOSearchOrganization();
+    return (_jsx(ScreenLayout, { title: "Search Organization", onPressBack: onPressBack, buttonProps: {
+            label: "Continue",
+            variant: "primary",
+            disabled: _.isEmpty(selectedClient),
+            onClick: () => {
+                if (!_.isEmpty(selectedClient)) {
+                    onContinue(selectedClient);
+                    setSelectedClient(undefined);
+                    return;
+                }
+            },
+        }, children: _jsx(AutoCompleteField, { type: "text", loading: searchLoading, onSelect: (e, option) => {
+                if (!option)
+                    return;
+                const typedOption = option;
+                const client = typedOption.client;
+                if (client)
+                    handleSelect(client);
+            }, className: "my-4", onFocus: () => { setInputActive(true); }, onSearch: (value) => setSearch(value.trimStart()), placeholder: "Enter at least 3 characters to search...", debounceTimer: 300, value: selectedClient ? selectedClient.name : search, onChange: () => {
+                setNoSearchResult(false);
+                setSelectedClient(undefined);
+            }, leftIcon: false, rightIcon: inputActive && !selectedClient
+                ? _jsx(Search, { size: 20, className: "text-gray-600 flex" })
+                : _jsx(ChevronDown, { size: 20, className: "text-gray-600 flex" }), notFoundContent: noSearchResult ?
+                _jsx(Flex, { padding: "sm", className: "rounded-lg", children: _jsx(Typography, { type: "body", size: "large", className: "text-gray-900", children: `No result found for "${search}"` }) })
+                : null, options: clientList.map((item) => {
+                return {
+                    key: item.id,
+                    value: item.name,
+                    image: item.image,
+                    client: item,
+                    label: (_jsxs(Flex, { align: "center", className: "gap-2", children: [_jsx("img", { src: item.image, width: 32, height: 32, className: "h-auto" }), _jsxs(Typography, { type: "body", size: "medium", children: [" ", item.name] })] })),
+                };
+            }) }) }));
+};
+export default SSOSearchOrganization;

package/build/src/screens/SSOLogin/SearchOrganization/index.native.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from '@ui-kitten/components';
+import { ActivityIndicator, FlatList, TouchableOpacity, View } from 'react-native';
+import { AvatarWithInitials, Colors, SearchField } from '@truworth/twc-rn-common';
+import { useSSOSearchOrganization } from './hooks/internal/useSSOSearchOrganization';
+import { ScreenLayout } from '../../../components/ScreenLayout';
+const { primary, gray, utility, shades_tints } = Colors;
+const SSOSearchOrganization = ({ navigation }) => {
+    const { search, setSearch, clientList, searchLoading, noSearchResult, setNoSearchResult } = useSSOSearchOrganization();
+    return (_jsxs(ScreenLayout, { headerTitle: "Search Organization", containerStyle: {
+            flex: 1, backgroundColor: utility.bg,
+            paddingHorizontal: 0, paddingVertical: 0,
+            paddingTop: 8
+        }, title: "", children: [_jsx(SearchField, { value: search, placeholder: 'Enter at least 3 characters to search...', onChangeValue: (query) => setSearch(query.trimStart()), clearText: () => {
+                    setNoSearchResult(false);
+                    setSearch('');
+                }, returnKeyType: 'search', autoFocus: true, accessoryRight: searchLoading ? _jsx(ActivityIndicator, { style: { marginRight: 8 } }) : null, showClearIcon: !searchLoading, containerStyle: { marginVertical: 8, marginHorizontal: 16 }, autoComplete: 'off' }), _jsx(FlatList, { data: clientList, contentContainerStyle: { paddingBottom: 32 }, renderItem: ({ item }) => (_jsxs(TouchableOpacity, { onPress: () => navigation.navigate('SSOAuthenticationMethods', { client: item }), activeOpacity: 0.8, style: {
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        backgroundColor: '#fff',
+                        padding: 16,
+                        marginTop: 8,
+                        borderRadius: 12,
+                        shadowOffset: { width: 0, height: 2 },
+                        shadowOpacity: 0.25,
+                        shadowRadius: 12,
+                        shadowColor: '#A6A6A6',
+                        elevation: 11,
+                        marginHorizontal: 10,
+                    }, children: [_jsx(AvatarWithInitials, { image: item.image, name: item.name ?? '', size: 'medium', containerStyle: {
+                                backgroundColor: item.image ? primary.white : shades_tints.p_light_800,
+                                height: 55, width: 55, borderRadius: 100,
+                            }, imageProps: { resizeMode: 'contain' }, titleStyle: { fontSize: 12, fontWeight: '500', color: shades_tints.p_dark_500 } }), _jsx(View, { style: { flex: 1, marginLeft: 8 }, children: _jsx(Text, { style: { fontSize: 14, fontWeight: '600', color: gray.gray_900 }, children: item.name }) })] })), ListEmptyComponent: noSearchResult ?
+                    _jsx(View, { style: { padding: 16 }, children: _jsx(Text, { style: { fontSize: 14, fontWeight: '900', color: gray.gray_900 }, children: `No result found for "${search}"` }) })
+                    : null })] }));
+};
+export default SSOSearchOrganization;

package/build/src/screens/SSOLogin/SearchOrganization/types.js

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

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

@@ -1,5 +1,4 @@
 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";
@@ -8,37 +7,64 @@ 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";
+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();
+    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) {
-            setPhone(values.phone);
-            setEmail(email);
+        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 +77,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 }); },
+                    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", className: 'mt-5', rules: [
                                             {
                                                 required: true,
                                                 message: 'Please enter your first name'
@@ -99,7 +123,7 @@ const SignUpFormComponent = ({ email, registrationMethod, userDetails, onContinu
                                                 },
                                             },
                                         ], normalize: (value) => (value ?? '').replace(/[^a-zA-Z]/g, ''), ...form.register('firstName', {
-                                            onChange: (e) => onFirstName(e.target.value)
+                                            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", className: 'mt-5', rules: [
                                             {
                                                 required: true,
@@ -117,8 +141,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 +152,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,38 +161,40 @@ 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}`;
+                    }, 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", 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" }) }) }));
+    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/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', style: { width: '70%' }, 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 }) }));
-};