@ikas/storefront 4.0.0-alpha.59 → 4.0.0-alpha.6

package/src/components/checkout/model.ts

@@ -0,0 +1,1466 @@
+import { makeAutoObservable } from "mobx";
+import { NextRouter } from "next/router.js";
+import _cloneDeep from "lodash/cloneDeep";
+import _sortBy from "lodash/sortBy";
+
+import {
+  IkasCustomerAddress,
+  IkasMerchantSettings,
+  IkasAvailableShippingMethod,
+  IkasOrderLineItem,
+  IkasOrderTransaction,
+  IkasOrderCustomer,
+  IkasCartCampaignOfferStatus,
+  IkasProduct,
+  IkasCartCampaignOffer,
+  IkasCheckout,
+  IkasStockLocation,
+  IkasAvailableStockLocation,
+  IkasTransactionStatus,
+  IkasCampaignOfferTargetPageType,
+  IkasCampaignOfferProduct,
+} 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 CreditCardData from "./components/credit-card-form/model";
+import { IkasCheckoutSettings } from "../../models/data/checkout-settings";
+import { TFunction } from "../../utils/i18n";
+import CustomerStoreAPI from "../../store/customer/api";
+import CheckoutStore from "../../store/checkout";
+import CartStoreAPI from "../../store/cart/api";
+import { IkasCheckoutCustomizationProps } from ".";
+
+import MasterPassModel from "./modelMasterPass";
+import { APIResponse } from "@ikas/fe-api-client";
+import ProductStoreAPI from "../../store/product";
+import {
+  CreateStripePaymentIntentResponse,
+  RetrieveInstallmentInfoResponse,
+  TransactionResponse,
+  UpdateCartCampaignOfferInput,
+} from "@ikas/storefront-api";
+import { IkasBaseStore } from "../../store";
+import { IkasStorefrontConfig } from "@ikas/storefront-config";
+import { Analytics } from "../../analytics";
+import {
+  CheckStocksLineInput,
+  RetrieveInstallmentInfoQueryParams,
+  SaveCartInput,
+} from "@ikas/storefront-api";
+
+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: IkasCheckout;
+  checkoutSettings: IkasCheckoutSettings;
+  storefront?: IkasStorefront | null = null;
+  router: NextRouter;
+  isCheckoutLoaded = false;
+  isErrorsVisible = false;
+  isStepLoading = false;
+  isTermsAndConditionsChecked = false;
+  isChangingShippingMethod = false;
+  isContactModalVisible = false;
+  step: CheckoutStep = CheckoutStep.INFO;
+  customizationProps?: IkasCheckoutCustomizationProps | null = null;
+
+  cardData?: CreditCardData | null = null;
+  paymentGateways: IkasPaymentGateway[] = [];
+  installmentInfo?: RetrieveInstallmentInfoResponse | null = null;
+  useDifferentAddress = false;
+  shouldSaveAddress = true;
+  addressTitle = "";
+
+  shippingCountryIds?: string[] | null = null;
+  selectedShippingAddressId?: string = "-1";
+  selectedBillingAddressId?: string = "-1";
+
+  stockLocations: IkasStockLocation[] = [];
+  availableStockLocations: IkasAvailableStockLocation[] = [];
+  deliveryMethod: "address" | "in-store" = "address";
+
+  stripeResponse: CreateStripePaymentIntentResponse | null = null;
+
+  checkoutCampaignOffer: CampaignOfferType | undefined;
+  postCheckoutCampaignOffer: CampaignOfferType | undefined;
+
+  returnPolicy: string;
+  privacyPolicy: string;
+  termsOfService: string;
+
+  policyModalTitle = "";
+  policyModalText = "";
+
+  error?: CheckoutError | null = null;
+
+  // For success step
+  successTransaction?: IkasOrderTransaction;
+
+  // For MasterPass Model
+  mpVM: MasterPassModel;
+  showTestModal = false;
+
+  t: TFunction;
+
+  constructor(
+    checkout: IkasCheckout,
+    checkoutSettings: IkasCheckoutSettings,
+    router: NextRouter,
+    returnPolicy: string,
+    privacyPolicy: string,
+    termsOfService: string,
+    t: TFunction,
+    customizationProps: IkasCheckoutCustomizationProps
+  ) {
+    this.checkout = checkout;
+    this.checkoutSettings = checkoutSettings;
+    this.router = router;
+    this.returnPolicy = returnPolicy;
+    this.privacyPolicy = privacyPolicy;
+    this.termsOfService = termsOfService;
+    this.t = t;
+    this.customizationProps = customizationProps;
+    this.mpVM = new MasterPassModel();
+
+    this.isTermsAndConditionsChecked =
+      this.checkoutSettings.isTermsAndConditionsDefaultChecked || false;
+
+    this.init();
+    makeAutoObservable(this);
+  }
+
+  init = async () => {
+    await IkasBaseStore.getInstance().customerStore.waitUntilInitialized();
+    this.createCustomer();
+    this.createShippingAddress();
+    this.createBillingAddress();
+    await this.getCampaignOffer();
+    await this.initStep();
+  };
+
+  initStep = async () => {
+    if (IkasStorefrontConfig.getIsEditor()) {
+      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
+      ) {
+        if (this.isInStoreDelivery) {
+          this.deliveryMethod = "in-store";
+        } else {
+          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();
+      await this.getStockLocations();
+      await this.getAvailableStockLocations();
+      if (this.isInStoreDelivery) {
+        this.deliveryMethod = "in-store";
+      }
+    }
+
+    // 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.isInStoreDelivery) {
+        this.deliveryMethod = "in-store";
+        await this.getStockLocations();
+      }
+
+      if (!this.paymentGateways.length) {
+        this.error = {
+          type: ErrorType.NO_SHIPPING_ERROR,
+        };
+        this.isCheckoutLoaded = true;
+        return;
+      }
+    }
+
+    if (this.step === CheckoutStep.PAYMENT) {
+      if (this.isInStoreDelivery) {
+        this.checkout.billingAddress = new IkasOrderAddress();
+      }
+    }
+
+    if (this.step !== CheckoutStep.SUCCESS) {
+      if (this.checkout.isComplete) {
+        return this.changeStep(CheckoutStep.SUCCESS);
+      } else {
+        await this.initialStockCheck();
+      }
+    } else {
+      await this.getSuccessTransaction();
+
+      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 as any);
+  };
+
+  getSuccessTransaction = async () => {
+    const transactionsResponse = await CustomerStoreAPI.listOrderTransactions({
+      orderId: { eq: this.checkout.id },
+    });
+
+    this.successTransaction =
+      transactionsResponse.isSuccess && transactionsResponse.data?.length
+        ? transactionsResponse.data[0]
+        : undefined;
+  };
+
+  get merchantSettings() {
+    return new IkasMerchantSettings(
+      IkasStorefrontConfig.getMerchantSettings()!
+    );
+  }
+
+  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 =
+      IkasBaseStore.getInstance().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;
+  }
+
+  // MasterPass PaymentGateway Control
+  get isPaymentGatewayHasMasterPass() {
+    if (this.selectedPaymentGatewayIndex === -1) return false;
+    if (!this.paymentGateways.length) return false;
+
+    return !!this.paymentGateways[this.selectedPaymentGatewayIndex]
+      .masterPassClientId;
+  }
+
+  // VALIDATIONS
+
+  get canProceedToShipping() {
+    return (
+      this.checkout.shippingAddress?.isValid &&
+      this.checkout.hasValidCustomerEmail &&
+      this.error?.type !== ErrorType.NO_SHIPPING_ERROR
+    );
+  }
+
+  get canProceedToInStoreDelivery() {
+    return (
+      !!this.checkout.shippingAddress?.firstName &&
+      !!this.checkout.shippingAddress?.lastName &&
+      !!this.checkout.customer?.email &&
+      !!this.checkout.stockLocationId
+    );
+  }
+
+  get canProceedToPayment() {
+    return this.canProceedToShipping;
+  }
+
+  get isInStoreDelivery() {
+    return !!this.checkout.stockLocationId;
+  }
+
+  get isCustomFlowStripe() {
+    const pg = this.checkout.selectedPaymentGateway;
+    return (
+      pg &&
+      pg.code === "STRIPE" &&
+      pg.settings?.find(
+        (setting) =>
+          setting.label === "allow_custom_flow" && setting.value === "true"
+      )
+    );
+  }
+
+  get store() {
+    return IkasBaseStore.getInstance();
+  }
+
+  get canPerformPayment() {
+    if (
+      this.checkoutSettings.showTermsAndConditionsCheckbox &&
+      !this.isTermsAndConditionsChecked
+    )
+      return false;
+
+    const pg = this.checkout.selectedPaymentGateway;
+    const isInStoreDelivery = this.deliveryMethod === "in-store";
+    const canProceedToShipping = isInStoreDelivery
+      ? true
+      : !!this.canProceedToShipping;
+    const isBillingAddressValid = !!this.checkout.billingAddress?.isValid;
+    const isPaymentGatewayValid = this.mpVM.selectedCard
+      ? true
+      : pg?.paymentMethodType === IkasPaymentMethodType.CREDIT_CARD &&
+        pg.type === IkasPaymentGatewayType.INTERNAL
+      ? this.isCustomFlowStripe
+        ? true
+        : this.cardData?.isValid
+      : !!pg;
+
+    return (
+      canProceedToShipping && isBillingAddressValid && isPaymentGatewayValid
+    );
+  }
+
+  // VALIDATIONS END
+
+  saveCart = async () => {
+    let input = new SaveCartInput(this.checkout as unknown as SaveCartInput);
+
+    if (this.deliveryMethod === "in-store") {
+      input = await this.inStockDeliveryInputData(input);
+    }
+
+    if (this.step === CheckoutStep.INFO) {
+      input.billingAddress = null;
+    }
+
+    const response = await CartStoreAPI.saveCart({ input });
+
+    if (response?.graphQLErrors && response.graphQLErrors.length) {
+      const firstError = response.graphQLErrors[0];
+
+      if (firstError.extensions?.code === "CUSTOMER_LOGIN_REQUIRED") {
+        throw {
+          type: ErrorType.CUSTOMER_LOGIN_REQUIRED_ERROR,
+        };
+      } else {
+        throw {
+          type: ErrorType.API_ERROR,
+        };
+      }
+    }
+
+    return response.data;
+  };
+
+  inStockDeliveryInputData = async (input: SaveCartInput) => {
+    const inputData = input;
+
+    const inStoreLocation = this.stockLocations.find(
+      (location) => location.id === this.checkout.stockLocationId
+    );
+
+    if (
+      inStoreLocation &&
+      inputData.shippingAddress &&
+      inStoreLocation.address
+    ) {
+      inputData.shippingAddress.country = inStoreLocation.address
+        .country as any;
+      inputData.shippingAddress.city = inStoreLocation.address.city as any;
+      inputData.shippingAddress.state = inStoreLocation.address.state as any;
+      inputData.shippingAddress.district = inStoreLocation.address
+        .district as any;
+      inputData.shippingAddress.postalCode = inStoreLocation.address.postalCode;
+      inputData.shippingAddress.addressLine1 =
+        inStoreLocation.address.address || "";
+      inputData.shippingAddress.addressLine2 = null;
+    }
+
+    return inputData;
+  };
+
+  checkStocks = async () => {
+    const lines = this.checkout.items.map((i) => ({
+      quantity: i.quantity,
+      variantId: i.variant.id,
+      productId: i.variant.productId,
+    }));
+
+    const checkStocksResponse = await CheckoutStore.checkStocks({
+      lines: lines.map(
+        (l) => new CheckStocksLineInput(l as CheckStocksLineInput)
+      ),
+      stockLocationIdList: IkasStorefrontConfig.getStockLocationIds()?.length
+        ? IkasStorefrontConfig.getStockLocationIds()
+        : null,
+      //stockLocationIdList: IkasStorefrontConfig.pickUpStockLocationIds || [], // REMOVE ME
+    });
+
+    if (!checkStocksResponse.isSuccess) {
+      throw {
+        type: ErrorType.API_ERROR,
+      };
+    }
+
+    const unavailableItems = checkStocksResponse.data?.lines?.filter(
+      (i) => !i.isAvailable
+    );
+
+    if (unavailableItems?.length) {
+      const _unavailableItems: IkasOrderLineItem[] = [];
+
+      for (const item of unavailableItems) {
+        const cartItem = IkasBaseStore.getInstance().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 IkasBaseStore.getInstance().cartStore.removeItem(item);
+    }
+  };
+
+  getShippingCountries = async () => {
+    const response = await CheckoutStore.getAvailableShippingCountries({
+      salesChannelId: IkasStorefrontConfig.getSalesChannelId(),
+    });
+    this.shippingCountryIds = response.data;
+  };
+
+  getStockLocations = async () => {
+    if (IkasStorefrontConfig.getPickupStockLocationIds()) {
+      const response = await CheckoutStore.listStockLocation({
+        id: { in: IkasStorefrontConfig.getPickupStockLocationIds() },
+      });
+      if (!response.isSuccess || !response.data?.length) {
+        this.error = {
+          type: ErrorType.API_ERROR,
+        };
+        return;
+      }
+
+      this.stockLocations = response.data;
+    }
+  };
+
+  getAvailableStockLocations = async () => {
+    if (IkasStorefrontConfig.getPickupStockLocationIds()) {
+      const lines = this.checkout.items.map((i) => ({
+        quantity: i.quantity,
+        variantId: i.variant.id,
+        productId: i.variant.productId,
+      }));
+
+      const response = await CheckoutStore.getAvailableStockLocations({
+        lines: lines.map(
+          (l) => new CheckStocksLineInput(l as CheckStocksLineInput)
+        ),
+        stockLocationIdList: IkasStorefrontConfig.getPickupStockLocationIds(),
+      });
+      if (!response.isSuccess) {
+        this.error = {
+          type: ErrorType.API_ERROR,
+        };
+        return;
+      }
+
+      this.availableStockLocations = response.data || [];
+    }
+  };
+
+  checkShippingCountries = () => {
+    if (!this.shippingCountryIds?.length) {
+      this.error = {
+        type: ErrorType.NO_SHIPPING_ERROR,
+      };
+    }
+  };
+
+  onDeliveryMethodChange = (deliveryMethod: "address" | "in-store") => {
+    if (deliveryMethod === "address") {
+      this.checkout.stockLocationId = null;
+    }
+    this.deliveryMethod = deliveryMethod;
+    this.isErrorsVisible = false;
+  };
+
+  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.getPaymentGateways().map((pg) => pg.id);
+    const paymentGatewaysResponse = await CheckoutStore.listPaymentGateway({
+      id: isLocal ? undefined : { in: idList },
+    });
+
+    if (
+      !paymentGatewaysResponse.isSuccess ||
+      !paymentGatewaysResponse.data?.length
+    ) {
+      this.error = {
+        type: ErrorType.API_ERROR,
+      };
+      return;
+    }
+
+    let paymentGateways = paymentGatewaysResponse.data;
+
+    if (this.step === CheckoutStep.PAYMENT) {
+      paymentGateways = paymentGateways.filter((pg) =>
+        pg.supportedCurrencies?.length
+          ? pg.supportedCurrencies.includes(this.checkout.currencyCode)
+          : true
+      );
+
+      const shippingCountry = this.checkout.shippingAddress?.country;
+      if (shippingCountry && shippingCountry.iso2) {
+        paymentGateways = paymentGateways.filter((pg) =>
+          pg.availableCountries?.length
+            ? pg.availableCountries.includes(shippingCountry.iso2 || "")
+            : true
+        );
+      }
+    }
+
+    const orderedPaymentGateways: IkasPaymentGateway[] = [];
+
+    _sortBy(IkasStorefrontConfig.getPaymentGateways(), "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);
+
+    if (this.step === CheckoutStep.PAYMENT) {
+      const masterPassPG = paymentGateways.find(
+        (pG) => !!pG.masterPassClientId
+      );
+      if (masterPassPG) {
+        this.checkout.masterPassPaymentGateway = masterPassPG;
+        this.mpVM.checkMasterPass({
+          checkout: this.checkout,
+          store: IkasBaseStore.getInstance(),
+        });
+      }
+    }
+  };
+
+  retrieveInstallmentInfo = async (
+    params: RetrieveInstallmentInfoQueryParams
+  ) => {
+    const installmentInfoResponse = await CheckoutStore.retrieveInstallmentInfo(
+      params
+    );
+
+    const installmentInfo = installmentInfoResponse.data;
+
+    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 IkasOrderCustomer(
+        this.store.customerStore.customer as any
+      );
+    } else if (!this.checkout.customer)
+      this.checkout.customer = new IkasOrderCustomer({});
+  };
+
+  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 {
+        if (this.isInStoreDelivery) {
+          this.checkout.billingAddress = new IkasOrderAddress(
+            _cloneDeep(this.checkout.billingAddress) || {}
+          );
+        } 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;
+    const newCart = await this.saveCart();
+
+    if (newCart) this.checkout = new IkasCheckout(newCart);
+    this.isChangingShippingMethod = false;
+  };
+
+  onStockLocationChange = async (location: IkasStockLocation) => {
+    this.checkout.stockLocationId = location.id;
+  };
+
+  onCouponCodeApply = async () => {
+    try {
+      const saveCouponCodeResponse = await CartStoreAPI.saveCartCouponCode({
+        cartId: this.checkout.id!,
+        couponCode: this.checkout.couponCode || null,
+      });
+
+      if (saveCouponCodeResponse.isSuccess && saveCouponCodeResponse.data) {
+        const newCart = saveCouponCodeResponse.data;
+        const cardNumber = this.cardData?.cardNumber?.split(" ").join("");
+
+        if (
+          this.step === CheckoutStep.PAYMENT &&
+          cardNumber?.length &&
+          cardNumber.length >= 6
+        ) {
+          this.retrieveInstallmentInfo({
+            input: {
+              binNumber: cardNumber.slice(0, 6),
+              paymentGatewayId: this.checkout.selectedPaymentGateway!.id!,
+              price: newCart.totalFinalPrice!,
+            },
+          });
+        }
+
+        if (newCart) {
+          const oldCheckout = this.checkout;
+
+          this.checkout = new IkasCheckout({
+            ...newCart,
+            shippingAddress: oldCheckout.shippingAddress,
+            billingAddress: oldCheckout.billingAddress,
+            customer: oldCheckout.customer,
+            selectedPaymentGateway: oldCheckout.selectedPaymentGateway,
+          });
+        }
+      }
+    } catch (err) {}
+  };
+
+  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({
+        input: {
+          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") => {
+    try {
+      if (this.shouldSaveAddress && this.store.customerStore.customer) {
+        const address =
+          type === "shipping"
+            ? this.checkout.shippingAddress
+            : this.checkout.billingAddress;
+
+        const existingAddress =
+          this.store.customerStore.customer.addresses?.find(
+            (a) => a.id === address?.id
+          );
+        if (existingAddress) return;
+
+        const newAddress = new IkasCustomerAddress({
+          ...address,
+          title: this.addressTitle || this.t("checkout-page:newAddress"),
+        } as any);
+        const customer = _cloneDeep(this.store.customerStore.customer);
+        if (!customer.addresses) customer.addresses = [];
+        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";
+        }
+      }
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  onGoToCartClick = () => {
+    this.router.push("/cart");
+  };
+
+  onBackToShoppingClick = () => {
+    this.router.push("/");
+  };
+
+  onProceedToShippingClick = async () => {
+    if (this.deliveryMethod === "address") {
+      if (!this.canProceedToShipping) {
+        this.isErrorsVisible = true;
+        return;
+      }
+    } else {
+      if (!this.canProceedToInStoreDelivery) {
+        this.isErrorsVisible = true;
+        return;
+      }
+    }
+
+    this.isErrorsVisible = false;
+
+    try {
+      this.isStepLoading = true;
+
+      if (this.deliveryMethod === "address") {
+        await this.saveAddress("shipping");
+      }
+
+      await this.checkStocks();
+      await this.saveCart();
+
+      if (this.deliveryMethod === "address") {
+        this.changeStep(CheckoutStep.SHIPPING);
+      } else {
+        this.changeStep(CheckoutStep.PAYMENT);
+      }
+    } 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.saveCart();
+
+      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();
+      if (this.deliveryMethod === "address") {
+        await this.saveAddress("billing");
+      }
+      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) {
+        this.error = err;
+      } else {
+        this.error = {
+          type: ErrorType.UNKNOWN,
+        };
+      }
+      this.isStepLoading = false;
+    }
+  };
+
+  createSaleTransaction = async () => {
+    let phoneNumber;
+    const isMasterPass = this.mpVM.selectedCard;
+
+    let response: APIResponse<TransactionResponse> | APIResponse<undefined>;
+    if (isMasterPass && this.mpVM.selectedCard?.Name) {
+      const _phoneNumber = this.mpVM.phoneNumber({
+        store: this.store,
+        checkout: this.checkout,
+      });
+      if (_phoneNumber) phoneNumber = _phoneNumber;
+      if (typeof this.cardData?.installmentCount === "undefined") return;
+      response = await CheckoutStore.createSaleTransactionWithCart({
+        input: {
+          cartId: this.checkout.id!,
+          masterPassDetail: {
+            phoneNumber,
+            savedCardName: this.mpVM.selectedCard?.Name,
+          },
+          paymentGatewayId: this.mpVM.selectedCard?.paymentGatewayId,
+          paymentMethodDetail: {
+            cardNumber: this.mpVM.selectedCard.Value1,
+            cardHolderName: this.mpVM.selectedCard.Name!,
+            cvv: this.mpVM.selectedCard.Value2,
+            expiredMonth: 11,
+            expiredYear: 11,
+            installmentCount: this.cardData.installmentCount,
+            threeDSecure: !!this.cardData?.threeDSecure,
+          },
+        },
+      });
+    } else {
+      if (!this.checkout.selectedPaymentGateway) return;
+      response = await CheckoutStore.createSaleTransactionWithCart({
+        input: {
+          cartId: this.checkout.id!,
+          masterPassDetail:
+            isMasterPass && phoneNumber
+              ? { phoneNumber, savedCardName: this.mpVM.selectedCard?.Name }
+              : undefined,
+          paymentGatewayId: this.checkout.selectedPaymentGateway.id!,
+          paymentMethodDetail: isMasterPass
+            ? undefined
+            : this.checkout.selectedPaymentGateway.paymentMethodType ===
+                IkasPaymentMethodType.CREDIT_CARD &&
+              this.checkout.selectedPaymentGateway.type ===
+                IkasPaymentGatewayType.INTERNAL &&
+              this.cardData
+            ? this.cardData.toInput()
+            : undefined,
+        },
+      });
+    }
+
+    const transactionStatus = response?.data?.transactionStatus as unknown as
+      | IkasTransactionStatus
+      | undefined;
+
+    const transactionSuccess =
+      transactionStatus &&
+      [
+        IkasTransactionStatus.SUCCESS,
+        IkasTransactionStatus.AUTHORIZED,
+      ].includes(transactionStatus);
+
+    const transactionPending =
+      transactionStatus === IkasTransactionStatus.PENDING;
+
+    if (transactionSuccess) {
+      await this.getSuccessTransaction();
+      await this.onCheckoutTransactionSuccess();
+    } else if (transactionPending && !!response?.data?.returnSlug) {
+      window.location.href =
+        process.env.NEXT_PUBLIC_BASE_URL + response.data.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 = async (index: number) => {
+    if (!this.paymentGateways.length) return;
+
+    const paymentGateway = this.paymentGateways[index];
+
+    if (
+      paymentGateway.code === "STRIPE" &&
+      paymentGateway.settings?.find(
+        (setting) =>
+          setting.label === "allow_custom_flow" && setting.value === "true"
+      ) &&
+      !this.stripeResponse
+    ) {
+      const response = await CheckoutStore.createStripePaymentIntent({
+        input: {
+          cartId: this.checkout.id,
+          paymentGatewayId: paymentGateway.id || "",
+        },
+      });
+      if (response.isSuccess && response.data) {
+        this.stripeResponse = response.data;
+      }
+    }
+
+    this.checkout.selectedPaymentGateway = paymentGateway;
+
+    if (this.step !== CheckoutStep.SUCCESS) {
+      if (
+        paymentGateway.paymentMethodType ===
+          IkasPaymentMethodType.CREDIT_CARD &&
+        paymentGateway.type === IkasPaymentGatewayType.INTERNAL
+      ) {
+        this.cardData = new CreditCardData();
+        // const masterpass = paymentGateway.masterPassClientId;
+        // if (masterpass) {
+        //   this.mpVM.checkMasterPass({
+        //     checkout: this.checkout,
+        //     store: this.store,
+        //   });
+        // }
+      }
+
+      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 = null;
+    this.store.customerStore.logout();
+    try {
+      await this.saveCart();
+    } catch (err) {}
+    this.createCustomer();
+  };
+
+  setContactModalVisible = (value: boolean) => {
+    this.isContactModalVisible = value;
+  };
+
+  getWaitingForActionCampaignOffer = (
+    targetPage: IkasCampaignOfferTargetPageType
+  ) => {
+    if (this.checkout.campaignOffers && this.checkout.campaignOffers.length) {
+      const filteredCampaignOffer = this.checkout.campaignOffers.filter(
+        (co) =>
+          co.status === IkasCartCampaignOfferStatus.WAITING_FOR_ACTION &&
+          co.campaignOffer?.targetPageTypes.some((tpt) => tpt === targetPage)
+      );
+
+      if (filteredCampaignOffer.length) {
+        return filteredCampaignOffer[0];
+      }
+    }
+
+    return null;
+  };
+
+  getOffer = (waitingForActionCampaignOffer: IkasCartCampaignOffer) => {
+    if (waitingForActionCampaignOffer.campaignOffer) {
+      return waitingForActionCampaignOffer.campaignOffer.offers.find(
+        (o) => o.id === waitingForActionCampaignOffer.campaignOfferProductId
+      );
+    }
+
+    return null;
+  };
+
+  getProduct = async (productId: string) => {
+    const productsResponse = await ProductStoreAPI.searchProducts({
+      input: {
+        productIdList: [productId],
+      },
+    });
+
+    if (
+      productsResponse.isSuccess &&
+      productsResponse.data &&
+      productsResponse.data.data &&
+      productsResponse.data.data.length
+    ) {
+      const product = productsResponse.data.data[0];
+      const selectedVariant = product.variants.find((v) => v.isActive);
+      const productDetail = new IkasProduct({
+        ...product,
+        selectedVariantValues: (selectedVariant || product.variants[0])
+          .variantValues,
+      });
+
+      return productDetail;
+    }
+
+    return null;
+  };
+
+  getCampaignOfferProducts = async (
+    targetPage: IkasCampaignOfferTargetPageType
+  ) => {
+    const waitingForActionCampaignOffer =
+      this.getWaitingForActionCampaignOffer(targetPage);
+
+    if (
+      waitingForActionCampaignOffer &&
+      waitingForActionCampaignOffer.campaignOffer
+    ) {
+      const offer = this.getOffer(waitingForActionCampaignOffer);
+
+      if (offer) {
+        const productDetail = await this.getProduct(offer.productId);
+
+        if (productDetail) {
+          return {
+            productDetail,
+            campaignOffer: waitingForActionCampaignOffer,
+            offer,
+          };
+        }
+      }
+    }
+
+    return undefined;
+  };
+
+  getCampaignOffer = async () => {
+    this.checkoutCampaignOffer = (await this.getCampaignOfferProducts(
+      IkasCampaignOfferTargetPageType.CHECKOUT
+    )) as any;
+    this.postCheckoutCampaignOffer = (await this.getCampaignOfferProducts(
+      IkasCampaignOfferTargetPageType.POST_CHECKOUT
+    )) as any;
+  };
+
+  updateCartCampaignOffer = async (props: UpdateCartCampaignOfferInput) => {
+    this.isCheckoutLoaded = false;
+
+    const getCartResponse = await CartStoreAPI.updateCartCampaignOffer({
+      input: props,
+    });
+
+    if (getCartResponse && getCartResponse.isSuccess && getCartResponse.data) {
+      this.checkout = new IkasCheckout(getCartResponse.data);
+
+      await this.init();
+    }
+
+    this.isCheckoutLoaded = true;
+  };
+}
+
+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;
+};
+
+export type CampaignOfferType = {
+  product: IkasProduct;
+  campaignOffer: IkasCartCampaignOffer;
+  offer: IkasCampaignOfferProduct;
+};