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:
@@ -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) => (
|
||||||
|
|||||||
@@ -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",
|
||||||
|
|||||||
@@ -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",
|
||||||
|
|||||||
Reference in New Issue
Block a user