@controleonline/ui-common 1.2.70 → 1.2.75

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

@@ -17,15 +17,19 @@ 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 { env as APP_ENV } from '@env';
-import { isPublicRoute } from '@controleonline/ui-login/src/react/router/publicRoutes';
-const { resolveConfiguredLanguage } = require('../utils/runtimeLanguage');
+import {app_type} from '@appType';
+import {env as APP_ENV} from '@env';
+import { isPublicRoute } from '../router/publicRoutes';
+const {
+  buildTranslationBootstrapKey,
+  isTranslationBootstrapReady,
+  resolveConfiguredLanguage,
+} = require('../utils/runtimeLanguage');
 import {
   applyPaletteToRuntimeColors,
   applyThemeCssVariables,
   resolveThemePalette,
 } from '@controleonline/../../src/styles/branding';
-import { resolveAppDomain } from '@controleonline/ui-common/src/utils/appDomain';
 import { colors as runtimeColors } from '@controleonline/../../src/styles/colors';
 import {
   buildProviderManagedDeviceConfigs,
@@ -42,7 +46,12 @@ 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 {
+  buildRuntimeZoomStyle,
+} from '@controleonline/ui-common/src/react/utils/runtimeZoom';
 import stores from '@stores';
 import packageJson from '@package';
 import providerStyles from './DefaultProvider.styles';
@@ -140,9 +149,13 @@ const selectRuntimeDeviceConfig = ({
     })
     .sort((left, right) => Number(right?.id || 0) - Number(left?.id || 0))[0] || null;
 };
-
-export const DefaultProvider = ({ children, onBootstrapReady }) => {
-  const appType = String(APP_ENV.APP_TYPE || '').toUpperCase();
+
+export const DefaultProvider = ({
+  children,
+  currentRouteName = '',
+  onBootstrapReady,
+}) => {
+  const appType = String(app_type || '').toUpperCase();
   const isShopClientApp = appType === 'SHOP';
   const themeStore = useStore('theme');
   const getters = themeStore.getters;
@@ -183,17 +196,20 @@ export const DefaultProvider = ({ children, onBootstrapReady }) => {
   const hasCurrentCompany =
     !!currentCompany && Object.entries(currentCompany).length > 0;
 
-  const [translateReady, setTranslateReady] = useState(true);
+  const [translateReady, setTranslateReady] = useState(false);
+  const [activeTranslateBootstrapKey, setActiveTranslateBootstrapKey] =
+    useState('');
   const [deviceConfigFetched, setDeviceConfigFetched] = useState(false);
   const [mainConfigsDiscovered, setMainConfigsDiscovered] = useState(false);
   const [deviceRuntimeConfigSynced, setDeviceRuntimeConfigSynced] =
     useState(false);
-  const [currentRouteName, setCurrentRouteName] = useState('');
   const [, setTranslateVersion] = useState(0);
   const [baseThemeColors, setBaseThemeColors] = useState({});
   const [bottomNavigationCount, setBottomNavigationCount] = useState(0);
   const translateBootstrapKeyRef = useRef('');
   const lastDeviceConfigPeopleIriRef = useRef('');
+  const walletPaymentTypeRequestRef = useRef({key: '', promise: null});
+  const walletPaymentTypeLoadedKeyRef = useRef('');
   const [device, setDevice] = useState(
     JSON.parse(localStorage.getItem('device') || '{}'),
   );
@@ -205,15 +221,51 @@ 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 runtimeUiScaleStyle = useMemo(
+    () => buildRuntimeZoomStyle(APP_ENV?.ZOOM, {isWeb: true}),
+    [],
+  );
   const deviceConfigPeopleIri = resolveDeviceConfigPeopleIri({
     appType,
     currentCompany,
     user,
   });
   const isPublicRouteActive = isPublicRoute(currentRouteName);
+  const currentTranslationConfig = JSON.parse(
+    localStorage.getItem('config') || '{}',
+  );
+  const currentTranslationSession = JSON.parse(
+    localStorage.getItem('session') || '{}',
+  );
+  const configuredTranslationLanguage = resolveConfiguredLanguage({
+    currentCompany,
+    defaultCompany,
+    currentConfig: currentTranslationConfig,
+    sessionData: currentTranslationSession,
+  });
+  const expectedTranslateBootstrapKey = isLogged && hasCurrentCompany
+    ? buildTranslationBootstrapKey({
+        language: configuredTranslationLanguage,
+        currentCompanyId: normalizeEntityId(currentCompany?.id),
+        defaultCompanyId: normalizeEntityId(defaultCompany?.id),
+      })
+    : '';
+  const requiresTranslateBootstrap = Boolean(
+    isLogged &&
+      hasCurrentCompany &&
+      currentRouteName &&
+      !isPublicRouteActive,
+  );
+  const isTranslateBootstrapReady = isTranslationBootstrapReady({
+    activeKey: activeTranslateBootstrapKey,
+    expectedKey: expectedTranslateBootstrapKey,
+    required: requiresTranslateBootstrap,
+    ready: translateReady,
+    translator: global.t,
+  });
 
   const registerBottomNavigation = useCallback(() => {
     setBottomNavigationCount(current => current + 1);
@@ -271,30 +323,13 @@ export const DefaultProvider = ({ children, onBootstrapReady }) => {
     };
   }, []);
 
-  useEffect(() => {
-    global.setRuntimeRouteName = routeName => {
-      const normalizedRouteName = String(routeName || '').trim();
-
-      setCurrentRouteName(previousRouteName =>
-        previousRouteName === normalizedRouteName
-          ? previousRouteName
-          : normalizedRouteName,
-      );
-    };
-
-    return () => {
-      if (global.setRuntimeRouteName) {
-        delete global.setRuntimeRouteName;
-      }
-    };
-  }, []);
-
   useEffect(() => {
     if (isLogged && !isPublicRouteActive) {
       return;
     }
 
     setTranslateReady(true);
+    setActiveTranslateBootstrapKey('');
     translateBootstrapKeyRef.current = '';
     translateActions.setMessages({});
     translateActions.setPendingMessages?.({});
@@ -302,7 +337,7 @@ export const DefaultProvider = ({ children, onBootstrapReady }) => {
     if (global.t) {
       delete global.t;
     }
-  }, [isLogged, isPublicRouteActive]);
+  }, [isLogged, isPublicRouteActive, translateActions]);
 
   useEffect(() => {
     if (
@@ -360,7 +395,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 +472,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,
       });
 
@@ -523,18 +558,45 @@ export const DefaultProvider = ({ children, onBootstrapReady }) => {
       : device_config?.configs;
 
     if (!currentCompany?.id || !paymentConfigSource) {
+      walletPaymentTypeRequestRef.current = {key: '', promise: null};
+      walletPaymentTypeLoadedKeyRef.current = '';
       paymentTypeActions.setItems([]);
       return;
     }
 
+    const paymentTypeSignature = resolveDevicePaymentTypeIds(paymentConfigSource)
+      .sort()
+      .join(',');
+    const requestKey = `${currentCompany.id}:${paymentTypeSignature}`;
+
+    if (walletPaymentTypeLoadedKeyRef.current === requestKey) {
+      return;
+    }
+
+    const existingRequestPromise =
+      walletPaymentTypeRequestRef.current.key === requestKey &&
+      walletPaymentTypeRequestRef.current.promise
+        ? walletPaymentTypeRequestRef.current.promise
+        : null;
+
     let isMounted = true;
 
-    api
-      .fetch('wallet_payment_types', {
-        params: {
-          people: `/people/${currentCompany.id}`,
-        },
-      })
+    const requestPromise =
+      existingRequestPromise ||
+      api.fetch('wallet_payment_types', {
+          params: {
+            people: `/people/${currentCompany.id}`,
+          },
+        });
+
+    if (!existingRequestPromise) {
+      walletPaymentTypeRequestRef.current = {
+        key: requestKey,
+        promise: requestPromise,
+      };
+    }
+
+    requestPromise
       .then(response => {
         if (!isMounted) {
           return;
@@ -558,11 +620,20 @@ export const DefaultProvider = ({ children, onBootstrapReady }) => {
             allowedPaymentTypeIds,
           ),
         );
+        walletPaymentTypeLoadedKeyRef.current = requestKey;
       })
       .catch(() => {
         if (isMounted) {
           paymentTypeActions.setItems([]);
         }
+      })
+      .finally(() => {
+        if (
+          walletPaymentTypeRequestRef.current.key === requestKey &&
+          walletPaymentTypeRequestRef.current.promise === requestPromise
+        ) {
+          walletPaymentTypeRequestRef.current = {key: '', promise: null};
+        }
       });
 
     return () => {
@@ -710,56 +781,48 @@ export const DefaultProvider = ({ children, onBootstrapReady }) => {
   }, [currentCompany, isLogged, mainConfigsDiscovered]);
 
   useEffect(() => {
-    if (
-      !currentRouteName ||
-      isPublicRouteActive
-    ) {
+    if (!currentRouteName || isPublicRouteActive) {
       return;
     }
 
     if (
       !isLogged ||
-      Object.entries(currentCompany).length === 0 ||
-      !deviceConfigFetched
+      !hasCurrentCompany ||
+      !deviceConfigFetched ||
+      !expectedTranslateBootstrapKey
     ) {
       return;
     }
 
     const currentConfig = JSON.parse(localStorage.getItem('config') || '{}');
-    const sessionData = JSON.parse(localStorage.getItem('session') || '{}');
-    const currentCompanyId = normalizeEntityId(currentCompany?.id);
-    const defaultCompanyId = normalizeEntityId(defaultCompany?.id);
-    const configuredLanguage = resolveConfiguredLanguage({
-      currentCompany,
-      defaultCompany,
-      currentConfig,
-      sessionData,
-    });
-    const nextTranslateBootstrapKey = [
-      configuredLanguage,
-      currentCompanyId,
-      defaultCompanyId,
-    ].join('::');
-
-    if (translateBootstrapKeyRef.current === nextTranslateBootstrapKey) {
-      if (global.t) {
-        global.t.companies = companies;
-        global.t.currentCompany = currentCompany;
-        global.t.defaultCompany = defaultCompany;
-      }
+
+    if (
+      translateBootstrapKeyRef.current === expectedTranslateBootstrapKey &&
+      global.t
+    ) {
+      global.t.companies = companies;
+      global.t.currentCompany = currentCompany;
+      global.t.defaultCompany = defaultCompany;
+      setActiveTranslateBootstrapKey(expectedTranslateBootstrapKey);
+      setTranslateReady(true);
 
       return;
     }
 
-    if (currentConfig.language !== configuredLanguage) {
-      const nextConfig = { ...currentConfig, language: configuredLanguage };
+    setTranslateReady(false);
+
+    if (currentConfig.language !== configuredTranslationLanguage) {
+      const nextConfig = {
+        ...currentConfig,
+        language: configuredTranslationLanguage,
+      };
       localStorage.setItem(
         'config',
         JSON.stringify(nextConfig),
       );
     }
 
-    translateBootstrapKeyRef.current = nextTranslateBootstrapKey;
+    translateBootstrapKeyRef.current = expectedTranslateBootstrapKey;
     global.t = new Translate(
       companies,
       defaultCompany,
@@ -767,57 +830,49 @@ export const DefaultProvider = ({ children, onBootstrapReady }) => {
       Object.keys(stores),
       translateStore,
     );
+    setActiveTranslateBootstrapKey(expectedTranslateBootstrapKey);
     setTranslateReady(true);
     global.refreshTranslationsUI?.();
-    global.t.discoveryAll().catch(() => {});
   }, [
     companies,
+    configuredTranslationLanguage,
     currentCompany,
     currentRouteName,
     defaultCompany,
     deviceConfigFetched,
+    expectedTranslateBootstrapKey,
+    hasCurrentCompany,
     isLogged,
     isPublicRouteActive,
-    translateActions,
+    translateStore,
+  ]);
+
+  useEffect(() => {
+    if (
+      !isLogged ||
+      !hasCurrentCompany ||
+      (currentRouteName && isTranslateBootstrapReady)
+    ) {
+      onBootstrapReady?.();
+    }
+  }, [
+    currentRouteName,
+    hasCurrentCompany,
+    isLogged,
+    isTranslateBootstrapReady,
+    onBootstrapReady,
   ]);
-
-  useEffect(() => {
-    if (!isLogged || translateReady || !hasCurrentCompany) {
-      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 +901,23 @@ export const DefaultProvider = ({ children, onBootstrapReady }) => {
     };
   }, [actions, appType, currentCompany?.id, isLogged]);
 
+  useEffect(() => {
+    const fetchColors = async () => {
+      try {
+        const cssText = await api.fetch('themes-colors.css', {
+          responseType: 'text',
+        });
+        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 || {}
@@ -873,6 +945,10 @@ export const DefaultProvider = ({ children, onBootstrapReady }) => {
     isShopClientApp,
   ]);
 
+  if (requiresTranslateBootstrap && !isTranslateBootstrapReady) {
+    return <View style={providerStyles.loadingContainer} />;
+  }
+
   return (
       <ThemeContext.Provider value={themeContextValue}>
         <View
@@ -882,15 +958,15 @@ export const DefaultProvider = ({ children, onBootstrapReady }) => {
               backgroundColor: colors?.background || runtimeColors.background,
             },
           ]}>
-          <View style={providerStyles.content}>{children}</View>
-        {!isShopClientApp && bottomNavigationCount === 0 && (
-          <RuntimeInfoFooter
-            appVersion={appVersion}
-            defaultCompany={defaultCompany}
-            device={device}
-            colors={colors}
-          />
-        )}
+          <View style={[providerStyles.content, runtimeUiScaleStyle]}>{children}</View>
+              {!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({

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],