@kosdev-code/kos-ddk-model-components 3.0.6 → 3.0.8

package/index.js

@@ -1,7 +1,7 @@
 import { FutureManager, kosComponent, useKosTranslation, useKosModel, kosAutoEffect, FutureEndState, KosLog, useConfigProperty, useKosRegions, useRegionTimeProps, useDateProps, getKosCompanionModel, registerExtensionPoint, CoreExtensionManager, ExtensionManager, Device, KosFeatureFlags, TroubleContainer, registerLegacyModel, initKosProvider, troubleDataFactory, isTroubleAware, useTroubleContainerModel, withDevice, useFormattedDate, useKosTranslationContext, useSoftwareInfo, useKosTime } from "@kosdev-code/kos-ui-sdk";
 import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
 import styled from "@emotion/styled";
-import { useComponentConfigurationContext, Modal, Header, BackButton, Content as Content$1, InfoCard, Footer as Footer$6, Button, CloseButton, ProgressBar, LabelInformation, BodyMediumInformation, InputCard, WorkflowModal, StatusIndicator, InputRangeCard, ToggleCard, PickerCard, Card, SwitchCard, MultiPickerCard, LabelDate, Table, LabelInformationExtraSmall, getItemData, TapAndHoldButton, ComponentConfigurationProvider, useAbbreviation, getFillColor, HolderDashboardCard, FuelGauge, UtilityModalHeading, FrameContainer, FrameBody, TabContainer, SettingsSubheading, StatusCard, NotificationCard, TabViewLayout, TabRouter, Tabs, CompactCloseButton, QuestionIconStyle, CancelProceedFooter, ErrorInputCard, StatusBar, InfoContainer, FailureCard, useNavigate, Sidebar, SwitchPickerCard } from "@kosdev-code/kos-ddk-components";
+import { useComponentConfigurationContext, Modal, Header, BackButton, Content as Content$1, InfoCard, Footer as Footer$6, Button, CloseButton, ProgressBar, LabelInformation, BodyMediumInformation, InputCard, WorkflowModal, StatusIndicator, InputRangeCard, ToggleCard, PickerCard, Card, SwitchCard, MultiPickerCard, LabelDate, Table, LabelInformationExtraSmall, getItemData, TapAndHoldButton, ComponentConfigurationProvider, useAbbreviation, getFillColor, HolderDashboardCard, FuelGauge, UtilityModalHeading, FrameContainer, FrameBody, TabContainer, SettingsSubheading, StatusCard, NotificationCard, TabViewLayout, TabRouter, Tabs, CompactCloseButton, QuestionIconStyle, CancelProceedFooter, ErrorInputCard, StatusBar, ModalContainer, InfoContainer, FailureCard, useNavigate, Sidebar, HeadingExtraLarge, InfoMessage, InstructionCard, SwitchPickerCard } from "@kosdev-code/kos-ddk-components";
 import React, { useState, useEffect, useCallback, useMemo, createContext, useContext, useRef, useLayoutEffect, Suspense } from "react";
 import { AgitationControl, toTimeComponents, toSeconds, Animation, Application, CarbWater, CopyLogs, DashboardOperations, DispenserInfo, Door, IngredientSummary, MacroAssignment, NetworkTest, NetworkTestContainer, NutritiveSweetener, PlainWater, Lockout, TroubleActionManager, DDKModels, Reboot, Settings, SetupStep, SetupStepContainer, Start, Utilities, UtilitiesContainer, troubleVisibilityFilter } from "@kosdev-code/kos-ddk-models";
 import { SuccessIcon, MessageErrorIcon, TimeIcon, CalendarIcon, MessageInformationIconWithBackground } from "@kosdev-code/kos-ddk-styles";
@@ -213,7 +213,7 @@ class GenericTroubleAction extends TroubleAction {
 }
 const TROUBLE_PRIME = "PrimeTrouble";
 const TROUBLE_PURGE = "PurgeTrouble";
-const Container$4 = styled.div`
+const Container$3 = styled.div`
   display: flex;
   flex-direction: column;
   overflow-y: auto;
@@ -233,7 +233,7 @@ const AgitatorModal = kosComponent(
         contain: componentModeOverride !== "compact",
         onClosed: onComplete,
         show: !closing,
-        children: /* @__PURE__ */ jsxs(Container$4, { children: [
+        children: /* @__PURE__ */ jsxs(Container$3, { children: [
           /* @__PURE__ */ jsx(
             Header,
             {
@@ -558,7 +558,7 @@ const CalibrateModal = kosComponent(
           setState("failure");
           break;
       }
-    }, [future?.endState, future?.reason, state]);
+    }, [future, future?.endState, future?.reason, state]);
     const workflow = useMemo(() => {
       return {
         "high-flow-test-idle": {
@@ -709,7 +709,7 @@ const CalibrateModal = kosComponent(
         failure: {
           information: /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(LabelInformation, { children: t("calibration-failed") }),
-            /* @__PURE__ */ jsx(BodyMediumInformation, { children: t(`error.${error || "unknownError"}`) })
+            /* @__PURE__ */ jsx(BodyMediumInformation, { children: t(`error.${error}`) })
           ] }),
           footer: /* @__PURE__ */ jsx(Button, { onPointerDown: onComplete, children: t("exit-calibration") }),
           status: "error"
@@ -6946,8 +6946,8 @@ const HolderCard = kosComponent(
     const data = useTroubleData(troubleModel);
     const hasFuelGuage = holder.hasFuelGuage;
     const fillPercent = holder.fillPercent;
-    const holderColor = holder.removed ? "var(--ddk-component-dashboard-card-background-color-unassigned)" : disabled ? "var(--ddk-generic-color-grey-50)" : hasTroubles ? `${troubleModel?.color}` : assigned ? void 0 : "var(--ddk-component-dashboard-card-background-color-unassigned)";
-    const holderHeaderColor = holder.removed ? "var(--ddk-component-dashboard-card-header-background-color)" : void 0;
+    const holderColor = holder.removed ? "var(--ddk-component-dashboard-card-background-color-removed)" : disabled ? "var(--ddk-component-dashboard-card-background-color-disabled)" : hasTroubles ? `${troubleModel?.color}` : holder.unassigned ? "var(--ddk-component-dashboard-card-background-color-unassigned)" : void 0;
+    const holderHeaderColor = !isCompact && holder.removed ? "var(--ddk-component-dashboard-card-header-background-color-removed)" : void 0;
     const isLight = isLightColor$1(holderColor);
     const fontColor = disabled ? "white" : holder.unassigned ? "var(--ddk-generic-color-grey-30)" : hasTroubles ? getFontColor$1(isLight) : assigned ? void 0 : "var(--ddk-component-dashboard-card-color-unassigned)";
     const footerFontColor = disabled ? "white" : hasTroubles ? getFooterFontColor(isLight, holder) : assigned ? void 0 : "var(--ddk-component-dashboard-card-color-unassigned)";
@@ -7091,7 +7091,7 @@ const HolderCard = kosComponent(
 const HolderGroup = styled.div`
   display: flex;
   flex-direction: var(--ddk-component-dashboard-card-flex-direction);
-  flex-wrap: nowrap;
+  flex-wrap: var(--ddk-component-dashboard-card-flex-wrap, nowrap);
   row-gap: var(--ddk-component-dashboard-row-gap);
   column-gap: var(--ddk-component-dashboard-column-gap);
   height: 100%;
@@ -7132,7 +7132,7 @@ const HolderGroupView = kosComponent(
 const log$1 = KosLog.createLogger({ name: "holder-group-view" });
 log$1.debug("holder-group-view component loaded");
 const EXCLUDE_MACROS = ["water", "carb", "ns", "nns"];
-const Container$3 = styled.div`
+const Container$2 = styled.div`
   display: flex;
   flex-direction: column;
   overflow-y: auto;
@@ -7206,9 +7206,10 @@ const MacroHolderCard = kosComponent(
     const troubleCount = visibleTroubles?.length ?? 0;
     const troubleModel = visibleTroubles?.[0];
     const hasTroubles = visibleTroubles ? visibleTroubles.length > 0 : false;
-    const holderColor = hasTroubles ? `${troubleModel?.color}` : void 0;
+    const holderColor = holder.removed ? "var(--ddk-component-dashboard-card-background-color-removed)" : hasTroubles ? `${troubleModel?.color}` : holder.unassigned ? "var(--ddk-component-dashboard-card-background-color-unassigned)" : void 0;
+    const holderHeaderColor = !isCompact && holder.removed ? "var(--ddk-component-dashboard-card-header-background-color-removed)" : void 0;
     const isLight = isLightColor(holderColor);
-    const fontColor = hasTroubles ? getFontColor(isLight) : assigned ? void 0 : "var(--ddk-component-dashboard-card-color-unassigned)";
+    const fontColor = holder.unassigned ? "var(--ddk-generic-color-grey-30)" : hasTroubles ? getFontColor(isLight) : assigned ? void 0 : "var(--ddk-component-dashboard-card-color-unassigned)";
     const abbreviatedName = useAbbreviation(
       holder.name,
       componentModeOverride === "compact"
@@ -7225,8 +7226,8 @@ const MacroHolderCard = kosComponent(
     const key = ExtensionManager.executeDashboardKeyFactory(holder) || "";
     const exts = getExtensions(DashboardPumpDetailExtension.id);
     const details = exts.filter((ext) => !!ext.data).reduce((acc, ext) => {
-      const data = ext.data;
-      acc[data.dashboardKey] = ext.data;
+      const data2 = ext.data;
+      acc[data2.dashboardKey] = ext.data;
       return acc;
     }, {});
     const hasExtension = !!details[key];
@@ -7244,7 +7245,11 @@ const MacroHolderCard = kosComponent(
     );
     const MainContent = HolderContent ? /* @__PURE__ */ jsx(HolderContent, { holder, onComplete: () => setShowModal(false) }) : hasExtension && DashboardPumpDetailComponent ? /* @__PURE__ */ jsx(DashboardPumpDetailComponent, { module: details[key]?.id, holder }) : null;
     const troubleLabels = troubleLabelFactory(troubleModel);
-    const footer = hasTroubles ? /* @__PURE__ */ jsx(Footer$2, { color: fontColor, children: t(troubleLabels.summary) }) : null;
+    const data = useTroubleData(troubleModel);
+    const footer = hasTroubles ? /* @__PURE__ */ jsx(Footer$2, { color: fontColor, children: t(troubleLabels.summary, {
+      context: troubleModel?.deferred ? "queued" : void 0,
+      data
+    }) }) : null;
     const handleCardSelect = useCallback(() => {
       if (holder.sortedPumps.length > 0) {
         if (role === "technician") {
@@ -7261,6 +7266,7 @@ const MacroHolderCard = kosComponent(
         HolderDashboardCard,
         {
           avatar,
+          headerBackgroundColor: holderHeaderColor,
           backgroundColor: holderColor,
           body: hasTroubles ? null : macroSummaryContent,
           footer,
@@ -7279,7 +7285,7 @@ const MacroHolderCard = kosComponent(
           ...modalOptions,
           show: showModal,
           onClose: () => setShowModal(false),
-          children: /* @__PURE__ */ jsxs(Container$3, { children: [
+          children: /* @__PURE__ */ jsxs(Container$2, { children: [
             /* @__PURE__ */ jsx(
               Header,
               {
@@ -8281,7 +8287,7 @@ const WaterPumpCard = kosComponent(
     ] });
   }
 );
-const Container$2 = styled.section`
+const Container$1 = styled.section`
   align-items: center;
   display: flex;
   flex-direction: column;
@@ -8324,7 +8330,7 @@ const RebootView = ({ onComplete }) => {
             CloseButton: CompactCloseButton
           }
         ),
-        /* @__PURE__ */ jsxs(Container$2, { children: [
+        /* @__PURE__ */ jsxs(Container$1, { children: [
           /* @__PURE__ */ jsxs(Content, { children: [
             /* @__PURE__ */ jsx(QuestionIconStyle, {}),
             /* @__PURE__ */ jsx(TextContainer, { children: /* @__PURE__ */ jsx(UtilityModalHeading, { children: t("modal-heading", "Are you sure you want to reboot dispenser?") }) })
@@ -8355,10 +8361,13 @@ const RemoteNNSModal = kosComponent(
     const holder = remoteTray.holder;
     const pumps = holder.pumps.data.filter((pump) => pump.childPump);
     const disabling = remoteTray.remoteTrayEnabled.value === true;
-    const readyToSubmit = () => pumps.every((pump) => {
-      const value = pumpCodes[pump.name];
-      return value !== void 0 && value !== null && value !== "";
-    });
+    const readyToSubmit = useCallback(
+      () => pumps.every((pump) => {
+        const value = pumpCodes[pump.name];
+        return value !== void 0 && value !== null && value !== "";
+      }),
+      [pumpCodes, pumps]
+    );
     const changePumpCode = useCallback((pumpName, pumpCode) => {
       setPumpCodes((pumpCodes2) => {
         return { ...pumpCodes2, [pumpName]: pumpCode };
@@ -8408,13 +8417,7 @@ const RemoteNNSModal = kosComponent(
       } else {
         setState("pump");
       }
-    }, [
-      disabling,
-      pumpCodes,
-      pumps,
-      remoteTray.remoteTrayEnabled,
-      toggleRemoteTray
-    ]);
+    }, [pumpCodes, pumps, toggleRemoteTray]);
     const workflow = useMemo(() => {
       return {
         idle: {
@@ -8473,14 +8476,16 @@ const RemoteNNSModal = kosComponent(
         }
       };
     }, [
-      changePumpCode,
       disabling,
+      handlePumpCodeChange,
       onComplete,
       pumpCodes,
       pumpErrors,
       pumps,
+      readyToSubmit,
       submit,
-      t
+      t,
+      toggleRemoteTray
     ]);
     return /* @__PURE__ */ jsx(WorkflowModal, { ...workflow[state], onClose: () => onComplete() });
   }
@@ -8528,14 +8533,6 @@ const ReplaceLine = kosComponent(
     return /* @__PURE__ */ jsx(StatusBar, { show: status !== void 0, onClose: close, children: status === "failure" ? /* @__PURE__ */ jsx(FailureMessage, { children: t(error || "unknownError") }) : status === "success" ? /* @__PURE__ */ jsx(SuccessMessage, { children: t("success") }) : null });
   }
 );
-const Container$1 = styled.div`
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto;
-  overflow-x: hidden;
-  gap: 32px;
-  height: 100%;
-`;
 const ReplacePump = kosComponent(
   ({ pump, onComplete }) => {
     const [closing, setClosing] = useState(false);
@@ -8581,7 +8578,7 @@ const ReplacePump = kosComponent(
           contain: componentModeOverride !== "compact",
           onClosed: onComplete,
           show: !closing,
-          children: /* @__PURE__ */ jsxs(Container$1, { children: [
+          children: /* @__PURE__ */ jsxs(ModalContainer, { children: [
             /* @__PURE__ */ jsx(
               Header,
               {
@@ -8786,15 +8783,16 @@ const StepItem = styled.div`
   display: flex;
   gap: 8px;
   align-items: center;
+  padding: var(--ddk-component-setup-sidebar-step-item-padding);
 `;
 const StepTitle = styled.div`
-  color: var(--ddk-generic-color-grey-100, #171717);
-  font-size: var(--ddk-component-sidebar-font-size-medium);
-  font-style: normal;
-  font-weight: 600;
-  line-height: 135%;
-  letter-spacing: 0.44px;
-  white-space: nowrap;
+  color: var(--ddk-component-step-title-color);
+  font-size: var(--ddk-component-step-title-font-weight);
+  font-style: var(--ddk-component-step-title-font-weight);
+  font-weight: var(--ddk-component-step-title-font-weight);
+  line-height: var(--ddk-component-step-title-line-height);
+  letter-spacing: var(--ddk-component-step-title-letter-spacing);
+  white-space: var(--ddk-component-step-title-white-space);
   overflow: hidden;
 `;
 const SetupSidebarComp = kosComponent(({ setupStepContainer, onStepSelected, ...props }) => {
@@ -8849,9 +8847,55 @@ const Software = kosComponent(() => {
     ) }, index2))
   ] }, index));
 });
-const LabelInformationPreformatted = styled(LabelInformation)`
-  white-space: pre-wrap;
+const InputStepContainer = styled.div`
+  align-items: center;
+  display: flex;
+  gap: 32px;
+  width: 100%;
+`;
+const ValueContainer = styled(HeadingExtraLarge)`
+  border-bottom: 1px solid var(--ddk-semantic-control-border-color-default);
+  border-top: 1px solid var(--ddk-semantic-control-border-color-default);
+  color: var(--ddk-semantic-control-color-default);
+  display: flex;
+  flex: 1;
+  justify-content: center;
+  padding: 24px 0;
 `;
+const IconButton = styled(Button)`
+  font-size: var(--ddk-component-input-step-font-size);
+  font-weight: var(--ddk-component-input-step-font-weight);
+  width: var(--ddk-component-input-step-button-width);
+  height: var(--ddk-component-input-step-button-height);
+  min-width: var(--ddk-component-input-step-button-width);
+  min-height: var(--ddk-component-input-step-button-height);
+  border-radius: var(--ddk-component-input-step-button-border-radius);
+`;
+const InputStep = ({
+  fixed = 1,
+  step = 0.1,
+  min = 0,
+  max = 100,
+  value,
+  onChange
+}) => {
+  const increase = useCallback(() => {
+    let nextValue = value + step;
+    if (nextValue > max) nextValue = max;
+    onChange(nextValue);
+  }, [max, onChange, step, value]);
+  const decrease = useCallback(() => {
+    let nextValue = value - step;
+    if (nextValue < min) nextValue = min;
+    onChange(nextValue);
+  }, [min, onChange, step, value]);
+  return /* @__PURE__ */ jsxs(InputStepContainer, { children: [
+    /* @__PURE__ */ jsx(IconButton, { onPointerDown: decrease, children: "-" }),
+    /* @__PURE__ */ jsx(ValueContainer, { children: value.toFixed(fixed) }),
+    /* @__PURE__ */ jsx(IconButton, { onPointerDown: increase, children: "+" })
+  ] });
+};
+const DEFAULT_CALIBRATION_VALUE = 8;
 const SPMFieldCalibrationModal = kosComponent(
   ({ pump, onComplete }) => {
     const { t } = useKosTranslation("common", {
@@ -8861,6 +8905,12 @@ const SPMFieldCalibrationModal = kosComponent(
     const [error, setError] = useState();
     const [volume1, setVolume1] = useState();
     const [volume2, setVolume2] = useState();
+    const { calibrateVolume } = usePumpCalibration(pump);
+    useEffect(() => {
+      if (!calibrateVolume) return;
+      if (volume1 === void 0) setVolume1(calibrateVolume.toString());
+      if (volume2 === void 0) setVolume2(calibrateVolume.toString());
+    }, [calibrateVolume, volume1, volume2]);
     const { clearFuture, future } = useFutureContainer(pump);
     useEffect(() => {
       switch (future?.endState) {
@@ -8897,19 +8947,28 @@ const SPMFieldCalibrationModal = kosComponent(
     const workflow = useMemo(() => {
       return {
         "preparation-idle": {
-          information: /* @__PURE__ */ jsx(LabelInformationPreformatted, { children: t("preparation-idle-info") }),
-          footer: /* @__PURE__ */ jsx(
-            Button,
-            {
-              onPointerDown: () => {
-                clearFuture();
-                pump.performPreCalibrate();
-                setState("preparation-in-progress");
-              },
-              children: t("preparation-action")
-            }
-          ),
-          status: "information"
+          information: /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(LabelInformation, { children: t("preparation-idle-step") }),
+            /* @__PURE__ */ jsx(InfoMessage, { children: t("preparation-idle-alert") }),
+            /* @__PURE__ */ jsx(InstructionCard, { children: /* @__PURE__ */ jsxs("ol", { children: [
+              /* @__PURE__ */ jsx("li", { children: t("preparation-idle-info-1") }),
+              /* @__PURE__ */ jsx("li", { children: t("preparation-idle-info-2") })
+            ] }) })
+          ] }),
+          footer: /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Button, { onPointerDown: onComplete, children: t("cancel") }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                onPointerDown: () => {
+                  clearFuture();
+                  pump.performPreCalibrate();
+                  setState("preparation-in-progress");
+                },
+                children: t("preparation-action")
+              }
+            )
+          ] })
         },
         "preparation-in-progress": {
           information: /* @__PURE__ */ jsx(LabelInformation, { children: t("preparation-progress-info") }),
@@ -8923,19 +8982,25 @@ const SPMFieldCalibrationModal = kosComponent(
         },
         "preparation-failed": {},
         "calibration-idle": {
-          information: /* @__PURE__ */ jsx(LabelInformationPreformatted, { children: t("calibration-idle-info") }),
-          footer: /* @__PURE__ */ jsx(
-            Button,
-            {
-              onPointerDown: () => {
-                clearFuture();
-                pump.performCalibrate();
-                setState("calibration-in-progress");
-              },
-              children: t("calibrate")
-            }
-          ),
-          status: "information"
+          information: /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(LabelInformation, { children: t("calibration-idle-step") }),
+            /* @__PURE__ */ jsx(InfoMessage, { children: t("calibration-idle-alert") }),
+            /* @__PURE__ */ jsx(InstructionCard, { children: t("calibration-idle-info-1") })
+          ] }),
+          footer: /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Button, { onPointerDown: onComplete, children: t("cancel") }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                onPointerDown: () => {
+                  clearFuture();
+                  pump.performCalibrate();
+                  setState("calibration-in-progress");
+                },
+                children: t("calibrate")
+              }
+            )
+          ] })
         },
         "calibration-in-progress": {
           information: /* @__PURE__ */ jsx(LabelInformation, { children: t("calibration-progress-info") }),
@@ -8945,49 +9010,64 @@ const SPMFieldCalibrationModal = kosComponent(
           information: /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(LabelInformation, { children: t("calibration-input-info") }),
             /* @__PURE__ */ jsx(
-              InputCard,
+              InputStep,
               {
-                label: "Volume",
-                unitValue: "ml",
-                layout: "num",
                 onChange: (value) => {
-                  if (value === void 0) return;
-                  setVolume1(value);
+                  setVolume1(value.toString());
                 },
-                value: volume1 !== void 0 ? volume1 : ""
+                value: volume1 !== void 0 ? Number(volume1) : DEFAULT_CALIBRATION_VALUE
               }
             )
           ] }),
-          footer: /* @__PURE__ */ jsx(
-            Button,
-            {
-              disabled: volume1 === void 0,
-              onPointerDown: () => {
-                if (volume1 === void 0) return;
-                setState("verification-idle");
-              },
-              children: t("proceed")
-            }
-          ),
+          footer: /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Button, { onPointerDown: onComplete, children: t("cancel") }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                disabled: volume1 === void 0,
+                onPointerDown: () => {
+                  if (volume1 === void 0) return;
+                  setState("calibration-input-confirmation");
+                },
+                children: t("proceed")
+              }
+            )
+          ] })
+        },
+        "calibration-input-confirmation": {
+          information: /* @__PURE__ */ jsx(LabelInformation, { children: t("calibration-confirm-info", {
+            data: { volume: Number(volume1).toFixed(1) }
+          }) }),
+          footer: /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Button, { onPointerDown: () => setState("calibration-input"), children: t("go-back") }),
+            /* @__PURE__ */ jsx(Button, { onPointerDown: () => setState("verification-idle"), children: t("confirm-and-proceed") })
+          ] }),
           status: "information"
         },
-        // Todo: calibration-input-confirmation if necessary...
-        "calibration-input-confirmation": {},
         "verification-idle": {
-          information: /* @__PURE__ */ jsx(LabelInformationPreformatted, { children: t("verification-idle-info") }),
-          footer: /* @__PURE__ */ jsx(
-            Button,
-            {
-              onPointerDown: async () => {
-                if (volume1 === void 0) return;
-                clearFuture();
-                pump.performVerify(volume1, future?.clientData);
-                setState("verification-in-progress");
-              },
-              children: t("initiate-verification-pour")
-            }
-          ),
-          status: "information"
+          information: /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(LabelInformation, { children: t("verification-idle-step") }),
+            /* @__PURE__ */ jsx(InfoMessage, { children: t("verification-idle-alert") }),
+            /* @__PURE__ */ jsx(InstructionCard, { children: /* @__PURE__ */ jsxs("ol", { children: [
+              /* @__PURE__ */ jsx("li", { children: t("verification-idle-info-1") }),
+              /* @__PURE__ */ jsx("li", { children: t("verification-idle-info-2") })
+            ] }) })
+          ] }),
+          footer: /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Button, { onPointerDown: onComplete, children: t("cancel") }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                onPointerDown: async () => {
+                  if (volume1 === void 0) return;
+                  clearFuture();
+                  pump.performVerify(volume1, future?.clientData);
+                  setState("verification-in-progress");
+                },
+                children: t("initiate-verification-pour")
+              }
+            )
+          ] })
         },
         "verification-in-progress": {
           information: /* @__PURE__ */ jsx(LabelInformation, { children: t("verification-progress-info") }),
@@ -8998,45 +9078,59 @@ const SPMFieldCalibrationModal = kosComponent(
           information: /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(LabelInformation, { children: t("verification-input-info") }),
             /* @__PURE__ */ jsx(
-              InputCard,
+              InputStep,
               {
-                label: "Volume",
-                unitValue: "ml",
-                layout: "num",
                 onChange: (value) => {
-                  if (value === void 0) return;
-                  setVolume2(value);
+                  setVolume2(value.toString());
                 },
-                value: volume2 !== void 0 ? volume2 : ""
+                value: volume2 !== void 0 ? Number(volume2) : DEFAULT_CALIBRATION_VALUE
+              }
+            )
+          ] }),
+          footer: /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Button, { onPointerDown: onComplete, children: t("cancel") }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                disabled: volume2 === void 0,
+                onPointerDown: async () => {
+                  setState("verification-input-confirmation");
+                },
+                children: t("proceed")
+              }
+            )
+          ] })
+        },
+        "verification-input-confirmation": {
+          information: /* @__PURE__ */ jsx(LabelInformation, { children: t("calibration-confirm-info", {
+            data: { volume: Number(volume2).toFixed(1) }
+          }) }),
+          footer: /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Button, { onPointerDown: () => setState("verification-input"), children: t("go-back") }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                onPointerDown: async () => {
+                  if (volume1 === void 0 || volume2 === void 0) return;
+                  clearFuture();
+                  const [error2, data] = await pump.performComplete(
+                    volume1,
+                    volume2,
+                    future?.clientData
+                  );
+                  if (error2) {
+                    setError(error2);
+                    setState("failure");
+                  } else {
+                    setState("verification-success");
+                  }
+                },
+                children: t("confirm-and-proceed")
               }
             )
           ] }),
-          footer: /* @__PURE__ */ jsx(
-            Button,
-            {
-              disabled: volume2 === void 0,
-              onPointerDown: async () => {
-                if (volume1 === void 0 || volume2 === void 0) return;
-                clearFuture();
-                const [error2, data] = await pump.performComplete(
-                  volume1,
-                  volume2,
-                  future?.clientData
-                );
-                if (error2) {
-                  setError(error2);
-                  setState("failure");
-                } else {
-                  setState("verification-success");
-                }
-              },
-              children: t("proceed")
-            }
-          ),
           status: "information"
         },
-        // Todo: verification-input-confirmation if necessary...
-        "verification-input-confirmation": {},
         "verification-success": {
           information: /* @__PURE__ */ jsx(LabelInformation, { children: t("verification-success-info") }),
           footer: /* @__PURE__ */ jsx(Button, { onPointerDown: onComplete, children: t("exit-calibration") }),