@salla.sa/twilight-components/dist/components/salla-loyalty-program.js

Salla Web Component

/*!
 * Crafted with ❤ by Salla
 */
import { h, proxyCustomElement, HTMLElement } from '@stencil/core/internal/client';
import { s as setTranslations } from './translations.js';
import { n as normalizeLoyaltyData, a as nearestLowerMultiple, c as closeModals } from './functions.js';
import { S as SIPercentage, a as SILayoutGrid } from './percentage.js';
import { S as SIShipping } from './shipping.js';
import { C as Cart2 } from './cart2.js';
import { a as SIUserAdd, d as defineCustomElement$h } from './salla-loyalty-point2.js';
import { S as SIGiftSharing } from './gift-sharing.js';
import { l as loyaltyProgramIcon } from './gift.js';
import { T as TrackedPromise } from './tracked-promise.js';
import { a as anime } from './anime.es.js';
import { d as defineCustomElement$n } from './salla-add-product-button2.js';
import { d as defineCustomElement$m } from './salla-badge2.js';
import { d as defineCustomElement$l } from './salla-button2.js';
import { d as defineCustomElement$k } from './salla-count-down2.js';
import { d as defineCustomElement$j } from './salla-loading2.js';
import { d as defineCustomElement$i } from './salla-loyalty-hero2.js';
import { d as defineCustomElement$g } from './salla-modal2.js';
import { d as defineCustomElement$f } from './salla-product-availability2.js';
import { d as defineCustomElement$e } from './salla-product-card2.js';
import { d as defineCustomElement$d } from './salla-products-slider2.js';
import { d as defineCustomElement$c } from './salla-progress-bar2.js';
import { d as defineCustomElement$b } from './salla-quick-buy2.js';
import { d as defineCustomElement$a } from './salla-reward-action2.js';
import { d as defineCustomElement$9 } from './salla-reward-card2.js';
import { d as defineCustomElement$8 } from './salla-reward-details2.js';
import { d as defineCustomElement$7 } from './salla-reward-exchange2.js';
import { d as defineCustomElement$6 } from './salla-slider2.js';
import { d as defineCustomElement$5 } from './salla-tab-content2.js';
import { d as defineCustomElement$4 } from './salla-tab-header2.js';
import { d as defineCustomElement$3 } from './salla-tabs2.js';
import { d as defineCustomElement$2 } from './salla-tel-input2.js';

var SICartUpload = `<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>cart-upload</title>
<path d="M14.545 7.669l3.121-2.732v9.729c0 0.736 0.597 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-9.728l3.121 2.732c0.253 0.22 0.567 0.329 0.879 0.329 0.371 0 0.74-0.155 1.004-0.455 0.485-0.555 0.429-1.396-0.125-1.881l-5.333-4.667c-0.503-0.44-1.253-0.44-1.756 0l-5.333 4.667c-0.555 0.484-0.611 1.327-0.125 1.881 0.484 0.552 1.325 0.609 1.881 0.124zM30.647 5.371c-0.713-0.171-1.436 0.267-1.609 0.983l-2.744 11.363c-0.171 0.568-0.684 0.951-1.277 0.951h-12.136c-0.563 0-1.067-0.356-1.256-0.885l-6.035-16.896c-0.189-0.531-0.692-0.885-1.256-0.885h-2.667c-0.736 0-1.333 0.597-1.333 1.333s0.597 1.333 1.333 1.333h1.727l5.719 16.012c0.567 1.588 2.081 2.655 3.768 2.655h12.136c1.78 0 3.32-1.145 3.851-2.92l2.763-11.433c0.173-0.716-0.267-1.436-0.983-1.609zM13.667 24c-2.205 0-4 1.795-4 4s1.795 4 4 4 4-1.795 4-4-1.795-4-4-4zM13.667 29.333c-0.735 0-1.333-0.599-1.333-1.333s0.599-1.333 1.333-1.333 1.333 0.599 1.333 1.333-0.599 1.333-1.333 1.333zM24.333 24c-2.205 0-4 1.795-4 4s1.795 4 4 4 4-1.795 4-4-1.795-4-4-4zM24.333 29.333c-0.735 0-1.333-0.599-1.333-1.333s0.599-1.333 1.333-1.333 1.333 0.599 1.333 1.333-0.599 1.333-1.333 1.333z"></path>
</svg>
`;

const sallaLoyaltyProgramCss = "";

var __decorate = (undefined && undefined.__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 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: Cart2 }),
};
const SallaLoyaltyProgram$1 = /*@__PURE__*/ proxyCustomElement(class SallaLoyaltyProgram extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        /**
         * 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(() => salla.lang.onLoaded())
            .then(() => setTranslations())
            .then(() => {
            this.program();
            this.points();
            salla.event.on('loyalty::exchange.succeeded', this.handleExchangeSucceeded);
        })
            .catch((error) => salla.logger.error(error));
    }
    disconnectedCallback() {
        salla.event.off('loyalty::exchange.succeeded', this.handleExchangeSucceeded);
    }
    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() {
        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: loyaltyProgramIcon }))))
            : 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 style() { return sallaLoyaltyProgramCss; }
}, [0, "salla-loyalty-program", {
        "currentPrize": [32],
        "collapsed": [32],
        "animatedPoints": [32]
    }]);
__decorate([
    TrackedPromise(async function () {
        const { data } = await salla.loyalty.getProgram();
        return normalizeLoyaltyData(data);
    }, { initialData: { points: [], prizes: [], prizes_count: 0 } })
], SallaLoyaltyProgram$1.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$1.prototype, "points", void 0);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["salla-loyalty-program", "salla-add-product-button", "salla-badge", "salla-button", "salla-count-down", "salla-loading", "salla-loyalty-hero", "salla-loyalty-point", "salla-modal", "salla-product-availability", "salla-product-card", "salla-products-slider", "salla-progress-bar", "salla-quick-buy", "salla-reward-action", "salla-reward-card", "salla-reward-details", "salla-reward-exchange", "salla-slider", "salla-tab-content", "salla-tab-header", "salla-tabs", "salla-tel-input"];
    components.forEach(tagName => { switch (tagName) {
        case "salla-loyalty-program":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, SallaLoyaltyProgram$1);
            }
            break;
        case "salla-add-product-button":
            if (!customElements.get(tagName)) {
                defineCustomElement$n();
            }
            break;
        case "salla-badge":
            if (!customElements.get(tagName)) {
                defineCustomElement$m();
            }
            break;
        case "salla-button":
            if (!customElements.get(tagName)) {
                defineCustomElement$l();
            }
            break;
        case "salla-count-down":
            if (!customElements.get(tagName)) {
                defineCustomElement$k();
            }
            break;
        case "salla-loading":
            if (!customElements.get(tagName)) {
                defineCustomElement$j();
            }
            break;
        case "salla-loyalty-hero":
            if (!customElements.get(tagName)) {
                defineCustomElement$i();
            }
            break;
        case "salla-loyalty-point":
            if (!customElements.get(tagName)) {
                defineCustomElement$h();
            }
            break;
        case "salla-modal":
            if (!customElements.get(tagName)) {
                defineCustomElement$g();
            }
            break;
        case "salla-product-availability":
            if (!customElements.get(tagName)) {
                defineCustomElement$f();
            }
            break;
        case "salla-product-card":
            if (!customElements.get(tagName)) {
                defineCustomElement$e();
            }
            break;
        case "salla-products-slider":
            if (!customElements.get(tagName)) {
                defineCustomElement$d();
            }
            break;
        case "salla-progress-bar":
            if (!customElements.get(tagName)) {
                defineCustomElement$c();
            }
            break;
        case "salla-quick-buy":
            if (!customElements.get(tagName)) {
                defineCustomElement$b();
            }
            break;
        case "salla-reward-action":
            if (!customElements.get(tagName)) {
                defineCustomElement$a();
            }
            break;
        case "salla-reward-card":
            if (!customElements.get(tagName)) {
                defineCustomElement$9();
            }
            break;
        case "salla-reward-details":
            if (!customElements.get(tagName)) {
                defineCustomElement$8();
            }
            break;
        case "salla-reward-exchange":
            if (!customElements.get(tagName)) {
                defineCustomElement$7();
            }
            break;
        case "salla-slider":
            if (!customElements.get(tagName)) {
                defineCustomElement$6();
            }
            break;
        case "salla-tab-content":
            if (!customElements.get(tagName)) {
                defineCustomElement$5();
            }
            break;
        case "salla-tab-header":
            if (!customElements.get(tagName)) {
                defineCustomElement$4();
            }
            break;
        case "salla-tabs":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "salla-tel-input":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}
defineCustomElement$1();

const SallaLoyaltyProgram = SallaLoyaltyProgram$1;
const defineCustomElement = defineCustomElement$1;

export { SallaLoyaltyProgram, defineCustomElement };