[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 besed on the postcode nd husenumber. These fields were always
read-only but now we want to be able to fill in city and street name if
somthing 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) {
@@ -233,14 +243,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,13 +311,15 @@ 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;
   const cityPattern = city?.validate?.pattern;
   const cityError = city?.translatedErrors[intl.locale].pattern;
+  const streetNameError = streetName?.translatedErrors[intl.locale].pattern;
 
+  console.log(streetNameError, cityError);
   const errorMap = (issue, ctx) => {
     switch (issue.code) {
       case z.ZodIssueCode.invalid_type: {
@@ -351,6 +364,9 @@ const AddressNLForm = ({initialValues, required, deriveAddress, layout, setFormi
             pattern: cityPattern,
             errorMessage: cityError,
           },
+          streetName: {
+            errorMessage: streetNameError,
+          },
         }),
         {errorMap}
       )}
@@ -368,6 +384,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 +411,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 (
@@ -434,7 +457,8 @@ const FormikAddress = ({required, setFormioValues, deriveAddress, layout}) => {
                 defaultMessage="Street name"
               />
             }
-            disabled
+            disabled={isAddressDisabled}
+            isRequired={required}
           />
           <TextField
             name="city"
@@ -444,7 +468,8 @@ const FormikAddress = ({required, setFormioValues, deriveAddress, layout}) => {
                 defaultMessage="City"
               />
             }
-            disabled
+            disabled={isAddressDisabled}
+            isRequired={required}
           />
         </>
       )}