[TS migration] Migrate 'WorkspaceTravel' page to TypeScript

src/pages/workspace/WorkspacePageWithSections.tsx

@@ -21,7 +21,6 @@ import type {Route} from '@src/ROUTES';
 import ROUTES from '@src/ROUTES';
 import type {Policy, ReimbursementAccount, User} from '@src/types/onyx';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
-import type {PolicyRoute} from './withPolicy';
 import type {WithPolicyAndFullscreenLoadingProps} from './withPolicyAndFullscreenLoading';
 import withPolicyAndFullscreenLoading from './withPolicyAndFullscreenLoading';
 
@@ -41,9 +40,6 @@ type WorkspacePageWithSectionsProps = WithPolicyAndFullscreenLoadingProps &
         /** The text to display in the header */
         headerText: string;
 
-        /** The route object passed to this page from the navigator */
-        route: PolicyRoute;
-
         /** Main content of the page */
         children: (hasVBA: boolean, policyID: string, isUsingECard: boolean) => ReactNode;
 

src/pages/workspace/travel/WorkspaceTravelNoVBAView.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import {View} from 'react-native';
+import ConnectBankAccountButton from '@components/ConnectBankAccountButton';
+import * as Illustrations from '@components/Icon/Illustrations';
+import Section from '@components/Section';
+import Text from '@components/Text';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+
+type WorkspaceTravelNoVBAViewProps = {
+    /** The policy ID currently being configured */
+    policyID: string;
+};
+
+function WorkspaceTravelNoVBAView({policyID}: WorkspaceTravelNoVBAViewProps) {
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+
+    return (
+        <Section
+            title={translate('workspace.travel.unlockConciergeBookingTravel')}
+            icon={Illustrations.Luggage}
+            isCentralPane
+        >
+            <View style={styles.mv3}>
+                <Text>{translate('workspace.travel.noVBACopy')}</Text>
+            </View>
+            <ConnectBankAccountButton
+                policyID={policyID}
+                style={styles.mt4}
+            />
+        </Section>
+    );
+}
+
+WorkspaceTravelNoVBAView.displayName = 'WorkspaceTravelNoVBAView';
+
+export default WorkspaceTravelNoVBAView;

src/pages/workspace/travel/WorkspaceTravelPage.js → src/pages/workspace/travel/WorkspaceTravelPage.tsx

@@ -1,36 +1,28 @@
-import PropTypes from 'prop-types';
+import type {StackScreenProps} from '@react-navigation/stack';
 import React from 'react';
 import {View} from 'react-native';
-import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
+import type {CentralPaneNavigatorParamList} from '@libs/Navigation/types';
 import WorkspacePageWithSections from '@pages/workspace/WorkspacePageWithSections';
 import CONST from '@src/CONST';
+import type SCREENS from '@src/SCREENS';
 import WorkspaceTravelNoVBAView from './WorkspaceTravelNoVBAView';
 import WorkspaceTravelVBAView from './WorkspaceTravelVBAView';
 
-const propTypes = {
-    /** The route object passed to this page from the navigator */
-    route: PropTypes.shape({
-        /** Each parameter passed via the URL */
-        params: PropTypes.shape({
-            /** The policyID that is being configured */
-            policyID: PropTypes.string.isRequired,
-        }).isRequired,
-    }).isRequired,
+type WorkspaceTravelPageProps = StackScreenProps<CentralPaneNavigatorParamList, typeof SCREENS.WORKSPACE.TRAVEL>;
 
-    ...withLocalizePropTypes,
-};
-
-function WorkspaceTravelPage(props) {
+function WorkspaceTravelPage({route}: WorkspaceTravelPageProps) {
+    const {translate} = useLocalize();
     const styles = useThemeStyles();
     const {isSmallScreenWidth} = useWindowDimensions();
 
     return (
         <WorkspacePageWithSections
             shouldUseScrollView
-            headerText={props.translate('workspace.common.travel')}
-            route={props.route}
+            headerText={translate('workspace.common.travel')}
+            route={route}
             guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_TRAVEL}
             shouldShowOfflineIndicatorInWideScreen
         >
@@ -44,7 +36,6 @@ function WorkspaceTravelPage(props) {
     );
 }
 
-WorkspaceTravelPage.propTypes = propTypes;
 WorkspaceTravelPage.displayName = 'WorkspaceTravelPage';
 
-export default withLocalize(WorkspaceTravelPage);
+export default WorkspaceTravelPage;

src/pages/workspace/travel/WorkspaceTravelVBAView.js → src/pages/workspace/travel/WorkspaceTravelVBAView.tsx

@@ -4,61 +4,58 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import * as Illustrations from '@components/Icon/Illustrations';
 import Section from '@components/Section';
 import Text from '@components/Text';
-import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as Link from '@userActions/Link';
 import * as Report from '@userActions/Report';
 import CONST from '@src/CONST';
 
-const propTypes = {
-    ...withLocalizePropTypes,
-};
-
-function WorkspaceTravelVBAView(props) {
+function WorkspaceTravelVBAView() {
     const styles = useThemeStyles();
+    const {translate} = useLocalize();
+
     return (
         <Section
-            title={props.translate('workspace.travel.packYourBags')}
+            title={translate('workspace.travel.packYourBags')}
             icon={Illustrations.Luggage}
             isCentralPane
             menuItems={[
                 {
-                    title: props.translate('workspace.common.issueAndManageCards'),
+                    title: translate('workspace.common.issueAndManageCards'),
                     onPress: () => Link.openOldDotLink('domain_companycards'),
                     icon: Expensicons.ExpensifyCard,
                     shouldShowRightIcon: true,
                     iconRight: Expensicons.NewWindow,
-                    wrapperStyle: [styles.cardMenuItem],
+                    wrapperStyle: styles.cardMenuItem,
                     link: () => Link.buildOldDotURL('domain_companycards'),
                 },
                 {
-                    title: props.translate('workspace.travel.bookTravelWithConcierge'),
+                    title: translate('workspace.travel.bookTravelWithConcierge'),
                     onPress: () => {
                         Report.navigateToConciergeChat();
                     },
                     icon: Expensicons.Concierge,
                     shouldShowRightIcon: true,
-                    wrapperStyle: [styles.cardMenuItem],
+                    wrapperStyle: styles.cardMenuItem,
                 },
                 {
-                    title: props.translate('requestorStep.learnMore'),
+                    title: translate('requestorStep.learnMore'),
                     onPress: () => Link.openExternalLink(CONST.CONCIERGE_TRAVEL_URL),
                     icon: Expensicons.Info,
                     shouldShowRightIcon: true,
                     iconRight: Expensicons.NewWindow,
-                    wrapperStyle: [styles.cardMenuItem],
+                    wrapperStyle: styles.cardMenuItem,
                     link: CONST.CONCIERGE_TRAVEL_URL,
                 },
             ]}
         >
-            <View style={[styles.mv3]}>
-                <Text>{props.translate('workspace.travel.VBACopy')}</Text>
+            <View style={styles.mv3}>
+                <Text>{translate('workspace.travel.VBACopy')}</Text>
             </View>
         </Section>
     );
 }
 
-WorkspaceTravelVBAView.propTypes = propTypes;
 WorkspaceTravelVBAView.displayName = 'WorkspaceTravelVBAView';
 
-export default withLocalize(WorkspaceTravelVBAView);
+export default WorkspaceTravelVBAView;