knee-cola/evidencija-rezija
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add UI support for VerificationFailed email status

Browse Source 
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>
This commit is contained in:
Knee Cola
2025-12-30 13:08:06 +01:00
parent aa6ae91db8
commit 2e08289e47
2 changed files with 10 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web-app/app/ui/LocationCard.tsx
View File

@@ -1,6 +1,6 @@
'use client'; '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 { FC } from "react";
import { BillBadge } from "./BillBadge"; import { BillBadge } from "./BillBadge";
import { BillingLocation, EmailStatus } from "../lib/db-types"; 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"> <span className="w-5 min-w-5 mr-2">
{tenantEmailStatus === EmailStatus.Unverified && <ExclamationTriangleIcon className="mt-[.1rem] text-warning" />} {tenantEmailStatus === EmailStatus.Unverified && <ExclamationTriangleIcon className="mt-[.1rem] text-warning" />}
{tenantEmailStatus === EmailStatus.VerificationPending && <ClockIcon className="mt-[.1rem] text-info" />} {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" />} {tenantEmailStatus === EmailStatus.Unsubscribed && <EnvelopeIcon className="mt-[.1rem] text-error" />}
</span> </span>
<span className={ <span className={
@@ -110,6 +111,7 @@ export const LocationCard: FC<LocationCardProps> = ({ location, currency }) => {
}> }>
{tenantEmailStatus === EmailStatus.Unverified && `${t("email-status.unverified")}`} {tenantEmailStatus === EmailStatus.Unverified && `${t("email-status.unverified")}`}
{tenantEmailStatus === EmailStatus.VerificationPending && `${t("email-status.verification-pending")}`} {tenantEmailStatus === EmailStatus.VerificationPending && `${t("email-status.verification-pending")}`}
{tenantEmailStatus === EmailStatus.VerificationFailed && `${t("email-status.verification-failed")}`}
{tenantEmailStatus === EmailStatus.Unsubscribed && `${t("email-status.unsubscribed")}`} {tenantEmailStatus === EmailStatus.Unsubscribed && `${t("email-status.unsubscribed")}`}
</span> </span>
</div> </div>

8
web-app/app/ui/LocationEditForm.tsx
View File

@@ -1,6 +1,6 @@
"use client"; "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 { FC, useState } from "react";
import { BillingLocation, UserSettings, YearMonth, EmailStatus } from "../lib/db-types"; import { BillingLocation, UserSettings, YearMonth, EmailStatus } from "../lib/db-types";
import { updateOrAddLocation } from "../lib/actions/locationActions"; 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> <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 && ( {location?.tenantEmailStatus === EmailStatus.Verified && (
<> <>
<CheckCircleIcon className="h-5 w-5 text-success" /> <CheckCircleIcon className="h-5 w-5 text-success" />