@controleonline/ui-common 1.2.70 → 1.2.71

package/src/react/components/ManagerPushBridge.native.js

@@ -1,7 +1,7 @@
 import React, {useCallback, useEffect, useMemo, useRef} from 'react';
 import {Platform} from 'react-native';
 import * as Notifications from 'expo-notifications';
-import {env as APP_ENV} from '@env';
+import {app_type} from '@appType';
 import {useStore} from '@store';
 import {
   ensureManagerOrderNotificationPermission,
@@ -93,7 +93,7 @@ const ManagerPushBridge = ({device, setDevice}) => {
   const deviceActions = deviceStore.actions;
 
   const {isLogged, sessionChecked, user} = authGetters;
-  const isManagerRuntime = isManagerAppType(APP_ENV?.APP_TYPE);
+  const isManagerRuntime = isManagerAppType(app_type);
   const pushPreferences = useMemo(
     () => resolveManagerOrderNotificationPreferences(user),
     [user],

package/src/react/components/RemoteCheckoutService.js

@@ -2,17 +2,18 @@ import React, {useEffect, useCallback, useRef} from 'react';
 
 import {api} from '@controleonline/ui-common/src/api';
 import Formatter from '@controleonline/ui-common/src/utils/formatter';
+import {
+  createInvoiceForGatewayFreePayment,
+  isGatewayFreePayment,
+} from '@controleonline/ui-common/src/react/utils/cashPayment';
+import {
+  normalizeGatewayPaymentError,
+  runConfiguredGatewayPayment,
+} from '../services/paymentGatewayExecution';
 import {
-  createInvoiceForGatewayFreePayment,
-  isGatewayFreePayment,
-} from '@controleonline/ui-common/src/react/utils/cashPayment';
-import {
-  normalizeGatewayPaymentError,
-  runConfiguredGatewayPayment,
-} from '@controleonline/ui-common/src/react/utils/paymentGatewayExecution';
-import {
-  buildRemotePaymentResultMessage,
-  isRemotePaymentRequestMessage,
+  buildRemotePaymentResultMessage,
+  isRemotePaymentCancellation,
+  isRemotePaymentRequestMessage,
   normalizeRemotePaymentRequestKey,
 } from '@controleonline/ui-common/src/react/utils/remotePayment';
 
@@ -255,16 +256,23 @@ const Checkout = () => {
           paidAmount,
           status: 'success',
         });
-      } catch (error) {
-        const errorMessage = normalizeGatewayPaymentError(
-          error,
-          'Nao foi possivel concluir o pagamento remoto.',
-        );
-        invoiceActions.setError(errorMessage);
-        await sendRemoteResult({
-          error: errorMessage,
-          status: 'error',
-        });
+      } catch (error) {
+        const errorMessage = normalizeGatewayPaymentError(
+          error,
+          'Nao foi possivel concluir o pagamento remoto.',
+        );
+        const wasCanceled = isRemotePaymentCancellation({
+          status: error?.status,
+          error: errorMessage,
+        });
+
+        if (!wasCanceled) {
+          invoiceActions.setError(errorMessage);
+        }
+        await sendRemoteResult({
+          error: errorMessage,
+          status: wasCanceled ? 'canceled' : 'error',
+        });
       } finally {
         clear();
         processingMessageKeyRef.current = '';

package/src/react/components/RuntimeBottomNavigationBar.js

@@ -1,28 +1,27 @@
-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 {env as APP_ENV} from '@env';
-import {colors as runtimeColors} from '@controleonline/../../src/styles/colors';
-import {resolveThemePalette} from '@controleonline/../../src/styles/branding';
-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 {
+  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 || ''));
+};
+
 const RuntimeBottomNavigationBar = ({
   activeRouteName: activeRouteNameProp,
   colors: colorsOverride,
@@ -31,14 +30,15 @@ const RuntimeBottomNavigationBar = ({
   itemMapper,
   menuType = 'toolbar',
   navigation,
-  presetKey,
-  routeAliases: routeAliasesProp,
-  testID = 'bottom-navigation',
-}) => {
-  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 || {};
@@ -48,7 +48,7 @@ const RuntimeBottomNavigationBar = ({
   const [runtimeMenus, setRuntimeMenus] = useState([]);
   const preset = presetKey ? getBottomNavigationPreset(presetKey) : null;
   const routeAliases = routeAliasesProp || preset?.routeAliases || {};
-  const appType = normalizeAppType(APP_ENV.APP_TYPE);
+  const appType = normalizeAppType(app_type);
 
   useEffect(() => {
     if (!currentCompany?.id || !menuType) {
@@ -56,96 +56,123 @@ const RuntimeBottomNavigationBar = ({
       return undefined;
     }
 
-    let cancelled = false;
-    setRuntimeMenus([]);
+    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,
+          )
+        : [];
 
-    api
-      .fetch('menus-people', {
-        params: {
-          myCompany: currentCompany.id,
-          appType,
-          menuType,
+      setRuntimeMenus([
+        {
+          id: presetKey || 'runtime-bottom-navigation',
+          label: preset?.label || presetKey || '',
+          icon: preset?.icon || '',
+          menus: presetMenus,
         },
-      })
-      .then(result => {
-        if (!cancelled) {
-          setRuntimeMenus(
-            normalizeRuntimeMenuResponse(result, {
-              appType,
-              allowFallback: false,
-            }),
-          );
-        }
-      })
-      .catch(() => {
-        if (!cancelled) {
-          setRuntimeMenus([]);
-        }
-      });
-
-    return () => {
-      cancelled = true;
-    };
-  }, [appType, currentCompany?.id, menuType]);
-
-  const colors = useMemo(() => {
-    if (colorsOverride) {
-      return colorsOverride;
+      ]);
+      return undefined;
     }
 
-    return resolveThemePalette(
-      {
-        ...themeColors,
-        ...(currentCompany?.theme?.colors || {}),
-      },
-      runtimeColors,
-    );
-  }, [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}
-    />
-  );
-};
-
-export default RuntimeBottomNavigationBar;
+    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;

package/src/react/components/RuntimeInfoFooter.js

@@ -2,7 +2,6 @@ import React, {useEffect, useMemo, useState} from 'react';
 import {ActivityIndicator, Text, View, useWindowDimensions} from 'react-native';
 import {useStore, useStores} from '@store';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
-import {colors as runtimeColors} from '@controleonline/../../src/styles/colors';
 import {
   DEVICE_RUNTIME_DEBUG_INFO_ENABLED_KEY,
   isTruthyValue,
@@ -19,7 +18,13 @@ const ROTATION_INTERVAL_MS = 6000;
 const COMPACT_BREAKPOINT = 720;
 const MAX_INLINE_TEXT_LENGTH = 84;
 
-const RuntimeInfoFooter = ({appVersion, defaultCompany, device, colors}) => {
+const RuntimeInfoFooter = ({
+  appVersion,
+  defaultCompany,
+  device,
+  colors,
+  useModernWebChromeProps = false,
+}) => {
   const {width} = useWindowDimensions();
   const insets = useSafeAreaInsets();
   const [activeIndex, setActiveIndex] = useState(0);
@@ -110,7 +115,26 @@ const RuntimeInfoFooter = ({appVersion, defaultCompany, device, colors}) => {
     () => footerEntries.flatMap(entry => entry?.lines || []),
     [footerEntries],
   );
-  const socketIndicatorColor = socketEntry?.indicatorColor;
+  const socketIndicatorColor = useMemo(() => {
+    const indicatorTone = String(socketEntry?.indicatorTone || '').trim();
+    if (!indicatorTone) {
+      return undefined;
+    }
+
+    if (indicatorTone === 'success') {
+      return colors?.success;
+    }
+
+    if (indicatorTone === 'warning') {
+      return colors?.warning;
+    }
+
+    if (indicatorTone === 'error') {
+      return colors?.error;
+    }
+
+    return undefined;
+  }, [colors?.error, colors?.success, colors?.warning, socketEntry?.indicatorTone]);
   const hasStoreLoading = useMemo(
     () =>
       Object.values(allStores || {}).some(
@@ -140,15 +164,19 @@ const RuntimeInfoFooter = ({appVersion, defaultCompany, device, colors}) => {
   if (entries.length === 0 && !showDebugInfo) {
     return null;
   }
-
+
   const displayedText = shouldRotate ? entries[activeIndex] : inlineText;
-  const backgroundColor = colors?.background || runtimeColors.background;
-  const borderColor = colors?.border || runtimeColors.border;
-  const textColor = colors?.textSecondary || runtimeColors.textSecondary;
-  const loadingColor = colors?.primary || runtimeColors.primary || textColor;
+  const backgroundColor = colors?.footerBackground;
+  const borderColor = colors?.footerBorder;
+  const textColor = colors?.footerText;
+  const loadingColor = colors?.footerLink;
+  const shellProps = useModernWebChromeProps ? {} : {pointerEvents: 'none'};
+  const shellStyle = useModernWebChromeProps
+    ? [styles.shell, {pointerEvents: 'none'}]
+    : styles.shell;
 
   return (
-    <View pointerEvents="none" style={styles.shell}>
+    <View {...shellProps} style={shellStyle}>
       <View
         testID="runtime-info-footer"
         style={[