@everymatrix/player-elevate-card-jojogroup 1.80.4

package/dist/cjs/index.cjs.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-51874d29.js');
+const appGlobals = require('./app-globals-3a1e7e63.js');
+
+const defineCustomElements = async (win, options) => {
+  if (typeof window === 'undefined') return undefined;
+  await appGlobals.globalScripts();
+  return index.bootstrapLazy([["general-styling-wrapper_6.cjs",[[1,"player-elevate-card-jojogroup",{"endpoint":[513],"theme":[513],"session":[513],"playerAvatarUrl":[513,"player-avatar-url"],"language":[513],"playerName":[513,"player-name"],"dateFormat":[513,"date-format"],"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"pointExpireString":[32],"playerLevelFlag":[32],"playerElevateLevel":[32],"elevateWalletTotal":[32]},[[0,"playerElevateLeveLoaded","playerElevateLeveLoadedHandler"]],{"session":["onSessionOrEndpointChange"],"endpoint":["onSessionOrEndpointChange"],"language":["onSessionOrEndpointChange"]}],[1,"player-elevate-loyaltycard-jojogroup",{"endpoint":[513],"theme":[513],"session":[513],"playerAvatarUrl":[513,"player-avatar-url"],"language":[513],"playerName":[513,"player-name"],"dateFormat":[513,"date-format"],"mbSource":[1,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"pointExpireString":[32],"playerElevateLevel":[32],"elevateWalletTotal":[32]},[[0,"playerElevateLeveLoaded","playerElevateLeveLoadedHandler"]],{"session":["onSessionOrEndpointChange"],"endpoint":["onSessionOrEndpointChange"],"language":["onSessionOrEndpointChange"]}],[1,"player-elevate-pointcard",{"endpoint":[513],"theme":[513],"session":[513],"playerAvatarUrl":[513,"player-avatar-url"],"language":[513],"mbSource":[513,"mb-source"],"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"]],{"session":["onSessionOrEndpointChange"],"endpoint":["onSessionOrEndpointChange"],"language":["onSessionOrEndpointChange"]}],[1,"player-rakeback-card",{"endpoint":[513],"theme":[513],"session":[513],"language":[513],"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"show":[516],"rakebackInfo":[32],"isLoading":[32],"coolingOffPeriod":[32],"showTheWidget":[32]},[[8,"message","handleMessage"]],{"session":["onSessionOrEndpointChange"],"endpoint":["onSessionOrEndpointChange"],"language":["onSessionOrEndpointChange"],"show":["onShowOrHasRakebackWalletChange"],"rakebackInfo":["onShowOrHasRakebackWalletChange"]}],[0,"player-elevate-card-data",{"params":[8],"playerElevateLevel":[32],"pointExpireString":[32]},[[9,"resize","handleWindowResizs"],[8,"redeemGiftButton","redeemGiftButtonHandler"]],{"params":["onParamsChanged"]}],[4,"general-styling-wrapper",{"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"mbSource":[1,"mb-source"],"translationUrl":[1,"translation-url"],"targetTranslations":[16]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"]}]]]], options);
+};
+
+exports.setNonce = index.setNonce;
+exports.defineCustomElements = defineCustomElements;

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

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-51874d29.js');
+const appGlobals = require('./app-globals-3a1e7e63.js');
+
+/*
+ Stencil Client Patch Browser v4.19.2 | MIT Licensed | https://stenciljs.com
+ */
+var patchBrowser = () => {
+  const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('player-elevate-card-jojogroup.cjs.js', document.baseURI).href));
+  const opts = {};
+  if (importMeta !== "") {
+    opts.resourcesUrl = new URL(".", importMeta).href;
+  }
+  return index.promiseResolve(opts);
+};
+
+patchBrowser().then(async (options) => {
+  await appGlobals.globalScripts();
+  return index.bootstrapLazy([["general-styling-wrapper_6.cjs",[[1,"player-elevate-card-jojogroup",{"endpoint":[513],"theme":[513],"session":[513],"playerAvatarUrl":[513,"player-avatar-url"],"language":[513],"playerName":[513,"player-name"],"dateFormat":[513,"date-format"],"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"pointExpireString":[32],"playerLevelFlag":[32],"playerElevateLevel":[32],"elevateWalletTotal":[32]},[[0,"playerElevateLeveLoaded","playerElevateLeveLoadedHandler"]],{"session":["onSessionOrEndpointChange"],"endpoint":["onSessionOrEndpointChange"],"language":["onSessionOrEndpointChange"]}],[1,"player-elevate-loyaltycard-jojogroup",{"endpoint":[513],"theme":[513],"session":[513],"playerAvatarUrl":[513,"player-avatar-url"],"language":[513],"playerName":[513,"player-name"],"dateFormat":[513,"date-format"],"mbSource":[1,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"pointExpireString":[32],"playerElevateLevel":[32],"elevateWalletTotal":[32]},[[0,"playerElevateLeveLoaded","playerElevateLeveLoadedHandler"]],{"session":["onSessionOrEndpointChange"],"endpoint":["onSessionOrEndpointChange"],"language":["onSessionOrEndpointChange"]}],[1,"player-elevate-pointcard",{"endpoint":[513],"theme":[513],"session":[513],"playerAvatarUrl":[513,"player-avatar-url"],"language":[513],"mbSource":[513,"mb-source"],"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"]],{"session":["onSessionOrEndpointChange"],"endpoint":["onSessionOrEndpointChange"],"language":["onSessionOrEndpointChange"]}],[1,"player-rakeback-card",{"endpoint":[513],"theme":[513],"session":[513],"language":[513],"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"show":[516],"rakebackInfo":[32],"isLoading":[32],"coolingOffPeriod":[32],"showTheWidget":[32]},[[8,"message","handleMessage"]],{"session":["onSessionOrEndpointChange"],"endpoint":["onSessionOrEndpointChange"],"language":["onSessionOrEndpointChange"],"show":["onShowOrHasRakebackWalletChange"],"rakebackInfo":["onShowOrHasRakebackWalletChange"]}],[0,"player-elevate-card-data",{"params":[8],"playerElevateLevel":[32],"pointExpireString":[32]},[[9,"resize","handleWindowResizs"],[8,"redeemGiftButton","redeemGiftButtonHandler"]],{"params":["onParamsChanged"]}],[4,"general-styling-wrapper",{"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"mbSource":[1,"mb-source"],"translationUrl":[1,"translation-url"],"targetTranslations":[16]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"]}]]]], options);
+});
+
+exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,23 @@
+{
+  "entries": [
+    "components/player-elevate-card-jojogroup/player-elevate-card-jojogroup.js",
+    "components/player-elevate-card-data/player-elevate-card-data.js",
+    "components/player-elevate-loyaltycard-jojogroup/player-elevate-loyaltycard-jojogroup.js",
+    "components/player-elevate-pointcard/player-elevate-pointcard.js",
+    "components/player-rakeback-card/player-rakeback-card.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.19.2",
+    "typescriptVersion": "5.4.5"
+  },
+  "collections": [
+    {
+      "name": "@everymatrix/general-styling-wrapper",
+      "tags": [
+        "general-styling-wrapper"
+      ]
+    }
+  ],
+  "bundles": []
+}

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

@@ -0,0 +1,192 @@
+:host {
+  display: block;
+  width: 360px;
+  height: 230px;
+}
+
+.ElevateCardWrapper {
+  contain: layout inline-size;
+  width: 100%;
+  height: fit-content;
+  min-height: 218px;
+}
+
+.Outer {
+  container-type: inline-size;
+  font-size: 12px;
+  background-size: cover;
+  background-repeat: no-repeat;
+  line-height: initial;
+  width: 100%;
+  height: 100%;
+}
+
+.Dark {
+  color: var(--emw--color-gray150, #efefef);
+}
+
+.Light {
+  color: var(--emw--color-black, #0e0e0e);
+}
+
+@container (min-width: 381px) {
+  .Outer {
+    background-size: cover;
+  }
+  .Outer .OuterCover {
+    min-height: 190px;
+  }
+}
+@container (min-width: 260px) {
+  .Outer {
+    background-size: contain;
+  }
+}
+.OuterCover {
+  width: 100%;
+  height: 100%;
+  content: "";
+  background-repeat: no-repeat;
+  background-size: cover;
+  border-radius: 15px;
+}
+
+.Inner {
+  display: flex;
+  flex-direction: column;
+  min-height: 158px;
+}
+.Inner .Content {
+  padding: 15px;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.Inner .Row {
+  display: flex;
+  flex-direction: row;
+}
+.Inner .CardCell {
+  display: flex;
+}
+.Inner .LevelProgress svg {
+  transition: opacity 0.4s;
+}
+.Inner .LevelInfo {
+  display: flex;
+  flex-direction: column;
+}
+.Inner .LevelInfo .ElevateLevel .LevelName {
+  height: 28px;
+  border-radius: 5px;
+  line-height: 28px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.Inner .LevelInfo.Level0 .ElevateLevel .LevelName {
+  box-shadow: -2px -2px 7px 0px var(--emw--elevate-color-level0button-shadow, rgba(191, 84, 6, 0.75));
+  background: linear-gradient(180deg, var(--emw--elevate-color-level0-bg0, #E2792C) 0%, var(--emw--elevate-color-level0-bg1, rgba(242, 151, 99, 0)) 100%);
+}
+.Inner .LevelInfo.Level1 .ElevateLevel .LevelName {
+  box-shadow: -2px -2px 7px 0px var(--emw--elevate-color-level1button-shadow, rgba(151, 151, 151, 0.75));
+  background: linear-gradient(180deg, var(--emw--elevate-color-level1-bg0, #BEBFED) 0%, var(--emw--elevate-color-level1-bg1, rgba(216, 217, 233, 0)) 100%);
+}
+.Inner .LevelInfo.Level2 .ElevateLevel .LevelName {
+  box-shadow: -2px -2px 7px 0px var(--emw--elevate-color-level2button-shadow, rgba(191, 120, 6, 0.75));
+  background: linear-gradient(180deg, var(--emw--elevate-color-level2-bg0, #FCC410) 0%, var(--emw--elevate-color-level2-bg1, rgba(255, 189, 43, 0)) 100%);
+}
+.Inner .LevelInfo.Level3 .ElevateLevel .LevelName {
+  box-shadow: -2px -2px 7px 0px var(--emw--elevate-color-level3button-shadow, rgba(65, 6, 191, 0.75));
+  background: linear-gradient(180deg, var(--emw--elevate-color-level3-bg0, #B1A2DB) 0%, var(--emw--elevate-color-level3-bg1, rgba(203, 202, 245, 0)) 100%);
+}
+.Inner .LevelInfo.Level4 .ElevateLevel .LevelName {
+  box-shadow: -2px -2px 7px 0px var(--emw--elevate-color-level4button-shadow, rgba(65, 6, 191, 0.75));
+  background: linear-gradient(180deg, var(--emw--elevate-color-level4-bg0, #B1A2DB) 0%, var(--emw--elevate-color-level4-bg1, rgba(203, 202, 245, 0)) 100%);
+}
+.Inner .LevelInfo .ElevateLevel {
+  display: flex;
+}
+.Inner .LevelInfo {
+  flex: 1;
+  flex-grow: 1;
+  min-width: 150px;
+}
+.Inner .PlayerImg {
+  width: 29%;
+  margin: auto;
+  max-width: 100px;
+  min-width: 30px;
+  order: 0;
+}
+.Inner .PlayerAvatar {
+  max-width: 100px;
+  flex-basis: 100px;
+  height: auto;
+  margin: auto;
+  padding-top: 10px;
+}
+.Inner .PlayerAvatar .Avatar, .Inner .PlayerAvatar .Badge {
+  width: 100%;
+  height: 100%;
+}
+.Inner .PlayerAvatar .Avatar {
+  border-radius: 50%;
+  background-size: contain;
+  background-repeat: no-repeat;
+}
+.Inner .ElevateLevel .ExpirationDate {
+  max-width: 138px;
+  min-width: 118px;
+}
+.Inner .PlayerName, .Inner .RedeemButton, .Inner .ElevateLevel {
+  text-transform: capitalize;
+  width: 100%;
+}
+.Inner .PlayerName {
+  font-size: 16px;
+}
+.Inner .Row .PointsInfo {
+  display: table;
+  font-weight: 600;
+}
+.Inner .Row .Redeem {
+  justify-content: flex-end;
+  margin-left: auto;
+}
+.Inner .Row .Redeem:hover {
+  color: var(--emw--elevate-color-redeem-hover, #00ABA4);
+  cursor: pointer;
+}
+.Inner .Row .RedeemButton:hover span {
+  color: var(emfe-w-elevate-color-redeem-text-hover, #f1f1f1);
+  font-weight: bold;
+}
+.Inner .Row .RedeemButton {
+  width: 95px;
+  height: 35px;
+  display: flex;
+  align-items: center;
+  border-radius: var(--emw--border-radius-medium, 10px);
+  background: var(--emw--elevate-color-redeem-bg, linear-gradient(0deg, #26CC37, #26CC37)), linear-gradient(117.99deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 33.89%), linear-gradient(283.85deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 33.47%), linear-gradient(268.18deg, rgba(255, 255, 255, 0.6) -17.36%, rgba(239, 239, 239, 0) 15.78%);
+  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2509803922);
+}
+.Inner .Row .RedeemButton span {
+  color: var(--emw--color-white, #fff);
+  line-height: 18px;
+  font-size: 15px;
+  text-align: center;
+  width: 100%;
+}
+.Inner .Row .Points {
+  font-size: large;
+  vertical-align: middle;
+}
+.Inner .Row .Points .XP {
+  font-size: x-small;
+}
+.Inner .Row .ExpirationPoints {
+  font-size: small;
+  text-align: right;
+  font-weight: bold;
+  color: var(--emw--color-red, #9e595f);
+}

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

@@ -0,0 +1,244 @@
+import { differenceInCalendarDays, differenceInHours, differenceInMinutes, 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 {
+    constructor() {
+        this.params = undefined;
+        this.playerElevateLevel = undefined;
+        this.pointExpireString = undefined;
+    }
+    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, translationPrefix) {
+        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, minutesToExpired = 0, expiredTranslationKey = daysToExpried === 0 ? `${translationPrefix}Day` : translationPrefix;
+        if (daysToExpried <= 0) {
+            hoursToExpired = differenceInHours(new Date(aboutToExpire.expireTime), new Date(), { roundingMethod: 'floor' });
+            expiredTranslationKey = hoursToExpired > 1 ? `${translationPrefix}Hours` : `${translationPrefix}Hour`;
+            if (hoursToExpired <= 0) {
+                minutesToExpired = differenceInMinutes(new Date(aboutToExpire.expireTime), new Date(), { roundingMethod: 'floor' });
+                expiredTranslationKey = minutesToExpired > 1 ? `${translationPrefix}Minutes` : `${translationPrefix}Minute`;
+            }
+        }
+        pointExpireInfoAsString = translateWithParams(expiredTranslationKey, {
+            expirationPoints: aboutToExpire.points,
+            expireDay: Math.max(daysToExpried, hoursToExpired, minutesToExpired),
+            lang: this.params.language,
+        });
+        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, _d, _e;
+                if (!res.success) {
+                    console.error('Exception when fetch user elevateinfo, ', res.errorCode, res.errorMessage);
+                    reject(true);
+                    return;
+                }
+                window.postMessage({ type: 'UpdateGamificationXp', points: (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.level) === null || _b === void 0 ? void 0 : _b.loyaltyPoints }, window.location.href);
+                let playerElevateInfo = res.data;
+                this.playerElevateLevel = playerElevateInfo.level;
+                this.playerElevateLevel.name = this.playerElevateLevel.presentation.displayName || this.playerElevateLevel.name;
+                this.playerElevateLevel.spendablePoints = ((_c = playerElevateInfo.spendableWallet) === null || _c === void 0 ? void 0 : _c.total.points) || 0;
+                this.playerElevateLeveLoaded.emit({ elevateLevel: this.playerElevateLevel });
+                const spendableTotal = (_d = res.data.spendableWallet) === null || _d === void 0 ? void 0 : _d.total;
+                const loyaltyWalletTotal = (_e = res.data.loyaltyWallet) === null || _e === void 0 ? void 0 : _e.total;
+                this.playerElevateLeveLoaded.emit({
+                    elevateLevelWalletTotal: spendableTotal,
+                    loyaltyWalletTotal
+                });
+                let spExpireInfoAsString = this.calcuatePointsToBeExpired(spendableTotal, 'coinsToBeExpired');
+                let xpExpireInfoAsString = this.calcuatePointsToBeExpired(loyaltyWalletTotal, 'pointsToBeExpired');
+                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
+            }, {
+                "name": "redeemGiftButton",
+                "method": "redeemGiftButtonHandler",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/components/player-elevate-card-jojogroup/index.js

@@ -0,0 +1 @@
+export { PlayerElevateCardJojogroup } from './player-elevate-card-jojogroup';

package/dist/collection/components/player-elevate-card-jojogroup/player-elevate-card-jojogroup-items.js

@@ -0,0 +1,23 @@
+import { getAssetPath, h } from "@stencil/core";
+import LoyaltyProgress from "../static/level-percent.svg";
+import { translate } from "../../utils/locale.utils";
+import dateFnsFormat from "date-fns/format";
+import TipsInfo from "../static/tips-info.svg";
+export const PlayerLoyaltyProcess = () => (h("span", { class: "LevelProgress", id: 'LevelProgress', innerHTML: LoyaltyProgress }));
+export const PlayerPoints = ({ loyaltyPoints, spendablePoints, pointExpireString, language, }) => (h("div", { class: "PointsInfo" }, (loyaltyPoints && loyaltyPoints >= 0) &&
+    h("div", { class: 'Points' }, loyaltyPoints, " ", h("sub", { class: "XP" }, translate('xp', language))), spendablePoints &&
+    h("div", { class: 'Points' }, spendablePoints, " ", h("sub", { class: "XP" }, translate('sp', language))), pointExpireString && (h("div", { class: 'ExpirationPoints' }, pointExpireString, " "))));
+export const PlayerElevateCardRedeem = ({ language, onRedeemClick }) => (h("div", { class: "CardCell Redeem" }, h("div", { class: "RedeemButton", onClick: () => {
+        onRedeemClick();
+    } }, h("span", null, translate('redeem', language)))));
+export const PlayerNameDiv = (props) => (h("div", { class: 'CardCell PlayerName Txt' }, props.playerName));
+export const PlayerElevateLoyaltyLevel = (props) => (h("div", { class: 'CardCell ElevateLevel' }, h("span", { class: "LevelName", title: props.level }, props.level), props.expireTime && (h("div", { class: "CardCell ExpirationDate Txt" }, translate('expireOn', props.language), h("span", { class: "ExpireTime" }, dateFnsFormat(new Date(props.expireTime), props.dateFormat || 'yyyy-MM-dd')), !props.hideInfo && (h("span", { class: "fa Info", style: { 'background': `url(${getAssetPath('../static/info.svg')})` } }, h("span", { class: "InfoTips", innerHTML: TipsInfo })))))));
+export const LoyaltyLevelExpireDay = (props) => (h("div", { class: 'CardCell ElevateLevel Expire' }, h("div", { class: "CardCell ExpirationDate Txt" }, translate('expireOn', props.language), h("span", { class: "ExpireTime" }, dateFnsFormat(new Date(props.expireTime), props.dateFormat || 'yyyy-MM-dd')))));
+export const PlayerAvatar = (props) => {
+    const badge = props.loyaltyIconUrl
+        ? h("img", { class: "Badge", src: props.loyaltyIconUrl })
+        : props.hideIfNull ? '' : h("div", { class: "Badge" });
+    const avatarSrc = props.playerAvatarUrl || getAssetPath('../static/user.svg');
+    return h("div", { class: "PlayerAvatar", style: { 'position': `${props.onlyBadge ? '' : 'relative'}` } }, !props.onlyBadge && h("img", { class: "Avatar", src: avatarSrc }), badge);
+};
+export const TextSpan = (props) => (h("div", { class: `${props.classValues}` }, props.textToShow));

package/dist/collection/components/player-elevate-card-jojogroup/player-elevate-card-jojogroup.css

@@ -0,0 +1,64 @@
+@container (max-width: 270px) {
+  .Card .Inner {
+    flex-direction: column;
+  }
+  .Card .Inner .Content {
+    padding: 9px;
+  }
+  .Inner .Row .ExpirationPoints {
+    order: 1;
+  }
+}
+.Card .PlayerImg {
+  order: 0;
+}
+.Card .ExpirationPoints {
+  order: 3;
+}
+.Card .LevelInfo {
+  order: 2;
+}
+.Card .Inner .Row .PlayerImg {
+  flex-direction: column;
+}
+.Card .Inner .Row .PointsInfo {
+  width: 100%;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  max-height: 50%;
+}
+.Card .Inner .PlayerAvatar .Badge {
+  background-size: contain;
+  background-repeat: no-repeat;
+  position: absolute;
+  right: 5px;
+  bottom: -5px;
+  width: 40%;
+  height: 40%;
+  overflow: visible;
+}
+.Card .Inner .Row .ExpirationPoints {
+  text-align: left;
+  color: var(--emw--color-red, red);
+}
+.Card .Inner .Row .Points {
+  text-wrap: nowrap;
+}
+.Card .Inner .LevelInfo .ElevateLevel {
+  flex-direction: column;
+}
+.Card .Inner .LevelInfo .ElevateLevel .LevelName {
+  width: calc(100% - 20px);
+  text-align: left;
+  font-size: 13px;
+  padding-left: 20px;
+  margin: 10px 0;
+}
+.Card .Inner .LevelInfo .ElevateLevel .ExpirationDate {
+  text-align: center;
+  font-size: smaller;
+}
+.Card .Inner .LevelInfo .ElevateLevel .ExpireTime {
+  margin-left: 5px;
+}