@salla.sa/twilight-components
Version:
Salla Web Component
4 lines • 14.3 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import{r as s,h as t,a as e}from"./p-Dbv0I4re.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(t){s(this,t),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,t)=>salla.lang.get("pages.offer.min_spend_amount",{amount:s,currency:t},`بحد أدنى ${s} ${t} من مبلغ الشراء`),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,t)=>salla.lang.get("pages.offer.min_spend_amount",{amount:s,currency:t},`بحد أدنى ${s} ${t} من مبلغ الشراء`),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")||{},t=salla.config.get("user.currency_code");this.userCurrency=s[t]||{symbol:"",code:t||"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,t)=>({id:s.id,name:s.title,creative:s.description||"",position:t+1})));salla.event.emit("salla::offer.promotion.viewed",s)}emitPromotionClicked(s,t=1){if(!(this.offersList.length&&this.canRender&&this.showOffer))return;const e=s||this.offersList[0];salla.event.emit("salla::offer.promotion.clicked",[{id:e.id,name:e.title,creative:e.description||"",position:t}])}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 t=null;this.offersList.some((s=>{const t=s.details;return"category"===t.apply_to&&t.targets||"categories"===t.apply_to&&t.targets||s.type===i.BuyXGetY&&("categories"===t.get?.source||"category"===t.get?.source)}))&&(t=(await salla.product.api.categories()).data);const e=new Set;for(const s of this.offersList){const t=s.details;"product"!==t.apply_to&&"products"!==t.apply_to||!t.targets||t.targets.forEach((s=>e.add(s))),s.type===i.BuyXGetY&&"products"===t.get?.source&&t.get?.source_value&&t.get.source_value.forEach((s=>e.add(s))),s.type!==i.BuyXGetY||"products"!==t.buy?.source&&"product"!==t.buy?.source||!t.buy?.source_value||t.buy.source_value.forEach((s=>e.add(s)))}let o={};if(e.size>0)try{const s=await salla.product.api.fetch({source:"selected",source_value:Array.from(e)});o=Object.fromEntries(s.data.map((s=>[s.id,s])))}catch(s){o={}}for(const s of this.offersList){const e=s.details;if(("category"===e.apply_to&&e.targets||"categories"===e.apply_to&&e.targets)&&t&&(e.categories=this.findCategories(t,e.targets)),"product"!==e.apply_to&&"products"!==e.apply_to||!e.targets||(e.products=e.targets.map((s=>o[s])).filter(Boolean)),s.type===i.BuyXGetY&&e.get){const s=e.get;"products"===s.source&&s.source_value?s.products=s.source_value.map((s=>o[s])).filter(Boolean):("categories"===s.source||"category"===s.source)&&t&&s.source_value&&(s.categories=this.findCategories(t,s.source_value),e.categories=s.categories)}if(s.type===i.BuyXGetY&&e.buy){const s=e.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,t){let e=[];for(const o of s)t.includes(o.id_||o.id)&&e.push(o),o.sub_categories?.length>0&&(e=e.concat(this.findCategories(o.sub_categories,t)));return e}render(){if(!this.offersList.length||!this.canRender||!this.showOffer)return null;const s=salla.lang.get("pages.offer.offers_title","عروض المنتج"),e=salla.lang.get("pages.offer.offers_subtitle","احصل على المنتج بسعر مخفض مع أفضل العروض");return[t("div",{class:"s-offer-wrapper"},t("salla-slider",{type:"carousel",id:"offers-slider","block-title":s,"block-subTitle":e,"show-controls":this.offersList.length>1},t("div",{slot:"items"},this.offersList.slice(0,5).map(((s,t)=>this.renderOfferCard(s,t+1))),this.offersList.length>5&&this.renderShowMoreCard()))),this.renderAllOffersModal(),this.renderProductsModal()]}renderShowMoreCard(){return t("div",{class:"s-offer-slide-one-fourth swiper-slide",onClick:s=>{s.preventDefault(),s.stopPropagation(),this.openAllOffersModal()}},t("div",{class:"s-offer-card s-offer-show-more-card"},t("i",{class:"sicon-add s-offer-show-more-icon"}),t("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,t){this.collapsedOffers={...this.collapsedOffers,[s]:t}}getOfferProducts(s){const t=s.details;return t.products&&t.products.length>0?t.products:s.type===i.BuyXGetY&&t.get?.products?t.get.products:[]}renderProductsLinkForModalCard(s,e){const o=this.getOfferProducts(s);return o&&0!==o.length?t("div",{class:"s-offer-products-link",onClick:s=>{s.stopPropagation(),this.selectedOfferProducts=o,this.showProductsModal=!0}},t("span",{class:"s-offer-products-link-text"},this.products_link_text),e&&t("i",{class:"sicon-keyboard_arrow_down s-offer-products-link-icon"})):null}renderAllOffersModal(){return t("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()},t("div",{class:"s-offer-drawer-content"},this.offersList.map(((s,t)=>this.renderModalOfferCard(s,t+1)))))}renderProductsModal(){return t("salla-drawer",{visible:this.showProductsModal,width:"md",position:"right","no-padding":!0,"drawer-title":this.products_link_text,onDrawerVisibilityChanged:s=>!s.detail&&this.closeProductsModal()},t("div",{class:"s-offer-products-drawer-content"},this.selectedOfferProducts?.length>0?t("div",null,!this.productsLoaded&&t("div",{class:"flex items-center justify-center p-8"},t("salla-loading",{size:"24"})),t("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})):t("div",{class:"p-4 text-center text-gray-500"},salla.lang.get("blocks.products.no_products_found","لا توجد منتجات"))))}renderModalOfferCard(s,e=1){const o=this.getOfferProducts(s),r=o&&o.length>0,a=!1!==this.collapsedOffers[s.id];return t("div",{class:"s-offer-drawer-card"},t("div",{class:"s-offer-card-main",onClick:()=>this.emitPromotionClicked(s,e)},t("div",{class:"s-offer-card-icon"},this.getOfferIcon(s.type)),t("div",{class:"s-offer-card-content"},t("h3",{class:"s-offer-card-title",title:s.title},s.title),s.description&&t("p",{class:"s-offer-card-description"},s.description),s.type===i.DiscountsTable?t("div",{class:"s-offer-card-details"},this.renderDiscountTableOfferContent(s)):s.type===i.PercentageOrFixed||s.type===i.Percentage||s.type===i.FixedAmount?t("div",{class:"s-offer-card-details"},this.renderPercentageOrFixedOfferContent(s),this.renderOfferCategories(s)):t("div",{class:"s-offer-card-details"},this.renderOfferCategories(s)))),r&&t("salla-accordion",{collapsed:a,collapsible:!0,size:"sm",onClick:s=>s.stopPropagation(),onAccordionToggle:t=>this.handleAccordionToggle(s.id,t.detail.payload.collapsed)},t("salla-accordion-head",{collapsible:!0,collapsed:a},t("div",{slot:"title",class:"s-offer-products-thumbnails"},t("span",{class:"s-offer-products-title"},this.products_link_text,t("i",{class:`sicon-keyboard_arrow_${a?"down":"up"} s-offer-products-link-icon`})),t("div",{class:"s-offer-products-thumbnails-stack"},o.slice(0,3).map(((s,e)=>t("div",{class:"s-offer-product-thumbnail",style:{zIndex:`${e+1}`}},t("img",{src:s.thumbnail||s.image?.url||salla.url.cdn("images/s-empty.png"),alt:s.name})))),o.length>3&&t("div",{class:"s-offer-products-more-count",style:{zIndex:"7"}},"+",o.length-3)))),t("salla-accordion-body",null,t("div",{class:"s-offer-products-content"},t("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,e=1){return t("div",{class:"s-offer-slide-one-fourth swiper-slide",onClick:()=>this.emitPromotionClicked(s,e)},t("div",{class:"s-offer-card"},t("div",{class:"s-offer-card-icon"},this.getOfferIcon(s.type)),t("div",{class:"s-offer-card-content"},t("h3",{class:"s-offer-card-title",title:s.title},s.title),s.description&&t("p",{class:"s-offer-card-description"},s.description),t("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.renderOfferCategories(s),this.renderProductsLinkForModalCard(s,!1)))))}getOfferIcon(s){return t("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 e=s.details.discounts||[];return e.length?t("div",null,t("div",{class:"s-offer-card-description"},salla.lang.get("pages.offer.discount_table_subtitle","وفر اكتر بشراء منتجات أكثر")),t("table",{class:"s-offer-discount-table"},t("tbody",null,this.groupDiscountsByRows(e,3).map(((s,e)=>t("tr",{key:e},s.map(((s,e)=>t("td",{key:e},t("div",{class:"s-offer-discount-percentage"},s.percentage,"%"),t("div",{class:"s-offer-discount-condition"},this.formatDiscountCondition(s))))))))))):null}renderPercentageOrFixedOfferContent(s){const e=s.details;return e.discount_value||e.min_spend>0||e.min_items>0?t("div",{class:"s-offer-percentage-fixed-content"},e.min_spend>0&&t("div",{class:"s-offer-min-spend"},this.min_spend_text(e.min_spend,this.userCurrency?.symbol||"")),e.min_items>0&&t("div",{class:"s-offer-min-items"},this.min_items_text(e.min_items))):null}groupDiscountsByRows(s,t){const e=[];for(let o=0;o<s.length;o+=t)e.push(s.slice(o,o+t));return e}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 e=s.details;let o=e.categories||[];if(s.type===i.BuyXGetY&&e.get?.categories&&(o=e.get.categories),!o.length)return null;const r=this.expandedCategories[s.id],a=o.length>3,l=r?o:o.slice(0,3);return t("div",{class:"s-offer-categories"},t("div",{class:"s-offer-categories-list"},l.map(((s,e)=>t("a",{key:e,class:"s-offer-category-item",href:s.url||salla.url.create("categories",s.id||s.id_)},s.name))),a&&t("span",{class:"s-offer-categories-toggle",onClick:t=>{t.preventDefault(),t.stopPropagation(),this.toggleCategoryExpansion(s.id)}},r?t("span",null,t("i",{class:"sicon-keyboard_arrow_up"})," ",salla.lang.get("common.elements.hide","إخفاء")):t("span",null,salla.lang.get("common.elements.show","عرض")," ","+"+(o.length-3)," ",t("i",{class:"sicon-keyboard_arrow_down"})))))}toggleCategoryExpansion(s){this.expandedCategories={...this.expandedCategories,[s]:!this.expandedCategories[s]}}get host(){return e(this)}};r.style=":host .s-drawer-close:where([dir=rtl],[dir=rtl] *){left:0}";export{r as salla_offer}