From bcc11869cca639ce41d5e57a190543128b94d848 Mon Sep 17 00:00:00 2001
From: Brent Hagen <brent.hagen@opentrons.com>
Date: Thu, 16 May 2024 15:43:13 -0400
Subject: [PATCH] implement basic destination well selection

---
 .../QuickTransferFlow/SelectDestWells.tsx     | 61 +++++++++++++------
 .../QuickTransferFlow/SelectSourceWells.tsx   |  2 +-
 2 files changed, 42 insertions(+), 21 deletions(-)

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<typeof SmallButton>
   state: QuickTransferSetupState
   dispatch: React.Dispatch<QuickTransferWizardAction>
 }
 
 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<typeof SmallButton> = {
+    buttonType: 'tertiaryLowLight',
+    buttonText: t('shared:reset'),
+    onClick: () => {
+      setSelectedWells({})
+    },
+  }
+
   return (
-    <Flex>
+    <>
       <ChildNavigation
         header={t('select_dest_wells')}
         onClickBack={onBack}
         buttonText={i18n.format(t('shared:continue'), 'capitalize')}
         onClickButton={handleClickNext}
         buttonIsDisabled={false}
-        secondaryButtonProps={exitButtonProps}
+        secondaryButtonProps={resetButtonProps}
         top={SPACING.spacing8}
       />
       <Flex
+        justifyContent={JUSTIFY_CENTER}
         marginTop={SPACING.spacing120}
         padding={`${SPACING.spacing16} ${SPACING.spacing60} ${SPACING.spacing40} ${SPACING.spacing60}`}
       >
-        TODO: Add destination well selection deck map
+        {state.destination != null && state.source != null ? (
+          <WellSelection
+            definition={
+              state.destination === 'source' ? state.source : state.destination
+            }
+            selectedPrimaryWells={selectedWells}
+            selectWells={wellGroup => {
+              setSelectedWells(prevWells => ({ ...prevWells, ...wellGroup }))
+            }}
+            // TODO: nozzle type
+            nozzleType={null}
+          />
+        ) : null}
       </Flex>
-    </Flex>
+    </>
   )
 }
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<typeof SmallButton>
   state: QuickTransferSetupState
   dispatch: React.Dispatch<QuickTransferWizardAction>
 }
@@ -70,6 +69,7 @@ export function SelectSourceWells(props: SelectSourceWellsProps): JSX.Element {
             selectWells={wellGroup => {
               setSelectedWells(prevWells => ({ ...prevWells, ...wellGroup }))
             }}
+            // TODO: nozzle type
             nozzleType={null}
           />
         ) : null}