@nuskin/product-components 3.1.1 → 3.1.3

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+## [3.1.3](https://code.tls.nuskin.io/ns-am/ux/product-components/compare/v3.1.2...v3.1.3) (2022-06-07)
+
+
+### Fix
+
+* several fixes/tweaks to get product cards to work for the exclusive offer app (#CX15-5006) ([ef742b2](https://code.tls.nuskin.io/ns-am/ux/product-components/commit/ef742b25147e030740f2bedfe456b36af881c8bd)), closes [#CX15-5006](https://code.tls.nuskin.io/ns-am/ux/product-components/issues/CX15-5006)
+
+## [3.1.2](https://code.tls.nuskin.io/ns-am/ux/product-components/compare/v3.1.1...v3.1.2) (2022-05-19)
+
+
+### Fix
+
+* use shopping context for storefront/personal offer checks (#CX12-5158) ([642c9df](https://code.tls.nuskin.io/ns-am/ux/product-components/commit/642c9dfca66a3e355cacbb81116c275cce846500)), closes [#CX12-5158](https://code.tls.nuskin.io/ns-am/ux/product-components/issues/CX12-5158)
+
+## [3.1.2-shopping-context.1](https://code.tls.nuskin.io/ns-am/ux/product-components/compare/v3.1.1...v3.1.2-shopping-context.1) (2022-05-18)
+
+
+### Fix
+
+* use shopping context for storefront/personal offer checks (#CX12-5158) ([1f82ec5](https://code.tls.nuskin.io/ns-am/ux/product-components/commit/1f82ec5852f45aabe374201d54bf0424e0bad4f4)), closes [#CX12-5158](https://code.tls.nuskin.io/ns-am/ux/product-components/issues/CX12-5158)
+
 ## [3.1.1](https://code.tls.nuskin.io/ns-am/ux/product-components/compare/v3.1.0...v3.1.1) (2022-05-17)
 
 

package/components/NsProductCard.vue

@@ -29,6 +29,7 @@
     :max-price="maxPrice"
     :mobile-side-by-side="mobileSideBySide"
     :no-action="noAction"
+    :show-action="showAction"
     :original-price="originalPrice"
     :original-price-label="originalPriceLabel"
     :original-price-type="originalPriceType"
@@ -58,7 +59,9 @@
     @add-to-adr="handleAddToAdr"
     @card-click="handleCardClick"
     @favorite-click="handleFavoriteClick"
-  />
+  >
+    <slot />
+  </NsProductCardBase>
 </template>
 
 <script>
@@ -114,7 +117,11 @@ export default {
     /**
      * Won't show the Action area on hover
      */
-    noAction: Boolean
+    noAction: Boolean,
+    /**
+     * Force the Action area to always show
+     */
+    showAction: Boolean
   },
   data() {
     return {

package/components/NsProductCardBase.vue

@@ -15,6 +15,7 @@
     @mouseleave="closeAction"
     @click="handleCardClick"
   >
+    <slot />
     <!-- EXCLUSIVE OFFER ICON & LABEL -->
     <div v-if="isExclusive && !hideExclusiveIcon" :class="$style.exclusive">
       <NsIcon
@@ -403,7 +404,7 @@ export default {
       );
     },
     showSkuPrices() {
-      return !this.isBaseSku && !this.noAction;
+      return !this.isBaseSku && (!this.noAction || this.forcesv);
     },
     showExclusiveOfferLabel() {
       return !(this.hideExclusiveTextOnMobile || this.useMobileSideBySide);

package/index.js

@@ -33,6 +33,7 @@ import NsProductList from "./components/NsProductList.vue";
 import NsProductListSortable from "./components/NsProductListSortable.vue";
 import NsProductLine from "./components/NsProductLine.vue";
 import NsProductOffer from "./components/NsProductOffer.vue";
+import NsProductQuantitySelector from "./components/NsProductQuantitySelector";
 
 export {
   // Services
@@ -52,5 +53,6 @@ export {
   NsProductList,
   NsProductListSortable,
   NsProductLine,
-  NsProductOffer
+  NsProductOffer,
+  NsProductQuantitySelector
 };

package/mixins/NsProductMixin.js

@@ -3,6 +3,7 @@ import {
   StringService,
   util,
   SitesSessionStorageService,
+  ShoppingContext,
   StoreFrontSponsorStorageService,
   PersonalOfferStorageService,
   dateFormatter,
@@ -17,7 +18,7 @@ import {
   Product as ShopProduct
 } from "@nuskin/ns-shop";
 import webLoyalty from "@nuskin/ns-loyalty-web";
-import { getProp, getFullUrl, isNullOrEmpty } from "@nuskin/ns-common-lib";
+import { getProp, getFullUrl } from "@nuskin/ns-common-lib";
 import { PriceType } from "@nuskin/ns-product-lib";
 
 //const PRODUCT_SMALL_VARIANT = "product-card.selected-variant";
@@ -141,6 +142,8 @@ const NsProductMixin = {
       imageSet: [],
       isBaseSku: false,
       isExclusive: false,
+      isStorefront: false,
+      isPersonalOffer: false,
       /**
        * Determines if the current product is a pending or current favorite
        */
@@ -255,8 +258,10 @@ const NsProductMixin = {
       return !this.hideVariantSelector && (this.isBaseSku || this.isVariantSku);
     },
     showExclusiveOfferMessage() {
-      return (
-        this.isExclusive && !this.userIsQualified && this.exclusiveOfferMessage
+      return !!(
+        this.isExclusive &&
+        !this.userIsQualified &&
+        this.exclusiveOfferMessage
       );
     },
     showOriginalCrossedOut() {
@@ -336,6 +341,13 @@ const NsProductMixin = {
 
       this.resetProductData(sku);
 
+      this.isStorefront =
+        ShoppingContext.isContext(ShoppingContext.STOREFRONT) &&
+        StoreFrontSponsorStorageService.isStorefront();
+      this.isPersonalOffer =
+        ShoppingContext.isContext(ShoppingContext.PERSONAL_OFFER) &&
+        !!(PersonalOfferStorageService.getPersonalOffer() || {}).active;
+
       this.activeSku = sku;
 
       this.setFromProductData(sku);
@@ -383,9 +395,7 @@ const NsProductMixin = {
     },
 
     async setLoyalty() {
-      this.hideLoyalty =
-        PersonalOfferStorageService.isPersonalOffer() ||
-        StoreFrontSponsorStorageService.isStorefront();
+      this.hideLoyalty = this.isStorefront || this.isPersonalOffer;
       let localLoyaltyData =
         JSON.parse(localStorage.getItem("loyaltyData")) || null;
 
@@ -576,6 +586,52 @@ const NsProductMixin = {
         return;
       }
 
+      if (this.product.status === ProductStatus.ReleasedForSale) {
+        if (this.maxQuantity > 0) {
+          this.enable();
+          this.statusMessageKey = "releasedForSale";
+
+          if (
+            this.product.backOrderDate &&
+            this.localTranslations.backOrderedWithDate
+          ) {
+            this.statusMessage = this.localTranslations.backOrderedWithDate.replace(
+              "%date%",
+              dateFormatter.getCountryFormattedDate(
+                this.product.backOrderDate,
+                this.locale
+              )
+            );
+            this.statusMessageKey = "backOrderedWithDate";
+          }
+        } else {
+          this.disable();
+
+          if (!this.isExclusive) {
+            if (this.product.availableQuantity > 0) {
+              this.statusMessage = this.localTranslations.reachedPurchaseLimit;
+              this.statusMessageKey = "reachedPurchaseLimit";
+            } else {
+              this.statusMessage = this.localTranslations.outOfStock;
+              this.statusMessageKey = "outOfStock";
+            }
+          }
+        }
+      } else {
+        this.disable();
+
+        if (this.product.status === ProductStatus.Discontinued) {
+          this.statusMessage = this.localTranslations.discontinued;
+          this.statusMessageKey = "discontinued";
+        } else if (this.product.status === ProductStatus.NotReleasedForSale) {
+          this.statusMessage = this.localTranslations.notReleasedForSale;
+          this.statusMessageKey = "notReleasedForSale";
+        } else if (this.product.status === ProductStatus.StopStatus) {
+          this.statusMessage = this.localTranslations.stopStatus;
+          this.statusMessageKey = "stopStatus";
+        }
+      }
+
       this.exclusiveOfferMessage = "";
       if (this.isExclusive) {
         if (this.isLoggedIn) {
@@ -624,52 +680,6 @@ const NsProductMixin = {
           this.exclusiveOfferMessage = this.localTranslations.exclusiveOfferMessage;
         }
       }
-
-      if (this.product.status === ProductStatus.ReleasedForSale) {
-        if (this.maxQuantity > 0) {
-          this.enable();
-          this.statusMessageKey = "releasedForSale";
-
-          if (
-            this.product.backOrderDate &&
-            this.localTranslations.backOrderedWithDate
-          ) {
-            this.statusMessage = this.localTranslations.backOrderedWithDate.replace(
-              "%date%",
-              dateFormatter.getCountryFormattedDate(
-                this.product.backOrderDate,
-                this.locale
-              )
-            );
-            this.statusMessageKey = "backOrderedWithDate";
-          }
-        } else {
-          this.disable();
-
-          if (!this.isExclusive) {
-            if (this.product.availableQuantity > 0) {
-              this.statusMessage = this.localTranslations.reachedPurchaseLimit;
-              this.statusMessageKey = "reachedPurchaseLimit";
-            } else {
-              this.statusMessage = this.localTranslations.outOfStock;
-              this.statusMessageKey = "outOfStock";
-            }
-          }
-        }
-      } else {
-        this.disable();
-
-        if (this.product.status === ProductStatus.Discontinued) {
-          this.statusMessage = this.localTranslations.discontinued;
-          this.statusMessageKey = "discontinued";
-        } else if (this.product.status === ProductStatus.NotReleasedForSale) {
-          this.statusMessage = this.localTranslations.notReleasedForSale;
-          this.statusMessageKey = "notReleasedForSale";
-        } else if (this.product.status === ProductStatus.StopStatus) {
-          this.statusMessage = this.localTranslations.stopStatus;
-          this.statusMessageKey = "stopStatus";
-        }
-      }
     },
 
     /**
@@ -756,8 +766,6 @@ const NsProductMixin = {
     },
 
     setHideAdr() {
-      const isPersonalOffer = PersonalOfferStorageService.isPersonalOffer();
-      const isStorefront = StoreFrontSponsorStorageService.isStorefront();
       const isSkinConsult = util.isSkinConsult();
       const mySiteHideAdr = !!(
         this.marketConfig &&
@@ -767,8 +775,8 @@ const NsProductMixin = {
       this.hideAdr =
         !this.adrHasPriority &&
         (this.hideAdrOverride ||
-          isPersonalOffer ||
-          ((isStorefront || isSkinConsult) && mySiteHideAdr));
+          this.isPersonalOffer ||
+          ((this.isStorefront || isSkinConsult) && mySiteHideAdr));
     },
 
     goToDetails() {
@@ -807,27 +815,22 @@ const NsProductMixin = {
 
     redirectToDetailsPage() {
       const sponsor = StoreFrontSponsorStorageService.getStoreFrontSponsor();
-      const isStorefront = !isNullOrEmpty(sponsor) && !!sponsor.sapId;
-      const sponsorSubdomain = isStorefront
+      const sponsorSubdomain = this.isStorefront
         ? Object.keys(sponsor.storefront || {})[0] || ""
         : "";
-      const isPersonalOffer = !!(
-        PersonalOfferStorageService.getPersonalOffer() || {}
-      ).active;
-      const useMysiteUrl = isStorefront && !isPersonalOffer;
       const baseUrl =
         window.location.hostname === "localhost"
-          ? useMysiteUrl
+          ? this.isStorefront
             ? `https://mysite${
                 this.runConfig.envCode === "test" ? ".test" : ""
               }.mynuskin.com`
             : this.marketConfig.siteUrl
           : window.location.origin;
       let pdpPath = `products/product.${this.product.sku}`;
-      if (isStorefront || isPersonalOffer) {
+      if (this.isStorefront || this.isPersonalOffer) {
         pdpPath += ".mysite";
       }
-      if (useMysiteUrl) {
+      if (this.isStorefront) {
         pdpPath += `.${sponsorSubdomain}`;
       }
       pdpPath += ".html";
@@ -1250,6 +1253,8 @@ const NsProductMixin = {
       this.imageSet = [];
       this.isBaseSku = false;
       this.isExclusive = false;
+      this.isStorefront = false;
+      this.isPersonalOffer = false;
       this.isFavorite = false;
       this.isSale = false;
       this.isVariantSku = false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuskin/product-components",
-  "version": "3.1.1",
+  "version": "3.1.3",
   "description": "Nu Skin Product Components",
   "main": "index.js",
   "scripts": {