@controleonline/ui-common 1.2.70 → 1.2.75

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

@@ -0,0 +1,269 @@
+import { StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#F8FAFC',
+  },
+  scroll: {
+    paddingHorizontal: 20,
+    paddingTop: 16,
+    paddingBottom: 32,
+    gap: 16,
+  },
+  centerState: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 32,
+    gap: 10,
+  },
+  centerStateTitle: {
+    fontSize: 20,
+    fontWeight: '700',
+    color: '#0F172A',
+    textAlign: 'center',
+  },
+  centerStateText: {
+    fontSize: 14,
+    color: '#64748B',
+    textAlign: 'center',
+    lineHeight: 20,
+  },
+  heroCard: {
+    borderRadius: 24,
+    padding: 20,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+  },
+  heroCopy: {
+    flex: 1,
+    paddingRight: 16,
+  },
+  heroEyebrow: {
+    fontSize: 12,
+    fontWeight: '700',
+    color: 'rgba(255,255,255,0.78)',
+    textTransform: 'uppercase',
+    letterSpacing: 1,
+    marginBottom: 8,
+  },
+  heroTitle: {
+    fontSize: 26,
+    fontWeight: '800',
+    color: '#FFFFFF',
+    marginBottom: 8,
+    letterSpacing: -0.6,
+  },
+  heroText: {
+    fontSize: 14,
+    lineHeight: 21,
+    color: 'rgba(255,255,255,0.88)',
+  },
+  heroBadge: {
+    width: 52,
+    height: 52,
+    borderRadius: 18,
+    backgroundColor: '#FFFFFF',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  statusCard: {
+    borderRadius: 22,
+    backgroundColor: '#FFFFFF',
+    padding: 16,
+  },
+  statusHeader: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    justifyContent: 'space-between',
+    gap: 12,
+  },
+  statusCopy: {
+    flex: 1,
+  },
+  sectionTitle: {
+    fontSize: 16,
+    fontWeight: '800',
+    color: '#0F172A',
+    marginBottom: 4,
+  },
+  sectionSubtitle: {
+    fontSize: 13,
+    lineHeight: 19,
+    color: '#64748B',
+  },
+  statusBadge: {
+    borderRadius: 999,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+  },
+  statusBadgeText: {
+    fontSize: 12,
+    fontWeight: '700',
+  },
+  formCard: {
+    borderRadius: 22,
+    backgroundColor: '#FFFFFF',
+    padding: 16,
+    gap: 14,
+  },
+  cardTitle: {
+    fontSize: 20,
+    fontWeight: '800',
+    color: '#0F172A',
+  },
+  cardSubtitle: {
+    fontSize: 13,
+    lineHeight: 20,
+    color: '#64748B',
+  },
+  fieldList: {
+    gap: 14,
+  },
+  fieldGroup: {
+    gap: 8,
+  },
+  fieldLabel: {
+    fontSize: 14,
+    fontWeight: '800',
+    color: '#0F172A',
+  },
+  fieldKey: {
+    fontSize: 12,
+    fontWeight: '600',
+    color: '#64748B',
+  },
+  input: {
+    minHeight: 50,
+    borderRadius: 16,
+    borderWidth: 1,
+    borderColor: '#E2E8F0',
+    backgroundColor: '#F8FAFC',
+    paddingHorizontal: 14,
+    paddingVertical: 12,
+    fontSize: 15,
+    fontWeight: '600',
+    color: '#0F172A',
+  },
+  inputDisabled: {
+    opacity: 0.7,
+  },
+  embeddedHeader: {
+    borderRadius: 18,
+    backgroundColor: '#FFFFFF',
+    borderWidth: 1,
+    borderColor: '#E2E8F0',
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+    marginBottom: 4,
+  },
+  embeddedTitle: {
+    fontSize: 18,
+    fontWeight: '800',
+    color: '#0F172A',
+  },
+  subTabRow: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 8,
+    marginBottom: 4,
+  },
+  subTabButton: {
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderRadius: 999,
+    borderWidth: 1,
+    borderColor: '#E2E8F0',
+    backgroundColor: '#F8FAFC',
+  },
+  subTabButtonActive: {
+    borderColor: '#166534',
+    backgroundColor: '#DCFCE7',
+  },
+  subTabLabel: {
+    fontSize: 12,
+    fontWeight: '700',
+    color: '#64748B',
+  },
+  subTabLabelActive: {
+    color: '#166534',
+  },
+  tabDescription: {
+    fontSize: 13,
+    fontWeight: '500',
+    color: '#64748B',
+    lineHeight: 18,
+    marginBottom: 8,
+  },
+  fileFieldWrap: {
+    gap: 8,
+  },
+  filePickerButton: {
+    minHeight: 48,
+    borderRadius: 14,
+    borderWidth: 1,
+    borderColor: '#BBF7D0',
+    backgroundColor: '#F0FDF4',
+    paddingHorizontal: 14,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10,
+  },
+  filePickerButtonText: {
+    fontSize: 14,
+    fontWeight: '700',
+    color: '#166534',
+  },
+  fieldHint: {
+    marginTop: 8,
+    fontSize: 12,
+    fontWeight: '500',
+    color: '#64748B',
+    lineHeight: 18,
+  },
+  selectList: {
+    gap: 8,
+  },
+  selectOption: {
+    minHeight: 44,
+    borderRadius: 14,
+    borderWidth: 1,
+    borderColor: '#E2E8F0',
+    backgroundColor: '#F8FAFC',
+    paddingHorizontal: 14,
+    justifyContent: 'center',
+  },
+  selectOptionActive: {
+    borderColor: '#166534',
+    backgroundColor: '#DCFCE7',
+  },
+  selectOptionText: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: '#0F172A',
+  },
+  selectOptionTextActive: {
+    color: '#166534',
+  },
+  saveButton: {
+    minHeight: 52,
+    borderRadius: 18,
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'row',
+    gap: 10,
+    paddingHorizontal: 18,
+  },
+  saveButtonDisabled: {
+    opacity: 0.65,
+  },
+  saveButtonText: {
+    fontSize: 15,
+    fontWeight: '800',
+    color: '#FFFFFF',
+  },
+});
+
+export default styles;

package/src/react/pages/Integrations.js

@@ -0,0 +1,299 @@
+import React, {useCallback, useMemo, useState} from 'react';
+import {
+  ActivityIndicator,
+  Image,
+  Platform,
+  RefreshControl,
+  ScrollView,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {SafeAreaView} from 'react-native-safe-area-context';
+import {useFocusEffect} from '@react-navigation/native';
+import Icon from 'react-native-vector-icons/Feather';
+
+import {api} from '@controleonline/ui-common/src/api';
+import useToastMessage from '@controleonline/ui-crm/src/react/hooks/useToastMessage';
+import {useStore} from '@store';
+import {colors} from '@controleonline/../../src/styles/colors';
+import {
+  resolveThemePalette,
+  withOpacity,
+} from '@controleonline/../../src/styles/branding';
+
+import {
+  INTEGRATION_LIST,
+  parseIntegrationCollection,
+} from './integrationsCatalog';
+import { createStyles } from './Integrations.styles';
+
+const tt = (type, key) => global.t?.t('configs', type, key);
+
+const resolveIntegrationColors = brandColors => ({
+  ...brandColors,
+  background: brandColors.background || '#F8FAFC',
+  cardBackground: brandColors.cardBackground || brandColors.surface || '#FFFFFF',
+  cardBorder: brandColors.cardBorder || brandColors.border || '#E2E8F0',
+  cardIconBackground: brandColors.cardIconBackground || brandColors.iconBackground || '#EEF2FF',
+  cardIconColor: brandColors.cardIconColor || brandColors.iconColor || '#0F172A',
+  cardText: brandColors.cardText || brandColors.textPrimary || brandColors.text || '#0F172A',
+  text: brandColors.textPrimary || brandColors.text || '#0F172A',
+  mutedText: brandColors.textMuted || brandColors.textSecondary || '#64748B',
+  badgeBackground: brandColors.badgeBackground || brandColors.buttonBackgroundSecondary || '#F8FAFC',
+  badgeBorder: brandColors.badgeBorder || brandColors.buttonBorderSecondary || '#E2E8F0',
+  badgeText: brandColors.badgeText || brandColors.textSecondary || '#64748B',
+  badgeSelectedBackground: brandColors.badgeSelectedBackground || brandColors.buttonBackground || '#EFF6FF',
+  badgeSelectedBorder: brandColors.badgeSelectedBorder || brandColors.buttonBorder || '#BFDBFE',
+  badgeSelectedText: brandColors.badgeSelectedText || brandColors.buttonText || '#0F172A',
+  textSuccess: brandColors.textSuccess || '#16A34A',
+  textWarning: brandColors.textWarning || '#B45309',
+  iconColor: brandColors.iconColor || brandColors.text || '#0F172A',
+});
+
+const formatApiError = error => {
+  if (!error) return tt('integrations_error', 'load') || 'Nao foi possivel carregar as integracoes.';
+  if (typeof error === 'string') return error;
+  return (
+    error?.message ||
+    error?.description ||
+    error?.errmsg ||
+    tt('integrations_error', 'load') ||
+    'Nao foi possivel carregar as integracoes.'
+  );
+};
+
+const isConnectedValue = value =>
+  value === true ||
+  value === 1 ||
+  value === '1' ||
+  String(value).trim().toLowerCase() === 'true';
+
+const renderIntegrationIcon = (integration, resolvedStyles, iconColor) => {
+  if (integration.logo) {
+    return (
+      <Image
+        source={integration.logo}
+        style={resolvedStyles.integrationLogo}
+        resizeMode="contain"
+      />
+    );
+  }
+
+  return (
+    <Icon
+      name={integration.icon || 'box'}
+      size={20}
+      color={iconColor}
+    />
+  );
+};
+
+export default function IntegrationsPage({navigation}) {
+  const peopleStore = useStore('people');
+  const themeStore = useStore('theme');
+  const {currentCompany} = peopleStore.getters;
+  const {colors: themeColors} = themeStore.getters;
+  const {showError, showInfo} = useToastMessage();
+
+  const brandColors = useMemo(
+    () =>
+      resolveThemePalette(
+        {
+          ...themeColors,
+          ...(currentCompany?.theme?.colors || {}),
+        },
+        colors,
+      ),
+    [themeColors, currentCompany?.id],
+  );
+  const integrationColors = useMemo(
+    () => resolveIntegrationColors(brandColors),
+    [brandColors],
+  );
+  const styles = useMemo(
+    () => createStyles(integrationColors),
+    [integrationColors],
+  );
+
+  const [loading, setLoading] = useState(true);
+  const [refreshing, setRefreshing] = useState(false);
+  const [integrationItems, setIntegrationItems] = useState([]);
+
+  const providerId = currentCompany?.id;
+
+  const integrationCards = useMemo(() => {
+    const responseMap = new Map(
+      (integrationItems || []).map(item => [item?.key, item]),
+    );
+
+    return INTEGRATION_LIST.map(item => {
+      const responseItem = responseMap.get(item.key);
+
+      return {
+        ...item,
+        connected: isConnectedValue(responseItem?.connected),
+      };
+    });
+  }, [integrationItems]);
+
+  const loadIntegrations = useCallback(async () => {
+    if (!providerId) {
+      setLoading(false);
+      return;
+    }
+
+    try {
+      const response = await api.fetch('/marketplace/integrations', {
+        params: {provider_id: providerId},
+      });
+
+      setIntegrationItems(parseIntegrationCollection(response));
+    } catch (error) {
+      showError(formatApiError(error));
+      setIntegrationItems([]);
+    } finally {
+      setLoading(false);
+    }
+  }, [providerId, showError]);
+
+  useFocusEffect(
+    useCallback(() => {
+      setLoading(true);
+      loadIntegrations();
+    }, [loadIntegrations]),
+  );
+
+  const onRefresh = useCallback(async () => {
+    setRefreshing(true);
+    try {
+      await loadIntegrations();
+    } finally {
+      setRefreshing(false);
+    }
+  }, [loadIntegrations]);
+
+  const handleOpenIntegration = useCallback(
+    integration => {
+      if (!integration.route) {
+        showInfo(tt('integrations_text', 'unavailable') || 'Essa integracao ainda nao esta disponivel.');
+        return;
+      }
+
+      navigation.navigate(integration.route, {
+        providerKey: integration.routeParams?.providerKey || integration.key,
+      });
+    },
+    [navigation, showInfo],
+  );
+
+  if (!providerId) {
+    return (
+      <SafeAreaView style={styles.container} edges={['bottom']}>
+        <View style={styles.centerState}>
+          <Icon name="building" size={32} color={integrationColors.iconColor} />
+          <Text style={styles.centerStateTitle}>{tt('integrations_title', 'selectCompany') || 'Selecione uma empresa'}</Text>
+          <Text style={styles.centerStateText}>
+            {tt('integrations_text', 'selectCompany') || 'O hub de integracoes depende da empresa ativa.'}
+          </Text>
+        </View>
+      </SafeAreaView>
+    );
+  }
+
+  if (loading) {
+    return (
+      <SafeAreaView
+        style={[styles.container, {backgroundColor: brandColors.background}]}
+        edges={['bottom']}>
+        <View style={styles.centerState}>
+          <ActivityIndicator size="large" color={brandColors.primary} />
+          <Text style={styles.centerStateTitle}>{tt('integrations_title', 'loading') || 'Carregando integracoes'}</Text>
+          <Text style={styles.centerStateText}>
+            {tt('integrations_text', 'loading') || 'Buscando o status de conexao da empresa ativa.'}
+          </Text>
+        </View>
+      </SafeAreaView>
+    );
+  }
+
+  return (
+    <SafeAreaView
+      style={[styles.container, {backgroundColor: brandColors.background}]}
+      edges={['bottom']}>
+      <ScrollView
+        contentContainerStyle={styles.scroll}
+        showsVerticalScrollIndicator={false}
+        refreshControl={
+          <RefreshControl
+            refreshing={refreshing}
+            onRefresh={onRefresh}
+            tintColor={brandColors.primary}
+          />
+        }>
+        <View style={styles.pageHeader}>
+          <Text style={styles.pageTitle}>{tt('integrations_title', 'integrations') || 'Integracoes'}</Text>
+          <Text style={styles.pageSubtitle}>
+            {tt('integrations_text', 'pageSubtitle') ||
+              'Toque em uma integracao para abrir a configuracao. O status mostra se a empresa ativa ja tem as credenciais necessarias.'}
+          </Text>
+        </View>
+
+        <View style={styles.integrationGrid}>
+          {integrationCards.map(integration => {
+            const connected = Boolean(integration.connected);
+            const statusTone = connected
+              ? (integrationColors.textSuccess || integrationColors.badgeSelectedText)
+              : (integrationColors.textWarning || integrationColors.badgeText);
+            const statusText = connected
+              ? tt('integrations_status', 'connected') || 'Conectado'
+              : tt('integrations_status', 'pending') || 'Pendente';
+            const statusBackgroundColor = connected
+              ? (integrationColors.badgeSelectedBackground || withOpacity(statusTone, 0.12))
+              : (integrationColors.badgeBackground || withOpacity(statusTone, 0.12));
+            const statusBorderColor = connected
+              ? (integrationColors.badgeSelectedBorder || withOpacity(statusTone, 0.22))
+              : (integrationColors.badgeBorder || withOpacity(statusTone, 0.22));
+
+            return (
+              <TouchableOpacity
+                key={integration.key}
+                style={styles.integrationCard}
+                activeOpacity={0.9}
+                onPress={() => handleOpenIntegration(integration)}>
+                <View style={styles.integrationTopRow}>
+                  <View style={styles.integrationHeaderLeft}>
+                    <View style={styles.integrationIconWrap}>
+                      {renderIntegrationIcon(integration, styles, integrationColors.cardIconColor)}
+                    </View>
+                    <Text style={styles.integrationTitle} numberOfLines={1}>
+                      {integration.label}
+                    </Text>
+                  </View>
+
+                  <View
+                    style={[
+                      styles.integrationStatus,
+                      {
+                        backgroundColor: statusBackgroundColor,
+                        borderColor: statusBorderColor,
+                      },
+                    ]}>
+                    <Text
+                      style={[
+                        styles.integrationStatusText,
+                        {color: statusTone},
+                      ]}>
+                      {statusText}
+                    </Text>
+                  </View>
+                </View>
+              </TouchableOpacity>
+            );
+          })}
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+// 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.

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

@@ -0,0 +1,130 @@
+import { Platform, StyleSheet } from 'react-native';
+import { colors } from '@controleonline/../../src/styles/colors';
+import { withOpacity } from '@controleonline/../../src/styles/branding';
+
+const buildCardShadow = palette =>
+  Platform.select({
+    ios: {
+      shadowColor: palette.text,
+      shadowOffset: { width: 0, height: 8 },
+      shadowOpacity: 0.08,
+      shadowRadius: 16,
+    },
+    android: { elevation: 3 },
+    web: { boxShadow: `0 10px 24px ${withOpacity(palette.text, 0.08)}` },
+  });
+
+export const createStyles = (palette = colors) => {
+  const cardShadow = buildCardShadow(palette);
+
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: palette.background,
+    },
+    scroll: {
+      paddingHorizontal: 20,
+      paddingTop: 16,
+      paddingBottom: 32,
+      gap: 18,
+    },
+    centerState: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingHorizontal: 32,
+      gap: 10,
+    },
+    centerStateTitle: {
+      fontSize: 20,
+      fontWeight: '700',
+      color: palette.text,
+      textAlign: 'center',
+    },
+    centerStateText: {
+      fontSize: 14,
+      color: palette.mutedText,
+      textAlign: 'center',
+      lineHeight: 20,
+    },
+    pageHeader: {
+      gap: 6,
+    },
+    pageTitle: {
+      fontSize: 28,
+      fontWeight: '800',
+      color: palette.text,
+      letterSpacing: -0.6,
+    },
+    pageSubtitle: {
+      fontSize: 14,
+      lineHeight: 20,
+      color: palette.mutedText,
+      maxWidth: 760,
+    },
+    integrationGrid: {
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      gap: 12,
+    },
+    integrationCard: {
+      flexGrow: 1,
+      flexBasis: '48%',
+      minWidth: 220,
+      borderRadius: 18,
+      padding: 14,
+      backgroundColor: palette.cardBackground,
+      borderColor: palette.cardBorder,
+      borderWidth: 1,
+      ...cardShadow,
+    },
+    integrationTopRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      gap: 12,
+      marginBottom: 0,
+    },
+    integrationHeaderLeft: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 12,
+      flex: 1,
+      minWidth: 0,
+    },
+    integrationIconWrap: {
+      width: 44,
+      height: 44,
+      borderRadius: 14,
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: palette.cardIconBackground,
+    },
+    integrationLogo: {
+      width: 24,
+      height: 24,
+    },
+    integrationStatus: {
+      borderRadius: 999,
+      paddingHorizontal: 10,
+      paddingVertical: 6,
+      backgroundColor: palette.badgeBackground,
+      borderWidth: 1,
+      borderColor: palette.badgeBorder,
+    },
+    integrationStatusText: {
+      fontSize: 12,
+      fontWeight: '700',
+      color: palette.badgeText,
+    },
+    integrationTitle: {
+      fontSize: 16,
+      fontWeight: '800',
+      color: palette.cardText,
+      flexShrink: 1,
+    },
+  });
+};
+
+const styles = createStyles(colors);
+export default styles;