✨(frontend) display required actions details on Domain

On domain page, add link to display modal with needed informations
about actions to do to fix a domain.

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

@@ -1,3 +1,4 @@
+import { Modal, ModalSize } from '@openfun/cunningham-react';
 import * as React from 'react';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -14,6 +15,7 @@ type Props = {
 };
 export const MailDomainView = ({ mailDomain }: Props) => {
   const { t } = useTranslation();
+  const [showModal, setShowModal] = React.useState(false);
   const currentRole = mailDomain.abilities.delete
     ? Role.OWNER
     : mailDomain.abilities.manage_accesses
@@ -41,28 +43,79 @@ export const MailDomainView = ({ mailDomain }: Props) => {
     ];
   }, [t, currentRole, mailDomain]);
 
+  const handleShowModal = () => {
+    setShowModal(true);
+  };
+
   return (
-    <Box $padding="big">
+    <>
-      <Box
+      {showModal && (
-        $width="100%"
+        <Modal
-        $direction="row"
+          isOpen
-        $align="center"
+          size={ModalSize.EXTRA_LARGE}
-        $gap="2.25rem"
+          onClose={() => setShowModal(false)}
-        $justify="center"
+          title={t('Required actions on domain')}
-      >
-        <Box
-          $direction="row"
-          $justify="center"
-          $margin={{ bottom: 'big' }}
-          $gap="0.5rem"
         >
-          <MailDomainsLogo aria-hidden="true" />
+          <p>
-          <Text $margin="none" as="h3" $size="h3">
+            {t(
-            {mailDomain?.name}
+              'The domain is currently in action required status. Please take the necessary actions to resolve those following issues.',
-          </Text>
+            )}
+          </p>
+          <h3>{t('Actions required detail')}</h3>
+          <pre>
+            {mailDomain.action_required_details &&
+              Object.entries(mailDomain.action_required_details).map(
+                ([check, value]) => (
+                  <ul key={check}>
+                    <li>
+                      <b>{check}</b>: {value}
+                    </li>
+                  </ul>
+                ),
+              )}
+          </pre>
+        </Modal>
+      )}
+      <Box $padding="big">
+        <Box
+          $width="100%"
+          $direction="row"
+          $align="center"
+          $gap="2.25rem"
+          $justify="center"
+        >
+          <Box
+            $direction="row"
+            $justify="center"
+            $margin={{ bottom: 'big' }}
+            $gap="0.5rem"
+          >
+            <MailDomainsLogo aria-hidden="true" />
+            <Text $margin="none" as="h3" $size="h3">
+              {mailDomain?.name}
+            </Text>
+            {mailDomain?.status === 'action_required' && (
+              <button
+                onClick={handleShowModal}
+                style={{
+                  padding: '5px 10px',
+                  marginLeft: '10px',
+                  backgroundColor: '#f37802',
+                  border: 'none',
+                  color: 'white',
+                  cursor: 'pointer',
+                  fontWeight: '500',
+                  borderRadius: '5px',
+                }}
+                data-modal="mail-domain-status"
+              >
+                {t('Actions required')}
+              </button>
+            )}
+          </Box>
         </Box>
+        <CustomTabs tabs={tabs} />
       </Box>
-      <CustomTabs tabs={tabs} />
+    </>
-    </Box>
   );
 };

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

@@ -8,6 +8,7 @@ export interface MailDomain {
   slug: string;
   status: 'pending' | 'enabled' | 'failed' | 'disabled' | 'action_required';
   support_email: string;
+  action_required_details?: Record<string, string>;
   abilities: {
     get: boolean;
     patch: boolean;

src/frontend/apps/desk/src/i18n/translations.json

@@ -25,6 +25,8 @@
       "Accesses list card": "Carte de la liste des accès",
       "Accessibility statement": "Déclaration d'accessibilité",
       "Accessibility: non-compliant": "Accessibilité : non conforme",
+      "Actions required": "Actions requises",
+      "Actions required detail": "Détail des actions requises",
       "Add a mail domain": "Ajouter un nom de domaine",
       "Add a member": "Ajouter un membre",
       "Add a team": "Ajouter un groupe",
@@ -155,6 +157,7 @@
       "Remove from the group": "Retirer du groupe",
       "Remove this access from the domain": "Retirer cet accès du domaine",
       "Remove this member from the group": "Retirer le membre du groupe",
+      "Required actions on domain": "Actions requises sur le domaine",
       "Roles": "Rôles",
       "Régie": "Régie",
       "Search new members (name or email)": "Rechercher de nouveaux membres (nom ou email)",
@@ -175,6 +178,7 @@
       "Teams": "Équipes",
       "The National Agency for Territorial Cohesion undertakes to make its\n          service accessible, in accordance with article 47 of law no. 2005-102\n          of February 11, 2005.": "L'Agence Nationale de la Cohésion des Territoires s’engage à rendre son service accessible, conformément à l’article 47 de la loi n° 2005-102 du 11 février 2005.",
       "The access has been removed from the domain": "L'accès a été supprimé du domaine",
+      "The domain is currently in action required status. Please take the necessary actions to resolve those following issues.": "Le domaine est actuellement en statut actions requises. Veuillez faire le nécessaire pour résoudre les problèmes suivants.",
       "The domain name encounters an error. Please contact our support team to solve the problem:": "Le nom de domaine rencontre une erreur. Veuillez contacter notre support pour résoudre le problème :",
       "The mail domain secret is misconfigured. Please, contact our support team to solve the issue: suiteterritoriale@anct.gouv.fr": "Le secret du domaine de messagerie est mal configuré. Veuillez contacter notre support pour résoudre le problème : suiteterritoriale@anct.gouv.fr",
       "The member has been removed from the team": "Le membre a été supprimé de votre groupe",