Untitled

import Cookies from 'js-cookie';
import Popup from '../lib/popup';

class StoreLocations extends HTMLElement {
  async connectedCallback() {
    if (
      window.theme.designMode ||
      window.Shopify.theme.includes('Development (')
    )
      return;

    this.addEventListener('click', this.onPopupTriggerClick.bind(this));

    const locationCookie = Cookies.get(this.cookieName);

    if (locationCookie === undefined) {
      const location = await this.getLocation();

      if (location.handle !== window.theme.shopLocation) {
        this.showPopup();
      }

      return;
    }

    if (locationCookie !== window.theme.shopLocation) {
      this.showPopup();
    }
  }

  getLocation() {
    return fetch('/browsing_context_suggestions.json')
      .then((response) => response.json())
      .then(({ detected_values: values }) => {
        if (values.country === 'UK') {
          return 'GB';
        }

        return values.country;
      });
  }

  onPopupTriggerClick(e) {
    if (e.target.closest('[data-change-location]') === null) return;

    this.showPopup();
  }

  onCountryClick(e) {
    if (e.target.closest('[data-country]') === null) return;

    e.preventDefault();

    Cookies.set(
      this.cookieName,
      e.target.closest('[data-country]').dataset.country,
      { expires: 30, path: '' }
    );
  }

  showPopup() {
    this.popup = new Popup(
      this.querySelector('[data-popup-content]').innerHTML,
      '400px'
    );

    this.popup.el.addEventListener('click', this.onCountryClick.bind(this));
  }

  get cookieName() {
    return 'cambridgeSatchelLocation';
  }
}

customElements.define('store-locations', StoreLocations);