Merge branch 'main' into III-6343-add-hints-to-auth

.env.example

@@ -20,6 +20,7 @@ NEXT_PUBLIC_TAXONOMY_URL=
 NEXT_PUBLIC_CULTUURKUUR_LOCATION_ID=
 NEXT_PUBLIC_SHOULD_SHOW_BETA_VERSION=
 NEXT_PUBLIC_HOTJAR_MISSING_FIELD_NAME=
+NEXT_PUBLIC_CLAIM_OWNERSHIP_ENABLED=
 
 SENTRY_AUTH_TOKEN=
 

next.config.js

@@ -48,6 +48,7 @@ const moduleExports = {
     shouldShowBetaVersion: process.env.NEXT_PUBLIC_SHOULD_SHOW_BETA_VERSION,
     hotjarEventName: process.env.NEXT_PUBLIC_HOTJAR_EVENT_NAME,
     hotjarMissingFieldName: process.env.NEXT_PUBLIC_HOTJAR_MISSING_FIELD_NAME,
+    claimOwnershipEnabled: process.env.NEXT_PUBLIC_CLAIM_OWNERSHIP_ENABLED,
   },
   pageExtensions: ['page.tsx', 'page.js', 'api.ts'],
   eslint: {

package.json

@@ -42,8 +42,7 @@
     "bootstrap": "^4.5.3",
     "clipboard-copy": "^4.0.1",
     "crypto-browserify": "^3.12.0",
-    "date-fns": "^2.30.0",
-    "date-fns-tz": "^2.0.1",
+    "date-fns": "^2.16.1",
     "deep-object-diff": "^1.1.0",
     "draft-js": "^0.11.7",
     "draftjs-to-html": "^0.9.1",
@@ -83,7 +82,7 @@
   },
   "devDependencies": {
     "@faker-js/faker": "^8.0.2",
-    "@playwright/test": "1.39.0",
+    "@playwright/test": "^1.31.2",
     "@storybook/addon-a11y": "^6.5.16",
     "@storybook/addon-actions": "^6.5.16",
     "@storybook/addon-essentials": "^6.5.16",

src/constants/DaysOfWeek.ts

@@ -1,16 +1,16 @@
 import { Values } from '@/types/Values';
 
-const DaysOfWeek = {
-  MONDAY: 'monday',
-  TUESDAY: 'tuesday',
-  WEDNESDAY: 'wednesday',
-  THURSDAY: 'thursday',
-  FRIDAY: 'friday',
-  SATURDAY: 'saturday',
-  SUNDAY: 'sunday',
-} as const;
+const DaysOfWeek = [
+  'monday',
+  'tuesday',
+  'wednesday',
+  'thursday',
+  'friday',
+  'saturday',
+  'sunday',
+] as const;
 
-type DayOfWeek = Values<typeof DaysOfWeek>;
+type DayOfWeek = (typeof DaysOfWeek)[number];
 
 export { DaysOfWeek };
 export type { DayOfWeek };

src/hooks/api/events.ts

@@ -221,6 +221,7 @@ const getEventsByIds = async ({
     q: `id:(${ids.join(' OR ')})`,
   });
 
+  searchParams.append('embedCalendarSummaries[]', 'xs-text');
   searchParams.append('embedCalendarSummaries[]', 'sm-text');
   searchParams.append('embedCalendarSummaries[]', 'lg-text');
 
@@ -293,7 +294,7 @@ const useGetEventsByCreatorQuery = (
     creator,
     paginationOptions = { start: 0, limit: 50 },
     sortOptions = { field: 'modified', order: 'desc' },
-    calendarSummaryFormats = ['lg-text', 'sm-text'],
+    calendarSummaryFormats = ['lg-text', 'sm-text', 'xs-text'],
   }: AuthenticatedQueryOptions<
     PaginationOptions &
       SortOptions &
@@ -414,6 +415,50 @@ const useChangeNameMutation = (configuration = {}) =>
     ...configuration,
   });
 
+const changeCalendar = async ({
+  headers,
+  id,
+  calendarType,
+  timeSpans,
+  subEvent,
+  start,
+  end,
+  startDate,
+  endDate,
+  openingHours,
+  dayOfWeek,
+  opens,
+  closes,
+}) => {
+  return fetchFromApi({
+    path: `/events/${id.toString()}/calendar`,
+    options: {
+      method: 'PUT',
+      body: JSON.stringify({
+        calendarType,
+        timeSpans,
+        subEvent,
+        start,
+        end,
+        startDate,
+        endDate,
+        openingHours,
+        dayOfWeek,
+        opens,
+        closes,
+      }),
+      headers,
+    },
+  });
+};
+
+const useChangeCalendarMutation = (configuration = {}) =>
+  useAuthenticatedMutation({
+    mutationFn: changeCalendar,
+    mutationKey: 'events-change-calendar',
+    ...configuration,
+  });
+
 const changeStatus = async ({ headers, id, type, reason }) =>
   fetchFromApi({
     path: `/events/${id.toString()}/status`,
@@ -592,6 +637,7 @@ export {
   useChangeAttendanceModeMutation,
   useChangeAudienceMutation,
   useChangeAvailableFromMutation,
+  useChangeCalendarMutation,
   useChangeLocationMutation,
   useChangeNameMutation,
   useChangeOnlineUrlMutation,

src/hooks/api/offers.ts

@@ -44,7 +44,7 @@ const useGetOffersByCreatorQuery = (
     creator,
     paginationOptions = { start: 0, limit: 50 },
     sortOptions = { field: 'modified', order: 'desc' },
-    calendarSummaryFormats = ['lg-text', 'sm-text'],
+    calendarSummaryFormats = ['lg-text', 'sm-text', 'xs-text'],
   }: AuthenticatedQueryOptions<
     PaginationOptions &
       SortOptions &

src/hooks/api/places.ts

@@ -88,7 +88,7 @@ const useGetPlacesByCreatorQuery = (
     creator,
     paginationOptions = { start: 0, limit: 50 },
     sortOptions = { field: 'modified', order: 'desc' },
-    calendarSummaryFormats = ['lg-text', 'sm-text'],
+    calendarSummaryFormats = ['lg-text', 'sm-text', 'xs-text'],
   }: AuthenticatedQueryOptions<
     PaginationOptions &
       SortOptions &

src/i18n/de.json

@@ -892,10 +892,6 @@
       }
     }
   },
-  "pagination": {
-    "next": "Weiter",
-    "previous": "Zurück"
-  },
   "pictures": {
     "add_button": "Bild hinzufügen",
     "change": "Ändern",

src/i18n/fr.json

@@ -892,10 +892,6 @@
       }
     }
   },
-  "pagination": {
-    "next": "Prochain",
-    "previous": "Dernier"
-  },
   "pictures": {
     "add_button": "Ajouter une image",
     "change": "Modifier",

src/i18n/nl.json

@@ -892,10 +892,6 @@
       }
     }
   },
-  "pagination": {
-    "next": "Volgende",
-    "previous": "Vorige"
-  },
   "pictures": {
     "add_button": "Afbeelding toevoegen",
     "change": "Wijzigen",

src/pages/PictureUploadBox.tsx

@@ -19,9 +19,15 @@ const { grey5 } = colors;
 
 const getValue = getValueFromTheme('pictureUploadBox');
 
-const ImageIcon = ({ width }: { width: string }) => {
+const ImageIcon = ({
+  width,
+  color = grey5,
+}: {
+  width: string;
+  color?: string;
+}) => {
   return (
-    <CustomIcon color={grey5} name={CustomIconVariants.IMAGE} width={width} />
+    <CustomIcon color={color} name={CustomIconVariants.IMAGE} width={width} />
   );
 };
 

src/pages/dashboard/DashboardPictureUploadModal.tsx

@@ -0,0 +1,114 @@
+import { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useQueryClient } from 'react-query';
+
+import { useAddImageMutation } from '@/hooks/api/images';
+import {
+  useAddOfferImageMutation,
+  useUpdateOfferImageMutation,
+} from '@/hooks/api/offers';
+
+import { ImageType } from '../PictureUploadBox';
+import {
+  FormData,
+  PictureUploadModal,
+} from '../steps/modals/PictureUploadModal';
+
+type Props = {
+  eventId: string;
+  scope: string;
+  isImageUploading: boolean;
+  isPictureUploadModalVisible: boolean;
+  onModalClose: () => void;
+  onImageUploadStart: () => void;
+  onImageUploadEnd: () => void;
+};
+
+export const DashboardPictureUploadModal = ({
+  eventId,
+  scope,
+  isImageUploading,
+  isPictureUploadModalVisible,
+  onModalClose,
+  onImageUploadStart,
+  onImageUploadEnd,
+}: Props) => {
+  const { i18n } = useTranslation();
+  const queryClient = useQueryClient();
+  const [draggedImageFile, setDraggedImageFile] = useState<FileList>();
+  const [images, setImages] = useState<ImageType[]>([]);
+  const [imageToEditId, setImageToEditId] = useState('');
+  const imageToEdit = useMemo(() => {
+    const image = images.find((image) => image.parsedId === imageToEditId);
+
+    if (!image) return null;
+
+    const { file, ...imageWithoutFile } = image;
+
+    return imageWithoutFile;
+  }, [images, imageToEditId]);
+
+  const addImageToEventMutation = useAddOfferImageMutation({
+    onSuccess: () => {
+      onModalClose();
+      setTimeout(async () => {
+        await queryClient.invalidateQueries('events');
+        await queryClient.invalidateQueries('organizers');
+        onImageUploadEnd();
+      }, 1000);
+    },
+  });
+
+  const handleSuccessAddImage = ({ imageId }) => {
+    return addImageToEventMutation.mutate({ eventId, imageId, scope });
+  };
+
+  const addImageMutation = useAddImageMutation({
+    onSuccess: handleSuccessAddImage,
+  });
+
+  const updateOfferImageMutation = useUpdateOfferImageMutation({
+    onSuccess: async () => {
+      onModalClose();
+    },
+  });
+
+  const handleSubmitValid = async ({
+    file,
+    description,
+    copyrightHolder,
+  }: FormData) => {
+    try {
+      onImageUploadStart();
+      if (imageToEdit) {
+        await updateOfferImageMutation.mutateAsync({
+          eventId,
+          imageId: imageToEdit.parsedId,
+          description,
+          copyrightHolder,
+          scope,
+        });
+        return;
+      }
+
+      await addImageMutation.mutateAsync({
+        description,
+        copyrightHolder,
+        file: file?.[0],
+        language: i18n.language,
+      });
+    } catch (error) {
+      console.log(error);
+    }
+  };
+  return (
+    <PictureUploadModal
+      visible={isPictureUploadModalVisible}
+      onClose={() => onModalClose()}
+      draggedImageFile={draggedImageFile}
+      imageToEdit={imageToEdit}
+      onSubmitValid={handleSubmitValid}
+      loading={isImageUploading}
+    />
+  );
+};