@controleonline/ui-common 1.2.94 → 1.2.95

package/docs/homepage-1056.md

@@ -4,3 +4,9 @@ Soft appearance is opt-in for HomePage only. Existing menu routes/parameters, pe
 
 Source: https://github.com/ControleOnline/app-community/issues/1056
 Local evidence: 40 homepage tests and 34 runtime footer/zoom tests passed. No production authorization.
+
+## Web login translation bootstrap
+
+Keep the navigation tree mounted while translations initialize. Hide the shell and disable pointer/accessibility interaction until the existing translation readiness contract succeeds. Unmounting navigation during login resets its route and repeatedly mounts/registers the bottom bar, causing React maximum update depth. No route, permission, translation source, theme or zoom changes. Native behavior is unchanged.
+
+Regression evidence: app-community homepage bootstrapNavigation.test.js reproduced maximum update depth before the fix, then passed after it. 44 tests across 9 homepage suites passed. Runtime Dev reproduced the unfixed bug; new runtime verification is required after consuming ui-common 1.2.95.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@controleonline/ui-common",
-  "version": "1.2.94",
+  "version": "1.2.95",
   "author": "ControleOnline",
   "description": "ControleOnline Common Quasar UI Component",
   "license": "MIT",

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

@@ -12,6 +12,9 @@ const styles = StyleSheet.create({
   shell: {
     flex: 1,
   },
+  translationPending: {
+    opacity: 0,
+  },
   content: {
     flex: 1,
     minHeight: 0,

package/src/react/components/DefaultProvider.web.js

@@ -395,15 +395,19 @@ export const DefaultProvider = ({
 
   useWebThemePalette({resolveDomainThemeColors, baseThemeColors, mainCompany, resolveThemePalette, runtimeColors, applyPaletteToRuntimeColors, applyThemeCssVariables, actions, currentCompany, isShopClientApp});
 
-  if (requiresTranslateBootstrap && !isTranslateBootstrapReady) {
-    return <View style={providerStyles.loadingContainer} />;
-  }
+  const translationPending = requiresTranslateBootstrap && !isTranslateBootstrapReady;
 
   return (
       <ThemeContext.Provider value={themeContextValue}>
         <View
+          pointerEvents={translationPending ? 'none' : 'auto'}
+          accessibilityElementsHidden={translationPending}
+          importantForAccessibility={translationPending ? 'no-hide-descendants' : 'auto'}
           style={[
             providerStyles.shell,
+            // Keep navigation mounted while translations load. Unmounting it
+            // resets the login route and repeatedly registers the bottom bar.
+            translationPending && providerStyles.translationPending,
             {
               backgroundColor: colors?.background || runtimeColors.background,
             },

package/src/react/pages/IntegrationConfigPage.js

@@ -1,4 +1,6 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+lines 378
+ok True
+eCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { ActivityIndicator, Platform, RefreshControl, ScrollView, Text, TouchableOpacity, View } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { useFocusEffect } from '@react-navigation/native';
@@ -14,6 +16,7 @@ import { fetchPeopleConfigs } from './fetchPeopleConfigs';
 import IntegrationConfigFields from './IntegrationConfigFields';
 import {
   ROUTE_PROVIDER_MAP,
+  expandBundledConfig,
   extractAuthorizationUrl,
   formatApiError,
   formatUberOAuthError,
@@ -112,6 +115,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 +140,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 +189,7 @@ export default function IntegrationConfigPage({ route, embedded = false, fiscalT
     allConfigFields,
     allFieldKeys,
     allFieldKeysSig,
+    bundleKey,
     needsMarketplaceIntegration,
     providerConfig,
     providerIri,
@@ -246,16 +266,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/utils/integrationConfigs.js

@@ -1,6 +1,7 @@
 export const CIELO_CONFIG_KEY = 'CIELO';
 export const NEW_RELIC_CONFIG_KEY = 'NEW_RELIC';
 export const SPOTIFY_CONFIG_KEY = 'SPOTIFY';
+export const SEM_PARAR_CONFIG_KEY = 'SEM_PARAR';
 
 export const DEFAULT_CIELO_CONFIG = {
   ACCESS_TOKEN: '',
@@ -23,6 +24,21 @@ export const DEFAULT_SPOTIFY_CONFIG = {
   CLIENT_SECRET: '',
 };
 
+/**
+ * Company-scoped Sem Parar credentials for vale-pedágio emission.
+ * ENABLED: "1" | "0"
+ * ENVIRONMENT: "sandbox" | "production"
+ */
+export const DEFAULT_SEM_PARAR_CONFIG = {
+  ENABLED: '0',
+  CLIENT_ID: '',
+  CLIENT_SECRET: '',
+  USERNAME: '',
+  PASSWORD: '',
+  ENVIRONMENT: 'sandbox',
+  CONVENIADO: '',
+};
+
 const isConfigMap = value =>
   value && typeof value === 'object' && !Array.isArray(value);
 
@@ -78,3 +94,10 @@ export const resolveSpotifyConfig = configs =>
     SPOTIFY_CONFIG_KEY,
     DEFAULT_SPOTIFY_CONFIG,
   );
+
+export const resolveSemPararConfig = configs =>
+  resolveIntegrationConfig(
+    configs,
+    SEM_PARAR_CONFIG_KEY,
+    DEFAULT_SEM_PARAR_CONFIG,
+  );