@webority/support-react 0.13.0

package/dist/types/ReportIssue.d.ts

@@ -0,0 +1,23 @@
+/**
+ * A "Report an issue" button. It takes a screenshot of the page first, then opens a dialog
+ * where the person describes the problem, reviews or removes the screenshot, and adds more
+ * images. The ticket carries the page address, the browser and the product version.
+ *
+ * @param {object} props
+ * @param {string} [props.label="Report an issue"] The button text.
+ * @param {boolean} [props.floating=false] Pin the button to the bottom corner of the screen.
+ * @param {string} [props.defaultCategory="Bug report"] Preselected when the config lists it.
+ * @param {string} [props.appVersion] The product build, recorded on the ticket.
+ * @param {(id: string) => string} [props.getTicketHref] Where the new ticket can be opened; shows a View ticket link.
+ * @param {(ticket: any) => void} [props.onOpenTicket] Called by the View ticket button when there is no href.
+ * @param {(ticket: any) => void} [props.onCreated] Called once the ticket is raised.
+ */
+export default function ReportIssue({ label, floating, defaultCategory, appVersion, getTicketHref, onOpenTicket, onCreated, }: {
+    label?: string;
+    floating?: boolean;
+    defaultCategory?: string;
+    appVersion?: string;
+    getTicketHref?: (id: string) => string;
+    onOpenTicket?: (ticket: any) => void;
+    onCreated?: (ticket: any) => void;
+}): import("react").JSX.Element;

package/dist/types/SupportCenter.d.ts

@@ -0,0 +1,15 @@
+/**
+ * The customer's support page: their tickets, one ticket's conversation, and a New ticket
+ * dialog. Opens the ticket named by `?ticket=<id>` in the address (support emails link there),
+ * or `initialTicketId` when given, and keeps that parameter in step as tickets open and close.
+ *
+ * @param {object} props
+ * @param {string} [props.initialTicketId] Open this ticket first. Wins over the address.
+ * @param {string} [props.defaultCategory] Preselected in the New ticket form when the config lists it.
+ * @param {string} [props.appVersion] The product build, recorded on new tickets.
+ */
+export default function SupportCenter({ initialTicketId, defaultCategory, appVersion }: {
+    initialTicketId?: string;
+    defaultCategory?: string;
+    appVersion?: string;
+}): import("react").JSX.Element;

package/dist/types/SupportContact.d.ts

@@ -0,0 +1,10 @@
+/**
+ * How to reach support: the email address with a copy button, the phone number as a call link,
+ * and the hours. A field the product has not set is left out; nothing renders when none is set.
+ *
+ * @param {object} props
+ * @param {string} [props.className]
+ */
+export default function SupportContact({ className }: {
+    className?: string;
+}): import("react").JSX.Element;

package/dist/types/SupportProvider.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Makes a support client available to every support component and hook below it.
+ *
+ * @param {object} props
+ * @param {import('./client.js').SupportClient} props.client From `createSupportClient(http)`.
+ * @param {import('react').ReactNode} props.children
+ */
+export default function SupportProvider({ client, children }: {
+    client: import('./client.js').SupportClient;
+    children: import('react').ReactNode;
+}): import("react").JSX.Element;

package/dist/types/client.d.ts

@@ -0,0 +1,102 @@
+/**
+ * A failed support request. `message` is written for the person and is safe to show as-is.
+ */
+export declare class SupportApiError extends Error {
+    code: string;
+    status: number;
+    /**
+     * @param {string} code Machine-readable reason from the API, or "network" when no response arrived.
+     * @param {string} message The sentence to show the person.
+     * @param {number} [status] HTTP status, when a response arrived.
+     */
+    constructor(code: string, message: string, status?: number);
+}
+export type SupportHttp = {
+    get: (url: string, config?: object) => Promise<{
+        data: any;
+    }>;
+    post: (url: string, data?: any, config?: object) => Promise<{
+        data: any;
+    }>;
+};
+export type NewTicketInput = {
+    category: string;
+    subject: string;
+    body: string;
+    pageUrl?: string;
+    userAgent?: string;
+    appVersion?: string;
+    /**
+     * Files the person picked, pasted or dropped.
+     */
+    files?: Blob[];
+    /**
+     * Page captures taken by the report-an-issue widget.
+     */
+    screenshots?: Blob[];
+};
+export type ReplyInput = {
+    body: string;
+    files?: Blob[];
+    screenshots?: Blob[];
+};
+export type RatingInput = {
+    satisfaction: "Satisfied" | "Unsatisfied";
+    comment?: string;
+};
+export type SupportClient = {
+    getConfig: () => Promise<any>;
+    listTickets: () => Promise<any[]>;
+    getTicket: (id: string) => Promise<any>;
+    createTicket: (input: NewTicketInput) => Promise<any>;
+    reply: (id: string, input: ReplyInput) => Promise<any>;
+    reopen: (id: string) => Promise<any>;
+    rate: (id: string, input: RatingInput) => Promise<any>;
+    fetchAttachment: (id: string) => Promise<Blob>;
+};
+/**
+ * @typedef {object} SupportHttp An axios-like HTTP client that already carries the bearer token.
+ * @property {(url: string, config?: object) => Promise<{ data: any }>} get
+ * @property {(url: string, data?: any, config?: object) => Promise<{ data: any }>} post
+ */
+/**
+ * @typedef {object} NewTicketInput
+ * @property {string} category
+ * @property {string} subject
+ * @property {string} body
+ * @property {string} [pageUrl]
+ * @property {string} [userAgent]
+ * @property {string} [appVersion]
+ * @property {Blob[]} [files] Files the person picked, pasted or dropped.
+ * @property {Blob[]} [screenshots] Page captures taken by the report-an-issue widget.
+ */
+/**
+ * @typedef {object} ReplyInput
+ * @property {string} body
+ * @property {Blob[]} [files]
+ * @property {Blob[]} [screenshots]
+ */
+/**
+ * @typedef {object} RatingInput
+ * @property {"Satisfied"|"Unsatisfied"} satisfaction
+ * @property {string} [comment]
+ */
+/**
+ * @typedef {object} SupportClient
+ * @property {() => Promise<any>} getConfig
+ * @property {() => Promise<any[]>} listTickets
+ * @property {(id: string) => Promise<any>} getTicket
+ * @property {(input: NewTicketInput) => Promise<any>} createTicket
+ * @property {(id: string, input: ReplyInput) => Promise<any>} reply
+ * @property {(id: string) => Promise<any>} reopen
+ * @property {(id: string, input: RatingInput) => Promise<any>} rate
+ * @property {(id: string) => Promise<Blob>} fetchAttachment
+ */
+/**
+ * Binds the support HTTP contract to the product's own authenticated client.
+ *
+ * @param {SupportHttp} http The product's axios-like instance (bearer token and refresh already wired).
+ * @param {string} [basePath="/api/support"] The prefix the API maps the support endpoints under.
+ * @returns {SupportClient}
+ */
+export declare function createSupportClient(http: SupportHttp, basePath?: string): SupportClient;

package/dist/types/components/AttachmentField.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Picked, dropped or pasted files for a message, limited to what the support config allows.
+ *
+ * @param {object} props
+ * @param {string} [props.id]
+ * @param {string} [props.label="Attachments"]
+ * @param {File[]} props.files
+ * @param {(files: File[]) => void} props.onChange
+ * @param {{ maxAttachmentBytes?: number, allowedContentTypes?: string[] }|null} [props.config]
+ * @param {string} [props.error]
+ */
+export default function AttachmentField({ id, label, files, onChange, config, error }: {
+    id?: string;
+    label?: string;
+    files: File[];
+    onChange: (files: File[]) => void;
+    config?: {
+        maxAttachmentBytes?: number;
+        allowedContentTypes?: string[];
+    } | null;
+    error?: string;
+}): import("react").JSX.Element;

package/dist/types/components/AttachmentThumb.d.ts

@@ -0,0 +1,16 @@
+/**
+ * One attachment on a message. The bytes need the bearer token, so they are fetched through the
+ * support client into an object URL that is revoked when the thumbnail goes away.
+ *
+ * @param {object} props
+ * @param {{ id: string, fileName: string, contentType: string, sizeBytes: number, kind: string }} props.attachment
+ */
+export default function AttachmentThumb({ attachment }: {
+    attachment: {
+        id: string;
+        fileName: string;
+        contentType: string;
+        sizeBytes: number;
+        kind: string;
+    };
+}): import("react").JSX.Element;

package/dist/types/components/MessageThread.d.ts

@@ -0,0 +1,17 @@
+/**
+ * A ticket's conversation. The customer's own messages sit on the right, the support team's on
+ * the left, and status or assignment events show as small centred lines.
+ *
+ * @param {object} props
+ * @param {{ id: string, authorKind: string, authorName: string|null, body: string, createdDateTimeUtc: string, attachments: any[] }[]} props.messages
+ */
+export default function MessageThread({ messages }: {
+    messages: {
+        id: string;
+        authorKind: string;
+        authorName: string | null;
+        body: string;
+        createdDateTimeUtc: string;
+        attachments: any[];
+    }[];
+}): import("react").JSX.Element;

package/dist/types/components/NewTicketModal.d.ts

@@ -0,0 +1,19 @@
+/**
+ * The New ticket dialog.
+ *
+ * @param {object} props
+ * @param {boolean} props.open
+ * @param {() => void} props.onClose
+ * @param {(ticket: any) => void} props.onCreated Receives the new ticket.
+ * @param {any} props.config
+ * @param {string} [props.defaultCategory]
+ * @param {string} [props.appVersion] Recorded on the ticket so support knows which build you were on.
+ */
+export default function NewTicketModal({ open, onClose, onCreated, config, defaultCategory, appVersion }: {
+    open: boolean;
+    onClose: () => void;
+    onCreated: (ticket: any) => void;
+    config: any;
+    defaultCategory?: string;
+    appVersion?: string;
+}): import("react").JSX.Element;

package/dist/types/components/RatingPanel.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Asks whether a settled ticket solved the problem, or shows the answer already given.
+ *
+ * @param {object} props
+ * @param {"Satisfied"|"Unsatisfied"|null} [props.satisfaction] The rating already given, if any.
+ * @param {string|null} [props.comment] The comment given with it.
+ * @param {boolean} [props.canRate=false]
+ * @param {number} [props.commentMaxLength] From the support config.
+ * @param {(input: { satisfaction: "Satisfied"|"Unsatisfied", comment: string }) => Promise<unknown>} props.onRate
+ */
+export default function RatingPanel({ satisfaction, comment, canRate, commentMaxLength, onRate }: {
+    satisfaction?: "Satisfied" | "Unsatisfied" | null;
+    comment?: string | null;
+    canRate?: boolean;
+    commentMaxLength?: number;
+    onRate: (input: {
+        satisfaction: "Satisfied" | "Unsatisfied";
+        comment: string;
+    }) => Promise<unknown>;
+}): import("react").JSX.Element;

package/dist/types/components/ReplyBox.d.ts

@@ -0,0 +1,16 @@
+/**
+ * The customer's reply to a ticket, with attachments. Images pasted into the message are attached.
+ *
+ * @param {object} props
+ * @param {(input: { body: string, files: File[] }) => Promise<unknown>} props.onSend Rejects with a SupportApiError on failure.
+ * @param {any} [props.config] The support config, for the text and attachment limits.
+ * @param {boolean} [props.reopens=false] The ticket is settled, so a reply reopens it.
+ */
+export default function ReplyBox({ onSend, config, reopens }: {
+    onSend: (input: {
+        body: string;
+        files: File[];
+    }) => Promise<unknown>;
+    config?: any;
+    reopens?: boolean;
+}): import("react").JSX.Element;

package/dist/types/components/TicketDetail.d.ts

@@ -0,0 +1,13 @@
+/**
+ * One ticket: its facts, the conversation, and what the customer can do next.
+ *
+ * @param {object} props
+ * @param {string} props.ticketId
+ * @param {() => void} props.onBack Return to the ticket list.
+ * @param {() => void} [props.onChanged] The ticket changed (reply, reopen, rating), so a list can refresh.
+ */
+export default function TicketDetail({ ticketId, onBack, onChanged }: {
+    ticketId: string;
+    onBack: () => void;
+    onChanged?: () => void;
+}): import("react").JSX.Element;

package/dist/types/components/TicketForm.d.ts

@@ -0,0 +1,28 @@
+/**
+ * The fields of a new ticket: category, subject, message and attachments. Validates against the
+ * support config before anything uploads. The submit button lives outside (a modal footer), tied
+ * to this form by `id`.
+ *
+ * @param {object} props
+ * @param {string} props.id The form's id, for a submit button outside it.
+ * @param {any} props.config The support config: categories, text limits and attachment limits.
+ * @param {string} [props.defaultCategory] Preselected when the config lists it.
+ * @param {Blob[]} [props.extraFiles] Files that ride along from elsewhere (a page capture), counted against the limits.
+ * @param {(values: { category: string, subject: string, body: string, files: File[] }) => Promise<unknown>} props.onSubmit Rejects with a SupportApiError on failure.
+ * @param {(busy: boolean) => void} [props.onBusyChange]
+ * @param {import('react').ReactNode} [props.children] Shown above the attachments, such as a capture preview.
+ */
+export default function TicketForm({ id, config, defaultCategory, extraFiles, onSubmit, onBusyChange, children }: {
+    id: string;
+    config: any;
+    defaultCategory?: string;
+    extraFiles?: Blob[];
+    onSubmit: (values: {
+        category: string;
+        subject: string;
+        body: string;
+        files: File[];
+    }) => Promise<unknown>;
+    onBusyChange?: (busy: boolean) => void;
+    children?: import('react').ReactNode;
+}): import("react").JSX.Element;

package/dist/types/components/TicketList.d.ts

@@ -0,0 +1,17 @@
+/**
+ * The customer's tickets with status tabs and a search box.
+ *
+ * @param {object} props
+ * @param {any[]} props.tickets
+ * @param {boolean} props.loading
+ * @param {any} [props.error]
+ * @param {() => void} props.onRetry
+ * @param {(id: string) => void} props.onOpen
+ */
+export default function TicketList({ tickets, loading, error, onRetry, onOpen }: {
+    tickets: any[];
+    loading: boolean;
+    error?: any;
+    onRetry: () => void;
+    onOpen: (id: string) => void;
+}): import("react").JSX.Element;

package/dist/types/context.d.ts

@@ -0,0 +1,54 @@
+/** @type {import('react').Context<{ client: import('./client.js').SupportClient, loadConfig: (fresh?: boolean) => Promise<any> } | null>} */
+export declare const SupportContext: import('react').Context<{
+    client: import('./client.js').SupportClient;
+    loadConfig: (fresh?: boolean) => Promise<any>;
+} | null>;
+/**
+ * The support client the nearest SupportProvider holds.
+ *
+ * @returns {import('./client.js').SupportClient}
+ */
+export declare function useSupportClient(): import('./client.js').SupportClient;
+/**
+ * What the customer may send and how to reach support. Loaded once per provider and shared.
+ *
+ * @returns {{ config: any, loading: boolean, error: any, reload: () => void }}
+ */
+export declare function useSupportConfig(): {
+    config: any;
+    loading: boolean;
+    error: any;
+    reload: () => void;
+};
+/**
+ * The signed-in customer's tickets.
+ *
+ * @returns {{ tickets: any[], loading: boolean, error: any, reload: () => void }}
+ */
+export declare function useSupportTickets(): {
+    tickets: any[];
+    loading: boolean;
+    error: any;
+    reload: () => void;
+};
+/**
+ * One ticket with its thread, plus the actions a customer can take on it. Each action returns
+ * the updated ticket and replaces the one held here.
+ *
+ * @param {string|null|undefined} id The ticket's id; nothing loads while it is empty.
+ * @returns {{
+ *   ticket: any, loading: boolean, error: any, reload: () => void,
+ *   reply: (input: import('./client.js').ReplyInput) => Promise<any>,
+ *   reopen: () => Promise<any>,
+ *   rate: (input: import('./client.js').RatingInput) => Promise<any>
+ * }}
+ */
+export declare function useSupportTicket(id: string | null | undefined): {
+    ticket: any;
+    loading: boolean;
+    error: any;
+    reload: () => void;
+    reply: (input: import('./client.js').ReplyInput) => Promise<any>;
+    reopen: () => Promise<any>;
+    rate: (input: import('./client.js').RatingInput) => Promise<any>;
+};

package/dist/types/index.d.ts

@@ -0,0 +1,6 @@
+export { createSupportClient, SupportApiError } from "./client.js";
+export { useSupportClient, useSupportConfig, useSupportTicket, useSupportTickets } from "./context.js";
+export { default as ReportIssue } from "./ReportIssue.jsx";
+export { default as SupportCenter } from "./SupportCenter.jsx";
+export { default as SupportContact } from "./SupportContact.jsx";
+export { default as SupportProvider } from "./SupportProvider.jsx";

package/dist/types/lib/files.d.ts

@@ -0,0 +1,31 @@
+/**
+ * The `accept` attribute for a file input, from the config's allowed content types.
+ *
+ * @param {{ allowedContentTypes?: string[] }|null|undefined} config
+ * @returns {string|undefined}
+ */
+export declare function acceptOf(config: {
+    allowedContentTypes?: string[];
+} | null | undefined): string | undefined;
+/**
+ * Checks files against the config before anything uploads. Returns the first problem as a
+ * sentence for the person, or null when every file can go.
+ *
+ * @param {Blob[]} files Every file on the message, screenshots included.
+ * @param {{ maxAttachmentBytes?: number, maxAttachmentsPerMessage?: number, allowedContentTypes?: string[] }|null|undefined} config
+ * @returns {string|null}
+ */
+export declare function validateAttachments(files: Blob[], config: {
+    maxAttachmentBytes?: number;
+    maxAttachmentsPerMessage?: number;
+    allowedContentTypes?: string[];
+} | null | undefined): string | null;
+/**
+ * Image files from a paste event, named so they read well on the ticket.
+ *
+ * @param {ClipboardEvent|{ clipboardData?: DataTransfer|null }} event
+ * @returns {File[]}
+ */
+export declare function imagesFromPaste(event: ClipboardEvent | {
+    clipboardData?: DataTransfer | null;
+}): File[];

package/dist/types/lib/format.d.ts

@@ -0,0 +1,13 @@
+/**
+ * A timestamp in the viewer's own time zone, with the zone named so the reader knows which clock
+ * it is. Returns a plain hyphen for a missing or unreadable value.
+ *
+ * @param {string|null|undefined} iso
+ * @returns {string}
+ */
+export declare function formatDateTime(iso: string | null | undefined): string;
+/**
+ * @param {number} bytes
+ * @returns {string}
+ */
+export declare function formatBytes(bytes: number): string;

package/dist/types/lib/status.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @param {string} status The ticket's status as the API sends it.
+ * @returns {string}
+ */
+export declare function statusTone(status: string): string;

package/dist/types/lib/url.d.ts

@@ -0,0 +1,20 @@
+/** The query parameter a support email links with to open one ticket. */
+export declare const TICKET_PARAM = "ticket";
+/**
+ * @returns {string|null} The ticket id in the current address, if any.
+ */
+export declare function ticketFromLocation(): string | null;
+/**
+ * The current page's address with the ticket parameter set, or removed when `id` is empty.
+ *
+ * @param {string|null|undefined} id
+ * @returns {string}
+ */
+export declare function ticketHref(id: string | null | undefined): string;
+/**
+ * Records the open ticket in the address without a navigation, keeping the router's own history
+ * state, so a refresh or a shared link lands on the same ticket.
+ *
+ * @param {string|null|undefined} id
+ */
+export declare function replaceTicketInLocation(id: string | null | undefined): void;

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@webority/support-react",
+  "version": "0.13.0",
+  "description": "Webority customer support for React portals: ticket centre, report-an-issue with a page screenshot, and support contact details, built on @webority/ui-react.",
+  "license": "SEE LICENSE IN LICENSE",
+  "type": "module",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Webority/webority-ui.git",
+    "directory": "packages/support-react"
+  },
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/support-react.js",
+  "module": "./dist/support-react.js",
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "default": "./dist/support-react.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "sideEffects": false,
+  "peerDependencies": {
+    "bootstrap": "5.3.3",
+    "react": "^19.0.0",
+    "react-bootstrap": "^2.10.0",
+    "react-dom": "^19.0.0",
+    "@webority/ui-react": "0.13.0"
+  },
+  "devDependencies": {
+    "@testing-library/dom": "10.4.2",
+    "@testing-library/jest-dom": "7.0.1",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/react": "^19.2.17",
+    "@vitejs/plugin-react": "^6.0.1",
+    "@vitest/coverage-v8": "5.0.1",
+    "bootstrap": "5.3.3",
+    "jsdom": "30.1.1",
+    "react": "^19.2.6",
+    "react-bootstrap": "^2.10.6",
+    "react-dom": "^19.2.6",
+    "typescript": "^7.0.2",
+    "vite": "^8.0.12",
+    "vitest": "5.0.1",
+    "@webority/ui-react": "0.13.0"
+  },
+  "dependencies": {
+    "html-to-image": "^1.11.13"
+  },
+  "scripts": {
+    "build": "vite build && tsc -p tsconfig.json",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage"
+  }
+}