Update error screen (#34)

ivantsov · May 24, 2017 · 97253d4 · 97253d4
1 parent 8b079f8
commit 97253d4
Show file tree

Hide file tree

Showing 8 changed files with 183 additions and 34 deletions.
diff --git a/scripts/generate-manifest.js b/scripts/generate-manifest.js
@@ -3,6 +3,6 @@ const getManifest = require('../src/manifest');
 
 const target = process.argv[2];
 
-fs.outputJsonSync('./dist/manifest.json', getManifest(target));
+fs.outputJsonSync('./dist/manifest.json', getManifest(target), {spaces: 2});
 
 console.log('Manifest is generated.');
diff --git a/src/locales/en.js b/src/locales/en.js
@@ -24,10 +24,19 @@ module.exports = {
         },
         emptyList: 'You have no unread emails',
         loadingError: 'Cannot load emails... Please try again later',
-        notAuthorized: {
-            title: 'Looks like you\'re not authorized or there is no network connection.',
-            subTitle: 'You can try to reload the extension with the button below.',
-            btnText: 'Reload extension',
+        unavailable: {
+            title: 'Something went wrong...',
+            subTitle: 'There are a few possible reasons why the extension can\'t work properly:',
+            notAuth: {
+                label: 'You are not authorized.',
+                checkAuth: 'Check that you\'re authorized on Yandex <strong>(exactly <i>.ru</i> domain)</strong>.',
+                relogin: 'Try to logout and login again.',
+            },
+            noConnection: {
+                label: 'There is no connection to the Internet.',
+            },
+            nothingHelped: 'If nothing above helped then try to reload the extension with the button bellow.',
+            reloadBtn: 'Reload extension',
         },
         donation: {
             text: 'Like the extension? - Help the author!',

diff --git a/src/locales/ru.js b/src/locales/ru.js
@@ -24,10 +24,19 @@ module.exports = {
         },
         emptyList: 'У вас нет непрочитанных писем',
         loadingError: 'Не удалось загрузить письма... Попробуйте позже',
-        notAuthorized: {
-            title: 'Похоже, что Вы не авторизованы или отсутствует соединение.',
-            subTitle: 'Вы можете попробовать перезагрузить расширение с помощью кнопки ниже.',
-            btnText: 'Перезагрузить расширение',
+        unavailable: {
+            title: 'Что-то пошло не так...',
+            subTitle: 'Возможны следующие причины почему расширение может не работать корректно:',
+            notAuth: {
+                label: 'Вы не авторизованы.',
+                checkAuth: 'Проверьте, что вы авторизованы в Яндекс <strong>(именно <i>.ru</i> домен)</strong>.',
+                relogin: 'Попробуйте разлогиниться и залогиниться снова.',
+            },
+            noConnection: {
+                label: 'Отсутствует соединение с интернетом.',
+            },
+            nothingHelped: 'Если ничего из вышеперечисленного не помогло, вы можете перезагрузить расширение с помощью кнопки ниже.',
+            reloadBtn: 'Перезагрузить расширение',
         },
         donation: {
             text: 'Нравится расширение? - Поддержи автора!',

diff --git a/src/pages/popup/components/Translation.js b/src/pages/popup/components/Translation.js
@@ -3,7 +3,8 @@ import React from 'react';
 import i18n from 'shared/utils/i18n';
 
 const Translation = ({id}) => (
-    <span>{i18n.text(`popup.${id}`)}</span>
+    // eslint-disable-next-line react/no-danger
+    <span dangerouslySetInnerHTML={{__html: i18n.text(`popup.${id}`)}}/>
 );
 Translation.propTypes = {
     id: PropTypes.string.isRequired,

diff --git a/src/pages/popup/components/UnavailableMessage/UnavailableMessage.js b/src/pages/popup/components/UnavailableMessage/UnavailableMessage.js
@@ -7,12 +7,29 @@ import styles from './UnavailableMessage.less';
 
 const UnavailableMessage = ({reloadApp}) => (
     <div className={styles.container}>
-        <p><Translation id="notAuthorized.title"/></p>
-        <p><Translation id="notAuthorized.subTitle"/></p>
+        <div>
+            <h1 className={styles.title}><Translation id="unavailable.title"/></h1>
 
+            <p className={styles.subTitle}><Translation id="unavailable.subTitle"/></p>
+            <ol>
+                <li>
+                    <strong><Translation id="unavailable.notAuth.label"/></strong>
+                    <ul>
+                        <li><Translation id="unavailable.notAuth.checkAuth"/></li>
+                        <li><Translation id="unavailable.notAuth.relogin"/></li>
+                    </ul>
+                </li>
+                <li>
+                    <strong><Translation id="unavailable.noConnection.label"/></strong>
+                </li>
+            </ol>
+        </div>
+
+
+        <p className={styles.btnTitle}><Translation id="unavailable.nothingHelped"/></p>
         <div className={styles.btnContainer}>
             <Button onClick={reloadApp}>
-                <Translation id="notAuthorized.btnText"/>
+                <Translation id="unavailable.reloadBtn"/>
             </Button>
         </div>
     </div>

diff --git a/src/pages/popup/components/UnavailableMessage/UnavailableMessage.less b/src/pages/popup/components/UnavailableMessage/UnavailableMessage.less
@@ -2,11 +2,27 @@
 
 .container {
     color: @grey1;
-    font-size: 18px;
+    font-size: 16px;
+    padding: 32px;
+}
+
+.title {
+    font-size: 22px;
     text-align: center;
-    padding-top: 100px;
+    margin-bottom: 48px;
+}
+
+.subTitle {
+    font-size: 18px;
+    margin-bottom: 12px;
+}
+
+.btnTitle {
+    composes: subTitle;
+    margin-top: 48px;
 }
 
 .btnContainer {
-    margin-top: 32px;
+    text-align: center;
+    margin-top: 16px;
 }
diff --git a/src/pages/popup/components/__tests__/__snapshots__/App.test.js.snap b/src/pages/popup/components/__tests__/__snapshots__/App.test.js.snap
@@ -11,19 +11,27 @@ exports[`popup/App authorized 1`] = `
   <div
     className="component"
   >
-    <span>
-      popup.donation.text
-    </span>
+    <span
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "popup.donation.text",
+        }
+      }
+    />
     <div
       className="btn"
     >
       <button
         className="secondary"
         onClick={[Function]}
       >
-        <span>
-          popup.donation.donateBtn
-        </span>
+        <span
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "popup.donation.donateBtn",
+            }
+          }
+        />
       </button>
     </div>
   </div>
@@ -34,15 +42,84 @@ exports[`popup/App not authorized 1`] = `
 <div
   className="container"
 >
-  <p>
-    <span>
-      popup.notAuthorized.title
-    </span>
-  </p>
-  <p>
-    <span>
-      popup.notAuthorized.subTitle
-    </span>
+  <div>
+    <h1
+      className="title"
+    >
+      <span
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "popup.unavailable.title",
+          }
+        }
+      />
+    </h1>
+    <p
+      className="subTitle"
+    >
+      <span
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "popup.unavailable.subTitle",
+          }
+        }
+      />
+    </p>
+    <ol>
+      <li>
+        <strong>
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "popup.unavailable.notAuth.label",
+              }
+            }
+          />
+        </strong>
+        <ul>
+          <li>
+            <span
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "popup.unavailable.notAuth.checkAuth",
+                }
+              }
+            />
+          </li>
+          <li>
+            <span
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "popup.unavailable.notAuth.relogin",
+                }
+              }
+            />
+          </li>
+        </ul>
+      </li>
+      <li>
+        <strong>
+          <span
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "popup.unavailable.noConnection.label",
+              }
+            }
+          />
+        </strong>
+      </li>
+    </ol>
+  </div>
+  <p
+    className="btnTitle"
+  >
+    <span
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "popup.unavailable.nothingHelped",
+        }
+      }
+    />
   </p>
   <div
     className="btnContainer"
@@ -51,9 +128,13 @@ exports[`popup/App not authorized 1`] = `
       className="primary"
       onClick={[Function]}
     >
-      <span>
-        popup.notAuthorized.btnText
-      </span>
+      <span
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "popup.unavailable.reloadBtn",
+          }
+        }
+      />
     </button>
   </div>
 </div>

diff --git a/src/pages/popup/styles/layout.less b/src/pages/popup/styles/layout.less
@@ -9,11 +9,27 @@ body {
     box-sizing: border-box;
 }
 
+h1,
+h2,
 p {
     margin: 0;
     padding: 0;
 }
 
+ol,
+ul {
+    margin: 0;
+    padding-left: 18px;
+}
+
+ul {
+    list-style-type: disc;
+}
+
+li {
+    margin-top: 8px;
+}
+
 a {
     color: black;
     text-decoration: none;