@controleonline/ui-common 1.2.80 → 1.2.82

package/AGENTS.md

@@ -20,6 +20,14 @@
 
 Cópia versionada no Git: `docs/technical/Technical-Documenter-Workflow.md`
 
+
+### Device Detail (Manager)
+
+| Página | O que documenta |
+| --- | --- |
+| [Device Detail — sync do alias na UI](https://github.com/ControleOnline/ui-common/wiki/Device-Detail-Alias-UI-Sync) | Alias salvo coerente no header/stores sem refresh (#382) |
+| [Device Detail — exclusão de device](https://github.com/ControleOnline/ui-common/wiki/Device-Detail-Exclusao) | Botão lixeira, confirmação web/nativo, DELETE e retorno à listagem (#383) |
+
 ### Visão deste módulo
 
 `ui-common` é o módulo compartilhado de runtime, API e utilitários de UI usado pelas visões `MANAGER`, `ADMIN`, `CRM`, `POS`, `PPC`, `SHOP`, `DELIVERY` e `SERVICE`. A automação documentada aqui é de governança do repositório e não altera comportamento funcional dessas visões.

package/package.json

@@ -1,17 +1,23 @@
 {
   "name": "@controleonline/ui-common",
-  "version": "1.2.80",
+  "version": "1.2.82",
   "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": "npm run test:receita-federal && npm run test:imports-status && npm run test:runtime-language && npm run test:runtime-footer && npm run test:runtime-footer-marquee && npm run test:invoice-presentation && npm run test:system-error-message && npm run test:bottom-navigation-toolbar && npm run test:copy-device-configs && npm run test:print-routing",
+    "test:receita-federal": "node --test src/tests/react/pages/receitaFederalIntegrationContract.test.mjs",
     "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"
+    "test:system-error-message": "mkdir -p node_modules/@controleonline && ln -sfn ../.. node_modules/@controleonline/ui-common && node --test src/tests/react/utils/systemErrorMessage.test.js",
+    "test:coverage": "c8 --reporter=clover --report-dir coverage npm test",
+    "test:bottom-navigation-toolbar": "node --test src/tests/react/utils/bottomNavigationToolbar.test.js",
+    "test:copy-device-configs": "node --test src/tests/react/utils/copyDeviceConfigs.test.mjs",
+    "test:print-routing": "node --test src/tests/react/utils/printRouting.test.mjs src/tests/react/utils/printSpoolUtils.test.mjs",
+    "test:runtime-footer-marquee": "node --test src/tests/react/components/RuntimeFooterMarqueeText.test.js"
   },
   "devDependencies": {
     "c8": "^10.1.3"

package/src/api/fetch.js

@@ -1,5 +1,5 @@
 import {env as APP_ENV} from '@env';
-import resolveSystemErrorMessage from '@controleonline/ui-common/src/react/utils/systemErrorMessage';
+import {resolveSystemErrorMessage} from '@controleonline/ui-common/src/react/utils/systemErrorMessage';
 import {resolveApiEntryPoint} from '@controleonline/ui-common/src/utils/apiEntryPoint';
 
 const buildHttpError = (response, body) => {
@@ -36,12 +36,12 @@ export default function (resourceEndpoint, options = {}) {
   const apiEntryPoint = resolveApiEntryPoint(APP_ENV.API_ENTRYPOINT);
   const entryPoint =
     apiEntryPoint + (apiEntryPoint.endsWith("/") ? "" : "/");
-
-  if (!resourceEndpoint || !entryPoint) return;
-
-  // if (resourceEndpoint == "/people/companies/my")
-  //console.log(entryPoint, resourceEndpoint, options);
-
+
+  if (!resourceEndpoint || !entryPoint) return;
+
+  // if (resourceEndpoint == "/people/companies/my")
+  //console.log(entryPoint, resourceEndpoint, options);
+
   //console.log(entryPoint, resourceEndpoint);
 
   return fetch(new URL(resourceEndpoint, entryPoint), options).then(async response => {

package/src/react/components/AddImportModal.js

@@ -12,6 +12,7 @@ import { useStore } from '@store';
 import AnimatedModal from './AnimatedModal';
 import { useMessage } from '@controleonline/ui-common/src/react/components/MessageService';
 import DefaultUpload from '@controleonline/ui-default/src/react/components/upload/DefaultUpload';
+import { resolveSystemErrorMessage } from '@controleonline/ui-common/src/react/utils/systemErrorMessage';
 import styles from './AddImportModal.styles';
 
 const AddImportModal = ({ visible, onClose, onSuccess, context = {} }) => {
@@ -53,8 +54,11 @@ const AddImportModal = ({ visible, onClose, onSuccess, context = {} }) => {
             if (onSuccess) onSuccess();
             handleClose();
             return file;
-        } catch {
-            throw new Error(importErrorLabel);
+        } catch (error) {
+            const importFeedback =
+                resolveSystemErrorMessage(error) || importErrorLabel;
+            showError(importFeedback);
+            throw new Error(importFeedback);
         }
     };
 

package/src/react/components/BackgroundRuntimeBridge.js

@@ -1,220 +1,206 @@
-import React, {useEffect, useMemo, useRef} from 'react';
-import {NativeModules} from 'react-native';
+import React, {useEffect, useMemo, useRef} from 'react';
+import {NativeModules} from 'react-native';
 import {app_type} from '@appType';
 import { env as APP_ENV } from '@env';
-import {useStore} from '@store';
-import DeviceInfo from 'react-native-device-info';
+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_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_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_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,
+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';
+import {resolveSpoolDeviceIdsForRuntime} from '@controleonline/ui-common/src/react/utils/printRouting';
+
+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_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_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(
+    () =>
+      resolveSpoolDeviceIdsForRuntime({
+        runtimeDeviceId,
+        runtimeDeviceType,
+        isWebRuntime: isWebRuntimeDevice(runtimeDevice),
+        managedPrinters,
+        includeLocalDevice: true,
+      }),
+    [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_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;
+    };
+  }, [
+    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/ConfirmModal.js

@@ -1,8 +1,39 @@
-import React from 'react';
-import { Modal, View, Text, TouchableOpacity } from 'react-native';
-import styles from './ConfirmModal.styles';
+import React, {useMemo} from 'react';
+import {Modal, View, Text, TouchableOpacity} from 'react-native';
+import {useStore} from '@store';
+import createStyles from './ConfirmModal.styles';
+
+export const ConfirmModal = ({visible, title, message, onConfirm, onCancel}) => {
+  const themeStore = useStore('theme');
+  const themeColors = themeStore?.getters?.colors || {};
+
+  const palette = useMemo(
+    () => ({
+      modalOverlay: themeColors.modalOverlay,
+      modalBackground: themeColors.modalBackground,
+      modalBorder: themeColors.modalBorder,
+      modalHeaderText: themeColors.modalHeaderText,
+      modalText: themeColors.modalText,
+      buttonBackground: themeColors.buttonBackground,
+      buttonBorder: themeColors.buttonBorder,
+      buttonText: themeColors.buttonText,
+      buttonTextSecondary: themeColors.buttonTextSecondary,
+    }),
+    [
+      themeColors.modalOverlay,
+      themeColors.modalBackground,
+      themeColors.modalBorder,
+      themeColors.modalHeaderText,
+      themeColors.modalText,
+      themeColors.buttonBackground,
+      themeColors.buttonBorder,
+      themeColors.buttonText,
+      themeColors.buttonTextSecondary,
+    ],
+  );
+
+  const styles = useMemo(() => createStyles(palette), [palette]);
 
-export const ConfirmModal = ({ visible, title, message, onConfirm, onCancel }) => {
   return (
     <Modal visible={visible} transparent animationType="fade">
       <View style={styles.overlay}>
@@ -11,14 +42,18 @@ export const ConfirmModal = ({ visible, title, message, onConfirm, onCancel }) =
           <Text style={styles.message}>{message}</Text>
           <View style={styles.actions}>
             <TouchableOpacity onPress={onCancel} style={styles.cancelButton}>
-              <Text>{global.t?.t('confirmModal', 'button', 'cancel')}</Text>
+              <Text style={styles.cancelButtonText}>
+                {global.t?.t('confirmModal', 'button', 'cancel')}
+              </Text>
             </TouchableOpacity>
             <TouchableOpacity onPress={onConfirm} style={styles.confirmButton}>
-              <Text style={styles.confirmButtonText}>{global.t?.t('confirmModal', 'button', 'confirm')}</Text>
+              <Text style={styles.confirmButtonText}>
+                {global.t?.t('confirmModal', 'button', 'confirm')}
+              </Text>
             </TouchableOpacity>
           </View>
         </View>
-      </View>
-    </Modal>
-  );
+      </View>
+    </Modal>
+  );
 };