diff --git a/ts/features/itwallet/issuance/components/ItwCredentialPreviewScreenContent.tsx b/ts/features/itwallet/issuance/components/ItwCredentialPreviewScreenContent.tsx new file mode 100644 index 00000000000..465f1a172cc --- /dev/null +++ b/ts/features/itwallet/issuance/components/ItwCredentialPreviewScreenContent.tsx @@ -0,0 +1,100 @@ +import { IOColors, VSpacer, useIOTheme } from "@pagopa/io-app-design-system"; +import React from "react"; +import { ColorValue, StyleSheet, View } from "react-native"; +import { FooterActions } from "../../../../components/ui/FooterActions"; +import I18n from "../../../../i18n"; +import { identificationRequest } from "../../../../store/actions/identification"; +import { useIODispatch } from "../../../../store/hooks"; +import { ItwCredentialClaimsList } from "../../common/components/ItwCredentialClaimList"; +import { useItwDismissalDialog } from "../../common/hooks/useItwDismissalDialog"; +import { StoredCredential } from "../../common/utils/itwTypesUtils"; +import { ItwCredentialCard } from "../../common/components/ItwCredentialCard"; +import { CredentialType } from "../../common/utils/itwMocksUtils"; + +type Props = { + data: StoredCredential; + onStoreSuccess: () => void; +}; + +export const ItwCredentialPreviewScreenContent = ({ + data, + onStoreSuccess +}: Props) => { + const theme = useIOTheme(); + const dispatch = useIODispatch(); + const dismissDialog = useItwDismissalDialog(); + + const handleSaveToWallet = () => { + dispatch( + identificationRequest( + false, + true, + undefined, + { + label: I18n.t("global.buttons.cancel"), + onCancel: () => undefined + }, + { + onSuccess: onStoreSuccess + } + ) + ); + }; + + const backgroundColor: ColorValue = IOColors[theme["appBackground-primary"]]; + + return ( + <> + + + + + + + + + + + + ); +}; + +const styles = StyleSheet.create({ + preview: { + paddingHorizontal: 24 + }, + dropShadow: { + backgroundColor: IOColors.white, + shadowColor: IOColors.black, + shadowOffset: { width: 0, height: -4 }, + shadowRadius: 20, + shadowOpacity: 0.2, + elevation: 5 + }, + content: { + flex: 1, + paddingHorizontal: 24 + } +}); diff --git a/ts/features/itwallet/issuance/screens/ItwIssuanceCredentialPreviewScreen.tsx b/ts/features/itwallet/issuance/screens/ItwIssuanceCredentialPreviewScreen.tsx new file mode 100644 index 00000000000..4abd98e750a --- /dev/null +++ b/ts/features/itwallet/issuance/screens/ItwIssuanceCredentialPreviewScreen.tsx @@ -0,0 +1,71 @@ +import * as O from "fp-ts/lib/Option"; +import { pipe } from "fp-ts/lib/function"; +import React from "react"; +import { OperationResultScreenContent } from "../../../../components/screens/OperationResultScreenContent"; +import { IOScrollViewWithLargeHeader } from "../../../../components/ui/IOScrollViewWithLargeHeader"; +import I18n from "../../../../i18n"; +import { useIONavigation } from "../../../../navigation/params/AppParamsList"; +import { + ItWalletError, + getItwGenericMappedError +} from "../../common/utils/itwErrorsUtils"; +import { ItwCredentialsMocks } from "../../common/utils/itwMocksUtils"; +import { StoredCredential } from "../../common/utils/itwTypesUtils"; +import { ITW_ROUTES } from "../../navigation/routes"; +import { ItwCredentialPreviewScreenContent } from "../components/ItwCredentialPreviewScreenContent"; + +export const ItwIssuanceCredentialPreviewScreen = () => { + const navigation = useIONavigation(); + const credentialOption = O.some(ItwCredentialsMocks.mdl); + + const handleStoreCredentialSuccess = () => { + navigation.navigate(ITW_ROUTES.MAIN, { + screen: ITW_ROUTES.ISSUANCE.RESULT + }); + }; + + /** + * Renders the content of the screen if the credential is decoded. + * @param credential - the decoded credential + */ + const ContentView = ({ credential }: { credential: StoredCredential }) => { + React.useLayoutEffect(() => { + navigation.setOptions({ + headerShown: true + }); + }, []); + + return ( + + + + ); + }; + + /** + * Error view component which currently displays a generic error. + * @param error - optional ItWalletError to be displayed. + */ + const ErrorView = ({ error: _ }: { error?: ItWalletError }) => { + const mappedError = getItwGenericMappedError(() => navigation.goBack()); + return ; + }; + + return pipe( + credentialOption, + O.fold( + () => , + cred => + ) + ); +}; diff --git a/ts/features/itwallet/issuance/screens/ItwIssuanceEidPreviewScreen.tsx b/ts/features/itwallet/issuance/screens/ItwIssuanceEidPreviewScreen.tsx index 6115e3cce7d..b64f53547de 100644 --- a/ts/features/itwallet/issuance/screens/ItwIssuanceEidPreviewScreen.tsx +++ b/ts/features/itwallet/issuance/screens/ItwIssuanceEidPreviewScreen.tsx @@ -1,71 +1,40 @@ -import { IOColors, VSpacer, useIOTheme } from "@pagopa/io-app-design-system"; import * as O from "fp-ts/lib/Option"; import { pipe } from "fp-ts/lib/function"; import React from "react"; -import { ColorValue, StyleSheet, View } from "react-native"; import { OperationResultScreenContent } from "../../../../components/screens/OperationResultScreenContent"; -import { FooterActions } from "../../../../components/ui/FooterActions"; import { IOScrollViewWithLargeHeader } from "../../../../components/ui/IOScrollViewWithLargeHeader"; import I18n from "../../../../i18n"; import { useIONavigation } from "../../../../navigation/params/AppParamsList"; -import { identificationRequest } from "../../../../store/actions/identification"; -import { useIODispatch } from "../../../../store/hooks"; -import { ItwCredentialClaimsList } from "../../common/components/ItwCredentialClaimList"; -import { useItwDismissalDialog } from "../../common/hooks/useItwDismissalDialog"; import { ItWalletError, getItwGenericMappedError } from "../../common/utils/itwErrorsUtils"; -import { - CredentialType, - ItwCredentialsMocks -} from "../../common/utils/itwMocksUtils"; +import { ItwCredentialsMocks } from "../../common/utils/itwMocksUtils"; import { StoredCredential } from "../../common/utils/itwTypesUtils"; import { ITW_ROUTES } from "../../navigation/routes"; -import { ItwCredentialCard } from "../../common/components/ItwCredentialCard"; +import { ItwCredentialPreviewScreenContent } from "../components/ItwCredentialPreviewScreenContent"; export const ItwIssuanceEidPreviewScreen = () => { const navigation = useIONavigation(); const eidOption = O.some(ItwCredentialsMocks.eid); + const handleStoreCredentialSuccess = () => { + navigation.navigate(ITW_ROUTES.MAIN, { + screen: ITW_ROUTES.ISSUANCE.RESULT + }); + }; + /** * Renders the content of the screen if the PID is decoded. * @param eid - the decoded eID */ const ContentView = ({ eid }: { eid: StoredCredential }) => { - const theme = useIOTheme(); - const dispatch = useIODispatch(); - const dismissDialog = useItwDismissalDialog(); - - const backgroundColor: ColorValue = - IOColors[theme["appBackground-primary"]]; - React.useLayoutEffect(() => { navigation.setOptions({ headerShown: true }); }, []); - const handleSaveToWallet = () => { - dispatch( - identificationRequest( - false, - true, - undefined, - { - label: I18n.t("global.buttons.cancel"), - onCancel: () => undefined - }, - { - onSuccess: () => - navigation.navigate(ITW_ROUTES.MAIN, { - screen: ITW_ROUTES.ISSUANCE.RESULT - }) - } - ) - ); - }; - return ( { }) }} > - - - - - - - - - - ); @@ -128,21 +69,3 @@ export const ItwIssuanceEidPreviewScreen = () => { ) ); }; - -const styles = StyleSheet.create({ - preview: { - paddingHorizontal: 24 - }, - dropShadow: { - backgroundColor: IOColors.white, - shadowColor: IOColors.black, - shadowOffset: { width: 0, height: -4 }, - shadowRadius: 20, - shadowOpacity: 0.2, - elevation: 5 - }, - content: { - flex: 1, - paddingHorizontal: 24 - } -}); diff --git a/ts/features/itwallet/navigation/ItwParamsList.ts b/ts/features/itwallet/navigation/ItwParamsList.ts index 4a5dc60565f..e6af6e17188 100644 --- a/ts/features/itwallet/navigation/ItwParamsList.ts +++ b/ts/features/itwallet/navigation/ItwParamsList.ts @@ -9,5 +9,6 @@ export type ItwParamsList = { [ITW_ROUTES.IDENTIFICATION.IDP_SELECTION]: undefined; // ISSUANCE [ITW_ROUTES.ISSUANCE.EID_PREVIEW]: undefined; + [ITW_ROUTES.ISSUANCE.CREDENTIAL_PREVIEW]: undefined; [ITW_ROUTES.ISSUANCE.RESULT]: undefined; }; diff --git a/ts/features/itwallet/navigation/ItwStackNavigator.tsx b/ts/features/itwallet/navigation/ItwStackNavigator.tsx index a36ca6ab21d..81885307416 100644 --- a/ts/features/itwallet/navigation/ItwStackNavigator.tsx +++ b/ts/features/itwallet/navigation/ItwStackNavigator.tsx @@ -5,6 +5,7 @@ import { ItwDiscoveryInfoScreen } from "../discovery/screens/ItwDiscoveryInfoScr import { ItwIdentificationIdpSelectionScreen } from "../identification/screens/ItwIdentificationIdpSelectionScreen"; import { ItwIdentificationModeSelectionScreen } from "../identification/screens/ItwIdentificationModeSelectionScreen"; import { ItwIdentificationNfcInstructionsScreen } from "../identification/screens/ItwIdentificationNfcInstructionsScreen"; +import { ItwIssuanceCredentialPreviewScreen } from "../issuance/screens/ItwIssuanceCredentialPreviewScreen"; import { ItwIssuanceEidPreviewScreen } from "../issuance/screens/ItwIssuanceEidPreviewScreen"; import { ItwIssuanceEidResultScreen } from "../issuance/screens/ItwIssuanceEidResultScreen"; import { ItwParamsList } from "./ItwParamsList"; @@ -41,6 +42,11 @@ export const ItwStackNavigator = () => ( component={ItwIssuanceEidPreviewScreen} options={{ headerShown: false }} /> + { }); }; + const navigateToCredentialPreview = () => { + navigation.navigate(ITW_ROUTES.MAIN, { + screen: ITW_ROUTES.ISSUANCE.CREDENTIAL_PREVIEW + }); + }; + return ( @@ -91,6 +97,14 @@ const ItwPlayground = () => { onPress={() => undefined} /> + {/* Credential Preview */} + +

{"IT Wallet markdown preview"}

{/* Markdown ITW Playground */}