From b20d68405c202f1fb69d38c22fb46b98cdc63389 Mon Sep 17 00:00:00 2001
From: Knee Cola <kneecola@duck.com>
Date: Mon, 29 Dec 2025 21:58:02 +0100
Subject: [PATCH] refactor: improve email status display and messaging
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

LocationCard:
- Include email status in card info section display condition
- Remove emoji suffixes (icons already convey status visually)

LocationEditForm:
- Enable autoBillFwd and rentDueNotification toggles
- Only show email status when displayed email matches saved email
- Show unverified status when email is changed or for new emails
- Remove emoji suffixes from status messages
- Add left margin to status display

Messages (EN/HR):
- More descriptive email status messages in both languages
- LocationCard: "tenant email not verified" vs "Email not verified"
- LocationEditForm: Clearer explanations like "this e-mail address
  will need to be verified by the tenant"

🤖 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     |  8 ++++----
 web-app/app/ui/LocationEditForm.tsx | 19 +++++++++++--------
 web-app/messages/en.json            | 14 +++++++-------
 web-app/messages/hr.json            | 14 +++++++-------
 4 files changed, 29 insertions(+), 26 deletions(-)

diff --git a/web-app/app/ui/LocationCard.tsx b/web-app/app/ui/LocationCard.tsx
index 233c5fb..d7a34bb 100644
--- a/web-app/app/ui/LocationCard.tsx
+++ b/web-app/app/ui/LocationCard.tsx
@@ -70,7 +70,7 @@ export const LocationCard: FC<LocationCardProps> = ({ location, currency }) => {
                     </Link>
                     <ShareIcon className="h-[1em] w-[1em] cursor-pointer text-2xl inline hover:text-red-500" title="create sharable link" onClick={handleCopyLinkClick} />
                 </div>
-                { totalUnpaid > 0 || totalPayed > 0 || seenByTenantAt || utilBillsProofOfPayment?.uploadedAt ?
+                { totalUnpaid > 0 || totalPayed > 0 || seenByTenantAt || utilBillsProofOfPayment?.uploadedAt || (tenantEmail && tenantEmailStatus && tenantEmailStatus !== EmailStatus.Verified) ?
                     <>
                         <div className="flex ml-1">
                             <div className="divider divider-horizontal p-0 m-0"></div>
@@ -108,9 +108,9 @@ export const LocationCard: FC<LocationCardProps> = ({ location, currency }) => {
                                             tenantEmailStatus === EmailStatus.VerificationPending ? "text-info" :
                                             "text-error"
                                         }>
-                                            {tenantEmailStatus === EmailStatus.Unverified && `${t("email-status.unverified")} ⚠️`}
-                                            {tenantEmailStatus === EmailStatus.VerificationPending && `${t("email-status.verification-pending")} ⏳`}
-                                            {tenantEmailStatus === EmailStatus.Unsubscribed && `${t("email-status.unsubscribed")} ✉️`}
+                                            {tenantEmailStatus === EmailStatus.Unverified && `${t("email-status.unverified")}`}
+                                            {tenantEmailStatus === EmailStatus.VerificationPending && `${t("email-status.verification-pending")}`}
+                                            {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 d7e03c6..870ed75 100644
--- a/web-app/app/ui/LocationEditForm.tsx
+++ b/web-app/app/ui/LocationEditForm.tsx
@@ -265,7 +265,6 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
                         <fieldset className="fieldset">
                             <label className="label cursor-pointer justify-start gap-3">
                                 <input
-                                    disabled={true}
                                     type="checkbox"
                                     name="autoBillFwd"
                                     className="toggle toggle-primary"
@@ -294,7 +293,6 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
                         <fieldset className="fieldset">
                             <label className="label cursor-pointer justify-start gap-3">
                                 <input
-                                    disabled={true}
                                     type="checkbox"
                                     name="rentDueNotification"
                                     className="toggle toggle-primary"
@@ -357,33 +355,38 @@ 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?.tenantEmail && location?.tenantEmail === formValues.tenantEmail && location?.tenantEmailStatus ? (
+                                <div className="flex items-center gap-2 mt-2 ml-2">
                                     {location.tenantEmailStatus === EmailStatus.Unverified && (
                                         <>
                                             <ExclamationTriangleIcon className="h-5 w-5 text-warning" />
-                                            <span className="text-sm text-warning">{t("email-status.unverified")} ⚠️</span>
+                                            <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>
+                                            <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>
+                                            <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>
+                                            <span className="text-sm text-error">{t("email-status.unsubscribed")}</span>
                                         </>
                                     )}
                                 </div>
+                            ):(
+                                <div className="flex items-center gap-2 mt-2 ml-2">
+                                    <ExclamationTriangleIcon className="h-5 w-5 text-warning" />
+                                    <span className="text-sm text-warning">{t("email-status.unverified")}</span>
+                                </div>
                             )}
                             <div id="tenantEmail-error" aria-live="polite" aria-atomic="true">
                                 {state.errors?.tenantEmail &&
diff --git a/web-app/messages/en.json b/web-app/messages/en.json
index 341bc2f..b89e3bc 100644
--- a/web-app/messages/en.json
+++ b/web-app/messages/en.json
@@ -62,9 +62,9 @@
       "seen-by-tenant-label": "seen by tenant",
       "download-proof-of-payment-label": "proof-of-payment.PDF",
       "email-status": {
-        "unverified": "Email not verified",
-        "verification-pending": "Email verification pending",
-        "unsubscribed": "Email unsubscribed"
+        "unverified": "tenant email not verified",
+        "verification-pending": "waiting for tenant to verify email",
+        "unsubscribed": "tenant unsubscribed from receiving emails"
       },
       "payment-info-header": "You can pay the utility bills for this month using the following information:",
       "payment-amount-label": "Amount:",
@@ -196,10 +196,10 @@
     "tenant-email-legend": "TENANT 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"
+      "unverified": "this e-mail address will need to be verified by the tenant",
+      "verification-pending": "waiting for tenant to verify this email address",
+      "verified": "this e-mail address has been verified",
+      "unsubscribed": "tenant unsubscribed this address e-mail address from receiving emails"
     },
     "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",
diff --git a/web-app/messages/hr.json b/web-app/messages/hr.json
index 6030509..d0c1b36 100644
--- a/web-app/messages/hr.json
+++ b/web-app/messages/hr.json
@@ -62,9 +62,9 @@
       "seen-by-tenant-label": "viđeno od strane podstanara",
       "download-proof-of-payment-label": "potvrda-o-uplati.PDF",
       "email-status": {
-        "unverified": "Email nije potvrđen",
-        "verification-pending": "Čeka se potvrda emaila",
-        "unsubscribed": "Email odjavljen"
+        "unverified": "e-mail podstanara nije potvrđen",
+        "verification-pending": "čeka se da podstanar potvrdi e-mail",
+        "unsubscribed": "podstanar odjavio e-mail adresu"
       },
       "payment-info-header": "Režije za ovaj mjesec možete uplatiti koristeći slijedeće podatke:",
       "payment-amount-label": "Iznos:",
@@ -195,10 +195,10 @@
     "tenant-email-legend": "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"
+      "unverified": "podstanar će morati potvrditi ovu e-mail adresu",
+      "verification-pending": "čeka se da podstanar potvrdi e-mail",
+      "verified": "podstanar je potvrdio ovu e-mail adresu",
+      "unsubscribed": "podstanar je odjavio ovu e-mail adresu"
     },
     "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",