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

feat: add email status indicators to LocationEditForm

Browse Source 
- Display all email statuses (Unverified, VerificationPending, Verified, Unsubscribed)
- Show appropriate icons and colors for each status
- Add bilingual translations for status labels
- Use UTF-8 emojis (⚠️ ⏳ ✅ ✉️) alongside Heroicons
- Position indicator before tenantEmail-error div

🤖 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-29 18:35:27 +01:00
parent 8bed381f36
commit 92ecd7f18e
3 changed files with 42 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,8 +1,8 @@
"use client";
import { TrashIcon } from "@heroicons/react/24/outline";
import { TrashIcon, ExclamationTriangleIcon, ClockIcon, EnvelopeIcon, CheckCircleIcon } from "@heroicons/react/24/outline";
import { FC, useState } from "react";
import { BillingLocation, UserSettings, YearMonth } from "../lib/db-types";
import { BillingLocation, UserSettings, YearMonth, EmailStatus } from "../lib/db-types";
import { updateOrAddLocation } from "../lib/actions/locationActions";
import { useFormState } from "react-dom";
import Link from "next/link";
@@ -357,6 +357,34 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
defaultValue={formValues.tenantEmail}
onChange={(e) => handleInputChange("tenantEmail", e.target.value)}
/>
{location?.tenantEmail && location?.tenantEmailStatus && (
<div className="flex items-center gap-2 mt-2">
{location.tenantEmailStatus === EmailStatus.Unverified && (
<>
<ExclamationTriangleIcon className="h-5 w-5 text-warning" />
<span className="text-sm text-warning">{t("email-status.unverified")} ⚠️</span>
</>
)}
{location.tenantEmailStatus === EmailStatus.VerificationPending && (
<>
<ClockIcon className="h-5 w-5 text-info" />
<span className="text-sm text-info">{t("email-status.verification-pending")} ⏳</span>
</>
)}
{location.tenantEmailStatus === EmailStatus.Verified && (
<>
<CheckCircleIcon className="h-5 w-5 text-success" />
<span className="text-sm text-success">{t("email-status.verified")} ✅</span>
</>
)}
{location.tenantEmailStatus === EmailStatus.Unsubscribed && (
<>
<EnvelopeIcon className="h-5 w-5 text-error" />
<span className="text-sm text-error">{t("email-status.unsubscribed")} ✉️</span>
</>
)}
</div>
)}
<div id="tenantEmail-error" aria-live="polite" aria-atomic="true">
{state.errors?.tenantEmail &&
state.errors.tenantEmail.map((error: string) => (