@salla.sa/twilight-components 2.14.220 → 2.14.222

package/dist/cjs/salla-installment.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-B04Y8RyW.js');
+var index = require('./index-BDn6fH9S.js');
 
 const sallaInstallmentCss = "salla-installment:empty{display:none}#tabbyPromoWrapper{background:white;border-radius:0.375rem;-webkit-transition:-webkit-box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);transition:-webkit-box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);transition:box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);transition:box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);margin-bottom:20px;border:unset !important;font-weight:500}.salla-y #tabbyPromoWrapper{border:1px solid var(--color-grey-dark);border-radius:12px}#tabbyPromoWrapper:hover{-webkit-box-shadow:0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 5px 10px 30px rgba(43, 45, 52, 0.0509803922);box-shadow:0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 5px 10px 30px rgba(43, 45, 52, 0.0509803922)}#tabbyPromoWrapper #tabbyPromo *{font-family:var(--font-main)}#tabbyPromoWrapper #tabbyPromo>div>div{max-width:none;-webkit-box-shadow:none;box-shadow:none;border:none}#tabbyPromoWrapper #tabbyPromo .tabby-promo-snippet{max-width:100%;min-height:100px;padding:18px 20px;border:none !important}#tabbyPromoWrapper #tabbyPromo .tabby-promo-snippet__text,#tabbyPromoWrapper #tabbyPromo .tabby-promo-snippet__link{font-size:var(--font-sm);color:var(--color-text) !important}#tabbyPromoWrapper #tabbyPromo .tabby-promo-snippet__link{font-weight:bold}.tabby-promo-wrapper #tabby-promo{font-family:var(--font-main) !important}.tabby-promo-wrapper #tabby-promo .tabby-promo__feature-title{font-size:var(--font-md)}.tabby-promo-wrapper #tabby-promo .tabby-promo__feature-desc{font-size:var(--font-sm);line-height:20px}.tamara-product-widget{margin-bottom:20px}.tamara-product-widget,.spotii-wrapper{min-height:100px;position:relative;color:var(--main-text-color);font-size:var(--font-sm);line-height:1.25;padding:20px 20px 20px 115px !important;background:white;border-radius:0.375rem;-webkit-transition:-webkit-box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);transition:-webkit-box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);transition:box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);transition:box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);border:unset !important;font-family:inherit !important;font-weight:500}.salla-y .tamara-product-widget,.salla-y .spotii-wrapper{border-radius:12px;border:1px solid var(--color-grey-dark)}.tamara-product-widget:hover,.spotii-wrapper:hover{-webkit-box-shadow:0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 5px 10px 30px rgba(43, 45, 52, 0.0509803922);box-shadow:0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 5px 10px 30px rgba(43, 45, 52, 0.0509803922)}.tamara-product-widget .spotii-logo,.spotii-wrapper .spotii-logo{float:left;margin:0 0 0 -75px}.ltr .tamara-product-widget,.ltr .spotii-wrapper{text-align:left;padding:18px 100px 18px 20px !important}.ltr .tamara-product-widget .spotii-logo,.ltr .spotii-wrapper .spotii-logo{float:right;margin:0 -75px 0 0}.ltr .tamara-product-widget .spotii-product-widget,.ltr .spotii-wrapper .spotii-product-widget{text-align:left !important}.spotii-wrapper{margin-bottom:20px}.spotii-wrapper .spotii-promo{font-size:var(--font-md)}.spotii-wrapper .spotii-product-widget{font-size:var(--font-sm) !important;margin-top:10px}.tamara-product-widget .tamara-logo{position:absolute;left:20px !important;top:35px !important;margin:0 !important;height:24px !important}.ltr .tamara-product-widget .tamara-logo{right:20px !important;left:auto !important}.tamara-product-widget span{font-family:var(--font-main);font-size:var(--font-sm);color:var(--color-text)}.tamara-product-widget span:last-child{display:block;position:relative;margin-top:8px}.tamara-popup__wrap{overflow:auto !important}.s-installment-mispay-wrapper,.s-installment-madfu-wrapper,.s-installment-emkan-wrapper,.s-installment-rajehi-wrapper{font-size:14px;text-align:right;padding:20px;gap:42px;line-height:22px;color:rgb(0, 0, 0);min-width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;background-color:white;border-radius:10px;margin:15px 0;display:-ms-flexbox;display:flex;-webkit-transition:-webkit-box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);transition:-webkit-box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);transition:box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);transition:box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1)}.s-installment-mispay-wrapper:hover,.s-installment-madfu-wrapper:hover,.s-installment-emkan-wrapper:hover,.s-installment-rajehi-wrapper:hover{-webkit-box-shadow:0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 5px 10px 30px rgba(43, 45, 52, 0.0509803922);box-shadow:0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 5px 10px 30px rgba(43, 45, 52, 0.0509803922)}.s-installment-mispay-content,.s-installment-madfu-content,.s-installment-emkan-content,.s-installment-rajehi-content{display:-ms-flexbox;display:flex;-ms-flex-direction:row-reverse;flex-direction:row-reverse;width:100%;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;gap:1rem}.s-installment-mispay-content-text,.s-installment-madfu-content-text,.s-installment-emkan-content-text,.s-installment-rajehi-content-text{color:var(--main-text-color);font-size:14px;font-weight:500;margin:0 16px 0 0;width:80%;left:14px;text-align:left}.s-installment-mispay-content img,.s-installment-madfu-content img,.s-installment-emkan-content img,.s-installment-rajehi-content img{height:28px;width:70px;display:inline-block;max-height:100%;vertical-align:middle;fill:none;stroke:unset;width:auto}.rtl .s-installment-mispay-content-text,.rtl .s-installment-madfu-content-text,.rtl .s-installment-emkan-content-text,.rtl .s-installment-rajehi-content-text{right:14px;text-align:right;margin:0 0 0 16px}.rtl .s-installment-mispay-content img,.rtl .s-installment-madfu-content img,.rtl .s-installment-emkan-content img,.rtl .s-installment-rajehi-content img{left:14px !important}.ltr .s-installment-mispay-content img,.ltr .s-installment-madfu-content img,.ltr .s-installment-emkan-content img,.ltr .s-installment-rajehi-content img{right:14px !important}.s-installment-rajehi-content img{width:70px !important;height:40px !important}.s-installment-emkan-content img{height:35px !important}";
 

package/dist/cjs/salla-loyalty-prize-item.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-B04Y8RyW.js');
+var index = require('./index-BDn6fH9S.js');
 
 const sallaLoyaltyPrizeItemCss = "salla-loyalty-prize-item:hover{-webkit-box-shadow:0 5px 15px 1px rgba(0, 0, 0, 0.04) !important;box-shadow:0 5px 15px 1px rgba(0, 0, 0, 0.04) !important}";
 

package/dist/cjs/salla-loyalty-program.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-B04Y8RyW.js');
+var index = require('./index-BDn6fH9S.js');
 var gift = require('./gift-BPDUPIY_.js');
 
 const sallaLoyaltyProgramCss = "";

package/dist/cjs/salla-metadata.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-B04Y8RyW.js');
+var index = require('./index-BDn6fH9S.js');
 
 const sallaMetadataCss = "";
 

package/dist/cjs/salla-notification-item.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-B04Y8RyW.js');
+var index = require('./index-BDn6fH9S.js');
 
 const sallaNotificationsCss = "";
 

package/dist/cjs/salla-notifications.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-B04Y8RyW.js');
+var index = require('./index-BDn6fH9S.js');
 var Helper = require('./Helper-RxjfQWAX.js');
 require('./anime.es-BqW8JHZi.js');
 

package/dist/cjs/salla-offer.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-B04Y8RyW.js');
+var index = require('./index-BDn6fH9S.js');
 
 var PageType;
 (function (PageType) {

package/dist/cjs/salla-order-summary.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-B04Y8RyW.js');
+var index = require('./index-BDn6fH9S.js');
 var check = require('./check-CLRvuniI.js');
 
 var iconFileArchive = `<!-- Generated by IcoMoon.io -->

package/dist/cjs/salla-orders.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-B04Y8RyW.js');
+var index = require('./index-BDn6fH9S.js');
 var Helper = require('./Helper-RxjfQWAX.js');
 require('./anime.es-BqW8JHZi.js');
 

package/dist/cjs/salla-payments.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-B04Y8RyW.js');
+var index = require('./index-BDn6fH9S.js');
 
 const sallaPaymentsCss = ":host{display:block}";
 

package/dist/cjs/salla-price-range.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-B04Y8RyW.js');
+var index = require('./index-BDn6fH9S.js');
 var arrowLeft = require('./arrow-left-xSEmRpp6.js');
 
 var arrowRight = `<!-- Generated by IcoMoon.io -->

package/dist/cjs/salla-product-options.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-B04Y8RyW.js');
+var index = require('./index-BDn6fH9S.js');
 var check = require('./check-CLRvuniI.js');
 var camera = require('./camera-DytepEoK.js');
 

package/dist/cjs/salla-review-card.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-B04Y8RyW.js');
+var index = require('./index-BDn6fH9S.js');
 var check = require('./check-CLRvuniI.js');
 
 var IconStar2 = ` <svg width="18" height="17" view-box="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">

package/dist/cjs/salla-reviews-page.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-B04Y8RyW.js');
+var index = require('./index-BDn6fH9S.js');
 var shoppingBag = require('./shopping-bag-C1gvTVHr.js');
 var Helper = require('./Helper-RxjfQWAX.js');
 require('./anime.es-BqW8JHZi.js');

package/dist/cjs/salla-reviews.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-B04Y8RyW.js');
+var index = require('./index-BDn6fH9S.js');
 var arrowLeft = require('./arrow-left-xSEmRpp6.js');
 var Helper = require('./Helper-RxjfQWAX.js');
 require('./anime.es-BqW8JHZi.js');

package/dist/cjs/salla-social.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-B04Y8RyW.js');
+var index = require('./index-BDn6fH9S.js');
 var twitter = require('./twitter-pOrUNjXi.js');
 
 var instagram = `<!-- Generated by IcoMoon.io -->

package/dist/cjs/salla-tiered-offer.cjs.entry.js

@@ -0,0 +1,338 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+'use strict';
+
+var index = require('./index-BDn6fH9S.js');
+
+var DiscountType;
+(function (DiscountType) {
+    DiscountType["PERCENTAGE"] = "percentage";
+    DiscountType["FIXED"] = "fixed";
+})(DiscountType || (DiscountType = {}));
+
+var StarIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="40" height="40" color="#000000" fill="none">
+    <path d="M13.7276 3.44418L15.4874 6.99288C15.7274 7.48687 16.3673 7.9607 16.9073 8.05143L20.0969 8.58575C22.1367 8.92853 22.6167 10.4206 21.1468 11.8925L18.6671 14.3927C18.2471 14.8161 18.0172 15.6327 18.1471 16.2175L18.8571 19.3125C19.417 21.7623 18.1271 22.71 15.9774 21.4296L12.9877 19.6452C12.4478 19.3226 11.5579 19.3226 11.0079 19.6452L8.01827 21.4296C5.8785 22.71 4.57865 21.7522 5.13859 19.3125L5.84851 16.2175C5.97849 15.6327 5.74852 14.8161 5.32856 14.3927L2.84884 11.8925C1.389 10.4206 1.85895 8.92853 3.89872 8.58575L7.08837 8.05143C7.61831 7.9607 8.25824 7.48687 8.49821 6.99288L10.258 3.44418C11.2179 1.51861 12.7777 1.51861 13.7276 3.44418Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+</svg>`;
+
+var StarsIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" color="#000000" fill="none">
+    <path d="M3 12C7.5 12 12 7.5 12 3C12 7.5 16.5 12 21 12C16.5 12 12 16.5 12 21C12 16.5 7.5 12 3 12Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"></path>
+    <path d="M2 19.5C2.83333 19.5 4.5 17.8333 4.5 17C4.5 17.8333 6.16667 19.5 7 19.5C6.16667 19.5 4.5 21.1667 4.5 22C4.5 21.1667 2.83333 19.5 2 19.5Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"></path>
+    <path d="M16 5C17 5 19 3 19 2C19 3 21 5 22 5C21 5 19 7 19 8C19 7 17 5 16 5Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"></path>
+</svg>`;
+
+var GoldIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="40" height="40" color="#000000" fill="none">
+    <path d="M14.2644 18.3717C14.5806 17.407 14.7387 16.9247 15.0616 16.593C15.215 16.4354 15.3932 16.3048 15.5887 16.2066C16.0003 16 16.5003 16 17.5002 16C18.5001 16 19.0001 16 19.4116 16.2066C19.6072 16.3048 19.7853 16.4354 19.9388 16.593C20.2617 16.9247 20.4198 17.407 20.736 18.3717L21.0624 19.3675C21.4561 20.5688 21.653 21.1694 21.3587 21.5847C21.0643 22 20.4418 22 19.1966 22H15.8038C14.5586 22 13.936 22 13.6417 21.5847C13.3473 21.1694 13.5442 20.5688 13.938 19.3675L14.2644 18.3717Z" stroke="currentColor" stroke-width="1.5"></path>
+    <path d="M8.76421 10.3717C9.08041 9.40705 9.23851 8.92471 9.56143 8.59298C9.71485 8.43537 9.89299 8.3048 10.0885 8.20663C10.5001 8 11.0001 8 12 8C12.9999 8 13.4999 8 13.9115 8.20663C14.107 8.3048 14.2851 8.43537 14.4386 8.59298C14.7615 8.92471 14.9196 9.40705 15.2358 10.3717L15.5622 11.3675C15.956 12.5688 16.1528 13.1694 15.8585 13.5847C15.5642 14 14.9416 14 13.6964 14H10.3036C9.05842 14 8.43585 14 8.1415 13.5847C7.84716 13.1694 8.04404 12.5688 8.43779 11.3675L8.76421 10.3717Z" stroke="currentColor" stroke-width="1.5"></path>
+    <path d="M3.26439 18.3717C3.58059 17.407 3.73869 16.9247 4.06162 16.593C4.21504 16.4354 4.39317 16.3048 4.58872 16.2066C5.00031 16 5.50027 16 6.50018 16C7.5001 16 8.00006 16 8.41165 16.2066C8.6072 16.3048 8.78533 16.4354 8.93875 16.593C9.26167 16.9247 9.41977 17.407 9.73597 18.3717L10.0624 19.3675C10.4561 20.5688 10.653 21.1694 10.3587 21.5847C10.0643 22 9.44176 22 8.19661 22H4.80375C3.5586 22 2.93603 22 2.64169 21.5847C2.34735 21.1694 2.54422 20.5688 2.93797 19.3675L3.26439 18.3717Z" stroke="currentColor" stroke-width="1.5"></path>
+    <path d="M12 2V4M7.5 3.5L9 5M16.5 3.5L15 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path>
+</svg>`;
+
+var DiamondIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" color="#000000" fill="none">
+    <path d="M5.78223 4.18192C6.43007 3.68319 6.754 3.43383 7.12788 3.27323C7.29741 3.20041 7.47367 3.14158 7.65459 3.09741C8.0536 3 8.4767 3 9.32289 3H14.6771C15.5233 3 15.9464 3 16.3454 3.09741C16.5263 3.14158 16.7026 3.20041 16.8721 3.27323C17.246 3.43383 17.5699 3.68319 18.2178 4.18192C20.3644 5.83448 21.4378 6.66077 21.8057 7.73078C21.9694 8.20673 22.0305 8.70728 21.9858 9.20461C21.8852 10.3227 21.0379 11.346 19.3433 13.3925L15.3498 18.2153C13.8126 20.0718 13.044 21 12 21C10.956 21 10.1874 20.0718 8.65018 18.2153L4.65671 13.3925C2.96208 11.346 2.11476 10.3227 2.0142 9.20461C1.96947 8.70728 2.03064 8.20673 2.1943 7.73078C2.56224 6.66077 3.63557 5.83448 5.78223 4.18192Z" stroke="currentColor" stroke-width="1.5"></path>
+    <path d="M10 8.5H14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+</svg>`;
+
+const TIERED_OFFER_CONFIG = {
+    staticIcons: [StarIcon, StarsIcon, GoldIcon, DiamondIcon],
+    staticColors: ['#993018', '#444444', '#D18F36', '#315F9C']
+};
+
+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;
+    }
+}
+
+const sallaTieredOfferCss = ".s-tiered-offer-milestone-icon svg{color:currentColor}.s-tiered-offer-milestone-icon svg path{stroke:currentColor;fill:none}.s-tiered-offer-milestone-icon.s-tiered-offer-milestone-active svg path,.s-tiered-offer-milestone-icon.s-tiered-offer-milestone-completed svg path{fill:currentColor;stroke:none}.s-tiered-offer-milestone-icon.s-tiered-offer-milestone-active svg[fill=none] path,.s-tiered-offer-milestone-icon.s-tiered-offer-milestone-completed svg[fill=none] path{fill:none;stroke:currentColor}[dir=rtl] .s-tiered-offer-progress-wrapper .s-tiered-offer-progress-bg{-webkit-transform:scaleX(-1);transform:scaleX(-1)}[dir=rtl] .s-tiered-offer-progress-wrapper .s-tiered-offer-progress-fill{-webkit-transform:scaleX(-1);transform:scaleX(-1);left:auto}[dir=rtl] .flip-x{-webkit-transform:scaleX(-1);transform:scaleX(-1)}";
+
+const SallaTieredOffer = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        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 index.h(index.Host, null, index.h("div", { class: "s-tiered-offer-container" }, index.h("div", { class: "s-tiered-offer-skeleton-wrapper" }, index.h("div", { class: "s-tiered-offer-skeleton-title" }, index.h("salla-skeleton", { height: "16px", width: "40%" })), index.h("div", { class: "s-tiered-offer-skeleton-subtitle" }, index.h("salla-skeleton", { height: "20px", width: "60%" })), index.h("div", { class: "s-tiered-offer-skeleton-progress" }, index.h("salla-skeleton", { height: "16px", width: "100%" })), index.h("div", { class: "s-tiered-offer-skeleton-tabs" }, index.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 [
+            index.h("div", { class: "s-tiered-offer-progress-bg" }),
+            index.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 (index.h("div", { class: iconClasses, style: this.getMilestoneIconStyles(tier, isCurrent, isReached) }, index.h("span", { innerHTML: tier.icon })));
+    }
+    renderMilestoneName(tier, isCurrent) {
+        return (index.h("div", { class: "s-tiered-offer-milestone-name" }, isCurrent && (index.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 (index.h("div", { class: "s-tiered-offer-milestones-wrapper" }, index.h("div", { class: containerClass }, this.tieredOfferData.tiers.map((tier, index$1) => {
+            const isReached = currentValue >= tier.threshold;
+            const isCurrent = tier.tier_name === this.currentTier;
+            return (index.h("div", { class: "s-tiered-offer-milestone", style: this.getMilestoneStyles(tier, index$1, 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 (index.h("div", { class: "s-tiered-offer-progress-container" }, index.h("div", { class: "s-tiered-offer-progress-wrapper" }, this.renderProgressBarBackground(progressWidth), this.renderMilestones(currentValue, totalTiers))));
+    }
+    renderTabs() {
+        return (index.h("div", { class: "s-tiered-offer-tabs-container" }, index.h("div", { class: "s-tiered-offer-tab-headers" }, this.tieredOfferData.tiers.map(tier => {
+            const isActive = tier.tier_name === this.activeTabTier;
+            return (index.h("button", { class: `s-tiered-offer-tab-header ${isActive ? 's-tiered-offer-tab-active' : ''}`, onClick: () => this.handleTabClick(tier.tier_name) }, index.h("span", null, tier.name)));
+        })), index.h("div", { class: "s-tiered-offer-tab-content-wrapper" }, (() => {
+            const activeTier = TierUtils.findTierByName(this.tieredOfferData.tiers, this.activeTabTier);
+            if (!activeTier)
+                return null;
+            return (index.h("div", { class: "s-tiered-offer-tab-content" }, index.h("div", { class: "s-tiered-offer-tab-content-inner" }, index.h("div", { class: "s-tiered-offer-discount-section" }, index.h("p", { class: "s-tiered-offer-discount-title" }, this.discountText, " ", index.h("span", { innerHTML: activeTier.discount })), index.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 (index.h(index.Host, null, index.h("div", { class: "s-tiered-offer-container" }, index.h("div", { class: "s-tiered-offer-header" }, index.h("div", { class: "s-tiered-offer-header-content" }, index.h("p", { class: "s-tiered-offer-program-title" }, this.loyaltyProgramText), index.h("div", { class: "s-tiered-offer-current-tier-name-wrapper" }, index.h("h2", { class: "s-tiered-offer-current-tier" }, this.currentTierText, " ", index.h("span", { class: "s-tiered-offer-tier-name" }, currentTierData.name)), index.h("span", { innerHTML: currentTierData.icon })))), this.renderProgressBar(), this.renderTabs())));
+    }
+};
+SallaTieredOffer.style = sallaTieredOfferCss;
+
+exports.salla_tiered_offer = SallaTieredOffer;
+//# sourceMappingURL=salla-tiered-offer.entry.cjs.js.map
+
+//# sourceMappingURL=salla-tiered-offer.cjs.entry.js.map

package/dist/cjs/salla-tiered-offer.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"salla-tiered-offer.entry.cjs.js","mappings":"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","names":["h","Host","index"],"sources":["src/components/salla-tiered-offer/interfaces.ts","src/components/salla-tiered-offer/constants.ts","src/components/salla-tiered-offer/utils.ts","src/components/salla-tiered-offer/salla-tiered-offer.scss?tag=salla-tiered-offer","src/components/salla-tiered-offer/salla-tiered-offer.tsx"],"sourcesContent":["export enum DiscountType {\n  PERCENTAGE = \"percentage\",\n  FIXED = \"fixed\",\n}\n\n\nexport interface Discount {\n  name?: string;\n  type?: DiscountType;\n  value?: number;\n  min_spend?: number;\n}\n\nexport interface TieredOfferDetails {\n  based_on?: string;\n  ends_at?: number;\n  start_value?: number;\n  end_value?: number;\n  current_value?: number;\n  discounts?: Discount[];\n  with_current_cart?: boolean;\n  applied_with_coupon?: boolean;\n}\n\nexport interface Offer {\n  id?: number;\n  type?: string;\n  title?: string;\n  description?: string;\n  details?: TieredOfferDetails | null;\n}\n\nexport interface TieredOfferTier {\n  name: string;\n  tier_name: string;\n  discount: string;\n  icon: string;\n  threshold: number;\n  text_color?: string;\n  index: number;\n}\n\nexport interface TieredOfferData {\n  current_tier: string;\n  tiers: TieredOfferTier[];\n}\n\nexport interface TieredOfferConfig {\n  staticIcons: string[];\n  staticColors: string[];\n}\n","import { TieredOfferConfig } from './interfaces';\nimport StarIcon from '../../assets/svg/star-rounded.svg';\nimport StarsIcon from '../../assets/svg/stars.svg';\nimport GoldIcon from '../../assets/svg/gold.svg';\nimport DiamondIcon from '../../assets/svg/diamond-02.svg';\n\nexport const TIERED_OFFER_CONFIG: TieredOfferConfig = {\n  staticIcons: [StarIcon, StarsIcon, GoldIcon, DiamondIcon],\n  staticColors: ['#993018', '#444444', '#D18F36', '#315F9C']\n};","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}","\n// SVG styling for milestone icons \n.s-tiered-offer-milestone-icon {\n  svg {\n    color: currentColor;\n    \n    path {\n      stroke: currentColor;\n      fill: none;\n    }\n  }\n  \n  // Active and completed states - fill the star icon, keep others as stroke\n  &.s-tiered-offer-milestone-active,\n  &.s-tiered-offer-milestone-completed {\n    svg {\n      path {\n        fill: currentColor;\n        stroke: none;\n      }\n      \n      // For stroke-based icons (crown, stars, diamond) \n      &[fill=\"none\"] path {\n        fill: none;\n        stroke: currentColor;\n      }\n    }\n  }\n}\n\n// RTL Support \n[dir=\"rtl\"] {\n  .s-tiered-offer-progress-wrapper {\n    .s-tiered-offer-progress-bg {\n      transform: scaleX(-1);\n    }\n    \n    .s-tiered-offer-progress-fill {\n      transform: scaleX(-1);\n      left: auto;\n    }\n  }\n\n  .flip-x {\n    transform: scaleX(-1);\n  }\n}\n","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"],"version":3}