@controleonline/ui-common 1.2.101 → 1.2.102

package/src/react/pages/Devices.js

@@ -1,183 +1,184 @@
-import React, {useEffect, useMemo, useState} from 'react';
-import {Text, TouchableOpacity, View} from 'react-native';
-import {SafeAreaView} from 'react-native-safe-area-context';
-import {useNavigation} from '@react-navigation/native';
-import {useStore} from '@store';
-import {resolveThemePalette} from '@controleonline/../../src/styles/branding';
-import {colors} from '@controleonline/../../src/styles/colors';
-import CompactFilterSelector from '@controleonline/ui-default/src/react/components/filters/CompactFilterSelector';
-import {PDV_DEVICE_TYPE} from '@controleonline/ui-common/src/react/utils/printerDevices';
-import Icon from 'react-native-vector-icons/Feather';
-import {
-  ALL_DEVICE_FILTER,
-  getDeviceCreationAction,
-  getDeviceFilterAccent,
-  getDeviceFilterDefinition,
-  getDeviceFilterIcon,
-  getDeviceFilterOptions,
-  getPdvSubfilterOptions,
-  hasRegisteredDeviceFilter,
-  isPdvSubfilter,
-} from './Devices/deviceTypes';
-import { createStyles } from './Devices.styles';
-
-const tt = (type, key) => global.t?.t('configs', type, key);
-
-const Devices = () => {
-  const navigation = useNavigation();
-  const peopleStore = useStore('people');
-  const themeStore = useStore('theme');
-
-  const {currentCompany} = peopleStore.getters;
-  const {colors: themeColors} = themeStore.getters;
-
-  const [activeFilter, setActiveFilter] = useState(ALL_DEVICE_FILTER);
-
-  const brandColors = useMemo(
-    () =>
-      resolveThemePalette(
-        {...themeColors, ...(currentCompany?.theme?.colors || {})},
-        colors,
-      ),
-    [themeColors, currentCompany?.id],
-  );
-  const styles = useMemo(() => createStyles(brandColors), [brandColors]);
-  const accentPalette = useMemo(
-    () => ({
-      primary: brandColors.info,
-      success: brandColors.success,
-      danger: brandColors.error,
-      warning: brandColors.warning,
-    }),
-    [brandColors.error, brandColors.info, brandColors.success, brandColors.warning],
-  );
-
-  const filterOptions = useMemo(() => getDeviceFilterOptions(), []);
-  const pdvSubfilterOptions = useMemo(() => getPdvSubfilterOptions(), []);
-  const activeFilterDefinition = useMemo(
-    () => getDeviceFilterDefinition(activeFilter),
-    [activeFilter],
-  );
-  const topLevelActiveFilter = useMemo(
-    () => (isPdvSubfilter(activeFilter) ? PDV_DEVICE_TYPE : activeFilter),
-    [activeFilter],
-  );
-  const activeFilterAction = useMemo(
-    () => getDeviceCreationAction(topLevelActiveFilter),
-    [topLevelActiveFilter],
-  );
-  const deviceTypeSelectorOptions = useMemo(
-    () => filterOptions.map(option => ({
-      key: option.key,
-      label: option.label,
-    })),
-    [filterOptions],
-  );
-  const pdvGatewaySelectorOptions = useMemo(
-    () => [
-      {key: PDV_DEVICE_TYPE, label: tt('device_filter', 'all') || 'Todos'},
-      ...pdvSubfilterOptions.map(option => ({
-        key: option.key,
-        label: option.label,
-      })),
-    ],
-    [pdvSubfilterOptions],
-  );
-  const selectedDeviceTypeLabel = useMemo(
-    () =>
-      deviceTypeSelectorOptions.find(option => option.key === topLevelActiveFilter)?.label ||
-      tt('device_filter', 'allTypes') ||
-      'Todos os tipos',
-    [deviceTypeSelectorOptions, topLevelActiveFilter],
-  );
-  const selectedPdvGatewayLabel = useMemo(
-    () =>
-      pdvGatewaySelectorOptions.find(option => option.key === activeFilter)?.label ||
-      tt('device_filter', 'all') ||
-      'Todos',
-    [activeFilter, pdvGatewaySelectorOptions],
-  );
-  const ActiveTabComponent = activeFilterDefinition.TabComponent;
-
-  useEffect(() => {
-    if (!hasRegisteredDeviceFilter(activeFilter)) {
-      setActiveFilter(ALL_DEVICE_FILTER);
-    }
-  }, [activeFilter]);
-
-  return (
-    <SafeAreaView
-      style={[styles.container, {backgroundColor: brandColors.background}]}>
-      <View style={styles.filtersBlock}>
-        <Text style={styles.filtersLabel}>{tt('device_filter', 'filterByType') || 'Filtrar por tipo'}</Text>
-        <CompactFilterSelector
-          icon={getDeviceFilterIcon(topLevelActiveFilter)}
-          label={selectedDeviceTypeLabel}
-          title={tt('device_filter', 'filterByType') || 'Filtrar por tipo'}
-          accentColor={getDeviceFilterAccent(topLevelActiveFilter, {
-            brandColors,
-            hex: accentPalette,
-          })}
-          active={topLevelActiveFilter !== ALL_DEVICE_FILTER}
-          options={deviceTypeSelectorOptions}
-          selectedKey={topLevelActiveFilter}
-          onSelect={optionKey => {
-            setActiveFilter(optionKey);
-            return true;
-          }}
-        />
-      </View>
-
-      {topLevelActiveFilter === PDV_DEVICE_TYPE && pdvSubfilterOptions.length > 0 ? (
-        <View style={styles.filtersBlock}>
-          <Text style={styles.filtersLabel}>{tt('device_filter', 'pdvGateway') || 'Gateway do PDV'}</Text>
-          <CompactFilterSelector
-            icon={getDeviceFilterIcon(activeFilter)}
-            label={selectedPdvGatewayLabel}
-            title={tt('device_filter', 'pdvGateway') || 'Gateway do PDV'}
-            accentColor={getDeviceFilterAccent(activeFilter, {
-              brandColors,
-              hex: accentPalette,
-            })}
-            active={activeFilter !== PDV_DEVICE_TYPE}
-            options={pdvGatewaySelectorOptions}
-            selectedKey={activeFilter}
-            onSelect={optionKey => {
-              setActiveFilter(optionKey);
-              return true;
-            }}
-          />
-        </View>
-      ) : null}
-
-      {activeFilterAction ? (
-        <View style={styles.printerActionBlock}>
-          <TouchableOpacity
-            style={[
-              styles.createPrinterBtn,
-              {backgroundColor: brandColors.primary},
-            ]}
-            activeOpacity={0.86}
-            onPress={() => navigation.navigate(activeFilterAction.routeName)}>
-            <Icon name="plus-circle" size={16} color={brandColors.white} />
-            <Text style={styles.createPrinterBtnText}>
-              {activeFilterAction.label}
-            </Text>
-          </TouchableOpacity>
-
-          <Text style={styles.helperText}>
-            {activeFilterAction.helperText}
-          </Text>
-        </View>
-      ) : null}
-
-      {ActiveTabComponent ? (
-        <ActiveTabComponent
-          key={`${activeFilter}-${currentCompany?.id || 'company'}`}
-        />
-      ) : null}
-    </SafeAreaView>
-  );
-};
-
-export default Devices;
+import React, {useEffect, useMemo, useState} from 'react';
+import {Text, TouchableOpacity, View} from 'react-native';
+import {SafeAreaView} from 'react-native-safe-area-context';
+import {useNavigation} from '@react-navigation/native';
+import {useStore} from '@store';
+import {resolveThemePalette} from '@controleonline/../../src/styles/branding';
+import {colors} from '@controleonline/../../src/styles/colors';
+import CompactFilterSelector from '@controleonline/ui-default/src/react/components/filters/CompactFilterSelector';
+import {PDV_DEVICE_TYPE} from '@controleonline/ui-common/src/react/utils/printerDevices';
+import Icon from 'react-native-vector-icons/Feather';
+import {
+  ALL_DEVICE_FILTER,
+  getDeviceCreationAction,
+  getDeviceFilterAccent,
+  getDeviceFilterDefinition,
+  getDeviceFilterIcon,
+  getDeviceFilterOptions,
+  getPdvSubfilterOptions,
+  hasRegisteredDeviceFilter,
+  isPdvSubfilter,
+} from './Devices/deviceTypes';
+import { createStyles } from './Devices.styles';
+
+const tt = (type, key) => global.t?.t('configs', type, key);
+
+const Devices = ({themePalette = null} = {}) => {
+  const navigation = useNavigation();
+  const peopleStore = useStore('people');
+  const themeStore = useStore('theme');
+
+  const {currentCompany} = peopleStore.getters;
+  const {colors: themeColors} = themeStore.getters;
+
+  const [activeFilter, setActiveFilter] = useState(ALL_DEVICE_FILTER);
+
+  const brandColors = useMemo(
+    () =>
+      themePalette || resolveThemePalette(
+        {...themeColors, ...(currentCompany?.theme?.colors || {})},
+        colors,
+      ),
+    [themePalette, themeColors, currentCompany?.id],
+  );
+  const styles = useMemo(() => createStyles(brandColors), [brandColors]);
+  const accentPalette = useMemo(
+    () => ({
+      primary: brandColors.info,
+      success: brandColors.success,
+      danger: brandColors.error,
+      warning: brandColors.warning,
+    }),
+    [brandColors.error, brandColors.info, brandColors.success, brandColors.warning],
+  );
+
+  const filterOptions = useMemo(() => getDeviceFilterOptions(), []);
+  const pdvSubfilterOptions = useMemo(() => getPdvSubfilterOptions(), []);
+  const activeFilterDefinition = useMemo(
+    () => getDeviceFilterDefinition(activeFilter),
+    [activeFilter],
+  );
+  const topLevelActiveFilter = useMemo(
+    () => (isPdvSubfilter(activeFilter) ? PDV_DEVICE_TYPE : activeFilter),
+    [activeFilter],
+  );
+  const activeFilterAction = useMemo(
+    () => getDeviceCreationAction(topLevelActiveFilter),
+    [topLevelActiveFilter],
+  );
+  const deviceTypeSelectorOptions = useMemo(
+    () => filterOptions.map(option => ({
+      key: option.key,
+      label: option.label,
+    })),
+    [filterOptions],
+  );
+  const pdvGatewaySelectorOptions = useMemo(
+    () => [
+      {key: PDV_DEVICE_TYPE, label: tt('device_filter', 'all') || 'Todos'},
+      ...pdvSubfilterOptions.map(option => ({
+        key: option.key,
+        label: option.label,
+      })),
+    ],
+    [pdvSubfilterOptions],
+  );
+  const selectedDeviceTypeLabel = useMemo(
+    () =>
+      deviceTypeSelectorOptions.find(option => option.key === topLevelActiveFilter)?.label ||
+      tt('device_filter', 'allTypes') ||
+      'Todos os tipos',
+    [deviceTypeSelectorOptions, topLevelActiveFilter],
+  );
+  const selectedPdvGatewayLabel = useMemo(
+    () =>
+      pdvGatewaySelectorOptions.find(option => option.key === activeFilter)?.label ||
+      tt('device_filter', 'all') ||
+      'Todos',
+    [activeFilter, pdvGatewaySelectorOptions],
+  );
+  const ActiveTabComponent = activeFilterDefinition.TabComponent;
+
+  useEffect(() => {
+    if (!hasRegisteredDeviceFilter(activeFilter)) {
+      setActiveFilter(ALL_DEVICE_FILTER);
+    }
+  }, [activeFilter]);
+
+  return (
+    <SafeAreaView
+      style={[styles.container, {backgroundColor: brandColors.background}]}>
+      <View style={styles.filtersBlock}>
+        <Text style={styles.filtersLabel}>{tt('device_filter', 'filterByType') || 'Filtrar por tipo'}</Text>
+        <CompactFilterSelector
+          icon={getDeviceFilterIcon(topLevelActiveFilter)}
+          label={selectedDeviceTypeLabel}
+          title={tt('device_filter', 'filterByType') || 'Filtrar por tipo'}
+          accentColor={getDeviceFilterAccent(topLevelActiveFilter, {
+            brandColors,
+            hex: accentPalette,
+          })}
+          active={topLevelActiveFilter !== ALL_DEVICE_FILTER}
+          options={deviceTypeSelectorOptions}
+          selectedKey={topLevelActiveFilter}
+          onSelect={optionKey => {
+            setActiveFilter(optionKey);
+            return true;
+          }}
+        />
+      </View>
+
+      {topLevelActiveFilter === PDV_DEVICE_TYPE && pdvSubfilterOptions.length > 0 ? (
+        <View style={styles.filtersBlock}>
+          <Text style={styles.filtersLabel}>{tt('device_filter', 'pdvGateway') || 'Gateway do PDV'}</Text>
+          <CompactFilterSelector
+            icon={getDeviceFilterIcon(activeFilter)}
+            label={selectedPdvGatewayLabel}
+            title={tt('device_filter', 'pdvGateway') || 'Gateway do PDV'}
+            accentColor={getDeviceFilterAccent(activeFilter, {
+              brandColors,
+              hex: accentPalette,
+            })}
+            active={activeFilter !== PDV_DEVICE_TYPE}
+            options={pdvGatewaySelectorOptions}
+            selectedKey={activeFilter}
+            onSelect={optionKey => {
+              setActiveFilter(optionKey);
+              return true;
+            }}
+          />
+        </View>
+      ) : null}
+
+      {activeFilterAction ? (
+        <View style={styles.printerActionBlock}>
+          <TouchableOpacity
+            style={[
+              styles.createPrinterBtn,
+              {backgroundColor: brandColors.primary},
+            ]}
+            activeOpacity={0.86}
+            onPress={() => navigation.navigate(activeFilterAction.routeName)}>
+            <Icon name="plus-circle" size={16} color={brandColors.white} />
+            <Text style={styles.createPrinterBtnText}>
+              {activeFilterAction.label}
+            </Text>
+          </TouchableOpacity>
+
+          <Text style={styles.helperText}>
+            {activeFilterAction.helperText}
+          </Text>
+        </View>
+      ) : null}
+
+      {ActiveTabComponent ? (
+        <ActiveTabComponent
+          themePalette={themePalette}
+          key={`${activeFilter}-${currentCompany?.id || 'company'}`}
+        />
+      ) : null}
+    </SafeAreaView>
+  );
+};
+
+export default Devices;

package/src/react/pages/IntegrationConfigPage.js

@@ -14,6 +14,7 @@ import { fetchPeopleConfigs } from './fetchPeopleConfigs';
 import IntegrationConfigFields from './IntegrationConfigFields';
 import {
   ROUTE_PROVIDER_MAP,
+  expandBundledConfig,
   extractAuthorizationUrl,
   formatApiError,
   formatUberOAuthError,
@@ -112,6 +113,8 @@ export default function IntegrationConfigPage({ route, embedded = false, fiscalT
   const allFieldKeysSig = useMemo(() => allFieldKeys.join('|'), [allFieldKeys]);
   // Pure config providers (e.g. receita-federal) do not use marketplace/integrations.
   const needsMarketplaceIntegration = Boolean(providerConfig?.oauthConnect);
+  const bundleKey = normalizeTextValue(providerConfig?.bundleKey);
+  const configVisibility = normalizeTextValue(providerConfig?.visibility) || 'public';
 
   useEffect(() => {
     setConfigValues({});
@@ -135,14 +138,28 @@ export default function IntegrationConfigPage({ route, embedded = false, fiscalT
     }
     if (showLoading) setLoading(true);
     try {
-      const keys = allFieldKeys.length
-        ? allFieldKeys
-        : visibleFields.map(field => field.key).filter(Boolean);
-
-      if (keys.length) {
-        const configItems = await fetchPeopleConfigs({ peopleIri: providerIri, configKeys: keys });
+      if (bundleKey) {
+        const configItems = await fetchPeopleConfigs({
+          peopleIri: providerIri,
+          configKeys: [bundleKey],
+        });
+        const bundled = configItems.find(
+          item => String(item?.configKey || '').trim() === bundleKey,
+        );
         const mergeFields = allConfigFields.length ? allConfigFields : visibleFields;
-        setConfigValues(current => mergeTabValues(mergeFields, configItems, current));
+        setConfigValues(current =>
+          expandBundledConfig(mergeFields, bundled?.configValue, current),
+        );
+      } else {
+        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) {
@@ -170,6 +187,7 @@ export default function IntegrationConfigPage({ route, embedded = false, fiscalT
     allConfigFields,
     allFieldKeys,
     allFieldKeysSig,
+    bundleKey,
     needsMarketplaceIntegration,
     providerConfig,
     providerIri,
@@ -246,16 +264,44 @@ export default function IntegrationConfigPage({ route, embedded = false, fiscalT
       showError('Nao foi possivel identificar a integracao selecionada.');
       return;
     }
-    const configs = visibleFields.map(field => ({
-      configKey: field.key,
-      configValue: toConfigRequestValue(normalizeTextValue(configValues[field.key])),
-    }));
+
+    let configs;
+    if (bundleKey) {
+      const payloadObject = {};
+      (visibleFields || []).forEach(field => {
+        payloadObject[field.key] = normalizeTextValue(configValues[field.key]);
+      });
+      configs = [
+        {
+          configKey: bundleKey,
+          configValue: toConfigRequestValue(payloadObject),
+        },
+      ];
+    } else {
+      configs = visibleFields.map(field => ({
+        configKey: field.key,
+        configValue: toConfigRequestValue(normalizeTextValue(configValues[field.key])),
+      }));
+    }
+
     try {
-      await persistConfigs({ configs, people: providerIri, module: 4, visibility: 'public' });
+      await persistConfigs({ configs, people: providerIri, module: 4, visibility: configVisibility });
       showSuccess(`${activeTabDef?.label || providerConfig.label} salvo com sucesso.`);
       await loadPageData({ showLoading: false });
     } catch (error) { showError(error?.message || 'Nao foi possivel salvar a integracao.'); }
-  }, [activeTabDef, configValues, loadPageData, persistConfigs, providerConfig, providerIri, showError, showSuccess, visibleFields]);
+  }, [
+    activeTabDef,
+    bundleKey,
+    configValues,
+    configVisibility,
+    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="Empresa nao identificada" text="Abra a ficha da empresa para gravar as configuracoes fiscais nela." />;

package/src/react/pages/IntegrationConfigPage.utils.js

@@ -5,6 +5,7 @@ export const ROUTE_PROVIDER_MAP = {
   AsaasIntegrationPage: 'asaas',
   ClickSignIntegrationPage: 'clicksign',
   ReceitaFederalIntegrationPage: 'receita-federal',
+  SemPararIntegrationPage: 'sem-parar',
 };
 
 export const routeNameToPath = routeName =>
@@ -53,6 +54,22 @@ export const mergeTabValues = (fields, source, current = {}) => {
   return next;
 };
 
+/** Expand a single JSON config (bundleKey) into flat field values. */
+export const expandBundledConfig = (fields, rawValue, current = {}) => {
+  let parsed = rawValue;
+  if (typeof rawValue === 'string') {
+    try {
+      parsed = JSON.parse(rawValue);
+    } catch {
+      parsed = {};
+    }
+  }
+  if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) {
+    parsed = {};
+  }
+  return mergeTabValues(fields, parsed, current);
+};
+
 export const buildFieldValues = (providerConfig, source) =>
   mergeTabValues(getConfigFields(providerConfig), source, {});
 

package/src/react/pages/integrationsCatalog.js

@@ -70,6 +70,16 @@ export const INTEGRATION_LIST = [
     accent: '#166534',
     icon: 'file-text',
   },
+  {
+    key: 'sem-parar',
+    label: 'Sem Parar',
+    route: 'IntegrationConfigPage',
+    routeParams: {
+      providerKey: 'sem-parar',
+    },
+    accent: '#0EA5E9',
+    icon: 'truck',
+  },
 ];
 
 export const INTEGRATION_CONFIGS = {
@@ -257,6 +267,67 @@ export const INTEGRATION_CONFIGS = {
     ],
     fields: [],
   },
+
+  'sem-parar': {
+    key: 'sem-parar',
+    label: 'Sem Parar',
+    accent: '#0EA5E9',
+    icon: 'truck',
+    description:
+      'Credenciais da empresa para emissao de vale-pedagio via Sem Parar.',
+    saveLabel: 'Salvar Sem Parar',
+    // Backend (api-platform-integration SemPararConfig) reads a single private JSON key.
+    bundleKey: 'SEM_PARAR',
+    visibility: 'private',
+    requiredKeys: ['ENABLED', 'CLIENT_ID', 'CLIENT_SECRET', 'USERNAME', 'PASSWORD'],
+    fields: [
+      {
+        key: 'ENABLED',
+        label: 'Ativo',
+        type: 'select',
+        options: [
+          {value: '1', label: 'Sim'},
+          {value: '0', label: 'Nao'},
+        ],
+      },
+      {
+        key: 'ENVIRONMENT',
+        label: 'Ambiente',
+        type: 'select',
+        options: [
+          {value: 'sandbox', label: 'Sandbox'},
+          {value: 'production', label: 'Producao'},
+        ],
+      },
+      {
+        key: 'CLIENT_ID',
+        label: 'Client ID',
+        placeholder: 'Client ID Sem Parar',
+      },
+      {
+        key: 'CLIENT_SECRET',
+        label: 'Client secret',
+        placeholder: 'Client secret Sem Parar',
+        secureTextEntry: true,
+      },
+      {
+        key: 'USERNAME',
+        label: 'Usuario',
+        placeholder: 'Usuario da API',
+      },
+      {
+        key: 'PASSWORD',
+        label: 'Senha',
+        placeholder: 'Senha da API',
+        secureTextEntry: true,
+      },
+      {
+        key: 'CONVENIADO',
+        label: 'Conveniado',
+        placeholder: 'Codigo do conveniado (se aplicavel)',
+      },
+    ],
+  },
 };
 
 export const getIntegrationListItem = key =>

package/src/react/utils/fileUrl.js

@@ -1,4 +1,5 @@
 import {env as APP_ENV} from '@env';
+import {filterApiHeaders} from '../../utils/trustedApiUrl';
 import {buildAssetUrl} from '@controleonline/../../src/styles/branding';
 import {
   resolveAppDomain,
@@ -227,7 +228,7 @@ export const extractFileId = file => {
   return null;
 };
 
-export const resolveDefaultFileSource = (
+const resolveFileSource = (
   file,
   {company = null, appDomain = '', headers = {}} = {},
 ) => {
@@ -329,6 +330,11 @@ export const resolveDefaultFileSource = (
   return null;
 };
 
+export const resolveDefaultFileSource = (file, options = {}) => {
+  const source = resolveFileSource(file, options);
+  return source ? {...source, headers: filterApiHeaders(source.uri, source.headers, APP_ENV?.API_ENTRYPOINT)} : null;
+};
+
 export const resolveDefaultFileUrl = (file, options = {}) =>
   resolveDefaultFileSource(file, options)?.uri || '';
 

package/src/react/utils/productCatalogCacheRevision.js

@@ -0,0 +1,13 @@
+import eventBus from '../components/EventBus';
+
+const key = 'product-catalog-cache-revision';
+let revision = '0';
+let sequence = 0;
+export const getProductCatalogCacheRevision = () => {
+  try { return localStorage.getItem(key) || revision; } catch { return revision; }
+};
+export const invalidateProductCatalogCache = () => {
+  revision = `${Date.now()}:${++sequence}`;
+  try { localStorage.setItem(key, revision); } catch { /* In-memory invalidation still applies. */ }
+  eventBus.emit('product-catalog-cache:cleared');
+};