tabbit

Tue Jan 26 2021
Copied to clipboard! Copy reply
<article class='email-collection-container'>
  <form class="email-collection-elements">
    <div class="text-content">
      <p>Sign up to stay in touch.</p>
      <p>Get Rosetta Stone news and offers.</p>
    </div>
    <div class="email-input">
      <input type="email" placeholder="Email address" />
      <div class="error-container">
        <!-- filled by JS -->
      </div>
    </div>
    <div class="button">
      <input type="submit" value="SIGN UP" />
    </div>
  </form>
</article>


<script>
  
  var $form = document.querySelector(".email-collection-elements")
    , $input = document.querySelector(".email-collection-elements input[type='email']")
    , $errorContainer = document.querySelector(".error-container")  
    , error = null
    ;
  
  
  
  $form.addEventListener("submit", handleFooterFormSubmit);  
  
  async function handleFooterFormSubmit (e) {
    e.preventDefault()    
    
    var email = $input.value.trim();
    
    if (! await briteVerify(email)) {
      error = "<div>Invalid e-mail.</div>";
    } else {
      error = null
    }
    
    if (! await submitEmailToEC(email)) {
      error = "<div>Something went wrong. Please try again</div>";
      console.log("Got email!")
    } else {
      error = null;
    }    

    if (!error) {      
      // $errorContainer.innerHTML = ""
      // $errorContainer.style.display = "none"

      // Since blog has jQuery, let's give it a nice fadeout.
      jQuery(".email-collection-container").fadeOut()
    } else {      
      $errorContainer.innerHTML = error
      $errorContainer.style.display = "flex"      
    }    
  }

  /* briteverify check */
  function briteVerify (email) {	   
    
    // JSONP function
    ;(function(){var e,n,r,o,t,l,u,d;r=function(e){return window.document.createElement(e)},o=window.encodeURIComponent,u=Math.random,e=function(e){var o,l,u,i,a,c,f;if(null==e&&(e={}),c={data:e.data||{},error:e.error||t,success:e.success||t,beforeSend:e.beforeSend||t,complete:e.complete||t,url:e.url||""},c.computedUrl=n(c),0===c.url.length)throw new Error("MissingUrl");return i=!1,c.beforeSend({},c)!==!1&&(u=e.callbackName||"callback",l=e.callbackFunc||"jsonp_"+d(15),o=c.data[u]=l,window[o]=function(e){return window[o]=null,c.success(e,c),c.complete(e,c)},f=r("script"),f.src=n(c),f.async=!0,f.onerror=function(e){return c.error({url:f.src,event:e}),c.complete({url:f.src,event:e},c)},f.onload=f.onreadystatechange=function(){var e,n;if(!(i||"loaded"!==(e=this.readyState)&&"complete"!==e))return i=!0,f?(f.onload=f.onreadystatechange=null,null!=(n=f.parentNode)&&n.removeChild(f),f=null):void 0},a=window.document.getElementsByTagName("head")[0]||window.document.documentElement,a.insertBefore(f,a.firstChild)),{abort:function(){return window[o]=function(){return window[o]=null},i=!0,(null!=f?f.parentNode:void 0)?(f.onload=f.onreadystatechange=null,f.parentNode.removeChild(f),f=null):void 0}}},t=function(){},n=function(e){var n;return n=e.url,n+=e.url.indexOf("?")<0?"?":"&",n+=l(e.data)},d=function(e){var n;for(n="";n.length<e;)n+=u().toString(36).slice(2,3);return n},l=function(e){var n,r,t;return n=function(){var n;n=[];for(r in e)t=e[r],n.push(o(r)+"="+o(t));return n}(),n.join("&")},("undefined"!=typeof define&&null!==define?define.amd:void 0)?define(function(){return e}):("undefined"!=typeof module&&null!==module?module.exports:void 0)?module.exports=e:this.JSONP=e}).call(window);
	
	  var data = { 
      username: 'vjohn',
      address: email
    };   

    var promise = new Promise(function(resolve, reject) {
      JSONP({
        url: 'https://bpi.briteverify.com/emails.json',
        data: data,
        complete: function(data) {          
          if (data.status == 'valid') {            
            resolve(1)
          } else {									
            resolve(0)
          }
        } 
      });
    });	  

    promise.then(function(v) {
      return v    
    })
    return promise
  }
  
  /* Submission to EC */
  function submitEmailToEC(email) {
    var gdpr_consent_given = window.gdpr && window.gdpr.email_consent && window.gdpr.email_consent != null;
    if (gdpr_consent_given == null) {
      //console.log('GDPR consent not given, email not captured');
      //return;
    }

    var data = {
      email: email,
      cis_name: "!!US_Blog",
      website:  "US_WEBSITE",
      demo_type: "Blog",
      form_type: "/Blog",
      form_url: window.location.pathname,
      consent_type: (window.gdpr && window.gdpr.email_consent) || "unknown",
      visit_country_code: (window.gdpr && window.gdpr.country_code) || "unknown",
      newsletter_type: "Middle_AllOther_Blog",
    };

    var baseURL = window.location.href.search(/(\.stg\.)|(local)/i) > -1 ? 'https://www.stg' : 'https://www';
    baseURL += '.rosettastone.com/?redirect2mobile=no&p_p_id=rosettaajaxsubmit_WAR_rosettaajaxsubmitportlet&p_p_lifecycle=2&';

    baseURL += Object.keys(data)
        .map((o) => `${o}=${data[o]}`)
        .join("&");
        
    var promise = new Promise(function(resolve, reject) {
      var request = new XMLHttpRequest();
      request.open('POST', baseURL, true);  
      request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
      request.onload = function () {
        if (request.status >= 200 && request.status < 400) {
          var response = JSON.parse(request.responseText);
          resolve(response)
        }
        else {
          // We reached our target server, but it returned an error  
          console.log('error');
          reject(false)
        }
      };
      request.send();
    })
    return promise
    
  }
</script>













<style>
  .email-collection-container {
  background-color: #0098db;
  color: #fff;
  padding: 15px;
  visibility: visible;
  transform: scaleY(1);
  transition: all 0.5s ease;
}

.email-collection-container.hidden {
  transform: scaleY(0);
  visibility: hidden;
}

.email-collection-container.display-none {
  display: none;
}

.email-collection-elements {
  max-width: 975px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
}

.text-content {
  font-family: helvetica;
  font-weight: 700;
}

.text-content p {
  margin-top: 5px;
  margin-bottom: 5px;
}

.text-content p:first-child {
  font-size: 24px;
}

.text-content p:last-child {
  font-family: effra, sans-serif;
  font-size: 16px;
  letter-spacing: .12px;
  line-height: 19px;
  font-weight: 400;
}

.email-input {
  width: 100%;
  max-width: 348px;
  padding: 0 5px;
}

.email-input input {
  box-sizing: border-box;
  height: 51px;
  width: 100%;
  padding-left: 16px;
  border: 1px solid #979797;
  border-radius: 8px;
  color: #262626;
  background-color: #fff;
}

.button input {
  background-color: #F0C433;
  color: #262626;
  display: block;
  font-size: 16px;
  letter-spacing: 4px;
  font-family: effra;
  text-align: center;
  border-radius: 8px;
  padding: 1em 2.5em;
  font-weight: bold;
  border: none;
  margin-bottom: 0;
}

.button input:hover {
  background-color: #d7b12c;
  cursor: pointer;
}

.button input.disabled {
  background-color: #d7b12c;
}

.button input.disabled:hover {
  cursor: default;
}

.error-container {
  max-width: 875px;
  display: flex;
  text-align: center;
  margin: 5px auto 0 auto;
  background: #f97a7a;
  padding: 5px;
  border: 2px solid #a22b2b;
  box-sizing: border-box;
  flex-direction: column;
  display: none;
}

@media (max-width: 1024px) {
  .email-input {
    max-width: 275px;
  }
}

/* Media query accomodates both standard and homeschool form text lengths */
@media (max-width: 815px) {
  .email-collection-elements {
    flex-direction: column;
    max-width: 330px;
  }

  .email-collection-elements > div {
    text-align: center;
    padding-bottom: 15px;
  }

  .email-collection-elements > div:last-child {
    padding-bottom: 0;
  }

  .email-input {
    padding: 0;
    max-width: none;
  }

  .button {
    width: 100%;
  }

  .button input {
    width: 100%;
  }

  .error-container {
    justify-content: center;    
    margin-top: 10px;
  }

  .error-container .error {
    width: 100%;
    text-align: center;
  }
}