From c481cbeb1cc5513b9a71a604bc14999b19ccaf0e Mon Sep 17 00:00:00 2001
From: SJCoetz <s.coetzee6@my.milpark.ac.za>
Date: Mon, 3 Aug 2026 10:51:38 +0200
Subject: [PATCH] feat(buyer-tasks): render mail-failed banner + Resend button

When a card's poStatus is 'mail_failed', the card now renders a
red warning row with the email_error reason and switches the
action button label to 'Resend' with the destructive colour. A
new data-po-status attribute on the button lets tests target the
state without depending on the human-readable label.

Co-Authored-By: Claude <noreply@anthropic.com>

Co-authored-by: Orca <help@stably.ai>
---
 .../buyer-task-group-card.test.tsx            | 41 +++++++++++++++++++
 .../buyer-tasks/buyer-task-group-card.tsx     | 25 +++++++++--
 2 files changed, 63 insertions(+), 3 deletions(-)

diff --git a/src/components/buyer-tasks/buyer-task-group-card.test.tsx b/src/components/buyer-tasks/buyer-task-group-card.test.tsx
index 126981b..c3b3bc3 100644
--- a/src/components/buyer-tasks/buyer-task-group-card.test.tsx
+++ b/src/components/buyer-tasks/buyer-task-group-card.test.tsx
@@ -18,6 +18,7 @@ const baseGroup = {
   purchaseOrderId: null,
   poStatus: null,
   poNumber: null,
+  emailError: null,
   supplierEmail: null,
   step: "needs_po" as const,
 };
@@ -63,6 +64,46 @@ describe("BuyerTaskGroupCard", () => {
     expect(screen.getByText("HSS drill")).toBeInTheDocument();
   });
 
+  it("renders the email_error banner and 'Resend' button when poStatus is mail_failed", () => {
+    render(
+      <BuyerTaskGroupCard
+        group={{
+          ...baseGroup,
+          step: "po_draft",
+          poStatus: "mail_failed",
+          poNumber: "PO-26080301",
+          emailError: "[webhook] Webhook returned HTTP 502",
+        }}
+        onAction={vi.fn()}
+      />,
+    );
+    expect(screen.getByText(/mail failed/i)).toBeInTheDocument();
+    expect(screen.getByText(/webhook returned http 502/i)).toBeInTheDocument();
+    // Button label changes to "Resend" when the underlying PO is mail_failed.
+    const action = screen.getByTestId(`buyer-task-action-${baseGroup.groupId}-po_draft`);
+    expect(action).toHaveTextContent(/resend/i);
+  });
+
+  it("keeps the original 'Send PO' label and amber class when poStatus is draft", () => {
+    render(
+      <BuyerTaskGroupCard
+        group={{
+          ...baseGroup,
+          step: "po_draft",
+          poStatus: "draft",
+          poNumber: "PO-26080301",
+        }}
+        onAction={vi.fn()}
+      />,
+    );
+    const action = screen.getByTestId(`buyer-task-action-${baseGroup.groupId}-po_draft`);
+    expect(action).toHaveTextContent(/send po/i);
+    // Amber class is the pre-existing po_draft class.
+    expect(action.className).toMatch(/amber/i);
+    // No failure banner on a clean draft.
+    expect(screen.queryByText(/mail failed/i)).toBeNull();
+  });
+
   it("shows the PO number prominently at the top when one exists", () => {
     render(
       <BuyerTaskGroupCard
diff --git a/src/components/buyer-tasks/buyer-task-group-card.tsx b/src/components/buyer-tasks/buyer-task-group-card.tsx
index 1055eff..9df0a7f 100644
--- a/src/components/buyer-tasks/buyer-task-group-card.tsx
+++ b/src/components/buyer-tasks/buyer-task-group-card.tsx
@@ -1,8 +1,9 @@
 "use client";
 
-import { FileText } from "lucide-react";
+import { AlertTriangle, FileText } from "lucide-react";
 import { Card, CardContent } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
 import { BuyerTaskItemsList, type BuyerTaskItem } from "./buyer-task-items-list";
 import type { BuyerTaskGroup } from "@/lib/server/buyer-tasks-service";
 import { supplierColor } from "@/lib/supplier-color";
@@ -98,12 +99,30 @@ export function BuyerTaskGroupCard({
             type="button"
             onClick={() => onAction(group)}
             disabled={disabled}
-            className={ACTION_CLASS[group.step]}
+            className={cn(
+              ACTION_CLASS[group.step],
+              group.poStatus === "mail_failed" &&
+                "bg-destructive hover:bg-destructive/90 text-destructive-foreground",
+            )}
             data-testid={`buyer-task-action-${group.groupId}-${group.step}`}
+            data-po-status={group.poStatus ?? "none"}
           >
-            {ACTION_LABEL[group.step]}
+            {group.poStatus === "mail_failed" ? "Resend" : ACTION_LABEL[group.step]}
           </Button>
         </div>
+        {group.poStatus === "mail_failed" && group.emailError && (
+          <div
+            data-testid={`buyer-task-mail-failed-${group.groupId}`}
+            role="alert"
+            className="mx-3 mb-2 flex items-start gap-2 rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-xs text-destructive"
+          >
+            <AlertTriangle className="mt-0.5 h-3.5 w-3.5 shrink-0" aria-hidden="true" />
+            <div className="min-w-0">
+              <div className="font-semibold">Mail failed</div>
+              <div className="break-words">{group.emailError}</div>
+            </div>
+          </div>
+        )}
         <BuyerTaskItemsList items={group.items as BuyerTaskItem[]} />
       </CardContent>
     </Card>