@controleonline/ui-common 1.2.71 → 1.2.75

package/src/react/components/integrations/IntegrationTabs/index.js

@@ -0,0 +1,89 @@
+import React from 'react';
+import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
+
+import { colors } from '@controleonline/../../src/styles/colors';
+
+import createStyles from './styles';
+
+// Abas horizontais simples para reduzir densidade visual das páginas.
+export default function IntegrationTabs({ tabs, activeKey, onChange, accentColor, palette = colors }) {
+  const styles = createStyles(palette);
+  const resolvedPrimaryBackground =
+    palette.buttonBackground ||
+    accentColor ||
+    palette.primary;
+  const resolvedPrimaryBorder =
+    palette.buttonBorder ||
+    resolvedPrimaryBackground;
+  const resolvedPrimaryText =
+    palette.buttonText ||
+    palette.white;
+  const resolvedSecondaryBackground =
+    palette.buttonBackgroundSecondary ||
+    palette.white;
+  const resolvedSecondaryBorder =
+    palette.buttonBorderSecondary ||
+    palette.border;
+  const resolvedSecondaryText =
+    palette.buttonTextSecondary ||
+    palette.textSecondary;
+  const resolvedSecondaryIcon =
+    palette.buttonIconSecondary ||
+    resolvedSecondaryText;
+
+  return (
+    <ScrollView
+      horizontal
+      showsHorizontalScrollIndicator={false}
+      contentContainerStyle={styles.scrollContent}>
+      {tabs.map(tab => {
+        const active = tab.key === activeKey;
+        const tabColors = active
+          ? {
+              backgroundColor: resolvedPrimaryBackground,
+              borderColor: resolvedPrimaryBorder,
+              textColor: resolvedPrimaryText,
+              badgeBackground: palette.buttonPressedBackground || resolvedPrimaryBorder,
+              badgeText: resolvedPrimaryText,
+            }
+          : {
+              backgroundColor: resolvedSecondaryBackground,
+              borderColor: resolvedSecondaryBorder,
+              textColor: resolvedSecondaryText,
+              badgeBackground: palette.badgeBackground || resolvedSecondaryBackground,
+              badgeText: resolvedSecondaryIcon,
+            };
+
+        return (
+          <TouchableOpacity
+            key={tab.key}
+            activeOpacity={0.85}
+            style={[
+              styles.tabButton,
+              {
+                backgroundColor: tabColors.backgroundColor,
+                borderColor: tabColors.borderColor,
+              },
+            ]}
+            onPress={() => onChange(tab.key)}>
+            <Text style={[styles.tabLabel, { color: tabColors.textColor }]}>
+              {tab.label}
+            </Text>
+
+            {tab.badge !== undefined && tab.badge !== null && tab.badge !== '' && (
+              <View
+                style={[
+                  styles.tabBadge,
+                  { backgroundColor: tabColors.badgeBackground },
+                ]}>
+                <Text style={[styles.tabBadgeText, { color: tabColors.badgeText }]}>
+                  {tab.badge}
+                </Text>
+              </View>
+            )}
+          </TouchableOpacity>
+        );
+      })}
+    </ScrollView>
+  );
+}

package/src/react/components/integrations/IntegrationTabs/styles.js

@@ -0,0 +1,44 @@
+import { StyleSheet } from 'react-native';
+import {colors} from '@controleonline/../../src/styles/colors';
+
+const createStyles = (palette = colors) =>
+  StyleSheet.create({
+  scrollContent: {
+    gap: 8,
+    paddingBottom: 4,
+  },
+  tabButton: {
+    minHeight: 40,
+    borderRadius: 999,
+    borderWidth: 1,
+    borderColor: palette.buttonBorderSecondary || palette.border,
+    backgroundColor: palette.buttonBackgroundSecondary || palette.white,
+    paddingHorizontal: 14,
+    paddingVertical: 8,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 8,
+  },
+  tabLabel: {
+    fontSize: 12,
+    fontWeight: '700',
+    color: palette.buttonTextSecondary || palette.textSecondary,
+  },
+  tabBadge: {
+    minWidth: 22,
+    height: 22,
+    borderRadius: 999,
+    backgroundColor: palette.badgeBackground || palette.border,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 6,
+  },
+  tabBadgeText: {
+    fontSize: 11,
+    fontWeight: '800',
+    color: palette.buttonIconSecondary || palette.textSecondary,
+  },
+});
+
+export default createStyles;

package/src/react/config/deviceConfigBootstrap.js

@@ -27,6 +27,7 @@ export const DISPLAY_SIZE_MIN = 1;
 export const DISPLAY_SIZE_MAX = 10;
 export const DISPLAY_SIZE_DEFAULT = 5;
 export const POS_OPERATION_MODE_CONFIG_KEY = 'pos-operation-mode';
+export const POS_PRODUCT_SHOWCASE_CONFIG_KEY = 'pos-product-showcase-id';
 export const DEVICE_ANDROID_KIOSK_ENABLED_CONFIG_KEY =
   'android-kiosk-enabled';
 export const DEVICE_ANDROID_LAUNCHER_ENABLED_CONFIG_KEY =
@@ -105,9 +106,10 @@ export const DEFAULT_DEVICE_CONFIGS = {
   [POS_CHECK_ORDER_MANAGEMENT_MODE_CONFIG_KEY]:
     POS_CHECK_ORDER_MANAGEMENT_MODE_MANAGE,
   [POS_OPERATION_MODE_CONFIG_KEY]: POS_OPERATION_MODE_DEFAULT,
-  [POS_AUTO_PRINT_ENABLED_CONFIG_KEY]: '0',
-  [POS_CASH_MANAGEMENT_MODE_CONFIG_KEY]: POS_CASH_MANAGEMENT_MODE_DEFAULT,
-};
+  [POS_PRODUCT_SHOWCASE_CONFIG_KEY]: '',
+  [POS_AUTO_PRINT_ENABLED_CONFIG_KEY]: '0',
+  [POS_CASH_MANAGEMENT_MODE_CONFIG_KEY]: POS_CASH_MANAGEMENT_MODE_DEFAULT,
+};
 
 export const isTruthyValue = value =>
   value === true || value === '1' || value === 1 || value === 'true';

package/src/react/pages/Connections.js

@@ -0,0 +1,229 @@
+import React, { useCallback, useMemo } from 'react';
+import { Platform, Text, TouchableOpacity, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { useFocusEffect, useNavigation } from '@react-navigation/native';
+import Icon from 'react-native-vector-icons/Feather';
+
+import { useStore } from '@store';
+import { colors } from '@controleonline/../../src/styles/colors';
+import { createStyles } from './Connections.styles';
+import {
+  resolveThemePalette,
+  withOpacity,
+} from '@controleonline/../../src/styles/branding';
+import DefaultTable from '@controleonline/ui-default/src/react/components/table/DefaultTable';
+
+const tt = (type, key) => global.t?.t('configs', type, key);
+
+const resolveShadowStyle = textColor =>
+  Platform.select({
+    ios: {
+      shadowColor: textColor,
+      shadowOffset: { width: 0, height: 8 },
+      shadowOpacity: 0.08,
+      shadowRadius: 16,
+    },
+    android: { elevation: 3 },
+    web: { boxShadow: `0 10px 24px ${withOpacity(textColor, 0.08)}` },
+  });
+
+const formatPhoneLabel = phone => {
+  if (!phone) return tt('connections_label', 'notProvided') || 'Nao informado';
+  if (typeof phone === 'string') return phone;
+  const ddd = String(phone?.ddd || '').trim();
+  const digits = String(phone?.phone || '').replace(/\D/g, '');
+  if (!ddd && !digits) return tt('connections_label', 'notProvided') || 'Nao informado';
+  if (!digits) return `(${ddd})`;
+  const lastFour = digits.slice(-4);
+  const firstPart = digits.slice(0, -4);
+  if (!firstPart) return ddd ? `(${ddd}) ${lastFour}` : lastFour;
+  return ddd ? `(${ddd}) ${firstPart}-${lastFour}` : `${firstPart}-${lastFour}`;
+};
+
+const formatStatusLabel = status => {
+  if (!status) return tt('connections_status', 'unknown') || '—';
+  if (typeof status === 'string') return status;
+  return status?.status || status?.name || '—';
+};
+
+export default function Connections() {
+  const navigation = useNavigation();
+  const peopleStore = useStore('people');
+  const themeStore = useStore('theme');
+  const connectionsStore = useStore('connections');
+
+  const { currentCompany } = peopleStore.getters || {};
+  const { colors: themeColors } = themeStore.getters || {};
+  const items = connectionsStore.getters?.items;
+  const totalItems = connectionsStore.getters?.totalItems;
+
+  const brandColors = useMemo(
+    () =>
+      resolveThemePalette(
+        { ...themeColors, ...(currentCompany?.theme?.colors || {}) },
+        colors,
+      ),
+    [themeColors, currentCompany?.id],
+  );
+  const styles = useMemo(() => createStyles(brandColors), [brandColors]);
+  const shadowStyle = useMemo(
+    () => resolveShadowStyle(brandColors.text),
+    [brandColors.text],
+  );
+
+  const providerId = currentCompany?.id;
+  const peopleIri = useMemo(
+    () => (providerId ? `/people/${String(providerId).replace(/\D/g, '')}` : ''),
+    [providerId],
+  );
+
+  const requestParams = useMemo(
+    () => (peopleIri ? { people: peopleIri } : {}),
+    [peopleIri],
+  );
+
+  const connectionCount = useMemo(() => {
+    if (typeof totalItems === 'number' && totalItems > 0) return totalItems;
+    return Array.isArray(items) ? items.length : 0;
+  }, [items, totalItems]);
+
+  useFocusEffect(
+    useCallback(() => {
+      if (!peopleIri || typeof connectionsStore.actions?.getItems !== 'function') {
+        return;
+      }
+      connectionsStore.actions.getItems({ people: peopleIri });
+    }, [peopleIri]),
+  );
+
+  const openWhatsAppChannel = useCallback(() => {
+    navigation.navigate('WhatsAppConnectionPage');
+  }, [navigation]);
+
+  const renderConnectionCard = useCallback(
+    ({ item }) => {
+      if (!item) return null;
+      return (
+        <View>
+          <Text style={styles.previewName}>
+            {item.name || tt('connections_label', 'unnamed') || 'Sem nome'}
+          </Text>
+          <Text style={styles.previewPhone}>{formatPhoneLabel(item.phone)}</Text>
+          <Text style={styles.previewStatus}>{formatStatusLabel(item.status)}</Text>
+        </View>
+      );
+    },
+    [styles.previewName, styles.previewPhone, styles.previewStatus],
+  );
+
+  if (!providerId) {
+    return (
+      <SafeAreaView style={styles.container} edges={['bottom']}>
+        <View style={styles.centerState}>
+          <Icon name="building" size={32} color={brandColors.textSecondary} />
+          <Text style={styles.centerStateTitle}>
+            {tt('connections_title', 'selectCompany') || 'Selecione uma empresa'}
+          </Text>
+          <Text style={styles.centerStateText}>
+            {tt('connections_text', 'selectCompany') ||
+              'As conexoes disponiveis dependem da empresa ativa.'}
+          </Text>
+        </View>
+      </SafeAreaView>
+    );
+  }
+
+  return (
+    <SafeAreaView
+      style={[styles.container, { backgroundColor: brandColors.background }]}
+      edges={['bottom']}>
+      <View style={[styles.heroCard, shadowStyle, { backgroundColor: brandColors.primary }]}>
+        <View style={styles.heroCopy}>
+          <Text style={styles.heroEyebrow}>
+            {tt('connections_eyebrow', 'communication') || 'COMUNICACAO'}
+          </Text>
+          <Text style={styles.heroTitle}>
+            {tt('connections_title', 'connections') || 'Conexoes'}
+          </Text>
+          <Text style={styles.heroText}>
+            {tt('connections_text', 'hero') ||
+              'Gerencie os canais de comunicacao conectados com a sua operacao.'}
+          </Text>
+        </View>
+        <View style={styles.heroBadge}>
+          <Icon name="radio" size={22} color={brandColors.primary} />
+        </View>
+      </View>
+
+      <View style={styles.companyRow}>
+        <View style={styles.companyBadge}>
+          <Text style={styles.companyBadgeText}>
+            {`${connectionCount} ${tt('connections_label', 'connections') || 'conexoes'}`}
+          </Text>
+        </View>
+      </View>
+
+      <TouchableOpacity
+        activeOpacity={0.92}
+        onPress={openWhatsAppChannel}
+        style={[styles.channelCard, shadowStyle]}>
+        <View style={styles.channelTopRow}>
+          <View
+            style={[
+              styles.channelIconWrap,
+              { backgroundColor: withOpacity(brandColors.success, 0.12) },
+            ]}>
+            <Icon name="message-circle" size={20} color={brandColors.success} />
+          </View>
+          <View style={styles.channelStatusPill}>
+            <Text style={styles.channelStatusText}>
+              {connectionCount > 0
+                ? `${connectionCount} ${tt('connections_status', 'configured') || 'configurada(s)'}`
+                : tt('connections_status', 'readyToConfigure') || 'Pronta para configurar'}
+            </Text>
+          </View>
+        </View>
+        <Text style={styles.channelTitle}>
+          {tt('connections_label', 'whatsApp') || 'WhatsApp'}
+        </Text>
+        <Text style={styles.channelDescription}>
+          {tt('connections_text', 'whatsApp') ||
+            'Conecte numeros, acompanhe status e gere o QR Code de autenticacao.'}
+        </Text>
+        <View style={styles.actionRow}>
+          <Text style={styles.actionText}>
+            {tt('connections_button', 'openChannel') || 'Abrir canal'}
+          </Text>
+          <Icon name="arrow-right" size={18} color={brandColors.primary} />
+        </View>
+      </TouchableOpacity>
+
+      <View style={{ flex: 1, marginTop: 12 }}>
+        <DefaultTable
+          storeName="connections"
+          requestParams={requestParams}
+          initialViewMode="cards"
+          forceCardsOnCompact
+          showToolbar
+          showRowActions={false}
+          showColumnFiltersButton
+          onRowPress={openWhatsAppChannel}
+          renderCard={renderConnectionCard}
+          searchProps={{
+            compact: true,
+            placeholder:
+              tt('connections_label', 'search') || 'Buscar conexao, telefone ou status',
+            searchKey: 'search',
+            storeName: 'connections',
+          }}
+          totalItemsLabel="connections"
+          visibleColumnsPreferenceKey="connections"
+          accentColor={brandColors.primary}
+          onAdd={openWhatsAppChannel}
+          add
+          addLabel={tt('connections_button', 'openChannel') || 'Abrir canal'}
+        />
+      </View>
+    </SafeAreaView>
+  );
+}

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

@@ -0,0 +1,222 @@
+import { StyleSheet } from 'react-native';
+import { colors } from '@controleonline/../../src/styles/colors';
+import { withOpacity } from '@controleonline/../../src/styles/branding';
+
+export const createStyles = (palette = colors) =>
+  StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: palette.background,
+  },
+  scroll: {
+    paddingHorizontal: 16,
+    paddingTop: 16,
+    paddingBottom: 32,
+  },
+  centerState: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 28,
+  },
+  centerStateTitle: {
+    marginTop: 16,
+    fontSize: 18,
+    fontWeight: '700',
+    color: palette.text,
+    textAlign: 'center',
+  },
+  centerStateText: {
+    marginTop: 8,
+    fontSize: 14,
+    lineHeight: 21,
+    color: palette.textSecondary,
+    textAlign: 'center',
+  },
+  heroCard: {
+    borderRadius: 28,
+    paddingHorizontal: 22,
+    paddingVertical: 24,
+    marginBottom: 18,
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    justifyContent: 'space-between',
+  },
+  heroCopy: {
+    flex: 1,
+    paddingRight: 16,
+  },
+  heroEyebrow: {
+    fontSize: 13,
+    fontWeight: '800',
+    letterSpacing: 1.4,
+    color: withOpacity(palette.white, 0.82),
+    marginBottom: 10,
+  },
+  heroTitle: {
+    fontSize: 22,
+    fontWeight: '800',
+    color: palette.white,
+    marginBottom: 8,
+  },
+  heroText: {
+    fontSize: 14,
+    lineHeight: 21,
+    color: withOpacity(palette.white, 0.88),
+  },
+  heroBadge: {
+    width: 54,
+    height: 54,
+    borderRadius: 18,
+    backgroundColor: palette.white,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  companyRow: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    justifyContent: 'space-between',
+    marginBottom: 18,
+    gap: 12,
+  },
+  sectionTitle: {
+    fontSize: 13,
+    fontWeight: '700',
+    color: palette.textSecondary,
+    marginBottom: 4,
+  },
+  companyName: {
+    fontSize: 21,
+    fontWeight: '800',
+    color: palette.text,
+  },
+  companyBadge: {
+    borderRadius: 999,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    backgroundColor: withOpacity(palette.info, 0.12),
+  },
+  companyBadgeText: {
+    fontSize: 13,
+    fontWeight: '700',
+    color: palette.info,
+  },
+  channelCard: {
+    borderRadius: 28,
+    backgroundColor: palette.white,
+    padding: 18,
+  },
+  channelTopRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: 16,
+    gap: 12,
+  },
+  channelIconWrap: {
+    width: 56,
+    height: 56,
+    borderRadius: 18,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  channelStatusPill: {
+    borderRadius: 999,
+    backgroundColor: palette.background,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+  },
+  channelStatusText: {
+    fontSize: 13,
+    fontWeight: '700',
+    color: palette.textSecondary,
+  },
+  channelTitle: {
+    fontSize: 28,
+    fontWeight: '800',
+    color: palette.text,
+    marginBottom: 8,
+  },
+  channelDescription: {
+    fontSize: 14,
+    lineHeight: 21,
+    color: palette.textSecondary,
+    marginBottom: 18,
+  },
+  metaRow: {
+    flexDirection: 'row',
+    gap: 12,
+    marginBottom: 16,
+  },
+  metaItem: {
+    flex: 1,
+    borderRadius: 18,
+    backgroundColor: palette.background,
+    paddingHorizontal: 14,
+    paddingVertical: 14,
+  },
+  metaLabel: {
+    fontSize: 12,
+    fontWeight: '700',
+    color: palette.textSecondary,
+    marginBottom: 6,
+  },
+  metaValue: {
+    fontSize: 18,
+    fontWeight: '800',
+    color: palette.text,
+  },
+  previewList: {
+    gap: 12,
+  },
+  previewRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    borderRadius: 18,
+    backgroundColor: palette.background,
+    paddingHorizontal: 14,
+    paddingVertical: 14,
+    gap: 12,
+  },
+  previewName: {
+    fontSize: 15,
+    fontWeight: '700',
+    color: palette.text,
+    marginBottom: 4,
+  },
+  previewPhone: {
+    fontSize: 13,
+    color: palette.textSecondary,
+  },
+  previewStatus: {
+    fontSize: 13,
+    fontWeight: '700',
+    color: palette.info,
+  },
+  emptyInline: {
+    borderRadius: 18,
+    backgroundColor: palette.background,
+    paddingHorizontal: 14,
+    paddingVertical: 16,
+  },
+  emptyInlineText: {
+    fontSize: 14,
+    lineHeight: 21,
+    color: palette.textSecondary,
+  },
+  actionRow: {
+    marginTop: 18,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  actionText: {
+    fontSize: 15,
+    fontWeight: '800',
+    color: palette.text,
+  },
+});
+
+const styles = createStyles(colors);
+export default styles;