@flowselections/floriday-authenticatie-module 1.0.42 → 1.0.43

package/dist-lib/components/settings/FlorydaySettingsCard.js

@@ -55,23 +55,18 @@ function EnvironmentForm({ env, label, connection, }) {
     const upsert = useServerFn(upsertFlorydayConnection);
     const test = useServerFn(testFlorydayConnection);
     const remove = useServerFn(deleteFlorydayConnection);
-    const [clientId, setClientId] = useState("");
-    const [clientSecret, setClientSecret] = useState("");
     const [apiKey, setApiKey] = useState("");
+    const [testSteps, setTestSteps] = useState([]);
     const saveMutation = useMutation({
         mutationFn: () => upsert({
             data: {
                 environment: env,
-                client_id: clientId,
-                client_secret: clientSecret,
                 api_key: apiKey,
                 label,
             },
         }),
         onSuccess: () => {
-            toast.success(`${label}-koppeling opgeslagen`);
-            setClientId("");
-            setClientSecret("");
+            toast.success(`API-sleutel voor ${label.toLowerCase()} opgeslagen`);
             setApiKey("");
             qc.invalidateQueries({ queryKey: ["floriday-connections"] });
             qc.invalidateQueries({ queryKey: ["floriday-warehouses", env] });
@@ -81,6 +76,7 @@ function EnvironmentForm({ env, label, connection, }) {
     const testMutation = useMutation({
         mutationFn: () => test({ data: { environment: env } }),
         onSuccess: async (res) => {
+            setTestSteps(res.steps ?? []);
             if (res.ok)
                 toast.success(`${label} koppeling OK`);
             else
@@ -98,8 +94,7 @@ function EnvironmentForm({ env, label, connection, }) {
         },
         onError: (e) => toast.error(e?.message ?? "Verwijderen mislukt"),
     });
-    return (_jsxs("div", { className: "space-y-6", children: [_jsx(StepBlock, { number: 2, title: "Vul verbindingsgegevens in", children: _jsxs("div", { className: "rounded-lg border border-border/60 bg-card p-4 space-y-4", children: [_jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [_jsx("h4", { className: "font-medium text-sm", children: "Verbindingsgegevens" }), connection ? (_jsx(Badge, { variant: "default", className: "text-[10px]", children: "Actief" })) : (_jsx(Badge, { variant: "secondary", className: "text-[10px]", children: "Nog niet gekoppeld" }))] }), connection && (_jsxs(AlertDialog, { children: [_jsx(AlertDialogTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "sm", disabled: deleteMutation.isPending, children: "Verwijderen" }) }), _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Koppeling verwijderen?" }), _jsxs(AlertDialogDescription, { children: ["Hiermee worden de opgeslagen Floriday-gegevens voor de ", label.toLowerCase(), " permanent verwijderd. Andere modules die deze koppeling gebruiken werken daarna niet meer totdat je opnieuw koppelt."] })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: "Annuleren" }), _jsx(AlertDialogAction, { onClick: () => deleteMutation.mutate(), children: "Verwijderen" })] })] })] }))] }), _jsxs("div", { className: "grid gap-4", children: [_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { htmlFor: `${env}-client-id`, className: "text-xs", children: "Client ID" }), _jsx(Input, { id: `${env}-client-id`, value: clientId, onChange: e => setClientId(e.target.value), placeholder: connection ? connection.client_id_masked : "Floriday Client ID", className: connection ? "font-mono placeholder:font-mono placeholder:text-foreground/60" : undefined, autoComplete: "off" }), _jsx("p", { className: "text-[11px] text-muted-foreground", children: "Te vinden in je Floriday API-instellingen." }), connection && (_jsx("p", { className: "text-[11px] text-muted-foreground", children: "Laat leeg als je deze waarde niet wilt wijzigen." }))] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { htmlFor: `${env}-client-secret`, className: "text-xs", children: "Client Secret" }), _jsx(Input, { id: `${env}-client-secret`, type: "password", value: clientSecret, onChange: e => setClientSecret(e.target.value), placeholder: connection ? "••••••••" : "Floriday Client Secret", className: connection ? "placeholder:text-foreground/60" : undefined, autoComplete: "off" }), _jsx("p", { className: "text-[11px] text-muted-foreground", children: "Houd deze sleutel priv\u00E9." }), connection && (_jsx("p", { className: "text-[11px] text-muted-foreground", children: "Laat leeg als je deze waarde niet wilt wijzigen." }))] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { htmlFor: `${env}-api-key`, className: "text-xs", children: "API-sleutel" }), _jsx(Input, { id: `${env}-api-key`, type: "text", value: apiKey, onChange: e => setApiKey(e.target.value), placeholder: connection ? connection.api_key_masked : "X-Api-Key uit Floriday", className: connection ? "font-mono placeholder:font-mono placeholder:text-foreground/60" : undefined, autoComplete: "off" }), _jsx("p", { className: "text-[11px] text-muted-foreground", children: "Kopieer de API-sleutel uit Floriday." }), connection && (_jsx("p", { className: "text-[11px] text-muted-foreground", children: "Laat leeg als je deze waarde niet wilt wijzigen." }))] })] }), _jsx("div", { children: _jsx(Button, { size: "sm", onClick: () => saveMutation.mutate(), disabled: saveMutation.isPending ||
-                                    !clientId.trim() || !clientSecret.trim() || !apiKey.trim(), children: saveMutation.isPending ? "Opslaan…" : connection ? "Wijzigingen opslaan" : "Koppeling opslaan" }) })] }) }), _jsx(StepBlock, { number: 3, title: "Test de verbinding", description: "Controleer of je gegevens correct zijn en of de koppeling werkt.", children: _jsx(Button, { variant: "outline", size: "sm", onClick: () => testMutation.mutate(), disabled: !connection || testMutation.isPending, children: testMutation.isPending ? "Testen…" : "Verbinding testen" }) }), _jsx(StepBlock, { number: 4, title: "Publicatie-instellingen", description: "Vul je GLN-code in en kies het voorkeursmagazijn voor het publiceren van producten via Floriday.", children: _jsx(PublishingSettings, { env: env, connection: connection }) }), _jsx(StepBlock, { number: 5, title: "Gegevens up-to-date houden", description: "We halen je Floriday-gegevens automatisch op en bewaren ze in je werkomgeving. Zo werkt alles effici\u00EBnt & snel.", children: _jsx(SyncStatusPanel, { env: env, connection: connection }) })] }));
+    return (_jsxs("div", { className: "space-y-6", children: [_jsx(StepBlock, { number: 2, title: "Vul de Floriday API-sleutel in", children: _jsxs("div", { className: "rounded-lg border border-border/60 bg-card p-4 space-y-4", children: [_jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [_jsx("h4", { className: "font-medium text-sm", children: "API-sleutel" }), connection ? (_jsx(Badge, { variant: "default", className: "text-[10px]", children: "Actief" })) : (_jsx(Badge, { variant: "secondary", className: "text-[10px]", children: "Nog niet gekoppeld" }))] }), connection && (_jsxs(AlertDialog, { children: [_jsx(AlertDialogTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "sm", disabled: deleteMutation.isPending, children: "Verwijderen" }) }), _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Koppeling verwijderen?" }), _jsxs(AlertDialogDescription, { children: ["Hiermee worden de opgeslagen Floriday-gegevens voor de ", label.toLowerCase(), " permanent verwijderd. Andere modules die deze koppeling gebruiken werken daarna niet meer totdat je opnieuw koppelt."] })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: "Annuleren" }), _jsx(AlertDialogAction, { onClick: () => deleteMutation.mutate(), children: "Verwijderen" })] })] })] }))] }), _jsx("p", { className: "text-[11px] text-muted-foreground", children: "Client ID en Client Secret worden centraal beheerd in de Centrale Authenticatiemodule. Hier hoeft alleen de Floriday API-sleutel te staan." }), _jsx("div", { className: "grid gap-4", children: _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { htmlFor: `${env}-api-key`, className: "text-xs", children: "API-sleutel" }), _jsx(Input, { id: `${env}-api-key`, type: "text", value: apiKey, onChange: e => setApiKey(e.target.value), placeholder: connection ? connection.api_key_masked : "X-Api-Key uit Floriday", className: connection ? "font-mono placeholder:font-mono placeholder:text-foreground/60" : undefined, autoComplete: "off" }), _jsx("p", { className: "text-[11px] text-muted-foreground", children: "Kopieer de API-sleutel uit Floriday." })] }) }), _jsx("div", { children: _jsx(Button, { size: "sm", onClick: () => saveMutation.mutate(), disabled: saveMutation.isPending || !apiKey.trim(), children: saveMutation.isPending ? "Opslaan…" : "API-sleutel opslaan" }) })] }) }), _jsx(StepBlock, { number: 3, title: "Test de verbinding", description: "Controleer of het token, de API-sleutel en een echte Floriday-aanroep werken.", children: _jsxs("div", { className: "space-y-3", children: [_jsx(Button, { variant: "outline", size: "sm", onClick: () => testMutation.mutate(), disabled: !connection || testMutation.isPending, children: testMutation.isPending ? "Testen…" : "Verbinding testen" }), testSteps.length > 0 && (_jsx("ul", { className: "space-y-2", children: testSteps.map((s) => (_jsxs("li", { className: "flex gap-2 text-xs", children: [_jsx("span", { "aria-hidden": true, className: `mt-1 h-2 w-2 rounded-full shrink-0 ${s.ok ? "bg-emerald-500" : "bg-red-500"}` }), _jsxs("span", { children: [_jsx("span", { className: "font-medium", children: s.label }), _jsx("span", { className: "block text-muted-foreground", children: s.detail })] })] }, s.key))) }))] }) }), _jsx(StepBlock, { number: 4, title: "Publicatie-instellingen", description: "Vul je GLN-code in en kies het voorkeursmagazijn voor het publiceren van producten via Floriday.", children: _jsx(PublishingSettings, { env: env, connection: connection }) }), _jsx(StepBlock, { number: 5, title: "Gegevens up-to-date houden", description: "We halen je Floriday-gegevens automatisch op en bewaren ze in je werkomgeving. Zo werkt alles effici\u00EBnt & snel.", children: _jsx(SyncStatusPanel, { env: env, connection: connection }) })] }));
 }
 function PublishingSettings({ env, connection, }) {
     const qc = useQueryClient();