@controleonline/ui-common 1.2.80 → 1.2.81

package/src/react/pages/IntegrationConfigPage.js

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { ActivityIndicator, Linking, Platform, RefreshControl, ScrollView, Text, TextInput, TouchableOpacity, View } from 'react-native';
+import { ActivityIndicator, 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';
@@ -8,160 +8,43 @@ 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 { getIntegrationConfig, getIntegrationByKey, parseIntegrationCollection } from './integrationsCatalog';
+import IntegrationConfigFields from './IntegrationConfigFields';
 import {
-  resolveThemePalette,
-  withOpacity,
-} from '@controleonline/../../src/styles/branding';
-
-import {
-  getIntegrationConfig,
-  getIntegrationByKey,
-  parseIntegrationCollection,
-} from './integrationsCatalog';
-import DefaultUpload from '@controleonline/ui-default/src/react/components/upload/DefaultUpload';
-import { extractFileId, toFileIri, uploadFileToApi } from '@controleonline/ui-default/src/react/components/upload/fileUpload';
+  ROUTE_PROVIDER_MAP,
+  buildFieldValues,
+  extractAuthorizationUrl,
+  formatApiError,
+  formatUberOAuthError,
+  getConfigFields,
+  isConnectedValue,
+  normalizeTextValue,
+  openAuthorizationUrl,
+  resolveFallbackConfigs,
+  resolveProviderId,
+  routeNameToPath,
+  toConfigRequestValue,
+} from './IntegrationConfigPage.utils';
 import styles from './IntegrationConfigPage.styles';
 
-const ROUTE_PROVIDER_MAP = {
-  UberIntegrationPage: 'uber',
-  AsaasIntegrationPage: 'asaas',
-  ClickSignIntegrationPage: 'clicksign',
-};
-
 const shadowStyle = Platform.select({
-  ios: {
-    shadowColor: '#0F172A',
-    shadowOffset: { width: 0, height: 8 },
-    shadowOpacity: 0.08,
-    shadowRadius: 16,
-  },
+  ios: { shadowColor: '#0F172A', shadowOffset: { width: 0, height: 8 }, shadowOpacity: 0.08, shadowRadius: 16 },
   android: { elevation: 3 },
   web: { boxShadow: '0 10px 24px rgba(15,23,42,0.08)' },
 });
 
-const routeNameToPath = routeName =>
-  String(routeName || '')
-    .replace(/([a-z])([A-Z])/g, '$1-$2')
-    .toLowerCase();
-
-const formatApiError = error => {
-  if (!error) return 'Nao foi possivel carregar a configuracao da integracao.';
-  if (typeof error === 'string') return error;
-  return error?.message || error?.description || error?.errmsg || 'Nao foi possivel carregar a configuracao da integracao.';
-};
-
-const normalizeSourceConfigs = source => {
-  if (Array.isArray(source)) {
-    return source.reduce((accumulator, item) => {
-      const key = String(item?.configKey || '').trim();
-      if (key) {
-        accumulator[key] = item?.configValue;
-      }
-      return accumulator;
-    }, {});
-  }
-
-  if (source && typeof source === 'object') {
-    return source;
-  }
-
-  return {};
-};
-
-const normalizeTextValue = value => {
-  let text = String(value ?? '').trim();
-  // Strip accidental surrounding quotes from double-encoded config values
-  if (
-    (text.startsWith('"') && text.endsWith('"') && text.length >= 2) ||
-    (text.startsWith("'") && text.endsWith("'") && text.length >= 2)
-  ) {
-    text = text.slice(1, -1).trim();
-  }
-  return text;
-};
-
-const isConnectedValue = value =>
-  value === true ||
-  value === 1 ||
-  value === '1' ||
-  String(value).trim().toLowerCase() === 'true';
-
-const toConfigRequestValue = value => {
-  // Plain strings must NOT be JSON.stringify'd here — the HTTP JSON body
-  // already serializes them. Stringify caused values to be stored with
-  // literal surrounding quotes (e.g. ""whsec_...""), breaking webhook auth.
-  if (value === undefined || value === null) {
-    return '';
-  }
-
-  if (typeof value === 'string') {
-    return normalizeTextValue(value);
-  }
-
-  if (typeof value === 'object') {
-    return JSON.stringify(value);
-  }
-
-  return String(value);
-};
-
-
-const getConfigFields = providerConfig => {
-  if (!providerConfig) return [];
-  if (Array.isArray(providerConfig.tabs) && providerConfig.tabs.length > 0) {
-    return providerConfig.tabs.flatMap(tab => tab.fields || []);
-  }
-  return providerConfig.fields || [];
-};
-
-const buildFieldValues = (providerConfig, source) => {
-  const sourceMap = normalizeSourceConfigs(source);
-
-  return getConfigFields(providerConfig).reduce((accumulator, field) => {
-    accumulator[field.key] = normalizeTextValue(sourceMap[field.key]);
-    return accumulator;
-  }, {});
-};
-
-const extractAuthorizationUrl = response => {
-  const candidate =
-    response?.member?.[0]?.authorization_url ||
-    response?.member?.[0]?.auth_url ||
-    response?.member?.[0]?.url ||
-    response?.authorization_url ||
-    response?.auth_url ||
-    response?.url ||
-    response?.data?.authorization_url ||
-    response?.data?.auth_url ||
-    response?.data?.url;
-
-  return normalizeTextValue(candidate);
-};
-
-const formatUberOAuthError = error => {
-  const normalized = normalizeTextValue(error).toLowerCase();
-
-  if (normalized === 'invalid_scope') {
-    return 'O Uber nao liberou o scope pos_provisioning para este app. Esse app precisa estar aprovado/whitelisted no dashboard do Uber.';
-  }
-
-  if (normalized === 'access_denied') {
-    return 'O login do Uber foi cancelado.';
-  }
-
-  return normalizeTextValue(error) || 'Nao foi possivel concluir a conexao com o Uber.';
-};
-
-const openAuthorizationUrl = async authUrl => {
-  if (Platform.OS === 'web' && typeof window !== 'undefined' && typeof window.location?.assign === 'function') {
-    window.location.assign(authUrl);
-    return;
-  }
-
-  await Linking.openURL(authUrl);
-};
-
-export default function IntegrationConfigPage({ route, navigation, embedded = false }) {
+const CenterState = ({ icon, iconColor, title, text, backgroundColor, spinnerColor }) => (
+  <SafeAreaView style={[styles.container, backgroundColor ? { backgroundColor } : null]} edges={['bottom']}>
+    <View style={styles.centerState}>
+      {spinnerColor ? <ActivityIndicator size="large" color={spinnerColor} /> : <Icon name={icon} size={32} color={iconColor} />}
+      <Text style={styles.centerStateTitle}>{title}</Text>
+      <Text style={styles.centerStateText}>{text}</Text>
+    </View>
+  </SafeAreaView>
+);
+
+export default function IntegrationConfigPage({ route, embedded = false }) {
   const peopleStore = useStore('people');
   const themeStore = useStore('theme');
   const configsStore = useStore('configs');
@@ -173,21 +56,13 @@ export default function IntegrationConfigPage({ route, navigation, embedded = fa
   const oauthNoticeRef = useRef('');
 
   const providerKey = useMemo(
-    () =>
-      route?.params?.providerKey ||
-      ROUTE_PROVIDER_MAP[route?.name] ||
-      '',
+    () => route?.params?.providerKey || ROUTE_PROVIDER_MAP[route?.name] || '',
     [route?.name, route?.params?.providerKey],
   );
-  const providerConfig = useMemo(
-    () => getIntegrationConfig(providerKey),
-    [providerKey],
-  );
+  const providerConfig = useMemo(() => getIntegrationConfig(providerKey), [providerKey]);
   const configFields = useMemo(() => getConfigFields(providerConfig), [providerConfig]);
   const fiscalTabs = providerConfig?.tabs || [];
-  const [activeFiscalTab, setActiveFiscalTab] = useState(
-    () => fiscalTabs[0]?.key || 'general',
-  );
+  const [activeFiscalTab, setActiveFiscalTab] = useState(() => fiscalTabs[0]?.key || 'general');
   const activeTabDef = useMemo(
     () => fiscalTabs.find(tab => tab.key === activeFiscalTab) || fiscalTabs[0] || null,
     [activeFiscalTab, fiscalTabs],
@@ -198,82 +73,51 @@ export default function IntegrationConfigPage({ route, navigation, embedded = fa
   );
 
   useEffect(() => {
-    if (fiscalTabs.length && !fiscalTabs.some(tab => tab.key === activeFiscalTab)) {
-      setActiveFiscalTab(fiscalTabs[0].key);
-    }
+    if (fiscalTabs.length && !fiscalTabs.some(tab => tab.key === activeFiscalTab)) setActiveFiscalTab(fiscalTabs[0].key);
   }, [activeFiscalTab, fiscalTabs]);
-  const returnPath = useMemo(() => {
-    const routePath = normalizeTextValue(
-      route?.params?.return_path || route?.params?.returnPath || '',
-    );
-
-    if (routePath) {
-      return routePath.startsWith('/') ? routePath : `/${routePath}`;
-    }
 
-    const normalizedRoutePath = routeNameToPath(route?.name);
-    return normalizedRoutePath ? `/${normalizedRoutePath}` : '/uber-integration-page';
+  const returnPath = useMemo(() => {
+    const routePath = normalizeTextValue(route?.params?.return_path || route?.params?.returnPath || '');
+    if (routePath) return routePath.startsWith('/') ? routePath : `/${routePath}`;
+    const normalized = routeNameToPath(route?.name);
+    return normalized ? `/${normalized}` : '/uber-integration-page';
   }, [route?.name, route?.params?.returnPath, route?.params?.return_path]);
 
   const brandColors = useMemo(
-    () =>
-      resolveThemePalette(
-        {
-          ...themeColors,
-          ...(currentCompany?.theme?.colors || {}),
-        },
-        colors,
-      ),
+    () => resolveThemePalette({ ...themeColors, ...(currentCompany?.theme?.colors || {}) }, colors),
     [themeColors, currentCompany?.id],
   );
-
   const [loading, setLoading] = useState(true);
   const [refreshing, setRefreshing] = useState(false);
   const [authLoading, setAuthLoading] = useState(false);
   const [configValues, setConfigValues] = useState({});
   const [integrationSummary, setIntegrationSummary] = useState(null);
 
-  const providerId = currentCompany?.id;
-  const providerIri = useMemo(
-    () => (providerId ? `/people/${String(providerId).replace(/\D/g, '')}` : ''),
-    [providerId],
+  // Company details can edit a company that is not the globally selected one.
+  // The embedded route id is authoritative for all fiscal reads and writes.
+  const providerId = useMemo(
+    () => resolveProviderId({ route, currentCompany }),
+    [route?.params?.companyId, currentCompany?.id],
   );
-
-  const syncConfigValues = useCallback(
-    source => {
-      if (!providerConfig) {
-        setConfigValues({});
-        return;
-      }
-
-      setConfigValues(buildFieldValues(providerConfig, source));
-    },
-    [providerConfig],
+  const providerIri = useMemo(() => (providerId ? `/people/${providerId}` : ''), [providerId]);
+  const fallbackConfigs = useMemo(
+    () => resolveFallbackConfigs({ providerId, currentCompany }),
+    [providerId, currentCompany?.id, currentCompany?.configs],
   );
 
-  useEffect(() => {
-    syncConfigValues(currentCompany?.configs);
-  }, [currentCompany?.configs, syncConfigValues]);
+  const syncConfigValues = useCallback(source => {
+    setConfigValues(providerConfig ? buildFieldValues(providerConfig, source) : {});
+  }, [providerConfig]);
 
+  useEffect(() => syncConfigValues(fallbackConfigs), [fallbackConfigs, syncConfigValues]);
   useEffect(() => {
     const oauthStatus = normalizeTextValue(route?.params?.oauth_status).toLowerCase();
     const oauthError = normalizeTextValue(route?.params?.oauth_error);
     const oauthKey = `${oauthStatus}|${oauthError}`;
-
-    if (!oauthStatus || oauthNoticeRef.current === oauthKey) {
-      return;
-    }
-
+    if (!oauthStatus || oauthNoticeRef.current === oauthKey) return;
     oauthNoticeRef.current = oauthKey;
-
-    if (oauthStatus === 'success') {
-      showSuccess('Uber conectado com sucesso.');
-      return;
-    }
-
-    if (oauthStatus === 'error') {
-      showError(formatUberOAuthError(oauthError));
-    }
+    if (oauthStatus === 'success') showSuccess('Uber conectado com sucesso.');
+    if (oauthStatus === 'error') showError(formatUberOAuthError(oauthError));
   }, [route?.params?.oauth_error, route?.params?.oauth_status, showError, showSuccess]);
 
   const loadPageData = useCallback(async ({ showLoading = true } = {}) => {
@@ -282,119 +126,61 @@ export default function IntegrationConfigPage({ route, navigation, embedded = fa
       setLoading(false);
       return;
     }
-
-    if (showLoading) {
-      setLoading(true);
-    }
-
+    if (showLoading) setLoading(true);
     try {
-      const integrationPromise = api.fetch('/marketplace/integrations', {
-        params: {
-          provider_id: providerId,
-        },
-      });
-
-      if (configFields.length > 0) {
+      const integrationPromise = api.fetch('/marketplace/integrations', { params: { provider_id: providerId } });
+      if (configFields.length) {
         const [configResponse, integrationResponse] = await Promise.all([
-          api.fetch('/configs', {
-            params: {
-              people: providerIri,
-            },
-          }),
+          api.fetch('/configs', { params: { people: providerIri } }),
           integrationPromise,
         ]);
-
         syncConfigValues(parseIntegrationCollection(configResponse));
-        setIntegrationSummary(
-          getIntegrationByKey(integrationResponse, providerConfig.key),
-        );
-        return;
+        setIntegrationSummary(getIntegrationByKey(integrationResponse, providerConfig.key));
+      } else {
+        setIntegrationSummary(getIntegrationByKey(await integrationPromise, providerConfig.key));
       }
-
-      const integrationResponse = await integrationPromise;
-      setIntegrationSummary(
-        getIntegrationByKey(integrationResponse, providerConfig.key),
-      );
     } catch (error) {
       showError(formatApiError(error));
-      syncConfigValues(currentCompany?.configs);
+      syncConfigValues(fallbackConfigs);
       setIntegrationSummary(null);
     } finally {
-      if (showLoading) {
-        setLoading(false);
-      }
+      if (showLoading) setLoading(false);
     }
-  }, [
-    configFields.length,
-    currentCompany?.configs,
-    providerConfig,
-    providerIri,
-    providerId,
-    showError,
-    syncConfigValues,
-  ]);
-
-  useFocusEffect(
-    useCallback(() => {
-      loadPageData();
-    }, [loadPageData]),
-  );
+  }, [configFields.length, fallbackConfigs, providerConfig, providerIri, providerId, showError, syncConfigValues]);
 
+  useFocusEffect(useCallback(() => { loadPageData(); }, [loadPageData]));
   const onRefresh = useCallback(async () => {
     setRefreshing(true);
-    try {
-      await loadPageData({ showLoading: false });
-    } finally {
-      setRefreshing(false);
-    }
+    try { await loadPageData({ showLoading: false }); } finally { setRefreshing(false); }
   }, [loadPageData]);
-
   const updateField = useCallback((fieldKey, value) => {
-    setConfigValues(currentValues => ({
-      ...currentValues,
-      [fieldKey]: value,
-    }));
+    setConfigValues(current => ({ ...current, [fieldKey]: value }));
   }, []);
 
   const handleOAuthConnect = useCallback(async () => {
-    if (!providerIri || !providerConfig || !providerConfig.oauthConnect) {
+    if (!providerIri || !providerConfig?.oauthConnect) {
       showError('Nao foi possivel identificar a integracao selecionada.');
       return;
     }
-
     setAuthLoading(true);
     try {
       const response = await api.fetch(providerConfig.authorizationEndpoint, {
-        method: 'POST',
-        body: {
-          provider_id: providerId,
-          return_path: returnPath,
-        },
+        method: 'POST', body: { provider_id: providerId, return_path: returnPath },
       });
-
       const authUrl = extractAuthorizationUrl(response);
-      if (!authUrl) {
-        showError('Nao foi possivel iniciar o login do Uber.');
-        return;
-      }
-
+      if (!authUrl) return showError('Nao foi possivel iniciar o login do Uber.');
       await openAuthorizationUrl(authUrl);
       showSuccess('Abrindo login do Uber.');
     } catch (error) {
       showError(error?.message || 'Nao foi possivel iniciar o login do Uber.');
-    } finally {
-      setAuthLoading(false);
-    }
+    } finally { setAuthLoading(false); }
   }, [providerConfig, providerId, providerIri, returnPath, showError, showSuccess]);
 
   const requiredKeys = providerConfig?.requiredKeys || [];
   const connected = integrationSummary && typeof integrationSummary.connected !== 'undefined'
     ? isConnectedValue(integrationSummary.connected)
-    : requiredKeys.length > 0
-      ? requiredKeys.every(fieldKey => normalizeTextValue(configValues[fieldKey]) !== '')
-      : false;
+    : requiredKeys.length > 0 && requiredKeys.every(key => normalizeTextValue(configValues[key]) !== '');
   const statusTone = connected ? '#16A34A' : '#e67e22';
-  const statusText = connected ? 'Conectado' : 'Pendente';
   const editable = Boolean(providerIri && providerConfig && !isSaving && !loading && !providerConfig.oauthConnect);
   const actionLoading = providerConfig?.oauthConnect ? authLoading : isSaving;
   const actionDisabled = providerConfig?.oauthConnect ? authLoading || loading : !editable;
@@ -404,337 +190,82 @@ export default function IntegrationConfigPage({ route, navigation, embedded = fa
       showError('Nao foi possivel identificar a integracao selecionada.');
       return;
     }
-
     const configs = configFields.map(field => ({
       configKey: field.key,
       configValue: toConfigRequestValue(normalizeTextValue(configValues[field.key])),
     }));
-
     try {
-      await configActions.addManyConfigs({
-        configs,
-        people: providerIri,
-        module: 4,
-        visibility: 'public',
-      });
-
+      await configActions.addManyConfigs({ configs, people: providerIri, module: 4, visibility: 'public' });
       showSuccess(`${providerConfig.label} salvo com sucesso.`);
       await loadPageData({ showLoading: false });
-    } catch (error) {
-      showError(error?.message || 'Nao foi possivel salvar a integracao.');
-    }
-  }, [
-    configActions,
-    configFields,
-    configValues,
-    loadPageData,
-    providerConfig,
-    providerIri,
-    showError,
-    showSuccess,
-  ]);
+    } catch (error) { showError(error?.message || 'Nao foi possivel salvar a integracao.'); }
+  }, [configActions, configFields, configValues, loadPageData, providerConfig, providerIri, showError, showSuccess]);
 
-  if (!providerConfig) {
-    return (
-      <SafeAreaView style={styles.container} edges={['bottom']}>
-        <View style={styles.centerState}>
-          <Icon name="alert-triangle" size={32} color="#e67e22" />
-          <Text style={styles.centerStateTitle}>Integracao indisponivel</Text>
-          <Text style={styles.centerStateText}>
-            A tela solicitada nao possui configuracao cadastrada.
-          </Text>
-        </View>
-      </SafeAreaView>
-    );
-  }
-
-  if (!providerId) {
-    return (
-      <SafeAreaView style={styles.container} edges={['bottom']}>
-        <View style={styles.centerState}>
-          <Icon name="building" size={32} color="#94A3B8" />
-          <Text style={styles.centerStateTitle}>Selecione uma empresa</Text>
-          <Text style={styles.centerStateText}>
-            A configuracao da integracao 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={providerConfig.accent} />
-          <Text style={styles.centerStateTitle}>Carregando integracao</Text>
-          <Text style={styles.centerStateText}>
-            Buscando as credenciais salvas para a empresa ativa.
-          </Text>
-        </View>
-      </SafeAreaView>
-    );
-  }
+  if (!providerConfig) return <CenterState icon="alert-triangle" iconColor="#e67e22" title="Integracao indisponivel" text="A tela solicitada nao possui configuracao cadastrada." />;
+  if (!providerId) return <CenterState icon="building" iconColor="#94A3B8" title="Selecione uma empresa" text="A configuracao da integracao depende da empresa ativa." />;
+  if (loading) return <CenterState backgroundColor={brandColors.background} spinnerColor={providerConfig.accent} title="Carregando integracao" text="Buscando as credenciais salvas para a empresa ativa." />;
 
   return (
     <SafeAreaView style={[styles.container, { backgroundColor: brandColors.background }]} edges={['bottom']}>
-      <ScrollView
-        contentContainerStyle={styles.scroll}
-        showsVerticalScrollIndicator={false}
-        refreshControl={
-          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} tintColor={providerConfig.accent} />
-        }>
+      <ScrollView contentContainerStyle={styles.scroll} showsVerticalScrollIndicator={false}
+        refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} tintColor={providerConfig.accent} />}>
         {!embedded ? (
-        <View style={[styles.heroCard, shadowStyle, { backgroundColor: providerConfig.accent }]}>
-          <View style={styles.heroCopy}>
-            <Text style={styles.heroEyebrow}>INTEGRACAO</Text>
-            <Text style={styles.heroTitle}>{providerConfig.label}</Text>
-            <Text style={styles.heroText}>
-              {providerConfig.description}
-            </Text>
-          </View>
-          <View style={styles.heroBadge}>
-            <Icon name={providerConfig.icon} size={22} color={providerConfig.accent} />
-          </View>
-        </View>
-        ) : (
-          <View style={[styles.embeddedHeader, shadowStyle]}>
-            <Text style={styles.embeddedTitle}>Configuracoes fiscais</Text>
+          <View style={[styles.heroCard, shadowStyle, { backgroundColor: providerConfig.accent }]}>
+            <View style={styles.heroCopy}>
+              <Text style={styles.heroEyebrow}>INTEGRACAO</Text>
+              <Text style={styles.heroTitle}>{providerConfig.label}</Text>
+              <Text style={styles.heroText}>{providerConfig.description}</Text>
+            </View>
+            <View style={styles.heroBadge}><Icon name={providerConfig.icon} size={22} color={providerConfig.accent} /></View>
           </View>
-        )}
+        ) : <View style={[styles.embeddedHeader, shadowStyle]}><Text style={styles.embeddedTitle}>Configuracoes fiscais</Text></View>}
 
         {!embedded ? (
-        <View style={[styles.statusCard, shadowStyle]}>
-          <View style={styles.statusHeader}>
-            <View style={styles.statusCopy}>
-              <Text style={styles.sectionTitle}>Status</Text>
-              <Text style={styles.sectionSubtitle}>
-                {providerConfig.oauthConnect
+          <View style={[styles.statusCard, shadowStyle]}>
+            <View style={styles.statusHeader}>
+              <View style={styles.statusCopy}>
+                <Text style={styles.sectionTitle}>Status</Text>
+                <Text style={styles.sectionSubtitle}>{providerConfig.oauthConnect
                   ? 'A integracao fica conectada quando o login do Uber termina e o store e salvo automaticamente.'
-                  : 'A integracao so aparece como conectada quando todos os campos obrigatorios foram salvos na empresa ativa.'}
-              </Text>
-            </View>
-
-            <View
-              style={[
-                styles.statusBadge,
-                { backgroundColor: withOpacity(statusTone, 0.12) },
-              ]}>
-              <Text style={[styles.statusBadgeText, { color: statusTone }]}>
-                {statusText}
-              </Text>
+                  : 'A integracao so aparece como conectada quando todos os campos obrigatorios foram salvos na empresa ativa.'}</Text>
+              </View>
+              <View style={[styles.statusBadge, { backgroundColor: withOpacity(statusTone, 0.12) }]}>
+                <Text style={[styles.statusBadgeText, { color: statusTone }]}>{connected ? 'Conectado' : 'Pendente'}</Text>
+              </View>
             </View>
           </View>
-        </View>
         ) : null}
 
         <View style={[styles.formCard, shadowStyle]}>
-          <Text style={styles.cardTitle}>
-            {providerConfig.oauthConnect
-              ? 'Conexao'
-              : fiscalTabs.length
-                ? (activeTabDef?.label || 'Configuracoes')
-                : 'Credenciais'}
-          </Text>
-          {!embedded ? (
-            <Text style={styles.cardSubtitle}>
-              {providerConfig.oauthConnect
-                ? 'Use o login oficial do Uber. A store sera localizada e gravada automaticamente na empresa ativa.'
-                : 'Salve as credenciais na empresa ativa. O hub de integracoes volta a mostrar o status correto quando voce retornar para a lista.'}
-            </Text>
-          ) : null}
+          <Text style={styles.cardTitle}>{providerConfig.oauthConnect ? 'Conexao' : fiscalTabs.length ? activeTabDef?.label || 'Configuracoes' : 'Credenciais'}</Text>
+          {!embedded ? <Text style={styles.cardSubtitle}>{providerConfig.oauthConnect
+            ? 'Use o login oficial do Uber. A store sera localizada e gravada automaticamente na empresa ativa.'
+            : 'Salve as credenciais na empresa ativa. O hub de integracoes volta a mostrar o status correto quando voce retornar para a lista.'}</Text> : null}
 
           {providerConfig.oauthConnect ? (
-            <View style={styles.fieldList}>
-              <View style={styles.fieldGroup}>
-                <Text style={styles.fieldLabel}>Uber OAuth</Text>
-                <Text style={styles.fieldKey}>
-                  Nao ha campos manuais. O login autoriza o app e salva o store automaticamente.
-                </Text>
-              </View>
-            </View>
+            <View style={styles.fieldList}><View style={styles.fieldGroup}>
+              <Text style={styles.fieldLabel}>Uber OAuth</Text>
+              <Text style={styles.fieldKey}>Nao ha campos manuais. O login autoriza o app e salva o store automaticamente.</Text>
+            </View></View>
           ) : (
             <View style={styles.fieldList}>
-              {fiscalTabs.length > 0 ? (
-                <View style={styles.subTabRow}>
-                  {fiscalTabs.map(tab => {
-                    const selected = tab.key === (activeTabDef?.key || activeFiscalTab);
-                    return (
-                      <TouchableOpacity
-                        key={tab.key}
-                        style={[styles.subTabButton, selected && styles.subTabButtonActive]}
-                        activeOpacity={0.85}
-                        onPress={() => setActiveFiscalTab(tab.key)}>
-                        <Text
-                          style={[
-                            styles.subTabLabel,
-                            selected && styles.subTabLabelActive,
-                          ]}>
-                          {tab.label}
-                        </Text>
-                      </TouchableOpacity>
-                    );
-                  })}
-                </View>
-              ) : null}
-              {activeTabDef?.description ? (
-                <Text style={styles.tabDescription}>{activeTabDef.description}</Text>
-              ) : null}
-              {visibleFields.map(field => (
-                <View key={field.key} style={styles.fieldGroup}>
-                  <Text style={styles.fieldLabel}>{field.label}</Text>
-                  {!embedded ? <Text style={styles.fieldKey}>{field.key}</Text> : null}
-                  {field.type === 'select' ? (
-                    <View style={styles.selectList}>
-                      {(field.options || []).map(option => {
-                        const selected = String(configValues[field.key] || '') === String(option.value);
-                        return (
-                          <TouchableOpacity
-                            key={String(option.value)}
-                            style={[
-                              styles.selectOption,
-                              selected && styles.selectOptionActive,
-                              !editable && styles.inputDisabled,
-                            ]}
-                            disabled={!editable}
-                            activeOpacity={0.85}
-                            onPress={() => updateField(field.key, String(option.value))}>
-                            <Text
-                              style={[
-                                styles.selectOptionText,
-                                selected && styles.selectOptionTextActive,
-                              ]}>
-                              {option.label}
-                            </Text>
-                          </TouchableOpacity>
-                        );
-                      })}
-                    </View>
-                  ) : field.type === 'file' ? (
-                    <View style={styles.fileFieldWrap}>
-                      {configValues[field.key] ? (
-                        <Text style={styles.fieldHint}>
-                          Arquivo vinculado (id: {String(configValues[field.key]).replace(/\D/g, '') || configValues[field.key]})
-                        </Text>
-                      ) : (
-                        <Text style={styles.fieldHint}>Nenhum certificado vinculado.</Text>
-                      )}
-                      <DefaultUpload
-                        relationStoreName="people"
-                        relationField="people"
-                        relationResource="people"
-                        entityId={providerId}
-                        companyId={providerId}
-                        context={field.fileContext || 'company_certificate'}
-                        libraryContexts={[field.fileContext || 'company_certificate']}
-                        acceptedTypes={field.accept || '.pfx,.p12,application/x-pkcs12'}
-                        fileType=""
-                        fileTypeLabel="certificado"
-                        title={field.label}
-                        triggerLabel="Gerenciar certificado"
-                        managerTitle="Gerenciador de arquivos"
-                        searchPlaceholder="Buscar certificado"
-                        uploadButtonLabel="Enviar certificado"
-                        emptyAttachmentLabel="Nenhum certificado anexado."
-                        emptyLibraryLabel="Nenhum arquivo encontrado."
-                        uploadSuccessMessage="Certificado enviado."
-                        attachSuccessMessage="Certificado vinculado."
-                        removeSuccessMessage="Certificado removido."
-                        showInlineContent={false}
-                        uploadResultAlreadyAttached
-                        requireEntity={false}
-                        onUploadFile={async ({ file, companyId, context, entityId }) => {
-                          const uploaded = await uploadFileToApi({
-                            file,
-                            context: context || field.fileContext || 'company_certificate',
-                            peopleId: companyId || providerId,
-                            entityId: entityId || providerId,
-                          });
-                          const id = extractFileId(uploaded);
-                          const iri = toFileIri(uploaded);
-                          const value = id ? String(id) : iri || '';
-                          if (!value) {
-                            throw new Error('Upload sem identificador de arquivo.');
-                          }
-                          updateField(field.key, value);
-                          return uploaded;
-                        }}
-                        onAttachFile={async fileObj => {
-                          const id = extractFileId(fileObj);
-                          const iri = toFileIri(fileObj);
-                          const value = id ? String(id) : iri || '';
-                          if (!value) {
-                            throw new Error('Arquivo sem identificador.');
-                          }
-                          updateField(field.key, value);
-                          return fileObj;
-                        }}
-                        onRemoveAttachment={async () => {
-                          updateField(field.key, '');
-                          return true;
-                        }}
-                        renderTrigger={({ openManager, uploading }) => (
-                          <TouchableOpacity
-                            style={[
-                              styles.filePickerButton,
-                              !editable && styles.inputDisabled,
-                            ]}
-                            disabled={!editable || uploading}
-                            activeOpacity={0.85}
-                            onPress={openManager}>
-                            {uploading ? (
-                              <ActivityIndicator color="#166534" />
-                            ) : (
-                              <Icon name="folder" size={16} color="#166534" />
-                            )}
-                            <Text style={styles.filePickerButtonText}>
-                              {configValues[field.key]
-                                ? 'Trocar certificado (gerenciador)'
-                                : 'Selecionar / enviar certificado'}
-                            </Text>
-                          </TouchableOpacity>
-                        )}
-                      />
-                    </View>
-                  ) : (
-                    <TextInput
-                      style={[
-                        styles.input,
-                        !editable && styles.inputDisabled,
-                      ]}
-                      value={configValues[field.key] || ''}
-                      onChangeText={value => updateField(field.key, value)}
-                      editable={editable}
-                      autoCapitalize="none"
-                      autoCorrect={false}
-                      secureTextEntry={Boolean(field.secureTextEntry)}
-                      placeholder={field.placeholder}
-                    />
-                  )}
-                </View>
-              ))}
+              {fiscalTabs.length ? <View style={styles.subTabRow}>{fiscalTabs.map(tab => {
+                const selected = tab.key === (activeTabDef?.key || activeFiscalTab);
+                return <TouchableOpacity key={tab.key} style={[styles.subTabButton, selected && styles.subTabButtonActive]}
+                  activeOpacity={0.85} onPress={() => setActiveFiscalTab(tab.key)}>
+                  <Text style={[styles.subTabLabel, selected && styles.subTabLabelActive]}>{tab.label}</Text>
+                </TouchableOpacity>;
+              })}</View> : null}
+              {activeTabDef?.description ? <Text style={styles.tabDescription}>{activeTabDef.description}</Text> : null}
+              <IntegrationConfigFields fields={visibleFields} configValues={configValues} editable={editable}
+                embedded={embedded} providerId={providerId} updateField={updateField} />
             </View>
           )}
 
-          <TouchableOpacity
-            style={[
-              styles.saveButton,
-              { backgroundColor: providerConfig.accent },
-              actionDisabled && styles.saveButtonDisabled,
-            ]}
-            disabled={actionDisabled}
-            activeOpacity={0.9}
-            onPress={providerConfig.oauthConnect ? handleOAuthConnect : saveIntegration}>
-            {actionLoading ? (
-              <ActivityIndicator color="#FFFFFF" />
-            ) : (
-              <Icon name={providerConfig.oauthConnect ? 'log-in' : 'save'} size={16} color="#FFFFFF" />
-            )}
-            <Text style={styles.saveButtonText}>
-              {providerConfig.oauthConnect
-                ? providerConfig.connectLabel || 'Conectar'
-                : providerConfig.saveLabel}
-            </Text>
+          <TouchableOpacity style={[styles.saveButton, { backgroundColor: providerConfig.accent }, actionDisabled && styles.saveButtonDisabled]}
+            disabled={actionDisabled} activeOpacity={0.9} onPress={providerConfig.oauthConnect ? handleOAuthConnect : saveIntegration}>
+            {actionLoading ? <ActivityIndicator color="#FFFFFF" /> : <Icon name={providerConfig.oauthConnect ? 'log-in' : 'save'} size={16} color="#FFFFFF" />}
+            <Text style={styles.saveButtonText}>{providerConfig.oauthConnect ? providerConfig.connectLabel || 'Conectar' : providerConfig.saveLabel}</Text>
           </TouchableOpacity>
         </View>
       </ScrollView>