@controleonline/ui-common 1.2.70 → 1.2.71

package/package.json

@@ -1,28 +1,31 @@
-{
-  "name": "@controleonline/ui-common",
-  "version": "1.2.70",
-  "author": "ControleOnline",
-  "description": "ControleOnline Common Quasar UI Component",
-  "license": "MIT",
-  "main": "src/react/index.js",
-  "scripts": {
-    "test": "npm run test:imports-status && npm run test:runtime-language && npm run test:runtime-footer && npm run test:invoice-presentation",
-    "test:imports-status": "mkdir -p node_modules/@controleonline && ln -sfn ../.. node_modules/@controleonline/ui-common && node --test src/tests/react/utils/importStatus.test.js",
-    "test:runtime-language": "node --test src/tests/react/utils/runtimeLanguage.test.js",
-    "test:runtime-footer": "node --test src/tests/react/utils/runtimeFooter.test.js",
-    "test:invoice-presentation": "node --test src/tests/react/utils/invoicePresentation.test.mjs",
-    "test:coverage": "c8 --reporter=clover --report-dir coverage npm test"
-  },
-  "devDependencies": {
-    "c8": "^10.1.3"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/ControleOnline/ui-common.git"
-  },
-  "bugs": "",
-  "homepage": "https://www.controleonline.com/devs/plugins",
-  "browserslist": [
-    "last 1 version, not dead, ie >= 11"
-  ]
-}
+{
+  "name": "@controleonline/ui-common",
+  "version": "1.2.71",
+  "author": "ControleOnline",
+  "description": "ControleOnline Common Quasar UI Component",
+  "license": "MIT",
+  "main": "src/react/index.js",
+  "scripts": {
+    "test": "npm run test:imports-status && npm run test:runtime-language && npm run test:runtime-footer && npm run test:invoice-presentation",
+    "test:imports-status": "mkdir -p node_modules/@controleonline && ln -sfn ../.. node_modules/@controleonline/ui-common && node --test src/tests/react/utils/importStatus.test.js",
+    "test:runtime-language": "node --test src/tests/react/utils/runtimeLanguage.test.js",
+    "test:runtime-footer": "node --test src/tests/react/utils/runtimeFooter.test.js",
+    "test:invoice-presentation": "node --test src/tests/react/utils/invoicePresentation.test.mjs",
+    "test:coverage": "c8 --reporter=clover --report-dir coverage npm test"
+  },
+  "devDependencies": {
+    "c8": "^10.1.3"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ControleOnline/ui-common.git"
+  },
+  "bugs": "",
+  "homepage": "https://www.controleonline.com/devs/plugins",
+  "browserslist": [
+    "last 1 version, not dead, ie >= 11"
+  ],
+  "dependencies": {
+    "@controleonline/ui-default": "*"
+  }
+}

package/src/api/index.js

@@ -3,9 +3,177 @@ import axios from 'axios';
 import { APP_ENV } from '../../../../../config/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 MIME_TYPE = 'application/ld+json';
+
+function encodeBasicAuth(user, password) {
+  const credentials = `${String(user || '').trim()}:${String(password || '').trim()}`;
+
+  if (credentials === ':') {
+    return '';
+  }
+
+  if (typeof btoa === 'function') {
+    return btoa(credentials);
+  }
+
+  if (typeof Buffer !== 'undefined') {
+    return Buffer.from(credentials, 'utf8').toString('base64');
+  }
+
+  return '';
+}
+
+function resolveApiRuntimeConfig(config = {}) {
+  return {
+    apiBaseUrl: String(config.apiBaseUrl || APP_ENV.API_ENTRYPOINT || '').trim(),
+    domain: String(config.domain || APP_ENV.DOMAIN || '').trim(),
+    htaccessUser: String(config.htaccessUser || APP_ENV.HTACCESS_USER || '').trim(),
+    htaccessPassword: String(config.htaccessPassword || APP_ENV.HTACCESS_PASSWORD || '').trim(),
+  };
+}
+
+function buildApiUrl(apiBaseUrl, path) {
+  const apiEntryPoint = resolveApiEntryPoint(apiBaseUrl);
+  const entryPoint = apiEntryPoint + (apiEntryPoint.endsWith('/') ? '' : '/');
+  const normalizedPath = String(path || '').startsWith('/')
+    ? String(path || '').substring(1)
+    : String(path || '');
+
+  return new URL(normalizedPath, entryPoint).href;
+}
+
+async function readSmokeResponseBody(response, responseType) {
+  if (responseType === 'blob') {
+    return await response.blob();
+  }
+
+  if (responseType === 'text') {
+    return await response.text();
+  }
+
+  const text = await response.text();
+
+  if (!text) {
+    return null;
+  }
+
+  try {
+    return JSON.parse(text);
+  } catch (error) {
+    return text;
+  }
+}
+
+function buildSmokeHttpError(response, body) {
+  const message =
+    String(body?.message || body?.error || body || response.statusText || 'Request failed')
+      .trim() || 'Request failed';
+
+  const error = new Error(message);
+  error.code = response.status;
+  error.status = response.status;
+  error.body = body;
+  return error;
+}
+
+async function requestSmoke(path, options = {}, config = {}) {
+  const runtimeConfig = resolveApiRuntimeConfig(config);
+  const url = buildApiUrl(runtimeConfig.apiBaseUrl, path);
+  const headers = new Headers(options.headers || undefined);
+  const accept =
+    options.responseType === 'blob' || options.responseType === 'text'
+      ? '*/*'
+      : MIME_TYPE;
+
+  if (accept !== '' && !headers.has('Accept')) {
+    headers.set('Accept', accept);
+  }
+
+  if (options.responseType !== 'blob' && !headers.has('Content-Type')) {
+    headers.set('Content-Type', MIME_TYPE);
+  }
+
+  const sessionToken = await api.getToken();
+
+  if (sessionToken && !headers.has('API-TOKEN')) {
+    headers.set('API-TOKEN', sessionToken);
+  }
+
+  const basicAuth = encodeBasicAuth(runtimeConfig.htaccessUser, runtimeConfig.htaccessPassword);
+  if (basicAuth !== '' && !headers.has('Authorization')) {
+    headers.set('Authorization', `Basic ${basicAuth}`);
+  }
+
+  const appDomain = resolveAppDomain(runtimeConfig.domain);
+  if (appDomain !== '' && !headers.has('App-Domain')) {
+    headers.set('App-Domain', appDomain);
+  }
+
+  let body = options.body;
+  const hasBody =
+    body !== undefined &&
+    body !== null &&
+    options.method !== 'GET' &&
+    options.method !== 'HEAD';
+
+  if (hasBody && typeof body !== 'string' && !(body instanceof FormData) && !(body instanceof Blob)) {
+    body = JSON.stringify(body);
+  }
+
+  if (options.params) {
+    const params = api.serialize(options.params);
+    if (params.length > 0) {
+      const urlObject = new URL(url);
+      urlObject.search = params.join('&');
+      return requestSmokeUrl(urlObject.toString(), {
+        ...options,
+        body,
+        headers,
+      });
+    }
+  }
+
+  return requestSmokeUrl(url, {
+    ...options,
+    body,
+    headers,
+  });
+}
+
+async function requestSmokeUrl(url, options) {
+  const response = await fetch(url, options);
+
+  if (options.responseType === 'blob') {
+    if (!response.ok) {
+      throw buildSmokeHttpError(response, await response.text().catch(() => ''));
+    }
+
+    return await response.blob();
+  }
+
+  const responseBody = await readSmokeResponseBody(response, options.responseType);
+
+  if (!response.ok) {
+    throw buildSmokeHttpError(response, responseBody);
+  }
+
+  if (
+    responseBody &&
+    typeof responseBody === 'object' &&
+    (responseBody['@type'] === 'Error' ||
+      responseBody['@type'] === 'ConstraintViolationList')
+  ) {
+    throw buildSmokeHttpError(response, responseBody);
+  }
+
+  if (options.responseType === 'text') {
+    return typeof responseBody === 'string' ? responseBody : '';
+  }
+
+  return responseBody;
+}
+
 export const api = {
   device: JSON.parse(localStorage.getItem('device') || '{}'),
   masterDevice: JSON.parse(localStorage.getItem('master-device') || '{}'),
@@ -17,19 +185,25 @@ export const api = {
     const apiEntryPoint = resolveApiEntryPoint(APP_ENV.API_ENTRYPOINT);
     const entryPoint = apiEntryPoint + (apiEntryPoint.endsWith("/") ? "" : "/");
     const url = new URL(uri.startsWith('/') ? uri.substring(1) : uri, entryPoint).href;
+    const basicAuth = encodeBasicAuth(APP_ENV.HTACCESS_USER, APP_ENV.HTACCESS_PASSWORD);
+    const headers = {
+      'API-TOKEN': token,
+      'App-Domain': appDomain,
+      'Accept': '*/*',
+      // IMPORTANTE: Deixe vazio para o Axios/Browser definir o boundary do multipart
+    };
+
+    if (basicAuth !== '') {
+      headers.Authorization = `Basic ${basicAuth}`;
+    }
 
     return axios.post(url, formData, {
-      headers: {
-        'API-TOKEN': token,
-        'App-Domain': appDomain,
-        'Accept': '*/*',
-        // IMPORTANTE: Deixe vazio para o Axios/Browser definir o boundary do multipart
-      }
-    });
-  },
-  fetch: async function (uri, options = {}) {
-    if (typeof options.headers === 'undefined')
-      Object.assign(options, { headers: new Headers() });
+      headers,
+    });
+  },
+  fetch: async function (uri, options = {}) {
+    if (typeof options.headers === 'undefined')
+      Object.assign(options, { headers: new Headers() });
 
     // Always refresh device from localStorage in case it was set after module load
     try {
@@ -45,14 +219,19 @@ export const api = {
     } catch (e) {
       this.masterDevice = {};
     }
-
-    let token = await this.getToken();
-    if (token) options.headers.set('API-TOKEN', token);
-
-    let bodyDeviceId = null;
-    if (options.body) {
-      if (typeof options.body === 'object') {
-        bodyDeviceId = options.body.device || null;
+
+    let token = await this.getToken();
+    if (token) options.headers.set('API-TOKEN', token);
+
+    const basicAuth = encodeBasicAuth(APP_ENV.HTACCESS_USER, APP_ENV.HTACCESS_PASSWORD);
+    if (basicAuth !== '' && !options.headers.has('Authorization')) {
+      options.headers.set('Authorization', `Basic ${basicAuth}`);
+    }
+
+    let bodyDeviceId = null;
+    if (options.body) {
+      if (typeof options.body === 'object') {
+        bodyDeviceId = options.body.device || null;
       } else if (typeof options.body === 'string') {
         try {
           const parsedBody = JSON.parse(options.body);
@@ -71,10 +250,10 @@ export const api = {
       options.headers.set('Accept', MIME_TYPE);
     }
     options.headers.set('App-Domain', resolveAppDomain(APP_ENV.DOMAIN));
-
-    if (options.body && typeof options.body != 'string') {
-      options.body = JSON.stringify(options.body);
-    }
+
+    if (options.body && typeof options.body != 'string') {
+      options.body = JSON.stringify(options.body);
+    }
     if (options.params) {
       uri = this.buildQueryString(uri, options);
     }
@@ -142,14 +321,35 @@ export const api = {
     }
     return uri;
   },
-  post: async function (uri, body = {}) {
-    const options = {
-      method: 'POST',
-      body: body,
-    };
-    return await this.fetch(uri, options);
-  },
-  execute: function (params) {
-    return axios(params);
-  },
-};
+  post: async function (uri, body = {}) {
+    const options = {
+      method: 'POST',
+      body: body,
+    };
+    return await this.fetch(uri, options);
+  },
+  loadSmokeIndex: async function (config = {}) {
+    return await requestSmoke('/tests', {}, config);
+  },
+  loadArtifactBlob: async function (config = {}, artifact) {
+    if (!artifact || typeof artifact !== 'object') {
+      throw new Error('Artefato inválido.');
+    }
+
+    if (!artifact.url) {
+      throw new Error('Artefato inválido.');
+    }
+
+    return await requestSmoke(artifact.url, {
+      responseType: 'blob',
+    }, config);
+  },
+  triggerSmokeRun: async function (config = {}) {
+    return await requestSmoke('/tests/run', {
+      method: 'POST',
+    }, config);
+  },
+  execute: function (params) {
+    return axios(params);
+  },
+};

package/src/react/components/AddImportModal.js

@@ -11,7 +11,7 @@ import {
 import Icon from 'react-native-vector-icons/MaterialIcons';
 import * as DocumentPicker from 'expo-document-picker';
 import { useStore } from '@store';
-import AnimatedModal from '@controleonline/ui-crm/src/react/components/AnimatedModal';
+import AnimatedModal from './AnimatedModal';
 import { api } from '@controleonline/ui-common/src/api';
 import { useMessage } from '@controleonline/ui-common/src/react/components/MessageService';
 import styles from './AddImportModal.styles';

package/src/react/components/AnimatedModal.js

@@ -0,0 +1,171 @@
+import React, {useEffect, useRef, useState} from 'react';
+import {
+  Animated,
+  Dimensions,
+  Keyboard,
+  KeyboardAvoidingView,
+  Modal,
+  Platform,
+  StyleSheet,
+  Text,
+} from 'react-native';
+import {GestureHandlerRootView} from 'react-native-gesture-handler';
+import {toast, Toasts} from '@backpackapp-io/react-native-toast';
+import styles from './AnimatedModal.styles';
+import {
+  TOAST_EXTRA_INSETS,
+  TOAST_MODAL_COUNT_KEY,
+  TOAST_PROVIDER_KEYS,
+} from './toastConfig';
+
+const {height: SCREEN_HEIGHT} = Dimensions.get('window');
+
+const incrementModalToastDepth = () => {
+  const currentDepth = Number(global?.[TOAST_MODAL_COUNT_KEY] || 0);
+  global[TOAST_MODAL_COUNT_KEY] = currentDepth + 1;
+};
+
+const decrementModalToastDepth = () => {
+  const currentDepth = Number(global?.[TOAST_MODAL_COUNT_KEY] || 0);
+  global[TOAST_MODAL_COUNT_KEY] = Math.max(0, currentDepth - 1);
+};
+
+/**
+ * Modal com overlay aparecendo na hora e apenas o conteúdo subindo de baixo.
+ */
+export default function AnimatedModal({
+  visible,
+  onRequestClose,
+  children,
+  style,
+}) {
+  const [showing, setShowing] = useState(visible);
+  const [keyboardHeight, setKeyboardHeight] = useState(0);
+  const overlayOpacity = useRef(new Animated.Value(0)).current;
+  const slideY = useRef(new Animated.Value(SCREEN_HEIGHT)).current;
+
+  useEffect(() => {
+    if (visible) {
+      setShowing(true);
+      slideY.setValue(SCREEN_HEIGHT);
+      overlayOpacity.setValue(0);
+
+      Animated.parallel([
+        Animated.spring(slideY, {
+          toValue: 0,
+          damping: 24,
+          stiffness: 300,
+          useNativeDriver: true,
+        }),
+        Animated.timing(overlayOpacity, {
+          toValue: 1,
+          duration: 300,
+          useNativeDriver: true,
+        }),
+      ]).start();
+    }
+  }, [visible, overlayOpacity, slideY]);
+
+  useEffect(() => {
+    if (!visible && showing) {
+      Animated.parallel([
+        Animated.timing(overlayOpacity, {
+          toValue: 0,
+          duration: 150,
+          useNativeDriver: true,
+        }),
+        Animated.timing(slideY, {
+          toValue: SCREEN_HEIGHT,
+          duration: 200,
+          useNativeDriver: true,
+        }),
+      ]).start(() => {
+        setShowing(false);
+        setKeyboardHeight(0);
+        onRequestClose?.();
+      });
+    }
+  }, [visible, showing, overlayOpacity, slideY, onRequestClose]);
+
+  useEffect(() => {
+    if (Platform.OS !== 'android') {
+      return undefined;
+    }
+
+    const showSub = Keyboard.addListener('keyboardDidShow', event => {
+      setKeyboardHeight(event?.endCoordinates?.height || 0);
+    });
+    const hideSub = Keyboard.addListener('keyboardDidHide', () => {
+      setKeyboardHeight(0);
+    });
+
+    return () => {
+      showSub.remove();
+      hideSub.remove();
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!visible) {
+      setKeyboardHeight(0);
+    }
+  }, [visible]);
+
+  useEffect(() => {
+    if (!showing) {
+      return undefined;
+    }
+
+    incrementModalToastDepth();
+    return () => {
+      decrementModalToastDepth();
+    };
+  }, [showing]);
+
+  const overlayStyle = [
+    styles.overlay,
+    style,
+    Platform.OS === 'android' ? {paddingBottom: keyboardHeight} : null,
+  ];
+
+  const normalizedChildren = React.Children.toArray(children).map(child => {
+    if (typeof child === 'string' || typeof child === 'number') {
+      const text = String(child).trim();
+      if (!text || text === '.') return null;
+      return <Text>{text}</Text>;
+    }
+    return child;
+  });
+
+  return (
+    <Modal
+      visible={showing}
+      animationType="none"
+      transparent
+      statusBarTranslucent
+      onRequestClose={onRequestClose}>
+      <GestureHandlerRootView style={styles.gestureRoot}>
+        <KeyboardAvoidingView
+          behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+          style={overlayStyle}>
+          <Animated.View
+            style={[
+              StyleSheet.absoluteFillObject,
+              styles.overlayBg,
+              {opacity: overlayOpacity},
+            ]}
+          />
+          <Animated.View
+            style={[styles.content, {transform: [{translateY: slideY}]}]}>
+            {normalizedChildren}
+          </Animated.View>
+          <Toasts
+            providerKey={TOAST_PROVIDER_KEYS.MODAL}
+            extraInsets={TOAST_EXTRA_INSETS}
+            onToastPress={currentToast => toast.dismiss(currentToast.id)}
+          />
+        </KeyboardAvoidingView>
+      </GestureHandlerRootView>
+    </Modal>
+  );
+}

package/src/react/components/AnimatedModal.styles.js

@@ -0,0 +1,21 @@
+import {StyleSheet} from 'react-native';
+
+const styles = StyleSheet.create({
+  gestureRoot: {
+    flex: 1,
+  },
+  overlay: {
+    flex: 1,
+    justifyContent: 'flex-end',
+  },
+  overlayBg: {
+    backgroundColor: 'rgba(15, 23, 42, 0.4)',
+  },
+  content: {
+    width: '100%',
+    flex: 1,
+    justifyContent: 'flex-end',
+  },
+});
+
+export default styles;