From 79682fbb97aded03e4dfedb306bb65ad34a0e2d7 Mon Sep 17 00:00:00 2001 From: Mario Perrotta Date: Fri, 10 Nov 2023 20:55:40 +0100 Subject: [PATCH 1/4] chore: add credential details screen --- .../it-wallet/navigation/ItwParamsList.ts | 3 + ts/features/it-wallet/navigation/ItwRoutes.ts | 1 + .../navigation/ItwStackNavigator.tsx | 6 ++ .../it-wallet/screens/ItwHomeScreen.tsx | 8 ++ .../credential/ItwCredentialDetailsScreen.tsx | 101 ++++++++++++++++++ 5 files changed, 119 insertions(+) create mode 100644 ts/features/it-wallet/screens/credential/ItwCredentialDetailsScreen.tsx diff --git a/ts/features/it-wallet/navigation/ItwParamsList.ts b/ts/features/it-wallet/navigation/ItwParamsList.ts index 00e8790f6db..47a11d65b51 100644 --- a/ts/features/it-wallet/navigation/ItwParamsList.ts +++ b/ts/features/it-wallet/navigation/ItwParamsList.ts @@ -1,3 +1,4 @@ +import { ItwCredentialDetailsScreenNavigationParams } from "../screens/credential/ItwCredentialDetailsScreen"; import { ItwPidRequestScreenNavigationParams } from "../screens/issuing/ItwPidRequestScreen"; import { ItwCieCardReaderScreenNavigationParams } from "../screens/issuing/cie/ItwCieCardReaderScreen"; import { ItwCieConsentDataUsageScreenNavigationParams } from "../screens/issuing/cie/ItwCieConsentDataUsageScreen"; @@ -39,6 +40,8 @@ export type ItwParamsList = { [ITW_ROUTES.CREDENTIAL.ISSUING.CHECKS]: undefined; [ITW_ROUTES.CREDENTIAL.ISSUING.AUTH]: undefined; [ITW_ROUTES.CREDENTIAL.ISSUING.PREVIEW]: undefined; + [ITW_ROUTES.PRESENTATION + .CREDENTIAL_DETAILS]: ItwCredentialDetailsScreenNavigationParams; // GENERIC [ITW_ROUTES.GENERIC.NOT_AVAILABLE]: undefined; }; diff --git a/ts/features/it-wallet/navigation/ItwRoutes.ts b/ts/features/it-wallet/navigation/ItwRoutes.ts index c4eb4bccf24..2bac41fdc1b 100644 --- a/ts/features/it-wallet/navigation/ItwRoutes.ts +++ b/ts/features/it-wallet/navigation/ItwRoutes.ts @@ -20,6 +20,7 @@ export const ITW_ROUTES = { } as const, PRESENTATION: { PID_DETAILS: "ITW_PRESENTATION_PID_DETAILS", + CREDENTIAL_DETAILS: "ITW_CREDENTIAL_DETAILS", CROSS_DEVICE: { CHECKS: "ITW_PRESENTATION_CROSS_DEVICE_CHECKS", DATA: "ITW_PRESENTATION_CROSS_DEVICE_DATA", diff --git a/ts/features/it-wallet/navigation/ItwStackNavigator.tsx b/ts/features/it-wallet/navigation/ItwStackNavigator.tsx index 11d6fb508a9..18e3ea0adbb 100644 --- a/ts/features/it-wallet/navigation/ItwStackNavigator.tsx +++ b/ts/features/it-wallet/navigation/ItwStackNavigator.tsx @@ -23,6 +23,7 @@ import ItwPresentationDataScreen from "../screens/presentation/crossdevice/new/I import ItwPresentationResultScreen from "../screens/presentation/crossdevice/new/ItwPresentationResultScreen"; import ItwCredentialsChecksScreen from "../screens/credential/issuing/ItwCredentialChecksScreen"; import ItwCredentialCatalogScreen from "../screens/credential/issuing/ItwCredentialsCatalogScreen"; +import ItwCredentialDetailsScreen from "../screens/credential/ItwCredentialDetailsScreen"; import { ItwParamsList } from "./ItwParamsList"; import { ITW_ROUTES } from "./ItwRoutes"; @@ -85,6 +86,11 @@ export const ItwStackNavigator = () => ( name={ITW_ROUTES.PRESENTATION.PID_DETAILS} component={ItwCredentialDetails} /> + {/* PRESENTATION CREDENTIAL DETAILS */} + {/* PRESENTATION CROSS DEVICE */} { .map((credential, idx) => ( + navigation.navigate(ITW_ROUTES.MAIN, { + screen: ITW_ROUTES.PRESENTATION.CREDENTIAL_DETAILS, + params: { + credential + } + }) + } key={`${credential.displayData.title}-${idx}`} > ; + +/** + * Renders a preview screen which displays a visual representation and the claims contained in the credential. + */ +const ItwCredentialDetailsScreen = () => { + const route = useRoute(); + const { credential } = route.params; + const bannerViewRef = React.createRef(); + + /** + * Content view which asks the user to confirm the issuance of the credential. + * @param data - the issuance result data of the credential used to display the credential. + */ + const ContentView = ({ data }: { data: StoredCredential }) => { + const presentationButton: BlockButtonProps = { + type: "Solid", + buttonProps: { + label: I18n.t( + "features.itWallet.presentation.credentialDetails.buttons.qrCode" + ), + accessibilityLabel: I18n.t( + "features.itWallet.presentation.credentialDetails.buttons.qrCode" + ), + onPress: () => null + } + }; + + return ( + + + + + + + + + + + + + + ); + }; + + return ; +}; + +export default ItwCredentialDetailsScreen; From d2935e73c7cb8ec049c3fcc925d00d786285ca42 Mon Sep 17 00:00:00 2001 From: Mario Perrotta Date: Sun, 12 Nov 2023 10:51:32 +0100 Subject: [PATCH 2/4] chore: credential presentation route --- ts/features/it-wallet/navigation/ItwParamsList.ts | 3 ++- ts/features/it-wallet/navigation/ItwRoutes.ts | 4 +++- ts/features/it-wallet/navigation/ItwStackNavigator.tsx | 10 +++++----- .../screens/credential/ItwCredentialDetailsScreen.tsx | 2 +- 4 files changed, 11 insertions(+), 8 deletions(-) diff --git a/ts/features/it-wallet/navigation/ItwParamsList.ts b/ts/features/it-wallet/navigation/ItwParamsList.ts index 47a11d65b51..e2a2b0ba73d 100644 --- a/ts/features/it-wallet/navigation/ItwParamsList.ts +++ b/ts/features/it-wallet/navigation/ItwParamsList.ts @@ -40,7 +40,8 @@ export type ItwParamsList = { [ITW_ROUTES.CREDENTIAL.ISSUING.CHECKS]: undefined; [ITW_ROUTES.CREDENTIAL.ISSUING.AUTH]: undefined; [ITW_ROUTES.CREDENTIAL.ISSUING.PREVIEW]: undefined; - [ITW_ROUTES.PRESENTATION + // CREDENTIALS PRESENTATION + [ITW_ROUTES.CREDENTIAL.PRESENTATION .CREDENTIAL_DETAILS]: ItwCredentialDetailsScreenNavigationParams; // GENERIC [ITW_ROUTES.GENERIC.NOT_AVAILABLE]: undefined; diff --git a/ts/features/it-wallet/navigation/ItwRoutes.ts b/ts/features/it-wallet/navigation/ItwRoutes.ts index 2bac41fdc1b..13245b04db3 100644 --- a/ts/features/it-wallet/navigation/ItwRoutes.ts +++ b/ts/features/it-wallet/navigation/ItwRoutes.ts @@ -20,7 +20,6 @@ export const ITW_ROUTES = { } as const, PRESENTATION: { PID_DETAILS: "ITW_PRESENTATION_PID_DETAILS", - CREDENTIAL_DETAILS: "ITW_CREDENTIAL_DETAILS", CROSS_DEVICE: { CHECKS: "ITW_PRESENTATION_CROSS_DEVICE_CHECKS", DATA: "ITW_PRESENTATION_CROSS_DEVICE_DATA", @@ -35,6 +34,9 @@ export const ITW_ROUTES = { CHECKS: "ITW_CREDENTIAL_ISSUING_CHECKS", AUTH: "ITW_CREDENTIAL_ISSUING_AUTH", PREVIEW: "ITW_CREDENTIAL_ISSUING_PREVIEW" + } as const, + PRESENTATION: { + CREDENTIAL_DETAILS: "ITW_CREDENTIAL_PRESENTATION_DETAILS" } as const } as const, GENERIC: { diff --git a/ts/features/it-wallet/navigation/ItwStackNavigator.tsx b/ts/features/it-wallet/navigation/ItwStackNavigator.tsx index 18e3ea0adbb..694899a2cdb 100644 --- a/ts/features/it-wallet/navigation/ItwStackNavigator.tsx +++ b/ts/features/it-wallet/navigation/ItwStackNavigator.tsx @@ -86,11 +86,6 @@ export const ItwStackNavigator = () => ( name={ITW_ROUTES.PRESENTATION.PID_DETAILS} component={ItwCredentialDetails} /> - {/* PRESENTATION CREDENTIAL DETAILS */} - {/* PRESENTATION CROSS DEVICE */} ( name={ITW_ROUTES.CREDENTIAL.ISSUING.PREVIEW} component={ItwCredentialPreviewScreen} /> + {/* CREDENTIAL PRESENTATION */} + {/* COMMON */} ; /** From 6d70ba315b9dcf174f7d8604fb35c7a731d2bd2a Mon Sep 17 00:00:00 2001 From: Mario Perrotta Date: Sun, 12 Nov 2023 10:53:26 +0100 Subject: [PATCH 3/4] fix: route path --- ts/features/it-wallet/screens/ItwHomeScreen.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ts/features/it-wallet/screens/ItwHomeScreen.tsx b/ts/features/it-wallet/screens/ItwHomeScreen.tsx index fccc4d4c98f..98f6b038200 100644 --- a/ts/features/it-wallet/screens/ItwHomeScreen.tsx +++ b/ts/features/it-wallet/screens/ItwHomeScreen.tsx @@ -110,7 +110,7 @@ const ItwHomeScreen = () => { onLongPress={onLongPressCredential} onPress={() => navigation.navigate(ITW_ROUTES.MAIN, { - screen: ITW_ROUTES.PRESENTATION.CREDENTIAL_DETAILS, + screen: ITW_ROUTES.CREDENTIAL.PRESENTATION.CREDENTIAL_DETAILS, params: { credential } From 10660f82907e339929abae45903cf7e8f9f89797 Mon Sep 17 00:00:00 2001 From: Mario Perrotta Date: Sun, 12 Nov 2023 11:04:43 +0100 Subject: [PATCH 4/4] chore: update bottom banner title --- locales/en/index.yml | 8 ++++---- locales/it/index.yml | 7 +++---- .../screens/credential/ItwCredentialDetailsScreen.tsx | 9 +++------ .../credential/issuing/ItwCredentialPreviewScreen.tsx | 6 +++--- 4 files changed, 13 insertions(+), 17 deletions(-) diff --git a/locales/en/index.yml b/locales/en/index.yml index 6e442b71645..5c1ac6f91fe 100644 --- a/locales/en/index.yml +++ b/locales/en/index.yml @@ -3444,10 +3444,10 @@ features: credentialPreviewScreen: title: "Here's a preview of your credential" subtitle: "Before adding it, check if the data is correct." - somethingWrong: - title: "Something wrong?" - subtitle: "If there are errors in the data or you want to better understand what they mean, contact {{issuer}}." - action: "Ask for help" + banner: + title: "Something doesn't add up?" + content: "If you want to delve deeper into some data or report errors, contact support." + actionTitle: "Contact support" bottomSheet: about: title: "Who is it?" diff --git a/locales/it/index.yml b/locales/it/index.yml index 70b90f24837..29d68f3b0b4 100644 --- a/locales/it/index.yml +++ b/locales/it/index.yml @@ -3469,11 +3469,10 @@ features: title: "Ecco un’anteprima della tua tessera" subtitle: "Prima di aggiungerla, verifica che tutte le informazioni siano corrette." - somethingWrong: + banner: title: "Qualcosa non torna?" - subtitle: "Se ci sono errori nei dati o vuoi capire meglio cosa significano, - contatta {{issuer}}." - action: "Contatta l'assistenza" + content: "Se ci sono errori nei dati o vuoi capire meglio cosa significano, contatta l’assistenza." + actionTitle: "Contatta l'assistenza" bottomSheet: about: title: "Chi è?" diff --git a/ts/features/it-wallet/screens/credential/ItwCredentialDetailsScreen.tsx b/ts/features/it-wallet/screens/credential/ItwCredentialDetailsScreen.tsx index 6309bebe0b4..d98c3879c35 100644 --- a/ts/features/it-wallet/screens/credential/ItwCredentialDetailsScreen.tsx +++ b/ts/features/it-wallet/screens/credential/ItwCredentialDetailsScreen.tsx @@ -70,17 +70,14 @@ const ItwCredentialDetailsScreen = () => { color={"neutral"} size="big" title={I18n.t( - "features.itWallet.issuing.credentialPreviewScreen.somethingWrong.title" + "features.itWallet.issuing.credentialPreviewScreen.banner.title" )} content={I18n.t( - "features.itWallet.issuing.credentialPreviewScreen.somethingWrong.subtitle", - { - issuer: credential.parsedCredential - } + "features.itWallet.issuing.credentialPreviewScreen.banner.content" )} pictogramName={"security"} action={I18n.t( - "features.itWallet.issuing.credentialPreviewScreen.somethingWrong.action" + "features.itWallet.issuing.credentialPreviewScreen.banner.actionTitle" )} onPress={constNull} /> diff --git a/ts/features/it-wallet/screens/credential/issuing/ItwCredentialPreviewScreen.tsx b/ts/features/it-wallet/screens/credential/issuing/ItwCredentialPreviewScreen.tsx index 6a699847877..0ced1390efc 100644 --- a/ts/features/it-wallet/screens/credential/issuing/ItwCredentialPreviewScreen.tsx +++ b/ts/features/it-wallet/screens/credential/issuing/ItwCredentialPreviewScreen.tsx @@ -152,17 +152,17 @@ const ItwCredentialPreviewScreen = () => { color={"neutral"} size="big" title={I18n.t( - "features.itWallet.issuing.credentialPreviewScreen.somethingWrong.title" + "features.itWallet.issuing.credentialPreviewScreen.banner.title" )} content={I18n.t( - "features.itWallet.issuing.credentialPreviewScreen.somethingWrong.subtitle", + "features.itWallet.issuing.credentialPreviewScreen.banner.content", { issuer: data.issuerName } )} pictogramName={"security"} action={I18n.t( - "features.itWallet.issuing.credentialPreviewScreen.somethingWrong.action" + "features.itWallet.issuing.credentialPreviewScreen.banner.actionTitle" )} onPress={present} />