From 59b5745473cc852036e25cf20589b53a6a416ebe Mon Sep 17 00:00:00 2001 From: Claude Arseneault Date: Wed, 2 Oct 2024 11:37:49 -0400 Subject: [PATCH 1/7] =?UTF-8?q?Cr=C3=A9ation=20de=20la=20Stack=20Plus?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Claude Arseneault --- app/src/assets/img/calendar-empty.svg | 10 ++ app/src/assets/img/clock.svg | 4 + app/src/assets/img/telephone.svg | 3 + app/src/components/HomeFooter.tsx | 10 +- app/src/localization/en/index.ts | 14 +++ app/src/localization/fr/index.ts | 14 +++ app/src/navigators/PlusStack.tsx | 25 +++++ app/src/navigators/navigators.ts | 5 + app/src/screens/Plus.tsx | 134 ++++++++++++++++++++++++++ 9 files changed, 215 insertions(+), 4 deletions(-) create mode 100644 app/src/assets/img/calendar-empty.svg create mode 100644 app/src/assets/img/clock.svg create mode 100644 app/src/assets/img/telephone.svg create mode 100644 app/src/navigators/PlusStack.tsx create mode 100644 app/src/screens/Plus.tsx diff --git a/app/src/assets/img/calendar-empty.svg b/app/src/assets/img/calendar-empty.svg new file mode 100644 index 00000000..e0637f45 --- /dev/null +++ b/app/src/assets/img/calendar-empty.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/app/src/assets/img/clock.svg b/app/src/assets/img/clock.svg new file mode 100644 index 00000000..f4b43066 --- /dev/null +++ b/app/src/assets/img/clock.svg @@ -0,0 +1,4 @@ + + + + diff --git a/app/src/assets/img/telephone.svg b/app/src/assets/img/telephone.svg new file mode 100644 index 00000000..b694122c --- /dev/null +++ b/app/src/assets/img/telephone.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/src/components/HomeFooter.tsx b/app/src/components/HomeFooter.tsx index b60ce77a..930da654 100644 --- a/app/src/components/HomeFooter.tsx +++ b/app/src/components/HomeFooter.tsx @@ -1,14 +1,16 @@ -import { Screens, Stacks, TOKENS, useServices, useTheme } from '@hyperledger/aries-bifold-core' -import { HistoryStackParams } from '@hyperledger/aries-bifold-core/App/types/navigators' +import { TOKENS, useServices, useTheme } from '@hyperledger/aries-bifold-core' +import { Stacks } 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 { StyleSheet, Text, TouchableOpacity, View } from 'react-native' +import { PlusStackParams, Screens } from '../navigators/navigators' + const HomeFooter = () => { const { t } = useTranslation() const { ColorPallet } = useTheme() - const { navigate } = useNavigation>() + const { navigate } = useNavigation>() const [{ useNotifications }] = useServices([TOKENS.NOTIFICATIONS]) const notifications = useNotifications() @@ -35,7 +37,7 @@ const HomeFooter = () => { {notifications?.length > 0 && ( navigate(Stacks.HistoryStack as never, { screen: Screens.HistoryPage } as never)} + onPress={() => navigate(Stacks.OptionsPlus as never, { screen: Screens.OptionsPlus } as never)} > {t('Home.SeeAll')} diff --git a/app/src/localization/en/index.ts b/app/src/localization/en/index.ts index 35f8585f..6b3a2c48 100644 --- a/app/src/localization/en/index.ts +++ b/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: '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', + }, Screens: { Splash: 'Splash', Onboarding: 'Introduction', diff --git a/app/src/localization/fr/index.ts b/app/src/localization/fr/index.ts index 5896b2c5..c2c840bf 100644 --- a/app/src/localization/fr/index.ts +++ b/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 ...", }, diff --git a/app/src/navigators/PlusStack.tsx b/app/src/navigators/PlusStack.tsx new file mode 100644 index 00000000..b40b5d8b --- /dev/null +++ b/app/src/navigators/PlusStack.tsx @@ -0,0 +1,25 @@ +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 Plus from '../screens/Plus' + +import { Screens, PlusStackParams } from './navigators' + +const PlusStack: React.FC = () => { + const StackPlus = createStackNavigator() + const theme = useTheme() + const defaultStackOptions = useDefaultStackOptions(theme) + + return ( + + + + ) +} + +export default PlusStack diff --git a/app/src/navigators/navigators.ts b/app/src/navigators/navigators.ts index fd0d9467..6e831832 100644 --- a/app/src/navigators/navigators.ts +++ b/app/src/navigators/navigators.ts @@ -1,9 +1,14 @@ export enum Screens { TermsAndConditions = 'TermsAndConditions', Legal = 'Legal', + OptionsPlus = 'OptionsPlus', } export type TermsStackParams = { [Screens.TermsAndConditions]: undefined [Screens.Legal]: undefined } + +export type PlusStackParams = { + [Screens.OptionsPlus]: undefined +} diff --git a/app/src/screens/Plus.tsx b/app/src/screens/Plus.tsx new file mode 100644 index 00000000..692c5064 --- /dev/null +++ b/app/src/screens/Plus.tsx @@ -0,0 +1,134 @@ +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>() + + const styles = StyleSheet.create({ + container: { + height: '77%', + padding: 20, + marginBottom: 20, + backgroundColor: ColorPallet.brand.primaryBackground, + }, + 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, + }, + sectionJoin: { + paddingVertical: 12, + }, + sectionRow: { + flexDirection: 'row', + alignItems: 'center', // Aligne les éléments verticalement + height: 40, // Hauteur du conteneur (si nécessaire) + }, + sectionDoubleRow: { + paddingTop: 10, + flexDirection: 'row', + alignItems: 'flex-start', // Aligne l'image et le texte en haut + + height: 100, // Hauteur du conteneur (si nécessaire) + }, + phoneImage: { + width: 24, // Ajustez la largeur de l'image + height: 24, // Ajustez la hauteur de l'image + // marginRight: 10, // Espace entre l'image et le texte + }, + sectionDescription: { + ...TextTheme.normal, + color: TextTheme.normal.color, + textAlign: 'left', + textDecorationLine: 'none', + marginLeft: 10, + }, + }) + + return ( + + + + + + + + + + + + + {t('OptionsPlus.TitleSupport')} + {t('OptionsPlus.DetailSupport')} + + + {t('OptionsPlus.JoinUsTitle')} + + + + {t('OptionsPlus.DaysOpen')} + + + + {t('OptionsPlus.OpeningHours')} + + + + + {' '} + {t('OptionsPlus.PhoneNumber')} + {'\n'} + {t('OptionsPlus.TollFreeNumber')} + + + + + ) +} + +export default Plus From 32619f5173f1d48839c8b69215b9132597310481 Mon Sep 17 00:00:00 2001 From: Claude Arseneault Date: Fri, 4 Oct 2024 13:27:10 -0400 Subject: [PATCH 2/7] Ajustement de la landing page Signed-off-by: Claude Arseneault --- app/src/localization/fr/index.ts | 2 +- app/src/screens/Plus.tsx | 141 ++++++++++++++++++------------- 2 files changed, 83 insertions(+), 60 deletions(-) diff --git a/app/src/localization/fr/index.ts b/app/src/localization/fr/index.ts index c2c840bf..1a10c6b9 100644 --- a/app/src/localization/fr/index.ts +++ b/app/src/localization/fr/index.ts @@ -249,7 +249,7 @@ const translation = { DaysOpen: 'Du lundi au vendredi', OpeningHours: 'De 8h à 18h', PhoneNumber: '1 877 644-4545', - TollFreeNumber: ' 1 800 361-9596 (numéro ATS pour malentendants)', + TollFreeNumber: '1 800 361-9596 (numéro ATS pour malentendants)', Copyright: '@ Gouvernement du Québec', }, StatusMessages: { diff --git a/app/src/screens/Plus.tsx b/app/src/screens/Plus.tsx index 692c5064..d4de68f8 100644 --- a/app/src/screens/Plus.tsx +++ b/app/src/screens/Plus.tsx @@ -17,11 +17,17 @@ const Plus: React.FC = () => { const styles = StyleSheet.create({ container: { - height: '77%', + flex: 1, padding: 20, marginBottom: 20, backgroundColor: ColorPallet.brand.primaryBackground, }, + innerContainer: { + flex: 1, + }, + mainSection: { + flex: 5, + }, textHeaderTitle: { ...TextTheme.headingThree, flexShrink: 1, @@ -43,25 +49,28 @@ const Plus: React.FC = () => { section: { paddingVertical: 12, }, - sectionJoin: { - paddingVertical: 12, + scroll: { + flexGrow: 1, }, sectionRow: { flexDirection: 'row', - alignItems: 'center', // Aligne les éléments verticalement - height: 40, // Hauteur du conteneur (si nécessaire) + alignItems: 'center', }, sectionDoubleRow: { paddingTop: 10, flexDirection: 'row', alignItems: 'flex-start', // Aligne l'image et le texte en haut - height: 100, // Hauteur du conteneur (si nécessaire) }, + sectionCopyright: { + flex: 1, + justifyContent: 'flex-end', + ...TextTheme.headingOne, + margin: 10, + }, phoneImage: { width: 24, // Ajustez la largeur de l'image height: 24, // Ajustez la hauteur de l'image - // marginRight: 10, // Espace entre l'image et le texte }, sectionDescription: { ...TextTheme.normal, @@ -70,61 +79,75 @@ const Plus: React.FC = () => { textDecorationLine: 'none', marginLeft: 10, }, + sectionCopyrightText: { + ...TextTheme.caption, + color: TextTheme.normal.color, + textAlign: 'left', + textDecorationLine: 'none', + marginLeft: 10, + }, }) return ( - - - - - - - - - - - - - {t('OptionsPlus.TitleSupport')} - {t('OptionsPlus.DetailSupport')} - - - {t('OptionsPlus.JoinUsTitle')} - - - - {t('OptionsPlus.DaysOpen')} - - - - {t('OptionsPlus.OpeningHours')} - - - - - {' '} - {t('OptionsPlus.PhoneNumber')} - {'\n'} - {t('OptionsPlus.TollFreeNumber')} - + + + + + +