@everymatrix/player-withdrawal 0.0.200 → 0.0.201

package/package.json

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

package/src/PlayerWithdrawal.svelte

@@ -2,10 +2,13 @@
 <script lang="typescript">
   import { onMount } from 'svelte';
   import { getDevice } from 'rvhelper';
+  import { _, addNewMessages, setLocale } from './i18n';
+  import { PlayerWithdrawalTranslations } 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;
@@ -15,6 +18,10 @@
   let amount:number = 0;
   let iframeUrl:string = '';
 
+  Object.keys(PlayerWithdrawalTranslations).forEach((item:any) => {
+    addNewMessages(item, PlayerWithdrawalTranslations[item]);
+  });
+
   const toggleScreen = () => {
     window.postMessage({ type: 'ReturnToMenu' }, window.location.href);
   }
@@ -88,6 +95,10 @@
     });
   }
 
+  const initialLoad = () => {
+    setLocale(lang);
+  }
+
   onMount(() => {
     window.addEventListener('message', messageHandler, false);
 
@@ -96,6 +107,7 @@
     }
   });
 
+  $: lang && initialLoad();
   $: session && playerid && endpoint && getWithdrawalIframe();
 </script>
 
@@ -107,12 +119,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="WithdrawalTitleMobile">Withdrawal</h2>
+      <h2 class="WithdrawalTitleMobile">{$_('withdrawal.title')}</h2>
     </div>
   {/if}
-  <h2 class="WithdrawalTitle {isMobile ? 'WithdrawalTitleNone' : ''}">Withdrawal</h2>
+  <h2 class="WithdrawalTitle {isMobile ? 'WithdrawalTitleNone' : ''}">{$_('withdrawal.title')}</h2>
   {#if isLoading}
-    <p>Loading, please wait ...</p>
+    <p>{$_('withdrawal.loading')}</p>
   {:else}
     <div class="WithdrawalIframeWrapper">
       <iframe src={iframeUrl} title="Withdrawal 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 PlayerWithdrawalTranslations = {
+  en: {
+    withdrawal: {
+      title: `Withdrawal`,
+      loading: `Loading, please wait ...`
+    }
+  },
+  ro: {
+    withdrawal: {
+      title: `Withdrawal`,
+      loading: `Loading, please wait ...`
+    }
+  }
+};