@controleonline/ui-common 1.2.71 → 1.2.76

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

@@ -0,0 +1,257 @@
+import React from 'react';
+import {Text, TouchableOpacity, View} from 'react-native';
+import Icon from 'react-native-vector-icons/Feather';
+import {PDV_DEVICE_TYPE} from '@controleonline/ui-common/src/react/utils/printerDevices';
+import {
+  findDeviceConfigByType,
+  isCurrentDeviceGroup,
+} from '../currentDevice';
+import {withOpacity} from '@controleonline/../../src/styles/branding';
+import {
+  getDeviceConfigType,
+  isManagedNetworkDeviceType,
+  normalizeDeviceId,
+  getDeviceListIdentifier,
+  getDeviceTypeAccent,
+  getDeviceBadgeLabel,
+  getDeviceIconName,
+  getDeviceItemTypeLabel,
+  getPrinterConnectivityMeta,
+  getPosStatusLabel,
+  getPosOperationModeLabel,
+  isPdvPrinterEnabled,
+  isPosDeviceOpen,
+  parseConfigsObject,
+  tt,
+} from './deviceListHelpers';
+import styles from '../../Devices.styles';
+
+export default function DeviceGroupCard({
+  item: deviceGroup,
+  brandColors,
+  creatingPdv,
+  goToDetail,
+  handleCreateCurrentPdv,
+  networkConnectivityByDevice,
+  queryTypes = [],
+  runtimeDeviceIdentifier,
+  runtimeDeviceType,
+  showCurrentPdvSetup,
+}) {
+        const isCurrentDevice = isCurrentDeviceGroup({
+          deviceGroup,
+          runtimeDeviceIdentifier,
+        });
+        const sessionConfig = isCurrentDevice
+          ? findDeviceConfigByType(deviceGroup, runtimeDeviceType)
+          : null;
+        const filteredTypeConfig =
+          queryTypes.length === 1
+            ? findDeviceConfigByType(deviceGroup, queryTypes[0])
+            : null;
+        const primaryConfig =
+          sessionConfig ||
+          filteredTypeConfig ||
+          deviceGroup.deviceConfigs[0] ||
+          null;
+        const normalizedType = primaryConfig
+          ? getDeviceConfigType(primaryConfig)
+          : runtimeDeviceType || 'DEVICE';
+        const isManagedNetwork =
+          primaryConfig && isManagedNetworkDeviceType(normalizedType);
+        const isPdv = normalizedType === PDV_DEVICE_TYPE;
+        const alias =
+          deviceGroup.device?.alias ||
+          deviceGroup.device?.device ||
+          'Dispositivo';
+        const deviceIdentifier = primaryConfig
+          ? getDeviceListIdentifier(primaryConfig)
+          : String(deviceGroup.device?.device || runtimeDeviceIdentifier).trim();
+        const deviceKey = normalizeDeviceId(
+          deviceGroup.device?.device ||
+            deviceGroup.device?.id ||
+            deviceGroup.key,
+        );
+        const accent = getDeviceTypeAccent(normalizedType);
+        const metaChips = [];
+
+        if (isPdv && primaryConfig) {
+          const posOperationModeLabel = getPosOperationModeLabel(
+            primaryConfig?.configs,
+          );
+
+          if (posOperationModeLabel) {
+            metaChips.push(posOperationModeLabel);
+          }
+
+          metaChips.push(
+            `Impressora ${isPdvPrinterEnabled(primaryConfig) ? 'Sim' : 'Nao'}`,
+          );
+          metaChips.push(getPosStatusLabel(primaryConfig));
+        }
+
+        if (isManagedNetwork) {
+          metaChips.push(
+            getPrinterConnectivityMeta(
+              networkConnectivityByDevice?.[deviceKey]?.status,
+            ).label,
+          );
+        }
+
+        return (
+          <View
+            testID={`device-group-${deviceGroup.key}`}
+            accessibilityLabel={
+              isCurrentDevice
+                ? `${alias}, ${tt('device_label', 'currentDevice') || 'Este dispositivo'}`
+                : alias
+            }
+            style={[
+              styles.deviceCard,
+              isCurrentDevice && styles.deviceCardCurrent,
+            ]}>
+            <View style={styles.cardLeft}>
+              <View
+                style={[
+                  styles.iconBox,
+                  {backgroundColor: withOpacity(accent, 0.1)},
+                ]}>
+                <Icon
+                  name={getDeviceIconName(normalizedType)}
+                  size={18}
+                  color={accent}
+                />
+              </View>
+              <View style={styles.cardTextWrap}>
+                {isCurrentDevice ? (
+                  <View
+                    testID="current-device-badge"
+                    style={styles.currentDeviceBadge}>
+                    <Icon
+                      name="crosshair"
+                      size={11}
+                      color={
+                        brandColors.badgeSelectedText ||
+                        brandColors.cardSelectedText ||
+                        brandColors.primary
+                      }
+                    />
+                    <Text style={styles.currentDeviceBadgeText}>
+                      {tt('device_label', 'currentDevice') ||
+                        'Este dispositivo'}
+                    </Text>
+                  </View>
+                ) : null}
+                <Text style={styles.deviceTitle} numberOfLines={1}>
+                  {alias}
+                </Text>
+                <Text style={styles.deviceSub} numberOfLines={1}>
+                  {deviceIdentifier}
+                </Text>
+
+                <View style={styles.deviceConfigRow}>
+                  {deviceGroup.deviceConfigs.map(deviceConfig => {
+                    const configType = getDeviceConfigType(deviceConfig);
+                    const configAccent = getDeviceTypeAccent(configType);
+                    const isSessionConfig =
+                      isCurrentDevice &&
+                      runtimeDeviceType &&
+                      configType === runtimeDeviceType;
+
+                    return (
+                      <TouchableOpacity
+                        key={String(deviceConfig.id)}
+                        testID={`device-config-${deviceConfig.id}`}
+                        dataSet={{
+                          sessionConfig: isSessionConfig ? 'true' : 'false',
+                        }}
+                        accessibilityRole="button"
+                        accessibilityLabel={`${getDeviceItemTypeLabel(configType)}${
+                          isSessionConfig ? ', Em uso nesta sessao' : ''
+                        }`}
+                        activeOpacity={0.82}
+                        style={[
+                          styles.deviceConfigChip,
+                          {
+                            backgroundColor: withOpacity(configAccent, 0.1),
+                            borderColor: withOpacity(configAccent, 0.45),
+                          },
+                          isSessionConfig && styles.deviceConfigChipActive,
+                        ]}
+                        onPress={() => goToDetail(deviceConfig)}>
+                        <View
+                          style={[
+                            styles.dot,
+                            {backgroundColor: configAccent},
+                          ]}
+                        />
+                        <Text
+                          style={[
+                            styles.deviceConfigChipText,
+                            {color: configAccent},
+                          ]}>
+                          {getDeviceBadgeLabel(configType, deviceConfig)}
+                        </Text>
+                        {isSessionConfig ? (
+                          <Text style={styles.deviceConfigChipActiveText}>
+                            {tt('device_label', 'inUse') || 'Em uso'}
+                          </Text>
+                        ) : null}
+                        <Icon
+                          name="chevron-right"
+                          size={13}
+                          color={configAccent}
+                        />
+                      </TouchableOpacity>
+                    );
+                  })}
+
+                  {isCurrentDevice && showCurrentPdvSetup ? (
+                    <TouchableOpacity
+                      testID="configure-current-device-pdv"
+                      accessibilityRole="button"
+                      accessibilityLabel={
+                        tt('device_action', 'configureCurrentAsPdv') ||
+                        'Configurar este dispositivo como PDV'
+                      }
+                      activeOpacity={0.82}
+                      disabled={creatingPdv}
+                      style={[
+                        styles.deviceConfigCreateChip,
+                        creatingPdv &&
+                          styles.currentPdvSetupButtonDisabled,
+                      ]}
+                      onPress={handleCreateCurrentPdv}>
+                      <Icon
+                        name="plus-circle"
+                        size={15}
+                        color={brandColors.buttonText || brandColors.white}
+                      />
+                      <Text style={styles.deviceConfigCreateChipText}>
+                        {creatingPdv
+                          ? tt('device_action', 'configuringPdv') ||
+                            'Configurando...'
+                          : tt('device_action', 'configureAsPdv') ||
+                            'Configurar como PDV'}
+                      </Text>
+                    </TouchableOpacity>
+                  ) : null}
+                </View>
+
+                {metaChips.length > 0 ? (
+                  <View style={styles.deviceMetaRow}>
+                    {metaChips.map(chipLabel => (
+                      <View key={chipLabel} style={styles.deviceMetaChip}>
+                        <Text style={styles.deviceMetaChipText}>
+                          {chipLabel}
+                        </Text>
+                      </View>
+                    ))}
+                  </View>
+                ) : null}
+              </View>
+            </View>
+          </View>
+        );
+      
+}

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

@@ -0,0 +1,23 @@
+import {createDeviceTypeTab} from './shared';
+
+const emptyState = {
+  icon: 'monitor',
+  title: 'Nenhum dispositivo encontrado',
+  description: 'Cadastre dispositivos para visualizar os equipamentos da empresa.',
+};
+
+const allDeviceType = {
+  key: 'ALL',
+  label: 'Todos',
+  icon: 'layers',
+  shouldDisplay: () => true,
+  getAccent: ({brandColors, hex}) => brandColors?.primary || hex.primary,
+  getEmptyState: () => emptyState,
+  TabComponent: createDeviceTypeTab({
+    label: 'Todos os dispositivos',
+    emptyState,
+    offerCurrentPdvSetup: true,
+  }),
+};
+
+export default allDeviceType;

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

@@ -0,0 +1,25 @@
+import {createDeviceTypeTab} from './shared';
+
+const emptyState = {
+  icon: 'cpu',
+  title: 'Nenhum device encontrado',
+  description: 'A empresa ativa ainda nao possui devices cadastrados neste filtro.',
+};
+
+const deviceDeviceType = {
+  key: 'DEVICE',
+  label: 'Devices',
+  itemLabel: 'Device',
+  icon: 'cpu',
+  matches: type => String(type || '').trim().toUpperCase() === 'DEVICE',
+  shouldDisplay: () => true,
+  getAccent: ({hex}) => hex.warning,
+  getEmptyState: () => emptyState,
+  TabComponent: createDeviceTypeTab({
+    label: 'Devices',
+    queryTypes: ['DEVICE'],
+    emptyState,
+  }),
+};
+
+export default deviceDeviceType;

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

@@ -0,0 +1,178 @@
+import {
+  getPosOperationModeOption,
+  isPosCashRegisterOpen,
+  parseConfigsObject,
+  resolvePosOperationMode,
+} from '@controleonline/ui-common/src/react/config/deviceConfigBootstrap';
+import {
+  DEFAULT_NETWORK_PRINTER_PORT,
+  DISPLAY_DEVICE_TYPE,
+  getDeviceConfigType,
+  getDeviceTypeLabel,
+  getPrinterHost,
+  IP_CAMERA_DEVICE_TYPE,
+  NETWORK_PRINTER_PORT_CONFIG_KEY,
+  PDV_DEVICE_TYPE,
+  isManagedNetworkDeviceType,
+  isPrinterDeviceType,
+  normalizeDeviceType,
+  normalizePrinterPort,
+} from '@controleonline/ui-common/src/react/utils/printerDevices';
+import {
+  getPaymentGateway,
+  getPaymentGatewayLabel,
+  isPdvPrinterEnabled,
+  normalizeDeviceId,
+  normalizeEntityId,
+} from '@controleonline/ui-common/src/react/utils/paymentDevices';
+import {getRuntimeFooterDebugInfo} from '@controleonline/ui-common/src/react/utils/runtimeFooter';
+
+export const PAGE_SIZE = 20;
+export const API_PAGE_SIZE = 200;
+
+export const tt = (type, key) => global.t?.t('configs', type, key);
+
+export const hex = {
+  primary: '#0EA5E9',
+  success: '#10b981',
+  danger: '#c10015',
+  warning: '#e67e22',
+};
+
+export const mergeDeviceConfigs = (currentItems = [], nextItems = []) => {
+  const currentList = Array.isArray(currentItems) ? currentItems : [];
+  const nextList = Array.isArray(nextItems) ? nextItems : [];
+  const seenIds = new Set(currentList.map(item => String(item?.id || '')));
+
+  return [
+    ...currentList,
+    ...nextList.filter(item => {
+      const itemId = String(item?.id || '');
+      if (!itemId || seenIds.has(itemId)) {
+        return false;
+      }
+      seenIds.add(itemId);
+      return true;
+    }),
+  ];
+};
+
+export const isPosDeviceOpen = deviceConfig => {
+  const configs = parseConfigsObject(deviceConfig?.configs);
+  return isPosCashRegisterOpen(configs);
+};
+
+export const getPrinterConnectivityMeta = status => {
+  if (status === 'online') {
+    return {label: tt('device_status', 'online') || 'Online', tone: 'success'};
+  }
+  if (status === 'checking') {
+    return {label: tt('device_status', 'checking') || 'Verificando...', tone: 'warning'};
+  }
+  if (status === 'unsupported') {
+    return {
+      label: tt('device_status', 'unsupported') || 'Sem suporte runtime',
+      tone: 'warning',
+    };
+  }
+  return {label: tt('device_status', 'offline') || 'Offline', tone: 'danger'};
+};
+
+export const getDeviceIconName = type => {
+  const normalizedType = normalizeDeviceType(type);
+  if (normalizedType === PDV_DEVICE_TYPE) return 'smartphone';
+  if (normalizedType === DISPLAY_DEVICE_TYPE) return 'monitor';
+  if (isPrinterDeviceType(normalizedType)) return 'printer';
+  if (normalizedType === IP_CAMERA_DEVICE_TYPE) return 'camera';
+  return 'cpu';
+};
+
+export const getDeviceItemTypeLabel = type => {
+  const normalizedType = normalizeDeviceType(type);
+  return getDeviceTypeLabel(normalizedType) || normalizedType || 'Device';
+};
+
+export const getDeviceBadgeLabel = (type, deviceConfig) => {
+  const normalizedType = normalizeDeviceType(type);
+  if (normalizedType === PDV_DEVICE_TYPE) {
+    const gateway = getPaymentGateway(parseConfigsObject(deviceConfig?.configs));
+    return getPaymentGatewayLabel(gateway) || 'PDV';
+  }
+  return getDeviceItemTypeLabel(normalizedType);
+};
+
+export const getDeviceTypeAccent = type => {
+  const normalizedType = normalizeDeviceType(type);
+  if (normalizedType === PDV_DEVICE_TYPE) return hex.primary;
+  if (normalizedType === DISPLAY_DEVICE_TYPE) return hex.success;
+  if (isPrinterDeviceType(normalizedType)) return hex.warning;
+  if (normalizedType === IP_CAMERA_DEVICE_TYPE) return hex.danger;
+  return hex.primary;
+};
+
+export const getPosStatusLabel = deviceConfig =>
+  isPosDeviceOpen(deviceConfig)
+    ? tt('device_status', 'open') || 'Aberto'
+    : tt('device_status', 'closed') || 'Fechado';
+
+export const getPosOperationModeLabel = configs => {
+  const mode = resolvePosOperationMode(configs);
+  const option = getPosOperationModeOption(mode);
+  return option?.label || mode || '';
+};
+
+export const getDeviceDetailRoute = type => {
+  const normalizedType = normalizeDeviceType(type);
+  if (normalizedType === IP_CAMERA_DEVICE_TYPE) {
+    return 'IpCameraDetail';
+  }
+  if (isPrinterDeviceType(normalizedType)) {
+    return 'PrinterDeviceDetail';
+  }
+  return 'DeviceDetail';
+};
+
+export const getDeviceListIdentifier = deviceConfig =>
+  getRuntimeFooterDebugInfo({
+    device: deviceConfig?.device || {},
+    deviceConfig,
+  }).runtimeDetail || String(deviceConfig?.device?.device || '').trim();
+
+export const buildDeviceListParams = ({
+  companyId,
+  page,
+  pageSize = PAGE_SIZE,
+  queryTypes = [],
+}) => {
+  const params = {
+    people: `/people/${companyId}`,
+    page,
+    itemsPerPage: pageSize,
+    'order[id]': 'DESC',
+  };
+
+  if (Array.isArray(queryTypes) && queryTypes.length === 1) {
+    params.type = queryTypes[0];
+  }
+
+  if (Array.isArray(queryTypes) && queryTypes.length > 1) {
+    params.type = queryTypes;
+  }
+
+  return params;
+};
+
+export {
+  parseConfigsObject,
+  getDeviceConfigType,
+  isManagedNetworkDeviceType,
+  isPrinterDeviceType,
+  normalizeDeviceType,
+  normalizeDeviceId,
+  normalizeEntityId,
+  getPrinterHost,
+  normalizePrinterPort,
+  DEFAULT_NETWORK_PRINTER_PORT,
+  NETWORK_PRINTER_PORT_CONFIG_KEY,
+  isPdvPrinterEnabled,
+};

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

@@ -0,0 +1,26 @@
+import {DISPLAY_DEVICE_TYPE, normalizeDeviceType} from '@controleonline/ui-common/src/react/utils/printerDevices';
+import {createDeviceTypeTab} from './shared';
+
+const emptyState = {
+  icon: 'monitor',
+  title: 'Nenhum kds encontrado',
+  description: 'A empresa ativa ainda nao possui devices cadastrados neste filtro.',
+};
+
+const displayDeviceType = {
+  key: DISPLAY_DEVICE_TYPE,
+  label: 'KDS',
+  itemLabel: 'KDS',
+  icon: 'monitor',
+  matches: type => normalizeDeviceType(type) === DISPLAY_DEVICE_TYPE,
+  shouldDisplay: () => true,
+  getAccent: ({brandColors, hex}) => brandColors?.primary || hex.primary,
+  getEmptyState: () => emptyState,
+  TabComponent: createDeviceTypeTab({
+    label: 'KDS',
+    queryTypes: [DISPLAY_DEVICE_TYPE],
+    emptyState,
+  }),
+};
+
+export default displayDeviceType;

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

@@ -0,0 +1,145 @@
+import {getDeviceTypeLabel, normalizeDeviceType} from '@controleonline/ui-common/src/react/utils/printerDevices';
+
+import allDeviceType from './all';
+import deviceDeviceType from './device';
+import displayDeviceType from './display';
+import ipCameraDeviceType from './ipCamera';
+import pdvDeviceType, {
+  PDV_SUBFILTER_KEYS,
+  pdvCieloDeviceType,
+  pdvInfinitePayDeviceType,
+} from './pdv';
+import printerDeviceType from './printer';
+import {createDeviceTypeTab} from './shared';
+
+const registeredDeviceTypes = [
+  allDeviceType,
+  pdvDeviceType,
+  pdvCieloDeviceType,
+  pdvInfinitePayDeviceType,
+  displayDeviceType,
+  printerDeviceType,
+  ipCameraDeviceType,
+  deviceDeviceType,
+];
+const visibleDeviceTypes = registeredDeviceTypes.filter(
+  deviceType => !PDV_SUBFILTER_KEYS.includes(deviceType.key),
+);
+const pdvSubfilterDeviceTypes = registeredDeviceTypes.filter(deviceType =>
+  PDV_SUBFILTER_KEYS.includes(deviceType.key),
+);
+
+const deviceTypesByKey = registeredDeviceTypes.reduce((acc, deviceType) => {
+  acc[deviceType.key] = deviceType;
+  return acc;
+}, {});
+
+const matchedDeviceTypes = [
+  pdvDeviceType,
+  displayDeviceType,
+  printerDeviceType,
+  ipCameraDeviceType,
+  deviceDeviceType,
+];
+
+export const ALL_DEVICE_FILTER = allDeviceType.key;
+export const PRINTER_DEVICE_FILTER = printerDeviceType.key;
+
+const createRuntimeDeviceType = filterKey => {
+  const normalizedType = normalizeDeviceType(filterKey);
+  const emptyState = {
+    icon: 'cpu',
+    title: `Nenhum ${getDeviceTypeLabel(normalizedType).toLowerCase()} encontrado`,
+    description:
+      'A empresa ativa ainda nao possui devices cadastrados neste filtro.',
+  };
+
+  return {
+    key: normalizedType,
+    label: getDeviceTypeLabel(normalizedType),
+    itemLabel: getDeviceTypeLabel(normalizedType),
+    icon: 'cpu',
+    shouldDisplay: () => true,
+    getAccent: ({hex}) => hex.warning,
+    getEmptyState: () => emptyState,
+    TabComponent: createDeviceTypeTab({
+      label: getDeviceTypeLabel(normalizedType),
+      queryTypes: [normalizedType],
+      emptyState,
+    }),
+  };
+};
+
+const resolveDeviceTypeDefinition = type => {
+  const normalizedType = normalizeDeviceType(type);
+
+  if (!normalizedType) {
+    return deviceDeviceType;
+  }
+
+  return (
+    matchedDeviceTypes.find(deviceType => deviceType.matches(normalizedType)) ||
+    createRuntimeDeviceType(normalizedType)
+  );
+};
+
+export const resolveDeviceFilterKey = type =>
+  resolveDeviceTypeDefinition(type).key;
+
+export const getDeviceFilterDefinition = filterKey =>
+  deviceTypesByKey[filterKey] || createRuntimeDeviceType(filterKey);
+
+export const hasRegisteredDeviceFilter = filterKey => Boolean(deviceTypesByKey[filterKey]);
+
+export const isPdvSubfilter = filterKey => PDV_SUBFILTER_KEYS.includes(filterKey);
+
+export const getDeviceFilterIcon = filterKey =>
+  getDeviceFilterDefinition(filterKey).icon;
+
+export const getDeviceFilterAccent = (filterKey, context = {}) =>
+  getDeviceFilterDefinition(filterKey).getAccent(context);
+
+export const getDeviceDetailRoute = type =>
+  resolveDeviceTypeDefinition(type).detailRouteName || 'DeviceDetail';
+
+export const getDeviceCreationAction = filterKey => {
+  const deviceType = getDeviceFilterDefinition(filterKey);
+
+  if (!deviceType.createRouteName) {
+    return null;
+  }
+
+  return {
+    routeName: deviceType.createRouteName,
+    label: deviceType.createActionLabel,
+    helperText: deviceType.createHelperText,
+  };
+};
+
+export const getDeviceItemTypeLabel = type => {
+  const normalizedType = normalizeDeviceType(type);
+  const deviceType = resolveDeviceTypeDefinition(normalizedType);
+
+  return deviceType.itemLabel || getDeviceTypeLabel(normalizedType);
+};
+
+export const getDeviceFilterOptions = () =>
+  visibleDeviceTypes
+    .filter(deviceType => deviceType.shouldDisplay())
+    .map(deviceType => ({
+      key: deviceType.key,
+      label: deviceType.label,
+      icon: deviceType.icon,
+    }));
+
+export const getPdvSubfilterOptions = () =>
+  pdvSubfilterDeviceTypes
+    .filter(deviceType => deviceType.shouldDisplay())
+    .map(deviceType => ({
+      key: deviceType.key,
+      label: deviceType.label,
+      icon: deviceType.icon,
+    }));
+
+export const getDeviceEmptyState = ({activeFilter} = {}) =>
+  getDeviceFilterDefinition(activeFilter).getEmptyState();

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

@@ -0,0 +1,35 @@
+import {getNetworkDeviceProfile} from '@controleonline/ui-common/src/react/utils/networkDeviceProfiles';
+import {
+  IP_CAMERA_DEVICE_TYPE,
+  normalizeDeviceType,
+} from '@controleonline/ui-common/src/react/utils/printerDevices';
+import {createDeviceTypeTab} from './shared';
+
+const ipCameraProfile = getNetworkDeviceProfile(IP_CAMERA_DEVICE_TYPE);
+const emptyState = {
+  icon: ipCameraProfile.icon,
+  title: ipCameraProfile.emptyTitle,
+  description: ipCameraProfile.emptyDescription,
+};
+
+const ipCameraDeviceType = {
+  key: ipCameraProfile.filterKey,
+  label: ipCameraProfile.filterLabel,
+  itemLabel: ipCameraProfile.itemLabel,
+  icon: ipCameraProfile.icon,
+  matches: type => normalizeDeviceType(type) === IP_CAMERA_DEVICE_TYPE,
+  shouldDisplay: () => true,
+  getAccent: ({brandColors, hex}) => brandColors?.primary || hex.primary,
+  getEmptyState: () => emptyState,
+  detailRouteName: ipCameraProfile.detailRouteName,
+  createRouteName: ipCameraProfile.formRouteName,
+  createActionLabel: ipCameraProfile.createActionLabel,
+  createHelperText: ipCameraProfile.createHelperText,
+  TabComponent: createDeviceTypeTab({
+    label: ipCameraProfile.filterLabel,
+    queryTypes: [IP_CAMERA_DEVICE_TYPE],
+    emptyState,
+  }),
+};
+
+export default ipCameraDeviceType;