feat(app and odd): update assets for 1- and 8-channel Flex flows (#12447

)

closes RLIQ-358

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

@@ -11,6 +11,7 @@
   "complete_cal": "Complete calibration",
   "pip_cal_success": "{{pipetteName}} successfully attached and calibrated",
   "recalibrate_pipette": "recalibrate {{mount}} pipette",
+  "calibrate_pipette": "calibrate {{mount}} pipette",
   "pip_recal_success": "{{pipetteName}} successfully recalibrated",
   "stand_back": "Stand Back, robot is in motion",
   "pipette_calibrating": "Stand back, connect and secure, {{pipetteName}} is calibrating",

app/src/molecules/WizardRequiredEquipmentList/equipmentImages.ts

@@ -6,8 +6,8 @@ export const equipmentImages = {
   calibration_probe: require('../../assets/images/change-pip/calibration_probe.png'),
   t10_torx_screwdriver: require('../../assets/images/t10_torx_screwdriver.png'),
   //  TODO(jr, 11/17/22): update screwdriver and pipette images
-  hex_screwdriver: require('../../assets/images/change-pip/calibration_probe.png'),
-  gen3_pipette: require('../../assets/images/change-pip/calibration_probe.png'),
+  hex_screwdriver: require('../../assets/images/change-pip/hex_screwdriver.png'),
+  gen3_pipette: require('../../assets/images/change-pip/single_mount_pipettes.png'),
   pipette_96: require('../../assets/images/change-pip/calibration_probe.png'),
   mounting_plate_96_channel: require('../../assets/images/change-pip/calibration_probe.png'),
   flex_gripper: require('../../assets/images/flex_gripper.svg'),

app/src/organisms/PipetteWizardFlows/AttachProbe.tsx

@@ -13,9 +13,10 @@ import { StyledText } from '../../atoms/text'
 import { SimpleWizardBody } from '../../molecules/SimpleWizardBody'
 import { GenericWizardTile } from '../../molecules/GenericWizardTile'
 import { InProgressModal } from '../../molecules/InProgressModal/InProgressModal'
-import attachProbe from '../../assets/images/change-pip/attach-stem.png'
-import pipetteCalibrating from '../../assets/images/change-pip/pipette-is-calibrating.png'
-import { BODY_STYLE } from './constants'
+import pipetteProbe1 from '../../assets/videos/pipette-wizard-flows/Pipette_Probing_1.webm'
+import pipetteProbe8 from '../../assets/videos/pipette-wizard-flows/Pipette_Probing_8.webm'
+import { BODY_STYLE, SECTIONS } from './constants'
+import { getPipetteAnimations } from './utils'
 import type { PipetteWizardStepProps } from './types'
 
 interface AttachProbeProps extends PipetteWizardStepProps {
@@ -45,8 +46,10 @@ export const AttachProbe = (props: AttachProbeProps): JSX.Element | null => {
     setShowErrorMessage,
     isOnDevice,
     selectedPipette,
+    flowType,
   } = props
   const { t, i18n } = useTranslation('pipette_wizard_flows')
+  const pipetteWizardStep = { mount, flowType, section: SECTIONS.ATTACH_PROBE }
   const pipetteId = attachedPipettes[mount]?.id
   const displayName = attachedPipettes[mount]?.modelSpecs.displayName
   const is8Channel = attachedPipettes[mount]?.modelSpecs.channels === 8
@@ -82,16 +85,27 @@ export const AttachProbe = (props: AttachProbeProps): JSX.Element | null => {
       })
   }
 
-  const pipetteCalibratingImage = (
+  const pipetteProbeVid = (
     <Flex marginTop={isOnDevice ? '-5rem' : '-7.6rem'} height="10.2rem">
-      <img src={pipetteCalibrating} alt="Pipette is calibrating" />
+      <video
+        css={css`
+          max-width: 100%;
+          max-height: 100%;
+        `}
+        autoPlay={true}
+        loop={true}
+        controls={false}
+        data-testid={is8Channel ? pipetteProbe8 : pipetteProbe1}
+      >
+        <source src={is8Channel ? pipetteProbe8 : pipetteProbe1} />
+      </video>
     </Flex>
   )
 
   if (isRobotMoving)
     return (
       <InProgressModal
-        alternativeSpinner={isExiting ? null : pipetteCalibratingImage}
+        alternativeSpinner={isExiting ? null : pipetteProbeVid}
         description={t('pipette_calibrating', {
           pipetteName: displayName,
         })}
@@ -115,8 +129,10 @@ export const AttachProbe = (props: AttachProbeProps): JSX.Element | null => {
   ) : (
     <GenericWizardTile
       header={i18n.format(t('attach_probe'), 'capitalize')}
-      //  TODO(Jr, 10/26/22): replace image with correct one!
-      rightHandBody={<img src={attachProbe} width="100%" alt="Attach probe" />}
+      rightHandBody={getPipetteAnimations({
+        pipetteWizardStep,
+        channel: is8Channel ? 8 : 1,
+      })}
       bodyText={
         is8Channel || selectedPipette === NINETY_SIX_CHANNEL ? (
           <Trans

app/src/organisms/PipetteWizardFlows/ChoosePipette.tsx

@@ -27,7 +27,7 @@ import { SmallButton } from '../../atoms/buttons/OnDeviceDisplay'
 import { ModalShell } from '../../molecules/Modal'
 import { WizardHeader } from '../../molecules/WizardHeader'
 import { GenericWizardTile } from '../../molecules/GenericWizardTile'
-import singleChannelAndEightChannel from '../../assets/images/change-pip/single-channel-and-eight-channel.png'
+import singleChannelAndEightChannel from '../../assets/images/change-pip/1_and_8_channel.png'
 import { useAttachedPipettes } from '../Devices/hooks'
 import { ExitModal } from './ExitModal'
 import { FLOWS } from './constants'

app/src/organisms/PipetteWizardFlows/DetachPipette.tsx

@@ -4,10 +4,10 @@ import { StyledText } from '../../atoms/text'
 import { GenericWizardTile } from '../../molecules/GenericWizardTile'
 import { Skeleton } from '../../atoms/Skeleton'
 import { InProgressModal } from '../../molecules/InProgressModal/InProgressModal'
-import detachPipette from '../../assets/images/change-pip/single-channel-detach-pipette.png'
 import detach96Pipette from '../../assets/images/change-pip/detach-96-pipette.png'
 import { CheckPipetteButton } from './CheckPipetteButton'
-import { BODY_STYLE } from './constants'
+import { BODY_STYLE, SECTIONS } from './constants'
+import { getPipetteAnimations } from './utils'
 import type { PipetteWizardStepProps } from './types'
 
 interface DetachPipetteProps extends PipetteWizardStepProps {
@@ -26,10 +26,16 @@ export const DetachPipette = (props: DetachPipetteProps): JSX.Element => {
     isFetching,
     setFetching,
     isOnDevice,
+    flowType,
   } = props
   const { t, i18n } = useTranslation(['pipette_wizard_flows', 'shared'])
+  const pipetteWizardStep = {
+    mount,
+    flowType,
+    section: SECTIONS.DETACH_PIPETTE,
+  }
   const is96ChannelPipette = attachedPipettes[mount]?.name === 'p1000_96'
-
+  const channel = attachedPipettes[mount]?.modelSpecs.channels
   let bodyText: React.ReactNode = <div></div>
   if (isFetching) {
     bodyText = (
@@ -74,16 +80,14 @@ export const DetachPipette = (props: DetachPipetteProps): JSX.Element => {
             height="14.375rem"
             backgroundSize={BACKGROUND_SIZE}
           />
-        ) : (
+        ) : is96ChannelPipette ? (
           <img
-            src={!is96ChannelPipette ? detachPipette : detach96Pipette}
+            src={detach96Pipette}
             width="100%"
-            alt={
-              !is96ChannelPipette
-                ? 'Detach pipette'
-                : 'Unscrew 96 channel pipette'
-            }
+            alt={'Unscrew 96 channel pipette'}
           />
+        ) : (
+          getPipetteAnimations({ pipetteWizardStep, channel })
         )
       }
       bodyText={bodyText}

app/src/organisms/PipetteWizardFlows/DetachProbe.tsx

@@ -3,24 +3,35 @@ import { useTranslation } from 'react-i18next'
 import { StyledText } from '../../atoms/text'
 import { GenericWizardTile } from '../../molecules/GenericWizardTile'
 import { InProgressModal } from '../../molecules/InProgressModal/InProgressModal'
-import removeProbe from '../../assets/images/change-pip/attach-stem.png'
-import { BODY_STYLE } from './constants'
+import { BODY_STYLE, SECTIONS } from './constants'
+import { getPipetteAnimations } from './utils'
 import type { PipetteWizardStepProps } from './types'
 
 interface DetachProbeProps extends PipetteWizardStepProps {
   handleCleanUp: () => void
 }
 
 export const DetachProbe = (props: DetachProbeProps): JSX.Element => {
-  const { isRobotMoving, goBack, handleCleanUp } = props
+  const {
+    isRobotMoving,
+    goBack,
+    handleCleanUp,
+    mount,
+    flowType,
+    attachedPipettes,
+  } = props
   const { t, i18n } = useTranslation('pipette_wizard_flows')
+  const pipetteWizardStep = { mount, flowType, section: SECTIONS.DETACH_PROBE }
+  const channel = attachedPipettes[mount]?.modelSpecs.channels
 
   if (isRobotMoving) return <InProgressModal description={t('stand_back')} />
   return (
     <GenericWizardTile
       header={i18n.format(t('remove_cal_probe'), 'capitalize')}
-      //  TODO(Jr, 10/26/22): replace image with correct one!
-      rightHandBody={<img src={removeProbe} width="100%" alt="Remove probe" />}
+      rightHandBody={getPipetteAnimations({
+        pipetteWizardStep,
+        channel,
+      })}
       bodyText={
         <StyledText css={BODY_STYLE}>
           {i18n.format(t('remove_probe'), 'capitalize')}

app/src/organisms/PipetteWizardFlows/MountPipette.tsx

@@ -8,11 +8,11 @@ import { Flex, JUSTIFY_CENTER, SPACING, SIZE_1 } from '@opentrons/components'
 import { StyledText } from '../../atoms/text'
 import { Banner } from '../../atoms/Banner'
 import { GenericWizardTile } from '../../molecules/GenericWizardTile'
-import screwPattern from '../../assets/images/change-pip/screw-pattern.png'
 import attach96Pipette from '../../assets/images/change-pip/attach-96-pipette.png'
 import { Skeleton } from '../../atoms/Skeleton'
 import { CheckPipetteButton } from './CheckPipetteButton'
-import { BODY_STYLE } from './constants'
+import { BODY_STYLE, SECTIONS } from './constants'
+import { getPipetteAnimations } from './utils'
 import type { PipetteWizardStepProps } from './types'
 
 interface MountPipetteProps extends PipetteWizardStepProps {
@@ -29,8 +29,11 @@ export const MountPipette = (props: MountPipetteProps): JSX.Element => {
     isFetching,
     setFetching,
     isOnDevice,
+    mount,
+    flowType,
   } = props
   const { t, i18n } = useTranslation('pipette_wizard_flows')
+  const pipetteWizardStep = { mount, flowType, section: SECTIONS.MOUNT_PIPETTE }
   const isSingleMountPipette = selectedPipette === SINGLE_MOUNT_PIPETTES
   const bodyTextSkeleton = (
     <Skeleton
@@ -95,17 +98,17 @@ export const MountPipette = (props: MountPipetteProps): JSX.Element => {
           />
         ) : (
           <Flex justifyContent={JUSTIFY_CENTER}>
-            <img
-              //  TODO(jr, 11/18/22): attach real image
-              src={isSingleMountPipette ? screwPattern : attach96Pipette}
-              width="171px"
-              height="248px"
-              alt={
-                isSingleMountPipette
-                  ? 'Screw pattern'
-                  : 'Attach 96 channel pipette'
-              }
-            />
+            {isSingleMountPipette ? (
+              getPipetteAnimations({ pipetteWizardStep })
+            ) : (
+              <img
+                //  TODO(jr, 11/18/22): attach real image
+                src={attach96Pipette}
+                width="171px"
+                height="248px"
+                alt={'Attach 96 channel pipette'}
+              />
+            )}
           </Flex>
         )
       }

app/src/organisms/PipetteWizardFlows/Results.tsx

@@ -9,7 +9,6 @@ import {
 } from '@opentrons/components'
 import { NINETY_SIX_CHANNEL } from '@opentrons/shared-data'
 import { SimpleWizardBody } from '../../molecules/SimpleWizardBody'
-import { useAttachedPipetteCalibrations } from '../Devices/hooks'
 import { SmallButton } from '../../atoms/buttons/OnDeviceDisplay'
 import { CheckPipetteButton } from './CheckPipetteButton'
 import { FLOWS } from './constants'
@@ -21,6 +20,7 @@ interface ResultsProps extends PipetteWizardStepProps {
   totalStepCount: number
   isFetching: boolean
   setFetching: React.Dispatch<React.SetStateAction<boolean>>
+  hasCalData: boolean
 }
 
 export const Results = (props: ResultsProps): JSX.Element => {
@@ -36,15 +36,14 @@ export const Results = (props: ResultsProps): JSX.Element => {
     isOnDevice,
     isFetching,
     setFetching,
+    hasCalData,
   } = props
   const { t, i18n } = useTranslation(['pipette_wizard_flows', 'shared'])
   const [numberOfTryAgains, setNumberOfTryAgains] = React.useState<number>(0)
   const pipetteName =
     attachedPipettes[mount] != null
       ? attachedPipettes[mount]?.modelSpecs.displayName
       : ''
-  const pipCalibrationsByMount = useAttachedPipetteCalibrations()
-  const hasCalData = pipCalibrationsByMount[mount].offset?.lastModified != null
   let header: string = 'unknown results screen'
   let iconColor: string = COLORS.successEnabled
   let isSuccess: boolean = true

app/src/organisms/PipetteWizardFlows/__tests__/AttachProbe.test.tsx

@@ -49,12 +49,12 @@ describe('AttachProbe', () => {
     }
   })
   it('returns the correct information, buttons work as expected', async () => {
-    const { getByText, getByAltText, getByRole, getByLabelText } = render(props)
+    const { getByText, getByTestId, getByRole, getByLabelText } = render(props)
     getByText('Attach calibration probe')
     getByText(
       'Take the calibration probe from its storage location. Make sure its latch is in the unlocked (straight) position. Press the probe firmly onto the pipette nozzle and then lock the latch. Then test that the probe is securely attached by gently pulling it back and forth.'
     )
-    getByAltText('Attach probe')
+    getByTestId('Pipette_Attach_Probe_1.webm')
     const proceedBtn = getByRole('button', { name: 'Begin calibration' })
     fireEvent.click(proceedBtn)
     expect(props.chainRunCommands).toHaveBeenCalledWith(
@@ -97,14 +97,14 @@ describe('AttachProbe', () => {
       ...props,
       isRobotMoving: true,
     }
-    const { getByText, getByAltText } = render(props)
+    const { getByText, getByTestId } = render(props)
     getByText(
       'Stand back, connect and secure, Flex 1-Channel 1000 μL is calibrating'
     )
     getByText(
       'The calibration probe will touch the sides of the calibration square in slot 2 to determine its exact position'
     )
-    getByAltText('Pipette is calibrating')
+    getByTestId('Pipette_Probing_1.webm')
   })
 
   it('renders the error modal screen when errorMessage is true', () => {
@@ -122,12 +122,12 @@ describe('AttachProbe', () => {
       ...props,
       isOnDevice: true,
     }
-    const { getByText, getByAltText, getByRole, getByLabelText } = render(props)
+    const { getByText, getByTestId, getByRole, getByLabelText } = render(props)
     getByText('Attach calibration probe')
     getByText(
       'Take the calibration probe from its storage location. Make sure its latch is in the unlocked (straight) position. Press the probe firmly onto the pipette nozzle and then lock the latch. Then test that the probe is securely attached by gently pulling it back and forth.'
     )
-    getByAltText('Attach probe')
+    getByTestId('Pipette_Attach_Probe_1.webm')
     getByRole('button', { name: 'Begin calibration' }).click()
     expect(props.chainRunCommands).toHaveBeenCalledWith(
       [

app/src/organisms/PipetteWizardFlows/__tests__/DetachPipette.test.tsx

@@ -47,7 +47,7 @@ describe('DetachPipette', () => {
       chainRunCommands: jest.fn(),
       runId: RUN_ID_1,
       attachedPipettes: { left: mockPipette, right: null },
-      flowType: FLOWS.CALIBRATE,
+      flowType: FLOWS.DETACH,
       errorMessage: null,
       setShowErrorMessage: jest.fn(),
       isRobotMoving: false,
@@ -59,12 +59,12 @@ describe('DetachPipette', () => {
     mockCheckPipetteButton.mockReturnValue(<div>mock check pipette button</div>)
   })
   it('returns the correct information, buttons work as expected for single mount pipettes', () => {
-    const { getByText, getByAltText, getByLabelText } = render(props)
+    const { getByText, getByTestId, getByLabelText } = render(props)
     getByText('Loosen screws and detach Flex 1-Channel 1000 μL')
     getByText(
       '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.'
     )
-    getByAltText('Detach pipette')
+    getByTestId('Pipette_Detach_1_L.webm')
     getByText('mock check pipette button')
     const backBtn = getByLabelText('back')
     fireEvent.click(backBtn)
@@ -124,12 +124,12 @@ describe('DetachPipette', () => {
       flowType: FLOWS.ATTACH,
       selectedPipette: NINETY_SIX_CHANNEL,
     }
-    const { getByText, getByAltText, getByLabelText } = render(props)
+    const { getByText, getByTestId, getByLabelText } = render(props)
     getByText('Loosen screws and detach Flex 1-Channel 1000 μL')
     getByText(
       '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.'
     )
-    getByAltText('Detach pipette')
+    getByTestId('Pipette_Detach_1_L.webm')
     getByText('mock check pipette button')
     getByLabelText('back').click()
     expect(props.goBack).toHaveBeenCalled()

app/src/organisms/PipetteWizardFlows/__tests__/DetachProbe.test.tsx

@@ -48,12 +48,12 @@ describe('DetachProbe', () => {
     mockInProgressModal.mockReturnValue(<div>mock in progress</div>)
   })
   it('returns the correct information, buttons work as expected', () => {
-    const { getByText, getByAltText, getByRole, getByLabelText } = render(props)
+    const { getByText, getByTestId, getByRole, getByLabelText } = render(props)
     getByText('Remove calibration probe')
     getByText(
       'Unlatch the calibration probe, remove it from the nozzle, and return it to its storage location.'
     )
-    getByAltText('Remove probe')
+    getByTestId('Pipette_Detach_Probe_1.webm')
     const proceedBtn = getByRole('button', { name: 'Complete calibration' })
     fireEvent.click(proceedBtn)
     expect(props.handleCleanUp).toHaveBeenCalled()