feat: [#174575010] Add showroom listitem

locales/en/index.yml

@@ -244,6 +244,7 @@ profile:
     appVersion: App Version
     backendVersion: Backend Version
     debugMode: Debug mode
+    showroom: Showroom
   preferences:
     title: Preferences
     subtitle: This settings will be used by all services of the Public Amministration.

locales/it/index.yml

@@ -244,6 +244,7 @@ profile:
     appVersion: Versione App
     backendVersion: Versione Backend
     debugMode: Modalità debug
+    showroom: Showroom
   preferences:
     title: Preferenze
     subtitle:

ts/navigation/MainNavigator.tsx

@@ -94,6 +94,7 @@ const NoTabBarRoutes: ReadonlyArray<string> = [
   WALLET_ONBOARDING_BANCOMAT_ROUTES.MAIN,
   ROUTES.MARKDOWN_PLAYGROUND,
   ROUTES.WEB_PLAYGROUND,
+  ROUTES.SHOWROOM,
   ROUTES.SERVICE_WEBVIEW
 ];
 

ts/navigation/ProfileNavigator.ts

@@ -13,6 +13,7 @@ import PrivacyMainScreen from "../screens/profile/PrivacyMainScreen";
 import ProfileMainScreen from "../screens/profile/ProfileMainScreen";
 import MarkdownPlayground from "../screens/profile/playgrounds/MarkdownPlayground";
 import WebPlayground from "../screens/profile/WebPlayground";
+import { Showroom } from "../screens/showroom/Showroom";
 import ROUTES from "./routes";
 
 /**
@@ -59,6 +60,9 @@ const ProfileNavigator = createStackNavigator(
     [ROUTES.MARKDOWN_PLAYGROUND]: {
       screen: MarkdownPlayground
     },
+    [ROUTES.SHOWROOM]: {
+      screen: Showroom
+    },
     [ROUTES.WEB_PLAYGROUND]: {
       screen: WebPlayground
     }

ts/navigation/routes.ts

@@ -91,6 +91,7 @@ const ROUTES = {
   MARKDOWN_PLAYGROUND: "MARKDOWN_PLAYGROUND",
 
   // Developer Mode
+  SHOWROOM: "SHOWROOM",
   WEB_PLAYGROUND: "WEB_PLAYGROUND",
 
   // Preferences

ts/screens/profile/ProfileMainScreen.tsx

@@ -418,6 +418,12 @@ class ProfileMainScreen extends React.PureComponent<Props, State> {
                   />
                 </>
               )}
+              {/* Showroom */}
+              <ListItemComponent
+                title={I18n.t("profile.main.showroom")}
+                onPress={() => navigation.navigate(ROUTES.SHOWROOM)}
+                isFirstItem={true}
+              />
               {this.developerListItem(
                 I18n.t("profile.main.pagoPaEnvironment.pagoPaEnv"),
                 this.props.isPagoPATestEnabled,

ts/screens/showroom/Showroom.tsx

@@ -3,6 +3,8 @@ import * as React from "react";
 import { useEffect } from "react";
 import { SafeAreaView, ScrollView, StyleSheet } from "react-native";
 import { IOStyles } from "../../components/core/variables/IOStyles";
+import BaseScreenComponent from "../../components/screens/BaseScreenComponent";
+import I18n from "../../i18n";
 import { ColorsShowroom } from "./core/ColorsShowroom";
 import { SelectionShowroom } from "./core/SelectionShowroom";
 import { TypographyShowroom } from "./core/TypographyShowRoom";
@@ -34,17 +36,22 @@ export const Showroom = () => {
   }, []);
 
   return (
-    <SafeAreaView style={styles.body}>
-      <ScrollView>
-        <View style={IOStyles.horizontalContentPadding}>
-          <ColorsShowroom />
-          <View spacer={true} extralarge={true} />
-          <TypographyShowroom />
-          <SelectionShowroom />
-          <View spacer={true} extralarge={true} />
-          <OthersShowroom />
-        </View>
-      </ScrollView>
-    </SafeAreaView>
+    <BaseScreenComponent
+      goBack={true}
+      headerTitle={I18n.t("profile.main.showroom")}
+    >
+      <SafeAreaView style={styles.body}>
+        <ScrollView>
+          <View style={IOStyles.horizontalContentPadding}>
+            <ColorsShowroom />
+            <View spacer={true} extralarge={true} />
+            <TypographyShowroom />
+            <SelectionShowroom />
+            <View spacer={true} extralarge={true} />
+            <OthersShowroom />
+          </View>
+        </ScrollView>
+      </SafeAreaView>
+    </BaseScreenComponent>
   );
 };