@catandbox/schrodinger-shopify-adapter 0.1.0

package/README.md

@@ -0,0 +1,83 @@
+# `@catandbox/schrodinger-shopify-adapter`
+
+Shopify adapter package for Schrodinger support portal integrations.
+
+## Exports
+
+- `@catandbox/schrodinger-shopify-adapter/server`
+- `@catandbox/schrodinger-shopify-adapter/client`
+- `@catandbox/schrodinger-shopify-adapter/signer`
+
+## Install
+
+```bash
+npm install @catandbox/schrodinger-shopify-adapter @catandbox/schrodinger-contracts
+```
+
+Peer dependencies:
+
+- `react`
+- `react-dom`
+- `@shopify/polaris`
+- `@shopify/polaris-icons`
+
+## Minimal Server Integration
+
+```ts
+import { createShopifyProxyHandler } from "@catandbox/schrodinger-shopify-adapter/server";
+
+const proxy = createShopifyProxyHandler({
+  schApiBaseUrl: process.env.SCH_API_BASE_URL!,
+  schAppId: process.env.SCH_APP_ID!,
+  schKeyId: process.env.SCH_KEY_ID!,
+  schSecret: process.env.SCH_SECRET!,
+  shopifyApiKey: process.env.SHOPIFY_API_KEY!,
+  shopifyApiSecret: process.env.SHOPIFY_API_SECRET!
+});
+
+export async function handleRequest(request: Request): Promise<Response> {
+  return await proxy(request);
+}
+```
+
+## Minimal Client Integration
+
+```tsx
+import "@shopify/polaris/build/esm/styles.css";
+import { AppProvider } from "@shopify/polaris";
+import {
+  SupportClientProvider,
+  SupportTicketList
+} from "@catandbox/schrodinger-shopify-adapter/client";
+
+export function SupportScreen() {
+  return (
+    <AppProvider i18n={{}}>
+      <SupportClientProvider>
+        <SupportTicketList />
+      </SupportClientProvider>
+    </AppProvider>
+  );
+}
+```
+
+## Playwright Scaffold
+
+The package includes Playwright scaffold coverage for portal flows:
+
+- ticket creation with prefill + attachments + notify override
+- list visibility and bulk archive
+- detail thread/reply
+- close/reopen transitions
+- message and ticket ratings
+
+Run locally against an integrated host app:
+
+```bash
+SUPPORT_E2E_ENABLED=1 \
+SUPPORT_PORTAL_BASE_URL=http://127.0.0.1:4173 \
+SUPPORT_E2E_NEW_TICKET_URL=http://127.0.0.1:4173/support/new \
+SUPPORT_E2E_TICKETS_URL=http://127.0.0.1:4173/support/tickets \
+SUPPORT_E2E_DETAIL_URL_TEMPLATE=http://127.0.0.1:4173/support/tickets/{ticketId} \
+npm run -w @catandbox/schrodinger-shopify-adapter test:e2e
+```

package/dist/client/client.d.ts

@@ -0,0 +1,118 @@
+import { type Message, type RatingRequest, type Ticket, type TicketStatus } from "@catandbox/schrodinger-contracts";
+export interface ClientHeadersProvider {
+    (): Record<string, string> | Promise<Record<string, string>>;
+}
+export interface SupportClientOptions {
+    basePath?: string;
+    baseUrl?: string;
+    fetchImpl?: typeof fetch;
+    headers?: Record<string, string>;
+    getHeaders?: ClientHeadersProvider;
+}
+export interface ListTicketsParams {
+    status?: TicketStatus;
+}
+export interface SupportCategory {
+    id: string;
+    integrationId?: string;
+    name: string;
+    isDeleted?: boolean;
+}
+export interface TicketDetailData {
+    ticket: Ticket;
+    messages: Message[];
+    events: Array<{
+        id: string;
+        eventType: string;
+        createdAt: number;
+        payloadJson?: string;
+    }>;
+}
+export interface UploadInputFile {
+    filename: string;
+    mime: string;
+    sizeBytes: number;
+    sha256: string;
+}
+export interface UploadInitResult {
+    uploads: Array<{
+        uploadId: string;
+        attachmentId: string;
+        filename: string;
+        putUrl: string;
+    }>;
+}
+export interface UploadCompleteInput {
+    ticketId: string;
+    uploads: Array<{
+        uploadId: string;
+        sizeBytes: number;
+        sha256: string;
+    }>;
+    messageId?: string | null;
+}
+export declare class SupportApiError extends Error {
+    readonly code: string;
+    readonly requestId: string | null;
+    readonly status: number;
+    constructor(input: {
+        message: string;
+        status: number;
+        code?: string;
+        requestId?: string | null;
+    });
+}
+export declare class SupportApiClient {
+    private readonly basePath;
+    private readonly baseUrl;
+    private readonly fetchImpl;
+    private readonly staticHeaders;
+    private readonly getHeaders;
+    private readonly contractsClient;
+    constructor(options?: SupportClientOptions);
+    getCategories(): Promise<{
+        items: SupportCategory[];
+    }>;
+    getPortalConfig(): Promise<{
+        categories: Array<{
+            id: string;
+            name: string;
+        }>;
+        aliases: unknown[];
+    }>;
+    listTickets(params?: ListTicketsParams): Promise<{
+        items: Ticket[];
+    }>;
+    getTicket(ticketId: string): Promise<TicketDetailData>;
+    createTicket(input: {
+        categoryId?: string | null;
+        title: string;
+        body: string;
+        clientMessageId?: string | null;
+    }): Promise<Ticket>;
+    createReply(ticketId: string, input: {
+        body: string;
+        clientMessageId?: string | null;
+    }): Promise<Message>;
+    closeTicket(ticketId: string): Promise<Ticket>;
+    archiveTicket(ticketId: string): Promise<Ticket>;
+    reopenTicket(ticketId: string): Promise<Ticket>;
+    rateTicket(ticketId: string, input: Omit<RatingRequest, "tenantExternalId" | "principalExternalId">): Promise<{
+        ok: true;
+    }>;
+    rateMessage(messageId: string, input: Omit<RatingRequest, "tenantExternalId" | "principalExternalId">): Promise<{
+        ok: true;
+        aliasRated: boolean;
+    }>;
+    initUploads(input: {
+        ticketId: string;
+        files: UploadInputFile[];
+    }): Promise<UploadInitResult>;
+    completeUploads(input: UploadCompleteInput): Promise<{
+        completed: number;
+        scanStatus: "pending";
+    }>;
+    putUpload(putUrl: string, file: File, onProgress?: (loaded: number, total: number) => void): Promise<void>;
+    private requestJson;
+    private resolveHeaders;
+}

package/dist/client/client.js

@@ -0,0 +1,298 @@
+import { SchrodingerApiClient } from "@catandbox/schrodinger-contracts";
+export class SupportApiError extends Error {
+    code;
+    requestId;
+    status;
+    constructor(input) {
+        super(input.message);
+        this.name = "SupportApiError";
+        this.status = input.status;
+        this.code = input.code ?? "SUPPORT_API_ERROR";
+        this.requestId = input.requestId ?? null;
+    }
+}
+export class SupportApiClient {
+    basePath;
+    baseUrl;
+    fetchImpl;
+    staticHeaders;
+    getHeaders;
+    contractsClient;
+    constructor(options = {}) {
+        this.basePath = normalizeBasePath(options.basePath ?? "/support/api");
+        this.baseUrl = resolveBaseUrl(options.baseUrl, this.basePath);
+        this.fetchImpl = options.fetchImpl ?? fetch;
+        this.staticHeaders = options.headers ?? {};
+        this.getHeaders = options.getHeaders ?? null;
+        this.contractsClient = new SchrodingerApiClient({
+            baseUrl: this.baseUrl,
+            fetchImpl: (input, init) => {
+                const requestUrl = new URL(typeof input === "string" ? input : input instanceof URL ? input.toString() : input.url, this.baseUrl);
+                requestUrl.pathname = requestUrl.pathname.replace(new RegExp(`^${escapeRegExp(this.basePath)}/v1(?=/|$)`), // nosemgrep: javascript.lang.security.audit.detect-non-literal-regexp.detect-non-literal-regexp
+                this.basePath);
+                return this.fetchImpl(requestUrl.toString(), init);
+            }
+        });
+    }
+    async getCategories() {
+        return await this.requestJson("GET", "/categories");
+    }
+    async getPortalConfig() {
+        return await this.contractsClient.request("GET /v1/portal-config", undefined, {
+            headers: await this.resolveHeaders()
+        });
+    }
+    async listTickets(params = {}) {
+        return await this.contractsClient.request("GET /v1/tickets", undefined, {
+            headers: await this.resolveHeaders(),
+            query: {
+                status: params.status
+            }
+        });
+    }
+    async getTicket(ticketId) {
+        const payload = await this.requestJson("GET", `/tickets/${encodeURIComponent(ticketId)}`);
+        return normalizeTicketDetailPayload(payload);
+    }
+    async createTicket(input) {
+        return await this.contractsClient.request("POST /v1/tickets", input, {
+            headers: await this.resolveHeaders()
+        });
+    }
+    async createReply(ticketId, input) {
+        return await this.contractsClient.request("POST /v1/tickets/{ticketId}/messages", input, {
+            headers: await this.resolveHeaders(),
+            pathParams: {
+                ticketId
+            }
+        });
+    }
+    async closeTicket(ticketId) {
+        return await this.requestJson("POST", `/tickets/${encodeURIComponent(ticketId)}/close`, {});
+    }
+    async archiveTicket(ticketId) {
+        return await this.requestJson("POST", `/tickets/${encodeURIComponent(ticketId)}/archive`, {});
+    }
+    async reopenTicket(ticketId) {
+        return await this.requestJson("POST", `/tickets/${encodeURIComponent(ticketId)}/reopen`, {});
+    }
+    async rateTicket(ticketId, input) {
+        return await this.contractsClient.request("POST /v1/tickets/{ticketId}/ratings", input, {
+            headers: await this.resolveHeaders(),
+            pathParams: {
+                ticketId
+            }
+        });
+    }
+    async rateMessage(messageId, input) {
+        return await this.contractsClient.request("POST /v1/messages/{messageId}/ratings", input, {
+            headers: await this.resolveHeaders(),
+            pathParams: {
+                messageId
+            }
+        });
+    }
+    async initUploads(input) {
+        return await this.contractsClient.request("POST /v1/uploads/init", input, {
+            headers: await this.resolveHeaders()
+        });
+    }
+    async completeUploads(input) {
+        return await this.contractsClient.request("POST /v1/uploads/complete", input, {
+            headers: await this.resolveHeaders()
+        });
+    }
+    async putUpload(putUrl, file, onProgress) {
+        if (onProgress) {
+            await uploadViaXmlHttpRequest({
+                url: putUrl,
+                file,
+                onProgress
+            });
+            return;
+        }
+        await uploadViaXmlHttpRequest({
+            url: putUrl,
+            file
+        });
+    }
+    async requestJson(method, path, body) {
+        const url = new URL(`${this.baseUrl}${path}`);
+        const headers = await this.resolveHeaders();
+        const response = await this.fetchImpl(url.toString(), {
+            method,
+            headers: {
+                ...headers,
+                ...(body === undefined ? {} : { "content-type": "application/json" })
+            },
+            body: body === undefined ? null : JSON.stringify(body)
+        });
+        if (!response.ok) {
+            throw await toSupportApiError(response);
+        }
+        return (await response.json());
+    }
+    async resolveHeaders() {
+        const dynamic = this.getHeaders ? await this.getHeaders() : {};
+        return {
+            ...this.staticHeaders,
+            ...dynamic
+        };
+    }
+}
+async function uploadViaXmlHttpRequest(input) {
+    await new Promise((resolve, reject) => {
+        const xhr = new XMLHttpRequest();
+        xhr.open("PUT", input.url);
+        xhr.setRequestHeader("content-type", input.file.type || "application/octet-stream");
+        xhr.upload.onprogress = (event) => {
+            if (event.lengthComputable) {
+                input.onProgress?.(event.loaded, event.total);
+            }
+        };
+        xhr.onerror = () => reject(new Error("Upload failed"));
+        xhr.onload = () => {
+            if (xhr.status >= 200 && xhr.status < 300) {
+                resolve();
+            }
+            else {
+                reject(new Error(`Upload failed with status ${xhr.status}`));
+            }
+        };
+        xhr.send(input.file);
+    });
+}
+async function toSupportApiError(response) {
+    try {
+        const payload = (await response.json());
+        return new SupportApiError(payload.error
+            ? {
+                status: response.status,
+                message: payload.message ?? `Request failed with status ${response.status}`,
+                code: payload.error,
+                requestId: payload.requestId ?? response.headers.get("X-Request-Id")
+            }
+            : {
+                status: response.status,
+                message: payload.message ?? `Request failed with status ${response.status}`,
+                requestId: payload.requestId ?? response.headers.get("X-Request-Id")
+            });
+    }
+    catch {
+        return new SupportApiError({
+            status: response.status,
+            message: `Request failed with status ${response.status}`,
+            requestId: response.headers.get("X-Request-Id")
+        });
+    }
+}
+function resolveBaseUrl(baseUrl, basePath) {
+    if (baseUrl) {
+        return trimTrailingSlash(baseUrl);
+    }
+    if (typeof window !== "undefined" && window.location?.origin) {
+        return `${window.location.origin}${basePath}`;
+    }
+    return `http://localhost${basePath}`;
+}
+function normalizeBasePath(path) {
+    const withSlash = path.startsWith("/") ? path : `/${path}`;
+    return withSlash.replace(/\/+$/, "");
+}
+function trimTrailingSlash(value) {
+    return value.replace(/\/+$/, "");
+}
+function escapeRegExp(value) {
+    return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function normalizeTicketDetailPayload(payload) {
+    if (isTicket(payload)) {
+        return {
+            ticket: payload,
+            messages: [],
+            events: []
+        };
+    }
+    if (isRecord(payload) && isTicket(payload.ticket)) {
+        const messages = asMessageArray(payload.messages);
+        const events = asEventArray(payload.events);
+        return {
+            ticket: payload.ticket,
+            messages,
+            events
+        };
+    }
+    throw new Error("Invalid ticket detail payload");
+}
+function asMessageArray(value) {
+    if (!Array.isArray(value)) {
+        return [];
+    }
+    return value.filter(isMessage).sort((left, right) => left.createdAt - right.createdAt);
+}
+function asEventArray(value) {
+    if (!Array.isArray(value)) {
+        return [];
+    }
+    const events = [];
+    for (const entry of value) {
+        if (!isRecord(entry)) {
+            continue;
+        }
+        if (typeof entry.id !== "string" ||
+            typeof entry.eventType !== "string" ||
+            typeof entry.createdAt !== "number") {
+            continue;
+        }
+        if ("payloadJson" in entry &&
+            entry.payloadJson !== undefined &&
+            typeof entry.payloadJson !== "string") {
+            continue;
+        }
+        if (typeof entry.payloadJson === "string") {
+            events.push({
+                id: entry.id,
+                eventType: entry.eventType,
+                createdAt: entry.createdAt,
+                payloadJson: entry.payloadJson
+            });
+        }
+        else {
+            events.push({
+                id: entry.id,
+                eventType: entry.eventType,
+                createdAt: entry.createdAt
+            });
+        }
+    }
+    return events.sort((left, right) => left.createdAt - right.createdAt);
+}
+function isTicket(value) {
+    if (!isRecord(value)) {
+        return false;
+    }
+    return (typeof value.id === "string" &&
+        typeof value.tenantId === "string" &&
+        typeof value.principalId === "string" &&
+        (typeof value.categoryId === "string" || value.categoryId === null) &&
+        typeof value.status === "string" &&
+        typeof value.title === "string" &&
+        (typeof value.assignedAliasId === "string" || value.assignedAliasId === null) &&
+        typeof value.createdAt === "number" &&
+        typeof value.updatedAt === "number");
+}
+function isMessage(value) {
+    if (!isRecord(value)) {
+        return false;
+    }
+    return (typeof value.id === "string" &&
+        typeof value.ticketId === "string" &&
+        typeof value.authorType === "string" &&
+        typeof value.isPublic === "boolean" &&
+        typeof value.bodyPlain === "string" &&
+        (typeof value.authorAliasId === "string" || value.authorAliasId === null) &&
+        typeof value.createdAt === "number");
+}
+function isRecord(value) {
+    return typeof value === "object" && value !== null;
+}

package/dist/client/components/CountdownText.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+export declare function CountdownText(props: {
+    dueAt: number | null;
+    label: string;
+}): React.ReactElement | null;

package/dist/client/components/CountdownText.js

@@ -0,0 +1,26 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from "@shopify/polaris";
+import { useEffect, useMemo, useState } from "react";
+export function CountdownText(props) {
+    const [now, setNow] = useState(() => Math.floor(Date.now() / 1000));
+    useEffect(() => {
+        const timer = window.setInterval(() => {
+            setNow(Math.floor(Date.now() / 1000));
+        }, 30_000);
+        return () => window.clearInterval(timer);
+    }, []);
+    const value = useMemo(() => {
+        if (!props.dueAt) {
+            return null;
+        }
+        const secondsLeft = Math.max(0, props.dueAt - now);
+        const days = Math.floor(secondsLeft / 86_400);
+        const hours = Math.floor((secondsLeft % 86_400) / 3_600);
+        const minutes = Math.floor((secondsLeft % 3_600) / 60);
+        return `${days}d ${hours}h ${minutes}m`;
+    }, [now, props.dueAt]);
+    if (!value) {
+        return null;
+    }
+    return (_jsxs(Text, { as: "p", tone: "subdued", variant: "bodySm", children: [props.label, ": ", value] }));
+}

package/dist/client/components/ErrorBanner.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+export declare function ErrorBanner(props: {
+    error: Error | null;
+}): React.ReactElement | null;

package/dist/client/components/ErrorBanner.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Banner, BlockStack, Text } from "@shopify/polaris";
+export function ErrorBanner(props) {
+    if (!props.error) {
+        return null;
+    }
+    return (_jsx(Banner, { title: "Something went wrong", tone: "critical", children: _jsx(BlockStack, { gap: "200", children: _jsx(Text, { as: "p", variant: "bodyMd", children: props.error.message }) }) }));
+}

package/dist/client/components/StatusBadge.d.ts

@@ -0,0 +1,5 @@
+import type { TicketStatus } from "@catandbox/schrodinger-contracts";
+import React from "react";
+export declare function StatusBadge(props: {
+    status: TicketStatus;
+}): React.ReactElement;

package/dist/client/components/StatusBadge.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Badge } from "@shopify/polaris";
+export function StatusBadge(props) {
+    return _jsx(Badge, { tone: toBadgeTone(props.status), children: props.status });
+}
+function toBadgeTone(status) {
+    switch (status) {
+        case "Active":
+            return "success";
+        case "InProgress":
+            return "info";
+        case "AwaitingResponse":
+            return "attention";
+        case "Closed":
+            return "warning";
+        case "Archived":
+            return "critical";
+        default:
+            return "info";
+    }
+}

package/dist/client/components/SupportNewTicketForm.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import type { HookClientOptions } from "../hooks/types";
+interface SupportNewTicketFormProps extends HookClientOptions {
+    prefill?: {
+        title?: string;
+        categoryId?: string | null;
+        description?: string;
+    };
+}
+export declare function SupportNewTicketForm(props: SupportNewTicketFormProps): React.ReactElement;
+export {};

package/dist/client/components/SupportNewTicketForm.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Banner, BlockStack, Box, Button, Card, Checkbox, Frame, InlineGrid, InlineStack, Page, Select, Spinner, Text, TextField, Toast } from "@shopify/polaris";
+import { useCallback, useMemo, useState } from "react";
+import { RichTextEditor } from "../editor/RichTextEditor";
+import { useCategories } from "../hooks/useCategories";
+import { useCreateTicket } from "../hooks/useCreateTicket";
+import { useSupportClient } from "../hooks/useSupportClient";
+import { useUploadManager } from "../hooks/useUploadManager";
+import { UploadManagerView } from "../uploads/UploadManagerView";
+import { ErrorBanner } from "./ErrorBanner";
+export function SupportNewTicketForm(props) {
+    const client = useSupportClient(props.client, props.clientOptions);
+    const categories = useCategories({ client });
+    const createTicket = useCreateTicket({ client });
+    const uploads = useUploadManager({ client, maxParallel: 3 });
+    const [title, setTitle] = useState(props.prefill?.title ?? "");
+    const [categoryId, setCategoryId] = useState(props.prefill?.categoryId ?? "");
+    const [body, setBody] = useState(props.prefill?.description ?? "");
+    const [notify, setNotify] = useState(true);
+    const [notifyEmail, setNotifyEmail] = useState("");
+    const [errors, setErrors] = useState({});
+    const [toastContent, setToastContent] = useState(null);
+    const [acknowledgement, setAcknowledgement] = useState(null);
+    const categoryOptions = useMemo(() => {
+        const items = categories.data ?? [];
+        return [
+            { label: "Choose a category", value: "" },
+            ...items.map((item) => ({ label: item.name, value: item.id }))
+        ];
+    }, [categories.data]);
+    const submit = useCallback(async () => {
+        const nextErrors = {};
+        if (!categoryId) {
+            nextErrors.categoryId = "Category is required";
+        }
+        if (!title.trim()) {
+            nextErrors.title = "Title is required";
+        }
+        if (!body.trim()) {
+            nextErrors.body = "Description is required";
+        }
+        if (!uploads.canSubmit) {
+            nextErrors.uploads = "Finish uploads or remove failed files before submitting";
+        }
+        if (notifyEmail.trim() && !notifyEmail.includes("@")) {
+            nextErrors.email = "Email override must be a valid email address";
+        }
+        setErrors(nextErrors);
+        if (Object.keys(nextErrors).length > 0) {
+            return;
+        }
+        const ticket = await createTicket.createTicket({
+            categoryId: categoryId || null,
+            title: title.trim(),
+            body: body.trim()
+        });
+        if (uploads.items.length > 0) {
+            await uploads.uploadForTicket(ticket.id);
+        }
+        const etaLabel = notify
+            ? "Acknowledged. First response ETA is pending server estimate."
+            : "Acknowledged. Notifications are disabled for this request.";
+        setAcknowledgement({
+            ticketId: ticket.id,
+            etaLabel
+        });
+        setToastContent("Support ticket submitted");
+        setTitle("");
+        setCategoryId("");
+        setBody("");
+        setNotify(true);
+        setNotifyEmail("");
+        uploads.clear();
+    }, [body, categoryId, createTicket, notify, notifyEmail, title, uploads]);
+    return (_jsx(Frame, { children: _jsxs(Page, { title: "New support ticket", subtitle: "Create a ticket for customer support", children: [_jsxs(BlockStack, { gap: "400", children: [_jsx(ErrorBanner, { error: categories.error }), _jsx(ErrorBanner, { error: createTicket.error }), _jsx(ErrorBanner, { error: uploads.error }), categories.loading ? (_jsx(Card, { children: _jsx(InlineStack, { align: "center", children: _jsx(Spinner, { size: "large" }) }) })) : (_jsx(Card, { children: _jsxs(BlockStack, { gap: "300", children: [_jsxs(InlineGrid, { columns: { xs: "1fr", md: "1fr 1fr" }, gap: "300", children: [_jsx(Select, { label: "Category", options: categoryOptions, value: categoryId, onChange: setCategoryId, error: errors.categoryId }), _jsx(TextField, { label: "Title", value: title, onChange: setTitle, autoComplete: "off", error: errors.title })] }), _jsx(RichTextEditor, { label: "Description", value: body, onChange: setBody, error: errors.body, helpText: "Use formatting shortcuts for bold, italic, underline and links." }), _jsx(Card, { children: _jsxs(BlockStack, { gap: "200", children: [_jsx(Text, { as: "h3", variant: "headingSm", children: "Attachments" }), _jsx(UploadManagerView, { items: uploads.items, onAddFiles: (files) => uploads.addFiles(files), onRemoveFile: uploads.removeFile }), errors.uploads ? (_jsx(Text, { as: "p", tone: "critical", variant: "bodySm", children: errors.uploads })) : null] }) }), _jsx(Box, { children: _jsxs(BlockStack, { gap: "200", children: [_jsx(Checkbox, { label: "Notify me about ticket updates", checked: notify, onChange: (checked) => setNotify(Boolean(checked)) }), notify ? (_jsx(TextField, { label: "Notification email override (optional)", value: notifyEmail, onChange: setNotifyEmail, autoComplete: "off", error: errors.email, helpText: "Leave blank to use the authenticated Shopify user email." })) : null] }) }), _jsx(InlineStack, { align: "end", children: _jsx(Button, { onClick: () => void submit(), variant: "primary", loading: createTicket.loading || uploads.loading, children: "Submit ticket" }) })] }) })), acknowledgement ? (_jsx(Banner, { title: "Ticket submitted", tone: "success", children: _jsxs(BlockStack, { gap: "100", children: [_jsxs(Text, { as: "p", variant: "bodyMd", children: ["Ticket #", acknowledgement.ticketId, " was created successfully."] }), _jsx(Text, { as: "p", variant: "bodySm", tone: "subdued", children: acknowledgement.etaLabel })] }) })) : null] }), toastContent ? (_jsx(Toast, { content: toastContent, onDismiss: () => setToastContent(null) })) : null] }) }));
+}

package/dist/client/components/SupportTicketDetail.d.ts

@@ -0,0 +1,9 @@
+import type { Ticket } from "@catandbox/schrodinger-contracts";
+import React from "react";
+import type { HookClientOptions } from "../hooks/types";
+interface SupportTicketDetailProps extends HookClientOptions {
+    ticketId: string;
+    onTicketUpdated?: (ticket: Ticket) => void;
+}
+export declare function SupportTicketDetail(props: SupportTicketDetailProps): React.ReactElement;
+export {};