@nuskin/product-components 3.18.0-td-341.2 → 4.0.0-cx15-11969.1

package/.releaserc

@@ -1,6 +1,6 @@
 {
     "branches": [
-      "master", {"name":"TD-341", "channel":"prerelease", "prerelease":"td-341"}
+      "master", {"name":"CX15-11969", "channel":"prerelease", "prerelease":"cx15-11969"}
     ],
     "plugins": [
         "@semantic-release/release-notes-generator",

package/components/NsProductCarousel.vue

@@ -31,9 +31,7 @@
 
 <script>
 import { PopularProductsService } from "@nuskin/ns-product";
-import { getRecommendations } from "@nuskin/product-recommendation";
 import { NsCarousel } from "@nuskin/design-components";
-import { CartService } from "@nuskin/ns-shop";
 
 import NsProductCard from "./NsProductCard.vue";
 
@@ -146,9 +144,6 @@ export default {
     },
     setSkusByType(type) {
       switch (type) {
-        case "recommended":
-          this.setSkusWithRecommendedProducts();
-          break;
         case "popular":
           this.setSkusWithPopularProducts();
           break;
@@ -156,39 +151,6 @@ export default {
           this.localSkus = this.skus;
       }
     },
-    async setSkusWithRecommendedProducts() {
-      try {
-        let options = {};
-        let unique = [];
-        let cartSkus = [];
-
-        if (CartService.getItemData().length > 0) {
-          cartSkus = CartService.getItemData().map(item => item.sku);
-          options.productSkus = cartSkus;
-        }
-
-        let recommendedProducts = await getRecommendations(options);
-        if (recommendedProducts) {
-          recommendedProducts.sort((a, b) => (a.type > b.type ? 1 : -1));
-
-          unique = Array.from(
-            new Set(recommendedProducts.map(item => item.sku))
-          )
-            .map(sku => {
-              return {
-                sku: sku,
-                type: recommendedProducts.find(item => item.sku === sku).type
-              };
-            })
-            .filter(item => !cartSkus.includes(item.sku));
-
-          this.localSkus = unique.map(recommendation => recommendation.sku);
-        }
-      } catch (err) {
-        console.log(err);
-        this.localSkus = [];
-      }
-    },
     async setSkusWithPopularProducts() {
       const popularProducts = await PopularProductsService.getPopularProducts();
       if (popularProducts) {

package/components/NsProductList.vue

@@ -46,7 +46,7 @@
 
 <script>
 import { NsExpressiveLink, NsIcon, NsSpinner } from "@nuskin/design-components";
-import { StringService, csStringService } from "@nuskin/ns-util";
+import { StringService } from "@nuskin/ns-util";
 import { fromJsonString } from "@nuskin/ns-common-lib";
 
 import NsProductCard from "./NsProductCard.vue";
@@ -190,12 +190,9 @@ export default {
         await this.$nextTick();
 
         try {
-          let commonStrings = {};
-          if (this.$NsProductAppService.useCSResources) {
-            commonStrings = await csStringService.getStrings(commonStringKeys);
-          } else {
-            commonStrings = await StringService.getStrings(commonStringKeys);
-          }
+          const commonStrings = await StringService.getStrings(
+            commonStringKeys
+          );
           if (commonStrings && commonStrings.loadMore) {
             this.loadMoreText = commonStrings.loadMore;
           }

package/docs/CHANGELOG.md

@@ -1 +1 @@
-# [3.18.0-td-341.2](https://code.tls.nuskin.io/ns-am/ux/product-components/compare/v3.18.0-td-341.1...v3.18.0-td-341.2) (2024-10-25)
+# [4.0.0-cx15-11969.1](https://code.tls.nuskin.io/ns-am/ux/product-components/compare/v3.17.22...v4.0.0-cx15-11969.1) (2025-03-11)

package/index.js

@@ -34,8 +34,6 @@ import NsProductListSortable from "./components/NsProductListSortable.vue";
 import NsProductLine from "./components/NsProductLine.vue";
 import NsProductOffer from "./components/NsProductOffer.vue";
 import NsProductQuantitySelector from "./components/NsProductQuantitySelector.vue";
-import NuHomeCloneProductCarousel from "./components/NuHomeCloneProductCarousel/NuHomeCloneProductCarousel.vue";
-import NsProductRecsCarousel from "./components/NsProductRecsCarousel.vue";
 
 export {
   // Services
@@ -56,7 +54,5 @@ export {
   NsProductListSortable,
   NsProductLine,
   NsProductOffer,
-  NsProductQuantitySelector,
-  NuHomeCloneProductCarousel,
-  NsProductRecsCarousel
+  NsProductQuantitySelector
 };

package/mixins/NsProductMixin.js

@@ -6,7 +6,6 @@ import {
 import {
   events,
   StringService,
-  csStringService,
   util,
   SitesSessionStorageService,
   ShoppingContext,
@@ -473,32 +472,8 @@ const NsProductMixin = {
         this.loyaltyStatusAndLinks.productOptedInRedeemNotEarn =
           "Save with Nu Skin Rewards";
 
-        const commonStringKeys = [
-          { key: "productDisplayNotOptedinMessage", dflt: "" },
-          {
-            key: "productDisplayOptedinMessage",
-            dflt: "{earnPercentage} Nu Skin enJoy Rewards Available!"
-          },
-          { key: "productOptedInEarnNotRedeem", dflt: "" },
-          {
-            key: "productOptedInRedeemNotEarn",
-            dflt:
-              "This product does not earn rewards points but is available to be redeemed for rewards points."
-          }
-        ];
-
-        try {
-          let loyalityStringsContent = {};
-          if (this.$NsProductAppService.useCSResources) {
-            loyalityStringsContent = await csStringService.getStrings(
-              commonStringKeys
-            );
-          } else {
-            loyalityStringsContent = await StringService.getStrings(
-              commonStringKeys
-            );
-          }
-          this.loyaltyStrings = loyalityStringsContent;
+        StringService.getApplicationStrings("loyalty").then(content => {
+          this.loyaltyStrings = content;
           // Link message to show to non-opted in users
           if (this.loyaltyStrings.productDisplayNotOptedinMessage) {
             this.loyaltyStatusAndLinks.landingPageLinkMessage = this.loyaltyStrings.productDisplayNotOptedinMessage;
@@ -540,14 +515,12 @@ const NsProductMixin = {
             );
             this.userLoyalty = loyaltyData;
           }
+        });
 
-          this.loyaltyStatusAndLinks.landingPage = this.localeReplace(
-            this.loyaltyStatusAndLinks.dashboardPage
-          );
-          this.loyaltyStatusAndLinks.siteUrl = this.siteUrl;
-        } catch (err) {
-          console.warn("Unable to retrieve loyalty strings translations.", err);
-        }
+        this.loyaltyStatusAndLinks.landingPage = this.localeReplace(
+          this.loyaltyStatusAndLinks.dashboardPage
+        );
+        this.loyaltyStatusAndLinks.siteUrl = this.siteUrl;
       }
     },
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuskin/product-components",
-  "version": "3.18.0-td-341.2",
+  "version": "4.0.0-cx15-11969.1",
   "description": "Nu Skin Product Components",
   "main": "index.js",
   "scripts": {
@@ -23,20 +23,16 @@
   "homepage": "https://code.tls.nuskin.io/ns-am/ux/product-components/-/blob/master/README.md",
   "dependencies": {
     "@mdi/font": "3.9.97",
-    "@ns/ns-contentstack-lib": "^2.0.4",
     "@nuskin/design-components": "6.34.0",
     "@nuskin/ns-common-lib": "1.4.7",
     "@nuskin/ns-core-styles": "2.11.2",
-    "@nuskin/ns-icon": "^2.12.0",
     "@nuskin/ns-loyalty-web": "1.5.6",
-    "@nuskin/ns-product-lib": "2.19.2",
+    "@nuskin/ns-product-lib": "2.19.7",
     "@nuskin/ns-shop": "7.1.3",
-    "@nuskin/product-recommendation": "2.0.1",
-    "axios": "1.6.7",
+    "axios": "1.8.1",
     "lodash": "4.17.21",
     "sass": "^1.19.0",
     "sass-loader": "^8.0.2",
-    "swiper": "8.4.7",
     "vue": "2.6.11",
     "vue-mq": "^1.0.1",
     "vue-plugin-load-script": "1.3.2"
@@ -60,7 +56,7 @@
     "@nuskin/nuskinjquery": "2.3.1",
     "ansi-html": "0.0.8",
     "async": "2.6.4",
-    "axios": "1.6.7",
+    "axios": "1.8.1",
     "decode-uri-component": "0.2.1",
     "eventsource/eventsource": "2.0.2",
     "fast-xml-parser": "4.2.5",

package/services/NsProductAppService.js

@@ -3,11 +3,8 @@ import Vue from "vue";
 import {
   RunConfigService,
   ConfigService,
-  StringService,
-  csStringService
+  StringService
 } from "@nuskin/ns-util";
-import { getConfiguration } from "@nuskin/configuration-sdk";
-import { isEnabled } from "@nuskin/ns-feature-flags";
 
 import { isNullOrEmpty } from "@nuskin/ns-common-lib";
 
@@ -37,8 +34,7 @@ if (!NsProductAppService) {
         showWholeSalePricing: false,
         loadingConfig: true,
         translations: {},
-        loadingTranslations: true,
-        useCSResources: false
+        loadingTranslations: true
       };
     },
     computed: {
@@ -181,37 +177,10 @@ if (!NsProductAppService) {
         ];
 
         try {
-          const configs = await getConfiguration(["Mysite_Product_Offer"]);
-          let url = window.location.href;
-          let isStaticApp = url.match(/\/static\//) !== null;
-          let useCSResources = false;
-          if (
-            configs &&
-            configs.Mysite_Product_Offer &&
-            configs.Mysite_Product_Offer.useCSResources &&
-            Array.isArray(configs.Mysite_Product_Offer.useCSResources)
-          ) {
-            useCSResources = configs.Mysite_Product_Offer.useCSResources.includes(
-              this.runConfig.country
-            );
-          }
-          // For static apps by default use CS resources
-          // For AEM apps use CS resources only if the feature flag is enabled
-          this.useCSResources =
-            useCSResources &&
-            (isStaticApp || (!isStaticApp && isEnabled("td_341")));
-          let commonStrings = {};
-          if (this.useCSResources) {
-            commonStrings = await csStringService.getStrings(
-              commonStringKeys,
-              this.locale
-            );
-          } else {
-            commonStrings = await StringService.getStrings(
-              commonStringKeys,
-              this.locale
-            );
-          }
+          const commonStrings = await StringService.getStrings(
+            commonStringKeys,
+            this.locale
+          );
 
           this.appendTranslations(commonStrings);
         } catch (err) {

package/services/NsProductDataService.js

@@ -9,10 +9,7 @@ import { isNullOrEmpty } from "@nuskin/ns-common-lib";
 import { ProductDataService } from "@nuskin/ns-product";
 import { Product, PriceType } from "@nuskin/ns-product-lib";
 import { equinoxLocalStorage } from "@nuskin/ns-util";
-import {
-  getConfiguration,
-  getCachedConfiguration
-} from "@nuskin/configuration-sdk";
+import { getConfiguration } from "@nuskin/configuration-sdk";
 
 class ProductDataBatch {
   constructor(id, skus) {
@@ -272,7 +269,9 @@ if (!NsProductDataService) {
           return;
         }
 
-        const equinoxMarketConfig = getCachedConfiguration("Equinox_Markets");
+        const equinoxMarketConfig = (
+          await getConfiguration(["Equinox_Markets"])
+        ).Equinox_Markets;
 
         // product data response has products
         if (productData.count && productData.products.length) {

package/assets/imageplaceholder.svg

@@ -1,39 +0,0 @@
-<svg id="Layer_1"
-    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 164 164">
-    <style>.st0{fill:#fff}.st1{fill:#dadbdb}.st2{fill:#ececec}.st3{fill:#dadbda}</style>
-    <path class="st0" d="M67.87 136.71V96.66h62.34c3.58 0 6.5 2.92 6.5 6.5v33.55H67.87z"/>
-    <path class="st1" d="M130.21 97.16c3.31 0 6 2.69 6 6v33.05H68.37V97.16h61.84m0-1H67.37v41.05h69.84v-34.05c0-3.87-3.13-7-7-7z"/>
-    <path class="st0" d="M67.87 93.96V79.5h65.34c1.93 0 3.5 1.57 3.5 3.5v10.96H67.87z"/>
-    <path class="st1" d="M133.21 80c1.65 0 3 1.35 3 3v10.46H68.37V80h64.84m0-1H67.37v15.46h69.84V83c0-2.21-1.79-4-4-4z"/>
-    <path class="st0" d="M67.87 136.71V96.66h62.34c3.58 0 6.5 2.92 6.5 6.5v33.55H67.87z"/>
-    <path class="st1" d="M130.21 97.16c3.31 0 6 2.69 6 6v33.05H68.37V97.16h61.84m0-1H67.37v41.05h69.84v-34.05c0-3.87-3.13-7-7-7z"/>
-    <path class="st0" d="M67.87 93.96V79.5h65.34c1.93 0 3.5 1.57 3.5 3.5v10.96H67.87z"/>
-    <path class="st1" d="M133.21 80c1.65 0 3 1.35 3 3v10.46H68.37V80h64.84m0-1H67.37v15.46h69.84V83c0-2.21-1.79-4-4-4z"/>
-    <path class="st2" d="M129.63 100.03H67.37v37.18h65.66v-33.78c0-1.87-1.52-3.4-3.4-3.4zM131.33 82.87H67.37v11.58h65.66v-9.88c0-.94-.76-1.7-1.7-1.7z"/>
-    <path class="st1" d="M130.21 97.16c3.31 0 6 2.69 6 6v33.05H68.37V97.16h61.84m0-1H67.37v41.05h69.84v-34.05c0-3.87-3.13-7-7-7zM133.21 80c1.65 0 3 1.35 3 3v10.46H68.37V80h64.84m0-1H67.37v15.46h69.84V83c0-2.21-1.79-4-4-4z"/>
-    <path class="st3" d="M129.63 100.03H89.07v9.34h43.96v-5.94c0-1.87-1.52-3.4-3.4-3.4z"/>
-    <path class="st0" d="M76.37 136.71V124.5h27.56a2.5 2.5 0 0 1 2.5 2.5v9.71H76.37z"/>
-    <path class="st1" d="M103.93 125c1.1 0 2 .9 2 2v9.21H76.87V125h27.06m0-1H75.87v13.21h31.06V127c0-1.66-1.34-3-3-3z"/>
-    <path class="st0" d="M76.33 121.8l-7.06-86.11v-8.4h43.99v8.44l-7.07 86.07z"/>
-    <path class="st1" d="M112.76 27.79v7.9l-7.02 85.6H76.79l-7.02-85.6v-7.9h42.99m1-1H68.77v8.94l7.1 86.56h30.78l7.1-86.56v-8.94h.01z"/>
-    <path class="st2" d="M109.58 30.67H68.77v5.06l7.1 86.57h26.92l6.79-82.69zM101.9 127.87H75.87v9.34h26.88v-8.49a.85.85 0 0 0-.85-.85z"/>
-    <path class="st1" d="M103.93 125c1.1 0 2 .9 2 2v9.21H76.87V125h27.06m0-1H75.87v13.21h31.06V127c0-1.66-1.34-3-3-3z"/>
-    <path class="st3" d="M109.58 30.67H68.77v5.06l.35 4.27h40.42l.04-.39z"/>
-    <path class="st1" d="M112.76 27.79v7.9l-7.02 85.6H76.79l-7.02-85.6v-7.9h42.99m1-1H68.77v8.94l7.1 86.56h30.78l7.1-86.56v-8.94h.01z"/>
-    <g>
-        <path class="st0" d="M27.5 136.71V99.07c0-4.41-.07-8.1-.13-11.36-.35-19.29-.35-19.29 16.62-29.61.15-.09.24-.25.24-.43V43.4c0-1.13.92-2.05 2.05-2.05h14.98c1.13 0 2.05.92 2.05 2.05v14.28c0 .18.1.35.26.44 16.61 9.04 16.6 9.98 16.49 34.13-.01 2.1-.02 4.37-.02 6.83v37.64H27.5z"/>
-        <path class="st1" d="M61.26 41.85c.85 0 1.55.7 1.55 1.55v14.28c0 .37.2.7.52.88 8.46 4.61 12.37 7.06 14.32 11.2 2 4.27 1.97 10.74 1.92 22.48-.01 2.1-.02 4.37-.02 6.83v37.14H28V99.07c0-4.41-.07-8.11-.13-11.37-.35-19-.35-19 16.38-29.17.3-.18.48-.51.48-.85V43.4c0-.85.7-1.55 1.55-1.55h14.98m0-1H46.28c-1.41 0-2.55 1.14-2.55 2.55v14.28C23.65 69.88 27 68.21 27 99.07v38.14h53.55V99.07c0-30.86 1.6-31.42-16.73-41.4V43.4a2.563 2.563 0 0 0-2.56-2.55z"/>
-    </g>
-    <g>
-        <path class="st2" d="M59.63 59.85V47.27c0-1.41-1.14-2.55-2.55-2.55H43.73v12.95C23.65 69.88 27 68.21 27 99.07v38.14h49.37v-35.96c0-30.86 1.59-31.42-16.74-41.4z"/>
-    </g>
-    <g>
-        <path class="st3" d="M27 124h49.37v13.21H27z"/>
-    </g>
-    <g>
-        <path class="st1" d="M61.26 41.85c.85 0 1.55.7 1.55 1.55v14.28c0 .37.2.7.52.88 8.46 4.61 12.37 7.06 14.32 11.2 2 4.27 1.97 10.74 1.92 22.48-.01 2.1-.02 4.37-.02 6.83v37.14H28V99.07c0-4.41-.07-8.11-.13-11.37-.35-19-.35-19 16.38-29.17.3-.18.48-.51.48-.85V43.4c0-.85.7-1.55 1.55-1.55h14.98m0-1H46.28c-1.41 0-2.55 1.14-2.55 2.55v14.28C23.65 69.88 27 68.21 27 99.07v38.14h53.55V99.07c0-30.86 1.6-31.42-16.73-41.4V43.4a2.563 2.563 0 0 0-2.56-2.55z"/>
-    </g>
-    <circle class="st0" cx="53.69" cy="87.41" r="8.41"/>
-    <circle class="st0" cx="91.26" cy="56.88" r="8.41"/>
-    <path fill="none" d="M0 0h164v164H0z"/>
-</svg>

package/components/NsProductRecsCarousel.vue

@@ -1,155 +0,0 @@
-<template>
-  <div>
-    <NuHomeCloneProductCarousel
-      :title="title"
-      :product-ids="productIds"
-      :country="country"
-      :language="language"
-      :force-loading="loading"
-      referrer="product_recommendation_carousel"
-      @click-pdp="onClickPdp"
-      @click-atc="onClickAddToCart"
-    />
-  </div>
-</template>
-
-<script>
-import { CartService } from "@nuskin/ns-shop";
-import { events } from "@nuskin/ns-util";
-import {
-  getPersonalizedRecommendations,
-  getRelatedProducts
-} from "../services/NsProductRecommendationClient";
-import NuHomeCloneProductCarousel from "./NuHomeCloneProductCarousel/NuHomeCloneProductCarousel.vue";
-
-export default {
-  name: "NsProductRecsCarousel",
-  components: { NuHomeCloneProductCarousel },
-  props: {
-    title: {
-      type: String,
-      default: ""
-    },
-    productId: {
-      type: String,
-      default: ""
-    },
-    language: {
-      type: String,
-      required: true
-    },
-    country: {
-      type: String,
-      required: true
-    }
-  },
-  data() {
-    return {
-      loading: false,
-      recommendedProductIds: [],
-      productIdsToOmit: [],
-      productsLimit: 10
-    };
-  },
-  computed: {
-    productIds() {
-      // Filter out all products marked for omission
-      return this.recommendedProductIds.filter(
-        id => !this.productIdsToOmit.includes(id)
-      );
-    }
-  },
-  watch: {
-    /**
-     * @param {string | undefined} id
-     */
-    productId(id) {
-      this.initRecommendations(id);
-    }
-  },
-  created() {
-    // When items are added to the cart, omit them from recommendations.
-    events.subscribe(events.shop.CART_UPDATED, info => {
-      if (info.add) {
-        this.productIdsToOmit.push(info.add.item.sku);
-      }
-    });
-
-    // Get the current status of the cart-data-sync process,
-    // and subscribe to any further changes to that status.
-    events.getValue(
-      events.shop.CART_SYNCED_ON_LOAD,
-      status => {
-        // Abort if the cart hasn't been synced yet,
-        // and wait for the next sync event.
-        if (!status) return;
-
-        // Cart data has been synced; get current cart contents and
-        // set as the list of products to omit from recommendations.
-        const cartItems = CartService.getItemData() || [];
-        const cartSkus = cartItems.map(item => item.sku);
-        this.productIdsToOmit = cartSkus;
-      },
-      true
-    );
-  },
-  mounted() {
-    this.initRecommendations(this.productId);
-  },
-  methods: {
-    /**
-     * @param {{
-     * sku: string,
-     * slug: string
-     * }} pdpEvent
-     */
-    onClickPdp(pdpEvent) {
-      // TODO: emit GTM event
-      console.log("pdpEvent:", pdpEvent);
-    },
-    /**
-     * @param {{
-     * sku: string,
-     * qty: number,
-     * userId: string,
-     * cntryCd: string,
-     * isAdr: boolean,
-     * referrer: string,
-     * domain: string
-     * }} atcEvent
-     */
-    onClickAddToCart(atcEvent) {
-      // TODO: emit GTM event
-      console.log("atcEvent", atcEvent);
-    },
-    /**
-     * @param {string} [productId]
-     */
-    async initRecommendations(productId) {
-      this.loading = true;
-
-      try {
-        let productIds = [];
-        if (productId) {
-          // Related Products mode
-          productIds = await getRelatedProducts(productId, this.productsLimit);
-        } else {
-          // User-Personalized mode
-          productIds = await getPersonalizedRecommendations(this.productsLimit);
-        }
-        this.recommendedProductIds = productIds;
-      } catch (err) {
-        console.error(err);
-      }
-
-      this.loading = false;
-    }
-  }
-};
-</script>
-
-<style>
-.content {
-  padding: 0;
-}
-</style>