@truworth/twc-auth 3.0.7 → 3.0.9

package/build/src/screens/Profile/components/EditProfile/index.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useState } from 'react';
+import { Button, DatePicker, TextInput, TextArea, UploadButton, Col, Form, Row, RadioGroup, Flex, Typography, showNotification, useForm } from '@truworth/twc-web-design';
+import { Camera, Info, UserRound } from 'lucide-react';
+import { useProfile } from '../../hooks/internal/useProfile';
+import { MEMBER_IMAGES_URL } from '../../../../constants/cdn-url';
+const EditProfile = ({ onSuccess }) => {
+    const { loading, profileData, imageUrl, setImageUrl, updateProfile, uploadProfileImage } = useProfile();
+    const [image, setImage] = useState(null);
+    const editProfileForm = useForm({
+        values: {
+            firstName: profileData?.firstName || '',
+            lastName: profileData?.lastName || '',
+            bio: profileData?.bio || '',
+            gender: profileData?.gender || '',
+            dateOfBirth: profileData?.dateOfBirth instanceof Date ? profileData.dateOfBirth : undefined
+        },
+        liveValidation: true
+    });
+    const handleSubmit = async ({ firstName, lastName, bio }) => {
+        const payload = {
+            firstName,
+            lastName
+        };
+        if (bio)
+            payload.bio = bio;
+        if (image) {
+            const uploadedFileName = await uploadProfileImage(image);
+            if (uploadedFileName) {
+                payload.image = uploadedFileName;
+            }
+        }
+        await updateProfile(payload, () => {
+            onSuccess?.();
+            localStorage.setItem('profileData', JSON.stringify({
+                firstName: payload.firstName,
+                lastName: payload.lastName,
+                image: payload.image ? `${MEMBER_IMAGES_URL}${payload.image}` : imageUrl
+            }));
+        });
+    };
+    const beforeUpload = async (files) => {
+        const file = files[0];
+        if (!file)
+            return false;
+        const validTypes = ['image/png', 'image/jpg', 'image/jpeg'];
+        const isValidType = validTypes.includes(file.type);
+        const isLt5M = file.size / 1024 / 1024 < 5;
+        if (!isValidType) {
+            showNotification({
+                type: 'error',
+                description: `${file.name} is not a valid image file`,
+                showIcon: false
+            });
+            return false;
+        }
+        if (!isLt5M) {
+            showNotification({
+                type: 'error',
+                description: 'Image must be smaller than 5 MB',
+                showIcon: false
+            });
+            return false;
+        }
+        const reader = new FileReader();
+        reader.onload = () => setImageUrl(reader.result);
+        reader.readAsDataURL(file);
+        setImage(file);
+        return false;
+    };
+    useEffect(() => {
+        window.scrollTo({ top: 0 });
+    }, []);
+    const firstName = editProfileForm.watch('firstName');
+    const lastName = editProfileForm.watch('lastName');
+    const bio = editProfileForm.watch('bio');
+    const isDisabled = firstName?.length > 2 && lastName?.length > 2;
+    return (_jsxs(Form, { form: editProfileForm, onSubmit: handleSubmit, children: [_jsxs("div", { className: "mb-8 pb-8 border-b border-gray-100", children: [_jsx(Typography, { type: "utility", size: "large", className: "text-gray-700 font-medium mb-4", children: "Profile Picture" }), _jsxs(Flex, { align: "center", className: "gap-6", children: [_jsxs("div", { className: "relative group", children: [_jsx("div", { className: "w-24 h-24 rounded-2xl bg-gray-100 flex items-center justify-center overflow-hidden border-2 border-gray-200", children: !imageUrl ? (_jsx(UserRound, { size: 40, className: "text-gray-400" })) : (_jsx("img", { src: imageUrl, alt: "Profile", className: "w-full h-full object-cover" })) }), _jsx("div", { className: "absolute inset-0 rounded-2xl bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center", children: _jsx(UploadButton, { files: [], accept: ".png,.jpg,.jpeg", leftIcon: _jsx(Camera, { size: 24, className: "text-white" }), size: "small", buttonStyle: "border-0 p-0 bg-transparent hover:bg-transparent", onUpload: (files) => beforeUpload(files), showAttachments: false }) })] }), _jsxs("div", { children: [_jsx(Typography, { type: "body", size: "medium", className: "text-gray-900 font-medium", children: "Upload a new photo" }), _jsx(Typography, { type: "body", size: "small", className: "text-gray-500 mt-1", children: "JPG, PNG or JPEG. Max size 5MB" }), _jsx(UploadButton, { files: [], accept: ".png,.jpg,.jpeg", label: "Choose File", size: "small", buttonStyle: "mt-3 border-gray-300 text-gray-700 hover:bg-gray-50", onUpload: (files) => beforeUpload(files), showAttachments: false })] })] })] }), _jsxs("div", { className: "mb-8 pb-8 border-b border-gray-100", children: [_jsx(Typography, { type: "utility", size: "large", className: "text-gray-700 font-medium mb-4", children: "Personal Information" }), _jsxs(Row, { gutter: 20, children: [_jsx(Col, { md: 12, xs: 24, children: _jsx(Form.Item, { label: "First Name", name: "firstName", rules: [{
+                                            required: true,
+                                            message: 'Enter at least 3 letters.'
+                                        }], children: _jsx(TextInput, { placeholder: "Enter first name", className: "rounded-xl h-12" }) }) }), _jsx(Col, { md: 12, xs: 24, children: _jsx(Form.Item, { label: "Last Name", name: "lastName", rules: [{
+                                            required: true,
+                                            message: 'Enter at least 3 letters.'
+                                        }], children: _jsx(TextInput, { placeholder: "Enter last name", className: "rounded-xl h-12" }) }) })] })] }), _jsxs("div", { className: "mb-8 pb-8 border-b border-gray-100", children: [_jsx(Typography, { type: "utility", size: "large", className: "text-gray-700 font-medium mb-4", children: "Additional Details" }), _jsxs(Row, { gutter: 20, children: [_jsx(Col, { md: 12, xs: 24, children: _jsx(Form.Item, { label: _jsx("span", { className: "text-gray-500", children: "Gender" }), name: "gender", children: _jsx(RadioGroup, { disabled: true, orientation: "horizontal", options: [
+                                            { label: 'Male', value: 'M' },
+                                            { label: 'Female', value: 'F' }
+                                        ] }) }) }), _jsx(Col, { md: 12, xs: 24, children: _jsx(Form.Item, { label: _jsx("span", { className: "text-gray-500", children: "Date of Birth" }), name: "dateOfBirth", children: _jsx(DatePicker, { disabled: true, format: "dd/MM/yyyy", iconPosition: "right", className: "!bg-gray-50 rounded-xl h-12" }) }) })] }), _jsxs(Flex, { align: "center", className: "gap-2 p-3 bg-amber-50 rounded-xl border border-amber-100", children: [_jsx(Info, { size: 16, className: "text-amber-600 flex-shrink-0" }), _jsx(Typography, { type: "body", size: "small", className: "text-amber-800", children: "Please contact support to update Gender or Date of Birth." })] })] }), _jsxs("div", { className: "mb-8", children: [_jsx(Typography, { type: "utility", size: "large", className: "text-gray-700 font-medium mb-4", children: "About You" }), _jsx(Form.Item, { label: "Bio", name: "bio", children: _jsx(TextArea, { maxCount: 150, placeholder: "Tell us a bit about yourself..." }) })] }), _jsx(Flex, { justify: "end", className: "pt-4 border-t border-gray-100", children: _jsx(Button, { type: "submit", loading: loading, disabled: !isDisabled, className: "px-8", size: "large", children: "Save Changes" }) })] }));
+};
+export { EditProfile };

package/build/src/screens/Profile/components/EditProfile/index.native.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { View, Text } from 'react-native';
+// Native implementation placeholder
+const EditProfile = () => {
+    return (_jsx(View, { children: _jsx(Text, { children: "Edit Profile - Native Implementation" }) }));
+};
+export { EditProfile };

package/build/src/screens/Profile/components/OtpVerificationModal/index.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useState, useCallback } from 'react';
+import { Button, Typography, ResponsiveModal, OTPInput } from '@truworth/twc-web-design';
+import { useProfile } from '../../hooks/internal/useProfile';
+const OtpVerificationModal = ({ open, onOpenChange, phone, onSuccess, successMessage = 'Mobile number updated', title = 'Confirm Mobile Number' }) => {
+    const { loading, sendMobileOtp, verifyMobileOtp } = useProfile();
+    const [otp, setOtp] = useState('');
+    const [otpError, setOtpError] = useState(false);
+    const [resendTimer, setResendTimer] = useState(180);
+    const [timeLeft, setTimeLeft] = useState('03:00');
+    // Timer countdown
+    useEffect(() => {
+        if (!resendTimer)
+            return;
+        const intervalId = setInterval(() => {
+            const minute = Math.floor(resendTimer / 60);
+            const seconds = resendTimer % 60;
+            const formattedTime = `${minute < 10 ? '0' : ''}${minute}:${seconds < 10 ? '0' : ''}${seconds}`;
+            setTimeLeft(formattedTime);
+            setResendTimer(prev => prev - 1);
+        }, 1000);
+        return () => clearInterval(intervalId);
+    }, [resendTimer]);
+    // Send OTP when modal opens
+    useEffect(() => {
+        if (open) {
+            sendMobileOtp();
+            setResendTimer(180);
+            setOtp('');
+            setOtpError(false);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open]);
+    const handleChange = useCallback((code) => {
+        setOtp(code);
+        setOtpError(false);
+    }, []);
+    const handleVerify = useCallback(() => {
+        setOtpError(false);
+        verifyMobileOtp(otp, () => {
+            onOpenChange(false);
+            onSuccess?.();
+        }, () => {
+            setOtpError(true);
+        });
+    }, [otp, verifyMobileOtp, onOpenChange, onSuccess]);
+    const handleResend = useCallback(() => {
+        setResendTimer(180);
+        setOtpError(false);
+        setOtp('');
+        sendMobileOtp();
+    }, [sendMobileOtp]);
+    const handleClose = useCallback(() => {
+        setOtp('');
+        setOtpError(false);
+        onOpenChange(false);
+    }, [onOpenChange]);
+    const maskedPhone = phone ? `XXXXXXX${phone.slice(-3)}` : '';
+    return (_jsxs(ResponsiveModal, { size: "sm", title: _jsx(Typography, { type: "heading", size: "h6", children: title }), footer: null, open: open, showCloseButton: false, onOpenChange: handleClose, children: [_jsxs(Typography, { type: "body", size: "large", className: "mb-7 text-gray-400 text-center", children: ["OTP sent to", _jsx("span", { className: "pl-2 text-secondary-dark", children: maskedPhone })] }), _jsx(OTPInput, { className: "!w-full", onChange: handleChange, error: otpError, maxLength: 6, value: otp }), otpError && (_jsx(Typography, { type: "body", size: "medium", className: "text-utility-danger-main mt-2", children: "Please enter the correct OTP." })), resendTimer < 60 ? (_jsxs("div", { className: "flex justify-between items-center my-7", children: [_jsx(Typography, { type: "utility", size: "medium", className: "text-gray-400", children: "Didn't receive OTP?" }), _jsx(Button, { size: "small", variant: "link", onClick: handleResend, children: "Resend Code" })] })) : (_jsxs(Typography, { type: "utility", size: "medium", className: "my-7 text-gray-400", children: ["Resend Code in ", timeLeft] })), _jsx(Button, { isFullWidth: true, onClick: handleVerify, loading: loading, disabled: otp.length < 6, children: "Continue" })] }));
+};
+export { OtpVerificationModal };

package/build/src/screens/Profile/components/OtpVerificationModal/index.native.js

@@ -0,0 +1,7 @@
+import React from 'react';
+// Native implementation placeholder
+// For mobile, OTP verification would typically use a different flow
+const OtpVerificationModal = () => {
+    return null;
+};
+export { OtpVerificationModal };

package/build/src/screens/Profile/components/ProfileWebComponent/index.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState } from 'react';
+import { AvatarWithInitials, ResponsiveModal, Button, Flex, Typography } from '@truworth/twc-web-design';
+import { Lock, Phone, UserRound, Loader2, ChevronRight } from 'lucide-react';
+import { EditProfile } from '../EditProfile';
+import { EditMobileNumber } from '../EditMobileNumber';
+import { EditPassword } from '../EditPassword';
+import { useProfile } from '../../hooks/internal/useProfile';
+import { useAuthContext } from '../../../../hooks/useAuthContext';
+const tabs = [
+    {
+        key: 'edit-profile',
+        label: 'Edit Profile',
+        icon: _jsx(UserRound, { className: "w-5 h-5" })
+    },
+    {
+        key: 'mobile-number',
+        label: 'Mobile Number',
+        icon: _jsx(Phone, { className: "w-5 h-5" })
+    },
+    {
+        key: 'password',
+        label: 'Password',
+        icon: _jsx(Lock, { className: "w-5 h-5" })
+    }
+];
+const ProfileWebComponent = ({ onProfileUpdate, onMobileUpdate, onPasswordUpdate, containerClassName = '' }) => {
+    const { isLoadingProfile } = useAuthContext();
+    const { profile, profileData } = useProfile();
+    const [activeTab, setActiveTab] = useState('edit-profile');
+    const [showUnsavedModal, setShowUnsavedModal] = useState(false);
+    const [pendingTab, setPendingTab] = useState(null);
+    const [hasDirtyForm, setHasDirtyForm] = useState(false);
+    // Show loading state while profile is being fetched
+    if (isLoadingProfile && !profile) {
+        return (_jsx("div", { className: containerClassName, children: _jsx(Flex, { justify: "center", align: "center", className: "py-20", children: _jsx(Loader2, { className: "w-8 h-8 animate-spin text-primary" }) }) }));
+    }
+    const fullName = `${profile?.firstName || ''} ${profile?.lastName || ''}`.trim();
+    const handleTabChange = (key) => {
+        if (hasDirtyForm) {
+            setShowUnsavedModal(true);
+            setPendingTab(key);
+        }
+        else {
+            setActiveTab(key);
+        }
+    };
+    const handleConfirmLeave = () => {
+        setHasDirtyForm(false);
+        if (pendingTab) {
+            setActiveTab(pendingTab);
+            setPendingTab(null);
+        }
+        setShowUnsavedModal(false);
+    };
+    const renderTabContent = () => {
+        switch (activeTab) {
+            case 'edit-profile':
+                return _jsx(EditProfile, { onSuccess: onProfileUpdate });
+            case 'mobile-number':
+                return _jsx(EditMobileNumber, { onSuccess: onMobileUpdate });
+            case 'password':
+                return _jsx(EditPassword, { onSuccess: onPasswordUpdate });
+            default:
+                return null;
+        }
+    };
+    return (_jsxs("div", { className: `max-w-5xl mx-auto ${containerClassName}`, children: [_jsxs("div", { className: "mb-6", children: [_jsx(Typography, { type: "heading", size: "h4", className: "text-gray-900", children: "Account Settings" }), _jsx(Typography, { type: "body", size: "medium", className: "text-gray-500 mt-1", children: "Manage your profile and preferences" })] }), _jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-12 gap-6", children: [_jsxs("div", { className: "lg:col-span-4 space-y-4", children: [_jsx("div", { className: "bg-white rounded-2xl border border-gray-100 p-5 shadow-sm", children: _jsxs(Flex, { align: "center", className: "gap-4", children: [_jsxs("div", { className: "relative", children: [_jsx(AvatarWithInitials, { size: "large", name: fullName || 'User', url: profileData?.image, className: "w-16 h-16 text-xl" }), _jsx("div", { className: "absolute -bottom-1 -right-1 w-5 h-5 bg-green-500 rounded-full border-2 border-white" })] }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx(Typography, { type: "body", size: "large", className: "font-semibold text-gray-900 truncate", children: fullName || 'Welcome' }), _jsx(Typography, { type: "body", size: "small", className: "text-gray-500 truncate", children: profile?.email })] })] }) }), _jsx("div", { className: "bg-white rounded-2xl border border-gray-100 overflow-hidden shadow-sm", children: _jsx("nav", { className: "p-2", children: tabs.map((tab) => (_jsxs("button", { onClick: () => handleTabChange(tab.key), className: `
+                                        w-full flex items-center gap-3 px-4 py-3 rounded-xl text-left transition-all duration-200
+                                        ${activeTab === tab.key
+                                            ? 'bg-primary/10'
+                                            : 'hover:bg-gray-50'}
+                                    `, children: [_jsx("div", { className: `
+                                        w-9 h-9 rounded-lg flex items-center justify-center transition-colors
+                                        ${activeTab === tab.key
+                                                    ? 'bg-primary text-white'
+                                                    : 'bg-gray-100 text-gray-500'}
+                                    `, children: tab.icon }), _jsx("div", { className: "flex-1 min-w-0", children: _jsx(Typography, { type: "body", size: "medium", className: `font-medium ${activeTab === tab.key ? 'text-primary' : 'text-gray-900'}`, children: tab.label }) }), _jsx(ChevronRight, { className: `w-4 h-4 transition-colors ${activeTab === tab.key ? 'text-primary' : 'text-gray-300'}` })] }, tab.key))) }) })] }), _jsx("div", { className: "lg:col-span-8", children: _jsx("div", { className: "bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden", children: _jsx("div", { className: "p-6 lg:p-8", children: renderTabContent() }) }) })] }), _jsx(ResponsiveModal, { title: "", size: "sm", open: showUnsavedModal, footer: null, showCloseButton: false, onClose: () => setShowUnsavedModal(false), onOpenChange: () => setShowUnsavedModal(false), children: _jsxs(Flex, { direction: "column", align: "center", className: "py-6", children: [_jsx("div", { className: "w-16 h-16 rounded-full bg-amber-100 flex items-center justify-center mb-4", children: _jsx("svg", { className: "w-8 h-8 text-amber-500", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" }) }) }), _jsx(Typography, { type: "heading", size: "h6", className: "mb-2 text-gray-900", children: "Unsaved Changes" }), _jsx(Typography, { type: "body", size: "medium", className: "text-gray-500 text-center mb-6", children: "You have unsaved changes. Are you sure you want to leave?" }), _jsxs(Flex, { className: "gap-3 w-full", children: [_jsx(Button, { isFullWidth: true, variant: "outline", onClick: () => setShowUnsavedModal(false), children: "Stay" }), _jsx(Button, { isFullWidth: true, onClick: handleConfirmLeave, children: "Leave" })] })] }) })] }));
+};
+export { ProfileWebComponent };

package/build/src/screens/Profile/components/ProfileWebComponent/index.native.js

@@ -0,0 +1,9 @@
+import React from 'react';
+// Native implementation - Profile is typically handled differently on mobile
+const ProfileWebComponent = () => {
+    if (process.env.NODE_ENV !== 'production') {
+        console.warn('[@truworth/twc-auth] ProfileWebComponent is only available for web');
+    }
+    return null;
+};
+export { ProfileWebComponent };

package/build/src/screens/Profile/hooks/internal/useProfile.js

@@ -0,0 +1,185 @@
+import { useState, useEffect } from 'react';
+import { useAuthContext } from '../../../../hooks/useAuthContext';
+import { useRequest } from '../../../../hooks/useRequest';
+import { showMessage } from '../../../../helpers/show-message';
+import { parseISO } from 'date-fns';
+const useProfile = () => {
+    const { profile, getUserProfile } = useAuthContext();
+    const { makeRequest } = useRequest();
+    const [loading, setLoading] = useState(false);
+    const [imageUrl, setImageUrl] = useState('');
+    const [profileData, setProfileData] = useState({
+        firstName: '',
+        lastName: '',
+        dateOfBirth: new Date(),
+        gender: '',
+        phone: '',
+        bio: '',
+        image: '',
+        countryCode: '91'
+    });
+    useEffect(() => {
+        if (profile) {
+            const dob = profile.dateOfBirth && typeof profile.dateOfBirth === 'string'
+                ? parseISO(profile.dateOfBirth)
+                : profile.dateOfBirth || new Date();
+            setProfileData({
+                firstName: profile.firstName || '',
+                lastName: profile.lastName || '',
+                gender: profile.gender || '',
+                dateOfBirth: dob,
+                image: profile.image || '',
+                phone: profile.phone || '',
+                bio: profile.bio || '',
+                countryCode: profile.countryCode || '91'
+            });
+            if (profile.image) {
+                setImageUrl(profile.image);
+            }
+        }
+    }, [profile]);
+    const updateProfile = async (data, onSuccess) => {
+        setLoading(true);
+        try {
+            await makeRequest({
+                url: '/user/profile',
+                method: 'POST',
+                body: data,
+                onSuccess: () => {
+                    showMessage({ message: 'Your profile information is updated.' });
+                    getUserProfile?.();
+                    onSuccess?.();
+                },
+                onFailure: () => {
+                    showMessage({ message: 'Failed to update profile.' });
+                }
+            });
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    const uploadProfileImage = async (file) => {
+        const fileData = new FormData();
+        fileData.append('file', file);
+        try {
+            const response = await makeRequest({
+                url: '/upload/profile-picture',
+                method: 'POST',
+                body: fileData,
+                headers: {
+                    'Content-Type': 'multipart/form-data'
+                }
+            });
+            return response?.fileName || null;
+        }
+        catch {
+            showMessage({ message: 'Failed to upload image.' });
+            return null;
+        }
+    };
+    const updateMobileNumber = async (data, onSuccess, onFailure) => {
+        setLoading(true);
+        try {
+            await makeRequest({
+                url: '/user/mobile-number',
+                method: 'POST',
+                body: data,
+                onSuccess: () => {
+                    onSuccess?.();
+                },
+                onFailure: () => {
+                    showMessage({ message: 'Failed to update mobile number.' });
+                    onFailure?.();
+                }
+            });
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    const sendMobileOtp = async (onSuccess, onFailure) => {
+        try {
+            await makeRequest({
+                url: '/auth/mobile/send-otp',
+                method: 'POST',
+                onSuccess: () => onSuccess?.(),
+                onFailure: () => onFailure?.()
+            });
+        }
+        catch {
+            onFailure?.();
+        }
+    };
+    const verifyMobileOtp = async (otp, onSuccess, onFailure) => {
+        setLoading(true);
+        try {
+            await makeRequest({
+                url: '/auth/mobile/verify-otp',
+                method: 'POST',
+                body: { otp },
+                onSuccess: () => {
+                    showMessage({ message: 'Mobile number updated successfully.' });
+                    getUserProfile?.();
+                    onSuccess?.();
+                },
+                onFailure: () => {
+                    onFailure?.();
+                }
+            });
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    const changePassword = async (data, onSuccess, onFailure) => {
+        setLoading(true);
+        try {
+            // First, validate current password
+            const initResponse = await makeRequest({
+                url: '/auth/change-password/initialize-session',
+                method: 'POST',
+                body: { password: data.currentPassword }
+            });
+            if (initResponse?.token) {
+                // Then change the password
+                await makeRequest({
+                    url: '/auth/change-password',
+                    method: 'POST',
+                    body: { password: data.newPassword, token: initResponse.token },
+                    onSuccess: () => {
+                        showMessage({ message: 'Your password has been updated.' });
+                        onSuccess?.();
+                    },
+                    onFailure: () => {
+                        showMessage({ message: 'Failed to change password.' });
+                        onFailure?.();
+                    }
+                });
+            }
+            else {
+                onFailure?.('Invalid current password');
+            }
+        }
+        catch {
+            onFailure?.('Current password is incorrect');
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    return {
+        loading,
+        profile,
+        profileData,
+        imageUrl,
+        setImageUrl,
+        updateProfile,
+        uploadProfileImage,
+        updateMobileNumber,
+        sendMobileOtp,
+        verifyMobileOtp,
+        changePassword
+    };
+};
+export { useProfile };

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

@@ -0,0 +1,6 @@
+export { ProfileWebComponent } from './components/ProfileWebComponent';
+export { EditProfile } from './components/EditProfile';
+export { EditMobileNumber } from './components/EditMobileNumber';
+export { EditPassword } from './components/EditPassword';
+export { OtpVerificationModal } from './components/OtpVerificationModal';
+export { useProfile } from './hooks/internal/useProfile';

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

@@ -0,0 +1,6 @@
+export { ProfileWebComponent } from './components/ProfileWebComponent/index.native';
+export { EditProfile } from './components/EditProfile/index.native';
+export { EditMobileNumber } from './components/EditMobileNumber/index.native';
+export { EditPassword } from './components/EditPassword/index.native';
+export { OtpVerificationModal } from './components/OtpVerificationModal/index.native';
+export { useProfile } from './hooks/internal/useProfile';

package/build/src/screens/Profile/types.js

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

package/build/src/screens/ResetPassword/hooks/internal/useResetPassword.js

@@ -0,0 +1,57 @@
+import { useState } from "react";
+import { showMessage } from "../../../../helpers/show-message";
+import { axiosClient } from "../../../../api/axiosClient";
+import { defaultPolicy } from "../../../../constants/defaultPolicy";
+/**
+ * @internal
+ * Hook for managing ResetPassword screen state and auth context integration.
+ * This hook is not exposed to package consumers.
+ */
+const useResetPassword = ({ sessionToken }) => {
+    const [loading, setLoading] = useState(false);
+    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({});
+    const handlePassword = (text) => {
+        setPassword(text.replace(/\s/g, ''));
+    };
+    const handleConfirmPassword = (text) => {
+        setConfirmPassword(text.replace(/\s/g, ''));
+    };
+    const handleContinue = ({ onResult }) => {
+        setLoading(true);
+        axiosClient({
+            url: '/auth/reset-password',
+            method: 'POST',
+            data: { sessionToken, password },
+        }).then(() => {
+            showMessage({ message: 'Password updated successfully. Please login with your new credentials.', type: 'success' });
+            onResult();
+        }).catch((err) => {
+            console.log(err);
+            if (err?.response?.status === 401) {
+                showMessage({ message: 'Your session expired. Please request a new OTP.' });
+                return;
+            }
+            showMessage({ message: err?.response?.data?.errors?.[0]?.message || 'An unexpected error occurred' });
+        }).finally(() => setLoading(false));
+    };
+    const isContinueDisabled = !Object.keys(criteria).every(c => criteria[c]) || (password !== confirmPassword);
+    return {
+        loading,
+        password, setPassword,
+        confirmPassword, setConfirmPassword,
+        passwordVisible, setPasswordVisible,
+        confirmPasswordVisible, setConfirmPasswordVisible,
+        maxLength, setMaxLength,
+        criteria, setCriteria,
+        handlePassword,
+        handleContinue,
+        handleConfirmPassword,
+        isContinueDisabled
+    };
+};
+export { useResetPassword };

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

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Flex, Form, PasswordInput, useForm } from "@truworth/twc-web-design";
+import { useResetPassword } from "./hooks/internal/useResetPassword";
+import { ScreenLayout } from "../../components/ScreenLayout";
+import { PasswordCriteria } from "../../components/PasswordCriteria";
+const ResetPassword = ({ email, sessionToken, onPressBack, onContinue }) => {
+    const form = useForm({
+        defaultValues: {
+            password: '',
+            confirmPassword: '',
+        }
+    });
+    const { password, confirmPassword } = form.watch();
+    const { loading, criteria, setCriteria, maxLength, setMaxLength, handlePassword, handleConfirmPassword, handleContinue, isContinueDisabled } = useResetPassword({ sessionToken });
+    return (_jsx(ScreenLayout, { title: "Reset your Password", subTitle: "Use a password that\u2019s easy to remember and fulfills all the requirements listed below.", buttonProps: {
+            loading,
+            label: 'Continue',
+            onClick: () => handleContinue({ onResult: onContinue }),
+            disabled: isContinueDisabled
+        }, onPressBack: onPressBack, children: _jsx(Flex, { direction: "column", children: _jsxs(Form, { form: form, className: "w-full", children: [_jsx(Form.Item, { label: "Enter Password", normalize: (value) => value.replace(/\s/g, ''), rules: [
+                            {
+                                required: true,
+                                message: 'Please enter your password'
+                            }
+                        ], ...form.register('password', {
+                            onChange: (e) => handlePassword(e.target.value)
+                        }), 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, { 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 (password !== value) {
+                                        throw new Error('Passwords don’t match');
+                                    }
+                                },
+                            },
+                        ], ...form.register('confirmPassword', {
+                            onChange: (e) => handleConfirmPassword(e.target.value)
+                        }), children: _jsx(PasswordInput, { className: "mb-6", value: confirmPassword, placeholder: "Re-enter password", maxLength: maxLength, showStrengthIndicator: false }) })] }) }) }));
+};
+export default ResetPassword;

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

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Colors, TextInputField } from '@truworth/twc-rn-common';
+import { Layout } from '@ui-kitten/components';
+import { ScreenLayout } from '../../components/ScreenLayout';
+import { useResetPassword } from './hooks/internal/useResetPassword';
+import { PasswordCriteria } from '../../components/PasswordCriteria/index.native';
+const { primary } = Colors;
+const ResetPassword = ({ navigation, route }) => {
+    const { sessionToken, email } = route.params || {};
+    const { loading, password, confirmPassword, passwordVisible, setPasswordVisible, confirmPasswordVisible, setConfirmPasswordVisible, maxLength, setMaxLength, criteria, setCriteria, handlePassword, handleContinue, handleConfirmPassword, isContinueDisabled } = useResetPassword({ sessionToken });
+    return (_jsx(Layout, { style: { flex: 1, backgroundColor: primary.white }, children: _jsxs(ScreenLayout, { title: "Reset your Password", subTitle: "Use a password that\u2019s easy to remember and fulfills all the requirements listed below.", buttonProps: {
+                loading,
+                label: 'Continue',
+                onPress: () => {
+                    handleContinue({
+                        onResult: () => navigation.navigate('EnterEmail')
+                    });
+                },
+                disabled: isContinueDisabled
+            }, 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, criteria: criteria, onCriteriaChange: setCriteria, onMaxLengthChange: setMaxLength, password: password }), _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 ResetPassword;

package/build/src/screens/ResetPassword/types.js

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

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

@@ -0,0 +1,9 @@
+const SSOAuthWebView = () => {
+    if (process.env.NODE_ENV !== 'production') {
+        if (typeof window !== 'undefined') {
+            console.warn("[@truworth/twc-auth] SSOAuthWebView is only available for native app screens");
+        }
+    }
+    return null;
+};
+export default SSOAuthWebView;