Merge pull request #155 from open-formulieren/of-3993/derive-address-…

…for-addressnl-component [OF#3993] Add deriveAddress boolean to addressNL component
open-formulieren · Jun 12, 2024 · ec864b2 · ec864b2
2 parents 1f12a3e + 0c6e5f7
commit ec864b2
Show file tree

Hide file tree

Showing 7 changed files with 100 additions and 9 deletions.
diff --git a/i18n/messages/en.json b/i18n/messages/en.json
@@ -104,6 +104,11 @@
     "description": "Component edit form tab title for 'Validation' tab",
     "originalDefault": "Validation"
   },
+  "2sbkGI": {
+    "defaultMessage": "When enabled, the street name and city are derived from the entered postcode and house number.",
+    "description": "Tooltip for 'DeriveAddress' builder field",
+    "originalDefault": "When enabled, the street name and city are derived from the entered postcode and house number."
+  },
   "3+WIVB": {
     "defaultMessage": "Maximum value",
     "description": "Label for 'validate.max' builder field",
@@ -354,6 +359,11 @@
     "description": "Tooltip validation error translations panel",
     "originalDefault": "Custom error messages for this component and their translations"
   },
+  "DEetjI": {
+    "defaultMessage": "Street name",
+    "description": "Label for addressNL streetName read only result",
+    "originalDefault": "Street name"
+  },
   "DJWATl": {
     "defaultMessage": "The values that can be picked for this field. Values are the text that is submitted with the form data. Labels are the text next to radio buttons, checkboxes and options in dropdowns.",
     "description": "Tooltip for 'values' builder field",
@@ -1189,6 +1199,11 @@
     "description": "Tooltip for 'useConfigDefaultMapSettings' builder field",
     "originalDefault": "When this is checked, the map component settings configured in the global configuration will be used."
   },
+  "osSl3z": {
+    "defaultMessage": "City",
+    "description": "Label for addressNL city read only result",
+    "originalDefault": "City"
+  },
   "p7g2h+": {
     "defaultMessage": "Add another",
     "description": "Add another option button label",
@@ -1269,6 +1284,11 @@
     "description": "Tooltip for 'showInEmail' builder field",
     "originalDefault": "Whether to show this value in the confirmation email"
   },
+  "toTZ0C": {
+    "defaultMessage": "Derive address",
+    "description": "Label for 'DeriveAddress' builder field",
+    "originalDefault": "Derive address"
+  },
   "u5XYQh": {
     "defaultMessage": "Footer",
     "description": "Component property 'footer' label",

diff --git a/i18n/messages/nl.json b/i18n/messages/nl.json
@@ -105,6 +105,11 @@
     "description": "Component edit form tab title for 'Validation' tab",
     "originalDefault": "Validation"
   },
+  "2sbkGI": {
+    "defaultMessage": "When enabled, the street name and city are derived from the entered postcode and house number.",
+    "description": "Tooltip for 'DeriveAddress' builder field",
+    "originalDefault": "When enabled, the street name and city are derived from the entered postcode and house number."
+  },
   "3+WIVB": {
     "defaultMessage": "Maximale waarde",
     "description": "Label for 'validate.max' builder field",
@@ -358,6 +363,11 @@
     "description": "Tooltip validation error translations panel",
     "originalDefault": "Custom error messages for this component and their translations"
   },
+  "DEetjI": {
+    "defaultMessage": "Street name",
+    "description": "Label for addressNL streetName read only result",
+    "originalDefault": "Street name"
+  },
   "DJWATl": {
     "defaultMessage": "De mogelijke keuzeopties voor dit veld. De waarden worden in de formuliergegevens opgeslagen. De labels zijn de teksten die aan de gebruiker getoond worden.",
     "description": "Tooltip for 'values' builder field",
@@ -1207,6 +1217,11 @@
     "description": "Tooltip for 'useConfigDefaultMapSettings' builder field",
     "originalDefault": "When this is checked, the map component settings configured in the global configuration will be used."
   },
+  "osSl3z": {
+    "defaultMessage": "City",
+    "description": "Label for addressNL city read only result",
+    "originalDefault": "City"
+  },
   "p7g2h+": {
     "defaultMessage": "Nog één toevoegen",
     "description": "Add another option button label",
@@ -1288,6 +1303,11 @@
     "description": "Tooltip for 'showInEmail' builder field",
     "originalDefault": "Whether to show this value in the confirmation email"
   },
+  "toTZ0C": {
+    "defaultMessage": "Derive address",
+    "description": "Label for 'DeriveAddress' builder field",
+    "originalDefault": "Derive address"
+  },
   "u5XYQh": {
     "defaultMessage": "Voettekst",
     "description": "Component property 'footer' label",

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -66,7 +66,7 @@
     "@formatjs/cli": "^6.1.1",
     "@formatjs/ts-transformer": "^3.12.0",
     "@fortawesome/fontawesome-free": "^6.4.0",
-    "@open-formulieren/types": "^0.23.0",
+    "@open-formulieren/types": "^0.24.0",
     "@storybook/addon-actions": "^8.0.8",
     "@storybook/addon-essentials": "^8.0.8",
     "@storybook/addon-interactions": "^8.0.8",

diff --git a/src/registry/addressNL/edit.tsx b/src/registry/addressNL/edit.tsx
@@ -1,5 +1,5 @@
 import {AddressNLComponentSchema} from '@open-formulieren/types';
-import {useIntl} from 'react-intl';
+import {FormattedMessage, useIntl} from 'react-intl';
 
 import {
   BuilderTabs,
@@ -18,11 +18,33 @@ import {
   useDeriveComponentKey,
 } from '@/components/builder';
 import {LABELS} from '@/components/builder/messages';
+import {Checkbox} from '@/components/formio';
 import {TabList, TabPanel, Tabs} from '@/components/formio';
 import {useErrorChecker} from '@/utils/errors';
 
 import {EditFormDefinition} from '../types';
 
+const DeriveAddress = () => {
+  const intl = useIntl();
+  const tooltip = intl.formatMessage({
+    description: "Tooltip for 'DeriveAddress' builder field",
+    defaultMessage:
+      'When enabled, the street name and city are derived from the entered postcode and house number.',
+  });
+  return (
+    <Checkbox
+      name="deriveAddress"
+      label={
+        <FormattedMessage
+          description="Label for 'DeriveAddress' builder field"
+          defaultMessage="Derive address"
+        />
+      }
+      tooltip={tooltip}
+    />
+  );
+};
+
 /**
  * Form to configure a Formio 'address' type component.
  */
@@ -61,6 +83,7 @@ const EditForm: EditFormDefinition<AddressNLComponentSchema> = () => {
         <Description />
         <Tooltip />
         <PresentationConfig />
+        <DeriveAddress />
         <Hidden />
         <ClearOnHide />
         <IsSensitiveData />
@@ -117,6 +140,7 @@ EditForm.defaultValues = {
   hidden: false,
   clearOnHide: true,
   isSensitiveData: true,
+  deriveAddress: false,
   defaultValue: {
     postcode: '',
     houseNumber: '',

diff --git a/src/registry/addressNL/index.ts b/src/registry/addressNL/index.ts
@@ -15,5 +15,8 @@ export default {
     houseNumber: '',
     houseLetter: '',
     houseNumberAddition: '',
+    city: '',
+    streetName: '',
+    secretStreetCity: '',
   },
 } satisfies RegistryEntry<AddressNLComponentSchema>;
diff --git a/src/registry/addressNL/preview.tsx b/src/registry/addressNL/preview.tsx
@@ -56,6 +56,30 @@ const Preview: React.FC<ComponentPreviewProps<AddressNLComponentSchema>> = ({com
           />
         }
       />
+      {component.deriveAddress && (
+        <>
+          <TextField
+            name={`${key}.city`}
+            label={
+              <FormattedMessage
+                description="Label for addressNL city read only result"
+                defaultMessage="City"
+              />
+            }
+            disabled
+          />
+          <TextField
+            name={`${key}.streetNumber`}
+            label={
+              <FormattedMessage
+                description="Label for addressNL streetName read only result"
+                defaultMessage="Street name"
+              />
+            }
+            disabled
+          />
+        </>
+      )}
     </FieldSet>
   );
 };