@everymatrix/casino-wagering-bonuses-controller 1.15.0 → 1.15.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-wagering-bonuses-controller",
-  "version": "1.15.0",
+  "version": "1.15.2",
   "main": "dist/casino-wagering-bonuses-controller.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -35,5 +35,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "15ce8765c213b2c036dd5fbc5007d6ea5a666dc1"
+  "gitHead": "c590519dbcc5d9ba61081face50b61df6f79981d"
 }

package/src/CasinoWageringBonusesController.svelte

@@ -2,25 +2,30 @@
 <script lang="ts">
 
   import '@everymatrix/casino-wagering-bonus'
+  import '@everymatrix/general-animation-loading'
 
-  import { fetchApi, setWageringEventSource } from '@everymatrix/casino-wagering-bonus/src/business'
+  import { fetchApi, getRequestStatusByStatusFilter, setWageringEventSource } from '@everymatrix/casino-wagering-bonus/src/business'
   import { 
     clearEventSource, 
     composeEventSourceMessageHandler, 
-    onSvelteMountMessage 
+    onSvelteMountMessage, 
+    _postMessage
   } from '@everymatrix/casino-wagering-bonus/src/message'
   import type { TEventSource } from '@everymatrix/casino-wagering-bonus/src/message'
-  import { Bonus, BonusStatus, Lang } from '@everymatrix/casino-wagering-bonus/src/types'
+  import { Bonus, BonusStatus, BonusStatusFilterType, Lang } from '@everymatrix/casino-wagering-bonus/src/types'
   import { setTranslations } from '@everymatrix/casino-wagering-bonus/src/svelte.i18n';
   import { translations } from '@everymatrix/casino-wagering-bonus/src/translations';
   import { onMount } from 'svelte';
   import { classWithPart } from '@everymatrix/casino-wagering-bonus/src/util';
+  import { infoParts } from '@everymatrix/casino-wagering-bonus/src/private.exportparts';
+
+  import { _, setLocale } from '@everymatrix/casino-wagering-bonus/src/svelte.i18n';
 
   export let endpoint = ''
   export let lang = Lang.en
   export let session = ''
   export let currency: string = 'EUR';
-  export let status: BonusStatus = BonusStatus.claimable
+  export let filter: BonusStatusFilterType = BonusStatusFilterType.claimable
   export let limit: string = ''
 
   let isMounted = false
@@ -32,10 +37,11 @@
     }
   })
 
-  let bonuses: Bonus[] = []
+  let bonuses: any[] = []
   let eventSource: TEventSource
   let isLoading: boolean = true;
   let errorMessage: string = ''
+  let abortController: AbortController
 
   setTranslations(translations)
 
@@ -47,7 +53,7 @@
         if(!item) return bonus
 
         let { status: _status, level, levelIncrement, gap } = item
-        let _bonus: Bonus = {...bonus}
+        let _bonus: any = {...bonus}
 
         _bonus = { ..._bonus, wageringProgress: { 
           ..._bonus.wageringProgress,
@@ -59,17 +65,24 @@
         if(_status){
           _bonus = { ..._bonus, status: _status}
           setTimeout(() => init(), 500)
+
+          if(_status !== filter){
+            return null
+          }
         }
 
         return _bonus
-      })
+      }).filter(b => b)
     },
   })
 
   const initCore = async () => {
-    const response = await fetchApi.list(endpoint, session, {
+    abortController?.abort()
+    abortController = new AbortController();
+
+    const response: any = await fetchApi.list(abortController, endpoint, session, {
       lang,
-      status, 
+      status: filter === 'claimable' ? 'claimable' : getRequestStatusByStatusFilter(filter), 
       limit,
     })
 
@@ -77,21 +90,16 @@
       errorMessage = response.errorMessage
     }else{
       bonuses = (response.items || response.bonuses)
-      // if(status !== BonusStatus.claimable){
-      //   bonuses = _bonuses.filter(bonus => bonus.status === status)
-      // }else{
-      //   bonuses = _bonuses
-      // }
 
       clearEventSource(eventSource, eventSourceHandler)
-      if(status === BonusStatus.active){
+      if(filter === BonusStatusFilterType.active){
         eventSource = setWageringEventSource(endpoint, session, bonuses, eventSourceHandler)
       }
     }
   }
   
   const init = async () => {
-    if(!isMounted || !status || !lang || !session || !endpoint) return;
+    if(!isMounted || !filter || !lang || !session || !endpoint) return;
 
     isLoading = true
     await initCore()
@@ -108,49 +116,64 @@
   $: lang && init()
   $: session && init()
 
+  let innerWidth
+  $: isMobileView = innerWidth <= 648
+
+  $: classWithPartMatchMobile = (partAndClass) => 
+    classWithPart(`${partAndClass}${isMobileView ? ` ${partAndClass}Mobile` : ''}`)
+
+  $: locale = (key, values = {}) => $_('wageringBonuses.' + key, {values})
 </script>
 
-<div {...classWithPart("WageringTabs")}>
-  <ul>
-    {#each Object.keys(BonusStatus) as _status}
-    <li
-      class={status === BonusStatus[_status] ? "active" : ""}
+<div bind:clientWidth={innerWidth} {...classWithPartMatchMobile(`Root`)}>
+  <section {...classWithPartMatchMobile(`WageringTabs`)}>
+    {#each Object.values(BonusStatusFilterType) as statusFilter}
+    <div
+      {...classWithPartMatchMobile(`WageringTab`)}
+      class:active={filter === statusFilter}
       on:click={() => {
-        if(status === BonusStatus[_status]) return;
-        status = BonusStatus[_status]
+        if(filter === statusFilter) return;
+        filter = statusFilter
         init()
       }}
     >
-      {BonusStatus[_status]}
-    </li>
+      {locale(statusFilter)}
+    </div>
     {/each}
-  </ul>
-</div>
+  </section>
 
-{#if isLoading}
-  Loading, please wait ...
-{:else}
-  {#if bonuses.length > 0}
-    {#each bonuses as item}
-      <casino-wagering-bonus {...{
-        endpoint,
-        session,
-        lang,
-        currency,
-        rawbonus: JSON.stringify(item),
-        status,
-      }}
-      />
-    {/each}
-  {:else}
-    {#if errorMessage}
-      <div style="color: red;">Error: {errorMessage}</div>
+  <div>
+    {#if isLoading}
+      <general-animation-loading />
     {:else}
-      No wagering bonuses found
+    <div {...classWithPartMatchMobile(`Bonuses`)}>
+      {#if bonuses.length > 0}
+        {#each bonuses as item}
+          <casino-wagering-bonus {...{
+            endpoint,
+            session,
+            lang,
+            currency,
+            rawbonus: JSON.stringify(item),
+            exportparts: infoParts([
+              { key: 'ExpiryTime'},
+              { key: 'Status'},
+              { key: 'Levels'},
+            ])
+          }} />
+        {/each}
+      {:else}
+        {#if errorMessage}
+          <div class="Error">Error: {errorMessage}</div>
+        {:else}
+          {locale('noBonuses')}
+        {/if}
+      {/if}
+    </div>
     {/if}
-  {/if}
-{/if}
+  </div>
 
+</div>
 
 <style lang="scss">
 
@@ -170,21 +193,55 @@
     margin-bottom: 30px;
   }
 
+  .Bonuses {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: left;
+    margin-top: 10px;
+    column-gap: 10px;
+  }
+
+  .BonusesMobile {
+    // justify-content:initial;
+    & > casino-wagering-bonus {
+      width: 100%;
+    }
+  }
+
   .WageringTabs {
     margin: 20px 0;
+    font-size: 16px;
+  }
 
-    li {
-      display: inline;
-      margin: 10px 10px 10px 0;
-      padding: 10px;
-      border: 1px #ccc solid;
-      cursor: pointer;
+  .WageringTab {
+    display: inline;
+    padding: 8px;
+    cursor: pointer;
 
-      &.active {
-        border-color:aquamarine; 
-        font-weight: 700;
-      }
+    color: #000000;
+    border-bottom: 1px solid #00AEEF;
+    
+    &.active {
+      color: #00AEEF;
+      border-bottom-width: 3px;
+      padding-bottom: 6px;
+
+      font-weight: 700;
     }
+
+  }
+
+  .WageringTabsMobile {
+    display: flex;
+    justify-content: space-around;
+  }
+  .WageringTabMobile {
+    width: 100%;
+    text-align: center;
+  }
+
+  .Error {
+    color: red;
   }
 
 </style>