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, ownerId }) =>
+  fetchFromApi({
+    path: `/ownerships`,
+    options: {
+      method: 'POST',
+      headers,
+      body: JSON.stringify({
+        ownerId,
+        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,15 @@
       },
       "pending": "Openstaande aanvragen tot beheer",
       "close": "Sluiten",
+      "request_modal": {
+        "title": "Beheerder toevoegen aan {{name}}",
+        "email": "E-mailadres",
+        "email_error": "Geen geldig e-mailadres",
+        "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]/edit/index.page.tsx

@@ -18,6 +18,7 @@ export const getServerSideProps = getApplicationServerSideProps(
 
     return {
       props: {
+        organizer,
         dehydratedState: dehydrate(queryClient),
         cookies,
       },

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,30 @@
   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 { 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,29 +45,30 @@
   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 getOwnershipRequestsQuery = useGetOwnershipRequestsQuery({
-    organizerId: organizerId,
+    organizerId,
   });
 
   const requestsByState: { [key: string]: OwnershipRequest[] } = useMemo(
@@ -87,6 +93,14 @@
     },
   });
 
+  const requestOwnership = useRequestOwnershipMutation({
+    onError: (error) => setError('email', error.message),
+    onSuccess: (data) =>
+      approveOwnershipRequestMutation.mutate({
+        ownershipId: data.id,
+      }),
+  });
+
   const rejectOwnershipRequestMutation = useRejectOwnershipRequestMutation({
     onSuccess: async () => {
       await queryClient.invalidateQueries('ownership-requests');
@@ -103,14 +117,21 @@
   });
 
   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']),
+        });
     }
   };
 
@@ -241,7 +262,14 @@
             )}
           </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
@@ -254,6 +282,32 @@
             </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>
   );