setTrackingOpen(false)}
+ />
+ )}
+
+ );
+}
+
+function ObligationStatusDetail({
+ obligation,
+}: {
+ obligation: ObligationStatusView;
+}) {
+ switch (obligation.status) {
+ case "AwaitingShipment":
+ return (
+
+
+ Ship your item by{" "}
+
+ {formatRelativeDeadline(obligation.shipByDeadline)}
+
+
+ {obligation.reminderSentAt && (
+
+ Reminder sent — ship before your deadline.
+
+ )}
+
+
+ Overdue — your deadline passed; this sale is under review.
+
+ {obligation.escalatedAt && (
+
+ Escalated {formatTimestamp(obligation.escalatedAt)}
+
+ )}
+
+
+ Shipped — tracking #{obligation.trackingNumber}; delivery
+ confirmation pending.
+
+ {obligation.trackingProvidedAt && (
+
+ Shipped {formatTimestamp(obligation.trackingProvidedAt)}
+
+ )}
+
+
Completed.
+ {obligation.fulfilledAt && (
+
+ Fulfilled {formatTimestamp(obligation.fulfilledAt)}
+
+ )}
+
+ {obligation.disputeResolution ? (
+
+ Dispute resolved ({obligation.disputeResolution}).
+
+ ) : (
+
+ Dispute open ({obligation.disputeReason}).
+
+ )}
+ {obligation.disputeOpenedAt && (
+
+ Opened {formatTimestamp(obligation.disputeOpenedAt)}
+
+ )}
+ {obligation.disputeResolvedAt && (
+
+ Resolved {formatTimestamp(obligation.disputeResolvedAt)}
+
+ )}
+
+ {Array.from({ length: 3 }).map((_, index) => (
+ -
+
+
+
+
+
+
+
+
+
+
+ ))}
+
+
+ );
+}
diff --git a/client/seller/src/obligations/ProvideTrackingDialog.test.tsx b/client/seller/src/obligations/ProvideTrackingDialog.test.tsx
new file mode 100644
index 0000000..eb40aa0
--- /dev/null
+++ b/client/seller/src/obligations/ProvideTrackingDialog.test.tsx
@@ -0,0 +1,195 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import {
+ createMemoryHistory,
+ createRootRoute,
+ createRoute,
+ createRouter,
+ Outlet,
+ RouterProvider,
+} from "@tanstack/react-router";
+
+import { ProvideTrackingDialog } from "@/obligations/ProvideTrackingDialog";
+import type { ObligationStatusView } from "@/obligations/schema";
+import { SessionProvider } from "@/session/SessionContext";
+
+const OBLIGATION: ObligationStatusView = {
+ id: "0192f1a0-1111-7000-8000-000000000001",
+ listingId: "0192f1a0-2222-7000-8000-000000000002",
+ winnerId: "0192f1a0-3333-7000-8000-000000000003",
+ sellerId: "seller-test-id",
+ hammerPrice: 55.0,
+ status: "AwaitingShipment",
+ shipByDeadline: "2026-06-14T12:00:00Z",
+ trackingNumber: null,
+ reminderSentAt: null,
+ trackingProvidedAt: null,
+ fulfilledAt: null,
+ escalatedAt: null,
+ disputeId: null,
+ disputeReason: null,
+ disputeOpenedAt: null,
+ disputeResolution: null,
+ disputeResolvedAt: null,
+};
+
+function renderDialog(onClose = vi.fn()): {
+ onClose: ReturnType;
+ fetchMock: ReturnType;
+} {
+ sessionStorage.setItem("critterbids.seller.participantId", "seller-test-id");
+ sessionStorage.setItem("critterbids.seller.isRegisteredSeller", "true");
+
+ const fetchMock = vi.fn(async () => ({
+ ok: true,
+ status: 202,
+ headers: new Headers(),
+ json: async () => null,
+ text: async () => "",
+ }));
+ vi.stubGlobal("fetch", fetchMock);
+
+ const rootRoute = createRootRoute({ component: Outlet });
+ const homeRoute = createRoute({
+ getParentRoute: () => rootRoute,
+ path: "/",
+ component: () => (
+
+ ),
+ });
+ const routeTree = rootRoute.addChildren([homeRoute]);
+ const router = createRouter({
+ routeTree,
+ history: createMemoryHistory({ initialEntries: ["/"] }),
+ });
+ const queryClient = new QueryClient({
+ defaultOptions: { queries: { retry: false } },
+ });
+
+ render(
+
+
+
+
+ ,
+ );
+
+ return { onClose, fetchMock };
+}
+
+afterEach(() => {
+ vi.unstubAllGlobals();
+});
+
+describe("ProvideTrackingDialog", () => {
+ it("renders the dialog with tracking number input", async () => {
+ renderDialog();
+
+ expect(
+ await screen.findByRole("dialog", { name: /provide tracking/i }),
+ ).toBeInTheDocument();
+ expect(screen.getByLabelText("Tracking Number")).toBeInTheDocument();
+ expect(
+ screen.getByRole("button", { name: "Submit Tracking" }),
+ ).toBeInTheDocument();
+ expect(
+ screen.getByRole("button", { name: "Cancel" }),
+ ).toBeInTheDocument();
+ });
+
+ it("shows the obligation context (hammer price)", async () => {
+ renderDialog();
+
+ expect(await screen.findByText(/\$55\.00 sale/)).toBeInTheDocument();
+ });
+
+ it("validates that tracking number is required", async () => {
+ renderDialog();
+ const user = userEvent.setup();
+
+ await user.click(
+ await screen.findByRole("button", { name: "Submit Tracking" }),
+ );
+
+ expect(
+ await screen.findByText(/tracking number is required/i),
+ ).toBeInTheDocument();
+ });
+
+ it("submits tracking number to the endpoint", async () => {
+ const { fetchMock } = renderDialog();
+ const user = userEvent.setup();
+
+ await user.type(
+ await screen.findByLabelText("Tracking Number"),
+ "1Z999AA10123456784",
+ );
+ await user.click(screen.getByRole("button", { name: "Submit Tracking" }));
+
+ await vi.waitFor(() => {
+ const trackingCall = fetchMock.mock.calls.find(
+ (c) =>
+ typeof c[0] === "string" &&
+ c[0].includes("/api/obligations/tracking"),
+ );
+ expect(trackingCall).toBeDefined();
+ const body = JSON.parse(
+ (trackingCall![1] as { body: string }).body,
+ ) as { obligationId: string; trackingNumber: string };
+ expect(body.obligationId).toBe(OBLIGATION.id);
+ expect(body.trackingNumber).toBe("1Z999AA10123456784");
+ });
+ });
+
+ it("calls onClose on successful submit", async () => {
+ const onClose = vi.fn();
+ renderDialog(onClose);
+ const user = userEvent.setup();
+
+ await user.type(
+ await screen.findByLabelText("Tracking Number"),
+ "TRACK-XYZ",
+ );
+ await user.click(screen.getByRole("button", { name: "Submit Tracking" }));
+
+ await vi.waitFor(() => {
+ expect(onClose).toHaveBeenCalled();
+ });
+ });
+
+ it("calls onClose when Cancel is clicked", async () => {
+ const onClose = vi.fn();
+ renderDialog(onClose);
+ const user = userEvent.setup();
+
+ await user.click(
+ await screen.findByRole("button", { name: "Cancel" }),
+ );
+
+ expect(onClose).toHaveBeenCalled();
+ });
+
+ it("shows error on mutation failure", async () => {
+ const { fetchMock } = renderDialog();
+ fetchMock.mockResolvedValue({
+ ok: false,
+ status: 400,
+ headers: new Headers(),
+ json: async () => null,
+ text: async () => "Invalid tracking number",
+ });
+ const user = userEvent.setup();
+
+ await user.type(
+ await screen.findByLabelText("Tracking Number"),
+ "BAD-TRACK",
+ );
+ await user.click(screen.getByRole("button", { name: "Submit Tracking" }));
+
+ expect(
+ await screen.findByText("Invalid tracking number"),
+ ).toBeInTheDocument();
+ });
+});
diff --git a/client/seller/src/obligations/ProvideTrackingDialog.tsx b/client/seller/src/obligations/ProvideTrackingDialog.tsx
new file mode 100644
index 0000000..a1f1b5d
--- /dev/null
+++ b/client/seller/src/obligations/ProvideTrackingDialog.tsx
@@ -0,0 +1,110 @@
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+
+import { useSession } from "@/session/SessionContext";
+import { useProvideTracking } from "@/obligations/mutations";
+import {
+ trackingFormSchema,
+ type TrackingFormValues,
+} from "@/obligations/formSchemas";
+import type { ObligationStatusView } from "@/obligations/schema";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { formatUsd } from "@/lib/format";
+
+const resolver = zodResolver(trackingFormSchema);
+
+export function ProvideTrackingDialog({
+ obligation,
+ onClose,
+}: {
+ obligation: ObligationStatusView;
+ onClose: () => void;
+}) {
+ const { participantId } = useSession();
+ const mutation = useProvideTracking(participantId ?? "");
+
+ const {
+ register,
+ handleSubmit,
+ formState: { errors, isSubmitting },
+ } = useForm({
+ resolver,
+ defaultValues: { trackingNumber: "" },
+ });
+
+ useEffect(() => {
+ function handleKeyDown(e: KeyboardEvent) {
+ if (e.key === "Escape") onClose();
+ }
+ document.addEventListener("keydown", handleKeyDown);
+ return () => document.removeEventListener("keydown", handleKeyDown);
+ }, [onClose]);
+
+ const onSubmit = handleSubmit((values) => {
+ mutation.mutate(
+ { obligationId: obligation.id, values },
+ { onSuccess: onClose },
+ );
+ });
+
+ return (
+ {
+ if (e.target === e.currentTarget) onClose();
+ }}
+ role="dialog"
+ aria-modal="true"
+ aria-label="Provide tracking information"
+ >
+
+
Provide Tracking
+
+ {formatUsd(obligation.hammerPrice)} sale — obligation{" "}
+ {obligation.id.slice(0, 8)}…
+
+
+
+