Localization support for images

src/components/text/BitmapText.jsx

@@ -13,10 +13,17 @@ export function BitmapText(props) {
         throw new Error('The message.id must be contain 3 parts separated by dots');
     }
 
-    const src = require(`emails/${parts[1]}/images/${props.intl.locale}/${parts[2]}.png`);
+    let src;
-    // TODO: we can improve this loader in future by adding an option to disable file emitting
+    let size;
-    // because this thing is handled by url-loader
+    try {
-    const size = require(`image-size!emails/${parts[1]}/images/${props.intl.locale}/${parts[2]}.png`);
+        src = require(`emails/${parts[1]}/images/${props.intl.locale}/${parts[2]}.png`);
+        // TODO: we can improve this loader in future by adding an option to disable file emitting
+        // because this thing is handled by url-loader
+        size = require(`image-size!emails/${parts[1]}/images/${props.intl.locale}/${parts[2]}.png`);
+    } catch (err) { // fallback to default locale
+        src = require(`emails/${parts[1]}/images/${props.intl.defaultLocale}/${parts[2]}.png`);
+        size = require(`image-size!emails/${parts[1]}/images/${props.intl.defaultLocale}/${parts[2]}.png`);
+    }
 
     const width = props.retina ? size.width / 2 : size.width;
     const height = props.retina ? size.height / 2 : size.height;
@@ -26,7 +33,7 @@ export function BitmapText(props) {
             <img src={src} alt={message} style={{
                 width: `${width}px`,
                 height: `${height}px`,
-                verticalAlign: 'middle'
+                ...props.style
             }}/>
         }</Message>
     );
@@ -39,11 +46,13 @@ BitmapText.propTypes = {
             id: PropTypes.string
         })
     ]).isRequired,
+    style: PropTypes.object, // eslint-disable-line react/forbid-prop-types
     retina: PropTypes.bool
 };
 
 BitmapText.defaultProps = {
-    retina: true
+    retina: true,
+    style: {}
 };
 
 import { injectIntl, intlShape } from 'react-intl';

src/emails/register/Register.jsx

@@ -15,13 +15,6 @@ import violetManImage from './images/violetMan.png';
 import orangeManImage from './images/orangeMan.png';
 import darkBlueManImage from './images/darkBlueMan.png';
 
-import confirmEmailImage from './images/ru/confirmEmail.png';
-import whatsNextImage from './images/ru/whatsNext.png';
-import chooseYouSkin from './images/ru/chooseYouSkin.png';
-import installOurPatch from './images/ru/installOurPatch.png';
-import useTLauncher from './images/ru/useTlauncher.png';
-import footerLogoImage from './images/ru/footerLogo.png';
-
 export default function Register({username, link, code}) {
     return (
         <div>
@@ -33,7 +26,9 @@ export default function Register({username, link, code}) {
                             <Message {...messages.hello_username} values={{username}} />
                         </div>
 
-                        <BitmapText message={messages.welcome_image} />
+                        <BitmapText message={messages.welcome_image} style={{
+                            verticalAlign: 'middle'
+                        }} />
                     </td>
                 </tr>
             </Table>
@@ -54,15 +49,9 @@ export default function Register({username, link, code}) {
                         }}>
                             <a href={link}>
                                 <Button style={styles.confirmEmailButton}>
-                                    {/* TODO: текст и картинка */}
+                                    <BitmapText message={messages.confirm_email_image} style={{
-                                    <Message {...messages.confirm_email_image}>{(message) =>
+                                        verticalAlign: 'middle'
-                                        <img src={confirmEmailImage} alt={message} style={{
+                                    }} />
-                                            width: '147px',
-                                            // width: '104px',
-                                            // width: '144px',
-                                            verticalAlign: 'middle'
-                                        }} />
-                                    }</Message>
                                 </Button>
                             </a>
                         </td>
@@ -96,15 +85,9 @@ export default function Register({username, link, code}) {
                             ...styles.contentCenterCell,
                             ...styles.whatsNextText
                         }}>
-                            {/* TODO: текст и картинка */}
+                            <BitmapText message={messages.whats_next_image} style={{
-                            <Message {...messages.whats_next_image}>{(message) =>
+                                verticalAlign: 'middle'
-                                <img src={whatsNextImage} alt={message} style={{
+                            }} />
-                                    width: '168px',
-                                    // width: '202px',
-                                    // width: '154px',
-                                    verticalAlign: 'middle'
-                                }} />
-                            }</Message>
                         </td>
                     </tr>
                     <tr>
@@ -118,15 +101,9 @@ export default function Register({username, link, code}) {
                                         }} />
                                     </td>
                                     <td style={styles.todoItemContent}>
-                                        {/* TODO: текст и картинка */}
+                                        <BitmapText message={messages.choose_you_skin_image} style={{
-                                        <Message {...messages.choose_you_skin_image}>{(message) =>
+                                            verticalAlign: 'middle'
-                                            <img src={chooseYouSkin} alt={message} style={{
+                                        }} />
-                                                width: '179px',
-                                                // width: '159px',
-                                                // width: '176px',
-                                                verticalAlign: 'middle'
-                                            }} />
-                                        }</Message>
                                         <div style={{
                                             ...styles.paragraph,
                                             ...styles.todoItemText
@@ -149,15 +126,9 @@ export default function Register({username, link, code}) {
                                         }} />
                                     </td>
                                     <td style={styles.todoItemContent}>
-                                        {/* TODO: текст и картинка */}
+                                        <BitmapText message={messages.install_our_patch_image} style={{
-                                        <Message {...messages.install_our_patch_image}>{(message) =>
+                                            verticalAlign: 'middle'
-                                            <img src={installOurPatch} alt={message} style={{
+                                        }} />
-                                                width: '252px',
-                                                // width: '264px',
-                                                // width: '271px',
-                                                verticalAlign: 'middle'
-                                            }} />
-                                        }</Message>
                                         <div style={{
                                             ...styles.paragraph,
                                             ...styles.todoItemText
@@ -180,15 +151,9 @@ export default function Register({username, link, code}) {
                                         }} />
                                     </td>
                                     <td style={styles.todoItemContent}>
-                                        {/* TODO: текст и картинка */}
+                                        <BitmapText message={messages.use_tlauncher_image} style={{
-                                        <Message {...messages.use_tlauncher_image}>{(message) =>
+                                            verticalAlign: 'middle'
-                                            <img src={useTLauncher} alt={message} style={{
+                                        }} />
-                                                width: '209px',
-                                                // width: '138px',
-                                                // width: '260px',
-                                                verticalAlign: 'middle'
-                                            }} />
-                                        }</Message>
                                         <div style={{
                                             ...styles.paragraph,
                                             ...styles.todoItemText
@@ -215,15 +180,9 @@ export default function Register({username, link, code}) {
                     </td>
                     <td style={styles.footerLogo}>
                         <a href="http://ely.by">
-                            {/* TODO: текст и картинка */}
+                            <BitmapText message={messages.footer_logo_alt} style={{
-                            <Message {...messages.footer_logo_alt}>{(message) =>
+                                verticalAlign: 'middle'
-                                <img src={footerLogoImage} alt={message} style={{
+                            }} />
-                                    width: '177px',
-                                    // width: '139px',
-                                    // width: '175px',
-                                    verticalAlign: 'middle'
-                                }} />
-                            }</Message>
                         </a>
                     </td>
                 </tr>