@salla.sa/twilight-components
Version:
Salla Web Component
4 lines • 16 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import{r as s,h as e,a as t}from"./p-BHYtfMwX.js";var o,i;!function(s){s.ProductDetail="product.single",s.Cart="cart"}(o||(o={})),function(s){s.Conditional="conditional",s.PercentageOrFixed="fixed",s.DiscountsTable="discounts_table",s.Bank="bank",s.BuyXGetY="buy_x_get_y",s.SpecialPrice="special_price",s.Percentage="percentage",s.FixedAmount="fixed_amount"}(i||(i={}));const r=class{constructor(e){s(this,e),this.productCardComponent="salla-product-card",this.offersList=[],this.canRender=!1,this.showOffer=salla.config.get("store.settings.product.show_special_offers"),this.showAllOffersModal=!1,this.showProductsModal=!1,this.selectedOfferProducts=[],this.collapsedOffers={},this.expandedCategories={},this.productsLoaded=!1,this.offer_with_price_text=salla.lang.get("pages.offer.with_price",{price:""}),this.with_discount_text=salla.lang.get("pages.products.with_a_discount"),this.product_discount_text=salla.lang.get("pages.products.discount"),this.special_offer_text=salla.lang.get("pages.products.special_offer"),this.buy_quantity_text=s=>salla.lang.get("pages.offer.buy_quantity",{quantity:s}),this.products_link_text=salla.lang.get("pages.offer.included_products","المنتجات المشمولة"),this.min_spend_text=(s,e)=>salla.lang.get("pages.offer.min_spend_amount",{amount:s,currency:e},`بحد أدنى ${s} ${e} من مبلغ الشراء`),this.min_items_text=s=>salla.lang.get("pages.offer.min_items",{items:s},`بحد أدنى ${s} منتجات`),this.product_text=salla.lang.get("common.elements.product","منتج"),salla.lang.onLoaded((()=>{this.offer_with_price_text=salla.lang.get("pages.offer.with_price"),this.with_discount_text=salla.lang.get("pages.products.with_a_discount"),this.product_discount_text=salla.lang.get("pages.products.discount"),this.special_offer_text=salla.lang.get("pages.products.special_offer"),this.buy_quantity_text(0),this.products_link_text=salla.lang.get("pages.offer.included_products","المنتجات المشمولة"),this.min_spend_text=(s,e)=>salla.lang.get("pages.offer.min_spend_amount",{amount:s,currency:e},`بحد أدنى ${s} ${e} من مبلغ الشراء`),this.min_items_text=s=>salla.lang.get("pages.offer.min_items",{items:s},`بحد أدنى ${s} منتجات`),this.product_text=salla.lang.get("common.elements.product","منتج")})),salla.onReady((()=>{this.currentPage=salla.config.get("page.slug");const s=salla.config.get("currencies")||{},e=salla.config.get("user.currency_code");this.userCurrency=s[e]||{symbol:"",code:e||"SAR",name:""}}))}async getEndpointByPageName(){return this.currentPage==o.Cart?`offers/cart/${await Salla.cart.getCurrentCartId()}`:this.currentPage==o.ProductDetail?`offers/product/${salla.config.get("page.id")}`:"offers"}emitPromotionViewed(){if(!(this.offersList.length&&this.canRender&&this.showOffer))return;const s=this.offersList.slice(0,5).map(((s,e)=>({id:s.id,name:s.title,creative:s.description||"",position:e+1})));salla.event.emit("salla::offer.promotion.viewed",s)}emitPromotionClicked(s,e=1){if(!(this.offersList.length&&this.canRender&&this.showOffer))return;const t=s||this.offersList[0];salla.event.emit("salla::offer.promotion.clicked",[{id:t.id,name:t.title,creative:t.description||"",position:e}])}componentWillLoad(){return this.hasCustomComponent=!!customElements.get(this.productCardComponent),new Promise((s=>salla.onReady(s))).then((()=>{if(this.showOffer=!salla.url.is_page("product.single")||salla.config.get("store.settings.product.show_special_offers"),!this.showOffer)throw new Error("Merchant disabled showing the offers on product page")})).then((async()=>salla.api.request(await this.getEndpointByPageName()))).then((async s=>{if(!(this.offersList=s.data).length)throw new Error("salla-offers:: There is no offers!");if(this.offersList=this.offersList.filter((s=>[i.SpecialPrice,i.Bank,i.BuyXGetY,i.DiscountsTable,i.PercentageOrFixed,i.Percentage,i.FixedAmount].includes(s.type))),!this.offersList.length)throw new Error("salla-offers:: No supported offer types found!");let e=null;this.offersList.some((s=>{const e=s.details;return"category"===e.apply_to&&e.targets||"categories"===e.apply_to&&e.targets||s.type===i.BuyXGetY&&("categories"===e.get?.source||"category"===e.get?.source)}))&&(e=(await salla.product.api.categories()).data);const t=new Set;for(const s of this.offersList){const e=s.details;"product"!==e.apply_to&&"products"!==e.apply_to||!e.targets||e.targets.forEach((s=>t.add(s))),s.type===i.BuyXGetY&&"products"===e.get?.source&&e.get?.source_value&&e.get.source_value.forEach((s=>t.add(s))),s.type!==i.BuyXGetY||"products"!==e.buy?.source&&"product"!==e.buy?.source||!e.buy?.source_value||e.buy.source_value.forEach((s=>t.add(s)))}let o={};if(t.size>0)try{const s=await salla.product.api.fetch({source:"selected",source_value:Array.from(t)});o=Object.fromEntries(s.data.map((s=>[s.id,s])))}catch(s){o={}}for(const s of this.offersList){const t=s.details;if(("category"===t.apply_to&&t.targets||"categories"===t.apply_to&&t.targets)&&e&&(t.categories=this.findCategories(e,t.targets)),"product"!==t.apply_to&&"products"!==t.apply_to||!t.targets||(t.products=t.targets.map((s=>o[s])).filter(Boolean)),"brand"===t.apply_to&&t.targets&&(t.brands=t.targets),"tag"===t.apply_to&&t.targets&&(t.tags=t.targets),s.type===i.BuyXGetY&&t.get){const s=t.get;"products"===s.source&&s.source_value?s.products=s.source_value.map((s=>o[s])).filter(Boolean):("categories"===s.source||"category"===s.source)&&e&&s.source_value&&(s.categories=this.findCategories(e,s.source_value),t.categories=s.categories)}if(s.type===i.BuyXGetY&&t.buy){const s=t.buy;"products"!==s.source&&"product"!==s.source||!s.source_value||(s.products=s.source_value.map((s=>o[s])).filter(Boolean))}}return this.offersList})).then((()=>{this.canRender=!0})).catch((s=>{salla.logger.warn(s)}))}componentDidLoad(){let s=this.host.querySelector(".s-slider-block__title-nav");s?.classList.add("s-offer-bank-payment-nav"),this.emitPromotionViewed()}findCategories(s,e){let t=[];for(const o of s)e.includes(o.id_||o.id)&&t.push(o),o.sub_categories?.length>0&&(t=t.concat(this.findCategories(o.sub_categories,e)));return t}render(){if(!this.offersList.length||!this.canRender||!this.showOffer)return null;const s=salla.lang.get("pages.offer.offers_title","عروض المنتج"),t=salla.lang.get("pages.offer.offers_subtitle","احصل على المنتج بسعر مخفض مع أفضل العروض");return[e("div",{class:"s-offer-wrapper"},e("salla-slider",{type:"carousel",id:"offers-slider","block-title":s,"block-subTitle":t,"show-controls":this.offersList.length>1},e("div",{slot:"items"},this.offersList.slice(0,5).map(((s,e)=>this.renderOfferCard(s,e+1))),this.offersList.length>5&&this.renderShowMoreCard()))),this.renderAllOffersModal(),this.renderProductsModal()]}renderShowMoreCard(){return e("div",{class:"s-offer-slide-one-fourth swiper-slide",onClick:s=>{s.preventDefault(),s.stopPropagation(),this.openAllOffersModal()}},e("div",{class:"s-offer-card s-offer-show-more-card"},e("i",{class:"sicon-add s-offer-show-more-icon"}),e("h3",{class:"s-offer-show-more-title"},salla.lang.get("pages.offer.show_more_offers","عرض المزيد من العروض"))))}openAllOffersModal(){this.showAllOffersModal=!0}closeAllOffersModal(){this.showAllOffersModal=!1}closeProductsModal(){this.showProductsModal=!1,this.selectedOfferProducts=[],this.productsLoaded=!1}handleAccordionToggle(s,e){this.collapsedOffers={...this.collapsedOffers,[s]:e}}getOfferProducts(s){const e=s.details;return e.products&&e.products.length>0?e.products:s.type===i.BuyXGetY&&e.get?.products?e.get.products:[]}renderProductsLinkForModalCard(s,t){const o=this.getOfferProducts(s);return o&&0!==o.length?e("div",{class:"s-offer-products-link",onClick:s=>{s.stopPropagation(),this.selectedOfferProducts=o,this.showProductsModal=!0}},e("span",{class:"s-offer-products-link-text"},this.products_link_text),t&&e("i",{class:"sicon-keyboard_arrow_down s-offer-products-link-icon"})):null}renderAllOffersModal(){return e("salla-drawer",{visible:this.showAllOffersModal,position:"right",width:"md","no-padding":!0,"drawer-title":salla.lang.get("pages.offer.all_offers_title","جميع العروض"),onDrawerVisibilityChanged:s=>!s.detail&&this.closeAllOffersModal()},e("div",{class:"s-offer-drawer-content"},this.offersList.map(((s,e)=>this.renderModalOfferCard(s,e+1)))))}renderProductsModal(){return e("salla-drawer",{visible:this.showProductsModal,width:"md",position:"right","no-padding":!0,"drawer-title":this.products_link_text,onDrawerVisibilityChanged:s=>!s.detail&&this.closeProductsModal()},e("div",{class:"s-offer-products-drawer-content"},this.selectedOfferProducts?.length>0?e("div",null,!this.productsLoaded&&e("div",{class:"flex items-center justify-center p-8"},e("salla-loading",{size:"24"})),e("salla-products-list",{source:"selected","source-value":JSON.stringify(this.selectedOfferProducts.map((s=>s.id))),"product-card-component":this.productCardComponent,"horizontal-cards":!0,"compact-cards":!0,includes:["images"],onProductsFetched:()=>this.productsLoaded=!0})):e("div",{class:"p-4 text-center text-gray-500"},salla.lang.get("blocks.products.no_products_found","لا توجد منتجات"))))}renderModalOfferCard(s,t=1){const o=this.getOfferProducts(s),r=o&&o.length>0,a=!1!==this.collapsedOffers[s.id];return e("div",{class:"s-offer-drawer-card"},e("div",{class:"s-offer-card-main",onClick:()=>this.emitPromotionClicked(s,t)},e("div",{class:"s-offer-card-icon"},this.getOfferIcon(s.type)),e("div",{class:"s-offer-card-content"},e("h3",{class:"s-offer-card-title",title:s.title},s.title),s.description&&e("p",{class:"s-offer-card-description"},s.description),s.type===i.DiscountsTable?e("div",{class:"s-offer-card-details"},this.renderDiscountTableOfferContent(s)):s.type===i.PercentageOrFixed||s.type===i.Percentage||s.type===i.FixedAmount?e("div",{class:"s-offer-card-details"},this.renderPercentageOrFixedOfferContent(s),this.renderOfferCategories(s),this.renderOfferBrands(s),this.renderOfferTags(s)):e("div",{class:"s-offer-card-details"},this.renderOfferCategories(s),this.renderOfferBrands(s),this.renderOfferTags(s)))),r&&e("salla-accordion",{collapsed:a,collapsible:!0,size:"sm",onClick:s=>s.stopPropagation(),onAccordionToggle:e=>this.handleAccordionToggle(s.id,e.detail.payload.collapsed)},e("salla-accordion-head",{collapsible:!0,collapsed:a},e("div",{slot:"title",class:"s-offer-products-thumbnails"},e("span",{class:"s-offer-products-title"},this.products_link_text,e("i",{class:`sicon-keyboard_arrow_${a?"down":"up"} s-offer-products-link-icon`})),e("div",{class:"s-offer-products-thumbnails-stack"},o.slice(0,3).map(((s,t)=>e("div",{class:"s-offer-product-thumbnail",style:{zIndex:`${t+1}`}},e("img",{src:s.thumbnail||s.image?.url||salla.url.cdn("images/s-empty.png"),alt:s.name})))),o.length>3&&e("div",{class:"s-offer-products-more-count",style:{zIndex:"7"}},"+",o.length-3)))),e("salla-accordion-body",null,e("div",{class:"s-offer-products-content"},e("salla-products-list",{source:"selected","source-value":JSON.stringify(o.map((s=>s.id))),"product-card-component":this.productCardComponent,"horizontal-cards":!0,"compact-cards":!0,includes:["images"]})))))}renderOfferCard(s,t=1){return e("div",{class:"s-offer-slide-one-fourth swiper-slide",onClick:()=>this.emitPromotionClicked(s,t)},e("div",{class:"s-offer-card"},e("div",{class:"s-offer-card-icon"},this.getOfferIcon(s.type)),e("div",{class:"s-offer-card-content"},e("h3",{class:"s-offer-card-title",title:s.title},s.title),s.description&&e("p",{class:"s-offer-card-description"},s.description),e("div",{class:"s-offer-card-details"},s.type===i.DiscountsTable?this.renderDiscountTableOfferContent(s):s.type===i.PercentageOrFixed||s.type===i.Percentage||s.type===i.FixedAmount?[this.renderPercentageOrFixedOfferContent(s),this.renderOfferCategories(s),this.renderOfferBrands(s),this.renderOfferTags(s)]:[this.renderOfferCategories(s),this.renderOfferBrands(s),this.renderOfferTags(s)],this.renderProductsLinkForModalCard(s,!1)))))}getOfferIcon(s){return e("i",{class:{[i.DiscountsTable]:"sicon-discount-calculator",[i.Bank]:"sicon-bank",[i.SpecialPrice]:"sicon-fire",[i.BuyXGetY]:"sicon-gift",[i.PercentageOrFixed]:"sicon-special-discount",[i.Percentage]:"sicon-special-discount",[i.FixedAmount]:"sicon-special-discount"}[s]||"sicon-discount"})}renderDiscountTableOfferContent(s){const t=s.details.discounts||[];return t.length?e("div",null,e("div",{class:"s-offer-card-description"},salla.lang.get("pages.offer.discount_table_subtitle","وفر اكتر بشراء منتجات أكثر")),e("table",{class:"s-offer-discount-table"},e("tbody",null,this.groupDiscountsByRows(t,3).map(((s,t)=>e("tr",{key:t},s.map(((s,t)=>e("td",{key:t},e("div",{class:"s-offer-discount-percentage"},s.percentage,"%"),e("div",{class:"s-offer-discount-condition"},this.formatDiscountCondition(s))))))))))):null}renderPercentageOrFixedOfferContent(s){const t=s.details;return t.discount_value||t.min_spend>0||t.min_items>0?e("div",{class:"s-offer-percentage-fixed-content"},t.min_spend>0&&e("div",{class:"s-offer-min-spend"},this.min_spend_text(t.min_spend,this.userCurrency?.symbol||"")),t.min_items>0&&e("div",{class:"s-offer-min-items"},this.min_items_text(t.min_items))):null}groupDiscountsByRows(s,e){const t=[];for(let o=0;o<s.length;o+=e)t.push(s.slice(o,o+e));return t}formatDiscountCondition(s){return s.discounted_amount?`${s.discounted_amount} ${this.userCurrency?.symbol||""}`:null!=s.quantity?this.buy_quantity_text(s.quantity):`1 ${this.product_text}`}renderOfferCategories(s){const t=s.details;let o=t.categories||[];if(s.type===i.BuyXGetY&&t.get?.categories&&(o=t.get.categories),!o.length)return null;const r=this.expandedCategories[s.id],a=o.length>3,l=r?o:o.slice(0,3);return e("div",{class:"s-offer-categories"},e("div",{class:"s-offer-categories-list"},l.map(((s,t)=>e("a",{key:t,class:"s-offer-category-item",href:s.url||salla.url.create("categories",s.id||s.id_)},s.name))),a&&e("span",{class:"s-offer-categories-toggle",onClick:e=>{e.preventDefault(),e.stopPropagation(),this.toggleCategoryExpansion(s.id)}},r?e("span",null,e("i",{class:"sicon-keyboard_arrow_up"})," ",salla.lang.get("common.elements.hide","إخفاء")):e("span",null,salla.lang.get("common.elements.show","عرض")," ","+"+(o.length-3)," ",e("i",{class:"sicon-keyboard_arrow_down"})))))}renderOfferBrands(s){const t=s.details.brands||[];if(!t.length)return null;const o=this.expandedCategories[s.id],i=t.length>3,r=o?t:t.slice(0,3);return e("div",{class:"s-offer-categories"},e("div",{class:"s-offer-categories-list"},r.map(((s,t)=>e("a",{key:t,class:"s-offer-category-item",href:s.url},s.name))),i&&e("span",{class:"s-offer-categories-toggle",onClick:e=>{e.preventDefault(),e.stopPropagation(),this.toggleCategoryExpansion(s.id)}},o?e("span",null,e("i",{class:"sicon-keyboard_arrow_up"})," ",salla.lang.get("common.elements.hide","إخفاء")):e("span",null,salla.lang.get("common.elements.show","عرض")," ","+"+(t.length-3)," ",e("i",{class:"sicon-keyboard_arrow_down"})))))}renderOfferTags(s){const t=s.details.tags||[];if(!t.length)return null;const o=this.expandedCategories[s.id],i=t.length>3,r=o?t:t.slice(0,3);return e("div",{class:"s-offer-categories"},e("div",{class:"s-offer-categories-list"},r.map(((s,t)=>e("a",{key:t,class:"s-offer-category-item",href:s.url||salla.url.create("tags",s.id)},s.name))),i&&e("span",{class:"s-offer-categories-toggle",onClick:e=>{e.preventDefault(),e.stopPropagation(),this.toggleCategoryExpansion(s.id)}},o?e("span",null,e("i",{class:"sicon-keyboard_arrow_up"})," ",salla.lang.get("common.elements.hide","إخفاء")):e("span",null,salla.lang.get("common.elements.show","عرض")," ","+"+(t.length-3)," ",e("i",{class:"sicon-keyboard_arrow_down"})))))}toggleCategoryExpansion(s){this.expandedCategories={...this.expandedCategories,[s]:!this.expandedCategories[s]}}get host(){return t(this)}};r.style=":host .s-drawer-close:where([dir=rtl],[dir=rtl] *){left:0}";export{r as salla_offer}