@controleonline/ui-common 1.2.103 → 1.2.104

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@controleonline/ui-common",
-  "version": "1.2.103",
+  "version": "1.2.104",
   "author": "ControleOnline",
   "description": "ControleOnline Common Quasar UI Component",
   "license": "MIT",
@@ -38,7 +38,7 @@
     "last 1 version, not dead, ie >= 11"
   ],
   "dependencies": {
-    "@controleonline/ui-default": "*",
+    "@controleonline/ui-default": "1.0.281",
     "md5": "^2.3.0"
   }
 }

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

@@ -294,6 +294,7 @@ export function useNativeDeviceConfigFetch({device, isLogged, currentCompany, se
       currentCompany &&
       Object.entries(currentCompany).length > 0
     ) {
+      let active = true;
       setDeviceConfigFetched(false);
       setDeviceRuntimeConfigSynced(false);
       deviceConfigsActions
@@ -303,6 +304,7 @@ export function useNativeDeviceConfigFetch({device, isLogged, currentCompany, se
           type: runtimeDeviceType,
         })
         .then(data => {
+          if (!active) return;
           if (Array.isArray(data) && data.length > 0) {
             const nextItem = {
               ...data[0],
@@ -316,8 +318,9 @@ export function useNativeDeviceConfigFetch({device, isLogged, currentCompany, se
         })
         .catch(() => {})
         .finally(() => {
-          setDeviceConfigFetched(true);
+          if (active) setDeviceConfigFetched(true);
         });
+      return () => { active = false; };
     }
   }, [currentCompany?.id, isLogged, device?.id, runtimeDeviceType]);
 }

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

@@ -8,6 +8,7 @@ export function useWebDeviceConfigFetch({device, isLogged, deviceConfigPeopleIri
       return;
     }
 
+    let active = true;
     setDeviceConfigFetched(false);
     setDeviceRuntimeConfigSynced(false);
     deviceConfigsActions.setItem({});
@@ -19,6 +20,7 @@ export function useWebDeviceConfigFetch({device, isLogged, deviceConfigPeopleIri
         type: runtimeDeviceType,
       })
       .then(data => {
+        if (!active) return;
         const selectedConfig = selectRuntimeDeviceConfig({
           items: data,
           deviceId: device.id,
@@ -39,8 +41,9 @@ export function useWebDeviceConfigFetch({device, isLogged, deviceConfigPeopleIri
       })
       .catch(() => {})
       .finally(() => {
-        setDeviceConfigFetched(true);
+        if (active) setDeviceConfigFetched(true);
       });
+    return () => { active = false; };
   }, [
     device?.id,
     deviceConfigPeopleIri,
@@ -250,38 +253,44 @@ export function useWebCompanies({device, isLogged, peopleActions}) {
   }, [isLogged, device?.id]);
 }
 
-export function useWebMenus({isLogged, currentCompany, actions, api, appType, normalizeRuntimeMenuResponse}) {
+export function useWebMenus({isLogged, currentCompany, actions, api, appType, normalizeRuntimeMenuResponse, menuContextKey, setMenuLoad, includeToolbar = false}) {
   useEffect(() => {
     if (!isLogged || !currentCompany?.id) {
       actions.setMenus([]);
+      setMenuLoad?.({key: menuContextKey, status: 'idle'});
       return undefined;
     }
 
     let cancelled = false;
+    setMenuLoad?.({key: menuContextKey, status: 'loading'});
 
-    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}));
-        }
-      });
+    const fetchMenus = menuType => api.fetch('menus-people', {
+      params: {myCompany: currentCompany.id, appType, menuType},
+    });
+    const request = includeToolbar
+      ? Promise.all([fetchMenus('home'), fetchMenus('toolbar')])
+      : fetchMenus('home').then(result => [result]);
+    request.then(results => {
+      if (cancelled) return;
+      if (results.some(result => result?.response?.success === false)) {
+        actions.setMenus([]);
+        setMenuLoad?.({key: menuContextKey, status: 'error'});
+        return;
+      }
+      actions.setMenus(results.flatMap(result => normalizeRuntimeMenuResponse(result, {
+        appType, ...(includeToolbar ? {allowFallback: false} : {}),
+      }) || []));
+      setMenuLoad?.({key: menuContextKey, status: 'ready'});
+    }).catch(() => {
+      if (cancelled) return;
+      actions.setMenus(includeToolbar ? [] : normalizeRuntimeMenuResponse(null, {appType}));
+      setMenuLoad?.({key: menuContextKey, status: 'error'});
+    });
 
     return () => {
       cancelled = true;
     };
-  }, [actions, appType, currentCompany?.id, isLogged]);
+  }, [actions, appType, currentCompany?.id, isLogged, menuContextKey, setMenuLoad, includeToolbar]);
 }
 
 export function useWebThemeFetch({api, parseThemeCss, setBaseThemeColors, actions, currentCompany, mainCompany, device}) {

package/src/react/components/RuntimeBottomNavigationBar.js

@@ -3,6 +3,7 @@ import {useNavigationState} from '@react-navigation/native';
 import {useStore} from '@store';
 import {api} from '@controleonline/ui-common/src/api';
 import {app_type} from '@appType';
+import {useTheme} from './DefaultProvider';
 import BottomNavigationBar from '@controleonline/ui-common/src/react/components/BottomNavigationBar';
 import {
   getBottomNavigationPreset,
@@ -33,6 +34,8 @@ const RuntimeBottomNavigationBar = ({
   testID = 'bottom-navigation',
   useModernWebChromeProps = false,
 }) => {
+  const {runtimeMenus: providerMenus} = useTheme?.() || {};
+  const managedMenus = providerMenus?.managed === true;
   const state = useNavigationState(current => current);
   const activeRouteName =
     activeRouteNameProp || state?.routes?.[state.index]?.name || 'HomePage';
@@ -48,10 +51,15 @@ const RuntimeBottomNavigationBar = ({
   const routeAliases = routeAliasesProp || preset?.routeAliases || {};
   const appType = normalizeAppType(app_type);
   const menuScope = JSON.stringify([appType, currentCompany?.id, menuType, presetKey]);
-  const runtimeMenus = menuState.scope === menuScope ? menuState.menus : [];
+  const runtimeMenus = managedMenus
+    ? (providerMenus.ready ? resolveToolbarRuntimeMenus({
+        apiMenus: providerMenus.modules, preset, presetKey, menuType, translate: global.t?.t,
+      }) : [])
+    : menuState.scope === menuScope ? menuState.menus : [];
 
   // Always consult menus-people for role-aware toolbar; preset is fallback only.
   useEffect(() => {
+    if (managedMenus) return undefined;
     const setRuntimeMenus = menus => setMenuState({scope: menuScope, menus});
     if (!currentCompany?.id || !menuType) {
       setRuntimeMenus(
@@ -109,7 +117,7 @@ const RuntimeBottomNavigationBar = ({
     return () => {
       cancelled = true;
     };
-  }, [appType, currentCompany?.id, menuType, preset, presetKey, menuScope]);
+  }, [appType, currentCompany?.id, menuType, preset, presetKey, menuScope, managedMenus]);
 
   const colors = useMemo(() => {
     if (colorsOverride) {

package/src/react/components/UserAvatar.js

@@ -1,5 +1,5 @@
 import {readStoredSessionToken} from '../../utils/storedSessionToken';
-import {isTrustedApiUrl, filterApiHeaders} from '../../utils/trustedApiUrl';
+import {isTrustedApiUrl, filterApiHeaders, resolveApiFileProtocol} from '../../utils/trustedApiUrl';
 import React, {useEffect, useMemo, useState} from 'react';
 import {Image, Platform, StyleSheet, Text, View} from 'react-native';
 import {env as APP_ENV} from '@env';
@@ -55,99 +55,90 @@ const probeGravatar = async url => {
  * - Gravatar (d=404) on web: probe first; never set <img src> on expected 404.
  * - Other URLs / native: pass through (native Image onError handles 404).
  */
-const useDisplayUri = uri => {
-  const [displayUri, setDisplayUri] = useState('');
-  const [resolved, setResolved] = useState(false);
+const useDisplayUri = (uri, imageAuthContext) => {
+  const [result, setResult] = useState(null);
 
   useEffect(() => {
     let cancelled = false;
     let objectUrl = '';
-    const next = normalizeUrl(uri);
-
-    setResolved(false);
-    setDisplayUri('');
+    const controller = typeof AbortController !== 'undefined' ? new AbortController() : null;
+    const next = Platform.OS === 'web'
+      ? resolveApiFileProtocol(normalizeUrl(uri), APP_ENV?.API_ENTRYPOINT)
+      : normalizeUrl(uri);
+    const finish = displayUri => {
+      if (!cancelled) setResult({uri, imageAuthContext, displayUri, resolved: true});
+    };
 
     const run = async () => {
-      if (!next) {
-        if (!cancelled) {
-          setDisplayUri('');
-          setResolved(true);
-        }
-        return;
-      }
-
-      const token = readStoredSessionToken();
+      if (!next) { finish(''); return; }
 
-      // Authenticated backend download on web
+      // An explicitly unresolved store session must not reuse an older stored token.
+      const token = imageAuthContext === undefined
+        ? readStoredSessionToken() : normalizeUrl(imageAuthContext);
       if (isBackendDownloadUrl(next) && isTrustedApiUrl(next, APP_ENV?.API_ENTRYPOINT)
-          && Platform.OS === 'web' && token) {
-        try {
-          const headers = {
-            Accept: '*/*',
-            'API-TOKEN': token,
-          };
-          const host =
-            normalizeUrl(APP_ENV?.DOMAIN) ||
-            (typeof location !== 'undefined' ? location.host : '');
-          if (host) {
-            headers['App-Domain'] = host;
+          && Platform.OS === 'web') {
+        // Never expose a private download directly to an unauthenticated <Image>.
+        if (!token) { finish(''); return; }
+        const headers = {Accept: '*/*', 'API-TOKEN': token};
+        const host = normalizeUrl(APP_ENV?.DOMAIN) ||
+          (globalThis.location?.host || '');
+        if (host) headers['App-Domain'] = host;
+
+        for (let attempt = 0; attempt < 2 && !cancelled; attempt += 1) {
+          let response;
+          try {
+            response = await fetch(next, {
+              method: 'GET', headers, redirect: 'error', signal: controller?.signal,
+            });
+          } catch (error) {
+            if (cancelled || error?.name === 'AbortError') return;
+            if (attempt === 0) continue;
+            finish(''); return;
           }
-
-          const response = await fetch(next, {method: 'GET', headers, redirect: 'error'});
+          if (cancelled) return;
           if (!response.ok) {
-            if (!cancelled) {
-              setDisplayUri('');
-              setResolved(true);
-            }
-            return;
+            // One recovery attempt for transient server failures, never auth failures.
+            if (attempt === 0 && response.status >= 500 && response.status < 600) continue;
+            finish(''); return;
           }
-
-          const blob = await response.blob();
-          objectUrl = URL.createObjectURL(blob);
-          if (!cancelled) {
-            setDisplayUri(objectUrl);
-            setResolved(true);
-          }
-        } catch {
-          if (!cancelled) {
-            setDisplayUri('');
-            setResolved(true);
+          try {
+            const blob = await response.blob();
+            if (cancelled) return;
+            objectUrl = URL.createObjectURL(blob);
+            finish(objectUrl);
+          } catch {
+            finish('');
           }
+          return;
         }
         return;
       }
 
-      // Gravatar d=404: probe on web so <img> never receives a known-missing URL
       if (isGravatarUrl(next) && Platform.OS === 'web') {
         const ok = await probeGravatar(next);
-        if (!cancelled) {
-          setDisplayUri(ok ? next : '');
-          setResolved(true);
-        }
+        finish(ok ? next : '');
         return;
       }
-
-      // Default: use as-is (native, or non-special web URLs)
-      if (!cancelled) {
-        setDisplayUri(next);
-        setResolved(true);
-      }
+      finish(next);
     };
-
     run();
 
     return () => {
       cancelled = true;
+      controller?.abort();
       if (objectUrl) URL.revokeObjectURL(objectUrl);
     };
-  }, [uri]);
+  }, [uri, imageAuthContext]);
 
-  return {displayUri, resolved};
+  // Do not show a previous session's blob while the next effect is starting.
+  return result && result.uri === uri && result.imageAuthContext === imageAuthContext
+    ? result : {displayUri: '', resolved: false};
 };
 
 const UserAvatar = ({
   imageUrl,
   imageHeaders,
+  imageAuthContext,
   email,
   name,
   size = 40,
@@ -170,10 +161,10 @@ const UserAvatar = ({
 
   useEffect(() => {
     setSourceIndex(0);
-  }, [sources]);
+  }, [sources, imageAuthContext]);
 
   const currentSource = sources[sourceIndex];
-  const {displayUri, resolved} = useDisplayUri(currentSource);
+  const {displayUri, resolved} = useDisplayUri(currentSource, imageAuthContext);
 
   // After probe resolves empty for gravatar/backend → try next source or initials
   useEffect(() => {

package/src/tests/react/components/avatarSessionRecovery.test.js

@@ -0,0 +1,102 @@
+import React from 'react';
+import renderer, {act} from 'react-test-renderer';
+import UserAvatar from '@controleonline/ui-common/src/react/components/UserAvatar';
+jest.mock('@env', () => ({env: {API_ENTRYPOINT: 'https://api.synthetic.test', DOMAIN: 'synthetic.test'}}));
+jest.mock('@store', () => ({useStore: jest.fn()}));
+jest.mock('react-native', () => ({Platform: {OS: 'web'}, Image: 'Image', Text: 'Text', View: 'View', StyleSheet: {create: value => value}}));
+const {useStore} = require('@store');
+const imageUrl = 'https://api.synthetic.test/files/42/download';
+const ok = () => ({ok: true, status: 200, blob: async () => ({})});
+let tree;
+let original;
+const render = async props => {await act(async () => {tree = renderer.create(<UserAvatar imageUrl={imageUrl} useGravatar={false} {...props}/>);});};
+beforeEach(() => {
+  global.IS_REACT_ACT_ENVIRONMENT = true;
+  original = {fetch: global.fetch, storage: global.localStorage, create: URL.createObjectURL, revoke: URL.revokeObjectURL};
+  global.localStorage = {getItem: () => null};
+  global.fetch = jest.fn().mockResolvedValue(ok());
+  URL.createObjectURL = jest.fn(() => 'blob:synthetic');
+  URL.revokeObjectURL = jest.fn();
+});
+afterEach(() => {
+  if (tree) act(() => tree.unmount());
+  tree = undefined;
+  global.fetch = original.fetch; global.localStorage = original.storage;
+  URL.createObjectURL = original.create; URL.revokeObjectURL = original.revoke;
+});
+it('renders initials before an image and authentication context exist', async () => {
+  await render({imageUrl: undefined, imageAuthContext: undefined, name: 'Leandro'});
+  expect(tree.root.findAllByType('Image')).toHaveLength(0);
+  expect(tree.root.findByType('Text').props.children).toBe('L');
+  expect(fetch).not.toHaveBeenCalled();
+});
+it('waits for session then fetches the same private URL', async () => {
+  await render({imageAuthContext: ''});
+  expect(tree.root.findAllByType('Image')).toHaveLength(0);
+  expect(fetch).not.toHaveBeenCalled();
+  await act(async () => {tree.update(<UserAvatar imageUrl={imageUrl} useGravatar={false} imageAuthContext="session-ready"/>);});
+  expect(fetch).toHaveBeenCalledTimes(1);
+  expect(fetch.mock.calls[0][1].headers['API-TOKEN']).toBe('session-ready');
+});
+it('uses the configured protocol for private images from the same API authority', async () => {
+  await render({imageUrl: imageUrl.replace('https:', 'http:'), imageAuthContext: 'ready'});
+  expect(fetch).toHaveBeenCalledTimes(1);
+  expect(fetch.mock.calls[0][0]).toBe(imageUrl);
+  expect(tree.root.findByType('Image').props.source.uri).toBe('blob:synthetic');
+});
+it.each([401, 403, 404])('does not retry status %s', async status => {
+  fetch.mockResolvedValue({ok: false, status});
+  await render({imageAuthContext: 'ready'});
+  expect(fetch).toHaveBeenCalledTimes(1);
+  expect(tree.root.findAllByType('Image')).toHaveLength(0);
+});
+it.each(['network', 503])('recovers once from %s', async failure => {
+  if (failure === 'network') fetch.mockRejectedValueOnce(new TypeError('network'));
+  else fetch.mockResolvedValueOnce({ok: false, status: failure});
+  await render({imageAuthContext: 'ready'});
+  expect(fetch).toHaveBeenCalledTimes(2);
+  expect(tree.root.findByType('Image').props.source.uri).toBe('blob:synthetic');
+});
+it('bounds repeated failures to two attempts', async () => {
+  fetch.mockRejectedValue(new TypeError('network'));
+  await render({imageAuthContext: 'ready'});
+  expect(fetch).toHaveBeenCalledTimes(2);
+});
+it('resets Image.onError after session changes', async () => {
+  await render({imageAuthContext: 'first'});
+  await act(async () => {tree.root.findByType('Image').props.onError();});
+  expect(tree.root.findAllByType('Image')).toHaveLength(0);
+  await act(async () => {tree.update(<UserAvatar imageUrl={imageUrl} useGravatar={false} imageAuthContext="second"/>);});
+  expect(tree.root.findByType('Image').props.source.uri).toBe('blob:synthetic');
+  expect(fetch.mock.calls.at(-1)[1].headers['API-TOKEN']).toBe('second');
+});
+it('never fetches credentials for an untrusted origin', async () => {
+  await render({imageUrl: 'https://external.synthetic.test/files/42/download', imageAuthContext: 'private'});
+  expect(fetch).not.toHaveBeenCalled();
+});
+it('aborts unmounted request and avoids a late blob URL', async () => {
+  let resolveBlob;
+  fetch.mockResolvedValue({ok: true, blob: () => new Promise(resolve => {resolveBlob = resolve;})});
+  await render({imageAuthContext: 'ready'});
+  const signal = fetch.mock.calls[0][1].signal;
+  await act(async () => {tree.unmount(); tree = undefined;});
+  await act(async () => {resolveBlob({});});
+  expect(signal.aborted).toBe(true);
+  expect(URL.createObjectURL).not.toHaveBeenCalled();
+});
+
+it('revokes successful blobs when unmounted', async () => {
+  await render({imageAuthContext: 'ready'});
+  expect(tree.root.findByType('Image').props.source.uri).toBe('blob:synthetic');
+  await act(async () => {tree.unmount(); tree = undefined;});
+  expect(URL.revokeObjectURL).toHaveBeenCalledWith('blob:synthetic');
+});
+it('ignores the earlier session response after a context change', async () => {
+  let resolveOld;
+  fetch.mockImplementationOnce(() => new Promise(resolve => {resolveOld = resolve;}));
+  await render({imageAuthContext: 'first'});
+  await act(async () => {tree.update(<UserAvatar imageUrl={imageUrl} useGravatar={false} imageAuthContext="second"/>);});
+  await act(async () => {resolveOld(ok());});
+  expect(URL.createObjectURL).toHaveBeenCalledTimes(1);
+  expect(tree.root.findByType('Image').props.source.uri).toBe('blob:synthetic');
+});

package/src/tests/react/components/singleItemCompanyDevice.test.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import renderer, {act} from 'react-test-renderer';
+import {useNativeDeviceConfigFetch} from '@controleonline/ui-common/src/react/components/DefaultProvider.native.lifecycle';
+import {useWebDeviceConfigFetch} from '@controleonline/ui-common/src/react/components/DefaultProvider.web.configuration';
+it.each([['web',useWebDeviceConfigFetch],['native',useNativeDeviceConfigFetch]])('ignores late device configuration after a company switch on %s',async(_platform,useConfig)=>{
+ global.IS_REACT_ACT_ENVIRONMENT=true;
+ let resolveOld;const old=new Promise(resolve=>{resolveOld=resolve;});
+ const actions={setItem:jest.fn(),getItems:jest.fn().mockReturnValueOnce(old).mockResolvedValueOnce([{id:20}])};
+ const done=jest.fn(), synced=jest.fn(), select=({items})=>items[0],parse=x=>x||{};
+ function Probe({company}){useConfig({currentCompany:{id:company},device:{id:'web-10'},isLogged:true,deviceConfigPeopleIri:`/people/${company}`,setDeviceConfigFetched:done,setDeviceRuntimeConfigSynced:synced,deviceConfigsActions:actions,runtimeDeviceType:'PDV',selectRuntimeDeviceConfig:select,parseConfigsObject:parse});return null;}
+ let tree;await act(async()=>{tree=renderer.create(<Probe company={3}/>);});
+ await act(async()=>tree.update(<Probe company={2}/>));
+ expect(actions.setItem).toHaveBeenLastCalledWith({id:20,configs:{}});
+ actions.setItem.mockClear();done.mockClear();
+ await act(async()=>resolveOld([{id:10}]));
+ expect(actions.setItem).not.toHaveBeenCalled();expect(done).not.toHaveBeenCalled();
+ await act(async()=>tree.unmount());
+});

package/src/utils/trustedApiUrl.js

@@ -16,4 +16,14 @@ const filterApiHeaders = (uri, headers = {}, apiEntryPoint) => {
     !/^(api[-_]?(token|key)|authorization|proxy-authorization|cookie|app-domain|device)$/i.test(key)));
 };
 
-module.exports = {isTrustedApiUrl, filterApiHeaders};
+// Normalize only file downloads on the configured API authority; trust checks still
+// validate the final origin/path before attaching session headers.
+const resolveApiFileProtocol = (uri, apiEntryPoint) => {
+  const image = String(uri || '');
+  const imageOrigin = image.match(/^https?:\/\/([^/]+)/i);
+  const apiOrigin = String(apiEntryPoint || '').match(/^https?:\/\/([^/]+)/i);
+  if (!imageOrigin || !apiOrigin || imageOrigin[1] !== apiOrigin[1]
+      || !/\/files\/[^/?#]+\/download(?:[?#]|$)/i.test(image)) return image;
+  return apiOrigin[0] + image.slice(imageOrigin[0].length);
+};
+module.exports = {isTrustedApiUrl, filterApiHeaders, resolveApiFileProtocol};