Pop-up de Newsletter

{% load_banners position: 'newsletter-popup' limit: 1 %}

{% for banner in loaded_banners %}
  {% assign successMessage = 'Obrigado!' %}
  {% assign b_description = banner.description | strip_html | strip %}

  {% if banner.description contains '<hr/>' %}
    {% assign successMessage = banner.description | split: '<hr/>' | last | strip_html | strip %}
    {% assign b_description = banner.description | split: '<hr/>' | first | strip_html | strip %}
  {% endif %}

  {% assign imageUrl = '' %}
  {% assign maxWidth = 550 %}

  {% if banner.file_url != blank %}
    {% assign imageUrl = banner.file_url | resize: '480x' %}
    {% assign maxWidth = 700 %}
  {% endif %}

  <script>
    window.popupNewsletterSettings = {
      script: "{{ 'newsletter-popup.v3.js' | component_path }}",
      styles: "{{ 'newsletter-popup.v3.css' | component_path }}",
      maxWidth: '{{ maxWidth }}',
      imageUrl: '{{ imageUrl }}',
      title: '{{ banner.subtitle }}',
      description: '{{ b_description }}',
      subdomain: '{{ current_shop.subdomain }}',
      success: '{{ successMessage }}'
    }
  </script>

  <div id="component-popup-newsletter-root"></div>
{% endfor %}

export const NewsletterComponent = {
  root: document.querySelector('#component-popup-newsletter-root'),
  settings: window.popupNewsletterSettings || false,
  loaded: false,

  setPopupNewsletter: function() {

    const { settings, root } = NewsletterComponent

    // Define propriedades do componente
    let maxWidth = settings.maxWidth;
    let imageUrl = settings.imageUrl;
    let title = settings.title;
    let description = settings.description;
    let subdomain = settings.subdomain;
    let successMessage = settings.success;

    // Inicia o componente
    const componentNewsletterPopup = new Vnda.Component.NewsletterPopup({
      maxWidth: maxWidth,
      maxHeight: 500,
      imageUrl: imageUrl,
      imagePosition: 'left',
      popupPosition: 'center',
      title: title,
      description: description,
      textBtnSubmit: 'Enviar',
      classBtnSubmit: 'button-newsletter',
      formKey: `${subdomain}-newsletter`,
      hasNameField: false,
      hasLastNameField: false,
      hasDateOfBirthField: false,
      hasPhoneField: false,
      successMessage: successMessage,
      delay: 500,
      frequency: '7',
      language: 'pt-BR',
    });

    // Renderiza o componente e marca como carregado
    componentNewsletterPopup.render(root);
    NewsletterComponent.loaded = true
  },

  loadPopupNewsletter: function() {
    if (!NewsletterComponent.loaded) {
      const { settings } = NewsletterComponent;
      addAsset(settings.script, NewsletterComponent.setPopupNewsletter)
      addAsset(settings.styles)
    }
  },

  init: function() {
    const { root, settings } = this;

    if (!root || !settings) return;

    const eventType = (window.innerWidth <= 1024) ? 'scroll' : 'mousemove'
    window.addEventListener(eventType, () => {
      NewsletterComponent.loadPopupNewsletter()
    }, { once: true })
  }