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

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

@@ -160,7 +160,7 @@ export class IkasApplicableProductFilterValue
   resultCount?: number | null;
 
   // Extra
-  private _isSelected: boolean;
+  isSelected: boolean;
 
   constructor(data: IApplicableProductFilterValue) {
     this.id = data.id || "";
@@ -174,7 +174,7 @@ export class IkasApplicableProductFilterValue
         isVideo: false,
       });
 
-    this._isSelected = data.isSelected || false;
+    this.isSelected = data.isSelected || false;
     this.resultCount =
       data.resultCount !== undefined && data.resultCount !== null
         ? data.resultCount
@@ -182,17 +182,6 @@ export class IkasApplicableProductFilterValue
 
     makeAutoObservable(this);
   }
-
-  get isSelected() {
-    return this._isSelected;
-  }
-
-  toJSON() {
-    return {
-      ...this,
-      isSelected: this._isSelected,
-    };
-  }
 }
 
 export class IkasProductFilterValue implements IProductFilterValue {
@@ -216,12 +205,14 @@ export class IkasProductFilterSettings implements IProductFilterSettings {
   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);
   }

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

@@ -13,16 +13,17 @@ import {
 } from "@ikas/storefront-models";
 import { IkasProductOptionSet } from "./option-set";
 import { makeAutoObservable } from "mobx";
-import {
-  IkasProductFunctions,
-  IkasProductOptionSetFunctions,
-} from "@ikas/storefront-model-functions";
+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;
@@ -38,6 +39,7 @@ export class IkasProduct implements IProduct {
   attributes: IkasProductAttributeValue[];
   variantTypes: IkasProductVariantType[];
   productOptionSetId: string | null = null;
+  baseUnit: IkasProductBaseUnit | null;
 
   // Extra
   productOptionSet?: IkasProductOptionSet | null = null;
@@ -69,6 +71,9 @@ export class IkasProduct implements IProduct {
       ? 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)
@@ -94,9 +99,7 @@ export class IkasProduct implements IProduct {
 
   get hasValidProductOptionValues() {
     if (this.productOptionSet) {
-      return IkasProductOptionSetFunctions.hasValidValues(
-        this.productOptionSet
-      );
+      return this.productOptionSet.hasValidValues;
     } else {
       return true;
     }
@@ -161,6 +164,28 @@ export class IkasProduct implements IProduct {
     );
   }
 
+  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) => {
@@ -258,6 +283,19 @@ export class IkasProduct implements IProduct {
     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;

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

@@ -79,13 +79,18 @@ export class IkasProductOptionSet implements IProductOptionSet {
       ? data.translations?.map((o) => new IkasProductOptionSetTranslations(o))
       : null;
 
+    this.initOptionValues();
     makeAutoObservable(this);
   }
 
   get displayedOptions() {
-    return IkasProductOptionSetFunctions.getDisplayedOptions(this).map(
-      (o) => new IkasProductOption(o)
-    );
+    return IkasProductOptionSetFunctions.getDisplayedOptions(
+      this
+    ) as IkasProductOption[];
+  }
+
+  get hasValidValues() {
+    return this.displayedOptions.every((o) => o.hasValidValues);
   }
 
   initOptionValues = async () => {

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

@@ -13,7 +13,7 @@ import { makeAutoObservable } from "mobx";
 import { IkasImage } from "../../../image";
 import _sortBy from "lodash/sortBy";
 import { IkasProductOptionFunctions } from "@ikas/storefront-model-functions";
-import { uploadProductOptionFile } from "@ikas/storefront-api";
+import { getProductOptionFileUrl, uploadFile } from "@ikas/storefront-api";
 
 export class IkasProductOptionOtherPrice implements IProductOptionOtherPrice {
   currencyCode: string;
@@ -181,16 +181,17 @@ export class IkasProductOption implements IProductOption {
     this.requiredOptionValueIds = data.requiredOptionValueIds || null;
 
     this.values = data.values || [];
-    //@ts-ignore
-    this.childOptions = data.childOptions || [];
+    this.childOptions = data.childOptions
+      ? data.childOptions.map((co) => new IkasProductOption(co))
+      : [];
 
     makeAutoObservable(this);
   }
 
   get displayedChildOptions() {
-    return IkasProductOptionFunctions.getDisplayedChildOptions(this).map(
-      (o) => new IkasProductOption(o)
-    );
+    return IkasProductOptionFunctions.getDisplayedChildOptions(
+      this
+    ) as IkasProductOption[];
   }
 
   productOptionFileUpload = async (files: File[]) => {
@@ -202,15 +203,37 @@ export class IkasProductOption implements IProductOption {
     )
       return [];
 
-    let fileIds = await Promise.all(
-      files.map((file) => uploadProductOptionFile(file, this))
-    );
-    fileIds = fileIds.filter((id) => id !== null);
-    return fileIds;
+    let tempUploadFiles = (
+      await Promise.all(
+        files.map((file) =>
+          getProductOptionFileUrl(
+            {
+              fileName: file.name,
+              productOptionSetId: this.productOptionSetId,
+              productOptionId: this.id,
+            },
+            file
+          )
+        )
+      )
+    ).filter((file) => file.data);
+
+    const uploadedFiles: string[] = [];
+    for (const file of tempUploadFiles) {
+      const isSuccess = await uploadFile(file.data!, file.data!.file);
+      if (isSuccess) {
+        uploadedFiles.push(file.data!.optionUrl);
+      }
+    }
+
+    return uploadedFiles;
   };
 
-  get hasValidValues() {
-    return IkasProductOptionFunctions.hasValidValues(this);
+  get hasValidValues(): boolean {
+    return (
+      IkasProductOptionFunctions.hasValidValues(this) &&
+      this.displayedChildOptions.every((o) => o.hasValidValues)
+    );
   }
 
   get values() {

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

@@ -1,6 +1,9 @@
 import { IkasProductPrice } from "./price";
 import { IkasVariantValue } from "../../variant-type/variant-value";
-import { IkasProductAttributeValue } from "../attribute-value";
+import {
+  IkasProductAttributeMap,
+  IkasProductAttributeValue,
+} from "../attribute-value";
 import { IkasProductCampaign } from "../campaign";
 import { IkasProductImage } from "../image";
 import { IkasProductVariant as IProductVariant } from "@ikas/storefront-models";
@@ -11,6 +14,8 @@ import {
   listProductBackInStockRemind,
   saveProductBackInStockRemind,
 } from "@ikas/storefront-api";
+import _groupBy from "lodash/groupBy";
+import { IkasProductVariantUnit } from "./unit";
 
 export class IkasProductVariant implements IProductVariant {
   id: string;
@@ -25,6 +30,7 @@ export class IkasProductVariant implements IProductVariant {
   sellIfOutOfStock: boolean;
   images: IkasProductImage[] | null;
   campaigns?: IkasProductCampaign[];
+  unit: IkasProductVariantUnit | null;
   private _backInStockReminderSaved = false;
 
   constructor(data: Partial<IProductVariant> = {}) {
@@ -47,6 +53,7 @@ export class IkasProductVariant implements IProductVariant {
     this.stock = data.stock || 0;
     this.isActive = data.isActive !== undefined ? data.isActive : true;
     this.campaigns = data.campaigns || [];
+    this.unit = data.unit ? new IkasProductVariantUnit(data.unit) : null;
     this.sellIfOutOfStock = data.sellIfOutOfStock || false;
 
     makeAutoObservable(this);
@@ -73,6 +80,24 @@ export class IkasProductVariant implements IProductVariant {
     return this._backInStockReminderSaved;
   }
 
+  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[];
+  }
+
   async saveBackInStockReminder(email: string) {
     const listResponse = await listProductBackInStockRemind({
       email: { eq: email },

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

@@ -1,47 +1,63 @@
 import { IkasProductPriceFunctions } from "@ikas/storefront-model-functions";
 import { IkasProductPrice as IProductPrice } from "@ikas/storefront-models";
 import { makeAutoObservable } from "mobx";
-import { getCurrencySymbol, formatMoney } from "../../../../../utils/currency";
+import { formatCurrency } from "../../../../../utils/currency";
 
 export class IkasProductPrice implements IProductPrice {
   buyPrice: number | null = null;
   currency: string | null = null;
+  currencySymbol: string | null = null;
   discountPrice: number | null = null;
   priceListId: string | null = null;
   sellPrice: number;
+  unitPrice: number | null = null;
 
   constructor(data?: IProductPrice) {
     this.buyPrice = data?.buyPrice ?? null;
     this.currency = data?.currency ?? null;
+    this.currencySymbol = data?.currencySymbol ?? "";
     this.discountPrice = data?.discountPrice ?? null;
     this.priceListId = data?.priceListId ?? null;
     this.sellPrice = data?.sellPrice ?? 0;
+    this.unitPrice = data?.unitPrice ?? null;
 
     makeAutoObservable(this);
   }
 
-  get currencySymbol() {
-    return getCurrencySymbol(this.currency || "");
-  }
-
   get finalPrice() {
     return IkasProductPriceFunctions.getFinalPrice(this);
   }
 
   get formattedFinalPrice() {
-    return formatMoney(this.finalPrice, this.currencySymbol);
+    return formatCurrency(
+      this.finalPrice,
+      this.currency || "",
+      this.currencySymbol || ""
+    );
   }
 
   get formattedBuyPrice() {
-    return formatMoney(this.buyPrice || 0, this.currencySymbol);
+    return formatCurrency(
+      this.buyPrice || 0,
+      this.currency || "",
+      this.currencySymbol || ""
+    );
   }
 
   get formattedDiscountPrice() {
-    return formatMoney(this.discountPrice || 0, this.currencySymbol);
+    return formatCurrency(
+      this.discountPrice || 0,
+      this.currency || "",
+      this.currencySymbol || ""
+    );
   }
 
   get formattedSellPrice() {
-    return formatMoney(this.sellPrice || 0, this.currencySymbol);
+    return formatCurrency(
+      this.sellPrice || 0,
+      this.currency || "",
+      this.currencySymbol || ""
+    );
   }
 
   get hasDiscount() {

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

@@ -0,0 +1,17 @@
+import {
+  IkasProductUnitType,
+  IkasProductVariantUnit as IProductVariantUnit,
+} from "@ikas/storefront-models";
+import { makeAutoObservable } from "mobx";
+
+export class IkasProductVariantUnit implements IProductVariantUnit {
+  amount: number | null;
+  type: IkasProductUnitType;
+
+  constructor(data: IProductVariantUnit) {
+    this.amount = data.amount;
+    this.type = data.type;
+
+    makeAutoObservable(this);
+  }
+}

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

@@ -3,10 +3,12 @@ import { IkasProductVariantType as IProductVariantType } from "@ikas/storefront-
 import { makeAutoObservable } from "mobx";
 
 export class IkasProductVariantType implements IProductVariantType {
+  order: number;
   variantType: IkasVariantType;
   variantValueIds: string[];
 
   constructor(data: Partial<IkasProductVariantType>) {
+    this.order = data.order || 0;
     this.variantType = data.variantType
       ? new IkasVariantType(data.variantType)
       : new IkasVariantType();

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

@@ -8,6 +8,7 @@ import {
   IkasRaffleAppliedProduct as IRaffleAppliedProduct,
   IkasRaffleVerificationType,
   IkasRaffleMetadataTargetType,
+  IkasRaffleParticipantStatus,
 } from "@ikas/storefront-models";
 import { IkasRaffleFunctions } from "@ikas/storefront-model-functions";
 
@@ -33,13 +34,12 @@ export class IkasRaffle implements IRaffle {
   dateRange: IkasRaffleDateRangeField | null;
   metadata: IkasRaffleMetaData | null;
   name: string;
-  participantCount?: number | null;
   requiredCustomerAccount: boolean;
   status: boolean;
   variants: IkasRaffleAppliedProduct[] | null;
-  products: IkasProduct[];
   verificationType: IkasRaffleVerificationType;
-  isCustomerWinner: boolean | null;
+
+  products: IkasProduct[];
 
   constructor(data: Partial<IkasRaffle> = {}) {
     this.id = data.id || Date.now() + "";
@@ -47,12 +47,10 @@ export class IkasRaffle implements IRaffle {
     this.updatedAt = data.updatedAt || Date.now();
     this.deleted = data.deleted || null;
     this.name = data.name || "";
-    this.participantCount = data.participantCount || 0;
     this.requiredCustomerAccount = data.requiredCustomerAccount || false;
     this.status = data.status || false;
     this.verificationType =
       data.verificationType || IkasRaffleVerificationType.EMAIL;
-    this.isCustomerWinner = data.isCustomerWinner || null;
 
     this.dateRange = data.dateRange
       ? new IkasRaffleDateRangeField(data.dateRange)
@@ -113,8 +111,10 @@ export class IkasRaffleParticipant implements IRaffleParticipant {
   email: string;
   applicationDate: number;
   phone: string | null = null;
-  isWinner: boolean | null = null;
+  isDeliveredCargo: boolean | null;
 
+  raffle: IkasRaffle | null;
+  status: IkasRaffleParticipantStatus | null;
   extraData: Record<string, any> | null = null;
   appliedProduct: IkasRaffleAppliedProduct;
 
@@ -131,8 +131,10 @@ export class IkasRaffleParticipant implements IRaffleParticipant {
     this.email = data.email || "";
     this.applicationDate = data.applicationDate || 0;
     this.phone = data.phone || null;
-    this.isWinner = data.isWinner || null;
+    this.isDeliveredCargo = data.isDeliveredCargo || false;
 
+    this.raffle = data.raffle ? new IkasRaffle(data.raffle) : null;
+    this.status = data.status || null;
     this.extraData = data.extraData || {};
     this.appliedProduct = new IkasRaffleAppliedProduct(
       data.appliedProduct || {}

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

@@ -1,6 +1,6 @@
 import { IkasBaseModel } from "../base";
 import { IkasState as IState } from "@ikas/storefront-models";
-import { makeAutoObservable } from "mobx";
+import { makeObservable, observable } from "mobx";
 
 export class IkasState extends IkasBaseModel implements IState {
   countryId: string;
@@ -13,6 +13,10 @@ export class IkasState extends IkasBaseModel implements IState {
     this.name = data.name;
     this.stateCode = data.stateCode;
 
-    makeAutoObservable(this);
+    makeObservable(this, {
+      countryId: observable,
+      name: observable,
+      stateCode: observable,
+    });
   }
 }

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

@@ -20,6 +20,7 @@ export class IkasStorefront implements IStorefront {
   analytics4Id: string | null;
   universalAnalyticsId: string | null;
   tiktokPixelId: string | null;
+  token: string | null;
 
   localizations: IkasStorefrontLocalization[];
   routings: IkasStorefrontRouting[];
@@ -40,6 +41,7 @@ export class IkasStorefront implements IStorefront {
     this.analytics4Id = data.analytics4Id || null;
     this.universalAnalyticsId = data.universalAnalyticsId || null;
     this.tiktokPixelId = data.tiktokPixelId || null;
+    this.token = data.token || null;
 
     // Sub Models
     this.localizations = data.localizations

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

@@ -10,6 +10,8 @@ export class IkasStorefrontRouting implements IStorefrontRouting {
   path: string | null;
   priceListId: string | null;
   dynamicCurrencySettings: IkasStorefrontDynamicCurrencySettings | null;
+  currencyCode: string | null;
+  currencySymbol: string | null;
 
   constructor(data: IStorefrontRouting) {
     this.id = data.id;
@@ -19,6 +21,8 @@ export class IkasStorefrontRouting implements IStorefrontRouting {
     this.path = data.path;
     this.priceListId = data.priceListId;
     this.dynamicCurrencySettings = data.dynamicCurrencySettings;
+    this.currencyCode = data.currencyCode;
+    this.currencySymbol = data.currencySymbol;
 
     makeAutoObservable(this);
   }

package/src/models/ui/product-list/index.ts

@@ -56,31 +56,45 @@ export class IkasProductList {
   private _fetchRequestTime = 0;
   private router?: NextRouter | null = null;
 
-  constructor(data: IkasProductListParams, router?: NextRouter) {
+  constructor(
+    data: IkasProductListParams | IkasProductList,
+    router?: NextRouter
+  ) {
+    const _params = data as IkasProductListParams;
+    const _list = data as IkasProductList;
+
     this.data = data.data ? data.data.map((d) => new IkasProduct(d)) : [];
     this._type =
-      data.type ||
-      data.productListPropValue.productListType ||
+      _params.type ||
+      _list._type ||
+      _params.productListPropValue.productListType ||
+      _list._productListPropValue.productListType ||
       IkasProductListType.ALL;
     this._pageType = data.pageType;
     this._sort =
       data.sort ||
       data.productListPropValue.initialSort ||
       IkasProductListSortType.LAST_ADDED;
-
-    this._limit = data.limit || data.productListPropValue.initialLimit || 20;
+    this._limit =
+      data.limit ||
+      _params.productListPropValue.initialLimit ||
+      _list._productListPropValue.initialLimit ||
+      20;
     this._page = data.page || 1;
     this._minPage = data.minPage || null;
     this._count = data.count || 0;
     this._searchKeyword = data.searchKeyword || "";
-    this._productListPropValue = data.productListPropValue;
+    this._productListPropValue =
+      _params.productListPropValue || _list._productListPropValue;
 
-    this._filterBrandId = data.filterBrandId || null;
-    this._filterCategoryId = data.filterCategoryId || null;
+    this._filterBrandId = _params.filterBrandId || _list._filterBrandId || null;
+    this._filterCategoryId =
+      _params.filterCategoryId || _list._filterCategoryId || null;
 
-    this._relatedProductData = data.relatedProductData || null;
+    this._relatedProductData =
+      _params.relatedProductData || _list._relatedProductData || null;
 
-    this._recommendFor = data.recommendFor;
+    this._recommendFor = _params.recommendFor || _list._recommendFor;
 
     this.filters = data.filters
       ? data.filters.map((f) => new IkasProductFilter(f, this))
@@ -88,7 +102,8 @@ export class IkasProductList {
     this._filterCategories = data.filterCategories
       ? data.filterCategories.map((c) => new IkasFilterCategory(c))
       : null;
-    this.pageSpecificData = data.pageSpecificData || null;
+    this.pageSpecificData =
+      _params.pageSpecificData || _list.pageSpecificData || null;
 
     this.router = router;
 
@@ -221,12 +236,6 @@ export class IkasProductList {
 
   get filterQueryParams() {
     const queryParams: Record<string, any> = {};
-    const _getQueryParams = this.getQueryParams();
-    if (_getQueryParams) {
-      _getQueryParams.forEach((value, key) => {
-        queryParams[key] = value;
-      });
-    }
 
     this.filters?.forEach((f) => {
       if (f.keyList.length) queryParams[f.key] = f.keyList;

package/src/models/ui/raffle-list/index.ts

@@ -75,7 +75,7 @@ export class IkasRaffleList {
   }
 
   private async getRaffleList(page: number, limit: number) {
-    const response = await RaffleStore.listRaffle({
+    const response = await RaffleStore.listStorefrontRaffle({
       start: this._start ? { eq: this._start } : undefined,
       end: this._end ? { eq: this._end } : undefined,
       includeDeleted: this._includeDeleted || false,

package/src/models/ui/validator/form/raffle-form.ts

@@ -1,5 +1,6 @@
 import { saveRaffleParticipant } from "@ikas/storefront-api";
 import { action, computed, makeObservable, observable } from "mobx";
+import { GraphQLError } from "graphql";
 
 import { Validator } from "..";
 import { IkasBaseStore } from "../../../../store";
@@ -237,7 +238,11 @@ export class RaffleForm {
   }
 
   async submit() {
-    const response = { isFormError: false, isSuccess: false };
+    const response: {
+      isFormError: boolean;
+      isSuccess: boolean;
+      errors?: readonly GraphQLError[];
+    } = { isFormError: false, isSuccess: false };
     const hasFormError = await this.validateAll();
     if (hasFormError) {
       response.isFormError = true;
@@ -246,7 +251,7 @@ export class RaffleForm {
 
     try {
       const selectedVariant = this.raffle.products[0].selectedVariant;
-      const isRaffleFormSuccess = await saveRaffleParticipant({
+      const saveRaffleParticipantResponse = await saveRaffleParticipant({
         input: {
           appliedProduct: {
             productId: selectedVariant.productId,
@@ -264,12 +269,20 @@ export class RaffleForm {
         },
       });
 
-      if (isRaffleFormSuccess) {
+      if (saveRaffleParticipantResponse?.graphQLErrors) {
+        response.errors = saveRaffleParticipantResponse.graphQLErrors;
+        response.isSuccess = false;
+      }
+
+      if (saveRaffleParticipantResponse.data) {
         response.isSuccess = true;
       }
 
       return response;
     } catch (error) {
+      if (error) {
+        response.errors = error;
+      }
       return response;
     }
   }