diff --git a/i18n/messages/en.json b/i18n/messages/en.json index 88919467..ff821d82 100644 --- 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 index 6a549cf4..d8b67424 100644 --- 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 index 00fe5c24..cc41aac7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -42,7 +42,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", @@ -4959,9 +4959,9 @@ } }, "node_modules/@open-formulieren/types": { - "version": "0.23.0", - "resolved": "https://registry.npmjs.org/@open-formulieren/types/-/types-0.23.0.tgz", - "integrity": "sha512-+ZmRLobwPVRXQqmHAZIcFBJ/YCBUnuF1QiO6t3n8yVqfTbTIrXDaSFiC59FExSAHwiu57lnT1JA4RpOw60vTTg==", + "version": "0.24.0", + "resolved": "https://registry.npmjs.org/@open-formulieren/types/-/types-0.24.0.tgz", + "integrity": "sha512-sdaI+BE1g6TceU2jjOopBe/vFfRe3w3eY+TLHceUi0j9mkKX/5MppM2d0JqsesgEIv9XjBJlectxxvtbRvrCjA==", "dev": true }, "node_modules/@pkgjs/parseargs": { @@ -26879,9 +26879,9 @@ } }, "@open-formulieren/types": { - "version": "0.23.0", - "resolved": "https://registry.npmjs.org/@open-formulieren/types/-/types-0.23.0.tgz", - "integrity": "sha512-+ZmRLobwPVRXQqmHAZIcFBJ/YCBUnuF1QiO6t3n8yVqfTbTIrXDaSFiC59FExSAHwiu57lnT1JA4RpOw60vTTg==", + "version": "0.24.0", + "resolved": "https://registry.npmjs.org/@open-formulieren/types/-/types-0.24.0.tgz", + "integrity": "sha512-sdaI+BE1g6TceU2jjOopBe/vFfRe3w3eY+TLHceUi0j9mkKX/5MppM2d0JqsesgEIv9XjBJlectxxvtbRvrCjA==", "dev": true }, "@pkgjs/parseargs": { diff --git a/package.json b/package.json index 42e26cee..b0ba0c3a 100644 --- 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 index f1bdd2f1..ce95c322 100644 --- 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 ( + + } + tooltip={tooltip} + /> + ); +}; + /** * Form to configure a Formio 'address' type component. */ @@ -61,6 +83,7 @@ const EditForm: EditFormDefinition = () => { + @@ -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 index 61584f30..8a7e4bd6 100644 --- 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; diff --git a/src/registry/addressNL/preview.tsx b/src/registry/addressNL/preview.tsx index a39628bf..4dc1ae11 100644 --- a/src/registry/addressNL/preview.tsx +++ b/src/registry/addressNL/preview.tsx @@ -56,6 +56,30 @@ const Preview: React.FC> = ({com /> } /> + {component.deriveAddress && ( + <> + + } + disabled + /> + + } + disabled + /> + + )} ); };