zz-shopify-components/assets/zz-edu-info-dialog.js

Reusable Shopify components for theme projects

if (!customElements.get('zz-edu-info-dialog')) {
  class ZZEduInfoDialog extends HTMLElement {
    constructor() {
      super();
      this.init();
    }
  
    init() {
      const closeBtn = this.querySelector('#close-modal-btn');
      closeBtn.addEventListener('click', () => {
        this.closeModal();
      });

      const submitBtn = this.querySelector('#zz-edu-info-submit-btn');
      submitBtn.addEventListener('click', () => {
        this.submit();
      });

      this.shopId = this.dataset.shop;
      this.verifySuccessTitle = this.dataset.verifySuccessTitle;
      this.verifySuccessMessage = this.dataset.verifySuccessMessage;
      this.verifyFailTitle = this.dataset.verifyFailTitle;
    }

    submit() {
      const input = this.querySelector('#zz-edu-info-input');
      if(!this.verifyInfo) {
        zzShowToast('An error occurred. Please try again later.');
        return
      }
      if(input.value) {
        this.querySelector('.zz-edu-info-submit-loading').classList.toggle('tw-hidden');
        httpRequest.post('/shopify/verify_edu_email_captcha', {
          shopId: this.shopId,
          recordId: this.verifyInfo.recordId,
          captcha: input.value,
          email: this.verifyInfo.email
        }, {
          baseUrl: this.verifyInfo.baseUrl
        }).then((res) => {
          console.log('verify_edu_email_captcha res -------- ', res);
          if(res.code == 200) {
            this.showModal({
              title: this.verifySuccessTitle,
              message: this.verifySuccessMessage,
              showInput: false
            });
          } else {
            zzShowToast(EduErrorCodeConf[res.code].en);
          }
        }).catch((err) => {
          zzShowToast(EduErrorCodeConf[500].en);
        }).finally(() => {
          this.querySelector('.zz-edu-info-submit-loading').classList.toggle('tw-hidden');
        });
      } else {
        zzShowToast('Please enter the verification code');
      }
    }
  
    showModal({title, message, showInput = false, verifyInfo }) {
      console.log('showModal ----- ', title, message, showInput)
      const modal = this.querySelector('#zz-edu-info-modal');
      const mask = this.querySelector('#zz-edu-info-modal-mask');
      const body = document.body;
      modal.style.display = 'block';
      mask.style.display = 'block';
      setTimeout(() => {
        modal.classList.add('show');
      }, 10);
      body.classList.add('modal-open');

      const inputElement = this.querySelector('.zz-edu-info-input-verify');
      if(showInput) {
        inputElement.classList.remove('tw-hidden');
        inputElement.querySelector('#zz-edu-info-input').value = '';
        this.verifyInfo = verifyInfo;
        
      } else {
        inputElement.classList.add('tw-hidden');
      }

      const titleElement = this.querySelector('.edu-info-modal-title');
      const messageElement = this.querySelector('.edu-info-modal-msg');

      if(title) { 
        titleElement.classList.remove('tw-hidden');
        titleElement.innerHTML = title;
      } else {
        titleElement.classList.add('tw-hidden');
      }
      if(message) {
        messageElement.classList.remove('tw-hidden');
        messageElement.innerHTML = message; 
      } else {
        messageElement.classList.add('tw-hidden');
      }



  
    }
    closeModal() {
      const modal = this.querySelector('#zz-edu-info-modal');
      const mask = this.querySelector('#zz-edu-info-modal-mask');
      const body = document.body;
      modal.classList.remove('show');
      body.classList.remove('modal-open');

      modal.style.display = 'none';
      mask.style.display = 'none';
 
      
    }
   
  
  
  }

  customElements.define('zz-edu-info-dialog', ZZEduInfoDialog);
}