[TS migration] Migrate 'WorkspaceBills' page to TypeScript

src/pages/workspace/WorkspacePageWithSections.tsx

@@ -1,4 +1,3 @@
-import type {RouteProp} from '@react-navigation/native';
 import React, {useEffect, useMemo, useRef} from 'react';
 import type {ReactNode} from 'react';
 import {View} from 'react-native';
@@ -21,6 +20,7 @@ import ROUTES from '@src/ROUTES';
 import type {Route} 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,10 +41,10 @@ type WorkspacePageWithSectionsProps = WithPolicyAndFullscreenLoadingProps &
         headerText: string;
 
         /** The route object passed to this page from the navigator */
-        route: RouteProp<{params: {policyID: string}}>;
+        route: PolicyRoute;
 
         /** Main content of the page */
-        children: (hasVBA?: boolean, policyID?: string, isUsingECard?: boolean) => ReactNode;
+        children: (hasVBA: boolean, policyID: string, isUsingECard: boolean) => ReactNode;
 
         /** Content to be added as fixed footer */
         footer?: ReactNode;
@@ -93,7 +93,7 @@ function WorkspacePageWithSections({
     const isLoading = reimbursementAccount?.isLoading ?? true;
     const achState = reimbursementAccount?.achData?.state ?? '';
     const isUsingECard = user?.isUsingExpensifyCard ?? false;
-    const policyID = route.params.policyID;
+    const policyID = route.params?.policyID ?? '';
     const policyName = policy?.name;
     const hasVBA = achState === BankAccount.STATE.OPEN;
     const content = children(hasVBA, policyID, isUsingECard);

src/pages/workspace/bills/WorkspaceBillsFirstSection.js → src/pages/workspace/bills/WorkspaceBillsFirstSection.tsx

@@ -1,56 +1,47 @@
 import Str from 'expensify-common/lib/str';
-import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
+import type {OnyxEntry} from 'react-native-onyx';
 import CopyTextToClipboard from '@components/CopyTextToClipboard';
 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 TextLink from '@components/TextLink';
-import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
-import compose from '@libs/compose';
-import userPropTypes from '@pages/settings/userPropTypes';
 import * as Link from '@userActions/Link';
 import ONYXKEYS from '@src/ONYXKEYS';
+import type {Session, User} from '@src/types/onyx';
 
-const propTypes = {
-    /** The policy ID currently being configured */
-    policyID: PropTypes.string.isRequired,
-
-    ...withLocalizePropTypes,
-
-    /* From Onyx */
+type WorkspaceBillsFirstSectionOnyxProps = {
     /** Session of currently logged in user */
-    session: PropTypes.shape({
-        /** Email address */
-        email: PropTypes.string.isRequired,
-    }),
+    session: OnyxEntry<Session>;
 
     /** Information about the logged in user's account */
-    user: userPropTypes,
+    user: OnyxEntry<User>;
 };
 
-const defaultProps = {
-    session: {
-        email: null,
-    },
-    user: {},
+type WorkspaceBillsFirstSectionProps = WorkspaceBillsFirstSectionOnyxProps & {
+    /** The policy ID currently being configured */
+    policyID: string;
 };
 
-function WorkspaceBillsFirstSection(props) {
+function WorkspaceBillsFirstSection({session, policyID, user}: WorkspaceBillsFirstSectionProps) {
     const styles = useThemeStyles();
-    const emailDomain = Str.extractEmailDomain(props.session.email);
-    const manageYourBillsUrl = `reports?policyID=${props.policyID}&from=all&type=bill&showStates=Open,Processing,Approved,Reimbursed,Archived&isAdvancedFilterMode=true`;
+    const {translate} = useLocalize();
+
+    const emailDomain = Str.extractEmailDomain(session?.email ?? '');
+    const manageYourBillsUrl = `reports?policyID=${policyID}&from=all&type=bill&showStates=Open,Processing,Approved,Reimbursed,Archived&isAdvancedFilterMode=true`;
+
     return (
         <Section
-            title={props.translate('workspace.bills.manageYourBills')}
+            title={translate('workspace.bills.manageYourBills')}
             icon={Illustrations.PinkBill}
             menuItems={[
                 {
-                    title: props.translate('workspace.bills.viewAllBills'),
+                    title: translate('workspace.bills.viewAllBills'),
                     onPress: () => Link.openOldDotLink(manageYourBillsUrl),
                     icon: Expensicons.Bill,
                     shouldShowRightIcon: true,
@@ -59,40 +50,35 @@ function WorkspaceBillsFirstSection(props) {
                     link: () => Link.buildOldDotURL(manageYourBillsUrl),
                 },
             ]}
-            containerStyles={[styles.cardSection]}
+            containerStyles={styles.cardSection}
         >
-            <View style={[styles.mv3]}>
+            <View style={styles.mv3}>
                 <Text>
-                    {props.translate('workspace.bills.askYourVendorsBeforeEmail')}
-                    {props.user.isFromPublicDomain ? (
+                    {translate('workspace.bills.askYourVendorsBeforeEmail')}
+                    {user?.isFromPublicDomain ? (
                         <TextLink onPress={() => Link.openExternalLink('https://community.expensify.com/discussion/7500/how-to-pay-your-company-bills-in-expensify/')}>
                             example.com@expensify.cash
                         </TextLink>
                     ) : (
                         <CopyTextToClipboard
                             text={`${emailDomain}@expensify.cash`}
-                            textStyles={[styles.textBlue]}
+                            textStyles={styles.textBlue}
                         />
                     )}
-                    <Text>{props.translate('workspace.bills.askYourVendorsAfterEmail')}</Text>
+                    <Text>{translate('workspace.bills.askYourVendorsAfterEmail')}</Text>
                 </Text>
             </View>
         </Section>
     );
 }
 
-WorkspaceBillsFirstSection.propTypes = propTypes;
-WorkspaceBillsFirstSection.defaultProps = defaultProps;
 WorkspaceBillsFirstSection.displayName = 'WorkspaceBillsFirstSection';
 
-export default compose(
-    withLocalize,
-    withOnyx({
-        session: {
-            key: ONYXKEYS.SESSION,
-        },
-        user: {
-            key: ONYXKEYS.USER,
-        },
-    }),
-)(WorkspaceBillsFirstSection);
+export default withOnyx<WorkspaceBillsFirstSectionProps, WorkspaceBillsFirstSectionOnyxProps>({
+    session: {
+        key: ONYXKEYS.SESSION,
+    },
+    user: {
+        key: ONYXKEYS.USER,
+    },
+})(WorkspaceBillsFirstSection);

src/pages/workspace/bills/WorkspaceBillsNoVBAView.js → src/pages/workspace/bills/WorkspaceBillsNoVBAView.tsx

@@ -1,45 +1,43 @@
-import PropTypes from 'prop-types';
 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 withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import WorkspaceBillsFirstSection from './WorkspaceBillsFirstSection';
 
-const propTypes = {
+type WorkspaceBillsNoVBAViewProps = {
     /** The policy ID currently being configured */
-    policyID: PropTypes.string.isRequired,
-
-    ...withLocalizePropTypes,
+    policyID: string;
 };
 
-function WorkspaceBillsNoVBAView(props) {
+function WorkspaceBillsNoVBAView({policyID}: WorkspaceBillsNoVBAViewProps) {
     const styles = useThemeStyles();
+    const {translate} = useLocalize();
+
     return (
         <>
-            <WorkspaceBillsFirstSection policyID={props.policyID} />
+            <WorkspaceBillsFirstSection policyID={policyID} />
 
             <Section
-                title={props.translate('workspace.bills.unlockOnlineBillPayment')}
+                title={translate('workspace.bills.unlockOnlineBillPayment')}
                 icon={Illustrations.LockOpen}
-                containerStyles={[styles.cardSection]}
+                containerStyles={styles.cardSection}
             >
-                <View style={[styles.mv3]}>
-                    <Text>{props.translate('workspace.bills.unlockNoVBACopy')}</Text>
+                <View style={styles.mv3}>
+                    <Text>{translate('workspace.bills.unlockNoVBACopy')}</Text>
                 </View>
                 <ConnectBankAccountButton
-                    policyID={props.policyID}
-                    style={[styles.mt4]}
+                    policyID={policyID}
+                    style={styles.mt4}
                 />
             </Section>
         </>
     );
 }
 
-WorkspaceBillsNoVBAView.propTypes = propTypes;
 WorkspaceBillsNoVBAView.displayName = 'WorkspaceBillsNoVBAView';
 
-export default withLocalize(WorkspaceBillsNoVBAView);
+export default WorkspaceBillsNoVBAView;

src/pages/workspace/bills/WorkspaceBillsPage.tsx

@@ -0,0 +1,35 @@
+import type {StackScreenProps} from '@react-navigation/stack';
+import React from 'react';
+import useLocalize from '@hooks/useLocalize';
+import type {SettingsNavigatorParamList} from '@navigation/types';
+import WorkspacePageWithSections from '@pages/workspace/WorkspacePageWithSections';
+import CONST from '@src/CONST';
+import type SCREENS from '@src/SCREENS';
+import WorkspaceBillsNoVBAView from './WorkspaceBillsNoVBAView';
+import WorkspaceBillsVBAView from './WorkspaceBillsVBAView';
+
+type WorkspaceBillsPageProps = StackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.BILLS>;
+
+function WorkspaceBillsPage({route}: WorkspaceBillsPageProps) {
+    const {translate} = useLocalize();
+
+    return (
+        <WorkspacePageWithSections
+            shouldUseScrollView
+            headerText={translate('workspace.common.bills')}
+            route={route}
+            guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_BILLS}
+        >
+            {(hasVBA: boolean, policyID: string) => (
+                <>
+                    {!hasVBA && <WorkspaceBillsNoVBAView policyID={policyID} />}
+                    {hasVBA && <WorkspaceBillsVBAView policyID={policyID} />}
+                </>
+            )}
+        </WorkspacePageWithSections>
+    );
+}
+
+WorkspaceBillsPage.displayName = 'WorkspaceBillsPage';
+
+export default WorkspaceBillsPage;

src/pages/workspace/bills/WorkspaceBillsVBAView.js → src/pages/workspace/bills/WorkspaceBillsVBAView.tsx

@@ -1,36 +1,35 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
 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 WorkspaceBillsFirstSection from './WorkspaceBillsFirstSection';
 
-const propTypes = {
+type WorkspaceBillsVBAViewProps = {
     /** The policy ID currently being configured */
-    policyID: PropTypes.string.isRequired,
-
-    ...withLocalizePropTypes,
+    policyID: string;
 };
 
-function WorkspaceBillsVBAView(props) {
+function WorkspaceBillsVBAView({policyID}: WorkspaceBillsVBAViewProps) {
     const styles = useThemeStyles();
-    const reportsUrl = `reports?policyID=${props.policyID}&from=all&type=bill&showStates=Processing,Approved&isAdvancedFilterMode=true`;
+    const {translate} = useLocalize();
+
+    const reportsUrl = `reports?policyID=${policyID}&from=all&type=bill&showStates=Processing,Approved&isAdvancedFilterMode=true`;
 
     return (
         <>
-            <WorkspaceBillsFirstSection policyID={props.policyID} />
+            <WorkspaceBillsFirstSection policyID={policyID} />
 
             <Section
-                title={props.translate('workspace.bills.hassleFreeBills')}
+                title={translate('workspace.bills.hassleFreeBills')}
                 icon={Illustrations.MoneyBadge}
                 menuItems={[
                     {
-                        title: props.translate('workspace.common.bills'),
+                        title: translate('workspace.common.bills'),
                         onPress: () => Link.openOldDotLink(reportsUrl),
                         icon: Expensicons.Bill,
                         shouldShowRightIcon: true,
@@ -40,15 +39,14 @@ function WorkspaceBillsVBAView(props) {
                     },
                 ]}
             >
-                <View style={[styles.mv3]}>
-                    <Text>{props.translate('workspace.bills.VBACopy')}</Text>
+                <View style={styles.mv3}>
+                    <Text>{translate('workspace.bills.VBACopy')}</Text>
                 </View>
             </Section>
         </>
     );
 }
 
-WorkspaceBillsVBAView.propTypes = propTypes;
 WorkspaceBillsVBAView.displayName = 'WorkspaceBillsVBAView';
 
-export default withLocalize(WorkspaceBillsVBAView);
+export default WorkspaceBillsVBAView;

src/pages/workspace/invoices/WorkspaceInvoicesPage.tsx

@@ -1,15 +1,14 @@
-import type {RouteProp} from '@react-navigation/native';
+import type {StackScreenProps} from '@react-navigation/stack';
 import React from 'react';
 import useLocalize from '@hooks/useLocalize';
+import type {SettingsNavigatorParamList} from '@navigation/types';
 import WorkspacePageWithSections from '@pages/workspace/WorkspacePageWithSections';
 import CONST from '@src/CONST';
+import type SCREENS from '@src/SCREENS';
 import WorkspaceInvoicesNoVBAView from './WorkspaceInvoicesNoVBAView';
 import WorkspaceInvoicesVBAView from './WorkspaceInvoicesVBAView';
 
-/** Defined route object that contains the policyID param, WorkspacePageWithSections is a common component for Workspaces and expect the route prop that includes the policyID */
-type WorkspaceInvoicesPageProps = {
-    route: RouteProp<{params: {policyID: string}}>;
-};
+type WorkspaceInvoicesPageProps = StackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.INVOICES>;
 
 function WorkspaceInvoicesPage({route}: WorkspaceInvoicesPageProps) {
     const {translate} = useLocalize();