fix: html language and direction in emails (#512)

BearStudio · Jul 29, 2024 · 4efbee7 · 4efbee7
1 parent 8edad0d
commit 4efbee7
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 7 deletions.
diff --git a/src/emails/components/Layout.tsx b/src/emails/components/Layout.tsx
@@ -3,15 +3,22 @@ import { ReactNode } from 'react';
 import { Body, Head, Html, Preview } from '@react-email/components';
 
 import { styles } from '@/emails/styles';
+import { AVAILABLE_LANGUAGES } from '@/lib/i18n/constants';
 
 interface LayoutProps {
  preview: string;
  children: ReactNode;
+ language: string;
 }
 
-export const Layout = ({ preview, children }: LayoutProps) => {
+export const Layout = ({ preview, children, language }: LayoutProps) => {
  return (
- <Html>
+ <Html
+ lang={language}
+ dir={
+ AVAILABLE_LANGUAGES.find(({ key }) => key === language)?.dir ?? 'ltr'
+ }
+ >
  <Head>
  <meta name="viewport" content="width=device-width" />
  </Head>

diff --git a/src/emails/templates/delete-account-code.tsx b/src/emails/templates/delete-account-code.tsx
@@ -19,7 +19,10 @@ export const EmailDeleteAccountCode = ({
 }: EmailDeleteAccountCodeProps) => {
  i18n.changeLanguage(language);
  return (
- <Layout preview={i18n.t('emails:deleteAccountCode.preview')}>
+ <Layout
+ preview={i18n.t('emails:deleteAccountCode.preview')}
+ language={language}
+ >
  <Container style={styles.container}>
  <Heading style={styles.h1}>
  {i18n.t('emails:deleteAccountCode.title')}

diff --git a/src/emails/templates/email-address-change.tsx b/src/emails/templates/email-address-change.tsx
@@ -19,7 +19,10 @@ export const EmailAddressChange = ({
 }: EmailAddressChangeProps) => {
  i18n.changeLanguage(language);
  return (
- <Layout preview={i18n.t('emails:emailAddressChange.preview')}>
+ <Layout
+ preview={i18n.t('emails:emailAddressChange.preview')}
+ language={language}
+ >
  <Container style={styles.container}>
  <Heading style={styles.h1}>
  {i18n.t('emails:emailAddressChange.title')}

diff --git a/src/emails/templates/login-code.tsx b/src/emails/templates/login-code.tsx
@@ -19,7 +19,7 @@ export const EmailLoginCode = ({
 }: EmailLoginCodeProps) => {
  i18n.changeLanguage(language);
  return (
- <Layout preview={i18n.t('emails:loginCode.preview')}>
+ <Layout preview={i18n.t('emails:loginCode.preview')} language={language}>
  <Container style={styles.container}>
  <Heading style={styles.h1}>{i18n.t('emails:loginCode.title')}</Heading>
  <Section style={styles.section}>

diff --git a/src/emails/templates/login-not-found.tsx b/src/emails/templates/login-not-found.tsx
@@ -19,7 +19,10 @@ type EmailLoginNotFoundProps = {
 export const EmailLoginNotFound = ({ language }: EmailLoginNotFoundProps) => {
  i18n.changeLanguage(language);
  return (
- <Layout preview={i18n.t('emails:loginNotFound.preview')}>
+ <Layout
+ preview={i18n.t('emails:loginNotFound.preview')}
+ language={language}
+ >
  <Container style={styles.container}>
  <Heading style={styles.h1}>
  {i18n.t('emails:loginNotFound.title')}

diff --git a/src/emails/templates/register-code.tsx b/src/emails/templates/register-code.tsx
@@ -19,7 +19,7 @@ export const EmailRegisterCode = ({
 }: EmailRegisterCodeProps) => {
  i18n.changeLanguage(language);
  return (
- <Layout preview={i18n.t('emails:registerCode.preview')}>
+ <Layout preview={i18n.t('emails:registerCode.preview')} language={language}>
  <Container style={styles.container}>
  <Heading style={styles.h1}>
  {i18n.t('emails:registerCode.title')}