Change product list default page size to 12 (#10937)

chore: Change product list default page size to 12 (#3075)

docs/migration/4_0.md

@@ -645,6 +645,10 @@ The display of the guest checkout button relies on the presence of the `forced`
 
 - `platformId` is now required constructor dependency.
 
+### ProductListComponentService
+- `ProductListComponentService` now also requires `ViewConfig`.
+- The `defaultPageSize` property was removed. To modify default page size use `provideConfig(<ViewConfig>{ view: { defaultPageSize: <your_default_page_size_value }})` in module.
+
 ### Product configurator
 
 `ConfiguratorCartEntryInfoComponent` now also requires `CommonConfiguratorUtilsService`.
@@ -742,6 +746,10 @@ What was removed:
 - configuration (`storageSync` from `StateConfig`)
 - default config and default keys (`defaultStateConfig`, `DEFAULT_LOCAL_STORAGE_KEY` and `DEFAULT_SESSION_STORAGE_KEY`)
 
+### DefaultScrollConfig
+
+- `defaultScrollConfig` was renamed to `defaultViewConfig`
+
 ### LanguageService
 
 - `LanguageService` no longer uses `WindowRef`. The language initialization from the state was moved to `LanguageInitializer`.

projects/schematics/src/migrations/4_0/constructor-deprecations/constructor-deprecations.ts

@@ -115,6 +115,7 @@ import { UNIT_USER_LIST_COMPONENT_MIGRATION } from './data/unit-user-list.compon
 import { USER_ADDRESS_SERVICE_MIGRATION } from './data/user-address-service.migration';
 import { USER_GROUP_USER_LIST_COMPONENT_MIGRATION } from './data/user-group-user-list.component.migration';
 import { WINDOW_REF_MIGRATION } from './data/window-ref.migration';
+import { PRODUCT_LIST_COMPONENT_SERVICE_MIGRATION } from './data/product-list-component.service.migration';
 
 export const CONSTRUCTOR_DEPRECATION_DATA: ConstructorDeprecation[] = [
   UNIT_CHILDREN_COMPONENT_MIGRATION,
@@ -195,6 +196,7 @@ export const CONSTRUCTOR_DEPRECATION_DATA: ConstructorDeprecation[] = [
   AUTH_REDIRECT_SERVICE_MIGRATION,
   PROTECTED_ROUTES_SERVICE_MIGRATION,
   PRODUCT_LIST_ITEM_COMPONENT_MIGRATION,
+  PRODUCT_LIST_COMPONENT_SERVICE_MIGRATION,
   PRODUCT_GRID_ITEM_COMPONENT_MIGRATION,
   CART_ITEM_COMPONENT_MIGRATION,
   CONFIGURATOR_CART_ENTRY_INFO_COMPONENT_MIGRATION,

projects/schematics/src/migrations/4_0/constructor-deprecations/data/product-list-component.service.migration.ts

@@ -0,0 +1,52 @@
+import {
+  ACTIVATED_ROUTE,
+  ANGULAR_ROUTER,
+  CURRENCY_SERVICE,
+  LANGUAGE_SERVICE,
+  PRODUCT_LIST_COMPONENT_SERVICE,
+  PRODUCT_SEARCH_SERVICE,
+  ROUTER,
+  ROUTING_SERVICE,
+  SPARTACUS_CORE,
+  SPARTACUS_STOREFRONTLIB,
+  VIEW_CONFIG,
+} from '../../../../shared/constants';
+import { ConstructorDeprecation } from '../../../../shared/utils/file-utils';
+
+export const PRODUCT_LIST_COMPONENT_SERVICE_MIGRATION: ConstructorDeprecation = {
+  // projects/storefrontlib/src/cms-components/product/product-list/container/product-list-component.service.ts
+  class: PRODUCT_LIST_COMPONENT_SERVICE,
+  importPath: SPARTACUS_STOREFRONTLIB,
+  deprecatedParams: [
+    {
+      className: PRODUCT_SEARCH_SERVICE,
+      importPath: SPARTACUS_CORE,
+    },
+    {
+      className: ROUTING_SERVICE,
+      importPath: SPARTACUS_CORE,
+    },
+    {
+      className: ACTIVATED_ROUTE,
+      importPath: ANGULAR_ROUTER,
+    },
+    {
+      className: CURRENCY_SERVICE,
+      importPath: SPARTACUS_CORE,
+    },
+    {
+      className: LANGUAGE_SERVICE,
+      importPath: SPARTACUS_CORE,
+    },
+    {
+      className: ROUTER,
+      importPath: ANGULAR_ROUTER,
+    },
+  ],
+  addParams: [
+    {
+      className: VIEW_CONFIG,
+      importPath: SPARTACUS_STOREFRONTLIB,
+    },
+  ],
+};

projects/schematics/src/migrations/4_0/methods-and-properties-deprecations/data/product-list-component.service.migration.ts

@@ -0,0 +1,17 @@
+import {
+  DEFAULT_PAGE_SIZE,
+  PRODUCT_LIST_COMPONENT_SERVICE,
+  SPARTACUS_STOREFRONTLIB,
+} from '../../../../shared/constants';
+import { MethodPropertyDeprecation } from '../../../../shared/utils/file-utils';
+
+// projects/storefrontlib/src/cms-components/product/product-list/container/product-list-component.service.ts
+
+export const PRODUCT_LIST_COMPONENT_SERVICE_MIGRATION: MethodPropertyDeprecation[] = [
+  {
+    class: PRODUCT_LIST_COMPONENT_SERVICE,
+    importPath: SPARTACUS_STOREFRONTLIB,
+    deprecatedNode: DEFAULT_PAGE_SIZE,
+    comment: `Property '${DEFAULT_PAGE_SIZE}' was removed, to modify default page size use 'view.defaultPageSize' configuration property.`,
+  },
+];

projects/schematics/src/migrations/4_0/methods-and-properties-deprecations/methods-and-properties-deprecations.ts

@@ -21,6 +21,7 @@ import {
 } from './data/occ-endpoints.service.migration';
 import { ORDER_DETAIL_ITEMS_COMPONENT_MIGRATION } from './data/order-detail-items.component.migration';
 import { PAGE_EVENT_BUILDER_MIGRATION } from './data/page-event.builder.ts.migration';
+import { PRODUCT_LIST_COMPONENT_SERVICE_MIGRATION } from './data/product-list-component.service.migration';
 import { ROUTING_SERVICE_MIGRATION } from './data/routing.service.ts.migration';
 import { SELECTIVE_CART_SERVICE_MIGRATION } from './data/selective-cart.service.migration';
 
@@ -43,6 +44,7 @@ export const METHOD_PROPERTY_DATA: MethodPropertyDeprecation[] = [
   ...ORDER_DETAIL_ITEMS_COMPONENT_MIGRATION,
   ...ROUTING_SERVICE_MIGRATION,
   ...CONFIGURATOR_GROUP_MENU_COMPONENT_MIGRATION,
+  ...PRODUCT_LIST_COMPONENT_SERVICE_MIGRATION,
 ];
 
 export function migrate(): Rule {

projects/schematics/src/migrations/4_0/rename-symbol/rename-symbol.ts

@@ -2,7 +2,14 @@ import { Rule, Tree } from '@angular-devkit/schematics';
 import { RenamedSymbol } from '../../../shared/utils/file-utils';
 import { migrateRenamedSymbols } from '../../mechanism/rename-symbol/rename-symbol';
 
-export const RENAMED_SYMBOLS_DATA: RenamedSymbol[] = [];
+export const RENAMED_SYMBOLS_DATA: RenamedSymbol[] = [
+  // projects/storefrontlib/src/cms-components/product/config/default-view-config.ts
+  {
+    previousNode: 'defaultScrollConfig',
+    previousImportPath: '@spartacus/storefront',
+    newNode: 'defaultViewConfig',
+  },
+];
 
 export function migrate(): Rule {
   return (tree: Tree) => {

projects/schematics/src/migrations/mechanism/rename-symbol/__snapshots__/rename-symbol_spec.ts.snap

@@ -26,3 +26,11 @@ import { Test1Component } from \\"@spartacus/storefront\\";
 const array = [OtherComponentTest3, Test1Component, Test2Component];
 "
 `;
+
+exports[`renamed symbols Should only rename node 1`] = `
+"import { Test2Component } from \\"@spartacus/core\\";
+import { OtherComponentTest4, Test1Component } from \\"@spartacus/storefront\\";
+
+const array = [OtherComponentTest4, Test1Component, Test2Component];
+"
+`;

projects/schematics/src/migrations/mechanism/rename-symbol/rename-symbol.ts

@@ -36,6 +36,11 @@ export function migrateRenamedSymbols(
                 : importName;
 
               const oldAlias = namedImport.getAliasNode()?.getText();
+              let importPath = renamedSymbol.previousImportPath;
+
+              if (renamedSymbol.newImportPath) {
+                importPath = renamedSymbol.newImportPath;
+              }
 
               if (!oldAlias && renamedSymbol.newNode) {
                 namedImport.renameAlias(newNodeName);
@@ -48,7 +53,7 @@ export function migrateRenamedSymbols(
                     alias: oldAlias,
                   },
                 ],
-                moduleSpecifier: renamedSymbol.newImportPath,
+                moduleSpecifier: importPath,
               } as ImportDeclarationStructure);
 
               if ((id.getImportClause()?.getNamedImports()?.length || 0) > 1) {

projects/schematics/src/migrations/mechanism/rename-symbol/rename-symbol_spec.ts

@@ -32,6 +32,12 @@ import { Test2Component } from "@spartacus/core";
 const array = [OtherComponent3, Test1Component, Test2Component];`;
 // -----------------------------------------------------------------------
 
+const fileWithRename = `import { OtherComponent4, Test1Component } from "@spartacus/storefront";
+import { Test2Component } from "@spartacus/core";
+
+const array = [OtherComponent4, Test1Component, Test2Component];`;
+// -----------------------------------------------------------------------
+
 describe('renamed symbols', () => {
   let host: TempScopedNodeJsSyncHost;
   let appTree = Tree.empty() as UnitTestTree;
@@ -113,4 +119,13 @@ describe('renamed symbols', () => {
       expect(content).toMatchSnapshot();
     });
   });
+
+  it('Should only rename node', async () => {
+    writeFile(host, '/src/index.ts', fileWithRename);
+
+    await runMigration(appTree, schematicRunner, MIGRATION_SCRIPT_NAME);
+
+    const content = appTree.readContent('/src/index.ts');
+    expect(content).toMatchSnapshot();
+  });
 });

projects/schematics/src/migrations/test/rename-symbol/rename-symbol.ts

@@ -23,6 +23,12 @@ export const RENAMED_SYMBOLS_DATA: RenamedSymbol[] = [
     newNode: 'OtherComponentTest3',
     newImportPath: '@spartacus/storefinder/components',
   },
+  {
+    // 4) For name change
+    previousNode: 'OtherComponent4',
+    previousImportPath: '@spartacus/storefront',
+    newNode: 'OtherComponentTest4',
+  },
 ];
 
 export function migrate(): Rule {

projects/schematics/src/shared/constants.ts

@@ -807,6 +807,8 @@ export const ITEM = 'Item';
 export const ORDER_ENTRY = 'OrderEntry';
 export const ORDER_PROMOTIONS$ = 'orderPromotions$';
 
+export const DEFAULT_PAGE_SIZE = 'defaultPageSize';
+
 /***** Properties end *****/
 
 /***** APIs start *****/

projects/schematics/src/shared/utils/file-utils.ts

@@ -106,7 +106,7 @@ export interface RenamedSymbol {
   previousNode: string;
   previousImportPath: string;
   newNode?: string;
-  newImportPath: string;
+  newImportPath?: string;
 }
 
 export function getTsSourceFile(tree: Tree, path: string): ts.SourceFile {

projects/storefrontapp-e2e-cypress/cypress/helpers/coupons/my-coupons.ts

@@ -81,7 +81,7 @@ export function verifyMyCoupons() {
   verifyCouponsClaiming();
   verifyEnableDisableNotification();
   verifyReadMore();
-  verifyFindProduct(CouponWithOpenCatalog, 10);
+  verifyFindProduct(CouponWithOpenCatalog, 12);
   goMyCoupon();
   verifyFindProduct(CouponWithProductCategory, 4);
   goMyCoupon();

projects/storefrontapp-e2e-cypress/cypress/helpers/data-configuration.ts

@@ -1,5 +1,5 @@
 export const PRODUCT_LISTING = {
-  PRODUCTS_PER_PAGE: 10,
+  PRODUCTS_PER_PAGE: 12,
   SORTING_TYPES: {
     BY_TOP_RATED: 'Top Rated',
     BY_RELEVANCE: 'Relevance',

projects/storefrontapp-e2e-cypress/cypress/helpers/infinite-scroll.ts

@@ -2,8 +2,8 @@ import { PRODUCT_LISTING } from './data-configuration';
 import { clickFacet, searchUrlPrefix } from './product-search';
 
 const scrollDuration = 5000;
-const defaultNumberOfProducts = 10;
-let defaultProductLimit = 10;
+const defaultNumberOfProducts = 12;
+let defaultProductLimit = 12;
 
 const defaultQueryName = `query_relevance`;
 const defaultQueryAlias = `@${defaultQueryName}`;

projects/storefrontapp-e2e-cypress/cypress/integration/regression/infinite-scroll.e2e-spec.ts

@@ -65,20 +65,19 @@ describe('Infinite scroll', () => {
 
       isPaginationNotVisible();
       scrollToFooter(totalResults, true);
-      backToTopIsVisible();
+      backToTopIsVisible(true);
     });
   });
 
-  it("should enable infinite scroll and display 'Show more' button after 15th product", () => {
-    configScroll(true, 15, false);
+  it("should enable infinite scroll and display 'Show more' button after 12th product", () => {
+    configScroll(true, 12, false);
     cy.visit(testUrl);
 
     cy.wait(defaultQueryAlias).then((waitXHR) => {
       const totalResults = waitXHR.response.body.pagination.totalResults;
       isPaginationNotVisible();
-
-      backtoTopIsNotVisible();
-      scrollToFooter(totalResults, false, 15);
+      backToTopIsVisible();
+      scrollToFooter(totalResults, true, 12);
       backToTopIsVisible(true);
     });
   });

projects/storefrontlib/src/cms-components/product/config/default-scroll-config.ts → projects/storefrontlib/src/cms-components/product/config/default-view-config.ts

@@ -1,7 +1,8 @@
 import { ViewConfig } from '../../../shared/config/view-config';
 
-export const defaultScrollConfig: ViewConfig = {
+export const defaultViewConfig: ViewConfig = {
   view: {
+    defaultPageSize: 12,
     infiniteScroll: {
       active: false,
       productLimit: 0,

projects/storefrontlib/src/cms-components/product/index.ts

@@ -1,5 +1,5 @@
 export * from './carousel/index';
-export * from './config/default-scroll-config';
+export * from './config/default-view-config';
 export * from './current-product.service';
 export * from './product-images/product-images.component';
 export * from './product-images/product-images.module';

projects/storefrontlib/src/cms-components/product/product-list/container/product-list-component.service.spec.ts

@@ -6,8 +6,10 @@ import {
   LanguageService,
   ProductSearchPage,
   ProductSearchService,
+  provideDefaultConfig,
   RoutingService,
 } from '@spartacus/core';
+import { defaultViewConfig, ViewConfig } from '@spartacus/storefront';
 import { BehaviorSubject, of, Subscription } from 'rxjs';
 import { ProductListComponentService } from './product-list-component.service';
 
@@ -80,6 +82,7 @@ describe('ProductListComponentService', () => {
         { provide: ProductSearchService, useClass: MockProductSearchService },
         { provide: CurrencyService, useClass: MockCurrencyService },
         { provide: LanguageService, useClass: MockLanguageService },
+        provideDefaultConfig(<ViewConfig>defaultViewConfig),
       ],
     });
 
@@ -135,15 +138,15 @@ describe('ProductListComponentService', () => {
     }));
 
     describe('should perform search on change of routing', () => {
-      it('with default "pageSize" 10', fakeAsync(() => {
+      it('with default "pageSize" 12', fakeAsync(() => {
         const subscription: Subscription = service.model$.subscribe();
 
         tick();
 
         subscription.unsubscribe();
 
         expect(productSearchService.search).toHaveBeenCalledWith(undefined, {
-          pageSize: 10,
+          pageSize: 12,
         });
       }));
 

projects/storefrontlib/src/cms-components/product/product-list/container/product-list-component.service.ts

@@ -19,6 +19,7 @@ import {
   tap,
 } from 'rxjs/operators';
 import { ProductListRouteParams, SearchCriteria } from './product-list.model';
+import { ViewConfig } from '../../../../shared/config/view-config';
 
 /**
  * The `ProductListComponentService` is used to search products. The service is used
@@ -30,9 +31,6 @@ import { ProductListRouteParams, SearchCriteria } from './product-list.model';
  */
 @Injectable({ providedIn: 'root' })
 export class ProductListComponentService {
-  // TODO: make it configurable
-  protected defaultPageSize = 10;
-
   protected readonly RELEVANCE_ALLCATEGORIES = ':relevance:allCategories:';
 
   constructor(
@@ -41,7 +39,8 @@ export class ProductListComponentService {
     protected activatedRoute: ActivatedRoute,
     protected currencyService: CurrencyService,
     protected languageService: LanguageService,
-    protected router: Router
+    protected router: Router,
+    protected config: ViewConfig
   ) {}
 
   /**
@@ -109,7 +108,7 @@ export class ProductListComponentService {
   ): SearchCriteria {
     return {
       query: queryParams.query || this.getQueryFromRouteParams(routeParams),
-      pageSize: queryParams.pageSize || this.defaultPageSize,
+      pageSize: queryParams.pageSize || this.config.view?.defaultPageSize,
       currentPage: queryParams.currentPage,
       sortCode: queryParams.sortCode,
     };

projects/storefrontlib/src/cms-components/product/product-list/product-list.module.ts

@@ -20,7 +20,7 @@ import {
 } from '../../../shared/index';
 import { AddToCartModule } from '../../cart/index';
 import { IconModule } from '../../misc/icon/index';
-import { defaultScrollConfig } from '../config/default-scroll-config';
+import { defaultViewConfig } from '../config/default-view-config';
 import { ProductListComponent } from './container/product-list.component';
 import { ProductScrollComponent } from './container/product-scroll/product-scroll.component';
 import { ProductGridItemComponent } from './product-grid-item/product-grid-item.component';
@@ -45,7 +45,7 @@ import { ProductViewComponent } from './product-view/product-view.component';
     OutletModule,
   ],
   providers: [
-    provideDefaultConfig(<ViewConfig>defaultScrollConfig),
+    provideDefaultConfig(<ViewConfig>defaultViewConfig),
     provideDefaultConfig(<CmsConfig>{
       cmsComponents: {
         CMSProductListComponent: {