feat: configure more things in config.json

__mocks__/RootMock.tsx

@@ -1,15 +1,21 @@
 import { NextIntlClientProvider } from 'next-intl'
 import { ReactNode } from 'react'
 
-import messages from '../translations/en.json'
+import messagesEN from '../translations/en.json'
+import messagesNL from '../translations/nl.json'
+import { I18nConfig } from '@/types/i18n'
+
+// Validate the message JSONs against the TypeScript definition
+export const messagesJsonEN: I18nConfig = messagesEN
+export const messagesJsonNL: I18nConfig = messagesNL
 
 interface Props {
   children: ReactNode
 }
 
 export const RootMock = ({ children }: Props) => {
   return (
-    <NextIntlClientProvider messages={messages} locale="en">
+    <NextIntlClientProvider messages={messagesEN} locale="en">
       {children}
     </NextIntlClientProvider>
   )

config.json

@@ -12,22 +12,29 @@
         "lang": "nl"
       }
     ],
+    "className": "purmerend-theme purmerend-theme--media-query",
+    "naam": "gemeente Purmerend",
+    "header": {
+      "logo": {
+        "alt": "Logo Gemeente Purmerend",
+        "url": "/assets/purmerend-logo.svg"
+      },
+      "title": "Gemeente Purmerend"
+    },
+    "homepage": {
+      "url": "https://purmerend.nl",
+      "title": "gemeente Purmerend"
+    },
+    "contact": {
+      "tel": "0299 452 452"
+    },
     "map": {
       "find_address_in_distance": 30,
       "minimal_zoom": 17,
-      "center": [
-        51.6045656,
-        5.5342026
-      ],
+      "center": [51.6045656, 5.5342026],
       "maxBounds": [
-        [
-          3.31497114423,
-          50.803721015
-        ],
-        [
-          7.09205325687,
-          53.5104033474
-        ]
+        [3.31497114423, 50.803721015],
+        [7.09205325687, 53.5104033474]
       ]
     },
     "links": {
@@ -36,6 +43,24 @@
       "help": "https://signalen.org/",
       "home": "https://signalen.org/",
       "privacy": "https://vng.nl/privacyverklaring-vereniging-van-nederlandse-gemeenten"
+    },
+    "i18n": {
+      "nl": {
+        "describe-report": {
+          "alert": {
+            "help_text": "Lukt het niet om een melding te doen? Bel",
+            "opening_hours": "Wij zijn bereikbaar van maandag tot en met vrijdag van 08:00 tot 18:00 uur."
+          }
+        }
+      },
+      "en": {
+        "describe-report": {
+          "alert": {
+            "help_text": "Having trouble submitting a report? Call",
+            "opening_hours": "We are available Monday through Friday from 8:00 AM to 6:00 PM."
+          }
+        }
+      }
     }
   }
-}
+}

src/app/[locale]/incident/add/components/MapDialog.tsx

@@ -39,6 +39,8 @@ import { FeatureListItem } from '@/app/[locale]/incident/add/components/FeatureL
 import { useFormContext } from 'react-hook-form'
 import { useDarkMode } from '@/hooks/useDarkMode'
 
+type Coordinates = [[number, number], [number, number]]
+
 type MapDialogProps = {
   trigger: React.ReactElement
   onMapReady?: (map: MapRef) => void
@@ -177,7 +179,7 @@ const MapDialog = ({
           position.coords.latitude,
           position.coords.longitude,
           config
-            ? config.base.map.maxBounds
+            ? (config.base.map.maxBounds as Coordinates)
             : [
                 [0, 0],
                 [0, 0],

src/app/[locale]/incident/add/page.tsx

@@ -2,6 +2,7 @@ import { AdditionalInformationPage } from '@/app/[locale]/incident/add/component
 import { getTranslations } from 'next-intl/server'
 import { createTitle } from '@/lib/utils/create-title'
 import { Metadata } from 'next/types'
+import { getServerConfig } from '@/services/config/config'
 
 const currentStep = 2
 const maxStep = 4
@@ -10,14 +11,15 @@ export async function generateMetadata(): Promise<Metadata> {
   const errorMessage = ''
   const t = await getTranslations('describe-add')
   const tGeneral = await getTranslations('general.describe_form')
+  const config = await getServerConfig()
 
   return {
     title: createTitle(
       [
         errorMessage ? tGeneral('title-prefix-error') : '',
         tGeneral('pre-heading', { current: currentStep, max: maxStep }),
         t('heading'),
-        'gemeente Voorbeeld',
+        config.base.naam,
       ],
       tGeneral('title-separator')
     ),

src/app/[locale]/incident/components/IncidentDescriptionPage.tsx

@@ -1,19 +1,20 @@
 'use client'
 
-import { NextIntlClientProvider, useMessages, useTranslations } from 'next-intl'
+import { useTranslations } from 'next-intl'
 import { useFormStore } from '@/store/form_store'
 import { Heading, Paragraph, HeadingGroup, PreHeading } from '@/components'
-import { Alert, Link } from '@/components'
+import { Alert, Link } from '@utrecht/component-library-react/dist/css-module'
 import { IncidentDescriptionForm } from '@/app/[locale]/incident/components/IncidentDescriptionForm'
-import pick from 'lodash/pick'
-import FormProgress from '@/app/[locale]/components/FormProgress'
+import FormProgress from '../../components/FormProgress'
+import { useConfig } from '@/hooks/useConfig'
 
 const currentStep = 1
 const maxStep = 4
 
 export const IncidentDescriptionPage = () => {
   const t = useTranslations('describe-report')
   const { loaded } = useFormStore()
+  const { config } = useConfig()
   const tGeneral = useTranslations('general.describe_form')
 
   if (loaded) {
@@ -31,16 +32,17 @@ export const IncidentDescriptionPage = () => {
               </PreHeading>
             </HeadingGroup>
           </FormProgress>
-          <Alert>
-            <Paragraph>
-              Lukt het niet om een melding te doen? Bel het telefoonnummer
-              <Link href="tel:14 020"> 14 020.</Link>
-            </Paragraph>
-            <Paragraph>
-              Wij zijn bereikbaar van maandag tot en met vrijdag van 08:00 tot
-              18:00 uur.
-            </Paragraph>
-          </Alert>
+          {config ? (
+            <Alert>
+              <Paragraph>
+                {`${t('alert.help_text')} `}
+                <Link href={`tel:${config.base.contact.tel}`}>
+                  {config.base.contact.tel}
+                </Link>
+              </Paragraph>
+              <Paragraph>{t('alert.opening_hours')}</Paragraph>
+            </Alert>
+          ) : null}
           <IncidentDescriptionForm />
         </div>
       </>

src/app/[locale]/incident/contact/page.tsx

@@ -2,6 +2,7 @@ import { IncidentContactPage } from '@/app/[locale]/incident/contact/components/
 import { getTranslations } from 'next-intl/server'
 import { createTitle } from '@/lib/utils/create-title'
 import { Metadata } from 'next/types'
+import { getServerConfig } from '@/services/config/config'
 
 const currentStep = 3
 const maxStep = 4
@@ -10,14 +11,15 @@ export async function generateMetadata(): Promise<Metadata> {
   const errorMessage = ''
   const t = await getTranslations('describe-contact')
   const tGeneral = await getTranslations('general.describe_form')
+  const config = await getServerConfig()
 
   return {
     title: createTitle(
       [
         errorMessage ? tGeneral('title-prefix-error') : '',
         tGeneral('pre-heading', { current: currentStep, max: maxStep }),
         t('heading'),
-        'gemeente Voorbeeld',
+        config.base.naam,
       ],
       tGeneral('title-separator')
     ),

src/app/[locale]/incident/page.tsx

@@ -2,6 +2,7 @@ import { IncidentDescriptionPage } from '@/app/[locale]/incident/components/Inci
 import { getTranslations } from 'next-intl/server'
 import { createTitle } from '@/lib/utils/create-title'
 import { Metadata } from 'next/types'
+import { getServerConfig } from '@/services/config/config'
 
 // TODO: Consider if these should be static params
 const currentStep = 1
@@ -13,6 +14,7 @@ export async function generateMetadata(): Promise<Metadata> {
   // "Update het <title> element in de <head>"
   // https://nldesignsystem.nl/richtlijnen/formulieren/foutmeldingen/screenreaderfeedback
   const errorMessage = ''
+  const config = await getServerConfig()
 
   const t = await getTranslations('describe-report')
   const tGeneral = await getTranslations('general.describe_form')
@@ -23,7 +25,7 @@ export async function generateMetadata(): Promise<Metadata> {
         errorMessage ? tGeneral('title-prefix-error') : '',
         tGeneral('pre-heading', { current: currentStep, max: maxStep }),
         t('heading'),
-        'gemeente Voorbeeld',
+        config.base.naam,
       ],
       tGeneral('title-separator')
     ),

src/app/[locale]/incident/summary/page.tsx

@@ -2,6 +2,7 @@ import { IncidentSummaryPage } from '@/app/[locale]/incident/summary/components/
 import { getTranslations } from 'next-intl/server'
 import { createTitle } from '@/lib/utils/create-title'
 import { Metadata } from 'next/types'
+import { getServerConfig } from '@/services/config/config'
 
 const currentStep = 4
 const maxStep = 4
@@ -10,14 +11,15 @@ export async function generateMetadata(): Promise<Metadata> {
   const errorMessage = ''
   const t = await getTranslations('describe-summary')
   const tGeneral = await getTranslations('general.describe_form')
+  const config = await getServerConfig()
 
   return {
     title: createTitle(
       [
         errorMessage ? tGeneral('title-prefix-error') : '',
         tGeneral('pre-heading', { current: currentStep, max: maxStep }),
         t('heading'),
-        'gemeente Voorbeeld',
+        config.base.naam,
       ],
       tGeneral('title-separator')
     ),

src/app/[locale]/layout.tsx

@@ -16,6 +16,13 @@ import { NextIntlClientProvider, useMessages, useTranslations } from 'next-intl'
 import { Footer } from '@/app/[locale]/components/Footer'
 import pick from 'lodash/pick'
 import type { PropsWithChildren } from 'react'
+import { AppConfig } from '@/types/config'
+
+// TODO: Find a way to load the config asynchronously
+import configJson from '../../../config.json'
+
+// Validate the JSON
+const config: AppConfig = configJson
 
 const font = localFont({
   src: '../../../public/fonts/open-sans.woff2',
@@ -27,7 +34,7 @@ export default function LocaleLayout({
   children,
   params: { locale },
 }: PropsWithChildren<{
-  params: { locale: any }
+  params: { locale: string }
 }>) {
   const messages = useMessages()
 
@@ -42,16 +49,18 @@ export default function LocaleLayout({
       <Body>
         <AppProvider>
           <PageLayout>
-            <Header
-              homepage={{
-                href: '/',
-                label: t('homepage-label'),
-              }}
-              logo={{
-                src: '/assets/purmerend-logo.svg',
-                label: t('logo-label'),
-              }}
-            />
+            {config?.base.header.logo.url ? (
+              <Header
+                homepage={{
+                  href: config.base.homepage.url,
+                  label: t('homepage-label'),
+                }}
+                logo={{
+                  src: config.base.header.logo.url,
+                  label: config.base.header.logo.alt,
+                }}
+              />
+            ) : null}
             <PageBody>
               <Article className="max-w-3xl mx-auto px-4 lg:px-0">
                 {children}

src/i18n.ts

@@ -1,6 +1,17 @@
 import { getRequestConfig } from 'next-intl/server'
+import { getServerConfig } from '@/services/config/config'
+import merge from 'lodash/merge'
 
-export default getRequestConfig(async ({ locale }) => ({
-  messages: (await import(`../translations/${locale}.json`)).default,
-  timeZone: 'Europe/Amsterdam',
-}))
+export default getRequestConfig(async ({ locale }) => {
+  const defaultMessages = (await import(`../translations/${locale}.json`))
+    .default
+
+  const config = await getServerConfig()
+  const i18nMessages = config?.base?.i18n ?? { en: {}, nl: {} }
+  const customMessages = i18nMessages[locale] ?? {}
+
+  return {
+    messages: merge(defaultMessages, customMessages),
+    timeZone: 'Europe/Amsterdam',
+  }
+})

src/types/config.ts

@@ -6,11 +6,40 @@ export type AppConfig = {
       label: string
       lang: string
     }>
+    /**
+     * One or more class names for the NL Design System theme.
+     */
+    className?: string
+    naam: string
+    homepage: {
+      url: string
+      title: string
+    }
+    header: {
+      logo: {
+        /**
+         * Text alternative for the logo image.
+         */
+        alt: string
+
+        /**
+         * Link to the homepage of the website.
+         */
+        url: string
+      }
+      title: string
+    }
+    contact: {
+      /**
+       * Phone number where visitors can get help.
+       */
+      tel: string
+    }
     map: {
       find_address_in_distance: number
       minimal_zoom: number
-      center: [number, number]
-      maxBounds: [[number, number], [number, number]]
+      center: [number, number] | number[]
+      maxBounds: any // TODO: [[number, number], [number, number]]
     }
     links: {
       about: string
@@ -19,5 +48,15 @@ export type AppConfig = {
       home: string
       privacy: string
     }
+    i18n: {
+      [index: string]: {
+        'describe-report': {
+          alert: {
+            help_text: string
+            opening_hours: string
+          }
+        }
+      }
+    }
   }
 }