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, tenantTown,
tenantPaymentMethod, tenantPaymentMethod,
// NOTE: only the fileName is projected from the DB to reduce data transfer // NOTE: only the fileName is projected from the DB to reduce data transfer
utilBillsProofOfPaymentAttachment, utilBillsProofOfPayment,
utilBillsProofOfPaymentUploadedAt, proofOfPaymentType,
} = location; } = location;
const t = useTranslations("home-page.location-card"); const t = useTranslations("home-page.location-card");
const [isUploading, setIsUploading] = useState(false); const [isUploading, setIsUploading] = useState(false);
const [uploadError, setUploadError] = useState<string | null>(null); const [uploadError, setUploadError] = useState<string | null>(null);
const [attachmentUploadedAt, setAttachmentUploadedAt ] = useState<Date | null>(utilBillsProofOfPaymentUploadedAt ?? null); const [attachmentUploadedAt, setAttachmentUploadedAt] = useState<Date | null>(utilBillsProofOfPayment?.uploadedAt ?? null);
const [attachmentFilename, setAttachmentFilename] = useState(utilBillsProofOfPaymentAttachment?.fileName); const [attachmentFilename, setAttachmentFilename] = useState(utilBillsProofOfPayment?.fileName);
const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => { const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
const file = e.target.files?.[0]; const file = e.target.files?.[0];
@@ -57,7 +57,7 @@ export const ViewLocationCard:FC<ViewLocationCardProps> = ({location, userSettin
try { try {
const formData = new FormData(); const formData = new FormData();
formData.append('utilBillsProofOfPaymentAttachment', file); formData.append('utilBillsProofOfPayment', file);
const result = await uploadUtilBillsProofOfPayment(_id, formData); const result = await uploadUtilBillsProofOfPayment(_id, formData);
@@ -172,6 +172,9 @@ export const ViewLocationCard:FC<ViewLocationCardProps> = ({location, userSettin
})() })()
: null : 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"> <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> <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> </label>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<input <input
id="utilBillsProofOfPaymentAttachment" id="utilBillsProofOfPayment"
name="utilBillsProofOfPaymentAttachment" name="utilBillsProofOfPayment"
type="file" type="file"
accept="application/pdf" 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" 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> </div>
)} )}
</fieldset> </fieldset>
}
</div> </div>
</div>); </div>);
}; };