III-6364-Request ownership from the organizer detail page

package.json

@@ -71,6 +71,7 @@
     "react-query": "^3.2.0",
     "react-router": "^5.2.0",
     "react-table": "^7.6.3",
+    "sanitize-html": "^2.13.1",
     "sass": "^1.27.0",
     "sass-loader": "^10.0.4",
     "socket.io-client": "2.3.0",

src/hooks/api/authenticated-query.ts

@@ -171,15 +171,15 @@ const isDuplicateMutation = (
 
   // Temporary disable caching on price-info
   // https://jira.uitdatabank.be/browse/III-5620
-  if (mutationKey === 'offers-add-price-info') {
-    return false;
-  }
 
-  if (mutationKey === 'offers-change-calendar') {
-    return false;
-  }
+  const disabledMutations = [
+    'offers-add-price-info',
+    'offers-change-calendar',
+    'places-add',
+    'request-ownership',
+  ];
 
-  if (mutationKey === 'places-add') {
+  if (disabledMutations.includes(mutationKey)) {
     return false;
   }
 
@@ -189,6 +189,11 @@ const isDuplicateMutation = (
 
   const latestMutation = mutations.slice(-2)[0];
 
+  // If the latest mutation was unsuccessful, we don't want to trigger a false positive.
+  if (latestMutation.state.error) {
+    return false;
+  }
+
   return (
     mutations.length > 1 && isEqual(latestMutation.options.variables, variables)
   );

src/hooks/api/organizers.ts

@@ -3,6 +3,7 @@ import type { UseMutationOptions, UseQueryOptions } from 'react-query';
 import type {
   AuthenticatedQueryOptions,
   PaginationOptions,
+  ServerSideQueryOptions,
   SortOptions,
 } from '@/hooks/api/authenticated-query';
 import {
@@ -12,6 +13,7 @@ import {
 import type { Organizer } from '@/types/Organizer';
 import { createSortingArgument } from '@/utils/createSortingArgument';
 import { fetchFromApi, isErrorObject } from '@/utils/fetchFromApi';
+import { handleErrorObject } from '@/utils/handleErrorObject';
 
 import type { Headers } from './types/Headers';
 import type { User } from './user';
@@ -165,6 +167,36 @@ const getOrganizersByCreator = async ({
   return await res.json();
 };
 
+type UseGetOrganizerPermissionsArguments = ServerSideQueryOptions & {
+  organizerId: string;
+};
+
+const getOrganizerPermissions = async ({ headers, organizerId }) => {
+  const res = await fetchFromApi({
+    path: `/organizers/${organizerId}/permissions`,
+    options: { headers },
+  });
+
+  return handleErrorObject(res);
+};
+
+export type GetOrganizerPermissionsResponse = {
+  permissions: string[];
+};
+const useGetOrganizerPermissions = (
+  { req, queryClient, organizerId }: UseGetOrganizerPermissionsArguments,
+  configuration: UseQueryOptions = {},
+) =>
+  useAuthenticatedQuery<GetOrganizerPermissionsResponse>({
+    req,
+    queryClient,
+    queryKey: ['ownership-permissions'],
+    queryFn: getOrganizerPermissions,
+    queryArguments: { organizerId },
+    refetchOnWindowFocus: false,
+    ...configuration,
+  });
+
 const deleteOrganizerById = async ({ headers, id }) =>
   fetchFromApi({
     path: `/organizers/${id}`,
@@ -357,6 +389,7 @@ export {
   useDeleteOrganizerByIdMutation,
   useDeleteOrganizerEducationalDescriptionMutation,
   useGetOrganizerByIdQuery,
+  useGetOrganizerPermissions,
   useGetOrganizersByCreatorQuery,
   useGetOrganizersByQueryQuery,
   useGetOrganizersByWebsiteQuery,

src/hooks/api/ownerships.ts

@@ -30,11 +30,12 @@ export const RequestState = {
 
 type RequestState = Values<typeof RequestState>;
 
-const getOwnershipRequests = async ({ headers, organizerId }) => {
+const getOwnershipRequests = async ({ headers, organizerId, ownerId }) => {
   const res = await fetchFromApi({
     path: '/ownerships/',
     searchParams: {
       itemId: organizerId,
+      ...(ownerId && { ownerId }),
     },
     options: {
       headers,
@@ -49,22 +50,44 @@ const getOwnershipRequests = async ({ headers, organizerId }) => {
 
 type UseGetOwnershipRequestsArguments = ServerSideQueryOptions & {
   organizerId: string;
+  ownerId?: string;
 };
 
 const useGetOwnershipRequestsQuery = (
-  { req, queryClient, organizerId }: UseGetOwnershipRequestsArguments,
+  { req, queryClient, organizerId, ownerId }: UseGetOwnershipRequestsArguments,
   configuration: UseQueryOptions = {},
 ) =>
   useAuthenticatedQuery<OwnershipRequest[]>({
     req,
     queryClient,
     queryKey: ['ownership-requests'],
     queryFn: getOwnershipRequests,
-    queryArguments: { organizerId },
+    queryArguments: { organizerId, ...(ownerId && { ownerId }) },
     refetchOnWindowFocus: false,
     ...configuration,
   });
 
+const requestOwnership = async ({ headers, itemId, ownerId }) =>
+  fetchFromApi({
+    path: '/ownerships',
+    options: {
+      method: 'POST',
+      headers,
+      body: JSON.stringify({
+        itemId,
+        itemType: 'organizer',
+        ownerId,
+      }),
+    },
+  });
+
+const useRequestOwnershipMutation = (configuration = {}) =>
+  useAuthenticatedMutation({
+    mutationFn: requestOwnership,
+    mutationKey: 'request-ownership',
+    ...configuration,
+  });
+
 const approveOwnershipRequest = async ({ headers, ownershipId }) =>
   fetchFromApi({
     path: `/ownerships/${ownershipId}/approve`,
@@ -151,4 +174,5 @@ export {
   useGetOwnershipCreatorQuery,
   useGetOwnershipRequestsQuery,
   useRejectOwnershipRequestMutation,
+  useRequestOwnershipMutation,
 };

src/hooks/api/user.ts

@@ -57,7 +57,7 @@ const getUser = async (cookies: Cookies) => {
 const useGetUserQuery = () => {
   const { cookies } = useCookiesWithOptions(['idToken']);
 
-  return useAuthenticatedQuery({
+  return useAuthenticatedQuery<User>({
     queryKey: ['user'],
     queryFn: () => getUser(cookies),
   });

src/hooks/useLegacyPath.tsx

@@ -1,12 +1,14 @@
 import getConfig from 'next/config';
 import { useRouter } from 'next/router';
-import { useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 
 import { useCookiesWithOptions } from './useCookiesWithOptions';
+import { useSearchParams } from './useSearchParams';
 
 const useLegacyPath = () => {
   const { cookies } = useCookiesWithOptions(['token', 'udb-language']);
   const router = useRouter();
+  const searchParams = useSearchParams();
   const { publicRuntimeConfig } = getConfig();
   const prefixWhenNotEmpty = (value, prefix) =>
     value ? `${prefix}${value}` : value;
@@ -15,24 +17,21 @@ const useLegacyPath = () => {
   const lang = cookies['udb-language'];
 
   const legacyPath = useMemo(() => {
-    const path = new URL(`http://localhost${router.asPath}`).pathname;
-    const { params = [], ...queryWithoutParams } = router.query;
-    const queryString = prefixWhenNotEmpty(
-      new URLSearchParams({
-        ...queryWithoutParams,
-        jwt,
-        lang,
-      }),
-      '?',
-    );
+    const path = new URL(router.asPath, publicRuntimeConfig.legacyAppUrl)
+      .pathname;
+    searchParams.set('jwt', jwt);
+    searchParams.set('lang', lang);
 
-    return `${publicRuntimeConfig.legacyAppUrl}${path}${queryString}`;
+    return `${publicRuntimeConfig.legacyAppUrl}${path}${prefixWhenNotEmpty(
+      searchParams.toString(),
+      '?',
+    )}`;
   }, [
     router.asPath,
-    router.query,
     jwt,
     lang,
     publicRuntimeConfig.legacyAppUrl,
+    searchParams,
   ]);
 
   return legacyPath;

src/hooks/useSearchParams.tsx

@@ -0,0 +1,25 @@
+import { useRouter } from 'next/router';
+import { useMemo } from 'react';
+
+export const useSearchParams = () => {
+  const { query, pathname } = useRouter();
+
+  return useMemo(() => {
+    const params = new URLSearchParams();
+
+    const filtered = Object.entries(query).filter(([key]) => {
+      return !pathname.includes(`[${key}]`);
+    });
+
+    filtered.forEach(([key, value]) => {
+      if (Array.isArray(value)) {
+        value.forEach((v) => params.append(key, v));
+        return;
+      }
+
+      params.set(key, value);
+    });
+
+    return params;
+  }, [query, pathname]);
+};

src/i18n/de.json

@@ -990,6 +990,25 @@
     }
   },
   "organizers": {
+    "detail": {
+      "name": "Name",
+      "description": "Beschreibung",
+      "educationalDescription": "Beschreibung Cultuurkuur",
+      "address": "Adresse",
+      "no_address": "Keine Adresse",
+      "contact": "Kontakt",
+      "no_contact": "Keine Kontaktinformationen",
+      "labels": "Labels",
+      "images": "Bilder",
+      "no_images": "Keine Bilder",
+      "mainImage": "Hauptbild",
+      "actions": {
+        "edit": "Bearbeiten",
+        "manage": "Anforderungsmanagement",
+        "request": "Verwaltung anfordern",
+        "back": "Zurück zum Dashboard"
+      }
+    },
     "create": {
       "title": "Organisation hinzufügen",
       "step1": {
@@ -1053,6 +1072,16 @@
         "body": "Sind Sie sicher, dass Sie {{ownerEmail}} als Verwalter entfernen möchten?",
         "cancel": "Abbrechen",
         "confirm": "Verwalter entfernen"
+      },
+      "request": {
+        "confirm_modal": {
+          "title": "Verwaltungsanfrage für {{organizerName}}",
+          "body": "Sind Sie im Vorstand von {{organizerName}} und möchten Sie die Organisationsseite und Veranstaltungen verwalten? Starten Sie hier Ihre Anfrage, um Administrator zu werden. Sobald ein aktueller Administrator Ihre Anfrage genehmigt, erhalten Sie Zugriff und eine Bestätigung per E-Mail.",
+          "cancel": "Abbrechen",
+          "confirm": "Verwaltungsanfrage"
+        },
+        "pending": "Ihre Anfrage zur Verwaltung von {{organizerName}} wird bearbeitet.<br/>Sobald ein aktueller Administrator Ihre Anfrage genehmigt hat, erhalten Sie Zugriff und eine Bestätigung per E-Mail.",
+        "success": "Ihre Anfrage zur Verwaltung der Seite von {{organizerName}} und ihrer Veranstaltungen wurde erfolgreich gesendet!<br/>Sobald ein aktueller Administrator Ihre Anfrage genehmigt, erhalten Sie Zugriff und eine Bestätigung per E-Mail."
       }
     }
   },

src/i18n/fr.json

@@ -990,6 +990,25 @@
     }
   },
   "organizers": {
+    "detail": {
+      "name": "Nom",
+      "description": "Description",
+      "educationalDescription": "Description Cultuurkuur",
+      "address": "Adresse",
+      "no_address": "Aucune adresse",
+      "contact": "Contact",
+      "no_contact": "Aucune information de contact",
+      "labels": "Labels",
+      "images": "Images",
+      "no_images": "Aucune image",
+      "mainImage": "Image principale",
+      "actions": {
+        "edit": "Modifier",
+        "manage": "Gestion des demandes",
+        "request": "Demander gestion",
+        "back": "Retourner au tableau de bord"
+      }
+    },
     "create": {
       "title": "Ajouter une organisation",
       "step1": {
@@ -1053,6 +1072,16 @@
         "body": "Êtes-vous sûr de vouloir supprimer {{ownerEmail}} en tant que gestionnaire ?",
         "cancel": "Annuler",
         "confirm": "Supprimer le gestionnaire"
+      },
+      "request": {
+        "confirm_modal": {
+          "title": "Demande de gestion pour {{organizerName}}",
+          "body": "Êtes-vous impliqué dans la gestion de {{organizerName}} et souhaitez-vous gérer la page de l'organisation et de ses événements ? Commencez ici votre demande pour devenir administrateur. Une fois qu'un administrateur actuel approuve votre demande, vous recevrez l'accès et une confirmation par e-mail.",
+          "cancel": "Annuler",
+          "confirm": "Demander la gestion"
+        },
+        "pending": "Votre demande pour gérer {{organizerName}} est en cours de traitement.<br/>Dès qu'un administrateur actuel aura approuvé votre demande, vous recevrez l'accès et une confirmation par e-mail.",
+        "success": "Votre demande pour gérer la page de {{organizerName}} et ses événements a été envoyée avec succès !<br/>Dès qu'un administrateur actuel approuve votre demande, vous recevrez l'accès et une confirmation par e-mail."
       }
     }
   },

src/i18n/nl.json

@@ -990,6 +990,25 @@
     }
   },
   "organizers": {
+    "detail": {
+      "name": "Naam",
+      "description": "Bescrijving",
+      "educationalDescription": "Beschrijving Cultuurkuur",
+      "address": "Adres",
+      "no_address": "Geen address",
+      "contact": "Contact",
+      "no_contact": "Geen contactinformatie",
+      "labels": "Labels",
+      "images": "Afbeeldingen",
+      "no_images": "Geen afbeeldingen",
+      "mainImage": "Hoofdafbeelding",
+      "actions": {
+        "edit": "Bewerken",
+        "manage": "Beheerders aanpassen",
+        "request": "Beheer aanvragen",
+        "back": "Terug naar dashboard"
+      }
+    },
     "create": {
       "title": "Organisatie toevoegen",
       "step1": {
@@ -1053,6 +1072,17 @@
         "body": "Ben je zeker dat je {{ownerEmail}} wilt verwijderen als beheerder?",
         "cancel": "Annuleren",
         "confirm": "Beheerder verwijderen"
+      },
+      "request": {
+        "confirm_modal": {
+          "title": "Beheer aanvragen voor {{organizerName}}",
+          "body": "Ben je betrokken bij het bestuur van {{organizerName}} en wil je de organisatiepagina en evenementen ervan beheren? Start hier je aanvraag om beheerder te worden. Zodra een huidige beheerder je aanvraag goedkeurt, krijg je toegang en ontvang je een bevestiging via e-mail.",
+          "cancel": "Annuleren",
+          "confirm": "Beheer aanvragen",
+          "error": "Er is iets misgelopen"
+        },
+        "pending": "Je aanvraag tot het beheer van {{organizerName}} is in behandeling.<br/>Zodra een huidige beheerder je aanvraag heeft goedgekeurd, krijg je toegang en ontvang je een bevestiging via e-mail.",
+        "success": "Je aanvraag om beheerder te worden van {{organizerName}} is succesvol verzonden!<br/>Zodra een huidige beheerder je aanvraag heeft goedgekeurd, krijg je toegang en ontvang je een bevestiging via e-mail."
       }
     }
   },