@controleonline/ui-common 1.2.80 → 1.2.82

package/src/react/pages/Devices/detail/DeviceDetailAlertsCommandsSection.js

@@ -0,0 +1,233 @@
+import React from 'react';
+import { Text, View, Switch, TextInput, TouchableOpacity, Platform } from 'react-native';
+import { Picker } from '@react-native-picker/picker';
+import Icon from 'react-native-vector-icons/Feather';
+import styles from '../../DeviceDetailPage.styles';
+import {
+  POS_OPERATION_MODE_OPTIONS,
+  POS_OPERATION_MODE_COUNTER,
+  POS_PRINT_MODE_ORDER,
+  POS_PRINT_MODE_FORM,
+  POS_CHECK_ORDER_TYPE_NONE,
+  POS_CHECK_ORDER_TYPE_TAB,
+  POS_CHECK_ORDER_TYPE_TABLE,
+  POS_CHECK_ORDER_TYPE_STAMP,
+  POS_CHECK_ORDER_MANAGEMENT_MODE_MANAGE,
+  POS_CHECK_ORDER_MANAGEMENT_MODE_EXISTING_ONLY,
+  POS_CASH_MANAGEMENT_MODE_CASH_REGISTER,
+  POS_CASH_MANAGEMENT_MODE_DAILY,
+  POS_OPERATION_MODE_CONFIG_KEY,
+  DEVICE_ORDER_VISIBILITY_COMPANY,
+  DEVICE_ORDER_VISIBILITY_DEVICE,
+  resolvePosOperationMode,
+} from '@controleonline/ui-common/src/react/config/deviceConfigBootstrap';
+import { normalizeEntityId } from '@controleonline/ui-common/src/react/utils/paymentDevices';
+import { getProductShowcaseLabel } from './deviceDetailHelpers';
+import { tt } from './deviceDetailConstants';
+
+/**
+ * Extracted from DeviceDetailScreen for modularization (≤500 lines).
+ * Refs: app-community#382
+ */
+export default function DeviceDetailAlertsCommandsSection(ctx) {
+  const {
+    themeColors, brandColors, palette,
+    renderHelpButton, renderOptionButtons, renderSwitchRow, renderProduct,
+    posOperationMode, setPosOperationMode, savePosOperationMode, savingPosOperationMode,
+    productShowcaseId, setProductShowcaseId, saveProductShowcaseConfig,
+    productShowcases, loadingProductShowcases, savingProductShowcase, pickerMode,
+    counterAutoPrintEnabled, setCounterAutoPrintEnabled,
+    counterPrintMode, setCounterPrintMode,
+    checkOrderType, setCheckOrderType,
+    checkOrderManagementMode, setCheckOrderManagementMode,
+    cashManagementMode, setCashManagementMode,
+    counterCashManagementMode, setCounterCashManagementMode,
+    androidKioskEnabled, setAndroidKioskEnabled,
+    androidLauncherEnabled, setAndroidLauncherEnabled,
+    saveLauncherMode, savingLauncherMode,
+    orderVisibility, setOrderVisibility, saveDeviceOrderVisibility, savingOrderVisibility,
+    shouldShowOrderVisibility,
+    deliveryEnabled, setDeliveryEnabled, saveDeviceDeliverySettings, savingDeliverySettings,
+    deviceAlertSoundEnabled, setDeviceAlertSoundEnabled, deviceAlertSoundUrl, setDeviceAlertSoundUrl,
+    saveDeviceAlertSoundConfig, savingAlertSound,
+    runtimeDebugInfoEnabled, setRuntimeDebugInfoEnabled, saveDeviceRuntimeDebugInfo, savingRuntimeDebugInfo,
+    devicePaymentTarget, setDevicePaymentTarget, saveDevicePaymentTarget, savingPaymentTarget,
+    paymentDeviceOptions, displayOptions, printerOptions,
+    pdvGateway, setPdvGateway, pdvPrinterEnabled, setPdvPrinterEnabled, savePdvSettings, savingPdvSettings,
+    hasLocalPaymentGateway, loyaltyCouponsEnabled,
+    sendCatalogRefreshCommand, sendingCatalogRefresh,
+    displayAutoPrintProduct, setDisplayAutoPrintProduct,
+    displayAllowPrinterChange, setDisplayAllowPrinterChange,
+    saveDisplayPrintingConfig, savingDisplayPrinting,
+    linkedDisplayId, setLinkedDisplayId,
+    isDisplayDevice, isPdvDevice,
+    styles: _styles,
+  } = ctx;
+
+  return (
+    <>
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>
+          <Icon name="volume-2" size={13} /> {'  '}Aviso Sonoro
+        </Text>
+
+        <View style={styles.configCard}>
+          <View style={styles.sectionTitleRow}>
+            <Text style={styles.configTitle}>Alerta via websocket</Text>
+            {renderHelpButton(
+              'Alerta via websocket',
+              'Quando habilitado, este device toca o audio configurado ao receber o evento order.created de um novo pedido em preparo.',
+            )}
+          </View>
+
+          {renderSwitchRow({
+            disabled: savingAlertSound,
+            label: 'Aviso sonoro habilitado',
+            value: deviceAlertSoundEnabled,
+            valueLabel: deviceAlertSoundEnabled ? 'Ativo' : 'Inativo',
+            onValueChange: nextValue => {
+              setDeviceAlertSoundEnabled(nextValue);
+              saveDeviceAlertSoundConfig({
+                deviceAlertSoundEnabled: nextValue,
+              });
+            },
+          })}
+
+          <View style={styles.textInputWrap}>
+            <Text style={styles.textInputLabel}>URL do audio</Text>
+            <TextInput
+              style={styles.textInput}
+              value={deviceAlertSoundUrl}
+              onChangeText={setDeviceAlertSoundUrl}
+              placeholder="https://exemplo.com/alerta.mp3"
+              placeholderTextColor="#94A3B8"
+              autoCapitalize="none"
+              autoCorrect={false}
+              keyboardType="url"
+              returnKeyType="done"
+              onSubmitEditing={saveDeviceAlertSoundConfig}
+              onBlur={saveDeviceAlertSoundConfig}
+            />
+          </View>
+        </View>
+      </View>
+      )}
+
+      {shouldShowDeviceBehavior && (
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>
+          <Icon name="activity" size={13} /> {'  '}Rodapé do Sistema
+        </Text>
+
+        <View style={styles.configCard}>
+          <View style={styles.sectionTitleRow}>
+            <Text style={styles.configTitle}>Debug do socket no rodapé</Text>
+            {renderHelpButton(
+              'Debug do socket no rodapé',
+              'Quando habilitado, este device troca a bolinha discreta do socket pelos detalhes de debug publicados pelos serviços do runtime no rodapé global do sistema.',
+            )}
+          </View>
+
+          {renderSwitchRow({
+            disabled: savingRuntimeDebugInfo,
+            label: 'Exibir debug detalhado',
+            value: deviceRuntimeDebugInfoEnabled,
+            valueLabel: deviceRuntimeDebugInfoEnabled ? 'Ativo' : 'Inativo',
+            onValueChange: nextValue => {
+              setDeviceRuntimeDebugInfoEnabled(nextValue);
+              saveDeviceRuntimeDebugInfo({
+                deviceRuntimeDebugInfoEnabled: nextValue,
+              });
+            },
+          })}
+        </View>
+      </View>
+      )}
+
+      {shouldShowRemotePayment && (
+        <View style={styles.section}>
+          <Text style={styles.sectionTitle}>
+            <Icon name="credit-card" size={13} /> {'  '}Pagamento Remoto
+          </Text>
+
+          <View style={styles.configCard}>
+            <View style={styles.sectionTitleRow}>
+              <Text style={styles.configTitle}>Device preferencial para pagamento</Text>
+              {renderHelpButton(
+                'Device preferencial para pagamento',
+                'Esse destino funciona como fallback desta origem quando a empresa não definiu uma ordem padrão no configurador geral. Quando a empresa tiver devices padrão para pagamento remoto, essa ordem global tem prioridade.',
+              )}
+            </View>
+
+            <View style={styles.pickerWrap}>
+              <Picker
+                selectedValue={devicePaymentTarget || ''}
+                mode={pickerMode}
+                style={styles.picker}
+                dropdownIconColor="#64748B"
+                onValueChange={value => {
+                  const nextValue = value || '';
+                  setDevicePaymentTarget(nextValue);
+                  saveDevicePaymentTarget({
+                    devicePaymentTarget: nextValue,
+                  });
+                }}>
+                <Picker.Item
+                  label="Usar devices padrão da empresa"
+                  value=""
+                />
+                {paymentDeviceOptions.map(option => (
+                  <Picker.Item
+                    key={option.deviceId}
+                    label={`${option.alias} (${option.gatewayLabel})`}
+                    value={option.deviceId}
+                  />
+                ))}
+              </Picker>
+            </View>
+          </View>
+        </View>
+      )}
+
+      {shouldShowRemoteCommands && (
+        <View style={styles.section}>
+          <Text style={styles.sectionTitle}>
+            <Icon name="refresh-cw" size={13} /> {'  '}Comandos Remotos
+          </Text>
+
+          <View style={styles.configCard}>
+            <View style={styles.sectionTitleRow}>
+              <Text style={styles.configTitle}>Catálogo do PDV</Text>
+              {renderHelpButton(
+                'Catálogo do PDV',
+                'Limpa o cache local de produtos e categorias deste device. O recarregamento acontece no próximo uso do PDV.',
+              )}
+            </View>
+
+            <TouchableOpacity
+              style={[
+                styles.configButton,
+                {
+                  backgroundColor: themeColors.buttonBackground,
+                  borderColor: themeColors.buttonBackground,
+                },
+                sendingCatalogRefresh && {opacity: 0.6},
+              ]}
+              activeOpacity={0.85}
+              disabled={sendingCatalogRefresh}
+              onPress={sendCatalogRefreshCommand}>
+              <Icon name="trash-2" size={16} color={themeColors.buttonIcon} />
+              <Text
+                style={[
+                  styles.configButtonText,
+                  {color: themeColors.buttonText},
+                ]}>
+                {sendingCatalogRefresh ? 'Limpando cache...' : 'Limpar cache de produtos'}
+              </Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      )}
+    </>
+  );
+}

package/src/react/pages/Devices/detail/DeviceDetailHeader.js

@@ -0,0 +1,138 @@
+import React from 'react';
+import { Text, TextInput, TouchableOpacity, View } from 'react-native';
+import Icon from 'react-native-vector-icons/Feather';
+import { withOpacity } from '@controleonline/../../src/styles/branding';
+import styles from '../../DeviceDetailPage.styles';
+
+/**
+ * Device detail header: icon + alias edit/save/trash + deviceString.
+ * Refs: app-community#382
+ */
+export default function DeviceDetailHeader({
+  accent,
+  alias,
+  aliasInput,
+  aliasInputRef,
+  deviceId,
+  deviceString,
+  editingAlias,
+  removingDevice,
+  savingAlias,
+  copyingConfig,
+  themeColors,
+  onAliasChange,
+  onConfirmRemove,
+  onCopyConfig,
+  onSaveAlias,
+  onStartEdit,
+}) {
+  return (
+    <View style={styles.deviceHeader}>
+      <View style={styles.deviceHeaderLeft}>
+        <View style={[styles.deviceIconBox, { backgroundColor: withOpacity(accent, 0.1) }]}>
+          <Icon name="monitor" size={20} color={accent} />
+        </View>
+
+        <View style={styles.aliasBlock}>
+          <View style={styles.aliasRow}>
+            {editingAlias ? (
+              <TextInput
+                ref={aliasInputRef}
+                style={styles.aliasInput}
+                value={aliasInput}
+                onChangeText={onAliasChange}
+                onSubmitEditing={onSaveAlias}
+                returnKeyType="done"
+                autoCapitalize="words"
+                selectTextOnFocus
+                testID="device-alias-input"
+              />
+            ) : (
+              <Text
+                style={styles.deviceAlias}
+                numberOfLines={1}
+                ellipsizeMode="tail"
+                testID="device-alias-text"
+              >
+                {alias}
+              </Text>
+            )}
+
+            {!!deviceId && (
+              <TouchableOpacity
+                style={[
+                  styles.editAliasBtn,
+                  {
+                    backgroundColor: themeColors.buttonBackground,
+                    borderColor: themeColors.buttonBackground,
+                  },
+                ]}
+                onPress={editingAlias ? onSaveAlias : onStartEdit}
+                activeOpacity={0.8}
+                disabled={savingAlias || removingDevice}
+                testID={editingAlias ? 'device-alias-save' : 'device-alias-edit'}
+                accessibilityLabel={editingAlias ? 'Salvar alias' : 'Editar alias'}
+              >
+                <Icon
+                  name={savingAlias ? 'save' : editingAlias ? 'check' : 'edit-2'}
+                  size={16}
+                  color={themeColors.buttonIcon}
+                />
+              </TouchableOpacity>
+            )}
+            {!!deviceId && !editingAlias && (
+              <TouchableOpacity
+                style={[
+                  styles.editAliasBtn,
+                  {
+                    backgroundColor: themeColors.buttonBackground,
+                    borderColor: themeColors.buttonBackground,
+                    marginLeft: 8,
+                  },
+                ]}
+                onPress={onCopyConfig}
+                activeOpacity={0.8}
+                disabled={removingDevice || savingAlias || copyingConfig || !deviceString}
+                accessibilityLabel="Copiar configurações de outro device"
+                testID="device-detail-copy-config-btn"
+              >
+                <Icon
+                  name={copyingConfig ? 'loader' : 'copy'}
+                  size={16}
+                  color={themeColors.buttonIcon}
+                />
+              </TouchableOpacity>
+            )}
+            {!!deviceId && !editingAlias && (
+              <TouchableOpacity
+                style={[
+                  styles.editAliasBtn,
+                  {
+                    backgroundColor: themeColors.buttonBackground,
+                    borderColor: themeColors.buttonBackground,
+                    marginLeft: 8,
+                  },
+                ]}
+                onPress={onConfirmRemove}
+                activeOpacity={0.8}
+                disabled={removingDevice || savingAlias || copyingConfig}
+                accessibilityLabel="Excluir device"
+                testID="device-detail-delete-btn"
+              >
+                <Icon
+                  name={removingDevice ? 'loader' : 'trash-2'}
+                  size={16}
+                  color={themeColors.buttonIcon}
+                />
+              </TouchableOpacity>
+            )}
+          </View>
+
+          <Text style={styles.deviceString} numberOfLines={1} ellipsizeMode="middle">
+            {deviceString}
+          </Text>
+        </View>
+      </View>
+    </View>
+  );
+}

package/src/react/pages/Devices/detail/DeviceDetailMovementSections.js

@@ -0,0 +1,167 @@
+import React from 'react';
+import { Text, View, FlatList, TextInput } from 'react-native';
+import Icon from 'react-native-vector-icons/Feather';
+import Formatter from '@controleonline/ui-common/src/utils/formatter';
+import styles from '../../DeviceDetailPage.styles';
+import { hex } from './deviceDetailConstants';
+
+/**
+ * PDV movement tab sections.
+ * Refs: app-community#382
+ */
+export default function DeviceDetailMovementSections(ctx) {
+  const {
+    showPdvMovementTab, inflowData, productTotal, wallets, filteredProducts, search, setSearch,
+    renderProduct, loadingMovementData,
+  } = ctx;
+
+  return (
+    <>
+      {showPdvMovementTab && (
+        <View style={styles.summaryRow}>
+          <View style={styles.summaryCard}>
+            <Icon name="dollar-sign" size={14} color={hex.success} style={styles.summaryIcon} />
+            <Text style={styles.summaryLabel}>Total Geral</Text>
+            <Text style={[styles.summaryValue, { color: hex.success }]}>
+              {Formatter.formatMoney(inflowTotal)}
+            </Text>
+          </View>
+          <View style={styles.summaryCard}>
+            <Icon name="shopping-bag" size={14} color={hex.info} style={styles.summaryIcon} />
+            <Text style={styles.summaryLabel}>Em Produtos</Text>
+            <Text style={[styles.summaryValue, { color: hex.info }]}>
+              {Formatter.formatMoney(productTotal)}
+            </Text>
+          </View>
+          <View style={styles.summaryCard}>
+            <Icon name="package" size={14} color={hex.purple} style={styles.summaryIcon} />
+            <Text style={styles.summaryLabel}>Itens</Text>
+            <Text style={[styles.summaryValue, { color: hex.purple }]}>
+              {products.length}
+            </Text>
+          </View>
+        </View>
+      )}
+
+      {showPdvMovementTab && (
+        <View style={styles.section}>
+          <View style={styles.sectionHeaderRow}>
+            <Text style={styles.sectionTitle}>
+              <Icon name="shield" size={13} /> {'  '}
+              {global.t?.t('manager', 'title', 'pdvMovement') || 'PDV Movement'}
+            </Text>
+            <TouchableOpacity
+              style={[
+                styles.toggleBtn,
+                {backgroundColor: isOpen ? hex.danger : hex.success},
+                actionLoading && {opacity: 0.6},
+              ]}
+              onPress={handleToggle}
+              disabled={actionLoading || loadingConfigData}
+              activeOpacity={0.85}>
+              <Icon
+                name={isOpen ? 'lock' : 'unlock'}
+                size={13}
+                color="#fff"
+              />
+              <Text style={styles.toggleBtnText}>
+                {actionLoading
+                  ? isOpen
+                    ? 'Fechando...'
+                    : 'Abrindo...'
+                  : isOpen
+                    ? global.t?.t('orders', 'button', 'closeCashRegister') || 'Close'
+                    : global.t?.t('orders', 'button', 'openCashRegister') || 'Open'}
+              </Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      )}
+
+      {showPdvMovementTab && wallets.length > 0 && (
+        <View style={styles.section}>
+          <Text style={styles.sectionTitle}>
+            <Icon name="credit-card" size={13} /> {'  '}Recebimentos por Forma de Pagamento
+          </Text>
+          {wallets.map((wallet, wi) => (
+            <View key={wi} style={styles.walletCard}>
+              <View style={styles.walletHeader}>
+                <Icon name="briefcase" size={13} color="#64748B" />
+                <Text style={styles.walletName}>{wallet.wallet || 'Carteira'}</Text>
+                <Text style={[styles.walletTotal, { color: brandColors.primary }]}>
+                  {Formatter.formatMoney(wallet.total)}
+                </Text>
+              </View>
+              {wallet.payments.map((pt, pi) => (
+                <View key={pi} style={styles.paymentRow}>
+                  <View style={[styles.paymentIconBox, { backgroundColor: withOpacity(hex.info, 0.1) }]}>
+                    <Icon name={paymentIcon(pt.payment)} size={11} color={hex.info} />
+                  </View>
+                  <Text style={styles.paymentName}>{pt.payment || '-'}</Text>
+                  <Text style={styles.paymentValue}>
+                    {Formatter.formatMoney(pt.inflow)}
+                  </Text>
+                </View>
+              ))}
+            </View>
+          ))}
+        </View>
+      )}
+
+      {showPdvMovementTab && (
+        <View style={styles.section}>
+          <Text style={styles.sectionTitle}>
+            <Icon name="shopping-bag" size={13} /> {'  '}Produtos Vendidos
+          </Text>
+
+          <View style={styles.searchRow}>
+            <Icon name="search" size={14} color="#94A3B8" />
+            <TextInput
+              style={styles.searchInput}
+              value={search}
+              onChangeText={setSearch}
+              placeholder="Buscar produto ou SKU..."
+              placeholderTextColor="#94A3B8"
+            />
+            {!!search && (
+              <TouchableOpacity onPress={() => setSearch('')}>
+                <Icon name="x" size={14} color="#94A3B8" />
+              </TouchableOpacity>
+            )}
+          </View>
+
+          {filteredProducts.length > 0 ? (
+            <View style={styles.tableContainer}>
+              <View style={styles.tableHeader}>
+                <Text style={[styles.tableHead, { flex: 0.5 }]}>Qtd</Text>
+                <Text style={[styles.tableHead, { flex: 3 }]}>Produto</Text>
+                <Text style={[styles.tableHead, { flex: 1.2, textAlign: 'right' }]}>Unit.</Text>
+                <Text style={[styles.tableHead, { flex: 1.3, textAlign: 'right' }]}>Total</Text>
+              </View>
+              <FlatList
+                data={filteredProducts}
+                keyExtractor={(item, i) => `${item.product_sku || i}`}
+                renderItem={renderProduct}
+                scrollEnabled={false}
+              />
+              <View style={styles.tableFooter}>
+                <Text style={styles.tableFooterLabel}>Total em produtos</Text>
+                <Text style={[styles.tableFooterValue, { color: brandColors.primary }]}>
+                  {Formatter.formatMoney(productTotal)}
+                </Text>
+              </View>
+            </View>
+          ) : (
+            <View style={styles.emptyBox}>
+              <Icon name="inbox" size={24} color="#CBD5E1" style={inlineStyle_1301_61} />
+              <Text style={styles.emptyText}>
+                {search ? 'Nenhum produto encontrado para esta busca' : 'Nenhum produto registrado neste equipamento'}
+              </Text>
+            </View>
+          )}
+        </View>
+      )}
+
+    </>
+  );
+}