feat: [IOPID-1507,IOPID-1533] Integrate new DS in Pin Screen flow

[ChrisMattew]

Short description

Integrated new DS in PinScreen component

List of changes proposed in this pull request

• Integration of new DS in Pin Screen section
• Replaced the Alert message which forced the user to restart the application after pin change operation in Profile section with a non-blocking toast message**

Note

** The need to restart the application after the pin was changed comes from this PR to make it immediately available in app. Today this behavior is not necessary anymore because the pin is now retrieved directly from react-native-keychain when needed.

Test

E2E

Tip

Screens

iOS

Onboarding pin creation	Profile pin change
iOS-onboarding-pin-screen.mov	iOS-profile-pin-screen.mov

Pin error validation	Pin error match
iOS-pin-screen-validation-error.mov	iOS-pin-screen-confirmation-error.mov

Android

Onboarding pin creation	Profile pin change
android-onboarding-pin-screen.mp4	android-profile-pin-screen.mp4

Pin error validation	Pin error match
android-pin-screen-validation-error.mp4	android-pin-screen-confirmation-error.mp4

Accessibility iOS & Android

iOS Onboarding	Android Onboarding
iOS.a11y.-onboardin-pin-screen.mov	android-a11y-onboarding-pin-screen.mp4

iOS Profile	Android Profile
iOS.a11y.-profile-pin-screen.mov	android-a11y-profile-pin-screen.mp4

iOS validation error	Android validation error
iOS.a11y.-pin-screen-validation-error.mov	android-a11y-pin-screen-validation-error.mp4

iOS confirmation error	Android confirmation error
iOS.a11y.-pin-screen-confirmation-error.mov	android-a11y-pin-screen-confirmation-error.mp4

How to test

Since this component is used in two sections of the app - Onboarding and Profile flows - there are two different ways in which it can be tested.

Profile section

This is the easiest way in which it can be tested:

• In a logged-in context navigate to Profile > Security > Change the unlock code
• Insert the old pin, when requested, to enable the pin change flow

Onboarding section

Testing in local environment - clone io-dev-api-server repo if you haven't did it yet and follow the instructions - go in config/config.json and in profile.attrs add a fiscal code under fiscal_code key (must be 16 characters long), restart you backend and then restart the application to login again and display the onboarding flow with the new Pin Screen.

 {
   "profile": {
     "attrs": {
       "name": "Gian Maria",
       "fiscal_code": "AAAAAA00A00A000B"
     }
   }
}

Tip

To try multiple times repeat the process changing at least one fiscal_code character

[pagopa-github-bot]

	Warnings
⚠️	Multiple stories with different types are associated with this Pull request. Only one tag will be added, following the order: feature > bug > chore

Affected stories

• 🌟 IOPID-1507: [DS-Onboarding][APP] Pin Screen
  subtask of
  • ⚡ IOPID-1498: DS - Schermate Onboarding/First Onboarding (16)
• 🌟 IOPID-1533: [DS-Profile] ⚠️ Sicurezza - Modifica codice sblocco
  subtask of
  • ⚡ IOPID-1516: DS - Sezione Profilo (20)

Generated by 🚫 dangerJS against 224ba62

[codecov]

Codecov Report

Attention: Patch coverage is 66.91729% with 44 lines in your changes missing coverage. Please review.

Project coverage is 49.62%. Comparing base (4f204b4) to head (224ba62).
Report is 123 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #5737      +/-   ##
==========================================
+ Coverage   48.42%   49.62%   +1.19%     
==========================================
  Files        1488     1653     +165     
  Lines       31617    32916    +1299     
  Branches     7669     8009     +340     
==========================================
+ Hits        15311    16333    +1022     
- Misses      16238    16521     +283     
+ Partials       68       62       -6     

Files	Coverage Δ
...components/screens/PinCreation/PinCarouselItem.tsx	100.00% <100.00%> (ø)
...creens/PinCreation/usePinValidationBottomSheet.tsx	100.00% <100.00%> (ø)
ts/navigation/OnboardingNavigator.tsx	66.66% <ø> (ø)
ts/navigation/ProfileNavigator.tsx	66.66% <ø> (+26.66%)	⬆️
ts/sagas/startup/checkConfiguredPinSaga.ts	0.00% <ø> (ø)
ts/screens/onboarding/OnboardingPinScreen.tsx	50.00% <50.00%> (ø)
ts/screens/profile/PinScreen.tsx	50.00% <50.00%> (ø)
ts/components/BulletList.tsx	81.81% <81.81%> (ø)
ts/components/Carousel.tsx	88.23% <88.23%> (ø)
ts/utils/hooks/useOnboardingAbortAlert.ts	57.14% <33.33%> (+42.85%)	⬆️
... and 2 more

... and 613 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 5d017f9...224ba62. Read the comment docs.

[ChrisMattew]

@mariateresaventura copy review needed 🙏🏼

[shadowsheep1]

Let me know if with my code suggestions do you like it more:

Before

🤖	🍏

After

🤖	🍏

[shadowsheep1]

LGTM 🚀