@scayle/storefront-product-detail 1.4.1 → 1.5.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @scayle/storefront-product-detail
 
+## 1.5.0
+
+### Minor Changes
+
+- Added `useRecentlyViewedProducts` composable. This composable tracks a short history of products a customer has previously viewed using local storage. It maintains up to 10 recently viewed products and provides methods to add new products and fetch their full details.
+
+  Example usage:
+
+  ```ts
+  import { useRecentlyViewedProducts } from "#storefront-product-detail/composables";
+
+  const { products, addProduct, loadMissingProducts } =
+    useRecentlyViewedProducts();
+
+  onBeforeMount(async () => {
+    addProductId(1234);
+    await loadMissingProducts();
+  });
+  ```
+
+## 1.4.2
+
+### Patch Changes
+
+- Fixed path resolution issue for RPC methods.
+
 ## 1.4.1
 
 ### Patch Changes
@@ -23,46 +49,44 @@
 
   ```ts
   useProductSeoData({
-    name: 'Name',
-    brand: 'Brand',
-    productDescription: 'Description',
+    name: "Name",
+    brand: "Brand",
+    productDescription: "Description",
     variants: variants.value.map((variant) => {
       return generateProductSchema({
-        productName: 'Name',
+        productName: "Name",
         variant,
         url: `${$config.public.baseUrl}${route.fullPath}`,
         size,
-      })
+      });
     }),
     images: images.value,
     productId: product.value?.id || 0,
     color: formatColors(colors.value),
-    variesBy: variants.value.length > 1
-      ? ['https://schema.org/size']
-      : undefined,
-  })
+    variesBy:
+      variants.value.length > 1 ? ["https://schema.org/size"] : undefined,
+  });
 
   // Will become
 
   useProductSeoData({
-    name: 'Name',
-    brand: 'Brand',
-    productDescription: 'Description',
+    name: "Name",
+    brand: "Brand",
+    productDescription: "Description",
     variants: variants.value.map((variant) => {
       return generateProductSchema({
-        productName: 'Name',
+        productName: "Name",
         variant,
         url: `${$config.public.baseUrl}${route.fullPath}`,
         size,
         images: images.value[0],
-      })
+      });
     }),
     productId: product.value?.id || 0,
     color: formatColors(colors.value),
-    variesBy: variants.value.length > 1
-      ? ['https://schema.org/size']
-      : undefined,
-  })
+    variesBy:
+      variants.value.length > 1 ? ["https://schema.org/size"] : undefined,
+  });
   ```
 
 ## 1.2.0

package/dist/module.json

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

package/dist/module.mjs

@@ -1,7 +1,7 @@
-import { defineNuxtModule, createResolver, resolvePath, addImportsDir } from '@nuxt/kit';
+import { defineNuxtModule, createResolver, addImportsDir } from '@nuxt/kit';
 
 const PACKAGE_NAME = "@scayle/storefront-product-detail";
-const PACKAGE_VERSION = "1.4.1";
+const PACKAGE_VERSION = "1.5.0";
 const module = defineNuxtModule({
   meta: {
     name: PACKAGE_NAME,
@@ -14,7 +14,7 @@ const module = defineNuxtModule({
   },
   defaults: {},
   setup(options, nuxt) {
-    const { resolve } = createResolver(import.meta.url);
+    const { resolve, resolvePath } = createResolver(import.meta.url);
     nuxt.options.alias["#storefront-product-detail"] = resolve("./runtime");
     nuxt.options.build.transpile.push("#storefront-product-detail/runtime");
     nuxt.hook("storefront:custom-rpc:extend", async (customRpcs) => {
@@ -23,6 +23,11 @@ const module = defineNuxtModule({
         names: ["getAllShopProductsForId"]
       });
     });
+    nuxt.options.optimization.keyedComposables.push({
+      name: "useAllShopProductsForId",
+      argumentLength: 2,
+      source: "#storefront-product-detail"
+    });
     if (options.autoImports) {
       addImportsDir(resolve("./runtime/composables"));
       addImportsDir(resolve("./runtime/utils"));

package/dist/runtime/composables/index.d.ts

@@ -1,2 +1,3 @@
 export * from './useProductSeoData.js';
 export * from './useAllShopProductsForId.js';
+export * from './useRecentlyViewedProducts.js';

package/dist/runtime/composables/index.js

@@ -1,2 +1,3 @@
 export * from "./useProductSeoData.js";
 export * from "./useAllShopProductsForId.js";
+export * from "./useRecentlyViewedProducts.js";

package/dist/runtime/composables/useAllShopProductsForId.d.ts

@@ -1,4 +1,7 @@
-import type { KeysOf, NormalizedRpcResponse, UseRpcReturn } from '@scayle/storefront-nuxt/composables';
+import type { KeysOf, NormalizedRpcResponse, UseRpcOptions, UseRpcReturn } from '@scayle/storefront-nuxt/composables';
 import type { MaybeRefOrGetter } from 'vue';
 import type { RpcMethodParameters } from '@scayle/storefront-nuxt';
-export declare function useAllShopProductsById<DataT = NormalizedRpcResponse<'getAllShopProductsForId'>, PickKeys extends KeysOf<DataT> = KeysOf<DataT>, DefaultT = null>(params: MaybeRefOrGetter<RpcMethodParameters<'getAllShopProductsForId'>>, key?: string): UseRpcReturn<'getAllShopProductsForId', DataT, PickKeys, DefaultT>;
+export declare function useAllShopProductsForId<DataT = NormalizedRpcResponse<'getAllShopProductsForId'>, PickKeys extends KeysOf<DataT> = KeysOf<DataT>, DefaultT = null>({ params, options, }?: Partial<{
+    params: MaybeRefOrGetter<RpcMethodParameters<'getAllShopProductsForId'>>;
+    options: UseRpcOptions<'getAllShopProductsForId', DataT, PickKeys, DefaultT>;
+}>, key?: string): UseRpcReturn<'getAllShopProductsForId', DataT, PickKeys, DefaultT>;

package/dist/runtime/composables/useAllShopProductsForId.js

@@ -1,8 +1,12 @@
 import { useRpc } from "@scayle/storefront-nuxt/composables";
-export function useAllShopProductsById(params, key = "useAllShopProductsById") {
+export function useAllShopProductsForId({
+  params,
+  options
+} = {}, key = "useAllShopProductsById") {
   return useRpc(
     "getAllShopProductsForId",
     key,
-    params
+    params,
+    options
   );
 }

package/dist/runtime/composables/useRecentlyViewedProducts.d.ts

@@ -0,0 +1,50 @@
+import type { Product, ProductWith } from '@scayle/storefront-nuxt';
+import type { AsyncDataRequestStatus } from 'nuxt/app';
+import type { Ref } from 'vue';
+interface UseRecentlyViewedProductsReturn {
+    /** A reactive array of the fetched, full Product objects. */
+    products: Ref<Product[]>;
+    /** A reactive flag indicating if the product data is being fetched. */
+    loading: Ref<boolean>;
+    /** A reactive container for any errors that occur during fetching. */
+    error: Ref<Error | undefined>;
+    /** A string indicating the status of the data request */
+    status: Ref<AsyncDataRequestStatus>;
+    /**
+     * Adds a product id to the list of recently viewed products and persists it to local storage.
+     *
+     * Because this function uses local storage, it is not available on the server.
+     *
+     * @throws Error if the function is called on the server.
+     *
+     * @param productId - The id of the product to add to the list of recently viewed products.
+     */
+    addProductId: (productId: number) => void;
+    /**
+     * Loads products based on the product ids previously added.
+     * Initially all products within the persisted list are loaded. Subsequent calls only load products that are not already loaded.
+     *
+     * Because this function uses local storage, it is not available on the server.
+     *
+     * @throws Error if the function is called on the server.
+     *
+     * @returns A promise that resolves when the products have been loaded.
+     */
+    loadMissingProducts: () => Promise<void>;
+}
+/**
+ * This composable can be used to track a short history of products a customer has previously viewed using local storage.
+ * It maintains up to 10 recently viewed products and provides methods to add new products and fetch their full details.
+ *
+ * @param options An object containing parameters and options for the loading the products.
+ * @param options.with The fields to include in the response.
+ * @param options.pricePromotionKey The price promotion key.
+ *
+ * @returns An object containing the recently viewed products list, loading state, error and status information.
+ */
+interface UseRecentlyViewedProductsOptions {
+    pricePromotionKey?: string;
+    with?: ProductWith;
+}
+export declare function useRecentlyViewedProducts(options?: UseRecentlyViewedProductsOptions): UseRecentlyViewedProductsReturn;
+export {};

package/dist/runtime/composables/useRecentlyViewedProducts.js

@@ -0,0 +1,89 @@
+import { useCurrentShop, useRpcCall } from "@scayle/storefront-nuxt/composables";
+import { useLocalStorage } from "@vueuse/core";
+import { useState } from "nuxt/app";
+export function useRecentlyViewedProducts(options) {
+  const shop = useCurrentShop();
+  const recentlyViewedProductsIds = useLocalStorage(
+    `${shop.value.shopId}-recently-viewed-products`,
+    []
+  );
+  const fetchProductsRpc = useRpcCall("getProductsByIds");
+  const loading = useState("recently-viewed-products-loading", () => false);
+  const error = useState("recently-viewed-products-error");
+  const status = useState(
+    "recently-viewed-products-status",
+    () => "idle"
+  );
+  const products = useState("recently-viewed-products", () => []);
+  const addProductId = (productId) => {
+    if (import.meta.server) {
+      throw new Error(
+        "useRecentlyViewedProducts uses local storage. addProductId is therefore not available on the server."
+      );
+    }
+    const productIds = [...recentlyViewedProductsIds.value];
+    if (productIds.includes(productId)) {
+      productIds.splice(productIds.indexOf(productId), 1);
+    }
+    productIds.unshift(productId);
+    if (productIds.length > 10) {
+      productIds.pop();
+    }
+    recentlyViewedProductsIds.value = productIds;
+  };
+  const loadMissingProducts = async () => {
+    if (import.meta.server) {
+      throw new Error(
+        "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, 10);
+      status.value = "success";
+    } catch (e) {
+      error.value = e;
+      status.value = "error";
+    } finally {
+      loading.value = false;
+    }
+  };
+  return {
+    addProductId,
+    loadMissingProducts,
+    products,
+    loading,
+    error,
+    status
+  };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scayle/storefront-product-detail",
-  "version": "1.4.1",
+  "version": "1.5.0",
   "description": "Collection of essential composables and utilities to work with product detail",
   "author": "SCAYLE Commerce Engine",
   "license": "MIT",
@@ -27,23 +27,6 @@
   "imports": {
     "#storefront-product-detail": "./dist/runtime/index.js"
   },
-  "scripts": {
-    "build": "nuxt-module-build build",
-    "dev": "nuxi dev playground",
-    "dev:build": "nuxi build playground",
-    "prep": "nuxt-module-build prepare && nuxi prepare playground",
-    "lint": "eslint .",
-    "lint:ci": "eslint . --format gitlab",
-    "lint:fix": "eslint . --fix",
-    "format": "dprint check",
-    "format:fix": "dprint fmt",
-    "test": "vitest --run",
-    "test:watch": "vitest",
-    "test:ci": "vitest --run --coverage --reporter=default --reporter=junit --outputFile=./coverage/junit.xml",
-    "typecheck": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit",
-    "package:lint": "publint",
-    "verify-packaging": "attw --pack . --profile esm-only"
-  },
   "peerDependencies": {
     "@nuxt/kit": ">=3.13.0",
     "@scayle/storefront-nuxt": "^8.0.0",
@@ -54,28 +37,46 @@
     "vue": "^3.5.13"
   },
   "devDependencies": {
-    "@arethetypeswrong/cli": "0.18.1",
+    "@arethetypeswrong/cli": "0.18.2",
     "@nuxt/kit": "3.16.2",
     "@nuxt/module-builder": "1.0.1",
     "@nuxt/schema": "3.16.2",
-    "@nuxt/test-utils": "3.18.0",
-    "@scayle/eslint-config-storefront": "4.5.2",
-    "@scayle/storefront-nuxt": "8.27.0",
-    "@types/node": "22.15.21",
+    "@nuxt/test-utils": "3.19.2",
+    "@scayle/eslint-config-storefront": "4.5.12",
+    "@scayle/storefront-nuxt": "8.32.0",
+    "@types/node": "22.15.34",
+    "@vitest/coverage-v8": "3.2.4",
     "@vue/test-utils": "2.4.6",
-    "@vueuse/core": "13.2.0",
-    "dprint": "0.50.0",
-    "eslint-formatter-gitlab": "6.0.0",
-    "eslint": "9.27.0",
-    "happy-dom": "17.4.7",
+    "@vueuse/core": "13.4.0",
+    "dprint": "0.50.1",
+    "eslint-formatter-gitlab": "6.0.1",
+    "eslint": "9.30.0",
+    "happy-dom": "18.0.1",
     "nuxt": "3.16.2",
-    "publint": "0.2.12",
+    "publint": "0.3.12",
     "schema-dts": "1.1.5",
     "typescript": "5.8.3",
     "unbuild": "3.5.0",
-    "vitest": "3.1.4",
+    "vitest": "3.2.4",
     "vue-router": "4.5.1",
     "vue-tsc": "2.2.10",
-    "vue": "3.5.14"
+    "vue": "3.5.17"
+  },
+  "scripts": {
+    "build": "nuxt-module-build build",
+    "dev": "nuxt dev playground",
+    "dev:build": "nuxt build playground",
+    "prep": "nuxt-module-build prepare && nuxt prepare playground",
+    "lint": "eslint .",
+    "lint:ci": "eslint . --format gitlab",
+    "lint:fix": "eslint . --fix",
+    "format": "dprint check",
+    "format:fix": "dprint fmt",
+    "test": "vitest --run",
+    "test:watch": "vitest",
+    "test:ci": "vitest --run --coverage --reporter=default --reporter=junit --outputFile=./coverage/junit.xml",
+    "typecheck": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit",
+    "package:lint": "publint",
+    "verify-packaging": "attw --pack . --profile esm-only"
   }
-}
+}