@ikas/storefront 1.0.21 → 2.0.0-alpha.1

package/src/components/checkout/model.ts

@@ -0,0 +1,1007 @@
+import { makeAutoObservable } from "mobx";
+import { NextRouter } from "next/router";
+import _cloneDeep from "lodash/cloneDeep";
+import _sortBy from "lodash/sortBy";
+import { v4 as uuidv4 } from "uuid";
+
+import {
+  IkasCheckout,
+  IkasInstallmentInfo,
+  IkasInstallmentInfoInput,
+  IkasCustomerAddress,
+  IkasMerchantSettings,
+  IkasAvailableShippingMethod,
+  IkasTransactionStatusEnum,
+  IkasOrderLineItem,
+  IkasOrderTransaction,
+  IkasOrder,
+  IkasCheckoutCustomer,
+} from "../../models";
+import { IkasOrderAddress } from "../../models/data/order/address";
+import {
+  IkasPaymentGateway,
+  IkasPaymentGatewayType,
+  IkasPaymentMethodType,
+} from "../../models/data/payment-gateway";
+import { IkasOrderLineVariant } from "../../models/data/order/line-item/variant";
+import { IkasStorefront } from "../../models/data/storefront";
+import { IkasCheckoutAPI, IkasCountryAPI, IkasCustomerAPI } from "../../api";
+import { IkasMerchantAPI } from "../../api";
+import CreditCardData from "./components/credit-card-form/model";
+import { IkasStorefrontConfig } from "../../storefront";
+import { IkasCheckoutSettings } from "../../models/data/checkout-settings";
+import { TFunction } from "../../utils/i18n";
+import { Analytics } from "../../analytics";
+
+const NUMBER_ONLY_REGEX = /^\d+$/;
+const MAX_CARD_NUMBER_LENGTH = 16;
+const MAX_CVC_LENGTH = 4;
+const USE_DIFFERENT_ADDRESS_KEY = "sAddr";
+const isServer = typeof localStorage === "undefined";
+
+export default class CheckoutViewModel {
+  checkout = new IkasCheckout();
+  checkoutSettings = new IkasCheckoutSettings();
+  storefront?: IkasStorefront | null = null;
+  store = IkasStorefrontConfig.store;
+  router: NextRouter;
+  isCheckoutLoaded = false;
+  isErrorsVisible = false;
+  isStepLoading = false;
+  isTermsAndConditionsChecked = false;
+  isChangingShippingMethod = false;
+  step: CheckoutStep = CheckoutStep.INFO;
+
+  merchantSettings?: IkasMerchantSettings;
+  cardData?: CreditCardData | null = null;
+  paymentGateways: IkasPaymentGateway[] = [];
+  installmentInfo?: IkasInstallmentInfo | null = null;
+  useDifferentAddress = false;
+  shouldSaveAddress = false;
+  addressTitle = "";
+
+  shippingCountryIds?: string[] | null = null;
+  selectedShippingAddressId?: string = "-1";
+  selectedBillingAddressId?: string = "-1";
+
+  returnPolicy: string;
+  privacyPolicy: string;
+  termsOfService: string;
+
+  policyModalTitle = "";
+  policyModalText = "";
+
+  error?: CheckoutError | null = null;
+
+  // For success step
+  order?: IkasOrder;
+  successTransaction?: IkasOrderTransaction;
+
+  t: TFunction;
+
+  constructor(
+    checkout: IkasCheckout,
+    checkoutSettings: IkasCheckoutSettings,
+    merchantSettings: IkasMerchantSettings | null,
+    router: NextRouter,
+    returnPolicy: string,
+    privacyPolicy: string,
+    termsOfService: string,
+    t: TFunction
+  ) {
+    this.checkout = checkout;
+    this.checkoutSettings = checkoutSettings;
+    this.router = router;
+    this.returnPolicy = returnPolicy;
+    this.privacyPolicy = privacyPolicy;
+    this.termsOfService = termsOfService;
+    this.t = t;
+
+    if (merchantSettings) this.merchantSettings = merchantSettings;
+
+    this.isTermsAndConditionsChecked = this.checkoutSettings.isTermsAndConditionsDefaultChecked;
+    this.store.cartStore.cart = this.checkout.cart;
+
+    this.init();
+    makeAutoObservable(this);
+  }
+
+  init = async () => {
+    await this.store.customerStore.waitUntilInitialized();
+    this.createCustomer();
+    this.createShippingAddress();
+    this.createBillingAddress();
+    await this.getMerchantSettings();
+    await this.initStep();
+  };
+
+  initStep = async () => {
+    if (IkasStorefrontConfig.isEditor) {
+      this.step = CheckoutStep.INFO;
+      this.isCheckoutLoaded = true;
+      return;
+    }
+
+    const queryParams = new URLSearchParams(window.location.search);
+    const queryStep = queryParams.get("step");
+    const queryFailed = queryParams.get("failed");
+    const queryError = queryParams.get("error");
+
+    if (queryStep) {
+      this.step = queryStep as CheckoutStep;
+
+      if (this.step === CheckoutStep.SHIPPING && !this.canProceedToShipping) {
+        return this.changeStep(CheckoutStep.INFO);
+      } else if (
+        this.step === CheckoutStep.PAYMENT &&
+        !this.canProceedToPayment
+      ) {
+        return this.changeStep(CheckoutStep.INFO);
+      } else if (
+        ![
+          CheckoutStep.INFO,
+          CheckoutStep.SUCCESS,
+          CheckoutStep.SHIPPING,
+          CheckoutStep.PAYMENT,
+        ].includes(this.step)
+      ) {
+        return this.changeStep(CheckoutStep.INFO);
+      }
+    }
+
+    if (queryFailed) {
+      this.error = {
+        type: ErrorType.PAYMENT_ERROR,
+        data: queryError || null,
+      };
+    }
+
+    if (this.step === CheckoutStep.INFO) {
+      await this.getShippingCountries();
+      this.checkShippingCountries();
+    }
+
+    // Skip shipping if there is only 1 shipping method
+    if (
+      this.step === CheckoutStep.SHIPPING &&
+      this.checkout.availableShippingMethods.length === 1 &&
+      !this.checkoutSettings.isGiftPackageEnabled
+    ) {
+      this.step = CheckoutStep.PAYMENT;
+      this.router.replace(
+        `/checkout?id=${this.checkout.id}&step=${this.step}`,
+        undefined,
+        {
+          shallow: true,
+        }
+      );
+    }
+
+    // Check if there are available shipping methods for the shipping address
+    if (
+      this.step === CheckoutStep.SHIPPING &&
+      !this.checkout.availableShippingMethods.length
+    ) {
+      this.error = {
+        type: ErrorType.NO_SHIPPING_ERROR,
+      };
+      this.isCheckoutLoaded = true;
+      return;
+    }
+
+    if (
+      this.step === CheckoutStep.PAYMENT ||
+      this.step === CheckoutStep.SUCCESS
+    ) {
+      await this.listPaymentGateways();
+
+      if (!this.paymentGateways.length) {
+        this.error = {
+          type: ErrorType.NO_SHIPPING_ERROR,
+        };
+        this.isCheckoutLoaded = true;
+        return;
+      }
+    }
+
+    if (this.step !== CheckoutStep.SUCCESS) {
+      if (this.checkout.isComplete) {
+        return this.changeStep(CheckoutStep.SUCCESS);
+      } else {
+        await this.initialStockCheck();
+      }
+    } else {
+      this.order = await IkasCheckoutAPI.getOrder(this.checkout.orderId!);
+
+      const transactions = await IkasCustomerAPI.getOrderTransactions({
+        orderId: this.checkout.orderId!,
+      });
+
+      this.successTransaction = transactions.length
+        ? transactions[0]
+        : undefined;
+
+      if (this.successTransaction) {
+        const paymentGatewayId = this.successTransaction.paymentGatewayId;
+        this.checkout.selectedPaymentGateway = this.paymentGateways.find(
+          (pg) => pg.id === paymentGatewayId
+        );
+      }
+    }
+
+    this.isCheckoutLoaded = true;
+    Analytics.checkoutStep(this.checkout, this.step);
+  };
+
+  getMerchantSettings = async () => {
+    if (!this.merchantSettings) {
+      this.merchantSettings = await IkasMerchantAPI.listMerchantSettings();
+    }
+  };
+
+  get cart() {
+    return this.checkout.cart;
+  }
+
+  get selectedPaymentGatewayIndex() {
+    return this.paymentGateways.findIndex(
+      (pg) => pg.id === this.checkout.selectedPaymentGateway?.id
+    );
+  }
+
+  get selectedInstallmentIndex() {
+    return (
+      this.installmentInfo?.installmentPrices.findIndex(
+        (ip) => ip.installmentCount === this.cardData?.installmentCount
+      ) || 0
+    );
+  }
+
+  get checkoutUrl() {
+    return `/checkout?id=${this.checkout.id}&step=info`;
+  }
+
+  get customerAddressOptions() {
+    const defaultOption = {
+      label: this.t("checkout-page:newAddress"),
+      value: "-1",
+    };
+
+    const addressOptions =
+      this.store.customerStore.customer?.addresses.map((a) => ({
+        label: a.title + " - " + a.addressText,
+        value: a.id!,
+      })) || [];
+
+    return [defaultOption].concat(addressOptions);
+  }
+
+  get installmentPrice() {
+    if (this.installmentInfo && this.cardData?.installmentCount) {
+      return this.installmentInfo.installmentPrices.find(
+        (ip) => ip.installmentCount === this.cardData?.installmentCount
+      )?.totalPrice;
+    }
+  }
+
+  get installmentExtraPrice() {
+    if (this.installmentPrice && this.checkout.totalFinalPrice) {
+      return this.installmentPrice - this.checkout.totalFinalPrice;
+    }
+  }
+
+  get finalPrice() {
+    if (this.step === CheckoutStep.SUCCESS)
+      return this.checkout.totalFinalPrice!;
+    return this.installmentPrice || this.checkout.$totalFinalPrice;
+  }
+
+  get hasStockError() {
+    return this.error?.type === ErrorType.STOCK_ERROR;
+  }
+
+  // VALIDATIONS
+
+  get canProceedToShipping() {
+    return (
+      this.checkout.shippingAddress?.isValid &&
+      this.checkout.hasValidCustomer &&
+      this.error?.type !== ErrorType.NO_SHIPPING_ERROR
+    );
+  }
+
+  get canProceedToPayment() {
+    // TODO might add something here later not sure
+    return this.canProceedToShipping;
+  }
+
+  get canPerformPayment() {
+    if (
+      this.checkoutSettings.showTermsAndConditionsCheckbox &&
+      !this.isTermsAndConditionsChecked
+    )
+      return false;
+
+    const pg = this.checkout.selectedPaymentGateway;
+    return (
+      this.canProceedToShipping &&
+      !!this.checkout.billingAddress?.isValid &&
+      (pg?.paymentMethodType === IkasPaymentMethodType.CREDIT_CARD &&
+      pg.type === IkasPaymentGatewayType.INTERNAL
+        ? this.cardData?.isValid
+        : true)
+    );
+  }
+
+  // VALIDATIONS END
+
+  saveCheckout = async () => {
+    const response = await IkasCheckoutAPI.saveCheckout(this.checkout);
+
+    if (response?.errors && response.errors.length) {
+      const firstError = response.errors[0];
+
+      if (firstError.extensions?.code === "CUSTOMER_LOGIN_REQUIRED") {
+        throw {
+          type: ErrorType.CUSTOMER_LOGIN_REQUIRED_ERROR,
+        };
+      } else {
+        throw {
+          type: ErrorType.API_ERROR,
+        };
+      }
+    }
+  };
+
+  checkStocks = async () => {
+    const lines = this.cart!.items.map((i) => ({
+      quantity: i.quantity,
+      variantId: i.variant.id,
+      productId: i.variant.productId,
+    }));
+
+    const result = await IkasCheckoutAPI.checkStocks(
+      lines,
+      IkasStorefrontConfig.stockLocationIds || []
+    );
+
+    if (!result) {
+      throw {
+        type: ErrorType.API_ERROR,
+      };
+    }
+
+    const unavailableItems = result.lines?.filter((i) => !i.isAvailable);
+    if (unavailableItems?.length) {
+      const _unavailableItems: IkasOrderLineItem[] = [];
+
+      for (const item of unavailableItems) {
+        const cartItem = this.store.cartStore.cart?.items.find(
+          (i) => i.variant.id === item.variantId
+        );
+        if (cartItem) _unavailableItems.push(cartItem);
+      }
+
+      throw {
+        type: ErrorType.STOCK_ERROR,
+        data: _unavailableItems,
+      };
+    }
+  };
+
+  removeUnavailableItems = async (items: IkasOrderLineItem[]) => {
+    for (const item of items) {
+      await this.store.cartStore.removeItem(item);
+    }
+  };
+
+  getShippingCountries = async () => {
+    this.shippingCountryIds = await IkasCountryAPI.listShippingCountries(
+      IkasStorefrontConfig.salesChannelId!
+    );
+  };
+
+  checkShippingCountries = () => {
+    if (!this.shippingCountryIds?.length) {
+      this.error = {
+        type: ErrorType.NO_SHIPPING_ERROR,
+      };
+    }
+  };
+
+  initialStockCheck = async () => {
+    try {
+      await this.checkStocks();
+    } catch (err) {
+      if (err.type) {
+        this.error = err;
+      } else {
+        console.log(err);
+        this.error = {
+          type: ErrorType.UNKNOWN,
+        };
+      }
+    }
+  };
+
+  listPaymentGateways = async () => {
+    const isLocal = process.env.NEXT_PUBLIC_ENV === "local";
+    const idList = IkasStorefrontConfig.paymentGateways.map((pg) => pg.id);
+    let paymentGateways = await IkasCheckoutAPI.listPaymentGateway(
+      isLocal ? undefined : idList
+    );
+
+    if (!paymentGateways || !paymentGateways.length) {
+      this.error = {
+        type: ErrorType.API_ERROR,
+      };
+      return;
+    }
+
+    if (this.step === CheckoutStep.PAYMENT) {
+      paymentGateways = paymentGateways.filter((pg) =>
+        pg.supportedCurrencies.length
+          ? pg.supportedCurrencies.includes(this.checkout.cart!.currencyCode)
+          : true
+      );
+
+      const shippingCountry = this.checkout.shippingAddress?.country;
+      if (shippingCountry) {
+        paymentGateways = paymentGateways.filter((pg) =>
+          pg.availableCountries.length
+            ? pg.availableCountries.includes(shippingCountry.iso2 || "")
+            : true
+        );
+      }
+    }
+
+    const orderedPaymentGateways: IkasPaymentGateway[] = [];
+
+    _sortBy(IkasStorefrontConfig.paymentGateways, "order").forEach((pg) => {
+      const _pg = paymentGateways?.find((p) => p.id === pg.id);
+      if (_pg) orderedPaymentGateways.push(_pg);
+    });
+
+    this.paymentGateways = isLocal ? paymentGateways : orderedPaymentGateways;
+    if (!this.checkout.selectedPaymentGateway) this.setPaymentGateway(0);
+  };
+
+  retrieveInstallmentInfo = async (input: IkasInstallmentInfoInput) => {
+    const installmentInfo = await IkasCheckoutAPI.retrieveInstallmentInfo(
+      input
+    );
+    installmentInfo?.installmentPrices.sort((a, b) =>
+      (a.installmentCount || -1) > (b.installmentCount || -1) ? 1 : -1
+    );
+    this.installmentInfo = installmentInfo;
+  };
+
+  createCustomer = () => {
+    if (this.store.customerStore.customer) {
+      this.store.customerStore.customer.addresses.forEach(
+        (address) => (address.checkoutSettings = this.checkoutSettings)
+      );
+      this.checkout.customer = new IkasCheckoutCustomer(
+        this.store.customerStore.customer
+      );
+    } else if (!this.checkout.customer)
+      this.checkout.customer = new IkasCheckoutCustomer({});
+  };
+
+  createShippingAddress = () => {
+    if (!this.checkout.shippingAddress) {
+      const customerAddresses = this.store.customerStore.customer?.addresses;
+      this.onSelectedShippingAddressIdChange(
+        customerAddresses?.length ? customerAddresses[0].id! : "-1"
+      );
+    } else {
+      this.selectedShippingAddressId = this.checkout.shippingAddress.id || "-1";
+      this.checkout.shippingAddress.checkoutSettings = this.checkoutSettings;
+    }
+  };
+
+  createBillingAddress = () => {
+    if (typeof localStorage !== "undefined") {
+      this.useDifferentAddress = !!localStorage.getItem(
+        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 {
+        this.checkout.billingAddress = new IkasOrderAddress(
+          _cloneDeep(this.checkout.shippingAddress) || {}
+        );
+      }
+      this.checkout.billingAddress.checkoutSettings = this.checkoutSettings;
+    }
+  };
+
+  onShippingMethodChange = async (
+    shippingMethod: IkasAvailableShippingMethod
+  ) => {
+    if (this.isChangingShippingMethod) return;
+
+    this.isChangingShippingMethod = true;
+    this.checkout.shippingSettingsId = shippingMethod.shippingSettingsId;
+    this.checkout.shippingZoneRateId = shippingMethod.shippingZoneRateId;
+    await this.saveCheckout();
+    const newCheckout = await IkasCheckoutAPI.getCheckoutById(
+      this.checkout.id!
+    );
+    if (newCheckout) this.checkout = newCheckout;
+    this.isChangingShippingMethod = false;
+  };
+
+  onCouponCodeApply = async () => {
+    if (!this.checkout.couponCode) return;
+
+    try {
+      const isCouponSaveSuccess = await IkasCheckoutAPI.addCouponCodeToCheckout(
+        this.checkout.id!,
+        this.checkout.couponCode
+      );
+
+      if (isCouponSaveSuccess) {
+        const newCheckout = await IkasCheckoutAPI.getCheckoutById(
+          this.checkout.id!
+        );
+
+        if (newCheckout) {
+          const oldCheckout = this.checkout;
+
+          this.checkout = new IkasCheckout({
+            ...newCheckout,
+            shippingAddress: oldCheckout.shippingAddress,
+            billingAddress: oldCheckout.billingAddress,
+            customer: oldCheckout.customer,
+          });
+        }
+      }
+    } catch (err) {}
+  };
+
+  onCouponCodeDelete = async () => {
+    try {
+      await this.saveCheckout();
+      const newCheckout = await IkasCheckoutAPI.getCheckoutById(
+        this.checkout.id!
+      );
+      if (newCheckout) this.checkout = newCheckout;
+    } catch {}
+  };
+
+  onSelectedShippingAddressIdChange = (value: string) => {
+    this.selectedShippingAddressId = value;
+    if (value === "-1") {
+      this.checkout.shippingAddress = new IkasOrderAddress();
+    } else {
+      const address = this.store.customerStore.customer?.addresses.find(
+        (a) => a.id === value
+      );
+      if (address)
+        this.checkout.shippingAddress = new IkasOrderAddress(address as any);
+    }
+
+    if (this.checkout.shippingAddress)
+      this.checkout.shippingAddress.checkoutSettings = this.checkoutSettings;
+  };
+
+  onSelectedBillingAddressIdChange = (value: string) => {
+    this.selectedBillingAddressId = value;
+    if (value === "-1") {
+      this.checkout.billingAddress = new IkasOrderAddress();
+    } else {
+      const address = this.store.customerStore.customer?.addresses.find(
+        (a) => a.id === value
+      );
+      if (address)
+        this.checkout.billingAddress = new IkasOrderAddress(address as any);
+    }
+
+    if (this.checkout.billingAddress)
+      this.checkout.billingAddress.checkoutSettings = this.checkoutSettings;
+  };
+
+  onTermsAndConditionsCheckedChange = (value: boolean) => {
+    this.isTermsAndConditionsChecked = value;
+  };
+
+  // CREDIT CARD START
+
+  onCardNumberChange = (value: string) => {
+    if (!this.cardData) return;
+    if (
+      value.length > this.cardData.cardNumber!.length &&
+      !isLastCharNumber(value)
+    )
+      return;
+
+    const oldOriginalValue = (this.cardData.cardNumber || "")
+      .split(" ")
+      .join("");
+    const originalValue = value.split(" ").join("");
+
+    if (originalValue.length > MAX_CARD_NUMBER_LENGTH) return;
+    if (
+      oldOriginalValue.length < 6 &&
+      originalValue.length >= 6 &&
+      !this.installmentInfo
+    ) {
+      this.retrieveInstallmentInfo({
+        binNumber: originalValue.slice(0, 6),
+        paymentGatewayId: this.checkout.selectedPaymentGateway!.id!,
+        price: this.checkout.totalFinalPrice!,
+      });
+    }
+    // Deleting characters below 6
+    else if (
+      originalValue.length < 6 &&
+      oldOriginalValue.length > originalValue.length
+    ) {
+      this.cardData.installmentCount = 1;
+      this.installmentInfo = undefined;
+    }
+
+    this.cardData.cardNumber = chunkString(originalValue, 4).join(" ");
+  };
+
+  onCardHolderNameChange = (value: string) => {
+    if (!this.cardData) return;
+    this.cardData.cardHolderName = value;
+  };
+
+  onExpirationDateChange = (value: string) => {
+    if (!this.cardData) return;
+    if (
+      value.length > this.cardData.expirationDate!.length &&
+      !isLastCharNumber(value)
+    ) {
+      return;
+    }
+
+    // Check autocomplete
+    if (this.cardData.expirationDate?.length === 0) {
+      const splitValues = value.split("/");
+
+      if (splitValues.length === 2) {
+        const firstPart = splitValues[0].trim();
+        const lastPart = splitValues[1].trim();
+
+        // YYYY-MM format
+        if (firstPart.length === 4 && lastPart.length === 2) {
+          const year = parseInt(firstPart.slice(2));
+          const month = parseInt(lastPart);
+
+          if (!isNaN(year) && !isNaN(month)) {
+            this.cardData.expirationDate = `${
+              month < 10 ? "0" + month : month
+            } / ${year < 10 ? "0" + year : year}`;
+            return;
+          }
+        }
+
+        // MM-YYYY format
+        if (firstPart.length === 2 && lastPart.length === 4) {
+          const month = parseInt(firstPart);
+          const year = parseInt(lastPart.slice(2));
+
+          if (!isNaN(year) && !isNaN(month)) {
+            this.cardData.expirationDate = `${
+              month < 10 ? "0" + month : month
+            } / ${year < 10 ? "0" + year : year}`;
+            return;
+          }
+        }
+      }
+
+      // const autoCompleteValue = value.split("/").join("");
+      // if (
+      //   autoCompleteValue.length === 4 &&
+      //   !isNaN(parseInt(autoCompleteValue))
+      // ) {
+      //   this.cardData.expirationDate = chunkString(autoCompleteValue, 2).join(
+      //     " / "
+      //   );
+      //   return;
+      // }
+    }
+
+    const originalValue = value.split(" / ").join("");
+    if (originalValue.length > 4) return;
+
+    this.cardData.expirationDate = chunkString(originalValue, 2).join(" / ");
+  };
+
+  onCvcChange = (value: string) => {
+    if (!this.cardData) return;
+    if (value.length > this.cardData.cvv!.length && !isLastCharNumber(value))
+      return;
+    if (value.length > MAX_CVC_LENGTH) return;
+    this.cardData.cvv = value;
+  };
+
+  // CREDIT CARD END
+
+  saveAddress = async (type: "billing" | "shipping") => {
+    if (this.shouldSaveAddress) {
+      const newAddress = new IkasCustomerAddress({
+        ...(type === "shipping"
+          ? this.checkout.shippingAddress
+          : this.checkout.billingAddress),
+        title: this.addressTitle || this.t("checkout-page:newAddress"),
+        id: uuidv4(),
+      });
+      const customer = _cloneDeep(this.store.customerStore.customer!);
+      customer.addresses.push(newAddress);
+
+      await this.store.customerStore.saveCustomer(customer);
+
+      if (type === "shipping") {
+        this.checkout.shippingAddress!.id = newAddress.id;
+        this.selectedShippingAddressId = newAddress.id || "-1";
+      } else {
+        this.checkout.billingAddress!.id = newAddress.id;
+        this.selectedBillingAddressId = newAddress.id || "-1";
+      }
+    }
+  };
+
+  onGoToCartClick = () => {
+    this.router.push("/cart");
+  };
+
+  onBackToShoppingClick = () => {
+    this.router.push("/");
+  };
+
+  onProceedToShippingClick = async () => {
+    if (!this.canProceedToShipping) {
+      this.isErrorsVisible = true;
+      return;
+    }
+    this.isErrorsVisible = false;
+
+    try {
+      this.isStepLoading = true;
+
+      await this.saveAddress("shipping");
+      await this.checkStocks();
+      await this.saveCheckout();
+      this.changeStep(CheckoutStep.SHIPPING);
+    } catch (err) {
+      if (err.type) {
+        this.error = err;
+      } else {
+        console.log(err);
+        this.error = {
+          type: ErrorType.UNKNOWN,
+        };
+      }
+      this.isStepLoading = false;
+    }
+  };
+
+  onProceedToPaymentClick = async () => {
+    if (!this.canProceedToPayment) {
+      this.isErrorsVisible = true;
+      return;
+    }
+    this.isErrorsVisible = false;
+
+    try {
+      this.isStepLoading = true;
+      await this.checkStocks();
+      await this.saveCheckout();
+
+      this.error = undefined;
+      this.changeStep(CheckoutStep.PAYMENT);
+    } catch (err) {
+      if (err.type) {
+        this.error = err;
+      } else {
+        console.log(err);
+        this.error = {
+          type: ErrorType.UNKNOWN,
+        };
+      }
+      this.isStepLoading = false;
+    }
+  };
+
+  onCompletePaymentClick = async () => {
+    if (!this.canPerformPayment) {
+      this.isErrorsVisible = true;
+      return;
+    }
+
+    if (!this.useDifferentAddress) {
+      this.checkout.billingAddress = this.checkout.shippingAddress;
+    }
+
+    try {
+      this.isErrorsVisible = false;
+      this.isStepLoading = true;
+
+      await this.checkStocks();
+      await this.saveAddress("billing");
+      await this.saveCheckout();
+      await this.createSaleTransaction();
+    } catch (err) {
+      if (err.type) {
+        this.error = err;
+      } else {
+        this.error = {
+          type: ErrorType.UNKNOWN,
+        };
+      }
+      this.isStepLoading = false;
+    }
+  };
+
+  createSaleTransaction = async () => {
+    if (!this.checkout.selectedPaymentGateway) return;
+
+    const response = await IkasCheckoutAPI.createSaleTransactionWithCheckout(
+      this.checkout.id!,
+      this.checkout.selectedPaymentGateway.id!,
+      this.checkout.selectedPaymentGateway.paymentMethodType ===
+        IkasPaymentMethodType.CREDIT_CARD &&
+        this.checkout.selectedPaymentGateway.type ===
+          IkasPaymentGatewayType.INTERNAL &&
+        this.cardData
+        ? this.cardData.toInput()
+        : undefined
+    );
+
+    const transactionStatus = (response?.transactionStatus as unknown) as
+      | IkasTransactionStatusEnum
+      | undefined;
+
+    const transactionSuccess =
+      transactionStatus &&
+      [
+        IkasTransactionStatusEnum.SUCCESS,
+        IkasTransactionStatusEnum.AUTHORIZED,
+      ].includes(transactionStatus);
+
+    const transactionPending =
+      transactionStatus === IkasTransactionStatusEnum.PENDING;
+
+    if (transactionSuccess) {
+      await this.onCheckoutTransactionSuccess();
+    } else if (transactionPending && !!response?.returnSlug) {
+      window.location.href =
+        process.env.NEXT_PUBLIC_BASE_URL + response.returnSlug;
+    } else {
+      throw {
+        type: ErrorType.UNKNOWN,
+      };
+    }
+  };
+
+  onCheckoutTransactionSuccess = async () => {
+    localStorage.removeItem(USE_DIFFERENT_ADDRESS_KEY);
+
+    if (this.checkout.customer?.notificationsAccepted) {
+      await this.store.customerStore.createEmailSubscription(
+        this.checkout.customer?.email || ""
+      );
+    }
+
+    this.changeStep(CheckoutStep.SUCCESS);
+  };
+
+  onBackToInfoClick = () => {
+    this.changeStep(CheckoutStep.INFO);
+  };
+
+  onBackToShippingClick = () => {
+    this.changeStep(CheckoutStep.SHIPPING);
+  };
+
+  setCustomerConsentGranted = (value: boolean) => {
+    if (this.checkout.customer)
+      this.checkout.customer.notificationsAccepted = value;
+  };
+
+  setUseDifferentAddress = (value: boolean) => {
+    this.useDifferentAddress = value;
+    if (this.useDifferentAddress) {
+      localStorage.setItem(USE_DIFFERENT_ADDRESS_KEY, "1");
+      this.checkout.billingAddress =
+        this.checkout.billingAddress || new IkasOrderAddress();
+    } else {
+      localStorage.removeItem(USE_DIFFERENT_ADDRESS_KEY);
+      this.checkout.billingAddress = this.checkout.shippingAddress;
+    }
+  };
+
+  setShouldSaveAddress = (value: boolean) => {
+    this.shouldSaveAddress = value;
+  };
+
+  setAddressTitle = (value: string) => {
+    this.addressTitle = value;
+  };
+
+  setPaymentGateway = (index: number) => {
+    if (!this.paymentGateways.length) return;
+
+    const paymentGateway = this.paymentGateways[index];
+    this.checkout.selectedPaymentGateway = paymentGateway;
+
+    if (this.step !== CheckoutStep.SUCCESS) {
+      if (
+        paymentGateway.paymentMethodType ===
+          IkasPaymentMethodType.CREDIT_CARD &&
+        paymentGateway.type === IkasPaymentGatewayType.INTERNAL
+      ) {
+        this.cardData = new CreditCardData();
+      }
+
+      this.installmentInfo = undefined;
+    }
+  };
+
+  setInstallmentCount = (count: number) => {
+    if (!this.cardData) return;
+    this.cardData.installmentCount = count;
+  };
+
+  changeStep = async (step: CheckoutStep) => {
+    if (!isServer) {
+      window.location.replace(
+        `${window.location.pathname}?id=${this.checkout.id}&step=${step}`
+      );
+    }
+  };
+
+  logout = async () => {
+    this.checkout.customer = undefined;
+    this.store.customerStore.logout();
+    try {
+      await this.saveCheckout();
+    } catch (err) {}
+    this.createCustomer();
+  };
+}
+
+function chunkString(str: string, length: number) {
+  return str.match(new RegExp(".{1," + length + "}", "g")) || [];
+}
+
+function isLastCharNumber(str: string) {
+  return str && NUMBER_ONLY_REGEX.test(str.charAt(str.length - 1));
+}
+
+export enum CheckoutStep {
+  INFO = "info",
+  SHIPPING = "shipping",
+  PAYMENT = "payment",
+  SUCCESS = "success",
+}
+
+export enum ErrorType {
+  UNKNOWN,
+  API_ERROR,
+  STOCK_ERROR,
+  PAYMENT_ERROR,
+  NO_SHIPPING_ERROR,
+  CUSTOMER_LOGIN_REQUIRED_ERROR,
+}
+
+export type CheckoutError = {
+  type: ErrorType;
+  data?: any;
+};
+
+export type StockErrorData = {
+  variant: IkasOrderLineVariant;
+  availableQuantity: number;
+};