-
Notifications
You must be signed in to change notification settings - Fork 107
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(IT Wallet): [SIW-447] Add credentials issuing info screen (#5085)
## Short description This PR adds the info credentials screen that show to the user the credentials requested by the issuer, ## List of changes proposed in this pull request - Add Credential Issuing Info Screen - Add a new component to render a grey box with a bullet list of credentials - Add a new BS to show more info about the issuing flow NOTE: some data could be mocked ## How to test Start and activate IT-WALLET, try to add a new credential. It should be possibile to show a screen with a summary of requested credentials --------- Co-authored-by: LazyAfternoons <[email protected]>
- Loading branch information
1 parent
8e7b9a9
commit 9d6ac2a
Showing
12 changed files
with
360 additions
and
5 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| import * as React from "react"; | ||
| import { View, StyleSheet } from "react-native"; | ||
| import { Body, H6, IOColors } from "@pagopa/io-app-design-system"; | ||
| import * as RA from "fp-ts/lib/ReadonlyArray"; | ||
| import { pipe } from "fp-ts/lib/function"; | ||
|
|
||
| type Props = { | ||
| data: ReadonlyArray<BulletItem>; | ||
| }; | ||
|
|
||
| export type BulletItem = { | ||
| title: string; | ||
| data: ReadonlyArray<string>; | ||
| }; | ||
|
|
||
| const styles = StyleSheet.create({ | ||
| container: { | ||
| padding: 24, | ||
| backgroundColor: IOColors.greyUltraLight, | ||
| borderRadius: 8 | ||
| } | ||
| }); | ||
| const BULLET_ITEM = "\u2022"; | ||
|
|
||
| /** | ||
| * A component to render a list of bullet items | ||
| * @param data - the list of bullet items | ||
| */ | ||
| const ItwBulletList = ({ data }: Props) => ( | ||
| <View style={styles.container}> | ||
| {pipe( | ||
| data, | ||
| RA.mapWithIndex((index, section) => ( | ||
| <View key={`${index}-${section.title}`}> | ||
| <Body style={{ marginBottom: 8 }} weight="Regular" color="grey-700"> | ||
| {section.title} | ||
| </Body> | ||
| {section.data.map((claim, index) => ( | ||
| <View | ||
| style={{ marginBottom: 10, paddingLeft: 8 }} | ||
| key={`${index}-${claim}`} | ||
| > | ||
| <H6>{`${BULLET_ITEM} ${claim}`}</H6> | ||
| </View> | ||
| ))} | ||
| </View> | ||
| )) | ||
| )} | ||
| </View> | ||
| ); | ||
|
|
||
| export default ItwBulletList; |
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 |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| import * as React from "react"; | ||
| import { View } from "react-native"; | ||
| import { Body, H6, VSpacer } from "@pagopa/io-app-design-system"; | ||
| import { useIOBottomSheetModal } from "../../../utils/hooks/bottomSheet"; | ||
| import { IOStyles } from "../../../components/core/variables/IOStyles"; | ||
| import I18n from "../../../i18n"; | ||
|
|
||
| /** | ||
| * A hook that returns a function to present an info bottom sheet | ||
| * related to the data processing of the credentials issuing | ||
| */ | ||
| export const useItwDataProcessing = () => { | ||
| const BottomSheetBody = () => ( | ||
| <View style={IOStyles.flex}> | ||
| <H6> | ||
| {I18n.t( | ||
| "features.itWallet.issuing.credentialsIssuingInfoScreen.infoBottomSheet.body.firstHeaderTitle" | ||
| )} | ||
| </H6> | ||
| <VSpacer size={8} /> | ||
| <Body> | ||
| {I18n.t( | ||
| "features.itWallet.issuing.credentialsIssuingInfoScreen.infoBottomSheet.body.firstBodyContent" | ||
| )} | ||
| </Body> | ||
| <VSpacer size={24} /> | ||
| <H6> | ||
| {I18n.t( | ||
| "features.itWallet.issuing.credentialsIssuingInfoScreen.infoBottomSheet.body.secondHeaderTitle" | ||
| )} | ||
| </H6> | ||
| <VSpacer size={8} /> | ||
| <Body> | ||
| {I18n.t( | ||
| "features.itWallet.issuing.credentialsIssuingInfoScreen.infoBottomSheet.body.secondBodyContent" | ||
| )} | ||
| </Body> | ||
| </View> | ||
| ); | ||
| const { present, bottomSheet, dismiss } = useIOBottomSheetModal({ | ||
| title: I18n.t( | ||
| "features.itWallet.issuing.credentialsIssuingInfoScreen.infoBottomSheet.title" | ||
| ), | ||
| component: <BottomSheetBody />, | ||
| snapPoint: [350] | ||
| }); | ||
|
|
||
| return { | ||
| dismiss, | ||
| present, | ||
| bottomSheet | ||
| }; | ||
| }; |
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
169 changes: 169 additions & 0 deletions
169
ts/features/it-wallet/screens/credentials/ItwCredentialIssuingInfoScreen.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,169 @@ | ||
| import * as React from "react"; | ||
| import { View, SafeAreaView, Image, ScrollView } from "react-native"; | ||
| import { | ||
| Body, | ||
| FooterWithButtons, | ||
| H1, | ||
| HSpacer, | ||
| IOStyles, | ||
| Icon, | ||
| IconContained, | ||
| LabelLink, | ||
| VSpacer | ||
| } from "@pagopa/io-app-design-system"; | ||
| import { constVoid, pipe } from "fp-ts/lib/function"; | ||
| import * as O from "fp-ts/lib/Option"; | ||
| import { useNavigation } from "@react-navigation/native"; | ||
| import { sequenceS } from "fp-ts/lib/Apply"; | ||
| import { PidWithToken } from "@pagopa/io-react-native-wallet/lib/typescript/pid/sd-jwt"; | ||
| import interno from "../../../../../img/features/it-wallet/interno.png"; | ||
| import BaseScreenComponent from "../../../../components/screens/BaseScreenComponent"; | ||
| import { emptyContextualHelp } from "../../../../utils/emptyContextualHelp"; | ||
| import { useIOSelector } from "../../../../store/hooks"; | ||
| import { itwDecodedPidValueSelector } from "../../store/reducers/itwPidDecodeReducer"; | ||
| import ItwErrorView from "../../components/ItwErrorView"; | ||
| import { cancelButtonProps } from "../../utils/itwButtonsUtils"; | ||
| import { IOStackNavigationProp } from "../../../../navigation/params/AppParamsList"; | ||
| import { ItwParamsList } from "../../navigation/ItwParamsList"; | ||
| import ItwFooterInfoBox from "../../components/ItwFooterInfoBox"; | ||
| import I18n from "../../../../i18n"; | ||
| import ItwBulletList from "../../components/ItwBulletList"; | ||
| import { useItwDataProcessing } from "../../hooks/useItwDataProcessing"; | ||
| import { CREDENTIAL_ISSUER, CredentialCatalogItem } from "../../utils/mocks"; | ||
| import { ItwCredentialsCheckCredentialSelector } from "../../store/reducers/itwCredentialsChecksReducer"; | ||
|
|
||
| type ContentViewParams = { | ||
| decodedPid: PidWithToken; | ||
| credential: CredentialCatalogItem; | ||
| }; | ||
|
|
||
| /** | ||
| * This screen displays the information about the credential that is going to be shared | ||
| * with the issuer. | ||
| */ | ||
| const ItwCredentialIssuingInfoScreen = () => { | ||
| const decodedPid = useIOSelector(itwDecodedPidValueSelector); | ||
| const navigation = useNavigation<IOStackNavigationProp<ItwParamsList>>(); | ||
| const credential = useIOSelector(ItwCredentialsCheckCredentialSelector); | ||
| const { present, bottomSheet } = useItwDataProcessing(); | ||
|
|
||
| const ContentView = ({ decodedPid, credential }: ContentViewParams) => ( | ||
| <SafeAreaView style={IOStyles.flex}> | ||
| <ScrollView style={IOStyles.horizontalContentPadding}> | ||
| <VSpacer size={32} /> | ||
| {/* SECOND HEADER */} | ||
| <View | ||
| style={{ | ||
| flexDirection: "row", | ||
| alignContent: "center", | ||
| alignItems: "center" | ||
| }} | ||
| > | ||
| {/* LEFT */} | ||
| <View | ||
| style={{ | ||
| flexDirection: "row", | ||
| alignItems: "center" | ||
| }} | ||
| > | ||
| <IconContained | ||
| icon={"device"} | ||
| color={"neutral"} | ||
| variant={"tonal"} | ||
| /> | ||
| <HSpacer size={8} /> | ||
| <Icon name={"transactions"} color={"grey-450"} size={24} /> | ||
| <HSpacer size={8} /> | ||
| <IconContained | ||
| icon={"institution"} | ||
| color={"neutral"} | ||
| variant={"tonal"} | ||
| /> | ||
| </View> | ||
| {/* RIGHT */} | ||
| <Image | ||
| source={interno} | ||
| resizeMode={"contain"} | ||
| style={{ width: "100%", height: 32 }} | ||
| /> | ||
| </View> | ||
| <VSpacer size={24} /> | ||
| <H1> | ||
| {I18n.t( | ||
| "features.itWallet.issuing.credentialsIssuingInfoScreen.title" | ||
| )} | ||
| </H1> | ||
| <Body> | ||
| {I18n.t( | ||
| "features.itWallet.issuing.credentialsIssuingInfoScreen.subtitle", | ||
| { | ||
| authsource: | ||
| decodedPid.pid.verification.evidence[0].record.source | ||
| .organization_name, | ||
| organization: CREDENTIAL_ISSUER | ||
| } | ||
| )} | ||
| </Body> | ||
| <VSpacer size={16} /> | ||
| <LabelLink onPress={() => present()}> | ||
| {I18n.t( | ||
| "features.itWallet.issuing.credentialsIssuingInfoScreen.readMore" | ||
| )} | ||
| </LabelLink> | ||
| <VSpacer size={24} /> | ||
|
|
||
| {/* Render a list of claims that will be shared with the credential issuer */} | ||
| <ItwBulletList data={credential.requestedClaims(decodedPid)} /> | ||
|
|
||
| {/* ItwFooterInfoBox should be replaced with a more ligth component */} | ||
| <ItwFooterInfoBox | ||
| content={I18n.t("features.itWallet.activationScreen.tos")} | ||
| /> | ||
| <VSpacer size={48} /> | ||
| </ScrollView> | ||
| <FooterWithButtons | ||
| primary={{ | ||
| type: "Outline", | ||
| buttonProps: { | ||
| color: "primary", | ||
| accessibilityLabel: I18n.t("global.buttons.cancel"), | ||
| onPress: constVoid, | ||
| label: I18n.t("global.buttons.cancel") | ||
| } | ||
| }} | ||
| secondary={{ | ||
| type: "Solid", | ||
| buttonProps: { | ||
| color: "primary", | ||
| accessibilityLabel: I18n.t("global.buttons.continue"), | ||
| onPress: constVoid, | ||
| label: I18n.t("global.buttons.continue") | ||
| } | ||
| }} | ||
| type="TwoButtonsInlineHalf" | ||
| /> | ||
| </SafeAreaView> | ||
| ); | ||
|
|
||
| const DecodedPidOrErrorView = () => | ||
| pipe( | ||
| sequenceS(O.Applicative)({ decodedPid, credential }), | ||
| O.fold( | ||
| () => ( | ||
| <ItwErrorView | ||
| type="SingleButton" | ||
| leftButton={cancelButtonProps(navigation.goBack)} | ||
| /> | ||
| ), | ||
| some => <ContentView {...some} /> | ||
| ) | ||
| ); | ||
|
|
||
| return ( | ||
| <BaseScreenComponent goBack={true} contextualHelp={emptyContextualHelp}> | ||
| <DecodedPidOrErrorView /> | ||
| {bottomSheet} | ||
| </BaseScreenComponent> | ||
| ); | ||
| }; | ||
| export default ItwCredentialIssuingInfoScreen; |
Oops, something went wrong.