hemfixarna-web-components 0.3.1 → 0.9.2

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

@@ -0,0 +1,92 @@
+import { Fragment, getAssetPath, h } from '@stencil/core';
+import state from '../../store';
+import { hideField } from '../../utils/form';
+import { getPartPrice, getProductPrice, getStartFee, getTotalPrice } from '../../utils/calc';
+import { postOrder } from '../../utils/api';
+export class HemfixarnaCheckout {
+  constructor() {
+    this.handleChangeDate = (e) => {
+      this.dateError = null;
+      this.date = e.target.value;
+    };
+    this.handleChangeTerms = () => {
+      this.generalError = null;
+    };
+    this.sendOrder = async () => {
+      // Test order post (remove later)
+      const order = {
+        name: state.user.firstName + ' ' + state.user.lastName,
+        customer: state.business,
+        phone: state.user.phone,
+        social_security_number: state.user.ssn,
+        email: state.user.email,
+        address: `${state.user.street} | ${state.user.zip} | ${state.user.town}`,
+        earliest_visit_date: this.date,
+        order_items: JSON.stringify(state.cart.map(item => `${item.amount}st ${item.name} ${getProductPrice(item, item.price, item.amount)}kr ${item.parts.length ? `| ${item.parts.map(part => `${part.amount}st ${part.name} ${getPartPrice(part, item, part.amount)}kr`).join(' | ')} ` : ''} ${item.rot && state.rot ? '(med rot)' : state.rut && item.rut ? '(med rut)' : '(utan rut/rot)'}`)),
+        start_fee: `${getStartFee().rut > 0 ? `Rut: ${getStartFee().rut}kr` : 'Rut: 0'} ` + `${getStartFee().rot > 0 ? `Rot: ${getStartFee().rot}kr` : 'Rot: 0'}`,
+        total: getTotalPrice(),
+      };
+      try {
+        const { data: orderConfirm, status } = await postOrder(order);
+        if (orderConfirm && status && status === 200) {
+          state.step = 6;
+        }
+        else {
+          this.generalError = 'Något gick fel, försök igen senare';
+        }
+      }
+      catch (_) {
+        this.generalError = 'Något gick fel, försök igen senare';
+      }
+    };
+    this.handleSubmit = (e) => {
+      e.preventDefault();
+      this.generalError = null;
+      const validDate = this.date.length > 0;
+      if (!validDate) {
+        this.dateError = 'Ange ett giltigt datum';
+      }
+      const checkBoxes = Array.from(this.el.querySelectorAll('input[type="checkbox"]'));
+      const notValidTerms = checkBoxes.find(i => !i.checked);
+      if (notValidTerms) {
+        this.generalError = 'Du måste godkänna villkoren';
+      }
+      if (validDate && !notValidTerms) {
+        this.sendOrder();
+      }
+    };
+    this.render = () => {
+      const dateLogo = getAssetPath(`./assets/date.svg`);
+      const down = getAssetPath(`./assets/down.svg`);
+      if (state.checkoutEdit) {
+        return h("hemfixarna-address", null);
+      }
+      else if (state.checkoutStep === 1) {
+        return h("hemfixarna-getuser", null);
+      }
+      else if (state.checkoutStep === 2) {
+        return (h("div", { class: "mb-2" }, h("div", { class: "hemfixarna_addressinfo" }, h("div", null, h("p", null, hideField(state.user.firstName)), h("p", null, hideField(state.user.lastName)), h("p", null, state.user.email), h("p", null, state.user.phone)), h("div", null, h("p", null, hideField(state.user.street)), h("p", null, hideField(state.user.zip)), h("p", null, hideField(state.user.town))), h("button", { onClick: () => (state.checkoutEdit = true) }, "Beh\u00F6ver du \u00E4ndra adressen?")), h("form", { onSubmit: e => this.handleSubmit(e) }, h("div", null, h("img", { src: dateLogo, width: 24 }), h("input", { class: `${this.date.length ? 'input_active' : ''}`, min: new Date().toISOString().split('T')[0], onChange: e => this.handleChangeDate(e), type: "date", name: "date", value: this.date }), h("label", { htmlFor: "date" }, "Tidigaste datum f\u00F6r hembes\u00F6k"), h("img", { src: down, width: 24 })), this.dateError && h("span", null, this.dateError), h("label", { class: "hemfixarna_checkbox" }, h("input", { onChange: () => this.handleChangeTerms(), type: "checkbox" }), h("span", { innerHTML: state.options.terms })), state.cart
+          .filter(i => i.terms_checkout && i.terms_show_checkbox)
+          .map(item => (h(Fragment, null, h("label", { class: "hemfixarna_checkbox" }, h("input", { onChange: () => this.handleChangeTerms(), type: "checkbox" }), h("span", null, item.terms_checkout))))), this.generalError && h("span", null, this.generalError), h("input", { type: "submit", value: "Slutf\u00F6r Bokning" }))));
+      }
+    };
+    this.date = '';
+    this.dateError = null;
+    this.generalError = null;
+  }
+  componentWillLoad() {
+    if (Boolean(state.user && state.user.street)) {
+      state.checkoutStep = 2;
+    }
+  }
+  static get is() { return "hemfixarna-checkout"; }
+  static get states() {
+    return {
+      "date": {},
+      "dateError": {},
+      "generalError": {}
+    };
+  }
+  static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=hemfixarna-checkout.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hemfixarna-checkout.js","sourceRoot":"","sources":["../../../src/components/hemfixarna-checkout/hemfixarna-checkout.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Fragment, State, getAssetPath, h, Element } from '@stencil/core';\nimport state from '../../store';\nimport { hideField } from '../../utils/form';\nimport { getPartPrice, getProductPrice, getStartFee, getTotalPrice } from '../../utils/calc';\nimport { postOrder } from '../../utils/api';\nimport { Business } from '../../types';\n\n@Component({\n  tag: 'hemfixarna-checkout',\n  shadow: false,\n})\nexport class HemfixarnaCheckout {\n  @State() date: string = '';\n  @State() dateError: string | null = null;\n  @State() generalError: string | null = null;\n  @Element() private el: HTMLElement;\n\n  handleChangeDate = (e: Event) => {\n    this.dateError = null;\n    this.date = (e.target as HTMLInputElement).value;\n  };\n\n  handleChangeTerms = () => {\n    this.generalError = null;\n  };\n\n  sendOrder = async () => {\n    // Test order post (remove later)\n\n    const order = {\n      name: state.user.firstName + ' ' + state.user.lastName,\n      customer: state.business as Business,\n      phone: state.user.phone,\n      social_security_number: state.user.ssn,\n      email: state.user.email,\n      address: `${state.user.street} | ${state.user.zip} | ${state.user.town}`,\n      earliest_visit_date: this.date,\n      order_items: JSON.stringify(\n        state.cart.map(\n          item =>\n            `${item.amount}st ${item.name} ${getProductPrice(item, item.price, item.amount)}kr ${\n              item.parts.length ? `| ${item.parts.map(part => `${part.amount}st ${part.name} ${getPartPrice(part, item, part.amount)}kr`).join(' | ')} ` : ''\n            } ${item.rot && state.rot ? '(med rot)' : state.rut && item.rut ? '(med rut)' : '(utan rut/rot)'}`,\n        ),\n      ),\n      start_fee: `${getStartFee().rut > 0 ? `Rut: ${getStartFee().rut}kr` : 'Rut: 0'} ` + `${getStartFee().rot > 0 ? `Rot: ${getStartFee().rot}kr` : 'Rot: 0'}`,\n      total: getTotalPrice(),\n    };\n    try {\n      const { data: orderConfirm, status } = await postOrder(order);\n      if (orderConfirm && status && status === 200) {\n        state.step = 6;\n      } else {\n        this.generalError = 'Något gick fel, försök igen senare';\n      }\n    } catch (_) {\n      this.generalError = 'Något gick fel, försök igen senare';\n    }\n  };\n\n  handleSubmit = (e: Event) => {\n    e.preventDefault();\n    this.generalError = null;\n    const validDate = this.date.length > 0;\n    if (!validDate) {\n      this.dateError = 'Ange ett giltigt datum';\n    }\n    const checkBoxes = Array.from(this.el.querySelectorAll('input[type=\"checkbox\"]'));\n    const notValidTerms = checkBoxes.find(i => !(i as HTMLInputElement).checked);\n    if (notValidTerms) {\n      this.generalError = 'Du måste godkänna villkoren';\n    }\n    if (validDate && !notValidTerms) {\n      this.sendOrder();\n    }\n  };\n\n  componentWillLoad() {\n    if (Boolean(state.user && state.user.street)) {\n      state.checkoutStep = 2;\n    }\n  }\n\n  render = () => {\n    const dateLogo = getAssetPath(`./assets/date.svg`);\n    const down = getAssetPath(`./assets/down.svg`);\n\n    if (state.checkoutEdit) {\n      return <hemfixarna-address />;\n    } else if (state.checkoutStep === 1) {\n      return <hemfixarna-getuser />;\n    } else if (state.checkoutStep === 2) {\n      return (\n        <div class=\"mb-2\">\n          <div class=\"hemfixarna_addressinfo\">\n            <div>\n              <p>{hideField(state.user.firstName)}</p>\n              <p>{hideField(state.user.lastName)}</p>\n              <p>{state.user.email}</p>\n              <p>{state.user.phone}</p>\n            </div>\n            <div>\n              <p>{hideField(state.user.street)}</p>\n              <p>{hideField(state.user.zip)}</p>\n              <p>{hideField(state.user.town)}</p>\n            </div>\n            <button onClick={() => (state.checkoutEdit = true)}>Behöver du ändra adressen?</button>\n          </div>\n          <form onSubmit={e => this.handleSubmit(e)}>\n            <div>\n              <img src={dateLogo} width={24} />\n              <input\n                class={`${this.date.length ? 'input_active' : ''}`}\n                min={new Date().toISOString().split('T')[0]}\n                onChange={e => this.handleChangeDate(e)}\n                type=\"date\"\n                name=\"date\"\n                value={this.date}\n              />\n              <label htmlFor=\"date\">Tidigaste datum för hembesök</label>\n              <img src={down} width={24} />\n            </div>\n            {this.dateError && <span>{this.dateError}</span>}\n            <label class=\"hemfixarna_checkbox\">\n              <input onChange={() => this.handleChangeTerms()} type=\"checkbox\" />\n              <span innerHTML={state.options.terms} />\n            </label>\n            {state.cart\n              .filter(i => i.terms_checkout && i.terms_show_checkbox)\n              .map(item => (\n                <Fragment>\n                  <label class=\"hemfixarna_checkbox\">\n                    <input onChange={() => this.handleChangeTerms()} type=\"checkbox\" />\n                    <span>{item.terms_checkout}</span>\n                  </label>\n                </Fragment>\n              ))}\n            {this.generalError && <span>{this.generalError}</span>}\n            <input type=\"submit\" value=\"Slutför Bokning\" />\n          </form>\n        </div>\n      );\n    }\n  };\n}\n"]}

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

@@ -0,0 +1,221 @@
+import { getAssetPath, h } from '@stencil/core';
+import state from '../../store';
+import { getTaxonomy, getOptions } from '../../utils/api';
+import { getProductPriceWithRotAndRut } from '../../utils/calc';
+export class HemfixarnaComponent {
+  constructor() {
+    this.modal = false;
+    this.showModal = false;
+    this.tree = null;
+    this.product = null;
+    this.slug = undefined;
+    this.business = undefined;
+    this.topCategory = undefined;
+  }
+  async fetchNewTaxonomy(newValue) {
+    state.selectedCategory = null;
+    state.selectedProduct = null;
+    state.selectedService = null;
+    const res = await getTaxonomy(newValue);
+    if ((res === null || res === void 0 ? void 0 : res.code) === 'not_found' || (res === null || res === void 0 ? void 0 : res.code) === 'rest_no_route') {
+      console.log('taxonomy not found');
+    }
+    else if (res) {
+      this.setTaxonomy(res);
+      if ((res === null || res === void 0 ? void 0 : res.post_type) === 'ikea_product') {
+        this.product = res;
+      }
+    }
+  }
+  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 tree = await getTaxonomy(this.topCategory);
+    if ((tree === null || tree === void 0 ? void 0 : tree.code) === 'not_found') {
+      console.warn('tree not found');
+    }
+    else if (tree) {
+      this.tree = tree;
+    }
+    if (this.slug) {
+      const res = await getTaxonomy(this.slug);
+      if ((res === null || res === void 0 ? void 0 : res.code) === 'not_found') {
+        console.log('taxonomy not found');
+      }
+      else if (res) {
+        this.setTaxonomy(res);
+      }
+    }
+    const options = await getOptions();
+    state.options = options;
+  }
+  setTaxonomy(taxonomy) {
+    if (taxonomy) {
+      if ((taxonomy === null || taxonomy === void 0 ? void 0 : taxonomy.taxonomy) === 'service_cat') {
+        state.selectedCategory = taxonomy;
+        state.step = 2;
+      }
+      else if ((taxonomy === null || taxonomy === void 0 ? void 0 : taxonomy.post_type) === 'service') {
+        state.selectedService = taxonomy;
+        state.selectedCategory = this.tree.sub_cats.find(c => c.services.find(s => s.ID === taxonomy.ID));
+        state.step = 3;
+      }
+      else if ((taxonomy === null || taxonomy === void 0 ? void 0 : taxonomy.post_type) === 'ikea_product') {
+        state.selectedProduct = taxonomy;
+        state.selectedService = this.tree.sub_cats
+          .map(c => c.services)
+          .flat()
+          .find(s => s.products.find(p => p.ID === state.selectedProduct.ID));
+        state.selectedCategory = this.tree.sub_cats.find(c => c.services.find(s => s.ID === state.selectedService.ID));
+        state.step = 4;
+      }
+    }
+  }
+  // Open close modal && click outside event
+  openModal() {
+    this.modal = true;
+    setTimeout(() => {
+      this.showModal = true;
+    }, 50);
+  }
+  closeModal() {
+    this.showModal = false;
+    setTimeout(() => {
+      this.modal = false;
+    }, 200);
+  }
+  handleClick(e) {
+    const el = this.el.shadowRoot.querySelector('.hemfixarna_modal');
+    if (el) {
+      const isClickInside = el.contains(e.composedPath()[0]);
+      if (!isClickInside) {
+        this.closeModal();
+      }
+    }
+    const infomodal = this.el.shadowRoot.querySelector('.hemfixarna_infomodal');
+    if (infomodal) {
+      const isClickInside = infomodal.contains(e.composedPath()[0]);
+      if (!isClickInside) {
+        state.modal = null;
+      }
+    }
+  }
+  getCartLength() {
+    return state.cart.reduce((acc, curr) => acc + curr.amount, 0);
+  }
+  render() {
+    var _a, _b;
+    const logo = getAssetPath(`./assets/hemfixarna.svg`);
+    return (h("div", { class: "hemfixarna" }, h("div", { class: "hemfixarna_box" }, h("div", null, h("div", null, h("p", null, ((_a = this.product) === null || _a === void 0 ? void 0 : _a.post_title) || (h("span", null, "Montering/Installation p\u00E5 plats - ", h("strong", null, "se priser h\u00E4r"))), this.product && ((_b = this.slug) === null || _b === void 0 ? void 0 : _b.includes('product')) ? (h("span", null, ' från', " ", h("strong", null, getProductPriceWithRotAndRut(this.product), "kr"))) : null)), h("img", { src: logo, width: 104 })), h("button", { onClick: () => this.openModal(), class: "hemfixarna_btn" }, "Till montering", this.getCartLength() > 0 && h("span", null, this.getCartLength()))), this.modal && (h("div", null, h("div", { class: `hemfixarna_modal ${this.showModal ? 'hemfixarna_modal--open' : ''}` }, state.modal && (h("div", { class: "hemfixarna_infomodal" }, h("h2", null, state.modal.title), state.modal.text.map((t) => (h("p", null, t))), h("div", null, h("button", { onClick: () => (state.modal = null) }, "St\u00E4ng")))), this.tree && h("hemfixarna-breadcrumbs", { closeModal: () => this.closeModal(), tree: this.tree }), h("div", { class: `hemfixarna_content hemfixarna_content--${state.step}` }, state.step === 1 && this.tree && h("hemfixarna-start", { tree: this.tree }), state.step === 2 && state.selectedCategory && h("hemfixarna-category", null), state.step === 3 && state.selectedService && h("hemfixarna-service", null), state.step === 4 && state.selectedProduct && h("hemfixarna-product", null), state.step === 5 && h("hemfixarna-cart", { tree: this.tree }), state.step === 6 && h("hemfixarna-order", { tree: this.tree }))), 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 {
+      "slug": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "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
+      },
+      "topCategory": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "TopCategory",
+          "resolved": "TopCategory",
+          "references": {
+            "TopCategory": {
+              "location": "import",
+              "path": "../../types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "top-category",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "modal": {},
+      "showModal": {},
+      "tree": {},
+      "product": {}
+    };
+  }
+  static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "slug",
+        "methodName": "fetchNewTaxonomy"
+      }];
+  }
+  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, Prop, getAssetPath, h, State, Listen, Element, Watch } from '@stencil/core';\nimport { Business, Category, Product, Service, TopCategory } from '../../types';\nimport state from '../../store';\nimport { getTaxonomy, getOptions } from '../../utils/api';\nimport { getProductPriceWithRotAndRut } from '../../utils/calc';\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() tree: Category | null = null;\n  @State() product: Product | null = null;\n\n  @Element() private el: HTMLElement;\n\n  @Prop() slug: string;\n  @Prop() business: Business;\n  @Prop() topCategory: TopCategory;\n\n  @Watch('slug')\n  async fetchNewTaxonomy(newValue: string) {\n    state.selectedCategory = null;\n    state.selectedProduct = null;\n    state.selectedService = null;\n\n    const res = await getTaxonomy(newValue);\n    if (res?.code === 'not_found' || res?.code === 'rest_no_route') {\n      console.log('taxonomy not found');\n    } else if (res) {\n      this.setTaxonomy(res);\n      if ((res as Product)?.post_type === 'ikea_product') {\n        this.product = res as Product;\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 tree = await getTaxonomy(this.topCategory);\n    if (tree?.code === 'not_found') {\n      console.warn('tree not found');\n    } else if (tree) {\n      this.tree = tree;\n    }\n    if (this.slug) {\n      const res = await getTaxonomy(this.slug);\n      if (res?.code === 'not_found') {\n        console.log('taxonomy not found');\n      } else if (res) {\n        this.setTaxonomy(res);\n      }\n    }\n    const options = await getOptions();\n    state.options = options;\n  }\n\n  setTaxonomy(taxonomy: Category | Service | Product) {\n    if (taxonomy) {\n      if ((taxonomy as Category)?.taxonomy === 'service_cat') {\n        state.selectedCategory = taxonomy as Category;\n        state.step = 2;\n      } else if ((taxonomy as Service)?.post_type === 'service') {\n        state.selectedService = taxonomy as Service;\n        state.selectedCategory = this.tree.sub_cats.find(c => c.services.find(s => s.ID === (taxonomy as Service).ID));\n        state.step = 3;\n      } else if ((taxonomy as Product)?.post_type === 'ikea_product') {\n        state.selectedProduct = taxonomy as Product;\n        state.selectedService = this.tree.sub_cats\n          .map(c => c.services)\n          .flat()\n          .find(s => s.products.find(p => p.ID === state.selectedProduct.ID));\n        state.selectedCategory = this.tree.sub_cats.find(c => c.services.find(s => s.ID === state.selectedService.ID));\n        state.step = 4;\n      }\n    }\n  }\n\n  // Open close modal && click outside event\n  openModal() {\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    const el = this.el.shadowRoot.querySelector('.hemfixarna_modal');\n    if (el) {\n      const isClickInside = el.contains(e.composedPath()[0] as HTMLInputElement);\n      if (!isClickInside) {\n        this.closeModal();\n      }\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  getCartLength() {\n    return state.cart.reduce((acc, curr) => acc + curr.amount, 0);\n  }\n\n  render() {\n    const logo = getAssetPath(`./assets/hemfixarna.svg`);\n\n    return (\n      <div class=\"hemfixarna\">\n        <div class=\"hemfixarna_box\">\n          <div>\n            <div>\n              <p>\n                {this.product?.post_title || (\n                  <span>\n                    Montering/Installation på plats - <strong>se priser här</strong>\n                  </span>\n                )}\n                {this.product && this.slug?.includes('product') ? (\n                  <span>\n                    {' från'} <strong>{getProductPriceWithRotAndRut(this.product)}kr</strong>\n                  </span>\n                ) : null}\n              </p>\n            </div>\n            <img src={logo} width={104} />\n          </div>\n          <button onClick={() => this.openModal()} class=\"hemfixarna_btn\">\n            Till montering\n            {this.getCartLength() > 0 && <span>{this.getCartLength()}</span>}\n          </button>\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                  <h2>{state.modal.title}</h2>\n                  {state.modal.text.map((t: string) => (\n                    <p>{t}</p>\n                  ))}\n                  <div>\n                    <button onClick={() => (state.modal = null)}>Stäng</button>\n                  </div>\n                </div>\n              )}\n              {this.tree && <hemfixarna-breadcrumbs closeModal={() => this.closeModal()} tree={this.tree} />}\n              <div class={`hemfixarna_content hemfixarna_content--${state.step}`}>\n                {/* // IF AT TOP LEVEL (step 1) */}\n                {state.step === 1 && this.tree && <hemfixarna-start tree={this.tree} />}\n                {/* // IF SELECTED CATEGORY (step 2) */}\n                {state.step === 2 && state.selectedCategory && <hemfixarna-category />}\n                {/* // IF SELECTED SERVICE (step 3) */}\n                {state.step === 3 && state.selectedService && <hemfixarna-service />}\n                {/* // IF SELECTED PRODUCT (step 4) */}\n                {state.step === 4 && state.selectedProduct && <hemfixarna-product />}\n                {/* // IF CHECKOUT (step 5) */}\n                {state.step === 5 && <hemfixarna-cart tree={this.tree} />}\n                {/* // IF ORDER CONFIRM (step 6) */}\n                {state.step === 6 && <hemfixarna-order tree={this.tree} />}\n              </div>\n            </div>\n            <div class={`hemfixarna_backdrop ${this.showModal ? 'hemfixarna_backdrop--open' : ''}`}></div>\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"]}