@everymatrix/player-bonus-card 0.0.198 → 0.0.202

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/player-bonus-card",
-  "version": "0.0.198",
+  "version": "0.0.202",
   "main": "dist/player-bonus-card",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "d060021a394c9bafc29edd3537ebd655f33aed03"
+  "gitHead": "d4e45d04feaefeedf3a6530ff705136d3a49ed86"
 }

package/src/PlayerBonusCard.svelte

@@ -1,6 +1,8 @@
 <svelte:options tag={null} />
 <script lang="typescript">
   import { getDevice } from 'rvhelper';
+  import { _, addNewMessages, setLocale } from './i18n';
+  import { PlayerBonusCardTranslations } from './translations';
 
   import moment from 'moment';
 
@@ -13,12 +15,17 @@
   export let bonuswageringamount:string = '';
   export let bonusremainingamount:string = '';
   export let bonuscurrency:string = '';
+  export let lang:string = 'en';
 
   let userAgent:string = window.navigator.userAgent;
   let isMobile:boolean = (getDevice(userAgent) === 'PC') ? false : true;
 
   let bonusTypeText:string = '';
 
+  Object.keys(PlayerBonusCardTranslations).forEach((item:any) => {
+    addNewMessages(item, PlayerBonusCardTranslations[item]);
+  });
+
   const bonusTypeRewrite = () => {
     bonusTypeText = bonustype;
 
@@ -33,44 +40,49 @@
     window.postMessage({ type: 'DeleteActiveBonus', bonuswalletid }, window.location.href);
   }
 
+  const initialLoad = () => {
+    setLocale(lang);
+  }
+
+  $: lang && initialLoad();
   $: bonustype && bonusTypeRewrite();
 </script>
 
 <div class="BonusCard">
   <div class="BonusCardInfo">
     <div class="BonusCardRow">
-      <p class="BonusCardRowTitle">Granted date: <span>{moment(bonusdate).format('DD/MM/YYYY h:mm A')}</span></p>
+      <p class="BonusCardRowTitle">{$_('bonusCard.date')} <span>{moment(bonusdate).format('DD/MM/YYYY h:mm A')}</span></p>
       <p class="BonusCardRowText BonusCardStatus TextCapitalize {bonusstatus === 'active' || bonusstatus === 'released' ? 'StatusActive' : ''} {bonusstatus === 'expired' ? 'StatusExpired' : ''} {bonusstatus === 'forfeited' ? 'StatusForfeited' : ''}">{bonusstatus}</p>
     </div>
     <div class="BonusCardRow">
-      <p class="BonusCardRowTitle">Bonus Name</p>
+      <p class="BonusCardRowTitle">{$_('bonusCard.bonusName')}</p>
       <p class="BonusCardRowText">{bonusname}</p>
     </div>
     <div class="BonusCardRow">
-      <p class="BonusCardRowTitle">Bonus Type</p>
+      <p class="BonusCardRowTitle">{$_('bonusCard.bonusType')}</p>
       <p class="BonusCardRowText TextCapitalize">{bonusTypeText}</p>
     </div>
     {#if bonusamount >= 0}
       <div class="BonusCardRow">
-        <p class="BonusCardRowTitle">Bonus Amount</p>
+        <p class="BonusCardRowTitle">{$_('bonusCard.bonusAmount')}</p>
         <p class="BonusCardRowText">{bonusamount} {bonuscurrency}</p>
       </div>
     {/if}
     {#if bonuswageringamount >= 0}
       <div class="BonusCardRow">
-        <p class="BonusCardRowTitle">Wagering Amount</p>
+        <p class="BonusCardRowTitle">{$_('bonusCard.wageringAmount')}</p>
         <p class="BonusCardRowText">{bonuswageringamount} {bonuscurrency}</p>
       </div>
     {/if}
     {#if bonusremainingamount >= 0}
       <div class="BonusCardRow">
-        <p class="BonusCardRowTitle">Remaining Bonus Amount</p>
+        <p class="BonusCardRowTitle">{$_('bonusCard.remainingBonus')}</p>
         <p class="BonusCardRowText">{bonusremainingamount} {bonuscurrency}</p>
       </div>
     {/if}
   </div>
   {#if bonusstatus === 'active'}
-    <button class="DeleteBonus {isMobile ? 'DeleteBonusMobile' : ''}" on:click={deleteBonus}>Forfeit Bonus</button>
+    <button class="DeleteBonus {isMobile ? 'DeleteBonusMobile' : ''}" on:click={deleteBonus}>{$_('bonusCard.forfeitBonus')}s</button>
   {/if}
 </div>
 

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,24 @@
+export const PlayerBonusCardTranslations = {
+  en: {
+    bonusCard: {
+      date: `Granted date:`,
+      bonusName: `Bonus Name`,
+      bonusType: `Bonus Type`,
+      bonusAmount: `Bonus Amount`,
+      wageringAmount: `Wagering Amount`,
+      remainingBonus: `Remaining Bonus Amount`,
+      forfeitBonus: `Forfeit Bonus`
+    }
+  },
+  ro: {
+    bonusCard: {
+      date: `Dată Alocare:`,
+      bonusName: `Nume bonus`,
+      bonusType: `Tip de bonus`,
+      bonusAmount: `Sumă`,
+      wageringAmount: `Sumă de pariat`,
+      remainingBonus: `Bonus rămas`,
+      forfeitBonus: `Anulează bonusul`
+    }
+  }
+};