✨(frontend) confirmation modal to disable mailbox

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

@@ -1,4 +1,11 @@
-import { Button } from '@openfun/cunningham-react';
+import {
+  Button,
+  Modal,
+  ModalSize,
+  VariantType,
+  useModal,
+  useToastProvider,
+} from '@openfun/cunningham-react';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -20,15 +27,24 @@ export const MailDomainsActions = ({
   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 = () => {
-    updateMailboxStatus({
-      mailDomainSlug: mailDomain.slug,
-      mailboxId: mailbox.id,
-      isEnabled: !isEnabled,
-    });
+    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') {
@@ -52,7 +68,11 @@ export const MailDomainsActions = ({
             aria-label={t('Open the modal to update the role of this access')}
             onClick={() => {
               setIsDropOpen(false);
-              handleUpdateMailboxStatus();
+              if (isEnabled) {
+                disableModal.open();
+              } else {
+                handleUpdateMailboxStatus();
+              }
             }}
             fullWidth
             color="primary-text"
@@ -68,6 +88,28 @@ export const MailDomainsActions = ({
           </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>
     </>
   );
 };