Pop-up de Newsletter

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

{% for banner in loaded_banners %}
  {% assign image_url = '' %}
  {% assign upper_title = '' %}
  {% assign title = 'Cadastre-se em nossa newsletter' %}
  {% assign description = '' %}
  {% assign secondary_description = '' %}
  {% assign success_title = 'Obrigado!' %}
  {% assign success_subtitle = '' %}
  {% assign success_description = '' %}
  {% assign coupon = '' %}

  {% if banner.description contains '</p>' %}
    {% assign configs = banner.description | split: '</p>' %}
    
    {% for config in configs %}
      {% assign value = config | strip_html | split: ':' %}
      {% if config contains 'titulo_superior' and value[1] %}
        {% assign upper_title = value[1] | strip %}
      {% elsif config contains 'form_titulo' and value[1] %}
        {% assign title = value[1] | strip %}
      {% elsif config contains 'form_descricao' and value[1] %}
        {% assign description = value[1] | strip %}
      {% elsif config contains 'form_secundaria_descricao' and value[1] %}
        {% assign secondary_description = value[1] | strip %}
      {% elsif config contains 'sucesso_titulo' and value[1] %}
        {% assign success_title = value[1] | strip %}
      {% elsif config contains 'sucesso_subtitulo' and value[1] %}
        {% assign success_subtitle = value[1] | strip %}
      {% elsif config contains 'sucesso_descricao' and value[1] %}
        {% assign success_description = value[1] | strip %}
      {% elsif config contains 'cupom' and value[1] %}
        {% assign coupon = value[1] | strip %}
      {% endif %}
    {% endfor %}
  {% endif %}

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

  <script>
    window.popupNewsletterSettings = {
      script: "{{ 'newsletter-popup.v6.js' | component_path }}",
      styles: "{{ 'newsletter-popup.v6.css' | component_path }}",
      subdomain: '{{ current_shop.subdomain }}',
      imageUrl: '{{ image_url }}',
      upperTitle: '{{ upper_title }}',
      title: '{{ title }}',
      description: '{{ description }}',
      secondaryDescription: '{{ secondary_description }}',
      successTitle: '{{ success_title }}',
      successSubtitle: '{{ success_subtitle }}',
      successDescription: '{{ success_description }}',
      coupon: '{{ coupon }}',
    }
  </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 subdomain = settings.subdomain;
    let imageUrl = settings.imageUrl;
    let upperTitle = settings.upperTitle;
    let title = settings.title;
    let description = settings.description;
    let secondaryDescription = settings.secondaryDescription;
    let successTitle = settings.successTitle;
    let successSubtitle = settings.successSubtitle;
    let successDescription = settings.successDescription;
    let coupon = settings.coupon;

    // Inicia o componente
    const componentNewsletterPopup = new Vnda.Component.NewsletterPopup({
      maxWidth: maxWidth,
      maxHeight: 500,
      imageUrl: imageUrl,
      imagePosition: 'left',
      popupPosition: 'center',
      upperTitle: upperTitle,
      title: title,
      description: description,
      secondaryDescription: secondaryDescription,
      successTitle: successTitle,
      successSubtitle: successSubtitle,
      successDescription: successDescription,
      coupon: coupon,
      textBtnSubmit: 'Enviar',
      classBtnSubmit: 'button-newsletter',
      formKey: `${subdomain}-newsletter`,
      hasNameField: false,
      hasLastNameField: false,
      hasDateOfBirthField: false,
      hasPhoneField: false,
      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 });
  },
};