Fix the contract duration unit

e2e/storage-requests.spec.ts

@@ -89,8 +89,10 @@ test('create a storage request by using decimal values', async ({ page }) => {
     await expect(page.getByText('Success, the CID has been')).toBeVisible();
     await page.getByRole('button', { name: 'Next' }).click();
 
+    await expect(page.getByRole('combobox')).toHaveValue("days");
     const value = (Math.random() * 10);
     await page.getByLabel("Full period of the contract").fill(value.toFixed(1))
+    await expect(page.getByRole('combobox')).toHaveValue("days");
 
     await page.getByRole('button', { name: 'Next' }).click();
     await expect(page.getByText('Your request is being processed.')).toBeVisible();
@@ -113,12 +115,11 @@ test('create a storage request by using months', async ({ page }) => {
 
     await page.getByLabel("Full period of the contract").fill("3")
     await page.getByRole('combobox').selectOption('months');
-    await expect(page.getByLabel("Full period of the contract")).toHaveValue("1")
-    await page.getByLabel("Full period of the contract").fill("2")
+    await expect(page.getByLabel("Full period of the contract")).toHaveValue("3")
 
     await page.getByRole('button', { name: 'Next' }).click();
     await expect(page.getByText('Your request is being processed.')).toBeVisible();
     await page.getByRole('button', { name: 'Finish' }).click();
     await expect(page.getByText('No data.')).not.toBeVisible();
-    await expect(page.getByText("2 months").first()).toBeVisible();
+    await expect(page.getByText("3 months").first()).toBeVisible();
 })

src/components/StorageRequestSetup/Commitment.tsx

@@ -6,34 +6,26 @@ import { ChangeEvent, useState } from "react";
 import { classnames } from "../../utils/classnames";
 import InfoIcon from "../../assets/icons/info.svg?react";
 import { attributes } from "../../utils/attributes";
-import { Times } from "../../utils/times";
 
 type Props = {
+  unit: "months" | "days";
   value: string;
-  onChange: (value: string) => void;
+  onChange: (value: string, unit: "months" | "days") => void;
   onValidation?: (value: string) => string;
 };
 
-export function Commitment({ value, onValidation, onChange }: Props) {
+export function Commitment({ unit, value, onValidation, onChange }: Props) {
   const [error, setError] = useState("");
 
-  const unitValue = Times.unit(parseFloat(value));
-  const val = parseFloat(value) / Times.value(unitValue);
-
   const onValueChange = (e: ChangeEvent<HTMLInputElement>) => {
-    console.info("e.currentTarget.value", e.currentTarget.value);
-    onValueOrUnitChange(
-      (parseFloat(e.currentTarget.value) * Times.value(unitValue)).toFixed(1)
-    );
+    onValueOrUnitChange(e.currentTarget.value, unit);
   };
   const onUnitChange = (e: ChangeEvent<HTMLSelectElement>) => {
-    onValueOrUnitChange(
-      Times.value(e.currentTarget.value as "days" | "months").toFixed(1)
-    );
+    onValueOrUnitChange(value, e.currentTarget.value as "months" | "days");
   };
 
-  const onValueOrUnitChange = (val: string) => {
-    onChange(val);
+  const onValueOrUnitChange = (val: string, unit: "months" | "days") => {
+    onChange(val, unit);
 
     const msg = onValidation?.(val);
 
@@ -45,8 +37,6 @@ export function Commitment({ value, onValidation, onChange }: Props) {
     setError("");
   };
 
-  console.info(val);
-
   return (
     <div
       className={classnames(["card-number cardNumber-container commitment"])}
@@ -59,12 +49,12 @@ export function Commitment({ value, onValidation, onChange }: Props) {
         isInvalid={!!error}
         onChange={onValueChange}
         onGroupChange={onUnitChange}
-        value={Number.isInteger(val) ? val.toString() : val.toFixed(1)}
+        value={value}
         group={[
           ["days", "days"],
           ["months", "months"],
         ]}
-        groupValue={unitValue}
+        groupValue={unit}
       />
 
       <Tooltip message={error || "The duration of the request in months"}>

src/components/StorageRequestSetup/StorageRequestCreate.tsx

@@ -22,7 +22,8 @@ const CONFIRM_STATE = 2;
 
 const defaultStorageRequest: StorageRequest = {
   cid: "",
-  availability: Times.value("days"),
+  availability: 1,
+  availabilityUnit: "days",
   tolerance: 1,
   proofProbability: 1,
   nodes: 3,
@@ -42,7 +43,7 @@ export function StorageRequestCreate() {
   useEffect(() => {
     Promise.all([
       WebStorage.get<number>("storage-request-step"),
-      WebStorage.get<StorageRequest>("storage-request-2"),
+      WebStorage.get<StorageRequest>("storage-request-3"),
     ]).then(([s, data]) => {
       if (s) {
         dispatch({
@@ -82,10 +83,11 @@ export function StorageRequestCreate() {
     WebStorage.set("storage-request-step", step);
 
     if (step == CONFIRM_STATE) {
-      const { availability, expiration, ...rest } = storageRequest;
+      const { availability, availabilityUnit, expiration, ...rest } =
+        storageRequest;
       mutateAsync({
         ...rest,
-        duration: availability,
+        duration: availability * Times.value(availabilityUnit),
         expiry: expiration * 60,
       });
     } else {
@@ -99,7 +101,7 @@ export function StorageRequestCreate() {
   const onStorageRequestChange = (data: Partial<StorageRequest>) => {
     const val = { ...storageRequest, ...data };
 
-    WebStorage.set("storage-request-2", val);
+    WebStorage.set("storage-request-3", val);
 
     setStorageRequest(val);
   };

src/components/StorageRequestSetup/StorageRequestReview.tsx

@@ -155,11 +155,12 @@ export function StorageRequestReview({
   const onProofProbabilityChange = (value: string) =>
     onUpdateDurability({ proofProbability: Number(value) });
 
-  const onAvailabilityChange = (value: string) => {
+  const onAvailabilityChange = (value: string, unit: "days" | "months") => {
     const [availability] = value.split(" ");
 
     onStorageRequestChange({
       availability: Number(availability),
+      availabilityUnit: unit,
     });
   };
 
@@ -263,6 +264,7 @@ export function StorageRequestReview({
 
         <div className="grid">
           <Commitment
+            unit={storageRequest.availabilityUnit}
             value={availability.toString()}
             onChange={onAvailabilityChange}
             onValidation={isInvalidAvailability}></Commitment>

src/components/StorageRequestSetup/types.ts

@@ -20,10 +20,10 @@ export type StorageAvailabilityValue = {
   value: number;
 };
 
-
 export type StorageRequest = {
   cid: string;
   availability: number;
+  availabilityUnit: "months" | "days";
   tolerance: number;
   proofProbability: number;
   nodes: number;

src/components/StorageRequestSetup/useStorageRequestMutation.ts

@@ -29,7 +29,7 @@ export function useStorageRequestMutation(
       //   }
 
       WebStorage.delete("storage-request-step");
-      WebStorage.delete("storage-request-2");
+      WebStorage.delete("storage-request-3");
 
       setError(null);