@ikas/storefront 4.0.0-alpha.50 → 4.0.0-alpha.52

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

@@ -1,276 +0,0 @@
-import { IkasImage } from "../../image";
-import {
-  IkasProductFilterDisplayType,
-  IkasProductFilterSortType,
-  IkasProductFilterType,
-  IkasProductFilter as IProductFilter,
-  IkasApplicableProductFilterValue as IApplicableProductFilterValue,
-  IkasProductFilterValue as IProductFilterValue,
-  IkasProductFilterSettings as IProductFilterSettings,
-  IkasFilterRangeValue as IFilterRangeValue,
-  IkasProductFilterNumberRangeListOption as IProductFilterNumberRangeListOption,
-} from "@ikas/storefront-models";
-import { makeAutoObservable } from "mobx";
-import { IkasProductFilterFunctions } from "@ikas/storefront-model-functions";
-import { IkasProductList } from "../../../ui/product-list";
-
-export class IkasProductFilter implements IProductFilter {
-  id: string;
-  key: string;
-  name: string;
-  order: number;
-  type: IkasProductFilterType;
-  displayType: IkasProductFilterDisplayType;
-  isMultiSelect: boolean;
-  isFacetFilter: boolean | null;
-  values?: IkasApplicableProductFilterValue[] | null;
-  customValues?: string[] | null;
-  settings?: IkasProductFilterSettings | null;
-
-  // Extra
-  private productList?: IkasProductList | null = null;
-  private _numberRange?: IkasFilterRangeValue | null; // Selected range value for the number slider
-  numberRangeLimit?: IkasFilterRangeValue | null; // Limits for the number range slider
-  numberRangeListOptions?: IkasProductFilterNumberRangeListOption[] | null; // List options for the number range select
-
-  constructor(data: IProductFilter, productList?: IkasProductList | 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 IkasProductFilterNumberRangeListOption({
-          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 numberRange() {
-    return this._numberRange;
-  }
-
-  get isCustomValueFilter() {
-    return IkasProductFilterFunctions.isCustomValueFilter(this);
-  }
-
-  get isStockFilter() {
-    return IkasProductFilterFunctions.isStockFilter(this);
-  }
-
-  get valueList() {
-    return IkasProductFilterFunctions.getValueList(this);
-  }
-
-  get keyList() {
-    return IkasProductFilterFunctions.getKeyList(this);
-  }
-
-  get displayedValues() {
-    return IkasProductFilterFunctions.getDisplayedValues(
-      this
-    ) as IkasApplicableProductFilterValue[];
-  }
-
-  onFilterValueClick = (filterValue: IkasApplicableProductFilterValue) => {
-    IkasProductFilterFunctions.onFilterValueClick(this, filterValue);
-
-    //@ts-ignore
-    this.productList?.applyFilters();
-  };
-
-  onNumberRangeClick = (option: IkasProductFilterNumberRangeListOption) => {
-    IkasProductFilterFunctions.onNumberRangeClick(this, option);
-
-    //@ts-ignore
-    this.productList?.applyFilters();
-  };
-
-  onNumberRangeChange = (numberRange: IkasFilterRangeValue | null) => {
-    IkasProductFilterFunctions.onNumberRangeChange(this, numberRange);
-
-    //@ts-ignore
-    this.productList?.applyFilters();
-  };
-
-  clear = () => {
-    IkasProductFilterFunctions.clear(this);
-  };
-
-  toInput = () => {
-    return IkasProductFilterFunctions.toInput(this);
-  };
-
-  toJSON() {
-    const value = {
-      ...this,
-    };
-
-    delete value.productList;
-
-    return value;
-  }
-
-  applyQueryParam = (value: string) => {
-    IkasProductFilterFunctions.applyQueryParam(this, value);
-  };
-}
-
-export class IkasApplicableProductFilterValue
-  implements IApplicableProductFilterValue
-{
-  id: string;
-  key: string;
-  name: string;
-  colorCode?: string | null;
-  thumbnailImageId?: string | null;
-  thumbnailImage?: IkasImage | null;
-  resultCount?: number | null;
-
-  // Extra
-  isSelected: boolean;
-
-  constructor(data: IApplicableProductFilterValue) {
-    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({
-        id: this.thumbnailImageId,
-        isVideo: false,
-      });
-
-    this.isSelected = data.isSelected || false;
-    this.resultCount =
-      data.resultCount !== undefined && data.resultCount !== null
-        ? data.resultCount
-        : null;
-
-    makeAutoObservable(this);
-  }
-}
-
-export class IkasProductFilterValue implements IProductFilterValue {
-  id: string;
-  type: IkasProductFilterType;
-  displayType: IkasProductFilterDisplayType;
-  valueList: string[];
-
-  constructor(data: IProductFilterValue) {
-    this.id = data.id;
-    this.type = data.type;
-    this.displayType = data.displayType;
-    this.valueList = data.valueList;
-
-    makeAutoObservable(this);
-  }
-}
-
-export class IkasProductFilterSettings implements IProductFilterSettings {
-  useAndFilter?: boolean | null;
-  showCollapsedOnDesktop: boolean;
-  showCollapsedOnMobile: boolean;
-  sortType: IkasProductFilterSortType;
-  customSortedValues: string[] | null;
-
-  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;
-    this.customSortedValues = data.customSortedValues || null;
-
-    makeAutoObservable(this);
-  }
-}
-
-export type IkasProductFacetInput = {
-  id: string;
-  type: IkasProductFilterType;
-  displayType: IkasProductFilterDisplayType;
-};
-
-export class IkasFilterRangeValue implements IFilterRangeValue {
-  from: number;
-  to: number | undefined | null;
-
-  constructor(data: Partial<IFilterRangeValue>) {
-    this.from = data.from || 0;
-    this.to = data.to || null;
-
-    makeAutoObservable(this);
-  }
-}
-
-export class IkasProductFilterNumberRangeListOption
-  implements IProductFilterNumberRangeListOption
-{
-  from: number;
-  to: number | undefined | null;
-  key: string;
-  private _isSelected: boolean;
-
-  constructor(data: Partial<IProductFilterNumberRangeListOption>) {
-    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 {
-  IkasProductFilterDisplayType,
-  IkasProductFilterSortType,
-  IkasProductFilterType,
-};
-
-export function parseRangeStr(rangeStr: string) {
-  return IkasProductFilterFunctions.parseRangeStr(rangeStr);
-}

package/src/models/data/product/image/index.ts

@@ -1,22 +0,0 @@
-import { IkasImage } from "../../image";
-import { IkasProductImage as IProductImage } from "@ikas/storefront-models";
-import { makeAutoObservable } from "mobx";
-
-export class IkasProductImage implements IProductImage {
-  imageId: string | null;
-  isMain: boolean;
-  isVideo: boolean | null;
-  order: number;
-
-  image?: IkasImage | null;
-
-  constructor(data: IProductImage) {
-    this.imageId = data.imageId || null;
-    this.isMain = data.isMain || false;
-    this.isVideo = data.isVideo || false;
-    this.order = data.order;
-    this.image = data.image ? new IkasImage(data.image) : null;
-
-    makeAutoObservable(this);
-  }
-}

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

@@ -1,336 +0,0 @@
-import _sortBy from "lodash/sortBy";
-
-import { IkasCategory } from "../category";
-import { IkasProductVariant } from "./variant";
-import { IkasProductAttributeValue } from "./attribute-value";
-import { IkasProductVariantType } from "./variant-type";
-import { IkasBrand } from "../brand";
-import { IkasHTMLMetaData } from "../html-meta-data";
-import { IkasProductTag } from "./tag";
-import {
-  IkasProduct as IProduct,
-  IkasProductType,
-} from "@ikas/storefront-models";
-import { IkasProductOptionSet } from "./option-set";
-import { makeAutoObservable } from "mobx";
-import { IkasProductFunctions } from "@ikas/storefront-model-functions";
-import { IkasVariantValue } from "../variant-type/variant-value";
-import { IkasProductCampaign } from "./campaign";
-import { IkasStorefrontConfig } from "@ikas/storefront-config";
-import { Analytics } from "../../../analytics";
-import { IkasVariantType } from "../variant-type";
-import { IkasBaseStore } from "../../../store/base";
-import { IkasProductAttributeMap } from "./attribute-value";
-import _groupBy from "lodash/groupBy";
-import { IkasProductBaseUnit } from "./base-unit";
-import { formatCurrency } from "../../../utils";
-
-export class IkasProduct implements IProduct {
-  id: string;
-  name: string;
-  type: IkasProductType;
-  description: string;
-  shortDescription: string;
-  metaData: IkasHTMLMetaData | null = null;
-  brand: IkasBrand | null = null;
-  categories: IkasCategory[];
-  tags: IkasProductTag[] | null = null;
-  variants: IkasProductVariant[];
-  attributes: IkasProductAttributeValue[];
-  variantTypes: IkasProductVariantType[];
-  productOptionSetId: string | null = null;
-  baseUnit: IkasProductBaseUnit | null;
-
-  // Extra
-  productOptionSet?: IkasProductOptionSet | null = null;
-  campaigns?: IkasProductCampaign[] | null = null;
-  selectedVariantValues: IkasVariantValue[] = [];
-
-  constructor(data: Partial<IkasProduct> = {}) {
-    this.id = data.id || Date.now() + "";
-    this.name = data.name || "";
-    this.type = data.type || IkasProductType.PHYSICAL;
-    this.description = data.description || "";
-    this.shortDescription = data.shortDescription || "";
-    this.metaData = data.metaData ? new IkasHTMLMetaData(data.metaData) : null;
-
-    this.brand = data.brand ? new IkasBrand(data.brand) : null;
-    this.categories = data.categories
-      ? data.categories.map((c) => new IkasCategory(c))
-      : [];
-    this.tags = data.tags
-      ? data.tags.map((tag) => new IkasProductTag(tag))
-      : [];
-    this.variants = data.variants
-      ? data.variants.map((v) => new IkasProductVariant(v))
-      : [];
-    this.attributes = data.attributes
-      ? data.attributes.map((a) => new IkasProductAttributeValue(a))
-      : [];
-    this.variantTypes = data.variantTypes
-      ? data.variantTypes.map((v) => new IkasProductVariantType(v))
-      : [];
-    this.productOptionSetId = data.productOptionSetId || null;
-    this.baseUnit = data.baseUnit
-      ? new IkasProductBaseUnit(data.baseUnit)
-      : null;
-
-    this.productOptionSet = data.productOptionSet
-      ? new IkasProductOptionSet(data.productOptionSet)
-      : null;
-    this.campaigns =
-      data.campaigns?.map((c) => new IkasProductCampaign(c)) || null;
-    this.selectedVariantValues = data.selectedVariantValues || [];
-
-    this.variantTypes = _sortBy(this.variantTypes, "order");
-
-    this.setOptionPrices();
-
-    makeAutoObservable(this);
-  }
-
-  get hasVariant() {
-    return IkasProductFunctions.hasVariant(this);
-  }
-
-  get hasStock() {
-    return IkasProductFunctions.hasStock(this);
-  }
-
-  get hasValidProductOptionValues() {
-    if (this.productOptionSet) {
-      return this.productOptionSet.hasValidValues;
-    } else {
-      return true;
-    }
-  }
-
-  get href() {
-    return IkasProductFunctions.getSelectedVariantHref(
-      this,
-      this.selectedVariantValues
-    );
-  }
-
-  get productHref() {
-    return IkasProductFunctions.getProductHref(this);
-  }
-
-  get mainVariantType() {
-    return IkasProductFunctions.getMainVariantType(this) as
-      | IkasVariantType
-      | undefined;
-  }
-
-  get mainVariantValue() {
-    return IkasProductFunctions.getMainVariantValue(
-      this.selectedVariantValues
-    ) as IkasVariantValue | undefined;
-  }
-
-  get selectedVariant() {
-    if (!this.hasVariant) return this.variants[0];
-
-    const selectedVariantValueIds = this.selectedVariantValues.map(
-      (vv) => vv.id
-    );
-
-    return this.variants.find((productVariant) =>
-      productVariant.variantValues.every((vv) =>
-        selectedVariantValueIds.includes(vv.id)
-      )
-    )!;
-  }
-
-  get displayedVariantTypes(): IkasDisplayedVariantType[] {
-    return IkasProductFunctions.getDisplayedVariantTypes(
-      this,
-      this.selectedVariantValues
-    ) as IkasDisplayedVariantType[];
-  }
-
-  get isCustomerReviewEnabled() {
-    return IkasStorefrontConfig.isCustomerReviewEnabled();
-  }
-
-  get isCustomerReviewLoginRequired() {
-    return IkasStorefrontConfig.isCustomerReviewLoginRequired();
-  }
-
-  get isAddToCartEnabled() {
-    return (
-      this.hasValidProductOptionValues &&
-      (this.selectedVariant.hasStock || this.selectedVariant.sellIfOutOfStock)
-    );
-  }
-
-  get groupedAttributeValues(): IkasProductAttributeMap[] {
-    const groupedValues = _groupBy(this.attributes, "productAttributeId");
-
-    return (this.attributes
-      ?.map((attribute) => {
-        const attributeId = attribute.productAttributeId;
-        if (!attributeId) return;
-
-        const values = groupedValues[attributeId];
-        if (values?.length && values[0].productAttribute)
-          return {
-            attribute: values[0].productAttribute,
-            values: values,
-          };
-      })
-      .filter((v) => !!v) || []) as IkasProductAttributeMap[];
-  }
-
-  get selectedVariantUnitPriceText() {
-    return this.getVariantUnitPriceText(this.selectedVariant);
-  }
-
-  selectVariantValue(variantValue: IkasVariantValue) {
-    const metaData = this.metaData;
-    const selectedVariantValues = this.selectedVariantValues.map((vv) => {
-      if (vv.variantTypeId === variantValue.variantTypeId) return variantValue;
-      return vv;
-    });
-
-    let selectedVariant = this.variants.find(
-      (variant) =>
-        variant.isActive &&
-        selectedVariantValues.every((selectedVariantValue) =>
-          variant.variantValues.some(
-            (vvv) => vvv.id === selectedVariantValue.id
-          )
-        )
-    );
-
-    if (selectedVariant) {
-      this.selectedVariantValues = selectedVariantValues;
-    } else {
-      const variantTypeIndex = this.variantTypes.findIndex(
-        (pvt) => pvt.variantType.id === variantValue.variantTypeId
-      );
-
-      if (variantTypeIndex > 0) {
-        const parentVariantTypes = this.variantTypes.slice(0, variantTypeIndex);
-        const selectedParentVariantValues = this.selectedVariantValues.filter(
-          (vv) =>
-            parentVariantTypes.some(
-              (pvt) => pvt.variantType.id === vv.variantTypeId
-            )
-        );
-
-        const allVariantValues = [...selectedParentVariantValues, variantValue];
-        selectedVariant = this.variants.find(
-          (variant) =>
-            variant.isActive &&
-            allVariantValues.every((avv) =>
-              variant.variantValues.some((vv) => vv.id === avv.id)
-            )
-        );
-      } else {
-        // Try to find a variant by only changing the last variant value
-        // This helps with UX
-        const notLastVariantValues = selectedVariantValues.slice(
-          0,
-          selectedVariantValues.length - 1
-        );
-
-        selectedVariant = this.variants.find(
-          (variant) =>
-            variant.isActive &&
-            notLastVariantValues.every((nlvv) =>
-              variant.variantValues.some((vv) => vv.id === nlvv.id)
-            )
-        );
-
-        if (!selectedVariant)
-          selectedVariant = this.variants.find(
-            (variant) =>
-              variant.isActive &&
-              variant.variantValues.some((vv) => vv.id === variantValue.id)
-          );
-      }
-
-      if (selectedVariant)
-        this.selectedVariantValues = selectedVariant.variantValues;
-      else return; // This case should not happen
-    }
-
-    const variantParams = this.variantTypes
-      .map((pvt) => {
-        const vt = pvt.variantType;
-        const selectedVariantValue = vt.values.find((vv) =>
-          this.selectedVariantValues.some((svv) => svv.id === vv.id)
-        );
-
-        if (selectedVariantValue)
-          return `${vt.slug}=${selectedVariantValue.slug}`;
-      })
-      .filter((param) => !!param)
-      .join("&");
-
-    let newUrl = `/${metaData!.slug}`;
-    if (variantParams) newUrl = `/${metaData!.slug}?${variantParams}`;
-
-    if (newUrl === window.location.pathname) return;
-
-    const isShallow = process.env.NODE_ENV !== "production";
-    IkasBaseStore.getInstance().router?.replace(newUrl, undefined, {
-      shallow: isShallow,
-      scroll: false,
-    });
-
-    Analytics.productView(this);
-  }
-
-  getVariantUnitPriceText(variant: IkasProductVariant) {
-    const price = variant.price;
-    if (!price.unitPrice || !this.baseUnit) {
-      return;
-    }
-
-    return `${formatCurrency(
-      price.unitPrice,
-      price.currency || "",
-      price.currencySymbol || ""
-    )} / ${this.baseUnit?.unit?.name}`;
-  }
-
-  private setOptionPrices() {
-    const variant = this.variants[0];
-    if (!variant) return;
-
-    const currencyCode = variant.price.currency;
-
-    this.productOptionSet?.options.forEach((option) => {
-      if (option.selectSettings) {
-        option.selectSettings.values.forEach((ssv) => {
-          if (ssv.otherPrices) {
-            ssv.price =
-              ssv.otherPrices.find((op) => op.currencyCode === currencyCode)
-                ?.price || ssv.price;
-          }
-        });
-      }
-
-      if (option.otherPrices) {
-        option.price =
-          option.otherPrices.find((op) => op.currencyCode === currencyCode)
-            ?.price || option.price;
-      }
-    });
-  }
-}
-
-export { IkasProductType };
-
-export type IkasDisplayedVariantValue = {
-  variant: IkasProductVariant;
-  variantValue: IkasVariantValue;
-  hasStock: boolean;
-  isSelected: boolean;
-};
-export type IkasDisplayedVariantType = {
-  variantType: IkasVariantType;
-  displayedVariantValues: IkasDisplayedVariantValue[];
-};