Generalize link

Amsterdam · Feb 12, 2024 · f7df5c4 · f7df5c4
1 parent 7985142
commit f7df5c4
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 27 deletions.
diff --git 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 ? (
-            <Link
-              href={`mailto:[email protected]?subject=Betaler wijzigen&body=${mailBody}`}
-              rel="noopener noreferrer"
-              variant="inList"
-            >
-              Betaler aanpassen
-            </Link>
+            <WijzigenLink
+              linkVariant="inList"
+              debiteurNummer={dossier.facturen?.debiteurNummer}
+              relatieCode={relatieCode}
+              dossierNummer={dossierNummer}
+            />
           ) : (
             ''
           ),
@@ -65,12 +64,14 @@ export function DataTableFacturen({
         <MaParagraph>
           Wilt u uw facturen voor erfpacht en canon op een nieuw adres
           ontvangen? Stuur een e-mail naar{' '}
-          <Link
-            rel="noopener noreferrer"
-            href={`mailto:[email protected]?subject=Adreswijziging facturen erfpacht en canon&body=${mailBody}`}
-          >
-            [email protected]
-          </Link>
+          <WijzigenLink
+            debiteurNummer={dossier.facturen?.debiteurNummer}
+            relatieCode={relatieCode}
+            dossierNummer={dossierNummer}
+            subject="Adreswijziging facturen erfpacht en canon"
+            email="[email protected]"
+            label="[email protected]"
+          />
           . 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({
         <MaParagraph>
           U kunt uw facturen ook per e-mail krijgen. Mail hiervoor uw
           e-mailadres en debiteurennummer naar{' '}
-          <Link
-            rel="noopener noreferrer"
-            href={`mailto:[email protected]?subject=Facturen per e-mail ontvangen&body=${mailBody}`}
-          >
-            [email protected]
-          </Link>
+          <WijzigenLink
+            debiteurNummer={dossier.facturen?.debiteurNummer}
+            relatieCode={relatieCode}
+            dossierNummer={dossierNummer}
+            subject="Facturen per e-mail ontvangen"
+            email="[email protected]"
+            label="[email protected]"
+          />
           .
         </MaParagraph>
       </Grid.Cell>

diff --git 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: <ErfpachtersList erfpachters={dossier.relaties} />,
+      content: (
+        <ErfpachtersList
+          erfpachters={dossier.relaties}
+          dossierNummer={dossier.dossierNummer}
+          debiteurNummer={dossier.facturen.debiteurNummer}
+        />
+      ),
     },
   ];
 

diff --git 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 (
             <OrderedList.Item key={relatie.relatieNaam}>
-              {relatie.relatieNaam}
+              {relatie.relatieNaam}{' '}
+              {relatie.betaler ? (
+                <WijzigenLink
+                  linkVariant="inList"
+                  relatieCode={relatie.relatieCode}
+                  dossierNummer={dossierNummer}
+                  debiteurNummer={debiteurNummer}
+                />
+              ) : (
+                ''
+              )}
             </OrderedList.Item>
           );
         })}

diff --git a/src/client/pages/Erfpacht/DossierDetail/WijzigenLink.tsx 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 = '[email protected]',
+  subject = 'Betaler wijzigen',
+  linkVariant,
+}: WijzigenLinkProps) {
+  return (
+    <Link
+      href={`mailto:${email}?subject=${subject}&body=${getMailBody(
+        dossierNummer,
+        relatieCode,
+        debiteurNummer
+      )}`}
+      rel="noopener noreferrer"
+      variant={linkVariant}
+    >
+      {label}
+    </Link>
+  );
+}