@flowselections/mailbox-orders 1.0.2 → 1.0.3

package/dist-lib/components/MailboxInboxPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MailboxInboxPage.d.ts","sourceRoot":"","sources":["../../src/components/MailboxInboxPage.tsx"],"names":[],"mappings":"AAmBA,wBAAgB,gBAAgB,gCAoH/B"}
+{"version":3,"file":"MailboxInboxPage.d.ts","sourceRoot":"","sources":["../../src/components/MailboxInboxPage.tsx"],"names":[],"mappings":"AA6BA,wBAAgB,gBAAgB,gCAuO/B"}

package/dist-lib/components/MailboxInboxPage.js

@@ -1,9 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { useServerFn } from "@tanstack/react-start";
 import { Button, Badge, Card, CardContent, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, toast, } from "@flowselections/core";
-import { Mail, RefreshCw, Sparkles } from "lucide-react";
-import { listMessages, pollMailbox, parseMessage } from "../lib/mailbox.functions";
+import { Mail, Sparkles, AlertCircle, ExternalLink, RefreshCw } from "lucide-react";
+import { listMessages, parseMessage, getActiveOrdersMailbox, ingestEmailEvent, backfillRecentEvents, } from "../lib/mailbox.functions";
+import { supabase } from "../integrations/supabase/client";
+const AUTH_MODULE_URL = "https://auth.flowselections.com/e-mail-authenticatie";
 const STATUS_VARIANT = {
     new: "secondary",
     parsing: "outline",
@@ -15,33 +18,88 @@ const STATUS_VARIANT = {
 export function MailboxInboxPage() {
     const qc = useQueryClient();
     const fetchList = useServerFn(listMessages);
-    const fetchPoll = useServerFn(pollMailbox);
     const fetchParse = useServerFn(parseMessage);
+    const fetchActive = useServerFn(getActiveOrdersMailbox);
+    const fetchIngest = useServerFn(ingestEmailEvent);
+    const fetchBackfill = useServerFn(backfillRecentEvents);
     const { data, isLoading } = useQuery({
         queryKey: ["mailbox-messages"],
         queryFn: () => fetchList(),
     });
-    const pollMut = useMutation({
-        mutationFn: () => fetchPoll(),
+    const { data: active, isSuccess: activeLoaded } = useQuery({
+        queryKey: ["mailbox-active-account"],
+        queryFn: () => fetchActive(),
+        refetchInterval: 60000,
+        retry: 1,
+    });
+    // Realtime: nieuwe events uit gedeelde authenticatiemodule
+    const activeId = active?.connected ? active.id : null;
+    useEffect(() => {
+        if (!activeId)
+            return;
+        const channel = supabase
+            .channel(`email_auth_events:${activeId}`)
+            .on("postgres_changes", {
+            event: "INSERT",
+            schema: "public",
+            table: "email_auth_events",
+            filter: `connection_id=eq.${activeId}`,
+        }, async (payload) => {
+            const evId = payload?.new?.id;
+            if (!evId)
+                return;
+            try {
+                const res = await fetchIngest({ data: { eventId: evId } });
+                if (res?.ok && (res.inserted ?? 0) > 0) {
+                    const app = res.autoApproved ?? 0;
+                    if (app > 0)
+                        toast.success(`Nieuwe e-mail — ${app} automatisch omgezet`);
+                    else
+                        toast.success("Nieuwe e-mail ontvangen");
+                    qc.invalidateQueries({ queryKey: ["mailbox-messages"] });
+                    qc.invalidateQueries({ queryKey: ["mailbox-proposals"] });
+                }
+            }
+            catch {
+                /* stille fout — backfill vangt het later op */
+            }
+        })
+            .subscribe();
+        return () => {
+            void supabase.removeChannel(channel);
+        };
+    }, [activeId, fetchIngest, qc]);
+    // Backfill bij eerste mount + iedere 60s (vangt gemiste events op)
+    const didInitialBackfill = useRef(false);
+    const backfillMut = useMutation({
+        mutationFn: async () => {
+            try {
+                return await fetchBackfill();
+            }
+            catch {
+                // 401's (token verlopen) en tijdelijke fouten stil opvangen
+                return { ok: false, inserted: 0 };
+            }
+        },
         onSuccess: (res) => {
-            if (res?.ok) {
-                const ins = res.inserted ?? 0;
-                const app = res.autoApproved ?? 0;
-                if (ins === 0)
-                    toast.success("Geen nieuwe e-mails");
-                else if (app > 0)
-                    toast.success(`${ins} nieuwe e-mail(s) — ${app} automatisch omgezet in bestelling`);
-                else
-                    toast.success(`${ins} nieuwe e-mail(s) opgehaald`);
+            if (res?.ok && (res.inserted ?? 0) > 0) {
                 qc.invalidateQueries({ queryKey: ["mailbox-messages"] });
                 qc.invalidateQueries({ queryKey: ["mailbox-proposals"] });
             }
-            else {
-                toast.error(res?.error ?? "Ophalen mislukt");
-            }
         },
-        onError: (e) => toast.error(e?.message ?? "Ophalen mislukt"),
+        onError: () => {
+            /* stille fout — volgende interval probeert opnieuw */
+        },
     });
+    useEffect(() => {
+        if (!activeId || didInitialBackfill.current)
+            return;
+        didInitialBackfill.current = true;
+        backfillMut.mutate();
+        const t = setInterval(() => backfillMut.mutate(), 60000);
+        return () => clearInterval(t);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [activeId]);
     const parseMut = useMutation({
         mutationFn: (messageId) => fetchParse({ data: { messageId } }),
         onSuccess: (res) => {
@@ -57,5 +115,6 @@ export function MailboxInboxPage() {
         onError: (e) => toast.error(e?.message ?? "Parsen mislukt"),
     });
     const items = Array.isArray(data?.items) ? data.items : [];
-    return (_jsxs("div", { className: "p-6 space-y-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsxs("h1", { className: "text-2xl font-semibold flex items-center gap-2", children: [_jsx(Mail, { className: "h-6 w-6 text-primary" }), " Inbox"] }), _jsx("p", { className: "text-muted-foreground text-sm mt-1", children: "Binnenkomende bestel-e-mails uit de mailbox" })] }), _jsxs(Button, { onClick: () => pollMut.mutate(), disabled: pollMut.isPending, children: [_jsx(RefreshCw, { className: `h-4 w-4 mr-2 ${pollMut.isPending ? "animate-spin" : ""}` }), "Nu ophalen"] })] }), _jsx(Card, { children: _jsx(CardContent, { className: "p-0", children: isLoading ? (_jsx("div", { className: "p-8 text-center text-muted-foreground", children: "Laden..." })) : items.length === 0 ? (_jsx("div", { className: "p-8 text-center text-muted-foreground", children: "Nog geen e-mails. Klik \"Nu ophalen\" om de mailbox te controleren." })) : (_jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Status" }), _jsx(TableHead, { children: "Afzender" }), _jsx(TableHead, { children: "Onderwerp" }), _jsx(TableHead, { children: "Ontvangen" }), _jsx(TableHead, { className: "text-right", children: "Actie" })] }) }), _jsx(TableBody, { children: items.map((m) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx(Badge, { variant: STATUS_VARIANT[m.status] ?? "secondary", children: m.status }) }), _jsxs(TableCell, { children: [_jsx("div", { className: "text-sm font-medium", children: m.from_name || m.from_email }), m.from_name && _jsx("div", { className: "text-xs text-muted-foreground", children: m.from_email })] }), _jsx(TableCell, { className: "max-w-md truncate", children: m.subject || "(geen onderwerp)" }), _jsx(TableCell, { className: "text-sm text-muted-foreground", children: m.received_at ? new Date(m.received_at).toLocaleString("nl-NL") : "-" }), _jsx(TableCell, { className: "text-right", children: m.status !== "converted" && (_jsxs(Button, { size: "sm", variant: "outline", disabled: parseMut.isPending, onClick: () => parseMut.mutate(m.id), children: [_jsx(Sparkles, { className: "h-3 w-3 mr-1" }), m.status === "parsed" ? "Opnieuw parsen" : "Parse"] })) })] }, m.id))) })] })) }) })] }));
+    const needsReauth = active?.connected && active.needs_reauth;
+    return (_jsxs("div", { className: "p-6 space-y-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsxs("h1", { className: "text-2xl font-semibold flex items-center gap-2", children: [_jsx(Mail, { className: "h-6 w-6 text-primary" }), " Inbox"] }), _jsx("p", { className: "text-muted-foreground text-sm mt-1", children: "Binnenkomende bestel-e-mails \u2014 geleverd door de E-mail Authenticatie module" })] }), _jsxs(Button, { variant: "outline", onClick: () => backfillMut.mutate(), disabled: backfillMut.isPending || !active?.connected, title: "Haal achterstallige events op", children: [_jsx(RefreshCw, { className: `h-4 w-4 mr-2 ${backfillMut.isPending ? "animate-spin" : ""}` }), "Synchroniseer"] })] }), activeLoaded && !active?.connected ? (_jsx(Card, { children: _jsxs(CardContent, { className: "p-4 flex items-start gap-3 text-sm", children: [_jsx(AlertCircle, { className: "h-4 w-4 text-destructive mt-0.5" }), _jsxs("div", { className: "flex-1", children: [_jsx("div", { className: "font-medium", children: "Nog geen e-mailadres gekoppeld" }), _jsxs("div", { className: "text-muted-foreground", children: ["Koppel in de module ", _jsx("strong", { children: "E-mail Authenticatie" }), " een adres met doeleinde", " ", _jsx("code", { children: "orders" }), " en richting ", _jsx("code", { children: "receive" }), "."] })] }), _jsx(Button, { asChild: true, variant: "outline", size: "sm", children: _jsxs("a", { href: AUTH_MODULE_URL, target: "_blank", rel: "noreferrer", children: ["Open module ", _jsx(ExternalLink, { className: "h-3 w-3 ml-1" })] }) })] }) })) : needsReauth ? (_jsx(Card, { className: "border-destructive", children: _jsxs(CardContent, { className: "p-4 flex items-start gap-3 text-sm", children: [_jsx(AlertCircle, { className: "h-4 w-4 text-destructive mt-0.5" }), _jsxs("div", { className: "flex-1", children: [_jsxs("div", { className: "font-medium", children: ["Heraanmelding vereist voor ", active.account_email] }), _jsx("div", { className: "text-muted-foreground", children: active.last_error ?? "De koppeling is verlopen. Log opnieuw in via de authenticatiemodule." })] }), _jsx(Button, { asChild: true, variant: "destructive", size: "sm", children: _jsxs("a", { href: `${AUTH_MODULE_URL}?focus=${active.id}`, target: "_blank", rel: "noreferrer", children: ["Opnieuw verbinden ", _jsx(ExternalLink, { className: "h-3 w-3 ml-1" })] }) })] }) })) : active?.connected ? (_jsx(Card, { children: _jsxs(CardContent, { className: "p-4 flex items-center gap-3 text-sm", children: [_jsx(Mail, { className: "h-4 w-4 text-primary" }), _jsx("span", { className: "text-muted-foreground", children: "Actieve mailbox:" }), _jsx("span", { className: "font-medium", children: active.account_email }), _jsx(Badge, { variant: "outline", className: "ml-2", children: active.provider }), active.status && active.status !== "ok" && active.status !== "verified" && (_jsx(Badge, { variant: "secondary", className: "ml-2", children: active.status }))] }) })) : null, _jsx(Card, { children: _jsx(CardContent, { className: "p-0", children: isLoading ? (_jsx("div", { className: "p-8 text-center text-muted-foreground", children: "Laden..." })) : items.length === 0 ? (_jsx("div", { className: "p-8 text-center text-muted-foreground", children: "Nog geen e-mails ontvangen. Nieuwe berichten verschijnen automatisch." })) : (_jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Status" }), _jsx(TableHead, { children: "Afzender" }), _jsx(TableHead, { children: "Onderwerp" }), _jsx(TableHead, { children: "Ontvangen" }), _jsx(TableHead, { className: "text-right", children: "Actie" })] }) }), _jsx(TableBody, { children: items.map((m) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx(Badge, { variant: STATUS_VARIANT[m.status] ?? "secondary", children: m.status }) }), _jsxs(TableCell, { children: [_jsx("div", { className: "text-sm font-medium", children: m.from_name || m.from_email }), m.from_name && _jsx("div", { className: "text-xs text-muted-foreground", children: m.from_email })] }), _jsx(TableCell, { className: "max-w-md truncate", children: m.subject || "(geen onderwerp)" }), _jsx(TableCell, { className: "text-sm text-muted-foreground", children: m.received_at ? new Date(m.received_at).toLocaleString("nl-NL") : "-" }), _jsx(TableCell, { className: "text-right", children: m.status !== "converted" && (_jsxs(Button, { size: "sm", variant: "outline", disabled: parseMut.isPending, onClick: () => parseMut.mutate(m.id), children: [_jsx(Sparkles, { className: "h-3 w-3 mr-1" }), m.status === "parsed" ? "Opnieuw parsen" : "Parse"] })) })] }, m.id))) })] })) }) })] }));
 }

package/dist-lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAKvD,cAAc,kBAAkB,CAAC;AACjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACzE,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AAEzE,eAAO,MAAM,mBAAmB,EAAE,UAoBjC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAGvD,cAAc,kBAAkB,CAAC;AACjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACzE,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AAEzE,eAAO,MAAM,mBAAmB,EAAE,UAmBjC,CAAC"}

package/dist-lib/index.js

@@ -2,7 +2,6 @@
 // src/index.ts — MODULE CONTRACT (Mailbox bestellingen)
 // ============================================================================
 import { Mail, Inbox, ClipboardCheck, CheckCircle2 } from "lucide-react";
-import { ImapAccountsCard } from "./components/settings/ImapAccountsCard";
 import { MailboxOrderTemplateCard } from "./components/settings/MailboxOrderTemplateCard";
 export * from "./_core-safelist";
 export { MailboxInboxPage } from "./components/MailboxInboxPage";
@@ -12,7 +11,7 @@ export { MailboxProcessedPage } from "./components/MailboxProcessedPage";
 export const mailboxOrdersModule = {
     id: "mailbox_orders",
     name: "Mailbox bestellingen",
-    version: "1.1.0",
+    version: "1.2.0",
     nav: {
         label: "Mailbox",
         href: "/mailbox-orders",
@@ -24,7 +23,6 @@ export const mailboxOrdersModule = {
         ],
     },
     settingsCards: [
-        { component: ImapAccountsCard, order: 5 },
         { component: MailboxOrderTemplateCard, order: 20 },
     ],
 };