Merge pull request #5850 from vuestorefront/#4599-fix/order-history-pagination

fix: Order history pagination

Author: lukaszjedrasik

CHANGELOG.md

@@ -43,6 +43,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Incorrect load of default address in checkout - @lukaszjedrasik ([#4682](https://github.com/vuestorefront/vue-storefront/issues/4682))
 - Error with unknown theme/index.js alias - @Fifciuu (https://github.com/vuestorefront/vue-storefront/pull/5813)
 - ESLint warnings caused by the double import - @lukaszjedrasik
+- Fix Order History Pagination - @AishwaryShrivastav / @lukaszjedrasik ([#4599](https://github.com/vuestorefront/vue-storefront/issues/4599))
+
 ### Changed / Improved
 
 - Moved hardcoded fields from omitSelectedVariantFields.ts to config (#4679)

core/modules/order/components/UserOrdersHistory.ts

@@ -18,14 +18,22 @@ export default {
     ordersHistory () {
       let items = this.getOrdersHistory
       if (this.lazyLoadOrdersOnScroll) {
-        items = items.slice(0, (this.pagination.perPage + 1) * this.pagination.current)
+        items = items.slice(0, this.pagination.perPage * this.pagination.current)
       }
       return items
     }
   },
   methods: {
     onBottomScroll () {
-      ++this.pagination.current
+      const totalCount = this.$store.state.user.orders_history.total_count ? this.$store.state.user.orders_history.total_count : 0;
+      const isLastPage = this.pagination.current > Math.ceil(totalCount / this.pagination.perPage);
+      if (!isLastPage) {
+        this.pagination.current++;
+        this.$store.dispatch('user/appendOrdersHistory', {
+          pageSize: this.pagination.perPage,
+          currentPage: this.pagination.current
+        });
+      }
     }
   }
 }

core/modules/user/store/actions.ts

@@ -13,6 +13,7 @@ import { StorageManager } from '@vue-storefront/core/lib/storage-manager'
 import { userHooksExecutors, userHooks } from '../hooks'
 import { isModuleRegistered } from '@vue-storefront/core/lib/modules'
 import Task from '@vue-storefront/core/lib/sync/types/Task'
+import uniqBy from 'lodash-es/uniqBy'
 
 const actions: ActionTree<UserState, RootState> = {
   async startSession ({ commit, dispatch, getters }) {
@@ -269,6 +270,19 @@ const actions: ActionTree<UserState, RootState> = {
       return ordersHistory
     }
   },
+  async appendOrdersHistory ({ commit, getters }, { pageSize = 20, currentPage = 1 }) {
+    const resp = await UserService.getOrdersHistory(pageSize, currentPage)
+
+    if (resp.code === 200) {
+      const oldOrders = getters.getOrdersHistory;
+      let orders = resp.result;
+      if (oldOrders && orders.items) orders.items = uniqBy([...oldOrders, ...orders.items], 'increment_id')
+
+      commit(types.USER_ORDERS_HISTORY_LOADED, orders)
+      EventBus.$emit('user-after-loaded-orders', orders)
+      return orders
+    }
+  },
   async refreshOrdersHistory ({ commit }, { resolvedFromCache, pageSize = 20, currentPage = 1 }) {
     const resp = await UserService.getOrdersHistory(pageSize, currentPage)
 

core/modules/user/test/unit/store/actions.spec.ts

@@ -456,6 +456,73 @@ describe('User actions', () => {
     })
   });
 
+  describe('appendOrdersHistory action', () => {
+    it('should append order to orders history', async () => {
+      const responseOb = {
+        result: data.ordersHistory,
+        code: 200
+      };
+      (UserService.getOrdersHistory as jest.Mock).mockImplementation(async () => responseOb);
+      const contextMock = {
+        commit: jest.fn(),
+        getters: {
+          getOrdersHistory: responseOb.result
+        }
+      };
+      const pageSize = data.pageSize;
+      const currentPage = data.currentPage;
+
+      const result = await (userActions as any).appendOrdersHistory(contextMock, {
+        pageSize,
+        currentPage
+      })
+
+      expect(contextMock.commit).toBeCalledWith(types.USER_ORDERS_HISTORY_LOADED, responseOb.result);
+      expect(EventBus.$emit).toBeCalledWith('user-after-loaded-orders', result);
+      expect(result).toBe(responseOb.result)
+    })
+
+    it('returns orders with unique increment_id', async () => {
+      const oldOrders = [
+        { name: 'a', increment_id: 0 },
+        { name: 'b', increment_id: 1 }
+      ]
+      const orders = {
+        items: [
+          { name: 'a', increment_id: 0 },
+          { name: 'c', increment_id: 2 }
+        ]
+      }
+      const responseOb = {
+        result: orders,
+        code: 200
+      };
+      const contextMock = {
+        commit: jest.fn(),
+        getters: {
+          getOrdersHistory: oldOrders
+        }
+      };
+      const pageSize = data.pageSize;
+      const currentPage = data.currentPage;
+
+      (UserService.getOrdersHistory as jest.Mock).mockImplementation(async () => responseOb);
+      const result = await (userActions as any).appendOrdersHistory(contextMock, {
+        pageSize,
+        currentPage
+      })
+      const expectedResult = {
+        items: [
+          { name: 'a', increment_id: 0 },
+          { name: 'b', increment_id: 1 },
+          { name: 'c', increment_id: 2 }
+        ]
+      }
+
+      expect(result).toEqual(expectedResult);
+    })
+  })
+
   describe('refreshOrderHistory action', () => {
     it('should refresh orders history', async () => {
       const responseOb = {