import * as React from 'react' ; import { useTranslation } from 'react-i18next' ; import { AlertModal , Box , ModalPage , SPACING_2 , Text , useConditionalConfirm , } from '@opentrons/components' ; import { Portal } from '../../../App/portal' ; import { useRestartRun } from '../../ProtocolUpload/hooks/useRestartRun' ; import { useLabwarePositionCheck } from './hooks' ; import { IntroScreen } from './IntroScreen' ; import { GenericStepScreen } from './GenericStepScreen' ; import { SummaryScreen } from './SummaryScreen' ; import { RobotMotionLoadingModal } from './RobotMotionLoadingModal' ; import { ConfirmPickUpTipModal } from './ConfirmPickUpTipModal' ; import { ExitPreventionModal } from './ExitPreventionModal' ; import styles from '../styles.css' ; interface LabwarePositionCheckModalProps { onCloseClick : ( ) => unknown ; } export const LabwarePositionCheck = ( props ) : JSX . Element | null => { const { t } = useTranslation ( [ 'labware_position_check' , 'shared' ] ) ; const restartRun = useRestartRun ( ) ; const [ savePositionCommandData , savePositionCommandDataDispatch , ] = React . useReducer ( ( state , action ) => { const { labwareId , commandId } = action ; const nextCommandList = state [ labwareId ] != null ? [ state [ labwareId ] [ 0 ] , commandId ] : [ commandId ] ; return { ... state , [ labwareId ] : nextCommandList , } ; } , { } ) ; const [ isRestartingRun , setIsRestartingRun ] = React . useState < boolean > ( false ) ; const { confirm : confirmExitLPC , showConfirmation , cancel : cancelExitLPC , } = useConditionalConfirm ( props . onCloseClick , true ) ; const addSavePositionCommandData = ( commandId , labwareId ) : void => { savePositionCommandDataDispatch ( { labwareId , commandId } ) ; } ; const labwarePositionCheckUtils = useLabwarePositionCheck ( addSavePositionCommandData , savePositionCommandData ) ; if ( 'error' in labwarePositionCheckUtils ) { if ( ! isRestartingRun ) { setTimeout ( ( ) => restartRun ( ) , 5000 ) ; ! isRestartingRun && setIsRestartingRun ( true ) ; } const { error } = labwarePositionCheckUtils ; return ( < Portal level = "top" > < AlertModal heading = { t ( 'error_modal_header' ) } iconName = { null } buttons = { [ { children : t ( 'shared:close' ) , onClick : props . onCloseClick , } , ] } alertOverlay > < Box > < Text > { t ( 'error_modal_text' ) } < /Text> < Text marginTop = { SPACING_2 } > Error : { error . message } < /Text> < /Box> < /AlertModal> < /Portal>); } const { beginLPC , proceed , ctaText , currentCommandIndex , currentStep , showPickUpTipConfirmationModal , onUnsuccessfulPickUpTip , isComplete , titleText , isLoading , jog , } = labwarePositionCheckUtils ; let modalContent ; if ( isLoading ) { modalContent = ( < ModalPage contentsClassName = { styles . modal_contents } titleBar = { { title : t ( 'labware_position_check_title' ) , back : { onClick : confirmExitLPC , title : t ( 'shared:exit' ) , children : t ( 'shared:exit' ) , } , } } > < RobotMotionLoadingModal title = { titleText } /> < /ModalPage>); } else if ( showConfirmation ) { modalContent = ( < ExitPreventionModal onGoBack = { cancelExitLPC } onConfirmExit = { confirmExitLPC } / > ) ; } else if ( showPickUpTipConfirmationModal ) { modalContent = ( < ModalPage contentsClassName = { styles . modal_contents } titleBar = { { title : t ( 'labware_position_check_title' ) , back : { onClick : confirmExitLPC , title : t ( 'shared:exit' ) , children : t ( 'shared:exit' ) , } , } } > < ConfirmPickUpTipModal confirmText = { ctaText } onConfirm = { proceed } onDeny = { onUnsuccessfulPickUpTip } / > < /ModalPage>); } else if ( isComplete ) { modalContent = ( < ModalPage contentsClassName = { styles . modal_contents } titleBar = { { title : t ( 'labware_position_check_title' ) , back : { onClick : confirmExitLPC , title : t ( 'shared:exit' ) , children : t ( 'shared:exit' ) , } , } } > < SummaryScreen savePositionCommandData = { savePositionCommandData } onCloseClick = { props . onCloseClick } / > < /ModalPage>); } else if ( currentCommandIndex !== 0 ) { modalContent = ( < ModalPage contentsClassName = { styles . modal_contents } titleBar = { { title : t ( 'labware_position_check_title' ) , back : { onClick : confirmExitLPC , title : t ( 'shared:exit' ) , children : t ( 'shared:exit' ) , } , } } > < GenericStepScreen selectedStep = { currentStep } ctaText = { ctaText } proceed = { proceed } title = { titleText } jog = { jog } / > < /ModalPage>); } else { modalContent = ( < ModalPage contentsClassName = { styles . modal_contents } titleBar = { { title : t ( 'labware_position_check_title' ) , back : { onClick : confirmExitLPC , title : t ( 'shared:exit' ) , children : t ( 'shared:exit' ) , } , } } > < IntroScreen beginLPC = { beginLPC } /> < /ModalPage>); } return < Portal level = "top" > { modalContent } < /Portal>; } ;