tabbit

Fri Apr 30 2021
Copied to clipboard! Copy reply
<template>
  <div
    class="product-wrap"
    :class="[theme ? `theme-${theme}` : '', productXpay ? 'xpay' : '']"
    :data-level="this.level"
  >
    <!-- <div class="ribbontext mobile" v-show="productRibbonText" :style="ribbonStyle">
      <span>{{ productRibbonText }}</span>
    </div> -->
    <div>
      <section class="product" :data-level="level">
        <div class="ribbontext desktop" v-show="productRibbonText" :style="ribbonStyle">
          <span>{{ productRibbonText }}</span>
        </div>

        <div class="header" v-bind:style="headerStyle">
          <div v-html="productName" class="name"></div>
          <div class="subname" v-if="level === 'lifetime-u'" v-html="subname"></div>
          <select v-if="level !== 'lifetime-u'">
            <option value="" v-for="(language, i) in $store.state.languages" :key="i">
              {{ language.name }} {{ language.region ? `(${language.region})` : "" }}
            </option>
          </select>
        </div>

        <div class="description" v-if="description" v-html="description"></div>
        <div class="offertext" v-show="productOfferText">{{ productOfferText }}</div>

        <div class="pricing">
          <div>
            <span class="dollars"> ${{ dollars }} </span>
            <span class="cents">.{{ cents }}</span>
            <span class="parcel">{{ yaml["per-month"] }}</span>
          </div>
          <div class="parcel-wrap">
            <div class="parcel" :class="$store.state.locale">{{ xpayQualified ? yaml.due : "" }}</div>
          </div>
        </div>

        <!-- <div class="cta-wrap">
          <div class="percent-ribbon-wrap" v-if="level === '12'">
            <div>SAVE 33%</div>
          </div>
          <a :href="productCartLink" class="cta" @click="onAddToCartClick">{{ yaml.cta }}</a>
        </div> -->

        <!-- /end .body -->

        <!-- msrp text shown underneath the price -->
        <!-- <div class="original-price">
          <span class="msrp" v-show="msrp != price">${{ this.msrp }}</span>
          <span class="price">${{ productXpay ? price : computedPrice }}</span>
          <span v-if="!xpayQualified">{{ yaml.due }}</span>
        </div> -->
      </section>

      <!-- <div class="offertext-mobile" v-show="productOfferText">{{ productOfferText }}</div> -->
    </div>
    <div class="cta-wrap mobile-only">
      <div class="percent-ribbon-wrap" v-if="level === '12'">
        <div>SAVE 33%</div>
      </div>
      <a :href="productCartLink" class="cta" @click="onAddToCartClick">{{ yaml.cta }}</a>
    </div>
  </div>
</template>

<script>
import { isString } from "~/modules/util";

/**
 * This is a single product box. It shows one product.
 * Media queries regarding layout should be done on the page
 * that is including this component.
 *
 * Query params override settings from Airtable.
 *
 * Current accepted URL params: *
 *
 * ?showfull=1
 *    Will show full price in every product instead of monthly
 *
 * ?pn={_24_:_buy 24 get 24 months free!_}
 *    Will update the product name for 24m.
 *
 * ?ribbontext={_24_:_best offer!_}
 *    Ribbon text is the text on top of the product box
 *
 * ?offertext={_24_:_offer ends soon_}
 *    The text hat is inside the (usually green) box
 *    between the product name and price.
 *
 * ?xpay=3
 *    Will format 24m cart link to apply 3-pay in cart.
 *    Note this can also be 5 pay. ie, xpay={24:5}.
 *    It will also divide price by the X amount to show
 *    in the html.
 *
 *
 */

export default {
  async fetch() {
    const yaml = await import(`~/data/components/ProductBox_ws6394/${this.$store.state.locale}.yaml`);
    this.yaml = yaml.default;
  },

  props: {
    // MSRP price of this product
    msrp: {
      type: Number,
      required: true,
    },

    // Sale price of this product
    price: {
      type: Number,
      required: true,
    },

    // The level of this product (6, 12, 24, etc)
    level: {
      type: String,
      required: true,
    },

    // The Magento cart url
    cartLink: {
      type: String,
      required: true,
    },

    // The name of this product. If blank, this component will
    // use the level as its name. Can be overwritten by url
    name: {
      type: String,
      required: false,
    },

    // If true, price will be showed as a whole, not monthly.
    // Can be overwritten by url
    showFullPrice: {
      type: Boolean,
      required: false,
      default: false,
    },

    // Should be a number: 3 or 5
    xpay: {
      type: [Number, String, Boolean],
      default: false,
    },

    // Bonus month this product becomes.
    // Can be overwritten by url
    bonusMonth: {
      type: Boolean,
      required: false,
      default: false,
    },

    // Text to show in the ribbon area
    // Can be overwritten by url
    ribbonText: {
      type: [String, Object],
      required: false,
      default: null,
    },

    // Text to show in the offer area
    // Can be overwritten by url
    offerText: {
      type: [String, Object],
      required: false,
      default: null,
    },

    // Email that gets passed to cart, if present.
    email: {
      type: String,
      required: false,
      default: null,
    },

    // guid to pass to cart, if present
    licenseGuid: {
      type: String,
      required: false,
      default: null,
    },

    // cid that gets passed to cart, if present.
    cid: { type: String, required: false, default: null },

    // An array of all products. This is currently not in use.
    products: {
      type: Array,
      required: false,
      default: null,
    },

    // Shows cart inside iframe instead of redirecting to cart
    iframeCart: {
      type: Boolean,
      required: false,
      default: true,
    },

    // Product metadata, in case we need it.
    metadata: {
      type: Object,
      required: false,
      default: () => {},
    },

    // Product description, usually shown below text
    description: {
      type: [String, Object],
      required: false,
      default: null,
    },

    // Products filter. We use this to know what parent component is showing,
    // so that we can put 'Best Value' on top of longest duration product
    // https://github.com/vuejs/vue/issues/1032#issuecomment-120212888
    productFilter: {
      type: Array,
      required: false,
      default: () => [],
    },

    // A color scheme.
    theme: {
      type: String,
    },
  },

  data() {
    return {
      yaml: "",
      dollars: null,
      cents: null,
      subname: null,
      parcel: null,

      // What we'll be dividing prices by to calculate monthly. use level by default
      divideBy: this.level,

      // A product that qualifies for 3 or 5 pay - these products cost >= $100,
      // and they will say $XX.xx/month. Otherwise, it should say $XX.xx due today
      xpayQualified: false,

      // Text displayed next to price - TODO store this in Airtable somewhere

      // These will be used in the <template>. We use these instead of the
      // props passed because Vue doesn't want you to mutate props. So
      // when a url param requires a prop to be changed, we must
      // use one of these data values instead of mutating the prop
      // directly. Just remember, don't try to mutate props.
      productShowFullPrice: this.showFullPrice,
      productOfferText: this.offerText,

      // ribbonText used to be a string, but now it's an object
      // support both string and object
      productRibbonText: isString(this.ribbonText) ? this.ribbonText : this.ribbonText && this.ribbonText.text,
      productRibbonBackground: isString(this.ribbonText) ? null : this.ribbonText && this.ribbonText.background,
      productRibbonColor: isString(this.ribbonText) ? null : this.ribbonText && this.ribbonText.color,
      productHeaderBackground: isString(this.ribbonText) ? null : this.ribbonText && this.ribbonText.headerbackground,
      productHeaderColor: isString(this.ribbonText) ? null : this.ribbonText && this.ribbonText.headercolor,

      productName: this.name,
      productCartLink: this.cartLink,
      isiFrameVisible: false,
    };
  },

  computed: {
    ribbonStyle() {
      const style = {};
      if (this.productRibbonBackground) {
        style.background = this.productRibbonBackground;
      }
      if (this.productRibbonColor) {
        style.color = this.productRibbonColor;
      }
      return style;
    },
    headerStyle() {
      const style = {};
      if (this.productHeaderBackground) {
        style.background = this.productHeaderBackground;
      }
      if (this.productHeaderColor) {
        style.color = this.productHeaderColor;
      }
      return style;
    },
    productXpay() {
      return this.xpay;
    },
    computedPrice() {
      // Makes it so if price (cents) are 2 digits - only if there are cents.
      // So instead of 199.5, it'll show 199.50
      let price =
        this.price.toString().indexOf(".") !== -1
          ? this.price.toLocaleString("en", { minimumFractionDigits: 2 })
          : this.price.toString();

      if (this.xpayQualified) {
        price = (Math.ceil((parseFloat(this.price, 10) / parseInt(this.productXpay, 10)) * 100) / 100)
          .toFixed(2)
          .split(".");
        price = price[1] === "00" ? price[0] : price.join(".");
      }

      return price;
    },

    language() {
      return this.$store.getters.getSelectedLanguage();
    },

    parcelText: {
      get() {
        if ((/lifetime/gi.test(this.level) && !this.productXpay) || this.productShowFullPrice) {
          return this.yaml["once"];
        }

        // In mobile (<= 600px), we only want to show 'Mo.'
        if (typeof window !== "undefined" && window.innerWidth <= 600 && this.$store.state.locale === "en") {
          return "/mo.";
        }
        return this.yaml["per-month"];
      },
      set(v) {
        this.parcel = v;
      },
    },
  },

  watch: {
    // Watch for language changes.
    language() {
      this.createSubname();
    },

    // Watch cart link for changes. On changes,
    // determine if we need to format for xpay or not,
    // and keep email in it.
    cartLink() {
      this.formatCartLink();
    },
  },

  mounted() {
    // We change some MSRPS. Yes, let the mutating props warnings flow for this test.
    switch (this.level) {
      case "3": {
        // eslint-disable-next-line vue/no-mutating-props
        this.msrp = 35.97;
        break;
      }
      case "12": {
        // eslint-disable-next-line vue/no-mutating-props
        this.msrp = 143.88;
        break;
      }
      case "lifetime": {
        // eslint-disable-next-line vue/no-mutating-props
        this.msrp = 299;
        break;
      }
    }

    /***************************************************************
     * Here we will handle the prop values that can be
     * overwritten/set by url parameters
     ***************************************************************/
    if (this.$route.query.productname) {
      try {
        const level = this.level.replace("-u", "");
        const productnameObj = JSON.parse(this.$route.query.productname.replace(/_/g, '"'));
        const textValue = productnameObj[level];
        if (textValue) {
          this.productName = textValue;
        }
      } catch (e) {
        console.warn("Could not parse ribbon text parameter.");
        console.log(e);
      }
    }

    if (this.$route.query.offertext) {
      try {
        // Remove "-u" from level, if there.
        const level = this.level.replace("-u", "");
        const offertextObj = JSON.parse(this.$route.query.offertext.replace(/_/g, '"'));
        const textValue = offertextObj[level];
        if (textValue) {
          this.productOfferText = textValue;
        }
      } catch (e) {
        console.warn("Could not parse offer text parameter.");
        console.log(e);
      }
    }

    if (this.$route.query.ribbontext) {
      try {
        // Remove "-u" from level, if there.
        const level = this.level.replace("-u", "");
        const ribbontextObj = JSON.parse(this.$route.query.ribbontext.replace(/_/g, '"'));
        const textValue = ribbontextObj[level];
        if (textValue) {
          this.productRibbonText = textValue;
        }
      } catch (e) {
        console.warn("Could not parse ribbon text parameter.");
        console.log(e);
      }
    }

    // Add "Best Value" to longest duration product, if `productRibbonText` isn't set.
    if (!this.productRibbonText && this.productFilter[this.productFilter.length - 1] === this.level) {
      this.productRibbonText = this.yaml["bestvalue"];
    }

    // WS-5412 - add "3 pay" to products are > $100 and
    // show 'due today' for products that are < $100
    if (this.productXpay) {
      if (this.price >= 100) {
        // eslint-disable-next-line eqeqeq
        const xpay = this.productXpay == 3 ? "threepay" : "fivepay";
        this.xpayQualified = true;
        this.productRibbonText = this.yaml[xpay];
        // Changes productCartLink if we have xpay
        this.formatCartLink();
      } else {
        this.parcelText = this.yaml["due"];

        // FIXME
        // we are not setting this.productRibbonText which means we will get
        // the value from Airtable which has values like "5pay" and "3pay"
        // (e.g. "Lifetime:en:5pay") which don't appear to be something we
        // want in a banner
      }
    }

    if (this.xpayQualified) {
      this.productShowFullPrice = false;
      this.divideBy = this.productXpay;
    }

    // Determine our monthly price: price/level
    const monthly = (Math.ceil((parseFloat(this.price, 10) / parseInt(this.divideBy, 10)) * 100) / 100)
      .toFixed(2)
      .split(".");

    // Set our dollars and cents for html view
    this.dollars = monthly[0];
    this.cents = monthly[1] === undefined ? "00" : monthly[1];
    this.cents = this.cents === "00" ? null : this.cents;

    // If showFullPrice is true, don't show monthly pricing
    if (this.productShowFullPrice) {
      this.dollars = this.computedPrice.toString().split(".")[0];
      this.cents = this.computedPrice.toString().split(".")[1] || "";
    }

    // If coaching link in lifetimeplus is clicked...
    const $lifetimeplusAnchorLink = document.querySelector("section[data-level*='lifetimeplus'] .description a");
    if ($lifetimeplusAnchorLink) {
      $lifetimeplusAnchorLink.addEventListener("click", (e) => {
        e.preventDefault();
        if (document.querySelector("article.coach")) {
          document.querySelector(".coach").scrollIntoView({
            behavior: "smooth",
          });
          try {
            s.tl(this, "o", "Learn more about coaching");
          } catch (e) {
            console.warn("Tracking event not fired");
          }
        } else {
          console.warn("Coaches section does not exist on this page, but lifetimeplus has a link to it");
        }
      });
    }
  },

  created() {
    this.$fetch();

    // Create string of text under product names
    this.createSubname();

    // Changes productCartLink if we have 3pay
    this.formatCartLink();

    // Can't have monthly price for lifetime products.
    if (/lifetime/gi.test(this.level)) {
      this.productShowFullPrice = true;
      this.divideBy = 1;
    }
  },

  methods: {
    handleProductClick(
      level,
      cartlink,
      dollars,
      cents,
      msrp,
      price,
      fullPrice,
      parcelText,
      productXpay,
      xpayQualified,
      event
    ) {
      this.$bus.$emit(
        "product-clicked",
        level,
        cartlink,
        dollars,
        cents,
        msrp,
        price,
        fullPrice,
        parcelText,
        productXpay,
        xpayQualified
      );
      document.querySelectorAll(".product-wrap").forEach((e) => {
        e.classList.remove("active");
      });
      event.target.closest(".product-wrap").classList.add("active");
    },

    // Shows sidepanel cart on desktop
    onAddToCartClick(e) {
      if (this.iframeCart) {
        e.preventDefault();
        this.$store.commit("CART_TOGGLE", true);
        this.$bus.$emit("SET_CART_IFRAME", e.target.href);
        this.$bus.$emit("CART_BUTTON_CLICKED", {
          level: this.level,
          price: this.price,
          msrp: this.msrp,
          email: this.email,
          licenseGuid: this.licenseGuid,
        });
      }
    },

    /**
     * Updates subName
     * This is ran on `created()` hook, and whenever
     * this.cartLink changes - it's being watch()'ed
     */
    createSubname() {
      const isHomeschool = /-hs/gi.test(this.level);
      //isUnlimited = this.metadata.languages !== "single" ? true : false;
      const isUnlimited = /-u/gi.test(this.level);

      //if (this.metadata.languages == 'single') {
      if ((isHomeschool && /3-hs|6-hs/.test(this.level)) || (!isUnlimited && !isHomeschool)) {
        // If not unlimited, `subName` is the language name
        let name = this.language.name;
        if (this.language.region) {
          name += `<div>(${this.language.region})</div>`;
        }
        this.subname = name;
      }

      //if (this.metadata.languages == 'unlimited') {
      if ((isHomeschool || isUnlimited) && this.productName) {
        // If it is unlimited, subName is 'Unlimited Languages'
        // If there's already a subname, exit - or else errors will cause
        // when attempting all the string manipulation in this function

        if (this.subname) {
          return;
        }

        // Either returns something like ["24", "months", "unlimited", "languages"]
        // or ["Lifetime", "unlimited", "languages"]

        const split = this.productName.split(" ");

        if (split.length === 3) {
          this.productName = split[0];
          this.subname = split.slice(1, 3).join(" ");
        } else {
          // ie, "24 months"
          this.productName = `${split[0]} ${split[1]}`;
          this.subname = split.slice(2, 4).join(" ");
        }

        if (this.$store.state.locale === "es" && split.length === 6) {
          // 'de por vida idiomas ilimitados'
          this.productName = split.slice(0, 4).join(" ");
          this.subname = split.slice(-2).join(" ");
        }
      }
    },

    /**
     * Updates the cart link if we have 3 pay.
     * This is ran on `created()` hook, and whenever
     * this.cartLink changes - it's being watch()'ed
     */
    formatCartLink() {
      let newProductCartLink = this.productCartLink;
      if (this.xpayQualified) {
        // If ?xpay is in url, overwrite whatever was passed via props.
        //this.productXpay = this.$route.query.xpay ? this.$route.query.xpay : this.xpay

        // Format cart link. A normal cart link looks like this:
        // https://secure.rosettastone.com/us_en_store_view/checkout/cart/add/sku/90291/category_id/esp/
        // We make it look like this:
        // https://secure.rosettastone.com/us_en_store_view/checkout/cart/add/sku/90291/category_id/esp/pp/3/
        try {
          newProductCartLink = this.cartLink.replace(/category_id\/.{3}/, "$&/pp/" + this.productXpay);
        } catch (e) {
          console.warn(`Error converting cartlink for ${this.level}`);
          console.log(e);
          newProductCartLink = this.cartLink;
        }
      } else {
        newProductCartLink = this.cartLink;
      }

      // If email was passed
      if (this.email) {
        if (newProductCartLink.indexOf("?") !== -1) {
          newProductCartLink = newProductCartLink.split("?");
          newProductCartLink[0] += `email=${encodeURIComponent(this.email)}`;
          newProductCartLink = newProductCartLink.join("?");
        } else {
          newProductCartLink += `email=${encodeURIComponent(this.email)}`;
        }
      }

      // If guid was passed
      if (this.licenseGuid) {
        if (newProductCartLink.indexOf("?") !== -1) {
          newProductCartLink = newProductCartLink.split("?");
          newProductCartLink[0] += `/licenseGUID=${this.licenseGuid}`;
          newProductCartLink = newProductCartLink.join("?");
        } else {
          newProductCartLink += `/licenseGUID=${this.licenseGuid}`;
        }
      }

      // If cid was passed
      if (this.cid) {
        let prefix = "?";
        if (newProductCartLink.indexOf("?") !== -1) {
          prefix = "&";
        }
        newProductCartLink += `${prefix}cid=${this.cid}`;
      }

      // Remove any double // that may be caused by the above
      try {
        const split = newProductCartLink.split("://");
        split[1] = split[1].replace("//", "/");
        newProductCartLink = split.join("://");
      } catch (e) {
        console.warn("-- Warn -- Could not split url to sanitie //");
      }

      const self = this;
      this.$nextTick(() => {
        self.productCartLink = newProductCartLink;
      });
    },
  },
};
</script>

<style lang="stylus" scoped>
$mobile-breakpoint = 750px;

.mobile-only {
  display: none;
  @media (max-width: $mobile-breakpoint) {
    display: flex;
  }
}


.product-wrap {
  display: flex;
  width: 100%;
  max-width: 256px;
  flex-direction: column;
  padding-bottom: 30px;
  margin: 10px;
}

.product {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
  border-radius: 7px;
  background: #fff;
  width: 100%;
  position: relative;
  color: #262626;
  font-family: helvetica;
  font-weight: 400;
}

.ribbontext {
  background: #0098DB;
  color: #fff;
  font-weight: 700;
  text-align: center;
  padding: 10px 25px 7px;;
  position: absolute;
  top: 0;
  left: 50%;
  border-radius: 8px;
  font-size: 16px;
  letter-spacing: 4px;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  text-transform: uppercase;
  &.mobile {
    display: none;
  }
}

.header {
  order: 1;
  text-align: center;
  border-top-right-radius: 7px;
  border-top-left-radius: 7px;
  font-weight: 700;
  padding: 40px 0 50px;
  font-size: 18px;
  .name {
    text-transform: lowercase;
    letter-spacing: 1px;
    font-size: 32px;
<<<<<<< HEAD
    // This will capitalize products name that don't start with a number
    &::first-letter {
      text-transform: uppercase;
    }
=======
>>>>>>> 6c49217c70fe34518f7adafa7dac129443c8556d
  }
  &.es {
    //font-size: 14px;
  }
  .subname, select {
    margin-top: 3px;
    text-transform: capitalize;
    font-weight: 100;
    font-size: 16px;
    border: 0;
    background: transparent;
  }
  select {
    text-align-last:center;
    background: #eee
    padding: 3px 10px 1px;
    &:focus {
      outline: none;
    }
    option {

    }
  }
  .subname div {
    display: inline-block;
    padding-left: 5px;
    @media (max-width: $mobile-breakpoint) {
      padding-left: 2px;
      font-size: 80%;
    }
  }
}

// Special offer per product
.offertext {
  background: #437414;
  color: #fff;
  // position relative
  top: -23px;
  padding: 7px 3px;
  width: 85%;
  font-size: 85%;
  min-height: 15px;
  position: absolute;
  font-weight: bold;
}

.offertext-mobile {
  display: none;
}



.body {
  order: 2;
  text-align: center;
  border-bottom-right-radius: 7px;
  border-bottom-left-radius: 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  // box-shadow 0 8px 30px rgba(0,0,0,.3)
  min-height: 132px;
}

.pricing {
  display: flex;
  margin-bottom: 41px;
  .dollars {
    font-size: 24px;
    margin-right: -5px;
  }
  .cents, .parcel {
    font-size: 16px;
  }
}

.original-price {
  text-align: center;
  margin-bottom: 37px;
}

.msrp {
  color: #D78230;
  text-decoration: line-through;
}


.percent-ribbon-wrap {
  position: absolute;
  top: -13px;
  right: -6px;
  overflow: visible;
  display: flex;
  z-index: 1;
}

.percent-ribbon-wrap div {
  padding: 6px 6px 4px;
  position: relative;
  background: #F0C433;
  overflow: visible;
  font-size: 12px;
  line-height: 12px;
  display: flex;
  font-weight: 700;
  letter-spacing: 1px;
}

.percent-ribbon-wrap div:after {
  content: "";
  height: 0;
  width: 0;
  display: block;
  position: absolute;
  bottom: -7px;
  right: 0;
  border-top: 8px solid #c5aa4e;
  border-right: 7px solid transparent;
}


.cta-wrap {
  position: relative;
  z-index: 1;
}
a.cta {
  color: #0098DB;
  font-family: Effra;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 4px;
  line-height: 19px;
  border: 3px solid #0098DB;
  border-radius: 8px;
  text-align: center;
  padding: 24px 19px;
  text-decoration: none;
  transition: all 0.14s;
  position: relative;
  display: flex;
  margin: 0 auto 16px;
}



@media (max-width: $mobile-breakpoint) {
  .product-wrap {
    max-width: none;
    outline: 4px solid transparent;
    outline-offset: -4px;
    margin: 0;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    flex: 1 0;
    box-shadow: 0 1px 1px 0 rgba(22,22,22,0.5);
    position: relative;
    flex-direction: row;
    & > div {
      padding: 16px;
      background: pink;
      width: 100%;
      display: flex;
      flex-direction: column;
    }
    .header {
      order: 0;
    }
    .name {
      font-size: 24px;
    }
    section {
      width: 100%;
    }
    .pricing {
      margin: 20px 0 0 0;
      justify-content: center;
    }
  }

  .product {
    margin: 0;
    max-width: none;
    display: flex;
    border-radius: 0;
    box-shadow: none;
    border: none;
    justify-content: space-between;
    background: none;
    flex-direction: column;
    .header {
      text-align: center;
      background: none;
      padding: 0;
    }
  }

  .cta-wrap {

  }
  a.cta {
    margin: 0;
    padding: 12px 8px;
    align-self: end;
    font-size: 14px;
    letter-spacing: 2px;
    align-self: flex-end;
  }
}





.theme-blue {
  .header {
    background: rgb(0, 154, 219);
    color: #fff;
  }

  @media (max-width: $mobile-breakpoint) {
    background: rgb(0, 154, 219);
    .pricing {
      border-top: 1px solid #333;
      color: #fff;
    }
  }
}
</style>