refactor(app): Refactor LPC flows in preparation for LPC redesign

api-client/src/maintenance_runs/createMaintenanceRunLabwareDefinition.ts

@@ -3,14 +3,20 @@ import { POST, request } from '../request'
 import type { ResponsePromise } from '../request'
 import type { HostConfig } from '../types'
 import type { LabwareDefinitionSummary } from './types'
-import type { LabwareDefinition2 } from '@opentrons/shared-data'
+import type {
+  LabwareDefinition2,
+  LabwareDefinition3,
+} from '@opentrons/shared-data'
 
 export function createMaintenanceRunLabwareDefinition(
   config: HostConfig,
   maintenanceRunId: string,
-  data: LabwareDefinition2
+  data: LabwareDefinition2 | LabwareDefinition3
 ): ResponsePromise<LabwareDefinitionSummary> {
-  return request<LabwareDefinitionSummary, { data: LabwareDefinition2 }>(
+  return request<
+    LabwareDefinitionSummary,
+    { data: LabwareDefinition2 | LabwareDefinition3 }
+  >(
     POST,
     `/maintenance_runs/${maintenanceRunId}/labware_definitions`,
     { data },

app/src/organisms/Desktop/ChooseProtocolSlideout/index.tsx

@@ -107,7 +107,7 @@ export function ChooseProtocolSlideoutComponent(
   const { robot, showSlideout, onCloseClick } = props
   const { name } = robot
 
-  const isNewLpc = useFeatureFlag('lpcRedesign')
+  const isNewLPC = useFeatureFlag('lpcRedesign')
 
   const [
     selectedProtocol,
@@ -655,7 +655,7 @@ export function ChooseProtocolSlideoutComponent(
           }
         >
           {currentPage === 1
-            ? !isNewLpc && (
+            ? !isNewLPC && (
                 <LegacyApplyHistoricOffsets
                   offsetCandidates={offsetCandidates}
                   shouldApplyOffsets={shouldApplyOffsets}

app/src/organisms/Desktop/ChooseRobotToRunProtocolSlideout/index.tsx

@@ -68,7 +68,7 @@ export function ChooseRobotToRunProtocolSlideoutComponent(
     setSelectedRobot,
   } = props
   const navigate = useNavigate()
-  const isNewLpc = useFeatureFlag('lpcRedesign')
+  const isNewLPC = useFeatureFlag('lpcRedesign')
   const [shouldApplyOffsets, setShouldApplyOffsets] = useState<boolean>(true)
   const {
     protocolKey,
@@ -221,7 +221,7 @@ export function ChooseRobotToRunProtocolSlideoutComponent(
     </PrimaryButton>
   )
 
-  const offsetsComponent = isNewLpc ? null : (
+  const offsetsComponent = isNewLPC ? null : (
     <LegacyApplyHistoricOffsets
       offsetCandidates={offsetCandidates}
       shouldApplyOffsets={shouldApplyOffsets}

app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunSetup.tsx

@@ -86,7 +86,7 @@ export function ProtocolRunSetup({
     orderedApplicableSteps,
   } = useRequiredSetupStepsInOrder({ runId, protocolAnalysis })
   const modules = parseAllRequiredModuleModels(protocolAnalysis?.commands ?? [])
-  const isNewLpc = useFeatureFlag('lpcRedesign')
+  const isNewLPC = useFeatureFlag('lpcRedesign')
   const robot = useRobot(robotName)
   const calibrationStatusRobot = useRunCalibrationStatus(robotName, runId)
   const calibrationStatusModules = useModuleCalibrationStatus(robotName, runId)
@@ -225,7 +225,7 @@ export function ProtocolRunSetup({
             }
           }}
           offsetsConfirmed={!missingSteps.includes(LPC_STEP_KEY)}
-          isNewLpc={isNewLpc}
+          isNewLPC={isNewLPC}
         />
       ),
       description: t('labware_position_check_step_description'),

app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabwarePositionCheck/__tests__/SetupLabwarePositionCheck.test.tsx

@@ -24,6 +24,7 @@ import {
   useUnmatchedModulesForProtocol,
 } from '/app/resources/runs'
 import { useRobotType } from '/app/redux-resources/robots'
+import { useLPCFlows } from '/app/organisms/LabwarePositionCheck'
 
 import type { Mock } from 'vitest'
 
@@ -34,6 +35,7 @@ vi.mock('/app/redux/config')
 vi.mock('../../../hooks/useLPCSuccessToast')
 vi.mock('@opentrons/react-api-client')
 vi.mock('/app/resources/runs')
+vi.mock('/app/organisms/LabwarePositionCheck')
 
 const DISABLED_REASON = 'MOCK_DISABLED_REASON'
 const ROBOT_NAME = 'otie'
@@ -51,7 +53,7 @@ const render = () => {
         setOffsetsConfirmed={confirmOffsets}
         robotName={ROBOT_NAME}
         runId={RUN_ID}
-        isNewLpc={false}
+        isNewLPC={false}
       />
     </MemoryRouter>,
     {
@@ -106,6 +108,7 @@ describe('SetupLabwarePositionCheck', () => {
     vi.mocked(useProtocolAnalysisAsDocumentQuery).mockReturnValue({
       data: null,
     } as any)
+    vi.mocked(useLPCFlows).mockReturnValue({ launchLPC: mockLaunchLPC } as any)
   })
 
   afterEach(() => {

app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabwarePositionCheck/index.tsx

@@ -29,14 +29,16 @@ import {
   useLPCDisabledReason,
 } from '/app/resources/runs'
 import { useRobotType } from '/app/redux-resources/robots'
+import { useLPCFlows, LPCFlows } from '/app/organisms/LabwarePositionCheck'
+
 import type { LabwareOffset } from '@opentrons/api-client'
 
 interface SetupLabwarePositionCheckProps {
   offsetsConfirmed: boolean
   setOffsetsConfirmed: (confirmed: boolean) => void
   robotName: string
   runId: string
-  isNewLpc: boolean
+  isNewLPC: boolean
 }
 
 export function SetupLabwarePositionCheck(
@@ -47,7 +49,7 @@ export function SetupLabwarePositionCheck(
     runId,
     setOffsetsConfirmed,
     offsetsConfirmed,
-    isNewLpc,
+    isNewLPC,
   } = props
   const { t, i18n } = useTranslation('protocol_setup')
 
@@ -100,6 +102,11 @@ export function SetupLabwarePositionCheck(
     robotType,
     protocolName
   )
+  const { launchLPC, lpcProps, showLPC } = useLPCFlows({
+    runId,
+    robotType,
+    protocolName,
+  })
 
   const nonIdentityOffsets = getLatestCurrentOffsets(sortedOffsets)
 
@@ -155,7 +162,7 @@ export function SetupLabwarePositionCheck(
         <PrimaryButton
           textTransform={TYPOGRAPHY.textTransformCapitalize}
           onClick={() => {
-            isNewLpc ? (() => null)() : launchLegacyLPC()
+            isNewLPC ? launchLPC() : launchLegacyLPC()
             setIsShowingLPCSuccessToast(false)
           }}
           id="LabwareSetup_checkLabwarePositionsButton"
@@ -170,7 +177,8 @@ export function SetupLabwarePositionCheck(
           </Tooltip>
         ) : null}
       </Flex>
-      {isNewLpc ? null : LegacyLPCWizard}
+      {isNewLPC ? null : LegacyLPCWizard}
+      {showLPC && <LPCFlows {...lpcProps} />}
     </Flex>
   )
 }

app/src/organisms/ErrorRecoveryFlows/hooks/useRecoveryToasts.ts

@@ -110,7 +110,6 @@ export function useRecoveryFullCommandText(
 ): string | null {
   const { commandTextData, stepNumber } = props
 
-  // TODO TOME: I think you are looking one command to far, for some reason.
   const relevantCmdIdx = stepNumber ?? -1
   const relevantCmd = commandTextData?.commands[relevantCmdIdx - 1] ?? null
 

app/src/organisms/LabwarePositionCheck/ExitConfirmation.tsx

@@ -0,0 +1,150 @@
+import styled, { css } from 'styled-components'
+import { useTranslation } from 'react-i18next'
+import { useSelector } from 'react-redux'
+
+import {
+  AlertPrimaryButton,
+  ALIGN_CENTER,
+  COLORS,
+  DIRECTION_COLUMN,
+  Flex,
+  Icon,
+  JUSTIFY_CENTER,
+  JUSTIFY_FLEX_END,
+  RESPONSIVENESS,
+  SecondaryButton,
+  SIZE_3,
+  SPACING,
+  LegacyStyledText,
+  TEXT_ALIGN_CENTER,
+  TYPOGRAPHY,
+} from '@opentrons/components'
+
+import { SmallButton } from '/app/atoms/buttons'
+import { getIsOnDevice } from '/app/redux/config'
+
+import type { LPCWizardContentProps } from '/app/organisms/LabwarePositionCheck/types'
+
+export function ExitConfirmation({
+  commandUtils,
+}: LPCWizardContentProps): JSX.Element {
+  const { i18n, t } = useTranslation(['labware_position_check', 'shared'])
+  const { confirmExitLPC, cancelExitLPC, toggleRobotMoving } = commandUtils
+  const isOnDevice = useSelector(getIsOnDevice)
+
+  const handleConfirmExit = (): void => {
+    toggleRobotMoving(true).then(() => {
+      confirmExitLPC()
+    })
+  }
+
+  return (
+    <Flex css={CONTAINER_STYLE}>
+      <Flex css={CONTENT_CONTAINER_STYLE}>
+        <Icon name="ot-alert" size={SIZE_3} color={COLORS.yellow50} />
+        {isOnDevice ? (
+          <>
+            <ConfirmationHeaderODD>
+              {t('remove_probe_before_exit')}
+            </ConfirmationHeaderODD>
+            <Flex textAlign={TEXT_ALIGN_CENTER}>
+              <ConfirmationBodyODD>
+                {t('exit_screen_subtitle')}
+              </ConfirmationBodyODD>
+            </Flex>
+          </>
+        ) : (
+          <>
+            <ConfirmationHeader>
+              {t('remove_probe_before_exit')}
+            </ConfirmationHeader>
+            <LegacyStyledText as="p" marginTop={SPACING.spacing8}>
+              {t('exit_screen_subtitle')}
+            </LegacyStyledText>
+          </>
+        )}
+      </Flex>
+      {isOnDevice ? (
+        <Flex css={BUTTON_CONTAINER_STYLE_ODD}>
+          <SmallButton
+            onClick={cancelExitLPC}
+            buttonText={i18n.format(t('shared:go_back'), 'capitalize')}
+            buttonType="secondary"
+          />
+          <SmallButton
+            onClick={handleConfirmExit}
+            buttonText={t('remove_calibration_probe')}
+            buttonType="alert"
+          />
+        </Flex>
+      ) : (
+        <Flex css={BUTTON_CONTAINER_STYLE}>
+          <Flex gridGap={SPACING.spacing8}>
+            <SecondaryButton onClick={cancelExitLPC}>
+              {t('shared:go_back')}
+            </SecondaryButton>
+            <AlertPrimaryButton
+              onClick={handleConfirmExit}
+              textTransform={TYPOGRAPHY.textTransformCapitalize}
+            >
+              {t('remove_calibration_probe')}
+            </AlertPrimaryButton>
+          </Flex>
+        </Flex>
+      )}
+    </Flex>
+  )
+}
+
+const CONTAINER_STYLE = css`
+  flex-direction: ${DIRECTION_COLUMN};
+  padding: ${SPACING.spacing32};
+  min-height: 29.5rem;
+`
+
+const CONTENT_CONTAINER_STYLE = css`
+  flex: 1;
+  flex-direction: ${DIRECTION_COLUMN};
+  justify-content: ${JUSTIFY_CENTER};
+  align-items: ${ALIGN_CENTER};
+  padding-left: ${SPACING.spacing32};
+  padding-right: ${SPACING.spacing32};
+`
+
+const BUTTON_CONTAINER_STYLE = css`
+  width: 100%;
+  margin-top: ${SPACING.spacing32};
+  justify-content: ${JUSTIFY_FLEX_END};
+  align-items: ${ALIGN_CENTER};
+`
+
+const BUTTON_CONTAINER_STYLE_ODD = css`
+  width: 100%;
+  justify-content: ${JUSTIFY_FLEX_END};
+  align-items: ${ALIGN_CENTER};
+  grid-gap: ${SPACING.spacing8};
+`
+
+const ConfirmationHeader = styled.h1`
+  margin-top: ${SPACING.spacing24};
+  ${TYPOGRAPHY.h1Default}
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    ${TYPOGRAPHY.level4HeaderSemiBold}
+  }
+`
+
+const ConfirmationHeaderODD = styled.h1`
+  margin-top: ${SPACING.spacing24};
+  ${TYPOGRAPHY.level3HeaderBold}
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    ${TYPOGRAPHY.level4HeaderSemiBold}
+  }
+`
+
+const ConfirmationBodyODD = styled.h1`
+  ${TYPOGRAPHY.level4HeaderRegular}
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    ${TYPOGRAPHY.level4HeaderRegular}
+  }
+  color: ${COLORS.grey60};
+`