-
Notifications
You must be signed in to change notification settings - Fork 105
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore(IT Wallet): [SIW-1536] Add skeumorphic card in MDL details scre…
…en (#6144) ## Short description This PR adds the skeumorphic card in the credential details screen. The skeumorphic card is rendered only if the credential supports it (at the time of opening this PR only the Driving License is supported). ## List of changes proposed in this pull request - Updated `io-app-design-system` to `1.46.0` - Added background as a fall back while the `ItwSkeumorphicCard` background is being loaded - Added the `ItwSkeumorphicCard` component in the details screen for credentials which sopport it ## How to test Open the details screen of your MDL credential, check that the card is rendered correctly and you can flip it. ## Preview https://github.com/user-attachments/assets/5bbce011-919c-4c90-8701-c736bbce70de --------- Co-authored-by: LazyAfternoons <[email protected]>
- Loading branch information
1 parent
eff0eab
commit 5002894
Showing
8 changed files
with
153 additions
and
51 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
99 changes: 99 additions & 0 deletions
99
ts/features/itwallet/presentation/components/ItwPresentationCredentialCard.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,99 @@ | ||
| import { | ||
| ButtonLink, | ||
| IOSpacingScale, | ||
| VStack | ||
| } from "@pagopa/io-app-design-system"; | ||
| import React from "react"; | ||
| import { StyleSheet, View } from "react-native"; | ||
| import I18n from "../../../../i18n"; | ||
| import { ItwCredentialCard } from "../../common/components/ItwCredentialCard"; | ||
| import { ItwSkeumorphicCard } from "../../common/components/ItwSkeumorphicCard"; | ||
| import { CredentialType } from "../../common/utils/itwMocksUtils"; | ||
| import { getThemeColorByCredentialType } from "../../common/utils/itwStyleUtils"; | ||
| import { StoredCredential } from "../../common/utils/itwTypesUtils"; | ||
| import { getCredentialExpireStatus } from "../../common/utils/itwClaimsUtils"; | ||
|
|
||
| type Props = { | ||
| credential: StoredCredential; | ||
| }; | ||
|
|
||
| /** | ||
| * This component renders the credential card in the presentation screen. | ||
| * If the credential supports the skeumorphic card, it also renders it with the flip button. | ||
| */ | ||
| const ItwPresentationCredentialCard = ({ credential }: Props) => { | ||
| const [isFlipped, setIsFlipped] = React.useState(false); | ||
| const themeColor = getThemeColorByCredentialType( | ||
| credential.credentialType as CredentialType | ||
| ); | ||
|
|
||
| const hasSkeumorphicCard = | ||
| credential.credentialType === CredentialType.DRIVING_LICENSE; | ||
|
|
||
| const credentialStatus = getCredentialExpireStatus( | ||
| credential.parsedCredential | ||
| ); | ||
|
|
||
| if (hasSkeumorphicCard) { | ||
| return ( | ||
| <VStack space={8}> | ||
| <Wrapper backgroundColor={themeColor}> | ||
| <ItwSkeumorphicCard credential={credential} isFlipped={isFlipped} /> | ||
| </Wrapper> | ||
| <View style={styles.flipButton}> | ||
| <ButtonLink | ||
| label={I18n.t( | ||
| "features.itWallet.presentation.credentialDetails.flipCard" | ||
| )} | ||
| onPress={() => setIsFlipped(_ => !_)} | ||
| icon="switchCard" | ||
| iconPosition="end" | ||
| /> | ||
| </View> | ||
| </VStack> | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <Wrapper backgroundColor={themeColor}> | ||
| <ItwCredentialCard | ||
| credentialType={credential.credentialType} | ||
| status={credentialStatus} | ||
| /> | ||
| </Wrapper> | ||
| ); | ||
| }; | ||
|
|
||
| type WrapperProps = { | ||
| children: React.ReactNode; | ||
| backgroundColor: string; | ||
| }; | ||
|
|
||
| const Wrapper = ({ children, backgroundColor }: WrapperProps) => ( | ||
| <View style={styles.cardContainer}> | ||
| {children} | ||
| <View style={[styles.cardBackdrop, { backgroundColor }]} /> | ||
| </View> | ||
| ); | ||
|
|
||
| const cardPaddingHorizontal: IOSpacingScale = 16; | ||
|
|
||
| const styles = StyleSheet.create({ | ||
| cardContainer: { | ||
| position: "relative", | ||
| paddingHorizontal: cardPaddingHorizontal | ||
| }, | ||
| cardBackdrop: { | ||
| height: "200%", // Twice the card in order to avoid the white background when the scrollview bounces | ||
| position: "absolute", | ||
| top: "-130%", // Offset by the card height + a 30% | ||
| right: 0, | ||
| left: 0, | ||
| zIndex: -1 | ||
| }, | ||
| flipButton: { | ||
| alignSelf: "center" | ||
| } | ||
| }); | ||
|
|
||
| export { ItwPresentationCredentialCard }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -2046,10 +2046,10 @@ | |
| dependencies: | ||
| "@types/node" ">= 8" | ||
|
|
||
| "@pagopa/io-app-design-system@1.45.0": | ||
| version "1.45.0" | ||
| resolved "https://registry.yarnpkg.com/@pagopa/io-app-design-system/-/io-app-design-system-1.45.0.tgz#a04b7d2a192ddf125726e533392fb2b12b007339" | ||
| integrity sha512-ALMCET2jktso6F87BzzJVdTN1eoFNsCaVnh5mBObiziOMHMuAhBrXumFDXSzgayNpjvroQ3OSa49ELpwFyO36w== | ||
| "@pagopa/io-app-design-system@1.46.0": | ||
| version "1.46.0" | ||
| resolved "https://registry.yarnpkg.com/@pagopa/io-app-design-system/-/io-app-design-system-1.46.0.tgz#b8605df8131f487d7325a46653588fac9a186244" | ||
| integrity sha512-z7q4/O0iyIXm6L6WrZXktzZ0kc317mRtfWwEEJwHuMaOca9Uj8YtcmRyluLtbE1OXUPcBh57ebsLs+o6JSEwoA== | ||
| dependencies: | ||
| "@pagopa/ts-commons" "^12.0.0" | ||
| "@testing-library/jest-native" "^5.4.2" | ||
|
|
@@ -16547,7 +16547,7 @@ [email protected]: | |
| commander "^2.20.3" | ||
| cssfilter "0.0.10" | ||
|
|
||
| "xstate5@npm:xstate@5": | ||
| "xstate5@npm:xstate@5", xstate@^5.13.0: | ||
| version "5.13.0" | ||
| resolved "https://registry.yarnpkg.com/xstate/-/xstate-5.13.0.tgz#7f7092d813a89d94024b083fe23a86b6cf4a323a" | ||
| integrity sha512-Z0om784N5u8sAzUvQJBa32jiTCIGGF/2ZsmKkerQEqeeUktAeOMK20FIHFUMywC4GcAkNksSvaeX7lwoRNXPEQ== | ||
|
|
@@ -16557,11 +16557,6 @@ xstate@^4.29.0, xstate@^4.33.6: | |
| resolved "https://registry.yarnpkg.com/xstate/-/xstate-4.35.4.tgz#87b2a45b6c7e84d820f56378408c6531ca5c4662" | ||
| integrity sha512-mqRBYHhljP1xIItI4xnSQNHEv6CKslSM1cOGmvhmxeoDPAZgNbhSUYAL5N6DZIxRfpYY+M+bSm3mUFHD63iuvg== | ||
|
|
||
| xstate@^5.13.0: | ||
| version "5.13.0" | ||
| resolved "https://registry.yarnpkg.com/xstate/-/xstate-5.13.0.tgz#7f7092d813a89d94024b083fe23a86b6cf4a323a" | ||
| integrity sha512-Z0om784N5u8sAzUvQJBa32jiTCIGGF/2ZsmKkerQEqeeUktAeOMK20FIHFUMywC4GcAkNksSvaeX7lwoRNXPEQ== | ||
|
|
||
| xtend@^4.0.0, xtend@~4.0.1: | ||
| version "4.0.2" | ||
| resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54" | ||
|
|
||