@controleonline/ui-common 1.2.93 → 1.2.95

package/docs/homepage-1056.md

@@ -0,0 +1,12 @@
+# Homepage ADMIN/MANAGER — app-community#1056
+
+Soft appearance is opt-in for HomePage only. Existing menu routes/parameters, permissions, stores and translations are preserved. App-provided homepage colors and components are used only in this appearance. Default consumers retain their current behavior.
+
+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.93",
+  "version": "1.2.95",
   "author": "ControleOnline",
   "description": "ControleOnline Common Quasar UI Component",
   "license": "MIT",

package/src/react/components/BottomNavigationBar.js

@@ -1,10 +1,13 @@
 import React, {useLayoutEffect, useMemo} from 'react';
 import {Pressable, Text, View} from 'react-native';
-import Icon from 'react-native-vector-icons/Feather';
+import LegacyIcon from 'react-native-vector-icons/Feather';
+import HomeIcon from '@controleonline/../../src/components/HomeIcon';
 import {useTheme} from './DefaultProvider';
 import RuntimeInfoFooter from './RuntimeInfoFooter';
 import {resolveMenuRouteParams} from '../utils/menuNavigation';
 import createStyles from './BottomNavigationBar.styles';
+import softenStyles from './BottomNavigationBar.soft.styles';
+import {resolveHomepagePalette} from '@controleonline/../../src/styles/homepagePalette';
 
 const BottomNavigationBar = ({
   navigation,
@@ -14,7 +17,10 @@ const BottomNavigationBar = ({
   colors = {},
   testID = 'bottom-navigation',
   useModernWebChromeProps = false,
+  appearance = 'legacy',
 }) => {
+  const Icon = appearance === 'soft' ? HomeIcon : LegacyIcon;
+  colors = appearance === 'soft' ? resolveHomepagePalette(colors) : colors;
   const theme = useTheme?.() || {};
   const runtimeFooter = theme?.runtimeFooter || null;
   const registerBottomNavigation =
@@ -31,14 +37,14 @@ const BottomNavigationBar = ({
 
   const styles = useMemo(
     () =>
-      createStyles({
+      softenStyles(createStyles({
         activeBackground,
         dockBackground,
         dockBorder,
         dockShadow,
         activeBorder,
         useModernWebChromeProps,
-      }),
+      }), colors, appearance),
     [
       activeBackground,
       activeBorder,
@@ -46,6 +52,7 @@ const BottomNavigationBar = ({
       dockBorder,
       dockShadow,
       useModernWebChromeProps,
+      appearance,
     ],
   );
 
@@ -116,8 +123,11 @@ const BottomNavigationBar = ({
     ? [styles.host, styles.hostPointerEventsBoxNone]
     : styles.host;
   const footerProps = {
+    appearance,
     appVersion: runtimeFooter?.appVersion,
-    colors: runtimeFooter?.colors || {},
+    colors: appearance === 'soft'
+      ? {...runtimeFooter?.colors, footerBackground: colors.footerBackground, footerText: colors.footerText}
+      : runtimeFooter?.colors || {},
     mainCompany: runtimeFooter?.mainCompany,
     device: runtimeFooter?.device,
     useModernWebChromeProps,

package/src/react/components/BottomNavigationBar.soft.styles.js

@@ -0,0 +1,28 @@
+import {Platform} from 'react-native';
+
+// Only the homepage opts into this chrome; preserve all default navigation styles.
+export default (styles, colors, appearance) => appearance !== 'soft' ? styles : {
+  ...styles,
+  dock: [styles.dock, {
+    paddingHorizontal: 0,
+    paddingTop: 0,
+    paddingBottom: 0,
+    borderWidth: 0,
+    borderTopWidth: 1,
+    borderColor: colors.navigationBorder,
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 0,
+    elevation: 0,
+    shadowOpacity: 0,
+    ...(Platform.OS === 'web' ? {boxShadow: 'none'} : {}),
+  }],
+  itemsRow: [styles.itemsRow, {minHeight: 64, paddingHorizontal: 12, paddingVertical: 5}],
+  item: [styles.item, {minHeight: 54, borderRadius: 12}],
+  itemLabel: [styles.itemLabel, {fontSize: 11, fontWeight: '400'}],
+  footerSlot: [styles.footerSlot, {
+    borderTopWidth: 1,
+    borderColor: colors.navigationBorder,
+    paddingHorizontal: 0,
+    minHeight: 28,
+  }],
+};

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/components/RuntimeBottomNavigationBar.js

@@ -19,6 +19,7 @@ const {
 } = require('@controleonline/ui-common/src/react/utils/bottomNavigationToolbar');
 
 const RuntimeBottomNavigationBar = ({
+  appearance = 'legacy',
   activeRouteName: activeRouteNameProp,
   colors: colorsOverride,
   disabled: disabledOverride,
@@ -159,6 +160,7 @@ const RuntimeBottomNavigationBar = ({
 
   return (
     <BottomNavigationBar
+      appearance={appearance}
       activeRouteName={effectiveActiveRoute}
       colors={colors}
       disabled={isDisabled}

package/src/react/components/RuntimeInfoFooter.home.spacing.js

@@ -0,0 +1,5 @@
+// Keep the native safe area outside the centered content row.
+export default (appearance, platform, bottomInset) => appearance === 'soft' ? {
+  contentPadding: 4,
+  safeAreaBottom: platform === 'web' ? 0 : Math.max(Number(bottomInset) || 0, 0),
+} : null;

package/src/react/components/RuntimeInfoFooter.js

@@ -22,6 +22,7 @@ import {
 } from '@controleonline/ui-common/src/react/utils/runtimeFooter';
 import styles from './RuntimeInfoFooter.styles';
 import RuntimeFooterMarqueeText from './RuntimeFooterMarqueeText';
+import resolveHomeFooterSpacing from './RuntimeInfoFooter.home.spacing';
 
 const ROTATION_INTERVAL_MS = 4000;
 const COMPACT_BREAKPOINT = 720;
@@ -66,6 +67,7 @@ const RuntimeInfoFooter = ({
   device,
   colors,
   useModernWebChromeProps = false,
+  appearance = 'legacy',
 }) => {
   const {width} = useWindowDimensions();
   const insets = useSafeAreaInsets();
@@ -258,6 +260,7 @@ const RuntimeInfoFooter = ({
       : inlineText
   ) || primaryText || device?.id || '';
   const backgroundColor = colors?.footerBackground;
+  const homeSpacing = resolveHomeFooterSpacing(appearance, Platform.OS, insets.bottom);
   const borderColor = colors?.footerBorder;
   const textColor = resolveVisibleFooterTextColor(colors);
   const loadingColor = colors?.footerLink || colors?.primary || textColor;
@@ -267,7 +270,9 @@ const RuntimeInfoFooter = ({
     : styles.shell;
 
   return (
-    <View {...shellProps} style={shellStyle}>
+    <View {...shellProps} style={[shellStyle, homeSpacing && {
+      paddingBottom: homeSpacing.safeAreaBottom, backgroundColor,
+    }]}>
       <View
         testID="runtime-info-footer"
         style={[
@@ -276,7 +281,8 @@ const RuntimeInfoFooter = ({
           {
             backgroundColor,
             borderTopColor: borderColor,
-            paddingBottom: bottomInset,
+            paddingBottom: homeSpacing ? homeSpacing.contentPadding : bottomInset,
+            ...(homeSpacing && !showDebugInfo ? {paddingTop: homeSpacing.contentPadding} : {}),
           },
         ]}>
         <View style={styles.primaryRow}>

package/src/react/components/UserAvatar.js

@@ -156,6 +156,7 @@ const useDisplayUri = uri => {
 
 const UserAvatar = ({
   imageUrl,
+  imageHeaders,
   email,
   name,
   size = 40,
@@ -215,7 +216,8 @@ const UserAvatar = ({
     <View style={containerStyle}>
       {displayUri ? (
         <Image
-          source={{uri: displayUri}}
+          source={imageHeaders && Platform.OS !== 'web' && displayUri === imageUrl
+            ? {uri: displayUri, headers: imageHeaders} : {uri: displayUri}}
           style={styles.image}
           onError={() => setSourceIndex(index => index + 1)}
         />

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,
+  );