From 3ea8a5a2e2ab8d9f495ed42bbb95bb5b1463ea39 Mon Sep 17 00:00:00 2001 From: Emma Fabre Date: Mon, 7 Oct 2024 12:55:32 +0200 Subject: [PATCH 1/6] Add street-less toggle under organisation address field --- src/pages/steps/LocationStep.tsx | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/src/pages/steps/LocationStep.tsx b/src/pages/steps/LocationStep.tsx index 93c96a931..7e87f0d81 100644 --- a/src/pages/steps/LocationStep.tsx +++ b/src/pages/steps/LocationStep.tsx @@ -51,6 +51,8 @@ import { StepProps, StepsConfiguration, } from './Steps'; +import { RadioButton, RadioButtonTypes } from '@/ui/RadioButton'; +import { RadioButtonWithLabel } from '@/ui/RadioButtonWithLabel'; const GERMAN_ZIP_REGEX: RegExp = /\b\d{5}\b/; const DUTCH_ZIP_REGEX: RegExp = /^\d{4}([A-Za-z0-9]{2})?$/; @@ -272,6 +274,7 @@ const LocationStep = ({ }: PlaceStepProps) => { const { t } = useTranslation(); + const [streetless, setStreetless] = useState(false); const [streetAndNumber, setStreetAndNumber] = useState(''); const [audienceType, setAudienceType] = useState(''); const [onlineUrl, setOnlineUrl] = useState(''); @@ -663,6 +666,7 @@ const LocationStep = ({ Component={ onFieldChange({ streetAndNumber })} onChange={handleChangeStreetAndNumber} /> @@ -674,6 +678,24 @@ const LocationStep = ({ formState.errors.location?.streetAndNumber && t('location.add_modal.errors.streetAndNumber') } + info={ + + Ik wil mijn straat en nummer niet publiek + vrijgeven + + } + type={RadioButtonTypes.SWITCH} + name={'streetless'} + checked={streetless} + onChange={() => { + setStreetAndNumber(streetless ? '' : '---'); + setStreetless(!streetless); + }} + /> + } /> )} From 65e64b24e82d78e4b956c4d09404e663067e59a4 Mon Sep 17 00:00:00 2001 From: Emma Fabre Date: Mon, 7 Oct 2024 16:18:16 +0200 Subject: [PATCH 2/6] Add to organizer add modal as well --- src/i18n/nl.json | 3 +- src/pages/OrganizerAddModal.tsx | 25 +++++++++++++--- src/pages/steps/LocationStep.tsx | 49 ++++++++++++++++++++------------ 3 files changed, 54 insertions(+), 23 deletions(-) diff --git a/src/i18n/nl.json b/src/i18n/nl.json index 3f5d61506..1420431c4 100644 --- a/src/i18n/nl.json +++ b/src/i18n/nl.json @@ -838,7 +838,8 @@ "country": "Land", "streetAndNumber": "Straat en nummer", "title": "Adres", - "zip": "Postcode" + "zip": "Postcode", + "blank_street": "Ik wil mijn straat en nummer niet publiek vrijgeven" }, "name": { "info": "De officiële publieke naam van de organisatie", diff --git a/src/pages/OrganizerAddModal.tsx b/src/pages/OrganizerAddModal.tsx index d2ff4ea6b..2105e4d31 100644 --- a/src/pages/OrganizerAddModal.tsx +++ b/src/pages/OrganizerAddModal.tsx @@ -31,7 +31,12 @@ import { Title } from '@/ui/Title'; import { getLanguageObjectOrFallback } from '@/utils/getLanguageObjectOrFallback'; import { City, CityPicker } from './CityPicker'; -import { DUTCH_ZIP_REGEX, GERMAN_ZIP_REGEX } from './steps/LocationStep'; +import { + BLANK_STREET_NUMBER, + BlankStreetToggle, + DUTCH_ZIP_REGEX, + GERMAN_ZIP_REGEX, +} from './steps/LocationStep'; const getValue = getValueFromTheme('organizerAddModal'); @@ -140,9 +145,9 @@ const OrganizerAddModal = ({ const urlRegisterProps = register('url'); - const [watchedUrl, watchedCountry] = useWatch({ + const [watchedUrl, watchedCountry, watchedStreet] = useWatch({ control, - name: ['url', 'address.country'], + name: ['url', 'address.country', 'address.streetAndNumber'], }); const getOrganizersByWebsiteQuery = useGetOrganizersByWebsiteQuery( @@ -371,7 +376,12 @@ const OrganizerAddModal = ({ /> } + Component={ + + } id="organizer-address-streetAndNumber" label={t('organizer.add_modal.labels.address.streetAndNumber')} error={ @@ -380,6 +390,13 @@ const OrganizerAddModal = ({ 'organizer.add_modal.validation_messages.address.streetAndNumber', ) } + info={ + { + setValue('address.streetAndNumber', value.streetAndNumber); + }} + /> + } /> diff --git a/src/pages/steps/LocationStep.tsx b/src/pages/steps/LocationStep.tsx index 7e87f0d81..9e798b7f4 100644 --- a/src/pages/steps/LocationStep.tsx +++ b/src/pages/steps/LocationStep.tsx @@ -56,6 +56,7 @@ import { RadioButtonWithLabel } from '@/ui/RadioButtonWithLabel'; const GERMAN_ZIP_REGEX: RegExp = /\b\d{5}\b/; const DUTCH_ZIP_REGEX: RegExp = /^\d{4}([A-Za-z0-9]{2})?$/; +export const BLANK_STREET_NUMBER = '___'; const { publicRuntimeConfig } = getConfig(); @@ -257,6 +258,34 @@ const isLocationSet = ( ); }; +export const BlankStreetToggle = ({ onFieldChange }) => { + const { t } = useTranslation(); + const [isBlankStreet, setIsBlankStreet] = useState(false); + + return ( + + {t('organizer.add_modal.labels.address.blank_street')} + + } + type={RadioButtonTypes.SWITCH} + checked={isBlankStreet} + onChange={() => { + const streetAndNumber = isBlankStreet ? '' : BLANK_STREET_NUMBER; + + setIsBlankStreet(!isBlankStreet); + onFieldChange({ + streetAndNumber, + location: { streetAndNumber }, + }); + }} + /> + ); +}; + const LocationStep = ({ formState, getValues, @@ -274,7 +303,6 @@ const LocationStep = ({ }: PlaceStepProps) => { const { t } = useTranslation(); - const [streetless, setStreetless] = useState(false); const [streetAndNumber, setStreetAndNumber] = useState(''); const [audienceType, setAudienceType] = useState(''); const [onlineUrl, setOnlineUrl] = useState(''); @@ -666,7 +694,7 @@ const LocationStep = ({ Component={ onFieldChange({ streetAndNumber })} onChange={handleChangeStreetAndNumber} /> @@ -679,22 +707,7 @@ const LocationStep = ({ t('location.add_modal.errors.streetAndNumber') } info={ - - Ik wil mijn straat en nummer niet publiek - vrijgeven - - } - type={RadioButtonTypes.SWITCH} - name={'streetless'} - checked={streetless} - onChange={() => { - setStreetAndNumber(streetless ? '' : '---'); - setStreetless(!streetless); - }} - /> + } /> From 0d85c1edbdaec168cff733b3666bc8fd986c6073 Mon Sep 17 00:00:00 2001 From: Emma Fabre Date: Mon, 7 Oct 2024 16:22:49 +0200 Subject: [PATCH 3/6] Add translations --- src/i18n/de.json | 3 ++- src/i18n/fr.json | 3 ++- src/pages/steps/LocationStep.tsx | 4 ++-- 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/i18n/de.json b/src/i18n/de.json index e0c43c2c5..3a03638ad 100644 --- a/src/i18n/de.json +++ b/src/i18n/de.json @@ -838,7 +838,8 @@ "country": "Land", "streetAndNumber": "Straße und Nummer", "title": "Adresse", - "zip": "Postleitzahl" + "zip": "Postleitzahl", + "blank_street": "Ich möchte meine Straße und Hausnummer nicht öffentlich bekannt geben" }, "name": { "info": "Der offizielle öffentliche Name der Organisation", diff --git a/src/i18n/fr.json b/src/i18n/fr.json index 6b8a1c284..dc92b89d9 100644 --- a/src/i18n/fr.json +++ b/src/i18n/fr.json @@ -838,7 +838,8 @@ "country": "Pays", "streetAndNumber": "Rue et numéro", "title": "Adresse", - "zip": "Code postal" + "zip": "Code postal", + "blank_street": "Je ne veux pas rendre publique ma rue et mon numéro" }, "name": { "info": "Le nom public officiel de l'organisation", diff --git a/src/pages/steps/LocationStep.tsx b/src/pages/steps/LocationStep.tsx index 9e798b7f4..0da9b75e3 100644 --- a/src/pages/steps/LocationStep.tsx +++ b/src/pages/steps/LocationStep.tsx @@ -31,6 +31,8 @@ import { FormElement } from '@/ui/FormElement'; import { Icon, Icons } from '@/ui/Icon'; import { getInlineProps, Inline } from '@/ui/Inline'; import { Input } from '@/ui/Input'; +import { RadioButton, RadioButtonTypes } from '@/ui/RadioButton'; +import { RadioButtonWithLabel } from '@/ui/RadioButtonWithLabel'; import { getStackProps, Stack, StackProps } from '@/ui/Stack'; import { Text, TextVariants } from '@/ui/Text'; import { getValueFromTheme } from '@/ui/theme'; @@ -51,8 +53,6 @@ import { StepProps, StepsConfiguration, } from './Steps'; -import { RadioButton, RadioButtonTypes } from '@/ui/RadioButton'; -import { RadioButtonWithLabel } from '@/ui/RadioButtonWithLabel'; const GERMAN_ZIP_REGEX: RegExp = /\b\d{5}\b/; const DUTCH_ZIP_REGEX: RegExp = /^\d{4}([A-Za-z0-9]{2})?$/; From 65ce3bc00520f93ee21d3cc5dc1acd0b84dc335d Mon Sep 17 00:00:00 2001 From: Emma Fabre Date: Mon, 7 Oct 2024 16:28:11 +0200 Subject: [PATCH 4/6] Make it easier to use BlankStreetToggle --- src/pages/OrganizerAddModal.tsx | 6 +++--- src/pages/steps/LocationStep.tsx | 22 +++++++++++++++------- 2 files changed, 18 insertions(+), 10 deletions(-) diff --git a/src/pages/OrganizerAddModal.tsx b/src/pages/OrganizerAddModal.tsx index 2105e4d31..4fcaee763 100644 --- a/src/pages/OrganizerAddModal.tsx +++ b/src/pages/OrganizerAddModal.tsx @@ -392,9 +392,9 @@ const OrganizerAddModal = ({ } info={ { - setValue('address.streetAndNumber', value.streetAndNumber); - }} + onChange={(value) => + setValue('address.streetAndNumber', value) + } /> } /> diff --git a/src/pages/steps/LocationStep.tsx b/src/pages/steps/LocationStep.tsx index 0da9b75e3..6a83968df 100644 --- a/src/pages/steps/LocationStep.tsx +++ b/src/pages/steps/LocationStep.tsx @@ -31,7 +31,7 @@ import { FormElement } from '@/ui/FormElement'; import { Icon, Icons } from '@/ui/Icon'; import { getInlineProps, Inline } from '@/ui/Inline'; import { Input } from '@/ui/Input'; -import { RadioButton, RadioButtonTypes } from '@/ui/RadioButton'; +import { RadioButtonTypes } from '@/ui/RadioButton'; import { RadioButtonWithLabel } from '@/ui/RadioButtonWithLabel'; import { getStackProps, Stack, StackProps } from '@/ui/Stack'; import { Text, TextVariants } from '@/ui/Text'; @@ -258,7 +258,11 @@ const isLocationSet = ( ); }; -export const BlankStreetToggle = ({ onFieldChange }) => { +export const BlankStreetToggle = ({ + onChange, +}: { + onChange: (address: string) => void; +}) => { const { t } = useTranslation(); const [isBlankStreet, setIsBlankStreet] = useState(false); @@ -277,10 +281,7 @@ export const BlankStreetToggle = ({ onFieldChange }) => { const streetAndNumber = isBlankStreet ? '' : BLANK_STREET_NUMBER; setIsBlankStreet(!isBlankStreet); - onFieldChange({ - streetAndNumber, - location: { streetAndNumber }, - }); + onChange(streetAndNumber); }} /> ); @@ -707,7 +708,14 @@ const LocationStep = ({ t('location.add_modal.errors.streetAndNumber') } info={ - + + onFieldChange({ + streetAndNumber, + location: { streetAndNumber }, + }) + } + /> } /> From a4f369580bcaad96de621f86b27d35a41035cab8 Mon Sep 17 00:00:00 2001 From: Emma Fabre Date: Fri, 11 Oct 2024 15:40:08 +0200 Subject: [PATCH 5/6] Ensure the tests target the right street field --- src/test/e2e/create-organizer.spec.ts | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/test/e2e/create-organizer.spec.ts b/src/test/e2e/create-organizer.spec.ts index 34df27719..b6792e1b5 100644 --- a/src/test/e2e/create-organizer.spec.ts +++ b/src/test/e2e/create-organizer.spec.ts @@ -61,11 +61,10 @@ test('create an organizer', async ({ baseURL, page }) => { await page.getByLabel('Gemeente').click(); await page.getByLabel('Gemeente').fill(dummyOrganizer.location.municipality); await page.getByLabel(dummyOrganizer.location.municipality).click(); - await page.getByLabel('Straat en nummer').click(); - await page - .getByLabel('Straat en nummer') - .fill(dummyOrganizer.location.address); - await page.getByLabel('Straat en nummer').blur(); + const streetField = await page.getByLabel('Straat en nummer').nth(0); + await streetField.click(); + await streetField.fill(dummyOrganizer.location.address); + await streetField.blur(); await page.getByText('100/100').click(); From e68de55eac73c281d52bdf18138c4975931b63fe Mon Sep 17 00:00:00 2001 From: Emma Fabre Date: Fri, 11 Oct 2024 16:03:47 +0200 Subject: [PATCH 6/6] Update other specs as well --- src/test/e2e/create-place.spec.ts | 4 +++- src/test/e2e/events/create-full-event.spec.ts | 1 + 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/test/e2e/create-place.spec.ts b/src/test/e2e/create-place.spec.ts index 127575131..d255f532a 100644 --- a/src/test/e2e/create-place.spec.ts +++ b/src/test/e2e/create-place.spec.ts @@ -51,9 +51,10 @@ test('create a place', async ({ baseURL, page }) => { await page .getByRole('option', { name: dummyPlace.address.municipality }) .click(); - await page.getByLabel('Straat en nummer').click(); + await page.getByLabel('Straat en nummer').nth(0).click(); await page .getByLabel('Straat en nummer') + .nth(0) .fill(dummyPlace.address.streetAndNumber); // // 5. Name and Age await page.getByLabel('Naam van de locatie').click(); @@ -106,6 +107,7 @@ test('create a place', async ({ baseURL, page }) => { await page.locator('#organizer-url').fill(dummyPlace.organizer.url); await page .getByLabel('Straat en nummer') + .nth(0) .fill(dummyPlace.organizer.streetAndNumber); await page.getByLabel('Gemeente').fill(dummyPlace.organizer.zip); await page diff --git a/src/test/e2e/events/create-full-event.spec.ts b/src/test/e2e/events/create-full-event.spec.ts index a692e35de..fbcdbb97e 100644 --- a/src/test/e2e/events/create-full-event.spec.ts +++ b/src/test/e2e/events/create-full-event.spec.ts @@ -121,6 +121,7 @@ test('create event with all possible fields filled in', async ({ await page.locator('#organizer-url').fill(dummyEvent.organizer.url); await page .getByLabel('Straat en nummer') + .nth(0) .fill(dummyEvent.organizer.streetAndNumber); await page.getByLabel('Gemeente').fill(dummyEvent.organizer.zip); await page