@nuskin/product-components 3.20.0 → 3.20.1-it-17535.1

package/.releaserc

@@ -1,6 +1,6 @@
 {
     "branches": [
-      "master"
+      "master", {"name":"IT-17535", "channel":"prerelease", "prerelease":"it-17535"}
     ],
     "plugins": [
         "@semantic-release/release-notes-generator",

package/components/NsProductOffer.vue

@@ -426,6 +426,17 @@ export default {
       const storeId = this.storeId || queryStoreId;
       const offerId = this.offerId || queryOfferId;
 
+      // Log initialization check
+      console.log("[NsProductOffer] checkToInit called:", {
+        timestamp: new Date().toISOString(),
+        appServiceLoading: this.$NsProductAppService.loading,
+        hasTranslations: !isNullOrEmpty(this.translations),
+        storeId: storeId,
+        offerId: offerId,
+        market: this.market,
+        language: this.language
+      });
+
       //  app service needs to be loaded, market and language need to be different, and translations are required
       if (
         !this.$NsProductAppService.loading &&
@@ -437,6 +448,14 @@ export default {
           (!!offerId && offerId !== this.localOfferId)) &&
         !isNullOrEmpty(this.translations)
       ) {
+        console.log("[NsProductOffer] Initializing offer:", {
+          timestamp: new Date().toISOString(),
+          market: this.runConfig.country,
+          language: this.runConfig.language,
+          storeId: storeId,
+          offerId: offerId
+        });
+
         this.market = this.runConfig.country;
         this.language = this.runConfig.language;
 
@@ -454,10 +473,25 @@ export default {
 
         await waitForConfig();
         await this.init();
+      } else {
+        // Log why initialization was skipped
+        console.log("[NsProductOffer] Init skipped:", {
+          timestamp: new Date().toISOString(),
+          appServiceLoading: this.$NsProductAppService.loading,
+          marketMatch: this.market === this.runConfig.country,
+          languageMatch: this.language === this.runConfig.language,
+          hasTranslations: !isNullOrEmpty(this.translations)
+        });
       }
     },
 
     async init() {
+      console.log("[NsProductOffer] init() started:", {
+        timestamp: new Date().toISOString(),
+        localStoreId: this.localStoreId,
+        localOfferId: this.localOfferId
+      });
+
       this.storeOwner = StoreFrontSponsorStorageService.getStoreFrontSponsor();
 
       const shoppingContext = ShoppingContext.getShoppingContext();
@@ -524,6 +558,7 @@ export default {
 
         this.offerLoading = false;
       } else {
+        console.log("[NsProductOffer] Offer not found - no offer ID provided");
         this.offerNotFound = true;
         this.showOfferSavings = false;
         this.offerLoading = false;
@@ -531,12 +566,19 @@ export default {
     },
 
     async getOffer() {
+      console.log("[NsProductOffer] getOffer() called:", {
+        timestamp: new Date().toISOString(),
+        storeId: this.localStoreId,
+        offerId: this.localOfferId
+      });
+
       const offer = await PersonalOfferService.getOfferV2(
         this.localStoreId,
         this.localOfferId
       );
 
       if (isNullOrEmpty(offer)) {
+        console.log("[NsProductOffer] Offer not found in API response");
         this.offerNotFound = true;
         return;
       }
@@ -750,6 +792,20 @@ export default {
 
     checkProductsHaveData: debounce(function(dataAvailable) {
       const products = Object.values(this.products);
+      const productsWithData = products.filter(p => !isNullOrEmpty(p.data));
+      const productsWithAvailability = products.filter(
+        p => !isNullOrEmpty(p.availability)
+      );
+
+      console.log("[NsProductOffer] checkProductsHaveData:", {
+        timestamp: new Date().toISOString(),
+        totalProducts: products.length,
+        productsWithData: productsWithData.length,
+        productsWithAvailability: productsWithAvailability.length,
+        dataAvailable: dataAvailable,
+        productSkus: products.map(p => p.sku)
+      });
+
       if (products.every(product => !isNullOrEmpty(product.availability))) {
         this.someProductsValid = products.some(
           product =>
@@ -762,8 +818,13 @@ export default {
           dataAvailable &&
           products.every(product => isNullOrEmpty(product.data))
         ) {
+          console.log(
+            "[NsProductOffer] Offer not found - all products have empty data"
+          );
           this.offerNotFound = true;
         }
+      } else {
+        console.log("[NsProductOffer] Some products missing availability data");
       }
     }, 250),
 

package/docs/CHANGELOG.md

@@ -1 +1 @@
-# [3.20.0](https://code.tls.nuskin.io/ns-am/ux/product-components/compare/v3.19.1...v3.20.0) (2026-02-17)
+## [3.20.1-it-17535.1](https://code.tls.nuskin.io/ns-am/ux/product-components/compare/v3.20.0...v3.20.1-it-17535.1) (2026-03-20)

package/package.json

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

package/services/NsProductAppService.js

@@ -13,6 +13,82 @@ import debounce from "lodash/debounce";
 const fallbackImagePath =
   "etc/designs/hello/packaged/img/product-basic__fallback-image.svg";
 
+/**
+ * Utility to detect browser type
+ */
+const getBrowserInfo = () => {
+  // Check if running in browser environment
+  if (typeof navigator === "undefined" || !navigator.userAgent) {
+    return {
+      userAgent: "",
+      isInstagram: false,
+      isFacebook: false,
+      isTwitter: false,
+      isLinkedIn: false,
+      isTikTok: false,
+      isInAppBrowser: false
+    };
+  }
+
+  const ua = navigator.userAgent || "";
+  return {
+    userAgent: ua,
+    isInstagram: ua.includes("Instagram"),
+    isFacebook:
+      ua.includes("FBAN") || ua.includes("FBAV") || ua.includes("FB_IAB"),
+    isTwitter: ua.includes("Twitter"),
+    isLinkedIn: ua.includes("LinkedInApp"),
+    isTikTok: ua.includes("TikTok"),
+    isInAppBrowser:
+      ua.includes("Instagram") ||
+      ua.includes("FBAN") ||
+      ua.includes("FBAV") ||
+      ua.includes("FB_IAB") ||
+      ua.includes("Twitter") ||
+      ua.includes("LinkedInApp")
+  };
+};
+
+/**
+ * Log to console and send to analytics/monitoring
+ */
+const logProductComponentEvent = (eventName, data) => {
+  // Check if running in browser environment
+  if (typeof window === "undefined" || typeof document === "undefined") {
+    return null;
+  }
+
+  const browserInfo = getBrowserInfo();
+  const logData = {
+    timestamp: new Date().toISOString(),
+    event: eventName,
+    component: "NsProductAppService",
+    url: window.location?.href || "",
+    referrer: document.referrer || "",
+    visibilityState: document.visibilityState || "visible",
+    ...browserInfo,
+    ...data
+  };
+
+  // Log to console for debugging
+  console.log(`[ProductComponents] ${eventName}:`, logData);
+
+  // Send to analytics if available (customize based on your analytics setup)
+  if (window.dataLayer) {
+    window.dataLayer.push({
+      event: "product_component_event",
+      ...logData
+    });
+  }
+
+  // Send to custom logging endpoint if available
+  if (window.nsLogger && typeof window.nsLogger.log === "function") {
+    window.nsLogger.log(logData);
+  }
+
+  return logData;
+};
+
 let NsProductAppService = Vue.prototype.$NsProductAppService;
 if (!NsProductAppService) {
   const newEl = document.createElement("div");
@@ -25,7 +101,8 @@ if (!NsProductAppService) {
       return {
         runConfig: {},
         runConfigInterval: null,
-        runConfigTries: 3,
+        runConfigTries: 10,
+        initialRunConfigTries: 10,
         locale: "",
         marketConfig: {},
         awsUrl: "",
@@ -34,7 +111,12 @@ if (!NsProductAppService) {
         showWholeSalePricing: false,
         loadingConfig: true,
         translations: {},
-        loadingTranslations: true
+        loadingTranslations: true,
+        configLoadedSuccessfully: false,
+        initStartTime: Date.now(),
+        configLoadAttempts: 0,
+        visibilityChangeTriggered: false,
+        pageShowTriggered: false
       };
     },
     computed: {
@@ -43,21 +125,139 @@ if (!NsProductAppService) {
       }
     },
     async mounted() {
+      // Log initial state using modern Performance API
+      let pageLoadTime = 0;
+      if (typeof performance !== "undefined") {
+        // Use modern performance.now() which gives time since page load
+        pageLoadTime = Math.round(performance.now());
+      }
+
+      logProductComponentEvent("service_mounted", {
+        initialVisibilityState:
+          typeof document !== "undefined"
+            ? document.visibilityState
+            : "visible",
+        pageLoadTime
+      });
+
       await this.setConfig();
-      this.runConfigInterval = setInterval(async () => {
-        if (this.runConfigTries <= 0) {
-          clearInterval(this.runConfigInterval);
-          this.runConfigTries = 0;
-        } else {
-          await this.checkConfig();
-          this.runConfigTries--;
+      this.startConfigRetryInterval();
+
+      // Handle Instagram and other in-app browsers that load pages in hidden state
+      // Re-initialize when page becomes visible
+      this.handleVisibilityChange = async () => {
+        const previousState = this.visibilityChangeTriggered;
+        this.visibilityChangeTriggered = true;
+
+        const visibilityState =
+          typeof document !== "undefined" && document.visibilityState
+            ? document.visibilityState
+            : "visible";
+
+        logProductComponentEvent("visibility_changed", {
+          visibilityState,
+          configLoadedSuccessfully: this.configLoadedSuccessfully,
+          firstVisibilityChange: !previousState,
+          retryAttemptsRemaining: this.runConfigTries
+        });
+
+        if (visibilityState === "visible" && !this.configLoadedSuccessfully) {
+          logProductComponentEvent("visibility_retry_triggered", {
+            reason: "page_became_visible",
+            attemptsUsed: this.initialRunConfigTries - this.runConfigTries
+          });
+
+          await this.setConfig();
+          if (!this.configLoadedSuccessfully) {
+            this.startConfigRetryInterval();
+          }
         }
-      }, 350);
+      };
+
+      if (typeof document !== "undefined") {
+        document.addEventListener(
+          "visibilitychange",
+          this.handleVisibilityChange
+        );
+      }
+
+      // Handle page restoration from bfcache (back/forward cache)
+      this.handlePageShow = async event => {
+        this.pageShowTriggered = true;
+
+        logProductComponentEvent("page_show_event", {
+          persisted: event.persisted,
+          configLoadedSuccessfully: this.configLoadedSuccessfully
+        });
+
+        if (event.persisted && !this.configLoadedSuccessfully) {
+          logProductComponentEvent("pageshow_retry_triggered", {
+            reason: "bfcache_restore"
+          });
+
+          await this.setConfig();
+          if (!this.configLoadedSuccessfully) {
+            this.startConfigRetryInterval();
+          }
+        }
+      };
+
+      if (typeof window !== "undefined") {
+        window.addEventListener("pageshow", this.handlePageShow);
+      }
     },
     beforeDestroy() {
-      clearInterval(this.runConfigInterval);
+      this.clearConfigRetryInterval();
+      if (this.handleVisibilityChange && typeof document !== "undefined") {
+        document.removeEventListener(
+          "visibilitychange",
+          this.handleVisibilityChange
+        );
+      }
+      if (this.handlePageShow && typeof window !== "undefined") {
+        window.removeEventListener("pageshow", this.handlePageShow);
+      }
     },
     methods: {
+      /**
+       * Start the configuration retry interval
+       */
+      startConfigRetryInterval() {
+        this.clearConfigRetryInterval();
+
+        logProductComponentEvent("retry_interval_started", {
+          retriesRemaining: this.runConfigTries,
+          configLoadedSuccessfully: this.configLoadedSuccessfully
+        });
+
+        this.runConfigInterval = setInterval(async () => {
+          if (this.runConfigTries <= 0 || this.configLoadedSuccessfully) {
+            if (this.runConfigTries <= 0 && !this.configLoadedSuccessfully) {
+              logProductComponentEvent("config_load_failed", {
+                reason: "max_retries_exceeded",
+                totalAttempts: this.configLoadAttempts,
+                timeSinceInit: Date.now() - this.initStartTime,
+                finalVisibilityState: document.visibilityState
+              });
+            }
+            this.clearConfigRetryInterval();
+          } else {
+            await this.checkConfig();
+            this.runConfigTries--;
+          }
+        }, 350);
+      },
+
+      /**
+       * Clear the configuration retry interval
+       */
+      clearConfigRetryInterval() {
+        if (this.runConfigInterval) {
+          clearInterval(this.runConfigInterval);
+          this.runConfigInterval = null;
+        }
+      },
+
       /**
        * Gets the full content path for an image or content src
        */
@@ -85,10 +285,22 @@ if (!NsProductAppService) {
        */
       async setConfig(runConfig) {
         this.loadingConfig = true;
+        this.configLoadAttempts++;
+
+        const attemptStartTime = Date.now();
 
         runConfig = runConfig || RunConfigService.getRunConfig() || {};
         if (!runConfig.language || !runConfig.country) {
           // the runconfig isn't ready yet
+          logProductComponentEvent("config_not_ready", {
+            attempt: this.configLoadAttempts,
+            hasLanguage: !!runConfig.language,
+            hasCountry: !!runConfig.country,
+            runConfigKeys: Object.keys(runConfig),
+            timeSinceInit: Date.now() - this.initStartTime
+          });
+
+          this.loadingConfig = false;
           return;
         }
 
@@ -115,6 +327,26 @@ if (!NsProductAppService) {
         };
 
         this.loadingConfig = false;
+        this.configLoadedSuccessfully = true;
+
+        const loadTime = Date.now() - attemptStartTime;
+        const totalTime = Date.now() - this.initStartTime;
+
+        // Log successful configuration
+        logProductComponentEvent("config_loaded_successfully", {
+          attempt: this.configLoadAttempts,
+          loadTime: loadTime,
+          totalTime: totalTime,
+          retriesUsed: this.initialRunConfigTries - this.runConfigTries,
+          locale: this.locale,
+          hasMarketConfig: !!this.marketConfig,
+          visibilityChangeWasNeeded: this.visibilityChangeTriggered,
+          pageShowWasNeeded: this.pageShowTriggered
+        });
+
+        // Stop retry interval once config is successfully loaded
+        this.clearConfigRetryInterval();
+
         this.$emit("config-changed", configData);
       },