chore(IT Wallet): [SIW-1312] IT Wallet playgrounds refactoring (#5929)

## Short description This PR refactors the IT Wallet playgrounds ## List of changes proposed in this pull request - Moved IT Wallet playgrounds under `ts/features/itwallet/playgrounds` - Refactored `ItwPlayground` screen with a better arrangement of the elements ## How to test Navigate to **Profile > Playgrounds > IT Wallet** ## Preview https://github.com/pagopa/io-app/assets/6160324/6dca3805-f4cf-4b2a-8b99-904566ba08a1 --------- Co-authored-by: Mario Perrotta <mario.perrotta@pagopa.it>
pagopa · Jul 5, 2024 · 0d172f3 · 0d172f3
1 parent 8542d6d
commit 0d172f3
Show file tree

Hide file tree

Showing 8 changed files with 47 additions and 41 deletions.
diff --git a/ts/features/itwallet/navigation/ItwParamsList.ts b/ts/features/itwallet/navigation/ItwParamsList.ts
@@ -14,4 +14,6 @@ export type ItwParamsList = {
   [ITW_ROUTES.ISSUANCE.CREDENTIAL_PREVIEW]: undefined;
   // PRESENTATION
   [ITW_ROUTES.PRESENTATION.EID_DETAIL]: undefined;
+  // PLAYGROUNDS
+  [ITW_ROUTES.PLAYGROUNDS]: undefined;
 };
diff --git a/ts/features/itwallet/navigation/ItwStackNavigator.tsx b/ts/features/itwallet/navigation/ItwStackNavigator.tsx
@@ -10,6 +10,7 @@ import { ItwIssuanceCredentialPreviewScreen } from "../issuance/screens/ItwIssua
 import { ItwIssuanceEidPreviewScreen } from "../issuance/screens/ItwIssuanceEidPreviewScreen";
 import { ItwIssuanceEidResultScreen } from "../issuance/screens/ItwIssuanceEidResultScreen";
 import { ItwPresentationEidDetailScreen } from "../presentation/screens/ItwPresentationEidDetailScreen";
+import ItwPlayground from "../playgrounds/screens/ItwPlayground";
 import { ItwParamsList } from "./ItwParamsList";
 import { ITW_ROUTES } from "./routes";
 
@@ -64,5 +65,7 @@ export const ItwStackNavigator = () => (
       component={ItwPresentationEidDetailScreen}
       options={{ headerShown: false }}
     />
+    {/* PLAYGROUNDS */}
+    <Stack.Screen name={ITW_ROUTES.PLAYGROUNDS} component={ItwPlayground} />
   </Stack.Navigator>
 );
diff --git a/ts/features/itwallet/navigation/routes.ts b/ts/features/itwallet/navigation/routes.ts
@@ -16,5 +16,6 @@ export const ITW_ROUTES = {
   } as const,
   PRESENTATION: {
     EID_DETAIL: "ITW_PRESENTATION_EID_DETAIL"
-  } as const
+  } as const,
+  PLAYGROUNDS: "ITW_PLAYGROUNDS" as const
 };
diff --git a/...ens/profile/playgrounds/ItwPlayground.tsx → ...let/playgrounds/screens/ItwPlayground.tsx b/...ens/profile/playgrounds/ItwPlayground.tsx → ...let/playgrounds/screens/ItwPlayground.tsx
@@ -2,15 +2,16 @@ import {
   ContentWrapper,
   Divider,
   H3,
+  ListItemHeader,
   ListItemNav,
   VSpacer
 } from "@pagopa/io-app-design-system";
 import * as React from "react";
 import { ScrollView } from "react-native-gesture-handler";
-import { useHeaderSecondLevel } from "../../../hooks/useHeaderSecondLevel";
-import ItwMarkdown from "../../../features/itwallet/common/components/ItwMarkdown";
-import { useIONavigation } from "../../../navigation/params/AppParamsList";
-import { ITW_ROUTES } from "../../../features/itwallet/navigation/routes";
+import { useHeaderSecondLevel } from "../../../../hooks/useHeaderSecondLevel";
+import ItwMarkdown from "../../common/components/ItwMarkdown";
+import { useIONavigation } from "../../../../navigation/params/AppParamsList";
+import { ITW_ROUTES } from "../../navigation/routes";
 
 // Sample markdown text
 const sampleMarkdown = `
@@ -50,12 +51,6 @@ const ItwPlayground = () => {
     });
   };
 
-  const navigateToIdentification = () => {
-    navigation.navigate(ITW_ROUTES.MAIN, {
-      screen: ITW_ROUTES.IDENTIFICATION.MODE_SELECTION
-    });
-  };
-
   const navigateToCredentialDetail = () => {
     navigation.navigate(ITW_ROUTES.MAIN, {
       screen: ITW_ROUTES.PRESENTATION.EID_DETAIL
@@ -77,67 +72,75 @@ const ItwPlayground = () => {
   return (
     <ScrollView>
       <ContentWrapper>
-        {/* Discovery Playground */}
+        {/* Activation Playground */}
+        <ListItemHeader label="Activation" />
         <ListItemNav
-          value="Discovery"
+          value="Wallet activation"
           accessibilityLabel={"Discovery Playground"}
-          description="Start the discovery flow before activate IT-Wallet"
-          onPress={() => navigateToDiscovery()}
+          description="Start the eID issuing flow"
+          onPress={() => undefined}
         />
-        <Divider />
-        {/* Issuing eID Playground */}
+        <VSpacer size={16} />
+        {/* Issuing Playground */}
+        <ListItemHeader label="Credentials issuing" />
         <ListItemNav
-          value="Issuing (eID)"
-          accessibilityLabel={"Issuing (eID) Playground"}
-          description="Start the issuing flow choosing activation method to activate IT-Wallet and get your digital identity"
-          onPress={navigateToIdentification}
+          value="mDL issuing"
+          accessibilityLabel={"mDL Issuing"}
+          description="Start the issuing flow to get your mobile driving license"
+          onPress={() => undefined}
         />
         <Divider />
-        {/* Issuing mDL Playground */}
         <ListItemNav
-          value="Issuing (mDL)"
-          accessibilityLabel={"Issuing (mDL) Playground"}
-          description="Start the issuing flow to get your mobile driving license"
+          value="TS issuing"
+          accessibilityLabel={"TS Issuing"}
+          description="Start the issuing flow to get your health insurance card"
           onPress={() => undefined}
         />
         <Divider />
-        {/* Issuing TS Playground */}
         <ListItemNav
-          value="Issuing (TS)"
-          accessibilityLabel={"Issuing (TS) Playground"}
-          description="Start the issuing flow to get your health card"
+          value="DC issuing"
+          accessibilityLabel={"DC Issuing"}
+          description="Start the issuing flow to get your european disability card card"
           onPress={() => undefined}
         />
+        <VSpacer size={16} />
+        {/* Screens Playground */}
+        <ListItemHeader label="Screens" />
+        <ListItemNav
+          value="Wallet discovery screen"
+          accessibilityLabel={"Discovery screen"}
+          description="Navigate to the IT Wallet discovery screen"
+          onPress={navigateToDiscovery}
+        />
         <Divider />
-        {/* Credential Preview */}
         <ListItemNav
           value="Credential preview (mDL)"
           accessibilityLabel="Credential preview (mdl) Playground"
           description="Open the credential preview screen"
           onPress={navigateToCredentialPreview}
         />
         <Divider />
-        {/* Credential detail playground */}
         <ListItemNav
           value="Credential detail (eID)"
           accessibilityLabel={"Credential detail (eID) Playground"}
           description="Open the eID credential detail screen"
           onPress={navigateToCredentialDetail}
         />
         <Divider />
-        {/* Credential auth playground */}
         <ListItemNav
           value="Credential auth (mDL)"
           accessibilityLabel={"Credential auth (mdl) Playground"}
           description="Open the eID credential detail screen"
           onPress={navigateToCredentialAuth}
         />
-        <Divider />
-        <VSpacer />
+        <VSpacer size={16} />
+        {/* Other Playgrounds */}
+        <ListItemHeader label="Miscellaneous" />
         <H3>{"IT Wallet markdown preview"}</H3>
-        {/* Markdown ITW Playground */}
+        <VSpacer size={8} />
         <ItwMarkdown>{sampleMarkdown}</ItwMarkdown>
         {/* TODO: Add more items here */}
+        <VSpacer size={32} />
       </ContentWrapper>
     </ScrollView>
   );

diff --git a/ts/navigation/ProfileNavigator.tsx b/ts/navigation/ProfileNavigator.tsx
@@ -26,7 +26,6 @@ import ShareDataScreen from "../screens/profile/ShareDataScreen";
 import TosScreen from "../screens/profile/TosScreen";
 import { IdPayCodePlayGround } from "../screens/profile/playgrounds/IdPayCodePlayground";
 import IdPayOnboardingPlayground from "../screens/profile/playgrounds/IdPayOnboardingPlayground";
-import ItwPlayground from "../screens/profile/playgrounds/ItwPlayground";
 import MarkdownPlayground from "../screens/profile/playgrounds/MarkdownPlayground";
 import { isGestureEnabled } from "../utils/navigation";
 import TrialSystemPlayground from "../screens/profile/TrialSystemPlayground";
@@ -161,7 +160,6 @@ const ProfileStackNavigator = () => (
       name={ROUTES.PROFILE_PREFERENCES_NOTIFICATIONS}
       component={NotificationsPreferencesScreen}
     />
-    <Stack.Screen name={ROUTES.ITW_PLAYGROUND} component={ItwPlayground} />
   </Stack.Navigator>
 );
 

diff --git a/ts/navigation/params/ProfileParamsList.ts b/ts/navigation/params/ProfileParamsList.ts
@@ -31,5 +31,4 @@ export type ProfileParamsList = {
   [ROUTES.PROFILE_PREFERENCES_NOTIFICATIONS]: undefined;
   [ROUTES.IDPAY_ONBOARDING_PLAYGROUND]: undefined;
   [ROUTES.IDPAY_CODE_PLAYGROUND]: undefined;
-  [ROUTES.ITW_PLAYGROUND]: undefined;
 };
diff --git a/ts/navigation/routes.ts b/ts/navigation/routes.ts
@@ -129,7 +129,6 @@ const ROUTES = {
   IDPAY_ONBOARDING_PLAYGROUND: "IDPAY_ONBOARDING_PLAYGROUND",
   LOLLIPOP_PLAYGROUND: "LOLLIPOP_PLAYGROUND",
   IDPAY_CODE_PLAYGROUND: "IDPAY_CODE_PLAYGROUND",
-  ITW_PLAYGROUND: "ITW_PLAYGROUND",
 
   // Preferences
   INSERT_EMAIL_SCREEN: "INSERT_EMAIL_SCREEN",

diff --git a/ts/screens/profile/DeveloperModeSection.tsx b/ts/screens/profile/DeveloperModeSection.tsx
@@ -57,6 +57,7 @@ import { clipboardSetStringWithFeedback } from "../../utils/clipboard";
 import { getDeviceId } from "../../utils/device";
 import { isDevEnv } from "../../utils/environment";
 
+import { ITW_ROUTES } from "../../features/itwallet/navigation/routes";
 import DSEnableSwitch from "./components/DSEnableSwitch";
 
 type PlaygroundsNavListItem = {
@@ -413,8 +414,8 @@ const PlaygroundsSection = () => {
       condition: isItWalletTestEnabled,
       value: "IT Wallet",
       onPress: () =>
-        navigation.navigate(ROUTES.PROFILE_NAVIGATOR, {
-          screen: ROUTES.ITW_PLAYGROUND
+        navigation.navigate(ITW_ROUTES.MAIN, {
+          screen: ITW_ROUTES.PLAYGROUNDS
         })
     },
     {