diff --git a/app/ui/ViewLocationCard.tsx b/app/ui/ViewLocationCard.tsx index 8a6bb0e..8b8f668 100644 --- a/app/ui/ViewLocationCard.tsx +++ b/app/ui/ViewLocationCard.tsx @@ -18,7 +18,7 @@ export interface ViewLocationCardProps { userSettings: UserSettings | null; } -export const ViewLocationCard:FC = ({location, userSettings}) => { +export const ViewLocationCard: FC = ({ location, userSettings }) => { const { _id, @@ -30,16 +30,16 @@ export const ViewLocationCard:FC = ({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(null); - const [attachmentUploadedAt, setAttachmentUploadedAt ] = useState(utilBillsProofOfPaymentUploadedAt ?? null); - const [attachmentFilename, setAttachmentFilename] = useState(utilBillsProofOfPaymentAttachment?.fileName); + const [attachmentUploadedAt, setAttachmentUploadedAt] = useState(utilBillsProofOfPayment?.uploadedAt ?? null); + const [attachmentFilename, setAttachmentFilename] = useState(utilBillsProofOfPayment?.fileName); const handleFileChange = async (e: React.ChangeEvent) => { const file = e.target.files?.[0]; @@ -57,7 +57,7 @@ export const ViewLocationCard:FC = ({location, userSettin try { const formData = new FormData(); - formData.append('utilBillsProofOfPaymentAttachment', file); + formData.append('utilBillsProofOfPayment', file); const result = await uploadUtilBillsProofOfPayment(_id, formData); @@ -80,17 +80,17 @@ export const ViewLocationCard:FC = ({location, userSettin const { hub3aText, paymentParams } = useMemo(() => { - if(!userSettings?.enableIbanPayment || tenantPaymentMethod !== "iban") { + if (!userSettings?.enableIbanPayment || tenantPaymentMethod !== "iban") { return { hub3aText: "", paymentParams: {} as PaymentParams }; } - const locationNameTrimmed_max20 = locationName.trimEnd().trimEnd().substring(0,19); + const locationNameTrimmed_max20 = locationName.trimEnd().trimEnd().substring(0, 19); - const paymentParams:PaymentParams = { - Iznos: (monthlyExpense/100).toFixed(2).replace(".",","), + const paymentParams: PaymentParams = { + Iznos: (monthlyExpense / 100).toFixed(2).replace(".", ","), ImePlatitelja: tenantName ?? "", AdresaPlatitelja: tenantStreet ?? "", SjedistePlatitelja: tenantTown ?? "", @@ -104,16 +104,16 @@ export const ViewLocationCard:FC = ({location, userSettin OpisPlacanja: `Režije-${locationNameTrimmed_max20}-${formatYearMonth(yearMonth)}`, // max length 35 = "Režije-" (7) + locationName (20) + "-" (1) + "YYYY-MM" (7) }; - return({ + return ({ hub3aText: EncodePayment(paymentParams), paymentParams }); }, - // eslint-disable-next-line react-hooks/exhaustive-deps - []); + // eslint-disable-next-line react-hooks/exhaustive-deps + []); - return( -
+ return ( +

{formatYearMonth(yearMonth)} {locationName}

@@ -123,30 +123,30 @@ export const ViewLocationCard:FC = ({location, userSettin
{ monthlyExpense > 0 ? -

- { t("payed-total-label") } {formatCurrency(monthlyExpense, userSettings?.currency)} -

- : null +

+ {t("payed-total-label")} {formatCurrency(monthlyExpense, userSettings?.currency)} +

+ : null } { userSettings?.enableIbanPayment && tenantPaymentMethod === "iban" ? - <> -

{t("payment-info-header")}

-
    -
  • {t("payment-iban-label")}
    { formatIban(paymentParams.IBAN) }
    • -
  • {t("payment-recipient-label")} 
    {paymentParams.Primatelj}
    • -
  • {t("payment-recipient-address-label")}
    {paymentParams.AdresaPrimatelja}
    • -
  • {t("payment-recipient-city-label")}
    {paymentParams.SjedistePrimatelja}
    • -
  • {t("payment-amount-label")} 
    {paymentParams.Iznos} { userSettings?.currency }
    • -
  • {t("payment-description-label")}
    {paymentParams.OpisPlacanja}
    • -
  • {t("payment-model-label")}
    {paymentParams.ModelPlacanja}
    • -
  • {t("payment-reference-label")}
    {paymentParams.PozivNaBroj}
    • -
- - - : null + <> +

{t("payment-info-header")}

+
    +
  • {t("payment-iban-label")}
    {formatIban(paymentParams.IBAN)}
    • +
  • {t("payment-recipient-label")} 
    {paymentParams.Primatelj}
    • +
  • {t("payment-recipient-address-label")}
    {paymentParams.AdresaPrimatelja}
    • +
  • {t("payment-recipient-city-label")}
    {paymentParams.SjedistePrimatelja}
    • +
  • {t("payment-amount-label")} 
    {paymentParams.Iznos} {userSettings?.currency}
    • +
  • {t("payment-description-label")}
    {paymentParams.OpisPlacanja}
    • +
  • {t("payment-model-label")}
    {paymentParams.ModelPlacanja}
    • +
  • {t("payment-reference-label")}
    {paymentParams.PozivNaBroj}
    • +
+ + + : null } { userSettings?.enableRevolutPayment && tenantPaymentMethod === "revolut" ? (() => { @@ -158,7 +158,7 @@ export const ViewLocationCard:FC = ({location, userSettin

- + = ({location, userSettin ); })() - : null + : null } -

- {t("upload-proof-of-payment-legend")} - { - // IF proof of payment was uploaded - attachmentUploadedAt ? ( - // IF file name is available, show link to download - // ELSE it's not available that means that the uploaded file was purged by housekeeping - // -> don't show anything - attachmentFilename ? ( -
- - - {decodeURIComponent(attachmentFilename)} - + { + // IF proof of payment type is "combined", show upload fieldset + proofOfPaymentType === "combined" && +
+ {t("upload-proof-of-payment-legend")} + { + // IF proof of payment was uploaded + attachmentUploadedAt ? ( + // IF file name is available, show link to download + // ELSE it's not available that means that the uploaded file was purged by housekeeping + // -> don't show anything + attachmentFilename ? ( +
+ + + {decodeURIComponent(attachmentFilename)} + +
+ ) : null + ) : /* ELSE show upload input */ ( +
+ +
+ + {isUploading && ( + + )} +
+ {uploadError && ( +

{uploadError}

+ )}
- ) : null - ) : /* ELSE show upload input */ ( -
- -
- - {isUploading && ( - - )} -
- {uploadError && ( -

{uploadError}

)} -
- )} -
+
+ }
); }; \ No newline at end of file