feat: added Pagination for Wishlist

.changeset/light-cows-protect.md

@@ -0,0 +1,5 @@
+---
+"vue-demo-store": minor
+---
+
+Added a pagination for the order history page.

.changeset/tough-queens-swim.md

@@ -0,0 +1,6 @@
+---
+"vue-demo-store": minor
+"@shopware-pwa/composables-next": minor
+---
+
+Added a pagination for the wishlist page. I made changes to the variable name to get the proper context of it.

packages/composables/src/useCustomerOrders.ts

@@ -1,5 +1,5 @@
-import { ref } from "vue";
-import type { Ref } from "vue";
+import { ref, computed } from "vue";
+import type { Ref, ComputedRef } from "vue";
 import { useShopwareContext } from "#imports";
 import type { Schemas } from "#shopware";
 
@@ -13,11 +13,22 @@ export type UseCustomerOrdersReturn = {
    *
    * In order to change a page with additional parameters please use `loadOrders` method.
    */
-  changeCurrentPage(pageNumber: number | string): Promise<void>;
+  changeCurrentPage(
+    pageNumber: number | string,
+    limit: number | string,
+  ): Promise<void>;
   /**
    * Fetches the orders list and assigns the result to the `orders` property
    */
   loadOrders(parameters?: Schemas["Criteria"]): Promise<void>;
+  /**
+   * Current page number
+   */
+  getCurrentPage: ComputedRef<number>;
+  /**
+   * total pages count
+   */
+  getTotalPagesCount: ComputedRef<number>;
 };
 
 /**
@@ -30,21 +41,41 @@ export function useCustomerOrders(): UseCustomerOrdersReturn {
 
   const orders: Ref<Schemas["Order"][]> = ref([]);
 
+  const currentPage = ref<number>(1);
+
+  const totalOrderItemsCount: Ref<number> = ref(0);
+
+  const limit = ref<number>(15);
+
   const loadOrders = async (
     parameters: Schemas["Criteria"] = {},
   ): Promise<void> => {
     const fetchedOrders = await apiClient.invoke("readOrder post /order", {
       body: parameters,
     });
     orders.value = fetchedOrders.data.orders.elements;
+    totalOrderItemsCount.value = fetchedOrders.data.orders.total!;
   };
 
-  const changeCurrentPage = async (pageNumber: number | string) =>
-    await loadOrders({ page: +pageNumber });
+  const changeCurrentPage = async (
+    pageNumber: number | string,
+    currentLimit: string | number,
+  ) => {
+    limit.value = +currentLimit;
+    await loadOrders({ page: +pageNumber, limit: +currentLimit });
+  };
+
+  const getCurrentPage = computed(() => currentPage.value);
+
+  const getTotalPagesCount = computed(() =>
+    Math.ceil(totalOrderItemsCount.value / +limit.value),
+  );
 
   return {
     orders,
     changeCurrentPage,
     loadOrders,
+    getCurrentPage,
+    getTotalPagesCount,
   };
 }

packages/composables/src/useSyncWishlist.test.ts

@@ -19,7 +19,7 @@ describe("useSyncWishlist", () => {
         vm.getWishlistProducts();
         vm.removeFromWishlistSync("some-id");
         // Mocked value
-        expect(vm.count).toBe(vm.count);
+        expect(vm.totalWishlistItemsCount).toBe(vm.totalWishlistItemsCount);
       });
     });
 
@@ -38,7 +38,7 @@ describe("useSyncWishlist", () => {
         const { vm } = useSetup(() => useSyncWishlist());
 
         vm.getWishlistProducts();
-        expect(vm.count).toBe(0);
+        expect(vm.totalWishlistItemsCount).toBe(0);
         expect(vm.items.length).toBe(0);
       });
     });

packages/composables/src/useSyncWishlist.ts

@@ -2,12 +2,15 @@ import { ref, computed } from "vue";
 import type { Ref, ComputedRef } from "vue";
 import { useShopwareContext } from "#imports";
 import { ApiClientError } from "@shopware/api-client";
+import type { operations } from "#shopware";
 
 export type UseSyncWishlistReturn = {
   /**
    * Get products from wishlist
    */
-  getWishlistProducts(): void;
+  getWishlistProducts(
+    defaultSearchCriteria?: operations["searchPage post /search"]["body"],
+  ): void;
   /**
    * Merge products with wishlist already existing in API wishlist
    */
@@ -27,10 +30,11 @@ export type UseSyncWishlistReturn = {
   /**
    * Wishlist items count
    */
-  count: ComputedRef<number>;
+  totalWishlistItemsCount: Ref<number>;
 };
 
 const _wishlistItems: Ref<string[]> = ref([]);
+const totalWishlistItemsCount: Ref<number> = ref(0);
 
 /**
  * Composable to manage wishlist via API
@@ -39,7 +43,6 @@ const _wishlistItems: Ref<string[]> = ref([]);
  */
 export function useSyncWishlist(): UseSyncWishlistReturn {
   const { apiClient } = useShopwareContext();
-
   async function addToWishlistSync(id: string) {
     await apiClient.invoke(
       "addProductOnWishlist post /customer/wishlist/add/{productId}",
@@ -62,14 +65,18 @@ export function useSyncWishlist(): UseSyncWishlistReturn {
    * Fetch wishlist items
    * Only for logged-in users
    */
-  async function getWishlistProducts() {
+  async function getWishlistProducts(
+    defaultSearchCriteria?: operations["searchPage post /search"]["body"],
+  ) {
     try {
       const response = await apiClient.invoke(
         "readCustomerWishlist post /customer/wishlist",
+        { body: defaultSearchCriteria },
       );
       _wishlistItems.value = [
         ...response.data.products.elements.map((element) => element.id),
       ];
+      totalWishlistItemsCount.value = response.data.products.total!;
     } catch (e) {
       if (e instanceof ApiClientError) {
         // If 404 ignore printing error and reset wishlist
@@ -89,14 +96,13 @@ export function useSyncWishlist(): UseSyncWishlistReturn {
   }
 
   const items = computed(() => _wishlistItems.value);
-  const count = computed(() => items.value.length);
 
   return {
     getWishlistProducts,
     addToWishlistSync,
     removeFromWishlistSync,
     mergeWishlistProducts,
     items,
-    count,
+    totalWishlistItemsCount,
   };
 }

packages/composables/src/useWishlist.test.ts

@@ -1,37 +1,159 @@
 import { describe, expect, it, vi } from "vitest";
 import { useWishlist } from "./useWishlist";
+import { useSyncWishlist } from "./useSyncWishlist";
+import { useUser } from "./useUser";
 import { useSetup } from "./_test";
+import { computed, ref } from "vue";
+import type { operations } from "#shopware";
+
+vi.mock("./useLocalWishlist.ts", () => ({
+  useLocalWishlist() {
+    return {
+      getWishlistProducts: () => undefined,
+      items: {
+        value: [
+          "local-testId-1",
+          "local-testId-2",
+          "local-testId-3",
+          "local-testId-4",
+          "local-testId-5",
+          "local-testId-6",
+          "local-testId-7",
+          "local-testId-8",
+          "local-testId-9",
+          "local-testId-10",
+          "local-testId-11",
+          "local-testId-12",
+          "local-testId-13",
+          "local-testId-14",
+          "local-testId-15",
+          "local-testId-16",
+          "local-testId-17",
+        ],
+      },
+      clearWishlist: () => undefined,
+      totalWishlistItemsCount: ref(17),
+    };
+  },
+}));
+
+vi.mock("./useSyncWishlist.ts");
+vi.mock("./useUser");
 
 describe("useWishlist - not logged in user", () => {
-  vi.mock("./useLocalWishlist.ts", () => ({
-    useLocalWishlist() {
-      return {
-        getWishlistProducts: () => undefined,
-        items: { value: ["local-testId333"] },
-        clearWishlist: () => undefined,
-      };
-    },
-  }));
-
-  it("mergeWishlistProducts", async () => {
+  it("mergeWishlistProducts", () => {
+    vi.mocked(useUser).mockReturnValue({
+      isLoggedIn: computed(() => false),
+      isGuestSession: computed(() => true),
+      // @ts-ignore
+      canSyncWishlist: { value: false },
+    });
+    vi.mocked(useSyncWishlist).mockReturnValue({
+      getWishlistProducts: () => undefined,
+      // @ts-ignore
+      items: { value: ["test1"] },
+      mergeWishlistProducts: () => undefined,
+      removeFromWishlistSync: () => undefined,
+      totalWishlistItemsCount: ref(17),
+    });
     const { vm } = useSetup(() => useWishlist());
 
-    expect(vm.items.length).toBe(1);
-    expect(vm.count).toBe(1);
-    await vm.clearWishlist();
-    await vm.getWishlistProducts();
-    await vm.mergeWishlistProducts();
+    vm.clearWishlist();
+    vm.getWishlistProducts();
+    vm.mergeWishlistProducts();
+
+    expect(vm.items.length).toBe(17);
+    expect(vm.totalWishlistItemsCount).toBe(17);
+    expect(vm.getTotalPagesCount).toBe(2);
+  });
+
+  it("getWishlistProducts", async () => {
+    vi.mocked(useUser).mockReturnValue({
+      isLoggedIn: computed(() => false),
+      isGuestSession: computed(() => true),
+      // @ts-ignore
+      canSyncWishlist: { value: false },
+    });
+    vi.mocked(useSyncWishlist).mockReturnValue({
+      getWishlistProducts: () => undefined,
+      // @ts-ignore
+      items: { value: ["test1"] },
+      mergeWishlistProducts: () => undefined,
+      removeFromWishlistSync: () => undefined,
+      totalWishlistItemsCount: ref(15),
+    });
+    const { vm } = useSetup(() => useWishlist());
+
+    vm.getWishlistProducts();
+
+    expect(vm.items).toEqual([
+      "local-testId-1",
+      "local-testId-2",
+      "local-testId-3",
+      "local-testId-4",
+      "local-testId-5",
+      "local-testId-6",
+      "local-testId-7",
+      "local-testId-8",
+      "local-testId-9",
+      "local-testId-10",
+      "local-testId-11",
+      "local-testId-12",
+      "local-testId-13",
+      "local-testId-14",
+      "local-testId-15",
+      "local-testId-16",
+      "local-testId-17",
+    ]);
+
+    const query = {
+      limit: 1,
+      p: 2,
+    } as operations["searchPage post /search"]["body"];
+    vm.changeCurrentPage(2, query);
+
+    expect(vm.getCurrentPage).toBe(2);
   });
 });
 
 describe("useWishlist - logged in user", () => {
-  it("mergeWishlistProducts", async () => {
+  it("mergeWishlistProducts", () => {
+    // Mock the useUser composable
+    vi.mocked(useUser).mockReturnValue({
+      isLoggedIn: computed(() => true),
+      isGuestSession: computed(() => false),
+      // @ts-ignore
+      canSyncWishlist: { value: true },
+    });
+    // Mock the useSyncWishlist composable
+    vi.mocked(useSyncWishlist).mockReturnValue({
+      getWishlistProducts: () => undefined,
+      // @ts-ignore
+      items: { value: ["local-testId333"] },
+      mergeWishlistProducts: () => undefined,
+      removeFromWishlistSync: () => undefined,
+      totalWishlistItemsCount: ref(15),
+    });
     const { vm } = useSetup(() => useWishlist());
 
+    vm.clearWishlist();
+    vm.getWishlistProducts();
+    vm.mergeWishlistProducts();
+
     expect(vm.items.length).toBe(1);
-    expect(vm.count).toBe(1);
-    await vm.clearWishlist();
-    await vm.getWishlistProducts();
-    await vm.mergeWishlistProducts();
+    expect(vm.totalWishlistItemsCount).toBe(15);
+  });
+
+  it("getWishlistProducts", () => {
+    vi.mocked(useUser).mockReturnValue({
+      isLoggedIn: computed(() => true),
+      isGuestSession: computed(() => false),
+      // @ts-ignore
+      canSyncWishlist: { value: true },
+    });
+    const { vm } = useSetup(() => useWishlist());
+    vm.getWishlistProducts();
+
+    expect(vm.items).toEqual(["local-testId333"]);
   });
 });