{"version":3,"file":"modal-upsell-section-xxxxxxxxxxxxxxxxxxxx.min.js","mappings":"yBAYA,MAAMA,oBAAoBC,YAChBC,mBAAqBC,KAAKC,cAAcC,KAAKF,MAE9C,iBAAAG,GACLH,KAAKI,uBACLJ,KAAKK,QACP,CAEO,oBAAAC,GACLC,oBAAoB,eAAgBP,KAAKD,oBAEzC,MAAMS,EAAeR,KAAKS,WAAWC,iBAAiB,iBACtD,IAAK,MAAMC,KAAeH,EACxBG,EAAYJ,oBAAoB,QAASK,EAE7C,CAEQ,oBAAAR,GACDJ,KAAKS,aACRT,KAAKa,aAAa,CAAEC,KAAM,OAAQC,gBAAgB,IAClDf,KAAKS,WAAWO,UAAY,8lGAEhC,CAEQ,MAAAX,GACNY,iBAAiB,eAAgBjB,KAAKD,oBAEtC,MAAMS,EAAeR,KAAKS,WAAWC,iBAAiB,iBACtD,IAAK,MAAMC,KAAeH,EACxBG,EAAYM,iBAAiB,QAASL,EAE1C,CAEQ,aAAAX,CAAciB,GAAuC,IAAAC,EAC3D,MAAMC,EAAmB,OAAfD,EAAGD,EAAMG,aAAM,EAAZF,EAAcC,KAC3B,IAAKA,EAEH,YADAE,QAAQC,KAAK,oDAKf,MAAMC,EAAQxB,KAAKU,iBAA8B,uBACjD,IAAK,MAAMe,KAAQD,EAAO,CACxB,MAAME,EAAYC,SAASF,EAAKG,QAAQF,UAAW,IAC7CG,EAAWT,EAAKI,MAAMM,KAAKL,GAAQA,EAAKM,aAAeL,GACzDG,EACFJ,EAAKO,UAAUC,IAAI,UAEnBR,EAAKO,UAAUE,OAAO,SAE1B,CAOA,MAAMC,EAAQnC,KAAKoC,cAAc,kBAC3BC,EAAgBF,EAAMG,aAAe,GAC3CH,EAAMG,YACJD,EAAcE,QAAQ,oBAAqBnB,EAAKoB,YAAc,KAAKC,QAAQ,IAI7EzC,KAAK0C,SAAS,CAAEC,IAAK,EAAGC,SAAU,UACpC,EAGF,SAAShC,EAAqBiC,GAC5B,MAAM3B,EAAQ,IAAI4B,MAAM,gCACxBC,cAAc7B,EAChB,CCjDA,SAAS8B,IACP,MAAMC,EAAQC,SAASd,cAA2B,iBAClD,IAAKa,EAEH,YADA3B,QAAQC,KAAK,mCAIf0B,EAAMjB,UAAUC,IAAI,UAGpB,MAAMkB,EAAkB,IAAIC,YAAoB,wBAAyB,CACvE/B,OAAQ,CAAEgC,QAASJ,KAErBF,cAAcI,GAGd,MAAMG,EAAqB,IAAIR,MAAM,6BACrCC,cAAcO,EAChB,CDuCKC,eAAeC,IAAI,iBACtBD,eAAeE,OAAO,eAAgB5D,aC/BxCoB,iBAAiB,8BApDjB,WACE,MAAMgC,EAAQC,SAASd,cAA2B,iBAClD,IAAKa,EAEH,YADA3B,QAAQC,KAAK,mCAOf,IADoB0B,EAAMb,cAAc,oCAGtC,YADAsB,SAASC,KAAO,GAAGC,QAAQC,OAAOC,gBAKpC,MAAMC,EAAiB,IAAIX,YAAoB,uBAAwB,CACrE/B,OAAQ,CAAEgC,QAASJ,KAErBF,cAAcgB,GAEdd,EAAMjB,UAAUE,OAAO,UACvBe,EAAMe,OACR,GA8BA/C,iBAAiB,+BAAgC+B,GACjD/B,iBAAiB,iBATjB,SAAyBC,GACTgC,SAASd,cAAc,mBACvBlB,EAAMG,OAAOgC,SACzBL,GAEJ","sources":["webpack://lange/./scripts/sections/modal-upsell/modal-upsell/index.ts","webpack://lange/./scripts/sections/modal-upsell/index.ts"],"sourcesContent":["import { CustomElement } from '@integrabeauty/custom-elements';\nimport html from './index.html';\nimport styles from './index.scss';\n\n/**\n * Custom element that represents the upsell modal component.\n *\n * It appears when user click Checkout CTA in the cart modal if it wasn't already shown. Renders\n * list of products that the user can add to their cart before checking out. Products are filtered\n * based on the current cart contents, so that products that are already in the cart are not shown\n * in the modal. Relies on the modal-manager library.\n */\nclass ModalUpsell extends HTMLElement implements CustomElement {\n  private onCartUpdatedBound = this.onCartUpdated.bind(this);\n\n  public connectedCallback() {\n    this.initializeShadowRoot();\n    this.render();\n  }\n\n  public disconnectedCallback() {\n    removeEventListener('cart-updated', this.onCartUpdatedBound);\n\n    const closeButtons = this.shadowRoot.querySelectorAll('.close, .back');\n    for (const closeButton of closeButtons) {\n      closeButton.removeEventListener('click', onCloseButtonClicked);\n    }\n  }\n\n  private initializeShadowRoot() {\n    if (!this.shadowRoot) {\n      this.attachShadow({ mode: 'open', delegatesFocus: true });\n      this.shadowRoot.innerHTML = `<style>${styles}</style>${html}`;\n    }\n  }\n\n  private render() {\n    addEventListener('cart-updated', this.onCartUpdatedBound);\n\n    const closeButtons = this.shadowRoot.querySelectorAll('.close, .back');\n    for (const closeButton of closeButtons) {\n      closeButton.addEventListener('click', onCloseButtonClicked);\n    }\n  }\n\n  private onCartUpdated(event: WindowEventMap['cart-updated']) {\n    const cart = event.detail?.cart;\n    if (!cart) {\n      console.warn('Received cart-updated event without cart details');\n      return;\n    }\n\n    // filter out li elements with products that are already in the cart\n    const items = this.querySelectorAll<HTMLElement>('li[data-product-id]');\n    for (const item of items) {\n      const productId = parseInt(item.dataset.productId, 10);\n      const isInCart = cart.items.some(item => item.product_id === productId);\n      if (isInCart) {\n        item.classList.add('hidden');\n      } else {\n        item.classList.remove('hidden');\n      }\n    }\n\n    // TODO review if we need to handle different currencies. We don't support it here and in all\n    // other places, e.g. the price update on the PDP and product cards.\n\n    // update Estimated Total, replaceing a number in the text content with the new total price.\n    // Expected text content for this element is something like \"$123.45\" or \"$123\".\n    const total = this.querySelector('[slot=\"total\"]');\n    const previousValue = total.textContent || '';\n    total.textContent =\n      previousValue.replace(/\\d+(?:\\.\\d{2})?/g, (cart.total_price / 100).toFixed(2));\n\n    // scroll to top after a product is added to the cart, so that the user can see the free\n    // shipping message\n    this.scrollTo({ top: 0, behavior: 'smooth' });\n  }\n}\n\nfunction onCloseButtonClicked(_event: Event) {\n  const event = new Event('upsell-modal-close-requested');\n  dispatchEvent(event);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'modal-upsell': ModalUpsell;\n  }\n}\n\nif (!customElements.get('modal-upsell')) {\n  customElements.define('modal-upsell', ModalUpsell);\n}\n","import './modal-upsell/index.js';\n\n/**\n * Handles the upsell modal window. The modal is opened when the user clicks on the checkout button\n * in the cart modal, but only if it wasn't displayed before. If the upsell modal was already\n * displayed, we want to proceed to checkout as normal. The modal can be closed by clicking on the\n * close button or the shroud. When the modal is closed, the cart modal is opened again.\n */\n\nfunction show() {\n  const modal = document.querySelector<HTMLElement>('#modal-upsell');\n  if (!modal) {\n    console.warn('#modal-upsell element not found');\n    return;\n  }\n\n  // check if the there are any product cards to show, if not, don't show the modal and go to\n  // checkout instead\n  const productItem = modal.querySelector('li[data-product-id]:not(.hidden)');\n  if (!productItem) {\n    location.href = `${Shopify.routes.root}checkout`;\n    return;\n  }\n\n  type Detail = WindowEventMap['modal-show-requested']['detail'];\n  const modalShowEvent = new CustomEvent<Detail>('modal-show-requested', {\n    detail: { element: modal }\n  });\n  dispatchEvent(modalShowEvent);\n\n  modal.classList.remove('hidden');\n  modal.focus();\n}\n\nfunction hide() {\n  const modal = document.querySelector<HTMLElement>('#modal-upsell');\n  if (!modal) {\n    console.warn('#modal-upsell element not found');\n    return;\n  }\n\n  modal.classList.add('hidden');\n\n  type Detail = WindowEventMap['modal-close-requested']['detail'];\n  const modalCloseEvent = new CustomEvent<Detail>('modal-close-requested', {\n    detail: { element: modal }\n  });\n  dispatchEvent(modalCloseEvent);\n\n  // when the modal is closed, the cart modal is opened again\n  const cartModalShowEvent = new Event('cart-modal-show-requested');\n  dispatchEvent(cartModalShowEvent);\n}\n\nfunction onShroudClicked(event: WindowEventMap['shroud-clicked']) {\n  const modal = document.querySelector('#modal-upsell');\n  if (modal === event.detail.element) {\n    hide();\n  }\n}\n\naddEventListener('upsell-modal-show-requested', show);\naddEventListener('upsell-modal-close-requested', hide);\naddEventListener('shroud-clicked', onShroudClicked);\n\ndeclare global {\n  interface WindowEventMap {\n    'upsell-modal-close-requested': Event;\n    'upsell-modal-show-requested': Event;\n  }\n}\n"],"names":["ModalUpsell","HTMLElement","onCartUpdatedBound","this","onCartUpdated","bind","connectedCallback","initializeShadowRoot","render","disconnectedCallback","removeEventListener","closeButtons","shadowRoot","querySelectorAll","closeButton","onCloseButtonClicked","attachShadow","mode","delegatesFocus","innerHTML","addEventListener","event","_event$detail","cart","detail","console","warn","items","item","productId","parseInt","dataset","isInCart","some","product_id","classList","add","remove","total","querySelector","previousValue","textContent","replace","total_price","toFixed","scrollTo","top","behavior","_event","Event","dispatchEvent","hide","modal","document","modalCloseEvent","CustomEvent","element","cartModalShowEvent","customElements","get","define","location","href","Shopify","routes","root","modalShowEvent","focus"],"sourceRoot":""}