@everymatrix/casino-challenges-container 0.0.15 → 0.0.17

package/dist/cjs/{casino-challenge-card_5.cjs.entry.js → casino-challenge-card_6.cjs.entry.js}

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d5f8d1ee.js');
-const casinoChallengesContainer = require('./casino-challenges-container-50aca824.js');
+const casinoChallengesContainer = require('./casino-challenges-container-da454267.js');
 
-const DEFAULT_LANGUAGE$1 = 'en';
+const DEFAULT_LANGUAGE$2 = 'en';
 const SUPPORTED_LANGUAGES = ['ro', 'en', 'fr', 'ar', 'hr'];
-const TRANSLATIONS$1 = {
+const TRANSLATIONS$2 = {
     en: {
         totalLevels: 'Total levels:',
         level1: 'Level 1:',
@@ -104,18 +104,18 @@ const TRANSLATIONS$1 = {
         pause: 'Pauza'
     }
 };
-const translate$1 = (key, customLang) => {
+const translate$2 = (key, customLang) => {
     const lang = customLang;
-    return TRANSLATIONS$1[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE$1][key];
+    return TRANSLATIONS$2[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE$2][key];
 };
-const getTranslations$1 = (data) => {
+const getTranslations$2 = (data) => {
     Object.keys(data).forEach((item) => {
         for (let key in data[item]) {
-            TRANSLATIONS$1[item][key] = data[item][key];
+            TRANSLATIONS$2[item][key] = data[item][key];
         }
     });
 };
-const resolveTranslationUrl$1 = async (translationUrl) => {
+const resolveTranslationUrl$2 = async (translationUrl) => {
     if (translationUrl) {
         try {
             const response = await fetch(translationUrl);
@@ -123,7 +123,7 @@ const resolveTranslationUrl$1 = async (translationUrl) => {
                 throw new Error(`HTTP error! status: ${response.status}`);
             }
             const translations = await response.json();
-            getTranslations$1(translations);
+            getTranslations$2(translations);
         }
         catch (error) {
             console.error('Failed to fetch or parse translations from URL:', error);
@@ -226,15 +226,15 @@ const CasinoChallengeCard = class {
             if (!level)
                 return '';
             const minbet = ((_a = level.BetRange) === null || _a === void 0 ? void 0 : _a.MinBet)
-                ? `, ${translate$1('minBet', this.language)} ${currencySymbol + level.BetRange.MinBet}`
+                ? `, ${translate$2('minBet', this.language)} ${currencySymbol + level.BetRange.MinBet}`
                 : '';
             switch (level.LevelTargetType) {
                 case EChallengeLevelTargetType.Accumulative:
-                    return `${translate$1('placeBetsOf', this.language)} ${currencySymbol + level.DisplayCurrencyTargetTurnover + minbet}`;
+                    return `${translate$2('placeBetsOf', this.language)} ${currencySymbol + level.DisplayCurrencyTargetTurnover + minbet}`;
                 case EChallengeLevelTargetType.SingleBet:
-                    return `${translate$1('place', this.language)} ${currencySymbol + level.TargetTurnover} ${translate$1('bet', this.language)}`;
+                    return `${translate$2('place', this.language)} ${currencySymbol + level.TargetTurnover} ${translate$2('bet', this.language)}`;
                 case EChallengeLevelTargetType.MultipleOneBetSize:
-                    return `${translate$1('place', this.language)} ${level.TargetBetCount} ${translate$1('bets', this.language) + minbet}`;
+                    return `${translate$2('place', this.language)} ${level.TargetBetCount} ${translate$2('bets', this.language) + minbet}`;
             }
         };
         this.onMouseEnterHandler = (index, el) => {
@@ -248,17 +248,17 @@ const CasinoChallengeCard = class {
         this.getBadgeContent = () => {
             switch (this.challenge.Status) {
                 case EChallengeStatus.Expired:
-                    return translate$1('expired', this.language);
+                    return translate$2('expired', this.language);
                 case EChallengeStatus.Forfeited:
-                    return translate$1('forfeited', this.language);
+                    return translate$2('forfeited', this.language);
                 case EChallengeStatus.Completed:
-                    return translate$1('finished', this.language);
+                    return translate$2('finished', this.language);
                 case EChallengeStatus.Paused:
-                    return translate$1('suspended', this.language);
+                    return translate$2('suspended', this.language);
                 default:
                     return this.timeLeft
-                        ? [translate$1('endsIn', this.language), ' - ', index.h("span", null, this.timeLeft)]
-                        : translate$1('expired', this.language);
+                        ? [translate$2('endsIn', this.language), ' - ', index.h("span", null, this.timeLeft)]
+                        : translate$2('expired', this.language);
             }
         };
         this.goToDetailsPage = (challengeId) => () => {
@@ -298,15 +298,15 @@ const CasinoChallengeCard = class {
             const rewardValue = (_c = level.Rewards) === null || _c === void 0 ? void 0 : _c.slice(0, 2).map((r) => r.RewardDescription).join(' + ');
             return [
                 {
-                    lable: translate$1('totalLevels', this.language),
+                    lable: translate$2('totalLevels', this.language),
                     value: (_d = this.challenge.LevelProgresses) === null || _d === void 0 ? void 0 : _d.length
                 },
                 {
-                    lable: translate$1('level1', this.language),
+                    lable: translate$2('level1', this.language),
                     value: this.calculateTargetValue(level, (_e = this.challenge) === null || _e === void 0 ? void 0 : _e.CurrencySymbol)
                 },
                 {
-                    lable: translate$1('get', this.language),
+                    lable: translate$2('get', this.language),
                     value: rewardValue
                 }
             ];
@@ -335,7 +335,7 @@ const CasinoChallengeCard = class {
     }
     componentWillLoad() {
         if (this.translationUrl) {
-            resolveTranslationUrl$1(this.translationUrl);
+            resolveTranslationUrl$2(this.translationUrl);
         }
         this.updateTime();
     }
@@ -384,9 +384,9 @@ const CasinoChallengeCard = class {
             return index.h("div", { class: "progress__placeholder" });
         }
         const barValue = Status === EChallengeStatus.Paused
-            ? translate$1('suspended', this.language)
+            ? translate$2('suspended', this.language)
             : Status === EChallengeStatus.Completed
-                ? translate$1('finished', this.language)
+                ? translate$2('finished', this.language)
                 : `${currLevel.ProgressPercentage}%`;
         const isLastLevel = !LevelProgresses.some((x) => x.OrderNumber > currLevel.OrderNumber);
         const secondImgSrc = Status === EChallengeStatus.Completed ? trophySvg : isLastLevel ? finishSvg : '';
@@ -410,17 +410,17 @@ const CasinoChallengeCard = class {
     get getCardButton() {
         if (this.isUserAuthorized) {
             if (this.challenge.Status === EChallengeStatus.Started) {
-                return (index.h("button", { class: "card__button filled", disabled: this.actionLoading, onClick: () => this.joinUnjoinProgress(true) }, translate$1('start', this.language)));
+                return (index.h("button", { class: "card__button filled", disabled: this.actionLoading, onClick: () => this.joinUnjoinProgress(true) }, translate$2('start', this.language)));
             }
             if (this.challenge.Status === EChallengeStatus.Paused) {
-                return (index.h("button", { class: "card__button grayed", disabled: this.actionLoading, onClick: () => this.joinUnjoinProgress(true) }, translate$1('resume', this.language)));
+                return (index.h("button", { class: "card__button grayed", disabled: this.actionLoading, onClick: () => this.joinUnjoinProgress(true) }, translate$2('resume', this.language)));
             }
             if (this.challenge.Status === EChallengeStatus.InProgress ||
                 this.challenge.Status === EChallengeStatus.PendingLevelReward) {
-                return (index.h("button", { class: "card__button grayed", disabled: this.actionLoading, onClick: () => this.joinUnjoinProgress(false) }, translate$1('pause', this.language)));
+                return (index.h("button", { class: "card__button grayed", disabled: this.actionLoading, onClick: () => this.joinUnjoinProgress(false) }, translate$2('pause', this.language)));
             }
         }
-        return (index.h("button", { class: "card__button", onClick: this.goToDetailsPage(this.challenge.ChallengeId) }, translate$1('viewDetails', this.language)));
+        return (index.h("button", { class: "card__button", onClick: this.goToDetailsPage(this.challenge.ChallengeId) }, translate$2('viewDetails', this.language)));
     }
     async joinUnjoinProgress(join) {
         var _a;
@@ -452,6 +452,158 @@ const CasinoChallengeCard = class {
 };
 CasinoChallengeCard.style = CasinoChallengeCardStyle0;
 
+const DEFAULT_LANGUAGE$1 = 'en';
+const TRANSLATIONS$1 = {
+    en: {
+        title: 'Enter the secret code to unlock hidden quests and rewards.',
+        btnText: 'Apply code',
+        successMessage: 'The code was successfully applied.',
+        inputLabel: '3–30 characters, no spaces',
+        lengthMinError: 'Code must be at least 3 characters',
+        lengthMaxError: 'Too long — max 30 characters',
+        formatError: 'Invalid code format. Please use only Latin letters (case-sensitive), numbers, and special characters.',
+        genericError: 'Something went wrong, please retry'
+    },
+    ro: {},
+    fr: {},
+    ar: {},
+    hr: {}
+};
+const translate$1 = (key, customLang) => {
+    const lang = customLang;
+    return TRANSLATIONS$1[lang !== undefined && lang in TRANSLATIONS$1 ? lang : DEFAULT_LANGUAGE$1][key];
+};
+const getTranslations$1 = (data) => {
+    Object.keys(data).forEach((item) => {
+        for (let key in data[item]) {
+            TRANSLATIONS$1[item][key] = data[item][key];
+        }
+    });
+};
+const resolveTranslationUrl$1 = async (translationUrl) => {
+    if (translationUrl) {
+        try {
+            const response = await fetch(translationUrl);
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            const translations = await response.json();
+            getTranslations$1(translations);
+        }
+        catch (error) {
+            console.error('Failed to fetch or parse translations from URL:', error);
+        }
+    }
+};
+
+const casinoChallengesClaimCodeCss = ".container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 80px 0;\n  text-align: center;\n}\n.container__title {\n  font-size: var(--emw--font-size-medium-plus, 18px);\n  font-weight: var(--emw--font-weight-medium, 500);\n  line-height: 22px;\n  color: var(--emw--color-white, white);\n  margin: 0 0 32px;\n}\n.container__button {\n  margin-top: 45px;\n  padding: 14px 20px;\n  background: transparent;\n  text-transform: uppercase;\n  border-radius: var(--emw--button-border-radius, 99px);\n  border: 2px solid var(--emw--button-border-color, #083B17);\n  font-size: var(--emw--font-size-x-small, 12px);\n  font-weight: var(--emw--font-weight-bold, 700);\n  color: var(--emw--color-white, #FFFFFF);\n  background-color: var(--emw--button-background-color, #18CE51);\n  cursor: pointer;\n}\n.container__button:hover {\n  color: var(--emw--color-gray-300, #083B17);\n  border-color: transparent;\n  box-shadow: 0 0 4px 0 rgba(188, 252, 177, 0.2), 0 0 20px 0 rgba(0, 183, 79, 0.5);\n}\n.container__button:disabled, .container__button:disabled:hover {\n  color: var(--emw--color-gray-50, #E2E2E2);\n  border: 2px solid var(--emw--button-border-color, #083B17);\n  opacity: 0.7;\n  cursor: not-allowed;\n}\n@container challenges-container (max-width: 576px) {\n  .container__button {\n    width: calc(100% - 32px);\n    position: absolute;\n    bottom: 50px;\n  }\n}\n\n.code-input {\n  border: 1px solid var(--emw--button-border-color, #083B17);\n  background: var(--emw--color-background-secondary, rgba(221, 255, 207, 0.1019607843));\n  border-radius: 6px;\n  padding: 12px 0;\n  line-height: 24px;\n  color: var(--emw--color-white, #FFFFFF);\n  text-align: center;\n  font-size: var(--emw--font-size-medium, 16px);\n  min-width: 340px;\n}\n.code-input:focus {\n  outline: 1px solid var(--emw--border-success-color, #00B74F);\n}\n.code-input:focus.errored {\n  outline-color: var(--emw--color-error, #D6421E);\n}\n.code-input.errored {\n  border-color: var(--emw--color-error, #D6421E);\n}\n.code-input__text {\n  margin: 8px 0 0;\n  line-height: 22px;\n  font-size: var(--emw--font-size-x-small, 12px);\n  font-weight: var(--emw--font-weight-medium, 500);\n  color: var(--emw--color-gray-150, #C8D6CE);\n}\n.code-input__text.errored {\n  color: var(--emw--color-error, #D6421E);\n}\n@container challenges-container (max-width: 576px) {\n  .code-input {\n    min-width: 100%;\n  }\n}";
+const CasinoChallengesClaimCodeStyle0 = casinoChallengesClaimCodeCss;
+
+const CasinoChallengesClaimCode = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.openNotification = index.createEvent(this, "openNotification", 7);
+        this.asciiPrintableRegex = /^[\x21-\x7E]+$/;
+        this.handleSubmit = async () => {
+            if (this.endpoint && this.session && this.domain) {
+                const response = await this.applyCode();
+                if (response.Success) {
+                    this.openNotification.emit({ message: translate$1('successMessage', this.language) });
+                }
+                else {
+                    this.hasError = true;
+                    const showTabLink = response.ErrorCode === 3002 || response.ErrorCode === 3023 || response.ErrorCode === 3003;
+                    this.openNotification.emit({ message: response.ErrorMessage, errored: true, showTabLink });
+                }
+            }
+        };
+        this.applyCode = async () => {
+            this.loading = true;
+            const url = `${this.endpoint}/challenge/GrantChallengeByCode`;
+            const body = {
+                DomainId: this.domain,
+                PlayerSessionId: this.session,
+                ActivationCode: this.code
+            };
+            return fetch(url, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(body)
+            })
+                .then((res) => res.json())
+                .finally(() => (this.loading = false));
+        };
+        this.handleInput = (event) => {
+            this.code = event.target.value;
+            if (this.debounceTime) {
+                clearTimeout(this.debounceTime);
+            }
+            this.debounceTime = setTimeout(() => {
+                this.hasError = !this.validate(this.code);
+            }, 200);
+        };
+        this.mbSource = undefined;
+        this.clientStyling = undefined;
+        this.clientStylingUrl = undefined;
+        this.translationUrl = '';
+        this.language = 'en';
+        this.endpoint = '';
+        this.domain = '';
+        this.session = '';
+        this.loading = false;
+        this.hasError = false;
+        this.code = '';
+        this.notificationMessage = '';
+    }
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            casinoChallengesContainer.setClientStyling(this.stylingContainer, this.clientStyling);
+        }
+    }
+    handleClientStylingUrlChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            casinoChallengesContainer.setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    handleMbSourceChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            casinoChallengesContainer.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+        }
+    }
+    componentWillLoad() {
+        if (this.translationUrl) {
+            resolveTranslationUrl$1(this.translationUrl);
+        }
+    }
+    componentDidLoad() {
+        if (this.stylingContainer) {
+            if (this.mbSource)
+                casinoChallengesContainer.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+            if (this.clientStyling)
+                casinoChallengesContainer.setClientStyling(this.stylingContainer, this.clientStyling);
+            if (this.clientStylingUrl)
+                casinoChallengesContainer.setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    disconnectedCallback() {
+        this.stylingSubscription && this.stylingSubscription.unsubscribe();
+    }
+    validate(val) {
+        return val.length >= 3 && val.length <= 30 && this.asciiPrintableRegex.test(val);
+    }
+    render() {
+        return (index.h("div", { key: '241aeeb9f0f0984bbf0367a7c925e0b84ef15fa0', ref: (el) => (this.stylingContainer = el) }, index.h("div", { key: 'f20ec43253905cb0e9a356f65d1e51e695f784cf', class: "container" }, index.h("p", { key: 'a4c3b0ca894db101c192f7c62ff141ec51eaede1', class: "container__title" }, translate$1('title', this.language)), index.h("input", { key: 'c99bdd43659c9d2fc06702fe041eab8458bb0ee5', class: `code-input ${this.hasError ? 'errored' : ''}`, type: "text", placeholder: "e.g. SPRING24", onInput: this.handleInput }), index.h("p", { key: 'c2aacc2d4a23c7d222f895dce3a3a47b8f03f587', class: "code-input__text" }, translate$1('inputLabel', this.language)), index.h("button", { key: '51e79d07278368567026d31b0c70e8c9f0eb4840', class: "container__button", onClick: this.handleSubmit, disabled: this.loading || !this.code || this.hasError }, translate$1('btnText', this.language)))));
+    }
+    static get watchers() { return {
+        "clientStyling": ["handleClientStylingChange"],
+        "clientStylingUrl": ["handleClientStylingUrlChange"],
+        "mbSource": ["handleMbSourceChange"]
+    }; }
+};
+CasinoChallengesClaimCode.style = CasinoChallengesClaimCodeStyle0;
+
 const casinoChallengesListCss = ".challenges-list {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 30px;\n  width: 100%;\n}\n\n.loader {\n  width: 308px;\n  border-radius: 16px;\n  border: 2px solid var(--emw--button-border-color, rgba(221, 255, 207, 0.1019607843));\n  background-color: var(--emw--color-background, #141515);\n  box-sizing: border-box;\n  position: relative;\n}\n@container challenge-list (max-width: 576px) {\n  .loader {\n    width: 100%;\n  }\n}\n.loader:hover {\n  background: linear-gradient(90deg, rgb(0, 62, 92) 0%, rgb(17, 59, 33) 100%);\n  cursor: pointer;\n}\n.loader .SkeletonRows .SkeletonContainer {\n  padding: 0 20px 0 20px;\n}\n.loader .SkeletonButton .Skeleton.Text {\n  margin: 0;\n  height: 28px;\n  margin: 0 20px 20px 20px;\n  border-radius: var(--emw--button-border-radius, 99px);\n  width: auto;\n}\n.loader .Skeleton.Image {\n  border-radius: 16px 16px 0 0;\n}\n.loader .Skeleton.Text {\n  margin: 20px 0;\n}";
 const CasinoChallengesListStyle0 = casinoChallengesListCss;
 
@@ -3103,6 +3255,7 @@ UiSkeleton.style = UiSkeletonStyle0;
 
 exports.casino_challenges_container = casinoChallengesContainer.CasinoChallengesContainer;
 exports.casino_challenge_card = CasinoChallengeCard;
+exports.casino_challenges_claim_code = CasinoChallengesClaimCode;
 exports.casino_challenges_list = CasinoChallengeList;
 exports.casino_challenges_player_history = CasinoChallengesPlayerHistory;
 exports.ui_skeleton = UiSkeleton;

package/dist/cjs/{casino-challenges-container-50aca824.js → casino-challenges-container-da454267.js}

@@ -63,7 +63,8 @@ const DEFAULT_LANGUAGE = 'en';
 const TRANSLATIONS = {
     en: {
         title: 'Challenges',
-        empty: 'No Challenges'
+        empty: 'No Challenges',
+        activeTab: 'Active tab'
     },
     ro: {
         title: 'Provocări',
@@ -113,7 +114,11 @@ const titleIconSvg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53
 
 const notificationSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNCAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzgzOF8zMTApIj4KPHBhdGggZD0iTTcuNTAwNDYgMTIuOTk5OUM4LjQwNTk1IDEyLjk5OTkgOS4xNjM0MSAxMi4zNTQ0IDkuMzM3MzUgMTEuNUg1LjY2MzU3QzUuODM3NiAxMi4zNTQ0IDYuNTk1MDYgMTIuOTk5OSA3LjUwMDQ2IDEyLjk5OTlaIiBmaWxsPSJ1cmwoI3BhaW50MF9saW5lYXJfODM4XzMxMCkiLz4KPHBhdGggZD0iTTExLjAwNTggNi45OTkxN0MxMS4wMDM3IDYuOTk5MTcgMTEuMDAxNyA2Ljk5OTYzIDEwLjk5OTcgNi45OTk2M0M5LjA3MDM2IDYuOTk5NjMgNy40OTk5NyA1LjQyOTcgNy40OTk5NyAzLjQ5OTlDNy40OTk5NyAyLjk2OTM5IDcuNjIyIDIuNDY3ODkgNy44MzQ0OCAyLjAxNjk0QzcuNzI0NDQgMi4wMDY1IDcuNjEyOTMgMiA3LjQ5OTk3IDJDNS41NjcxMyAyIDQuMDAwMjIgMy41NjY4MiA0LjAwMDIyIDUuNDk5NzNWNi44OTM2MkM0LjAwMDIyIDcuODgzMDUgMy41NjY3NCA4LjgxNzAxIDIuODA2MjYgOS40NTk5NEMyLjU1Mjc3IDkuNjc2NDUgMi40NDAyNiAxMC4wMjE0IDIuNTMxMjUgMTAuMzU3OUMyLjYzNzI3IDEwLjc0OTQgMy4wMjQyMyAxMC45OTk0IDMuNDMwMjUgMTAuOTk5NEgxMS41NjcyQzExLjk5MzIgMTAuOTk5NCAxMi4zOTQ3IDEwLjcyMzQgMTIuNDgxMSAxMC4zMDU5QzEyLjU0ODEgOS45ODI5NCAxMi40MzMyIDkuNjYwNDMgMTIuMTgyNyA5LjQ0OTk2QzExLjQ1NTcgOC44NDA1NCAxMS4wMzUyIDcuOTQ1MDMgMTEuMDA1OCA2Ljk5OTE3WiIgZmlsbD0idXJsKCNwYWludDFfbGluZWFyXzgzOF8zMTApIi8+CjxwYXRoIGQ9Ik0xMy41MDA2IDMuNDk5ODZDMTMuNTAwNiA0Ljg4MDQ3IDEyLjM4MTUgNS45OTk2MyAxMS4wMDA4IDUuOTk5NjNDOS42MjAxNCA1Ljk5OTYzIDguNTAwOTggNC44ODA0NyA4LjUwMDk4IDMuNDk5ODZDOC41MDA5OCAyLjExOTI1IDkuNjIwMTQgMSAxMS4wMDA4IDFDMTIuMzgxNSAxIDEzLjUwMDYgMi4xMTkyNSAxMy41MDA2IDMuNDk5ODZaIiBmaWxsPSIjRDY0MjFFIi8+CjwvZz4KPGRlZnM+CjxsaW5lYXJHcmFkaWVudCBpZD0icGFpbnQwX2xpbmVhcl84MzhfMzEwIiB4MT0iNy41MDA0NiIgeTE9IjExLjUiIHgyPSI3LjUwMDQ2IiB5Mj0iMTIuOTk5OSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgo8c3RvcCBzdG9wLWNvbG9yPSIjRUE5MDE4Ii8+CjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI0UwQTg0RSIvPgo8L2xpbmVhckdyYWRpZW50Pgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MV9saW5lYXJfODM4XzMxMCIgeDE9IjcuNDk5OTciIHkxPSIyIiB4Mj0iNy40OTk5NyIgeTI9IjEwLjk5OTQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KPHN0b3Agc3RvcC1jb2xvcj0iI0VBOTAxOCIvPgo8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNFMEE4NEUiLz4KPC9saW5lYXJHcmFkaWVudD4KPGNsaXBQYXRoIGlkPSJjbGlwMF84MzhfMzEwIj4KPHJlY3Qgd2lkdGg9IjEzIiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC41KSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=';
 
-const casinoChallengesContainerCss = ".challenges {\n  container-type: inline-size;\n  container-name: challenges-container;\n  background-color: var(--emw--color-background, #000);\n  padding: 16px 12px;\n}\n.challenges__header {\n  margin: 0 0 32px;\n  display: flex;\n  justify-content: space-between;\n}\n.challenges__title {\n  margin: 0;\n  display: flex;\n  gap: 10px;\n  align-items: center;\n  font-size: var(--emw--font-size-x-large, 24px);\n  font-weight: var(--emw--font-weight-bold, 700);\n  color: var(--emw--color-white, #ffffff);\n}\n.challenges__tabs {\n  display: flex;\n  gap: 12px;\n  border-radius: 48px;\n  padding: 6px;\n  color: var(--emw--color-gray-150, #c8d6ce);\n  background-color: var(--emw--color-background-secondary, #272727);\n}\n.challenges__tab {\n  padding: 10px 16px;\n  border-radius: 40px;\n  font-size: var(--emw--font-size-small, 14px);\n  font-weight: var(--emw--font-weight-bold, 700);\n  cursor: pointer;\n  text-align: center;\n  width: 95px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 4px;\n}\n.challenges__tab.active {\n  color: var(--emw--color-white, #ffffff);\n  background: linear-gradient(90deg, rgb(0, 62, 92) 0%, rgb(17, 59, 33) 100%);\n}\n.challenges__tab:last-child {\n  width: inherit;\n  padding: 10px 16px;\n}\n.challenges__content {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 300px;\n  overflow-y: auto;\n}\n.challenges__empty {\n  color: var(--emw--color-white, #ffffff);\n}\n@container challenges-container (max-width: 800px) {\n  .challenges__header {\n    margin: 0 0 16px;\n    flex-wrap: wrap;\n    row-gap: 12px;\n  }\n  .challenges__title {\n    width: 100%;\n    font-size: var(--emw--font-size-large, 20px);\n  }\n  .challenges__title img {\n    height: 32px;\n  }\n  .challenges__tabs {\n    width: 100%;\n    gap: 8px;\n  }\n  .challenges__tab {\n    flex: 1;\n    padding: 5px 0;\n    font-size: var(--emw--font-size-x-small, 12px);\n  }\n  .challenges__tab:last-child {\n    width: inherit;\n    padding: 5px 0;\n  }\n}";
+const errorCircleSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzgiIGhlaWdodD0iMzkiIHZpZXdCb3g9IjAgMCAzOCAzOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIzLjc0OTMgMTQuNzQ5OEwxNC4yNDkzIDI0LjI0OThNMTQuMjQ5MyAxNC43NDk4TDIzLjc0OTMgMjQuMjQ5OE0zNC44MzI3IDE5LjQ5OThDMzQuODMyNyAyOC4yNDQzIDI3Ljc0MzggMzUuMzMzMiAxOC45OTkzIDM1LjMzMzJDMTAuMjU0OCAzNS4zMzMyIDMuMTY2MDIgMjguMjQ0MyAzLjE2NjAyIDE5LjQ5OThDMy4xNjYwMiAxMC43NTUzIDEwLjI1NDggMy42NjY1IDE4Ljk5OTMgMy42NjY1QzI3Ljc0MzggMy42NjY1IDM0LjgzMjcgMTAuNzU1MyAzNC44MzI3IDE5LjQ5OThaIiBzdHJva2U9IiNENjQyMUUiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=';
+
+const checkCircleSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzgiIGhlaWdodD0iMzgiIHZpZXdCb3g9IjAgMCAzOCAzOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xOS4wMDA3IDQuNzQ5OTJDMTEuMTMwNiA0Ljc0OTkyIDQuNzUwNjUgMTEuMTI5OSA0Ljc1MDY1IDE4Ljk5OTlDNC43NTA2NSAyNi44NyAxMS4xMzA2IDMzLjI0OTkgMTkuMDAwNyAzMy4yNDk5QzI2Ljg3MDcgMzMuMjQ5OSAzMy4yNTA3IDI2Ljg3IDMzLjI1MDcgMTguOTk5OUMzMy4yNTA3IDExLjEyOTkgMjYuODcwNyA0Ljc0OTkyIDE5LjAwMDcgNC43NDk5MlpNMS41ODM5OCAxOC45OTk5QzEuNTgzOTggOS4zODA5NiA5LjM4MTY5IDEuNTgzMjUgMTkuMDAwNyAxLjU4MzI1QzI4LjYxOTYgMS41ODMyNSAzNi40MTczIDkuMzgwOTYgMzYuNDE3MyAxOC45OTk5QzM2LjQxNzMgMjguNjE4OSAyOC42MTk2IDM2LjQxNjYgMTkuMDAwNyAzNi40MTY2QzkuMzgxNjkgMzYuNDE2NiAxLjU4Mzk4IDI4LjYxODkgMS41ODM5OCAxOC45OTk5Wk0yNy4yNDUyIDEzLjEzMDNDMjcuODYzNiAxMy43NDg3IDI3Ljg2MzYgMTQuNzUxMiAyNy4yNDUyIDE1LjM2OTVMMTcuNzQ1MiAyNC44Njk1QzE3LjEyNjkgMjUuNDg3OCAxNi4xMjQ0IDI1LjQ4NzggMTUuNTA2MSAyNC44Njk1TDEwLjc1NjEgMjAuMTE5NUMxMC4xMzc3IDE5LjUwMTIgMTAuMTM3NyAxOC40OTg3IDEwLjc1NjEgMTcuODgwM0MxMS4zNzQ0IDE3LjI2MiAxMi4zNzY5IDE3LjI2MiAxMi45OTUyIDE3Ljg4MDNMMTYuNjI1NyAyMS41MTA3TDI1LjAwNjEgMTMuMTMwM0MyNS42MjQ0IDEyLjUxMiAyNi42MjY5IDEyLjUxMiAyNy4yNDUyIDEzLjEzMDNaIiBmaWxsPSIjMDBCNzRGIi8+Cjwvc3ZnPgo=';
+
+const casinoChallengesContainerCss = ".challenges {\n  container-type: inline-size;\n  container-name: challenges-container;\n  background-color: var(--emw--color-background, #000);\n  padding: 16px 12px;\n}\n.challenges__header {\n  margin: 0 0 32px;\n  display: flex;\n  justify-content: space-between;\n}\n.challenges__title {\n  margin: 0;\n  display: flex;\n  gap: 10px;\n  align-items: center;\n  font-size: var(--emw--font-size-x-large, 24px);\n  font-weight: var(--emw--font-weight-bold, 700);\n  color: var(--emw--color-white, #ffffff);\n}\n.challenges__tabs {\n  display: flex;\n  gap: 12px;\n  border-radius: 48px;\n  padding: 6px;\n  color: var(--emw--color-gray-150, #c8d6ce);\n  background-color: var(--emw--color-background-secondary, #272727);\n}\n.challenges__tab {\n  padding: 10px 16px;\n  border-radius: 40px;\n  font-size: var(--emw--font-size-small, 14px);\n  font-weight: var(--emw--font-weight-bold, 700);\n  cursor: pointer;\n  text-align: center;\n  width: 95px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 4px;\n}\n.challenges__tab.active {\n  color: var(--emw--color-white, #ffffff);\n  background: linear-gradient(90deg, rgb(0, 62, 92) 0%, rgb(17, 59, 33) 100%);\n}\n.challenges__tab:last-child {\n  width: inherit;\n  padding: 10px 16px;\n}\n.challenges__content {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 300px;\n  overflow-y: auto;\n}\n.challenges__empty {\n  color: var(--emw--color-white, #ffffff);\n}\n@container challenges-container (max-width: 800px) {\n  .challenges__header {\n    margin: 0 0 16px;\n    flex-wrap: wrap;\n    row-gap: 12px;\n  }\n  .challenges__title {\n    width: 100%;\n    font-size: var(--emw--font-size-large, 20px);\n  }\n  .challenges__title img {\n    height: 32px;\n  }\n  .challenges__tabs {\n    width: 100%;\n    gap: 8px;\n  }\n  .challenges__tab {\n    flex: 1;\n    padding: 5px 0;\n    font-size: var(--emw--font-size-x-small, 12px);\n  }\n  .challenges__tab:last-child {\n    width: inherit;\n    padding: 5px 0;\n  }\n}\n\n.notification {\n  display: flex;\n  position: absolute;\n  align-items: center;\n  bottom: 90px;\n  box-shadow: 0 0 20px 0 rgba(136, 143, 170, 0.15);\n  border-radius: 8px;\n  padding: 20px 16px;\n  gap: 16px;\n  right: 40px;\n  max-width: 445px;\n  box-sizing: border-box;\n  background-color: var(--emw--background-success-color, #C9F0D7);\n  border: 2px solid var(--emw--border-success-color, #00B74F);\n}\n.notification.errored {\n  background: var(--emw--background-errored-color, #FFE1DF);\n  border-color: var(--emw--color-error, #D6421E);\n}\n.notification__icon {\n  width: 32px;\n  height: 32px;\n}\n.notification__message {\n  margin: 0;\n  font-size: var(--emw--font-size-medium, 16px);\n  font-weight: var(--emw--font-weight-bold, 700);\n}\n.notification__message .active-tab {\n  color: var(--emw--border-success-color, #00B74F);\n  text-decoration-line: underline;\n  cursor: pointer;\n}\n@container challenges-container (max-width: 576px) {\n  .notification {\n    bottom: 60px;\n    right: 12px;\n    max-width: 290px;\n  }\n}";
 const CasinoChallengesContainerStyle0 = casinoChallengesContainerCss;
 
 const CasinoChallengesContainer = class {
@@ -121,6 +126,10 @@ const CasinoChallengesContainer = class {
         index.registerInstance(this, hostRef);
         this.tabs = ['Active', 'Pending', 'Finished', 'Code'];
         this.showNotification = 1;
+        this.onOpenNotification = (event) => {
+            this.notification = event.detail;
+            setTimeout(() => (this.notification = null), 10000);
+        };
         this.checkAttrs = () => {
             if (!this.endpoint) {
                 this.error = 'Endpoint is missing! Please provide a valid endpointURL.';
@@ -142,12 +151,16 @@ const CasinoChallengesContainer = class {
             });
         };
         this.handleTabClick = (index) => () => {
+            this.notification = null;
             this.activeTabIndex = index;
             this.challenges = [];
             this.pageNumber = 0;
             this.total = 0;
             this.loadData();
         };
+        this.renderNotification = () => {
+            return (index.h("div", { class: `notification ${this.notification.errored ? 'errored' : ''}` }, index.h("img", { src: this.notification.errored ? errorCircleSvg : checkCircleSvg, class: "notification__icon" }), index.h("p", { class: "notification__message" }, this.notification.message + ' ', this.notification.showTabLink && (index.h("span", { class: "active-tab", onClick: this.handleTabClick(0) }, translate('activeTab', this.language))))));
+        };
         this.mbSource = undefined;
         this.clientStyling = undefined;
         this.clientStylingUrl = undefined;
@@ -166,6 +179,7 @@ const CasinoChallengesContainer = class {
         this.pageNumber = 0;
         this.total = 0;
         this.pageSize = 20;
+        this.notification = null;
     }
     handleClientStylingChange(newValue, oldValue) {
         if (newValue != oldValue) {
@@ -239,7 +253,7 @@ const CasinoChallengesContainer = class {
     }
     render() {
         var _a, _b;
-        return (index.h("div", { key: '4e2191039d59af380aab5d65f865727e04565ad9', ref: (el) => (this.stylingContainer = el) }, index.h("div", { key: '5731ae9a18c13c0ff728512442a24e824fcab485', class: "challenges" }, index.h("div", { key: '391210a6442f95d421a223854b55da4f953a1ec3', class: "challenges__header" }, index.h("h1", { key: '90d93318a2082f4b19e9c2cc3fa341afcb223eb8', class: "challenges__title" }, index.h("img", { key: '167c1ee8869310677e864d0f7107bfb7f9e938cd', src: titleIconSvg, alt: "icon" }), translate('title', this.language)), this.session && (index.h("div", { key: '1479821da7d79a1d2d53de22b67a0d2d17c43a68', class: "challenges__tabs" }, this.tabs.map((label, index$1) => (index.h("div", { class: `challenges__tab ${index$1 === this.activeTabIndex ? 'active' : ''}`, onClick: this.handleTabClick(index$1) }, label, this.showNotification === index$1 && index.h("img", { src: notificationSvg }))))))), this.activeTabIndex < 2 && (index.h("div", { key: 'a0f87282b31054fb2b5c18c6d521530c92540db6', class: "challenges__content" }, this.challenges.length === 0 && !this.loading && (index.h("div", { key: '313b9431d71fe5d93d41c00d64b718159b86bfd3', class: "empty" }, translate('empty', this.language))), index.h("casino-challenges-list", { key: '4756590a375cdd1cd70f538084d0194523fa8c41', challenges: this.challenges, onLoadMore: this.onLoadMore, onTimerExpired: this.onTimerExpired, loading: this.loading, hasMore: ((_a = this.challenges) === null || _a === void 0 ? void 0 : _a.length) < this.total, language: this.language, activeTabIndex: this.activeTabIndex }))), this.activeTabIndex === 2 && (index.h("casino-challenges-player-history", { key: 'd1f077837fafb45d5c257541e3a3db5f149b210e', translationUrl: this.translationUrl, language: this.language, loading: this.loading, playerHistory: this.playerHistory, onLoadMore: this.onLoadMore, hasMore: ((_b = this.playerHistory) === null || _b === void 0 ? void 0 : _b.length) < this.total })))));
+        return (index.h("div", { key: '18dbc05aa857b65262bfce730e1e410e478bd657', ref: (el) => (this.stylingContainer = el) }, index.h("div", { key: '592c62d6d5334874112f9fcb88547b22f73e75ad', class: "challenges" }, index.h("div", { key: '4e96b468e8be71f2f2a785954dc3a473cc2e6cda', class: "challenges__header" }, index.h("h1", { key: '292d55fd2dcd2f23f02b3648657c696dbf2104e0', class: "challenges__title" }, index.h("img", { key: '6eb390eebfdffd29c6cc42cb6c8585617419561b', src: titleIconSvg, alt: "icon" }), translate('title', this.language)), this.session && (index.h("div", { key: '605ba6644169130cef63e675388a801124a8cbbd', class: "challenges__tabs" }, this.tabs.map((label, index$1) => (index.h("div", { class: `challenges__tab ${index$1 === this.activeTabIndex ? 'active' : ''}`, onClick: this.handleTabClick(index$1) }, label, this.showNotification === index$1 && index.h("img", { src: notificationSvg }))))))), this.activeTabIndex < 2 && (index.h("div", { key: '2951e0f23a3de8fae3e1bbfd6eb1d607d2dc2275', class: "challenges__content" }, this.challenges.length === 0 && !this.loading && (index.h("div", { key: 'dc42b66dfb6f4fa42753123bdc07e00bfb716c3d', class: "empty" }, translate('empty', this.language))), index.h("casino-challenges-list", { key: '53eb947a6637400095e9c7b77c58b47b70b45afb', challenges: this.challenges, onLoadMore: this.onLoadMore, onTimerExpired: this.onTimerExpired, loading: this.loading, hasMore: ((_a = this.challenges) === null || _a === void 0 ? void 0 : _a.length) < this.total, language: this.language, activeTabIndex: this.activeTabIndex }))), this.activeTabIndex === 2 && (index.h("casino-challenges-player-history", { key: '467ce910010a03e26c1ecfac3c14f35acbc307c9', translationUrl: this.translationUrl, language: this.language, loading: this.loading, playerHistory: this.playerHistory, onLoadMore: this.onLoadMore, hasMore: ((_b = this.playerHistory) === null || _b === void 0 ? void 0 : _b.length) < this.total })), this.activeTabIndex === 3 && (index.h("casino-challenges-claim-code", { key: '62a08e91c1d991cd53e4f7ed47fcd2da9b323dc7', endpoint: this.endpoint, session: this.session, domain: this.domain, onOpenNotification: this.onOpenNotification })), this.notification && this.renderNotification())));
     }
     static get watchers() { return {
         "clientStyling": ["handleClientStylingChange"],

package/dist/cjs/casino-challenges-container.cjs.js

@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["casino-challenge-card_5.cjs",[[1,"casino-challenges-container",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"language":[513],"endpoint":[513],"domain":[513],"session":[513],"userId":[513,"user-id"],"activeTabIndex":[32],"error":[32],"hasError":[32],"challenges":[32],"playerHistory":[32],"loading":[32],"pageNumber":[32],"total":[32],"pageSize":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}],[1,"casino-challenges-list",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"language":[513],"translationUrl":[513,"translation-url"],"challenges":[16],"loading":[516],"hasMore":[516,"has-more"],"activeTabIndex":[514,"active-tab-index"]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}],[1,"casino-challenges-player-history",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"language":[513],"playerHistory":[16],"loading":[516],"hasMore":[516,"has-more"],"openItems":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"],"playerHistory":["handlePlayerHistoryChange"]}],[1,"casino-challenge-card",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"language":[513],"endpoint":[513],"domain":[513],"session":[513],"challenge":[16],"isUserAuthorized":[516,"is-user-authorized"],"activeTabIndex":[514,"active-tab-index"],"tooltipIndex":[32],"timeLeft":[32],"error":[32],"hasError":[32],"actionLoading":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}],[0,"ui-skeleton",{"structure":[1],"width":[1],"height":[1],"borderRadius":[8,"border-radius"],"marginBottom":[8,"margin-bottom"],"marginTop":[8,"margin-top"],"marginLeft":[8,"margin-left"],"marginRight":[8,"margin-right"],"animation":[4],"rows":[2],"size":[1]},null,{"structure":["handleStructureChange"]}]]]], options);
+  return index.bootstrapLazy([["casino-challenge-card_6.cjs",[[1,"casino-challenges-container",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"language":[513],"endpoint":[513],"domain":[513],"session":[513],"userId":[513,"user-id"],"activeTabIndex":[32],"error":[32],"hasError":[32],"challenges":[32],"playerHistory":[32],"loading":[32],"pageNumber":[32],"total":[32],"pageSize":[32],"notification":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}],[1,"casino-challenges-list",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"language":[513],"translationUrl":[513,"translation-url"],"challenges":[16],"loading":[516],"hasMore":[516,"has-more"],"activeTabIndex":[514,"active-tab-index"]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}],[1,"casino-challenges-player-history",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"language":[513],"playerHistory":[16],"loading":[516],"hasMore":[516,"has-more"],"openItems":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"],"playerHistory":["handlePlayerHistoryChange"]}],[1,"casino-challenges-claim-code",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"language":[513],"endpoint":[513],"domain":[513],"session":[513],"loading":[32],"hasError":[32],"code":[32],"notificationMessage":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}],[1,"casino-challenge-card",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"language":[513],"endpoint":[513],"domain":[513],"session":[513],"challenge":[16],"isUserAuthorized":[516,"is-user-authorized"],"activeTabIndex":[514,"active-tab-index"],"tooltipIndex":[32],"timeLeft":[32],"error":[32],"hasError":[32],"actionLoading":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}],[0,"ui-skeleton",{"structure":[1],"width":[1],"height":[1],"borderRadius":[8,"border-radius"],"marginBottom":[8,"margin-bottom"],"marginTop":[8,"margin-top"],"marginLeft":[8,"margin-left"],"marginRight":[8,"margin-right"],"animation":[4],"rows":[2],"size":[1]},null,{"structure":["handleStructureChange"]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/cjs/index-d5f8d1ee.js

@@ -71,10 +71,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           }
           switch(bundleId) {
               
-                case 'casino-challenge-card_5.cjs':
+                case 'casino-challenge-card_6.cjs':
                     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
                         /* webpackMode: "lazy" */
-                        './casino-challenge-card_5.cjs.entry.js')); }).then(processMod, consoleError);
+                        './casino-challenge-card_6.cjs.entry.js')); }).then(processMod, consoleError);
           }
       }
   return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(

package/dist/cjs/index.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const casinoChallengesContainer = require('./casino-challenges-container-50aca824.js');
+const casinoChallengesContainer = require('./casino-challenges-container-da454267.js');
 require('./index-d5f8d1ee.js');
 
 

package/dist/cjs/loader.cjs.js

@@ -8,7 +8,7 @@ const appGlobals = require('./app-globals-3a1e7e63.js');
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["casino-challenge-card_5.cjs",[[1,"casino-challenges-container",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"language":[513],"endpoint":[513],"domain":[513],"session":[513],"userId":[513,"user-id"],"activeTabIndex":[32],"error":[32],"hasError":[32],"challenges":[32],"playerHistory":[32],"loading":[32],"pageNumber":[32],"total":[32],"pageSize":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}],[1,"casino-challenges-list",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"language":[513],"translationUrl":[513,"translation-url"],"challenges":[16],"loading":[516],"hasMore":[516,"has-more"],"activeTabIndex":[514,"active-tab-index"]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}],[1,"casino-challenges-player-history",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"language":[513],"playerHistory":[16],"loading":[516],"hasMore":[516,"has-more"],"openItems":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"],"playerHistory":["handlePlayerHistoryChange"]}],[1,"casino-challenge-card",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"language":[513],"endpoint":[513],"domain":[513],"session":[513],"challenge":[16],"isUserAuthorized":[516,"is-user-authorized"],"activeTabIndex":[514,"active-tab-index"],"tooltipIndex":[32],"timeLeft":[32],"error":[32],"hasError":[32],"actionLoading":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}],[0,"ui-skeleton",{"structure":[1],"width":[1],"height":[1],"borderRadius":[8,"border-radius"],"marginBottom":[8,"margin-bottom"],"marginTop":[8,"margin-top"],"marginLeft":[8,"margin-left"],"marginRight":[8,"margin-right"],"animation":[4],"rows":[2],"size":[1]},null,{"structure":["handleStructureChange"]}]]]], options);
+  return index.bootstrapLazy([["casino-challenge-card_6.cjs",[[1,"casino-challenges-container",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"language":[513],"endpoint":[513],"domain":[513],"session":[513],"userId":[513,"user-id"],"activeTabIndex":[32],"error":[32],"hasError":[32],"challenges":[32],"playerHistory":[32],"loading":[32],"pageNumber":[32],"total":[32],"pageSize":[32],"notification":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}],[1,"casino-challenges-list",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"language":[513],"translationUrl":[513,"translation-url"],"challenges":[16],"loading":[516],"hasMore":[516,"has-more"],"activeTabIndex":[514,"active-tab-index"]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}],[1,"casino-challenges-player-history",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"language":[513],"playerHistory":[16],"loading":[516],"hasMore":[516,"has-more"],"openItems":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"],"playerHistory":["handlePlayerHistoryChange"]}],[1,"casino-challenges-claim-code",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"language":[513],"endpoint":[513],"domain":[513],"session":[513],"loading":[32],"hasError":[32],"code":[32],"notificationMessage":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}],[1,"casino-challenge-card",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"language":[513],"endpoint":[513],"domain":[513],"session":[513],"challenge":[16],"isUserAuthorized":[516,"is-user-authorized"],"activeTabIndex":[514,"active-tab-index"],"tooltipIndex":[32],"timeLeft":[32],"error":[32],"hasError":[32],"actionLoading":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}],[0,"ui-skeleton",{"structure":[1],"width":[1],"height":[1],"borderRadius":[8,"border-radius"],"marginBottom":[8,"margin-bottom"],"marginTop":[8,"margin-top"],"marginLeft":[8,"margin-left"],"marginRight":[8,"margin-right"],"animation":[4],"rows":[2],"size":[1]},null,{"structure":["handleStructureChange"]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/collection/assets/check-circle.svg

@@ -0,0 +1,3 @@
+<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.0007 4.74992C11.1306 4.74992 4.75065 11.1299 4.75065 18.9999C4.75065 26.87 11.1306 33.2499 19.0007 33.2499C26.8707 33.2499 33.2507 26.87 33.2507 18.9999C33.2507 11.1299 26.8707 4.74992 19.0007 4.74992ZM1.58398 18.9999C1.58398 9.38096 9.38169 1.58325 19.0007 1.58325C28.6196 1.58325 36.4173 9.38096 36.4173 18.9999C36.4173 28.6189 28.6196 36.4166 19.0007 36.4166C9.38169 36.4166 1.58398 28.6189 1.58398 18.9999ZM27.2452 13.1303C27.8636 13.7487 27.8636 14.7512 27.2452 15.3695L17.7452 24.8695C17.1269 25.4878 16.1244 25.4878 15.5061 24.8695L10.7561 20.1195C10.1377 19.5012 10.1377 18.4987 10.7561 17.8803C11.3744 17.262 12.3769 17.262 12.9952 17.8803L16.6257 21.5107L25.0061 13.1303C25.6244 12.512 26.6269 12.512 27.2452 13.1303Z" fill="#00B74F"/>
+</svg>

package/dist/collection/assets/error-circle.svg

@@ -0,0 +1,3 @@
+<svg width="38" height="39" viewBox="0 0 38 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.7493 14.7498L14.2493 24.2498M14.2493 14.7498L23.7493 24.2498M34.8327 19.4998C34.8327 28.2443 27.7438 35.3332 18.9993 35.3332C10.2548 35.3332 3.16602 28.2443 3.16602 19.4998C3.16602 10.7553 10.2548 3.6665 18.9993 3.6665C27.7438 3.6665 34.8327 10.7553 34.8327 19.4998Z" stroke="#D6421E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/collection/collection-manifest.json

@@ -14,6 +14,12 @@
         "casino-challenge-card"
       ]
     },
+    {
+      "name": "@everymatrix/casino-challenges-claim-code",
+      "tags": [
+        "casino-challenges-claim-code"
+      ]
+    },
     {
       "name": "@everymatrix/casino-challenges-list",
       "tags": [

package/dist/collection/components/casino-challenges-container/casino-challenges-container.css

@@ -83,4 +83,45 @@
     width: inherit;
     padding: 5px 0;
   }
+}
+
+.notification {
+  display: flex;
+  position: absolute;
+  align-items: center;
+  bottom: 90px;
+  box-shadow: 0 0 20px 0 rgba(136, 143, 170, 0.15);
+  border-radius: 8px;
+  padding: 20px 16px;
+  gap: 16px;
+  right: 40px;
+  max-width: 445px;
+  box-sizing: border-box;
+  background-color: var(--emw--background-success-color, #C9F0D7);
+  border: 2px solid var(--emw--border-success-color, #00B74F);
+}
+.notification.errored {
+  background: var(--emw--background-errored-color, #FFE1DF);
+  border-color: var(--emw--color-error, #D6421E);
+}
+.notification__icon {
+  width: 32px;
+  height: 32px;
+}
+.notification__message {
+  margin: 0;
+  font-size: var(--emw--font-size-medium, 16px);
+  font-weight: var(--emw--font-weight-bold, 700);
+}
+.notification__message .active-tab {
+  color: var(--emw--border-success-color, #00B74F);
+  text-decoration-line: underline;
+  cursor: pointer;
+}
+@container challenges-container (max-width: 576px) {
+  .notification {
+    bottom: 60px;
+    right: 12px;
+    max-width: 290px;
+  }
 }

package/dist/collection/components/casino-challenges-container/casino-challenges-container.js

@@ -3,12 +3,19 @@ import { setClientStyling, setClientStylingURL, setStreamStyling } from "../../.
 import { resolveTranslationUrl, translate } from "../../utils/locale.utils";
 import titleIcon from "../../assets/title-icon.svg";
 import notificationIcon from "../../assets/notification.svg";
+import errorIcon from "../../assets/error-circle.svg";
+import checkIcon from "../../assets/check-circle.svg";
 import "../../../../../casino-challenges-list/dist/types/index";
 import "../../../../../casino-challenges-player-history/dist/types/index";
+import "../../../../../casino-challenges-claim-code/dist/types/index";
 export class CasinoChallengesContainer {
     constructor() {
         this.tabs = ['Active', 'Pending', 'Finished', 'Code'];
         this.showNotification = 1;
+        this.onOpenNotification = (event) => {
+            this.notification = event.detail;
+            setTimeout(() => (this.notification = null), 10000);
+        };
         this.checkAttrs = () => {
             if (!this.endpoint) {
                 this.error = 'Endpoint is missing! Please provide a valid endpointURL.';
@@ -30,12 +37,16 @@ export class CasinoChallengesContainer {
             });
         };
         this.handleTabClick = (index) => () => {
+            this.notification = null;
             this.activeTabIndex = index;
             this.challenges = [];
             this.pageNumber = 0;
             this.total = 0;
             this.loadData();
         };
+        this.renderNotification = () => {
+            return (h("div", { class: `notification ${this.notification.errored ? 'errored' : ''}` }, h("img", { src: this.notification.errored ? errorIcon : checkIcon, class: "notification__icon" }), h("p", { class: "notification__message" }, this.notification.message + ' ', this.notification.showTabLink && (h("span", { class: "active-tab", onClick: this.handleTabClick(0) }, translate('activeTab', this.language))))));
+        };
         this.mbSource = undefined;
         this.clientStyling = undefined;
         this.clientStylingUrl = undefined;
@@ -54,6 +65,7 @@ export class CasinoChallengesContainer {
         this.pageNumber = 0;
         this.total = 0;
         this.pageSize = 20;
+        this.notification = null;
     }
     handleClientStylingChange(newValue, oldValue) {
         if (newValue != oldValue) {
@@ -127,7 +139,7 @@ export class CasinoChallengesContainer {
     }
     render() {
         var _a, _b;
-        return (h("div", { key: '4e2191039d59af380aab5d65f865727e04565ad9', ref: (el) => (this.stylingContainer = el) }, h("div", { key: '5731ae9a18c13c0ff728512442a24e824fcab485', class: "challenges" }, h("div", { key: '391210a6442f95d421a223854b55da4f953a1ec3', class: "challenges__header" }, h("h1", { key: '90d93318a2082f4b19e9c2cc3fa341afcb223eb8', class: "challenges__title" }, h("img", { key: '167c1ee8869310677e864d0f7107bfb7f9e938cd', src: titleIcon, alt: "icon" }), translate('title', this.language)), this.session && (h("div", { key: '1479821da7d79a1d2d53de22b67a0d2d17c43a68', class: "challenges__tabs" }, this.tabs.map((label, index) => (h("div", { class: `challenges__tab ${index === this.activeTabIndex ? 'active' : ''}`, onClick: this.handleTabClick(index) }, label, this.showNotification === index && h("img", { src: notificationIcon }))))))), this.activeTabIndex < 2 && (h("div", { key: 'a0f87282b31054fb2b5c18c6d521530c92540db6', class: "challenges__content" }, this.challenges.length === 0 && !this.loading && (h("div", { key: '313b9431d71fe5d93d41c00d64b718159b86bfd3', class: "empty" }, translate('empty', this.language))), h("casino-challenges-list", { key: '4756590a375cdd1cd70f538084d0194523fa8c41', challenges: this.challenges, onLoadMore: this.onLoadMore, onTimerExpired: this.onTimerExpired, loading: this.loading, hasMore: ((_a = this.challenges) === null || _a === void 0 ? void 0 : _a.length) < this.total, language: this.language, activeTabIndex: this.activeTabIndex }))), this.activeTabIndex === 2 && (h("casino-challenges-player-history", { key: 'd1f077837fafb45d5c257541e3a3db5f149b210e', translationUrl: this.translationUrl, language: this.language, loading: this.loading, playerHistory: this.playerHistory, onLoadMore: this.onLoadMore, hasMore: ((_b = this.playerHistory) === null || _b === void 0 ? void 0 : _b.length) < this.total })))));
+        return (h("div", { key: '18dbc05aa857b65262bfce730e1e410e478bd657', ref: (el) => (this.stylingContainer = el) }, h("div", { key: '592c62d6d5334874112f9fcb88547b22f73e75ad', class: "challenges" }, h("div", { key: '4e96b468e8be71f2f2a785954dc3a473cc2e6cda', class: "challenges__header" }, h("h1", { key: '292d55fd2dcd2f23f02b3648657c696dbf2104e0', class: "challenges__title" }, h("img", { key: '6eb390eebfdffd29c6cc42cb6c8585617419561b', src: titleIcon, alt: "icon" }), translate('title', this.language)), this.session && (h("div", { key: '605ba6644169130cef63e675388a801124a8cbbd', class: "challenges__tabs" }, this.tabs.map((label, index) => (h("div", { class: `challenges__tab ${index === this.activeTabIndex ? 'active' : ''}`, onClick: this.handleTabClick(index) }, label, this.showNotification === index && h("img", { src: notificationIcon }))))))), this.activeTabIndex < 2 && (h("div", { key: '2951e0f23a3de8fae3e1bbfd6eb1d607d2dc2275', class: "challenges__content" }, this.challenges.length === 0 && !this.loading && (h("div", { key: 'dc42b66dfb6f4fa42753123bdc07e00bfb716c3d', class: "empty" }, translate('empty', this.language))), h("casino-challenges-list", { key: '53eb947a6637400095e9c7b77c58b47b70b45afb', challenges: this.challenges, onLoadMore: this.onLoadMore, onTimerExpired: this.onTimerExpired, loading: this.loading, hasMore: ((_a = this.challenges) === null || _a === void 0 ? void 0 : _a.length) < this.total, language: this.language, activeTabIndex: this.activeTabIndex }))), this.activeTabIndex === 2 && (h("casino-challenges-player-history", { key: '467ce910010a03e26c1ecfac3c14f35acbc307c9', translationUrl: this.translationUrl, language: this.language, loading: this.loading, playerHistory: this.playerHistory, onLoadMore: this.onLoadMore, hasMore: ((_b = this.playerHistory) === null || _b === void 0 ? void 0 : _b.length) < this.total })), this.activeTabIndex === 3 && (h("casino-challenges-claim-code", { key: '62a08e91c1d991cd53e4f7ed47fcd2da9b323dc7', endpoint: this.endpoint, session: this.session, domain: this.domain, onOpenNotification: this.onOpenNotification })), this.notification && this.renderNotification())));
     }
     static get is() { return "casino-challenges-container"; }
     static get encapsulation() { return "shadow"; }
@@ -314,7 +326,8 @@ export class CasinoChallengesContainer {
             "loading": {},
             "pageNumber": {},
             "total": {},
-            "pageSize": {}
+            "pageSize": {},
+            "notification": {}
         };
     }
     static get watchers() {