diff --git a/assets/images/simple-illustrations/simple-illustration__teachers-unite.svg b/assets/images/simple-illustrations/simple-illustration__teachers-unite.svg new file mode 100644 index 000000000000..b4edd9513722 --- /dev/null +++ b/assets/images/simple-illustrations/simple-illustration__teachers-unite.svg @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/ROUTES.ts b/src/ROUTES.ts index 581ed72be4a8..f5d653abe5a7 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -181,6 +181,8 @@ const ROUTES = { getRoute: (backTo?: string) => getUrlWithBackToParam('settings/exit-survey/confirm', backTo), }, + SETTINGS_SAVE_THE_WORLD: 'settings/teachersunite', + KEYBOARD_SHORTCUTS: 'keyboard-shortcuts', NEW: 'new', @@ -439,10 +441,10 @@ const ROUTES = { ONBOARD_MANAGE_EXPENSES: 'onboard/manage-expenses', ONBOARD_EXPENSIFY_CLASSIC: 'onboard/expensify-classic', - TEACHERS_UNITE: 'teachersunite', - I_KNOW_A_TEACHER: 'teachersunite/i-know-a-teacher', - I_AM_A_TEACHER: 'teachersunite/i-am-a-teacher', - INTRO_SCHOOL_PRINCIPAL: 'teachersunite/intro-school-principal', + TEACHERS_UNITE: 'settings/teachersunite', + I_KNOW_A_TEACHER: 'settings/teachersunite/i-know-a-teacher', + I_AM_A_TEACHER: 'settings/teachersunite/i-am-a-teacher', + INTRO_SCHOOL_PRINCIPAL: 'settings/teachersunite/intro-school-principal', ERECEIPT: { route: 'eReceipt/:transactionID', diff --git a/src/SCREENS.ts b/src/SCREENS.ts index 997c8ee1fc51..6c9262deeeb3 100644 --- a/src/SCREENS.ts +++ b/src/SCREENS.ts @@ -29,6 +29,7 @@ const SCREENS = { WORKSPACES: 'Settings_Workspaces', SECURITY: 'Settings_Security', ABOUT: 'Settings_About', + SAVE_THE_WORLD: 'Settings_TeachersUnite', APP_DOWNLOAD_LINKS: 'Settings_App_Download_Links', ADD_DEBIT_CARD: 'Settings_Add_Debit_Card', ADD_BANK_ACCOUNT: 'Settings_Add_Bank_Account', diff --git a/src/components/Icon/Illustrations.ts b/src/components/Icon/Illustrations.ts index 58ba14916a3b..9271c417ac33 100644 --- a/src/components/Icon/Illustrations.ts +++ b/src/components/Icon/Illustrations.ts @@ -77,6 +77,7 @@ import ShieldYellow from '@assets/images/simple-illustrations/simple-illustratio import SmallRocket from '@assets/images/simple-illustrations/simple-illustration__smallrocket.svg'; import SplitBill from '@assets/images/simple-illustrations/simple-illustration__splitbill.svg'; import Tag from '@assets/images/simple-illustrations/simple-illustration__tag.svg'; +import TeachersUnite from '@assets/images/simple-illustrations/simple-illustration__teachers-unite.svg'; import ThumbsUpStars from '@assets/images/simple-illustrations/simple-illustration__thumbsupstars.svg'; import TrackShoe from '@assets/images/simple-illustrations/simple-illustration__track-shoe.svg'; import TrashCan from '@assets/images/simple-illustrations/simple-illustration__trashcan.svg'; @@ -158,6 +159,7 @@ export { Workflows, ThreeLeggedLaptopWoman, House, + TeachersUnite, Abacus, Binoculars, CompanyCard, diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx index 87040b92d5e8..aab9ad12baf1 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx @@ -267,6 +267,7 @@ const SettingsModalStackNavigator = createModalStackNavigator require('../../../../pages/workspace/taxes/NamePage').default as React.ComponentType, [SCREENS.WORKSPACE.TAX_VALUE]: () => require('../../../../pages/workspace/taxes/ValuePage').default as React.ComponentType, [SCREENS.WORKSPACE.TAX_CREATE]: () => require('../../../../pages/workspace/taxes/WorkspaceCreateTaxPage').default as React.ComponentType, + [SCREENS.SETTINGS.SAVE_THE_WORLD]: () => require('../../../../pages/TeachersUnite/SaveTheWorldPage').default as React.ComponentType, }); const EnablePaymentsStackNavigator = createModalStackNavigator({ diff --git a/src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator/BaseCentralPaneNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator/BaseCentralPaneNavigator.tsx index 16f403342a58..2b63037a436f 100644 --- a/src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator/BaseCentralPaneNavigator.tsx +++ b/src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator/BaseCentralPaneNavigator.tsx @@ -20,6 +20,7 @@ const settingsScreens = { [SCREENS.SETTINGS.PROFILE.ROOT]: () => require('../../../../../pages/settings/Profile/ProfilePage').default as React.ComponentType, [SCREENS.SETTINGS.WALLET.ROOT]: () => require('../../../../../pages/settings/Wallet/WalletPage').default as React.ComponentType, [SCREENS.SETTINGS.ABOUT]: () => require('../../../../../pages/settings/AboutPage/AboutPage').default as React.ComponentType, + [SCREENS.SETTINGS.SAVE_THE_WORLD]: () => require('../../../../../pages/TeachersUnite/SaveTheWorldPage').default as React.ComponentType, } satisfies Screens; function BaseCentralPaneNavigator() { diff --git a/src/libs/Navigation/linkingConfig/config.ts b/src/libs/Navigation/linkingConfig/config.ts index baf079a35bbf..9e32a68c6182 100644 --- a/src/libs/Navigation/linkingConfig/config.ts +++ b/src/libs/Navigation/linkingConfig/config.ts @@ -61,6 +61,7 @@ const config: LinkingOptions['config'] = { exact: true, }, [SCREENS.SETTINGS.WORKSPACES]: ROUTES.SETTINGS_WORKSPACES, + [SCREENS.SETTINGS.SAVE_THE_WORLD]: ROUTES.SETTINGS_SAVE_THE_WORLD, }, }, [SCREENS.NOT_FOUND]: '*', @@ -484,7 +485,6 @@ const config: LinkingOptions['config'] = { }, [SCREENS.RIGHT_MODAL.TEACHERS_UNITE]: { screens: { - [SCREENS.SAVE_THE_WORLD.ROOT]: ROUTES.TEACHERS_UNITE, [SCREENS.I_KNOW_A_TEACHER]: ROUTES.I_KNOW_A_TEACHER, [SCREENS.INTRO_SCHOOL_PRINCIPAL]: ROUTES.INTRO_SCHOOL_PRINCIPAL, [SCREENS.I_AM_A_TEACHER]: ROUTES.I_AM_A_TEACHER, diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts index 10ca31816b10..b62a972a864c 100644 --- a/src/libs/Navigation/types.ts +++ b/src/libs/Navigation/types.ts @@ -59,6 +59,7 @@ type CentralPaneNavigatorParamList = { [SCREENS.SETTINGS.WALLET.ROOT]: undefined; [SCREENS.SETTINGS.ABOUT]: undefined; [SCREENS.SETTINGS.WORKSPACES]: undefined; + [SCREENS.SETTINGS.SAVE_THE_WORLD]: undefined; }; type WorkspaceSwitcherNavigatorParamList = { diff --git a/src/pages/TeachersUnite/SaveTheWorldPage.tsx b/src/pages/TeachersUnite/SaveTheWorldPage.tsx index 5a6ce4e8f3e9..cc414315e725 100644 --- a/src/pages/TeachersUnite/SaveTheWorldPage.tsx +++ b/src/pages/TeachersUnite/SaveTheWorldPage.tsx @@ -1,49 +1,87 @@ -import React from 'react'; +import React, {useMemo} from 'react'; import {View} from 'react-native'; -import IllustratedHeaderPageLayout from '@components/IllustratedHeaderPageLayout'; +import HeaderWithBackButton from '@components/HeaderWithBackButton'; +import * as Illustrations from '@components/Icon/Illustrations'; import LottieAnimations from '@components/LottieAnimations'; -import MenuItem from '@components/MenuItem'; -import Text from '@components/Text'; +import MenuItemList from '@components/MenuItemList'; +import ScreenWrapper from '@components/ScreenWrapper'; +import ScrollView from '@components/ScrollView'; +import Section from '@components/Section'; import useLocalize from '@hooks/useLocalize'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; +import useWaitForNavigation from '@hooks/useWaitForNavigation'; +import useWindowDimensions from '@hooks/useWindowDimensions'; import Navigation from '@libs/Navigation/Navigation'; +import type {TranslationPaths} from '@src/languages/types'; import ROUTES from '@src/ROUTES'; import SCREENS from '@src/SCREENS'; function SaveTheWorldPage() { - const theme = useTheme(); const styles = useThemeStyles(); const {translate} = useLocalize(); + const waitForNavigate = useWaitForNavigation(); + const {isSmallScreenWidth} = useWindowDimensions(); + const theme = useTheme(); + + const menuItems = useMemo(() => { + const baseMenuItems = [ + { + translationKey: 'teachersUnitePage.iKnowATeacher', + action: waitForNavigate(() => Navigation.navigate(ROUTES.I_KNOW_A_TEACHER)), + }, + { + translationKey: 'teachersUnitePage.iAmATeacher', + action: waitForNavigate(() => Navigation.navigate(ROUTES.I_AM_A_TEACHER)), + }, + ]; + + return baseMenuItems.map((item) => ({ + key: item.translationKey, + title: translate(item.translationKey as TranslationPaths), + onPress: item.action, + shouldShowRightIcon: true, + link: '', + wrapperStyle: [styles.sectionMenuItemTopDescription], + })); + }, [translate, waitForNavigate, styles]); return ( - - - {translate('teachersUnitePage.teachersUnite')} - {translate('teachersUnitePage.joinExpensifyOrg')} - - - Navigation.navigate(ROUTES.I_KNOW_A_TEACHER)} - /> - - Navigation.navigate(ROUTES.I_AM_A_TEACHER)} + Navigation.goBack()} + icon={Illustrations.TeachersUnite} /> - + + +
+ +
+ + + ); } -SaveTheWorldPage.displayName = 'SaveTheWorldPage'; +SaveTheWorldPage.displayName = 'SettingSecurityPage'; + export default SaveTheWorldPage; diff --git a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js index 104deb818067..5dc1019f3bad 100644 --- a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js +++ b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js @@ -15,7 +15,6 @@ import usePrevious from '@hooks/usePrevious'; import useThemeStyles from '@hooks/useThemeStyles'; import compose from '@libs/compose'; import interceptAnonymousUser from '@libs/interceptAnonymousUser'; -import Navigation from '@libs/Navigation/Navigation'; import * as ReportUtils from '@libs/ReportUtils'; import personalDetailsPropType from '@pages/personalDetailsPropType'; import * as App from '@userActions/App'; @@ -25,7 +24,6 @@ import * as Report from '@userActions/Report'; import * as Task from '@userActions/Task'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; -import ROUTES from '@src/ROUTES'; /** * @param {Object} [policy] @@ -334,11 +332,6 @@ function FloatingActionButtonAndPopover(props) { text: translate('newTaskPage.assignTask'), onSelected: () => interceptAnonymousUser(() => Task.clearOutTaskInfoAndNavigate()), }, - { - icon: Expensicons.Heart, - text: translate('sidebarScreen.saveTheWorld'), - onSelected: () => interceptAnonymousUser(() => Navigation.navigate(ROUTES.TEACHERS_UNITE)), - }, ...(!props.isLoading && !Policy.hasActiveChatEnabledPolicies(props.allPolicies) ? [ { diff --git a/src/pages/settings/InitialSettingsPage.tsx b/src/pages/settings/InitialSettingsPage.tsx index 73bd031b5978..a307f6cf6a7f 100755 --- a/src/pages/settings/InitialSettingsPage.tsx +++ b/src/pages/settings/InitialSettingsPage.tsx @@ -250,6 +250,11 @@ function InitialSettingsPage({session, userWallet, bankAccountList, fundList, wa icon: Expensicons.Info, routeName: ROUTES.SETTINGS_ABOUT, }, + { + translationKey: 'sidebarScreen.saveTheWorld', + icon: Expensicons.Heart, + routeName: ROUTES.SETTINGS_SAVE_THE_WORLD, + }, { translationKey: signOutTranslationKey, icon: Expensicons.Exit,