Refine integration status display

Integrate connection status into the "Integration" section header to accurately reflect the campaign's connection method, avoiding redundant "not connected to plugin" messages when another integration is active.

Author: lovable-dev[bot]

src/components/CampaignIntegrationSettings.tsx

@@ -1,31 +1,92 @@
 
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { Campaign } from '@/types';
 import { useAuth } from '@/hooks/useAuth';
 import { IntegrationTypeSelector } from './campaign-integration/IntegrationTypeSelector';
 import { CodeIntegration } from './campaign-integration/CodeIntegration';
 import { PluginIntegration } from './campaign-integration/PluginIntegration';
-import { IntegrationStatusCard } from './campaign-integration/IntegrationStatusCard';
 import { TabsContent } from '@/components/ui/tabs';
+import { collection, query, where, getDocs } from 'firebase/firestore';
+import { db } from '@/lib/firebase';
+
+interface IntegrationStatus {
+  hasCodeIntegration: boolean;
+  hasPluginIntegration: boolean;
+  pluginConfigs: Array<{
+    id: string;
+    type: 'wordpress' | 'shopify';
+    domain: string;
+    active: boolean;
+  }>;
+  activeIntegrationType: 'code' | 'plugin';
+}
 
 interface CampaignIntegrationSettingsProps {
   campaign: Campaign;
+  onIntegrationStatusChange?: (status: IntegrationStatus) => void;
 }
 
-export const CampaignIntegrationSettings = ({ campaign }: CampaignIntegrationSettingsProps) => {
+export const CampaignIntegrationSettings = ({ campaign, onIntegrationStatusChange }: CampaignIntegrationSettingsProps) => {
   const { user } = useAuth();
   const [integrationType, setIntegrationType] = useState<'code' | 'plugin'>('code');
+  const [integrationStatus, setIntegrationStatus] = useState<IntegrationStatus>({
+    hasCodeIntegration: true,
+    hasPluginIntegration: false,
+    pluginConfigs: [],
+    activeIntegrationType: 'code'
+  });
+
+  useEffect(() => {
+    const loadIntegrationStatus = async () => {
+      try {
+        const pluginQuery = query(
+          collection(db, 'plugin_configs'),
+          where('campaignId', '==', campaign.id)
+        );
+        
+        const pluginSnapshot = await getDocs(pluginQuery);
+        const plugins = pluginSnapshot.docs.map(doc => ({
+          id: doc.id,
+          ...doc.data()
+        })) as Array<{
+          id: string;
+          type: 'wordpress' | 'shopify';
+          domain: string;
+          active: boolean;
+        }>;
+
+        const newStatus: IntegrationStatus = {
+          hasCodeIntegration: true,
+          hasPluginIntegration: plugins.length > 0,
+          pluginConfigs: plugins,
+          activeIntegrationType: integrationType
+        };
+        
+        setIntegrationStatus(newStatus);
+        onIntegrationStatusChange?.(newStatus);
+      } catch (error) {
+        console.error('Erreur lors du chargement du statut:', error);
+      }
+    };
+
+    loadIntegrationStatus();
+  }, [campaign.id, integrationType, onIntegrationStatusChange]);
+
+  const handleTypeChange = (type: 'code' | 'plugin') => {
+    setIntegrationType(type);
+    const updatedStatus = {
+      ...integrationStatus,
+      activeIntegrationType: type
+    };
+    setIntegrationStatus(updatedStatus);
+    onIntegrationStatusChange?.(updatedStatus);
+  };
 
   return (
     <div className="space-y-6">
-      <IntegrationStatusCard 
-        campaignId={campaign.id}
-        activeIntegrationType={integrationType}
-      />
-      
       <IntegrationTypeSelector 
         activeType={integrationType} 
-        onTypeChange={setIntegrationType}
+        onTypeChange={handleTypeChange}
       >
         <TabsContent value="code">
           <CodeIntegration campaign={campaign} />

src/components/CampaignSettingsDialog.tsx

@@ -1,4 +1,5 @@
 
+import { useState } from 'react';
 import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
 import { Settings } from 'lucide-react';
@@ -9,11 +10,25 @@ import { CampaignSettingsHeader } from '@/components/campaign-settings/CampaignS
 import { CampaignSettingsTabContent } from '@/components/campaign-settings/CampaignSettingsTabContent';
 import { useCampaignSettingsDialog } from '@/hooks/useCampaignSettingsDialog';
 
+interface IntegrationStatus {
+  hasCodeIntegration: boolean;
+  hasPluginIntegration: boolean;
+  pluginConfigs: Array<{
+    id: string;
+    type: 'wordpress' | 'shopify';
+    domain: string;
+    active: boolean;
+  }>;
+  activeIntegrationType: 'code' | 'plugin';
+}
+
 interface CampaignSettingsDialogProps {
   campaign: Campaign;
 }
 
 export const CampaignSettingsDialog = ({ campaign }: CampaignSettingsDialogProps) => {
+  const [integrationStatus, setIntegrationStatus] = useState<IntegrationStatus | undefined>();
+  
   const {
     open,
     setOpen,
@@ -31,6 +46,10 @@ export const CampaignSettingsDialog = ({ campaign }: CampaignSettingsDialogProps
     handlePaymentMethodChange,
   } = useCampaignSettingsDialog(campaign);
 
+  const handleIntegrationStatusChange = (status: IntegrationStatus) => {
+    setIntegrationStatus(status);
+  };
+
   return (
     <>
       <Dialog open={open} onOpenChange={setOpen}>
@@ -53,7 +72,10 @@ export const CampaignSettingsDialog = ({ campaign }: CampaignSettingsDialogProps
             {/* CONTENU DROITE - FLEX */}
             <div className="flex-1 h-full flex flex-col min-w-0 overflow-hidden">
               <div className="flex-shrink-0">
-                <CampaignSettingsHeader activeTab={activeTab} />
+                <CampaignSettingsHeader 
+                  activeTab={activeTab} 
+                  integrationStatus={integrationStatus}
+                />
               </div>
 
               <div className="flex-1 overflow-auto min-w-0 w-full max-w-full">
@@ -70,6 +92,7 @@ export const CampaignSettingsDialog = ({ campaign }: CampaignSettingsDialogProps
                       onCancel={() => setOpen(false)}
                       onDeleteClick={handleDeleteClick}
                       onPaymentMethodChange={handlePaymentMethodChange}
+                      onIntegrationStatusChange={handleIntegrationStatusChange}
                     />
                   </div>
                 </div>