@everymatrix/player-elevate-optin 0.0.0-stage → 1.99.52

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

@@ -0,0 +1,338 @@
+import { h } from "@stencil/core";
+import { translate } from "../../utils/locale.utils";
+export class PlayerElevateOptin {
+    constructor() {
+        this.endpoint = undefined;
+        this.session = undefined;
+        this.language = "en";
+        this.enableOptIn = false;
+        this.openOptIn = false;
+        this.openOptOut = false;
+        this.terms = {
+            url: '',
+            description: '',
+            complianceUrl: '',
+            complianceDescription: '',
+        };
+        this.playerOptIn = null;
+        this.openShopRestriction = false;
+        this.pendingShopItem = null;
+        this.submitting = false;
+    }
+    async handleMessage(event) {
+        var _a, _b, _c;
+        if (event.origin !== window.location.origin)
+            return;
+        if (!this.enableOptIn)
+            return;
+        switch ((_a = event.data) === null || _a === void 0 ? void 0 : _a.type) {
+            case "BEE_OPT_IN_CLICKED":
+                if (this.playerOptIn) {
+                    return;
+                }
+                this.openOptIn = true;
+                this.openOptOut = false;
+                break;
+            case "BEE_OPT_OUT_CLICKED":
+                this.openOptOut = true;
+                this.openOptIn = false;
+                break;
+            case 'BEE_REDEEM_CLICKED':
+                if (!((_b = event.data) === null || _b === void 0 ? void 0 : _b.shopItem))
+                    return;
+                this.pendingShopItem = (_c = event.data) === null || _c === void 0 ? void 0 : _c.shopItem;
+                if (this.playerOptIn === null) {
+                    await this.loadPlayerInfo();
+                }
+                if (this.playerOptIn === false) {
+                    this.openShopRestriction = true;
+                }
+                else if (this.playerOptIn === true) {
+                    this.continuePendingRedeem();
+                }
+                else {
+                    console.error('Unable to verify player opt-in status');
+                }
+                break;
+        }
+    }
+    continuePendingRedeem() {
+        if (!this.pendingShopItem) {
+            return;
+        }
+        window.postMessage({
+            type: 'BEERedeemConfirm',
+            shopItem: this.pendingShopItem,
+        }, window.location.origin);
+        this.pendingShopItem = null;
+    }
+    async handleOptIn() {
+        if (this.submitting) {
+            return;
+        }
+        this.submitting = true;
+        try {
+            const response = await fetch(`${this.endpoint}/v1/elevate/optIn`, {
+                method: "PUT",
+                headers: {
+                    "X-Sessionid": this.session,
+                    "Content-Type": "application/json",
+                },
+            });
+            const result = await response.json();
+            if (!response.ok || !result.success) {
+                await this.loadPlayerInfo();
+                if (this.playerOptIn === true) {
+                    this.openOptIn = false;
+                    this.openShopRestriction = false;
+                    this.continuePendingRedeem();
+                    window.postMessage({
+                        type: 'userUpdateOptLoyaltySuccess',
+                        data: {
+                            type: 'success',
+                            message: translate('loyaltyEnrollSuccess', this.language),
+                            config: {
+                                timeOut: 3000,
+                            },
+                        },
+                    }, window.location.origin);
+                    return;
+                }
+                const message = result.errorCode === 6016
+                    ? translate('optInNotAvailable', this.language)
+                    : translate('loyaltyEnrollFailed', this.language);
+                window.postMessage({
+                    type: 'WidgetNotification',
+                    data: {
+                        type: 'error',
+                        message,
+                    },
+                }, window.location.origin);
+                return;
+            }
+            this.playerOptIn = true;
+            this.openOptIn = false;
+            this.continuePendingRedeem();
+            window.postMessage({
+                type: "userUpdateOptLoyaltySuccess",
+                data: {
+                    type: "success",
+                    message: translate('loyaltyEnrollSuccess', this.language),
+                    config: {
+                        timeOut: 3000,
+                    },
+                },
+            }, window.location.origin);
+        }
+        catch (error) {
+            console.error('Failed to opt in', error);
+            window.postMessage({
+                type: 'WidgetNotification',
+                data: {
+                    type: 'error',
+                    message: translate('loyaltyEnrollFailed', this.language),
+                },
+            }, window.location.origin);
+        }
+        finally {
+            this.submitting = false;
+        }
+    }
+    async loadPlayerInfo() {
+        var _a;
+        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",
+                },
+            });
+            const result = await response.json();
+            if (!result.success)
+                return;
+            this.playerOptIn = ((_a = result.data) === null || _a === void 0 ? void 0 : _a.optIn) === true;
+        }
+        catch (error) {
+            console.error('Failed to load PlayerInfo', error);
+        }
+    }
+    async loadTerms() {
+        var _a, _b, _c, _d;
+        try {
+            const response = await fetch(`${this.endpoint}/v1/elevate/optIn/terms?language=${this.language}`);
+            const result = await response.json();
+            if (!result.success) {
+                return;
+            }
+            this.terms = {
+                url: ((_a = result.data) === null || _a === void 0 ? void 0 : _a.url) || '',
+                description: ((_b = result.data) === null || _b === void 0 ? void 0 : _b.description) || '',
+                complianceUrl: ((_c = result.data) === null || _c === void 0 ? void 0 : _c.complianceUrl) || '',
+                complianceDescription: ((_d = result.data) === null || _d === void 0 ? void 0 : _d.complianceDesc) || '',
+            };
+            window.postMessage({
+                type: 'BEE_OPT_IN_TERMS_LOADED',
+                terms: this.terms,
+            }, window.location.origin);
+        }
+        catch (error) {
+            console.error('Failed to load opt-in terms', error);
+        }
+    }
+    async componentWillLoad() {
+        if (!this.enableOptIn) {
+            return;
+        }
+        if (!this.endpoint || !this.session) {
+            return;
+        }
+        const storageKey = `player-elevate-optin-shown-${this.session}`;
+        let alreadyShown = null;
+        try {
+            alreadyShown = localStorage.getItem(storageKey);
+        }
+        catch (error) {
+            console.error('Failed to access localStorage', error);
+        }
+        await Promise.all([
+            this.loadTerms(),
+            alreadyShown ? Promise.resolve() : this.loadPlayerInfo(),
+        ]);
+        if (!alreadyShown && this.playerOptIn === false) {
+            this.openOptIn = true;
+            try {
+                localStorage.setItem(storageKey, 'true');
+            }
+            catch (error) {
+                console.error('Failed to write localStorage', error);
+            }
+        }
+    }
+    render() {
+        if (!this.enableOptIn) {
+            return null;
+        }
+        if (!this.openOptIn && !this.openOptOut && !this.openShopRestriction) {
+            return null;
+        }
+        return (h("div", { class: "Overlay" }, this.openOptIn && (h("div", { class: "GradientContainer" }, h("button", { class: "CloseButton", onClick: () => (this.openOptIn = false) }, "X"), h("div", { class: "Modal" }, h("h2", { class: "TermsTitle" }, translate('joinLoyaltyProgram', this.language)), h("div", { class: "Divider" }), this.terms.description && (h("p", { class: "TermsDescription" }, this.terms.description)), this.terms.complianceDescription && (h("p", { class: "ComplianceDescription" }, this.terms.complianceDescription)), this.terms.complianceUrl && (h("a", { href: this.terms.complianceUrl, target: "_blank", rel: "noopener noreferrer", class: "TermsLink" }, translate('readTermsAndConditions', this.language), h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("g", { transform: "translate(0 1)" }, h("path", { d: "M14 3h7v7" }), h("path", { d: "M10 14L21 3" }), h("path", { d: "M21 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5" }))))), h("div", { class: "Divider" }), h("div", { class: "Actions" }, h("button", { class: "SecondaryButton", onClick: () => (this.openOptIn = false) }, translate('maybeLater', this.language)), h("button", { class: "PrimaryButton", disabled: this.submitting, onClick: () => this.handleOptIn() }, this.submitting
+            ? translate('processing', this.language)
+            : translate('optIn', this.language)))))), this.openShopRestriction && (h("div", { class: "GradientContainer" }, h("button", { class: "CloseButton", onClick: () => {
+                this.openShopRestriction = false;
+                this.pendingShopItem = null;
+            } }, "X"), h("div", { class: "Modal" }, h("div", { class: "Icon" }, h("svg", { class: "GamificationButtonIcon", width: "24", height: "24", viewBox: "0 0 22 23", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M7.46429 2.19354C7.21442 2.19354 6.97106 2.2977 6.78878 2.48928C6.6059 2.6815 6.50001 2.94609 6.50001 3.2258C6.50001 3.50552 6.6059 3.77011 6.78878 3.96232C6.97106 4.15391 7.21442 4.25806 7.46429 4.25806H9.63425C9.56187 4.08118 9.47857 3.89797 9.38356 3.7164C8.89769 2.78793 8.27398 2.19354 7.46429 2.19354ZM10 6.32258V9.41935L2.60001 9.41935C2.30348 9.41935 2.14122 9.41855 2.02464 9.40871C2.02 9.40832 2.0156 9.40793 2.01145 9.40753C2.01107 9.40325 2.01069 9.39871 2.01031 9.39392C2.00078 9.27358 2.00001 9.10609 2.00001 8.8V6.94193C2.00001 6.63584 2.00078 6.46835 2.01031 6.348C2.01069 6.34321 2.01107 6.33868 2.01145 6.33439C2.0156 6.334 2.02 6.3336 2.02464 6.33321C2.14122 6.32338 2.30348 6.32258 2.60001 6.32258H10ZM4.66953 4.25806C4.55822 3.92911 4.50001 3.58027 4.50001 3.2258C4.50001 2.41043 4.80802 1.62479 5.36188 1.04266C5.91635 0.459899 6.67224 0.129028 7.46429 0.129028C9.259 0.129028 10.3725 1.38679 11 2.47456C11.6275 1.38679 12.741 0.129028 14.5357 0.129028C15.3278 0.129028 16.0837 0.459899 16.6381 1.04266C17.192 1.62479 17.5 2.41043 17.5 3.2258C17.5 3.58027 17.4418 3.92911 17.3305 4.25806L19.4319 4.25806C19.6843 4.25803 19.9301 4.258 20.1382 4.27555C20.3668 4.29483 20.6366 4.34032 20.908 4.48308C21.2843 4.68101 21.5903 4.99684 21.782 5.38531C21.9203 5.66549 21.9644 5.94392 21.9831 6.17989C22.0001 6.39476 22 6.64847 22 6.90899V8.83294C22 9.09346 22.0001 9.34717 21.9831 9.56204C21.9644 9.79801 21.9203 10.0764 21.782 10.3566C21.5903 10.7451 21.2843 11.0609 20.908 11.2588C20.6366 11.4016 20.3668 11.4471 20.1382 11.4664C20.0938 11.4701 20.0476 11.4731 20 11.4754V18.543C20 19.0872 20 19.5566 19.9694 19.9433C19.9371 20.3513 19.8658 20.7573 19.673 21.1478C19.3854 21.7305 18.9265 22.2043 18.362 22.5012C17.9836 22.7002 17.5904 22.7738 17.195 22.8071C16.8205 22.8387 16.3657 22.8387 15.8386 22.8387H11.0014C11.0009 22.8387 11.0005 22.8387 11 22.8387C10.9995 22.8387 10.9991 22.8387 10.9986 22.8387H6.16144C5.6343 22.8387 5.17954 22.8387 4.80498 22.8071C4.40963 22.7738 4.01641 22.7002 3.63803 22.5012C3.07355 22.2043 2.6146 21.7305 2.32699 21.1478C2.13419 20.7572 2.06288 20.3513 2.03057 19.9432C1.99997 19.5566 1.99999 19.0872 2 18.543L2.00001 11.4754C1.95241 11.4731 1.90624 11.4701 1.86178 11.4664C1.63318 11.4471 1.36345 11.4016 1.09202 11.2588C0.715701 11.0609 0.409739 10.7451 0.217992 10.3566C0.0796947 10.0764 0.0356271 9.79801 0.0169504 9.56204C-5.6861e-05 9.34717 -2.74161e-05 9.09345 2.50544e-06 8.83292L5.24726e-06 6.94193C5.24726e-06 6.93095 3.93595e-06 6.91997 2.62465e-06 6.909C-2.72969e-05 6.64848 -5.67418e-05 6.39476 0.0169505 6.17989C0.0356274 5.94392 0.079695 5.66549 0.217992 5.38531C0.409739 4.99684 0.7157 4.68101 1.09202 4.48308C1.36345 4.34032 1.63318 4.29483 1.86178 4.27555C2.06993 4.258 2.31573 4.25803 2.56811 4.25806C2.57873 4.25806 2.58936 4.25806 2.60001 4.25806H4.66953ZM4.00001 11.4839V18.5032C4.00001 19.0984 4.00078 19.4827 4.02393 19.7751C4.04613 20.0556 4.08381 20.1595 4.109 20.2106C4.20487 20.4048 4.35785 20.5627 4.54601 20.6617C4.59546 20.6877 4.69618 20.7266 4.96784 20.7495C5.25118 20.7734 5.62345 20.7742 6.20001 20.7742H10V11.4839H4.00001ZM12 11.4839V20.7742H15.8C16.3766 20.7742 16.7488 20.7734 17.0322 20.7495C17.3038 20.7266 17.4046 20.6877 17.454 20.6617C17.6422 20.5627 17.7951 20.4048 17.891 20.2106C17.9162 20.1595 17.9539 20.0556 17.9761 19.7751C17.9992 19.4827 18 19.0984 18 18.5032V11.4839H12ZM19.4 9.41935C19.6965 9.41935 19.8588 9.41855 19.9754 9.40871C19.98 9.40832 19.9844 9.40792 19.9886 9.40752C19.9889 9.40324 19.9893 9.39871 19.9897 9.39392C19.9992 9.27358 20 9.10609 20 8.8V6.94193C20 6.63584 19.9992 6.46835 19.9897 6.34801C19.9893 6.34322 19.9889 6.33868 19.9885 6.33439C19.9844 6.334 19.98 6.3336 19.9754 6.33321C19.8588 6.32338 19.6965 6.32258 19.4 6.32258H12V9.41935H19.4ZM14.5357 4.25806C14.7856 4.25806 15.0289 4.15391 15.2112 3.96232C15.3941 3.77011 15.5 3.50552 15.5 3.2258C15.5 2.94609 15.3941 2.6815 15.2112 2.48928C15.0289 2.2977 14.7856 2.19354 14.5357 2.19354C13.726 2.19354 13.1023 2.78793 12.6165 3.7164C12.5214 3.89797 12.4381 4.08118 12.3658 4.25806H14.5357Z" }))), h("h2", { class: "Title" }, translate('optInRedeemTitle', this.language)), h("div", { class: "Divider" }), h("p", { class: "Description" }, translate('optInRedeemDescription', this.language)), h("div", { class: "Divider" }), h("div", { class: "Actions" }, h("button", { class: "SecondaryButton", onClick: () => {
+                this.openShopRestriction = false;
+                this.pendingShopItem = null;
+            } }, translate('maybeLater', this.language)), h("button", { class: "PrimaryButton", disabled: this.submitting, onClick: () => this.handleOptIn() }, this.submitting
+            ? translate('processing', this.language)
+            : translate('optIn', this.language)))))), this.openOptOut && (h("div", { class: "GradientContainer" }, h("button", { class: "CloseButton", onClick: () => (this.openOptOut = false) }, "X"), h("div", { class: "Modal" }, h("div", { class: "Icon" }, h("svg", { width: "24", height: "24", viewBox: "0 0 80 80", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("circle", { cx: "40", cy: "40", r: "34", stroke: "currentColor", "stroke-width": "8" }), h("circle", { cx: "40", cy: "24", r: "4", fill: "currentColor" }), h("path", { d: "M40 34V56", stroke: "currentColor", "stroke-width": "8", "stroke-linecap": "round" }))), h("h2", { class: "Title" }, translate('optOutTitle', this.language)), h("div", { class: "Divider" }), h("p", { class: "OptOutDescription" }, translate('optOutDescription', this.language)), h("div", { class: "Divider" }), h("div", { class: "Actions" }, h("button", { class: "PrimaryButton", onClick: () => (this.openOptOut = false) }, translate('okay', this.language))))))));
+    }
+    static get is() { return "player-elevate-optin"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["player-elevate-optin.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["player-elevate-optin.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "endpoint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "endpoint",
+                "reflect": false
+            },
+            "session": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "session",
+                "reflect": false
+            },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "language",
+                "reflect": false,
+                "defaultValue": "\"en\""
+            },
+            "enableOptIn": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "enable-opt-in",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "openOptIn": {},
+            "openOptOut": {},
+            "terms": {},
+            "playerOptIn": {},
+            "openShopRestriction": {},
+            "pendingShopItem": {},
+            "submitting": {}
+        };
+    }
+    static get listeners() {
+        return [{
+                "name": "message",
+                "method": "handleMessage",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/index.js

@@ -0,0 +1 @@
+export * from './components/player-elevate-optin';

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

@@ -0,0 +1,56 @@
+const DEFAULT_LANGUAGE = 'en';
+export const TRANSLATIONS = {
+    en: {
+        joinLoyaltyProgram: 'JOIN THE LOYALTY PROGRAM',
+        readTermsAndConditions: 'Read Terms & Conditions',
+        maybeLater: 'MAYBE LATER',
+        optIn: 'OPT IN',
+        optOut: 'OPT OUT',
+        optInRedeemTitle: 'OPT IN AND REDEEM YOUR GIFT',
+        optInRedeemDescription: 'You are not enrolled in the Loyalty programme. Opt in now to join the programme and redeem this gift.',
+        optInRakebackTitle: 'OPT IN AND CLAIM YOUR RAKEBACK',
+        optInRakebackDescription: 'You are not enrolled in the Loyalty programme. Opt in now to join the programme and claim this rakeback.',
+        optOutTitle: 'NEXT STEPS TO OPT OUT',
+        optOutDescription: 'Please contact the support team to opt out of the Loyalty Programme.',
+        okay: 'OKAY',
+        loyaltyEnrollSuccess: 'Congratulations! You are now enrolled in the Loyalty Programme.',
+        loyaltyEnrollFailed: 'Unable to enroll in the Loyalty Programme. Please try again later.',
+        optInNotAvailable: 'Opt-in is not available for this loyalty program.',
+        processing: 'Processing...',
+    },
+    'zh-hk': {
+        joinLoyaltyProgram: '加入忠誠計劃',
+        readTermsAndConditions: '閱讀條款及細則',
+        maybeLater: '稍後再說',
+        optIn: '立即加入',
+        optOut: '退出',
+        okay: '確定',
+    },
+};
+export const translate = (key, customLang) => {
+    var _a, _b;
+    const lang = customLang && TRANSLATIONS[customLang]
+        ? customLang
+        : DEFAULT_LANGUAGE;
+    return (((_a = TRANSLATIONS[lang]) === null || _a === void 0 ? void 0 : _a[key]) ||
+        ((_b = TRANSLATIONS[DEFAULT_LANGUAGE]) === null || _b === void 0 ? void 0 : _b[key]) ||
+        key);
+};
+export const getTranslations = (url) => {
+    return new Promise((resolve) => {
+        fetch(url)
+            .then((res) => res.json())
+            .then((data) => {
+            Object.keys(data).forEach((lang) => {
+                if (!TRANSLATIONS[lang]) {
+                    TRANSLATIONS[lang] = {};
+                }
+                Object.keys(data[lang]).forEach((key) => {
+                    TRANSLATIONS[lang][key] = data[lang][key];
+                });
+            });
+            resolve(true);
+        })
+            .catch(() => resolve(false));
+    });
+};

package/dist/collection/utils/utils.js

@@ -0,0 +1,3 @@
+export function format(first, middle, last) {
+    return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
+}

package/dist/esm/app-globals-0f993ce5.js

@@ -0,0 +1,3 @@
+const globalScripts = () => {};
+
+export { globalScripts as g };