@salla.sa/twilight-components 2.11.86 → 2.11.87

package/dist/twilight/p-ea05267e.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/salla-add-product-button/salla-add-product-button.css?tag=salla-add-product-button","src/components/salla-add-product-button/salla-add-product-button.tsx"],"names":["sallaAddProductButtonCss","SallaAddProductButton","[object Object]","hostRef","this","hostAttributes","productStatus","productType","selectedOptions","salla","onReady","showQuickBuy","quickBuy","config","get","supportStickyBar","window","innerWidth","Cart","lang","event","preventDefault","addBookingProduct","type","data","Object","entries","id","productId","donating_amount","donatingAmount","quantity","endpoint","reduce","a","k","v","cart","addItem","then","response","success","emit","catch","error","failed","isGuest","auth","api","setAfterLoginEvent","dispatch","booking","add","resp","i","host","attributes","length","includes","name","value","assign","getBtnAttributes","passedLabel","innerHTML","replace","trim","_a","btn","setText","hasAttribute","getAttribute","addEventListener","_b","getLabel","closest","classList","contains","hasSubscribedOptions","h","Host","is-subscribed","class","channels","hasOutOfStockOption","s-add-product-button-with-quick-buy","s-add-product-button-with-sticky-bar","color","fill","ref","el","onClick","addProductToCart","disabled","loader-position","getQuickBuyBtnAttributes","notifyOptionsAvailability","on","async","option","document","querySelector","getSelectedOptions","subscribedDetails","storage","subscribedOptions","parsedSubscribedDetails","map","ids","split","parseInt","some","every","JSON","parse","onLoaded"],"mappings":"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","sourcesContent":[":host {\n  display: block;\n}\n\nsalla-add-product-button[width=wide] {\n  width: 100%;\n}\n\n","import {Component, Element, State, Event, EventEmitter, Host, Prop, h} from '@stencil/core';\nimport Cart from '../../assets/svg/cart.svg';\n@Component({\n  tag: 'salla-add-product-button',\n  styleUrl: 'salla-add-product-button.css'\n})\nexport class SallaAddProductButton {\n\n  private hostAttributes: any = {};\n  private btn?: HTMLSallaButtonElement;\n  private passedLabel: string;\n\n  constructor() {\n    salla.onReady(() => {\n      this.showQuickBuy = this.quickBuy && !!salla.config.get('store.settings.buy_now');\n    });\n  }\n\n  /**\n   * Channels.\n   */\n  @Prop({reflect: true}) channels: string;\n\n  /**\n   * Subscribed Options ex: \"[[139487,2394739],[1212,1544]]\"\n   */\n  @Prop() subscribedOptions: string;\n\n  /**\n   * Support Quick Pay Button\n   */\n  @Prop({reflect: true, mutable: true}) quickBuy: boolean;\n\n  /**\n   * Product Quantity\n   */\n  @Prop({reflect: true}) quantity: number;\n\n  /**\n   * Donating amount.\n   */\n  @Prop({reflect: true}) donatingAmount: number;\n\n  /**\n   * Listen to product options availability.\n   */\n  @Prop({reflect: true}) notifyOptionsAvailability: boolean;\n\n  /**\n   * Product id\n   */\n  @Prop({reflect: true}) productId;\n\n  /**\n   * Support themes that have a sticky bar\n   */\n  @Prop({reflect: true}) supportStickyBar: boolean;\n  /**\n   *  Product Status.Defaults to `sale`\n   */\n  @Prop({reflect: true}) productStatus: 'sale' | 'out' | 'out-and-notify' = 'sale';\n\n  /**\n   * Product type. Defaults to `product`\n   */\n  @Prop({reflect: true}) productType: 'product' | 'service' | 'codes' | 'digital' | 'food' | 'donating' | 'group_products' | 'booking' = 'product';\n\n  /**\n   * Custome DOM event emitter when product gets added to cart successfully.\n   */\n  @Event() success: EventEmitter;\n\n  @State() hasOutOfStockOption: boolean;\n\n  @State() hasSubscribedOptions: boolean;\n\n  @State() selectedOptions: Array<any> = [];\n  @State() showQuickBuy: boolean;\n\n  /**\n   * Custome DOM event emitter when product addition to cart fails.\n   */\n  @Event() failed: EventEmitter;\n\n  @Element() host: HTMLElement;\n\n  private getLabel() {\n    if (this.productStatus === 'sale') {\n      if (this.supportStickyBar && window.innerWidth <= 768) {\n        return Cart;\n      }\n      return salla.lang.get('pages.cart.add_to_cart');\n    }\n\n    if (this.productType !== 'donating') {\n      return salla.lang.get('pages.products.out_of_stock');\n    }\n\n    // donating\n    return salla.lang.get('pages.products.donation_exceed');\n  }\n\n  private addProductToCart(event) {\n\n    if (this.productType === 'booking') {\n      event.preventDefault();\n      return this.addBookingProduct();\n    }\n\n    // we want to ignore the click action when the type of button is submit a form\n    if (this.hostAttributes.type === 'submit') {\n      return false;\n    }\n    event.preventDefault();\n    /**\n     * by default the quick add is just an alias for add item function\n     * but its work only when the id is the only value is passed via the object\n     * so we will filter the object entities to remove null and zero values in case we don't want the normal add item action\n     */\n    const data = Object.entries({\n      id: this.productId,\n      donating_amount: this.donatingAmount,\n      quantity: this.quantity,\n      endpoint: 'quickAdd'\n    }).reduce((a, [k, v]) => (v ? (a[k] = v, a) : a), {})\n    return salla.cart.addItem(data)\n      .then(response => {\n        this.selectedOptions = [];\n        this.success.emit(response);\n      })\n      .catch(error => this.failed.emit(error));\n\n  }\n\n  private addBookingProduct() {\n    if (salla.config.isGuest()) {\n      salla.auth.api.setAfterLoginEvent('booking::add', this.productId);\n      salla.event.dispatch('login::open');\n      return;\n    }\n    return salla.booking.add(this.productId)\n      .then(resp => this.success.emit(resp))\n      .catch(error => this.failed.emit(error))\n  }\n\n  private getBtnAttributes() {\n    for (let i = 0; i < this.host.attributes.length; i++) {\n      if (!['id', 'class'].includes(this.host.attributes[i].name)) {\n        this.hostAttributes[this.host.attributes[i].name] = this.host.attributes[i].value;\n      }\n    }\n\n    return this.hostAttributes;\n  }\n  \n  private getQuickBuyBtnAttributes() {\n    return {...this.getBtnAttributes(), type: this.supportStickyBar && window.innerWidth <= 768 ? 'plain' : this.productType == 'donating' ? 'donate' : 'buy'}\n  }\n\n\n  componentWillLoad(): void {\n    this.passedLabel = this.host.innerHTML.replace('<!---->', '').trim();\n    if (!!this.passedLabel && window.innerWidth >= 768) {\n      this.btn?.setText(this.passedLabel);\n      return;\n    }\n    if (this.host.hasAttribute('type') && this.host.getAttribute('type') === 'submit' && this.supportStickyBar) {\n      window.addEventListener('resize', () => {\n        if (window.innerWidth >= 768 && !!this.passedLabel) {\n          this.btn?.setText(this.passedLabel)\n        } else {\n          this.btn?.setText(this.getLabel())\n        }\n      });\n    }\n  }\n\n\n  render() {\n    //TODO:: find a better fix, this is a patch for issue that duplicates the buttons more than twice @see the screenshot inside this folder\n    if (this.host.closest('.swiper-slide')?.classList.contains('swiper-slide-duplicate')) {\n      return ''\n    }\n    if (this.hasSubscribedOptions) {\n      return <Host>\n        <salla-product-availability {...this.getBtnAttributes()} is-subscribed={true}>\n          <span class=\"s-hidden\"><slot /></span>\n        </salla-product-availability>\n      </Host>;\n    }\n\n    if ((this.productStatus === 'out-and-notify' && this.channels) || this.hasOutOfStockOption) {\n      return <Host>\n        <salla-product-availability {...this.getBtnAttributes()}>\n          <span class=\"s-hidden\"><slot /></span>\n        </salla-product-availability>\n      </Host>;\n    }\n\n    return <Host class={{'s-add-product-button-with-quick-buy': this.showQuickBuy, 's-add-product-button-with-sticky-bar': this.supportStickyBar}}>\n      <salla-button color={this.productStatus === 'sale' ? 'primary' : 'light'}\n                    type=\"button\"\n                    fill={this.productStatus === 'sale' ? 'solid' : 'outline'}\n                    ref={el => this.btn = el as HTMLSallaButtonElement}\n                    onClick={event => this.addProductToCart(event)}\n                    disabled={this.productStatus !== 'sale'}\n                    {...this.getBtnAttributes()}\n                    loader-position=\"center\"\n      >\n        <slot/>\n      </salla-button>\n      {this.showQuickBuy ? <salla-quick-buy {...this.getQuickBuyBtnAttributes()} /> : ''}\n    </Host>;\n  }\n\n  componentDidLoad() {\n    if (!this.notifyOptionsAvailability) {\n      return;\n    }\n\n    salla.event.on('product-options::change', async data => {\n      if (!['thumbnail', 'color', 'single-option'].includes(data.option.type)) {\n        return;\n      }\n      this.hasSubscribedOptions = false;\n      this.selectedOptions = await (document.querySelector(`salla-product-options[product-id=\"${this.productId}\"]`) as any)?.getSelectedOptions();\n      this.hasOutOfStockOption = await (document.querySelector(`salla-product-options[product-id=\"${this.productId}\"]`) as any)?.hasOutOfStockOption();\n      let subscribedDetails = salla.storage.get(`product-${this.productId}-subscribed-options`);\n\n      if (!subscribedDetails && !this.subscribedOptions || !this.hasOutOfStockOption) {\n        return;\n      }\n\n      if (salla.config.isGuest()) {\n        const parsedSubscribedDetails = subscribedDetails ? subscribedDetails.map(ids => ids.split(',').map(id => parseInt(id))) : [];\n\n        this.hasSubscribedOptions = parsedSubscribedDetails.length > 0 && parsedSubscribedDetails.some(ids =>\n          ids.every(id => this.selectedOptions.some(option => option.id === id))\n        );\n      } else {\n        this.hasSubscribedOptions = this.subscribedOptions && this.subscribedOptions !== 'null' && this.subscribedOptions !== '[]' ? JSON.parse(this.subscribedOptions).some(ids =>\n          ids.every(id => this.selectedOptions.some(option => option.id === id))\n        ) : false;\n      }\n    });\n\n\n  }\n  componentDidRender(): void {\n    //if label not passed, get label\n    if (!!this.passedLabel && (!this.supportStickyBar || window.innerWidth >= 768)) {\n      // if passed label, set it\n      this.btn?.setText(this.passedLabel)\n      return;\n    }\n    this.btn?.setText(this.getLabel())\n\n    salla.lang.onLoaded(() => this.btn?.setText(this.getLabel()));\n  }\n}\n"]}