[Bugfix] URL translation issue and Warning Modal close button's toolt…

…ip (#7324)
ApryseSDK · Aug 3, 2023 · e8d0595 · e8d0595
1 parent 6cf610a
commit e8d0595
Show file tree

Hide file tree

Showing 20 changed files with 158 additions and 23 deletions.
diff --git a/i18n/translation-bn.json b/i18n/translation-bn.json
@@ -746,7 +746,7 @@
     },
     "connectToURL": {
       "title": "নিরাপত্তা সতর্কতা",
-      "message": "এই নথিতে সংযোগ করার চেষ্টা করছে:\n\n{{- উরি}}।\n\n আপনি যদি এই নথিতে বিশ্বাস করেন তবে এটি খুলতে নিশ্চিত করুন ক্লিক করুন৷"
+      "message": "এই নথিতে সংযোগ করার চেষ্টা করছে:\n\n{{- uri}}।\n\n আপনি যদি এই নথিতে বিশ্বাস করেন তবে এটি খুলতে নিশ্চিত করুন ক্লিক করুন৷"
     }
   },
   "shortcut": {

diff --git a/i18n/translation-de.json b/i18n/translation-de.json
@@ -746,7 +746,7 @@
     },
     "connectToURL": {
       "title": "Sicherheitswarnung",
-      "message": "Dieses Dokument versucht, eine Verbindung herzustellen zu:\n\n{{-uri}}.\n\n Wenn Sie diesem Dokument vertrauen, klicken Sie auf Bestätigen, um es zu öffnen."
+      "message": "Dieses Dokument versucht, eine Verbindung herzustellen zu:\n\n{{- uri}}.\n\n Wenn Sie diesem Dokument vertrauen, klicken Sie auf Bestätigen, um es zu öffnen."
     }
   },
   "shortcut": {

diff --git a/i18n/translation-es.json b/i18n/translation-es.json
@@ -746,7 +746,7 @@
     },
     "connectToURL": {
       "title": "Advertencia de seguridad",
-      "message": "Este documento está intentando conectarse a:\n\n{{-uri}}.\n\n Si confía en este documento, haga clic en Confirmar para abrirlo."
+      "message": "Este documento está intentando conectarse a:\n\n{{- uri}}.\n\n Si confía en este documento, haga clic en Confirmar para abrirlo."
     }
   },
   "shortcut": {

diff --git a/i18n/translation-fr.json b/i18n/translation-fr.json
@@ -746,7 +746,7 @@
     },
     "connectToURL": {
       "title": "Avertissement de sécurité",
-      "message": "Ce document tente de se connecter à :\n\n{{-uri}}.\n\n Si vous faites confiance à ce document, cliquez sur Confirmer pour l'ouvrir."
+      "message": "Ce document tente de se connecter à :\n\n{{- uri}}.\n\n Si vous faites confiance à ce document, cliquez sur Confirmer pour l'ouvrir."
     }
   },
   "shortcut": {

diff --git a/i18n/translation-hi.json b/i18n/translation-hi.json
@@ -746,7 +746,7 @@
     },
     "connectToURL": {
       "title": "सुरक्षा चेतावनी",
-      "message": "यह दस्तावेज़ इससे कनेक्ट करने का प्रयास कर रहा है:\n\n{{- उरी}}।\n\n यदि आप इस दस्तावेज़ पर भरोसा करते हैं, तो इसे खोलने के लिए पुष्टि करें पर क्लिक करें।"
+      "message": "यह दस्तावेज़ इससे कनेक्ट करने का प्रयास कर रहा है:\n\n{{- uri}}.\n\n यदि आपको इस दस्तावेज़ पर भरोसा है, तो इसे खोलने के लिए पुष्टि करें पर क्लिक करें।"
     }
   },
   "shortcut": {

diff --git a/i18n/translation-it.json b/i18n/translation-it.json
@@ -746,7 +746,7 @@
     },
     "connectToURL": {
       "title": "Avviso di sicurezza",
-      "message": "Questo documento sta tentando di connettersi a:\n\n{{-uri}}.\n\n Se ritieni attendibile questo documento, fai clic su Conferma per aprirlo."
+      "message": "Questo documento sta tentando di connettersi a:\n\n{{- uri}}.\n\n Se ritieni attendibile questo documento, fai clic su Conferma per aprirlo."
     }
   },
   "shortcut": {

diff --git a/i18n/translation-ja.json b/i18n/translation-ja.json
@@ -745,8 +745,8 @@
       "rejectDownloadButton": "ダウンロードせずに閉じる"
     },
     "connectToURL": {
-      "title": "セキュリティ警告",
-      "message": "このドキュメントは次の場所に接続しようとしています:\n\n{{- うり}}。\n\n このドキュメントが信頼できる場合は、[確認] をクリックして開きます。"
+      "title": "セキュリティ警告 ",
+      "message": "このドキュメントは以下に接続しようとしています:\n\n{{- uri}}。\n\n この文書を信頼できる場合は、「確認」をクリックして文書を開きます。"
     }
   },
   "shortcut": {

diff --git a/i18n/translation-ko.json b/i18n/translation-ko.json
@@ -746,7 +746,7 @@
     },
     "connectToURL": {
       "title": "보안 경고",
-      "message": "이 문서는 다음에 연결하려고 합니다.\n\n{{- 우리}}.\n\n 이 문서를 신뢰하는 경우 확인을 클릭하여 엽니다."
+      "message": "이 문서는 다음에 연결하려고 합니다.\n\n{{- uri}}.\n\n 이 문서를 신뢰하는 경우 확인을 클릭하여 엽니다."
     }
   },
   "shortcut": {

diff --git a/i18n/translation-pl.json b/i18n/translation-pl.json
@@ -746,7 +746,7 @@
     },
     "connectToURL": {
       "title": "Ostrzeżenie bezpieczeństwa",
-      "message": "Ten dokument próbuje połączyć się z:\n\n{{- ur}}.\n\n Jeśli ufasz temu dokumentowi, kliknij Potwierdź, aby go otworzyć."
+      "message": "Ten dokument próbuje połączyć się z:\n\n{{- uri}}.\n\n Jeśli ufasz temu dokumentowi, kliknij Potwierdź, aby go otworzyć."
     }
   },
   "shortcut": {

diff --git a/i18n/translation-ru.json b/i18n/translation-ru.json
@@ -746,7 +746,7 @@
     },
     "connectToURL": {
       "title": "Предупреждение безопасности",
-      "message": "Этот документ пытается подключиться к:\n\n{{- ури}}.\n\n Если вы доверяете этому документу, нажмите «Подтвердить», чтобы открыть его."
+      "message": "Этот документ пытается подключиться к:\n\n{{- uri}}.\n\n Если вы доверяете этому документу, нажмите «Подтвердить», чтобы открыть его."
     }
   },
   "shortcut": {

diff --git a/i18n/translation-th.json b/i18n/translation-th.json
@@ -746,7 +746,7 @@
     },
     "connectToURL": {
       "title": "คำเตือนความปลอดภัย",
-      "message": "เอกสารนี้พยายามเชื่อมต่อกับ:\n\n{{-ยูริ}}.\n\n หากคุณเชื่อถือเอกสารนี้ ให้คลิกยืนยันเพื่อเปิด"
+      "message": "เอกสารนี้พยายามเชื่อมต่อกับ:\n\n{{- uri}}.\n\n หากคุณเชื่อถือเอกสารนี้ ให้คลิกยืนยันเพื่อเปิด"
     }
   },
   "shortcut": {

diff --git a/i18n/translation-vi.json b/i18n/translation-vi.json
@@ -746,7 +746,7 @@
     },
     "connectToURL": {
       "title": "Cảnh báo an ninh",
-      "message": "Tài liệu này đang cố kết nối với:\n\n{{-uri}}.\n\n Nếu bạn tin tưởng tài liệu này, hãy nhấp vào Xác nhận để mở nó."
+      "message": "Tài liệu này đang cố kết nối với:\n\n{{- uri}}.\n\n Nếu bạn tin tưởng tài liệu này, hãy nhấp vào Xác nhận để mở nó."
     }
   },
   "shortcut": {

diff --git a/i18n/translation-zh_cn.json b/i18n/translation-zh_cn.json
@@ -746,7 +746,7 @@
     },
     "connectToURL": {
       "title": "安全警告",
-      "message": "此文档正在尝试连接到：\n\n{{- uri}}。\n\n 如果您信任此文档，请单击“确认”将其打开。"
+      "message": "该文档正在尝试连接到：\n\n{{- uri}}。\n\n 如果您信任此文档，请单击“确认”将其打开。"
     }
   },
   "shortcut": {

diff --git a/i18n/translation-zh_tw.json b/i18n/translation-zh_tw.json
@@ -746,7 +746,7 @@
     },
     "connectToURL": {
       "title": "安全警告",
-      "message": "此文檔正在嘗試連接到：\n\n{{- uri}}。\n\n 如果您信任此文檔，請單擊“確認”將其打開。"
+      "message": "該文檔正在嘗試連接到：\n\n{{- uri}}。\n\n 如果您信任此文檔，請單擊“確認”將其打開。"
     }
   },
   "shortcut": {

diff --git a/scripts/translate-i18n-files.js b/scripts/translate-i18n-files.js
@@ -53,11 +53,16 @@ const addMissingKey = async(baseTranslationData, translationData, result, langua
       // a translation already exists, copy it over
       result[key] = translationData[key];
     } else {
+      // We can use interpolation {{}} to pass dynamic values with i18n
+      // https://www.i18next.com/translation-function/interpolation#basic
+      // Google unfortunately translates these keys so we're extracting them and replacing them after translation
+      const interpolationRegex = /({{.+?}})/gi;
+      const keyToNotTranslate = baseTranslationData[key].match(interpolationRegex);
       const [translated] = await translate.translate(
         baseTranslationData[key],
         mapI18nCodeToGoogleTranslationCode(languageCode)
       );
-      result[key] = translated;
+      result[key] = keyToNotTranslate === null ? translated : translated.replace(interpolationRegex, () => keyToNotTranslate.shift());
     }
   }
 };

diff --git a/src/components/Tooltip/Tooltip.scss b/src/components/Tooltip/Tooltip.scss
@@ -2,7 +2,7 @@
 
 %tooltip {
   position: absolute;
-  z-index: 100;
+  z-index: $modal-z-index + 10; // should be higher than Modals
   background: #222;
   font-size: 12px; // intended
   padding: 6px 8px;

diff --git a/src/components/WarningModal/WarningModal.stories.js b/src/components/WarningModal/WarningModal.stories.js
@@ -0,0 +1,32 @@
+import React from 'react';
+import { configureStore } from '@reduxjs/toolkit';
+import { Provider } from 'react-redux';
+import WarningModal from './WarningModal';
+import DataElements from 'constants/dataElement';
+
+export default {
+  title: 'Components/WarningModal',
+  component: WarningModal,
+};
+
+const initialState = {
+  viewer: {
+    disabledElements: {},
+    customElementOverrides: {},
+    openElements: {
+      [DataElements.WARNING_MODAL]: true
+    },
+    warning: {
+      title: 'Warning title',
+      message: 'This is a warning message',
+    }
+  },
+};
+
+export const Basic = () => {
+  return (
+    <Provider store={configureStore({ reducer: () => initialState })}>
+      <WarningModal />
+    </Provider>
+  );
+};
diff --git a/src/constants/modal.scss b/src/constants/modal.scss
@@ -1,7 +1,5 @@
 @import './styles';
 
-$modal-z-index: 100;
-
 %modal {
   @extend %open;
   @extend %closed;
@@ -76,6 +74,19 @@ $modal-z-index: 100;
         }
       }
 
+      &.secondary-btn-custom {
+        border-radius: 4px;
+        border: 1px solid var(--primary-button);
+        color: var(--primary-button);
+        padding: 2px 20px 4px;
+        cursor: pointer;
+        background-color: white;
+
+        &:hover {
+          color: var(--secondary-button-hover);
+        }
+      }
+
       @include mobile {
         padding: 23px 8px;
       }
@@ -101,7 +112,6 @@ $modal-z-index: 100;
 }
 
 %modal-shared-container-style {
-  border-radius: 4px;
   border-radius: 4px;
   box-shadow: 0px 0px 3px 0px var(--document-box-shadow);
   background: var(--component-background);

diff --git a/src/constants/popup.scss b/src/constants/popup.scss
@@ -3,7 +3,6 @@
 $popup-button-height: 38px;
 $popup-icon-height: 18px;
 $popup-icon-width: 18px;
-$popup-z-index: 70;
 
 %popup {
   @extend %open;
@@ -46,6 +45,34 @@ $popup-z-index: 70;
       }
     }
   }
+
+  &.is-vertical {
+    .Button.main-menu-button {
+      width: 100%;
+      border-radius: 0;
+      justify-content: flex-start;
+      padding-left: var(--padding-small);
+      padding-right: var(--padding-small);
+      margin: 0 0 var(--padding-tiny) 0;
+
+      &:first-child {
+        margin-top: var(--padding-tiny);
+      }
+
+      @include mobile {
+        width: 100%;
+        height: 32px;
+      }
+
+      .Icon {
+        margin-right: 10px;
+      }
+
+      span {
+        white-space: nowrap;
+      }
+    }
+  }
 }
 
 %popup-landscape {
@@ -58,7 +85,7 @@ $popup-z-index: 70;
 %popup-mobile {
   @include mobile {
     position: fixed;
-    width: 100vw;
+    width: 100%;
     top: initial !important;
     left: 0px !important;
     bottom: 0px;
@@ -96,4 +123,4 @@ $popup-z-index: 70;
   100% {
     transform: translateY(100%);
   }
-}
+}