(Role.VIEWER);
+
+ const createInvitation = useCreateInvitation();
+ const { mutateAsync: createMailDomainAccess } = useCreateMailDomainAccess();
+
+ const onSuccess = (option: OptionSelect) => {
+ const message = !isOptionNewMember(option)
+ ? t('Invitation sent to {{email}}', {
+ email: option.value.email,
+ })
+ : t('Access added to {{name}}', {
+ name: option.value.name,
+ });
+
+ toast(message, VariantType.SUCCESS);
+ };
+
+ const onError = (dataError: APIErrorMember['data']) => {
+ const messageError =
+ dataError?.type === OptionType.INVITATION
+ ? t('Failed to create the invitation')
+ : t('Failed to add access');
+ toast(messageError, VariantType.ERROR);
+ };
+
+ const switchActions = (selectedMembers: OptionsSelect) =>
+ selectedMembers.map(async (selectedMember) => {
+ switch (selectedMember.type) {
+ case OptionType.INVITATION:
+ await createInvitation.mutateAsync({
+ email: selectedMember.value.email,
+ mailDomainSlug: mailDomain.slug,
+ role,
+ });
+ break;
+
+ default:
+ await createMailDomainAccess({
+ slug: mailDomain.slug,
+ user: selectedMember.value.id,
+ role,
+ });
+ break;
+ }
+
+ return selectedMember;
+ });
+
+ const handleValidate = async () => {
+ const settledPromises = await Promise.allSettled(
+ switchActions(selectedMembers),
+ );
+
+ settledPromises.forEach((settledPromise) => {
+ switch (settledPromise.status) {
+ case 'rejected':
+ onError((settledPromise.reason as APIErrorMember).data);
+ break;
+
+ case 'fulfilled':
+ onSuccess(settledPromise.value);
+ break;
+ }
+ onClose();
+ });
+ };
+
+ return (
+
+ {t('Cancel')}
+
+ }
+ onClose={onClose}
+ closeOnClickOutside
+ hideCloseButton
+ rightActions={
+
+ }
+ size={ModalSize.MEDIUM}
+ title={
+
+
+ {t('Add a new access')}
+
+
+ }
+ >
+
+
+ {selectedMembers.length > 0 && (
+
+
+ {t('Choose a role')}
+
+
+
+ )}
+
+
+ );
+};
diff --git a/src/frontend/apps/desk/src/features/mail-domains/domains/components/ModalRequiredActionDomain.tsx b/src/frontend/apps/desk/src/features/mail-domains/domains/components/ModalRequiredActionDomain.tsx
new file mode 100644
index 0000000..f40ac35
--- /dev/null
+++ b/src/frontend/apps/desk/src/features/mail-domains/domains/components/ModalRequiredActionDomain.tsx
@@ -0,0 +1,159 @@
+import {
+ Button,
+ Loader,
+ ModalSize,
+ VariantType,
+ useToastProvider,
+} from '@openfun/cunningham-react';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { Box, Text } from '@/components';
+import { CustomModal } from '@/components/modal/CustomModal';
+import { MailDomain } from '@/features/mail-domains/domains';
+
+import { useFetchFromDimail } from '../api/useFetchMailDomain';
+
+export const ModalRequiredActionDomain = ({
+ mailDomain,
+ onMailDomainUpdate,
+ closeModal,
+}: {
+ closeModal: () => void;
+ mailDomain: MailDomain;
+ onMailDomainUpdate: (updatedDomain: MailDomain) => void;
+}) => {
+ const { t } = useTranslation();
+ const { toast } = useToastProvider();
+
+ const { mutate: fetchMailDomain, isPending: fetchPending } =
+ useFetchFromDimail({
+ onSuccess: (data: MailDomain) => {
+ closeModal();
+ toast(t('Domain data fetched successfully'), VariantType.SUCCESS);
+ onMailDomainUpdate?.(data);
+ },
+ onError: () => {
+ toast(t('Failed to fetch domain data'), VariantType.ERROR);
+ },
+ });
+
+ const copyToClipboard = async (text: string) => {
+ await navigator.clipboard.writeText(text);
+ toast(t('copy done'), VariantType.SUCCESS);
+ };
+
+ const step = 0;
+
+ const steps = [
+ {
+ title: t('Required actions on domain'),
+ content: (
+
+
+ {t(
+ 'The domain is currently in action required status. Please take the necessary actions to resolve those following issues.',
+ )}
+
+ {t('Actions required detail')}
+
+ {mailDomain.action_required_details &&
+ Object.entries(mailDomain.action_required_details).map(
+ ([check, value], index) => (
+
+ ),
+ )}
+
+ {mailDomain.expected_config && (
+
+ {t('DNS Configuration Required:')}
+
+
+ {t('Add the following DNS values:')}
+
+ {mailDomain.expected_config.map((item, index) => (
+ -
+ {item.target && (
+ <>
+ {item.target.toUpperCase()} -{' '}
+
+ )}
+ {item.type.toUpperCase()} {t('with value:')}{' '}
+
+ {item.value}
+
+
+
+ ))}
+
+
+
+ )}
+
+ ),
+ rightAction: fetchPending ? (
+
+ ) : (
+
+ ),
+ leftAction: (
+
+ ),
+ },
+ ];
+
+ return (
+
+ {steps[step].content}
+
+ );
+};
diff --git a/src/frontend/apps/desk/src/features/mail-domains/domains/components/index.ts b/src/frontend/apps/desk/src/features/mail-domains/domains/components/index.ts
index 18a8a49..07dd4dd 100644
--- a/src/frontend/apps/desk/src/features/mail-domains/domains/components/index.ts
+++ b/src/frontend/apps/desk/src/features/mail-domains/domains/components/index.ts
@@ -1,3 +1,5 @@
-export * from './ModalAddMailDomain';
export * from './MailDomainsLayout';
+export * from './ModalAddMailDomain';
+export * from './MailDomainAccessesAction';
+export * from './ModalRequiredActionDomain';
export * from './panel';
diff --git a/src/frontend/apps/desk/src/features/mail-domains/domains/components/panel/MailDomainListView.tsx b/src/frontend/apps/desk/src/features/mail-domains/domains/components/panel/MailDomainListView.tsx
new file mode 100644
index 0000000..f67ddec
--- /dev/null
+++ b/src/frontend/apps/desk/src/features/mail-domains/domains/components/panel/MailDomainListView.tsx
@@ -0,0 +1,101 @@
+import { Button, SimpleDataGrid } from '@openfun/cunningham-react';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { Box, StyledLink, Tag } from '@/components';
+import {
+ MailDomain,
+ useMailDomains,
+ useMailDomainsStore,
+} from '@/features/mail-domains/domains';
+
+interface MailDomainsListViewProps {
+ querySearch: string;
+}
+
+export function MailDomainsListView({ querySearch }: MailDomainsListViewProps) {
+ const { t } = useTranslation();
+
+ const { ordering } = useMailDomainsStore();
+ const { data, isLoading } = useMailDomains({ ordering });
+ const mailDomains = useMemo(() => {
+ return data?.pages.reduce((acc, page) => {
+ return acc.concat(page.results);
+ }, [] as MailDomain[]);
+ }, [data?.pages]);
+
+ const filteredMailDomains = useMemo(() => {
+ if (!querySearch) {
+ return mailDomains;
+ }
+ const lowerCaseSearch = querySearch.toLowerCase();
+ return (
+ (mailDomains &&
+ mailDomains.filter((domain) =>
+ domain.name.toLowerCase().includes(lowerCaseSearch),
+ )) ||
+ []
+ );
+ }, [querySearch, mailDomains]);
+
+ return (
+
+ {filteredMailDomains && filteredMailDomains.length ? (
+
+
+
+ );
+ },
+ },
+ {
+ id: 'actions',
+ renderCell({ row }) {
+ return (
+
+
+
+ );
+ },
+ },
+ ]}
+ isLoading={isLoading}
+ />
+ ) : null}
+
+ );
+}
diff --git a/src/frontend/apps/desk/src/features/mail-domains/domains/components/panel/MailDomainsListView.tsx b/src/frontend/apps/desk/src/features/mail-domains/domains/components/panel/MailDomainsListView.tsx
new file mode 100644
index 0000000..7488f31
--- /dev/null
+++ b/src/frontend/apps/desk/src/features/mail-domains/domains/components/panel/MailDomainsListView.tsx
@@ -0,0 +1,107 @@
+import { Button, DataGrid } from '@openfun/cunningham-react';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { Box, StyledLink, Tag, Text } from '@/components';
+import {
+ MailDomain,
+ useMailDomains,
+ useMailDomainsStore,
+} from '@/features/mail-domains/domains';
+
+interface MailDomainsListViewProps {
+ querySearch: string;
+}
+
+export function MailDomainsListView({ querySearch }: MailDomainsListViewProps) {
+ const { t } = useTranslation();
+
+ const { ordering } = useMailDomainsStore();
+ const { data, isLoading } = useMailDomains({ ordering });
+ const mailDomains = useMemo(() => {
+ return data?.pages.reduce((acc, page) => {
+ return acc.concat(page.results);
+ }, [] as MailDomain[]);
+ }, [data?.pages]);
+
+ const filteredMailDomains = useMemo(() => {
+ if (!querySearch) {
+ return mailDomains;
+ }
+ const lowerCaseSearch = querySearch.toLowerCase();
+ return (
+ (mailDomains &&
+ mailDomains.filter((domain) =>
+ domain.name.toLowerCase().includes(lowerCaseSearch),
+ )) ||
+ []
+ );
+ }, [querySearch, mailDomains]);
+
+ return (
+
+ {filteredMailDomains && filteredMailDomains.length ? (
+
+
+
+ );
+ },
+ },
+ {
+ id: 'actions',
+ renderCell({ row }) {
+ return (
+
+
+
+ );
+ },
+ },
+ ]}
+ isLoading={isLoading}
+ />
+ ) : null}
+ {!filteredMailDomains ||
+ (!filteredMailDomains.length && (
+
+ {t('No domains exist.')}
+
+ ))}
+
+ );
+}
diff --git a/src/frontend/apps/desk/src/features/mail-domains/domains/types.ts b/src/frontend/apps/desk/src/features/mail-domains/domains/types.ts
index d6c1420..cd498b6 100644
--- a/src/frontend/apps/desk/src/features/mail-domains/domains/types.ts
+++ b/src/frontend/apps/desk/src/features/mail-domains/domains/types.ts
@@ -3,6 +3,7 @@ import { UUID } from 'crypto';
export interface MailDomain {
id: UUID;
name: string;
+ count_mailboxes?: number;
created_at: string;
updated_at: string;
slug: string;
diff --git a/src/frontend/apps/desk/src/features/mail-domains/mailboxes/components/MailBoxesView.tsx b/src/frontend/apps/desk/src/features/mail-domains/mailboxes/components/MailBoxesView.tsx
new file mode 100644
index 0000000..9ab1a3d
--- /dev/null
+++ b/src/frontend/apps/desk/src/features/mail-domains/mailboxes/components/MailBoxesView.tsx
@@ -0,0 +1,320 @@
+import {
+ Alert,
+ Button,
+ Input,
+ Tooltip,
+ VariantType,
+} from '@openfun/cunningham-react';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { Text } from '@/components';
+import { useCunninghamTheme } from '@/cunningham';
+import { ModalCreateMailbox } from '@/features/mail-domains/mailboxes/components';
+import { MailBoxesListView } from '@/features/mail-domains/mailboxes/components/panel';
+
+import { MailDomain } from '../../domains/types';
+
+export function MailBoxesView({ mailDomain }: { mailDomain: MailDomain }) {
+ const [searchValue, setSearchValue] = useState('');
+
+ const [isCreateMailboxFormVisible, setIsCreateMailboxFormVisible] =
+ useState(false);
+
+ const { t } = useTranslation();
+
+ const { colorsTokens } = useCunninghamTheme();
+ const colors = colorsTokens();
+
+ const canCreateMailbox =
+ mailDomain.status === 'enabled' || mailDomain.status === 'pending';
+
+ const handleInputChange = (event: React.ChangeEvent) => {
+ setSearchValue(event.target.value);
+ };
+
+ const clearInput = () => {
+ setSearchValue('');
+ };
+
+ const openModal = () => {
+ setIsCreateMailboxFormVisible(true);
+ };
+
+ return (
+ <>
+
+
+ {t('Email addresses')}
+
+
+
+
+ search}
+ rightIcon={
+ searchValue && (
+ {
+ if (e.key === 'Enter' || e.key === ' ') {
+ clearInput();
+ }
+ }}
+ role="button"
+ tabIndex={0}
+ style={{ cursor: 'pointer' }}
+ >
+ close
+
+ )
+ }
+ value={searchValue}
+ onChange={handleInputChange}
+ />
+
+
+
+
+
+
+
+ {mailDomain?.abilities.post ? (
+
+ ) : (
+
+
+
+
+
+ )}
+
+
+
+
+ {!mailDomain.count_mailboxes && (
+
+ {t('No mail box was created with this mail domain.')}
+
+ )}
+ {isCreateMailboxFormVisible && mailDomain ? (
+
setIsCreateMailboxFormVisible(false)}
+ />
+ ) : null}
+
+ {error &&
}
+
+ {filteredMailboxes && filteredMailboxes.length ? (
+
(
+
+ {row.name}
+
+ ),
+ },
+ {
+ id: 'status',
+ headerName: t('Status'),
+ enableSorting: true,
+ renderCell({ row }) {
+ return (
+
+
+
+ );
+ },
+ },
+ // {
+ // id: 'actions',
+ // renderCell: ({ row }) => (
+ // <>
+ //
+ //
+ // ),
+ // },
+ ]}
+ isLoading={isLoading}
+ />
+ ) : null}
+
+
+ }
+ onChange={(event) => setQueryValue(event.target.value)}
+ />
+
+ {currentRole !== Role.MEMBER && (
+
+ )}
+