(PC-33752) refactor(modal): extract reaction modal display logic

[cgerrard-pass]

Link to JIRA ticket: https://passculture.atlassian.net/browse/PC-33752

Flakiness

If I had to re-run tests in the CI due to flakiness, I add the incident on Notion

Checklist

I have:

• Made sure my feature is working on web.
• Made sure my feature is working on mobile (depending on relevance : real or virtual devices)
• Written unit tests native (and web when implementation is different) for my feature.
• Added a screenshot for UI tickets or deleted the screenshot section if no UI change
• If my PR is a bugfix, I add the link of the "résolution de problème sur le bug" on Notion
• I am aware of all the best practices and respected them.

Screenshots

delete if no UI change

Platform	Mockup/Before	After
iOS
Android
Phone - Chrome
Desktop - Chrome

Best Practices

Click to expand

These rules apply to files that you make changes to. If you can't respect one of these rules, be sure to explain why with a comment. If you consider correcting the issue is too time consuming/complex: create a ticket. Link the ticket in the code.

• In the production code: remove type assertions with as (type assertions are removed at compile-time, there is no runtime checking associated with a type assertion. There won’t be an exception or null generated if the type assertion is wrong). In certain cases as const is acceptable (for example when defining readonly arrays/objects). Using as in tests is tolerable.
• Remove bypass type checking with any (when you want to accept anything because you will be blindly passing it through without interacting with it, you can use unknown). Using any in tests is tolerable.
• Remove non-null assertion operators (just like other type assertions, this doesn’t change the runtime behavior of your code, so it’s important to only use ! when you know that the value can’t be null or undefined).
• Remove all @ts-expect-error and @eslint-disable.
• Remove all warnings, and errors that we are used to ignore (yarn test:lint, yarn test:types, yarn start:web...).
• Use gap (ViewGap) instead of <Spacer.Column />, <Spacer.Row /> or <Spacer.Flex />.
• Don't add new "alias hooks" (hooks created to group other hooks together). When adding new logic, this hook will progressively become more complex and harder to maintain.
• Remove logic from components that should be dumb.

Test specific:

• Avoid mocking internal parts of our code. Ideally, mock only external calls.
• When you see a local variable that is over-written in every test, mock it.
• Prefer user to fireEvent.
• When mocking feature flags, use setFeatureFlags. If not possible, mention which one(s) you want to mock in a comment (example: jest.spyOn(useFeatureFlagAPI, 'useFeatureFlag').mockReturnValue(true) // WIP_NEW_OFFER_TILE in renderPassPlaylist.tsx )
• In component tests, replace await act(async () => {}) and await waitFor(/* ... */) by await screen.findBySomething().
• In hooks tests, use act by default and waitFor as a last resort.
• Make a snapshot test for pages and modals ONLY.
• Make a web specific snapshot when your web page/modal is specific to the web.
• Make an a11y test for web pages.

Advice:

• Use TDD
• Use Storybook
• Use pair programming/mobs

[lbeneston-pass]

C'est pas mieux d'avoir bookings optionnel dans IncomingReactionModalContainer qui return null si c'est vide ? Comme ça on à juste la condition :

shouldShowReactionModal && <IncomingReactionModalContainer bookings={bookings} />

Comme il y a déjà cette condition dans IncomingReactionModalContainer :

  if (!firstBooking) return null

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
88.9% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud