feat: Require campaign before Shopify connection

The user needs to create a campaign before connecting a Shopify store. The Shopify app should then prompt the user to select which campaign to connect to.

Author: lovable-dev[bot]

src/components/ShopifyIntegrationDialog.tsx

@@ -9,9 +9,11 @@ import {
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { ShoppingBag, ArrowRight } from 'lucide-react';
 import { ShopifyPrivateAppDialog } from '@/components/ShopifyPrivateAppDialog';
-import { supabase } from '@/integrations/supabase/client';
+import { useAuth } from '@/contexts/AuthContext';
+import { useCampaignData } from '@/hooks/useCampaignData';
 import { toast } from '@/hooks/use-toast';
 
 interface ShopifyIntegrationDialogProps {
@@ -28,65 +30,36 @@ export const ShopifyIntegrationDialog: React.FC<ShopifyIntegrationDialogProps> =
   isLoading
 }) => {
   const [shopName, setShopName] = useState('');
+  const [selectedCampaignId, setSelectedCampaignId] = useState('');
   const [showPrivateAppDialog, setShowPrivateAppDialog] = useState(false);
+  
+  // Récupération des campagnes de l'utilisateur
+  const { user, loading: authLoading } = useAuth();
+  const { campaigns, loading: campaignsLoading } = useCampaignData(user?.uid || null, authLoading);
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
-    if (shopName.trim()) {
+    if (shopName.trim() && selectedCampaignId) {
       setShowPrivateAppDialog(true);
+    } else if (!selectedCampaignId) {
+      toast({
+        title: "Campagne requise",
+        description: "Veuillez sélectionner une campagne avant de continuer",
+        variant: "destructive"
+      });
     }
   };
 
   const handleClose = () => {
     if (!isLoading) {
       setShopName('');
+      setSelectedCampaignId('');
       onOpenChange(false);
     }
   };
 
-  const handleConnect = async (accessToken: string, shopDomain: string) => {
-    // Sauvegarder l'intégration via l'edge function
-    try {
-      const { data: { user } } = await supabase.auth.getUser();
-      if (!user) {
-        toast({
-          title: "Erreur",
-          description: "Vous devez être connecté",
-          variant: "destructive"
-        });
-        return;
-      }
-
-      const response = await supabase.functions.invoke('shopify-private-app', {
-        body: {
-          shopDomain,
-          accessToken,
-          campaignId: 'test-campaign-123', // TODO: récupérer le vrai campaign ID
-          userId: user.id
-        }
-      });
-
-      if (response.error) {
-        throw new Error(response.error.message);
-      }
-
-      toast({
-        title: "Shopify connecté !",
-        description: `Boutique ${response.data.shopInfo.name} connectée avec succès`,
-      });
-
-      setShowPrivateAppDialog(false);
-      handleClose();
-      
-    } catch (error) {
-      console.error('Erreur connexion Shopify:', error);
-      toast({
-        title: "Erreur",
-        description: error instanceof Error ? error.message : "Erreur lors de la connexion",
-        variant: "destructive"
-      });
-    }
-  };
+  // Vérification si aucune campagne disponible
+  const noCampaignsAvailable = !campaignsLoading && campaigns.length === 0;
 
   return (
     <>
@@ -106,22 +79,54 @@ export const ShopifyIntegrationDialog: React.FC<ShopifyIntegrationDialogProps> =
             </div>
           </DialogHeader>
 
-          <form onSubmit={handleSubmit} className="space-y-4">
-            <div className="space-y-2">
-              <Label htmlFor="shopName">Nom de votre boutique Shopify</Label>
-              <Input
-                id="shopName"
-                type="text"
-                placeholder="ma-boutique"
-                value={shopName}
-                onChange={(e) => setShopName(e.target.value)}
-                disabled={isLoading}
-                className="w-full"
-              />
-              <p className="text-xs text-muted-foreground">
-                Entrez uniquement le nom de votre boutique (sans .myshopify.com)
-              </p>
+          {noCampaignsAvailable ? (
+            <div className="text-center py-6 space-y-4">
+              <div className="p-3 bg-orange-100 rounded-lg">
+                <h4 className="font-medium text-orange-900 mb-2">Aucune campagne disponible</h4>
+                <p className="text-sm text-orange-800">
+                  Vous devez créer au moins une campagne avec un moyen de paiement configuré avant de pouvoir connecter Shopify.
+                </p>
+              </div>
+              <Button variant="outline" onClick={handleClose}>
+                Fermer
+              </Button>
             </div>
+          ) : (
+            <form onSubmit={handleSubmit} className="space-y-4">
+              <div className="space-y-2">
+                <Label htmlFor="campaign">Campagne à connecter</Label>
+                <Select value={selectedCampaignId} onValueChange={setSelectedCampaignId}>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Sélectionnez une campagne" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {campaigns.map((campaign) => (
+                      <SelectItem key={campaign.id} value={campaign.id}>
+                        {campaign.name}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <p className="text-xs text-muted-foreground">
+                  Cette boutique Shopify sera liée à la campagne sélectionnée
+                </p>
+              </div>
+              
+              <div className="space-y-2">
+                <Label htmlFor="shopName">Nom de votre boutique Shopify</Label>
+                <Input
+                  id="shopName"
+                  type="text"
+                  placeholder="ma-boutique"
+                  value={shopName}
+                  onChange={(e) => setShopName(e.target.value)}
+                  disabled={isLoading || campaignsLoading}
+                  className="w-full"
+                />
+                <p className="text-xs text-muted-foreground">
+                  Entrez uniquement le nom de votre boutique (sans .myshopify.com)
+                </p>
+              </div>
 
             <div className="bg-green-50 p-4 rounded-lg space-y-2">
               <h4 className="font-medium text-green-900">Nouvelle méthode simplifiée !</h4>
@@ -133,32 +138,34 @@ export const ShopifyIntegrationDialog: React.FC<ShopifyIntegrationDialogProps> =
               </ul>
             </div>
 
-            <div className="flex justify-between">
-              <Button
-                type="button"
-                variant="outline"
-                onClick={handleClose}
-                disabled={isLoading}
-              >
-                Annuler
-              </Button>
-              <Button
-                type="submit"
-                disabled={!shopName.trim() || isLoading}
-                className="flex items-center space-x-2"
-              >
-                <ArrowRight className="h-4 w-4" />
-                <span>Continuer</span>
-              </Button>
-            </div>
-          </form>
+              <div className="flex justify-between">
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={handleClose}
+                  disabled={isLoading || campaignsLoading}
+                >
+                  Annuler
+                </Button>
+                <Button
+                  type="submit"
+                  disabled={!shopName.trim() || !selectedCampaignId || isLoading || campaignsLoading}
+                  className="flex items-center space-x-2"
+                >
+                  <ArrowRight className="h-4 w-4" />
+                  <span>Continuer</span>
+                </Button>
+              </div>
+            </form>
+          )}
         </DialogContent>
       </Dialog>
 
       <ShopifyPrivateAppDialog
         open={showPrivateAppDialog}
         onOpenChange={setShowPrivateAppDialog}
         shopName={shopName}
+        campaignId={selectedCampaignId}
         onSuccess={() => {
           toast({
             title: "Configuration terminée !",

src/components/ShopifyPrivateAppDialog.tsx

@@ -12,13 +12,15 @@ interface ShopifyPrivateAppDialogProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
   shopName: string;
-  onSuccess: () => void; // Changé de onConnect vers onSuccess
+  campaignId: string;
+  onSuccess: () => void;
 }
 
 export const ShopifyPrivateAppDialog = ({ 
   open, 
   onOpenChange, 
   shopName,
+  campaignId,
   onSuccess 
 }: ShopifyPrivateAppDialogProps) => {
   const [accessToken, setAccessToken] = useState('');
@@ -69,7 +71,7 @@ export const ShopifyPrivateAppDialog = ({
         body: {
           shopDomain,
           accessToken: accessToken.trim(),
-          campaignId: 'test-campaign-123', // TODO: récupérer le vrai campaign ID
+          campaignId,
           userId: user.id
         }
       });

src/components/ShopifyTestComponent.tsx

@@ -18,7 +18,7 @@ export const ShopifyTestComponent: React.FC<ShopifyTestComponentProps> = ({ camp
     fetchIntegrations, 
     initiateShopifyInstall, 
     removeIntegration 
-  } = useShopifySupabase(campaignId);
+  } = useShopifySupabase();
 
   const [showDialog, setShowDialog] = useState(false);
 

src/hooks/useShopifySupabase.ts

@@ -23,20 +23,19 @@ export interface ShopifyIntegration {
   created_at: string;
 }
 
-export const useShopifySupabase = (campaignId: string) => {
+export const useShopifySupabase = () => {
   const [integrations, setIntegrations] = useState<ShopifyIntegration[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const { user } = useAuth();
 
-  // Récupérer les intégrations existantes
+  // Récupérer les intégrations existantes pour un utilisateur
   const fetchIntegrations = useCallback(async () => {
     try {
       if (!user) throw new Error('Utilisateur non connecté');
 
       const { data, error } = await supabase
         .from('shopify_integrations')
         .select('*')
-        .eq('campaign_id', campaignId)
         .eq('user_id', user.uid)
         .eq('active', true)
         .order('created_at', { ascending: false });
@@ -62,66 +61,12 @@ export const useShopifySupabase = (campaignId: string) => {
         variant: "destructive"
       });
     }
-  }, [campaignId, user]);
+  }, [user]);
 
-  // Initier l'installation Shopify
+  // Initier l'installation Shopify (supprimé car maintenant géré par ShopifyPrivateAppDialog)
   const initiateShopifyInstall = useCallback(async (shopName: string) => {
-    if (!shopName.trim()) {
-      toast({
-        title: "Erreur",
-        description: "Veuillez entrer le nom de votre boutique Shopify",
-        variant: "destructive"
-      });
-      return;
-    }
-
-    setIsLoading(true);
-
-    try {
-      if (!user) throw new Error('Utilisateur non connecté');
-
-      // Appeler l'Edge Function pour générer l'URL d'autorisation
-      const { data, error } = await supabase.functions.invoke('shopify-auth', {
-        body: {
-          shop: shopName.includes('.myshopify.com') ? shopName : `${shopName}.myshopify.com`,
-          campaignId,
-          userId: user.uid
-        }
-      });
-
-      if (error) throw error;
-      
-      if (!data?.authUrl) {
-        throw new Error('URL d\'autorisation non reçue');
-      }
-
-      // Rediriger vers Shopify dans une nouvelle fenêtre
-      const popup = window.open(data.authUrl, 'shopify-auth', 'width=600,height=700,scrollbars=yes,resizable=yes');
-      
-      if (!popup) {
-        throw new Error('Le popup a été bloqué. Veuillez autoriser les popups pour ce site.');
-      }
-
-      // Surveiller la fermeture du popup
-      const checkClosed = setInterval(() => {
-        if (popup.closed) {
-          clearInterval(checkClosed);
-          setIsLoading(false);
-          // Rafraîchir les intégrations au cas où l'autorisation aurait réussi
-          fetchIntegrations();
-        }
-      }, 1000);
-
-    } catch (error) {
-      console.error('Erreur initiation OAuth:', error);
-      toast({
-        title: "Erreur",
-        description: error.message || "Impossible d'initier l'installation Shopify",
-        variant: "destructive"
-      });
-      setIsLoading(false);
-    }
-  }, [campaignId]);
+    console.log('Cette méthode est maintenant gérée par ShopifyPrivateAppDialog');
+  }, []);
 
   // Finaliser l'installation après le callback
   const finalizeShopifyInstall = useCallback(async (code: string, state: string, shop: string) => {

src/pages/ShopifyCallbackSupabasePage.tsx

@@ -13,9 +13,8 @@ export const ShopifyCallbackSupabasePage: React.FC = () => {
   const [status, setStatus] = useState<'loading' | 'success' | 'error'>('loading');
   const [message, setMessage] = useState('');
 
-  // Récupérer campaignId depuis sessionStorage ou URL
-  const campaignId = sessionStorage.getItem('shopify_campaign_id') || 'default';
-  const { finalizeShopifyInstall } = useShopifySupabase(campaignId);
+  // Récupérer campaignId depuis sessionStorage ou URL (plus nécessaire avec Private Apps)
+  const { finalizeShopifyInstall } = useShopifySupabase();
 
   useEffect(() => {
     const handleCallback = async () => {