@controleonline/ui-common 1.2.71 → 1.2.76

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

@@ -19,19 +19,22 @@ import DeliveryPushBridge from '@controleonline/ui-common/src/react/components/D
 import ManagerPushBridge from '@controleonline/ui-common/src/react/components/ManagerPushBridge';
 import PrintService from '@controleonline/ui-common/src/react/components/PrintService';
 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 ProductCatalogCacheService from '@controleonline/ui-common/src/react/components/ProductCatalogCacheService';
+import RuntimeInfoFooter from '@controleonline/ui-common/src/react/components/RuntimeInfoFooter';
 import {isPublicRoute} from '../router/publicRoutes';
-import {api} from '@controleonline/ui-common/src/api';
+import {api} from '@controleonline/ui-common/src/api';
 import {app_type} from '@appType';
-import { env as APP_ENV } from '@env';
-const {resolveConfiguredLanguage} = require('../utils/runtimeLanguage');
+import {env as APP_ENV} from '@env';
+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,
@@ -50,6 +53,9 @@ import {
 import {
   normalizeRuntimeMenuResponse,
 } from '@controleonline/ui-common/src/react/utils/runtimeMenu';
+import {
+  buildRuntimeZoomStyle,
+} from '@controleonline/ui-common/src/react/utils/runtimeZoom';
 import packageJson from '@package';
 import providerStyles from './DefaultProvider.styles';
 
@@ -98,7 +104,11 @@ const resolveDeviceConfigPeopleIri = ({appType, currentCompany, user}) => {
   return '';
 };
 
-export const DefaultProvider = ({children, onBootstrapReady}) => {
+export const DefaultProvider = ({
+  children,
+  currentRouteName = '',
+  onBootstrapReady,
+}) => {
   const appType = String(app_type || '').toUpperCase();
   const isShopClientApp = appType === 'SHOP';
   const themeStore = useStore('theme');
@@ -133,12 +143,13 @@ export const DefaultProvider = ({children, onBootstrapReady}) => {
   const {isLogged, sessionChecked, user} = authGetters;
   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 [appState, setAppState] = useState(AppState.currentState || 'active');
   const [, setTranslateVersion] = useState(0);
   const [baseThemeColors, setBaseThemeColors] = useState({});
@@ -154,12 +165,48 @@ export const DefaultProvider = ({children, onBootstrapReady}) => {
     appType: app_type,
     deviceInfo: device || {},
   });
+  const runtimeUiScaleStyle = useMemo(
+    () => buildRuntimeZoomStyle(APP_ENV?.ZOOM),
+    [],
+  );
   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 shouldRunForegroundRealtimeServices =
     Platform.OS !== 'android' || appState === 'active';
   const registerBottomNavigation = useCallback(() => {
@@ -226,30 +273,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?.({});
@@ -257,7 +287,7 @@ export const DefaultProvider = ({children, onBootstrapReady}) => {
     if (global.t) {
       delete global.t;
     }
-  }, [isLogged, isPublicRouteActive]);
+  }, [isLogged, isPublicRouteActive, translateActions]);
 
   useEffect(() => {
     const subscription = AppState.addEventListener('change', nextState => {
@@ -642,58 +672,49 @@ export const DefaultProvider = ({children, onBootstrapReady}) => {
     }
   }, [currentCompany, isLogged, mainConfigsDiscovered]);
 
-  useEffect(() => {
-    if (
-      !currentRouteName ||
-      isPublicRouteActive
-    ) {
-      return;
-    }
-
-    if (
-      !isLogged ||
-      !currentCompany ||
-      Object.entries(currentCompany).length === 0 ||
-      !deviceConfigFetched
-    ) {
-      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;
-      }
-
-      return;
-    }
-
-    if (currentConfig.language !== configuredLanguage) {
-      const nextConfig = {...currentConfig, language: configuredLanguage};
-      localStorage.setItem(
-        'config',
-        JSON.stringify(nextConfig),
-      );
-    }
-
-    translateBootstrapKeyRef.current = nextTranslateBootstrapKey;
+  useEffect(() => {
+    if (!currentRouteName || isPublicRouteActive) {
+      return;
+    }
+
+    if (
+      !isLogged ||
+      !hasCurrentCompany ||
+      !deviceConfigFetched ||
+      !expectedTranslateBootstrapKey
+    ) {
+      return;
+    }
+
+    const currentConfig = JSON.parse(localStorage.getItem('config') || '{}');
+
+    if (
+      translateBootstrapKeyRef.current === expectedTranslateBootstrapKey &&
+      global.t
+    ) {
+      global.t.companies = companies;
+      global.t.currentCompany = currentCompany;
+      global.t.defaultCompany = defaultCompany;
+      setActiveTranslateBootstrapKey(expectedTranslateBootstrapKey);
+      setTranslateReady(true);
+
+      return;
+    }
+
+    setTranslateReady(false);
+
+    if (currentConfig.language !== configuredTranslationLanguage) {
+      const nextConfig = {
+        ...currentConfig,
+        language: configuredTranslationLanguage,
+      };
+      localStorage.setItem(
+        'config',
+        JSON.stringify(nextConfig),
+      );
+    }
+
+    translateBootstrapKeyRef.current = expectedTranslateBootstrapKey;
     global.t = new Translate(
       companies,
       defaultCompany,
@@ -701,25 +722,39 @@ export const DefaultProvider = ({children, onBootstrapReady}) => {
       Object.keys(stores),
       translateStore,
     );
+    setActiveTranslateBootstrapKey(expectedTranslateBootstrapKey);
     setTranslateReady(true);
     global.refreshTranslationsUI?.();
   }, [
     companies,
+    configuredTranslationLanguage,
     currentCompany,
     currentRouteName,
     defaultCompany,
     deviceConfigFetched,
+    expectedTranslateBootstrapKey,
+    hasCurrentCompany,
     isLogged,
     isPublicRouteActive,
-    translateActions,
+    translateStore,
   ]);
 
 
-  useEffect(() => {
-    if (!isLogged || translateReady || !hasCurrentCompany) {
-      onBootstrapReady?.();
-    }
-  }, [isLogged, translateReady, hasCurrentCompany, onBootstrapReady]);
+  useEffect(() => {
+    if (
+      !isLogged ||
+      !hasCurrentCompany ||
+      (currentRouteName && isTranslateBootstrapReady)
+    ) {
+      onBootstrapReady?.();
+    }
+  }, [
+    currentRouteName,
+    hasCurrentCompany,
+    isLogged,
+    isTranslateBootstrapReady,
+    onBootstrapReady,
+  ]);
 
 
   useEffect(() => {
@@ -766,14 +801,10 @@ export const DefaultProvider = ({children, onBootstrapReady}) => {
 
   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,
-        });
+      try {
+        const cssText = await api.fetch('themes-colors.css', {
+          responseType: 'text',
+        });
         const parsedColors = parseThemeCss(cssText);
         setBaseThemeColors(parsedColors);
         actions.setColors(parsedColors);
@@ -804,6 +835,11 @@ export const DefaultProvider = ({children, onBootstrapReady}) => {
 
     actions.setColors(mergedThemeColors);
   }, [actions, baseThemeColors, currentCompany?.id, currentCompany?.theme?.colors]);
+
+  if (requiresTranslateBootstrap && !isTranslateBootstrapReady) {
+    return <View style={providerStyles.loadingContainer} />;
+  }
+
   return (
     <>
       {runtimeBridges}
@@ -817,7 +853,7 @@ export const DefaultProvider = ({children, onBootstrapReady}) => {
                   backgroundColor: colors?.background || runtimeColors.background,
                 },
               ]}>
-              <View style={providerStyles.content}>{children}</View>
+              <View style={[providerStyles.content, runtimeUiScaleStyle]}>{children}</View>
               {!isShopClientApp && bottomNavigationCount === 0 && (
                 <RuntimeInfoFooter
                   appVersion={appVersion}