@everymatrix/player-elevate-card 1.31.2

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

@@ -0,0 +1,323 @@
+import { Component, Fragment, getAssetPath, h, Listen, Prop, State } from '@stencil/core';
+import { translate, TRANSLATIONS } from '../../utils/locale.utils';
+import { PlayerAvatar, PlayerPoints, } from '../player-elevate-card/player-elevate-card-items';
+export class PlayerElevatePointcard {
+  constructor() {
+    /**
+     * The style that widget shows,available value: Dark, Light
+     * Default: Dark
+     */
+    this.theme = 'Dark';
+    /**
+     * Widget Language to show
+     */
+    this.language = 'en';
+    /**
+     * Check if the card used in points details widget, default: 'earningRule'
+     * value: 'details'/'earningRule'
+     * It effected the button in card
+     * 'earningRule':  button text, 'earning rules', post 'BEEPointRulesClicked' when clicked
+     * 'details': button text, 'details', post 'BEEDetailsClicked' when clicked
+     */
+    this.buttonType = 'earningRule';
+    /**
+     * 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.isPointDetailCard = this.buttonType === 'earningRule';
+  }
+  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", { class: `ElevateCardWrapper ${this.theme}` },
+      h("div", { class: "PointsCard Outer ", style: { 'backgroundImage': `url(${backgroundOuterImagePath}` } },
+        h("general-styling-wrapper", { clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl, targetTranslations: TRANSLATIONS, translationUrl: this.translationUrl }),
+        h("player-elevate-card-data", { params: this.paramProxy }),
+        h("div", { class: 'OuterCover Inner', style: { 'backgroundImage': `url(${backgroundInnerImagePath}` } },
+          h("div", { class: 'Content Row' }, this.playerElevateLevel && (h(Fragment, null,
+            h("div", { class: "PlayerImg" },
+              h(PlayerAvatar, { onlyBadge: true, loyaltyIconUrl: this.playerElevateLevel.presentation.asset })),
+            h("div", { class: `LevelInfo ${this.playerElevateLevel.name}` },
+              h("div", { class: "PointsTxt Label" }, this.cardTitle ? this.cardTitle : translate('spendablePoints')),
+              h("div", { class: 'PointsTxt SPPoints' },
+                h(PlayerPoints, { spendablePoints: this.playerElevateLevel.spendablePoints, language: this.language }),
+                h("a", { class: "TC", onClick: () => {
+                    this.onDetailsClick();
+                  } }, translate('termAndConditions', this.language))),
+              this.pointExpireString && (h("div", { 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'"
+    },
+    "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 listeners() { return [{
+      "name": "playerElevateLeveLoaded",
+      "method": "playerElevateLeveLoadedHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}

package/dist/collection/components/static/button-default.svg

@@ -0,0 +1,42 @@
+<svg width="95" height="51" viewBox="0 0 95 51" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g filter="url(#filter0_bd_169_22604)">
+        <rect x="4" width="87" height="43" rx="14" fill="#26CC37" shape-rendering="crispEdges"/>
+        <rect x="5" y="1" width="85" height="41" rx="13" stroke="url(#paint0_linear_169_22604)" stroke-opacity="0.6"
+              stroke-width="2" shape-rendering="crispEdges"/>
+        <rect x="5" y="1" width="85" height="41" rx="13" stroke="url(#paint1_linear_169_22604)" stroke-width="2"
+              shape-rendering="crispEdges"/>
+        <rect x="5" y="1" width="85" height="41" rx="13" stroke="url(#paint2_linear_169_22604)" stroke-width="2"
+              shape-rendering="crispEdges"/>
+    </g>
+    <defs>
+        <filter id="filter0_bd_169_22604" x="-36" y="-40" width="167" height="123" filterUnits="userSpaceOnUse"
+                color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+            <feGaussianBlur in="BackgroundImageFix" stdDeviation="20"/>
+            <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_169_22604"/>
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+                           result="hardAlpha"/>
+            <feOffset dy="4"/>
+            <feGaussianBlur stdDeviation="2"/>
+            <feComposite in2="hardAlpha" operator="out"/>
+            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+            <feBlend mode="normal" in2="effect1_backgroundBlur_169_22604" result="effect2_dropShadow_169_22604"/>
+            <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_169_22604" result="shape"/>
+        </filter>
+        <linearGradient id="paint0_linear_169_22604" x1="107.683" y1="17.19" x2="78.0658" y2="19.0918"
+                        gradientUnits="userSpaceOnUse">
+            <stop stop-color="white"/>
+            <stop offset="1" stop-color="#EFEFEF" stop-opacity="0"/>
+        </linearGradient>
+        <linearGradient id="paint1_linear_169_22604" x1="4" y1="0" x2="24.9374" y2="22.5174"
+                        gradientUnits="userSpaceOnUse">
+            <stop stop-color="white" stop-opacity="0.5"/>
+            <stop offset="1" stop-color="white" stop-opacity="0"/>
+        </linearGradient>
+        <linearGradient id="paint2_linear_169_22604" x1="91" y1="43" x2="61.9374" y2="28.5031"
+                        gradientUnits="userSpaceOnUse">
+            <stop stop-color="white" stop-opacity="0.5"/>
+            <stop offset="1" stop-color="white" stop-opacity="0"/>
+        </linearGradient>
+    </defs>
+</svg>

package/dist/collection/components/static/button-disabled.svg

@@ -0,0 +1,4 @@
+<svg width="87" height="43" viewBox="0 0 87 43" fill="none"
+     xmlns="http://www.w3.org/2000/svg">
+<rect width="87" height="43" rx="14" fill="#474A52"/>
+</svg>

package/dist/collection/components/static/button-hover.svg

@@ -0,0 +1,4 @@
+<svg width="87" height="43" viewBox="0 0 87 43" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="1" width="85" height="41" rx="13" fill="#26CC37"/>
+<rect x="1" y="1" width="85" height="41" rx="13" stroke="white" stroke-width="2"/>
+</svg>

package/dist/collection/components/static/button-level.svg

@@ -0,0 +1,27 @@
+<svg width="190" height="75" viewBox="0 0 190 75" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_dd_179_4415)">
+<path d="M16 20C16 15.5817 19.5817 12 24 12H151C155.418 12 159 15.5817 159 20V32C159 36.4183 155.418 40 151 40H24C19.5817 40 16 36.4183 16 32V20Z" fill="url(#paint0_linear_179_4415)" shape-rendering="crispEdges"/>
+</g>
+<defs>
+<filter id="filter0_dd_179_4415" x="0.842043" y="0.631533" width="188.474" height="73.4739" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="7.57898" dy="11.3685"/>
+<feGaussianBlur stdDeviation="11.3685"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.0862745 0 0 0 0 0.0980392 0 0 0 0 0.141176 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_179_4415"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-2" dy="-2"/>
+<feGaussianBlur stdDeviation="3.5"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.74902 0 0 0 0 0.470588 0 0 0 0 0.0235294 0 0 0 0.75 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_179_4415" result="effect2_dropShadow_179_4415"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_179_4415" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_179_4415" x1="87.5" y1="12" x2="87.5" y2="40" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FCC410"/>
+<stop offset="1" stop-color="#FFBD2B" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>

package/dist/collection/components/static/button-pressed.svg

@@ -0,0 +1,18 @@
+<svg width="95" height="51" viewBox="0 0 95 51" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_169_22603)">
+  <rect x="4" width="87" height="43" rx="14" fill="#008B0E" shape-rendering="crispEdges"/>
+  <rect x="5" y="1" width="85" height="41" rx="13" stroke="#71FF7F" stroke-width="2" shape-rendering="crispEdges"/>
+</g>
+<defs>
+<filter id="filter0_d_169_22603" x="0" y="0" width="95" height="51" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_169_22603"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_169_22603" result="shape"/>
+</filter>
+</defs>
+</svg>

package/dist/collection/components/static/button-redeem.svg

@@ -0,0 +1,36 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="106" height="51" viewBox="0 0 106 51" fill="none">
+    <g filter="url(#filter0_bd_169_22606)">
+        <rect x="4" width="98" height="43" rx="14" fill="#26CC37" shape-rendering="crispEdges"/>
+
+
+        <rect x="5" y="1" width="96" height="41" rx="13" stroke="url(#paint0_linear_169_22606)" stroke-opacity="0.6" stroke-width="2" shape-rendering="crispEdges"/>
+        <rect x="5" y="1" width="96" height="41" rx="13" stroke="url(#paint1_linear_169_22606)" stroke-width="2" shape-rendering="crispEdges"/>
+        <rect x="5" y="1" width="96" height="41" rx="13" stroke="url(#paint2_linear_169_22606)" stroke-width="2" shape-rendering="crispEdges"/>
+    </g>
+    <defs>
+        <filter id="filter0_bd_169_22606" x="-36" y="-40" width="178" height="123" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+            <feGaussianBlur in="BackgroundImageFix" stdDeviation="20"/>
+            <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_169_22606"/>
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+            <feOffset dy="4"/>
+            <feGaussianBlur stdDeviation="2"/>
+            <feComposite in2="hardAlpha" operator="out"/>
+            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+            <feBlend mode="normal" in2="effect1_backgroundBlur_169_22606" result="effect2_dropShadow_169_22606"/>
+            <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_169_22606" result="shape"/>
+        </filter>
+        <linearGradient id="paint0_linear_169_22606" x1="120.793" y1="17.19" x2="87.4673" y2="19.6005" gradientUnits="userSpaceOnUse">
+            <stop stop-color="white"/>
+            <stop offset="1" stop-color="#EFEFEF" stop-opacity="0"/>
+        </linearGradient>
+        <linearGradient id="paint1_linear_169_22606" x1="4" y1="0" x2="24.6125" y2="24.9708" gradientUnits="userSpaceOnUse">
+            <stop stop-color="white" stop-opacity="0.5"/>
+            <stop offset="1" stop-color="white" stop-opacity="0"/>
+        </linearGradient>
+        <linearGradient id="paint2_linear_169_22606" x1="102" y1="43" x2="70.9273" y2="25.5407" gradientUnits="userSpaceOnUse">
+            <stop stop-color="white" stop-opacity="0.5"/>
+            <stop offset="1" stop-color="white" stop-opacity="0"/>
+        </linearGradient>
+    </defs>
+</svg>