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

Add conditional rendering for proof of payment in ViewLocationCard

Browse Source 
- Show upload section only when proofOfPaymentType is "combined"
- Updated field names to use new FileAttachment structure:
  - utilBillsProofOfPaymentAttachment → utilBillsProofOfPayment
  - utilBillsProofOfPaymentUploadedAt → utilBillsProofOfPayment.uploadedAt
- Updated FormData and input field names for consistency
- Improved code formatting and spacing throughout

This enables proper handling of the three proof of payment options:
- "none": No upload section shown
- "combined": Shows single proof upload for all utilities (this change)
- "per-bill": No upload section (handled per individual bill)

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Knee Cola
2025-12-07 11:36:27 +01:00
parent 1c7edabcbe
commit a25a97f68b
1 changed files with 85 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
app/ui/ViewLocationCard.tsx
View File

@@ -30,16 +30,16 @@ export const ViewLocationCard:FC<ViewLocationCardProps> = ({location, userSettin
tenantTown,
tenantPaymentMethod,
// NOTE: only the fileName is projected from the DB to reduce data transfer
utilBillsProofOfPaymentAttachment,
utilBillsProofOfPaymentUploadedAt,
utilBillsProofOfPayment,
proofOfPaymentType,
} = location;
const t = useTranslations("home-page.location-card");
const [isUploading, setIsUploading] = useState(false);
const [uploadError, setUploadError] = useState<string | null>(null);
const [attachmentUploadedAt, setAttachmentUploadedAt ] = useState<Date | null>(utilBillsProofOfPaymentUploadedAt ?? null);
const [attachmentFilename, setAttachmentFilename] = useState(utilBillsProofOfPaymentAttachment?.fileName);
const [attachmentUploadedAt, setAttachmentUploadedAt] = useState<Date | null>(utilBillsProofOfPayment?.uploadedAt ?? null);
const [attachmentFilename, setAttachmentFilename] = useState(utilBillsProofOfPayment?.fileName);
const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
const file = e.target.files?.[0];
@@ -57,7 +57,7 @@ export const ViewLocationCard:FC<ViewLocationCardProps> = ({location, userSettin
try {
const formData = new FormData();
formData.append('utilBillsProofOfPaymentAttachment', file);
formData.append('utilBillsProofOfPayment', file);
const result = await uploadUtilBillsProofOfPayment(_id, formData);
@@ -172,6 +172,9 @@ export const ViewLocationCard:FC<ViewLocationCardProps> = ({location, userSettin
})()
: null
}
{
// IF proof of payment type is "combined", show upload fieldset
proofOfPaymentType === "combined" &&
<fieldset className="fieldset bg-base-200 border-base-300 rounded-box w-xs border p-4 pb-2 pt-0 mt-2">
<legend className="fieldset-legend font-semibold uppercase">{t("upload-proof-of-payment-legend")}</legend>
{
@@ -199,8 +202,8 @@ export const ViewLocationCard:FC<ViewLocationCardProps> = ({location, userSettin
</label>
<div className="flex items-center gap-2">
<input
id="utilBillsProofOfPaymentAttachment"
name="utilBillsProofOfPaymentAttachment"
id="utilBillsProofOfPayment"
name="utilBillsProofOfPayment"
type="file"
accept="application/pdf"
className="file-input file-input-bordered grow file-input-sm my-2 block max-w-[17em] md:max-w-[80em] break-words"
@@ -217,6 +220,7 @@ export const ViewLocationCard:FC<ViewLocationCardProps> = ({location, userSettin
</div>
)}
</fieldset>
}
</div>
</div>);
};