@controleonline/ui-common 1.2.70 → 1.2.75

package/src/react/pages/Food99IntegrationPage/components/Food99CatalogTab.js

@@ -0,0 +1,219 @@
+import React from 'react';
+import {
+  ActivityIndicator,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import Icon from 'react-native-vector-icons/Feather';
+import { colors } from '@controleonline/../../src/styles/colors';
+
+import {withOpacity} from '@controleonline/../../src/styles/branding';
+import CompactFilterSelector from '@controleonline/ui-default/src/react/components/filters/CompactFilterSelector';
+
+import {
+  normalizeMarketplaceCatalogProduct,
+  normalizeMarketplaceCatalogTabProps,
+} from '../../MarketplaceIntegrationPage/utils';
+import MarketplaceProductCard from '../../MarketplaceIntegrationPage/components/MarketplaceProductCard';
+import styles from '../styles';
+import {
+  filterTabs,
+  MINIMUM_REQUIRED_ITEMS as DEFAULT_MINIMUM_REQUIRED_ITEMS,
+} from '../utils';
+
+const resolveButtonPalette = (palette, accentColor) => {
+  const primaryBackground =
+    palette.buttonBackground || accentColor || palette.primary;
+  const primaryBorder = palette.buttonBorder || primaryBackground;
+  const primaryText = palette.buttonText || palette.white;
+  const primaryIcon = palette.buttonIcon || primaryText;
+  const disabledBackground =
+    palette.buttonDisabledBackground || palette.border;
+  const disabledBorder = palette.buttonBorderSecondary || palette.border;
+  const disabledText = palette.buttonDisabledText || palette.textSecondary;
+
+  return {
+    primaryBackground,
+    primaryBorder,
+    primaryText,
+    primaryIcon,
+    disabledBackground,
+    disabledBorder,
+    disabledText,
+  };
+};
+
+// Aba separada para seleção e publicação do catálogo 99Food.
+export default function Food99CatalogTab(props) {
+  const {
+    shadowStyle,
+    accentColor,
+    providerKey,
+    selectionSummaryTone,
+    search,
+    setSearch,
+    filterKey,
+    setFilterKey,
+    tabCounts,
+    productsResponse,
+    selectedEligibleProducts,
+    previewLoading,
+    onPreview,
+    filteredProducts,
+    selectedProductSet,
+    onToggleProduct,
+    onMarkCardPressHandled,
+    minimumRequiredItems,
+    palette = colors,
+  } = normalizeMarketplaceCatalogTabProps(props, {
+    providerKey: props?.providerKey || '99food',
+    defaultMinimumRequiredItems: DEFAULT_MINIMUM_REQUIRED_ITEMS,
+  });
+
+  const normalizedProducts = React.useMemo(
+    () =>
+      filteredProducts.map(product =>
+        normalizeMarketplaceCatalogProduct(product, providerKey),
+      ),
+    [filteredProducts, providerKey],
+  );
+
+  const filterOptions = filterTabs.map(tab => ({
+    key: tab.key,
+    label: `${tab.label} (${tabCounts[tab.key] || 0})`,
+  }));
+  const selectedFilterLabel =
+    filterOptions.find(option => option.key === filterKey)?.label ||
+    filterOptions[0]?.label ||
+    'Todos';
+  const buttonPalette = resolveButtonPalette(palette, accentColor);
+  const previewDisabled =
+    previewLoading || selectedEligibleProducts.length < minimumRequiredItems;
+
+  return (
+    <View style={[styles.panel, shadowStyle]}>
+      <View style={styles.panelHeader}>
+        <View>
+          <Text style={styles.panelTitle}>Selecao de produtos</Text>
+          <Text style={styles.panelSubtitle}>
+            Escolha pelo menos {minimumRequiredItems} produtos elegiveis para o
+            catalogo.
+          </Text>
+        </View>
+        <View
+          style={[
+            styles.selectionBadge,
+            {backgroundColor: withOpacity(selectionSummaryTone, 0.12)},
+          ]}>
+          <Text
+            style={[styles.selectionBadgeText, {color: selectionSummaryTone}]}>
+            {selectedEligibleProducts.length}/{minimumRequiredItems}
+          </Text>
+        </View>
+      </View>
+
+      <View style={styles.searchBox}>
+        <Icon name="search" size={16} color={palette.textSecondary} />
+        <TextInput
+          value={search}
+          onChangeText={setSearch}
+          placeholder="Buscar produto, categoria ou codigo"
+          placeholderTextColor={palette.textSecondary}
+          style={styles.searchInput}
+        />
+      </View>
+
+      <CompactFilterSelector
+        icon="filter"
+        label={selectedFilterLabel}
+        title="Produtos do catalogo"
+        accentColor={accentColor}
+        active={filterKey !== filterTabs[0]?.key}
+        options={filterOptions}
+        selectedKey={filterKey}
+        onSelect={optionKey => {
+          setFilterKey(optionKey);
+          return true;
+        }}
+      />
+
+      <View style={styles.selectionSummaryRow}>
+        <Text style={styles.selectionSummaryText}>
+          {productsResponse?.eligible_product_count || 0} produtos aptos no
+          cadastro atual
+        </Text>
+        <TouchableOpacity
+          style={[
+            styles.previewButton,
+            {
+              borderWidth: 1,
+              borderColor: previewDisabled
+                ? buttonPalette.disabledBorder
+                : buttonPalette.primaryBorder,
+            },
+            {
+              backgroundColor:
+                previewDisabled
+                  ? buttonPalette.disabledBackground
+                  : buttonPalette.primaryBackground,
+            },
+          ]}
+          onPress={onPreview}
+          disabled={previewDisabled}>
+          {previewLoading ? (
+            <ActivityIndicator
+              size="small"
+              color={buttonPalette.disabledText}
+            />
+          ) : (
+            <>
+              <Icon
+                name="eye"
+                size={15}
+                color={
+                  previewDisabled
+                    ? buttonPalette.disabledText
+                    : buttonPalette.primaryIcon
+                }
+              />
+              <Text
+                style={[
+                  styles.previewButtonText,
+                  {
+                    color: previewDisabled
+                      ? buttonPalette.disabledText
+                      : buttonPalette.primaryText,
+                  },
+                ]}>
+                Pre-visualizar menu
+              </Text>
+            </>
+          )}
+        </TouchableOpacity>
+      </View>
+
+      {normalizedProducts.length > 0 ? (
+        <View style={styles.productsList}>
+          {normalizedProducts.map(product => (
+            <MarketplaceProductCard
+              key={product.id}
+              product={product}
+              accentColor={accentColor}
+              selected={selectedProductSet.has(String(product.id))}
+              onPress={onToggleProduct}
+              onMarkCardPressHandled={onMarkCardPressHandled}
+            />
+          ))}
+        </View>
+      ) : (
+        <View style={styles.emptyProducts}>
+          <Text style={styles.emptyProductsText}>
+            Nenhum produto encontrado para este filtro.
+          </Text>
+        </View>
+      )}
+    </View>
+  );
+}

package/src/react/pages/Food99IntegrationPage/components/Food99OverviewTab.js

@@ -0,0 +1,134 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+import Icon from 'react-native-vector-icons/Feather';
+import { colors } from '@controleonline/../../src/styles/colors';
+
+import { withOpacity } from '@controleonline/../../src/styles/branding';
+
+import styles from '../styles';
+
+// Aba inicial com leitura rápida da integração 99Food.
+export default function Food99OverviewTab({
+  shadowStyle,
+  connected,
+  needsReconnect,
+  summaryCards,
+  lastMenuPublishState,
+  publicationTone,
+  publishStateLabel,
+  lastMenuTaskMessage,
+  lastErrorMessage,
+  palette = colors,
+}) {
+  const reconnectRequired = Boolean(needsReconnect);
+  const pillBackgroundColor = reconnectRequired
+    ? withOpacity(palette.warning, 0.24)
+    : connected
+      ? withOpacity(palette.success, 0.18)
+      : withOpacity(palette.warning, 0.24);
+  const pillTextColor = reconnectRequired
+    ? palette.warning
+    : connected
+      ? palette.success
+      : palette.warning;
+  const pillLabel = reconnectRequired
+    ? 'Reconexão necessária'
+    : connected
+      ? '99Food conectado'
+      : 'Integração pendente';
+
+  return (
+    <>
+      <View style={styles.companyRow}>
+        <View
+          style={[
+            styles.statusPill,
+            { backgroundColor: pillBackgroundColor },
+          ]}>
+          <Text
+            style={[
+              styles.statusPillText,
+              { color: pillTextColor },
+            ]}>
+            {pillLabel}
+          </Text>
+        </View>
+      </View>
+
+      <View style={styles.summaryGrid}>
+        {summaryCards.map(card => (
+          <View key={card.key} style={[styles.summaryCard, shadowStyle]}>
+            <View
+              style={[
+                styles.summaryIcon,
+                { backgroundColor: palette.cardIconBackground || palette.iconBackground },
+              ]}
+            >
+              <Icon
+                name={card.icon}
+                size={18}
+                color={palette.cardIconColor || palette.iconColor || palette.text}
+              />
+            </View>
+            <Text style={styles.summaryValue}>{card.value}</Text>
+            <Text style={styles.summaryLabel}>{card.label}</Text>
+          </View>
+        ))}
+      </View>
+
+      <View style={[styles.panel, shadowStyle]}>
+        <View style={styles.panelHeader}>
+          <View>
+            <Text style={styles.panelTitle}>Leitura rapida</Text>
+            <Text style={styles.panelSubtitle}>
+              Use as abas seguintes para trabalhar conexao, configuracoes e catalogo separadamente.
+            </Text>
+          </View>
+        </View>
+
+        {!!lastMenuPublishState && (
+          <View style={[styles.infoBanner, { backgroundColor: withOpacity(publicationTone, 0.12) }]}>
+            <Icon
+              name={
+                lastMenuPublishState === 'failed'
+                  ? 'alert-triangle'
+                  : lastMenuPublishState === 'published'
+                    ? 'check-circle'
+                    : 'clock'
+              }
+              size={14}
+              color={publicationTone}
+            />
+            <Text style={[styles.infoBannerText, { color: publicationTone }]}>
+              {publishStateLabel}
+              {lastMenuTaskMessage ? ` • ${lastMenuTaskMessage}` : ''}
+            </Text>
+          </View>
+        )}
+
+        {!!lastErrorMessage && lastMenuPublishState !== 'failed' && (
+          <View style={styles.errorBanner}>
+            <Icon name="alert-circle" size={14} color={palette.error} />
+            <Text style={styles.errorBannerText}>{lastErrorMessage}</Text>
+          </View>
+        )}
+
+        {reconnectRequired && !lastMenuPublishState && !lastErrorMessage ? (
+          <View style={[styles.infoBanner, { backgroundColor: withOpacity(palette.warning, 0.24) }]}>
+            <Icon name="alert-triangle" size={14} color={palette.warning} />
+            <Text style={[styles.infoBannerText, { color: palette.warning }]}>
+              A loja está vinculada localmente, mas a conexão remota caiu. Use a aba Loja para reconectar e retomar os webhooks.
+            </Text>
+          </View>
+        ) : !lastMenuPublishState && !lastErrorMessage ? (
+          <View style={[styles.infoBanner, { backgroundColor: withOpacity(palette.info, 0.12) }]}>
+            <Icon name="info" size={14} color={palette.info} />
+            <Text style={[styles.infoBannerText, { color: palette.info }]}>
+              A aba de loja concentra status remoto e ações de conexão. A aba de cardápio cuida somente dos produtos.
+            </Text>
+          </View>
+        ) : null}
+      </View>
+    </>
+  );
+}

package/src/react/pages/Food99IntegrationPage/components/Food99PreviewModal.js

@@ -0,0 +1,173 @@
+import React from 'react';
+import { ActivityIndicator, ScrollView, Text, TouchableOpacity, View } from 'react-native';
+import Icon from 'react-native-vector-icons/Feather';
+import { colors } from '@controleonline/../../src/styles/colors';
+
+import AnimatedModal from '@controleonline/ui-common/src/react/components/AnimatedModal';
+
+import styles from '../styles';
+import { countCollection } from '@controleonline/ui-common/src/react/utils/integrationPage';
+
+const resolveButtonPalette = (palette, accentColor) => {
+  const primaryBackground =
+    palette.buttonBackground || accentColor || palette.primary;
+  const primaryBorder = palette.buttonBorder || primaryBackground;
+  const primaryText = palette.buttonText || palette.white;
+  const primaryIcon = palette.buttonIcon || primaryText;
+  const secondaryBackground =
+    palette.buttonBackgroundSecondary || palette.white;
+  const secondaryBorder = palette.buttonBorderSecondary || palette.border;
+  const secondaryText = palette.buttonTextSecondary || palette.textSecondary;
+  const secondaryIcon = palette.buttonIconSecondary || secondaryText;
+  const disabledBackground =
+    palette.buttonDisabledBackground || secondaryBorder;
+  const disabledBorder = palette.buttonBorderSecondary || secondaryBorder;
+  const disabledText = palette.buttonDisabledText || secondaryText;
+
+  return {
+    primaryBackground,
+    primaryBorder,
+    primaryText,
+    primaryIcon,
+    secondaryBackground,
+    secondaryBorder,
+    secondaryText,
+    secondaryIcon,
+    disabledBackground,
+    disabledBorder,
+    disabledText,
+  };
+};
+
+// Modal de pré-visualização do menu antes do envio à 99Food.
+export default function Food99PreviewModal({
+  visible,
+  previewData,
+  selectedEligibleProducts,
+  uploading,
+  accentColor,
+  palette = colors,
+  onClose,
+  onUpload,
+}) {
+  const buttonPalette = resolveButtonPalette(palette, accentColor);
+
+  return (
+    <AnimatedModal visible={visible} onRequestClose={onClose}>
+      <View style={styles.modalShell}>
+        <View style={styles.modalCard}>
+          <View style={styles.modalHeader}>
+            <View>
+              <Text style={styles.modalTitle}>Pre-visualizacao do menu</Text>
+              <Text style={styles.modalSubtitle}>
+                {previewData?.eligible_product_count || selectedEligibleProducts.length} produtos prontos para upload
+              </Text>
+            </View>
+            <TouchableOpacity onPress={onClose} style={styles.modalCloseButton}>
+              <Icon name="x" size={18} color={palette.textSecondary} />
+            </TouchableOpacity>
+          </View>
+
+          <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={styles.modalContent}>
+            <View style={styles.modalSummaryGrid}>
+              <View style={styles.modalSummaryCard}>
+                <Text style={styles.modalSummaryValue}>{countCollection(previewData?.payload?.menus)}</Text>
+                <Text style={styles.modalSummaryLabel}>Menus</Text>
+              </View>
+              <View style={styles.modalSummaryCard}>
+                <Text style={styles.modalSummaryValue}>{countCollection(previewData?.payload?.categories)}</Text>
+                <Text style={styles.modalSummaryLabel}>Categorias</Text>
+              </View>
+              <View style={styles.modalSummaryCard}>
+                <Text style={styles.modalSummaryValue}>{countCollection(previewData?.payload?.items)}</Text>
+                <Text style={styles.modalSummaryLabel}>Itens</Text>
+              </View>
+            </View>
+
+            <View style={styles.previewSection}>
+              <Text style={styles.previewSectionTitle}>Categorias</Text>
+              {(previewData?.payload?.categories || []).map(category => (
+                <View key={category.app_category_id} style={styles.previewLine}>
+                  <Text style={styles.previewLineTitle}>{category.category_name}</Text>
+                  <Text style={styles.previewLineMeta}>
+                    {countCollection(category.app_item_ids)} item(ns)
+                  </Text>
+                </View>
+              ))}
+            </View>
+
+            <View style={styles.previewSection}>
+              <Text style={styles.previewSectionTitle}>Itens selecionados</Text>
+              {selectedEligibleProducts.map(product => (
+                <View key={product.id} style={styles.previewLine}>
+                  <Text style={styles.previewLineTitle}>{product.name}</Text>
+                  <Text style={styles.previewLineMeta}>
+                    {product.category?.name || 'Sem categoria'} • R$ {Number(product.price || 0).toFixed(2)}
+                  </Text>
+                </View>
+              ))}
+            </View>
+          </ScrollView>
+
+          <View style={styles.modalActions}>
+            <TouchableOpacity
+              style={[
+                styles.secondaryButton,
+                {
+                  borderColor: buttonPalette.secondaryBorder,
+                  backgroundColor: buttonPalette.secondaryBackground,
+                },
+              ]}
+              onPress={onClose}>
+              <Text
+                style={[
+                  styles.secondaryButtonText,
+                  { color: buttonPalette.secondaryText },
+                ]}>
+                Fechar
+              </Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              style={[
+                styles.primaryButton,
+                styles.modalPrimaryButton,
+                {
+                  borderWidth: 1,
+                  borderColor: uploading
+                    ? buttonPalette.disabledBorder
+                    : buttonPalette.primaryBorder,
+                  backgroundColor: uploading
+                    ? buttonPalette.disabledBackground
+                    : buttonPalette.primaryBackground,
+                },
+              ]}
+              onPress={onUpload}
+              disabled={uploading}>
+              {uploading ? (
+                <ActivityIndicator
+                  size="small"
+                  color={buttonPalette.disabledText}
+                />
+              ) : (
+                <>
+                  <Icon
+                    name="upload-cloud"
+                    size={16}
+                    color={buttonPalette.primaryIcon}
+                  />
+                  <Text
+                    style={[
+                      styles.primaryButtonText,
+                      { color: buttonPalette.primaryText },
+                    ]}>
+                    Publicar menu
+                  </Text>
+                </>
+              )}
+            </TouchableOpacity>
+          </View>
+        </View>
+      </View>
+    </AnimatedModal>
+  );
+}

package/src/react/pages/Food99IntegrationPage/components/Food99ProductCard.js

@@ -0,0 +1 @@
+export {default} from '../../MarketplaceIntegrationPage/components/MarketplaceProductCard';