tabbit

Sun Dec 08 2019
Copied to clipboard! Copy reply
<template>
  <form @submit.prevent='handleSubmit'>
    <div class="language-select" @click='onLanguageDropdownClick'>
      <div class="selected-language">
        <span 
          class='flag'
          :style="`background-image:url(/nuxt-assets/img/icons/flags/${$store.state.langcode}.svg`">
        </span>
        <span>{{ $store.getters['selectedLanguage'].name }}</span>
      </div>
      <ul v-if="isDropdownVisible">
        <li 
          v-for='language in $store.state.languages' 
          :data-code='language.code'
          :key='language.code'
          @click='onLanguageChange'
        >
          <span 
            class='flag'
            :style="`background-image:url(/nuxt-assets/img/icons/flags/${language.code}.svg`"></span>
          <span>{{ language.name }}</span>
        </li>
      </ul>
    </div>

    <input
      type="email"
      :placeholder="`${content.email_placeholder}`" 
      :value="$store.state.email" 
      @input='$store.commit("UPDATE_EMAIL", $event.target.value)'>

    <input
      type="password"
      :placeholder="`${content.password_placeholder}`" 
      :value='$store.state.password'
      @input='$store.commit("UPDATE_PASSWORD", $event.target.value)'>

    <input
      type="submit"
      :value="`${content.cta.text}`"
      :style="buttonStyle"
      @click.prevent='validateForm'>

    <!-- Show errors, if any. -->
    <div 
      class="error" 
      v-html=$store.state.XHRresults.freetrialSignup.message
      v-if='$store.state.XHRresults.freetrialSignup.message'>      
    </div>

    <div class="gdpr_target"></div>
  </form>
</template>


<script>
  import { validateEmail, validateFreetrialPassword } from '~/modules/validator.js'
  import briteVerify from '~/modules/brite-verify.js'
  import { freeTrialError, briteVerifyError } from '~/modules/config/errors.js'
  import getDevice from '~/modules/detect-device.js'
  import content from  '~/data/airtable/components/NoCardTrialForm/index.yaml'  
 
  export default {
    props: ['buttonBg', 'buttonColor'],
    
    data () {
      return {     
        content, 

        // Passed as props, if any (optional).
        buttonStyle: null ,

        // Makes dropdown languages visible or invisible
        isDropdownVisible: false
      }
    },

    
    beforeMount () {    
     
      // If props were passed, overwrite the CSS
      this.buttonStyle = {
        color: this.buttonColor,
        background: this.buttonBg
      }

      
    },
    
    methods: {

      /*************************************
       * ADDED FOR A/B TEST
       *************************************/
      onLanguageDropdownClick () {        
        this.isDropdownVisible = !this.isDropdownVisible
      },

      onLanguageChange (e) {
        // Update our store with the langcode in case other components need it
        let code = e.target.dataset.code || e.target.value
      
        // IE10 doesn't support dataset
        if (typeof code == 'undefined' || !code) {
          code = (e.target || e.srcElement).getAttribute('data-code')
        }        
        this.$store.commit('UPDATE_LANGCODE', code)
      },
      /*************************************
       * END A/B TEST
       *************************************/

      /*
       * Validate form.
       * Here we validate only - form submission is actually done
       * when a language is selected, after email and password
       * validation     
       */

      async validateForm () {      
        if (! validateEmail(this.$store.state.email)) {
          this.$store.commit('SET_XHR_RESULT', {
            type: 'freetrialSignup',
            message: briteVerifyError[this.$store.state.locale].join()
          })
          // WS-4333 Amplitude - Account Creation Error Occurred          
          amplitude.getInstance().logEvent('Account Creation Error Occurred', {
            'Trial Length': '3 Days',
            'Billing Cycle': 'N/A',
            'Learning Language' : 'N/A',
            'Error Type': 'Email Validation Failed',
            'Error Step': 'Email and Password Entered'
          });
          return
        }

        if (! validateFreetrialPassword(this.$store.state.password)) {
          // WS-4333 Amplitude - Account Creation Error Occurred          
          amplitude.getInstance().logEvent('Account Creation Error Occurred', {
            'Trial Length': '3 Days',
            'Billing Cycle': 'N/A',
            'Learning Language' : 'N/A',
            'Error Type': 'Password Validation Failed',
            'Error Step': 'Email and Password Entered'
          });
          this.$store.commit('SET_XHR_RESULT', {
            type: 'freetrialSignup',
            message: freeTrialError[this.$store.state.locale].invalidPassword.join('')
          })
          return
        }

        // Amplitude - account creation started - WS-4333
        try {          
          amplitude.getInstance().logEvent('Account Creation Started',  {
            'Trial Length': '3 Days',
            'Billing Cycle': 'N/A',
            'Learning Language' : 'N/A'
          });
        } catch (e) {
          console.warn('Could not fire amplitude "Account Creation Started" event. Error below.')
          console.log(e)
        }
        
        // Failed briteverify check
        if (! await briteVerify(this.$store.state.email)) {    

          this.$store.commit('SET_XHR_RESULT', {
            type: 'freetrialSignup',
            message: briteVerifyError[this.$store.state.locale].join('')
          })

          // Emit signal for whatever components need it
          this.$bus.$emit('BRITEVERIFY_CHECK_PASSED', false)   

          // Amplitude - Account Creation Error Occurred          
          amplitude.getInstance().logEvent('Account Creation Error Occurred', {
            'Trial Length': '3 Days',
            'Billing Cycle': 'N/A',
            'Learning Language' : 'N/A',
            'Error Type': 'BriteVerify Validation Failed',
            'Error Step': 'Email and Password Entered'
          });

          return
        } else {
          console.log('BriteVerify: OK')
        }
        

        // If we're here, all validation (hopefully) passed

        // Clear Errors
        this.$store.commit('SET_XHR_RESULT', {
          type: 'freetrialSignup',
          message: ''
        })

        // WS-3651, WS-4333 - event 131 if briteverify passes
        try {
          // Adobe
          s.clearVars();
          s.addEvent('event131');
          s.tl(this,'o','event131');
          _satellite.track('nonBillableFreeTrialInitiatedPixels');

          // Amplitude - Account creation step completed          
          amplitude.getInstance().logEvent('Account Creation Step Completed', {
            'Trial Length': '3 Days',
            'Billing Cycle': 'N/A',
            'Learning Language' : 'N/A',
            'Step Name' : 'Email and Password Entered'
          });

        } catch (e) {
          console.warn('Could not fire event 131, or amplitude. Error below')
          console.log(e)
        }

        // Send email to EC
        this.sendEmailToEC()

        /********** EVENT HANDLING ***********/
        if ( ! 'abTest' in window) {
          this.$bus.$emit('BRITEVERIFY_CHECK_PASSED', true)
        }



        /*********************************************
         * A/B TEST code
         ********************************************/
        // WS-4333, WS-4206 - Event129 - when language is selected. 
        // Don't fire if user clicked 'see all languages'
        
        //TODO still needed?m ove to lang change then
        try {              
          amplitude.getInstance().logEvent('Learning Language Selected', {
            'Trial Length': '3 Days',
            'Billing Cycle': 'N/A',
            'Language' : this.$store.getters.selectedLanguage.name
          })
          
          s.clearVars();
          s.addEvent('event129');
          s.tl(this,'o','event129');
        } catch (e) {
          console.warn('Could not fire Event129 or Amplitude "Learning Language Selected". Error below.')
          console.log(e)
        }

        this.isLoading = true     

        let gdpr_consent_given = window.gdpr && window.gdpr.email_consent;
        
        // Data to send to provision for account creation
        let data = {
          email : this.$store.state.email,
          password: this.$store.state.password,
          trial_lang: this.$store.state.langcode,
          first_name : process.env.FREETRIAL_FIRST_NAME,
          language: process.env.FREETRIAL_LANGUAGE,
          site_code: process.env.FREETRIAL_SITE_CODE,
          guid: process.env.FREETRIAL_GUID,
          consent_type: gdpr_consent_given || null,
          country_code: gdpr.country_code || 'US',
          cid: this.$route.params.cid || ''
        }
        
        let req = null
        let error = null
        try {
          req = await this.$axios.$post(process.env.FREETRIAL_API + encodeURIComponent(JSON.stringify(data)))
        } catch (e) {
          error = 'Network error. Please try again.'
          this.isLoading = false
          return
        }
        
        // String comesback from server in a strange format      
        console.log('Attempting to parse: ')
        console.log(req)
        let response = JSON.parse(req.match(/\?\((.+)\)/)[1])                 
        let locale = this.$store.state.locale
        let errorCode = response.error

        console.log('Response from provision:')
        console.log(response)
        
        // Provision server sent back an error
        if (errorCode != 0) {
          try {
            error = freeTrialError[locale][errorCode].map(o => `<div>${o}</div>`).join('')
          } catch (e) {
            console.warn('Unknown error. Shown below:')
            console.log(e)
            error = "Unknown error. Please try again."
          }
        }
        

        if (error) {
          this.$store.commit('SET_XHR_RESULT', {
            type: 'freetrialSignup',
            message: error
          })

          
          this.isLoading = false

          // WS-4333 Capture error message
          try {
            s.clearVars();
            s.eVar52 = response.message || "N/A"
            s.tl();

            amplitude.getInstance().logEvent('Account Creation Error Occurred', {
              'Trial Length': '3 Days',
              'Billing Cycle': 'N/A',            
              'Learning Language': this.$store.getters.selectedLanguage.name,
              'Error Type': response.message,
              'Error Step': 'Learning Language Selected'
            });
          } catch (e) {
            console.warn('Could not set eVar52. Error below:')
            console.log(e)
          }
          return
        }

        /** If we're here, there were (hopefully) no errors **/


        try {                           
          // WS-4333 Amplitude Trial Started
          if (typeof response.license_guid != 'undefined') {
            amplitude.setUserId(response.license_guid)
          } 

          amplitude.getInstance().logEvent('Trial Started', {
            'Trial Length': '3 Days',
            'Billing Cycle': 'N/A',
            'Learning Language': this.$store.getters.selectedLanguage.name          
          });        
          
        }
        catch (e) {
          console.warn('Error firing Adobe Analytics or Amplitude. Error below')
          console.log(e)
        }

        try {
          // WS-3665 (eVar90), WS-4032 (eVar91)
          s.clearVars();
          s.eVar91 = code
          s.eVar90 = response.license_guid || 'N/A'
          s.tl(this);       

          // Adobe 130
          s.clearVars(); 
          s.addEvent('event130');
          s.tl(this); 
        } catch (e) {
          console.warn('Could not set evar91, evar90, or fire event 130. Error below:')
          console.log(e)
        }

              
        let redirectUrl = null
        
        // if Desktop - redirect to product
        // purchase=true lets product know to include DTM
        // https://jira.trstone.com/browse/TCOM-2024
        if (getDevice() == 'desktop') {
          // We can only log a user in if we have a token
          if (response.ls_token) {
            this.totaleUrl += `dtm_trial_type=nocc`
              + `&purchase=true`
              + `&target_language=${code.toUpperCase()}`
              + `&username=${this.$store.state.email}`
              + `&accepted_terms=true`
              + `&authToken=${response.ls_token}`
              + `&namespace=`          
          } else {
            // If we don't have a token, send them to login page with trial language
            this.totaleUrl = this.totaleUrl.replace('token_authentication', 'sign_in')
            this.totaleUrl += `&target_language=${code.toUpperCase()}`
          }

          redirectUrl = this.totaleUrl
        } else {
          // if mobile, redirect to app store
          redirectUrl =  '/lp/form-mobile-success'
        }              
      
        // Give a timeout to make sure pixels and tracking fire      
        console.log('redirecting to: '+ redirectUrl)
        window.setTimeout(function() {
          window.location.href = redirectUrl;
        },600);      
    








        
      },

      sendEmailToEC () {
        // More on EC here: https://jira.trstone.com/wiki/display/WDCMS/Liferay+CIS
        let formName = this.$store.state.locale == 'en' ? 'NOCC_TRIAL' : 'NOCC_TRIAL_ESPANOL'
        let data = {
          email : this.$store.state.email,
          cis_name : formName || '',
          website: 'US_WEBSITE',          
          demo_type : 'free_trial_signup',
          form_url : 'homepage',
          consent_type : ( window.gdpr && window.gdpr.email_consent ) || "unknown",
          visit_country_code : ( window.gdpr && window.gdpr.country_code ) || "unknown",
          newsletter_type : "homepage_trial",
          //cid : _satellite.getVar("mostrecentcampaign")
        }

        let url = (window.location.href.search(/(\.stg\.)|(local)/i)>-1 ? 'https://www.stg' :'https://www')
			  //+ '.rosettastone.com/?redirect2mobile=no&p_p_id=rosettaajaxsubmit_WAR_rosettaajaxsubmitportlet&p_p_lifecycle=2';
        + '.rosettastone.com/?redirect2mobile=no&p_p_id=rosettaajaxsubmit_WAR_rosettaajaxsubmitportlet&p_p_lifecycle=2&';
        
        //url += encodeURIComponent(JSON.stringify(data))
			  url += Object.keys(data).map(o => `${o}=${data[o]}` ).join('&')  

        this.$axios.post(url).then( res => {} )
        
      }
    }
  }
</script>

<style lang="stylus" scoped>
  form
    display flex
    flex-direction column
  .language-select
    background #fff
    text-align left
    box-sizing border-box
    margin-bottom 1.4em
    border-radius 6px
    font-weight 100
    border 1px solid #999
    position relative
    .selected-language
      padding 0 //5px 0 5px 20px
      padding 12px
      display flex
      align-items center
      font-size 95%
    ul
      position absolute
      background inherit
      width 100%
      left -1px
      top 39px
      max-height 256px
      border 1px solid #999
      border-top none
      overflow-y scroll
    ul::-webkit-scrollbar-track            
      border-radius 3px
    ul::-webkit-scrollbar
	    width 8px    
    ul::-webkit-scrollbar-thumb
	    border-radius 10px	    
	    background-color #555         
    li
      list-style none      
      padding 10px
      box-sizing border-box
      cursor pointer
      margin-right 2px
      background-repeat no-repeat
      display flex
      font-size 95%      
      &:hover
        background #eee
      & *
       pointer-events none
    span.flag
      height 14px
      width 22px
      display inline-block
      background-size 100% 100%
      margin-right 7px
   
      
      
  input
    padding 12px
    font-weight 100
    border 1px solid #999
    border-radius 6px
    margin-bottom 15px
    box-sizing border-box
    margin-bottom 1.4em
  input[type=submit]
    background #363534
    color #fff
    display block
    font-size 16px    
    letter-spacing 3px
    font-family effra
    text-align center
    border-radius 6px
    padding 1.3em 2em
    font-weight bold
    border none
    margin-bottom 0
  .error
    padding 0.8em
    font-weight 400
    margin-top 5px
    background #d89ba6 // #bf6b6b
    color #882727
    letter-spacing 1px
    text-align left
    line-height 22px
    border 1px dashed red
    font-weight 100
    & >>> .error-head
      font-weight bold
      color #fff
      margin-bottom 5px
      
    
</style>