diff --git a/app/src/organisms/QuickTransferFlow/SelectDestWells.tsx b/app/src/organisms/QuickTransferFlow/SelectDestWells.tsx index 39ef17cffe9..ec6cf14e4d6 100644 --- a/app/src/organisms/QuickTransferFlow/SelectDestWells.tsx +++ b/app/src/organisms/QuickTransferFlow/SelectDestWells.tsx @@ -1,10 +1,11 @@ import * as React from 'react' import { useTranslation } from 'react-i18next' -import { Flex, SPACING } from '@opentrons/components' +import { Flex, JUSTIFY_CENTER, SPACING } from '@opentrons/components' -import { SmallButton } from '../../atoms/buttons' import { ChildNavigation } from '../ChildNavigation' +import { WellSelection } from '../../organisms/WellSelection' +import type { SmallButton } from '../../atoms/buttons' import type { QuickTransferSetupState, QuickTransferWizardAction, @@ -13,47 +14,67 @@ import type { interface SelectDestWellsProps { onNext: () => void onBack: () => void - exitButtonProps: React.ComponentProps state: QuickTransferSetupState dispatch: React.Dispatch } export function SelectDestWells(props: SelectDestWellsProps): JSX.Element { - const { onNext, onBack, exitButtonProps, state, dispatch } = props + const { onNext, onBack, state, dispatch } = props const { i18n, t } = useTranslation(['quick_transfer', 'shared']) + const destinationWells = state.destinationWells ?? [] + const destinationWellGroup = destinationWells.reduce((acc, well) => { + return { ...acc, [well]: null } + }, {}) + + const [selectedWells, setSelectedWells] = React.useState(destinationWellGroup) + const handleClickNext = (): void => { - // until well selection is implemented, select all wells and proceed to the next step - if (state.destination === 'source' && state.source != null) { - dispatch({ - type: 'SET_DEST_WELLS', - wells: Object.keys(state.source.wells), - }) - } else if (state.destination !== 'source' && state.destination != null) { - dispatch({ - type: 'SET_DEST_WELLS', - wells: Object.keys(state.destination.wells), - }) - } + dispatch({ + type: 'SET_DEST_WELLS', + wells: Object.keys(selectedWells), + }) onNext() } + + const resetButtonProps: React.ComponentProps = { + buttonType: 'tertiaryLowLight', + buttonText: t('shared:reset'), + onClick: () => { + setSelectedWells({}) + }, + } + return ( - + <> - TODO: Add destination well selection deck map + {state.destination != null && state.source != null ? ( + { + setSelectedWells(prevWells => ({ ...prevWells, ...wellGroup })) + }} + // TODO: nozzle type + nozzleType={null} + /> + ) : null} - + ) } diff --git a/app/src/organisms/QuickTransferFlow/SelectSourceWells.tsx b/app/src/organisms/QuickTransferFlow/SelectSourceWells.tsx index a9e76dd6a8a..178daab961a 100644 --- a/app/src/organisms/QuickTransferFlow/SelectSourceWells.tsx +++ b/app/src/organisms/QuickTransferFlow/SelectSourceWells.tsx @@ -15,7 +15,6 @@ import type { interface SelectSourceWellsProps { onNext: () => void onBack: () => void - exitButtonProps: React.ComponentProps state: QuickTransferSetupState dispatch: React.Dispatch } @@ -70,6 +69,7 @@ export function SelectSourceWells(props: SelectSourceWellsProps): JSX.Element { selectWells={wellGroup => { setSelectedWells(prevWells => ({ ...prevWells, ...wellGroup })) }} + // TODO: nozzle type nozzleType={null} /> ) : null}