Skip to content

Commit 46f688f

Browse files
lovable-dev[bot]lovable-dev[bot]
committed
Refactor: Split CreateCampaignDialog into smaller components
Refactored `src/components/CreateCampaignDialog.tsx` into smaller, more manageable components to improve code organization and readability. No functionality changes were introduced. Unused imports and files were removed.
1 parent 4775dad commit 46f688f

File tree

3 files changed

+149
-95
lines changed

3 files changed

+149
-95
lines changed

‎src/components/CampaignFormFields.tsx‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
2+
import { Input } from '@/components/ui/input';
3+
import { Label } from '@/components/ui/label';
4+
import { Textarea } from '@/components/ui/textarea';
5+
import { Switch } from '@/components/ui/switch';
6+
import { CampaignFormData } from '@/hooks/useCampaignForm';
7+
8+
interface CampaignFormFieldsProps {
9+
formData: CampaignFormData;
10+
onUpdateFormData: (updates: Partial<CampaignFormData>) => void;
11+
}
12+
13+
export const CampaignFormFields = ({ formData, onUpdateFormData }: CampaignFormFieldsProps) => {
14+
return (
15+
<div className="grid gap-4 py-4">
16+
<div className="space-y-2">
17+
<Label htmlFor="name">Nom de la campagne</Label>
18+
<Input
19+
id="name"
20+
value={formData.name}
21+
onChange={(e) => onUpdateFormData({ name: e.target.value })}
22+
placeholder="Ex: Vente Produit A"
23+
required
24+
/>
25+
</div>
26+
27+
<div className="space-y-2">
28+
<Label htmlFor="description">Description</Label>
29+
<Textarea
30+
id="description"
31+
value={formData.description}
32+
onChange={(e) => onUpdateFormData({ description: e.target.value })}
33+
placeholder="Description de la campagne..."
34+
rows={3}
35+
/>
36+
</div>
37+
38+
<div className="space-y-2">
39+
<Label htmlFor="targetUrl">URL de destination</Label>
40+
<Input
41+
id="targetUrl"
42+
value={formData.targetUrl}
43+
onChange={(e) => onUpdateFormData({ targetUrl: e.target.value })}
44+
placeholder="https://monsite.com/produit"
45+
required
46+
/>
47+
</div>
48+
49+
<div className="flex items-center space-x-2">
50+
<Switch
51+
id="isActive"
52+
checked={formData.isActive}
53+
onCheckedChange={(checked) => onUpdateFormData({ isActive: checked })}
54+
/>
55+
<Label htmlFor="isActive">Campagne active</Label>
56+
</div>
57+
</div>
58+
);
59+
};

‎src/components/CreateCampaignDialog.tsx‎

Lines changed: 16 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,24 @@
11

22
import { useState } from 'react';
33
import { Button } from '@/components/ui/button';
4-
import { Input } from '@/components/ui/input';
5-
import { Label } from '@/components/ui/label';
6-
import { Textarea } from '@/components/ui/textarea';
74
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
8-
import { Switch } from '@/components/ui/switch';
9-
import { useCampaigns } from '@/hooks/useCampaigns';
10-
import { useStripePayment } from '@/hooks/useStripePayment';
11-
import { useToast } from '@/hooks/use-toast';
125
import { Plus, CreditCard } from 'lucide-react';
13-
import { CampaignSuccessModal } from '@/components/CampaignSuccessModal';
6+
import { useCampaignForm } from '@/hooks/useCampaignForm';
7+
import { CampaignFormFields } from '@/components/CampaignFormFields';
148

159
export const CreateCampaignDialog = () => {
1610
const [open, setOpen] = useState(false);
17-
const [loading, setLoading] = useState(false);
18-
const [formData, setFormData] = useState({
19-
name: '',
20-
description: '',
21-
targetUrl: '',
22-
isActive: true,
23-
});
24-
25-
const { createCampaign } = useCampaigns();
26-
const { setupPaymentForCampaign, loading: paymentLoading } = useStripePayment();
27-
const { toast } = useToast();
28-
29-
const handleFormSubmit = async (e: React.FormEvent) => {
30-
e.preventDefault();
31-
setLoading(true);
32-
33-
try {
34-
console.log('🎯 Création de la campagne en mode draft...');
35-
36-
// Créer la campagne en mode draft
37-
const campaignId = await createCampaign({
38-
...formData,
39-
isDraft: true,
40-
paymentConfigured: false,
41-
});
42-
43-
console.log('✅ Campagne draft créée:', campaignId);
44-
45-
// Rediriger directement vers Stripe pour la configuration de paiement
46-
await setupPaymentForCampaign(campaignId, formData.name);
47-
48-
} catch (error: any) {
49-
console.error('❌ Erreur création campagne:', error);
50-
toast({
51-
title: "Erreur",
52-
description: error.message || "Impossible de créer la campagne",
53-
variant: "destructive",
54-
});
55-
} finally {
56-
setLoading(false);
57-
}
58-
};
11+
const {
12+
formData,
13+
loading,
14+
paymentLoading,
15+
updateFormData,
16+
resetForm,
17+
handleSubmit,
18+
} = useCampaignForm();
5919

6020
const resetDialog = () => {
61-
setFormData({ name: '', description: '', targetUrl: '', isActive: true });
21+
resetForm();
6222
setOpen(false);
6323
};
6424

@@ -81,50 +41,11 @@ export const CreateCampaignDialog = () => {
8141
</DialogDescription>
8242
</DialogHeader>
8343

84-
<form onSubmit={handleFormSubmit}>
85-
<div className="grid gap-4 py-4">
86-
<div className="space-y-2">
87-
<Label htmlFor="name">Nom de la campagne</Label>
88-
<Input
89-
id="name"
90-
value={formData.name}
91-
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
92-
placeholder="Ex: Vente Produit A"
93-
required
94-
/>
95-
</div>
96-
97-
<div className="space-y-2">
98-
<Label htmlFor="description">Description</Label>
99-
<Textarea
100-
id="description"
101-
value={formData.description}
102-
onChange={(e) => setFormData({ ...formData, description: e.target.value })}
103-
placeholder="Description de la campagne..."
104-
rows={3}
105-
/>
106-
</div>
107-
108-
<div className="space-y-2">
109-
<Label htmlFor="targetUrl">URL de destination</Label>
110-
<Input
111-
id="targetUrl"
112-
value={formData.targetUrl}
113-
onChange={(e) => setFormData({ ...formData, targetUrl: e.target.value })}
114-
placeholder="https://monsite.com/produit"
115-
required
116-
/>
117-
</div>
118-
119-
<div className="flex items-center space-x-2">
120-
<Switch
121-
id="isActive"
122-
checked={formData.isActive}
123-
onCheckedChange={(checked) => setFormData({ ...formData, isActive: checked })}
124-
/>
125-
<Label htmlFor="isActive">Campagne active</Label>
126-
</div>
127-
</div>
44+
<form onSubmit={handleSubmit}>
45+
<CampaignFormFields
46+
formData={formData}
47+
onUpdateFormData={updateFormData}
48+
/>
12849

12950
<DialogFooter className="gap-2">
13051
<Button

‎src/hooks/useCampaignForm.ts‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
2+
import { useState } from 'react';
3+
import { useCampaigns } from '@/hooks/useCampaigns';
4+
import { useStripePayment } from '@/hooks/useStripePayment';
5+
import { useToast } from '@/hooks/use-toast';
6+
7+
export interface CampaignFormData {
8+
name: string;
9+
description: string;
10+
targetUrl: string;
11+
isActive: boolean;
12+
}
13+
14+
export const useCampaignForm = () => {
15+
const [loading, setLoading] = useState(false);
16+
const [formData, setFormData] = useState<CampaignFormData>({
17+
name: '',
18+
description: '',
19+
targetUrl: '',
20+
isActive: true,
21+
});
22+
23+
const { createCampaign } = useCampaigns();
24+
const { setupPaymentForCampaign, loading: paymentLoading } = useStripePayment();
25+
const { toast } = useToast();
26+
27+
const updateFormData = (updates: Partial<CampaignFormData>) => {
28+
setFormData(prev => ({ ...prev, ...updates }));
29+
};
30+
31+
const resetForm = () => {
32+
setFormData({ name: '', description: '', targetUrl: '', isActive: true });
33+
};
34+
35+
const handleSubmit = async (e: React.FormEvent) => {
36+
e.preventDefault();
37+
setLoading(true);
38+
39+
try {
40+
console.log('🎯 Création de la campagne en mode draft...');
41+
42+
// Créer la campagne en mode draft
43+
const campaignId = await createCampaign({
44+
...formData,
45+
isDraft: true,
46+
paymentConfigured: false,
47+
});
48+
49+
console.log('✅ Campagne draft créée:', campaignId);
50+
51+
// Rediriger directement vers Stripe pour la configuration de paiement
52+
await setupPaymentForCampaign(campaignId, formData.name);
53+
54+
} catch (error: any) {
55+
console.error('❌ Erreur création campagne:', error);
56+
toast({
57+
title: "Erreur",
58+
description: error.message || "Impossible de créer la campagne",
59+
variant: "destructive",
60+
});
61+
} finally {
62+
setLoading(false);
63+
}
64+
};
65+
66+
return {
67+
formData,
68+
loading,
69+
paymentLoading,
70+
updateFormData,
71+
resetForm,
72+
handleSubmit,
73+
};
74+
};

0 commit comments

Comments
 (0)