@salla.sa/twilight-components 2.14.402 → 2.14.403

package/dist/collection/components/salla-loyalty/salla-loyalty-prize-item.js

@@ -7,7 +7,7 @@ export class SallaLoyaltyPrizeItem {
         this.prizeItemSelected.emit(this.item);
     }
     render() {
-        return (h(Host, { key: '91162ebf1e2f76c4b90df9518d57a136e71fa573' }, h("div", { key: '80416871b0f60857b3279525bdaa87327b75890a', onClick: this.onPrizeItemClick.bind(this) }, h("img", { key: 'd7afdc106a822c0f7640136bec591bfa48fe1802', class: "s-loyalty-prize-item-image", src: this.item.image, alt: this.item.name }), h("div", { key: '727f131b7fa00b75aab57f2bb5ea4616f0d3929a', class: "s-loyalty-prize-item-title" }, this.item.name), h("div", { key: '6e2b9263b7d2c1b7a9e372ede63a6b10a23b0d1d', class: "s-loyalty-prize-item-subtitle" }, this.item.description), h("div", { key: '97b7710e76e3d73afe68abe6e8094483960884da', class: "s-loyalty-prize-item-points" }, this.item.cost_points, " ", salla.lang.get('pages.loyalty_program.point')))));
+        return (h(Host, { key: 'd3b79cbf7e67281d4c42c83084b2d1f0f59fd77d' }, h("div", { key: '11d71896f19eef94434fa8d9d074c98ce3e6de5b', onClick: this.onPrizeItemClick.bind(this) }, h("img", { key: 'c8d254e77a7af0559c5336aca9d7d57593814d0a', class: "s-loyalty-prize-item-image", src: this.item.image, alt: this.item.name }), h("div", { key: '5946e1d5ce94ef8bfcbab95ab2f2e8733145b7f2', class: "s-loyalty-prize-item-title" }, this.item.name), h("div", { key: 'c565935591c84ce475767b8a863323023fabae31', class: "s-loyalty-prize-item-subtitle" }, this.item.description), h("div", { key: '225c7c594cb1942a56a6966ab8289a4dfb7f0d71', class: "s-loyalty-prize-item-points" }, this.item.cost_points, " ", salla.lang.get('pages.loyalty_program.point')))));
     }
     static get is() { return "salla-loyalty-prize-item"; }
     static get originalStyleUrls() {

package/dist/collection/components/salla-loyalty-program/functions.js

@@ -0,0 +1,53 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { h } from "@stencil/core";
+export function nearestLowerMultiple(number, multipleOf = window.matchMedia('(min-width: 768px)').matches ? 3 : 2) {
+    return number < multipleOf ? number : number - (number % multipleOf);
+}
+export function closeModals(cb = null) {
+    for (const element of document.querySelectorAll('salla-modal')) {
+        element.close();
+    }
+    cb && requestAnimationFrame(cb);
+}
+export function normalizeLoyaltyData(data) {
+    const groups = (data.prizes || []).map((group) => {
+        return {
+            ...group,
+            items: (group.items || []).map((item) => ({ ...item, group_title: group.title, group_type: group.type })),
+        };
+    });
+    const all = {
+        type: 'all',
+        title: salla.lang.get('pages.loyalty_program.all'),
+        items: groups.reduce((acc, group) => acc.concat(group.items), []),
+    };
+    groups.unshift(all);
+    return {
+        ...data,
+        prizes: groups,
+        prizes_count: all.items.length,
+        points: data.points ?? [],
+    };
+}
+export function brand_path(brand) {
+    return [brand.name.replace(/\s/g, '-'), `brand-${brand.id}`].join('/');
+}
+export function isUnitOrder(point) {
+    for (const condition of (point.conditions ?? [])) {
+        if (condition.key?.endsWith('_FOR_UNIT')) {
+            return true;
+        }
+    }
+    return false;
+}
+export function formattedPointsJsx(value) {
+    if (typeof value === 'number') {
+        return h("span", null, value, " ", salla.lang.get('pages.loyalty_program.point'));
+    }
+    if (isUnitOrder(value)) {
+        return h("span", null, "1 ", salla.config.currency().symbol, " = ", value.points, " ", salla.lang.get('pages.loyalty_program.point'));
+    }
+    return h("span", null, value.points, " ", salla.lang.get('pages.loyalty_program.point'));
+}

package/dist/collection/components/salla-loyalty-program/interfaces.js

@@ -1 +1,8 @@
-export {};
+/*!
+ * Crafted with ❤ by Salla
+ */
+export var LoyaltyPointTypes;
+(function (LoyaltyPointTypes) {
+    LoyaltyPointTypes["Share"] = "share";
+    LoyaltyPointTypes["Profile"] = "profile";
+})(LoyaltyPointTypes || (LoyaltyPointTypes = {}));

package/dist/collection/components/salla-loyalty-program/salla-loyalty-banner.js

@@ -0,0 +1,69 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { h } from "@stencil/core";
+import { setTranslations } from "./translations";
+import SIGift from "../../assets/svg/gift.svg";
+import { TrackedPromise } from "../../Helpers/tracked-promise";
+export class SallaLoyaltyBanner {
+    /**
+     * Get product ID from data attribute or fallback to page.id
+     */
+    get productId() {
+        return this.host.dataset.productId || salla.config.get('page.id');
+    }
+    componentWillLoad() {
+        return salla.onReady()
+            .then(() => salla.lang.onLoaded())
+            .then(() => setTranslations())
+            .then(() => this.prize())
+            .catch(error => salla.logger.error(error));
+    }
+    handleClick() {
+        if (salla.config.isGuest()) {
+            salla.event.dispatch('login::open');
+            return;
+        }
+        this.exchangeModal.open();
+    }
+    render() {
+        if (this.prize.status !== 'success' || !this.productId) {
+            return null;
+        }
+        return (h("div", { class: "s-loyalty-program-banner-container" }, h("div", null, h("p", { class: "s-loyalty-program-banner-container-banner-title" }, salla.lang.get('pages.loyalty_program.want_to_redeem_free_product')), h("p", { class: "s-loyalty-program-banner-container-banner-subtitle" }, salla.lang.get('pages.loyalty_program.exchange_points_for_free_product', { points: this.prize.data.cost_points }))), h("button", { onClick: () => this.handleClick() }, h("span", { innerHTML: SIGift }), h("span", null, salla.lang.get('pages.loyalty_program.exchange_points'))), h("salla-modal", { ref: modal => this.exchangeModal = modal, width: "sm" }, !this.prize.data ? '' : h("salla-reward-exchange", { productId: Number(this.productId), prize: this.prize.data }))));
+    }
+    static get is() { return "salla-loyalty-banner"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["salla-loyalty-program.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["salla-loyalty-program.css"]
+        };
+    }
+    static get elementRef() { return "host"; }
+}
+__decorate([
+    TrackedPromise(async function () {
+        if (!(salla.config.get('store.features') || []).includes('loyalty-system')) {
+            return Promise.reject('Loyalty system is not enabled for merchant');
+        }
+        const { loyalty_prize } = await salla.product.api.getDetails(this.productId);
+        if (!loyalty_prize) {
+            return Promise.reject('no loyalty prize for this product');
+        }
+        return loyalty_prize;
+    })
+], SallaLoyaltyBanner.prototype, "prize", void 0);

package/dist/collection/components/salla-loyalty-program/salla-loyalty-hero.js

@@ -0,0 +1,87 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { Host, h } from "@stencil/core";
+export class SallaLoyaltyHero {
+    render() {
+        return (h(Host, { key: '71421d1a559f9d0b8b9a2023e3015847dd4be7fb' }, h("section", { key: '914ae35d2e038a4f0f358eb3d61352cf263f4c7b', class: "s-loyalty-program-hero-container" }, h("div", { key: '93353d9f4dcc7d41e4c714f93ee84899b799633e', class: "s-loyalty-program-hero-background", style: {
+                backgroundImage: `url(${this.image})`,
+            } }, this.image ? h("div", { class: "s-loyalty-program-hero-overlay" }) : '', h("div", { key: '6f62cb4aadbb81f91549b60177f15e8791e6aa51', class: {
+                's-loyalty-program-hero-content': true,
+                's-loyalty-program-hero-white': !!this.image,
+                's-loyalty-program-hero-gray': !this.image,
+            } }, h("div", { key: '11794269898ee42023cac29e49c17463fe90781b' }, h("h1", { key: '95435290b38fce9dbc6a580d8452e7189074773b', class: "s-loyalty-program-hero-title" }, this.name || h("span", { key: '02fbbae525a5973d65bb98626dbe5712374495c4', style: { color: 'transparent', backgroundColor: '#666', borderRadius: '12px' } }, "name")), h("p", { key: 'e482ab6a067d54b9c274208a43b286e07a8e471c', class: "s-loyalty-program-hero-description" }, this.description || h("span", { key: '2fc2ea5a732e473b2c26d3b885a699b57f7df0c1', style: { color: 'transparent', backgroundColor: '#666', borderRadius: '12px' } }, "description"))), h("slot", { key: 'd548c168c97849abd583b510c7b1d6c4370daa1c', name: "action" }))), h("div", { key: '2423ee04e5e126eabcbfec20ad6c82a8d2593d2a', class: "s-loyalty-program-hero-footer" }, h("div", { key: '25ee4e74c9ea3c0ea420a09858c45b83b454bd40', class: "s-loyalty-program-hero-slot-container" }, h("slot", { key: '11a7147bc142914ccfa08b099826a4a2805100aa', name: "crosspoint" }))))));
+    }
+    static get is() { return "salla-loyalty-hero"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["salla-loyalty-program.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["salla-loyalty-program.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "image": {
+                "type": "string",
+                "attribute": "image",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional image to display in the background"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "name": {
+                "type": "string",
+                "attribute": "name",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Name of the program"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "description": {
+                "type": "string",
+                "attribute": "description",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Description of the program"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            }
+        };
+    }
+}

package/dist/collection/components/salla-loyalty-program/salla-loyalty-panel.js

@@ -0,0 +1,171 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { h } from "@stencil/core";
+import { setTranslations } from "./translations";
+import { closeModals, normalizeLoyaltyData } from "./functions";
+import Star2 from "../../assets/svg/star2.svg";
+import CancelIcon from "../../assets/svg/cancel.svg";
+import SILayoutGrid from "../../assets/svg/layout-grid.svg";
+import SIShipping from "../../assets/svg/shipping.svg";
+import SIPercentage from "../../assets/svg/percentage.svg";
+import SICart2 from "../../assets/svg/cart2.svg";
+import PrizeImage from "../../assets/images/prize-image.svg";
+import { TrackedPromise } from "../../Helpers/tracked-promise";
+const sicons = {
+    all: h("span", { class: "s-loyalty-program-rewards-tab-icon", innerHTML: SILayoutGrid }),
+    free_shipping: h("span", { class: "s-loyalty-program-rewards-tab-icon", innerHTML: SIShipping }),
+    coupon_discount: h("span", { class: "s-loyalty-program-rewards-tab-icon", innerHTML: SIPercentage }),
+    free_product: h("span", { class: "s-loyalty-program-rewards-tab-icon", innerHTML: SICart2 }),
+};
+export class SallaLoyaltyPanel {
+    constructor() {
+        /**
+         * prize to show in details or exchange modals
+         */
+        this.currentPrize = null;
+        this.handleExchangeSucceeded = () => window.location.reload();
+        this.handleResetSucceeded = () => window.location.reload();
+    }
+    componentWillLoad() {
+        return salla.onReady()
+            .then(() => salla.lang.onLoaded())
+            .then(() => setTranslations())
+            .then(() => {
+            salla.event.on('loyalty::exchange.succeeded', this.handleExchangeSucceeded);
+            salla.event.on('loyalty::exchange-reset.succeeded', this.handleResetSucceeded);
+            // Fetch points if user is logged in
+            if (!salla.config.isGuest()) {
+                this.points();
+            }
+        })
+            .catch((error) => salla.logger.error(error));
+    }
+    disconnectedCallback() {
+        salla.event.off('loyalty::exchange.succeeded', this.handleExchangeSucceeded);
+        salla.event.off('loyalty::exchange-reset.succeeded', this.handleResetSucceeded);
+    }
+    render() {
+        const prizesGroups = this.program.data.prizes;
+        const prizesCount = this.program.data.prizes_count;
+        const isLoadingPoints = this.points.status === 'pending' && this.points.data === null && !this.customerPoints;
+        const customerPoints = isLoadingPoints ? '---' : (this.points.data ?? this.customerPoints ?? 0);
+        if (this.prizeTitle && this.prizePoints) {
+            return (h("div", { class: "s-loyalty-program-panel-exchange-wrapper" }, h("salla-list-tile", { class: "s-loyalty-program-after-exchange" }, h("div", { slot: "title", class: "s-loyalty-program-after-exchange-title" }, this.prizeTitle, " \u00A0 - \u00A0 ", this.prizePoints, " ", salla.lang.get('pages.loyalty_program.point')), h("div", { slot: "action", class: "s-loyalty-program-after-exchange-action" }, h("salla-button", { class: "s-loyalty-program-after-exchange-reset", shape: "icon", fill: 'outline', color: "danger", size: "small", onClick: () => salla.loyalty.reset() }, h("span", { innerHTML: CancelIcon }))))));
+        }
+        return (h("div", { class: "" }, h("div", { class: "s-loyalty-program-panel-exchange-wrapper" }, h("salla-list-tile", { class: 's-loyalty-program-panel-widget' }, h("div", { slot: "icon", class: "s-loyalty-program-panel-widget-icon", innerHTML: Star2 }), h("div", { slot: "subtitle" }, salla.lang.get('pages.loyalty_program.cart_total_point_summary', { "balance": customerPoints }), h("salla-button", { shape: "link", color: "primary", onClick: () => {
+                if (['error', 'idle'].includes(this.program.status)) {
+                    this.program();
+                }
+                this.rewardsModal.open();
+            } }, customerPoints !== '---' && customerPoints ? salla.lang.get('pages.loyalty_program.cart_point_exchange_now') : salla.lang.get('blocks.header.login'))))), h("salla-modal", { id: "loyalty-rewards-modal", isLoading: this.program.status === 'pending', ref: modal => this.rewardsModal = modal, class: "s-loyalty-program-rewards-cart s-loyalty-program-modal", width: "lg", noPadding: true }, h("div", { slot: "loading" }, h("salla-loading", null)), this.program.status === 'success' ? h("div", { class: "s-loyalty-program-rewards-container-cart" }, h("div", { class: "s-loyalty-program-rewards-cart-header" }, h("div", { innerHTML: PrizeImage }), h("div", { class: "s-loyalty-program-panel-content" }, h("h1", null, this.program.data.prize_promotion_title), h("p", null, this.program.data.prize_promotion_description))), h("div", { class: {
+                's-loyalty-program-slider-arrows': true,
+                's-loyalty-program-tabs-hider': prizesGroups.length < 2 || prizesCount < 2,
+            } }, h("salla-tabs", null, prizesGroups.map((group) => (h("salla-tab-header", { slot: "header", name: group.type }, sicons[group.type], h("span", null, group.title)))), prizesGroups.map((group) => (h("salla-tab-content", { slot: "content", name: group.type }, h("salla-slider", { id: group.type, type: "default", "slider-config": '{"loop":false,"slidesPerView":"auto","freeMode":true,"spaceBetween":12,"breakpoints":{"768":{"slidesPerView":3,"spaceBetween":24,"freeMode":false,"speed":300}}}' }, h("div", { slot: "items" }, group.items.map((prize) => h("salla-reward-card", { prize: prize, onAreaClick: () => {
+                this.currentPrize = prize;
+                closeModals(() => this.detailsModal.open());
+            }, onActionClick: () => {
+                this.currentPrize = prize;
+                closeModals(() => this.detailsModal.open());
+            } })))))))))) : ''), h("salla-modal", { ref: modal => this.detailsModal = modal, class: "s-loyalty-program-modal", width: "md", noPadding: true }, !this.currentPrize ? '' : h("salla-reward-details", { onActionClick: () => closeModals(() => this.exchangeModal.open()), prize: this.currentPrize })), h("salla-modal", { ref: modal => this.exchangeModal = modal, class: "s-loyalty-program-modal", width: "sm" }, !this.currentPrize ? '' : h("salla-reward-exchange", { prize: this.currentPrize }))));
+    }
+    static get is() { return "salla-loyalty-panel"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["salla-loyalty-program.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["salla-loyalty-program.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "prizePoints": {
+                "type": "any",
+                "attribute": "prize-points",
+                "mutable": true,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The exchanged prize point"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "customerPoints": {
+                "type": "number",
+                "attribute": "customer-points",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Available customer points with which they can exchange."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "prizeTitle": {
+                "type": "string",
+                "attribute": "prize-title",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The prize title"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            }
+        };
+    }
+    static get states() {
+        return {
+            "currentPrize": {}
+        };
+    }
+}
+__decorate([
+    TrackedPromise(async () => {
+        const { data } = await salla.loyalty.getProgram();
+        return normalizeLoyaltyData(data);
+    }, { initialData: { prizes: [], prizes_count: 0 } })
+], SallaLoyaltyPanel.prototype, "program", void 0);
+__decorate([
+    TrackedPromise(async () => {
+        const { data } = await salla.loyalty.getPoints();
+        return data.points;
+    }, { initialData: null })
+], SallaLoyaltyPanel.prototype, "points", void 0);

package/dist/collection/components/salla-loyalty-program/salla-loyalty-point.js

@@ -0,0 +1,219 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { h } from "@stencil/core";
+import { closeModals, formattedPointsJsx } from "./functions";
+import SIGift from "../../assets/svg/gift.svg";
+import SICart2 from "../../assets/svg/cart2.svg";
+import SIStore from "../../assets/svg/store.svg";
+import SIUserAdd from "../../assets/svg/user-add.svg";
+import SIChatConversationAlt from "../../assets/svg/chat-conversation-alt.svg";
+import SILink1 from "../../assets/svg/link1.svg";
+import SIUser from "../../assets/svg/user.svg";
+import SIMail from "../../assets/svg/mail.svg";
+import SICalendar from "../../assets/svg/calendar.svg";
+import SIiPhoneX from "../../assets/svg/iphone-x.svg";
+import SILocation from "../../assets/svg/location.svg";
+import SIMapLocation from "../../assets/svg/map-location.svg";
+import SIShipping from "../../assets/svg/shipping.svg";
+/**
+ * Dashboard sicons:
+ * share - sicon-share-alt
+ * order from store - sicon-shopping-basket
+ * rate order - sicon-chat-conversation-alt
+ * order from app - sicon-iphone-x
+ * first order - sicon-add-to-cart
+ * pos - sicon-store
+ * fill profile - sicon-user-add
+ */
+const sicons = {
+    'FIRST_ORDER_STORE_FOR_UNIT': h("span", { innerHTML: SICart2 }),
+    'FIRST_ORDER_STORE_FIX_AMOUNT': h("span", { innerHTML: SICart2 }),
+    'ORDER_FROM_APP_FOR_UNIT': h("span", { innerHTML: SICart2 }),
+    'ORDER_FROM_APP_FIX_AMOUNT': h("span", { innerHTML: SICart2 }),
+    'CONDITION_RATING_SHIPPING_STORE': h("span", { innerHTML: SIStore }),
+    'CONDITION_RATING_PRODUCT': h("span", { innerHTML: SIChatConversationAlt }),
+    'CONDITION_RATING_SHIPPING_COMPANY': h("span", { innerHTML: SIShipping }),
+    'CONDITION_COMPLETE_PERSONAL_INFORMATION_BIRTHDAY': h("span", { innerHTML: SICalendar }),
+    'CONDITION_COMPLETE_PERSONAL_INFORMATION_EMAIL': h("span", { innerHTML: SIMail }),
+    'CONDITION_COMPLETE_PERSONAL_INFORMATION_MOBILE': h("span", { innerHTML: SIiPhoneX }),
+    'CONDITION_COMPLETE_PERSONAL_INFORMATION_GENDER': h("span", { innerHTML: SIUser }),
+    'CONDITION_BUY_FROM_STORE_FOR_UNIT': h("span", { innerHTML: SICart2 }),
+    'CONDITION_BUY_FROM_STORE_FIX_AMOUNT': h("span", { innerHTML: SICart2 }),
+    'order_from_pos_1': h("span", { innerHTML: SIiPhoneX }),
+    'order_from_pos_2': h("span", { innerHTML: SILocation }),
+    'buy_from_pos_1': h("span", { innerHTML: SIMapLocation }),
+    'buy_from_pos_2': h("span", { innerHTML: SIiPhoneX }),
+    'CONDITION_BUY_FROM_POS_FOR_UNIT': h("span", { innerHTML: SIiPhoneX }),
+    'CONDITION_BUY_FROM_POS_FIX_AMOUNT': h("span", { innerHTML: SIiPhoneX }),
+    'affiliate_link_1': h("span", { innerHTML: SILink1 }),
+    'affiliate_link_2': h("span", { innerHTML: SIUserAdd }),
+    'affiliate_link_3': h("span", { innerHTML: SICart2 }),
+    'CONDITION_AFFILIATE_LINK': h("span", { innerHTML: SILink1 }),
+};
+export class SallaLoyaltyPoint {
+    async handleShareAction(e, point, successText) {
+        const isDesktop = window.matchMedia('(min-width: 1024px)').matches;
+        // only on mobile/tablet devices
+        if ('share' in navigator && !isDesktop) {
+            try {
+                await navigator.share({
+                    title: document.title,
+                    url: point.url,
+                });
+                return;
+            }
+            catch (error) { }
+        }
+        const el = e.target;
+        const oldTextContent = el.textContent;
+        const temporaryTextContent = successText;
+        // fallback to clipboard
+        if ('clipboard' in navigator) {
+            try {
+                await navigator.clipboard.writeText(point.url);
+                el.textContent = temporaryTextContent;
+                setTimeout(() => {
+                    el.textContent = oldTextContent;
+                }, 5000);
+                return;
+            }
+            catch (error) { }
+        }
+        // fallback to textarea
+        const textarea = document.createElement('textarea');
+        textarea.value = point.url;
+        textarea.style.opacity = '0';
+        this.host.appendChild(textarea);
+        textarea.focus();
+        textarea.select();
+        try {
+            const success = document.execCommand('copy');
+            if (!success) {
+                throw new Error('Failed to copy URL to clipboard');
+            }
+            el.textContent = temporaryTextContent;
+            setTimeout(() => {
+                el.textContent = oldTextContent;
+            }, 5000);
+        }
+        catch (error) { }
+        this.host.removeChild(textarea);
+    }
+    handleAction(e, point) {
+        e.stopPropagation();
+        if (point.is_completed) {
+            e.preventDefault();
+            return;
+        }
+        switch (point.type) {
+            case 'profile':
+            case 'rating': {
+                if (!salla.config.isUser()) {
+                    e.preventDefault();
+                    closeModals(() => salla.event.dispatch('login::open'));
+                    return;
+                }
+                return;
+            }
+            case 'share': {
+                if (!salla.config.isUser()) {
+                    e.preventDefault();
+                    closeModals(() => salla.event.dispatch('login::open'));
+                    return;
+                }
+                e.preventDefault();
+                this.handleShareAction(e, point, salla.lang.get('pages.loyalty_program.copied'));
+                return;
+            }
+            default: {
+                // all other types are handled the default way (e.g. navigate to a URL)
+            }
+        }
+    }
+    getSubHeading(point) {
+        switch (point.type) {
+            case 'share':
+                return (h("div", { class: "s-loyalty-program-point-subheading" }, h("h2", null, salla.lang.get('pages.loyalty_program.how_to_start')), h("p", null, salla.lang.get('pages.loyalty_program.three_simple_steps'))));
+            case 'pos':
+                return (h("div", { class: "s-loyalty-program-point-subheading" }, h("h2", null, salla.lang.get('pages.loyalty_program.how_to_start')), h("p", null, salla.lang.get('pages.loyalty_program.two_simple_steps'))));
+            default:
+                return '';
+        }
+    }
+    getTrailingContent(point) {
+        switch (point.type) {
+            case 'first_order':
+            case 'profile':
+                return h("p", { class: "s-loyalty-program-points-completed-note" }, salla.lang.get('pages.loyalty_program.one_time_points'));
+            default:
+                return point.is_completed ? h("p", { class: "s-loyalty-program-points-completed-note" }, salla.lang.get('pages.loyalty_program.one_time_points')) : '';
+        }
+    }
+    render() {
+        return (h("div", { key: 'e48e7e3f5e8327b840c3d85685e0b71bffefd855' }, h("div", { key: 'bf0defb51f62aeb2830261d5daed101c55f84d7b', onClick: () => closeModals(() => this.modal.open()), class: "s-loyalty-program-point-wrapper" }, h("div", { key: '0e6121e7f7daeec3a96bdaaa2427978f4215fb16', class: "s-loyalty-program-circle-base s-loyalty-program-circle-size-sm s-loyalty-program-circle-variant-fill" }, h("span", { key: '8422ec6e483f05d514170df5916436a9126d4237', class: this.point.icon })), h("div", { key: '928d8ed9a8442dd20b218a7713ad6e493d88bc7d', class: "s-loyalty-program-points-badge-mobile" }, h("salla-badge", { key: '35fc26961a50c707d29a726405a2f2c48c5a296f', size: "xs", bg: "transparent" }, h("span", { key: 'd2b06eceeec70a9561d3612f337035dbc404bf2d', innerHTML: SIGift }), formattedPointsJsx(this.point))), h("div", { key: '9ca25c5c22d499bee7bd03c83b221deecaa385c7', class: "s-loyalty-program-points-badge-desktop" }, h("salla-badge", { key: 'bbf54dcce2af313a735de53f3297911b0a28433f', size: "sm", bg: "transparent" }, h("span", { key: '6832cb1bf6bf23e1c3e221e0e853b87bdf059b76', innerHTML: SIGift }), formattedPointsJsx(this.point))), h("p", { key: '0dab348c2d73b95d2a7054130dd8c4414b588a42', class: "s-loyalty-program-point-description" }, this.point.name), this.point.is_completed ?
+            h("a", { class: {
+                    's-loyalty-program-points-action': true,
+                    's-loyalty-program-points-action-completed': this.point.is_completed,
+                    's-loyalty-program-points-action-incomplete': !this.point.is_completed,
+                } }, salla.lang.get('pages.loyalty_program.completed'))
+            : h("a", { href: this.point.url, onClick: e => this.handleAction(e, this.point), class: {
+                    's-loyalty-program-points-action': true,
+                    's-loyalty-program-points-action-completed': this.point.is_completed,
+                    's-loyalty-program-points-action-incomplete': !this.point.is_completed,
+                } }, this.point.description)), h("salla-modal", { key: '209bd22b0a09f173dd74a79b0ab2dcf0c41b98d1', ref: modal => this.modal = modal, class: "s-loyalty-program-point-modal s-loyalty-program-modal", width: window.matchMedia('(min-width: 768px)').matches ? 'md' : 'sm', noPadding: true }, h("div", { key: 'adf4dc82940f41c943f095519e43e029602554e0', class: "s-loyalty-program-points-modal-header" }, h("h1", { key: '88d0babfddde45978760c71825ad01e81b9d7b70', class: "s-loyalty-program-points-modal-info" }, this.point.name)), h("div", { key: '387201fe515701d3e39595569cd5dd858dbe41e2', class: "s-loyalty-program-modal-scrollable-content" }, h("div", { key: '8460fd33cedcd3c78d299fd1f4f9dfb2d817663e', class: "s-loyalty-program-points-modal-main" }, h("div", { key: 'dc5840eb12f44f395fac4b2fa41616897ce3b804', class: "s-loyalty-program-circle-base s-loyalty-program-circle-size-xl s-loyalty-program-circle-variant-fill" }, h("span", { key: 'dab41d922110962182ff4a1ec53a7f01fde7400c', class: this.point.icon })), h("salla-badge", { key: 'e7947363e9dacb42eb03b97532ed1b6b3a606d73', size: "sm", bg: "light" }, h("span", { key: 'f567bdf3fb75d7bc28d9eb78a6b11dcc74f7e608', innerHTML: SIGift }), h("span", { key: 'd8fc1f40a225001a90ad6213f924520f3a3fbebc', class: "s-loyalty-program-points-badge-points" }, formattedPointsJsx(this.point)))), this.getSubHeading(this.point), h("div", { key: '12e2bf5a9aab51c3bf1c0ec10395751beaf846a3', class: "s-loyalty-program-points-modal-details" }, h("div", { key: '17dc3ff458f8cfea3028a47e54df522310cc0b1d', class: "s-loyalty-program-points-chains-wrapper" }, h("ul", { key: '4b1b0700e1d260a57fe7093421cb8faa8e68d024', class: "s-loyalty-program-points-chain-list" }, !!this.point.steps && Object.keys(this.point.steps).length > 0
+            ? Object.values(this.point.steps).map((step, idx) => {
+                const stepsArray = Object.values(this.point.steps);
+                const isLastItem = idx === stepsArray.length - 1;
+                return (h("li", { class: "s-loyalty-program-points-chain-item" }, h("div", { class: "s-loyalty-program-points-chain-icon" }, h("div", { class: "s-loyalty-program-circle-base s-loyalty-program-circle-size-xs s-loyalty-program-circle-variant-outline-primary" }, sicons[step.key]), !isLastItem && h("div", { class: "s-loyalty-program-points-chain-line" })), h("div", { class: "s-loyalty-program-points-chain-content" }, h("salla-badge", { size: "xs", color: "primary-900", bg: "primary-100" }, h("span", null, salla.lang.get(`pages.loyalty_program.step_${idx + 1}`))), h("p", { class: "s-loyalty-program-points-chain-description" }, step.title || step.name))));
+            })
+            : this.point.conditions?.map((condition, idx) => {
+                const isLastItem = idx === this.point.conditions.length - 1;
+                return (h("li", { class: "s-loyalty-program-points-chain-item" }, h("div", { class: "s-loyalty-program-points-chain-icon" }, h("div", { class: "s-loyalty-program-circle-base s-loyalty-program-circle-size-xs s-loyalty-program-circle-variant-outline-primary" }, sicons[condition.key]), !isLastItem && h("div", { class: "s-loyalty-program-points-chain-line" })), h("div", { class: "s-loyalty-program-points-chain-content" }, h("salla-badge", { size: "xs", color: "primary-900", bg: "primary-100" }, h("span", { innerHTML: SIGift }), formattedPointsJsx(condition.points ?? 0)), h("p", { class: "s-loyalty-program-points-chain-description" }, condition.name))));
+            }))), this.getTrailingContent(this.point)), !this.point.branches?.length ? '' : h("div", { class: "s-loyalty-program-points-modal-list" }, h("div", { class: "s-loyalty-program-point-details-branches" }, h("h2", null, salla.lang.get('pages.loyalty_program.branches')), h("p", null, salla.lang.get('pages.loyalty_program.shop_from_branches'))), h("div", { class: "s-loyalty-program-points-modal-list-wrapper" }, h("ul", null, this.point.branches.map((branch) => (h("li", { class: "s-loyalty-program-points-modal-list-item" }, h("p", null, branch.name), h("salla-badge", { size: "sm", bg: "transparent" }, h("span", { innerHTML: SIGift }), h("a", { href: branch.location ? `https://www.google.com/maps?q=${branch.location.lat},${branch.location.lon}` : '#', target: "_blank", rel: "noopener noreferrer" }, branch.address_description))))))))), h("div", { key: '8984c9e7f20a766c70c25a85b752a2f61fd9c490', class: "s-loyalty-program-points-modal-action" }, h("a", { key: '6ee995bf10cd3f9efac2baac8413e7405981389f', href: this.point.url, onClick: (e) => (e.stopPropagation(), this.handleAction(e, this.point)), class: {
+                's-loyalty-program-points-action': true,
+                's-loyalty-program-points-action-completed': this.point.is_completed,
+                's-loyalty-program-points-action-incomplete': !this.point.is_completed,
+            } }, this.point.is_completed ? salla.lang.get('pages.loyalty_program.completed') : this.point.description)))));
+    }
+    static get is() { return "salla-loyalty-point"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["salla-loyalty-program.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["salla-loyalty-program.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "point": {
+                "type": "unknown",
+                "attribute": "point",
+                "mutable": false,
+                "complexType": {
+                    "original": "Point",
+                    "resolved": "Point",
+                    "references": {
+                        "Point": {
+                            "location": "import",
+                            "path": "./interfaces",
+                            "id": "src/components/salla-loyalty-program/interfaces.ts::Point"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}