(refactor) BillEditForm: billed-to-* converted from radio buttons to select; added info box

app/ui/BillEditForm.tsx

@@ -10,6 +10,7 @@ import { formatYearMonth } from "../lib/format";
 import { decodeFromImage, DecodeResult, findDecodePdf417 } from "../lib/pdf/barcodeDecoder";
 import { useLocale, useTranslations } from "next-intl";
 import { Pdf417Barcode } from "./Pdf417Barcode";
+import { InfoBox } from "./InfoBox";
 
 // Next.js does not encode an utf-8 file name correctly when sending a form with a file attachment
 // This is a workaround for that
@@ -67,7 +68,7 @@ export const BillEditForm: FC<BillEditFormProps> = ({ location, bill }) => {
     }, [bill?.barcodeImage, hub3aText]);
 
 
-    const billedTo_handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const billedTo_handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
         setBilledToValue(event.target.value as BilledTo);
     }
 
@@ -227,33 +228,14 @@ export const BillEditForm: FC<BillEditFormProps> = ({ location, bill }) => {
                             ))}
                     </div>
 
-                    <div className="form-control mt-4">
+                    <fieldset className="fieldset bg-base-200 border-base-300 rounded-box w-xs border p-4 pb-2 mt-4">
-                        <div className="flex items-center gap-4">
+                        <legend className="fieldset-legend font-semibold uppercase">{t("billed-to-legend")}</legend>
-                            <span className="label-text">{t("billed-to-label")}</span>
+                        <select className="select select-bordered w-full" name="billedTo" defaultValue={billedToValue} onChange={billedTo_handleChange}>
-                            <label className="label cursor-pointer gap-2">
+                            <option value={BilledTo.Tenant}>{t("billed-to-tenant-option")}</option>
-                                <input
+                            <option value={BilledTo.Landlord}>{t("billed-to-landlord-option")}</option>
-                                    type="radio"
+                        </select>
-                                    name="billedTo"
+                        <InfoBox className="m-0 mt-3 mb-1 p-0">{t("billed-to-info")}</InfoBox>
-                                    value={BilledTo.Tenant}
+                    </fieldset>
-                                    className="radio radio-primary"
-                                    checked={billedToValue === BilledTo.Tenant}
-                                    onChange={billedTo_handleChange}
-                                />
-                                <span className="label-text">{t("billed-to-tenant-option")}</span>
-                            </label>
-                            <label className="label cursor-pointer gap-2">
-                                <input
-                                    type="radio"
-                                    name="billedTo"
-                                    value={BilledTo.Landlord}
-                                    className="radio radio-primary"
-                                    checked={billedToValue === BilledTo.Landlord}
-                                    onChange={billedTo_handleChange}
-                                />
-                                <span className="label-text">{t("billed-to-landlord-option")}</span>
-                            </label>
-                        </div>
-                    </div>
 
                     {/* Show toggle only when adding a new bill (not editing) */}
                     {!bill && (

app/ui/LocationEditForm.tsx

@@ -81,7 +81,6 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
                     </fieldset>
                     <fieldset className="fieldset bg-base-200 border-base-300 rounded-box w-xs border p-4 pb-2 mt-4">
                         <legend className="fieldset-legend font-semibold uppercase">{t("tenant-2d-code-legend")}</legend>
-
                         <InfoBox className="p-1 mb-1">{t("tenant-2d-code-info")}</InfoBox>
 
                         <fieldset className="fieldset">

messages/en.json

@@ -124,9 +124,10 @@
     },
     "attachment": "Attachment",
     "back-button": "Back",
-    "billed-to-label": "Billed to",
+    "billed-to-legend": "Who bears the cost?",
-    "billed-to-tenant-option": "tenant",
+    "billed-to-tenant-option": "the tenant bears this cost",
-    "billed-to-landlord-option": "landlord"
+    "billed-to-landlord-option": "the landlord bears this cost",
+    "billed-to-info": "This option is intended for cases where part of the utility costs are not charged to the tenant. If 'the landlord bears this cost' is selected, this bill will not be included in the monthly statement shown to the tenant."
   },
   "location-delete-form": {
     "text": "Please confirm deletion of realestate \"<strong>{name}</strong>\".",

messages/hr.json

@@ -123,9 +123,10 @@
     },
     "attachment": "Privitak",
     "back-button": "Nazad",
-    "billed-to-label": "Račun plaća",
+    "billed-to-legend": "Tko snosi trošak?",
-    "billed-to-tenant-option": "podstanar",
+    "billed-to-tenant-option": "ovaj trošak snosi podstanar",
-    "billed-to-landlord-option": "vlasnik"
+    "billed-to-landlord-option": "ovaj trošak snosi vlasnik",
+    "billed-to-info": "Ova opcija je predviđena za slučaj kada se dio režija ne naplaćuje od podstanara. Ako je odabrano 'trošak snosi vlasnik', ovaj račun neće biti uključen u mjesečni obračun koji se prikazuje podstanaru."
   },
   "location-delete-form": {
     "text": "Molim potvrdi brisanje nekretnine \"<strong>{name}</strong>\".",