float-blog/wp-content/themes/float/js/app.js

window.$ = require('jquery');
require('bootstrap')

$(function() {
  const FloatURL = 'https://www.float.sg';
  const SIGNUP_MODE = {
    signup: 'sign-up',
    subscribe: 'subscribe',
  }

  initGoogleAuth();

  $('.subcribe-button').on('click', function(e) {
    e.preventDefault();
    const form = $(this).siblings('form.subscribe-form');
    form.submit();
  });

  $('form.signup-form').on('submit', function(e) {
    e.preventDefault();
    const form = $(this);
    const formData = form.serializeArray().reduce((result, prop) => {
      result[prop.name] = prop.value;
      return result;
    }, {});
    const errors = [];
    if(!formData.name) {
      form.find('input[name="name"]').addClass('has-error').siblings('.name-error').text('This field is required');
      errors.push('name');
    } else {
      form.find('input[name="name"]').removeClass('has-error').siblings('.name-error').text('');
    }

    if(!formData.email) {
      form.find('input[name="email"]').addClass('has-error').siblings('.email-error').text('This field is required');
      errors.push('email');
    } else {
      form.find('input[name="email"]').removeClass('has-error').siblings('.email-error').text('');
    }

    if (errors.length) {
      return false;
    }

    formData.list_id = getListIdFromCountryCode(window.countryCode, SIGNUP_MODE.signup);
    formData.domain_url = getDomainByCountryCode(window.countryCode);
    onSignIn(formData).then((result) => {
      form.find('input[name="name"]').val('');
      form.find('input[name="email"]').val('');
    });
    return false;
  });

  // newsletter form
  $('form.subscribe-form').on('submit', function(e) {
    const $this = $(this);

    const form = $this;
    const formData = form.serializeArray().reduce((result, prop) => {
      result[prop.name] = prop.value;
      return result;
    }, {});
    const $msgBlock = $(form.find('.form-msg-block')[0] || $this.siblings('.form-msg-block')).length ? $(form.find('.form-msg-block')[0] || $this.siblings('.form-msg-block')) : null ;
    let errors = [];
    if (!formData.name) {
      errors.push('Name is required');
    }
    if (!formData.email) {
      errors.push('Email is required');
    }
    if (errors.length) {
      const errMsg = errors.map(err => `<p class="error text-danger">${err}</p>`).join(' ');
      $msgBlock && $msgBlock.html(errMsg);
      return false;
    }
    formData.list_id = getListIdFromCountryCode(window.countryCode, SIGNUP_MODE.subscribe);
    formData.domain_url = getDomainByCountryCode(window.countryCode);

    doSubscribeUser(formData, FloatURL + '/newsletter-subscribe')
      .then(res => {
        if(res.success){
          // clear the form
          $(form).find('input[type=text], input[type=email]').val('');
        }

        $msgBlock && $msgBlock.html(`<p class="success text-success">${res.message}</p>`);
      })
      .catch(err => {
        $msgBlock && $msgBlock.html('<p class="error text-danger">Something went wrong. Pleaes try again later.</p>');
      })
      .finally(() => {});
      return false;
  });

  $('button.sign-up-google-btn').on('click', function(e) {
    e.preventDefault();
    $('#signupModal').modal('hide');
    let auth2 = gapi.auth2.getAuthInstance();
    auth2.signIn().then(function(googleUser) {
      const profile = googleUser.getBasicProfile();
      const requestData = {
        first_name: profile.getGivenName(),
        last_name: profile.getFamilyName(),
        email: profile.getEmail(),
        list_id: getListIdFromCountryCode(window.countryCode, SIGNUP_MODE.signup),
        domain_url: getDomainByCountryCode(window.countryCode),
      };
      onSignIn(requestData);
      return false;
    }).catch(error => {
      // console.log('error: ', error);
    });
  });

  $("#successSignupModal, #signupModal").on('show.bs.modal', function(e) {
    $('body').css('overflow', 'hidden');
  });

  $("#successSignupModal, #signupModal").on('hide.bs.modal', function(e) {
    $('body').css('overflow', 'unset');
  });

  function onSignIn(requestData) {
    $('#signupModal').modal('hide');
    $('#successSignupModal').modal('show');
    return new Promise((resolve, reject) => doSubscribeUser(requestData, FloatURL + '/newsletter-subscribe')
      .then((res) => {
        const response = typeof(res) === 'string' ? JSON.parse(res) : res;
        if (response.errors) {
          // Handle errors
          const errMsgs = Object.keys(response.errors).reduce((result, key) => {
            const errMsg = response.errors[key];
            result.push(`<p class="error text-danger">${errMsg}</p>`);
            return result;
          }, []).join(' ');
        }
        return resolve(true);
      })
      .catch(err => {
        let message = "Server error, please refresh the page and try again";
        if (error && error.message) {
            message = error.message;
        }
        return reject(false);
      })
      .finally(() => {
        handleDissconnect();
        return reject(false);
      }));
  }

  function doSubscribeUser(userData, url) {
    return new Promise((resolve, reject) => {
      return $.ajax({
        url: url,
        type: 'POST',
        data: userData,
        dataType: 'json',
        success: function(res) {
          return resolve(res);
        },
        error: function(err) {
          return reject(err);
        }
      });
    });
  }

  function handleDissconnect() {
    if (!gapi || !gapi.auth2) {
        return;
    }

    gapi.auth2.getAuthInstance().disconnect().then(function () {
        //Do stuff here after the user has been signed out, you can still authenticate the token with Google on the server side
    });
  }

  function initGoogleAuth() {
    if (typeof(gapi) === 'undefined' || !gapi) {
      return;
    }

    gapi.load('auth2', function() {
      if (!ajax_object.google_client_id) {
        ajax_object.google_client_id = '343605975098-i4p86p4la6lpff0rmsq3mg36vi9do9rb.apps.googleusercontent.com';
      }
      gapi.auth2.init({
        client_id: ajax_object.google_client_id,
        // Scopes to request in addition to 'profile' and 'email'
        scope: 'profile email',
      });
    });
  }

  function getListIdFromCountryCode(countryCode, mode) {
    console.log('countryCode: ', countryCode);
    switch(countryCode.toUpperCase()) {
      case 'SG': {
        return contact_settings.sg_contact || 'f6ff7833-d6cf-425e-a426-395ac201b794';
      }
      case 'US': {
        return contact_settings.us_contact || 'a646ee53-dfec-4a6a-a0c3-102c6840df06';
      }
      default: {
        return contact_settings.default_list || 'a646ee53-dfec-4a6a-a0c3-102c6840df06';
      }
    }
  }

  function getDomainByCountryCode(countryCode) {
    switch(countryCode.toUpperCase()) {
      case 'SG': {
        return 'https://www.float.sg'
      }
      case 'US': {
        return 'https://wwww.myfloat.com';
      }
      default: {
        return 'https://www.myfloat.com';
      }
    }
  }
});