@controleonline/ui-common 1.2.70

package/src/react/components/AddImportModal.js

@@ -0,0 +1,157 @@
+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 { useStore } from '@store';
+import AnimatedModal from '@controleonline/ui-crm/src/react/components/AnimatedModal';
+import { api } from '@controleonline/ui-common/src/api';
+import { useMessage } from '@controleonline/ui-common/src/react/components/MessageService';
+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 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;
+        }
+
+        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);
+            showSuccess(importSuccessLabel);
+            if (onSuccess) onSuccess();
+            handleClose();
+        } catch {
+            showError(importErrorLabel);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleClose = () => {
+        setFile(null);
+        onClose();
+    };
+
+    return (
+        <AnimatedModal
+            visible={visible}
+            onRequestClose={handleClose}
+            style={styles.modalAlignEnd}
+        >
+            <View style={styles.sheet}>
+                <View style={styles.header}>
+                    <Text style={styles.title}>{modalTitle}</Text>
+                    <TouchableOpacity onPress={handleClose}>
+                        <Icon name="close" size={24} />
+                    </TouchableOpacity>
+                </View>
+
+                <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>
+                    <Text style={styles.helperText}>
+                        {csvOnlyLabel}
+                    </Text>
+                </ScrollView>
+
+                <View style={styles.footer}>
+                    <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>
+    );
+};
+
+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/components/AddImportModal.styles.js

@@ -0,0 +1,81 @@
+import { StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({
+  modalAlignEnd: {
+    justifyContent: 'flex-end',
+  },
+  sheet: {
+    backgroundColor: '#fff',
+    borderTopLeftRadius: 24,
+    borderTopRightRadius: 24,
+    maxHeight: '90%',
+    width: '100%',
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    padding: 20,
+    borderBottomWidth: 1,
+    borderColor: '#eee',
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: '700',
+  },
+  content: {
+    padding: 20,
+  },
+  label: {
+    marginBottom: 6,
+    fontWeight: '600',
+  },
+  filePicker: {
+    borderWidth: 1,
+    borderColor: '#ddd',
+    borderRadius: 10,
+    padding: 16,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  fileName: {
+    flex: 1,
+    marginRight: 10,
+  },
+  helperText: {
+    marginTop: 10,
+    color: '#6c757d',
+    fontSize: 12,
+  },
+  footer: {
+    flexDirection: 'row',
+    padding: 20,
+    gap: 10,
+    borderTopWidth: 1,
+    borderColor: '#eee',
+  },
+  secondaryButton: {
+    flex: 1,
+    padding: 14,
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: '#aaa',
+    alignItems: 'center',
+  },
+  primaryButton: {
+    flex: 1,
+    padding: 14,
+    borderRadius: 10,
+    backgroundColor: '#007bff',
+    alignItems: 'center',
+  },
+  primaryButtonDisabled: {
+    backgroundColor: '#ccc',
+  },
+  primaryButtonText: {
+    color: '#fff',
+    fontWeight: '600',
+  },
+});
+
+export default styles;

package/src/react/components/BackgroundRuntimeBridge.js

@@ -0,0 +1,219 @@
+import React, {useEffect, useMemo, useRef} from 'react';
+import {NativeModules} from 'react-native';
+import {env as APP_ENV} from '@env';
+import {useStore} from '@store';
+import DeviceInfo from 'react-native-device-info';
+import {resolveAppDomain} from '@controleonline/ui-common/src/utils/appDomain';
+import {resolveApiEntryPoint} from '@controleonline/ui-common/src/utils/apiEntryPoint';
+import {isWebRuntimeDevice} from '@controleonline/ui-common/src/react/utils/deviceRuntime';
+import {normalizeDeviceId} from '@controleonline/ui-common/src/react/utils/paymentDevices';
+import {
+  DEVICE_ALERT_SOUND_ENABLED_KEY,
+  DEVICE_ALERT_SOUND_URL_KEY,
+  DEVICE_RUNTIME_DEBUG_INFO_ENABLED_KEY,
+  isTruthyValue,
+  parseConfigsObject,
+} from '@controleonline/ui-common/src/react/config/deviceConfigBootstrap';
+import {
+  isManagerAppType,
+  resolveManagerOrderNotificationPreferences,
+} from '@controleonline/ui-common/src/react/utils/managerOrderNotifications';
+import {syncBackgroundRuntimeRegistration} from '@controleonline/ui-common/src/react/utils/backgroundRuntimeRegistration';
+import {
+  DEFAULT_NETWORK_PRINTER_PORT,
+  DISPLAY_DEVICE_TYPE,
+  NETWORK_PRINTER_PORT_CONFIG_KEY,
+  PDV_DEVICE_TYPE,
+  getManagedPrinterDevices,
+  getPrinterHost,
+  normalizeDeviceType,
+  normalizePrinterPort,
+} from '@controleonline/ui-common/src/react/utils/printerDevices';
+
+const backgroundRuntimeModule = NativeModules?.BackgroundRuntime;
+
+const safeTrim = value => String(value || '').trim();
+const readSessionToken = () => {
+  try {
+    const session = JSON.parse(localStorage.getItem('session') || '{}');
+    return safeTrim(session?.token || session?.api_key);
+  } catch {
+    return '';
+  }
+};
+
+const BackgroundRuntimeBridge = () => {
+  const authStore = useStore('auth');
+  const peopleStore = useStore('people');
+  const deviceStore = useStore('device');
+  const deviceConfigStore = useStore('device_config');
+
+  const {isLogged, user} = authStore.getters;
+  const {currentCompany} = peopleStore.getters;
+  const {item: runtimeDevice} = deviceStore.getters;
+  const {
+    item: runtimeDeviceConfig,
+    items: companyDeviceConfigs = [],
+  } = deviceConfigStore.getters;
+
+  const lastRegistrationIdRef = useRef('');
+  const lastRegistrationPayloadRef = useRef('');
+
+  const bundleId = safeTrim(DeviceInfo.getBundleId());
+  const runtimeAppKey =
+    bundleId || safeTrim(APP_ENV.APP_TYPE).toUpperCase() || 'app';
+  const runtimeDeviceId = normalizeDeviceId(runtimeDevice?.id);
+  const runtimeDeviceType = normalizeDeviceType(
+    runtimeDeviceConfig?.type ||
+      runtimeDeviceConfig?.device?.type ||
+      runtimeDevice?.type,
+  );
+  const currentCompanyId = safeTrim(currentCompany?.id);
+  const sessionToken = readSessionToken();
+  const isManagerRuntime = isManagerAppType(APP_ENV?.APP_TYPE);
+  const managerOrderNotificationPreferences =
+    resolveManagerOrderNotificationPreferences(user);
+  const userAlertSoundUrl = safeTrim(
+    managerOrderNotificationPreferences.soundUrl,
+  );
+  const userAlertSoundEnabled =
+    isManagerRuntime &&
+    managerOrderNotificationPreferences.pushEnabled &&
+    managerOrderNotificationPreferences.soundEnabled;
+  const runtimeDeviceConfigs = parseConfigsObject(runtimeDeviceConfig?.configs);
+  const deviceAlertSoundEnabled = isTruthyValue(
+    runtimeDeviceConfigs?.[DEVICE_ALERT_SOUND_ENABLED_KEY],
+  );
+  const deviceAlertSoundUrl = safeTrim(
+    runtimeDeviceConfigs?.[DEVICE_ALERT_SOUND_URL_KEY],
+  );
+  const runtimeDebugInfoEnabled = isTruthyValue(
+    runtimeDeviceConfigs?.[DEVICE_RUNTIME_DEBUG_INFO_ENABLED_KEY],
+  );
+  const alertSoundEnabled = userAlertSoundEnabled || deviceAlertSoundEnabled;
+  const alertSoundUrl = userAlertSoundEnabled
+    ? userAlertSoundUrl
+    : deviceAlertSoundUrl;
+
+  const managedPrinters = useMemo(
+    () =>
+      getManagedPrinterDevices({
+        deviceConfigs: companyDeviceConfigs,
+        companyId: currentCompanyId,
+        managerDeviceId: runtimeDeviceId,
+      })
+        .map(printer => {
+          const host = safeTrim(getPrinterHost(printer));
+          const port = normalizePrinterPort(
+            printer?.configs?.[NETWORK_PRINTER_PORT_CONFIG_KEY] ||
+              DEFAULT_NETWORK_PRINTER_PORT,
+          );
+          const deviceId = normalizeDeviceId(printer?.device);
+
+          if (!host || !deviceId) {
+            return null;
+          }
+
+          return {
+            deviceId,
+            host,
+            port,
+          };
+        })
+        .filter(Boolean),
+    [companyDeviceConfigs, currentCompanyId, runtimeDeviceId],
+  );
+
+  const spoolDeviceIds = useMemo(() => {
+    if (!runtimeDeviceId || isWebRuntimeDevice(runtimeDevice)) {
+      return [];
+    }
+
+    if (runtimeDeviceType === PDV_DEVICE_TYPE) {
+      return Array.from(
+        new Set([
+          runtimeDeviceId,
+          ...managedPrinters.map(printer => normalizeDeviceId(printer?.deviceId)),
+        ].filter(Boolean)),
+      );
+    }
+
+    if (runtimeDeviceType === DISPLAY_DEVICE_TYPE) {
+      return Array.from(
+        new Set(
+          managedPrinters
+            .map(printer => normalizeDeviceId(printer?.deviceId))
+            .filter(Boolean),
+        ),
+      );
+    }
+
+    return [];
+  }, [managedPrinters, runtimeDevice, runtimeDeviceId, runtimeDeviceType]);
+
+  const registration = useMemo(() => {
+    if (!isLogged || !sessionToken || !runtimeDeviceId || !currentCompanyId) {
+      return null;
+    }
+
+    return {
+      registrationId: `${runtimeAppKey}::${runtimeDeviceId}::${currentCompanyId}`,
+      packageName: runtimeAppKey,
+      companyAlias: safeTrim(currentCompany?.alias || currentCompany?.name),
+      companyId: currentCompanyId,
+      appDomain: safeTrim(resolveAppDomain(APP_ENV.DOMAIN)),
+      appType: safeTrim(APP_ENV.APP_TYPE).toUpperCase(),
+      backgroundEnabled: true,
+      deviceId: runtimeDeviceId,
+      deviceType: runtimeDeviceType,
+      notificationEnabled: !isManagerRuntime,
+      alertSoundEnabled,
+      alertSoundUrl,
+      deviceAlertSoundEnabled,
+      deviceAlertSoundUrl,
+      userAlertSoundEnabled,
+      userAlertSoundUrl,
+      runtimeDebugInfoEnabled,
+      printEnabled: spoolDeviceIds.length > 0 && managedPrinters.length > 0,
+      managedPrinters,
+      socketUrl: safeTrim(APP_ENV.SOCKET),
+      spoolDeviceIds,
+      token: sessionToken,
+      apiBaseUrl: safeTrim(resolveApiEntryPoint(APP_ENV.API_ENTRYPOINT)),
+    };
+  }, [
+    currentCompany?.alias,
+    currentCompany?.name,
+    currentCompanyId,
+    alertSoundEnabled,
+    alertSoundUrl,
+    deviceAlertSoundEnabled,
+    deviceAlertSoundUrl,
+    runtimeAppKey,
+    isLogged,
+    isManagerRuntime,
+    managedPrinters,
+    runtimeDeviceId,
+    runtimeDeviceType,
+    sessionToken,
+    spoolDeviceIds,
+    userAlertSoundEnabled,
+    userAlertSoundUrl,
+    runtimeDebugInfoEnabled,
+  ]);
+
+  useEffect(() => {
+    syncBackgroundRuntimeRegistration({
+      backgroundRuntimeModule,
+      registration,
+      lastRegistrationIdRef,
+      lastRegistrationPayloadRef,
+    });
+    // Keep the registration alive after this component unmounts.
+    // Explicit logout/device changes are handled by the branches above.
+  }, [registration]);
+
+  return null;
+};
+
+export default BackgroundRuntimeBridge;

package/src/react/components/BottomNavigationBar.config.js

@@ -0,0 +1,238 @@
+const translateLabel = (translate, descriptor) => {
+  if (!descriptor || typeof descriptor === 'string') {
+    return descriptor || '';
+  }
+
+  const translated = translate?.(
+    descriptor.store,
+    descriptor.type,
+    descriptor.key,
+  );
+
+  return translated || descriptor.fallback || descriptor.key || '';
+};
+
+export const resolveBottomNavigationItems = (items = [], translate) =>
+  (Array.isArray(items) ? items : []).map(item => ({
+    ...item,
+    label: translateLabel(translate, item?.label),
+  }));
+
+export const resolveBottomNavigationRoute = (routeAliases = {}, routeName) =>
+  routeAliases?.[routeName] || routeName || '';
+
+export const BOTTOM_NAVIGATION_PRESETS = {
+  crmToolbar: {
+    items: [
+      {
+        route: 'HomePage',
+        icon: 'home',
+        label: {
+          store: 'users',
+          type: 'label',
+          key: 'home',
+          fallback: 'Home',
+        },
+      },
+      {
+        route: 'CrmIndex',
+        icon: 'target',
+        label: {
+          store: 'users',
+          type: 'label',
+          key: 'crm',
+          fallback: 'CRM',
+        },
+      },
+      {
+        route: 'ClientsIndex',
+        icon: 'users',
+        label: {
+          store: 'users',
+          type: 'label',
+          key: 'clients',
+          fallback: 'Clients',
+        },
+      },
+      {
+        route: 'ProfilePage',
+        icon: 'user',
+        label: {
+          store: 'users',
+          type: 'label',
+          key: 'profile',
+          fallback: 'Profile',
+        },
+      },
+    ],
+    routeAliases: {
+      HomePage: 'HomePage',
+      CrmIndex: 'CrmIndex',
+      ContractsIndex: 'CrmIndex',
+      ProposalsIndex: 'CrmIndex',
+      ComissionsPage: 'CrmIndex',
+      CrmConversation: 'CrmIndex',
+      ContractDetails: 'CrmIndex',
+      ClientsIndex: 'ClientsIndex',
+      ClientDetails: 'ClientsIndex',
+      FranchiseesIndex: 'ClientsIndex',
+      ProfilePage: 'ProfilePage',
+      SettingsPage: 'ProfilePage',
+    },
+  },
+  managerToolbar: {
+    items: [
+      {
+        route: 'HomePage',
+        icon: 'home',
+        label: {
+          store: 'configs',
+          type: 'toolbar',
+          key: 'home',
+          fallback: 'Home',
+        },
+      },
+      {
+        route: 'CrmIndex',
+        icon: 'dollar-sign',
+        label: {
+          store: 'configs',
+          type: 'toolbar',
+          key: 'opportunities',
+          fallback: 'Oportunidades',
+        },
+      },
+      {
+        route: 'ClientsIndex',
+        icon: 'users',
+        label: {
+          store: 'configs',
+          type: 'toolbar',
+          key: 'customers',
+          fallback: 'Clientes',
+        },
+      },
+      {
+        route: 'ProfilePage',
+        icon: 'user',
+        label: {
+          store: 'configs',
+          type: 'toolbar',
+          key: 'profile',
+          fallback: 'Profile',
+        },
+      },
+    ],
+    routeAliases: {
+      HomePage: 'HomePage',
+      CrmIndex: 'CrmIndex',
+      ContractsIndex: 'CrmIndex',
+      ProposalsIndex: 'CrmIndex',
+      ComissionsPage: 'CrmIndex',
+      CrmConversation: 'CrmIndex',
+      ContractDetails: 'CrmIndex',
+      ClientsIndex: 'ClientsIndex',
+      ClientDetails: 'ClientsIndex',
+      FranchiseesIndex: 'ClientsIndex',
+      ProfilePage: 'ProfilePage',
+      SettingsPage: 'ProfilePage',
+      OrderHistoryPage: 'CrmIndex',
+      InventoriesPage: 'CrmIndex',
+      ProductsPage: 'CrmIndex',
+    },
+  },
+  managerDock: {
+    items: [
+      {route: 'HomePage', icon: 'home', label: 'Home'},
+      {route: 'CrmIndex', icon: 'dollar-sign', label: 'Oportunidades'},
+      {route: 'ClientsIndex', icon: 'users', label: 'Clientes'},
+      {route: 'ProfilePage', icon: 'user', label: 'Perfil'},
+    ],
+    routeAliases: {
+      ClientDetails: 'ClientsIndex',
+      EmployeesIndex: 'ClientsIndex',
+      FranchiseesIndex: 'ClientsIndex',
+    },
+  },
+  deliveryDock: {
+    items: [
+      {route: 'HomePage', icon: 'home', label: 'Home'},
+      {route: 'DeliveryOrdersPage', icon: 'shopping-bag', label: 'Pedidos'},
+      {
+        route: 'DeliveryReceivablesPage',
+        icon: 'dollar-sign',
+        label: 'Recebiveis',
+      },
+      {route: 'DeliveryCompaniesPage', icon: 'users', label: 'Empresas'},
+      {route: 'DeliveryRateTablesPage', icon: 'list', label: 'Tabelas'},
+    ],
+    routeAliases: {
+      OrderDetails: 'DeliveryOrdersPage',
+      OrderLogisticsPage: 'DeliveryOrdersPage',
+      DeliveryRunPage: 'DeliveryOrdersPage',
+      DeliveryVehicleSetupPage: 'DeliveryRateTablesPage',
+      DeliveryRateTableFormPage: 'DeliveryRateTablesPage',
+      DeliveryRateTableCompaniesPage: 'DeliveryRateTablesPage',
+      DeliveryCourierSchedulesPage: 'DeliveryCompaniesPage',
+      DeliveryCourierScheduleFormPage: 'DeliveryCompaniesPage',
+      DeliveryCourierPresencePage: 'DeliveryCompaniesPage',
+      DeliveryCourierPresenceHistoryPage: 'DeliveryCompaniesPage',
+    },
+  },
+  ppcDock: {
+    items: [
+      {route: 'HomePage', icon: 'home', label: 'Home'},
+      {route: 'DisplayList', icon: 'monitor', label: 'Displays'},
+      {route: 'ProfilePage', icon: 'user', label: 'Profile'},
+    ],
+    routeAliases: {},
+  },
+  posToolbar: {
+    items: [
+      {
+        route: 'HomePage',
+        icon: 'home',
+        label: {
+          store: 'orders',
+          type: 'label',
+          key: 'home',
+          fallback: 'Home',
+        },
+      },
+      {
+        route: 'OrderHistoryPage',
+        icon: 'shopping-bag',
+        label: {
+          store: 'orders',
+          type: 'label',
+          key: 'orders',
+          fallback: 'Orders',
+        },
+      },
+      {
+        route: 'CashRegisterIndex',
+        icon: 'credit-card',
+        label: {
+          store: 'orders',
+          type: 'title',
+          key: 'cashRegister',
+          fallback: 'Cash register',
+        },
+      },
+      {
+        route: 'ProfilePage',
+        icon: 'user',
+        label: {
+          store: 'orders',
+          type: 'label',
+          key: 'profile',
+          fallback: 'Profile',
+        },
+      },
+    ],
+    routeAliases: {},
+  },
+};
+
+export const getBottomNavigationPreset = variant =>
+  BOTTOM_NAVIGATION_PRESETS[variant] || BOTTOM_NAVIGATION_PRESETS.managerDock;