feat(IT-Wallet): [SIW-4617] Use guided tour for wallet add action

[riccardosacco99]

Short description

Update the IT Wallet guided tour so the “Add document” step highlights the “+” header action itself, instead of a manually measured header region. The step is now attached to the header action through GuidedTour, so the cutout follows the real button position and size.

Copy updates for the tour steps are handled separately in #8209 (SIW-4475).

List of changes proposed in this pull request

• Add IOHeaderFirstLevel, an app-level wrapper of the design system HeaderFirstLevel that supports tourGuideProps on header actions without changing the design system.
• Attach the IT Wallet “Add document” tour step directly to the Wallet home “+” header action.
• Remove the manual useGuidedTourRegion registration (screen-size based) from useItwGuidedTour.
• Add cutoutPadding support to GuidedTour measurements so the highlighted area can cover the full tappable area of the header action.
• Add tests for the header wrapper, the Wallet home tour props, and the padded tour measurements.

How to test

Automated:

pnpm --dir apps/main-app exec jest --coverage=false ts/features/tour/utils/__tests__/measurement.test.ts ts/components/ui/__test__/IOHeaderFirstLevel.test.tsx ts/features/wallet/screens/__tests__/WalletHomeScreen.test.tsx

Manual:

• Open the Wallet home with IT Wallet active and the guided tour not completed.
• Verify the “Add document” step highlights the “+” button in the header (cutout centered on the button, not on the whole header).
• Verify tapping “+” still opens the add document flow.
• Verify the other header actions (settings, help) still render and work as before.
• Verify the remaining tour steps still work and the tour can be completed.

[github-actions]

Jira Pull Request Link

This Pull Request refers to Jira issues:

• SIW-4617

[github-actions]

PR Title Validation for conventional commit type

✅ All good! PR title follows the conventional commit type.

[codecov]

Codecov Report

❌ Patch coverage is 64.15094% with 19 lines in your changes missing coverage. Please review.
✅ Project coverage is 62.78%. Comparing base (ac5a4bc) to head (2c496db).
⚠️ Report is 2 commits behind head on master.

Files with missing lines	Patch %	Lines
...ain-app/ts/features/tour/components/GuidedTour.tsx	10.00%	9 Missing ⚠️
...s/main-app/ts/components/ui/IOHeaderFirstLevel.tsx	76.47%	1 Missing and 7 partials ⚠️
...n-app/ts/features/tour/components/TourProvider.tsx	0.00%	1 Missing ⚠️
apps/main-app/ts/hooks/useHeaderFirstLevel.tsx	75.00%	0 Missing and 1 partial ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #8248      +/-   ##
==========================================
- Coverage   62.79%   62.78%   -0.01%     
==========================================
  Files        1952     1954       +2     
  Lines       37079    37114      +35     
  Branches     6203     6217      +14     
==========================================
+ Hits        23282    23301      +19     
- Misses      12413    12419       +6     
- Partials     1384     1394      +10     

Files with missing lines	Coverage Δ
...s/features/itwallet/tour/hooks/useItwGuidedTour.ts	70.00% <ø> (-0.59%)	⬇️
...pps/main-app/ts/features/tour/utils/measurement.ts	100.00% <100.00%> (ø)
...pp/ts/features/wallet/screens/WalletHomeScreen.tsx	59.57% <100.00%> (+0.87%)	⬆️
...n-app/ts/features/tour/components/TourProvider.tsx	50.81% <0.00%> (-6.56%)	⬇️
apps/main-app/ts/hooks/useHeaderFirstLevel.tsx	80.95% <75.00%> (-9.05%)	⬇️
...s/main-app/ts/components/ui/IOHeaderFirstLevel.tsx	76.47% <76.47%> (ø)
...ain-app/ts/features/tour/components/GuidedTour.tsx	44.11% <10.00%> (-1.05%)	⬇️

... and 1 file with indirect coverage changes

---

Continue to review full report in Codecov by Harness.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update b72f7e8...2c496db. Read the comment docs.

🚀 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.

[mastro993]

We should add padding to TourCutoutStyle instead. What do you think?

[mastro993]

I have a few concerns about this change:

• We're replacing a DS component with a local implementation, which undermines the purpose of having a shared DS component.
• What if we need the same behavior for a second-level header in the future?

This implementation makes the component more rigid and increases the cost of future changes.

Could we explore alternative approaches? For example, have we considered retrieving the button's position and overlaying the cutout on top of it, rather than modifying the header component itself?