have footer on emails (#11300)

# ISSUE 

- Closes #9622

---------

Co-authored-by: Félix Malfait <felix@twenty.com>

packages/twenty-emails/src/emails/validate-approved-access-domain.email.tsx

@@ -1,5 +1,5 @@
-import { t } from '@lingui/core/macro';
-import { Trans } from '@lingui/react/macro';
+import { i18n } from '@lingui/core';
+import { Trans } from '@lingui/react';
 import { Img } from '@react-email/components';
 import { emailTheme } from 'src/common-style';
 
@@ -10,7 +10,6 @@ import { HighlightedText } from 'src/components/HighlightedText';
 import { Link } from 'src/components/Link';
 import { MainText } from 'src/components/MainText';
 import { Title } from 'src/components/Title';
-import { WhatIsTwenty } from 'src/components/WhatIsTwenty';
 import { capitalize } from 'src/utils/capitalize';
 import { APP_LOCALES } from 'twenty-shared/translations';
 import { getImageAbsoluteURI } from 'twenty-shared/utils';
@@ -40,30 +39,61 @@ export const SendApprovedAccessDomainValidation = ({
     ? getImageAbsoluteURI({ imageUrl: workspace.logo, baseUrl: serverUrl })
     : null;
 
+  const senderName = capitalize(sender.firstName);
+  const senderEmail = sender.email;
+
   return (
     <BaseEmail width={333} locale={locale}>
-      <Title value={t`Validate domain`} />
+      <Title value={i18n._('Validate domain')} />
       <MainText>
-        {capitalize(sender.firstName)} (
-        <Link
-          href={`mailto:${sender.email}`}
-          value={sender.email}
-          color={emailTheme.font.colors.blue}
+        <Trans
+          id="{senderName} (<0>{senderEmail}</0>): Please validate this domain to allow users with <1>@{domain}</1> email addresses to join your workspace without requiring an invitation."
+          values={{ senderName, senderEmail, domain }}
+          components={{
+            0: (
+              <Link
+                href={`mailto:${senderEmail}`}
+                value={senderEmail}
+                color={emailTheme.font.colors.blue}
+              />
+            ),
+            1: <b />,
+          }}
         />
-        ) <Trans>Please validate this domain to allow users with</Trans>{' '}
-        <b>@{domain}</b>{' '}
-        <Trans>
-          email addresses to join your workspace without requiring an
-          invitation.
-        </Trans>
         <br />
       </MainText>
       <HighlightedContainer>
-        {workspaceLogo && <Img src={workspaceLogo} width={40} height={40} />}
-        {workspace.name && <HighlightedText value={workspace.name} />}
-        <CallToAction href={link} value={t`Validate domain`} />
+        {workspaceLogo ? (
+          <Img
+            src={workspaceLogo}
+            width={40}
+            height={40}
+            alt="Workspace logo"
+          />
+        ) : (
+          <></>
+        )}
+        {workspace.name ? <HighlightedText value={workspace.name} /> : <></>}
+        <CallToAction href={link} value={i18n._('Validate domain')} />
       </HighlightedContainer>
-      <WhatIsTwenty />
     </BaseEmail>
   );
 };
+
+SendApprovedAccessDomainValidation.PreviewProps = {
+  link: 'https://app.twenty.com/validate-domain',
+  domain: 'example.com',
+  workspace: {
+    name: 'Acme Inc.',
+    logo: 'https://fakeimg.pl/200x200/?text=ACME&font=lobster',
+  },
+  sender: {
+    email: 'john.doe@example.com',
+    firstName: 'John',
+    lastName: 'Doe',
+  },
+  serverUrl: 'https://app.twenty.com',
+  locale: 'en',
+} as SendApprovedAccessDomainValidationProps;
+
+export default SendApprovedAccessDomainValidation;