@controleonline/ui-common 1.2.86 → 1.2.87

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@controleonline/ui-common",
-  "version": "1.2.86",
+  "version": "1.2.87",
   "author": "ControleOnline",
   "description": "ControleOnline Common Quasar UI Component",
   "license": "MIT",

package/src/react/components/AddImportModal.js

@@ -11,18 +11,29 @@ import Icon from 'react-native-vector-icons/MaterialIcons';
 import { useStore } from '@store';
 import AnimatedModal from './AnimatedModal';
 import { useMessage } from '@controleonline/ui-common/src/react/components/MessageService';
-import ImportsPage from '@controleonline/ui-common/src/react/pages/Imports';
 import { useState } from 'react';
 import { resolveSystemErrorMessage } from '@controleonline/ui-common/src/react/utils/systemErrorMessage';
 import styles from './AddImportModal.styles';
 
+const FORBIDDEN_EXTENSIONS = new Set(['*', '*.*', '', '.', '.*']);
+
+const sanitizeAllowedExtensions = (extensions, importType) => {
+    const fallback =
+        importType === 'invoice_tax' || importType === 'xml' ? ['xml', 'zip'] : ['csv'];
+    const source = Array.isArray(extensions) && extensions.length > 0 ? extensions : fallback;
+    return [...new Set(
+        source
+            .map(item => String(item || '').trim().replace(/^\./, '').toLowerCase())
+            .filter(item => item && !FORBIDDEN_EXTENSIONS.has(item) && !item.includes('*')),
+    )];
+};
+
 const AddImportModal = ({
     visible,
     onClose,
     onSuccess,
     context = {},
-    allowedExtensions = [], // default will be set to ['csv'] if empty
-    // acceptedTypes will be derived from allowedExtensions for security
+    allowedExtensions = [],
     helperLabel,
     modalTitle,
     fileLabel,
@@ -46,12 +57,14 @@ const AddImportModal = ({
     const _importSuccessLabel = importSuccessLabel ?? fallbackSuccessLabel;
     const _importErrorLabel = importErrorLabel ?? fallbackErrorLabel;
     const _helperLabel = helperLabel ?? fallbackInvalidFileLabel;
-    // Resolve allowed extensions securely – default to CSV only
-    const _allowedExtensions = (allowedExtensions && allowedExtensions.length > 0) ? allowedExtensions : ['csv'];
-    // Build acceptedTypes string for file input (e.g., ".csv,.xml,.zip")
+    const resolvedImportType =
+        importType ?? context.context ?? (allowedExtensions.includes('xml') ? 'xml' : 'csv');
+    const _allowedExtensions = sanitizeAllowedExtensions(
+        allowedExtensions.length > 0 ? allowedExtensions : context.allowedExtensions,
+        resolvedImportType,
+    );
     const _acceptedTypes = _allowedExtensions.map(ext => `.${ext}`).join(',');
-    // Determine import type: prioritize prop, then infer from allowed extensions, default to 'csv'
-    const _importType = importType ?? (_allowedExtensions.includes('xml') ? 'xml' : (_allowedExtensions.includes('zip') ? 'zip' : 'csv'));
+    const _importType = resolvedImportType;
     const { showError, showSuccess } = useMessage();
     const peopleStore = useStore('people');
     const importsStore = useStore('imports');
@@ -68,15 +81,36 @@ const AddImportModal = ({
     };
 
     const [showImportList, setShowImportList] = useState(false);
-    const [importResult, setImportResult] = useState(null); // true = success, false = error
+    const [importResult, setImportResult] = useState(null);
     const [uploading, setUploading] = useState(false);
 
-    const handleUploadImportFile = async ({ file }) => {
-        if (_allowedExtensions.length > 0) {
-            const extensionRegex = new RegExp(`\\\\.(${_allowedExtensions.join('|')})$`, 'i');
-            if (!file?.name?.toLowerCase().match(extensionRegex)) {
+    const handleUploadImportFile = async ({ file } = {}) => {
+        if (!file) {
+            if (typeof document === 'undefined') {
                 throw new Error(_helperLabel);
             }
+
+            file = await new Promise((resolve, reject) => {
+                const input = document.createElement('input');
+                input.type = 'file';
+                input.accept = _acceptedTypes;
+                input.onchange = () => resolve(input.files?.[0] || null);
+                input.onerror = () => reject(new Error(_helperLabel));
+                input.click();
+            });
+        }
+
+        if (!file) {
+            return null;
+        }
+
+        if (_allowedExtensions.length === 0) {
+            throw new Error('Importar *.* nao e permitido.');
+        }
+
+        const extensionRegex = new RegExp(`\\.(${_allowedExtensions.join('|')})$`, 'i');
+        if (!file?.name?.toLowerCase().match(extensionRegex)) {
+            throw new Error(_helperLabel);
         }
 
         setUploading(true);
@@ -85,9 +119,9 @@ const AddImportModal = ({
                 file,
                 importType: _importType,
                 peopleId: currentCompany.id,
+                allowedExtensions: _allowedExtensions,
             });
             showSuccess(_importSuccessLabel);
-            // Indicate successful import and open import list
             setImportResult(true);
             setShowImportList(true);
             if (onSuccess) onSuccess();
@@ -124,25 +158,19 @@ const AddImportModal = ({
                 </View>
 
                 <ScrollView style={styles.content} keyboardShouldPersistTaps="always">
-    <TouchableOpacity
-        onPress={handleUploadImportFile}
-        style={[styles.filePicker, { backgroundColor: buttonPalette.buttonBackground, borderColor: buttonPalette.buttonBorder }]}
-    >
-        <Text numberOfLines={1} style={[styles.fileName, { color: buttonPalette.buttonText }]}>{_selectFileLabel}</Text>
-        {uploading ? (
-            <ActivityIndicator color={buttonPalette.buttonIcon} />
-        ) : (
-            <Icon name="upload-file" size={22} color={buttonPalette.buttonIcon} />
-        )}
-    </TouchableOpacity>
-    <TouchableOpacity
-        onPress={() => setShowImportList(true)}
-        style={[styles.filePicker, { marginTop: 10, backgroundColor: buttonPalette.buttonBackground, borderColor: buttonPalette.buttonBorder }]}
-    >
-        <Text style={[styles.fileName, { color: buttonPalette.buttonText }]}>{global.t?.t('imports', 'button', 'view_imports') || 'View Imports'}</Text>
-    </TouchableOpacity>
-</ScrollView>
-
+                    <Text style={styles.fileName}>{_fileLabel} ({_acceptedTypes})</Text>
+                    <TouchableOpacity
+                        onPress={() => handleUploadImportFile()}
+                        style={[styles.filePicker, { backgroundColor: buttonPalette.buttonBackground, borderColor: buttonPalette.buttonBorder }]}
+                    >
+                        <Text numberOfLines={1} style={[styles.fileName, { color: buttonPalette.buttonText }]}>{_selectFileLabel}</Text>
+                        {uploading ? (
+                            <ActivityIndicator color={buttonPalette.buttonIcon} />
+                        ) : (
+                            <Icon name="upload-file" size={22} color={buttonPalette.buttonIcon} />
+                        )}
+                    </TouchableOpacity>
+                </ScrollView>
 
                 <View style={styles.footer}>
                     <TouchableOpacity onPress={handleClose} style={styles.secondaryButton}>
@@ -155,4 +183,3 @@ const AddImportModal = ({
 };
 
 export default AddImportModal;
-// TODO(store-first): quando este arquivo for mexido, mover a leitura para stores e evitar chamadas HTTP diretas quando o store ja resolver isso.

package/src/react/pages/Imports.js

@@ -27,7 +27,7 @@ const {
 
 const formatDate = (dateString) => {
     const d = new Date(dateString);
-    return d.toLocaleString(); // Formato local legível
+    return d.toLocaleString();
 };
 
 const Imports = ({ context = {}, onClose }) => {
@@ -57,6 +57,12 @@ const Imports = ({ context = {}, onClose }) => {
     const importType = context.context;
     const title = context.title;
     const searchPlaceholder = context.searchPlaceholder;
+    const allowedExtensions = Array.isArray(context.allowedExtensions)
+        ? context.allowedExtensions
+        : importType === 'invoice_tax' || importType === 'xml'
+            ? ['xml', 'zip']
+            : ['csv'];
+    const showCsvTemplate = allowedExtensions.includes('csv');
     const {
         refreshLabel,
         processingLabel,
@@ -255,11 +261,9 @@ const Imports = ({ context = {}, onClose }) => {
             });
 
             const csvText = typeof response === 'string' ? response : await response.text?.();
-            console.log('CSV recebido:', csvText.slice(0, 200));
 
             if (!csvText) throw new Error('CSV vazio');
 
-            // mobile: verifica se o diretório está disponível
             const dirUri = Directory?.cacheDocumentDirectory || Directory?.documentDirectory;
 
             if (dirUri) {
@@ -272,21 +276,18 @@ const Imports = ({ context = {}, onClose }) => {
                     await Sharing.shareAsync(fileUri);
                 }
 
-                console.log(`Arquivo CSV criado em: ${fileUri}`);
                 return fileUri;
             } else if (typeof window !== 'undefined') {
-                // fallback web
                 const blob = new Blob([csvText], { type: 'text/csv' });
                 const link = document.createElement('a');
                 link.href = URL.createObjectURL(blob);
                 link.download = `modelo_${importType}.csv`;
                 link.click();
                 URL.revokeObjectURL(link.href);
-                console.log('Download CSV disparado no web');
                 return 'web-download';
-            } else {
-                throw new Error('FileSystem não disponível');
             }
+
+            throw new Error('FileSystem não disponível');
         } catch (err) {
             console.error('Erro detalhado ao baixar CSV:', err);
             throw new Error('Falha ao baixar o modelo CSV');
@@ -306,6 +307,7 @@ const Imports = ({ context = {}, onClose }) => {
             <View style={styles.subHeader}>
                 <View style={styles.topRow}>
                     <View style={styles.topRowActions}>
+                        {showCsvTemplate ? (
                         <TouchableOpacity style={styles.downloadButton} onPress={downloadTemplate}>
                             <View
                                 style={{
@@ -323,6 +325,7 @@ const Imports = ({ context = {}, onClose }) => {
                                 <Text style={[styles.downloadText, { color: buttonPalette.buttonText }]}>Baixar Modelo</Text>
                             </View>
                         </TouchableOpacity>
+                        ) : null}
 
                         <TouchableOpacity
                             style={[
@@ -397,16 +400,15 @@ const Imports = ({ context = {}, onClose }) => {
                 visible={showAddImportModal}
                 onClose={() => setShowAddImportModal(false)}
                 context={context}
+                importType={importType}
+                allowedExtensions={allowedExtensions}
                 onSuccess={() => {
                     setCurrentPage(1);
                     fetchImports(searchQuery, 1);
-                    if (onImportComplete) onImportComplete();
                 }}
-                onImportComplete={onImportComplete}
             />
         </View>
     );
 };
 
 export default Imports;
-// TODO(store-first): quando este arquivo for mexido, mover a leitura para stores, remover api.fetch e evitar repassar dados em objetos quando o store ja resolver isso.

package/src/store/imports/customActions.js

@@ -1,6 +1,8 @@
 import {Platform} from 'react-native';
 import {api} from '@controleonline/ui-common/src/api';
 
+const FORBIDDEN_EXTENSIONS = new Set(['*', '*.*', '', '.', '.*']);
+
 const extractId = value => {
   if (value === null || value === undefined || value === '') {
     return '';
@@ -15,11 +17,42 @@ const extractId = value => {
   return match ? match[1] : '';
 };
 
+const normalizeExtension = value =>
+  String(value || '')
+    .trim()
+    .replace(/^\./, '')
+    .toLowerCase();
+
+const fileExtension = file => {
+  const name = String(file?.name || file?.uri || '');
+  const match = name.toLowerCase().match(/\.([a-z0-9]+)$/);
+  return match ? match[1] : '';
+};
+
+const sanitizeAllowedExtensions = (extensions, importType) => {
+  const fallback =
+    importType === 'invoice_tax' || importType === 'xml' ? ['xml', 'zip'] : ['csv'];
+  const source = Array.isArray(extensions) && extensions.length > 0 ? extensions : fallback;
+  const cleaned = source
+    .map(normalizeExtension)
+    .filter(item => item && !FORBIDDEN_EXTENSIONS.has(item) && !item.includes('*'));
+
+  if (cleaned.length === 0) {
+    throw new Error('Tipo de importacao sem extensao permitida. Importar *.* nao e permitido.');
+  }
+
+  return [...new Set(cleaned)];
+};
+
 export const uploadImportFile = (_context, payload = {}) => {
   const normalizedPayload = payload && typeof payload === 'object' ? payload : {};
   const file = normalizedPayload.file;
   const importType = String(normalizedPayload.importType || '').trim();
   const peopleId = extractId(normalizedPayload.peopleId || normalizedPayload.people);
+  const allowedExtensions = sanitizeAllowedExtensions(
+    normalizedPayload.allowedExtensions,
+    importType,
+  );
 
   if (!file) {
     throw new Error('Arquivo de importacao nao informado.');
@@ -33,6 +66,13 @@ export const uploadImportFile = (_context, payload = {}) => {
     throw new Error('Empresa nao identificada para a importacao.');
   }
 
+  const extension = fileExtension(file);
+  if (!allowedExtensions.includes(extension)) {
+    throw new Error(
+      `Extensao nao permitida. Aceitas: ${allowedExtensions.map(item => `.${item}`).join(', ')}.`,
+    );
+  }
+
   const formData = new FormData();
   formData.append('importType', importType);
   formData.append('people', peopleId);
@@ -42,8 +82,8 @@ export const uploadImportFile = (_context, payload = {}) => {
   } else {
     formData.append('file', {
       uri: file.uri,
-      name: file.name || 'import.csv',
-      type: file.mimeType || 'text/csv',
+      name: file.name || `import.${extension || allowedExtensions[0]}`,
+      type: file.mimeType || 'application/octet-stream',
     });
   }