@nuskin/product-components 3.0.4 → 3.1.0-product-offer.2

package/.releaserc

@@ -1,6 +1,6 @@
 {
     "branches": [
-      "master"
+      "master", {"name":"added-product-offer", "channel":"prerelease", "prerelease":"product-offer"}
     ],
     "plugins": [
         "@semantic-release/npm",

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+# [3.1.0-product-offer.2](https://code.tls.nuskin.io/ns-am/ux/product-components/compare/v3.1.0-product-offer.1...v3.1.0-product-offer.2) (2022-04-22)
+
+
+### Fix
+
+* added hide favorites and some more query parsing ([b490535](https://code.tls.nuskin.io/ns-am/ux/product-components/commit/b490535c98e03e3ab45ac4710810d01b68019e83))
+
+# [3.1.0-product-offer.1](https://code.tls.nuskin.io/ns-am/ux/product-components/compare/v3.0.5...v3.1.0-product-offer.1) (2022-04-22)
+
+
+### Fix
+
+* ignore node 12 attempt ([8846ec5](https://code.tls.nuskin.io/ns-am/ux/product-components/commit/8846ec5a237b2442a16a35955b1d7613071ee94e))
+
+### New
+
+* converted ns-personal-offer-landing to vue component NsProductOffer, storybook updates (#CX12-4584) ([e0b4636](https://code.tls.nuskin.io/ns-am/ux/product-components/commit/e0b463634118326caa3f02793fcb4105b721f569)), closes [#CX12-4584](https://code.tls.nuskin.io/ns-am/ux/product-components/issues/CX12-4584)
+
+## [3.0.5](https://code.tls.nuskin.io/ns-am/ux/product-components/compare/v3.0.4...v3.0.5) (2022-04-21)
+
+
+### Fix
+
+* Stop qualifications getting messed up and allow variants(#CX15-4531) ([a94c742](https://code.tls.nuskin.io/ns-am/ux/product-components/commit/a94c742c37f77afa3ae397926a3f5ab5661e3af2)), closes [#CX15-4531](https://code.tls.nuskin.io/ns-am/ux/product-components/issues/CX15-4531)
+
 ## [3.0.4](https://code.tls.nuskin.io/ns-am/ux/product-components/compare/v3.0.3...v3.0.4) (2022-04-20)
 
 

package/components/NsProductOffer.vue

@@ -0,0 +1,1001 @@
+<template>
+  <div v-if="offerLoading" :class="$style.spinnerWrapper">
+    <NsSpinner />
+  </div>
+  <article v-else :class="$style.personalOfferDetails">
+    <template v-if="!showOffer && !productsLoading">
+      <!-- OFFER NOT FOUND -->
+      <section v-if="offerNotFound" :class="$style.offerNotFound">
+        {{ localTranslations.offerNotFound }}
+      </section>
+
+      <!-- OFFER EXPIRED -->
+      <section v-else-if="offerExpired" :class="$style.offerExpired">
+        {{ localTranslations.offerExpired }}
+      </section>
+    </template>
+
+    <div v-if="productsLoading" :class="$style.spinnerWrapper">
+      <NsSpinner />
+    </div>
+
+    <!-- OFFER TITLE -->
+    <section v-if="showOffer" :class="$style.offerTitleMessaging">
+      <div :class="$style.offerMessaging">
+        <h2 :class="$style.offerTitle">{{ localTranslations.welcome }}</h2>
+        <p :class="$style.offerMessage">
+          <span v-if="!offer.isGroupOffer">{{ offer.name }}, </span>
+          <span v-html="offer.greeting"></span>
+        </p>
+        <p :class="$style.storePreferredName">&#45; {{ storePreferredName }}</p>
+      </div>
+    </section>
+
+    <!-- OFFER BODY -->
+    <section :class="[$style.offerBody, { [$style.showOffer]: showOffer }]">
+      <!-- TOP PURCHASE ALL -->
+      <div v-if="showOffer" :class="$style.offerPurchaseAll">
+        <!-- OFFER TOTAL -->
+        <div :class="$style.offerTotalContainer">
+          <span v-if="offerTotalBeforeHtml" v-html="offerTotalBeforeHtml" />
+          <template v-if="showOfferTotal">
+            <span v-if="!hideDiscount" :class="$style.originalOfferTotal">
+              <NsCurrency :amount="originalOfferTotal" strike-through />
+            </span>
+            <span :class="$style.offerTotal">
+              <NsCurrency :amount="offerTotal" />
+            </span>
+          </template>
+          <span v-if="offerTotalAfterHtml" v-html="offerTotalAfterHtml" />
+        </div>
+
+        <!-- OFFER SAVINGS -->
+        <div
+          v-if="!hideDiscount && showOfferSavings"
+          :class="$style.offerSavingsContainer"
+        >
+          <span v-if="offerSavingsBeforeHtml" v-html="offerSavingsBeforeHtml" />
+          <span :class="$style.offerSavings">
+            <NsCurrency :amount="offerSavings" />
+          </span>
+          <span v-if="offerSavingsAfterHtml" v-html="offerSavingsAfterHtml" />
+        </div>
+
+        <!-- OFFER ACTION -->
+        <div :class="$style.offerAction">
+          <button
+            class="primary-solid fluid"
+            :class="$style.button"
+            :disabled="disableAddAll"
+            @click="addFullOfferToCart"
+          >
+            <NsIcon :class="$style.addToCartIcon" icon-name="icon-bag" />
+            {{ localTranslations.addAllItems }}
+          </button>
+        </div>
+      </div>
+
+      <!-- OFFER PRODUCTS -->
+      <div :class="$style.offerProducts">
+        <NsProductCard
+          v-for="(sku, index) in Object.keys(products)"
+          :key="index"
+          :class="[
+            $style.offerProduct,
+            { [$style.invalid]: !!products[sku].invalid }
+          ]"
+          :sku="sku"
+          :quantity="products[sku].requestedQuantity"
+          mobile-side-by-side
+          hide-favorites
+          @active-sku="activeSku => modifyProduct(sku, { activeSku })"
+          @availability="availability => modifyProduct(sku, { availability })"
+          @product-update="handleProductUpdate"
+        />
+      </div>
+
+      <!-- BOTTOM PURCHASE ALL -->
+      <div
+        v-if="showOffer && !hideBottomPurchaseAll"
+        :class="$style.offerPurchaseAll"
+      >
+        <!-- OFFER TOTAL -->
+        <div :class="$style.offerTotalContainer">
+          <span v-if="offerTotalBeforeHtml" v-html="offerTotalBeforeHtml" />
+          <template v-if="showOfferTotal">
+            <span v-if="!hideDiscount" :class="$style.originalOfferTotal">
+              <NsCurrency :amount="originalOfferTotal" strike-through />
+            </span>
+            <span :class="$style.offerTotal">
+              <NsCurrency :amount="offerTotal" />
+            </span>
+          </template>
+          <span v-if="offerTotalAfterHtml" v-html="offerTotalAfterHtml" />
+        </div>
+
+        <!-- OFFER SAVINGS -->
+        <div
+          v-if="!hideDiscount && showOfferSavings"
+          :class="$style.offerSavingsContainer"
+        >
+          <span v-if="offerSavingsBeforeHtml" v-html="offerSavingsBeforeHtml" />
+          <span :class="$style.offerSavings">
+            <NsCurrency :amount="offerSavings" />
+          </span>
+          <span v-if="offerSavingsAfterHtml" v-html="offerSavingsAfterHtml" />
+        </div>
+
+        <!-- OFFER ACTION -->
+        <div :class="$style.offerAction">
+          <button
+            class="primary-solid fluid"
+            :class="$style.button"
+            :disabled="disableAddAll"
+            @click="addFullOfferToCart"
+          >
+            <NsIcon :class="$style.addToCartIcon" icon-name="icon-bag" />
+            {{ localTranslations.addAllItems }}
+          </button>
+        </div>
+      </div>
+    </section>
+  </article>
+</template>
+
+<script>
+import {
+  ShoppingContext,
+  PersonalOfferStorageService,
+  SponsorStorageService,
+  events,
+  StoreFrontSponsorStorageService
+} from "@nuskin/ns-util";
+import { MySiteRestService } from "@nuskin/my-site-api";
+import {
+  CartService,
+  CurrencyService,
+  PersonalOfferService
+} from "@nuskin/ns-shop";
+import { AccountService } from "@nuskin/ns-account";
+import { isNullOrEmpty, isNumber } from "@nuskin/ns-common-lib";
+import { NsSpinner, NsIcon } from "@nuskin/design-components";
+import debounce from "lodash/debounce";
+
+import NsCurrency from "./NsCurrency.vue";
+import NsProductCard from "./NsProductCard.vue";
+
+export default {
+  name: "NsProductOffer",
+  components: {
+    NsSpinner,
+    NsIcon,
+    // eslint-disable-next-line vue/no-unused-components
+    NsCurrency,
+    NsProductCard
+  },
+  props: {
+    // the store owner/user id
+    storeId: {
+      type: String,
+      default: ""
+    },
+
+    // the personal/product offer - otherwise known as pitch - id
+    offerId: {
+      type: String,
+      default: ""
+    },
+    translations: {
+      type: Object,
+      default() {
+        return {
+          welcome: "Welcome! (welcome)",
+          bundleTotal: "Bundle Total - {price} (bundleTotal)",
+          discountPercentagePrice:
+            "{percent}% Off - {savings} Savings (discountPercentagePrice)",
+          addAllItems: "Add {qty} Items To Bag (addAllItems)",
+          offerNotFound:
+            "Offer Not Found. Please contact {user}. (offerNotFound)",
+          offerExpired: "Offer Expired. Please contact {user}. (offerExpired)",
+          offerName: "{name} (offerName)"
+        };
+      }
+    }
+  },
+  data() {
+    return {
+      currencyCode: "",
+      queryStoreId: "",
+      queryOfferId: "",
+      storeOwner: null,
+      storePreferredName: "",
+      offer: null,
+      discount: null,
+      isAdr: false,
+
+      products: {},
+      totalProducts: 0,
+      totalProductQuantity: 0,
+      localTranslations: { ...(this.translations || {}) },
+
+      offerLoading: true,
+      offerNotFound: false,
+      offerExpired: false,
+      hideDiscount: true,
+      someProductsValid: false,
+
+      offerSavings: 0,
+      showOfferSavings: false,
+      offerSavingsBeforeHtml: "",
+      offerSavingsAfterHtml: "",
+
+      originalOfferTotal: 0,
+      offerTotal: 0,
+      showOfferTotal: false,
+      offerTotalBeforeHtml: "",
+      offerTotalAfterHtml: ""
+    };
+  },
+  computed: {
+    runConfig() {
+      return this.$NsProductAppService.runConfig;
+    },
+    market() {
+      return this.runConfig.country;
+    },
+    language() {
+      return this.runConfig.language;
+    },
+    showWholeSalePricing() {
+      return this.$NsProductAppService.showWholeSalePricing;
+    },
+    isLoggedIn() {
+      return this.$NsProductUserService.isLoggedIn;
+    },
+    user() {
+      return this.$NsProductUserService.user;
+    },
+    userId() {
+      return this.$NsProductUserService.userId;
+    },
+    isDistributor() {
+      return this.$NsProductUserService.isDistributor;
+    },
+    isPreferredCustomer() {
+      return this.$NsProductUserService.isPreferredCustomer;
+    },
+    localStoreId() {
+      return (this.storeOwner || {}).sapId || this.storeId || this.queryStoreId;
+    },
+    isStorefront() {
+      return !!this.localStoreId;
+    },
+    localOfferId() {
+      return (this.offer || {}).pitchID || this.offerId || this.queryOfferId;
+    },
+    isPersonalOffer() {
+      return !!this.localOfferId && !!(this.offer || {}).active;
+    },
+    disableAddAll() {
+      return this.offerLoading || this.totalProductQuantity === 0;
+    },
+    productsLoading() {
+      return this.$NsProductDataService.batches.some(
+        batch =>
+          !["success", "failed"].includes(batch.status) &&
+          batch.skus.some(batchSku =>
+            Object.keys(this.products).includes(batchSku)
+          )
+      );
+    },
+    showOffer() {
+      return (
+        !this.offerLoading &&
+        !this.productsLoading &&
+        !this.offerNotFound &&
+        !this.offerExpired &&
+        this.someProductsValid
+      );
+    },
+    mobileOrPhablet() {
+      return this.$mq === "phablet" || this.$mq === "mobile";
+    },
+    hideBottomPurchaseAll() {
+      return (
+        (!this.mobileOrPhablet && this.totalProducts < 7) ||
+        (this.mobileOrPhablet && this.totalProducts < 3)
+      );
+    }
+  },
+  watch: {
+    productsLoading(productsLoading) {
+      if (!productsLoading) {
+        this.checkProductsHaveData();
+      }
+    }
+  },
+  async mounted() {
+    await this.addListeners();
+  },
+  beforeDestroy() {
+    this.removeListeners();
+  },
+  methods: {
+    async init() {
+      this.currencyCode = CurrencyService.getCurrency(this.market).currencyCode;
+
+      // in AEM, the storeId (userId) and offerId (pitchId) are query parameters
+      this.queryStoreId =
+        this.getSearchParameter("storeId") || this.getSearchParameter("userId");
+      this.queryOfferId =
+        this.getSearchParameter("offerId") ||
+        this.getSearchParameter("pitchId");
+
+      const shoppingContext = ShoppingContext.getShoppingContext();
+      if (isNullOrEmpty(shoppingContext) && !!this.localOfferId) {
+        ShoppingContext.setShoppingContext(ShoppingContext.PERSONAL_OFFER);
+      }
+
+      this.storeOwner = StoreFrontSponsorStorageService.getStoreFrontSponsor();
+      if (
+        this.localStoreId &&
+        (isNullOrEmpty(this.storeOwner) ||
+          this.storeOwner.sapId !== this.localStoreId)
+      ) {
+        let sponsor = null;
+
+        try {
+          // getSponsorData threw an error for accessing user id when the user/sponsor isn't found, catch it
+          sponsor = await MySiteRestService.getSponsorData(this.localStoreId);
+        } catch (err) {
+          console.error("Unable to get Store Owner. Error: ", err);
+        }
+
+        if (sponsor) {
+          StoreFrontSponsorStorageService.setStoreFrontSponsor(sponsor);
+          this.storeOwner = StoreFrontSponsorStorageService.getStoreFrontSponsor();
+        }
+      }
+
+      if (!isNullOrEmpty(this.storeOwner) && !!this.localOfferId) {
+        // get store preferred name from account service if possible
+        const storeOwnerAccountInfo = await AccountService.getAccountInfo(
+          this.localStoreId
+        );
+        this.storePreferredName =
+          (storeOwnerAccountInfo || {}).preferredName ||
+          this.storeOwner.displayName;
+
+        this.setT(
+          "offerNotFound",
+          this.t("offerNotFound").replace("{user}", this.storePreferredName)
+        );
+
+        this.setT(
+          "offerExpired",
+          this.t("offerExpired").replace("{user}", this.storePreferredName)
+        );
+
+        await this.getOffer();
+
+        this.offerLoading = false;
+      } else {
+        this.offerNotFound = true;
+        this.showOfferSavings = false;
+        this.offerLoading = false;
+      }
+    },
+
+    getSearchParameter(name) {
+      const params = new URLSearchParams(window.location.search);
+      return params.get(name) || "";
+    },
+
+    async getOffer() {
+      // original source: https://code.tls.nuskin.io/ns-am/nu-skin-aem/wm/ns-shop-elements/-/blob/master/src/ns-personal-offer-landing/ns-personal-offer-landing.js
+
+      // "Stop Status"(05) showing "out of stock"(在庫切れ) message on PO welcome page, it should show “Stop selling“(販売停止).
+      // https://test.nuskin.com/content/markets/ja_JP/products/product.03003536.mysite.html
+      // https://test.nskn.co/vgR82L
+      // https://test.nuskin.com/content/markets/ja_JP/personal-offer.mysite.html?userId=JA10153135&pitchId=-MqCvG0kuPDgU1dYV6Dv
+
+      // base product scenario: CA00075667  /////   https://test.nskn.co/iDSndb
+
+      let offer = await PersonalOfferService.getOfferV2(
+        this.localStoreId,
+        this.localOfferId
+      );
+
+      if (isNullOrEmpty(offer)) {
+        this.offerExpired = false;
+        this.isAdr = false;
+        return;
+      }
+
+      await this.getOfferPitch(offer);
+
+      const expirationDate = offer.expirationDate;
+      if (
+        expirationDate &&
+        new Date(expirationDate).getTime() <= new Date().getTime()
+      ) {
+        this.offerExpired = true;
+        return;
+      }
+
+      this.isAdr = !!offer.useADR;
+
+      const storageOffer = localStorage.getItem("personalOffer_v2");
+      const parsedOffer = !isNullOrEmpty(storageOffer)
+        ? JSON.parse(storageOffer)
+        : null;
+      const currentSessionId = (parsedOffer || {}).sessionId;
+      const currentSession = currentSessionId
+        ? (offer.sessions || {})[currentSessionId]
+        : null;
+
+      // new session
+      if (!currentSession) {
+        try {
+          const viewedResponse = await PersonalOfferService.callViewed(
+            this.localStoreId,
+            this.localOfferId
+          );
+          PersonalOfferStorageService.setSessionId(viewedResponse.sessionId);
+        } catch (err) {
+          console.error("Unable to set offer as viewed. Error: ", err);
+        }
+      }
+    },
+
+    async getOfferPitch(offer) {
+      if (
+        (this.offerId && this.offerId !== offer.pitchID) ||
+        (this.queryOfferId && this.queryOfferId !== offer.pitchID)
+      ) {
+        CartService.clearCart();
+      }
+
+      let response = await PersonalOfferService.getPitch(
+        this.localStoreId,
+        this.localOfferId
+      );
+
+      let responseObject =
+        (response || {}).data && Object.keys(response.data).length
+          ? response.data
+          : null;
+
+      if (
+        isNullOrEmpty(responseObject) ||
+        (!responseObject.items && !responseObject.products)
+      ) {
+        response = {
+          data: offer
+        };
+      }
+
+      responseObject =
+        response && response.data && Object.keys(response.data).length
+          ? response.data
+          : null;
+
+      if (
+        responseObject &&
+        responseObject.active !== false &&
+        !responseObject.isDeleted
+      ) {
+        responseObject.sapId = this.localStoreId;
+        responseObject.pitchID = this.localOfferId;
+
+        responseObject.congratulations =
+          responseObject.congratulations || responseObject.confirmationMessage;
+        responseObject.isGroupOffer =
+          responseObject.isGroupOffer || responseObject.isGroup;
+        responseObject.language =
+          responseObject.language || responseObject.languageCode;
+        responseObject.greeting =
+          responseObject.greeting || responseObject.message;
+        responseObject.items =
+          responseObject.items ||
+          responseObject.products.map(item => {
+            return {
+              SKU: item.sku,
+              RequestedQuantity: item.qty
+            };
+          });
+
+        const useMemberPricing = !!responseObject.useMemberPricing;
+        this.setMemberPricing(useMemberPricing);
+
+        responseObject.landingPageURL = window.location.href;
+        SponsorStorageService.setSponsor(responseObject.sapId);
+
+        this.setT(
+          "offerName",
+          this.t("offerName").replace("{name}", responseObject.name)
+        );
+
+        responseObject.name = this.localTranslations.offerName;
+        this.offer = responseObject;
+
+        if (this.isLoggedIn) {
+          if (this.isDistributor || this.isPreferredCustomer) {
+            this.discount = {
+              code: "RETAILPRICE",
+              description: "RetailPricing",
+              multiplier: 1
+            };
+            responseObject.discount = this.discount;
+          } else {
+            this.discount = responseObject.discount;
+          }
+        } else {
+          this.discount = responseObject.discount;
+        }
+
+        PersonalOfferStorageService.setPersonalOffer(responseObject);
+        let multiplier = this.discount ? this.discount.multiplier : 1;
+        this.hideDiscount = Number(multiplier) == 1;
+
+        for (const item of responseObject.items) {
+          this.products[item.SKU] = {
+            sku: item.SKU,
+            requestedQuantity: item.RequestedQuantity,
+            data: {}
+          };
+        }
+        this.totalProducts = Object.keys(this.products).length;
+
+        events.publish(events.shop.PRODUCT_IMPRESSION, {
+          ecommerce: {
+            currencyCode: this.currencyCode,
+            impressions: responseObject.items.map((item, index) => {
+              return {
+                id: item.SKU,
+                name: item.name,
+                price: item.price,
+                quantity: item.RequestedQuantity,
+                // "category": item.category, // category comes from EDW categories
+                position: index,
+                list: "pitchapp"
+              };
+            })
+          }
+        });
+      } else {
+        this.offerNotFound = true;
+        this.showOfferSavings = false;
+        this.offerLoading = false;
+      }
+    },
+
+    t(key) {
+      return (this.translations || {})[key] || "";
+    },
+
+    setT(key, value) {
+      this.$set(this.localTranslations, key, value);
+    },
+
+    modifyProduct(sku, props) {
+      if (this.products[sku]) {
+        this.products[sku] = { ...this.products[sku], ...props };
+      } else {
+        this.products[sku] = props;
+      }
+
+      this.checkProductsHaveData();
+    },
+
+    handleProductUpdate(product) {
+      if ((product || {}).sku && this.products[product.sku]) {
+        this.products[product.sku].data = product;
+      }
+
+      this.checkProductsHaveData();
+    },
+
+    checkProductsHaveData: debounce(function() {
+      const products = Object.values(this.products);
+      if (products.every(product => !isNullOrEmpty(product.availability))) {
+        this.someProductsValid = products.some(
+          product =>
+            !isNullOrEmpty(product.availability) && !isNullOrEmpty(product.data)
+        );
+
+        this.getOfferPrice();
+
+        if (products.every(product => isNullOrEmpty(product.data))) {
+          this.offerNotFound = true;
+        }
+      }
+    }, 250),
+
+    async addFullOfferToCart() {
+      const validSkus = Object.keys(this.products).filter(sku => {
+        const product = this.products[sku];
+        return (
+          !product.invalid &&
+          !isNullOrEmpty(product.data) &&
+          !isNullOrEmpty(product.availability) &&
+          product.availability.addToCart
+        );
+      });
+
+      if (!validSkus.length) {
+        return;
+      }
+
+      window.sessionStorage.setItem("nstoast-allowed", "true");
+
+      const countryCode = CartService.getCartProperty("cntryCd") || "";
+
+      let checkoutProducts = [];
+
+      for (const validSku of validSkus) {
+        const validProduct = this.products[validSku];
+        const selectedSku = validProduct.activeSku;
+        const selectedQuantity = validProduct.availability.selectedQuantity;
+
+        const cartOptions = {
+          sku: selectedSku,
+          product: validProduct.data,
+          qty: selectedQuantity,
+          userId: this.userId,
+          cntryCd: countryCode,
+          adr: false,
+          referrer: "myStore",
+          domain: window.location.hostname
+        };
+
+        CartService.addProductToCart(cartOptions)
+          .then(() => {
+            events.publish(events.shop.ADD_TO_CART, cartOptions);
+
+            events.publish(events.shop.ADD_TO_CART_NEW, {
+              event: "addToCart",
+              ecommerce: {
+                currencyCode: this.currencyCode,
+                add: {
+                  actionField: {
+                    list: "myStore"
+                  },
+                  products: [
+                    {
+                      name: validProduct.data.title,
+                      id: selectedSku,
+                      price: validProduct.availability.price,
+                      quantity: selectedQuantity,
+                      method: "personaloffer", // personal offer or quickView or productPage or cart
+                      cartType: "Standard"
+                    }
+                  ]
+                }
+              }
+            });
+
+            events.publish(events.shop.SHOW_ADD_TO_BAG, cartOptions);
+
+            checkoutProducts.push({
+              name: validProduct.data.title,
+              id: selectedSku,
+              price: validProduct.availability.price,
+              quantity: selectedQuantity
+            });
+          })
+          .catch(error => {
+            console.error(
+              `Failed to add '${selectedSku}' x${selectedQuantity} to cart. Error: `,
+              error
+            );
+          });
+      }
+
+      if (!checkoutProducts.length) {
+        return;
+      }
+
+      events.publish(events.shop.CART_CHECKOUT, {
+        event: "checkout",
+        ecommerce: {
+          currencyCode: this.currencyCode,
+          checkout: {
+            actionField: { step: 2 },
+            products: checkoutProducts
+          }
+        }
+      });
+
+      try {
+        await PersonalOfferService.callProduct(
+          this.localStoreId,
+          this.localOfferId
+        );
+      } catch (err) {
+        console.error("Failed updating product status to 'product_added'");
+      }
+
+      CartService.goToCartPage({ isMySite: true });
+    },
+
+    setMemberPricing(useMemberPricing) {
+      let contextOptions = {
+        showWholeSalePricing: useMemberPricing,
+        allowAnonymousShopping: !useMemberPricing,
+        preferredSignupOnly: useMemberPricing
+      };
+
+      ShoppingContext.setShoppingContext(
+        ShoppingContext.PERSONAL_OFFER,
+        contextOptions
+      );
+    },
+
+    getOfferPrice() {
+      let totalPrice = 0;
+      this.totalProductQuantity = 0;
+
+      for (const sku of Object.keys(this.products)) {
+        this.products[sku].invalid = true;
+        const availability = this.products[sku].availability;
+        if (availability) {
+          const selectedQuantity = availability.selectedQuantity || 0;
+          if (selectedQuantity > 0) {
+            const price = availability.price || 0;
+            if (availability.addToCart) {
+              totalPrice += price * selectedQuantity;
+              this.totalProductQuantity += selectedQuantity;
+              this.products[sku].invalid = false;
+            }
+          }
+        }
+      }
+
+      this.setT(
+        "addAllItems",
+        this.t("addAllItems").replace("{qty}", this.totalProductQuantity)
+      );
+
+      if (isNumber(totalPrice)) {
+        this.originalOfferTotal = totalPrice;
+        this.offerTotal = totalPrice;
+
+        if (
+          (this.discount && !this.user) ||
+          (this.user &&
+            (this.user.priceType === "RTL" ||
+              this.user.priceType === "WRTL" ||
+              this.user.isGuest))
+        ) {
+          let multiplier = this.discount ? this.discount.multiplier : 1;
+
+          this.offerTotal = totalPrice * multiplier;
+          this.offerSavings = this.originalOfferTotal - this.offerTotal;
+
+          const discountNum = Math.round((1 - multiplier) * 100);
+          this.showOfferSavings =
+            this.offerSavings > 0 && parseInt(discountNum);
+          if (this.showOfferSavings) {
+            this.setT(
+              "discountPercentagePrice",
+              this.t("discountPercentagePrice").replace(
+                "{percent}",
+                discountNum
+              )
+            );
+            const discountPercentagePrice = this.localTranslations
+              .discountPercentagePrice;
+            const offerSavingsHtmlParts = discountPercentagePrice.split(
+              "{savings}"
+            );
+            this.offerSavingsBeforeHtml = offerSavingsHtmlParts[0];
+            this.offerSavingsAfterHtml =
+              offerSavingsHtmlParts.length > 1 ? offerSavingsHtmlParts[1] : "";
+          }
+        } else {
+          this.hideDiscount = true;
+          this.showOfferSavings = false;
+        }
+
+        const offerTotalHtmlParts = this.t("bundleTotal").split("{price}");
+        this.showOfferTotal = offerTotalHtmlParts.length > 1;
+        this.offerTotalBeforeHtml = offerTotalHtmlParts[0];
+        this.offerTotalAfterHtml = this.showOfferTotal
+          ? offerTotalHtmlParts[1]
+          : "";
+
+        this.offerNotFound = false;
+      } else {
+        this.offerNotFound = true;
+      }
+    },
+
+    /**
+     * Handle product status events
+     */
+    handleProductStatus(results) {
+      this.$NsProductDataService.handleProductStatus(results);
+    },
+
+    /**
+     * Subscribe to events, should only be called when mounted
+     */
+    async addListeners() {
+      // watch app service finished loading
+      this.$watch(
+        "!$NsProductAppService.loading",
+        async () => await this.init(),
+        {
+          immediate: true
+        }
+      );
+
+      // listen to config changes
+      this.$NsProductAppService.$on("config-changed", async () => {
+        await this.init();
+      });
+
+      events.subscribe(events.authentication.REQUEST_FOR_LOGIN, function() {
+        CartService.clearCart();
+      });
+
+      // listen to product status changes
+      events.subscribe(
+        events.shop.PRODUCT_STATUS_RESULT,
+        this.handleProductStatus
+      );
+    },
+
+    /**
+     * Unsubscribe from events, should only be called when destroyed
+     */
+    removeListeners() {
+      // stop listening to product app service events
+      this.$NsProductAppService.$off();
+
+      // stop listening to product status changes
+      events.unsubscribe(
+        events.shop.PRODUCT_STATUS_RESULT,
+        this.handleProductStatus
+      );
+    }
+  }
+};
+</script>
+
+<style lang="scss" module>
+@use "sass:map";
+@use "~@nuskin/ns-core-styles/src/scss/colors";
+@use "~@nuskin/ns-core-styles/src/scss/other";
+@use "~@nuskin/ns-core-styles/src/scss/typographyVariables";
+@use "~@nuskin/ns-core-styles/src/scss/global.mixins";
+
+* {
+  box-sizing: border-box;
+  -webkit-font-smoothing: antialiased;
+}
+
+.personalOfferDetails {
+  width: 100%;
+  background-color: white;
+  font-family: map.get(typographyVariables.$typography, font-family-primary);
+}
+
+.addToCartIcon {
+  position: relative;
+  top: 1px;
+  stroke-width: 1.5px;
+}
+
+section {
+  max-width: 1000px;
+  margin: auto;
+}
+
+.offerNotFound {
+  padding: 30px;
+  text-align: center;
+}
+
+.offerTitleMessaging {
+  max-width: 100%;
+  background-color: #f6f7f7;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
+}
+
+.offerMessaging {
+  margin: auto;
+  padding: 12px 25px 25px 25px;
+  max-width: 600px;
+  color: rgb(68, 68, 68);
+  text-align: center;
+}
+
+.offerTitle {
+  font-size: 28px;
+  line-height: 34px;
+  font-weight: 100;
+  margin-block-start: 0.83em;
+  margin-block-end: 0.83em;
+  margin-inline-start: 0px;
+  margin-inline-end: 0px;
+  margin: 10px 0 10px 0;
+}
+
+.offerMessage {
+  margin: 0;
+  font-size: 16px;
+  line-height: 21px;
+  font-weight: 300;
+}
+
+.storePreferredName {
+  margin-top: 16px;
+  text-transform: uppercase;
+  font-weight: 400;
+}
+
+.offerBody {
+  &.showOffer {
+    padding-bottom: 50px;
+  }
+}
+
+.offerPurchaseAll {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 40px 0;
+}
+
+.offerTotalContainer {
+  display: flex;
+  font-size: 18px;
+  line-height: 24px;
+  font-weight: 600;
+  gap: 5px;
+
+  .originalOfferTotal {
+    font-weight: 300;
+  }
+
+  .offerTotal {
+    font-weight: 600;
+  }
+}
+
+.offerSavingsContainer {
+  display: flex;
+  font-weight: 300;
+  gap: 4px;
+}
+
+.offerAction {
+  margin-top: 1em;
+}
+
+.offerProducts {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 -7.5px;
+  justify-content: center;
+}
+
+.offerProduct {
+  margin: auto;
+  padding: 0 7.5px;
+  margin-bottom: 48px;
+
+  &.invalid {
+    box-shadow: #c23934 0px 1px 10px 1px;
+  }
+}
+
+.spinnerWrapper {
+  padding: 40px;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}
+</style>

package/index.js

@@ -32,6 +32,7 @@ import NsProductCarousel from "./components/NsProductCarousel.vue";
 import NsProductList from "./components/NsProductList.vue";
 import NsProductListSortable from "./components/NsProductListSortable.vue";
 import NsProductLine from "./components/NsProductLine.vue";
+import NsProductOffer from "./components/NsProductOffer.vue";
 
 export {
   // Services
@@ -50,5 +51,6 @@ export {
   NsProductCarousel,
   NsProductList,
   NsProductListSortable,
-  NsProductLine
+  NsProductLine,
+  NsProductOffer
 };

package/mixins/NsProductMixin.js

@@ -337,7 +337,10 @@ const NsProductMixin = {
       this.resetProductData(sku);
 
       this.activeSku = sku;
+
       this.setFromProductData(sku);
+
+      this.$emit("active-sku", this.activeSku);
     },
 
     setFromProductData(sku, product) {
@@ -347,6 +350,7 @@ const NsProductMixin = {
 
       if (!product) {
         this.$NsProductDataService.queue(sku);
+        this.emitAvailability();
         return;
       }
 
@@ -536,8 +540,7 @@ const NsProductMixin = {
      */
     setProductAvailability() {
       if (this.product) {
-        // TODO: replace Product in ns-shop with the one from ns-product-lib
-        // WARNING: There's a instanceof check on CartService.getAddToCartQty for the ns-shop Product
+        // WARNING: There's a instanceof check on CartService.getAddToCartQty for the ns-shop Product, previously different
         const shopProduct = new ShopProduct(this.product);
         // check if a user is qualified to purchase the product
         CartService.getAddToCartQty(shopProduct)
@@ -556,6 +559,7 @@ const NsProductMixin = {
           .finally(() => {
             this.setStatus();
             this.checkedQualifications = true;
+            this.emitAvailability();
           });
       }
     },
@@ -578,10 +582,25 @@ const NsProductMixin = {
           const productQualification = await QualificationService.getQualification(
             this.activeSku
           );
-          const cartItem = await CartService.getFirstItemBySku(this.activeSku, {
-            cartOrderItems: true
-          });
-          const cartQuantity = (cartItem || {}).qty || 0;
+
+          let cartQuantity;
+          if (!this.baseSku) {
+            const cartItem = await CartService.getFirstItemBySku(
+              this.activeSku,
+              {
+                cartOrderItems: true
+              }
+            );
+            cartQuantity = (cartItem || {}).qty || 0;
+          } else {
+            const cartData =
+              (await QualificationService.convertCartDataToBaseSkus(
+                CartService.getItemData(),
+                true
+              )) || {};
+            const cartItem = cartData[this.baseSku] || {};
+            cartQuantity = cartItem.qty || 0;
+          }
 
           if (!productQualification) {
             // the event has never been set up or is in the past (post-event/qualification not configured)
@@ -807,11 +826,28 @@ const NsProductMixin = {
       ) {
         this.disableAddToCart = true;
         this.disableAddToAdr = true;
+
+        this.$emit("disable-add-to-cart", quantity);
       } else if (this.userIsQualified) {
         this.checkAddToCartAndAdr();
       }
 
       this.$emit("quantity-select", quantity);
+      this.emitAvailability();
+    },
+
+    emitAvailability() {
+      this.$emit("availability", {
+        isBaseSku: this.isBaseSku,
+        isVariantSku: this.isVariantSku,
+        addToCart: !this.disableAddToCart,
+        addToAdr: !this.disableAddToCart,
+        selectedQuantity: Number(this.selectedQuantity),
+        maxQuantity: this.maxQuantity,
+        originalPrice: this.originalPrice,
+        price: this.price,
+        adrPrice: this.adrPrice
+      });
     },
 
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuskin/product-components",
-  "version": "3.0.4",
+  "version": "3.1.0-product-offer.2",
   "description": "Nu Skin Product Components",
   "main": "index.js",
   "scripts": {
@@ -24,10 +24,10 @@
   "dependencies": {
     "@mdi/font": "3.9.97",
     "@nuskin/design-components": "5.36.1",
-    "@nuskin/ns-common-lib": "1.3.0",
+    "@nuskin/ns-common-lib": "1.4.5",
     "@nuskin/ns-core-styles": "2.11.2",
     "@nuskin/ns-loyalty-web": "1.5.5",
-    "@nuskin/ns-product-lib": "1.3.4",
+    "@nuskin/ns-product-lib": "1.4.2",
     "@nuskin/product-recommendation": "2.0.1",
     "axios": "^0.19.2",
     "lodash": "^4.17.15",
@@ -47,6 +47,7 @@
     "@nuskin/ns-feature-flags": "1.x",
     "@nuskin/ns-product": "3.x",
     "@nuskin/ns-shop": "5.x",
-    "@nuskin/ns-util": "3.x"
+    "@nuskin/ns-util": "3.x",
+    "@nuskin/my-site-api": "3.x"
   }
 }

package/stories/GettingStarted.stories.mdx

@@ -1,4 +1,4 @@
-import { Meta, Description } from '@storybook/addon-docs/blocks';
+import { Meta, Description } from '@storybook/addon-docs';
 import GettingStarted from "../README.md";
 
 <Meta title="Product Components/Getting Started" />

package/stories/NsProductMixin.stories.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Preview, Props } from '@storybook/addon-docs';
 
 import NsStorybookToolbox from "./NsStorybookToolbox.vue";
 import NsProductMixinPreview from "./NsProductMixinPreview.vue";

package/stories/NsProductOffer.stories.js

@@ -0,0 +1,51 @@
+import NsStorybookToolbox from "./NsStorybookToolbox.vue";
+import NsProductOffer from "../components/NsProductOffer.vue";
+
+export default {
+  title: "Product Components/Ns Product Offer",
+  component: NsProductOffer
+};
+
+const Template = (args, { argTypes }) => ({
+  components: { NsStorybookToolbox, NsProductOffer },
+  props: Object.keys(argTypes),
+  data() {
+    return {
+      key: Date.now(),
+      args
+    };
+  },
+  methods: {
+    reloadProductList() {
+      this.key = Date.now();
+    }
+  },
+  template: `
+    <div style="width: 100vw">
+      <ns-storybook-toolbox @changes="reloadProductList" />
+      <ns-product-offer
+        :key="key"
+        v-bind="$props"
+        v-on="args"
+      />
+    </div>
+  `
+});
+
+export const Simple = Template.bind({});
+Simple.args = {
+  storeId: "JA10153135",
+  offerId: "-MqCvG0kuPDgU1dYV6Dv"
+};
+Simple.parameters = {
+  docs: {
+    source: {
+      code: `
+<NsProductOffer
+  store-id="JA10153135",
+  offer-id="-MqCvG0kuPDgU1dYV6Dv"
+/>
+`
+    }
+  }
+};

package/stories/Releases.stories.mdx

@@ -1,4 +1,4 @@
-import { Meta, Description } from '@storybook/addon-docs/blocks';
+import { Meta, Description } from '@storybook/addon-docs';
 import ChangeLog from "../CHANGELOG.md";
 
 <Meta title="Product Components/Releases" />