feat(buyer-tasks): mark-ready confirmation modal

Co-authored-by: Orca <help@stably.ai>

src/components/buyer-tasks/mark-ready-modal.test.tsx

@@ -0,0 +1,37 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { MarkReadyModal } from "./mark-ready-modal";
+
+describe("MarkReadyModal", () => {
+  it("renders the confirmation text", () => {
+    render(
+      <MarkReadyModal
+        open
+        onConfirm={vi.fn()}
+        onCancel={vi.fn()}
+      />
+    );
+    expect(
+      screen.getByText(/i spoke to this person and the stock is ready for collection/i)
+    ).toBeInTheDocument();
+  });
+
+  it("calls onConfirm when confirm is clicked", () => {
+    const onConfirm = vi.fn();
+    render(<MarkReadyModal open onConfirm={onConfirm} onCancel={vi.fn()} />);
+    fireEvent.click(screen.getByRole("button", { name: /confirm/i }));
+    expect(onConfirm).toHaveBeenCalledOnce();
+  });
+
+  it("calls onCancel when cancel is clicked", () => {
+    const onCancel = vi.fn();
+    render(<MarkReadyModal open onConfirm={vi.fn()} onCancel={onCancel} />);
+    fireEvent.click(screen.getByRole("button", { name: /cancel/i }));
+    expect(onCancel).toHaveBeenCalledOnce();
+  });
+
+  it("does not render when closed", () => {
+    render(<MarkReadyModal open={false} onConfirm={vi.fn()} onCancel={vi.fn()} />);
+    expect(screen.queryByText(/i spoke to this person/i)).not.toBeInTheDocument();
+  });
+});

src/components/buyer-tasks/mark-ready-modal.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogClose,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+
+export function MarkReadyModal({
+  open,
+  onConfirm,
+  onCancel,
+  busy,
+}: {
+  open: boolean;
+  onConfirm: () => void;
+  onCancel: () => void;
+  busy?: boolean;
+}) {
+  return (
+    <Dialog open={open} onOpenChange={(o) => !o && onCancel()}>
+      <DialogContent data-testid="mark-ready-modal">
+        <DialogHeader>
+          <DialogTitle>Mark ready for collection?</DialogTitle>
+          <DialogDescription>
+            I spoke to this person and the stock is ready for collection.
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <DialogClose
+            render={
+              <Button
+                type="button"
+                variant="outline"
+                disabled={busy}
+                data-testid="mark-ready-cancel"
+              />
+            }
+          >
+            Cancel
+          </DialogClose>
+          <Button
+            type="button"
+            onClick={onConfirm}
+            disabled={busy}
+            className="bg-purple-600 hover:bg-purple-700 text-white"
+            data-testid="mark-ready-confirm"
+          >
+            Confirm
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}