tabbit

Mon Jun 01 2020
Copied to clipboard! Copy reply
<template>
  <main>
    <section class="hero">
      <div class="container">
        <h2>
          Live Lectures <br />
          are here.
        </h2>
        <h3>Hone your skills with a coach in your language.</h3>

        <div class="hero-cta" @click="scrollTo('.middle')">LEARN MORE</div>
      </div>
    </section>

    <section class="calendar">
      <div class="container">
        <div class="heading">
          Live Lecture schedule for <br />{{ firstCalendarDay }} -
          {{ lastCalendarDay }}
        </div>
        <div class="language-selection">
          <!-- <div class="language-name">Spanish</div> -->
          <div class="select-wrap">
            <SelectLanguageFlags :themes="['blue', 'big']" />
          </div>
        </div>
        <div class="schedule" v-if="liveSessions && liveSessions.length">
          <article
            class="lesson"
            v-for="(schedule, i) in liveSessions"
            :key="i"
          >
            <div class="day">{{ schedule.date }}</div>
            <section v-for="(lesson, j) in schedule.lessons" :key="j">
              <div class="time">{{ lesson.startTime }}<span> (ET)</span></div>
              <div class="title">Building Sentences</div>
              <div class="tutor">{{ lesson.video.tutors[0].fullName }}</div>
              <button @click.prevent="onSignupClick">NOTIFY ME</button>
            </section>
          </article>
        </div>

        <div class="signup-dialog" v-if="isDialogOpen">
          <div>
            <b>You're all set!</b>
            <p>
              We'll notify you when this lecture is about to start.
            </p>
            <form action="" @submit.prevent="onSubmit">
              <input type="email" v-model="email" />
              <input type="submit" value="SIGN UP" />
            </form>
          </div>
        </div>
      </div>
      <!--/container -->
    </section>

    <section class="middle">
      <div class="container">
        <article>
          <div class="text">
            <h5>So, what is it?</h5>
            <p>
              One of our coaches will live-stream a lesson, where you can get
              your feet wet in real-world conversation. Take polls, chat with
              other learners, and practice pronunciation in your language. Each
              session is about 15 to 20 minutes.
              <strong>Did we mention that it’s free for everyone?*</strong>
            </p>
          </div>
          <div class="image">
            <img src="/nuxt-assets/img/live-lectures/panel-1.png" alt />
          </div>
        </article>

        <article>
          <div class="text">
            <h5>What will I learn?</h5>
            <p>
              Every session aligns with a unit in your Rosetta Stone course.
              Once you complete that unit, you’ll be able to join the relevant
              session. This way, you’ll have the background needed to review and
              improve the skills you already learned.
            </p>
          </div>
          <div class="image">
            <img src="/nuxt-assets/img/live-lectures/panel-2.png" alt />
          </div>
        </article>

        <article>
          <div class="text">
            <h5>What are the benefits of Live Lectures?</h5>
            <p>
              Learning on your own is important, but so is learning with others.
              Make new friends and practice grammar, vocabulary, and more with
              Live Lectures, all with the help of an expert language coach.
            </p>
          </div>
          <div class="image">
            <img src="/nuxt-assets/img/live-lectures/panel-3.png" alt />
          </div>
        </article>

        <article>
          <div class="text">
            <h5>When are the sessions? How do I access them?</h5>
            <p>
              Our schedule varies. We know that you’re busy, so we’ll send you a
              notification about upcoming sessions beforehand and then another
              one when the session is about to start.
            </p>
          </div>
          <div class="image">
            <img src="/nuxt-assets/img/live-lectures/panel-4.png" alt />
          </div>
        </article>
      </div>
    </section>

    <div class="container">
      <button class="bottom-cta" @click.prevent="onSignupClick">
        SIGN UP FOR LIVE LECTURE NOTIFICATIONS
      </button>
    </div>

    <FormFooterEmailCollection />

    <div class="legal">
      <div class="container">
        * Full access to Live Lectures is included with Rosetta Stone online
        consumer version subscriptions at no additional cost. Selection of
        languages currently includes English, Spanish, French, German,
        Portuguese, Russian, Italian, Chinese, Tagalog, Irish, Korean, and
        Japanese, and is subject to change as more languages are added. Free
        access version includes limited selection of languages and lectures;
        subject to change and discontinuation at any time without notice. To
        access via mobile app, app download and account creation required.
      </div>
    </div>

    <Overlay v-if="$store.state.overlay" />
  </main>
</template>

<script>
  import gql from 'graphql-tag';
  import { validateEmail } from '~/modules/validator.js';
  import briteVerify from '~/modules/brite-verify.js';
  import Overlay from '~/components/Overlay.vue';
  import SelectLanguageFlags from '~/components/SelectLanguageFlags';
  import FormFooterEmailCollection from '~/components/FormFooterEmailCollection.vue';

  export default {
    apollo: {
      liveSessions: {
        query: gql`
                  
                    liveSessions ($language: String!) {
                      liveSessions(language: $language) {
                      guid
                      startTime
                      url
                      video {
                        language
                        duration
                        title
                        tutors {
                          fullName
                          location
                          bio
                        }
                        thumbnail(height: 100, width: 100) {
                          uri
                          height
                          width
                        }
                      }
                    }
                    }
                  }
                `,
        variables: {
          language: 'ESP'
        }
      }
    },
    components: {
      Overlay,
      SelectLanguageFlags,
      FormFooterEmailCollection
    },

    head() {
      return {
        title: 'Live Lesson Lectures | Rosetta Stone',
        htmlAttrs: {
          lang: 'en'
        },
        meta: [
          { charset: 'utf-8' },
          { name: 'viewport', content: 'width=device-width, initial-scale=1' },
          {
            name: 'google-site-verification',
            content: 'EEfQ4bUNLVuWh2WpdCkYUsSMRxy3kRLd0RkhwZhlX0c'
          },
          { name: 'apple-itunes-app', content: 'app-id=435588892' },
          {
            hid: 'description',
            name: 'description',
            content:
              "Your online language learning live lessons are here! Join Rosetta Stone language coaches, chat with other learners and more. Did we mention that it's free for everyone?"
          }
        ],
        link: [
          {
            rel: 'canonical',
            href: 'https://www.rosettastone.com/live-lectures'
          }
        ],
        script: [
          {
            src:
              'https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.26.0/moment.min.js'
          },
          {
            src: process.env.DTM_SCRIPT,
            body: true
          },
          {
            src: `/nuxt-assets/js/vendor/jquery/jquery.min.js`,
            body: true
          }
        ]
      };
    },

    mounted() {
      // Fetch schedule from graphql
      //let req = await this.$axios.$get('https://api.forestry.ae/api/gPTnPBLzd');
      /*
                                                                this.$apollo.query({
                                                                  query: gql`
                                                                    query liveSessions($language: String!) {
                                                                      liveSessions(language: $language) {
                                                                        guid
                                                                        startTime
                                                                        url
                                                                        video {
                                                                          language
                                                                          duration
                                                                          title
                                                                          tutors {
                                                                            fullName
                                                                            location
                                                                            bio
                                                                          }
                                                                          thumbnail(height: 100, width: 100) {
                                                                            uri
                                                                            height
                                                                            width
                                                                          }
                                                                        }
                                                                      }
                                                                    }
                                                                  `,
                                                                  variables: { language: 'ESP' }
                                                                });
                                                                */

      // ie, Thursday, May 27th
      let dateFormat = 'dddd, MMMM Do';

      this.liveSessions = this.$apolloData.data.liveSessions;
      // Get dates for next 7 days in the date format above,
      // creating an array: [ {date: 'Thursday, May 17th', lessons: []}, ...]
      var weekSchedule = [...Array(7)].map((e, i) => {
        return {
          lessons: [],
          date: moment()
            .add(i++, 'days')
            .format(dateFormat)
        };
      });

      // Loop through API results. If moment(startTime) matches one of
      // weekSchedule's object's "date", add the lesson to it,
      // and add a nicer formatted date to the object
      for (let lesson of this.liveSessions) {
        let date = moment(lesson.startTime).format(dateFormat);
        let [obj] = weekSchedule.filter(e => e.date == date);
        if (obj) {
          lesson.startTime = moment(lesson.startTime).format('hh:mm A');

          obj.lessons.push(lesson);
        }
      }

      // Filter out days that have no lessons
      // Not sure why we need nextTick. Was ok when we did test run with
      // a restful API instead of gql :(

      this.$nextTick(() => {
        if (weekSchedule) {
          this.liveSessions = weekSchedule.filter(e => e.lessons.length);
        }
      });

      // Today's date, formatted nicely
      this.firstCalendarDay = moment().format('MMMM Do');

      // The date 7 days from now, formatted nicely
      this.lastCalendarDay = moment()
        .add(7, 'days')
        .format('MMMM do');

      // If overlay is clicked, close signup dialog and overlay.
      // `OVERLAY_CLICKED` is Emmitted by Overlay component.
      this.$bus.$on('OVERLAY_CLICKED', () => {
        this.isDialogOpen = false;
        this.$store.commit('OVERLAY_TOGGLE', false);
      });
    },

    data() {
      return {
        skipQuery: true,
        isDialogOpen: false,
        email: '',
        liveSessions: [],
        lastCalendarDay: '',
        firstCalendarDay: '',
        formError: '',
        formSuccess: false,
        buttonValue: 'SIGN UP',
        langId: 'esp'
      };
    },

    methods: {
      scrollTo(element) {
        let el = document.querySelector(element);

        window.scrollBy({
          top: el.offsetTop - 130,
          left: 0,
          behavior: 'smooth'
        });
      },

      /*
       * Handles lecture submit button click
       */
      onSignupClick() {
        this.$store.commit('OVERLAY_TOGGLE', true);
        this.isDialogOpen = true;
      },
      async onSubmit() {
        // Basic regex check
        if (!validateEmail(this.email)) {
          console.log('returning');
          this.formError = 'Email is invalid';
          return;
        }

        // Briteverify check
        if (!(await briteVerify(this.email))) {
          this.formError = 'E-mail is invalid.';
        }

        // Send email to EC
        var gdpr_consent_given = window.gdpr && window.gdpr.email_consent;
        if (gdpr_consent_given) {
          if (this.sendEmailToEC()) {
            this.formSuccess = true;
            this.buttonValue = 'Success!';
          }
        } else {
          this.formSuccess = false;
        }

        this.formError = '';
      },

      async sendEmailToEC() {
        let data = {
          email: this.email,
          cis_name: 'LIVE_LECTURES',
          website: 'US_WEBSITE',
          demo_type: 'live_lecture_signup',
          form_url: 'live-lectures',
          demo_lang: this.$store.state.langId,
          consent_type: (window.gdpr && window.gdpr.email_consent) || 'unknown',
          visit_country_code:
            (window.gdpr && window.gdpr.country_code) || 'unknown',
          newsletter_type: 'live_lecture_feature_page'
        };

        let url =
          process.env.EC_URL +
          Object.keys(data)
            .map(o => `${o}=${data[o]}`)
            .join('&');

        let [req] = await this.$axios.$post(url);

        if (req.cisFlag == 'true') {
          return true;
        } else {
          return false;
        }
      }
    },

    created() {
      this.$store.commit('UPDATE_LANG_ID', 'esp');
    }

    //computed: mapState(['langId'])
  };
</script>

<style>
  html {
    scroll-behavior: smooth;
  }
</style>

<style lang="stylus" scoped>
  $mobile-breakpoint = '(max-width: 960px);';

  .signup-dialog {
    position: fixed;
    max-width: 690px;
    z-index: 15;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -40%);
    color: #fff;
    width: 100%;

    & > div {
      padding: 3em 7em;
      background: linear-gradient(225.26deg, #F0C433 0%, #D67F30 100%);
      margin: 0 15px;
    }

    b {
      font-size: 56px;
      font-family: helvetica;
    }

    p {
      font-size: 24px;
      max-width: 360px;
    }

    input[type=email] {
      font-size: 24px;
      color: #606060;
      letter-spacing: 0.34px;
      border: none;
      border-radius: 8px;
      padding: 0 15px;
      margin: 0 15px 0 0;
      width: 287px;
      box-sizing: border-box;
      height: 67px;
      line-height: 67px;
    }

    input[type=submit] {
      background: #262626;
      color: #fff;
      padding: 0 25px;
      border: none;
      box-sizing: border-box;
      height: 67px;
      line-height: 67px;
      border-radius: 8px;
      position: relative;
      top: -2px;
    }

    @media $phone {
      & > div {
        padding: 2em 1em;
      }

      b {
        font-size: 45px;
      }

      input {
        display: block;

        &[type=email] {
          width: 100%;
        }

        &[type=submit] {
          margin: 15px auto 0;
        }
      }
    }
  }

  main {
    font-family: effra;
    background: #FBFBFB;
  }

  section {
    display: flex;
    flex-direction: column;
    padding: 0 1em;
  }

  .container {
    max-width: 1100px;
    margin: 0 auto;
    // border: 1px dotted #000;
    width: 100%;
    display: flex;
    flex-direction: column;

    @media $mobile-breakpoint {
      padding: 0 15px;
      box-sizing: border-box;
    }
  }

  .hero {
    background: url('/nuxt-assets/img/live-lectures/desktop-background.png') bottom no-repeat;
    background-size: cover;
    color: #fff;
    min-height: 361px;

    h2 {
      font-size: 64px;
      margin: 40px 0 10px;

      br {
        display: none;
      }
    }

    h3 {
      font-size: 34px;
      margin: 0;
      color: #BFEBFF;
    }

    .hero-cta {
      display: inline-block;
      padding: 15px 35px;
      color: #F0C433;
      border: 3px solid #F0C433;
      border-radius: 8px;
      align-self: center;
      margin-top: 3em;
      letter-spacing: 4px;
      cursor: pointer;
    }

    @media $mobile-breakpoint {
      & {
        background-size: cover;
      }

      @media (max-width: 500px) {
        background: url('/nuxt-assets/img/live-lectures/mobile-background.png') #fff bottom center;
        background-size: 100% 119%;
      }

      h2 {
        font-size: 41px;
        margin-top: 20px;

        br {
          display: block;
        }
      }

      h3 {
        font-size: 24px;
      }
    }
  }

  section.calendar {
    .container {
      position: relative;
    }

    .heading {
      font-size: 36px;
      margin: 1em 0;
      text-align: center;

      br {
        display: none;
      }
    }

    .language-selection {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .language-name {
      font-size: 36px;
      margin-right: 1em;
    }

    .select-wrap {
      width: 100%;
      max-width: 400px;
    }

    .schedule {
      display: flex;
      flex-direction: column;

      .lesson {
        display: flex;
        flex-direction: column;
        width: 100%;
        font-size: 24px;
        color: #262626;

        .day {
          font-size: 32px;
          margin: 1.3em 0;
          font-weight: 700;
          font-family: helvetica;
        }

        section {
          display: flex;
          flex-direction: row;
          padding: 25px;
          box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.16);
          justify-content: space-between;
          align-items: baseline;
          margin: 0.5em 0;

          & > div {
            // outline: 1px dotted red;
            flex-basis: 22%;
          }

          .time {
            font-weight: 700;

            span {
              color: #666;
            }
          }

          button {
            background: transparent;
            color: #262626;
            border: 3px solid #262626;
            border-radius: 8px;
            padding: 20px 55px;
            font-weight: 700;
            letter-spacing: 1.2px;
            font-size: 16px;
            transition: background 0.15s;

            &:hover {
              background: #262626;
              color: $yellow;
            }
          }
        }
      }
    }

    @media $mobile-breakpoint {
      .heading {
        font-size: 28px;

        br {
          display: block;
        }
      }

      .schedule {
        .day {
          text-align: center;
        }

        .lesson {
          section {
            flex-direction: column;

            & > div {
              margin: 10px 0;

              &:first-of-type {
                margin-top: 0;
              }
            }

            button {
              margin-top: 10px;
              width: 100%;
            }
          }
        }
      }
    }
  }

  .middle {
    margin-top: 3em;
    background: url('/nuxt-assets/img/live-lectures/yellow-bg.svg') top center no-repeat;
    background-size: contain;

    article {
      display: flex;
      flex-direction: row;
      margin-bottom: 4em;
      padding: 0 15px;

      .text {
        width: 50%;
        order: 0;
        margin: 0 75px 0 0;
      }

      h5 {
        display: inline-block;
        background: #262626;
        border-bottom: 10px solid #F0C433;
        padding: 24px;
        color: #fff;
        font-size: 32px;
        margin-bottom: 20px;
        max-width: 400px;
      }

      p {
        line-height: 40px;
        font-size: 24px;
        color: #262626;
        margin: 0;
        max-width: 539px;
        padding: 0;
      }

      .image {
        order: 1;
      }

      &:last-of-type {
        margin-bottom: 0;
      }
    }

    article:nth-of-type(even) {
      .text {
        order: 1;
        margin: 0 0 0 75px;
      }

      .image {
        order: 0;
      }
    }

    @media $mobile-breakpoint {
      & {
        margin-top: -2px;
        background-size: cover;
      }

      article {
        flex-direction: column;
        margin-bottom: 0;
        padding: 0;

        &:nth-of-type(even) {
          .text {
            margin: 0;
          }
        }

        .text {
          order: 0;
          margin: 0;
          width: 100%;
        }

        h5 {
          width: 100%;
          box-sizing: border-box;
          font-size: 28px;
        }

        .image {
          order: 1 !important;
          margin-top: 15px;

          img {
            width: 100%;
          }
        }
      }
    }
  }

  button.bottom-cta {
    background: #262626;
    color: #F0C433;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 4px;
    margin: 2em auto;
    display: inline-block;
    padding: 20px 45px;
    border: none;
    border-radius: 8px;
  }

  .legal {
    background: #262626;
    color: #eee;
    padding: 2em 1em;
    line-height: 24px;
  }
</style>