feat(app): add desktop and ODD droptip wizard loading/confirmation/er…

…rors on app (#13815)

Add loading, error, and confirmation states for all droptip wizard steps. Style tiles and add
content for ODD and desktop.

closes RAUT-796

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

@@ -1,15 +1,28 @@
 {
   "before_you_begin_do_you_want_to_blowout": "Before you begin, do you need to preserve aspirated liquid?",
   "blowout_complete": "blowout complete",
+  "blowout_liquid": "Blow out liquid",
   "choose_blowout_location": "choose blowout location",
   "choose_drop_tip_location": "choose tip-drop location",
+  "confirm_blowout_location": "Is the pipette positioned where the liquids should be blown out?",
+  "confirm_drop_tip_location": "Is the pipette positioned where the tips should be dropped?",
   "drop_tips": "drop tips",
   "drop_tip_complete": "tip drop complete",
+  "drop_tip_failed": "The drop tip could not be completed. Contact customer support for assistance.",
+  "error_dropping_tips": "Error dropping tips",
+  "exit_screen_title": "Exit before completing drop tip?",
+  "go_back": "go back",
+  "move_to_slot": "move to slot",
   "no_proceed_to_drop_tip": "No, proceed to tip removal",
   "position_and_blowout": "Ensure that the pipette tip is centered above and level with where you want the liquid to be blown out. If it isn't, use the controls below or your keyboard to jog the pipette until it is properly aligned.",
   "position_and_drop_tip": "Ensure that the pipette tip is centered above and level with where you want to drop the tips. If it isn't, use the controls below or your keyboard to jog the pipette until it is properly aligned.",
   "position_the_pipette": "position the pipette",
   "select_blowout_slot": "<block>You can blow out liquid into a labware or dispose of it.</block><block>Select the slot where you want to blow out the liquid on the deck map to the right. Once confirmed, the gantry will move to the chosen slot.</block>",
+  "select_blowout_slot_odd": "<block>You can blow out liquid into a labware or dispose of it.</block><block>After the gantry moves to the chosen slot, use the jog controls to move the pipette to the exact position for blowing out.</block>",
   "select_drop_tip_slot": "<block>You can return tips to a tip rack or dispose of them.</block><block>Select the slot where you want to drop the tips on the deck map to the right. Once confirmed, the gantry will move to the chosen slot.</block>",
+  "select_drop_tip_slot_odd": "<block>You can blow out liquid into a labware or dispose of it.</block><block>After the gantry moves to the chosen slot, use the jog controls to move the pipette to the exact position for dropping tips.</block>",
+  "stand_back_blowing_out": "Stand back, robot is blowing out",
+  "stand_back_dropping_tips": "Stand back, robot is dropping tips",
+  "stand_back_exiting": "Stand back, robot is in motion",
   "yes_blow_out_liquid": "Yes, blow out liquid in labware"
 }

app/src/organisms/DropTipWizard/BeforeBeginning.tsx

@@ -16,76 +16,156 @@ import {
   DISPLAY_INLINE_BLOCK,
   JUSTIFY_SPACE_BETWEEN,
   PrimaryButton,
+  JUSTIFY_FLEX_END,
+  POSITION_ABSOLUTE,
 } from '@opentrons/components'
 import { StyledText } from '../../atoms/text'
-import { NeedHelpLink } from '../CalibrationPanels'
+import { SmallButton, MediumButton } from '../../atoms/buttons'
+// import { NeedHelpLink } from '../CalibrationPanels'
+
+import blowoutVideo from '../../assets/videos/droptip-wizard/Blowout-Liquid.webm'
+import droptipVideo from '../../assets/videos/droptip-wizard/Drop-tip.webm'
 
 // TODO: get help link article URL
-const NEED_HELP_URL = ''
+// const NEED_HELP_URL = ''
 
 interface BeforeBeginningProps {
   handleCreateAndSetup: (shouldDispenseLiquid: boolean) => void
   isCreateLoading: boolean
+  isOnDevice: boolean
 }
 
 export const BeforeBeginning = (
   props: BeforeBeginningProps
 ): JSX.Element | null => {
-  const { handleCreateAndSetup, isCreateLoading } = props
+  const { handleCreateAndSetup, isCreateLoading, isOnDevice } = props
   const { i18n, t } = useTranslation(['drop_tip_wizard', 'shared'])
   const [flowType, setFlowType] = React.useState<
-    'liquid_and_tips' | 'only_tips'
-  >('liquid_and_tips')
+    'liquid_and_tips' | 'only_tips' | null
+  >(null)
   const handleProceed = (): void => {
     handleCreateAndSetup(flowType === 'liquid_and_tips')
   }
 
-  return (
-    <Flex css={TILE_CONTAINER_STYLE}>
-      <Title>{t('before_you_begin_do_you_want_to_blowout')}</Title>
-      <Flex flexDirection={DIRECTION_ROW} gridGap={SPACING.spacing24}>
-        <Flex
-          flex="1 0 auto"
-          onClick={() => setFlowType('liquid_and_tips')}
-          css={
-            flowType === 'liquid_and_tips'
-              ? SELECTED_OPTIONS_STYLE
-              : UNSELECTED_OPTIONS_STYLE
-          }
-        >
-          {/* <img
-            src={}
-            css={css`max-width: 11rem;`}
-          /> */}
-          <StyledText as="h3">{t('yes_blow_out_liquid')}</StyledText>
-        </Flex>
-        <Flex
-          flex="1 0 auto"
-          onClick={() => setFlowType('only_tips')}
-          css={
-            flowType === 'only_tips'
-              ? SELECTED_OPTIONS_STYLE
-              : UNSELECTED_OPTIONS_STYLE
-          }
-        >
-          {/* <img
-            src={}
-            css={css`max-width: 11rem;`}
-          /> */}
-          <StyledText as="h3">{t('no_proceed_to_drop_tip')}</StyledText>
-        </Flex>
-      </Flex>
+  if (isOnDevice) {
+    return (
       <Flex
-        flexDirection={DIRECTION_ROW}
+        padding={SPACING.spacing32}
+        flexDirection={DIRECTION_COLUMN}
         justifyContent={JUSTIFY_SPACE_BETWEEN}
+        height="100%"
       >
-        <NeedHelpLink href={NEED_HELP_URL} />
-        <PrimaryButton disabled={isCreateLoading} onClick={handleProceed}>
-          {i18n.format(t('shared:continue'), 'capitalize')}
-        </PrimaryButton>
+        <Flex flexDirection={DIRECTION_COLUMN}>
+          <Flex css={ODD_TITLE_STYLE}>
+            {t('before_you_begin_do_you_want_to_blowout')}
+          </Flex>
+          <Flex paddingBottom={SPACING.spacing8}>
+            <MediumButton
+              buttonType={
+                flowType === 'liquid_and_tips' ? 'primary' : 'secondary'
+              }
+              flex="1"
+              onClick={() => setFlowType('liquid_and_tips')}
+              buttonText={i18n.format(t('yes_blow_out_liquid'), 'capitalize')}
+              justifyContent={JUSTIFY_FLEX_START}
+              paddingLeft={SPACING.spacing24}
+            />
+          </Flex>
+          <Flex>
+            <MediumButton
+              buttonType={flowType === 'only_tips' ? 'primary' : 'secondary'}
+              flex="1"
+              onClick={() => {
+                setFlowType('only_tips')
+              }}
+              buttonText={i18n.format(
+                t('no_proceed_to_drop_tip'),
+                'capitalize'
+              )}
+              justifyContent={JUSTIFY_FLEX_START}
+              paddingLeft={SPACING.spacing24}
+            />
+          </Flex>
+        </Flex>
+        <Flex justifyContent={JUSTIFY_FLEX_END}>
+          <SmallButton
+            buttonText={i18n.format(t('shared:continue'), 'capitalize')}
+            onClick={handleProceed}
+            disabled={isCreateLoading || flowType == null}
+          />
+        </Flex>
       </Flex>
-    </Flex>
-  )
+    )
+  } else {
+    return (
+      <Flex css={TILE_CONTAINER_STYLE}>
+        <Title>{t('before_you_begin_do_you_want_to_blowout')}</Title>
+        <Flex flexDirection={DIRECTION_ROW} gridGap={SPACING.spacing24}>
+          <Flex
+            flex="1 0 auto"
+            onClick={() => {
+              setFlowType('liquid_and_tips')
+            }}
+            css={
+              flowType === 'liquid_and_tips'
+                ? SELECTED_OPTIONS_STYLE
+                : UNSELECTED_OPTIONS_STYLE
+            }
+          >
+            <Flex
+              height="100%"
+              width="100%"
+              position={POSITION_ABSOLUTE}
+              flex="1"
+            />
+            <video
+              css={css`
+                max-width: 11rem;
+              `}
+              autoPlay={true}
+              loop={true}
+              controls={false}
+              aria-label="blowout"
+            >
+              <source src={blowoutVideo} />
+            </video>
+            <StyledText as="h3">{t('yes_blow_out_liquid')}</StyledText>
+          </Flex>
+          <Flex
+            flex="1 0 auto"
+            onClick={() => setFlowType('only_tips')}
+            css={
+              flowType === 'only_tips'
+                ? SELECTED_OPTIONS_STYLE
+                : UNSELECTED_OPTIONS_STYLE
+            }
+          >
+            <video
+              css={css`
+                max-width: 11rem;
+              `}
+              autoPlay={true}
+              loop={true}
+              controls={false}
+              aria-label="droptip"
+            >
+              <source src={droptipVideo} />
+            </video>
+            <StyledText as="h3">{t('no_proceed_to_drop_tip')}</StyledText>
+          </Flex>
+        </Flex>
+        <Flex flexDirection={DIRECTION_ROW} justifyContent={JUSTIFY_FLEX_END}>
+          {/* <NeedHelpLink href={NEED_HELP_URL} /> */}
+          <PrimaryButton
+            disabled={isCreateLoading || flowType == null}
+            onClick={handleProceed}
+          >
+            {i18n.format(t('shared:continue'), 'capitalize')}
+          </PrimaryButton>
+        </Flex>
+      </Flex>
+    )
+  }
 }
 
 const UNSELECTED_OPTIONS_STYLE = css`
@@ -152,6 +232,11 @@ const Title = styled.h1`
   }
 `
 
+const ODD_TITLE_STYLE = css`
+  ${TYPOGRAPHY.level4HeaderSemiBold}
+  margin-bottom: ${SPACING.spacing16};
+`
+
 const TILE_CONTAINER_STYLE = css`
   flex-direction: ${DIRECTION_COLUMN};
   justify-content: ${JUSTIFY_SPACE_BETWEEN};