@ethora/chat-component-rn 26.7.4 → 26.7.5

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

@@ -1,69 +1,30 @@
 "use strict";
 
-/** @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 { useChatSettingState } from '../../../hooks/useChatSettingState';
+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 { 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 { 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 Select from '../../MainComponents/Select';
+import { useAppDispatch } from '../../../hooks/hooks';
+import { ScrollView, Text, View } from 'react-native';
 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;
-};
+import { useToast } from '../../../context/ToastContext';
+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";
 const UserProfileModal = ({
   handleCloseModal
 }) => {
-  const t = useT();
   const dispatch = useAppDispatch();
   const {
     client
@@ -77,99 +38,75 @@ const UserProfileModal = ({
     selectedUser,
     langSource
   } = useChatSettingState();
-  const fileToken = useFileToken();
   const [isEditing, setIsEditing] = useState(false);
-  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;
+  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);
     }
-    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(() => {
-    if (!isOwnProfile) {
-      setFiles([]);
-      return;
+  };
+  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);
     }
-    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]);
+  };
+  useEffect(() => {
+    handleGetDocs();
+  }, []);
   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(() => {
-    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);
+    dispatch(logout());
+    dispatch(setLogoutState());
+  }, []);
+  const menuOptions = useMemo(() => [{
+    label: 'Log Out',
+    icon: /*#__PURE__*/_jsx(LeaveIcon, {}),
+    onClick: () => {
+      handleLogout();
+    },
+    styles: {
+      color: 'red'
     }
-  }, [profileUser]);
+  }], []);
+  const handleSelect = selected => {
+    dispatch(setLangSource(selected.id));
+  };
+  const EditClick = useCallback(() => {
+    setIsEditing(true);
+  }, []);
   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
@@ -196,400 +133,202 @@ 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 roomJid = [myUsername, selectedUserUsername].sort().join('.').toLowerCase();
+      const combinedWalletAddress = [myUsername, selectedUserUsername].sort().join('.');
+      const roomJid = combinedWalletAddress.toLowerCase();
       const combinedUsersName = [user.firstName, selectedUser?.name?.split(' ')?.[0] || ''].sort().join(' and ');
-      const newRoomJid = (await client?.createPrivateRoomStanza(combinedUsersName, `Private chat ${combinedUsersName}`, roomJid)) || '';
+      newRoomJid = (await client?.createPrivateRoomStanza(combinedUsersName, `Private chat ${combinedUsersName}`, roomJid)) || '';
       if (newRoomJid) {
         await client?.inviteRoomRequestStanza(selectedUserUsername, newRoomJid);
         await client?.getRoomsStanza();
       }
     }
     dispatch(setActiveModal(undefined));
-  }, [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));
+  }, [selectedUser]);
+  const modalUser = selectedUser ?? user;
+  const findLanguage = () => {
+    if (!langSource) {
+      return null;
+    }
+    const language = LANGUAGE_OPTIONS.find(lang => lang.id === langSource);
+    return language || null;
   };
-  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
+  const showDeleteModal = docId => {
+    setDeleteDocumentId(docId);
+    setShowDelete(true);
+  };
+  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 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(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}`
         })
-      });
-    }
-    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
+      }), !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()
+        })
+      }), /*#__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'
             },
-            style: styles.mediaImage,
-            resizeMode: "cover"
+            children: "Message"
+          })
+        }), !config?.hideMemberCopyIdAction && /*#__PURE__*/_jsx(ActionButton, {
+          onPress: () => {}
+          // onPress={() => handleCopyClick(selectedUser.id)}
+          ,
+          variant: "filled",
+          children: /*#__PURE__*/_jsx(Text, {
+            style: {
+              color: '#ffffff'
+            },
+            children: "Copy User Id"
           })
-        }, 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()
-          })]
         })]
-      }, 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(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'
                   })
                 })]
-              }, tab);
-            })
-          }), renderTabBody()]
-        }), isOwnProfile && loadingFiles && files.length === 0 && /*#__PURE__*/_jsx(ActivityIndicator, {
-          testID: `${PREFIX}-files-loading`
-        })]
+              })]
+            }), /*#__PURE__*/_jsx(Button, {
+              onPress: () => showDeleteModal(doc._id),
+              children: /*#__PURE__*/_jsx(DeleteIcon, {})
+            })]
+          }, doc._id))
+        })
       })]
-    }), /*#__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
+    })]
+  }), [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"
+          })]
+        })]
       })
     })]
   });
 };
-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