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

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

@@ -0,0 +1,47 @@
+@import "../../../styles/variables.scss";
+
+.Wrapper {
+  display: flex;
+  padding-right: 24px;
+}
+
+.Logo[data-mr] {
+  margin-right: 16px;
+}
+
+.Text {
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 600;
+}
+
+.Countdown {
+  color: $primaryTextColor;
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 600;
+  margin: 24px 0;
+  text-align: center;
+  strong {
+    font-size: 14px;
+  }
+}
+
+.OtpResponseText {
+  color: $primaryTextColor;
+  font-size: 14px;
+  line-height: 20px;
+  text-align: center;
+  margin-bottom: 24px;
+  &[data-role="error"] {
+    color: $errorColor;
+  }
+}
+
+.ResendButton {
+  height: 100%;
+  padding-right: 8px;
+  font-size: 14px;
+  color: $primaryTextColor;
+  text-decoration: underline;
+}

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

@@ -0,0 +1,28 @@
+import React from "react";
+
+const SVG = () => (
+  <svg
+    width="81"
+    height="48"
+    viewBox="0 0 81 48"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M24.678 48C38.3072 48 49.356 37.2548 49.356 24C49.356 10.7452 38.3072 0 24.678 0C11.0487 0 0 10.7452 0 24C0 37.2548 11.0487 48 24.678 48Z"
+      fill="#E61C24"
+    />
+    <path
+      d="M55.3235 48C68.9528 48 80.0015 37.2548 80.0015 24C80.0015 10.7452 68.9528 0 55.3235 0C41.6942 0 30.6455 10.7452 30.6455 24C30.6455 37.2548 41.6942 48 55.3235 48Z"
+      fill="#F99F1B"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M40.0015 5.20801C34.0923 9.75119 30.6455 16.6742 30.6455 24C30.6455 31.3258 34.0923 38.2488 40.0015 42.792C45.9107 38.2488 49.3574 31.3258 49.3574 24C49.3574 16.6742 45.9107 9.75119 40.0015 5.20801Z"
+      fill="#F26622"
+    />
+  </svg>
+);
+
+export default SVG;

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

@@ -0,0 +1,24 @@
+import React from "react";
+import { observer } from "mobx-react-lite";
+
+import Modal from "../modal";
+
+import styles from "./style.module.scss";
+
+type Props = {
+  visible: boolean;
+  text: string;
+  onClose: () => void;
+};
+
+const ModalResponse = observer(({ visible, text, onClose }: Props) => {
+  return (
+    <Modal visible={visible} onClose={onClose}>
+      <div>
+        <p className={styles.Text}>{text}</p>
+      </div>
+    </Modal>
+  );
+});
+
+export default ModalResponse;

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

@@ -0,0 +1,7 @@
+@import "../../../styles/variables.scss";
+
+.Text {
+  font-size: 14px;
+  color: $primaryTextColor;
+  padding-right: 24px;
+}

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

@@ -0,0 +1,54 @@
+import React from "react";
+import { observer } from "mobx-react-lite";
+
+import Modal from "../modal";
+
+import SVGSuccess from "./svg/success";
+import SVGMasterPassByMasterCardSmall from "./svg/master-pass-by-master-card-small";
+
+import styles from "./style.module.scss";
+import { useTranslation } from "../../../../../utils/i18n";
+
+export type SuccessModalType = "register" | "linkCardToClient";
+
+type Props = {
+  visible: boolean;
+  type: SuccessModalType;
+  onClose: () => void;
+};
+
+const ModalSuccess = observer(({ visible, type, onClose }: Props) => {
+  const { t } = useTranslation();
+
+  const content = (
+    <div className={styles.Wrapper}>
+      <span data-mr className={styles.Logo}>
+        <SVGSuccess />
+      </span>
+      <p className={styles.Text}>
+        {type === "linkCardToClient" &&
+          t(
+            "checkout-page:masterPass.successModal.linkCardToClientSuccessText"
+          )}
+        {type === "register" &&
+          t("checkout-page:masterPass.successModal.otpSuccessText")}
+      </p>
+    </div>
+  );
+
+  const footer = (
+    <footer className={styles.ModalFooter}>
+      <div>
+        <SVGMasterPassByMasterCardSmall />
+      </div>
+    </footer>
+  );
+
+  return (
+    <Modal visible={visible} footer={footer} onClose={onClose}>
+      {content}
+    </Modal>
+  );
+});
+
+export default ModalSuccess;

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

@@ -0,0 +1,25 @@
+@import "../../../styles/variables.scss";
+
+.Wrapper {
+  display: flex;
+  padding-right: 24px;
+  margin-bottom: 70px;
+}
+
+.Logo[data-mr] {
+  margin-right: 16px;
+}
+
+.Text {
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 600;
+}
+
+.ModalFooter {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 12px 0;
+  border-top: 1px solid $borderColor;
+}

package/src/components/checkout/components/master-pass/modal-success/svg/master-pass-by-master-card-small.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+
+const SVGMasterPassByMasterCardSmall = () => (
+  <svg
+    width="128"
+    height="22"
+    viewBox="0 0 128 22"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clip-path="url(#clip0_111_5133)">
+      <path
+        d="M11.0824 22.0055C17.203 22.0055 22.1648 17.0794 22.1648 11.0027C22.1648 4.9261 17.203 0 11.0824 0C4.96176 0 0 4.9261 0 11.0027C0 17.0794 4.96176 22.0055 11.0824 22.0055Z"
+        fill="#EB001B"
+      />
+      <path
+        d="M24.4691 22.0055C30.5898 22.0055 35.5515 17.0794 35.5515 11.0027C35.5515 4.9261 30.5898 0 24.4691 0C18.3485 0 13.3867 4.9261 13.3867 11.0027C13.3867 17.0794 18.3485 22.0055 24.4691 22.0055Z"
+        fill="#F79E1B"
+      />
+      <path
+        d="M17.7733 2.21582C20.4417 4.2233 22.1598 7.40455 22.1598 10.9807C22.1598 14.5569 20.4417 17.7436 17.7733 19.7511C15.1049 17.7436 13.3867 14.5624 13.3867 10.9807C13.3867 7.39907 15.1104 4.2233 17.7733 2.21582Z"
+        fill="#FF5F00"
+      />
+      <path
+        d="M34.8598 18.3086V18.4018H34.6554V18.9284H34.556V18.4018H34.3516V18.3086H34.8598ZM35.6388 18.3086V18.9284H35.5394V18.4183L35.357 18.8681H35.2466L35.0642 18.4238V18.9284H34.9648V18.3086H35.1195L35.3018 18.7529L35.4841 18.3086H35.6388V18.3086Z"
+        fill="#F79E1B"
+      />
+      <path
+        d="M127.227 11.3701V11.4634H127.022V11.9899H126.923V11.4634H126.718V11.3701H127.227ZM128 11.3701V11.9899H127.901V11.4798L127.718 11.9296H127.613L127.431 11.4853V11.9899H127.332V11.3701H127.486L127.669 11.8144L127.851 11.3701H128V11.3701ZM51.5117 4.40978C53.2077 4.40978 54.4066 5.56709 54.4066 7.22354V11.6663H52.8431V7.73364C52.8431 6.54341 52.2243 5.87973 51.1857 5.87973C50.1802 5.87973 49.3405 6.53792 49.3405 7.75009V11.6718H47.777V7.73912C47.777 6.54889 47.1583 5.88522 46.1196 5.88522C45.1142 5.88522 44.2744 6.54341 44.2744 7.75557V11.6773H42.7109V4.60175H44.2578V5.46288C44.8324 4.62917 45.7163 4.41526 46.4456 4.41526C47.5339 4.41526 48.4179 4.89245 48.9096 5.67679C49.5283 4.6566 50.6277 4.40978 51.5117 4.40978ZM63.478 4.59078V11.6663H61.9256V10.8162C61.4339 11.4414 60.6991 11.8473 59.6881 11.8473C57.6937 11.8473 56.1247 10.2896 56.1247 8.12855C56.1247 5.96749 57.6937 4.40978 59.6881 4.40978C60.6991 4.40978 61.4339 4.82114 61.9256 5.45191V4.59078H63.478ZM59.8704 5.86328C58.5335 5.86328 57.7214 6.88896 57.7214 8.12855C57.7214 9.36814 58.5335 10.3938 59.8704 10.3938C61.1577 10.3938 62.0195 9.4175 62.0195 8.12855C62.0195 6.83959 61.1577 5.86328 59.8704 5.86328ZM71.3009 5.16121L70.6324 6.36241C70.2015 6.09913 69.3175 5.75907 68.4336 5.75907C67.5883 5.75907 67.0856 6.09913 67.0856 6.59826C67.0856 7.0919 67.6049 7.23451 68.2623 7.32775L68.9971 7.43745C70.5495 7.65685 71.4721 8.31504 71.4721 9.5272C71.4721 10.8875 70.2843 11.8364 68.2292 11.8364C67.4944 11.8364 66.2127 11.6937 65.1741 10.9259L65.8978 9.76854C66.4116 10.158 67.0856 10.4925 68.2458 10.4925C69.3065 10.4925 69.8645 10.158 69.8645 9.63142C69.8645 9.23102 69.4778 8.96774 68.6325 8.84707L67.8867 8.75383C66.3121 8.53992 65.4724 7.81591 65.4724 6.68053C65.4724 5.27639 66.6049 4.41526 68.417 4.41526C69.533 4.41526 70.5661 4.68951 71.3009 5.16121ZM78.0244 4.59078V5.99492H75.2952V9.07195C75.2952 10.0263 75.8034 10.3938 76.4277 10.3938C76.9084 10.3938 77.4387 10.1799 77.8641 9.91663L78.4829 11.1507C77.9083 11.5347 77.1901 11.8528 76.2951 11.8528C74.6819 11.8528 73.7372 10.9917 73.7372 9.10486V5.99492H72.3174V4.59078H73.7372V2.45166H75.3007V4.59078H78.0244ZM82.8197 4.40978C84.8141 4.40978 86.1787 5.91813 86.1897 8.12306C86.1897 8.32052 86.1732 8.52346 86.1621 8.69898H80.8972C81.1071 9.97148 82.0076 10.498 83.0186 10.498C83.7313 10.498 84.4937 10.2183 85.0793 9.75209L85.8527 10.8546C84.9854 11.595 84.002 11.8528 82.9247 11.8528C80.7922 11.8528 79.2784 10.3774 79.2784 8.13403C79.2729 5.91264 80.7259 4.40978 82.8197 4.40978ZM82.7921 5.781C81.6816 5.781 81.0684 6.48856 80.9027 7.52521H84.5987C84.4274 6.42274 83.781 5.781 82.7921 5.781ZM91.5873 4.40978C92.0624 4.40978 92.427 4.47011 92.7861 4.60723L92.416 6.13752C92.09 5.96749 91.6149 5.87973 91.2337 5.87973C90.2448 5.87973 89.5377 6.57632 89.5377 7.77751V11.6663H87.9852V4.59078H89.5266V5.38609C89.9907 4.71693 90.7199 4.40978 91.5873 4.40978ZM98.0235 4.40978C100.018 4.40978 101.587 5.96749 101.587 8.12855C101.587 10.2896 100.018 11.8473 98.0235 11.8473C97.0125 11.8473 96.2832 11.4414 95.7915 10.8216V14.6172H94.2391V4.59078H95.7915V5.42997C96.2832 4.81566 97.0125 4.40978 98.0235 4.40978ZM97.8357 5.86328C96.5484 5.86328 95.6866 6.83959 95.6866 8.12855C95.6866 9.4175 96.5484 10.3938 97.8357 10.3938C99.1726 10.3938 99.9847 9.36814 99.9847 8.12855C99.9847 6.88896 99.1726 5.86328 97.8357 5.86328ZM110.216 4.59078V11.6663H108.664V10.8162C108.172 11.4414 107.437 11.8473 106.426 11.8473C104.432 11.8473 102.863 10.2896 102.863 8.12855C102.863 5.96749 104.432 4.40978 106.426 4.40978C107.437 4.40978 108.172 4.82114 108.664 5.45191V4.59078H110.216ZM106.609 5.86328C105.272 5.86328 104.46 6.88896 104.46 8.12855C104.46 9.36814 105.272 10.3938 106.609 10.3938C107.896 10.3938 108.758 9.4175 108.758 8.12855C108.758 6.83959 107.896 5.86328 106.609 5.86328ZM118.039 5.16121L117.371 6.36241C116.94 6.09913 116.056 5.75907 115.172 5.75907C114.327 5.75907 113.824 6.09913 113.824 6.59826C113.824 7.0919 114.343 7.23451 115.001 7.32775L115.735 7.43745C117.288 7.65685 118.21 8.31504 118.21 9.5272C118.21 10.8875 117.023 11.8364 114.968 11.8364C114.233 11.8364 112.951 11.6937 111.912 10.9259L112.636 9.76854C113.15 10.158 113.824 10.4925 114.984 10.4925C116.045 10.4925 116.603 10.158 116.603 9.63142C116.603 9.23102 116.216 8.96774 115.371 8.84707L114.625 8.75383C113.05 8.53992 112.211 7.81591 112.211 6.68053C112.211 5.27639 113.343 4.41526 115.155 4.41526C116.271 4.41526 117.304 4.68951 118.039 5.16121ZM125.426 5.16121L124.757 6.36241C124.326 6.09913 123.442 5.75907 122.558 5.75907C121.713 5.75907 121.21 6.09913 121.21 6.59826C121.21 7.0919 121.73 7.23451 122.387 7.32775L123.122 7.43745C124.674 7.65685 125.597 8.31504 125.597 9.5272C125.597 10.8875 124.409 11.8364 122.354 11.8364C121.619 11.8364 120.337 11.6937 119.299 10.9259L120.023 9.76854C120.536 10.158 121.21 10.4925 122.371 10.4925C123.431 10.4925 123.989 10.158 123.989 9.63142C123.989 9.23102 123.603 8.96774 122.757 8.84707L122.011 8.75383C120.437 8.53992 119.597 7.81591 119.597 6.68053C119.597 5.27639 120.73 4.41526 122.542 4.41526C123.658 4.41526 124.691 4.68951 125.426 5.16121ZM44.5948 15.4893C45.534 15.4893 46.2688 16.2188 46.2688 17.239C46.2688 18.2592 45.534 18.9887 44.5948 18.9887C44.1197 18.9887 43.7772 18.7967 43.5452 18.506V18.9009H42.8159V13.9042H43.5452V15.972C43.7717 15.6813 44.1197 15.4893 44.5948 15.4893ZM44.5064 16.1749C43.9043 16.1749 43.4954 16.6357 43.4954 17.239C43.4954 17.8423 43.8987 18.3031 44.5064 18.3031C45.1362 18.3031 45.5175 17.8204 45.5175 17.239C45.5175 16.6576 45.1362 16.1749 44.5064 16.1749ZM50.1581 15.5771L47.5118 20.3105H46.6997L47.8986 18.2208L46.418 15.5771H47.2356L48.3129 17.4858L49.3515 15.5771H50.1581ZM56.3844 15.4893C57.1799 15.4893 57.7434 16.0323 57.7434 16.8112V18.9009H57.0087V17.0525C57.0087 16.493 56.7159 16.1804 56.2297 16.1804C55.7601 16.1804 55.3623 16.4876 55.3623 17.058V18.9009H54.6276V17.0525C54.6276 16.493 54.3403 16.1804 53.8486 16.1804C53.379 16.1804 52.9812 16.4876 52.9812 17.058V18.9009H52.2464V15.5771H52.9757V15.983C53.2464 15.588 53.6607 15.4893 54.0033 15.4893C54.5115 15.4893 54.9314 15.7142 55.1579 16.0817C55.4507 15.61 55.97 15.4893 56.3844 15.4893ZM61.9366 15.5771V18.9009H61.2074V18.5005C60.9754 18.7967 60.6328 18.9887 60.1577 18.9887C59.2185 18.9887 58.4837 18.2592 58.4837 17.239C58.4837 16.2188 59.224 15.4893 60.1577 15.4893C60.6328 15.4893 60.9809 15.6813 61.2074 15.9775V15.5771H61.9366ZM60.2406 16.1749C59.6108 16.1749 59.2296 16.6576 59.2296 17.239C59.2296 17.8204 59.6108 18.3031 60.2406 18.3031C60.8428 18.3031 61.2516 17.8423 61.2516 17.239C61.2516 16.6302 60.8483 16.1749 60.2406 16.1749ZM65.5442 15.8458L65.2293 16.4108C65.0249 16.2846 64.6106 16.1256 64.1962 16.1256C63.7984 16.1256 63.5609 16.2846 63.5609 16.5205C63.5609 16.7508 63.804 16.8167 64.1133 16.866L64.4614 16.9209C65.1906 17.0251 65.6271 17.3322 65.6271 17.9027C65.6271 18.5389 65.0691 18.9887 64.1023 18.9887C63.7542 18.9887 63.1576 18.9229 62.6659 18.5609L63.0029 18.0179C63.246 18.2043 63.5609 18.3579 64.1078 18.3579C64.605 18.3579 64.8702 18.2043 64.8702 17.952C64.8702 17.7655 64.6879 17.6394 64.2901 17.5845L63.9421 17.5407C63.2018 17.4419 62.804 17.1019 62.804 16.5644C62.804 15.9062 63.3344 15.5003 64.1907 15.5003C64.71 15.4948 65.1962 15.6209 65.5442 15.8458ZM68.6325 15.5771V16.2353H67.3508V17.6833C67.3508 18.133 67.5883 18.3031 67.8811 18.3031C68.1076 18.3031 68.3563 18.2043 68.5551 18.0782L68.8424 18.6596C68.5717 18.8406 68.2347 18.9887 67.8148 18.9887C67.058 18.9887 66.6105 18.5828 66.6105 17.6997V16.2353H65.942V15.5771H66.6105V14.5733H67.3452V15.5771H68.6325ZM70.8147 15.4893C71.7539 15.4893 72.3948 16.1969 72.4003 17.2335C72.4003 17.3268 72.3948 17.42 72.3837 17.5023H69.9087C70.0081 18.1001 70.428 18.3469 70.9031 18.3469C71.2401 18.3469 71.5937 18.2153 71.8699 17.9959L72.2345 18.5115C71.8257 18.857 71.3616 18.9777 70.8589 18.9777C69.8534 18.9777 69.1463 18.2811 69.1463 17.228C69.1518 16.1969 69.8313 15.4893 70.8147 15.4893ZM70.8037 16.1365C70.2843 16.1365 69.9915 16.4711 69.9142 16.9538H71.6489C71.5716 16.4382 71.2677 16.1365 70.8037 16.1365ZM74.8643 15.4893C75.0852 15.4893 75.2565 15.5167 75.4278 15.5826L75.251 16.3011C75.0963 16.2188 74.8753 16.1804 74.693 16.1804C74.2289 16.1804 73.8975 16.504 73.8975 17.0744V18.9009H73.1682V15.5771H73.8919V15.95C74.1129 15.6374 74.4554 15.4893 74.8643 15.4893ZM77.4222 15.4893C77.9194 15.4893 78.3779 15.6703 78.6707 16.0213L78.2011 16.515C77.9691 16.2956 77.7205 16.1694 77.3945 16.1694C76.831 16.1694 76.4056 16.6082 76.4056 17.2335C76.4056 17.8588 76.831 18.2976 77.3945 18.2976C77.715 18.2976 78.0023 18.1495 78.2177 17.952L78.6707 18.4512C78.3669 18.8022 77.9194 18.9832 77.4222 18.9832C76.3559 18.9832 75.6598 18.2318 75.6598 17.2335C75.6598 16.2407 76.3559 15.4893 77.4222 15.4893ZM82.4993 15.5771V18.9009H81.77V18.5005C81.538 18.7967 81.1955 18.9887 80.7204 18.9887C79.7812 18.9887 79.0464 18.2592 79.0464 17.239C79.0464 16.2188 79.7812 15.4893 80.7204 15.4893C81.1955 15.4893 81.5435 15.6813 81.77 15.9775V15.5771H82.4993ZM80.8088 16.1749C80.1789 16.1749 79.7978 16.6576 79.7978 17.239C79.7978 17.8204 80.1789 18.3031 80.8088 18.3031C81.4109 18.3031 81.8198 17.8423 81.8198 17.239C81.8142 16.6302 81.4109 16.1749 80.8088 16.1749ZM85.2119 15.4893C85.4329 15.4893 85.6041 15.5167 85.7754 15.5826L85.5986 16.3011C85.4439 16.2188 85.2229 16.1804 85.0406 16.1804C84.5766 16.1804 84.2451 16.504 84.2451 17.0744V18.9009H83.5158V15.5771H84.2396V15.95C84.455 15.6374 84.7975 15.4893 85.2119 15.4893ZM87.814 15.4893C88.2891 15.4893 88.6372 15.6813 88.8637 15.9775V13.9042H89.5929V18.9009H88.8637V18.5005C88.6316 18.7967 88.2891 18.9887 87.814 18.9887C86.8748 18.9887 86.14 18.2592 86.14 17.239C86.14 16.2188 86.8803 15.4893 87.814 15.4893ZM87.9024 16.1749C87.2726 16.1749 86.8914 16.6576 86.8914 17.239C86.8914 17.8204 87.2726 18.3031 87.9024 18.3031C88.5046 18.3031 88.9134 17.8423 88.9134 17.239C88.9134 16.6302 88.5101 16.1749 87.9024 16.1749Z"
+        fill="black"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_111_5133">
+        <rect width="128" height="22" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+export default SVGMasterPassByMasterCardSmall;

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

@@ -0,0 +1,21 @@
+import React from "react";
+
+const SVG = () => (
+  <svg
+    width="48"
+    height="48"
+    viewBox="0 0 48 48"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle cx="24" cy="24" r="24" fill="#2DCA73" />
+    <path
+      d="M14.4004 23.9995L21.6004 31.1995L33.601 19.1992"
+      stroke="white"
+      stroke-width="4.48"
+      stroke-linecap="round"
+    />
+  </svg>
+);
+
+export default SVG;

package/src/components/checkout/components/master-pass/payment-gateway/svg/master-card.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+
+const SVGMasterCard = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="svg3409" x="0px" y="0px" width="36px" height="28px" viewBox="0 0 999.2 776" enable-background="new 0 0 999.2 776">
+  <path id="XMLID_1775_" inkscape:connector-curvature="0" d="M181.1,774.3v-51.5c0-19.7-12-32.6-32.6-32.6  c-10.3,0-21.5,3.4-29.2,14.6c-6-9.4-14.6-14.6-27.5-14.6c-8.6,0-17.2,2.6-24,12v-10.3h-18v82.4h18v-45.5c0-14.6,7.7-21.5,19.7-21.5  s18,7.7,18,21.5v45.5h18v-45.5c0-14.6,8.6-21.5,19.7-21.5c12,0,18,7.7,18,21.5v45.5H181.1z M448.1,691.9h-29.2V667h-18v24.9h-16.3  v16.3h16.3v37.8c0,18.9,7.7,30,28.3,30c7.7,0,16.3-2.6,22.3-6l-5.2-15.5c-5.2,3.4-11.2,4.3-15.5,4.3c-8.6,0-12-5.2-12-13.7v-36.9  h29.2V691.9z M600.9,690.1c-10.3,0-17.2,5.2-21.5,12v-10.3h-18v82.4h18v-46.4c0-13.7,6-21.5,17.2-21.5c3.4,0,7.7,0.9,11.2,1.7  l5.2-17.2C609.4,690.1,604.3,690.1,600.9,690.1L600.9,690.1z M370,698.7c-8.6-6-20.6-8.6-33.5-8.6c-20.6,0-34.3,10.3-34.3,26.6  c0,13.7,10.3,21.5,28.3,24l8.6,0.9c9.4,1.7,14.6,4.3,14.6,8.6c0,6-6.9,10.3-18.9,10.3c-12,0-21.5-4.3-27.5-8.6l-8.6,13.7  c9.4,6.9,22.3,10.3,35.2,10.3c24,0,37.8-11.2,37.8-26.6c0-14.6-11.2-22.3-28.3-24.9l-8.6-0.9c-7.7-0.9-13.7-2.6-13.7-7.7  c0-6,6-9.4,15.5-9.4c10.3,0,20.6,4.3,25.8,6.9L370,698.7L370,698.7z M848.9,690.1c-10.3,0-17.2,5.2-21.5,12v-10.3h-18v82.4h18v-46.4  c0-13.7,6-21.5,17.2-21.5c3.4,0,7.7,0.9,11.2,1.7L861,691C857.5,690.1,852.4,690.1,848.9,690.1L848.9,690.1z M618.9,733.1  c0,24.9,17.2,42.9,43.8,42.9c12,0,20.6-2.6,29.2-9.4l-8.6-14.6c-6.9,5.2-13.7,7.7-21.5,7.7c-14.6,0-24.9-10.3-24.9-26.6  c0-15.5,10.3-25.8,24.9-26.6c7.7,0,14.6,2.6,21.5,7.7l8.6-14.6c-8.6-6.9-17.2-9.4-29.2-9.4C636.1,690.1,618.9,708.2,618.9,733.1  L618.9,733.1L618.9,733.1z M785.4,733.1v-41.2h-18v10.3c-6-7.7-14.6-12-25.8-12c-23.2,0-41.2,18-41.2,42.9c0,24.9,18,42.9,41.2,42.9  c12,0,20.6-4.3,25.8-12v10.3h18V733.1L785.4,733.1z M719.3,733.1c0-14.6,9.4-26.6,24.9-26.6c14.6,0,24.9,11.2,24.9,26.6  c0,14.6-10.3,26.6-24.9,26.6C728.8,758.8,719.3,747.6,719.3,733.1L719.3,733.1z M503.9,690.1c-24,0-41.2,17.2-41.2,42.9  c0,25.8,17.2,42.9,42.1,42.9c12,0,24-3.4,33.5-11.2l-8.6-12.9c-6.9,5.2-15.5,8.6-24,8.6c-11.2,0-22.3-5.2-24.9-19.7h60.9  c0-2.6,0-4.3,0-6.9C542.5,707.3,527,690.1,503.9,690.1L503.9,690.1L503.9,690.1z M503.9,705.6c11.2,0,18.9,6.9,20.6,19.7h-42.9  C483.3,714.2,491,705.6,503.9,705.6L503.9,705.6z M951.1,733.1v-73.8h-18v42.9c-6-7.7-14.6-12-25.8-12c-23.2,0-41.2,18-41.2,42.9  c0,24.9,18,42.9,41.2,42.9c12,0,20.6-4.3,25.8-12v10.3h18V733.1L951.1,733.1z M885,733.1c0-14.6,9.4-26.6,24.9-26.6  c14.6,0,24.9,11.2,24.9,26.6c0,14.6-10.3,26.6-24.9,26.6C894.4,758.8,885,747.6,885,733.1L885,733.1z M282.4,733.1v-41.2h-18v10.3  c-6-7.7-14.6-12-25.8-12c-23.2,0-41.2,18-41.2,42.9c0,24.9,18,42.9,41.2,42.9c12,0,20.6-4.3,25.8-12v10.3h18V733.1L282.4,733.1z   M215.5,733.1c0-14.6,9.4-26.6,24.9-26.6c14.6,0,24.9,11.2,24.9,26.6c0,14.6-10.3,26.6-24.9,26.6  C224.9,758.8,215.5,747.6,215.5,733.1z"/>
+  <g>
+    <rect id="rect19" x="364" y="66.1" fill="#FF5A00" width="270.4" height="485.8"/>
+    <path id="XMLID_330_" inkscape:connector-curvature="0" fill="#EB001B" d="M382,309c0-98.7,46.4-186.3,117.6-242.9   C447.2,24.9,381.1,0,309,0C138.2,0,0,138.2,0,309s138.2,309,309,309c72.1,0,138.2-24.9,190.6-66.1C428.3,496.1,382,407.7,382,309z"/>
+    <path id="path22" inkscape:connector-curvature="0" fill="#F79E1B" d="M999.2,309c0,170.8-138.2,309-309,309   c-72.1,0-138.2-24.9-190.6-66.1c72.1-56.7,117.6-144.2,117.6-242.9S570.8,122.7,499.6,66.1C551.9,24.9,618,0,690.1,0   C861,0,999.2,139.1,999.2,309z"/>
+  </g>
+  </svg>
+);
+
+export default SVGMasterCard;

package/src/components/checkout/components/master-pass/svg/master-pass-by-master-card.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+
+const SVGMasterPassByMasterCard: React.FC = () => (
+  <svg
+    width="89"
+    height="16"
+    viewBox="0 0 89 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M7.61913 15.6541C11.8271 15.6541 15.2383 12.2272 15.2383 8.00001C15.2383 3.77279 11.8271 0.345947 7.61913 0.345947C3.4112 0.345947 0 3.77279 0 8.00001C0 12.2272 3.4112 15.6541 7.61913 15.6541Z"
+      fill="#EB001B"
+    />
+    <path
+      d="M16.8222 15.6541C21.0302 15.6541 24.4414 12.2272 24.4414 8.00001C24.4414 3.77279 21.0302 0.345947 16.8222 0.345947C12.6143 0.345947 9.20312 3.77279 9.20312 8.00001C9.20312 12.2272 12.6143 15.6541 16.8222 15.6541Z"
+      fill="#F79E1B"
+    />
+    <path
+      d="M12.2189 1.88745C14.0534 3.28395 15.2346 5.49699 15.2346 7.98475C15.2346 10.4725 14.0534 12.6894 12.2189 14.0859C10.3844 12.6894 9.20312 10.4763 9.20312 7.98475C9.20312 5.49318 10.3882 3.28395 12.2189 1.88745Z"
+      fill="#FF5F00"
+    />
+    <path
+      d="M23.9646 13.0824V13.1472H23.8241V13.5134H23.7557V13.1472H23.6152V13.0824H23.9646ZM24.5 13.0824V13.5134H24.4316V13.1587L24.3063 13.4715H24.2304L24.1051 13.1625V13.5134H24.0367V13.0824H24.143L24.2683 13.3914L24.3937 13.0824H24.5Z"
+      fill="#F79E1B"
+    />
+    <path
+      d="M87.4696 8.25565V8.32052H87.3291V8.68681H87.2607V8.32052H87.1202V8.25565H87.4696ZM88.0014 8.25565V8.68681H87.933V8.33196L87.8077 8.64484H87.7355L87.6102 8.33578V8.68681H87.5418V8.25565H87.6482L87.7735 8.56471L87.8988 8.25565H88.0014ZM35.4157 3.41368C36.5818 3.41368 37.406 4.21876 37.406 5.37107V8.46169H36.3311V5.72592C36.3311 4.89794 35.9057 4.43625 35.1916 4.43625C34.5004 4.43625 33.923 4.89412 33.923 5.73737V8.46551H32.8482V5.72974C32.8482 4.90175 32.4228 4.44007 31.7087 4.44007C31.0174 4.44007 30.4401 4.89794 30.4401 5.74118V8.46932H29.3652V3.54722H30.4287V4.14627C30.8237 3.5663 31.4314 3.41749 31.9328 3.41749C32.681 3.41749 33.2887 3.74945 33.6268 4.29508C34.0522 3.58538 34.808 3.41368 35.4157 3.41368ZM43.6426 3.53959V8.46169H42.5753V7.87028C42.2372 8.30525 41.7321 8.58761 41.037 8.58761C39.6659 8.58761 38.5872 7.50398 38.5872 6.00064C38.5872 4.4973 39.6659 3.41368 41.037 3.41368C41.7321 3.41368 42.2372 3.69985 42.5753 4.13864V3.53959H43.6426ZM41.1623 4.42481C40.2432 4.42481 39.6849 5.13832 39.6849 6.00064C39.6849 6.86296 40.2432 7.57648 41.1623 7.57648C42.0473 7.57648 42.6398 6.8973 42.6398 6.00064C42.6398 5.10398 42.0473 4.42481 41.1623 4.42481ZM49.0208 3.93641L48.5612 4.77202C48.2649 4.58888 47.6572 4.35231 47.0495 4.35231C46.4684 4.35231 46.1228 4.58888 46.1228 4.93609C46.1228 5.2795 46.4798 5.3787 46.9318 5.44357L47.4369 5.51988C48.5042 5.6725 49.1385 6.13037 49.1385 6.97362C49.1385 7.91988 48.3219 8.57998 46.909 8.57998C46.4038 8.57998 45.5226 8.48077 44.8086 7.94659L45.3062 7.1415C45.6594 7.41241 46.1228 7.64516 46.9204 7.64516C47.6496 7.64516 48.0332 7.41241 48.0332 7.04611C48.0332 6.76757 47.7674 6.58443 47.1862 6.50048L46.6735 6.43562C45.591 6.28681 45.0137 5.78315 45.0137 4.99333C45.0137 4.01654 45.7923 3.41749 47.0381 3.41749C47.8053 3.41749 48.5156 3.60827 49.0208 3.93641ZM53.6431 3.53959V4.51638H51.7668V6.65692C51.7668 7.32083 52.1163 7.57648 52.5455 7.57648C52.8759 7.57648 53.2405 7.42767 53.533 7.24452L53.9584 8.10303C53.5634 8.37012 53.0696 8.59142 52.4543 8.59142C51.3452 8.59142 50.6958 7.99238 50.6958 6.67982V4.51638H49.7196V3.53959H50.6958V2.05151H51.7706V3.53959H53.6431ZM56.9399 3.41368C58.3111 3.41368 59.2492 4.46296 59.2568 5.99683C59.2568 6.13419 59.2454 6.27536 59.2378 6.39746H55.6182C55.7625 7.28268 56.3816 7.64897 57.0767 7.64897C57.5666 7.64897 58.0908 7.45438 58.4934 7.13005L59.0251 7.89699C58.4288 8.41209 57.7528 8.59142 57.0121 8.59142C55.546 8.59142 54.5053 7.56503 54.5053 6.00446C54.5015 4.45915 55.5004 3.41368 56.9399 3.41368ZM56.921 4.36757C56.1575 4.36757 55.7359 4.85978 55.622 5.58093H58.163C58.0452 4.814 57.6008 4.36757 56.921 4.36757ZM62.9676 3.41368C63.2943 3.41368 63.545 3.45565 63.7918 3.55104L63.5374 4.61559C63.3133 4.4973 62.9866 4.43625 62.7246 4.43625C62.0447 4.43625 61.5585 4.92083 61.5585 5.75645V8.46169H60.4912V3.53959H61.5509V4.09285C61.87 3.62735 62.3713 3.41368 62.9676 3.41368ZM67.3925 3.41368C68.7636 3.41368 69.8423 4.4973 69.8423 6.00064C69.8423 7.50398 68.7636 8.58761 67.3925 8.58761C66.6974 8.58761 66.1961 8.30525 65.8581 7.87409V10.5145H64.7908V3.53959H65.8581V4.12338C66.1961 3.69603 66.6974 3.41368 67.3925 3.41368ZM67.2634 4.42481C66.3784 4.42481 65.7859 5.10398 65.7859 6.00064C65.7859 6.8973 66.3784 7.57648 67.2634 7.57648C68.1825 7.57648 68.7409 6.86296 68.7409 6.00064C68.7409 5.13832 68.1825 4.42481 67.2634 4.42481ZM75.7751 3.53959V8.46169H74.7078V7.87028C74.3697 8.30525 73.8646 8.58761 73.1695 8.58761C71.7984 8.58761 70.7197 7.50398 70.7197 6.00064C70.7197 4.4973 71.7984 3.41368 73.1695 3.41368C73.8646 3.41368 74.3697 3.69985 74.7078 4.13864V3.53959H75.7751ZM73.2949 4.42481C72.3757 4.42481 71.8174 5.13832 71.8174 6.00064C71.8174 6.86296 72.3757 7.57648 73.2949 7.57648C74.1798 7.57648 74.7724 6.8973 74.7724 6.00064C74.7724 5.10398 74.1798 4.42481 73.2949 4.42481ZM81.1533 3.93641L80.6937 4.77202C80.3974 4.58888 79.7897 4.35231 79.182 4.35231C78.6009 4.35231 78.2553 4.58888 78.2553 4.93609C78.2553 5.2795 78.6123 5.3787 79.0643 5.44357L79.5694 5.51988C80.6367 5.6725 81.271 6.13037 81.271 6.97362C81.271 7.91988 80.4544 8.57998 79.0415 8.57998C78.5363 8.57998 77.6552 8.48077 76.9411 7.94659L77.4387 7.1415C77.7919 7.41241 78.2553 7.64516 79.0529 7.64516C79.7821 7.64516 80.1658 7.41241 80.1658 7.04611C80.1658 6.76757 79.8999 6.58443 79.3188 6.50048L78.806 6.43562C77.7235 6.28681 77.1462 5.78315 77.1462 4.99333C77.1462 4.01654 77.9248 3.41749 79.1706 3.41749C79.9379 3.41749 80.6481 3.60827 81.1533 3.93641ZM86.2314 3.93641L85.7719 4.77202C85.4756 4.58888 84.8679 4.35231 84.2602 4.35231C83.6791 4.35231 83.3334 4.58888 83.3334 4.93609C83.3334 5.2795 83.6905 5.3787 84.1424 5.44357L84.6476 5.51988C85.7149 5.6725 86.3492 6.13037 86.3492 6.97362C86.3492 7.91988 85.5326 8.57998 84.1196 8.57998C83.6145 8.57998 82.7333 8.48077 82.0193 7.94659L82.5168 7.1415C82.8701 7.41241 83.3334 7.64516 84.131 7.64516C84.8603 7.64516 85.2439 7.41241 85.2439 7.04611C85.2439 6.76757 84.978 6.58443 84.3969 6.50048L83.8842 6.43562C82.8017 6.28681 82.2244 5.78315 82.2244 4.99333C82.2244 4.01654 83.003 3.41749 84.2488 3.41749C85.016 3.41749 85.7263 3.60827 86.2314 3.93641ZM30.6604 11.1212C31.3061 11.1212 31.8113 11.6286 31.8113 12.3383C31.8113 13.048 31.3061 13.5555 30.6604 13.5555C30.3338 13.5555 30.0983 13.422 29.9388 13.2197V13.4944H29.4374V10.0185H29.9388V11.4569C30.0945 11.2547 30.3338 11.1212 30.6604 11.1212ZM30.5996 11.5981C30.1856 11.5981 29.9046 11.9186 29.9046 12.3383C29.9046 12.758 30.1818 13.0785 30.5996 13.0785C31.0326 13.0785 31.2947 12.7428 31.2947 12.3383C31.2947 11.9339 31.0326 11.5981 30.5996 11.5981ZM34.4852 11.1822L32.6658 14.4751H32.1075L32.9317 13.0213L31.9138 11.1822H32.4759L33.2166 12.51L33.9306 11.1822H34.4852ZM38.7657 11.1212C39.3126 11.1212 39.7001 11.4989 39.7001 12.0407V13.4944H39.1949V12.2086C39.1949 11.8194 38.9936 11.6019 38.6594 11.6019C38.3365 11.6019 38.063 11.8156 38.063 12.2124V13.4944H37.5579V12.2086C37.5579 11.8194 37.3604 11.6019 37.0223 11.6019C36.6995 11.6019 36.426 11.8156 36.426 12.2124V13.4944H35.9209V11.1822H36.4222V11.4646C36.6083 11.1898 36.8932 11.1212 37.1287 11.1212C37.4781 11.1212 37.7668 11.2776 37.9225 11.5332C38.1238 11.2051 38.4808 11.1212 38.7657 11.1212ZM42.5829 11.1822V13.4944H42.0815V13.2159C41.922 13.422 41.6865 13.5555 41.3599 13.5555C40.7142 13.5555 40.209 13.048 40.209 12.3383C40.209 11.6286 40.718 11.1212 41.3599 11.1212C41.6865 11.1212 41.9258 11.2547 42.0815 11.4607V11.1822H42.5829ZM41.4168 11.5981C40.9838 11.5981 40.7218 11.9339 40.7218 12.3383C40.7218 12.7428 40.9838 13.0785 41.4168 13.0785C41.8308 13.0785 42.1119 12.758 42.1119 12.3383C42.1119 11.9148 41.8346 11.5981 41.4168 11.5981ZM45.0631 11.3692L44.8466 11.7622C44.706 11.6744 44.4212 11.5638 44.1363 11.5638C43.8628 11.5638 43.6995 11.6744 43.6995 11.8385C43.6995 11.9987 43.8666 12.0445 44.0793 12.0789L44.3186 12.117C44.82 12.1895 45.12 12.4032 45.12 12.8C45.12 13.2426 44.7364 13.5555 44.0717 13.5555C43.8325 13.5555 43.4223 13.5097 43.0842 13.2579L43.3159 12.8801C43.483 13.0099 43.6995 13.1167 44.0755 13.1167C44.4174 13.1167 44.5997 13.0099 44.5997 12.8344C44.5997 12.7046 44.4744 12.6169 44.2009 12.5787L43.9616 12.5482C43.4526 12.4795 43.1792 12.2429 43.1792 11.869C43.1792 11.4111 43.5438 11.1288 44.1325 11.1288C44.4895 11.125 44.8238 11.2127 45.0631 11.3692ZM47.1862 11.1822V11.6401H46.3051V12.6474C46.3051 12.9603 46.4684 13.0785 46.6697 13.0785C46.8254 13.0785 46.9963 13.0099 47.1331 12.9221L47.3306 13.3266C47.1445 13.4525 46.9128 13.5555 46.6241 13.5555C46.1038 13.5555 45.7961 13.2731 45.7961 12.6588V11.6401H45.3365V11.1822H45.7961V10.484H46.3013V11.1822H47.1862ZM48.6865 11.1212C49.3322 11.1212 49.7728 11.6134 49.7766 12.3345C49.7766 12.3994 49.7728 12.4642 49.7652 12.5215H48.0636C48.132 12.9374 48.4207 13.1091 48.7473 13.1091C48.979 13.1091 49.2221 13.0175 49.412 12.8649L49.6627 13.2235C49.3816 13.4639 49.0625 13.5479 48.7169 13.5479C48.0256 13.5479 47.5395 13.0633 47.5395 12.3307C47.5433 11.6134 48.0105 11.1212 48.6865 11.1212ZM48.6789 11.5714C48.3219 11.5714 48.1206 11.8041 48.0674 12.1399H49.26C49.2069 11.7812 48.998 11.5714 48.6789 11.5714ZM51.4706 11.1212C51.6225 11.1212 51.7403 11.1402 51.858 11.186L51.7365 11.6859C51.6301 11.6286 51.4782 11.6019 51.3528 11.6019C51.0338 11.6019 50.8059 11.827 50.8059 12.2239V13.4944H50.3045V11.1822H50.8021V11.4417C50.954 11.2242 51.1895 11.1212 51.4706 11.1212ZM53.2291 11.1212C53.571 11.1212 53.8862 11.2471 54.0875 11.4913L53.7647 11.8347C53.6052 11.682 53.4342 11.5943 53.2101 11.5943C52.8227 11.5943 52.5303 11.8995 52.5303 12.3345C52.5303 12.7695 52.8227 13.0747 53.2101 13.0747C53.4304 13.0747 53.6279 12.9717 53.7761 12.8344L54.0875 13.1816C53.8786 13.4258 53.571 13.5517 53.2291 13.5517C52.4961 13.5517 52.0175 13.0289 52.0175 12.3345C52.0175 11.6439 52.4961 11.1212 53.2291 11.1212ZM56.7197 11.1822V13.4944H56.2183V13.2159C56.0588 13.422 55.8233 13.5555 55.4966 13.5555C54.851 13.5555 54.3458 13.048 54.3458 12.3383C54.3458 11.6286 54.851 11.1212 55.4966 11.1212C55.8233 11.1212 56.0626 11.2547 56.2183 11.4607V11.1822H56.7197ZM55.5574 11.5981C55.1244 11.5981 54.8623 11.9339 54.8623 12.3383C54.8623 12.7428 55.1244 13.0785 55.5574 13.0785C55.9714 13.0785 56.2525 12.758 56.2525 12.3383C56.2487 11.9148 55.9714 11.5981 55.5574 11.5981ZM58.5846 11.1212C58.7365 11.1212 58.8542 11.1402 58.972 11.186L58.8504 11.6859C58.7441 11.6286 58.5922 11.6019 58.4668 11.6019C58.1478 11.6019 57.9199 11.827 57.9199 12.2239V13.4944H57.4185V11.1822H57.9161V11.4417C58.0642 11.2242 58.2997 11.1212 58.5846 11.1212ZM60.3735 11.1212C60.7001 11.1212 60.9394 11.2547 61.0951 11.4607V10.0185H61.5965V13.4944H61.0951V13.2159C60.9356 13.422 60.7001 13.5555 60.3735 13.5555C59.7278 13.5555 59.2226 13.048 59.2226 12.3383C59.2226 11.6286 59.7316 11.1212 60.3735 11.1212ZM60.4343 11.5981C60.0013 11.5981 59.7392 11.9339 59.7392 12.3383C59.7392 12.7428 60.0013 13.0785 60.4343 13.0785C60.8483 13.0785 61.1293 12.758 61.1293 12.3383C61.1293 11.9148 60.8521 11.5981 60.4343 11.5981Z"
+      fill="black"
+    />
+  </svg>
+);
+
+export default SVGMasterPassByMasterCard;

package/src/components/checkout/components/modal/index.tsx

@@ -0,0 +1,41 @@
+import * as React from "react";
+import { observer } from "mobx-react-lite";
+
+import useEscape from "./useEscape";
+
+import SVGCross from "../svg/cross";
+
+import styles from "./style.module.scss";
+
+type Props = {
+  title: string;
+  modalContent: string | React.ReactElement;
+  onClose: () => void;
+};
+
+export const Modal: React.FC<Props> = observer(
+  ({ title, onClose, modalContent }) => {
+    useEscape({ callback: onClose });
+
+    return (
+      <div className={styles.ModalContainer} onClick={onClose}>
+        <div className={styles.Modal} onClick={(e) => e.stopPropagation()}>
+          <div className={styles.ModalHeader}>
+            <div className={styles.ModalTitle}>{title}</div>
+            <div className={styles.CloseButton} onClick={onClose}>
+              <SVGCross />
+            </div>
+          </div>
+          {typeof modalContent === "string" ? (
+            <div
+              className={styles.ModalContent}
+              dangerouslySetInnerHTML={{ __html: modalContent }}
+            ></div>
+          ) : (
+            <div className={styles.ModalContent}>{modalContent}</div>
+          )}
+        </div>
+      </div>
+    );
+  }
+);

package/src/components/checkout/components/modal/style.module.scss

@@ -0,0 +1,68 @@
+@import "../../styles/variables.scss";
+
+.ModalContainer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(6px);
+  z-index: 99999999;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .Modal {
+    border-radius: 8px;
+    background-color: white;
+    color: $primaryTextColor;
+    min-width: 400px;
+    max-width: 750px;
+    max-height: 90%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+
+    .ModalHeader {
+      flex: 0 0 auto;
+      padding: 16px;
+      font-size: 18px;
+      border-bottom: 1px solid $borderColor;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .ModalTitle {
+        font-weight: 500;
+        max-width: 300px;
+      }
+
+      .CloseButton {
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+      }
+    }
+
+    .ModalContent {
+      flex: 1 1 auto;
+      padding: 24px;
+      overflow-y: auto;
+    }
+
+    @media only screen and (max-width: $breakpoint) {
+      max-width: unset;
+      max-height: unset;
+      min-width: unset;
+      width: 100%;
+      height: 100%;
+      margin: 0;
+      border-radius: 0;
+
+      .ModalHeader {
+        padding: 1.5em;
+      }
+    }
+  }
+}

package/src/components/checkout/components/modal/useEscape.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+type Props = {
+  callback: () => void;
+};
+
+function useEscape({ callback }: Props) {
+  React.useEffect(() => {
+    const handler = (event: KeyboardEvent) => {
+      if (event.key === "Escape") callback();
+    };
+
+    document.addEventListener("keydown", handler);
+    return () => {
+      document.removeEventListener("keydown", handler);
+    };
+  }, []);
+}
+
+export default useEscape;

package/src/components/checkout/components/notification-box/index.tsx

@@ -0,0 +1,70 @@
+import * as React from "react";
+import { observer } from "mobx-react-lite";
+import styles from "./style.module.scss";
+
+import SVGWarning from "../svg/warning";
+import SVGCross from "../svg/cross";
+
+type Props = {
+  type: "warning" | "error" | "success";
+  title?: string;
+  content: string | React.ReactElement;
+  onClose?: () => void;
+};
+
+const NotificationBox: React.FC<Props> = ({
+  type,
+  title,
+  content,
+  onClose,
+}) => {
+  const containerRef = React.useRef(null);
+  const boxClasses = React.useMemo(() => {
+    const classes = [styles.NotificationBox];
+
+    switch (type) {
+      case "error":
+        classes.push(styles.Error);
+        break;
+
+      case "warning":
+        classes.push(styles.Warning);
+        break;
+
+      case "success":
+        classes.push(styles.Success);
+        break;
+
+      default:
+        break;
+    }
+
+    return classes.join(" ");
+  }, [type]);
+
+  React.useEffect(() => {
+    if (containerRef && containerRef.current) {
+      //@ts-ignore
+      containerRef.current!.scrollIntoView();
+    }
+  }, [containerRef]);
+
+  return (
+    <div className={boxClasses} ref={containerRef}>
+      <div className={styles.Left}>
+        <SVGWarning />
+      </div>
+      <div className={styles.Center}>
+        {!!title && <div className={styles.Title}>{title}</div>}
+        <div className={styles.Content}>{content}</div>
+      </div>
+      {onClose && (
+        <div className={styles.Right} onClick={onClose}>
+          <SVGCross />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default observer(NotificationBox);

package/src/components/checkout/components/notification-box/style.module.scss

@@ -0,0 +1,69 @@
+@import "../../styles/variables.scss";
+
+.NotificationBox {
+  padding: 16px;
+  border-radius: 8px;
+  color: $primaryTextColor;
+  display: flex;
+
+  &.Error {
+    border: 1px solid $errorColor;
+    background-color: $errorLightColor;
+
+    svg {
+      color: $errorColor;
+    }
+  }
+
+  &.Warning {
+    border: 1px solid $warningColor;
+    background-color: $warningLightColor;
+
+    svg {
+      color: $warningColor;
+    }
+  }
+
+  &.Success {
+    border: 1px solid $successColor;
+    background-color: $successLightColor;
+
+    svg {
+      color: $successColor;
+    }
+  }
+
+  .Left {
+    flex: 0 0 auto;
+    padding-right: 10px;
+    display: flex;
+    align-items: center;
+    height: 24px;
+  }
+
+  .Center {
+    flex: 1 1 auto;
+
+    .Title {
+      font-size: 16px;
+      font-weight: 600;
+      margin-bottom: 4px;
+    }
+
+    .Content {
+    
+    }
+  }
+
+  .Right {
+    flex: 0 0 auto;
+    padding-left: 10px;
+    color: $secondaryTextColor;
+    cursor: pointer;
+    display: flex; 
+
+    svg {
+      color: $secondaryTextColor;
+    }
+  }
+}