@ikas/storefront 4.0.0-alpha.6 → 4.0.0-alpha.60

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

@@ -1,285 +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
-  private _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);
-  }
-
-  get isSelected() {
-    return this._isSelected;
-  }
-
-  toJSON() {
-    return {
-      ...this,
-      isSelected: this._isSelected,
-    };
-  }
-}
-
-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;
-
-  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 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,298 +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,
-  IkasProductOptionSetFunctions,
-} 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";
-
-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;
-
-  // 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.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 IkasProductOptionSetFunctions.hasValidValues(
-        this.productOptionSet
-      );
-    } 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)
-    );
-  }
-
-  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);
-  }
-
-  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[];
-};

package/src/models/data/product/option-set/index.ts

@@ -1,94 +0,0 @@
-import { makeAutoObservable } from "mobx";
-import { IkasProductOption } from "./option";
-import {
-  IkasProductOptionSelectValueTranslations as IProductOptionSelectValueTranslations,
-  IkasProductOptionTranslations as IProductOptionTranslations,
-  IkasProductOptionSetTranslations as IProductOptionSetTranslations,
-  IkasProductOptionSet as IProductOptionSet,
-} from "@ikas/storefront-models";
-import { IkasProductOptionSetFunctions } from "@ikas/storefront-model-functions";
-
-export class IkasProductOptionSelectValueTranslations
-  implements IProductOptionSelectValueTranslations
-{
-  id: string;
-  value: string | null;
-
-  constructor(data: Partial<IProductOptionSelectValueTranslations>) {
-    this.id = data.id || "";
-    this.value = data.value || null;
-
-    makeAutoObservable(this);
-  }
-}
-
-export class IkasProductOptionTranslations
-  implements IProductOptionTranslations
-{
-  id: string;
-  name: string | null;
-  optionalText: string | null;
-  values: IkasProductOptionSelectValueTranslations[] | null;
-
-  constructor(data: Partial<IProductOptionTranslations>) {
-    this.id = data.id || "";
-    this.name = data.name || null;
-    this.optionalText = data.optionalText || null;
-    this.values =
-      data.values?.map(
-        (o) => new IkasProductOptionSelectValueTranslations(o)
-      ) || [];
-
-    makeAutoObservable(this);
-  }
-}
-
-export class IkasProductOptionSetTranslations
-  implements IProductOptionSetTranslations
-{
-  locale: string;
-  options: IkasProductOptionTranslations[] | null;
-
-  constructor(data: Partial<IProductOptionSetTranslations>) {
-    this.locale = data.locale || "";
-    this.options =
-      data.options?.map((o) => new IkasProductOptionTranslations(o)) || [];
-
-    makeAutoObservable(this);
-  }
-}
-
-export class IkasProductOptionSet implements IProductOptionSet {
-  id: string;
-  name: string;
-  options: IkasProductOption[];
-  translations: IkasProductOptionSetTranslations[] | null;
-
-  constructor(data: Partial<IkasProductOptionSet>) {
-    this.id = data.id || "";
-    this.name = data.name || "";
-    this.options =
-      data.options?.map(
-        (o) =>
-          new IkasProductOption({
-            ...o,
-            productOptionSetId: this.id,
-          })
-      ) || [];
-    this.translations = data.translations
-      ? data.translations?.map((o) => new IkasProductOptionSetTranslations(o))
-      : null;
-
-    makeAutoObservable(this);
-  }
-
-  get displayedOptions() {
-    return IkasProductOptionSetFunctions.getDisplayedOptions(this).map(
-      (o) => new IkasProductOption(o)
-    );
-  }
-
-  initOptionValues = async () => {
-    this.options.forEach((o) => o.initValues());
-  };
-}