Untitled

import { fetchSection, scrollTop } from '../utilities'

class ShopifyAccount extends HTMLElement {
  constructor() {
    super()

    window.shopifyAccount = this

    this.menu = this.querySelector('[data-account-menu]')
    this.content = this.querySelector('[data-account-content]')

    this.initialise()
  }

  initialise() {
    document.addEventListener('click', this.onLinkClick.bind(this))

    document.addEventListener('click', this.onRefreshClick.bind(this))

    window.addEventListener('popstate', (e) => {
      this.params = new URLSearchParams(e.target.location.search)

      this.loadPanel()
    })

    this.params = new URLSearchParams(window.location.search)

    if (!this.params.has('panel')) {
      this.params.append('panel', 'overview')

      window.history.replaceState({}, '', `${location.pathname}?${this.params}`)
    } else {
      /**
       * If the active panel contains a module, import it
       */
      if (this.querySelector('[data-module]')) {
        import(
          /* webpackChunkName: "[request]" */ `../modules/${
            this.querySelector('[data-module]').dataset.module
          }`
        )
      }

      /**
       * If the panel is view-order, load it in
       */
      if (
        this.params.has('panel') &&
        this.params.has('token') &&
        this.params.get('panel') === 'orders' &&
        this.params.get('action') === 'view'
      ) {
        this.loadPanel()
      }
    }
  }

  onLinkClick(e) {
    if (e.target.closest('a[href*="?panel"]') === null) return

    e.preventDefault()

    if (window.drawers.activeDrawer === 'account-menu') {
      window.drawers.activeDrawer = false
    }

    if (window.popup) {
      window.overlay.close()
      window.popup.close()
    }

    this.params = new URLSearchParams(e.target.closest('a').search)

    if (!this.params.has('panel')) return
    window.history.pushState(
      null,
      '',
      `${location.pathname}${Array.from(this.params).length > 0 ? '?' : ''}${
        this.params
      }`
    )

    this.updateMenu()

    this.loadPanel()
  }

  onRefreshClick(e) {
    if (e.target.closest('[data-refresh-panel]') === null) return

    if (window.popup) {
      window.overlay.close()
      window.popup.close()

      this.loadPanel()
    }
  }

  updateMenu() {
    this.menu.querySelectorAll('a[href*="panel="]').forEach((el) => {
      el.classList.remove('active')
    })

    this.menu
      .querySelector(`a[href*="${this.params.get('panel')}"]`)
      .classList.add('active')
  }

  loadPanel() {
    this.loading = true

    scrollTop()

    let url = `/account?section_id=account-panel&${this.params}`

    if (
      this.params.has('panel') &&
      this.params.has('token') &&
      this.params.get('panel') === 'orders' &&
      this.params.get('action') === 'view'
    ) {
      url = `/account/orders/${this.params.get(
        'token'
      )}?section_id=account-panel&panel=orders&action=view`
    }

    fetchSection(url).then((section) => {
      this.content.innerHTML = section.innerHTML

      /**
       * If the content contains a module, import it
       */
      if (this.content.querySelector('[data-module]')) {
        import(
          /* webpackChunkName: "[request]" */ `../modules/${
            this.content.querySelector('[data-module]').dataset.module
          }`
        )
      }

      if (this.params.get('panel') === 'wishlist') {
        window.shopifyWishlist.initWishlistPage()
      }

      this.loading = false
    })
  }

  get panel() {
    return this.params.get('panel')
  }

  set panel(val) {
    this.params.set('panel', val)
  }

  set loading(val) {
    this._loading = val

    this.classList.toggle('loading', val)
  }
}

if (!customElements.get('shopify-account')) {
  customElements.define('shopify-account', ShopifyAccount)
}