chore(IT Wallet): [SIW-1868] Add full screen skeumorphic card modal

mastro993 commented 1 week ago

Short description

This PR introduces a feature that allows users to view a credential's skeuomorphic card in full-screen mode. This mode can be activated by tapping the card on the credential details screen.

List of changes proposed in this pull request

Added useScaleAnimation hook (to be removed once this PR is merged: https://github.com/pagopa/io-app-design-system/pull/358)
Added FlipGestureDetector component, which handles swipe gestures to flip the skeumorphic cards in the credential details screen
Updated FlippableCard component in order to handle an optional orientation prop, which changes the axis type for the flip animation
Updated ItwSkeumorphicCard component in roder to handle an optional orientation prop, which rotates the card and adjust its scale to fit the screen correctly.
Refactored getCredentialStatus and itwCredentialStatusSelector:
- Extracted logic from itwCredentialStatusSelector and moved it to getCredentialStatusObject, getCredentialStatusObject can be freely used without relying to the redux store and itwCredentialStatusSelector for the memoized value
- Moved getCredentialStatus and getCredentialStatusObject to itwCredentialStatusUtils.ts file
- Added ItwPresentationCredentialCardModal in the IT Wallet navigation stack
- Updated IT Wallet playgrounds to test the new feature

How to test

Navigate to the credential details screen or the IT Wallet playground in the settings screen.
Tap on a skeuomorphic credential card to view it in full-screen mode.
Verify the following:
- The card is rendered correctly in full-screen mode.
- The screen brightness gently increases when entering full-screen mode.
- The screen brightness reverts to its original value upon exiting full-screen mode.

Preview

https://github.com/user-attachments/assets/66743a6f-ea96-4de3-a150-f88ccfa30eea

pagopa-github-bot commented 1 week ago

Affected stories

⚙️ SIW-1868: [io-app] Inserire visualizzazione credenziali scheumorfiche a tutto schermo subtask of
- 🌟 SIW-1847: Come utente voglio visualizzare la credenziale scheumorfica zoomata così da poter visualizzare meglio i campi

Generated by :no_entry_sign: dangerJS against 6da18c105dab2ccd5e97c1eb685ccd9b0b550d97

codecov[bot] commented 1 week ago

Codecov Report

Attention: Patch coverage is 32.55814% with 87 lines in your changes missing coverage. Please review.

Project coverage is 47.81%. Comparing base (4f204b4) to head (6da18c1). Report is 766 commits behind head on master.

Files with missing lines	Patch %	Lines
...let/common/components/ItwSkeumorphicCard/index.tsx	12.50%	14 Missing :warning:
ts/utils/brightness.ts	0.00%	12 Missing :warning:
...ion/screens/ItwPresentationCredentialCardModal.tsx	21.42%	11 Missing :warning:
...nds/components/ItwSkeumorphicCredentialSection.tsx	25.00%	9 Missing :warning:
.../screens/ItwPresentationCredentialDetailScreen.tsx	10.00%	9 Missing :warning:
ts/components/ui/utils/hooks/useScaleAnimation.ts	20.00%	8 Missing :warning:
.../itwallet/common/utils/itwCredentialStatusUtils.ts	75.75%	8 Missing :warning:
...ation/components/ItwPresentationCredentialCard.tsx	0.00%	7 Missing :warning:
...ponents/ItwSkeumorphicCard/FlipGestureDetector.tsx	28.57%	5 Missing :warning:
...onents/ItwPresentationCredentialCardFlipButton.tsx	60.00%	2 Missing :warning:
... and 2 more

Additional details and impacted files

[![Impacted file tree graph](https://app.codecov.io/gh/pagopa/io-app/pull/6447/graphs/tree.svg?width=650&height=150&src=pr&token=zsurlZdPFW&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=pagopa)](https://app.codecov.io/gh/pagopa/io-app/pull/6447?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=pagopa) ```diff @@ Coverage Diff @@ ## master #6447 +/- ## ========================================== - Coverage 48.42% 47.81% -0.61% ========================================== Files 1488 1626 +138 Lines 31617 32591 +974 Branches 7669 7435 -234 ========================================== + Hits 15311 15584 +273 - Misses 16238 16964 +726 + Partials 68 43 -25 ``` | [Files with missing lines](https://app.codecov.io/gh/pagopa/io-app/pull/6447?dropdown=coverage&src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=pagopa) | Coverage Δ | | |---|---|---| | [ts/features/design-system/core/DSCards.tsx](https://app.codecov.io/gh/pagopa/io-app/pull/6447?src=pr&el=tree&filepath=ts%2Ffeatures%2Fdesign-system%2Fcore%2FDSCards.tsx&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=pagopa#diff-dHMvZmVhdHVyZXMvZGVzaWduLXN5c3RlbS9jb3JlL0RTQ2FyZHMudHN4) | `53.33% <ø> (-13.34%)` | :arrow_down: | | [...on/components/ItwSkeumorphicCard/FlippableCard.tsx](https://app.codecov.io/gh/pagopa/io-app/pull/6447?src=pr&el=tree&filepath=ts%2Ffeatures%2Fitwallet%2Fcommon%2Fcomponents%2FItwSkeumorphicCard%2FFlippableCard.tsx&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=pagopa#diff-dHMvZmVhdHVyZXMvaXR3YWxsZXQvY29tbW9uL2NvbXBvbmVudHMvSXR3U2tldW1vcnBoaWNDYXJkL0ZsaXBwYWJsZUNhcmQudHN4) | `22.22% <ø> (ø)` | | | [...s/features/itwallet/common/utils/itwClaimsUtils.ts](https://app.codecov.io/gh/pagopa/io-app/pull/6447?src=pr&el=tree&filepath=ts%2Ffeatures%2Fitwallet%2Fcommon%2Futils%2FitwClaimsUtils.ts&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=pagopa#diff-dHMvZmVhdHVyZXMvaXR3YWxsZXQvY29tbW9uL3V0aWxzL2l0d0NsYWltc1V0aWxzLnRz) | `96.51% <ø> (ø)` | | | [.../credentials/saga/handleItwCredentialsStoreSaga.ts](https://app.codecov.io/gh/pagopa/io-app/pull/6447?src=pr&el=tree&filepath=ts%2Ffeatures%2Fitwallet%2Fcredentials%2Fsaga%2FhandleItwCredentialsStoreSaga.ts&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=pagopa#diff-dHMvZmVhdHVyZXMvaXR3YWxsZXQvY3JlZGVudGlhbHMvc2FnYS9oYW5kbGVJdHdDcmVkZW50aWFsc1N0b3JlU2FnYS50cw==) | `0.00% <ø> (ø)` | | | [...entials/saga/handleWalletCredentialsRehydration.ts](https://app.codecov.io/gh/pagopa/io-app/pull/6447?src=pr&el=tree&filepath=ts%2Ffeatures%2Fitwallet%2Fcredentials%2Fsaga%2FhandleWalletCredentialsRehydration.ts&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=pagopa#diff-dHMvZmVhdHVyZXMvaXR3YWxsZXQvY3JlZGVudGlhbHMvc2FnYS9oYW5kbGVXYWxsZXRDcmVkZW50aWFsc1JlaHlkcmF0aW9uLnRz) | `100.00% <ø> (ø)` | | | [...s/ItwIssuanceCredentialAsyncContinuationScreen.tsx](https://app.codecov.io/gh/pagopa/io-app/pull/6447?src=pr&el=tree&filepath=ts%2Ffeatures%2Fitwallet%2Fissuance%2Fscreens%2FItwIssuanceCredentialAsyncContinuationScreen.tsx&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=pagopa#diff-dHMvZmVhdHVyZXMvaXR3YWxsZXQvaXNzdWFuY2Uvc2NyZWVucy9JdHdJc3N1YW5jZUNyZWRlbnRpYWxBc3luY0NvbnRpbnVhdGlvblNjcmVlbi50c3g=) | `65.90% <ø> (ø)` | | | [...features/itwallet/navigation/ItwStackNavigator.tsx](https://app.codecov.io/gh/pagopa/io-app/pull/6447?src=pr&el=tree&filepath=ts%2Ffeatures%2Fitwallet%2Fnavigation%2FItwStackNavigator.tsx&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=pagopa#diff-dHMvZmVhdHVyZXMvaXR3YWxsZXQvbmF2aWdhdGlvbi9JdHdTdGFja05hdmlnYXRvci50c3g=) | `36.36% <ø> (ø)` | | | [ts/features/itwallet/navigation/routes.ts](https://app.codecov.io/gh/pagopa/io-app/pull/6447?src=pr&el=tree&filepath=ts%2Ffeatures%2Fitwallet%2Fnavigation%2Froutes.ts&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=pagopa#diff-dHMvZmVhdHVyZXMvaXR3YWxsZXQvbmF2aWdhdGlvbi9yb3V0ZXMudHM=) | `100.00% <ø> (ø)` | | | [...tation/components/ItwPresentationClaimsSection.tsx](https://app.codecov.io/gh/pagopa/io-app/pull/6447?src=pr&el=tree&filepath=ts%2Ffeatures%2Fitwallet%2Fpresentation%2Fcomponents%2FItwPresentationClaimsSection.tsx&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=pagopa#diff-dHMvZmVhdHVyZXMvaXR3YWxsZXQvcHJlc2VudGF0aW9uL2NvbXBvbmVudHMvSXR3UHJlc2VudGF0aW9uQ2xhaW1zU2VjdGlvbi50c3g=) | `94.73% <ø> (ø)` | | | [...et/trustmark/components/ItwCredentialTrustmark.tsx](https://app.codecov.io/gh/pagopa/io-app/pull/6447?src=pr&el=tree&filepath=ts%2Ffeatures%2Fitwallet%2Ftrustmark%2Fcomponents%2FItwCredentialTrustmark.tsx&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=pagopa#diff-dHMvZmVhdHVyZXMvaXR3YWxsZXQvdHJ1c3RtYXJrL2NvbXBvbmVudHMvSXR3Q3JlZGVudGlhbFRydXN0bWFyay50c3g=) | `20.96% <ø> (ø)` | | | ... and [12 more](https://app.codecov.io/gh/pagopa/io-app/pull/6447?src=pr&el=tree-more&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=pagopa) | | ... and [1666 files with indirect coverage changes](https://app.codecov.io/gh/pagopa/io-app/pull/6447/indirect-changes?src=pr&el=tree-more&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=pagopa) ------ [Continue to review full report in Codecov by Sentry](https://app.codecov.io/gh/pagopa/io-app/pull/6447?dropdown=coverage&src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=pagopa). > **Legend** - [Click here to learn more](https://docs.codecov.io/docs/codecov-delta?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=pagopa) > `Δ = absolute (impact)`, `ø = not affected`, `? = missing data` > Powered by [Codecov](https://app.codecov.io/gh/pagopa/io-app/pull/6447?dropdown=coverage&src=pr&el=footer&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=pagopa). Last update [09d9ed9...6da18c1](https://app.codecov.io/gh/pagopa/io-app/pull/6447?dropdown=coverage&src=pr&el=lastupdated&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=pagopa). Read the [comment docs](https://docs.codecov.io/docs/pull-request-comments?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=pagopa).

🚨 Try these New Features:

Flaky Tests Detection - Detect and resolve failed and flaky tests
JS Bundle Analysis - Avoid shipping oversized bundles

mastro993 commented 5 days ago

LGTM, tested on iPhone X.

Is it normal that when you exit fullscreen mode, the brightness drops instantly without a smooth effect?

Yes, this is expected behavior. Currently, this hook does not handle transitions during the unmount, as doing so can lead to visual glitches.

gispada commented 5 days ago

On Android (version 14) I see a flash when opening the skeumorphic card modal: the brightness goes up and down for a split second before reaching the final value. Setting useMaxBrightness({ useSmoothTransition: false }) seems to solve the issue. Did you notice anything similar?

mastro993 commented 4 days ago

On Android (version 14) I see a flash when opening the skeumorphic card modal: the brightness goes up and down for a split second before reaching the final value. Setting useMaxBrightness({ useSmoothTransition: false }) seems to solve the issue. Did you notice anything similar?

Some Android devices return negative values for the app brightness, which cause an initial drop in brightness. I've added a check on the minimum brightness in this commit: https://github.com/pagopa/io-app/pull/6447/commits/ee45792ee4dcbbc395add227179a2e72618e9e7d

pagopa / io-app