tabbit

Fri Dec 28 2018
Copied to clipboard! Copy reply
<template>
  <div>

    <Nav />    
    
    <!-- Masthead -->
    <section class="masthead">   
      <h1><span>BUY {{ basicLangName.toUpperCase() }} </span> from Rosetta Stone <sup>&reg;</sup></h1> 
      <div class="heading-2">
        <div>6 YEARS IN A ROW &mdash; PC Magazine Editors' Choice Winner</div>  
        <div>BEST LANGUAGE LEARNING SOFTWARE</div>
      </div>     
    </section>

    <!-- Brief highlights -->
    <section class="brief">
      <div class="content">
        <div class="left">
          <ul>
            <li><strong>Trusted by millions</strong> worldwide for 25+ years, including educational institutions and corporate clients such as NASA and the US State Department.</li>
            <li>Improve your pronunciation and build confidence through our TruAccent <strong>speech-recognition software</strong>. <a class="masthead_learn_more js_meclabs_learn_more" data-modal="speak" href="#">Learn&nbsp;More</a></li>
            <li><strong>Fully immersive curriculum</strong>, sequenced to introduce new skills in a way that stimulates your brain's natural language learning ability. <a href="#">Learn&nbsp;More</a></li>
          </ul>
        </div>
        <div class="right">
          <img src="https://www.rosettastone.com/lp/globals/img/online-lockup-holiday.png" alt="Devices">
          <div class="ratings">* * * * * </div>
        </div>
      </div>
    </section>

    <!-- Features -->
    <div class="features-wrap">      
        <InteractiveFeatures />      
    </div>

    <!-- Highlights -->
    <section class="highlights">
      <div class="content">
        <Highlights />
      </div>
    </section>

    <!-- Products -->
    <section class="products-container">
      <div class="content">             
        <div class="products">
          <!-- Loop through our products | ProductBox Component -->
          <ProductBox  v-for="(product, key) in products"
            :msrp='product.msrp'
            :price='product.price'
            :level='product.lvl'
            :name='product.name'
            :cartlink='product.cart'
            :fullprice='showFullPrice'
            :threepay='threePay'
            :bonusmonths='bonusMonths && product.lvl.match(/13|27/)'
            :key=key 
          />
        </div>        
      </div>
    </section>


    <!-- How it works / demo -->
    <section class="how-it-works">
      <h2>HOW DOES IT WORK?</h2>
      <p>Find out everything you need to know about Rosetta Stone in 2 minutes.</p>
      <div class="cta-img"></div>
      <a href="" class="cta-btn" @click.prevent='openDemoDialog'>TAKE THE INTERACTIVE DEMO</a>
      <DemoLeadDialog v-if='isDemoDialogOpen'  />
    </section>
    <!--  -->

  </div>
</template>

<script>
import Nav from '~/components/Nav.vue'
import InteractiveFeatures from '~/components/InteractiveFeatures.vue'
import Highlights from '~/components/Highlights.vue'
import ProductBox from '~/components/ProductBox.vue'
import DemoLeadDialog from '~/components/DemoLeadDialog.vue'

// this.showOverlay = false
export default {

  /* Components this page uses. They are imported above */
  components: { 
    Nav,      
    InteractiveFeatures,
    Highlights,
    ProductBox,
    DemoLeadDialog
  },  

  

  /**
    * Sets <head> information for this page.
    * Metadata, scripts, css, title, etc, can
    * all be set and fetched here
    */
  
  head ()
  {     
    return {
      title: 'Rosetta Stone - Learn a New Language',
      meta: [
        { charset: 'utf-8' },
        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
        { hid: 'description', name: 'description', content: 'Rosetta Stone' }
      ],
      script: [
        { src: `https://www.rosettastone.com/lp/static/data/us/models/js/sitewide.js` }
      ]
    }
  },

  
  /**
    * We use this to populate the pages's `data` variables
    * on the server - `nuxt generate` will use this and pass
    * the needed variables via `payload` param.
    * But because this is also ran on the client before
    * components are mounted, we must provide dummy values
    * since we won't have a payload param when in dev mode.
    * We set these dummy values in the process.server else condition
    */

  async asyncData ({ params, route, payload })
  { 
  

    // Variables we will preset on server for client.
    // These are also set in dev mode, based on the URL.
    let code
    let langName
    let filter = [ '1', '8', '13', '18', '27' ] 


    /**
    * Two cases can cause process.server to be true
    * 1: User hard reloads the browser while in dev mode
    * 2. Nuxt Generate is generating this page.
    * If this is case 1 and this function is being called
    * by nuxt generate on the server,
    * we can preeset some data variables in the server
    * so they're set on the client when page is compiled.
    * To do this, we must fetch the RSI model file from the web.
    * since it's browserless mode and the `script` tag doesn't exist.
    */
    if (process.server && typeof payload != 'undefined')
    {      
      code = payload.code
      langName = payload.name 
    }


    /**
    * This will run if:
    * 1. Page is being hot reloaded while dev'ing,
    * 2. User hard reloads browser while in dev mode.
    * 3. regular page load - aka, when a user visits the web page
    * If it's case 2, then we must get the RSI model from ftp server
    * since there is no window object to insert `<script>`.
    * Also, `payload` isnt' set since it isn't being called by nuxt generate.
    */
    if (typeof payload == 'undefined')
    {            
      if (process.server)
      {
        console.log('----- SERVER')
      }
      else
      {
        console.log('----- browser!')
      }
      let modelURI = `https://www.rosettastone.com/lp/static/data/us/models/js/sitewide.js`
      let model = await fetch(modelURI)
      model = await model.text()     

      // eval(model) will error. we need to split the RSI function from the props
      var [original, fn, props] = model.match(/(.+)(RSI\.id=.+)/)      
      
      let RSI = eval(`(${fn})`)

      eval(props)          
      global.RSI = RSI
    
      let urlMap = [
        {
          route: `buy-spanish`,
          name: "Spanish (Latin America)",
          code: "esp"
        },
        {
          route: `buy-french`,
          name: "French",
          code: "fra"
        },
        {
          route: `buy-italian`,
          name: "Italian",
          code: "ita"
        },
        {
          route: `buy-german`,
          name: "German",
          code: "deu"
        },
        {
          route: `buy-english`,
          name: "English (American)",
          code: "eng"
        },
        {
          route: `buy-arabic`,
          name: "Arabic",
          code: "ara"
        },
        {
          route: `buy-chinese`,
          name: "Chinese (Mandarin)",
          code: "chi"
        },
        {
          route: `learn-dari`,
          name: "Dari",
          code: "dar"
        },
        {
          route: `buy-dutch`,
          name: "Dutch",
          code: "ned"
        },
        {
          route: `learn-english-british`,
          name: "English (British)",
          code: "ebr"
        },
        {
          route: `learn-tagalog`,
          name: "Filipino (Tagalog)",
          code: "tgl"
        },
        {
          route: `learn-greek`,
          name: "Greek",
          code: "grk"
        },
        {
          route: `learn-hebrew`,
          name: "Hebrew",
          code: "heb"
        },
        {
          route: `learn-hindi`,
          name: "Hindi",
          code: "hin"
        },
        {
          route: `learn-indonesian`,
          name: "Indonesian",
          code: "ind"
        },
        {
          route: `learn-irish`,
          name: "Irish",
          code: "gle"
        },
        {
          route: `buy-japanese`,
          name: "Japanese",
          code: "jpn"
        },
        {
          route: `learn-korean`,
          name: "Korean",
          code: "kor"
        },
        {
          route: `learn-latin`,
          name: "Latin",
          code: "lat"
        },
        {
          route: `learn-pashto`,
          name: "Pashto",
          code: "pas"
        },
        {
          route: `learn-persian`,
          name: "Persian (Farsi)",
          code: "far"
        },
        {
          route: `learn-polish`,
          name: "Polish",
          code: "pol"
        },
        {
          route: `learn-spanish-spain`,
          name: "Spanish (Spain)",
          code: "esc"
        },
        {
          route: `learn-swahili`,
          name: "Swahili",
          code: "kis"
        },
        {
          route: `learn-swedish`,
          name: "Swedish",
          code: "sve"
        },
        {
          route: `learn-turkish`,
          name: "Turkish",
          code: "tur"
        },
        {
          route: `learn-urdu`,
          name: "Urdu",
          code: "urd"
        },
        {
          route: `learn-vietnamese`,
          name: "Vietnamese",
          code: "vie"
        },
      ];
          
      urlMap.forEach(o => {        
        if (route.params.page.match(o.route))
        {          
          code = o.route
          langName = o.name
          return
        }        
      }) 
    }

    
    return {
      // 3-letter lang code - esp, ita, fra...
      code: code,
      langName:  langName,
      bonusMonths: RSI.bonusmonths,
      productList: RSI({cat: 'esp', media: 'subscription'}),
      filter: filter,
    }
  
  },


  /* Page state data */
  data()
  {
    return {
      // 3-letter lang code. Populated via asyncData
      code: null,

      // Full language name. Populated via asyncData
      langName: null,

      // List of products to show. Each time a language is changed, this
      // gets populated and the product view gets updated (new cart urls, etc)
      productList: [],

      // Products we don't want to show
      filter: null,

      // If showfull=1 is in url, this becomes true. Show full prices
      showFullPrice: null,

      // If ?3pay=1 is in url, this becomes true. 24m becomes 3pay
      threePay: null,

      bonusMonths: null,


      isDemoDialogOpen: true,

    }
  },


  /**
    * Called on client side.
    * We use this to fill State data above
    * before mount, since the /lp/globals/models/<model>.js
    * has been loaded into the browser's window object.
    * This essentially is our state data.
    */

  beforeMount()
  {
    // Adding on to the state data, but on the client side.
    //this.productList = RSI({cat: this.selectedLang, media: 'subscription'})
    
    //this.languageName = window.RSI({cat: this.code})[0].language    
    this.isMobile = window.innerWidth <= 540 ? true : false
    this.expirationdate = window.RSI.expirationDate
    this.showFullPrice = window.location.search.match(/showfull=1/)
    this.threePay = window.location.search.match(/3pay=1/)
    this.bonusMonths = window.RSI.bonusmonths

    if (this.$route.query.onemonth )
    {
      this.filter = this.filter.map(e => e+'' == '1' ? `3` : e)    
    }
  },


  mounted ()
  {
    window.pagedata = this
  },


  methods: {
    openDemoDialog ()
    {
      console.log('AYYYY')
    }

  },

  computed: {

    /**
    * Language name without parenthesis
    */
    basicLangName ()
    {
      return this.langName.replace(/\(.+\)/, "").trim()
    },

    /**
    * Everytime state's productList gets updated with a new value,
    * this computed property will automatically be updated too.
    * We have this computed property so we don't have to 
    * filter/map/sort theproductsList each time we update it.
    * Use this in the template view instead of productList
    */
    products ()
    {
      return this.productList
      .filter(p => this.filter.indexOf(p.lvl) == -1 )   
      .map(p => { p.name = p.lvl; return p })
      .sort( (a, b) => parseInt(a.lvl) < parseInt(b.lvl) ? -1 : 1)
    }    
  },
  
}
</script>


<style lang='stylus'>
  @require '~assets/css/normalize'
  @require '~assets/css/variables'
  
  body
    //overflow-x hidden
    font-family gothambook, helvetica
    a
      text-decoration none
  
  // This div is for fixed content (not fluid)
  .content
    max-width 1100px
    display flex
    padding 0 2em
    box-sizing border-box
    
    @media $phone
      width 100%


  /********************************
    * MASTHEAD
  **********************************/
  .masthead
    //border-top 3px solid #fff
    background #01a13a
    box-shadow inset 0 1px 73px 0 rgba(0,0,0,.24)    
    text-align center
    padding 3.2em 0
    font-family gothambook    
    color #fff
    h1
      font-size 130%
      margin 0 0 1em 0
      font-size 30px
      color #fff
      letter-spacing 1px
      font-weight 100
      span
        color #ffbd00
        font-weight 400
      sup
        font-size 13px
        position relative
        top -13pxpadding-bottom 2em
        left -10ppadding-bottom 2em
    .heading-2   padding-bottom 2em
      color #fff padding-bottom 2em
      & > div:firpadding-bottom 2em
        font-sizepadding-bottom 2em
        
      & > div:last-of-type
        font-size 19px
        font-weight 700


  /********************************
    * PRODUCT BRIEF HIGHLIGHTS & IMAGE
  **********************************/
  .brief
    display flex
    width 100%
    padding 2em 0
    justify-content center
    background #f1f1f1
    .content
      align-items center
    .left
      width 45%
      ul
        margin 0
        padding 0
      li
        margin 0 0 1em 0
        line-height 23px
        font-size 110%
        a
          color #4788be
          font-weight 700
          text-transform uppercase
    .right      
      flex-grow 1
      text-align center
      img
        width 60%
    @media $tablet
      .content
        flex-direction column
      
      .left
        width 100%
        order 2
      .right
        order 1
        padding-bottom 2em

  /********************************
    * PRODUCT FEATURES
  **********************************/
  .features-wrap
    background #392e07
    color #fff
    display flex
    justify-content center
    padding 2em 0

  
  /********************************
    * PRODUCT HIGHLIGHTS
  *********************************/
  
    
  // .highlights-wrap
  //   background blue
  //   padding 2em 0
  //   background #4788be
  //   color #fff
  //   display flex
  //   justify-content center
  .highlights
    padding 2em 0
    background #4788be
    color #fff
    display flex
    justify-content center
    .content
      display flex
    @media $tablet
      .content
        flex-direction column
        width 100%

  /********************************
    * PRODUCT HIGHLIGHTS
  **********************************/
  .products-container
    padding 3em 0
    display flex
    justify-content center    
    background #4788be
    p:first-of-type
      margin 4em 0 
    .content
      // flex-direction column
      // align-items center
      // padding 0 1em
      width 100%      
      @media $phone
        padding 0 1em
  .products
    display flex
    flex-wrap wrap
    justify-content space-between
    width 100%
    @media $tablet
      justify-content space-around
    @media $phone
      
      
      // Reverse product order in mobile      
      list = 1..15
      for n in list    
        .product-wrap:nth-child({n})        
          order list[-(n)]
    

  .how-it-works
      text-align center
      background #f1f1f1
      padding 3em 0
      display flex
      flex-direction column
      align-items center
    h2
      font-size 30px
      font-weight 100
    p
      padding-bottom 2em
    .cta-img
      width 574px
      height 323px
      display flex
      background url(https://www.rosettastone.com/lp/catalog/catalog-pages-assets/video_still_demo.jpg)
      background-size contain
    .cta-btn
      padding 16px 38px
      color #fff
      font-size 16px
      border-radius 4px
      margin-top 50px
      background $blue
      font-weight 700
</style>