{"version":3,"sources":["webpack://@verndale/toolkit/./src/js/components/cart-modal.js"],"names":[],"mappings":"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","file":"scripts/1766.2c418f3bf1da36f03c53.js","sourcesContent":["// @ts-check\nimport { Component } from '@verndale/core';\nimport { createFocusTrap } from 'focus-trap';\nimport { KEYCODE } from '../utils';\n\nexport const OPEN_CART_EVENT = 'OPEN_CART';\n\nclass CartModal extends Component {\n  setupDefaults() {\n    this.dom = {\n      $cartModal: this.el,\n      $modalContent: this.el.querySelector('.cart-modal__content'),\n      $openModalButton: document.querySelector('.site-selector__cart'),\n      $openModalButtonCount: document.querySelector(\n        '.site-selector__cart span'\n      ),\n      $closeModalButton: this.el.querySelector('.cart-modal__close-button'),\n      $checkoutButton: this.el.querySelector('.cart-modal__checkout-button'),\n      $subtotal: this.el.querySelector('.cart-modal__item-subtotal')\n    };\n\n    this.endpoint = this.el.dataset.endpoint;\n    this.cartModalTrap = createFocusTrap(this.el, {\n      escapeDeactivates: true,\n      clickOutsideDeactivates: true\n    });\n\n    this.fetchCartItems();\n  }\n\n  addListeners() {\n    this.el.addEventListener('keydown', (e) => this.handleCartKeydown(e));\n    this.el.addEventListener('focusout', this.handleFocusOut.bind(this));\n    this.dom.$openModalButton.addEventListener(\n      'click',\n      this.handleTrigger.bind(this)\n    );\n    this.dom.$closeModalButton.addEventListener(\n      'click',\n      this.closeModal.bind(this)\n    );\n    window.addEventListener(OPEN_CART_EVENT, () => this.handleCartUpdate());\n  }\n\n  handleCartUpdate() {\n    this.fetchCartItems();\n    this.openModal();\n  }\n\n  handleTrigger(e) {\n    const isExpanded = e.currentTarget.getAttribute('aria-expanded') === 'true';\n\n    if (isExpanded) this.closeModal(e);\n    else this.openModal(e);\n  }\n\n  cleanItemsData(items) {\n    return items.map((item, index) => {\n      const cleanedItem = {\n        index,\n        item_id: item.CartItemId,\n        item_name: item.Title,\n        item_brand: item.Brand,\n        price: Number(item.Price),\n        quantity: Number(item.Quantity),\n        affiliation: 'EatRightStore',\n        ...(item.Categories || []).reduce((acc, category, i) => {\n          acc[`item_category${i + 1}`] = category.Heading;\n          return acc;\n        }, {})\n      };\n\n      // Remove keys that are undefined or empty\n      Object.keys(cleanedItem).forEach(\n        (key) =>\n          (cleanedItem[key] === undefined || cleanedItem[key] === '') &&\n          delete cleanedItem[key]\n      );\n\n      return cleanedItem;\n    });\n  }\n\n  openModal(e) {\n    e?.preventDefault();\n    this.dom.$openModalButton.setAttribute('aria-expanded', 'true');\n    this.cartModalTrap?.activate?.();\n  }\n\n  closeModal(e) {\n    e?.preventDefault();\n    this.dom.$openModalButton.setAttribute('aria-expanded', 'false');\n    this.cartModalTrap?.deactivate?.();\n  }\n\n  handleFocusOut(e) {\n    if (\n      !e.currentTarget.contains(e.relatedTarget) &&\n      e.relatedTarget !== this.dom.$openModalButton\n    ) {\n      this.closeModal();\n    }\n  }\n\n  handleCartKeydown(e) {\n    if (e.keyCode === KEYCODE.ESCAPE) {\n      e.stopPropagation();\n      this.dom.$openModalButton.setAttribute('aria-expanded', 'false');\n    }\n  }\n\n  renderModalContent(data) {\n    this.cartData = data;\n\n    this.dom.$subtotal.innerHTML = `${data.ItemsCount} item(s) Subtotal <span>$${data.Total}</span>`;\n    const cartCounter = this.dom.$openModalButtonCount;\n    if (cartCounter instanceof HTMLElement) {\n      cartCounter.innerHTML = cartCounter.dataset.cartLabel.replace(\n        '{0}',\n        `${data.ItemsCount}`\n      );\n    }\n    this.dom.$modalContent.innerHTML = this.createItemCards(data.Items);\n  }\n\n  hasPromo(item) {\n    return item?.Promo?.PromoTitle || item?.Promo?.PromoSubtitle || item?.Promo?.PromoDetails;\n  }\n\n  renderPromoBanner(item) {\n    const promoTitle = item?.Promo?.PromoTitle;\n    const promoSubtitle = item?.Promo?.PromoSubtitle;\n    const promoDetailsLabel = item?.Promo?.PromoDetailsLabel;\n    const promoDetails = item?.Promo?.PromoDetails;\n    const hasPromo = this.hasPromo(item);\n\n    if (!hasPromo) return '';\n\n    return `\n      <div class=\"promotion-banner\">\n        <div class=\"promotion-banner__title\">\n          <svg viewBox=\"0 0 1024 1024\" aria-hidden=\"true\">\n            <use xlink:href=\"#dollar\"></use>\n          </svg>\n\n          <div class=\"promotion-banner__title-text\">\n            ${promoTitle ? `<strong>${promoTitle}</strong>` : ''}\n            ${promoSubtitle}\n          </div>\n        </div>\n\n        ${\n          promoDetails\n            ? `\n          <details>\n            <summary>${promoDetailsLabel}</summary>\n            <p>${promoDetails}</p>\n          </details>\n        `\n            : ''\n        }\n      </div>\n    `;\n  }\n\n  createItemCards(items) {\n    return `\n    ${items\n      .map(\n        (item) => `\n    <div class=\"cart-modal__item\">\n      ${this.renderPromoBanner(item)}\n      <div class=\"cart-modal__item-preview\">\n        <img src=\"${item.Thumbail}\" alt=\"${\n          item.Title\n        }\" width=\"200\" height=\"110\">\n        <div class=\"cart-modal__item-details\">\n          <h2 class=\"cart-modal__item-title\">\n            <a href=\"${item.ProductUrl}\">${item.Title}</a>\n          </h2>\n          <p class=\"cart-modal__item-type\">${item.ProductType}</p>\n          <p class=\"cart-modal__item-sku\">SKU#${item.SKU}</p>\n          <p class=\"cart-modal__item-price\">${item.Price}</p>\n        </div>\n      </div>\n      <table class=\"cart-modal__item-pricing\">\n        <thead>\n          <tr>\n            <th>QTY</th>\n            <th>Price</th>\n            <th>Total</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr>\n            <td>${item.Quantity}</td>\n            ${this.hasPromo(item) ? `<td><s>${item.Price}</s></td>` : `<td>${item.Price}</td>`}\n            <td>${item.TotalPrice}</td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n    `\n      )\n      .join('')}\n    `;\n  }\n\n  fetchCartItems() {\n    fetch(this.endpoint)\n      .then((response) => response.json())\n      .then(({ data }) => this.renderModalContent(data))\n      .catch(console.error);\n  }\n}\n\nexport default CartModal;\n"],"sourceRoot":""}