Open with DeepL translator on error

src/_locales/en/messages.json

@@ -26,6 +26,9 @@
   "openInGoogleLabel": {
     "message": "Open in Google Translate"
   },
+  "openInDeeplLabel": {
+    "message": "Open in DeepL Translator"
+  },
   "copyLabel": {
     "message": "Copy"
   },

src/content/components/TranslatePanel.js

@@ -184,6 +184,7 @@ export default class TranslatePanel extends Component {
     const candidateStyles = {
       color: getSettings("candidateFontColor")
     };
+    const translationApi = getSettings("translationApi");
 
     return (
       <div
@@ -204,11 +205,14 @@ export default class TranslatePanel extends Component {
               <p className="simple-translate-error" style={candidateStyles}>
                 {errorMessage}
                 <br />
-                <a
-                  href={`https://translate.google.com/?sl=auto&tl=${currentLang}&text=${encodeURIComponent(selectedText)}`}
-                  target="_blank"
-                >
-                  {browser.i18n.getMessage("openInGoogleLabel")}
+                <a href={translationApi === "google" ?
+                  `https://translate.google.com/?sl=auto&tl=${currentLang}&text=${encodeURIComponent(selectedText)}` :
+                  `https://www.deepl.com/translator#auto/${currentLang}/${encodeURIComponent(selectedText)}`
+                }
+                  target="_blank">
+                  {translationApi === "google" ?
+                    browser.i18n.getMessage("openInGoogleLabel") :
+                    browser.i18n.getMessage("openInDeeplLabel")}
                 </a>
               </p>
             )}

src/popup/components/ResultArea.js

@@ -14,11 +14,16 @@ const splitLine = text => {
 export default props => {
   const { resultText, candidateText, isError, errorMessage, targetLang } = props;
   const shouldShowCandidate = getSettings("ifShowCandidate");
+  const translationApi = getSettings("translationApi");
+  console.log(translationApi);
 
   const handleLinkClick = () => {
     const { inputText, targetLang } = props;
     const encodedText = encodeURIComponent(inputText);
-    const translateUrl = `https://translate.google.com/?sl=auto&tl=${targetLang}&text=${encodedText}`;
+    const translateUrl = translationApi === "google" ?
+      `https://translate.google.com/?sl=auto&tl=${targetLang}&text=${encodedText}` :
+      `https://www.deepl.com/translator#auto/${targetLang}/${encodedText}`
+      ;
     openUrl(translateUrl);
   };
 
@@ -29,7 +34,12 @@ export default props => {
       {isError && <p className="error">{errorMessage}</p>}
       {isError && (
         <p className="translateLink">
-          <a onClick={handleLinkClick}>{browser.i18n.getMessage("openInGoogleLabel")}</a>
+          <a onClick={handleLinkClick}>
+            {translationApi === "google" ?
+              browser.i18n.getMessage("openInGoogleLabel") :
+              browser.i18n.getMessage("openInDeeplLabel")
+            }
+          </a>
         </p>
       )}
       <div className="mediaButtons">