Purchase popup

ui/app/theme.css

@@ -11,6 +11,7 @@ body {
   --col--gray4: rgba(0, 0, 0, 0.3);
   --col--gray8: rgba(0, 0, 0, 0.05);
   --col--secondary8: rgba(57, 99, 255, 0.5);
+  --col--border: #dde0eb;
 
   /* BUTTON */
   /* rgba(52, 89, 231, 1) */

ui/components/atoms/button/button.module.css

@@ -26,7 +26,7 @@
 
 .apiButton:disabled {
     background-color: var(--col--button4);
-    cursor: not-allowed;
+    cursor: default;
     box-shadow: none;
 }
 

ui/components/atoms/resultItem/resultItem.tsx

@@ -3,9 +3,10 @@ import { Button } from "../button";
 import { Variant } from "../button/types";
 import style from "./index.module.css";
 import { interMedium } from "@/app/fonts";
-import ModalInfo from "@/components/molecules/modals/modalInfo/modalInfo";
 import { useState } from "react";
 import { mockData } from "./response.mock";
+import { ModalInfo } from "@/components/molecules/modals/modalInfo";
+import { ModalPurchase } from "@/components/molecules/modals/modalPurchase";
 
 const ResultItem = ({
   statusName,
@@ -44,7 +45,15 @@ const ResultItem = ({
         variant={Variant.blue}
         onClick={handleInfo}
       />
-      <ModalInfo open={open} onClose={() => setOpen(false)} data={mockData} />
+      {isReserved ? (
+        <ModalInfo open={open} onClose={() => setOpen(false)} data={mockData} />
+      ) : (
+        <ModalPurchase
+          open={open}
+          onClose={() => setOpen(false)}
+          name={name}
+        />
+      )}
     </div>
   );
 };

ui/components/molecules/modals/modalInfo/index.ts

@@ -0,0 +1 @@
+export { default as ModalInfo } from "./modalInfo";

ui/components/molecules/modals/modalPurchase/index.module.css

@@ -0,0 +1,79 @@
+.wrapper {
+  border-radius: 12px;
+  background: var(--col--light);
+  padding: 24px 24px 34px 24px;
+  width: 654px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.header {
+  font-size: 28px;
+}
+
+.header span {
+  color: #9c9ea6;
+}
+
+.periodWrapper {
+  border-radius: 35px;
+  border: 1px solid rgba(0, 0, 0, 0.4);
+  padding: 10px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 22px 0;
+  width: 100%;
+}
+
+.periodWrapper > div {
+  color: #88d6a9;
+  font-size: 28px;
+  font-weight: 500;
+}
+
+.minus,
+.plus {
+  display: flex;
+  width: 50px;
+  height: 50px;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  border: 1px solid #597fff;
+  font-size: 20px;
+  color: #597fff;
+  cursor: pointer;
+}
+
+.disableActionIcon {
+  cursor: default;
+  border-color: var(--col--border);
+  color: rgba(0, 0, 0, 0.3);
+}
+
+.costInformation {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding: 16px 12px;
+  gap: 8px;
+  border-radius: 9px;
+  background: #f7f8fa;
+  margin-bottom: 32px;
+}
+
+.costInformation > div {
+  display: flex;
+  justify-content: space-between;
+  color: rgba(0, 0, 0, 0.6);
+}
+
+.totalText {
+  color: rgba(0, 0, 0, 0.6);
+}
+
+.costInformation > div span:last-child {
+  color: var(--col--dark)
+}

ui/components/molecules/modals/modalPurchase/index.ts

@@ -0,0 +1 @@
+export { default as ModalPurchase } from "./modalPurchase";

ui/components/molecules/modals/modalPurchase/modalPurchase.tsx

@@ -0,0 +1,88 @@
+import classNames from "classnames";
+import PopupOverlay from "../../popupOverlay";
+
+import style from "./index.module.css";
+import { interBold, interMedium, interSemiBold } from "@/app/fonts";
+import { Button } from "@/components/atoms/button";
+import { Variant } from "@/components/atoms/button/types";
+import { useState } from "react";
+
+type ModalPurchaseProps = {
+  name: string;
+  open: boolean;
+  onClose: () => void;
+};
+
+const ModalPurchase = ({
+  open,
+  onClose,
+  name,
+}: ModalPurchaseProps): JSX.Element => {
+  const [selectedPeriod, setSelectedPeriod] = useState<number>(1);
+  const maxPeriod = 3;
+  const minPeriod = 1;
+
+  const increment = (): void => {
+    if (selectedPeriod === maxPeriod) return;
+    setSelectedPeriod(selectedPeriod + 1);
+  };
+
+  const decrement = (): void => {
+    if (selectedPeriod === minPeriod) return;
+    setSelectedPeriod(selectedPeriod - 1);
+  };
+  return (
+    <PopupOverlay
+      position="center"
+      animation="appear"
+      onClose={onClose}
+      show={open}
+    >
+      <div className={style.wrapper}>
+        <div className={classNames(style.header, interMedium.className)}>
+          {name}<span>.mina</span>
+        </div>
+        <div
+          className={classNames(style.periodWrapper, interSemiBold.className)}
+        >
+          <span
+            className={classNames(style.minus, {
+              [style.disableActionIcon]: selectedPeriod === minPeriod,
+            })}
+            onClick={decrement}
+          >
+            -
+          </span>
+          <div className={interMedium.className}>{selectedPeriod} year</div>
+          <span
+            className={classNames(style.plus, {
+              [style.disableActionIcon]: selectedPeriod === maxPeriod,
+            })}
+            onClick={increment}
+          >
+            +
+          </span>
+        </div>
+        <div
+          className={classNames(style.costInformation, interMedium.className)}
+        >
+          <div>
+            <span>1 year registration</span>
+            <span className={interSemiBold.className}>10 MINA</span>
+          </div>
+          <div>
+            <span>Est. network fee</span>
+            <span className={interSemiBold.className}>0.00000312 MINA</span>
+          </div>
+          <div>
+            <span className={classNames(style.totalText, interBold.className)}>Estimated Total</span>
+            <span className={interSemiBold.className}>10.00000312 MINA</span>
+          </div>
+        </div>
+        <Button text="Purchase" variant={Variant.blue} disabled />
+      </div>
+    </PopupOverlay>
+  );
+};
+
+export default ModalPurchase;