@everymatrix/player-elevate-card 1.31.2

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

@@ -0,0 +1,208 @@
+import { Component, Prop, State, Event, Element, Listen, } from '@stencil/core';
+import { differenceInCalendarDays, differenceInHours, isBefore } from 'date-fns';
+import { translateWithParams } from '../../utils/locale.utils';
+import '@everymatrix/general-styling-wrapper';
+import { updateProgressSvg } from "../../utils/utils";
+export class PlayerElevateCardData {
+  handleWindowResizs() {
+    this.initLevelProgressbar();
+  }
+  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;
+        }
+        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.entryPoints) /
+          (this.playerElevateLevel.nextLevel.entryPoints -
+            this.playerElevateLevel.loyaltyPoints));
+      this.params['playerElevateLevel'] = this.playerElevateLevel;
+    }, 80);
+  }
+  componentWillRender() { }
+  componentDidRender() {
+    this.initLevelProgressbar();
+  }
+  componentWillLoad() {
+    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,
+      });
+    });
+  }
+  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 listeners() { return [{
+      "name": "resize",
+      "method": "handleWindowResizs",
+      "target": "window",
+      "capture": false,
+      "passive": true
+    }]; }
+}

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

@@ -0,0 +1,68 @@
+:host {
+  display: block;
+}
+
+@media screen and (min-width: 501px) {
+  .LoyaltyCard .Inner .LevelInfo .ElevateLevel {
+    flex-wrap: nowrap;
+  }
+  .LoyaltyCard .Inner .LevelInfo .ElevateLevel .ExpirationDate {
+    padding-top: 11px;
+    margin-left: 5px;
+  }
+}
+@media screen and (max-width: 500px) {
+  .LoyaltyCard .Inner .LevelInfo .ElevateLevel {
+    flex-wrap: wrap;
+  }
+  .LoyaltyCard .Inner .LevelInfo .ElevateLevel .ExpirationDate {
+    padding-top: 0px;
+    margin-left: 0px;
+  }
+}
+.LoyaltyCard .Inner .LevelProgress {
+  margin-left: 0px;
+}
+.LoyaltyCard .Inner .Row .PointsInfo {
+  width: 100%;
+}
+.LoyaltyCard .Inner .Row .PointsInfo.ExpirationPoints {
+  text-align: left;
+  color: var(--emfe-w-color-red-50, red);
+}
+.LoyaltyCard .Inner .PlayerAvatar .Avatar {
+  display: none;
+}
+.LoyaltyCard .Inner .PlayerAvatar .Badge {
+  border-radius: 50%;
+  background-size: contain;
+  width: 100%;
+  height: 100%;
+}
+.LoyaltyCard .Inner .LevelInfo .ElevateLevel {
+  display: flex;
+  flex: 1;
+  align-items: center;
+}
+.LoyaltyCard .Inner .LevelInfo .ElevateLevel .ExpirationDate {
+  position: relative;
+  padding-left: 5px;
+}
+.LoyaltyCard .Inner .LevelInfo .ElevateLevel .ExpirationDate .ExpireTime {
+  margin-left: 5px;
+}
+.LoyaltyCard .Inner .LevelInfo .ElevateLevel .LevelName {
+  padding-left: 0;
+  font-size: var(--emfe-w-elevate-fontsize-2xlarge, 21px);
+  position: relative;
+  width: auto;
+  color: var(--emfe-w-elevate-color-levelname, #FFBD2B);
+  font-weight: bold;
+}
+.LoyaltyCard .NextLevelTip {
+  text-align: right;
+  font-size: 11px;
+  color: var(--emfe-w-color-black, #000);
+  opacity: 0.8;
+  font-weight: bold;
+}

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

@@ -0,0 +1,287 @@
+import { Component, Fragment, getAssetPath, h, Listen, Prop, State } from '@stencil/core';
+import { PlayerAvatar, PlayerElevateLoyaltyLevel, PlayerLoyaltyProcess, PlayerPoints, } from '../player-elevate-card/player-elevate-card-items';
+import { translateWithParams, TRANSLATIONS } from '../../utils/locale.utils';
+export class PlayerElevateLoyaltycard {
+  constructor() {
+    /**
+     * The style that widget shows,available value: Dark, Light
+     * Default: Dark
+     */
+    this.theme = 'Dark';
+    /**
+     * Widget Language to show
+     */
+    this.language = 'en';
+    /**
+     * datePattern
+     */
+    this.dateFormat = 'yyyy-MM-dd';
+    /**
+     * Client custom styling via inline styles
+     */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url
+     */
+    this.clientStylingUrl = '';
+    /**
+     * Translation via url
+     */
+    this.translationUrl = '';
+  }
+  playerElevateLeveLoadedHandler(event) {
+    if (!event.detail) {
+      return;
+    }
+    if (event.detail['elevateLevelWalletTotal']) {
+      this.elevateWalletTotal = event.detail['elevateLevelWalletTotal'];
+    }
+    if (event.detail['elevateLevel']) {
+      this.playerElevateLevel = event.detail['elevateLevel'];
+    }
+    if (event.detail['pointExpireString']) {
+      this.pointExpireString = event.detail.xpExpireString;
+    }
+  }
+  onRedeemClick() {
+    window.postMessage({ type: 'BEERedeemClicked' }, window.location.href);
+  }
+  componentWillLoad() {
+    this.paramsProxy = {
+      endpoint: this.endpoint,
+      session: this.session,
+      language: this.language,
+    };
+  }
+  getNextLevelTips() {
+    var _a;
+    //need xx to reach Diamond
+    let nextLevel = (_a = this.playerElevateLevel) === null || _a === void 0 ? void 0 : _a.nextLevel;
+    if (this.playerElevateLevel && nextLevel) {
+      const pointsToReach = (nextLevel.entryPoints - this.playerElevateLevel.loyaltyPoints).toFixed(2);
+      return translateWithParams('tipsForNextLevel', {
+        pointsToReach,
+        levelName: nextLevel.name,
+      });
+    }
+    return '';
+  }
+  render() {
+    const backgroundOuterImagePath = getAssetPath('../static/card-ground.svg');
+    const backgroundInnerImagePath = getAssetPath('../static/card-ground-over.svg');
+    return (h("div", { class: `ElevateCardWrapper ${this.theme}` },
+      h("div", { class: "LoyaltyCard Outer", style: { 'backgroundImage': `url(${backgroundOuterImagePath}` } },
+        h("general-styling-wrapper", { clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl, targetTranslations: TRANSLATIONS, translationUrl: this.translationUrl }),
+        h("player-elevate-card-data", { params: this.paramsProxy }),
+        h("div", { class: 'OuterCover Inner', style: { 'backgroundImage': `url(${backgroundInnerImagePath}` } },
+          h("div", { class: 'Content Row' }, this.playerElevateLevel && (h(Fragment, null,
+            h("div", { class: "PlayerImg" },
+              h(PlayerAvatar, { onlyBadge: true, loyaltyIconUrl: this.playerElevateLevel.presentation.asset })),
+            h("div", { class: `LevelInfo ${this.playerElevateLevel.name}` },
+              h(PlayerElevateLoyaltyLevel, { hideInfo: true, level: this.playerElevateLevel.name, expireTime: this.playerElevateLevel.expireTime, dateFormat: this.dateFormat }),
+              h(PlayerPoints, { loyaltyPoints: this.playerElevateLevel.loyaltyPoints, language: this.language }),
+              this.pointExpireString && (h("div", { class: 'PointsInfo ExpirationPoints' },
+                this.pointExpireString,
+                " ")),
+              h(PlayerLoyaltyProcess, null),
+              h("div", { class: "NextLevelTip" }, this.getNextLevelTips())))))))));
+  }
+  static get is() { return "player-elevate-loyaltycard"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["player-elevate-loyaltycard.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["player-elevate-loyaltycard.css"]
+  }; }
+  static get properties() { return {
+    "endpoint": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The NWA endpoint"
+      },
+      "attribute": "endpoint",
+      "reflect": true
+    },
+    "theme": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The style that widget shows,available value: Dark, Light\nDefault: Dark"
+      },
+      "attribute": "theme",
+      "reflect": true,
+      "defaultValue": "'Dark'"
+    },
+    "session": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The NWA session for the logged-in user"
+      },
+      "attribute": "session",
+      "reflect": true
+    },
+    "playerAvatarUrl": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Widget, player avatar url"
+      },
+      "attribute": "player-avatar-url",
+      "reflect": true
+    },
+    "language": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Widget Language to show"
+      },
+      "attribute": "language",
+      "reflect": true,
+      "defaultValue": "'en'"
+    },
+    "playerName": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The first name"
+      },
+      "attribute": "player-name",
+      "reflect": true
+    },
+    "dateFormat": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "datePattern"
+      },
+      "attribute": "date-format",
+      "reflect": true,
+      "defaultValue": "'yyyy-MM-dd'"
+    },
+    "clientStyling": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Client custom styling via inline styles"
+      },
+      "attribute": "client-styling",
+      "reflect": true,
+      "defaultValue": "''"
+    },
+    "clientStylingUrl": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Client custom styling via url"
+      },
+      "attribute": "client-styling-url",
+      "reflect": true,
+      "defaultValue": "''"
+    },
+    "translationUrl": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Translation via url"
+      },
+      "attribute": "translation-url",
+      "reflect": true,
+      "defaultValue": "''"
+    }
+  }; }
+  static get states() { return {
+    "pointExpireString": {},
+    "playerElevateLevel": {},
+    "elevateWalletTotal": {}
+  }; }
+  static get listeners() { return [{
+      "name": "playerElevateLeveLoaded",
+      "method": "playerElevateLeveLoadedHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}

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

@@ -0,0 +1,70 @@
+:host {
+  display: block;
+}
+
+.PointsCard .Inner .Row .ExpirationPoints {
+  text-align: left;
+}
+.PointsCard .Inner .PlayerAvatar .Avatar {
+  display: none;
+}
+.PointsCard .Inner .PlayerAvatar .Badge {
+  border-radius: 50%;
+  background-size: contain;
+  width: 100%;
+  height: 100%;
+  position: inherit;
+}
+.PointsCard .Inner .PointsTxt {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+.PointsCard .Inner .DetailButton {
+  background: linear-gradient(283.85deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 33.47%), linear-gradient(117.99deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 33.89%), linear-gradient(268.18deg, rgba(255, 255, 255, 0.6) -17.36%, rgba(239, 239, 239, 0) 15.78%), linear-gradient(0deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6));
+  border-radius: 5px;
+  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+  border: 2px solid;
+  font-size: 11px;
+  width: 108px;
+  padding: 4px;
+  cursor: pointer;
+  margin-top: 5px;
+  height: 16px;
+  min-width: 45px;
+  text-align: center;
+}
+.PointsCard .Inner .DetailButton span {
+  color: var(--emfe-w-color-gray-150, #6D6D6D);
+}
+.PointsCard .Inner .DetailButton span {
+  display: inline-block;
+  vertical-align: middle;
+}
+.PointsCard .Inner .DetailButton:hover span {
+  color: var(--emfe-w-color-gray-150, #6D6D6D);
+}
+.PointsCard .Inner .LevelInfo {
+  gap: 15px;
+  width: 70%;
+}
+.PointsCard .Inner .LevelInfo .PointsTxt {
+  font-size: 15px;
+}
+.PointsCard .Inner .LevelInfo .PointsTxt.Label {
+  display: none;
+}
+.PointsCard .Inner .LevelInfo .PointsTxt.SPPoints {
+  padding-top: 15px;
+}
+.PointsCard .Inner .LevelInfo .PointsTxt .TC {
+  font-size: x-small;
+  color: var(--emw--color-gray-300, #58586B);
+  display: flex;
+  align-content: center;
+  height: 100%;
+  flex-wrap: wrap;
+  text-decoration: underline;
+  cursor: pointer;
+  display: none;
+}