From db3185e16b83c9a0fded97403e8c3062a101a78d Mon Sep 17 00:00:00 2001
From: Sabrina Demagny <sabrina.demagny@gmail.com>
Date: Fri, 14 Mar 2025 13:32:09 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(domains)=20enhance=20required=20actio?=
 =?UTF-8?q?n=20modal=20content?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Enhance DNS required actions and explanations
---
 CHANGELOG.md                                    |  1 +
 .../domains/__tests__/MailDomainView.test.tsx   |  2 +-
 .../domains/components/MailDomainView.tsx       | 17 ++++++++++-------
 3 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f8c896e..c96bf4c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to
 
 ### Added
 
+- ✨(domains) enhance required action modal content
 - ✨(domains) add periodic tasks to fetch domain status
 - 🧑‍💻(docker) add celery beat to manage periodic tasks
 - ✨(organization) add metadata field #790
diff --git a/src/frontend/apps/desk/src/features/mail-domains/domains/__tests__/MailDomainView.test.tsx b/src/frontend/apps/desk/src/features/mail-domains/domains/__tests__/MailDomainView.test.tsx
index 87d617a..c2d2359 100644
--- a/src/frontend/apps/desk/src/features/mail-domains/domains/__tests__/MailDomainView.test.tsx
+++ b/src/frontend/apps/desk/src/features/mail-domains/domains/__tests__/MailDomainView.test.tsx
@@ -89,7 +89,7 @@ describe('<MailDomainView />', () => {
 
     // Verify DNS configuration section
     expect(
-      screen.getByText(/DNS Configuration Required:/i),
+      screen.getByText(/Diagnostic status performed by the server/i),
     ).toBeInTheDocument();
     expect(screen.getByText(/imap.ox.numerique.gouv.fr./i)).toBeInTheDocument();
     expect(
diff --git a/src/frontend/apps/desk/src/features/mail-domains/domains/components/MailDomainView.tsx b/src/frontend/apps/desk/src/features/mail-domains/domains/components/MailDomainView.tsx
index ddb6a9b..9dd7621 100644
--- a/src/frontend/apps/desk/src/features/mail-domains/domains/components/MailDomainView.tsx
+++ b/src/frontend/apps/desk/src/features/mail-domains/domains/components/MailDomainView.tsx
@@ -84,12 +84,12 @@ export const MailDomainView = ({ mailDomain, onMailDomainUpdate }: Props) => {
           onClose={() => setShowModal(false)}
           title={t('Required actions on domain')}
         >
-          <p>
+          <pre>
             {t(
               'The domain is currently in action required status. Please take the necessary actions to resolve those following issues.',
             )}
-          </p>
-          <h3>{t('Actions required detail')}</h3>
+          </pre>
+          <h3>{t('Diagnostic status performed by the server')}</h3>
 
           <pre>
             {mailDomain.action_required_details &&
@@ -105,7 +105,6 @@ export const MailDomainView = ({ mailDomain, onMailDomainUpdate }: Props) => {
           </pre>
           {mailDomain.expected_config && (
             <Box $margin={{ bottom: 'medium' }}>
-              <h3>{t('DNS Configuration Required:')}</h3>
               <pre>
                 <div
                   style={{
@@ -113,7 +112,9 @@ export const MailDomainView = ({ mailDomain, onMailDomainUpdate }: Props) => {
                     overflowWrap: 'break-word',
                   }}
                 >
-                  {t('Add the following DNS values:')}
+                  {t(
+                    'You can resolve the above issues by applying the following configurations on your domain:',
+                  )}
                   <ul>
                     {mailDomain.expected_config.map((item, index) => (
                       <li
@@ -122,10 +123,12 @@ export const MailDomainView = ({ mailDomain, onMailDomainUpdate }: Props) => {
                       >
                         {item.target && (
                           <>
-                            <b>{item.target.toUpperCase()}</b> -{' '}
+                            <b>{item.target}</b>{' '}
                           </>
                         )}
-                        <b>{item.type.toUpperCase()}</b> {t('with value:')}{' '}
+                        <b style={{ color: 'purple' }}>
+                          IN {item.type.toUpperCase()}
+                        </b>{' '}
                         <span style={{ backgroundColor: '#d4e5f5' }}>
                           {item.value}
                         </span>