@everymatrix/player-elevate-card 1.56.3 → 1.58.0

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

@@ -0,0 +1,58 @@
+import { html } from "lit";
+import "@everymatrix/player-elevate-card";
+const meta = {
+    title: 'Player/Components/player-elevate-card',
+    component: 'player-elevate-card',
+    args: {
+        endpoint: "",
+        theme: "Dark",
+        session: "",
+        playerAvatarUrl: "",
+        language: "en",
+        playerName: "",
+        dateFormat: "yyyy-MM-dd",
+        clientStyling: "",
+        clientStylingUrl: "",
+        translationUrl: "",
+    },
+    argTypes: {
+        endpoint: { control: 'text', description: '' },
+        theme: { control: 'text', description: '' },
+        session: { control: 'text', description: '' },
+        playerAvatarUrl: { control: 'text', description: '' },
+        language: { control: 'text', description: '' },
+        playerName: { control: 'text', description: '' },
+        dateFormat: { control: 'text', description: '' },
+        clientStyling: { control: 'text', description: '' },
+        clientStylingUrl: { control: 'text', description: '' },
+        translationUrl: { control: 'text', description: '' },
+    },
+};
+export default meta;
+const Template = (args) => {
+    return html `<player-elevate-card
+    endpoint="${args.endpoint}"
+    theme="${args.theme}"
+    session="${args.session}"
+    playerAvatarUrl="${args.playerAvatarUrl}"
+    language="${args.language}"
+    playerName="${args.playerName}"
+    dateFormat="${args.dateFormat}"
+    clientStyling="${args.clientStyling}"
+    clientStylingUrl="${args.clientStylingUrl}"
+    translationUrl="${args.translationUrl}"
+  ></player-elevate-card>`;
+};
+export const Default = Template.bind({});
+Default.args = {
+    endpoint: "",
+    theme: "Dark",
+    session: "",
+    playerAvatarUrl: "",
+    language: "en",
+    playerName: "",
+    dateFormat: "yyyy-MM-dd",
+    clientStyling: "",
+    clientStylingUrl: "",
+    translationUrl: "",
+};

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;
+}

package/dist/collection/components/player-rakeback-card/player-rakeback-card.js

@@ -0,0 +1,339 @@
+import { h } from "@stencil/core";
+import { TRANSLATIONS, translate, translateWithParams } from "../../utils/locale.utils";
+export class PlayerRakebackCard {
+    constructor() {
+        /**
+         * Truncate number to specified decimal places (without rounding)
+         * @param num Number to be processed
+         * @param digits Number of decimal places to keep
+         */
+        this.truncateNumber = (num, digits = 2) => {
+            const str = num.toString();
+            const [integer, decimal = ''] = str.split('.');
+            return digits > 0 ? `${integer}.${decimal ? decimal.slice(0, digits) : '00'}` : `${integer}`;
+        };
+        this.sendRakebackClaimedEvent = () => {
+            if (!this.endpoint || !this.session || !this.rakebackInfo.claimable || this.isLoading) {
+                return;
+            }
+            window.postMessage({ type: 'RakebackClaimTrigger', points: this.rakebackInfo.points }, window.location.href);
+        };
+        this.endpoint = undefined;
+        this.theme = 'Dark';
+        this.session = undefined;
+        this.language = 'en';
+        this.clientStyling = '';
+        this.clientStylingUrl = '';
+        this.translationUrl = '';
+        this.show = true;
+        this.rakebackInfo = {
+            hasRakebackWallet: false,
+            points: 0.0,
+            currency: 'TRY',
+            claimable: false,
+            minutesCanClaim: 0,
+            showCanClaim: false
+        };
+        this.isLoading = false;
+        this.coolingOffPeriod = false;
+        this.showTheWidget = false;
+    }
+    async onSessionOrEndpointChange() {
+        await this.loadRakebackInfo();
+    }
+    async onShowOrHasRakebackWalletChange() {
+        this.showTheWidget = this.show && this.rakebackInfo.hasRakebackWallet;
+    }
+    handleMessage(event) {
+        const { type } = event === null || event === void 0 ? void 0 : event.data;
+        if (type === 'RakebackClaimConfirmed') {
+            this.claimRakeback();
+        }
+    }
+    async loadRakebackInfo() {
+        if (!this.endpoint || !this.session) {
+            return;
+        }
+        this.isLoading = true;
+        try {
+            const url = new URL(`${this.endpoint}/v1/elevate/playerInfo?language=${this.language}`);
+            const response = await fetch(url.href, {
+                method: 'GET',
+                headers: {
+                    'X-Sessionid': this.session,
+                    'Content-Type': 'application/json'
+                }
+            });
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            const data = await response.json();
+            if (!data.success) {
+                throw new Error(data.errorMessage || 'Failed to load rakeback info');
+            }
+            const { rakebackWallet } = data === null || data === void 0 ? void 0 : data.data;
+            if (!rakebackWallet) {
+                window.postMessage({ type: 'RakebackWalletMissing' }, window.location.href);
+                return;
+            }
+            const { total, claimable, currency, minutesCanClaim } = rakebackWallet || {};
+            this.rakebackInfo = {
+                hasRakebackWallet: true,
+                points: (total === null || total === void 0 ? void 0 : total.points) ? this.truncateNumber(total.points, 2) : `0.00`,
+                currency: currency || '',
+                claimable: claimable || false,
+                showCanClaim: Boolean(minutesCanClaim && minutesCanClaim > 0),
+                minutesCanClaim: minutesCanClaim
+                    ? minutesCanClaim <= 1 && minutesCanClaim > 0
+                        ? 1
+                        : this.truncateNumber(minutesCanClaim, 0)
+                    : 0
+            };
+        }
+        catch (err) {
+            console.error('Error loading rakeback info:', err);
+            window.postMessage({ type: 'RakebackClaimError', message: err.message }, window.location.href);
+        }
+        finally {
+            this.isLoading = false;
+        }
+    }
+    async claimRakeback() {
+        this.isLoading = true;
+        try {
+            const url = new URL(`${this.endpoint}/v1/elevate/rakeback/claim`);
+            const response = await fetch(url.href, {
+                method: 'PUT',
+                headers: {
+                    'X-Sessionid': this.session,
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({})
+            });
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            const data = await response.json();
+            if (!data.success) {
+                throw new Error(data.errorMessage || 'Failed to claim rakeback');
+            }
+            // Refresh rakeback information
+            await this.loadRakebackInfo();
+            // Send event notification for successful redemption
+            window.postMessage({ type: 'RakebackClaimed', points: this.rakebackInfo.points }, window.location.href);
+        }
+        catch (err) {
+            console.error('Error claiming rakeback:', err);
+            window.postMessage({ type: 'RakebackClaimError', message: err.message }, window.location.href);
+        }
+        finally {
+            this.isLoading = false;
+        }
+    }
+    async componentWillLoad() {
+        await this.loadRakebackInfo();
+        await this.onShowOrHasRakebackWalletChange();
+    }
+    render() {
+        return this.showTheWidget ? (h("div", { class: "RakebackCard" }, h("general-styling-wrapper", { clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl, targetTranslations: TRANSLATIONS, translationUrl: this.translationUrl }), h("div", { class: "RakebackCardContent" }, h("div", { class: "RakebackTitle" }, translate('rakebackTitle', this.language)), h("div", { class: "RakebackDetails" }, h("div", { class: "RakebackInfo" }, h("div", { class: "RakebackNumContainer" }, h("span", { class: "RakebackNum" }, this.rakebackInfo.points), h("span", { class: "RakebackCurrency" }, this.rakebackInfo.currency))), h("div", { class: `RakebackButton ${this.isLoading || !this.rakebackInfo.claimable ? 'disabled' : ''}`, onClick: this.sendRakebackClaimedEvent }, translate('claim', this.language))), !this.rakebackInfo.claimable && this.rakebackInfo.showCanClaim && (h("div", { class: "RakebackCoolOff" }, translateWithParams('minutesCanClaim', {
+            lang: this.language,
+            minutes: this.rakebackInfo.minutesCanClaim
+        })))))) : null;
+    }
+    static get is() { return "player-rakeback-card"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["player-rakeback-card.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["player-rakeback-card.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
+            },
+            "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'"
+            },
+            "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": "''"
+            },
+            "show": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "true"
+                        }],
+                    "text": "Show the widget"
+                },
+                "attribute": "show",
+                "reflect": true,
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "rakebackInfo": {},
+            "isLoading": {},
+            "coolingOffPeriod": {},
+            "showTheWidget": {}
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "session",
+                "methodName": "onSessionOrEndpointChange"
+            }, {
+                "propName": "endpoint",
+                "methodName": "onSessionOrEndpointChange"
+            }, {
+                "propName": "language",
+                "methodName": "onSessionOrEndpointChange"
+            }, {
+                "propName": "show",
+                "methodName": "onShowOrHasRakebackWalletChange"
+            }, {
+                "propName": "rakebackInfo",
+                "methodName": "onShowOrHasRakebackWalletChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "message",
+                "method": "handleMessage",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/utils/locale.utils.js

@@ -3,6 +3,7 @@ const SUPPORTED_LANGUAGES = ['en', 'zh-hk', 'it', 'fr', 'tr', 'hr'];
 export const TRANSLATIONS = {
     en: {
         redeem: 'Redeem',
+        claim: 'Claim',
         expireOn: 'Expire on ',
         pointsToBeExpired: '${expirationPoints} points to expire in ${expireDay} days',
         pointsToBeExpiredDay: '${expirationPoints} points to expire in ${expireDay} day',
@@ -17,9 +18,13 @@ export const TRANSLATIONS = {
         xp: 'XP',
         sp: 'Coins',
         termAndConditions: 'Term & Conditions',
+        rakebackTitle: 'Available Rakeback',
+        loading: 'Loading',
+        minutesCanClaim: 'Next Claim is available in ${minutes} minutes'
     },
     'zh-hk': {
         redeem: '兑奖',
+        claim: '返佣',
         expireOn: 'Expire on ',
         pointsToBeExpired: '${expirationPoints} points to expire in ${expireDay} days',
         pointsToBeExpiredDay: '${expirationPoints} points to expire in ${expireDay} day',
@@ -34,9 +39,13 @@ export const TRANSLATIONS = {
         xp: 'XP',
         sp: 'Coins',
         termAndConditions: 'Term & Conditions',
+        rakebackTitle: '可用的返利',
+        loading: '加載中',
+        minutesCanClaim: '下次可領取時間為${minutes}分鐘後'
     },
     de: {
         redeem: 'Redeem',
+        claim: 'Anspruch',
         expireOn: 'Expire on ',
         pointsToBeExpired: '${expirationPoints} points to expire in ${expireDay} days',
         pointsToBeExpiredDay: '${expirationPoints} points to expire in ${expireDay} day',
@@ -51,9 +60,13 @@ export const TRANSLATIONS = {
         xp: 'XP',
         sp: 'Coins',
         termAndConditions: 'Term & Conditions',
+        rakebackTitle: 'Verfügbarer Rakeback',
+        loading: 'Laden',
+        minutesCanClaim: 'Nächster Anspruch ist in ${minutes} Minuten verfügbar'
     },
     it: {
         redeem: 'Redeem',
+        claim: 'Richiesta',
         expireOn: 'Expire on ',
         pointsToBeExpired: '${expirationPoints} points to expire in ${expireDay} days',
         pointsToBeExpiredDay: '${expirationPoints} points to expire in ${expireDay} day',
@@ -68,9 +81,13 @@ export const TRANSLATIONS = {
         xp: 'XP',
         sp: 'Coins',
         termAndConditions: 'Term & Conditions',
+        rakebackTitle: 'Rakeback Disponibile',
+        loading: 'Caricamento',
+        minutesCanClaim: 'La prossima richiesta sarà disponibile tra ${minutes} minuti'
     },
     fr: {
         redeem: 'Redeem',
+        claim: 'Réclamer',
         expireOn: 'Expire on ',
         pointsToBeExpired: '${expirationPoints} points to expire in ${expireDay} days',
         pointsToBeExpiredDay: '${expirationPoints} points to expire in ${expireDay} day',
@@ -85,12 +102,20 @@ export const TRANSLATIONS = {
         xp: 'XP',
         sp: 'Coins',
         termAndConditions: 'Term & Conditions',
+        rakebackTitle: 'Rakeback Disponible',
+        loading: 'Chargement',
+        minutesCanClaim: 'La prochaine réclamation sera disponible dans ${minutes} minutes'
     },
     es: {
-        redeem: 'Redeem'
+        redeem: 'Redeem',
+        claim: 'Reclamar',
+        rakebackTitle: 'Rakeback Disponible',
+        loading: 'Cargando',
+        minutesCanClaim: 'La próxima reclamación estará disponible en ${minutes} minutos'
     },
     tr: {
         redeem: 'Redeem',
+        claim: 'Talep',
         expireOn: 'Expire on ',
         pointsToBeExpired: '${expirationPoints} points to expire in ${expireDay} days',
         pointsToBeExpiredDay: '${expirationPoints} points to expire in ${expireDay} day',
@@ -105,15 +130,27 @@ export const TRANSLATIONS = {
         xp: 'XP',
         sp: 'Coins',
         termAndConditions: 'Term & Conditions',
+        rakebackTitle: 'Mevcut Rakeback',
+        loading: 'Yükleniyor',
+        minutesCanClaim: 'Sonraki talep ${minutes} dakika içinde kullanılabilir'
     },
     ru: {
-        redeem: 'Redeem'
+        redeem: 'Redeem',
+        claim: 'Требовать',
+        rakebackTitle: 'Доступный Рейкбек',
+        loading: 'Загрузка',
+        minutesCanClaim: 'Следующее требование будет доступно через ${minutes} минут'
     },
     ro: {
-        redeem: 'Redeem'
+        redeem: 'Redeem',
+        claim: 'Revendicare',
+        rakebackTitle: 'Rakeback Disponibil',
+        loading: 'Se încarcă',
+        minutesCanClaim: 'Următoarea revendicare va fi disponibilă în ${minutes} minute'
     },
     hr: {
         redeem: 'Otkupiti',
+        claim: 'Zahtjev',
         expireOn: 'Istječe',
         pointsToBeExpired: '${expirationPoints} bodova ističe za ${expireDay} dana',
         pointsToBeExpiredHours: '${expirationPoints} points to expire in ${expireDay} hours',
@@ -124,21 +161,44 @@ export const TRANSLATIONS = {
         spendablePoints: 'Bodovi za potrošit:',
         details: 'Detalji',
         xp: 'XP',
+        rakebackTitle: 'Dostupan Rakeback',
+        loading: 'Učitavanje',
+        minutesCanClaim: 'Sljedeći zahtjev bit će dostupan za ${minutes} minuta'
     },
     hu: {
-        redeem: 'Redeem'
+        redeem: 'Redeem',
+        claim: 'Igény',
+        rakebackTitle: 'Elérhető Rakeback',
+        loading: 'Betöltés',
+        minutesCanClaim: 'A következő igény ${minutes} perc múlva lesz elérhető'
     },
     pl: {
-        redeem: 'Redeem'
+        redeem: 'Redeem',
+        claim: 'Roszczenie',
+        rakebackTitle: 'Dostępny Rakeback',
+        loading: 'Ładowanie',
+        minutesCanClaim: 'Następne roszczenie będzie dostępne za ${minutes} minut'
     },
     pt: {
-        redeem: 'Redeem'
+        redeem: 'Redeem',
+        claim: 'Reivindicar',
+        rakebackTitle: 'Rakeback Disponível',
+        loading: 'Carregando',
+        minutesCanClaim: 'Próxima reivindicação disponível em ${minutes} minutos'
     },
     sl: {
-        redeem: 'Redeem'
+        redeem: 'Redeem',
+        claim: 'Zahtevek',
+        rakebackTitle: 'Razpoložljiv Rakeback',
+        loading: 'Nalaganje',
+        minutesCanClaim: 'Naslednji zahtevek bo na voljo čez ${minutes} minut'
     },
     sr: {
-        redeem: 'Redeem'
+        redeem: 'Redeem',
+        claim: 'Zahtev',
+        rakebackTitle: 'Dostupan Rakeback',
+        loading: 'Učitavanje',
+        minutesCanClaim: 'Sledeći zahtev biće dostupan za ${minutes} minuta'
     }
 };
 export const translate = (key, customLang) => {