Added ability to invite user as owner

src/hooks/api/ownerships.ts

@@ -25,6 +25,27 @@ export const RequestState = {
 
 type RequestState = Values<typeof RequestState>;
 
+const requestOwnership = async ({ headers, itemId, itemType, ownerEmail }) =>
+  fetchFromApi({
+    path: `/ownerships`,
+    options: {
+      method: 'POST',
+      headers,
+      body: JSON.stringify({
+        ownerEmail,
+        itemId,
+        itemType,
+      }),
+    },
+  });
+
+const useRequestOwnershipMutation = (configuration: UseQueryOptions = {}) =>
+  useAuthenticatedMutation({
+    mutationFn: requestOwnership,
+    mutationKey: 'ownerships-request-ownership',
+    ...configuration,
+  });
+
 const getOwnershipRequests = async ({ headers, organizerId }) => {
   const res = await fetchFromApi({
     path: '/ownerships/',
@@ -113,4 +134,5 @@ export {
   useDeleteOwnershipRequestMutation,
   useGetOwnershipRequestsQuery,
   useRejectOwnershipRequestMutation,
+  useRequestOwnershipMutation,
 };

src/i18n/nl.json

@@ -1034,6 +1034,16 @@
       },
       "pending": "Openstaande aanvragen tot beheer",
       "close": "Sluiten",
+      "request_modal": {
+        "title": "Beheerder toevoegen aan {{name}}",
+        "email": "E-mailadres",
+        "email_error": "Geen geldig e-mailadres",
+        "success": "{{ownerEmail}} is nu beheerder van {{organizerName}} en kan voortaan de organisatiepagina en evenementen van {{organizerName}} bewerken.",
+        "actions": {
+          "confirm": "Beheerder toevoegen",
+          "cancel": "Annuleren"
+        }
+      },
       "confirm_modal": {
         "title": "Aanvraag tot beheer goedkeuren",
         "body": "Ben je zeker dat je de aanvraag van {{ownerEmail}} wilt goedkeuren? <br/><br/> Van zodra je de aanvraag goedkeurt zal {{ownerEmail}} de organisatiepagina en de evenementen van {{organizerName}} kunnen bewerken.",

src/pages/organizers/[organizerId]/ownerships/index.page.tsx

@@ -1,6 +1,7 @@
 import groupBy from 'lodash/groupBy';
 import { useRouter } from 'next/router';
 import { useMemo, useState } from 'react';
+import { useForm } from 'react-hook-form';
 import { Trans, useTranslation } from 'react-i18next';
 import { dehydrate, useQueryClient } from 'react-query';
 
@@ -12,26 +13,31 @@ import {
   useDeleteOwnershipRequestMutation,
   useGetOwnershipRequestsQuery,
   useRejectOwnershipRequestMutation,
+  useRequestOwnershipMutation,
 } from '@/hooks/api/ownerships';
 import { Organizer } from '@/types/Organizer';
 import { Values } from '@/types/Values';
 import { Alert, AlertVariants } from '@/ui/Alert';
 import { Box } from '@/ui/Box';
 import { Button, ButtonVariants } from '@/ui/Button';
-import { Icon } from '@/ui/Icon';
+import { FormElement } from '@/ui/FormElement';
 import { Icons } from '@/ui/Icon';
 import { Inline } from '@/ui/Inline';
+import { Input } from '@/ui/Input';
 import { Modal, ModalSizes, ModalVariants } from '@/ui/Modal';
 import { Page } from '@/ui/Page';
 import { Stack } from '@/ui/Stack';
 import { Title } from '@/ui/Title';
+import { ErrorBody, FetchError } from '@/utils/fetchFromApi';
 import { getApplicationServerSideProps } from '@/utils/getApplicationServerSideProps';
+import { parseOfferId } from '@/utils/parseOfferId';
 
 import { OwnershipsTable } from './OwnershipsTable';
 
 const ActionType = {
-  APPROVE: 'approve',
+  APPROVE: 'confirm',
   REJECT: 'reject',
+  REQUEST: 'request',
 } as const;
 
 type ActionType = Values<typeof ActionType>;
@@ -40,32 +46,33 @@ const Ownership = () => {
   const router = useRouter();
   const { t, i18n } = useTranslation();
   const queryClient = useQueryClient();
-  const [selectedRequest, setSelectedRequest] = useState<OwnershipRequest>();
-  const [requestToBeDeleted, setRequestToBeDeleted] =
-    useState<OwnershipRequest>();
-  const [isQuestionModalVisible, setIsQuestionModalVisible] = useState(false);
   const [actionType, setActionType] = useState<ActionType>();
+  const [isOpen, setIsOpen] = useState(false);
+  const [isQuestionModalVisible, setIsQuestionModalVisible] = useState(false);
   const [isSuccessAlertVisible, setIsSuccessAlertVisible] = useState(false);
-  const isApproveAction = actionType === ActionType.APPROVE;
-  const translationsPath = `organizers.ownerships.${
-    isApproveAction ? 'confirm' : 'reject'
-  }_modal`;
+  const [requestToBeDeleted, setRequestToBeDeleted] =
+    useState<OwnershipRequest>();
+  const [selectedRequest, setSelectedRequest] = useState<OwnershipRequest>();
+  const translationsPath = `organizers.ownerships.${actionType}_modal`;
+  const { register, formState, getValues, setError } = useForm();
 
   const organizerId = useMemo(
     () => router.query.organizerId as string,
     [router.query.organizerId],
   );
+
   const getOrganizerByIdQuery = useGetOrganizerByIdQuery({
     id: organizerId,
   });
+
   // @ts-expect-error
   const organizer: Organizer = getOrganizerByIdQuery?.data;
   const organizerName =
     organizer?.name?.[i18n.language] ??
     organizer?.name?.[organizer.mainLanguage];
 
   const getOwnershipRequestsQuery = useGetOwnershipRequestsQuery({
-    organizerId: organizerId,
+    organizerId,
   });
 
   const requestsByState: { [key: string]: OwnershipRequest[] } = useMemo(
@@ -90,6 +97,25 @@ const Ownership = () => {
     },
   });
 
+  const approveRequestedOwnership = async (ownershipId: string) => {
+    setIsSuccessAlertVisible(true);
+    setIsOpen(false);
+
+    return approveOwnershipRequestMutation.mutateAsync({ ownershipId });
+  };
+
+  const requestOwnership = useRequestOwnershipMutation({
+    onError: async (error: FetchError<ErrorBody>) => {
+      if (error.body.status === 409) {
+        const ownershipId = error.body.detail.split('with id ')[1];
+        await approveRequestedOwnership(ownershipId);
+      } else {
+        setError('email', { message: error.body.detail || error.title });
+      }
+    },
+    onSuccess: (data: { id: string }) => approveRequestedOwnership(data.id),
+  });
+
   const rejectOwnershipRequestMutation = useRejectOwnershipRequestMutation({
     onSuccess: async () => {
       await queryClient.invalidateQueries('ownership-requests');
@@ -106,14 +132,21 @@ const Ownership = () => {
   });
 
   const handleConfirm = () => {
-    if (isApproveAction) {
-      approveOwnershipRequestMutation.mutate({
-        ownershipId: selectedRequest.id,
-      });
-    } else {
-      rejectOwnershipRequestMutation.mutate({
-        ownershipId: selectedRequest.id,
-      });
+    switch (actionType) {
+      case ActionType.APPROVE:
+        return approveOwnershipRequestMutation.mutate({
+          ownershipId: selectedRequest.id,
+        });
+      case ActionType.REJECT:
+        return rejectOwnershipRequestMutation.mutate({
+          ownershipId: selectedRequest.id,
+        });
+      case ActionType.REQUEST:
+        return requestOwnership.mutate({
+          ownerEmail: getValues('email'),
+          itemType: 'organizer',
+          itemId: parseOfferId(organizer['@id']),
+        });
     }
   };
 
@@ -144,8 +177,9 @@ const Ownership = () => {
                 <Trans
                   i18nKey={`${translationsPath}.success`}
                   values={{
-                    ownerEmail: selectedRequest?.ownerEmail,
-                    organizerName: organizerName,
+                    ownerEmail:
+                      selectedRequest?.ownerEmail ?? getValues('email'),
+                    organizerName,
                   }}
                 />
               </Alert>
@@ -235,7 +269,7 @@ const Ownership = () => {
                       i18nKey={`${translationsPath}.body`}
                       values={{
                         ownerEmail: selectedRequest?.ownerEmail,
-                        organizerName: organizerName,
+                        organizerName,
                       }}
                     />
                   </Box>
@@ -244,7 +278,14 @@ const Ownership = () => {
             )}
           </Stack>
           <Stack spacing={3.5} flex={1}>
-            <Button variant={ButtonVariants.PRIMARY}>
+            <Button
+              variant={ButtonVariants.PRIMARY}
+              onClick={() => {
+                setIsSuccessAlertVisible(false);
+                setActionType(ActionType.REQUEST);
+                setIsOpen(true);
+              }}
+            >
               {t('organizers.ownerships.actions.add')}
             </Button>
             <Button
@@ -257,6 +298,32 @@ const Ownership = () => {
             </Button>
           </Stack>
         </Inline>
+        <Modal
+          visible={isOpen}
+          variant={ModalVariants.QUESTION}
+          size={ModalSizes.MD}
+          title={t('organizers.ownerships.request_modal.title', {
+            name: organizer.name,
+          })}
+          confirmTitle={t(
+            'organizers.ownerships.request_modal.actions.confirm',
+          )}
+          cancelTitle={t('organizers.ownerships.request_modal.actions.cancel')}
+          onConfirm={handleConfirm}
+          onClose={() => setIsOpen(false)}
+        >
+          <Stack padding={4}>
+            <FormElement
+              id={'email'}
+              Component={<Input type={'email'} {...register('email')} />}
+              label={t('organizers.ownerships.request_modal.email')}
+              error={
+                formState.errors.email &&
+                t(`organizers.ownerships.request_modal.email_error`)
+              }
+            />
+          </Stack>
+        </Modal>
       </Page.Content>
     </Page>
   );

src/utils/fetchFromApi.ts

@@ -1,9 +1,10 @@
 import omit from 'lodash/omit';
 import getConfig from 'next/config';
 
-class FetchError extends Error {
+class FetchError<TBody = any> extends Error {
+  title?: string;
   status: number;
-  body?: any;
+  body?: TBody;
 
   constructor(status: number, message: string, body?: any) {
     super(message);
@@ -18,15 +19,18 @@ type ErrorObject = {
   message: string;
 };
 
-export type DuplicatePlaceErrorBody = {
+export type ErrorBody = {
   detail: string;
-  query?: string;
-  duplicatePlaceUri?: string;
   status: number;
   title: string;
   type: string;
 };
 
+export type DuplicatePlaceErrorBody = ErrorBody & {
+  query?: string;
+  duplicatePlaceUri?: string;
+};
+
 const isErrorObject = (value: any): value is ErrorObject => {
   return (
     value.type === 'ERROR' &&