@controleonline/ui-common 1.2.80 → 1.2.81

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

@@ -0,0 +1,216 @@
+import React from 'react';
+import {Text, View} from 'react-native';
+import {Picker} from '@react-native-picker/picker';
+import Icon from 'react-native-vector-icons/Feather';
+import styles from '../../DeviceDetailPage.styles';
+import {
+  DEVICE_ORDER_VISIBILITY_COMPANY,
+  DEVICE_ORDER_VISIBILITY_DEVICE,
+} from '@controleonline/ui-common/src/react/config/deviceConfigBootstrap';
+import {
+  normalizeEntityId,
+  normalizeDeviceId,
+} from '@controleonline/ui-common/src/react/utils/paymentDevices';
+import {getDisplayLabel} from './deviceDetailHelpers';
+import {tt} from './deviceDetailConstants';
+
+/**
+ * Pedidos do device + impressão de preparo (DISPLAY).
+ * Extraído de DeviceDetailScreen (app-community#382 / hotfix #645).
+ */
+export default function DeviceDetailOrdersPrintSection(ctx) {
+  const {
+    themeColors,
+    renderHelpButton,
+    renderOptionButtons,
+    renderSwitchRow,
+    orderVisibility,
+    setOrderVisibility,
+    saveDeviceOrderVisibility,
+    deliveryEnabled,
+    setDeliveryEnabled,
+    saveDeviceDeliverySettings,
+    savingDeliverySettings,
+    displayAutoPrintProduct,
+    setDisplayAutoPrintProduct,
+    displayAllowPrinterChange,
+    setDisplayAllowPrinterChange,
+    saveDisplayPrintingConfig,
+    savingDisplayPrinting,
+    linkedDisplayId,
+    setLinkedDisplayId,
+    displayOptions,
+    printerOptions,
+    pickerMode,
+    isDisplayDevice,
+  } = ctx;
+
+  const printerLabel = option => {
+    const id = normalizeDeviceId(option?.device || option);
+    const name = String(option?.name || option?.deviceName || option?.label || '').trim();
+    return name ? `${name} (${id})` : `Impressora ${id || '--'}`;
+  };
+
+  return (
+    <>
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>
+          <Icon name="list" size={13} /> {'  '}Pedidos do Device
+        </Text>
+
+        <View style={styles.configCard}>
+          <View style={styles.sectionTitleRow}>
+            <Text style={styles.configTitle}>Escopo da listagem no PDV</Text>
+            {renderHelpButton(
+              'Escopo da listagem',
+              'Define se este device mostra apenas os pedidos criados nele ou todos os pedidos da empresa.',
+            )}
+          </View>
+
+          {renderOptionButtons({
+            options: [
+              {
+                label: 'Somente deste device',
+                value: DEVICE_ORDER_VISIBILITY_DEVICE,
+              },
+              {
+                label: 'Todos da empresa',
+                value: DEVICE_ORDER_VISIBILITY_COMPANY,
+              },
+            ],
+            value: orderVisibility,
+            optionColors: {
+              buttonBackground: themeColors.buttonBackground,
+              buttonBorder: themeColors.buttonBorder,
+              buttonText: themeColors.buttonText,
+              buttonBackgroundSecondary: themeColors.buttonBackgroundSecondary,
+              buttonBorderSecondary: themeColors.buttonBorderSecondary,
+              buttonTextSecondary: themeColors.buttonTextSecondary,
+            },
+            onChange: value => {
+              const nextValue = value || DEVICE_ORDER_VISIBILITY_DEVICE;
+              setOrderVisibility(nextValue);
+              saveDeviceOrderVisibility({deviceOrderVisibility: nextValue});
+            },
+          })}
+        </View>
+
+        <View style={styles.configCard}>
+          <View style={styles.sectionTitleRow}>
+            <Text style={styles.configTitle}>
+              {tt('title', 'deliveryOnDevice') || 'Delivery neste equipamento'}
+            </Text>
+            {renderHelpButton(
+              tt('title', 'deliveryOnDevice') || 'Delivery neste equipamento',
+              tt('description', 'deliveryOnDeviceDescription') ||
+                'Ative quando este equipamento precisa operar pedidos com cliente, endereço e observações de entrega.',
+            )}
+          </View>
+
+          {renderSwitchRow({
+            disabled: savingDeliverySettings,
+            label: tt('label', 'deliveryEnabled') || 'Trabalhar com delivery',
+            value: deliveryEnabled,
+            valueLabel: deliveryEnabled ? 'Ativo' : 'Inativo',
+            onValueChange: nextValue => {
+              setDeliveryEnabled(nextValue);
+              saveDeviceDeliverySettings({deviceDeliveryEnabled: nextValue});
+            },
+          })}
+        </View>
+      </View>
+
+      {isDisplayDevice && (
+        <View style={styles.section}>
+          <Text style={styles.sectionTitle}>
+            <Icon name="printer" size={13} /> {'  '}Impressão de Preparo
+          </Text>
+
+          <View style={styles.configCard}>
+            <View style={styles.sectionTitleRow}>
+              <Text style={styles.configTitle}>
+                Display vinculado e impressora da fila
+              </Text>
+              {renderHelpButton(
+                'Display vinculado e impressora da fila',
+                'Este bloco é usado na impressão automática disparada pelo app DISPLAY.',
+              )}
+            </View>
+
+            <View style={styles.pickerWrap}>
+              <Picker
+                selectedValue={linkedDisplayId || ''}
+                mode={pickerMode}
+                style={styles.picker}
+                dropdownIconColor="#64748B"
+                onValueChange={value => {
+                  const nextValue = String(value || '').trim();
+                  setLinkedDisplayId(nextValue);
+                  saveDisplayPrintingConfig({linkedDisplayId: nextValue});
+                }}>
+                <Picker.Item label="Nenhum display vinculado" value="" />
+                {(displayOptions || []).map(option => {
+                  const optionId = normalizeEntityId(option);
+                  return (
+                    <Picker.Item
+                      key={`display-option-${optionId}`}
+                      label={getDisplayLabel(option)}
+                      value={optionId}
+                    />
+                  );
+                })}
+              </Picker>
+            </View>
+
+            <View style={styles.pickerWrap}>
+              <Picker
+                selectedValue=""
+                mode={pickerMode}
+                style={styles.picker}
+                dropdownIconColor="#64748B"
+                onValueChange={() => {}}>
+                <Picker.Item label="Nenhuma impressora configurada" value="" />
+                {(printerOptions || []).map(option => {
+                  const printerId = normalizeDeviceId(option?.device || option);
+                  return (
+                    <Picker.Item
+                      key={`printer-option-${printerId}`}
+                      label={printerLabel(option)}
+                      value={printerId}
+                    />
+                  );
+                })}
+              </Picker>
+            </View>
+
+            {renderSwitchRow({
+              disabled: savingDisplayPrinting,
+              label: 'Pode trocar de impressora?',
+              value: displayAllowPrinterChange,
+              valueLabel: displayAllowPrinterChange ? 'Sim' : 'Nao',
+              onValueChange: nextValue => {
+                setDisplayAllowPrinterChange(nextValue);
+                saveDisplayPrintingConfig({
+                  displayAllowPrinterChange: nextValue,
+                });
+              },
+            })}
+
+            {renderSwitchRow({
+              disabled: savingDisplayPrinting,
+              label: 'Imprimir produtos automaticamente',
+              value: displayAutoPrintProduct,
+              valueLabel: displayAutoPrintProduct ? 'Ativo' : 'Inativo',
+              onValueChange: nextValue => {
+                setDisplayAutoPrintProduct(nextValue);
+                saveDisplayPrintingConfig({
+                  displayAutoPrintProductEnabled: nextValue,
+                });
+              },
+            })}
+          </View>
+        </View>
+      )}
+    </>
+  );
+}

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+import Icon from 'react-native-vector-icons/Feather';
+import PaymentTypesByWalletTab from '@controleonline/ui-common/src/react/pages/SettingsPage/PaymentTypesByWalletTab';
+import styles from '../../DeviceDetailPage.styles';
+
+/**
+ * PDV payment types tab.
+ * Refs: app-community#382
+ */
+export default function DeviceDetailPaymentSection(ctx) {
+  const {
+    showPdvPaymentTypesTab, renderHelpButton, deviceId, savePaymentTypeConfigs, savingPaymentTypes,
+  } = ctx;
+
+  if (!showPdvPaymentTypesTab) return null;
+
+  return (
+        <View style={styles.section}>
+          <View style={styles.sectionHeaderRow}>
+            <Text style={styles.sectionTitle}>
+              <Icon name="credit-card" size={13} /> {'  '}Pagamentos do device
+            </Text>
+            {renderHelpButton(
+              'Pagamentos do device',
+              'Selecione os meios de pagamento que este device pode exibir e usar nas opções de pagamento. Os wallets entram só para organizar a lista.',
+            )}
+          </View>
+          <PaymentTypesByWalletTab
+            currentCompanyId={currentCompany?.id}
+            configs={configs}
+            disableSelection={savingPaymentTypes}
+            isSaving={savingPaymentTypes}
+            onPersistSelectedPaymentTypeIds={savePaymentTypeConfigs}
+          />
+        </View>
+      )}
+
+  );
+}

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

@@ -0,0 +1,390 @@
+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 DeviceDetailPdvConfigSection(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="credit-card" size={13} /> {'  '}Configuração do PDV
+          </Text>
+
+          <View style={styles.configCard}>
+            <View style={styles.sectionTitleRow}>
+              <Text style={styles.configTitle}>
+                {tt('title', 'posOperationMode')}
+              </Text>
+              {renderHelpButton(
+                tt('title', 'posOperationMode') || 'Modo de operacao',
+                tt('description', 'posOperationModeDescription') ||
+                  'Escolha o modo, a trava kiosk e a politica de ordem/caixa deste device.',
+              )}
+            </View>
+
+            {renderOptionButtons({
+              options: POS_OPERATION_MODE_OPTIONS.map(option => ({
+                label: tt('option', option.translationKey),
+                value: option.value,
+              })),
+              value: posOperationMode,
+              optionColors: {
+                buttonBackground: themeColors.buttonBackground,
+                buttonBorder: themeColors.buttonBorder,
+                buttonText: themeColors.buttonText,
+                buttonBackgroundSecondary: themeColors.buttonBackgroundSecondary,
+                buttonBorderSecondary: themeColors.buttonBorderSecondary,
+                buttonTextSecondary: themeColors.buttonTextSecondary,
+              },
+              onChange: value => {
+                const nextValue = resolvePosOperationMode({
+                  [POS_OPERATION_MODE_CONFIG_KEY]: value,
+                });
+                setPosOperationMode(nextValue);
+                savePosOperationMode({posOperationMode: nextValue});
+              },
+            })}
+
+            <View style={styles.pickerWrap}>
+              <Picker
+                selectedValue={productShowcaseId || ''}
+                mode={pickerMode}
+                enabled={!loadingProductShowcases && !savingProductShowcase}
+                style={styles.picker}
+                dropdownIconColor="#64748B"
+                onValueChange={value => {
+                  const nextValue = normalizeEntityId(value);
+                  setProductShowcaseId(nextValue);
+                  saveProductShowcaseConfig({productShowcaseId: nextValue});
+                }}>
+                <Picker.Item
+                  label={
+                    loadingProductShowcases
+                      ? 'Carregando vitrines...'
+                      : 'Sem vitrine vinculada'
+                  }
+                  value=""
+                />
+                {productShowcases.map(showcase => {
+                  const showcaseId = normalizeEntityId(showcase);
+                  return (
+                    <Picker.Item
+                      key={`pos-showcase-${showcaseId}`}
+                      label={getProductShowcaseLabel(showcase)}
+                      value={showcaseId}
+                    />
+                  );
+                })}
+              </Picker>
+            </View>
+
+            {renderSwitchRow({
+              disabled: savingPosOperationMode,
+              label: 'Modo Kiosk',
+              value: androidKioskEnabled,
+              valueLabel: androidKioskEnabled ? 'Ativo' : 'Inativo',
+              onValueChange: nextValue => {
+                setAndroidKioskEnabled(nextValue);
+                savePosOperationMode({androidKioskEnabled: nextValue});
+              },
+            })}
+
+            {renderOptionButtons({
+              options: [
+                {
+                  label: global.t?.t('configs', 'option', 'none') || 'None',
+                  value: POS_CHECK_ORDER_TYPE_NONE,
+                },
+                {
+                  label: global.t?.t('orders', 'title', 'tab') || 'Tab',
+                  value: POS_CHECK_ORDER_TYPE_TAB,
+                },
+                {
+                  label: global.t?.t('orders', 'title', 'table') || 'Table',
+                  value: POS_CHECK_ORDER_TYPE_TABLE,
+                },
+                {
+                  label: global.t?.t('orders', 'title', 'stamp') || 'Stamp',
+                  value: POS_CHECK_ORDER_TYPE_STAMP,
+                  disabled: !loyaltyCouponsEnabled,
+                  title: !loyaltyCouponsEnabled
+                    ? 'Ative em Shop -> Cupom fidelidade\npara liberar Stamp'
+                    : '',
+                },
+              ],
+              value: checkOrderType,
+              optionColors: {
+                buttonBackground: themeColors.buttonBackground,
+                buttonBorder: themeColors.buttonBorder,
+                buttonText: themeColors.buttonText,
+                buttonBackgroundSecondary: themeColors.buttonBackgroundSecondary,
+                buttonBorderSecondary: themeColors.buttonBorderSecondary,
+                buttonTextSecondary: themeColors.buttonTextSecondary,
+              },
+              onChange: value => {
+                const nextCheckOrderType =
+                  value === POS_CHECK_ORDER_TYPE_TAB
+                    ? POS_CHECK_ORDER_TYPE_TAB
+                    : value === POS_CHECK_ORDER_TYPE_TABLE
+                      ? POS_CHECK_ORDER_TYPE_TABLE
+                      : value === POS_CHECK_ORDER_TYPE_STAMP
+                        ? loyaltyCouponsEnabled
+                          ? POS_CHECK_ORDER_TYPE_STAMP
+                          : POS_CHECK_ORDER_TYPE_NONE
+                      : POS_CHECK_ORDER_TYPE_NONE;
+                const nextCheckOrderManagementMode =
+                  nextCheckOrderType === POS_CHECK_ORDER_TYPE_NONE
+                    ? POS_CHECK_ORDER_MANAGEMENT_MODE_MANAGE
+                    : checkOrderManagementMode;
+                setCheckOrderType(nextCheckOrderType);
+                if (nextCheckOrderType === POS_CHECK_ORDER_TYPE_NONE) {
+                  setCheckOrderManagementMode(
+                    POS_CHECK_ORDER_MANAGEMENT_MODE_MANAGE,
+                  );
+                }
+                savePosOperationMode({
+                  checkOrderType: nextCheckOrderType,
+                  checkOrderManagementMode: nextCheckOrderManagementMode,
+                });
+              },
+            })}
+
+            {checkOrderType !== POS_CHECK_ORDER_TYPE_NONE &&
+              renderOptionButtons({
+                options: [
+                  {
+                    label:
+                      global.t?.t(
+                        'configs',
+                        'option',
+                        'manageLinkedOrders',
+                      ) || 'Open and close tabs/tables/stamps',
+                    value: POS_CHECK_ORDER_MANAGEMENT_MODE_MANAGE,
+                  },
+                  {
+                    label:
+                      global.t?.t(
+                        'configs',
+                        'option',
+                        'existingLinkedOrdersOnly',
+                      ) || 'Use open tabs/tables/stamps only',
+                    value: POS_CHECK_ORDER_MANAGEMENT_MODE_EXISTING_ONLY,
+                  },
+                ],
+                value: checkOrderManagementMode,
+                onChange: value => {
+                  const nextValue =
+                    value === POS_CHECK_ORDER_MANAGEMENT_MODE_EXISTING_ONLY
+                      ? POS_CHECK_ORDER_MANAGEMENT_MODE_EXISTING_ONLY
+                      : POS_CHECK_ORDER_MANAGEMENT_MODE_MANAGE;
+                  setCheckOrderManagementMode(nextValue);
+                  savePosOperationMode({checkOrderManagementMode: nextValue});
+                },
+              })}
+
+            {posOperationMode === POS_OPERATION_MODE_COUNTER && (
+              <>
+                {renderSwitchRow({
+                  disabled: savingPosOperationMode,
+                  label: 'Impressao automatica',
+                  value: counterAutoPrintEnabled,
+                  valueLabel: counterAutoPrintEnabled ? 'Sim' : 'Nao',
+                  onValueChange: nextValue => {
+                    setCounterAutoPrintEnabled(nextValue);
+                    savePosOperationMode({counterAutoPrintEnabled: nextValue});
+                  },
+                })}
+
+                {counterAutoPrintEnabled &&
+                  renderOptionButtons({
+                    options: [
+                      {label: 'Pedido', value: POS_PRINT_MODE_ORDER},
+                      {label: 'Fichas', value: POS_PRINT_MODE_FORM},
+                    ],
+                    value: counterPrintMode,
+                    optionColors: {
+                      buttonBackground: themeColors.buttonBackground,
+                      buttonBorder: themeColors.buttonBorder,
+                      buttonText: themeColors.buttonText,
+                      buttonBackgroundSecondary: themeColors.buttonBackgroundSecondary,
+                      buttonBorderSecondary: themeColors.buttonBorderSecondary,
+                      buttonTextSecondary: themeColors.buttonTextSecondary,
+                    },
+                    onChange: value => {
+                      const nextValue =
+                        value === POS_PRINT_MODE_FORM
+                          ? POS_PRINT_MODE_FORM
+                          : POS_PRINT_MODE_ORDER;
+                      setCounterPrintMode(nextValue);
+                      savePosOperationMode({counterPrintMode: nextValue});
+                    },
+                  })}
+
+                {renderOptionButtons({
+                  options: [
+                    {
+                      label: 'Abertura e fechamento de caixa',
+                      value: POS_CASH_MANAGEMENT_MODE_CASH_REGISTER,
+                    },
+                    {
+                      label: 'Fechamento diario',
+                      value: POS_CASH_MANAGEMENT_MODE_DAILY,
+                    },
+                  ],
+                  value: counterCashManagementMode,
+                  optionColors: {
+                    buttonBackground: themeColors.buttonBackground,
+                    buttonBorder: themeColors.buttonBorder,
+                    buttonText: themeColors.buttonText,
+                    buttonBackgroundSecondary: themeColors.buttonBackgroundSecondary,
+                    buttonBorderSecondary: themeColors.buttonBorderSecondary,
+                    buttonTextSecondary: themeColors.buttonTextSecondary,
+                  },
+                  onChange: value => {
+                    const nextValue =
+                      value === POS_CASH_MANAGEMENT_MODE_DAILY
+                        ? POS_CASH_MANAGEMENT_MODE_DAILY
+                        : POS_CASH_MANAGEMENT_MODE_CASH_REGISTER;
+                    setCounterCashManagementMode(nextValue);
+                    savePosOperationMode({counterCashManagementMode: nextValue});
+                  },
+                })}
+              </>
+            )}
+          </View>
+
+          <View style={styles.configCard}>
+            <View style={styles.sectionTitleRow}>
+              <Text style={[styles.configTitle, {color: brandColors.text}]}>
+                {tt('title', 'androidLauncherMode') || 'Launcher / home app'}
+              </Text>
+              {renderHelpButton(
+                tt('title', 'androidLauncherMode') || 'Launcher / home app',
+                tt('description', 'androidLauncherDescription') ||
+                  'Quando ativado, o device volta para a app ao usar home ou apps recentes. O voltar continua seguindo a tela.',
+              )}
+            </View>
+
+            {renderSwitchRow({
+              disabled: savingLauncherMode,
+              label: 'Modo launcher?',
+              value: androidLauncherEnabled,
+              valueLabel: androidLauncherEnabled ? 'Ativo' : 'Inativo',
+              onValueChange: nextValue => {
+                setAndroidLauncherEnabled(nextValue);
+                saveLauncherMode({androidLauncherEnabled: nextValue});
+              },
+            })}
+            <Text style={[styles.deviceString, {color: brandColors.textSecondary}]}>
+              Salva automaticamente
+            </Text>
+          </View>
+
+          <View style={styles.configCard}>
+            <View style={styles.sectionTitleRow}>
+              <Text style={styles.configTitle}>Gateway e impressora</Text>
+              {renderHelpButton(
+                'Gateway e impressora',
+                'Escolha o gateway usado pelo PDV e se ele pode aparecer como destino de impressao.',
+              )}
+            </View>
+
+            {renderOptionButtons({
+              options: [
+                {label: 'Nenhum', value: ''},
+                {label: 'Infinite Pay', value: 'infinite-pay'},
+                {label: 'Cielo', value: 'cielo'},
+              ],
+              value: pdvGateway || '',
+              optionColors: {
+                buttonBackground: themeColors.buttonBackground,
+                buttonBorder: themeColors.buttonBorder,
+                buttonText: themeColors.buttonText,
+                buttonBackgroundSecondary: themeColors.buttonBackgroundSecondary,
+                buttonBorderSecondary: themeColors.buttonBorderSecondary,
+                buttonTextSecondary: themeColors.buttonTextSecondary,
+              },
+              onChange: value => {
+                const nextValue = String(value || '');
+                setPdvGateway(nextValue);
+                savePdvSettings({pdvGateway: nextValue});
+              },
+            })}
+
+            {renderSwitchRow({
+              disabled: savingPdvSettings,
+              label: 'Impressora',
+              value: pdvPrinterEnabled,
+              valueLabel: pdvPrinterEnabled ? 'Sim' : 'Nao',
+              onValueChange: nextValue => {
+                setPdvPrinterEnabled(nextValue);
+                savePdvSettings({pdvPrinterEnabled: nextValue});
+              },
+            })}
+            <Text style={styles.deviceString}>Salva automaticamente</Text>
+          </View>
+        </View>
+    </>
+  );
+}