feat(RSS-ECOMM-4_97): filter range (#323)

* feat: filter Type * feat: catalog filter * feat: filter price range
stardustmeg · May 29, 2024 · 20fedc3 · 20fedc3
1 parent b6c685f
commit 20fedc3
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 12 deletions.
diff --git a/src/shared/API/cart/model/CartModel.ts b/src/shared/API/cart/model/CartModel.ts
@@ -116,7 +116,7 @@ export class CartModel {
       filter.addFilter(FilterFields.ID, product.productId);
     });
     const opt: OptionsRequest = {
-      filter: filter.getFilter(),
+      filter,
       limit: this.cart.products.length,
     };
 

diff --git a/src/shared/API/product/ProductApi.ts b/src/shared/API/product/ProductApi.ts
@@ -5,12 +5,14 @@ import type {
   ProductProjectionPagedSearchResponse,
 } from '@commercetools/platform-sdk';
 
-import { DEFAULT_PAGE, MAX_PRICE, MIN_PRICE, PRODUCT_LIMIT } from '@/shared/constants/product.ts';
+import { DEFAULT_PAGE, MAX_PRICE, MIN_PRICE, PRICE_FRACTIONS, PRODUCT_LIMIT } from '@/shared/constants/product.ts';
 
 import getApiClient, { type ApiClient } from '../sdk/client.ts';
 import { type OptionsRequest } from '../types/type.ts';
 import makeSortRequest from './utils/sort.ts';
 
+const FACET_ADD = 1;
+
 export class ProductApi {
   private client: ApiClient;
 
@@ -45,6 +47,10 @@ export class ProductApi {
 
   public async getProducts(options?: OptionsRequest): Promise<ClientResponse<ProductProjectionPagedSearchResponse>> {
     const { filter, limit = PRODUCT_LIMIT, page = DEFAULT_PAGE, search, sort } = options || {};
+    const filterQuery = filter?.getFilter();
+    const priceRange = filter?.getPriceRange();
+    const min = Math.round((priceRange?.min ?? MIN_PRICE) * PRICE_FRACTIONS - FACET_ADD);
+    const max = Math.round((priceRange?.max ?? MAX_PRICE) * PRICE_FRACTIONS + FACET_ADD);
 
     const data = await this.client
       .apiRoot()
@@ -55,16 +61,16 @@ export class ProductApi {
           facet: [
             `categories.id counting products`,
             `variants.attributes.size.key`,
-            `variants.price.centAmount:range(${MIN_PRICE} to ${MAX_PRICE})`,
+            `variants.price.centAmount:range(${min} to ${max})`,
           ],
           limit,
           markMatchingVariants: true,
           offset: (page - 1) * PRODUCT_LIMIT,
           ...(search && { [`text.${search.locale}`]: search.value }),
           ...(search && { fuzzy: true }),
           ...(sort && { sort: makeSortRequest(sort) }),
-          ...(filter && { 'filter.query': filter }),
-          ...(filter && { 'filter.facets': filter }),
+          ...(filterQuery && { 'filter.query': filterQuery }),
+          ...(filterQuery && { 'filter.facets': filterQuery }),
           withTotal: true,
         },
       })

diff --git a/src/shared/API/product/utils/filter.ts b/src/shared/API/product/utils/filter.ts
@@ -1,4 +1,4 @@
-import { PRICE_FRACTIONS } from '@/shared/constants/product.ts';
+import { MAX_PRICE, MIN_PRICE, PRICE_FRACTIONS } from '@/shared/constants/product.ts';
 
 import type { FilterFieldsType, PriceRange } from '../../types/type.ts';
 
@@ -11,7 +11,10 @@ export default class FilterProduct {
 
   private newArrival = '';
 
-  private price = '';
+  private price: PriceRange = {
+    max: MAX_PRICE,
+    min: MIN_PRICE,
+  };
 
   private sale = '';
 
@@ -42,7 +45,8 @@ export default class FilterProduct {
         break;
       case FilterFields.PRICE:
         if (value && typeof value !== 'string') {
-          this.price = `${field}: range(${value.min * PRICE_FRACTIONS} to ${value.max * PRICE_FRACTIONS})`;
+          this.price.max = value.max;
+          this.price.min = value.min;
         }
         break;
       default:
@@ -66,11 +70,18 @@ export default class FilterProduct {
       result.push(this.newArrival);
     }
     if (this.price) {
-      result.push(this.price);
+      // `${field}: range(${value.min * PRICE_FRACTIONS} to ${value.max * PRICE_FRACTIONS})`;
+      result.push(
+        `${FilterFields.PRICE}: range(${Math.round(this.price.min * PRICE_FRACTIONS)} to ${Math.round(this.price.max * PRICE_FRACTIONS)})`,
+      );
     }
     if (this.sale) {
       result.push(this.sale);
     }
     return result;
   }
+
+  public getPriceRange(): PriceRange {
+    return this.price;
+  }
 }
diff --git a/src/shared/API/types/type.ts b/src/shared/API/types/type.ts
@@ -1,5 +1,7 @@
 import type { Category, Product, SizeType } from '@/shared/types/product.ts';
 
+import type FilterProduct from '../product/utils/filter';
+
 export const Attribute = {
   FULL_DESCRIPTION: 'full_description',
   LEVEL: 'level',
@@ -50,7 +52,7 @@ export type SearchOptions = {
 };
 
 export type OptionsRequest = {
-  filter?: string[];
+  filter?: FilterProduct;
   limit?: number;
   page?: number;
   search?: SearchOptions;

diff --git a/src/widgets/Catalog/model/CatalogModel.ts b/src/widgets/Catalog/model/CatalogModel.ts
@@ -144,14 +144,14 @@ class CatalogModel {
     const currentSort = this.getSelectedSorting(selectedSorting ?? null);
     if (currentSort) {
       result = {
-        filter: filter.getFilter(),
+        filter,
         page: Number(page),
         search: { locale: currentLanguage, value: searchValue },
         sort: currentSort ?? null,
       };
     } else {
       result = {
-        filter: filter.getFilter(),
+        filter,
         page: Number(page),
         search: { locale: currentLanguage, value: searchValue },
       };