@controleonline/ui-common 1.2.70

package/src/react/components/ProductCatalogCacheService.js

@@ -0,0 +1,45 @@
+import React, {useEffect} from 'react';
+import {useStore} from '@store';
+
+const ProductCatalogCacheService = () => {
+  const categoriesStore = useStore('categories');
+  const productsStore = useStore('products');
+
+  const categoryActions = categoriesStore.actions;
+  const productActions = productsStore.actions;
+
+  const {messages, message} = categoriesStore.getters;
+
+  useEffect(() => {
+    if (
+      messages &&
+      messages.length > 0 &&
+      (!message || Object.keys(message).length === 0)
+    ) {
+      const nextMessages = [...messages];
+      categoryActions.setMessage(nextMessages.pop());
+      categoryActions.setMessages(nextMessages);
+    }
+  }, [categoryActions, message, messages]);
+
+  useEffect(() => {
+    if (!message || Object.keys(message).length === 0) {
+      return;
+    }
+
+    if (message?.command !== 'clear-product-cache') {
+      categoryActions.setMessage(null);
+      return;
+    }
+
+    localStorage.setItem('categories', JSON.stringify([]));
+    localStorage.removeItem('categories-company');
+    categoryActions.setItems([]);
+    productActions.setItems([]);
+    categoryActions.setMessage(null);
+  }, [categoryActions, message, productActions]);
+
+  return null;
+};
+
+export default ProductCatalogCacheService;

package/src/react/components/RemoteCheckoutService.js

@@ -0,0 +1,292 @@
+import React, {useEffect, useCallback, useRef} from 'react';
+
+import {api} from '@controleonline/ui-common/src/api';
+import Formatter from '@controleonline/ui-common/src/utils/formatter';
+import {
+  createInvoiceForGatewayFreePayment,
+  isGatewayFreePayment,
+} from '@controleonline/ui-common/src/react/utils/cashPayment';
+import {
+  normalizeGatewayPaymentError,
+  runConfiguredGatewayPayment,
+} from '@controleonline/ui-common/src/react/utils/paymentGatewayExecution';
+import {
+  buildRemotePaymentResultMessage,
+  isRemotePaymentRequestMessage,
+  normalizeRemotePaymentRequestKey,
+} from '@controleonline/ui-common/src/react/utils/remotePayment';
+
+import {useStore} from '@store';
+
+const normalizeStatusKey = value => String(value || '').trim().toLowerCase();
+
+const extractCollectionItems = response => {
+  if (Array.isArray(response)) return response;
+  if (Array.isArray(response?.member)) return response.member;
+  if (Array.isArray(response?.['hydra:member'])) return response['hydra:member'];
+  return [];
+};
+
+const buildStatusIriFromId = value => {
+  const normalizedId = String(value || '').replace(/\D/g, '');
+  return normalizedId ? `/statuses/${normalizedId}` : null;
+};
+
+let posPaidInvoiceStatusIriCache = null;
+
+const resolvePosPaidInvoiceStatusIri = async fallbackStatusId => {
+  if (posPaidInvoiceStatusIriCache) return posPaidInvoiceStatusIriCache;
+
+  const fallbackIri = buildStatusIriFromId(fallbackStatusId);
+
+  try {
+    const response = await api.fetch('statuses', {
+      params: {
+        context: 'invoice',
+        realStatus: 'closed',
+        status: 'paid',
+      },
+    });
+    const items = extractCollectionItems(response);
+    const matchedStatus =
+      items.find(
+        item =>
+          normalizeStatusKey(item?.realStatus) === 'closed' &&
+          normalizeStatusKey(item?.status) === 'paid',
+      ) || items[0];
+    const resolvedIri =
+      matchedStatus?.['@id'] || buildStatusIriFromId(matchedStatus?.id) || fallbackIri;
+
+    if (resolvedIri) {
+      posPaidInvoiceStatusIriCache = resolvedIri;
+    }
+
+    return resolvedIri;
+  } catch {
+    return fallbackIri;
+  }
+};
+
+const buildOrderIri = value => {
+  const normalizedId = String(value || '').replace(/\D/g, '');
+  return normalizedId ? `/orders/${normalizedId}` : null;
+};
+
+const Checkout = () => {
+  const deviceConfigStore = useStore('device_config');
+  const deviceConfigGetters = deviceConfigStore.getters;
+  const categoriesStore = useStore('categories');
+  const categoryActions = categoriesStore.actions;
+  const {item: device} = deviceConfigGetters;
+  const ordersStore = useStore('orders');
+  const ordersActions = ordersStore.actions;
+  const orderProductsStore = useStore('order_products');
+  const orderProductsActions = orderProductsStore.actions;
+  const invoiceStore = useStore('invoice');
+  const invoiceGetters = invoiceStore.getters;
+  const invoiceActions = invoiceStore.actions;
+  const peopleStore = useStore('people');
+  const peopleGetters = peopleStore.getters;
+  const {currentCompany, defaultCompany} = peopleGetters;
+  const websocketStore = useStore('websocket');
+  const websocketActions = websocketStore.actions;
+  const {messages, message} = invoiceGetters;
+  const processingMessageKeyRef = useRef('');
+
+  const clear = useCallback(() => {
+    localStorage.removeItem('master-device');
+    invoiceActions.setError('');
+    invoiceActions.setMessage(null);
+    invoiceActions.setMessages([]);
+    categoryActions.setItems(null);
+    ordersActions.setItem(null);
+    orderProductsActions.setItems([]);
+    invoiceActions.setItems([]);
+    ordersActions.setPayable(0);
+  }, [categoryActions, invoiceActions, orderProductsActions, ordersActions]);
+
+  useEffect(() => {
+    if (
+      messages &&
+      messages.length > 0 &&
+      (!message || Object.keys(message).length === 0)
+    ) {
+      const m = [...messages];
+      invoiceActions.setMessage(m.pop());
+      invoiceActions.setMessages(m);
+    }
+  }, [messages, message]);
+
+  const createInvoice = useCallback(async (selectedPayment, total, orderItem) => {
+    const paidStatusIri = await resolvePosPaidInvoiceStatusIri(
+      defaultCompany?.configs['pos-paid-status'],
+    );
+
+    if (!paidStatusIri) {
+      invoiceActions.setError(
+        'Nao foi possivel resolver o status pago da invoice do PDV.',
+      );
+      return;
+    }
+
+    const payload = {
+      dueDate: Formatter.getCurrentDate(),
+      status: paidStatusIri,
+      destinationWallet: selectedPayment.wallet['@id'],
+      paymentType: selectedPayment.paymentType['@id'],
+      price: total,
+      receiver: '/people/' + currentCompany.id,
+      order: orderItem?.['@id'],
+    };
+
+    return await invoiceActions.save(payload);
+  }, [
+    currentCompany?.id,
+    defaultCompany?.configs,
+    invoiceActions,
+  ]);
+
+  useEffect(() => {
+    if (!isRemotePaymentRequestMessage(message)) {
+      return;
+    }
+
+    const messageKey = JSON.stringify({
+      action: message?.action,
+      masterDevice: message?.['master-device'],
+      order: message?.order,
+      payment: message?.wallet_payment_type?.paymentType?.['@id'],
+      requestKey: normalizeRemotePaymentRequestKey(message?.requestKey),
+      total: message?.total,
+    });
+
+    if (processingMessageKeyRef.current === messageKey) {
+      return;
+    }
+
+    processingMessageKeyRef.current = messageKey;
+
+    const processMessage = async () => {
+      const payment = message.wallet_payment_type;
+      const total = Number(message.total || 0);
+      const requestKey = normalizeRemotePaymentRequestKey(message?.requestKey);
+      const masterDeviceId = String(message?.['master-device'] || '').trim();
+
+      const sendRemoteResult = async result => {
+        if (!masterDeviceId) {
+          return;
+        }
+
+        try {
+          await websocketActions.send(
+            buildRemotePaymentResultMessage({
+              destinationDeviceId: masterDeviceId,
+              orderId: message?.order,
+              payment,
+              requestKey,
+              targetDeviceId: device?.id || device?.device?.device || '',
+              targetDeviceLabel:
+                device?.device?.alias ||
+                device?.device?.name ||
+                device?.device?.device ||
+                '',
+              targetGateway: device?.configs?.['pos-gateway'] || '',
+              total,
+              ...result,
+            }),
+          );
+        } catch {
+          // silencioso: o pagamento ja foi executado neste equipamento
+        }
+      };
+
+      try {
+        localStorage.setItem(
+          'master-device',
+          JSON.stringify({id: message['master-device']}),
+        );
+
+        const loadedOrder = await ordersActions.get(message.order);
+        const orderIri = loadedOrder?.['@id'] || buildOrderIri(message.order);
+        const loadedOrderProducts = orderIri
+          ? await orderProductsActions
+              .getItems({
+                order: orderIri,
+              })
+              .catch(() => [])
+          : [];
+        let createdInvoice = null;
+        let paidAmount = total;
+
+        if (isGatewayFreePayment(payment)) {
+          await createInvoiceForGatewayFreePayment({
+            payment,
+            total,
+            createInvoice: async (selectedPayment, paidTotal) => {
+              createdInvoice = await createInvoice(
+                selectedPayment,
+                paidTotal,
+                loadedOrder,
+              );
+              return createdInvoice;
+            },
+          });
+          await sendRemoteResult({
+            invoice: createdInvoice,
+            paidAmount,
+            status: 'success',
+          });
+          return;
+        }
+
+        const gatewayResult = await runConfiguredGatewayPayment({
+          gateway: device?.configs?.['pos-gateway'],
+          installments: payment?.installments,
+          order: loadedOrder,
+          orderProducts: loadedOrderProducts,
+          payment,
+          total,
+        });
+        paidAmount = gatewayResult?.paidAmount || total;
+
+        createdInvoice = await createInvoice(payment, paidAmount, loadedOrder);
+        await sendRemoteResult({
+          invoice: createdInvoice,
+          paidAmount,
+          status: 'success',
+        });
+      } catch (error) {
+        const errorMessage = normalizeGatewayPaymentError(
+          error,
+          'Nao foi possivel concluir o pagamento remoto.',
+        );
+        invoiceActions.setError(errorMessage);
+        await sendRemoteResult({
+          error: errorMessage,
+          status: 'error',
+        });
+      } finally {
+        clear();
+        processingMessageKeyRef.current = '';
+      }
+    };
+
+    processMessage();
+  }, [
+    clear,
+    createInvoice,
+    device?.configs,
+    device?.device,
+    device?.id,
+    invoiceActions,
+    message,
+    orderProductsActions,
+    ordersActions,
+    websocketActions,
+  ]);
+
+  return null;
+};
+
+export default Checkout;
+// TODO(store-first): quando este arquivo for mexido, mover a leitura para stores, remover api.fetch e evitar repassar dados em objetos quando o store ja resolver isso.

package/src/react/components/RuntimeBottomNavigationBar.js

@@ -0,0 +1,151 @@
+import React, {useEffect, useMemo, useState} from 'react';
+import {useNavigationState} from '@react-navigation/native';
+import {useStore} from '@store';
+import {api} from '@controleonline/ui-common/src/api';
+import {env as APP_ENV} from '@env';
+import {colors as runtimeColors} from '@controleonline/../../src/styles/colors';
+import {resolveThemePalette} from '@controleonline/../../src/styles/branding';
+import BottomNavigationBar from '@controleonline/ui-common/src/react/components/BottomNavigationBar';
+import {
+  getBottomNavigationPreset,
+  resolveBottomNavigationRoute,
+} from '@controleonline/ui-common/src/react/components/BottomNavigationBar.config';
+import {
+  filterRuntimeMenuModulesByType,
+  normalizeAppType,
+  normalizeRuntimeMenuResponse,
+  resolveRuntimeMenuLabel,
+} from '@controleonline/ui-common/src/react/utils/runtimeMenu';
+
+const sortRuntimeMenuItems = (left, right) => {
+  const orderDiff = Number(left?.sortOrder || 0) - Number(right?.sortOrder || 0);
+  if (orderDiff !== 0) return orderDiff;
+  return String(left?.label || '').localeCompare(String(right?.label || ''));
+};
+
+const RuntimeBottomNavigationBar = ({
+  activeRouteName: activeRouteNameProp,
+  colors: colorsOverride,
+  disabled: disabledOverride,
+  itemFilter,
+  itemMapper,
+  menuType = 'toolbar',
+  navigation,
+  presetKey,
+  routeAliases: routeAliasesProp,
+  testID = 'bottom-navigation',
+}) => {
+  const state = useNavigationState(current => current);
+  const activeRouteName =
+    activeRouteNameProp || state?.routes?.[state.index]?.name || 'HomePage';
+
+  const themeStore = useStore('theme');
+  const peopleStore = useStore('people');
+  const themeGetters = themeStore?.getters || {};
+  const peopleGetters = peopleStore?.getters || {};
+  const currentCompany = peopleGetters.currentCompany || {};
+  const themeColors = themeGetters.colors || {};
+  const [runtimeMenus, setRuntimeMenus] = useState([]);
+  const preset = presetKey ? getBottomNavigationPreset(presetKey) : null;
+  const routeAliases = routeAliasesProp || preset?.routeAliases || {};
+  const appType = normalizeAppType(APP_ENV.APP_TYPE);
+
+  useEffect(() => {
+    if (!currentCompany?.id || !menuType) {
+      setRuntimeMenus([]);
+      return undefined;
+    }
+
+    let cancelled = false;
+    setRuntimeMenus([]);
+
+    api
+      .fetch('menus-people', {
+        params: {
+          myCompany: currentCompany.id,
+          appType,
+          menuType,
+        },
+      })
+      .then(result => {
+        if (!cancelled) {
+          setRuntimeMenus(
+            normalizeRuntimeMenuResponse(result, {
+              appType,
+              allowFallback: false,
+            }),
+          );
+        }
+      })
+      .catch(() => {
+        if (!cancelled) {
+          setRuntimeMenus([]);
+        }
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [appType, currentCompany?.id, menuType]);
+
+  const colors = useMemo(() => {
+    if (colorsOverride) {
+      return colorsOverride;
+    }
+
+    return resolveThemePalette(
+      {
+        ...themeColors,
+        ...(currentCompany?.theme?.colors || {}),
+      },
+      runtimeColors,
+    );
+  }, [colorsOverride, currentCompany?.theme?.colors, themeColors]);
+
+  const navItems = useMemo(() => {
+    const mapper = typeof itemMapper === 'function' ? itemMapper : item => item;
+    const filter = typeof itemFilter === 'function' ? itemFilter : () => true;
+
+    return filterRuntimeMenuModulesByType(runtimeMenus, menuType)
+      .flatMap(module => (Array.isArray(module?.menus) ? module.menus : []))
+      .map(item => mapper({...item}))
+      .filter(Boolean)
+      .filter(filter)
+      .sort(sortRuntimeMenuItems)
+      .map(item => ({
+        route: item.route,
+        icon: item.icon || 'circle',
+        label: resolveRuntimeMenuLabel(item, global.t?.t),
+        routeParams: item.routeParams,
+        menuType: item.menuType,
+      }))
+      .filter(item => Boolean(item.route));
+  }, [itemFilter, itemMapper, menuType, runtimeMenus]);
+
+  const resolvedActiveRoute = resolveBottomNavigationRoute(
+    routeAliases,
+    activeRouteName,
+  );
+  const knownRoute = navItems.some(item => item.route === resolvedActiveRoute);
+  const effectiveActiveRoute = knownRoute
+    ? resolvedActiveRoute
+    : navItems[0]?.route || activeRouteName;
+
+  const isDisabled =
+    typeof disabledOverride === 'boolean'
+      ? disabledOverride
+      : !currentCompany || Object.keys(currentCompany).length === 0;
+
+  return (
+    <BottomNavigationBar
+      activeRouteName={effectiveActiveRoute}
+      colors={colors}
+      disabled={isDisabled}
+      items={navItems}
+      navigation={navigation}
+      testID={testID}
+    />
+  );
+};
+
+export default RuntimeBottomNavigationBar;

package/src/react/components/RuntimeInfoFooter.js

@@ -0,0 +1,214 @@
+import React, {useEffect, useMemo, useState} from 'react';
+import {ActivityIndicator, Text, View, useWindowDimensions} from 'react-native';
+import {useStore, useStores} from '@store';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
+import {colors as runtimeColors} from '@controleonline/../../src/styles/colors';
+import {
+  DEVICE_RUNTIME_DEBUG_INFO_ENABLED_KEY,
+  isTruthyValue,
+  parseConfigsObject,
+} from '@controleonline/ui-common/src/react/config/deviceConfigBootstrap';
+import {
+  getRuntimeFooterDebugInfo,
+  getRuntimeFooterPrimaryText,
+  getRuntimeFooterText,
+} from '@controleonline/ui-common/src/react/utils/runtimeFooter';
+import styles from './RuntimeInfoFooter.styles';
+
+const ROTATION_INTERVAL_MS = 6000;
+const COMPACT_BREAKPOINT = 720;
+const MAX_INLINE_TEXT_LENGTH = 84;
+
+const RuntimeInfoFooter = ({appVersion, defaultCompany, device, colors}) => {
+  const {width} = useWindowDimensions();
+  const insets = useSafeAreaInsets();
+  const [activeIndex, setActiveIndex] = useState(0);
+  const allStores = useStores(state => state);
+  const deviceConfigStore = useStore('device_config');
+  const runtimeDebugStore = useStore('runtime_debug');
+  const deviceConfigItem = deviceConfigStore?.getters?.item || {};
+  const runtimeDebugSummary = runtimeDebugStore?.getters?.summary || {};
+
+  const footerDebugInfo = useMemo(
+    () =>
+      getRuntimeFooterDebugInfo({
+        device,
+        appVersion,
+        deviceConfig: deviceConfigItem,
+      }),
+    [appVersion, device, deviceConfigItem],
+  );
+  const primaryText = useMemo(
+    () =>
+      footerDebugInfo.primaryText ||
+      getRuntimeFooterPrimaryText({
+        device,
+        appVersion,
+        deviceConfig: deviceConfigItem,
+      }),
+    [appVersion, device, deviceConfigItem, footerDebugInfo.primaryText],
+  );
+  const companyFooterText = useMemo(
+    () => getRuntimeFooterText(defaultCompany),
+    [defaultCompany?.configs],
+  );
+  const deviceConfigs = useMemo(
+    () => parseConfigsObject(deviceConfigItem?.configs),
+    [deviceConfigItem?.configs],
+  );
+  const showDebugInfo = useMemo(
+    () =>
+      isTruthyValue(
+        deviceConfigs?.[DEVICE_RUNTIME_DEBUG_INFO_ENABLED_KEY],
+      ),
+    [deviceConfigs],
+  );
+
+  const entries = useMemo(
+    () => [primaryText, companyFooterText].filter(Boolean),
+    [companyFooterText, primaryText],
+  );
+  const inlineText = useMemo(() => entries.join('  •  '), [entries]);
+  const shouldRotate =
+    !showDebugInfo &&
+    entries.length > 1 &&
+    (width < COMPACT_BREAKPOINT || inlineText.length > MAX_INLINE_TEXT_LENGTH);
+  const footerEntries = useMemo(
+    () =>
+      Object.values(runtimeDebugSummary?.entries || {})
+        .filter(entry => entry && Array.isArray(entry.lines) && entry.lines.length > 0)
+        .sort((left, right) => {
+          const leftOrder = Number(left?.order || 100);
+          const rightOrder = Number(right?.order || 100);
+          if (leftOrder !== rightOrder) {
+            return leftOrder - rightOrder;
+          }
+
+          const leftTime = Date.parse(left?.updatedAt || '');
+          const rightTime = Date.parse(right?.updatedAt || '');
+          if (Number.isFinite(leftTime) && Number.isFinite(rightTime)) {
+            return rightTime - leftTime;
+          }
+
+          if (Number.isFinite(rightTime)) {
+            return 1;
+          }
+
+          if (Number.isFinite(leftTime)) {
+            return -1;
+          }
+
+          return 0;
+        }),
+    [runtimeDebugSummary?.entries],
+  );
+  const socketEntry = useMemo(
+    () => footerEntries.find(entry => entry?.key === 'socket') || null,
+    [footerEntries],
+  );
+  const debugLines = useMemo(
+    () => footerEntries.flatMap(entry => entry?.lines || []),
+    [footerEntries],
+  );
+  const socketIndicatorColor = socketEntry?.indicatorColor;
+  const hasStoreLoading = useMemo(
+    () =>
+      Object.values(allStores || {}).some(
+        store =>
+          store?.getters?.isLoading === true ||
+          store?.getters?.isSaving === true,
+      ),
+    [allStores],
+  );
+  const bottomInset = Math.max(Number(insets.bottom) || 0, 16);
+
+  useEffect(() => {
+    if (!shouldRotate || entries.length <= 1) {
+      setActiveIndex(0);
+      return;
+    }
+
+    const intervalId = setInterval(() => {
+      setActiveIndex(current => (current + 1) % entries.length);
+    }, ROTATION_INTERVAL_MS);
+
+    return () => {
+      clearInterval(intervalId);
+    };
+  }, [entries.length, shouldRotate]);
+
+  if (entries.length === 0 && !showDebugInfo) {
+    return null;
+  }
+
+  const displayedText = shouldRotate ? entries[activeIndex] : inlineText;
+  const backgroundColor = colors?.background || runtimeColors.background;
+  const borderColor = colors?.border || runtimeColors.border;
+  const textColor = colors?.textSecondary || runtimeColors.textSecondary;
+  const loadingColor = colors?.primary || runtimeColors.primary || textColor;
+
+  return (
+    <View pointerEvents="none" style={styles.shell}>
+      <View
+        testID="runtime-info-footer"
+        style={[
+          styles.container,
+          showDebugInfo ? styles.containerExpanded : null,
+          {
+            backgroundColor,
+            borderTopColor: borderColor,
+            paddingBottom: bottomInset,
+          },
+        ]}>
+        <View style={styles.primaryRow}>
+          <View style={styles.statusDotWrap}>
+            <View
+              style={[
+                styles.statusDot,
+                {
+                  backgroundColor: socketIndicatorColor,
+                },
+              ]}
+            />
+          </View>
+          <Text
+            numberOfLines={1}
+            ellipsizeMode="tail"
+            minimumFontScale={0.85}
+            style={[
+              styles.primaryText,
+              {
+                color: textColor,
+              },
+            ]}>
+            {showDebugInfo ? inlineText || primaryText || device?.id || '--' : displayedText}
+          </Text>
+          <View style={styles.loadingWrap}>
+            {hasStoreLoading && (
+              <ActivityIndicator color={loadingColor} size="small" />
+            )}
+          </View>
+        </View>
+
+        {showDebugInfo &&
+          debugLines.map((line, index) => (
+            <Text
+              key={`runtime-debug-line-${index}`}
+              numberOfLines={1}
+              ellipsizeMode="tail"
+              minimumFontScale={0.82}
+              style={[
+                styles.debugText,
+                {
+                  color: textColor,
+                },
+              ]}>
+              {line}
+            </Text>
+          ))}
+      </View>
+    </View>
+  );
+};
+
+export default RuntimeInfoFooter;