Add confirmation message

src/components/Availability/AvailabilityConfirm.css

@@ -1,5 +1,24 @@
-.availabilitConfirm-title {
+.availabilitConfirm-bottom {
-  margin-left: auto;
+  margin-top: 1.5rem;
-  margin-right: auto;
+  display: flex;
-  margin-bottom: 1rem;
+  gap: 0.75rem;
+  align-items: flex-start;
+}
+
+.availabilitConfirm-subtitle {
+  margin-bottom: 0.5rem;
+  display: inline-block;
+}
+
+.availabilitConfirm-iconContainer {
+  background-color: rgb(var(--codex-color-primary-rgb), 0.2);
+  border-radius: 50%;
+  padding: 0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.availabilitConfirm-icon {
+  color: rgb(var(--codex-color-primary-rgb));
 }

src/components/Availability/AvailabilityConfirmation.tsx

@@ -8,6 +8,8 @@ import { CodexNodeSpace } from "@codex-storage/sdk-js";
 import { UIAvailability } from "./types";
 import { GB, TB } from "../../utils/constants";
 import "./AvailabilityConfirm.css";
+import { Info } from "lucide-react";
+import { AvailabilitySpaceAllocation } from "./AvailabilitySpaceAllocation";
 
 type Props = {
   dispatch: Dispatch<StepperAction>;
@@ -52,9 +54,24 @@ export function AvailabilityConfirm({
 
   return (
     <>
-      <b className="availabilitConfirm-title">Node space allocation</b>
+      <AvailabilitySpaceAllocation availability={availability} space={space} />
 
-      <SpaceAllocation data={spaceData} />
+      <div className="availabilitConfirm-bottom">
+        <div className="availabilitConfirm-iconContainer">
+          <Info className="availabilitConfirm-icon" />
+        </div>
+
+        <div>
+          <b className="availabilitConfirm-subtitle">
+            Confirm your new availability
+          </b>
+
+          <p className="availabilitConfirm-message">
+            By clicking 'Next', you will establish a new availability based on
+            the space allocation specified above. Do you want to confirm ?
+          </p>
+        </div>
+      </div>
     </>
   );
 }

src/components/Availability/AvailabilityForm.tsx

@@ -1,6 +1,7 @@
 import {
   Input,
   InputGroup,
+  SpaceAllocation,
   StepperAction,
   StepperState,
 } from "@codex-storage/marketplace-ui-components";
@@ -11,6 +12,7 @@ import { UIAvailability } from "./types";
 import { GB, TB } from "../../utils/constants";
 import { classnames } from "../../utils/classnames";
 import { AvailabilityConfirm } from "./AvailabilityConfirmation";
+import { AvailabilitySpaceAllocation } from "./AvailabilitySpaceAllocation";
 
 type Props = {
   dispatch: Dispatch<StepperAction>;
@@ -109,12 +111,7 @@ export function AvailabilityForm({
 
   return (
     <>
-      <AvailabilityConfirm
+      <AvailabilitySpaceAllocation availability={availability} space={space} />
-        availability={availability}
-        dispatch={dispatch}
-        space={space}
-        enableNext={false}
-      />
 
       <InputGroup
         id="totalSize"

src/components/Availability/AvailabilitySpaceAllocation.css

@@ -0,0 +1,5 @@
+.availabilitySpaceAllocation-title {
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 1rem;
+}

src/components/Availability/AvailabilitySpaceAllocation.tsx

@@ -0,0 +1,42 @@
+import { CodexNodeSpace } from "@codex-storage/sdk-js";
+import { UIAvailability } from "./types";
+import { GB, TB } from "../../utils/constants";
+import { SpaceAllocation } from "@codex-storage/marketplace-ui-components";
+import "./AvailabilitySpaceAllocation.css";
+
+type Props = {
+  space: CodexNodeSpace;
+  availability: UIAvailability;
+};
+
+export function AvailabilitySpaceAllocation({ availability, space }: Props) {
+  const unit = availability.totalSizeUnit === "gb" ? GB : TB;
+  const { quotaMaxBytes, quotaReservedBytes } = space;
+  const size = availability.totalSize * unit;
+  const isUpdating = !!availability.id;
+  const allocated = isUpdating ? quotaReservedBytes - size : quotaReservedBytes;
+  const remaining = quotaMaxBytes - allocated - size;
+
+  const spaceData = [
+    {
+      title: "Space allocated",
+      size: allocated,
+    },
+    {
+      title: "New space allocation",
+      size: size,
+    },
+    {
+      title: "Remaining space",
+      size: remaining < 0 ? 0 : remaining,
+    },
+  ];
+
+  return (
+    <>
+      <b className="availabilitySpaceAllocation-title">Node space allocation</b>
+
+      <SpaceAllocation data={spaceData} />
+    </>
+  );
+}

src/index.css

@@ -12,6 +12,7 @@
   --codex-color-blue: 30, 64, 175;
   --codex-color-grey: 170, 170, 170;
   --codex-color-primary: #c1f0a4;
+  --codex-color-primary-rgb: 193, 240, 164;
   --codex-color-primary-variant: #c1f0a4cc;
   --codex-color-on-primary: #333;
   --codex-color-disabled: #717171;