[open-formulieren/open-forms#3993] Added deriveAddress boolean to add…

…ressNL component

i18n/messages/en.json

@@ -249,6 +249,11 @@
     "description": "Fallback label for option with empty label",
     "originalDefault": "(missing label)"
   },
+  "8pwwsI": {
+    "defaultMessage": "Derive address.",
+    "description": "Tooltip for 'DeriveAddress' builder field",
+    "originalDefault": "Derive address."
+  },
   "9lk1eS": {
     "defaultMessage": "Subtract",
     "description": "Operator 'subtract' option label",
@@ -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",

i18n/messages/nl.json

@@ -252,6 +252,11 @@
     "description": "Fallback label for option with empty label",
     "originalDefault": "(missing label)"
   },
+  "8pwwsI": {
+    "defaultMessage": "Derive address.",
+    "description": "Tooltip for 'DeriveAddress' builder field",
+    "originalDefault": "Derive address."
+  },
   "9lk1eS": {
     "defaultMessage": "Aftrekken",
     "description": "Operator 'subtract' option label",
@@ -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",

src/components/builder/derive-address.stories.tsx

@@ -0,0 +1,27 @@
+import {Meta, StoryObj} from '@storybook/react';
+
+import {withFormik} from '@/sb-decorators';
+
+import DeriveAddress from './derive-address';
+
+export default {
+  title: 'Formio/Builder/DeriveAddress',
+  component: DeriveAddress,
+  decorators: [withFormik],
+  parameters: {
+    controls: {hideNoControlsWarning: true},
+    docs: {
+      source: {
+        type: 'dynamic',
+        excludeDecorators: true,
+      },
+    },
+    modal: {noModal: true},
+    formik: {initialValues: {showCharCount: false}},
+  },
+} as Meta<typeof DeriveAddress>;
+
+export const Default: StoryObj<typeof DeriveAddress> = {
+  render: () => <DeriveAddress />,
+  args: {},
+};

src/components/builder/derive-address.tsx

@@ -0,0 +1,25 @@
+import {FormattedMessage, useIntl} from 'react-intl';
+
+import {Checkbox} from '../formio';
+
+const DeriveAddress = () => {
+  const intl = useIntl();
+  const tooltip = intl.formatMessage({
+    description: "Tooltip for 'DeriveAddress' builder field",
+    defaultMessage: 'Derive address.',
+  });
+  return (
+    <Checkbox
+      name="disabled"
+      label={
+        <FormattedMessage
+          description="Label for 'DeriveAddress' builder field"
+          defaultMessage="Derive address"
+        />
+      }
+      tooltip={tooltip}
+    />
+  );
+};
+
+export default DeriveAddress;

src/components/builder/index.ts

@@ -15,6 +15,7 @@ export {default as Hidden} from './hidden';
 export {default as ClearOnHide} from './clear-on-hide';
 export {default as IsSensitiveData} from './is-sensitive-data';
 export {default as ReadOnly} from './readonly';
+export {default as DeriveAddress} from './derive-address';
 export {default as ShowCharCount} from './show-char-count';
 export {default as PresentationConfig} from './presentation-config';
 export {default as ComponentSelect} from './component-select';

src/registry/addressNL/edit.tsx

@@ -4,6 +4,7 @@ import {useIntl} from 'react-intl';
 import {
   BuilderTabs,
   ClearOnHide,
+  DeriveAddress,
   Description,
   Hidden,
   IsSensitiveData,
@@ -61,6 +62,7 @@ const EditForm: EditFormDefinition<AddressNLComponentSchema> = () => {
         <Description />
         <Tooltip />
         <PresentationConfig />
+        <DeriveAddress />
         <Hidden />
         <ClearOnHide />
         <IsSensitiveData />
@@ -117,11 +119,15 @@ EditForm.defaultValues = {
   hidden: false,
   clearOnHide: true,
   isSensitiveData: true,
+  deriveAddress: false,
   defaultValue: {
     postcode: '',
     houseNumber: '',
     houseLetter: '',
     houseNumberAddition: '',
+    city: '',
+    streetName: '',
+    secretStreetCity: '',
   },
   // Advanced tab
   conditional: {

src/registry/addressNL/index.ts

@@ -15,5 +15,8 @@ export default {
     houseNumber: '',
     houseLetter: '',
     houseNumberAddition: '',
+    city: '',
+    streetName: '',
+    secretStreetCity: '',
   },
 } satisfies RegistryEntry<AddressNLComponentSchema>;

src/registry/addressNL/preview.tsx

@@ -56,6 +56,26 @@ const Preview: React.FC<ComponentPreviewProps<AddressNLComponentSchema>> = ({com
           />
         }
       />
+      <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>
   );
 };