@everymatrix/player-elevate-points-history 1.31.2

package/dist/cjs/player-elevate-card.cjs.entry.js

@@ -0,0 +1,77 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-974f5239.js');
+const playerElevateCardItems = require('./player-elevate-card-items-67656c5f.js');
+
+const playerElevateCardCss = "@container (max-width: 270px) {\n  .Card .Inner {\n    flex-direction: column;\n  }\n  .Card .Inner .Content {\n    padding: 9px;\n  }\n\n  .Inner .Row .ExpirationPoints {\n    order: 1;\n  }\n}\n.Card .PlayerImg {\n  order: 0;\n}\n.Card .ExpirationPoints {\n  order: 3;\n}\n.Card .LevelInfo {\n  order: 2;\n}\n.Card .Inner .Row .PlayerImg {\n  flex-direction: column;\n}\n.Card .Inner .Row .PointsInfo {\n  width: 100%;\n  text-align: center;\n  display: flex;\n  flex-direction: column;\n  max-height: 50%;\n}\n.Card .Inner .PlayerAvatar .Badge {\n  background-size: contain;\n  background-repeat: no-repeat;\n  position: absolute;\n  right: 5px;\n  bottom: -5px;\n  width: 40%;\n  height: 40%;\n  overflow: visible;\n}\n.Card .Inner .Row .ExpirationPoints {\n  text-align: left;\n  color: var(--emfe-w-color-red, red);\n}\n.Card .Inner .Row .Points {\n  text-wrap: nowrap;\n}\n.Card .Inner .LevelInfo .ElevateLevel {\n  flex-direction: column;\n}\n.Card .Inner .LevelInfo .ElevateLevel .LevelName {\n  width: calc(100% - 20px);\n  text-align: left;\n  font-size: 13px;\n  padding-left: 20px;\n  margin: 10px 0;\n}\n.Card .Inner .LevelInfo .ElevateLevel .ExpirationDate {\n  text-align: center;\n  font-size: smaller;\n}\n.Card .Inner .LevelInfo .ElevateLevel .ExpireTime {\n  margin-left: 5px;\n}";
+
+const PlayerElevateCard = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * 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 = '';
+    this.playerLevelFlag = 0;
+  }
+  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;
+    }
+    if (event.detail.calculatedLevelFlag) {
+      this.playerLevelFlag = event.detail.calculatedLevelFlag;
+    }
+  }
+  onRedeemClick() {
+    window.postMessage({ type: 'BEERedeemClicked' }, window.location.href);
+  }
+  componentWillLoad() {
+    this.paramProxy = {
+      endpoint: this.endpoint,
+      session: this.session,
+      language: this.language,
+      calculateLevelFlag: true,
+    };
+  }
+  render() {
+    const backgroundOuterImagePath = index.getAssetPath('../static/card-ground.svg');
+    const backgroundInnerImagePath = index.getAssetPath('../static/card-ground-over.svg');
+    return (index.h("div", { class: `ElevateCardWrapper ${this.theme}` }, index.h("div", { class: "Card Outer", style: { 'backgroundImage': `url(${backgroundOuterImagePath}` } }, index.h("general-styling-wrapper", { clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl, targetTranslations: playerElevateCardItems.TRANSLATIONS, translationUrl: this.translationUrl }), index.h("player-elevate-card-data", { params: this.paramProxy }), index.h("div", { class: "OuterCover Inner", style: { 'backgroundImage': `url(${backgroundInnerImagePath}` } }, this.playerElevateLevel && (index.h(index.Fragment, null, index.h("div", { class: 'Content Row' }, index.h("div", { class: "PlayerImg" }, index.h(playerElevateCardItems.PlayerAvatar, { playerAvatarUrl: this.playerAvatarUrl, loyaltyIconUrl: this.playerElevateLevel.presentation.asset }), index.h(playerElevateCardItems.PlayerPoints, { loyaltyPoints: this.playerElevateLevel.loyaltyPoints, language: this.language })), this.pointExpireString && (index.h("div", { class: 'PointsInfo ExpirationPoints' }, this.pointExpireString, " ")), index.h("div", { class: `LevelInfo Level${this.playerLevelFlag} ${this.playerElevateLevel.presentation.displayName}` }, index.h(playerElevateCardItems.PlayerNameDiv, { playerName: this.playerName }), index.h(playerElevateCardItems.PlayerElevateLoyaltyLevel, { hideInfo: true, level: this.playerElevateLevel.name, expireTime: this.playerElevateLevel.expireTime, dateFormat: this.dateFormat }), index.h(playerElevateCardItems.PlayerLoyaltyProcess, null), index.h(playerElevateCardItems.PlayerElevateCardRedeem, { onRedeemClick: this.onRedeemClick, language: this.language })))))))));
+  }
+  static get assetsDirs() { return ["../static"]; }
+};
+PlayerElevateCard.style = playerElevateCardCss;
+
+exports.player_elevate_card = PlayerElevateCard;

package/dist/cjs/player-elevate-loyaltycard.cjs.entry.js

@@ -0,0 +1,84 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-974f5239.js');
+const playerElevateCardItems = require('./player-elevate-card-items-67656c5f.js');
+
+const playerElevateLoyaltycardCss = ":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}";
+
+const PlayerElevateLoyaltycard = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * 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 playerElevateCardItems.translateWithParams('tipsForNextLevel', {
+        pointsToReach,
+        levelName: nextLevel.name,
+      });
+    }
+    return '';
+  }
+  render() {
+    const backgroundOuterImagePath = index.getAssetPath('../static/card-ground.svg');
+    const backgroundInnerImagePath = index.getAssetPath('../static/card-ground-over.svg');
+    return (index.h("div", { class: `ElevateCardWrapper ${this.theme}` }, index.h("div", { class: "LoyaltyCard Outer", style: { 'backgroundImage': `url(${backgroundOuterImagePath}` } }, index.h("general-styling-wrapper", { clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl, targetTranslations: playerElevateCardItems.TRANSLATIONS, translationUrl: this.translationUrl }), index.h("player-elevate-card-data", { params: this.paramsProxy }), index.h("div", { class: 'OuterCover Inner', style: { 'backgroundImage': `url(${backgroundInnerImagePath}` } }, index.h("div", { class: 'Content Row' }, this.playerElevateLevel && (index.h(index.Fragment, null, index.h("div", { class: "PlayerImg" }, index.h(playerElevateCardItems.PlayerAvatar, { onlyBadge: true, loyaltyIconUrl: this.playerElevateLevel.presentation.asset })), index.h("div", { class: `LevelInfo ${this.playerElevateLevel.name}` }, index.h(playerElevateCardItems.PlayerElevateLoyaltyLevel, { hideInfo: true, level: this.playerElevateLevel.name, expireTime: this.playerElevateLevel.expireTime, dateFormat: this.dateFormat }), index.h(playerElevateCardItems.PlayerPoints, { loyaltyPoints: this.playerElevateLevel.loyaltyPoints, language: this.language }), this.pointExpireString && (index.h("div", { class: 'PointsInfo ExpirationPoints' }, this.pointExpireString, " ")), index.h(playerElevateCardItems.PlayerLoyaltyProcess, null), index.h("div", { class: "NextLevelTip" }, this.getNextLevelTips())))))))));
+  }
+};
+PlayerElevateLoyaltycard.style = playerElevateLoyaltycardCss;
+
+exports.player_elevate_loyaltycard = PlayerElevateLoyaltycard;

package/dist/cjs/player-elevate-points-history.cjs.js

@@ -0,0 +1,19 @@
+'use strict';
+
+const index = require('./index-974f5239.js');
+
+/*
+ Stencil Client Patch Browser v2.15.2 | MIT Licensed | https://stenciljs.com
+ */
+const patchBrowser = () => {
+    const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('player-elevate-points-history.cjs.js', document.baseURI).href));
+    const opts = {};
+    if (importMeta !== '') {
+        opts.resourcesUrl = new URL('.', importMeta).href;
+    }
+    return index.promiseResolve(opts);
+};
+
+patchBrowser().then(options => {
+  return index.bootstrapLazy([["bonus-pagination-limits_6.cjs",[[1,"player-elevate-points-history",{"playerAvatarUrl":[513,"player-avatar-url"],"session":[513],"endpoint":[513],"limit":[1538],"secondaryArrowsActive":[1540,"secondary-arrows-active"],"displayPageNumbers":[1540,"display-page-numbers"],"pageLimitOptions":[1537,"page-limit-options"],"language":[513],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"locale":[32],"type":[32],"pageSetting":[32],"pointsWallets":[32]},[[0,"reloadPageByType","reloadPageByTypeHandler"]]],[1,"player-elevate-pointcard",{"endpoint":[513],"theme":[513],"session":[513],"playerAvatarUrl":[513,"player-avatar-url"],"language":[513],"playerName":[513,"player-name"],"cardTitle":[513,"card-title"],"buttonType":[513,"button-type"],"dateFormat":[513,"date-format"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"pointExpireString":[32],"playerElevateLevel":[32],"elevateWalletTotal":[32],"elevateSPTotal":[32]},[[0,"playerElevateLeveLoaded","playerElevateLeveLoadedHandler"]]],[0,"bonus-pagination-limits",{"language":[513],"translationUrl":[513,"translation-url"],"pageLimitOptions":[513,"page-limit-options"],"limit":[1538],"pageLimits":[32]}],[0,"bonus-pagination-nav",{"total":[1538],"limit":[1538],"offset":[1538],"tableId":[1537,"table-id"],"language":[1537],"translationUrl":[513,"translation-url"],"arrowsActive":[1540,"arrows-active"],"secondaryArrowsActive":[1540,"secondary-arrows-active"],"displayPageNumbers":[1540,"display-page-numbers"],"displayRangeOfTotal":[1540,"display-range-of-total"],"endPageIndex":[32],"pagesArray":[32],"currentPage":[32]},[[8,"paginationReset","pageLimitChangedHandler"],[8,"pageLimitChanged","pageLimitChangedHandler"]]],[0,"player-elevate-card-data",{"params":[8],"playerElevateLevel":[32],"pointExpireString":[32]},[[9,"resize","handleWindowResizs"]]],[4,"general-styling-wrapper",{"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"translationUrl":[1,"translation-url"],"targetTranslations":[16]}]]],["player-elevate-card.cjs",[[1,"player-elevate-card",{"endpoint":[513],"theme":[513],"session":[513],"playerAvatarUrl":[513,"player-avatar-url"],"language":[513],"playerName":[513,"player-name"],"dateFormat":[513,"date-format"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"pointExpireString":[32],"playerLevelFlag":[32],"playerElevateLevel":[32],"elevateWalletTotal":[32]},[[0,"playerElevateLeveLoaded","playerElevateLeveLoadedHandler"]]]]],["player-elevate-loyaltycard.cjs",[[1,"player-elevate-loyaltycard",{"endpoint":[513],"theme":[513],"session":[513],"playerAvatarUrl":[513,"player-avatar-url"],"language":[513],"playerName":[513,"player-name"],"dateFormat":[513,"date-format"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"pointExpireString":[32],"playerElevateLevel":[32],"elevateWalletTotal":[32]},[[0,"playerElevateLeveLoaded","playerElevateLeveLoadedHandler"]]]]]], options);
+});

package/dist/collection/collection-manifest.json

@@ -0,0 +1,40 @@
+{
+  "entries": [
+    "./components/player-elevate-points-history/player-elevate-points-history.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "2.15.2",
+    "typescriptVersion": "4.5.4"
+  },
+  "collections": [
+    {
+      "name": "@everymatrix/bonus-pagination-limits",
+      "tags": [
+        "bonus-pagination-limits"
+      ]
+    },
+    {
+      "name": "@everymatrix/bonus-pagination-nav",
+      "tags": [
+        "bonus-pagination-nav"
+      ]
+    },
+    {
+      "name": "@everymatrix/general-styling-wrapper",
+      "tags": [
+        "general-styling-wrapper"
+      ]
+    },
+    {
+      "name": "@everymatrix/player-elevate-card",
+      "tags": [
+        "player-elevate-card",
+        "player-elevate-card-data",
+        "player-elevate-loyaltycard",
+        "player-elevate-pointcard"
+      ]
+    }
+  ],
+  "bundles": []
+}

package/dist/collection/components/player-elevate-points-history/player-elevate-points-history.css

@@ -0,0 +1,174 @@
+:host {
+  display: block;
+}
+
+main {
+  max-width: 420px;
+}
+main player-elevate-pointcard {
+  width: 100%;
+  height: 220px;
+}
+
+.PlayerElevatePointsDetaisContainer {
+  background: #FFFFFF;
+  padding: 20px 10px 0;
+  margin-top: -100px;
+  position: relative;
+  min-height: 360px;
+}
+.PlayerElevatePointsDetaisContainer .ReloadMsg {
+  padding: 20px;
+}
+.PlayerElevatePointsDetaisContainer .ReloadMsg a.Reload {
+  cursor: pointer;
+}
+
+.TitleContainer {
+  font-size: 20px;
+  font-weight: 500;
+  line-height: 25px;
+  letter-spacing: 0em;
+  text-align: left;
+  display: flex;
+  justify-content: space-between;
+}
+
+.TopBarContainer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.TopBarContainer .TitleContainer {
+  width: 100%;
+}
+.TopBarContainer .Title {
+  background: #303030;
+  padding: 5px 16px;
+  color: #FFFFFF;
+  box-shadow: 0px 4px 13px 0px #00000040;
+  border-radius: 8px;
+  width: fit-content;
+  margin-left: 7px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.PaginationContainer {
+  display: flex;
+  justify-content: center;
+}
+
+.MonthStat {
+  margin-top: 25px;
+  display: none;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 19px;
+  letter-spacing: 0px;
+  text-align: left;
+  color: #242424;
+}
+.MonthStat .Amount {
+  color: #53B65A;
+}
+
+.BackImageContainer {
+  width: 35px;
+  height: 35px;
+  flex: 0 0 35px;
+  border-radius: 6px;
+  text-align: center;
+  line-height: 35px;
+  box-shadow: 0px 4px 40px 0px #8A959E33;
+  display: none;
+}
+
+.Records {
+  margin-top: 16px;
+}
+
+.MenuImage, .BackImage {
+  cursor: pointer;
+  display: none;
+}
+
+.Row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.Row:nth-child(n+2) {
+  margin-top: 3px;
+}
+
+.Tabs.Row {
+  justify-content: space-around;
+  margin-top: 20px;
+}
+.Tabs.Row .TabText {
+  font-size: 16px;
+  margin: 10px 15px;
+  color: #9C9C9C;
+  cursor: pointer;
+}
+.Tabs.Row .TabText.active {
+  color: #242424;
+  font-weight: 600;
+}
+.Tabs.Row .TabBorderBottom {
+  height: 5px;
+  border-radius: 4px;
+  background: transparent;
+}
+.Tabs.Row .TabBorderBottom.active {
+  background: #242424;
+}
+
+.RecordContainer {
+  margin: 5px 0;
+  padding: 10px;
+  box-shadow: 0px 0px 8px 0px #0000001A;
+  border-radius: 5px;
+}
+.RecordContainer .Title {
+  color: #242424;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 19px;
+  letter-spacing: 0px;
+  text-align: left;
+}
+.RecordContainer .Amount {
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 19px;
+  letter-spacing: 0px;
+  text-align: left;
+}
+.RecordContainer .Amount.Positive {
+  color: #53B65A;
+}
+.RecordContainer .Amount.Negative {
+  color: #B41E2D;
+}
+.RecordContainer .DateTime {
+  color: #9C9C9C;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 19px;
+  letter-spacing: 0px;
+  text-align: left;
+}
+.RecordContainer .Tag {
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 14px;
+  letter-spacing: 0em;
+  text-align: center;
+  color: #767171;
+  padding: 8px 30px;
+  border-radius: 8px;
+  box-shadow: 0px 2px 4px 0px #00000040;
+}