✨(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.
This commit is contained in:
Sabrina Demagny
@@ -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
|
||||
$width="100%"
|
||||
$direction="row"
|
||||
$align="center"
|
||||
$gap="2.25rem"
|
||||
$justify="center"
|
||||
>
|
||||
<Box
|
||||
$direction="row"
|
||||
$justify="center"
|
||||
$margin={{ bottom: 'big' }}
|
||||
$gap="0.5rem"
|
||||
<>
|
||||
{showModal && (
|
||||
<Modal
|
||||
isOpen
|
||||
size={ModalSize.EXTRA_LARGE}
|
||||
onClose={() => setShowModal(false)}
|
||||
title={t('Required actions on domain')}
|
||||
>
|
||||
<MailDomainsLogo aria-hidden="true" />
|
||||
<Text $margin="none" as="h3" $size="h3">
|
||||
{mailDomain?.name}
|
||||
</Text>
|
||||
<p>
|
||||
{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>
|
||||
{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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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",
|
||||
|
||||
Reference in New Issue
Block a user