Replace zxing QR reader implementation with react-qr-scanner

[MomoRazor]

The first implemention of the QR Reader Scanner using the primary option (@yudiel/react-qr-scanner)

https://trello.com/c/Zv00dw2j

[sentry]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 78.18%. Comparing base (6eda97e) to head (33c234c).

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #2474      +/-   ##
==========================================
+ Coverage   77.99%   78.18%   +0.18%     
==========================================
  Files         281      281              
  Lines       20098    20039      -59     
  Branches     2029     2027       -2     
==========================================
- Hits        15676    15668       -8     
+ Misses       4376     4325      -51     
  Partials       46       46              

Flag	Coverage Δ
backend	99.35% <ø> (ø)
frontend	70.26% <ø> (+0.23%)	⬆️
sharedComponents	61.63% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[MomoRazor]

Apologies forgot to upload a screenshot

[pylipp]

Functional review passes , I'll leave the code review to @HaGuesto and @jlin95 .
Tested single- and multi-box scan.
Really enthusiastic screenshot btw 😉

[MomoRazor]

Really enthusiastic screenshot btw 😉

For some reason, I was struggling with finding the printscreen button there 😂

Looking forward to the review :)

[HaGuesto]

code review passed

great, clean work @MomoRazor !

functional review

1.) The new QrReader behaves differently regarding "Re-scanning". The delayBetweenScanAttempts is different than before. Any idea why @MomoRazor ? I attached a video for this. Without a known reason it would be a blocker for me.

Screencast.2025-12-15.17.02.03.mp4

2.) Due to former bugs with IPhone, I would like an iPhone user to test before release on staging.

[MomoRazor]

I've gone through the code again and found 2 issues which I fixed:

• One was an inadvertant rename which was not allowing the delay to work in any context, that was fixed
• After that, I re-tested but noticed that the delay provided by the scanDelay prop provided only works for successful scans (as the documentation mentions in the image provided. This is unfortunate, but I've build a small work around using the pause prop, which could work, but is not super elegant, as the camera is briefly turned off after every scan. Alternatives to this approach are lodging an issue with the package, or switching package. Viz a viz the first option here, I'd probably be able to make a PR with the necessary changes to make the scanDelay work more predictable, if it gets accepted of course.

Let me know how it feels functionally :)

[HaGuesto]

The multiple throwing of the same message would be a blocker for me atm.
Otherwise, the delay works. nice little bit of hacking @MomoRazor

Screencast.2025-12-16.12.10.17.mp4

PS. I hope you do not get to frustrated by this and I hoped I prepared you enough for expecting it with the QR-Reader

[HaGuesto]

@MomoRazor sorry for finding more problems

Screencast.2025-12-16.12.22.29.mp4

[MomoRazor]

I see, weirdly i was getting the delay on error as well, as intended, but maybe i missed a corner case or a different throw? I'll check it the moment I'm back on my PC :)

Don't worry about frustration! It comes with the territory of React FE, and I've more than had my fair share professionally 😅.

Will keep you posted once I push changes :)

[pylipp]

@MomoRazor sorry for finding more problems

@HaGuesto the issue (switch multi-solo-multi, then scan and being directed to BoxDetails) you showed also happened to me on staging, I found out. So it might not be an issue with the new package. The final (data?) error I could not reproduce

[MomoRazor]

An update from my side (finally! Apologies for the delay, life's a bit hectic right now)

I've managed to fix the issue with the delay not working when in error mode. However, that said, the rest of the issues are somewhat complex:

• The issue of the first scan registering twice seems to come from the key we were setting on the parent QrReaderScanner and the fact that it was not dynamic with the multi / solo selector. This mean that listeners were not being (or set twice) when first rendered and switching to multi. This one should be solved.

• The video stream differences between the old and new implementation are not fixable without further extending the package we've chosen to give more visual customization changes. I've attempted to make changes to get the same visuals as before, however the use of a custom ViewFinder severly limits the UI customization. It does seem like the customization offered by the package for the video tag and the media constraints don't all work well enough to achieve the same visual we have before. Possible solutions of this range from forking the component so we can do our own customizations, or contributing to the project in the hopes of getting the functionality we need integrated. Personally I don't feel like the visual differences merit the cost, but that is only my opinion of course!

• The issue with the multi tab switch being ignored on initial render actually prompted the key fix that fixed point one. Of course more testing is welcome, but after having done these, I was not able to replicate these issues.

• The issue with the error messages not poping up after going to a different page is something I've replicated and will definitely be looking into

• The error with the qrreader url I think was a simple mistake of using http://localhost:3000/bases/1/boxes/qrreader which means the system was trying to load a box with ID qrreader, hence why the error 'Could not fetch Box Data! Please try reloading the page.'

Let me know if all of this tracks, and I will post another update when I've managed to work on the missing error messages

[MomoRazor]

After having re-tested the error message issue this morning, I found that I'm unable to replicate it anymore, so I'm presuming that adding the dynamic key to make sure that the scanner gets re-rendered when needed might have fixed it. Let me know if anyone replicates it again.

[MomoRazor]

Sorry about that! Fixed it in the last commit. Also going to try and keep pushing on the related package PR so that hopefully I get it merged soon.

[MomoRazor]

Good news on this! Seems the PR on the related package got approved! Here's to hoping the next update of the package gets published soon! :)

[MomoRazor]

Glad to report that the package was updated with our PR, and this branch has been updated to point to the latest version of the package!

[pylipp]

Functional review

Did a testing round with valid QR codes, those for unauthorized boxes, and non-boxtribute ones. I could not find any bugs. Especially the scanDelay works nicely. thanks @MomoRazor 🙏

Code review

There's some commented code that supposedly could be removed.

Could you update the corresponding ADR (status: implemented, link to this PR; maybe a short sentence about the adoption of the react-qr-scanner package and the required upstream fix)?

[pylipp]

Please use this part of the diff (probably overriden by merge), I had introduced it a couple of days ago in b355d73

[MomoRazor]

Hopefully I understood this properly! I just replaced all the setTimeouts in tests used to arbitrarely wait for UI changes. Tests seem to have worked :)

[pylipp]

I thought it'd be better to use

            const subButton = await waitFor(
              () => screen.getByText(clicks[1]),
              {},
              { timeout: 10000 },
            );

than const subButton = await screen.findByText(clicks[1]); because of the explicit waitFor.
I had the impression it made the tests less flaky in CI (even if they might pass locally)

[MomoRazor]

Please use this part of the diff (probably overriden by merge), I had introduced it a couple of days ago in b355d73

Sorry now I understood what you mean here. Not sure if you get this on your side too, however when I use this pattern, the Eslint starts to complain. Let me know if it's just me, and I'll look at my own setup in that case.

[pylipp]

I don't have eslint set up locally but it was not reported in CI, otherwise the build-front job would have failed.
I know it can be really annoying to figure out the issue in one's local setup, so I don' mind if we use the findByText version 😅

[MomoRazor]

I've kept the findByText version, but added some extra expected to a test in BoxCreateView on the successfully creates a box and navigates to box details test, which seemed to be the error I was getting in CI. Let me know if the flakyness returns

[pylipp]

2.) Due to former bugs with IPhone, I would like an iPhone user to test before release on staging.

@MomoRazor do you have access to an IPhone for testing?
The FE readme gives the details about how to use ngrok for testing the local application on a different device via a tunnel. I've configured our Auth0 dev-tenant to accept https://*.ngrok-free.app for callback URLs.

[MomoRazor]

Unfortunately I don't have access to an IPhone </3 However I'll still look into ngrok to test on my android phone.

[pylipp]

• I took the liberty to pull a couple of test updates into another PR Stabilize test assertions #2575 because they're not specific to the current PR, hope that's ok!
• it seems that the pnpm-lock file has gotten a huge diff due to replacing single by double quotes. Do you know which tool caused this? If it's from a general tool update I'd rather have it in a separate PR

[MomoRazor]

No problem with the test merge! As for the pnpm lock issue, I presume it is a prettier issue. I'll revert that so that we don't get a bunch of changes for no reason

[MomoRazor]

I should have done the merges and fixed the npm-lock. Still not eniterly sure what was the problem, as double quotes in npm lock can only mean I was using an older version of pnpm somehow... anyway let me know if it looks good on your side too!