Amsterdam · timvanoostrom · Feb 3, 2025 · Jan 28, 2025 · Jan 23, 2025 · Jan 23, 2025
diff --git a/.env.local.template b/.env.local.template
@@ -155,7 +155,13 @@ BFF_AFIS_API_BASE_URL=$BFF_MOCK_API_BASE_URL/afis/RESTAdapter
 BFF_AFIS_CLIENT_ID=mijnamsterdam
 BFF_AFIS_CLIENT_SECRET=$DEV_ENC_KEY_256
 BFF_ENABLEU_AFIS_API_KEY=$DEV_API_KEY
-BFF_AFIS_DIRECT_CONNECT_ENABLED=false
+
+# If we connect to AFIS directly, and bypassing Enable-U, we want to fetch the token directly from AFIS.
+BFF_AFIS_ENABLE_DIRECT_TOKEN_FETCHING=false
+
+# Can be used to enable PostponeFetch in the AFIS api config.
+# This way we can disable the Afis Thema via Backend.
+BFF_AFIS_FEATURE_TOGGLE_ACTIVE=true
 
 # Belastingen
 BFF_BELASTINGEN_BEARER_TOKEN=$DEV_ENC_KEY_256

diff --git a/src/client/helpers/monitoring.ts b/src/client/helpers/monitoring.ts
@@ -20,7 +20,7 @@ const severityMap: Record<Severity, string> = {
 };
 
 export type Properties = {
-  properties?: Record<string, any>;
+  properties?: Record<string, unknown>;
   severity?: Severity;
 };
 
@@ -58,9 +58,13 @@ export function captureException(error: unknown, properties?: Properties) {
     properties,
   };
 
-  IS_DEVELOPMENT
-    ? MA_APP_MODE !== 'unittest' && console.log('Capture exception', payload)
-    : appInsights.trackException(payload);
+  if (IS_DEVELOPMENT) {
+    if (MA_APP_MODE !== 'unittest') {
+      console.log('Capture exception', payload);
+    }
+  } else {
+    appInsights.trackException(payload);
+  }
 }
 
 export function captureMessage(message: string, properties?: Properties) {
@@ -70,12 +74,16 @@ export function captureMessage(message: string, properties?: Properties) {
 
   const payload = { message, severity, properties };
 
-  IS_DEVELOPMENT
-    ? MA_APP_MODE !== 'unittest' && console.log('Capture message', payload)
-    : appInsights.trackTrace(payload);
+  if (IS_DEVELOPMENT) {
+    if (MA_APP_MODE !== 'unittest') {
+      console.log('Capture message', payload);
+    }
+  } else {
+    appInsights.trackTrace(payload);
+  }
 }
 
-export function trackEvent(name: string, properties: Record<string, any>) {
+export function trackEvent(name: string, properties: Record<string, unknown>) {
   return IS_DEVELOPMENT
     ? MA_APP_MODE !== 'unittest' && console.log('Track event', name, properties)
     : appInsights.trackEvent({

diff --git a/src/client/hooks/useTrackThemas.hook.ts b/src/client/hooks/useTrackThemas.hook.ts
@@ -1,14 +1,13 @@
 import { useEffect } from 'react';
 
 import { useSessionStorage } from './storage.hook';
-import { useAppStateGetter } from './useAppState';
 import { useThemaMenuItems } from './useThemaMenuItems';
+import { ThemaMenuItemTransformed } from '../config/thema';
 import { trackEvent } from '../helpers/monitoring';
 
-type ThemaTitleAndId = Record<'title' | 'id', string>;
+type ThemaTitleAndId = Pick<ThemaMenuItemTransformed, 'title' | 'id'>;
 
 export function useTrackThemas() {
-  const appState = useAppStateGetter();
   const [storedThemas, setStoredThemas] = useSessionStorage('themas', null);
 
   const themasState = useThemaMenuItems();
@@ -17,10 +16,7 @@ export function useTrackThemas() {
     if (!storedThemas && !themasState.isLoading) {
       const themaTitlesAndIds: ThemaTitleAndId[] = themasState.items.map(
         (item) => ({
-          title:
-            typeof item.title === 'function'
-              ? item.title(appState)
-              : item.title,
+          title: item.title,
           id: item.id,
         })
       );

diff --git a/src/client/pages/Afis/Afis-thema-config.tsx b/src/client/pages/Afis/Afis-thema-config.tsx
@@ -1,14 +1,14 @@
 import { ReactNode } from 'react';
 
-import { generatePath, LinkProps } from 'react-router-dom';
+import { generatePath } from 'react-router-dom';
 
 import {
   AfisFacturenResponse,
   AfisFactuur,
   AfisFactuurState,
 } from '../../../server/services/afis/afis-types';
 import { AppRoutes } from '../../../universal/config/routes';
-import { ZaakDetail } from '../../../universal/types';
+import { LinkProps, ZaakDetail } from '../../../universal/types';
 import { DisplayProps } from '../../components/Table/TableV2';
 import { MAX_TABLE_ROWS_ON_THEMA_PAGINA } from '../../config/app';
 

diff --git a/src/client/pages/Afis/Afis.tsx b/src/client/pages/Afis/Afis.tsx
@@ -20,14 +20,28 @@ import ThemaPagina from '../ThemaPagina/ThemaPagina';
 import ThemaPaginaTable from '../ThemaPagina/ThemaPaginaTable';
 
 const pageContentTop = (
-  <Paragraph>
-    Hieronder ziet u een overzicht van uw facturen. U ziet hier niet de facturen
-    inzake Gemeentebelastingen. Deze vindt u terug bij{' '}
-    <Link rel="noreferrer" href={import.meta.env.REACT_APP_SSO_URL_BELASTINGEN}>
-      Mijn Belastingen
-    </Link>
-    .
-  </Paragraph>
+  <>
+    <Paragraph className="ams-mb--sm">
+      Hieronder ziet u een overzicht van uw facturen. Mist u een factuur of
+      heeft u een vraag over één van uw facturen? Stuur een e-mail naar{' '}
+      <Link href="mailto:[email protected]?subject=Vraag over facturen en betaalvoorkeuren">
+        [email protected]
+      </Link>{' '}
+      met de details van de factuur, zoals het factuurnummer of andere relevante
+      informatie, zodat zij u verder kunnen helpen.
+    </Paragraph>
+    <Paragraph>
+      U ziet hier niet de facturen over Gemeentebelastingen. Deze vindt u terug
+      bij{' '}
+      <Link
+        rel="noreferrer"
+        href={import.meta.env.REACT_APP_SSO_URL_BELASTINGEN}
+      >
+        Mijn Belastingen
+      </Link>
+      .
+    </Paragraph>
+  </>
 );
 
 export function AfisDisclaimer() {
@@ -55,11 +69,11 @@ export function AfisDisclaimerOvergedragenFacturen() {
   return (
     <Alert>
       <Paragraph>
-        Bij het uitblijven van een betaling, wordt uw factuur door Financiën
-        overgedragen naar de afdeling Incasso & Invordering van directie
-        Belastingen. Deze afdeling is vanaf dat moment verantwoordelijk voor de
-        invordering van uw factuur en daarmee uw aanspreekpunt. De status van uw
-        factuur wordt hier niet bijgewerkt.
+        Als u niet betaalt, wordt uw factuur door Financiën overgedragen naar de
+        afdeling Incasso & Invordering van directie Belastingen. Deze afdeling
+        is vanaf dat moment verantwoordelijk voor de invordering van uw factuur
+        en daarmee uw aanspreekpunt. De status van uw factuur vindt u terug bij
+        Mijn Belastingen - gemeente Amsterdam.
       </Paragraph>
       <Heading level={4} size="level-5">
         Heeft u vragen?

diff --git a/src/client/pages/Afis/AfisBetaalVoorkeuren.tsx b/src/client/pages/Afis/AfisBetaalVoorkeuren.tsx
@@ -47,7 +47,10 @@ function AfisBusinessPartnerDetails({
 
   return (
     <Grid.Cell span="all">
-      <CollapsiblePanel title="Betaalgegevens" startCollapsed={startCollapsed}>
+      <CollapsiblePanel
+        title="Facturatiegegevens"
+        startCollapsed={startCollapsed}
+      >
         {isLoading && <LoadingContent />}
         {!isLoading && !!rows.length && (
           <Grid>
@@ -112,43 +115,45 @@ export function AfisBetaalVoorkeuren() {
   const pageContentTop = (
     <>
       <Paragraph className="ams-mb--sm">
-        Hieronder kunt u uw betaalgegevens bekijken en een automatische incasso
-        instellen per afdeling van de gemeente. Wil u uw betaalgegevens
-        wijzigen, stuur dan een email naar{' '}
+        Hieronder kunt u uw facturatiegegevens bekijken en een automatische
+        incasso instellen per afdeling van de gemeente. Wil u uw
+        facturatiegegevens wijzigen, stuur dan een email naar{' '}
         <Link
-          href={`mailto:[email protected]?subject=Betaalgegevens wijzigen&body=${mailBody}`}
+          href={`mailto:[email protected]?subject=Facturatiegegevens wijzigen&body=${mailBody}`}
         >
           [email protected]
         </Link>
         .
       </Paragraph>
-      <Heading level={3} size="level-5">
-        Via automatische incasso betalen
-      </Heading>
-      <Paragraph className="ams-mb--sm">
-        Download{' '}
-        <Link
-          rel="noreferrer noopener"
-          href="https://omnichanneliv.cdn.salesforce-experience.com/cms/delivery/media/MCJM5EH46HYNAZXFYHPNR4WUIMBA?oid=00D68000000aIuV&channelId=0ap68000000g3EBAAY"
-        >
-          het machtigingsformulier.
-        </Link>{' '}
-        Kies een of meerdere producten waarvoor de gemeente automatisch mag
-        incasseren en vul uw gegevens in. Het debiteurennummer is niet
-        verplicht. Onderteken het formulier en stuur het naar:
-      </Paragraph>
-      <Paragraph className="ams-mb--sm">
-        Gemeente Amsterdam
-        <br />
-        Debiteurenadministratie
-        <br />
-        Antwoordnummer 47389
-        <br />
-        1070 WC
-        <br />
-        Amsterdam
-      </Paragraph>
-      <Paragraph>Een postzegel is niet nodig.</Paragraph>
+      {!FeatureToggle.afisEmandatesActive && (
+        <>
+          <Heading level={3} size="level-5">
+            Via automatische incasso betalen
+          </Heading>
+          <Paragraph className="ams-mb--sm">
+            Download{' '}
+            <Link
+              rel="noreferrer noopener"
+              href="https://omnichanneliv.cdn.salesforce-experience.com/cms/delivery/media/MCJM5EH46HYNAZXFYHPNR4WUIMBA?oid=00D68000000aIuV&channelId=0ap68000000g3EBAAY"
+            >
+              het machtigingsformulier.
+            </Link>{' '}
+            Kies een of meerdere producten waarvoor de gemeente automatisch mag
+            incasseren en vul uw gegevens in. Het debiteurennummer is niet
+            verplicht. Onderteken het formulier en stuur het naar:
+          </Paragraph>
+          <Paragraph className="ams-mb--sm">
+            Gemeente Amsterdam
+            <br />
+            Debiteurenadministratie
+            <br />
+            Antwoordnummer 47389
+            <br />
+            1070 WC Amsterdam
+          </Paragraph>
+          <Paragraph>Een postzegel is niet nodig.</Paragraph>
+        </>
+      )}
     </>
   );
 
@@ -193,7 +198,7 @@ export function AfisBetaalVoorkeuren() {
         )}
       {hasBusinessPartnerDetailsError && (
         <>
-          Wij kunnen nu geen betaalgegevens laten zien.
+          Wij kunnen nu geen facturatiegegevens laten zien.
           <br />
         </>
       )}

diff --git a/src/client/pages/Afis/__snapshots__/Afis.test.tsx.snap b/src/client/pages/Afis/__snapshots__/Afis.test.tsx.snap
@@ -80,10 +80,22 @@ exports[`<Afis /> > Matches the Full Page snapshot 1`] = `
         <div
           class="ams-grid__cell ams-grid__cell--span-all"
         >
+          <p
+            class="ams-paragraph ams-mb--sm"
+          >
+            Hieronder ziet u een overzicht van uw facturen. Mist u een factuur of heeft u een vraag over één van uw facturen? Stuur een e-mail naar 
+            <a
+              class="ams-link ams-link--standalone"
+              href="mailto:[email protected]?subject=Vraag over facturen en betaalvoorkeuren"
+            >
+              [email protected]
+            </a>
+             met de details van de factuur, zoals het factuurnummer of andere relevante informatie, zodat zij u verder kunnen helpen.
+          </p>
           <p
             class="ams-paragraph"
           >
-            Hieronder ziet u een overzicht van uw facturen. U ziet hier niet de facturen inzake Gemeentebelastingen. Deze vindt u terug bij 
+            U ziet hier niet de facturen over Gemeentebelastingen. Deze vindt u terug bij 
             <a
               class="ams-link ams-link--standalone"
               href="http://remote-api-host/sso/portaal/belastingen"
@@ -94,6 +106,62 @@ exports[`<Afis /> > Matches the Full Page snapshot 1`] = `
             .
           </p>
         </div>
+        <div
+          class="ams-grid__cell ams-grid__cell--span-all"
+        >
+          <ul
+            class="ams-link-list"
+          >
+            <li>
+              <a
+                class="ams-link-list__link"
+                href="https://www.amsterdam.nl/ondernemen/afis/facturen/"
+                rel="noreferrer"
+              >
+                <span
+                  class="ams-icon ams-icon--size-5"
+                >
+                  <svg
+                    aria-hidden="true"
+                    focusable="false"
+                    viewBox="0 0 32 32"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="m9.757 32-2.9-2.91L19.937 16 6.857 2.91 9.757 0l16 16z"
+                      fill-rule="evenodd"
+                    />
+                  </svg>
+                </span>
+                Meer over facturen van de gemeente
+              </a>
+            </li>
+            <li>
+              <a
+                class="ams-link-list__link"
+                href="http://remote-api-host/sso/portaal/belastingen"
+                rel="noreferrer"
+              >
+                <span
+                  class="ams-icon ams-icon--size-5"
+                >
+                  <svg
+                    aria-hidden="true"
+                    focusable="false"
+                    viewBox="0 0 32 32"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="m9.757 32-2.9-2.91L19.937 16 6.857 2.91 9.757 0l16 16z"
+                      fill-rule="evenodd"
+                    />
+                  </svg>
+                </span>
+                Belastingen op Mijn Amsterdam
+              </a>
+            </li>
+          </ul>
+        </div>
         <div
           class="ams-grid__cell ams-grid__cell--span-all"
         >

diff --git a/src/client/pages/Afis/useAfisThemaData.hook.tsx b/src/client/pages/Afis/useAfisThemaData.hook.tsx
@@ -176,6 +176,7 @@ export function useAfisThemaData() {
     isThemaPaginaError: isError(AFIS, false),
     isThemaPaginaLoading: isLoading(AFIS),
     listPageTitle,
+    linkListItems,
     routes,
     dependencyErrors: {
       open: hasFailedDependency(AFIS, 'open'),

diff --git a/src/server/config/source-api.ts b/src/server/config/source-api.ts
@@ -96,6 +96,12 @@ export type SourceApiKey =
 
 type ApiDataRequestConfig = Record<SourceApiKey, DataRequestConfig>;
 
+const afisFeatureToggle = getFromEnv('BFF_AFIS_FEATURE_TOGGLE_ACTIVE');
+const postponeFetchAfis =
+  typeof afisFeatureToggle !== 'undefined'
+    ? afisFeatureToggle === 'false'
+    : !FeatureToggle.afisActive;
+
 const contactmomentenFeatureToggle = getFromEnv(
   'BFF_CONTACTMOMENTEN_FEATURE_TOGGLE_ACTIVE'
 );
@@ -106,7 +112,7 @@ const postponeFetchContactmomenten =
 
 export const ApiConfig: ApiDataRequestConfig = {
   AFIS: {
-    postponeFetch: !FeatureToggle.afisActive,
+    postponeFetch: postponeFetchAfis,
     url: `${getFromEnv('BFF_AFIS_API_BASE_URL')}`,
   },
   ZORGNED_JZD: {