From 72179aa27b2896bc7001b2507db421cdee4d7e0b Mon Sep 17 00:00:00 2001 From: staszekscp Date: Wed, 20 Dec 2023 11:56:05 +0100 Subject: [PATCH 1/2] redesign settings sidebar --- assets/images/cards-and-domains.svg | 5 + src/CONST.ts | 2 + src/components/Icon/Expensicons.ts | 2 + src/languages/en.ts | 6 +- src/languages/es.ts | 8 ++ .../Navigators/BottomTabNavigator.tsx | 27 +--- src/pages/home/sidebar/AllSettingsScreen.js | 126 ++++++++++++++++++ 7 files changed, 150 insertions(+), 26 deletions(-) create mode 100644 assets/images/cards-and-domains.svg create mode 100644 src/pages/home/sidebar/AllSettingsScreen.js diff --git a/assets/images/cards-and-domains.svg b/assets/images/cards-and-domains.svg new file mode 100644 index 00000000000..f390178572f --- /dev/null +++ b/assets/images/cards-and-domains.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/CONST.ts b/src/CONST.ts index 67f1589cafe..14c8d8a81e7 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 66a162bf2e5..cc1ffed4839 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'; @@ -154,6 +155,7 @@ export { Calendar, Camera, Car, + CardsAndDomains, Cash, ChatBubble, ChatBubbles, diff --git a/src/languages/en.ts b/src/languages/en.ts index db59a833a0a..563f111a977 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', @@ -1993,7 +1997,7 @@ export default { }, breadcrumbs: { // TODO-IDEAL: Verify translations in Spanish - chats: 'Chats' + chats: 'Chats', }, referralProgram: { [CONST.REFERRAL_PROGRAM.CONTENT_TYPES.START_CHAT]: { diff --git a/src/languages/es.ts b/src/languages/es.ts index 72710f1f871..4fa3901bd25 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', @@ -2478,6 +2482,10 @@ export default { guaranteed: 'eRecibo garantizado', transactionDate: 'Fecha de transacción', }, + breadcrumbs: { + // TODO-IDEAL: Verify translations in Spanish + chats: 'Chats', + }, referralProgram: { [CONST.REFERRAL_PROGRAM.CONTENT_TYPES.START_CHAT]: { buttonText1: 'Inicia un chat y ', diff --git a/src/libs/Navigation/AppNavigator/Navigators/BottomTabNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/BottomTabNavigator.tsx index 1792460b14d..96825b6d827 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; From 0cb565c04801eb136481a122dc664c2010c08161 Mon Sep 17 00:00:00 2001 From: staszekscp Date: Wed, 20 Dec 2023 13:03:40 +0100 Subject: [PATCH 2/2] update layout for workspace settings --- assets/images/home.svg | 3 + src/components/Icon/Expensicons.ts | 2 + src/pages/workspace/WorkspaceInitialPage.js | 71 +++++---------------- 3 files changed, 21 insertions(+), 55 deletions(-) create mode 100644 assets/images/home.svg diff --git a/assets/images/home.svg b/assets/images/home.svg new file mode 100644 index 00000000000..5cd525b245d --- /dev/null +++ b/assets/images/home.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/Icon/Expensicons.ts b/src/components/Icon/Expensicons.ts index cc1ffed4839..4d4d187b551 100644 --- a/src/components/Icon/Expensicons.ts +++ b/src/components/Icon/Expensicons.ts @@ -68,6 +68,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'; @@ -204,6 +205,7 @@ export { Hashtag, Heart, History, + Home, Hourglass, ImageCropCircleMask, ImageCropSquareMask, diff --git a/src/pages/workspace/WorkspaceInitialPage.js b/src/pages/workspace/WorkspaceInitialPage.js index 39855686d4d..1cf5c979ed1 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} /> ))}