@salla.sa/twilight-components 2.13.93 → 2.13.95

package/dist/collection/components/salla-product-options/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/components/salla-product-options/interfaces.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,WAoBX;AApBD,WAAY,WAAW;EACrB,8BAAe,CAAA;EACf,4BAAa,CAAA;EACb,oCAAqB,CAAA;EACrB,oCAAqB,CAAA;EACrB,8BAAe,CAAA;EACf,oDAAqC,CAAA;EACrC,gCAAiB,CAAA;EACjB,8CAA+B,CAAA;EAC/B,oCAAqB,CAAA;EACrB,4BAAa,CAAA;EACb,oCAAqB,CAAA;EACrB,sCAAuB,CAAA;EACvB,4BAAa,CAAA;EACb,8BAAe,CAAA;EACf,oCAAqB,CAAA;EACrB,0BAAW,CAAA;EACX,4BAAa,CAAA;EACb,4CAA6B,CAAA;EAC7B,kCAAmB,CAAA;AACrB,CAAC,EApBW,WAAW,KAAX,WAAW,QAoBtB;AAiID,MAAM,CAAN,IAAY,QAEX;AAFD,WAAY,QAAQ;EAClB,uBAAW,CAAA;AACb,CAAC,EAFW,QAAQ,KAAR,QAAQ,QAEnB","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  BOOKING = \"booking\"\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"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/components/salla-product-options/interfaces.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,WAsBX;AAtBD,WAAY,WAAW;EACrB,8BAAe,CAAA;EACf,4BAAa,CAAA;EACb,oCAAqB,CAAA;EACrB,oCAAqB,CAAA;EACrB,8BAAe,CAAA;EACf,oDAAqC,CAAA;EACrC,gCAAiB,CAAA;EACjB,8CAA+B,CAAA;EAC/B,wDAAyC,CAAA;EACzC,kCAAmB,CAAA;EACnB,oCAAqB,CAAA;EACrB,4BAAa,CAAA;EACb,oCAAqB,CAAA;EACrB,sCAAuB,CAAA;EACvB,4BAAa,CAAA;EACb,8BAAe,CAAA;EACf,oCAAqB,CAAA;EACrB,0BAAW,CAAA;EACX,4BAAa,CAAA;EACb,4CAA6B,CAAA;EAC7B,kCAAmB,CAAA;AACrB,CAAC,EAtBW,WAAW,KAAX,WAAW,QAsBtB;AAqID,MAAM,CAAN,IAAY,QAEX;AAFD,WAAY,QAAQ;EAClB,uBAAW,CAAA;AACb,CAAC,EAFW,QAAQ,KAAR,QAAQ,QAEnB","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  DIGITAL_CARD_VALUE = \"digital-code-value\",\n  COUNTRY = \"country\",\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  BOOKING = \"booking\"\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  is_default?: 0 | 1;\n  code?: string;\n  type?: string;\n\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"]}

package/dist/collection/components/salla-product-options/salla-product-options.js

@@ -17,8 +17,13 @@ export class SallaProductOptions {
       txt: 'text/plain',
     };
     this.outSkus = [];
+    /**
+   * Avoid selection of previous default or selected card value option
+   * when switching between digital card country options for the 1st time
+   */
+    this.ignoreDefaultCardValue = false;
     this.handleDonationOptions = (event, detail, type) => {
-      if (detail == 'custom' && type == 'input') {
+      if (detail === 'custom' && type === 'input') {
         salla.helpers.inputDigitsOnly(event.target);
         salla.event.emit('product-options::donation-changed', {
           id: this.productId,
@@ -37,7 +42,7 @@ export class SallaProductOptions {
         else {
           this.donationInput.value = event.target.value;
         }
-        if (detail == 'custom') {
+        if (detail === 'custom') {
           return;
         }
         salla.event.emit('product-options::donation-changed', {
@@ -56,11 +61,11 @@ export class SallaProductOptions {
       if (!option.donation) {
         return;
       }
-      let completed = option.donation.target_amount <= option.donation.collected_amount;
+      const completed = option.donation.target_amount <= option.donation.collected_amount;
       return h("div", { class: { "s-product-options-donation-message": true, "s-product-options-donation-completed": completed, "s-product-options-donation-expired": !completed } }, h("p", null, option.donation.target_message), h("span", null, completed ? salla.money(option.donation.target_amount) : ''));
     };
     this.optionsData = undefined;
-    this.outOfStockText = '';
+    this.outOfStockText = "";
     this.donationAmount = salla.lang.get('pages.products.donation_amount');
     this.selectDonationAmount = salla.lang.getWithDefault('pages.products.select_donation_amount', 'تحديد مبلغ التبرع');
     this.selectAmount = salla.lang.getWithDefault('pages.products.select_amount', 'اختر المبلغ');
@@ -69,6 +74,7 @@ export class SallaProductOptions {
     this.canDisabled = undefined;
     this.selectedSkus = undefined;
     this.selectedOutSkus = undefined;
+    this.availableDigitalCardValues = [];
     this.productId = salla.config.get('page.id');
     this.options = undefined;
     this.canDisabled = !salla.config.get('store.settings.product.notify_options_availability');
@@ -98,7 +104,7 @@ export class SallaProductOptions {
   setOptionsData(optionsData) {
     var _a, _b;
     this.optionsData = optionsData;
-    let that = this;
+    const that = this;
     (_b = (_a = this.optionsData[0]) === null || _a === void 0 ? void 0 : _a.details) === null || _b === void 0 ? void 0 : _b.forEach(function (detail) {
       Object.entries(detail.skus_availability || {})
         .filter(sku => !sku[1])
@@ -109,10 +115,12 @@ export class SallaProductOptions {
    * Get the id's of the selected options.
    * */
   async getSelectedOptionsData() {
-    let selectedOptions = {};
-    let formData = this.host.getElementSallaData();
-    formData.forEach(function (value, key) {
-      key.startsWith('options[') && (selectedOptions[key.replace('options[', '').replace(']', '')] = value);
+    const selectedOptions = {};
+    const formData = this.host.getElementSallaData();
+    formData.forEach((value, key) => {
+      if (key.startsWith('options[')) {
+        (selectedOptions[key.replace('options[', '').replace(']', '')] = value);
+      }
     });
     return selectedOptions;
   }
@@ -120,7 +128,7 @@ export class SallaProductOptions {
    * Report options form validity.
    * */
   async reportValidity() {
-    let requiredElements = this.host.querySelectorAll('[required]');
+    const requiredElements = this.host.querySelectorAll('[required]');
     let pass = true;
     for (let i = 0; i < requiredElements.length; i++) {
       //if there is only one invalid option, return false
@@ -158,24 +166,27 @@ export class SallaProductOptions {
     closestProductOption.classList.add('s-product-options-option-error');
   }
   changedHandler(event, option) {
-    let data = { event: event, option: option, detail: null };
+    const data = { event: event, option: option, detail: null };
     if (option.details) {
-      let detail = option.details.find((detail) => {
+      const detail = option.details.find((detail) => {
         return Number(detail.id) === Number(event.target.value);
       });
       data.detail = detail;
     }
-    let optionElement = event.target.closest('.s-product-options-option');
+    if (option.type === 'country') {
+      this.handleCountryOptionChange(event, data.detail);
+    }
+    const optionElement = event.target.closest('.s-product-options-option');
     if (event.target.value
-      || ((option.type == DisplayType.FILE || option.type == DisplayType.IMAGE) && event.type === 'added')
-      || (option.type == DisplayType.MAP && event.type === 'selected' && (event.target.lat && event.target.lng))) {
+      || ((option.type === DisplayType.FILE || option.type === DisplayType.IMAGE) && event.type === 'added')
+      || (option.type === DisplayType.MAP && event.type === 'selected' && (event.target.lat && event.target.lng))) {
       setTimeout(() => {
         optionElement.classList.remove('s-product-options-option-error');
       }, 200);
     }
     const index = this.selectedOptions.findIndex(option => option.option_id === data.option.id);
     index > -1 ? this.selectedOptions[index] = Object.assign(Object.assign({}, data.detail), { option_id: data.option.id }) : this.selectedOptions.push(Object.assign(Object.assign({}, data.detail), { option_id: data.option.id }));
-    if (option.type == DisplayType.DONATION) {
+    if (option.type === DisplayType.DONATION) {
       salla.event.emit('product-options::donation-changed', {
         id: this.productId,
         price: event.target.value
@@ -204,7 +215,7 @@ export class SallaProductOptions {
   }
   getLatLng(value, type) {
     return value
-      ? value.split(',')[type == 'lat' ? 0 : 1]
+      ? value.split(',')[type === 'lat' ? 0 : 1]
       : '';
   }
   getDisplayForType(option) {
@@ -220,6 +231,12 @@ export class SallaProductOptions {
     if (option.type === DisplayType.SINGLE_OPTION) {
       return this.singleOption(option);
     }
+    if (option.type === DisplayType.DIGITAL_CARD_VALUE) {
+      return this.digitalCardValuesOption(option);
+    }
+    if (option.type === DisplayType.COUNTRY) {
+      return this.countryOption(option);
+    }
     if (option.type === DisplayType.BOOKING && salla.url.is_page("cart")) {
       return h("salla-booking-field", { onInvalidInput: (e) => this.invalidHandler(e, option), option: option, productId: option.value });
     }
@@ -231,8 +248,43 @@ export class SallaProductOptions {
       ? { "data-show-when": `options[${option.visibility_condition.option}] ${option.visibility_condition.operator} ${option.visibility_condition.value}` }
       : {};
   }
+  getAvailableDigitalCardSKUs(detail) {
+    const digitalCardOption = this.optionsData.find(({ type }) => type === 'digital-code-value');
+    if (!digitalCardOption)
+      throw new Error('product-options:: No digital card options found');
+    const outofStockSKUs = Object.keys(detail.skus_availability).filter(key => detail.skus_availability[key] === false);
+    this.availableDigitalCardValues = digitalCardOption.details.filter((op) => {
+      return !Object.keys(op.skus_availability).filter(SKU_key => outofStockSKUs.includes(SKU_key)).length;
+    });
+  }
+  handleCountryOptionChange(event, detail) {
+    event.stopImmediatePropagation();
+    this.ignoreDefaultCardValue = true;
+    const currentCardValue = this.host.querySelector("input[data-code-value]:checked");
+    if (currentCardValue)
+      currentCardValue.checked = false;
+    const digitalCardOption = this.optionsData.find(({ type }) => type === 'digital-code-value');
+    if (!digitalCardOption)
+      throw new Error('product-options:: No digital card options found');
+    this.getAvailableDigitalCardSKUs(detail);
+  }
+  getSelectedDigitalCardOptions(option) {
+    const selectedOption = option.details.find(detail => detail.is_selected);
+    const defaultOption = option.details.find(detail => !!detail.is_default) || option.details[0]; /*option.details[0] only applys for counrty options*/
+    if (!['digital-code-value', 'country'].includes(option.type))
+      return;
+    return selectedOption || defaultOption;
+  }
   //we need the cart Id for productOption Image
   componentWillLoad() {
+    const shouldSelectDefaultOption = this.optionsData.filter(({ type }) => ["country", "digital-card-value"].includes(type)).length > 0 && salla.url.is_page('cart');
+    if (shouldSelectDefaultOption) {
+      const countryOption = this.optionsData.find(option => option.type === 'country');
+      const defaultSelection = countryOption && this.getSelectedDigitalCardOptions(countryOption);
+      if (defaultSelection) {
+        this.getAvailableDigitalCardSKUs(defaultSelection);
+      }
+    }
     this.outOfStockText = salla.lang.get('pages.products.out_of_stock');
     return salla.onReady(() => {
       const needsCartId = (!salla.storage.get('cart.id') && this.optionsData.some(option => ['file', 'image'].includes(option.type)));
@@ -241,19 +293,19 @@ export class SallaProductOptions {
   }
   render() {
     var _a;
-    if (((_a = this.optionsData) === null || _a === void 0 ? void 0 : _a.length) == 0) {
+    if (((_a = this.optionsData) === null || _a === void 0 ? void 0 : _a.length) === 0) {
       return;
     }
-    return (h(Host, { class: "s-product-options-wrapper" }, h("salla-conditional-fields", null, this.optionsData.map((option) => h("div", Object.assign({ class: `s-product-options-option-container${option.visibility_condition ? ' hidden' : ''}`, "data-option-id": option.id }, this.getOptionShownWhen(option)), option.name == 'splitter' ?
+    return (h(Host, { class: "s-product-options-wrapper" }, h("salla-conditional-fields", null, this.optionsData.map((option) => h("div", Object.assign({ key: option.id, class: `s-product-options-option-container${option.visibility_condition ? ' hidden' : ''}`, "data-option-id": option.id }, this.getOptionShownWhen(option)), option.name === 'splitter' ?
       this.splitterOption()
-      : h("div", { class: { "s-product-options-option": true, "s-product-options-option-booking": option.type === DisplayType.BOOKING && salla.url.is_page("cart") }, "data-option-type": option.type, "data-option-required": `${option.required}` }, h("label", { htmlFor: 'options[' + option.id + ']', class: `s-product-options-option-label ${this.hideLabel(option) ? 's-product-options-option-label-hidden' : ''}` }, h("b", null, option.name, option.required && h("span", null, " * "), " "), h("small", null, option.placeholder)), h("div", { class: `s-product-options-option-content ${this.hideLabel(option) || (option.type === DisplayType.BOOKING && salla.url.is_page("cart")) ? 's-product-options-option-content-full-width' : ''}` }, this.getDisplayForType(option))))))));
+      : h("div", { class: { "s-product-options-option": true, "s-product-options-option-booking": option.type === DisplayType.BOOKING && salla.url.is_page("cart") }, "data-option-type": option.type, "data-option-required": `${option.required}` }, h("label", { htmlFor: `options[${option.id}]`, class: `s-product-options-option-label ${this.hideLabel(option) ? 's-product-options-option-label-hidden' : ''}` }, h("b", null, option.name, option.required && h("span", null, " * "), " "), h("small", null, option.placeholder)), h("div", { class: `s-product-options-option-content ${this.hideLabel(option) || (option.type === DisplayType.BOOKING && salla.url.is_page("cart")) ? 's-product-options-option-content-full-width' : ''}` }, this.getDisplayForType(option))))))));
   }
   componentDidLoad() {
     var _a, _b;
-    if (((_a = this.optionsData) === null || _a === void 0 ? void 0 : _a.length) == 0 && !this.optionsData.some(option => option.type == DisplayType.DONATION)) {
+    if (((_a = this.optionsData) === null || _a === void 0 ? void 0 : _a.length) === 0 && !this.optionsData.some(option => option.type === DisplayType.DONATION)) {
       return;
     }
-    let selectedDonationOption = (_b = this.optionsData.find(option => option.type == DisplayType.DONATION)) === null || _b === void 0 ? void 0 : _b.details.find(detail => detail.is_selected);
+    const selectedDonationOption = (_b = this.optionsData.find(option => option.type === DisplayType.DONATION)) === null || _b === void 0 ? void 0 : _b.details.find(detail => detail.is_selected);
     if (!selectedDonationOption) {
       return;
     }
@@ -269,13 +321,13 @@ export class SallaProductOptions {
     var _a, _b;
     return h("div", { class: "s-product-options-donation-wrapper" }, ((_a = option.donation) === null || _a === void 0 ? void 0 : _a.can_donate) ? [
       option.donation ?
-        h("div", { class: "s-product-options-donation-progress" }, h("salla-progress-bar", { donation: option.donation }))
+        h("div", { key: option.id, class: "s-product-options-donation-progress" }, h("salla-progress-bar", { donation: option.donation }))
         : '',
       option.details.length ?
-        [h("h4", null, this.selectAmount), h("div", { class: "s-product-options-donation-options" }, option.details.map((detail, i) => h("div", { class: "s-product-options-donation-options-item" }, h("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') }), h("label", { htmlFor: `donation-option-${i}` }, h("span", null, salla.money(detail.name))))), ((_b = option.donation) === null || _b === void 0 ? void 0 : _b.custom_amount_enabled) ?
-            h("div", { class: "s-product-options-donation-options-item" }, h("input", { id: `donation-option-custom`, type: "radio", name: "donating_option", value: "custom", onChange: e => this.handleDonationOptions(e, 'custom', 'option') }), h("label", { htmlFor: `donation-option-custom` }, h("span", null, " ", this.selectDonationAmount, " ")))
+        [h("h4", { key: option.id }, this.selectAmount), h("div", { key: option.id, class: "s-product-options-donation-options" }, option.details.map((detail, i) => h("div", { key: option.id, class: "s-product-options-donation-options-item" }, h("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') }), h("label", { htmlFor: `donation-option-${i}` }, h("span", null, salla.money(detail.name))))), ((_b = option.donation) === null || _b === void 0 ? void 0 : _b.custom_amount_enabled) ?
+            h("div", { class: "s-product-options-donation-options-item" }, h("input", { id: "donation-option-custom", type: "radio", name: "donating_option", value: "custom", onChange: e => this.handleDonationOptions(e, 'custom', 'option') }), h("label", { htmlFor: "donation-option-custom" }, h("span", null, " ", this.selectDonationAmount, " ")))
             : '')] : '',
-      h("div", { class: { "s-product-options-donation-input-group": true, "shown": !option.details.length || (option.details.length && this.isCustomDonation) } }, h("input", { type: "text", id: "donating-amount", name: "donation_amount", class: "s-form-control", ref: el => this.donationInput = el, value: option.details.length
+      h("div", { key: option.id, class: { "s-product-options-donation-input-group": true, "shown": !option.details.length || (option.details.length && this.isCustomDonation) } }, h("input", { type: "text", id: "donating-amount", name: "donation_amount", class: "s-form-control", ref: el => { this.donationInput = el; }, value: option.details.length
           && option.details.some(detail => detail.is_selected)
           ? option.details.find(detail => detail.is_selected).additional_price
           : option.value,
@@ -285,7 +337,8 @@ export class SallaProductOptions {
       this.getExpireDonationMessage(option));
   }
   fileUploader(option, additions = null) {
-    return h("salla-file-upload", Object.assign({}, (additions || {}), { "payload-name": "file", value: option.value, "instant-upload": true, name: `options[${option.id}]`, required: !option.visibility_condition && option.required, height: "120px", onAdded: (e) => this.changedHandler(e, option), url: salla.cart.api.getUploadImageEndpoint(), "form-data": { cart_item_id: this.productId, product_id: this.productId }, onInvalidInput: (e) => this.invalidHandler(e, option), class: { "s-product-options-image-input": true, required: option.required } }), h("div", { class: "s-product-options-filepond-placeholder" }, h("span", { class: "s-product-options-filepond-placeholder-icon", innerHTML: additions.accept && additions.accept.split(',').every(type => type.includes('image'))
+    var _a;
+    return h("salla-file-upload", Object.assign({}, (additions || {}), { "payload-name": "file", value: option.value, "instant-upload": true, name: `options[${option.id}]`, required: !option.visibility_condition && option.required, height: "120px", onAdded: (e) => this.changedHandler(e, option), url: salla.cart.api.getUploadImageEndpoint(), "form-data": { cart_item_id: this.productId, product_id: this.productId }, onInvalidInput: (e) => this.invalidHandler(e, option), class: { "s-product-options-image-input": true, required: option.required } }), h("div", { class: "s-product-options-filepond-placeholder" }, h("span", { class: "s-product-options-filepond-placeholder-icon", innerHTML: ((_a = additions.accept) === null || _a === void 0 ? void 0 : _a.split(',').every(type => type.includes('image')))
         ? CameraIcon
         : FileIcon }), h("p", { class: "s-product-options-filepond-placeholder-text" }, salla.lang.get('common.uploader.drag_and_drop')), h("span", { class: "filepond--label-action" }, salla.lang.get('common.uploader.browse'))));
   }
@@ -295,7 +348,7 @@ export class SallaProductOptions {
   }
   //@ts-ignore
   fileOption(option) {
-    let types = option.details.map(detail => this.fileTypes[detail.name]).filter(Boolean);
+    const types = option.details.map(detail => this.fileTypes[detail.name]).filter(Boolean);
     return (types === null || types === void 0 ? void 0 : types.length)
       ? this.fileUploader(option, { accept: types.join(',') })
       : 'File types not selected.';
@@ -346,7 +399,7 @@ export class SallaProductOptions {
    * ============= Advanced options =============
    */
   getOptionDetailName(detail, outOfStock = true, optionType) {
-    if (optionType && optionType == DisplayType.COLOR) {
+    if (optionType && optionType === DisplayType.COLOR) {
       return detail.name
         + ((outOfStock && this.isOptionDetailOut(detail)) ? ` <br/> <p> ${this.outOfStockText} </p>` : '')
         + (detail.additional_price ? ` <p> (${salla.money(detail.additional_price)}) </p>` : '');
@@ -360,15 +413,15 @@ export class SallaProductOptions {
     if (detail.is_out || !detail.skus_availability || !((_a = this.selectedSkus) === null || _a === void 0 ? void 0 : _a.length)) {
       return detail.is_out;
     }
-    let isDetailSelected = this.selectedOptions.filter(option => option.id == detail.id).length;
+    const isDetailSelected = this.selectedOptions.filter(option => option.id === detail.id).length;
     //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
-    if (isDetailSelected && this.selectedOptions.length == 1) {
+    if (isDetailSelected && this.selectedOptions.length === 1) {
       return false;
     }
     //if current details has sku in the possible outSkus it's out for sure
     if (isDetailSelected) {
       //here we will get the possible outSkus for current selected options
-      let outSelectableSkus = this.selectedSkus.filter(sku => this.outSkus.includes(sku));
+      const outSelectableSkus = this.selectedSkus.filter(sku => this.outSkus.includes(sku));
       return Object.keys(detail.skus_availability).some(sku => outSelectableSkus.includes(Number(sku)));
     }
     return this.selectedOptions.some(option => option.is_out && option.option_id !== detail.option_id);
@@ -376,30 +429,46 @@ export class SallaProductOptions {
   singleOption(option) {
     return h("div", null, h("select", { name: `options[${option.id}]`, required: !option.visibility_condition && option.required, class: "s-form-control", onInvalid: (e) => this.invalidHandler(e, option), onChange: e => this.changedHandler(e, option) }, h("option", { value: "" }, option.placeholder), option === null || option === void 0 ? void 0 :
       option.details.map((detail) => {
-        return h("option", { value: detail.id, disabled: this.canDisabled && this.isOptionDetailOut(detail), selected: detail.is_selected }, this.getOptionDetailName(detail));
+        return h("option", { key: detail.id, value: detail.id, disabled: this.canDisabled && this.isOptionDetailOut(detail), selected: detail.is_selected }, this.getOptionDetailName(detail));
       })));
   }
   multipleOptions(option) {
-    let is_required = option.required && !option.details.some(detail => detail.is_selected) && !option.visibility_condition;
+    const is_required = option.required && !option.details.some(detail => detail.is_selected) && !option.visibility_condition;
     return h("div", { class: { "s-product-options-multiple-options-wrapper": true, 'required': option.required } }, option === null || option === void 0 ? void 0 : option.details.map((detail) => {
-      return h("div", null, h("input", { type: "checkbox", value: detail.id, disabled: this.isOptionDetailOut(detail), checked: detail.is_selected, required: is_required, name: `options[${option.id}][]`, id: `field-${option.id}-${detail.id}`, onChange: (e) => this.changedHandler(e, option), onInvalid: (e) => this.invalidHandler(e, option), "aria-describedby": `options[${option.id}]-description` }), h("label", { htmlFor: `field-${option.id}-${detail.id}` }, this.getOptionDetailName(detail)));
+      return h("div", { key: detail.id }, h("input", { type: "checkbox", value: detail.id, disabled: this.isOptionDetailOut(detail), checked: detail.is_selected, required: is_required, name: `options[${option.id}][]`, id: `field-${option.id}-${detail.id}`, onChange: (e) => this.changedHandler(e, option), onInvalid: (e) => this.invalidHandler(e, option), "aria-describedby": `options[${option.id}]-description` }), h("label", { htmlFor: `field-${option.id}-${detail.id}` }, this.getOptionDetailName(detail)));
     }));
   }
   //@ts-ignore
   colorOption(option) {
-    return h("fieldset", { class: "s-product-options-colors-wrapper" }, option === null || option === void 0 ? void 0 : option.details.map((detail) => h("div", { class: "s-product-options-colors-item" }, h("input", { type: "radio", value: detail.id, required: !option.visibility_condition && option.required, checked: detail.is_selected, name: `options[${option.id}]`, disabled: this.canDisabled && this.isOptionDetailOut(detail), id: `color-${this.productId}-${option.id}-${detail.id}`, onInvalid: (e) => this.invalidHandler(e, option), onChange: e => this.changedHandler(e, option) }), h("label", { htmlFor: `color-${this.productId}-${option.id}-${detail.id}` }, h("span", { style: { "background-color": detail.color } }), h("div", { innerHTML: this.getOptionDetailName(detail, true, option.type) })))));
+    return h("fieldset", { class: "s-product-options-colors-wrapper" }, option === null || option === void 0 ? void 0 : option.details.map((detail) => h("div", { class: "s-product-options-colors-item", key: detail.id }, h("input", { type: "radio", value: detail.id, required: !option.visibility_condition && option.required, checked: detail.is_selected, name: `options[${option.id}]`, disabled: this.canDisabled && this.isOptionDetailOut(detail), id: `color-${this.productId}-${option.id}-${detail.id}`, onInvalid: (e) => this.invalidHandler(e, option), onChange: e => this.changedHandler(e, option) }), h("label", { htmlFor: `color-${this.productId}-${option.id}-${detail.id}` }, h("span", { style: { "background-color": detail.color } }), h("div", { innerHTML: this.getOptionDetailName(detail, true, option.type) })))));
   }
   //@ts-ignore
   thumbnailOption(option) {
     return h("div", { class: "s-product-options-thumbnails-wrapper" }, option.details.map((detail) => {
-      return h("div", null, h("input", { type: "radio", value: detail.id, "data-itemid": detail.id, required: !option.visibility_condition && option.required, checked: detail.is_selected, name: `options[${option.id}]`, "data-img-id": detail.option_value, disabled: this.canDisabled && this.isOptionDetailOut(detail), id: `option_${this.productId}-${option.id}_${detail.id}`, onInvalid: (e) => this.invalidHandler(e, option), onChange: (e) => this.changedHandler(e, option) }), h("label", { htmlFor: `option_${this.productId}-${option.id}_${detail.id}`, "data-img-id": detail.option_value, class: "go-to-slide" }, h("img", { "data-src": detail.image, src: detail.image, title: detail.name, alt: detail.name }), h("span", { innerHTML: CheckCircleIcon, class: "s-product-options-thumbnails-icon" }), this.isOptionDetailOut(detail) ?
+      return h("div", { key: detail.id }, h("input", { type: "radio", value: detail.id, "data-itemid": detail.id, required: !option.visibility_condition && option.required, checked: detail.is_selected, name: `options[${option.id}]`, "data-img-id": detail.option_value, disabled: this.canDisabled && this.isOptionDetailOut(detail), id: `option_${this.productId}-${option.id}_${detail.id}`, onInvalid: (e) => this.invalidHandler(e, option), onChange: (e) => this.changedHandler(e, option) }), h("label", { htmlFor: `option_${this.productId}-${option.id}_${detail.id}`, "data-img-id": detail.option_value, class: "go-to-slide" }, h("img", { "data-src": detail.image, src: detail.image, title: detail.name, alt: detail.name }), h("span", { innerHTML: CheckCircleIcon, class: "s-product-options-thumbnails-icon" }), this.isOptionDetailOut(detail) ?
         [
-          h("small", { class: "s-product-options-thumbnails-stock-badge" }, this.outOfStockText),
-          this.canDisabled ? h("div", { class: "s-product-options-thumbnails-badge-overlay" }) : '',
+          h("small", { key: detail.id, class: "s-product-options-thumbnails-stock-badge" }, this.outOfStockText),
+          this.canDisabled ? h("div", { key: detail.id, class: "s-product-options-thumbnails-badge-overlay" }) : '',
         ]
         : ''), h("p", null, this.getOptionDetailName(detail, false), " "));
     }));
   }
+  // Digital card options
+  digitalCardValuesOption(option) {
+    return h("div", { class: "s-product-options-digital-card-wrapper" }, this.availableDigitalCardValues.length > 0 ? this.availableDigitalCardValues.map((detail) => {
+      var _a, _b, _c;
+      const id = String(detail.id);
+      return h("label", { htmlFor: id, key: id, class: "s-product-options-digital-card-option" }, h("input", { type: "radio", "data-code-value": true, class: "s-form-control s-product-options-digital-card-input", value: detail.id, name: `options[${option.id}]`, id: id, required: !option.visibility_condition && option.required, onInvalid: (e) => this.invalidHandler(e, option), checked: !this.ignoreDefaultCardValue && ((_a = this.getSelectedDigitalCardOptions(option)) === null || _a === void 0 ? void 0 : _a.id) === detail.id }), h("span", null, detail.name, " ", (_c = (_b = salla.config) === null || _b === void 0 ? void 0 : _b.currency()) === null || _c === void 0 ? void 0 :
+        _c.symbol));
+    })
+      : h("div", { class: "s-product-options-digital-card-out-of-stock" }, this.outOfStockText));
+  }
+  countryOption(option) {
+    return h("div", { class: "s-product-options-digital-card-wrapper" }, option.details.map((detail) => {
+      var _a;
+      return (h("label", { htmlFor: String(detail.id), key: detail.id, class: "s-product-options-digital-card-option" }, h("input", { id: String(detail.id), type: "radio", class: "s-form-control s-product-options-digital-card-input", value: detail.id, name: `options[${option.id}]`, required: !option.visibility_condition && option.required, onInvalid: (e) => this.invalidHandler(e, option), onChange: e => this.changedHandler(e, option), checked: ((_a = this.getSelectedDigitalCardOptions(option)) === null || _a === void 0 ? void 0 : _a.id) === detail.id && salla.url.is_page('cart') }), h("div", { class: "s-product-options-country-flag-wrapper" }, h("div", { class: `s-product-options-country-flag flag iti__flag iti__${String(detail.code).toLocaleLowerCase()}` })), h("span", null, detail.name)));
+    }));
+  }
   static get is() { return "salla-product-options"; }
   static get originalStyleUrls() {
     return {
@@ -461,7 +530,8 @@ export class SallaProductOptions {
       "selectedOptions": {},
       "canDisabled": {},
       "selectedSkus": {},
-      "selectedOutSkus": {}
+      "selectedOutSkus": {},
+      "availableDigitalCardValues": {}
     };
   }
   static get events() {
@@ -492,6 +562,14 @@ export class SallaProductOptions {
             "Promise": {
               "location": "global",
               "id": "global::Promise"
+            },
+            "HTMLElement": {
+              "location": "global",
+              "id": "global::HTMLElement"
+            },
+            "FormData": {
+              "location": "global",
+              "id": "global::FormData"
             }
           },
           "return": "Promise<{}>"