diff --git a/app/src/organisms/ModuleCard/FlexStackerModuleData.tsx b/app/src/organisms/ModuleCard/FlexStackerModuleData.tsx
new file mode 100644
index 00000000000..8fd1403f6c9
--- /dev/null
+++ b/app/src/organisms/ModuleCard/FlexStackerModuleData.tsx
@@ -0,0 +1,59 @@
+import { useTranslation } from 'react-i18next'
+import { StyledText, COLORS } from '@opentrons/components'
+import { StatusLabel } from '/app/atoms/StatusLabel'
+
+import type { FlexStackerModule } from '/app/redux/modules/types'
+
+interface FlexStackerModuleProps {
+ moduleData: FlexStackerModule['data']
+}
+
+export const FlexStackerModuleData = (
+ props: FlexStackerModuleProps
+): JSX.Element | null => {
+ const { moduleData } = props
+ const { t, i18n } = useTranslation(['device_details', 'shared'])
+
+ const StatusLabelProps = {
+ status: 'Idle',
+ backgroundColor: COLORS.grey30,
+ iconColor: COLORS.grey60,
+ textColor: COLORS.grey60,
+ pulse: false,
+ }
+ switch (moduleData.status) {
+ case 'storing':
+ case 'dispensing': {
+ StatusLabelProps.status = moduleData.status
+ StatusLabelProps.backgroundColor = COLORS.blue30
+ StatusLabelProps.iconColor = COLORS.blue60
+ StatusLabelProps.textColor = COLORS.blue60
+ break
+ }
+ case 'error': {
+ StatusLabelProps.status = 'Error'
+ StatusLabelProps.backgroundColor = COLORS.yellow30
+ StatusLabelProps.iconColor = COLORS.yellow60
+ StatusLabelProps.textColor = COLORS.yellow60
+ break
+ }
+ }
+ const lidDisplayStatus =
+ moduleData.hopperDoorState === 'opened'
+ ? i18n.format(t('shared:closed'), 'capitalize')
+ : i18n.format(t('shared:open'), 'capitalize')
+
+ return (
+ <>
+
+
+ {t('abs_reader_lid_status', {
+ status: lidDisplayStatus,
+ })}
+
+ >
+ )
+}
diff --git a/app/src/organisms/ModuleCard/FlexStackerModuleSlideout.tsx b/app/src/organisms/ModuleCard/FlexStackerModuleSlideout.tsx
new file mode 100644
index 00000000000..c1da92e52ac
--- /dev/null
+++ b/app/src/organisms/ModuleCard/FlexStackerModuleSlideout.tsx
@@ -0,0 +1,43 @@
+import { useTranslation } from 'react-i18next'
+import { getModuleDisplayName } from '@opentrons/shared-data'
+import { SPACING, LegacyStyledText, TYPOGRAPHY } from '@opentrons/components'
+import { Slideout } from '/app/atoms/Slideout'
+
+import type { FlexStackerModule } from '/app/redux/modules/types'
+
+interface FlexStackerModuleSlideoutProps {
+ module: FlexStackerModule
+ onCloseClick: () => unknown
+ isExpanded: boolean
+}
+
+export const FlexStackerModuleSlideout = (
+ props: FlexStackerModuleSlideoutProps
+): JSX.Element | null => {
+ const { module, onCloseClick, isExpanded } = props
+ const { t } = useTranslation('device_details')
+ const moduleName = getModuleDisplayName(module.moduleModel)
+
+ const handleCloseSlideout = (): void => {
+ onCloseClick()
+ }
+
+ return (
+
+
+ {t('set_absorbance_reader')}
+
+
+ )
+}
diff --git a/app/src/organisms/ModuleCard/ModuleOverflowMenu.tsx b/app/src/organisms/ModuleCard/ModuleOverflowMenu.tsx
index a668fc48e70..8bb1cb3456c 100644
--- a/app/src/organisms/ModuleCard/ModuleOverflowMenu.tsx
+++ b/app/src/organisms/ModuleCard/ModuleOverflowMenu.tsx
@@ -17,6 +17,7 @@ import {
MODULE_MODELS_OT2_ONLY,
TEMPERATURE_MODULE_TYPE,
THERMOCYCLER_MODULE_TYPE,
+ FLEX_STACKER_MODULE_TYPE,
} from '@opentrons/shared-data'
import { useCurrentRunId, useRunStatuses } from '/app/resources/runs'
import { useIsLegacySessionInProgress } from '/app/resources/legacy_sessions'
@@ -121,6 +122,7 @@ export const ModuleOverflowMenu = (
{isFlex &&
module.moduleType !== ABSORBANCE_READER_TYPE &&
+ module.moduleType !== FLEX_STACKER_MODULE_TYPE &&
!MODULE_MODELS_OT2_ONLY.some(
modModel => modModel === module.moduleModel
) ? (
diff --git a/app/src/organisms/ModuleCard/hooks.tsx b/app/src/organisms/ModuleCard/hooks.tsx
index da44c64d983..2fa7ca9a325 100644
--- a/app/src/organisms/ModuleCard/hooks.tsx
+++ b/app/src/organisms/ModuleCard/hooks.tsx
@@ -369,6 +369,15 @@ export function useModuleOverflowMenu(
onClick: handleAboutClick,
},
],
+ flexStackerModuleType: [
+ {
+ setSetting: t('overflow_menu_about'),
+ isSecondary: false,
+ isSettingDisabled: false,
+ menuButtons: [],
+ onClick: handleAboutClick,
+ },
+ ],
}
return {
diff --git a/app/src/organisms/ModuleCard/index.tsx b/app/src/organisms/ModuleCard/index.tsx
index 622c161c5b3..a4b26a4c2a9 100644
--- a/app/src/organisms/ModuleCard/index.tsx
+++ b/app/src/organisms/ModuleCard/index.tsx
@@ -77,6 +77,7 @@ import type { State, Dispatch } from '/app/redux/types'
import type { RequestState } from '/app/redux/robot-api/types'
import { AbsorbanceReaderData } from './AbsorbanceReaderData'
import { AbsorbanceReaderSlideout } from './AbsorbanceReaderSlideout'
+import { FlexStackerModuleData } from './FlexStackerModuleData'
interface ModuleCardProps {
module: AttachedModule
@@ -215,6 +216,11 @@ export const ModuleCard = (props: ModuleCardProps): JSX.Element | null => {
moduleData =
break
}
+
+ case FLEX_STACKER_MODULE_TYPE: {
+ moduleData =
+ break
+ }
}
const handleMenuItemClick = (isSecondary: boolean = false): void => {