From 2e08289e473e21bfb07ac980eb99702d8256994f Mon Sep 17 00:00:00 2001
From: Knee Cola <kneecola@duck.com>
Date: Tue, 30 Dec 2025 13:08:06 +0100
Subject: [PATCH] feat: add UI support for VerificationFailed email status
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Display verification failed status in location cards and edit forms to provide
clear visual feedback when email verification fails. Uses red X icon and error
styling consistent with other failure states.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 web-app/app/ui/LocationCard.tsx     | 4 +++-
 web-app/app/ui/LocationEditForm.tsx | 8 +++++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/web-app/app/ui/LocationCard.tsx b/web-app/app/ui/LocationCard.tsx
index d7a34bb..37de317 100644
--- a/web-app/app/ui/LocationCard.tsx
+++ b/web-app/app/ui/LocationCard.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { CheckCircleIcon, Cog8ToothIcon, PlusCircleIcon, ShareIcon, BanknotesIcon, EyeIcon, TicketIcon, ShoppingCartIcon, EnvelopeIcon, ExclamationTriangleIcon, ClockIcon } from "@heroicons/react/24/outline";
+import { CheckCircleIcon, Cog8ToothIcon, PlusCircleIcon, ShareIcon, BanknotesIcon, EyeIcon, TicketIcon, ShoppingCartIcon, EnvelopeIcon, ExclamationTriangleIcon, ClockIcon, XCircleIcon } from "@heroicons/react/24/outline";
 import { FC } from "react";
 import { BillBadge } from "./BillBadge";
 import { BillingLocation, EmailStatus } from "../lib/db-types";
@@ -101,6 +101,7 @@ export const LocationCard: FC<LocationCardProps> = ({ location, currency }) => {
                                         <span className="w-5 min-w-5 mr-2">
                                             {tenantEmailStatus === EmailStatus.Unverified && <ExclamationTriangleIcon className="mt-[.1rem] text-warning" />}
                                             {tenantEmailStatus === EmailStatus.VerificationPending && <ClockIcon className="mt-[.1rem] text-info" />}
+                                            {tenantEmailStatus === EmailStatus.VerificationFailed && <XCircleIcon className="mt-[.1rem] text-error" />}
                                             {tenantEmailStatus === EmailStatus.Unsubscribed && <EnvelopeIcon className="mt-[.1rem] text-error" />}
                                         </span>
                                         <span className={
@@ -110,6 +111,7 @@ export const LocationCard: FC<LocationCardProps> = ({ location, currency }) => {
                                         }>
                                             {tenantEmailStatus === EmailStatus.Unverified && `${t("email-status.unverified")}`}
                                             {tenantEmailStatus === EmailStatus.VerificationPending && `${t("email-status.verification-pending")}`}
+                                            {tenantEmailStatus === EmailStatus.VerificationFailed && `${t("email-status.verification-failed")}`}
                                             {tenantEmailStatus === EmailStatus.Unsubscribed && `${t("email-status.unsubscribed")}`}
                                         </span>
                                     </div>
diff --git a/web-app/app/ui/LocationEditForm.tsx b/web-app/app/ui/LocationEditForm.tsx
index 1d74089..f17aca7 100644
--- a/web-app/app/ui/LocationEditForm.tsx
+++ b/web-app/app/ui/LocationEditForm.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { TrashIcon, ExclamationTriangleIcon, ClockIcon, EnvelopeIcon, CheckCircleIcon, PencilSquareIcon } from "@heroicons/react/24/outline";
+import { TrashIcon, ExclamationTriangleIcon, ClockIcon, EnvelopeIcon, CheckCircleIcon, PencilSquareIcon, XCircleIcon } from "@heroicons/react/24/outline";
 import { FC, useState } from "react";
 import { BillingLocation, UserSettings, YearMonth, EmailStatus } from "../lib/db-types";
 import { updateOrAddLocation } from "../lib/actions/locationActions";
@@ -388,6 +388,12 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
                                             <span className="text-sm text-info">{t("email-status.verification-pending")}</span>
                                         </>
                                     )}
+                                    {location?.tenantEmailStatus === EmailStatus.VerificationFailed && (
+                                        <>
+                                            <XCircleIcon className="h-5 w-5 text-error" />
+                                            <span className="text-sm text-error">{t("email-status.verification-failed")}</span>
+                                        </>
+                                    )}
                                     {location?.tenantEmailStatus === EmailStatus.Verified && (
                                         <>
                                             <CheckCircleIcon className="h-5 w-5 text-success" />