How to prevent page refresh after submitting an email in Pipeline theme?

[colinashvin]

Hello,

I have a newsletter in a shopify website using Pipeline theme, and the newsletter functions properly with the exception that the form refreshes the page when submitting an email. Be that the submission is successful or no.

The appropriate message shows on the form after the page refreshes (success or error)

I am looking into stopping the form from refreshing the form 

class NewsletterCheckForResult {
    constructor(newsletter) {
      this.sessionStorage = window.sessionStorage;
      this.newsletter = newsletter;

      this.stopSubmit = true;
      this.isChallengePage = false;
      this.formID = null;

      this.checkForChallengePage();

      this.newsletterSubmit = (e) =>  this.newsletterSubmitEvent(e);

      if (!this.isChallengePage) {
        this.init();
      }
    }

    init() {
      this.newsletter.addEventListener('submit', this.newsletterSubmit);

      this.showMessage();
    }

    newsletterSubmitEvent(e) {
      if (this.stopSubmit) {
        e.preventDefault();

        this.removeStorage();
        this.writeStorage();
        this.stopSubmit = false;
        this.newsletter.submit();
      
      }
    }

    checkForChallengePage() {
      this.isChallengePage = window.location.pathname === '/challenge';
    }

    writeStorage() {
      if (this.sessionStorage !== undefined) {
        this.sessionStorage.setItem('newsletter_form_id', this.newsletter.id);
      }
    }

    readStorage() {
      this.formID = this.sessionStorage.getItem('newsletter_form_id');
    }

    removeStorage() {
      this.sessionStorage.removeItem('newsletter_form_id');
    }

    showMessage() {
      this.readStorage();

      if (this.newsletter.id === this.formID) {
        const newsletter = document.getElementById(this.formID);

        if (window.location.search.indexOf('?customer_posted=true') !== -1) {
          newsletter.classList.remove(classes$1.error);
          newsletter.classList.add(classes$1.success);
        } else if (window.location.search.indexOf('accepts_marketing') !== -1) {
          newsletter.classList.remove(classes$1.success);
          newsletter.classList.add(classes$1.error);
        }

        this.scrollToForm(newsletter);
      }
    }

    scrollToForm(newsletter) {
      const rect = newsletter.getBoundingClientRect();
      const isVisible =
        rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth);

      if (!isVisible) {
        setTimeout(() => {
          window.scroll({
            top: rect.top,
            left: 0,
            behavior: 'smooth',
          });
        }, 400);
      }
    }

    unload() {
      this.newsletter.removeEventListener('submit', this.newsletterSubmit);
    }
  }

  const newsletterCheckForResultSection = {
    onLoad() {
      sections$1[this.id] = [];
      const newsletters = this.container.querySelectorAll(selectors$1.newsletterForm);
      newsletters.forEach((form) => {
        sections$1[this.id].push(new NewsletterCheckForResult(form));
      });
    },
    onUnload() {
      sections$1[this.id].forEach((form) => {
        if (typeof form.unload === 'function') {
          form.unload();
        }
      });
    },
  };

The images above show the submitnewsletter function in theme.js

It is clear that the method (e.preventDefault();) is already in use and i understand that should stop the page from refreshing, However, the refresh happens and also the scroll down to form is not working properly. it does not scroll down after the page refreshes.

Any advice how can I stop the page from refreshing on submit?