fix: setCurrentFilters function (#1338)

* fix: setCurrentFilters function

* chore: improve typing to get values from the schema

* chore: improve typings to support proper filter values

---------

Co-authored-by: patzick <13100280+patzick@users.noreply.github.com>

.changeset/smart-mangos-notice.md

@@ -0,0 +1,39 @@
+---
+"@shopware-pwa/composables-next": minor
+---
+
+# Fix setCurrentFilters
+
+Body **before** when you use setCurrentFilters:
+
+```
+{
+  "limit":10,
+  "search":"",
+  "p":"1",
+  "navigationId":"018db20234207be8948e3a4b46501435",
+  "manufacturer":"",
+  "price": {"min":0,"max":0},
+  "rating": null,
+  "shipping-free":false,
+  "properties":"",
+  "code":"manufacturer",  // 👈 Not like this
+  "value":"018d35f5b5757076adea38044bb96937" // 👈 Not like this
+}
+```
+
+Body **after** the code changes with fixed setCurrentFilters:
+
+```
+{
+  "limit":10,
+  "search":"",
+  "p":"1",
+  "navigationId":"018db20234207be8948e3a4b46501435",
+  "manufacturer":"018d35f5b5757076adea38044bb96937",  // 👈 where the filter value should go
+  "price": {"min":0,"max":0},
+  "rating": null,
+  "shipping-free":false,
+  "properties":"",
+}
+```

packages/composables/src/useListing/useListing.test.ts

@@ -79,17 +79,16 @@ describe("useListing", () => {
     );
 
     injections.apiClient.invoke.mockResolvedValue({ data: {} });
-    vm.setCurrentFilters({ code: "test", value: "test" });
+    vm.setCurrentFilters([{ code: "shipping-free", value: true }]);
 
     expect(injections.apiClient.invoke).toHaveBeenCalledWith(
       expect.stringContaining("readProductListing"),
       expect.objectContaining({
         body: {
-          code: "test",
           manufacturer: undefined,
           properties: undefined,
           query: undefined,
-          value: "test",
+          "shipping-free": true,
         },
         headers: {
           "sw-include-seo-urls": true,

packages/composables/src/useListing/useListing.ts

@@ -36,6 +36,14 @@ function merge<T extends { [key in keyof T]: unknown }>(
 
 export type ListingType = "productSearchListing" | "categoryListing";
 
+export type ShortcutFilterParam<
+  T extends
+    keyof Schemas["ProductListingCriteria"] = keyof Schemas["ProductListingCriteria"],
+> = {
+  code: T;
+  value: Schemas["ProductListingCriteria"][T];
+};
+
 export type UseListingReturn = {
   /**
    * Listing that is currently set
@@ -146,7 +154,7 @@ export type UseListingReturn = {
    * @param filters
    * @returns
    */
-  setCurrentFilters(filters: { code: string; value: unknown }): Promise<void>;
+  setCurrentFilters(filters: ShortcutFilterParam[]): Promise<void>;
   /**
    * Indicates if the listing is being fetched
    */
@@ -490,20 +498,33 @@ export function createListingComposable({
       ?.currentFilters as Schemas["ProductListingResult"]["currentFilters"];
   });
 
-  const setCurrentFilters = (filter: { code: string; value: unknown }) => {
-    const appliedFilters: operations["searchPage post /search"]["body"] =
-      Object.assign({}, getCurrentFilters.value, filter, {
+  // this function sets the current filters as shortcut filters @see https://shopware.stoplight.io/docs/store-api/b56ebe18277c6-searching-for-products#product-listing-criteria
+  // the downside is that this does not filter the aggregations, so the aggregations are not reduced by the filter (!)
+  const setCurrentFilters = (filters: ShortcutFilterParam[]) => {
+    const newFilters = {};
+    for (const filter of filters) {
+      Object.assign(newFilters, { [filter.code]: filter.value });
+    }
+
+    const appliedFilters = Object.assign(
+      {},
+      getCurrentFilters.value,
+      {
         query: getCurrentFilters.value?.search,
         manufacturer: getCurrentFilters.value?.manufacturer?.join("|"),
         properties: getCurrentFilters.value?.properties?.join("|"),
-      });
+      },
+      { ...newFilters },
+    );
+
     if (_storeAppliedListing.value) {
       _storeAppliedListing.value.currentFilters = {
         ...appliedFilters,
-        manufacturer: appliedFilters.manufacturer?.split("|") || [],
-        properties: appliedFilters.properties?.split("|") || [],
-      } as unknown as Schemas["ProductListingResult"]["currentFilters"];
+        manufacturer: appliedFilters.manufacturer?.split("|"),
+        properties: appliedFilters.properties?.split("|"),
+      };
     }
+
     return search(appliedFilters);
   };