@ethora/chat-component-rn 26.7.9 → 26.8.1

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

@@ -3,75 +3,34 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.userInitials = exports.profileTabs = exports.default = void 0;
+exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _reactNative = require("react-native");
 var _styledModalComponents = require("../styledModalComponents");
 var _icons = require("../../../assets/icons");
-var _hooks = require("../../../hooks/hooks");
-var _useChatSettingState = require("../../../hooks/useChatSettingState");
-var _xmppProvider = require("../../../context/xmppProvider");
-var _ToastContext = require("../../../context/ToastContext");
-var _useT = require("../../../i18n/useT");
-var _useFileToken = require("../../../hooks/useFileToken");
-var _secureFileUrl = require("../../../helpers/secureFileUrl");
-var _getIconColor = require("../../../helpers/getIconColor");
-var _typography = require("../../../helpers/typography");
-var _getElementFont = require("../../../helpers/getElementFont");
-var _LANGUAGE_OPTIONS = require("../../../helpers/constants/LANGUAGE_OPTIONS");
-var _MODAL_TYPES = require("../../../helpers/constants/MODAL_TYPES");
+var _ModalHeaderComponent = _interopRequireDefault(require("../ModalHeaderComponent"));
+var _ProfileImagePlaceholder = require("../../MainComponents/ProfileImagePlaceholder");
+var _Button = _interopRequireDefault(require("../../styled/Button"));
+var _DropdownMenu = _interopRequireDefault(require("../../DropdownMenu/DropdownMenu"));
 var _chatSettingsSlice = require("../../../roomStore/chatSettingsSlice");
 var _roomsSlice = require("../../../roomStore/roomsSlice");
-var _HeaderRoomListMenu = require("../../Menu/HeaderRoomListMenu");
-var _useLogout = require("../../../hooks/useLogout");
+var _EditUserModal = _interopRequireDefault(require("./EditUserModal"));
+var _walletUsername = require("../../../helpers/walletUsername");
+var _xmppProvider = require("../../../context/xmppProvider");
+var _Select = _interopRequireDefault(require("../../MainComponents/Select"));
+var _hooks = require("../../../hooks/hooks");
+var _reactNative = require("react-native");
 var _rooms = require("../../../networking/api-requests/rooms.api");
-var _user = require("../../../networking/api-requests/user.api");
 var _createRoomFromApi = require("../../../helpers/createRoomFromApi");
-var _walletUsername = require("../../../helpers/walletUsername");
-var _ProfileHeader = require("../ProfileHeader/ProfileHeader");
-var _ProfileMenu = _interopRequireDefault(require("../ProfileHeader/ProfileMenu"));
-var _EditUserModal = _interopRequireDefault(require("./EditUserModal"));
+var _ToastContext = require("../../../context/ToastContext");
+var _LANGUAGE_OPTIONS = require("../../../helpers/constants/LANGUAGE_OPTIONS");
+var _user = require("../../../networking/api-requests/user.api");
+var _useChatSettingState = require("../../../hooks/useChatSettingState");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-/** @format */
-
-const PREFIX = 'user-profile';
-/** Two uppercase letters for a person without a picture. */
-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.
- */
-exports.userInitials = userInitials;
-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;
-};
-exports.profileTabs = profileTabs;
 const UserProfileModal = ({
   handleCloseModal
 }) => {
-  const t = (0, _useT.useT)();
   const dispatch = (0, _hooks.useAppDispatch)();
   const {
     client
@@ -85,99 +44,75 @@ const UserProfileModal = ({
     selectedUser,
     langSource
   } = (0, _useChatSettingState.useChatSettingState)();
-  const fileToken = (0, _useFileToken.useFileToken)();
   const [isEditing, setIsEditing] = (0, _react.useState)(false);
-  const [files, setFiles] = (0, _react.useState)([]);
-  const [loadingFiles, setLoadingFiles] = (0, _react.useState)(false);
-  const [activeTab, setActiveTab] = (0, _react.useState)(null);
-  const scrollY = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
-  const scrollRef = (0, _react.useRef)(null);
-  const {
-    collapseDistance
-  } = (0, _ProfileHeader.useHeaderMetrics)();
-  const [viewportHeight, setViewportHeight] = (0, _react.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] = (0, _react.useState)(false);
-  const isOwnProfile = !selectedUser;
-  const profileUser = selectedUser ?? user;
-  const media = (0, _react.useMemo)(() => files.filter(_user.isMediaFile), [files]);
-  const documents = (0, _react.useMemo)(() => files.filter(file => !(0, _user.isMediaFile)(file)), [files]);
-  const tabs = (0, _react.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.
-  (0, _react.useEffect)(() => {
-    if (tabs.length === 0) {
-      setActiveTab(null);
-      return;
+  const [documents, setDocuments] = (0, _react.useState)([]);
+  const [deleteDocumentId, setDeleteDocumentId] = (0, _react.useState)('');
+  const [showDelete, setShowDelete] = (0, _react.useState)(false);
+  const handleDeleteDocument = async () => {
+    try {
+      await (0, _user.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.
-  (0, _react.useEffect)(() => {
-    if (!isOwnProfile) {
-      setFiles([]);
-      return;
+  };
+  const handleGetDocs = async () => {
+    try {
+      const {
+        data
+      } = await (0, _user.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);
-    (0, _user.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]);
+  };
+  (0, _react.useEffect)(() => {
+    handleGetDocs();
+  }, []);
   const handleBackClick = (0, _react.useCallback)(() => {
     dispatch((0, _chatSettingsSlice.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 = (0, _useLogout.useLogout)();
+  }, []);
   const handleLogout = (0, _react.useCallback)(() => {
-    (0, _HeaderRoomListMenu.runLogoutFlow)(config?.logout ?? {
-      enabled: true
-    }, performLogout).catch(() => {});
-  }, [config?.logout, performLogout]);
-  const handleShare = (0, _react.useCallback)(async () => {
-    const name = profileUser?.name || `${profileUser?.firstName ?? ''} ${profileUser?.lastName ?? ''}`.trim();
-    const id = profileUser?.userJID || profileUser?.defaultWallet?.walletAddress || profileUser?.id || '';
-    try {
-      await _reactNative.Share.share({
-        message: id ? `${name}\n${id}` : name
-      });
-    } catch (error) {
-      console.warn('Could not share the profile:', error);
+    dispatch((0, _chatSettingsSlice.logout)());
+    dispatch((0, _roomsSlice.setLogoutState)());
+  }, []);
+  const menuOptions = (0, _react.useMemo)(() => [{
+    label: 'Log Out',
+    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.LeaveIcon, {}),
+    onClick: () => {
+      handleLogout();
+    },
+    styles: {
+      color: 'red'
     }
-  }, [profileUser]);
+  }], []);
+  const handleSelect = selected => {
+    dispatch((0, _chatSettingsSlice.setLangSource)(selected.id));
+  };
+  const EditClick = (0, _react.useCallback)(() => {
+    setIsEditing(true);
+  }, []);
   const handleRoomCreation = async (newChat, usersArrayLength) => {
     try {
       const normalizedChat = (0, _createRoomFromApi.createRoomFromApi)(newChat, config?.xmppSettings?.conference, usersArrayLength);
-      if (!normalizedChat || !client) {
-        return;
-      }
+      if (!normalizedChat || !client) return;
       dispatch((0, _roomsSlice.addRoomViaApi)({
         room: normalizedChat,
         xmpp: client
@@ -204,400 +139,202 @@ const UserProfileModal = ({
       type: 'info',
       duration: 3000
     });
+    let newRoomJid = '';
     if (config?.newArch) {
       const newRoom = await (0, _rooms.postPrivateRoom)(selectedUser?.userJID ?? (selectedUser?.id || ''));
       handleRoomCreation(newRoom, 2);
+      newRoomJid = newRoom.name;
     } else {
       const selectedUserUsername = (0, _walletUsername.walletToUsername)(selectedUser?.id || '');
       const myUsername = (0, _walletUsername.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((0, _chatSettingsSlice.setActiveModal)(undefined));
-  }, [selectedUser]); // eslint-disable-line react-hooks/exhaustive-deps
-
-  const openFile = file => {
-    dispatch((0, _chatSettingsSlice.setActiveFile)({
-      fileName: file.name,
-      fileURL: file.url,
-      mimetype: file.mimetype
-    }));
-    dispatch((0, _chatSettingsSlice.setActiveModal)(_MODAL_TYPES.MODAL_TYPES.FILE_PREVIEW));
+  }, [selectedUser]);
+  const modalUser = selectedUser ?? user;
+  const findLanguage = () => {
+    if (!langSource) {
+      return null;
+    }
+    const language = _LANGUAGE_OPTIONS.LANGUAGE_OPTIONS.find(lang => lang.id === langSource);
+    return language || null;
   };
-  const heroActions = (0, _react.useMemo)(() => isOwnProfile ? [{
-    key: 'account',
-    label: t('action.account'),
-    icon: color => /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.ProfileIcon, {
-      color: color
-    }),
-    onPress: () => dispatch((0, _chatSettingsSlice.setActiveModal)(_MODAL_TYPES.MODAL_TYPES.SETTINGS))
-  }, {
-    key: 'share',
-    label: t('action.share'),
-    icon: color => /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.ShareIcon, {
-      color: color
-    }),
-    onPress: handleShare
-  }, {
-    key: 'edit',
-    label: t('action.edit'),
-    icon: color => /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.EditIcon, {
-      color: color
-    }),
-    onPress: () => setIsEditing(true)
-  }, {
-    key: 'logout',
-    label: t('action.logOut'),
-    icon: color => /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.LogoutIcon, {
-      color: color
-    }),
-    onPress: handleLogout
-  }] : [...(config?.hideMemberSendMessageAction ? [] : [{
-    key: 'message',
-    label: t('action.message'),
-    icon: color => /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.ChatIcon, {
-      color: color
-    }),
-    onPress: handlePrivateMessage
-  }]), {
-    key: 'share',
-    label: t('action.share'),
-    icon: color => /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.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 = (0, _react.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__*/(0, _jsxRuntime.jsx)(_styledModalComponents.ModalContainerFullScreen, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_EditUserModal.default, {
-        setIsEditing: setIsEditing,
-        modalUser: profileUser,
-        config: config
+  const showDeleteModal = docId => {
+    setDeleteDocumentId(docId);
+    setShowDelete(true);
+  };
+  const DefaultBody = (0, _react.useMemo)(() => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalHeaderComponent.default, {
+      handleCloseModal: handleBackClick,
+      headerTitle: 'Profile',
+      rightMenu: !selectedUser && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+          onPress: EditClick,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.EditIcon, {
+            color: "#8C8C8C"
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DropdownMenu.default, {
+          options: menuOptions,
+          position: "right",
+          menuIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.MoreIcon, {})
+        })]
       })
-    });
-  }
-  const displayName = profileUser?.name || `${profileUser?.firstName ?? ''} ${profileUser?.lastName ?? ''}`.trim() || t('modal.profile.title');
-  const heroImage = (0, _secureFileUrl.appendFileToken)(profileUser?.profileImage, fileToken) || null;
-  const heroColor = config?.colors?.avatar || (0, _getIconColor.getIconColor)(config);
-  const description = profileUser?.description;
-  const renderTabBody = () => {
-    if (activeTab === 'language') {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        children: _LANGUAGE_OPTIONS.LANGUAGE_OPTIONS.map(option => {
-          const selected = langSource === option.id;
-          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-            testID: `${PREFIX}-language-${option.id}`,
-            activeOpacity: 0.7,
-            style: styles.languageRow,
-            onPress: () => dispatch((0, _chatSettingsSlice.setLangSource)(option.id)),
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: styles.languageLabel,
-              children: option.name
-            }), selected && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: [styles.check, {
-                color: (0, _getIconColor.getIconColor)(config)
-              }],
-              children: "\u2713"
-            })]
-          }, option.id);
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styledModalComponents.CenterContainer, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ProfileImagePlaceholder.ProfileImagePlaceholder, {
+        icon: modalUser?.profileImage ?? null,
+        name: modalUser?.name ?? modalUser?.firstName,
+        size: 120
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledModalComponents.UserInfo, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledModalComponents.UserName, {
+          children: modalUser?.name ? `${modalUser?.name}` : `${modalUser?.firstName} ${modalUser?.lastName}`
         })
-      });
-    }
-    if (activeTab === 'media') {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.mediaGrid,
-        children: media.map(file => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-          testID: `${PREFIX}-media-${file.id}`,
-          activeOpacity: 0.8,
-          style: styles.mediaTile,
-          onPress: () => openFile(file),
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
-            source: {
-              uri: (0, _secureFileUrl.appendFileToken)(file.url, fileToken) || file.url
+      }), !selectedUser && config?.translates?.enabled && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledModalComponents.BorderedContainer, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.default, {
+          options: _LANGUAGE_OPTIONS.LANGUAGE_OPTIONS,
+          placeholder: 'Select your language',
+          onSelect: handleSelect,
+          accentColor: config?.colors?.primary,
+          selectedValue: findLanguage()
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styledModalComponents.BorderedContainer, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styledModalComponents.Label, {
+          children: "About"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledModalComponents.LabelData, {
+          children: modalUser?.description && modalUser?.description?.length > 4 ? modalUser.description : 'No description'
+        })]
+      }), selectedUser && !config?.disableMemberProfileActions && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [!config?.hideMemberSendMessageAction && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledModalComponents.ActionButton, {
+          StartIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.ChatIcon, {}),
+          onPress: handlePrivateMessage,
+          variant: "filled",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: {
+              color: '#ffffff'
             },
-            style: styles.mediaImage,
-            resizeMode: "cover"
+            children: "Message"
+          })
+        }), !config?.hideMemberCopyIdAction && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledModalComponents.ActionButton, {
+          onPress: () => {}
+          // onPress={() => handleCopyClick(selectedUser.id)}
+          ,
+          variant: "filled",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: {
+              color: '#ffffff'
+            },
+            children: "Copy User Id"
           })
-        }, file.id))
-      });
-    }
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      children: documents.map(file => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-        testID: `${PREFIX}-document-${file.id}`,
-        activeOpacity: 0.7,
-        style: styles.documentRow,
-        onPress: () => openFile(file),
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.IconDoc, {}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: styles.documentText,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            numberOfLines: 1,
-            style: styles.documentName,
-            children: file.name
-          }), !!file.createdAt && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: styles.documentDate,
-            children: new Date(file.createdAt).toLocaleDateString()
-          })]
         })]
-      }, file.id))
-    });
-  };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styledModalComponents.ModalContainerFullScreen, {
-    style: styles.screen,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.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: _reactNative.Animated.event([{
-        nativeEvent: {
-          contentOffset: {
-            y: scrollY
-          }
-        }
-      }], {
-        useNativeDriver: true,
-        listener: e => {
-          const y = e?.nativeEvent?.contentOffset?.y ?? 0;
-          setIsCollapsed(y >= collapseDistance - 8);
-        }
-      }),
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ProfileHeader.ProfileHero, {
-        testIDPrefix: PREFIX,
-        title: displayName,
-        imageUri: heroImage,
-        fallbackColor: heroColor,
-        initials: userInitials(displayName),
-        scrollY: scrollY,
-        actions: heroActions,
-        titleStyle: (0, _typography.chatTextStyle)(config?.typography?.profile?.title),
-        titleAccessory: isOwnProfile ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-          testID: `${PREFIX}-logout`,
-          activeOpacity: 0.7,
-          style: styles.leaveButton,
-          onPress: handleLogout,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.LeaveIcon, {
-            color: "#FFFFFF",
-            width: 18,
-            height: 18
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: styles.leaveLabel,
-            children: t('action.leave')
-          })]
-        }) : undefined
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.body,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: styles.card,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: [styles.cardLabel, (0, _getElementFont.getElementFont)(config, 'profileSectionLabel')],
-            children: t('modal.profile.about')
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: styles.cardValue,
-            children: description && description.length > 4 ? description : t('modal.profile.noDescription')
-          })]
-        }), tabs.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: styles.card,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-                testID: `${PREFIX}-tab-${tab}`,
-                activeOpacity: 0.7,
-                style: [styles.tab, active && {
-                  borderBottomColor: (0, _getIconColor.getIconColor)(config)
-                }],
-                onPress: () => setActiveTab(tab),
-                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                  style: [styles.tabLabel, active && {
-                    color: (0, _getIconColor.getIconColor)(config)
-                  }],
-                  children: t(`modal.profile.${tab}`)
-                }), count > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-                  style: [styles.tabBadge, {
-                    backgroundColor: (0, _getIconColor.getIconColor)(config)
-                  }],
-                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                    style: styles.tabBadgeText,
-                    children: count
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledModalComponents.BorderedContainer, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+          style: {
+            maxHeight: 400
+          },
+          showsVerticalScrollIndicator: true,
+          nestedScrollEnabled: true,
+          children: documents.map(doc => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: {
+              flexDirection: 'row',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              gap: 24,
+              backgroundColor: '#F3F6FC',
+              marginBottom: 8,
+              paddingVertical: 8,
+              paddingHorizontal: 16,
+              borderRadius: 8
+            },
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+              style: {
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 24
+              },
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.IconDoc, {})
+              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styledModalComponents.Label, {
+                  style: {
+                    paddingBottom: 4
+                  },
+                  children: doc.documentName
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledModalComponents.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__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
-          testID: `${PREFIX}-files-loading`
-        })]
+              })]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+              onPress: () => showDeleteModal(doc._id),
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.DeleteIcon, {})
+            })]
+          }, doc._id))
+        })
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProfileHeader.ProfileTopBar, {
-      testIDPrefix: PREFIX,
-      title: displayName,
-      imageUri: heroImage,
-      fallbackColor: heroColor,
-      initials: userInitials(displayName),
-      scrollY: scrollY,
-      onBack: handleBackClick,
-      titleStyle: (0, _typography.chatTextStyle)(config?.typography?.profile?.screenTitle),
-      menu: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProfileMenu.default, {
-        testIDPrefix: PREFIX,
-        items: menuItems
+    })]
+  }), [modalUser, documents]);
+  const EditingBody = (0, _react.useMemo)(() => /*#__PURE__*/(0, _jsxRuntime.jsx)(_EditUserModal.default, {
+    setIsEditing: setIsEditing,
+    modalUser: modalUser,
+    config: config
+  }), [modalUser]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styledModalComponents.ModalContainerFullScreen, {
+      children: !isEditing ? DefaultBody : EditingBody
+    }), showDelete && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledModalComponents.ModalBackground, {
+      style: {
+        position: 'absolute',
+        zIndex: 9999
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styledModalComponents.ModalContainer, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styledModalComponents.CloseButton, {
+          onPress: () => setShowDelete(false),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: {
+              fontSize: 24
+            },
+            children: "\xD7"
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledModalComponents.ModalTitle, {
+          children: "Delete this document?"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styledModalComponents.GroupContainer, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+            onPress: () => setShowDelete(false),
+            text: 'Cancel',
+            style: {
+              width: '100%'
+            },
+            unstyled: true,
+            variant: "filled",
+            color: "white"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+            onPress: handleDeleteDocument,
+            text: 'Delete',
+            style: {
+              width: '100%',
+              borderWidth: 1,
+              borderColor: 'red'
+            },
+            color: "red",
+            unstyled: true,
+            variant: "outlined"
+          })]
+        })]
       })
     })]
   });
 };
-const styles = _reactNative.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: _reactNative.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
-  }
-});
 var _default = exports.default = UserProfileModal;
 //# sourceMappingURL=UserProfileModal.js.map