WIP

app/src/App/OnDeviceDisplayApp.tsx

@@ -42,6 +42,7 @@ import { InstrumentDetail } from '../pages/InstrumentDetail'
 import { Welcome } from '../pages/Welcome'
 import { InitialLoadingScreen } from '../pages/InitialLoadingScreen'
 import { DeckConfigurationEditor } from '../pages/DeckConfiguration'
+import { ErrorRecoveryFlows } from '../pages/ErrorRecoveryFlows'
 import { PortalRoot as ModalPortalRoot } from './portal'
 import { getOnDeviceDisplaySettings, updateConfigValue } from '../redux/config'
 import { updateBrightness } from '../redux/shell'
@@ -85,12 +86,13 @@ export const ON_DEVICE_DISPLAY_PATHS = [
   '/welcome',
 ] as const
 
+// TOME: THIS IS FOR DEV PURPOSES ONLY - DO NOT COMMIT THIS!
 function getPathComponent(
   path: typeof ON_DEVICE_DISPLAY_PATHS[number]
 ): JSX.Element {
   switch (path) {
     case '/dashboard':
-      return <RobotDashboard />
+      return <RunningProtocol />
     case '/deck-configuration':
       return <DeckConfigurationEditor />
     case '/emergency-stop':

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

@@ -1,3 +1,10 @@
 {
-  "run_paused": "Run paused"
+  "before_you_begin": "Before you begin",
+  "general_error": "General error",
+  "general_error_message": "<Placeholder>",
+  "recovery_mode": "Recovery Mode",
+  "recovery_mode_explanation": "<block>Recovery Mode provides you with guided and manual controls for handling errors at runtime.</block><br/><block>You can make changes to ensure the step in progress when the error occurred can be completed or choose to cancel the protocol. When changes are made and no subsequent errors are detected, the method completes. Depending on the conditions that caused the error, you will only be provided with appropriate options.</block>",
+  "run_paused": "Run paused",
+  "stand_back": "Stand back, robot is in motion",
+  "view_recovery_options": "View recovery options"
 }

app/src/organisms/OnDeviceDisplay/RunningProtocol/RunPausedSplash.tsx

@@ -18,13 +18,13 @@ import {
 } from '@opentrons/components'
 
 interface RunPausedSplashProps {
-  onClose: () => void
+  onClick: () => void
   errorType?: string
   protocolName?: string
 }
 
 export function RunPausedSplash({
-  onClose,
+  onClick,
   errorType,
   protocolName,
 }: RunPausedSplashProps): JSX.Element {
@@ -48,7 +48,7 @@ export function RunPausedSplash({
       gridGap={SPACING.spacing40}
       padding={SPACING.spacing120}
       backgroundColor={COLORS.grey50}
-      onClick={onClose}
+      onClick={onClick}
     >
       <SplashFrame>
         <Flex gridGap={SPACING.spacing32} alignItems={ALIGN_CENTER}>

app/src/organisms/OnDeviceDisplay/RunningProtocol/__tests__/RunPausedSplash.test.tsx

@@ -28,7 +28,7 @@ describe('ConfirmCancelRunModal', () => {
 
   beforeEach(() => {
     props = {
-      onClose: mockOnClose,
+      onClick: mockOnClose,
       protocolName: MOCK_PROTOCOL_NAME,
       errorType: '',
     }

app/src/pages/ErrorRecoveryFlows/BeforeBeginning.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react'
+import { Trans, useTranslation } from 'react-i18next'
+
+import {
+  DIRECTION_COLUMN,
+  Flex,
+  JUSTIFY_SPACE_BETWEEN,
+  SPACING,
+  JUSTIFY_CENTER,
+  StyledText,
+} from '@opentrons/components'
+
+import { SmallButton } from '../../atoms/buttons'
+import {
+  RECOVERY_COLOR_STYLE,
+  BODY_TEXT_STYLE,
+  ODD_SECTION_TITLE_STYLE,
+} from './constants'
+
+import type { RecoveryContentProps } from './types'
+
+export function BeforeBeginning({
+  isOnDevice,
+  routeUpdateActions,
+}: RecoveryContentProps): JSX.Element | null {
+  const { t } = useTranslation('error_recovery')
+  const { proceed } = routeUpdateActions
+
+  if (isOnDevice) {
+    return (
+      <Flex
+        padding={SPACING.spacing32}
+        flexDirection={DIRECTION_COLUMN}
+        justifyContent={JUSTIFY_SPACE_BETWEEN}
+        height="100%"
+      >
+        <Flex flexDirection={DIRECTION_COLUMN} height="100%">
+          <Flex css={ODD_SECTION_TITLE_STYLE}>{t('before_you_begin')}</Flex>
+          <Trans
+            t={t}
+            i18nKey={'error_recovery:recovery_mode_explanation'}
+            components={{ block: <StyledText as="p" css={BODY_TEXT_STYLE} /> }}
+          />
+          <SmallButton
+            buttonType="primary"
+            css={RECOVERY_COLOR_STYLE}
+            buttonText={t('view_recovery_options')}
+            justifyContent={JUSTIFY_CENTER}
+            onClick={proceed}
+            marginTop="auto"
+          />
+        </Flex>
+      </Flex>
+    )
+  } else {
+    return null
+  }
+}

app/src/pages/ErrorRecoveryFlows/ErrorRecoveryHeader.tsx

@@ -0,0 +1,88 @@
+import * as React from 'react'
+import { useTranslation } from 'react-i18next'
+import { css } from 'styled-components'
+
+import {
+  Box,
+  DIRECTION_ROW,
+  BORDERS,
+  ALIGN_CENTER,
+  Flex,
+  JUSTIFY_SPACE_BETWEEN,
+  TYPOGRAPHY,
+  COLORS,
+  SPACING,
+  RESPONSIVENESS,
+  StyledText,
+  Icon,
+} from '@opentrons/components'
+
+import { useErrorName } from './utils'
+import { NON_DESIGNED_SANCTION_COLOR_BLACK } from './constants'
+
+interface ErrorRecoveryHeaderProps {
+  errorType?: string
+}
+export function ErrorRecoveryHeader({
+  errorType,
+}: ErrorRecoveryHeaderProps): JSX.Element {
+  const { t } = useTranslation('error_recovery')
+  const errorName = useErrorName(errorType)
+
+  return (
+    <Box css={BOX_STYLE}>
+      <Flex css={HEADER_CONTAINER_STYLE}>
+        <Flex
+          flexDirection={DIRECTION_ROW}
+          justifyContent={JUSTIFY_SPACE_BETWEEN}
+          alignItems={ALIGN_CENTER}
+          width="100%"
+        >
+          <StyledText css={HEADER_TEXT_STYLE}>{t('recovery_mode')}</StyledText>
+          <Flex gridGap={SPACING.spacing8}>
+            <AlertHeaderIcon />
+            <StyledText css={HEADER_TEXT_STYLE}>{errorName}</StyledText>
+          </Flex>
+        </Flex>
+      </Flex>
+    </Box>
+  )
+}
+
+function AlertHeaderIcon(): JSX.Element {
+  return (
+    <Icon
+      name="ot-alert"
+      css={css`
+        color: ${COLORS.white};
+      `}
+      size="1.75rem"
+    />
+  )
+}
+
+const BOX_STYLE = css`
+  background-color: ${NON_DESIGNED_SANCTION_COLOR_BLACK};
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    border-radius: ${BORDERS.borderRadius12} ${BORDERS.borderRadius12} 0 0;
+  }
+`
+const HEADER_CONTAINER_STYLE = css`
+  flex-direction: ${DIRECTION_ROW};
+  justify-content: ${JUSTIFY_SPACE_BETWEEN};
+  padding: ${SPACING.spacing16} ${SPACING.spacing32};
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    padding: 1.75rem ${SPACING.spacing32};
+  }
+`
+const HEADER_TEXT_STYLE = css`
+  ${TYPOGRAPHY.pSemiBold}
+  color: ${COLORS.white};
+  cursor: default;
+
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    font-size: ${TYPOGRAPHY.fontSize22};
+    font-weight: ${TYPOGRAPHY.fontWeightBold};
+    line-height: ${TYPOGRAPHY.lineHeight28};
+  }
+`

app/src/pages/ErrorRecoveryFlows/SelectRecoveryOption.tsx

@@ -0,0 +1,5 @@
+import * as React from 'react'
+
+export function SelectRecoveryOption(): JSX.Element {
+  return <div>RECOVERY OPTION</div>
+}

app/src/pages/ErrorRecoveryFlows/constants.ts

@@ -0,0 +1,99 @@
+import { css } from 'styled-components'
+
+import { COLORS, SPACING, TYPOGRAPHY } from '@opentrons/components'
+
+import type { RouteStep } from './types'
+
+/**
+ * Error Kinds
+ */
+
+export const ERROR_KINDS = {
+  GENERAL_ERROR: 'GENERAL_ERROR',
+} as const
+
+/**
+ * Recovery Routes and Steps
+ */
+
+// A recovery route represents a flow accessible within Error Recovery.
+export const RECOVERY_ROUTES = {
+  OPTION_SELECTION: 'OPTION_SELECTION',
+  BEFORE_BEGINNING: 'BEFORE_BEGINNING',
+  DROP_TIP: 'DROP_TIP',
+  ROBOT_IN_MOTION: 'ROBOT_IN_MOTION',
+} as const
+
+// Valid steps for a particular route.
+export const STEPS = {
+  OPTION_SELECTION: {
+    SELECT: 'SELECT',
+  },
+  BEFORE_BEGINNING: {
+    RECOVERY_DESCRIPTION: 'RECOVERY_DESCRIPTION',
+  },
+  ROBOT_IN_MOTION: {
+    IN_MOTION: 'IN_MOTION',
+  },
+  INVALID: 'INVALID',
+} as const
+
+const { BEFORE_BEGINNING, OPTION_SELECTION, ROBOT_IN_MOTION } = STEPS
+
+export const OPTION_SELECTION_STEPS: RouteStep[] = [OPTION_SELECTION.SELECT]
+export const BEFORE_BEGINNING_STEPS: RouteStep[] = [
+  BEFORE_BEGINNING.RECOVERY_DESCRIPTION,
+]
+export const ROBOT_IN_MOTION_STEPS: RouteStep[] = [ROBOT_IN_MOTION.IN_MOTION]
+
+// Possible recovery options.
+export const RECOVERY_OPTIONS = {
+  REFILL_AND_RESUME: 'REFILL_AND_RESUME',
+  IGNORE_AND_RESUME: 'IGNORE_AND_RESUME',
+  CANCEL_RUN: 'CANCEL_RUN',
+} as const
+
+/**
+ * Recovery Options
+ * Valid recovery options given an errorKind.
+ */
+
+const { REFILL_AND_RESUME, IGNORE_AND_RESUME, CANCEL_RUN } = RECOVERY_OPTIONS
+
+export const GENERAL_ERROR_OPTIONS = [
+  REFILL_AND_RESUME,
+  IGNORE_AND_RESUME,
+  CANCEL_RUN,
+]
+
+/**
+ * Styling
+ */
+
+// These colors are temp and will be removed as design does design things.
+export const NON_DESIGN_SANCTIONED_COLOR_1 = '#56FF00'
+export const NON_DESIGN_SANCTIONED_COLOR_2 = '#FF00EF'
+export const NON_DESIGNED_SANCTION_COLOR_BLACK = COLORS.black90
+
+export const RECOVERY_COLOR_STYLE = css`
+  background-color: ${NON_DESIGNED_SANCTION_COLOR_BLACK};
+
+  &:active {
+    background-color: ${NON_DESIGN_SANCTIONED_COLOR_2};
+  }
+  &:hover {
+    background-color: ${NON_DESIGN_SANCTIONED_COLOR_1};
+  }
+  &:focus {
+    background-color: ${NON_DESIGN_SANCTIONED_COLOR_2};
+  }
+`
+
+export const BODY_TEXT_STYLE = css`
+  ${TYPOGRAPHY.bodyTextRegular};
+`
+
+export const ODD_SECTION_TITLE_STYLE = css`
+  ${TYPOGRAPHY.level4HeaderSemiBold}
+  margin-bottom: ${SPACING.spacing16};
+`

app/src/pages/ErrorRecoveryFlows/getErrorKind.ts

@@ -0,0 +1 @@
+import { ERROR_KINDS } from './constants'