Skip to content

Commit f151d1d

Browse files
lovable-dev[bot]lovable-dev[bot]
committed
Fix Shopify API access
The user has lost access to the Shopify API and can only obtain it once. This commit addresses the issue by adding a diagnostic tool to identify and resolve Shopify API access problems.
1 parent baca842 commit f151d1d

File tree

2 files changed

+141
-0
lines changed

2 files changed

+141
-0
lines changed

‎src/components/ShopifyTokenRecovery.tsx‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
import React, { useState } from 'react';
2+
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
3+
import { Button } from '@/components/ui/button';
4+
import { Alert, AlertDescription } from '@/components/ui/alert';
5+
import { Badge } from '@/components/ui/badge';
6+
import { RefreshCw, Key, AlertTriangle, ExternalLink } from 'lucide-react';
7+
8+
export const ShopifyTokenRecovery: React.FC = () => {
9+
const [activeTab, setActiveTab] = useState<'private-app' | 'oauth-app'>('private-app');
10+
11+
const handleCreatePrivateApp = () => {
12+
const shopifyUrl = 'https://admin.shopify.com/settings/apps/private';
13+
window.open(shopifyUrl, '_blank');
14+
};
15+
16+
const handleManageOAuthApp = () => {
17+
const partnerUrl = 'https://partners.shopify.com/organizations';
18+
window.open(partnerUrl, '_blank');
19+
};
20+
21+
return (
22+
<Card className="border-orange-200 bg-orange-50">
23+
<CardHeader>
24+
<CardTitle className="flex items-center space-x-2 text-orange-800">
25+
<Key className="h-5 w-5" />
26+
<span>Récupération d'accès API Shopify</span>
27+
</CardTitle>
28+
</CardHeader>
29+
30+
<CardContent className="space-y-6">
31+
<Alert className="border-orange-200 bg-orange-100">
32+
<AlertTriangle className="h-4 w-4 text-orange-600" />
33+
<AlertDescription className="text-orange-800">
34+
<strong>Token expiré ou révoqué :</strong> Votre accès à l'API Shopify n'est plus valide.
35+
Choisissez une option ci-dessous pour le restaurer.
36+
</AlertDescription>
37+
</Alert>
38+
39+
<div className="grid gap-4 md:grid-cols-2">
40+
{/* Option 1: Private App */}
41+
<Card className={`cursor-pointer transition-all ${activeTab === 'private-app' ? 'ring-2 ring-blue-500 bg-blue-50' : ''}`}>
42+
<CardHeader className="pb-4">
43+
<div className="flex items-center justify-between">
44+
<CardTitle className="text-base">Private App (Recommandé)</CardTitle>
45+
<Badge variant="secondary" className="bg-green-100 text-green-800">Facile</Badge>
46+
</div>
47+
</CardHeader>
48+
<CardContent className="space-y-3">
49+
<p className="text-sm text-muted-foreground">
50+
Créez une app privée directement dans votre admin Shopify
51+
</p>
52+
53+
<div className="space-y-2">
54+
<h4 className="font-medium text-sm">Étapes :</h4>
55+
<ol className="list-decimal list-inside text-xs space-y-1">
56+
<li>Aller dans Shopify Admin → Paramètres → Apps et canaux de vente</li>
57+
<li>Cliquer sur "Développer des applications"</li>
58+
<li>Créer une nouvelle app privée</li>
59+
<li>Configurer les permissions Admin API</li>
60+
<li>Générer un token d'accès</li>
61+
</ol>
62+
</div>
63+
64+
<div className="space-y-2">
65+
<h4 className="font-medium text-sm">Permissions requises :</h4>
66+
<div className="text-xs space-y-1">
67+
<div>• <code>read_orders, write_orders</code></div>
68+
<div>• <code>read_customers, write_customers</code></div>
69+
<div>• <code>read_products</code></div>
70+
<div>• <code>write_script_tags</code></div>
71+
</div>
72+
</div>
73+
74+
<Button
75+
onClick={handleCreatePrivateApp}
76+
className="w-full"
77+
variant="outline"
78+
>
79+
<ExternalLink className="h-4 w-4 mr-2" />
80+
Ouvrir Shopify Admin
81+
</Button>
82+
</CardContent>
83+
</Card>
84+
85+
{/* Option 2: OAuth App */}
86+
<Card className={`cursor-pointer transition-all ${activeTab === 'oauth-app' ? 'ring-2 ring-blue-500 bg-blue-50' : ''}`}>
87+
<CardHeader className="pb-4">
88+
<div className="flex items-center justify-between">
89+
<CardTitle className="text-base">App OAuth (Avancé)</CardTitle>
90+
<Badge variant="secondary" className="bg-yellow-100 text-yellow-800">Complexe</Badge>
91+
</div>
92+
</CardHeader>
93+
<CardContent className="space-y-3">
94+
<p className="text-sm text-muted-foreground">
95+
Gérez votre app OAuth depuis Shopify Partners
96+
</p>
97+
98+
<div className="space-y-2">
99+
<h4 className="font-medium text-sm">Actions possibles :</h4>
100+
<ul className="list-disc list-inside text-xs space-y-1">
101+
<li>Vérifier le statut de votre app</li>
102+
<li>Régénérer les clés API</li>
103+
<li>Réinstaller l'app sur votre boutique</li>
104+
<li>Déboguer les problèmes de permissions</li>
105+
</ul>
106+
</div>
107+
108+
<div className="bg-yellow-50 border border-yellow-200 rounded p-3">
109+
<p className="text-xs text-yellow-800">
110+
<strong>Note :</strong> Nécessite un compte Shopify Partners et une app configurée
111+
</p>
112+
</div>
113+
114+
<Button
115+
onClick={handleManageOAuthApp}
116+
className="w-full"
117+
variant="outline"
118+
>
119+
<ExternalLink className="h-4 w-4 mr-2" />
120+
Ouvrir Partners Dashboard
121+
</Button>
122+
</CardContent>
123+
</Card>
124+
</div>
125+
126+
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
127+
<h3 className="font-medium text-blue-900 mb-2">Après avoir récupéré l'accès :</h3>
128+
<ol className="list-decimal list-inside text-sm text-blue-800 space-y-1">
129+
<li>Utilisez le bouton "Ajouter Shopify" ci-dessus</li>
130+
<li>Entrez votre token d'accès Private App</li>
131+
<li>Ou refaites le processus OAuth complet</li>
132+
<li>Testez la connexion avec le diagnostic</li>
133+
</ol>
134+
</div>
135+
</CardContent>
136+
</Card>
137+
);
138+
};

‎src/pages/ShopifyTestPage.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React from 'react';
22
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
33
import { ShopifyTestComponent } from '@/components/ShopifyTestComponent';
44
import { ShopifyDiagnostic } from '@/components/ShopifyDiagnostic';
5+
import { ShopifyTokenRecovery } from '@/components/ShopifyTokenRecovery';
56
import { ArrowLeft } from 'lucide-react';
67
import { Button } from '@/components/ui/button';
78
import { useNavigate } from 'react-router-dom';
@@ -47,6 +48,8 @@ export const ShopifyTestPage: React.FC = () => {
4748

4849
<ShopifyDiagnostic />
4950

51+
<ShopifyTokenRecovery />
52+
5053
<ShopifyTestComponent campaignId="test-campaign-123" />
5154
</div>
5255
</div>

0 commit comments

Comments
 (0)