@ikas/storefront 1.0.21 → 2.0.0-alpha.1

package/src/models/data/product-filter/index.ts

@@ -0,0 +1,412 @@
+import { makeAutoObservable } from "mobx";
+import { SearchInputFilterListInput } from "../../../__generated__/global-types";
+import { IkasImage } from "../image";
+import _sortBy from "lodash/sortBy";
+import { IkasProductList } from "../../../models/ui";
+import _cloneDeep from "lodash/cloneDeep";
+
+export class IkasProductFilter {
+  id: string;
+  key: string;
+  name: string;
+  order: number;
+  type: IkasProductFilterType;
+  displayType: IkasProductFilterDisplayType;
+  isMultiSelect: boolean;
+  isFacetFilter: boolean | null;
+  values?: IkasApplicableProductFilterValue[] | null = null;
+  customValues?: string[] | null = null;
+  settings?: IkasProductFilterSettings | null = null;
+
+  // Extra
+  private _numberRange?: RangeValue | null = null; // Selected range value for the number slider
+  numberRangeLimit?: RangeValue | null = null; // Limits for the number range slider
+  numberRangeListOptions?: NumberRangeListOption[] | null = null; // List options for the number range select
+
+  private productList?: IkasProductList | null = null;
+
+  constructor(
+    data: Partial<IkasProductFilter> = {},
+    productList?: IkasProductList | undefined | null
+  ) {
+    this.id = data.id || "";
+    this.key = data.key || "";
+    this.name = data.name || "";
+    this.order = data.order || 0;
+    this.type = data.type || IkasProductFilterType.BRAND;
+    this.displayType = data.displayType || IkasProductFilterDisplayType.BOX;
+    this.isMultiSelect = data.isMultiSelect || false;
+    this.isFacetFilter = data.isFacetFilter || false;
+    this.values = data.values
+      ? data.values.map((v) => new IkasApplicableProductFilterValue(v))
+      : null;
+    this.customValues = data.customValues || null;
+    this.settings = data.settings
+      ? new IkasProductFilterSettings(data.settings)
+      : null;
+
+    if (
+      this.displayType === IkasProductFilterDisplayType.NUMBER_RANGE_LIST &&
+      this.customValues &&
+      this.customValues.length
+    ) {
+      this.numberRangeListOptions = this.customValues.map((cv) => {
+        return new NumberRangeListOption({
+          key: cv,
+          ...parseRangeStr(cv),
+          isSelected: false,
+        });
+      });
+    }
+
+    if (
+      this.displayType === IkasProductFilterDisplayType.NUMBER_RANGE &&
+      this.customValues &&
+      this.customValues.length
+    ) {
+      const value = this.customValues[0];
+      this.numberRangeLimit = parseRangeStr(value);
+    }
+
+    this.productList = productList;
+
+    makeAutoObservable(this);
+  }
+
+  get isCustomValueFilter() {
+    return [
+      IkasProductFilterDisplayType.NUMBER_RANGE_LIST,
+      IkasProductFilterDisplayType.NUMBER_RANGE,
+    ].includes(this.displayType);
+  }
+
+  get valueList() {
+    if (this._numberRange) return [this.rangeToId(this._numberRange)];
+    if (this.numberRangeListOptions)
+      return this.numberRangeListOptions
+        .filter((o) => o.isSelected)
+        .map((o) => this.rangeToId(o));
+
+    return this.values?.filter((v) => v.isSelected).map((v) => v.id) || [];
+  }
+
+  get keyList() {
+    if (this._numberRange) return [this.rangeToId(this._numberRange)];
+    if (this.numberRangeListOptions)
+      return this.numberRangeListOptions
+        .filter((o) => o.isSelected)
+        .map((o) => this.rangeToId(o));
+
+    return this.values?.filter((v) => v.isSelected).map((v) => v.key) || [];
+  }
+
+  get displayedValues() {
+    const sortType =
+      this.settings?.sortType || IkasProductFilterSortType.ALPHABETICAL_ASC;
+
+    const isDesc = [
+      IkasProductFilterSortType.ALPHABETICAL_DESC,
+      IkasProductFilterSortType.PRODUCT_COUNT_DESC,
+    ].includes(sortType);
+    const isAlphabetical = [
+      IkasProductFilterSortType.ALPHABETICAL_ASC,
+      IkasProductFilterSortType.ALPHABETICAL_DESC,
+    ].includes(sortType);
+
+    let _values = this.values?.filter((v) =>
+      v.resultCount === 0 ? v.isSelected : true
+    );
+
+    if (isAlphabetical) _values = _sortBy(_values, "name");
+    else _values = _sortBy(_values, "resultCount");
+
+    if (isDesc) _values = _values?.reverse();
+
+    return _values;
+  }
+
+  get numberRange() {
+    return this._numberRange;
+  }
+
+  onFilterValueClick(filterValue: IkasApplicableProductFilterValue) {
+    if (this.isCustomValueFilter) {
+      throw new Error(
+        "onFilterValueClick cannot be used with NUMBER_RANGE | NUMBER_RANGE_LIST types!"
+      );
+    }
+
+    (filterValue as any)._isSelected = !filterValue.isSelected;
+
+    if (!this.isMultiSelect && filterValue.isSelected) {
+      this.values?.forEach((fv) => {
+        if (fv.id !== filterValue.id) (fv as any)._isSelected = false;
+      });
+    }
+
+    //@ts-ignore
+    this.productList?.applyFilters();
+  }
+
+  onNumberRangeClick(option: NumberRangeListOption) {
+    if (this.displayType !== IkasProductFilterDisplayType.NUMBER_RANGE_LIST)
+      throw new Error(
+        "onNumberRangeClick can only be used with NUMBER_RANGE filters!"
+      );
+
+    (option as any)._isSelected = !option.isSelected;
+
+    if (!this.isMultiSelect && option.isSelected) {
+      this.numberRangeListOptions?.forEach((nro) => {
+        if (nro.key !== option.key) (nro as any)._isSelected = false;
+      });
+    }
+
+    //@ts-ignore
+    this.productList?.applyFilters();
+  }
+
+  onNumberRangeChange(numberRange: RangeValue | null) {
+    if (this.displayType !== IkasProductFilterDisplayType.NUMBER_RANGE)
+      throw new Error(
+        "onNumberRangeChange can only be used with NUMBER_RANGE filters!"
+      );
+
+    if (!numberRange) {
+      this._numberRange = null;
+
+      //@ts-ignore
+      this.productList?.applyFilters();
+      return;
+    }
+
+    const newRange = new RangeValue(_cloneDeep(numberRange));
+    if (newRange.from < this.numberRangeLimit!.from)
+      newRange.from = this._numberRange!.from;
+    if (
+      newRange.to &&
+      this.numberRangeLimit?.to &&
+      newRange.to > this.numberRangeLimit.to
+    )
+      newRange.to = this.numberRangeLimit.to;
+
+    this._numberRange = newRange;
+
+    //@ts-ignore
+    this.productList?.applyFilters();
+  }
+
+  clear() {
+    this._numberRange = null;
+    this.numberRangeListOptions?.forEach(
+      (o) => ((o as any)._isSelected = false)
+    );
+    this.values?.forEach((v) => ((v as any)._isSelected = false));
+  }
+
+  toInput(): SearchInputFilterListInput {
+    return {
+      id: this.key,
+      type: this.type as any,
+      valueList: this.valueList,
+      useAndFilter: this.settings?.useAndFilter,
+    };
+  }
+
+  toJSON() {
+    const value = {
+      ...this,
+    };
+
+    delete value.productList;
+
+    return value;
+  }
+
+  applyQueryParam(value: string) {
+    const valueKeys = value.split(",");
+
+    if (this.displayType === IkasProductFilterDisplayType.NUMBER_RANGE) {
+      this._numberRange = new RangeValue(parseRangeStr(value));
+    } else if (
+      this.displayType === IkasProductFilterDisplayType.NUMBER_RANGE_LIST
+    ) {
+      this.numberRangeListOptions?.forEach((o) => {
+        if (valueKeys.includes(o.key)) (o as any)._isSelected = true;
+      });
+    } else {
+      this.values?.forEach((filterValue) => {
+        if (
+          valueKeys.includes(filterValue.key) &&
+          filterValue.resultCount !== 0
+        )
+          (filterValue as any)._isSelected = true;
+      });
+    }
+  }
+
+  private rangeToId(range: RangeValue) {
+    return `${range.from}:${range.to || ""}`;
+  }
+}
+
+export class IkasApplicableProductFilterValue {
+  id: string;
+  key: string;
+  name: string;
+  colorCode?: string | null = null;
+  thumbnailImageId?: string | null = null;
+  thumbnailImage?: IkasImage | null = null;
+  resultCount?: number | null = null;
+
+  // Extra
+  private _isSelected? = false;
+
+  constructor(data: Partial<IkasApplicableProductFilterValue> = {}) {
+    this.id = data.id || "";
+    this.key = data.key || "";
+    this.name = data.name || "";
+    this.colorCode = data.colorCode || null;
+    this.thumbnailImageId = data.thumbnailImageId || null;
+    if (this.thumbnailImageId)
+      this.thumbnailImage = new IkasImage(this.thumbnailImageId);
+
+    this._isSelected = data.isSelected || false;
+    this.resultCount =
+      data.resultCount !== undefined && data.resultCount !== null
+        ? data.resultCount
+        : null;
+
+    makeAutoObservable(this);
+  }
+
+  get isSelected() {
+    return this._isSelected;
+  }
+
+  toJSON() {
+    return {
+      ...this,
+      isSelected: this._isSelected,
+    };
+  }
+}
+
+export class IkasProductFilterValue {
+  id: string;
+  type: IkasProductFilterType;
+  displayType: IkasProductFilterDisplayType;
+  valueList: string[];
+
+  constructor(data: IkasProductFilterValue) {
+    this.id = data.id;
+    this.type = data.type;
+    this.displayType = data.displayType;
+    this.valueList = data.valueList;
+
+    makeAutoObservable(this);
+  }
+}
+
+export class IkasProductFilterSettings {
+  useAndFilter?: boolean | null = null;
+  showCollapsedOnDesktop: boolean;
+  showCollapsedOnMobile: boolean;
+  sortType: IkasProductFilterSortType;
+
+  constructor(data: Partial<IkasProductFilterSettings>) {
+    this.useAndFilter = data.useAndFilter || false;
+    this.showCollapsedOnDesktop = data.showCollapsedOnDesktop || false;
+    this.showCollapsedOnMobile = data.showCollapsedOnMobile || false;
+    this.sortType = data.sortType || IkasProductFilterSortType.ALPHABETICAL_ASC;
+
+    makeAutoObservable(this);
+  }
+}
+
+export type IkasProductFacetInput = {
+  id: string;
+  type: IkasProductFilterType;
+  displayType: IkasProductFilterDisplayType;
+};
+
+export enum IkasProductFilterType {
+  ATTRIBUTE = "ATTRIBUTE",
+  BRAND = "BRAND",
+  DISCOUNT_RATIO = "DISCOUNT_RATIO",
+  PRICE = "PRICE",
+  STOCK_STATUS = "STOCK_STATUS",
+  TAG = "TAG",
+  VARIANT_TYPE = "VARIANT_TYPE",
+}
+
+export enum IkasProductFilterDisplayType {
+  BOX = "BOX",
+  DATE_RANGE = "DATE_RANGE",
+  LIST = "LIST",
+  NUMBER_RANGE_LIST = "NUMBER_RANGE_LIST",
+  NUMBER_RANGE = "NUMBER_RANGE",
+  SWATCH = "SWATCH",
+}
+
+export enum IkasProductFilterSortType {
+  ALPHABETICAL_ASC = "ALPHABETICAL_ASC",
+  ALPHABETICAL_DESC = "ALPHABETICAL_DESC",
+  PRODUCT_COUNT_ASC = "PRODUCT_COUNT_ASC",
+  PRODUCT_COUNT_DESC = "PRODUCT_COUNT_DESC",
+}
+
+export class RangeValue {
+  from: number;
+  to: number | undefined | null;
+
+  constructor(data: Partial<NumberRangeListOption>) {
+    this.from = data.from || 0;
+    this.to = data.to || null;
+
+    makeAutoObservable(this);
+  }
+}
+
+class NumberRangeListOption {
+  from: number;
+  to: number | undefined | null;
+  key: string;
+  private _isSelected: boolean;
+
+  constructor(data: Partial<NumberRangeListOption>) {
+    this.from = data.from || 0;
+    this.to = data.to || null;
+    this.key = data.key || "";
+    this._isSelected = data.isSelected || false;
+
+    makeAutoObservable(this);
+  }
+
+  get isSelected() {
+    return this._isSelected;
+  }
+
+  toJSON() {
+    return {
+      ...this,
+      isSelected: this._isSelected,
+    };
+  }
+}
+
+export function parseRangeStr(rangeStr: string): RangeValue {
+  try {
+    const parsedValues = rangeStr.split(":").map((i) => parseInt(i));
+    return new RangeValue({
+      from: isNaN(parsedValues[0]) ? 0 : parsedValues[0],
+      to: isNaN(parsedValues[1]) ? undefined : parsedValues[1],
+    });
+  } catch (err) {
+    console.log(err);
+    return new RangeValue({
+      from: 0,
+      to: 0,
+    });
+  }
+}