refactor: [IOPAE-1795] Use IOScrollView in Service details screen

[adelloste]

Short description

This PR updates the service details screen to use the IOScrollView component.

List of changes proposed in this pull request

• Refactored the ServiceDetailsScreen component
• Created the custom hook useServicePreferenceByChannel to retrieve the status of the preference by channel
• Modified the handling of special CTAs:
  • Removed the ServiceSpecialAction component
  • Removed the CgnServiceCTA component
  • Created the custom hook useSpecialCtaCgn to compute the primary action
  • Removed the PnServiceCta component
  • Created the custom hook useSpecialCtaPn to compute the primary action

How to test

Verify that the CTAs in the service details screen are rendered correctly:

• Ensure all CTAs are visible based on the service type
• Check that each CTA has the correct text, color, and behavior (focus on special services)

[github-actions]

Jira Pull Request Link

This Pull Request refers to Jira issues:

• IOPAE-1795

[github-actions]

PR Title Validation for conventional commit type

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

[codecov]

Codecov Report

Attention: Patch coverage is 67.87879% with 53 lines in your changes missing coverage. Please review.

Project coverage is 50.63%. Comparing base (a80ec32) to head (550d33c).
Report is 1 commits behind head on master.

Files with missing lines	Patch %	Lines
ts/features/bonus/cgn/hooks/useSpecialCtaCgn.tsx	61.53%	15 Missing ⚠️
ts/features/pn/hooks/useSpecialCtaPn.ts	67.39%	15 Missing ⚠️
ts/features/services/details/utils/index.tsx	59.09%	9 Missing ⚠️
...tails/components/ServiceDetailsScreenComponent.tsx	0.00%	8 Missing ⚠️
.../services/details/screens/ServiceDetailsScreen.tsx	25.00%	3 Missing ⚠️
...ices/details/saga/handleUpsertServicePreference.ts	0.00%	2 Missing ⚠️
.../features/services/details/store/reducers/index.ts	83.33%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #6731      +/-   ##
==========================================
+ Coverage   50.30%   50.63%   +0.32%     
==========================================
  Files        1564     1568       +4     
  Lines       32523    32510      -13     
  Branches     7355     7341      -14     
==========================================
+ Hits        16362    16461      +99     
+ Misses      16108    15996     -112     
  Partials       53       53              

Files with missing lines	Coverage Δ
...ces/details/components/CardWithMarkdownContent.tsx	31.25% <ø> (ø)
...ces/details/components/ServiceDetailsScreenCgn.tsx	100.00% <100.00%> (ø)
...details/components/ServiceDetailsScreenDefault.tsx	100.00% <100.00%> (ø)
...ices/details/components/ServiceDetailsScreenPn.tsx	100.00% <100.00%> (ø)
...res/services/details/hooks/useServicePreference.ts	100.00% <100.00%> (ø)
ts/store/reducers/backendStatus/remoteConfig.ts	62.50% <100.00%> (+1.56%)	⬆️
.../features/services/details/store/reducers/index.ts	95.58% <83.33%> (-1.19%)	⬇️
...ices/details/saga/handleUpsertServicePreference.ts	2.32% <0.00%> (ø)
.../services/details/screens/ServiceDetailsScreen.tsx	8.00% <25.00%> (+2.52%)	⬆️
...tails/components/ServiceDetailsScreenComponent.tsx	11.11% <0.00%> (-9.65%)	⬇️
... and 3 more

... and 3 files with indirect coverage changes

---

Continue to review full report in Codecov by Sentry.

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

[dmnplb]

@adelloste Does this PR also fix the issue of the CTA with a white block underneath in the dark mode version, isn't it? If so, I'd add the Dark mode label to the PR to make it clear 💪🏻

[adelloste]

@adelloste Does this PR also fix the issue of the CTA with a white block underneath in the dark mode version, isn't it? If so, I'd add the Dark mode label to the PR to make it clear 💪🏻

Yes, absolutely. Added the Dark mode label to make it clearer.

[dmnplb]

First of all, great job! In terms of the UI, it's a noticeable improvement over the previous one.

Just take a look at the pressed state of the ListItem… components. If you want to restore the previous behavior you can restore the IOStyles… style applied to the contentContainerStyle and apply includeContentMargins={false} to the IOScrollView. This last prop is essential to ensure a proper rendering.

list-item-pressed-state-services.mp4

Let me know if it's enough to fix it :)

(And again, good job!)

[adelloste]

First of all, great job! In terms of the UI, it's a noticeable improvement over the previous one.

Just take a look at the pressed state of the ListItem… components. If you want to restore the previous behavior you can restore the IOStyles… style applied to the contentContainerStyle and apply includeContentMargins={false} to the IOScrollView. This last prop is essential to ensure a proper rendering.

list-item-pressed-state-services.mp4
Let me know if it's enough to fix it :)

(And again, good job!)

Good catch! Applied 3bfd7be

[CrisTofani]

LGTM