@salla.sa/twilight-components 2.13.94 → 2.13.96

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

@@ -25,6 +25,8 @@ var DisplayType;
   DisplayType["MULTIPLE_OPTIONS"] = "multiple-options";
   DisplayType["NUMBER"] = "number";
   DisplayType["SINGLE_OPTION"] = "single-option";
+  DisplayType["DIGITAL_CARD_VALUE"] = "digital-code-value";
+  DisplayType["COUNTRY"] = "country";
   DisplayType["SPLITTER"] = "splitter";
   DisplayType["TEXT"] = "text";
   DisplayType["TEXTAREA"] = "textarea";
@@ -65,8 +67,13 @@ const SallaProductOptions$1 = /*@__PURE__*/ proxyCustomElement(class SallaProduc
       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,
@@ -85,7 +92,7 @@ const SallaProductOptions$1 = /*@__PURE__*/ proxyCustomElement(class SallaProduc
         else {
           this.donationInput.value = event.target.value;
         }
-        if (detail == 'custom') {
+        if (detail === 'custom') {
           return;
         }
         salla.event.emit('product-options::donation-changed', {
@@ -104,11 +111,11 @@ const SallaProductOptions$1 = /*@__PURE__*/ proxyCustomElement(class SallaProduc
       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', 'اختر المبلغ');
@@ -117,6 +124,7 @@ const SallaProductOptions$1 = /*@__PURE__*/ proxyCustomElement(class SallaProduc
     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');
@@ -146,7 +154,7 @@ const SallaProductOptions$1 = /*@__PURE__*/ proxyCustomElement(class SallaProduc
   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])
@@ -157,10 +165,12 @@ const SallaProductOptions$1 = /*@__PURE__*/ proxyCustomElement(class SallaProduc
    * 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;
   }
@@ -168,7 +178,7 @@ const SallaProductOptions$1 = /*@__PURE__*/ proxyCustomElement(class SallaProduc
    * 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
@@ -206,24 +216,27 @@ const SallaProductOptions$1 = /*@__PURE__*/ proxyCustomElement(class SallaProduc
     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
@@ -252,7 +265,7 @@ const SallaProductOptions$1 = /*@__PURE__*/ proxyCustomElement(class SallaProduc
   }
   getLatLng(value, type) {
     return value
-      ? value.split(',')[type == 'lat' ? 0 : 1]
+      ? value.split(',')[type === 'lat' ? 0 : 1]
       : '';
   }
   getDisplayForType(option) {
@@ -268,6 +281,12 @@ const SallaProductOptions$1 = /*@__PURE__*/ proxyCustomElement(class SallaProduc
     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 });
     }
@@ -279,8 +298,43 @@ const SallaProductOptions$1 = /*@__PURE__*/ proxyCustomElement(class SallaProduc
       ? { "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)));
@@ -289,19 +343,19 @@ const SallaProductOptions$1 = /*@__PURE__*/ proxyCustomElement(class SallaProduc
   }
   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;
     }
@@ -317,13 +371,13 @@ const SallaProductOptions$1 = /*@__PURE__*/ proxyCustomElement(class SallaProduc
     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,
@@ -333,7 +387,8 @@ const SallaProductOptions$1 = /*@__PURE__*/ proxyCustomElement(class SallaProduc
       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'))));
   }
@@ -343,7 +398,7 @@ const SallaProductOptions$1 = /*@__PURE__*/ proxyCustomElement(class SallaProduc
   }
   //@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.';
@@ -394,7 +449,7 @@ const SallaProductOptions$1 = /*@__PURE__*/ proxyCustomElement(class SallaProduc
    * ============= 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>` : '');
@@ -408,15 +463,15 @@ const SallaProductOptions$1 = /*@__PURE__*/ proxyCustomElement(class SallaProduc
     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);
@@ -424,30 +479,46 @@ const SallaProductOptions$1 = /*@__PURE__*/ proxyCustomElement(class SallaProduc
   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" }));
+  }
+  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": true, "s-product-options-digital-card-option-stock-out": detail.is_out } }, 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)));
+    }));
+  }
   get host() { return this; }
   static get style() { return sallaProductOptionsCss; }
 }, [0, "salla-product-options", {
@@ -463,6 +534,7 @@ const SallaProductOptions$1 = /*@__PURE__*/ proxyCustomElement(class SallaProduc
     "canDisabled": [32],
     "selectedSkus": [32],
     "selectedOutSkus": [32],
+    "availableDigitalCardValues": [32],
     "getSelectedOptionsData": [64],
     "reportValidity": [64],
     "hasOutOfStockOption": [64],