@everymatrix/player-rglimits 1.28.3

package/src/PlayerRglimits.svelte

@@ -0,0 +1,510 @@
+<svelte:options tag={null} />
+<script lang="ts">
+  import moment from 'moment';
+  import { _, addNewMessages, setLocale } from './i18n';
+  import { TRANSLATIONS } from './translations.js';
+  import { onMount } from 'svelte';
+
+  import faCaretRightSvg from './images/fa-caret-right.svg';
+  import faDollarCircleSvg from './images/usd-circle.svg';
+  import '@everymatrix/general-animation-loading'
+
+  export let session: string = '';
+  export let sessiontype: string = '';
+  export let userid: string = '';
+  export let endpoint: string = '';
+  export let transdetailsurl:string = '';
+  export let transactionspageurl:string = '';
+  export let clientstyling:string = '';
+  export let clientstylingurl:string = '';
+  export let lang:string = 'en';
+  export let translationurl:string = '';
+  export let datetimeformat:string = '';
+
+  let displayNone:boolean = false;
+  let customStylingContainer: HTMLElement;
+
+  let isMounted:boolean = false;
+  let isLoggedIn:boolean = false;
+  let sessionID:string = '';
+  let playerID:string = '';
+  let isLoading: boolean = true;
+  let isGaugeLoading: boolean = true;
+  let noLimitToDisplay:boolean;
+
+  let multipleDepositLimits:boolean = false;
+  let displayedLimit:Object = {
+    spentAmount: '',
+    limitCurrency: 'EUR',
+    remainingAmount: '',
+    limitType: '',
+    limitProducts: []
+  };
+  let limitPeriodList:Array<any> = [];
+  let selectedLimitPeriod:string = '';
+  let limitDefinitionList:Array<any> = [];
+
+  let gaugeValue:number = 0;
+  let gaugeNeedleValue:number = 0.750;
+  let totalSpentPerc:number = 0.00;
+
+  let errorMessage:string = '';
+
+  Object.keys(TRANSLATIONS).forEach((item:any):void => {
+    addNewMessages(item, TRANSLATIONS[item]);
+  });
+
+  const setSession = ():void => {
+    isLoggedIn = true;
+    sessionID = session;
+    playerID = userid;
+  }
+
+  const handleError = (error):void => {
+    errorMessage = error;
+  }
+
+  const formatScheduleData = (limitDefinitionId:any, scheduleData:any):Object => {
+    const limitSchedule = scheduleData.find(x => x.playerLimitId === limitDefinitionId);
+    return limitSchedule
+      ? {
+        updateAmount: limitSchedule.updateAmount,
+        expires: limitSchedule.applyAt,
+        expiresString: dateToReadableString(limitSchedule.applyAt),
+        id: limitSchedule.id,
+        isRemoved: limitSchedule.updateAmount < 1,
+        isUpdated: limitSchedule.updateAmount > 0
+      }
+      : {
+        updateAmount: '',
+        expires: '',
+        expiresString: '',
+        id: '',
+        isRemoved: false,
+        isUpdated: false
+      }
+  }
+
+  const getLimitBalanceById = (limit:any):void => {
+    isLoading = true;
+    const queryParams:URLSearchParams = new URLSearchParams({limitDefinitionId: limit.id})
+    const url:URL = new URL(`${endpoint}/v1/player/${playerID}/limits/monetary/balance?${queryParams}`);
+    const options = {
+      method: 'GET',
+      headers: {
+        'X-SessionId': sessionID,
+        'X-Session-Type': sessiontype,
+      }
+    }
+    fetch(url, options)
+      .then((res:any) => res.json())
+      .then((res) => {
+        if (res && res.error) {
+          throw new Error(res.error);
+        }
+        setCurrentLimit(res.limitBalances[0], limit);
+      })
+      .catch((err) => {
+        handleError(err)
+      }).finally(() => {
+        isLoading = false;
+      })
+  }
+
+  const getLimitDefinitions = ():Promise<void> => {
+    return new Promise((resolve, reject) => {
+      const url:URL = new URL(`${endpoint}/v1/player/${playerID}/limits/monetary/`);
+      const options = {
+        method: 'GET',
+        headers: {
+          'X-SessionId': sessionID,
+          'X-Session-Type': sessiontype,
+        }
+      }
+      fetch(url, options)
+        .then((res:any) => res.json())
+        .then((res:any) => {
+          if (res && res.error) {
+            return reject(res.error);
+          }
+          return resolve(res.limits.length > 0 ? res.limits.filter((item:any) => item.type === 'Deposit') : []);
+        })
+        .catch((err) => {
+          return reject(err);
+        })
+    })
+  }
+
+  const handlePeriodChange = ():void => {
+    let selectedLimit = limitDefinitionList.find((limit) => `${limit.period} - ${limit.products[0]}` === selectedLimitPeriod)
+    getLimitBalanceById(selectedLimit);
+  }
+
+  const getLimitBalance = ():void => {
+    getLimitDefinitions().then((depositLimitsDefinitionsData) => {
+      limitDefinitionList = depositLimitsDefinitionsData;
+      if (limitDefinitionList.length === 0) {
+        isLoading = false;
+        noLimitToDisplay = true;
+        return;
+      }
+
+      if (limitDefinitionList.length > 1) {
+        const timeMap = {
+          'Daily': 0,
+          'Weekly': 1,
+          'Monthly': 2
+        }
+
+        limitDefinitionList.forEach((limit) => {
+          if (limitPeriodList.indexOf(`${limit.period} - ${limit.products[0]}`) === -1) {
+            limitPeriodList.push(`${limit.period} - ${limit.products[0]}`)
+          }
+        })
+
+        multipleDepositLimits = true;
+        limitPeriodList = limitPeriodList.sort((a, b) => {
+          return timeMap[a.split(' ')[0]] - timeMap[b.split(' ')[0]];
+        });
+      }
+
+      getLimitBalanceById(limitDefinitionList[0]);
+    }, (err) => {
+      isLoading = false;
+      handleError(err)
+    })
+  }
+
+  const dateToReadableString = (date:string):string => {
+    return moment(date).utc(true).format(datetimeformat || `DD/MM/YYYY HH:mm:ss`);
+  }
+
+  const setCurrentLimit = (limitBalance:any, limit:any):void => {
+    selectedLimitPeriod = `${limitBalance.limitPeriod} - ${limitBalance.limitProducts[0]}`;
+    const limitSchedule = formatScheduleData(limit.id, limit.schedules);
+
+    displayedLimit = Object.assign({
+      totalAmount: limitBalance.limitAmount,
+      spentAmount: parseFloat(limitBalance.spentBalance.amount).toFixed(2),
+      limitCurrency: limitBalance.limitCurrency,
+      remainingAmount: parseFloat(limitBalance.limitAmount - limitBalance.spentBalance.amount).toFixed(2),
+      limitPeriod: limitBalance.limitPeriod,
+      limitProducts: limitBalance.limitProducts[0],
+      product: limitBalance.limitWalletTypes
+    }, limitSchedule)
+
+    setGauge(displayedLimit);
+  }
+
+  const setGauge = (limit:any):void => {
+    let maxValueGauge = 0.50;
+    let maxValueNeedle = 1.250;
+    totalSpentPerc = 0.00;
+    totalSpentPerc = (limit.spentAmount * 100) / limit.totalAmount;
+    totalSpentPerc = parseFloat(totalSpentPerc).toFixed(2);
+    let spentAmountPerc = (limit.spentAmount * maxValueGauge) / limit.totalAmount;
+    gaugeValue = Number(parseFloat(spentAmountPerc).toFixed(3));
+    gaugeValue = gaugeValue > maxValueGauge ? maxValueGauge : gaugeValue;
+    gaugeNeedleValue = 0.750;
+    gaugeNeedleValue = Number(parseFloat(spentAmountPerc + gaugeNeedleValue).toFixed(3));
+    gaugeNeedleValue = gaugeNeedleValue > maxValueNeedle ? maxValueNeedle : gaugeNeedleValue;
+    isGaugeLoading = false;
+  }
+
+  onMount(() => {
+    setTimeout(() => {
+      isMounted = true;
+    }, 50)
+  })
+
+  const setClientStyling = ():void => {
+    let sheet = document.createElement('style');
+    sheet.innerHTML = clientstyling;
+    customStylingContainer.appendChild(sheet);
+  }
+
+  const setClientStylingURL = ():void => {
+    displayNone = true;
+
+    let url:URL = new URL(clientstylingurl);
+    let cssFile:HTMLElement = document.createElement('style');
+
+    fetch(url.href)
+      .then((res:any) => res.text())
+      .then((data:any) => {
+        cssFile.innerHTML = data;
+
+        setTimeout(() => { customStylingContainer.appendChild(cssFile) }, 1);
+        setTimeout(() => { displayNone = false; }, 500);
+      });
+  }
+
+  const setActiveLanguage = ():void => {
+    setLocale(lang);
+  }
+
+  const setTranslationUrl = ():void => {
+    let url:URL = new URL(translationurl);
+
+    fetch(url.href).then((res:any) => res.json())
+      .then((res) => {
+        Object.keys(res).forEach((item:any):void => {
+          addNewMessages(item, res[item]);
+        });
+      }).catch((err:any) => {
+        console.log(err);
+      });
+  }
+
+  $: isMounted && session && userid && setSession();
+  $: isMounted && isLoggedIn && getLimitBalance();
+  $: clientstyling && customStylingContainer && setClientStyling();
+  $: clientstylingurl && customStylingContainer && setClientStylingURL();
+  $: lang && setActiveLanguage();
+  $: translationurl && setTranslationUrl();
+</script>
+
+
+<div class="LimitsContainer" bind:this={customStylingContainer}>
+  {#if noLimitToDisplay}
+    <p>{$_('noLimitToDisplay')}</p>
+  {:else if errorMessage}
+    <strong class="ErrorMessage">{errorMessage}</strong>
+  {:else}
+    <div class="ContentLeft">
+      <h2 class="LimitTypeHeader"><img class="HeaderIcon" alt="user" src="{faDollarCircleSvg}" /> Deposit limit</h2>
+      {#if isLoading}
+        <general-animation-loading clientstyling={clientstyling} clientstylingurl={clientstylingurl} />
+      {:else}
+        <div class="DetailsContainer Entries">
+          <span>{$_('spentAmount')}: </span>
+          <span>{$_('remainingAmount')}: </span>
+          {#if displayedLimit.isUpdated === true}
+            <span>{$_('futureAmount')}: </span>
+          {/if}
+          <span>{$_('limitPeriod')}: </span>
+          <span>{$_('displayedProduct')}: </span>
+        </div>
+        <div class="TextContainer">
+          <p><img class="TextIcon" alt="user" src="{faCaretRightSvg}" /> {displayedLimit.spentAmount} {displayedLimit.limitCurrency}</p>
+          <p><img class="TextIcon" alt="user" src="{faCaretRightSvg}" /> {displayedLimit.remainingAmount} {displayedLimit.limitCurrency}</p>
+          {#if displayedLimit.isUpdated === true}
+            <p><img class="TextIcon" alt="user" src="{faCaretRightSvg}" /> {displayedLimit.updateAmount} {displayedLimit.limitCurrency} </p>
+          {/if}
+          <p><img class="TextIcon" alt="user" src="{faCaretRightSvg}" /> {displayedLimit.limitPeriod}</p>
+          <p><img class="TextIcon" alt="user" src="{faCaretRightSvg}" /> {displayedLimit.limitProducts}</p>
+        </div>
+        {#if displayedLimit.isRemoved === true || displayedLimit.isUpdated === true }
+          <div class="ExtraInfoContainer">
+            {#if displayedLimit.isRemoved === true}
+              <span>{$_('limitRemoved')}: {displayedLimit.expiresString}</span>
+            {/if}
+            {#if displayedLimit.isUpdated === true}
+              <span>{$_('limitUpdated')}: {displayedLimit.expiresString}</span>
+            {/if}
+          </div>
+        {/if}
+        {#if sessiontype === 'admin'}
+          <div class="UsefulLinksSection">
+            {#if transdetailsurl}
+              <a href="{transdetailsurl}" target="_blank">{$_('additionalLink1')}</a>
+            {:else if transactionspageurl}
+              <a href="{transactionspageurl}" target="_blank">{$_('additionalLink2')}</a>
+            {/if}
+          </div>
+        {/if}
+      {/if}
+      {#if multipleDepositLimits}
+        <div class="MultipleSelectContainer">
+          <label for="LimitPeriod">{$_('changeLimitLabel')}: </label>
+          <select bind:value={selectedLimitPeriod} id="LimitPeriod" on:change={handlePeriodChange}>
+            {#each limitPeriodList as value}
+              <option {value}>
+                {value}
+              </option>
+            {/each}
+          </select>
+        </div>
+      {/if}
+    </div>
+    <div class="ContentRight">
+      {#if isGaugeLoading}
+        <general-animation-loading clientstyling={clientstyling} clientstylingurl={clientstylingurl} />
+      {:else}
+        <div class="AmountContainer">{displayedLimit.totalAmount} {displayedLimit.limitCurrency}</div>
+        <div class="Gauge">
+          <div class="GaugeBody">
+            <div class="GaugeFill" style="--transform-value: rotate({gaugeValue}turn)"></div>
+            <div class="GaugeCover">{displayedLimit.spentAmount} {displayedLimit.limitCurrency}</div>
+            <div class="GaugeCoverMin"></div>
+            <div class="GaugeNeedleCover"></div>
+            <div class="GaugeNeedle" style="--transform-needle-value: rotate({gaugeNeedleValue}turn)"></div>
+          </div>
+        </div>
+        <div class="MinMaxContainer">
+          <div class="Min"> <strong class="MinContent">0</strong> <span class="MinContentCurrency">{displayedLimit.limitCurrency}</span></div>
+          <div class="Max"> <strong class="MaxContent">{displayedLimit.totalAmount}</strong> <span class="MaxContentCurrency">{displayedLimit.limitCurrency}</span></div>
+        </div>
+      {/if}
+    </div>
+  {/if}
+</div>
+
+
+<style lang="scss">
+  $primary-text-color: var(--emw--color-gray-150, #a9b6ce);
+  $primary-gauge-fill-color: var(--emw--color-primary, #D0046C);
+  $secondary-gauge-background-color: var(--emw--color-gray-100, #E6E6E6);
+  $primary-contrast-color: var(--emw--color-contrast, #07072A);
+
+  *,
+  *::before,
+  *::after {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    text-decoration: none;
+    outline: none;
+    box-sizing: border-box;
+  }
+
+  .ErrorMessage {
+    margin: 0 15px;
+    font-size: 12px;
+    color: var(--emw--color-error, var(--emw--color-red, #ed0909));
+  }
+
+  .LimitsContainer {
+    display: flex;
+    width: 100%;
+    max-width: 620px;
+    min-height: 150px;
+    border: 1px solid $primary-contrast-color;
+    border-radius: 20px;
+    overflow: hidden;
+    box-shadow: 0.6em 0.6em 0.4em $primary-text-color;
+
+    @container (max-width: 720px) {
+      max-width: 355px;
+    }
+  }
+  .ContentLeft { padding: 1rem; width: 318px; line-height: 20px; }
+  .LimitTypeHeader { color: $primary-text-color; margin-bottom: 20px; max-width: 225px; }
+  .HeaderIcon { height: 20px; width: 20px; color: $primary-text-color; }
+  .DetailsContainer { margin-bottom: 15px; display: inline;
+    span { float: left; clear: both; }
+  }
+  .ContentRight { min-width: 300px; padding: 1rem; display: flex; justify-content: center; flex-direction: column; }
+  .AmountContainer {
+    padding: 0.3rem;
+    font-size: xx-large;
+    text-align: center;
+    border: 1px solid $primary-contrast-color;
+    border-radius: 20px;
+    box-shadow: 0.16em 0.16em 0.1em var(--emw--color-gray-150, #a9b6ce);
+    background-color: #F5F5F5;
+  }
+  .TextContainer { display: inline-block; padding-left: 5px;
+    p { width: 100%; display: block; clear: both; font-weight: bold; }
+  }
+  .ExtraInfoContainer { padding: 1rem 0; color: var(--emfe-w-color-red, #ed0909); }
+  .UsefulLinksSection { padding-top: 5px;
+    a { float: left; clear: both; color: $primary-contrast-color; }
+  }
+  .MultipleSelectContainer { float: left; padding-top: 1rem; clear: both;
+    label { float: left; padding-right: 5px; }
+    select { float: right; background: $primary-text-color; border-radius: 5px; margin: 2px }
+  }
+  .TextIcon { color: $primary-gauge-fill-color; }
+
+  .Gauge {
+    width: 100%;
+    font-family: 'Roboto', sans-serif;
+    font-size: 32px;
+    color: black;
+    margin-top: 1rem;
+  }
+
+  .GaugeBody {
+    width: 100%;
+    height: 0;
+    padding-bottom: 50%;
+    background: $secondary-gauge-background-color;
+    position: relative;
+    border-top-left-radius: 100% 200%;
+    border-top-right-radius: 100% 200%;
+    overflow: hidden;
+  }
+
+  .GaugeFill {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: inherit;
+    height: 100%;
+    background: $primary-gauge-fill-color;
+    transform-origin: center top;
+    transform: var(--transform-value);
+    transition: transform 0.2s ease-out;
+  }
+
+  .GaugeCover {
+    width: 75%;
+    height: 150%;
+    background: var(--emw--color-white, #FFFFFF);
+    position: absolute;
+    border-radius: 50%;
+    top: 25%;
+    left: 50%;
+    transform: translateX(-50%);
+
+    //Text
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-bottom: 47%;
+    box-sizing: border-box;
+    font-size: 20px;
+  }
+
+  .GaugeCoverMin {
+    width: 50px;
+    height: 50px;
+    background: $primary-gauge-fill-color;
+    position: relative;
+    top: 6.7rem;
+    left: 50%;
+    border-radius: 50%;
+    transform: translateX(-50%);
+  }
+
+  .GaugeNeedleCover {
+    width: 8%;
+    height: 16%;
+    background: var(--emw--color-black, #000000);
+    position: absolute;
+    top: 90%;
+    left: 50%;
+    border: 4px solid var(--emw--color-white, #FFFFFF);
+    border-radius: 50%;
+    transform: translateX(-50%);
+    transition: transform 0.2s ease-out;
+  }
+
+  .GaugeNeedle {
+    width: 0.2rem;
+    height: 3.5rem;
+    background: linear-gradient(0deg, #000000 0, #000000 55%, #c5c5c5 55%, #c5c5c5 90%, #000000 90%, #000000 100%);
+    display: inline-block;
+    left: 49.5%;
+    position: absolute;
+    bottom: 1%;
+    transform: var(--transform-needle-value);
+    transform-origin: bottom;
+    transition: transform 0.2s ease-out;
+  }
+
+  .MinMaxContainer { }
+  .Min { width: 50%; float: left; }
+  .Max { width: 49%; float: right; text-align: right; }
+</style>

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/images/caret-right-solid.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="12" width="6" viewBox="0 0 256 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M246.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-9.2-9.2-22.9-11.9-34.9-6.9s-19.8 16.6-19.8 29.6l0 256c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l128-128z"/></svg>

package/src/images/fa-caret-right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="12" width="6" viewBox="0 0 256 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="#18a0fb" d="M246.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-9.2-9.2-22.9-11.9-34.9-6.9s-19.8 16.6-19.8 29.6l0 256c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l128-128z"/></svg>

package/src/images/gauge-body-background.svg

@@ -0,0 +1,5 @@
+<svg xmlns="
+http://www.w3.org/2000/svg"
+width="500" height="250" viewBox="0 0 220 110" fill="none">
+<path d="M15.5 110C15.5 84.937 25.4562 60.9006 43.1784 43.1784C60.9006 25.4562 84.9371 15.5 110 15.5C135.063 15.5 159.099 25.4562 176.822 43.1784C194.544 60.9006 204.5 84.937 204.5 110" stroke="black" stroke-width="15" stroke-dasharray="1 1"/>
+</svg>

package/src/images/usd-circle.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#a9b6ce" width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M11,9h4a1,1,0,0,0,0-2H13V6a1,1,0,0,0-2,0V7a3,3,0,0,0,0,6h2a1,1,0,0,1,0,2H9a1,1,0,0,0,0,2h2v1a1,1,0,0,0,2,0V17a3,3,0,0,0,0-6H11a1,1,0,0,1,0-2Zm1-8A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z"/></svg>

package/src/index.ts

@@ -0,0 +1,4 @@
+import PlayerRglimits from './PlayerRglimits.svelte';
+
+!customElements.get('player-rglimits') && customElements.define('player-rglimits', PlayerRglimits);
+export default PlayerRglimits;