feat: add email status indicators to LocationEditForm

- 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

View File

@@ -1,8 +1,8 @@
"use client"; "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 { 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 { updateOrAddLocation } from "../lib/actions/locationActions";
import { useFormState } from "react-dom"; import { useFormState } from "react-dom";
import Link from "next/link"; import Link from "next/link";
@@ -357,6 +357,34 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
defaultValue={formValues.tenantEmail} defaultValue={formValues.tenantEmail}
onChange={(e) => handleInputChange("tenantEmail", e.target.value)} 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"> <div id="tenantEmail-error" aria-live="polite" aria-atomic="true">
{state.errors?.tenantEmail && {state.errors?.tenantEmail &&
state.errors.tenantEmail.map((error: string) => ( state.errors.tenantEmail.map((error: string) => (

View File

@@ -195,6 +195,12 @@
"rent-amount-placeholder": "enter rent amount", "rent-amount-placeholder": "enter rent amount",
"tenant-email-legend": "TENANT EMAIL", "tenant-email-legend": "TENANT EMAIL",
"tenant-email-placeholder": "enter tenant's email", "tenant-email-placeholder": "enter tenant's email",
"email-status": {
"unverified": "Email not verified",
"verification-pending": "Email verification pending",
"verified": "Email verified",
"unsubscribed": "Email unsubscribed"
},
"warning-missing-tenant-names": "Warning: Tenant first and last name are missing. The 2D barcode will not be displayed to the tenant when they open the shared link until both fields are filled in.", "warning-missing-tenant-names": "Warning: Tenant first and last name are missing. The 2D barcode will not be displayed to the tenant when they open the shared link until both fields are filled in.",
"save-button": "Save", "save-button": "Save",
"cancel-button": "Cancel", "cancel-button": "Cancel",

View File

@@ -194,6 +194,12 @@
"rent-amount-placeholder": "unesite iznos najamnine", "rent-amount-placeholder": "unesite iznos najamnine",
"tenant-email-legend": "EMAIL PODSTANARA", "tenant-email-legend": "EMAIL PODSTANARA",
"tenant-email-placeholder": "unesite email podstanara", "tenant-email-placeholder": "unesite email podstanara",
"email-status": {
"unverified": "Email nije potvrđen",
"verification-pending": "Čeka se potvrda emaila",
"verified": "Email potvrđen",
"unsubscribed": "Email odjavljen"
},
"warning-missing-tenant-names": "Upozorenje: Ime i prezime podstanara nedostaju. 2D barkod neće biti prikazan podstanaru kada otvori podijeljenu poveznicu dok oba polja ne budu popunjena.", "warning-missing-tenant-names": "Upozorenje: Ime i prezime podstanara nedostaju. 2D barkod neće biti prikazan podstanaru kada otvori podijeljenu poveznicu dok oba polja ne budu popunjena.",
"save-button": "Spremi", "save-button": "Spremi",
"cancel-button": "Odbaci", "cancel-button": "Odbaci",