hemfixarna-web-components 1.8.5 → 1.8.7

package/dist/collection/components/hemfixarna-component/hemfixarna-component.js

@@ -0,0 +1,330 @@
+import { Fragment, getAssetPath, h } from '@stencil/core';
+import state from '../../store';
+import { WidgetStyle } from '../../types';
+import { getCustomer, getGreenDiscount, getOptions, getRot, getRut, loginCustomer } from '../../utils/api';
+import { getProductPriceWithRotAndRut } from '../../utils/calc';
+import { scrollToTop } from '../../utils/scroll';
+export class HemfixarnaComponent {
+  constructor() {
+    this.triggerScrollTotop = () => {
+      const el = this.el.shadowRoot.querySelector('.hemfixarna_content');
+      scrollToTop(el);
+    };
+    this.modal = false;
+    this.showModal = false;
+    this.product = null;
+    this.id = undefined;
+    this.slug = undefined;
+    this.business = undefined;
+    this.widgetStyle = WidgetStyle.standard;
+    this.buttonColor = undefined;
+    this.buttonBg = undefined;
+    this.proppedProduct = null;
+    this.loginSourceError = null;
+  }
+  loadCategoryOrProduct(id) {
+    this.proppedProduct = null;
+    if (id.startsWith('c-')) {
+      const categories = [...state.customer.categories, ...state.customer.categories.map(c => { var _a; return (_a = c.sub_categories) !== null && _a !== void 0 ? _a : []; })].flat();
+      const category = categories.find(c => c && c.id === id.replace('c-', ''));
+      if (category) {
+        state.selectedCustomerCategory = category;
+        state.step = 2;
+      }
+    }
+    else {
+      const products = state.customer.categories
+        .map(c => (c.show_products ? c.products : c.sub_categories ? c.sub_categories.map(c => c.products) : []))
+        .flat()
+        .flat();
+      const product = products.find(p => p && p.fields.ID === parseInt(id));
+      if (product) {
+        state.selectedProduct = product.fields;
+        state.step = 4;
+        this.proppedProduct = product.fields;
+      }
+    }
+  }
+  async watchIdChange(id) {
+    if (id && state.customer) {
+      if (id === 'maleri') {
+        state.maleri = true;
+        state.step = 4;
+      }
+      else {
+        this.loadCategoryOrProduct(id);
+      }
+    }
+  }
+  async componentWillLoad() {
+    state.business = this.business;
+    const cart = window.sessionStorage.getItem(`hemfixarna-${this.business}-cart`);
+    if (cart) {
+      state.cart = JSON.parse(cart);
+    }
+    const user = window.sessionStorage.getItem(`hemfixarna-${this.business}-user`);
+    if (user) {
+      state.user = JSON.parse(user);
+    }
+    const creditSafeUser = window.sessionStorage.getItem(`hemfixarna-${this.business}-creditSafeUser`);
+    if (creditSafeUser) {
+      state.creditSafeUser = JSON.parse(creditSafeUser);
+    }
+    const [options, rut, rot, greenDiscount] = await Promise.all([getOptions(), getRut(), getRot(), getGreenDiscount()]);
+    try {
+      const customer = await getCustomer(this.business);
+      if ((customer === null || customer === void 0 ? void 0 : customer.code) === 'not_found') {
+        console.warn('customer not found');
+      }
+      else if (customer) {
+        state.customer = customer;
+        const id = this.id || this.slug;
+        if (id) {
+          if (id === 'maleri') {
+            state.maleri = true;
+            state.step = 4;
+          }
+          else {
+            this.loadCategoryOrProduct(id);
+          }
+        }
+      }
+    }
+    catch (error) {
+      console.warn('customer not found');
+    }
+    state.rotOptions = rot;
+    state.rutOptions = rut;
+    state.greenOptions = greenDiscount;
+    state.options = options;
+    if (localStorage.getItem('select_source')) {
+      state.selectSource = true;
+    }
+  }
+  // Open close modal && click outside event
+  openModal() {
+    if (this.id) {
+      if (this.id === 'maleri') {
+        state.maleri = true;
+        state.step = 4;
+      }
+      else {
+        state.maleri = false;
+        this.loadCategoryOrProduct(this.id);
+      }
+    }
+    this.modal = true;
+    setTimeout(() => {
+      this.showModal = true;
+    }, 50);
+  }
+  closeModal() {
+    this.showModal = false;
+    setTimeout(() => {
+      this.modal = false;
+    }, 200);
+  }
+  handleClick(e) {
+    if ((e === null || e === void 0 ? void 0 : e.composedPath()[0]).classList.contains('hemfixarna_backdrop')) {
+      this.closeModal();
+    }
+    const infomodal = this.el.shadowRoot.querySelector('.hemfixarna_infomodal');
+    if (infomodal) {
+      const isClickInside = infomodal.contains(e.composedPath()[0]);
+      if (!isClickInside) {
+        state.modal = null;
+      }
+    }
+  }
+  async handleLogin() {
+    this.loginSourceError = null;
+    const passwordInput = this.el.shadowRoot.querySelector('input[type="password"]');
+    const password = passwordInput.value;
+    try {
+      const status = await loginCustomer({ id: state.customer.ID, password: password });
+      if (status === 200) {
+        state.showSourcePasswordPrompt = false;
+        state.selectSource = true;
+      }
+      else {
+        this.loginSourceError = 'Fel lösenord';
+      }
+    }
+    catch (error) {
+      console.log(error);
+      this.loginSourceError = 'Fel lösenord';
+    }
+  }
+  getCartLength() {
+    return state.cart.reduce((acc, curr) => acc + curr.amount, 0);
+  }
+  render() {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    const logo = getAssetPath(`./assets/hemfixarna.svg`);
+    const pensel = getAssetPath(`./assets/pensel.svg`);
+    const monteringLogo = getAssetPath(`./assets/montering.svg`);
+    return (h("div", { class: `hemfixarna hemfixarna-${this.business}` }, h("div", { class: `hemfixarna_box hemfixarna_box--${this.widgetStyle}` }, [WidgetStyle.alternative_2, WidgetStyle.alternative_3].includes(this.widgetStyle) ? (h("img", { src: this.id === 'maleri' ? pensel : monteringLogo, alt: "montering logo", width: 32, height: 32 })) : null, h("div", null, h("div", null, h("p", { onClick: () => this.openModal(), class: `pointer ${[WidgetStyle.alternative_2, WidgetStyle.alternative_3].includes(this.widgetStyle) && state.selectedProduct ? 'underline' : ''}` }, this.id === 'maleri' ? (h("span", null, "Ber\u00E4kna fast pris p\u00E5 m\u00E5leri & tapetsering h\u00E4r")) : (h(Fragment, null, !state.selectedCustomerCategory && !this.product && !this.proppedProduct ? (h(Fragment, null, ((_a = state.customer) === null || _a === void 0 ? void 0 : _a.widget_title) ? (h("span", null, state.customer.widget_title)) : (h("span", null, "Montering/Installation - ", h("strong", { class: "underline" }, "se priser h\u00E4r"))))) : (h(Fragment, null, ((_b = this.product) === null || _b === void 0 ? void 0 : _b.title) || ((_c = this.proppedProduct) === null || _c === void 0 ? void 0 : _c.title) || ((_d = state.selectedCustomerCategory) === null || _d === void 0 ? void 0 : _d.widget_title) || (h("span", null, "Montering", h("wbr", null), "/Installation ", (_f = (_e = state.selectedCustomerCategory) === null || _e === void 0 ? void 0 : _e.name) !== null && _f !== void 0 ? _f : 'på plats', " - ", h("strong", { class: "underline" }, "se priser h\u00E4r"))), this.proppedProduct && !((_g = this.product) === null || _g === void 0 ? void 0 : _g.invoice) && !((_h = this.proppedProduct) === null || _h === void 0 ? void 0 : _h.invoice) ? (h("span", null, ' från', " ", h("strong", null, getProductPriceWithRotAndRut(this.proppedProduct || this.product), "kr"))) : null)))))), this.widgetStyle === WidgetStyle.standard ? h("img", { src: logo, width: 104 }) : null, this.widgetStyle === WidgetStyle.alternative ? (h("span", { class: "p-s" }, "Utf\u00F6rs av ", h("strong", null, "Hemfixarna"))) : null), [WidgetStyle.standard, WidgetStyle.alternative].includes(this.widgetStyle) ? (h("button", { onClick: () => this.openModal(), class: "hemfixarna_btn", style: {
+        color: ((_j = this.buttonColor) === null || _j === void 0 ? void 0 : _j.startsWith('#')) || !((_k = this.buttonColor) === null || _k === void 0 ? void 0 : _k.length) ? this.buttonColor : `#${this.buttonColor}`,
+        backgroundColor: ((_l = this.buttonBg) === null || _l === void 0 ? void 0 : _l.startsWith('#')) || !((_m = this.buttonBg) === null || _m === void 0 ? void 0 : _m.length) ? this.buttonBg : `#${this.buttonBg}`,
+      } }, "Best\u00E4ll h\u00E4r", this.getCartLength() > 0 && h("span", null, this.getCartLength()))) : null, WidgetStyle.alternative_2 === this.widgetStyle ? (h("div", { class: "hemfixarna_altbtn" }, h("strong", { class: "p-s" }, "Utf\u00F6rs av"), h("img", { src: logo, alt: "hemfixarna logo", width: 98 }))) : null), this.modal && (h("div", null, h("div", { class: `hemfixarna_modal ${this.showModal ? 'hemfixarna_modal--open' : ''}` }, state.modal && (h("div", { class: "hemfixarna_infomodal" }, state.modal.title && h("h2", null, state.modal.title), h("p", { innerHTML: state.modal.text }), h("div", null, h("button", { onClick: () => (state.modal = null) }, "St\u00E4ng")))), state.showSourcePasswordPrompt ? (h("div", { class: "hemfixarna_source--pw hemfixarna_infomodal" }, h("form", { onSubmit: e => {
+        e.preventDefault();
+        this.handleLogin();
+      } }, h("input", { type: "password", placeholder: "L\u00F6senord" }), h("input", { type: "submit", value: "Logga in" }), this.loginSourceError && h("span", null, "Fel l\u00F6senord")))) : null, state.customer && h("hemfixarna-breadcrumbs", { closeModal: () => this.closeModal() }), h("div", { class: `hemfixarna_content hemfixarna_content--${state.step} ${state.step === 4 && state.maleri ? 'hemfixarna_content--painting' : ''}` }, state.step < 4 && h("hemfixarna-start", null), state.step === 4 && h("hemfixarna-product", null), state.step === 5 && h("hemfixarna-cart", null), state.step === 6 && h("hemfixarna-order", null))), h("div", { class: `hemfixarna_backdrop ${this.showModal ? 'hemfixarna_backdrop--open' : ''}` })))));
+  }
+  static get is() { return "hemfixarna-component"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["hemfixarna.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["hemfixarna.css"]
+    };
+  }
+  static get assetsDirs() { return ["assets"]; }
+  static get properties() {
+    return {
+      "id": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "id",
+        "reflect": false
+      },
+      "slug": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "slug",
+        "reflect": false
+      },
+      "business": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Business",
+          "resolved": "Business",
+          "references": {
+            "Business": {
+              "location": "import",
+              "path": "../../types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "business",
+        "reflect": false
+      },
+      "widgetStyle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "WidgetStyle",
+          "resolved": "WidgetStyle.alternative | WidgetStyle.alternative_2 | WidgetStyle.alternative_3 | WidgetStyle.standard",
+          "references": {
+            "WidgetStyle": {
+              "location": "import",
+              "path": "../../types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "widget-style",
+        "reflect": false,
+        "defaultValue": "WidgetStyle.standard"
+      },
+      "buttonColor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "button-color",
+        "reflect": false
+      },
+      "buttonBg": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "button-bg",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "modal": {},
+      "showModal": {},
+      "product": {},
+      "proppedProduct": {},
+      "loginSourceError": {}
+    };
+  }
+  static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "id",
+        "methodName": "watchIdChange"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "click",
+        "method": "handleClick",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}
+//# sourceMappingURL=hemfixarna-component.js.map

package/dist/collection/components/hemfixarna-component/hemfixarna-component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hemfixarna-component.js","sourceRoot":"","sources":["../../../src/components/hemfixarna-component/hemfixarna-component.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Fragment, Listen, Prop, State, Watch, getAssetPath, h } from '@stencil/core';\nimport state from '../../store';\nimport { Business, Product, WidgetStyle } from '../../types';\nimport { getCustomer, getGreenDiscount, getOptions, getRot, getRut, loginCustomer } from '../../utils/api';\nimport { getProductPriceWithRotAndRut } from '../../utils/calc';\nimport { scrollToTop } from '../../utils/scroll';\n\n@Component({\n  tag: 'hemfixarna-component',\n  styleUrl: 'hemfixarna.scss',\n  shadow: true,\n  assetsDirs: ['assets'],\n})\nexport class HemfixarnaComponent {\n  @State() modal: boolean = false;\n  @State() showModal: boolean = false;\n  @State() product: Product | null = null;\n  @Prop() id?: string;\n  @Prop() slug?: string;\n  @Prop() business: Business;\n  @Prop() widgetStyle: WidgetStyle = WidgetStyle.standard;\n  @Prop() buttonColor?: string;\n  @Prop() buttonBg?: string;\n  @State() proppedProduct: Product | null = null;\n  @State() loginSourceError: null | string = null;\n\n  @Element() private el: HTMLElement;\n\n  loadCategoryOrProduct(id: string) {\n    this.proppedProduct = null;\n    if (id.startsWith('c-')) {\n      const categories = [...state.customer.categories, ...state.customer.categories.map(c => c.sub_categories ?? [])].flat();\n      const category = categories.find(c => c && c.id === id.replace('c-', ''));\n      if (category) {\n        state.selectedCustomerCategory = category;\n        state.step = 2;\n      }\n    } else {\n      const products = state.customer.categories\n        .map(c => (c.show_products ? c.products : c.sub_categories ? c.sub_categories.map(c => c.products) : []))\n        .flat()\n        .flat();\n      const product = products.find(p => p && p.fields.ID === parseInt(id));\n      if (product) {\n        state.selectedProduct = product.fields;\n        state.step = 4;\n        this.proppedProduct = product.fields;\n      }\n    }\n  }\n\n  @Watch('id')\n  async watchIdChange(id: string) {\n    if (id && state.customer) {\n      if (id === 'maleri') {\n        state.maleri = true;\n        state.step = 4;\n      } else {\n        this.loadCategoryOrProduct(id);\n      }\n    }\n  }\n\n  async componentWillLoad() {\n    state.business = this.business;\n    const cart = window.sessionStorage.getItem(`hemfixarna-${this.business}-cart`);\n    if (cart) {\n      state.cart = JSON.parse(cart);\n    }\n    const user = window.sessionStorage.getItem(`hemfixarna-${this.business}-user`);\n    if (user) {\n      state.user = JSON.parse(user);\n    }\n    const creditSafeUser = window.sessionStorage.getItem(`hemfixarna-${this.business}-creditSafeUser`);\n    if (creditSafeUser) {\n      state.creditSafeUser = JSON.parse(creditSafeUser);\n    }\n\n    const [options, rut, rot, greenDiscount] = await Promise.all([getOptions(), getRut(), getRot(), getGreenDiscount()]);\n\n    try {\n      const customer = await getCustomer(this.business);\n      if (customer?.code === 'not_found') {\n        console.warn('customer not found');\n      } else if (customer) {\n        state.customer = customer;\n        const id = this.id || this.slug;\n        if (id) {\n          if (id === 'maleri') {\n            state.maleri = true;\n            state.step = 4;\n          } else {\n            this.loadCategoryOrProduct(id);\n          }\n        }\n      }\n    } catch (error) {\n      console.warn('customer not found');\n    }\n\n    state.rotOptions = rot;\n    state.rutOptions = rut;\n    state.greenOptions = greenDiscount;\n    state.options = options;\n\n    if (localStorage.getItem('select_source')) {\n      state.selectSource = true;\n    }\n  }\n\n  triggerScrollTotop = () => {\n    const el = this.el.shadowRoot.querySelector('.hemfixarna_content');\n    scrollToTop(el);\n  };\n\n  // Open close modal && click outside event\n  openModal() {\n    if (this.id) {\n      if (this.id === 'maleri') {\n        state.maleri = true;\n        state.step = 4;\n      } else {\n        state.maleri = false;\n        this.loadCategoryOrProduct(this.id);\n      }\n    }\n    this.modal = true;\n    setTimeout(() => {\n      this.showModal = true;\n    }, 50);\n  }\n  closeModal() {\n    this.showModal = false;\n    setTimeout(() => {\n      this.modal = false;\n    }, 200);\n  }\n  @Listen('click')\n  handleClick(e: Event) {\n    if ((e?.composedPath()[0] as HTMLElement).classList.contains('hemfixarna_backdrop')) {\n      this.closeModal();\n    }\n    const infomodal = this.el.shadowRoot.querySelector('.hemfixarna_infomodal');\n    if (infomodal) {\n      const isClickInside = infomodal.contains(e.composedPath()[0] as HTMLInputElement);\n      if (!isClickInside) {\n        state.modal = null;\n      }\n    }\n  }\n\n  async handleLogin() {\n    this.loginSourceError = null;\n    const passwordInput = this.el.shadowRoot.querySelector('input[type=\"password\"]');\n    const password = (passwordInput as HTMLInputElement).value;\n\n    try {\n      const status = await loginCustomer({ id: state.customer.ID, password: password });\n      if (status === 200) {\n        state.showSourcePasswordPrompt = false;\n        state.selectSource = true;\n      } else {\n        this.loginSourceError = 'Fel lösenord';\n      }\n    } catch (error) {\n      console.log(error);\n      this.loginSourceError = 'Fel lösenord';\n    }\n  }\n\n  getCartLength() {\n    return state.cart.reduce((acc, curr) => acc + curr.amount, 0);\n  }\n\n  render() {\n    const logo = getAssetPath(`./assets/hemfixarna.svg`);\n    const pensel = getAssetPath(`./assets/pensel.svg`);\n    const monteringLogo = getAssetPath(`./assets/montering.svg`);\n\n    return (\n      <div class={`hemfixarna hemfixarna-${this.business}`}>\n        <div class={`hemfixarna_box hemfixarna_box--${this.widgetStyle}`}>\n          {[WidgetStyle.alternative_2, WidgetStyle.alternative_3].includes(this.widgetStyle) ? (\n            <img src={this.id === 'maleri' ? pensel : monteringLogo} alt=\"montering logo\" width={32} height={32} />\n          ) : null}\n          <div>\n            <div>\n              <p\n                onClick={() => this.openModal()}\n                class={`pointer ${[WidgetStyle.alternative_2, WidgetStyle.alternative_3].includes(this.widgetStyle) && state.selectedProduct ? 'underline' : ''}`}\n              >\n                {this.id === 'maleri' ? (\n                  <span>Beräkna fast pris på måleri & tapetsering här</span>\n                ) : (\n                  <Fragment>\n                    {!state.selectedCustomerCategory && !this.product && !this.proppedProduct ? (\n                      <Fragment>\n                        {state.customer?.widget_title ? (\n                          <span>{state.customer.widget_title}</span>\n                        ) : (\n                          <span>\n                            Montering/Installation - <strong class=\"underline\">se priser här</strong>\n                          </span>\n                        )}\n                      </Fragment>\n                    ) : (\n                      <Fragment>\n                        {this.product?.title || this.proppedProduct?.title || state.selectedCustomerCategory?.widget_title || (\n                          <span>\n                            Montering\n                            <wbr />\n                            /Installation {state.selectedCustomerCategory?.name ?? 'på plats'} - <strong class=\"underline\">se priser här</strong>\n                          </span>\n                        )}\n                        {this.proppedProduct && !this.product?.invoice && !this.proppedProduct?.invoice ? (\n                          <span>\n                            {' från'} <strong>{getProductPriceWithRotAndRut(this.proppedProduct || this.product)}kr</strong>\n                          </span>\n                        ) : null}\n                      </Fragment>\n                    )}\n                  </Fragment>\n                )}\n              </p>\n            </div>\n            {this.widgetStyle === WidgetStyle.standard ? <img src={logo} width={104} /> : null}\n            {this.widgetStyle === WidgetStyle.alternative ? (\n              <span class=\"p-s\">\n                Utförs av <strong>Hemfixarna</strong>\n              </span>\n            ) : null}\n          </div>\n          {[WidgetStyle.standard, WidgetStyle.alternative].includes(this.widgetStyle) ? (\n            <button\n              onClick={() => this.openModal()}\n              class=\"hemfixarna_btn\"\n              style={{\n                color: this.buttonColor?.startsWith('#') || !this.buttonColor?.length ? this.buttonColor : `#${this.buttonColor}`,\n                backgroundColor: this.buttonBg?.startsWith('#') || !this.buttonBg?.length ? this.buttonBg : `#${this.buttonBg}`,\n              }}\n            >\n              Beställ här\n              {this.getCartLength() > 0 && <span>{this.getCartLength()}</span>}\n            </button>\n          ) : null}\n          {WidgetStyle.alternative_2 === this.widgetStyle ? (\n            <div class=\"hemfixarna_altbtn\">\n              <strong class=\"p-s\">Utförs av</strong>\n              <img src={logo} alt=\"hemfixarna logo\" width={98} />\n            </div>\n          ) : null}\n        </div>\n        {this.modal && (\n          <div>\n            <div class={`hemfixarna_modal ${this.showModal ? 'hemfixarna_modal--open' : ''}`}>\n              {state.modal && (\n                <div class=\"hemfixarna_infomodal\">\n                  {state.modal.title && <h2>{state.modal.title}</h2>}\n                  <p innerHTML={state.modal.text}></p>\n                  <div>\n                    <button onClick={() => (state.modal = null)}>Stäng</button>\n                  </div>\n                </div>\n              )}\n              {state.showSourcePasswordPrompt ? (\n                <div class=\"hemfixarna_source--pw hemfixarna_infomodal\">\n                  <form\n                    onSubmit={e => {\n                      e.preventDefault();\n                      this.handleLogin();\n                    }}\n                  >\n                    <input type=\"password\" placeholder=\"Lösenord\" />\n                    <input type=\"submit\" value=\"Logga in\" />\n                    {this.loginSourceError && <span>Fel lösenord</span>}\n                  </form>\n                </div>\n              ) : null}\n              {state.customer && <hemfixarna-breadcrumbs closeModal={() => this.closeModal()} />}\n              <div class={`hemfixarna_content hemfixarna_content--${state.step} ${state.step === 4 && state.maleri ? 'hemfixarna_content--painting' : ''}`}>\n                {state.step < 4 && <hemfixarna-start />}\n                {/* // IF SELECTED PRODUCT (step 4) */}\n                {state.step === 4 && <hemfixarna-product />}\n                {/* // IF CHECKOUT (step 5) */}\n                {state.step === 5 && <hemfixarna-cart />}\n                {/* // IF ORDER CONFIRM (step 6) */}\n                {state.step === 6 && <hemfixarna-order />}\n              </div>\n            </div>\n            <div class={`hemfixarna_backdrop ${this.showModal ? 'hemfixarna_backdrop--open' : ''}`}></div>\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"]}