Feat/stack plus

app/src/localization/en/index.ts

@@ -167,6 +167,20 @@ const translation = {
     ButtonTitle: 'Receive my attestation',
     ButtonHome: 'Return to home page',
   },
+  OptionsPlus: {
+    PageTitle: 'More options',
+    ButtonParamsApp: 'Application Settings',
+    ButtonHelpCenter: 'Help Center',
+    ButtonAbout: 'About',
+    TitleSupport: 'Customer Support',
+    DetailSupport: 'You have a problem with the application or questions, you can contact the team.',
+    JoinUsTitle: 'Contact Us',
+    DaysOpen: 'Monday to Friday',
+    OpeningHours: 'From 8 a.m. to 6 p.m.',
+    PhoneNumber: '1 877 644-4545',
+    TollFreeNumber: '1 800 361-9596 (ATS number for the hearing impaired)',
+    Copyright: '@ Government of Quebec',
+  },
   Screens: {
     Splash: 'Splash',
     Onboarding: 'Introduction',
@@ -176,6 +190,7 @@ const translation = {
     EnterPin: 'Enter Pin',
     Home: 'Home',
     Scan: 'Scan',
+    OptionsPlus: 'More Options',
     Credentials: 'Credentials',
     CredentialDetails: 'Credential Details',
     Notifications: 'Notifications',
@@ -688,7 +703,7 @@ const translation = {
     Home: 'Home',
     Activities: 'Activities',
     Credentials: 'Credentials',
-    More: 'More',
+    OptionsPlus: 'More Options',
   },
   RootStack: {
     Contacts: 'Contacts',

app/src/localization/fr/index.ts

@@ -238,6 +238,20 @@ const translation = {
     ButtonTitle: 'Recevoir mon attestation',
     ButtonHome: 'Revenir à l’accueil',
   },
+  OptionsPlus: {
+    PageTitle: "Plus d'option",
+    ButtonParamsApp: "Paramètres de l'application",
+    ButtonHelpCenter: "Centre d'aide",
+    ButtonAbout: 'À propos',
+    TitleSupport: 'Soutien à la clientèle',
+    DetailSupport: "Vous avez un problème avec l'application ou des questions, vous pouvez joundre l'équipe.",
+    JoinUsTitle: 'Nous Joindre',
+    DaysOpen: 'Du lundi au vendredi',
+    OpeningHours: 'De 8h à 18h',
+    PhoneNumber: '1 877 644-4545',
+    TollFreeNumber: '1 800 361-9596 (numéro ATS pour malentendants)',
+    Copyright: '@ Gouvernement du Québec',
+  },
   StatusMessages: {
     InitAgent: "Initialisation de l'agent ...",
   },
@@ -647,7 +661,7 @@ const translation = {
     Home: 'Accueil',
     Activities: 'Activités',
     Credentials: 'Attestations',
-    More: 'Plus',
+    OptionsPlus: "Plus d'options",
   },
   RootStack: {
     Contacts: 'Contacts',
@@ -698,6 +712,7 @@ const translation = {
     Home: 'Accueil',
     Scan: 'Lire un code QR',
     Credentials: 'Attestations',
+    OptionsPlus: "Plus d'options",
     CredentialDetails: 'Détails des attestations',
     Notifications: 'Notifications',
     CredentialOffer: "Proposition d'attestation",

app/src/navigators/PlusStack.tsx

@@ -0,0 +1,30 @@
+import { useTheme } from '@hyperledger/aries-bifold-core'
+import { useDefaultStackOptions } from '@hyperledger/aries-bifold-core/App/navigators/defaultStackOptions'
+import { createStackNavigator } from '@react-navigation/stack'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+
+import Plus from '../screens/Plus'
+
+import { Screens, OptionsPlusStackParams } from './navigators'
+
+const PlusStack: React.FC = () => {
+  const StackPlus = createStackNavigator<OptionsPlusStackParams>()
+  const theme = useTheme()
+  const defaultStackOptions = useDefaultStackOptions(theme)
+  const { t } = useTranslation()
+
+  return (
+    <StackPlus.Navigator initialRouteName={Screens.OptionsPlus} screenOptions={{ ...defaultStackOptions }}>
+      <StackPlus.Screen
+        name={Screens.OptionsPlus}
+        component={Plus}
+        options={{
+          title: t('TabStack.OptionsPlus'),
+        }}
+      />
+    </StackPlus.Navigator>
+  )
+}
+
+export default PlusStack

app/src/navigators/TabStack.tsx

@@ -20,6 +20,7 @@ import HomeTabIcon from '../assets/img/icons/home.svg'
 import NotificationTabIcon from '../assets/img/icons/notification.svg'
 import PlusTabIcon from '../assets/img/icons/plus.svg'
 
+import PlusStack from './PlusStack'
 import { TabStackParams, TabStacks } from './navigators'
 
 const TabStack: React.FC = () => {
@@ -58,7 +59,7 @@ const TabStack: React.FC = () => {
       label: t('TabStack.Credentials'),
       icon: AtestationTabIcon,
     },
-    { name: TabStacks.MoreStack, component: CredentialStack, label: t('TabStack.More'), icon: PlusTabIcon },
+    { name: TabStacks.OptionsPlusStack, component: PlusStack, label: t('TabStack.OptionsPlus'), icon: PlusTabIcon },
   ]
 
   const TabBarIcon = (props: {

app/src/navigators/navigators.ts

@@ -18,8 +18,8 @@ import { NavigatorScreenParams } from '@react-navigation/native'
 export enum Screens {
   TermsAndConditions = 'TermsAndConditions',
   Legal = 'Legal',
+  OptionsPlus = 'OptionsPlus',
   Activities = 'Activities',
-  More = 'More',
 }
 
 export enum Stacks {
@@ -32,7 +32,7 @@ export enum TabStacks {
   HomeStack = 'Tab Home Stack',
   ActivitiesStack = 'Tab Activities Stack',
   CredentialStack = 'Tab Credential Stack',
-  MoreStack = 'Tab More Stack',
+  OptionsPlusStack = 'Tab Options Plus Stack',
 }
 
 export type RootStackParams = {
@@ -52,7 +52,7 @@ export type TabStackParams = {
   [TabStacks.HomeStack]: NavigatorScreenParams<HomeStackParams>
   [TabStacks.ActivitiesStack]: NavigatorScreenParams<ActivitiesStackParams>
   [TabStacks.CredentialStack]: NavigatorScreenParams<CredentialStackParams>
-  [TabStacks.MoreStack]: NavigatorScreenParams<MoreStackParams>
+  [TabStacks.OptionsPlusStack]: NavigatorScreenParams<OptionsPlusStackParams>
 }
 
 export type TermsStackParams = {
@@ -64,7 +64,8 @@ export type ActivitiesStackParams = {
   [Screens.Activities]: undefined
 }
 
-export type MoreStackParams = {
+export type OptionsPlusStackParams = {
+  [Screens.OptionsPlus]: undefined
   [BifoldStacks.SettingStack]: undefined
   [Stacks.HelpCenterStack]: undefined
   [Stacks.AboutStack]: undefined

app/src/screens/Plus.tsx

@@ -0,0 +1,156 @@
+import { useTheme, Button, ButtonType, testIdWithKey, Screens, TabStacks } from '@hyperledger/aries-bifold-core'
+import { HomeStackParams } from '@hyperledger/aries-bifold-core/App/types/navigators'
+import { useNavigation } from '@react-navigation/native'
+import { StackNavigationProp } from '@react-navigation/stack'
+import { useTranslation } from 'react-i18next'
+import { ScrollView, StyleSheet, Text, View } from 'react-native'
+import { SafeAreaView } from 'react-native-safe-area-context'
+
+import CalendarImg from '../assets/img/calendar-empty.svg'
+import ClockImg from '../assets/img/clock.svg'
+import PhoneImg from '../assets/img/telephone.svg'
+
+const Plus: React.FC = () => {
+  const { ColorPallet, TextTheme } = useTheme()
+  const { t } = useTranslation()
+  const { navigate } = useNavigation<StackNavigationProp<HomeStackParams>>()
+
+  const styles = StyleSheet.create({
+    container: {
+      flex: 1,
+      padding: 20,
+      marginBottom: 20,
+      backgroundColor: ColorPallet.brand.primaryBackground,
+    },
+    innerContainer: {
+      flex: 1,
+    },
+    mainSection: {
+      flex: 5,
+    },
+    textHeaderTitle: {
+      ...TextTheme.headingThree,
+      flexShrink: 1,
+      color: TextTheme.headingThree.color,
+      paddingTop: 8,
+      paddingBottom: 8,
+    },
+    textSectionTitle: {
+      ...TextTheme.title,
+      flexShrink: 1,
+      color: TextTheme.bold.color,
+      paddingTop: 8,
+      paddingBottom: 8,
+    },
+    button: {
+      marginTop: 10,
+      marginBottom: 10,
+    },
+    section: {
+      paddingVertical: 12,
+    },
+    scroll: {
+      flexGrow: 1,
+    },
+    sectionRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    sectionDoubleRow: {
+      paddingTop: 10,
+      flexDirection: 'row',
+      alignItems: 'flex-start',
+      height: 100,
+    },
+    sectionCopyright: {
+      flex: 1,
+      justifyContent: 'flex-end',
+      ...TextTheme.headingOne,
+      margin: 10,
+    },
+    phoneImage: {
+      width: 24,
+      height: 24,
+    },
+    sectionDescription: {
+      ...TextTheme.normal,
+      color: TextTheme.normal.color,
+      textAlign: 'left',
+      textDecorationLine: 'none',
+      marginLeft: 10,
+    },
+    sectionCopyrightText: {
+      ...TextTheme.caption,
+      color: TextTheme.normal.color,
+      textAlign: 'left',
+      textDecorationLine: 'none',
+      marginLeft: 10,
+    },
+  })
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <ScrollView contentContainerStyle={styles.scroll}>
+        <View style={styles.innerContainer}>
+          <View style={styles.mainSection}>
+            <View style={styles.button}>
+              <Button
+                buttonType={ButtonType.Secondary}
+                testID={testIdWithKey('AppParams')}
+                accessibilityLabel={t('OptionsPlus.ButtonParamsApp')}
+                title={t('OptionsPlus.ButtonParamsApp')}
+                onPress={() => navigate(TabStacks.HomeStack as never, { screen: Screens.Home } as never)}
+              />
+            </View>
+            <View style={styles.button}>
+              <Button
+                buttonType={ButtonType.Secondary}
+                testID={testIdWithKey('HelpCenter')}
+                accessibilityLabel={t('OptionsPlus.ButtonHelpCenter')}
+                title={t('OptionsPlus.ButtonHelpCenter')}
+                onPress={() => navigate(TabStacks.HomeStack as never, { screen: Screens.Home } as never)}
+              />
+            </View>
+            <View style={styles.button}>
+              <Button
+                buttonType={ButtonType.Secondary}
+                testID={testIdWithKey('StartProcess')}
+                accessibilityLabel={t('OptionsPlus.ButtonAbout')}
+                title={t('OptionsPlus.ButtonAbout')}
+                onPress={() => navigate(TabStacks.HomeStack as never, { screen: Screens.Home } as never)}
+              />
+            </View>
+            <View style={styles.section}>
+              <Text style={styles.textHeaderTitle}> {t('OptionsPlus.TitleSupport')}</Text>
+              <Text style={styles.sectionDescription}> {t('OptionsPlus.DetailSupport')}</Text>
+            </View>
+            <View style={styles.section}>
+              <Text style={styles.textSectionTitle}> {t('OptionsPlus.JoinUsTitle')}</Text>
+            </View>
+            <View style={styles.sectionRow}>
+              <CalendarImg />
+              <Text style={styles.sectionDescription}> {t('OptionsPlus.DaysOpen')}</Text>
+            </View>
+            <View style={styles.sectionRow}>
+              <ClockImg />
+              <Text style={styles.sectionDescription}> {t('OptionsPlus.OpeningHours')}</Text>
+            </View>
+            <View style={styles.sectionDoubleRow}>
+              <PhoneImg style={styles.phoneImage} />
+              <Text style={styles.sectionDescription}>
+                {t('OptionsPlus.PhoneNumber')}
+                {'\n'}
+                {t('OptionsPlus.TollFreeNumber')}
+              </Text>
+            </View>
+          </View>
+          <View style={[styles.sectionCopyright]}>
+            <Text style={styles.sectionCopyrightText}> {t('OptionsPlus.Copyright')}</Text>
+          </View>
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  )
+}
+
+export default Plus