@controleonline/ui-common 1.2.71 → 1.2.75

package/src/api/index.js

@@ -1,10 +1,35 @@
 import myFetch from '@controleonline/ui-common/src/api/fetch';
 import axios from 'axios';
-import { APP_ENV } from '../../../../../config/env';
+import {env as APP_ENV} from '@env';
 import { resolveAppDomain } from '@controleonline/ui-common/src/utils/appDomain';
 import { resolveApiEntryPoint } from '@controleonline/ui-common/src/utils/apiEntryPoint';
 
 const MIME_TYPE = 'application/ld+json';
+const DOMAIN_QUERY_PARAM_KEYS = new Set(['app-domain', 'appdomain']);
+
+function stripDomainQueryParams(uri) {
+  const value = String(uri || '');
+  const hashIndex = value.indexOf('#');
+  const withoutHash = hashIndex >= 0 ? value.slice(0, hashIndex) : value;
+  const hash = hashIndex >= 0 ? value.slice(hashIndex) : '';
+  const queryIndex = withoutHash.indexOf('?');
+
+  if (queryIndex < 0) {
+    return value;
+  }
+
+  const path = withoutHash.slice(0, queryIndex);
+  const params = new URLSearchParams(withoutHash.slice(queryIndex + 1));
+
+  for (const key of [...params.keys()]) {
+    if (DOMAIN_QUERY_PARAM_KEYS.has(String(key || '').trim().toLowerCase())) {
+      params.delete(key);
+    }
+  }
+
+  const query = params.toString();
+  return `${path}${query ? `?${query}` : ''}${hash}`;
+}
 
 function encodeBasicAuth(user, password) {
   const credentials = `${String(user || '').trim()}:${String(password || '').trim()}`;
@@ -36,13 +61,26 @@ function resolveApiRuntimeConfig(config = {}) {
 function buildApiUrl(apiBaseUrl, path) {
   const apiEntryPoint = resolveApiEntryPoint(apiBaseUrl);
   const entryPoint = apiEntryPoint + (apiEntryPoint.endsWith('/') ? '' : '/');
-  const normalizedPath = String(path || '').startsWith('/')
+  const rawPath = String(path || '').startsWith('/')
     ? String(path || '').substring(1)
     : String(path || '');
+  const normalizedPath = stripDomainQueryParams(rawPath);
 
   return new URL(normalizedPath, entryPoint).href;
 }
 
+function resolveRequestDevice(masterDevice, device, bodyDeviceId) {
+  if (masterDevice?.id) {
+    return masterDevice;
+  }
+
+  if (device?.id) {
+    return device;
+  }
+
+  return bodyDeviceId ? {id: bodyDeviceId} : null;
+}
+
 async function readSmokeResponseBody(response, responseType) {
   if (responseType === 'blob') {
     return await response.blob();
@@ -242,9 +280,22 @@ export const api = {
       }
     }
 
-    const headerDeviceId =
-      this.masterDevice?.id || this.device?.id || bodyDeviceId;
-    if (headerDeviceId) options.headers.set('DEVICE', headerDeviceId);
+    const requestDevice = resolveRequestDevice(
+      this.masterDevice,
+      this.device,
+      bodyDeviceId,
+    );
+
+    if (requestDevice?.id) {
+      options.headers.set('DEVICE', requestDevice.id);
+
+      const requestDeviceType = String(requestDevice.type || '')
+        .trim()
+        .toUpperCase();
+      if (requestDeviceType !== '') {
+        options.headers.set('DEVICE-TYPE', requestDeviceType);
+      }
+    }
     if (options.responseType != 'text') {
       options.headers.set('Content-Type', MIME_TYPE);
       options.headers.set('Accept', MIME_TYPE);
@@ -254,9 +305,11 @@ export const api = {
     if (options.body && typeof options.body != 'string') {
       options.body = JSON.stringify(options.body);
     }
-    if (options.params) {
-      uri = this.buildQueryString(uri, options);
-    }
+    uri = stripDomainQueryParams(uri);
+
+    if (options.params) {
+      uri = this.buildQueryString(uri, options);
+    }
     return myFetch(uri, options).catch(e => {
       throw e;
     });
@@ -279,13 +332,18 @@ export const api = {
 
     return session?.token || session?.api_key;
   },
-  serialize(obj, prefix = '') {
-    const pairs = [];
-
-    for (const key in obj) {
-      if (obj.hasOwnProperty(key)) {
-        const value = obj[key];
-        let fullKey = prefix ? `${prefix}.${key}` : key; // Usa ponto para objetos
+  serialize(obj, prefix = '') {
+    const pairs = [];
+
+    for (const key in obj) {
+      if (obj.hasOwnProperty(key)) {
+        const normalizedKey = String(key || '').trim().toLowerCase();
+        if (DOMAIN_QUERY_PARAM_KEYS.has(normalizedKey)) {
+          continue;
+        }
+
+        const value = obj[key];
+        let fullKey = prefix ? `${prefix}.${key}` : key; // Usa ponto para objetos
 
         if (value === null || value === undefined) {
           pairs.push(`${fullKey}=`);
@@ -314,13 +372,25 @@ export const api = {
     return pairs;
   },
 
-  buildQueryString(uri, options) {
-    if (options.params) {
-      const params = this.serialize(options.params);
-      uri = `${uri}?${params.join('&')}`;
-    }
-    return uri;
-  },
+  buildQueryString(uri, options) {
+    const safeUri = stripDomainQueryParams(uri);
+
+    if (options.params) {
+      const params = this.serialize(options.params);
+      if (params.length === 0) {
+        return safeUri;
+      }
+
+      const hashIndex = safeUri.indexOf('#');
+      const withoutHash = hashIndex >= 0 ? safeUri.slice(0, hashIndex) : safeUri;
+      const hash = hashIndex >= 0 ? safeUri.slice(hashIndex) : '';
+      const separator = withoutHash.includes('?') ? '&' : '?';
+
+      return `${withoutHash}${separator}${params.join('&')}${hash}`;
+    }
+
+    return safeUri;
+  },
   post: async function (uri, body = {}) {
     const options = {
       method: 'POST',

package/src/react/components/AddImportModal.js

@@ -1,108 +1,68 @@
-import React, { useState } from 'react';
-import {
-    View,
-    Text,
-    TouchableOpacity,
-    ScrollView,
-    ActivityIndicator,
-    Platform,
-} from 'react-native';
-
-import Icon from 'react-native-vector-icons/MaterialIcons';
-import * as DocumentPicker from 'expo-document-picker';
+import React from 'react';
+import {
+    View,
+    Text,
+    TouchableOpacity,
+    ScrollView,
+    ActivityIndicator,
+} from 'react-native';
+
+import Icon from 'react-native-vector-icons/MaterialIcons';
 import { useStore } from '@store';
 import AnimatedModal from './AnimatedModal';
-import { api } from '@controleonline/ui-common/src/api';
 import { useMessage } from '@controleonline/ui-common/src/react/components/MessageService';
+import DefaultUpload from '@controleonline/ui-default/src/react/components/upload/DefaultUpload';
 import styles from './AddImportModal.styles';
-
-const AddImportModal = ({ visible, onClose, onSuccess, context = {} }) => {
-    const { showError, showSuccess } = useMessage();
-    const peopleStore = useStore('people');
-    const getters = peopleStore.getters;
-    const { currentCompany } = getters;
-
-    const [file, setFile] = useState(null);
-    const [loading, setLoading] = useState(false);
+
+const AddImportModal = ({ visible, onClose, onSuccess, context = {} }) => {
+    const { showError, showSuccess } = useMessage();
+    const peopleStore = useStore('people');
+    const importsStore = useStore('imports');
+    const themeStore = useStore('theme');
+    const getters = peopleStore.getters;
+    const { currentCompany } = getters;
+    const importActions = importsStore.actions || {};
+    const themeColors = themeStore?.getters?.colors || {};
+    const buttonPalette = {
+        buttonBackground: themeColors.buttonBackground,
+        buttonBorder: themeColors.buttonBorder,
+        buttonText: themeColors.buttonText,
+        buttonIcon: themeColors.buttonIcon || themeColors.buttonText,
+    };
+
     const modalTitle = global.t?.t('imports', 'title', 'new_import');
     const csvLabel = global.t?.t('imports', 'label', 'csv_file');
     const selectFileLabel = global.t?.t('imports', 'button', 'select_file');
     const cancelLabel = global.t?.t('imports', 'button', 'cancel');
-    const importLabel = global.t?.t('imports', 'button', 'import');
     const csvOnlyLabel = global.t?.t('imports', 'message', 'only_csv_files_are_allowed');
-    const pickFileErrorLabel = global.t?.t('imports', 'error', 'error_selecting_file');
     const importSuccessLabel = global.t?.t('imports', 'success', 'import_sent_successfully');
     const importErrorLabel = global.t?.t('imports', 'error', 'error_sending_import');
-    const missingFileLabel = global.t?.t('imports', 'error', 'select_a_csv_file');
-
-    const handlePickFile = async () => {
-        try {
-            const result = await DocumentPicker.getDocumentAsync({
-                type: 'text/csv',
-                copyToCacheDirectory: true,
-                multiple: false,
-            });
-
-            if (result.canceled) return;
-
-            const pickedFile = result.assets[0];
-
-            if (!pickedFile.name?.toLowerCase().endsWith('.csv')) {
-                showError(csvOnlyLabel);
-                return;
-            }
-
-            setFile(pickedFile);
-        } catch {
-            showError(pickFileErrorLabel);
-        }
-    };
 
-    const handleSave = async () => {
-        if (!file) {
-            showError(missingFileLabel);
-            return;
+    const handleUploadImportFile = async ({ file }) => {
+        if (!file?.name?.toLowerCase().endsWith('.csv')) {
+            throw new Error(csvOnlyLabel);
         }
-
-        setLoading(true);
-
-        try {
-            const formData = new FormData();
-            formData.append('importType', context.context);
-
-
-            formData.append('people', String(currentCompany.id));
-
-
-            if (Platform.OS === 'web') {
-                const response = await fetch(file.uri);
-                const blob = await response.blob();
-                formData.append('file', blob, file.name || 'import.csv');
-            } else {
-                formData.append('file', {
-                    uri: file.uri,
-                    name: file.name || 'import.csv',
-                    type: file.mimeType || 'text/csv',
-                });
-            }
 
-            await api.upload('/imports/upload', formData);
+        try {
+            await importActions.uploadImportFile({
+                file,
+                importType: context.context,
+                peopleId: currentCompany.id,
+            });
             showSuccess(importSuccessLabel);
             if (onSuccess) onSuccess();
             handleClose();
+            return file;
         } catch {
-            showError(importErrorLabel);
-        } finally {
-            setLoading(false);
+            throw new Error(importErrorLabel);
         }
-    };
-
-    const handleClose = () => {
-        setFile(null);
-        onClose();
-    };
-
-    return (
+    };
+
+    const handleClose = () => {
+        onClose();
+    };
+
+    return (
         <AnimatedModal
             visible={visible}
             onRequestClose={handleClose}
@@ -118,15 +78,50 @@ const AddImportModal = ({ visible, onClose, onSuccess, context = {} }) => {
 
                 <ScrollView style={styles.content}>
                     <Text style={styles.label}>{csvLabel}</Text>
-                    <TouchableOpacity
-                        onPress={handlePickFile}
-                        style={styles.filePicker}
-                    >
-                        <Text numberOfLines={1} style={styles.fileName}>
-                            {file ? file.name : selectFileLabel}
-                        </Text>
-                        <Icon name="upload-file" size={22} color={file ? "#007bff" : "#666"} />
-                    </TouchableOpacity>
+                    <DefaultUpload
+                        relationStoreName="imports"
+                        relationField="import"
+                        relationResource="imports"
+                        entityId={context.context || 'import'}
+                        companyId={currentCompany.id}
+                        context={`imports-${context.context || 'default'}`}
+                        libraryContexts={[`imports-${context.context || 'default'}`]}
+                        acceptedTypes="text/csv,.csv"
+                        fileType=""
+                        title={csvLabel}
+                        triggerLabel={selectFileLabel}
+                        managerTitle={modalTitle}
+                        searchPlaceholder={selectFileLabel}
+                        uploadButtonLabel={selectFileLabel}
+                        emptyAttachmentLabel=""
+                        emptyLibraryLabel={selectFileLabel}
+                        showInlineContent={false}
+                        uploadResultAlreadyAttached
+                        requireEntity={false}
+                        onUploadFile={handleUploadImportFile}
+                        renderTrigger={({openManager, uploading}) => (
+                            <TouchableOpacity
+                                onPress={openManager}
+                                disabled={uploading}
+                                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>
+                        )}
+                    />
                     <Text style={styles.helperText}>
                         {csvOnlyLabel}
                     </Text>
@@ -136,22 +131,11 @@ const AddImportModal = ({ visible, onClose, onSuccess, context = {} }) => {
                     <TouchableOpacity onPress={handleClose} style={styles.secondaryButton}>
                         <Text>{cancelLabel}</Text>
                     </TouchableOpacity>
-
-                    <TouchableOpacity
-                        onPress={handleSave}
-                        disabled={loading}
-                        style={[
-                            styles.primaryButton,
-                            loading && styles.primaryButtonDisabled,
-                        ]}
-                    >
-                        {loading ? <ActivityIndicator color="#fff" /> : <Text style={styles.primaryButtonText}>{importLabel}</Text>}
-                    </TouchableOpacity>
                 </View>
             </View>
-        </AnimatedModal>
-    );
-};
-
+        </AnimatedModal>
+    );
+};
+
 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.