@ikas/storefront 4.0.0-alpha.69 → 4.0.0-alpha.7

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

@@ -0,0 +1,285 @@
+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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,298 @@
+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

@@ -0,0 +1,94 @@
+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());
+  };
+}