@scayle/storefront-product-listing 1.6.3 → 1.8.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @scayle/storefront-product-listing
 
+## 1.8.0
+
+### Minor Changes
+
+- Enhanced `useAppliedFilters` to support the `minReduction` and `maxReduction` filter names, enabling proper handling of the `max_savings_percentage` filter.
+
+## 1.7.0
+
+### Minor Changes
+
+- Export `defaultSortingOptions` and `DEFAULT_SORTING_KEY` from the `useProductListSort` composable.
+  This change enhances consumer flexibility, allowing for more granular adjustments to custom sorting options.
+
 ## 1.6.3
 
 ### Patch Changes

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@scayle/storefront-product-listing",
   "configKey": "product-listing",
-  "version": "1.6.3",
+  "version": "1.8.0",
   "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-listing";
-const PACKAGE_VERSION = "1.6.3";
+const PACKAGE_VERSION = "1.8.0";
 const module = defineNuxtModule({
   meta: {
     name: PACKAGE_NAME,

package/dist/runtime/composables/useAppliedFilters.js

@@ -10,6 +10,9 @@ export function useAppliedFilters(route, { filtersPrefix } = { filtersPrefix: "f
     if (appliedFilter.value.minPrice !== void 0 || appliedFilter.value.maxPrice !== void 0) {
       count += 1;
     }
+    if (appliedFilter.value.minReduction !== void 0 || appliedFilter.value.maxReduction !== void 0) {
+      count += 1;
+    }
     return count;
   });
   const appliedAttributeValues = computed(

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

@@ -20,6 +20,38 @@ export interface ProductListSortOptions {
     sortingOptions?: SelectedSort[];
     defaultSortingKey?: string;
 }
+export declare const defaultSortingOptions: ({
+    key: string;
+    sortingKey: string;
+    direction: "desc";
+    label: string;
+    by?: undefined;
+} | {
+    key: string;
+    by: "new";
+    direction: "desc";
+    label: string;
+    sortingKey?: undefined;
+} | {
+    key: string;
+    by: "price";
+    direction: "desc";
+    label: string;
+    sortingKey?: undefined;
+} | {
+    key: string;
+    by: "price";
+    direction: "asc";
+    label: string;
+    sortingKey?: undefined;
+} | {
+    key: string;
+    by: "reduction";
+    direction: "desc";
+    label: string;
+    sortingKey?: undefined;
+})[];
+export declare const DEFAULT_SORTING_KEY = "top_seller";
 /**
  * Custom composable to handle product list sorting.
  *
@@ -30,5 +62,5 @@ export interface ProductListSortOptions {
  *
  * @returns Computed properties and methods related to sorting
  */
-export declare function useProductListSort(route: RouteLocationNormalizedLoadedGeneric, { sortingOptions, defaultSortingKey }?: ProductListSortOptions): UseProductListSortReturn;
+export declare function useProductListSort(route: RouteLocationNormalizedLoadedGeneric, { sortingOptions, defaultSortingKey, }?: ProductListSortOptions): UseProductListSortReturn;
 export {};

package/dist/runtime/composables/useProductListSort.js

@@ -1,44 +1,46 @@
 import { APISortOption, APISortOrder } from "@scayle/storefront-nuxt";
 import { computed } from "vue";
-export function useProductListSort(route, { sortingOptions, defaultSortingKey } = {
-  sortingOptions: [
-    {
-      key: "top_seller",
-      sortingKey: "scayle:v1:recommended",
-      direction: APISortOrder.DESCENDING,
-      label: "sorting_select.top_seller"
-    },
-    {
-      key: "date_newest",
-      by: APISortOption.DATE_ADDED,
-      direction: APISortOrder.DESCENDING,
-      label: "sorting_select.date_newest"
-    },
-    {
-      key: "price_desc",
-      by: APISortOption.PRICE,
-      direction: APISortOrder.DESCENDING,
-      label: "sorting_select.price_desc"
-    },
-    {
-      key: "price_asc",
-      by: APISortOption.PRICE,
-      direction: APISortOrder.ASCENDING,
-      label: "sorting_select.price_asc"
-    },
-    {
-      key: "reduction_desc",
-      by: APISortOption.REDUCTION,
-      direction: APISortOrder.DESCENDING,
-      label: "sorting_select.reduction_desc"
-    }
-  ],
-  defaultSortingKey: "top_seller"
-}) {
+export const defaultSortingOptions = [
+  {
+    key: "top_seller",
+    sortingKey: "scayle:v1:recommended",
+    direction: APISortOrder.DESCENDING,
+    label: "sorting_select.top_seller"
+  },
+  {
+    key: "date_newest",
+    by: APISortOption.DATE_ADDED,
+    direction: APISortOrder.DESCENDING,
+    label: "sorting_select.date_newest"
+  },
+  {
+    key: "price_desc",
+    by: APISortOption.PRICE,
+    direction: APISortOrder.DESCENDING,
+    label: "sorting_select.price_desc"
+  },
+  {
+    key: "price_asc",
+    by: APISortOption.PRICE,
+    direction: APISortOrder.ASCENDING,
+    label: "sorting_select.price_asc"
+  },
+  {
+    key: "reduction_desc",
+    by: APISortOption.REDUCTION,
+    direction: APISortOrder.DESCENDING,
+    label: "sorting_select.reduction_desc"
+  }
+];
+export const DEFAULT_SORTING_KEY = "top_seller";
+export function useProductListSort(route, {
+  sortingOptions = defaultSortingOptions,
+  defaultSortingKey = DEFAULT_SORTING_KEY
+} = {}) {
   const selectedSort = computed(() => {
-    const sort = route.query.sort && sortingOptions?.find((option) => option.key === route.query.sort);
+    const sort = sortingOptions.find(({ key }) => key === route.query.sort);
     if (!sort) {
-      return sortingOptions?.find((option) => option.key === defaultSortingKey);
+      return sortingOptions?.find(({ key }) => key === defaultSortingKey);
     }
     return sort;
   });

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

@@ -35,6 +35,16 @@ export declare const createNewAttributeQuery: (route: RouteLocationNormalizedLoa
  * @returns {LocationQuery} A new query object with the updated price filter.
  */
 export declare const createNewPriceQuery: (route: RouteLocationNormalizedLoadedGeneric, appliedFilter: ProductSearchQuery, prices: RangeTuple) => LocationQuery;
+/**
+ * Creates a new reduction filter query object.
+ *
+ * @param route - The Vue Router route object.
+ * @param appliedFilter - The currently applied filter.
+ * @param reductions - The new reduction range.
+ *
+ * @returns A new query object with the updated reduction filter.
+ */
+export declare const createNewReductionQuery: (route: RouteLocationNormalizedLoadedGeneric, appliedFilter: ProductSearchQuery, reductions: RangeTuple) => LocationQuery;
 /**
  * Creates a new boolean attribute filter query object.
  *

package/dist/runtime/utils/filters.js

@@ -16,6 +16,8 @@ export const parseFilterDataFromRoute = (route, filtersPrefix) => {
     switch (filterName) {
       case "minPrice":
       case "maxPrice":
+      case "minReduction":
+      case "maxReduction":
         if (isNaN(Number(value))) {
           return;
         }
@@ -85,6 +87,16 @@ export const createNewPriceQuery = (route, appliedFilter, prices) => {
   }
   return { ...query, ...priceFilterQuery };
 };
+export const createNewReductionQuery = (route, appliedFilter, reductions) => {
+  const priceFilterQuery = {};
+  if (appliedFilter.minReduction !== reductions[0]) {
+    priceFilterQuery["filters[minReduction]"] = reductions[0].toString();
+  }
+  if (appliedFilter.maxReduction !== reductions[1]) {
+    priceFilterQuery["filters[maxReduction]"] = reductions[1].toString();
+  }
+  return { ...route.query, ...priceFilterQuery };
+};
 export const createNewBoolAttributeQuery = (route, appliedFilter, { slug, value }) => {
   const booleanFilterQuery = {};
   const query = { ...route.query };
@@ -114,10 +126,23 @@ const getClearedPriceQuery = (route) => {
   }
   return query;
 };
+const getClearedReductionQuery = (route) => {
+  const query = { ...route.query };
+  if (query["filters[maxReduction]"]) {
+    delete query["filters[maxReduction]"];
+  }
+  if (query["filters[minReduction]"]) {
+    delete query["filters[minReduction]"];
+  }
+  return query;
+};
 export const getClearedFilterQueryByKey = (route, key) => {
   if (key === "prices") {
     return getClearedPriceQuery(route);
   }
+  if (key === "reductions") {
+    return getClearedReductionQuery(route);
+  }
   const query = { ...route.query };
   const filterKey = `filters[${key}]`;
   if (query[filterKey]) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scayle/storefront-product-listing",
-  "version": "1.6.3",
+  "version": "1.8.0",
   "description": "Collection of essential composables and utilities to work with product listing",
   "author": "SCAYLE Commerce Engine",
   "license": "MIT",
@@ -64,16 +64,16 @@
     "@nuxt/module-builder": "1.0.1",
     "@nuxt/schema": "3.16.2",
     "@nuxt/test-utils": "3.18.0",
-    "@scayle/eslint-config-storefront": "4.5.5",
-    "@scayle/storefront-api": "18.8.0",
-    "@scayle/storefront-nuxt": "8.28.7",
-    "@types/node": "22.15.31",
-    "@vitest/coverage-v8": "3.2.3",
+    "@scayle/eslint-config-storefront": "4.5.7",
+    "@scayle/storefront-api": "18.9.0",
+    "@scayle/storefront-nuxt": "8.30.1",
+    "@types/node": "22.15.32",
+    "@vitest/coverage-v8": "3.2.4",
     "@vue/test-utils": "2.4.6",
     "@vueuse/core": "13.3.0",
     "dprint": "0.50.0",
     "eslint-formatter-gitlab": "6.0.1",
-    "eslint": "9.28.0",
+    "eslint": "9.29.0",
     "fishery": "2.3.1",
     "happy-dom": "18.0.1",
     "nuxt": "3.16.2",
@@ -81,7 +81,7 @@
     "schema-dts": "1.1.5",
     "typescript": "5.8.3",
     "unbuild": "3.5.0",
-    "vitest": "3.2.3",
+    "vitest": "3.2.4",
     "vue-router": "4.5.1",
     "vue-tsc": "2.2.10",
     "vue": "3.5.16"