@ikas/storefront 4.0.0-alpha.43 → 4.0.0-alpha.44

package/src/components/checkout/model.ts

@@ -20,6 +20,7 @@ import {
   IkasTransactionStatus,
   IkasCampaignOfferTargetPageType,
   IkasCampaignOfferProduct,
+  IkasOrderShippingMethod,
 } from "../../models";
 import { IkasOrderAddress } from "../../models/data/order/address";
 import {
@@ -174,6 +175,11 @@ export default class CheckoutViewModel {
         } else {
           return this.changeStep(CheckoutStep.INFO);
         }
+      } else if (
+        this.step === CheckoutStep.SUCCESS &&
+        !this.canProceedToPayment
+      ) {
+        return this.changeStep(CheckoutStep.INFO);
       } else if (
         ![
           CheckoutStep.INFO,
@@ -250,15 +256,6 @@ export default class CheckoutViewModel {
       }
     }
 
-    if (this.step === CheckoutStep.PAYMENT) {
-      if (this.isInStoreDelivery) {
-        this.checkout.billingAddress = new IkasOrderAddress();
-        if (this.checkoutSettings) {
-          this.checkout.billingAddress.checkoutSettings = this.checkoutSettings;
-        }
-      }
-    }
-
     if (this.step !== CheckoutStep.SUCCESS) {
       if (this.checkout.isComplete) {
         return this.changeStep(CheckoutStep.SUCCESS);
@@ -369,7 +366,9 @@ export default class CheckoutViewModel {
 
   get canProceedToShipping() {
     return (
-      this.checkout.shippingAddress?.isValid &&
+      (this.isDigitalOnly
+        ? this.checkout.billingAddress?.isValid
+        : this.checkout.shippingAddress?.isValid) &&
       this.checkout.hasValidCustomerEmail &&
       this.error?.type !== ErrorType.NO_SHIPPING_ERROR
     );
@@ -435,6 +434,12 @@ export default class CheckoutViewModel {
     );
   }
 
+  get isDigitalOnly() {
+    return (
+      this.checkout.shippingMethod === IkasOrderShippingMethod.DIGITAL_DELIVERY
+    );
+  }
+
   // VALIDATIONS END
 
   saveCart = async () => {
@@ -445,12 +450,17 @@ export default class CheckoutViewModel {
     }
 
     if (
-      this.step === CheckoutStep.INFO ||
-      this.step === CheckoutStep.SHIPPING
+      (this.step === CheckoutStep.INFO ||
+        this.step === CheckoutStep.SHIPPING) &&
+      !this.isDigitalOnly
     ) {
       input.billingAddress = null;
     }
 
+    if (this.isDigitalOnly) {
+      input.shippingAddress = null;
+    }
+
     const response = await CartStoreAPI.saveCart({ input });
 
     if (response?.graphQLErrors && response.graphQLErrors.length) {
@@ -463,6 +473,7 @@ export default class CheckoutViewModel {
       } else {
         throw {
           type: ErrorType.API_ERROR,
+          data: response.firstErrorMessage,
         };
       }
     }
@@ -517,6 +528,7 @@ export default class CheckoutViewModel {
     if (!checkStocksResponse.isSuccess) {
       throw {
         type: ErrorType.API_ERROR,
+        data: checkStocksResponse.firstErrorMessage,
       };
     }
 
@@ -562,6 +574,7 @@ export default class CheckoutViewModel {
       if (!response.isSuccess || !response.data?.length) {
         this.error = {
           type: ErrorType.API_ERROR,
+          data: response.firstErrorMessage,
         };
         return;
       }
@@ -615,7 +628,7 @@ export default class CheckoutViewModel {
     try {
       await this.checkStocks();
     } catch (err) {
-      if (err.type) {
+      if (typeof err.type !== undefined) {
         this.error = err;
       } else {
         console.log(err);
@@ -639,6 +652,7 @@ export default class CheckoutViewModel {
     ) {
       this.error = {
         type: ErrorType.API_ERROR,
+        data: paymentGatewaysResponse.firstErrorMessage,
       };
       return;
     }
@@ -711,18 +725,29 @@ export default class CheckoutViewModel {
       this.checkout.customer = new IkasOrderCustomer(
         this.store.customerStore.customer as any
       );
-    } else if (!this.checkout.customer)
-      this.checkout.customer = new IkasOrderCustomer({});
+    } else {
+      this.checkout.customer = new IkasOrderCustomer(
+        this.checkout.customer || {}
+      );
+    }
   };
 
   createShippingAddress = () => {
+    if (this.isDigitalOnly) return;
+
     if (!this.checkout.shippingAddress) {
-      const customerAddresses = this.store.customerStore.customer?.addresses;
-      this.onSelectedShippingAddressIdChange(
-        customerAddresses?.length ? customerAddresses[0].id! : "-1"
-      );
+      if (!!this.store.customerStore.customer) {
+        const customerAddresses = this.store.customerStore.customer.addresses;
+        this.onSelectedShippingAddressIdChange(
+          customerAddresses?.length ? customerAddresses[0].id! : "-1"
+        );
+      } else {
+        this.onSelectedShippingAddressIdChange("-1");
+      }
     } else {
-      this.selectedShippingAddressId = this.checkout.shippingAddress.id || "-1";
+      this.checkout.shippingAddress = new IkasOrderAddress(
+        _cloneDeep(this.checkout.shippingAddress) || {}
+      );
       this.checkout.shippingAddress.checkoutSettings = this.checkoutSettings;
     }
   };
@@ -733,26 +758,21 @@ export default class CheckoutViewModel {
         USE_DIFFERENT_ADDRESS_KEY
       );
 
-      if (this.useDifferentAddress) {
-        if (this.checkout.billingAddress) {
-          this.selectedBillingAddressId =
-            this.checkout.billingAddress.id || "-1";
-        }
-        this.checkout.billingAddress =
-          this.checkout.billingAddress || new IkasOrderAddress();
-      } else {
-        if (this.isInStoreDelivery || this.checkout.billingAddress) {
-          this.checkout.billingAddress = new IkasOrderAddress(
-            _cloneDeep(this.checkout.billingAddress) || {}
+      if (!this.checkout.billingAddress) {
+        if (!!this.store.customerStore.customer) {
+          const customerAddresses = this.store.customerStore.customer.addresses;
+          this.onSelectedBillingAddressIdChange(
+            customerAddresses?.length ? customerAddresses[0].id! : "-1"
           );
         } else {
-          this.checkout.billingAddress = new IkasOrderAddress(
-            _cloneDeep(this.checkout.shippingAddress) || {}
-          );
+          this.onSelectedBillingAddressIdChange("-1");
         }
+      } else {
+        this.checkout.billingAddress = new IkasOrderAddress(
+          _cloneDeep(this.checkout.billingAddress) || {}
+        );
+        this.checkout.billingAddress.checkoutSettings = this.checkoutSettings;
       }
-
-      this.checkout.billingAddress.checkoutSettings = this.checkoutSettings;
     }
   };
 
@@ -1048,6 +1068,34 @@ export default class CheckoutViewModel {
       } else {
         this.changeStep(CheckoutStep.PAYMENT);
       }
+    } catch (err) {
+      if (typeof err.type !== undefined) {
+        this.error = err;
+      } else {
+        console.log(err);
+        this.error = {
+          type: ErrorType.UNKNOWN,
+        };
+      }
+      this.isStepLoading = false;
+    }
+  };
+
+  onProceedToDigitalOnlyPaymentClick = async () => {
+    if (!this.canProceedToPayment) {
+      this.isErrorsVisible = true;
+      return;
+    }
+
+    this.isErrorsVisible = false;
+
+    try {
+      this.isStepLoading = true;
+
+      await this.checkStocks();
+      await this.saveCart();
+
+      this.changeStep(CheckoutStep.PAYMENT);
     } catch (err) {
       if (err.type) {
         this.error = err;
@@ -1076,7 +1124,7 @@ export default class CheckoutViewModel {
       this.error = undefined;
       this.changeStep(CheckoutStep.PAYMENT);
     } catch (err) {
-      if (err.type) {
+      if (typeof err.type !== undefined) {
         this.error = err;
       } else {
         console.log(err);
@@ -1118,6 +1166,46 @@ export default class CheckoutViewModel {
         return;
       }
 
+      await this.createSaleTransaction();
+    } catch (err) {
+      if (typeof err.type !== undefined) {
+        this.error = err;
+      } else {
+        this.error = {
+          type: ErrorType.UNKNOWN,
+        };
+      }
+      this.isStepLoading = false;
+    }
+  };
+
+  onCompleteDigitalOnlyPaymentClick = async () => {
+    if (
+      !this.canProceedToPayment ||
+      (this.checkoutSettings.showTermsAndConditionsCheckbox &&
+        !this.isTermsAndConditionsChecked)
+    ) {
+      this.isErrorsVisible = true;
+      return;
+    }
+
+    try {
+      this.isErrorsVisible = false;
+      this.isStepLoading = true;
+
+      await this.checkStocks();
+      await this.saveCart();
+
+      if (this.isCustomFlowStripe) {
+        const stripeFromBtn = document.querySelector("#stripe-form-btn");
+        if (stripeFromBtn) {
+          //@ts-ignore
+          stripeFromBtn.click();
+        }
+
+        return;
+      }
+
       await this.createSaleTransaction();
     } catch (err) {
       if (err.type) {
@@ -1207,6 +1295,7 @@ export default class CheckoutViewModel {
         process.env.NEXT_PUBLIC_BASE_URL + response.data.returnSlug;
     } else {
       throw {
+        data: response.firstErrorMessage,
         type: ErrorType.UNKNOWN,
       };
     }

package/src/components/checkout/steps/step-info/index.tsx

@@ -31,7 +31,9 @@ const CheckoutStepInfo: React.FC<Props> = ({ vm }) => {
   );
 
   const customerAddressesViewModel = React.useMemo(() => {
-    return new CustomerAddressesViewModel(vm, "shipping");
+    return vm.isDigitalOnly
+      ? new CustomerAddressesViewModel(vm, "billing")
+      : new CustomerAddressesViewModel(vm, "shipping");
   }, [vm]);
 
   return (
@@ -70,12 +72,16 @@ const CheckoutStepInfo: React.FC<Props> = ({ vm }) => {
             marginTop: vm.store.customerStore.customer ? "0px" : "32px",
           }}
           text={
-            vm.deliveryMethod === "address"
+            vm.deliveryMethod === "address" && !vm.isDigitalOnly
               ? t("checkout-page:actions.continueWithShipping")
               : t("checkout-page:actions.continueWithPayment")
           }
           isLoading={vm.isStepLoading}
-          onClick={vm.onProceedToShippingClick}
+          onClick={
+            vm.isDigitalOnly
+              ? vm.onProceedToDigitalOnlyPaymentClick
+              : vm.onProceedToShippingClick
+          }
         />
       )}
     </div>

package/src/components/checkout/steps/step-payment/billing-address/index.tsx

@@ -31,7 +31,7 @@ export const BillingAddress: React.FC<Props> = observer(({ vm }) => {
           marginBottom: vm.useDifferentAddress ? "24px" : "0px",
         }}
       >
-        {vm.deliveryMethod === "address" && (
+        {vm.deliveryMethod === "address" && !vm.isDigitalOnly && (
           <Checkbox
             value={!vm.useDifferentAddress}
             hasError={vm.isErrorsVisible && !vm.isTermsAndConditionsChecked}

package/src/components/checkout/steps/step-payment/index.tsx

@@ -93,7 +93,11 @@ export const CheckoutStepPayment: React.FC<Props> = observer(({ vm }) => {
         }}
         text={t("checkout-page:actions.completeOrder")}
         isLoading={vm.isStepLoading}
-        onClick={vm.onCompletePaymentClick}
+        onClick={
+          vm.isDigitalOnly
+            ? vm.onCompleteDigitalOnlyPaymentClick
+            : vm.onCompletePaymentClick
+        }
       />
 
       {!!t("checkout-page:securePaymentTooltip") && (

package/src/components/checkout/steps/step-success/index.tsx

@@ -246,9 +246,11 @@ export const StepSuccess: React.FC<Props> = observer(({ vm }) => {
       <ExpandableSection title={t("checkout-page:paymentSummary")}>
         {paymentInfoGrid}
       </ExpandableSection>
-      <ExpandableSection title={t("checkout-page:shippingSummary")}>
-        {contactInfoGrid}
-      </ExpandableSection>
+      {!vm.isDigitalOnly && (
+        <ExpandableSection title={t("checkout-page:shippingSummary")}>
+          {contactInfoGrid}
+        </ExpandableSection>
+      )}
 
       <div className={styles.Actions}>
         <div className={styles.HelpText}>

package/src/components/page-editor/ThemeComponentEditor.tsx

@@ -96,6 +96,8 @@ export class ThemeEditorComponent extends React.Component<Props> {
               statusUpdatedAt: null,
               stockLocationId: null,
               taxValue: null,
+              unitPrice: null,
+              finalUnitPrice: null,
               variant: {
                 barcodeList: null,
                 brand: null,
@@ -112,6 +114,8 @@ export class ThemeEditorComponent extends React.Component<Props> {
                 type: null,
                 weight: null,
                 variantValues: [],
+                baseUnit: null,
+                unit: null,
               },
               orderedAt: 0,
             }),

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

@@ -1,4 +1,5 @@
 import { IkasBaseModel } from "../base";
+import { IkasLocationTranslations } from "./location-translations";
 import { IkasCountry as ICountry } from "@ikas/storefront-models";
 import { makeObservable, observable } from "mobx";
 
@@ -9,6 +10,7 @@ export class IkasCountry extends IkasBaseModel implements ICountry {
   emojiString: string | null = null;
   iso2: string | null = null;
   iso3: string | null = null;
+  locationTranslations?: IkasLocationTranslations | null = null;
   name: string;
   native: string | null = null;
   phoneCode: string | null = null;
@@ -23,6 +25,7 @@ export class IkasCountry extends IkasBaseModel implements ICountry {
     this.emojiString = data.emojiString || null;
     this.iso2 = data.iso2 || null;
     this.iso3 = data.iso3 || null;
+    this.locationTranslations = data.locationTranslations || null;
     this.name = data.name || "";
     this.native = data.native || null;
     this.phoneCode = data.phoneCode || null;
@@ -36,6 +39,7 @@ export class IkasCountry extends IkasBaseModel implements ICountry {
       emojiString: observable,
       iso2: observable,
       iso3: observable,
+      locationTranslations: observable,
       name: observable,
       native: observable,
       phoneCode: observable,

package/src/models/data/country/location-translations/index.ts

@@ -0,0 +1,15 @@
+import { IkasLocationTranslations as ILocationTranslations } from "@ikas/storefront-models";
+import { makeAutoObservable } from "mobx";
+
+export class IkasLocationTranslations implements ILocationTranslations {
+  de: string | null;
+  en: string;
+  tr: string;
+
+  constructor(data: ILocationTranslations) {
+    this.de = data.de || null;
+    this.en = data.en || "";
+    this.tr = data.tr || "";
+    makeAutoObservable(this);
+  }
+}

package/src/models/data/order/line-item/base-unit/index.ts

@@ -0,0 +1,22 @@
+import {
+  IkasProductUnitType,
+  IkasOrderLineBaseUnit as IOrderLineBaseUnit,
+} from "@ikas/storefront-models";
+import { makeAutoObservable } from "mobx";
+import { IkasOrderLineVariantUnitType } from "./unit-type";
+
+export class IkasOrderLineBaseUnit implements IOrderLineBaseUnit {
+  baseAmount: number;
+  type: IkasProductUnitType;
+  unit: IkasOrderLineVariantUnitType | null;
+
+  constructor(data: IOrderLineBaseUnit) {
+    this.baseAmount = data.baseAmount;
+    this.type = data.type;
+    this.unit = data.unit ? new IkasOrderLineVariantUnitType(data.unit) : null;
+
+    makeAutoObservable(this);
+  }
+}
+
+export { IkasProductUnitType };

package/src/models/data/order/line-item/base-unit/unit-type/index.ts

@@ -0,0 +1,14 @@
+import { IkasOrderLineVariantUnitType as IOrderLineVariantUnitType } from "@ikas/storefront-models";
+import { makeAutoObservable } from "mobx";
+
+export class IkasOrderLineVariantUnitType implements IOrderLineVariantUnitType {
+  id: string;
+  name: string;
+
+  constructor(data: IOrderLineVariantUnitType) {
+    this.id = data.id;
+    this.name = data.name;
+
+    makeAutoObservable(this);
+  }
+}

package/src/models/data/order/line-item/index.ts

@@ -20,6 +20,7 @@ export class IkasOrderLineItem extends IkasBaseModel implements IOrderLineItem {
   discount: IkasOrderLineDiscount | null = null;
   discountPrice: number | null = null;
   finalPrice: number | null = null;
+  finalUnitPrice: number | null;
   options: IkasOrderLineItemOption[] | null = null;
   originalOrderLineItemId: string | null = null;
   price: number;
@@ -28,6 +29,7 @@ export class IkasOrderLineItem extends IkasBaseModel implements IOrderLineItem {
   statusUpdatedAt: number | null = null;
   stockLocationId: string | null = null;
   taxValue: number | null = null;
+  unitPrice: number | null;
   variant: IkasOrderLineVariant;
   orderedAt: number;
 
@@ -42,14 +44,19 @@ export class IkasOrderLineItem extends IkasBaseModel implements IOrderLineItem {
     this.discount = data.discount
       ? new IkasOrderLineDiscount(data.discount)
       : null;
-    this.discountPrice = data.discountPrice || null;
-    this.finalPrice = data.finalPrice || null;
-    (this.options =
-      data.options?.map((o) => new IkasOrderLineItemOption(o)) || null),
-      (this.originalOrderLineItemId = data.originalOrderLineItemId || null);
+    this.discountPrice = data.discountPrice ?? null;
+    this.finalPrice = data.finalPrice ?? null;
+    this.finalUnitPrice = data.finalUnitPrice ?? null;
+    this.options =
+      data.options?.map((o) => new IkasOrderLineItemOption(o)) || null;
+    this.originalOrderLineItemId = data.originalOrderLineItemId || null;
     this.price = data.price;
     this.quantity = data.quantity;
     this.status = data.status;
+    this.statusUpdatedAt = data.statusUpdatedAt;
+    this.stockLocationId = data.stockLocationId;
+    this.taxValue = data.taxValue;
+    this.unitPrice = data.unitPrice ?? null;
     this.variant = new IkasOrderLineVariant(data.variant);
     this.orderedAt = data.orderedAt;
 
@@ -61,6 +68,7 @@ export class IkasOrderLineItem extends IkasBaseModel implements IOrderLineItem {
       discount: observable,
       discountPrice: observable,
       finalPrice: observable,
+      finalUnitPrice: observable,
       options: observable,
       originalOrderLineItemId: observable,
       price: observable,
@@ -69,6 +77,7 @@ export class IkasOrderLineItem extends IkasBaseModel implements IOrderLineItem {
       statusUpdatedAt: observable,
       stockLocationId: observable,
       taxValue: observable,
+      unitPrice: observable,
       variant: observable,
       orderedAt: observable,
       //@ts-ignore
@@ -79,6 +88,8 @@ export class IkasOrderLineItem extends IkasBaseModel implements IOrderLineItem {
       overridenPriceWithQuantity: computed,
       formattedOverridenPriceWithQuantity: computed,
       formattedFinalPrice: computed,
+      formattedUnitPrice: computed,
+      formattedFinalUnitPrice: computed,
       formattedDiscountPrice: computed,
       finalPriceWithQuantity: computed,
       formattedFinalPriceWithQuantity: computed,
@@ -120,6 +131,32 @@ export class IkasOrderLineItem extends IkasBaseModel implements IOrderLineItem {
     );
   }
 
+  get formattedUnitPrice() {
+    return formatCurrency(
+      this.unitPrice || 0,
+      this.currencyCode || "",
+      this.currencySymbol || ""
+    );
+  }
+
+  get formattedFinalUnitPrice() {
+    return formatCurrency(
+      this.finalUnitPrice || 0,
+      this.currencyCode || "",
+      this.currencySymbol || ""
+    );
+  }
+
+  get unitPriceText() {
+    if (this.finalUnitPrice === null) return;
+
+    return `${formatCurrency(
+      this.finalUnitPrice,
+      this.currencyCode || "",
+      this.currencySymbol || ""
+    )} / ${this.variant.baseUnit?.unit?.name || this.variant.baseUnit?.type}`;
+  }
+
   get formattedDiscountPrice() {
     return formatCurrency(
       this.discountPrice || 0,

package/src/models/data/order/line-item/variant/index.ts

@@ -6,9 +6,12 @@ import { IkasOrderLineVariantBrand } from "./brand";
 import { IkasOrderLineVariantCategory } from "./category";
 import { IkasOrderLineVariantPrice } from "./price";
 import { makeAutoObservable } from "mobx";
+import { IkasOrderLineVariantUnit } from "./unit";
+import { IkasOrderLineBaseUnit } from "../base-unit";
 
 export class IkasOrderLineVariant implements IOrderLineVariant {
   barcodeList: string[] | null = null;
+  baseUnit: IkasOrderLineBaseUnit | null;
   brand: IkasOrderLineVariantBrand | null = null;
   categories: IkasOrderLineVariantCategory[] | null = null;
   id: string | null = null;
@@ -21,6 +24,7 @@ export class IkasOrderLineVariant implements IOrderLineVariant {
   tagIds: string[] | null = null;
   taxValue: number | null = null;
   type: number | null = null;
+  unit: IkasOrderLineVariantUnit | null;
   weight: number | null = null;
   variantValues: IkasOrderLineVariantVariantValue[] | null = null;
 
@@ -29,6 +33,9 @@ export class IkasOrderLineVariant implements IOrderLineVariant {
 
   constructor(data: IOrderLineVariant) {
     this.barcodeList = data.barcodeList || null;
+    this.baseUnit = data.baseUnit
+      ? new IkasOrderLineBaseUnit(data.baseUnit)
+      : null;
     this.brand = data.brand ? new IkasOrderLineVariantBrand(data.brand) : null;
     this.categories =
       data.categories?.map((c) => new IkasOrderLineVariantCategory(c)) || null;
@@ -43,6 +50,7 @@ export class IkasOrderLineVariant implements IOrderLineVariant {
     this.tagIds = data.tagIds || null;
     this.taxValue = data.taxValue || null;
     this.type = data.type || null;
+    this.unit = data.unit ? new IkasOrderLineVariantUnit(data.unit) : null;
     this.weight = data.weight || null;
     this.variantValues =
       data.variantValues?.map(

package/src/models/data/order/line-item/variant/price/index.ts

@@ -7,6 +7,7 @@ export class IkasOrderLineVariantPrice implements IOrderLineVariantPrice {
   discountPrice: number | null = null;
   priceListId: string | null = null;
   sellPrice: number;
+  unitPrice: number | null;
 
   constructor(data: IOrderLineVariantPrice) {
     this.buyPrice = data.buyPrice || null;
@@ -14,6 +15,7 @@ export class IkasOrderLineVariantPrice implements IOrderLineVariantPrice {
     this.discountPrice = data.discountPrice || null;
     this.priceListId = data.priceListId || null;
     this.sellPrice = data.sellPrice;
+    this.unitPrice = data.unitPrice;
 
     makeAutoObservable(this);
   }

package/src/models/data/order/line-item/variant/unit/index.ts

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

package/src/models/data/product/attribute-value/index.ts

@@ -5,9 +5,11 @@ import {
   IkasProductAttributeValue as IProductAttributeValue,
   IkasAttributeTableCellValue as IAttributeTableCellValue,
   IkasProductAttributeMap as IProductAttributeMap,
+  IkasProductAttributeType,
 } from "@ikas/storefront-models";
 import { makeAutoObservable } from "mobx";
 import { IkasProductAttributeValueFunctions } from "@ikas/storefront-model-functions";
+import ProductStore from "../../../../store/product";
 
 export class IkasProductAttributeValue implements IProductAttributeValue {
   imageIds: string[] | null = null;
@@ -40,6 +42,44 @@ export class IkasProductAttributeValue implements IProductAttributeValue {
   get tableValue() {
     return IkasProductAttributeValueFunctions.getTableValue(this.value);
   }
+
+  get productIds() {
+    if (
+      this.productAttribute?.type !== IkasProductAttributeType.PRODUCT ||
+      !this.value
+    ) {
+      return [];
+    }
+
+    try {
+      return JSON.parse(this.value) as string[];
+    } catch (err) {
+      console.error(err);
+      return [];
+    }
+  }
+
+  async getProducts() {
+    if (
+      this.productAttribute?.type !== IkasProductAttributeType.PRODUCT ||
+      !this.value
+    ) {
+      return [];
+    }
+
+    try {
+      const response = await ProductStore.searchProducts({
+        input: {
+          productIdList: this.productIds,
+        },
+      });
+
+      return response.data?.data || [];
+    } catch (err) {
+      console.error(err);
+      return [];
+    }
+  }
 }
 
 export class IkasAttributeTableCellValue implements IAttributeTableCellValue {