feat(app): update and add new setup modal links and QR codes (#21728)

Add or update setup instruction links and corresponding QR codes for all
modules with setup docs pages. Also, update and generalize the modal
body copy for desktop module setup instructions modal.

The full list of modules that should expose menu buttons to open the
module setup modal, and in turn QR codes and links to direct to the
correct [docs](https://docs.opentrons.com/modules/) is:

1. absorbance reader
2. stacker
3. vacuum
4. thermocycler
5. heater shaker
6. temperature

Closes EXEC-2366

Author: ncdiehl11

app/src/assets/images/absorbance_reader_instruction_manual_code.png

@@ -84,7 +84,7 @@
   "secure_labware_explanation_magnetic_module": "<block>Opentrons recommends ensuring your labware locks to the Magnetic Module by adjusting the black plate bracket on top of the module.</block> <block>There are two sizes of plate brackets supplied with your module: standard and deep well. These brackets can be removed and swapped by unscrewing the module's thumb screw (the silver knob on the front).</block>",
   "secure_labware_explanation_thermocycler": "Opentrons recommends securing your labware to the Thermocycler Module by closing its latch. Doing so ensures level and accurate plate placement for optimal results.",
   "send_a_protocol_to_store": "Send a protocol from the Opentrons App to get started.",
-  "setup_instructions_description": "For step-by-step instructions on setting up your module, consult the Quickstart Guide that came in its box or scan the QR code to visit the modules section of the Opentrons Help Center.",
+  "setup_instructions_description": "Follow the step-by-step setup instructions in the module’s manual. Scan the QR code or click the link below to view it on the Opentrons documentation website.",
   "share_app_analytics": "Share App Analytics with Opentrons",
   "share_app_analytics_description": "Help Opentrons improve its products and services by automatically sending anonymous diagnostics and usage data.",
   "share_display_usage_description": "Data on how you interact with the touchscreen on Flex.",

app/src/assets/images/heatershaker_setup_instructions_qr.png

@@ -19,25 +19,31 @@ import {
   ABSORBANCE_READER_TYPE,
   FLEX_STACKER_MODULE_TYPE,
   getModuleType,
+  HEATERSHAKER_MODULE_TYPE,
+  TEMPERATURE_MODULE_TYPE,
+  THERMOCYCLER_MODULE_TYPE,
   VACUUM_MODULE_TYPE,
 } from '@opentrons/shared-data'
 
 import { getTopPortalEl } from '/app/App/portal'
 import absorbanceReaderManualQRCode from '/app/assets/images/absorbance_reader_instruction_manual_code.png'
+import heaterShakerManualQRCode from '/app/assets/images/heatershaker_setup_instructions_qr.png'
 import helpCenterQRCode from '/app/assets/images/module_instruction_code.png'
 import stackerInstallationQRCode from '/app/assets/images/stacker_installation_qr.png'
+import temperatureManualQRCode from '/app/assets/images/temperature_setup_instructions_qr.png'
+import thermocyclerManualQRCode from '/app/assets/images/thermocycler_setup_instructions_qr.png'
 import vacuumModuleManualQRCode from '/app/assets/images/vacuum_setup_instructions_qr.png'
 
 import type { ModuleModel } from '@opentrons/shared-data'
 
-const MODULE_SETUP_URL = 'https://support.opentrons.com/s/modules'
+const MODULE_SETUP_URL = 'https://docs.opentrons.com/modules'
 const ABSORBANCE_READER_MANUAL_URL =
-  'https://insights.opentrons.com/hubfs/Absorbance%20Plate%20Reader%20Instruction%20Manual.pdf'
-const FLEX_STACKER_INSTALL_DOCS_URL =
-  'https://docs.opentrons.com/stacker/installation/'
-// TODO: add vacuum module manual url
-const VACUUM_MODULE_MANUAL_URL = 'https://docs.opentrons.com/modules/'
-
+  'https://docs.opentrons.com/absorbance-plate-reader/'
+const FLEX_STACKER_INSTALL_DOCS_URL = 'https://docs.opentrons.com/stacker/'
+const VACUUM_MANUAL_URL = 'https://docs.opentrons.com/vacuum/'
+const THERMOCYCLER_MANUAL_URL = 'https://docs.opentrons.com/thermocycler/'
+const HEATERSHAKER_MANUAL_URL = 'https://docs.opentrons.com/heater-shaker/'
+const TEMPERATURE_MANUAL_URL = 'https://docs.opentrons.com/temperature-module/'
 interface ModuleSetupModalProps {
   close: () => void
   moduleDisplayName: string
@@ -53,25 +59,6 @@ export const ModuleSetupModal = (props: ModuleSetupModalProps): JSX.Element => {
     'device_details',
   ])
 
-  const instructionText = (): string => {
-    const moduleType = getModuleType(moduleModel)
-    switch (moduleType) {
-      case ABSORBANCE_READER_TYPE:
-        return t('module_instructions_manual')
-      case FLEX_STACKER_MODULE_TYPE:
-        return t('module_instructions_quickstart', {
-          moduleName: t('device_details:stacker'),
-        })
-      case VACUUM_MODULE_TYPE:
-        return t('module_instructions_quickstart', {
-          moduleName: t('device_details:vacuum_module'),
-        })
-      default:
-        // Legacy module instructions direct user to the help center instead of the quickstart guide
-        return t('branded:modal_instructions')
-    }
-  }
-
   const instructionURL = (): string => {
     const moduleType = getModuleType(moduleModel)
     switch (moduleType) {
@@ -80,7 +67,13 @@ export const ModuleSetupModal = (props: ModuleSetupModalProps): JSX.Element => {
       case FLEX_STACKER_MODULE_TYPE:
         return FLEX_STACKER_INSTALL_DOCS_URL
       case VACUUM_MODULE_TYPE:
-        return VACUUM_MODULE_MANUAL_URL
+        return VACUUM_MANUAL_URL
+      case THERMOCYCLER_MODULE_TYPE:
+        return THERMOCYCLER_MANUAL_URL
+      case HEATERSHAKER_MODULE_TYPE:
+        return HEATERSHAKER_MANUAL_URL
+      case TEMPERATURE_MODULE_TYPE:
+        return TEMPERATURE_MANUAL_URL
       default:
         return MODULE_SETUP_URL
     }
@@ -94,6 +87,12 @@ export const ModuleSetupModal = (props: ModuleSetupModalProps): JSX.Element => {
         return stackerInstallationQRCode
       case VACUUM_MODULE_TYPE:
         return vacuumModuleManualQRCode
+      case THERMOCYCLER_MODULE_TYPE:
+        return thermocyclerManualQRCode
+      case HEATERSHAKER_MODULE_TYPE:
+        return heaterShakerManualQRCode
+      case TEMPERATURE_MODULE_TYPE:
+        return temperatureManualQRCode
       default:
         return helpCenterQRCode
     }
@@ -113,7 +112,7 @@ export const ModuleSetupModal = (props: ModuleSetupModalProps): JSX.Element => {
             width="50%"
           >
             <LegacyStyledText forwardedAs="p" marginBottom={SPACING.spacing16}>
-              {instructionText()}
+              {t('branded:setup_instructions_description')}
             </LegacyStyledText>
             <Link
               external

app/src/assets/images/on-device-display/setup_instructions_qr_code.png

@@ -39,7 +39,7 @@ describe('ModuleSetupModal', () => {
   it('should render the correct body', () => {
     render(props)
     screen.getByText(
-      'For step-by-step instructions on setting up your module, consult the Quickstart Guide that came in its box. You can also click the link below or scan the QR code to visit the modules section of the Opentrons Help Center.'
+      'Follow the step-by-step setup instructions in the module’s manual. Scan the QR code or click the link below to view it on the Opentrons documentation website.'
     )
   })
   it('should render a link to the learn more page', () => {
@@ -50,7 +50,7 @@ describe('ModuleSetupModal', () => {
           name: 'mockModuleDisplayName setup instructions',
         })
         .getAttribute('href')
-    ).toBe('https://support.opentrons.com/s/modules')
+    ).toBe('https://docs.opentrons.com/temperature-module/')
   })
   it('should call close when the close button is pressed', () => {
     render(props)
@@ -66,17 +66,15 @@ describe('ModuleSetupModal', () => {
     }
     render(props)
     screen.getByText(
-      'For step-by-step instructions on setting up your module, consult the Quickstart Guide that came in its box. You can also click the link below or scan the QR code to read the module Instruction Manual.'
+      'Follow the step-by-step setup instructions in the module’s manual. Scan the QR code or click the link below to view it on the Opentrons documentation website.'
     )
     expect(
       screen
         .getByRole('link', {
           name: 'mockModuleDisplayName setup instructions',
         })
         .getAttribute('href')
-    ).toBe(
-      'https://insights.opentrons.com/hubfs/Absorbance%20Plate%20Reader%20Instruction%20Manual.pdf'
-    )
+    ).toBe('https://docs.opentrons.com/absorbance-plate-reader/')
   })
   it('should render variable copy and link if flex stacker', () => {
     props = {
@@ -85,14 +83,14 @@ describe('ModuleSetupModal', () => {
     }
     render(props)
     screen.getByText(
-      'For step-by-step instructions on setting up your module, consult the Quickstart Guide that came in its box. You can also click the link below or scan the QR code to see the Stacker Quickstart guide.'
+      'Follow the step-by-step setup instructions in the module’s manual. Scan the QR code or click the link below to view it on the Opentrons documentation website.'
     )
     expect(
       screen
         .getByRole('link', {
           name: 'mockModuleDisplayName setup instructions',
         })
         .getAttribute('href')
-    ).toBe('https://docs.opentrons.com/stacker/installation/')
+    ).toBe('https://docs.opentrons.com/stacker/')
   })
 })

app/src/assets/images/temperature_setup_instructions_qr.png

@@ -392,7 +392,7 @@ export function useModuleOverflowMenu(
             : t('open_lid'),
         isSettingDisabled: isDisabled,
         isSecondary: false,
-        menuButtons: [thermoSetBlockTempBtn, aboutModuleBtn],
+        menuButtons: [thermoSetBlockTempBtn, aboutModuleBtn, setupBtn],
         onClick: controlTCLid,
       },
     ],
@@ -405,7 +405,7 @@ export function useModuleOverflowMenu(
             : t('overflow_menu_mod_temp'),
         isSecondary: false,
         isSettingDisabled: isDisabled,
-        menuButtons: [aboutModuleBtn],
+        menuButtons: [aboutModuleBtn, setupBtn],
         onClick:
           module.data.status !== 'idle'
             ? () => {
@@ -468,7 +468,7 @@ export function useModuleOverflowMenu(
         setSetting: t('overflow_menu_about'),
         isSecondary: false,
         isSettingDisabled: false,
-        menuButtons: [],
+        menuButtons: [setupBtn],
         onClick: handleAboutClick,
       },
     ],

app/src/assets/images/thermocycler_setup_instructions_qr.png

@@ -99,6 +99,9 @@ const HAS_SETUP_INSTRUCTIONS_TYPE: ModuleType[] = [
   FLEX_STACKER_MODULE_TYPE,
   HEATERSHAKER_MODULE_TYPE,
   VACUUM_MODULE_TYPE,
+  THERMOCYCLER_MODULE_TYPE,
+  TEMPERATURE_MODULE_TYPE,
+  ABSORBANCE_READER_TYPE,
 ]
 
 const POLL_INTERVAL_MS = 5000