@voyantjs/distribution-react 0.106.0 → 0.107.0

package/dist/components/mapping-detail-page.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { Badge, Button, Card, CardContent, CardHeader, CardTitle, ConfirmActionButton, } from "@voyantjs/ui/components";
+import { cn } from "@voyantjs/ui/lib/utils";
+import { ArrowLeft, Link2, Loader2, Package } from "lucide-react";
+import { useDistributionUiI18nOrDefault } from "../i18n/index.js";
+import { distributionQueryKeys, fetchWithValidation, getChannelQueryOptions, getMappingQueryOptions, getProductQueryOptions, successEnvelope, useVoyantDistributionContext, } from "../index.js";
+import { formatDistributionDateTime } from "./distribution-shared.js";
+const noop = () => { };
+export function MappingDetailPage({ id, className, onBack = noop, onDeleted = noop, onChannelOpen = noop, onProductOpen = noop, }) {
+    const i18n = useDistributionUiI18nOrDefault();
+    const { messages } = i18n;
+    const detail = messages.details.mapping;
+    const client = useVoyantDistributionContext();
+    const queryClient = useQueryClient();
+    const mappingQuery = useQuery({
+        ...getMappingQueryOptions(client, id),
+        select: (result) => result.data,
+    });
+    const mapping = mappingQuery.data;
+    const channelQuery = useQuery({
+        ...getChannelQueryOptions(client, mapping?.channelId),
+        select: (result) => result.data,
+        enabled: Boolean(mapping?.channelId),
+    });
+    const productQuery = useQuery({
+        ...getProductQueryOptions(client, mapping?.productId),
+        select: (result) => result.data,
+        enabled: Boolean(mapping?.productId),
+    });
+    const remove = useMutation({
+        mutationFn: () => fetchWithValidation(`/v1/distribution/product-mappings/${id}`, successEnvelope, client, {
+            method: "DELETE", // i18n-literal-ok HTTP method
+        }),
+        onSuccess: () => {
+            void queryClient.invalidateQueries({ queryKey: distributionQueryKeys.mappings() });
+            queryClient.removeQueries({ queryKey: distributionQueryKeys.mapping(id) });
+            onDeleted();
+            onBack();
+        },
+    });
+    if (mappingQuery.isPending) {
+        return (_jsx("div", { className: "flex items-center justify-center py-12", children: _jsx(Loader2, { className: "h-6 w-6 animate-spin text-muted-foreground" }) }));
+    }
+    if (!mapping) {
+        return (_jsxs("div", { className: "flex flex-col items-center justify-center gap-4 py-12", children: [_jsx("p", { className: "text-muted-foreground", children: detail.notFound }), _jsx(Button, { variant: "outline", onClick: onBack, children: messages.common.backToDistribution })] }));
+    }
+    return (_jsxs("div", { "data-slot": "mapping-detail-page", className: cn("flex flex-col gap-6 p-6", className), children: [_jsxs("div", { className: "flex items-center gap-4", children: [_jsx(Button, { variant: "ghost", size: "icon", onClick: onBack, children: _jsx(ArrowLeft, { className: "h-4 w-4" }) }), _jsxs("div", { className: "flex-1", children: [_jsx("h1", { className: "text-2xl font-bold tracking-tight", children: detail.title }), _jsxs("div", { className: "mt-1 flex items-center gap-2", children: [_jsx(Badge, { variant: mapping.active ? "default" : "secondary", children: mapping.active ? messages.common.active : messages.common.inactive }), _jsx(Badge, { variant: "outline", children: mapping.externalProductId })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Button, { variant: "outline", onClick: () => onChannelOpen(mapping.channelId), children: [_jsx(Link2, { className: "mr-2 h-4 w-4" }), detail.openChannel] }), _jsxs(Button, { variant: "outline", onClick: () => onProductOpen(mapping.productId), children: [_jsx(Package, { className: "mr-2 h-4 w-4" }), detail.openProduct] }), _jsx(ConfirmActionButton, { buttonLabel: detail.deleteButton, confirmLabel: detail.deleteButton, title: detail.deleteConfirm, description: detail.deleteDescription, variant: "destructive", confirmVariant: "destructive", disabled: remove.isPending, onConfirm: async () => {
+                                    await remove.mutateAsync();
+                                } })] })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: detail.sections.details }) }), _jsxs(CardContent, { className: "grid gap-3 text-sm md:grid-cols-2", children: [_jsxs("div", { children: [_jsxs("span", { className: "text-muted-foreground", children: [messages.common.channelLabel, ":"] }), " ", _jsx("span", { children: channelQuery.data?.name ?? mapping.channelId })] }), _jsxs("div", { children: [_jsxs("span", { className: "text-muted-foreground", children: [messages.common.productLabel, ":"] }), " ", _jsx("span", { children: productQuery.data?.name ?? mapping.productId })] }), _jsxs("div", { children: [_jsxs("span", { className: "text-muted-foreground", children: [detail.labels.externalProduct, ":"] }), " ", _jsx("span", { children: mapping.externalProductId })] }), _jsxs("div", { children: [_jsxs("span", { className: "text-muted-foreground", children: [detail.labels.externalRate, ":"] }), " ", _jsx("span", { children: mapping.externalRateId ?? messages.common.none })] }), _jsxs("div", { children: [_jsxs("span", { className: "text-muted-foreground", children: [detail.labels.externalCategory, ":"] }), " ", _jsx("span", { children: mapping.externalCategoryId ?? messages.common.none })] }), _jsxs("div", { children: [_jsxs("span", { className: "text-muted-foreground", children: [messages.common.createdLabel, ":"] }), " ", _jsx("span", { children: formatDistributionDateTime(mapping.createdAt, i18n) })] }), _jsxs("div", { children: [_jsxs("span", { className: "text-muted-foreground", children: [messages.common.updatedLabel, ":"] }), " ", _jsx("span", { children: formatDistributionDateTime(mapping.updatedAt, i18n) })] })] })] })] }));
+}

package/dist/components/webhook-event-detail-page.d.ts

@@ -0,0 +1,9 @@
+export interface WebhookEventDetailPageProps {
+    id: string;
+    className?: string;
+    onBack?: () => void;
+    onDeleted?: () => void;
+    onChannelOpen?: (channelId: string) => void;
+}
+export declare function WebhookEventDetailPage({ id, className, onBack, onDeleted, onChannelOpen, }: WebhookEventDetailPageProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=webhook-event-detail-page.d.ts.map

package/dist/components/webhook-event-detail-page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"webhook-event-detail-page.d.ts","sourceRoot":"","sources":["../../src/components/webhook-event-detail-page.tsx"],"names":[],"mappings":"AAuBA,MAAM,WAAW,2BAA2B;IAC1C,EAAE,EAAE,MAAM,CAAA;IACV,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAA;CAC5C;AAID,wBAAgB,sBAAsB,CAAC,EACrC,EAAE,EACF,SAAS,EACT,MAAa,EACb,SAAgB,EAChB,aAAoB,GACrB,EAAE,2BAA2B,2CA0I7B"}

package/dist/components/webhook-event-detail-page.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { Badge, Button, Card, CardContent, CardHeader, CardTitle, ConfirmActionButton, } from "@voyantjs/ui/components";
+import { cn } from "@voyantjs/ui/lib/utils";
+import { ArrowLeft, Link2, Loader2, Webhook } from "lucide-react";
+import { useDistributionUiI18nOrDefault } from "../i18n/index.js";
+import { distributionQueryKeys, fetchWithValidation, getChannelQueryOptions, getWebhookEventQueryOptions, successEnvelope, useVoyantDistributionContext, } from "../index.js";
+import { formatDistributionDateTime } from "./distribution-shared.js";
+const noop = () => { };
+export function WebhookEventDetailPage({ id, className, onBack = noop, onDeleted = noop, onChannelOpen = noop, }) {
+    const i18n = useDistributionUiI18nOrDefault();
+    const { messages } = i18n;
+    const detail = messages.details.webhookEvent;
+    const client = useVoyantDistributionContext();
+    const queryClient = useQueryClient();
+    const eventQuery = useQuery({
+        ...getWebhookEventQueryOptions(client, id),
+        select: (result) => result.data,
+    });
+    const event = eventQuery.data;
+    const channelQuery = useQuery({
+        ...getChannelQueryOptions(client, event?.channelId),
+        select: (result) => result.data,
+        enabled: Boolean(event?.channelId),
+    });
+    const remove = useMutation({
+        mutationFn: () => fetchWithValidation(`/v1/distribution/webhook-events/${id}`, successEnvelope, client, {
+            method: "DELETE", // i18n-literal-ok HTTP method
+        }),
+        onSuccess: () => {
+            void queryClient.invalidateQueries({ queryKey: distributionQueryKeys.webhookEvents() });
+            queryClient.removeQueries({ queryKey: distributionQueryKeys.webhookEvent(id) });
+            onDeleted();
+            onBack();
+        },
+    });
+    if (eventQuery.isPending) {
+        return (_jsx("div", { className: "flex items-center justify-center py-12", children: _jsx(Loader2, { className: "h-6 w-6 animate-spin text-muted-foreground" }) }));
+    }
+    if (!event) {
+        return (_jsxs("div", { className: "flex flex-col items-center justify-center gap-4 py-12", children: [_jsx("p", { className: "text-muted-foreground", children: detail.notFound }), _jsx(Button, { variant: "outline", onClick: onBack, children: messages.common.backToDistribution })] }));
+    }
+    return (_jsxs("div", { "data-slot": "webhook-event-detail-page", className: cn("flex flex-col gap-6 p-6", className), children: [_jsxs("div", { className: "flex items-center gap-4", children: [_jsx(Button, { variant: "ghost", size: "icon", onClick: onBack, children: _jsx(ArrowLeft, { className: "h-4 w-4" }) }), _jsxs("div", { className: "flex-1", children: [_jsx("h1", { className: "text-2xl font-bold tracking-tight", children: detail.title }), _jsxs("div", { className: "mt-1 flex items-center gap-2", children: [_jsx(Badge, { variant: "outline", children: messages.common.webhookStatusLabels[event.status] }), _jsx(Badge, { variant: "secondary", children: event.eventType })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Button, { variant: "outline", onClick: () => onChannelOpen(event.channelId), children: [_jsx(Link2, { className: "mr-2 h-4 w-4" }), detail.openChannel] }), _jsx(ConfirmActionButton, { buttonLabel: detail.deleteButton, confirmLabel: detail.deleteButton, title: detail.deleteConfirm, description: detail.deleteDescription, variant: "destructive", confirmVariant: "destructive", disabled: remove.isPending, onConfirm: async () => {
+                                    await remove.mutateAsync();
+                                } })] })] }), _jsxs("div", { className: "grid gap-6 md:grid-cols-2", children: [_jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-center gap-2", children: [_jsx(Webhook, { className: "h-4 w-4" }), _jsx(CardTitle, { children: detail.sections.details })] }), _jsxs(CardContent, { className: "grid gap-3 text-sm", children: [_jsxs("div", { children: [_jsxs("span", { className: "text-muted-foreground", children: [messages.common.channelLabel, ":"] }), " ", _jsx("span", { children: channelQuery.data?.name ?? event.channelId })] }), _jsxs("div", { children: [_jsxs("span", { className: "text-muted-foreground", children: [detail.labels.externalEvent, ":"] }), " ", _jsx("span", { children: event.externalEventId ?? messages.common.none })] }), _jsxs("div", { children: [_jsxs("span", { className: "text-muted-foreground", children: [detail.labels.received, ":"] }), " ", _jsx("span", { children: formatDistributionDateTime(event.receivedAt, i18n) })] }), _jsxs("div", { children: [_jsxs("span", { className: "text-muted-foreground", children: [detail.labels.processed, ":"] }), " ", _jsx("span", { children: formatDistributionDateTime(event.processedAt, i18n) })] }), _jsxs("div", { children: [_jsxs("span", { className: "text-muted-foreground", children: [messages.common.createdLabel, ":"] }), " ", _jsx("span", { children: formatDistributionDateTime(event.createdAt, i18n) })] }), _jsxs("div", { children: [_jsxs("span", { className: "text-muted-foreground", children: [messages.common.updatedLabel, ":"] }), " ", _jsx("span", { children: formatDistributionDateTime(event.updatedAt, i18n) })] }), event.errorMessage ? (_jsxs("div", { children: [_jsx("div", { className: "mb-1 text-muted-foreground", children: detail.labels.error }), _jsx("div", { className: "whitespace-pre-wrap rounded-md border p-3", children: event.errorMessage })] })) : null] })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: detail.sections.payload }) }), _jsx(CardContent, { className: "text-sm", children: _jsx("pre", { className: "overflow-x-auto rounded-md bg-muted p-3 text-xs", children: JSON.stringify(event.payload, null, 2) }) })] })] })] }));
+}