@controleonline/ui-common 1.2.90 → 1.2.92

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

@@ -0,0 +1,336 @@
+import {useEffect} from 'react';
+
+// Extracted bootstrap effects retain their dependency arrays and invocation order.
+
+export function useWebTranslationRefresh({setTranslateVersion}) {
+  useEffect(() => {
+    global.refreshTranslationsUI = () => {
+      setTranslateVersion(version => version + 1);
+    };
+
+    return () => {
+      if (global.refreshTranslationsUI) {
+        delete global.refreshTranslationsUI;
+      }
+    };
+  }, []);
+}
+
+export function useWebTranslationReset({isLogged, isPublicRouteActive, setTranslateReady, setActiveTranslateBootstrapKey, translateBootstrapKeyRef, translateActions}) {
+  useEffect(() => {
+    if (isLogged && !isPublicRouteActive) {
+      return;
+    }
+
+    setTranslateReady(true);
+    setActiveTranslateBootstrapKey('');
+    translateBootstrapKeyRef.current = '';
+    translateActions.setMessages({});
+    translateActions.setPendingMessages?.({});
+
+    if (global.t) {
+      delete global.t;
+    }
+  }, [isLogged, isPublicRouteActive, translateActions]);
+}
+
+export function useWebDeviceConfigReset({deviceConfigPeopleIri, lastDeviceConfigPeopleIriRef, setDeviceConfigFetched, setDeviceRuntimeConfigSynced, deviceConfigsActions}) {
+  useEffect(() => {
+    if (
+      !deviceConfigPeopleIri ||
+      lastDeviceConfigPeopleIriRef.current === deviceConfigPeopleIri
+    ) {
+      return;
+    }
+
+    lastDeviceConfigPeopleIriRef.current = deviceConfigPeopleIri;
+    setDeviceConfigFetched(false);
+    setDeviceRuntimeConfigSynced(false);
+    deviceConfigsActions.setItem({});
+  }, [deviceConfigPeopleIri, deviceConfigsActions]);
+}
+
+export function useWebRuntimeIp({isLogged, api, getRuntimeIpFromResponse, setWebRuntimeIp, user}) {
+  useEffect(() => {
+    if (!isLogged) {
+      return;
+    }
+
+    let cancelled = false;
+
+    api
+      .fetch('runtime/ip', {
+        method: 'GET',
+      })
+      .then(response => {
+        const nextRuntimeIp = getRuntimeIpFromResponse(response);
+        if (!nextRuntimeIp || cancelled) {
+          return;
+        }
+
+        setWebRuntimeIp(currentIp =>
+          currentIp === nextRuntimeIp ? currentIp : nextRuntimeIp,
+        );
+      })
+      .catch(() => {});
+
+    return () => {
+      cancelled = true;
+    };
+  }, [isLogged, user?.id]);
+}
+
+export function useWebWebDeviceIdentity({isLogged, isShopClientApp, buildWebDevice, lastWebDeviceSyncRef, setDevice, deviceActions, packageVersion, user, webRuntimeIp}) {
+  useEffect(() => {
+    if (!isLogged && !isShopClientApp) {
+      return;
+    }
+
+    const nextDevice = buildWebDevice();
+    if (!nextDevice) {
+      return;
+    }
+
+    const signature = JSON.stringify({
+      id: nextDevice.id,
+      appVersion: nextDevice.appVersion,
+      appName: nextDevice.appName,
+      type: nextDevice.type,
+      metadata: nextDevice.metadata || {},
+      externalIp: nextDevice.externalIp || null,
+    });
+
+    if (lastWebDeviceSyncRef.current === signature) {
+      return;
+    }
+
+    lastWebDeviceSyncRef.current = signature;
+    setDevice(nextDevice);
+    localStorage.setItem('device', JSON.stringify(nextDevice));
+    deviceActions.setItem(nextDevice);
+    localStorage.removeItem('master-device');
+  }, [deviceActions, isLogged, isShopClientApp, packageVersion, user?.id, webRuntimeIp]);
+}
+
+export function useWebMainCompany({isShopClientApp, device, peopleActions}) {
+  useEffect(() => {
+    if (isShopClientApp || device?.id) {
+      peopleActions.mainCompany().catch(() => {});
+    }
+  }, [device?.id, isShopClientApp, peopleActions]);
+}
+
+export function useWebDeviceRegistration({isLogged, device, currentCompany, canAdministerCompany, mainCompany, user, deviceActions, buildDeviceRegistrationPayload, app_type, hasDeviceRecordChanges, runtimeDeviceType, setDevice}) {
+  useEffect(() => {
+    if (!isLogged || !device?.id) {
+      return;
+    }
+
+    // Device registration changes tenant context and is not valid without an
+    // active company or administrative authority for that company.
+    if (
+      !currentCompany?.id ||
+      !canAdministerCompany({company: currentCompany, mainCompany, user})
+    ) {
+      return;
+    }
+
+    let cancelled = false;
+
+    const syncDeviceRegistration = async () => {
+      const items = await deviceActions.getItems({
+        device: device.id,
+      });
+
+      if (cancelled) {
+        return;
+      }
+
+      const existingDevice =
+        Array.isArray(items) && items.length > 0 ? items[0] : null;
+      const nextDevice = buildDeviceRegistrationPayload({
+        deviceInfo: device,
+        appType: app_type,
+        existingDevice,
+      });
+
+      if (!hasDeviceRecordChanges({existingDevice, nextDevice})) {
+        const nextLocalDevice = {
+          ...device,
+          entityId: existingDevice?.id || device?.entityId || null,
+          entityIri:
+            existingDevice?.['@id'] ||
+            device?.entityIri ||
+            (existingDevice?.id ? `/devices/${existingDevice.id}` : null),
+          alias: existingDevice?.alias || nextDevice.alias,
+          type: device?.type || runtimeDeviceType,
+          metadata: existingDevice?.metadata || nextDevice.metadata,
+        };
+
+        if (JSON.stringify(nextLocalDevice) !== JSON.stringify(device)) {
+          setDevice(nextLocalDevice);
+          localStorage.setItem('device', JSON.stringify(nextLocalDevice));
+          deviceActions.setItem(nextLocalDevice);
+        }
+        return;
+      }
+
+      const savedDevice = await deviceActions.save(nextDevice);
+      if (cancelled || !savedDevice) {
+        return;
+      }
+
+      const nextLocalDevice = {
+        ...device,
+        entityId: savedDevice?.id || device?.entityId || null,
+        entityIri:
+          savedDevice?.['@id'] ||
+          device?.entityIri ||
+          (savedDevice?.id ? `/devices/${savedDevice.id}` : null),
+        alias: savedDevice.alias || nextDevice.alias,
+        type: device?.type || runtimeDeviceType,
+        metadata: savedDevice.metadata || nextDevice.metadata,
+      };
+
+      if (JSON.stringify(nextLocalDevice) !== JSON.stringify(device)) {
+        setDevice(nextLocalDevice);
+        localStorage.setItem('device', JSON.stringify(nextLocalDevice));
+        deviceActions.setItem(nextLocalDevice);
+      }
+    };
+
+    syncDeviceRegistration().catch(() => {});
+
+    return () => {
+      cancelled = true;
+    };
+  }, [
+    device?.appVersion,
+    device?.batteryLevel,
+    device?.buildNumber,
+    device?.deviceType,
+    device?.externalIp,
+    device?.id,
+    device?.manufacturer,
+    device?.model,
+    device?.systemVersion,
+    isLogged,
+    currentCompany,
+    mainCompany,
+    runtimeDeviceType,
+    user,
+  ]);
+}
+
+export function useWebPrinters({isShopClientApp, isLogged, currentCompany, printerActions}) {
+  useEffect(() => {
+    if (isShopClientApp || !isLogged || !currentCompany?.id) {
+      return;
+    }
+
+    printerActions
+      .ensureCompanyPrintersLoaded({people: currentCompany.id})
+      .catch(() => {});
+  }, [currentCompany?.id, isLogged, isShopClientApp, printerActions]);
+}
+
+export function useWebPaymentTypes({isShopClientApp, companyConfigs, currentCompany, device_config, walletPaymentTypeRequestRef, walletPaymentTypeLoadedKeyRef, paymentTypeActions, mainConfigsDiscovered, resolveDevicePaymentTypeIds, api, selectPosWalletPaymentTypes, getPaymentGateway}) {
+  useEffect(() => {
+    const paymentConfigSource = isShopClientApp
+      ? Object.keys(companyConfigs || {}).length > 0
+        ? companyConfigs
+        : currentCompany?.configs
+      : device_config?.configs;
+
+    if (!currentCompany?.id || !paymentConfigSource) {
+      walletPaymentTypeRequestRef.current = {key: '', promise: null};
+      walletPaymentTypeLoadedKeyRef.current = '';
+      paymentTypeActions.setItems([]);
+      return;
+    }
+
+    if (!isShopClientApp && !mainConfigsDiscovered) {
+      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;
+
+    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;
+        }
+
+        const walletPaymentTypes = Array.isArray(response?.member)
+          ? response.member
+          : Array.isArray(response?.['hydra:member'])
+            ? response['hydra:member']
+            : Array.isArray(response)
+              ? response
+              : [];
+        paymentTypeActions.setItems(
+          selectPosWalletPaymentTypes({
+            walletPaymentTypes,
+            deviceConfigs: paymentConfigSource,
+            companyConfigs,
+            gateway: getPaymentGateway(device_config || paymentConfigSource),
+          }),
+        );
+        walletPaymentTypeLoadedKeyRef.current = requestKey;
+      })
+      .catch(() => {
+        if (isMounted) {
+          paymentTypeActions.setItems([]);
+        }
+      })
+      .finally(() => {
+        if (
+          walletPaymentTypeRequestRef.current.key === requestKey &&
+          walletPaymentTypeRequestRef.current.promise === requestPromise
+        ) {
+          walletPaymentTypeRequestRef.current = {key: '', promise: null};
+        }
+      });
+
+    return () => {
+      isMounted = false;
+    };
+  }, [
+    companyConfigs,
+    currentCompany?.configs,
+    currentCompany?.id,
+    device_config?.configs,
+    isShopClientApp,
+    paymentTypeActions,
+  ]);
+}

package/src/react/components/RuntimeFooterMarqueeText.js

@@ -105,6 +105,10 @@ const RuntimeFooterMarqueeText = props => {
       color: color,
       flexShrink: 0,
       flexGrow: 0,
+      // primaryText carries `flex: 1` (flexBasis 0 on native), which collapsed
+      // the Text to width 0 inside the row on Android. Force intrinsic sizing.
+      flexBasis: 'auto',
+      minWidth: 0,
       minHeight: 14,
     },
   ];
@@ -164,6 +168,7 @@ const RuntimeFooterMarqueeText = props => {
           alignItems: 'center',
           opacity: 1,
           transform: [{translateX: translateX}],
+          justifyContent: shouldMarquee ? 'flex-start' : 'center',
           alignSelf: shouldMarquee ? 'flex-start' : 'stretch',
         },
       },

package/src/react/components/resolveDomainThemeColors.js

@@ -0,0 +1,5 @@
+// The domain palette owns branding. Franchise selection must not change it.
+export const resolveDomainThemeColors = (baseThemeColors = {}, mainCompany = {}) => ({
+  ...(mainCompany?.theme?.colors || {}),
+  ...(baseThemeColors || {}),
+});

package/src/react/pages/Connections.js

@@ -213,7 +213,7 @@ export default function Connections() {
           searchPlaceholder={
             tt('connections_label', 'search') || 'Buscar conexao, telefone ou status'
           }
-          searchKey="search
+          searchKey="search"
           totalItemsLabel="connections"
           visibleColumnsPreferenceKey="connections"
           accentColor={brandColors.primary}

package/src/react/utils/runtimeZoom.js

@@ -37,10 +37,16 @@ export const buildRuntimeZoomStyle = (
   }
 
   const inverseScale = 1 / scale;
+  // app-community#1051: the container also carries `flex: 1` (flexBasis 0),
+  // which overrides the compensated height. Disable flex sizing so the
+  // compensated size survives and the scaled content fills the viewport.
   const nativeBase = {
     transform: [{scale}],
     transformOrigin: 'top left',
     alignSelf: 'flex-start',
+    flexGrow: 0,
+    flexShrink: 0,
+    flexBasis: 'auto',
   };
 
   const viewportWidth = Number(viewport?.width);

package/src/tests/browser/manager/device-detail-alias-save.spec.js

@@ -17,7 +17,7 @@ const { API_ORIGIN } = require('../../../../../../../src/tests/browser/apiOrigin
 const APP_VERSION = packageJson?.version || '1.0.0';
 const CURRENT_DEVICE_ID = 'web-7';
 const DEVICE_ENTITY_ID = 396;
-const INITIAL_ALIAS = 'Caixa atual';
+const INITIAL_ALIAS = 'Caixa Santa Redonda';
 const NEXT_ALIAS = 'Caixa Renomeado #382';
 
 const CORS_HEADERS = {

package/src/tests/browser/manager/device-detail-pdv-current-company.spec.js

@@ -250,7 +250,7 @@ test.describe('device-detail PDV currentCompany (#704)', () => {
 
     await page.getByTestId(`device-config-${PDV_CONFIG_ID}`).click();
     await expect(page).toHaveURL(/device-detail/, {timeout: 15000});
-    await expect(page.getByText('Configuração do PDV')).toBeVisible({
+    await expect(page.getByText('Detalhes do Device', {exact: true})).toBeVisible({
       timeout: 15000,
     });
     await writeEvidence(

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

@@ -11,11 +11,14 @@ describe('DefaultProvider company authority guard', () => {
   it.each(providerFiles)(
     'uses the shared authority helper in %s',
     providerFile => {
-      const source = fs.readFileSync(
+      const providerSource = fs.readFileSync(
         path.resolve(__dirname, '../../../react/components', providerFile),
         'utf8',
       );
 
+      const root = path.resolve(__dirname, '../../../react/components');
+      const platform = providerFile.includes('.web.') ? 'web' : 'native';
+      const source = providerSource + ['lifecycle', 'configuration'].map(group => fs.readFileSync(path.join(root, `DefaultProvider.${platform}.${group}.js`), 'utf8')).join('\n');
       expect(source).not.toContain('isTenantAdministrativeAuthority');
       expect(source).toMatch(
         /import\s*\{\s*canAdministerCompany\s*\}\s*from\s*['"]@controleonline\/ui-common\/src\/react\/utils\/companyAuthority['"]/,

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

@@ -169,3 +169,25 @@ test('long text enables marquee duplicate and starts loop animation', async () =
   assert.ok(lastLoopConfig, 'Animated.loop should start when overflowing');
   assert.ok(animationStarts >= 1);
 });
+
+test('native text keeps intrinsic width even when style carries flex: 1 (android #77)', () => {
+  const RuntimeFooterMarqueeText = loadComponent();
+  const renderer = require('react-test-renderer');
+
+  let tree;
+  renderer.act(() => {
+    tree = renderer.create(
+      React.createElement(RuntimeFooterMarqueeText, {
+        text: 'Samsung • DEVICE / v1.10.55',
+        color: '#111',
+        style: {flex: 1, minWidth: 0, fontSize: 11},
+      }),
+    );
+  });
+
+  const text = tree.root.findAllByType('Text')[0];
+  const flat = Object.assign({}, ...[].concat(text.props.style));
+  assert.equal(flat.flexBasis, 'auto');
+  assert.equal(flat.flexGrow, 0);
+  assert.equal(flat.flexShrink, 0);
+});

package/src/tests/react/components/providerEffects.fingerprint.json

@@ -0,0 +1,47 @@
+{
+  "web": [
+    "ea75d6ac3ae9c95e52c766bdb34d53bc105f14c39d99296870fe5ffc22871c9d",
+    "91eb2c6aa1cf5924d8741f6baffc1a1a55ee3a4724ccefa8bde421f9c64150bc",
+    "d9e3b6b0bda60f7ee7c20f3b764ef1cf6b3c4505b2dd0c14149d738afc4b7250",
+    "dc4de55291686857d4e1e9f450bf94dd7711e6d553b7f7c25f12cdcc15699e8d",
+    "3aac47f15f506f8a4f4c6c43025ac01df0d0686f53aeb2693cf995481f542300",
+    "401f05b86cbf58f51cf0f8daa9daedd9a11405bd88fd92c0c50f4425cb7426c8",
+    "6096f06d9b6dffc3402b2b23bdf1a49acb9d8b07c32a406cda0576d23835123d",
+    "08c333c63aab840cc566dfd7e1859624001c1e0cf41385b4fbd320a0772f8683",
+    "66e252433a95f6c234521d17405723faa27ff255950355d148c8915a6a121e50",
+    "9defefb6dd3fe794f7f5165415ad66bbf9364feabe2950f9101ee75b4e920bbd",
+    "e7e947e510177219121d1983055a9d3c1bbff5e2be0e1ed88f0ef33b8b04550d",
+    "6a48d5207d4e6ab178c856cba730992f4b7033e72328407bbf9687ab43fea31a",
+    "b855618a73da5452161007146c7e6dbc7a455377088e5f3b39740a50785717ea",
+    "4e436b845f79c9abb9b02ce885712f3d86cbfc58e7ac013bbf12aa4cadf8766b",
+    "b4a82937d543b1ec702eb39a4f59c50fb405591a5cf47d57f26ddf3204c00c79",
+    "52f1d9c7c0e526b45a517d5ca6d0bad10f6f13f9e28710d07fbe2c6390fd4663",
+    "7fd064dfd9939c27fd50ef7e98870027d6a243818b01a7961250c3541c489b37",
+    "5d82d7da62a6a2a1ea620b2e20aed981e54a57f7481d0d7b80274836d18c67b1",
+    "06a38bfbc8bea082ea8aed3d115eb0be46a66cf4067e15002a93332edcfe3e18",
+    "45f67afbb83db2fc03d4db5eb1cb97d0aef89960f7fed857a13104dc0d577996"
+  ],
+  "native": [
+    "ea75d6ac3ae9c95e52c766bdb34d53bc105f14c39d99296870fe5ffc22871c9d",
+    "91eb2c6aa1cf5924d8741f6baffc1a1a55ee3a4724ccefa8bde421f9c64150bc",
+    "ca6d2dbaff4a3ceaf72de6a7309dd1fff040b8c0c8becd7e9ad9c5e951747e33",
+    "3568e8c2ad8a62ef8ecd3381ca564567348ac30775f77a8e162d0627e65c3149",
+    "251907db50e73d845caad88cebde534715c714c5656c71ba101840d1aa387995",
+    "69a271277a710e366340f53a73a0ad69c349c0d57903604895a577502982f968",
+    "d9e3b6b0bda60f7ee7c20f3b764ef1cf6b3c4505b2dd0c14149d738afc4b7250",
+    "ca2d71f74eee04d29f12f99eb6ad2a027d997e059ca624b050b626c33af048da",
+    "00aec313bce033cee0f7ec578b884c057d99082fc5d70bd4c427b71f443ac3be",
+    "89b61590c0cd1f85d8a0a91d73c2ed76879207aee74e4e06a5a299cd78569ced",
+    "e7225c56b302453cc1dca664733fd612b5537b4f172f325635366449d5f9204b",
+    "00726c053f3dd7242abc46334bda5e2d85b3881b41027a0bd6cf92d8017f089f",
+    "6a48d5207d4e6ab178c856cba730992f4b7033e72328407bbf9687ab43fea31a",
+    "ccb781af89d778267e58ed7d92a076bb9266074fabadaacf3615309565c221cd",
+    "4e436b845f79c9abb9b02ce885712f3d86cbfc58e7ac013bbf12aa4cadf8766b",
+    "b4a82937d543b1ec702eb39a4f59c50fb405591a5cf47d57f26ddf3204c00c79",
+    "52f1d9c7c0e526b45a517d5ca6d0bad10f6f13f9e28710d07fbe2c6390fd4663",
+    "17ed12ca2369541649112e7e894eb8e9e7f5af739406ae752e49c41f9d0f954c",
+    "5d82d7da62a6a2a1ea620b2e20aed981e54a57f7481d0d7b80274836d18c67b1",
+    "2e76f30b34a18f41ab7cc6e78525ac8e88d5dffe1aa76f92be795d4d4800652a",
+    "a8b1a30dc99d18b5c0c1361c71a604efc4a546e3af45bb9e33f4d51469bd570a"
+  ]
+}

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

@@ -0,0 +1,24 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import crypto from 'node:crypto';
+import {parse} from '@babel/parser';
+import traverse from '@babel/traverse';
+import expected from './providerEffects.fingerprint.json';
+
+// Protect the unrelated auth/device/bootstrap callbacks while extracting hooks.
+// Fingerprints record the approved runtime callbacks, dependencies and hook order.
+it.each(['web', 'native'])('preserves bootstrap effects in %s', platform => {
+  const root = path.resolve(__dirname, '../../../react/components');
+  const provider = parse(fs.readFileSync(path.join(root, `DefaultProvider.${platform}.js`), 'utf8'), {sourceType: 'module', plugins: ['jsx']});
+  const hooks = new Map();
+  for (const group of ['lifecycle', 'configuration']) {
+    const code = fs.readFileSync(path.join(root, `DefaultProvider.${platform}.${group}.js`), 'utf8');
+    traverse(parse(code, {sourceType: 'module'}), {FunctionDeclaration(p) {
+      const effect = p.node.body.body.find(n => n.expression?.callee?.name === 'useEffect');
+      if (effect) hooks.set(p.node.id.name, crypto.createHash('sha256').update(code.slice(effect.start, effect.end)).digest('hex'));
+    }});
+  }
+  const actual = [];
+  traverse(provider, {CallExpression(p) {if (hooks.has(p.node.callee.name)) actual.push(hooks.get(p.node.callee.name));}});
+  expect(actual).toEqual(expected[platform]);
+});

package/src/tests/react/utils/runtimeZoom.test.js

@@ -31,6 +31,9 @@ test('builds compensated container dimensions for native scaled content', () =>
     buildRuntimeZoomStyle(70),
     {
       alignSelf: 'flex-start',
+      flexBasis: 'auto',
+      flexGrow: 0,
+      flexShrink: 0,
       height: '142.85714285714286%',
       transform: [{scale: 0.7}],
       transformOrigin: 'top left',
@@ -44,6 +47,9 @@ test('uses viewport pixels on native so scale origin stays top-left without dist
     buildRuntimeZoomStyle(70, {viewport: {width: 360, height: 800}}),
     {
       alignSelf: 'flex-start',
+      flexBasis: 'auto',
+      flexGrow: 0,
+      flexShrink: 0,
       height: 800 / 0.7,
       transform: [{scale: 0.7}],
       transformOrigin: 'top left',