@ppg_pl/tinting 0.0.4 → 0.0.7

package/dist/cjs/tinting.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0a139db0.js');
+const index = require('./index-b6962659.js');
 
 /*
  Stencil Client Patch Browser v3.1.0 | MIT Licensed | https://stenciljs.com
@@ -20,7 +20,7 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["modal-header_9.cjs",[[2,"my-component",{"shop":[1],"product":[1],"baselink":[1],"colorname":[1],"show":[32],"readyToClose":[32],"open":[64],"close":[64]},[[0,"readyToCLose","setReadyToCloseHandler"],[0,"close","closeModalHandler"],[0,"onSelectedColorEmit","handleSelectedColor"]]],[0,"my-modal",{"shop":[1],"product":[1],"baselink":[1],"selectedcolor":[1],"arrowDown":[1,"arrow-down"],"chunksNum":[32],"data":[32],"preloader":[32],"loading":[32],"currentColor":[32],"currentIndex":[32],"infoBoxWidth":[32],"boxWidth":[32],"padding":[32],"isMobile":[32],"showRange":[32],"colorCategories":[32],"selectedCategory":[32],"page":[32],"colorIsSelected":[32],"colorsList":[32],"hasMore":[32],"filters":[32],"open":[64]},[[0,"closeInfoBox","closeInfoBoxHandler"],[0,"onCurrentColor","handleEmitColor"],[9,"resize","handleResize"],[0,"colorFamilySelected","handleColorFamilySelected"],[0,"searchColors","searchColorsHandler"]]],[0,"my-backdrop"],[0,"modal-header",{"modalName":[1,"modal-name"],"modalLogo":[1,"modal-logo"],"modalDescription":[1,"modal-description"],"selectedColorFamily":[1,"selected-color-family"],"shop":[1],"productName":[1,"product-name"],"isMobile":[4,"is-mobile"],"closeImage":[1,"close-image"],"productSamples":[16],"colorFamilies":[32]}],[0,"my-colorinfo",{"currentColor":[16],"shop":[1],"product":[1],"baselink":[1],"data":[16],"isMobile":[4,"is-mobile"],"infoBoxWidth":[2,"info-box-width"],"closeImage":[1,"close-image"]}],[0,"my-colorbox",{"color":[1],"name":[1],"shop":[1],"product":[1],"isActive":[4,"is-active"],"isCategoryActive":[4,"is-category-active"],"isImageInsteadHex":[16]}],[2,"my-search",{"productname":[1],"shopname":[1],"isMobile":[4,"is-mobile"],"searchIcon":[1,"search-icon"],"searchText":[32]},[[4,"clearSearchText","clearSearchTextHandler"]]],[2,"my-select",{"options":[16],"placeholder":[1],"isMobile":[4,"is-mobile"],"searchIcon":[1,"search-icon"],"searchText":[32],"filteredOptions":[32],"showDropdown":[32],"selectedValue":[32]},[[4,"clearSearchText","clearSearchTextHandler"]]],[0,"my-slider",{"slides":[16],"shop":[1],"product":[1],"color":[1]}]]]], options);
+  return index.bootstrapLazy([["modal-header_9.cjs",[[2,"my-component",{"shop":[1],"product":[1],"baselink":[1],"colorname":[1],"available_testers":[1],"price":[2],"show":[32],"readyToClose":[32],"open":[64],"close":[64]},[[0,"readyToCLose","setReadyToCloseHandler"],[0,"close","closeModalHandler"],[0,"onSelectedColorEmit","handleSelectedColor"],[0,"addToBasket","addToBasketHandler"]]],[0,"my-modal",{"shop":[1],"product":[1],"baselink":[1],"available_testers":[16],"price":[2],"selectedcolor":[1],"arrowDown":[1,"arrow-down"],"chunksNum":[32],"data":[32],"preloader":[32],"loading":[32],"currentColor":[32],"currentIndex":[32],"infoBoxWidth":[32],"boxWidth":[32],"padding":[32],"isMobile":[32],"showRange":[32],"colorCategories":[32],"selectedCategory":[32],"page":[32],"colorIsSelected":[32],"colorsList":[32],"hasMore":[32],"filters":[32],"open":[64]},[[0,"closeInfoBox","closeInfoBoxHandler"],[0,"onCurrentColor","handleEmitColor"],[0,"addToBasket","addToBasketHandler"],[9,"resize","handleResize"],[0,"colorFamilySelected","handleColorFamilySelected"],[0,"searchColors","searchColorsHandler"]]],[0,"my-backdrop"],[0,"modal-header",{"modalName":[1,"modal-name"],"modalLogo":[1,"modal-logo"],"modalDescription":[1,"modal-description"],"selectedColorFamily":[1,"selected-color-family"],"shop":[1],"productName":[1,"product-name"],"isMobile":[4,"is-mobile"],"closeImage":[1,"close-image"],"productSamples":[16],"colorFamilies":[32]}],[0,"my-colorinfo",{"currentColor":[16],"shop":[1],"product":[1],"baselink":[1],"availableTesters":[16],"price":[2],"data":[16],"isMobile":[4,"is-mobile"],"infoBoxWidth":[2,"info-box-width"],"closeImage":[1,"close-image"],"basketStatus":[32]}],[0,"my-colorbox",{"color":[1],"name":[1],"shop":[1],"product":[1],"isActive":[4,"is-active"],"isCategoryActive":[4,"is-category-active"],"isImageInsteadHex":[16]}],[2,"my-search",{"productname":[1],"shopname":[1],"isMobile":[4,"is-mobile"],"searchIcon":[1,"search-icon"],"searchText":[32]},[[4,"clearSearchText","clearSearchTextHandler"]]],[2,"my-select",{"options":[16],"placeholder":[1],"isMobile":[4,"is-mobile"],"searchIcon":[1,"search-icon"],"searchText":[32],"filteredOptions":[32],"showDropdown":[32],"selectedValue":[32]},[[4,"clearSearchText","clearSearchTextHandler"]]],[1,"my-slider",{"slides":[16],"shop":[1],"product":[1],"color":[1]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/components/colorinfo/index.js

@@ -3,6 +3,8 @@ import { setDataLayer } from '../../gtmUtils';
 import { APIURL, accessToken } from '../api';
 export class MyColorInfo {
   constructor() {
+    this.loadingTimeout = null;
+    this.successTimeout = null;
     this.goToProduct = () => {
       var _a;
       this.onCurrentColor.emit(this.currentColor);
@@ -18,6 +20,13 @@ export class MyColorInfo {
     this.onCloseButtonClick = () => {
       this.closeInfoBox.emit();
     };
+    this.getHref = () => {
+      var _a, _b, _c, _d;
+      if (this.baselink) {
+        return `${this.baselink}/${(_b = (_a = this === null || this === void 0 ? void 0 : this.currentColor.links) === null || _a === void 0 ? void 0 : _a.find((link) => (link === null || link === void 0 ? void 0 : link.shop) === this.shop)) === null || _b === void 0 ? void 0 : _b.path}`;
+      }
+      return (_d = (_c = this === null || this === void 0 ? void 0 : this.currentColor.links) === null || _c === void 0 ? void 0 : _c.find((link) => (link === null || link === void 0 ? void 0 : link.shop) === this.shop)) === null || _d === void 0 ? void 0 : _d.path;
+    };
     this.renderSliderOrImage = () => {
       var _a;
       if (this.currentColor.imageInsteadHex) {
@@ -30,22 +39,84 @@ export class MyColorInfo {
     this.capitalizeFirstLetter = (string) => {
       return string.charAt(0).toUpperCase() + string.slice(1).toLocaleLowerCase();
     };
+    this.isVeryLightBackground = () => {
+      var _a, _b;
+      if (this.currentColor.imageInsteadHex)
+        return true;
+      const hex = (_b = (_a = this.currentColor.hex) === null || _a === void 0 ? void 0 : _a.replace('#', '')) !== null && _b !== void 0 ? _b : '';
+      if (hex.length !== 6 && hex.length !== 3)
+        return false;
+      const r = parseInt(hex.length === 3 ? hex[0] + hex[0] : hex.slice(0, 2), 16) / 255;
+      const g = parseInt(hex.length === 3 ? hex[1] + hex[1] : hex.slice(2, 4), 16) / 255;
+      const b = parseInt(hex.length === 3 ? hex[2] + hex[2] : hex.slice(4, 6), 16) / 255;
+      const luminance = 0.299 * r + 0.587 * g + 0.114 * b;
+      return luminance > 0.96;
+    };
+    this.getButtonClass = () => {
+      if (this.currentColor.imageInsteadHex)
+        return 'brown';
+      return this.isVeryLightBackground() ? 'inverse' : '';
+    };
+    this.handleAddToBasket = () => {
+      var _a;
+      if (!((_a = this.availableTesters) === null || _a === void 0 ? void 0 : _a.id_product_attribute))
+        return;
+      if (this.basketStatus !== 'idle')
+        return;
+      this.clearBasketTimeouts();
+      this.basketStatus = 'loading';
+      this.addToBasket.emit({
+        id: this.availableTesters.id_product_attribute,
+      });
+      this.loadingTimeout = setTimeout(() => {
+        this.basketStatus = 'success';
+        this.successTimeout = setTimeout(() => {
+          this.basketStatus = 'idle';
+        }, 2500);
+      }, 900);
+    };
     this.currentColor = undefined;
     this.shop = undefined;
     this.product = undefined;
     this.baselink = undefined;
+    this.availableTesters = undefined;
+    this.price = undefined;
     this.data = null;
     this.isMobile = false;
     this.infoBoxWidth = undefined;
     this.closeImage = 'close.png';
+    this.basketStatus = 'idle';
+  }
+  onColorChange(newColor, oldColor) {
+    if ((newColor === null || newColor === void 0 ? void 0 : newColor.name) === (oldColor === null || oldColor === void 0 ? void 0 : oldColor.name))
+      return;
+    this.resetBasketStatus();
+  }
+  disconnectedCallback() {
+    this.clearBasketTimeouts();
+  }
+  clearBasketTimeouts() {
+    if (this.loadingTimeout) {
+      clearTimeout(this.loadingTimeout);
+      this.loadingTimeout = null;
+    }
+    if (this.successTimeout) {
+      clearTimeout(this.successTimeout);
+      this.successTimeout = null;
+    }
+  }
+  resetBasketStatus() {
+    this.clearBasketTimeouts();
+    this.basketStatus = 'idle';
   }
   render() {
+    var _a;
     return (h("div", { class: `boxes__box-content ${this.currentColor.textWhite ? 'boxes__box-content__white' : ''}`, style: {
         background: this.currentColor.imageInsteadHex ? 'white' : this.currentColor.hex,
         maxWidth: `${this.infoBoxWidth && this.infoBoxWidth - 4}px`,
       } }, this.isMobile && h("img", { class: 'closebtn', onClick: this.onCloseButtonClick, src: getAssetPath(`./assets/${this.closeImage}`), alt: "closebtn" }), h("div", { class: "boxes__box-content__info", style: {
         maxWidth: this.isMobile ? `${this.infoBoxWidth && this.infoBoxWidth - 35}px` : ``,
-      } }, !this.isMobile && h("img", { class: 'closebtn', onClick: this.onCloseButtonClick, src: getAssetPath(`./assets/${this.closeImage}`), alt: "closebtn" }), h("h2", null, this.currentColor.name), !this.isMobile && h("h4", null, this.currentColor.number), h("div", { class: "boxes__box-content__info__value" }, h("div", { class: "boxes__box-content__info__value-product" }, this.isMobile && h("div", { class: 'divider' }), this.currentColor && (h("button", { onClick: this.goToProduct, class: `button ${this.currentColor.imageInsteadHex ? 'brown' : this.currentColor.buttonInverse ? 'inverse' : ''}` }, "wybierz kolor"))))), h("div", { class: "boxes__box-content__slider" }, this.renderSliderOrImage())));
+      } }, !this.isMobile && h("img", { class: 'closebtn', onClick: this.onCloseButtonClick, src: getAssetPath(`./assets/${this.closeImage}`), alt: "closebtn" }), h("h2", null, this.currentColor.name), !this.isMobile && h("h4", null, this.currentColor.number), h("div", { class: "boxes__box-content__info__value" }, h("div", { class: "divider" }), h("div", { class: "boxes__box-content__info__tester" }, h("div", { class: "divider" }), h("div", { class: "tester-text" }, h("h2", null, "Zamow tester"), h("p", null, "Sprawdz go na swojej scianie.")), h("div", { class: "tester-buy" }, h("div", { class: "price" }, this.price ? `${this.price} zl` : ''), this.isMobile && h("div", { class: 'divider' }), this.basketStatus !== 'success' && (h("button", { class: `button fit ${this.getButtonClass()} ${!this.availableTesters ? 'disabled' : ''} ${this.basketStatus === 'loading' ? 'is-loading' : ''}`, onClick: this.handleAddToBasket, disabled: !this.availableTesters || this.basketStatus === 'loading' }, h("span", { class: "button-content" }, h("span", { class: "shape-icon", "aria-hidden": "true" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "15", height: "16", viewBox: "0 0 15 16" }, h("path", { class: "shape-icon__path", transform: "translate(0.0867462 0)", d: "M13.246571 12.763281L11.931726 4.961875C11.801879 4.1936703 11.13567 3.6319427 10.35657 3.63375L9.7429771 3.63375L9.7429771 3.1025C9.7429771 1.3890365 8.35394 0 6.6404767 0C4.9270134 0 3.537977 1.3890365 3.537977 3.1025L3.537977 3.63375L2.9217269 3.63375C2.1426277 3.6319427 1.4764187 4.1936703 1.3465706 4.961875L0.034383144 12.763281C-0.086738147 13.483807 0.11555123 14.221112 0.58740741 14.778946C1.0592636 15.336781 1.7528107 15.658594 2.4834456 15.658594L10.797508 15.658594C11.528143 15.658594 12.22169 15.336781 12.693546 14.778946C13.165402 14.221112 13.367692 13.483807 13.246571 12.763281L13.246571 12.763281ZM4.3348517 3.0892186C4.3348517 1.8158572 5.3671155 0.78359371 6.6404767 0.78359371C7.9138384 0.78359371 8.9461021 1.8158572 8.9461021 3.0892186L8.9461021 3.6204686L4.3348517 3.6204686L4.3348517 3.0892186ZM12.08579 14.264063C11.765244 14.643165 11.293964 14.86172 10.797508 14.86172L2.4834456 14.86172C1.9871488 14.862442 1.5158025 14.644215 1.195269 14.265309C0.87473541 13.886404 0.73765546 13.385406 0.82063317 12.896093L2.1248519 5.092031C2.1891608 4.703371 2.5278175 4.4200282 2.9217269 4.4252396L3.5353208 4.4252396L3.5353208 5.5834374C3.5353208 5.8034883 3.7137072 5.9818749 3.9337583 5.9818749C4.1538091 5.9818749 4.3321958 5.8034883 4.3321958 5.5834374L4.3321958 4.4252396L8.9461021 4.4252396L8.9461021 5.5834374C8.9461021 5.8034883 9.1244888 5.9818749 9.3445396 5.9818749C9.5645905 5.9818749 9.7429771 5.8034883 9.7429771 5.5834374L9.7429771 4.4252396L10.359227 4.4252396C10.753137 4.4200282 11.091793 4.703371 11.156102 5.092031L12.46032 12.896093C12.542204 13.384947 12.40527 13.885097 12.08579 14.264063L12.08579 14.264063Z" }))), !this.availableTesters ? 'Tester obecnie niedostepny' : 'Dodaj do koszyka'), this.basketStatus === 'loading' && (h("span", { class: "spinner", "aria-hidden": "true" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24" }, h("path", { d: "M12 2 A10 10 0 1 1 2 12", fill: "none", stroke: "currentColor", "stroke-width": "2.5", "stroke-linecap": "round" })))))), this.basketStatus === 'success' && (h("div", { class: `basket-status basket-status--success ${this.getButtonClass()}`, role: "status", "aria-live": "polite" }, h("span", { class: "check-icon", "aria-hidden": "true" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24" }, h("path", { d: "M5 12.5l4.5 4.5L19 7.5", fill: "none", stroke: "currentColor", "stroke-width": "2.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("span", null, h("strong", null, "Dodano"), " do koszyka"))))), h("div", { class: "boxes__box-content__info__value-product" }, this.currentColor && ((_a = this.currentColor.links) === null || _a === void 0 ? void 0 : _a.find((link) => (link === null || link === void 0 ? void 0 : link.shop) === this.shop)) && (h("a", { onClick: this.goToProduct, href: this.getHref(), class: `button ${this.getButtonClass()}` }, "wybierz kolor"))))), h("div", { class: "boxes__box-content__slider" }, this.renderSliderOrImage())));
   }
   static get is() { return "my-colorinfo"; }
   static get properties() {
@@ -121,6 +192,43 @@ export class MyColorInfo {
         "attribute": "baselink",
         "reflect": false
       },
+      "availableTesters": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "AvailableTester | null",
+          "resolved": "null | { id_product_attribute: number; color_name: string; }",
+          "references": {
+            "AvailableTester": {
+              "location": "import",
+              "path": "../../types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      },
+      "price": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number | null",
+          "resolved": "null | number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "price",
+        "reflect": false
+      },
       "data": {
         "type": "unknown",
         "mutable": false,
@@ -197,6 +305,11 @@ export class MyColorInfo {
       }
     };
   }
+  static get states() {
+    return {
+      "basketStatus": {}
+    };
+  }
   static get events() {
     return [{
         "method": "onCurrentColor",
@@ -218,6 +331,21 @@ export class MyColorInfo {
             }
           }
         }
+      }, {
+        "method": "addToBasket",
+        "name": "addToBasket",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "{ id: number }",
+          "resolved": "{ id: number; }",
+          "references": {}
+        }
       }, {
         "method": "closeInfoBox",
         "name": "closeInfoBox",
@@ -235,5 +363,11 @@ export class MyColorInfo {
         }
       }];
   }
+  static get watchers() {
+    return [{
+        "propName": "currentColor",
+        "methodName": "onColorChange"
+      }];
+  }
 }
 //# sourceMappingURL=index.js.map

package/dist/collection/components/colorinfo/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/colorinfo/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, getAssetPath, Event, EventEmitter } from '@stencil/core';\nimport { setDataLayer } from '../../gtmUtils';\nimport { Color, Product } from '../../types';\nimport { APIURL, accessToken } from '../api';\n\n@Component({\n  tag: 'my-colorinfo',\n})\nexport class MyColorInfo {\n  @Prop() currentColor: Color;\n  @Prop() shop: string;\n  @Prop() product: string;\n  @Prop() baselink: string;\n  @Prop() data: Product | null = null;\n  @Prop() isMobile: boolean = false;\n  @Prop() infoBoxWidth: number | null;\n  @Prop() closeImage = 'close.png';\n  @Event({ bubbles: true, composed: true }) onCurrentColor: EventEmitter<Color>;\n\n  @Event() closeInfoBox: EventEmitter;\n\n  goToProduct = () => {\n    this.onCurrentColor.emit(this.currentColor);\n    this.currentColor &&\n      setDataLayer({\n        event: 'GoToProduct',\n        shop: this.shop,\n        product: this.product,\n        color: this.currentColor?.name,\n      });\n\n    this.closeInfoBox.emit();\n  };\n\n  onCloseButtonClick = () => {\n    this.closeInfoBox.emit();\n  };\n\n  renderSliderOrImage = () => {\n    if (this.currentColor.imageInsteadHex) {\n      return <img class={'color-big-image'} src={`${APIURL}/assets/${this.currentColor.bigImage}?access_token=${accessToken}`} alt=\"color-image\" />;\n    } else {\n      return <my-slider color={this.currentColor.name} shop={this.shop} product={this.product} slides={this.data?.images}></my-slider>;\n    }\n  };\n\n  capitalizeFirstLetter = (string: string) => {\n    return string.charAt(0).toUpperCase() + string.slice(1).toLocaleLowerCase();\n  };\n\n  render() {\n    return (\n      <div\n        class={`boxes__box-content ${this.currentColor.textWhite ? 'boxes__box-content__white' : ''}`}\n        style={{\n          background: this.currentColor.imageInsteadHex ? 'white' : this.currentColor.hex,\n          maxWidth: `${this.infoBoxWidth && this.infoBoxWidth - 4}px`,\n        }}\n      >\n        {this.isMobile && <img class={'closebtn'} onClick={this.onCloseButtonClick} src={getAssetPath(`./assets/${this.closeImage}`)} alt=\"closebtn\" />}\n        <div\n          class=\"boxes__box-content__info\"\n          style={{\n            maxWidth: this.isMobile ? `${this.infoBoxWidth && this.infoBoxWidth - 35}px` : ``,\n          }}\n        >\n          {!this.isMobile && <img class={'closebtn'} onClick={this.onCloseButtonClick} src={getAssetPath(`./assets/${this.closeImage}`)} alt=\"closebtn\" />}\n          <h2>{this.currentColor.name}</h2>\n          {!this.isMobile && <h4>{this.currentColor.number}</h4>}\n\n          <div class=\"boxes__box-content__info__value\">\n            {/* <div class=\"boxes__box-content__info__value-image\">\n              {this.currentColor?.image! && <img src={`${APIURL}/assets/${this.currentColor.image}?access_token=${accessToken}`} alt=\"color-image\" />}\n            </div> */}\n            <div class=\"boxes__box-content__info__value-product\">\n              {/* <div>\n                {!this.isMobile && <p>Produkt:</p>}\n                {this.isMobile && <h2>{this.currentColor?.name}</h2>} <p>{this.product}</p>\n              </div> */}\n\n              {this.isMobile && <div class={'divider'}></div>}\n              {this.currentColor && (\n                <button onClick={this.goToProduct} class={`button ${this.currentColor.imageInsteadHex ? 'brown' : this.currentColor.buttonInverse ? 'inverse' : ''}`}>\n                  wybierz kolor\n                </button>\n              )}\n            </div>\n          </div>\n        </div>\n        <div class=\"boxes__box-content__slider\">{this.renderSliderOrImage()}</div>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/colorinfo/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, Watch, h, getAssetPath, Event, EventEmitter } from '@stencil/core';\nimport { setDataLayer } from '../../gtmUtils';\nimport { AvailableTester, Color, Link, Product } from '../../types';\nimport { APIURL, accessToken } from '../api';\n\n@Component({\n  tag: 'my-colorinfo',\n})\nexport class MyColorInfo {\n  @Prop() currentColor: Color;\n  @Prop() shop: string;\n  @Prop() product: string;\n  @Prop() baselink: string;\n  @Prop() availableTesters: AvailableTester | null;\n  @Prop() price: number | null;\n  @Prop() data: Product | null = null;\n  @Prop() isMobile: boolean = false;\n  @Prop() infoBoxWidth: number | null;\n  @Prop() closeImage = 'close.png';\n  @State() basketStatus: 'idle' | 'loading' | 'success' = 'idle';\n  private loadingTimeout: ReturnType<typeof setTimeout> | null = null;\n  private successTimeout: ReturnType<typeof setTimeout> | null = null;\n  @Event({ bubbles: true, composed: true }) onCurrentColor: EventEmitter<Color>;\n  @Event({ bubbles: true, composed: true }) addToBasket: EventEmitter<{ id: number }>;\n\n  @Event() closeInfoBox: EventEmitter;\n\n  @Watch('currentColor')\n  onColorChange(newColor: Color, oldColor: Color) {\n    if (newColor?.name === oldColor?.name) return;\n    this.resetBasketStatus();\n  }\n\n  disconnectedCallback() {\n    this.clearBasketTimeouts();\n  }\n\n  private clearBasketTimeouts() {\n    if (this.loadingTimeout) {\n      clearTimeout(this.loadingTimeout);\n      this.loadingTimeout = null;\n    }\n\n    if (this.successTimeout) {\n      clearTimeout(this.successTimeout);\n      this.successTimeout = null;\n    }\n  }\n\n  private resetBasketStatus() {\n    this.clearBasketTimeouts();\n    this.basketStatus = 'idle';\n  }\n\n  goToProduct = () => {\n    this.onCurrentColor.emit(this.currentColor);\n    this.currentColor &&\n      setDataLayer({\n        event: 'GoToProduct',\n        shop: this.shop,\n        product: this.product,\n        color: this.currentColor?.name,\n      });\n\n    this.closeInfoBox.emit();\n  };\n\n  onCloseButtonClick = () => {\n    this.closeInfoBox.emit();\n  };\n\n  getHref = () => {\n    if (this.baselink) {\n      return `${this.baselink}/${this?.currentColor.links?.find((link: Link) => link?.shop === this.shop)?.path}`;\n    }\n    return this?.currentColor.links?.find((link: Link) => link?.shop === this.shop)?.path;\n  };\n\n  renderSliderOrImage = () => {\n    if (this.currentColor.imageInsteadHex) {\n      return <img class={'color-big-image'} src={`${APIURL}/assets/${this.currentColor.bigImage}?access_token=${accessToken}`} alt=\"color-image\" />;\n    } else {\n      return <my-slider color={this.currentColor.name} shop={this.shop} product={this.product} slides={this.data?.images}></my-slider>;\n    }\n  };\n\n  capitalizeFirstLetter = (string: string) => {\n    return string.charAt(0).toUpperCase() + string.slice(1).toLocaleLowerCase();\n  };\n\n  isVeryLightBackground = (): boolean => {\n    if (this.currentColor.imageInsteadHex) return true;\n    const hex = this.currentColor.hex?.replace('#', '') ?? '';\n    if (hex.length !== 6 && hex.length !== 3) return false;\n    const r = parseInt(hex.length === 3 ? hex[0] + hex[0] : hex.slice(0, 2), 16) / 255;\n    const g = parseInt(hex.length === 3 ? hex[1] + hex[1] : hex.slice(2, 4), 16) / 255;\n    const b = parseInt(hex.length === 3 ? hex[2] + hex[2] : hex.slice(4, 6), 16) / 255;\n    const luminance = 0.299 * r + 0.587 * g + 0.114 * b;\n    return luminance > 0.96;\n  };\n\n  getButtonClass = () => {\n    if (this.currentColor.imageInsteadHex) return 'brown';\n    return this.isVeryLightBackground() ? 'inverse' : '';\n  };\n\n  handleAddToBasket = () => {\n    if (!this.availableTesters?.id_product_attribute) return;\n    if (this.basketStatus !== 'idle') return;\n\n    this.clearBasketTimeouts();\n    this.basketStatus = 'loading';\n    this.addToBasket.emit({\n      id: this.availableTesters.id_product_attribute,\n    });\n\n    this.loadingTimeout = setTimeout(() => {\n      this.basketStatus = 'success';\n      this.successTimeout = setTimeout(() => {\n        this.basketStatus = 'idle';\n      }, 2500);\n    }, 900);\n  };\n\n  render() {\n    return (\n      <div\n        class={`boxes__box-content ${this.currentColor.textWhite ? 'boxes__box-content__white' : ''}`}\n        style={{\n          background: this.currentColor.imageInsteadHex ? 'white' : this.currentColor.hex,\n          maxWidth: `${this.infoBoxWidth && this.infoBoxWidth - 4}px`,\n        }}\n      >\n        {this.isMobile && <img class={'closebtn'} onClick={this.onCloseButtonClick} src={getAssetPath(`./assets/${this.closeImage}`)} alt=\"closebtn\" />}\n        <div\n          class=\"boxes__box-content__info\"\n          style={{\n            maxWidth: this.isMobile ? `${this.infoBoxWidth && this.infoBoxWidth - 35}px` : ``,\n          }}\n        >\n          {!this.isMobile && <img class={'closebtn'} onClick={this.onCloseButtonClick} src={getAssetPath(`./assets/${this.closeImage}`)} alt=\"closebtn\" />}\n          <h2>{this.currentColor.name}</h2>\n          {!this.isMobile && <h4>{this.currentColor.number}</h4>}\n\n          <div class=\"boxes__box-content__info__value\">\n            <div class=\"divider\"></div>\n            <div class=\"boxes__box-content__info__tester\">\n              <div class=\"divider\"></div>\n              <div class=\"tester-text\">\n                <h2>Zamow tester</h2>\n                <p>Sprawdz go na swojej scianie.</p>\n              </div>\n              <div class=\"tester-buy\">\n                <div class=\"price\">{this.price ? `${this.price} zl` : ''}</div>\n                {this.isMobile && <div class={'divider'}></div>}\n                {this.basketStatus !== 'success' && (\n                  <button\n                    class={`button fit ${this.getButtonClass()} ${!this.availableTesters ? 'disabled' : ''} ${\n                      this.basketStatus === 'loading' ? 'is-loading' : ''\n                    }`}\n                    onClick={this.handleAddToBasket}\n                    disabled={!this.availableTesters || this.basketStatus === 'loading'}\n                  >\n                    <span class=\"button-content\">\n                      <span class=\"shape-icon\" aria-hidden=\"true\">\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"15\" height=\"16\" viewBox=\"0 0 15 16\">\n                          <path\n                            class=\"shape-icon__path\"\n                            transform=\"translate(0.0867462 0)\"\n                            d=\"M13.246571 12.763281L11.931726 4.961875C11.801879 4.1936703 11.13567 3.6319427 10.35657 3.63375L9.7429771 3.63375L9.7429771 3.1025C9.7429771 1.3890365 8.35394 0 6.6404767 0C4.9270134 0 3.537977 1.3890365 3.537977 3.1025L3.537977 3.63375L2.9217269 3.63375C2.1426277 3.6319427 1.4764187 4.1936703 1.3465706 4.961875L0.034383144 12.763281C-0.086738147 13.483807 0.11555123 14.221112 0.58740741 14.778946C1.0592636 15.336781 1.7528107 15.658594 2.4834456 15.658594L10.797508 15.658594C11.528143 15.658594 12.22169 15.336781 12.693546 14.778946C13.165402 14.221112 13.367692 13.483807 13.246571 12.763281L13.246571 12.763281ZM4.3348517 3.0892186C4.3348517 1.8158572 5.3671155 0.78359371 6.6404767 0.78359371C7.9138384 0.78359371 8.9461021 1.8158572 8.9461021 3.0892186L8.9461021 3.6204686L4.3348517 3.6204686L4.3348517 3.0892186ZM12.08579 14.264063C11.765244 14.643165 11.293964 14.86172 10.797508 14.86172L2.4834456 14.86172C1.9871488 14.862442 1.5158025 14.644215 1.195269 14.265309C0.87473541 13.886404 0.73765546 13.385406 0.82063317 12.896093L2.1248519 5.092031C2.1891608 4.703371 2.5278175 4.4200282 2.9217269 4.4252396L3.5353208 4.4252396L3.5353208 5.5834374C3.5353208 5.8034883 3.7137072 5.9818749 3.9337583 5.9818749C4.1538091 5.9818749 4.3321958 5.8034883 4.3321958 5.5834374L4.3321958 4.4252396L8.9461021 4.4252396L8.9461021 5.5834374C8.9461021 5.8034883 9.1244888 5.9818749 9.3445396 5.9818749C9.5645905 5.9818749 9.7429771 5.8034883 9.7429771 5.5834374L9.7429771 4.4252396L10.359227 4.4252396C10.753137 4.4200282 11.091793 4.703371 11.156102 5.092031L12.46032 12.896093C12.542204 13.384947 12.40527 13.885097 12.08579 14.264063L12.08579 14.264063Z\"\n                          />\n                        </svg>\n                      </span>\n                      {!this.availableTesters ? 'Tester obecnie niedostepny' : 'Dodaj do koszyka'}\n                    </span>\n                    {this.basketStatus === 'loading' && (\n                      <span class=\"spinner\" aria-hidden=\"true\">\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\">\n                          <path d=\"M12 2 A10 10 0 1 1 2 12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" />\n                        </svg>\n                      </span>\n                    )}\n                  </button>\n                )}\n                {this.basketStatus === 'success' && (\n                  <div class={`basket-status basket-status--success ${this.getButtonClass()}`} role=\"status\" aria-live=\"polite\">\n                    <span class=\"check-icon\" aria-hidden=\"true\">\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\">\n                        <path d=\"M5 12.5l4.5 4.5L19 7.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                      </svg>\n                    </span>\n                    <span>\n                      <strong>Dodano</strong> do koszyka\n                    </span>\n                  </div>\n                )}\n              </div>\n            </div>\n            <div class=\"boxes__box-content__info__value-product\">\n              {this.currentColor && this.currentColor.links?.find((link: Link) => link?.shop === this.shop) && (\n                <a onClick={this.goToProduct} href={this.getHref()} class={`button ${this.getButtonClass()}`}>\n                  wybierz kolor\n                </a>\n              )}\n            </div>\n          </div>\n        </div>\n        <div class=\"boxes__box-content__slider\">{this.renderSliderOrImage()}</div>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/component/index.js

@@ -6,6 +6,8 @@ export class MyModalBundle {
     this.product = undefined;
     this.baselink = undefined;
     this.colorname = undefined;
+    this.available_testers = undefined;
+    this.price = undefined;
     this.show = false;
     this.readyToClose = false;
   }
@@ -25,10 +27,16 @@ export class MyModalBundle {
   handleSelectedColor(event) {
     this.onSelectedColor.emit(event.detail);
   }
+  addToBasketHandler(event) {
+    this.addToBasket.emit(event.detail);
+  }
   render() {
     let content = null;
     if (this.show) {
-      content = [h("my-backdrop", null), h("my-modal", { shop: this.shop, product: this.product, baselink: this.baselink, selectedcolor: this.colorname })];
+      content = [
+        h("my-backdrop", null),
+        h("my-modal", { shop: this.shop, product: this.product, baselink: this.baselink, selectedcolor: this.colorname, available_testers: this.available_testers ? JSON.parse(this.available_testers) : null, price: this.price }),
+      ];
     }
     return (h("div", { onClick: () => {
         if (this.readyToClose) {
@@ -126,6 +134,40 @@ export class MyModalBundle {
         },
         "attribute": "colorname",
         "reflect": false
+      },
+      "available_testers": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | null",
+          "resolved": "null | string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "available_testers",
+        "reflect": false
+      },
+      "price": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number | null",
+          "resolved": "null | number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "price",
+        "reflect": false
       }
     };
   }
@@ -156,6 +198,21 @@ export class MyModalBundle {
             }
           }
         }
+      }, {
+        "method": "addToBasket",
+        "name": "addToBasket",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "{ id: number }",
+          "resolved": "{ id: number; }",
+          "references": {}
+        }
       }];
   }
   static get methods() {
@@ -214,6 +271,12 @@ export class MyModalBundle {
         "target": undefined,
         "capture": false,
         "passive": false
+      }, {
+        "name": "addToBasket",
+        "method": "addToBasketHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
       }];
   }
 }

package/dist/collection/components/component/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/component/index.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAQxG,MAAM,OAAO,aAAa;;;;;;gBAQR,KAAK;wBACG,KAAK;;EAG7B,KAAK,CAAC,IAAI;IACR,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;EACnB,CAAC;EAGD,KAAK,CAAC,KAAK;IACT,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;EACpB,CAAC;EAGD,sBAAsB,CAAC,KAAkB;IACvC,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC;EAC9C,CAAC;EAGD,iBAAiB;IACf,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IAClB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;EAC5B,CAAC;EAGD,mBAAmB,CAAC,KAAyB;IAC3C,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;EAC1C,CAAC;EAED,MAAM;IACJ,IAAI,OAAO,GAAG,IAAI,CAAC;IACnB,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,OAAO,GAAG,CAAC,sBAA2B,EAAE,gBAAU,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,aAAa,EAAE,IAAI,CAAC,SAAS,GAAa,CAAC,CAAC;KAChK;IACD,OAAO,CACL,WACE,OAAO,EAAE,GAAG,EAAE;QACZ,IAAI,IAAI,CAAC,YAAY,EAAE;UACrB,IAAI,CAAC,iBAAiB,EAAE,CAAC;SAC1B;MACH,CAAC;MAED,EAAC,MAAM;QACL,kBACG;;;;;;;;;mEASsD,CAChD,CACF;MACT,WAAK,KAAK,EAAC,iBAAiB,IAAE,OAAO,CAAO;MAC5C;QACE,cAAQ,GAAG,EAAC,0DAA0D,EAAC,MAAM,EAAC,GAAG,EAAC,KAAK,EAAC,GAAG,EAAC,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAW,CAC9I,CACP,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import Helmet from '@stencil/helmet';\nimport { Component, Prop, Method, Element, State, Listen, h, Event, EventEmitter } from '@stencil/core';\nimport { Color } from '../../types';\n\n@Component({\n  tag: 'my-component',\n  styleUrl: 'index.scss',\n  scoped: true,\n})\nexport class MyModalBundle {\n  @Element() modalEl: HTMLElement;\n  @Event({ bubbles: true, composed: true }) onSelectedColor: EventEmitter<Color>;\n  @Prop() shop: string;\n  @Prop() product: string;\n  @Prop() baselink: string;\n  @Prop() colorname: string | null;\n\n  @State() show = false;\n  @State() readyToClose = false;\n\n  @Method()\n  async open() {\n    this.show = true;\n  }\n\n  @Method()\n  async close() {\n    this.show = false;\n  }\n\n  @Listen('readyToCLose')\n  setReadyToCloseHandler(value: CustomEvent) {\n    this.readyToClose = value.detail.observable;\n  }\n\n  @Listen('close')\n  closeModalHandler() {\n    this.show = false;\n    this.readyToClose = false;\n  }\n\n  @Listen('onSelectedColorEmit')\n  handleSelectedColor(event: CustomEvent<Color>) {\n    this.onSelectedColor.emit(event.detail);\n  }\n\n  render() {\n    let content = null;\n    if (this.show) {\n      content = [<my-backdrop></my-backdrop>, <my-modal shop={this.shop} product={this.product} baselink={this.baselink} selectedcolor={this.colorname}></my-modal>];\n    }\n    return (\n      <div\n        onClick={() => {\n          if (this.readyToClose) {\n            this.closeModalHandler();\n          }\n        }}\n      >\n        <Helmet>\n          <script>\n            {`(function (w, d, s, l, i) {\n        w[l] = w[l] || [];\n        w[l].push({ 'gtm.start': new Date().getTime(), 'event': 'gtm.js' });\n        var f = d.getElementsByTagName(s)[0],\n          j = d.createElement(s),\n          dl = l != 'dataLayer' ? '&l=' + l : '';\n        j.async = true;\n        j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;\n        f.parentNode.insertBefore(j, f);\n      })(window, document, 'script', 'dataLayer', 'GTM-537BV9VT');`}\n          </script>\n        </Helmet>\n        <div class=\"tinting-wrapper\">{content}</div>\n        <noscript>\n          <iframe src=\"https://www.googletagmanager.com/ns.html?id=GTM-537BV9VT\" height=\"0\" width=\"0\" style={{ display: 'none', visibility: 'hidden' }}></iframe>\n        </noscript>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/component/index.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAQxG,MAAM,OAAO,aAAa;;;;;;;;gBAWR,KAAK;wBACG,KAAK;;EAG7B,KAAK,CAAC,IAAI;IACR,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;EACnB,CAAC;EAGD,KAAK,CAAC,KAAK;IACT,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;EACpB,CAAC;EAGD,sBAAsB,CAAC,KAAkB;IACvC,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC;EAC9C,CAAC;EAGD,iBAAiB;IACf,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IAClB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;EAC5B,CAAC;EAGD,mBAAmB,CAAC,KAAyB;IAC3C,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;EAC1C,CAAC;EAGD,kBAAkB,CAAC,KAAkC;IACnD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;EACtC,CAAC;EAED,MAAM;IACJ,IAAI,OAAO,GAAG,IAAI,CAAC;IACnB,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,OAAO,GAAG;QACR,sBAA2B;QAC3B,gBACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,aAAa,EAAE,IAAI,CAAC,SAAS,EAC7B,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,IAAI,EACrF,KAAK,EAAE,IAAI,CAAC,KAAK,GACP;OACb,CAAC;KACH;IACD,OAAO,CACL,WACE,OAAO,EAAE,GAAG,EAAE;QACZ,IAAI,IAAI,CAAC,YAAY,EAAE;UACrB,IAAI,CAAC,iBAAiB,EAAE,CAAC;SAC1B;MACH,CAAC;MAED,EAAC,MAAM;QACL,kBACG;;;;;;;;;mEASsD,CAChD,CACF;MACT,WAAK,KAAK,EAAC,iBAAiB,IAAE,OAAO,CAAO;MAC5C;QACE,cAAQ,GAAG,EAAC,0DAA0D,EAAC,MAAM,EAAC,GAAG,EAAC,KAAK,EAAC,GAAG,EAAC,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAW,CAC9I,CACP,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import Helmet from '@stencil/helmet';\nimport { Component, Prop, Method, Element, State, Listen, h, Event, EventEmitter } from '@stencil/core';\nimport { Color } from '../../types';\n\n@Component({\n  tag: 'my-component',\n  styleUrl: 'index.scss',\n  scoped: true,\n})\nexport class MyModalBundle {\n  @Element() modalEl: HTMLElement;\n  @Event({ bubbles: true, composed: true }) onSelectedColor: EventEmitter<Color>;\n  @Event({ bubbles: true, composed: true }) addToBasket: EventEmitter<{ id: number }>;\n  @Prop() shop: string;\n  @Prop() product: string;\n  @Prop() baselink: string;\n  @Prop() colorname: string | null;\n  @Prop() available_testers: string | null;\n  @Prop() price: number | null;\n\n  @State() show = false;\n  @State() readyToClose = false;\n\n  @Method()\n  async open() {\n    this.show = true;\n  }\n\n  @Method()\n  async close() {\n    this.show = false;\n  }\n\n  @Listen('readyToCLose')\n  setReadyToCloseHandler(value: CustomEvent) {\n    this.readyToClose = value.detail.observable;\n  }\n\n  @Listen('close')\n  closeModalHandler() {\n    this.show = false;\n    this.readyToClose = false;\n  }\n\n  @Listen('onSelectedColorEmit')\n  handleSelectedColor(event: CustomEvent<Color>) {\n    this.onSelectedColor.emit(event.detail);\n  }\n\n  @Listen('addToBasket')\n  addToBasketHandler(event: CustomEvent<{ id: number }>) {\n    this.addToBasket.emit(event.detail);\n  }\n\n  render() {\n    let content = null;\n    if (this.show) {\n      content = [\n        <my-backdrop></my-backdrop>,\n        <my-modal\n          shop={this.shop}\n          product={this.product}\n          baselink={this.baselink}\n          selectedcolor={this.colorname}\n          available_testers={this.available_testers ? JSON.parse(this.available_testers) : null}\n          price={this.price}\n        ></my-modal>,\n      ];\n    }\n    return (\n      <div\n        onClick={() => {\n          if (this.readyToClose) {\n            this.closeModalHandler();\n          }\n        }}\n      >\n        <Helmet>\n          <script>\n            {`(function (w, d, s, l, i) {\n        w[l] = w[l] || [];\n        w[l].push({ 'gtm.start': new Date().getTime(), 'event': 'gtm.js' });\n        var f = d.getElementsByTagName(s)[0],\n          j = d.createElement(s),\n          dl = l != 'dataLayer' ? '&l=' + l : '';\n        j.async = true;\n        j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;\n        f.parentNode.insertBefore(j, f);\n      })(window, document, 'script', 'dataLayer', 'GTM-537BV9VT');`}\n          </script>\n        </Helmet>\n        <div class=\"tinting-wrapper\">{content}</div>\n        <noscript>\n          <iframe src=\"https://www.googletagmanager.com/ns.html?id=GTM-537BV9VT\" height=\"0\" width=\"0\" style={{ display: 'none', visibility: 'hidden' }}></iframe>\n        </noscript>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/modal/index.css

@@ -168,12 +168,15 @@
 }
 .my-modal__wrapper .boxes__box-content__info__value {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   justify-content: flex-start;
+  align-items: flex-start;
+  gap: 20px;
 }
 @media (max-width: 1024px) {
   .my-modal__wrapper .boxes__box-content__info__value {
     justify-content: flex-start;
+    margin-top: 30px;
   }
 }
 @media (max-width: 768px) {
@@ -242,6 +245,39 @@
     flex-direction: column;
   }
 }
+.my-modal__wrapper .boxes__box-content__info__tester {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  width: 100%;
+}
+.my-modal__wrapper .boxes__box-content__info__tester .tester-text h2 {
+  margin: 0 0 10px;
+  font-size: 18px;
+  font-weight: 700;
+}
+.my-modal__wrapper .boxes__box-content__info__tester .tester-text p {
+  margin: 0;
+  font-size: 14px;
+}
+.my-modal__wrapper .boxes__box-content__info__tester .tester-buy {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  width: 100%;
+  flex-wrap: nowrap;
+  min-width: 0;
+}
+@media (max-width: 1024px) {
+  .my-modal__wrapper .boxes__box-content__info__tester .tester-buy {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+.my-modal__wrapper .boxes__box-content__info .price {
+  font-size: 20px;
+  font-weight: 600;
+}
 .my-modal__wrapper .boxes__box-content__slider {
   width: 60%;
   min-width: 60%;
@@ -341,6 +377,28 @@
   transition: all 0.7s ease-in-out;
   border: none;
   cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+.my-modal .button .shape-icon,
+.my-modal a .shape-icon {
+  display: inline-flex;
+}
+.my-modal .button .shape-icon svg,
+.my-modal a .shape-icon svg {
+  display: block;
+}
+.my-modal .button .shape-icon path,
+.my-modal .button .shape-icon .shape-icon__path,
+.my-modal a .shape-icon path,
+.my-modal a .shape-icon .shape-icon__path {
+  fill: currentColor;
+  transition: fill 0.7s ease-in-out;
+}
+.my-modal .button.fit,
+.my-modal a.fit {
+  padding: 10px 15px;
 }
 .my-modal .button:hover,
 .my-modal a:hover {
@@ -367,6 +425,50 @@
   color: #232323;
   background-color: #fff;
 }
+.my-modal .button.inverse svg path,
+.my-modal a.inverse svg path {
+  fill: #fff;
+}
+.my-modal .button:disabled, .my-modal .button.disabled,
+.my-modal a:disabled,
+.my-modal a.disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.my-modal .button.is-loading,
+.my-modal a.is-loading {
+  position: relative;
+  cursor: wait;
+}
+.my-modal .button.is-loading:hover,
+.my-modal a.is-loading:hover {
+  background-color: inherit;
+  color: inherit;
+}
+.my-modal .button.is-loading .button-content,
+.my-modal a.is-loading .button-content {
+  visibility: hidden;
+}
+.my-modal .button.is-loading .spinner,
+.my-modal a.is-loading .spinner {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: basket-spin 0.9s linear infinite;
+  color: currentColor;
+}
+.my-modal .button.is-loading .spinner svg,
+.my-modal a.is-loading .spinner svg {
+  display: block;
+}
+.my-modal .button .button-content,
+.my-modal a .button-content {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
 @media (max-width: 1024px) {
   .my-modal .button,
 .my-modal a {
@@ -383,4 +485,77 @@
 }
 .my-modal > .button {
   margin: 10px auto;
+}
+.my-modal .basket-status {
+  cursor: default;
+  pointer-events: none;
+  max-width: 100%;
+  min-width: 0;
+}
+.my-modal .basket-status--success {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 18px;
+  background-color: #fff;
+  color: #232323;
+  border-radius: 28px 28px 28px 0;
+  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
+  font-size: 14px;
+  white-space: nowrap;
+  animation: basket-success-in 0.25s ease-out;
+  max-width: 100%;
+  min-width: 0;
+  flex: 1 1 auto;
+}
+.my-modal .basket-status--success > span:last-child {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.my-modal .basket-status--success .check-icon {
+  display: inline-flex;
+  color: #2bb673;
+}
+.my-modal .basket-status--success .check-icon svg {
+  display: block;
+  width: 20px;
+  height: 20px;
+}
+.my-modal .basket-status--success strong {
+  font-weight: 700;
+}
+.my-modal .basket-status--success.inverse {
+  background-color: #232323;
+  color: #fff;
+}
+.my-modal .basket-status--success.brown {
+  background-color: #3c2114;
+  color: #fff;
+}
+@media (max-width: 1024px) {
+  .my-modal .basket-status--success {
+    font-size: 13px;
+    padding: 12px 22px;
+    border-radius: 22px 22px 22px 0;
+    white-space: normal;
+    width: 100%;
+    justify-content: center;
+  }
+}
+
+@keyframes basket-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes basket-success-in {
+  from {
+    opacity: 0;
+    transform: translateX(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
 }