Merge branch 'main' into feature/III-5746

src/hooks/api/organizers.ts

@@ -340,7 +340,26 @@ const useDeleteOrganizerEducationalDescriptionMutation = (
     ...configuration,
   });
 
+const changeLocation = async ({ headers, organizerId, language, location }) => {
+  return fetchFromApi({
+    path: `/organizers/${organizerId.toString()}/address/${language}`,
+    options: {
+      method: 'PUT',
+      headers,
+      body: JSON.stringify(location),
+    },
+  });
+};
+
+const useChangeLocationMutation = (configuration = {}) =>
+  useAuthenticatedMutation({
+    mutationFn: changeLocation,
+    mutationKey: 'organizer-change-location',
+    ...configuration,
+  });
+
 export {
+  useChangeLocationMutation,
   useCreateOrganizerMutation,
   useDeleteOrganizerByIdMutation,
   useDeleteOrganizerEducationalDescriptionMutation,

src/pages/organizers/create/OrganizerForm.tsx

@@ -21,7 +21,11 @@ import { locationStepConfiguration } from '@/pages/steps/LocationStep';
 import { Steps, StepsConfiguration } from '@/pages/steps/Steps';
 import { Organizer } from '@/types/Organizer';
 import { Button, ButtonVariants } from '@/ui/Button';
+import { Inline } from '@/ui/Inline';
+import { Link, LinkVariants } from '@/ui/Link';
 import { Page } from '@/ui/Page';
+import { Text } from '@/ui/Text';
+import { getValueFromTheme } from '@/ui/theme';
 import { getLanguageObjectOrFallback } from '@/utils/getLanguageObjectOrFallback';
 
 import { NameAndUrlStep } from './steps/NameAndUrlStep';
@@ -41,6 +45,8 @@ const typeAndThemeStepConfiguration: StepsConfiguration<'nameAndUrl'> = {
   }),
 };
 
+const getValue = getValueFromTheme('createPage');
+
 const configurations = [
   typeAndThemeStepConfiguration,
   {
@@ -52,10 +58,11 @@ const configurations = [
     variant: AdditionalInformationStepVariant.ORGANIZER,
     name: 'location' as StepsConfiguration['name'],
     defaultValue: locationStepConfiguration.defaultValue,
+    validation: locationStepConfiguration.validation,
   },
 ];
 
-const OrganizerForm = (props) => {
+const OrganizerForm = () => {
   const scope = ScopeTypes.ORGANIZERS;
   const { form } = useParseStepConfiguration(configurations);
   const { t, i18n } = useTranslation();
@@ -89,8 +96,6 @@ const OrganizerForm = (props) => {
     };
   };
 
-  // const toast = useToast(toastConfiguration);
-
   // TODO better type query
   const getOrganizerByIdQuery = useGetOrganizerByIdQuery(
     { id: urlOrganizerId },
@@ -121,18 +126,7 @@ const OrganizerForm = (props) => {
 
     if (urlOrganizerId) {
       mutation = updateOrganizerMutation;
-      attributes = {
-        ...attributes,
-        organizerId: urlOrganizerId,
-        address: {
-          [i18n.language]: {
-            addressCountry: getValues('location.country'),
-            addressLocality: getValues('location.municipality.name'),
-            postalCode: getValues('location.municipality.zip'),
-            streetAddress: getValues('location.streetAndNumber'),
-          },
-        },
-      };
+      attributes = { ...attributes, organizerId: urlOrganizerId };
     }
 
     const { organizerId } = await mutation.mutateAsync(attributes);
@@ -162,17 +156,24 @@ const OrganizerForm = (props) => {
           configurations={configurations}
           form={form}
           labels={organizerLabels}
+          onChange={() => {
+            if (urlOrganizerId) onSuccess();
+          }}
         />
       </Page.Content>
       <Page.Footer>
         {urlOrganizerId ? (
-          <Button
-            disabled={hasErrors}
-            variant={ButtonVariants.PRIMARY}
-            onClick={handleSubmit(onSuccess)}
-          >
-            {t('organizers.create.step2.save')}
-          </Button>
+          <Inline spacing={3} alignItems="center">
+            <Link
+              href={`/organizer/${urlOrganizerId}/preview`}
+              variant={LinkVariants.BUTTON_SUCCESS}
+            >
+              <Text>{t('create.footer.done_editing')}</Text>
+            </Link>
+            <Text color={getValue('footer.color')} fontSize="0.9rem">
+              {t('create.footer.auto_save')}
+            </Text>
+          </Inline>
         ) : (
           <Button
             disabled={hasErrors || !formState.isDirty}

src/pages/organizers/create/steps/NameAndUrlStep.tsx

@@ -1,35 +1,23 @@
 import { Controller } from 'react-hook-form';
 
-import { getStepProps } from '@/pages/steps/Steps';
+import { getStepProps, StepProps } from '@/pages/steps/Steps';
 import { parseSpacing } from '@/ui/Box';
 import { Stack } from '@/ui/Stack';
 
 import { NameStep } from './NameStep';
 import { UrlStep } from './UrlStep';
 
-const NameAndUrlStep = ({
-  control,
-  name,
-  onChange,
-  shouldHideType,
-  ...props
-}: any) => {
-  return (
-    <Controller
-      name={name}
-      control={control}
-      render={() => {
-        return (
-          <Stack spacing={4} maxWidth={parseSpacing(9)}>
-            <NameStep {...getStepProps(props)} name={name} control={control} />
-            <UrlStep {...getStepProps(props)} name={name} control={control} />
-          </Stack>
-        );
-      }}
-    />
-  );
-};
-
-NameAndUrlStep.defaultProps = {};
+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>
+    )}
+  />
+);
 
 export { NameAndUrlStep };

src/pages/organizers/create/steps/NameStep.tsx

@@ -46,10 +46,10 @@ const NameStep = ({
                         ...field.value,
                         name: (event.target as HTMLInputElement).value,
                       });
-                      //   onChange({
-                      //     ...field.value,
-                      //     name: (event.target as HTMLInputElement).value,
-                      //   });
+                      onChange({
+                        ...field.value,
+                        name: (event.target as HTMLInputElement).value,
+                      });
                     }}
                   />
                 }

src/pages/organizers/create/steps/UrlStep.tsx

@@ -54,7 +54,6 @@ const UrlStep = ({
       existingOrganizer &&
       parseOfferId(existingOrganizer['@id']) !== query.organizerId
     ) {
-      console.log('should set error');
       setError('nameAndUrl.url', { type: 'not_unique' });
       return;
     }
@@ -94,6 +93,10 @@ const UrlStep = ({
                         ...field.value,
                         url: prefixUrlWithHttps(newValue),
                       });
+                      onChange({
+                        ...field.value,
+                        url: prefixUrlWithHttps(newValue),
+                      });
                     }}
                   />
                 }

src/pages/steps/AdditionalInformationStep/PhysicalLocationStep.tsx

@@ -1,5 +1,7 @@
 import React, { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
 
+import { useChangeLocationMutation } from '@/hooks/api/organizers';
 import {
   TabContentProps,
   ValidationStatus,
@@ -15,6 +17,9 @@ function PhysicalLocationStep({
   ...props
 }: PhysicalLocationStepProps) {
   const location = props.watch('location');
+  const changeLocation = useChangeLocationMutation();
+  const { i18n } = useTranslation();
+
   useEffect(() => {
     onValidationChange(
       location?.streetAndNumber
@@ -23,7 +28,25 @@ function PhysicalLocationStep({
     );
   }, [onValidationChange, location]);
 
-  return <LocationStep {...props} onChange={props.onSuccessfulChange} />;
+  const onChange = (updatedLocation: typeof location) => {
+    props.onSuccessfulChange(updatedLocation);
+    if (!updatedLocation.streetAndNumber) {
+      return;
+    }
+
+    changeLocation.mutate({
+      organizerId: props.offerId,
+      language: i18n.language,
+      location: {
+        addressCountry: updatedLocation?.country,
+        addressLocality: updatedLocation?.municipality?.name,
+        postalCode: updatedLocation?.municipality?.zip,
+        streetAddress: updatedLocation?.streetAndNumber,
+      },
+    });
+  };
+
+  return <LocationStep {...props} onChange={onChange} />;
 }
 
 export { PhysicalLocationStep };

src/pages/steps/LocationStep.tsx

@@ -1183,6 +1183,10 @@ const locationStepConfiguration: StepsConfiguration<'location'> = {
   validation: yup.lazy((value) => {
     const url = window.location.href;
 
+    if (url.includes('organizers') && url.includes('create')) {
+      return yup.object();
+    }
+
     const scope = url.includes('events')
       ? OfferTypes.EVENTS
       : OfferTypes.PLACES;

src/pages/steps/Steps.tsx

@@ -203,7 +203,7 @@ const Steps = ({
   };
 
   return (
-    <Stack {...getStackProps(props)} spacing={5} width="100%">
+    <Stack spacing={5} width="100%" {...getStackProps(props)}>
       {configurationsWithComponent.map(
         (
           {

src/test/e2e/create-organizer.spec.ts

@@ -68,5 +68,5 @@ test('create an organizer', async ({ baseURL, page }) => {
 
   await page.getByText('100/100').click();
 
-  await page.getByRole('button', { name: 'Bewaren' }).click();
+  await page.getByRole('button', { name: 'Klaar met bewerken' }).click();
 });