@scayle/storefront-product-detail 1.5.2 → 1.5.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @scayle/storefront-product-detail
 
+## 1.5.4
+
+### Patch Changes
+
+- Updated SCAYLE Resource Center references
+
+## 1.5.3
+
+### Patch Changes
+
+- **\[FIX\]** Added logic to prevent simultaneously loading the same products when `loadMissingProducts` from `useRecentlyViewedProducts` is called multiple times concurrently. This ensures that products are not added to the recently viewed list more than once.
+
 ## 1.5.2
 
 ### Patch Changes
@@ -173,7 +185,7 @@
 - This release introduces the `@scayle/storefront-product-detail` package, decoupling composables and utilities of the Product Detail Page (PDP) functionality from the SCAYLE Storefront Boilerplate for enhanced modularity and integration.
   This separation empowers developers with greater control over PDP updates and simplifies its integration into existing Storefront-based projects.
 
-  - [Discover more about the Product Detail Page for SCAYLE Storefront in our SCAYLE Resource Center.](https://scayle.dev/en/storefront-guide/developer-guide/features/pages/product-detail-page)
+  - [Discover more about the Product Detail Page for SCAYLE Storefront in our SCAYLE Resource Center.](https://scayle.dev/en/core-documentation/storefront-guide/storefront-application/features/product-detail-page)
 
 - This release requires `@scayle/storefront-nuxt@8.x` or higher. Support for `@scayle/storefront-nuxt@7.x` has been discontinued. Please update your dependencies accordingly. The `peerDependency` range has been updated to `^8.0.0`.
 

package/README.md

@@ -55,7 +55,7 @@ Licensed under the [MIT License](https://opensource.org/license/mit/)
 [SCAYLE](https://scayle.com) is a full-featured e-commerce software solution that comes with flexible APIs.
 Within SCAYLE, you can manage all aspects of your shop, such as products, stocks, customers, and transactions.
 
-Learn more about [SCAYLE’s architecture](https://scayle.dev/en/getting-started) and commerce modules in the Docs.
+Learn more about [SCAYLE’s architecture](https://scayle.dev/en/core-documentation/welcome-to-scayle/getting-started) and commerce modules in the Docs.
 
 ## Other channels
 

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@scayle/storefront-product-detail",
   "configKey": "product-detail",
-  "version": "1.5.2",
+  "version": "1.5.4",
   "compatibility": {
     "bridge": false,
     "nuxt": ">=3.13"

package/dist/module.mjs

@@ -1,7 +1,7 @@
 import { defineNuxtModule, createResolver, addImportsDir } from '@nuxt/kit';
 
 const PACKAGE_NAME = "@scayle/storefront-product-detail";
-const PACKAGE_VERSION = "1.5.2";
+const PACKAGE_VERSION = "1.5.4";
 const module = defineNuxtModule({
   meta: {
     name: PACKAGE_NAME,

package/dist/runtime/composables/useRecentlyViewedProducts.js

@@ -16,6 +16,10 @@ export function useRecentlyViewedProducts(options) {
     () => "idle"
   );
   const products = useState("recently-viewed-products", () => []);
+  const loadingPromise = useState(
+    "recently-viewed-products-loading-promise",
+    () => /* @__PURE__ */ new Map()
+  );
   const addProductId = (productId) => {
     if (import.meta.server) {
       throw new Error(
@@ -38,46 +42,56 @@ export function useRecentlyViewedProducts(options) {
         "useRecentlyViewedProducts uses local storage. fetchProducts is therefore not available on the server."
       );
     }
-    loading.value = true;
-    status.value = "pending";
-    try {
-      const loadedProductIds = new Set(
-        products.value.map((product) => product.id)
-      );
-      const missingProductIds = recentlyViewedProductsIds.value.filter(
-        (id) => !loadedProductIds.has(id)
-      );
-      if (missingProductIds.length > 0) {
-        const result = await fetchProductsRpc({
-          ids: missingProductIds,
-          with: options?.with,
-          pricePromotionKey: options?.pricePromotionKey
-        });
-        products.value.push(...result);
-      }
-      const sortOrderMap = new Map(
-        recentlyViewedProductsIds.value.map(
-          (id, index) => [id, index]
-        )
-      );
-      products.value = products.value.sort((a, b) => {
-        const aIndex = sortOrderMap.get(a.id);
-        const bIndex = sortOrderMap.get(b.id);
-        if (aIndex === void 0) {
-          return 1;
-        }
-        if (bIndex === void 0) {
-          return -1;
-        }
-        return aIndex - bIndex;
-      }).slice(0, maxRecentlyViewedProducts);
-      status.value = "success";
-    } catch (e) {
-      error.value = e;
-      status.value = "error";
-    } finally {
-      loading.value = false;
+    const loadedProductIds = new Set(
+      products.value.map((product) => product.id)
+    );
+    const missingProductIds = recentlyViewedProductsIds.value.filter(
+      (id) => !loadedProductIds.has(id)
+    );
+    const promiseKey = missingProductIds.join(",");
+    if (loadingPromise.value.has(promiseKey)) {
+      return loadingPromise.value.get(promiseKey);
     }
+    const load = async () => {
+      loading.value = true;
+      status.value = "pending";
+      try {
+        if (missingProductIds.length > 0) {
+          const result = await fetchProductsRpc({
+            ids: missingProductIds,
+            with: options?.with,
+            pricePromotionKey: options?.pricePromotionKey
+          });
+          products.value.push(...result);
+        }
+        const sortOrderMap = new Map(
+          recentlyViewedProductsIds.value.map(
+            (id, index) => [id, index]
+          )
+        );
+        products.value = products.value.sort((a, b) => {
+          const aIndex = sortOrderMap.get(a.id);
+          const bIndex = sortOrderMap.get(b.id);
+          if (aIndex === void 0) {
+            return 1;
+          }
+          if (bIndex === void 0) {
+            return -1;
+          }
+          return aIndex - bIndex;
+        }).slice(0, maxRecentlyViewedProducts);
+        status.value = "success";
+      } catch (e) {
+        error.value = e;
+        status.value = "error";
+      } finally {
+        loading.value = false;
+        loadingPromise.value.delete(promiseKey);
+      }
+    };
+    const promise = load();
+    loadingPromise.value.set(promiseKey, promise);
+    return promise;
   };
   return {
     addProductId,

package/dist/runtime/utils/product.d.ts

@@ -7,8 +7,8 @@ import type { AdvancedAttribute } from '@scayle/storefront-nuxt';
  * commonly used to handle product recommendations.
  *
  * More information about recommended products and attributes groups please visit our SCAYLE Resource Center:
- * @see https://scayle.dev/en/storefront-guide/developer-guide/features/product-recommendation
- * @see https://scayle.dev/en/user-guide/settings/product-structure/attribute-groups
+ * @see https://scayle.dev/en/core-documentation/storefront-guide/storefront-application/features/product-detail-page#recommendations
+ * @see https://scayle.dev/en/core-documentation/the-basics/products/attribute-groups
  *
  * @param attribute The advanced attribute containing values to extract product IDs from. This attribute is sourced from a product's advanced attributes.
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scayle/storefront-product-detail",
-  "version": "1.5.2",
+  "version": "1.5.4",
   "description": "Collection of essential composables and utilities to work with product detail",
   "author": "SCAYLE Commerce Engine",
   "license": "MIT",
@@ -37,29 +37,29 @@
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "0.18.2",
-    "@nuxt/kit": "3.19.2",
+    "@nuxt/kit": "3.19.3",
     "@nuxt/module-builder": "1.0.2",
-    "@nuxt/schema": "3.19.2",
+    "@nuxt/schema": "3.19.3",
     "@nuxt/test-utils": "3.19.2",
-    "@types/node": "22.18.3",
+    "@types/node": "22.18.11",
     "@vitest/coverage-v8": "3.2.4",
     "@vueuse/core": "13.9.0",
     "dprint": "0.50.2",
     "eslint-formatter-gitlab": "6.0.1",
-    "eslint": "9.35.0",
-    "happy-dom": "18.0.1",
-    "nuxt": "3.19.2",
-    "publint": "0.3.12",
+    "eslint": "9.37.0",
+    "happy-dom": "20.0.7",
+    "nuxt": "3.19.3",
+    "publint": "0.3.14",
     "schema-dts": "1.1.5",
-    "typescript": "5.9.2",
+    "typescript": "5.9.3",
     "unbuild": "3.6.1",
     "vitest": "3.2.4",
-    "vue-router": "4.5.1",
-    "vue-tsc": "3.0.7",
-    "vue": "3.5.21",
-    "@scayle/eslint-config-storefront": "4.7.8",
-    "@scayle/storefront-nuxt": "8.44.1",
-    "@scayle/vitest-config-storefront": "1.0.0"
+    "vue-router": "4.6.3",
+    "vue-tsc": "3.1.1",
+    "vue": "3.5.22",
+    "@scayle/eslint-config-storefront": "4.7.10",
+    "@scayle/vitest-config-storefront": "1.0.0",
+    "@scayle/storefront-nuxt": "8.45.1"
   },
   "scripts": {
     "build": "nuxt-module-build build",