{"version":3,"file":"cart-cf4d77e5.js","sources":["../../../../../../src/scripts/modules/cartCounter.ts","../../../../../../src/scripts/modules/cart.ts"],"sourcesContent":["import { Component } from '@verndale/core';\n\nclass CartCounter extends Component {\n  setupDefaults() {\n    this.dom = {\n      cartList: document.querySelector<HTMLElement>('.cart__items'),\n      cartCounterMobile: document.querySelector<HTMLElement>('.mobile-header__cart-button-counter'),\n      cartCounterDesktop: document.querySelector<HTMLElement>('.desktop-header__cart-button-counter')\n    };\n  }\n\n  checkCartItems() {\n    const cartItems = (this.dom.cartList as HTMLElement).querySelectorAll('.cart__item');\n    if (cartItems.length > 0) {\n      (this.dom.cartCounterMobile as HTMLElement).innerHTML = cartItems.length.toString();\n      (this.dom.cartCounterMobile as HTMLElement).removeAttribute('hidden');\n      (this.dom.cartCounterDesktop as HTMLElement).innerHTML = cartItems.length.toString();\n      (this.dom.cartCounterDesktop as HTMLElement).removeAttribute('hidden');\n    } else {\n      (this.dom.cartCounterMobile as HTMLElement).setAttribute('hidden', \"true\");\n      (this.dom.cartCounterDesktop as HTMLElement).setAttribute('hidden', \"true\");\n    }\n  }\n}\n\nexport default CartCounter;\n","import { Component } from '@verndale/core';\nimport axios from 'axios';\nimport CartCounter from './cartCounter';\n\nexport type ProductProps = {\n  ImageUrl: string;\n  ImageDescription: string;\n  Size: string;\n  Title: string;\n  Url: string;\n  ColorValue: string;\n  ColorName: string;\n  Id: string;\n}\n\ndeclare global {\n  interface Window {\n    addProduct: (productId: string) => void;\n    getProducts: () => void;\n    removeProduct: (e: Event) => void;\n  }\n}\n\nclass Cart extends Component {\n  counter: CartCounter;\n  mq: MediaQueryList;\n\n  constructor(el: HTMLElement) {\n    super(el);\n    this.getProducts();\n\n    window.addProduct = this.addProduct.bind(this);\n    window.getProducts = this.getProducts.bind(this);\n    window.removeProduct = this.removeProduct.bind(this);\n    this.counter = new CartCounter(this.dom.counter as HTMLElement);\n    this.mq = window.matchMedia('(max-width: 1024px)');\n    this.resizeBasedOnSafari();\n  }\n\n  setupDefaults() {\n    this.dom = {\n      buttonsContainer: this.el.querySelector<HTMLElement>('.cart__buttons'),\n      mainContainer: this.el.querySelector<HTMLElement>('.cart__content'),\n      emptyCart: this.el.querySelector<HTMLElement>('.cart__content-empty'),\n      itemsList: this.el.querySelector<HTMLElement>('.cart__items'),\n      cartDescription: this.el.querySelector<HTMLElement>('.cart__description'),\n      counter: document.querySelector<HTMLElement>('body'),\n      cartContainerDesktop: document.querySelector<HTMLElement>(\n        '.cart__container'\n      ),\n      cartBtnDesktop: document.querySelector<HTMLElement>('.desktop-header__nav__utility-nav-item--cart'),\n      cartBtnMobile: document.querySelector<HTMLElement>('.mobile-header__cart-button button'),\n      cartContainerMobile: document.querySelector<HTMLElement>(\n        '.cart__container'\n      )\n    };\n  }\n\n  addListeners() {\n    if (this.mq) {\n      this.mq.addEventListener('change', this.resizeBasedOnSafari.bind(this));\n    }\n  }\n\n  cleanCart() {\n    (this.dom.itemsList as HTMLElement).innerHTML = '';\n  }\n\n  async addProduct(productId: string) {\n    if (this.el.dataset.addProductsEndpoint) {\n      try {\n        const { data } = await axios.post(this.el.dataset.addProductsEndpoint, { id: productId });\n        if (data && data.d && data.d.code) {\n          this.renderAlert(data.d.errorMessage);\n        } else {\n          this.counter.checkCartItems();\n          if (window.innerWidth > 1024) {\n            this.toggleCart(this.dom.cartBtnDesktop as HTMLElement, this.dom.cartContainerDesktop as HTMLElement);\n          } else {\n            this.toggleCart(this.dom.cartBtnMobile as HTMLElement, this.dom.cartContainerMobile as HTMLElement);\n          }\n        }\n      } catch (error) {\n        console.error(error);\n      } finally {\n        this.cleanCart();\n        this.getProducts();\n      }\n    }\n  }\n\n  toggleCart(button: HTMLElement, container: HTMLElement) {\n    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n    // @ts-ignore\n    window.scrollTo(0, 0, { behavior: 'smooth' });\n    button.classList.toggle('is-active');\n\n    if (container.hidden) {\n      container.removeAttribute('hidden');\n      document.body.style.overflow = 'hidden';\n    } else {\n      container.setAttribute('hidden', 'true');\n      document.body.style.overflow = 'auto';\n    }\n  }\n\n  renderAlert(message: string) {\n    const alert = `\n    <dialog class='cart-alert' open>\n      <div class='cart-alert__content'>\n        <div class='cart-alert__icon'>\n          <svg class='cart-alert__icon__svg'>\n            <use xlink:href='#cart-alert-icon' />\n          </svg>\n        </div>\n        <div class='cart-alert__message'>\n          <span class='cart-alert__message__text'>\n            ${message}\n          </span>\n        </div>\n        <button class='cart-alert__close-button'>\n          <svg class='cart-alert__icon-close'>\n            <use xlink:href='#remove-icon-cart' />\n          </svg>\n        </button>\n      </div>\n    </dialog>\n    `;\n    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n    // @ts-ignore\n    window.scrollTo(0, 0, { behavior: 'smooth' });\n    document.body.insertAdjacentHTML('beforeend', alert);\n    const alertCloseButton = document.querySelector('.cart-alert__close-button');\n    const alertOverlay = document.querySelector('.cart-alert__close-button');\n    (alertCloseButton as HTMLElement).addEventListener('click', this.removeAlert.bind(this));\n    (alertOverlay as HTMLElement).addEventListener('click', this.removeAlert.bind(this));\n  }\n\n  removeAlert() {\n    const alert = document.querySelector('.cart-alert');\n    if (alert) {\n      alert.remove();\n    }\n  }\n\n  async getProducts() {\n        console.log(this.el.dataset.getProductsEndpoint);\n    if (this.el.dataset.getProductsEndpoint) {\n      try {\n        const { data } = await axios.post(this.el.dataset.getProductsEndpoint, {});\n        if (data && data.d && data.d.Products && data.d.Products.length > 0) {\n          (this.dom.emptyCart as HTMLElement).setAttribute('hidden', 'true');\n          (this.dom.itemsList as HTMLElement).removeAttribute('hidden');\n          (this.dom.mainContainer as HTMLElement).removeAttribute('hidden');\n          (this.dom.cartDescription as HTMLElement).innerHTML = data.d.CartDescription;\n          this.cleanCart();\n          this.renderProducts(data.d.Products);\n          this.addRemoveProductListeners();\n          this.counter.checkCartItems();\n        } else {\n          (this.dom.mainContainer as HTMLElement).setAttribute('hidden', 'true');\n          (this.dom.itemsList as HTMLElement).setAttribute('hidden', 'true');\n          (this.dom.emptyCart as HTMLElement).removeAttribute('hidden');\n        }\n      } catch (error) {\n        console.error(error);\n      }\n    }\n  }\n\n  addRemoveProductListeners() {\n    const removeProductBtns = this.el.querySelectorAll('.cart__item__remove-button');\n    removeProductBtns.forEach(btn => {\n      btn.addEventListener('click', this.removeProduct.bind(this));\n    });\n  }\n\n  removeProduct(e: Event) {\n    const target = e.target as HTMLElement;\n    const cartItem = (target as HTMLElement).closest('.cart__item');\n    if(!cartItem) return;\n    const productId = (cartItem as HTMLElement).dataset.productId;\n    if(!productId) return;\n    this.setRemoveProduct(productId);\n    target.closest('.cart__item')?.remove();\n\n    const cartItems = this.el.querySelectorAll('.cart__item');\n    if (cartItems.length === 0) {\n      (this.dom.mainContainer as HTMLElement).setAttribute('hidden', 'true');\n      (this.dom.itemsList as HTMLElement).setAttribute('hidden', 'true');\n      (this.dom.emptyCart as HTMLElement).removeAttribute('hidden');\n    }\n  }\n\n  async setRemoveProduct(productId: string) {\n    if (this.el.dataset.removeProductsEndpoint) {\n      try {\n        const { data } = await axios.post(this.el.dataset.removeProductsEndpoint, { id: productId });\n        if (data) {\n          this.counter.checkCartItems();\n        }\n      } catch (error) {\n        console.error(error);\n      }\n    }\n  }\n\n  renderProducts(products: ProductProps[]) {\n    products.forEach(product => {\n      const item = this.createProductItem(product);\n      (this.dom.itemsList as HTMLElement).insertAdjacentHTML('beforeend', item);\n    });\n  }\n\n  createProductItem(product: ProductProps) {\n    return `\n    <li class='cart__item' data-product-id='${product.Id}'>\n      <div class='cart__item__image'>\n        <img\n          src='${product.ImageUrl}'\n          alt='${product.ImageDescription}'\n        />\n      </div>\n      <div class='cart__item__content'>\n        <a href='${product.Url}' class='cart__item__title'>\n        ${product.Title}\n        </a>\n        <div class='cart__item__description'>\n          <div class='cart-item-attribute'>\n            ${product.Size}\n          </div>\n          ${product.ColorName && product.ColorValue ? `<div class='cart-item-attribute'>\n            <span>Color:</span>\n            <span class='item-color item-color--${product.ColorValue}'></span> ${product.ColorName}\n          </div>` : ''}\n        </div>\n      </div>\n      <button class='cart__item__remove-button'>\n        <svg class='cart__menu-button__icon-open'>\n          <use xlink:href='#remove-icon-cart' />\n        </svg>\n      </button>\n    </li>\n    `;\n  }\n\n  resizeBasedOnSafari() {\n    if (this.mq.matches) {\n\n      const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);\n\n      if (isSafari) {\n        console.log('Safari detected');\n\n        (this.dom.buttonsContainer as HTMLElement).style.paddingBlockEnd = '10vh';\n      }\n    }\n  }\n}\n\nexport default Cart;\n"],"names":["CartCounter","Component","cartItems","Cart","el","__publicField","productId","data","axios","error","button","container","message","alert","alertCloseButton","alertOverlay","btn","e","target","cartItem","_a","products","product","item"],"mappings":"yPAEA,MAAMA,UAAoBC,CAAU,CAClC,eAAgB,CACd,KAAK,IAAM,CACT,SAAU,SAAS,cAA2B,cAAc,EAC5D,kBAAmB,SAAS,cAA2B,qCAAqC,EAC5F,mBAAoB,SAAS,cAA2B,sCAAsC,CAAA,CAElG,CAEA,gBAAiB,CACf,MAAMC,EAAa,KAAK,IAAI,SAAyB,iBAAiB,aAAa,EAC/EA,EAAU,OAAS,GACpB,KAAK,IAAI,kBAAkC,UAAYA,EAAU,OAAO,WACxE,KAAK,IAAI,kBAAkC,gBAAgB,QAAQ,EACnE,KAAK,IAAI,mBAAmC,UAAYA,EAAU,OAAO,WACzE,KAAK,IAAI,mBAAmC,gBAAgB,QAAQ,IAEpE,KAAK,IAAI,kBAAkC,aAAa,SAAU,MAAM,EACxE,KAAK,IAAI,mBAAmC,aAAa,SAAU,MAAM,EAE9E,CACF,CCAA,MAAMC,UAAaF,CAAU,CAI3B,YAAYG,EAAiB,CAC3B,MAAMA,CAAE,EAJVC,EAAA,gBACAA,EAAA,WAIE,KAAK,YAAY,EAEjB,OAAO,WAAa,KAAK,WAAW,KAAK,IAAI,EAC7C,OAAO,YAAc,KAAK,YAAY,KAAK,IAAI,EAC/C,OAAO,cAAgB,KAAK,cAAc,KAAK,IAAI,EACnD,KAAK,QAAU,IAAIL,EAAY,KAAK,IAAI,OAAsB,EACzD,KAAA,GAAK,OAAO,WAAW,qBAAqB,EACjD,KAAK,oBAAoB,CAC3B,CAEA,eAAgB,CACd,KAAK,IAAM,CACT,iBAAkB,KAAK,GAAG,cAA2B,gBAAgB,EACrE,cAAe,KAAK,GAAG,cAA2B,gBAAgB,EAClE,UAAW,KAAK,GAAG,cAA2B,sBAAsB,EACpE,UAAW,KAAK,GAAG,cAA2B,cAAc,EAC5D,gBAAiB,KAAK,GAAG,cAA2B,oBAAoB,EACxE,QAAS,SAAS,cAA2B,MAAM,EACnD,qBAAsB,SAAS,cAC7B,kBACF,EACA,eAAgB,SAAS,cAA2B,8CAA8C,EAClG,cAAe,SAAS,cAA2B,oCAAoC,EACvF,oBAAqB,SAAS,cAC5B,kBACF,CAAA,CAEJ,CAEA,cAAe,CACT,KAAK,IACP,KAAK,GAAG,iBAAiB,SAAU,KAAK,oBAAoB,KAAK,IAAI,CAAC,CAE1E,CAEA,WAAY,CACT,KAAK,IAAI,UAA0B,UAAY,EAClD,CAEA,MAAM,WAAWM,EAAmB,CAC9B,GAAA,KAAK,GAAG,QAAQ,oBACd,GAAA,CACF,KAAM,CAAE,KAAAC,CAAS,EAAA,MAAMC,EAAM,KAAK,KAAK,GAAG,QAAQ,oBAAqB,CAAE,GAAIF,CAAW,CAAA,EACpFC,GAAQA,EAAK,GAAKA,EAAK,EAAE,KACtB,KAAA,YAAYA,EAAK,EAAE,YAAY,GAEpC,KAAK,QAAQ,iBACT,OAAO,WAAa,KACtB,KAAK,WAAW,KAAK,IAAI,eAA+B,KAAK,IAAI,oBAAmC,EAEpG,KAAK,WAAW,KAAK,IAAI,cAA8B,KAAK,IAAI,mBAAkC,SAG/FE,EAAO,CACd,QAAQ,MAAMA,CAAK,CAAA,QACnB,CACA,KAAK,UAAU,EACf,KAAK,YAAY,CACnB,CAEJ,CAEA,WAAWC,EAAqBC,EAAwB,CAGtD,OAAO,SAAS,EAAG,EAAG,CAAE,SAAU,SAAU,EACrCD,EAAA,UAAU,OAAO,WAAW,EAE/BC,EAAU,QACZA,EAAU,gBAAgB,QAAQ,EACzB,SAAA,KAAK,MAAM,SAAW,WAErBA,EAAA,aAAa,SAAU,MAAM,EAC9B,SAAA,KAAK,MAAM,SAAW,OAEnC,CAEA,YAAYC,EAAiB,CAC3B,MAAMC,EAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAUJD,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAajB,OAAO,SAAS,EAAG,EAAG,CAAE,SAAU,SAAU,EACnC,SAAA,KAAK,mBAAmB,YAAaC,CAAK,EAC7C,MAAAC,EAAmB,SAAS,cAAc,2BAA2B,EACrEC,EAAe,SAAS,cAAc,2BAA2B,EACtED,EAAiC,iBAAiB,QAAS,KAAK,YAAY,KAAK,IAAI,CAAC,EACtFC,EAA6B,iBAAiB,QAAS,KAAK,YAAY,KAAK,IAAI,CAAC,CACrF,CAEA,aAAc,CACN,MAAAF,EAAQ,SAAS,cAAc,aAAa,EAC9CA,GACFA,EAAM,OAAO,CAEjB,CAEA,MAAM,aAAc,CAEd,GADA,QAAQ,IAAI,KAAK,GAAG,QAAQ,mBAAmB,EAC/C,KAAK,GAAG,QAAQ,oBACd,GAAA,CACI,KAAA,CAAE,KAAAN,CAAK,EAAI,MAAMC,EAAM,KAAK,KAAK,GAAG,QAAQ,oBAAqB,CAAA,CAAE,EACrED,GAAQA,EAAK,GAAKA,EAAK,EAAE,UAAYA,EAAK,EAAE,SAAS,OAAS,GAC/D,KAAK,IAAI,UAA0B,aAAa,SAAU,MAAM,EAChE,KAAK,IAAI,UAA0B,gBAAgB,QAAQ,EAC3D,KAAK,IAAI,cAA8B,gBAAgB,QAAQ,EAC/D,KAAK,IAAI,gBAAgC,UAAYA,EAAK,EAAE,gBAC7D,KAAK,UAAU,EACV,KAAA,eAAeA,EAAK,EAAE,QAAQ,EACnC,KAAK,0BAA0B,EAC/B,KAAK,QAAQ,mBAEZ,KAAK,IAAI,cAA8B,aAAa,SAAU,MAAM,EACpE,KAAK,IAAI,UAA0B,aAAa,SAAU,MAAM,EAChE,KAAK,IAAI,UAA0B,gBAAgB,QAAQ,SAEvDE,EAAO,CACd,QAAQ,MAAMA,CAAK,CACrB,CAEJ,CAEA,2BAA4B,CACA,KAAK,GAAG,iBAAiB,4BAA4B,EAC7D,QAAeO,GAAA,CAC/BA,EAAI,iBAAiB,QAAS,KAAK,cAAc,KAAK,IAAI,CAAC,CAAA,CAC5D,CACH,CAEA,cAAcC,EAAU,OACtB,MAAMC,EAASD,EAAE,OACXE,EAAYD,EAAuB,QAAQ,aAAa,EAC9D,GAAG,CAACC,EAAU,OACR,MAAAb,EAAaa,EAAyB,QAAQ,UACpD,GAAG,CAACb,EAAW,OACf,KAAK,iBAAiBA,CAAS,GACxBc,EAAAF,EAAA,QAAQ,aAAa,IAArB,MAAAE,EAAwB,SAEb,KAAK,GAAG,iBAAiB,aAAa,EAC1C,SAAW,IACtB,KAAK,IAAI,cAA8B,aAAa,SAAU,MAAM,EACpE,KAAK,IAAI,UAA0B,aAAa,SAAU,MAAM,EAChE,KAAK,IAAI,UAA0B,gBAAgB,QAAQ,EAEhE,CAEA,MAAM,iBAAiBd,EAAmB,CACpC,GAAA,KAAK,GAAG,QAAQ,uBACd,GAAA,CACF,KAAM,CAAE,KAAAC,CAAS,EAAA,MAAMC,EAAM,KAAK,KAAK,GAAG,QAAQ,uBAAwB,CAAE,GAAIF,CAAW,CAAA,EACvFC,GACF,KAAK,QAAQ,uBAERE,EAAO,CACd,QAAQ,MAAMA,CAAK,CACrB,CAEJ,CAEA,eAAeY,EAA0B,CACvCA,EAAS,QAAmBC,GAAA,CACpB,MAAAC,EAAO,KAAK,kBAAkBD,CAAO,EAC1C,KAAK,IAAI,UAA0B,mBAAmB,YAAaC,CAAI,CAAA,CACzE,CACH,CAEA,kBAAkBD,EAAuB,CAChC,MAAA;AAAA,8CACmCA,EAAQ,EAAE;AAAA;AAAA;AAAA,iBAGvCA,EAAQ,QAAQ;AAAA,iBAChBA,EAAQ,gBAAgB;AAAA;AAAA;AAAA;AAAA,mBAItBA,EAAQ,GAAG;AAAA,UACpBA,EAAQ,KAAK;AAAA;AAAA;AAAA;AAAA,cAITA,EAAQ,IAAI;AAAA;AAAA,YAEdA,EAAQ,WAAaA,EAAQ,WAAa;AAAA;AAAA,kDAEJA,EAAQ,UAAU,aAAaA,EAAQ,SAAS;AAAA,kBAC9E,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAUpB,CAEA,qBAAsB,CAChB,KAAK,GAAG,SAEO,iCAAiC,KAAK,UAAU,SAAS,IAGxE,QAAQ,IAAI,iBAAiB,EAE5B,KAAK,IAAI,iBAAiC,MAAM,gBAAkB,OAGzE,CACF"}