@controleonline/ui-common 1.2.70 → 1.2.71

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

@@ -1,110 +1,118 @@
-import {Platform, StyleSheet} from 'react-native';
-
-const withAlpha = (color, alphaHex) => {
-  const raw = String(color || '').trim().replace('#', '');
-  if (/^[0-9a-fA-F]{6}$/.test(raw)) {
-    return `#${raw}${alphaHex}`;
-  }
-
-  if (/^[0-9a-fA-F]{8}$/.test(raw)) {
-    return `#${raw.slice(0, 6)}${alphaHex}`;
-  }
-
-  return color || '#1B5587';
-};
-
-const createStyles = ({
-  primaryColor,
-  dockBackground,
-  borderColor,
-  inactiveText,
-  activeBg,
-  activeBorder,
-}) =>
-  StyleSheet.create({
-    host: {
-      position: Platform.OS === 'web' ? 'fixed' : 'absolute',
-      left: 0,
-      right: 0,
-      bottom: 0,
-      zIndex: 1000,
-      backgroundColor: 'transparent',
-      alignItems: 'stretch',
-    },
-    stack: {
-      width: '100%',
-      alignItems: 'stretch',
-    },
-    dock: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      minHeight: 64,
-      paddingHorizontal: 8,
-      paddingTop: 8,
-      paddingBottom: 8,
-      borderWidth: 1,
-      borderBottomWidth: 0,
-      borderColor,
-      borderTopLeftRadius: 24,
-      borderTopRightRadius: 24,
-      borderBottomLeftRadius: 0,
-      borderBottomRightRadius: 0,
-      backgroundColor: dockBackground,
-      overflow: 'hidden',
-      ...(Platform.OS === 'android'
-        ? {elevation: 10}
-        : {
-            shadowColor: '#0F172A',
-            shadowOpacity: 0.12,
-            shadowOffset: {width: 0, height: -6},
-            shadowRadius: 14,
-          }),
-    },
-    item: {
-      flex: 1,
-      minHeight: 44,
-      alignItems: 'center',
-      justifyContent: 'center',
-      paddingVertical: 6,
-      paddingHorizontal: 4,
-      borderWidth: 1,
-      borderColor: 'transparent',
-      borderRadius: 18,
-    },
-    itemActive: {
-      backgroundColor: activeBg,
-      borderColor: activeBorder,
-    },
-    itemPressed: {
-      opacity: 0.92,
-      transform: [{scale: 0.99}],
-    },
-    itemDisabled: {
-      opacity: 0.45,
-    },
-    iconWrap: {
-      width: 24,
-      height: 24,
-      borderRadius: 999,
-      alignItems: 'center',
-      justifyContent: 'center',
-      marginBottom: 4,
-      backgroundColor: 'transparent',
-    },
-    iconWrapActive: {
-      backgroundColor: withAlpha(primaryColor, '18'),
-    },
-    itemLabel: {
-      fontSize: 12,
-      fontWeight: '600',
-      color: inactiveText,
-      textAlign: 'center',
-    },
-    itemLabelActive: {
-      color: primaryColor,
-      fontWeight: '800',
-    },
-  });
-
-export default createStyles;
+import {Platform, StyleSheet} from 'react-native';
+
+const resolveWebShadowColor = shadowColor => {
+  if (typeof shadowColor !== 'string') {
+    return 'rgba(0, 0, 0, 0.12)';
+  }
+
+  const normalized = shadowColor.trim();
+  if (!normalized) {
+    return 'rgba(0, 0, 0, 0.12)';
+  }
+
+  if (/^#[0-9a-f]{3}$/i.test(normalized)) {
+    return `${normalized[0]}${normalized[1]}${normalized[1]}${normalized[2]}${normalized[2]}${normalized[3]}${normalized[3]}1f`;
+  }
+
+  if (/^#[0-9a-f]{6}$/i.test(normalized)) {
+    return `${normalized}1f`;
+  }
+
+  if (/^#[0-9a-f]{4}$/i.test(normalized) || /^#[0-9a-f]{8}$/i.test(normalized)) {
+    return normalized;
+  }
+
+  return normalized;
+};
+
+const createStyles = ({
+  activeBackground,
+  dockBackground,
+  dockBorder,
+  dockShadow,
+  activeBorder,
+  useModernWebChromeProps = false,
+}) =>
+  StyleSheet.create({
+    host: {
+      position: Platform.OS === 'web' ? 'fixed' : 'absolute',
+      left: 0,
+      right: 0,
+      bottom: 0,
+      zIndex: 1000,
+      backgroundColor: 'transparent',
+      alignItems: 'stretch',
+    },
+    hostPointerEventsBoxNone: {
+      pointerEvents: 'box-none',
+    },
+    stack: {
+      width: '100%',
+      alignItems: 'stretch',
+    },
+    dock: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      minHeight: 64,
+      paddingHorizontal: 8,
+      paddingTop: 8,
+      paddingBottom: 8,
+      borderWidth: 1,
+      borderBottomWidth: 0,
+      borderColor: dockBorder,
+      borderTopLeftRadius: 24,
+      borderTopRightRadius: 24,
+      borderBottomLeftRadius: 0,
+      borderBottomRightRadius: 0,
+      backgroundColor: dockBackground,
+      overflow: 'hidden',
+      ...(Platform.OS === 'android'
+        ? {elevation: 10}
+        : Platform.OS === 'web' && useModernWebChromeProps
+          ? {
+              boxShadow: `0px -6px 14px ${resolveWebShadowColor(dockShadow)}`,
+            }
+        : {
+            shadowColor: dockShadow,
+            shadowOpacity: 0.12,
+            shadowOffset: {width: 0, height: -6},
+            shadowRadius: 14,
+          }),
+    },
+    item: {
+      flex: 1,
+      minHeight: 44,
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingVertical: 6,
+      paddingHorizontal: 4,
+      borderWidth: 1,
+      borderColor: 'transparent',
+      borderRadius: 18,
+    },
+    itemActive: {
+      backgroundColor: activeBackground,
+      borderColor: activeBorder,
+    },
+    itemPressed: {
+      transform: [{scale: 0.99}],
+    },
+    itemDisabled: {},
+    iconWrap: {
+      width: 24,
+      height: 24,
+      borderRadius: 999,
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginBottom: 4,
+      backgroundColor: 'transparent',
+    },
+    itemLabel: {
+      fontSize: 12,
+      fontWeight: '600',
+      textAlign: 'center',
+    },
+  });
+
+export default createStyles;

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

@@ -21,9 +21,10 @@ import PrintService from '@controleonline/ui-common/src/react/components/PrintSe
 import RemoteCheckoutService from '@controleonline/ui-common/src/react/components/RemoteCheckoutService';
 import ProductCatalogCacheService from '@controleonline/ui-common/src/react/components/ProductCatalogCacheService';
 import RuntimeInfoFooter from '@controleonline/ui-common/src/react/components/RuntimeInfoFooter';
-import {isPublicRoute} from '@controleonline/ui-login/src/react/router/publicRoutes';
+import {isPublicRoute} from '../router/publicRoutes';
 import {api} from '@controleonline/ui-common/src/api';
-import {env as APP_ENV} from '@env';
+import {app_type} from '@appType';
+import { env as APP_ENV } from '@env';
 const {resolveConfiguredLanguage} = require('../utils/runtimeLanguage');
 import {
   applyPaletteToRuntimeColors,
@@ -46,9 +47,11 @@ import {
   filterWalletPaymentTypesByAllowedIds,
   resolveDevicePaymentTypeIds,
 } from '@controleonline/ui-common/src/react/utils/paymentDevices';
-import {normalizeRuntimeMenuResponse} from '@controleonline/ui-common/src/react/utils/runtimeMenu';
-import packageJson from '@package';
-import providerStyles from './DefaultProvider.styles';
+import {
+  normalizeRuntimeMenuResponse,
+} from '@controleonline/ui-common/src/react/utils/runtimeMenu';
+import packageJson from '@package';
+import providerStyles from './DefaultProvider.styles';
 
 import {useStore} from '@store';
 import stores from '@stores';
@@ -96,7 +99,7 @@ const resolveDeviceConfigPeopleIri = ({appType, currentCompany, user}) => {
 };
 
 export const DefaultProvider = ({children, onBootstrapReady}) => {
-  const appType = String(APP_ENV.APP_TYPE || '').toUpperCase();
+  const appType = String(app_type || '').toUpperCase();
   const isShopClientApp = appType === 'SHOP';
   const themeStore = useStore('theme');
   const getters = themeStore.getters;
@@ -148,7 +151,7 @@ export const DefaultProvider = ({children, onBootstrapReady}) => {
   const packageVersion = packageJson?.version || packageJson?.default?.version;
   const appVersion = packageVersion || device?.appVersion;
   const runtimeDeviceType = resolveOperationalDeviceType({
-    appType: APP_ENV.APP_TYPE,
+    appType: app_type,
     deviceInfo: device || {},
   });
   const deviceConfigPeopleIri = resolveDeviceConfigPeopleIri({
@@ -281,7 +284,7 @@ export const DefaultProvider = ({children, onBootstrapReady}) => {
     let ld = null;
     if (uniqueId) {
       ld = buildLocalRuntimeDevice({
-        appType: APP_ENV.APP_TYPE,
+        appType: app_type,
         deviceInfo: {
           id: uniqueId,
           appName: appName,
@@ -368,7 +371,7 @@ export const DefaultProvider = ({children, onBootstrapReady}) => {
         Array.isArray(items) && items.length > 0 ? items[0] : null;
       const nextDevice = buildDeviceRegistrationPayload({
         deviceInfo: device,
-        appType: APP_ENV.APP_TYPE,
+        appType: app_type,
         existingDevice,
       });
 
@@ -700,7 +703,6 @@ export const DefaultProvider = ({children, onBootstrapReady}) => {
     );
     setTranslateReady(true);
     global.refreshTranslationsUI?.();
-    global.t.discoveryAll().catch(() => {});
   }, [
     companies,
     currentCompany,
@@ -720,20 +722,52 @@ export const DefaultProvider = ({children, onBootstrapReady}) => {
   }, [isLogged, translateReady, hasCurrentCompany, onBootstrapReady]);
 
 
-  useEffect(() => {
-    if (
-      device &&
-      device.id &&
-      isLogged
-    ) {
-      peopleActions.myCompanies();
-    }
-  }, [isLogged, device?.id]);
-
-  useEffect(() => {
-    const fetchColors = async () => {
-      const appDomain = resolveAppDomain(APP_ENV.DOMAIN);
-      const params = appDomain ? {'app-domain': appDomain} : undefined;
+  useEffect(() => {
+    if (
+      device &&
+      device.id &&
+      isLogged
+    ) {
+      peopleActions.myCompanies();
+    }
+  }, [isLogged, device?.id]);
+
+  useEffect(() => {
+    if (!isLogged || !currentCompany?.id) {
+      actions.setMenus([]);
+      return undefined;
+    }
+
+    let cancelled = false;
+
+    api
+      .fetch('menus-people', {
+        params: {
+          myCompany: currentCompany.id,
+          appType,
+          menuType: 'home',
+        },
+      })
+      .then(result => {
+        if (!cancelled) {
+          actions.setMenus(normalizeRuntimeMenuResponse(result, {appType}));
+        }
+      })
+      .catch(() => {
+        if (!cancelled) {
+          actions.setMenus(normalizeRuntimeMenuResponse(null, {appType}));
+        }
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [actions, appType, currentCompany?.id, isLogged]);
+
+  useEffect(() => {
+    const fetchColors = async () => {
+      const appDomain = resolveAppDomain(APP_ENV.DOMAIN);
+      const params = appDomain ? {'app-domain': appDomain} : undefined;
 
       try {
         const cssText = await api.fetch('themes-colors.css', {
@@ -748,46 +782,14 @@ export const DefaultProvider = ({children, onBootstrapReady}) => {
       }
     };
 
-    if (device?.id) {
-      fetchColors();
-    }
-  }, [actions, currentCompany?.id, defaultCompany?.id, device?.id]);
-
-  useEffect(() => {
-    if (!isLogged || !currentCompany?.id || !appType) {
-      actions.setMenus([]);
-      return;
-    }
-
-    let cancelled = false;
-
-    api
-      .fetch('menus-people', {
-        params: {
-          myCompany: currentCompany.id,
-          appType,
-          menuType: 'home',
-        },
-      })
-      .then(result => {
-        if (!cancelled) {
-          actions.setMenus(normalizeRuntimeMenuResponse(result, {appType}));
-        }
-      })
-      .catch(() => {
-        if (!cancelled) {
-          actions.setMenus(normalizeRuntimeMenuResponse(null, {appType}));
-        }
-      });
-
-    return () => {
-      cancelled = true;
-    };
-  }, [actions, appType, currentCompany?.id, isLogged]);
-
-  useEffect(() => {
-    const companyThemeColors =
-      currentCompany?.theme?.colors || defaultCompany?.theme?.colors || {};
+    if (device?.id) {
+      fetchColors();
+    }
+  }, [actions, currentCompany?.id, defaultCompany?.id, device?.id]);
+
+  useEffect(() => {
+    const companyThemeColors =
+      currentCompany?.theme?.colors || defaultCompany?.theme?.colors || {};
     const mergedThemeColors = {
       ...(baseThemeColors || {}),
       ...(companyThemeColors || {}),
@@ -822,8 +824,8 @@ export const DefaultProvider = ({children, onBootstrapReady}) => {
                   defaultCompany={defaultCompany}
                   device={device}
                   colors={colors}
-                />
-              )}
+                />
+              )}
             </View>
             {!isShopClientApp && (
               <>

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

@@ -17,8 +17,9 @@ import ProductCatalogCacheService from '@controleonline/ui-common/src/react/comp
 import RuntimeInfoFooter from '@controleonline/ui-common/src/react/components/RuntimeInfoFooter';
 import { useStore } from '@store';
 import { api } from '@controleonline/ui-common/src/api';
+import {app_type} from '@appType';
 import { env as APP_ENV } from '@env';
-import { isPublicRoute } from '@controleonline/ui-login/src/react/router/publicRoutes';
+import { isPublicRoute } from '../router/publicRoutes';
 const { resolveConfiguredLanguage } = require('../utils/runtimeLanguage');
 import {
   applyPaletteToRuntimeColors,
@@ -42,7 +43,9 @@ import {
   filterWalletPaymentTypesByAllowedIds,
   resolveDevicePaymentTypeIds,
 } from '@controleonline/ui-common/src/react/utils/paymentDevices';
-import {normalizeRuntimeMenuResponse} from '@controleonline/ui-common/src/react/utils/runtimeMenu';
+import {
+  normalizeRuntimeMenuResponse,
+} from '@controleonline/ui-common/src/react/utils/runtimeMenu';
 import stores from '@stores';
 import packageJson from '@package';
 import providerStyles from './DefaultProvider.styles';
@@ -142,7 +145,7 @@ const selectRuntimeDeviceConfig = ({
 };
 
 export const DefaultProvider = ({ children, onBootstrapReady }) => {
-  const appType = String(APP_ENV.APP_TYPE || '').toUpperCase();
+  const appType = String(app_type || '').toUpperCase();
   const isShopClientApp = appType === 'SHOP';
   const themeStore = useStore('theme');
   const getters = themeStore.getters;
@@ -205,7 +208,7 @@ export const DefaultProvider = ({ children, onBootstrapReady }) => {
   const packageVersion = packageJson?.version || packageJson?.default?.version;
   const appVersion = packageVersion || device?.appVersion;
   const runtimeDeviceType = resolveOperationalDeviceType({
-    appType: APP_ENV.APP_TYPE,
+    appType: app_type,
     deviceInfo: device || {},
   });
   const deviceConfigPeopleIri = resolveDeviceConfigPeopleIri({
@@ -360,7 +363,7 @@ export const DefaultProvider = ({ children, onBootstrapReady }) => {
       'Web App';
 
     return buildLocalRuntimeDevice({
-      appType: APP_ENV.APP_TYPE,
+      appType: app_type,
       deviceInfo: {
         id: webDeviceId,
         appName: nextAppName,
@@ -437,7 +440,7 @@ export const DefaultProvider = ({ children, onBootstrapReady }) => {
         Array.isArray(items) && items.length > 0 ? items[0] : null;
       const nextDevice = buildDeviceRegistrationPayload({
         deviceInfo: device,
-        appType: APP_ENV.APP_TYPE,
+        appType: app_type,
         existingDevice,
       });
 
@@ -769,7 +772,6 @@ export const DefaultProvider = ({ children, onBootstrapReady }) => {
     );
     setTranslateReady(true);
     global.refreshTranslationsUI?.();
-    global.t.discoveryAll().catch(() => {});
   }, [
     companies,
     currentCompany,
@@ -787,37 +789,16 @@ export const DefaultProvider = ({ children, onBootstrapReady }) => {
     }
   }, [isLogged, translateReady, hasCurrentCompany, onBootstrapReady]);
 
-  useEffect(() => {
-    if (device && device.id && isLogged) {
-      peopleActions.myCompanies();
-    }
-  }, [isLogged, device?.id]);
-
   useEffect(() => {
-    const fetchColors = async () => {
-      const appDomain = resolveAppDomain(APP_ENV.DOMAIN);
-      const params = appDomain ? { 'app-domain': appDomain } : undefined;
-
-      try {
-        const cssText = await api.fetch('themes-colors.css', {
-          responseType: 'text',
-          params,
-        });
-        const parsedColors = parseThemeCss(cssText);
-        setBaseThemeColors(parsedColors);
-        actions.setColors(parsedColors);
-      } catch {
-        setBaseThemeColors({});
-      }
-    };
-
-    fetchColors();
-  }, [actions, currentCompany?.id, defaultCompany?.id, device?.id]);
+    if (device && device.id && isLogged) {
+      peopleActions.myCompanies();
+    }
+  }, [isLogged, device?.id]);
 
   useEffect(() => {
-    if (!isLogged || !currentCompany?.id || !appType) {
+    if (!isLogged || !currentCompany?.id) {
       actions.setMenus([]);
-      return;
+      return undefined;
     }
 
     let cancelled = false;
@@ -846,6 +827,27 @@ export const DefaultProvider = ({ children, onBootstrapReady }) => {
     };
   }, [actions, appType, currentCompany?.id, isLogged]);
 
+  useEffect(() => {
+    const fetchColors = async () => {
+      const appDomain = resolveAppDomain(APP_ENV.DOMAIN);
+      const params = appDomain ? { 'app-domain': appDomain } : undefined;
+
+      try {
+        const cssText = await api.fetch('themes-colors.css', {
+          responseType: 'text',
+          params,
+        });
+        const parsedColors = parseThemeCss(cssText);
+        setBaseThemeColors(parsedColors);
+        actions.setColors(parsedColors);
+      } catch {
+        setBaseThemeColors({});
+      }
+    };
+
+    fetchColors();
+  }, [actions, currentCompany?.id, defaultCompany?.id, device?.id]);
+
   useEffect(() => {
     const companyThemeColors = isShopClientApp
       ? defaultCompany?.theme?.colors || {}
@@ -883,14 +885,14 @@ export const DefaultProvider = ({ children, onBootstrapReady }) => {
             },
           ]}>
           <View style={providerStyles.content}>{children}</View>
-        {!isShopClientApp && bottomNavigationCount === 0 && (
-          <RuntimeInfoFooter
-            appVersion={appVersion}
-            defaultCompany={defaultCompany}
-            device={device}
-            colors={colors}
-          />
-        )}
+              {!isShopClientApp && bottomNavigationCount === 0 && (
+                <RuntimeInfoFooter
+                  appVersion={appVersion}
+                  defaultCompany={defaultCompany}
+                  device={device}
+                  colors={colors}
+                />
+              )}
       </View>
       {!isShopClientApp && device?.id && isLogged && (
         <>

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

@@ -1,7 +1,7 @@
 import React, {useCallback, useEffect, 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} from '@controleonline/ui-common/src/react/utils/managerOrderNotifications';
 import {queueNotificationNavigation} from '@controleonline/ui-common/src/react/utils/notificationNavigation';
@@ -86,7 +86,7 @@ const DeliveryPushBridge = ({device, setDevice}) => {
   const deviceActions = deviceStore.actions;
 
   const {isLogged, sessionChecked} = authGetters;
-  const isDeliveryRuntime = isDeliveryRuntimeAppType(APP_ENV?.APP_TYPE);
+  const isDeliveryRuntime = isDeliveryRuntimeAppType(app_type);
 
   const currentDeviceRef = useRef(device || {});
   const pushTokenListenerRef = useRef(null);

package/src/react/components/DeviceAlertSoundService.js

@@ -9,7 +9,7 @@ import React, {useCallback, useEffect, useMemo, useRef} from 'react';
 import {createAudioPlayer} from 'expo-audio';
 import {NativeModules, Platform} from 'react-native';
 import {useStore, useStores} from '@store';
-import {env as APP_ENV} from '@env';
+import {app_type} from '@appType';
 import {api} from '@controleonline/ui-common/src/api';
 import Formatter from '@controleonline/ui-common/src/utils/formatter';
 import {
@@ -18,7 +18,7 @@ import {
   isTruthyValue,
   parseConfigsObject,
 } from '@controleonline/ui-common/src/react/config/deviceConfigBootstrap';
-import {resolveOrderIdentity} from '@controleonline/ui-orders/src/react/utils/orderIdentity';
+import {resolveOrderIdentity} from '../utils/orderIdentity';
 import {
   isManagerAppType,
   resolveManagerFinancialNotificationPreferences,
@@ -188,7 +188,7 @@ const DeviceAlertSoundService = () => {
     [user],
   );
 
-  const isManagerRuntime = isManagerAppType(APP_ENV?.APP_TYPE);
+  const isManagerRuntime = isManagerAppType(app_type);
   const currentCompanyId = normalizeEntityId(currentCompany?.id);
   const managerPushEnabled =
     isManagerRuntime && managerOrderNotificationPreferences.pushEnabled;

package/src/react/components/KioskModeBridge.js

@@ -1,6 +1,6 @@
 import React, {useEffect, useMemo, useRef} from 'react';
 import {AppState, BackHandler, NativeModules, Platform} from 'react-native';
-import {env as APP_ENV} from '@env';
+import {app_type} from '@appType';
 import {useStore} from '@store';
 import {shouldEnableAndroidKioskMode} from '@controleonline/ui-common/src/react/config/deviceConfigBootstrap';
 
@@ -11,7 +11,7 @@ const KioskModeBridge = ({appState = AppState.currentState || 'active'}) => {
   const {item: runtimeDeviceConfig} = deviceConfigStore.getters;
   const lastRequestedStateRef = useRef(null);
   const lastActiveAppStateRef = useRef(appState);
-  const appType = String(APP_ENV.APP_TYPE || '').trim().toUpperCase();
+  const appType = String(app_type || '').trim().toUpperCase();
   const kioskEnabled = useMemo(
     () =>
       shouldEnableAndroidKioskMode({

package/src/react/components/LauncherModeBridge.js

@@ -1,6 +1,6 @@
 import React, {useEffect, useMemo, useRef} from 'react';
 import {AppState, NativeModules, Platform} from 'react-native';
-import {env as APP_ENV} from '@env';
+import {app_type} from '@appType';
 import {useStore} from '@store';
 import {shouldEnableAndroidLauncherMode} from '@controleonline/ui-common/src/react/config/deviceConfigBootstrap';
 
@@ -11,7 +11,7 @@ const LauncherModeBridge = ({appState = AppState.currentState || 'active'}) => {
   const {item: runtimeDeviceConfig} = deviceConfigStore.getters;
   const lastRequestedStateRef = useRef(null);
   const lastActiveAppStateRef = useRef(appState);
-  const appType = String(APP_ENV.APP_TYPE || '').trim().toUpperCase();
+  const appType = String(app_type || '').trim().toUpperCase();
   const launcherEnabled = useMemo(
     () =>
       shouldEnableAndroidLauncherMode({