@salla.sa/twilight-components 2.14.220 → 2.14.222

package/dist/collection/components/salla-tiered-offer/salla-tiered-offer.js

@@ -0,0 +1,288 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { Host, h } from "@stencil/core";
+import { DiscountType } from "./interfaces";
+import { TIERED_OFFER_CONFIG } from "./constants";
+import { TierUtils } from "./utils";
+export class SallaTieredOffer {
+    constructor() {
+        this.currentTierIndex = 0;
+        this.canRender = false;
+        this.isLoading = false;
+        this.handleTabClick = (tierName) => {
+            this.activeTabTier = tierName;
+        };
+        salla.lang.onLoaded(() => {
+            this.loyaltyProgramText = salla.lang.get('blocks.tiered_offer.program_title');
+            this.currentTierText = salla.lang.get('blocks.tiered_offer.current_tier');
+            this.discountText = salla.lang.get('blocks.tiered_offer.discount');
+            this.benefitText = salla.lang.get('blocks.tiered_offer.tier_description');
+        });
+    }
+    async componentWillLoad() {
+        try {
+            await salla.onReady();
+            if (!this.checkFeatureEnabled()) {
+                return;
+            }
+            if (!this.checkCartExists()) {
+                return;
+            }
+            this.isLoading = true;
+            const offerData = await this.fetchTieredOfferData();
+            if (!offerData) {
+                return;
+            }
+            this.initializeComponent(offerData);
+        }
+        catch (error) {
+            this.canRender = false;
+            salla.logger.warn('salla-tiered-offer:: ', error);
+        }
+        finally {
+            this.isLoading = false;
+        }
+    }
+    checkFeatureEnabled() {
+        var _a;
+        return (_a = salla.config.get('store.features')) === null || _a === void 0 ? void 0 : _a.includes('tiered-offer');
+    }
+    checkCartExists() {
+        var _a, _b;
+        return !!((_b = (_a = salla.storage.get("cart")) === null || _a === void 0 ? void 0 : _a.summary) === null || _b === void 0 ? void 0 : _b.count);
+    }
+    validateCouponCompatibility(offerData, cartCoupon) {
+        var _a;
+        // If coupon is applied but offer doesn't support coupons, widget should be hidden
+        return !(cartCoupon && !((_a = offerData.details) === null || _a === void 0 ? void 0 : _a.applied_with_coupon));
+    }
+    async fetchTieredOfferData() {
+        var _a;
+        try {
+            const { data } = await salla.api.cart.offers();
+            const tieredOffer = data.find(offer => offer.type === "tiered_offer");
+            if (!tieredOffer) {
+                return null;
+            }
+            // Hide widget if coupon is applied and offer doesn't support coupons
+            if (!this.validateCouponCompatibility(tieredOffer, (_a = salla.storage.get("cart")) === null || _a === void 0 ? void 0 : _a.coupon)) {
+                this.canRender = false;
+                return null;
+            }
+            return tieredOffer;
+        }
+        catch (error) {
+            throw error;
+        }
+    }
+    initializeComponent(apiOfferData) {
+        var _a;
+        this.apiOfferData = apiOfferData;
+        // Map tiered details data to component format
+        this.tieredOfferData = this.mapApiDataToTiers(this.apiOfferData);
+        this.loyaltyProgramText = this.apiOfferData.title || this.loyaltyProgramText;
+        // Find current tier index based on current_value from API
+        const currentValue = ((_a = this.apiOfferData.details) === null || _a === void 0 ? void 0 : _a.current_value) || 0;
+        const currentTierIndex = this.findCurrentTierIndex(currentValue);
+        // Only render if user has reached at least the first tier
+        if (currentTierIndex === 0) {
+            this.canRender = false;
+            return;
+        }
+        this.currentTierIndex = currentTierIndex;
+        this.currentTier = TierUtils.getTierNameByIndex(this.tieredOfferData.tiers, currentTierIndex);
+        this.activeTabTier = this.currentTier;
+        this.canRender = true;
+    }
+    componentDidLoad() {
+        salla.event.on("cart::updated", (updatedCart) => {
+            this.updateOfferValues(updatedCart);
+        });
+    }
+    mapApiDataToTiers(apiData) {
+        // Sort discounts by min_spend to create proper tier order
+        const sortedDiscounts = [...apiData.details.discounts].sort((a, b) => a.min_spend - b.min_spend);
+        const tiers = sortedDiscounts.map((discount, index) => ({
+            name: discount.name,
+            tier_name: discount.name,
+            discount: discount.type === DiscountType.PERCENTAGE ? `${salla.helpers.number(discount.value)}%` : salla.money(discount.value),
+            icon: TIERED_OFFER_CONFIG.staticIcons[index] || TIERED_OFFER_CONFIG.staticIcons[0],
+            threshold: discount.min_spend,
+            text_color: TIERED_OFFER_CONFIG.staticColors[index],
+            index: index + 1
+        }));
+        return {
+            current_tier: TierUtils.getTierNameByIndex(tiers, this.findCurrentTierIndex(apiData.details.current_value, tiers)),
+            tiers
+        };
+    }
+    findCurrentTierIndex(currentValue, tiers) {
+        var _a;
+        if (tiers === void 0) {
+            tiers = (_a = this.tieredOfferData) === null || _a === void 0 ? void 0 : _a.tiers;
+        }
+        return TierUtils.findCurrentTierIndex(currentValue, tiers || []);
+    }
+    updateOfferValues(updatedCart) {
+        var _a;
+        if (!this.apiOfferData || !this.tieredOfferData) {
+            return;
+        }
+        // Check coupon compatibility
+        if (!this.validateCouponCompatibility(this.apiOfferData, updatedCart.coupon)) {
+            this.canRender = false;
+            return;
+        }
+        // If no coupon conflict, show widget
+        this.canRender = true;
+        // Check if this offer should update with cart changes
+        if (((_a = this.apiOfferData.details) === null || _a === void 0 ? void 0 : _a.with_current_cart) === false) {
+            return;
+        }
+        // Update current_value in API offer data
+        const currentValue = updatedCart.sub_total;
+        this.apiOfferData = Object.assign(Object.assign({}, this.apiOfferData), { details: Object.assign(Object.assign({}, this.apiOfferData.details), { current_value: currentValue }) });
+        // Update current tier based on new value
+        const newTierIndex = this.findCurrentTierIndex(currentValue);
+        // Check if user qualifies for any tier
+        if (newTierIndex === 0) {
+            this.canRender = false;
+            return;
+        }
+        // user qualifies show widget
+        this.canRender = true;
+        this.currentTierIndex = newTierIndex;
+        this.currentTier = TierUtils.getTierNameByIndex(this.tieredOfferData.tiers, newTierIndex);
+        // Update active tab if needed
+        if (this.activeTabTier !== this.currentTier) {
+            this.activeTabTier = this.currentTier;
+        }
+    }
+    getLoadingSkeletonView() {
+        return h(Host, null, h("div", { class: "s-tiered-offer-container" }, h("div", { class: "s-tiered-offer-skeleton-wrapper" }, h("div", { class: "s-tiered-offer-skeleton-title" }, h("salla-skeleton", { height: "16px", width: "40%" })), h("div", { class: "s-tiered-offer-skeleton-subtitle" }, h("salla-skeleton", { height: "20px", width: "60%" })), h("div", { class: "s-tiered-offer-skeleton-progress" }, h("salla-skeleton", { height: "16px", width: "100%" })), h("div", { class: "s-tiered-offer-skeleton-tabs" }, h("salla-skeleton", { height: "50px", width: "100%" })))));
+    }
+    getCurrentTierData() {
+        return TierUtils.findTierByIndex(this.tieredOfferData.tiers, this.currentTierIndex) || this.tieredOfferData.tiers[0];
+    }
+    getProgressWidth() {
+        var _a;
+        const currentValue = ((_a = this.apiOfferData.details) === null || _a === void 0 ? void 0 : _a.current_value) || 0;
+        const totalTiers = this.tieredOfferData.tiers.length;
+        // Use existing method to find current tier index (which already handles the logic)
+        const currentTierIndex = this.findCurrentTierIndex(currentValue);
+        // Convert to 0-based index for progress calculation
+        const completedTiers = currentTierIndex;
+        return (completedTiers / totalTiers) * 100;
+    }
+    calculateMilestonePosition(index, totalTiers) {
+        if (totalTiers === 1) {
+            return 'calc(100% - 18px)';
+        }
+        const milestonePercent = ((index + 1) / totalTiers) * 100;
+        const offsetPercent = 8 / totalTiers;
+        return `${Math.max(2, Math.min(95, milestonePercent - offsetPercent))}%`;
+    }
+    getMilestoneStyles(tier, index, totalTiers) {
+        const isRtl = document.documentElement.dir === 'rtl';
+        const adjustedPercent = this.calculateMilestonePosition(index, totalTiers);
+        const alignItems = tier.name.length > 6 ? 'flex-end' : 'center';
+        return {
+            [isRtl ? 'right' : 'left']: adjustedPercent,
+            alignItems,
+            position: 'absolute',
+            transform: isRtl ? 'translateX(50%)' : 'translateX(-50%)'
+        };
+    }
+    getMilestoneIconStyles(tier, isCurrent, isReached) {
+        if (isCurrent) {
+            return { color: tier.text_color };
+        }
+        if (isReached) {
+            return { color: 'var(--color-primary)' };
+        }
+        return {};
+    }
+    renderProgressBarBackground(progressWidth) {
+        return [
+            h("div", { class: "s-tiered-offer-progress-bg" }),
+            h("div", { class: "s-tiered-offer-progress-fill", style: { width: `${progressWidth}%` } })
+        ];
+    }
+    renderMilestoneIcon(tier, isCurrent, isReached) {
+        const iconClasses = [
+            's-tiered-offer-milestone-icon',
+            isCurrent ? 's-tiered-offer-milestone-active' : '',
+            isReached ? 's-tiered-offer-milestone-completed' : ''
+        ].filter(Boolean).join(' ');
+        return (h("div", { class: iconClasses, style: this.getMilestoneIconStyles(tier, isCurrent, isReached) }, h("span", { innerHTML: tier.icon })));
+    }
+    renderMilestoneName(tier, isCurrent) {
+        return (h("div", { class: "s-tiered-offer-milestone-name" }, isCurrent && (h("span", { style: { color: tier.text_color } }, tier.name))));
+    }
+    renderMilestones(currentValue, totalTiers) {
+        const containerClass = totalTiers === 1
+            ? 's-tiered-offer-single-milestone-justify-end'
+            : 's-tiered-offer-milestones';
+        return (h("div", { class: "s-tiered-offer-milestones-wrapper" }, h("div", { class: containerClass }, this.tieredOfferData.tiers.map((tier, index) => {
+            const isReached = currentValue >= tier.threshold;
+            const isCurrent = tier.tier_name === this.currentTier;
+            return (h("div", { class: "s-tiered-offer-milestone", style: this.getMilestoneStyles(tier, index, totalTiers) }, this.renderMilestoneIcon(tier, isCurrent, isReached), this.renderMilestoneName(tier, isCurrent)));
+        }))));
+    }
+    renderProgressBar() {
+        var _a;
+        const progressWidth = this.getProgressWidth();
+        const totalTiers = this.tieredOfferData.tiers.length;
+        const currentValue = ((_a = this.apiOfferData.details) === null || _a === void 0 ? void 0 : _a.current_value) || 0;
+        return (h("div", { class: "s-tiered-offer-progress-container" }, h("div", { class: "s-tiered-offer-progress-wrapper" }, this.renderProgressBarBackground(progressWidth), this.renderMilestones(currentValue, totalTiers))));
+    }
+    renderTabs() {
+        return (h("div", { class: "s-tiered-offer-tabs-container" }, h("div", { class: "s-tiered-offer-tab-headers" }, this.tieredOfferData.tiers.map(tier => {
+            const isActive = tier.tier_name === this.activeTabTier;
+            return (h("button", { class: `s-tiered-offer-tab-header ${isActive ? 's-tiered-offer-tab-active' : ''}`, onClick: () => this.handleTabClick(tier.tier_name) }, h("span", null, tier.name)));
+        })), h("div", { class: "s-tiered-offer-tab-content-wrapper" }, (() => {
+            const activeTier = TierUtils.findTierByName(this.tieredOfferData.tiers, this.activeTabTier);
+            if (!activeTier)
+                return null;
+            return (h("div", { class: "s-tiered-offer-tab-content" }, h("div", { class: "s-tiered-offer-tab-content-inner" }, h("div", { class: "s-tiered-offer-discount-section" }, h("p", { class: "s-tiered-offer-discount-title" }, this.discountText, " ", h("span", { innerHTML: activeTier.discount })), h("p", { class: "s-tiered-offer-benefit-description" }, this.benefitText, " ", activeTier.name)))));
+        })())));
+    }
+    render() {
+        if (this.isLoading) {
+            return this.getLoadingSkeletonView();
+        }
+        if (!this.canRender || !this.tieredOfferData) {
+            return null;
+        }
+        const currentTierData = this.getCurrentTierData();
+        return (h(Host, null, h("div", { class: "s-tiered-offer-container" }, h("div", { class: "s-tiered-offer-header" }, h("div", { class: "s-tiered-offer-header-content" }, h("p", { class: "s-tiered-offer-program-title" }, this.loyaltyProgramText), h("div", { class: "s-tiered-offer-current-tier-name-wrapper" }, h("h2", { class: "s-tiered-offer-current-tier" }, this.currentTierText, " ", h("span", { class: "s-tiered-offer-tier-name" }, currentTierData.name)), h("span", { innerHTML: currentTierData.icon })))), this.renderProgressBar(), this.renderTabs())));
+    }
+    static get is() { return "salla-tiered-offer"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["salla-tiered-offer.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["salla-tiered-offer.css"]
+        };
+    }
+    static get states() {
+        return {
+            "tieredOfferData": {},
+            "apiOfferData": {},
+            "currentTierIndex": {},
+            "currentTier": {},
+            "activeTabTier": {},
+            "canRender": {},
+            "isLoading": {},
+            "loyaltyProgramText": {},
+            "currentTierText": {},
+            "discountText": {},
+            "benefitText": {}
+        };
+    }
+}
+//# sourceMappingURL=salla-tiered-offer.js.map

package/dist/collection/components/salla-tiered-offer/salla-tiered-offer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"salla-tiered-offer.js","sourceRoot":"","sources":["../../../src/components/salla-tiered-offer/salla-tiered-offer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, State } from '@stencil/core';\nimport { Offer, TieredOfferTier, TieredOfferData, DiscountType } from './interfaces';\nimport { TIERED_OFFER_CONFIG } from './constants';\nimport { TierUtils } from './utils';\n\n@Component({\n  tag: 'salla-tiered-offer',\n  styleUrl: 'salla-tiered-offer.scss',\n})\nexport class SallaTieredOffer {\n\n  constructor() {\n    salla.lang.onLoaded(() => {\n      this.loyaltyProgramText = salla.lang.get('blocks.tiered_offer.program_title');\n      this.currentTierText = salla.lang.get('blocks.tiered_offer.current_tier');\n      this.discountText = salla.lang.get('blocks.tiered_offer.discount');\n      this.benefitText = salla.lang.get('blocks.tiered_offer.tier_description');\n    });\n  }\n\n\n  @State() tieredOfferData: TieredOfferData;\n  @State() apiOfferData: Offer;\n  @State() currentTierIndex: number = 0;\n  @State() currentTier: string;\n  @State() activeTabTier: string;\n\n  @State() canRender: boolean = false;\n  @State() isLoading: boolean = false;\n\n  // Language strings\n  @State() loyaltyProgramText: string;\n  @State() currentTierText: string;\n  @State() discountText: string;\n  @State() benefitText: string;\n\n  async componentWillLoad() {\n    try {\n      await salla.onReady();\n      \n      if (!this.checkFeatureEnabled()) {\n        return;\n      }\n      \n      if (!this.checkCartExists()) {\n        return;\n      }\n      \n      this.isLoading = true;\n      \n      const offerData = await this.fetchTieredOfferData();\n      if (!offerData) {\n        return;\n      }\n      \n      this.initializeComponent(offerData);\n      \n    } catch (error) {\n      this.canRender = false;\n      salla.logger.warn('salla-tiered-offer:: ', error);\n    } finally {\n      this.isLoading = false;\n    }\n  }\n  \n  private checkFeatureEnabled(): boolean {\n    return salla.config.get('store.features')?.includes('tiered-offer');\n  }\n  \n  private checkCartExists(): boolean {\n    return !!salla.storage.get(\"cart\")?.summary?.count;\n  }\n  \n  private validateCouponCompatibility(offerData: Offer, cartCoupon?: any): boolean {\n    // If coupon is applied but offer doesn't support coupons, widget should be hidden\n    return !(cartCoupon && !offerData.details?.applied_with_coupon);\n  }\n  \n  private async fetchTieredOfferData(): Promise<Offer | null> {\n    try {\n      const { data }: { data: Offer[] } = await salla.api.cart.offers();\n      const tieredOffer = data.find(offer => offer.type === \"tiered_offer\");\n      \n      if (!tieredOffer) {\n        return null;\n      }\n      \n      // Hide widget if coupon is applied and offer doesn't support coupons\n      if (!this.validateCouponCompatibility(tieredOffer, salla.storage.get(\"cart\")?.coupon)) {\n        this.canRender = false;\n        return null;\n      }\n      \n      return tieredOffer;\n    } catch (error) {\n      throw error;\n    }\n  }\n  \n  private initializeComponent(apiOfferData: Offer): void {\n    this.apiOfferData = apiOfferData;\n    \n    // Map tiered details data to component format\n    this.tieredOfferData = this.mapApiDataToTiers(this.apiOfferData);\n    this.loyaltyProgramText = this.apiOfferData.title || this.loyaltyProgramText;\n    \n    // Find current tier index based on current_value from API\n    const currentValue = this.apiOfferData.details?.current_value || 0;\n    const currentTierIndex = this.findCurrentTierIndex(currentValue);\n    \n    // Only render if user has reached at least the first tier\n    if (currentTierIndex === 0) {\n      this.canRender = false;\n      return;\n    }\n    \n    this.currentTierIndex = currentTierIndex;\n    this.currentTier = TierUtils.getTierNameByIndex(this.tieredOfferData.tiers, currentTierIndex);\n    this.activeTabTier = this.currentTier;\n    this.canRender = true;\n  }\n\n  componentDidLoad() {\n    salla.event.on(\"cart::updated\", (updatedCart) => {\n      this.updateOfferValues(updatedCart);\n    });\n  }\n\n  private mapApiDataToTiers(apiData: Offer): TieredOfferData {\n    // Sort discounts by min_spend to create proper tier order\n    const sortedDiscounts = [...apiData.details.discounts].sort((a, b) => a.min_spend - b.min_spend);\n\n    const tiers: TieredOfferTier[] = sortedDiscounts.map((discount, index) => ({\n      name: discount.name, \n      tier_name: discount.name, \n      discount: discount.type === DiscountType.PERCENTAGE ? `${salla.helpers.number(discount.value)}%` : salla.money(discount.value),\n      icon: TIERED_OFFER_CONFIG.staticIcons[index] || TIERED_OFFER_CONFIG.staticIcons[0], \n      threshold: discount.min_spend,\n      text_color: TIERED_OFFER_CONFIG.staticColors[index], \n      index: index + 1\n    }));\n\n    return {\n      current_tier: TierUtils.getTierNameByIndex(tiers, this.findCurrentTierIndex(apiData.details.current_value, tiers)),\n      tiers\n    };\n  }\n\n  private findCurrentTierIndex(currentValue: number, tiers = this.tieredOfferData?.tiers): number {\n    return TierUtils.findCurrentTierIndex(currentValue, tiers || []);\n  }\n\n  private updateOfferValues(updatedCart: { items: any[], sub_total: number, coupon?: any }) {\n    if (!this.apiOfferData || !this.tieredOfferData) {\n      return;\n    }\n\n    // Check coupon compatibility\n    if (!this.validateCouponCompatibility(this.apiOfferData, updatedCart.coupon)) {\n      this.canRender = false;\n      return;\n    }\n\n    // If no coupon conflict, show widget\n    this.canRender = true;\n\n    // Check if this offer should update with cart changes\n    if (this.apiOfferData.details?.with_current_cart === false) {\n      return;\n    }\n\n    // Update current_value in API offer data\n    const currentValue = updatedCart.sub_total;\n    this.apiOfferData = {\n      ...this.apiOfferData,\n      details: {\n        ...this.apiOfferData.details,\n        current_value: currentValue\n      }\n    };\n\n    // Update current tier based on new value\n    const newTierIndex = this.findCurrentTierIndex(currentValue);\n    \n    // Check if user qualifies for any tier\n    if (newTierIndex === 0) {\n      this.canRender = false;\n      return;\n    }\n\n    // user qualifies show widget\n    this.canRender = true;\n    this.currentTierIndex = newTierIndex;\n    this.currentTier = TierUtils.getTierNameByIndex(this.tieredOfferData.tiers, newTierIndex);\n    \n    // Update active tab if needed\n    if (this.activeTabTier !== this.currentTier) {\n      this.activeTabTier = this.currentTier;\n    }\n  }\n\n  private getLoadingSkeletonView() {\n    return <Host>\n      <div class=\"s-tiered-offer-container\">\n        <div class=\"s-tiered-offer-skeleton-wrapper\">\n          <div class=\"s-tiered-offer-skeleton-title\">\n            <salla-skeleton height=\"16px\" width=\"40%\" />\n          </div>\n          <div class=\"s-tiered-offer-skeleton-subtitle\">\n            <salla-skeleton height=\"20px\" width=\"60%\" />\n          </div>\n          <div class=\"s-tiered-offer-skeleton-progress\">\n            <salla-skeleton height=\"16px\" width=\"100%\" />\n          </div>\n          <div class=\"s-tiered-offer-skeleton-tabs\">\n            <salla-skeleton height=\"50px\" width=\"100%\" />\n          </div>\n        </div>\n      </div>\n    </Host>\n  }\n\n  private getCurrentTierData(): TieredOfferTier {\n    return TierUtils.findTierByIndex(this.tieredOfferData.tiers, this.currentTierIndex) || this.tieredOfferData.tiers[0];\n  }\n\n  private getProgressWidth(): number {\n    const currentValue = this.apiOfferData.details?.current_value || 0;\n    const totalTiers = this.tieredOfferData.tiers.length;\n    \n    // Use existing method to find current tier index (which already handles the logic)\n    const currentTierIndex = this.findCurrentTierIndex(currentValue);\n    \n    // Convert to 0-based index for progress calculation\n    const completedTiers = currentTierIndex;\n    return (completedTiers / totalTiers) * 100;\n  }\n\n  private handleTabClick = (tierName: string) => {\n    this.activeTabTier = tierName;\n  }\n  \n  private calculateMilestonePosition(index: number, totalTiers: number): string {\n    if (totalTiers === 1) {\n      return 'calc(100% - 18px)';\n    }\n    const milestonePercent = ((index + 1) / totalTiers) * 100;\n    const offsetPercent = 8 / totalTiers;\n    return `${Math.max(2, Math.min(95, milestonePercent - offsetPercent))}%`;\n  }\n  \n  private getMilestoneStyles(tier: TieredOfferTier, index: number, totalTiers: number) {\n    const isRtl = document.documentElement.dir === 'rtl';\n    const adjustedPercent = this.calculateMilestonePosition(index, totalTiers);\n    const alignItems = tier.name.length > 6 ? 'flex-end' : 'center';\n    \n    return {\n      [isRtl ? 'right' : 'left']: adjustedPercent,\n      alignItems,\n      position: 'absolute' as const,\n      transform: isRtl ? 'translateX(50%)' : 'translateX(-50%)'\n    };\n  }\n  \n  private getMilestoneIconStyles(tier: TieredOfferTier, isCurrent: boolean, isReached: boolean) {\n    if (isCurrent) {\n      return { color: tier.text_color };\n    }\n    if (isReached) {\n      return { color: 'var(--color-primary)' };\n    }\n    return {};\n  }\n  \n  private renderProgressBarBackground(progressWidth: number) {\n    return [\n      <div class=\"s-tiered-offer-progress-bg\"></div>,\n      <div \n        class=\"s-tiered-offer-progress-fill\"\n        style={{ width: `${progressWidth}%` }}>\n      </div>\n    ];\n  }\n  \n  private renderMilestoneIcon(tier: TieredOfferTier, isCurrent: boolean, isReached: boolean) {\n    const iconClasses = [\n      's-tiered-offer-milestone-icon',\n      isCurrent ? 's-tiered-offer-milestone-active' : '',\n      isReached ? 's-tiered-offer-milestone-completed' : ''\n    ].filter(Boolean).join(' ');\n    \n    return (\n      <div \n        class={iconClasses}\n        style={this.getMilestoneIconStyles(tier, isCurrent, isReached)}>\n        <span innerHTML={tier.icon}></span>\n      </div>\n    );\n  }\n  \n  private renderMilestoneName(tier: TieredOfferTier, isCurrent: boolean) {\n    return (\n      <div class=\"s-tiered-offer-milestone-name\">\n        {isCurrent && (\n          <span style={{ color: tier.text_color }}>\n            {tier.name}\n          </span>\n        )}\n      </div>\n    );\n  }\n  \n  private renderMilestones(currentValue: number, totalTiers: number) {\n    const containerClass = totalTiers === 1 \n      ? 's-tiered-offer-single-milestone-justify-end' \n      : 's-tiered-offer-milestones';\n      \n    return (\n      <div class=\"s-tiered-offer-milestones-wrapper\">\n        <div class={containerClass}>\n          {this.tieredOfferData.tiers.map((tier, index) => {\n            const isReached = currentValue >= tier.threshold;\n            const isCurrent = tier.tier_name === this.currentTier;\n            \n            return (\n              <div \n                class=\"s-tiered-offer-milestone\"\n                style={this.getMilestoneStyles(tier, index, totalTiers)}>\n                {this.renderMilestoneIcon(tier, isCurrent, isReached)}\n                {this.renderMilestoneName(tier, isCurrent)}\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    );\n  }\n\n  private renderProgressBar() {\n    const progressWidth = this.getProgressWidth();\n    const totalTiers = this.tieredOfferData.tiers.length;\n    const currentValue = this.apiOfferData.details?.current_value || 0;\n\n    return (\n      <div class=\"s-tiered-offer-progress-container\">\n        <div class=\"s-tiered-offer-progress-wrapper\">\n          {this.renderProgressBarBackground(progressWidth)}\n          {this.renderMilestones(currentValue, totalTiers)}\n        </div>\n      </div>\n    );\n  }\n\n  private renderTabs() {\n    return (\n      <div class=\"s-tiered-offer-tabs-container\">\n        {/* Tab Headers */}\n        <div class=\"s-tiered-offer-tab-headers\">\n          {this.tieredOfferData.tiers.map(tier => {\n            const isActive = tier.tier_name === this.activeTabTier;\n            return (\n              <button \n                class={`s-tiered-offer-tab-header ${isActive ? 's-tiered-offer-tab-active' : ''}`}\n                onClick={() => this.handleTabClick(tier.tier_name)}>\n                <span>{tier.name}</span>\n              </button>\n            );\n          })}\n        </div>\n\n        {/* Tab Content */}\n        <div class=\"s-tiered-offer-tab-content-wrapper\">\n          {(() => {\n            const activeTier = TierUtils.findTierByName(this.tieredOfferData.tiers, this.activeTabTier);\n            if (!activeTier) return null;\n            \n            return (\n              <div class=\"s-tiered-offer-tab-content\">\n                <div class=\"s-tiered-offer-tab-content-inner\">\n                  <div class=\"s-tiered-offer-discount-section\">\n                    <p class=\"s-tiered-offer-discount-title\">\n                      {this.discountText} <span innerHTML={activeTier.discount}></span>\n                    </p>\n                    <p class=\"s-tiered-offer-benefit-description\">\n                      {this.benefitText} {activeTier.name}\n                    </p>\n                  </div>\n                </div>\n              </div>\n            );\n          })()}\n        </div>\n      </div>\n    );\n  }\n\n  render() {\n    \n    if (this.isLoading) {\n      return this.getLoadingSkeletonView();\n    }\n\n    if (!this.canRender || !this.tieredOfferData) {\n      return null;\n    }\n    \n\n    const currentTierData = this.getCurrentTierData();\n\n    return (\n      <Host>\n        <div class=\"s-tiered-offer-container\">\n          {/* Header Section */}\n          <div class=\"s-tiered-offer-header\">\n            <div class=\"s-tiered-offer-header-content\">\n              <p class=\"s-tiered-offer-program-title\">{this.loyaltyProgramText}</p>\n              <div class=\"s-tiered-offer-current-tier-name-wrapper\">\n                <h2 class=\"s-tiered-offer-current-tier\">\n                  {this.currentTierText} <span class=\"s-tiered-offer-tier-name\">{currentTierData.name}</span>\n                </h2>\n                <span innerHTML={currentTierData.icon}></span>\n              </div>\n            </div>\n          </div>\n\n          {/* Progress Bar */}\n          {this.renderProgressBar()}\n\n          {/* Tabs */}\n          {this.renderTabs()}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/salla-tiered-offer/utils.js

@@ -0,0 +1,38 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+export class TierUtils {
+    /**
+     * Find tier by index
+     */
+    static findTierByIndex(tiers, index) {
+        return tiers.find(tier => tier.index === index) || null;
+    }
+    /**
+     * Find tier by tier name
+     */
+    static findTierByName(tiers, tierName) {
+        return tiers.find(tier => tier.tier_name === tierName) || null;
+    }
+    /**
+     * Get tier name by index
+     */
+    static getTierNameByIndex(tiers, index) {
+        var _a;
+        return (_a = this.findTierByIndex(tiers, index)) === null || _a === void 0 ? void 0 : _a.tier_name;
+    }
+    /**
+     * Find current tier index based on current value
+     */
+    static findCurrentTierIndex(currentValue, tiers) {
+        if (!tiers)
+            return 0;
+        for (let i = tiers.length - 1; i >= 0; i--) {
+            if (currentValue >= tiers[i].threshold) {
+                return tiers[i].index;
+            }
+        }
+        return 0;
+    }
+}
+//# sourceMappingURL=utils.js.map

package/dist/collection/components/salla-tiered-offer/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/salla-tiered-offer/utils.ts"],"names":[],"mappings":"AAEA,MAAM,OAAO,SAAS;IACpB;;OAEG;IACH,MAAM,CAAC,eAAe,CAAC,KAAwB,EAAE,KAAa;QAC5D,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC,IAAI,IAAI,CAAC;IAC1D,CAAC;IAED;;OAEG;IACH,MAAM,CAAC,cAAc,CAAC,KAAwB,EAAE,QAAgB;QAC9D,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,KAAK,QAAQ,CAAC,IAAI,IAAI,CAAC;IACjE,CAAC;IAED;;OAEG;IACH,MAAM,CAAC,kBAAkB,CAAC,KAAwB,EAAE,KAAa;;QAC/D,OAAO,MAAA,IAAI,CAAC,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC,0CAAE,SAAS,CAAC;IACvD,CAAC;IAED;;OAEG;IACH,MAAM,CAAC,oBAAoB,CAAC,YAAoB,EAAE,KAAwB;QACxE,IAAI,CAAC,KAAK;YAAE,OAAO,CAAC,CAAC;QAErB,KAAK,IAAI,CAAC,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;YAC3C,IAAI,YAAY,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,EAAE,CAAC;gBACvC,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;YACxB,CAAC;QACH,CAAC;QACD,OAAO,CAAC,CAAC;IACX,CAAC;CACF","sourcesContent":["import { TieredOfferTier } from './interfaces';\n\nexport class TierUtils {\n  /**\n   * Find tier by index\n   */\n  static findTierByIndex(tiers: TieredOfferTier[], index: number): TieredOfferTier | null {\n    return tiers.find(tier => tier.index === index) || null;\n  }\n\n  /**\n   * Find tier by tier name\n   */\n  static findTierByName(tiers: TieredOfferTier[], tierName: string): TieredOfferTier | null {\n    return tiers.find(tier => tier.tier_name === tierName) || null;\n  }\n\n  /**\n   * Get tier name by index\n   */\n  static getTierNameByIndex(tiers: TieredOfferTier[], index: number): string | undefined {\n    return this.findTierByIndex(tiers, index)?.tier_name;\n  }\n\n  /**\n   * Find current tier index based on current value\n   */\n  static findCurrentTierIndex(currentValue: number, tiers: TieredOfferTier[]): number {\n    if (!tiers) return 0;\n    \n    for (let i = tiers.length - 1; i >= 0; i--) {\n      if (currentValue >= tiers[i].threshold) {\n        return tiers[i].index;\n      }\n    }\n    return 0;\n  }\n}"]}