diff --git a/assets/images/cards-and-domains.svg b/assets/images/cards-and-domains.svg new file mode 100644 index 000000000000..f390178572fb --- /dev/null +++ b/assets/images/cards-and-domains.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/assets/images/home.svg b/assets/images/home.svg new file mode 100644 index 000000000000..5cd525b245dc --- /dev/null +++ b/assets/images/home.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/CONST.ts b/src/CONST.ts index 67f1589cafeb..14c8d8a81e70 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -471,6 +471,8 @@ const CONST = { // Use Environment.getEnvironmentURL to get the complete URL with port number DEV_NEW_EXPENSIFY_URL: 'https://dev.new.expensify.com:', EXPENSIFY_INBOX_URL: 'https://www.expensify.com/inbox', + ADMIN_POLICIES_URL: 'admin_policies', + ADMIN_DOMAINS_URL: 'admin_domains', SIGN_IN_FORM_WIDTH: 300, diff --git a/src/components/Icon/Expensicons.ts b/src/components/Icon/Expensicons.ts index 6da6ea169471..164f0b6d2454 100644 --- a/src/components/Icon/Expensicons.ts +++ b/src/components/Icon/Expensicons.ts @@ -25,6 +25,7 @@ import Building from '@assets/images/building.svg'; import Calendar from '@assets/images/calendar.svg'; import Camera from '@assets/images/camera.svg'; import Car from '@assets/images/car.svg'; +import CardsAndDomains from '@assets/images/cards-and-domains.svg'; import Cash from '@assets/images/cash.svg'; import Chair from '@assets/images/chair.svg'; import ChatBubble from '@assets/images/chatbubble.svg'; @@ -68,6 +69,7 @@ import Globe from '@assets/images/globe.svg'; import Hashtag from '@assets/images/hashtag.svg'; import Heart from '@assets/images/heart.svg'; import History from '@assets/images/history.svg'; +import Home from '@assets/images/home.svg'; import Hourglass from '@assets/images/hourglass.svg'; import ImageCropCircleMask from '@assets/images/image-crop-circle-mask.svg'; import ImageCropSquareMask from '@assets/images/image-crop-square-mask.svg'; @@ -155,6 +157,7 @@ export { Calendar, Camera, Car, + CardsAndDomains, Cash, ChatBubble, ChatBubbles, @@ -204,6 +207,7 @@ export { Hashtag, Heart, History, + Home, Hourglass, ImageCropCircleMask, ImageCropSquareMask, diff --git a/src/languages/en.ts b/src/languages/en.ts index 27d0e8ca3a7d..dfe9e02ab03a 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -508,6 +508,10 @@ export default { listOfChats: 'List of chats', saveTheWorld: 'Save the world', }, + allSettingsScreen: { + subscriptions: 'Subscriptions', + cardsAndDomains: 'Cards & Domains', + }, tabSelector: { chat: 'Chat', room: 'Room', diff --git a/src/languages/es.ts b/src/languages/es.ts index 874fa33cba89..4fa3901bd255 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -501,6 +501,10 @@ export default { listOfChats: 'lista de chats', saveTheWorld: 'Salvar el mundo', }, + allSettingsScreen: { + subscriptions: 'Suscripciones', + cardsAndDomains: 'Tarjetas y Dominios', + }, tabSelector: { chat: 'Chat', room: 'Sala', diff --git a/src/libs/Navigation/AppNavigator/Navigators/BottomTabNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/BottomTabNavigator.tsx index 1792460b14dd..96825b6d827f 100644 --- a/src/libs/Navigation/AppNavigator/Navigators/BottomTabNavigator.tsx +++ b/src/libs/Navigation/AppNavigator/Navigators/BottomTabNavigator.tsx @@ -1,38 +1,15 @@ import {StackNavigationOptions} from '@react-navigation/stack'; import React from 'react'; -import {Text, View} from 'react-native'; -import {PressableWithFeedback} from '@components/Pressable'; import createCustomBottomTabNavigator from '@libs/Navigation/AppNavigator/createCustomBottomTabNavigator'; -import Navigation from '@libs/Navigation/Navigation'; import {BottomTabNavigatorParamList} from '@libs/Navigation/types'; +import AllSettingsScreen from '@pages/home/sidebar/AllSettingsScreen'; import SidebarScreen from '@pages/home/sidebar/SidebarScreen'; -import CONST from '@src/CONST'; -import ROUTES from '@src/ROUTES'; import SCREENS from '@src/SCREENS'; const loadWorkspaceInitialPage = () => require('../../../../pages/workspace/WorkspaceInitialPage').default as React.ComponentType; const Tab = createCustomBottomTabNavigator(); -// TODO-IDEAL replace with the actuall screen. -function SecondTab() { - return ( - - Expensify settings - - { - Navigation.navigate(ROUTES.SETTINGS_WORKSPACES); - }} - > - Workspaces - - - ); -} - const screenOptions: StackNavigationOptions = { headerShown: false, }; @@ -46,7 +23,7 @@ function BottomTabNavigator() { /> ({ + sectionStyle: styles.accountSettingsSectionContainer, + sectionTranslationKey: 'initialSettingsPage.account', + items: [ + { + translationKey: 'common.workspaces', + icon: Expensicons.Building, + routeName: ROUTES.SETTINGS_WORKSPACES, + }, + { + translationKey: 'allSettingsScreen.subscriptions', + icon: Expensicons.MoneyBag, + action: () => { + Link.openOldDotLink(CONST.ADMIN_POLICIES_URL); + }, + shouldShowRightIcon: true, + iconRight: Expensicons.NewWindow, + link: CONST.ADMIN_POLICIES_URL, + }, + { + translationKey: 'allSettingsScreen.cardsAndDomains', + icon: Expensicons.CardsAndDomains, + action: () => { + Link.openOldDotLink(CONST.ADMIN_DOMAINS_URL); + }, + shouldShowRightIcon: true, + iconRight: Expensicons.NewWindow, + link: CONST.ADMIN_DOMAINS_URL, + }, + ], + }), + [styles.accountSettingsSectionContainer], + ); + + /** + * Retuns JSX.Element with menu items + * @param {Object} data list with menu items data + * @returns {JSX.Element} the menu items for passed data + */ + const getMenuItemsSection = useCallback( + (data) => ( + + {_.map(data.items, (item, index) => { + const keyTitle = item.translationKey ? translate(item.translationKey) : item.title; + + return ( + { + if (item.action) { + item.action(); + } else { + waitForNavigate(() => { + Navigation.navigate(item.routeName); + })(); + } + })} + shouldBlockSelection={Boolean(item.link)} + focused={activeRoute && activeRoute.startsWith(item.routeName, 1)} + /> + ); + })} + + ), + [activeRoute, isExecuting, singleExecution, styles.mh3, styles.pb4, styles.sectionMenuItem, translate, waitForNavigate], + ); + + const accountMenuItems = useMemo(() => getMenuItemsSection(menuItemsData), [menuItemsData, getMenuItemsSection]); + + return ( + + + + + {accountMenuItems} + + ); +} + +AllSettingsScreen.displayName = 'AllSettingsScreen'; + +export default AllSettingsScreen; diff --git a/src/pages/workspace/WorkspaceInitialPage.js b/src/pages/workspace/WorkspaceInitialPage.js index 39855686d4d3..1cf5c979ed16 100644 --- a/src/pages/workspace/WorkspaceInitialPage.js +++ b/src/pages/workspace/WorkspaceInitialPage.js @@ -4,17 +4,14 @@ import React, {useCallback, useEffect, useMemo, useState} from 'react'; import {ScrollView, View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import _ from 'underscore'; -import Avatar from '@components/Avatar'; import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView'; +import Breadcrumbs from '@components/Breadcrumbs'; import ConfirmModal from '@components/ConfirmModal'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import * as Expensicons from '@components/Icon/Expensicons'; import MenuItem from '@components/MenuItem'; import OfflineWithFeedback from '@components/OfflineWithFeedback'; -import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback'; import ScreenWrapper from '@components/ScreenWrapper'; -import Text from '@components/Text'; -import Tooltip from '@components/Tooltip'; import useLocalize from '@hooks/useLocalize'; import usePrevious from '@hooks/usePrevious'; import useSingleExecution from '@hooks/useSingleExecution'; @@ -52,13 +49,6 @@ const defaultProps = { reimbursementAccount: {}, }; -/** - * @param {string} policyID - */ -function openEditor(policyID) { - Navigation.navigate(ROUTES.WORKSPACE_OVERVIEW.getRoute(policyID)); -} - /** * @param {string} policyID */ @@ -151,7 +141,7 @@ function WorkspaceInitialPage(props) { const menuItems = [ { translationKey: 'workspace.common.overview', - icon: Expensicons.Gear, + icon: Expensicons.Home, action: singleExecution(waitForNavigate(() => Navigation.navigate(ROUTES.WORKSPACE_OVERVIEW.getRoute(policy.id)))), brickRoadIndicator: hasGeneralSettingsError ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : '', }, @@ -262,47 +252,19 @@ function WorkspaceInitialPage(props) { errors={policy.errors} errorRowStyles={[styles.ph5, styles.pv2]} > - - - - - openEditor(policy.id)))} - accessibilityLabel={translate('workspace.common.settings')} - role={CONST.ROLE.BUTTON} - > - - - - {!_.isEmpty(policy.name) && ( - - openEditor(policy.id)))} - accessibilityLabel={translate('workspace.common.settings')} - role={CONST.ROLE.BUTTON} - > - - {policy.name} - - - - )} - + + + {/* Ideally we should use MenuList component for MenuItems with singleExecution/Navigation actions. @@ -315,10 +277,9 @@ function WorkspaceInitialPage(props) { interactive={!hasPolicyCreationError} title={translate(item.translationKey)} icon={item.icon} - iconRight={item.iconRight} onPress={item.action} - shouldShowRightIcon brickRoadIndicator={item.brickRoadIndicator} + wrapperStyle={styles.sectionMenuItem} /> ))} diff --git a/src/pages/workspace/WorkspaceNamePage.js b/src/pages/workspace/WorkspaceNamePage.js index be55e7ad728f..7401f0cfaaa0 100644 --- a/src/pages/workspace/WorkspaceNamePage.js +++ b/src/pages/workspace/WorkspaceNamePage.js @@ -7,8 +7,6 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton'; import {withNetwork} from '@components/OnyxProvider'; import ScreenWrapper from '@components/ScreenWrapper'; import TextInput from '@components/TextInput'; -import {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails'; -import {withLocalizePropTypes} from '@components/withLocalize'; import withWindowDimensions from '@components/withWindowDimensions'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -19,16 +17,14 @@ import * as Policy from '@userActions/Policy'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; -import withPolicy from './withPolicy'; +import withPolicy, {policyDefaultProps, policyPropTypes} from './withPolicy'; const propTypes = { - ...withLocalizePropTypes, - ...withCurrentUserPersonalDetailsPropTypes, + ...policyPropTypes, }; const defaultProps = { - ...withCurrentUserPersonalDetailsDefaultProps, - isLoadingApp: true, + ...policyDefaultProps, }; function WorkspaceNamePage({policy}) {