@controleonline/ui-common 1.2.70 → 1.2.75

package/src/react/pages/MarketplaceIntegrationPage/components/MarketplaceProductCard.js

@@ -0,0 +1,205 @@
+import React, {useState} from 'react';
+import {Text, TouchableOpacity, View} from 'react-native';
+import Icon from 'react-native-vector-icons/Feather';
+
+import {withOpacity} from '@controleonline/../../src/styles/branding';
+
+import styles from '../../Food99IntegrationPage/styles';
+
+// Card compartilhado para o catálogo de marketplace.
+export default function MarketplaceProductCard({
+  product,
+  selected,
+  accentColor,
+  onPress,
+  onMarkCardPressHandled,
+}) {
+  const eligible = Boolean(product?.eligible);
+  const published = Boolean(product?.published);
+  const childGroups = Array.isArray(product?.children) ? product.children : [];
+  const childCount = childGroups.reduce(
+    (total, group) =>
+      total + (Array.isArray(group.items) ? group.items.length : 0),
+    0,
+  );
+  const [childrenExpanded, setChildrenExpanded] = useState(false);
+
+  const handleToggleChildren = event => {
+    event?.preventDefault?.();
+    event?.stopPropagation?.();
+    onMarkCardPressHandled?.();
+    setChildrenExpanded(current => !current);
+  };
+
+  return (
+    <TouchableOpacity
+      style={[
+        styles.productCard,
+        selected && {
+          borderColor: accentColor,
+          backgroundColor: withOpacity(accentColor, 0.04),
+        },
+      ]}
+      activeOpacity={0.88}
+      onPress={() => onPress?.(product?.sourceProduct || product)}>
+      <View style={styles.productMain}>
+        <View
+          style={[
+            styles.productStatusIcon,
+            {backgroundColor: eligible ? '#DCFCE7' : '#FEE2E2'},
+          ]}>
+          <Icon
+            name={selected ? 'check-circle' : eligible ? 'circle' : 'x-circle'}
+            size={16}
+            color={selected ? accentColor : eligible ? '#16A34A' : '#DC2626'}
+          />
+        </View>
+
+        <View style={styles.productContent}>
+          <View style={styles.productTitleRow}>
+            <Text style={styles.productName} numberOfLines={1}>
+              {product?.name}
+            </Text>
+            <Text style={styles.productPrice}>
+              R$ {Number(product?.price || 0).toFixed(2)}
+            </Text>
+          </View>
+
+          <Text style={styles.productMeta} numberOfLines={1}>
+            {product?.categoryName || 'Sem categoria'} •{' '}
+            {product?.productType || 'produto'}
+          </Text>
+
+          {!!product?.description && (
+            <Text style={styles.productDescription} numberOfLines={1}>
+              {product.description}
+            </Text>
+          )}
+
+          {product?.code ? (
+            <Text style={styles.productCode}>
+              {product?.codeLabel || 'Codigo'}: {product.code}
+            </Text>
+          ) : (
+            <Text style={styles.productCode}>
+              {product?.noCodeLabel || 'Sem codigo'}
+            </Text>
+          )}
+
+          {published && (
+            <Text style={styles.productRemoteState}>
+              {product?.publishedLabel || 'Ja publicado no catalogo'}
+            </Text>
+          )}
+
+          {!eligible &&
+            Array.isArray(product?.blockers) &&
+            product.blockers.length > 0 && (
+              <Text style={styles.productBlocker}>
+                {product.blockers.join(' • ')}
+              </Text>
+            )}
+
+          {childCount > 0 && (
+            <TouchableOpacity
+              activeOpacity={0.8}
+              onPressIn={onMarkCardPressHandled}
+              onPress={handleToggleChildren}
+              style={[
+                styles.productDisclosureButton,
+                {
+                  borderColor: accentColor,
+                  backgroundColor: withOpacity(accentColor, 0.08),
+                },
+              ]}>
+              <Text
+                style={[
+                  styles.productDisclosureButtonText,
+                  {color: accentColor},
+                ]}>
+                {childrenExpanded
+                  ? 'Ocultar filhos'
+                  : `Mostrar filhos (${childCount})`}
+              </Text>
+              <Icon
+                name={childrenExpanded ? 'chevron-up' : 'chevron-down'}
+                size={14}
+                color={accentColor}
+              />
+            </TouchableOpacity>
+          )}
+
+          {childrenExpanded && childCount > 0 && (
+            <View style={styles.childrenSection}>
+              <Text style={styles.childrenSectionLabel}>
+                {product?.childrenSectionLabel || 'Filhos consultados'}
+              </Text>
+
+              {childGroups.map(group => {
+                const groupItems = Array.isArray(group.items)
+                  ? group.items
+                  : [];
+                const requiredLabel = group.required
+                  ? 'Obrigatorio'
+                  : 'Opcional';
+                const rangeParts = [];
+
+                if (Number(group.minimum ?? 0) > 0) {
+                  rangeParts.push(`min ${group.minimum}`);
+                }
+
+                if (Number(group.maximum ?? 0) > 0) {
+                  rangeParts.push(`max ${group.maximum}`);
+                }
+
+                const groupMeta = [requiredLabel, ...rangeParts].join(' • ');
+
+                return (
+                  <View
+                    key={`${group.id ?? group.name}`}
+                    style={styles.childGroupCard}>
+                    <View style={styles.childGroupHeader}>
+                      <Text style={styles.childGroupTitle} numberOfLines={1}>
+                        {group.name}
+                      </Text>
+                      <Text style={styles.childGroupMeta} numberOfLines={1}>
+                        {groupMeta}
+                      </Text>
+                    </View>
+
+                    <View style={styles.childItemsList}>
+                      {groupItems.map(item => (
+                        <View
+                          key={`${item.id ?? item.code ?? item.name}`}
+                          style={styles.childItemRow}>
+                          <View style={styles.childItemContent}>
+                            <Text
+                              style={styles.childItemName}
+                              numberOfLines={1}>
+                              {item.name}
+                            </Text>
+                            <Text
+                              style={styles.childItemMeta}
+                              numberOfLines={1}>
+                              {item.code
+                                ? `${product?.childItemCodeLabel || 'Codigo'}: ${item.code}`
+                                : product?.childItemNoCodeLabel || 'Sem codigo'}
+                              {item.description ? ` • ${item.description}` : ''}
+                            </Text>
+                          </View>
+                          <Text style={styles.childItemPrice}>
+                            R$ {Number(item.price || 0).toFixed(2)}
+                          </Text>
+                        </View>
+                      ))}
+                    </View>
+                  </View>
+                );
+              })}
+            </View>
+          )}
+        </View>
+      </View>
+    </TouchableOpacity>
+  );
+}

package/src/react/pages/MarketplaceIntegrationPage/components/RemoteMarketplaceMenuTab.js

@@ -0,0 +1,335 @@
+import React, {useMemo, useState} from 'react';
+import {
+  ActivityIndicator,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import Icon from 'react-native-vector-icons/Feather';
+
+import styles from '../../Food99IntegrationPage/styles';
+
+const normalizeList = value => (Array.isArray(value) ? value : []);
+
+const resolveButtonPalette = (palette = {}, accentColor) => {
+  const primaryBackground =
+    palette.buttonBackground || accentColor || palette.primary || '#2563EB';
+  const primaryBorder = palette.buttonBorder || primaryBackground;
+  const primaryText = palette.buttonText || palette.white || '#FFFFFF';
+  const primaryIcon = palette.buttonIcon || primaryText;
+  const disabledBackground =
+    palette.buttonDisabledBackground || palette.border || '#CBD5E1';
+  const disabledBorder =
+    palette.buttonBorderSecondary || palette.border || '#CBD5E1';
+  const disabledText =
+    palette.buttonDisabledText || palette.textSecondary || '#64748B';
+
+  return {
+    primaryBackground,
+    primaryBorder,
+    primaryText,
+    primaryIcon,
+    disabledBackground,
+    disabledBorder,
+    disabledText,
+  };
+};
+
+const formatValue = value => {
+  if (value === null || value === undefined || value === '') return '-';
+  if (typeof value === 'number') return Number.isFinite(value) ? String(value) : '-';
+  if (typeof value === 'object') {
+    if (value.value !== null && value.value !== undefined) return formatValue(value.value);
+    if (value.originalValue !== null && value.originalValue !== undefined) {
+      return formatValue(value.originalValue);
+    }
+
+    return '-';
+  }
+  return String(value);
+};
+
+const formatMissingName = (kind, id) => {
+  const formattedId = formatValue(id);
+  return formattedId !== '-' ? `${kind} ${formattedId}` : `${kind} sem nome`;
+};
+
+const RemoteOptionRow = ({option}) => {
+  const displayId = option?.pdv_code ?? option?.id;
+  const name = option?.name || formatMissingName('Opcao', displayId);
+  const metaLabel = option?.pdv_code
+    ? `ID / Codigo PDV: ${formatValue(option.pdv_code)}`
+    : `ID: ${formatValue(option?.id)} | Codigo: ${formatValue(option?.external_code)}`;
+
+  return (
+    <View style={styles.remoteOptionRow}>
+      <View style={styles.remoteTreeContent}>
+        <Text style={styles.remoteTreeTitle}>{name}</Text>
+        <Text style={styles.remoteTreeMeta}>{metaLabel}</Text>
+        {option?.name_missing ? (
+          <Text style={styles.remoteTreeHint}>
+            Nome nao veio na resposta remota.
+          </Text>
+        ) : null}
+      </View>
+      <Text style={styles.remoteTreePrice}>{formatValue(option?.price)}</Text>
+    </View>
+  );
+};
+
+const RemoteGroupNode = ({group}) => {
+  const [expanded, setExpanded] = useState(false);
+  const options = normalizeList(group?.options);
+
+  return (
+    <View style={styles.remoteGroupCard}>
+      <TouchableOpacity
+        style={styles.remoteTreeHeader}
+        onPress={() => setExpanded(current => !current)}>
+        <Icon
+          name={expanded ? 'chevron-down' : 'chevron-right'}
+          size={16}
+          color="#64748B"
+        />
+        <View style={styles.remoteTreeContent}>
+          <Text style={styles.remoteTreeTitle}>
+            {group?.name || 'Grupo sem nome'}
+          </Text>
+          <Text style={styles.remoteTreeMeta}>
+            ID: {formatValue(group?.id)} | Min: {formatValue(group?.minimum)} |
+            Max: {formatValue(group?.maximum)} | Opcoes: {options.length}
+          </Text>
+        </View>
+      </TouchableOpacity>
+
+      {expanded && (
+        <View style={styles.remoteTreeChildren}>
+          {options.length > 0 ? (
+            options.map((option, index) => (
+              <RemoteOptionRow
+                key={`${group?.id || 'group'}-${option?.id || index}`}
+                option={option}
+              />
+            ))
+          ) : (
+            <Text style={styles.remoteEmptyText}>Grupo sem opcoes.</Text>
+          )}
+        </View>
+      )}
+    </View>
+  );
+};
+
+const RemoteProductNode = ({product}) => {
+  const [expanded, setExpanded] = useState(false);
+  const groups = normalizeList(product?.groups);
+
+  return (
+    <View style={styles.remoteProductCard}>
+      <TouchableOpacity
+        style={styles.remoteTreeHeader}
+        onPress={() => setExpanded(current => !current)}>
+        <Icon
+          name={expanded ? 'chevron-down' : 'chevron-right'}
+          size={16}
+          color="#64748B"
+        />
+        <View style={styles.remoteTreeContent}>
+          <Text style={styles.remoteTreeTitle}>
+            {product?.name || 'Produto sem nome'}
+          </Text>
+          <Text style={styles.remoteTreeMeta}>
+            ID: {formatValue(product?.id)} | Codigo:{' '}
+            {formatValue(product?.external_code)} | Grupos: {groups.length}
+          </Text>
+        </View>
+        <Text style={styles.remoteTreePrice}>{formatValue(product?.price)}</Text>
+      </TouchableOpacity>
+
+      {expanded && (
+        <View style={styles.remoteTreeChildren}>
+          {product?.description ? (
+            <Text style={styles.remoteDescription}>{product.description}</Text>
+          ) : null}
+
+          {groups.length > 0 ? (
+            groups.map((group, index) => (
+              <RemoteGroupNode
+                key={`${product?.id || 'product'}-${group?.id || index}`}
+                group={group}
+              />
+            ))
+          ) : (
+            <Text style={styles.remoteEmptyText}>
+              Produto sem grupos/adicionais remotos.
+            </Text>
+          )}
+        </View>
+      )}
+    </View>
+  );
+};
+
+const RemoteCategoryNode = ({category}) => {
+  const [expanded, setExpanded] = useState(false);
+  const products = normalizeList(category?.products);
+
+  return (
+    <View style={styles.remoteCategoryCard}>
+      <TouchableOpacity
+        style={styles.remoteTreeHeader}
+        onPress={() => setExpanded(current => !current)}>
+        <Icon
+          name={expanded ? 'chevron-down' : 'chevron-right'}
+          size={18}
+          color="#0F172A"
+        />
+        <View style={styles.remoteTreeContent}>
+          <Text style={styles.remoteCategoryTitle}>
+            {category?.name || 'Categoria sem nome'}
+          </Text>
+          <Text style={styles.remoteTreeMeta}>
+            ID: {formatValue(category?.id)} | Produtos: {products.length}
+          </Text>
+        </View>
+      </TouchableOpacity>
+
+      {expanded && (
+        <View style={styles.remoteTreeChildren}>
+          {products.length > 0 ? (
+            products.map((product, index) => (
+              <RemoteProductNode
+                key={`${category?.id || 'category'}-${product?.id || index}`}
+                product={product}
+              />
+            ))
+          ) : (
+            <Text style={styles.remoteEmptyText}>
+              Categoria sem produtos remotos.
+            </Text>
+          )}
+        </View>
+      )}
+    </View>
+  );
+};
+
+export default function RemoteMarketplaceMenuTab({
+  shadowStyle,
+  accentColor,
+  palette,
+  title,
+  subtitle,
+  buttonLabel,
+  loading,
+  snapshot,
+  errorMessage,
+  onLoad,
+}) {
+  const categories = normalizeList(snapshot?.categories);
+  const buttonPalette = resolveButtonPalette(palette, accentColor);
+  const summaryItems = useMemo(() => {
+    const summary = snapshot?.summary || {};
+
+    return [
+      ['Catalogos/Menus', summary.catalogs ?? summary.menus ?? 0],
+      ['Categorias', summary.categories ?? 0],
+      ['Produtos', summary.products ?? 0],
+      ['Grupos', summary.groups ?? 0],
+      ['Opcoes', summary.options ?? 0],
+      ['Opcoes sem nome', summary.missing_option_names ?? 0],
+    ];
+  }, [snapshot]);
+
+  return (
+    <View style={[styles.panel, shadowStyle]}>
+      <View style={styles.panelHeader}>
+        <View style={styles.remoteHeaderCopy}>
+          <Text style={styles.panelTitle}>{title}</Text>
+          <Text style={styles.panelSubtitle}>{subtitle}</Text>
+        </View>
+
+        <TouchableOpacity
+          style={[
+            styles.previewButton,
+            {
+              borderWidth: 1,
+              borderColor: loading
+                ? buttonPalette.disabledBorder
+                : buttonPalette.primaryBorder,
+              backgroundColor: loading
+                ? buttonPalette.disabledBackground
+                : buttonPalette.primaryBackground,
+            },
+          ]}
+          onPress={onLoad}
+          disabled={loading}>
+          {loading ? (
+            <ActivityIndicator
+              size="small"
+              color={buttonPalette.disabledText}
+            />
+          ) : (
+            <>
+              <Icon
+                name="download-cloud"
+                size={15}
+                color={buttonPalette.primaryIcon}
+              />
+              <Text
+                style={[
+                  styles.previewButtonText,
+                  { color: buttonPalette.primaryText },
+                ]}>
+                {buttonLabel}
+              </Text>
+            </>
+          )}
+        </TouchableOpacity>
+      </View>
+
+      {errorMessage ? (
+        <View style={styles.errorBanner}>
+          <Icon name="alert-triangle" size={16} color="#B91C1C" />
+          <Text style={styles.errorBannerText}>{errorMessage}</Text>
+        </View>
+      ) : null}
+
+      {snapshot ? (
+        <>
+          <View style={styles.remoteSummaryGrid}>
+            {summaryItems.map(([label, value]) => (
+              <View key={label} style={styles.remoteSummaryCard}>
+                <Text style={styles.remoteSummaryValue}>{formatValue(value)}</Text>
+                <Text style={styles.remoteSummaryLabel}>{label}</Text>
+              </View>
+            ))}
+          </View>
+
+          <View style={styles.remoteTreeList}>
+            {categories.length > 0 ? (
+              categories.map((category, index) => (
+                <RemoteCategoryNode
+                  key={`${category?.id || 'category'}-${index}`}
+                  category={category}
+                />
+              ))
+            ) : (
+              <View style={styles.emptyProducts}>
+                <Text style={styles.emptyProductsText}>
+                  Nenhuma categoria remota encontrada.
+                </Text>
+              </View>
+            )}
+          </View>
+        </>
+      ) : (
+        <View style={styles.emptyProducts}>
+          <Text style={styles.emptyProductsText}>
+            Clique no botao para ler o cardapio atual da plataforma.
+          </Text>
+        </View>
+      )}
+    </View>
+  );
+}

package/src/react/pages/MarketplaceIntegrationPage/index.js

@@ -0,0 +1,60 @@
+import {useLayoutEffect, useMemo} from 'react';
+
+import Food99IntegrationPage from '@controleonline/ui-common/src/react/pages/Food99IntegrationPage';
+import IFoodIntegrationPage from '@controleonline/ui-common/src/react/pages/IFoodIntegrationPage';
+import MercadoLivreIntegrationPage from '@controleonline/ui-common/src/react/pages/MercadoLivreIntegrationPage';
+
+const ROUTE_PROVIDER_MAP = {
+  Food99IntegrationPage: '99food',
+  IFoodIntegrationPage: 'ifood',
+  MercadoLivreIntegrationPage: 'mercadolivre',
+};
+
+const PROVIDER_LABEL_MAP = {
+  '99food': '99Food',
+  ifood: 'iFood',
+  mercadolivre: 'Mercado Livre',
+};
+
+const normalizeProviderKey = value =>
+  String(value || '')
+    .trim()
+    .toLowerCase();
+
+const resolveProviderKey = route =>
+  normalizeProviderKey(
+    route?.params?.providerKey ||
+      route?.params?.integrationKey ||
+      ROUTE_PROVIDER_MAP[route?.name] ||
+      '',
+  );
+
+export default function MarketplaceIntegrationPage(props) {
+  const {navigation, route} = props;
+
+  const providerKey = useMemo(
+    () => resolveProviderKey(route),
+    [route?.name, route?.params?.providerKey, route?.params?.integrationKey],
+  );
+  const providerLabel = PROVIDER_LABEL_MAP[providerKey] || 'Marketplace';
+
+  useLayoutEffect(() => {
+    if (!navigation?.setOptions) {
+      return;
+    }
+
+    navigation.setOptions({
+      title: providerLabel,
+    });
+  }, [navigation, providerLabel]);
+
+  if (providerKey === 'ifood') {
+    return <IFoodIntegrationPage {...props} />;
+  }
+
+  if (providerKey === 'mercadolivre') {
+    return <MercadoLivreIntegrationPage {...props} />;
+  }
+
+  return <Food99IntegrationPage {...props} />;
+}