chore(Cross): [IOAPPX-356] Add divider to first level sections when the user scrolls + Add useHeaderFirstLevel hook

[dmnplb]

Note

This change applies only to the Wallet, Services and Payments sections.

Short description

This PR adds the new divider transition to first level sections when the user scrolls. To get this behaviour, we need to define HeaderFirstLevelProps directly in the main screen through useLayoutEffect where the main ScrollView or FlatList is placed.

To avoid code duplication, there's a new useHeaderFirstLevelActionPropHelp's hook that returns a FAQ configuration object based on the provided route.

List of changes proposed in this pull request

• Add the new divider transition to the HeaderFirstLevel using the useScrollViewOffset hook from reanimated
• Add the new optional endBlock prop to HeaderFirstLevel to render custom block (see the Services screen for a demonstration Update: removed from the PR
• Break down the overall (chaotic) logic contained in the HeaderFirstLevelHandler into relative first level sections
• Remove HeaderFirstLevelHandler completely
• Add the new hooks related to the HeaderFirstLevel:
  • useHeaderFirstLevelActionPropHelp to get the props related to the Help section
  • useHeaderFirstLevelActionPropSettings to get the props related to the Settings section
  • useHeaderFirstLevel to set the HeaderFirstLevel by using useLayoutEffect with react-navigation
• Update HeaderFirstLevel by making two actions mandatory and thirdAction optional
• For testing purposes, update HeaderFirstLevel with the latest changes from io-app-design-system

Preview

Important

The divider is set with hairlineWidth, so it's very thin. If you want to see the change, download the following videos and play them at full resolution

Wallet	Services	Payments
wallet-divider-new.mp4	services-divider.mp4	payment-divider.mp4

How to test

Go to the above sections and check that everything is correct. Also check the relative flow of the Assistance in each first level section.

[pagopa-github-bot]

Affected stories

• ⚙️ IOAPPX-356: [io-app] Aggiunta del divisore quando l'utente scorre nelle sezioni di primo livello
  subtask of
  • ⚡ IOAPPX-32: Design System

Generated by 🚫 dangerJS against 33db7fc

[mastro993]

LGTM, everything looks as expected