drop tip (instruments page) exit confirmation updates

Opentrons · Aug 9, 2024 · a87c6fc · a87c6fc
1 parent 6d6f4bd
commit a87c6fc
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 23 deletions.
diff --git a/app/src/assets/localization/en/drop_tip_wizard.json b/app/src/assets/localization/en/drop_tip_wizard.json
@@ -13,14 +13,16 @@
   "drop_tip_failed": "The drop tip could not be completed. Contact customer support for assistance.",
   "drop_tips": "drop tips",
   "error_dropping_tips": "Error dropping tips",
-  "exit_screen_title": "Exit before completing drop tip?",
+  "exit_and_home_pipette": "Exit and home pipette",
+  "exit_before_completing": "Exit before completing drop tips?",
   "getting_ready": "Getting ready…",
   "go_back": "go back",
   "jog_too_far": "Jog too far?",
   "liquid_damages_pipette": "Homing the pipette with liquid in the tips may damage it. You must remove all tips before using the pipette again.",
   "liquid_damages_this_pipette": "Homing the <strong>{{mount}} pipette</strong> with liquid in the tips may damage it. You must remove all tips before using the pipette again.",
   "move_to_slot": "move to slot",
   "no_proceed_to_drop_tip": "No, proceed to tip removal",
+  "pipette_will_home": "The <strong>{{mount}} pipette</strong> will return to its home position which may cause damage if there is liquid in the tips.",
   "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",

diff --git a/app/src/organisms/DropTipWizardFlows/DropTipWizardHeader.tsx b/app/src/organisms/DropTipWizardFlows/DropTipWizardHeader.tsx
@@ -11,6 +11,7 @@ type DropTipWizardHeaderProps = DropTipWizardProps & {
   isExitInitiated: boolean
   isFinalWizardStep: boolean
   confirmExit: () => void
+  showConfirmExit: boolean
 }
 
 export function DropTipWizardHeader({
@@ -22,6 +23,7 @@ export function DropTipWizardHeader({
   isFinalWizardStep,
   errorDetails,
   dropTipCommands,
+  showConfirmExit,
 }: DropTipWizardHeaderProps): JSX.Element {
   const { handleCleanUpAndClose } = dropTipCommands
   const { t, i18n } = useTranslation('drop_tip_wizard')
@@ -45,7 +47,7 @@ export function DropTipWizardHeader({
       title={i18n.format(t('drop_tips'), 'capitalize')}
       currentStep={currentStepNumber}
       totalSteps={totalSteps}
-      onExit={wizardHeaderOnExit}
+      onExit={!showConfirmExit ? wizardHeaderOnExit : null}
     />
   )
 }

diff --git a/app/src/organisms/DropTipWizardFlows/ExitConfirmation.tsx b/app/src/organisms/DropTipWizardFlows/ExitConfirmation.tsx
@@ -1,14 +1,15 @@
 import * as React from 'react'
 import { useSelector } from 'react-redux'
-import { useTranslation } from 'react-i18next'
+import { Trans, useTranslation } from 'react-i18next'
 
 import {
   Flex,
   COLORS,
   SPACING,
   AlertPrimaryButton,
-  SecondaryButton,
   JUSTIFY_FLEX_END,
+  StyledText,
+  PrimaryButton,
 } from '@opentrons/components'
 
 import { getIsOnDevice } from '../../redux/config'
@@ -23,47 +24,65 @@ type ExitConfirmationProps = DropTipWizardContainerProps & {
 }
 
 export function ExitConfirmation(props: ExitConfirmationProps): JSX.Element {
-  const { handleGoBack, handleExit } = props
-  const { i18n, t } = useTranslation(['drop_tip_wizard', 'shared'])
+  const { handleGoBack, handleExit, mount } = props
+  const { t } = useTranslation(['drop_tip_wizard', 'shared'])
 
-  const flowTitle = t('drop_tips')
   const isOnDevice = useSelector(getIsOnDevice)
 
   return (
     <SimpleWizardBody
-      iconColor={COLORS.yellow50}
-      header={t('exit_screen_title', { flow: flowTitle })}
+      iconColor={COLORS.red50}
+      header={t('exit_before_completing')}
       isSuccess={false}
+      subHeader={
+        <StyledText
+          desktopStyle="bodyDefaultRegular"
+          oddStyle="level4HeaderRegular"
+        >
+          <Trans
+            t={t}
+            i18nKey="pipette_will_home"
+            values={{
+              mount,
+            }}
+            components={{
+              mount: <strong />,
+            }}
+          />
+        </StyledText>
+      }
+      marginTop={isOnDevice ? '-2rem' : undefined}
     >
       {isOnDevice ? (
         <Flex
           width="100%"
           justifyContent={JUSTIFY_FLEX_END}
-          gridGap={SPACING.spacing4}
+          gridGap={SPACING.spacing8}
         >
+          <SmallButton
+            buttonText={t('shared:go_back')}
+            onClick={handleGoBack}
+          />
           <SmallButton
             buttonType="alert"
-            buttonText={i18n.format(t('shared:exit'), 'capitalize')}
+            buttonText={t('exit_and_home_pipette')}
             onClick={handleExit}
             marginRight={SPACING.spacing4}
           />
-          <SmallButton
-            buttonText={t('shared:go_back')}
-            onClick={handleGoBack}
-          />
         </Flex>
       ) : (
-        <>
-          <SecondaryButton
-            onClick={handleGoBack}
-            marginRight={SPACING.spacing4}
-          >
+        <Flex
+          width="100%"
+          justifyContent={JUSTIFY_FLEX_END}
+          gridGap={SPACING.spacing8}
+        >
+          <PrimaryButton onClick={handleGoBack} marginRight={SPACING.spacing4}>
             {t('shared:go_back')}
-          </SecondaryButton>
+          </PrimaryButton>
           <AlertPrimaryButton onClick={handleExit}>
-            {i18n.format(t('shared:exit'), 'capitalize')}
+            {t('exit_and_home_pipette')}
           </AlertPrimaryButton>
-        </>
+        </Flex>
       )}
     </SimpleWizardBody>
   )