feat(app): update submerge and retract screen to align with pd (#18892)

* feat(app): update submerge and retract screen to align with pd

Author: koji

app/src/assets/localization/en/quick_transfer.json

@@ -135,7 +135,7 @@
   "reset_settings": "Reset {{transferName}} settings",
   "retract_after_aspirating": "Retract after aspirating",
   "retract_after_dispensing": "Retract after dispensing",
-  "retract_value": "{{speed}} mm/s, {{position}} mm from bottom",
+  "retract_value": "{{speed}} mm/s, {{delayDuration}} s, {{position}} mm from bottom",
   "retract": "Retract",
   "right_mount": "Right Mount",
   "run_now": "Run now",
@@ -165,11 +165,11 @@
   "speed": "Speed (mm/second)",
   "starting_well": "starting well",
   "storage_limit_reached": "Storage limit reached",
-  "submerge_aspirating_description": "Lower the tip into the liquid before aspirating",
+  "submerge_aspirate_description": "Lower the tip into the liquid before aspirating",
   "submerge_before_aspirating": "Submerge before aspirating",
   "submerge_before_dispensing": " Submerge before dispensing",
-  "submerge_dispensing_description": "Lower the tip into the liquid before dispensing",
-  "submerge_value": "{{speed}} mm/s, {{position}} mm",
+  "submerge_dispense_description": "Lower the tip into the liquid before dispensing",
+  "submerge_value": "{{speed}} mm/s, {{delayDuration}} s, {{position}} mm",
   "submerge": "Submerge",
   "tip_change_frequency": "Tip change frequency",
   "tip_drop_location": "Tip drop location",

app/src/organisms/ODD/QuickTransferFlow/Aspirate/hooks/useAspirateSettingsConfig.ts

@@ -60,6 +60,7 @@ export function useAspirateSettingsConfig({
         state.submergeAspirate !== undefined
           ? t('submerge_value', {
               speed: state.submergeAspirate.speed,
+              delayDuration: state.submergeAspirate.delayDuration,
               position: state.submergeAspirate.positionFromBottom,
             })
           : '',
@@ -134,6 +135,7 @@ export function useAspirateSettingsConfig({
         state.retractAspirate !== undefined
           ? t('retract_value', {
               speed: state.retractAspirate.speed,
+              delayDuration: state.retractAspirate.delayDuration,
               position: state.retractAspirate.positionFromBottom,
             })
           : '',

app/src/organisms/ODD/QuickTransferFlow/Dispense/hooks/useDispenseSettingsConfig.ts

@@ -80,6 +80,7 @@ export function useDispenseSettingsConfig({
         state.submergeDispense !== undefined
           ? t('submerge_value', {
               speed: state.submergeDispense.speed,
+              delayDuration: state.submergeDispense.delayDuration,
               position: state.submergeDispense.positionFromBottom,
             })
           : '',
@@ -145,6 +146,7 @@ export function useDispenseSettingsConfig({
         state.retractDispense !== undefined
           ? t('retract_value', {
               speed: state.retractDispense.speed,
+              delayDuration: state.retractDispense.delayDuration,
               position: state.retractDispense.positionFromBottom,
             })
           : '',

app/src/organisms/ODD/QuickTransferFlow/QuickTransferAdvancedSettings/Retract.tsx

@@ -50,6 +50,9 @@ export function Retract({
   const [speed, setSpeed] = useState<number | null>(
     retractSettings?.speed ?? null
   )
+  const [delayDuration, setDelayDuration] = useState<number | null>(
+    retractSettings?.delayDuration ?? null
+  )
   const [position, setPosition] = useState<number | null>(
     retractSettings?.positionFromBottom ?? null
   )
@@ -64,36 +67,48 @@ export function Retract({
   }
 
   const handleClickSaveOrContinue = (): void => {
-    if (currentStep === 1) {
-      setCurrentStep(2)
-    }
-    if (currentStep === 2) {
-      if (speed !== null && position !== null) {
-        dispatch({
-          type: action,
-          retractSettings: {
-            speed: speed,
-            positionFromBottom: position,
-          },
-        })
-        trackEventWithRobotSerial({
-          name: ANALYTICS_QUICK_TRANSFER_SETTING_SAVED,
-          properties: {
-            setting: `Retract_${kind}`,
-          },
-        })
-        onBack()
-      }
+    switch (currentStep) {
+      case 1:
+        setCurrentStep(2)
+        break
+      case 2:
+        setCurrentStep(3)
+        break
+      case 3:
+        if (speed !== null && position !== null && delayDuration !== null) {
+          dispatch({
+            type: action,
+            retractSettings: {
+              speed,
+              delayDuration,
+              positionFromBottom: position,
+            },
+          })
+          trackEventWithRobotSerial({
+            name: ANALYTICS_QUICK_TRANSFER_SETTING_SAVED,
+            properties: {
+              setting: `Retract_${kind}`,
+            },
+          })
+          onBack()
+        }
+        break
     }
   }
+
   const setSaveOrContinueButtonText =
-    currentStep === 1 ? t('shared:continue') : t('shared:save')
+    currentStep === 1 || currentStep === 2
+      ? t('shared:continue')
+      : t('shared:save')
 
   let buttonIsDisabled = false
   if (speed == null && currentStep === 1) {
     buttonIsDisabled = true
   }
-  if (position == null && currentStep === 2) {
+  if (delayDuration == null && currentStep === 2) {
+    buttonIsDisabled = true
+  }
+  if (position == null && currentStep === 3) {
     buttonIsDisabled = true
   }
 
@@ -123,10 +138,12 @@ export function Retract({
         <RetractSettingComponent
           kind={kind}
           state={state}
-          setSpeed={setSpeed}
-          setPosition={setPosition}
           speed={speed}
+          setSpeed={setSpeed}
+          delayDuration={delayDuration}
+          setDelayDuration={setDelayDuration}
           position={position}
+          setPosition={setPosition}
           currentStep={currentStep}
         />
       </Flex>
@@ -138,8 +155,10 @@ export function Retract({
 interface RetractSettingComponentProps {
   kind: FlowRateKind
   state: QuickTransferSummaryState
-  setSpeed: (speed: number) => void
-  setPosition: (position: number) => void
+  setSpeed: (speed: number | null) => void
+  setPosition: (position: number | null) => void
+  delayDuration: number | null
+  setDelayDuration: (delayDuration: number | null) => void
   speed: number | null
   position: number | null
   currentStep: number
@@ -150,6 +169,8 @@ function RetractSettingComponent({
   state,
   speed,
   setSpeed,
+  delayDuration,
+  setDelayDuration,
   position,
   setPosition,
   currentStep,
@@ -193,6 +214,33 @@ function RetractSettingComponent({
         })
       : null
 
+  const handleSpeedChange = (userInput: string): void => {
+    if (userInput === '') {
+      setSpeed(null)
+    } else {
+      const parsedValue = Number(userInput)
+      setSpeed(!isNaN(parsedValue) ? parsedValue : null)
+    }
+  }
+
+  const handleDelayDurationChange = (userInput: string): void => {
+    if (userInput === '') {
+      setDelayDuration(null)
+    } else {
+      const parsedValue = Number(userInput)
+      setDelayDuration(!isNaN(parsedValue) ? parsedValue : null)
+    }
+  }
+
+  const handlePositionChange = (userInput: string): void => {
+    if (userInput === '') {
+      setPosition(null)
+    } else {
+      const parsedValue = Number(userInput)
+      setPosition(!isNaN(parsedValue) ? parsedValue : null)
+    }
+  }
+
   const speedSetting = (): JSX.Element => {
     return (
       <>
@@ -219,10 +267,43 @@ function RetractSettingComponent({
           <NumericalKeyboard
             key={`${kind}_speed_keyboard`}
             keyboardRef={keyboardRef}
+            isDecimal
             initialValue={String(speed ?? '')}
-            onChange={e => {
-              setSpeed(Number(e))
-            }}
+            onChange={handleSpeedChange}
+          />
+        </Flex>
+      </>
+    )
+  }
+
+  const delayDurationSetting = (): JSX.Element => {
+    return (
+      <>
+        <Flex
+          width="30.5rem"
+          height="100%"
+          gridGap={SPACING.spacing24}
+          flexDirection={DIRECTION_COLUMN}
+          marginTop={SPACING.spacing68}
+        >
+          <InputField
+            type="number"
+            value={delayDuration}
+            title={t('delay_duration_s')}
+            readOnly
+          />
+        </Flex>
+        <Flex
+          paddingX={SPACING.spacing24}
+          height="21.25rem"
+          marginTop="7.75rem"
+        >
+          <NumericalKeyboard
+            key={`${kind}_delay_duration_keyboard`}
+            keyboardRef={keyboardRef}
+            isDecimal
+            initialValue={String(delayDuration ?? '')}
+            onChange={handleDelayDurationChange}
           />
         </Flex>
       </>
@@ -256,15 +337,12 @@ function RetractSettingComponent({
           paddingX={SPACING.spacing24}
           height="21.25rem"
           marginTop="7.75rem"
-          borderRadius="0"
         >
           <NumericalKeyboard
             key={`${kind}_position_keyboard`}
             keyboardRef={keyboardRef}
             initialValue={String(position ?? '')}
-            onChange={e => {
-              setPosition(Number(e))
-            }}
+            onChange={handlePositionChange}
           />
         </Flex>
       </>
@@ -275,6 +353,8 @@ function RetractSettingComponent({
     case 1:
       return speedSetting()
     case 2:
+      return delayDurationSetting()
+    case 3:
       return positionSetting()
     default:
       console.error('step not found')