Отделяем шапку письма в отдельный компонент

src/components/header/Header.jsx

@@ -0,0 +1,28 @@
+import { Table } from 'components/table';
+import { FormattedMessage as Message } from 'react-intl';
+import { PropTypes } from 'react';
+
+import styles from './styles';
+
+import messages from './messages.intl.json';
+
+export default function Userbar({username, title}) {
+    return (
+        <Table style={styles.headerImage}>
+            <tr>
+                <td style={styles.headerTextContainer}>
+                    <div style={styles.welcomeUsername}>
+                        <Message {...messages.hello_username} values={{username}} />
+                    </div>
+
+                    {title}
+                </td>
+            </tr>
+        </Table>
+    );
+}
+
+Userbar.propTypes = {
+    username: PropTypes.string,
+    title: PropTypes.node
+};

src/components/header/index.js

@@ -0,0 +1 @@
+export Header from './Header';

src/components/header/messages.intl.json

@@ -0,0 +1,3 @@
+{
+    "hello_username": "Hello, {username}"
+}

src/components/header/styles.js

@@ -0,0 +1,16 @@
+import background from './background.jpg';
+
+export default {
+    headerImage: {
+        height: '200px',
+        backgroundImage: `url(${background})`
+    },
+    headerTextContainer: {
+        color: '#fff',
+        textAlign: 'center',
+        verticalAlign: 'middle'
+    },
+    welcomeUsername: {
+        fontSize: '20px'
+    },
+};

src/emails/register/Register.jsx

@@ -4,6 +4,7 @@ import { FormattedMessage as Message } from 'react-intl';
 
 import { Userbar } from 'components/userbar';
 import { Table } from 'components/table';
+import { Header } from 'components/header';
 import { Button } from 'components/button';
 import { Input } from 'components/input';
 import { BitmapText } from 'components/text';
@@ -19,19 +20,12 @@ export default function Register({username, link, code}) {
     return (
         <div>
             <Userbar />
-            <Table style={styles.headerImage}>
-                <tr>
-                    <td style={styles.headerTextContainer}>
-                        <div style={styles.welcomeUsername}>
-                            <Message {...messages.hello_username} values={{username}} />
-                        </div>
 
-                        <BitmapText message={messages.welcome_image} style={{
-                            verticalAlign: 'middle'
-                        }} />
-                    </td>
-                </tr>
-            </Table>
+            <Header username={username} title={
+                <BitmapText message={messages.welcome_image} style={{
+                    verticalAlign: 'middle'
+                }} />
+            } />
 
             <div style={styles.content}>
                 <Table>

src/emails/register/messages.intl.json

@@ -1,5 +1,4 @@
 {
-    "hello_username": "Hello, {username}",
     "welcome_image": "Welcome to Ely.by",
     "we_glad_to_see_you": "We glad to see you among the users of Ely.by. You almost reached the final point, it remains only to confirm your E-mail address.For doing it, please push a button under the text.",
     "confirm_email_image": "Confirm E‑mail",

src/emails/register/styles.js

@@ -1,19 +1,4 @@
-import background from './images/headerBackground.jpg';
-
 export default {
-    headerImage: {
-        height: '200px',
-        backgroundImage: `url(${background})`
-    },
-    headerTextContainer: {
-        color: '#fff',
-        textAlign: 'center',
-        verticalAlign: 'middle'
-    },
-    welcomeUsername: {
-        fontSize: '20px'
-    },
-
     content: {
         background: '#fff',
         padding: '50px',