@ethora/chat-component-rn 26.7.3 → 26.7.4

package/lib/module/components/Modals/UserProfileModal/UserProfileModal.js

@@ -1,30 +1,69 @@
 "use strict";
 
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { CenterContainer, UserInfo, UserName, ModalContainerFullScreen, ActionButton, Label, BorderedContainer, LabelData, ModalBackground, ModalContainer, CloseButton, ModalTitle, GroupContainer } from '../styledModalComponents';
-import { ChatIcon, DeleteIcon, EditIcon, IconDoc, LeaveIcon, MoreIcon } from '../../../assets/icons';
-import ModalHeaderComponent from '../ModalHeaderComponent';
-import { ProfileImagePlaceholder } from '../../MainComponents/ProfileImagePlaceholder';
-import Button from '../../styled/Button';
-import DropdownMenu from '../../DropdownMenu/DropdownMenu';
-import { logout, setActiveModal, setLangSource, setSelectedUser } from '../../../roomStore/chatSettingsSlice';
-import { addRoomViaApi, setCurrentRoom, setLogoutState } from '../../../roomStore/roomsSlice';
-import EditUserModal from './EditUserModal';
-import { walletToUsername } from '../../../helpers/walletUsername';
-import { useXmppClient } from '../../../context/xmppProvider';
-import Select from '../../MainComponents/Select';
+/** @format */
+
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { ActivityIndicator, Animated, Image, Share, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { ModalContainerFullScreen } from '../styledModalComponents';
+import { ChatIcon, EditIcon, IconDoc, LeaveIcon, LogoutIcon, ProfileIcon, ShareIcon } from '../../../assets/icons';
 import { useAppDispatch } from '../../../hooks/hooks';
-import { ScrollView, Text, View } from 'react-native';
-import { postPrivateRoom } from '../../../networking/api-requests/rooms.api';
-import { createRoomFromApi } from '../../../helpers/createRoomFromApi';
+import { useChatSettingState } from '../../../hooks/useChatSettingState';
+import { useXmppClient } from '../../../context/xmppProvider';
 import { useToast } from '../../../context/ToastContext';
+import { useT } from '../../../i18n/useT';
+import { useFileToken } from '../../../hooks/useFileToken';
+import { appendFileToken } from '../../../helpers/secureFileUrl';
+import { getIconColor } from '../../../helpers/getIconColor';
+import { chatTextStyle } from '../../../helpers/typography';
+import { getElementFont } from '../../../helpers/getElementFont';
 import { LANGUAGE_OPTIONS } from '../../../helpers/constants/LANGUAGE_OPTIONS';
-import { deleteDocument, getDocuments } from '../../../networking/api-requests/user.api';
-import { useChatSettingState } from '../../../hooks/useChatSettingState';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { MODAL_TYPES } from '../../../helpers/constants/MODAL_TYPES';
+import { setActiveFile, setActiveModal, setLangSource, setSelectedUser } from '../../../roomStore/chatSettingsSlice';
+import { addRoomViaApi, setCurrentRoom } from '../../../roomStore/roomsSlice';
+import { runLogoutFlow } from '../../Menu/HeaderRoomListMenu';
+import { useLogout } from '../../../hooks/useLogout';
+import { postPrivateRoom } from '../../../networking/api-requests/rooms.api';
+import { getUserFiles, isMediaFile } from '../../../networking/api-requests/user.api';
+import { createRoomFromApi } from '../../../helpers/createRoomFromApi';
+import { walletToUsername } from '../../../helpers/walletUsername';
+import { ProfileHero, ProfileTopBar, useHeaderMetrics } from '../ProfileHeader/ProfileHeader';
+import ProfileMenu from '../ProfileHeader/ProfileMenu';
+import EditUserModal from './EditUserModal';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const PREFIX = 'user-profile';
+/** Two uppercase letters for a person without a picture. */
+export const userInitials = name => {
+  const words = (name || '').trim().split(/\s+/).filter(Boolean);
+  const letters = (words.length >= 2 ? [words[0][0], words[1][0]] : [words[0]?.[0], words[0]?.[1]]).filter(c => !!c && /[\p{L}\p{N}]/u.test(c));
+  return letters.join('').toUpperCase();
+};
+
+/**
+ * Which tabs a profile shows. Only the signed-in user has tabs at all:
+ * `GET /v2/files/` returns the JWT owner's files, so there is nothing to
+ * put under Media/Documents for anybody else, and the language picker is
+ * a personal setting.
+ */
+export const profileTabs = opts => {
+  if (!opts.isOwnProfile) {
+    return [];
+  }
+  const tabs = [];
+  if (opts.translatesEnabled) {
+    tabs.push('language');
+  }
+  if (opts.hasMedia) {
+    tabs.push('media');
+  }
+  if (opts.hasDocuments) {
+    tabs.push('documents');
+  }
+  return tabs;
+};
 const UserProfileModal = ({
   handleCloseModal
 }) => {
+  const t = useT();
   const dispatch = useAppDispatch();
   const {
     client
@@ -38,75 +77,99 @@ const UserProfileModal = ({
     selectedUser,
     langSource
   } = useChatSettingState();
+  const fileToken = useFileToken();
   const [isEditing, setIsEditing] = useState(false);
-  const [documents, setDocuments] = useState([]);
-  const [deleteDocumentId, setDeleteDocumentId] = useState('');
-  const [showDelete, setShowDelete] = useState(false);
-  const handleDeleteDocument = async () => {
-    try {
-      await deleteDocument(deleteDocumentId);
-      setDocuments(documents.filter(doc => doc._id !== deleteDocumentId));
-      showToast({
-        id: Date.now().toString(),
-        title: 'Success',
-        message: 'Document deleted successfully',
-        type: 'success'
-      });
-      // handleGetDocs();
-    } catch (error) {
-      console.error('Error deleting document', error);
-      showToast({
-        id: Date.now().toString(),
-        title: 'Error',
-        message: 'Failed to delete document',
-        type: 'error'
-      });
-    } finally {
-      setShowDelete(false);
-    }
-  };
-  const handleGetDocs = async () => {
-    try {
-      const {
-        data
-      } = await getDocuments(user?.defaultWallet?.walletAddress);
-      const items = data.results.filter(el => el.locations[0]);
-      setDocuments(items);
-    } catch (error) {
-      console.error('Error getting docs', error);
+  const [files, setFiles] = useState([]);
+  const [loadingFiles, setLoadingFiles] = useState(false);
+  const [activeTab, setActiveTab] = useState(null);
+  const scrollY = useRef(new Animated.Value(0)).current;
+  const scrollRef = useRef(null);
+  const {
+    collapseDistance
+  } = useHeaderMetrics();
+  const [viewportHeight, setViewportHeight] = useState(0);
+  // `scrollY` is driven natively, so its value can't be read back with
+  // addListener; the Animated.event's JS `listener` still fires, which is
+  // enough to know which state the header is in.
+  const [isCollapsed, setIsCollapsed] = useState(false);
+  const isOwnProfile = !selectedUser;
+  const profileUser = selectedUser ?? user;
+  const media = useMemo(() => files.filter(isMediaFile), [files]);
+  const documents = useMemo(() => files.filter(file => !isMediaFile(file)), [files]);
+  const tabs = useMemo(() => profileTabs({
+    isOwnProfile,
+    translatesEnabled: !!config?.translates?.enabled,
+    hasMedia: media.length > 0,
+    hasDocuments: documents.length > 0
+  }), [isOwnProfile, config?.translates?.enabled, media.length, documents.length]);
+
+  // Keep the selected tab valid as the lists load in.
+  useEffect(() => {
+    if (tabs.length === 0) {
+      setActiveTab(null);
+      return;
     }
-  };
+    setActiveTab(current => current && tabs.includes(current) ? current : tabs[0]);
+  }, [tabs]);
+
+  // One request per visit, and only for one's own profile — the endpoint
+  // is scoped to the JWT owner, so it would return *our* files while
+  // looking at somebody else's page.
   useEffect(() => {
-    handleGetDocs();
-  }, []);
+    if (!isOwnProfile) {
+      setFiles([]);
+      return;
+    }
+    let cancelled = false;
+    setLoadingFiles(true);
+    getUserFiles().then(rows => {
+      if (!cancelled) {
+        setFiles(rows);
+      }
+    }).catch(error => {
+      console.warn('Could not load user files:', error);
+      if (!cancelled) {
+        setFiles([]);
+      }
+    }).finally(() => {
+      if (!cancelled) {
+        setLoadingFiles(false);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [isOwnProfile, user?.token]);
   const handleBackClick = useCallback(() => {
     dispatch(setSelectedUser(undefined));
     handleCloseModal();
-  }, []);
+  }, [dispatch, handleCloseModal]);
+
+  // Same teardown the room-list menu runs (XMPP, redux, persisted slices,
+  // AsyncStorage), including the host's confirm copy and callbacks.
+  const performLogout = useLogout();
   const handleLogout = useCallback(() => {
-    dispatch(logout());
-    dispatch(setLogoutState());
-  }, []);
-  const menuOptions = useMemo(() => [{
-    label: 'Log Out',
-    icon: /*#__PURE__*/_jsx(LeaveIcon, {}),
-    onClick: () => {
-      handleLogout();
-    },
-    styles: {
-      color: 'red'
+    runLogoutFlow(config?.logout ?? {
+      enabled: true
+    }, performLogout).catch(() => {});
+  }, [config?.logout, performLogout]);
+  const handleShare = useCallback(async () => {
+    const name = profileUser?.name || `${profileUser?.firstName ?? ''} ${profileUser?.lastName ?? ''}`.trim();
+    const id = profileUser?.userJID || profileUser?.defaultWallet?.walletAddress || profileUser?.id || '';
+    try {
+      await Share.share({
+        message: id ? `${name}\n${id}` : name
+      });
+    } catch (error) {
+      console.warn('Could not share the profile:', error);
     }
-  }], []);
-  const handleSelect = selected => {
-    dispatch(setLangSource(selected.id));
-  };
-  const EditClick = useCallback(() => {
-    setIsEditing(true);
-  }, []);
+  }, [profileUser]);
   const handleRoomCreation = async (newChat, usersArrayLength) => {
     try {
       const normalizedChat = createRoomFromApi(newChat, config?.xmppSettings?.conference, usersArrayLength);
-      if (!normalizedChat || !client) return;
+      if (!normalizedChat || !client) {
+        return;
+      }
       dispatch(addRoomViaApi({
         room: normalizedChat,
         xmpp: client
@@ -133,202 +196,400 @@ const UserProfileModal = ({
       type: 'info',
       duration: 3000
     });
-    let newRoomJid = '';
     if (config?.newArch) {
       const newRoom = await postPrivateRoom(selectedUser?.userJID ?? (selectedUser?.id || ''));
       handleRoomCreation(newRoom, 2);
-      newRoomJid = newRoom.name;
     } else {
       const selectedUserUsername = walletToUsername(selectedUser?.id || '');
       const myUsername = walletToUsername(user.defaultWallet.walletAddress);
-      const combinedWalletAddress = [myUsername, selectedUserUsername].sort().join('.');
-      const roomJid = combinedWalletAddress.toLowerCase();
+      const roomJid = [myUsername, selectedUserUsername].sort().join('.').toLowerCase();
       const combinedUsersName = [user.firstName, selectedUser?.name?.split(' ')?.[0] || ''].sort().join(' and ');
-      newRoomJid = (await client?.createPrivateRoomStanza(combinedUsersName, `Private chat ${combinedUsersName}`, roomJid)) || '';
+      const newRoomJid = (await client?.createPrivateRoomStanza(combinedUsersName, `Private chat ${combinedUsersName}`, roomJid)) || '';
       if (newRoomJid) {
         await client?.inviteRoomRequestStanza(selectedUserUsername, newRoomJid);
         await client?.getRoomsStanza();
       }
     }
     dispatch(setActiveModal(undefined));
-  }, [selectedUser]);
-  const modalUser = selectedUser ?? user;
-  const findLanguage = () => {
-    if (!langSource) {
-      return null;
-    }
-    const language = LANGUAGE_OPTIONS.find(lang => lang.id === langSource);
-    return language || null;
-  };
-  const showDeleteModal = docId => {
-    setDeleteDocumentId(docId);
-    setShowDelete(true);
+  }, [selectedUser]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const openFile = file => {
+    dispatch(setActiveFile({
+      fileName: file.name,
+      fileURL: file.url,
+      mimetype: file.mimetype
+    }));
+    dispatch(setActiveModal(MODAL_TYPES.FILE_PREVIEW));
   };
-  const DefaultBody = useMemo(() => /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(ModalHeaderComponent, {
-      handleCloseModal: handleBackClick,
-      headerTitle: 'Profile',
-      rightMenu: !selectedUser && /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx(Button, {
-          onPress: EditClick,
-          children: /*#__PURE__*/_jsx(EditIcon, {
-            color: "#8C8C8C"
-          })
-        }), /*#__PURE__*/_jsx(DropdownMenu, {
-          options: menuOptions,
-          position: "right",
-          menuIcon: /*#__PURE__*/_jsx(MoreIcon, {})
-        })]
+  const heroActions = useMemo(() => isOwnProfile ? [{
+    key: 'account',
+    label: t('action.account'),
+    icon: color => /*#__PURE__*/_jsx(ProfileIcon, {
+      color: color
+    }),
+    onPress: () => dispatch(setActiveModal(MODAL_TYPES.SETTINGS))
+  }, {
+    key: 'share',
+    label: t('action.share'),
+    icon: color => /*#__PURE__*/_jsx(ShareIcon, {
+      color: color
+    }),
+    onPress: handleShare
+  }, {
+    key: 'edit',
+    label: t('action.edit'),
+    icon: color => /*#__PURE__*/_jsx(EditIcon, {
+      color: color
+    }),
+    onPress: () => setIsEditing(true)
+  }, {
+    key: 'logout',
+    label: t('action.logOut'),
+    icon: color => /*#__PURE__*/_jsx(LogoutIcon, {
+      color: color
+    }),
+    onPress: handleLogout
+  }] : [...(config?.hideMemberSendMessageAction ? [] : [{
+    key: 'message',
+    label: t('action.message'),
+    icon: color => /*#__PURE__*/_jsx(ChatIcon, {
+      color: color
+    }),
+    onPress: handlePrivateMessage
+  }]), {
+    key: 'share',
+    label: t('action.share'),
+    icon: color => /*#__PURE__*/_jsx(ShareIcon, {
+      color: color
+    }),
+    onPress: handleShare
+  }], [isOwnProfile, t, handleShare, handlePrivateMessage, handleLogout] // eslint-disable-line react-hooks/exhaustive-deps
+  );
+
+  // Collapsed, the hero's round buttons are gone — the "…" menu carries
+  // exactly the same actions so nothing becomes unreachable.
+  const menuItems = useMemo(() => isCollapsed ? heroActions.map(action => ({
+    key: action.key,
+    label: action.label,
+    icon: action.icon('#141414'),
+    destructive: action.key === 'logout',
+    onPress: action.onPress
+  })) : [], [isCollapsed, heroActions]);
+  if (isEditing) {
+    return /*#__PURE__*/_jsx(ModalContainerFullScreen, {
+      children: /*#__PURE__*/_jsx(EditUserModal, {
+        setIsEditing: setIsEditing,
+        modalUser: profileUser,
+        config: config
       })
-    }), /*#__PURE__*/_jsxs(CenterContainer, {
-      children: [/*#__PURE__*/_jsx(ProfileImagePlaceholder, {
-        icon: modalUser?.profileImage ?? null,
-        name: modalUser?.name ?? modalUser?.firstName,
-        size: 120
-      }), /*#__PURE__*/_jsx(UserInfo, {
-        children: /*#__PURE__*/_jsx(UserName, {
-          children: modalUser?.name ? `${modalUser?.name}` : `${modalUser?.firstName} ${modalUser?.lastName}`
-        })
-      }), !selectedUser && config?.translates?.enabled && /*#__PURE__*/_jsx(BorderedContainer, {
-        children: /*#__PURE__*/_jsx(Select, {
-          options: LANGUAGE_OPTIONS,
-          placeholder: 'Select your language',
-          onSelect: handleSelect,
-          accentColor: config?.colors?.primary,
-          selectedValue: findLanguage()
+    });
+  }
+  const displayName = profileUser?.name || `${profileUser?.firstName ?? ''} ${profileUser?.lastName ?? ''}`.trim() || t('modal.profile.title');
+  const heroImage = appendFileToken(profileUser?.profileImage, fileToken) || null;
+  const heroColor = config?.colors?.avatar || getIconColor(config);
+  const description = profileUser?.description;
+  const renderTabBody = () => {
+    if (activeTab === 'language') {
+      return /*#__PURE__*/_jsx(View, {
+        children: LANGUAGE_OPTIONS.map(option => {
+          const selected = langSource === option.id;
+          return /*#__PURE__*/_jsxs(TouchableOpacity, {
+            testID: `${PREFIX}-language-${option.id}`,
+            activeOpacity: 0.7,
+            style: styles.languageRow,
+            onPress: () => dispatch(setLangSource(option.id)),
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: styles.languageLabel,
+              children: option.name
+            }), selected && /*#__PURE__*/_jsx(Text, {
+              style: [styles.check, {
+                color: getIconColor(config)
+              }],
+              children: "\u2713"
+            })]
+          }, option.id);
         })
-      }), /*#__PURE__*/_jsxs(BorderedContainer, {
-        children: [/*#__PURE__*/_jsx(Label, {
-          children: "About"
-        }), /*#__PURE__*/_jsx(LabelData, {
-          children: modalUser?.description && modalUser?.description?.length > 4 ? modalUser.description : 'No description'
-        })]
-      }), selectedUser && !config?.disableMemberProfileActions && /*#__PURE__*/_jsxs(_Fragment, {
-        children: [!config?.hideMemberSendMessageAction && /*#__PURE__*/_jsx(ActionButton, {
-          StartIcon: /*#__PURE__*/_jsx(ChatIcon, {}),
-          onPress: handlePrivateMessage,
-          variant: "filled",
-          children: /*#__PURE__*/_jsx(Text, {
-            style: {
-              color: '#ffffff'
-            },
-            children: "Message"
-          })
-        }), !config?.hideMemberCopyIdAction && /*#__PURE__*/_jsx(ActionButton, {
-          onPress: () => {}
-          // onPress={() => handleCopyClick(selectedUser.id)}
-          ,
-          variant: "filled",
-          children: /*#__PURE__*/_jsx(Text, {
-            style: {
-              color: '#ffffff'
+      });
+    }
+    if (activeTab === 'media') {
+      return /*#__PURE__*/_jsx(View, {
+        style: styles.mediaGrid,
+        children: media.map(file => /*#__PURE__*/_jsx(TouchableOpacity, {
+          testID: `${PREFIX}-media-${file.id}`,
+          activeOpacity: 0.8,
+          style: styles.mediaTile,
+          onPress: () => openFile(file),
+          children: /*#__PURE__*/_jsx(Image, {
+            source: {
+              uri: appendFileToken(file.url, fileToken) || file.url
             },
-            children: "Copy User Id"
+            style: styles.mediaImage,
+            resizeMode: "cover"
           })
+        }, file.id))
+      });
+    }
+    return /*#__PURE__*/_jsx(View, {
+      children: documents.map(file => /*#__PURE__*/_jsxs(TouchableOpacity, {
+        testID: `${PREFIX}-document-${file.id}`,
+        activeOpacity: 0.7,
+        style: styles.documentRow,
+        onPress: () => openFile(file),
+        children: [/*#__PURE__*/_jsx(IconDoc, {}), /*#__PURE__*/_jsxs(View, {
+          style: styles.documentText,
+          children: [/*#__PURE__*/_jsx(Text, {
+            numberOfLines: 1,
+            style: styles.documentName,
+            children: file.name
+          }), !!file.createdAt && /*#__PURE__*/_jsx(Text, {
+            style: styles.documentDate,
+            children: new Date(file.createdAt).toLocaleDateString()
+          })]
         })]
-      }), /*#__PURE__*/_jsx(BorderedContainer, {
-        children: /*#__PURE__*/_jsx(ScrollView, {
-          style: {
-            maxHeight: 400
-          },
-          showsVerticalScrollIndicator: true,
-          nestedScrollEnabled: true,
-          children: documents.map(doc => /*#__PURE__*/_jsxs(View, {
-            style: {
-              flexDirection: 'row',
-              alignItems: 'center',
-              justifyContent: 'space-between',
-              gap: 24,
-              backgroundColor: '#F3F6FC',
-              marginBottom: 8,
-              paddingVertical: 8,
-              paddingHorizontal: 16,
-              borderRadius: 8
-            },
-            children: [/*#__PURE__*/_jsxs(View, {
-              style: {
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: 24
-              },
-              children: [/*#__PURE__*/_jsx(View, {
-                children: /*#__PURE__*/_jsx(IconDoc, {})
-              }), /*#__PURE__*/_jsxs(View, {
-                children: [/*#__PURE__*/_jsx(Label, {
-                  style: {
-                    paddingBottom: 4
-                  },
-                  children: doc.documentName
-                }), /*#__PURE__*/_jsx(LabelData, {
-                  children: new Date(doc.createdAt).toLocaleDateString('en-GB', {
-                    day: '2-digit',
-                    month: 'short',
-                    year: 'numeric'
-                  }) + ' ' + new Date(doc.createdAt).toLocaleTimeString('en-GB', {
-                    hour: '2-digit',
-                    minute: '2-digit'
+      }, file.id))
+    });
+  };
+  return /*#__PURE__*/_jsxs(ModalContainerFullScreen, {
+    style: styles.screen,
+    children: [/*#__PURE__*/_jsxs(Animated.ScrollView, {
+      ref: scrollRef,
+      style: styles.scroll,
+      contentContainerStyle: [styles.scrollContent, viewportHeight > 0 && {
+        minHeight: viewportHeight + collapseDistance
+      }],
+      onLayout: e => setViewportHeight(e.nativeEvent.layout.height),
+      showsVerticalScrollIndicator: false,
+      scrollEventThrottle: 16,
+      onScroll: Animated.event([{
+        nativeEvent: {
+          contentOffset: {
+            y: scrollY
+          }
+        }
+      }], {
+        useNativeDriver: true,
+        listener: e => {
+          const y = e?.nativeEvent?.contentOffset?.y ?? 0;
+          setIsCollapsed(y >= collapseDistance - 8);
+        }
+      }),
+      children: [/*#__PURE__*/_jsx(ProfileHero, {
+        testIDPrefix: PREFIX,
+        title: displayName,
+        imageUri: heroImage,
+        fallbackColor: heroColor,
+        initials: userInitials(displayName),
+        scrollY: scrollY,
+        actions: heroActions,
+        titleStyle: chatTextStyle(config?.typography?.profile?.title),
+        titleAccessory: isOwnProfile ? /*#__PURE__*/_jsxs(TouchableOpacity, {
+          testID: `${PREFIX}-logout`,
+          activeOpacity: 0.7,
+          style: styles.leaveButton,
+          onPress: handleLogout,
+          children: [/*#__PURE__*/_jsx(LeaveIcon, {
+            color: "#FFFFFF",
+            width: 18,
+            height: 18
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.leaveLabel,
+            children: t('action.leave')
+          })]
+        }) : undefined
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.body,
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: styles.card,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: [styles.cardLabel, getElementFont(config, 'profileSectionLabel')],
+            children: t('modal.profile.about')
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.cardValue,
+            children: description && description.length > 4 ? description : t('modal.profile.noDescription')
+          })]
+        }), tabs.length > 0 && /*#__PURE__*/_jsxs(View, {
+          style: styles.card,
+          children: [/*#__PURE__*/_jsx(View, {
+            style: styles.tabsRow,
+            children: tabs.map(tab => {
+              const active = tab === activeTab;
+              const count = tab === 'media' ? media.length : tab === 'documents' ? documents.length : 0;
+              return /*#__PURE__*/_jsxs(TouchableOpacity, {
+                testID: `${PREFIX}-tab-${tab}`,
+                activeOpacity: 0.7,
+                style: [styles.tab, active && {
+                  borderBottomColor: getIconColor(config)
+                }],
+                onPress: () => setActiveTab(tab),
+                children: [/*#__PURE__*/_jsx(Text, {
+                  style: [styles.tabLabel, active && {
+                    color: getIconColor(config)
+                  }],
+                  children: t(`modal.profile.${tab}`)
+                }), count > 0 && /*#__PURE__*/_jsx(View, {
+                  style: [styles.tabBadge, {
+                    backgroundColor: getIconColor(config)
+                  }],
+                  children: /*#__PURE__*/_jsx(Text, {
+                    style: styles.tabBadgeText,
+                    children: count
                   })
                 })]
-              })]
-            }), /*#__PURE__*/_jsx(Button, {
-              onPress: () => showDeleteModal(doc._id),
-              children: /*#__PURE__*/_jsx(DeleteIcon, {})
-            })]
-          }, doc._id))
-        })
-      })]
-    })]
-  }), [modalUser, documents]);
-  const EditingBody = useMemo(() => /*#__PURE__*/_jsx(EditUserModal, {
-    setIsEditing: setIsEditing,
-    modalUser: modalUser,
-    config: config
-  }), [modalUser]);
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(ModalContainerFullScreen, {
-      children: !isEditing ? DefaultBody : EditingBody
-    }), showDelete && /*#__PURE__*/_jsx(ModalBackground, {
-      style: {
-        position: 'absolute',
-        zIndex: 9999
-      },
-      children: /*#__PURE__*/_jsxs(ModalContainer, {
-        children: [/*#__PURE__*/_jsx(CloseButton, {
-          onPress: () => setShowDelete(false),
-          children: /*#__PURE__*/_jsx(Text, {
-            style: {
-              fontSize: 24
-            },
-            children: "\xD7"
-          })
-        }), /*#__PURE__*/_jsx(ModalTitle, {
-          children: "Delete this document?"
-        }), /*#__PURE__*/_jsxs(GroupContainer, {
-          children: [/*#__PURE__*/_jsx(Button, {
-            onPress: () => setShowDelete(false),
-            text: 'Cancel',
-            style: {
-              width: '100%'
-            },
-            unstyled: true,
-            variant: "filled",
-            color: "white"
-          }), /*#__PURE__*/_jsx(Button, {
-            onPress: handleDeleteDocument,
-            text: 'Delete',
-            style: {
-              width: '100%',
-              borderWidth: 1,
-              borderColor: 'red'
-            },
-            color: "red",
-            unstyled: true,
-            variant: "outlined"
-          })]
+              }, tab);
+            })
+          }), renderTabBody()]
+        }), isOwnProfile && loadingFiles && files.length === 0 && /*#__PURE__*/_jsx(ActivityIndicator, {
+          testID: `${PREFIX}-files-loading`
         })]
+      })]
+    }), /*#__PURE__*/_jsx(ProfileTopBar, {
+      testIDPrefix: PREFIX,
+      title: displayName,
+      imageUri: heroImage,
+      fallbackColor: heroColor,
+      initials: userInitials(displayName),
+      scrollY: scrollY,
+      onBack: handleBackClick,
+      titleStyle: chatTextStyle(config?.typography?.profile?.screenTitle),
+      menu: /*#__PURE__*/_jsx(ProfileMenu, {
+        testIDPrefix: PREFIX,
+        items: menuItems
       })
     })]
   });
 };
+const styles = StyleSheet.create({
+  screen: {
+    position: 'relative',
+    backgroundColor: '#F2F3F5'
+  },
+  scroll: {
+    width: '100%',
+    flex: 1
+  },
+  scrollContent: {
+    paddingBottom: 32
+  },
+  body: {
+    padding: 12,
+    gap: 12
+  },
+  card: {
+    backgroundColor: '#FFFFFF',
+    borderRadius: 14,
+    padding: 16,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 1
+    },
+    shadowOpacity: 0.05,
+    shadowRadius: 4,
+    elevation: 1
+  },
+  cardLabel: {
+    color: '#8C8C8C',
+    fontSize: 14
+  },
+  cardValue: {
+    color: '#141414',
+    fontSize: 16,
+    marginTop: 4
+  },
+  leaveButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+    paddingHorizontal: 12,
+    paddingVertical: 7,
+    borderRadius: 18,
+    backgroundColor: 'rgba(0,0,0,0.35)'
+  },
+  leaveLabel: {
+    color: '#FFFFFF',
+    fontSize: 14,
+    fontWeight: '500'
+  },
+  tabsRow: {
+    flexDirection: 'row',
+    gap: 20,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: '#EFEFF2',
+    marginBottom: 12
+  },
+  tab: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+    paddingBottom: 10,
+    borderBottomWidth: 2,
+    borderBottomColor: 'transparent'
+  },
+  tabLabel: {
+    fontSize: 15,
+    fontWeight: '500',
+    color: '#8C8C8C'
+  },
+  tabBadge: {
+    minWidth: 20,
+    paddingHorizontal: 5,
+    paddingVertical: 1,
+    borderRadius: 10,
+    alignItems: 'center'
+  },
+  tabBadgeText: {
+    color: '#FFFFFF',
+    fontSize: 11,
+    fontWeight: '600'
+  },
+  languageRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingVertical: 12
+  },
+  languageLabel: {
+    fontSize: 16,
+    color: '#141414'
+  },
+  check: {
+    fontSize: 16,
+    fontWeight: '700'
+  },
+  mediaGrid: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 6
+  },
+  mediaTile: {
+    width: '31.8%',
+    aspectRatio: 1,
+    borderRadius: 10,
+    overflow: 'hidden',
+    backgroundColor: '#EFEFF2'
+  },
+  mediaImage: {
+    width: '100%',
+    height: '100%'
+  },
+  documentRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 14,
+    paddingVertical: 12
+  },
+  documentText: {
+    flex: 1
+  },
+  documentName: {
+    fontSize: 16,
+    color: '#141414'
+  },
+  documentDate: {
+    fontSize: 13,
+    color: '#8C8C8C',
+    marginTop: 2
+  }
+});
 export default UserProfileModal;
 //# sourceMappingURL=UserProfileModal.js.map