@salla.sa/twilight-components 2.14.401 → 2.14.403

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

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

@@ -1,78 +1,95 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { Host, h } from "@stencil/core";
-import GiftIcon from "../../assets/svg/gift.svg";
-const formatDate = (timestamp) => {
-    if (!timestamp)
-        return '';
-    return new Date(Number(timestamp)).toLocaleDateString(salla.lang.locale, {
-        weekday: 'long',
-        year: 'numeric',
-        month: 'long',
-        day: 'numeric',
-        hour: 'numeric',
-    });
+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;
 };
-const translateKey = (key) => {
-    if (!key)
-        return '';
-    try {
-        const k = key.toLowerCase();
-        const translation = salla.lang.get(`pages.loyalty_program.${k}`);
-        return translation === `pages.loyalty_program.${k}` ? key : translation;
-    }
-    catch {
-        return key;
-    }
+import { h } from "@stencil/core";
+import { setTranslations } from "./translations";
+import { closeModals, nearestLowerMultiple, normalizeLoyaltyData } from "./functions";
+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 SIUserAdd from "../../assets/svg/user-add.svg";
+import SIGiftSharing from "../../assets/svg/gift-sharing.svg";
+import SICartUpload from "../../assets/svg/cart-upload.svg";
+import SIGift from "../../assets/svg/gift.svg";
+import { TrackedPromise } from "../../Helpers/tracked-promise";
+import anime from "animejs";
+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 SallaWalletTable {
+export class SallaLoyaltyProgram {
     constructor() {
-        this.loyaltyPointsArray = [];
-        this.isLoadingLoyalty = false;
-        this.nextPageUrlLoyalty = '';
-        this.handleClick = () => {
-            this.loadMoreLoyaltyPoints();
+        /**
+         * prize to show in details or exchange modals
+         */
+        this.currentPrize = null;
+        /**
+         * collapsed state of points list
+         */
+        this.collapsed = true;
+        this.animatedPoints = 0;
+        this.handleExchangeSucceeded = () => {
+            this.points();
+            this.program();
         };
     }
     componentWillLoad() {
-        return salla.onReady().then(() => {
-            this.loadLoyaltyPoints();
-        });
+        return salla.onReady()
+            .then(() => salla.lang.onLoaded())
+            .then(() => setTranslations())
+            .then(() => {
+            this.program();
+            this.points();
+            salla.event.on('loyalty::exchange.succeeded', this.handleExchangeSucceeded);
+        })
+            .catch((error) => salla.logger.error(error));
     }
-    async loadLoyaltyPoints() {
-        this.isLoadingLoyalty = true;
-        try {
-            let url = `/balance/points?page=1`;
-            let resp = await salla.api.request(url);
-            this.loyaltyPointsArray = resp.data;
-            this.nextPageUrlLoyalty = resp.cursor.next;
-        }
-        catch (error) {
-            console.error('Error loading loyalty points transactions', error);
-        }
-        finally {
-            this.isLoadingLoyalty = false;
-        }
+    disconnectedCallback() {
+        salla.event.off('loyalty::exchange.succeeded', this.handleExchangeSucceeded);
     }
-    async loadMoreLoyaltyPoints() {
-        if (!this.nextPageUrlLoyalty)
-            return;
-        this.isLoadingLoyalty = true;
-        try {
-            let resp = await salla.api.request(this.nextPageUrlLoyalty);
-            this.loyaltyPointsArray = [...this.loyaltyPointsArray, ...resp.data];
-            this.nextPageUrlLoyalty = resp.cursor?.next || '';
-        }
-        catch (error) {
-            console.error('Error loading more loyalty points', error);
-        }
-        finally {
-            this.isLoadingLoyalty = false;
-        }
+    getOutlineItem(number, title, description) {
+        const icons = {
+            1: h("span", { innerHTML: SIUserAdd }),
+            2: h("span", { innerHTML: SIGiftSharing }),
+            3: h("span", { innerHTML: SICartUpload }),
+        };
+        return (h("li", { class: "s-loyalty-program-item" }, h("div", { class: "s-loyalty-program-content" }, h("span", { class: "s-loyalty-program-icon-container" }, h("span", { class: "s-loyalty-program-text-gradient" }, number), h("span", { class: "s-loyalty-program-icon" }, icons[number])), h("div", { class: "s-loyalty-program-title" }, title), h("div", { class: "s-loyalty-program-description" }, description))));
     }
     render() {
-        return (h(Host, { key: '4a8cb15322b005a124eb5792044d6435fd52922e' }, h("div", { key: '54a08cfdb24116455b8c137d20ec5ef22a34ff85' }, this.isLoadingLoyalty ? (h("salla-loading", null)) : (h("div", null, this.loyaltyPointsArray.length > 0 ? (h("div", null, h("table", { class: "s-loyalty-program-table" }, h("thead", { class: "s-loyalty-program-table-head" }, h("tr", { class: "s-loyalty-program-table-head-tr" }, h("th", { scope: "col", class: "s-loyalty-program-table-head-tr-th" }, salla.lang.get('pages.wallet.points')), h("th", { scope: "col", class: "s-loyalty-program-table-head-tr-th" }, salla.lang.get('pages.wallet.date')), h("th", { scope: "col", class: "s-loyalty-program-table-head-tr-th" }, salla.lang.get('pages.wallet.expiry_date')), h("th", { scope: "col", class: "s-loyalty-program-table-head-tr-th" }, salla.lang.get('common.elements.note')), h("th", { scope: "col", class: "s-loyalty-program-table-head-tr-th" }, salla.lang.get('common.elements.status')))), h("tbody", { class: "s-loyalty-program-table-tbody" }, this.loyaltyPointsArray.map(point => (h("tr", { class: "s-loyalty-program-table-tbody-tr" }, h("td", { class: "s-loyalty-program-table-tbody-tr-td" }, point?.type === 'plus' ? '+' : '', point?.points || '', " ", salla.lang.get('pages.loyalty_program.point')), h("td", { class: "s-loyalty-program-table-tbody-tr-td" }, formatDate(point?.created_at ? Number(point.created_at) * 1000 : undefined)), h("td", { class: "s-loyalty-program-table-tbody-tr-td" }, formatDate(point?.points_expire_date)), h("td", { class: "s-loyalty-program-table-tbody-tr-td" }, translateKey(point?.key)), h("td", { class: "s-loyalty-program-table-tbody-tr-td" }, translateKey(point?.status_key))))))), h("div", { class: "s-infinite-scroll-wrapper" }, !!this.nextPageUrlLoyalty && (h("salla-button", { onClick: this.handleClick, loading: this.isLoadingLoyalty }, salla.lang.get('common.elements.load_more')))))) : (h("div", null, h("div", { class: "s-loyalty-program-table-empty-state" }, h("span", { innerHTML: GiftIcon }), h("div", { class: "s-loyalty-program-table-placeholder-title" }, salla.lang.get('pages.loyalty_program.no_loyality_points_title')), h("div", { class: "s-loyalty-program-table-placeholder-sub-title" }, salla.lang.get('pages.loyalty_program.no_loyality_points_sub_title'))))))))));
+        if (this.program.status === 'error') {
+            return h("p", null, salla.lang.get('common.errors.error_occured'));
+        }
+        const displayedPoints = this.program.data.points.slice(0, this.collapsed ? nearestLowerMultiple(this.program.data.points.length) : this.program.data.points.length);
+        const prizesGroups = this.program.data.prizes;
+        const prizesCount = this.program.data.prizes_count;
+        return (h("div", { class: "s-loyalty-program-container" }, h("salla-loyalty-hero", { name: this.program.data.name, description: this.program.data.description, image: this.program.data.image }, salla.config.isUser()
+            ? h("div", { slot: "crosspoint", class: "s-loyalty-program-profile-wrapper" }, h("div", { class: "s-loyalty-program-profile-container" }, h("div", { class: "s-loyalty-program-profile-points-section" }, h("h2", { class: "s-loyalty-program-profile-label" }, salla.lang.get('pages.loyalty_program.your_points')), h("p", { class: "s-loyalty-program-profile-points" }, h("span", { class: "s-loyalty-program-profile-points-value" }, !!this.animatedPoints ? this.animatedPoints : this.points.data), "\u00A0", salla.lang.get('pages.loyalty_program.point'))), h("div", { class: "s-loyalty-program-profile-icon" }, h("span", { innerHTML: SIGift }))))
+            : h("button", { slot: "action", onClick: () => salla.event.dispatch('login::open'), class: {
+                    's-loyalty-program-login-action': true,
+                    's-loyalty-program-login-action-dark': !this.program.data.image,
+                    's-loyalty-program-login-action-light': !!this.program.data.image,
+                } }, salla.lang.get('blocks.header.login'))), h("div", { class: "s-loyalty-program-outline-section" }, h("section", { class: "s-loyalty-program-section" }, h("header", { class: "s-loyalty-program-header" }, h("h1", { class: "s-loyalty-program-main-title" }, salla.lang.get('pages.loyalty_program.how_to_start')), h("p", { class: "s-loyalty-program-subtitle" }, salla.lang.get('pages.loyalty_program.three_simple_steps'))), h("ol", { class: "s-loyalty-program-list" }, this.getOutlineItem(1, salla.lang.get('pages.loyalty_program.register'), salla.lang.get('pages.loyalty_program.create_account')), this.getOutlineItem(2, salla.lang.get('pages.loyalty_program.earn_points'), salla.lang.get('pages.loyalty_program.complete_tasks')), this.getOutlineItem(3, salla.lang.get('pages.loyalty_program.redeem_rewards'), salla.lang.get('pages.loyalty_program.enjoy_rewards'))))), h("div", { class: "s-loyalty-program-points-wrapper" }, h("section", { class: "s-loyalty-program-points-section" }, h("header", { class: "s-loyalty-program-points-header" }, h("h1", { class: "s-loyalty-program-points-title" }, this.program.data.promotion_title), h("p", { class: "s-loyalty-program-points-description" }, this.program.data.promotion_description)), h("div", { class: "s-loyalty-program-points-spacer" }), h("ul", { class: {
+                's-loyalty-program-points-list-one': this.program.data.points.length === 1,
+                's-loyalty-program-points-list-two': this.program.data.points.length === 2,
+                's-loyalty-program-points-list-multi': this.program.data.points.length > 2,
+            } }, displayedPoints.map(point => (h("li", null, h("salla-loyalty-point", { point: point }))))), h("div", { class: "s-loyalty-program-points-spacer" }), nearestLowerMultiple(this.program.data.points.length) !== this.program.data.points.length && h("button", { class: "s-loyalty-program-points-more-button", onClick: () => this.collapsed = !this.collapsed }, this.collapsed
+            ? h("span", null, salla.lang.get('pages.loyalty_program.show_more'), "\u00A0\u00A0", h("span", { style: { fontSize: '1.2rem', fontWeight: '300' } }, "+"))
+            : h("span", null, salla.lang.get('pages.loyalty_program.show_less'), "\u00A0\u00A0", h("span", { style: { fontSize: '1.2rem', fontWeight: '300' } }, "-"))))), this.program.status !== 'success' ? '' : h("div", { class: "s-loyalty-program-rewards-container s-loyalty-program-slider-arrows-edges" }, h("section", { class: {
+                's-loyalty-program-tabs-hider': prizesGroups.length <= 2 || prizesCount <= 4,
+            } }, h("h1", { class: "s-loyalty-program-rewards-heading-mobile" }, salla.lang.get('pages.loyalty_program.rewards')), h("salla-tabs", null, h("div", { slot: "header", class: "s-loyalty-program-rewards-tab-items" }, prizesGroups.map((group) => (h("salla-tab-header", { slot: "header", name: group.type }, sicons[group.type], h("span", null, group.title))))), h("h1", { slot: "header", class: "s-loyalty-program-rewards-heading-desktop" }, salla.lang.get('pages.loyalty_program.rewards')), 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":4,"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-program"; }
     static get originalStyleUrls() {
@@ -87,9 +104,31 @@ export class SallaWalletTable {
     }
     static get states() {
         return {
-            "loyaltyPointsArray": {},
-            "isLoadingLoyalty": {},
-            "nextPageUrlLoyalty": {}
+            "currentPrize": {},
+            "collapsed": {},
+            "animatedPoints": {}
         };
     }
 }
+__decorate([
+    TrackedPromise(async function () {
+        const { data } = await salla.loyalty.getProgram();
+        return normalizeLoyaltyData(data);
+    }, { initialData: { points: [], prizes: [], prizes_count: 0 } })
+], SallaLoyaltyProgram.prototype, "program", void 0);
+__decorate([
+    TrackedPromise(async function () {
+        const { data } = await salla.loyalty.getPoints();
+        anime({
+            targets: { value: 0 },
+            value: data.points ?? 0,
+            round: 1,
+            easing: 'easeOutQuad',
+            duration: 2000,
+            update: (anim) => {
+                this.animatedPoints = anim.animations[0].currentValue;
+            }
+        });
+        return data.points;
+    })
+], SallaLoyaltyProgram.prototype, "points", void 0);

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

@@ -0,0 +1,166 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { h } from "@stencil/core";
+import { closeModals } from "./functions";
+import SIGift from "../../assets/svg/gift.svg";
+export class SallaLoyaltyReward {
+    constructor() {
+        this.size = 'md';
+        this.isActionClickable = (prize) => {
+            switch (prize.key?.toLowerCase()) {
+                case 'free_product':
+                    return prize.is_product_available;
+                default:
+                    return true;
+            }
+        };
+        this.handleActionArea = () => {
+            this.rewardModalOpen.emit(this.prize);
+        };
+        this.handleAction = () => {
+            if (!this.isActionClickable(this.prize))
+                return;
+            if (!salla.config.isUser()) {
+                closeModals(() => salla.event.dispatch('login::open'));
+                return;
+            }
+            else {
+                this.confirmModalOpen.emit(this.prize);
+            }
+        };
+    }
+    render() {
+        return (h("div", { key: '38c63e250c45badf03516c87496619152b9a0af8', class: {
+                's-loyalty-program-reward-container': true,
+                's-loyalty-program-reward-xs': this.size === 'xs',
+            } }, h("div", { key: '93e11a5c458aa3112b00bea4bc845733d8bf4415', onClick: this.handleActionArea, role: "button" }, h("div", { key: '67f5cfe1a3551832548d95bda9c6bcc6cdd26119', class: "s-loyalty-program-reward-img" }, h("img", { key: '36f6dc13da2b7c844d2318d4e9bafeb96d960f11', src: this.prize.image, class: "s-loyalty-program-rewards-img", alt: "" })), h("div", { key: 'c953cfeebaabdad22fba498903936e170aadcebe', class: "s-loyalty-program-reward-content" }, h("div", { key: '68f33aba783ffaef38ea9e4a3f9063b2f68bb2b1', class: "s-loyalty-program-reward-points" }, h("salla-badge", { key: 'bdac8babbf1bbabeec37e92053c4c7eab178a06f', size: "xs" }, h("span", { key: '367f3f154a6079781cece4018337b09996229001', innerHTML: SIGift }), h("span", { key: 'fd8cdd6bafe8a8f5f45f7a4e6df2f074ab2b5961', class: "s-loyalty-program-rewards-points" }, this.prize.cost_points, " ", salla.lang.get('pages.loyalty_program.points')))), h("div", { key: '84f6dbc80ecaa12ab9dacf48ec289bb3f5bdfc84', class: "s-loyalty-program-reward-title" }, h("span", { key: '1505f38884417eee9f266ab3ddb2f57096f6d0da' }, this.group)), h("div", { key: '82ced1df7118958153868c15c193ac03783dc383', class: "s-loyalty-program-reward-name" }, h("div", { key: 'a853fc37628c02ffe064608f6e52725d664fc259', class: "s-loyalty-program-rewards-name", id: `prize-${this.prize.id}` }, this.prize.name)))), h("div", { key: '584d6db1edfafc846eb8908d2762483d5e590296', class: "p-4" }, h("button", { key: 'ac0962db5b5d3121b4c6197c4c378db76a963950', onClick: this.handleAction, disabled: !this.isActionClickable(this.prize), class: {
+                's-loyalty-program-rewards-action-base': true,
+                's-loyalty-program-rewards-action-on': this.isActionClickable(this.prize),
+                's-loyalty-program-rewards-action-off': !this.isActionClickable(this.prize),
+            } }, this.isActionClickable(this.prize) ? salla.lang.get('pages.loyalty_program.redeem_reward') : salla.lang.get('pages.loyalty_program.out_of_stock')))));
+    }
+    static get is() { return "salla-loyalty-reward"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["salla-loyalty-program.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["salla-loyalty-program.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "attribute": "size",
+                "mutable": false,
+                "complexType": {
+                    "original": "'xs' | 'md'",
+                    "resolved": "\"md\" | \"xs\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'md'"
+            },
+            "prize": {
+                "type": "unknown",
+                "attribute": "prize",
+                "mutable": false,
+                "complexType": {
+                    "original": "Prize",
+                    "resolved": "Prize",
+                    "references": {
+                        "Prize": {
+                            "location": "import",
+                            "path": "./interfaces",
+                            "id": "src/components/salla-loyalty-program/interfaces.ts::Prize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "group": {
+                "type": "string",
+                "attribute": "group",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "rewardModalOpen",
+                "name": "rewardModalOpen",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "Prize",
+                    "resolved": "Prize",
+                    "references": {
+                        "Prize": {
+                            "location": "import",
+                            "path": "./interfaces",
+                            "id": "src/components/salla-loyalty-program/interfaces.ts::Prize"
+                        }
+                    }
+                }
+            }, {
+                "method": "confirmModalOpen",
+                "name": "confirmModalOpen",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "Prize",
+                    "resolved": "Prize",
+                    "references": {
+                        "Prize": {
+                            "location": "import",
+                            "path": "./interfaces",
+                            "id": "src/components/salla-loyalty-program/interfaces.ts::Prize"
+                        }
+                    }
+                }
+            }];
+    }
+}