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

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

@@ -1,210 +0,0 @@
-import { makeAutoObservable } from "mobx";
-import { IkasThemeJsonComponent } from "./component";
-import {
-  IkasThemeJsonComponentProp,
-  IkasThemeJsonComponentPropType,
-} from "./component/prop";
-import { IkasThemeJsonCustomData } from "./custom-data";
-import { IkasThemeJsonPage, IkasThemeJsonPageType } from "./page";
-import { IkasThemeJsonPageComponent } from "./page/component";
-import { IkasThemeJsonSettings } from "./settings";
-
-export const CHECKOUT_ID = "checkout";
-
-export class IkasThemeJson {
-  name: string;
-  components: IkasThemeJsonComponent[];
-  pages: IkasThemeJsonPage[];
-  settings: IkasThemeJsonSettings;
-  customData: IkasThemeJsonCustomData[];
-
-  constructor(data: Partial<IkasThemeJson> = {}) {
-    this.name = data.name || "";
-    this.components = data.components
-      ? data.components.map((c) => new IkasThemeJsonComponent(c))
-      : [];
-    this.pages = data.pages
-      ? data.pages.map((p) => new IkasThemeJsonPage(p))
-      : [];
-    this.settings = data.settings
-      ? new IkasThemeJsonSettings(data.settings)
-      : new IkasThemeJsonSettings();
-    this.customData = data.customData
-      ? data.customData?.map((cd) => new IkasThemeJsonCustomData(cd))
-      : [];
-
-    this.createCheckoutData();
-
-    makeAutoObservable(this);
-  }
-
-  get headerComponent() {
-    return this.components.find((c) => c.isHeader);
-  }
-
-  get footerComponent() {
-    return this.components.find((c) => c.isFooter);
-  }
-
-  private createCheckoutData() {
-    let currentCheckoutComponent = this.components.find(
-      (c) => c.id === CHECKOUT_ID
-    );
-    const currentCheckoutPage = this.pages.find((p) => p.id === CHECKOUT_ID);
-
-    if (!currentCheckoutComponent) {
-      currentCheckoutComponent = new IkasThemeJsonComponent({
-        id: CHECKOUT_ID,
-        dir: "",
-        displayName: "",
-        props: [
-          new IkasThemeJsonComponentProp({
-            name: "showTax",
-            isRequired: false,
-            type: IkasThemeJsonComponentPropType.BOOLEAN,
-          }),
-          new IkasThemeJsonComponentProp({
-            name: "buttonBgColor",
-            isRequired: false,
-            type: IkasThemeJsonComponentPropType.COLOR,
-          }),
-          new IkasThemeJsonComponentProp({
-            name: "buttonTextColor",
-            isRequired: false,
-            type: IkasThemeJsonComponentPropType.COLOR,
-          }),
-          new IkasThemeJsonComponentProp({
-            name: "buttonDisabledBgColor",
-            isRequired: false,
-            type: IkasThemeJsonComponentPropType.COLOR,
-          }),
-          new IkasThemeJsonComponentProp({
-            name: "buttonDisabledTextColor",
-            isRequired: false,
-            type: IkasThemeJsonComponentPropType.COLOR,
-          }),
-
-          new IkasThemeJsonComponentProp({
-            name: "primaryTextColor",
-            isRequired: false,
-            type: IkasThemeJsonComponentPropType.COLOR,
-          }),
-          new IkasThemeJsonComponentProp({
-            name: "secondaryTextColor",
-            isRequired: false,
-            type: IkasThemeJsonComponentPropType.COLOR,
-          }),
-
-          new IkasThemeJsonComponentProp({
-            name: "primaryBgColor",
-            isRequired: false,
-            type: IkasThemeJsonComponentPropType.COLOR,
-          }),
-          new IkasThemeJsonComponentProp({
-            name: "secondaryBgColor",
-            isRequired: false,
-            type: IkasThemeJsonComponentPropType.COLOR,
-          }),
-          new IkasThemeJsonComponentProp({
-            name: "borderColor",
-            isRequired: false,
-            type: IkasThemeJsonComponentPropType.COLOR,
-          }),
-          new IkasThemeJsonComponentProp({
-            name: "cardBgColor",
-            isRequired: false,
-            type: IkasThemeJsonComponentPropType.COLOR,
-          }),
-
-          new IkasThemeJsonComponentProp({
-            name: "errorColor",
-            isRequired: false,
-            type: IkasThemeJsonComponentPropType.COLOR,
-          }),
-          new IkasThemeJsonComponentProp({
-            name: "errorLightColor",
-            isRequired: false,
-            type: IkasThemeJsonComponentPropType.COLOR,
-          }),
-          new IkasThemeJsonComponentProp({
-            name: "warningColor",
-            isRequired: false,
-            type: IkasThemeJsonComponentPropType.COLOR,
-          }),
-          new IkasThemeJsonComponentProp({
-            name: "warningLightColor",
-            isRequired: false,
-            type: IkasThemeJsonComponentPropType.COLOR,
-          }),
-          new IkasThemeJsonComponentProp({
-            name: "successColor",
-            isRequired: false,
-            type: IkasThemeJsonComponentPropType.COLOR,
-          }),
-          new IkasThemeJsonComponentProp({
-            name: "successLightColor",
-            isRequired: false,
-            type: IkasThemeJsonComponentPropType.COLOR,
-          }),
-        ],
-      });
-      this.components.push(currentCheckoutComponent);
-    }
-
-    if (!currentCheckoutPage) {
-      this.pages.push(
-        new IkasThemeJsonPage({
-          id: CHECKOUT_ID,
-          type: IkasThemeJsonPageType.CHECKOUT,
-          components: [
-            new IkasThemeJsonPageComponent({
-              componentId: currentCheckoutComponent.id,
-              propValues: {
-                showTax: true,
-                buttonBgColor: CHECKOUT_BUTTON_BG_COLOR,
-                buttonTextColor: CHECKOUT_BUTTON_TEXT_COLOR,
-                buttonDisabledBgColor: CHECKOUT_BUTTON_DISABLED_BG_COLOR,
-                buttonDisabledTextColor: CHECKOUT_BUTTON_DISABLED_TEXT_COLOR,
-
-                primaryTextColor: CHECKOUT_PRIMARY_TEXT_COLOR,
-                secondaryTextColor: CHECKOUT_SECONDARY_TEXT_COLOR,
-
-                primaryBgColor: CHECKOUT_PRIMARY_BG_COLOR,
-                secondaryBgColor: CHECKOUT_SECONDARY_BG_COLOR,
-                borderColor: CHECKOUT_BORDER_COLOR,
-                cardBgColor: CHECKOUT_CARD_BG_COLOR,
-
-                errorColor: CHECKOUT_ERROR_COLOR,
-                errorLightColor: CHECKOUT_ERROR_LIGHT_COLOR,
-                warningColor: CHECKOUT_WARNING_COLOR,
-                warningLightColor: CHECKOUT_WARNING_LIGHT_COLOR,
-                successColor: CHECKOUT_SUCCESS_COLOR,
-                successLightColor: CHECKOUT_SUCCESS_LIGHT_COLOR,
-              },
-            }),
-          ],
-        })
-      );
-    }
-  }
-}
-
-const CHECKOUT_BUTTON_BG_COLOR = "#272727";
-const CHECKOUT_BUTTON_TEXT_COLOR = "#FFFFFF";
-const CHECKOUT_BUTTON_DISABLED_BG_COLOR = "#F7F7F9";
-const CHECKOUT_BUTTON_DISABLED_TEXT_COLOR = "#8A8B94";
-
-const CHECKOUT_PRIMARY_TEXT_COLOR = "#272727";
-const CHECKOUT_SECONDARY_TEXT_COLOR = "#8A8B94";
-
-const CHECKOUT_PRIMARY_BG_COLOR = "#FFFFFF";
-const CHECKOUT_SECONDARY_BG_COLOR = "#F7F7F9";
-const CHECKOUT_BORDER_COLOR = "#E5E4E9";
-const CHECKOUT_CARD_BG_COLOR = "#F7F7F9";
-
-const CHECKOUT_ERROR_COLOR = "#FB4E4E";
-const CHECKOUT_ERROR_LIGHT_COLOR = "#FCF3F4";
-const CHECKOUT_WARNING_COLOR = "#FFBC1F";
-const CHECKOUT_WARNING_LIGHT_COLOR = "#FFFAEE";
-const CHECKOUT_SUCCESS_COLOR = "#2DCA73";
-const CHECKOUT_SUCCESS_LIGHT_COLOR = "#F6FFED";

package/src/models/data/theme-json/page/component/index.ts

@@ -1,22 +0,0 @@
-import { makeAutoObservable } from "mobx";
-import { IkasThemeJsonPageComponent as IThemeJsonPageComponent } from "@ikas/storefront-models";
-
-export class IkasThemeJsonPageComponent implements IThemeJsonPageComponent {
-  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<IkasThemeJsonPageComponent>) {
-    this.id = data.id || "";
-    this.componentId = data.componentId || "";
-    this.propValues = data.propValues || {};
-
-    makeAutoObservable(this);
-  }
-}

package/src/models/data/theme-json/page/index.ts

@@ -1,54 +0,0 @@
-import { makeAutoObservable } from "mobx";
-import { IkasThemeJsonPageComponent } from "./component";
-import {
-  IkasThemeJsonPage as IThemeJsonPage,
-  IkasThemeJsonPageType,
-} from "@ikas/storefront-models";
-
-export class IkasThemeJsonPage implements IThemeJsonPage {
-  id: string;
-  name: string | null;
-  type: IkasThemeJsonPageType;
-  slug: string | null;
-  pageTitle: string | null;
-  description: string | null;
-  components: IkasThemeJsonPageComponent[];
-  specifications: IkasThemeJsonPageSpecification[] | null;
-  canonicals: string[] | null;
-  disableIndex: boolean | null;
-
-  constructor(data: Partial<IkasThemeJsonPage>) {
-    this.id = data.id || Date.now() + "";
-    this.name = data.name || null;
-    this.type = data.type || IkasThemeJsonPageType.INDEX;
-    this.slug = data.slug || null;
-    this.pageTitle = data.pageTitle || null;
-    this.description = data.description || null;
-    this.components = data.components
-      ? data.components.map((c) => new IkasThemeJsonPageComponent(c))
-      : [];
-    this.specifications = data.specifications
-      ? data.specifications.map((s) => new IkasThemeJsonPageSpecification(s))
-      : null;
-    this.canonicals = data.canonicals || null;
-    this.disableIndex = data.disableIndex ?? null;
-
-    makeAutoObservable(this);
-  }
-}
-
-export class IkasThemeJsonPageSpecification {
-  id: string;
-  components: IkasThemeJsonPageComponent[];
-
-  constructor(data: Partial<IkasThemeJsonPageSpecification>) {
-    this.id = data.id || "";
-    this.components = data.components
-      ? data.components.map((c) => new IkasThemeJsonPageComponent(c))
-      : [];
-
-    makeAutoObservable(this);
-  }
-}
-
-export { IkasThemeJsonPageType };

package/src/models/data/theme-json/settings/color/index.ts

@@ -1,35 +0,0 @@
-import { makeAutoObservable } from "mobx";
-import {
-  IkasThemeJsonColor as IThemeJsonColor,
-  IkasThemeJsonColorTranslation as IThemeJsonColorTranslation,
-} from "@ikas/storefront-models";
-
-export class IkasThemeJsonColor implements IThemeJsonColor {
-  id: string;
-  displayName: string;
-  key: string;
-  color: string;
-  translations: {
-    [locale: string]: IkasThemeJsonColorTranslation;
-  } = {};
-
-  constructor(data: Partial<IkasThemeJsonColor>) {
-    this.id = data.id || "";
-    this.displayName = data.displayName || "";
-    this.key = data.key || "";
-    this.color = data.color || "";
-    this.translations = data.translations || {};
-
-    makeAutoObservable(this);
-  }
-}
-
-export class IkasThemeJsonColorTranslation
-  implements IThemeJsonColorTranslation
-{
-  displayName: string | null;
-
-  constructor(data: Partial<IkasThemeJsonColorTranslation> = {}) {
-    this.displayName = data.displayName || null;
-  }
-}

package/src/models/data/theme-json/settings/favicon/index.ts

@@ -1,12 +0,0 @@
-import { makeAutoObservable } from "mobx";
-import { IkasThemeJsonFavicon as IThemeJsonFavicon } from "@ikas/storefront-models";
-
-export class IkasThemeJsonFavicon implements IThemeJsonFavicon {
-  id: string | null;
-
-  constructor(data?: Partial<IkasThemeJsonFavicon>) {
-    this.id = data?.id || null;
-
-    makeAutoObservable(this);
-  }
-}

package/src/models/data/theme-json/settings/font-family/index.ts

@@ -1,14 +0,0 @@
-import { makeAutoObservable } from "mobx";
-import { IkasThemeJsonFontFamily as IThemeJsonFontFamily } from "@ikas/storefront-models";
-
-export class IkasThemeJsonFontFamily implements IThemeJsonFontFamily {
-  name: string | null;
-  variants: string[] | null;
-
-  constructor(data: Partial<IThemeJsonFontFamily> = {}) {
-    this.name = data.name || null;
-    this.variants = data.variants || null;
-
-    makeAutoObservable(this);
-  }
-}

package/src/models/data/theme-json/settings/index.ts

@@ -1,30 +0,0 @@
-import { IkasThemeJsonStockPreference } from "@ikas/storefront-models";
-import { makeAutoObservable } from "mobx";
-import { IkasThemeJsonColor } from "./color";
-import { IkasThemeJsonFavicon } from "./favicon";
-import { IkasThemeJsonFontFamily } from "./font-family";
-import { IkasThemeJsonSettings as IThemeJsonSettings } from "@ikas/storefront-models";
-
-export class IkasThemeJsonSettings implements IThemeJsonSettings {
-  colors: IkasThemeJsonColor[];
-  favicon: IkasThemeJsonFavicon;
-  stockPreference: IkasThemeJsonStockPreference;
-  fontFamily: IkasThemeJsonFontFamily;
-
-  constructor(data: Partial<IkasThemeJsonSettings> = {}) {
-    this.colors = data.colors
-      ? data.colors.map((c) => new IkasThemeJsonColor(c))
-      : [];
-
-    this.favicon = data.favicon?.id ? data.favicon : new IkasThemeJsonFavicon();
-    this.stockPreference =
-      data.stockPreference || IkasThemeJsonStockPreference.SHOW_ALL;
-    this.fontFamily = data.fontFamily
-      ? new IkasThemeJsonFontFamily(data.fontFamily)
-      : new IkasThemeJsonFontFamily();
-
-    makeAutoObservable(this);
-  }
-}
-
-export { IkasThemeJsonStockPreference };

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

@@ -1,44 +0,0 @@
-import { IkasVariantTypeFunctions } from "@ikas/storefront-model-functions";
-import {
-  IkasVariantSelectionType,
-  IkasVariantType as IVariantType,
-  IkasVariantTypeTranslation,
-} from "@ikas/storefront-models";
-import { makeAutoObservable } from "mobx";
-import { IkasVariantValue } from "./variant-value";
-
-export class IkasVariantType implements IVariantType {
-  id: string;
-  name: string;
-  selectionType: IkasVariantSelectionType;
-  values: IkasVariantValue[];
-  translations?: IkasVariantTypeTranslation[] | null;
-
-  constructor(data: Partial<IVariantType> = {}) {
-    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.translations = data.translations;
-
-    makeAutoObservable(this);
-  }
-
-  get isColorSelection() {
-    return IkasVariantTypeFunctions.isColorSelection(this);
-  }
-
-  get slug() {
-    return IkasVariantTypeFunctions.getIkasVariantTypeSlug(this);
-  }
-}
-
-export { IkasVariantSelectionType };

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

@@ -1,32 +0,0 @@
-import { IkasImage } from "../../image";
-import { IkasVariantValue as IVariantValue } from "@ikas/storefront-models";
-import { makeAutoObservable } from "mobx";
-import { IkasVariantValueFunctions } from "@ikas/storefront-model-functions";
-
-export class IkasVariantValue implements IVariantValue {
-  id: string;
-  name: string;
-  colorCode: string | null = null;
-  thumbnailImageId: string | null = null;
-  variantTypeId: string;
-
-  // Extra
-  thumbnailImage?: IkasImage;
-
-  constructor(data: IVariantValue) {
-    this.id = data.id;
-    this.name = data.name;
-    this.colorCode = data.colorCode || null;
-    this.variantTypeId = data.variantTypeId;
-
-    this.thumbnailImage = data.thumbnailImage
-      ? new IkasImage(data.thumbnailImage)
-      : undefined;
-
-    makeAutoObservable(this);
-  }
-
-  get slug() {
-    return IkasVariantValueFunctions.getIkasVariantValueSlug(this);
-  }
-}

package/src/models/index.ts

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

package/src/models/ui/blog-category-list/index.ts

@@ -1,169 +0,0 @@
-import { IkasBlogCategoryListPropValue } from "@ikas/storefront-providers";
-import { makeAutoObservable } from "mobx";
-import BlogStore from "../../../store/blog";
-import { IkasBlogCategory } from "../../data";
-
-export class IkasBlogCategoryList {
-  data: IkasBlogCategory[];
-  private _type: IkasBlogCategoryListType;
-  private _limit: number;
-  private _page: number;
-  private _count: number;
-  private _initialized = false;
-  private _minPage?: number | null = null;
-  private _blogCategoryListPropValue: IkasBlogCategoryListPropValue;
-
-  private _isLoading = false;
-
-  constructor(data: IkasBlogCategoryListParams) {
-    this.data = data.data ? data.data.map((b) => new IkasBlogCategory(b)) : [];
-    this._type =
-      data.type ||
-      data.blogCategoryListPropValue.blogCategoryListType ||
-      IkasBlogCategoryListType.ALL;
-    this._limit =
-      data.limit || data.blogCategoryListPropValue.initialLimit || 20;
-    this._page = data.page || 1;
-    this._count = data.count || 0;
-    this._initialized = data.initialized || false;
-    this._minPage = data.minPage;
-    this._blogCategoryListPropValue = data.blogCategoryListPropValue;
-
-    makeAutoObservable(this);
-  }
-
-  get limit() {
-    return this._limit;
-  }
-
-  get page() {
-    return this._page;
-  }
-
-  get count() {
-    return this._count;
-  }
-
-  get pageCount() {
-    return Math.ceil(this._count / this._limit);
-  }
-
-  get isInitialized() {
-    return this._initialized;
-  }
-
-  get isStatic() {
-    return this._type === IkasBlogCategoryListType.STATIC;
-  }
-
-  get hasPrev() {
-    if (this.isStatic || !this._minPage) return false;
-    return this._minPage > 1;
-  }
-
-  get hasNext() {
-    if (this.isStatic) return false;
-    return this.page * this.limit < this.count;
-  }
-
-  get isLoading() {
-    return this._isLoading;
-  }
-
-  private async listBlogCategories(page: number, limit: number) {
-    return await BlogStore.listBlogCategory({
-      id: this.isStatic
-        ? this._blogCategoryListPropValue.blogCategoryIds
-          ? { in: this._blogCategoryListPropValue.blogCategoryIds }
-          : undefined
-        : undefined,
-      pagination: {
-        page,
-        limit,
-      },
-    });
-  }
-
-  getPrev = async () => {
-    if (this.isStatic || this._isLoading || !this.hasPrev) return;
-
-    this._isLoading = true;
-
-    try {
-      const minPage = this._minPage! - 1;
-      const response = await this.listBlogCategories(minPage, this.limit);
-
-      this.data = response.data?.data?.concat(this.data) || this.data;
-      this._count = response.data?.count || this._count;
-      this._minPage = minPage;
-    } catch (err) {
-      console.log(err);
-    } finally {
-      this._isLoading = false;
-    }
-  };
-
-  getNext = async () => {
-    if (this.isStatic || this._isLoading || !this.hasNext) return;
-    this._isLoading = true;
-
-    try {
-      const response = await this.listBlogCategories(this.page + 1, this.limit);
-
-      this.data = this.data.concat(response.data?.data || []);
-      this._count = response.data?.count || this._count;
-      this._page = this.page + 1;
-    } catch (err) {
-      console.log(err);
-    } finally {
-      this._isLoading = false;
-    }
-  };
-
-  getPage = async (page: number) => {
-    if (this._isLoading || this.isStatic) return;
-    this._isLoading = true;
-
-    try {
-      const response = await this.listBlogCategories(page, this.limit);
-
-      this.data = response.data?.data || [];
-      this._count = response.data?.count || 0;
-      this._page = page;
-      this._minPage = page;
-    } catch (err) {
-      console.log(err);
-    } finally {
-      this._isLoading = false;
-    }
-  };
-
-  toJSON() {
-    return {
-      data: this.data,
-      type: this._type,
-      limit: this._limit,
-      page: this._page,
-      count: this._count,
-      initialized: this._initialized,
-      minPage: this._minPage,
-      blogCategoryListPropValue: this._blogCategoryListPropValue,
-    };
-  }
-}
-
-export type IkasBlogCategoryListParams = {
-  data?: IkasBlogCategory[];
-  type?: IkasBlogCategoryListType;
-  limit?: number;
-  page?: number;
-  count?: number;
-  initialized?: boolean;
-  minPage?: number;
-  blogCategoryListPropValue: IkasBlogCategoryListPropValue;
-};
-
-export enum IkasBlogCategoryListType {
-  ALL = "ALL",
-  STATIC = "STATIC",
-}