✨(frontend) disable mailbox and allow to create pending mailbox

Allow to disable or enable mailboxes.
And enable mailbox creation button when domain is pending to
allow creation of mailboxes in pending status.

CHANGELOG.md

@@ -14,6 +14,7 @@ and this project adheres to
 
 ### Added
 
+- ✨(frontend) disable mailbox and allow to create pending mailbox
 - ✨(organizations) add siret to name conversion #584
 - 💄(frontend) redirect home according to abilities #588
 - ✨(maildomain_access) add API endpoint to search users #508

src/frontend/apps/desk/src/features/mail-domains/mailboxes/api/useUpdateMailboxStatus.tsx

@@ -0,0 +1,48 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import { APIError, errorCauses, fetchAPI } from '@/api';
+
+import { KEY_LIST_MAILBOX } from './useMailboxes';
+
+export interface DisableMailboxParams {
+  mailDomainSlug: string;
+  mailboxId: string;
+  isEnabled: boolean;
+}
+
+export const disableMailbox = async ({
+  mailDomainSlug,
+  mailboxId,
+  isEnabled,
+}: DisableMailboxParams): Promise<void> => {
+  const response = await fetchAPI(
+    `mail-domains/${mailDomainSlug}/mailboxes/${mailboxId}/${
+      isEnabled ? 'enable' : 'disable'
+    }/`,
+    {
+      method: 'POST',
+    },
+  );
+
+  if (!response.ok) {
+    throw new APIError(
+      'Failed to disable the mailbox',
+      await errorCauses(response),
+    );
+  }
+};
+
+export const useUpdateMailboxStatus = () => {
+  const queryClient = useQueryClient();
+  return useMutation<void, APIError, DisableMailboxParams>({
+    mutationFn: disableMailbox,
+    onSuccess: (_data, variables) => {
+      void queryClient.invalidateQueries({
+        queryKey: [
+          KEY_LIST_MAILBOX,
+          { mailDomainSlug: variables.mailDomainSlug },
+        ],
+      });
+    },
+  });
+};

src/frontend/apps/desk/src/features/mail-domains/mailboxes/components/MailDomainsActions.tsx

@@ -0,0 +1,115 @@
+import {
+  Button,
+  Modal,
+  ModalSize,
+  VariantType,
+  useModal,
+  useToastProvider,
+} from '@openfun/cunningham-react';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { Box, DropButton, IconOptions, Text } from '@/components';
+
+import { MailDomain } from '../../domains/types';
+import { useUpdateMailboxStatus } from '../api/useUpdateMailboxStatus';
+import { MailDomainMailbox } from '../types';
+
+interface MailDomainsActionsProps {
+  mailbox: MailDomainMailbox;
+  mailDomain: MailDomain;
+}
+
+export const MailDomainsActions = ({
+  mailDomain,
+  mailbox,
+}: MailDomainsActionsProps) => {
+  const { t } = useTranslation();
+  const [isDropOpen, setIsDropOpen] = useState(false);
+  const isEnabled = mailbox.status === 'enabled';
+  const disableModal = useModal();
+  const { toast } = useToastProvider();
+
+  const { mutate: updateMailboxStatus } = useUpdateMailboxStatus();
+
+  const handleUpdateMailboxStatus = () => {
+    disableModal.close();
+    updateMailboxStatus(
+      {
+        mailDomainSlug: mailDomain.slug,
+        mailboxId: mailbox.id,
+        isEnabled: !isEnabled,
+      },
+      {
+        onError: () =>
+          toast(t('Failed to update mailbox status'), VariantType.ERROR),
+      },
+    );
+  };
+
+  if (mailbox.status === 'pending' || mailbox.status === 'failed') {
+    return null;
+  }
+
+  return (
+    <>
+      <DropButton
+        button={
+          <IconOptions
+            isOpen={isDropOpen}
+            aria-label={t('Open the access options modal')}
+          />
+        }
+        onOpenChange={(isOpen) => setIsDropOpen(isOpen)}
+        isOpen={isDropOpen}
+      >
+        <Box>
+          <Button
+            aria-label={t('Open the modal to update the role of this access')}
+            onClick={() => {
+              setIsDropOpen(false);
+              if (isEnabled) {
+                disableModal.open();
+              } else {
+                handleUpdateMailboxStatus();
+              }
+            }}
+            fullWidth
+            color="primary-text"
+            icon={
+              <span className="material-icons" aria-hidden="true">
+                {isEnabled ? 'lock' : 'lock_open'}
+              </span>
+            }
+          >
+            <Text $theme="primary">
+              {isEnabled ? t('Disable mailbox') : t('Enable mailbox')}
+            </Text>
+          </Button>
+        </Box>
+      </DropButton>
+      <Modal
+        isOpen={disableModal.isOpen}
+        onClose={disableModal.close}
+        title={<Text $size="h3">{t('Disable mailbox')}</Text>}
+        size={ModalSize.MEDIUM}
+        rightActions={
+          <Box $direction="row" $justify="flex-end" $gap="0.5rem">
+            <Button color="secondary" onClick={disableModal.close}>
+              {t('Cancel')}
+            </Button>
+            <Button color="danger" onClick={handleUpdateMailboxStatus}>
+              {t('Disable')}
+            </Button>
+          </Box>
+        }
+      >
+        <Text>
+          {t(
+            'Are you sure you want to disable this mailbox? This action results in the deletion of the calendar, address book, etc.',
+          )}
+        </Text>
+      </Modal>
+    </>
+  );
+};

src/frontend/apps/desk/src/features/mail-domains/mailboxes/components/MailDomainsContent.tsx

@@ -9,7 +9,7 @@ import {
   VariantType,
   usePagination,
 } from '@openfun/cunningham-react';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { Box, Card, Text, TextErrors, TextStyled } from '@/components';
@@ -20,10 +20,14 @@ import { MailDomain } from '../../domains/types';
 import { useMailboxes } from '../api/useMailboxes';
 import { MailDomainMailbox } from '../types';
 
+import { MailDomainsActions } from './MailDomainsActions';
+
 export type ViewMailbox = {
   name: string;
   email: string;
   id: UUID;
+  status: MailDomainMailbox['status'];
+  mailbox: MailDomainMailbox;
 };
 
 // FIXME : ask Cunningham to export this type
@@ -72,6 +76,8 @@ export function MailDomainsContent({ mailDomain }: { mailDomain: MailDomain }) {
           email: `${mailbox.local_part}@${mailDomain.name}`,
           name: `${mailbox.first_name} ${mailbox.last_name}`,
           id: mailbox.id,
+          status: mailbox.status,
+          mailbox,
         }))
       : [];
 
@@ -97,7 +103,16 @@ export function MailDomainsContent({ mailDomain }: { mailDomain: MailDomain }) {
         showMailBoxCreationForm={setIsCreateMailboxFormVisible}
       />
 
-      <Card $overflow="auto" aria-label={t('Mailboxes list card')}>
+      <Card
+        $overflow="auto"
+        aria-label={t('Mailboxes list card')}
+        $css={`
+          
+          & table td:last-child {
+            text-align: right;
+          }
+      `}
+      >
         {error && <TextErrors causes={error.cause} />}
 
         <DataGrid
@@ -119,6 +134,19 @@ export function MailDomainsContent({ mailDomain }: { mailDomain: MailDomain }) {
               field: 'email',
               headerName: t('Emails'),
             },
+            {
+              field: 'status',
+              headerName: t('Status'),
+            },
+            {
+              id: 'column-actions',
+              renderCell: ({ row }) => (
+                <MailDomainsActions
+                  mailbox={row.mailbox}
+                  mailDomain={mailDomain}
+                />
+              ),
+            },
           ]}
           rows={viewMailboxes}
           isLoading={isLoading}
@@ -147,6 +175,8 @@ const TopBanner = ({
   showMailBoxCreationForm: (value: boolean) => void;
 }) => {
   const { t } = useTranslation();
+  const canCreateMailbox =
+    mailDomain.status === 'enabled' || mailDomain.status === 'pending';
 
   return (
     <Box $direction="column" $gap="1rem">
@@ -164,7 +194,7 @@ const TopBanner = ({
               aria-label={t('Create a mailbox in {{name}} domain', {
                 name: mailDomain?.name,
               })}
-              disabled={mailDomain?.status !== 'enabled'}
+              disabled={!canCreateMailbox}
               onClick={() => showMailBoxCreationForm(true)}
             >
               {t('Create a mailbox')}
@@ -181,14 +211,6 @@ const AlertStatus = ({ status }: { status: MailDomain['status'] }) => {
 
   const getStatusAlertProps = (status?: string) => {
     switch (status) {
-      case 'pending':
-        return {
-          variant: VariantType.WARNING,
-          message: t(
-            'Your domain name is being validated. ' +
-              'You will not be able to create mailboxes until your domain name has been validated by our team.',
-          ),
-        };
       case 'disabled':
         return {
           variant: VariantType.NEUTRAL,

src/frontend/apps/desk/src/features/mail-domains/mailboxes/types.ts

@@ -6,4 +6,11 @@ export interface MailDomainMailbox {
   first_name: string;
   last_name: string;
   secondary_email: string;
+  status: MailDomainMailboxStatus;
 }
+
+export type MailDomainMailboxStatus =
+  | 'enabled'
+  | 'disabled'
+  | 'pending'
+  | 'failed';