@controleonline/ui-common 1.2.71 → 1.2.75

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

@@ -18,15 +18,18 @@ import RuntimeInfoFooter from '@controleonline/ui-common/src/react/components/Ru
 import { useStore } from '@store';
 import { api } from '@controleonline/ui-common/src/api';
 import {app_type} from '@appType';
-import { env as APP_ENV } from '@env';
+import {env as APP_ENV} from '@env';
 import { isPublicRoute } from '../router/publicRoutes';
-const { resolveConfiguredLanguage } = require('../utils/runtimeLanguage');
+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,6 +49,9 @@ import {
 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';
@@ -143,8 +149,12 @@ const selectRuntimeDeviceConfig = ({
     })
     .sort((left, right) => Number(right?.id || 0) - Number(left?.id || 0))[0] || null;
 };
-
-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');
@@ -186,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') || '{}'),
   );
@@ -211,12 +224,48 @@ export const DefaultProvider = ({ children, onBootstrapReady }) => {
     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);
@@ -274,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?.({});
@@ -305,7 +337,7 @@ export const DefaultProvider = ({ children, onBootstrapReady }) => {
     if (global.t) {
       delete global.t;
     }
-  }, [isLogged, isPublicRouteActive]);
+  }, [isLogged, isPublicRouteActive, translateActions]);
 
   useEffect(() => {
     if (
@@ -526,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;
@@ -561,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 () => {
@@ -713,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,
@@ -770,24 +830,38 @@ 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 ||
+      !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) {
@@ -829,13 +903,9 @@ 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,
         });
         const parsedColors = parseThemeCss(cssText);
         setBaseThemeColors(parsedColors);
@@ -875,6 +945,10 @@ export const DefaultProvider = ({ children, onBootstrapReady }) => {
     isShopClientApp,
   ]);
 
+  if (requiresTranslateBootstrap && !isTranslateBootstrapReady) {
+    return <View style={providerStyles.loadingContainer} />;
+  }
+
   return (
       <ThemeContext.Provider value={themeContextValue}>
         <View
@@ -884,7 +958,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}

package/src/react/components/NetworkPrinterPreviewModal.js

@@ -0,0 +1,249 @@
+import React, {useMemo} from 'react';
+import {
+  Image,
+  Modal,
+  ScrollView,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import Icon from 'react-native-vector-icons/Feather';
+
+import styles from './NetworkPrinterPreviewModal.styles';
+
+const tt = key => global.t?.t('configs', 'printPreview', key);
+
+const clampColumns = value => {
+  const parsedValue = Number(String(value || '').replace(/\D+/g, ''));
+  if (!Number.isFinite(parsedValue) || parsedValue <= 0) {
+    return 48;
+  }
+
+  return Math.min(Math.max(parsedValue, 24), 80);
+};
+
+const safeText = value => String(value || '').trim();
+
+const normalizePreviewLine = line => {
+  if (line && typeof line === 'object') {
+    return {
+      ...line,
+      text: safeText(line.text),
+    };
+  }
+
+  return {
+    text: safeText(line),
+  };
+};
+
+const centerLine = (value, columns) => {
+  const text = safeText(value);
+  if (text.length >= columns) {
+    return text.slice(0, columns);
+  }
+
+  const leftPad = Math.floor((columns - text.length) / 2);
+  return `${' '.repeat(leftPad)}${text}`;
+};
+
+const wrapLine = (value, columns) => {
+  const words = safeText(value).split(/\s+/).filter(Boolean);
+  const lines = [];
+  let currentLine = '';
+
+  words.forEach(word => {
+    if (!currentLine) {
+      currentLine = word;
+      return;
+    }
+
+    if (`${currentLine} ${word}`.length <= columns) {
+      currentLine = `${currentLine} ${word}`;
+      return;
+    }
+
+    lines.push(currentLine);
+    currentLine = word;
+  });
+
+  if (currentLine) {
+    lines.push(currentLine);
+  }
+
+  return lines.length > 0 ? lines : [''];
+};
+
+const wrapPreviewLine = (line, columns) => {
+  const normalizedLine = normalizePreviewLine(line);
+  return wrapLine(normalizedLine.text, columns).map(text => ({
+    ...normalizedLine,
+    text,
+  }));
+};
+
+const NetworkPrinterPreviewModal = ({
+  visible = false,
+  onClose,
+  codePage = '',
+  columns,
+  documents = [],
+  error = '',
+  logoUrl = '',
+  loading = false,
+  printerModel,
+  printerManufacturer,
+  subtitle = '',
+  title = '',
+  transport,
+}) => {
+  const normalizedColumns = useMemo(() => clampColumns(columns), [columns]);
+  const normalizedDocuments = useMemo(
+    () => (Array.isArray(documents) ? documents : []),
+    [documents],
+  );
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="fade"
+      onRequestClose={onClose}>
+      <View style={styles.backdrop}>
+        <View style={styles.panel}>
+          <View style={styles.header}>
+            <View style={styles.headerCopy}>
+              <Text style={styles.title}>{title || tt('title') || 'Visualizacao da impressao'}</Text>
+              <Text style={styles.subtitle}>
+                {subtitle ||
+                  tt('subtitle') ||
+                  'Simulacao local para conferir largura, quebras e campos do cupom.'}
+              </Text>
+            </View>
+            <TouchableOpacity
+              style={styles.closeButton}
+              activeOpacity={0.85}
+              onPress={onClose}>
+              <Icon name="x" size={18} color="#0F172A" />
+            </TouchableOpacity>
+          </View>
+
+          <ScrollView contentContainerStyle={styles.content}>
+            <View style={styles.metaGrid}>
+              <View style={styles.metaChip}>
+                <Text style={styles.metaText}>
+                  {`${normalizedColumns} ${tt('columns') || 'colunas'}`}
+                </Text>
+              </View>
+              <View style={styles.metaChip}>
+                <Text style={styles.metaText}>
+                  {`${tt('codePage') || 'Code page'}: ${safeText(codePage) || 'cp850'}`}
+                </Text>
+              </View>
+              <View style={styles.metaChip}>
+                <Text style={styles.metaText}>
+                  {safeText(transport) || tt('transportFallback') || 'tcp-raw'}
+                </Text>
+              </View>
+              <View style={styles.metaChip}>
+                <Text style={styles.metaText}>
+                  {[printerManufacturer, printerModel]
+                    .map(safeText)
+                    .filter(Boolean)
+                    .join(' ') || tt('modelMissing') || 'Modelo nao informado'}
+                </Text>
+              </View>
+            </View>
+
+            {loading ? (
+              <View style={styles.stateBox}>
+                <Text style={styles.stateText}>{tt('loadingRealData') || 'Carregando dados reais...'}</Text>
+              </View>
+            ) : error ? (
+              <View style={styles.errorBox}>
+                <Text style={styles.errorText}>{error}</Text>
+              </View>
+            ) : normalizedDocuments.length > 0 ? (
+              normalizedDocuments.map((document, index) => {
+                const lines = Array.isArray(document?.lines)
+                  ? document.lines
+                  : [];
+                const defaultHeaderLines = document?.hideDefaultHeader
+                  ? []
+                  : [
+                      {
+                        text: centerLine(
+                          document?.title || `${tt('copy') || 'Via'} ${index + 1}`,
+                          normalizedColumns,
+                        ),
+                      },
+                      document?.subtitle
+                        ? {text: centerLine(document.subtitle, normalizedColumns)}
+                        : null,
+                      {text: '-'.repeat(normalizedColumns)},
+                    ].filter(Boolean);
+                const paperLines = [
+                  ...defaultHeaderLines,
+                  ...lines.flatMap(line => wrapPreviewLine(line, normalizedColumns)),
+                ].filter(Boolean);
+                const receiptWidth = normalizedColumns * 8;
+
+                return (
+                  <View key={`${document?.title || 'preview'}-${index}`}>
+                    {index > 0 ? (
+                      <View style={styles.cutLine}>
+                        <Text style={styles.cutText}>{tt('cutLine') || 'picote'}</Text>
+                      </View>
+                    ) : null}
+                    <View style={styles.paper}>
+                      <View style={[styles.receiptWrap, {width: receiptWidth}]}>
+                        {logoUrl && !document?.hideLogo ? (
+                          <View style={styles.logoWrap}>
+                            <Image
+                              source={{uri: logoUrl}}
+                              style={styles.logo}
+                              resizeMode="contain"
+                            />
+                          </View>
+                        ) : null}
+                        {paperLines.map((line, lineIndex) => (
+                          <Text
+                            key={`${document?.title || 'preview'}-${index}-${lineIndex}`}
+                            style={[
+                              styles.receiptText,
+                              line.center ? styles.receiptTextCenter : null,
+                              line.bold ? styles.receiptTextBold : null,
+                              line.reverse ? styles.receiptTextReverse : null,
+                              line.reverse && line.center
+                                ? styles.receiptTextReverseCenter
+                                : null,
+                              line.large ? styles.receiptTextLarge : null,
+                            ]}>
+                            {line.text || ' '}
+                          </Text>
+                        ))}
+                      </View>
+                    </View>
+                  </View>
+                );
+              })
+            ) : (
+              <View style={styles.stateBox}>
+                <Text style={styles.stateText}>
+                  {tt('emptyData') || 'Nenhum dado real encontrado para visualizar.'}
+                </Text>
+              </View>
+            )}
+
+            <Text style={styles.hint}>
+              {tt('hint') ||
+                'Esta visualizacao ainda nao envia dados para a impressora. Os blocos separados simulam os cortes de papel usados pelas filas.'}
+            </Text>
+          </ScrollView>
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+export default NetworkPrinterPreviewModal;