@controleonline/ui-common 1.2.80 → 1.2.81

package/src/react/components/RemoteCheckoutService.js

@@ -125,7 +125,7 @@ const Checkout = () => {
 
     if (!paidStatusIri) {
       invoiceActions.setError(
-        'Nao foi possivel resolver o status pago da invoice do PDV.',
+        'Não foi possível resolver o status pago da invoice do PDV.',
       );
       return;
     }
@@ -259,7 +259,7 @@ const Checkout = () => {
       } catch (error) {
         const errorMessage = normalizeGatewayPaymentError(
           error,
-          'Nao foi possivel concluir o pagamento remoto.',
+          'Não foi possível concluir o pagamento remoto.',
         );
         const wasCanceled = isRemotePaymentCancellation({
           status: error?.status,

package/src/react/components/RuntimeBottomNavigationBar.js

@@ -1,27 +1,23 @@
-import React, {useEffect, useMemo, useState} from 'react';
-import {useNavigationState} from '@react-navigation/native';
-import {useStore} from '@store';
-import {api} from '@controleonline/ui-common/src/api';
-import {app_type} from '@appType';
-import BottomNavigationBar from '@controleonline/ui-common/src/react/components/BottomNavigationBar';
+import React, {useEffect, useMemo, useState} from 'react';
+import {useNavigationState} from '@react-navigation/native';
+import {useStore} from '@store';
+import {api} from '@controleonline/ui-common/src/api';
+import {app_type} from '@appType';
+import BottomNavigationBar from '@controleonline/ui-common/src/react/components/BottomNavigationBar';
 import {
   getBottomNavigationPreset,
-  resolveBottomNavigationItems,
   resolveBottomNavigationRoute,
 } from '@controleonline/ui-common/src/react/components/BottomNavigationBar.config';
-import {
-  filterRuntimeMenuModulesByType,
-  normalizeAppType,
-  normalizeRuntimeMenuResponse,
-  resolveRuntimeMenuLabel,
-} from '@controleonline/ui-common/src/react/utils/runtimeMenu';
-
-const sortRuntimeMenuItems = (left, right) => {
-  const orderDiff = Number(left?.sortOrder || 0) - Number(right?.sortOrder || 0);
-  if (orderDiff !== 0) return orderDiff;
-  return String(left?.label || '').localeCompare(String(right?.label || ''));
-};
-
+import {
+  normalizeAppType,
+  normalizeRuntimeMenuResponse,
+  resolveRuntimeMenuLabel,
+} from '@controleonline/ui-common/src/react/utils/runtimeMenu';
+const {
+  mapRuntimeMenusToNavItems,
+  resolveToolbarRuntimeMenus,
+} = require('@controleonline/ui-common/src/react/utils/bottomNavigationToolbar');
+
 const RuntimeBottomNavigationBar = ({
   activeRouteName: activeRouteNameProp,
   colors: colorsOverride,
@@ -30,15 +26,15 @@ const RuntimeBottomNavigationBar = ({
   itemMapper,
   menuType = 'toolbar',
   navigation,
-  presetKey,
-  routeAliases: routeAliasesProp,
-  testID = 'bottom-navigation',
-  useModernWebChromeProps = false,
-}) => {
-  const state = useNavigationState(current => current);
-  const activeRouteName =
-    activeRouteNameProp || state?.routes?.[state.index]?.name || 'HomePage';
-
+  presetKey,
+  routeAliases: routeAliasesProp,
+  testID = 'bottom-navigation',
+  useModernWebChromeProps = false,
+}) => {
+  const state = useNavigationState(current => current);
+  const activeRouteName =
+    activeRouteNameProp || state?.routes?.[state.index]?.name || 'HomePage';
+
   const themeStore = useStore('theme');
   const peopleStore = useStore('people');
   const themeGetters = themeStore?.getters || {};
@@ -50,129 +46,128 @@ const RuntimeBottomNavigationBar = ({
   const routeAliases = routeAliasesProp || preset?.routeAliases || {};
   const appType = normalizeAppType(app_type);
 
+  // Always consult menus-people for role-aware toolbar; preset is fallback only.
   useEffect(() => {
     if (!currentCompany?.id || !menuType) {
-      setRuntimeMenus([]);
+      setRuntimeMenus(
+        resolveToolbarRuntimeMenus({
+          apiMenus: [],
+          preset,
+          presetKey,
+          menuType,
+          translate: global.t?.t,
+        }),
+      );
       return undefined;
     }
 
-    if (preset) {
-      const presetMenus = Array.isArray(preset?.items)
-        ? resolveBottomNavigationItems(
-            preset.items.map((item, index) => ({
-              ...item,
-              menuType,
-              sortOrder: Number(item?.sortOrder || (index + 1) * 10),
-            })),
-            global.t?.t,
-          )
-        : [];
+    let cancelled = false;
+    setRuntimeMenus([]);
 
-      setRuntimeMenus([
-        {
-          id: presetKey || 'runtime-bottom-navigation',
-          label: preset?.label || presetKey || '',
-          icon: preset?.icon || '',
-          menus: presetMenus,
+    api
+      .fetch('menus-people', {
+        params: {
+          myCompany: currentCompany.id,
+          appType,
+          menuType,
         },
-      ]);
-      return undefined;
+      })
+      .then(result => {
+        if (cancelled) return;
+        const apiMenus = normalizeRuntimeMenuResponse(result, {
+          appType,
+          allowFallback: false,
+        });
+        setRuntimeMenus(
+          resolveToolbarRuntimeMenus({
+            apiMenus,
+            preset,
+            presetKey,
+            menuType,
+            translate: global.t?.t,
+          }),
+        );
+      })
+      .catch(() => {
+        if (cancelled) return;
+        setRuntimeMenus(
+          resolveToolbarRuntimeMenus({
+            apiMenus: [],
+            preset,
+            presetKey,
+            menuType,
+            translate: global.t?.t,
+          }),
+        );
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [appType, currentCompany?.id, menuType, preset, presetKey]);
+
+  const colors = useMemo(() => {
+    if (colorsOverride) {
+      return colorsOverride;
     }
 
-    let cancelled = false;
-    setRuntimeMenus([]);
-
-    api
-      .fetch('menus-people', {
-        params: {
-          myCompany: currentCompany.id,
-          appType,
-          menuType,
-        },
-      })
-      .then(result => {
-        if (!cancelled) {
-          setRuntimeMenus(
-            normalizeRuntimeMenuResponse(result, {
-              appType,
-              allowFallback: false,
-            }),
-          );
-        }
-      })
-      .catch(() => {
-        if (!cancelled) {
-          setRuntimeMenus([]);
-        }
-      });
-
-    return () => {
-      cancelled = true;
-    };
-  }, [
-    appType,
-    currentCompany?.id,
-    menuType,
-    preset,
-    presetKey,
-  ]);
-
-  const colors = useMemo(() => {
-    if (colorsOverride) {
-      return colorsOverride;
-    }
-
-    return {
-      ...themeColors,
-      ...(currentCompany?.theme?.colors || {}),
-    };
-  }, [colorsOverride, currentCompany?.theme?.colors, themeColors]);
-
-  const navItems = useMemo(() => {
-    const mapper = typeof itemMapper === 'function' ? itemMapper : item => item;
-    const filter = typeof itemFilter === 'function' ? itemFilter : () => true;
-
-    return filterRuntimeMenuModulesByType(runtimeMenus, menuType)
-      .flatMap(module => (Array.isArray(module?.menus) ? module.menus : []))
-      .map(item => mapper({...item}))
-      .filter(Boolean)
-      .filter(filter)
-      .sort(sortRuntimeMenuItems)
-      .map(item => ({
-        route: item.route,
-        icon: item.icon || 'circle',
-        label: resolveRuntimeMenuLabel(item, global.t?.t),
-        routeParams: item.routeParams,
-        menuType: item.menuType,
-      }))
-      .filter(item => Boolean(item.route));
-  }, [itemFilter, itemMapper, menuType, runtimeMenus]);
-
-  const resolvedActiveRoute = resolveBottomNavigationRoute(
-    routeAliases,
-    activeRouteName,
-  );
-  const knownRoute = navItems.some(item => item.route === resolvedActiveRoute);
-  const effectiveActiveRoute = knownRoute
-    ? resolvedActiveRoute
-    : navItems[0]?.route || activeRouteName;
-
-  const isDisabled =
-    typeof disabledOverride === 'boolean'
-      ? disabledOverride
-      : !currentCompany || Object.keys(currentCompany).length === 0;
-
-  return (
-    <BottomNavigationBar
-      activeRouteName={effectiveActiveRoute}
-      colors={colors}
-      disabled={isDisabled}
-      items={navItems}
-      navigation={navigation}
-      testID={testID}
-      useModernWebChromeProps={useModernWebChromeProps}
-    />
-  );
-};
-
-export default RuntimeBottomNavigationBar;
+    return {
+      ...themeColors,
+      ...(currentCompany?.theme?.colors || {}),
+    };
+  }, [colorsOverride, currentCompany?.theme?.colors, themeColors]);
+
+  const navItems = useMemo(() => {
+    const mapper = typeof itemMapper === 'function' ? itemMapper : item => item;
+    const filter = typeof itemFilter === 'function' ? itemFilter : () => true;
+    const translate = global.t?.t;
+
+    return mapRuntimeMenusToNavItems(runtimeMenus, menuType)
+      .map(item => {
+        const label =
+          resolveRuntimeMenuLabel(
+            {menuKey: item.menuKey, label: item.label},
+            translate,
+          ) ||
+          (typeof item.label === 'string' ? item.label : '') ||
+          item.menuKey ||
+          item.route;
+
+        return mapper({
+          ...item,
+          label,
+        });
+      })
+      .filter(Boolean)
+      .filter(filter)
+      .filter(item => Boolean(item?.route));
+  }, [itemFilter, itemMapper, menuType, runtimeMenus]);
+
+  const resolvedActiveRoute = resolveBottomNavigationRoute(
+    routeAliases,
+    activeRouteName,
+  );
+  const knownRoute = navItems.some(item => item.route === resolvedActiveRoute);
+  const effectiveActiveRoute = knownRoute
+    ? resolvedActiveRoute
+    : navItems[0]?.route || activeRouteName;
+
+  const isDisabled =
+    typeof disabledOverride === 'boolean'
+      ? disabledOverride
+      : !currentCompany || Object.keys(currentCompany).length === 0;
+
+  return (
+    <BottomNavigationBar
+      activeRouteName={effectiveActiveRoute}
+      colors={colors}
+      disabled={isDisabled}
+      items={navItems}
+      navigation={navigation}
+      testID={testID}
+      useModernWebChromeProps={useModernWebChromeProps}
+    />
+  );
+};
+
+export default RuntimeBottomNavigationBar;

package/src/react/components/RuntimeFooterMarqueeText.js

@@ -0,0 +1,137 @@
+const React = require('react');
+const {useEffect, useRef, useState} = React;
+const {Animated, Text, View} = require('react-native');
+
+const GAP_PX = 32;
+const MS_PER_PX = 28;
+const MIN_DURATION_MS = 4000;
+const HOLD_MS = 1200;
+
+/**
+ * Single-line footer text. When content overflows the available width,
+ * scrolls horizontally in a continuous loop. Short text stays static.
+ */
+const RuntimeFooterMarqueeText = ({
+  text,
+  color,
+  style,
+  opacity,
+  testID = 'runtime-footer-marquee-text',
+}) => {
+  const [containerWidth, setContainerWidth] = useState(0);
+  const [contentWidth, setContentWidth] = useState(0);
+  const translateX = useRef(new Animated.Value(0)).current;
+  const animationRef = useRef(null);
+
+  const shouldMarquee =
+    containerWidth > 0 && contentWidth > containerWidth + 2;
+
+  useEffect(() => {
+    if (animationRef.current) {
+      animationRef.current.stop();
+      animationRef.current = null;
+    }
+    translateX.stopAnimation();
+    translateX.setValue(0);
+
+    if (!shouldMarquee) {
+      return undefined;
+    }
+
+    const distance = contentWidth + GAP_PX;
+    const duration = Math.max(Math.round(distance * MS_PER_PX), MIN_DURATION_MS);
+
+    const loop = Animated.loop(
+      Animated.sequence([
+        Animated.delay(HOLD_MS),
+        Animated.timing(translateX, {
+          toValue: -distance,
+          duration,
+          useNativeDriver: true,
+        }),
+        Animated.timing(translateX, {
+          toValue: 0,
+          duration: 0,
+          useNativeDriver: true,
+        }),
+      ]),
+    );
+
+    animationRef.current = loop;
+    loop.start();
+
+    return () => {
+      loop.stop();
+      animationRef.current = null;
+      translateX.stopAnimation();
+    };
+  }, [shouldMarquee, contentWidth, containerWidth, text, translateX]);
+
+  const handleContainerLayout = event => {
+    const nextWidth = Math.round(event?.nativeEvent?.layout?.width || 0);
+    setContainerWidth(prev => (prev === nextWidth ? prev : nextWidth));
+  };
+
+  const handleTextLayout = event => {
+    const nextWidth = Math.round(event?.nativeEvent?.layout?.width || 0);
+    setContentWidth(prev => (prev === nextWidth ? prev : nextWidth));
+  };
+
+  const textStyle = [
+    style,
+    {
+      color,
+      flex: undefined,
+      flexShrink: 0,
+      flexGrow: 0,
+    },
+    shouldMarquee ? {textAlign: 'left'} : {textAlign: 'center'},
+  ];
+
+  return React.createElement(
+    View,
+    {
+      testID,
+      style: {flex: 1, overflow: 'hidden', justifyContent: 'center'},
+      onLayout: handleContainerLayout,
+    },
+    React.createElement(
+      Animated.View,
+      {
+        style: {
+          flexDirection: 'row',
+          alignItems: 'center',
+          opacity,
+          transform: [{translateX}],
+          alignSelf: shouldMarquee ? 'flex-start' : 'stretch',
+        },
+      },
+      React.createElement(
+        Text,
+        {
+          numberOfLines: 1,
+          ellipsizeMode: 'clip',
+          onLayout: handleTextLayout,
+          style: textStyle,
+        },
+        text,
+      ),
+      shouldMarquee
+        ? React.createElement(
+            Text,
+            {
+              numberOfLines: 1,
+              ellipsizeMode: 'clip',
+              accessible: false,
+              importantForAccessibility: 'no',
+              style: [...textStyle, {marginLeft: GAP_PX}],
+            },
+            text,
+          )
+        : null,
+    ),
+  );
+};
+
+module.exports = RuntimeFooterMarqueeText;
+module.exports.default = RuntimeFooterMarqueeText;

package/src/react/components/RuntimeInfoFooter.js

@@ -21,6 +21,7 @@ import {
   getRuntimeFooterTextLines,
 } from '@controleonline/ui-common/src/react/utils/runtimeFooter';
 import styles from './RuntimeInfoFooter.styles';
+import RuntimeFooterMarqueeText from './RuntimeFooterMarqueeText';
 
 const ROTATION_INTERVAL_MS = 4000;
 const FADE_DURATION_MS = 260;
@@ -256,21 +257,17 @@ const RuntimeInfoFooter = ({
               ]}
             />
           </View>
-          <Animated.Text
-            numberOfLines={1}
-            ellipsizeMode="tail"
-            minimumFontScale={0.85}
-            style={[
-              styles.primaryText,
-              {
-                opacity: showDebugInfo ? 1 : fadeOpacity,
-              },
-              {
-                color: textColor,
-              },
-            ]}>
-            {showDebugInfo ? inlineText || primaryText || device?.id || '--' : displayedText}
-          </Animated.Text>
+          <RuntimeFooterMarqueeText
+            text={
+              showDebugInfo
+                ? inlineText || primaryText || device?.id || '--'
+                : displayedText
+            }
+            color={textColor}
+            opacity={showDebugInfo ? 1 : fadeOpacity}
+            style={styles.primaryText}
+            testID="runtime-footer-primary-text"
+          />
           <View style={styles.loadingWrap}>
             {hasStoreLoading && (
               <ActivityIndicator color={loadingColor} size="small" />

package/src/react/components/SystemErrorToast.js

@@ -1,29 +1,49 @@
-import React, {useMemo} from 'react';
-import {Text, View} from 'react-native';
-import Icon from 'react-native-vector-icons/MaterialIcons';
-
-import styles from './SystemErrorToast.styles';
-import {resolveSystemErrorMessage} from '@controleonline/ui-common/src/react/utils/systemErrorMessage';
-
-const SystemErrorToast = ({error}) => {
-  const message = useMemo(() => resolveSystemErrorMessage(error), [error]);
-
-  if (!message) {
-    return null;
-  }
-
-  return (
-    <View style={styles.container}>
-      <View style={styles.header}>
-        <View style={styles.iconWrap}>
-          <Icon name="error-outline" size={16} color="#DC2626" />
-        </View>
-      </View>
-      <View style={styles.copyWrap}>
-        <Text style={styles.text}>{message}</Text>
-      </View>
-    </View>
-  );
-};
-
-export default SystemErrorToast;
+import React, {useMemo} from 'react';
+import {Text, View} from 'react-native';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+import {useStore} from '@store';
+
+import createStyles from './SystemErrorToast.styles';
+import {resolveSystemErrorMessage} from '@controleonline/ui-common/src/react/utils/systemErrorMessage';
+
+const SystemErrorToast = ({error}) => {
+  const themeStore = useStore('theme');
+  const themeColors = themeStore?.getters?.colors || {};
+
+  const palette = useMemo(
+    () => ({
+      toastDangerBackground: themeColors.toastDangerBackground,
+      toastDangerBorder: themeColors.toastDangerBorder,
+      toastDangerIcon: themeColors.toastDangerIcon,
+      toastDangerText: themeColors.toastDangerText,
+    }),
+    [
+      themeColors.toastDangerBackground,
+      themeColors.toastDangerBorder,
+      themeColors.toastDangerIcon,
+      themeColors.toastDangerText,
+    ],
+  );
+
+  const styles = useMemo(() => createStyles(palette), [palette]);
+  const message = useMemo(() => resolveSystemErrorMessage(error), [error]);
+
+  if (!message) {
+    return null;
+  }
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.header}>
+        <View style={styles.iconWrap}>
+          <Icon name="error-outline" size={16} color={palette.toastDangerIcon} />
+        </View>
+      </View>
+      <View style={styles.copyWrap}>
+        <Text style={styles.text}>{message}</Text>
+      </View>
+    </View>
+  );
+};
+
+export default SystemErrorToast;

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

@@ -1,38 +1,43 @@
-import {StyleSheet} from 'react-native';
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    flexDirection: 'row',
-    alignItems: 'flex-start',
-    gap: 12,
-    paddingVertical: 2,
-  },
-  header: {
-    paddingTop: 1,
-  },
-  iconWrap: {
-    width: 26,
-    height: 26,
-    borderRadius: 13,
-    backgroundColor: '#FEE2E2',
-    alignItems: 'center',
-    justifyContent: 'center',
-    flexShrink: 0,
-    borderWidth: 1,
-    borderColor: '#FCA5A5',
-  },
-  copyWrap: {
-    flex: 1,
-    minWidth: 0,
-    paddingTop: 2,
-  },
-  text: {
-    color: '#111827',
-    fontSize: 13,
-    fontWeight: '700',
-    lineHeight: 20,
-  },
-});
-
-export default styles;
+import {StyleSheet} from 'react-native';
+
+/**
+ * Theme-aware styles for SystemErrorToast.
+ * Colors must come from themeStore.getters.colors (canonical tokens only).
+ */
+const createStyles = palette =>
+  StyleSheet.create({
+    container: {
+      flex: 1,
+      flexDirection: 'row',
+      alignItems: 'flex-start',
+      gap: 12,
+      paddingVertical: 2,
+    },
+    header: {
+      paddingTop: 1,
+    },
+    iconWrap: {
+      width: 26,
+      height: 26,
+      borderRadius: 13,
+      backgroundColor: palette.toastDangerBackground,
+      alignItems: 'center',
+      justifyContent: 'center',
+      flexShrink: 0,
+      borderWidth: 1,
+      borderColor: palette.toastDangerBorder,
+    },
+    copyWrap: {
+      flex: 1,
+      minWidth: 0,
+      paddingTop: 2,
+    },
+    text: {
+      color: palette.toastDangerText,
+      fontSize: 13,
+      fontWeight: '700',
+      lineHeight: 20,
+    },
+  });
+
+export default createStyles;