Repository: cultuurnet/udb3-frontend
Pull request #1012: III-6565-Add cultuurkuur organizer toggle
Author: login: vhande
Created: 2025-04-09T08:30:02Z | Merged: 2025-04-10T09:51:21Z

### Added
- Cultuurkuur organizer toggle
- CultuurkuurStep

<img width="797" alt="organizer" src="https://github.com/user-attachments/assets/c72ef93d-fa70-471a-83ba-fcc95252276f" />

---

Ticket: https://jira.uitdatabank.be/browse/III-6565



Diff:
diff --git a/src/hooks/api/authenticated-query.ts b/src/hooks/api/authenticated-query.ts
index a6cbc990a..b8424803e 100644
--- a/src/hooks/api/authenticated-query.ts
+++ b/src/hooks/api/authenticated-query.ts
@@ -209,6 +209,8 @@ const isDuplicateMutation = (
     'offers-change-calendar',
     'places-add',
     'request-ownership',
+    'offers-add-label',
+    'offers-remove-label',
   ];
 
   if (disabledMutations.includes(mutationKey)) {
diff --git a/src/i18n/nl.json b/src/i18n/nl.json
index 755760d9e..66eb6c982 100644
--- a/src/i18n/nl.json
+++ b/src/i18n/nl.json
@@ -1037,6 +1037,8 @@
         "url": "Website",
         "url_requirements": "Om organisaties in de UiTdatabank uniek te houden, vragen we elke organisatie een unieke en geldige hyperlink.",
         "is_contact_url": "Deze URL ook gebruiken als contact website",
+        "is_cultuurkuur": "Deze organisatie heeft ook aanbod voor scholen",
+        "is_cultuurkuuur_info": "Je organisatie zal verschijnen op cultuurkuur.be, het platform voor onderwijs & cultuur. In de volgende stap vragen we je daarom om extra scholenspecifieke informatie toe te voegen.",
         "errors": {
           "name_required": "Naam ontbreekt",
           "url_required": "Url ontbreekt",
diff --git a/src/pages/organizers/create/OrganizerForm.tsx b/src/pages/organizers/create/OrganizerForm.tsx
index 4badcb636..241c77533 100644
--- a/src/pages/organizers/create/OrganizerForm.tsx
+++ b/src/pages/organizers/create/OrganizerForm.tsx
@@ -1,10 +1,15 @@
 import { useRouter } from 'next/router';
 import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useQueryClient } from 'react-query';
 import * as yup from 'yup';
 
 import { ScopeTypes } from '@/constants/OfferType';
 import { URL_REGEX } from '@/constants/Regex';
+import {
+  useAddOfferLabelMutation,
+  useRemoveOfferLabelMutation,
+} from '@/hooks/api/offers';
 import {
   useCreateOrganizerMutation,
   useGetOrganizerByIdQuery,
@@ -28,6 +33,10 @@ import { Text } from '@/ui/Text';
 import { getValueFromTheme } from '@/ui/theme';
 import { getLanguageObjectOrFallback } from '@/utils/getLanguageObjectOrFallback';
 import { getUniqueLabels } from '@/utils/getUniqueLabels';
+import {
+  CULTUURKUUR_ORGANIZER_LABEL,
+  hasCultuurkuurOrganizerLabel,
+} from '@/utils/hasCultuurkuurOrganizerLabel';
 
 import { NameAndUrlStep } from './steps/NameAndUrlStep';
 
@@ -40,10 +49,12 @@ const typeAndThemeStepConfiguration: StepsConfiguration<'nameAndUrl'> = {
     name: '',
     url: '',
     isContactUrl: true,
+    isCultuurkuur: false,
   },
   validation: yup.object({
     name: yup.string().required(),
     url: yup.string().matches(URL_REGEX).required(),
+    isCultuurkuur: yup.boolean().required(),
   }),
 };
 
@@ -56,7 +67,8 @@ const configurations = [
     shouldShowStep: (form) =>
       form.offerId &&
       form.getValues('nameAndUrl.name') &&
-      form.getValues('nameAndUrl.url'),
+      form.getValues('nameAndUrl.url') &&
+      form.getValues('nameAndUrl.cultuurkuur'),
     variant: AdditionalInformationStepVariant.ORGANIZER,
     name: 'location' as StepsConfiguration['name'],
     defaultValue: locationStepConfiguration.defaultValue,
@@ -78,6 +90,9 @@ const OrganizerForm = () => {
   );
 
   const convertOrganizerToFormData = (organizer: Organizer) => {
+    const isCultuurkuurOrganizer = hasCultuurkuurOrganizerLabel(
+      organizer?.hiddenLabels,
+    );
     const locationAttributes = !organizer?.address
       ? {}
       : parseLocationAttributes(
@@ -93,6 +108,7 @@ const OrganizerForm = () => {
           i18n.language as SupportedLanguage,
         ) as string,
         url: organizer.url,
+        isCultuurkuur: isCultuurkuurOrganizer,
       },
       ...locationAttributes,
     };
@@ -113,8 +129,22 @@ const OrganizerForm = () => {
   const organizer = getOrganizerByIdQuery?.data;
   const organizerLabels = getUniqueLabels(organizer);
 
+  const queryClient = useQueryClient();
   const createOrganizerMutation = useCreateOrganizerMutation();
   const updateOrganizerMutation = useUpdateOrganizerMutation();
+  const addLabelMutation = useAddOfferLabelMutation();
+  const removeLabelMutation = useRemoveOfferLabelMutation();
+
+  const handleCultuurkuurLabelMutation = async (organizerId: string) => {
+    const { isCultuurkuur } = getValues('nameAndUrl');
+    const mutation = isCultuurkuur ? addLabelMutation : removeLabelMutation;
+    await mutation.mutateAsync({
+      id: organizerId,
+      scope,
+      label: CULTUURKUUR_ORGANIZER_LABEL,
+    });
+    await queryClient.invalidateQueries('organizers');
+  };
 
   const upsertOrganizer = async ({ onSuccess }) => {
     let mutation = createOrganizerMutation;
@@ -143,8 +173,10 @@ const OrganizerForm = () => {
 
   const onSuccess = () => {
     upsertOrganizer({
-      onSuccess: async (organizerId) =>
-        await push(`/organizers/${organizerId}/edit`),
+      onSuccess: async (organizerId: string) => {
+        await handleCultuurkuurLabelMutation(organizerId);
+        await push(`/organizers/${organizerId}/edit`);
+      },
     });
   };
 
@@ -161,8 +193,11 @@ const OrganizerForm = () => {
           configurations={configurations}
           form={form}
           labels={organizerLabels}
-          onChange={() => {
-            if (urlOrganizerId) onSuccess();
+          onChange={async () => {
+            if (urlOrganizerId) {
+              onSuccess();
+              await handleCultuurkuurLabelMutation(urlOrganizerId);
+            }
           }}
         />
       </Page.Content>
diff --git a/src/pages/organizers/create/steps/CultuurkuurStep.tsx b/src/pages/organizers/create/steps/CultuurkuurStep.tsx
new file mode 100644
index 000000000..2ed80544c
--- /dev/null
+++ b/src/pages/organizers/create/steps/CultuurkuurStep.tsx
@@ -0,0 +1,68 @@
+import { Controller } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+
+import { CultuurKuurIcon } from '@/pages/CultuurKuurIcon';
+import { StepProps } from '@/pages/steps/Steps';
+import { Alert } from '@/ui/Alert';
+import { FormElement } from '@/ui/FormElement';
+import { LabelPositions, LabelVariants } from '@/ui/Label';
+import { RadioButton, RadioButtonTypes } from '@/ui/RadioButton';
+import { getStackProps, Stack, StackProps } from '@/ui/Stack';
+import { colors } from '@/ui/theme';
+
+type CultuurkuurStepProps = StackProps & StepProps;
+
+const CultuurkuurStep = ({
+  control,
+  watch,
+  onChange,
+  mainLanguage,
+  name,
+  ...props
+}: CultuurkuurStepProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <Stack spacing={4} maxWidth="36.5rem" {...getStackProps(props)}>
+      <Controller
+        name={'nameAndUrl.isCultuurkuur'}
+        control={control}
+        render={({ field }) => (
+          <>
+            <FormElement
+              id={field.name}
+              label={
+                <>
+                  {t('organizers.create.step1.is_cultuurkuur')}
+                  <CultuurKuurIcon marginLeft={2} />
+                </>
+              }
+              labelVariant={LabelVariants.NORMAL}
+              labelPosition={LabelPositions.RIGHT}
+              Component={
+                <RadioButton
+                  type={RadioButtonTypes.SWITCH}
+                  checked={field.value}
+                  onChange={() => {
+                    field.onChange(!field.value);
+                    onChange({
+                      isCultuurkuur: !field.value,
+                    });
+                  }}
+                  color={colors.udbMainPositiveGreen}
+                />
+              }
+            />
+            {field.value && (
+              <Alert variant="primary">
+                {t('organizers.create.step1.is_cultuurkuuur_info')}
+              </Alert>
+            )}
+          </>
+        )}
+      />
+    </Stack>
+  );
+};
+
+export { CultuurkuurStep };
diff --git a/src/pages/organizers/create/steps/NameAndUrlStep.tsx b/src/pages/organizers/create/steps/NameAndUrlStep.tsx
index 0f91d2432..49dda6625 100644
--- a/src/pages/organizers/create/steps/NameAndUrlStep.tsx
+++ b/src/pages/organizers/create/steps/NameAndUrlStep.tsx
@@ -1,23 +1,37 @@
 import { Controller } from 'react-hook-form';
 
+import { FeatureFlags, useFeatureFlag } from '@/hooks/useFeatureFlag';
 import { getStepProps, StepProps } from '@/pages/steps/Steps';
 import { parseSpacing } from '@/ui/Box';
 import { Stack } from '@/ui/Stack';
 
+import { CultuurkuurStep } from './CultuurkuurStep';
 import { NameStep } from './NameStep';
 import { UrlStep } from './UrlStep';
 
-const NameAndUrlStep = ({ control, name, ...props }: StepProps) => (
-  <Controller
-    name={name}
-    control={control}
-    render={() => (
-      <Stack spacing={4} maxWidth={parseSpacing(9)}>
-        <NameStep {...getStepProps(props)} name={name} control={control} />
-        <UrlStep {...getStepProps(props)} name={name} control={control} />
-      </Stack>
-    )}
-  />
-);
+const NameAndUrlStep = ({ control, name, ...props }: StepProps) => {
+  const [isCultuurkuurFeatureFlagEnabled] = useFeatureFlag(
+    FeatureFlags.CULTUURKUUR,
+  );
+  return (
+    <Controller
+      name={name}
+      control={control}
+      render={() => (
+        <Stack spacing={4} maxWidth={parseSpacing(9)}>
+          <NameStep {...getStepProps(props)} name={name} control={control} />
+          <UrlStep {...getStepProps(props)} name={name} control={control} />
+          {isCultuurkuurFeatureFlagEnabled && (
+            <CultuurkuurStep
+              {...getStepProps(props)}
+              name={name}
+              control={control}
+            />
+          )}
+        </Stack>
+      )}
+    />
+  );
+};
 
 export { NameAndUrlStep };
diff --git a/src/pages/steps/AdditionalInformationStep/AdditionalInformationStep.tsx b/src/pages/steps/AdditionalInformationStep/AdditionalInformationStep.tsx
index ad4860059..8453ae65c 100644
--- a/src/pages/steps/AdditionalInformationStep/AdditionalInformationStep.tsx
+++ b/src/pages/steps/AdditionalInformationStep/AdditionalInformationStep.tsx
@@ -17,6 +17,7 @@ import { getStackProps, Stack, StackProps } from '@/ui/Stack';
 import { Tabs } from '@/ui/Tabs';
 import { Text } from '@/ui/Text';
 import { getValueFromTheme } from '@/ui/theme';
+import { hasCultuurkuurOrganizerLabel } from '@/utils/hasCultuurkuurOrganizerLabel';
 
 import { AudienceStep } from '../AudienceStep';
 import { StepsConfiguration } from '../Steps';
@@ -30,8 +31,6 @@ import { PriceInformation } from './PriceInformation';
 
 const getGlobalValue = getValueFromTheme('global');
 
-const CULTUURKUUR_ORGANIZER_LABEL = 'cultuurkuur_organizer';
-
 const AdditionalInformationStepVariant = {
   MOVIE: 'movie',
   EVENT: 'event',
@@ -339,7 +338,7 @@ const AdditionalInformationStep = ({
           }) => {
             if (
               field === Fields.CULTUURKUUR &&
-              !(labels ?? []).includes(CULTUURKUUR_ORGANIZER_LABEL)
+              !hasCultuurkuurOrganizerLabel(labels)
             ) {
               return null;
             }
diff --git a/src/pages/steps/AdditionalInformationStep/LabelsStep.tsx b/src/pages/steps/AdditionalInformationStep/LabelsStep.tsx
index 98131b485..6dbdb15ec 100644
--- a/src/pages/steps/AdditionalInformationStep/LabelsStep.tsx
+++ b/src/pages/steps/AdditionalInformationStep/LabelsStep.tsx
@@ -1,8 +1,9 @@
 import { uniq } from 'lodash';
 import React, { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { UseQueryResult } from 'react-query';
+import { useQueryClient, UseQueryResult } from 'react-query';
 
+import { ScopeTypes } from '@/constants/OfferType';
 import { useGetLabelsByQuery } from '@/hooks/api/labels';
 import {
   useAddOfferLabelMutation,
@@ -56,6 +57,8 @@ function LabelsStep({
   const addLabelMutation = useAddOfferLabelMutation();
   const removeLabelMutation = useRemoveOfferLabelMutation();
 
+  const queryClient = useQueryClient();
+
   useEffect(() => {
     onValidationChange(
       labels.length ? ValidationStatus.SUCCESS : ValidationStatus.NONE,
@@ -63,9 +66,18 @@ function LabelsStep({
     );
   }, [field, labels, onValidationChange]);
 
+  useEffect(() => {
+    setLabels(getUniqueLabels(entity));
+  }, [entity]);
+
   const isWriting = addLabelMutation.isLoading || removeLabelMutation.isLoading;
   const [isInvalid, setIsInvalid] = useState(false);
 
+  const handleInvalidateOrganizerQuery = async () => {
+    if (scope !== ScopeTypes.ORGANIZERS) return;
+    await queryClient.invalidateQueries('organizers');
+  };
+
   return (
     <Inline width={isInvalid ? '100%' : '50%'} spacing={5}>
       <Stack
@@ -110,6 +122,7 @@ function LabelsStep({
                 });
 
                 setLabels(uniq([...labels, label]));
+                handleInvalidateOrganizerQuery();
                 ref.current.clear();
               }}
             />
@@ -155,6 +168,7 @@ function LabelsStep({
                   setLabels(
                     labels.filter((existingLabel) => label !== existingLabel),
                   );
+                  handleInvalidateOrganizerQuery();
                 }}
               />
             </Inline>
diff --git a/src/pages/steps/Steps.tsx b/src/pages/steps/Steps.tsx
index a7718776c..b87370e0e 100644
--- a/src/pages/steps/Steps.tsx
+++ b/src/pages/steps/Steps.tsx
@@ -29,6 +29,7 @@ type OrganizerForm = {
     name: string;
     url: string;
     isContactUrl: boolean;
+    isCultuurkuur: boolean;
   };
 };
 
diff --git a/src/utils/hasCultuurkuurOrganizerLabel.ts b/src/utils/hasCultuurkuurOrganizerLabel.ts
new file mode 100644
index 000000000..033b53d7e
--- /dev/null
+++ b/src/utils/hasCultuurkuurOrganizerLabel.ts
@@ -0,0 +1,5 @@
+export const CULTUURKUUR_ORGANIZER_LABEL = 'cultuurkuur_organizer';
+
+export const hasCultuurkuurOrganizerLabel = (labels: string[]) => {
+  return (labels ?? []).includes(CULTUURKUUR_ORGANIZER_LABEL);
+};


Reviews:
user: login: Anahkiasen
state: CHANGES_REQUESTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-09T12:41:17Z
user: login: vhande
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-09T13:44:05Z
user: login: vhande
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-09T13:44:43Z
user: login: Anahkiasen
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-09T14:17:58Z
user: login: Anahkiasen
body: One last quick cleanup but otherwise looks good to me 👍 
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-04-09T14:20:42Z

Review comments:
diff_hunk: @@ -78,6 +88,9 @@ const OrganizerForm = () => {
   );
 
   const convertOrganizerToFormData = (organizer: Organizer) => {
+    const isCultuurkuurOrganizer = organizer?.hiddenLabels?.includes(
+      CULTUURKUUR_ORGANIZER_LABEL,
+    );
path: src/pages/organizers/create/OrganizerForm.tsx
user: login: Anahkiasen
body: Would maybe make this a small helper since we need the same constant and check in `AdditionalInformationStep`
created_at: 2025-04-09T12:32:01Z
author_association: CONTRIBUTOR
diff_hunk: @@ -143,8 +181,10 @@ const OrganizerForm = () => {
 
   const onSuccess = () => {
     upsertOrganizer({
-      onSuccess: async (organizerId) =>
-        await push(`/organizers/${organizerId}/edit`),
+      onSuccess: async (organizerId: string) => {
+        handleCultuurkuurLabelMutation(organizerId);
path: src/pages/organizers/create/OrganizerForm.tsx
user: login: Anahkiasen
body: Think you would need to await this too otherwise the label change won't be reflected yet when the page changes
created_at: 2025-04-09T12:32:50Z
author_association: CONTRIBUTOR
diff_hunk: @@ -113,8 +127,32 @@ const OrganizerForm = () => {
   const organizer = getOrganizerByIdQuery?.data;
   const organizerLabels = getUniqueLabels(organizer);
 
+  const queryClient = useQueryClient();
   const createOrganizerMutation = useCreateOrganizerMutation();
   const updateOrganizerMutation = useUpdateOrganizerMutation();
+  const addLabelMutation = useAddOfferLabelMutation();
+  const removeLabelMutation = useRemoveOfferLabelMutation();
+
+  const handleCultuurkuurLabelMutation = async (organizerId: string) => {
+    const { isCultuurkuur } = getValues('nameAndUrl');
+
+    if (isCultuurkuur) {
+      await addLabelMutation.mutateAsync({
+        id: organizerId,
+        scope,
+        label: CULTUURKUUR_ORGANIZER_LABEL,
+      });
+    }
+
+    if (!isCultuurkuur) {
+      await removeLabelMutation.mutateAsync({
+        id: organizerId,
+        scope,
+        label: CULTUURKUUR_ORGANIZER_LABEL,
+      });
+    }
path: src/pages/organizers/create/OrganizerForm.tsx
user: login: Anahkiasen
body: Would maybe merge both statements into one:

```ts
const mutation = isCultuurkuur ? addLabelMutation : removeLabelMutation;
await mutation.mutateAsync({
    id: organizerId,
    scope,
    label: CULTUURKUUR_ORGANIZER_LABEL,
});
```
created_at: 2025-04-09T12:34:35Z
author_association: CONTRIBUTOR
diff_hunk: @@ -56,16 +57,27 @@ function LabelsStep({
   const addLabelMutation = useAddOfferLabelMutation();
   const removeLabelMutation = useRemoveOfferLabelMutation();
 
+  const queryClient = useQueryClient();
+
   useEffect(() => {
     onValidationChange(
       labels.length ? ValidationStatus.SUCCESS : ValidationStatus.NONE,
       field,
     );
   }, [field, labels, onValidationChange]);
 
+  useEffect(() => {
+    setLabels(getUniqueLabels(entity));
+  }, [entity]);
path: src/pages/steps/AdditionalInformationStep/LabelsStep.tsx
user: login: Anahkiasen
body: Not sure you would/will need this bit in theory with the `await` added in the other file
created_at: 2025-04-09T12:39:41Z
author_association: CONTRIBUTOR
diff_hunk: @@ -56,16 +57,27 @@ function LabelsStep({
   const addLabelMutation = useAddOfferLabelMutation();
   const removeLabelMutation = useRemoveOfferLabelMutation();
 
+  const queryClient = useQueryClient();
+
   useEffect(() => {
     onValidationChange(
       labels.length ? ValidationStatus.SUCCESS : ValidationStatus.NONE,
       field,
     );
   }, [field, labels, onValidationChange]);
 
+  useEffect(() => {
+    setLabels(getUniqueLabels(entity));
+  }, [entity]);
+
   const isWriting = addLabelMutation.isLoading || removeLabelMutation.isLoading;
   const [isInvalid, setIsInvalid] = useState(false);
 
+  const handleInvalidateOrganizerQuery = async () => {
+    if (scope !== ScopeTypes.ORGANIZERS) return;
+    await queryClient.invalidateQueries('organizers');
+  };
path: src/pages/steps/AdditionalInformationStep/LabelsStep.tsx
user: login: Anahkiasen
body: Not sure you need this bit either, since once the initial correct load is done all the changes go through the useState, so you shouldn't need to invalidate and re-setLabels from scratch
created_at: 2025-04-09T12:40:41Z
author_association: CONTRIBUTOR
diff_hunk: @@ -56,16 +57,27 @@ function LabelsStep({
   const addLabelMutation = useAddOfferLabelMutation();
   const removeLabelMutation = useRemoveOfferLabelMutation();
 
+  const queryClient = useQueryClient();
+
   useEffect(() => {
     onValidationChange(
       labels.length ? ValidationStatus.SUCCESS : ValidationStatus.NONE,
       field,
     );
   }, [field, labels, onValidationChange]);
 
+  useEffect(() => {
+    setLabels(getUniqueLabels(entity));
+  }, [entity]);
+
   const isWriting = addLabelMutation.isLoading || removeLabelMutation.isLoading;
   const [isInvalid, setIsInvalid] = useState(false);
 
+  const handleInvalidateOrganizerQuery = async () => {
+    if (scope !== ScopeTypes.ORGANIZERS) return;
+    await queryClient.invalidateQueries('organizers');
+  };
path: src/pages/steps/AdditionalInformationStep/LabelsStep.tsx
user: login: vhande
body: This function helps to toggle the state on/off when the cultuurkuur_organizer label is added or removed. The states work correctly, but the toggle doesn't know about the updated state.
created_at: 2025-04-09T13:44:05Z
author_association: CONTRIBUTOR
diff_hunk: @@ -56,16 +57,27 @@ function LabelsStep({
   const addLabelMutation = useAddOfferLabelMutation();
   const removeLabelMutation = useRemoveOfferLabelMutation();
 
+  const queryClient = useQueryClient();
+
   useEffect(() => {
     onValidationChange(
       labels.length ? ValidationStatus.SUCCESS : ValidationStatus.NONE,
       field,
     );
   }, [field, labels, onValidationChange]);
 
+  useEffect(() => {
+    setLabels(getUniqueLabels(entity));
+  }, [entity]);
path: src/pages/steps/AdditionalInformationStep/LabelsStep.tsx
user: login: vhande
body: I added await, but even after the organizers query is invalidated, the state doesn't update automatically.
created_at: 2025-04-09T13:44:43Z
author_association: CONTRIBUTOR
diff_hunk: @@ -56,16 +57,27 @@ function LabelsStep({
   const addLabelMutation = useAddOfferLabelMutation();
   const removeLabelMutation = useRemoveOfferLabelMutation();
 
+  const queryClient = useQueryClient();
+
   useEffect(() => {
     onValidationChange(
       labels.length ? ValidationStatus.SUCCESS : ValidationStatus.NONE,
       field,
     );
   }, [field, labels, onValidationChange]);
 
+  useEffect(() => {
+    setLabels(getUniqueLabels(entity));
+  }, [entity]);
path: src/pages/steps/AdditionalInformationStep/LabelsStep.tsx
user: login: Anahkiasen
body: I see, that's weird but I've had the case in other tabs where invalidation don't work properly either so let's do it like that for now. This whole step is a bit weird since it's completely detached from the form logic so it doesn't help
created_at: 2025-04-09T14:17:58Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,3 @@
+export const hasCultuurkuurOrganizerLabel = (labels: string[]) => {
+  return (labels ?? []).includes('cultuurkuur_organizer');
path: src/utils/hasCultuurkuurOrganizerLabel.ts
user: login: Anahkiasen
body: I would likely still use a constant but you can export it from this file, because right now it's still in both files consuming the helper (OrganizerForm and [AdditionalInformationStep](https://github.com/cultuurnet/udb3-frontend/blob/feature/III-6565/src/pages/steps/AdditionalInformationStep/AdditionalInformationStep.tsx#L34))
created_at: 2025-04-09T14:19:54Z
author_association: CONTRIBUTOR

PR comments:
user: login: sentry[bot]
created_at: 2025-04-09T08:30:15Z
body: ## 🔍 Existing Issues For Review
Your pull request is modifying functions with the following pre-existing issues:

📄 File: **src/pages/organizers/create/OrganizerForm.tsx**

| Function | Unhandled Issue |
| :------- | :----- |
| **`onSuccess`** | [**TypeError: Cannot read properties of undefined (reading 'includes')**](https://publiq-vzw.sentry.io/issues/6500122836/?referrer=github-open-pr-bot) convertOrganizerToFormData(src/pages/organizers/create... <br> `Event Count:` **3** `Affected Users:` **1** |
| **`OrganizerForm`** | [**ReferenceError: Page is not defined**](https://publiq-vzw.sentry.io/issues/6530867833/?referrer=github-open-pr-bot) OrganizerForm... <br> `Event Count:` **2** `Affected Users:` **1** |
| **`OrganizerForm`** | [**ReferenceError: Steps is not defined**](https://publiq-vzw.sentry.io/issues/6530868828/?referrer=github-open-pr-bot) OrganizerFor... <br> `Event Count:` **2** `Affected Users:` **1** |
| **`OrganizerForm`** | [**ReferenceError: Inline is not defined**](https://publiq-vzw.sentry.io/issues/6530869757/?referrer=github-open-pr-bot) OrganizerFo... <br> `Event Count:` **2** `Affected Users:` **1** |
| **`OrganizerForm`** | [**TypeError: form.wat is not a function**](https://publiq-vzw.sentry.io/issues/6529070863/?referrer=github-open-pr-bot) OrganizerFo... <br> `Event Count:` **1** `Affected Users:` **1** |
<details>
<summary><b>📄 File: src/pages/steps/AdditionalInformationStep/LabelsStep.tsx (Click to Expand)</b></summary>

| Function | Unhandled Issue |
| :------- | :----- |
| **`LabelsStep`** | [**ReferenceError: getValues is not defined**](https://publiq-vzw.sentry.io/issues/6530856845/?referrer=github-open-pr-bot) LabelsSt... <br> `Event Count:` **6** `Affected Users:` **1** |
| **`LabelsStep`** | [**ReferenceError: useQueryClient is not defined**](https://publiq-vzw.sentry.io/issues/6504816653/?referrer=github-open-pr-bot) Lab... <br> `Event Count:` **1** `Affected Users:` **1** |
| **`LabelsStep`** | [**TypeError: Cannot read properties of undefined (reading 'map')**](https://publiq-vzw.sentry.io/issues/6530910343/?referrer=github-open-pr-bot) LabelsStep(src/pages/steps/AdditionalInformationStep/L... <br> `Event Count:` **1** `Affected Users:` **1** |
| **`LabelsStep`** | [**ReferenceError: yarn is not defined**](https://publiq-vzw.sentry.io/issues/6530919674/?referrer=github-open-pr-bot) LabelsStep(sr... <br> `Event Count:` **1** `Affected Users:` **1** |
</details>
---

<sub>Did you find this useful? React with a 👍 or 👎</sub>
author_association: NONE
user: login: sentry[bot]
created_at: 2025-04-15T11:35:39Z
body: ## Suspect Issues
This pull request was deployed and Sentry observed the following issues:

- ‼️ **ReferenceError: cosnt is not defined** `OrganizerForm(src/pages/organizers/create/Organ...` [View Issue](https://publiq-vzw.sentry.io/issues/6543211298/?referrer=github-pr-bot)

<sub>Did you find this useful? React with a 👍 or 👎</sub>
author_association: NONE