@truworth/twc-auth 1.1.0 → 1.2.1

package/build/src/helpers/Network.js

@@ -0,0 +1,93 @@
+import { axiosClient } from '../api/axiosClient';
+import { showMessage } from '../helpers/show-message';
+import {} from 'axios';
+export const createHttpClient = ({ token, onRefreshSession, onLogout }) => {
+    let currentToken = token;
+    const request = ({ url, method, data, ...axiosOptions }) => {
+        const upper = method?.toUpperCase();
+        const payload = {
+            method: upper,
+            url,
+            data,
+            headers: {
+                ...(axiosOptions.headers ?? {}),
+                ...(currentToken ? { 'x-access-token': currentToken } : {}),
+            },
+            ...axiosOptions,
+        };
+        return new Promise((resolve, reject) => {
+            axiosClient(payload)
+                .then((res) => resolve(res))
+                .catch(async (err) => {
+                console.log(err?.response?.data);
+                // TokenExpiredError → refresh & retry
+                if (isAxios401(err, 'TokenExpiredError') && token) {
+                    try {
+                        const newToken = await refreshToken();
+                        if (newToken) {
+                            currentToken = newToken;
+                            await onRefreshSession?.(newToken);
+                            const retryResponse = await axiosClient({
+                                ...payload,
+                                headers: {
+                                    ...(payload.headers ?? {}),
+                                    'x-access-token': newToken,
+                                },
+                            });
+                            resolve(retryResponse);
+                        }
+                    }
+                    catch (refreshErr) {
+                        if (isAxios401(refreshErr, 'InvalidSessionError')) {
+                            await handleInvalidSession();
+                            resolve(null);
+                            return;
+                        }
+                        reject(refreshErr);
+                    }
+                }
+                // InvalidSessionError → logout
+                if (isAxios401(err, 'InvalidSessionError')) {
+                    await handleInvalidSession();
+                    resolve(null);
+                    return;
+                }
+                reject(err);
+            });
+        });
+    };
+    let refreshPromise = null;
+    const refreshToken = async () => {
+        if (refreshPromise)
+            return refreshPromise;
+        if (!currentToken)
+            return undefined;
+        const tokenRequest = {
+            method: 'GET',
+            url: '/auth/refresh-token',
+            headers: {
+                'x-access-token': currentToken,
+            },
+        };
+        refreshPromise = axiosClient(tokenRequest)
+            .then(res => res.data?.token)
+            .finally(() => { refreshPromise = null; });
+        return refreshPromise;
+    };
+    const handleInvalidSession = async () => {
+        try {
+            await onLogout?.();
+            showMessage('Your session has expired. Please login again.');
+        }
+        catch (err) {
+            console.error('Error logging out:', err);
+        }
+    };
+    return { request };
+};
+const isAxios401 = (err, name) => {
+    const e = err;
+    const status = e?.response?.status;
+    const n = e?.response?.data?.errors?.[0]?.name;
+    return status === 401 && (!name || n === name);
+};

package/build/src/helpers/Validation.js

@@ -0,0 +1,12 @@
+export const validatePhoneNo = (text) => {
+    // Normalize common formatting then enforce E.164 constraints
+    const normalized = text.replace(/[\s()-]/g, '');
+    if (!/^\+?\d+$/.test(normalized))
+        return false; // digits (optional leading +)
+    return /^\+?[1-9]\d{6,14}$/.test(normalized); // 7–15 digits, no leading zero country code
+};
+export const validateEmojiRegex = (text) => {
+    const regexpEmoji = /[\u{1f300}-\u{1f5ff}\u{1f900}-\u{1f9ff}\u{1f600}-\u{1f64f}\u{1f680}-\u{1f6ff}\u{2600}-\u{26ff}\u{2700}-\u{27bf}\u{1f1e6}-\u{1f1ff}\u{1f191}-\u{1f251}\u{1f004}\u{1f0cf}\u{1f170}-\u{1f171}\u{1f17e}-\u{1f17f}\u{1f18e}\u{3030}\u{2b50}\u{2b55}\u{2934}-\u{2935}\u{2b05}-\u{2b07}\u{2b1b}-\u{2b1c}\u{3297}\u{3299}\u{303d}\u{00a9}\u{00ae}\u{2122}\u{23f3}\u{24c2}\u{23e9}-\u{23ef}\u{25b6}\u{23f8}-\u{23fa}]/ug;
+    text = text.replace(regexpEmoji, '');
+    return text;
+};

package/build/src/helpers/show-message/index.js

@@ -0,0 +1,19 @@
+import { showNotification } from "@truworth/twc-web-design";
+const showMessage = (message) => {
+    if (message == null)
+        return;
+    const text = typeof message === 'string'
+        ? message
+        : message instanceof Error
+            ? message.message
+            : (typeof message === 'object' && 'message' in message)
+                ? String(message.message)
+                : String(message);
+    showNotification({
+        type: 'error',
+        title: text,
+        showIcon: false,
+        duration: 3000,
+    });
+};
+export { showMessage };

package/build/src/helpers/show-message/index.native.js

@@ -0,0 +1,14 @@
+import { Snackbar } from "@truworth/twc-rn-common";
+const showMessage = (message, leftIcon = 'warning') => {
+    if (message == null)
+        return;
+    const text = typeof message === 'string'
+        ? message
+        : message instanceof Error
+            ? message.message
+            : (typeof message === 'object' && 'message' in message)
+                ? String(message.message)
+                : String(message);
+    Snackbar.show({ text, leftIcon });
+};
+export { showMessage };

package/build/src/helpers/show-message/types.js

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

package/build/src/helpers/types.js

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

package/build/src/hooks/internal/useAuthPackageContext.js

@@ -0,0 +1,9 @@
+import React from "react";
+import { AuthPackageContext } from "../../contexts/AuthContext";
+export const useAuthPackageContext = () => {
+    const context = React.useContext(AuthPackageContext);
+    if (!context) {
+        throw new Error('useAuthPackageContext must be used within a LoginProvider');
+    }
+    return context;
+};

package/build/src/hooks/internal/useTimer.js

@@ -0,0 +1,40 @@
+import { useEffect, useState, useRef } from 'react';
+const useTimer = (duration) => {
+    const [timer, setTimer] = useState(duration);
+    useEffect(() => {
+        // Reset timer whenever duration changes
+        setTimer(duration);
+        // Strongly type the interval ID
+        const id = setInterval(() => {
+            setTimer(prev => {
+                if (prev <= 1) {
+                    clearInterval(id);
+                    return 0; // Clamp at zero
+                }
+                return prev - 1;
+            });
+        }, 1000);
+        return () => clearInterval(id);
+    }, [duration]);
+    return timer;
+};
+const useInterval = (callback, delay) => {
+    const savedCallback = useRef();
+    // Remember the latest function.
+    useEffect(() => {
+        savedCallback.current = callback;
+    }, [callback]);
+    // Set up the interval.
+    useEffect(() => {
+        function tick() {
+            savedCallback.current?.();
+        }
+        if (delay !== null) {
+            const id = setInterval(tick, delay);
+            return () => {
+                clearInterval(id);
+            };
+        }
+    }, [delay]);
+};
+export { useTimer, useInterval };

package/build/src/hooks/useAuthContext.js

@@ -0,0 +1,10 @@
+import React from "react";
+import AuthContext from "../contexts/AuthContext";
+const useAuthContext = () => {
+    const context = React.useContext(AuthContext);
+    if (!context) {
+        throw new Error('useAuthContext must be used within a AuthProvider');
+    }
+    return context;
+};
+export { useAuthContext };

package/build/src/hooks/useRequest.js

@@ -0,0 +1,38 @@
+import { useEffect, useMemo, useState } from 'react';
+import { showMessage } from '../helpers/show-message';
+import { useAuthPackageContext } from './internal/useAuthPackageContext';
+import { createHttpClient } from '../helpers/Network';
+const useRequest = () => {
+    const { token: sessionToken, logout, refreshSession } = useAuthPackageContext();
+    const [token, setToken] = useState(sessionToken);
+    useEffect(() => {
+        setToken(sessionToken);
+    }, [sessionToken]);
+    const { request } = useMemo(() => createHttpClient({
+        token,
+        onRefreshSession: async (token) => refreshSession?.({ token }),
+        onLogout: async () => logout(),
+    }), [token, logout, refreshSession]);
+    const makeRequest = async ({ url, method, body, onSuccess, onFailure, ...axiosOptions }) => {
+        try {
+            const response = await request({
+                url,
+                method,
+                data: body,
+                ...axiosOptions,
+            });
+            onSuccess?.(response.data, response.headers);
+            return response.data;
+        }
+        catch (err) {
+            if (onFailure) {
+                onFailure(err);
+            }
+            if (err?.response?.status >= 500) {
+                showMessage("Something went wrong");
+            }
+        }
+    };
+    return { makeRequest };
+};
+export { useRequest };

package/build/src/index.js

@@ -0,0 +1,12 @@
+// export contexts
+export * from './contexts/AuthContext';
+export { default as AuthContext } from './contexts/AuthContext';
+export * from './contexts/type';
+// export hooks
+export * from './hooks/useAuthContext';
+export * from './hooks/useRequest';
+// export navigator/router
+export * from './navigator';
+// export components
+export * from './screens/Login/components/LoginWebComponent';
+export * from './screens/SignUp/components/SignUpWebComponent';

package/build/src/navigator/index.js

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

package/build/src/navigator/index.native.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import Welcome from '../screens/Welcome';
+import EnterEmail from '../screens/EnterEmail/index.native';
+import EnterPassword from '../screens/EnterPassword/index.native';
+import SignUp from '../screens/SignUp/index.native';
+import CountryCode from '../screens/CountryCode/index.native';
+import CreatePassword from '../screens/CreatePassword/index.native';
+import UserConsent from '../screens/UserConsent/index.native';
+import VerifyMobile from '../screens/VerifyMobile/index.native';
+import VerifyEmail from '../screens/VerifyEmail/index.native';
+const { Navigator, Screen } = createNativeStackNavigator();
+const AuthNavigator = () => {
+    return (_jsxs(Navigator, { screenOptions: { headerShown: false }, children: [_jsx(Screen, { name: "Welcome", component: Welcome }), _jsx(Screen, { name: "EnterEmail", component: EnterEmail }), _jsx(Screen, { name: "EnterPassword", component: EnterPassword }), _jsx(Screen, { name: "SignUp", component: SignUp }), _jsx(Screen, { name: "CountryCode", component: CountryCode }), _jsx(Screen, { name: "CreatePassword", component: CreatePassword }), _jsx(Screen, { name: "UserConsent", component: UserConsent }), _jsx(Screen, { name: "VerifyMobile", component: VerifyMobile }), _jsx(Screen, { name: "VerifyEmail", component: VerifyEmail })] }));
+};
+export { AuthNavigator };

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

@@ -0,0 +1,38 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import Image from 'next/image';
+import React, { useMemo } from "react";
+import { Typography, SelectField, Flex } from '@truworth/twc-web-design';
+import { useCountryCode } from '../../hooks/internal/useCountryCode';
+export const CountryCodeDropdown = React.memo(({ selectedCountry, handleSelect }) => {
+    const { countryCodes: countries } = useCountryCode();
+    const isValidCountryCode = (code) => /^[a-z]{2}$/i.test(code); // only 2-letter codes
+    const allCountries = useMemo(() => {
+        const seen = new Set();
+        const uniqueCountries = countries.filter((item) => {
+            const rawCode = typeof item.countryCode === 'string' ? item.countryCode : '';
+            const code = rawCode.toLowerCase();
+            if (!isValidCountryCode(code))
+                return false; // filter invalid ones
+            if (seen.has(code))
+                return false;
+            seen.add(code);
+            return true;
+        });
+        return uniqueCountries.map((item) => {
+            const code = item.countryCode.toLowerCase();
+            const flagUrl = `https://cdn.thewellnesscorner.com/country-flags/${code}.png`;
+            return {
+                leftIcon: (_jsx(_Fragment, { children: isValidCountryCode(code) && (_jsx(Image, { src: flagUrl, width: 20, height: 20, className: "h-auto shrink-0", alt: `${item.name} flag`, loading: "lazy" })) })),
+                label: (_jsxs(Typography, { type: "body", size: "small", children: [item.name, " (+", item.phoneCode, ")"] })),
+                value: code,
+                selectedField: (_jsxs(Flex, { align: "center", className: "gap-2 pl-2 pr-2 cursor-pointer", children: [isValidCountryCode(code) && (_jsx(Image, { src: flagUrl, width: 20, height: 20, className: "h-auto shrink-0", alt: `${item.name} flag`, loading: "lazy" })), _jsx(Typography, { type: "body", size: "medium", className: "countryCode cursor-pointer", children: `+${item.phoneCode}` })] })),
+            };
+        });
+    }, [countries]);
+    return (_jsx(SelectField, { selectedValues: selectedCountry.countryCode, options: allCountries, className: "border-0 w-100 h-1", onSelect: (value) => {
+            const currSelectedCountry = countries.find((country) => country.countryCode.toLowerCase() === value);
+            if (currSelectedCountry) {
+                handleSelect(currSelectedCountry);
+            }
+        }, fullWidth: true, selectContentClassName: "h-32 pl-2 min-h-[30vh]", maxHeight: "400px", contentOffset: 10 }));
+});

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

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

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

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

package/build/src/screens/CountryCode/hooks/internal/useCountryCode.js

@@ -0,0 +1,38 @@
+import { useEffect, useState } from "react";
+import { axiosClient } from "../../../../api/axiosClient";
+/**
+ * @internal
+ * Internal hook for managing CountryCode screen state and auth context integration.
+ * Not exposed to package consumers.
+ */
+const useCountryCode = () => {
+    const [countryCodes, setCountryCodes] = useState([]);
+    const [searchCountry, setSearchCountry] = useState([]);
+    useEffect(() => {
+        if (countryCodes.length === 0) {
+            getCountryCodes();
+        }
+    }, []);
+    const getCountryCodes = () => {
+        axiosClient({
+            url: '/auth/country-codes',
+            method: 'GET',
+        }).then((res) => {
+            setCountryCodes(res.data);
+        }).catch((err) => {
+            console.log(err);
+        });
+    };
+    const onSearch = (text) => {
+        let query = text.toLowerCase();
+        let filtered = countryCodes.filter((item) => item.name.toLowerCase().includes(query));
+        if (!query || query === '') {
+            setSearchCountry([]);
+        }
+        else {
+            setSearchCountry(filtered);
+        }
+    };
+    return { countryCodes, searchCountry, onSearch };
+};
+export { useCountryCode };

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

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

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

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TextInput, Text, View, Image, FlatList, TouchableOpacity } from 'react-native';
+import { Icon, Layout } from '@ui-kitten/components';
+import { Colors, withPreventDoubleTap } from '@truworth/twc-rn-common';
+import { useNavigation, useRoute } from '@react-navigation/native';
+import { useCountryCode } from './hooks/internal/useCountryCode';
+import { useState } from 'react';
+const TouchableCard = withPreventDoubleTap(TouchableOpacity);
+const { primary, gray } = Colors;
+const CountryCode = () => {
+    const [isSearching, setIsSearching] = useState(false);
+    const route = useRoute();
+    const navigation = useNavigation();
+    const { countryCodes, searchCountry, onSearch } = useCountryCode();
+    const onSelect = (countryCode, iconCode) => {
+        navigation.navigate(route.params?.prevRoute, {
+            ...route.params,
+            countryCode,
+            iconCode,
+        });
+    };
+    return (_jsxs(Layout, { style: { flex: 1, backgroundColor: primary.white }, children: [_jsxs(View, { style: { flexDirection: 'row' }, children: [_jsx(TouchableCard, { style: { flexDirection: 'row', paddingHorizontal: 15, alignSelf: 'center' }, activeOpacity: 0.8, onPress: () => navigation.goBack(), children: _jsx(Icon, { name: "arrow-back", fill: "#313131", style: { width: 25, height: 25 } }) }), _jsxs(View, { style: {
+                            flex: 1, backgroundColor: '#eeeef0', height: 45,
+                            flexDirection: 'row', alignItems: 'center', borderRadius: 10,
+                            marginVertical: 15, paddingHorizontal: 10, marginRight: 15,
+                        }, children: [_jsx(Icon, { fill: "#8F9BB3", style: { height: 28, width: 28 }, name: "search-outline" }), _jsx(TextInput, { style: { fontSize: 16, flex: 1, color: primary.black }, placeholder: "Search Country", placeholderTextColor: gray.gray_400, onChangeText: text => {
+                                    onSearch(text);
+                                    setIsSearching(text.trim().length > 0);
+                                } })] })] }), _jsx(View, { style: { borderBottomWidth: 1, borderBottomColor: '#ddd' } }), _jsx(FlatList, { data: isSearching ? searchCountry : countryCodes, keyExtractor: (item) => item.id.toString(), renderItem: ({ item }) => {
+                    const sanitizedCountryCode = (item.countryCode ?? '').replace(/[^a-zA-Z]/g, '').toLowerCase();
+                    return (_jsxs(TouchableOpacity, { style: { flexDirection: 'row', paddingHorizontal: 15, paddingTop: 20, alignItems: 'center' }, onPress: () => onSelect(item.phoneCode, item.countryCode), children: [_jsx(Image, { source: { uri: `https://cdn.thewellnesscorner.com/country-flags/${sanitizedCountryCode}.png` }, style: { height: 25, width: 40 }, resizeMode: "cover" }), _jsx(Text, { style: {
+                                    flex: 1, textTransform: 'uppercase',
+                                    fontSize: 18, color: primary.black, marginLeft: 15,
+                                }, children: `${item.name} (+${item.phoneCode})` })] }));
+                } })] }));
+};
+export default CountryCode;

package/build/src/screens/CountryCode/type.js

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

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

@@ -0,0 +1,52 @@
+import { useState } from "react";
+/**
+ * @internal
+ * Internal hook for managing CreatePassword screen state and auth context integration.
+ * Not exposed to package consumers.
+ */
+const useCreatePassword = () => {
+    const [passwordVisible, setPasswordVisible] = useState(false);
+    const [confirmPasswordVisible, setConfirmPasswordVisible] = useState(false);
+    const [password, setPassword] = useState('');
+    const [confirmPassword, setConfirmPassword] = useState('');
+    const [maxLength, setMaxLength] = useState(defaultPolicy.maxLength);
+    const [criteria, setCriteria] = useState({
+        numbers: false,
+        minLength: false,
+        uppercase: false,
+        lowercase: false,
+        specialCharacters: false,
+    });
+    const handlePassword = (text) => {
+        setPassword(text.replace(/\s/g, ''));
+    };
+    const handleConfirmPassword = (text) => {
+        setConfirmPassword(text.replace(/\s/g, ''));
+    };
+    const handleSkip = ({ onResult }) => {
+        setPassword('');
+        setConfirmPassword('');
+        onResult();
+    };
+    const disabled = !Object.keys(criteria).every(c => criteria[c]) || (password !== confirmPassword);
+    return {
+        password, setPassword,
+        confirmPassword, setConfirmPassword,
+        passwordVisible, setPasswordVisible,
+        confirmPasswordVisible, setConfirmPasswordVisible,
+        maxLength, setMaxLength,
+        criteria, setCriteria,
+        handlePassword, handleConfirmPassword,
+        handleSkip,
+        disabled
+    };
+};
+export { useCreatePassword };
+const defaultPolicy = {
+    minLength: 6,
+    maxLength: 30,
+    numbers: true,
+    uppercase: true,
+    lowercase: true,
+    specialCharacters: true,
+};

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

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

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

@@ -0,0 +1,32 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Keyboard, Text, TouchableOpacity } from 'react-native';
+import { Colors, TextInputField } from '@truworth/twc-rn-common';
+import { Layout } from '@ui-kitten/components';
+import { ScreenLayout } from '../../components/ScreenLayout';
+import { useCreatePassword } from './hooks/internal/useCreatePassword';
+import { PasswordCriteria } from '../../components/PasswordCriteria/index.native';
+const { primary } = Colors;
+const CreatePassword = ({ navigation, route }) => {
+    const { countryCode, email } = route.params;
+    const { password, confirmPassword, passwordVisible, setPasswordVisible, confirmPasswordVisible, setConfirmPasswordVisible, maxLength, setMaxLength, criteria, setCriteria, handlePassword, handleConfirmPassword, handleSkip, disabled } = useCreatePassword();
+    const onContinue = () => {
+        navigation.navigate('UserConsent', { ...route.params, password });
+    };
+    return (_jsx(Layout, { style: { flex: 1, backgroundColor: primary.white }, children: _jsxs(ScreenLayout, { title: "Create your Password", subTitle: "Use a password that\u2019s easy to remember and fulfills all the requirement listed below.", buttonProps: {
+                label: 'Continue',
+                onPress: onContinue,
+                disabled: disabled,
+            }, accessoryRight: countryCode == '91'
+                ? _jsx(TouchableOpacity, { activeOpacity: 0.8, onPress: () => {
+                        Keyboard.dismiss();
+                        handleSkip({
+                            onResult: () => {
+                                navigation.navigate('UserConsent', { ...route.params });
+                            }
+                        });
+                    }, children: _jsx(Text, { style: { fontSize: 16, fontWeight: '600', color: primary.primary_main }, children: "Skip" }) })
+                : _jsx(_Fragment, {}), children: [_jsx(TextInputField, { placeholder: "Enter password...", onChangeValue: handlePassword, secureTextEntry: !passwordVisible, value: password, rightIcon2: passwordVisible
+                        ? 'eye-outline'
+                        : 'eye-off-outline', onPressRightIcon2: () => setPasswordVisible(!passwordVisible), autoFocus: true, maxLength: maxLength }), _jsx(PasswordCriteria, { email: email, password: password, criteria: criteria, onCriteriaChange: setCriteria, onMaxLengthChange: setMaxLength }), _jsx(TextInputField, { placeholder: "Confirm password...", onChangeValue: handleConfirmPassword, secureTextEntry: !confirmPasswordVisible, value: confirmPassword, rightIcon2: confirmPasswordVisible ? 'eye-outline' : 'eye-off-outline', onPressRightIcon2: () => setConfirmPasswordVisible(!confirmPasswordVisible), maxLength: maxLength, containerStyle: { marginTop: 16 } })] }) }));
+};
+export default CreatePassword;

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

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