Update QR-Code Reader (#861m3kbwb, #388ehp2)

Update the layout of the QR-code scanning modal.

This issue concerns the first part of data transmission and can be done independently of the other parts. The screens for the whole process for PAT and HCP are attached below.

The broader story can be found on ClickUp: PAT HCP

Note: This issue only deals with the second to fourth screens on the images below.

Why is this a Modal?

Even though the new and the old version both stretch over all of the smartphone screen, this show be a modal (a full page modal). Here're the reason for that (up to debate :D)

• The camera feed should not stretch over all of the screen on desktops or laptop. (So it probably won't be a page on those devices)
• The QR-Code scanner is a universal tool and should be usable from different places. So when scanning is done we have to restore the previous state of the app. I'd rather not navigate through pages to accomplish that, especially when the scan trigger follow up modals.
• The QR-Code scanner should not be part of the navigation history. It feels weird to me if I opened the scanner, used the menu to go to some other place of the app, hit back and return to the scanner.
• The Scanner returns a value: the content of the QR code. If it was a page we would need an extra mechanism to hand over the value to whoever initiated the scan in the first place.

To be discussed

What is the best way to keep the Header? (Add a new kind of overlay -> RccOverlayService)

• Leave a gap on above the modal?
• Add header with menu to the modal?
• Add header only if screen is small (check how ionic does it)

What is do be done?

• Update the looks of the QR-Code Scanning Modal, so that it matches the attached images
• Use rcc-button for the cancel button (If not yet present add rcc-button component to both themes)
• Add Button for camera selection
• Trigger a toast if scanning gets canceled
• Trigger a toast when scanning was successful
• [optional] have the modal slide in from the bottom
• Maybe we need a new kind of modal?
• Please use rccButtonComponent for the cancel button (see #225), use a mock component if rccButton is not ready yet.

Hard to spot:

• On the bottom left of the clear area where the QR code is supposed to be placed, there is an icon, meant trigger camera selection (only visible on third hcp screen). This will be refined in a leater issue.

Where to start

• The current modal for the QR-Code Scanner can be found here: /lib/features/src/qr-code-scanner/scan modal

Attachments

Link to figma for the whole sequence: figma HCP figma PAT

Only screens 1 to 4 are relevant for this issue.