@everymatrix/player-account-gaming-limits-popup 0.0.161 → 0.0.162

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/player-account-gaming-limits-popup",
-  "version": "0.0.161",
+  "version": "0.0.162",
   "main": "dist/player-account-gaming-limits-popup.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "d734e5f1b488eaca6400399db42f53fefb48bdb0"
+  "gitHead": "f0ae2ffa2c984a3f90ab2eea42992f92e6acf725"
 }

package/src/PlayerAccountGamingLimitsPopup.svelte

@@ -1,31 +1,58 @@
 <svelte:options tag={null} />
 <script lang="typescript">
+  import { onMount } from 'svelte';
+  import { getDevice } from 'rvhelper';
+  import { _, addNewMessages } from './i18n';
+  import { PlayerGamingLimitsTranslations } from './translations';
 
-  export let showpopup:string = '';
+  export let showpopup:any = '';
   export let infocontent:string = '';
   export let infoname:string = '';
-  import { getDevice } from 'rvhelper';
+  export let iteminfoamount:string = '';
+  export let lang:string = 'en';
+  export let playercurrency:string = 'USD';
 
   let showPopup:boolean = false;
 
+  Object.keys(PlayerGamingLimitsTranslations).forEach((item) => {
+    addNewMessages(item, PlayerGamingLimitsTranslations[item]);
+  });
+
   let userAgent:String = window.navigator.userAgent;
   let isMobile = (getDevice(userAgent) === 'PC') ? false : true;
 
   const closeInfoPopup = () => {
     showPopup = false;
-    window.postMessage({ type: 'ClosePlayerAccountGamingLimitsPopup', showPopup: showPopup }, window.location.href);
+    window.postMessage({ type: 'ClosePlayerAccountGamingLimitsPopup' }, window.location.href);
+  }
+
+  const messageHandler = (e:any) => {
+    if (e.data && e.data.type == 'ClosePlayerAccountGamingLimitsPopup') {
+      showPopup = false;
+    }
   }
 
   const initialLoad = () => {
+    if(iteminfoamount < 0) {
+      iteminfoamount = '0';
+    }
     showPopup = showpopup;
   }
 
+  onMount(() => {
+    window.addEventListener('message', messageHandler, false);
+
+    return () => {
+      window.removeEventListener('message', messageHandler);
+    }
+  });
+
   $: showpopup && initialLoad();
 </script>
 
 {#if showPopup}
   <section class={isMobile ? 'InfoCardPopupMobileModal' : ''}>
-    <div class="InfoCardPopupWrapper {isMobile ? 'InfoCardPopupMobileWrapper' : ''}">
+    <div class="InfoCardPopupWrapper {isMobile ? 'InfoCardPopupMobileWrapper' : ''} {iteminfoamount ? 'InfoCardPopupLimitChanged' : ''}">
       <div class="InfoCardPopupHeader">
         <div class="InfoCardPopupIcon">i</div>
         <div class="InfoCardPopupTitle">{infoname}</div>
@@ -34,7 +61,11 @@
         </div>
       </div>
       <div class="InfoCardPopupContentArea">
-        <p class="InfoCardPopupContent">{infocontent}</p>
+        {#if iteminfoamount}
+          <p class="InfoCardPopupContent">{$_('popupText.amountChanged', { values: { amount: iteminfoamount, currency: playercurrency}})}</p>
+        {:else}
+          <p class="InfoCardPopupContent">{infocontent}</p>
+        {/if}
       </div>
     </div>
   </section>
@@ -60,6 +91,9 @@
       content: '';
     }
   }
+  .InfoCardPopupLimitChanged {
+    background: #FFFFF8;
+  }
   .InfoCardPopupWrapper {
     width: ttp(12.5);
     padding: ttp(1.25);
@@ -69,8 +103,8 @@
     border-radius: 0.3125;
     display: block;
     position: absolute;
-    top: ttp(1.5625);
-    left: - ttp(6.25);
+    top: 32px;
+    left: -84px;
     z-index: 9;
     &:before {
       content: "";

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,12 @@
+export const PlayerGamingLimitsTranslations = {
+  en: {
+    popupText: {
+      amountChanged: `Your limit has been changed or increased: {amount} {currency}. You will have to wait for the expiration date for your new limit to take effect:`,
+    }
+  },
+  ro: {
+    popupText: {
+      amountChanged: `Your limit has been changed or increased: {amount} {currency}. You will have to wait for the expiration date for your new limit to take effect:`,
+    }
+  }
+};