✨(frontend) add support email field on domain creation form

Add new field to give email of support to manage actions
required on domain.

CHANGELOG.md

@@ -12,6 +12,7 @@ and this project adheres to
 
 ### Added
 
+- ✨(frontend) add support email field on domain creation form
 - ✨(domains) add support email field on MailDomain
 - ✨(api) add count mailboxes to MailDomain serializer
 - ✨(dimail) manage 'action required' status for MailDomain

src/frontend/apps/desk/src/features/mail-domains/access-management/__tests__/accesses.test.tsx

@@ -99,6 +99,7 @@ describe('MailDomainAccessesPage', () => {
       status: 'enabled',
       created_at: new Date().toISOString(),
       updated_at: new Date().toISOString(),
+      support_email: '[email protected]',
       abilities: {
         get: true,
         patch: true,

src/frontend/apps/desk/src/features/mail-domains/access-management/components/__tests__/AccessAction.test.tsx

@@ -25,6 +25,7 @@ describe('AccessAction', () => {
     status: 'enabled',
     created_at: new Date().toISOString(),
     updated_at: new Date().toISOString(),
+    support_email: '[email protected]',
     abilities: {
       get: true,
       patch: true,

src/frontend/apps/desk/src/features/mail-domains/access-management/components/__tests__/AccessesContent.test.tsx

@@ -31,6 +31,7 @@ describe('AccessesContent', () => {
     status: 'enabled',
     created_at: new Date().toISOString(),
     updated_at: new Date().toISOString(),
+    support_email: '[email protected]',
     abilities: {
       get: true,
       patch: true,

src/frontend/apps/desk/src/features/mail-domains/access-management/components/__tests__/AccessesGrid.test.tsx

@@ -26,6 +26,7 @@ const mockMailDomain: MailDomain = {
   status: 'enabled',
   created_at: new Date().toISOString(),
   updated_at: new Date().toISOString(),
+  support_email: '[email protected]',
   abilities: {
     manage_accesses: true,
     get: true,

src/frontend/apps/desk/src/features/mail-domains/access-management/components/__tests__/ModalDelete.test.tsx

@@ -36,6 +36,7 @@ describe('ModalDelete', () => {
     status: 'enabled',
     created_at: new Date().toISOString(),
     updated_at: new Date().toISOString(),
+    support_email: '[email protected]',
     abilities: {
       get: true,
       patch: true,

src/frontend/apps/desk/src/features/mail-domains/domains/__tests__/ModalAddMailDomain.test.tsx

@@ -19,6 +19,7 @@ describe('ModalAddMailDomain', () => {
     modalElement: screen.getByText('Add a mail domain'),
     formTag: screen.getByTitle('Mail domain addition form'),
     inputName: screen.getByLabelText(/Domain name/i),
+    inputSupportEmail: screen.getByLabelText(/Support email address/i),
     buttonCancel: screen.getByRole('button', { name: /Cancel/i, hidden: true }),
     buttonSubmit: screen.getByRole('button', {
       name: /Add the domain/i,
@@ -37,12 +38,19 @@ describe('ModalAddMailDomain', () => {
   it('renders all the elements', () => {
     render(<ModalAddMailDomain />, { wrapper: AppWrapper });
 
-    const { modalElement, formTag, inputName, buttonCancel, buttonSubmit } =
-      getElements();
+    const {
+      modalElement,
+      formTag,
+      inputName,
+      inputSupportEmail,
+      buttonCancel,
+      buttonSubmit,
+    } = getElements();
 
     expect(modalElement).toBeVisible();
     expect(formTag).toBeVisible();
     expect(inputName).toBeVisible();
+    expect(inputSupportEmail).toBeVisible();
     expect(screen.getByText('Example: saint-laurent.fr')).toBeVisible();
     expect(buttonCancel).toBeVisible();
     expect(buttonSubmit).toBeVisible();
@@ -104,16 +112,18 @@ describe('ModalAddMailDomain', () => {
 
     render(<ModalAddMailDomain />, { wrapper: AppWrapper });
 
-    const { inputName, buttonSubmit } = getElements();
+    const { inputName, inputSupportEmail, buttonSubmit } = getElements();
 
     await user.type(inputName, 'domain.fr');
+    await user.type(inputSupportEmail, '[email protected]');
 
     await user.click(buttonSubmit);
 
     expect(fetchMock.lastUrl()).toContain('/mail-domains/');
     expect(fetchMock.lastOptions()).toEqual({
       body: JSON.stringify({
         name: 'domain.fr',
+        support_email: '[email protected]',
       }),
       credentials: 'include',
       headers: { 'Content-Type': 'application/json' },
@@ -123,29 +133,6 @@ describe('ModalAddMailDomain', () => {
     expect(mockPush).toHaveBeenCalledWith(`/mail-domains/domainfr`);
   });
 
-  it('submits the form on key enter press', async () => {
-    fetchMock.mock(`end:mail-domains/`, 201);
-
-    const user = userEvent.setup();
-
-    render(<ModalAddMailDomain />, { wrapper: AppWrapper });
-
-    const { inputName } = getElements();
-
-    await user.type(inputName, 'domain.fr');
-    await user.type(inputName, '{enter}');
-
-    expect(fetchMock.lastUrl()).toContain('/mail-domains/');
-    expect(fetchMock.lastOptions()).toEqual({
-      body: JSON.stringify({
-        name: 'domain.fr',
-      }),
-      credentials: 'include',
-      headers: { 'Content-Type': 'application/json' },
-      method: 'POST',
-    });
-  });
-
   it('displays right error message error when maildomain name is already used', async () => {
     fetchMock.mock(`end:mail-domains/`, {
       status: 400,
@@ -158,10 +145,10 @@ describe('ModalAddMailDomain', () => {
 
     render(<ModalAddMailDomain />, { wrapper: AppWrapper });
 
-    const { inputName, buttonSubmit } = getElements();
+    const { inputName, inputSupportEmail, buttonSubmit } = getElements();
 
     await user.type(inputName, 'domain.fr');
-
+    await user.type(inputSupportEmail, '[email protected]');
     await user.click(buttonSubmit);
 
     await waitFor(() => {
@@ -175,6 +162,8 @@ describe('ModalAddMailDomain', () => {
     expect(inputName).toHaveFocus();
 
     await user.type(inputName, 'domain2.fr');
+    //await user.type(inputSupportEmail, '[email protected]');
+
     expect(buttonSubmit).toBeEnabled();
   });
 
@@ -190,9 +179,10 @@ describe('ModalAddMailDomain', () => {
 
     render(<ModalAddMailDomain />, { wrapper: AppWrapper });
 
-    const { inputName, buttonSubmit } = getElements();
+    const { inputName, inputSupportEmail, buttonSubmit } = getElements();
 
     await user.type(inputName, 'domainfr');
+    await user.type(inputSupportEmail, '[email protected]');
 
     await user.click(buttonSubmit);
 
@@ -220,9 +210,10 @@ describe('ModalAddMailDomain', () => {
 
     render(<ModalAddMailDomain />, { wrapper: AppWrapper });
 
-    const { inputName, buttonSubmit } = getElements();
+    const { inputName, inputSupportEmail, buttonSubmit } = getElements();
 
     await user.type(inputName, 'domain.fr');
+    await user.type(inputSupportEmail, '[email protected]');
 
     await user.click(buttonSubmit);
 

src/frontend/apps/desk/src/features/mail-domains/domains/api/useAddMailDomain.tsx

@@ -8,16 +8,16 @@ import { KEY_LIST_MAIL_DOMAIN } from './useMailDomains';
 
 export interface AddMailDomainParams {
   name: string;
+  supportEmail: string;
 }
 
-export const addMailDomain = async (
-  name: AddMailDomainParams['name'],
-): Promise<MailDomain> => {
+export const addMailDomain = async ({
+  name,
+  supportEmail,
+}: AddMailDomainParams): Promise<MailDomain> => {
   const response = await fetchAPI(`mail-domains/`, {
     method: 'POST',
-    body: JSON.stringify({
-      name,
-    }),
+    body: JSON.stringify({ name, support_email: supportEmail }),
   });
 
   if (!response.ok) {
@@ -38,7 +38,7 @@ export const useAddMailDomain = ({
   onError: (error: APIError) => void;
 }) => {
   const queryClient = useQueryClient();
-  return useMutation<MailDomain, APIError, string>({
+  return useMutation<MailDomain, APIError, AddMailDomainParams>({
     mutationFn: addMailDomain,
     onSuccess: (data) => {
       void queryClient.invalidateQueries({

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

@@ -2,10 +2,16 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { Button, Input, Loader, ModalSize } from '@openfun/cunningham-react';
 import { useRouter } from 'next/navigation';
 import React, { useState } from 'react';
-import { Controller, FormProvider, useForm } from 'react-hook-form';
+import {
+  Controller,
+  FormProvider,
+  UseFormReturn,
+  useForm,
+} from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
 
+import { APIError } from '@/api';
 import { parseAPIError } from '@/api/parseAPIError';
 import { Box, Text, TextErrors } from '@/components';
 import { Modal } from '@/components/Modal';
@@ -23,12 +29,14 @@ export const ModalAddMailDomain = () => {
 
   const addMailDomainValidationSchema = z.object({
     name: z.string().min(1, t('Example: saint-laurent.fr')),
+    supportEmail: z.string().email(t('Please enter a valid email address')),
   });
 
-  const methods = useForm<{ name: string }>({
+  const methods = useForm<{ name: string; supportEmail: string }>({
     delayError: 0,
     defaultValues: {
       name: '',
+      supportEmail: '',
     },
     mode: 'onChange',
     reValidateMode: 'onChange',
@@ -39,7 +47,7 @@ export const ModalAddMailDomain = () => {
     onSuccess: (mailDomain) => {
       router.push(`/mail-domains/${mailDomain.slug}`);
     },
-    onError: (error) => {
+    onError: (error: APIError) => {
       const unhandledCauses = parseAPIError({
         error,
         errorParams: [
@@ -87,8 +95,8 @@ export const ModalAddMailDomain = () => {
   const onSubmitCallback = (event: React.FormEvent) => {
     event.preventDefault();
 
-    void methods.handleSubmit(({ name }) => {
-      void addMailDomain(name);
+    void methods.handleSubmit(({ name, supportEmail }) => {
+      void addMailDomain({ name, supportEmail });
     })();
   };
 
@@ -167,6 +175,14 @@ export const ModalAddMailDomain = () => {
               />
             )}
           />
+          <Box $margin={{ vertical: '10px' }}>
+            <FieldMailBox
+              name="supportEmail"
+              label={t('Support email address')}
+              methods={methods}
+              text={t('E.g. : [email protected]')}
+            />
+          </Box>
         </form>
 
         {isPending && (
@@ -178,3 +194,33 @@ export const ModalAddMailDomain = () => {
     </Modal>
   );
 };
+
+interface FieldMailBoxProps {
+  name: 'name' | 'supportEmail';
+  label: string;
+  methods: UseFormReturn<{
+    name: string;
+    supportEmail: string;
+  }>;
+  text: string;
+}
+
+const FieldMailBox = ({ name, label, methods, text }: FieldMailBoxProps) => {
+  return (
+    <Controller
+      control={methods.control}
+      name={name}
+      render={({ fieldState }) => (
+        <Input
+          aria-invalid={!!fieldState.error}
+          aria-required
+          required
+          label={label}
+          state={fieldState.error ? 'error' : 'default'}
+          text={fieldState?.error?.message ? fieldState.error.message : text}
+          {...methods.register(name)}
+        />
+      )}
+    />
+  );
+};

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

@@ -7,6 +7,7 @@ export interface MailDomain {
   updated_at: string;
   slug: string;
   status: 'pending' | 'enabled' | 'failed' | 'disabled';
+  support_email: string;
   abilities: {
     get: boolean;
     patch: boolean;

src/frontend/apps/desk/src/features/mail-domains/mailboxes/components/__tests__/MailDomainsContent.test.tsx

@@ -14,6 +14,7 @@ const mockMailDomain: MailDomain = {
   name: 'example.com',
   slug: 'example-com',
   status: 'enabled',
+  support_email: '[email protected]',
   abilities: {
     get: true,
     patch: true,
@@ -31,6 +32,7 @@ const mockMailDomainAsViewer: MailDomain = {
   name: 'example.com',
   slug: 'example-com',
   status: 'enabled',
+  support_email: '[email protected]',
   abilities: {
     get: true,
     patch: false,

src/frontend/apps/desk/src/features/mail-domains/mailboxes/components/__tests__/ModalCreateMailbox.test.tsx

@@ -14,6 +14,7 @@ const mockMailDomain: MailDomain = {
   status: 'enabled',
   created_at: new Date().toISOString(),
   updated_at: new Date().toISOString(),
+  support_email: '[email protected]',
   abilities: {
     get: true,
     patch: true,