@ikas/storefront 3.0.0-alpha.50 → 4.0.0-alpha.10

package/src/components/checkout/components/master-pass/credit-card-form/index.tsx

@@ -0,0 +1,160 @@
+import React from "react";
+import { observer } from "mobx-react-lite";
+
+import SVGMasterPassByMasterCard from "../svg/master-pass-by-master-card";
+
+import checkoutStyles from "../../../style.module.scss";
+import styles from "./style.module.scss";
+import CheckoutViewModel from "../../../model";
+import {
+  createTranslationInputData,
+  useTranslation,
+} from "../../../../../utils/i18n";
+import { IkasStorefrontConfig } from "@ikas/storefront-config";
+import { Button } from "../../button";
+import { Checkbox } from "../../checkbox";
+import { FormItem } from "../../form-item";
+import { FormItemType } from "../../form-item/model";
+
+type Props = {
+  vm: CheckoutViewModel;
+};
+
+const CreditCardFormMasterPass = observer(({ vm }: Props) => {
+  const { t } = useTranslation();
+
+  const checkoutTranslations =
+    IkasStorefrontConfig.getTranslations()["checkout-page"];
+  const saveCardMasterPassCheckboxLabelData = React.useMemo(
+    () =>
+      createTranslationInputData(
+        checkoutTranslations?.masterPass?.creditCardForm?.checkboxLabel
+      ),
+    [checkoutTranslations]
+  );
+  const saveCardMasterPassCheckboxLabel = React.useMemo(
+    () => (
+      <div className={styles.CheckboxLabel}>
+        {saveCardMasterPassCheckboxLabelData.map((p, index) =>
+          p.isVariable ? (
+            <span key={index} className={styles.Logo}>
+              <SVGMasterPassByMasterCard />
+            </span>
+          ) : (
+            <React.Fragment key={index}>{p.value}</React.Fragment>
+          )
+        )}
+      </div>
+    ),
+    [saveCardMasterPassCheckboxLabelData]
+  );
+
+  const onSendConfirmationButtonClick = () => {
+    if (vm.mpVM.saveCardToMasterPass.isSendConfirmationButtonPending) return;
+    console.log("onSendConfirmationButtonClick 1");
+    if (!vm.checkout.selectedPaymentGateway) return;
+    console.log("onSendConfirmationButtonClick 2");
+    if (
+      !vm.cardData ||
+      !vm.cardData.cardNumber ||
+      !vm.cardData.expirationDate ||
+      !vm.cardData.cvv
+    )
+      return;
+    console.log("onSendConfirmationButtonClick 3");
+    if (!vm.mpVM.saveCardToMasterPass.cardName) return;
+    console.log("onSendConfirmationButtonClick 4");
+    const phoneNumber = vm.mpVM.isSaveCardToMasterPassPhoneNumberInputDisabled
+      ? vm.mpVM.saveCardToMasterPassPhoneNumberDisabledInputValue({
+          withPlus: false,
+          store: vm.store,
+          checkout: vm.checkout,
+        })
+      : vm.mpVM.saveCardToMasterPass.phoneNumber.replace("+", "");
+    if (!phoneNumber) return;
+
+    const callback = () => {
+      vm.mpVM.saveCardToMasterPass.isSendConfirmationButtonPending = false;
+    };
+
+    const formatExpiryDate = (expiryDate: string /** MM / YY */) => {
+      const formatedExpiryDate = expiryDate.replace(" / ", ""); // MM / YY
+      const month = formatedExpiryDate.substring(0, 2);
+      const year = formatedExpiryDate.substring(2, 4);
+      return `${year}${month}`; // YYMM
+    };
+
+    const params = {
+      creditCard: {
+        rtaPan: vm.cardData.cardNumber.replace(/ /g, ""),
+        expiryDate: formatExpiryDate(vm.cardData.expirationDate),
+        cvc: vm.cardData.cvv,
+        accountAliasName: vm.mpVM.saveCardToMasterPass.cardName,
+        phoneNumber,
+      },
+      store: vm.store,
+      checkout: vm.checkout,
+      paymentGateway: vm.checkout.selectedPaymentGateway,
+      callback,
+    };
+    console.log("onSendConfirmationButtonClick 5", params);
+
+    vm.mpVM.saveCardToMasterPass.isSendConfirmationButtonPending = true;
+    vm.mpVM.onSaveCardToMasterPassSendConfirmationButtonClick(params);
+  };
+
+  const value = vm.mpVM.isSaveCardToMasterPassPhoneNumberInputDisabled
+    ? vm.mpVM.saveCardToMasterPassPhoneNumberDisabledInputValue({
+        withPlus: true,
+        store: vm.store,
+        checkout: vm.checkout,
+      })
+    : vm.mpVM.saveCardToMasterPass.phoneNumber;
+  return (
+    <div>
+      <Checkbox
+        label={saveCardMasterPassCheckboxLabel}
+        value={vm.mpVM.saveCardToMasterPass.isCheckboxChecked}
+        onChange={vm.mpVM.onSaveCardToMasterPassCheckedChange}
+      />
+      {vm.mpVM.saveCardToMasterPass.isCheckboxChecked && (
+        <div className={styles.FormWrapper}>
+          <div className={checkoutStyles.RowPB}>
+            <FormItem
+              name="masterPassCardName"
+              type={FormItemType.TEXT}
+              label={t("checkout-page:masterPass.creditCardForm.cardName")}
+              value={vm.mpVM.saveCardToMasterPass.cardName}
+              onChange={vm.mpVM.onSaveCardToMasterPassCardNameChange}
+            />
+          </div>
+          {vm.mpVM.isSaveCardToMasterPassPhoneNumberInputVisible && (
+            <div className={checkoutStyles.RowPB}>
+              <FormItem
+                name="masterPassPhoneNumber"
+                type={FormItemType.TEL}
+                disabled={
+                  vm.mpVM.isSaveCardToMasterPassPhoneNumberInputDisabled
+                }
+                label={t("checkout-page:masterPass.creditCardForm.phoneNumber")}
+                value={value}
+                onChange={vm.mpVM.onSaveCardToMasterPassPhoneNumberChange}
+              />
+            </div>
+          )}
+          <Button
+            style={{ width: "100%" }}
+            text={t("checkout-page:masterPass.creditCardForm.button")}
+            isDisabled={vm.mpVM.isSendConfirmationButtonDisabled}
+            isLoading={
+              vm.mpVM.saveCardToMasterPass.isSendConfirmationButtonPending
+            }
+            onClick={onSendConfirmationButtonClick}
+          />
+        </div>
+      )}
+    </div>
+  );
+});
+
+export default CreditCardFormMasterPass;

package/src/components/checkout/components/master-pass/credit-card-form/style.module.scss

@@ -0,0 +1,15 @@
+@import "../../../styles/variables.scss";
+
+.FormWrapper {
+  margin-top: 16px;
+}
+
+.CheckboxLabel {
+  color: $primaryTextColor;
+
+  .Logo {
+    display: inline-block;
+    vertical-align: middle;
+    margin: 0 8px;
+  }
+}

package/src/components/checkout/components/master-pass/modal/index.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { observer } from "mobx-react-lite";
+
+import SVGModalClose from "./svg/modal-close";
+
+import styles from "./style.module.scss";
+import useEscape from "../../modal/useEscape";
+
+type Props = {
+  visible: boolean;
+  children?: React.ReactNode;
+  footer?: React.ReactNode;
+  onClose: () => void;
+};
+
+const Modal = observer(({ visible, footer, children, onClose }: Props) => {
+  useEscape({ callback: () => onClose() });
+  if (!visible) return null;
+  return (
+    <div className={styles.ModalContainer}>
+      <div role="dialog" aria-modal="true" className={styles.Modal}>
+        <button className={styles.CloseButton} onClick={onClose}>
+          <SVGModalClose />
+        </button>
+        <div className={styles.ModalContent}>{children}</div>
+        {footer}
+      </div>
+    </div>
+  );
+});
+
+export default Modal;

package/src/components/checkout/components/master-pass/modal/style.module.scss

@@ -0,0 +1,42 @@
+@import "../../../styles/variables.scss";
+
+.ModalContainer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(39, 39, 39, 0.7);
+  z-index: 99999999;
+}
+
+.Modal {
+  position: relative;
+  border-radius: 8px;
+  background-color: #fff;
+  width: 100%;
+  max-width: 440px;
+
+  @media only screen and (max-width: $breakpoint) {
+    width: calc(100% - 32px);
+    margin: 0 16px;
+  }
+}
+
+.CloseButton {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  width: 24px;
+  height: 24px;
+}
+
+.ModalContent {
+  padding: 24px;
+}

package/src/components/checkout/components/master-pass/modal/svg/modal-close.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+const SVGModalClose = () => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M12.1053 11.4001L7.15629 6.45114L6.44918 7.15824L11.3982 12.1073L6.44901 17.0564L7.15612 17.7635L12.1053 12.8144L17.0558 17.7648L17.7629 17.0577L12.8124 12.1073L17.7627 7.15694L17.0556 6.44983L12.1053 11.4001Z"
+      fill="#8A8B94"
+    />
+  </svg>
+);
+
+export default SVGModalClose;

package/src/components/checkout/components/master-pass/modal-link-card-to-client/index.tsx

@@ -0,0 +1,62 @@
+import React, { useState } from "react";
+import { observer } from "mobx-react-lite";
+
+import Modal from "../modal";
+
+import SVGMasterPassByMasterCardBig from "./svg/master-pass-by-master-card-big";
+import SVGInfoMark from "./svg/info-mark";
+
+import styles from "./style.module.scss";
+import { Button } from "../../button";
+import CheckoutViewModel from "../../../model";
+import { useTranslation } from "../../../../../utils/i18n";
+
+type Props = {
+  visible: boolean;
+  vm: CheckoutViewModel;
+  onClose: () => void;
+};
+
+const ModalLinkCardToClient = observer(({ visible, onClose, vm }: Props) => {
+  const { t } = useTranslation();
+  const [isLoading, setLoading] = useState(false);
+  const tKey = "checkout-page:masterPass.linkCardToClientModal";
+
+  const onButtonClick = () => {
+    setLoading(true);
+    vm.mpVM.onLinkCardToClientButtonClick({
+      cartId: vm.checkout.id,
+      checkout: vm.checkout,
+      store: vm.store,
+      callback: () => {
+        setLoading(false);
+      },
+    });
+  };
+
+  return (
+    <Modal visible={visible} onClose={onClose}>
+      <div>
+        <div className={styles.Logo} data-mb>
+          <SVGMasterPassByMasterCardBig />
+        </div>
+        <p className={styles.Text}>{t(`${tKey}.text`)}</p>
+        <Button
+          style={{ width: "100%" }}
+          text={t(`${tKey}.buttonText`)}
+          isLoading={isLoading}
+          isDisabled={isLoading}
+          onClick={onButtonClick}
+        />
+        <p className={styles.SubInfoText}>
+          <span>
+            <SVGInfoMark />
+          </span>
+          {t(`${tKey}.subInfoText`)}
+        </p>
+      </div>
+    </Modal>
+  );
+});
+
+export default ModalLinkCardToClient;

package/src/components/checkout/components/master-pass/modal-link-card-to-client/style.module.scss

@@ -0,0 +1,27 @@
+@import "../../../styles/variables.scss";
+
+.Logo[data-mb] {
+  margin-bottom: 16px;
+}
+
+.Text {
+  font-size: 16px;
+  line-height: 24px;
+  color: $secondaryTextColor;
+  margin-bottom: 32px;
+}
+
+.SubInfoText {
+  margin-top: 12px;
+  font-size: 14px;
+  line-height: 20px;
+  text-align: center;
+  color: $secondaryTextColor;
+
+  span {
+    display: inline-block;
+    margin-right: 8px;
+    width: 16px;
+    height: 16px;
+  }
+}

package/src/components/checkout/components/master-pass/modal-link-card-to-client/svg/info-mark.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+
+const SVGInfoMark = () => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle cx="8" cy="8" r="8" fill="#CFCED3" />
+    <path
+      d="M7.49023 12V5.90625H8.50977V12H7.49023ZM8 4.88086C7.82812 4.88086 7.67969 4.81836 7.55469 4.69336C7.42969 4.56836 7.36719 4.41992 7.36719 4.24805C7.36719 4.07227 7.42969 3.92383 7.55469 3.80273C7.67969 3.67773 7.82812 3.61523 8 3.61523C8.17578 3.61523 8.32617 3.67773 8.45117 3.80273C8.57617 3.92383 8.63867 4.07227 8.63867 4.24805C8.63867 4.41992 8.57617 4.56836 8.45117 4.69336C8.32617 4.81836 8.17578 4.88086 8 4.88086Z"
+      fill="white"
+    />
+  </svg>
+);
+
+export default SVGInfoMark;

package/src/components/checkout/components/master-pass/modal-link-card-to-client/svg/master-pass-by-master-card-big.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+
+const SVGMasterPassByMasterCardBig = () => (
+  <svg
+    width="276"
+    height="48"
+    viewBox="0 0 276 48"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clip-path="url(#clip0_632_16632)">
+      <path
+        d="M23.8964 48.012C37.094 48.012 47.7928 37.2641 47.7928 24.006C47.7928 10.7478 37.094 0 23.8964 0C10.6988 0 0 10.7478 0 24.006C0 37.2641 10.6988 48.012 23.8964 48.012Z"
+        fill="#EB001B"
+      />
+      <path
+        d="M52.7607 48.012C65.9583 48.012 76.6571 37.2641 76.6571 24.006C76.6571 10.7478 65.9583 0 52.7607 0C39.563 0 28.8643 10.7478 28.8643 24.006C28.8643 37.2641 39.563 48.012 52.7607 48.012Z"
+        fill="#F79E1B"
+      />
+      <path
+        d="M38.3228 4.83453C44.0765 9.21449 47.7813 16.1554 47.7813 23.9579C47.7813 31.7605 44.0765 38.7134 38.3228 43.0933C32.569 38.7134 28.8643 31.7725 28.8643 23.9579C28.8643 16.1434 32.5809 9.21449 38.3228 4.83453Z"
+        fill="#FF5F00"
+      />
+      <path
+        d="M75.1682 39.9463V40.1497H74.7275V41.2986H74.513V40.1497H74.0723V39.9463H75.1682ZM76.8479 39.9463V41.2986H76.6335V40.1856L76.2403 41.1669H76.0021L75.609 40.1976V41.2986H75.3946V39.9463H75.7281L76.1212 40.9156L76.5143 39.9463H76.8479V39.9463Z"
+        fill="#F79E1B"
+      />
+      <path
+        d="M274.333 24.8076V25.0111H273.892V26.1599H273.678V25.0111H273.237V24.8076H274.333ZM276 24.8076V26.1599H275.786V25.047L275.393 26.0283H275.167L274.774 25.0589V26.1599H274.559V24.8076H274.893L275.286 25.7769L275.679 24.8076H276V24.8076ZM111.072 9.62137C114.729 9.62137 117.314 12.1464 117.314 15.7605V25.4538H113.943V16.8734C113.943 14.2766 112.609 12.8286 110.369 12.8286C108.201 12.8286 106.391 14.2646 106.391 16.9093V25.4658H103.019V16.8854C103.019 14.2885 101.685 12.8405 99.4457 12.8405C97.2776 12.8405 95.4669 14.2766 95.4669 16.9213V25.4778H92.0957V10.0402H95.4312V11.9191C96.6701 10.1001 98.5761 9.63334 100.149 9.63334C102.495 9.63334 104.401 10.6745 105.462 12.3858C106.796 10.1599 109.166 9.62137 111.072 9.62137ZM136.875 10.0163V25.4538H133.527V23.5989C132.467 24.9632 130.883 25.8488 128.703 25.8488C124.402 25.8488 121.019 22.4501 121.019 17.7351C121.019 13.02 124.402 9.62137 128.703 9.62137C130.883 9.62137 132.467 10.5189 133.527 11.8951V10.0163H136.875ZM129.096 12.7927C126.213 12.7927 124.462 15.0305 124.462 17.7351C124.462 20.4396 126.213 22.6775 129.096 22.6775C131.871 22.6775 133.73 20.5473 133.73 17.7351C133.73 14.9228 131.871 12.7927 129.096 12.7927ZM153.743 11.2609L152.301 13.8817C151.372 13.3072 149.466 12.5653 147.56 12.5653C145.738 12.5653 144.654 13.3072 144.654 14.3962C144.654 15.4733 145.773 15.7844 147.191 15.9879L148.775 16.2272C152.123 16.7059 154.112 18.1419 154.112 20.7867C154.112 23.7545 151.551 25.8248 147.119 25.8248C145.535 25.8248 142.771 25.5137 140.532 23.8383L142.092 21.3132C143.2 22.1629 144.654 22.8929 147.155 22.8929C149.442 22.8929 150.646 22.1629 150.646 21.014C150.646 20.1404 149.812 19.566 147.989 19.3028L146.381 19.0993C142.986 18.6326 141.175 17.0529 141.175 14.5757C141.175 11.5122 143.617 9.63334 147.524 9.63334C149.931 9.63334 152.158 10.2317 153.743 11.2609ZM168.24 10.0163V13.0799H162.355V19.7934C162.355 21.8757 163.451 22.6775 164.798 22.6775C165.834 22.6775 166.978 22.2108 167.895 21.6363L169.229 24.3289C167.99 25.1666 166.441 25.8607 164.512 25.8607C161.033 25.8607 158.996 23.9819 158.996 19.8652V13.0799H155.935V10.0163H158.996V5.34912H162.367V10.0163H168.24ZM178.58 9.62137C182.881 9.62137 185.823 12.9123 185.847 17.7231C185.847 18.1539 185.811 18.5967 185.787 18.9796H174.435C174.887 21.756 176.829 22.9048 179.009 22.9048C180.546 22.9048 182.19 22.2945 183.452 21.2773L185.12 23.6827C183.25 25.2983 181.13 25.8607 178.807 25.8607C174.208 25.8607 170.944 22.6416 170.944 17.747C170.932 12.9004 174.065 9.62137 178.58 9.62137ZM178.521 12.6131C176.126 12.6131 174.804 14.1569 174.447 16.4187H182.416C182.047 14.0133 180.653 12.6131 178.521 12.6131ZM197.485 9.62137C198.51 9.62137 199.296 9.75301 200.07 10.0522L199.272 13.391C198.569 13.02 197.545 12.8286 196.723 12.8286C194.591 12.8286 193.066 14.3484 193.066 16.9692V25.4538H189.718V10.0163H193.042V11.7515C194.043 10.2915 195.615 9.62137 197.485 9.62137ZM211.363 9.62137C215.664 9.62137 219.047 13.02 219.047 17.7351C219.047 22.4501 215.664 25.8488 211.363 25.8488C209.183 25.8488 207.611 24.9632 206.551 23.6109V31.8921H203.203V10.0163H206.551V11.8473C207.611 10.5069 209.183 9.62137 211.363 9.62137ZM210.958 12.7927C208.183 12.7927 206.324 14.9228 206.324 17.7351C206.324 20.5473 208.183 22.6775 210.958 22.6775C213.841 22.6775 215.592 20.4396 215.592 17.7351C215.592 15.0305 213.841 12.7927 210.958 12.7927ZM237.654 10.0163V25.4538H234.307V23.5989C233.247 24.9632 231.662 25.8488 229.482 25.8488C225.182 25.8488 221.799 22.4501 221.799 17.7351C221.799 13.02 225.182 9.62137 229.482 9.62137C231.662 9.62137 233.247 10.5189 234.307 11.8951V10.0163H237.654ZM229.875 12.7927C226.993 12.7927 225.241 15.0305 225.241 17.7351C225.241 20.4396 226.993 22.6775 229.875 22.6775C232.651 22.6775 234.509 20.5473 234.509 17.7351C234.509 14.9228 232.651 12.7927 229.875 12.7927ZM254.522 11.2609L253.081 13.8817C252.152 13.3072 250.246 12.5653 248.34 12.5653C246.517 12.5653 245.433 13.3072 245.433 14.3962C245.433 15.4733 246.553 15.7844 247.97 15.9879L249.555 16.2272C252.902 16.7059 254.892 18.1419 254.892 20.7867C254.892 23.7545 252.33 25.8248 247.899 25.8248C246.315 25.8248 243.551 25.5137 241.311 23.8383L242.872 21.3132C243.98 22.1629 245.433 22.8929 247.935 22.8929C250.222 22.8929 251.425 22.1629 251.425 21.014C251.425 20.1404 250.591 19.566 248.769 19.3028L247.16 19.0993C243.765 18.6326 241.955 17.0529 241.955 14.5757C241.955 11.5122 244.397 9.63334 248.304 9.63334C250.71 9.63334 252.938 10.2317 254.522 11.2609ZM270.449 11.2609L269.008 13.8817C268.079 13.3072 266.173 12.5653 264.267 12.5653C262.444 12.5653 261.36 13.3072 261.36 14.3962C261.36 15.4733 262.48 15.7844 263.897 15.9879L265.482 16.2272C268.829 16.7059 270.819 18.1419 270.819 20.7867C270.819 23.7545 268.257 25.8248 263.826 25.8248C262.242 25.8248 259.478 25.5137 257.238 23.8383L258.799 21.3132C259.907 22.1629 261.36 22.8929 263.862 22.8929C266.149 22.8929 267.352 22.1629 267.352 21.014C267.352 20.1404 266.518 19.566 264.696 19.3028L263.087 19.0993C259.692 18.6326 257.882 17.0529 257.882 14.5757C257.882 11.5122 260.324 9.63334 264.231 9.63334C266.637 9.63334 268.865 10.2317 270.449 11.2609ZM96.1579 33.7949C98.183 33.7949 99.7673 35.3865 99.7673 37.6124C99.7673 39.8383 98.183 41.4299 96.1579 41.4299C95.1334 41.4299 94.3948 41.0111 93.8945 40.3768V41.2384H92.322V30.3364H93.8945V34.848C94.3829 34.2137 95.1334 33.7949 96.1579 33.7949ZM95.9673 35.2908C94.6688 35.2908 93.7873 36.296 93.7873 37.6124C93.7873 38.9288 94.6569 39.934 95.9673 39.934C97.3253 39.934 98.1472 38.8809 98.1472 37.6124C98.1472 36.3439 97.3253 35.2908 95.9673 35.2908ZM108.154 33.9864L102.448 44.314H100.697L103.282 39.7545L100.089 33.9864H101.852L104.175 38.1509L106.415 33.9864H108.154ZM121.579 33.7949C123.294 33.7949 124.51 34.9796 124.51 36.679V41.2384H122.925V37.2055C122.925 35.9849 122.294 35.3028 121.246 35.3028C120.233 35.3028 119.375 35.9729 119.375 37.2175V41.2384H117.791V37.2055C117.791 35.9849 117.171 35.3028 116.111 35.3028C115.099 35.3028 114.241 35.9729 114.241 37.2175V41.2384H112.657V33.9864H114.229V34.8719C114.813 34.0103 115.706 33.7949 116.445 33.7949C117.541 33.7949 118.446 34.2856 118.935 35.0873C119.566 34.0582 120.686 33.7949 121.579 33.7949ZM133.551 33.9864V41.2384H131.979V40.3648C131.478 41.0111 130.74 41.4299 129.715 41.4299C127.69 41.4299 126.106 39.8383 126.106 37.6124C126.106 35.3865 127.702 33.7949 129.715 33.7949C130.74 33.7949 131.49 34.2137 131.979 34.86V33.9864H133.551ZM129.894 35.2908C128.536 35.2908 127.714 36.3439 127.714 37.6124C127.714 38.8809 128.536 39.934 129.894 39.934C131.192 39.934 132.074 38.9288 132.074 37.6124C132.074 36.2841 131.204 35.2908 129.894 35.2908ZM141.33 34.5728L140.651 35.8054C140.21 35.5301 139.317 35.1831 138.423 35.1831C137.566 35.1831 137.053 35.5301 137.053 36.0447C137.053 36.5473 137.578 36.6909 138.245 36.7986L138.995 36.9183C140.568 37.1457 141.509 37.8158 141.509 39.0604C141.509 40.4486 140.306 41.4299 138.221 41.4299C137.47 41.4299 136.184 41.2863 135.124 40.4965L135.85 39.3117C136.374 39.7186 137.053 40.0537 138.233 40.0537C139.305 40.0537 139.877 39.7186 139.877 39.1681C139.877 38.7612 139.484 38.486 138.626 38.3663L137.875 38.2706C136.279 38.0552 135.421 37.3132 135.421 36.1404C135.421 34.7044 136.565 33.8188 138.411 33.8188C139.531 33.8069 140.579 34.0821 141.33 34.5728ZM147.989 33.9864V35.4224H145.225V38.5817C145.225 39.563 145.738 39.934 146.369 39.934C146.857 39.934 147.393 39.7186 147.822 39.4434L148.442 40.7119C147.858 41.1068 147.131 41.4299 146.226 41.4299C144.594 41.4299 143.629 40.5443 143.629 38.6176V35.4224H142.188V33.9864H143.629V31.7964H145.213V33.9864H147.989ZM152.694 33.7949C154.72 33.7949 156.101 35.3387 156.113 37.6004C156.113 37.8039 156.101 38.0073 156.078 38.1868H150.741C150.955 39.4912 151.861 40.0298 152.885 40.0298C153.612 40.0298 154.374 39.7425 154.97 39.2639L155.756 40.3888C154.874 41.1427 153.874 41.406 152.79 41.406C150.622 41.406 149.097 39.8861 149.097 37.5885C149.109 35.3387 150.574 33.7949 152.694 33.7949ZM152.671 35.207C151.551 35.207 150.92 35.937 150.753 36.9901H154.493C154.326 35.8652 153.671 35.207 152.671 35.207ZM161.426 33.7949C161.903 33.7949 162.272 33.8547 162.641 33.9983L162.26 35.566C161.927 35.3865 161.45 35.3028 161.057 35.3028C160.056 35.3028 159.342 36.0088 159.342 37.2534V41.2384H157.769V33.9864H159.33V34.8001C159.806 34.118 160.545 33.7949 161.426 33.7949ZM166.942 33.7949C168.014 33.7949 169.003 34.1898 169.634 34.9557L168.621 36.0327C168.121 35.5541 167.585 35.2788 166.882 35.2788C165.667 35.2788 164.75 36.2362 164.75 37.6004C164.75 38.9647 165.667 39.922 166.882 39.922C167.573 39.922 168.193 39.5989 168.657 39.1681L169.634 40.2571C168.979 41.023 168.014 41.4179 166.942 41.4179C164.643 41.4179 163.142 39.7784 163.142 37.6004C163.142 35.4344 164.643 33.7949 166.942 33.7949ZM177.889 33.9864V41.2384H176.317V40.3648C175.817 41.0111 175.078 41.4299 174.054 41.4299C172.028 41.4299 170.444 39.8383 170.444 37.6124C170.444 35.3865 172.028 33.7949 174.054 33.7949C175.078 33.7949 175.828 34.2137 176.317 34.86V33.9864H177.889ZM174.244 35.2908C172.886 35.2908 172.064 36.3439 172.064 37.6124C172.064 38.8809 172.886 39.934 174.244 39.934C175.543 39.934 176.424 38.9288 176.424 37.6124C176.412 36.2841 175.543 35.2908 174.244 35.2908ZM183.738 33.7949C184.215 33.7949 184.584 33.8547 184.953 33.9983L184.572 35.566C184.239 35.3865 183.762 35.3028 183.369 35.3028C182.368 35.3028 181.654 36.0088 181.654 37.2534V41.2384H180.081V33.9864H181.642V34.8001C182.106 34.118 182.845 33.7949 183.738 33.7949ZM189.349 33.7949C190.374 33.7949 191.124 34.2137 191.613 34.86V30.3364H193.185V41.2384H191.613V40.3648C191.112 41.0111 190.374 41.4299 189.349 41.4299C187.324 41.4299 185.74 39.8383 185.74 37.6124C185.74 35.3865 187.336 33.7949 189.349 33.7949ZM189.54 35.2908C188.182 35.2908 187.36 36.3439 187.36 37.6124C187.36 38.8809 188.182 39.934 189.54 39.934C190.838 39.934 191.72 38.9288 191.72 37.6124C191.72 36.2841 190.85 35.2908 189.54 35.2908Z"
+        fill="#272727"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_632_16632">
+        <rect width="276" height="48" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+export default SVGMasterPassByMasterCardBig;

package/src/components/checkout/components/master-pass/modal-otp/index.tsx

@@ -0,0 +1,202 @@
+import React, { useEffect, useRef, useState } from "react";
+import { observer } from "mobx-react-lite";
+
+import Modal from "../modal";
+
+import SVGMasterPass from "./svg/master-pass";
+
+import styles from "./style.module.scss";
+import { useTranslation } from "../../../../../utils/i18n";
+import CheckoutViewModel from "../../../model";
+import { Button } from "../../button";
+import { FormItem } from "../../form-item";
+import { FormItemType } from "../../form-item/model";
+
+export type OtpModalType = "bankOtp" | "masterPassOtp";
+
+const COUNTDOWN_TIME = 180; // second
+
+const MasterPassOtpModal: React.FC<{
+  visible: boolean;
+  type: OtpModalType;
+  vm: CheckoutViewModel;
+  onClose: () => void;
+}> = observer(({ visible, type, vm, onClose }) => {
+  const { t } = useTranslation();
+  const intervalId = useRef<NodeJS.Timeout | undefined>();
+  const [remainingTime, setRemainingTime] = useState<number>(180);
+  const [validationCode, setValidationCode] = useState("");
+  const [isResendOtpButtonPending, setResendOtpButtonPending] = useState(false);
+  const [isFormButtonLoading, setFormButtonLoading] = useState(false);
+
+  const onValidationCodeInputChange = (value: string) => {
+    setValidationCode(value);
+  };
+
+  const validationCodeInputRightContent = () => (
+    <button
+      type="button"
+      className={styles.ResendButton}
+      disabled={isResendOtpButtonPending}
+      onClick={(event) => {
+        event.stopPropagation();
+        if (isResendOtpButtonPending) return;
+        const callback = () => {
+          setResendOtpButtonPending(false);
+          resetCountdown();
+          setValidationCode("");
+        };
+        setResendOtpButtonPending(true);
+        vm.mpVM.resendOtp({
+          store: vm.store,
+          checkout: vm.checkout,
+          callback,
+        });
+      }}
+    >
+      {t("checkout-page:masterPass.otpModal.resendText")}
+    </button>
+  );
+
+  const onModalContentFormSubmit = () => {
+    if (isFormButtonLoading) return;
+    if (!validationCode) return;
+    if (!vm.checkout.masterPassPaymentGateway) return;
+    const callback = () => {
+      setFormButtonLoading(false);
+      setValidationCode("");
+      stopCountdown();
+    };
+
+    setFormButtonLoading(true);
+    vm.mpVM.onOtpFormSubmit({
+      validationCode,
+      store: vm.store,
+      checkout: vm.checkout,
+      callback,
+    });
+  };
+
+  const stopCountdown = () => {
+    setRemainingTime(0);
+  };
+
+  const startCountdown = () => {
+    setRemainingTime(COUNTDOWN_TIME);
+  };
+
+  const resetCountdown = () => {
+    setRemainingTime(COUNTDOWN_TIME);
+  };
+
+  const countdownText = () => {
+    // let hours = Math.floor(timeLeft / (60 * 60));
+    let divisor_for_minutes = remainingTime % (60 * 60);
+    let minutes = Math.floor(divisor_for_minutes / 60);
+    let divisor_for_seconds = divisor_for_minutes % 60;
+    let seconds = Math.ceil(divisor_for_seconds);
+    // if (hours < 10) hours = `0${hours}`;
+    const minutesStr = minutes < 10 ? `0${minutes}` : minutes;
+    const secondsStr = seconds < 10 ? `0${seconds}` : seconds;
+    return `${minutesStr}:${secondsStr}`;
+  };
+
+  useEffect(() => {
+    if (remainingTime < 1 && intervalId.current) {
+      clearInterval(intervalId.current);
+      return;
+    }
+    if (intervalId.current) {
+      clearInterval(intervalId.current);
+    }
+    intervalId.current = setInterval(() => {
+      setRemainingTime(remainingTime - 1);
+    }, 1000);
+
+    return () => {
+      intervalId.current && clearInterval(intervalId.current);
+    };
+  }, [remainingTime]);
+
+  const isRemainingTimeLessThanTwoMinute = remainingTime <= 120;
+
+  const modalContent = (
+    <div>
+      <div className={styles.Wrapper}>
+        {type === "masterPassOtp" && (
+          <span data-mr className={styles.Logo}>
+            <SVGMasterPass />
+          </span>
+        )}
+        <p className={styles.Text}>
+          {type === "masterPassOtp"
+            ? t("checkout-page:masterPass.otpModal.otpTextMasterPass")
+            : t("checkout-page:masterPass.otpModal.otpTextBank")}
+        </p>
+      </div>
+      <div className={styles.Countdown}>
+        {t("checkout-page:masterPass.otpModal.countdownText")}
+        <strong>{countdownText()}</strong>
+      </div>
+      {vm.mpVM.otpResponse.text && (
+        <div
+          role={vm.mpVM.otpResponse.status === "error" ? "alert" : ""}
+          className={styles.OtpResponseText}
+        >
+          {vm.mpVM.otpResponse.text}
+        </div>
+      )}
+      <form
+        onSubmit={(event) => {
+          event.preventDefault();
+          onModalContentFormSubmit();
+        }}
+      >
+        <FormItem
+          type={FormItemType.TEXT}
+          label={t("checkout-page:masterPass.otpModal.inputLabel")}
+          name="one-time-code"
+          autocomplete="off"
+          rightContent={
+            vm.mpVM.isOtpFormSubmitAtLeastOnce &&
+            isRemainingTimeLessThanTwoMinute
+              ? validationCodeInputRightContent()
+              : undefined
+          }
+          value={validationCode}
+          onChange={onValidationCodeInputChange}
+        />
+        <Button
+          type="submit"
+          style={{ width: "100%", marginTop: "16px" }}
+          text={t("checkout-page:masterPass.otpModal.buttonText")}
+          isLoading={isFormButtonLoading}
+          isDisabled={!validationCode}
+          onClick={onModalContentFormSubmit}
+        />
+      </form>
+    </div>
+  );
+
+  useEffect(() => {
+    if (visible) {
+      startCountdown();
+    } else {
+      stopCountdown();
+    }
+  }, [visible]);
+
+  useEffect(() => {
+    startCountdown();
+  }, [type]);
+
+  console.log("calisti modal", visible);
+
+  return (
+    <Modal visible={visible} onClose={onClose}>
+      {modalContent}
+    </Modal>
+  );
+});
+
+export default MasterPassOtpModal;