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 */}