@ikas/storefront 4.0.0-alpha.78 → 4.0.0-alpha.8

package/src/components/checkout/modelMasterPass.ts

@@ -0,0 +1,1001 @@
+import { makeAutoObservable } from "mobx";
+
+import { OtpModalType } from "./components/master-pass/modal-otp";
+import { SuccessModalType } from "./components/master-pass/modal-success";
+import { useTranslation } from "../../utils/i18n";
+import { IkasBaseStore } from "../../store";
+import { IkasCheckout, IkasPaymentGateway } from "../../models";
+import { MasterPassOperationTypeEnum } from "@ikas/storefront-api";
+import { getMasterpassRequestToken } from "@ikas/storefront-api";
+import { IkasStorefrontConfig } from "@ikas/storefront-config";
+
+const isServer = typeof localStorage === "undefined";
+
+const MFSRegex = {
+  noMasterPassAccount: /000000[0|1]{10}/g,
+  hasMasterPassAccountButDoesNotHaveAnyOperation: /[0|1]1100[0|1]{11}/g,
+  hasMasterPassAccountAndHasRelation: /[0|1]11100[0|1]{10}/g,
+};
+
+type deleteCardData = {
+  msisdn: string; // phoneNumber
+  token: string;
+  referenceNo: string;
+  sendSmsLanguage: string; // iso3
+  sendSms: "Y" | "N";
+  accountAliasName: string; // Card Name
+};
+
+// OTP
+type validateTransactionData = {
+  pinType: "otp";
+  validationCode: string;
+  sendSms: string;
+  sendSmsLanguage: string;
+  referenceNo: string;
+  token: string;
+};
+
+type resendOtpData = {
+  validationCode: string;
+  referenceNo: string;
+  sendSms: string;
+  sendSmsLanguage: string;
+  pinType: "otp";
+  // "token",
+  // "sendSmsLanguage",
+  // "fP",
+  // "expiryDate",
+  // "referenceNo",
+  // "sendSms",
+};
+
+type checkMasterPassFormData = {
+  sendSmsLanguage: string;
+  sendSms: "N" | "Y";
+  referenceNo: string;
+  token: string;
+  userId: string;
+};
+
+type registerFormData = {
+  msisdn: string; // phonenumber
+  token: string;
+  referenceNo: string;
+  sendSmsLanguage: string;
+
+  rtaPan: string; // Card Number
+  expiryDate: string;
+  accountAliasName: string; // Card Name
+  cvc: string;
+
+  sendSms: "Y" | "N";
+  timeZone: string;
+
+  // <!-- MFS constant parameters start -->
+  actionType: "A";
+  clientIp: string; // ""
+  delinkReason: string; // ""
+  eActionType: "A";
+  cardTypeFlag: "05";
+  cpinFlag: "Y";
+  defaultAccount: "Y";
+  mmrpConfig: "110010";
+  identityVerificationFlag: "Y";
+  mobileAccountConfig: "MWA";
+  uiChannelType: "6";
+  // <!-- MFS constant parameters end -->
+  // "homeAddress",
+  // "homeCity",
+  // "homeState",
+  // "homeCountryCode",
+  // "homePostalCode",
+  // "firstName",
+  // "lastName",
+  // "email",
+  // "cardHolderName",
+};
+
+type MFS_CB_HOC_TYPE_SOURCE =
+  | "checkMasterPass"
+  | "register"
+  | "resendOtp"
+  | "linkCardToClient"
+  | "validateTransaction"
+  | "listCards"
+  | "deleteCard";
+
+type MFS_CB_HOC_TYPE = (params: {
+  source: MFS_CB_HOC_TYPE_SOURCE;
+  store: IkasBaseStore;
+  checkout: IkasCheckout;
+  callback?: () => void;
+}) => MFS_CB_TYPE;
+
+type MFS_CB_TYPE = (
+  status: any,
+  response: {
+    responseCode:
+      | /* register success */ "0000"
+      | /* register success */ ""
+      | /* banka tarafindan otp dogrulamasi yapilir */ "5001"
+      | /* masterpass tarafindan otp dogrulamasi yapilir*/ "5008"
+      | /* Bu kredi kartı bu kullanıcıya daha önceden kaydedilmiştir. */ "5196"
+      | /* Tek kullanımlık şifre doğrulanamadı. */ "1409"
+      | /* External hesap bulunamadı. */ "1999"
+      | string;
+    responseDescription?: string;
+    transactionId: string;
+    accountStatus: any;
+    url3D: string;
+    cards: number | Array<Card>;
+  }
+) => void;
+
+type linkCardToClientFormData = {
+  sendSmsLanguage: string;
+  sendSms: string;
+  referenceNo: string;
+  token: string;
+  cardAliasName: "";
+  msisdn: string; // phone number
+};
+
+type MFS = {
+  checkMasterPass: (formData: FormData, cb: MFS_CB_TYPE) => void; // checkMasterPassFormData
+  setClientId: (a: string) => void;
+  register: (formData: FormData, cb: MFS_CB_TYPE) => void; // registerFormData
+  resendOtp: (token: string, lang: string, cb: MFS_CB_TYPE) => void;
+  validateTransaction: (formData: FormData, cb: MFS_CB_TYPE) => void; // otp
+  getLastToken: () => string;
+  linkCardToClient: (formData: FormData, cb: MFS_CB_TYPE) => void;
+  listCards: (phoneNumber: string, token: string, cb: MFS_CB_TYPE) => void;
+  deleteCard: (formData: FormData, cb: MFS_CB_TYPE) => void;
+
+  // addCardToMasterPass: (a: any, b: any) => void;
+  // completeRegistration: ƒ (a,b,c)
+  // directPurchase: ƒ (a,b)
+  // forgotPassword: ƒ (a,b)
+  // initiateRecurringPayment: ƒ (a,b)
+  // parseQrCode: ƒ (a,b)
+  // purchase: ƒ (a,b)
+  // purchaseAndRegister: ƒ (a,b)
+  // setAdditionalParameters: ƒ (a)
+  // setAddress: ƒ (a)
+  // setFingerprint: ƒ (a)
+  // setToken: ƒ (a)
+  // updateUser: ƒ (a,b)
+  // verifyPin: ƒ (a,b)
+};
+
+export type Card = {
+  BankIca: string; // "2110"
+  CardStatus: string; // "0010100101"
+  EftCode: string; // "0046"
+  IsMasterPassMember: string; // "Y"
+  LoyaltyCode: string; // "bonus"
+  Name: string; // "Akbank"
+  ProductName: string; // "Axess"
+  PromtCpin: string; // "N"
+  UniqueId: string; // "AAB0CF6AC435D6AB4C73EDB9FB1EA667526DBF81583E544C589A6BBF9B389497"
+  Value1: string; // "55711355******75"
+  Value2: string; // "U00"
+  paymentGatewayId: string;
+};
+
+export default class MasterPassModel {
+  checkMasterPassData: {
+    // responseCode: string;
+    status:
+      | ""
+      | "noMasterPassAccount"
+      | "hasMasterPassAccountButDoesNotHaveAnyOperation"
+      | "hasMasterPassAccountAndHasRelation";
+  } = {
+    status: "",
+    // responseCode: "",
+  };
+
+  saveCardToMasterPass: {
+    isCheckboxChecked: boolean;
+    isSendConfirmationButtonPending: boolean;
+    cardName: string;
+    phoneNumber: string;
+  } = {
+    isCheckboxChecked: false,
+    cardName: "",
+    phoneNumber: "",
+    isSendConfirmationButtonPending: false,
+  };
+
+  otpResponse: {
+    status: "error" | "";
+    text: string;
+  } = {
+    status: "",
+    text: "",
+  };
+  isOtpFormSubmitAtLeastOnce = false;
+  visibleModal?:
+    | "otpModalBank"
+    | "otpModalMasterPass"
+    | "otpModalSuccess"
+    | "linkCardToClientModal"
+    | "linkCardToClientModalSuccess"
+    | "mfsResponseModal" = undefined;
+  mfsResponseModalText?: string;
+
+  cards: Card[] = [];
+  selectedCard?: Card;
+
+  constructor() {
+    makeAutoObservable(this);
+  }
+
+  // === paymentGateway MasterPass Form UI Helper ===
+  get isSaveCardToMasterPassPhoneNumberInputVisible() {
+    if (
+      this.checkMasterPassData.status ===
+        "hasMasterPassAccountAndHasRelation" &&
+      !!this.cards.length
+    ) {
+      return false;
+    }
+
+    if (
+      this.checkMasterPassData.status ===
+        "hasMasterPassAccountButDoesNotHaveAnyOperation" ||
+      this.checkMasterPassData.status === "noMasterPassAccount"
+    ) {
+      return true;
+    }
+
+    return true;
+  }
+
+  get isSaveCardToMasterPassPhoneNumberInputDisabled() {
+    if (
+      this.checkMasterPassData.status ===
+        "hasMasterPassAccountAndHasRelation" &&
+      !!this.cards.length
+    ) {
+      return true;
+    }
+    if (
+      this.checkMasterPassData.status ===
+        "hasMasterPassAccountButDoesNotHaveAnyOperation" ||
+      this.checkMasterPassData.status === "noMasterPassAccount"
+    ) {
+      return true;
+    }
+    return false;
+  }
+
+  /**
+   * Use when phone number input disabled
+   */
+  saveCardToMasterPassPhoneNumberDisabledInputValue = ({
+    store,
+    checkout,
+    withPlus,
+  }: {
+    withPlus: boolean;
+    store: IkasBaseStore;
+    checkout: IkasCheckout;
+  }) => {
+    const phoneNumber = this.phoneNumber({
+      store,
+      checkout,
+      withPlus,
+    });
+    return phoneNumber || "";
+  };
+
+  // === paymentGateway MasterPass Form UI Helper END ===
+
+  get isSendConfirmationButtonDisabled() {
+    if (!this.isSaveCardToMasterPassPhoneNumberInputVisible) {
+      return !this.saveCardToMasterPass.cardName;
+    }
+    if (this.isSaveCardToMasterPassPhoneNumberInputDisabled) {
+      return !this.saveCardToMasterPass.cardName;
+    }
+
+    return (
+      !this.saveCardToMasterPass.cardName ||
+      !this.saveCardToMasterPass.phoneNumber
+    );
+  }
+
+  onSaveCardToMasterPassCheckedChange = (value: boolean) => {
+    this.saveCardToMasterPass.isCheckboxChecked = value;
+  };
+
+  onSaveCardToMasterPassCardNameChange = (value: string) => {
+    this.saveCardToMasterPass.cardName = value;
+  };
+
+  onSaveCardToMasterPassPhoneNumberChange = (value: string) => {
+    this.saveCardToMasterPass.phoneNumber = value;
+  };
+
+  onSaveCardToMasterPassSendConfirmationButtonClick = ({
+    creditCard,
+    store,
+    checkout,
+    paymentGateway,
+    callback,
+  }: RegisterParams) => {
+    console.log("onSaveCardToMasterPassSendConfirmationButtonClick 1");
+    this.register({
+      creditCard,
+      store,
+      checkout,
+      paymentGateway,
+      callback,
+    });
+  };
+
+  get isLinkCardToClientModalVisible() {
+    return this.visibleModal === "linkCardToClientModal";
+  }
+
+  get isOtpModalVisible() {
+    return (
+      this.visibleModal === "otpModalBank" ||
+      this.visibleModal === "otpModalMasterPass"
+    );
+  }
+
+  get isResponseModalVisible() {
+    return !!(
+      this.visibleModal === "mfsResponseModal" && this.mfsResponseModalText
+    );
+  }
+
+  get isSuccessModalVisible() {
+    return (
+      this.visibleModal === "linkCardToClientModalSuccess" ||
+      this.visibleModal === "otpModalSuccess"
+    );
+  }
+
+  get otpModalType(): OtpModalType {
+    return this.visibleModal === "otpModalMasterPass"
+      ? "masterPassOtp"
+      : "bankOtp";
+  }
+
+  get successModalType(): SuccessModalType {
+    return this.checkMasterPassData.status ===
+      "hasMasterPassAccountButDoesNotHaveAnyOperation"
+      ? "linkCardToClient"
+      : "register";
+  }
+
+  showLinkCardToClientModal = () => {
+    this.visibleModal = "linkCardToClientModal";
+  };
+
+  hideLinkCardToClientModal = () => {
+    this.visibleModal = undefined;
+  };
+
+  showOtpModal = (modalType: OtpModalType) => {
+    this.otpResponse.text = "";
+    this.otpResponse.status = "";
+    this.visibleModal =
+      modalType === "masterPassOtp" ? "otpModalMasterPass" : "otpModalBank";
+    console.log("calisti", this.visibleModal);
+  };
+
+  hideOtpModal = () => {
+    this.visibleModal = undefined;
+    this.otpResponse.text = "";
+    this.otpResponse.status = "";
+    this.isOtpFormSubmitAtLeastOnce = false;
+  };
+
+  onResponseModalClose = () => {
+    this.visibleModal = undefined;
+    this.mfsResponseModalText = "";
+  };
+
+  onSuccessModalClose = () => {
+    this.visibleModal = undefined;
+  };
+
+  onLinkCardToClientButtonClick = (params: LinkCardToClientParams) => {
+    this.linkCardToClient(params);
+  };
+
+  onOtpFormSubmit = (params: ValidateTransactionParams) => {
+    this.otpResponse.text = "";
+    this.otpResponse.status = "";
+    this.validateTransaction(params);
+  };
+
+  // === Util Functions Start ===
+
+  MFS = () => {
+    if (isServer) return;
+    if (!(window as any).MFS || !(window as any).MFS?.setClientId) {
+      console.error("MFS can not use.");
+      return;
+    }
+    return (window as any).MFS as MFS;
+  };
+
+  getToken = async ({
+    cartId,
+    paymentGatewayId,
+    operationType,
+    phoneNumber,
+  }: {
+    cartId: string;
+    paymentGatewayId: string;
+    operationType: MasterPassOperationTypeEnum;
+    phoneNumber: string;
+  }) => {
+    const response = await getMasterpassRequestToken({
+      cartId,
+      paymentGatewayId,
+      operationType,
+      phoneNumber,
+    });
+
+    if (!response.data || !response.isSuccess || response.errors.length) {
+      this.showTokenErrorWithModal();
+      return;
+    }
+    return response.data;
+  };
+
+  phoneNumber = ({
+    store,
+    checkout,
+    withPlus = false,
+  }: {
+    store: IkasBaseStore;
+    checkout: IkasCheckout;
+    withPlus?: boolean;
+  }) => {
+    let phoneNumber =
+      store.customerStore.customer?.phone || checkout.shippingAddress?.phone;
+
+    if (phoneNumber && phoneNumber.includes("+") && !withPlus) {
+      phoneNumber = phoneNumber.replace("+", "");
+    }
+
+    return phoneNumber;
+  };
+
+  sendSmsLanguage = (store: IkasBaseStore) => {
+    let sendSmsLanguage = "tur";
+    if (store.localeOptions.length) {
+      const locale = store.localeOptions.find(
+        (lO) => lO.routing.locale === IkasStorefrontConfig.getCurrentLocale()
+      );
+      if (locale && locale.iso3) {
+        sendSmsLanguage = locale.iso3?.toLowerCase();
+      }
+    }
+
+    return sendSmsLanguage;
+  };
+
+  /**
+   * Send object return value is FormData
+   * @returns FormData
+   */
+  prepareFormData<T>(data: T): FormData {
+    const formData = new FormData();
+    Object.entries(data).forEach(([key, value]) => formData.append(key, value));
+
+    return formData;
+  }
+
+  clearSaveCardToMasterPassForm = () => {
+    this.saveCardToMasterPass.isCheckboxChecked = false;
+    this.saveCardToMasterPass.phoneNumber = "";
+    this.saveCardToMasterPass.cardName = "";
+    this.saveCardToMasterPass.isSendConfirmationButtonPending = false;
+  };
+
+  /**
+   * MFS (MasterPass js library) response handler.
+   */
+  mfsResponseHandler: MFS_CB_HOC_TYPE = (params) => (status, response) => {
+    console.log({ field: "mfsResponseHandler", response });
+    params.callback && params.callback();
+    const checkStatus = (regex: RegExp) =>
+      response?.accountStatus?.match(regex);
+
+    if (checkStatus(MFSRegex.noMasterPassAccount)) {
+      this.checkMasterPassData.status = "noMasterPassAccount";
+      const phoneNumber = this.phoneNumber({
+        checkout: params.checkout,
+        store: params.store,
+        withPlus: true,
+      });
+      if (phoneNumber) {
+        this.saveCardToMasterPass.phoneNumber = phoneNumber;
+      }
+    }
+
+    if (checkStatus(MFSRegex.hasMasterPassAccountButDoesNotHaveAnyOperation)) {
+      this.checkMasterPassData.status =
+        "hasMasterPassAccountButDoesNotHaveAnyOperation";
+      this.showLinkCardToClientModal();
+      const phoneNumber = this.phoneNumber({
+        checkout: params.checkout,
+        store: params.store,
+        withPlus: true,
+      });
+      if (phoneNumber) {
+        this.saveCardToMasterPass.phoneNumber = phoneNumber;
+      }
+    }
+
+    if (checkStatus(MFSRegex.hasMasterPassAccountAndHasRelation)) {
+      this.checkMasterPassData.status = "hasMasterPassAccountAndHasRelation";
+      if (params?.checkout && params.store) {
+        this.listCards({ store: params.store, checkout: params.checkout });
+        console.log("call listcards");
+      }
+    }
+
+    if (
+      (params.source === "validateTransaction" ||
+        params.source === "resendOtp") &&
+      response.responseDescription
+    ) {
+      this.otpResponse.text = response.responseDescription;
+      if (response.responseCode === "1409") {
+        this.otpResponse.status = "error";
+      }
+    }
+
+    if (response.responseCode == "0000" || response.responseCode == "") {
+      // Register Success
+      console.log("Register Success");
+
+      if (params.source === "deleteCard") {
+        this.listCards({ store: params.store, checkout: params.checkout });
+      }
+
+      if (params.source === "validateTransaction") {
+        if (params?.checkout && params.store) {
+          if (
+            this.checkMasterPassData.status ===
+            "hasMasterPassAccountButDoesNotHaveAnyOperation"
+          ) {
+            this.visibleModal = "linkCardToClientModalSuccess";
+          } else {
+            this.visibleModal = "otpModalSuccess";
+          }
+          params.checkout.selectedPaymentGateway = undefined;
+          this.clearSaveCardToMasterPassForm();
+          this.listCards({ store: params.store, checkout: params.checkout });
+        }
+      }
+    }
+
+    if (response.responseCode === "5196" && response.responseDescription) {
+      this.visibleModal = "mfsResponseModal";
+      this.mfsResponseModalText = response.responseDescription;
+      // SHOW INFO MODAL.
+    }
+
+    if (response.responseCode == "5001" || response.responseCode == "5008") {
+      const modalType =
+        response.responseCode === "5001" ? "bankOtp" : "masterPassOtp";
+      this.showOtpModal(modalType);
+    }
+
+    if (response.responseCode == "5010" && typeof window !== "undefined") {
+      console.log(`response.responseCode == "5010"`);
+      window.location.assign(
+        response.url3D + "&returnUrl=" + window.location.href
+      );
+      return;
+    }
+    // else if (response.responseCode == "5015") {
+    //   $("#mpin-form").show();
+    //   $("#mpin-define-label").show();
+    // } else if (response.responseCode == "5000") {
+    //   $("#rta-form").show();
+    // }
+
+    console.log({
+      source: "MFS response.responseDescription",
+      responseDescription: response.responseDescription,
+      response,
+    });
+  };
+
+  showTokenErrorWithModal = () => {
+    const { t } = useTranslation();
+    this.visibleModal = "mfsResponseModal";
+    this.mfsResponseModalText = t("checkout-page:errorUnknown");
+  };
+
+  // === End Util Functions ===
+
+  // == MFS FUNCTIONS START ==
+
+  /**
+   * CheckMasterPass for customer. Call it on initial. For more detail keep reading. [tr]
+
+   * Soldan ilk 6 hane 000000 ise
+   * Kullanıcının masterpass hesabı yok anlamına gelmektedir. Burada isterseniz kart kaydına
+   * yönlendirebilirsiniz. Kart kaydını sizin üzerinizden gerçekleştirdiğinde otomatik linklenecektir
+   * ve tekrar checkmasterpass servisine istek yaptığınızda ilk 6 hanenin değiştiğini göreceksiniz.
+
+   * Soldan ilk 6 hane 011000 ise
+   * Kullanıcının daha önce başka üye işyerinde kayıtlı hesabı olduğu anlamına gelmektedir.
+   * Bu aşamada kullanıcıyı linkleme (linkCardtoClient) akışına sokmanız gerekmektedir.
+   * “Masterpass’e kayıtlı kartların var, kullanmak ister misin?” sorusu sorulur
+   * ve evet cevabında linkCardtoClient servisi çağrılır. Sms doğrulaması yapıldıktan
+   * sonra linkleme başarıyla gerçekleşeceği için ListCard servisi ile kartlar listelenir.
+
+   * Soldan ilk 6 hane 011100 ise
+   * Kullanıcı daha önce ikas üzerinde linkli ve kartları kaydedilmiş demektir.
+   * Bu durumda kullanıcıdan herhangi bir aksiyon almasını beklemeden doğrudan
+   * kayıtlı kartlarının listelenmesi (ListCard servisi ile) gerekiyor.
+   */
+  checkMasterPass = async ({
+    checkout,
+    store,
+    ...rest
+  }: CheckMasterPassParams) => {
+    console.log("checkMasterPass 1");
+    const MFS = this.MFS();
+    if (!MFS) return;
+
+    const phoneNumber = this.phoneNumber({ store, checkout });
+
+    console.log("checkMasterPass 2");
+    const paymentGateway = checkout.masterPassPaymentGateway;
+    if (!phoneNumber) return;
+    if (!paymentGateway) return;
+    if (!paymentGateway.masterPassClientId) return;
+    console.log("checkMasterPass 3", phoneNumber);
+
+    const response = await this.getToken({
+      cartId: checkout.id,
+      paymentGatewayId: paymentGateway.id,
+      operationType: MasterPassOperationTypeEnum.CHECK_MASTER_PASS_USER,
+      phoneNumber,
+    });
+    if (!response) return;
+
+    MFS.setClientId(paymentGateway.masterPassClientId);
+
+    const sendSmsLanguage = this.sendSmsLanguage(store);
+    const formData = this.prepareFormData<checkMasterPassFormData>({
+      sendSmsLanguage,
+      sendSms: "N",
+      referenceNo: response.requestReferenceNumber,
+      token: response.token,
+      userId: phoneNumber,
+    });
+
+    MFS.checkMasterPass(
+      formData,
+      this.mfsResponseHandler({ source: "checkMasterPass", checkout, store })
+    );
+    console.log("checkMasterPass 4");
+  };
+
+  /**
+   * Save card to MasterPass
+   */
+  register = async ({
+    creditCard,
+    store,
+    checkout,
+    paymentGateway,
+    callback,
+  }: RegisterParams) => {
+    console.log("register 1");
+    const MFS = this.MFS();
+    if (!MFS) return;
+    console.log("register 2");
+
+    const phoneNumber = creditCard.phoneNumber;
+    if (!phoneNumber) return;
+    if (!paymentGateway.masterPassClientId) return;
+    console.log("register 3");
+    const tokenResponse = await this.getToken({
+      cartId: checkout.id,
+      paymentGatewayId: paymentGateway.id,
+      operationType: MasterPassOperationTypeEnum.REGISTER_CARD,
+      phoneNumber,
+    });
+    console.log("register 4");
+    if (!tokenResponse?.token) return;
+
+    const formData = this.prepareFormData<registerFormData>({
+      msisdn: phoneNumber,
+      token: tokenResponse?.token,
+      referenceNo: tokenResponse.requestReferenceNumber,
+      sendSmsLanguage: this.sendSmsLanguage(store),
+      rtaPan: creditCard.rtaPan,
+      expiryDate: creditCard.expiryDate,
+      cvc: creditCard.cvc,
+      accountAliasName: creditCard.accountAliasName,
+      timeZone: tokenResponse.timeZone,
+      sendSms: "Y",
+      actionType: "A",
+      clientIp: "",
+      delinkReason: "",
+      eActionType: "A",
+      cardTypeFlag: "05",
+      cpinFlag: "Y",
+      defaultAccount: "Y",
+      mmrpConfig: "110010",
+      identityVerificationFlag: "Y",
+      mobileAccountConfig: "MWA",
+      uiChannelType: "6",
+    });
+
+    console.log("reigster 5");
+    MFS.setClientId(paymentGateway.masterPassClientId);
+    MFS.register(
+      formData,
+      this.mfsResponseHandler({ source: "register", store, checkout, callback })
+    );
+  };
+
+  resendOtp = async ({
+    store,
+    checkout,
+    callback,
+  }: {
+    store: IkasBaseStore;
+    checkout: IkasCheckout;
+    callback: () => void;
+  }) => {
+    if (!this.isOtpFormSubmitAtLeastOnce) return;
+    const MFS = this.MFS();
+    if (!MFS) return;
+    const token = MFS.getLastToken();
+    const language = this.sendSmsLanguage(store);
+    MFS.resendOtp(
+      token,
+      language,
+      this.mfsResponseHandler({
+        source: "resendOtp",
+        store,
+        checkout,
+        callback,
+      })
+    );
+  };
+
+  /**
+   * First checkMasterPass then check respone;
+   * [tr] Soldan ilk 6 hane 011000 ise
+   * Kullanıcının daha önce başka üye işyerinde kayıtlı hesabı olduğu anlamına gelmektedir.
+   * Bu aşamada kullanıcıyı linkleme (linkCardtoClient) akışına sokmanız gerekmektedir.
+   * “Masterpass’e kayıtlı kartların var, kullanmak ister misin?” sorusu sorulur
+   * ve evet cevabında linkCardtoClient servisi çağrılır. Sms doğrulaması yapıldıktan
+   * sonra linkleme başarıyla gerçekleşeceği için ListCard servisi ile kartlar listelenir.
+   */
+  linkCardToClient = async ({
+    store,
+    checkout,
+    callback,
+  }: LinkCardToClientParams) => {
+    const MFS = this.MFS();
+    if (!MFS) return;
+
+    const phoneNumber = this.phoneNumber({ store, checkout });
+    if (!phoneNumber) return;
+    const pg = checkout.masterPassPaymentGateway;
+    if (!pg?.id) return;
+
+    const tokenResponse = await this.getToken({
+      cartId: checkout.id,
+      paymentGatewayId: pg.id,
+      operationType: MasterPassOperationTypeEnum.REGISTER_CARD, // linkCardToClient
+      phoneNumber,
+    });
+    if (!tokenResponse) {
+      callback && callback();
+      return;
+    }
+
+    const formData = this.prepareFormData<linkCardToClientFormData>({
+      sendSms: "Y",
+      sendSmsLanguage: this.sendSmsLanguage(store),
+      token: tokenResponse.token,
+      referenceNo: tokenResponse.requestReferenceNumber,
+      cardAliasName: "",
+      msisdn: phoneNumber,
+    });
+
+    MFS.linkCardToClient(
+      formData,
+      this.mfsResponseHandler({
+        source: "linkCardToClient",
+        store,
+        checkout,
+        callback,
+      })
+    );
+  };
+
+  validateTransaction = async ({
+    validationCode,
+    store,
+    checkout,
+    callback,
+  }: ValidateTransactionParams) => {
+    const MFS = this.MFS();
+    if (!MFS) return;
+
+    const phoneNumber = this.phoneNumber({ store, checkout });
+    if (!phoneNumber) return;
+
+    const paymentGateway = checkout.masterPassPaymentGateway;
+    if (!paymentGateway) return;
+
+    const tokenResponse = await this.getToken({
+      cartId: checkout.id,
+      paymentGatewayId: paymentGateway.id,
+      operationType: MasterPassOperationTypeEnum.REGISTER_CARD, // TODO validateTransaction
+      phoneNumber,
+    });
+
+    if (!tokenResponse) return;
+
+    const formData = this.prepareFormData<validateTransactionData>({
+      pinType: "otp",
+      validationCode,
+      sendSms: "Y",
+      sendSmsLanguage: this.sendSmsLanguage(store),
+      token: tokenResponse.token,
+      referenceNo: tokenResponse.requestReferenceNumber,
+    });
+
+    if (!this.isOtpFormSubmitAtLeastOnce)
+      this.isOtpFormSubmitAtLeastOnce = true;
+
+    MFS.validateTransaction(
+      formData,
+      this.mfsResponseHandler({
+        source: "validateTransaction",
+        store,
+        checkout,
+        callback,
+      })
+    );
+  };
+
+  listCards = async ({ store, checkout }: ListCardsParams) => {
+    const MFS = this.MFS();
+    if (!MFS) return;
+
+    const phoneNumber = this.phoneNumber({ store, checkout });
+    if (!phoneNumber) return;
+
+    const paymentGatewayId = checkout.masterPassPaymentGateway?.id;
+    console.log("listCards paymentGatewayId", paymentGatewayId);
+    if (!paymentGatewayId) return;
+
+    const tokenResponse = await this.getToken({
+      cartId: checkout.id,
+      paymentGatewayId: paymentGatewayId,
+      operationType: MasterPassOperationTypeEnum.LIST_CARDS,
+      phoneNumber,
+    });
+    if (!tokenResponse) return;
+
+    const handler: MFS_CB_TYPE = (statusCode, response) => {
+      if (response.responseCode != "0000" && response.responseCode != "") {
+        // this.visibleModal = "mfsResponseModal";
+        // this.mfsResponseModalText = response.responseDescription;
+
+        console.error({
+          source: "mfs response.responseDescription",
+          responseDescription: response.responseDescription,
+          response,
+        });
+        console.log("TransactionID->", response.transactionId);
+      }
+
+      const cards: Card[] = [];
+      if (Array.isArray(response.cards) && response.cards.length) {
+        for (let i = 0; i < response.cards.length; i++) {
+          const card = response.cards[i];
+          card.paymentGatewayId = paymentGatewayId;
+          cards.push(card);
+        }
+      }
+
+      this.cards = cards;
+
+      console.log("list_card response->", response);
+      console.log("Cards", cards);
+      console.log("TransactionID->", response.transactionId);
+    };
+
+    MFS.listCards(phoneNumber, tokenResponse.token, handler);
+  };
+
+  deleteCard = async ({ store, checkout, card }: DeleteCardParams) => {
+    const MFS = this.MFS();
+    if (!MFS) return;
+
+    const phoneNumber = this.phoneNumber({ store, checkout });
+    if (!phoneNumber) return;
+
+    const tokenResponse = await this.getToken({
+      cartId: checkout.id,
+      paymentGatewayId: card.paymentGatewayId,
+      operationType: MasterPassOperationTypeEnum.DELETE_CARD,
+      phoneNumber,
+    });
+    if (!tokenResponse) return;
+
+    const formData = this.prepareFormData<deleteCardData>({
+      sendSms: "N",
+      msisdn: phoneNumber,
+      token: tokenResponse.token,
+      referenceNo: tokenResponse.requestReferenceNumber,
+      sendSmsLanguage: this.sendSmsLanguage(store),
+      accountAliasName: card.Name,
+    });
+
+    MFS.deleteCard(
+      formData,
+      this.mfsResponseHandler({ source: "deleteCard", store, checkout })
+    );
+  };
+}
+
+type RegisterParams = {
+  creditCard: {
+    rtaPan: string; // 111122223333444455;
+    expiryDate: string; // YYMM
+    cvc: string; // XXX
+    accountAliasName: string; // cardNumber;
+    phoneNumber: string; // 905354443322
+  };
+  paymentGateway: IkasPaymentGateway;
+  store: IkasBaseStore;
+  checkout: IkasCheckout;
+  callback: () => void;
+};
+
+type CheckMasterPassParams = {
+  checkout: IkasCheckout;
+  store: IkasBaseStore;
+};
+
+type LinkCardToClientParams = {
+  cartId: string;
+  checkout: IkasCheckout;
+  store: IkasBaseStore;
+  callback?: () => void;
+};
+
+type ValidateTransactionParams = {
+  validationCode: string;
+  store: IkasBaseStore;
+  checkout: IkasCheckout;
+  callback: () => void;
+};
+
+type ListCardsParams = {
+  store: IkasBaseStore;
+  checkout: IkasCheckout;
+};
+
+type DeleteCardParams = {
+  store: IkasBaseStore;
+  checkout: IkasCheckout;
+  card: Card;
+};