@controleonline/ui-common 1.2.70 → 1.2.75

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

@@ -1,7 +1,11 @@
-import {
-  appendScreenMetrics,
-  hasScreenMetricsChanges,
-} from '@controleonline/ui-common/src/react/utils/screenMetrics';
+import {
+  appendScreenMetrics,
+  hasScreenMetricsChanges,
+} from '@controleonline/ui-common/src/react/utils/screenMetrics';
+import {
+  normalizeBooleanConfig,
+  SHOP_LOYALTY_COUPONS_ENABLED_CONFIG_KEY,
+} from '@controleonline/ui-common/src/react/utils/shopConfig';
 
 export const CIELO_DEVICES = ['quantum', 'ingenico', 'positivo'];
 export const SUPPORTED_POS_GATEWAYS = ['cielo', 'infinite-pay'];
@@ -23,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 =
@@ -38,9 +43,10 @@ export const POS_OPERATION_MODE_WAITER = 'waiter';
 export const POS_OPERATION_MODE_TOTEM = 'totem';
 export const POS_OPERATION_MODE_SINGLE_ITEM = 'single-item';
 export const POS_OPERATION_MODE_CASHIER = 'cashier';
-export const POS_CHECK_ORDER_TYPE_NONE = 'none';
-export const POS_CHECK_ORDER_TYPE_TAB = 'tab';
-export const POS_CHECK_ORDER_TYPE_TABLE = 'table';
+export const POS_CHECK_ORDER_TYPE_NONE = 'none';
+export const POS_CHECK_ORDER_TYPE_TAB = 'tab';
+export const POS_CHECK_ORDER_TYPE_TABLE = 'table';
+export const POS_CHECK_ORDER_TYPE_STAMP = 'stamp';
 export const POS_CHECK_ORDER_MANAGEMENT_MODE_MANAGE = 'manage';
 export const POS_CHECK_ORDER_MANAGEMENT_MODE_EXISTING_ONLY = 'existing-only';
 export const POS_OPERATION_MODE_DEFAULT = POS_OPERATION_MODE_CASHIER;
@@ -100,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';
@@ -237,31 +244,65 @@ export const normalizePosCheckOrderType = value => {
     .replace(/[\u0300-\u036f]/g, '')
     .replace(/[\s_]/g, '-');
 
-  if (
-    [
-      POS_CHECK_ORDER_TYPE_TAB,
-      'tab',
-    ].includes(normalizedValue)
+  if (
+    [
+      POS_CHECK_ORDER_TYPE_TAB,
+      'tab',
+    ].includes(normalizedValue)
   ) {
     return POS_CHECK_ORDER_TYPE_TAB;
   }
 
-  if (
-    [
-      POS_CHECK_ORDER_TYPE_TABLE,
-      'table',
-    ].includes(normalizedValue)
-  ) {
-    return POS_CHECK_ORDER_TYPE_TABLE;
-  }
-
-  return POS_CHECK_ORDER_TYPE_NONE;
-};
+  if (
+    [
+      POS_CHECK_ORDER_TYPE_TABLE,
+      'table',
+    ].includes(normalizedValue)
+  ) {
+    return POS_CHECK_ORDER_TYPE_TABLE;
+  }
+
+  if (
+    [
+      POS_CHECK_ORDER_TYPE_STAMP,
+      'stamp',
+      'carimbo',
+    ].includes(normalizedValue)
+  ) {
+    return POS_CHECK_ORDER_TYPE_STAMP;
+  }
+
+  return POS_CHECK_ORDER_TYPE_NONE;
+};
 
-export const resolvePosCheckOrderType = configs =>
-  normalizePosCheckOrderType(
-    parseConfigsObject(configs)?.[POS_CHECK_ORDER_TYPE_CONFIG_KEY],
-  );
+export const resolvePosCheckOrderType = configs =>
+  normalizePosCheckOrderType(
+    parseConfigsObject(configs)?.[POS_CHECK_ORDER_TYPE_CONFIG_KEY],
+  );
+
+export const resolvePosCheckOrderTypeForShop = (
+  deviceConfigs,
+  shopConfigs,
+) => {
+  const resolvedType = resolvePosCheckOrderType(deviceConfigs);
+  const parsedShopConfigs = parseConfigsObject(shopConfigs);
+  const hasLoyaltyCouponsEnabledKey = Object.prototype.hasOwnProperty.call(
+    parsedShopConfigs,
+    SHOP_LOYALTY_COUPONS_ENABLED_CONFIG_KEY,
+  );
+
+  if (
+    hasLoyaltyCouponsEnabledKey &&
+    resolvedType === POS_CHECK_ORDER_TYPE_STAMP &&
+    !normalizeBooleanConfig(
+      parsedShopConfigs?.[SHOP_LOYALTY_COUPONS_ENABLED_CONFIG_KEY],
+    )
+  ) {
+    return POS_CHECK_ORDER_TYPE_NONE;
+  }
+
+  return resolvedType;
+};
 
 export const normalizePosCheckOrderManagementMode = value => {
   const normalizedValue = String(value || '')

package/src/react/css/orders.js

@@ -0,0 +1,72 @@
+import {StyleSheet} from 'react-native';
+import {useStore} from '@store';
+import globalStyles from '../styles/global';
+
+const css = () => {
+  const themeStore = useStore('theme');
+  const getters = themeStore.getters;
+  const {colors} = getters;
+
+  const styles = StyleSheet.create({
+    Settings: {
+      container: {
+        flex: 1,
+        backgroundColor: '#fff',
+      },
+      scrollContent: {
+        paddingHorizontal: 20,
+        paddingBottom: 20,
+      },
+      mainContainer: {
+        flex: 1,
+      },
+      row: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: 5,
+        paddingVertical: 5,
+      },
+      label: {
+        flex: 0.5,
+        fontSize: 14,
+        color: '#333',
+      },
+      value: {
+        flex: 0.5,
+        fontSize: 14,
+        color: '#000',
+      },
+      walletRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: 5,
+        paddingVertical: 5,
+      },
+      walletValueContainer: {
+        flex: 0.5,
+        flexDirection: 'row',
+        alignItems: 'center',
+      },
+      walletValue: {
+        fontSize: 14,
+        color: '#000',
+        marginRight: 5,
+      },
+      picker: {
+        height: 50,
+        fontSize: 14,
+        color: '#000',
+        backgroundColor: '#f0f0f0',
+        borderRadius: 5,
+        marginTop: 5,
+      },
+    },
+    primary: {
+      color: colors.primary,
+    },
+  });
+
+  return {styles, globalStyles: globalStyles()};
+};
+
+export default css;

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;