@controleonline/ui-common 1.2.75 → 1.2.77

package/src/react/pages/DeviceDetailPage.js

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Alert, FlatList, Platform, Pressable, ScrollView, Switch, Text, TextInput, TouchableOpacity, View } from 'react-native';
+import { Alert, FlatList, Platform, Pressable, ScrollView, Switch, Text, TextInput, TouchableOpacity, View } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { useFocusEffect, useNavigation, useRoute } from '@react-navigation/native';
 import {Picker} from '@react-native-picker/picker';
@@ -182,51 +182,51 @@ const getIsOpen = configs => {
   return isPosCashRegisterOpen(configs);
 };
 
-const confirm = (msg, cb) => {
-  if (Platform.OS === 'web') {
-    if (window.confirm(msg)) cb();
-  } else {
-    Alert.alert('Confirmação', msg, [
+const confirm = (msg, cb) => {
+  if (Platform.OS === 'web') {
+    if (window.confirm(msg)) cb();
+  } else {
+    Alert.alert('Confirmação', msg, [
       { text: 'Cancelar', style: 'cancel' },
       { text: 'Confirmar', onPress: cb },
     ]);
-  }
-};
-
-const getDeviceSwitchProps = ({
-  disabled = false,
-  palette,
-  value = false,
-}) => {
-  const offTrackColor = disabled
-    ? palette.switchDisabledTrack
-    : palette.switchOffTrack;
-  const onTrackColor = disabled
-    ? palette.switchDisabledTrack
-    : palette.switchOnTrack;
-
-  return {
-    ios_backgroundColor: offTrackColor,
-    thumbColor: disabled
-      ? palette.switchDisabledThumb
-      : value
-        ? palette.switchOnThumb
-        : palette.switchOffThumb,
-    trackColor: {
-      false: offTrackColor,
-      true: onTrackColor,
-    },
-  };
-};
-
-const OptionButtonChip = ({
-  label,
-  selected,
-  disabled,
-  colors: optionColors,
-  tooltip,
-  onPress,
-}) => {
+  }
+};
+
+const getDeviceSwitchProps = ({
+  disabled = false,
+  palette,
+  value = false,
+}) => {
+  const offTrackColor = disabled
+    ? palette.switchDisabledTrack
+    : palette.switchOffTrack;
+  const onTrackColor = disabled
+    ? palette.switchDisabledTrack
+    : palette.switchOnTrack;
+
+  return {
+    ios_backgroundColor: offTrackColor,
+    thumbColor: disabled
+      ? palette.switchDisabledThumb
+      : value
+        ? palette.switchOnThumb
+        : palette.switchOffThumb,
+    trackColor: {
+      false: offTrackColor,
+      true: onTrackColor,
+    },
+  };
+};
+
+const OptionButtonChip = ({
+  label,
+  selected,
+  disabled,
+  colors: optionColors,
+  tooltip,
+  onPress,
+}) => {
   const [hovered, setHovered] = useState(false);
   const showTooltip = Platform.OS === 'web' && disabled && Boolean(tooltip) && hovered;
 
@@ -237,34 +237,34 @@ const OptionButtonChip = ({
       style={[styles.optionButtonHoverWrap, hovered && styles.optionButtonHoverWrapActive]}
     >
       <TouchableOpacity
-        style={[
-          styles.optionButton,
-          selected && styles.optionButtonActive,
-          optionColors && {
-            backgroundColor: selected
-              ? optionColors.buttonBackground
-              : optionColors.buttonBackgroundSecondary,
-            borderColor: selected
-              ? optionColors.buttonBorder
-              : optionColors.buttonBorderSecondary,
-          },
-          disabled && {opacity: 0.55},
-        ]}
+        style={[
+          styles.optionButton,
+          selected && styles.optionButtonActive,
+          optionColors && {
+            backgroundColor: selected
+              ? optionColors.buttonBackground
+              : optionColors.buttonBackgroundSecondary,
+            borderColor: selected
+              ? optionColors.buttonBorder
+              : optionColors.buttonBorderSecondary,
+          },
+          disabled && {opacity: 0.55},
+        ]}
         accessibilityHint={tooltip || undefined}
         activeOpacity={disabled ? 1 : 0.85}
         disabled={disabled}
         onPress={disabled ? undefined : onPress}
       >
         <Text
-          style={[
-            styles.optionButtonText,
-            selected && styles.optionButtonTextActive,
-            optionColors && {
-              color: selected
-                ? optionColors.buttonText
-                : optionColors.buttonTextSecondary,
-            },
-          ]}
+          style={[
+            styles.optionButtonText,
+            selected && styles.optionButtonTextActive,
+            optionColors && {
+              color: selected
+                ? optionColors.buttonText
+                : optionColors.buttonTextSecondary,
+            },
+          ]}
         >
           {label}
         </Text>
@@ -494,6 +494,7 @@ const DeviceDetailPage = () => {
   const [editingAlias, setEditingAlias] = useState(false);
   const [aliasInput,   setAliasInput]   = useState(alias);
   const [savingAlias,  setSavingAlias]  = useState(false);
+  const [removingDevice, setRemovingDevice] = useState(false);
   const aliasInputRef = useRef(null);
 
   useEffect(() => {
@@ -1070,6 +1071,34 @@ const DeviceDetailPage = () => {
     }
   }, [aliasInput, alias, deviceId, cancelEditAlias, showSystemError]);
 
+  const confirmRemoveDevice = useCallback(() => {
+    if (!deviceId || removingDevice) {
+      return;
+    }
+    Alert.alert(
+      'Excluir device',
+      `Tem certeza que deseja excluir o device "${alias || deviceString || deviceId}"? Esta ação não pode ser desfeita.`,
+      [
+        { text: 'Cancelar', style: 'cancel' },
+        {
+          text: 'Excluir',
+          style: 'destructive',
+          onPress: async () => {
+            setRemovingDevice(true);
+            try {
+              await actionsRef.current.deviceActions.remove(deviceId);
+              navigation.navigate('DevicesIndex');
+            } catch (error) {
+              showSystemError(error, 'Não foi possível excluir o device.');
+            } finally {
+              setRemovingDevice(false);
+            }
+          },
+        },
+      ],
+    );
+  }, [deviceId, removingDevice, alias, deviceString, navigation, showSystemError]);
+
   const saveDevicePaymentTarget = useCallback(async (override = {}) => {
     const nextDevicePaymentTarget =
       override.devicePaymentTarget ?? devicePaymentTarget;
@@ -1737,78 +1766,78 @@ const DeviceDetailPage = () => {
     </View>
   );
 
-  const renderHelpButton = (title, message) => (
-    <DefaultTooltip
-      accentColor={themeColors.buttonIcon}
-      title={title}
-      message={message}
-      style={{
-        backgroundColor: themeColors.buttonBackground,
-        borderColor: themeColors.buttonBackground,
-        borderRadius: 8,
-        height: 34,
-        width: 34,
-      }}
-      textStyle={{
-        color: themeColors.buttonIcon,
-        fontSize: 16,
-        lineHeight: 16,
-      }}
-    />
-  );
-
-  const renderSwitchRow = ({
-    disabled = false,
-    label,
-    onValueChange,
-    value,
-    valueLabel,
-  }) => {
-    const checked = Boolean(value);
-
-    return (
-      <View
-        style={[
-          styles.toggleRow,
-          {
-            backgroundColor: themeColors.listItemBackground,
-            borderColor: themeColors.listItemBorder,
-          },
-          disabled && styles.toggleRowDisabled,
-        ]}>
-        <View style={styles.toggleRowCopy}>
-          <Text
-            style={[
-              styles.toggleRowLabel,
-              {color: themeColors.listItemText},
-            ]}>
-            {label}
-          </Text>
-          <Text
-            style={[
-              styles.toggleRowValue,
-              {color: themeColors.listItemSubtitleText},
-            ]}>
-            {valueLabel}
-          </Text>
-        </View>
-        <Switch
-          value={checked}
-          disabled={disabled}
-          onValueChange={onValueChange}
-          {...getDeviceSwitchProps({
-            disabled,
-            palette: themeColors,
-            value: checked,
-          })}
-        />
-      </View>
-    );
-  };
-
-  const renderOptionButtons = ({ options, value, onChange, disabled = false, optionColors = null }) => (
-    <View style={styles.optionRow}>
-      {options.map(option => {
+  const renderHelpButton = (title, message) => (
+    <DefaultTooltip
+      accentColor={themeColors.buttonIcon}
+      title={title}
+      message={message}
+      style={{
+        backgroundColor: themeColors.buttonBackground,
+        borderColor: themeColors.buttonBackground,
+        borderRadius: 8,
+        height: 34,
+        width: 34,
+      }}
+      textStyle={{
+        color: themeColors.buttonIcon,
+        fontSize: 16,
+        lineHeight: 16,
+      }}
+    />
+  );
+
+  const renderSwitchRow = ({
+    disabled = false,
+    label,
+    onValueChange,
+    value,
+    valueLabel,
+  }) => {
+    const checked = Boolean(value);
+
+    return (
+      <View
+        style={[
+          styles.toggleRow,
+          {
+            backgroundColor: themeColors.listItemBackground,
+            borderColor: themeColors.listItemBorder,
+          },
+          disabled && styles.toggleRowDisabled,
+        ]}>
+        <View style={styles.toggleRowCopy}>
+          <Text
+            style={[
+              styles.toggleRowLabel,
+              {color: themeColors.listItemText},
+            ]}>
+            {label}
+          </Text>
+          <Text
+            style={[
+              styles.toggleRowValue,
+              {color: themeColors.listItemSubtitleText},
+            ]}>
+            {valueLabel}
+          </Text>
+        </View>
+        <Switch
+          value={checked}
+          disabled={disabled}
+          onValueChange={onValueChange}
+          {...getDeviceSwitchProps({
+            disabled,
+            palette: themeColors,
+            value: checked,
+          })}
+        />
+      </View>
+    );
+  };
+
+  const renderOptionButtons = ({ options, value, onChange, disabled = false, optionColors = null }) => (
+    <View style={styles.optionRow}>
+      {options.map(option => {
         const selected = String(option.value) === String(value);
         const optionDisabled = disabled || option.disabled === true;
         const optionTitle = String(option.title || '').trim();
@@ -1816,26 +1845,26 @@ const DeviceDetailPage = () => {
           return (
             <OptionButtonChip
               key={String(option.value)}
-              label={option.label}
-              selected={selected}
-              disabled
-              colors={optionColors}
-              tooltip={optionTitle}
-              onPress={() => onChange(option.value)}
-            />
+              label={option.label}
+              selected={selected}
+              disabled
+              colors={optionColors}
+              tooltip={optionTitle}
+              onPress={() => onChange(option.value)}
+            />
           );
         }
 
         return (
           <OptionButtonChip
             key={String(option.value)}
-            label={option.label}
-            selected={selected}
-            disabled={optionDisabled}
-            colors={optionColors}
-            tooltip={optionTitle}
-            onPress={() => onChange(option.value)}
-          />
+            label={option.label}
+            selected={selected}
+            disabled={optionDisabled}
+            colors={optionColors}
+            tooltip={optionTitle}
+            onPress={() => onChange(option.value)}
+          />
         );
       })}
     </View>
@@ -1872,24 +1901,46 @@ const DeviceDetailPage = () => {
                 )}
 
                 {!!deviceId && (
-                  <TouchableOpacity
-                    style={[
-                      styles.editAliasBtn,
-                      {
-                        backgroundColor: themeColors.buttonBackground,
-                        borderColor: themeColors.buttonBackground,
-                      },
-                    ]}
-                    onPress={editingAlias ? saveAlias : startEditAlias}
-                    activeOpacity={0.8}
-                    disabled={savingAlias}
-                  >
-                    <Icon
-                      name={savingAlias ? 'save' : editingAlias ? 'check' : 'edit-2'}
-                      size={16}
-                      color={themeColors.buttonIcon}
-                    />
-                  </TouchableOpacity>
+                  <TouchableOpacity
+                    style={[
+                      styles.editAliasBtn,
+                      {
+                        backgroundColor: themeColors.buttonBackground,
+                        borderColor: themeColors.buttonBackground,
+                      },
+                    ]}
+                    onPress={editingAlias ? saveAlias : startEditAlias}
+                    activeOpacity={0.8}
+                    disabled={savingAlias || removingDevice}
+                  >
+                    <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={confirmRemoveDevice}
+                    activeOpacity={0.8}
+                    disabled={removingDevice || savingAlias}
+                    accessibilityLabel="Excluir device"
+                  >
+                    <Icon
+                      name={removingDevice ? 'loader' : 'trash-2'}
+                      size={16}
+                      color={themeColors.buttonIcon}
+                    />
+                  </TouchableOpacity>
                 )}
               </View>
 
@@ -1914,44 +1965,44 @@ const DeviceDetailPage = () => {
               horizontal
               showsHorizontalScrollIndicator={false}
               contentContainerStyle={styles.tabsContent}>
-              {PDV_DETAIL_TABS.map(tab => {
-                const active = activePdvTab === tab.key;
-                const tabButtonColors = active
-                  ? {
-                      backgroundColor: themeColors.buttonBackground,
-                      borderColor: themeColors.buttonBorder,
-                      iconColor: themeColors.buttonIcon,
-                      textColor: themeColors.buttonText,
-                    }
-                  : {
-                      backgroundColor: themeColors.buttonBackgroundSecondary,
-                      borderColor: themeColors.buttonBorderSecondary,
-                      iconColor: themeColors.buttonIconSecondary,
-                      textColor: themeColors.buttonTextSecondary,
-                    };
-
-                return (
-                  <TouchableOpacity
-                    key={tab.key}
-                    style={[
-                      styles.tabButton,
-                      {
-                        backgroundColor: tabButtonColors.backgroundColor,
-                        borderColor: tabButtonColors.borderColor,
-                      },
-                    ]}
-                    activeOpacity={0.85}
-                    onPress={() => setActivePdvTab(tab.key)}>
-                    <Icon
-                      name={tab.icon}
-                      size={14}
-                      color={tabButtonColors.iconColor}
-                    />
-                    <Text
-                      style={[
-                        styles.tabButtonText,
-                        {color: tabButtonColors.textColor},
-                      ]}>
+              {PDV_DETAIL_TABS.map(tab => {
+                const active = activePdvTab === tab.key;
+                const tabButtonColors = active
+                  ? {
+                      backgroundColor: themeColors.buttonBackground,
+                      borderColor: themeColors.buttonBorder,
+                      iconColor: themeColors.buttonIcon,
+                      textColor: themeColors.buttonText,
+                    }
+                  : {
+                      backgroundColor: themeColors.buttonBackgroundSecondary,
+                      borderColor: themeColors.buttonBorderSecondary,
+                      iconColor: themeColors.buttonIconSecondary,
+                      textColor: themeColors.buttonTextSecondary,
+                    };
+
+                return (
+                  <TouchableOpacity
+                    key={tab.key}
+                    style={[
+                      styles.tabButton,
+                      {
+                        backgroundColor: tabButtonColors.backgroundColor,
+                        borderColor: tabButtonColors.borderColor,
+                      },
+                    ]}
+                    activeOpacity={0.85}
+                    onPress={() => setActivePdvTab(tab.key)}>
+                    <Icon
+                      name={tab.icon}
+                      size={14}
+                      color={tabButtonColors.iconColor}
+                    />
+                    <Text
+                      style={[
+                        styles.tabButtonText,
+                        {color: tabButtonColors.textColor},
+                      ]}>
                       {tt('tab', tab.labelKey) ||
                         (tab.key === PDV_TAB_PAYMENT_TYPES
                           ? 'Pagamentos'
@@ -2012,17 +2063,17 @@ const DeviceDetailPage = () => {
                 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 => {
+                })),
+                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,
                   });
@@ -2064,16 +2115,16 @@ const DeviceDetailPage = () => {
                 </Picker>
               </View>
 
-              {renderSwitchRow({
-                disabled: savingPosOperationMode,
-                label: 'Modo Kiosk',
-                value: androidKioskEnabled,
-                valueLabel: androidKioskEnabled ? 'Ativo' : 'Inativo',
-                onValueChange: nextValue => {
-                  setAndroidKioskEnabled(nextValue);
-                  savePosOperationMode({androidKioskEnabled: nextValue});
-                },
-              })}
+              {renderSwitchRow({
+                disabled: savingPosOperationMode,
+                label: 'Modo Kiosk',
+                value: androidKioskEnabled,
+                valueLabel: androidKioskEnabled ? 'Ativo' : 'Inativo',
+                onValueChange: nextValue => {
+                  setAndroidKioskEnabled(nextValue);
+                  savePosOperationMode({androidKioskEnabled: nextValue});
+                },
+              })}
 
               {renderOptionButtons({
                 options: [
@@ -2098,16 +2149,16 @@ const DeviceDetailPage = () => {
                       : '',
                   },
                 ],
-                value: checkOrderType,
-                optionColors: {
-                  buttonBackground: themeColors.buttonBackground,
-                  buttonBorder: themeColors.buttonBorder,
-                  buttonText: themeColors.buttonText,
-                  buttonBackgroundSecondary: themeColors.buttonBackgroundSecondary,
-                  buttonBorderSecondary: themeColors.buttonBorderSecondary,
-                  buttonTextSecondary: themeColors.buttonTextSecondary,
-                },
-                onChange: value => {
+                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
@@ -2170,33 +2221,33 @@ const DeviceDetailPage = () => {
 
               {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 => {
+                  {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
@@ -2216,17 +2267,17 @@ const DeviceDetailPage = () => {
                         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 => {
+                    ],
+                    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
@@ -2251,16 +2302,16 @@ const DeviceDetailPage = () => {
                 )}
               </View>
 
-              {renderSwitchRow({
-                disabled: savingLauncherMode,
-                label: 'Modo launcher?',
-                value: androidLauncherEnabled,
-                valueLabel: androidLauncherEnabled ? 'Ativo' : 'Inativo',
-                onValueChange: nextValue => {
-                  setAndroidLauncherEnabled(nextValue);
-                  saveLauncherMode({androidLauncherEnabled: nextValue});
-                },
-              })}
+              {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>
@@ -2280,33 +2331,33 @@ const DeviceDetailPage = () => {
                   {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 => {
+                ],
+                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});
-                },
-              })}
+              {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>
@@ -2337,18 +2388,18 @@ const DeviceDetailPage = () => {
                     label: 'Todos da empresa',
                     value: DEVICE_ORDER_VISIBILITY_COMPANY,
                   },
-                ],
-                value: deviceOrderVisibility,
-                optionColors: {
-                  buttonBackground: themeColors.buttonBackground,
-                  buttonBorder: themeColors.buttonBorder,
-                  buttonText: themeColors.buttonText,
-                  buttonBackgroundSecondary: themeColors.buttonBackgroundSecondary,
-                  buttonBorderSecondary: themeColors.buttonBorderSecondary,
-                  buttonTextSecondary: themeColors.buttonTextSecondary,
-                },
-                onChange: value => {
-                  const nextValue =
+                ],
+                value: deviceOrderVisibility,
+                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;
                   setDeviceOrderVisibility(nextValue);
                   saveDeviceOrderVisibility({deviceOrderVisibility: nextValue});
@@ -2368,19 +2419,19 @@ const DeviceDetailPage = () => {
                 )}
               </View>
 
-              {renderSwitchRow({
-                disabled: savingDeviceDeliverySettings,
-                label: tt('label', 'deliveryEnabled') ||
-                  'Trabalhar com delivery',
-                value: deviceDeliveryEnabled,
-                valueLabel: deviceDeliveryEnabled ? 'Ativo' : 'Inativo',
-                onValueChange: nextValue => {
-                  setDeviceDeliveryEnabled(nextValue);
-                  saveDeviceDeliverySettings({
-                    deviceDeliveryEnabled: nextValue,
-                  });
-                },
-              })}
+              {renderSwitchRow({
+                disabled: savingDeviceDeliverySettings,
+                label: tt('label', 'deliveryEnabled') ||
+                  'Trabalhar com delivery',
+                value: deviceDeliveryEnabled,
+                valueLabel: deviceDeliveryEnabled ? 'Ativo' : 'Inativo',
+                onValueChange: nextValue => {
+                  setDeviceDeliveryEnabled(nextValue);
+                  saveDeviceDeliverySettings({
+                    deviceDeliveryEnabled: nextValue,
+                  });
+                },
+              })}
             </View>
           </View>
         )}
@@ -2469,33 +2520,33 @@ const DeviceDetailPage = () => {
                     </Picker>
                   </View>
 
-                  {renderSwitchRow({
-                    disabled: savingDisplayPrintingConfig,
-                    label: 'Pode trocar de impressora?',
-                    value: displayAllowPrinterChange,
-                    valueLabel: displayAllowPrinterChange ? 'Sim' : 'Nao',
-                    onValueChange: nextValue => {
-                      setDisplayAllowPrinterChange(nextValue);
-                      saveDisplayPrintingConfig({
-                        displayAllowPrinterChange: nextValue,
-                      });
-                    },
-                  })}
-
-                  {renderSwitchRow({
-                    disabled: savingDisplayPrintingConfig,
-                    label: 'Imprimir produtos automaticamente',
-                    value: displayAutoPrintProductEnabled,
-                    valueLabel: displayAutoPrintProductEnabled
-                      ? 'Ativo'
-                      : 'Inativo',
-                    onValueChange: nextValue => {
-                      setDisplayAutoPrintProductEnabled(nextValue);
-                      saveDisplayPrintingConfig({
-                        displayAutoPrintProductEnabled: nextValue,
-                      });
-                    },
-                  })}
+                  {renderSwitchRow({
+                    disabled: savingDisplayPrintingConfig,
+                    label: 'Pode trocar de impressora?',
+                    value: displayAllowPrinterChange,
+                    valueLabel: displayAllowPrinterChange ? 'Sim' : 'Nao',
+                    onValueChange: nextValue => {
+                      setDisplayAllowPrinterChange(nextValue);
+                      saveDisplayPrintingConfig({
+                        displayAllowPrinterChange: nextValue,
+                      });
+                    },
+                  })}
+
+                  {renderSwitchRow({
+                    disabled: savingDisplayPrintingConfig,
+                    label: 'Imprimir produtos automaticamente',
+                    value: displayAutoPrintProductEnabled,
+                    valueLabel: displayAutoPrintProductEnabled
+                      ? 'Ativo'
+                      : 'Inativo',
+                    onValueChange: nextValue => {
+                      setDisplayAutoPrintProductEnabled(nextValue);
+                      saveDisplayPrintingConfig({
+                        displayAutoPrintProductEnabled: nextValue,
+                      });
+                    },
+                  })}
                 </>
               )}
             </View>
@@ -2517,18 +2568,18 @@ const DeviceDetailPage = () => {
               )}
             </View>
 
-            {renderSwitchRow({
-              disabled: savingAlertSound,
-              label: 'Aviso sonoro habilitado',
-              value: deviceAlertSoundEnabled,
-              valueLabel: deviceAlertSoundEnabled ? 'Ativo' : 'Inativo',
-              onValueChange: nextValue => {
-                setDeviceAlertSoundEnabled(nextValue);
-                saveDeviceAlertSoundConfig({
-                  deviceAlertSoundEnabled: nextValue,
-                });
-              },
-            })}
+            {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>
@@ -2565,18 +2616,18 @@ const DeviceDetailPage = () => {
               )}
             </View>
 
-            {renderSwitchRow({
-              disabled: savingRuntimeDebugInfo,
-              label: 'Exibir debug detalhado',
-              value: deviceRuntimeDebugInfoEnabled,
-              valueLabel: deviceRuntimeDebugInfoEnabled ? 'Ativo' : 'Inativo',
-              onValueChange: nextValue => {
-                setDeviceRuntimeDebugInfoEnabled(nextValue);
-                saveDeviceRuntimeDebugInfo({
-                  deviceRuntimeDebugInfoEnabled: nextValue,
-                });
-              },
-            })}
+            {renderSwitchRow({
+              disabled: savingRuntimeDebugInfo,
+              label: 'Exibir debug detalhado',
+              value: deviceRuntimeDebugInfoEnabled,
+              valueLabel: deviceRuntimeDebugInfoEnabled ? 'Ativo' : 'Inativo',
+              onValueChange: nextValue => {
+                setDeviceRuntimeDebugInfoEnabled(nextValue);
+                saveDeviceRuntimeDebugInfo({
+                  deviceRuntimeDebugInfoEnabled: nextValue,
+                });
+              },
+            })}
           </View>
         </View>
         )}
@@ -2641,27 +2692,27 @@ const DeviceDetailPage = () => {
                 )}
               </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>
+              <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>
         )}