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}
+
+ );
+}