@controleonline/ui-common 1.2.70 → 1.2.75

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

@@ -19,18 +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 {isPublicRoute} from '@controleonline/ui-login/src/react/router/publicRoutes';
-import {api} from '@controleonline/ui-common/src/api';
-import {env as APP_ENV} from '@env';
-const {resolveConfiguredLanguage} = require('../utils/runtimeLanguage');
+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 {app_type} from '@appType';
+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,
@@ -46,9 +50,14 @@ 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 {
+  buildRuntimeZoomStyle,
+} from '@controleonline/ui-common/src/react/utils/runtimeZoom';
+import packageJson from '@package';
+import providerStyles from './DefaultProvider.styles';
 
 import {useStore} from '@store';
 import stores from '@stores';
@@ -95,8 +104,12 @@ const resolveDeviceConfigPeopleIri = ({appType, currentCompany, user}) => {
   return '';
 };
 
-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;
@@ -130,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({});
@@ -148,15 +162,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),
+    [],
+  );
   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(() => {
@@ -223,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?.({});
@@ -254,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 => {
@@ -281,7 +314,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 +401,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,
       });
 
@@ -639,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,
@@ -698,69 +722,59 @@ 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 || 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({});
-      }
-    };
-
-    if (device?.id) {
-      fetchColors();
-    }
-  }, [actions, currentCompany?.id, defaultCompany?.id, device?.id]);
-
-  useEffect(() => {
-    if (!isLogged || !currentCompany?.id || !appType) {
-      actions.setMenus([]);
-      return;
-    }
+  useEffect(() => {
+    if (
+      !isLogged ||
+      !hasCurrentCompany ||
+      (currentRouteName && isTranslateBootstrapReady)
+    ) {
+      onBootstrapReady?.();
+    }
+  }, [
+    currentRouteName,
+    hasCurrentCompany,
+    isLogged,
+    isTranslateBootstrapReady,
+    onBootstrapReady,
+  ]);
 
-    let cancelled = false;
 
+  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: {
@@ -769,25 +783,44 @@ export const DefaultProvider = ({children, onBootstrapReady}) => {
           menuType: 'home',
         },
       })
-      .then(result => {
-        if (!cancelled) {
-          actions.setMenus(normalizeRuntimeMenuResponse(result, {appType}));
-        }
-      })
-      .catch(() => {
-        if (!cancelled) {
-          actions.setMenus(normalizeRuntimeMenuResponse(null, {appType}));
-        }
-      });
-
-    return () => {
-      cancelled = true;
+      .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 () => {
+      try {
+        const cssText = await api.fetch('themes-colors.css', {
+          responseType: 'text',
+        });
+        const parsedColors = parseThemeCss(cssText);
+        setBaseThemeColors(parsedColors);
+        actions.setColors(parsedColors);
+      } catch {
+        setBaseThemeColors({});
+      }
     };
-  }, [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 || {}),
@@ -802,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}
@@ -815,15 +853,15 @@ 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}
                   defaultCompany={defaultCompany}
                   device={device}
                   colors={colors}
-                />
-              )}
+                />
+              )}
             </View>
             {!isShopClientApp && (
               <>