fix(app): adjust module setup flow banner copy and animation size (#19036)

# Overview
1. Fix module setup flow banner text and style for stacker [closes
RQA-4379]
2. Increase the size of installShuttle animation [closes RQA-4415]

Author: ahiuchingau

app/src/assets/localization/en/module_wizard_flows.json

@@ -37,6 +37,7 @@
   "installing_latest_firmware": "Installing latest firmware",
   "install_update": "Install update",
   "location_occupied": "A {{fixture}} is currently specified here on the deck configuration",
+  "look_for_pulsing_lights": "Look for pulsing lights on the module that you are setting up",
   "module_added": "New module detected. Setup the module for use.",
   "module_attached_to_port": "New {{module}} attached to {{port}}!",
   "module_attached_multiple": "Multiple new modules detected. Which module do you want to setup?",
@@ -47,7 +48,7 @@
   "module_calibration": "Module calibration",
   "module_setup": "Module setup",
   "module_heating_or_cooling": "Module calibration cannot proceed while heating or cooling",
-  "module_secured": "The module must be fully secured in its caddy and secured in the deck slot.",
+  "module_secured": "The module must be fully secured in its caddy and secured in the deck slot",
   "module_too_hot": "Module is too hot to proceed to module setup",
   "move_gantry_to_front": "Move gantry to front",
   "next": "Next",
@@ -60,7 +61,8 @@
   "prepping_module": "Prepping {{module}} for module setup",
   "recalibrate": "Recalibrate",
   "select_location": "Select module location",
-  "select_the_slot": "Select the slot where you installed the {{module}} on the deck map to the right. The location must be correct for successful calibration.",
+  "select_the_slot": "Select the slot where you installed the {{module}} connected to {{port}}.",
+  "location_must_be_correct": "The location must be correct for successful calibration.",
   "shuttle_install_fail": "Shuttle installed incorrectly",
   "shuttle_install_fail_description": "There was an issue with the install of the shuttle. Please try installing again or contact support.",
   "setup_another_module": "Setup another module",

app/src/organisms/ModuleWizardFlows/InstallShuttle.tsx

@@ -109,16 +109,9 @@ export function InstallShuttle(props: InstallShuttleProps): JSX.Element {
       <GenericWizardTile
         header={i18n.format(t('place_shuttle'), 'capitalize')}
         rightHandBody={
-          <Flex height="13.25rem" paddingTop={SPACING.spacing4}>
-            <AnimationVideo
-              css={css`
-                max-width: 100%;
-                max-height: 100%;
-              `}
-            >
-              <source src={StackerInstallShuttle} />
-            </AnimationVideo>
-          </Flex>
+          <AnimationVideo width="100%">
+            <source src={StackerInstallShuttle} />
+          </AnimationVideo>
         }
         bodyText={
           <>

app/src/organisms/ModuleWizardFlows/SelectLocation.tsx

@@ -3,19 +3,18 @@ import isEqual from 'lodash/isEqual'
 import { css } from 'styled-components'
 
 import {
-  Banner,
   DeckConfigurator,
-  LegacyStyledText,
+  InlineNotification,
   RESPONSIVENESS,
-  SIZE_1,
-  SPACING,
+  StyledText,
   TYPOGRAPHY,
 } from '@opentrons/components'
 import { useUpdateDeckConfigurationMutation } from '@opentrons/react-api-client'
 import {
   FAKE_FIXTURE_IDS,
   FLEX_ROBOT_TYPE,
   FLEX_STACKER_FIXTURES,
+  FLEX_STACKER_MODULE_TYPE,
   getAAForModuleFixture,
   getCutoutConfigReplacmentForModule,
   getCutoutFixturesForModuleModel,
@@ -32,6 +31,7 @@ import {
   SINGLE_SLOT_FIXTURES,
 } from '@opentrons/shared-data'
 
+import { useModuleUSBPort } from '/app/local-resources/modules'
 import { GenericWizardTile } from '/app/molecules/GenericWizardTile'
 
 import { getFixtureIdByCutoutId } from './getFixtureIdByCutoutId'
@@ -79,6 +79,10 @@ export function SelectLocation(props: SelectLocationProps): JSX.Element {
 
   const { t } = useTranslation('module_wizard_flows')
   const moduleName = getModuleDisplayName(attachedModule.moduleModel)
+  const { parseModuleUSBPort } = useModuleUSBPort()
+
+  const isFlexStacker = attachedModule.moduleType === FLEX_STACKER_MODULE_TYPE
+
   const handleOnClick = (): void => {
     if (maintenanceRunId == null) {
       createMaintenanceRun({}).catch(error => {
@@ -229,12 +233,21 @@ export function SelectLocation(props: SelectLocationProps): JSX.Element {
       }
       bodyText={
         <>
-          <LegacyStyledText css={BODY_STYLE}>
-            {t('select_the_slot', { module: moduleName })}
-          </LegacyStyledText>
-          <Banner type="warning" size={SIZE_1} marginY={SPACING.spacing4}>
-            {t('module_secured')}
-          </Banner>
+          <StyledText css={BODY_STYLE}>
+            {t('select_the_slot', {
+              module: moduleName,
+              port: parseModuleUSBPort(attachedModule),
+            })}
+            {isFlexStacker ? null : ` ${t('location_must_be_correct')}`}
+          </StyledText>
+          {isFlexStacker ? (
+            <InlineNotification
+              type="neutral"
+              message={t('look_for_pulsing_lights')}
+            />
+          ) : (
+            <InlineNotification type="alert" message={t('module_secured')} />
+          )}
         </>
       }
       proceedButtonText={t('confirm_location')}

app/src/organisms/ModuleWizardFlows/__tests__/SelectLocation.test.tsx

@@ -89,6 +89,12 @@ const mockSimpleDeckConfig: CutoutConfig[] = [
 const attachedModule: Partial<AttachedModule> = {
   moduleModel: 'temperatureModuleV2',
   serialNumber: 'test123',
+  usbPort: {
+    path: '/dev/ot_module_tempdeck0',
+    port: 1,
+    hub: false,
+    portGroup: 'unknown',
+  },
 }
 const RUN_ID_1: string = 'mock_run_1'
 const mockUpdateDeckConfiguration = vi.fn()
@@ -137,7 +143,7 @@ describe('SelectLocation', () => {
     render(props)
     screen.getByText('Select module location')
     screen.getByText(
-      'Select the slot where you installed the Temperature Module GEN2 on the deck map to the right. The location must be correct for successful calibration.'
+      'Select the slot where you installed the Temperature Module GEN2 connected to USB-1. The location must be correct for successful calibration.'
     )
 
     const confirmBtn = screen.getByText('Confirm location')