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

refactor: improve email status display and messaging

Browse Source 
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>
This commit is contained in:
Knee Cola
2025-12-29 21:58:02 +01:00
parent fea0f48cec
commit b20d68405c
4 changed files with 29 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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>
)}

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

@@ -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 &&