feat(app): Add warning for 96-channel calibration with waste chute

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

@@ -1,6 +1,6 @@
 {
   "attach_probe": "Attach probe to pipette",
-  "begin_calibration": "Begin automated calibration",
+  "begin_calibration": "Begin calibration",
   "calibrate_pipette": "Calibrate pipettes before proceeding to module calibration",
   "calibrate": "Calibrate",
   "calibration_adapter_heatershaker": "Calibration Adapter",
@@ -22,9 +22,6 @@
   "firmware_updated": "{{module}} firmware updated!",
   "firmware_up_to_date": "{{module}} firmware up to date.",
   "get_started": "<block>To get started, remove labware from the deck and clean up the working area to make the calibration easier. Also gather the needed equipment shown to the right.</block><block>The calibration adapter came with your module. The pipette probe came with your Flex pipette.</block>",
-  "install_probe_8_channel": "<block>Take the calibration probe from its storage location. Ensure its collar is unlocked. Push the pipette ejector up and press the probe firmly onto the <strong>backmost</strong> pipette nozzle. Twist the collar to lock the probe. Test that the probe is secure by gently pulling it back and forth.</block>",
-  "install_probe_96_channel": "<block>Take the calibration probe from its storage location. Ensure its collar is unlocked. Push the pipette ejector up and press the probe firmly onto the <strong>A1 (back left corner)</strong> pipette nozzle. Twist the collar to lock the probe. Test that the probe is secure by gently pulling it back and forth.</block>",
-  "install_probe": "Take the calibration probe from its storage location. Ensure its collar is unlocked. Push the pipette ejector up and press the probe firmly onto the pipette nozzle. Twist the collar to lock the probe. Test that the probe is secure by gently pulling it back and forth.",
   "module_calibrating": "Stand back, {{moduleName}} is calibrating",
   "module_calibration_failed": "The module calibration could not be completed. Contact customer support for assistance.",
   "module_calibration": "Module calibration",

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

@@ -46,7 +46,7 @@
   "hold_and_loosen": "Hold the pipette in place and loosen the pipette screws. (The screws are captive and will not come apart from the pipette.) Then carefully remove the pipette.",
   "hold_pipette_carefully": "Hold onto the pipette so it does not fall. Connect the pipette by aligning the two protruding rods on the mounting plate. Ensure a secure attachment by screwing in the four front screws with the provided screwdriver.",
   "how_to_reattach": "<block>Push the right pipette mount up to the top of the z-axis. Then tighten the captive screw at the top right of the gantry carriage.</block><block>When reattached, the right mount should no longer freely move up and down.</block>",
-  "install_probe": "Take the calibration probe from its storage location. Ensure its collar is fully unlocked. Push the pipette ejector up and press the probe firmly onto the <bold>{{location}}</bold> pipette nozzle as far as it can go. Twist the collar to lock the probe. Test that the probe is secure by gently pulling it back and forth.",
+  "install_probe": "Take the calibration probe from its storage location. Ensure its collar is unlocked. Push the pipette ejector up and press the probe firmly onto the <bold>{{location}}</bold> pipette nozzle. Twist the collar to lock the probe. Test that the probe is secure by gently pulling it back and forth.",
   "loose_detach": "Loosen screws and detach ",
   "move_gantry_to_front": "Move gantry to front",
   "must_detach_mounting_plate": "You must detach the mounting plate and reattach the z-axis carraige before using other pipettes. We do not recommend exiting this process before completion.",
@@ -84,6 +84,8 @@
   "unscrew_and_detach": "Loosen Screws and Detach Mounting Plate",
   "unscrew_at_top": "<block>Loosen the captive screw on the top right of the  carriage. This releases the right pipette mount, which should then freely move up and down.</block>",
   "unscrew_carriage": "unscrew z-axis carriage",
+  "waste_chute_error": "Remove the waste chute from the deck plate adapter before proceeding.",
+  "waste_chute_warning": "If the waste chute is installed, remove it from the deck plate adapter before proceeding.",
   "wrong_pip": "wrong instrument installed",
   "z_axis_still_attached": "z-axis screw still secure"
 }

app/src/molecules/GenericWizardTile/index.tsx

@@ -130,7 +130,7 @@ export function GenericWizardTile(props: GenericWizardTileProps): JSX.Element {
         <Flex
           flexDirection={DIRECTION_COLUMN}
           flex="1"
-          gridGap={SPACING.spacing24}
+          gridGap={isOnDevice ? SPACING.spacing8 : SPACING.spacing16}
         >
           <Flex display={DISPLAY_INLINE_BLOCK}>
             {typeof header === 'string' ? <Title>{header}</Title> : header}

app/src/organisms/LabwarePositionCheck/ExitConfirmation.tsx

@@ -5,7 +5,6 @@ import {
   Flex,
   Icon,
   ALIGN_CENTER,
-  JUSTIFY_SPACE_BETWEEN,
   DIRECTION_COLUMN,
   SPACING,
   SIZE_3,
@@ -99,7 +98,7 @@ export const ExitConfirmation = (props: ExitConfirmationProps): JSX.Element => {
         <Flex
           width="100%"
           marginTop={SPACING.spacing32}
-          justifyContent={JUSTIFY_SPACE_BETWEEN}
+          justifyContent={JUSTIFY_FLEX_END}
           alignItems={ALIGN_CENTER}
         >
           <Flex gridGap={SPACING.spacing8}>
@@ -123,7 +122,7 @@ export const ExitConfirmation = (props: ExitConfirmationProps): JSX.Element => {
 
 const ConfirmationHeader = styled.h1`
   margin-top: ${SPACING.spacing24};
-  ${TYPOGRAPHY.level3HeaderSemiBold}
+  ${TYPOGRAPHY.h1Default}
   @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
     ${TYPOGRAPHY.level4HeaderSemiBold}
   }

app/src/organisms/ModuleWizardFlows/AttachProbe.tsx

@@ -4,6 +4,8 @@
 import attachProbe8 from '../../assets/videos/pipette-wizard-flows/Pipette_Attach_Probe_8.webm'
 import attachProbe96 from '../../assets/videos/pipette-wizard-flows/Pipette_Attach_Probe_96.webm'
 import { Trans, useTranslation } from 'react-i18next'
+import { useDeckConfigurationQuery } from '@opentrons/react-api-client'
+import { WASTE_CHUTE_CUTOUT } from '@opentrons/shared-data'
 import {
   LEFT,
   THERMOCYCLER_MODULE_MODELS,
@@ -17,6 +19,7 @@
   TYPOGRAPHY,
 } from '@opentrons/components'
 
+import { Banner } from '../../atoms/Banner'
 import { StyledText } from '../../atoms/text'
 import { GenericWizardTile } from '../../molecules/GenericWizardTile'
 
@@ -59,26 +62,35 @@
     isOnDevice,
     slotName,
   } = props
-  const { t, i18n } = useTranslation('module_wizard_flows')
+  const { t, i18n } = useTranslation([
+    'module_wizard_flows',
+    'pipette_wizard_flows',
+  ])
 
   const moduleDisplayName = getModuleDisplayName(attachedModule.moduleModel)
 
   const attachedPipetteChannels = attachedPipette.data.channels
-  let pipetteAttachProbeVideoSource, i18nKey
+  let pipetteAttachProbeVideoSource, probeLocation
   switch (attachedPipetteChannels) {
     case 1:
       pipetteAttachProbeVideoSource = attachProbe1
-      i18nKey = 'install_probe'
+      probeLocation = ''
       break
     case 8:
       pipetteAttachProbeVideoSource = attachProbe8
-      i18nKey = 'install_probe_8_channel'
+      probeLocation = t('pipette_wizard_flows:backmost')
       break
     case 96:
       pipetteAttachProbeVideoSource = attachProbe96
-      i18nKey = 'install_probe_96_channel'
+      probeLocation = t('pipette_wizard_flows:ninety_six_probe_location')
       break
   }
+  const wasteChuteConflict =
+    slotName === 'C3' && attachedPipette.data.channels === 96
+  const deckConfig = useDeckConfigurationQuery().data
+  const isWasteChuteOnDeck =
+    deckConfig?.find(fixture => fixture.cutoutId === WASTE_CHUTE_CUTOUT) ??
+    false
 
   const pipetteAttachProbeVid = (
     <Flex height="13.25rem" paddingTop={SPACING.spacing4}>
@@ -135,19 +147,30 @@
       </InProgressModal>
     )
 
-  const bodyText =
-    attachedPipetteChannels === 8 || attachedPipetteChannels === 96 ? (
+  const bodyText = (
+    <>
       <Trans
         t={t}
-        i18nKey={i18nKey}
+        i18nKey={'pipette_wizard_flows:install_probe'}
+        values={{ location: probeLocation }}
         components={{
           strong: <strong />,
           block: <StyledText css={BODY_STYLE} />,
         }}
       />
-    ) : (
-      <StyledText css={BODY_STYLE}>{t('install_probe')}</StyledText>
-    )
+      {wasteChuteConflict && (
+        <Banner
+          type={isWasteChuteOnDeck ? 'error' : 'warning'}
+          size={isOnDevice ? '1.5rem' : '1rem'}
+          marginTop={isOnDevice ? SPACING.spacing24 : SPACING.spacing16}
+        >
+          {isWasteChuteOnDeck
+            ? t('pipette_wizard_flows:waste_chute_error')
+            : t('pipette_wizard_flows:waste_chute_warning')}
+        </Banner>
+      )}
+    </>
+  )
 
   const handleBeginCalibration = (): void => {
     if (adapterId == null) {

app/src/organisms/PipetteWizardFlows/AttachProbe.tsx

@@ -8,9 +8,13 @@ import {
   SPACING,
   RESPONSIVENESS,
 } from '@opentrons/components'
-import { LEFT, MotorAxes } from '@opentrons/shared-data'
-import { useInstrumentsQuery } from '@opentrons/react-api-client'
+import { LEFT, MotorAxes, WASTE_CHUTE_CUTOUT } from '@opentrons/shared-data'
+import {
+  useDeckConfigurationQuery,
+  useInstrumentsQuery,
+} from '@opentrons/react-api-client'
 import { StyledText } from '../../atoms/text'
+import { Banner } from '../../atoms/Banner'
 import { GenericWizardTile } from '../../molecules/GenericWizardTile'
 import { SimpleWizardBody } from '../../molecules/SimpleWizardBody'
 import { InProgressModal } from '../../molecules/InProgressModal/InProgressModal'
@@ -75,6 +79,10 @@ export const AttachProbe = (props: AttachProbeProps): JSX.Element | null => {
     (instrument): instrument is PipetteData =>
       instrument.ok && instrument.mount === mount
   )
+  const deckConfig = useDeckConfigurationQuery().data
+  const isWasteChuteOnDeck =
+    deckConfig?.find(fixture => fixture.cutoutId === WASTE_CHUTE_CUTOUT) ??
+    false
 
   if (pipetteId == null) return null
   const handleOnClick = (): void => {
@@ -214,16 +222,29 @@ export const AttachProbe = (props: AttachProbeProps): JSX.Element | null => {
         channel: attachedPipettes[mount]?.data.channels,
       })}
       bodyText={
-        <StyledText css={BODY_STYLE}>
-          <Trans
-            t={t}
-            i18nKey={'install_probe'}
-            values={{ location: probeLocation }}
-            components={{
-              bold: <strong />,
-            }}
-          />
-        </StyledText>
+        <>
+          <StyledText css={BODY_STYLE}>
+            <Trans
+              t={t}
+              i18nKey={'install_probe'}
+              values={{ location: probeLocation }}
+              components={{
+                bold: <strong />,
+              }}
+            />
+          </StyledText>
+          {is96Channel && (
+            <Banner
+              type={isWasteChuteOnDeck ? 'error' : 'warning'}
+              size={isOnDevice ? '1.5rem' : '1rem'}
+              marginTop={isOnDevice ? SPACING.spacing24 : SPACING.spacing16}
+            >
+              {isWasteChuteOnDeck
+                ? t('waste_chute_error')
+                : t('waste_chute_warning')}
+            </Banner>
+          )}
+        </>
       }
       proceedButtonText={t('begin_calibration')}
       proceed={handleOnClick}

app/src/organisms/PipetteWizardFlows/BeforeBeginning.tsx

@@ -1,21 +1,17 @@
 import * as React from 'react'
+import { Trans, useTranslation } from 'react-i18next'
 import { UseMutateFunction } from 'react-query'
-import {
-  COLORS,
-  DIRECTION_COLUMN,
-  Flex,
-  SIZE_1,
-  SPACING,
-} from '@opentrons/components'
+import { COLORS, DIRECTION_COLUMN, Flex, SPACING } from '@opentrons/components'
 import {
   NINETY_SIX_CHANNEL,
   RIGHT,
   SINGLE_MOUNT_PIPETTES,
   WEIGHT_OF_96_CHANNEL,
   LoadedPipette,
   getPipetteNameSpecs,
+  WASTE_CHUTE_CUTOUT,
 } from '@opentrons/shared-data'
-import { Trans, useTranslation } from 'react-i18next'
+import { useDeckConfigurationQuery } from '@opentrons/react-api-client'
 import { StyledText } from '../../atoms/text'
 import { Banner } from '../../atoms/Banner'
 import { SimpleWizardBody } from '../../molecules/SimpleWizardBody'
@@ -83,6 +79,10 @@ export const BeforeBeginning = (
     isGantryEmpty &&
     selectedPipette === NINETY_SIX_CHANNEL &&
     flowType === FLOWS.ATTACH
+  const deckConfig = useDeckConfigurationQuery().data
+  const isWasteChuteOnDeck =
+    deckConfig?.find(fixture => fixture.cutoutId === WASTE_CHUTE_CUTOUT) ??
+    false
 
   if (
     pipetteId == null &&
@@ -234,21 +234,9 @@ export const BeforeBeginning = (
   ) : (
     <GenericWizardTile
       header={t('before_you_begin')}
-      //  TODO(jr, 11/3/22): wire up this URL and unhide the link!
-      // getHelp={BEFORE_YOU_BEGIN_URL}
       rightHandBody={rightHandBody}
       bodyText={
         <>
-          {selectedPipette === NINETY_SIX_CHANNEL &&
-          (flowType === FLOWS.DETACH || flowType === FLOWS.ATTACH) ? (
-            <Banner
-              type="warning"
-              size={isOnDevice ? '1.5rem' : SIZE_1}
-              marginY={SPACING.spacing4}
-            >
-              {t('pipette_heavy', { weight: WEIGHT_OF_96_CHANNEL })}
-            </Banner>
-          ) : null}
           <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing6}>
             <Trans
               t={t}
@@ -257,7 +245,34 @@ export const BeforeBeginning = (
                 block: <StyledText css={BODY_STYLE} />,
               }}
             />
+            {selectedPipette === NINETY_SIX_CHANNEL &&
+              flowType === FLOWS.ATTACH &&
+              !isOnDevice && (
+                <StyledText css={BODY_STYLE}>
+                  {t('pipette_heavy', { weight: WEIGHT_OF_96_CHANNEL })}
+                </StyledText>
+              )}
           </Flex>
+          {selectedPipette === NINETY_SIX_CHANNEL &&
+          (flowType === FLOWS.CALIBRATE || flowType === FLOWS.ATTACH) ? (
+            <Banner
+              type={isWasteChuteOnDeck ? 'error' : 'warning'}
+              size={isOnDevice ? '1.5rem' : '1rem'}
+              marginTop={isOnDevice ? SPACING.spacing24 : SPACING.spacing16}
+            >
+              {isWasteChuteOnDeck
+                ? t('waste_chute_error')
+                : t('waste_chute_warning')}
+            </Banner>
+          ) : (
+            <Banner
+              type="warning"
+              size={isOnDevice ? '1.5rem' : '1rem'}
+              marginTop={isOnDevice ? SPACING.spacing24 : SPACING.spacing16}
+            >
+              {t('pipette_heavy', { weight: WEIGHT_OF_96_CHANNEL })}
+            </Banner>
+          )}
         </>
       }
       proceedButtonText={proceedButtonText}

app/src/organisms/PipetteWizardFlows/DetachPipette.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { css } from 'styled-components'
-import { RIGHT } from '@opentrons/shared-data'
+import { RIGHT, WEIGHT_OF_96_CHANNEL } from '@opentrons/shared-data'
 import { useInstrumentsQuery } from '@opentrons/react-api-client'
 import {
   Btn,
@@ -13,9 +13,11 @@ import {
   ALIGN_FLEX_END,
   ALIGN_CENTER,
   SPACING,
+  SIZE_1,
   RESPONSIVENESS,
 } from '@opentrons/components'
 import { StyledText } from '../../atoms/text'
+import { Banner } from '../../atoms/Banner'
 import { GenericWizardTile } from '../../molecules/GenericWizardTile'
 import { SimpleWizardBody } from '../../molecules/SimpleWizardBody'
 import { Skeleton } from '../../atoms/Skeleton'
@@ -153,7 +155,20 @@ export const DetachPipette = (props: DetachPipetteProps): JSX.Element => {
       </>
     )
   } else {
-    bodyText = <StyledText css={BODY_STYLE}>{t('hold_and_loosen')}</StyledText>
+    bodyText = (
+      <>
+        <StyledText css={BODY_STYLE}>{t('hold_and_loosen')}</StyledText>
+        {is96ChannelPipette && (
+          <Banner
+            type="warning"
+            size={isOnDevice ? '1.5rem' : SIZE_1}
+            marginY={SPACING.spacing4}
+          >
+            {t('pipette_heavy', { weight: WEIGHT_OF_96_CHANNEL })}
+          </Banner>
+        )}
+      </>
+    )
   }
 
   if (isRobotMoving) return <InProgressModal description={t('stand_back')} />

app/src/organisms/PipetteWizardFlows/MountPipette.tsx

@@ -55,6 +55,11 @@ export const MountPipette = (props: MountPipetteProps): JSX.Element => {
   } else {
     bodyText = (
       <>
+        <StyledText css={BODY_STYLE}>
+          {isSingleMountPipette
+            ? t('align_the_connector')
+            : t('hold_pipette_carefully')}
+        </StyledText>
         {!isSingleMountPipette ? (
           <Banner
             type="warning"
@@ -64,11 +69,6 @@ export const MountPipette = (props: MountPipetteProps): JSX.Element => {
             {t('pipette_heavy', { weight: WEIGHT_OF_96_CHANNEL })}
           </Banner>
         ) : null}
-        <StyledText css={BODY_STYLE}>
-          {isSingleMountPipette
-            ? t('align_the_connector')
-            : t('hold_pipette_carefully')}
-        </StyledText>
       </>
     )
   }