@controleonline/ui-common 1.2.87 → 1.2.89

package/src/react/pages/Devices/detail/useDeviceDetailLoaders.js

@@ -1,44 +1,16 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useNavigation, useRoute } from '@react-navigation/native';
-import { useStore } from '@store';
-import { useMessage } from '@controleonline/ui-common/src/react/components/MessageService';
-import { resolveThemePalette } from '@controleonline/../../src/styles/branding';
-import { colors } from '@controleonline/../../src/styles/colors';
-import packageJson from '@package';
-import {
-  canDisplayChangePrinter, DEVICE_ANDROID_KIOSK_ENABLED_CONFIG_KEY, DEVICE_ANDROID_LAUNCHER_ENABLED_CONFIG_KEY,
-  DISPLAY_AUTO_PRINT_PRODUCT_CONFIG_KEY, DISPLAY_ALLOW_PRINTER_CHANGE_CONFIG_KEY, DEVICE_ALERT_SOUND_ENABLED_KEY,
-  DEVICE_ALERT_SOUND_URL_KEY, DEVICE_ORDER_VISIBILITY_COMPANY, DEVICE_ORDER_VISIBILITY_DEVICE, DEVICE_ORDER_VISIBILITY_KEY,
-  DEVICE_RUNTIME_DEBUG_INFO_ENABLED_KEY, isPosAutoPrintEnabled, isPosCashRegisterOpen, isTruthyValue, parseConfigsObject,
-  POS_AUTO_PRINT_ENABLED_CONFIG_KEY, POS_CASH_MANAGEMENT_MODE_CASH_REGISTER, POS_CASH_MANAGEMENT_MODE_CONFIG_KEY,
-  POS_CASH_MANAGEMENT_MODE_DAILY, POS_CHECK_ORDER_MANAGEMENT_MODE_CONFIG_KEY, POS_CHECK_ORDER_MANAGEMENT_MODE_EXISTING_ONLY,
-  POS_CHECK_ORDER_MANAGEMENT_MODE_MANAGE, POS_CHECK_ORDER_TYPE_CONFIG_KEY, POS_CHECK_ORDER_TYPE_NONE, POS_CHECK_ORDER_TYPE_TAB,
-  POS_CHECK_ORDER_TYPE_TABLE, POS_CHECK_ORDER_TYPE_STAMP, POS_DELIVERY_ENABLED_CONFIG_KEY, POS_OPERATION_MODE_COUNTER,
-  POS_OPERATION_MODE_CONFIG_KEY, POS_OPERATION_MODE_OPTIONS, POS_PRODUCT_SHOWCASE_CONFIG_KEY, POS_PRINT_MODE_FORM,
-  POS_PRINT_MODE_ORDER, getPosOperationModeOption, isAndroidKioskEnabled, isAndroidLauncherEnabled, isPosDeliveryEnabled,
-  resolvePosCheckOrderManagementMode, resolvePosCheckOrderType, resolvePosCheckOrderTypeForShop, resolveDeviceOrderVisibility,
-  resolvePosCashManagementMode, resolvePosOperationMode, resolvePosPrintMode,
-} from '@controleonline/ui-common/src/react/config/deviceConfigBootstrap';
-import {
-  filterDeviceConfigsByCompany, getCompanyPaymentDeviceOptions, getPaymentGatewayFromConfigs, getPaymentGatewayLabel,
-  isPaymentCapableDeviceConfig, isPdvPrinterEnabled, normalizeDeviceId, normalizeEntityId, PAYMENT_TYPE_IDS_CONFIG_KEY,
-  PAYMENT_GATEWAY_CIELO, PDV_PRINTER_ENABLED_CONFIG_KEY, ORDER_PAYMENT_DEVICE_CONFIG_KEY, POS_GATEWAY_CONFIG_KEY,
-} from '@controleonline/ui-common/src/react/utils/paymentDevices';
-import { normalizeBooleanConfig, SHOP_LOYALTY_COUPONS_ENABLED_CONFIG_KEY } from '@controleonline/ui-common/src/react/utils/shopConfig';
-import { getPrinterOptionValue, getDeviceTypeLabel, getPrinterLabel, getPrinterOptions } from '@controleonline/ui-common/src/react/utils/printerDevices';
-import { hex, DISPLAY_DEVICE_TYPE, PDV_DEVICE_TYPE, DISPLAY_DEVICE_LINK_CONFIG_KEY, DISPLAY_DEVICE_PRINTER_CONFIG_KEY,
-  PDV_TAB_OPERATION, PDV_TAB_ORDERS, PDV_TAB_DEVICE, PDV_TAB_PAYMENT_TYPES, PDV_TAB_MOVEMENT, PDV_DETAIL_TABS, tt,
-} from './deviceDetailConstants';
-import { paymentIcon, formatApiError, getDisplayLabel, getProductShowcaseLabel, getIsOpen, confirm } from './deviceDetailHelpers';
-import { api } from '@controleonline/ui-common/src/api';
-import { buildDeviceAliasStoreUpdates } from '@controleonline/ui-common/src/react/utils/deviceAliasSync';
-import { createDeviceDetailRenderers } from './DeviceDetailRenderers';
-import { Alert, Platform } from 'react-native';
+import { useCallback, useEffect, useRef } from 'react';
+import { useFocusEffect } from '@react-navigation/native';
+
+import { canDisplayChangePrinter, DISPLAY_AUTO_PRINT_PRODUCT_CONFIG_KEY, DEVICE_ALERT_SOUND_ENABLED_KEY, DEVICE_ALERT_SOUND_URL_KEY, DEVICE_ORDER_VISIBILITY_DEVICE, DEVICE_RUNTIME_DEBUG_INFO_ENABLED_KEY, isPosAutoPrintEnabled, isTruthyValue, parseConfigsObject, POS_PRODUCT_SHOWCASE_CONFIG_KEY, isAndroidKioskEnabled, isAndroidLauncherEnabled, isPosDeliveryEnabled, resolvePosCheckOrderManagementMode, resolvePosCheckOrderTypeForShop, resolveDeviceOrderVisibility, resolvePosCashManagementMode, resolvePosOperationMode, resolvePosPrintMode } from '@controleonline/ui-common/src/react/config/deviceConfigBootstrap';
+import { filterDeviceConfigsByCompany, getPaymentGatewayFromConfigs, isPdvPrinterEnabled, normalizeDeviceId, normalizeEntityId, ORDER_PAYMENT_DEVICE_CONFIG_KEY } from '@controleonline/ui-common/src/react/utils/paymentDevices';
 
+import { DISPLAY_DEVICE_LINK_CONFIG_KEY, DISPLAY_DEVICE_PRINTER_CONFIG_KEY, PDV_TAB_OPERATION, PDV_TAB_ORDERS, PDV_TAB_MOVEMENT } from './deviceDetailConstants';
+
+import { api } from '@controleonline/ui-common/src/api';
 
 export default function useDeviceDetailLoaders(deps) {
   const {
-    navigation, deviceId, deviceConfigStore, messageApi, websocketActions, runtimeCompanyConfigs, showSystemError, loyaltyCouponsEnabled, currentDevice, currentDeviceConfig, deviceString, deviceType,
+    navigation, deviceId, deviceConfigStore, messageApi, websocketActions, runtimeCompanyConfigs, showSystemError, loyaltyCouponsEnabled, currentCompany, currentDevice, currentDeviceConfig, deviceString, deviceType,
     normalizedInitialConfigs, initialAlias, isDisplayDevice, isPdvDevice, actionsRef, stampAutoDisableSignatureRef, brandColors, products, setProducts, productShowcases, setProductShowcases, companyDeviceConfigs,
     setCompanyDeviceConfigs, inflowData, setInflowData, configs, setConfigs, loadingConfigData, setLoadingConfigData, loadingCompanyDeviceConfigs, setLoadingCompanyDeviceConfigs, loadingMovementData, setLoadingMovementData, actionLoading,
     setActionLoading, activePdvTab, setActivePdvTab, savingPaymentTarget, setSavingPaymentTarget, savingPdvSettings, setSavingPdvSettings, savingPaymentTypes, setSavingPaymentTypes, savingPosOperationMode, setSavingPosOperationMode, savingProductShowcase,
@@ -50,7 +22,126 @@ export default function useDeviceDetailLoaders(deps) {
     setSavingDisplayPrintingConfig, hasLoadedCurrentConfig, setHasLoadedCurrentConfig, hasLoadedCompanyConfigs, setHasLoadedCompanyConfigs, hasLoadedMovementData, setHasLoadedMovementData, hasLoadedCurrentConfigRef, hasLoadedCompanyConfigsRef, hasLoadedMovementDataRef, hasInitializedPdvTabRef, alias,
     setAlias, editingAlias, setEditingAlias, aliasInput, setAliasInput, savingAlias, setSavingAlias, removingDevice, setRemovingDevice, aliasInputRef, skipAliasSyncFromStoreRef, isOpen,
     hasLocalPaymentGateway, paymentDeviceOptions, displayOptions, printerOptions, selectedPosOperationModeOption, pickerMode, packageVersion, appVersion, runtimeDeviceId, runtimeDeviceType, isEditingRuntimeDevice, resolveDeviceContext,
+    displayStore, printerStore,
   } = deps;
+  const applyCurrentDeviceConfig = useCallback((scopedItems, context = {}) => {
+    const currentDeviceString = String(
+      context.deviceString || deviceString || '',
+    ).trim();
+    const currentDeviceType = String(
+      context.deviceType || deviceType || '',
+    )
+      .trim()
+      .toUpperCase();
+    const currentDeviceConfigId = normalizeEntityId(
+      context.deviceId || deviceId,
+    );
+    const dc = (scopedItems || []).find(d => {
+      const currentConfigType = String(d?.type || d?.device?.type || '')
+        .trim()
+        .toUpperCase();
+      const nextDeviceId = normalizeEntityId(
+        d?.device?.id ||
+          d?.device?.['@id'] ||
+          d?.deviceId ||
+          d?.device?.deviceId,
+      );
+
+      if (currentDeviceConfigId && nextDeviceId === currentDeviceConfigId) {
+        return true;
+      }
+
+      return (
+        d?.device?.device === currentDeviceString &&
+        currentConfigType === currentDeviceType
+      );
+    });
+
+    if (dc) {
+      const nextConfigs = parseConfigsObject(dc.configs);
+      actionsRef.current.deviceConfigActions.setItem({
+        ...dc,
+        configs: nextConfigs,
+      });
+      setConfigs(nextConfigs);
+      setDevicePaymentTarget(
+        normalizeDeviceId(nextConfigs[ORDER_PAYMENT_DEVICE_CONFIG_KEY]),
+      );
+      setPdvGateway(getPaymentGatewayFromConfigs(nextConfigs));
+      setPdvPrinterEnabled(isPdvPrinterEnabled(nextConfigs));
+      setPosOperationMode(resolvePosOperationMode(nextConfigs));
+      setProductShowcaseId(
+        normalizeEntityId(nextConfigs[POS_PRODUCT_SHOWCASE_CONFIG_KEY]),
+      );
+      setAndroidKioskEnabled(isAndroidKioskEnabled(nextConfigs));
+      setAndroidLauncherEnabled(isAndroidLauncherEnabled(nextConfigs));
+      setCounterAutoPrintEnabled(isPosAutoPrintEnabled(nextConfigs));
+      setCounterPrintMode(resolvePosPrintMode(nextConfigs));
+      setCounterCashManagementMode(resolvePosCashManagementMode(nextConfigs));
+      setCheckOrderType(
+        resolvePosCheckOrderTypeForShop(nextConfigs, runtimeCompanyConfigs),
+      );
+      setCheckOrderManagementMode(
+        resolvePosCheckOrderManagementMode(nextConfigs),
+      );
+      setDeviceOrderVisibility(
+        resolveDeviceOrderVisibility(nextConfigs),
+      );
+      setDeviceDeliveryEnabled(
+        isPosDeliveryEnabled(nextConfigs),
+      );
+      setDeviceAlertSoundEnabled(
+        isTruthyValue(nextConfigs[DEVICE_ALERT_SOUND_ENABLED_KEY]),
+      );
+      setDeviceAlertSoundUrl(
+        String(nextConfigs[DEVICE_ALERT_SOUND_URL_KEY] || ''),
+      );
+      setDeviceRuntimeDebugInfoEnabled(
+        isTruthyValue(nextConfigs[DEVICE_RUNTIME_DEBUG_INFO_ENABLED_KEY]),
+      );
+      setLinkedDisplayId(
+        normalizeEntityId(nextConfigs[DISPLAY_DEVICE_LINK_CONFIG_KEY]),
+      );
+      setDisplayPrinterId(
+        normalizeDeviceId(nextConfigs[DISPLAY_DEVICE_PRINTER_CONFIG_KEY]),
+      );
+      setDisplayAllowPrinterChange(
+        canDisplayChangePrinter(nextConfigs),
+      );
+      setDisplayAutoPrintProductEnabled(
+        isTruthyValue(nextConfigs[DISPLAY_AUTO_PRINT_PRODUCT_CONFIG_KEY]),
+      );
+      return;
+    }
+
+    actionsRef.current.deviceConfigActions.setItem({});
+
+    setConfigs({});
+    setDevicePaymentTarget('');
+    setPdvGateway('');
+    setPdvPrinterEnabled(true);
+    setPosOperationMode(resolvePosOperationMode({}));
+    setProductShowcaseId('');
+    setAndroidKioskEnabled(false);
+    setAndroidLauncherEnabled(false);
+    setCounterAutoPrintEnabled(isPosAutoPrintEnabled({}));
+    setCounterPrintMode(resolvePosPrintMode({}));
+    setCounterCashManagementMode(resolvePosCashManagementMode({}));
+    setCheckOrderType(
+      resolvePosCheckOrderTypeForShop({}, runtimeCompanyConfigs),
+    );
+    setCheckOrderManagementMode(resolvePosCheckOrderManagementMode({}));
+    setDeviceOrderVisibility(DEVICE_ORDER_VISIBILITY_DEVICE);
+    setDeviceDeliveryEnabled(isPosDeliveryEnabled({}));
+    setDeviceAlertSoundEnabled(false);
+    setDeviceAlertSoundUrl('');
+    setDeviceRuntimeDebugInfoEnabled(false);
+    setLinkedDisplayId('');
+    setDisplayPrinterId('');
+    setDisplayAllowPrinterChange(false);
+    setDisplayAutoPrintProductEnabled(false);
+  }, [deviceId, deviceString, deviceType, runtimeCompanyConfigs]);
+
   const loadMovementData = useCallback(async () => {
     if (!isPdvDevice) {
       setProducts([]);
@@ -317,6 +408,7 @@ export default function useDeviceDetailLoaders(deps) {
   );
 
   return {
+    applyCurrentDeviceConfig,
     loadMovementData,
     refreshCurrentConfig,
     loadCompanyConfigs,

package/src/react/pages/Devices/detail/useDeviceDetailSaves.js

@@ -1,44 +1,17 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useNavigation, useRoute } from '@react-navigation/native';
-import { useStore } from '@store';
-import { useMessage } from '@controleonline/ui-common/src/react/components/MessageService';
-import { resolveThemePalette } from '@controleonline/../../src/styles/branding';
-import { colors } from '@controleonline/../../src/styles/colors';
-import packageJson from '@package';
-import {
-  canDisplayChangePrinter, DEVICE_ANDROID_KIOSK_ENABLED_CONFIG_KEY, DEVICE_ANDROID_LAUNCHER_ENABLED_CONFIG_KEY,
-  DISPLAY_AUTO_PRINT_PRODUCT_CONFIG_KEY, DISPLAY_ALLOW_PRINTER_CHANGE_CONFIG_KEY, DEVICE_ALERT_SOUND_ENABLED_KEY,
-  DEVICE_ALERT_SOUND_URL_KEY, DEVICE_ORDER_VISIBILITY_COMPANY, DEVICE_ORDER_VISIBILITY_DEVICE, DEVICE_ORDER_VISIBILITY_KEY,
-  DEVICE_RUNTIME_DEBUG_INFO_ENABLED_KEY, isPosAutoPrintEnabled, isPosCashRegisterOpen, isTruthyValue, parseConfigsObject,
-  POS_AUTO_PRINT_ENABLED_CONFIG_KEY, POS_CASH_MANAGEMENT_MODE_CASH_REGISTER, POS_CASH_MANAGEMENT_MODE_CONFIG_KEY,
-  POS_CASH_MANAGEMENT_MODE_DAILY, POS_CHECK_ORDER_MANAGEMENT_MODE_CONFIG_KEY, POS_CHECK_ORDER_MANAGEMENT_MODE_EXISTING_ONLY,
-  POS_CHECK_ORDER_MANAGEMENT_MODE_MANAGE, POS_CHECK_ORDER_TYPE_CONFIG_KEY, POS_CHECK_ORDER_TYPE_NONE, POS_CHECK_ORDER_TYPE_TAB,
-  POS_CHECK_ORDER_TYPE_TABLE, POS_CHECK_ORDER_TYPE_STAMP, POS_DELIVERY_ENABLED_CONFIG_KEY, POS_OPERATION_MODE_COUNTER,
-  POS_OPERATION_MODE_CONFIG_KEY, POS_OPERATION_MODE_OPTIONS, POS_PRODUCT_SHOWCASE_CONFIG_KEY, POS_PRINT_MODE_FORM,
-  POS_PRINT_MODE_ORDER, getPosOperationModeOption, isAndroidKioskEnabled, isAndroidLauncherEnabled, isPosDeliveryEnabled,
-  resolvePosCheckOrderManagementMode, resolvePosCheckOrderType, resolvePosCheckOrderTypeForShop, resolveDeviceOrderVisibility,
-  resolvePosCashManagementMode, resolvePosOperationMode, resolvePosPrintMode,
-} from '@controleonline/ui-common/src/react/config/deviceConfigBootstrap';
-import {
-  filterDeviceConfigsByCompany, getCompanyPaymentDeviceOptions, getPaymentGatewayFromConfigs, getPaymentGatewayLabel,
-  isPaymentCapableDeviceConfig, isPdvPrinterEnabled, normalizeDeviceId, normalizeEntityId, PAYMENT_TYPE_IDS_CONFIG_KEY,
-  PAYMENT_GATEWAY_CIELO, PDV_PRINTER_ENABLED_CONFIG_KEY, ORDER_PAYMENT_DEVICE_CONFIG_KEY, POS_GATEWAY_CONFIG_KEY,
-} from '@controleonline/ui-common/src/react/utils/paymentDevices';
-import { normalizeBooleanConfig, SHOP_LOYALTY_COUPONS_ENABLED_CONFIG_KEY } from '@controleonline/ui-common/src/react/utils/shopConfig';
-import { getPrinterOptionValue, getDeviceTypeLabel, getPrinterLabel, getPrinterOptions } from '@controleonline/ui-common/src/react/utils/printerDevices';
-import { hex, DISPLAY_DEVICE_TYPE, PDV_DEVICE_TYPE, DISPLAY_DEVICE_LINK_CONFIG_KEY, DISPLAY_DEVICE_PRINTER_CONFIG_KEY,
-  PDV_TAB_OPERATION, PDV_TAB_ORDERS, PDV_TAB_DEVICE, PDV_TAB_PAYMENT_TYPES, PDV_TAB_MOVEMENT, PDV_DETAIL_TABS, tt,
-} from './deviceDetailConstants';
-import { paymentIcon, formatApiError, getDisplayLabel, getProductShowcaseLabel, getIsOpen, confirm } from './deviceDetailHelpers';
-import { api } from '@controleonline/ui-common/src/api';
-import { buildDeviceAliasStoreUpdates } from '@controleonline/ui-common/src/react/utils/deviceAliasSync';
-import { createDeviceDetailRenderers } from './DeviceDetailRenderers';
-import { Alert, Platform } from 'react-native';
+import { useCallback, useMemo } from 'react';
+
+import { DEVICE_ANDROID_LAUNCHER_ENABLED_CONFIG_KEY, DISPLAY_AUTO_PRINT_PRODUCT_CONFIG_KEY, DISPLAY_ALLOW_PRINTER_CHANGE_CONFIG_KEY, DEVICE_ALERT_SOUND_ENABLED_KEY, DEVICE_ALERT_SOUND_URL_KEY, DEVICE_ORDER_VISIBILITY_DEVICE, DEVICE_ORDER_VISIBILITY_KEY, DEVICE_RUNTIME_DEBUG_INFO_ENABLED_KEY, POS_DELIVERY_ENABLED_CONFIG_KEY } from '@controleonline/ui-common/src/react/config/deviceConfigBootstrap';
+import { normalizeDeviceId, PAYMENT_GATEWAY_CIELO } from '@controleonline/ui-common/src/react/utils/paymentDevices';
 
+import { hex, DISPLAY_DEVICE_LINK_CONFIG_KEY, DISPLAY_DEVICE_PRINTER_CONFIG_KEY, PDV_TAB_OPERATION, PDV_TAB_ORDERS, PDV_TAB_DEVICE, PDV_TAB_PAYMENT_TYPES, PDV_TAB_MOVEMENT } from './deviceDetailConstants';
+import { confirm } from './deviceDetailHelpers';
+
+import { createDeviceDetailRenderers } from './DeviceDetailRenderers';
 
 export default function useDeviceDetailSaves(deps) {
   const {
-    navigation, deviceId, deviceConfigStore, messageApi, websocketActions, runtimeCompanyConfigs, showSystemError, loyaltyCouponsEnabled, currentDevice, currentDeviceConfig, deviceString, deviceType,
+    themeColors,
+    navigation, deviceId, deviceConfigStore, messageApi, websocketActions, runtimeCompanyConfigs, showSystemError, loyaltyCouponsEnabled, currentCompany, currentDevice, currentDeviceConfig, deviceString, deviceType,
     normalizedInitialConfigs, initialAlias, isDisplayDevice, isPdvDevice, actionsRef, stampAutoDisableSignatureRef, brandColors, products, setProducts, productShowcases, setProductShowcases, companyDeviceConfigs,
     setCompanyDeviceConfigs, inflowData, setInflowData, configs, setConfigs, loadingConfigData, setLoadingConfigData, loadingCompanyDeviceConfigs, setLoadingCompanyDeviceConfigs, loadingMovementData, setLoadingMovementData, actionLoading,
     setActionLoading, activePdvTab, setActivePdvTab, savingPaymentTarget, setSavingPaymentTarget, savingPdvSettings, setSavingPdvSettings, savingPaymentTypes, setSavingPaymentTypes, savingPosOperationMode, setSavingPosOperationMode, savingProductShowcase,
@@ -401,8 +374,8 @@ export default function useDeviceDetailSaves(deps) {
   const { renderProduct, renderHelpButton, renderSwitchRow, renderOptionButtons } =
     createDeviceDetailRenderers({ themeColors, palette: brandColors });
 
-
   return {
+    renderProduct, renderHelpButton, renderSwitchRow, renderOptionButtons,
     saveLauncherMode,
     saveDeviceAlertSoundConfig,
     saveDeviceOrderVisibility,

package/src/react/pages/Devices/detail/useDeviceDetailStateA.js

@@ -5,36 +5,14 @@ import { useMessage } from '@controleonline/ui-common/src/react/components/Messa
 import { resolveThemePalette } from '@controleonline/../../src/styles/branding';
 import { colors } from '@controleonline/../../src/styles/colors';
 import packageJson from '@package';
-import {
-  canDisplayChangePrinter, DEVICE_ANDROID_KIOSK_ENABLED_CONFIG_KEY, DEVICE_ANDROID_LAUNCHER_ENABLED_CONFIG_KEY,
-  DISPLAY_AUTO_PRINT_PRODUCT_CONFIG_KEY, DISPLAY_ALLOW_PRINTER_CHANGE_CONFIG_KEY, DEVICE_ALERT_SOUND_ENABLED_KEY,
-  DEVICE_ALERT_SOUND_URL_KEY, DEVICE_ORDER_VISIBILITY_COMPANY, DEVICE_ORDER_VISIBILITY_DEVICE, DEVICE_ORDER_VISIBILITY_KEY,
-  DEVICE_RUNTIME_DEBUG_INFO_ENABLED_KEY, isPosAutoPrintEnabled, isPosCashRegisterOpen, isTruthyValue, parseConfigsObject,
-  POS_AUTO_PRINT_ENABLED_CONFIG_KEY, POS_CASH_MANAGEMENT_MODE_CASH_REGISTER, POS_CASH_MANAGEMENT_MODE_CONFIG_KEY,
-  POS_CASH_MANAGEMENT_MODE_DAILY, POS_CHECK_ORDER_MANAGEMENT_MODE_CONFIG_KEY, POS_CHECK_ORDER_MANAGEMENT_MODE_EXISTING_ONLY,
-  POS_CHECK_ORDER_MANAGEMENT_MODE_MANAGE, POS_CHECK_ORDER_TYPE_CONFIG_KEY, POS_CHECK_ORDER_TYPE_NONE, POS_CHECK_ORDER_TYPE_TAB,
-  POS_CHECK_ORDER_TYPE_TABLE, POS_CHECK_ORDER_TYPE_STAMP, POS_DELIVERY_ENABLED_CONFIG_KEY, POS_OPERATION_MODE_COUNTER,
-  POS_OPERATION_MODE_CONFIG_KEY, POS_OPERATION_MODE_OPTIONS, POS_PRODUCT_SHOWCASE_CONFIG_KEY, POS_PRINT_MODE_FORM,
-  POS_PRINT_MODE_ORDER, getPosOperationModeOption, isAndroidKioskEnabled, isAndroidLauncherEnabled, isPosDeliveryEnabled,
-  resolvePosCheckOrderManagementMode, resolvePosCheckOrderType, resolvePosCheckOrderTypeForShop, resolveDeviceOrderVisibility,
-  resolvePosCashManagementMode, resolvePosOperationMode, resolvePosPrintMode,
-} from '@controleonline/ui-common/src/react/config/deviceConfigBootstrap';
-import {
-  filterDeviceConfigsByCompany, getCompanyPaymentDeviceOptions, getPaymentGatewayFromConfigs, getPaymentGatewayLabel,
-  isPaymentCapableDeviceConfig, isPdvPrinterEnabled, normalizeDeviceId, normalizeEntityId, PAYMENT_TYPE_IDS_CONFIG_KEY,
-  PAYMENT_GATEWAY_CIELO, PDV_PRINTER_ENABLED_CONFIG_KEY, ORDER_PAYMENT_DEVICE_CONFIG_KEY, POS_GATEWAY_CONFIG_KEY,
-} from '@controleonline/ui-common/src/react/utils/paymentDevices';
+import { canDisplayChangePrinter, DISPLAY_AUTO_PRINT_PRODUCT_CONFIG_KEY, DEVICE_ALERT_SOUND_ENABLED_KEY, DEVICE_ALERT_SOUND_URL_KEY, DEVICE_RUNTIME_DEBUG_INFO_ENABLED_KEY, isPosAutoPrintEnabled, isTruthyValue, parseConfigsObject, POS_PRODUCT_SHOWCASE_CONFIG_KEY, getPosOperationModeOption, isAndroidKioskEnabled, isAndroidLauncherEnabled, isPosDeliveryEnabled, resolvePosCheckOrderManagementMode, resolvePosCheckOrderTypeForShop, resolveDeviceOrderVisibility, resolvePosCashManagementMode, resolvePosOperationMode, resolvePosPrintMode } from '@controleonline/ui-common/src/react/config/deviceConfigBootstrap';
+import { filterDeviceConfigsByCompany, getCompanyPaymentDeviceOptions, getPaymentGatewayFromConfigs, isPaymentCapableDeviceConfig, isPdvPrinterEnabled, normalizeDeviceId, normalizeEntityId, ORDER_PAYMENT_DEVICE_CONFIG_KEY } from '@controleonline/ui-common/src/react/utils/paymentDevices';
 import { normalizeBooleanConfig, SHOP_LOYALTY_COUPONS_ENABLED_CONFIG_KEY } from '@controleonline/ui-common/src/react/utils/shopConfig';
-import { getPrinterOptionValue, getDeviceTypeLabel, getPrinterLabel, getPrinterOptions } from '@controleonline/ui-common/src/react/utils/printerDevices';
-import { hex, DISPLAY_DEVICE_TYPE, PDV_DEVICE_TYPE, DISPLAY_DEVICE_LINK_CONFIG_KEY, DISPLAY_DEVICE_PRINTER_CONFIG_KEY,
-  PDV_TAB_OPERATION, PDV_TAB_ORDERS, PDV_TAB_DEVICE, PDV_TAB_PAYMENT_TYPES, PDV_TAB_MOVEMENT, PDV_DETAIL_TABS, tt,
-} from './deviceDetailConstants';
-import { paymentIcon, formatApiError, getDisplayLabel, getProductShowcaseLabel, getIsOpen, confirm } from './deviceDetailHelpers';
-import { api } from '@controleonline/ui-common/src/api';
-import { buildDeviceAliasStoreUpdates } from '@controleonline/ui-common/src/react/utils/deviceAliasSync';
-import { createDeviceDetailRenderers } from './DeviceDetailRenderers';
-import { Alert, Platform } from 'react-native';
+import { getPrinterOptions } from '@controleonline/ui-common/src/react/utils/printerDevices';
+import { DISPLAY_DEVICE_TYPE, PDV_DEVICE_TYPE, DISPLAY_DEVICE_LINK_CONFIG_KEY, DISPLAY_DEVICE_PRINTER_CONFIG_KEY, PDV_TAB_OPERATION } from './deviceDetailConstants';
+import { formatApiError, getIsOpen } from './deviceDetailHelpers';
 
+import { Platform } from 'react-native';
 
 export default function useDeviceDetailStateA() {
   const route      = useRoute();
@@ -485,5 +463,8 @@ export default function useDeviceDetailStateA() {
     runtimeDeviceId,
     runtimeDeviceType,
     currentCompany,
+    runtimeDevice, runtimeDeviceConfig, themeColors,
+    displayStore,
+    printerStore,
   };
 }

package/src/react/pages/IntegrationConfigFields.js

@@ -23,6 +23,7 @@ const FileField = ({ field, value, editable, providerId, updateField }) => (
       acceptedTypes={field.accept || '.pfx,.p12,application/x-pkcs12'}
       fileType=""
       fileTypeLabel="certificado"
+      knownFileIds={[extractFileId(value)].filter(Boolean)}
       title={field.label}
       triggerLabel="Gerenciar certificado"
       managerTitle="Gerenciador de arquivos"

package/src/react/pages/IntegrationConfigPage.js

@@ -9,19 +9,20 @@ import useToastMessage from '@controleonline/ui-crm/src/react/hooks/useToastMess
 import { useStore } from '@store';
 import { colors } from '@controleonline/../../src/styles/colors';
 import { resolveThemePalette, withOpacity } from '@controleonline/../../src/styles/branding';
-import { getIntegrationConfig, getIntegrationByKey, parseIntegrationCollection } from './integrationsCatalog';
+import { getIntegrationConfig, getIntegrationByKey } from './integrationsCatalog';
+import { fetchPeopleConfigs } from './fetchPeopleConfigs';
 import IntegrationConfigFields from './IntegrationConfigFields';
 import {
   ROUTE_PROVIDER_MAP,
-  buildFieldValues,
   extractAuthorizationUrl,
   formatApiError,
   formatUberOAuthError,
   getConfigFields,
   isConnectedValue,
+  isMethodNotAllowed,
+  mergeTabValues,
   normalizeTextValue,
   openAuthorizationUrl,
-  resolveFallbackConfigs,
   resolveProviderId,
   routeNameToPath,
   toConfigRequestValue,
@@ -44,13 +45,13 @@ const CenterState = ({ icon, iconColor, title, text, backgroundColor, spinnerCol
   </SafeAreaView>
 );
 
-export default function IntegrationConfigPage({ route, embedded = false }) {
+export default function IntegrationConfigPage({ route, embedded = false, fiscalTab = '', onlyFiscalTab = false }) {
   const peopleStore = useStore('people');
   const themeStore = useStore('theme');
   const configsStore = useStore('configs');
   const { currentCompany } = peopleStore.getters;
   const { colors: themeColors } = themeStore.getters;
-  const configActions = configsStore.actions;
+  const configActions = configsStore.actions || {};
   const { isSaving } = configsStore.getters;
   const { showError, showSuccess } = useToastMessage();
   const oauthNoticeRef = useRef('');
@@ -62,7 +63,8 @@ export default function IntegrationConfigPage({ route, embedded = false }) {
   const providerConfig = useMemo(() => getIntegrationConfig(providerKey), [providerKey]);
   const configFields = useMemo(() => getConfigFields(providerConfig), [providerConfig]);
   const fiscalTabs = providerConfig?.tabs || [];
-  const [activeFiscalTab, setActiveFiscalTab] = useState(() => fiscalTabs[0]?.key || 'general');
+  const requestedFiscalTab = fiscalTab || route?.params?.fiscalTab || '';
+  const [activeFiscalTab, setActiveFiscalTab] = useState(() => requestedFiscalTab || fiscalTabs[0]?.key || 'general');
   const activeTabDef = useMemo(
     () => fiscalTabs.find(tab => tab.key === activeFiscalTab) || fiscalTabs[0] || null,
     [activeFiscalTab, fiscalTabs],
@@ -71,10 +73,13 @@ export default function IntegrationConfigPage({ route, embedded = false }) {
     () => (activeTabDef?.fields?.length ? activeTabDef.fields : configFields),
     [activeTabDef, configFields],
   );
-
   useEffect(() => {
+    if (requestedFiscalTab && fiscalTabs.some(tab => tab.key === requestedFiscalTab)) {
+      if (activeFiscalTab !== requestedFiscalTab) setActiveFiscalTab(requestedFiscalTab);
+      return;
+    }
     if (fiscalTabs.length && !fiscalTabs.some(tab => tab.key === activeFiscalTab)) setActiveFiscalTab(fiscalTabs[0].key);
-  }, [activeFiscalTab, fiscalTabs]);
+  }, [activeFiscalTab, fiscalTabs, requestedFiscalTab]);
 
   const returnPath = useMemo(() => {
     const routePath = normalizeTextValue(route?.params?.return_path || route?.params?.returnPath || '');
@@ -88,28 +93,30 @@ export default function IntegrationConfigPage({ route, embedded = false }) {
     [themeColors, currentCompany?.id],
   );
   const [loading, setLoading] = useState(true);
+  const [tabLoading, setTabLoading] = useState(false);
   const [refreshing, setRefreshing] = useState(false);
   const [authLoading, setAuthLoading] = useState(false);
   const [configValues, setConfigValues] = useState({});
   const [integrationSummary, setIntegrationSummary] = useState(null);
 
-  // Company details can edit a company that is not the globally selected one.
-  // The embedded route id is authoritative for all fiscal reads and writes.
   const providerId = useMemo(
-    () => resolveProviderId({ route, currentCompany }),
-    [route?.params?.companyId, currentCompany?.id],
+    () => resolveProviderId({ route, currentCompany, embedded }),
+    [embedded, route?.params?.companyId, route?.params?.clientId, currentCompany?.id],
   );
   const providerIri = useMemo(() => (providerId ? `/people/${providerId}` : ''), [providerId]);
-  const fallbackConfigs = useMemo(
-    () => resolveFallbackConfigs({ providerId, currentCompany }),
-    [providerId, currentCompany?.id, currentCompany?.configs],
+  const allConfigFields = useMemo(() => getConfigFields(providerConfig), [providerConfig]);
+  const allFieldKeys = useMemo(
+    () => allConfigFields.map(field => field.key).filter(Boolean),
+    [allConfigFields],
   );
+  const allFieldKeysSig = useMemo(() => allFieldKeys.join('|'), [allFieldKeys]);
+  // Pure config providers (e.g. receita-federal) do not use marketplace/integrations.
+  const needsMarketplaceIntegration = Boolean(providerConfig?.oauthConnect);
 
-  const syncConfigValues = useCallback(source => {
-    setConfigValues(providerConfig ? buildFieldValues(providerConfig, source) : {});
-  }, [providerConfig]);
+  useEffect(() => {
+    setConfigValues({});
+  }, [providerIri]);
 
-  useEffect(() => syncConfigValues(fallbackConfigs), [fallbackConfigs, syncConfigValues]);
   useEffect(() => {
     const oauthStatus = normalizeTextValue(route?.params?.oauth_status).toLowerCase();
     const oauthError = normalizeTextValue(route?.params?.oauth_error);
@@ -128,26 +135,49 @@ export default function IntegrationConfigPage({ route, embedded = false }) {
     }
     if (showLoading) setLoading(true);
     try {
-      const integrationPromise = api.fetch('/marketplace/integrations', { params: { provider_id: providerId } });
-      if (configFields.length) {
-        const [configResponse, integrationResponse] = await Promise.all([
-          api.fetch('/configs', { params: { people: providerIri } }),
-          integrationPromise,
-        ]);
-        syncConfigValues(parseIntegrationCollection(configResponse));
-        setIntegrationSummary(getIntegrationByKey(integrationResponse, providerConfig.key));
+      const keys = allFieldKeys.length
+        ? allFieldKeys
+        : visibleFields.map(field => field.key).filter(Boolean);
+
+      if (keys.length) {
+        const configItems = await fetchPeopleConfigs({ peopleIri: providerIri, configKeys: keys });
+        const mergeFields = allConfigFields.length ? allConfigFields : visibleFields;
+        setConfigValues(current => mergeTabValues(mergeFields, configItems, current));
+      }
+
+      if (needsMarketplaceIntegration) {
+        try {
+          const integrationResponse = await api.fetch('/marketplace/integrations', {
+            params: { provider_id: providerId },
+          });
+          setIntegrationSummary(getIntegrationByKey(integrationResponse, providerConfig.key));
+        } catch (integrationError) {
+          // OAuth / marketplace providers still surface the error; pure config never hits this branch.
+          showError(formatApiError(integrationError));
+          setIntegrationSummary(null);
+        }
       } else {
-        setIntegrationSummary(getIntegrationByKey(await integrationPromise, providerConfig.key));
+        setIntegrationSummary(null);
       }
     } catch (error) {
       showError(formatApiError(error));
-      syncConfigValues(fallbackConfigs);
       setIntegrationSummary(null);
     } finally {
-      if (showLoading) setLoading(false);
+      setLoading(false);
+      setTabLoading(false);
     }
-  }, [configFields.length, fallbackConfigs, providerConfig, providerIri, providerId, showError, syncConfigValues]);
+  }, [
+    allConfigFields,
+    allFieldKeys,
+    allFieldKeysSig,
+    needsMarketplaceIntegration,
+    providerConfig,
+    providerIri,
+    providerId,
+    showError,
+  ]);
 
+  // Reload only when the company/provider identity or full key set changes — not on fiscal sub-tab switch.
   useFocusEffect(useCallback(() => { loadPageData(); }, [loadPageData]));
   const onRefresh = useCallback(async () => {
     setRefreshing(true);
@@ -157,6 +187,29 @@ export default function IntegrationConfigPage({ route, embedded = false }) {
     setConfigValues(current => ({ ...current, [fieldKey]: value }));
   }, []);
 
+  const persistConfigs = useCallback(async payload => {
+    if (typeof configActions.addManyConfigs === 'function') {
+      try {
+        return await configActions.addManyConfigs(payload);
+      } catch (error) {
+        if (!isMethodNotAllowed(error)) throw error;
+      }
+    }
+    if (typeof configActions.addConfigs !== 'function') {
+      throw new Error('Nao foi possivel salvar: acao de configs indisponivel.');
+    }
+    for (const item of payload.configs) {
+      await configActions.addConfigs({
+        configKey: item.configKey,
+        configValue: item.configValue,
+        people: payload.people,
+        module: payload.module,
+        visibility: payload.visibility,
+      });
+    }
+    return true;
+  }, [configActions]);
+
   const handleOAuthConnect = useCallback(async () => {
     if (!providerIri || !providerConfig?.oauthConnect) {
       showError('Nao foi possivel identificar a integracao selecionada.');
@@ -181,29 +234,32 @@ export default function IntegrationConfigPage({ route, embedded = false }) {
     ? isConnectedValue(integrationSummary.connected)
     : requiredKeys.length > 0 && requiredKeys.every(key => normalizeTextValue(configValues[key]) !== '');
   const statusTone = connected ? '#16A34A' : '#e67e22';
-  const editable = Boolean(providerIri && providerConfig && !isSaving && !loading && !providerConfig.oauthConnect);
-  const actionLoading = providerConfig?.oauthConnect ? authLoading : isSaving;
-  const actionDisabled = providerConfig?.oauthConnect ? authLoading || loading : !editable;
+  const editable = Boolean(providerIri && providerConfig && !providerConfig.oauthConnect);
+  const actionLoading = providerConfig?.oauthConnect ? authLoading : Boolean(isSaving || tabLoading);
+  const actionDisabled = providerConfig?.oauthConnect ? authLoading || loading : !editable || actionLoading;
+  const saveLabel = fiscalTabs.length
+    ? `Salvar ${activeTabDef?.label || 'aba'}`
+    : providerConfig?.saveLabel;
 
   const saveIntegration = useCallback(async () => {
     if (!providerIri || !providerConfig || providerConfig.oauthConnect) {
       showError('Nao foi possivel identificar a integracao selecionada.');
       return;
     }
-    const configs = configFields.map(field => ({
+    const configs = visibleFields.map(field => ({
       configKey: field.key,
       configValue: toConfigRequestValue(normalizeTextValue(configValues[field.key])),
     }));
     try {
-      await configActions.addManyConfigs({ configs, people: providerIri, module: 4, visibility: 'public' });
-      showSuccess(`${providerConfig.label} salvo com sucesso.`);
+      await persistConfigs({ configs, people: providerIri, module: 4, visibility: 'public' });
+      showSuccess(`${activeTabDef?.label || providerConfig.label} salvo com sucesso.`);
       await loadPageData({ showLoading: false });
     } catch (error) { showError(error?.message || 'Nao foi possivel salvar a integracao.'); }
-  }, [configActions, configFields, configValues, loadPageData, providerConfig, providerIri, showError, showSuccess]);
+  }, [activeTabDef, configValues, loadPageData, persistConfigs, providerConfig, providerIri, showError, showSuccess, visibleFields]);
 
   if (!providerConfig) return <CenterState icon="alert-triangle" iconColor="#e67e22" title="Integracao indisponivel" text="A tela solicitada nao possui configuracao cadastrada." />;
-  if (!providerId) return <CenterState icon="building" iconColor="#94A3B8" title="Selecione uma empresa" text="A configuracao da integracao depende da empresa ativa." />;
-  if (loading) return <CenterState backgroundColor={brandColors.background} spinnerColor={providerConfig.accent} title="Carregando integracao" text="Buscando as credenciais salvas para a empresa ativa." />;
+  if (!providerId) return <CenterState icon="building" iconColor="#94A3B8" title="Empresa nao identificada" text="Abra a ficha da empresa para gravar as configuracoes fiscais nela." />;
+  if (loading) return <CenterState backgroundColor={brandColors.background} spinnerColor={providerConfig.accent} title="Carregando integracao" text="Buscando as credenciais desta aba." />;
 
   return (
     <SafeAreaView style={[styles.container, { backgroundColor: brandColors.background }]} edges={['bottom']}>
@@ -227,7 +283,7 @@ export default function IntegrationConfigPage({ route, embedded = false }) {
                 <Text style={styles.sectionTitle}>Status</Text>
                 <Text style={styles.sectionSubtitle}>{providerConfig.oauthConnect
                   ? 'A integracao fica conectada quando o login do Uber termina e o store e salvo automaticamente.'
-                  : 'A integracao so aparece como conectada quando todos os campos obrigatorios foram salvos na empresa ativa.'}</Text>
+                  : 'A integracao so aparece como conectada quando todos os campos obrigatorios foram salvos nesta empresa.'}</Text>
               </View>
               <View style={[styles.statusBadge, { backgroundColor: withOpacity(statusTone, 0.12) }]}>
                 <Text style={[styles.statusBadgeText, { color: statusTone }]}>{connected ? 'Conectado' : 'Pendente'}</Text>
@@ -240,7 +296,7 @@ export default function IntegrationConfigPage({ route, embedded = false }) {
           <Text style={styles.cardTitle}>{providerConfig.oauthConnect ? 'Conexao' : fiscalTabs.length ? activeTabDef?.label || 'Configuracoes' : 'Credenciais'}</Text>
           {!embedded ? <Text style={styles.cardSubtitle}>{providerConfig.oauthConnect
             ? 'Use o login oficial do Uber. A store sera localizada e gravada automaticamente na empresa ativa.'
-            : 'Salve as credenciais na empresa ativa. O hub de integracoes volta a mostrar o status correto quando voce retornar para a lista.'}</Text> : null}
+            : 'Troca de aba e local; as configuracoes sao carregadas uma vez e cada aba grava so as chaves dela.'}</Text> : null}
 
           {providerConfig.oauthConnect ? (
             <View style={styles.fieldList}><View style={styles.fieldGroup}>
@@ -249,7 +305,7 @@ export default function IntegrationConfigPage({ route, embedded = false }) {
             </View></View>
           ) : (
             <View style={styles.fieldList}>
-              {fiscalTabs.length ? <View style={styles.subTabRow}>{fiscalTabs.map(tab => {
+              {fiscalTabs.length && !onlyFiscalTab ? <View style={styles.subTabRow}>{fiscalTabs.map(tab => {
                 const selected = tab.key === (activeTabDef?.key || activeFiscalTab);
                 return <TouchableOpacity key={tab.key} style={[styles.subTabButton, selected && styles.subTabButtonActive]}
                   activeOpacity={0.85} onPress={() => setActiveFiscalTab(tab.key)}>
@@ -257,6 +313,7 @@ export default function IntegrationConfigPage({ route, embedded = false }) {
                 </TouchableOpacity>;
               })}</View> : null}
               {activeTabDef?.description ? <Text style={styles.tabDescription}>{activeTabDef.description}</Text> : null}
+              {tabLoading ? <ActivityIndicator color={providerConfig.accent} /> : null}
               <IntegrationConfigFields fields={visibleFields} configValues={configValues} editable={editable}
                 embedded={embedded} providerId={providerId} updateField={updateField} />
             </View>
@@ -265,11 +322,10 @@ export default function IntegrationConfigPage({ route, embedded = false }) {
           <TouchableOpacity style={[styles.saveButton, { backgroundColor: providerConfig.accent }, actionDisabled && styles.saveButtonDisabled]}
             disabled={actionDisabled} activeOpacity={0.9} onPress={providerConfig.oauthConnect ? handleOAuthConnect : saveIntegration}>
             {actionLoading ? <ActivityIndicator color="#FFFFFF" /> : <Icon name={providerConfig.oauthConnect ? 'log-in' : 'save'} size={16} color="#FFFFFF" />}
-            <Text style={styles.saveButtonText}>{providerConfig.oauthConnect ? providerConfig.connectLabel || 'Conectar' : providerConfig.saveLabel}</Text>
+            <Text style={styles.saveButtonText}>{providerConfig.oauthConnect ? providerConfig.connectLabel || 'Conectar' : saveLabel}</Text>
           </TouchableOpacity>
         </View>
       </ScrollView>
     </SafeAreaView>
   );
 }
-// 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.