@truworth/twc-auth 1.2.12-beta.0 → 1.2.12-beta.2

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/SSOLogin/AuthWebView/index.native.js

@@ -3,25 +3,40 @@ import { WebView } from '@truworth/twc-rn-common';
 import { Layout } from '@ui-kitten/components';
 import { Text } from 'react-native';
 import parse from 'url-parse';
-import { useState } from 'react';
+import { useState, useCallback } from 'react';
+const SAML_CALLBACK_PATHS = ['/saml', 'thewellnesscorner.com/saml'];
 const SSOAuthWebView = ({ navigation, route }) => {
-    const { clientId, authenticationUrl, redirectUri } = route.params;
+    const { clientId, authenticationUrl, redirectUri, authMethod } = route.params;
     const [error, setError] = useState(null);
+    const handleNavigationStateChange = useCallback((navState) => {
+        setError(null);
+        const parsedUrl = parse(navState.url, true);
+        const currentUrl = parsedUrl.href;
+        const authUrl = parse(authenticationUrl, true).href;
+        if (currentUrl === authUrl)
+            return;
+        if (authMethod === 'saml') {
+            const isSamlCallback = SAML_CALLBACK_PATHS.some(path => navState.url.includes(path));
+            if (isSamlCallback) {
+                const { code } = parsedUrl.query;
+                if (code) {
+                    navigation.replace('SSOCallback', { clientId, code: code, authMethod: 'saml' });
+                }
+            }
+        }
+        else {
+            if (redirectUri && navState.url.includes(redirectUri)) {
+                const { code } = parsedUrl.query;
+                navigation.replace('SSOCallback', { clientId, code: code, authMethod: 'oidc' });
+            }
+        }
+    }, [authenticationUrl, authMethod, clientId, navigation, redirectUri]);
     return (_jsxs(Layout, { style: { flex: 1 }, children: [error && (_jsx(Layout, { style: { padding: 16, backgroundColor: '#fee' }, children: _jsx(Text, { style: { color: 'red' }, children: error }) })), _jsx(WebView, { source: { uri: authenticationUrl }, style: { flex: 1 }, onError: (syntheticEvent) => {
                     const { nativeEvent } = syntheticEvent;
                     setError(`Failed to load authentication page: ${nativeEvent.description}`);
                 }, onHttpError: (syntheticEvent) => {
                     const { nativeEvent } = syntheticEvent;
                     setError(`Authentication provider error: ${nativeEvent.statusCode}`);
-                }, onNavigationStateChange: (navState) => {
-                    setError(null);
-                    const currentUrl = parse(navState.url, true).href;
-                    const authUrl = parse(authenticationUrl, true).href;
-                    if (currentUrl != authUrl && navState.url.includes(redirectUri)) {
-                        const query = parse(navState.url, true).query;
-                        const { code } = query;
-                        navigation.replace('SSOCallback', { clientId, code });
-                    }
-                } })] }));
+                }, onNavigationStateChange: handleNavigationStateChange })] }));
 };
 export default SSOAuthWebView;

package/build/src/screens/SSOLogin/AuthenticationMethods/hooks/internal/useSSOAuthenticationMethods.js

@@ -17,8 +17,9 @@ const useSSOAuthenticationMethods = () => {
         }).then((res) => {
             if (!isMountedRef.current)
                 return;
-            const { authenticationUrl, redirectUri } = res.data;
-            onSSOLoginInitiated({ clientId, authenticationUrl, redirectUri });
+            const { authenticationUrl, redirectUri, authMethod } = res.data;
+            const resolvedAuthMethod = authMethod === 'saml' ? 'saml' : 'oidc';
+            onSSOLoginInitiated({ clientId, authenticationUrl, redirectUri, authMethod: resolvedAuthMethod });
         }).catch((error) => {
             if (!isMountedRef.current)
                 return;

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

@@ -29,6 +29,7 @@ const SSOAuthenticationMethods = ({ client, onPressBack, handleMobileLogin }) =>
     const onSSOLoginInitiated = (result) => {
         try {
             localStorage.setItem('clientId', String(result.clientId));
+            localStorage.setItem('authMethod', result.authMethod);
             const u = new URL(result.authenticationUrl);
             window.location.href = u.toString();
         }

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

@@ -43,7 +43,12 @@ const SSOAuthenticationMethods = ({ route }) => {
         return (_jsx(View, { style: { marginTop: 70, alignSelf: 'center' }, children: _jsx(Logo, {}) }));
     };
     const onSSOLoginInitiated = (result) => {
-        navigation.navigate('SSOAuthWebView', { ...result });
+        navigation.navigate('SSOAuthWebView', {
+            clientId: result.clientId,
+            authenticationUrl: result.authenticationUrl,
+            redirectUri: result.redirectUri,
+            authMethod: result.authMethod,
+        });
     };
     return (_jsx(ScreenLayout, { title: "", containerStyle: { flex: 1, backgroundColor: primary.white }, children: _jsxs(View, { style: { flex: 1, justifyContent: 'center' }, children: [client.image ?
                     _jsx(FastImage, { source: { uri: client.image }, resizeMode: 'contain', style: { width: 180, aspectRatio: aspectRatio, alignSelf: 'center', marginTop: -150 } })