@salla.sa/twilight-components 2.13.73 → 2.13.75

package/dist/twilight/p-5f361320.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["DisplayType","Currency","sallaProductOptionsCss","SallaProductOptions","constructor","hostRef","this","fileTypes","pdf","png","jpg","word","exl","txt","outSkus","handleDonationOptions","event","detail","type","salla","helpers","inputDigitsOnly","target","emit","id","productId","price","value","preventDefault","stopPropagation","isCustomDonation","donationInput","focus","hideLabel","option","DONATION","donation","can_donate","getExpireDonationMessage","completed","target_amount","collected_amount","h","class","target_message","money","lang","get","getWithDefault","config","canDisabled","onLoaded","outOfStockText","donationAmount","selectDonationAmount","selectAmount","options","setOptionsData","Array","isArray","JSON","parse","e","log","optionsData","url","is_page","api","product","getDetails","then","resp","data","that","_b","_a","details","forEach","Object","entries","skus_availability","filter","sku","map","push","Number","getSelectedOptionsData","selectedOptions","formData","host","getElementSallaData","key","startsWith","replace","reportValidity","requiredElements","querySelectorAll","pass","i","length","hasOutOfStockOption","some","is_out","selectedSkus","every","includes","getSelectedOptions","getOption","option_id","find","invalidHandler","closestProductOption","closest","scrollIntoView","behavior","block","classList","add","changedHandler","optionElement","FILE","IMAGE","MAP","lat","lng","setTimeout","remove","index","findIndex","assign","setSelectedSkus","handleRequiredMultipleOptions","changed","keys","reduce","p","c","MULTIPLE_OPTIONS","required","optionContainer","querySelector","hasChecked","input","toggleAttribute","getLatLng","split","getDisplayForType","COLOR_PICKER","colorPickerOption","multipleOptions","SINGLE_OPTION","singleOption","getOptionShownWhen","visibility_condition","operator","componentWillLoad","Promise","resolve","onReady","cart","getCurrentCartId","render","Host","name","splitterOption","htmlFor","placeholder","componentDidLoad","selectedDonationOption","is_selected","additional_price","donationOption","checked","onChange","custom_amount_enabled","shown","ref","el","onInput","onBlur","onInvalid","currency","symbol","fileUploader","additions","height","onAdded","getUploadImageEndpoint","cart_item_id","product_id","onInvalidInput","innerHTML","accept","CameraIcon","FileIcon","imageOption","fileOption","types","Boolean","join","numberOption","textOption","maxLength","textareaOption","rows","mapOption","zoom","searchable","onSelected","onSubmitted","color","timeOption","noCalendar","enableTime","dateFormat","onPicked","dateOption","minDate","Date","datetimeOption","maxDate","to_date_time","from_date_time","getOptionDetailName","outOfStock","optionType","COLOR","isOptionDetailOut","isDetailSelected","outSelectableSkus","disabled","selected","is_required","colorOption","style","thumbnailOption","option_value","image","src","title","alt","CheckCircleIcon"],"sources":["src/components/salla-product-options/interfaces.ts","src/components/salla-product-options/salla-product-options.scss?tag=salla-product-options","src/components/salla-product-options/salla-product-options.tsx"],"sourcesContent":["export enum DisplayType {\n  COLOR = \"color\",\n  DATE = \"date\",\n  DATETIME = \"datetime\",\n  DONATION = \"donation\",\n  IMAGE = \"image\",\n  MULTIPLE_OPTIONS = \"multiple-options\",\n  NUMBER = \"number\",\n  SINGLE_OPTION = \"single-option\",\n  SPLITTER = \"splitter\",\n  TEXT = \"text\",\n  TEXTAREA = \"textarea\",\n  THUMBNAIL = \"thumbnail\",\n  TIME = \"time\",\n  RADIO = \"radio\",\n  CHECKBOX = \"checkbox\",\n  MAP = \"map\",\n  FILE = \"file\", // similar to image type (file-uploader component)\n  COLOR_PICKER = \"color_picker\"\n\n}\n\nexport interface ProductDetail {\n  id: string;\n  sku: string;\n  name: string;\n  description: string;\n  url: string;\n  promotion_title: string;\n  subtitle: string;\n  type: string;\n  status: string;\n  price: number;\n  sale_price: number;\n  regular_price: number;\n  starting_price: null;\n  quantity: number;\n  max_quantity: number;\n  discount_ends: number;\n  is_taxable: boolean;\n  has_read_more: boolean;\n  can_add_note: boolean;\n  can_show_remained_quantity: boolean;\n  can_upload_file: boolean;\n  has_custom_form: boolean;\n  is_on_sale: boolean;\n  is_hidden_quantity: boolean;\n  is_available: boolean;\n  is_out_of_stock: boolean;\n  weight: null;\n  calories: null;\n  image: SimpleImage;\n  brand: Brand;\n  donation?: ProductDonation;\n  images: Image[];\n  tags: Tag[];\n  notify_availability: null;\n  rating: Rating;\n  options: Option[];\n  sold_quantity: number;\n  category: Category;\n}\n\nexport interface SimpleImage {\n  url: string;\n  alt: string;\n}\n\nexport interface Category {\n  name: string;\n  url: string;\n  icon: string;\n}\n\nexport interface ProductDonation {\n  target_message?: string;\n  collected_amount?: number;\n  target_amount?: number;\n  target_percent?: number;\n  target_end_date?: string;\n  can_donate: boolean;\n  custom_amount_enabled: boolean;\n}\n\nexport interface Image {\n  id: number;\n  url: string;\n  main: boolean;\n  three_d_image_url: string;\n  alt: string;\n  video_url: string;\n  type: string;\n  sort: number;\n}\n\nexport interface Option {\n  id: number;\n  name: string;\n  required: boolean;\n  type: string;\n  placeholder: string;\n  option_type: string;\n  not_same_day_order: boolean;\n  availability_range: number;\n  from_date_time: null;\n  to_date_time: null;\n  visibility_condition?: { option: number, operator: \"=\" | \"!=\", value: number };\n  details?: Detail[];\n  condition_attributes: string;\n  value?: any;\n  length?: number;\n  donation?: Donation\n}\n\nexport interface Donation {\n  custom_amount_enabled: boolean;\n  target_message?: string;\n  target_date: string | \"2023-04-18\";\n  target_end_date: string | \"2023-04-18\";\n  target_amount: number;\n  collected_amount: number;\n  can_donate: boolean;\n}\n\nexport interface Detail {\n  id: number;\n  option_id: number;\n  name: string;\n  additional_price: number;\n  option_value: null | string;\n  image: null | string;\n  color: null | string;\n  is_out: boolean;\n  skus_availability?: { [sku_id: number]: boolean };\n  is_selected: boolean;\n}\n\nexport interface Brand {\n  id: string;\n  url: string;\n  name: string;\n  logo: string;\n}\n\nexport interface PreTaxPrice {\n  amount: number;\n  currency: Currency;\n}\n\nexport enum Currency {\n  Sar = \"SAR\",\n}\n\nexport interface Promotion {\n  title: string;\n  sub_title: string;\n}\n\nexport interface Rating {\n  count: number;\n  stars: number;\n}\n\nexport interface Tag {\n  name: string;\n  url: string;\n}\n","\n.s-product-options{\n  &-wrapper{\n\n  }\n  &-option-container{\n\n  }\n  &-option{\n\n  }\n  &-option-label{\n\n  }\n  &-option-content{\n\n  }\n  &-colors-wrapper{\n\n  }\n  &-date-element{\n\n  }\n  &-time-element{\n    \n  }\n  &-datetime-element{\n\n  }\n  &-image-input{\n\n  }\n  &-multiple-options-wrapper{\n\n  }\n  &-splitter{\n\n  }\n  &-text{\n\n  }\n  &-textarea{\n\n  }\n  &-thumbnails-wrapper{\n\n  }\n}","import { Component, Prop, h, State, Element, Host, Event, EventEmitter, Method } from '@stencil/core';\nimport { Option, DisplayType, Detail } from './interfaces';\nimport CheckCircleIcon from '../../assets/svg/check.svg';\nimport CameraIcon from '../../assets/svg/camera.svg';\nimport FileIcon from '../../assets/svg/file-upload.svg';\n\n\n@Component({\n  tag: 'salla-product-options',\n  styleUrl: 'salla-product-options.scss',\n})\nexport class SallaProductOptions {\n\n  constructor() {\n    this.canDisabled = !salla.config.get('store.settings.product.notify_options_availability');\n    salla.lang.onLoaded(() => {\n      this.outOfStockText = salla.lang.get(\"pages.products.out_of_stock\");\n      this.donationAmount = salla.lang.get('pages.products.donation_amount');\n      this.selectDonationAmount = salla.lang.getWithDefault('pages.products.select_donation_amount', 'تحديد مبلغ التبرع');\n      this.selectAmount = salla.lang.getWithDefault('pages.products.select_amount', 'اختر المبلغ');\n    });\n\n    if (this.options) {\n      try {\n        this.setOptionsData(Array.isArray(this.options) ? this.options : JSON.parse(this.options));\n        return;\n      } catch (e) {\n        salla.log('Bad json passed via options prop');\n      }\n    }\n    if (!Array.isArray(this.optionsData)) {\n      salla.log('Options is not an array[] ---> ', this.optionsData);\n      this.setOptionsData([]);\n    }\n\n    if (this.productId && !salla.url.is_page('cart')) {\n      salla.api.product.getDetails(this.productId, ['options']).then(resp => this.setOptionsData(resp.data.options));\n    }\n  }\n\n  private setOptionsData(optionsData: Option[]) {\n    this.optionsData = optionsData;\n    let that = this\n    this.optionsData[0]?.details?.forEach(function (detail) {\n      Object.entries(detail.skus_availability || {})\n        .filter(sku => !sku[1])\n        .map(sku => that.outSkus.push(Number(sku[0])));\n    });\n  }\n\n  @Element() host: HTMLElement;\n\n  private fileTypes: Object = {\n    pdf: 'application/pdf',\n    png: 'image/png',\n    jpg: 'image/jpeg',\n    word: 'application/doc,application/ms-doc,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document',\n    exl: 'application/excel,application/vnd.ms-excel,application/x-excel,application/x-msexcel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',\n    txt: 'text/plain',\n  };\n\n  @State() optionsData: Option[];\n  @State() outOfStockText: string = ''\n  @State() donationAmount: string = salla.lang.get('pages.products.donation_amount')\n  @State() selectDonationAmount: string = salla.lang.getWithDefault('pages.products.select_donation_amount', 'تحديد مبلغ التبرع')\n  @State() selectAmount: string = salla.lang.getWithDefault('pages.products.select_amount', 'اختر المبلغ')\n  @State() isCustomDonation: boolean = false;\n  @State() selectedOptions: Array<any> = [];\n  @State() canDisabled: boolean;\n  @State() selectedSkus?: Array<string | number>;\n  @State() selectedOutSkus?: Array<string | number>;\n  private outSkus: Array<string | number> = [];\n  private donationInput?: HTMLInputElement;\n\n  /**\n   * The id of the product to which the options are going to be fetched for.\n   */\n  @Prop() productId: number = salla.config.get('page.id');\n\n  /**\n   * Product detail information.\n   */\n  @Prop() options: string;\n\n  /**\n   * Get the id's of the selected options.\n   * */\n  @Method()\n  async getSelectedOptionsData() {\n    let selectedOptions = {}\n    let formData = (this.host as any).getElementSallaData();\n    formData.forEach(function (value, key) {\n      key.startsWith('options[') && (selectedOptions[key.replace('options[', '').replace(']', '')] = value);\n    });\n    return selectedOptions;\n  }\n\n  /**\n   * Report options form validity.\n   * */\n  @Method()\n  async reportValidity() {\n    let requiredElements: Array<HTMLInputElement> = this.host.querySelectorAll('[required]') as any;\n    let pass = true;\n    for (let i = 0; i < requiredElements.length; i++) {\n      //if there is only one invalid option, return false\n      if ('reportValidity' in requiredElements[i] && !requiredElements[i].reportValidity()) {\n        pass = false;\n      }\n    }\n    return pass;\n  }\n\n  /**\n   * Return true if there is any out of stock options are selected and vise versa.\n   * */\n  @Method()\n  async hasOutOfStockOption() {\n    return this.selectedOptions.some(option => option.is_out) || (this.selectedSkus?.length && this.selectedSkus?.every(sku => this.outSkus.includes(sku)));\n  }\n\n  /**\n   * Get selected options.\n   * */\n  @Method()\n  async getSelectedOptions() {\n    return this.selectedOptions;\n  }\n\n  /**\n   * Get a specific option by its id.\n   * */\n  @Method()\n  async getOption(option_id) {\n    return this.optionsData.find(option => option.id === option_id);\n  }\n\n  /**\n   * An event that emitted when any option is changed.\n   */\n  @Event() changed: EventEmitter;\n\n  // @ts-ignore\n  private invalidHandler(event, option: Option) {\n    const closestProductOption = (event.target as HTMLInputElement).closest('.s-product-options-option') as HTMLElement;\n    if (!salla.url.is_page('cart')) {\n      closestProductOption.scrollIntoView({ behavior: 'smooth', block: 'center' });\n    }\n    closestProductOption.classList.add('s-product-options-option-error');\n  }\n\n  private changedHandler(event, option) {\n    let data = { event: event, option: option, detail: null };\n    if (option.details) {\n      let detail = option.details.find((detail) => {\n        return Number(detail.id) === Number(event.target.value);\n      });\n      data.detail = detail\n    }\n\n    let optionElement = event.target.closest('.s-product-options-option');\n    if (event.target.value\n      || ((option.type == DisplayType.FILE || option.type == DisplayType.IMAGE) && event.type === 'added')\n      || (option.type == DisplayType.MAP && event.type === 'selected' && (event.target.lat && event.target.lng))) {\n      setTimeout(() => {\n        optionElement.classList.remove('s-product-options-option-error');\n      }, 200);\n    }\n\n    const index = this.selectedOptions.findIndex(option => option.option_id === data.option.id);\n    index > -1 ? this.selectedOptions[index] = {\n      ...data.detail,\n      option_id: data.option.id\n    } : this.selectedOptions.push({ ...data.detail, option_id: data.option.id })\n\n    if (option.type == DisplayType.DONATION) {\n      salla.event.emit('product-options::donation-changed', {\n        id: this.productId,\n        price: event.target.value\n      });\n    }\n    this.setSelectedSkus();\n    this.handleRequiredMultipleOptions(option);\n    this.changed.emit(data);\n    salla.event.emit('product-options::change', data);\n  }\n\n\n  private handleDonationOptions = (event, detail, type) => {\n    if (detail == 'custom' && type == 'input') {\n      salla.helpers.inputDigitsOnly(event.target)\n      salla.event.emit('product-options::donation-changed', {\n        id: this.productId,\n        price: event.target.value\n      });\n      return;\n    }\n    event.preventDefault();\n    event.stopPropagation();\n    this.isCustomDonation = event.target.value === 'custom';\n    if (this.donationInput) {\n      if (event.target.value === 'custom') {\n        this.donationInput.value = '';\n        this.donationInput.focus()\n      } else {\n        this.donationInput.value = event.target.value;\n      }\n      if (detail == 'custom') {\n        return\n      }\n      salla.event.emit('product-options::donation-changed', {\n        id: this.productId,\n        price: event.target.value\n      });\n    }\n  }\n\n  private hideLabel = (option) => {\n    if (option.type === DisplayType.DONATION && (option.donation && !option.donation.can_donate)) {\n      return true;\n    }\n    return false;\n  }\n\n  private getExpireDonationMessage = (option) => {\n    if (!option.donation) {\n      return;\n    }\n    let completed = option.donation.target_amount <= option.donation.collected_amount;\n    return <div class={{ \"s-product-options-donation-message\": true, \"s-product-options-donation-completed\": completed, \"s-product-options-donation-expired\": !completed }}>\n      <p>{option.donation.target_message}</p>\n      <span>{completed ? salla.money(option.donation.target_amount) : ''}</span>\n    </div>\n  }\n  /**\n   * loop throw all selected details, then get common sku, if it's only one, means we selected all of them;\n   */\n  private setSelectedSkus() {\n    this.selectedSkus = this.selectedOptions.map(detail => Object.keys(detail.skus_availability || {}))\n      .reduce((p, c) => p.filter(e => c.includes(e)))\n      .map(sku => Number(sku));\n  }\n\n  private handleRequiredMultipleOptions(option) {\n    if (option.type !== DisplayType.MULTIPLE_OPTIONS || !option.required) {\n      return;\n    }\n    const optionContainer = this.host.querySelector(`[data-option-id=\"${option.id}\"]`);\n    const hasChecked = optionContainer.querySelectorAll('input:checked').length;\n    optionContainer.querySelectorAll('input').forEach(input => input.toggleAttribute('required', !hasChecked));\n  }\n\n  private getLatLng(value, type: 'lat' | 'lng') {\n    return value\n      ? value.split(',')[type == 'lat' ? 0 : 1]\n      : '';\n  }\n\n  private getDisplayForType(option: Option) {\n    if (this[`${option.type}Option`]) {\n      return this[`${option.type}Option`](option);\n    }\n\n    if (option.type === DisplayType.COLOR_PICKER) {\n      return this.colorPickerOption(option)\n    }\n\n    if (option.type === DisplayType.MULTIPLE_OPTIONS) {\n      return this.multipleOptions(option);\n    }\n\n    if (option.type === DisplayType.SINGLE_OPTION) {\n      return this.singleOption(option);\n    }\n    salla.log(`Couldn't find options type(${option.type})😢`);\n    return '';\n  }\n\n  protected getOptionShownWhen(option: Option) {\n    return option.visibility_condition\n      ? { \"data-show-when\": `options[${option.visibility_condition.option}] ${option.visibility_condition.operator} ${option.visibility_condition.value}` }\n      : {};\n  }\n\n  //we need the cart Id for productOption Image\n  componentWillLoad() {\n    this.outOfStockText = salla.lang.get('pages.products.out_of_stock')\n    return (new Promise(resolve => salla.onReady(resolve))).then(() => salla.api.cart.getCurrentCartId());\n  }\n\n  render() {\n    if (this.optionsData?.length == 0) {\n      return;\n    }\n\n    return (\n      <Host class=\"s-product-options-wrapper\">\n        {/* TODO:: move salla-conditional-field logic to here, no need of another component*/}\n        <salla-conditional-fields>\n          {this.optionsData.map((option: Option) =>\n            <div class={`s-product-options-option-container${option.visibility_condition ? ' hidden' : ''}`}\n              data-option-id={option.id}\n              {...this.getOptionShownWhen(option)}>\n              {option.name == 'splitter' ?\n                this.splitterOption()\n                : <div class=\"s-product-options-option\" data-option-type={option.type}\n                  data-option-required={`${option.required}`}>\n                  <label htmlFor={'options[' + option.id + ']'} class={`s-product-options-option-label ${this.hideLabel(option) ? 's-product-options-option-label-hidden' : ''}`}>\n                    <b>\n                      {option.name}\n                      {option.required && <span> * </span>} </b>\n                    <small>{option.placeholder}</small>\n                  </label>\n                  <div class={`s-product-options-option-content ${this.hideLabel(option) ? 's-product-options-option-content-full-width' : ''}`}>\n                    {this.getDisplayForType(option)}\n                  </div>\n                </div>}\n            </div>\n          )}\n        </salla-conditional-fields>\n      </Host>\n    );\n\n  }\n\n  componentDidLoad(){\n    if (this.optionsData?.length == 0 && !this.optionsData.some(option => option.type == DisplayType.DONATION)) {\n      return;\n    }\n    let selectedDonationOption =  this.optionsData.find(option => option.type == DisplayType.DONATION)?.details.find(detail => detail.is_selected);\n    if (!selectedDonationOption) {\n      return;\n    }\n    setTimeout(() => {\n      salla.event.emit('product-options::donation-changed', {\n        id: this.productId,\n        price: selectedDonationOption.additional_price\n      });\n    }, 1000);\n  }\n  //@ts-ignore\n  private donationOption(option: Option, product: Product) {\n    return <div class=\"s-product-options-donation-wrapper\">\n\n      {option.donation?.can_donate ? [\n        option.donation ?\n          <div class=\"s-product-options-donation-progress\">\n            <salla-progress-bar donation={option.donation}>\n            </salla-progress-bar>\n          </div>\n          : '',\n        option.details.length ?\n          [<h4>{this.selectAmount}</h4>,\n          <div class=\"s-product-options-donation-options\">\n            {option.details.map((detail, i) =>\n              <div class=\"s-product-options-donation-options-item\">\n                <input id={`donation-option-${i}`} type=\"radio\" name=\"donating_option\" checked={detail.is_selected} value={detail.additional_price} onChange={e => this.handleDonationOptions(e, detail, 'option')} />\n                <label htmlFor={`donation-option-${i}`}>\n                  <span>{salla.money(detail.name)}</span>\n                </label>\n              </div>\n            )}\n            {option.donation?.custom_amount_enabled ?\n              <div class=\"s-product-options-donation-options-item\">\n                <input id={`donation-option-custom`} type=\"radio\" name=\"donating_option\" value=\"custom\" onChange={e => this.handleDonationOptions(e, 'custom', 'option')} />\n                <label htmlFor={`donation-option-custom`}>\n                  <span> {this.selectDonationAmount} </span>\n                </label>\n              </div>\n              : ''\n            }\n          </div>] : '',\n\n        <div class={{ \"s-product-options-donation-input-group\": true, \"shown\": !option.details.length || (option.details.length && this.isCustomDonation) }}>\n          <input\n            type=\"text\"\n            id=\"donating-amount\"\n            name=\"donation_amount\"\n            class=\"s-form-control\"\n            ref={el => this.donationInput = el as HTMLInputElement}\n            value={\n              option.details.length\n                && option.details.some(detail => detail.is_selected)\n                ? option.details.find(detail => detail.is_selected).additional_price\n                : option.value}\n            // required\n            placeholder={option.placeholder}\n            onInput={e => this.handleDonationOptions(e, 'custom', 'input')}\n            onBlur={e => this.changedHandler(e, option)}\n            onInvalid={(e) => this.invalidHandler(e, option)}\n          />\n          {/* value={option.value} */}\n          <span class=\"s-product-options-donation-amount-currency\">\n            {salla.config.currency(salla.config.get('user.currency_code')).symbol}\n          </span>\n        </div>\n      ] :\n        this.getExpireDonationMessage(option)\n      }\n    </div>\n  }\n\n  private fileUploader(option: Option, additions: Object | null = null) {\n    return <salla-file-upload\n      {...(additions || {})}\n      payload-name=\"file\"\n      value={option.value}\n      instant-upload={true}\n      name={`options[${option.id}]`}\n      required={!option.visibility_condition && option.required}\n      height=\"120px\"\n      onAdded={(e) => this.changedHandler(e, option)}\n      url={salla.cart.api.getUploadImageEndpoint()}\n      form-data={{ cart_item_id: this.productId, product_id: this.productId }}\n      onInvalidInput={(e) => this.invalidHandler(e, option)}\n      class={{ \"s-product-options-image-input\": true, required: option.required }}\n    >\n      <div class=\"s-product-options-filepond-placeholder\">\n        <span class=\"s-product-options-filepond-placeholder-icon\"\n          innerHTML={(additions as any).accept && (additions as any).accept.split(',').every(type => type.includes('image'))\n            ? CameraIcon\n            : FileIcon}\n        />\n        <p class=\"s-product-options-filepond-placeholder-text\">{salla.lang.get('common.uploader.drag_and_drop')}</p>\n        <span class=\"filepond--label-action\">{salla.lang.get('common.uploader.browse')}</span>\n      </div>\n    </salla-file-upload>\n  }\n\n  //@ts-ignore\n  private imageOption(option: Option) {\n    return this.fileUploader(option, { accept: 'image/png,image/jpeg,image/jpg,image/gif' });\n  }\n\n  //@ts-ignore\n  private fileOption(option: Option) {\n    let types = option.details.map(detail => this.fileTypes[detail.name]).filter(Boolean);\n    return types?.length\n      ? this.fileUploader(option, { accept: types.join(',') })\n      : 'File types not selected.';\n  }\n\n  // TODO: (ONLY FOR TESTING!) find a better way to make it testable, e.g. wrap it with a unique class like textOption\n  //@ts-ignore\n  private numberOption(option: Option) {\n    return <input\n      type=\"text\"\n      value={option.value}\n      class=\"s-form-control\"\n      required={!option.visibility_condition && option.required}\n      name={`options[${option.id}]`}\n      placeholder={option.placeholder}\n      onBlur={e => this.changedHandler(e, option)}\n      onInvalid={(e) => this.invalidHandler(e, option)}\n      onInput={e => salla.helpers.inputDigitsOnly(e.target)} />\n  }\n\n  //@ts-ignore\n  private splitterOption() {\n    return <div class=\"s-product-options-splitter\" />\n  }\n\n  //@ts-ignore\n  private textOption(option: Option) {\n    return <div class=\"s-product-options-text\">\n      <input\n        type=\"text\"\n        value={option.value}\n        maxLength={option?.length}\n        class='s-form-control'\n        required={!option.visibility_condition && option.required}\n        name={`options[${option.id}]`}\n        placeholder={option.placeholder}\n        onInvalid={(e) => this.invalidHandler(e, option)}\n        onInput={e => this.changedHandler(e, option)} />\n    </div>\n  }\n\n  //@ts-ignore\n  private textareaOption(option: Option) {\n    //todo::remove mt-1 class, and if it's okay to remove the tag itself will be great\n    return <div class=\"s-product-options-textarea\">\n      <div class=\"mt-1\">\n        <textarea\n          rows={4}\n          value={option.value}\n          maxLength={option?.length}\n          class=\"s-form-control\"\n          required={!option.visibility_condition && option.required}\n          id={`options[${option.id}]`}\n          name={`options[${option.id}]`}\n          placeholder={option.placeholder}\n          onInvalid={(e) => this.invalidHandler(e, option)}\n          onInput={(e) => this.changedHandler(e, option)} />\n      </div>\n    </div>\n  }\n\n  //@ts-ignore\n  private mapOption(option: Option) {\n    return <salla-map\n      zoom={15}\n      lat={this.getLatLng(option.value, 'lat')}\n      lng={this.getLatLng(option.value, 'lng')}\n      name={`options[${option.id}]`}\n      searchable={true}\n      required={option.required}\n      onInvalidInput={(e) => this.invalidHandler(e, option)}\n      onSelected={e => this.changedHandler(e, option)} />\n  }\n\n  private colorPickerOption(option: Option) {\n    return <salla-color-picker\n      onSubmitted={e => this.changedHandler(e, option)}\n      name={`options[${option.id}]`}\n      required={!option.visibility_condition && option.required}\n      onInvalidInput={(e) => this.invalidHandler(e, option)}\n      color={option.value} />\n  }\n\n  /**\n   * ============= Date Time options =============\n   */\n  //@ts-ignore\n  private timeOption(option: Option) {\n    return <salla-datetime-picker\n      noCalendar={true}\n      enableTime={true}\n      dateFormat=\"h:i K\"\n      value={option.value}\n      placeholder={option.name}\n      required={!option.visibility_condition && option.required}\n      name={`options[${option.id}]`}\n      class=\"s-product-options-time-element\"\n      onInvalidInput={(e) => this.invalidHandler(e, option)}\n      onPicked={e => this.changedHandler(e, option)} />\n  }\n\n  //@ts-ignore\n  private dateOption(option: Option) {\n    //todo:: consider date-range @see https://github.com/SallaApp/theme-raed/blob/master/src/assets/js/partials/product-options.js#L8-L23\n    return <div class=\"s-product-options-date-element\">\n      <salla-datetime-picker\n        value={option.value}\n        placeholder={option.name}\n        required={!option.visibility_condition && option.required}\n        minDate={new Date()}\n        name={`options[${option.id}]`}\n        onInvalidInput={(e) => this.invalidHandler(e, option)}\n        onPicked={e => this.changedHandler(e, option)} />\n    </div>\n  }\n\n  //@ts-ignore\n  private datetimeOption(option: Option) {\n    //todo:: consider date-range @see https://github.com/SallaApp/theme-raed/blob/master/src/assets/js/partials/product-options.js#L8-L23\n    return <div class=\"s-product-options-datetime-element\">\n      <salla-datetime-picker\n        enableTime={true}\n        value={option.value}\n        dateFormat=\"Y-m-d G:i:K\"\n        placeholder={option.name}\n        required={!option.visibility_condition && option.required}\n        name={`options[${option.id}]`}\n        maxDate={option.to_date_time}\n        minDate={option.from_date_time}\n        onInvalidInput={(e) => this.invalidHandler(e, option)}\n        onPicked={e => this.changedHandler(e, option)} />\n    </div>\n  }\n\n  /**\n   * ============= Advanced options =============\n   */\n  protected getOptionDetailName(detail: Detail, outOfStock: boolean = true, optionType?: string) {\n    if (optionType && optionType == DisplayType.COLOR) {\n      return detail.name\n        + ((outOfStock && this.isOptionDetailOut(detail)) ? ` <br/> <p> ${this.outOfStockText} </p>` : '')\n        + (detail.additional_price ? ` <p> (${salla.money(detail.additional_price)}) </p>` : '');\n    }\n\n    return detail.name\n      + ((outOfStock && this.isOptionDetailOut(detail)) ? ` - ${this.outOfStockText}` : '')\n      + (detail.additional_price ? ` (${salla.money(detail.additional_price)})` : '');\n  }\n\n\n  protected isOptionDetailOut(detail: Detail) {\n    if (detail.is_out || !detail.skus_availability || !this.selectedSkus?.length) {\n      return detail.is_out;\n    }\n\n    let isDetailSelected = this.selectedOptions.filter(option => option.id == detail.id).length;\n    //if the current options is the only selected option, so we are sure that it's not out, because there is no other options selected yet\n    if (isDetailSelected && this.selectedOptions.length == 1) {\n      return false;\n    }\n\n    //if current details has sku in the possible outSkus it's out for sure\n    if (isDetailSelected) {\n      //here we will get the possible outSkus for current selected options\n      let outSelectableSkus = this.selectedSkus.filter(sku => this.outSkus.includes(sku));\n      return Object.keys(detail.skus_availability).some(sku => outSelectableSkus.includes(Number(sku)))\n    }\n\n    return this.selectedOptions.some(option => option.is_out && option.option_id !== detail.option_id)\n\n  }\n\n  private singleOption(option: Option) {\n    return <div>\n      <select name={`options[${option.id}]`}\n        required={!option.visibility_condition && option.required}\n        class=\"s-form-control\"\n        onInvalid={(e) => this.invalidHandler(e, option)}\n        onChange={e => this.changedHandler(e, option)}>\n        <option value=\"\">{option.placeholder}</option>\n        {\n          option?.details.map((detail: Detail) => {\n            return <option value={detail.id} disabled={this.canDisabled && this.isOptionDetailOut(detail)}\n              selected={detail.is_selected}>\n              {this.getOptionDetailName(detail)}\n            </option>\n          })\n        }\n      </select>\n    </div>\n  }\n\n  private multipleOptions(option: Option) {\n    let is_required = option.required && !option.details.some(detail => detail.is_selected) && !option.visibility_condition;\n    return <div class={{ \"s-product-options-multiple-options-wrapper\": true, 'required': option.required }}>\n      {\n        option?.details.map((detail: Detail) => {\n          return <div>\n            <input type=\"checkbox\"\n              value={detail.id}\n              disabled={this.isOptionDetailOut(detail)}\n              checked={detail.is_selected}\n              required={is_required}\n              name={`options[${option.id}][]`}\n              id={`field-${option.id}-${detail.id}`}\n              onChange={(e) => this.changedHandler(e, option)}\n              onInvalid={(e) => this.invalidHandler(e, option)}\n              aria-describedby={`options[${option.id}]-description`} />\n            <label htmlFor={`field-${option.id}-${detail.id}`}>{this.getOptionDetailName(detail)}</label>\n          </div>\n        })\n      }\n    </div>\n  }\n\n  //@ts-ignore\n  private colorOption(option: Option) {\n    return <fieldset class=\"s-product-options-colors-wrapper\">\n      {\n        option?.details.map((detail) =>\n          <div class=\"s-product-options-colors-item\">\n            <input type=\"radio\"\n              value={detail.id}\n              required={!option.visibility_condition && option.required}\n              checked={detail.is_selected}\n              name={`options[${option.id}]`}\n              disabled={this.canDisabled && this.isOptionDetailOut(detail)}\n              id={`color-${this.productId}-${option.id}-${detail.id}`}\n              onInvalid={(e) => this.invalidHandler(e, option)}\n              onChange={e => this.changedHandler(e, option)} />\n            <label htmlFor={`color-${this.productId}-${option.id}-${detail.id}`}>\n              <span style={{ \"background-color\": detail.color }} />\n              <div innerHTML={this.getOptionDetailName(detail, true, option.type)}></div>\n            </label>\n          </div>\n        )\n      }\n    </fieldset>\n  }\n\n  //@ts-ignore\n  private thumbnailOption(option: Option) {\n    return <div class=\"s-product-options-thumbnails-wrapper\">\n      {option.details.map((detail: Detail) => {\n        return <div>\n          <input type=\"radio\"\n            value={detail.id}\n            data-itemid={detail.id} //todo:: why need this? it's already in the value!\n            required={!option.visibility_condition && option.required}\n            checked={detail.is_selected}\n            name={`options[${option.id}]`}\n            data-img-id={detail.option_value}\n            disabled={this.canDisabled && this.isOptionDetailOut(detail)}\n            id={`option_${this.productId}-${option.id}_${detail.id}`}\n            onInvalid={(e) => this.invalidHandler(e, option)}\n            onChange={(e) => this.changedHandler(e, option)} />\n          <label htmlFor={`option_${this.productId}-${option.id}_${detail.id}`}\n            data-img-id={detail.option_value}\n            class=\"go-to-slide\">\n            <img data-src={detail.image} src={detail.image} title={detail.name} alt={detail.name} />\n            <span innerHTML={CheckCircleIcon} class=\"s-product-options-thumbnails-icon\" />\n            {this.isOptionDetailOut(detail) ?\n              [\n                <small class=\"s-product-options-thumbnails-stock-badge\">{this.outOfStockText}</small>,\n                this.canDisabled ? <div class=\"s-product-options-thumbnails-badge-overlay\" /> : '',\n              ]\n              : ''}\n          </label>\n          <p>{this.getOptionDetailName(detail, false)} </p>\n        </div>\n      })}\n    </div>\n  }\n}\n"],"mappings":"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"}

package/dist/twilight/p-80998bed.system.entry.js

@@ -1,5 +0,0 @@
-/*!
- * Crafted with ❤ by Salla
- */
-System.register(["./p-f422bbf9.system.js"],(function(e){"use strict";var t,n,i;return{setters:[function(e){t=e.r;n=e.h;i=e.H}],execute:function(){var o;(function(e){e["PERCENTAGE"]="percentage";e["FIXED"]="fixed";e["FREE_PRODUCT"]="free_product"})(o||(o={}));var r;(function(e){e["PRODUCT_COUNT"]="products_count";e["PRODUCT_PURCHASE"]="order_amount"})(r||(r={}));var a=":host{display:block}";var s=e("salla_conditional_offer",function(){function e(e){t(this,e);this.offer=null;this.products={};this.isLoading=true;this.canRender=true}e.prototype.componentWillLoad=function(){var e=this;salla.onReady().then((function(){var e,t,n;if(!((e=salla.config.get("store.features"))===null||e===void 0?void 0:e.includes("conditional-offer"))||!((n=(t=salla.storage.get("cart"))===null||t===void 0?void 0:t.summary)===null||n===void 0?void 0:n.count)){throw new Error("feature or cart object does not existed")}})).then((function(){return salla.api.cart.offers()})).then((function(t){var n=t.data;e.offer=n.find((function(e){return e.type==="conditional"}));e.offer.details.discounts.unshift({value:0,min_spend:0});return e.updateInitialOfferValue()})).then((function(){return e.getProducts()})).then((function(){return salla.event.on("cart::updated",(function(t){return e.updateOfferValues(t)}))})).catch((function(t){e.canRender=false;salla.logger.error("salla-conditional-offer:: Error",t)})).finally((function(){e.isLoading=false}))};e.prototype.getProducts=function(){var e=this;var t=this.offer.details.discounts.filter((function(e){var t=e.type;return t===o.FREE_PRODUCT})).map((function(e){var t=e.value;return t}));if(t.length>0){return salla.product.fetch({source:"selected",source_value:t}).then((function(t){var n=t.data;n.forEach((function(t){var n=t.id,i=t.url,o=t.image;e.products[n]={url:i,image:o}}))}))}};e.prototype.updateInitialOfferValue=function(){var e=this;return salla.api.cart.details().then((function(t){var n=t.data.cart;return e.updateOfferValues(n)}))};e.prototype.updateOfferValues=function(e){var t=e.items,n=e.total;var i;var o=this.offer.details.based_on===r.PRODUCT_COUNT?t.reduce((function(e,t){var n=t.quantity;return e+n}),0):n;this.offer=Object.assign(Object.assign({},this.offer),{details:Object.assign(Object.assign({},(i=this.offer)===null||i===void 0?void 0:i.details),{current_value:o})});return this.offer};e.prototype.getCheckpointContent=function(e){var t,i;if(e.type===o.PERCENTAGE)return"".concat(e.value,"%");if(e.type===o.FIXED)return salla.money(e.value);if(e.type!==o.FREE_PRODUCT){salla.logger.error("salla-conditional-offer:: unexpected type (".concat(e.type,")!"));return""}var r=this.products[e.value];if(!r){salla.logger.error("salla-conditional-offer:: there is no product with id (".concat(e.value,")!"));return""}return n("a",{class:"s-conditional-offer-product-link",href:r.url},n("img",{class:"s-conditional-offer-checkpoint-image-content",loading:"lazy",decoding:"async",alt:((t=r===null||r===void 0?void 0:r.image)===null||t===void 0?void 0:t.alt)||"",src:(i=r===null||r===void 0?void 0:r.image)===null||i===void 0?void 0:i.url}))};e.prototype.getOfferType=function(e){var t;var n=(t=this.offer.details)===null||t===void 0?void 0:t.based_on;if(n===r.PRODUCT_COUNT)return salla.lang.choice("blocks.header.products_count",e.min_spend);if(n===r.PRODUCT_PURCHASE)return salla.money(e.min_spend);salla.logger.warn("salla-conditional-offer:: Unexpected offer detail's based_on value: ".concat(n));return"".concat(e.min_spend)};e.prototype.clamp=function(e,t,n){return Math.max(t,Math.min(e,n))};e.prototype.mapValueRanges=function(e,t,n,i,o){var r=(e-t)*(o-i)/(n-t)+i;if(r===Number.POSITIVE_INFINITY)return 100;if(r===Number.NEGATIVE_INFINITY)return 0;return this.clamp(r,0,100)};e.prototype.getCheckPointView=function(e,t){var i,o;var r=this.offer.details.discounts.findIndex((function(t){var n=t.min_spend;return n===e.min_spend}));var a=(o=(i=this.offer.details.discounts[r-1])===null||i===void 0?void 0:i.min_spend)!==null&&o!==void 0?o:0;var s=this.mapValueRanges(this.offer.details.current_value,a,e.min_spend,0,100);var l=e.min_spend<=this.offer.details.current_value;return n("div",{class:"s-conditional-offer-checkpoint-container"},t>0?[n("div",{key:"progress-line",class:"s-conditional-offer-progress-line-container"},n("div",{class:"s-conditional-offer-progress-line-inactive"}),n("div",{class:"s-conditional-offer-progress-line-active",style:{width:"".concat(s,"%")}})),n("div",{key:"checkpoint",class:"s-conditional-offer-checkpoint ".concat(l?"s-conditional-offer-active-checkpoint":"")},n("div",{class:"s-conditional-offer-item-avatar-content ".concat(l?"active":"")},this.products&&this.getCheckpointContent(e)),n("div",{class:"s-conditional-offer-checkpoint-label ".concat(l?"active":""),innerHTML:this.getOfferType(e)}))]:n("div",{key:"label",class:{"s-conditional-offer-checkpoint-label":true,"first-checkpoint":t===0,active:l},innerHTML:this.getOfferType(e)}))};e.prototype.getLoadingSkeletonView=function(){return n(i,{class:"s-conditional-offer-container "},n("div",{class:"s-conditional-offer-skeleton-wrapper"},n("div",{class:"s-conditional-offer-skeleton-title"},n("salla-skeleton",{height:"16px",width:"30%"})),n("div",{class:"s-conditional-offer-skeleton-subtitle"},n("salla-skeleton",{height:"16px",width:"35%"})),n("div",{class:"s-conditional-offer-skeleton-checkpoints-wrapper"},Array(3).fill(null).map((function(){return[n("salla-skeleton",{key:"checkpoint-line",height:"8px"}),n("div",{class:"s-conditional-offer-skeleton-checkpoint",key:"checkpoint"},n("salla-skeleton",{height:"60px",width:"60px",type:"circle"}))]})))))};e.prototype.render=function(){var e=this;if(!this.canRender)return null;if(this.isLoading)return this.getLoadingSkeletonView();return n(i,{class:"s-conditional-offer-container"},n("div",{class:"s-conditional-offer-title-wrapper"},n("div",{class:"s-conditional-offer-title"},this.offer.title),this.offer.description?n("div",{class:"s-conditional-offer-subtitle"},this.offer.description," ",n("i",{class:"sicon-information"})):null),n("div",{class:"s-conditional-offer-progress-container"},this.offer.details.discounts.map((function(t,i){return n("div",{class:{"flex-1":i>0},key:t.min_spend},e.getCheckPointView(t,i))}))))};return e}());s.style=a}}}));
-//# sourceMappingURL=p-80998bed.system.entry.js.map

package/dist/twilight/p-80998bed.system.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["DiscountType","OfferType","sallaConditionalOfferCss","SallaConditionalOffer","exports","class_1","prototype","componentWillLoad","_this","this","salla","onReady","then","_a","config","get","includes","_c","_b","storage","summary","count","Error","api","cart","offers","_d","data","offer","find","type","details","discounts","unshift","value","min_spend","updateInitialOfferValue","getProducts","event","on","updatedCart","updateOfferValues","catch","error","canRender","logger","finally","isLoading","freeProductIDs","filter","FREE_PRODUCT","map","length","product","fetch","source","source_value","forEach","id","url","image","products","items","total","current_value","based_on","PRODUCT_COUNT","reduce","quantity","Object","assign","getCheckpointContent","discount","PERCENTAGE","concat","FIXED","money","productItem","h","class","href","loading","decoding","alt","src","getOfferType","basedOn","lang","choice","PRODUCT_PURCHASE","warn","clamp","min","max","Math","mapValueRanges","initialMinRange","initialMaxRange","newMinRange","newMaxRange","newRange","Number","POSITIVE_INFINITY","NEGATIVE_INFINITY","getCheckPointView","index","checkpointIndex","findIndex","previousCheckpointValue","progressPercentage","isActive","key","style","width","innerHTML","active","getLoadingSkeletonView","Host","height","Array","fill","render","title","description"],"sources":["src/components/salla-conditional-offer/interfaces.ts","src/components/salla-conditional-offer/salla-conditional-offer.scss?tag=salla-conditional-offer","src/components/salla-conditional-offer/salla-conditional-offer.tsx"],"sourcesContent":["import type { Product } from \"@salla.sa/twilight/types/common\";\n\nexport enum DiscountType {\n    PERCENTAGE = \"percentage\",\n    FIXED = \"fixed\",\n    FREE_PRODUCT = \"free_product\",\n}\n\nexport enum OfferType {\n    PRODUCT_COUNT = \"products_count\",\n    PRODUCT_PURCHASE = \"order_amount\",\n}\n\nexport interface Discount {\n    type?: DiscountType;\n    value?: number;\n    min_spend?: number;\n    max_discount?: number;\n}\n\nexport interface OfferDetails {\n    based_on?: OfferType;\n    ends_at?: number;\n    start_value?: number;\n    end_value?: number;\n    current_value?: number;\n    discounts?: Discount[];\n}\n\nexport interface Offer {\n    id?: number;\n    type?: string;\n    title?: string;\n    description?: string;\n    details?: OfferDetails | null;\n}\n\n\nexport interface ProductDetail {\n    id?: number;\n    sku?: string;\n    name?: string;\n    description?: string;\n    url?: string;\n    promotion_title?: null;\n    subtitle?: null;\n    type?: string;\n    status?: string;\n    price?: number;\n    base_currency_price?: BaseCurrencyPrice;\n    sale_price?: number;\n    regular_price?: number;\n    starting_price?: null;\n    quantity?: null;\n    max_quantity?: number;\n    discount_ends?: null;\n    is_taxable?: boolean;\n    has_read_more?: boolean;\n    can_add_note?: boolean;\n    can_show_remained_quantity?: boolean;\n    can_upload_file?: boolean;\n    has_custom_form?: boolean;\n    has_metadata?: boolean;\n    is_on_sale?: boolean;\n    is_hidden_quantity?: boolean;\n    is_available?: boolean;\n    is_out_of_stock?: boolean;\n    is_require_shipping?: boolean;\n    weight?: null;\n    calories?: null;\n    image?: Image;\n    currency?: string;\n}\n\nexport interface BaseCurrencyPrice {\n    currency?: string;\n    amount?: number;\n}\n\nexport interface Image {\n    url?: string;\n    alt?: string;\n}\n\nexport interface UpdatedCart {\n    items: Array<Product>;\n    total: number;\n}\n",":host {\n  display: block;\n}","import { Component, Host, State, h } from \"@stencil/core\";\nimport {\n    type Discount,\n    DiscountType,\n    type Offer,\n    OfferType,\n    type UpdatedCart,\n} from \"./interfaces\";\nimport type { Product } from \"@salla.sa/twilight/types/common\";\n\n@Component({\n    tag: \"salla-conditional-offer\",\n    styleUrl: \"salla-conditional-offer.scss\",\n})\nexport class SallaConditionalOffer {\n\n    @State() offer: Offer = null;\n    @State() products: Record<string, Pick<Product, 'image' | 'url'>> = {}\n    @State() isLoading = true\n    @State() canRender = true\n\n    componentWillLoad() {\n        salla.onReady().then(() => {\n            if (!salla.config.get('store.features')?.includes('conditional-offer') || !salla.storage.get(\"cart\")?.summary?.count) {\n                throw new Error('feature or cart object does not existed');\n            }\n        })\n            .then(() => salla.api.cart.offers())\n            .then(({ data }: { data: Offer[] }) => {\n                //it's okay if there is an exception here, all thens will be skipped, and will catch the error,\n                this.offer = data.find(offer => offer.type === \"conditional\")\n                this.offer.details.discounts.unshift(({ value: 0, min_spend: 0 }))\n                return this.updateInitialOfferValue()\n            }).then(() => this.getProducts()).then(() => salla.event.on(\"cart::updated\", (updatedCart: UpdatedCart) => this.updateOfferValues(updatedCart)))\n            .catch(error => {\n                this.canRender = false\n                salla.logger.error('salla-conditional-offer:: Error', error)\n            }).finally(() => {\n                this.isLoading = false\n            })\n\n    }\n\n    private getProducts() {\n        const freeProductIDs = this.offer.details.discounts.filter(({ type }) => type === DiscountType.FREE_PRODUCT).map(({ value }) => value)\n        if (freeProductIDs.length > 0) {\n            return salla.product.fetch({ source: 'selected', source_value: freeProductIDs }).then(({ data }: { data: Array<Product> }) => {\n                data.forEach(({ id, url, image }) => {\n                    this.products[id] = { url, image }\n                })\n            })\n        }\n    }\n  \n    private updateInitialOfferValue() {\n        return salla.api.cart.details().then(({ data: { cart } }: { data: { cart: UpdatedCart } }) => this.updateOfferValues(cart))\n    }\n\n    private updateOfferValues({ items, total }: UpdatedCart) {\n        const current_value = this.offer.details.based_on === OfferType.PRODUCT_COUNT ? items.reduce((count: number, { quantity }) => count + quantity, 0,) : total\n        //we need to assign the offer object a new reference to trigger re-rendering\n        this.offer = {\n            ...this.offer, details: {\n                ...this.offer?.details, current_value,\n            }\n        }\n        return this.offer\n    }\n\n    private getCheckpointContent(discount: Discount) {\n\n        if (discount.type === DiscountType.PERCENTAGE) return `${discount.value}%`\n\n        if (discount.type === DiscountType.FIXED) return salla.money(discount.value)\n\n        if (discount.type !== DiscountType.FREE_PRODUCT) {\n            salla.logger.error(`salla-conditional-offer:: unexpected type (${discount.type})!`);\n            return \"\";\n        }\n\n        const productItem = this.products[discount.value]\n\n        if (!productItem) {\n            salla.logger.error(`salla-conditional-offer:: there is no product with id (${discount.value})!`);\n            return \"\";\n        }\n\n        return <a class=\"s-conditional-offer-product-link\" href={productItem.url} >\n            <img\n                class=\"s-conditional-offer-checkpoint-image-content\"\n                loading=\"lazy\"\n                decoding=\"async\"\n                alt={productItem?.image?.alt || \"\"}\n                src={productItem?.image?.url} />\n        </a>\n    }\n\n    private getOfferType(discount: Discount): string {\n        const basedOn = this.offer.details?.based_on;\n        if (basedOn === OfferType.PRODUCT_COUNT) return salla.lang.choice(\"blocks.header.products_count\", discount.min_spend);\n        if (basedOn === OfferType.PRODUCT_PURCHASE) return salla.money(discount.min_spend);\n\n        salla.logger.warn(`salla-conditional-offer:: Unexpected offer detail's based_on value: ${basedOn}`);\n        return `${discount.min_spend}`;\n    }\n\n      private clamp(value: number, min: number, max: number) {\n        return Math.max(min, Math.min(value, max));\n    }\n  \n    private mapValueRanges(value: number, initialMinRange: number, initialMaxRange: number, newMinRange: number, newMaxRange: number) {\n\n        const newRange = ((value - initialMinRange) * (newMaxRange - newMinRange)) / (initialMaxRange - initialMinRange) + newMinRange;\n\n        if (newRange === Number.POSITIVE_INFINITY) return 100\n\n        if (newRange === Number.NEGATIVE_INFINITY) return 0\n\n        return this.clamp(newRange, 0, 100)\n    }\n\n    private getCheckPointView(discount: Discount, index: number) {\n        const checkpointIndex = this.offer.details.discounts.findIndex(({ min_spend }) => min_spend === discount.min_spend);\n        const previousCheckpointValue = this.offer.details.discounts[checkpointIndex - 1]?.min_spend ?? 0;\n        const progressPercentage = this.mapValueRanges(this.offer.details.current_value, previousCheckpointValue, discount.min_spend, 0, 100);\n        const isActive = discount.min_spend <= this.offer.details.current_value;\n\n        return (\n            <div class=\"s-conditional-offer-checkpoint-container\">\n                {index > 0 ? [\n                    <div key=\"progress-line\" class=\"s-conditional-offer-progress-line-container\">\n                        <div class=\"s-conditional-offer-progress-line-inactive\" />\n                        <div class=\"s-conditional-offer-progress-line-active\" style={{ width: `${progressPercentage}%` }} />\n                    </div>,\n                    <div key=\"checkpoint\" class={`s-conditional-offer-checkpoint ${isActive ? \"s-conditional-offer-active-checkpoint\" : \"\"}`} >\n                        <div class={`s-conditional-offer-item-avatar-content ${isActive ? \"active\" : \"\"}`} >\n                            {this.products && this.getCheckpointContent(discount)}\n                        </div>\n                        <div class={`s-conditional-offer-checkpoint-label ${isActive ? \"active\" : \"\"}`} innerHTML={this.getOfferType(discount)} />\n\n                    </div>\n                ] :\n                    <div key=\"label\" class={{ \"s-conditional-offer-checkpoint-label\": true, \"first-checkpoint\": index === 0, active: isActive }} innerHTML={this.getOfferType(discount)} />\n                }\n            </div>\n        );\n    }\n\n    private getLoadingSkeletonView() {\n        return <Host class=\"s-conditional-offer-container \" >\n            <div class=\"s-conditional-offer-skeleton-wrapper\">\n                <div class=\"s-conditional-offer-skeleton-title\">\n                    <salla-skeleton height=\"16px\" width=\"30%\" />\n                </div>\n\n                <div class=\"s-conditional-offer-skeleton-subtitle\">\n                    <salla-skeleton height=\"16px\" width=\"35%\" />\n                </div>\n                <div class=\"s-conditional-offer-skeleton-checkpoints-wrapper\">\n                    {Array(3).fill(null).map(() => (\n                        [<salla-skeleton key=\"checkpoint-line\" height=\"8px\" />,\n                        <div class=\"s-conditional-offer-skeleton-checkpoint\" key=\"checkpoint\">\n                            <salla-skeleton height=\"60px\" width=\"60px\" type=\"circle\" />\n                        </div>]\n                    ))}\n                </div>\n\n            </div>\n        </Host>\n    }\n\n    render() {\n        if (!this.canRender) return null\n        if (this.isLoading) return this.getLoadingSkeletonView()\n\n        return <Host class=\"s-conditional-offer-container\">\n            <div class=\"s-conditional-offer-title-wrapper\">\n                <div class=\"s-conditional-offer-title\">{this.offer.title}</div>\n                {this.offer.description ? <div class=\"s-conditional-offer-subtitle\">\n                    {this.offer.description} <i class=\"sicon-information\" />\n                </div> : null}\n            </div>\n            <div class=\"s-conditional-offer-progress-container\">\n                {this.offer.details.discounts.map((discount, index) => (\n                    <div class={{ \"flex-1\": index > 0 }} key={discount.min_spend}>\n                        {this.getCheckPointView(discount, index)}\n                    </div>\n                ))}\n            </div>\n        </Host>\n    }\n}\n"],"mappings":"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"}

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

@@ -1 +0,0 @@
-{"version":3,"names":["sallaInstallmentCss","SallaInstallment","constructor","hostRef","this","tabbyBorderRemoved","tabbyRemoveBorderTries","salla","config","get","replacement","lang","onLoaded","installment_sheria_text","payment","money","parseFloat","price","amount","toFixed","installments","installment","tamaraIsActive","includes","tabbyIsActive","spotiiIsActive","mispayActive","renderInstallments","event","on","data","render","h","Host","class","currency","language","id","src","url","cdn","alt","isUpdating","oldTamaraScript","document","querySelector","remove","tamaraScript","createElement","setAttribute","head","appendChild","onload","window","TamaraProductWidget","init","setTimeout","oldTabbyWrapper","host","tabbyPromoWrapper","tabbyPromo","oldTabbyScript","tabbyScript","TabbyPromo","selector","querySelectorAll","forEach","element","removeTabbyBorder","oldSpotiiWrapper","spotiiPromoWrapper","classList","add","spotiiPromo","oldSpotiiScript","Number","isRTL","spotiiConfig","targetXPath","renderToPath","numberOfPayment","templateLine","textOne","textTwo","textThree","spotiiScript","promo","shadowRoot","style"],"sources":["src/components/salla-installment/salla-installment.scss?tag=salla-installment","src/components/salla-installment/salla-installment.tsx"],"sourcesContent":["/*\n  The whole installment methods is a third-party widgets,\n  So there aren't a custom classes (as other components) to style them.\n*/\n\nsalla-installment:empty {\n  display: none;\n}\n\n/*\n* Installment::Tabby\n*/\n#tabbyPromoWrapper {\n  background: white;\n  border-radius: 0.375rem;\n  transition: box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n  margin-bottom: 20px;\n\n  .salla-y & {\n    border: 1px solid var(--color-grey-dark);\n    border-radius: 12px\n  }\n\n  &:hover {\n    box-shadow: 0 0 #0000, 0 0 #0000, 5px 10px 30px #2B2D340D;\n  }\n\n  #tabbyPromo {\n    * {\n      font-family: var(--font-main);\n    }\n\n    >div>div {\n      max-width: none;\n      //padding: 15px;\n      box-shadow: none;\n      border: none;\n    }\n\n    .tabby-promo-snippet {\n      max-width: 100%;\n      min-height: 100px;\n      padding: 18px 20px;\n      // border-color: var(--color-grey-dark);\n      border: none !important;\n\n\n      &__text,\n      &__link {\n        font-size: var(--font-sm);\n        color: var(--color-text) !important;\n      }\n\n      &__link {\n        font-weight: bold;\n      }\n    }\n  }\n}\n\n.tabby-promo-wrapper {\n  #tabby-promo {\n    font-family: var(--font-main) !important;\n\n    .tabby-promo {\n      &__feature-title {\n        font-size: var(--font-md);\n      }\n\n      &__feature-desc {\n        font-size: var(--font-sm);\n        line-height: 20px;\n      }\n    }\n  }\n}\n\n/*\n* Installment::Tamara & Spotii\n*/\n.tamara-product-widget {\n  margin-bottom: 20px;\n}\n\n.tamara-product-widget,\n.spotii-wrapper {\n  min-height: 100px;\n  position: relative;\n  color: var(--color-text);\n  font-size: var(--font-sm);\n  line-height: 1.25;\n  padding: 18px 20px 18px 100px !important;\n  background: white;\n  border-radius: 0.375rem;\n  transition: box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n\n  .salla-y & {\n    border-radius: 12px;\n    border: 1px solid var(--color-grey-dark);\n  }\n\n  &:hover {\n    box-shadow: 0 0 #0000, 0 0 #0000, 5px 10px 30px #2B2D340D;\n  }\n\n  .spotii-logo {\n    float: left;\n    margin: 0 0 0 -75px;\n  }\n}\n\n.ltr .tamara-product-widget,\n.ltr .spotii-wrapper {\n  text-align: left;\n  padding: 18px 100px 18px 20px !important;\n\n  .spotii-logo {\n    float: right;\n    margin: 0 -75px 0 0;\n  }\n\n  .spotii-product-widget {\n    text-align: left !important;\n  }\n}\n\n.spotii-wrapper {\n  margin-bottom: 20px;\n\n  .spotii-promo {\n    font-size: var(--font-md);\n  }\n\n  .spotii-product-widget {\n    font-size: var(--font-sm) !important;\n    margin-top: 10px;\n  }\n}\n\n.tamara-product-widget {\n  .tamara-logo {\n    position: absolute;\n    left: 20px;\n    top: 18px;\n    margin: 0 !important;\n\n    .ltr & {\n      right: 20px;\n      left: auto;\n    }\n  }\n\n  span {\n    font-family: var(--font-main);\n    font-size: var(--font-sm);\n    color: var(--color-text);\n\n    &:last-child {\n      display: block;\n      position: relative;\n      margin-top: 8px;\n    }\n  }\n}\n\n.tamara-popup {\n  &__wrap {\n    overflow: auto !important;\n  }\n}\n\n.s-installment-mispay-wrapper {\n  font-family: \"Noto Sans Arabic\", sans-serif;\n  font-size: 14px;\n  text-align: right;\n  padding: 24px 20px 24px 0px;\n  gap: 42px;\n  direction: rtl;\n  line-height: 22px;\n  color: rgb(0, 0, 0);\n  min-width: 100%;\n  box-sizing: border-box;\n  position: relative;\n  background-color: white;\n  border-radius: 10px;\n  border: 1px solid var(--07--Light-Theme-Gray-color-gray-300, #EEE);\n  margin: 15px 0;\n  display: flex;\n  transition: box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.s-installment-mispay-wrapper:hover {\n  box-shadow: 0 0 #0000, 0 0 #0000, 5px 10px 30px #2B2D340D;\n}\n\n.s-installment-mispay-content {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin: 15px !important;\n}\n\n.s-installment-mispay-content-text {\n  color: #292929;\n  margin: 0 16px 0 0;\n  width: 80%;\n  position: absolute;\n  left: 14px;\n  text-align: left;\n}\n\n\n.s-installment-mispay-content img {\n  height: 28px;\n  width: 70px;\n  display: inline-block;\n  max-height: 100%;\n  vertical-align: middle;\n  fill: none;\n  stroke: unset;\n  width: auto;\n  position: absolute;\n}\n\n.rtl .s-installment-mispay-content-text {\n  right: 14px;\n  text-align: right;\n  margin: 0 0 0 16px;\n}\n\n.rtl .s-installment-mispay-content img {\n  left: 14px !important;\n}\n\n.ltr .s-installment-mispay-content img {\n  right: 14px !important;\n}\n","import { Component, Host, h, Prop, State, Element } from '@stencil/core';\n\n@Component({\n  tag: 'salla-installment',\n  styleUrl: 'salla-installment.scss',\n})\n\nexport class SallaInstallment {\n  private tabbyBorderRemoved: boolean = false;\n  private tabbyRemoveBorderTries: number = 0;\n  @Element() host: HTMLElement;\n  constructor() {\n    salla.lang.onLoaded(() => {\n      this.installment_sheria_text({ payment: salla.money(parseFloat(this.price)), amount: salla.money((parseFloat(this.price) / 3).toFixed(2)), installments: 3 })\n      const installment = salla.config.get('store.settings.installments');\n      if (installment) {\n        this.tamaraIsActive = installment.includes('tamara_installment');\n        this.tabbyIsActive = installment.includes('tabby_installment');\n        this.spotiiIsActive = installment.includes('spotii_pay');\n        this.mispayActive = installment.includes('mispay_installment');\n      }\n      this.renderInstallments();\n    });\n\n    salla.event.on('product::price.updated', ({ data }) => {\n      if (!data.price || data.price == this.price) {\n        return;\n      }\n      this.price = data.price;\n      this.renderInstallments(true);\n    });\n  }\n\n  /**\n   * Current product price\n   */\n  @Prop() price: string;\n  /**\n   * Language code\n   */\n  @Prop() language: string = salla.config.get('user.language_code');\n  /**\n   * Currency code\n   */\n  @Prop() currency: string = salla.config.get('user.currency_code');\n\n  @State() tamaraIsActive: boolean;\n  @State() tabbyIsActive: boolean;\n  @State() spotiiIsActive: boolean;\n  @State() mispayActive: boolean;\n\n  @State() installment_sheria_text: (replacement: object) => string = (replacement) => salla.lang.get(\"pages.products.installments\", replacement)\n\n  render() {\n    return (\n      <Host>\n        {this.tamaraIsActive ?\n          <div class=\"tamara-product-widget\"\n            data-price={this.price}\n            data-currency={this.currency}\n            data-lang={this.language}\n            data-payment-type=\"installment\">\n          </div>\n          : ''}\n\n        {this.tabbyIsActive ?\n          <div id=\"tabbyPromoWrapper\">\n            <div id=\"tabbyPromo\"></div>\n          </div>\n          : ''}\n\n        {this.spotiiIsActive ?\n          <div class=\"spotii-wrapper\">\n            {/*No need for the price, the price already in the page, and also tammara & tabby doesn't have price */}\n            <div class=\"spotii-promo\"></div>\n          </div>\n          : ''}\n        {this.mispayActive ?\n          <div class=\"s-installment-mispay-wrapper\">\n            <div class=\"s-installment-mispay-content\">\n              <img src={salla.url.cdn('images/payment/png/mispay.png')} alt=\"mispay\" />\n              <span class=\"s-installment-mispay-content-text\">{this.installment_sheria_text({ payment: salla.money(parseFloat(this.price)), amount: salla.money((parseFloat(this.price) / 3).toFixed(2)), installments: 3 })}</span>\n            </div>\n          </div>\n          : ''}\n      </Host>\n    );\n  }\n\n  renderInstallments(isUpdating: boolean = false) {\n    // Tamara\n    if (this.tamaraIsActive) {\n      if (isUpdating) {\n        var oldTamaraScript = document.querySelector('script[src=\"https://cdn.tamara.co/widget/product-widget.min.js\"]');\n        if (oldTamaraScript) {\n          oldTamaraScript.remove();\n        }\n      }\n\n      var tamaraScript = document.createElement('script');\n      tamaraScript.setAttribute('src', 'https://cdn.tamara.co/widget/product-widget.min.js');\n      document.head.appendChild(tamaraScript);\n      tamaraScript.onload = () => {\n        window.TamaraProductWidget.init({ lang: this.language });\n        setTimeout(() => {\n          window.TamaraProductWidget.render();\n        }, 300);\n      };\n    }\n\n    // tabby\n    if (this.tabbyIsActive) {\n      if (isUpdating) {\n\n        // remove #tabbyPromoWrapper and re append it\n        var oldTabbyWrapper = this.host.querySelector('#tabbyPromoWrapper');\n        if (oldTabbyWrapper) {\n          oldTabbyWrapper.remove();\n        }\n\n        var tabbyPromoWrapper = document.createElement('div');\n        tabbyPromoWrapper.setAttribute('id', 'tabbyPromoWrapper');\n        var tabbyPromo = document.createElement('div');\n        tabbyPromo.setAttribute('id', 'tabbyPromo');\n        tabbyPromoWrapper.appendChild(tabbyPromo);\n        this.host.appendChild(tabbyPromoWrapper);\n\n        var oldTabbyScript = document.querySelector('script[src=\"https://checkout.tabby.ai/tabby-promo.js\"]');\n        if (oldTabbyScript) {\n          oldTabbyScript.remove();\n        }\n      }\n\n      var tabbyScript = document.createElement('script');\n      tabbyScript.setAttribute('src', 'https://checkout.tabby.ai/tabby-promo.js');\n      document.head.appendChild(tabbyScript);\n      tabbyScript.onload = () => {\n        const TabbyPromo = window.TabbyPromo;\n        new TabbyPromo({\n          selector: '#tabbyPromo',\n          currency: this.currency,\n          price: this.price,\n          lang: this.language,\n        });\n        document.querySelectorAll('.tabby-promo-snippet__logo').forEach(function (element) {\n          element.setAttribute('aria-label', 'Tabby Logo');\n        });\n      }\n      // this is a workaround to remove the default border and add margin\n      this.removeTabbyBorder();\n    }\n\n    // Spotii\n    if (this.spotiiIsActive) {\n      if (isUpdating) {\n\n        var oldSpotiiWrapper = this.host.querySelector('.spotii-wrapper');\n        if (oldSpotiiWrapper) {\n          oldSpotiiWrapper.remove();\n        }\n\n        var spotiiPromoWrapper = document.createElement('div');\n        spotiiPromoWrapper.classList.add('spotii-wrapper');\n        var spotiiPromo = document.createElement('div');\n        spotiiPromo.classList.add('spotii-promo');\n        spotiiPromoWrapper.appendChild(spotiiPromo);\n        this.host.appendChild(spotiiPromoWrapper);\n        var oldSpotiiScript = document.querySelector('script[src=\"' + salla.url.cdn('js/price-widget-ar-salla.js') + '\"]');\n        if (oldSpotiiScript) {\n          oldSpotiiScript.remove();\n        }\n      }\n\n      let amount = salla.money((Number(this.price) / 3).toFixed(2));\n      let isRTL = salla.config.get('theme.is_rtl', true);\n      window.spotiiConfig = {\n        targetXPath: ['.spotii-wrapper'],\n        renderToPath: ['.spotii-promo'],\n        numberOfPayment: 3,\n        currency: this.currency,\n        templateLine: \"${textOne} ${number} ${textTwo} \" + amount + \"${logo} ${info}\",\n        //todo:: translate these\n        textOne: isRTL ? \"جزء الدفع على\" : \"Split it into\",\n        textTwo: isRTL ? \"أقساط متساوية بدون تكاليف اضافية بقيمة\" : \"payments of\",\n        textThree: \"مع\",\n        price: this.price,\n        // forcedShow: false,\n        // merchantID: null,\n      };\n\n      var spotiiScript = document.createElement('script');\n      spotiiScript.setAttribute('src', salla.url.cdn('js/price-widget-ar-salla.js'));\n      document.head.appendChild(spotiiScript);\n      // spotiiScript.onload = () => {\n      //   // setTimeout()\n      // }\n    }\n  }\n\n\n  /**\n   * this is workaround to remove the default border and add margin\n   * we will try to remove tabby border 5 times for 7.5 seconds\n   */\n  removeTabbyBorder() {\n    if (this.tabbyBorderRemoved || this.tabbyRemoveBorderTries > 5) {\n      return;\n    }\n    this.tabbyRemoveBorderTries++;\n    setTimeout(() => {\n      let promo: any = document.querySelector('#tabbyPromo>div>div');\n      promo = promo ? promo.shadowRoot.querySelector('div[class^=\"styles__tabby-promo-snippet--\"]') : null;\n      if (promo) {\n        promo.style = 'border: none; margin: 15px 0!important;';\n        this.tabbyBorderRemoved = true;\n      } else {\n        this.removeTabbyBorder();\n      }\n    }, this.tabbyRemoveBorderTries * 500)\n  }\n}\n"],"mappings":"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"}

package/dist/types/global.d.ts

@@ -1,20 +0,0 @@
-import {ILazyLoadInstance} from "vanilla-lazyload";
-
-declare global {
-  interface Window {
-    // @ts-ignore
-    readonly document: documentWithLazyLoading;
-
-    [key: string]: any;
-    dataLayer: any[];
-  }
-
-  interface Document {
-    lazyLoadInstance?: ILazyLoadInstance
-    lazyLoadBackgrounds?: ILazyLoadInstance
-  }
-  let salla: any;
-  let Salla: any;
-  let dataLayer: any[];
-
-}