@everymatrix/player-transaction-history 0.0.200 → 0.0.201

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/player-transaction-history",
-  "version": "0.0.200",
+  "version": "0.0.201",
   "main": "dist/player-transaction-history",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "1575292cd20d511a1f4ebe038656d86deab2c7e0"
+  "gitHead": "71051531499cfea745b53a0f7c0a77a252990ae7"
 }

package/src/PlayerTransactionHistory.svelte

@@ -1,10 +1,13 @@
 <svelte:options tag={null} />
 <script lang="typescript">
   import { getDevice } from 'rvhelper';
+  import { _, addNewMessages, setLocale } from './i18n';
+  import { PlayerTransactionHistoryTranslations } from './translations';
 
   export let endpoint:String = '';
   export let session:String = '';
   export let playerid:String = '';
+  export let lang:string = 'en';
 
   let userAgent:string = window.navigator.userAgent;
   let isMobile = (getDevice(userAgent) === 'PC') ? false : true;
@@ -12,6 +15,10 @@
 
   let iframeUrl:string = '';
 
+  Object.keys(PlayerTransactionHistoryTranslations).forEach((item:any) => {
+    addNewMessages(item, PlayerTransactionHistoryTranslations[item]);
+  });
+
   const toggleScreen = () => {
     window.postMessage({ type: 'ReturnToMenu' }, window.location.href);
   }
@@ -42,6 +49,11 @@
       });
   }
 
+  const initialLoad = () => {
+    setLocale(lang);
+  }
+
+  $: lang && initialLoad();
   $: session && playerid && endpoint && getTransactionHistoryIframe();
 </script>
 
@@ -53,12 +65,12 @@
           <path class="aaa" d="M7.5,0,6.136,1.364,11.3,6.526H0V8.474H11.3L6.136,13.636,7.5,15,15,7.5Z" transform="translate(15 15) rotate(180)"/>
         </g></g>
       </svg>
-      <h2 class="TransactionHistoryTitleMobile">Transaction History</h2>
+      <h2 class="TransactionHistoryTitleMobile">{$_('transactionHistory.title')}</h2>
     </div>
   {/if}
-  <h2 class="TransactionHistoryTitle {isMobile ? 'TransactionHistoryTitleNone' : ''}">Transaction History</h2>
+  <h2 class="TransactionHistoryTitle {isMobile ? 'TransactionHistoryTitleNone' : ''}">{$_('transactionHistory.title')}</h2>
   {#if isLoading}
-    <p>Loading, please wait ...</p>
+    <p>{$_('transactionHistory.loading')}</p>
   {:else}
     <div class="TransactionHistoryIframeWrapper">
       <iframe src={iframeUrl} title="Transaction History Iframe"></iframe>

package/src/i18n.js

@@ -0,0 +1,27 @@
+import {
+  dictionary,
+  locale,
+  addMessages,
+  _
+} from 'svelte-i18n';
+
+function setupI18n({ withLocale: _locale, translations }) {
+  locale.subscribe((data) => {
+    if (data == null) {
+      dictionary.set(translations);
+      locale.set(_locale);
+    }
+  }); // maybe we will need this to make sure that the i18n is set up only once
+  /*dictionary.set(translations);
+  locale.set(_locale);*/
+}
+
+function addNewMessages(lang, dict) {
+  addMessages(lang, dict);
+}
+
+function setLocale(_locale) {
+  locale.set(_locale);
+}
+
+export { _, setupI18n, addNewMessages, setLocale };

package/src/translations.js

@@ -0,0 +1,14 @@
+export const PlayerTransactionHistoryTranslations = {
+  en: {
+    transactionHistory: {
+      title: `Transaction History`,
+      loading: `Loading, please wait ...`
+    }
+  },
+  ro: {
+    transactionHistory: {
+      title: `Transaction History`,
+      loading: `Loading, please wait ...`
+    }
+  }
+};