Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added ability to leave street blank for organisers #922

Merged
merged 8 commits into from
Oct 19, 2024
Merged

Added ability to leave street blank for organisers #922

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
3ea8a5a
Add street-less toggle under organisation address field
Anahkiasen Oct 7, 2024
65e64b2
Add to organizer add modal as well
Anahkiasen Oct 7, 2024
0d85c1e
Add translations
Anahkiasen Oct 7, 2024
65ce3bc
Make it easier to use BlankStreetToggle
Anahkiasen Oct 7, 2024
a518b54
Merge branch 'main' into feature/III-6231
simon-debruijn Oct 8, 2024
a4f3695
Ensure the tests target the right street field
Anahkiasen Oct 11, 2024
e68de55
Update other specs as well
Anahkiasen Oct 11, 2024
5845495
Merge branch 'main' into feature/III-6231
Anahkiasen Oct 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion src/i18n/de.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
3 changes: 2 additions & 1 deletion src/i18n/fr.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
3 changes: 2 additions & 1 deletion src/i18n/nl.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
25 changes: 21 additions & 4 deletions src/pages/OrganizerAddModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');

Expand Down Expand Up @@ -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(
Expand Down Expand Up @@ -371,7 +376,12 @@ const OrganizerAddModal = ({
/>
</Stack>
<FormElement
Component={<Input {...register('address.streetAndNumber')} />}
Component={
<Input
{...register('address.streetAndNumber')}
disabled={watchedStreet === BLANK_STREET_NUMBER}
/>
}
id="organizer-address-streetAndNumber"
label={t('organizer.add_modal.labels.address.streetAndNumber')}
error={
Expand All @@ -380,6 +390,13 @@ const OrganizerAddModal = ({
'organizer.add_modal.validation_messages.address.streetAndNumber',
)
}
info={
<BlankStreetToggle
onChange={(value) =>
setValue('address.streetAndNumber', value)
}
/>
}
/>
<Inline spacing={4}>
<Stack minWidth="20rem" maxWidth="25rem">
Expand Down
43 changes: 43 additions & 0 deletions src/pages/steps/LocationStep.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 { 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';
Expand All @@ -54,6 +56,7 @@ import {

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();

Expand Down Expand Up @@ -255,6 +258,35 @@ const isLocationSet = (
);
};

export const BlankStreetToggle = ({
onChange,
}: {
onChange: (address: string) => void;
}) => {
const { t } = useTranslation();
const [isBlankStreet, setIsBlankStreet] = useState(false);

return (
<RadioButtonWithLabel
id={'blank_address'}
name={'blank_address'}
label={
<Text className={'ml-1'}>
{t('organizer.add_modal.labels.address.blank_street')}
</Text>
}
type={RadioButtonTypes.SWITCH}
checked={isBlankStreet}
onChange={() => {
const streetAndNumber = isBlankStreet ? '' : BLANK_STREET_NUMBER;

setIsBlankStreet(!isBlankStreet);
onChange(streetAndNumber);
}}
/>
);
};

const LocationStep = ({
formState,
getValues,
Expand Down Expand Up @@ -663,6 +695,7 @@ const LocationStep = ({
Component={
<Input
value={streetAndNumber}
disabled={streetAndNumber === BLANK_STREET_NUMBER}
onBlur={() => onFieldChange({ streetAndNumber })}
onChange={handleChangeStreetAndNumber}
/>
Expand All @@ -674,6 +707,16 @@ const LocationStep = ({
formState.errors.location?.streetAndNumber &&
t('location.add_modal.errors.streetAndNumber')
}
info={
<BlankStreetToggle
onChange={(streetAndNumber) =>
onFieldChange({
streetAndNumber,
location: { streetAndNumber },
})
}
/>
}
/>
</Stack>
)}
Expand Down
9 changes: 4 additions & 5 deletions src/test/e2e/create-organizer.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();

Expand Down
4 changes: 3 additions & 1 deletion src/test/e2e/create-place.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I slightly prefer the first method

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What do you mean? 🤔

Copy link
Contributor Author

@Anahkiasen Anahkiasen Oct 14, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the issue is maybe placing an actual field inside a field's info slot, which means the label applies to both. Like Playwright is correct that it's iffy. perhaps, I can find a way to work around it so that it's better from a semantics/a11y standpoint

await page
.getByLabel('Straat en nummer')
.nth(0)
.fill(dummyPlace.address.streetAndNumber);
// // 5. Name and Age
await page.getByLabel('Naam van de locatie').click();
Expand Down Expand Up @@ -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
Expand Down
1 change: 1 addition & 0 deletions src/test/e2e/events/create-full-event.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Loading