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

package/src/components/checkout/model.ts

@@ -1,1466 +0,0 @@
-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;
-};