@everymatrix/casino-bonuses-controller 1.22.5

package/src/CasinoBonusesController.svelte

@@ -0,0 +1,882 @@
+<svelte:options tag={null} />
+<script lang="ts">
+  import {onMount} from 'svelte';
+  import { _, addNewMessages, setLocale } from './i18n';
+  import { isMobile } from 'rvhelper';
+  import { BonusControllerTranslations } from './translation';
+  import moment from 'moment';
+  import '@vaadin/vaadin-date-picker/vaadin-date-picker.js';
+  import './component/CasinoBonusCard.svelte'
+  import './component/CasinoBonusPagination.svelte'
+  
+  export let endpoint = '';
+  export let lang = 'en';
+  export let session = '';
+  export let currency: string = 'EUR';
+  export let limit: string = '';
+  export let cmsendpoint: string = '';
+  export let clientstyling: string = '';
+  export let clientstylingurl: string = '';
+  export let translationurl: string = '';
+  let userAgent:String = window.navigator.userAgent;
+  let mobileView:Boolean = false;
+  let bonuses: any = [];
+  let isLoading: boolean = true;
+  let errorMessage: string = '';
+  let currentPage:number = 1;
+  let totalItems:number = 0;
+  let paginationLimit: number = 2;
+  let maxDate:string;
+  let lastMonth:string;
+  let customStylingContainer: HTMLElement;
+  let bonusCode:string = '';
+  let invalidBonusField:boolean = true;
+  let invalidBonusCode: boolean = false;
+  let bonusModal:boolean = false;
+  maxDate = moment(new Date()).format('YYYY-MM-DD');
+  lastMonth = moment(new Date()).subtract(3, 'months').format('YYYY-MM-DD')
+
+  let bonusCalendarStartDate:string = lastMonth;
+  let bonusCalendarEndDate:string = maxDate;
+  let startCalendar:HTMLElement;
+  let endCalendar:HTMLElement;
+
+  let bonusStatus: string = 'active';
+
+  let isButtonClickable: boolean = true;
+  let StatusForFilter = ['active','completed','claimable'];
+  let forfeitWalletID = '';
+  if (isMobile(userAgent)) {
+    mobileView = true;
+    paginationLimit = 1;
+  }
+  let isMounted = false;
+  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);
+      });
+  }
+  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(BonusControllerTranslations).forEach((item: any) => {
+    addNewMessages(item, BonusControllerTranslations[item]);
+  });
+  onMount(() => {
+    window.addEventListener('message', messageHandler, false);
+    isMounted = true;
+    return () => {
+      startCalendar.removeEventListener('change', startCalendarHandler);
+      endCalendar.removeEventListener('change', endCalendarHandler);
+      window.removeEventListener('message', messageHandler);
+      isMounted = false;
+    }
+  })
+
+  const messageHandler = (e: any): void=>{
+    switch (e.data.type) {
+      case 'PaginationChange':
+        currentPage = e.data.page;
+        getPage(currentPage);
+        break;
+      case 'OnBonusClaimed':
+        claimBonus(e.data.bonusCode);
+        break;
+      case 'OnBonusForfeit':
+        forfeitWalletID = e.data.bonus.id;
+        bonusModal = true;
+      default:
+        break;
+    }
+  }
+
+  const init = async (): Promise<void> =>{
+    getPage(1);
+    setLocale(lang);
+  }
+
+  const claimBonus = async (bonusCode: string,claimByCode?: boolean): Promise<any>=>{
+    isButtonClickable = false;
+    const response = await claimBonusRequest(bonusCode);
+    if(!response.success) {
+      errorMessage = response.errorMessage;
+      if(claimByCode){
+        invalidBonusCode = true;
+      }else{
+        window.postMessage({ type:'OnBonusClaimError',message:errorMessage,bonusCode:bonusCode});
+      }
+    }else{
+      invalidBonusCode = false;
+      getPage(1);
+    }
+    window.postMessage({ type:'OnBonusClaimedDone'});
+    isButtonClickable = true;
+  };
+  const claimBonusRequest = async (bonusCode: string): Promise<any> =>{
+    return await fetchBase(endpoint + "/v1/bonus/claim", {
+      method: "PUT",
+      body: JSON.stringify({
+        bonusCode,
+        currency
+      }),
+      headers: {
+        'x-SessionId': session,
+        'accept': 'text/plain',
+        'Content-Type': 'application/json-patch+json',
+      }
+    });
+  }
+  const forfeitBonus = async (bonusCode: string): Promise<any> =>{
+    isButtonClickable = false;
+    const response = await forfeitBonusRequest(bonusCode);
+    if(!response.success) {
+      errorMessage = response.errorMessage;
+    }else{
+      getPage(1);
+    }
+    window.postMessage({ type:'OnBonusForfeitedDone'});
+    isButtonClickable = true;
+    bonusModal = false;
+  };
+  const forfeitBonusRequest = async(bonusID: string): Promise<any> => {
+    const url = new URL(`${endpoint}/v1/bonus/forfeit`);
+    const params = {
+      bonusID,
+      lang
+    };
+    Object.keys(params).map(k => {
+      url.searchParams.append(k, params[k])
+    });
+    return await fetchBase(url, {
+      method: "DELETE",
+      headers: {
+        'x-SessionId': session,
+        'accept': 'text/plain',
+      }
+    });
+  }
+  const closeBonusModal = (): void => {
+    window.postMessage({ type: 'EnableScroll'}, window.location.href);
+    window.postMessage({ type: 'OnBonusForfeitedDone'});
+    bonusModal = false;
+  }
+  const getPage = async (pageNumber: number): Promise<any> =>{
+    if(currentPage !== pageNumber){
+      currentPage = pageNumber;
+    }
+    const offset = (pageNumber - 1) * Number(limit);
+    isLoading = true;
+    bonuses = [];
+    const response = await getBonuses(endpoint, session,offset, {
+      lang,
+      limit
+    });
+    if(!response.success) {
+      errorMessage = response.errorMessage;
+    }else{
+      totalItems = response.total;
+      bonuses = (response.items || response.bonuses);
+    }
+    isLoading = false;
+  }
+
+  const getBonuses =  async (endpoint: string, session: string, offset: number, options: any = {}):Promise<any> => {
+    const { 
+      limit,
+      lang: language,
+      ...rest
+    } = options;
+    const path = (() => {
+      switch (bonusStatus) {
+        case 'claimable':
+          return bonusStatus;
+        default:
+          return 'granted';
+      }
+    })();
+    const params = {
+      pagination: `limit=${limit},offset=${offset}`,
+      language,
+      ...rest,
+      sortOrder: 'desc'
+    };
+    if(bonusStatus === 'completed'){
+      let startDate: string = new Date(bonusCalendarStartDate).toISOString();
+      let endDate: string = new Date(bonusCalendarEndDate+' 23:59:59').toISOString();
+      params.startTime = startDate;
+      params.endTime = endDate;
+      params.type = 'standard,freeBet,freeRound,cashBack,stakeBack,oddsBoost,wagering';
+      params.status = 'completed,released,forfeited,expired,closed';
+    }
+    if(bonusStatus === 'active'){
+      params.type = 'standard,freeBet,freeRound,cashBack,stakeBack,oddsBoost,wagering';
+      params.status = 'active';
+    }
+    const url = new URL(`${endpoint}/v1/bonus/${path}`);
+    if(bonusStatus !== 'claimable'){
+      url.searchParams.append('expand' , 'freeSpin');
+    }else{
+      delete params.sortOrder;
+    }
+    Object.keys(params).map(k => {
+      url.searchParams.append(k, params[k])
+    });
+    return await fetchBase(url, {
+      headers: {
+        ...(session ? { 'x-SessionId': session } : {}),
+      }
+    });
+  };
+
+  const classWithPart = (partAndClass, extraClass = ''): object => ({
+    part: partAndClass,
+    class: [partAndClass, extraClass].join(' '),
+  });
+
+  const fetchBase = async (url, options = {}): Promise<any> => {
+    let res;
+    res = await fetch(url, options);
+    if(res.ok === false){
+      return {
+        errorMessage: res.status
+      }
+    }else{
+      res = await res.json();
+      return res;
+    }
+  };
+
+  const startCalendarHandler = (e: any): void => {
+    bonusCalendarStartDate = e.target.value;
+  }
+
+  const endCalendarHandler = (e: any): void => {
+    bonusCalendarEndDate = e.target.value;
+  }
+
+  const setCalendarEventListener = (): void => {
+    startCalendar.addEventListener('change', startCalendarHandler, false);
+    endCalendar.addEventListener('change', endCalendarHandler, false);
+  }
+
+  const checkBonusCode = (): boolean => {
+    invalidBonusCode = false;
+    if (bonusCode) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+
+  const validateBonusCode = (): void => {
+    invalidBonusField = !checkBonusCode();
+  }
+
+  $: startCalendar && endCalendar && setCalendarEventListener();
+  $: classWithPartMatchMobile = (partAndClass, extraClass = '') => 
+     classWithPart(`${partAndClass}${mobileView ? ` ${partAndClass}Mobile` : ''}`, extraClass);
+ 
+  $: initialLoad = endpoint && session && lang && limit;
+  $: initialLoad && init();
+  $: clientstyling && customStylingContainer && setClientStyling();
+  $: clientstylingurl && customStylingContainer && setClientStylingURL();
+  $: translationurl && setTranslationUrl();
+</script>
+
+<div {...classWithPart('BonusesController')} bind:this={customStylingContainer}>
+  <div {...classWithPartMatchMobile('BonusFilterWrapper')}>
+    <div class="BonusFilterContainer" part="BonusFilterContainer">
+      {#each StatusForFilter as status}
+        <button type="button" {...classWithPartMatchMobile('BonusStatusFilter')} class:active={status === bonusStatus} on:click={() => {bonusStatus = status; getPage(1)}} disabled={isLoading}>{status}</button>
+      {/each}
+    </div>
+  </div>
+  {#if bonusStatus === 'claimable'}
+  <div {...classWithPartMatchMobile('BonusCodeContainer')}>
+    <label for="BonusCode"><span class="Asterisk">*</span>{$_(`bonus.bonusCode`)}</label>
+    <div {...classWithPartMatchMobile('BonusCodeWrapper')} >
+      <input {...classWithPartMatchMobile('BonusCodeInput')} bind:value={bonusCode} on:keyup={validateBonusCode} type="text" id="BonusCode" placeholder={$_(`bonus.placeholder`)}/>
+      <button {...classWithPartMatchMobile('BonusClaimButton')} disabled={invalidBonusField || !isButtonClickable} on:click={()=>{claimBonus(bonusCode,true)}}>{$_(`bonus.claim`)}</button>
+    </div>
+    {#if invalidBonusCode}
+      <p class="InvalidBonusCodeMessage" part="InvalidBonusCodeMessage">{$_(`bonus.invalidBonusCode`)}</p>
+    {/if}
+  </div>
+  {:else if bonusStatus === 'completed'}
+    <div {...classWithPartMatchMobile('BonusCalendarWrapper')}>
+      <div {...classWithPart('BonusCalendarTitle')}>{$_(`bonus.canlendarTitle`)}</div>
+      <div {...classWithPart('BonusCalendarContent')}>
+        <div {...classWithPartMatchMobile('BonusCalendarContainer')} >
+          <div {...classWithPartMatchMobile('BonusCalendarStartDate')} >
+            <label for="BonusCalendarStartDate">{$_(`bonus.from`)}</label>
+            <vaadin-date-picker bind:this={startCalendar} max={maxDate} value={lastMonth} placeholder="From" 
+              {...classWithPart('VaadinDatePicker')} >
+            </vaadin-date-picker>
+          </div>
+          <div {...classWithPartMatchMobile('BonusCalendarEndDate')}>
+            <label for="BonusCalendarEndDate">{$_(`bonus.to`)}</label>
+            <vaadin-date-picker bind:this={endCalendar} value={maxDate} placeholder="To" 
+              {...classWithPart('VaadinDatePicker')}>
+            </vaadin-date-picker>
+          </div>
+        </div>
+        <button {...classWithPartMatchMobile('BonusFilterButton')} on:click={() => getPage(1)} disabled={isLoading}>{$_(`bonus.filter`)}</button>
+      </div>
+    </div>
+  {/if}
+  
+  {#if isLoading}
+    <div {...classWithPart('ModalLoader')}></div>
+  {:else}
+    {#if bonuses.length > 0}
+      <ul {...classWithPart('BonusList')}>
+        {#each bonuses as item}
+        <li {...classWithPartMatchMobile('BonusItem')}>
+          <casino-bonus-card {...{
+            rawbonus: JSON.stringify(item),
+            status:bonusStatus,
+            cmsendpoint: cmsendpoint,
+            lang: lang,
+            clientstyling: clientstyling,
+            clientstylingurl: clientstylingurl,
+            translationurl: translationurl
+          }}
+          />
+        </li>
+        {/each}
+      </ul>
+    {:else}
+      {#if errorMessage}
+        <div style="color: red;">{$_(`bonus.error`)}: {errorMessage}</div>
+      {:else}
+      {$_(`bonus.noBonus`)}
+      {/if}
+    {/if}
+    {#if bonuses.length !== 0}
+      <casino-bonus-pagination totalitems={totalItems} currentpage={currentPage} pagesize={limit} limit={paginationLimit} clientstyling={clientstyling} clientstylingurl={clientstylingurl}></casino-bonus-pagination>
+    {/if}
+  {/if}
+  
+  {#if bonusModal}
+    <div {...classWithPartMatchMobile('ModalWrapper')} >
+      <div {...classWithPart('ModalContent')}>
+        <div {...classWithPart('ModalBody')}>
+          <p {...classWithPart('ModalText')}>{$_('bonus.forfeitMessage')}</p>
+          <div {...classWithPart('ModalButtons')}>
+            <button {...classWithPart('ModalCancel')} on:click={closeBonusModal}>{$_('bonus.forfeitCancel')}</button>
+            <button {...classWithPart('ModalConfirm')} on:click={()=>forfeitBonus(forfeitWalletID)}>{$_('bonus.forfeitConfirm')}</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  {/if}
+</div>
+
+<style lang="scss">
+  :host {
+    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  }
+
+  *,
+  *::before,
+  *::after {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    text-decoration: none;
+    outline: none;
+    box-sizing: border-box;
+  }
+
+  .BonusList{
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .BonusItem{
+    flex: 0 0 50%;
+    max-width: 50%;
+    padding: 10px;
+  }
+  .BonusItemMobile {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+
+  .BonusPaginationWrapper {
+    margin: 40px 0;
+    display: flex;
+    justify-content: center;
+    &.BonusPaginationWrapperMobile {
+      flex-wrap: wrap;
+      text-align: center;
+    }
+    .BonusesFirst, .BonusesPrev, .BonusesNext, .BonusesLast {
+      color: var(--emfe-w-bonus-pagination-primary,var(--emfe-w-color-blue, #00AEEF));
+      font-size: 16px;
+      cursor: pointer;
+      padding: 5px 10px;
+      font-weight: 700;
+      &.Inactive {
+        color: var(--emfe-w-bonus-pagination-inactive-text,var(--emfe-w-color-gray-100, #E6E6E6));
+        cursor: default;
+      }
+    }
+    .BonusesPage {
+      margin: 0 5px;
+      color: var(--emfe-w-bonus-pagination-text,var(--emfe-w-color-gray-300, #58586B));
+      font-size: 16px;
+      cursor: pointer;
+      padding: 5px 10px;
+      &.BonusPageActive {
+        background-color: var(--emfe-w-bonus-pagination-active-bg,var(--emfe-w-color-white, #FFFFFF));
+        font-weight: 700;
+      }
+    }
+  }
+  .ModalLoader {
+    display: block;
+    width: 80px;
+    height: 80px;
+    margin: 0 auto
+  }
+  .ModalLoader:after {
+    content: " ";
+    display: block;
+    width: 64px;
+    height: 64px;
+    margin: 8px;
+    border-radius: 50%;
+    border: 6px solid var(--emfe-w-bonus-pagination-border,var(--emfe-w-color-blue, #00AEEF));
+    border-color: var(--emfe-w-bonus-pagination-border,var(--emfe-w-color-blue, #00AEEF)) transparent var(--emfe-w-bonus-pagination-primary,var(--emfe-w-color-blue, #00AEEF)) transparent;
+    animation: LoaderForModal 1.2s linear infinite;
+  }
+  
+  @keyframes LoaderForModal {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+  
+
+  .BonusCalendarWrapper{
+    display: flex;
+    gap: 20px;
+    flex-wrap: wrap;
+    background: var(--emfe-w-bonus-calendar-bg,var(--emfe-w-color-gray-50, #F4F4F4));
+    border-radius: 5px;
+    padding: 27px;
+    width: calc(50% - 20px);
+    margin: 10px;
+  }
+  .BonusCalendarContent {
+    display: flex;
+    gap: 20px;
+    flex-wrap: wrap;
+  }
+  .BonusCalendarContainer {
+    display: flex;
+    gap: 20px;
+    flex-wrap: wrap;
+    flex: 4;
+    &.BonusCalendarContainerMobile {
+      flex-direction: row;
+      gap: 0;
+      justify-content: space-between;
+      padding-bottom: 0;
+      width: 100%;
+      flex-direction: column;
+    }
+  }
+  .BonusCalendarTitle {
+    font-size: 18px;
+    font-weight: 700;
+    width: 100%;
+  }
+  .BonusCalendarStartDate,
+  .BonusCalendarEndDate {
+    color: var(--emfe-w-bonus-calendar-text,var(--emfe-w-color-gray-300, #58586B));
+    display: flex;
+    position: relative;
+    align-items: center;
+    gap: 10px;
+    min-width: 140px;
+    flex: 0 0 47%;
+    flex-wrap: wrap;
+    vaadin-date-picker {
+      width: 100%;
+    }
+    &.BonusesCalendarMobile {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 5px;
+      width: 100%;
+      .VaadinDatePicker {
+        width: 100%;
+      }
+    }
+
+    label {
+      font-size: 14px;
+      font-weight: 300;
+      width: 100%;
+      text-transform: capitalize;
+    }
+
+    input {
+      width: 100%;
+      height: 44px;
+      border: 1px solid var(--emfe-w-bonus-calendar-border,var(--emfe-w-color-gray-100, #E6E6E6));
+      border-radius: 5px;
+      box-sizing: border-box;
+      padding: 5px 15px;
+      font-size: 16px;
+      line-height: 18px;
+      outline-color: var(--emfe-w-bonus-calendar-outline,var(--emfe-w-color-primary, #00AEEF));
+    }
+  }
+
+  .BonusFilterButton {
+    flex: 2;
+    background: var(--emfe-w-bonus-filter-bg,var(--emfe-w-color-yellow, #F39C12));
+    outline: 5px solid var(--emfe-w-bonus-filter-outline,var(--emfe-w-color-yellow, rgba(243,156,18,0.3)));
+    border-radius: 9px;
+    border: 0;
+    width: 180px;
+    max-width: 180px;
+    height: 38px;
+    font-size: 18px;
+    font-weight: 400;
+    text-align: center;
+    transition-duration: 0.5s;
+    transition-property: outline, color, background;
+    box-sizing: border-box;
+    cursor: pointer;
+    color: var(--emfe-w-bonus-filter-text,var(--emfe-w-color-white, #FFFFFF));
+    align-self: end;
+    margin-bottom: 5px;
+    &[disabled] {
+      opacity: 0.3;
+      cursor: not-allowed;
+    }
+    &.BonusFilterButtonMobile {
+      width: 100%;
+      min-width: 100%;
+    }
+    &:hover {
+      background: var(--emfe-w-bonus-filter-bg,var(--emfe-w-color-yellow, #F38B12));
+      outline: 0;
+    }
+    &:active {
+      background: var(--emfe-w-bonus-filter-bg,var(--emfe-w-color-yellow, #F38B12));
+      outline-color: var(--emfe-w-bonus-filter-outline,var(--emfe-w-color-yellow, rgba(243,156,18,0.6)));
+    }
+  }
+  .BonusFilterWrapper {
+    display: flex;
+    gap: 15px;
+    padding: 10px;
+    align-items:flex-start;
+
+    &.BonusFilterWrapperMobile {
+      width: 100%;
+      flex-direction: column;
+      gap: 10px;
+      padding:0;
+      padding-bottom: 15px;
+    }
+  }
+  .BonusFilterContainer {
+    display: flex;
+    gap: 5px;
+    border-bottom: 5px solid var(--emfe-w-bonus-filter-border,var(--emfe-w-color-green, #53B65A));
+    width: 100%;
+  }
+  .BonusStatusFilter {
+    color: var(--emfe-w-bonus-status-filter-text,var(--emfe-w-color-gray-300, #6D6D6D));
+    cursor: pointer;
+    width: 200px;
+    height: 50px;
+    font-size: 18px;
+    text-transform: capitalize;
+    text-align: center;
+    transition-duration: 0.5s;
+    box-sizing: border-box;
+    padding: 15px;
+    background: var(--emfe-w-bonus-status-filter-bg,var(--emfe-w-color-white, #FFFFFF));
+    border: 1px solid var(--emfe-w-bonus-status-filter-border,var(--emfe-w-color-gray-300, #767171));
+    border-bottom: 0;
+    border-radius: 5px 5px 0px 0px;
+
+    &.BonusStatusFilterMobile {
+      width: 100%;
+      height: 44px;
+    }
+
+    &.active {
+      color: var(--emfe-w-bonus-status-active-bg,var(--emfe-w-color-white, #FFFFFF));
+      background: var(--emfe-w-bonus-status-active-bg,var(--emfe-w-color-gray-300, #4E5662));
+      border: 0.5px solid var(--emfe-w-bonus-status-active-border,var(--emfe-w-color-gray-300, #767171));
+    }
+  }
+  .BonusPageNumber {
+    color: var(--emfe-w-bonus-page-number-text,var(--emfe-w-color-gray-150, #9C9C9C));
+    flex: 1;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .BonusPageNumberTabs{
+    display: flex;
+    .BonusPageNumberTab {
+      cursor: pointer;
+      width: 36px;
+      height: 36px;
+      padding: 10px;
+      text-align: center;
+      &.active {
+        color: var(--emfe-w-bonus-page-number-text,var(--emfe-w-color-white, #FFFFFF));
+        background: var(--emfe-w-bonus-page-number-active,var(--emfe-w-color-yellow, #F39C12));
+        border-radius: 50%;
+      }
+    }
+  }
+
+  .BonusCodeContainer {
+    color: var(--emfe-w-bonus-page-number-text,var(--emfe-w-color-black, #000000));
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    width: calc(50% - 20px);
+    background: #F4F4F4;
+    border-radius: 5px;
+    padding: 36px;
+    margin: 10px;
+    label {
+      font-size: 18px;
+      font-weight: 700;
+      padding-bottom: 20px;
+    }
+    .Asterisk {
+      color : var(--emfe-w-bonus-card-red,var(--emfe-w-color-red, #FD2839));
+    }
+    &.BonusCodeContainerMobile {
+      width: 100%;
+      margin: 0 0 10px;
+    }
+
+    .BonusCodeWrapper {
+      display: flex;
+      gap: 10px;
+      &.BonusCodeWrapperMobile {
+        flex-direction: column;
+      }
+
+      .BonusCodeInput {
+        flex:3;
+        height: 50px;
+        border: 1px solid var(--emfe-w-bonus-code-border,var(--emfe-w-color-gray-50, #D1D1D1));
+        border-radius: 5px;
+        box-sizing: border-box;
+        padding: 5px 15px;
+        font-size: 16px;
+        line-height: 18px;
+        &:focus {
+          outline-color: var(--emfe-w-bonus-code-outline,var(--emfe-w-color-gray-100, #C1C1C1));
+        }
+        &.BonusCodeInputMobile {
+          width: 100%;
+        }
+      }
+
+      .BonusClaimButton {
+        background: var(--emfe-w-bonus-claim-bg,var(--emfe-w-color-yellow, #F39C12));
+        outline: 5px solid var(--emfe-w-bonus-claim-outline,var(--emfe-w-color-yellow, rgba(243,156,18,0.3)));
+        border-radius: 9px;
+        border: 0;
+        width: 180px;
+        height: 38px;
+        font-size: 18px;
+        font-weight: 400;
+        text-align: center;
+        transition-duration: 0.5s;
+        box-sizing: border-box;
+        margin-top:5px;
+        cursor: pointer;
+        color: var(--emfe-w-bonus-claim-text,var(--emfe-w-color-white, #FFFFFF));
+        &[disabled] {
+          opacity: 0.3;
+          cursor: not-allowed;
+        }
+        &.BonusClaimButtonMobile {
+          width: 100%;
+        }
+        &:hover {
+          background: var(--emfe-w-bonus-claim-hover-bg,var(--emfe-w-color-yellow, #F38B12));
+          outline: 0;
+        }
+        &:active {
+          background: var(--emfe-w-bonus-claim-active-bg,var(--emfe-w-color-yellow, #F38B12));
+          outline-color:  var(--emfe-w-bonus-claim-active-outline,var(--emfe-w-color-white, rgba(243, 156, 18, 0.6)));
+        }
+      }
+    }
+
+    &.InvalidField {
+      input {
+        border: 1px solid var(--emfe-w-color-primary, #00AEEF);
+        background: var(--emfe-w-color-primary-50, #FBECF4);
+        color: var(--emfe-w-color-primary, #00AEEF);
+      }
+    }
+
+    .InvalidBonusCodeMessage {
+      color: var(--emfe-w-color-error, #FD2839);
+    }
+  }
+
+  .ModalWrapper {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: var(--emfe-w-bonus-modal-bg,var(--emfe-w-color-black, rgba(0,0,0,0.7)));
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 100;
+    .ModalContent {
+      background-color: var(--emfe-w-bonus-modal-bg,var(--emfe-w-color-white, #FFFFFF));
+      position: relative;
+      padding: 30px;
+      border-top: 5px solid var(--emfe-w-bonus-modal-border,var(--emfe-w-color-primary, #00AEEF));
+      border-radius: 5px;
+    }
+    .ModalBody {
+      background-color: var(--emfe-w-bonus-modal-bg,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-bonus-modal-border,var(--emfe-w-color-gray-300, #58586B));
+        color: var(--emfe-w-bonus-modal-text,var(--emfe-w-color-gray-300, #58586B));
+        cursor: pointer;
+        border-radius: 5px;
+        width: 180px;
+        height: 38px;
+        font-size: 18px;
+        text-transform: capitalize;
+        text-align: center;
+        transition-duration: 0.5s;
+        box-sizing: border-box;
+        padding: 10px;
+      }
+      .ModalConfirm {
+        background: var(--emfe-w-bonus-modal-bg,var(--emfe-w-color-primary, #00AEEF));
+        border: 1px solid var(--emfe-w-bonus-modal-bg,var(--emfe-w-color-primary, #00AEEF));
+        color: var(--emfe-w-bonus-modal-text,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;
+    }
+  }
+
+  @media only screen and (max-width: 1024px) {
+    .BonusCodeContainer {
+      width: 100%;
+    }
+    .BonusCalendarWrapper, .BonusCalendarContent, .BonusCalendarContainer  {
+      width: 100%;
+      flex-wrap: wrap;
+    }
+    .BonusCalendarWrapper {
+      margin: 10px 0 0 0;
+    }
+    .BonusFilterWrapper {
+      width: 100%;
+      flex-direction: column;
+      gap: 10px;
+      padding: 10px 0;
+    }
+    .BonusStatusFilter {
+      width: 100%;
+    }
+    .BonusFilterButton {
+      margin-top: 0;
+    }
+    .BonusFilterButton, .BonusClaimButton {
+      width: 100%;
+    }
+    .BonusItem {
+      flex: 0 0 100%;
+      max-width: 100%;
+      padding: 0;
+      margin: 10px 0 0 0;
+    }
+    .BonusCalendarStartDate,
+    .BonusCalendarEndDate {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 5px;
+      .VaadinDatePicker {
+        width: 100%;
+      }
+    }
+    .BonusCalendarTitle {
+      width: 100%;
+    }
+  }
+</style>