diff --git a/src/components/builder/validate/i18n.tsx b/src/components/builder/validate/i18n.tsx index 9f87ca36..dac6ea7e 100644 --- a/src/components/builder/validate/i18n.tsx +++ b/src/components/builder/validate/i18n.tsx @@ -10,10 +10,11 @@ import {DataMap, Panel, Tab, TabList, TabPanel, Tabs, TextField} from '../../for export function useManageValidatorsTranslations( keys: PossibleValidatorErrorKeys[], - field: string = 'translatedErrors' + prefix: string = '' ): void { + const fieldName = `${prefix}${prefix ? '.' : ''}translatedErrors`; const {supportedLanguageCodes} = useContext(BuilderContext); - const [{value}, , {setValue}] = useField(field); + const [{value}, , {setValue}] = useField(fieldName); useEffect(() => { const newValue = value diff --git a/src/registry/addressNL/edit.stories.ts b/src/registry/addressNL/edit.stories.ts index 8355648d..979b0e15 100644 --- a/src/registry/addressNL/edit.stories.ts +++ b/src/registry/addressNL/edit.stories.ts @@ -35,13 +35,11 @@ export const PostcodeValidationTabWithoutConfiguration: Story = { await step('Navigate to validation tab and open Postcode validation', async () => { await userEvent.click(canvas.getByRole('link', {name: 'Validation'})); await userEvent.click(canvas.getAllByText('Postcode')[0]); - await waitFor(async () => { - expect(await canvas.findByText('Regular expression for postcode')).toBeVisible(); - expect(await canvas.findByText('NL')).toBeVisible(); - expect(await canvas.findByText('EN')).toBeVisible(); - expect(await canvas.findByText('Error code')).toBeVisible(); - expect(await canvas.findByDisplayValue('pattern')).toBeVisible(); - }); + expect(await canvas.findByText('Regular expression for postcode')).toBeVisible(); + expect(await canvas.findByText('NL')).toBeVisible(); + expect(await canvas.findByText('EN')).toBeVisible(); + expect(await canvas.findByText('Error code')).toBeVisible(); + expect(await canvas.findByDisplayValue('pattern')).toBeVisible(); }); }, }; @@ -54,13 +52,11 @@ export const CityValidationTabWithoutConfiguration: Story = { await step('Navigate to validation tab and open City validation', async () => { await userEvent.click(canvas.getByRole('link', {name: 'Validation'})); await userEvent.click(canvas.getAllByText('City')[0]); - await waitFor(async () => { - expect(await canvas.findByText('Regular expression for city')).toBeVisible(); - expect(await canvas.findByText('NL')).toBeVisible(); - expect(await canvas.findByText('EN')).toBeVisible(); - expect(await canvas.findByText('Error code')).toBeVisible(); - expect(await canvas.findByDisplayValue('pattern')).toBeVisible(); - }); + expect(await canvas.findByText('Regular expression for city')).toBeVisible(); + expect(await canvas.findByText('NL')).toBeVisible(); + expect(await canvas.findByText('EN')).toBeVisible(); + expect(await canvas.findByText('Error code')).toBeVisible(); + expect(await canvas.findByDisplayValue('pattern')).toBeVisible(); }); }, }; @@ -94,20 +90,18 @@ export const PostcodeValidationTabWithConfiguration: Story = { await step('Navigate to validation tab and open Postcode validation', async () => { await userEvent.click(canvas.getByRole('link', {name: 'Validation'})); await userEvent.click(canvas.getAllByText('Postcode')[0]); - await waitFor(async () => { - const patternInput = canvas.getByLabelText( - 'Regular expression for postcode' - ) as HTMLInputElement; - expect(patternInput).toBeVisible(); - expect(patternInput.value).toBe('1017 [A-Za-z]{2}'); + const patternInput = canvas.getByLabelText( + 'Regular expression for postcode' + ) as HTMLInputElement; + expect(patternInput).toBeVisible(); + expect(patternInput.value).toBe('1017 [A-Za-z]{2}'); - expect(await canvas.findByDisplayValue('pattern')).toBeVisible(); - expect(await canvas.findByDisplayValue('Postcode moet 1017 XX zijn')).toBeVisible(); + expect(await canvas.findByDisplayValue('pattern')).toBeVisible(); + expect(await canvas.findByDisplayValue('Postcode moet 1017 XX zijn')).toBeVisible(); - await userEvent.click(await canvas.findByText('EN')); - expect(await canvas.findByDisplayValue('pattern')).toBeVisible(); - expect(await canvas.findByDisplayValue('Postal code must be 1017 XX')).toBeVisible(); - }); + await userEvent.click(await canvas.findByText('EN')); + expect(await canvas.findByDisplayValue('pattern')).toBeVisible(); + expect(await canvas.findByDisplayValue('Postal code must be 1017 XX')).toBeVisible(); }); }, }; @@ -141,20 +135,16 @@ export const CityValidationTabWithConfiguration: Story = { await step('Navigate to validation tab and open City validation', async () => { await userEvent.click(canvas.getByRole('link', {name: 'Validation'})); await userEvent.click(canvas.getAllByText('City')[0]); - await waitFor(async () => { - const patternInput = canvas.getByLabelText( - 'Regular expression for city' - ) as HTMLInputElement; - expect(patternInput).toBeVisible(); - expect(patternInput.value).toBe('Amsterdam'); + const patternInput = canvas.getByLabelText('Regular expression for city') as HTMLInputElement; + expect(patternInput).toBeVisible(); + expect(patternInput.value).toBe('Amsterdam'); - expect(await canvas.findByDisplayValue('pattern')).toBeVisible(); - expect(await canvas.findByDisplayValue('De stad moet Amsterdam zijn')).toBeVisible(); + expect(await canvas.findByDisplayValue('pattern')).toBeVisible(); + expect(await canvas.findByDisplayValue('De stad moet Amsterdam zijn')).toBeVisible(); - await userEvent.click(await canvas.findByText('EN')); - expect(await canvas.findByDisplayValue('pattern')).toBeVisible(); - expect(await canvas.findByDisplayValue('The city must be Amsterdam')).toBeVisible(); - }); + await userEvent.click(await canvas.findByText('EN')); + expect(await canvas.findByDisplayValue('pattern')).toBeVisible(); + expect(await canvas.findByDisplayValue('The city must be Amsterdam')).toBeVisible(); }); }, }; diff --git a/src/registry/addressNL/edit.tsx b/src/registry/addressNL/edit.tsx index e572f840..7c17f260 100644 --- a/src/registry/addressNL/edit.tsx +++ b/src/registry/addressNL/edit.tsx @@ -38,6 +38,7 @@ type PostcodeSchema = AddressSubComponents['postcode']; type CitySchema = AddressSubComponents['city']; export interface SubcomponentValidationProps { + prefix: string; component: keyof AddressSubComponents; label: React.ReactNode; tooltip: string; @@ -45,6 +46,7 @@ export interface SubcomponentValidationProps { } export const SubcomponentValidation: React.FC = ({ + prefix, component, label, tooltip, @@ -54,7 +56,7 @@ export const SubcomponentValidation: React.FC = ({ return ( <> = ({ {supportedLanguageCodes.map(code => ( = () => { Validate.useManageValidatorsTranslations( ['pattern'], - `openForms.components.postcode.translatedErrors` - ); - Validate.useManageValidatorsTranslations( - ['pattern'], - `openForms.components.city.translatedErrors` + `openForms.components.postcode` ); + Validate.useManageValidatorsTranslations(['pattern'], `openForms.components.city`); return ( @@ -225,6 +224,7 @@ const EditForm: EditFormDefinition = () => { initialCollapsed > = () => { initialCollapsed >