Skip to content

Commit 6093fdd

Browse files
blimpichblimpich
authored
Merge pull request #81761 from Expensify/stites-combineInvoicingPage
2 parents 0b62a4e + db51fb7 commit 6093fdd

File tree

4 files changed

+41
-76
lines changed

4 files changed

+41
-76
lines changed

‎src/pages/workspace/travel/BookOrManageYourTrip.tsx‎

Lines changed: 36 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,54 @@
11
import React from 'react';
2-
import BookTravelButton from '@components/BookTravelButton';
3-
import type {FeatureListItem} from '@components/FeatureList';
4-
import FeatureList from '@components/FeatureList';
5-
import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
2+
import MenuItem from '@components/MenuItem';
3+
import Section from '@components/Section';
4+
import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
65
import useLocalize from '@hooks/useLocalize';
6+
import usePermissions from '@hooks/usePermissions';
77
import useThemeStyles from '@hooks/useThemeStyles';
8-
import colors from '@styles/theme/colors';
8+
import {openTravelDotLink} from '@libs/openTravelDotLink';
9+
import CONST from '@src/CONST';
10+
import WorkspaceTravelInvoicingSection from './WorkspaceTravelInvoicingSection';
911

1012
type GetStartedTravelProps = {
1113
policyID: string;
1214
};
1315

1416
function GetStartedTravel({policyID}: GetStartedTravelProps) {
15-
const handleCtaPress = () => {};
16-
1717
const {translate} = useLocalize();
1818
const styles = useThemeStyles();
19+
const icons = useMemoizedLazyExpensifyIcons(['LuggageWithLines', 'NewWindow'] as const);
20+
const {isBetaEnabled} = usePermissions();
21+
const isTravelInvoicingEnabled = isBetaEnabled(CONST.BETAS.TRAVEL_INVOICING);
22+
const isPreventSpotnanaTravelEnabled = isBetaEnabled(CONST.BETAS.PREVENT_SPOTNANA_TRAVEL);
1923

20-
const illustrations = useMemoizedLazyIllustrations(['PiggyBank', 'TravelAlerts', 'EmptyStateTravel'] as const);
24+
const handleManageTravel = () => {
25+
// TODO: Show the prevention modal when the beta is enabled
26+
if (isPreventSpotnanaTravelEnabled) {
27+
return;
28+
}
29+
openTravelDotLink(policyID);
30+
};
2131

22-
const tripsFeatures: FeatureListItem[] = [
23-
{
24-
icon: illustrations.PiggyBank,
25-
translationKey: 'travel.features.saveMoney',
26-
},
27-
{
28-
icon: illustrations.TravelAlerts,
29-
translationKey: 'travel.features.alerts',
30-
},
31-
];
3232
return (
33-
<FeatureList
34-
menuItems={tripsFeatures}
35-
title={translate('workspace.moreFeatures.travel.bookOrManageYourTrip.title')}
36-
subtitle={translate('workspace.moreFeatures.travel.bookOrManageYourTrip.subtitle')}
37-
onCtaPress={handleCtaPress}
38-
illustrationBackgroundColor={colors.blue600}
39-
illustration={illustrations.EmptyStateTravel}
40-
illustrationStyle={styles.travelCardIllustration}
41-
illustrationContainerStyle={[styles.emptyStateCardIllustrationContainer, styles.justifyContentCenter]}
42-
titleStyles={styles.textHeadlineH1}
43-
footer={
44-
<BookTravelButton
45-
text={translate('workspace.moreFeatures.travel.bookOrManageYourTrip.ctaText')}
46-
activePolicyID={policyID}
33+
<>
34+
<Section
35+
title={translate('workspace.moreFeatures.travel.travelInvoicing.travelBookingSection.title')}
36+
subtitle={translate('workspace.moreFeatures.travel.travelInvoicing.travelBookingSection.subtitle')}
37+
titleStyles={[styles.accountSettingsSectionTitle]}
38+
subtitleMuted
39+
isCentralPane
40+
>
41+
<MenuItem
42+
title={translate('workspace.moreFeatures.travel.bookOrManageYourTrip.ctaText')}
43+
icon={icons.LuggageWithLines}
44+
onPress={handleManageTravel}
45+
shouldShowRightIcon
46+
iconRight={icons.NewWindow}
47+
wrapperStyle={[styles.sectionMenuItemTopDescription, styles.mt3]}
4748
/>
48-
}
49-
/>
49+
</Section>
50+
{isTravelInvoicingEnabled && <WorkspaceTravelInvoicingSection policyID={policyID} />}
51+
</>
5052
);
5153
}
5254

‎src/pages/workspace/travel/PolicyTravelPage.tsx‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,6 @@ import type SCREENS from '@src/SCREENS';
2626
import BookOrManageYourTrip from './BookOrManageYourTrip';
2727
import GetStartedTravel from './GetStartedTravel';
2828
import ReviewingRequest from './ReviewingRequest';
29-
import WorkspaceTravelInvoicingSection from './WorkspaceTravelInvoicingSection';
3029

3130
type WorkspaceTravelPageProps = PlatformStackScreenProps<WorkspaceSplitNavigatorParamList, typeof SCREENS.WORKSPACE.TRAVEL>;
3231

@@ -42,7 +41,6 @@ function WorkspaceTravelPage({
4241
const {translate} = useLocalize();
4342
const policy = usePolicy(policyID);
4443
const illustrations = useMemoizedLazyIllustrations(['Luggage'] as const);
45-
const isTravelInvoicingEnabled = isBetaEnabled(CONST.BETAS.TRAVEL_INVOICING);
4644
const workspaceAccountID = useWorkspaceAccountID(policyID);
4745

4846
const {login: currentUserLogin} = useCurrentUserPersonalDetails();
@@ -72,10 +70,6 @@ function WorkspaceTravelPage({
7270
const step = getTravelStep(policy, travelSettings, isBetaEnabled(CONST.BETAS.IS_TRAVEL_VERIFIED), policies, currentUserLogin);
7371

7472
const mainContent = (() => {
75-
// TODO: Remove this conditional when Travel Invoicing feature is fully implemented
76-
if (isTravelInvoicingEnabled) {
77-
return <WorkspaceTravelInvoicingSection policyID={policyID} />;
78-
}
7973
switch (step) {
8074
case CONST.TRAVEL.STEPS.BOOK_OR_MANAGE_YOUR_TRIP:
8175
return <BookOrManageYourTrip policyID={policyID} />;

‎src/pages/workspace/travel/WorkspaceTravelInvoicingSection.tsx‎

Lines changed: 1 addition & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,13 @@
11
import React from 'react';
22
import {View} from 'react-native';
33
import AnimatedSubmitButton from '@components/AnimatedSubmitButton';
4-
import MenuItem from '@components/MenuItem';
54
import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
65
import OfflineWithFeedback from '@components/OfflineWithFeedback';
76
import Section from '@components/Section';
8-
import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
97
import useLocalize from '@hooks/useLocalize';
108
import useOnyx from '@hooks/useOnyx';
11-
import useSingleExecution from '@hooks/useSingleExecution';
129
import useThemeStyles from '@hooks/useThemeStyles';
1310
import useWorkspaceAccountID from '@hooks/useWorkspaceAccountID';
14-
import {openExternalLink} from '@libs/actions/Link';
1511
import {clearTravelInvoicingSettlementAccountErrors, clearTravelInvoicingSettlementFrequencyErrors, setTravelInvoicingSettlementAccount} from '@libs/actions/TravelInvoicing';
1612
import {getLastFourDigits} from '@libs/BankAccountUtils';
1713
import {getEligibleBankAccountsForCard} from '@libs/CardUtils';
@@ -47,8 +43,6 @@ function WorkspaceTravelInvoicingSection({policyID}: WorkspaceTravelInvoicingSec
4743
const styles = useThemeStyles();
4844
const {translate} = useLocalize();
4945
const workspaceAccountID = useWorkspaceAccountID(policyID);
50-
const {isExecuting, singleExecution} = useSingleExecution();
51-
const icons = useMemoizedLazyExpensifyIcons(['LuggageWithLines', 'NewWindow']);
5246

5347
// For Travel Invoicing, we use a travel-specific card settings key
5448
// The format is: private_expensifyCardSettings_{workspaceAccountID}_{feedType}
@@ -231,28 +225,7 @@ function WorkspaceTravelInvoicingSection({policyID}: WorkspaceTravelInvoicingSec
231225
</Section>
232226
);
233227

234-
return (
235-
<>
236-
<Section
237-
title={translate('workspace.moreFeatures.travel.travelInvoicing.travelBookingSection.title')}
238-
subtitle={translate('workspace.moreFeatures.travel.travelInvoicing.travelBookingSection.subtitle')}
239-
subtitleStyles={styles.mb6}
240-
isCentralPane
241-
subtitleMuted
242-
>
243-
<MenuItem
244-
title={translate('workspace.moreFeatures.travel.travelInvoicing.travelBookingSection.manageTravelLabel')}
245-
onPress={singleExecution(() => openExternalLink(CONST.FOOTER.TRAVEL_URL))}
246-
disabled={isExecuting}
247-
wrapperStyle={styles.sectionMenuItemTopDescription}
248-
iconRight={icons.NewWindow}
249-
icon={icons.LuggageWithLines}
250-
shouldShowRightIcon
251-
/>
252-
</Section>
253-
{optionItems.map(renderOptionItem)}
254-
</>
255-
);
228+
return <>{optionItems.map(renderOptionItem)}</>;
256229
}
257230

258231
export default WorkspaceTravelInvoicingSection;

‎tests/ui/WorkspaceTravelInvoicingSectionTest.tsx‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -102,9 +102,7 @@ describe('WorkspaceTravelInvoicingSection', () => {
102102
// Wait for component to render
103103
await waitForBatchedUpdatesWithAct();
104104

105-
// Then the Travel Booking section should be visible
106-
expect(screen.getByText('Travel booking')).toBeTruthy();
107-
// And the Central Invoicing section should be visible
105+
// Central Invoicing section should be visible
108106
expect(screen.getByText('Central invoicing')).toBeTruthy();
109107
});
110108

@@ -126,9 +124,7 @@ describe('WorkspaceTravelInvoicingSection', () => {
126124

127125
await waitForBatchedUpdatesWithAct();
128126

129-
// Then the Travel Booking section should be visible
130-
expect(screen.getByText('Travel booking')).toBeTruthy();
131-
// And the Central Invoicing section should be visible
127+
// The Central Invoicing section should be visible
132128
expect(screen.getByText('Central invoicing')).toBeTruthy();
133129
});
134130
});
@@ -163,8 +159,8 @@ describe('WorkspaceTravelInvoicingSection', () => {
163159

164160
await waitForBatchedUpdatesWithAct();
165161

166-
// Then the section title should be visible
167-
expect(screen.getByText('Travel booking')).toBeTruthy();
162+
// The section title should be visible
163+
expect(screen.getByText('Central invoicing')).toBeTruthy();
168164
});
169165

170166
it('should display current travel spend label when configured', async () => {

0 commit comments

Comments
 (0)