Skip to content

Commit c0a91f2

Browse files
adamgrzybowskiadamgrzybowski
committed
Update getting started rows with subtext and help section
1 parent 2019d6d commit c0a91f2

5 files changed

Lines changed: 77 additions & 32 deletions

File tree

‎src/pages/home/GettingStartedSection/GettingStartedRow.tsx‎

Lines changed: 25 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
11
import React from 'react';
22
import {View} from 'react-native';
3+
import Badge from '@components/Badge';
4+
import Button from '@components/Button';
35
import Checkbox from '@components/Checkbox';
4-
import Icon from '@components/Icon';
56
import {PressableWithoutFeedback} from '@components/Pressable';
67
import Text from '@components/Text';
78
import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
9+
import useLocalize from '@hooks/useLocalize';
810
import useResponsiveLayout from '@hooks/useResponsiveLayout';
9-
import useStyleUtils from '@hooks/useStyleUtils';
10-
import useTheme from '@hooks/useTheme';
1111
import useThemeStyles from '@hooks/useThemeStyles';
1212
import Navigation from '@libs/Navigation/Navigation';
13-
import variables from '@styles/variables';
1413
import CONST from '@src/CONST';
1514
import type {GettingStartedItem} from './hooks/useGettingStartedItems';
1615

@@ -20,10 +19,9 @@ type GettingStartedRowProps = {
2019

2120
function GettingStartedRow({item}: GettingStartedRowProps) {
2221
const styles = useThemeStyles();
23-
const theme = useTheme();
24-
const StyleUtils = useStyleUtils();
22+
const {translate} = useLocalize();
2523
const {shouldUseNarrowLayout} = useResponsiveLayout();
26-
const icons = useMemoizedLazyExpensifyIcons(['ArrowRight', 'Checkmark'] as const);
24+
const icons = useMemoizedLazyExpensifyIcons(['Checkmark'] as const);
2725

2826
const navigateToItem = () => {
2927
if (!item.isFeatureEnabled) {
@@ -40,34 +38,30 @@ function GettingStartedRow({item}: GettingStartedRowProps) {
4038
>
4139
{({hovered}) => (
4240
<View style={[styles.flexRow, styles.alignItemsCenter, styles.gap3, shouldUseNarrowLayout ? styles.ph5 : styles.ph8, styles.pv3, hovered && styles.hoveredComponentBG]}>
43-
{item.isComplete ? (
44-
<View
45-
style={[
46-
StyleUtils.getSelectionButtonContainerStyle(variables.iconSizeNormal, variables.componentBorderRadiusSmall),
47-
{backgroundColor: theme.icon, borderColor: theme.icon},
48-
]}
49-
>
50-
<Icon
51-
src={icons.Checkmark}
52-
fill={theme.textLight}
53-
height={variables.iconSizeSemiSmall}
54-
width={variables.iconSizeSemiSmall}
55-
/>
56-
</View>
57-
) : (
41+
<View style={styles.gettingStartedRowIconContainer}>
5842
<Checkbox
59-
isChecked={false}
43+
isChecked={item.isComplete}
6044
onPress={navigateToItem}
6145
accessibilityLabel={item.label}
6246
/>
63-
)}
64-
<Text style={[styles.flex1, styles.textBold, item.isComplete && {color: theme.textSupporting}]}>{item.label}</Text>
65-
{!item.isComplete && (
66-
<Icon
67-
src={icons.ArrowRight}
68-
width={variables.iconSizeNormal}
69-
height={variables.iconSizeNormal}
70-
fill={theme.icon}
47+
</View>
48+
<View style={styles.gettingStartedRowTextContainer}>
49+
<Text style={[styles.widgetItemTitle, item.isComplete && styles.textSupporting]}>{item.label}</Text>
50+
<Text style={styles.widgetItemSubtitle}>{item.subText}</Text>
51+
</View>
52+
{item.isComplete ? (
53+
<Badge
54+
text={translate('homePage.gettingStartedSection.done')}
55+
icon={icons.Checkmark}
56+
badgeStyles={[styles.widgetItemButton, styles.justifyContentCenter]}
57+
/>
58+
) : (
59+
<Button
60+
small
61+
success
62+
text={translate('homePage.gettingStartedSection.begin')}
63+
onPress={navigateToItem}
64+
style={styles.widgetItemButton}
7165
/>
7266
)}
7367
</View>

‎src/pages/home/GettingStartedSection/hooks/useGettingStartedItems.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ const MIN_MEMBERS_FOR_ACCOUNTANT_INVITED = 2;
2727
type GettingStartedItem = {
2828
key: string;
2929
label: string;
30+
subText: string;
3031
isComplete: boolean;
3132
route: Route;
3233
isFeatureEnabled?: boolean;
@@ -81,6 +82,7 @@ function useGettingStartedItems(): UseGettingStartedItemsResult {
8182
items.push({
8283
key: 'createWorkspace',
8384
label: translate('homePage.gettingStartedSection.createWorkspace'),
85+
subText: translate('homePage.gettingStartedSection.createWorkspaceSubText'),
8486
isComplete: true,
8587
route: shouldUseNarrowLayout ? ROUTES.WORKSPACE_INITIAL.getRoute(activePolicyID, Navigation.getActiveRoute()) : ROUTES.WORKSPACE_OVERVIEW.getRoute(activePolicyID),
8688
});
@@ -89,6 +91,7 @@ function useGettingStartedItems(): UseGettingStartedItemsResult {
8991
items.push({
9092
key: 'customizeCategories',
9193
label: translate('homePage.gettingStartedSection.customizeCategories'),
94+
subText: translate('homePage.gettingStartedSection.customizeCategoriesSubText'),
9295
isComplete: hasCustomCategories(policyCategories),
9396
route: ROUTES.WORKSPACE_CATEGORIES.getRoute(activePolicyID),
9497
isFeatureEnabled: policy.areCategoriesEnabled,
@@ -99,6 +102,7 @@ function useGettingStartedItems(): UseGettingStartedItemsResult {
99102
items.push({
100103
key: 'inviteAccountant',
101104
label: translate('homePage.gettingStartedSection.inviteAccountant'),
105+
subText: translate('homePage.gettingStartedSection.inviteAccountantSubText'),
102106
isComplete: activeMemberCount >= MIN_MEMBERS_FOR_ACCOUNTANT_INVITED,
103107
route: ROUTES.WORKSPACE_MEMBERS.getRoute(activePolicyID),
104108
});
@@ -119,6 +123,7 @@ function useGettingStartedItems(): UseGettingStartedItemsResult {
119123
items.push({
120124
key: 'connectAccounting',
121125
label: integrationName ? translate('homePage.gettingStartedSection.connectAccounting', {integrationName}) : translate('homePage.gettingStartedSection.connectAccountingDefault'),
126+
subText: translate('homePage.gettingStartedSection.connectAccountingSubText'),
122127
isComplete: !!getValidConnectedIntegration(policy) || Object.values(policy?.connections ?? {}).some((conn) => !!conn?.lastSync?.successfulDate),
123128
route: ROUTES.WORKSPACE_ACCOUNTING.getRoute(activePolicyID),
124129
isFeatureEnabled: policy.areConnectionsEnabled,
@@ -128,6 +133,7 @@ function useGettingStartedItems(): UseGettingStartedItemsResult {
128133
items.push({
129134
key: 'customizeCategories',
130135
label: translate('homePage.gettingStartedSection.customizeCategories'),
136+
subText: translate('homePage.gettingStartedSection.customizeCategoriesSubText'),
131137
isComplete: hasCustomCategories(policyCategories),
132138
route: ROUTES.WORKSPACE_CATEGORIES.getRoute(activePolicyID),
133139
isFeatureEnabled: policy.areCategoriesEnabled,
@@ -138,6 +144,7 @@ function useGettingStartedItems(): UseGettingStartedItemsResult {
138144
items.push({
139145
key: 'linkCompanyCards',
140146
label: translate('homePage.gettingStartedSection.linkCompanyCards'),
147+
subText: translate('homePage.gettingStartedSection.linkCompanyCardsSubText'),
141148
isComplete: hasCompanyCardFeeds(allCardFeeds),
142149
route: ROUTES.WORKSPACE_COMPANY_CARDS.getRoute(activePolicyID),
143150
isFeatureEnabled: policy.areCompanyCardsEnabled,
@@ -148,6 +155,7 @@ function useGettingStartedItems(): UseGettingStartedItemsResult {
148155
items.push({
149156
key: 'setupRules',
150157
label: translate('homePage.gettingStartedSection.setupRules'),
158+
subText: translate('homePage.gettingStartedSection.setupRulesSubText'),
151159
isComplete: hasConfiguredRules(policy),
152160
route: ROUTES.WORKSPACE_RULES.getRoute(activePolicyID),
153161
});

‎src/pages/home/GettingStartedSection/index.tsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,41 @@
11
import React from 'react';
22
import {View} from 'react-native';
3+
import Text from '@components/Text';
4+
import TextLink from '@components/TextLink';
35
import WidgetContainer from '@components/WidgetContainer';
46
import useLocalize from '@hooks/useLocalize';
7+
import useOnyx from '@hooks/useOnyx';
58
import useResponsiveLayout from '@hooks/useResponsiveLayout';
69
import useThemeStyles from '@hooks/useThemeStyles';
10+
import Navigation from '@libs/Navigation/Navigation';
11+
import {getRoom} from '@libs/ReportUtils';
12+
import CONST from '@src/CONST';
13+
import ONYXKEYS from '@src/ONYXKEYS';
14+
import ROUTES from '@src/ROUTES';
715
import GettingStartedRow from './GettingStartedRow';
816
import useGettingStartedItems from './hooks/useGettingStartedItems';
917

1018
function GettingStartedSection() {
1119
const {translate} = useLocalize();
1220
const {shouldUseNarrowLayout} = useResponsiveLayout();
1321
const styles = useThemeStyles();
22+
const [activePolicyID] = useOnyx(ONYXKEYS.NVP_ACTIVE_POLICY_ID);
1423
const {shouldShowSection, items} = useGettingStartedItems();
1524

25+
const openAdminsRoom = () => {
26+
const adminsRoomReportID = activePolicyID ? getRoom(CONST.REPORT.CHAT_TYPE.POLICY_ADMINS, activePolicyID)?.reportID : undefined;
27+
if (!adminsRoomReportID) {
28+
return;
29+
}
30+
31+
if (shouldUseNarrowLayout) {
32+
Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(adminsRoomReportID, undefined, undefined, ROUTES.HOME));
33+
return;
34+
}
35+
36+
Navigation.navigate(ROUTES.SEARCH_REPORT.getRoute({reportID: adminsRoomReportID, backTo: ROUTES.HOME}));
37+
};
38+
1639
if (!shouldShowSection) {
1740
return null;
1841
}
@@ -27,6 +50,13 @@ function GettingStartedSection() {
2750
/>
2851
))}
2952
</View>
53+
<View style={shouldUseNarrowLayout ? [styles.ph5, styles.pb5] : [styles.ph8, styles.pb8]}>
54+
<Text style={styles.textLabelSupporting}>
55+
{`${translate('homePage.gettingStartedSection.needHelp')} `}
56+
<TextLink onPress={openAdminsRoom}>{translate('homePage.gettingStartedSection.talkToConcierge')}</TextLink>
57+
{` ${translate('homePage.gettingStartedSection.forGuidedSetup')}`}
58+
</Text>
59+
</View>
3060
</WidgetContainer>
3161
);
3262
}

‎src/pages/home/HomePage.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,7 @@ function HomePage() {
8585
testID="homePageLeftColumn"
8686
style={styles.homePageLeftColumn}
8787
>
88+
<GettingStartedSection />
8889
<TimeSensitiveSection />
8990
<ForYouSection />
9091
<RecentlyAddedSection />
@@ -95,7 +96,6 @@ function HomePage() {
9596
style={styles.homePageRightColumn}
9697
>
9798
<FreeTrialSection />
98-
<GettingStartedSection />
9999
<UpcomingTravelSection />
100100
<YourSpendSection />
101101
<DiscoverSection />

‎src/styles/index.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3882,6 +3882,19 @@ const staticStyles = (theme: ThemeColors) =>
38823882
minWidth: 68,
38833883
},
38843884

3885+
gettingStartedRowIconContainer: {
3886+
width: variables.componentSizeNormal,
3887+
height: variables.componentSizeNormal,
3888+
alignItems: 'center',
3889+
justifyContent: 'center',
3890+
},
3891+
3892+
gettingStartedRowTextContainer: {
3893+
flex: 1,
3894+
justifyContent: 'center',
3895+
gap: 2,
3896+
},
3897+
38853898
widgetItemSubtitle: {
38863899
...FontUtils.fontFamily.platform.EXP_NEUE,
38873900
fontSize: variables.fontSizeLabel,

0 commit comments

Comments
 (0)