@ethora/chat-component-rn 26.7.5 → 26.7.7

package/src/components/Modals/ChatProfileModal/ReportChatModal.tsx

@@ -0,0 +1,244 @@
+/** @format */
+
+import React, { useState } from 'react';
+import {
+  ActivityIndicator,
+  Modal,
+  StyleSheet,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { useSelector } from 'react-redux';
+import { getActiveRoom, RootState } from '../../../roomStore';
+import { postReportRoom } from '../../../networking/api-requests/rooms.api';
+import { useToast } from '../../../context/ToastContext';
+import { useT } from '../../../i18n/useT';
+import { getIconColor } from '../../../helpers/getIconColor';
+import { useChatSettingState } from '../../../hooks/useChatSettingState';
+
+/**
+ * Category ids go to `POST /v1/chats/reports/{chatName}` as-is; the labels
+ * come from the i18n table, which already carried `report.category.*`
+ * strings in all six locales with nothing rendering them until now.
+ */
+const CATEGORIES = [
+  'spam',
+  'violence',
+  'childAbuse',
+  'pornography',
+  'personalDetails',
+  'illegalDrugs',
+  'other',
+] as const;
+
+interface ReportChatModalProps {
+  visible: boolean;
+  onClose: () => void;
+}
+
+const ReportChatModal: React.FC<ReportChatModalProps> = ({
+  visible,
+  onClose,
+}) => {
+  const t = useT();
+  const { showToast } = useToast();
+  const { config } = useChatSettingState();
+  const activeRoom = useSelector((state: RootState) => getActiveRoom(state));
+  const [category, setCategory] = useState<string | null>(null);
+  const [details, setDetails] = useState('');
+  const [sending, setSending] = useState(false);
+  const primary = getIconColor(config);
+
+  const close = () => {
+    setCategory(null);
+    setDetails('');
+    onClose();
+  };
+
+  const submit = async () => {
+    if (!category || sending) {return;}
+    setSending(true);
+    try {
+      await postReportRoom({
+        chatName: activeRoom?.jid?.split('@')[0] || '',
+        category,
+        text: details.trim() || undefined,
+      });
+      showToast({
+        id: Date.now().toString(),
+        title: 'Success',
+        message: t('modal.report.chatTitle'),
+        type: 'success',
+      });
+      close();
+    } catch (error) {
+      console.error('Failed to report chat:', error);
+      showToast({
+        id: Date.now().toString(),
+        title: 'Error',
+        message: t('modal.report.chatTitle'),
+        type: 'error',
+      });
+    } finally {
+      setSending(false);
+    }
+  };
+
+  return (
+    <Modal
+      transparent
+      visible={visible}
+      animationType="fade"
+      onRequestClose={close}
+    >
+      <View style={styles.backdrop}>
+        <TouchableOpacity
+          testID="report-backdrop"
+          style={StyleSheet.absoluteFill}
+          activeOpacity={1}
+          onPress={close}
+        />
+        <View style={styles.card}>
+          <Text style={styles.title}>{t('modal.report.chatTitle')}</Text>
+          <View style={styles.categories}>
+            {CATEGORIES.map((id) => {
+              const selected = category === id;
+              return (
+                <TouchableOpacity
+                  key={id}
+                  testID={`report-category-${id}`}
+                  activeOpacity={0.7}
+                  onPress={() => setCategory(id)}
+                  style={[
+                    styles.category,
+                    selected && { borderColor: primary, backgroundColor: primary + '14' },
+                  ]}
+                >
+                  <Text
+                    style={[styles.categoryLabel, selected && { color: primary }]}
+                  >
+                    {t(`report.category.${id}`)}
+                  </Text>
+                </TouchableOpacity>
+              );
+            })}
+          </View>
+          {category === 'other' && (
+            <TextInput
+              testID="report-details"
+              style={styles.input}
+              placeholder={t('modal.report.otherDetails')}
+              placeholderTextColor="#8C8C8C"
+              value={details}
+              onChangeText={setDetails}
+              multiline
+            />
+          )}
+          <View style={styles.buttons}>
+            <TouchableOpacity
+              activeOpacity={0.7}
+              style={[styles.button, styles.cancel]}
+              onPress={close}
+            >
+              <Text style={styles.cancelLabel}>{t('action.cancel')}</Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              testID="report-submit"
+              activeOpacity={0.7}
+              disabled={!category || sending}
+              style={[
+                styles.button,
+                { backgroundColor: primary, opacity: !category || sending ? 0.5 : 1 },
+              ]}
+              onPress={submit}
+            >
+              {sending ? (
+                <ActivityIndicator color="#FFFFFF" />
+              ) : (
+                <Text style={styles.submitLabel}>{t('action.send')}</Text>
+              )}
+            </TouchableOpacity>
+          </View>
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  backdrop: {
+    flex: 1,
+    backgroundColor: 'rgba(15,15,20,0.45)',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 24,
+  },
+  card: {
+    width: '100%',
+    borderRadius: 16,
+    backgroundColor: '#FFFFFF',
+    padding: 20,
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#141414',
+    marginBottom: 16,
+  },
+  categories: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 8,
+  },
+  category: {
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderRadius: 20,
+    borderWidth: 1,
+    borderColor: '#E4E4E9',
+  },
+  categoryLabel: {
+    fontSize: 14,
+    color: '#141414',
+  },
+  input: {
+    marginTop: 16,
+    minHeight: 80,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: '#E4E4E9',
+    padding: 12,
+    fontSize: 14,
+    color: '#141414',
+    textAlignVertical: 'top',
+  },
+  buttons: {
+    flexDirection: 'row',
+    gap: 12,
+    marginTop: 20,
+  },
+  button: {
+    flex: 1,
+    height: 44,
+    borderRadius: 12,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  cancel: {
+    backgroundColor: '#F2F2F7',
+  },
+  cancelLabel: {
+    fontSize: 16,
+    fontWeight: '500',
+    color: '#141414',
+  },
+  submitLabel: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#FFFFFF',
+  },
+});
+
+export default ReportChatModal;

package/src/components/Modals/FilePreviewModal/FilePreviewModal.tsx

@@ -26,7 +26,7 @@ import {
 import { useVideoPlayer, VideoView } from 'expo-video';
 import { PlayIcon } from '../../../assets/icons';
 import * as FileSystem from 'expo-file-system/legacy';
-import * as MediaLibrary from 'expo-media-library';
+import { getMediaLibrary } from '../../../helpers/mediaLibraryRuntime';
 import { useToast } from '../../../context/ToastContext';
 import PdfViewer from './PdfView';
 import DocumentViewer from './DocumentViewer';
@@ -129,6 +129,8 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
   if (!activeFile) {return null;}
 
   const requestStoragePermission = async () => {
+    const MediaLibrary = getMediaLibrary();
+    if (!MediaLibrary?.requestPermissionsAsync) {return false;}
     try {
       const { status } = await MediaLibrary.requestPermissionsAsync();
       return status === 'granted';
@@ -158,7 +160,7 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
       const download = await FileSystem.downloadAsync(withFileToken(activeFile.fileURL), filePath);
 
       if (download.status === 200) {
-        await MediaLibrary.saveToLibraryAsync(download.uri);
+        await getMediaLibrary()?.saveToLibraryAsync(download.uri);
         showToast({
           id: Date.now().toString(),
           title: 'Success',

package/src/components/Modals/Modal/Modal.tsx

@@ -37,6 +37,13 @@ const Modal: React.FC<ModalProps> = ({ children, modal, setOpenModal }) => {
 
     return <ModalComponent handleCloseModal={handleClose} />;
   };
+  // Modals that present themselves (a real RN <Modal>, so the dim covers
+  // the whole window rather than stopping at this component's frame) must
+  // not also sit inside the shared in-tree backdrop — that would dim twice.
+  if (modal === MODAL_TYPES.NEW_CHAT) {
+    return <>{renderModalContent()}{children}</>;
+  }
+
   return (
     modal && (
       <ModalBackground

package/src/components/Modals/NewChatModal/ModalContent.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { PickedImage } from '../../../helpers/pickImageAsset';
 import {
   ModalContainer,
   CloseButton,
@@ -19,12 +20,13 @@ type ModalContentProps = {
   roomName: string;
   roomDescription: string;
   chatType: ChatAccessOption;
-  profileImage: string | File | null;
+  profileImage: string | PickedImage | null;
   setActiveTab: (tab: '0' | '1' | null) => void;
   handleRoomNameChange: (e: string) => void;
   setRoomDescription: (description: string) => void;
   setChatType: (type: ChatAccessOption) => void;
-  setProfileImage: (image: string | File | null) => void;
+  setProfileImage: (image: string | PickedImage | null) => void;
+  onUploadImage: () => void;
   selectedUsers: any[];
   setSelectedUsers: (users: any[]) => void;
   handleCreateRoom: () => void;
@@ -40,6 +42,7 @@ const ModalContent: React.FC<ModalContentProps> = ({
   roomDescription,
   chatType,
   profileImage,
+  onUploadImage,
   setActiveTab,
   handleRoomNameChange,
   setChatType,
@@ -62,7 +65,7 @@ const ModalContent: React.FC<ModalContentProps> = ({
           <ModalTitle>Create New Chat</ModalTitle>
           <ProfileImagePlaceholder
             size={120}
-            upload={{ active: true, onUpload: setProfileImage }}
+            upload={{ active: true, onUpload: onUploadImage }}
             remove={{
               enabled: true,
               onRemoveClick: () => setProfileImage(null),