fix(app): add EmptyHopper screen for stacker stalled error recovery flows (#19129)

# Overview
This PR adds a screen to advice user to empty the stacker hopper when
recovering from a stacker stalled error.

Author: ahiuchingau

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

@@ -20,6 +20,7 @@
   "clear_track_of_obstructions_and_close_door": "<block>Carefully clear the track of any dislodged labware or obstructions.</block><block>Close the robot and stacker door before proceeding.</block>",
   "close_door_to_resume": "Close robot door to resume",
   "close_robot_and_stacker_door": "Close the robot and stacker door",
+  "close_robot_and_stacker_door_before_proceeding": "Close the robot and stacker door before proceeding.",
   "close_robot_door": "Close the robot door",
   "close_the_robot_door": "Close the robot door, and then resume the recovery action.",
   "confirm": "Confirm",
@@ -30,7 +31,7 @@
   "door_open_robot_home": "The robot needs to safely move to its home location before you manually move the labware.",
   "droplets_or_liquid_cause_failure": "Droplets or liquid in the tips may cause liquid level detection to fail",
   "empty_stacker_of_labware_above_latch": "Empty stacker of labware above latch",
-  "empty_stacker_of_labware_above_latch_labware_stuck": "<block>Empty the stacker of all labware above the latch.</block><block>Labware stuck on the latch will be retrieved later in recovery.</block>",
+  "empty_stacker_of_all_labware": "Empty the stacker of all labware above the latch.",
   "ensure_lw_is_accurately_placed": "Ensure labware is accurately placed in the slot to prevent further errors.",
   "ensure_stacker_has_labware": "Ensure stacker has labware",
   "error": "Error",
@@ -61,6 +62,7 @@
   "labware_missing_detected_when": "Stacker empty errors occur when the robot tries to retrieve labware from an empty stacker",
   "labware_not_retrieved": "Stacker latch jammed",
   "labware_released_from_current_height": "The labware will be released from its current height.",
+  "labware_stuck_on_latch": "Labware stuck on the latch will be retrieved later in recovery.",
   "latch_releasing_labware": "Latch releasing labware",
   "latch_will_release_in_s": "Latch will release labware in {{seconds}} seconds",
   "launch_recovery_mode": "Launch recovery mode",

app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/StackerStalledRetry.tsx

@@ -1,6 +1,7 @@
 import { RECOVERY_MAP } from '../constants'
 import {
   RetryStepInfo,
+  StackerEmptyHopper,
   StackerEnsureShuttleEmpty,
   StackerHomeShuttle,
   StackerHopperLwInfo,
@@ -15,6 +16,8 @@ export function StackerStalledRetry(props: RecoveryContentProps): JSX.Element {
   const { STACKER_STALLED_RETRY } = RECOVERY_MAP
 
   switch (step) {
+    case STACKER_STALLED_RETRY.STEPS.EMPTY_STACKER:
+      return <StackerEmptyHopper {...props} />
     case STACKER_STALLED_RETRY.STEPS.PREPARE_TRACK_FOR_HOMING:
     case STACKER_STALLED_RETRY.STEPS.CLEAR_TRACK_OF_OBSTRUCTIONS:
       return <StackerHomeShuttle {...props} />

app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/StackerStalledSkip.tsx

@@ -1,6 +1,7 @@
 import { RECOVERY_MAP } from '../constants'
 import {
   SkipStepInfo,
+  StackerEmptyHopper,
   StackerHomeShuttle,
   StackerHopperLwInfo,
   StackerShuttleLwInfo,
@@ -15,6 +16,8 @@ export function StackerStalledSkip(props: RecoveryContentProps): JSX.Element {
   const { STACKER_STALLED_SKIP } = RECOVERY_MAP
 
   switch (step) {
+    case STACKER_STALLED_SKIP.STEPS.EMPTY_STACKER:
+      return <StackerEmptyHopper {...props} />
     case STACKER_STALLED_SKIP.STEPS.PREPARE_TRACK_FOR_HOMING:
     case STACKER_STALLED_SKIP.STEPS.CLEAR_TRACK_OF_OBSTRUCTIONS:
       return <StackerHomeShuttle {...props} />

app/src/organisms/ErrorRecoveryFlows/constants.ts

@@ -206,6 +206,7 @@ export const RECOVERY_MAP = {
   STACKER_STALLED_RETRY: {
     ROUTE: 'stacker-stalled-retry',
     STEPS: {
+      EMPTY_STACKER: 'empty-stacker',
       PREPARE_TRACK_FOR_HOMING: 'prepare-track-for-homing',
       CLEAR_TRACK_OF_OBSTRUCTIONS: 'clear-track-of-obstructions',
       CHECK_HOPPER: 'check-hopper',
@@ -216,6 +217,7 @@ export const RECOVERY_MAP = {
   STACKER_STALLED_SKIP: {
     ROUTE: 'stacker-stalled-skip',
     STEPS: {
+      EMPTY_STACKER: 'empty-stacker',
       PREPARE_TRACK_FOR_HOMING: 'prepare-track-for-homing',
       CLEAR_TRACK_OF_OBSTRUCTIONS: 'clear-track-of-obstructions',
       PLACE_LABWARE_ON_SHUTTLE: 'place-labware-on-shuttle',
@@ -416,13 +418,15 @@ export const STEP_ORDER: StepOrder = {
     MANUAL_REPLACE_AND_RETRY.STEPS.RETRY,
   ],
   [STACKER_STALLED_RETRY.ROUTE]: [
+    STACKER_STALLED_RETRY.STEPS.EMPTY_STACKER,
     STACKER_STALLED_RETRY.STEPS.PREPARE_TRACK_FOR_HOMING,
     STACKER_STALLED_RETRY.STEPS.CLEAR_TRACK_OF_OBSTRUCTIONS,
     STACKER_STALLED_RETRY.STEPS.CHECK_HOPPER,
     STACKER_STALLED_RETRY.STEPS.ENSURE_SHUTTLE_EMPTY,
     STACKER_STALLED_RETRY.STEPS.RETRY,
   ],
   [STACKER_STALLED_SKIP.ROUTE]: [
+    STACKER_STALLED_SKIP.STEPS.EMPTY_STACKER,
     STACKER_STALLED_SKIP.STEPS.PREPARE_TRACK_FOR_HOMING,
     STACKER_STALLED_SKIP.STEPS.CLEAR_TRACK_OF_OBSTRUCTIONS,
     STACKER_STALLED_SKIP.STEPS.PLACE_LABWARE_ON_SHUTTLE,
@@ -621,6 +625,9 @@ export const RECOVERY_MAP_METADATA: RecoveryRouteStepMetadata = {
     [MANUAL_REPLACE_AND_RETRY.STEPS.RETRY]: { allowDoorOpen: true },
   },
   [STACKER_STALLED_RETRY.ROUTE]: {
+    [STACKER_STALLED_RETRY.STEPS.EMPTY_STACKER]: {
+      allowDoorOpen: true,
+    },
     [STACKER_STALLED_RETRY.STEPS.PREPARE_TRACK_FOR_HOMING]: {
       allowDoorOpen: false,
     },
@@ -636,6 +643,9 @@ export const RECOVERY_MAP_METADATA: RecoveryRouteStepMetadata = {
     [STACKER_STALLED_RETRY.STEPS.RETRY]: { allowDoorOpen: false },
   },
   [STACKER_STALLED_SKIP.ROUTE]: {
+    [STACKER_STALLED_SKIP.STEPS.EMPTY_STACKER]: {
+      allowDoorOpen: true,
+    },
     [STACKER_STALLED_SKIP.STEPS.PREPARE_TRACK_FOR_HOMING]: {
       allowDoorOpen: false,
     },

app/src/organisms/ErrorRecoveryFlows/shared/StackerEmptyHopper.tsx

@@ -1,10 +1,11 @@
-import { Trans, useTranslation } from 'react-i18next'
+import { useTranslation } from 'react-i18next'
 
 import { StyledText } from '@opentrons/components'
 
 import EmptyHopper from '/app/assets/videos/error-recovery/FlexStacker_EmptyHopper.webm'
 import { DescriptionContent, TwoColumn } from '/app/molecules/InterventionModal'
 
+import { RECOVERY_MAP } from '../constants'
 import { RecoverySingleColumnContentWrapper } from './RecoveryContentWrapper'
 import { RecoveryFooterButtons } from './RecoveryFooterButtons'
 import { RightColumnAnimation } from './RightColumnAnimation'
@@ -13,23 +14,29 @@ import type { RecoveryContentProps } from '../types'
 
 export function StackerEmptyHopper(props: RecoveryContentProps): JSX.Element {
   const { t } = useTranslation('error_recovery')
-
-  const { routeUpdateActions } = props
+  const { routeUpdateActions, recoveryMap } = props
+  const { route } = recoveryMap
   const { proceedNextStep, goBackPrevStep } = routeUpdateActions
 
+  const getBodyText = (): string => {
+    switch (route) {
+      case RECOVERY_MAP.STACKER_SHUTTLE_EMPTY_RETRY.ROUTE:
+      case RECOVERY_MAP.STACKER_SHUTTLE_EMPTY_SKIP.ROUTE:
+        return t('labware_stuck_on_latch')
+      default:
+        return t('close_robot_and_stacker_door_before_proceeding')
+    }
+  }
+
   const buildBodyText = (): JSX.Element => (
-    <Trans
-      t={t}
-      i18nKey="empty_stacker_of_labware_above_latch_labware_stuck"
-      components={{
-        block: (
-          <StyledText
-            oddStyle="bodyTextRegular"
-            desktopStyle="bodyDefaultRegular"
-          />
-        ),
-      }}
-    />
+    <>
+      <StyledText oddStyle="bodyTextRegular" desktopStyle="bodyDefaultRegular">
+        {t('empty_stacker_of_all_labware')}
+      </StyledText>
+      <StyledText oddStyle="bodyTextRegular" desktopStyle="bodyDefaultRegular">
+        {getBodyText()}
+      </StyledText>
+    </>
   )
 
   return (

app/src/organisms/ErrorRecoveryFlows/shared/__tests__/StackerEmptyHopper.test.tsx

@@ -33,6 +33,10 @@ describe('Render StackerEmptyHopper', () => {
       recoveryCommands: {
         skipFailedCommand: mockSkipFailedCommand,
       } as any,
+      recoveryMap: {
+        route: RECOVERY_MAP.STACKER_SHUTTLE_EMPTY_RETRY.ROUTE,
+        step: RECOVERY_MAP.STACKER_SHUTTLE_EMPTY_RETRY.STEPS.EMPTY_STACKER,
+      },
       currentRecoveryOptionUtils: {
         selectedRecoveryOption: RECOVERY_MAP.STACKER_SHUTTLE_EMPTY_RETRY.ROUTE,
       } as any,
@@ -72,6 +76,7 @@ describe('Render StackerEmptyHopper', () => {
   ])(`renders correct title for step $step`, step => {
     props.recoveryMap = {
       ...props.recoveryMap,
+      route: RECOVERY_MAP.STACKER_SHUTTLE_EMPTY_RETRY.ROUTE,
       step: step,
     }
     render(props)
@@ -82,4 +87,20 @@ describe('Render StackerEmptyHopper', () => {
       'Labware stuck on the latch will be retrieved later in recovery.'
     )
   })
+
+  it.each([
+    RECOVERY_MAP.STACKER_STALLED_RETRY.STEPS.EMPTY_STACKER,
+    RECOVERY_MAP.STACKER_STALLED_SKIP.STEPS.EMPTY_STACKER,
+  ])(`renders correct title for step $step`, step => {
+    props.recoveryMap = {
+      ...props.recoveryMap,
+      route: RECOVERY_MAP.STACKER_STALLED_SKIP.ROUTE,
+      step: step,
+    }
+    render(props)
+
+    screen.getByText('Empty stacker of labware above latch')
+    screen.getByText('Empty the stacker of all labware above the latch.')
+    screen.getByText('Close the robot and stacker door before proceeding.')
+  })
 })