Show link to google translate on error in popup

src/_locales/en/messages.json

@@ -15,6 +15,9 @@
   "showLink": {
     "message": "Translate this page"
   },
+  "openInGoogleLabel": {
+    "message": "Open in Google Translate"
+  },
   "targetLangLabel": {
     "message": "Target language"
   },

src/popup/components/PopupPage.js

@@ -111,6 +111,8 @@ export default class PopupPage extends Component {
         <InputArea inputText={this.state.inputText} handleInputText={this.handleInputText} />
         <hr />
         <ResultArea
+          inputText={this.state.inputText}
+          targetLang={this.state.targetLang}
           resultText={this.state.resultText}
           candidateText={this.state.candidateText}
           statusText={this.state.statusText}

src/popup/components/ResultArea.js

@@ -1,6 +1,8 @@
 import React from "react";
+import browser from "webextension-polyfill";
 import getErrorMessage from "src/common/getErrorMessage";
 import { getSettings } from "src/settings/settings";
+import openUrl from "src/common/openUrl";
 import "../styles/ResultArea.scss";
 
 const splitLine = text => {
@@ -13,11 +15,23 @@ export default props => {
   const isError = statusText !== "OK";
   const shouldShowCandidate = getSettings("ifShowCandidate");
 
+  const handleLinkClick = () => {
+    const { inputText, targetLang } = props;
+    const encodedText = encodeURIComponent(inputText);
+    const translateUrl = `https://translate.google.com/?sl=auto&tl=${targetLang}&text=${encodedText}`;
+    openUrl(translateUrl);
+  };
+
   return (
     <div id="resultArea">
       <p className="resultText">{splitLine(resultText)}</p>
       {shouldShowCandidate && <p className="candidateText">{splitLine(candidateText)}</p>}
       {isError && <p className="error">{getErrorMessage(statusText)}</p>}
+      {isError && (
+        <p className="translateLink">
+          <a onClick={handleLinkClick}>{browser.i18n.getMessage("openInGoogleLabel")}</a>
+        </p>
+      )}
     </div>
   );
 };

src/popup/styles/ResultArea.scss

@@ -23,4 +23,16 @@
       }
     }
   }
+
+  .translateLink {
+    a {
+      font-style: normal;
+      text-decoration: none;
+      color: var(--highlight);
+      cursor: pointer;
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
 }