@everymatrix/player-account-balance-modal-nd 1.37.4

package/src/PlayerAccountBalanceModal.svelte

@@ -0,0 +1,731 @@
+<svelte:options tag={null} />
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { _, addNewMessages, setLocale, setupI18n } from './i18n';
+  import { TRANSLATIONS } from './translations';
+  import { EventSourcePolyfill } from 'event-source-polyfill';
+  import * as currencyFormatter from 'currency.js'
+
+  export let userid:string = '';
+  export let session:string = '';
+  export let endpoint:string = '';
+  export let lang:string = 'en';
+  export let clientstyling:string = '';
+  export let clientstylingurl:string = '';
+  export let translationurl:string = '';
+  export let customlocaleidentifier: string = '';
+  export let gmversion:string = '';
+  export let displaybalanceoption:string = 'All';
+  export let currencyseparator:string = '';
+  export let currencydecimal:string = '';
+  export let currencyprecision:string = '';
+
+  let showBalance:boolean = false;
+  let modalOpened: boolean = false;
+  let totalBalance:string = '';
+  let currency = '';
+  let customStylingContainer:HTMLElement;
+  let balanceItems:Array<any> = [];
+  let balanceSumUpdate:string = '0';
+
+  // let eventSource: EventSourcePolyfill;
+  let lastBalanceStream: EventSourcePolyfill;
+  let isLoading: boolean = false;
+  const amounts = {
+          Casino: {
+            Real: 0,
+            Bonus: 0
+          },
+          Sports: {
+            Real: 0,
+            Bonus: 0
+          }
+        };
+
+  // setupI18n({ withLocale: 'en', translations: {}});
+
+  const setTranslationUrl = ():void => {
+    let url:string = translationurl;
+
+    fetch(url).then((res:any) => res.json())
+    .then((res) => {
+      Object.keys(res).forEach((item:any):void => {
+        addNewMessages(item, res[item]);
+      });
+    }).catch((err:any) => {
+      console.log(err);
+    });
+  }
+
+  Object.keys(TRANSLATIONS).forEach((item:any):void => {
+    addNewMessages(item, TRANSLATIONS[item]);
+  });
+
+  const menuAction = (data):void => {
+    switch (data) {
+      case 'balance':
+        window.postMessage({ type: 'BalanceModalStatus', status: 'open' }, window.location.href);
+        showBalance = true;
+        setTimeout(() => {
+          modalOpened = true
+        }, 150);
+        break;
+
+      case 'closebalance':
+        modalOpened = false;
+        window.postMessage({ type: 'BalanceModalStatus', status: 'close' }, window.location.href);
+        setTimeout(() => {
+          showBalance = false;
+        }, 150);
+        break;
+
+      default:
+        // do nothing
+        break;
+    }
+  }
+
+  const getPlayerAccountBalanceDataCore = async (url:URL):Promise<void> => {
+    try {
+      isLoading = true;
+
+      const res = await fetch(url, {
+        method: 'GET',
+        headers: { 'X-SessionID': session }
+      });
+
+      const data = await res.json();
+
+      if(res.ok) {
+        isLoading = false;
+
+        window.postMessage({ type: 'BalancedFetched' }, window.location.href);
+
+        // Set data
+        balanceItems = data.items
+        currency = Object.keys(data.totalAmount)[0];
+        totalBalance = formatBalance(data.totalAmount[currency]);
+
+      } else {
+        isLoading = false;
+        throw new Error('Failed to fetch balance data !');
+      }
+    } catch(err) {
+      isLoading = false;
+      console.log('Balance error: ', err);
+    } finally { isLoading = false; }
+  }
+
+  const getPlayerAccountBalanceData16 = async (url:URL):Promise<void> => {
+    try {
+      isLoading = true;
+
+      if (displaybalanceoption == 'Casino') {
+        url.searchParams.append('productType', 'Casino');
+      }
+      if (displaybalanceoption == 'Sports') {
+        url.searchParams.append('productType', 'Sports');
+      }
+      if (displaybalanceoption === 'All') {
+        url.searchParams.append('productType', 'Casino');
+        url.searchParams.append('productType', 'Sports');
+      }
+
+      const res = await fetch(url, {
+        method: 'GET',
+        headers: { 'X-SessionID': session }
+      });
+      const data = await res.json();
+
+      if(res.ok) {
+        isLoading = false;
+
+        for (const balance of data.items) {
+          const { type, amount, productType } = balance;
+          if (displaybalanceoption === 'Casino') {
+            amounts.Casino[type] = amount;
+          } else if (displaybalanceoption === 'Sports') {
+            amounts.Sports[type] = amount;
+          } else if (displaybalanceoption === 'All') {
+            if ( productType && type ) {
+              amounts[productType][type] = amount;
+            }
+          }
+        }
+        currency = Object.keys(data.totalAmount)[0];
+        totalBalance = formatBalance(data.totalAmount[currency]);
+
+      } else {
+        isLoading = false;
+        throw new Error('Failed to fetch balance data !');
+      }
+    } catch(err) {
+      isLoading = false;
+      console.log('Balance error: ', err);
+    } finally { isLoading = false; }
+  }
+
+
+  const subscribeToBalanceUpdates = (src: string, sessionId): void => {
+    let stream = new EventSourcePolyfill(
+      src,  {
+        headers: {
+          'accept': 'text/event-stream',
+          'X-SessionId': sessionId
+        }
+      });
+
+    if (lastBalanceStream) {
+      lastBalanceStream.close();
+    }
+
+    lastBalanceStream = stream;
+
+    stream.addEventListener("message", (e: any) => {
+      balanceSumUpdate = '0';
+
+      try {
+        let { balanceChange, currency } = JSON.parse(e.data);
+        if(gmversion === 'gmcore'){
+          balanceItems = balanceItems.map(element => {
+            if (balanceChange && balanceChange[element.id]) {
+              element = updateBalance(element, balanceChange[element.id].afterAmount);
+            }
+            balanceSumUpdate = (parseFloat(element?.balanceAmount) + parseFloat(balanceSumUpdate)).toString();
+            return element;
+          });
+          totalBalance = formatBalance(Number(balanceSumUpdate));
+
+        } else if(gmversion === 'gm16'){
+          for (let key in balanceChange){
+            amounts.Casino[key] = balanceChange[key].afterAmount;
+          }
+          totalBalance = formatBalance(amounts.Casino.Bonus + amounts.Casino.Real);
+        }
+
+        currency = currency;
+      } catch(err) {
+        console.log('Balance stream failed: ', err);
+        subscribeToBalanceUpdates(`${endpoint}/v1/player/${userid}/balance/updates`, session);
+      }
+    });
+  }
+
+  function updateBalance(item, afterAmount) {
+    return { ...item, balanceAmount: afterAmount };
+  }
+
+  const balanceModalOpenDeposit = (): void => {
+    menuAction('closebalance');
+    window.postMessage({ type: 'GoToDeposit' }, window.location.href);
+
+    //Analytics event
+    if(typeof gtag == 'function'){
+      gtag('event', 'GoToDeposit', {
+        'context': 'PlayerAccountBalanceModal'
+      });
+    }
+  }
+
+  const initialLoad = (): void => {
+    setLocale(lang);
+
+    switch (gmversion) {
+      case 'gmcore':
+      getPlayerAccountBalanceDataCore(new URL(`${endpoint}/v1/player/${userid}/account`));
+      break;
+
+      case 'gm16':
+      getPlayerAccountBalanceData16(new URL(`${endpoint}/v1/player/${userid}/balance`));
+        break;
+
+      default:
+        throw Error(`Invalid apiversion attribute: ${gmversion}`);
+    }
+  }
+
+  const setLocaleIdentifier = (): string => {
+
+    let localeIdentifier: string;
+    // Check if a custom locale identifier is present for the main language of the website.
+    if (customlocaleidentifier.includes(lang)) {
+      localeIdentifier = customlocaleidentifier;
+    }
+
+    return localeIdentifier;
+  }
+
+  const formatBalance = (balance: number): string => {
+    let formattedBalance: string;
+
+    if (customlocaleidentifier) {
+      formattedBalance = new Intl.NumberFormat(setLocaleIdentifier(), { useGrouping: true }).format(balance);
+    } else {
+      if (currencyseparator && currencydecimal) {
+        formattedBalance = currencyFormatter.default(balance, { separator: currencyseparator, decimal: currencydecimal, symbol: '', precision: parseInt(currencyprecision ? currencyprecision : '2', 10) }).format();
+      } else {
+        formattedBalance = currencyFormatter.default(balance, { separator: '.', decimal: ',', symbol: '', precision: parseInt(currencyprecision ? currencyprecision : '2', 10) }).format();
+      }
+    }
+
+    return formattedBalance;
+  }
+
+  const messageHandler = (e: any) => {
+    if (e.data) {
+      switch (e.data.type) {
+        case 'LogoutSuccessfull':
+          lastBalanceStream.close();
+          break;
+      }
+    }
+  }
+
+  const setClientStyling = ():void => {
+    let sheet = document.createElement('style');
+    sheet.innerHTML = clientstyling;
+    customStylingContainer.appendChild(sheet);
+  }
+
+  const setClientStylingURL = ():void => {
+    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);
+      });
+  }
+
+  onMount(() => {
+    window.addEventListener('message', messageHandler, false);
+
+    return () => {
+      window.removeEventListener('message', messageHandler);
+      if(lastBalanceStream) lastBalanceStream.close();
+    }
+  });
+
+  $: lang && setLocaleIdentifier();
+  $: endpoint &&
+    userid &&
+    session &&
+    lang &&
+    gmversion &&
+    displaybalanceoption &&
+    initialLoad();
+
+  $: endpoint &&
+      userid &&
+      session &&
+      subscribeToBalanceUpdates(`${endpoint}/v1/player/${userid}/balance/updates`, session)
+  ;
+  $: clientstyling && customStylingContainer && setClientStyling();
+  $: clientstylingurl && customStylingContainer && setClientStylingURL();
+  $: translationurl && setTranslationUrl();
+</script>
+
+<div bind:this={customStylingContainer}>
+  <div class="ShowBalance">
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <div class="BalanceValue" on:click={()=>menuAction('balance')}>
+      <p>{totalBalance} {currency}</p>
+        <span class=" {modalOpened ? 'TriangleActive' : 'TriangleInactive'}">
+          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="6.835" viewBox="0 0 14 6.835">
+            <path id="arrow" d="M281.541,447.921a.488.488,0,0,0,.295-.122l6.5-5.851a.488.488,0,1,0-.65-.726l-6.176,5.556-6.176-5.556h0a.488.488,0,1,0-.65.726l6.5,5.851a.488.488,0,0,0,.355.122Z" transform="translate(-274.511 -441.088)" fill="#d1d1d1"/>
+          </svg>
+        </span>
+    </div>
+    {#if showBalance}
+      <div class="BalanceModalWrapper {modalOpened ? 'Open' : ''}">
+        <div class="BalanceModalClose {modalOpened ? 'Open' : ''}" on:click={()=>menuAction('closebalance')} />
+        <div class="BalanceModal {modalOpened ? 'Open' : ''}">
+          <div class="ModalContent {modalOpened ? 'Open' : ''}">
+            <div class="BalanceModalHeader">
+              <p class="BalanceModalTitle">{$_('balanceTitle')}</p>
+            </div>
+            <div class="BalanceModalBody">
+              <div class="BalanceModalRow">
+                <p class="BalanceModalText">{$_('totalBalance')}</p>
+                <p class="BalanceModalValue">
+                  <span class="BalanceModalAmount">
+                    {totalBalance}
+                  </span>
+                  <span class="BalanceModalCurrency">
+                    {currency}
+                  </span>
+                </p>
+              </div>
+              {#if gmversion == 'gm16'}
+                {#if displaybalanceoption === 'Casino' || displaybalanceoption === 'Sports' }
+                  <div class="BalanceModalRow">
+                    <p class="BalanceModalText">{$_('cashBalance')}</p>
+                    <p class="BalanceModalValue">
+                      <span class="BalanceModalAmount">
+                        {amounts[displaybalanceoption ? displaybalanceoption : 'Casino'].Real}
+                      </span>
+                      <span class="BalanceModalCurrency">
+                        {currency}
+                      </span>
+                    </p>
+                  </div>
+                  <div class="BalanceModalRow">
+                    <p class="BalanceModalText">{$_('bonusBalance')}</p>
+                    <p class="BalanceModalValue">
+                      <span class="BalanceModalAmount">
+                        {amounts[displaybalanceoption ? displaybalanceoption : 'Casino'].Bonus}
+                      </span>
+                      <span class="BalanceModalCurrency">
+                        {currency}
+                      </span>
+                    </p>
+                  </div>
+                {:else if displaybalanceoption === 'All'}
+                  <div class="BalanceModalRowBoth">
+                    <div class="BalanceModalRowLine">
+                      <p class="BalanceModalText">{$_('cashBalance')} Casino </p>
+                      <p class="BalanceModalValue">
+                        <span class="BalanceModalAmount">
+                          {formatBalance(amounts.Casino.Real)}
+                        </span>
+                        <span class="BalanceModalCurrency">
+                          {currency}
+                        </span>
+                      </p>
+                    </div>
+                    <div class="BalanceModalRowLine">
+                        <p class="BalanceModalText">{$_('cashBalance')} Sports </p>
+                        <p class="BalanceModalValue">
+                          <span class="BalanceModalAmount">
+                            {formatBalance(amounts.Sports.Real)}
+                          </span>
+                          <span class="BalanceModalCurrency">
+                            {currency}
+                          </span>
+                        </p>
+                    </div>
+                  </div>
+                  <div class="BalanceModalRowBoth">
+                    <div class="BalanceModalRowLine">
+                      <p class="BalanceModalText">{$_('bonusBalance')} Casino </p>
+                      <p class="BalanceModalValue">
+                        <span class="BalanceModalAmount">
+                          {formatBalance(amounts.Casino.Bonus)}
+                        </span>
+                        <span class="BalanceModalCurrency">
+                          {currency}
+                        </span>
+                      </p>
+                    </div>
+                    <div class="BalanceModalRowLine">
+                      <p class="BalanceModalText">{$_('bonusBalance')} Sports </p>
+                      <p class="BalanceModalValue">
+                        <span class="BalanceModalAmount">
+                          {formatBalance(amounts.Sports.Bonus)}
+                        </span>
+                        <span class="BalanceModalCurrency">
+                          {currency}
+                        </span>
+                      </p>
+                    </div>
+                  </div>
+                {/if}
+              {:else}
+                <div class="BalanceModalRow">
+                  <p class="BalanceModalText">{$_('cashBalance')}</p>
+                  <p class="BalanceModalValue">
+                    <span class="BalanceModalAmount">
+                      {formatBalance(balanceItems[0]?.balanceAmount)}
+                    </span>
+                    <span class="BalanceModalCurrency">
+                      {currency}
+                    </span>
+                  </p>
+                </div>
+                <div class="BalanceModalRow">
+                  <p class="BalanceModalText">{$_('bonusBalance')}</p>
+                  <p class="BalanceModalValue">
+                    <span class="BalanceModalAmount">
+                      {formatBalance(balanceItems[1]?.balanceAmount)}
+                    </span>
+                    <span class="BalanceModalCurrency">
+                      {currency}
+                    </span>
+                  </p>
+                </div>
+              {/if}
+            </div>
+            <div class="BalanceModalFooter">
+              <button
+                class="BalanceModalAction"
+                on:click={()=>balanceModalOpenDeposit()}>
+                  {$_('depositButton')}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    {/if}
+  </div>
+  {#if showBalance}
+    <div
+      class="ShowBalanceModalOverlay { modalOpened ? 'Open' : ''}"
+      on:click={()=>menuAction('closebalance')}
+    />
+  {/if}
+</div>
+
+<style lang="scss">
+*,
+  *::before,
+  *::after {
+    font-family: inherit
+  }
+
+  :host {
+    font-family: inherit;
+  }
+
+  input,
+  textarea,
+  button {font-family: inherit}
+
+  p {
+    padding: 0;
+    margin: 0;
+  }
+
+  @keyframes growWidthPercent {
+    from {
+      height: 0;
+    }
+    to {
+      height: 100%;
+    }
+  }
+
+  .ShowBalance {
+    position: relative;
+    .BalanceValue {
+      font-size: 14px;
+      cursor: pointer;
+      svg {
+        width: 16px;
+        fill: black;
+      }
+      display: flex;
+      flex-wrap: nowrap;
+      white-space: nowrap;
+
+      span {
+        padding-left: 5px;
+      }
+
+      .TriangleActive, .TriangleInactive {
+        display: block;
+        margin: 0 3px;
+        transition: all .2s;
+        &:hover {
+          transform: scale(1.2);
+        }
+
+        svg {
+          margin: 2px 0px;
+        }
+      }
+
+      .TriangleActive {
+        transform: scale(1.1) rotateX(180deg) translateY(3px);
+
+        &:hover {
+          transform: scale(1.1) rotateX(180deg) translateY(3px);
+        }
+      }
+
+      @media only screen and (max-width: 360px) {
+        font-size: 12px;
+        svg {
+          width: 12px;
+        }
+      }
+    }
+  }
+
+  .BalanceModalWrapper {
+    background: linear-gradient(90deg, rgba(42, 79, 55, 1) 0%, rgba(0, 61, 92, 1) 100%);
+    position: absolute;
+    top: 40px;
+    padding: 10px;
+    transform: translateX(-45%);
+    box-shadow: 0px 30px 30px var(--emw-header-color-primary, var(--emw-color-primary, #D0046C));
+    border-radius: 5px;
+    z-index: 17;
+    box-shadow: 0px 5px 20px 0px #191919;
+    transition: all .2s ease-in;
+    opacity: 0;
+    &:before {
+      content: "";
+      background: linear-gradient(90deg, rgba(42, 79, 55, 1) 0%, rgba(0, 61, 92, 1) 100%);
+      clip-path: polygon(50% 0, 0% 100%, 100% 100%);
+      position: absolute;
+      top: -8px;
+      left: 50%;
+      width: 25px;
+      height: 10px;
+      z-index: 1;
+    }
+
+    &.Open {
+      opacity: 1;
+    }
+  }
+
+  .BalanceModalClose {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    width: 20px;
+    height: 20px;
+    z-index: 1;
+    cursor: pointer;
+    transition: all .3s ease;
+    &:before {
+      content: "";
+      background: var(--emw-color-secondary, var(--emw-color-secondary, white));
+      position: absolute;
+      top: 8px;
+      left: 0;
+      width: 20px;
+      height: 2px;
+      transform: rotate(45deg);
+    }
+    &:after {
+      content: "";
+      background: var(--emw-color-secondary, var(--emw-color-secondary, white));
+      position: absolute;
+      top: 8px;
+      left: 0;
+      width: 20px;
+      height: 2px;
+      transform: rotate(-45deg);
+    }
+    opacity: 0;
+    &:hover {
+      transform: scale(1.1);
+    }
+    &.Open {
+      opacity: 1;
+    }
+  }
+
+  .BalanceModal {
+    transition: all .2s ease-in;
+    width: 270px;
+  }
+
+  .BalanceModalHeader {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 20px 0;
+    .BalanceModalTitle {
+      font-size: 16px;
+      font-weight: bold;
+      color: var(--emw-header-contrast, var(--emw-color-contrast, white));
+    }
+  }
+
+  .BalanceModalRowBoth{
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    padding: 20px 0;
+    border-bottom: 1px solid var(--emw-color-gray-100, #E6E6E6);
+    &:last-child {
+      border-bottom: none;
+    }
+    .BalanceModalRowLine{
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+    }
+    .BalanceModalText {
+      color: var(--emw-header-contrast, var(--emw-color-contrast, white));
+      font-size: 14px;
+      text-transform: capitalize;
+    }
+    .BalanceModalValue {
+      font-size: 14px;
+      font-weight: bold;
+      color: var(--emw-header-contrast, var(--emw-color-contrast, white));
+    }
+  }
+
+  .BalanceModalRow {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px 0;
+    border-bottom: 1px solid var(--emw-color-gray-100, #E6E6E6);
+    &:last-child {
+      border-bottom: none;
+    }
+    .BalanceModalText {
+      color: var(--emw-header-contrast, var(--emw-color-contrast, white));
+      font-size: 14px;
+      text-transform: capitalize;
+    }
+    .BalanceModalValue {
+      font-size: 14px;
+      font-weight: bold;
+      color: var(--emw-header-contrast, var(--emw-color-contrast, white));
+    }
+  }
+
+  .BalanceModalFooter {
+    display: flex;
+    align-items: center;
+    padding: 20px 0 10px;
+    .BalanceModalAction {
+      background: var(--emw-color-primary);
+      font-size: 12px;
+      color: white;
+      text-transform: uppercase;
+      width: 100%;
+      border-radius: 30px;
+      border: none;
+      padding: 10px 0;
+      cursor: pointer;
+      transition: all .2s ease-in;
+      box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, .2);
+      &:hover{
+        background: rgba(255,255,255,.1);
+        color: var(--emw-color-primary);
+        box-shadow: 0px 0px 0px 2px inset var(--emw-color-primary);
+        font-size: 14px;
+      }
+      &:active {
+        background: rgba(255,255,255,.5);
+      }
+    }
+  }
+
+  .ShowBalanceModalOverlay {
+    background-color: rgba(0,0,0,0.7);
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 16;
+    opacity: 0;
+    transition: all .2s linear;
+
+    &.Open {
+      opacity: 1;
+    }
+  }
+</style>