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

package/package.json

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

package/src/PlayerAccountGamingLimitsPopup.svelte

@@ -1,10 +1,18 @@
 <svelte:options tag={null} />
 <script lang="typescript">
-
-  export let showpopup:string = '';
-  export let infocontent:string = '';
-  export let infoname:string = '';
+  import { onMount } from 'svelte';
   import { getDevice } from 'rvhelper';
+  import { _, addNewMessages } from './i18n';
+  import { PlayerGamingLimitsPopupTranslations } from './translations';
+
+  export let showpopup:any = '';
+  export let iteminfoamount:string = '';
+  export let lang:string = 'en';
+  export let playercurrency:string = 'USD';
+  
+  Object.keys(PlayerGamingLimitsPopupTranslations).forEach((item) => {
+    addNewMessages(item, PlayerGamingLimitsPopupTranslations[item]);
+  });
 
   let showPopup:boolean = false;
 
@@ -13,28 +21,49 @@
 
   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>
+        <div class="InfoCardPopupTitle">{$_('popupText.name')}</div>
         <div class="InfoCardPopupCloseButton" on:click|preventDefault={closeInfoPopup}>
           <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
         </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">{$_('popupText.defaultText')}</p>
+        {/if}
       </div>
     </div>
   </section>
@@ -60,6 +89,9 @@
       content: '';
     }
   }
+  .InfoCardPopupLimitChanged {
+    background: #FFFFF8;
+  }
   .InfoCardPopupWrapper {
     width: ttp(12.5);
     padding: ttp(1.25);
@@ -69,8 +101,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,16 @@
+export const PlayerGamingLimitsPopupTranslations = {
+  en: {
+    popupText: {
+      name: `Info`,
+      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:`,
+      defaultText: `Nulla ornare pulvinar dui. Nullam viverra, lacus vel consectetur euismod, ante lorem aliquam nisi, non faucibus nulla lacus sed sapien. Sed imperdiet tristique tincidunt.`
+    }
+  },
+  ro: {
+    popupText: {
+      name: `Info`,
+      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:`,
+      defaultText: `Nulla ornare pulvinar dui. Nullam viverra, lacus vel consectetur euismod, ante lorem aliquam nisi, non faucibus nulla lacus sed sapien. Sed imperdiet tristique tincidunt.`
+    }
+  }
+};