@ikas/storefront 1.0.21 → 2.0.0-alpha.1

package/src/models/ui/product-list/index.ts

@@ -0,0 +1,959 @@
+import { makeAutoObservable } from "mobx";
+import {
+  IkasProductListPropValue,
+  IkasThemePageType,
+} from "../../../models/theme";
+import { IkasProductDetail } from "../product-detail";
+import { IkasProductSearchAPI } from "../../../api";
+import {
+  IkasProductFacetInput,
+  IkasProductFilter,
+  IkasProductFilterValue,
+} from "../../../models/data/product-filter";
+import querystring from "query-string";
+import { NextRouter } from "next/router";
+import {
+  IkasCategory,
+  IkasFilterCategory,
+  ModelOrder,
+} from "../../../models/data/category";
+import _debounce from "lodash/debounce";
+import { Analytics } from "../../../analytics";
+import { IkasStorefrontConfig } from "../../../storefront";
+import {
+  SearchInputOrderByInput,
+  SortByDirectionEnum,
+  SortByTypeEnum,
+} from "../../../__generated__/global-types";
+import { IkasBrand } from "../../../models/data";
+
+export class IkasProductList {
+  data: IkasProductDetail[];
+  filters?: IkasProductFilter[] | null = null;
+  private _filterCategories?: IkasFilterCategory[] | null = null;
+
+  private _type: IkasProductListType;
+  private _pageType: IkasThemePageType;
+  private _sort: IkasProductListSortType;
+  private _limit: number;
+  private _page: number;
+  private _infiniteScrollPage: number | null = null;
+  private _count: number;
+  private _searchKeyword: string;
+  private _initialized = false;
+  private _minPage?: number | null = null;
+  private _productListPropValue: IkasProductListPropValue;
+
+  private _filterBrandId?: string | null = null;
+  private _filterCategoryId?: string | null = null;
+
+  private pageSpecificData?: IkasCategory | IkasBrand | null = null;
+
+  private _recommendFor?: string | null = null; // productId
+  private _isLoading = false;
+  private _fetchRequestTime = 0;
+  private router?: NextRouter | null = null;
+
+  constructor(data: IkasProductListParams, router?: NextRouter) {
+    this.data = data.data
+      ? data.data.map(
+          (d) => new IkasProductDetail(d.product, d.selectedVariantValues)
+        )
+      : [];
+    this._type =
+      data.type ||
+      data.productListPropValue.productListType ||
+      IkasProductListType.ALL;
+    this._pageType = data.pageType;
+    this._sort =
+      data.sort ||
+      data.productListPropValue.initialSort ||
+      IkasProductListSortType.LAST_ADDED;
+
+    // TODO remove this later
+    //@ts-ignore
+    if (this.initialSort === "A_Z" || this.initialSort === "Z_A")
+      this._sort = IkasProductListSortType.LAST_ADDED;
+
+    if (this._pageType === IkasThemePageType.SEARCH) {
+      this._sort = IkasProductListSortType.FEATURED;
+    }
+
+    this._limit = data.limit || data.productListPropValue.initialLimit || 20;
+    this._page = data.page || 1;
+    this._minPage = data.minPage || null;
+    this._count = data.count || 0;
+    this._searchKeyword = data.searchKeyword || "";
+    this._productListPropValue = data.productListPropValue;
+
+    this._filterBrandId = data.filterBrandId || null;
+    this._filterCategoryId = data.filterCategoryId || null;
+
+    this._recommendFor = data.recommendFor;
+
+    this.filters = data.filters
+      ? data.filters.map((f) => new IkasProductFilter(f, this))
+      : null;
+    this._filterCategories = data.filterCategories
+      ? data.filterCategories.map((c) => new IkasFilterCategory(c))
+      : null;
+    this.pageSpecificData = data.pageSpecificData || null;
+
+    this.router = router;
+
+    makeAutoObservable(this);
+
+    this.setPageSpecificSort();
+
+    if (this.isBrowser()) {
+      this.restoreInfiniteScrollPage();
+
+      if (
+        location.search &&
+        (this.isFilterable || this._type === IkasProductListType.SEARCH)
+      ) {
+        const queryParams = this.getQueryParams();
+        this.getInitial(queryParams, this._page > 1);
+      } else if (this._page > 1) {
+        this.getInitial(undefined, true);
+      } else if (this.isLastViewed) {
+        this.getInitial();
+      } else {
+        this.handleListingEvent();
+      }
+    }
+  }
+
+  get sort() {
+    return this._sort;
+  }
+
+  get limit() {
+    return this._limit;
+  }
+
+  get pageType() {
+    return this._pageType;
+  }
+
+  get page() {
+    return this._page;
+  }
+
+  get minPage() {
+    return this._minPage || 1;
+  }
+
+  get count() {
+    return this._count;
+  }
+
+  get pageCount() {
+    return Math.ceil(this._count / this._limit);
+  }
+
+  get searchKeyword() {
+    return this._searchKeyword;
+  }
+
+  set searchKeyword(value: string) {
+    if (value === this._searchKeyword) return;
+    this._searchKeyword = value;
+    this.searchDebouncer();
+    this.searchAnalyticsDebouncer();
+  }
+
+  get isInitialized() {
+    return this._initialized;
+  }
+
+  get isFilterable() {
+    return (
+      this._type === IkasProductListType.ALL ||
+      this._type === IkasProductListType.CATEGORY
+    );
+  }
+
+  get isFiltered() {
+    return (
+      this.filters?.some((f) => !!f.valueList.length) ||
+      !!this._searchKeyword ||
+      (this._pageType !== IkasThemePageType.CATEGORY &&
+        (!!this._filterCategoryId ||
+          this._filterCategories?.some((fc) => fc.isSelected)))
+    );
+  }
+
+  get isStatic() {
+    return this._type === IkasProductListType.STATIC;
+  }
+
+  get isDiscounted() {
+    return this._type === IkasProductListType.DISCOUNTED;
+  }
+
+  get isRecommended() {
+    return this._type === IkasProductListType.RECOMMENDED;
+  }
+
+  get isLastViewed() {
+    return this._type === IkasProductListType.LAST_VIEWED;
+  }
+
+  get isSearch() {
+    return this._type === IkasProductListType.SEARCH;
+  }
+
+  get hasPrev() {
+    if (
+      this.isStatic ||
+      this.isDiscounted ||
+      this.isRecommended ||
+      !this._minPage
+    )
+      return false;
+    return this._minPage > 1;
+  }
+
+  get hasNext() {
+    if (this.isStatic || this.isDiscounted || this.isRecommended) return false;
+    return this.page * this.limit < this.count;
+  }
+
+  get isLoading() {
+    return this._isLoading;
+  }
+
+  get filterQueryParams() {
+    const queryParams: Record<string, any> = {};
+
+    this.filters?.forEach((f) => {
+      if (f.keyList.length) queryParams[f.key] = f.keyList;
+    });
+
+    if (this._searchKeyword) queryParams.s = this._searchKeyword;
+    if (this._infiniteScrollPage) queryParams.page = this._infiniteScrollPage;
+    if (this._pageType !== IkasThemePageType.CATEGORY) {
+      const selectedCategories = this.filterCategories?.filter(
+        (fc) => fc.isSelected
+      );
+      const hasSelectedCategory = !!selectedCategories?.length;
+
+      if (hasSelectedCategory) {
+        queryParams.c = selectedCategories?.map((sc) => sc.slug);
+      } else if (this._filterCategoryId) {
+        const slug = this.filterCategories?.find(
+          (fc) => fc.id === this._filterCategoryId
+        )?.slug;
+
+        if (slug) queryParams.c = slug;
+      }
+    }
+
+    return querystring.stringify(queryParams, { arrayFormat: "comma" });
+  }
+
+  get filterCategories() {
+    return this._filterCategories?.filter((fc) => fc.resultCount !== 0);
+  }
+
+  get hasAppliedfilter() {
+    return (
+      !!this._searchKeyword || this.filters?.some((f) => !!f.valueList.length)
+    );
+  }
+
+  get isFeaturedSortEnabled() {
+    return (
+      this.pageSpecificData?.orderType === ModelOrder.MANUALLY &&
+      [IkasProductListType.ALL, IkasProductListType.CATEGORY].includes(
+        this._type
+      )
+    );
+  }
+
+  private setPageSpecificSort() {
+    if (
+      this.pageSpecificData?.orderType &&
+      [IkasProductListType.ALL, IkasProductListType.CATEGORY].includes(
+        this._type
+      )
+    ) {
+      switch (this.pageSpecificData.orderType) {
+        case ModelOrder.HIGHEST_DISCOUNT_RATIO:
+          this._sort = IkasProductListSortType.DECRASING_DISCOUNT;
+          break;
+
+        case ModelOrder.LOWEST_DISCOUNT_RATIO:
+          this._sort = IkasProductListSortType.INCREASING_DISCOUNT;
+          break;
+
+        case ModelOrder.HIGHEST_PRICE:
+          this._sort = IkasProductListSortType.DECREASING_PRICE;
+          break;
+
+        case ModelOrder.LOWEST_PRICE:
+          this._sort = IkasProductListSortType.INCREASING_PRICE;
+          break;
+
+        case ModelOrder.NEWEST:
+          this._sort = IkasProductListSortType.LAST_ADDED;
+          break;
+
+        case ModelOrder.OLDEST:
+          this._sort = IkasProductListSortType.FIRST_ADDED;
+          break;
+
+        case ModelOrder.MANUALLY:
+          this._sort = IkasProductListSortType.FEATURED;
+          break;
+
+        default:
+          break;
+      }
+    }
+  }
+
+  private getSortParams(): SearchInputOrderByInput | undefined {
+    let direction: SortByDirectionEnum | undefined = SortByDirectionEnum.DESC;
+    let type: SortByTypeEnum = SortByTypeEnum.CREATED_AT;
+
+    switch (this._sort) {
+      // case IkasProductListSortType.A_Z:
+      //   direction = SortByDirectionEnum.ASC;
+      //   type = SortByTypeEnum.NAME;
+      //   break;
+
+      // case IkasProductListSortType.Z_A:
+      //   direction = SortByDirectionEnum.DESC;
+      //   type = SortByTypeEnum.NAME;
+      //   break;
+
+      case IkasProductListSortType.INCREASING_PRICE:
+        direction = SortByDirectionEnum.ASC;
+        type = SortByTypeEnum.PRICE;
+        break;
+
+      case IkasProductListSortType.DECREASING_PRICE:
+        direction = SortByDirectionEnum.DESC;
+        type = SortByTypeEnum.PRICE;
+        break;
+
+      case IkasProductListSortType.FIRST_ADDED:
+        direction = SortByDirectionEnum.ASC;
+        type = SortByTypeEnum.CREATED_AT;
+        break;
+
+      case IkasProductListSortType.LAST_ADDED:
+        direction = SortByDirectionEnum.DESC;
+        type = SortByTypeEnum.CREATED_AT;
+        break;
+
+      case IkasProductListSortType.INCREASING_DISCOUNT:
+        direction = SortByDirectionEnum.ASC;
+        type = SortByTypeEnum.DISCOUNT_RATIO;
+        break;
+
+      case IkasProductListSortType.DECRASING_DISCOUNT:
+        direction = SortByDirectionEnum.DESC;
+        type = SortByTypeEnum.DISCOUNT_RATIO;
+        break;
+
+      case IkasProductListSortType.FEATURED:
+        if (!this.isSearch) {
+          direction = SortByDirectionEnum.ASC;
+          type = SortByTypeEnum.MANUAL_SORT;
+        } else {
+          return;
+        }
+        break;
+
+      default:
+        break;
+    }
+
+    return {
+      direction,
+      type,
+    };
+  }
+
+  private async searchProducts(
+    page: number,
+    limit: number,
+    productIdList?: string[]
+  ) {
+    const filterList: IkasProductFilterValue[] = [];
+    const facetList: IkasProductFacetInput[] = [];
+
+    this.filters?.forEach((filter) => {
+      if (filter.valueList.length) {
+        filterList.push(
+          new IkasProductFilterValue({
+            id: filter.id,
+            type: filter.type,
+            displayType: filter.displayType,
+            valueList: filter.valueList,
+          })
+        );
+      }
+
+      if (filter.isFacetFilter) {
+        facetList.push({
+          id: filter.id,
+          type: filter.type,
+          displayType: filter.displayType,
+        });
+      }
+    });
+
+    const selectedCategoryIds = this._filterCategories
+      ?.filter((fc) => fc.isSelected)
+      .map((fc) => fc.id);
+
+    const sortParams = this.getSortParams();
+
+    return await IkasProductSearchAPI.searchProducts(
+      {
+        page,
+        perPage: limit,
+        productIdList: this.isStatic
+          ? this._productListPropValue.productIds?.map((p) => p.productId)
+          : productIdList,
+        filterList: filterList as any,
+        facetList: facetList as any,
+        brandId:
+          this._pageType === IkasThemePageType.BRAND &&
+          this._type !== IkasProductListType.SEARCH
+            ? this._filterBrandId
+            : undefined,
+        categoryIdList:
+          selectedCategoryIds && selectedCategoryIds.length
+            ? selectedCategoryIds
+            : this._filterCategoryId
+            ? [this._filterCategoryId]
+            : undefined,
+        priceListId: IkasStorefrontConfig.priceListId,
+        salesChannelId: IkasStorefrontConfig.salesChannelId,
+        query: this._searchKeyword,
+        order:
+          this._type === IkasProductListType.SEARCH
+            ? null
+            : sortParams
+            ? [sortParams]
+            : null,
+      },
+      true
+    );
+  }
+
+  private async getFilters() {
+    const getFiltersResponse = await IkasProductSearchAPI.getProductFilterData(
+      this._filterCategoryId ? this._filterCategoryId : undefined
+    );
+
+    this.filters = getFiltersResponse?.filters.map(
+      (f) => new IkasProductFilter(f, this)
+    );
+    this._filterCategories = getFiltersResponse?.categories;
+
+    if (
+      this.pageType !== IkasThemePageType.CATEGORY &&
+      this._filterCategoryId
+    ) {
+      const filterCategory = this._filterCategories?.find(
+        (fc) => fc.id === this._filterCategoryId
+      );
+      //@ts-ignore
+      if (filterCategory) filterCategory._isSelected = true;
+    }
+
+    if (this.filters)
+      this.filters.sort((f1, f2) => (f1.order > f2.order ? 1 : -1));
+  }
+
+  private applyQueryParamFilters(queryParams?: URLSearchParams) {
+    try {
+      queryParams?.forEach((value, key) => {
+        const filter = this.filters?.find((f) => f.key === key);
+        if (filter) {
+          filter.applyQueryParam(value);
+        }
+      });
+      const querySearch = queryParams?.get("s");
+      if (querySearch) this._searchKeyword = querySearch;
+
+      if (this._pageType !== IkasThemePageType.CATEGORY) {
+        const queryCategory = queryParams?.get("c");
+        const categorySlugs = queryCategory?.split(",");
+
+        if (categorySlugs && categorySlugs.length) {
+          this.filterCategories?.forEach((fc) => {
+            //@ts-ignore
+            fc._isSelected = categorySlugs.some((slug) => slug === fc.slug);
+          });
+        }
+      }
+    } catch (err) {
+      console.log(err);
+    }
+  }
+
+  private applyFacets(facets: Facet[] | undefined | null) {
+    this.filters?.forEach((filter) => {
+      const facet = facets?.find((f) => f.id === filter.id);
+
+      if (facet) {
+        filter.values?.forEach((filterValue) => {
+          const facetValue = facet.values.find(
+            (facetValue) => facetValue.id === filterValue.id
+          );
+          if (facetValue) filterValue.resultCount = facetValue.count;
+          else if (filter.isCustomValueFilter) filterValue.resultCount = null;
+          else filterValue.resultCount = 0;
+        });
+      } else if (filter.isCustomValueFilter) {
+        filter.values?.forEach((v) => (v.resultCount = null));
+      } else {
+        filter.values?.forEach((v) => (v.resultCount = 0));
+      }
+    });
+
+    // Category facets
+    const categoryFacet = facets?.find((f) => f.id === "category");
+    if (categoryFacet) {
+      this._filterCategories?.forEach((filterCategory) => {
+        const facetValue = categoryFacet.values.find(
+          (fv) => fv.id === filterCategory.id
+        );
+        if (facetValue) {
+          filterCategory.resultCount = facetValue.count;
+        } else {
+          filterCategory.resultCount = 0;
+        }
+      });
+    }
+  }
+
+  private applyFilters = async () => {
+    const resultsSet = await this.getInitial();
+
+    if (
+      ![
+        IkasThemePageType.CATEGORY,
+        IkasThemePageType.BRAND,
+        IkasThemePageType.SEARCH,
+      ].includes(this._pageType)
+    )
+      return;
+
+    // Change url params
+    if (resultsSet && this.isBrowser() && !this.isSearch) {
+      this.router?.replace(
+        `${location.pathname}${
+          this.filterQueryParams ? "?" + this.filterQueryParams : ""
+        }`,
+        undefined,
+        { shallow: true }
+      );
+    }
+  };
+
+  clearFilters() {
+    this.filters?.forEach((filter) => filter.clear());
+    this._searchKeyword = "";
+
+    if (this._pageType !== IkasThemePageType.CATEGORY) {
+      this._filterCategoryId = undefined;
+    }
+
+    //@ts-ignore
+    this._filterCategories?.forEach((fc) => (fc._isSelected = false));
+
+    this.applyFilters();
+  }
+
+  private getInitial = async (
+    queryParams?: URLSearchParams,
+    isInfiteScrollReturn?: boolean
+  ) => {
+    this._isLoading = true;
+
+    const fetchRequestTime = Date.now();
+    this._fetchRequestTime = fetchRequestTime;
+
+    try {
+      let page: number | undefined = isInfiteScrollReturn ? this._page : 1;
+      let limit: number | undefined = this._limit;
+
+      if (this.isFilterable && !this.filters) {
+        await this.getFilters();
+      }
+      this.applyQueryParamFilters(queryParams);
+
+      if (this.isSearch && !this.hasAppliedfilter) {
+        this.data = [];
+        this._page = 1;
+        this._minPage = 1;
+        this._count = 0;
+        this._initialized = true;
+        return true;
+      }
+
+      let productIdList: string[] | undefined;
+
+      if (this.isStatic) {
+        page = undefined;
+        limit = undefined;
+      } else if (this.isDiscounted) {
+        page = 1;
+        limit = 10;
+      } else if (this.isRecommended) {
+        page = 1;
+        limit = 10;
+      } else if (this.isLastViewed) {
+        if (this.isBrowser()) {
+          await this.waitForCustomerStoreInit();
+          //@ts-ignore
+          const lastViewedProducts = await IkasStorefrontConfig.store.customerStore.getLastViewedProducts();
+
+          if (lastViewedProducts && lastViewedProducts.length) {
+            productIdList = lastViewedProducts.map((p) => p.productId);
+          }
+        } else {
+          return;
+        }
+      }
+
+      const response = await this.searchProducts(
+        page || 1,
+        limit || 10,
+        productIdList
+      );
+      if (!response || this._fetchRequestTime !== fetchRequestTime) return;
+
+      let data: IkasProductDetail[] = [];
+
+      if (this.isStatic || this.isLastViewed) {
+        const idList = this.isStatic
+          ? this._productListPropValue.productIds
+          : //@ts-ignore
+            IkasStorefrontConfig.store.customerStore._lastViewedProducts;
+
+        data =
+          (idList
+            ?.map((pID) => {
+              const product = response.data.find((p) => p.id === pID.productId);
+              const variant = product?.variants.find(
+                (v) => v.id === pID.variantId
+              );
+
+              if (product && variant)
+                return new IkasProductDetail(product!, variant!.variantValues);
+            })
+            .filter((p) => !!p) as IkasProductDetail[]) || [];
+      } else {
+        data = response.data.map((product) => {
+          const selectedVariant = product.variants.find((v) => v.isActive);
+          const productDetail = new IkasProductDetail(
+            product,
+            (selectedVariant || product.variants[0]).variantValues
+          );
+
+          return productDetail;
+        });
+      }
+
+      this.applyFacets(response.facets);
+
+      this.data = data;
+      this._count = response.count;
+      this._initialized = true;
+      this._page = page || 1;
+      this._minPage = this.page;
+
+      if (!isInfiteScrollReturn) this._infiniteScrollPage = null;
+      this.handleListingEvent();
+
+      return true;
+    } catch (err) {
+      console.log(err);
+    } finally {
+      if (fetchRequestTime === this._fetchRequestTime) this._isLoading = false;
+    }
+  };
+
+  getPrev = async () => {
+    if (
+      this.isStatic ||
+      this.isDiscounted ||
+      this.isRecommended ||
+      this.isLastViewed ||
+      this._isLoading ||
+      !this.hasPrev
+    )
+      return;
+
+    this._isLoading = true;
+
+    try {
+      const minPage = this._minPage! - 1;
+
+      const response = await this.searchProducts(minPage, this.limit);
+      if (!response) return;
+
+      const data = response.data.map((product) => {
+        const selectedVariant = product.variants.find((v) => v.isActive);
+        const productDetail = new IkasProductDetail(
+          product,
+          (selectedVariant || product.variants[0]).variantValues
+        );
+
+        return productDetail;
+      });
+
+      this.data = data.concat(this.data);
+      this._count = response.count;
+      this._minPage = minPage;
+    } catch (err) {
+      console.log(err);
+    } finally {
+      this._isLoading = false;
+    }
+  };
+
+  getNext = async () => {
+    if (
+      this.isStatic ||
+      this.isDiscounted ||
+      this.isRecommended ||
+      this.isLastViewed ||
+      this._isLoading ||
+      !this.hasNext
+    )
+      return;
+
+    this._isLoading = true;
+
+    try {
+      const response = await this.searchProducts(this.page + 1, this.limit);
+      if (!response) return;
+
+      const data = response.data.map((product) => {
+        const selectedVariant = product.variants.find((v) => v.isActive);
+        const productDetail = new IkasProductDetail(
+          product,
+          (selectedVariant || product.variants[0]).variantValues
+        );
+
+        return productDetail;
+      });
+
+      this.data = this.data.concat(data);
+      this._count = response.count;
+      this._page = this.page + 1;
+    } catch (err) {
+      console.log(err);
+    } finally {
+      this._isLoading = false;
+    }
+  };
+
+  getPage = async (page: number) => {
+    if (
+      this._isLoading ||
+      this.isStatic ||
+      this.isDiscounted ||
+      this.isRecommended ||
+      this.isLastViewed
+    )
+      return;
+    this._isLoading = true;
+
+    try {
+      const response = await this.searchProducts(page, this.limit);
+      if (!response) return;
+
+      const data = response.data.map((product) => {
+        const selectedVariant = product.variants.find((v) => v.isActive);
+        const productDetail = new IkasProductDetail(
+          product,
+          (selectedVariant || product.variants[0]).variantValues
+        );
+
+        return productDetail;
+      });
+
+      this.data = data;
+      this._count = response.count;
+      this._page = page;
+      this._minPage = page;
+    } catch (err) {
+      console.log(err);
+    } finally {
+      this._isLoading = false;
+    }
+  };
+
+  async setSortType(sortType: IkasProductListSortType) {
+    this._sort = sortType;
+    await this.getInitial();
+  }
+
+  async onFilterCategoryClick(
+    filterCategory: IkasFilterCategory,
+    disableRoute = false
+  ) {
+    if (disableRoute) {
+      this._filterCategories?.forEach((fc) => {
+        if (fc.id === filterCategory.id) {
+          //@ts-ignore
+          fc._isSelected = !fc.isSelected;
+        }
+      });
+      await this.applyFilters();
+    } else {
+      this.router?.push(
+        filterCategory.href +
+          (this.filterQueryParams ? "?" + this.filterQueryParams : "")
+      );
+    }
+  }
+
+  toJSON() {
+    return {
+      data: this.data,
+      type: this._type,
+      pageType: this._pageType,
+      sort: this._sort,
+      limit: this._limit,
+      page: this._page,
+      count: this._count,
+      searchKeyword: this._searchKeyword,
+      initialized: this._initialized,
+      minPage: this._minPage,
+      filterBrandId: this._filterBrandId,
+      filterCategoryId: this._filterCategoryId,
+      filterCategories: this._filterCategories,
+      filters: this.filters,
+      recommendFor: this._recommendFor,
+      productListPropValue: this._productListPropValue,
+      pageSpecificData: this.pageSpecificData,
+    };
+  }
+
+  setVisibleInfiniteScrollPage = (page: number) => {
+    if (this._infiniteScrollPage === page) return;
+
+    this._infiniteScrollPage = page;
+
+    this.router?.replace(
+      `${location.pathname}${
+        this.filterQueryParams ? "?" + this.filterQueryParams : ""
+      }`,
+      undefined,
+      { shallow: true }
+    );
+  };
+
+  private restoreInfiniteScrollPage() {
+    const queryParams = this.getQueryParams();
+    const pageStr = queryParams?.get("page");
+
+    if (pageStr) {
+      const page = parseInt(pageStr);
+      if (!isNaN(page)) {
+        this._page = page;
+        this._infiniteScrollPage = page;
+      }
+    }
+  }
+
+  private getQueryParams() {
+    if (!this.isBrowser()) return;
+    return new URLSearchParams(location.search);
+  }
+
+  private isBrowser() {
+    return typeof window !== "undefined";
+  }
+
+  private waitForCustomerStoreInit() {
+    return new Promise((resolve) => {
+      const interval = setInterval(() => {
+        if (IkasStorefrontConfig.store.customerStore.initialized) {
+          clearInterval(interval);
+          resolve(null);
+        }
+      }, 1000);
+    });
+  }
+
+  private handleListingEvent() {
+    if (this.searchKeyword && this.data.length) {
+      Analytics.viewSearchResults(this._searchKeyword, this.data);
+    } else if (this.data.length && this._type === IkasProductListType.ALL) {
+      Analytics.viewListing(this.data);
+    }
+  }
+
+  private searchDebouncer = _debounce(() => {
+    this.applyFilters();
+  }, 100);
+
+  private searchAnalyticsDebouncer = _debounce(() => {
+    Analytics.search(this._searchKeyword);
+  }, 1000);
+}
+
+export type IkasProductListParams = {
+  data?: IkasProductDetail[];
+  type?: IkasProductListType;
+  pageType: IkasThemePageType;
+  sort?: IkasProductListSortType;
+  limit?: number;
+  page?: number;
+  count?: number;
+  searchKeyword?: string;
+  initialized?: boolean;
+  minPage?: number;
+  filterBrandId?: string;
+  filterCategoryId?: string;
+  filters?: IkasProductFilter[];
+  filterCategories?: IkasFilterCategory[];
+  recommendFor?: string;
+  productListPropValue: IkasProductListPropValue;
+  pageSpecificData?: IkasCategory | IkasBrand | null;
+};
+
+export enum IkasProductListType {
+  ALL = "ALL",
+  STATIC = "STATIC",
+  DISCOUNTED = "DISCOUNTED",
+  RECOMMENDED = "RECOMMENDED",
+  CATEGORY = "CATEGORY",
+  SEARCH = "SEARCH",
+  LAST_VIEWED = "LAST_VIEWED",
+}
+
+export enum IkasProductListSortType {
+  // A_Z = "A_Z",
+  // Z_A = "Z_A",
+  INCREASING_PRICE = "INCREASING_PRICE",
+  DECREASING_PRICE = "DECREASING_PRICE",
+  LAST_ADDED = "LAST_ADDED",
+  FIRST_ADDED = "FIRST_ADDED",
+  INCREASING_DISCOUNT = "INCREASING_DISCOUNT",
+  DECRASING_DISCOUNT = "DECRASING_DISCOUNT",
+  FEATURED = "FEATURED",
+}
+
+type Facet = {
+  id: string;
+  values: FacetValue[];
+};
+0;
+type FacetValue = {
+  id: string;
+  count: number;
+};