tabbit

Thu Aug 13 2020
Copied to clipboard! Copy reply
<template>
  <div class="product-wrap" :data-level="this.level">
    <div class="ribbontext mobile" v-if="productRibbonText">
      <span>{{ productRibbonText }}</span>
    </div>

    <section class :class="`product ${theme}`" :data-level="this.level">
      <div class="ribbontext desktop" v-show="productRibbonText">
        <span>{{ productRibbonText }}</span>
      </div>

      <div class="header" :class="{ es: $store.state.locale == 'es' }">
        <div v-html="productName" class="name"></div>
        <div class="subname" v-if="subname" v-html="subname"></div>
      </div>

      <div class="body" :class="{ es: $store.state.locale == 'es' }">
        <div class="offertext" v-show="productOfferText">{{ productOfferText }}</div>
        <div class="pricing">
          <div class="dollar" :class="{ es: $store.state.locale == 'es' }">
            <span>$</span>
            <span>{{ dollars }}</span>
          </div>
          <div class="cents-wrap">
            <div class="cents" v-show="cents">.{{ cents }}</div>
            <div class="parcel" :class="$store.state.locale">{{ productXpay ? content.due : parcelText }}</div>
          </div>
        </div>
        <!--/ end .pricing -->

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

        <!-- With fullprice=1, we display  `Regular $<strikethrough msrp>` -->
        <div class="original-price" v-else>
          <span class="msrp" :style="{ visibility: price == msrp ? 'hidden' : 'visible' }">${{ this.msrp }}</span>
        </div>
      </div>
      <!-- /end .body -->

      <div class="footer">
        <a :href="productCartLink" class="add-to-cart" @click="onAddToCartClick">{{ content.cta }}</a>
      </div>
    </section>
    <div class="offertext-mobile" v-show="productOfferText">{{ productOfferText }}</div>
  </div>
</template>

<script>
/**
 * 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() {
    this.content = await import(`~/data/components/ProductBox/${this.$store.state.locale}.yaml`);
  },

  /* Props passed from parent. ie,
    <ProductBox  v-for="(product, key) in products"
      :msrp="product.msrp"
      :price="product.price"
      :level="product.lvl"
      :name="productName && productName[product.lvl] || product.name"
      :cartLink="product.cart"
      :showFullPrice="Boolean($route.query.fullprice || fullPrice)"
      :bonusMonths="bonusMonth"
      :xpay="parseInt($route.query.xpay) || xpay"
      :email="$route.query.email"
      :ribbonText="ribbonText && ribbonText[product.lvl]"
      :offerText="offerText && offerText[product.lvl]"
      :products="productList"
      :iframeCart=true
      :metadata=product.metadata
      :key="key"
    />
  */

  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,
      required: false,
      default: null,
    },

    // 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 },

    // 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: () => {},
    },

    // 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: () => [],
    },
  },

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

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

      // 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,
      productRibbonText: this.ribbonText,
      productXpay: this.xpay,
      productName: this.name,
      productCartLink: this.cartLink,
      isiFrameVisible: false,
    };
  },

  computed: {
    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.productXpay) {
        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() {
      if ((/lifetime/gi.test(this.level) && !this.productXpay) || this.productShowFullPrice) {
        return this.content["once"];
      }
      return this.content["per-month"];
    },
  },

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

    // 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() {
    /***************************************************************
     * 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 product, if `productRibbonText` isn't set.
    if (!this.productRibbonText && this.productFilter[this.productFilter.length - 1] === this.level) {
      const ribbonTextMap = {
        en: "Best Value!",
        es: "Mejor Oferta!",
      };
      this.productRibbonText = ribbonTextMap[this.$store.state.locale];
    }
  },

  created() {
    // 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;
    }

    if (this.productXpay) {
      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] || "";
    }
  },

  methods: {
    onAddToCartClick(e) {
      if (this.iframeCart) {
        e.preventDefault();
        this.$store.commit("CART_TOGGLE", true);
        this.$bus.$emit("SET_CART_IFRAME", e.target.href); //
      }
    },

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

      //if (this.metadata.languages == 'single') {
      if (!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 === 5) {
            // 'de por vida idiomas ilimitados'
            this.productName = split.splice(0, 3).join(" ");
            this.subname = split.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() {
      if (this.xpay) {
        // 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 {
          this.productCartLink = this.cartLink.replace(/category_id\/.{3}/, "$&/pp/" + this.productXpay);
        } catch (e) {
          console.warn(`Error converting cartlink for ${this.level}`);
          console.log(e);
          this.productCartLink = this.cartLink;
        }
      } else {
        this.productCartLink = this.cartLink;
      }

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

<style lang="stylus">
.subname {
  margin-top: 2px;
  text-transform: capitalize;
  font-weight: 400;

  div {
    display: inline-block;
    padding-left: 5px;

    @media (max-width: 668px) {
      padding-left: 0;
    }
  }
}
</style>
<style lang="stylus" scoped>
.product-wrap {
  display: flex;
  width: 100%;
  max-width: 238px;
  flex-direction: column;
}

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

.ribbontext {
  background: #262626;
  color: #fff;
  font-weight: 700;
  text-align: center;
  padding: 8px 0;
  width: 100%;
  position: absolute;
  top: -22px;
  left: 0;
  border-top-right-radius: 7px;
  border-top-left-radius: 7px;
  display: flex;
  justify-content: center;
  order: 0;

  &.mobile {
    display: none;
  }
}

.header {
  order: 1;
  background: linear-gradient(0.25turn, #EDDE5D, #F09819);
  padding: 1.66em 0;
  text-align: center;
  border-top-right-radius: 7px;
  border-top-left-radius: 7px;
  font-weight: 700;
  font-size: 20px;

  .name {
    text-transform: uppercase;
    letter-spacing: 1px;
  }
}

// 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)
  padding-top: 19px;
}

.pricing {
  padding: 1em 0 15px;
  display: flex;
  justify-content: center;
  margin-top: -20px; // same px as we shifted offer-banner up
  font-size: 36px;
  font-weight: 400;
  align-items: baseline;

  .dollar {
    span:first-of-type {
      font-size: 100%;
      position: relative;
      top: -21px;
      right: -6px;
    }
    span:last-of-type {
      font-size: 1.9em;
    }
  }
  .cents-wrap {
    display: flex;
    flex-direction: column;
    line-height: 12px;
    position: relative;
    top: -20px;
  }
  @media $phone {
    .dollar {
      span:first-of-type {
        top: -8px;
        right: -5px;
      }
    }
    .cents-wrap {
      top: -10px;
    }
  }
}

.cents {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  font-size: 50%;
  font-weight: 400;
  top: -9px;
  left: -15px;

  @media (max-width: 668px) {
    font-size: 70% !important;
    top: -3px;
  }

  // /month
  & > span {
    font-size: 24px;
  }
}

.parcel {
  color: rgb(85, 85, 85);
  font-weight: 400;
  font-size: 55%;
  padding-left: 7px;
  &.es {
    // because "un solo pago" is way longer than "once"
    font-size: 45%
  }
}

.original-price {
  font-size: 16px;

  & > span {
    padding-right: 2px;
  }
}

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

.footer {
  display: flex;
  order: 4;
}

a.add-to-cart {
  background: #3f93d3;
  border: 2px dashed #3f93d3;
  border-radius: 8px;
  text-align: center;
  color: #fff;
  padding: 12.5px 40px;
  text-decoration: none;
  margin: 25px auto 1.5em auto;
  font-weight: 700;
  transition: all 0.14s;
  position: relative;
  display: flex;
}

[data-level='6-hs'],
[data-level='3'] {
  .header {
    background: #262626;
    color: #eee;
  }
}

@media (max-width: 668px) {
  .product-wrap {
    max-width: none;
    margin-bottom: 1em;
  }

  .product {
    flex-basis: 100%;
    margin: 0;
    max-width: none;
    display: flex;
    border-radius: 0;
    box-shadow: none;
    border: none;
    justify-content: space-between;
    background: none;
  }

  .ribbontext {
    &.mobile {
      display: block;
      position: static;
      width: 115px;
    }

    &.desktop {
      display: none;
    }
  }

  .header {
    padding-left: 10px;
    width: 115px;
    align-self: center;
    height: 100%;
    box-sizing: border-box;
    border-radius: 0;
    text-align: left;
    padding: 10px;
    border-bottom-left-radius: 8px;
    border-top-left-radius: 8px;

    .name {
      text-align: left;
      letter-spacing: normal;
      font-size: 15px;
    }

    .subname {
      margin-top: 4px;
      font-size: 70%;

      div {
        display: block;
      }
    }

    &.es {
      max-width: 110px;
    }
  }

  .offertext {
    display: none;
  }

  .offertext-mobile {
    display: block;
    color: #fff;
    background: #01a13a;
    padding: 5px;
    text-align: center;
    margin-top: -1px;
  }

  .body {
    display: flex;
    padding: 0 11px;
    justify-content: center;
    flex-grow: 1;
    align-items: baseline;
    border: 1px solid #444;
    border-radius: 0;
    background: #fff;
    border-right: none;

    &.es {
      padding: 0 5px;
    }
  }

  .pricing {
    padding: 0;
    margin: 0;
    font-size: 16px;

    &.es {
      font-size: 15px;
    }
  }

  .monthly {
    display: flex;
    font-weight: 700;
    font-size: 70%;
  }

  .dollar {
    letter-spacing: 1px;

    &.es {
      letter-spacing: 0;
    }
  }

  .cents {
    font-size: 78%;
    letter-spacing: 1px;
    position: relative;
    // top -3px
  }

  .parcel {
    font-size: 16px;
    padding-left: 4px;
  }

  .original-price {
    font-size: 0.7em;
    padding-top: 0.5em;
    color: #555;
    display: flex;
    align-self: center;
  }

  .price {
    font-weight: bold;
  }

  .footer {
    a.add-to-cart {
      padding: 0 13px;
      border-radius: 0;
      font-size: 90%;
      margin: 0;
      align-items: center;
      box-sizing: border-box;
      border-bottom-right-radius: 8px;
      border-top-right-radius: 8px;
    }
  }
}
</style>