@controleonline/ui-common 1.2.79 → 1.2.81

package/src/react/components/ConfirmModal.styles.js

@@ -1,43 +1,57 @@
-import { StyleSheet } from 'react-native';
+import {StyleSheet} from 'react-native';
 
-const styles = StyleSheet.create({
-  overlay: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: 'rgba(0,0,0,0.5)',
-  },
-  card: {
-    backgroundColor: '#fff',
-    padding: 20,
-    borderRadius: 10,
-    width: '80%',
-  },
-  title: {
-    fontSize: 18,
-    fontWeight: 'bold',
-    marginBottom: 10,
-  },
-  message: {
-    fontSize: 14,
-    marginBottom: 20,
-  },
-  actions: {
-    flexDirection: 'row',
-    justifyContent: 'flex-end',
-    gap: 10,
-  },
-  cancelButton: {
-    padding: 10,
-  },
-  confirmButton: {
-    padding: 10,
-    backgroundColor: '#007AFF',
-    borderRadius: 5,
-  },
-  confirmButtonText: {
-    color: '#fff',
-  },
-});
+/**
+ * Theme-aware styles for ConfirmModal.
+ * Colors must come from themeStore.getters.colors (canonical tokens only).
+ */
+const createStyles = palette =>
+  StyleSheet.create({
+    overlay: {
+      flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center',
+      backgroundColor: palette.modalOverlay,
+    },
+    card: {
+      backgroundColor: palette.modalBackground,
+      padding: 20,
+      borderRadius: 10,
+      width: '80%',
+      borderWidth: StyleSheet.hairlineWidth,
+      borderColor: palette.modalBorder,
+    },
+    title: {
+      fontSize: 18,
+      fontWeight: 'bold',
+      marginBottom: 10,
+      color: palette.modalHeaderText,
+    },
+    message: {
+      fontSize: 14,
+      marginBottom: 20,
+      color: palette.modalText,
+    },
+    actions: {
+      flexDirection: 'row',
+      justifyContent: 'flex-end',
+      gap: 10,
+    },
+    cancelButton: {
+      padding: 10,
+    },
+    cancelButtonText: {
+      color: palette.buttonTextSecondary,
+    },
+    confirmButton: {
+      padding: 10,
+      backgroundColor: palette.buttonBackground,
+      borderRadius: 5,
+      borderWidth: StyleSheet.hairlineWidth,
+      borderColor: palette.buttonBorder,
+    },
+    confirmButtonText: {
+      color: palette.buttonText,
+    },
+  });
 
-export default styles;
+export default createStyles;

package/src/react/components/CopyDeviceConfigModal.js

@@ -0,0 +1,193 @@
+import React, {useMemo, useState} from 'react';
+import {
+  ActivityIndicator,
+  Modal,
+  ScrollView,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import Icon from 'react-native-vector-icons/Feather';
+import {
+  buildSourceDeviceOptions,
+  listCopyableConfigKeys,
+} from '@controleonline/ui-common/src/react/utils/copyDeviceConfigs';
+import styles from './CopyDeviceConfigModal.styles';
+
+const tt = (type, key) => global.t?.t('configs', type, key);
+
+export default function CopyDeviceConfigModal({
+  visible,
+  onClose,
+  onConfirm,
+  companyDeviceConfigs = [],
+  companyId,
+  destinationDeviceString,
+  destinationAlias,
+  loading = false,
+  confirming = false,
+}) {
+  const [selectedDeviceString, setSelectedDeviceString] = useState(null);
+
+  const options = useMemo(
+    () =>
+      buildSourceDeviceOptions({
+        companyDeviceConfigs,
+        companyId,
+        destinationDeviceString,
+      }),
+    [companyDeviceConfigs, companyId, destinationDeviceString],
+  );
+
+  const selected = useMemo(
+    () => options.find(o => o.deviceString === selectedDeviceString) || null,
+    [options, selectedDeviceString],
+  );
+
+  const selectedKeys = useMemo(() => {
+    if (!selected) {
+      return [];
+    }
+    const keys = new Set();
+    selected.configs.forEach(row => {
+      listCopyableConfigKeys(row?.configs).forEach(k => keys.add(k));
+    });
+    return Array.from(keys).sort();
+  }, [selected]);
+
+  const selectedTypes = useMemo(() => {
+    if (!selected) {
+      return [];
+    }
+    return Array.from(
+      new Set(
+        selected.configs
+          .map(row => String(row?.type || '').trim().toUpperCase())
+          .filter(Boolean),
+      ),
+    ).sort();
+  }, [selected]);
+
+  const handleClose = () => {
+    if (confirming) {
+      return;
+    }
+    setSelectedDeviceString(null);
+    onClose?.();
+  };
+
+  const handleConfirm = () => {
+    if (!selected || confirming) {
+      return;
+    }
+    onConfirm?.(selected);
+  };
+
+  return (
+    <Modal visible={visible} transparent animationType="fade" onRequestClose={handleClose}>
+      <View style={styles.overlay}>
+        <View style={styles.card} testID="copy-device-config-modal">
+          <View style={styles.header}>
+            <Text style={styles.title}>
+              {tt('device_action', 'copyConfigTitle') || 'Copiar configurações'}
+            </Text>
+            <TouchableOpacity
+              onPress={handleClose}
+              disabled={confirming}
+              accessibilityLabel="Fechar">
+              <Icon name="x" size={20} color="#64748B" />
+            </TouchableOpacity>
+          </View>
+
+          <Text style={styles.message} testID="copy-device-config-hint">
+            {tt('device_action', 'copyConfigHint') ||
+              `Escolha o device origem. As configurações serão aplicadas em "${
+                destinationAlias || destinationDeviceString || 'destino'
+              }" (identidade do destino não muda).`}
+          </Text>
+
+          {loading ? (
+            <ActivityIndicator style={styles.loader} color="#0EA5E9" />
+          ) : options.length === 0 ? (
+            <Text style={styles.empty}>
+              {tt('device_action', 'copyConfigEmpty') ||
+                'Nenhum outro device na empresa para copiar.'}
+            </Text>
+          ) : (
+            <ScrollView style={styles.list} keyboardShouldPersistTaps="handled">
+              {options.map(option => {
+                const isSelected = option.deviceString === selectedDeviceString;
+                return (
+                  <TouchableOpacity
+                    key={option.deviceString}
+                    style={[styles.option, isSelected && styles.optionSelected]}
+                    onPress={() => setSelectedDeviceString(option.deviceString)}
+                    disabled={confirming}
+                    activeOpacity={0.8}
+                    testID={`copy-device-config-option-${option.deviceString}`}>
+                    <View style={styles.optionTextBlock}>
+                      <Text style={styles.optionAlias} numberOfLines={1}>
+                        {option.alias}
+                      </Text>
+                      <Text style={styles.optionMeta} numberOfLines={1}>
+                        {option.deviceString}
+                      </Text>
+                    </View>
+                    {isSelected ? (
+                      <Icon name="check-circle" size={18} color="#0EA5E9" />
+                    ) : (
+                      <Icon name="circle" size={18} color="#CBD5E1" />
+                    )}
+                  </TouchableOpacity>
+                );
+              })}
+            </ScrollView>
+          )}
+
+          {selected ? (
+            <View style={styles.preview} testID="copy-device-config-preview">
+              <Text style={styles.previewTitle}>
+                {tt('device_action', 'copyConfigPreview') ||
+                  'Será sobrescrito no destino:'}
+              </Text>
+              <Text style={styles.previewLine}>
+                Tipos: {selectedTypes.join(', ') || '—'}
+              </Text>
+              <Text style={styles.previewLine} numberOfLines={4}>
+                Chaves: {selectedKeys.length ? selectedKeys.join(', ') : '(vazio)'}
+              </Text>
+            </View>
+          ) : null}
+
+          <View style={styles.actions}>
+            <TouchableOpacity
+              onPress={handleClose}
+              style={styles.cancelButton}
+              disabled={confirming}>
+              <Text style={styles.cancelText}>
+                {tt('device_action', 'cancel') || 'Cancelar'}
+              </Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              onPress={handleConfirm}
+              style={[
+                styles.confirmButton,
+                (!selected || confirming) && styles.confirmDisabled,
+              ]}
+              disabled={!selected || confirming}
+              testID="copy-device-config-confirm">
+              {confirming ? (
+                <ActivityIndicator color="#fff" size="small" />
+              ) : (
+                <Text style={styles.confirmText}>
+                  {tt('device_action', 'copyConfigConfirm') ||
+                    'Copiar e sobrescrever'}
+                </Text>
+              )}
+            </TouchableOpacity>
+          </View>
+        </View>
+      </View>
+    </Modal>
+  );
+}

package/src/react/components/CopyDeviceConfigModal.styles.js

@@ -0,0 +1,123 @@
+import {StyleSheet} from 'react-native';
+
+export default StyleSheet.create({
+  overlay: {
+    flex: 1,
+    backgroundColor: 'rgba(15, 23, 42, 0.45)',
+    justifyContent: 'center',
+    padding: 20,
+  },
+  card: {
+    backgroundColor: '#fff',
+    borderRadius: 12,
+    maxHeight: '90%',
+    padding: 16,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: 8,
+  },
+  title: {
+    fontSize: 17,
+    fontWeight: '600',
+    color: '#0F172A',
+    flex: 1,
+    marginRight: 8,
+  },
+  message: {
+    fontSize: 13,
+    color: '#475569',
+    marginBottom: 12,
+    lineHeight: 18,
+  },
+  loader: {
+    marginVertical: 24,
+  },
+  empty: {
+    fontSize: 13,
+    color: '#94A3B8',
+    textAlign: 'center',
+    marginVertical: 16,
+  },
+  list: {
+    maxHeight: 220,
+    marginBottom: 8,
+  },
+  option: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 10,
+    paddingHorizontal: 10,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: '#E2E8F0',
+    marginBottom: 8,
+  },
+  optionSelected: {
+    borderColor: '#0EA5E9',
+    backgroundColor: '#F0F9FF',
+  },
+  optionTextBlock: {
+    flex: 1,
+    marginRight: 8,
+  },
+  optionAlias: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: '#0F172A',
+  },
+  optionMeta: {
+    fontSize: 11,
+    color: '#94A3B8',
+    marginTop: 2,
+  },
+  preview: {
+    backgroundColor: '#F8FAFC',
+    borderRadius: 8,
+    padding: 10,
+    marginBottom: 12,
+  },
+  previewTitle: {
+    fontSize: 12,
+    fontWeight: '600',
+    color: '#334155',
+    marginBottom: 4,
+  },
+  previewLine: {
+    fontSize: 11,
+    color: '#64748B',
+    lineHeight: 16,
+  },
+  actions: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    gap: 8,
+  },
+  cancelButton: {
+    paddingVertical: 10,
+    paddingHorizontal: 14,
+    borderRadius: 8,
+  },
+  cancelText: {
+    color: '#64748B',
+    fontSize: 14,
+  },
+  confirmButton: {
+    backgroundColor: '#0EA5E9',
+    paddingVertical: 10,
+    paddingHorizontal: 14,
+    borderRadius: 8,
+    minWidth: 140,
+    alignItems: 'center',
+  },
+  confirmDisabled: {
+    opacity: 0.5,
+  },
+  confirmText: {
+    color: '#fff',
+    fontSize: 14,
+    fontWeight: '600',
+  },
+});

package/src/react/components/DefaultProvider.native.js

@@ -103,6 +103,20 @@ const resolveDeviceConfigPeopleIri = ({appType, currentCompany, user}) => {
 
   return '';
 };
+const isTenantAdministrativeAuthority = company => {
+  const userFlags = company?.user || {};
+  return !!(
+    userFlags.owner_enabled ||
+    userFlags.director_enabled ||
+    userFlags.manager_enabled ||
+    userFlags.admin_enabled ||
+    company?.owner_enabled ||
+    company?.director_enabled ||
+    company?.manager_enabled
+  );
+};
+
+
 
 export const DefaultProvider = ({
   children,
@@ -607,6 +621,13 @@ export const DefaultProvider = ({
       return;
     }
 
+    // Non-admin users cannot mutate device context/financial policy (API 403).
+    // Skip bootstrap write; keep local runtime configs in memory only.
+    if (!isTenantAdministrativeAuthority(currentCompany)) {
+      setDeviceRuntimeConfigSynced(true);
+      return;
+    }
+
       deviceConfigsActions
         .addDeviceConfigs({
           device: device.id,
@@ -627,6 +648,7 @@ export const DefaultProvider = ({
     deviceConfigFetched,
     deviceConfigPeopleIri,
     deviceRuntimeConfigSynced,
+    currentCompany,
     deviceConfigsActions,
     device_config?.configs,
     isLogged,

package/src/react/components/DefaultProvider.web.js

@@ -15,6 +15,7 @@ import PrintService from '@controleonline/ui-common/src/react/components/PrintSe
 import RemoteCheckoutService from '@controleonline/ui-common/src/react/components/RemoteCheckoutService';
 import ProductCatalogCacheService from '@controleonline/ui-common/src/react/components/ProductCatalogCacheService';
 import RuntimeInfoFooter from '@controleonline/ui-common/src/react/components/RuntimeInfoFooter';
+import {shouldShowRuntimeFooter} from '@controleonline/ui-common/src/react/utils/runtimeFooter';
 import { useStore } from '@store';
 import { api } from '@controleonline/ui-common/src/api';
 import {app_type} from '@appType';
@@ -100,6 +101,20 @@ const resolveDeviceConfigPeopleIri = ({appType, currentCompany, user}) => {
 
   return '';
 };
+const isTenantAdministrativeAuthority = company => {
+  const userFlags = company?.user || {};
+  return !!(
+    userFlags.owner_enabled ||
+    userFlags.director_enabled ||
+    userFlags.manager_enabled ||
+    userFlags.admin_enabled ||
+    company?.owner_enabled ||
+    company?.director_enabled ||
+    company?.manager_enabled
+  );
+};
+
+
 
 const normalizeRuntimeIp = value => String(value || '').trim();
 
@@ -234,6 +249,7 @@ export const DefaultProvider = ({
     user,
   });
   const isPublicRouteActive = isPublicRoute(currentRouteName);
+  const showRuntimeFooter = shouldShowRuntimeFooter(currentRouteName);
   const currentTranslationConfig = JSON.parse(
     localStorage.getItem('config') || '{}',
   );
@@ -716,6 +732,13 @@ export const DefaultProvider = ({
       return;
     }
 
+    // Non-admin users cannot mutate device context/financial policy (API 403).
+    // Skip bootstrap write; keep local runtime configs in memory only.
+    if (!isTenantAdministrativeAuthority(currentCompany)) {
+      setDeviceRuntimeConfigSynced(true);
+      return;
+    }
+
     deviceConfigsActions
       .addDeviceConfigs({
         device: device.id,
@@ -735,6 +758,7 @@ export const DefaultProvider = ({
     deviceConfigFetched,
     deviceConfigPeopleIri,
     deviceRuntimeConfigSynced,
+    currentCompany,
     deviceConfigsActions,
     device_config?.configs,
     isLogged,
@@ -959,7 +983,7 @@ export const DefaultProvider = ({
             },
           ]}>
           <View style={[providerStyles.content, runtimeUiScaleStyle]}>{children}</View>
-              {!isShopClientApp && bottomNavigationCount === 0 && (
+              {!isShopClientApp && showRuntimeFooter && bottomNavigationCount === 0 && (
                 <RuntimeInfoFooter
                   appVersion={appVersion}
                   defaultCompany={defaultCompany}