@everymatrix/player-elevate-card-jojogroup 1.80.4

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

@@ -0,0 +1,310 @@
+import { Fragment, getAssetPath, h } from "@stencil/core";
+import { LoyaltyLevelExpireDay, PlayerAvatar, PlayerLoyaltyProcess, PlayerPoints } from "../player-elevate-card-jojogroup/player-elevate-card-jojogroup-items";
+import { translateWithParams, TRANSLATIONS } from "../../utils/locale.utils";
+export class PlayerElevateLoyaltycardJojogroup {
+    constructor() {
+        this.endpoint = undefined;
+        this.theme = 'Dark';
+        this.session = undefined;
+        this.playerAvatarUrl = undefined;
+        this.language = 'en';
+        this.playerName = undefined;
+        this.dateFormat = 'yyyy-MM-dd';
+        this.mbSource = undefined;
+        this.clientStyling = '';
+        this.clientStylingUrl = '';
+        this.translationUrl = '';
+        this.pointExpireString = undefined;
+        this.playerElevateLevel = undefined;
+        this.elevateWalletTotal = undefined;
+    }
+    onSessionOrEndpointChange() {
+        this.paramProxy = Object.assign(Object.assign({}, this.paramProxy), { session: this.session, endpoint: this.endpoint, language: this.language });
+    }
+    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.paramProxy = {
+            endpoint: this.endpoint,
+            session: this.session,
+            language: this.language,
+        };
+    }
+    getNextLevelPoints() {
+        var _a, _b;
+        return ((_a = this.playerElevateLevel) === null || _a === void 0 ? void 0 : _a.nextLevel) ? (_b = this.playerElevateLevel) === null || _b === void 0 ? void 0 : _b.nextLevel.entryPoints : -1;
+    }
+    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,
+                lang: this.language
+            });
+        }
+        return '';
+    }
+    render() {
+        var _a, _b, _c;
+        const backgroundOuterImagePath = getAssetPath('../static/card-ground.svg');
+        const backgroundInnerImagePath = getAssetPath('../static/card-ground-over.svg');
+        return (h("div", { key: 'ef2c203816bdbd8146ac0e02435bdf4ffcc75bec', class: `ElevateCardWrapper ${this.theme}` }, h("div", { key: '7078fdc223dc7ffaac850243f6a04e3d7c63d22d', class: "LoyaltyCard Outer", style: { 'backgroundImage': `url(${backgroundOuterImagePath}` } }, h("general-styling-wrapper", { key: '04480062cf7da6b511a43205d7bfb6398404bd6a', clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl, targetTranslations: TRANSLATIONS, translationUrl: this.translationUrl, mbSource: this.mbSource }), h("player-elevate-card-data", { key: 'aa0c7abb7916865b404da21aa87ce6a7ba2f39d4', params: this.paramProxy }), h("div", { key: '900c8fba904daa860a456b38b4905ca8c5c30fa5', class: 'OuterCover Inner', style: { 'backgroundImage': `url(${backgroundInnerImagePath}` } }, h("div", { key: '1f1a6d6423f07eaba470fd2c95c8249213c346d2', class: 'Content' }, this.playerElevateLevel && (h(Fragment, { key: '2eada6942e44a5d14e5295b88a0d82f9f5372c57' }, h("div", { key: '49a29540d068555fb3fe23859e2f4d1f4f7f488a', class: "PlayerImg Row" }, h("div", { key: '68b195d5e4bf205922998d5479cdb6c14e6abfac', class: "PlayerContainer" }, h(PlayerAvatar, { key: '86123e3ded6ec5bcd62c5b339809f50b075ba4ab', onlyBadge: true, loyaltyIconUrl: this.playerElevateLevel.presentation.asset }), h("div", { key: '8e8b8ea0961c5596c3aff7d689431dc39faedd14', class: "PlayerInfo" }, h("div", { key: '92d8b6abceea88af846203f2aca7b95e3582e2ab', class: 'CardCell ElevateLevel' }, h("span", { key: 'ba74043443ed78fc8e3f34689b7410783e6137c8', class: "PlayerName", title: this.playerElevateLevel.name }, this.playerName || this.playerElevateLevel.name)), h("div", { key: '9e84f0ce13a02152e8a347b947ac35623625be9d' }, (((_a = this.playerElevateLevel) === null || _a === void 0 ? void 0 : _a.loyaltyPoints) / ((_c = (_b = this.playerElevateLevel) === null || _b === void 0 ? void 0 : _b.nextLevel) === null || _c === void 0 ? void 0 : _c.entryPoints)) * 100, "%"))), h("div", { key: '1cd88a2cfefbb2326ac13fdadcf448bac075c316', class: 'PointsRange' }, h(PlayerPoints, { key: '21e27273e2e43b672b55fa13997e7db109be8070', loyaltyPoints: this.playerElevateLevel.loyaltyPoints, language: this.language }), h("span", { key: '329844014f55bbd8bf35bff81626da66c0c9b91a' }, "/"), h(PlayerPoints, { key: 'e8cac4c5e5d6bd8f0da9d6c0de84dce36110a747', loyaltyPoints: this.getNextLevelPoints(), language: this.language }))), h("div", { key: '1051f633025bc516201dc1861b8404d5c9f6713b', class: `LevelInfo ${this.playerElevateLevel.name}` }, h(PlayerLoyaltyProcess, { key: 'b5cb209cfca2166b7848b3196067d9c39259f1ae' }), h("div", { key: 'd9820322d3087e8eebfc238f1668f4c11fdaef57', class: "Row LevelRange" }, h("div", { key: '36b14cfcf0a7d428da82557c4f96a3db45a6d454' }, this.playerElevateLevel.name), h("div", { key: '61c6d3ba379d5ec1184f46d5e6d782d3a196fcf2' }, this.playerElevateLevel.nextLevel.name)), h("div", { key: '5bb2a4994885b38df7882cdf7c5a738e14bccef0', class: "NextLevelTip" }, this.getNextLevelTips()), this.pointExpireString && (h("div", { key: 'f2ac7fc7a633d312e6aa355e8faaabadf43e6984', class: 'PointsInfo ExpirationPoints' }, this.pointExpireString, " ")), this.playerElevateLevel.expireTime &&
+            h(LoyaltyLevelExpireDay, { key: 'a75969ed01f62def9c66a4c9b42c8e884b3f819b', expireTime: this.playerElevateLevel.expireTime, dateFormat: this.dateFormat, language: this.language })))))))));
+    }
+    static get is() { return "player-elevate-loyaltycard-jojogroup"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["player-elevate-loyaltycard-jojogroup.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["player-elevate-loyaltycard-jojogroup.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'"
+            },
+            "mbSource": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom styling via streamStyling"
+                },
+                "attribute": "mb-source",
+                "reflect": false
+            },
+            "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 watchers() {
+        return [{
+                "propName": "session",
+                "methodName": "onSessionOrEndpointChange"
+            }, {
+                "propName": "endpoint",
+                "methodName": "onSessionOrEndpointChange"
+            }, {
+                "propName": "language",
+                "methodName": "onSessionOrEndpointChange"
+            }];
+    }
+    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(--emw--color-gray-150, #6D6D6D);
+}
+.PointsCard .Inner .DetailButton span {
+  display: inline-block;
+  vertical-align: middle;
+}
+.PointsCard .Inner .DetailButton:hover span {
+  color: var(--emw--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;
+}