diff --git a/src/client/pages/Erfpacht/DossierDetail/DataTableFacturen.tsx b/src/client/pages/Erfpacht/DossierDetail/DataTableFacturen.tsx index a3827eeccc..5bc3550840 100644 --- a/src/client/pages/Erfpacht/DossierDetail/DataTableFacturen.tsx +++ b/src/client/pages/Erfpacht/DossierDetail/DataTableFacturen.tsx @@ -10,6 +10,7 @@ import { useErfpachtV2Data } from '../erfpachtData.hook'; import { ErfpachtDatalistProps } from './DatalistGeneral'; import styles from './ErfpachtDossierDetail.module.scss'; import classNames from 'classnames'; +import { WijzigenLink } from './WijzigenLink'; export function DataTableFacturen({ dossier, @@ -19,10 +20,9 @@ export function DataTableFacturen({ const { dossierNummerUrlParam } = useParams<{ dossierNummerUrlParam: string; }>(); - const mailBody = `Dossiernummer: ${ - dossier.dossierNummer - }%0D%0ARelatiecode: ${dossier.relaties?.find((relatie) => relatie.betaler) - ?.relatieCode}%0D%0ADebiteurnummer: ${dossier.facturen?.debiteurNummer}`; + const debiteurNummer = dossier.facturen?.debiteurNummer ?? ''; + const dossierNummer = dossier.dossierNummer; + const betaler = dossier.relaties?.find((relatie) => relatie.betaler); const isBetaler = betaler?.relatieCode === relatieCode; const facturenBetalerDebiteurRows = [ @@ -41,13 +41,12 @@ export function DataTableFacturen({ { label: null, content: isBetaler ? ( - - Betaler aanpassen - + ) : ( '' ), @@ -65,12 +64,14 @@ export function DataTableFacturen({ Wilt u uw facturen voor erfpacht en canon op een nieuw adres ontvangen? Stuur een e-mail naar{' '} - - erfpachtadministratie@amsterdam.nl - + . Zet in het onderwerp 'Adreswijziging'. Vermeld in de mail uw debiteurennummer of het E-dossiernummer en uw nieuwe adresgegevens. U krijgt binnen 3 werkdagen een reactie. @@ -81,12 +82,14 @@ export function DataTableFacturen({ U kunt uw facturen ook per e-mail krijgen. Mail hiervoor uw e-mailadres en debiteurennummer naar{' '} - - debiteurenadministratie@amsterdam.nl - + . diff --git a/src/client/pages/Erfpacht/DossierDetail/DatalistGeneral.tsx b/src/client/pages/Erfpacht/DossierDetail/DatalistGeneral.tsx index 7950c494c5..e3e8bbfae8 100644 --- a/src/client/pages/Erfpacht/DossierDetail/DatalistGeneral.tsx +++ b/src/client/pages/Erfpacht/DossierDetail/DatalistGeneral.tsx @@ -40,7 +40,13 @@ export function DatalistGeneral({ dossier }: ErfpachtDatalistProps) { }, { label: dossier.titelKopErfpachter, - content: , + content: ( + + ), }, ]; diff --git a/src/client/pages/Erfpacht/DossierDetail/ErfpachtersList.tsx b/src/client/pages/Erfpacht/DossierDetail/ErfpachtersList.tsx index 68c4bfa1f8..c35857f13a 100644 --- a/src/client/pages/Erfpacht/DossierDetail/ErfpachtersList.tsx +++ b/src/client/pages/Erfpacht/DossierDetail/ErfpachtersList.tsx @@ -1,13 +1,20 @@ -import { OrderedList } from '@amsterdam/design-system-react'; +import { Link, OrderedList } from '@amsterdam/design-system-react'; import { ErfpachtV2DossiersDetail } from '../../../../server/services/simple-connect/erfpacht'; import styles from './ErfpachtDossierDetail.module.scss'; import { useMediumScreen } from '../../../hooks'; +import { WijzigenLink } from './WijzigenLink'; interface ErfpachtersListProps { erfpachters?: ErfpachtV2DossiersDetail['relaties']; + debiteurNummer?: string; + dossierNummer?: string; } -export function ErfpachtersList({ erfpachters }: ErfpachtersListProps) { +export function ErfpachtersList({ + erfpachters, + debiteurNummer, + dossierNummer, +}: ErfpachtersListProps) { const isMediumScreen = useMediumScreen(); const colCount = isMediumScreen ? 3 : 2; const rowsPerCol = isMediumScreen ? 12 : 4; @@ -37,7 +44,17 @@ export function ErfpachtersList({ erfpachters }: ErfpachtersListProps) { {erfpachters.map((relatie, index, all) => { return ( - {relatie.relatieNaam} + {relatie.relatieNaam}{' '} + {relatie.betaler ? ( + + ) : ( + '' + )} ); })} diff --git a/src/client/pages/Erfpacht/DossierDetail/WijzigenLink.tsx b/src/client/pages/Erfpacht/DossierDetail/WijzigenLink.tsx new file mode 100644 index 0000000000..c08471aba7 --- /dev/null +++ b/src/client/pages/Erfpacht/DossierDetail/WijzigenLink.tsx @@ -0,0 +1,45 @@ +import { Link } from '@amsterdam/design-system-react'; + +export function getMailBody( + dossierNummer?: string, + relatieCode?: string, + debiteurNummer?: string +) { + return `Dossiernummer: ${dossierNummer ?? '-'}%0D%0ARelatiecode: ${ + relatieCode ?? '-' + }%0D%0ADebiteurnummer: ${debiteurNummer ?? '-'}`; +} + +interface WijzigenLinkProps { + debiteurNummer?: string; + dossierNummer?: string; + email?: string; + label?: string; + linkVariant?: 'inList'; + relatieCode?: string; + subject?: string; +} + +export function WijzigenLink({ + dossierNummer, + relatieCode, + debiteurNummer, + label = 'Betaler aanpassen', + email = 'debiteurenadministratie@amsterdam.nl', + subject = 'Betaler wijzigen', + linkVariant, +}: WijzigenLinkProps) { + return ( + + {label} + + ); +}