[open-formulieren/open-forms#5006] Updated addressNL component to man…

…ually fill in city and streetname

Until now the addressNL component would retrieve the city and street
name based on the postcode and housenumber. These fields were always
read-only but now we want to be able to fill in city and street name if
something goes wrong with the API call.

src/formio/components/AddressNL.jsx

@@ -3,7 +3,7 @@
  */
 import {Formik, useFormikContext} from 'formik';
 import debounce from 'lodash/debounce';
-import {useContext, useEffect} from 'react';
+import {useContext, useEffect, useState} from 'react';
 import {createRoot} from 'react-dom/client';
 import {Formio} from 'react-formio';
 import {FormattedMessage, IntlProvider, defineMessages, useIntl} from 'react-intl';
@@ -77,6 +77,7 @@ export default class AddressNL extends Field {
       city: '',
       streetName: '',
       secretStreetCity: '',
+      autoPopulated: false,
     };
   }
 
@@ -199,6 +200,14 @@ const FIELD_LABELS = defineMessages({
     description: 'Label for addressNL houseNumber input',
     defaultMessage: 'House number',
   },
+  streetName: {
+    description: 'Label for addressNL streetName input',
+    defaultMessage: 'Street name',
+  },
+  city: {
+    description: 'Label for addressNL city input',
+    defaultMessage: 'City',
+  },
 });
 
 const addressNLSchema = (required, intl, {postcode = {}, city = {}}) => {
@@ -216,6 +225,7 @@ const addressNLSchema = (required, intl, {postcode = {}, city = {}}) => {
     });
   let postcodeSchema = z.string().regex(postcodeRegex, {message: postcodeErrorMessage});
 
+  let streetNameSchema = z.string();
   const {pattern: cityPattern = '', errorMessage: cityErrorMessage = ''} = city;
   let citySchema = z.string();
   if (cityPattern) {
@@ -235,12 +245,15 @@ const addressNLSchema = (required, intl, {postcode = {}, city = {}}) => {
   if (!required) {
     postcodeSchema = postcodeSchema.optional();
     houseNumberSchema = houseNumberSchema.optional();
+    streetNameSchema = streetNameSchema.optional();
+    citySchema = citySchema.optional();
   }
 
   return z
     .object({
       postcode: postcodeSchema,
-      city: citySchema.optional(),
+      streetName: streetNameSchema,
+      city: citySchema,
       houseNumber: houseNumberSchema,
       houseLetter: z
         .string()
@@ -300,7 +313,7 @@ const AddressNLForm = ({initialValues, required, deriveAddress, layout, setFormi
       openForms: {components: nestedComponents},
     },
   } = useContext(ConfigContext);
-  const {postcode, city} = nestedComponents || {};
+  const {postcode, city, streetName} = nestedComponents || {};
 
   const postcodePattern = postcode?.validate?.pattern;
   const postcodeError = postcode?.translatedErrors[intl.locale].pattern;
@@ -340,6 +353,7 @@ const AddressNLForm = ({initialValues, required, deriveAddress, layout, setFormi
         postcode: true,
         houseNumber: true,
         city: true,
+        streetName: true,
       }}
       validationSchema={toFormikValidationSchema(
         addressNLSchema(required, intl, {
@@ -368,6 +382,7 @@ const AddressNLForm = ({initialValues, required, deriveAddress, layout, setFormi
 const FormikAddress = ({required, setFormioValues, deriveAddress, layout}) => {
   const {values, isValid, setFieldValue} = useFormikContext();
   const {baseUrl} = useContext(ConfigContext);
+  const [isAddressDisabled, setAddressDisabled] = useState(true);
   const useColumns = layout === 'doubleColumn';
 
   useEffect(() => {
@@ -394,6 +409,12 @@ const FormikAddress = ({required, setFormioValues, deriveAddress, layout}) => {
     setFieldValue('city', data['city']);
     setFieldValue('streetName', data['streetName']);
     setFieldValue('secretStreetCity', data['secretStreetCity']);
+
+    // mark the auto-filled fields as populated and disabled when they have been both
+    // retrieved from the API and they do have a value
+    const dataRetrieved = !!(data['city'] && data['streetName']);
+    setAddressDisabled(dataRetrieved);
+    setFieldValue('autoPopulated', dataRetrieved);
   };
 
   return (
@@ -430,21 +451,23 @@ const FormikAddress = ({required, setFormioValues, deriveAddress, layout}) => {
             name="streetName"
             label={
               <FormattedMessage
-                description="Label for addressNL streetName read only result"
+                description="Label for addressNL streetName result or entered value"
                 defaultMessage="Street name"
               />
             }
-            disabled
+            disabled={isAddressDisabled}
+            isRequired={required}
           />
           <TextField
             name="city"
             label={
               <FormattedMessage
-                description="Label for addressNL city read only result"
+                description="Label for addressNL city result or entered value"
                 defaultMessage="City"
               />
             }
-            disabled
+            disabled={isAddressDisabled}
+            isRequired={required}
           />
         </>
       )}

src/formio/components/AddressNL.stories.js

@@ -195,7 +195,7 @@ export const WithFailedBRKValidation = {
   // },
 };
 
-export const WithDeriveCityStreetNameWithData = {
+export const WithDeriveCityStreetNameWithDataNotRequired = {
   render: SingleFormioComponent,
   parameters: {
     msw: {
@@ -246,6 +246,115 @@ export const WithDeriveCityStreetNameWithData = {
   },
 };
 
+export const WithDeriveCityStreetNameWithNoDataNotRequired = {
+  render: SingleFormioComponent,
+  parameters: {
+    msw: {
+      handlers: [mockBAGNoDataGet],
+    },
+  },
+  args: {
+    type: 'addressNL',
+    key: 'addressNL',
+    label: 'Address NL',
+    extraComponentProperties: {
+      validate: {
+        required: false,
+      },
+      deriveAddress: true,
+      openForms: {
+        components: {
+          city: {
+            validate: {pattern: 'Amsterdam'},
+            translatedErrors: {
+              nl: {
+                pattern: 'De stad moet Amsterdam zijn',
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+  play: async ({canvasElement}) => {
+    const canvas = within(canvasElement);
+
+    const postcodeInput = await canvas.findByLabelText('Postcode');
+    await userEvent.type(postcodeInput, '1234AB');
+
+    const houseNumberInput = await canvas.findByLabelText('Huisnummer');
+    await userEvent.type(houseNumberInput, '1');
+
+    const city = await canvas.findByLabelText('Stad');
+    const streetName = await canvas.findByLabelText('Straatnaam');
+
+    await userEvent.tab();
+
+    await waitFor(() => {
+      expect(city).toHaveValue('');
+      expect(city).not.toBeDisabled();
+      expect(streetName).toHaveValue('');
+      expect(streetName).not.toBeDisabled();
+    });
+  },
+};
+export const WithDeriveCityStreeNameNoDataAndRequired = {
+  render: SingleFormioComponent,
+  parameters: {
+    msw: {
+      handlers: [mockBAGNoDataGet],
+    },
+  },
+  args: {
+    type: 'addressNL',
+    key: 'addressNL',
+    label: 'Address NL',
+    extraComponentProperties: {
+      validate: {
+        required: true,
+      },
+      deriveAddress: true,
+      openForms: {
+        components: {
+          city: {
+            validate: {pattern: 'Amsterdam'},
+            translatedErrors: {
+              nl: {
+                pattern: 'De stad moet Amsterdam zijn',
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+  play: async ({canvasElement}) => {
+    const canvas = within(canvasElement);
+
+    const postcodeInput = await canvas.findByLabelText('Postcode');
+    postcodeInput.focus();
+    await userEvent.tab();
+
+    const city = await canvas.findByLabelText('Stad');
+    const streetName = await canvas.findByLabelText('Straatnaam');
+    const postcode_error = await canvas.findByText('Postcode is verplicht.');
+    const house_number_error = await canvas.findByText('Huisnummer is verplicht.');
+    const city_error = await canvas.findByText('Stad is verplicht.');
+    const street_name_error = await canvas.findByText('Straatnaam is verplicht.');
+
+    await waitFor(() => {
+      expect(city).toHaveValue('');
+      expect(city).toBeDisabled();
+      expect(streetName).toHaveValue('');
+      expect(streetName).toBeDisabled();
+      expect(postcode_error).toBeVisible();
+      expect(house_number_error).toBeVisible();
+      expect(city_error).toBeVisible();
+      expect(street_name_error).toBeVisible();
+    });
+  },
+};
+
 export const IncorrectPostcode = {
   render: SingleFormioComponent,
   args: {

src/i18n/compiled/en.json

@@ -397,6 +397,12 @@
       "value": "Check and confirm"
     }
   ],
+  "AKhmW+": [
+    {
+      "type": 0,
+      "value": "Street name"
+    }
+  ],
   "AM6xqd": [
     {
       "type": 0,
@@ -491,12 +497,6 @@
       "value": "Remove"
     }
   ],
-  "DEetjI": [
-    {
-      "type": 0,
-      "value": "Street name"
-    }
-  ],
   "DK2ewv": [
     {
       "type": 0,
@@ -1375,6 +1375,12 @@
       "value": "Form temporarily unavailable"
     }
   ],
+  "ZNkl8Q": [
+    {
+      "type": 0,
+      "value": "City"
+    }
+  ],
   "ZVQeut": [
     {
       "type": 1,
@@ -1789,6 +1795,12 @@
       "value": "Product"
     }
   ],
+  "leZlV+": [
+    {
+      "type": 0,
+      "value": "Street name"
+    }
+  ],
   "lmWBQT": [
     {
       "type": 0,
@@ -1925,12 +1937,6 @@
       "value": "."
     }
   ],
-  "osSl3z": [
-    {
-      "type": 0,
-      "value": "City"
-    }
-  ],
   "ovI+W7": [
     {
       "type": 0,
@@ -2069,6 +2075,12 @@
       "value": "Send code"
     }
   ],
+  "s4+4p2": [
+    {
+      "type": 0,
+      "value": "City"
+    }
+  ],
   "sSmY1N": [
     {
       "type": 0,