[open-formulieren/open-forms#5002] Added showStreetCity to the formbu…

…ilder

i18n/messages/en.json

@@ -554,6 +554,11 @@
     "description": "Tooltip for 'maxNumberOfFiles' builder field",
     "originalDefault": "The maximum number of files that can be uploaded."
   },
+  "Kv4hZl": {
+    "defaultMessage": "When enabled, the street name and city are shown in the form. By default they are shown.",
+    "description": "Tooltip for 'ShowStreetCity' builder field",
+    "originalDefault": "When enabled, the street name and city are shown in the form. By default they are shown."
+  },
   "KwatvH": {
     "defaultMessage": "The number of rows for this text area.",
     "description": "Tooltip for 'NumberOfRows' builder field",
@@ -1598,5 +1603,10 @@
     "defaultMessage": "{hasDescription, select, true {Edit description} other {Add description}}",
     "description": "Link to expand/show the option description textarea.",
     "originalDefault": "{hasDescription, select, true {Edit description} other {Add description}}"
+  },
+  "zbPFLe": {
+    "defaultMessage": "Show street name and city",
+    "description": "Label for 'ShowStreetCity' builder field",
+    "originalDefault": "Show street name and city"
   }
 }

i18n/messages/nl.json

@@ -561,6 +561,11 @@
     "description": "Tooltip for 'maxNumberOfFiles' builder field",
     "originalDefault": "The maximum number of files that can be uploaded."
   },
+  "Kv4hZl": {
+    "defaultMessage": "When enabled, the street name and city are shown in the form. By default they are shown.",
+    "description": "Tooltip for 'ShowStreetCity' builder field",
+    "originalDefault": "When enabled, the street name and city are shown in the form. By default they are shown."
+  },
   "KwatvH": {
     "defaultMessage": "Het aantal regels voor dit tekstvlak.",
     "description": "Tooltip for 'NumberOfRows' builder field",
@@ -1618,5 +1623,10 @@
     "defaultMessage": "{hasDescription, select, true {Bewerk omschrijving} other {Voeg omschrijving toe}}",
     "description": "Link to expand/show the option description textarea.",
     "originalDefault": "{hasDescription, select, true {Edit description} other {Add description}}"
+  },
+  "zbPFLe": {
+    "defaultMessage": "Show street name and city",
+    "description": "Label for 'ShowStreetCity' builder field",
+    "originalDefault": "Show street name and city"
   }
 }

src/components/ComponentConfiguration.stories.tsx

@@ -2361,6 +2361,7 @@ export const AddressNL: Story = {
       },
       deriveAddress: false,
       layout: 'singleColumn',
+      showStreetCity: true,
       openForms: {
         components: {
           postcode: {

src/components/ComponentPreview.stories.tsx

@@ -1055,6 +1055,7 @@ export const AddressNL: Story = {
       },
       deriveAddress: false,
       layout: 'singleColumn',
+      showStreetCity: true,
     },
   },
 };

src/registry/addressNL/edit.stories.ts

@@ -162,3 +162,31 @@ export const CityValidationTabWithConfiguration: Story = {
     });
   },
 };
+
+export const ShowStreetCityWithDeriveAddress: Story = {
+  name: 'AddressNL with show and derive address',
+  args: {
+    component: {
+      id: 'wekruya',
+      type: 'addressNL',
+      key: 'address',
+      label: 'An address field',
+      showStreetCity: false,
+    },
+  },
+  play: async ({canvasElement}) => {
+    const canvas = within(canvasElement);
+
+    const showStreetCityCheckbox = await canvas.findByLabelText('Show street name and city');
+    expect(showStreetCityCheckbox).not.toBeChecked();
+
+    const deriveAddressCheckbox = await canvas.findByLabelText('Derive address');
+    await userEvent.click(deriveAddressCheckbox);
+    expect(showStreetCityCheckbox).toBeChecked();
+    expect(showStreetCityCheckbox).toBeDisabled();
+
+    await userEvent.click(deriveAddressCheckbox);
+    expect(showStreetCityCheckbox).toBeChecked();
+    expect(showStreetCityCheckbox).not.toBeDisabled();
+  },
+};

src/registry/addressNL/edit.tsx

@@ -1,5 +1,7 @@
 import {AddressNLComponentSchema} from '@open-formulieren/types';
 import {TextField} from 'components/formio';
+import {useFormikContext} from 'formik';
+import {ChangeEvent} from 'react';
 import {useContext} from 'react';
 import {FormattedMessage, defineMessage, useIntl} from 'react-intl';
 
@@ -103,6 +105,8 @@ export const SubcomponentValidation: React.FC<SubcomponentValidationProps> = ({
 
 const DeriveAddress = () => {
   const intl = useIntl();
+  const {getFieldProps, setFieldValue} = useFormikContext();
+  const {onChange: formikOnChange} = getFieldProps<boolean>('deriveAddress');
   const tooltip = intl.formatMessage({
     description: "Tooltip for 'DeriveAddress' builder field",
     defaultMessage:
@@ -118,6 +122,40 @@ const DeriveAddress = () => {
         />
       }
       tooltip={tooltip}
+      onChange={(event: ChangeEvent<HTMLInputElement>) => {
+        const {value} = event.target;
+        formikOnChange(event);
+        if (value) {
+          setFieldValue('showStreetCity', value);
+        }
+      }}
+    />
+  );
+};
+
+const ShowStreetCity = () => {
+  const intl = useIntl();
+  const {
+    values: {deriveAddress},
+  } = useFormikContext<AddressNLComponentSchema>();
+
+  const tooltip = intl.formatMessage({
+    description: "Tooltip for 'ShowStreetCity' builder field",
+    defaultMessage:
+      'When enabled, the street name and city are shown in the form. By default they are shown.',
+  });
+
+  return (
+    <Checkbox
+      name="showStreetCity"
+      label={
+        <FormattedMessage
+          description="Label for 'ShowStreetCity' builder field"
+          defaultMessage="Show street name and city"
+        />
+      }
+      tooltip={tooltip}
+      disabled={deriveAddress}
     />
   );
 };
@@ -195,6 +233,7 @@ const EditForm: EditFormDefinition<AddressNLComponentSchema> = () => {
         <Tooltip />
         <PresentationConfig />
         <ColumnsLayout />
+        <ShowStreetCity />
         <DeriveAddress />
         <Hidden />
         <ClearOnHide />
@@ -309,7 +348,7 @@ const EditForm: EditFormDefinition<AddressNLComponentSchema> = () => {
   React.Children and related API's legacy API - this may get removed in future
   versions.
 
-  Explicitly specifying the schema and default values is therefore probbaly best, at
+  Explicitly specifying the schema and default values is therefore probably best, at
   the cost of some repetition.
  */
 EditForm.defaultValues = {
@@ -326,6 +365,7 @@ EditForm.defaultValues = {
   isSensitiveData: true,
   deriveAddress: false,
   layout: 'doubleColumn',
+  showStreetCity: true,
   defaultValue: {
     postcode: '',
     houseNumber: '',

src/registry/addressNL/preview.tsx

@@ -15,7 +15,16 @@ import './preview.scss';
  * @open-formulieren/formio-renderer instead for a more accurate preview.
  */
 const Preview: React.FC<ComponentPreviewProps<AddressNLComponentSchema>> = ({component}) => {
-  const {key, label, description, tooltip, validate = {}, deriveAddress, layout} = component;
+  const {
+    key,
+    label,
+    description,
+    tooltip,
+    validate = {},
+    deriveAddress,
+    layout,
+    showStreetCity,
+  } = component;
 
   const {required = false} = validate;
   return (
@@ -59,7 +68,7 @@ const Preview: React.FC<ComponentPreviewProps<AddressNLComponentSchema>> = ({com
             />
           }
         />
-        {deriveAddress && (
+        {(showStreetCity || deriveAddress) && (
           <>
             <TextField
               name={`${key}.city`}
@@ -69,7 +78,8 @@ const Preview: React.FC<ComponentPreviewProps<AddressNLComponentSchema>> = ({com
                   defaultMessage="City"
                 />
               }
-              disabled
+              disabled={deriveAddress}
+              required={required}
             />
             <TextField
               name={`${key}.streetNumber`}
@@ -79,7 +89,8 @@ const Preview: React.FC<ComponentPreviewProps<AddressNLComponentSchema>> = ({com
                   defaultMessage="Street name"
                 />
               }
-              disabled
+              disabled={deriveAddress}
+              required={required}
             />
           </>
         )}