Skip to content

Commit bdc3aa8

Browse files
lovable-dev[bot]lovable-dev[bot]
committed
Finaliser l'intégration Shopify
Finalise l'intégration Shopify en installant les packages nécessaires et en complétant l'interface utilisateur.
1 parent b5b6e10 commit bdc3aa8

File tree

7 files changed

+672
-12
lines changed

7 files changed

+672
-12
lines changed

‎package-lock.json‎

Lines changed: 116 additions & 7 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,11 +40,14 @@
4040
"@radix-ui/react-toggle": "^1.1.0",
4141
"@radix-ui/react-toggle-group": "^1.1.0",
4242
"@radix-ui/react-tooltip": "^1.1.4",
43+
"@shopify/admin-api-client": "^1.1.1",
44+
"@shopify/shopify-api": "^11.14.1",
4345
"@tanstack/react-query": "^5.56.2",
4446
"@testing-library/dom": "^10.4.1",
4547
"@testing-library/jest-dom": "^6.7.0",
4648
"@testing-library/react": "^16.3.0",
4749
"@testing-library/user-event": "^14.6.1",
50+
"@types/uuid": "^10.0.0",
4851
"canvas-confetti": "^1.9.3",
4952
"class-variance-authority": "^0.7.1",
5053
"clsx": "^2.1.1",
@@ -74,6 +77,7 @@
7477
"stripe": "^18.2.1",
7578
"tailwind-merge": "^2.5.2",
7679
"tailwindcss-animate": "^1.0.7",
80+
"uuid": "^11.1.0",
7781
"vaul": "^0.9.3",
7882
"vitest": "^3.2.4",
7983
"web-vitals": "^5.1.0",

‎src/App.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import { PaymentSuccessPage } from '@/pages/PaymentSuccessPage';
2323
import TrackingPage from '@/pages/TrackingPage';
2424
import ShortLinkPage from '@/pages/ShortLinkPage';
2525
import TrackingJsRoute from '@/pages/TrackingJsRoute';
26+
import { ShopifyCallbackPage } from '@/pages/ShopifyCallbackPage';
2627
import AdminPage from '@/pages/AdminPage';
2728
import AffiliateOnboardingPage from '@/pages/AffiliateOnboardingPage';
2829
import CommissionInfoPage from '@/pages/CommissionInfoPage';
@@ -65,6 +66,7 @@ function App() {
6566
<Route path="/contact" element={<ContactPage />} />
6667
<Route path="/app" element={<Index />} />
6768
<Route path="/dashboard" element={<Dashboard />} />
69+
<Route path="/auth/shopify/callback" element={<ShopifyCallbackPage />} />
6870
<Route path="/admin" element={<AdminPage />} />
6971
<Route path="/campaign/:campaignId" element={<AdvancedStatsPage />} />
7072
<Route path="/affiliate/:affiliateId" element={<AffiliatePage />} />

‎src/components/ShopifyInstallationsList.tsx‎

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
import React from 'react';
2+
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
3+
import { Badge } from '@/components/ui/badge';
4+
import { Button } from '@/components/ui/button';
5+
import { ShoppingBag, CheckCircle, XCircle, Trash2, Settings, ExternalLink } from 'lucide-react';
6+
import { ShopifyConfig } from '@/hooks/useShopifyIntegration';
7+
8+
interface ShopifyInstallationsListProps {
9+
configs: ShopifyConfig[];
10+
isLoading: boolean;
11+
onRemove: (configId: string) => void;
12+
onSetupWebhooks: (configId: string) => void;
13+
}
14+
15+
export const ShopifyInstallationsList: React.FC<ShopifyInstallationsListProps> = ({
16+
configs,
17+
isLoading,
18+
onRemove,
19+
onSetupWebhooks
20+
}) => {
21+
if (configs.length === 0) {
22+
return (
23+
<Card className="p-6 text-center">
24+
<ShoppingBag className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
25+
<p className="text-muted-foreground">Aucune boutique Shopify connectée</p>
26+
<p className="text-sm text-muted-foreground mt-1">
27+
Utilisez le formulaire ci-dessus pour connecter votre première boutique
28+
</p>
29+
</Card>
30+
);
31+
}
32+
33+
return (
34+
<div className="space-y-4">
35+
<h3 className="text-lg font-semibold">Boutiques Shopify connectées</h3>
36+
37+
{configs.map((config) => (
38+
<Card key={config.id} className="p-4">
39+
<div className="flex items-center justify-between">
40+
<div className="flex items-center gap-3">
41+
<div className="p-2 bg-purple-100 rounded-lg">
42+
<ShoppingBag className="h-5 w-5 text-purple-600" />
43+
</div>
44+
<div>
45+
<div className="flex items-center gap-2">
46+
<p className="font-medium">
47+
{config.shopInfo?.name || config.domain}
48+
</p>
49+
{config.active && (
50+
<Badge variant="outline" className="text-green-600 border-green-600">
51+
<CheckCircle className="h-3 w-3 mr-1" />
52+
Active
53+
</Badge>
54+
)}
55+
</div>
56+
<p className="text-sm text-muted-foreground">
57+
{config.domain}
58+
</p>
59+
{config.shopInfo && (
60+
<div className="flex items-center gap-4 mt-1 text-xs text-muted-foreground">
61+
<span>Plan: {config.shopInfo.plan_name}</span>
62+
<span>Devise: {config.shopInfo.currency}</span>
63+
</div>
64+
)}
65+
</div>
66+
</div>
67+
68+
<div className="flex items-center gap-2">
69+
{/* Statut des intégrations */}
70+
<div className="flex flex-col gap-1">
71+
<div className="flex items-center gap-1 text-xs">
72+
{config.settings?.scriptsInstalled ? (
73+
<CheckCircle className="h-3 w-3 text-green-500" />
74+
) : (
75+
<XCircle className="h-3 w-3 text-red-500" />
76+
)}
77+
<span>Script</span>
78+
</div>
79+
<div className="flex items-center gap-1 text-xs">
80+
{config.settings?.webhooksInstalled ? (
81+
<CheckCircle className="h-3 w-3 text-green-500" />
82+
) : (
83+
<XCircle className="h-3 w-3 text-red-500" />
84+
)}
85+
<span>Webhooks</span>
86+
</div>
87+
</div>
88+
89+
{/* Actions */}
90+
<div className="flex items-center gap-1">
91+
{!config.settings?.webhooksInstalled && (
92+
<Button
93+
variant="outline"
94+
size="sm"
95+
onClick={() => onSetupWebhooks(config.id)}
96+
disabled={isLoading}
97+
>
98+
<Settings className="h-3 w-3 mr-1" />
99+
Setup
100+
</Button>
101+
)}
102+
103+
<Button
104+
variant="ghost"
105+
size="sm"
106+
onClick={() => window.open(`https://${config.domain.replace('.myshopify.com', '')}.myshopify.com/admin`, '_blank')}
107+
>
108+
<ExternalLink className="h-3 w-3" />
109+
</Button>
110+
111+
<Button
112+
variant="ghost"
113+
size="sm"
114+
onClick={() => onRemove(config.id)}
115+
className="text-red-500 hover:text-red-700"
116+
disabled={isLoading}
117+
>
118+
<Trash2 className="h-3 w-3" />
119+
</Button>
120+
</div>
121+
</div>
122+
</div>
123+
124+
{/* Informations détaillées */}
125+
{config.settings && (
126+
<div className="mt-3 pt-3 border-t">
127+
<div className="grid grid-cols-2 gap-4 text-sm">
128+
<div>
129+
<span className="text-muted-foreground">Injection automatique:</span>
130+
<span className={`ml-2 ${config.settings.autoInject ? 'text-green-600' : 'text-red-600'}`}>
131+
{config.settings.autoInject ? 'Activée' : 'Désactivée'}
132+
</span>
133+
</div>
134+
<div>
135+
<span className="text-muted-foreground">Tracking:</span>
136+
<span className="ml-2 text-green-600">Actif</span>
137+
</div>
138+
</div>
139+
</div>
140+
)}
141+
</Card>
142+
))}
143+
</div>
144+
);
145+
};

0 commit comments

Comments
 (0)