@controleonline/ui-common 1.2.70 → 1.2.75

package/src/react/pages/IFoodIntegrationPage/utils.js

@@ -0,0 +1,91 @@
+// Filtros de catálogo exibidos na aba de produtos.
+export const filterTabs = [
+  { key: 'all', label: 'Todos' },
+  { key: 'eligible', label: 'Elegiveis' },
+  { key: 'selected', label: 'Selecionados' },
+  { key: 'blocked', label: 'Com bloqueio' },
+];
+
+// Ordem e rótulos fixos usados na edição dos horários de funcionamento.
+export const DAY_LABELS = {
+  MONDAY: 'Segunda',
+  TUESDAY: 'Terça',
+  WEDNESDAY: 'Quarta',
+  THURSDAY: 'Quinta',
+  FRIDAY: 'Sexta',
+  SATURDAY: 'Sábado',
+  SUNDAY: 'Domingo',
+};
+
+export const DAY_ORDER = ['MONDAY', 'TUESDAY', 'WEDNESDAY', 'THURSDAY', 'FRIDAY', 'SATURDAY', 'SUNDAY'];
+
+export const formatIFoodApiError = error => {
+  if (!error) return 'Nao foi possivel carregar os dados da integracao iFood.';
+  if (typeof error === 'string') return error;
+  return error?.message || error?.description || error?.errmsg || 'Nao foi possivel carregar os dados da integracao iFood.';
+};
+
+export const calcEndTime = (start, durationMin) => {
+  if (!start || durationMin == null || durationMin === '') return '--:--';
+  const [hours, minutes] = start.split(':').map(Number);
+  const totalMinutes = hours * 60 + minutes + Number(durationMin);
+  const endHours = Math.floor(totalMinutes / 60) % 24;
+  const endMinutes = totalMinutes % 60;
+  return `${String(endHours).padStart(2, '0')}:${String(endMinutes).padStart(2, '0')}`;
+};
+
+export const calcDuration = (start, end) => {
+  const [startHours, startMinutes] = (start || '00:00').split(':').map(Number);
+  const [endHours, endMinutes] = (end || '23:59').split(':').map(Number);
+  let duration = endHours * 60 + endMinutes - (startHours * 60 + startMinutes);
+  if (duration <= 0) duration += 1440;
+  return duration;
+};
+
+export const formatDateTimeLabel = value => {
+  if (!value) return '--';
+  const parsed = new Date(value);
+  if (Number.isNaN(parsed.getTime())) return String(value);
+
+  return parsed.toLocaleString('pt-BR', {
+    day: '2-digit',
+    month: '2-digit',
+    year: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+};
+
+const pad = value => String(value).padStart(2, '0');
+
+export const toDateTimeLocalValue = value => {
+  const parsed = value ? new Date(value) : new Date();
+  const date = Number.isNaN(parsed.getTime()) ? new Date() : parsed;
+
+  return [
+    date.getFullYear(),
+    pad(date.getMonth() + 1),
+    pad(date.getDate()),
+  ].join('-') + `T${pad(date.getHours())}:${pad(date.getMinutes())}`;
+};
+
+export const buildDefaultInterruptionDraft = () => {
+  const start = new Date();
+  start.setMinutes(start.getMinutes() + 5);
+  const end = new Date(start.getTime() + (60 * 60 * 1000));
+
+  return {
+    description: 'Pausa operacional',
+    start: toDateTimeLocalValue(start),
+    end: toDateTimeLocalValue(end),
+  };
+};
+
+export const toIFoodInterruptionDateTime = value => {
+  const normalized = String(value || '').trim();
+  if (!normalized) return '';
+  if (/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}$/.test(normalized)) {
+    return `${normalized}:00`;
+  }
+  return normalized;
+};

package/src/react/pages/IFoodIntegrationPage.js

@@ -0,0 +1 @@
+export { default } from './IFoodIntegrationPage/index';

package/src/react/pages/IFoodIntegrationPage.styles.js

@@ -0,0 +1 @@
+export { default } from './IFoodIntegrationPage/styles';

package/src/react/pages/Imports.js

@@ -28,12 +28,31 @@ const formatDate = (dateString) => {
     const d = new Date(dateString);
     return d.toLocaleString(); // Formato local legível
 };
-
-const Imports = ({ context = {}, onClose }) => {
-    const peopleStore = useStore('people');
-    const { getters: peopleGetters } = peopleStore.getters;
-    const { currentCompany } = peopleGetters;
-
+
+const Imports = ({ context = {}, onClose }) => {
+    const peopleStore = useStore('people');
+    const themeStore = useStore('theme');
+    const { getters: peopleGetters } = peopleStore.getters;
+    const { currentCompany } = peopleGetters;
+    const themeColors = themeStore?.getters?.colors || {};
+    const buttonPalette = useMemo(
+        () => ({
+            buttonBackground: themeColors.buttonBackground,
+            buttonBorder: themeColors.buttonBorder,
+            buttonText: themeColors.buttonText,
+            buttonIcon: themeColors.buttonIcon || themeColors.buttonText,
+            modalCloseIcon: themeColors.modalCloseIcon || themeColors.iconColor,
+        }),
+        [
+            themeColors.buttonBackground,
+            themeColors.buttonBorder,
+            themeColors.buttonIcon,
+            themeColors.buttonText,
+            themeColors.iconColor,
+            themeColors.modalCloseIcon,
+        ],
+    );
+
     const importType = context.context;
     const title = context.title;
     const searchPlaceholder = context.searchPlaceholder;
@@ -45,25 +64,25 @@ const Imports = ({ context = {}, onClose }) => {
         noStatusLabel,
         processingHelpLabel,
     } = resolveImportLabels(global.t?.t);
-
-    const navigation = useNavigation();
-
-    const importsStore = useStore('imports');
-    const getters = importsStore.getters;
-    const actions = importsStore.actions;
-
+
+    const navigation = useNavigation();
+
+    const importsStore = useStore('imports');
+    const getters = importsStore.getters;
+    const actions = importsStore.actions;
+
     const { items, isLoading } = getters;
 
     const [currentPage, setCurrentPage] = useState(1);
 
     const [searchText, setSearchText] = useState('');
     const [searchQuery, setSearchQuery] = useState('');
-
-    const [allImports, setAllImports] = useState([]);
-
-    const [refreshing, setRefreshing] = useState(false);
-    const [showAddImportModal, setShowAddImportModal] = useState(false);
-
+
+    const [allImports, setAllImports] = useState([]);
+
+    const [refreshing, setRefreshing] = useState(false);
+    const [showAddImportModal, setShowAddImportModal] = useState(false);
+
     const fetchImports = useCallback(
         (query, page) => {
             const params = {
@@ -71,43 +90,43 @@ const Imports = ({ context = {}, onClose }) => {
                 importType: importType,
                 page: page ?? currentPage,
             };
-
-            if (String(query ?? searchQuery).trim()) {
-                params.name = String(query ?? searchQuery).trim();
-            }
-
+
+            if (String(query ?? searchQuery).trim()) {
+                params.name = String(query ?? searchQuery).trim();
+            }
+
             return actions.getItems(params);
         },
         [actions, currentCompany, currentPage, searchQuery, importType],
     );
-
-    useLayoutEffect(() => {
-        navigation.setOptions({
-            headerTitle: title,
-        });
-    }, [navigation, title]);
-
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            headerTitle: title,
+        });
+    }, [navigation, title]);
+
     useFocusEffect(
         useCallback(() => {
             fetchImports(searchQuery, currentPage);
         }, [currentPage, fetchImports, searchQuery]),
     );
-
-    useEffect(() => {
-        if (isLoading) return;
-        if (items && Array.isArray(items)) {
-            if (currentPage === 1) {
-                setAllImports(items);
-            } else {
-                setAllImports((prev) => {
-                    const newIds = new Set(items.map((i) => i.id));
-                    const filteredPrev = prev.filter((p) => !newIds.has(p.id));
-                    return [...filteredPrev, ...items];
-                });
-            }
-        }
-    }, [items, currentPage, isLoading]);
-
+
+    useEffect(() => {
+        if (isLoading) return;
+        if (items && Array.isArray(items)) {
+            if (currentPage === 1) {
+                setAllImports(items);
+            } else {
+                setAllImports((prev) => {
+                    const newIds = new Set(items.map((i) => i.id));
+                    const filteredPrev = prev.filter((p) => !newIds.has(p.id));
+                    return [...filteredPrev, ...items];
+                });
+            }
+        }
+    }, [items, currentPage, isLoading]);
+
     useEffect(() => {
         const t = setTimeout(() => {
             setSearchQuery(searchText.trim());
@@ -167,21 +186,21 @@ const Imports = ({ context = {}, onClose }) => {
                     <Text style={styles.avatarText}>
                         {item.name?.charAt(0)?.toUpperCase() || 'I'}
                     </Text>
-                </View>
-
-                <Text style={styles.title} numberOfLines={1}>
-                    {item.name} (ID: {item.id})
-                </Text>
-
-                <Icon name="chevron-right" size={14} color="#CBD5E1" />
-            </View>
-
-            <View style={styles.cardBody}>
-                <View style={styles.infoRow}>
-                    <Icon name="file-text-o" size={16} color={colors.primary} />
-                    <Text style={styles.infoText}>{item.fileFormat?.toUpperCase()}</Text>
-                </View>
-
+                </View>
+
+                <Text style={styles.title} numberOfLines={1}>
+                    {item.name} (ID: {item.id})
+                </Text>
+
+                <Icon name="chevron-right" size={14} color="#CBD5E1" />
+            </View>
+
+            <View style={styles.cardBody}>
+                <View style={styles.infoRow}>
+                    <Icon name="file-text-o" size={16} color={colors.primary} />
+                    <Text style={styles.infoText}>{item.fileFormat?.toUpperCase()}</Text>
+                </View>
+
                 <View style={styles.infoRow}>
                     <Icon name="calendar" size={16} color={colors.primary} />
                     <Text style={styles.infoText}>{formatDate(item.uploadDate)}</Text>
@@ -226,74 +245,96 @@ const Imports = ({ context = {}, onClose }) => {
         </TouchableOpacity>
         );
     };
-
-    const downloadTemplate = async () => {
-        try {
-            const response = await api.fetch(`/imports/example/${importType}`, {
-                method: 'GET',
-                responseType: 'text',
-            });
-
-            const csvText = typeof response === 'string' ? response : await response.text?.();
-            console.log('CSV recebido:', csvText.slice(0, 200));
-
-            if (!csvText) throw new Error('CSV vazio');
-
-            // mobile: verifica se o diretório está disponível
-            const dirUri = Directory?.cacheDocumentDirectory || Directory?.documentDirectory;
-
-            if (dirUri) {
-                const fileUri = `${dirUri}modelo_${importType}.csv`;
-
-                const file = new File(fileUri, { contents: csvText });
-                await file.create();
-
-                if (await Sharing.isAvailableAsync()) {
-                    await Sharing.shareAsync(fileUri);
-                }
-
-                console.log(`Arquivo CSV criado em: ${fileUri}`);
-                return fileUri;
-            } else if (typeof window !== 'undefined') {
-                // fallback web
-                const blob = new Blob([csvText], { type: 'text/csv' });
-                const link = document.createElement('a');
-                link.href = URL.createObjectURL(blob);
-                link.download = `modelo_${importType}.csv`;
-                link.click();
-                URL.revokeObjectURL(link.href);
-                console.log('Download CSV disparado no web');
-                return 'web-download';
-            } else {
-                throw new Error('FileSystem não disponível');
-            }
-        } catch (err) {
-            console.error('Erro detalhado ao baixar CSV:', err);
-            throw new Error('Falha ao baixar o modelo CSV');
-        }
-    };
-
-    return (
-        <View style={styles.container}>
-
+
+    const downloadTemplate = async () => {
+        try {
+            const response = await api.fetch(`/imports/example/${importType}`, {
+                method: 'GET',
+                responseType: 'text',
+            });
+
+            const csvText = typeof response === 'string' ? response : await response.text?.();
+            console.log('CSV recebido:', csvText.slice(0, 200));
+
+            if (!csvText) throw new Error('CSV vazio');
+
+            // mobile: verifica se o diretório está disponível
+            const dirUri = Directory?.cacheDocumentDirectory || Directory?.documentDirectory;
+
+            if (dirUri) {
+                const fileUri = `${dirUri}modelo_${importType}.csv`;
+
+                const file = new File(fileUri, { contents: csvText });
+                await file.create();
+
+                if (await Sharing.isAvailableAsync()) {
+                    await Sharing.shareAsync(fileUri);
+                }
+
+                console.log(`Arquivo CSV criado em: ${fileUri}`);
+                return fileUri;
+            } else if (typeof window !== 'undefined') {
+                // fallback web
+                const blob = new Blob([csvText], { type: 'text/csv' });
+                const link = document.createElement('a');
+                link.href = URL.createObjectURL(blob);
+                link.download = `modelo_${importType}.csv`;
+                link.click();
+                URL.revokeObjectURL(link.href);
+                console.log('Download CSV disparado no web');
+                return 'web-download';
+            } else {
+                throw new Error('FileSystem não disponível');
+            }
+        } catch (err) {
+            console.error('Erro detalhado ao baixar CSV:', err);
+            throw new Error('Falha ao baixar o modelo CSV');
+        }
+    };
+
+    return (
+        <View style={styles.container}>
+
             <View style={styles.headerBar}>
                 <Text style={styles.headerTitle}>{title}</Text>
                 <TouchableOpacity onPress={onClose}>
-                    <Icon name="close" size={24} color="#000" />
+                    <Icon name="close" size={24} color={buttonPalette.modalCloseIcon} />
                 </TouchableOpacity>
-            </View>
-
-            <View style={styles.subHeader}>
+            </View>
+
+            <View style={styles.subHeader}>
                 <View style={styles.topRow}>
                     <View style={styles.topRowActions}>
                         <TouchableOpacity style={styles.downloadButton} onPress={downloadTemplate}>
-                            <IconAdd name="download" size={20} color="#fff" />
-                            <Text style={styles.downloadText}>Baixar Modelo</Text>
+                            <View
+                                style={{
+                                    flexDirection: 'row',
+                                    alignItems: 'center',
+                                    backgroundColor: buttonPalette.buttonBackground,
+                                    borderColor: buttonPalette.buttonBorder,
+                                    borderWidth: 1,
+                                    borderRadius: 8,
+                                    paddingHorizontal: 12,
+                                    paddingVertical: 6,
+                                }}
+                            >
+                                <IconAdd name="download" size={20} color={buttonPalette.buttonIcon} />
+                                <Text style={[styles.downloadText, { color: buttonPalette.buttonText }]}>Baixar Modelo</Text>
+                            </View>
                         </TouchableOpacity>
 
-                        <TouchableOpacity style={styles.refreshButton} onPress={onRefresh}>
-                            <Icon name="refresh" size={16} color={colors.primary} />
-                            <Text style={styles.refreshButtonText}>{refreshLabel}</Text>
+                        <TouchableOpacity
+                            style={[
+                                styles.refreshButton,
+                                {
+                                    backgroundColor: buttonPalette.buttonBackground,
+                                    borderColor: buttonPalette.buttonBorder,
+                                },
+                            ]}
+                            onPress={onRefresh}
+                        >
+                            <Icon name="refresh" size={16} color={buttonPalette.buttonIcon} />
+                            <Text style={[styles.refreshButtonText, { color: buttonPalette.buttonText }]}>{refreshLabel}</Text>
                         </TouchableOpacity>
                     </View>
 
@@ -304,50 +345,57 @@ const Imports = ({ context = {}, onClose }) => {
                         </View>
                     ) : null}
                 </View>
-
-                <View style={styles.searchRow}>
-                    <View style={styles.searchInputContainer}>
-                        <Icon name="search" size={16} color="#94A3B8" />
-
-                        <TextInput
-                            style={styles.searchInput}
-                            placeholder={searchPlaceholder}
-                            placeholderTextColor="#94A3B8"
-                            value={searchText}
-                            onChangeText={setSearchText}
-                        />
-
-                        {searchText.length > 0 && (
-                            <TouchableOpacity
-                                onPress={() => setSearchText('')}
-                                style={styles.clearSearchButton}
-                            >
-                                <Icon name="times-circle" size={16} color="#94A3B8" />
-                            </TouchableOpacity>
-                        )}
-                    </View>
-
-                    <TouchableOpacity
-                        style={styles.addButton}
-                        onPress={() => setShowAddImportModal(true)}
-                    >
-                        <IconAdd name="upload-file" size={24} color="#FFFFFF" />
-                    </TouchableOpacity>
-                </View>
-            </View>
-
-            <FlatList
-                data={allImports}
-                keyExtractor={(item) => String(item.id)}
-                renderItem={renderImportCard}
-                contentContainerStyle={styles.scrollContent}
-                refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}
-            />
-
-            <AddImportModal
-                visible={showAddImportModal}
-                onClose={() => setShowAddImportModal(false)}
-                context={context}
+
+                <View style={styles.searchRow}>
+                    <View style={styles.searchInputContainer}>
+                        <Icon name="search" size={16} color="#94A3B8" />
+
+                        <TextInput
+                            style={styles.searchInput}
+                            placeholder={searchPlaceholder}
+                            placeholderTextColor="#94A3B8"
+                            value={searchText}
+                            onChangeText={setSearchText}
+                        />
+
+                        {searchText.length > 0 && (
+                            <TouchableOpacity
+                                onPress={() => setSearchText('')}
+                                style={styles.clearSearchButton}
+                            >
+                                <Icon name="times-circle" size={16} color="#94A3B8" />
+                            </TouchableOpacity>
+                        )}
+                    </View>
+
+                    <TouchableOpacity
+                        style={[
+                            styles.addButton,
+                            {
+                                backgroundColor: buttonPalette.buttonBackground,
+                                borderColor: buttonPalette.buttonBorder,
+                                borderWidth: 1,
+                            },
+                        ]}
+                        onPress={() => setShowAddImportModal(true)}
+                    >
+                        <IconAdd name="upload-file" size={24} color={buttonPalette.buttonIcon} />
+                    </TouchableOpacity>
+                </View>
+            </View>
+
+            <FlatList
+                data={allImports}
+                keyExtractor={(item) => String(item.id)}
+                renderItem={renderImportCard}
+                contentContainerStyle={styles.scrollContent}
+                refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}
+            />
+
+            <AddImportModal
+                visible={showAddImportModal}
+                onClose={() => setShowAddImportModal(false)}
+                context={context}
                 onSuccess={() => {
                     setCurrentPage(1);
                     fetchImports(searchQuery, 1);
@@ -356,6 +404,6 @@ const Imports = ({ context = {}, onClose }) => {
         </View>
     );
 };
-
+
 export default Imports;
 // TODO(store-first): quando este arquivo for mexido, mover a leitura para stores, remover api.fetch e evitar repassar dados em objetos quando o store ja resolver isso.