@everymatrix/casino-wagering-bonuses-controller 1.1.0 → 1.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-wagering-bonuses-controller",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "main": "index.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "62036ada223f2b4f7b64d99a81ab2229ecba3cf1"
+  "gitHead": "a331dfb7a0daca971fec89907140c9353dc5f0b3"
 }

package/rollup.config.js

@@ -43,6 +43,9 @@ export default {
     }),
     dev && livereload({ watch: ['', 'dist'] }),
     typescript({
+      include: [
+        "../casino-wagering-bonus/src/**/*.ts",
+      ],
       sourceMap: !production,
       inlineSources: !production,
     }),

package/src/CasinoWageringBonusesController.svelte

@@ -1,111 +1,145 @@
 <svelte:options tag={null} />
 <script lang="ts">
 
-  export let endpoint = ''
-  export let lang = ''
-  export let session = ''
-  export let sorttype = ''
-
   import '@everymatrix/casino-wagering-bonus'
-  import { fetchApi, isSetUpdate } from '@everymatrix/casino-wagering-bonus/src/business'
-  import { clearEventSource, composeEventSourceMessageHandler, updateEventSourceLifeCycle, onMountMessageLifeCycle } from '@everymatrix/casino-wagering-bonus/src/message'
-  import { cvtParamsToString } from '@everymatrix/casino-wagering-bonus/src/util'
-  import type { CasinoCommonClientBonusApiDataContractsNodesWageringBonusNode as Bonus } from '@everymatrix/casino-wagering-bonus/src/api'
+
+  import { fetchApi, setWageringEventSource } from '@everymatrix/casino-wagering-bonus/src/business'
+  import { 
+    clearEventSource, 
+    composeEventSourceMessageHandler, 
+    onSvelteMountMessage 
+  } 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 { 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';
 
-  enum BonusStatus {
-    BeforeClaimed = 'BeforeClaimed',
-    active = 'active',
-    completed = 'completed',
-    forfeited = 'forfeited',
-    expired = 'expired',
-    released = 'released',
-    closed = 'closed',
-  }
+  export let endpoint = ''
+  export let lang = Lang.en
+  export let session = ''
+  export let currency: string = 'EUR';
+  export let status: BonusStatus = BonusStatus.claimable
+  export let limit: string = ''
+
+  let isMounted = false
+  $: isMounted && init()
+  onMount(() => {
+    isMounted = true
+    return () => {
+      isMounted = false
+    }
+  })
 
   let bonuses: Bonus[] = []
-  let eventSource
-  let isLoading = true;
-  let errorMessage = ''
+  let eventSource: TEventSource
+  let isLoading: boolean = true;
+  let errorMessage: string = ''
 
-  const init = async () => {
-    if(!endpoint || !lang || !session) return;
-    isLoading = true
+  setTranslations(translations)
 
-    const result: any = await fetchApi.list(endpoint, lang, {
-      session,
-      sorttype,
-    })
+  const eventSourceHandler = composeEventSourceMessageHandler({
+    "WageringProgressUpdate": (data: any) => {
+      bonuses = bonuses.map(bonus => {
+        let item = data?.items[bonus.bonusWalletID]
 
-    if(!result.success) {
-      errorMessage = result.errorMessage
-    }else{
-      bonuses = result.items
+        if(!item) return bonus
 
-      setEventSource()
-    }
+        let { status: _status, level, levelIncrement, gap } = item
+        let _bonus: Bonus = {...bonus}
 
-    isLoading = false
-    
-    
-  }
+        _bonus = { ..._bonus, wageringProgress: { 
+          ..._bonus.wageringProgress,
+          currentLevel: level,
+          currentLevelIncrement: levelIncrement,
+          gap,
+        } }
 
-  const eventSourceHandler = composeEventSourceMessageHandler({
-    "WageringProgressUpdate": (data) => {
-      bonuses = bonuses.map(bonus => {
-        let currentLevel = data?.items[bonus.bonusWalletID]
-        if(currentLevel){
-          return { ...bonus, currentLevel }
-        }else{
-          return bonus
+        if(_status){
+          _bonus = { ..._bonus, status: _status}
+          setTimeout(() => init(), 500)
         }
+
+        return _bonus
       })
     },
   })
 
-  const setEventSource = () =>{
-    if(!bonuses) return;
-    
-    const params = {
-      bonusWalletIDs: bonuses?.filter(_bonus => isSetUpdate(_bonus, BonusStatus)).map(bonus => bonus.bonusWalletID).join(','),
-      XSessionId: session,
-    }
+  const initCore = async () => {
+    const response = await fetchApi.list(endpoint, session, {
+      lang,
+      status, 
+      limit,
+    })
+
+    if(!response.success) {
+      errorMessage = response.errorMessage
+    }else{
+      bonuses = (response.items || response.bonuses)
+      // if(status !== BonusStatus.claimable){
+      //   bonuses = _bonuses.filter(bonus => bonus.status === status)
+      // }else{
+      //   bonuses = _bonuses
+      // }
 
-    const url = `${endpoint}/bonus/wagering/updates?${cvtParamsToString(params)}`;
+      clearEventSource(eventSource, eventSourceHandler)
+      if(status === BonusStatus.active){
+        eventSource = setWageringEventSource(endpoint, session, bonuses, eventSourceHandler)
+      }
+    }
+  }
+  
+  const init = async () => {
+    if(!isMounted || !status || !lang || !session || !endpoint) return;
 
-    eventSource = updateEventSourceLifeCycle(
-      url,
-      eventSource,
-      eventSourceHandler,
-    )
+    isLoading = true
+    await initCore()
+    isLoading = false
   }
 
-  onMountMessageLifeCycle({
-    'OnWageringBonusClaimed': () => init()
+  onSvelteMountMessage({
+    'OnWageringBonusClaimed': () => init(),
+    'OnWageringBonusExpired': () => init(),
   })
+  onMount(() => () => clearEventSource(eventSource, eventSourceHandler))
 
   $: endpoint && init()
   $: lang && init()
   $: session && init()
-  
-  onMount(() => {
-    return () => {
-      clearEventSource(eventSource, eventSourceHandler)
-      eventSource = null
-    }
-  })
+
 </script>
 
+<div {...classWithPart("WageringTabs")}>
+  <ul>
+    {#each Object.keys(BonusStatus) as _status}
+    <li
+      class={status === BonusStatus[_status] ? "active" : ""}
+      on:click={() => {
+        if(status === BonusStatus[_status]) return;
+        status = BonusStatus[_status]
+        init()
+      }}
+    >
+      {BonusStatus[_status]}
+    </li>
+    {/each}
+  </ul>
+</div>
+
 {#if isLoading}
   Loading, please wait ...
 {:else}
   {#if bonuses.length > 0}
-    {#each bonuses as item, index}
-      <casino-wagering-bonus
-        {endpoint}
-        {lang}
-        {session}
-        rawbonus={JSON.stringify(item)}
+    {#each bonuses as item}
+      <casino-wagering-bonus {...{
+        endpoint,
+        session,
+        lang,
+        currency,
+        rawbonus: JSON.stringify(item),
+        status,
+      }}
       />
     {/each}
   {:else}
@@ -138,4 +172,21 @@
     margin-bottom: 30px;
   }
 
+  .WageringTabs {
+    margin: 20px 0;
+
+    li {
+      display: inline;
+      margin: 10px 10px 10px 0;
+      padding: 10px;
+      border: 1px #ccc solid;
+      cursor: pointer;
+
+      &.active {
+        border-color:aquamarine; 
+        font-weight: 700;
+      }
+    }
+  }
+
 </style>

package/src/index.ts

@@ -1,4 +1,4 @@
 import CasinoWageringBonusesController from './CasinoWageringBonusesController.svelte';
-
+// @ts-ignore
 !customElements.get('casino-wagering-bonuses-controller') && customElements.define('casino-wagering-bonuses-controller', CasinoWageringBonusesController);
 export default CasinoWageringBonusesController;

package/tsconfig.json

@@ -1,6 +1,9 @@
 {
   "extends": "@tsconfig/svelte/tsconfig.json",
 
-  "include": ["src/**/*"],
+  "include": [
+    "src/**/*", 
+    "../casino-wagering-bonus/src/**/*"
+  ],
   "exclude": ["node_modules/*", "__sapper__/*", "public/*"]
 }