@truworth/twc-auth 1.1.0 → 1.2.2

package/build/src/components/EmailOTPVerify/index.native.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Dimensions, Platform, ScrollView, Text, TouchableOpacity, View } from "react-native";
+import { Layout } from "@ui-kitten/components";
+import { Header, Colors, CustomKeyboardAvoidingView } from "@truworth/twc-rn-common";
+import { ScreenLayout } from "../ScreenLayout";
+import { OTPStatusLabel } from "../OTPStatusLabel/index.native";
+import OTPInputView from "@twotalltotems/react-native-otp-input";
+const EmailOTPVerify = ({ status, validateOTP, resendOTP, resendOTPCounter, email }) => {
+    const [otp, setOTP] = useState('');
+    useEffect(() => {
+        if (otp && otp.length === 6) {
+            validateOTP?.(otp);
+        }
+    }, [otp]);
+    return (_jsxs(Layout, { style: { flex: 1, backgroundColor: '#fff' }, children: [_jsx(Header, {}), _jsxs(CustomKeyboardAvoidingView, { behavior: Platform.OS === 'ios' ? 'padding' : undefined, keyboardVerticalOffset: Platform.OS === 'ios' ? 100 : 0, children: [_jsx(ScrollView, { showsVerticalScrollIndicator: false, children: _jsxs(ScreenLayout, { hideHeader: true, title: _jsxs(_Fragment, { children: ["OTP sent to ", '\n', _jsx(Text, { style: { fontSize: 20 }, children: email })] }), children: [_jsx(View, { style: { justifyContent: 'center', flexDirection: 'row', marginBottom: 30, position: 'relative' }, children: _jsx(OTPInputView, { pinCount: 6, autoFocusOnLoad: false, codeInputFieldStyle: {
+                                            fontSize: 20, color: 'black',
+                                            height: 45, width: 30,
+                                            borderWidth: 0, borderBottomWidth: 1,
+                                        }, codeInputHighlightStyle: { borderColor: '#03DAC6' }, style: {
+                                            height: 50,
+                                            width: Dimensions.get('window').width - 100,
+                                        }, onCodeFilled: code => setOTP(code) }) }), resendOTPCounter < 3 &&
+                                    _jsxs(View, { style: { flexDirection: 'row', alignItems: 'center' }, children: [_jsxs(Text, { style: { fontSize: 14, fontWeight: '500', color: Colors.gray.gray_400, lineHeight: 20 }, children: ["Did not receive OTP?", ' '] }), _jsx(TouchableOpacity, { activeOpacity: 0.8, onPress: resendOTP, children: _jsx(Text, { style: { fontSize: 14, fontWeight: '500', color: '#2cbaa4', lineHeight: 20 }, children: "Re-send OTP" }) })] })] }) }), _jsx(View, { style: { alignSelf: 'flex-end', width: '100%' }, children: _jsx(OTPStatusLabel, { status: status }) })] })] }));
+};
+export { EmailOTPVerify };

package/build/src/components/EmailOTPVerify/type.js

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

package/build/src/components/IonIcon/index.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const IonIcon = ({ name, size, className, ...props }) => {
+    const customElementProps = {
+        ...props,
+        name,
+        size,
+        class: className // For the custom element
+    };
+    return _jsx("ion-icon", { ...customElementProps });
+};
+export { IonIcon };

package/build/src/components/IonIcon/index.native.js

@@ -0,0 +1,9 @@
+let __ionIconWarned = false;
+const IonIcon = (_props) => {
+    if (__DEV__ && !__ionIconWarned) {
+        console.warn("[@truworth/twc-auth] IonIcon is web-only");
+        __ionIconWarned = true;
+    }
+    return null;
+};
+export { IonIcon };

package/build/src/components/IonIcon/types.js

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

package/build/src/components/OTPStatusLabel/index.js

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

package/build/src/components/OTPStatusLabel/index.native.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isIphoneX } from "@truworth/twc-rn-common";
+import { ActivityIndicator, Platform, Text, View } from "react-native";
+import LinearGradient from "react-native-linear-gradient";
+import OkayIcon from '../../../assets/okay_icon.svg';
+import CrossIcon from '../../../assets/cross_icon.svg';
+const OTPStatusLabel = ({ status, timer }) => {
+    switch (status) {
+        case 'timer':
+            return (_jsx(View, { style: { height: isIphoneX() ? 80 : 70, width: '100%', justifyContent: 'center', marginBottom: Platform.OS === 'ios' ? 14 : 0 }, children: _jsx(LinearGradient, { colors: ['#b0bbbd', '#b0bbbd'], style: { flex: 1, justifyContent: 'center', alignItems: 'center' }, start: { x: 0, y: 0 }, end: { x: 1, y: 0 }, children: _jsx(Text, { style: { textAlign: 'center', fontSize: 15, color: '#FFFFFF', textTransform: 'uppercase' }, children: timer && timer > 0 ? `${timer} seconds` : 'OTP expired' }) }) }));
+        case 'valid':
+            return (_jsx(View, { style: { height: isIphoneX() ? 80 : 70, width: '100%', justifyContent: 'center', marginBottom: Platform.OS === 'ios' ? 14 : 0 }, children: _jsx(LinearGradient, { colors: ['#44cfb9', '#1EC2C9'], style: { flex: 1, alignItems: 'center', justifyContent: 'center' }, start: { x: 0, y: 0 }, end: { x: 1, y: 0 }, children: _jsx(Text, { style: { textAlign: 'center', fontSize: 15, color: '#fff', textTransform: 'uppercase' }, children: _jsx(OkayIcon, {}) }) }) }));
+        case 'invalid':
+            return (_jsx(View, { style: { height: isIphoneX() ? 80 : 70, width: '100%', justifyContent: 'center', marginBottom: Platform.OS === 'ios' ? 14 : 0 }, children: _jsx(LinearGradient, { colors: ['#F3698B', '#F18A8A'], style: { flex: 1, alignItems: 'center', justifyContent: 'center' }, start: { x: 0, y: 0 }, end: { x: 1, y: 0 }, children: _jsx(Text, { style: { textAlign: 'center', fontSize: 15, color: '#fff', textTransform: 'uppercase' }, children: _jsx(CrossIcon, {}) }) }) }));
+        case 'loading':
+            return (_jsx(View, { style: { height: isIphoneX() ? 80 : 70, width: '100%', justifyContent: 'center', marginBottom: Platform.OS === 'ios' ? 14 : 0 }, children: _jsx(LinearGradient, { colors: ['#b0bbbd', '#b0bbbd'], style: { flex: 1, alignItems: 'center', justifyContent: 'center' }, start: { x: 0, y: 0 }, end: { x: 1, y: 0 }, children: _jsx(View, { style: { alignItems: 'center' }, children: _jsx(ActivityIndicator, { color: 'black' }) }) }) }));
+        default:
+            return null;
+    }
+};
+export { OTPStatusLabel };

package/build/src/components/OTPStatusLabel/types.js

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

package/build/src/components/PasswordCriteria/hooks/usePasswordCriteria.js

@@ -0,0 +1,78 @@
+import { useEffect, useState } from "react";
+import { axiosClient } from "../../../api/axiosClient";
+const defaultPolicy = {
+    minLength: 6,
+    maxLength: 30,
+    numbers: true,
+    uppercase: true,
+    lowercase: true,
+    specialCharacters: true,
+};
+const usePasswordCriteria = ({ email, password, onCriteriaChange, onMaxLengthChange }) => {
+    const { maxLength: defaultMaxLength, ...restDefaultPolicy } = defaultPolicy;
+    const [loading, setLoading] = useState(false);
+    const [passwordPolicy, setPasswordPolicy] = useState(restDefaultPolicy);
+    useEffect(() => {
+        if (!email) {
+            setPasswordPolicy(restDefaultPolicy);
+            onMaxLengthChange(defaultMaxLength);
+            setLoading(false);
+            return;
+        }
+        return getPasswordPolicy();
+    }, [email]);
+    const getPasswordPolicy = () => {
+        let isActive = true;
+        if (email) {
+            setPasswordPolicy(restDefaultPolicy);
+            onMaxLengthChange(defaultMaxLength);
+            setLoading(true);
+            axiosClient({
+                url: `/auth/password-policy?email=${encodeURIComponent(email)}`,
+                method: 'GET',
+            }).then(({ data }) => {
+                if (!isActive)
+                    return;
+                const { maxLength, ...rest } = (data || {});
+                // Apply server-provided policy when present, falling back to defaults
+                setPasswordPolicy({
+                    minLength: typeof rest.minLength === 'number' ? rest.minLength : restDefaultPolicy.minLength,
+                    numbers: typeof rest.numbers === 'boolean' ? rest.numbers : restDefaultPolicy.numbers,
+                    uppercase: typeof rest.uppercase === 'boolean' ? rest.uppercase : restDefaultPolicy.uppercase,
+                    lowercase: typeof rest.lowercase === 'boolean' ? rest.lowercase : restDefaultPolicy.lowercase,
+                    specialCharacters: typeof rest.specialCharacters === 'boolean' ? rest.specialCharacters : restDefaultPolicy.specialCharacters,
+                });
+                onMaxLengthChange(typeof maxLength === 'number' ? maxLength : defaultMaxLength);
+            }).catch(err => {
+                if (!isActive)
+                    return;
+                console.warn('password-policy fetch failed', err);
+                setPasswordPolicy(restDefaultPolicy);
+                onMaxLengthChange(defaultMaxLength);
+            }).finally(() => isActive && setLoading(false));
+        }
+        return () => { isActive = false; };
+    };
+    useEffect(() => {
+        onCriteriaChange({
+            minLength: password.length >= passwordPolicy.minLength,
+            specialCharacters: passwordPolicy.specialCharacters ? /[!@#$%^&*(),.?":{}|<>]/.test(password) : true,
+            numbers: passwordPolicy.numbers ? /\d/.test(password) : true,
+            uppercase: passwordPolicy.uppercase ? /[A-Z]/.test(password) : true,
+            lowercase: passwordPolicy.lowercase ? /[a-z]/.test(password) : true,
+        });
+    }, [password, passwordPolicy]);
+    const renderLabel = (criteria) => {
+        switch (criteria) {
+            case 'minLength': return `min ${passwordPolicy.minLength} characters`;
+            case 'specialCharacters': return 'special character';
+            default: return criteria;
+        }
+    };
+    return {
+        loading,
+        passwordPolicy,
+        renderLabel,
+    };
+};
+export { usePasswordCriteria };

package/build/src/components/PasswordCriteria/index.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useId, useMemo } from "react";
+import { usePasswordCriteria } from "./hooks/usePasswordCriteria";
+import { Check, X } from "lucide-react";
+const PasswordCriteria = ({ email, password, criteria, onCriteriaChange, onMaxLengthChange }) => {
+    const id = useId();
+    const { passwordPolicy, renderLabel, } = usePasswordCriteria({ email, password, onCriteriaChange, onMaxLengthChange });
+    const activeRequirementKeys = useMemo(() => {
+        // Include minLength always; include other flags only if enabled by policy
+        return Object.keys(passwordPolicy).filter((key) => {
+            if (key === "minLength")
+                return true;
+            // @ts-ignore boolean flags present on policy
+            return Boolean(passwordPolicy[key]);
+        });
+    }, [passwordPolicy]);
+    const strengthScore = useMemo(() => {
+        return activeRequirementKeys.reduce((acc, key) => acc + (criteria[key] ? 1 : 0), 0);
+    }, [activeRequirementKeys, criteria]);
+    const maxScore = activeRequirementKeys.length || 1;
+    const getStrengthColor = (score) => {
+        const ratio = score / maxScore;
+        if (score === 0)
+            return "bg-border";
+        if (ratio < 0.4)
+            return "bg-red-500";
+        if (ratio < 0.7)
+            return "bg-orange-500";
+        if (ratio < 1)
+            return "bg-amber-500";
+        return "bg-emerald-500";
+    };
+    const getStrengthText = (score) => {
+        if (score === 0)
+            return "Enter a password";
+        const ratio = score / maxScore;
+        if (ratio < 0.4)
+            return "Weak password";
+        if (ratio < 0.8)
+            return "Medium password";
+        return "Strong password";
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "h-1 w-full overflow-hidden rounded-full bg-border", role: "progressbar", "aria-valuenow": strengthScore, "aria-valuemin": 0, "aria-valuemax": maxScore, "aria-label": "Password strength", children: _jsx("div", { className: `h-full ${getStrengthColor(strengthScore)} transition-all duration-500 ease-out`, style: { width: `${(strengthScore / maxScore) * 100}%` } }) }), _jsxs("p", { id: `${id}-description`, className: "mt-2 text-sm font-medium text-foreground", children: [getStrengthText(strengthScore), ". Must contain:"] }), _jsx("ul", { className: "mt-2 space-y-1.5", "aria-label": "Password requirements", children: activeRequirementKeys.map((req, index) => (_jsxs("li", { className: "flex items-center gap-2", children: [criteria[req]
+                            ? _jsx(Check, { size: 16, className: "text-emerald-500", "aria-hidden": "true" })
+                            : _jsx(X, { size: 16, className: "text-muted-foreground/80", "aria-hidden": "true" }), _jsxs("span", { className: `text-xs ${criteria[req] ? "text-emerald-600" : "text-muted-foreground"}`, children: [renderLabel(req), _jsx("span", { className: "sr-only", children: criteria[req] ? " - Requirement met" : " - Requirement not met" })] })] }, index))) })] }));
+};
+export { PasswordCriteria };

package/build/src/components/PasswordCriteria/index.native.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { LoadingPlaceholder, Colors } from '@truworth/twc-rn-common';
+import { Text, View } from 'react-native';
+import { usePasswordCriteria } from './hooks/usePasswordCriteria';
+const { gray, utility } = Colors;
+const PasswordCriteria = ({ email, password, criteria, onCriteriaChange, onMaxLengthChange }) => {
+    const { passwordPolicy, loading, renderLabel, } = usePasswordCriteria({ email, password, onCriteriaChange, onMaxLengthChange });
+    const getCriteriaColor = (isValid) => (isValid ? utility.success_main : gray.gray_600);
+    const getCriteriaBackground = (isValid) => (isValid ? utility.success_bg : gray.gray_100);
+    return (_jsx(View, { style: { flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap', alignContent: 'space-between', marginTop: 8 }, children: Object.keys(passwordPolicy).map((item, index) => (loading
+            ? _jsx(LoadingPlaceholder, { height: 24, width: renderLabel(item).length * 8, borderRadius: 12, containerStyle: { marginRight: 8, marginTop: 8 } }, index)
+            :
+                _jsx(View, { style: {
+                        marginRight: 8, marginTop: 8, borderRadius: 32,
+                        paddingVertical: 4, paddingHorizontal: 12,
+                        backgroundColor: getCriteriaBackground(criteria[item]),
+                    }, children: _jsx(Text, { style: {
+                            fontSize: 12, fontWeight: '500',
+                            color: getCriteriaColor(criteria[item]),
+                        }, children: renderLabel(item) }) }, index))) }));
+};
+export { PasswordCriteria };

package/build/src/components/PasswordCriteria/types.js

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

package/build/src/components/ScreenLayout/index.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Typography } from "@truworth/twc-web-design";
+import { AdvancedTransitionWrapper } from "../AdvancedTransitionWrapper";
+import { ArrowLeft } from "lucide-react";
+const ScreenLayout = ({ children, title, subTitle, buttonProps, onPressBack }) => {
+    return (_jsxs(AdvancedTransitionWrapper, { type: 'slide', duration: 0.5, children: [onPressBack &&
+                _jsx(Button, { label: "Back", size: "large", variant: "link", leftIcon: _jsx(ArrowLeft, {}), className: "p-0 h-auto", onClick: onPressBack }), Boolean(title) &&
+                _jsx(Typography, { type: 'heading', size: 'h5', className: 'mb-2 mt-6', children: title }), Boolean(subTitle) &&
+                _jsx(Typography, { type: 'body', size: 'large', className: "md:mb-8 mb-6 text-gray-400", children: subTitle }), children, Boolean(buttonProps) &&
+                _jsx(Button, { label: "Continue", isFullWidth: true, variant: 'primary', className: "mt-3", ...buttonProps })] }));
+};
+export { ScreenLayout };

package/build/src/components/ScreenLayout/index.native.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { View, Text } from 'react-native';
+import { Colors, Header, RoundedButton } from '@truworth/twc-rn-common';
+const { gray } = Colors;
+const ScreenLayout = ({ children, title, subTitle, hideHeader, buttonProps, containerStyle, accessoryRight }) => {
+    return (_jsxs(_Fragment, { children: [!hideHeader &&
+                _jsx(Header, { accessoryRight: accessoryRight }), _jsxs(View, { style: [{ paddingVertical: 32, paddingHorizontal: 16 }, containerStyle], children: [Boolean(title) &&
+                        _jsx(Text, { textBreakStrategy: 'simple', style: {
+                                fontSize: 20, fontWeight: '600', color: gray.gray_900,
+                                lineHeight: 32, marginBottom: 32,
+                            }, children: title }), Boolean(subTitle) &&
+                        _jsx(Text, { textBreakStrategy: 'simple', style: {
+                                fontSize: 14, fontWeight: '500', color: gray.gray_400,
+                                lineHeight: 20, marginTop: -24, marginBottom: 32,
+                            }, children: subTitle }), children, Boolean(buttonProps) &&
+                        _jsx(RoundedButton, { containerStyle: { marginTop: 32 }, type: buttonProps?.type ?? 'secondary', size: buttonProps?.size ?? 'large', ...buttonProps })] })] }));
+};
+export { ScreenLayout };

package/build/src/components/ScreenLayout/types.js

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

package/build/src/components/SupportDetails/index.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CircleHelpIcon } from 'lucide-react';
+import { Flex, Typography } from "@truworth/twc-web-design";
+import { useAuthPackageContext } from "../../hooks/internal/useAuthPackageContext";
+const SupportDetails = () => {
+    const { appConfig } = useAuthPackageContext();
+    return (_jsxs(Flex, { padding: "sm", className: 'rounded-lg bg-gray-100 md:mt-8 mt-6 gap-3', children: [_jsx(CircleHelpIcon, { size: 20, className: "min-w-5 text-primary" }), _jsxs(Typography, { type: "body", size: "small", children: ["For any customer support\u2013related queries, please write to us at", _jsx("a", { href: `mailto:${appConfig.supportEmail}`, className: "text-primary block", children: _jsx("u", { children: appConfig.supportEmail }) })] })] }));
+};
+export { SupportDetails };

package/build/src/components/SupportDetails/index.native.js

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

package/build/src/components/VerifyOTP/index.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { Button, Flex, OTPInput, Typography } from "@truworth/twc-web-design";
+const OTPVerify = ({ validateOTP, timer, resendOTP, phone, status, resendTextClassName }) => {
+    const [otp, setOtp] = useState('');
+    const [otpError, setOtpError] = useState(false);
+    useEffect(() => {
+        if (status === 'invalid') {
+            setOtpError(true);
+            setOtp('');
+        }
+    }, [status]);
+    const defaultPhoneDisplayText = (_jsxs(Typography, { type: 'body', size: 'large', className: 'mb-6 text-gray-400 text-center', children: ["OTP sent to", _jsx("span", { className: 'pl-2 text-secondary-dark', children: phone ? `XXXXXXX${phone.slice(-3)}` : 'your registered mobile number' })] }));
+    return (_jsxs(_Fragment, { children: [defaultPhoneDisplayText, _jsx(OTPInput, { value: otp, onChange: (code) => {
+                    setOtp(code);
+                    setOtpError(false);
+                }, error: otpError, maxLength: 6, className: `!w-auto ${otpError ? '!border-destructive' : ''}` }), otpError &&
+                _jsx(Typography, { type: "utility", size: "medium", className: "mt-4", color: "text-utility-danger-main", children: "Please enter the correct OTP." }), (timer <= 0) ?
+                _jsxs(Flex, { justify: 'between', align: 'center', className: 'mt-4', children: [_jsx(Typography, { type: 'utility', size: 'medium', className: resendTextClassName, children: "Didn't receive OTP?" }), _jsx(Button, { label: 'Resend Code', size: 'small', variant: 'link', onClick: () => resendOTP() })] })
+                :
+                    _jsxs(Typography, { type: 'utility', size: 'medium', className: `mt-3 ${resendTextClassName}`, children: ["Resend Code in ", timer > 0 ? `${timer} seconds` : 'OTP expired'] }), _jsx(Button, { label: "Continue", isFullWidth: true, onClick: () => validateOTP?.(otp), disabled: otp ? otp?.length < 6 : true, className: "mt-6" })] }));
+};
+export { OTPVerify };

package/build/src/components/VerifyOTP/index.native.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Colors, CustomKeyboardAvoidingView, Header } from '@truworth/twc-rn-common';
+import { Layout } from '@ui-kitten/components';
+import { Dimensions, Platform, ScrollView, Text, TouchableOpacity, View, } from 'react-native';
+import { useAuthPackageContext } from '../../hooks/internal/useAuthPackageContext';
+import { OTPStatusLabel } from '../OTPStatusLabel/index.native';
+import OTPInputView from '@twotalltotems/react-native-otp-input';
+const { gray } = Colors;
+const OTPVerify = ({ validateOTP, timer, status, resendOTP, phone }) => {
+    const [otp, setOTP] = useState('');
+    const { otpValue } = useAuthPackageContext();
+    useEffect(() => {
+        if (otp?.length === 6) {
+            validateOTP(otp);
+        }
+    }, [otp]);
+    useEffect(() => {
+        if (otpValue && otpValue.length == 6) {
+            setOTP(otpValue);
+        }
+    }, [otpValue]);
+    return (_jsxs(Layout, { style: { flex: 1, backgroundColor: '#FFFFFF' }, children: [_jsx(Header, {}), _jsxs(CustomKeyboardAvoidingView, { behavior: Platform.OS === 'ios' ? 'padding' : undefined, keyboardVerticalOffset: 0, children: [_jsxs(ScrollView, { style: { paddingHorizontal: 20, paddingTop: 32, flex: 1 }, children: [_jsxs(Text, { textBreakStrategy: 'simple', style: {
+                                    fontSize: 20, fontWeight: '600', color: gray.gray_900,
+                                    lineHeight: 32, marginBottom: 32,
+                                }, children: ["OTP sent to ", '\n', phone ? phone.replace(/\d(?=\d{4})/g, 'x') : ''] }), _jsx(View, { style: { justifyContent: 'center', flexDirection: 'row', marginBottom: 30, position: 'relative' }, children: _jsx(OTPInputView, { pinCount: 6, autoFocusOnLoad: false, onCodeChanged: text => setOTP(text), codeInputFieldStyle: {
+                                        fontSize: 20, color: 'black', width: 30,
+                                        height: 45, borderWidth: 0, borderBottomWidth: 1,
+                                    }, codeInputHighlightStyle: { borderColor: '#03DAC6' }, style: {
+                                        height: 50,
+                                        width: Dimensions.get('window').width - 100,
+                                    }, code: otp ?? '', onCodeFilled: code => setOTP(code) }) }), timer <= 0 &&
+                                _jsxs(View, { style: { flexDirection: 'row', alignItems: 'center' }, children: [_jsxs(Text, { style: { fontSize: 12, color: '#000', fontWeight: '400', opacity: 0.5 }, children: ["Did not receive OTP?", ' '] }), _jsx(TouchableOpacity, { disabled: timer > 0, onPress: () => {
+                                                setOTP('');
+                                                resendOTP();
+                                            }, children: _jsx(Text, { style: { fontSize: 14, color: '#2cbaa4', fontWeight: '400', opacity: 1 }, children: "Re-send OTP" }) })] })] }), _jsx(View, { style: { width: '100%' }, children: _jsx(OTPStatusLabel, { status: status, timer: timer }) })] })] }));
+};
+export { OTPVerify };

package/build/src/components/VerifyOTP/types.js

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

package/build/src/constants/cdn-url/index.js

@@ -0,0 +1 @@
+export { MEMBER_IMAGES_URL } from "@truworth/twc-web-common";

package/build/src/constants/cdn-url/index.native.js

@@ -0,0 +1,5 @@
+const CdnImageUrl = () => {
+    return null;
+};
+export { CdnImageUrl };
+export default CdnImageUrl;

package/build/src/contexts/AuthContext.js

@@ -0,0 +1,185 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useEffect, useState, useMemo, useCallback } from 'react';
+import { MEMBER_IMAGES_URL } from '../constants/cdn-url';
+import { createHttpClient } from '../helpers/Network';
+/**
+ * Public Auth Authentication Context
+ *
+ * Exposed to consumers of the Auth package.
+ * Provides access to user profile, client info, logout, and helper utilities.
+ */
+const AuthContext = React.createContext(null);
+/**
+ * Package Auth Authentication Context
+ *
+ * Not meant for public use. Contains lower-level auth state such as
+ * token, login/logout functions, and refresh session.
+ */
+const AuthPackageContext = React.createContext(null);
+/**
+ * AuthProvider
+ *
+ * Provides authentication state and actions to children.
+ * Wraps both AuthContext (public) and AuthPackageContext (internal).
+ *
+ * @param children - React children to be rendered inside the provider
+ * @param LogoComponent - Optional component for branding/logo in auth flows
+ * @param session - Initial session containing token & sessionTimeout (if available)
+ * @param supportEmail - Optional support email for auth flows
+ * @param appConfig - Optional app config for auth flows
+ * @param onLogin - Optional callback after successful login
+ * @param onLogout - Optional callback after successful logout
+ * @param onLaunchAuthSession - Optional callback after successfully launching the auth session. For example, it can be used to set the Firebase notification token or request Android permissions.
+ * @param onRefreshSession - Optional handler for refreshing user session
+ */
+const AuthProvider = ({ children, LogoComponent, session, appConfig, onLogin, onLogout, onLaunchAuthSession, onRefreshSession }) => {
+    const [isLoadingProfile, setIsLoadingProfile] = useState(false);
+    const [profile, setProfile] = useState(null);
+    const [client, setClient] = useState(null);
+    const [registrationMethod, setRegistrationMethod] = useState(null);
+    const [token, setToken] = useState('');
+    const [otpValue, setOtpValue] = useState('');
+    const { request } = useMemo(() => createHttpClient({
+        token,
+        onRefreshSession: onRefreshSession
+            ? (t) => onRefreshSession({ token: t })
+            : undefined,
+        onLogout: async () => {
+            onLogout?.();
+            clearSession();
+        },
+    }), [token, onRefreshSession, onLogout]);
+    /**
+     * Sync local token state with session prop
+     */
+    useEffect(() => {
+        if (session?.token) {
+            setToken(session?.token);
+        }
+    }, [session?.token]);
+    /**
+     * fetch user profile if not already loaded.
+     */
+    useEffect(() => {
+        if (token && !profile) {
+            getUserProfile();
+        }
+    }, [token, profile]);
+    /**
+     * Logout user and clear authentication state.
+     * Falls back to default /auth/logout request
+     *
+     * @returns Promise<any> Resolves when logout is completed
+     */
+    const logout = useCallback(() => {
+        return new Promise((resolve, reject) => {
+            request({
+                url: '/auth/logout',
+                method: 'POST',
+            }).then((res) => {
+                clearSession();
+                onLogout?.();
+                resolve(res);
+            }).catch((err) => {
+                reject(err);
+            });
+        });
+    }, [request, onLogout]);
+    /**
+     * Fetch and update user profile and client data.
+     *
+     * @param token - Optional token for API request
+     * @returns Promise<any> Resolves with profile/config response
+     */
+    const getUserProfile = useCallback(() => {
+        if (isLoadingProfile)
+            return Promise.resolve(); // Prevent concurrent calls
+        setIsLoadingProfile(true);
+        return new Promise((resolve, reject) => {
+            request({
+                url: '/auth/config',
+                method: 'GET',
+            }).then((res) => {
+                const data = res?.data;
+                if (!data?.profile) {
+                    console.warn('No profile data received from /auth/config');
+                    return resolve(data);
+                }
+                const formatted = formatUserData(data);
+                setProfile(formatted.profile);
+                setClient(formatted.client);
+                resolve(data);
+            }).catch((err) => {
+                reject(err);
+            });
+        }).finally(() => {
+            setIsLoadingProfile(false);
+        });
+    }, [request, isLoadingProfile]);
+    const clearSession = useCallback(() => {
+        setToken('');
+        setClient(null);
+        setProfile(null);
+        setRegistrationMethod(null);
+    }, []);
+    /**
+   * Helper to normalize and format user profile data
+   * similar to legacy implementation.
+   *
+   * @param data - AuthConfigResponse from API
+   * @returns Object containing client and profile data
+   */
+    const formatUserData = useCallback((data) => {
+        const clientData = {
+            name: data.profile.clientName,
+            clientId: data.profile.clientId,
+            image: data.profile.clientImage,
+            partner: data.profile.partner,
+            directClient: data.profile.directClient
+        };
+        const profileData = {
+            ...data.profile,
+            firstName: data.profile.firstName,
+            lastName: data.profile.lastName,
+            image: data.profile?.image ? `${MEMBER_IMAGES_URL}${data.profile.image}` : '',
+        };
+        return { client: clientData, profile: profileData };
+    }, []);
+    const handleOtpReceived = (otp) => {
+        setOtpValue(otp);
+        setTimeout(() => setOtpValue(''), 0);
+    };
+    const AuthContextValues = {
+        token,
+        profile,
+        client,
+        isLoadingProfile,
+        logout,
+        onLaunchAuthSession,
+        getUserProfile,
+        onOtpReceived: handleOtpReceived,
+    };
+    const appConfigValue = {
+        appName: appConfig?.appName ?? 'The Wellness Corner',
+        supportEmail: appConfig?.supportEmail ?? 'support@thewellnesscorner.com',
+        privacyPolicyUrl: appConfig?.privacyPolicyUrl ?? 'https://thewellnesscorner.com/privacy-policy',
+        termsAndConditionsUrl: appConfig?.termsAndConditionsUrl ?? 'https://thewellnesscorner.com/privacy-policy'
+    };
+    const AuthPackageContextValues = {
+        token,
+        LogoComponent,
+        appConfig: appConfigValue,
+        registrationMethod,
+        onLaunchAuthSession,
+        onLogin,
+        logout,
+        refreshSession: onRefreshSession,
+        onTokenChange: (token) => setToken(token),
+        onRegistrationMethodChange: (method) => setRegistrationMethod(method),
+        otpValue,
+    };
+    return (_jsx(AuthContext.Provider, { value: AuthContextValues, children: _jsx(AuthPackageContext.Provider, { value: AuthPackageContextValues, children: children }) }));
+};
+export { AuthProvider };
+export default AuthContext;
+export { AuthPackageContext };

package/build/src/contexts/type.js

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