🌐(frontend) add Content-Language on invitation endpoint

We want to adapt the email language depend the website
choosen language. We sent the language in the request
header, the backend will use this information to send
the email in the correct language.

src/frontend/apps/impress/src/features/docs/members/members-add/api/useCreateDocInvitation.tsx

@@ -3,6 +3,7 @@ import { useMutation } from '@tanstack/react-query';
 import { APIError, errorCauses, fetchAPI } from '@/api';
 import { User } from '@/core/auth';
 import { Doc, Role } from '@/features/docs/doc-management';
+import { ContentLanguage } from '@/i18n/types';
 
 import { DocInvitation, OptionType } from '../types';
 
@@ -10,15 +11,20 @@ interface CreateDocInvitationParams {
   email: User['email'];
   role: Role;
   docId: Doc['id'];
+  contentLanguage: ContentLanguage;
 }
 
 export const createDocInvitation = async ({
   email,
   role,
   docId,
+  contentLanguage,
 }: CreateDocInvitationParams): Promise<DocInvitation> => {
   const response = await fetchAPI(`documents/${docId}/invitations/`, {
     method: 'POST',
+    headers: {
+      'Content-Language': contentLanguage,
+    },
     body: JSON.stringify({
       email,
       role,

src/frontend/apps/impress/src/features/docs/members/members-add/components/AddMembers.tsx

@@ -9,6 +9,7 @@ import { useTranslation } from 'react-i18next';
 import { APIError } from '@/api';
 import { Box, Card, IconBG } from '@/components';
 import { Doc, Role } from '@/features/docs/doc-management';
+import { useLanguage } from '@/i18n/hooks/useLanguage';
 
 import { useCreateDocAccess, useCreateInvitation } from '../api';
 import {
@@ -33,6 +34,7 @@ interface ModalAddMembersProps {
 }
 
 export const AddMembers = ({ currentRole, doc }: ModalAddMembersProps) => {
+  const { contentLanguage } = useLanguage();
   const { t } = useTranslation();
   const [selectedUsers, setSelectedUsers] = useState<OptionsSelect>([]);
   const [selectedRole, setSelectedRole] = useState<Role>();
@@ -51,6 +53,7 @@ export const AddMembers = ({ currentRole, doc }: ModalAddMembersProps) => {
             email: selectedUser.value.email,
             role: selectedRole,
             docId: doc.id,
+            contentLanguage,
           });
           break;
 

src/frontend/apps/impress/src/i18n/hooks/useLanguage.tsx

@@ -0,0 +1,15 @@
+import { useTranslation } from 'react-i18next';
+
+import { ContentLanguage } from '../types';
+
+export const useLanguage = (): {
+  language: string;
+  contentLanguage: ContentLanguage;
+} => {
+  const { i18n } = useTranslation();
+
+  return {
+    language: i18n.language,
+    contentLanguage: i18n.language === 'fr' ? 'fr-fr' : 'en-us',
+  };
+};

src/frontend/apps/impress/src/i18n/types.ts

@@ -0,0 +1,2 @@
+// See: https://github.com/numerique-gouv/impress/blob/ac58341984c99c10ebfac7f8bbe1e8756c48e4d4/src/backend/impress/settings.py#L156-L161
+export type ContentLanguage = 'en-us' | 'fr-fr';