@controleonline/ui-common 1.2.70 → 1.2.75

package/src/react/pages/Devices/deviceTypes/useDeviceNetworkConnectivity.js

@@ -0,0 +1,145 @@
+import {useEffect, useState} from 'react';
+import {
+  checkNetworkPrinterConnection,
+  isNetworkPrinterRuntimeSupported,
+} from '@controleonline/ui-common/src/react/services/NetworkPrinterService';
+import {
+  getDeviceConfigType,
+  isManagedNetworkDeviceType,
+  getPrinterHost,
+  normalizePrinterPort,
+  DEFAULT_NETWORK_PRINTER_PORT,
+  NETWORK_PRINTER_PORT_CONFIG_KEY,
+} from '@controleonline/ui-common/src/react/utils/printerDevices';
+import {normalizeDeviceId} from '@controleonline/ui-common/src/react/utils/paymentDevices';
+import {parseConfigsObject} from '@controleonline/ui-common/src/react/config/deviceConfigBootstrap';
+
+export function useDeviceNetworkConnectivity(deviceConfigs) {
+  const [networkConnectivityByDevice, setNetworkConnectivityByDevice] = useState({});
+
+  useEffect(() => {
+    const networkDeviceConfigs = deviceConfigs.filter(deviceConfig =>
+      isManagedNetworkDeviceType(getDeviceConfigType(deviceConfig)),
+    );
+
+    if (networkDeviceConfigs.length === 0) {
+      setNetworkConnectivityByDevice({});
+      return;
+    }
+
+    if (!isNetworkPrinterRuntimeSupported) {
+      setNetworkConnectivityByDevice(
+        networkDeviceConfigs.reduce((acc, deviceConfig) => {
+        const deviceKey = normalizeDeviceId(
+          deviceConfig?.device?.device || deviceConfig?.device?.id || deviceConfig?.id,
+        );
+
+        if (deviceKey) {
+          acc[deviceKey] = {status: 'unsupported'};
+        }
+
+        return acc;
+        }, {}),
+      );
+      return;
+    }
+
+    let cancelled = false;
+
+    setNetworkConnectivityByDevice(previousState => {
+      const nextState = {...previousState};
+
+      networkDeviceConfigs.forEach(deviceConfig => {
+        const deviceKey = normalizeDeviceId(
+        deviceConfig?.device?.device || deviceConfig?.device?.id || deviceConfig?.id,
+        );
+
+        if (deviceKey) {
+        nextState[deviceKey] = {
+          ...(nextState[deviceKey] || {}),
+          status: 'checking',
+        };
+        }
+      });
+
+      return nextState;
+    });
+
+    Promise.all(
+      networkDeviceConfigs.map(async deviceConfig => {
+        const deviceKey = normalizeDeviceId(
+        deviceConfig?.device?.device || deviceConfig?.device?.id || deviceConfig?.id,
+        );
+        const parsedConfigs = parseConfigsObject(deviceConfig?.configs);
+        const host = getPrinterHost({
+        ...(deviceConfig?.device || {}),
+        configs: parsedConfigs,
+        });
+        const port = normalizePrinterPort(
+        parsedConfigs?.[NETWORK_PRINTER_PORT_CONFIG_KEY] ||
+          DEFAULT_NETWORK_PRINTER_PORT,
+        );
+
+        if (!deviceKey || !host) {
+        return [
+          deviceKey,
+          {
+            status: 'offline',
+            error: 'IP ou hostname nao configurado.',
+          },
+        ];
+        }
+
+        try {
+        await checkNetworkPrinterConnection({host, port});
+
+        return [
+          deviceKey,
+          {
+            status: 'online',
+            host,
+            port,
+            checkedAt: Date.now(),
+          },
+        ];
+        } catch (connectError) {
+        return [
+          deviceKey,
+          {
+            status: 'offline',
+            host,
+            port,
+            checkedAt: Date.now(),
+            error:
+            connectError?.message || 'Falha ao conectar com o equipamento.',
+          },
+        ];
+        }
+      }),
+    ).then(results => {
+      if (cancelled) {
+        return;
+      }
+
+      setNetworkConnectivityByDevice(previousState => {
+        const nextState = {...previousState};
+
+        results.forEach(([deviceKey, statusEntry]) => {
+        if (!deviceKey) {
+          return;
+        }
+
+        nextState[deviceKey] = statusEntry;
+        });
+
+        return nextState;
+      });
+    });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [deviceConfigs]);
+
+  return networkConnectivityByDevice;
+}

package/src/react/pages/Devices.js

@@ -0,0 +1,183 @@
+import React, {useEffect, useMemo, useState} from 'react';
+import {Text, TouchableOpacity, View} from 'react-native';
+import {SafeAreaView} from 'react-native-safe-area-context';
+import {useNavigation} from '@react-navigation/native';
+import {useStore} from '@store';
+import {resolveThemePalette} from '@controleonline/../../src/styles/branding';
+import {colors} from '@controleonline/../../src/styles/colors';
+import CompactFilterSelector from '@controleonline/ui-default/src/react/components/filters/CompactFilterSelector';
+import {PDV_DEVICE_TYPE} from '@controleonline/ui-common/src/react/utils/printerDevices';
+import Icon from 'react-native-vector-icons/Feather';
+import {
+  ALL_DEVICE_FILTER,
+  getDeviceCreationAction,
+  getDeviceFilterAccent,
+  getDeviceFilterDefinition,
+  getDeviceFilterIcon,
+  getDeviceFilterOptions,
+  getPdvSubfilterOptions,
+  hasRegisteredDeviceFilter,
+  isPdvSubfilter,
+} from './Devices/deviceTypes';
+import { createStyles } from './Devices.styles';
+
+const tt = (type, key) => global.t?.t('configs', type, key);
+
+const Devices = () => {
+  const navigation = useNavigation();
+  const peopleStore = useStore('people');
+  const themeStore = useStore('theme');
+
+  const {currentCompany} = peopleStore.getters;
+  const {colors: themeColors} = themeStore.getters;
+
+  const [activeFilter, setActiveFilter] = useState(ALL_DEVICE_FILTER);
+
+  const brandColors = useMemo(
+    () =>
+      resolveThemePalette(
+        {...themeColors, ...(currentCompany?.theme?.colors || {})},
+        colors,
+      ),
+    [themeColors, currentCompany?.id],
+  );
+  const styles = useMemo(() => createStyles(brandColors), [brandColors]);
+  const accentPalette = useMemo(
+    () => ({
+      primary: brandColors.info,
+      success: brandColors.success,
+      danger: brandColors.error,
+      warning: brandColors.warning,
+    }),
+    [brandColors.error, brandColors.info, brandColors.success, brandColors.warning],
+  );
+
+  const filterOptions = useMemo(() => getDeviceFilterOptions(), []);
+  const pdvSubfilterOptions = useMemo(() => getPdvSubfilterOptions(), []);
+  const activeFilterDefinition = useMemo(
+    () => getDeviceFilterDefinition(activeFilter),
+    [activeFilter],
+  );
+  const topLevelActiveFilter = useMemo(
+    () => (isPdvSubfilter(activeFilter) ? PDV_DEVICE_TYPE : activeFilter),
+    [activeFilter],
+  );
+  const activeFilterAction = useMemo(
+    () => getDeviceCreationAction(topLevelActiveFilter),
+    [topLevelActiveFilter],
+  );
+  const deviceTypeSelectorOptions = useMemo(
+    () => filterOptions.map(option => ({
+      key: option.key,
+      label: option.label,
+    })),
+    [filterOptions],
+  );
+  const pdvGatewaySelectorOptions = useMemo(
+    () => [
+      {key: PDV_DEVICE_TYPE, label: tt('device_filter', 'all') || 'Todos'},
+      ...pdvSubfilterOptions.map(option => ({
+        key: option.key,
+        label: option.label,
+      })),
+    ],
+    [pdvSubfilterOptions],
+  );
+  const selectedDeviceTypeLabel = useMemo(
+    () =>
+      deviceTypeSelectorOptions.find(option => option.key === topLevelActiveFilter)?.label ||
+      tt('device_filter', 'allTypes') ||
+      'Todos os tipos',
+    [deviceTypeSelectorOptions, topLevelActiveFilter],
+  );
+  const selectedPdvGatewayLabel = useMemo(
+    () =>
+      pdvGatewaySelectorOptions.find(option => option.key === activeFilter)?.label ||
+      tt('device_filter', 'all') ||
+      'Todos',
+    [activeFilter, pdvGatewaySelectorOptions],
+  );
+  const ActiveTabComponent = activeFilterDefinition.TabComponent;
+
+  useEffect(() => {
+    if (!hasRegisteredDeviceFilter(activeFilter)) {
+      setActiveFilter(ALL_DEVICE_FILTER);
+    }
+  }, [activeFilter]);
+
+  return (
+    <SafeAreaView
+      style={[styles.container, {backgroundColor: brandColors.background}]}>
+      <View style={styles.filtersBlock}>
+        <Text style={styles.filtersLabel}>{tt('device_filter', 'filterByType') || 'Filtrar por tipo'}</Text>
+        <CompactFilterSelector
+          icon={getDeviceFilterIcon(topLevelActiveFilter)}
+          label={selectedDeviceTypeLabel}
+          title={tt('device_filter', 'filterByType') || 'Filtrar por tipo'}
+          accentColor={getDeviceFilterAccent(topLevelActiveFilter, {
+            brandColors,
+            hex: accentPalette,
+          })}
+          active={topLevelActiveFilter !== ALL_DEVICE_FILTER}
+          options={deviceTypeSelectorOptions}
+          selectedKey={topLevelActiveFilter}
+          onSelect={optionKey => {
+            setActiveFilter(optionKey);
+            return true;
+          }}
+        />
+      </View>
+
+      {topLevelActiveFilter === PDV_DEVICE_TYPE && pdvSubfilterOptions.length > 0 ? (
+        <View style={styles.filtersBlock}>
+          <Text style={styles.filtersLabel}>{tt('device_filter', 'pdvGateway') || 'Gateway do PDV'}</Text>
+          <CompactFilterSelector
+            icon={getDeviceFilterIcon(activeFilter)}
+            label={selectedPdvGatewayLabel}
+            title={tt('device_filter', 'pdvGateway') || 'Gateway do PDV'}
+            accentColor={getDeviceFilterAccent(activeFilter, {
+              brandColors,
+              hex: accentPalette,
+            })}
+            active={activeFilter !== PDV_DEVICE_TYPE}
+            options={pdvGatewaySelectorOptions}
+            selectedKey={activeFilter}
+            onSelect={optionKey => {
+              setActiveFilter(optionKey);
+              return true;
+            }}
+          />
+        </View>
+      ) : null}
+
+      {activeFilterAction ? (
+        <View style={styles.printerActionBlock}>
+          <TouchableOpacity
+            style={[
+              styles.createPrinterBtn,
+              {backgroundColor: brandColors.primary},
+            ]}
+            activeOpacity={0.86}
+            onPress={() => navigation.navigate(activeFilterAction.routeName)}>
+            <Icon name="plus-circle" size={16} color={brandColors.white} />
+            <Text style={styles.createPrinterBtnText}>
+              {activeFilterAction.label}
+            </Text>
+          </TouchableOpacity>
+
+          <Text style={styles.helperText}>
+            {activeFilterAction.helperText}
+          </Text>
+        </View>
+      ) : null}
+
+      {ActiveTabComponent ? (
+        <ActiveTabComponent
+          key={`${activeFilter}-${currentCompany?.id || 'company'}`}
+        />
+      ) : null}
+    </SafeAreaView>
+  );
+};
+
+export default Devices;

package/src/react/pages/Devices.styles.js

@@ -0,0 +1,353 @@
+import { Platform, StyleSheet } from 'react-native';
+import { colors } from '@controleonline/../../src/styles/colors';
+import { withOpacity } from '@controleonline/../../src/styles/branding';
+
+const buildCardShadow = palette =>
+  Platform.select({
+    ios: {
+      shadowColor: palette.text,
+      shadowOffset: { width: 0, height: 4 },
+      shadowOpacity: 0.06,
+      shadowRadius: 12,
+    },
+    android: { elevation: 2 },
+    web: { boxShadow: `0 4px 12px ${withOpacity(palette.text, 0.06)}` },
+  });
+
+export const createStyles = (palette = colors) => {
+  const cardShadow = buildCardShadow(palette);
+  const cardBackground = palette.cardBackground || palette.white;
+  const cardBorder = palette.cardBorder || palette.border;
+  const cardText = palette.cardText || palette.text;
+  const selectedBackground =
+    palette.cardSelectedBackground || withOpacity(palette.primary, 0.07);
+  const selectedBorder = palette.cardSelectedBorder || palette.primary;
+  const selectedText = palette.cardSelectedText || cardText;
+  const selectedBadgeBackground =
+    palette.badgeSelectedBackground || withOpacity(palette.primary, 0.14);
+  const selectedBadgeText =
+    palette.badgeSelectedText || selectedText || palette.primary;
+  return StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingHorizontal: 16,
+    paddingTop: 14,
+  },
+
+  summaryRow: {
+    flexDirection: 'row',
+    gap: 10,
+    marginBottom: 14,
+  },
+  summaryCard: {
+    flex: 1,
+    backgroundColor: cardBackground,
+    borderColor: cardBorder,
+    borderWidth: 1,
+    borderRadius: 14,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    ...cardShadow,
+  },
+  summaryLabel: {
+    fontSize: 11,
+    fontWeight: '700',
+    textTransform: 'uppercase',
+    color: palette.textSecondary,
+    marginBottom: 4,
+    letterSpacing: 0.3,
+  },
+  summaryValue: {
+    fontSize: 22,
+    fontWeight: '800',
+    color: palette.text,
+  },
+  createPrinterBtn: {
+    minHeight: 46,
+    borderRadius: 14,
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'row',
+    gap: 8,
+    marginBottom: 8,
+    ...cardShadow,
+  },
+  createPrinterBtnText: {
+    fontSize: 14,
+    fontWeight: '800',
+    color: palette.white,
+  },
+  printerActionBlock: {
+    marginBottom: 12,
+  },
+  helperText: {
+    fontSize: 12,
+    color: palette.textSecondary,
+    fontWeight: '600',
+    lineHeight: 18,
+  },
+  filtersBlock: {
+    marginBottom: 14,
+  },
+  filtersLabel: {
+    fontSize: 11,
+    fontWeight: '700',
+    color: palette.textSecondary,
+    textTransform: 'uppercase',
+    letterSpacing: 0.4,
+    marginBottom: 8,
+  },
+  loadingBox: {
+    flexDirection: 'row',
+    gap: 8,
+    alignItems: 'center',
+    marginBottom: 10,
+  },
+  loadingText: {
+    fontSize: 12,
+    color: palette.textSecondary,
+    fontWeight: '600',
+  },
+  tabContent: {
+    flex: 1,
+  },
+  tabList: {
+    flex: 1,
+  },
+  listMetaRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: 10,
+  },
+  listMetaTitle: {
+    fontSize: 14,
+    fontWeight: '800',
+    color: palette.text,
+  },
+  listMetaText: {
+    fontSize: 12,
+    fontWeight: '700',
+    color: palette.textSecondary,
+  },
+  inlineMessageBox: {
+    marginBottom: 10,
+    borderRadius: 14,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    backgroundColor: withOpacity(palette.error, 0.12),
+    borderWidth: 1,
+    borderColor: withOpacity(palette.error, 0.3),
+  },
+  inlineMessageText: {
+    fontSize: 12,
+    fontWeight: '600',
+    color: palette.error,
+    lineHeight: 18,
+  },
+
+  listContent: {
+    gap: 10,
+    flexGrow: 1,
+    paddingBottom: 24,
+  },
+  listContentEmpty: {
+    justifyContent: 'center',
+  },
+  listFooterLoader: {
+    flexDirection: 'row',
+    gap: 8,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingTop: 6,
+    paddingBottom: 18,
+  },
+
+  deviceCard: {
+    backgroundColor: cardBackground,
+    borderColor: cardBorder,
+    borderWidth: 1,
+    borderRadius: 16,
+    padding: 14,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    ...cardShadow,
+  },
+  deviceCardCurrent: {
+    backgroundColor: selectedBackground,
+    borderColor: selectedBorder,
+    borderWidth: 2,
+  },
+  cardLeft: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+    flex: 1,
+  },
+  cardTextWrap: {
+    flex: 1,
+  },
+  currentDeviceBadge: {
+    alignItems: 'center',
+    alignSelf: 'flex-start',
+    backgroundColor: selectedBadgeBackground,
+    borderColor: selectedBorder,
+    borderRadius: 999,
+    borderWidth: 1,
+    flexDirection: 'row',
+    gap: 4,
+    marginBottom: 5,
+    paddingHorizontal: 7,
+    paddingVertical: 3,
+  },
+  currentDeviceBadgeText: {
+    color: selectedBadgeText,
+    fontSize: 9,
+    fontWeight: '800',
+    letterSpacing: 0.2,
+    textTransform: 'uppercase',
+  },
+  iconBox: {
+    width: 40,
+    height: 40,
+    borderRadius: 10,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  deviceTitle: {
+    fontSize: 15,
+    fontWeight: '700',
+    color: cardText,
+  },
+  deviceSub: {
+    fontSize: 11,
+    color: palette.textSecondary,
+    marginTop: 2,
+  },
+  deviceMetaRow: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 6,
+    marginTop: 8,
+  },
+  deviceMetaChip: {
+    borderRadius: 999,
+    backgroundColor: palette.border,
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+  },
+  deviceMetaChipText: {
+    fontSize: 10,
+    fontWeight: '700',
+    color: palette.textSecondary,
+  },
+  deviceConfigRow: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 7,
+    marginTop: 10,
+  },
+  deviceConfigChip: {
+    alignItems: 'center',
+    borderRadius: 999,
+    borderWidth: 1,
+    flexDirection: 'row',
+    gap: 5,
+    minHeight: 32,
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+  },
+  deviceConfigChipActive: {
+    borderWidth: 2,
+  },
+  deviceConfigChipText: {
+    fontSize: 10,
+    fontWeight: '800',
+    letterSpacing: 0.2,
+    textTransform: 'uppercase',
+  },
+  deviceConfigChipActiveText: {
+    color: selectedText,
+    fontSize: 9,
+    fontWeight: '800',
+    textTransform: 'uppercase',
+  },
+  deviceConfigCreateChip: {
+    alignItems: 'center',
+    backgroundColor: palette.buttonBackground || palette.primary,
+    borderColor: palette.buttonBorder || palette.primary,
+    borderRadius: 999,
+    borderWidth: 1,
+    flexDirection: 'row',
+    gap: 6,
+    minHeight: 32,
+    paddingHorizontal: 11,
+    paddingVertical: 6,
+  },
+  deviceConfigCreateChipText: {
+    color: palette.buttonText || palette.white,
+    fontSize: 10,
+    fontWeight: '800',
+  },
+  cardRight: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  badge: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 5,
+    borderRadius: 999,
+    borderWidth: 1,
+    paddingHorizontal: 9,
+    paddingVertical: 4,
+  },
+  dot: {
+    width: 6,
+    height: 6,
+    borderRadius: 3,
+  },
+  badgeText: {
+    fontSize: 11,
+    fontWeight: '700',
+    textTransform: 'uppercase',
+    letterSpacing: 0.3,
+  },
+  chevronIcon: {
+    marginLeft: 8,
+  },
+
+  currentPdvSetupButtonDisabled: {
+    opacity: 0.6,
+  },
+
+  emptyBox: {
+    alignItems: 'center',
+    backgroundColor: cardBackground,
+    borderColor: cardBorder,
+    borderWidth: 1,
+    borderRadius: 16,
+    padding: 32,
+    ...cardShadow,
+  },
+  emptyIcon: {
+    marginBottom: 12,
+  },
+  emptyTitle: {
+    fontSize: 16,
+    fontWeight: '700',
+    color: palette.text,
+    marginBottom: 4,
+  },
+  emptySub: {
+    fontSize: 12,
+    color: palette.textSecondary,
+    textAlign: 'center',
+  },
+  });
+};
+
+const styles = createStyles(colors);
+export default styles;