✨(frontend) user can add mail domain

- user can add an externally created mail domain from UI and see the mail domain status on mail domain page and left panel links. - user can not create mailboxes to domain if mail domain status is not equal to `enabled` - update related tests and translations
2024-08-14 17:43:10 +02:00
parent b79725acbe
commit 49c238155c
25 changed files with 1326 additions and 316 deletions
--- a/src/frontend/apps/desk/src/features/teams/teams-panel/assets/icon-add.svg
+++ b/src/frontend/apps/desk/src/features/teams/teams-panel/assets/icon-add.svg
--- a/src/frontend/apps/desk/src/features/mail-domains/assets/icon-open-close.svg
+++ b/src/frontend/apps/desk/src/features/mail-domains/assets/icon-open-close.svg
--- a/src/frontend/apps/desk/src/features/mail-domains/assets/icon-sort.svg
+++ b/src/frontend/apps/desk/src/features/mail-domains/assets/icon-sort.svg
--- a/src/frontend/apps/desk/src/features/mail-domains/api/index.tsx
+++ b/src/frontend/apps/desk/src/features/mail-domains/api/index.tsx
@@ -2,3 +2,4 @@ export * from './useMailDomains';
 export * from './useMailDomain';
 export * from './useCreateMailbox';
 export * from './useMailboxes';
+export * from './useCreateMailDomain';
--- a/src/frontend/apps/desk/src/features/mail-domains/api/useCreateMailDomain.tsx
+++ b/src/frontend/apps/desk/src/features/mail-domains/api/useCreateMailDomain.tsx
@@ -0,0 +1,41 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import { APIError, errorCauses, fetchAPI } from '@/api';
+import { MailDomain } from '@/features/mail-domains';
+
+import { KEY_LIST_MAIL_DOMAIN } from './useMailDomains';
+
+export const createMailDomain = async (name: string): Promise<MailDomain> => {
+  const response = await fetchAPI(`mail-domains/`, {
+    method: 'POST',
+    body: JSON.stringify({
+      name,
+    }),
+  });
+
+  if (!response.ok) {
+    throw new APIError(
+      'Failed to add the mail domain',
+      await errorCauses(response),
+    );
+  }
+
+  return response.json() as Promise<MailDomain>;
+};
+
+export function useCreateMailDomain({
+  onSuccess,
+}: {
+  onSuccess: (data: MailDomain) => void;
+}) {
+  const queryClient = useQueryClient();
+  return useMutation<MailDomain, APIError, string>({
+    mutationFn: createMailDomain,
+    onSuccess: (data) => {
+      void queryClient.invalidateQueries({
+        queryKey: [KEY_LIST_MAIL_DOMAIN],
+      });
+      onSuccess(data);
+    },
+  });
+}
--- a/src/frontend/apps/desk/src/features/mail-domains/api/useMailDomain.tsx
+++ b/src/frontend/apps/desk/src/features/mail-domains/api/useMailDomain.tsx
@@ -13,7 +13,7 @@ type MailDomainResponse = MailDomain;
 export const getMailDomain = async ({
  slug,
 }: MailDomainParams): Promise<MailDomainResponse> => {
-  const response = await fetchAPI(`mail-domains/${slug}`);
+  const response = await fetchAPI(`mail-domains/${slug}/`);

  if (!response.ok) {
    throw new APIError(
--- a/src/frontend/apps/desk/src/features/mail-domains/api/useMailDomains.tsx
+++ b/src/frontend/apps/desk/src/features/mail-domains/api/useMailDomains.tsx
@@ -40,7 +40,7 @@ export const getMailDomains = async ({
  return response.json() as Promise<MailDomainsResponse>;
 };

-export const KEY_LIST_MAIL_DOMAINS = 'mail-domains';
+export const KEY_LIST_MAIL_DOMAIN = 'mail-domains';

 export function useMailDomains(
  param: MailDomainsParams,
@@ -60,7 +60,7 @@ export function useMailDomains(
    number
  >({
    initialPageParam: 1,
-    queryKey: [KEY_LIST_MAIL_DOMAINS, param],
+    queryKey: [KEY_LIST_MAIL_DOMAIN, param],
    queryFn: ({ pageParam }) => getMailDomains({ ...param, page: pageParam }),
    getNextPageParam(lastPage, allPages) {
      return lastPage.next ? allPages.length + 1 : undefined;
--- a/src/frontend/apps/desk/src/features/mail-domains/components/MailDomainsContent.tsx
+++ b/src/frontend/apps/desk/src/features/mail-domains/components/MailDomainsContent.tsx
@@ -1,16 +1,18 @@
 import { UUID } from 'crypto';

 import {
+  Alert,
  Button,
  DataGrid,
  Loader,
  SortModel,
+  VariantType,
  usePagination,
 } from '@openfun/cunningham-react';
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';

-import { Box, Card, Text, TextErrors } from '@/components';
+import { Box, Card, Text, TextErrors, TextStyled } from '@/components';

 import { useMailboxes } from '../api/useMailboxes';
 import { default as MailDomainsLogo } from '../assets/mail-domains-logo.svg';
@@ -35,12 +37,6 @@ const defaultOrderingMapping: Record<string, string> = {
  email: 'local_part',
 };

-/**
- * Formats the sorting model based on a given mapping.
- * @param {SortModelItem} sortModel The sorting model item containing field and sort direction.
- * @param {Record<string, string>} mapping The mapping object to map field names.
- * @returns {string} The formatted sorting string.
- */
 function formatSortModel(
  sortModel: SortModelItem,
  mapping = defaultOrderingMapping,
@@ -98,9 +94,8 @@ export function MailDomainsContent({ mailDomain }: { mailDomain: MailDomain }) {
      ) : null}

      <TopBanner
-        name={mailDomain.name}
-        setIsFormVisible={setIsCreateMailboxFormVisible}
-        abilities={mailDomain?.abilities}
+        mailDomain={mailDomain}
+        showMailBoxCreationForm={setIsCreateMailboxFormVisible}
      />

      <Card
@@ -150,39 +145,111 @@ export function MailDomainsContent({ mailDomain }: { mailDomain: MailDomain }) {
 }

 const TopBanner = ({
-  name,
-  setIsFormVisible,
-  abilities,
+  mailDomain,
+  showMailBoxCreationForm,
 }: {
-  name: string;
-  setIsFormVisible: (value: boolean) => void;
-  abilities: MailDomain['abilities'];
+  mailDomain: MailDomain;
+  showMailBoxCreationForm: (value: boolean) => void;
 }) => {
  const { t } = useTranslation();

  return (
-    <>
+    <Box
+      $direction="column"
+      $margin={{ all: 'big', bottom: 'tiny' }}
+      $gap="1rem"
+    >
      <Box
        $direction="row"
        $align="center"
-        $margin={{ all: 'big', vertical: 'xbig' }}
        $gap="2.25rem"
+        $justify="space-between"
      >
-        <MailDomainsLogo aria-hidden="true" />
-        <Text $margin="none" as="h3" $size="h3">
-          {name}
-        </Text>
+        <Box $direction="row" $margin="none" $gap="2.25rem">
+          <MailDomainsLogo aria-hidden="true" />
+          <Text $margin="none" as="h3" $size="h3">
+            {mailDomain?.name}
+          </Text>
+        </Box>
      </Box>
-      <Box $margin={{ all: 'big', bottom: 'small' }} $align="flex-end">
-        {abilities.post ? (
-          <Button
-            aria-label={t(`Create a mailbox in {{name}} domain`, { name })}
-            onClick={() => setIsFormVisible(true)}
-          >
-            {t('Create a mailbox')}
-          </Button>
-        ) : null}
+
+      <Box $direction="row" $justify="space-between">
+        <AlertStatus status={mailDomain.status} />
      </Box>
-    </>
+      {mailDomain?.abilities.post && (
+        <Box $direction="row-reverse">
+          <Box $display="inline">
+            <Button
+              aria-label={t('Create a mailbox in {{name}} domain', {
+                name: mailDomain?.name,
+              })}
+              disabled={mailDomain?.status !== 'enabled'}
+              onClick={() => showMailBoxCreationForm(true)}
+            >
+              {t('Create a mailbox')}
+            </Button>
+          </Box>
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+const AlertStatus = ({ status }: { status: MailDomain['status'] }) => {
+  const { t } = useTranslation();
+
+  const getStatusAlertProps = (status?: string) => {
+    switch (status) {
+      case 'pending':
+        return {
+          variant: VariantType.WARNING,
+          message: t(
+            'Your domain name is being validated.  ' +
+              'You will not be able to create mailboxes until your domain name has been validated by our team.',
+          ),
+        };
+      case 'disabled':
+        return {
+          variant: VariantType.NEUTRAL,
+          message: t(
+            'This domain name is deactivated. No new mailboxes can be created.',
+          ),
+        };
+      case 'failed':
+        return {
+          variant: VariantType.ERROR,
+          message: (
+            <Text $display="inline">
+              {t(
+                'The domain name encounters an error. Please contact our support team to solve the problem:',
+              )}{' '}
+              <TextStyled
+                as="a"
+                target="_blank"
+                $display="inline"
+                href="mailto:suiteterritoriale@anct.gouv.fr"
+                aria-label={t(
+                  'Contact our support at "suiteterritoriale@anct.gouv.fr"',
+                )}
+              >
+                suiteterritoriale@anct.gouv.fr
+              </TextStyled>
+              .
+            </Text>
+          ),
+        };
+    }
+  };
+
+  const alertStatusProps = getStatusAlertProps(status);
+
+  if (!alertStatusProps) {
+    return null;
+  }
+
+  return (
+    <Alert canClose={false} type={alertStatusProps.variant}>
+      <Text $display="inline">{alertStatusProps.message}</Text>
+    </Alert>
  );
 };
--- a/src/frontend/apps/desk/src/features/mail-domains/components/ModalAddMailDomain.tsx
+++ b/src/frontend/apps/desk/src/features/mail-domains/components/ModalAddMailDomain.tsx
@@ -0,0 +1,143 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import {
+  Button,
+  Input,
+  Loader,
+  Modal,
+  ModalSize,
+} from '@openfun/cunningham-react';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+import { Controller, FormProvider, useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { z } from 'zod';
+
+import { Box, StyledLink, Text, TextErrors } from '@/components';
+import { useCreateMailDomain } from '@/features/mail-domains';
+
+import { default as MailDomainsLogo } from '../assets/mail-domains-logo.svg';
+
+const FORM_ID = 'form-add-mail-domain';
+
+export const ModalCreateMailDomain = () => {
+  const { t } = useTranslation();
+  const router = useRouter();
+
+  const createMailDomainValidationSchema = z.object({
+    name: z.string().min(1, t('Example: saint-laurent.fr')),
+  });
+
+  const methods = useForm<{ name: string }>({
+    delayError: 0,
+    defaultValues: {
+      name: '',
+    },
+    mode: 'onChange',
+    reValidateMode: 'onChange',
+    resolver: zodResolver(createMailDomainValidationSchema),
+  });
+
+  const {
+    mutate: createMailDomain,
+    isPending,
+    error,
+  } = useCreateMailDomain({
+    onSuccess: (mailDomain) => {
+      router.push(`/mail-domains/${mailDomain.slug}`);
+    },
+  });
+
+  const onSubmitCallback = () => {
+    void methods.handleSubmit(({ name }, event) => {
+      event?.preventDefault();
+      void createMailDomain(name);
+    })();
+  };
+
+  const causes = error?.cause?.filter((cause) => {
+    const isFound = cause === 'Mail domain with this name already exists.';
+
+    if (isFound) {
+      methods.setError('name', {
+        type: 'manual',
+        message: t(
+          'This mail domain is already used. Please, choose another one.',
+        ),
+      });
+    }
+
+    return !isFound;
+  });
+
+  if (!methods) {
+    return null;
+  }
+
+  return (
+    <Modal
+      isOpen
+      leftActions={
+        <StyledLink href="/mail-domains">
+          <Button color="secondary" tabIndex={-1}>
+            {t('Cancel')}
+          </Button>
+        </StyledLink>
+      }
+      hideCloseButton
+      closeOnClickOutside
+      closeOnEsc
+      onClose={() => router.push('/mail-domains')}
+      rightActions={
+        <Button
+          onClick={onSubmitCallback}
+          disabled={!methods.watch('name') || isPending}
+        >
+          {t('Add the domain')}
+        </Button>
+      }
+      size={ModalSize.MEDIUM}
+      title={
+        <>
+          <MailDomainsLogo aria-hidden="true" />
+          <Text as="h3" $textAlign="center">
+            {t('Add your mail domain')}
+          </Text>
+        </>
+      }
+    >
+      <FormProvider {...methods}>
+        <form action="" id={FORM_ID}>
+          <Controller
+            control={methods.control}
+            name="name"
+            render={({ fieldState }) => (
+              <Input
+                fullWidth
+                type="text"
+                {...methods.register('name')}
+                aria-invalid={!!fieldState.error}
+                aria-required
+                required
+                autoComplete="off"
+                label={t('Domain name')}
+                state={fieldState.error ? 'error' : 'default'}
+                text={
+                  fieldState?.error?.message
+                    ? fieldState.error.message
+                    : t('Example: saint-laurent.fr')
+                }
+              />
+            )}
+          />
+        </form>
+        {!!causes?.length ? <TextErrors causes={causes} /> : null}
+
+        {isPending && (
+          <Box $align="center">
+            <Loader />
+          </Box>
+        )}
+      </FormProvider>
+    </Modal>
+  );
+};
--- a/src/frontend/apps/desk/src/features/mail-domains/components/panel/Panel.tsx
+++ b/src/frontend/apps/desk/src/features/mail-domains/components/panel/Panel.tsx
@@ -1,11 +1,10 @@
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';

+import IconOpenClose from '@/assets/icons/icon-open-close.svg';
 import { Box, BoxButton, Text } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';

-import IconOpenClose from '../../assets/icon-open-close.svg';
-
 import { ItemList } from './ItemList';
 import { PanelActions } from './PanelActions';

@@ -39,7 +38,7 @@ export const Panel = () => {
        transition: ${transition};
      `}
      $height="inherit"
-      aria-label="mail domains panel"
+      aria-label={t('Mail domains panel')}
      {...closedOverridingStyles}
    >
      <BoxButton
--- a/src/frontend/apps/desk/src/features/mail-domains/components/panel/PanelActions.tsx
+++ b/src/frontend/apps/desk/src/features/mail-domains/components/panel/PanelActions.tsx
@@ -1,13 +1,13 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';

-import { Box, BoxButton } from '@/components';
+import IconAdd from '@/assets/icons/icon-add.svg';
+import IconSort from '@/assets/icons/icon-sort.svg';
+import { Box, BoxButton, StyledLink, Text } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
 import { EnumMailDomainsOrdering } from '@/features/mail-domains';
 import { useMailDomainsStore } from '@/features/mail-domains/store/useMailDomainsStore';

-import IconSort from '../../assets/icon-sort.svg';
-
 export const PanelActions = () => {
  const { t } = useTranslation();
  const { changeOrdering, ordering } = useMailDomainsStore();
@@ -42,6 +42,16 @@ export const PanelActions = () => {
      >
        <IconSort width={30} height={30} aria-hidden="true" />
      </BoxButton>
+
+      <StyledLink href="/mail-domains/add/">
+        <Text
+          $margin="auto"
+          aria-label={t('Add your mail domain')}
+          $theme="primary"
+        >
+          <IconAdd width={27} height={27} aria-hidden="true" />
+        </Text>
+      </StyledLink>
    </Box>
  );
 };
--- a/src/frontend/apps/desk/src/features/mail-domains/components/panel/PanelItem.tsx
+++ b/src/frontend/apps/desk/src/features/mail-domains/components/panel/PanelItem.tsx
@@ -1,5 +1,6 @@
 import { useRouter } from 'next/router';
 import React from 'react';
+import { useTranslation } from 'react-i18next';

 import { Box, StyledLink, Text } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
@@ -11,6 +12,7 @@ interface MailDomainProps {
 }

 export const PanelMailDomains = ({ mailDomain }: MailDomainProps) => {
+  const { t } = useTranslation();
  const { colorsTokens } = useCunninghamTheme();
  const {
    query: { slug },
@@ -18,10 +20,23 @@ export const PanelMailDomains = ({ mailDomain }: MailDomainProps) => {

  const isActive = mailDomain.slug === slug;

+  const getStatusText = (status: MailDomain['status']) => {
+    switch (status) {
+      case 'pending':
+        return t('[pending]');
+      case 'enabled':
+        return t('[enabled]');
+      case 'disabled':
+        return t('[disabled]');
+      case 'failed':
+        return t('[failed]');
+    }
+  };
+
  const activeStyle = `
    border-right: 4px solid ${colorsTokens()['primary-600']};
    background: ${colorsTokens()['primary-400']};
-    span{
+     span {
      color: ${colorsTokens()['primary-text']};
    }
  `;
@@ -31,12 +46,14 @@ export const PanelMailDomains = ({ mailDomain }: MailDomainProps) => {
      border-right: 4px solid ${colorsTokens()['primary-400']};
      background: ${colorsTokens()['primary-300']};

-      span{
+       span {
        color: ${colorsTokens()['primary-text']};
      }
    }
  `;

+  const statusText = getStatusText(mailDomain.status);
+
  return (
    <Box
      $margin="none"
@@ -49,29 +66,44 @@ export const PanelMailDomains = ({ mailDomain }: MailDomainProps) => {
    >
      <StyledLink
        className="p-s pt-t pb-t"
+        $css="width: 100%"
        href={`/mail-domains/${mailDomain.slug}`}
      >
-        <Box $align="center" $direction="row" $gap="0.5rem">
-          <IconMailDomains
-            aria-hidden="true"
-            color={colorsTokens()['primary-500']}
-            className="p-t"
-            width="52"
-            style={{
-              borderRadius: '10px',
-              flexShrink: 0,
-              background: '#fff',
-              border: `1px solid ${colorsTokens()['primary-300']}`,
-            }}
-          />
-          <Text
-            $weight="bold"
-            $color={colorsTokens()['greyscale-600']}
-            $css={`
-              min-width: 14rem;
+        <Box
+          $position="relative"
+          $align="center"
+          $direction="row"
+          $justify="space-between"
+          $gap="1rem"
+        >
+          <Box $direction="row" $gap="0.5rem" $justify="left" $align="center">
+            <IconMailDomains
+              aria-hidden="true"
+              color={colorsTokens()['primary-500']}
+              className="p-t"
+              width="52"
+              style={{
+                borderRadius: '10px',
+                flexShrink: 0,
+                background: '#fff',
+                border: `1px solid ${colorsTokens()['primary-300']}`,
+              }}
+            />
+            <Text
+              $weight="bold"
+              $color={colorsTokens()['greyscale-600']}
+              $css={`
+              display: inline-block;
+              width: 10rem;
+              overflow: hidden;
+              text-overflow: ellipsis !important;
            `}
-          >
-            {mailDomain.name}
+            >
+              {mailDomain.name}
+            </Text>
+          </Box>
+          <Text $size="s" $theme="greyscale">
+            {statusText}
          </Text>
        </Box>
      </StyledLink>
--- a/src/frontend/apps/desk/src/features/mail-domains/types.tsx
+++ b/src/frontend/apps/desk/src/features/mail-domains/types.tsx
@@ -6,6 +6,7 @@ export interface MailDomain {
  created_at: string;
  updated_at: string;
  slug: string;
+  status: 'pending' | 'enabled' | 'failed' | 'disabled';
  abilities: {
    get: boolean;
    patch: boolean;
--- a/src/frontend/apps/desk/src/features/teams/teams-panel/assets/icon-open-close.svg
+++ b/src/frontend/apps/desk/src/features/teams/teams-panel/assets/icon-open-close.svg
@@ -1,4 +0,0 @@
-<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="12" cy="12" r="11.5" transform="rotate(-180 12 12)" fill="white" stroke="currentColor"/>
-<path d="M14.1683 16.232C14.4803 15.92 14.4803 15.416 14.1683 15.104L11.0643 12L14.1683 8.896C14.4803 8.584 14.4803 8.08 14.1683 7.768C13.8563 7.456 13.3523 7.456 13.0403 7.768L9.36834 11.44C9.05634 11.752 9.05634 12.256 9.36834 12.568L13.0403 16.24C13.3443 16.544 13.8563 16.544 14.1683 16.232Z" fill="currentColor"/>
-</svg>
--- a/src/frontend/apps/desk/src/features/teams/teams-panel/assets/icon-sort.svg
+++ b/src/frontend/apps/desk/src/features/teams/teams-panel/assets/icon-sort.svg
@@ -1,13 +0,0 @@
-<svg viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <g clip-path="url(#clip0_178_17837)">
-    <path
-      d="M11.25 3.75L6.25 8.7375H10V17.5H12.5V8.7375H16.25L11.25 3.75ZM20 21.2625V12.5H17.5V21.2625H13.75L18.75 26.25L23.75 21.2625H20Z"
-      fill="currentColor"
-    />
-  </g>
-  <defs>
-    <clipPath id="clip0_178_17837">
-      <rect width="30" height="30" fill="white" />
-    </clipPath>
-  </defs>
-</svg>
--- a/src/frontend/apps/desk/src/features/teams/teams-panel/components/Panel.tsx
+++ b/src/frontend/apps/desk/src/features/teams/teams-panel/components/Panel.tsx
@@ -1,11 +1,10 @@
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';

+import IconOpenClose from '@/assets/icons/icon-open-close.svg';
 import { Box, BoxButton, Text } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';

-import IconOpenClose from '../assets/icon-open-close.svg';
-
 import { PanelActions } from './PanelActions';
 import { TeamList } from './TeamList';

--- a/src/frontend/apps/desk/src/features/teams/teams-panel/components/PanelActions.tsx
+++ b/src/frontend/apps/desk/src/features/teams/teams-panel/components/PanelActions.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';

+import IconAdd from '@/assets/icons/icon-add.svg';
+import IconSort from '@/assets/icons/icon-sort.svg';
 import { Box, BoxButton, StyledLink } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
 import { TeamsOrdering } from '@/features/teams/team-management/api';

-import IconAdd from '../assets/icon-add.svg';
-import IconSort from '../assets/icon-sort.svg';
 import { useTeamStore } from '../store/useTeamsStore';

 export const PanelActions = () => {
--- a/src/frontend/apps/desk/src/i18n/translations.json
+++ b/src/frontend/apps/desk/src/i18n/translations.json
@@ -14,7 +14,9 @@
      "Add a member": "Ajouter un membre",
      "Add a team": "Ajouter un groupe",
      "Add members to the team": "Ajouter des membres à l'équipe",
+      "Add the domain": "Ajouter le domaine",
      "Add to group": "Ajouter au groupe",
+      "Add your mail domain": "Ajouter votre nom de domaine",
      "Address: National Agency for Territorial Cohesion - 20, avenue de Ségur TSA 10717 75 334 Paris Cedex 07 Paris": "Adresse : Agence Nationale de la Cohésion des Territoires - 20, avenue de Ségur TSA 10717 75 334 Paris Cedex 07",
      "Administration": "Administration",
      "All fields are mandatory.": "Tous les champs sont obligatoires.",
@@ -28,6 +30,7 @@
      "Close the teams panel": "Fermer le panneau des groupes",
      "Compliance status": "État de conformité",
      "Confirm deletion": "Confirmer la suppression",
+      "Contact our support at \"suiteterritoriale@anct.gouv.fr\"": "Contacter notre support à \"suiteterritoriale@anct.gouv.fr\"",
      "Content modal to delete the team": "Contenu modal pour supprimer le groupe",
      "Content modal to update the team": "Contenu modal pour mettre à jour le groupe",
      "Cookies placed": "Cookies déposés",
@@ -45,12 +48,14 @@
      "Defender of Rights - Free response - 71120 75342 Paris CEDEX 07": "Défenseur des droits\nLibre réponse 71120 75342 Paris CEDEX 07",
      "Delete the team": "Supprimer le groupe",
      "Deleting the {{teamName}} team": "Suppression du groupe {{teamName}}",
+      "Domain name": "Nom de domaine",
      "E-mail:": "E-mail:",
      "E.g. : jean.dupont@mail.fr": "Ex. : jean.dupont@mail.fr",
      "Email address prefix": "Préfixe de l'adresse mail",
      "Emails": "Emails",
      "Empty team icon": "Icône équipe vide",
      "Enter the new name of the selected team": "Entrez le nouveau nom du groupe sélectionné",
+      "Example: saint-laurent.fr": "Exemple : saint-laurent.fr",
      "Failed to add {{name}} in the team": "Impossible d'ajouter {{name}} au groupe",
      "Failed to create the invitation for {{email}}": "Impossible de créer l'invitation pour {{email}}",
      "Find a member to add to the team": "Trouver un membre à ajouter au groupe",
@@ -78,6 +83,7 @@
      "List members card": "Carte liste des membres",
      "Logout": "Se déconnecter",
      "Mail Domains": "Domaines de messagerie",
+      "Mail domains panel": "Panel des domaines de messagerie",
      "Mailbox created!": "Boîte mail créée !",
      "Mailboxes list": "Liste des boîtes mail",
      "Marianne Logo": "Logo Marianne",
@@ -127,6 +133,7 @@
      "Team name": "Nom du groupe",
      "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 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 member has been removed from the team": "Le membre a été supprimé de votre groupe",
      "The role has been updated": "Le rôle a bien été mis à jour",
      "The team has been removed.": "Le groupe a été supprimé.",
@@ -134,7 +141,9 @@
      "The team in charge of the digital workspace \"La Suite numérique\" can be contacted directly at": "L'équipe responsable de l'espace de travail numérique \"La Suite numérique\" peut être contactée directement à l'adresse",
      "This accessibility statement applies to La Régie (Suite Territoriale)": "Cette déclaration d’accessibilité s’applique à La Régie (Suite Territoriale)",
      "This allows us to measure the number of visits and understand which pages are the most viewed.": "Cela nous permet de mesurer le nombre de visites et de comprendre quelles pages sont les plus consultées.",
+      "This domain name is deactivated. No new mailboxes can be created.": "Ce nom de domaine est désactivé. Aucune nouvelle boîte mail ne peut être créée.",
      "This email prefix is already used.": "Ce préfixe d'email est déjà utilisé.",
+      "This mail domain is already used. Please, choose another one.": "Ce domaine de messagerie est déjà utilisé. Veuillez en choisir un autre.",
      "This procedure is to be used in the following case: you have reported to the website \n            manager an accessibility defect which prevents you from accessing content or one of the \n            portal's services and you have not obtained a satisfactory response.": "Cette procédure est à utiliser dans le cas suivant : vous avez signalé au responsable du site internet un défaut d’accessibilité qui vous empêche d’accéder à un contenu ou à un des services du portail et vous n’avez pas obtenu de réponse satisfaisante.",
      "This site does not display a cookie consent banner, why?": "Ce site n'affiche pas de bannière de consentement des cookies, pourquoi?",
      "This site places a small text file (a \"cookie\") on your computer when you visit it.": "Ce site place un petit fichier texte (un « cookie ») sur votre ordinateur lorsque vous le visitez.",
@@ -154,6 +163,11 @@
      "You cannot remove other owner.": "Vous ne pouvez pas supprimer un autre propriétaire.",
      "You cannot update the role of other owner.": "Vous ne pouvez pas mettre à jour les rôles d'autre propriétaire.",
      "You must have minimum 1 character": "Vous devez entrer au moins 1 caractère",
+      "Your domain name is being validated.  You will not be able to create mailboxes until your domain name has been validated by our team.": "Votre nom de domaine est en cours de validation. Vous ne pourrez créer de boîtes mail que lorsque votre nom de domaine sera validé par notre équipe.",
+      "[disabled]": "[désactivé]",
+      "[enabled]": "[actif]",
+      "[failed]": "[erroné]",
+      "[pending]": "[en attente]",
      "accessibility-contact-defenseurdesdroits": "Contacter le délégué du<1>Défenseur des droits dans votre région</1>",
      "accessibility-form-defenseurdesdroits": "Écrire un message au<1>Défenseur des droits</1>",
      "mail domains list loading": "chargement de la liste des domaines de messagerie",
--- a/src/frontend/apps/desk/src/pages/mail-domains/add.tsx
+++ b/src/frontend/apps/desk/src/pages/mail-domains/add.tsx
@@ -0,0 +1,20 @@
+import React, { ReactElement } from 'react';
+
+import { Box } from '@/components';
+import { MailDomainsLayout } from '@/features/mail-domains';
+import { ModalCreateMailDomain } from '@/features/mail-domains/components/ModalAddMailDomain';
+import { NextPageWithLayout } from '@/types/next';
+
+const Page: NextPageWithLayout = () => {
+  return (
+    <Box $padding="large" $height="inherit">
+      <ModalCreateMailDomain />
+    </Box>
+  );
+};
+
+Page.getLayout = function getLayout(page: ReactElement) {
+  return <MailDomainsLayout>{page}</MailDomainsLayout>;
+};
+
+export default Page;
--- a/src/frontend/apps/desk/src/pages/mail-domains/index.tsx
+++ b/src/frontend/apps/desk/src/pages/mail-domains/index.tsx
@@ -1,10 +1,29 @@
-import { ReactElement } from 'react';
+import { Button } from '@openfun/cunningham-react';
+import { useRouter } from 'next/router';
+import type { ReactElement } from 'react';
+import { useTranslation } from 'react-i18next';
+import styled from 'styled-components';

+import { Box } from '@/components';
 import { MailDomainsLayout } from '@/features/mail-domains';
 import { NextPageWithLayout } from '@/types/next';

+const StyledButton = styled(Button)`
+  width: fit-content;
+`;
+
 const Page: NextPageWithLayout = () => {
-  return null;
+  const { t } = useTranslation();
+
+  const router = useRouter();
+
+  return (
+    <Box $align="center" $justify="center" $height="inherit">
+      <StyledButton onClick={() => void router.push('/mail-domains/add')}>
+        {t('Add your mail domain')}
+      </StyledButton>
+    </Box>
+  );
 };

 Page.getLayout = function getLayout(page: ReactElement) {