npm - @everymatrix/player-active-bonuses - Versions diffs - 1.0.16 → 1.0.70 - Mend

@everymatrix/player-active-bonuses 1.0.16 → 1.0.70

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (21) hide show

package/components/PlayerActiveBonuses-BkqWgTid.js +5227 -0
package/components/PlayerActiveBonuses-BsIRlBzF.cjs +5 -0
package/components/PlayerBonusCard-1Tt_JTXU.cjs +10 -0
package/components/PlayerBonusCard-CnC-nNuL.js +3132 -0
package/es2015/player-active-bonuses.cjs +1 -0
package/es2015/player-active-bonuses.js +16 -0
package/package.json +17 -33
package/README.md +0 -30
package/dist/player-active-bonuses.js +0 -2
package/dist/player-active-bonuses.js.map +0 -1
package/index.html +0 -21
package/index.js +0 -1
package/public/favicon.png +0 -0
package/public/reset.css +0 -48
package/rollup.config.js +0 -67
package/src/PlayerActiveBonuses.svelte +0 -568
package/src/i18n.js +0 -27
package/src/index.ts +0 -4
package/src/translations.js +0 -86
package/stories/PlayerActiveBonuses.stories.js +0 -13
package/tsconfig.json +0 -6

package/index.html DELETED Viewed

@@ -1,21 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<meta charset='utf-8'>
-	<meta name='viewport' content='width=device-width,initial-scale=1'>
-	<title>
-    player-active-bonuses
-  </title>
-  <link rel="stylesheet" href="public/reset.css">
-	<script src='dist/player-active-bonuses.js'></script>
-</head>
-<body>
-  <div class="webcomponent">
-    <player-active-bonuses></player-active-bonuses>
-  </div>
-</body>
-</html>

package/index.js DELETED Viewed

	@@ -1 +0,0 @@
1	- import './dist/player-active-bonuses.js';

package/public/favicon.png DELETED Viewed

Binary file

package/public/reset.css DELETED Viewed

@@ -1,48 +0,0 @@
-/* http://meyerweb.com/eric/tools/css/reset/
-   v2.0 | 20110126
-   License: none (public domain)
-*/
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
-	margin: 0;
-	padding: 0;
-	border: 0;
-	font-size: 100%;
-	font: inherit;
-	vertical-align: baseline;
-}
-/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section {
-	display: block;
-}
-body {
-	line-height: 1;
-}
-ol, ul {
-	list-style: none;
-}
-blockquote, q {
-	quotes: none;
-}
-blockquote:before, blockquote:after,
-q:before, q:after {
-	content: '';
-	content: none;
-}
-table {
-	border-collapse: collapse;
-	border-spacing: 0;
-}

package/rollup.config.js DELETED Viewed

@@ -1,67 +0,0 @@
-import svelte from 'rollup-plugin-svelte';
-import commonjs from '@rollup/plugin-commonjs';
-import resolve from '@rollup/plugin-node-resolve';
-import serve from 'rollup-plugin-dev-server';
-import livereload from 'rollup-plugin-livereload';
-import { terser } from 'rollup-plugin-terser';
-import sveltePreprocess from 'svelte-preprocess';
-import typescript from '@rollup/plugin-typescript';
-import uglify from 'rollup-plugin-uglify';
-import image from '@rollup/plugin-image';
-const production = process.env.NODE_ENV == 'production';
-const dev = process.env.NODE_ENV == 'development';
-export default {
-  input: 'src/index.ts',
-  output: {
-    sourcemap: true,
-    format: 'umd',
-    name: 'app',
-    file: 'dist/player-active-bonuses.js',
-  },
-  plugins: [
-    svelte({
-      preprocess: sveltePreprocess(),
-      compilerOptions: {
-        // @TODO check generate and hydratable
-        // generate: 'ssr',
-        // hydratable: true,
-        // enable run-time checks when not in production
-        customElement: true,
-        dev: !production
-      }
-    }),
-    image(),
-    commonjs(),
-    resolve({
-      browser: true,
-      dedupe: ['svelte']
-    }),
-    dev && serve({
-      open: true,
-      verbose: true,
-      allowCrossOrigin: true,
-      historyApiFallback: false,
-      host: 'localhost',
-      port: 5050,
-    }),
-    dev && livereload({ watch: ['', 'dist'] }),
-    typescript({
-      sourceMap: !production,
-      inlineSources: !production,
-    }),
-    // If we're building for production (npm run build
-    // instead of npm run dev), minify
-    production &&
-    terser({
-      output: {
-        comments: "all"
-      },
-    }),
-    production && uglify.uglify()
-  ],
-  watch: {
-    clearScreen: false
-  }
-};

package/src/PlayerActiveBonuses.svelte DELETED Viewed

@@ -1,568 +0,0 @@
-<svelte:options tag={null} />
-<script lang="ts">
-  import { onMount } from 'svelte';
-  import { getDevice } from 'rvhelper';
-  import { _, addNewMessages, setLocale } from './i18n';
-  import { PlayerActiveBonusesTranslations } from './translations';
-  import '@everymatrix/player-bonus-card';
-  export let endpoint:string = '';
-  export let session:string = '';
-  export let playerid:string = '';
-  export let lang:string = 'en';
-  export let translationUrl:string = '';
-  let isLoading:boolean = false;
-  let userAgent:string = window.navigator.userAgent;
-  let isMobile:boolean = (getDevice(userAgent) === 'PC') ? false : true;
-  let invalidBonusField:boolean = true;
-  let invalidBonusCode:boolean = false;
-  let bonusCode:string = '';
-  let playercurrency:string = '';
-  let filter:string = 'status=active';
-  let bonusesPrevPage:number = 0;
-  let bonusesNextPage:number = 0;
-  let bonusesLastPage:number = 0;
-  let numberOfPages:number = 0;
-  let bonusesPerPage:number = 6;
-  let currentPage:number = 0;
-  let activeBonusesList:Array<Object> = [];
-  let deleteBonusWalletId:string = '';
-  let bonusModal:boolean = false;
-  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(PlayerActiveBonusesTranslations).forEach((item:any) => {
-    addNewMessages(item, PlayerActiveBonusesTranslations[item]);
-  });
-  const messageHandler = (e:any) => {
-    if (e.data) {
-      switch(e.data.type) {
-        case 'DeleteActiveBonus':
-          deleteBonusWalletId = e.data.bonuswalletid;
-          bonusModal = true;
-          break;
-        case 'ProfileDetailsData':
-          let profileDetails:any = e.data.profileDetails;
-          playercurrency = profileDetails.currency;
-          break;
-        default:
-          // Nothing to do here
-          break;
-      }
-    }
-  }
-  const toggleScreen = () => {
-    window.postMessage({type: 'PlayerAccountMenuActive', isMobile}, window.location.href);
-  }
-  const checkBonusCode = () => {
-    if (bonusCode) {
-      return true;
-    } else {
-      return false;
-    }
-  }
-  const validateBonusCode = () => {
-    invalidBonusField = !checkBonusCode();
-  }
-  const getActiveBonuses = (offset) => {
-    let options = {
-      method: "GET",
-      headers: {
-        'X-SessionId': session,
-      }
-    };
-    let url:any = new URL(`${endpoint}/player/${playerid}/bonusWallet`);
-    url.searchParams.append('filter', filter);
-    url.searchParams.append('pagination', `offset=${offset},limit=${bonusesPerPage}`);
-    fetch(url, options)
-      .then((res:any) => res.json())
-      .then((data:any) => {
-        numberOfPages = (Math.ceil(data.total / bonusesPerPage));
-        if((offset - bonusesPerPage) >= 0) {
-          bonusesPrevPage = offset - bonusesPerPage;
-        }
-        if((offset + bonusesPerPage) < data.total) {
-          bonusesNextPage = offset + bonusesPerPage;
-        }
-        bonusesLastPage = (numberOfPages - 1) * bonusesPerPage;
-        currentPage = offset / bonusesPerPage;
-        activeBonusesList = data.items;
-        }, (err:any) => {
-        console.error(err);
-      });
-  }
-  const claimBonus = () => {
-    let url = new URL(`${endpoint}/player/${playerid}/claimbonus`);
-    let optionsClaimBonus = {
-      method: "POST",
-      headers: {
-        'X-SessionId': session,
-        'accept': 'application/json'
-      },
-    };
-    url.searchParams.append('currency', playercurrency);
-    url.searchParams.append('bonusCode', bonusCode);
-    fetch(url.href, optionsClaimBonus)
-      .then((res:any) => {
-        if (res.status == 200) {
-          invalidBonusCode = false;
-          getActiveBonuses(0);
-          window.postMessage({ type: 'WidgetNotification', data: {
-            type: 'success',
-            message: $_('activeBonuses.successMessage')
-          }}, window.location.href);
-          //Analytics event
-          if(typeof gtag == 'function'){
-            gtag('event', 'ClaimBonus', {
-              'context': 'PlayerActiveBonuses',
-              'userId' : `${playerid ? playerid : 'Not logged in'}`,
-              'bonusCode': `${bonusCode}`
-            });
-          }
-        } else {
-          invalidBonusCode = true;
-          window.postMessage({ type: 'WidgetNotification', data: {
-            type: 'error',
-            message: $_('activeBonuses.errorMessage')
-          }}, window.location.href);
-        }
-      });
-  }
-  const closeBonusModal = () => {
-    window.postMessage({ type: 'EnableScroll'}, window.location.href);
-    bonusModal = false;
-  }
-  const deleteBonus = () => {
-    let optionsDeleteBonus = {
-      method: "DELETE",
-      headers: {
-        'X-SessionId': session,
-        'Content-Type': "application/json",
-        'Accept': 'application/json',
-      }
-    };
-    let url:any = new URL(`${endpoint}/player/${playerid}/bonusWallet`);
-    url.searchParams.append('bonusWalletID', deleteBonusWalletId);
-    fetch(url, optionsDeleteBonus)
-      .then((res:any) => {
-        if (res.status == 200) {
-          getActiveBonuses(0);
-          closeBonusModal();
-        } else {
-          // Error
-        }
-      });
-  }
-  onMount(() => {
-    window.addEventListener('message', messageHandler, false);
-    return () => {
-      window.removeEventListener('message', messageHandler);
-    }
-  });
-  const initialLoad = () => {
-    setLocale(lang);
-  }
-  $: lang && initialLoad();
-  $: session && playerid && endpoint && getActiveBonuses(0);
-  $: translationUrl && setTranslationUrl();
-</script>
-{#if isLoading}
-  <div class="ModalLoader" part="ModalLoader"></div>
-{:else}
-  <div class="ActiveBonusesWrapper {isMobile ? 'ActiveBonusesWrapperMobile' : ''}" part="ActiveBonusesWrapper {isMobile ? 'ActiveBonusesWrapperMobile' : ''}">
-    {#if isMobile}
-      <div class="MenuReturnButton" part="MenuReturnButton" on:click={() => toggleScreen()}>
-        <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15"><defs><style>.aaa{fill:var(--emfe-w-color-primary, #D0046C);}</style></defs><g transform="translate(-20 -158)">
-          <g transform="translate(20 158)">
-            <path class="aaa" d="M7.5,0,6.136,1.364,11.3,6.526H0V8.474H11.3L6.136,13.636,7.5,15,15,7.5Z" transform="translate(15 15) rotate(180)"/>
-          </g></g>
-        </svg>
-        <h2 class="ActiveBonusesTitleMobile" part="ActiveBonusesTitleMobile">{$_('activeBonuses.title')}</h2>
-      </div>
-    {/if}
-    <h2 class="ActiveBonusesTitle {isMobile ? 'ActiveBonusesTitleNone' : ''}" part="ActiveBonusesTitle {isMobile ? 'ActiveBonusesTitleNone' : ''}">{$_('activeBonuses.title')}</h2>
-    <div class="BonusCodeContainer {isMobile ? 'BonusCodeContainerMobile' : ''}" part="BonusCodeContainer {isMobile ? 'BonusCodeContainerMobile' : ''}">
-      <label for="BonusCode">{$_('activeBonuses.bonusCode')}</label>
-      <div class="BonusCodeWrapper {isMobile ? 'BonusCodeWrapperMobile' : ''}" part="BonusCodeWrapper {isMobile ? 'BonusCodeWrapperMobile' : ''}">
-        <input class="BonusCodeInput {isMobile ? 'BonusCodeInputMobile' : ''}" part="BonusCodeInput {isMobile ? 'BonusCodeInputMobile' : ''}" bind:value={bonusCode} on:keyup={validateBonusCode} type="text" id="BonusCode" />
-        <button class="SubmitBonusCode {isMobile ? 'SubmitBonusCodeMobile' : ''}" part="SubmitBonusCode {isMobile ? 'SubmitBonusCodeMobile' : ''}" disabled={invalidBonusField} on:click={claimBonus}>{$_('activeBonuses.getBonus')}</button>
-      </div>
-      {#if invalidBonusCode}
-        <p class="InvalidBonusCodeMessage" part="InvalidBonusCodeMessage">{$_('activeBonuses.invalidBonusCode')}</p>
-      {/if}
-    </div>
-    <div class="ActiveBonusesGrid {isMobile ? 'ActiveBonusesGridMobile' : ''}" part="ActiveBonusesGrid {isMobile ? 'ActiveBonusesGridMobile' : ''}">
-      {#if activeBonusesList.length === 0}
-        <p>{$_('activeBonuses.noActiveBonuses')}</p>
-      {:else}
-        {#each activeBonusesList as activeBonus}
-          {#if activeBonus.type === 'freeRound'}
-            <player-bonus-card
-              bonuswalletid={activeBonus.walletId}
-              bonusdate={activeBonus.granted}
-              bonusstatus={activeBonus.status}
-              bonusname={activeBonus.name}
-              bonustype={activeBonus.type}
-              bonuscurrency={activeBonus.currency}
-              {lang}
-            ></player-bonus-card>
-          {:else}
-            <player-bonus-card
-              bonuswalletid={activeBonus.walletId}
-              bonusdate={activeBonus.granted}
-              bonusstatus={activeBonus.status}
-              bonusname={activeBonus.name}
-              bonustype={activeBonus.type}
-              bonusamount={activeBonus.grantedAmount}
-              bonuswageringamount={activeBonus.totalWR}
-              bonusremainingamount={activeBonus.currentAmount}
-              bonuscurrency={activeBonus.currency}
-              {lang}
-            ></player-bonus-card>
-          {/if}
-        {/each}
-      {/if}
-    </div>
-    {#if activeBonusesList.length !== 0}
-      <div class="BonusesPaginationWrapper {isMobile ? 'BonusesPaginationWrapperMobile' : ''}" part="BonusesPaginationWrapper {isMobile ? 'BonusesPaginationWrapperMobile' : ''}">
-        <span class="BonusesFirst {currentPage === 0 ? 'Inactive' : ''}" part="BonusesFirst {currentPage === 0 ? 'Inactive' : ''}" on:click={() => getActiveBonuses(0)}>&vert;&lt;</span>
-        <span class="BonusesPrev {currentPage === 0 ? 'Inactive' : ''}" part="BonusesPrev {currentPage === 0 ? 'Inactive' : ''}" on:click={() => getActiveBonuses(bonusesPrevPage)}>&lt;</span>
-        {#each Array(numberOfPages) as _, i}
-          <span class="BonusesPage {i === currentPage ? 'BonusPageActive' : ''}" part="BonusesPage {i === currentPage ? 'BonusPageActive' : ''}" on:click={() => getActiveBonuses(i*bonusesPerPage)}>{i+1}</span>
-        {/each}
-        <span class="BonusesNext {currentPage === (numberOfPages - 1) ? 'Inactive' : ''}" part="BonusesNext {currentPage === (numberOfPages - 1) ? 'Inactive' : ''}" on:click={() => getActiveBonuses(bonusesNextPage)}>&gt;</span>
-        <span class="BonusesLast {currentPage === (numberOfPages - 1) ? 'Inactive' : ''}" part="BonusesLast {currentPage === (numberOfPages - 1) ? 'Inactive' : ''}" on:click={() => getActiveBonuses(bonusesLastPage)}>&gt;&vert;</span>
-      </div>
-    {/if}
-  </div>
-  {#if bonusModal}
-  <div class="ModalWrapper {isMobile ? 'ModalWrapperMobile' : ''}" part="ModalWrapper {isMobile ? 'ModalWrapperMobile' : ''}">
-    <div class="ModalContent" part="ModalContent">
-      <div class="ModalBody" part="ModalBody">
-        <p class="ModalText" part="ModalText">{$_('activeBonuses.forfeitBonus')}</p>
-        <div class="ModalButtons" part="ModalButtons">
-          <button class="ModalCancel" part="ModalCancel" on:click={closeBonusModal}>{$_('activeBonuses.forfeitBonusCancel')}</button>
-          <button class="ModalConfirm" part="ModalConfirm" on:click={deleteBonus}>{$_('activeBonuses.forfeitBonusConfirm')}</button>
-        </div>
-      </div>
-    </div>
-  </div>
-  {/if}
-{/if}
-<style lang="scss">
-  :host {
-    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
-  }
-  .ActiveBonusesWrapper {
-    color: var(--emfe-w-color-contrast, #07072A);
-    padding: 50px;
-    max-width: 850px;
-    &.ActiveBonusesWrapperMobile {
-      padding: 20px 15px;
-      max-width: unset;
-    }
-  }
-  .MenuReturnButton{
-    color: var(--emfe-w-color-primary, #D0046C);
-    display: inline-flex;
-    align-items: center;
-    column-gap: 10px;
-    margin-bottom: 30px;
-    & svg {
-      fill: var(--emfe-w-color-primary, #D0046C);
-    }
-  }
-  .ActiveBonusesTitle {
-    font-size: 26px;
-    color: var(--emfe-w-color-primary, #D0046C);
-    font-weight: 400;
-  }
-  .ActiveBonusesTitleMobile {
-    font-size: 16px;
-  }
-  .ActiveBonusesTitleNone {
-    display: none;
-  }
-  .BonusCodeContainer {
-    color: var(--emfe-w-color-gray-300, #58586B);
-    display: flex;
-    flex-direction: column;
-    padding-bottom: 30px;
-    position: relative;
-    width: 70%;
-    label {
-      font-size: 14px;
-      font-weight: 300;
-      padding-bottom: 5px;
-    }
-    &.BonusCodeContainerMobile {
-      width: 100%;
-    }
-    .BonusCodeWrapper {
-      display: flex;
-      gap: 10px;
-      &.BonusCodeWrapperMobile {
-        flex-direction: column;
-      }
-      .BonusCodeInput {
-        width: 70%;
-        height: 44px;
-        border: 1px solid var(--emfe-w-color-gray-100, #E6E6E6);
-        border-radius: 5px;
-        box-sizing: border-box;
-        padding: 5px 15px;
-        font-size: 16px;
-        line-height: 18px;
-        &:focus {
-          outline-color: var(--emfe-w-color-primary, #D0046C);
-        }
-        &.BonusCodeInputMobile {
-          width: 100%;
-        }
-      }
-      .SubmitBonusCode {
-        background: var(--emfe-w-color-primary, #D0046C);
-        border: 1px solid var(--emfe-w-color-primary, #D0046C);
-        color: var(--emfe-w-color-white, #FFFFFF);
-        cursor: pointer;
-        border-radius: 5px;
-        width: 30%;
-        height: 44px;
-        font-size: 15px;
-        text-transform: uppercase;
-        text-align: center;
-        transition-duration: 0.3s;
-        box-sizing: border-box;
-        padding: 10px;
-        &[disabled] {
-          opacity: 0.3;
-          cursor: not-allowed;
-        }
-        &.SubmitBonusCodeMobile {
-          width: 100%;
-        }
-        &:active {
-          background: var(--emfe-w-color-primary-600, #99034F);
-        }
-      }
-    }
-    &.InvalidField {
-      input {
-        border: 1px solid var(--emfe-w-color-primary, #D0046C);
-        background: var(--emfe-w-color-primary-50, #FBECF4);
-        color: var(--emfe-w-color-primary, #D0046C);
-      }
-    }
-    .InvalidBonusCodeMessage {
-      color: var(--emfe-w-color-error, #FD2839);
-    }
-  }
-  .BonusCodeWrapper {
-    display: flex;
-    gap: 20px;
-  }
-  .SubmitBonusCode {
-    background: var(--emfe-w-color-primary, #D0046C);
-    border: 1px solid var(--emfe-w-color-primary, #D0046C);
-    color: var(--emfe-w-color-white, #FFFFFF);
-    cursor: pointer;
-    border-radius: 5px;
-    width: 30%;
-    height: 44px;
-    font-size: 15px;
-    text-transform: uppercase;
-    text-align: center;
-    transition-duration: 0.3s;
-    box-sizing: border-box;
-    padding: 10px;
-    &[disabled] {
-      opacity: 0.3;
-    }
-    &:active {
-      background: var(--emfe-w-color-primary-600, #99034F);
-    }
-  }
-  .ActiveBonusesGrid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 50px;
-    &.ActiveBonusesGridMobile {
-      grid-template-columns: 1fr;
-    }
-  }
-  .ModalWrapper {
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    background-color: rgba(0,0,0,0.7);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 100;
-    .ModalContent {
-      background-color: var(--emfe-w-color-white, #FFFFFF);
-      position: relative;
-      padding: 30px;
-      border-top: 5px solid var(--emfe-w-color-secondary, #FD2839);
-      border-radius: 5px;
-    }
-    .ModalBody {
-      background-color: var(--emfe-w-color-gray-50, #F9F8F8);
-      padding: 30px;
-      text-align: center;
-      .ModalText {
-        font-size: 22px;
-        margin-bottom: 40px;
-      }
-      .ModalButtons {
-        display: flex;
-        gap: 36px;
-      }
-      .ModalCancel, .ModalConfirm {
-        background: transparent;
-        border: 1px solid var(--emfe-w-color-gray-300, #58586B);
-        color: var(--emfe-w-color-gray-300, #58586B);
-        cursor: pointer;
-        border-radius: 5px;
-        width: 200px;
-        height: 50px;
-        font-size: 16px;
-        text-transform: uppercase;
-        text-align: center;
-        transition-duration: 0.3s;
-        box-sizing: border-box;
-        padding: 10px;
-      }
-      .ModalConfirm {
-        background: var(--emfe-w-color-primary, #D0046C);
-        border: 1px solid var(--emfe-w-color-primary, #D0046C);
-        color: var(--emfe-w-color-white, #FFFFFF);
-      }
-    }
-  }
-  .ModalWrapper.ModalWrapperMobile {
-    .ModalContent {
-      padding: 20px;
-      width: 80vw;
-      border-top: none;
-    }
-    .ModalBody {
-      padding: 0;
-      background: transparent;
-    }
-    .ModalText {
-      font-size: 16px;
-    }
-    .ModalButtons {
-      gap: 10px;
-    }
-    .ModalCancel, .ModalConfirm {
-      height: 40px;
-      width: 50%;
-      font-size: 14px;
-    }
-  }
-  .BonusesPaginationWrapper {
-    margin: 40px 0;
-    display: flex;
-    justify-content: center;
-    &.BonusesPaginationWrapperMobile {
-      text-align: center;
-    }
-    .BonusesFirst, .BonusesPrev, .BonusesNext, .BonusesLast {
-      color: var(--emfe-w-color-primary, #D0046C);
-      font-size: 16px;
-      cursor: pointer;
-      padding: 5px 10px;
-      font-weight: 700;
-      &.Inactive {
-        color: var(--emfe-w-color-gray-100, #E6E6E6);
-        cursor: default;
-      }
-    }
-    .BonusesPage {
-      margin: 0 5px;
-      color: var(--emfe-w-color-gray-300, #58586B);
-      font-size: 16px;
-      cursor: pointer;
-      padding: 5px 10px;
-      &.BonusPageActive {
-        background-color: var(--emfe-w-color-white, #FFFFFF);
-        font-weight: 700;
-      }
-    }
-  }
-</style>