Add conditional rendering for proof of payment in ViewLocationCard
- 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
@@ -18,7 +18,7 @@ export interface ViewLocationCardProps {
|
|||||||
userSettings: UserSettings | null;
|
userSettings: UserSettings | null;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const ViewLocationCard:FC<ViewLocationCardProps> = ({location, userSettings}) => {
|
export const ViewLocationCard: FC<ViewLocationCardProps> = ({ location, userSettings }) => {
|
||||||
|
|
||||||
const {
|
const {
|
||||||
_id,
|
_id,
|
||||||
@@ -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);
|
||||||
|
|
||||||
@@ -80,17 +80,17 @@ export const ViewLocationCard:FC<ViewLocationCardProps> = ({location, userSettin
|
|||||||
|
|
||||||
const { hub3aText, paymentParams } = useMemo(() => {
|
const { hub3aText, paymentParams } = useMemo(() => {
|
||||||
|
|
||||||
if(!userSettings?.enableIbanPayment || tenantPaymentMethod !== "iban") {
|
if (!userSettings?.enableIbanPayment || tenantPaymentMethod !== "iban") {
|
||||||
return {
|
return {
|
||||||
hub3aText: "",
|
hub3aText: "",
|
||||||
paymentParams: {} as PaymentParams
|
paymentParams: {} as PaymentParams
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
const locationNameTrimmed_max20 = locationName.trimEnd().trimEnd().substring(0,19);
|
const locationNameTrimmed_max20 = locationName.trimEnd().trimEnd().substring(0, 19);
|
||||||
|
|
||||||
const paymentParams:PaymentParams = {
|
const paymentParams: PaymentParams = {
|
||||||
Iznos: (monthlyExpense/100).toFixed(2).replace(".",","),
|
Iznos: (monthlyExpense / 100).toFixed(2).replace(".", ","),
|
||||||
ImePlatitelja: tenantName ?? "",
|
ImePlatitelja: tenantName ?? "",
|
||||||
AdresaPlatitelja: tenantStreet ?? "",
|
AdresaPlatitelja: tenantStreet ?? "",
|
||||||
SjedistePlatitelja: tenantTown ?? "",
|
SjedistePlatitelja: tenantTown ?? "",
|
||||||
@@ -104,16 +104,16 @@ export const ViewLocationCard:FC<ViewLocationCardProps> = ({location, userSettin
|
|||||||
OpisPlacanja: `Režije-${locationNameTrimmed_max20}-${formatYearMonth(yearMonth)}`, // max length 35 = "Režije-" (7) + locationName (20) + "-" (1) + "YYYY-MM" (7)
|
OpisPlacanja: `Režije-${locationNameTrimmed_max20}-${formatYearMonth(yearMonth)}`, // max length 35 = "Režije-" (7) + locationName (20) + "-" (1) + "YYYY-MM" (7)
|
||||||
};
|
};
|
||||||
|
|
||||||
return({
|
return ({
|
||||||
hub3aText: EncodePayment(paymentParams),
|
hub3aText: EncodePayment(paymentParams),
|
||||||
paymentParams
|
paymentParams
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
[]);
|
[]);
|
||||||
|
|
||||||
return(
|
return (
|
||||||
<div data-key={_id } className="card card-compact card-bordered max-w-[30em] min-w-[330px] bg-base-100 border-1 border-neutral my-1">
|
<div data-key={_id} className="card card-compact card-bordered max-w-[30em] min-w-[330px] bg-base-100 border-1 border-neutral my-1">
|
||||||
<div className="card-body">
|
<div className="card-body">
|
||||||
<h2 className="card-title mr-[2em] text-[1.3rem]">{formatYearMonth(yearMonth)} {locationName}</h2>
|
<h2 className="card-title mr-[2em] text-[1.3rem]">{formatYearMonth(yearMonth)} {locationName}</h2>
|
||||||
<div className="card-actions mt-[1em] mb-[1em]">
|
<div className="card-actions mt-[1em] mb-[1em]">
|
||||||
@@ -123,30 +123,30 @@ export const ViewLocationCard:FC<ViewLocationCardProps> = ({location, userSettin
|
|||||||
</div>
|
</div>
|
||||||
{
|
{
|
||||||
monthlyExpense > 0 ?
|
monthlyExpense > 0 ?
|
||||||
<p className="text-[1.2rem]">
|
<p className="text-[1.2rem]">
|
||||||
{ t("payed-total-label") } <strong>{formatCurrency(monthlyExpense, userSettings?.currency)}</strong>
|
{t("payed-total-label")} <strong>{formatCurrency(monthlyExpense, userSettings?.currency)}</strong>
|
||||||
</p>
|
</p>
|
||||||
: null
|
: null
|
||||||
}
|
}
|
||||||
{
|
{
|
||||||
userSettings?.enableIbanPayment && tenantPaymentMethod === "iban" ?
|
userSettings?.enableIbanPayment && tenantPaymentMethod === "iban" ?
|
||||||
<>
|
<>
|
||||||
<p className="max-w-[25em] ml-1 mt-1 mb-1">{t("payment-info-header")}</p>
|
<p className="max-w-[25em] ml-1 mt-1 mb-1">{t("payment-info-header")}</p>
|
||||||
<ul className="ml-4 mb-3">
|
<ul className="ml-4 mb-3">
|
||||||
<li><strong>{t("payment-iban-label")}</strong><pre className="inline pl-1">{ formatIban(paymentParams.IBAN) }</pre></li>
|
<li><strong>{t("payment-iban-label")}</strong><pre className="inline pl-1">{formatIban(paymentParams.IBAN)}</pre></li>
|
||||||
<li><strong>{t("payment-recipient-label")}</strong> <pre className="inline pl-1">{paymentParams.Primatelj}</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-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-recipient-city-label")}</strong><pre className="inline pl-1">{paymentParams.SjedistePrimatelja}</pre></li>
|
||||||
<li><strong>{t("payment-amount-label")}</strong> <pre className="inline pl-1">{paymentParams.Iznos} { userSettings?.currency }</pre></li>
|
<li><strong>{t("payment-amount-label")}</strong> <pre className="inline pl-1">{paymentParams.Iznos} {userSettings?.currency}</pre></li>
|
||||||
<li><strong>{t("payment-description-label")}</strong><pre className="inline pl-1">{paymentParams.OpisPlacanja}</pre></li>
|
<li><strong>{t("payment-description-label")}</strong><pre className="inline pl-1">{paymentParams.OpisPlacanja}</pre></li>
|
||||||
<li><strong>{t("payment-model-label")}</strong><pre className="inline pl-1">{paymentParams.ModelPlacanja}</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-reference-label")}</strong><pre className="inline pl-1">{paymentParams.PozivNaBroj}</pre></li>
|
||||||
</ul>
|
</ul>
|
||||||
<label className="label p-2 grow bg-white border border-gray-300 rounded-box justify-center">
|
<label className="label p-2 grow bg-white border border-gray-300 rounded-box justify-center">
|
||||||
<Pdf417Barcode hub3aText={hub3aText} />
|
<Pdf417Barcode hub3aText={hub3aText} />
|
||||||
</label>
|
</label>
|
||||||
</>
|
</>
|
||||||
: null
|
: null
|
||||||
}
|
}
|
||||||
{
|
{
|
||||||
userSettings?.enableRevolutPayment && tenantPaymentMethod === "revolut" ? (() => {
|
userSettings?.enableRevolutPayment && tenantPaymentMethod === "revolut" ? (() => {
|
||||||
@@ -158,7 +158,7 @@ export const ViewLocationCard:FC<ViewLocationCardProps> = ({location, userSettin
|
|||||||
<QRCode value={revolutPaymentUrl} size={200} className="p-4 bg-white border border-gray-300 rounded-box" />
|
<QRCode value={revolutPaymentUrl} size={200} className="p-4 bg-white border border-gray-300 rounded-box" />
|
||||||
</div>
|
</div>
|
||||||
<p className="text-center mt-1 mb-3">
|
<p className="text-center mt-1 mb-3">
|
||||||
<LinkIcon className="h-[1em] w-[1em] text-2xl inline-block mr-1 ml-[-.5em]"/>
|
<LinkIcon className="h-[1em] w-[1em] text-2xl inline-block mr-1 ml-[-.5em]" />
|
||||||
<Link
|
<Link
|
||||||
href={revolutPaymentUrl}
|
href={revolutPaymentUrl}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
@@ -170,53 +170,57 @@ export const ViewLocationCard:FC<ViewLocationCardProps> = ({location, userSettin
|
|||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
})()
|
})()
|
||||||
: null
|
: null
|
||||||
}
|
}
|
||||||
<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>
|
// IF proof of payment type is "combined", show upload fieldset
|
||||||
{
|
proofOfPaymentType === "combined" &&
|
||||||
// IF proof of payment was uploaded
|
<fieldset className="fieldset bg-base-200 border-base-300 rounded-box w-xs border p-4 pb-2 pt-0 mt-2">
|
||||||
attachmentUploadedAt ? (
|
<legend className="fieldset-legend font-semibold uppercase">{t("upload-proof-of-payment-legend")}</legend>
|
||||||
// IF file name is available, show link to download
|
{
|
||||||
// ELSE it's not available that means that the uploaded file was purged by housekeeping
|
// IF proof of payment was uploaded
|
||||||
// -> don't show anything
|
attachmentUploadedAt ? (
|
||||||
attachmentFilename ? (
|
// IF file name is available, show link to download
|
||||||
<div className="mt-3 ml-[-.5rem]">
|
// ELSE it's not available that means that the uploaded file was purged by housekeeping
|
||||||
<Link
|
// -> don't show anything
|
||||||
href={`/share/proof-of-payment/${_id}/`}
|
attachmentFilename ? (
|
||||||
target="_blank"
|
<div className="mt-3 ml-[-.5rem]">
|
||||||
className='text-center w-full max-w-[20rem] text-nowrap truncate inline-block'
|
<Link
|
||||||
>
|
href={`/share/proof-of-payment/${_id}/`}
|
||||||
<DocumentIcon className="h-[1em] w-[1em] text-2xl inline-block mr-1" />
|
target="_blank"
|
||||||
{decodeURIComponent(attachmentFilename)}
|
className='text-center w-full max-w-[20rem] text-nowrap truncate inline-block'
|
||||||
</Link>
|
>
|
||||||
|
<DocumentIcon className="h-[1em] w-[1em] text-2xl inline-block mr-1" />
|
||||||
|
{decodeURIComponent(attachmentFilename)}
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
) : null
|
||||||
|
) : /* ELSE show upload input */ (
|
||||||
|
<div className="form-control w-full">
|
||||||
|
<label className="label">
|
||||||
|
<span className="label-text">{t("upload-proof-of-payment-label")}</span>
|
||||||
|
</label>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<input
|
||||||
|
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"
|
||||||
|
onChange={handleFileChange}
|
||||||
|
disabled={isUploading}
|
||||||
|
/>
|
||||||
|
{isUploading && (
|
||||||
|
<span className="loading loading-spinner loading-sm"></span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{uploadError && (
|
||||||
|
<p className="text-sm text-red-500 mt-1">{uploadError}</p>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
) : null
|
|
||||||
) : /* ELSE show upload input */ (
|
|
||||||
<div className="form-control w-full">
|
|
||||||
<label className="label">
|
|
||||||
<span className="label-text">{t("upload-proof-of-payment-label")}</span>
|
|
||||||
</label>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<input
|
|
||||||
id="utilBillsProofOfPaymentAttachment"
|
|
||||||
name="utilBillsProofOfPaymentAttachment"
|
|
||||||
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"
|
|
||||||
onChange={handleFileChange}
|
|
||||||
disabled={isUploading}
|
|
||||||
/>
|
|
||||||
{isUploading && (
|
|
||||||
<span className="loading loading-spinner loading-sm"></span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
{uploadError && (
|
|
||||||
<p className="text-sm text-red-500 mt-1">{uploadError}</p>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</fieldset>
|
||||||
)}
|
}
|
||||||
</fieldset>
|
|
||||||
</div>
|
</div>
|
||||||
</div>);
|
</div>);
|
||||||
};
|
};
|
||||||
Reference in New Issue
Block a user