Pop-up de Newsletter

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

{% for banner in loaded_banners %}
  {% assign success_message = 'Obrigado!' %}
  {% assign popup_description = banner.description %}
  {% assign popup_extra_description = '' %}

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

  {% assign description_content = popup_description | split: '</p>' %}
  {% assign popup_description = description_content[0] | strip_html | strip %}

  {% comment %} Descrição extra {% endcomment %}
  {% if description_content[1] and description_content[1] != blank %}
    {% assign popup_extra_description = description_content[1] | strip_html | strip %}
  {% endif %}

  {% assign image_url = '' %}
  {% if banner.file_url != blank %}
    {% assign image_url = banner.file_url | resize: '500x' %}
  {% endif %}

  <script>
    window.popupNewsletterSettings = {
      script: "{{ 'newsletter-popup.v5.js' | component_path }}",
      styles: "{{ 'newsletter-popup.v5.css' | component_path }}",
      imageUrl: '{{ image_url }}',
      title: '{{ banner.subtitle }}',
      description: '{{ popup_description }}',
      extraDescription: '{{ popup_extra_description }}',
      subdomain: '{{ current_shop.subdomain }}',
      success: '{{ success_message }}'
    }
  </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 extraDescription = settings.extraDescription;
    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,
      extraDescription: extraDescription,
      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',
      placeholders: {
        // firstName: 'Nome',
        // lastName: 'Sobrenome',
        // phone: 'Telefone',
        email: 'Digite seu e-mail',
      },
    });

    // 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 });
  },
};