@voyantjs/plugin-smartbill 0.64.1 → 0.66.0

package/README.md

@@ -79,6 +79,47 @@ Use `retrySmartbillInvoiceArtifact({ runtime, client, externalRef, documentType
 })` to re-download and re-attach a SmartBill PDF from an existing external ref
 without issuing a new document.
 
+## Invoice UI
+
+The optional `./invoice-ui` entry ships React helpers for invoice detail pages.
+It reads SmartBill refs from `/v1/finance/invoices/:id/external-refs` using the
+`@voyantjs/finance-react` provider context and can be mounted in
+`InvoiceDetailPage`'s integration slot.
+
+```tsx
+import { InvoiceDetailPage } from "@voyantjs/finance-ui"
+import { SmartbillInvoicePanel } from "@voyantjs/plugin-smartbill/invoice-ui"
+
+export function InvoicePage({ invoiceId }: { invoiceId: string }) {
+  return (
+    <InvoiceDetailPage
+      id={invoiceId}
+      slots={{
+        integrationsContent: ({ invoice }) => (
+          <SmartbillInvoicePanel
+            invoiceId={invoice.id}
+            sendAction={{
+              onClick: () => requestSmartbillSend(invoice.id),
+            }}
+            retryAction={{
+              onClick: () => requestSmartbillRetry(invoice.id),
+            }}
+          />
+        ),
+      }}
+    />
+  )
+}
+```
+
+`SmartbillInvoicePanel` displays the SmartBill series, number, document type,
+sync status, sync errors, and document/PDF links when the external ref contains
+them. Hosts provide action callbacks such as send, retry, or proforma
+conversion because route shape and permissions remain app-owned. For custom
+layouts, use `useSmartbillInvoiceRef(invoiceId)` together with
+`resolveSmartbillInvoiceReferenceParts(ref)` and
+`getSmartbillInvoiceDocumentLinks(ref)`.
+
 ## Workflow Factories
 
 The package also ships scheduler-agnostic workflow factories for recurring
@@ -126,6 +167,7 @@ finance records.
 | `.` | Barrel re-exports |
 | `./plugin` | `smartbillPlugin(options)` — packaged adapter/subscriber bundle |
 | `./client` | `createSmartbillClient` — `createInvoice`, `cancelInvoice`, `viewPdf`, `getPaymentStatus`, etc. |
+| `./invoice-ui` | Optional React hooks, display helpers, and `SmartbillInvoicePanel` for invoice detail integrations |
 | `./mock` | `createSmartbillMockServer` — stateful local SmartBill-compatible mock for tests |
 | `./workflows` | Proforma conversion polling and drift reconciliation factories |
 | `./types` | SmartBill adapter and bundle types |

package/dist/invoice-ui-data.d.ts

@@ -0,0 +1,46 @@
+import { z } from "zod";
+export declare const smartbillInvoiceExternalRefSchema: z.ZodObject<{
+    id: z.ZodString;
+    invoiceId: z.ZodString;
+    provider: z.ZodString;
+    externalId: z.ZodNullable<z.ZodString>;
+    externalNumber: z.ZodNullable<z.ZodString>;
+    externalUrl: z.ZodNullable<z.ZodString>;
+    status: z.ZodNullable<z.ZodString>;
+    metadata: z.ZodNullable<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
+    syncedAt: z.ZodNullable<z.ZodUnion<readonly [z.ZodString, z.ZodDate]>>;
+    syncError: z.ZodNullable<z.ZodString>;
+    createdAt: z.ZodNullable<z.ZodUnion<readonly [z.ZodString, z.ZodDate]>>;
+    updatedAt: z.ZodNullable<z.ZodUnion<readonly [z.ZodString, z.ZodDate]>>;
+}, z.core.$strip>;
+export declare const smartbillInvoiceExternalRefsResponseSchema: z.ZodObject<{
+    data: z.ZodArray<z.ZodObject<{
+        id: z.ZodString;
+        invoiceId: z.ZodString;
+        provider: z.ZodString;
+        externalId: z.ZodNullable<z.ZodString>;
+        externalNumber: z.ZodNullable<z.ZodString>;
+        externalUrl: z.ZodNullable<z.ZodString>;
+        status: z.ZodNullable<z.ZodString>;
+        metadata: z.ZodNullable<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
+        syncedAt: z.ZodNullable<z.ZodUnion<readonly [z.ZodString, z.ZodDate]>>;
+        syncError: z.ZodNullable<z.ZodString>;
+        createdAt: z.ZodNullable<z.ZodUnion<readonly [z.ZodString, z.ZodDate]>>;
+        updatedAt: z.ZodNullable<z.ZodUnion<readonly [z.ZodString, z.ZodDate]>>;
+    }, z.core.$strip>>;
+}, z.core.$strip>;
+export type SmartbillInvoiceExternalRef = z.infer<typeof smartbillInvoiceExternalRefSchema>;
+export interface SmartbillInvoiceReferenceParts {
+    companyVatCode: string | null;
+    seriesName: string | null;
+    number: string | null;
+    documentType: "invoice" | "proforma" | string | null;
+}
+export interface SmartbillInvoiceDocumentLink {
+    label: string;
+    href: string;
+}
+export declare function selectSmartbillInvoiceRef(refs: ReadonlyArray<SmartbillInvoiceExternalRef>): SmartbillInvoiceExternalRef | null;
+export declare function resolveSmartbillInvoiceReferenceParts(ref: SmartbillInvoiceExternalRef | null | undefined): SmartbillInvoiceReferenceParts;
+export declare function getSmartbillInvoiceDocumentLinks(ref: SmartbillInvoiceExternalRef | null | undefined): SmartbillInvoiceDocumentLink[];
+//# sourceMappingURL=invoice-ui-data.d.ts.map

package/dist/invoice-ui-data.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"invoice-ui-data.d.ts","sourceRoot":"","sources":["../src/invoice-ui-data.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAA;AAEvB,eAAO,MAAM,iCAAiC;;;;;;;;;;;;;iBAa5C,CAAA;AAEF,eAAO,MAAM,0CAA0C;;;;;;;;;;;;;;;iBAErD,CAAA;AAEF,MAAM,MAAM,2BAA2B,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,iCAAiC,CAAC,CAAA;AAE3F,MAAM,WAAW,8BAA8B;IAC7C,cAAc,EAAE,MAAM,GAAG,IAAI,CAAA;IAC7B,UAAU,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,YAAY,EAAE,SAAS,GAAG,UAAU,GAAG,MAAM,GAAG,IAAI,CAAA;CACrD;AAED,MAAM,WAAW,4BAA4B;IAC3C,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;CACb;AAED,wBAAgB,yBAAyB,CACvC,IAAI,EAAE,aAAa,CAAC,2BAA2B,CAAC,GAC/C,2BAA2B,GAAG,IAAI,CAEpC;AAED,wBAAgB,qCAAqC,CACnD,GAAG,EAAE,2BAA2B,GAAG,IAAI,GAAG,SAAS,GAClD,8BAA8B,CAYhC;AAED,wBAAgB,gCAAgC,CAC9C,GAAG,EAAE,2BAA2B,GAAG,IAAI,GAAG,SAAS,GAClD,4BAA4B,EAAE,CAchC"}

package/dist/invoice-ui-data.js

@@ -0,0 +1,62 @@
+import { z } from "zod";
+export const smartbillInvoiceExternalRefSchema = z.object({
+    id: z.string(),
+    invoiceId: z.string(),
+    provider: z.string(),
+    externalId: z.string().nullable(),
+    externalNumber: z.string().nullable(),
+    externalUrl: z.string().nullable(),
+    status: z.string().nullable(),
+    metadata: z.record(z.string(), z.unknown()).nullable(),
+    syncedAt: z.union([z.string(), z.date()]).nullable(),
+    syncError: z.string().nullable(),
+    createdAt: z.union([z.string(), z.date()]).nullable(),
+    updatedAt: z.union([z.string(), z.date()]).nullable(),
+});
+export const smartbillInvoiceExternalRefsResponseSchema = z.object({
+    data: z.array(smartbillInvoiceExternalRefSchema),
+});
+export function selectSmartbillInvoiceRef(refs) {
+    return refs.find((ref) => ref.provider === "smartbill") ?? null;
+}
+export function resolveSmartbillInvoiceReferenceParts(ref) {
+    const metadata = coerceMetadata(ref?.metadata);
+    return {
+        companyVatCode: readMetadataString(metadata, "companyVatCode", "vatCode"),
+        seriesName: readMetadataString(metadata, "seriesName", "series"),
+        number: readMetadataString(metadata, "number", "invoiceNumber") ??
+            ref?.externalNumber ??
+            ref?.externalId ??
+            null,
+        documentType: readMetadataString(metadata, "documentType"),
+    };
+}
+export function getSmartbillInvoiceDocumentLinks(ref) {
+    const metadata = coerceMetadata(ref?.metadata);
+    const candidates = [
+        { label: "SmartBill document", href: ref?.externalUrl },
+        { label: "SmartBill PDF", href: readMetadataString(metadata, "pdfUrl", "downloadUrl") },
+        { label: "SmartBill invoice", href: readMetadataString(metadata, "invoiceUrl", "documentUrl") },
+    ];
+    const seen = new Set();
+    return candidates.flatMap((candidate) => {
+        const href = candidate.href?.trim();
+        if (!href || seen.has(href))
+            return [];
+        seen.add(href);
+        return [{ label: candidate.label, href }];
+    });
+}
+function coerceMetadata(value) {
+    return value && typeof value === "object" && !Array.isArray(value)
+        ? value
+        : null;
+}
+function readMetadataString(metadata, ...keys) {
+    for (const key of keys) {
+        const value = metadata?.[key];
+        if (typeof value === "string" && value.trim())
+            return value.trim();
+    }
+    return null;
+}

package/dist/invoice-ui.d.ts

@@ -0,0 +1,436 @@
+import type { ReactNode } from "react";
+import { type SmartbillInvoiceExternalRef } from "./invoice-ui-data.js";
+export { getSmartbillInvoiceDocumentLinks, resolveSmartbillInvoiceReferenceParts, type SmartbillInvoiceDocumentLink, type SmartbillInvoiceExternalRef, type SmartbillInvoiceReferenceParts, selectSmartbillInvoiceRef, } from "./invoice-ui-data.js";
+export interface UseSmartbillInvoiceRefsOptions {
+    enabled?: boolean;
+}
+export interface SmartbillInvoiceAction {
+    label?: string;
+    pending?: boolean;
+    disabled?: boolean;
+    onClick: () => void | Promise<void>;
+}
+export interface SmartbillInvoicePanelProps {
+    invoiceId: string;
+    externalRef?: SmartbillInvoiceExternalRef | null;
+    title?: ReactNode;
+    className?: string;
+    hideWhenEmpty?: boolean;
+    sendAction?: SmartbillInvoiceAction;
+    retryAction?: SmartbillInvoiceAction;
+    convertProformaAction?: SmartbillInvoiceAction;
+    extraActions?: ReactNode;
+}
+export declare function useSmartbillInvoiceRefs(invoiceId: string | null | undefined, options?: UseSmartbillInvoiceRefsOptions): import("@tanstack/react-query").UseQueryResult<{
+    id: string;
+    invoiceId: string;
+    provider: string;
+    externalId: string | null;
+    externalNumber: string | null;
+    externalUrl: string | null;
+    status: string | null;
+    metadata: Record<string, unknown> | null;
+    syncedAt: string | Date | null;
+    syncError: string | null;
+    createdAt: string | Date | null;
+    updatedAt: string | Date | null;
+}[], Error>;
+export declare function useSmartbillInvoiceRef(invoiceId: string | null | undefined, options?: UseSmartbillInvoiceRefsOptions): {
+    data: {
+        id: string;
+        invoiceId: string;
+        provider: string;
+        externalId: string | null;
+        externalNumber: string | null;
+        externalUrl: string | null;
+        status: string | null;
+        metadata: Record<string, unknown> | null;
+        syncedAt: string | Date | null;
+        syncError: string | null;
+        createdAt: string | Date | null;
+        updatedAt: string | Date | null;
+    } | null | undefined;
+    error: Error;
+    isError: true;
+    isPending: false;
+    isLoading: false;
+    isLoadingError: false;
+    isRefetchError: true;
+    isSuccess: false;
+    isPlaceholderData: false;
+    status: "error";
+    dataUpdatedAt: number;
+    errorUpdatedAt: number;
+    failureCount: number;
+    failureReason: Error | null;
+    errorUpdateCount: number;
+    isFetched: boolean;
+    isFetchedAfterMount: boolean;
+    isFetching: boolean;
+    isInitialLoading: boolean;
+    isPaused: boolean;
+    isRefetching: boolean;
+    isStale: boolean;
+    isEnabled: boolean;
+    refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<{
+        id: string;
+        invoiceId: string;
+        provider: string;
+        externalId: string | null;
+        externalNumber: string | null;
+        externalUrl: string | null;
+        status: string | null;
+        metadata: Record<string, unknown> | null;
+        syncedAt: string | Date | null;
+        syncError: string | null;
+        createdAt: string | Date | null;
+        updatedAt: string | Date | null;
+    }[], Error>>;
+    fetchStatus: import("@tanstack/react-query").FetchStatus;
+    promise: Promise<{
+        id: string;
+        invoiceId: string;
+        provider: string;
+        externalId: string | null;
+        externalNumber: string | null;
+        externalUrl: string | null;
+        status: string | null;
+        metadata: Record<string, unknown> | null;
+        syncedAt: string | Date | null;
+        syncError: string | null;
+        createdAt: string | Date | null;
+        updatedAt: string | Date | null;
+    }[]>;
+} | {
+    data: {
+        id: string;
+        invoiceId: string;
+        provider: string;
+        externalId: string | null;
+        externalNumber: string | null;
+        externalUrl: string | null;
+        status: string | null;
+        metadata: Record<string, unknown> | null;
+        syncedAt: string | Date | null;
+        syncError: string | null;
+        createdAt: string | Date | null;
+        updatedAt: string | Date | null;
+    } | null | undefined;
+    error: null;
+    isError: false;
+    isPending: false;
+    isLoading: false;
+    isLoadingError: false;
+    isRefetchError: false;
+    isSuccess: true;
+    isPlaceholderData: false;
+    status: "success";
+    dataUpdatedAt: number;
+    errorUpdatedAt: number;
+    failureCount: number;
+    failureReason: Error | null;
+    errorUpdateCount: number;
+    isFetched: boolean;
+    isFetchedAfterMount: boolean;
+    isFetching: boolean;
+    isInitialLoading: boolean;
+    isPaused: boolean;
+    isRefetching: boolean;
+    isStale: boolean;
+    isEnabled: boolean;
+    refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<{
+        id: string;
+        invoiceId: string;
+        provider: string;
+        externalId: string | null;
+        externalNumber: string | null;
+        externalUrl: string | null;
+        status: string | null;
+        metadata: Record<string, unknown> | null;
+        syncedAt: string | Date | null;
+        syncError: string | null;
+        createdAt: string | Date | null;
+        updatedAt: string | Date | null;
+    }[], Error>>;
+    fetchStatus: import("@tanstack/react-query").FetchStatus;
+    promise: Promise<{
+        id: string;
+        invoiceId: string;
+        provider: string;
+        externalId: string | null;
+        externalNumber: string | null;
+        externalUrl: string | null;
+        status: string | null;
+        metadata: Record<string, unknown> | null;
+        syncedAt: string | Date | null;
+        syncError: string | null;
+        createdAt: string | Date | null;
+        updatedAt: string | Date | null;
+    }[]>;
+} | {
+    data: {
+        id: string;
+        invoiceId: string;
+        provider: string;
+        externalId: string | null;
+        externalNumber: string | null;
+        externalUrl: string | null;
+        status: string | null;
+        metadata: Record<string, unknown> | null;
+        syncedAt: string | Date | null;
+        syncError: string | null;
+        createdAt: string | Date | null;
+        updatedAt: string | Date | null;
+    } | null | undefined;
+    error: Error;
+    isError: true;
+    isPending: false;
+    isLoading: false;
+    isLoadingError: true;
+    isRefetchError: false;
+    isSuccess: false;
+    isPlaceholderData: false;
+    status: "error";
+    dataUpdatedAt: number;
+    errorUpdatedAt: number;
+    failureCount: number;
+    failureReason: Error | null;
+    errorUpdateCount: number;
+    isFetched: boolean;
+    isFetchedAfterMount: boolean;
+    isFetching: boolean;
+    isInitialLoading: boolean;
+    isPaused: boolean;
+    isRefetching: boolean;
+    isStale: boolean;
+    isEnabled: boolean;
+    refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<{
+        id: string;
+        invoiceId: string;
+        provider: string;
+        externalId: string | null;
+        externalNumber: string | null;
+        externalUrl: string | null;
+        status: string | null;
+        metadata: Record<string, unknown> | null;
+        syncedAt: string | Date | null;
+        syncError: string | null;
+        createdAt: string | Date | null;
+        updatedAt: string | Date | null;
+    }[], Error>>;
+    fetchStatus: import("@tanstack/react-query").FetchStatus;
+    promise: Promise<{
+        id: string;
+        invoiceId: string;
+        provider: string;
+        externalId: string | null;
+        externalNumber: string | null;
+        externalUrl: string | null;
+        status: string | null;
+        metadata: Record<string, unknown> | null;
+        syncedAt: string | Date | null;
+        syncError: string | null;
+        createdAt: string | Date | null;
+        updatedAt: string | Date | null;
+    }[]>;
+} | {
+    data: {
+        id: string;
+        invoiceId: string;
+        provider: string;
+        externalId: string | null;
+        externalNumber: string | null;
+        externalUrl: string | null;
+        status: string | null;
+        metadata: Record<string, unknown> | null;
+        syncedAt: string | Date | null;
+        syncError: string | null;
+        createdAt: string | Date | null;
+        updatedAt: string | Date | null;
+    } | null | undefined;
+    error: null;
+    isError: false;
+    isPending: true;
+    isLoading: true;
+    isLoadingError: false;
+    isRefetchError: false;
+    isSuccess: false;
+    isPlaceholderData: false;
+    status: "pending";
+    dataUpdatedAt: number;
+    errorUpdatedAt: number;
+    failureCount: number;
+    failureReason: Error | null;
+    errorUpdateCount: number;
+    isFetched: boolean;
+    isFetchedAfterMount: boolean;
+    isFetching: boolean;
+    isInitialLoading: boolean;
+    isPaused: boolean;
+    isRefetching: boolean;
+    isStale: boolean;
+    isEnabled: boolean;
+    refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<{
+        id: string;
+        invoiceId: string;
+        provider: string;
+        externalId: string | null;
+        externalNumber: string | null;
+        externalUrl: string | null;
+        status: string | null;
+        metadata: Record<string, unknown> | null;
+        syncedAt: string | Date | null;
+        syncError: string | null;
+        createdAt: string | Date | null;
+        updatedAt: string | Date | null;
+    }[], Error>>;
+    fetchStatus: import("@tanstack/react-query").FetchStatus;
+    promise: Promise<{
+        id: string;
+        invoiceId: string;
+        provider: string;
+        externalId: string | null;
+        externalNumber: string | null;
+        externalUrl: string | null;
+        status: string | null;
+        metadata: Record<string, unknown> | null;
+        syncedAt: string | Date | null;
+        syncError: string | null;
+        createdAt: string | Date | null;
+        updatedAt: string | Date | null;
+    }[]>;
+} | {
+    data: {
+        id: string;
+        invoiceId: string;
+        provider: string;
+        externalId: string | null;
+        externalNumber: string | null;
+        externalUrl: string | null;
+        status: string | null;
+        metadata: Record<string, unknown> | null;
+        syncedAt: string | Date | null;
+        syncError: string | null;
+        createdAt: string | Date | null;
+        updatedAt: string | Date | null;
+    } | null | undefined;
+    error: null;
+    isError: false;
+    isPending: true;
+    isLoadingError: false;
+    isRefetchError: false;
+    isSuccess: false;
+    isPlaceholderData: false;
+    status: "pending";
+    dataUpdatedAt: number;
+    errorUpdatedAt: number;
+    failureCount: number;
+    failureReason: Error | null;
+    errorUpdateCount: number;
+    isFetched: boolean;
+    isFetchedAfterMount: boolean;
+    isFetching: boolean;
+    isLoading: boolean;
+    isInitialLoading: boolean;
+    isPaused: boolean;
+    isRefetching: boolean;
+    isStale: boolean;
+    isEnabled: boolean;
+    refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<{
+        id: string;
+        invoiceId: string;
+        provider: string;
+        externalId: string | null;
+        externalNumber: string | null;
+        externalUrl: string | null;
+        status: string | null;
+        metadata: Record<string, unknown> | null;
+        syncedAt: string | Date | null;
+        syncError: string | null;
+        createdAt: string | Date | null;
+        updatedAt: string | Date | null;
+    }[], Error>>;
+    fetchStatus: import("@tanstack/react-query").FetchStatus;
+    promise: Promise<{
+        id: string;
+        invoiceId: string;
+        provider: string;
+        externalId: string | null;
+        externalNumber: string | null;
+        externalUrl: string | null;
+        status: string | null;
+        metadata: Record<string, unknown> | null;
+        syncedAt: string | Date | null;
+        syncError: string | null;
+        createdAt: string | Date | null;
+        updatedAt: string | Date | null;
+    }[]>;
+} | {
+    data: {
+        id: string;
+        invoiceId: string;
+        provider: string;
+        externalId: string | null;
+        externalNumber: string | null;
+        externalUrl: string | null;
+        status: string | null;
+        metadata: Record<string, unknown> | null;
+        syncedAt: string | Date | null;
+        syncError: string | null;
+        createdAt: string | Date | null;
+        updatedAt: string | Date | null;
+    } | null | undefined;
+    isError: false;
+    error: null;
+    isPending: false;
+    isLoading: false;
+    isLoadingError: false;
+    isRefetchError: false;
+    isSuccess: true;
+    isPlaceholderData: true;
+    status: "success";
+    dataUpdatedAt: number;
+    errorUpdatedAt: number;
+    failureCount: number;
+    failureReason: Error | null;
+    errorUpdateCount: number;
+    isFetched: boolean;
+    isFetchedAfterMount: boolean;
+    isFetching: boolean;
+    isInitialLoading: boolean;
+    isPaused: boolean;
+    isRefetching: boolean;
+    isStale: boolean;
+    isEnabled: boolean;
+    refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<{
+        id: string;
+        invoiceId: string;
+        provider: string;
+        externalId: string | null;
+        externalNumber: string | null;
+        externalUrl: string | null;
+        status: string | null;
+        metadata: Record<string, unknown> | null;
+        syncedAt: string | Date | null;
+        syncError: string | null;
+        createdAt: string | Date | null;
+        updatedAt: string | Date | null;
+    }[], Error>>;
+    fetchStatus: import("@tanstack/react-query").FetchStatus;
+    promise: Promise<{
+        id: string;
+        invoiceId: string;
+        provider: string;
+        externalId: string | null;
+        externalNumber: string | null;
+        externalUrl: string | null;
+        status: string | null;
+        metadata: Record<string, unknown> | null;
+        syncedAt: string | Date | null;
+        syncError: string | null;
+        createdAt: string | Date | null;
+        updatedAt: string | Date | null;
+    }[]>;
+};
+export declare function SmartbillInvoicePanel({ invoiceId, externalRef, title, className, hideWhenEmpty, sendAction, retryAction, convertProformaAction, extraActions, }: SmartbillInvoicePanelProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=invoice-ui.d.ts.map

package/dist/invoice-ui.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"invoice-ui.d.ts","sourceRoot":"","sources":["../src/invoice-ui.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,EAGL,KAAK,2BAA2B,EAGjC,MAAM,sBAAsB,CAAA;AAE7B,OAAO,EACL,gCAAgC,EAChC,qCAAqC,EACrC,KAAK,4BAA4B,EACjC,KAAK,2BAA2B,EAChC,KAAK,8BAA8B,EACnC,yBAAyB,GAC1B,MAAM,sBAAsB,CAAA;AAE7B,MAAM,WAAW,8BAA8B;IAC7C,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,MAAM,WAAW,sBAAsB;IACrC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;CACpC;AAED,MAAM,WAAW,0BAA0B;IACzC,SAAS,EAAE,MAAM,CAAA;IACjB,WAAW,CAAC,EAAE,2BAA2B,GAAG,IAAI,CAAA;IAChD,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,UAAU,CAAC,EAAE,sBAAsB,CAAA;IACnC,WAAW,CAAC,EAAE,sBAAsB,CAAA;IACpC,qBAAqB,CAAC,EAAE,sBAAsB,CAAA;IAC9C,YAAY,CAAC,EAAE,SAAS,CAAA;CACzB;AAED,wBAAgB,uBAAuB,CACrC,SAAS,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EACpC,OAAO,GAAE,8BAAmC;;;;;;;;;;;;;YAiB7C;AAED,wBAAgB,sBAAsB,CACpC,SAAS,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EACpC,OAAO,GAAE,8BAAmC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAO7C;AAED,wBAAgB,qBAAqB,CAAC,EACpC,SAAS,EACT,WAAW,EACX,KAAmB,EACnB,SAAS,EACT,aAAqB,EACrB,UAAU,EACV,WAAW,EACX,qBAAqB,EACrB,YAAY,GACb,EAAE,0BAA0B,kDA8F5B"}

package/dist/invoice-ui.js

@@ -0,0 +1,56 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useQuery } from "@tanstack/react-query";
+import { fetchWithValidation, useVoyantFinanceContext } from "@voyantjs/finance-react";
+import { Badge, Button, buttonVariants, Card, CardAction, CardContent, CardHeader, CardTitle, } from "@voyantjs/ui/components";
+import { cn } from "@voyantjs/ui/lib/utils";
+import { ExternalLink, FileText, Loader2, RefreshCw, Send } from "lucide-react";
+import { getSmartbillInvoiceDocumentLinks, resolveSmartbillInvoiceReferenceParts, selectSmartbillInvoiceRef, smartbillInvoiceExternalRefsResponseSchema, } from "./invoice-ui-data.js";
+export { getSmartbillInvoiceDocumentLinks, resolveSmartbillInvoiceReferenceParts, selectSmartbillInvoiceRef, } from "./invoice-ui-data.js";
+export function useSmartbillInvoiceRefs(invoiceId, options = {}) {
+    const { baseUrl, fetcher } = useVoyantFinanceContext();
+    const { enabled = true } = options;
+    return useQuery({
+        queryKey: ["voyant", "smartbill", "invoice", invoiceId, "external-refs"],
+        queryFn: async () => {
+            const response = await fetchWithValidation(`/v1/finance/invoices/${encodeURIComponent(invoiceId ?? "")}/external-refs`, smartbillInvoiceExternalRefsResponseSchema, { baseUrl, fetcher });
+            return response.data.filter((ref) => ref.provider === "smartbill");
+        },
+        enabled: enabled && Boolean(invoiceId),
+    });
+}
+export function useSmartbillInvoiceRef(invoiceId, options = {}) {
+    const query = useSmartbillInvoiceRefs(invoiceId, options);
+    return {
+        ...query,
+        data: query.data ? selectSmartbillInvoiceRef(query.data) : undefined,
+    };
+}
+export function SmartbillInvoicePanel({ invoiceId, externalRef, title = "SmartBill", className, hideWhenEmpty = false, sendAction, retryAction, convertProformaAction, extraActions, }) {
+    const query = useSmartbillInvoiceRef(invoiceId, { enabled: externalRef === undefined });
+    const ref = externalRef === undefined ? query.data : externalRef;
+    const isLoading = externalRef === undefined && query.isPending;
+    const isError = externalRef === undefined && query.isError;
+    if (hideWhenEmpty && !isLoading && !isError && !ref) {
+        return null;
+    }
+    const reference = resolveSmartbillInvoiceReferenceParts(ref);
+    const documentLinks = getSmartbillInvoiceDocumentLinks(ref);
+    const status = ref?.syncError ? "error" : (ref?.status ?? null);
+    const canConvertProforma = reference.documentType === "proforma" && convertProformaAction;
+    return (_jsxs(Card, { "data-slot": "smartbill-invoice-panel", size: "sm", className: className, children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "flex min-w-0 items-center gap-2", children: [_jsx(FileText, { className: "size-4 text-muted-foreground", "aria-hidden": "true" }), _jsx("span", { className: "truncate", children: title })] }), _jsx(CardAction, { children: status ? (_jsx(Badge, { variant: status === "error" ? "destructive" : "outline", children: status })) : null })] }), _jsxs(CardContent, { className: "grid gap-4", children: [isLoading ? (_jsxs("div", { className: "flex items-center gap-2 text-muted-foreground text-sm", children: [_jsx(Loader2, { className: "size-4 animate-spin", "aria-hidden": "true" }), "Loading SmartBill state"] })) : isError ? (_jsx("p", { className: "text-destructive text-sm", children: "SmartBill state could not be loaded." })) : ref ? (_jsxs("div", { className: "grid gap-3 text-sm", children: [_jsxs("dl", { className: "grid gap-2 sm:grid-cols-2", children: [_jsx(SmartbillField, { label: "Series", children: reference.seriesName ?? "-" }), _jsx(SmartbillField, { label: "Number", children: reference.number ?? "-" }), _jsx(SmartbillField, { label: "Type", children: reference.documentType ?? "-" }), _jsx(SmartbillField, { label: "Synced", children: formatDateTime(ref.syncedAt) ?? "-" })] }), ref.syncError ? (_jsx("p", { className: "rounded-md border border-destructive/20 bg-destructive/5 p-2 text-destructive", children: ref.syncError })) : null, documentLinks.length > 0 ? (_jsx("div", { className: "flex flex-wrap gap-2", children: documentLinks.map((link) => (_jsxs("a", { href: link.href, target: "_blank", rel: "noreferrer", className: buttonVariants({ variant: "outline", size: "sm" }), children: [_jsx(ExternalLink, { className: "size-4", "aria-hidden": "true" }), link.label] }, link.href))) })) : null] })) : (_jsx("p", { className: "text-muted-foreground text-sm", children: "No SmartBill reference is linked yet." })), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [!ref && sendAction ? (_jsx(SmartbillActionButton, { action: sendAction, icon: _jsx(Send, { className: "size-4" }), children: sendAction.label ?? "Send to SmartBill" })) : null, retryAction ? (_jsx(SmartbillActionButton, { action: retryAction, icon: _jsx(RefreshCw, { className: "size-4" }), children: retryAction.label ?? "Retry sync" })) : null, canConvertProforma ? (_jsx(SmartbillActionButton, { action: convertProformaAction, icon: _jsx(RefreshCw, { className: "size-4" }), children: convertProformaAction.label ?? "Convert proforma" })) : null, extraActions] })] })] }));
+}
+function SmartbillField({ label, children }) {
+    return (_jsxs("div", { className: "grid gap-1", children: [_jsx("dt", { className: "text-muted-foreground text-xs uppercase", children: label }), _jsx("dd", { className: "break-words font-medium", children: children })] }));
+}
+function SmartbillActionButton({ action, icon, children, }) {
+    return (_jsxs(Button, { type: "button", variant: "outline", size: "sm", disabled: action.disabled || action.pending, onClick: () => void action.onClick(), children: [_jsx("span", { className: cn(action.pending && "animate-spin"), children: action.pending ? _jsx(Loader2, { className: "size-4", "aria-hidden": "true" }) : icon }), children] }));
+}
+function formatDateTime(value) {
+    if (!value)
+        return null;
+    const date = value instanceof Date ? value : new Date(value);
+    if (Number.isNaN(date.getTime()))
+        return null;
+    return new Intl.DateTimeFormat(undefined, { dateStyle: "medium", timeStyle: "short" }).format(date);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@voyantjs/plugin-smartbill",
-  "version": "0.64.1",
+  "version": "0.66.0",
   "license": "Apache-2.0",
   "type": "module",
   "exports": {
@@ -24,6 +24,11 @@
       "import": "./dist/plugin.js",
       "default": "./dist/plugin.js"
     },
+    "./invoice-ui": {
+      "types": "./dist/invoice-ui.d.ts",
+      "import": "./dist/invoice-ui.js",
+      "default": "./dist/invoice-ui.js"
+    },
     "./settlement": {
       "types": "./dist/settlement.d.ts",
       "import": "./dist/settlement.js",
@@ -43,13 +48,49 @@
   "dependencies": {
     "drizzle-orm": "^0.45.2",
     "zod": "^4.3.6",
-    "@voyantjs/core": "0.64.1",
-    "@voyantjs/finance": "0.64.1",
-    "@voyantjs/storage": "0.64.1"
+    "@voyantjs/core": "0.66.0",
+    "@voyantjs/finance": "0.66.0",
+    "@voyantjs/storage": "0.66.0"
+  },
+  "peerDependencies": {
+    "@tanstack/react-query": "^5.0.0",
+    "lucide-react": "^0.475.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@voyantjs/finance-react": "0.66.0",
+    "@voyantjs/ui": "0.66.0"
+  },
+  "peerDependenciesMeta": {
+    "@tanstack/react-query": {
+      "optional": true
+    },
+    "@voyantjs/finance-react": {
+      "optional": true
+    },
+    "@voyantjs/ui": {
+      "optional": true
+    },
+    "lucide-react": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
   },
   "devDependencies": {
+    "@tanstack/react-query": "^5.100.11",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "lucide-react": "^0.475.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
     "typescript": "^6.0.2",
     "vitest": "^4.1.2",
+    "@voyantjs/finance-react": "0.66.0",
+    "@voyantjs/ui": "0.66.0",
     "@voyantjs/voyant-typescript-config": "0.1.0"
   },
   "files": [