@ikas/storefront 1.0.21 → 2.0.0-alpha.1

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

@@ -0,0 +1,154 @@
+import {
+  ProductAttributeTypeEnum,
+  VariantSelectionTypeEnum,
+} from "../../../__generated__/global-types";
+import { IkasProductAttributeTableTemplate } from "../product-attribute/product-attribute-table-template";
+
+export interface ISimpleProduct {
+  id: string;
+  createdAt?: Date;
+  updatedAt?: Date;
+  deleted: boolean;
+  name: string;
+  shortDescription?: string | null;
+  description?: string | null;
+  taxValue?: number | null;
+  weight?: number | null;
+  productVariantTypes: ISimpleProductVariantType[];
+  categories?: ISimpleCategory[] | null;
+  variants: ISimpleVariant[];
+  attributes?: ISimpleProductAttributeValue[] | null;
+  tags?: ISimpleProductTag[] | null;
+  brand?: ISimpleProductBrand | null;
+  metaData?: ISimpleHTMLMetaData | null;
+  productOptionSetId?: string | null;
+}
+//ISimpleVariantType
+export interface ISimpleVariantType {
+  id: string;
+  name: string;
+  selectionType: VariantSelectionTypeEnum;
+  values: ISimpleVariantValue[];
+}
+// ISimpleProductVariantType
+export interface ISimpleProductVariantType {
+  order: number;
+  variantType: ISimpleVariantType;
+  variantValueIds: string[];
+}
+// ISimpleVariant
+export interface ISimpleVariant {
+  id: string;
+  deleted: boolean;
+  sku?: string | null;
+  barcodeList?: string[] | null;
+  weight?: number | null;
+  isActive: boolean;
+  variantValues?: ISimpleVariationValueRelation[] | null;
+  attributes?: ISimpleProductAttributeValue[] | null;
+  images?: ISimpleProductImage[] | null;
+  prices?: ISimpleProductPrice[];
+  stocks: ISimpleProductStockLocation[];
+}
+// ISimpleProductPrice
+export interface ISimpleProductPrice {
+  sellPrice: number;
+  discountPrice: number | null;
+  buyPrice: number | null;
+  currency: string | null;
+  priceListId?: string | null;
+}
+// ISimpleProductImage
+export interface ISimpleProductImage {
+  order: number;
+  isMain: boolean;
+  id: string;
+}
+// ISimpleVariantValueRelation
+export interface ISimpleVariationValueRelation {
+  variantTypeId: string;
+  variantValueId: string;
+}
+// ISimpleVariantValue
+export interface ISimpleVariantValue {
+  id: string;
+  name: string;
+  thumbnailImageId?: string | null;
+  colorCode?: string;
+}
+// ISimpleProductAttributeOption
+export interface ISimpleProductAttributeOption {
+  id: string;
+  name: string;
+}
+// ISimpleProductAttribute
+export interface ISimpleProductAttribute {
+  id: string;
+  name: string;
+  type: ProductAttributeTypeEnum;
+  tableTemplate: IkasProductAttributeTableTemplate | null;
+}
+//ISimpleProductAttributeValue
+export interface ISimpleProductAttributeValue {
+  value?: string | number | Date | boolean | null;
+  productAttribute?: ISimpleProductAttribute | null;
+  productAttributeOption?: ISimpleProductAttributeOption | null;
+}
+export interface ISimpleHTMLMetaData {
+  slug: string;
+  pageTitle?: string | null;
+  description?: string | null;
+  redirectTo?: string | null;
+  metadataOverrides?: ISimpleHTMLMetaDataOverride[] | null;
+}
+export interface ISimpleHTMLMetaDataOverride {
+  pageTitle: string;
+  description: string;
+  language?: string | null;
+  storefrontId?: string | null;
+  storefrontRegionId?: string | null;
+}
+export interface ISimpleCategoryPath {
+  id: string;
+  name: string;
+  slug?: string | null;
+}
+export interface ISimpleCategory {
+  id: string;
+  name: string;
+  path: ISimpleCategoryPath[];
+  slug?: string | null;
+}
+export interface ISimpleProductTag {
+  id: string;
+  name: string;
+}
+export interface ISimpleProductBrand {
+  id: string;
+  name: string;
+  slug?: string | null;
+}
+export interface ISimpleProductStockLocation {
+  stockCount: number;
+  stockLocationId: string;
+}
+
+export class FilterStockStatusId {
+  static IN_STOCK = "in-stock";
+  static OUT_OF_STOCK = "out-of-stock";
+  static ALL_LIST = [
+    FilterStockStatusId.IN_STOCK,
+    FilterStockStatusId.OUT_OF_STOCK,
+  ];
+}
+export class FilterBooleanId {
+  static TRUE = "true";
+  static FALSE = "false";
+}
+export const PRODUCT_FILTER = {
+  STOCK_STATUS: "stock_status",
+  DISCOUNT_RATIO: "discount_ratio",
+  PRICE: "price",
+  TAG: "tag",
+  BRAND: "brand",
+};

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

@@ -0,0 +1,5 @@
+export type IkasState = {
+  id: string;
+  name: string;
+  stateCode?: string;
+};

package/src/models/data/storefront/domain/index.ts

@@ -0,0 +1,19 @@
+import { makeAutoObservable } from "mobx";
+
+export class IkasStorefrontDomain {
+  id: string;
+  merchantDomainId: string;
+  name: string;
+  redirectDomainName: string | null;
+  isDefault?: boolean | false;
+
+  constructor(data: Partial<IkasStorefrontDomain> = {}) {
+    this.id = data.id || "";
+    this.merchantDomainId = data.merchantDomainId || "";
+    this.name = data.name || "";
+    this.redirectDomainName = data.redirectDomainName || null;
+    this.isDefault = data.isDefault || false;
+
+    makeAutoObservable(this);
+  }
+}

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

@@ -0,0 +1,56 @@
+import { IkasStorefrontLocalization } from "./localization";
+import { IkasStorefrontDomain } from "./domain";
+import { IkasStorefrontRouting } from "./routing";
+import { IkasStorefrontTheme } from "./theme";
+
+export enum StorefrontStatus {
+  WAITING = "WAITING",
+  READY = "READY",
+}
+
+export class IkasStorefront {
+  id: string;
+  name: string;
+  status: StorefrontStatus;
+
+  mainStorefrontThemeId: string | null;
+  emailSettingsId: string | null;
+  salesChannelId: string | null;
+  fbpId: string | null;
+  gtmId: string | null;
+
+  // Sub Models
+  localizations: IkasStorefrontLocalization[];
+  routings: IkasStorefrontRouting[];
+  domains: IkasStorefrontDomain[];
+  themes: IkasStorefrontTheme[];
+
+  constructor(data: Partial<IkasStorefront> = {}) {
+    this.id = data.id || "";
+    this.name = data.name || "";
+    this.status = data.status || StorefrontStatus.WAITING;
+
+    this.mainStorefrontThemeId = data.mainStorefrontThemeId || null;
+    this.emailSettingsId = data.emailSettingsId || null;
+    this.salesChannelId = data.salesChannelId || null;
+    this.gtmId = data.gtmId || null;
+    this.fbpId = data.fbpId || null;
+
+    // Sub Models
+    this.localizations = data.localizations
+      ? data.localizations.map((l) => new IkasStorefrontLocalization(l))
+      : [];
+
+    this.routings = data.routings
+      ? data.routings.map((r) => new IkasStorefrontRouting(r))
+      : [];
+
+    this.domains = data.domains
+      ? data.domains.map((o) => new IkasStorefrontDomain(o))
+      : [];
+
+    this.themes = data.themes
+      ? data.themes.map((t) => new IkasStorefrontTheme(t))
+      : [];
+  }
+}

package/src/models/data/storefront/localization/index.tsx

@@ -0,0 +1,13 @@
+export class IkasStorefrontLocalization {
+  id: string;
+  isDefault: boolean;
+  locale: string;
+  name: string;
+
+  constructor(data: Partial<IkasStorefrontLocalization>) {
+    this.id = data.id || "";
+    this.isDefault = data.isDefault || false;
+    this.locale = data.locale || "";
+    this.name = data.name || "";
+  }
+}

package/src/models/data/storefront/routing/index.tsx

@@ -0,0 +1,17 @@
+export class IkasStorefrontRouting {
+  id: string;
+  countryCodes: string[] | null;
+  domain: string | null;
+  locale: string;
+  path: string | null;
+  priceListId: string | null;
+
+  constructor(data: Partial<IkasStorefrontRouting>) {
+    this.id = data.id || "";
+    this.countryCodes = data.countryCodes || null;
+    this.domain = data.domain || null;
+    this.locale = data.locale || "";
+    this.path = data.path || null;
+    this.priceListId = data.priceListId || null;
+  }
+}

package/src/models/data/storefront/theme/index.tsx

@@ -0,0 +1,22 @@
+export enum IkasStorefrontThemeStatus {
+  WAITING = "WAITING",
+  READY = "READY",
+}
+
+export class IkasStorefrontTheme {
+  id: string;
+  isMainTheme: boolean;
+  name: string;
+  status: IkasStorefrontThemeStatus;
+  themeId: string;
+  themeVersionId: string;
+
+  constructor(data: Partial<IkasStorefrontTheme>) {
+    this.id = data.id || "";
+    this.isMainTheme = data.isMainTheme || false;
+    this.name = data.name || "";
+    this.status = data.status || IkasStorefrontThemeStatus.WAITING;
+    this.themeId = data.themeId || "";
+    this.themeVersionId = data.themeVersionId || "";
+  }
+}

package/src/models/data/storefront/theme-localization/index.tsx

@@ -0,0 +1,26 @@
+import { IkasTheme } from "../../../../models/theme";
+
+export class IkasStorefrontThemeLocalization {
+  id: string;
+  locale: string;
+  storefrontId: string;
+  storefrontThemeId: string;
+  themeJson: IkasTheme;
+
+  privacyPolicy: string | null;
+  returnPolicy: string | null;
+  termsOfService: string | null;
+
+  constructor(data: Partial<IkasStorefrontThemeLocalization>) {
+    this.id = data.id || "";
+    this.locale = data.locale || "";
+    this.storefrontId = data.storefrontId || "";
+    this.storefrontThemeId = data.storefrontThemeId || "";
+    this.themeJson = data.themeJson
+      ? new IkasTheme(data.themeJson)
+      : new IkasTheme();
+    this.privacyPolicy = data.privacyPolicy || null;
+    this.returnPolicy = data.returnPolicy || null;
+    this.termsOfService = data.termsOfService || null;
+  }
+}

package/src/models/data/variant-type/index.ts

@@ -0,0 +1,77 @@
+import { makeAutoObservable } from "mobx";
+import { IkasVariantValue } from "./variant-value";
+import { stringToSlug } from "../../../utils";
+import { IkasStorefrontConfig } from "../../../storefront";
+
+export class IkasVariantType {
+  id: string;
+  name: string;
+  selectionType: IkasVariantSelectionType;
+  values: IkasVariantValue[];
+  translations: IkasVariantTypeTranslation[] | null = null;
+
+  constructor(data: Partial<IkasVariantType> = {}) {
+    this.id = data.id || "";
+    this.name = data.name || "";
+    this.selectionType = data.selectionType || IkasVariantSelectionType.CHOICE;
+    this.values = data.values
+      ? data.values.map(
+          (v) =>
+            new IkasVariantValue({
+              ...v,
+              variantTypeId: this.id,
+            })
+        )
+      : [];
+
+    this.setTranslations();
+    makeAutoObservable(this);
+  }
+
+  get isColorSelection() {
+    return this.selectionType === IkasVariantSelectionType.COLOR;
+  }
+
+  get slug() {
+    return stringToSlug(this.name);
+  }
+
+  private setTranslations() {
+    if (
+      this.translations &&
+      this.translations.some(
+        (t) => t.locale === IkasStorefrontConfig.getCurrentLocale()
+      )
+    ) {
+      const localeTranslations = this.translations.find(
+        (t) => t.locale === IkasStorefrontConfig.getCurrentLocale()
+      );
+
+      if (localeTranslations?.name) this.name = localeTranslations.name;
+      if (localeTranslations?.values) {
+        this.values.forEach((vv) => {
+          const translatedVV = localeTranslations.values?.find(
+            (tvv) => tvv.id === vv.id
+          );
+          if (translatedVV && translatedVV.name) vv.name = translatedVV.name;
+        });
+      }
+    }
+  }
+}
+
+export enum IkasVariantSelectionType {
+  CHOICE = "CHOICE",
+  COLOR = "COLOR",
+}
+
+type IkasVariantTypeTranslation = {
+  locale: string;
+  name: string | null;
+  values: IkasVariantValueTranslation[] | null;
+};
+
+type IkasVariantValueTranslation = {
+  id: string;
+  name: string | null;
+};

package/src/models/data/variant-type/variant-value/index.ts

@@ -0,0 +1,29 @@
+import { makeAutoObservable } from "mobx";
+import { IkasImage } from "../../image";
+import { stringToSlug } from "../../../../utils";
+
+export class IkasVariantValue {
+  id: string;
+  name: string;
+  colorCode: string | null;
+  thumbnailImageId: string | null;
+  variantTypeId: string;
+
+  constructor(data: Partial<IkasVariantValue>) {
+    this.id = data.id || "";
+    this.name = data.name || "";
+    this.colorCode = data.colorCode || null;
+    this.thumbnailImageId = data.thumbnailImageId || null;
+    this.variantTypeId = data.variantTypeId || "";
+
+    makeAutoObservable(this);
+  }
+
+  get slug() {
+    return stringToSlug(this.name);
+  }
+
+  get thumbnailImage() {
+    if (this.thumbnailImageId) return new IkasImage(this.thumbnailImageId);
+  }
+}

package/src/models/index.ts

@@ -0,0 +1,3 @@
+export * from "./data";
+export * from "./theme";
+export * from "./ui";

package/src/models/theme/component/index.ts

@@ -0,0 +1,24 @@
+import { makeAutoObservable } from "mobx";
+import { IkasThemeComponentProp } from "./prop";
+
+export class IkasThemeComponent {
+  id: string;
+  dir: string;
+  displayName: string;
+  props: IkasThemeComponentProp[];
+  isHeader: boolean;
+  isFooter: boolean;
+
+  constructor(data: Partial<IkasThemeComponent>) {
+    this.id = data.id || "";
+    this.dir = data.dir || "";
+    this.displayName = data.displayName || "";
+    this.props = data.props
+      ? data.props.map((p) => new IkasThemeComponentProp(p))
+      : [];
+    this.isHeader = data.isHeader || false;
+    this.isFooter = data.isFooter || false;
+
+    makeAutoObservable(this);
+  }
+}

package/src/models/theme/component/prop/index.ts

@@ -0,0 +1,56 @@
+import { makeAutoObservable } from "mobx";
+import { IkasProductAttributeType } from "../../../../models/data/product-attribute";
+
+export class IkasThemeComponentProp {
+  id: string;
+  name: string;
+  displayName: string;
+  type: IkasThemeComponentPropType;
+  isRequired: boolean;
+  customDataId?: string | null;
+  attributeTypes?: IkasProductAttributeType[] | null;
+
+  constructor(data: Partial<IkasThemeComponentProp>) {
+    this.id = data.id || Date.now() + "";
+    this.name = data.name || "";
+    this.displayName = data.displayName || "";
+    this.type = data.type || IkasThemeComponentPropType.TEXT;
+    this.isRequired = data.isRequired || false;
+    this.customDataId = data.customDataId || null;
+    this.attributeTypes = data.attributeTypes || null;
+
+    makeAutoObservable(this);
+  }
+}
+
+export enum IkasThemeComponentPropType {
+  TEXT = "TEXT",
+  RICH_TEXT = "RICH_TEXT",
+  BOOLEAN = "BOOLEAN",
+  IMAGE = "IMAGE",
+  IMAGE_LIST = "IMAGE_LIST",
+  LINK = "LINK",
+  LIST_OF_LINK = "LIST_OF_LINK",
+  PRODUCT_DETAIL = "PRODUCT_DETAIL",
+  PRODUCT_LIST = "PRODUCT_LIST",
+  PRODUCT_ATTRIBUTE = "PRODUCT_ATTRIBUTE",
+  PRODUCT_ATTRIBUTE_LIST = "PRODUCT_ATTRIBUTE_LIST",
+  BRAND = "BRAND",
+  BRAND_LIST = "BRAND_LIST",
+  CATEGORY = "CATEGORY",
+  CATEGORY_LIST = "CATEGORY_LIST",
+  COLOR = "COLOR",
+  CUSTOM = "CUSTOM",
+  COMPONENT = "COMPONENT",
+  COMPONENT_LIST = "COMPONENT_LIST",
+  BLOG = "BLOG",
+  BLOG_LIST = "BLOG_LIST",
+  BLOG_CATEGORY = "BLOG_CATEGORY",
+  BLOG_CATEGORY_LIST = "BLOG_CATEGORY_LIST",
+  RAFFLE = "RAFFLE",
+  RAFFLE_LIST = "RAFFLE_LIST",
+  OBJECT = "OBJECT",
+  STATIC_LIST = "STATIC_LIST",
+  DYNAMIC_LIST = "DYNAMIC_LIST",
+  ENUM = "ENUM",
+}

package/src/models/theme/custom-data/index.ts

@@ -0,0 +1,71 @@
+import { IkasProductAttributeType } from "../../../models/data/product-attribute";
+import { makeAutoObservable } from "mobx";
+import { IkasThemeComponentPropType } from "../component/prop";
+
+export class IkasThemeCustomData {
+  id: string;
+  name?: string | null;
+  type: IkasThemeComponentPropType;
+  isRequired: boolean;
+
+  key?: string | null;
+  nestedData?: IkasThemeCustomData[] | null;
+  itemCount?: number | null; // for static lists
+  attributeTypes?: IkasProductAttributeType[] | null;
+  enumOptions?: IkasThemeEnumOption[] | null;
+  customDataId?: string | null = null;
+
+  isRoot: boolean;
+  parent?: IkasThemeCustomData | null;
+
+  constructor(data: Partial<IkasThemeCustomData> = {}) {
+    this.id = data.id || "";
+    this.name = data.name || null;
+    this.type = data.type || IkasThemeComponentPropType.TEXT;
+    this.isRequired = data.isRequired !== undefined ? data.isRequired : true;
+    this.key = data.key || null;
+    this.parent = data.parent || null;
+    this.itemCount = data.itemCount || null;
+    this.attributeTypes = data.attributeTypes || null;
+    this.enumOptions =
+      data.enumOptions?.map((eo) => new IkasThemeEnumOption(eo)) || null;
+    this.customDataId = data.customDataId || null;
+    this.isRoot = data.isRoot || false;
+    this.nestedData = data.nestedData
+      ? data.nestedData.map(
+          (nd) =>
+            new IkasThemeCustomData({
+              ...nd,
+              parent: this,
+            })
+        )
+      : null;
+
+    if (this.type === IkasThemeComponentPropType.STATIC_LIST && !this.itemCount)
+      this.itemCount = 1;
+
+    makeAutoObservable(this);
+  }
+
+  toJSON() {
+    const obj = {
+      ...this,
+    };
+    delete obj.parent;
+    return obj;
+  }
+}
+
+export class IkasThemeEnumOption {
+  id: string;
+  displayName: string;
+  value: string;
+
+  constructor(data: Partial<IkasThemeEnumOption> = {}) {
+    this.id = data.id || "";
+    this.displayName = data.displayName || "";
+    this.value = data.value || "";
+
+    makeAutoObservable(this);
+  }
+}

package/{build/models/theme/index.d.ts → src/models/theme/index.ts}

@@ -1,18 +1,26 @@
-export { IkasTheme } from "./theme";
-export { IkasThemePage, IkasThemePageType } from "./page/index";
-export { IkasThemePageComponent } from "./page/component/index";
-export { IkasThemeComponent } from "./component/index";
-export { IkasThemeComponentProp, IkasThemeComponentPropType, } from "./component/prop/index";
-export { IkasLinkPropValue, IkasLinkType, } from "./page/component/prop-value/link";
-export { IkasBrandPropValue } from "./page/component/prop-value/brand";
-export { IkasBrandListPropValue } from "./page/component/prop-value/brand-list";
-export { IkasProductListPropValue } from "./page/component/prop-value/product-list";
-export { IkasProductDetailPropValue } from "./page/component/prop-value/product-detail";
-export { IkasCategoryPropValue } from "./page/component/prop-value/category";
-export { IkasCategoryListPropValue } from "./page/component/prop-value/category-list";
-export { IkasThemeSettings } from "./settings/index";
-export { IkasThemeCustomData } from "./custom-data/index";
-export { IkasBlogPropValue } from "./page/component/prop-value/blog";
-export { IkasBlogListPropValue } from "./page/component/prop-value/blog-list";
-export { IkasBlogCategoryPropValue } from "./page/component/prop-value/blog-category";
-export { IkasBlogCategoryListPropValue } from "./page/component/prop-value/blog-category-list";
+export { IkasTheme } from "./theme";
+export { IkasThemePage, IkasThemePageType } from "./page";
+export { IkasThemePageComponent } from "./page/component";
+export { IkasThemeComponent } from "./component";
+export {
+  IkasThemeComponentProp,
+  IkasThemeComponentPropType,
+} from "./component/prop";
+export {
+  IkasLinkPropValue,
+  IkasLinkType,
+} from "./page/component/prop-value/link";
+export { IkasBrandPropValue } from "./page/component/prop-value/brand";
+export { IkasBrandListPropValue } from "./page/component/prop-value/brand-list";
+export { IkasProductListPropValue } from "./page/component/prop-value/product-list";
+export { IkasProductDetailPropValue } from "./page/component/prop-value/product-detail";
+export { IkasCategoryPropValue } from "./page/component/prop-value/category";
+export { IkasCategoryListPropValue } from "./page/component/prop-value/category-list";
+export { IkasThemeSettings } from "./settings";
+export { IkasThemeCustomData } from "./custom-data";
+export { IkasBlogPropValue } from "./page/component/prop-value/blog";
+export { IkasBlogListPropValue } from "./page/component/prop-value/blog-list";
+export { IkasBlogCategoryPropValue } from "./page/component/prop-value/blog-category";
+export { IkasBlogCategoryListPropValue } from "./page/component/prop-value/blog-category-list";
+export { IkasRafflePropValue } from "./page/component/prop-value/raffle";
+export { IkasRaffleListPropValue } from "./page/component/prop-value/raffle-list";

package/src/models/theme/page/component/index.ts

@@ -0,0 +1,21 @@
+import { makeAutoObservable } from "mobx";
+
+export class IkasThemePageComponent {
+  id: string;
+  componentId: string;
+
+  // Prop value for a component can either be exact values to pass to the component,
+  // or it can be a data to derive the actual value the component needs
+  // key: propName
+  // e.g for a "Text" prop ---------> text: "TextValue"
+  // e.g for a "ProductList" prop --> productList: ProductListPropValue
+  propValues: Record<string, any>;
+
+  constructor(data: Partial<IkasThemePageComponent>) {
+    this.id = data.id || "";
+    this.componentId = data.componentId || "";
+    this.propValues = data.propValues || {};
+
+    makeAutoObservable(this);
+  }
+}

package/src/models/theme/page/component/prop-value/attribute-list.ts

@@ -0,0 +1,18 @@
+import { makeAutoObservable } from "mobx";
+
+export class IkasAttributeListPropValue {
+  attributeIds?: string[] | null = null;
+  productId?: string | null = null;
+  variantId?: string | null = null;
+
+  // Only for product detail page
+  usePageData?: boolean | null = null;
+
+  constructor(data: Partial<IkasAttributeListPropValue>) {
+    this.attributeIds = data.attributeIds;
+    this.productId = data.productId;
+    this.variantId = data.variantId;
+
+    makeAutoObservable(this);
+  }
+}