@everymatrix/player-elevate-card 1.44.0 → 1.45.0

package/dist/collection/components/player-elevate-card-data/player-elevate-card-data.js

@@ -1,222 +1,231 @@
-import { Component, Prop, State, Event, Element, Listen, Watch } from '@stencil/core';
-import { differenceInCalendarDays, differenceInHours, isBefore } from 'date-fns';
-import { translateWithParams } from '../../utils/locale.utils';
-import '@everymatrix/general-styling-wrapper';
+import { differenceInCalendarDays, differenceInHours, isBefore } from "date-fns";
+import { translateWithParams } from "../../utils/locale.utils";
+import "../../../../../general-styling-wrapper/dist/types/index";
 import { updateProgressSvg } from "../../utils/utils";
 export class PlayerElevateCardData {
-  handleWindowResizs() {
-    this.initLevelProgressbar();
-  }
-  onParamsChanged() {
-    this.loadElevateInfo();
-  }
-  redeemGiftButtonHandler() {
-    this.loadElevateInfo();
-  }
-  onRedeemClick() {
-    window.postMessage({ type: 'BEERedeemClicked' }, window.location.href);
-  }
-  loadLevels() {
-    let url = new URL(`${this.params.endpoint}/v1/elevate/levels?language=${this.params.language}`);
-    return new Promise((resolve, reject) => {
-      return fetch(url.href, {
-        method: 'GET',
-      })
-        .then((res) => res.json())
-        .then((res) => {
-        this.levels = res.data;
-        resolve(true);
-      })
-        .catch((err) => {
-        reject(err);
-      });
-    });
-  }
-  calcuatePointsToBeExpired(walletTotalInfo) {
-    let pointExpireInfoAsString = '';
-    if (!walletTotalInfo || !walletTotalInfo.aboutToExpire ||
-      walletTotalInfo.aboutToExpire.length == 0 ||
-      walletTotalInfo.aboutToExpire[0].points <= 0) {
-      return pointExpireInfoAsString;
-    }
-    walletTotalInfo.aboutToExpire.sort((expire1, expire2) => {
-      return isBefore(new Date(expire1.expireTime), new Date(expire2.expireTime))
-        ? -1
-        : 1;
-    });
-    const aboutToExpire = walletTotalInfo.aboutToExpire[0];
-    const daysToExpried = differenceInCalendarDays(new Date(aboutToExpire.expireTime), new Date());
-    let hoursToExpired = 0, expiredTranslationKey = daysToExpried === 0 ? 'pointsToBeExpiredDay' : 'pointsToBeExpired';
-    if (daysToExpried == 0) {
-      hoursToExpired = differenceInHours(new Date(aboutToExpire.expireTime), new Date());
-      expiredTranslationKey = hoursToExpired > 1 ? 'pointsToBeExpiredHours' : 'pointsToBeExpiredHour';
-    }
-    else {
-    }
-    pointExpireInfoAsString = translateWithParams(expiredTranslationKey, {
-      expirationPoints: aboutToExpire.points,
-      expireDay: daysToExpried,
-    });
-    return pointExpireInfoAsString;
-  }
-  loadPlayerLevelInfo() {
-    let url = new URL(`${this.params.endpoint}/v1/elevate/playerInfo?language=${this.params.language}`);
-    return new Promise((resolve, reject) => {
-      return fetch(url.href, {
-        method: 'GET',
-        headers: {
-          'X-Sessionid': this.params.session,
-          'Content-Type': 'application/json',
-        },
-      })
-        .then((res) => res.json())
-        .then((res) => {
-        var _a, _b, _c;
-        if (!res.success) {
-          console.error('Exception when fetch user elevateinfo, ', res.errorCode, res.errorMessage);
-          reject(true);
-          return;
+    constructor() {
+        this.params = undefined;
+        this.playerElevateLevel = undefined;
+        this.pointExpireString = undefined;
+    }
+    handleWindowResizs() {
+        this.initLevelProgressbar();
+    }
+    onParamsChanged() {
+        this.loadElevateInfo();
+    }
+    onRedeemClick() {
+        window.postMessage({ type: 'BEERedeemClicked' }, window.location.href);
+    }
+    loadLevels() {
+        let url = new URL(`${this.params.endpoint}/v1/elevate/levels?language=${this.params.language}`);
+        return new Promise((resolve, reject) => {
+            return fetch(url.href, {
+                method: 'GET',
+            })
+                .then((res) => res.json())
+                .then((res) => {
+                this.levels = res.data;
+                resolve(true);
+            })
+                .catch((err) => {
+                reject(err);
+            });
+        });
+    }
+    calcuatePointsToBeExpired(walletTotalInfo) {
+        let pointExpireInfoAsString = '';
+        if (!walletTotalInfo || !walletTotalInfo.aboutToExpire ||
+            walletTotalInfo.aboutToExpire.length == 0 ||
+            walletTotalInfo.aboutToExpire[0].points <= 0) {
+            return pointExpireInfoAsString;
         }
-        let playerElevateInfo = res.data;
-        this.playerElevateLevel = playerElevateInfo.level;
-        this.playerElevateLevel.name = this.playerElevateLevel.presentation.displayName || this.playerElevateLevel.name;
-        this.playerElevateLevel.spendablePoints = ((_a = playerElevateInfo.spendableWallet) === null || _a === void 0 ? void 0 : _a.total.points) || 0;
-        this.playerElevateLeveLoaded.emit({ elevateLevel: this.playerElevateLevel });
-        const spendableTotal = (_b = res.data.spendableWallet) === null || _b === void 0 ? void 0 : _b.total;
-        const loyaltyWalletTotal = (_c = res.data.loyaltyWallet) === null || _c === void 0 ? void 0 : _c.total;
-        this.playerElevateLeveLoaded.emit({
-          elevateLevelWalletTotal: spendableTotal,
-          loyaltyWalletTotal
+        walletTotalInfo.aboutToExpire.sort((expire1, expire2) => {
+            return isBefore(new Date(expire1.expireTime), new Date(expire2.expireTime))
+                ? -1
+                : 1;
         });
-        let spExpireInfoAsString = this.calcuatePointsToBeExpired(spendableTotal);
-        let xpExpireInfoAsString = this.calcuatePointsToBeExpired(loyaltyWalletTotal);
-        if (spExpireInfoAsString || xpExpireInfoAsString) {
-          this.playerElevateLeveLoaded.emit({
-            pointExpireString: spExpireInfoAsString,
-            xpExpireString: xpExpireInfoAsString
-          });
+        const aboutToExpire = walletTotalInfo.aboutToExpire[0];
+        const daysToExpried = differenceInCalendarDays(new Date(aboutToExpire.expireTime), new Date());
+        let hoursToExpired = 0, expiredTranslationKey = daysToExpried === 0 ? 'pointsToBeExpiredDay' : 'pointsToBeExpired';
+        if (daysToExpried == 0) {
+            hoursToExpired = differenceInHours(new Date(aboutToExpire.expireTime), new Date());
+            expiredTranslationKey = hoursToExpired > 1 ? 'pointsToBeExpiredHours' : 'pointsToBeExpiredHour';
         }
-        resolve(this.playerElevateLevel);
-      })
-        .catch((err) => {
-        console.log('error ', err);
-        reject(true);
-      });
-    });
-  }
-  setLoyaltyProgress(percent) {
-    updateProgressSvg(this.loyaltyProgressEle, percent);
-  }
-  initLevelProgressbar() {
-    setTimeout(() => {
-      this.loyaltyProgressEle =
-        this.elevateCardRef.parentElement.querySelector('#LevelProgress');
-      if (!this.loyaltyProgressEle) {
-        return;
-      }
-      this.setLoyaltyProgress(!this.playerElevateLevel.nextLevel
-        ? 1 : (this.playerElevateLevel.loyaltyPoints / this.playerElevateLevel.nextLevel.entryPoints));
-      this.params['playerElevateLevel'] = this.playerElevateLevel;
-    }, 80);
-  }
-  componentDidRender() {
-    this.initLevelProgressbar();
-  }
-  loadElevateInfo() {
-    if (!this.params.endpoint || !this.params.session) {
-      return;
-    }
-    const promises = [];
-    promises.push(this.loadPlayerLevelInfo());
-    if (this.params.calculateLevelFlag) {
-      promises.push(this.loadLevels());
-    }
-    Promise.all(promises).then((res) => {
-      console.log('elevate-init', res);
-      this.initLevelProgressbar();
-      if (!this.levels) {
-        return;
-      }
-      this.levels.sort((level1, level2) => {
-        return level1.firstEntryPoints > level2.firstEntryPoints ? 1 : -1;
-      });
-      const playerPoints = this.playerElevateLevel.loyaltyPoints;
-      let playerLevelNumber = 0;
-      this.levels.forEach((elevateLevel, idx) => {
-        if (playerPoints > elevateLevel.firstEntryPoints) {
-          playerLevelNumber = idx;
+        else {
         }
-      });
-      this.playerElevateLeveLoaded.emit({
-        calculatedLevelFlag: playerLevelNumber,
-      });
-    });
-  }
-  componentWillLoad() {
-    this.loadElevateInfo();
-  }
-  static get is() { return "player-elevate-card-data"; }
-  static get originalStyleUrls() { return {
-    "$": ["player-elevate-card-data.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["player-elevate-card-data.css"]
-  }; }
-  static get properties() { return {
-    "params": {
-      "type": "any",
-      "mutable": false,
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "params",
-      "reflect": false
-    }
-  }; }
-  static get states() { return {
-    "playerElevateLevel": {},
-    "pointExpireString": {}
-  }; }
-  static get events() { return [{
-      "method": "playerElevateLeveLoaded",
-      "name": "playerElevateLeveLoaded",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }]; }
-  static get elementRef() { return "elevateCardRef"; }
-  static get watchers() { return [{
-      "propName": "params",
-      "methodName": "onParamsChanged"
-    }]; }
-  static get listeners() { return [{
-      "name": "resize",
-      "method": "handleWindowResizs",
-      "target": "window",
-      "capture": false,
-      "passive": true
-    }, {
-      "name": "redeemGiftButton",
-      "method": "redeemGiftButtonHandler",
-      "target": "window",
-      "capture": false,
-      "passive": false
-    }]; }
+        pointExpireInfoAsString = translateWithParams(expiredTranslationKey, {
+            expirationPoints: aboutToExpire.points,
+            expireDay: daysToExpried,
+        });
+        return pointExpireInfoAsString;
+    }
+    loadPlayerLevelInfo() {
+        let url = new URL(`${this.params.endpoint}/v1/elevate/playerInfo?language=${this.params.language}`);
+        return new Promise((resolve, reject) => {
+            return fetch(url.href, {
+                method: 'GET',
+                headers: {
+                    'X-Sessionid': this.params.session,
+                    'Content-Type': 'application/json',
+                },
+            })
+                .then((res) => res.json())
+                .then((res) => {
+                var _a, _b, _c;
+                if (!res.success) {
+                    console.error('Exception when fetch user elevateinfo, ', res.errorCode, res.errorMessage);
+                    reject(true);
+                    return;
+                }
+                let playerElevateInfo = res.data;
+                this.playerElevateLevel = playerElevateInfo.level;
+                this.playerElevateLevel.name = this.playerElevateLevel.presentation.displayName || this.playerElevateLevel.name;
+                this.playerElevateLevel.spendablePoints = ((_a = playerElevateInfo.spendableWallet) === null || _a === void 0 ? void 0 : _a.total.points) || 0;
+                this.playerElevateLeveLoaded.emit({ elevateLevel: this.playerElevateLevel });
+                const spendableTotal = (_b = res.data.spendableWallet) === null || _b === void 0 ? void 0 : _b.total;
+                const loyaltyWalletTotal = (_c = res.data.loyaltyWallet) === null || _c === void 0 ? void 0 : _c.total;
+                this.playerElevateLeveLoaded.emit({
+                    elevateLevelWalletTotal: spendableTotal,
+                    loyaltyWalletTotal
+                });
+                let spExpireInfoAsString = this.calcuatePointsToBeExpired(spendableTotal);
+                let xpExpireInfoAsString = this.calcuatePointsToBeExpired(loyaltyWalletTotal);
+                if (spExpireInfoAsString || xpExpireInfoAsString) {
+                    this.playerElevateLeveLoaded.emit({
+                        pointExpireString: spExpireInfoAsString,
+                        xpExpireString: xpExpireInfoAsString
+                    });
+                }
+                resolve(this.playerElevateLevel);
+            })
+                .catch((err) => {
+                console.log('error ', err);
+                reject(true);
+            });
+        });
+    }
+    setLoyaltyProgress(percent) {
+        updateProgressSvg(this.loyaltyProgressEle, percent);
+    }
+    initLevelProgressbar() {
+        setTimeout(() => {
+            this.loyaltyProgressEle =
+                this.elevateCardRef.parentElement.querySelector('#LevelProgress');
+            if (!this.loyaltyProgressEle) {
+                return;
+            }
+            this.setLoyaltyProgress(!this.playerElevateLevel.nextLevel
+                ? 1 : (this.playerElevateLevel.loyaltyPoints / this.playerElevateLevel.nextLevel.entryPoints));
+            this.params['playerElevateLevel'] = this.playerElevateLevel;
+        }, 80);
+    }
+    componentDidRender() {
+        this.initLevelProgressbar();
+    }
+    loadElevateInfo() {
+        if (!this.params.endpoint || !this.params.session) {
+            return;
+        }
+        const promises = [];
+        promises.push(this.loadPlayerLevelInfo());
+        if (this.params.calculateLevelFlag) {
+            promises.push(this.loadLevels());
+        }
+        Promise.all(promises).then((res) => {
+            console.log('elevate-init', res);
+            this.initLevelProgressbar();
+            if (!this.levels) {
+                return;
+            }
+            this.levels.sort((level1, level2) => {
+                return level1.firstEntryPoints > level2.firstEntryPoints ? 1 : -1;
+            });
+            const playerPoints = this.playerElevateLevel.loyaltyPoints;
+            let playerLevelNumber = 0;
+            this.levels.forEach((elevateLevel, idx) => {
+                if (playerPoints > elevateLevel.firstEntryPoints) {
+                    playerLevelNumber = idx;
+                }
+            });
+            this.playerElevateLeveLoaded.emit({
+                calculatedLevelFlag: playerLevelNumber,
+            });
+        });
+    }
+    componentWillLoad() {
+        this.loadElevateInfo();
+    }
+    static get is() { return "player-elevate-card-data"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["player-elevate-card-data.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["player-elevate-card-data.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "params": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "params",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "playerElevateLevel": {},
+            "pointExpireString": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "playerElevateLeveLoaded",
+                "name": "playerElevateLeveLoaded",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "elevateCardRef"; }
+    static get watchers() {
+        return [{
+                "propName": "params",
+                "methodName": "onParamsChanged"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "resize",
+                "method": "handleWindowResizs",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }];
+    }
 }

package/dist/collection/components/player-elevate-loyaltycard/player-elevate-loyaltycard.css

@@ -59,13 +59,6 @@
   color: var(--emfe-w-elevate-color-levelname, #FFBD2B);
   font-weight: bold;
 }
-.LoyaltyCard .Row {
-  padding-top: 3px;
-  padding-bottom: 5px;
-}
-.LoyaltyCard .ExpireTime {
-  margin-left: 5px;
-}
 .LoyaltyCard .NextLevelTip {
   text-align: right;
   font-size: 11px;