@controleonline/ui-common 1.2.75 → 1.2.76

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/package.json +1 -1
  2. package/src/react/components/RuntimeInfoFooter.js +72 -76
  3. package/src/react/pages/DeviceDetailPage.js +455 -404
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@controleonline/ui-common",
3
- "version": "1.2.75",
3
+ "version": "1.2.76",
4
4
  "author": "ControleOnline",
5
5
  "description": "ControleOnline Common Quasar UI Component",
6
6
  "license": "MIT",
package/src/react/components/RuntimeInfoFooter.js CHANGED
@@ -11,9 +11,9 @@ import {useSafeAreaInsets} from 'react-native-safe-area-context';
11
11
  import {
12
12
  DEVICE_RUNTIME_DEBUG_INFO_ENABLED_KEY,
13
13
  isTruthyValue,
14
- parseConfigsObject,
15
- } from '@controleonline/ui-common/src/react/config/deviceConfigBootstrap';
16
- import {
14
+ parseConfigsObject,
15
+ } from '@controleonline/ui-common/src/react/config/deviceConfigBootstrap';
16
+ import {
17
17
  getRuntimeFooterDebugInfo,
18
18
  getRuntimeFooterPrimaryText,
19
19
  getRuntimeFooterRotationEntries,
@@ -22,11 +22,11 @@ import {
22
22
  } from '@controleonline/ui-common/src/react/utils/runtimeFooter';
23
23
  import styles from './RuntimeInfoFooter.styles';
24
24
 
25
- const ROTATION_INTERVAL_MS = 6000;
25
+ const ROTATION_INTERVAL_MS = 4000;
26
26
  const FADE_DURATION_MS = 260;
27
27
  const COMPACT_BREAKPOINT = 720;
28
28
  const MAX_INLINE_TEXT_LENGTH = 84;
29
-
29
+
30
30
  const RuntimeInfoFooter = ({
31
31
  appVersion,
32
32
  defaultCompany,
@@ -43,26 +43,26 @@ const RuntimeInfoFooter = ({
43
43
  const runtimeDebugStore = useStore('runtime_debug');
44
44
  const deviceConfigItem = deviceConfigStore?.getters?.item || {};
45
45
  const runtimeDebugSummary = runtimeDebugStore?.getters?.summary || {};
46
-
47
- const footerDebugInfo = useMemo(
48
- () =>
49
- getRuntimeFooterDebugInfo({
50
- device,
51
- appVersion,
52
- deviceConfig: deviceConfigItem,
53
- }),
54
- [appVersion, device, deviceConfigItem],
55
- );
56
- const primaryText = useMemo(
57
- () =>
58
- footerDebugInfo.primaryText ||
59
- getRuntimeFooterPrimaryText({
60
- device,
61
- appVersion,
62
- deviceConfig: deviceConfigItem,
63
- }),
64
- [appVersion, device, deviceConfigItem, footerDebugInfo.primaryText],
65
- );
46
+
47
+ const footerDebugInfo = useMemo(
48
+ () =>
49
+ getRuntimeFooterDebugInfo({
50
+ device,
51
+ appVersion,
52
+ deviceConfig: deviceConfigItem,
53
+ }),
54
+ [appVersion, device, deviceConfigItem],
55
+ );
56
+ const primaryText = useMemo(
57
+ () =>
58
+ footerDebugInfo.primaryText ||
59
+ getRuntimeFooterPrimaryText({
60
+ device,
61
+ appVersion,
62
+ deviceConfig: deviceConfigItem,
63
+ }),
64
+ [appVersion, device, deviceConfigItem, footerDebugInfo.primaryText],
65
+ );
66
66
  const companyFooterText = useMemo(
67
67
  () => getRuntimeFooterText(defaultCompany),
68
68
  [defaultCompany?.configs],
@@ -71,18 +71,18 @@ const RuntimeInfoFooter = ({
71
71
  () => getRuntimeFooterTextLines(companyFooterText),
72
72
  [companyFooterText],
73
73
  );
74
- const deviceConfigs = useMemo(
75
- () => parseConfigsObject(deviceConfigItem?.configs),
76
- [deviceConfigItem?.configs],
77
- );
78
- const showDebugInfo = useMemo(
79
- () =>
80
- isTruthyValue(
81
- deviceConfigs?.[DEVICE_RUNTIME_DEBUG_INFO_ENABLED_KEY],
82
- ),
83
- [deviceConfigs],
84
- );
85
-
74
+ const deviceConfigs = useMemo(
75
+ () => parseConfigsObject(deviceConfigItem?.configs),
76
+ [deviceConfigItem?.configs],
77
+ );
78
+ const showDebugInfo = useMemo(
79
+ () =>
80
+ isTruthyValue(
81
+ deviceConfigs?.[DEVICE_RUNTIME_DEBUG_INFO_ENABLED_KEY],
82
+ ),
83
+ [deviceConfigs],
84
+ );
85
+
86
86
  const rotationEntries = useMemo(
87
87
  () =>
88
88
  getRuntimeFooterRotationEntries({
@@ -95,43 +95,39 @@ const RuntimeInfoFooter = ({
95
95
  () => [primaryText, ...footerTextLines].filter(Boolean).join(' • '),
96
96
  [footerTextLines, primaryText],
97
97
  );
98
+ // Always rotate when there is more than one entry (e.g. 1 footer line + primaryText).
99
+ // Do not fall back to concatenated inlineText in that case.
98
100
  const shouldRotate =
99
- !showDebugInfo &&
100
- rotationEntries.length > 1 &&
101
- (
102
- footerTextLines.length > 1 ||
103
- width < COMPACT_BREAKPOINT ||
104
- inlineText.length > MAX_INLINE_TEXT_LENGTH
105
- );
106
- const footerEntries = useMemo(
107
- () =>
108
- Object.values(runtimeDebugSummary?.entries || {})
109
- .filter(entry => entry && Array.isArray(entry.lines) && entry.lines.length > 0)
110
- .sort((left, right) => {
111
- const leftOrder = Number(left?.order || 100);
112
- const rightOrder = Number(right?.order || 100);
113
- if (leftOrder !== rightOrder) {
114
- return leftOrder - rightOrder;
115
- }
116
-
117
- const leftTime = Date.parse(left?.updatedAt || '');
118
- const rightTime = Date.parse(right?.updatedAt || '');
119
- if (Number.isFinite(leftTime) && Number.isFinite(rightTime)) {
120
- return rightTime - leftTime;
121
- }
122
-
123
- if (Number.isFinite(rightTime)) {
124
- return 1;
125
- }
126
-
127
- if (Number.isFinite(leftTime)) {
128
- return -1;
129
- }
130
-
131
- return 0;
132
- }),
133
- [runtimeDebugSummary?.entries],
134
- );
101
+ !showDebugInfo && rotationEntries.length > 1;
102
+ const footerEntries = useMemo(
103
+ () =>
104
+ Object.values(runtimeDebugSummary?.entries || {})
105
+ .filter(entry => entry && Array.isArray(entry.lines) && entry.lines.length > 0)
106
+ .sort((left, right) => {
107
+ const leftOrder = Number(left?.order || 100);
108
+ const rightOrder = Number(right?.order || 100);
109
+ if (leftOrder !== rightOrder) {
110
+ return leftOrder - rightOrder;
111
+ }
112
+
113
+ const leftTime = Date.parse(left?.updatedAt || '');
114
+ const rightTime = Date.parse(right?.updatedAt || '');
115
+ if (Number.isFinite(leftTime) && Number.isFinite(rightTime)) {
116
+ return rightTime - leftTime;
117
+ }
118
+
119
+ if (Number.isFinite(rightTime)) {
120
+ return 1;
121
+ }
122
+
123
+ if (Number.isFinite(leftTime)) {
124
+ return -1;
125
+ }
126
+
127
+ return 0;
128
+ }),
129
+ [runtimeDebugSummary?.entries],
130
+ );
135
131
  const socketEntry = useMemo(
136
132
  () => footerEntries.find(entry => entry?.key === 'socket') || null,
137
133
  [footerEntries],
@@ -170,7 +166,7 @@ const RuntimeInfoFooter = ({
170
166
  [allStores],
171
167
  );
172
168
  const bottomInset = Math.max(Number(insets.bottom) || 0, 16);
173
-
169
+
174
170
  useEffect(() => {
175
171
  if (!shouldRotate || rotationEntries.length <= 1) {
176
172
  setActiveIndex(0);
@@ -302,5 +298,5 @@ const RuntimeInfoFooter = ({
302
298
  </View>
303
299
  );
304
300
  };
305
-
306
- export default RuntimeInfoFooter;
301
+
302
+ export default RuntimeInfoFooter;
package/src/react/pages/DeviceDetailPage.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
2
- import { Alert, FlatList, Platform, Pressable, ScrollView, Switch, Text, TextInput, TouchableOpacity, View } from 'react-native';
2
+ import { Alert, FlatList, Platform, Pressable, ScrollView, Switch, Text, TextInput, TouchableOpacity, View } from 'react-native';
3
3
  import { SafeAreaView } from 'react-native-safe-area-context';
4
4
  import { useFocusEffect, useNavigation, useRoute } from '@react-navigation/native';
5
5
  import {Picker} from '@react-native-picker/picker';
@@ -182,51 +182,51 @@ const getIsOpen = configs => {
182
182
  return isPosCashRegisterOpen(configs);
183
183
  };
184
184
 
185
- const confirm = (msg, cb) => {
186
- if (Platform.OS === 'web') {
187
- if (window.confirm(msg)) cb();
188
- } else {
189
- Alert.alert('Confirmação', msg, [
185
+ const confirm = (msg, cb) => {
186
+ if (Platform.OS === 'web') {
187
+ if (window.confirm(msg)) cb();
188
+ } else {
189
+ Alert.alert('Confirmação', msg, [
190
190
  { text: 'Cancelar', style: 'cancel' },
191
191
  { text: 'Confirmar', onPress: cb },
192
192
  ]);
193
- }
194
- };
195
-
196
- const getDeviceSwitchProps = ({
197
- disabled = false,
198
- palette,
199
- value = false,
200
- }) => {
201
- const offTrackColor = disabled
202
- ? palette.switchDisabledTrack
203
- : palette.switchOffTrack;
204
- const onTrackColor = disabled
205
- ? palette.switchDisabledTrack
206
- : palette.switchOnTrack;
207
-
208
- return {
209
- ios_backgroundColor: offTrackColor,
210
- thumbColor: disabled
211
- ? palette.switchDisabledThumb
212
- : value
213
- ? palette.switchOnThumb
214
- : palette.switchOffThumb,
215
- trackColor: {
216
- false: offTrackColor,
217
- true: onTrackColor,
218
- },
219
- };
220
- };
221
-
222
- const OptionButtonChip = ({
223
- label,
224
- selected,
225
- disabled,
226
- colors: optionColors,
227
- tooltip,
228
- onPress,
229
- }) => {
193
+ }
194
+ };
195
+
196
+ const getDeviceSwitchProps = ({
197
+ disabled = false,
198
+ palette,
199
+ value = false,
200
+ }) => {
201
+ const offTrackColor = disabled
202
+ ? palette.switchDisabledTrack
203
+ : palette.switchOffTrack;
204
+ const onTrackColor = disabled
205
+ ? palette.switchDisabledTrack
206
+ : palette.switchOnTrack;
207
+
208
+ return {
209
+ ios_backgroundColor: offTrackColor,
210
+ thumbColor: disabled
211
+ ? palette.switchDisabledThumb
212
+ : value
213
+ ? palette.switchOnThumb
214
+ : palette.switchOffThumb,
215
+ trackColor: {
216
+ false: offTrackColor,
217
+ true: onTrackColor,
218
+ },
219
+ };
220
+ };
221
+
222
+ const OptionButtonChip = ({
223
+ label,
224
+ selected,
225
+ disabled,
226
+ colors: optionColors,
227
+ tooltip,
228
+ onPress,
229
+ }) => {
230
230
  const [hovered, setHovered] = useState(false);
231
231
  const showTooltip = Platform.OS === 'web' && disabled && Boolean(tooltip) && hovered;
232
232
 
@@ -237,34 +237,34 @@ const OptionButtonChip = ({
237
237
  style={[styles.optionButtonHoverWrap, hovered && styles.optionButtonHoverWrapActive]}
238
238
  >
239
239
  <TouchableOpacity
240
- style={[
241
- styles.optionButton,
242
- selected && styles.optionButtonActive,
243
- optionColors && {
244
- backgroundColor: selected
245
- ? optionColors.buttonBackground
246
- : optionColors.buttonBackgroundSecondary,
247
- borderColor: selected
248
- ? optionColors.buttonBorder
249
- : optionColors.buttonBorderSecondary,
250
- },
251
- disabled && {opacity: 0.55},
252
- ]}
240
+ style={[
241
+ styles.optionButton,
242
+ selected && styles.optionButtonActive,
243
+ optionColors && {
244
+ backgroundColor: selected
245
+ ? optionColors.buttonBackground
246
+ : optionColors.buttonBackgroundSecondary,
247
+ borderColor: selected
248
+ ? optionColors.buttonBorder
249
+ : optionColors.buttonBorderSecondary,
250
+ },
251
+ disabled && {opacity: 0.55},
252
+ ]}
253
253
  accessibilityHint={tooltip || undefined}
254
254
  activeOpacity={disabled ? 1 : 0.85}
255
255
  disabled={disabled}
256
256
  onPress={disabled ? undefined : onPress}
257
257
  >
258
258
  <Text
259
- style={[
260
- styles.optionButtonText,
261
- selected && styles.optionButtonTextActive,
262
- optionColors && {
263
- color: selected
264
- ? optionColors.buttonText
265
- : optionColors.buttonTextSecondary,
266
- },
267
- ]}
259
+ style={[
260
+ styles.optionButtonText,
261
+ selected && styles.optionButtonTextActive,
262
+ optionColors && {
263
+ color: selected
264
+ ? optionColors.buttonText
265
+ : optionColors.buttonTextSecondary,
266
+ },
267
+ ]}
268
268
  >
269
269
  {label}
270
270
  </Text>
@@ -494,6 +494,7 @@ const DeviceDetailPage = () => {
494
494
  const [editingAlias, setEditingAlias] = useState(false);
495
495
  const [aliasInput, setAliasInput] = useState(alias);
496
496
  const [savingAlias, setSavingAlias] = useState(false);
497
+ const [removingDevice, setRemovingDevice] = useState(false);
497
498
  const aliasInputRef = useRef(null);
498
499
 
499
500
  useEffect(() => {
@@ -1070,6 +1071,34 @@ const DeviceDetailPage = () => {
1070
1071
  }
1071
1072
  }, [aliasInput, alias, deviceId, cancelEditAlias, showSystemError]);
1072
1073
 
1074
+ const confirmRemoveDevice = useCallback(() => {
1075
+ if (!deviceId || removingDevice) {
1076
+ return;
1077
+ }
1078
+ Alert.alert(
1079
+ 'Excluir device',
1080
+ `Tem certeza que deseja excluir o device "${alias || deviceString || deviceId}"? Esta ação não pode ser desfeita.`,
1081
+ [
1082
+ { text: 'Cancelar', style: 'cancel' },
1083
+ {
1084
+ text: 'Excluir',
1085
+ style: 'destructive',
1086
+ onPress: async () => {
1087
+ setRemovingDevice(true);
1088
+ try {
1089
+ await actionsRef.current.deviceActions.remove(deviceId);
1090
+ navigation.navigate('DevicesIndex');
1091
+ } catch (error) {
1092
+ showSystemError(error, 'Não foi possível excluir o device.');
1093
+ } finally {
1094
+ setRemovingDevice(false);
1095
+ }
1096
+ },
1097
+ },
1098
+ ],
1099
+ );
1100
+ }, [deviceId, removingDevice, alias, deviceString, navigation, showSystemError]);
1101
+
1073
1102
  const saveDevicePaymentTarget = useCallback(async (override = {}) => {
1074
1103
  const nextDevicePaymentTarget =
1075
1104
  override.devicePaymentTarget ?? devicePaymentTarget;
@@ -1737,78 +1766,78 @@ const DeviceDetailPage = () => {
1737
1766
  </View>
1738
1767
  );
1739
1768
 
1740
- const renderHelpButton = (title, message) => (
1741
- <DefaultTooltip
1742
- accentColor={themeColors.buttonIcon}
1743
- title={title}
1744
- message={message}
1745
- style={{
1746
- backgroundColor: themeColors.buttonBackground,
1747
- borderColor: themeColors.buttonBackground,
1748
- borderRadius: 8,
1749
- height: 34,
1750
- width: 34,
1751
- }}
1752
- textStyle={{
1753
- color: themeColors.buttonIcon,
1754
- fontSize: 16,
1755
- lineHeight: 16,
1756
- }}
1757
- />
1758
- );
1759
-
1760
- const renderSwitchRow = ({
1761
- disabled = false,
1762
- label,
1763
- onValueChange,
1764
- value,
1765
- valueLabel,
1766
- }) => {
1767
- const checked = Boolean(value);
1768
-
1769
- return (
1770
- <View
1771
- style={[
1772
- styles.toggleRow,
1773
- {
1774
- backgroundColor: themeColors.listItemBackground,
1775
- borderColor: themeColors.listItemBorder,
1776
- },
1777
- disabled && styles.toggleRowDisabled,
1778
- ]}>
1779
- <View style={styles.toggleRowCopy}>
1780
- <Text
1781
- style={[
1782
- styles.toggleRowLabel,
1783
- {color: themeColors.listItemText},
1784
- ]}>
1785
- {label}
1786
- </Text>
1787
- <Text
1788
- style={[
1789
- styles.toggleRowValue,
1790
- {color: themeColors.listItemSubtitleText},
1791
- ]}>
1792
- {valueLabel}
1793
- </Text>
1794
- </View>
1795
- <Switch
1796
- value={checked}
1797
- disabled={disabled}
1798
- onValueChange={onValueChange}
1799
- {...getDeviceSwitchProps({
1800
- disabled,
1801
- palette: themeColors,
1802
- value: checked,
1803
- })}
1804
- />
1805
- </View>
1806
- );
1807
- };
1808
-
1809
- const renderOptionButtons = ({ options, value, onChange, disabled = false, optionColors = null }) => (
1810
- <View style={styles.optionRow}>
1811
- {options.map(option => {
1769
+ const renderHelpButton = (title, message) => (
1770
+ <DefaultTooltip
1771
+ accentColor={themeColors.buttonIcon}
1772
+ title={title}
1773
+ message={message}
1774
+ style={{
1775
+ backgroundColor: themeColors.buttonBackground,
1776
+ borderColor: themeColors.buttonBackground,
1777
+ borderRadius: 8,
1778
+ height: 34,
1779
+ width: 34,
1780
+ }}
1781
+ textStyle={{
1782
+ color: themeColors.buttonIcon,
1783
+ fontSize: 16,
1784
+ lineHeight: 16,
1785
+ }}
1786
+ />
1787
+ );
1788
+
1789
+ const renderSwitchRow = ({
1790
+ disabled = false,
1791
+ label,
1792
+ onValueChange,
1793
+ value,
1794
+ valueLabel,
1795
+ }) => {
1796
+ const checked = Boolean(value);
1797
+
1798
+ return (
1799
+ <View
1800
+ style={[
1801
+ styles.toggleRow,
1802
+ {
1803
+ backgroundColor: themeColors.listItemBackground,
1804
+ borderColor: themeColors.listItemBorder,
1805
+ },
1806
+ disabled && styles.toggleRowDisabled,
1807
+ ]}>
1808
+ <View style={styles.toggleRowCopy}>
1809
+ <Text
1810
+ style={[
1811
+ styles.toggleRowLabel,
1812
+ {color: themeColors.listItemText},
1813
+ ]}>
1814
+ {label}
1815
+ </Text>
1816
+ <Text
1817
+ style={[
1818
+ styles.toggleRowValue,
1819
+ {color: themeColors.listItemSubtitleText},
1820
+ ]}>
1821
+ {valueLabel}
1822
+ </Text>
1823
+ </View>
1824
+ <Switch
1825
+ value={checked}
1826
+ disabled={disabled}
1827
+ onValueChange={onValueChange}
1828
+ {...getDeviceSwitchProps({
1829
+ disabled,
1830
+ palette: themeColors,
1831
+ value: checked,
1832
+ })}
1833
+ />
1834
+ </View>
1835
+ );
1836
+ };
1837
+
1838
+ const renderOptionButtons = ({ options, value, onChange, disabled = false, optionColors = null }) => (
1839
+ <View style={styles.optionRow}>
1840
+ {options.map(option => {
1812
1841
  const selected = String(option.value) === String(value);
1813
1842
  const optionDisabled = disabled || option.disabled === true;
1814
1843
  const optionTitle = String(option.title || '').trim();
@@ -1816,26 +1845,26 @@ const DeviceDetailPage = () => {
1816
1845
  return (
1817
1846
  <OptionButtonChip
1818
1847
  key={String(option.value)}
1819
- label={option.label}
1820
- selected={selected}
1821
- disabled
1822
- colors={optionColors}
1823
- tooltip={optionTitle}
1824
- onPress={() => onChange(option.value)}
1825
- />
1848
+ label={option.label}
1849
+ selected={selected}
1850
+ disabled
1851
+ colors={optionColors}
1852
+ tooltip={optionTitle}
1853
+ onPress={() => onChange(option.value)}
1854
+ />
1826
1855
  );
1827
1856
  }
1828
1857
 
1829
1858
  return (
1830
1859
  <OptionButtonChip
1831
1860
  key={String(option.value)}
1832
- label={option.label}
1833
- selected={selected}
1834
- disabled={optionDisabled}
1835
- colors={optionColors}
1836
- tooltip={optionTitle}
1837
- onPress={() => onChange(option.value)}
1838
- />
1861
+ label={option.label}
1862
+ selected={selected}
1863
+ disabled={optionDisabled}
1864
+ colors={optionColors}
1865
+ tooltip={optionTitle}
1866
+ onPress={() => onChange(option.value)}
1867
+ />
1839
1868
  );
1840
1869
  })}
1841
1870
  </View>
@@ -1872,24 +1901,46 @@ const DeviceDetailPage = () => {
1872
1901
  )}
1873
1902
 
1874
1903
  {!!deviceId && (
1875
- <TouchableOpacity
1876
- style={[
1877
- styles.editAliasBtn,
1878
- {
1879
- backgroundColor: themeColors.buttonBackground,
1880
- borderColor: themeColors.buttonBackground,
1881
- },
1882
- ]}
1883
- onPress={editingAlias ? saveAlias : startEditAlias}
1884
- activeOpacity={0.8}
1885
- disabled={savingAlias}
1886
- >
1887
- <Icon
1888
- name={savingAlias ? 'save' : editingAlias ? 'check' : 'edit-2'}
1889
- size={16}
1890
- color={themeColors.buttonIcon}
1891
- />
1892
- </TouchableOpacity>
1904
+ <TouchableOpacity
1905
+ style={[
1906
+ styles.editAliasBtn,
1907
+ {
1908
+ backgroundColor: themeColors.buttonBackground,
1909
+ borderColor: themeColors.buttonBackground,
1910
+ },
1911
+ ]}
1912
+ onPress={editingAlias ? saveAlias : startEditAlias}
1913
+ activeOpacity={0.8}
1914
+ disabled={savingAlias || removingDevice}
1915
+ >
1916
+ <Icon
1917
+ name={savingAlias ? 'save' : editingAlias ? 'check' : 'edit-2'}
1918
+ size={16}
1919
+ color={themeColors.buttonIcon}
1920
+ />
1921
+ </TouchableOpacity>
1922
+ )}
1923
+ {!!deviceId && !editingAlias && (
1924
+ <TouchableOpacity
1925
+ style={[
1926
+ styles.editAliasBtn,
1927
+ {
1928
+ backgroundColor: themeColors.buttonBackground,
1929
+ borderColor: themeColors.buttonBackground,
1930
+ marginLeft: 8,
1931
+ },
1932
+ ]}
1933
+ onPress={confirmRemoveDevice}
1934
+ activeOpacity={0.8}
1935
+ disabled={removingDevice || savingAlias}
1936
+ accessibilityLabel="Excluir device"
1937
+ >
1938
+ <Icon
1939
+ name={removingDevice ? 'loader' : 'trash-2'}
1940
+ size={16}
1941
+ color={themeColors.buttonIcon}
1942
+ />
1943
+ </TouchableOpacity>
1893
1944
  )}
1894
1945
  </View>
1895
1946
 
@@ -1914,44 +1965,44 @@ const DeviceDetailPage = () => {
1914
1965
  horizontal
1915
1966
  showsHorizontalScrollIndicator={false}
1916
1967
  contentContainerStyle={styles.tabsContent}>
1917
- {PDV_DETAIL_TABS.map(tab => {
1918
- const active = activePdvTab === tab.key;
1919
- const tabButtonColors = active
1920
- ? {
1921
- backgroundColor: themeColors.buttonBackground,
1922
- borderColor: themeColors.buttonBorder,
1923
- iconColor: themeColors.buttonIcon,
1924
- textColor: themeColors.buttonText,
1925
- }
1926
- : {
1927
- backgroundColor: themeColors.buttonBackgroundSecondary,
1928
- borderColor: themeColors.buttonBorderSecondary,
1929
- iconColor: themeColors.buttonIconSecondary,
1930
- textColor: themeColors.buttonTextSecondary,
1931
- };
1932
-
1933
- return (
1934
- <TouchableOpacity
1935
- key={tab.key}
1936
- style={[
1937
- styles.tabButton,
1938
- {
1939
- backgroundColor: tabButtonColors.backgroundColor,
1940
- borderColor: tabButtonColors.borderColor,
1941
- },
1942
- ]}
1943
- activeOpacity={0.85}
1944
- onPress={() => setActivePdvTab(tab.key)}>
1945
- <Icon
1946
- name={tab.icon}
1947
- size={14}
1948
- color={tabButtonColors.iconColor}
1949
- />
1950
- <Text
1951
- style={[
1952
- styles.tabButtonText,
1953
- {color: tabButtonColors.textColor},
1954
- ]}>
1968
+ {PDV_DETAIL_TABS.map(tab => {
1969
+ const active = activePdvTab === tab.key;
1970
+ const tabButtonColors = active
1971
+ ? {
1972
+ backgroundColor: themeColors.buttonBackground,
1973
+ borderColor: themeColors.buttonBorder,
1974
+ iconColor: themeColors.buttonIcon,
1975
+ textColor: themeColors.buttonText,
1976
+ }
1977
+ : {
1978
+ backgroundColor: themeColors.buttonBackgroundSecondary,
1979
+ borderColor: themeColors.buttonBorderSecondary,
1980
+ iconColor: themeColors.buttonIconSecondary,
1981
+ textColor: themeColors.buttonTextSecondary,
1982
+ };
1983
+
1984
+ return (
1985
+ <TouchableOpacity
1986
+ key={tab.key}
1987
+ style={[
1988
+ styles.tabButton,
1989
+ {
1990
+ backgroundColor: tabButtonColors.backgroundColor,
1991
+ borderColor: tabButtonColors.borderColor,
1992
+ },
1993
+ ]}
1994
+ activeOpacity={0.85}
1995
+ onPress={() => setActivePdvTab(tab.key)}>
1996
+ <Icon
1997
+ name={tab.icon}
1998
+ size={14}
1999
+ color={tabButtonColors.iconColor}
2000
+ />
2001
+ <Text
2002
+ style={[
2003
+ styles.tabButtonText,
2004
+ {color: tabButtonColors.textColor},
2005
+ ]}>
1955
2006
  {tt('tab', tab.labelKey) ||
1956
2007
  (tab.key === PDV_TAB_PAYMENT_TYPES
1957
2008
  ? 'Pagamentos'
@@ -2012,17 +2063,17 @@ const DeviceDetailPage = () => {
2012
2063
  options: POS_OPERATION_MODE_OPTIONS.map(option => ({
2013
2064
  label: tt('option', option.translationKey),
2014
2065
  value: option.value,
2015
- })),
2016
- value: posOperationMode,
2017
- optionColors: {
2018
- buttonBackground: themeColors.buttonBackground,
2019
- buttonBorder: themeColors.buttonBorder,
2020
- buttonText: themeColors.buttonText,
2021
- buttonBackgroundSecondary: themeColors.buttonBackgroundSecondary,
2022
- buttonBorderSecondary: themeColors.buttonBorderSecondary,
2023
- buttonTextSecondary: themeColors.buttonTextSecondary,
2024
- },
2025
- onChange: value => {
2066
+ })),
2067
+ value: posOperationMode,
2068
+ optionColors: {
2069
+ buttonBackground: themeColors.buttonBackground,
2070
+ buttonBorder: themeColors.buttonBorder,
2071
+ buttonText: themeColors.buttonText,
2072
+ buttonBackgroundSecondary: themeColors.buttonBackgroundSecondary,
2073
+ buttonBorderSecondary: themeColors.buttonBorderSecondary,
2074
+ buttonTextSecondary: themeColors.buttonTextSecondary,
2075
+ },
2076
+ onChange: value => {
2026
2077
  const nextValue = resolvePosOperationMode({
2027
2078
  [POS_OPERATION_MODE_CONFIG_KEY]: value,
2028
2079
  });
@@ -2064,16 +2115,16 @@ const DeviceDetailPage = () => {
2064
2115
  </Picker>
2065
2116
  </View>
2066
2117
 
2067
- {renderSwitchRow({
2068
- disabled: savingPosOperationMode,
2069
- label: 'Modo Kiosk',
2070
- value: androidKioskEnabled,
2071
- valueLabel: androidKioskEnabled ? 'Ativo' : 'Inativo',
2072
- onValueChange: nextValue => {
2073
- setAndroidKioskEnabled(nextValue);
2074
- savePosOperationMode({androidKioskEnabled: nextValue});
2075
- },
2076
- })}
2118
+ {renderSwitchRow({
2119
+ disabled: savingPosOperationMode,
2120
+ label: 'Modo Kiosk',
2121
+ value: androidKioskEnabled,
2122
+ valueLabel: androidKioskEnabled ? 'Ativo' : 'Inativo',
2123
+ onValueChange: nextValue => {
2124
+ setAndroidKioskEnabled(nextValue);
2125
+ savePosOperationMode({androidKioskEnabled: nextValue});
2126
+ },
2127
+ })}
2077
2128
 
2078
2129
  {renderOptionButtons({
2079
2130
  options: [
@@ -2098,16 +2149,16 @@ const DeviceDetailPage = () => {
2098
2149
  : '',
2099
2150
  },
2100
2151
  ],
2101
- value: checkOrderType,
2102
- optionColors: {
2103
- buttonBackground: themeColors.buttonBackground,
2104
- buttonBorder: themeColors.buttonBorder,
2105
- buttonText: themeColors.buttonText,
2106
- buttonBackgroundSecondary: themeColors.buttonBackgroundSecondary,
2107
- buttonBorderSecondary: themeColors.buttonBorderSecondary,
2108
- buttonTextSecondary: themeColors.buttonTextSecondary,
2109
- },
2110
- onChange: value => {
2152
+ value: checkOrderType,
2153
+ optionColors: {
2154
+ buttonBackground: themeColors.buttonBackground,
2155
+ buttonBorder: themeColors.buttonBorder,
2156
+ buttonText: themeColors.buttonText,
2157
+ buttonBackgroundSecondary: themeColors.buttonBackgroundSecondary,
2158
+ buttonBorderSecondary: themeColors.buttonBorderSecondary,
2159
+ buttonTextSecondary: themeColors.buttonTextSecondary,
2160
+ },
2161
+ onChange: value => {
2111
2162
  const nextCheckOrderType =
2112
2163
  value === POS_CHECK_ORDER_TYPE_TAB
2113
2164
  ? POS_CHECK_ORDER_TYPE_TAB
@@ -2170,33 +2221,33 @@ const DeviceDetailPage = () => {
2170
2221
 
2171
2222
  {posOperationMode === POS_OPERATION_MODE_COUNTER && (
2172
2223
  <>
2173
- {renderSwitchRow({
2174
- disabled: savingPosOperationMode,
2175
- label: 'Impressao automatica',
2176
- value: counterAutoPrintEnabled,
2177
- valueLabel: counterAutoPrintEnabled ? 'Sim' : 'Nao',
2178
- onValueChange: nextValue => {
2179
- setCounterAutoPrintEnabled(nextValue);
2180
- savePosOperationMode({counterAutoPrintEnabled: nextValue});
2181
- },
2182
- })}
2183
-
2184
- {counterAutoPrintEnabled &&
2185
- renderOptionButtons({
2186
- options: [
2187
- {label: 'Pedido', value: POS_PRINT_MODE_ORDER},
2188
- {label: 'Fichas', value: POS_PRINT_MODE_FORM},
2189
- ],
2190
- value: counterPrintMode,
2191
- optionColors: {
2192
- buttonBackground: themeColors.buttonBackground,
2193
- buttonBorder: themeColors.buttonBorder,
2194
- buttonText: themeColors.buttonText,
2195
- buttonBackgroundSecondary: themeColors.buttonBackgroundSecondary,
2196
- buttonBorderSecondary: themeColors.buttonBorderSecondary,
2197
- buttonTextSecondary: themeColors.buttonTextSecondary,
2198
- },
2199
- onChange: value => {
2224
+ {renderSwitchRow({
2225
+ disabled: savingPosOperationMode,
2226
+ label: 'Impressao automatica',
2227
+ value: counterAutoPrintEnabled,
2228
+ valueLabel: counterAutoPrintEnabled ? 'Sim' : 'Nao',
2229
+ onValueChange: nextValue => {
2230
+ setCounterAutoPrintEnabled(nextValue);
2231
+ savePosOperationMode({counterAutoPrintEnabled: nextValue});
2232
+ },
2233
+ })}
2234
+
2235
+ {counterAutoPrintEnabled &&
2236
+ renderOptionButtons({
2237
+ options: [
2238
+ {label: 'Pedido', value: POS_PRINT_MODE_ORDER},
2239
+ {label: 'Fichas', value: POS_PRINT_MODE_FORM},
2240
+ ],
2241
+ value: counterPrintMode,
2242
+ optionColors: {
2243
+ buttonBackground: themeColors.buttonBackground,
2244
+ buttonBorder: themeColors.buttonBorder,
2245
+ buttonText: themeColors.buttonText,
2246
+ buttonBackgroundSecondary: themeColors.buttonBackgroundSecondary,
2247
+ buttonBorderSecondary: themeColors.buttonBorderSecondary,
2248
+ buttonTextSecondary: themeColors.buttonTextSecondary,
2249
+ },
2250
+ onChange: value => {
2200
2251
  const nextValue =
2201
2252
  value === POS_PRINT_MODE_FORM
2202
2253
  ? POS_PRINT_MODE_FORM
@@ -2216,17 +2267,17 @@ const DeviceDetailPage = () => {
2216
2267
  label: 'Fechamento diario',
2217
2268
  value: POS_CASH_MANAGEMENT_MODE_DAILY,
2218
2269
  },
2219
- ],
2220
- value: counterCashManagementMode,
2221
- optionColors: {
2222
- buttonBackground: themeColors.buttonBackground,
2223
- buttonBorder: themeColors.buttonBorder,
2224
- buttonText: themeColors.buttonText,
2225
- buttonBackgroundSecondary: themeColors.buttonBackgroundSecondary,
2226
- buttonBorderSecondary: themeColors.buttonBorderSecondary,
2227
- buttonTextSecondary: themeColors.buttonTextSecondary,
2228
- },
2229
- onChange: value => {
2270
+ ],
2271
+ value: counterCashManagementMode,
2272
+ optionColors: {
2273
+ buttonBackground: themeColors.buttonBackground,
2274
+ buttonBorder: themeColors.buttonBorder,
2275
+ buttonText: themeColors.buttonText,
2276
+ buttonBackgroundSecondary: themeColors.buttonBackgroundSecondary,
2277
+ buttonBorderSecondary: themeColors.buttonBorderSecondary,
2278
+ buttonTextSecondary: themeColors.buttonTextSecondary,
2279
+ },
2280
+ onChange: value => {
2230
2281
  const nextValue =
2231
2282
  value === POS_CASH_MANAGEMENT_MODE_DAILY
2232
2283
  ? POS_CASH_MANAGEMENT_MODE_DAILY
@@ -2251,16 +2302,16 @@ const DeviceDetailPage = () => {
2251
2302
  )}
2252
2303
  </View>
2253
2304
 
2254
- {renderSwitchRow({
2255
- disabled: savingLauncherMode,
2256
- label: 'Modo launcher?',
2257
- value: androidLauncherEnabled,
2258
- valueLabel: androidLauncherEnabled ? 'Ativo' : 'Inativo',
2259
- onValueChange: nextValue => {
2260
- setAndroidLauncherEnabled(nextValue);
2261
- saveLauncherMode({androidLauncherEnabled: nextValue});
2262
- },
2263
- })}
2305
+ {renderSwitchRow({
2306
+ disabled: savingLauncherMode,
2307
+ label: 'Modo launcher?',
2308
+ value: androidLauncherEnabled,
2309
+ valueLabel: androidLauncherEnabled ? 'Ativo' : 'Inativo',
2310
+ onValueChange: nextValue => {
2311
+ setAndroidLauncherEnabled(nextValue);
2312
+ saveLauncherMode({androidLauncherEnabled: nextValue});
2313
+ },
2314
+ })}
2264
2315
  <Text style={[styles.deviceString, {color: brandColors.textSecondary}]}>
2265
2316
  Salva automaticamente
2266
2317
  </Text>
@@ -2280,33 +2331,33 @@ const DeviceDetailPage = () => {
2280
2331
  {label: 'Nenhum', value: ''},
2281
2332
  {label: 'Infinite Pay', value: 'infinite-pay'},
2282
2333
  {label: 'Cielo', value: 'cielo'},
2283
- ],
2284
- value: pdvGateway || '',
2285
- optionColors: {
2286
- buttonBackground: themeColors.buttonBackground,
2287
- buttonBorder: themeColors.buttonBorder,
2288
- buttonText: themeColors.buttonText,
2289
- buttonBackgroundSecondary: themeColors.buttonBackgroundSecondary,
2290
- buttonBorderSecondary: themeColors.buttonBorderSecondary,
2291
- buttonTextSecondary: themeColors.buttonTextSecondary,
2292
- },
2293
- onChange: value => {
2334
+ ],
2335
+ value: pdvGateway || '',
2336
+ optionColors: {
2337
+ buttonBackground: themeColors.buttonBackground,
2338
+ buttonBorder: themeColors.buttonBorder,
2339
+ buttonText: themeColors.buttonText,
2340
+ buttonBackgroundSecondary: themeColors.buttonBackgroundSecondary,
2341
+ buttonBorderSecondary: themeColors.buttonBorderSecondary,
2342
+ buttonTextSecondary: themeColors.buttonTextSecondary,
2343
+ },
2344
+ onChange: value => {
2294
2345
  const nextValue = String(value || '');
2295
2346
  setPdvGateway(nextValue);
2296
2347
  savePdvSettings({pdvGateway: nextValue});
2297
2348
  },
2298
2349
  })}
2299
2350
 
2300
- {renderSwitchRow({
2301
- disabled: savingPdvSettings,
2302
- label: 'Impressora',
2303
- value: pdvPrinterEnabled,
2304
- valueLabel: pdvPrinterEnabled ? 'Sim' : 'Nao',
2305
- onValueChange: nextValue => {
2306
- setPdvPrinterEnabled(nextValue);
2307
- savePdvSettings({pdvPrinterEnabled: nextValue});
2308
- },
2309
- })}
2351
+ {renderSwitchRow({
2352
+ disabled: savingPdvSettings,
2353
+ label: 'Impressora',
2354
+ value: pdvPrinterEnabled,
2355
+ valueLabel: pdvPrinterEnabled ? 'Sim' : 'Nao',
2356
+ onValueChange: nextValue => {
2357
+ setPdvPrinterEnabled(nextValue);
2358
+ savePdvSettings({pdvPrinterEnabled: nextValue});
2359
+ },
2360
+ })}
2310
2361
  <Text style={styles.deviceString}>Salva automaticamente</Text>
2311
2362
  </View>
2312
2363
  </View>
@@ -2337,18 +2388,18 @@ const DeviceDetailPage = () => {
2337
2388
  label: 'Todos da empresa',
2338
2389
  value: DEVICE_ORDER_VISIBILITY_COMPANY,
2339
2390
  },
2340
- ],
2341
- value: deviceOrderVisibility,
2342
- optionColors: {
2343
- buttonBackground: themeColors.buttonBackground,
2344
- buttonBorder: themeColors.buttonBorder,
2345
- buttonText: themeColors.buttonText,
2346
- buttonBackgroundSecondary: themeColors.buttonBackgroundSecondary,
2347
- buttonBorderSecondary: themeColors.buttonBorderSecondary,
2348
- buttonTextSecondary: themeColors.buttonTextSecondary,
2349
- },
2350
- onChange: value => {
2351
- const nextValue =
2391
+ ],
2392
+ value: deviceOrderVisibility,
2393
+ optionColors: {
2394
+ buttonBackground: themeColors.buttonBackground,
2395
+ buttonBorder: themeColors.buttonBorder,
2396
+ buttonText: themeColors.buttonText,
2397
+ buttonBackgroundSecondary: themeColors.buttonBackgroundSecondary,
2398
+ buttonBorderSecondary: themeColors.buttonBorderSecondary,
2399
+ buttonTextSecondary: themeColors.buttonTextSecondary,
2400
+ },
2401
+ onChange: value => {
2402
+ const nextValue =
2352
2403
  value || DEVICE_ORDER_VISIBILITY_DEVICE;
2353
2404
  setDeviceOrderVisibility(nextValue);
2354
2405
  saveDeviceOrderVisibility({deviceOrderVisibility: nextValue});
@@ -2368,19 +2419,19 @@ const DeviceDetailPage = () => {
2368
2419
  )}
2369
2420
  </View>
2370
2421
 
2371
- {renderSwitchRow({
2372
- disabled: savingDeviceDeliverySettings,
2373
- label: tt('label', 'deliveryEnabled') ||
2374
- 'Trabalhar com delivery',
2375
- value: deviceDeliveryEnabled,
2376
- valueLabel: deviceDeliveryEnabled ? 'Ativo' : 'Inativo',
2377
- onValueChange: nextValue => {
2378
- setDeviceDeliveryEnabled(nextValue);
2379
- saveDeviceDeliverySettings({
2380
- deviceDeliveryEnabled: nextValue,
2381
- });
2382
- },
2383
- })}
2422
+ {renderSwitchRow({
2423
+ disabled: savingDeviceDeliverySettings,
2424
+ label: tt('label', 'deliveryEnabled') ||
2425
+ 'Trabalhar com delivery',
2426
+ value: deviceDeliveryEnabled,
2427
+ valueLabel: deviceDeliveryEnabled ? 'Ativo' : 'Inativo',
2428
+ onValueChange: nextValue => {
2429
+ setDeviceDeliveryEnabled(nextValue);
2430
+ saveDeviceDeliverySettings({
2431
+ deviceDeliveryEnabled: nextValue,
2432
+ });
2433
+ },
2434
+ })}
2384
2435
  </View>
2385
2436
  </View>
2386
2437
  )}
@@ -2469,33 +2520,33 @@ const DeviceDetailPage = () => {
2469
2520
  </Picker>
2470
2521
  </View>
2471
2522
 
2472
- {renderSwitchRow({
2473
- disabled: savingDisplayPrintingConfig,
2474
- label: 'Pode trocar de impressora?',
2475
- value: displayAllowPrinterChange,
2476
- valueLabel: displayAllowPrinterChange ? 'Sim' : 'Nao',
2477
- onValueChange: nextValue => {
2478
- setDisplayAllowPrinterChange(nextValue);
2479
- saveDisplayPrintingConfig({
2480
- displayAllowPrinterChange: nextValue,
2481
- });
2482
- },
2483
- })}
2484
-
2485
- {renderSwitchRow({
2486
- disabled: savingDisplayPrintingConfig,
2487
- label: 'Imprimir produtos automaticamente',
2488
- value: displayAutoPrintProductEnabled,
2489
- valueLabel: displayAutoPrintProductEnabled
2490
- ? 'Ativo'
2491
- : 'Inativo',
2492
- onValueChange: nextValue => {
2493
- setDisplayAutoPrintProductEnabled(nextValue);
2494
- saveDisplayPrintingConfig({
2495
- displayAutoPrintProductEnabled: nextValue,
2496
- });
2497
- },
2498
- })}
2523
+ {renderSwitchRow({
2524
+ disabled: savingDisplayPrintingConfig,
2525
+ label: 'Pode trocar de impressora?',
2526
+ value: displayAllowPrinterChange,
2527
+ valueLabel: displayAllowPrinterChange ? 'Sim' : 'Nao',
2528
+ onValueChange: nextValue => {
2529
+ setDisplayAllowPrinterChange(nextValue);
2530
+ saveDisplayPrintingConfig({
2531
+ displayAllowPrinterChange: nextValue,
2532
+ });
2533
+ },
2534
+ })}
2535
+
2536
+ {renderSwitchRow({
2537
+ disabled: savingDisplayPrintingConfig,
2538
+ label: 'Imprimir produtos automaticamente',
2539
+ value: displayAutoPrintProductEnabled,
2540
+ valueLabel: displayAutoPrintProductEnabled
2541
+ ? 'Ativo'
2542
+ : 'Inativo',
2543
+ onValueChange: nextValue => {
2544
+ setDisplayAutoPrintProductEnabled(nextValue);
2545
+ saveDisplayPrintingConfig({
2546
+ displayAutoPrintProductEnabled: nextValue,
2547
+ });
2548
+ },
2549
+ })}
2499
2550
  </>
2500
2551
  )}
2501
2552
  </View>
@@ -2517,18 +2568,18 @@ const DeviceDetailPage = () => {
2517
2568
  )}
2518
2569
  </View>
2519
2570
 
2520
- {renderSwitchRow({
2521
- disabled: savingAlertSound,
2522
- label: 'Aviso sonoro habilitado',
2523
- value: deviceAlertSoundEnabled,
2524
- valueLabel: deviceAlertSoundEnabled ? 'Ativo' : 'Inativo',
2525
- onValueChange: nextValue => {
2526
- setDeviceAlertSoundEnabled(nextValue);
2527
- saveDeviceAlertSoundConfig({
2528
- deviceAlertSoundEnabled: nextValue,
2529
- });
2530
- },
2531
- })}
2571
+ {renderSwitchRow({
2572
+ disabled: savingAlertSound,
2573
+ label: 'Aviso sonoro habilitado',
2574
+ value: deviceAlertSoundEnabled,
2575
+ valueLabel: deviceAlertSoundEnabled ? 'Ativo' : 'Inativo',
2576
+ onValueChange: nextValue => {
2577
+ setDeviceAlertSoundEnabled(nextValue);
2578
+ saveDeviceAlertSoundConfig({
2579
+ deviceAlertSoundEnabled: nextValue,
2580
+ });
2581
+ },
2582
+ })}
2532
2583
 
2533
2584
  <View style={styles.textInputWrap}>
2534
2585
  <Text style={styles.textInputLabel}>URL do audio</Text>
@@ -2565,18 +2616,18 @@ const DeviceDetailPage = () => {
2565
2616
  )}
2566
2617
  </View>
2567
2618
 
2568
- {renderSwitchRow({
2569
- disabled: savingRuntimeDebugInfo,
2570
- label: 'Exibir debug detalhado',
2571
- value: deviceRuntimeDebugInfoEnabled,
2572
- valueLabel: deviceRuntimeDebugInfoEnabled ? 'Ativo' : 'Inativo',
2573
- onValueChange: nextValue => {
2574
- setDeviceRuntimeDebugInfoEnabled(nextValue);
2575
- saveDeviceRuntimeDebugInfo({
2576
- deviceRuntimeDebugInfoEnabled: nextValue,
2577
- });
2578
- },
2579
- })}
2619
+ {renderSwitchRow({
2620
+ disabled: savingRuntimeDebugInfo,
2621
+ label: 'Exibir debug detalhado',
2622
+ value: deviceRuntimeDebugInfoEnabled,
2623
+ valueLabel: deviceRuntimeDebugInfoEnabled ? 'Ativo' : 'Inativo',
2624
+ onValueChange: nextValue => {
2625
+ setDeviceRuntimeDebugInfoEnabled(nextValue);
2626
+ saveDeviceRuntimeDebugInfo({
2627
+ deviceRuntimeDebugInfoEnabled: nextValue,
2628
+ });
2629
+ },
2630
+ })}
2580
2631
  </View>
2581
2632
  </View>
2582
2633
  )}
@@ -2641,27 +2692,27 @@ const DeviceDetailPage = () => {
2641
2692
  )}
2642
2693
  </View>
2643
2694
 
2644
- <TouchableOpacity
2645
- style={[
2646
- styles.configButton,
2647
- {
2648
- backgroundColor: themeColors.buttonBackground,
2649
- borderColor: themeColors.buttonBackground,
2650
- },
2651
- sendingCatalogRefresh && {opacity: 0.6},
2652
- ]}
2653
- activeOpacity={0.85}
2654
- disabled={sendingCatalogRefresh}
2655
- onPress={sendCatalogRefreshCommand}>
2656
- <Icon name="trash-2" size={16} color={themeColors.buttonIcon} />
2657
- <Text
2658
- style={[
2659
- styles.configButtonText,
2660
- {color: themeColors.buttonText},
2661
- ]}>
2662
- {sendingCatalogRefresh ? 'Limpando cache...' : 'Limpar cache de produtos'}
2663
- </Text>
2664
- </TouchableOpacity>
2695
+ <TouchableOpacity
2696
+ style={[
2697
+ styles.configButton,
2698
+ {
2699
+ backgroundColor: themeColors.buttonBackground,
2700
+ borderColor: themeColors.buttonBackground,
2701
+ },
2702
+ sendingCatalogRefresh && {opacity: 0.6},
2703
+ ]}
2704
+ activeOpacity={0.85}
2705
+ disabled={sendingCatalogRefresh}
2706
+ onPress={sendCatalogRefreshCommand}>
2707
+ <Icon name="trash-2" size={16} color={themeColors.buttonIcon} />
2708
+ <Text
2709
+ style={[
2710
+ styles.configButtonText,
2711
+ {color: themeColors.buttonText},
2712
+ ]}>
2713
+ {sendingCatalogRefresh ? 'Limpando cache...' : 'Limpar cache de produtos'}
2714
+ </Text>
2715
+ </TouchableOpacity>
2665
2716
  </View>
2666
2717
  </View>
2667
2718
  )}