Ajout du scrollView à la page DéfaultNotification (#132)

* Ajout du scrollView à la page DéfaultNotification Signed-off-by: Claude Arseneault <[email protected]> * Ajout du scrollView à la page DéfaultNotification Signed-off-by: Claude Arseneault <[email protected]> * Ajout du boutton retour à l'accueil Signed-off-by: Claude Arseneault <[email protected]> --------- Signed-off-by: Claude Arseneault <[email protected]>
MCN-ING · Sep 24, 2024 · 8b12728 · 8b12728
1 parent 3145e6e
commit 8b12728
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 38 deletions.
diff --git a/app/src/localization/en/index.ts b/app/src/localization/en/index.ts
@@ -156,14 +156,16 @@ const translation = {
     ButtonTitle: 'Start',
   },
   DefaultNotificationPage: {
-    Title: 'Demander son ANIG (EN)',
+    Title: 'Request your Authentication Attestation',
     Description:
-      "L'attestation numérique d'identité gouvernemental (ANIG) est une attestation qui vous permettra de vous identifier, en ligne et en personne, en partageant le minimum d'information nécessaire.(EN)",
-    SAGConnexion: 'Étape 1 - Connexion au SAG(EN)',
-    SAGConnexionDescription: 'Lorem ipsum dolor amet lorem ipsum dolor set amet lorem ipsum.(EN)',
-    ANIGAccept: "Étape 2 - Accepter l'offre d'attestation(EN)",
-    ANIGAcceptDescription: 'Lorem ipsum dolor amet lorem ipsum dolor set amet lorem ipsum.(EN)',
-    ButtonTitle: 'Recevoir mon attestation',
+      'The Authentication Attestation is a attestation that will allow you to identify yourself more quickly with government services using the Government Authentication Service.',
+    SAGConnexion: 'Step 1 - Log in to the Government Authentication Service',
+    SAGConnexionDescription: 'You must authenticate yourself with the service.',
+    ANIGRequest: 'Step 2 - Request the attestation',
+    ANIGAcceptDescription:
+      'From the account management, you will need to scan the QR code that will be presented to you.\r\n\r\nYou will then need to accept the certificate offer that will be proposed to you.',
+    ButtonTitle: 'Receive my attestation',
+    ButtonHome: 'Return to home page',
   },
   Screens: {
     Splash: 'Splash',

diff --git a/app/src/localization/fr/index.ts b/app/src/localization/fr/index.ts
@@ -227,14 +227,16 @@ const translation = {
     ButtonTitle: 'Démarrer',
   },
   DefaultNotificationPage: {
-    Title: 'Demander son ANIG',
+    Title: 'Demander son Attestation d’authentification',
     Description:
-      "L'attestation numérique d'identité gouvernemental (ANIG) est une attestation qui vous permettra de vous identifier, en ligne et en personne, en partageant le minimum d'information nécessaire.",
-    SAGConnexion: 'Étape 1 - Connexion au SAG',
-    SAGConnexionDescription: 'Lorem ipsum dolor amet lorem ipsum dolor set amet lorem ipsum.',
-    ANIGAccept: "Étape 2 - Accepter l'offre d'attestation",
-    ANIGAcceptDescription: 'Lorem ipsum dolor amet lorem ipsum dolor set amet lorem ipsum.',
+      'L’Attestation d’authentification est une attestation qui vous permettra de vous identifier plus rapidement auprès des services gouvernementaux utilisant le Service d’authentification gouvernementale.',
+    SAGConnexion: 'Étape 1 - Connexion au Service d’authentication gouvernementale',
+    SAGConnexionDescription: 'Vous devez vous authentifier auprès du service.',
+    ANIGRequest: 'Étape 2 - Demander l’attestation',
+    ANIGAcceptDescription:
+      'Depuis la gestion de compte, vous devrez balayer le code QR qui vous sera présenté.\r\n\r\nVous devrez ensuite accepter l’offre d’attestation qui vous sera proposée.',
     ButtonTitle: 'Recevoir mon attestation',
+    ButtonHome: 'Revenir à l’accueil',
   },
   StatusMessages: {
     InitAgent: "Initialisation de l'agent ...",

diff --git a/app/src/screens/DefaultNotification.tsx b/app/src/screens/DefaultNotification.tsx
@@ -5,21 +5,29 @@ import {
   testIdWithKey,
   Screens,
   NotificationStackParams,
+  TabStacks,
 } from '@hyperledger/aries-bifold-core'
-import { StackScreenProps } from '@react-navigation/stack'
+import { HomeStackParams } from '@hyperledger/aries-bifold-core/App/types/navigators'
+import { useNavigation } from '@react-navigation/native'
+import { StackScreenProps, StackNavigationProp } from '@react-navigation/stack'
 import { useTranslation } from 'react-i18next'
-import { StyleSheet, Text, View } from 'react-native'
+import { ScrollView, StyleSheet, Text, View } from 'react-native'
 import { SafeAreaView } from 'react-native-safe-area-context'
 
+import HeaderText from '../components/HeaderText'
+
 type DefaultProps = StackScreenProps<NotificationStackParams, Screens.CustomNotification>
 
 const DefaultNotification: React.FC<DefaultProps> = () => {
   const { ColorPallet, TextTheme } = useTheme()
   const { t } = useTranslation()
+  const { navigate } = useNavigation<StackNavigationProp<HomeStackParams>>()
 
   const styles = StyleSheet.create({
-    pageContainer: {
-      flex: 1,
+    container: {
+      height: '77%',
+      padding: 20,
+      marginBottom: 20,
       backgroundColor: ColorPallet.brand.primaryBackground,
     },
     textHeaderTitle: {
@@ -28,42 +36,50 @@ const DefaultNotification: React.FC<DefaultProps> = () => {
       color: TextTheme.headingThree.color,
     },
     textSectionTitle: {
-      ...TextTheme.headingFour,
+      ...TextTheme.title,
       flexShrink: 1,
-      color: TextTheme.headingFour.color,
+      color: TextTheme.bold.color,
     },
     button: {
-      margin: 15,
+      margin: 20,
+      marginTop: 10,
+      marginBottom: 10,
     },
     section: {
-      paddingVertical: 24,
-      paddingHorizontal: 25,
+      paddingVertical: 12,
     },
     sectionDescription: {
       ...TextTheme.normal,
       color: TextTheme.normal.color,
       textAlign: 'left',
       textDecorationLine: 'none',
-      paddingTop: 20,
+      paddingTop: 8,
+    },
+    sectionDescriptionTitle: {
+      ...TextTheme.normal,
+      color: TextTheme.normal.color,
+      textAlign: 'left',
+      textDecorationLine: 'none',
+      paddingTop: 32,
     },
   })
 
   return (
-    <SafeAreaView style={styles.pageContainer}>
-      <View style={styles.section}>
-        <Text accessibilityRole={'header'} style={styles.textHeaderTitle}>
-          {t('DefaultNotificationPage.Title')}
-        </Text>
-        <Text style={styles.sectionDescription}> {t('DefaultNotificationPage.Description')}</Text>
-      </View>
-      <View style={styles.section}>
-        <Text style={styles.textSectionTitle}>{t('DefaultNotificationPage.SAGConnexion')}</Text>
-        <Text style={styles.sectionDescription}> {t('DefaultNotificationPage.SAGConnexionDescription')}</Text>
-      </View>
-      <View style={styles.section}>
-        <Text style={styles.textSectionTitle}>{t('DefaultNotificationPage.ANIGAccept')}</Text>
-        <Text style={styles.sectionDescription}> {t('DefaultNotificationPage.ANIGAcceptDescription')}</Text>
-      </View>
+    <SafeAreaView edges={['left', 'right', 'bottom']}>
+      <ScrollView style={styles.container}>
+        <View style={styles.section}>
+          <HeaderText title={t('DefaultNotificationPage.Title')} />
+          <Text style={styles.sectionDescriptionTitle}> {t('DefaultNotificationPage.Description')}</Text>
+        </View>
+        <View style={styles.section}>
+          <Text style={styles.textSectionTitle}>{t('DefaultNotificationPage.SAGConnexion')}</Text>
+          <Text style={styles.sectionDescription}> {t('DefaultNotificationPage.SAGConnexionDescription')}</Text>
+        </View>
+        <View style={styles.section}>
+          <Text style={styles.textSectionTitle}>{t('DefaultNotificationPage.ANIGRequest')}</Text>
+          <Text style={styles.sectionDescription}> {t('DefaultNotificationPage.ANIGAcceptDescription')}</Text>
+        </View>
+      </ScrollView>
       <View style={styles.button}>
         <Button
           buttonType={ButtonType.Primary}
@@ -72,6 +88,15 @@ const DefaultNotification: React.FC<DefaultProps> = () => {
           title={t('DefaultNotificationPage.ButtonTitle')}
         ></Button>
       </View>
+      <View style={styles.button}>
+        <Button
+          buttonType={ButtonType.Secondary}
+          testID={testIdWithKey('StartProcess')}
+          accessibilityLabel={t('DefaultNotificationPage.ButtonHome')}
+          title={t('DefaultNotificationPage.ButtonHome')}
+          onPress={() => navigate(TabStacks.HomeStack as never, { screen: Screens.Home } as never)}
+        ></Button>
+      </View>
     </SafeAreaView>
   )
 }