Add localized payment information labels

Replaces hardcoded Croatian text in ViewLocationCard with i18n translations.
Adds payment information labels (amount, recipient, IBAN, etc.) to both
Croatian and English language files for proper internationalization support.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Knee Cola
2025-11-22 14:46:35 +01:00
parent 371333802a
commit 38a1e9d1b8
3 changed files with 51 additions and 3 deletions

View File

@@ -7,6 +7,7 @@ import { formatCurrency } from "../lib/formatStrings";
import { useTranslations } from "next-intl";
import { ViewBillBadge } from "./ViewBillBadge";
import { Pdf417Barcode } from "./Pdf417Barcode";
import { PaymentParams } from "hub-3a-payment-encoder";
export interface ViewLocationCardProps {
location: BillingLocation
@@ -19,6 +20,21 @@ export const ViewLocationCard:FC<ViewLocationCardProps> = ({location: { _id, nam
// sum all the billAmounts (only for bills billed to tenant)
const monthlyExpense = bills.reduce((acc, bill) => (bill.paid && (bill.billedTo ?? BilledTo.Tenant) === BilledTo.Tenant) ? acc + (bill.payedAmount ?? 0) : acc, 0);
const paymentParams:PaymentParams = {
Iznos:"123,66", // NOTE: use comma, not period!
ImePlatitelja:"Ivan Horvat",
AdresaPlatitelja:"Ilica 23",
SjedistePlatitelja:"10000 Zagreb",
Primatelj:"Nikola Derežić",
AdresaPrimatelja:"Divka Budaka 17",
SjedistePrimatelja:"Zagreb",
IBAN:"HR8924020061100679445",
ModelPlacanja: "HR00", // MUST contain "HR" prefix!
PozivNaBroj:"2025-05",
SifraNamjene:"",
OpisPlacanja:"Režije-Budakova-05",
};
return(
<div data-key={_id } className="card card-compact card-bordered max-w-[30em] min-w-[350px] bg-base-100 border-1 border-neutral my-1">
<div className="card-body">
@@ -35,7 +51,19 @@ export const ViewLocationCard:FC<ViewLocationCardProps> = ({location: { _id, nam
</p>
: null
}
<Pdf417Barcode />
<p className="max-w-[25em] ml-1 mt-1 mb-1">{t("payment-info-header")}</p>
<ul className="ml-4 mb-3">
<li><strong>{t("payment-amount-label")}</strong> <pre className="inline pl-1">{paymentParams.Iznos}</pre></li>
<li><strong>{t("payment-recipient-label")}</strong> <pre className="inline pl-1">{paymentParams.Primatelj}</pre></li>
<li><strong>{t("payment-recipient-address-label")}</strong><pre className="inline pl-1">{paymentParams.AdresaPrimatelja}</pre></li>
<li><strong>{t("payment-recipient-city-label")}</strong><pre className="inline pl-1">{paymentParams.SjedistePrimatelja}</pre></li>
<li><strong>{t("payment-iban-label")}</strong><pre className="inline pl-1">{paymentParams.IBAN}</pre></li>
<li><strong>{t("payment-model-label")}</strong><pre className="inline pl-1">{paymentParams.ModelPlacanja}</pre></li>
<li><strong>{t("payment-reference-label")}</strong><pre className="inline pl-1">{paymentParams.PozivNaBroj}</pre></li>
<li><strong>{t("payment-purpose-code-label")}</strong><pre className="inline pl-1">{paymentParams.SifraNamjene}</pre></li>
<li><strong>{t("payment-description-label")}</strong><pre className="inline pl-1">{paymentParams.OpisPlacanja}</pre></li>
</ul>
<Pdf417Barcode paymentParams={paymentParams} />
</div>
</div>);
};

View File

@@ -57,7 +57,17 @@
"payed-total-label": "Payed total:",
"link-copy-message": "Link copied to clipboard",
"monthly-statement-legend": "Monthly statement",
"seen-by-tenant-label": "Seen by tenant"
"seen-by-tenant-label": "Seen by tenant",
"payment-info-header": "You can pay the utility bills for this month using the following information:",
"payment-amount-label": "Amount:",
"payment-recipient-label": "Recipient:",
"payment-recipient-address-label": "Recipient address:",
"payment-recipient-city-label": "Recipient city:",
"payment-iban-label": "IBAN:",
"payment-model-label": "Payment model:",
"payment-reference-label": "Reference number:",
"payment-purpose-code-label": "Purpose code:",
"payment-description-label": "Payment description:"
},
"month-card": {
"payed-total-label": "Total monthly expenditure:",

View File

@@ -57,7 +57,17 @@
"payed-total-label": "Ukupno plaćeno:",
"link-copy-message": "Link kopiran na clipboard",
"monthly-statement-legend": "Obračun",
"seen-by-tenant-label": "Viđeno od strane podstanara"
"seen-by-tenant-label": "Viđeno od strane podstanara",
"payment-info-header": "Režije za ovaj mjesec možete uplatiti koristeći slijedeće podatke:",
"payment-amount-label": "Iznos:",
"payment-recipient-label": "Primatelj:",
"payment-recipient-address-label": "Adresa primatelja:",
"payment-recipient-city-label": "Sjedište primatelja:",
"payment-iban-label": "IBAN:",
"payment-model-label": "Model plaćanja:",
"payment-reference-label": "Poziv na broj:",
"payment-purpose-code-label": "Šifra namjene:",
"payment-description-label": "Opis plaćanja:"
},
"month-card": {
"payed-total-label": "Ukupni mjesečni trošak:",