@truworth/twc-auth 2.0.0 → 3.0.1

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

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { IonIcon } from '../../components/IonIcon';
 import { Button, Flex, ResponsiveModal, Typography } from '@truworth/twc-web-design';
-const ConfirmationModal = ({ title, visible, onClose, onProceed, onDismiss, primaryLabel, secondaryLabel, iconName = "information-circle-outline", iconColor = "hsl(var(--tw-ui-utility---warning--main))", description }) => {
-    return (_jsx(ResponsiveModal, { title: "", open: visible, onClose: onClose, footer: null, showCloseButton: false, className: 'py-0', children: _jsxs(Flex, { direction: "column", align: "center", justify: "center", children: [_jsxs(Flex, { direction: "column", align: "center", justify: "center", children: [_jsx(IonIcon, { name: iconName, style: { color: iconColor, fontSize: 96 } }), title &&
+const ConfirmationModal = ({ title, visible, onClose, onProceed, onDismiss, primaryLabel, secondaryLabel, iconName = "information-circle-outline", iconClassName = "text-utility-warning-main", description }) => {
+    return (_jsx(ResponsiveModal, { title: "", open: visible, onClose: onClose, footer: null, showCloseButton: false, className: 'py-0', children: _jsxs(Flex, { direction: "column", align: "center", justify: "center", children: [_jsxs(Flex, { direction: "column", align: "center", justify: "center", children: [_jsx(IonIcon, { name: iconName, className: `text-[96px] ${iconClassName}` }), title &&
                             _jsx(Typography, { type: "heading", size: "h6", className: "mt-2 text-center", children: title }), description &&
                             _jsx(Typography, { type: "utility", size: "medium", color: 'gray-600', className: "mt-2 mb-6 text-center", children: description })] }), primaryLabel &&
                     _jsx(Button, { onClick: () => onProceed?.(), label: primaryLabel, className: 'w-full my-3' }), secondaryLabel &&

package/build/src/constants/password-requirements.js

@@ -0,0 +1,7 @@
+export const strongPasswordRequirements = [
+    { regex: /.{6,}/, text: "At least 6 characters" },
+    { regex: /[0-9]/, text: "At least 1 number" },
+    { regex: /[a-z]/, text: "At least 1 lowercase letter" },
+    { regex: /[A-Z]/, text: "At least 1 uppercase letter" },
+    { regex: /[!@#$%^&*()_+]/, text: "At least 1 special character" }
+];

package/build/src/index.js

@@ -14,3 +14,7 @@ export * from './navigator';
 export * from './screens/Login/components/LoginWebComponent/index';
 export * from './screens/SignUp/components/SignUpWebComponent/index';
 export * from './screens/SSOLogin/SSOCallback/components/SSOCallbackComponent/index';
+// export profile components
+export * from './screens/Profile';
+// export constants
+export { strongPasswordRequirements } from './constants/password-requirements';

package/build/src/screens/EnterMobile/components/ExistingAccountsSheet/index.js

@@ -23,7 +23,7 @@ const ExistingAccountsSheet = ({ visible, hide, phone, existingAccounts, onIniti
     };
     const displayPhone = phone ? `+91${phone.replace(/^.{8}/, 'XXXXXXXX')}` : '+91**********';
     return (_jsxs(ResponsiveModal, { open: visible, onClose: hide, onOpenChange: hide, maskClosable: false, title: _jsxs(_Fragment, { children: [_jsx(Typography, { type: "heading", size: "h6", children: "Multiple Accounts Found" }), _jsxs(Typography, { type: "utility", size: "medium", color: "gray-600", className: "mt-2 mb-3", children: ["The phone number ", displayPhone, " is linked to the following accounts."] }), _jsx("hr", {})] }), centered: true, showCloseButton: false, className: "px-0", footer: _jsxs(Flex, { direction: "column", className: 'pt-1', children: [_jsx(Flex, { className: "flex-1 border-t border-gray-300 mb-2" }), selectedAccount &&
-                    _jsxs(Flex, { align: 'center', className: 'bg-utility-warning-bg p-2 rounded-lg gap-1', children: [_jsx(IonIcon, { name: "information-circle-outline", style: { color: "hsl(var(--tw-ui-utility---warning--main))", fontSize: 24 } }), _jsxs(Typography, { type: "utility", size: "small", children: [_jsx("span", { className: "text-gray-500 text-[12px]", children: "Once you proceed, this phone number will be removed" }), " from other accounts."] })] }), _jsx(Button, { isFullWidth: true, loading: loading, variant: "primary", label: "Link and Continue", className: 'mt-4 mb-[-16px]', onClick: onContinue, disabled: !selectedAccount }), _jsx(SupportDetails, {})] }), children: [_jsx(Typography, { type: "utility", size: "medium", className: "mb-4", children: "Select account you want to continue with." }), existingAccounts.map((item) => {
+                    _jsxs(Flex, { align: 'center', className: 'bg-utility-warning-bg p-2 rounded-lg gap-1', children: [_jsx(IonIcon, { name: "information-circle-outline", className: "text-utility-warning-main text-2xl" }), _jsxs(Typography, { type: "utility", size: "small", children: [_jsx("span", { className: "text-gray-500 text-[12px]", children: "Once you proceed, this phone number will be removed" }), " from other accounts."] })] }), _jsx(Button, { isFullWidth: true, loading: loading, variant: "primary", label: "Link and Continue", className: 'mt-4 mb-[-16px]', onClick: onContinue, disabled: !selectedAccount }), _jsx(SupportDetails, {})] }), children: [_jsx(Typography, { type: "utility", size: "medium", className: "mb-4", children: "Select account you want to continue with." }), existingAccounts.map((item) => {
                 return (_jsx(OptionCard, { item: item, onClick: () => setSelectedAccount(item), selectedItem: selectedAccount }, item.memberId));
             })] }));
 };

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

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useState } from 'react';
+import { Button, TextInput, Typography } from '@truworth/twc-web-design';
+import { Phone, Shield } from 'lucide-react';
+import { useProfile } from '../../hooks/internal/useProfile';
+import { OtpVerificationModal } from '../OtpVerificationModal';
+const EditMobileNumber = ({ onSuccess }) => {
+    const { loading, profileData, updateMobileNumber } = useProfile();
+    const [showOtpModal, setShowOtpModal] = useState(false);
+    const [newPhone, setNewPhone] = useState('');
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        const countryCode = profileData?.countryCode || '91';
+        updateMobileNumber({ countryCode, mobileNo: newPhone }, () => setShowOtpModal(true));
+    };
+    const handlePhoneChange = (e) => {
+        const value = e.target.value.replace(/\s+|[^\d]/g, '').trim().slice(0, 10);
+        setNewPhone(value);
+    };
+    const handleOtpSuccess = () => {
+        setShowOtpModal(false);
+        setNewPhone('');
+        onSuccess?.();
+    };
+    const currentPhone = profileData?.phone || '';
+    const maskedCurrentPhone = currentPhone
+        ? `+91 ${currentPhone.slice(0, 2)}******${currentPhone.slice(-2)}`
+        : 'Not set';
+    return (_jsxs(_Fragment, { children: [_jsxs("form", { 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: "Current Mobile Number" }), _jsxs("div", { className: "flex items-center gap-4 p-4 bg-gray-50 rounded-xl border border-gray-100", children: [_jsx("div", { className: "w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center", children: _jsx(Phone, { className: "w-6 h-6 text-primary" }) }), _jsxs("div", { children: [_jsx(Typography, { type: "body", size: "large", className: "text-gray-900 font-medium", children: maskedCurrentPhone }), _jsx(Typography, { type: "body", size: "small", className: "text-gray-500", children: "Verified and active" })] }), _jsxs("div", { className: "ml-auto flex items-center gap-1 text-green-600", children: [_jsx(Shield, { className: "w-4 h-4" }), _jsx("span", { className: "text-sm font-medium", children: "Verified" })] })] })] }), _jsxs("div", { className: "mb-8", children: [_jsx(Typography, { type: "utility", size: "large", className: "text-gray-700 font-medium mb-4", children: "Update Mobile Number" }), _jsx(Typography, { type: "body", size: "medium", className: "text-gray-500 mb-4", children: "Enter your new mobile number. We'll send an OTP to verify it." }), _jsxs("div", { className: "flex gap-4", children: [_jsxs("div", { className: "w-24", children: [_jsx("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: "Country" }), _jsx(TextInput, { disabled: true, value: "+91", className: "bg-gray-50 rounded-xl h-12 text-center font-medium" })] }), _jsxs("div", { className: "flex-1", children: [_jsx("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: "New Mobile Number" }), _jsx(TextInput, { value: newPhone, onChange: handlePhoneChange, placeholder: "Enter 10-digit mobile number", className: "rounded-xl h-12", maxLength: 10 })] })] }), newPhone.length > 0 && newPhone.length < 10 && (_jsx(Typography, { type: "body", size: "small", className: "text-amber-600 mt-2", children: "Please enter a valid 10-digit mobile number" }))] }), _jsx("div", { className: "mb-8 p-4 bg-blue-50 rounded-xl border border-blue-100", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "w-8 h-8 rounded-lg bg-blue-100 flex items-center justify-center flex-shrink-0", children: _jsx(Shield, { className: "w-4 h-4 text-blue-600" }) }), _jsxs("div", { children: [_jsx(Typography, { type: "body", size: "medium", className: "text-blue-900 font-medium mb-1", children: "Verification Required" }), _jsx(Typography, { type: "body", size: "small", className: "text-blue-700", children: "For your security, we'll send a one-time password (OTP) to your new mobile number to verify the change." })] })] }) }), _jsx("div", { className: "flex justify-end pt-4 border-t border-gray-100", children: _jsx(Button, { type: "submit", loading: loading, disabled: newPhone.length !== 10, className: "px-8", size: "large", children: "Verify & Update" }) })] }), _jsx(OtpVerificationModal, { open: showOtpModal, onOpenChange: setShowOtpModal, phone: newPhone, onSuccess: handleOtpSuccess })] }));
+};
+export { EditMobileNumber };

package/build/src/screens/Profile/components/EditMobileNumber/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 EditMobileNumber = () => {
+    return (_jsx(View, { children: _jsx(Text, { children: "Edit Mobile Number - Native Implementation" }) }));
+};
+export { EditMobileNumber };

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

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState } from 'react';
+import { Button, Col, Form, Row, PasswordInput, Typography, Flex, useForm } from '@truworth/twc-web-design';
+import { Shield, AlertCircle } from 'lucide-react';
+import { useProfile } from '../../hooks/internal/useProfile';
+import { strongPasswordRequirements } from '../../../../constants/password-requirements';
+const EditPassword = ({ onSuccess }) => {
+    const { loading, changePassword } = useProfile();
+    const [currentValidate, setCurrentValidate] = useState(false);
+    const [strongPassword, setStrongPassword] = useState(false);
+    const editPasswordForm = useForm();
+    const handleSubmit = ({ currentPassword, password, newPassword }) => {
+        setCurrentValidate(false);
+        changePassword({ currentPassword, newPassword }, () => {
+            editPasswordForm.reset();
+            setCurrentValidate(false);
+            onSuccess?.();
+        }, () => {
+            setCurrentValidate(true);
+        });
+    };
+    const currentPassword = editPasswordForm.watch('currentPassword');
+    const password = editPasswordForm.watch('password');
+    const newPassword = editPasswordForm.watch('newPassword');
+    const passwordsMatch = password && newPassword && password === newPassword;
+    const disabled = currentPassword && strongPassword && passwordsMatch;
+    return (_jsxs(Form, { form: editPasswordForm, 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: "Current Password" }), _jsx(Typography, { type: "body", size: "medium", className: "text-gray-500 mb-4", children: "Enter your current password to verify it's you." }), _jsx(Row, { children: _jsx(Col, { md: 16, xs: 24, children: _jsx(Form.Item, { name: "currentPassword", normalize: (value) => value.replace(/\s/g, ''), children: _jsx(PasswordInput, { showStrengthIndicator: false, placeholder: "Enter your current password", minLength: 3, className: "rounded-xl" }) }) }) }), currentValidate && (_jsxs(Flex, { align: "center", className: "gap-2 p-3 mt-2 bg-red-50 rounded-xl border border-red-100", children: [_jsx(AlertCircle, { size: 16, className: "text-red-600 flex-shrink-0" }), _jsx(Typography, { type: "body", size: "small", className: "text-red-700", children: "The password you entered doesn't match your current password." })] }))] }), _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: "Create New Password" }), _jsx(Typography, { type: "body", size: "medium", className: "text-gray-500 mb-4", children: "Choose a strong password that you don't use for other accounts." }), _jsxs(Row, { gutter: 20, children: [_jsx(Col, { md: 12, xs: 24, children: _jsx(Form.Item, { name: "password", label: "New Password", normalize: (value) => value.replace(/\s/g, ''), children: _jsx(PasswordInput, { requirements: strongPasswordRequirements, showStrengthIndicator: true, placeholder: "Create a new password", minLength: 3, className: "rounded-xl", onAllRequirementsMet: (value) => setStrongPassword(value) }) }) }), _jsxs(Col, { md: 12, xs: 24, children: [_jsx(Form.Item, { name: "newPassword", label: "Confirm New Password", normalize: (value) => value.replace(/\s/g, ''), children: _jsx(PasswordInput, { minLength: 3, placeholder: "Re-enter your new password", showStrengthIndicator: false, className: "rounded-xl" }) }), password && newPassword && !passwordsMatch && (_jsx(Typography, { type: "body", size: "small", className: "text-red-600 mt-1", children: "Passwords don't match" })), passwordsMatch && (_jsx(Typography, { type: "body", size: "small", className: "text-green-600 mt-1", children: "\u2713 Passwords match" }))] })] })] }), _jsx("div", { className: "mb-8 p-4 bg-primary/5 rounded-xl border border-primary/10", children: _jsxs(Flex, { align: "start", className: "gap-3", children: [_jsx("div", { className: "w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center flex-shrink-0", children: _jsx(Shield, { className: "w-4 h-4 text-primary" }) }), _jsxs("div", { children: [_jsx(Typography, { type: "body", size: "medium", className: "text-gray-900 font-medium mb-1", children: "Password Security Tips" }), _jsxs("ul", { className: "text-sm text-gray-600 space-y-1", children: [_jsx("li", { children: "\u2022 Use a mix of letters, numbers, and symbols" }), _jsx("li", { children: "\u2022 Avoid using personal information" }), _jsx("li", { children: "\u2022 Don't reuse passwords from other accounts" })] })] })] }) }), _jsx(Flex, { justify: "end", className: "pt-4 border-t border-gray-100", children: _jsx(Button, { loading: loading, type: "submit", disabled: !disabled, className: "px-8", size: "large", children: "Update Password" }) })] }));
+};
+export { EditPassword };

package/build/src/screens/Profile/components/EditPassword/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 EditPassword = () => {
+    return (_jsx(View, { children: _jsx(Text, { children: "Edit Password - Native Implementation" }) }));
+};
+export { EditPassword };

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/Welcome/index.js

@@ -23,6 +23,6 @@ const Welcome = ({ onClickEnterEmail }) => {
         // Fallback to default logo
         return (_jsx("img", { width: 160, height: 35, className: 'md:mt-0 mt-6 md:h-[40px] h-[30px]', src: `${CDN_IMAGES_URL}/new-twc_logo.svg` }));
     };
-    return (_jsx(AdvancedTransitionWrapper, { type: 'slide', duration: 0.3, children: _jsxs(Flex, { justify: 'center', align: "center", direction: 'column', className: 'h-screen w-[80%] mx-auto gap-6', children: [renderLogo(), _jsxs(Flex, { justify: "center", align: "center", direction: "column", className: 'gap-2', children: [_jsx(Typography, { type: 'heading', size: 'h5', className: 'text-center text-[#1A1A1A] font-semibold', children: "Welcome!" }), _jsx(Typography, { type: 'utility', size: 'large', color: "gray-400", className: 'text-center font-semibold', children: "Select an option to proceed" })] }), _jsx(Button, { label: "Enter Your Email", variant: "secondary", onClick: onClickEnterEmail, leftIcon: _jsx(Mail, { size: 20 }), isFullWidth: true })] }) }));
+    return (_jsx(AdvancedTransitionWrapper, { type: 'slide', duration: 0.3, children: _jsxs(Flex, { justify: 'center', align: "center", direction: 'column', className: 'h-screen w-[80%] mx-auto gap-6', children: [renderLogo(), _jsxs(Flex, { justify: "center", align: "center", direction: "column", className: 'gap-2', children: [_jsx(Typography, { type: 'heading', size: 'h5', className: 'text-center text-gray-900 font-semibold', children: "Welcome!" }), _jsx(Typography, { type: 'utility', size: 'large', color: "gray-400", className: 'text-center font-semibold', children: "Select an option to proceed" })] }), _jsx(Button, { label: "Enter Your Email", variant: "secondary", onClick: onClickEnterEmail, leftIcon: _jsx(Mail, { size: 20 }), isFullWidth: true })] }) }));
 };
 export default Welcome;

package/build/types/components/ConfirmationModal/index.d.ts

@@ -1,3 +1,3 @@
 import type { ConfirmationModalProps } from './types';
-declare const ConfirmationModal: ({ title, visible, onClose, onProceed, onDismiss, primaryLabel, secondaryLabel, iconName, iconColor, description }: ConfirmationModalProps) => import("react/jsx-runtime").JSX.Element;
+declare const ConfirmationModal: ({ title, visible, onClose, onProceed, onDismiss, primaryLabel, secondaryLabel, iconName, iconClassName, description }: ConfirmationModalProps) => import("react/jsx-runtime").JSX.Element;
 export { ConfirmationModal };

package/build/types/components/ConfirmationModal/types.d.ts

@@ -4,7 +4,10 @@ type ConfirmationModalProps = {
     primaryLabel: string;
     secondaryLabel?: string;
     iconName?: string;
+    /** @deprecated Use iconClassName instead for Tailwind classes */
     iconColor?: string;
+    /** Tailwind classes for icon styling, e.g. "text-primary" or "text-utility-warning-main" */
+    iconClassName?: string;
     onClose: () => void;
     onProceed?: () => void;
     onDismiss?: () => void;

package/build/types/constants/password-requirements.d.ts

@@ -0,0 +1,4 @@
+export declare const strongPasswordRequirements: {
+    regex: RegExp;
+    text: string;
+}[];

package/build/types/index.d.ts

@@ -9,3 +9,5 @@ export * from './navigator';
 export * from './screens/Login/components/LoginWebComponent/index';
 export * from './screens/SignUp/components/SignUpWebComponent/index';
 export * from './screens/SSOLogin/SSOCallback/components/SSOCallbackComponent/index';
+export * from './screens/Profile';
+export { strongPasswordRequirements } from './constants/password-requirements';

package/build/types/screens/Profile/components/EditMobileNumber/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface EditMobileNumberProps {
+    onSuccess?: () => void;
+}
+declare const EditMobileNumber: React.FC<EditMobileNumberProps>;
+export { EditMobileNumber };

package/build/types/screens/Profile/components/EditMobileNumber/index.native.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const EditMobileNumber: React.FC<any>;
+export { EditMobileNumber };

package/build/types/screens/Profile/components/EditPassword/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface EditPasswordProps {
+    onSuccess?: () => void;
+}
+declare const EditPassword: React.FC<EditPasswordProps>;
+export { EditPassword };

package/build/types/screens/Profile/components/EditPassword/index.native.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const EditPassword: React.FC<any>;
+export { EditPassword };

package/build/types/screens/Profile/components/EditProfile/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface EditProfileProps {
+    onSuccess?: () => void;
+}
+declare const EditProfile: React.FC<EditProfileProps>;
+export { EditProfile };

package/build/types/screens/Profile/components/EditProfile/index.native.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const EditProfile: React.FC<any>;
+export { EditProfile };

package/build/types/screens/Profile/components/OtpVerificationModal/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { OtpVerificationModalProps } from '../../types';
+declare const OtpVerificationModal: React.FC<OtpVerificationModalProps>;
+export { OtpVerificationModal };

package/build/types/screens/Profile/components/OtpVerificationModal/index.native.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const OtpVerificationModal: React.FC<any>;
+export { OtpVerificationModal };

package/build/types/screens/Profile/components/ProfileWebComponent/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { ProfileWebComponentProps } from '../../types';
+declare const ProfileWebComponent: React.FC<ProfileWebComponentProps>;
+export { ProfileWebComponent };

package/build/types/screens/Profile/components/ProfileWebComponent/index.native.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const ProfileWebComponent: React.FC<any>;
+export { ProfileWebComponent };

package/build/types/screens/Profile/hooks/internal/useProfile.d.ts

@@ -0,0 +1,26 @@
+import type { ProfileData } from '../../types';
+declare const useProfile: () => {
+    loading: boolean;
+    profile: import("../../../..").MemberProfile | null;
+    profileData: ProfileData;
+    imageUrl: string;
+    setImageUrl: import("react").Dispatch<import("react").SetStateAction<string>>;
+    updateProfile: (data: {
+        firstName: string;
+        lastName: string;
+        bio?: string;
+        image?: string;
+    }, onSuccess?: () => void) => Promise<void>;
+    uploadProfileImage: (file: File) => Promise<string | null>;
+    updateMobileNumber: (data: {
+        countryCode: string;
+        mobileNo: string;
+    }, onSuccess?: () => void, onFailure?: () => void) => Promise<void>;
+    sendMobileOtp: (onSuccess?: () => void, onFailure?: () => void) => Promise<void>;
+    verifyMobileOtp: (otp: string, onSuccess?: () => void, onFailure?: () => void) => Promise<void>;
+    changePassword: (data: {
+        currentPassword: string;
+        newPassword: string;
+    }, onSuccess?: () => void, onFailure?: (error?: string) => void) => Promise<void>;
+};
+export { useProfile };

package/build/types/screens/Profile/index.d.ts

@@ -0,0 +1,7 @@
+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';
+export type * from './types';

package/build/types/screens/Profile/index.native.d.ts

@@ -0,0 +1,7 @@
+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';
+export type * from './types';

package/build/types/screens/Profile/types.d.ts

@@ -0,0 +1,53 @@
+import type React from 'react';
+interface ProfileData {
+    firstName: string;
+    lastName: string;
+    dateOfBirth: Date | string;
+    gender: string;
+    bio?: string;
+    image?: string;
+    phone?: string;
+    countryCode?: string;
+}
+interface EditProfileProps {
+    profileData: ProfileData;
+    imageUrl?: string;
+    setImageUrl: React.Dispatch<React.SetStateAction<string>>;
+    editProfileForm: any;
+    onSuccess?: () => void;
+}
+interface EditMobileNumberProps {
+    countryCode?: string;
+    editPhoneForm: any;
+    onSuccess?: () => void;
+}
+interface EditPasswordProps {
+    editPasswordForm: any;
+    onSuccess?: () => void;
+}
+interface OtpVerificationModalProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    phone: string;
+    countryCode?: string;
+    onSuccess?: () => void;
+    successMessage?: string;
+    title?: string | React.ReactNode;
+}
+interface ProfileWebComponentProps {
+    /** Optional header component to wrap the profile content */
+    HeaderComponent?: React.ComponentType<{
+        children: React.ReactNode;
+    }>;
+    /** Optional footer component */
+    FooterComponent?: React.ComponentType;
+    /** Callback when profile is updated successfully */
+    onProfileUpdate?: () => void;
+    /** Callback when mobile number is updated successfully */
+    onMobileUpdate?: () => void;
+    /** Callback when password is updated successfully */
+    onPasswordUpdate?: () => void;
+    /** Custom container className */
+    containerClassName?: string;
+}
+export type { ProfileData, EditProfileProps, EditMobileNumberProps, EditPasswordProps, OtpVerificationModalProps, ProfileWebComponentProps };

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "description": "Truworth Auth Package for React Native and Web",
-  "version": "2.0.0",
+  "version": "3.0.1",
   "main": "build/src/index.js",
   "types": "build/types/index.d.ts",
   "files": [
@@ -27,7 +27,7 @@
     "@react-navigation/native": "6.1.17",
     "@react-navigation/native-stack": "6.10.0",
     "@truworth/twc-rn-common": "1.1.2",
-    "@truworth/twc-web-design": "1.11.0",
+    "@truworth/twc-web-design": "2.0.0",
     "@twotalltotems/react-native-otp-input": "1.3.11",
     "@types/crypto-js": "^4.2.2",
     "@types/fbemitter": "^2.0.35",