@everymatrix/player-elevate-card-jojogroup 1.80.4

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

@@ -0,0 +1,334 @@
+import { Fragment, getAssetPath, h } from "@stencil/core";
+import { translate, TRANSLATIONS } from "../../utils/locale.utils";
+import { PlayerAvatar, PlayerPoints, } from "../player-elevate-card-jojogroup/player-elevate-card-jojogroup-items";
+export class PlayerElevatePointcard {
+    constructor() {
+        this.isPointDetailCard = this.buttonType === 'earningRule';
+        this.endpoint = undefined;
+        this.theme = 'Dark';
+        this.session = undefined;
+        this.playerAvatarUrl = undefined;
+        this.language = 'en';
+        this.mbSource = undefined;
+        this.playerName = undefined;
+        this.cardTitle = undefined;
+        this.buttonType = 'earningRule';
+        this.dateFormat = 'yyyy-MM-dd';
+        this.clientStyling = '';
+        this.clientStylingUrl = '';
+        this.translationUrl = '';
+        this.pointExpireString = undefined;
+        this.playerElevateLevel = undefined;
+        this.elevateWalletTotal = undefined;
+        this.elevateSPTotal = 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'];
+            this.elevateSPTotal = event.detail['loyaltyWalletTotal'];
+        }
+        if (event.detail['elevateLevel']) {
+            this.playerElevateLevel = event.detail['elevateLevel'];
+        }
+        if (event.detail['pointExpireString']) {
+            this.pointExpireString = event.detail.pointExpireString;
+        }
+    }
+    onDetailsClick() {
+        window.postMessage({ type: this.isPointDetailCard ? 'BEEPointRulesClicked' : 'BEEDetailsClicked',
+            path: this.isPointDetailCard ? 'player-elevate-level' : 'player-elevate-point-details' }, window.location.href);
+    }
+    componentWillLoad() {
+        this.paramProxy = {
+            endpoint: this.endpoint,
+            session: this.session,
+            language: this.language,
+        };
+    }
+    render() {
+        const backgroundOuterImagePath = getAssetPath('../static/card-ground.svg');
+        const backgroundInnerImagePath = getAssetPath('../static/card-ground-over.svg');
+        return (h("div", { key: 'a1ed46e501d24f84ea23958d2108a9ad36df3083', class: `ElevateCardWrapper ${this.theme}` }, h("div", { key: 'e671bf40a9fa75dbf89e37ca9ca7668ddf1416cf', class: "PointsCard Outer ", style: { 'backgroundImage': `url(${backgroundOuterImagePath}` } }, h("general-styling-wrapper", { key: '95d373644d93160714c04abe5056122491e846a4', clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl, targetTranslations: TRANSLATIONS, translationUrl: this.translationUrl, mbSource: this.mbSource }), h("player-elevate-card-data", { key: '653c503f9689f3d4a99ad59f4c534785210ecd3c', params: this.paramProxy }), h("div", { key: '025c5a40e8e75450ac9463182bc3600002a29943', class: 'OuterCover Inner', style: { 'backgroundImage': `url(${backgroundInnerImagePath}` } }, h("div", { key: '93c05e87b54c7d05ad0fd4b4878e8e8e2aa25abc', class: 'Content Row' }, this.playerElevateLevel && (h(Fragment, { key: '3fbc0bb622e07f29f94ffe33c747047c1f709cff' }, h("div", { key: '7ab9253f7445bc7f4f2bb26bb52563a23d3ab73e', class: "PlayerImg" }, h(PlayerAvatar, { key: '5098ab36b2a33f35e10b3b9e1f2eabfe60e3002d', onlyBadge: true, loyaltyIconUrl: this.playerElevateLevel.presentation.asset })), h("div", { key: '2f8e012352460a67a28cdb997a7dc68dbbdaea0b', class: `LevelInfo ${this.playerElevateLevel.name}` }, h("div", { key: '679d8edbe69f1cff3f18fe1f6742a13942417876', class: "PointsTxt Label" }, this.cardTitle ? this.cardTitle : translate('spendablePoints', this.language)), h("div", { key: 'ca49127c96c3d048015f1687102d8e4da46a76b5', class: 'PointsTxt SPPoints' }, h(PlayerPoints, { key: '3a7b03cada8b9629924504972d32ce8c4d573a06', spendablePoints: this.playerElevateLevel.spendablePoints, language: this.language }), h("a", { key: 'cb3bf9415204ef1ee7fe9653deb332d13d235e9b', class: "TC", onClick: () => {
+                this.onDetailsClick();
+            } }, translate('termAndConditions', this.language))), this.pointExpireString && (h("div", { key: '3fde19f5524ff6c5db9b23edfb1df6be112313e9', class: 'ExpirationPoints' }, this.pointExpireString, " "))))))))));
+    }
+    static get is() { return "player-elevate-pointcard"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["player-elevate-pointcard.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["player-elevate-pointcard.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'"
+            },
+            "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": true
+            },
+            "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
+            },
+            "cardTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The title displayed in card, default: translation of 'spendablePoints'"
+                },
+                "attribute": "card-title",
+                "reflect": true
+            },
+            "buttonType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Check if the card used in points details widget, default: 'earningRule'\nvalue: 'details'/'earningRule'\nIt effected the button in card\n'earningRule':  button text, 'earning rules', post 'BEEPointRulesClicked' when clicked\n'details': button text, 'details', post 'BEEDetailsClicked' when clicked"
+                },
+                "attribute": "button-type",
+                "reflect": true,
+                "defaultValue": "'earningRule'"
+            },
+            "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": {},
+            "elevateSPTotal": {}
+        };
+    }
+    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-rakeback-card/player-rakeback-card.css

@@ -0,0 +1,87 @@
+:host {
+  display: block;
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(360deg);
+  }
+  to {
+    transform: rotate(0deg);
+  }
+}
+.RakebackCard {
+  border: 2px solid var(--em-color-border-primary, #003E5C);
+  padding: 32px;
+  border-radius: var(--emw--border-radius-medium, 12px);
+  overflow: hidden;
+  font-family: inherit;
+}
+.RakebackCard .RakebackCardContent .RakebackTitle {
+  font-size: var(--emw--font-size-small, 14px);
+  font-weight: var(--emw--font-weight-semibold, 500);
+  color: var(--em-color-text-secondary, #727672);
+}
+.RakebackCard .RakebackCardContent .RakebackDetails {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 17px;
+}
+.RakebackCard .RakebackCardContent .RakebackDetails .RakebackInfo {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0 17px;
+}
+.RakebackCard .RakebackCardContent .RakebackDetails .RakebackInfo .RakebackRefresh {
+  width: 52px;
+  height: 52px;
+  cursor: pointer;
+}
+.RakebackCard .RakebackCardContent .RakebackDetails .RakebackInfo .RakebackRefresh.RakebackLoading {
+  animation: rotate 0.5s linear infinite;
+}
+.RakebackCard .RakebackCardContent .RakebackDetails .RakebackInfo .RakebackNumContainer {
+  color: var(--em-color-text-primary, #fff);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.RakebackCard .RakebackCardContent .RakebackDetails .RakebackInfo .RakebackNumContainer .RakebackNum {
+  display: inline-block;
+  font-weight: var(--emw--font-weight-bold, 700);
+  font-size: var(--emw--font-size-2x-large, 36px);
+}
+.RakebackCard .RakebackCardContent .RakebackDetails .RakebackInfo .RakebackNumContainer .RakebackCurrency {
+  display: inline-block;
+  font-weight: var(--emw--font-weight-semibold, 500);
+  font-size: var(--emw--font-size-small, 14px);
+  margin-top: 14px;
+}
+.RakebackCard .RakebackCardContent .RakebackDetails .RakebackButton {
+  font-family: inherit;
+  cursor: pointer;
+  width: 90px;
+  height: 34px;
+  border-radius: var(--emw--border-radius-large, 99px);
+  border: 2px solid var(--em-color-border-success, #083B17);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--em-color-text-primary, #fff);
+  background: linear-gradient(180deg, var(--em-color-gradient-1, #24B24E) 0%, var(--em-color-gradient-1, #24B24E) 100%);
+}
+.RakebackCard .RakebackCardContent .RakebackDetails .RakebackButton.disabled {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+.RakebackCard .RakebackCardContent .RakebackCoolOff,
+.RakebackCard .RakebackCardContent .RakebackError {
+  margin-top: 8px;
+  font-weight: var(--emw--font-weight-semibold, 500);
+  font-size: var(--emw--font-size-x-small, 12px);
+  color: var(--em-color-text-error, #FF7A73);
+  text-align: center;
+}