fix(app): Add special casing for Stacker combination fixtures in deck conflict resolution (#18988)

closes RQA-4382, RQA-4319, EXEC-1416

Author: smb2268

app/src/assets/images/flex_stacker_waste_chute.png

@@ -0,0 +1,60 @@
+import {
+  ALIGN_CENTER,
+  COLORS,
+  Flex,
+  JUSTIFY_FLEX_END,
+  JUSTIFY_SPACE_BETWEEN,
+  ListItem,
+  SPACING,
+  StyledText,
+} from '@opentrons/components'
+
+import { SmallButton } from '/app/atoms/buttons'
+
+import type { MouseEventHandler } from 'react'
+
+interface ODDFixtureOptionProps {
+  onClickHandler: MouseEventHandler
+  secondaryOnClickHandler?: MouseEventHandler
+  optionName: string
+  secondaryButtonText?: string
+  buttonText: string
+}
+export function ODDFixtureOption(props: ODDFixtureOptionProps): JSX.Element {
+  const {
+    onClickHandler,
+    optionName,
+    buttonText,
+    secondaryOnClickHandler,
+    secondaryButtonText,
+  } = props
+  return (
+    <ListItem
+      type="default"
+      alignItems={ALIGN_CENTER}
+      justifyContent={JUSTIFY_SPACE_BETWEEN}
+      backgroundColor={COLORS.grey35}
+    >
+      <Flex gridGap={SPACING.spacing24}>
+        <StyledText oddStyle="bodyTextSemiBold">{optionName}</StyledText>
+        <Flex gridGap={SPACING.spacing16} justifyContent={JUSTIFY_FLEX_END}>
+          {secondaryOnClickHandler != null && secondaryButtonText != null ? (
+            <SmallButton
+              buttonType="secondary"
+              onClick={secondaryOnClickHandler}
+              data-testid={optionName}
+              buttonText={secondaryButtonText}
+              buttonCategory="rounded"
+            />
+          ) : null}
+          <SmallButton
+            onClick={onClickHandler}
+            data-testid={optionName}
+            buttonText={buttonText}
+            buttonCategory="rounded"
+          />
+        </Flex>
+      </Flex>
+    </ListItem>
+  )
+}

app/src/assets/images/single_center_slot.png

@@ -0,0 +1,41 @@
+import { fireEvent, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
+import { renderWithProviders } from '/app/__testing-utils__'
+
+import { ODDFixtureOption } from '..'
+
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof ODDFixtureOption>) => {
+  return renderWithProviders(<ODDFixtureOption {...props} />)
+}
+
+describe('ODDFixtureOption', () => {
+  let props: ComponentProps<typeof ODDFixtureOption>
+
+  it('should render text and buttons for desktop app', () => {
+    props = {
+      onClickHandler: vi.fn(),
+      optionName: 'mockOption',
+      buttonText: 'mockText',
+    }
+    render(props)
+    screen.getByText('mockOption')
+    screen.getByText('mockText')
+    fireEvent.click(screen.getByTestId('mockOption'))
+    expect(props.onClickHandler).toHaveBeenCalled()
+  })
+  it('should render text and buttons for odd', () => {
+    props = {
+      onClickHandler: vi.fn(),
+      optionName: 'mockOption',
+      buttonText: 'mockText',
+    }
+    render(props)
+    screen.getByText('mockOption')
+    screen.getByText('mockText')
+    fireEvent.click(screen.getByRole('button'))
+    expect(props.onClickHandler).toHaveBeenCalled()
+  })
+})