refactor: improve email status display and messaging
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
@@ -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>
|
||||
)}
|
||||
|
||||
@@ -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 &&
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
Reference in New Issue
Block a user