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 => {