Merge pull request #33152 from kubabutkiewicz/ts-migration/WorkspaceI…

…nvoices/page [TS migration] Migrate 'WorkspaceInvoices' page to TypeScript
Expensify · Jan 4, 2024 · dc3e19b · dc3e19b
2 parents 3b424bb + 8a40214
commit dc3e19b
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 61 deletions.
diff --git a/src/components/menuItemPropTypes.js b/src/components/menuItemPropTypes.js
@@ -164,6 +164,9 @@ const propTypes = {
     /** Should check anonymous user in onPress function */
     shouldCheckActionAllowedOnPress: PropTypes.bool,
 
+    /** The menu item link or function to get the link */
+    link: PropTypes.oneOfType(PropTypes.func, PropTypes.string),
+
     /** Icon should be displayed in its own color */
     displayInDefaultIconColor: PropTypes.bool,
 };

diff --git a/...invoices/WorkspaceInvoicesFirstSection.js → ...nvoices/WorkspaceInvoicesFirstSection.tsx b/...invoices/WorkspaceInvoicesFirstSection.js → ...nvoices/WorkspaceInvoicesFirstSection.tsx
@@ -1,33 +1,32 @@
-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';
 
-const propTypes = {
+type WorkspaceInvoicesFirstSectionProps = {
     /** The policy ID currently being configured */
-    policyID: PropTypes.string.isRequired,
-
-    ...withLocalizePropTypes,
+    policyID: string;
 };
 
-function WorkspaceInvoicesFirstSection(props) {
+function WorkspaceInvoicesFirstSection({policyID}: WorkspaceInvoicesFirstSectionProps) {
     const styles = useThemeStyles();
+    const {translate} = useLocalize();
+
     const sendInvoiceUrl = encodeURI('reports?param={"createInvoice":true}');
-    const viewAllInvoicesUrl = `reports?policyID=${props.policyID}&from=all&type=invoice&showStates=Open,Processing,Approved,Reimbursed,Archived&isAdvancedFilterMode=true`;
+    const viewAllInvoicesUrl = `reports?policyID=${policyID}&from=all&type=invoice&showStates=Open,Processing,Approved,Reimbursed,Archived&isAdvancedFilterMode=true`;
 
     return (
         <Section
-            title={props.translate('workspace.invoices.invoiceClientsAndCustomers')}
+            title={translate('workspace.invoices.invoiceClientsAndCustomers')}
             icon={Illustrations.InvoiceBlue}
             menuItems={[
                 {
-                    title: props.translate('workspace.invoices.sendInvoice'),
+                    title: translate('workspace.invoices.sendInvoice'),
                     onPress: () => Link.openOldDotLink(sendInvoiceUrl),
                     icon: Expensicons.Send,
                     shouldShowRightIcon: true,
@@ -36,7 +35,7 @@ function WorkspaceInvoicesFirstSection(props) {
                     link: () => Link.buildOldDotURL(sendInvoiceUrl),
                 },
                 {
-                    title: props.translate('workspace.invoices.viewAllInvoices'),
+                    title: translate('workspace.invoices.viewAllInvoices'),
                     onPress: () => Link.openOldDotLink(viewAllInvoicesUrl),
                     icon: Expensicons.Invoice,
                     shouldShowRightIcon: true,
@@ -48,13 +47,12 @@ function WorkspaceInvoicesFirstSection(props) {
             containerStyles={[styles.cardSection]}
         >
             <View style={[styles.mv3]}>
-                <Text>{props.translate('workspace.invoices.invoiceFirstSectionCopy')}</Text>
+                <Text>{translate('workspace.invoices.invoiceFirstSectionCopy')}</Text>
             </View>
         </Section>
     );
 }
 
-WorkspaceInvoicesFirstSection.propTypes = propTypes;
 WorkspaceInvoicesFirstSection.displayName = 'WorkspaceInvoicesFirstSection';
 
-export default withLocalize(WorkspaceInvoicesFirstSection);
+export default WorkspaceInvoicesFirstSection;
diff --git a/...ce/invoices/WorkspaceInvoicesNoVBAView.js → ...e/invoices/WorkspaceInvoicesNoVBAView.tsx b/...ce/invoices/WorkspaceInvoicesNoVBAView.js → ...e/invoices/WorkspaceInvoicesNoVBAView.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 WorkspaceInvoicesFirstSection from './WorkspaceInvoicesFirstSection';
 
-const propTypes = {
+type WorkspaceInvoicesNoVBAViewProps = {
     /** The policy ID currently being configured */
-    policyID: PropTypes.string.isRequired,
-
-    ...withLocalizePropTypes,
+    policyID: string;
 };
 
-function WorkspaceInvoicesNoVBAView(props) {
+function WorkspaceInvoicesNoVBAView({policyID}: WorkspaceInvoicesNoVBAViewProps) {
     const styles = useThemeStyles();
+    const {translate} = useLocalize();
+
     return (
         <>
-            <WorkspaceInvoicesFirstSection policyID={props.policyID} />
+            <WorkspaceInvoicesFirstSection policyID={policyID} />
 
             <Section
-                title={props.translate('workspace.invoices.unlockOnlineInvoiceCollection')}
+                title={translate('workspace.invoices.unlockOnlineInvoiceCollection')}
                 icon={Illustrations.MoneyIntoWallet}
                 containerStyles={[styles.cardSection]}
             >
                 <View style={[styles.mv3]}>
-                    <Text>{props.translate('workspace.invoices.unlockNoVBACopy')}</Text>
+                    <Text>{translate('workspace.invoices.unlockNoVBACopy')}</Text>
                 </View>
                 <ConnectBankAccountButton
-                    policyID={props.policyID}
+                    policyID={policyID}
                     style={[styles.mt4]}
                 />
             </Section>
         </>
     );
 }
 
-WorkspaceInvoicesNoVBAView.propTypes = propTypes;
 WorkspaceInvoicesNoVBAView.displayName = 'WorkspaceInvoicesNoVBAView';
 
-export default withLocalize(WorkspaceInvoicesNoVBAView);
+export default WorkspaceInvoicesNoVBAView;
diff --git a/...rkspace/invoices/WorkspaceInvoicesPage.js → ...kspace/invoices/WorkspaceInvoicesPage.tsx b/...rkspace/invoices/WorkspaceInvoicesPage.js → ...kspace/invoices/WorkspaceInvoicesPage.tsx
@@ -1,33 +1,26 @@
-import PropTypes from 'prop-types';
+import {StackScreenProps} from '@react-navigation/stack';
 import React from 'react';
-import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useLocalize from '@hooks/useLocalize';
+import {SettingsNavigatorParamList} from '@libs/Navigation/types';
 import WorkspacePageWithSections from '@pages/workspace/WorkspacePageWithSections';
 import CONST from '@src/CONST';
+import SCREENS from '@src/SCREENS';
 import WorkspaceInvoicesNoVBAView from './WorkspaceInvoicesNoVBAView';
 import WorkspaceInvoicesVBAView from './WorkspaceInvoicesVBAView';
 
-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 WorkspaceInvoicesPageProps = StackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.INVOICES>;
 
-    ...withLocalizePropTypes,
-};
+function WorkspaceInvoicesPage({route}: WorkspaceInvoicesPageProps) {
+    const {translate} = useLocalize();
 
-function WorkspaceInvoicesPage(props) {
     return (
         <WorkspacePageWithSections
             shouldUseScrollView
-            headerText={props.translate('workspace.common.invoices')}
-            route={props.route}
+            headerText={translate('workspace.common.invoices')}
+            route={route}
             guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_INVOICES}
         >
-            {(hasVBA, policyID) => (
+            {(hasVBA: boolean, policyID: string) => (
                 <>
                     {!hasVBA && <WorkspaceInvoicesNoVBAView policyID={policyID} />}
                     {hasVBA && <WorkspaceInvoicesVBAView policyID={policyID} />}
@@ -37,7 +30,6 @@ function WorkspaceInvoicesPage(props) {
     );
 }
 
-WorkspaceInvoicesPage.propTypes = propTypes;
 WorkspaceInvoicesPage.displayName = 'WorkspaceInvoicesPage';
 
-export default withLocalize(WorkspaceInvoicesPage);
+export default WorkspaceInvoicesPage;
diff --git a/...pace/invoices/WorkspaceInvoicesVBAView.js → ...ace/invoices/WorkspaceInvoicesVBAView.tsx b/...pace/invoices/WorkspaceInvoicesVBAView.js → ...ace/invoices/WorkspaceInvoicesVBAView.tsx
@@ -1,36 +1,34 @@
-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 WorkspaceInvoicesFirstSection from './WorkspaceInvoicesFirstSection';
 
-const propTypes = {
-    /** The policy ID currently being configured */
-    policyID: PropTypes.string.isRequired,
-
-    ...withLocalizePropTypes,
+type WorkspaceInvoicesVBAViewProps = {
+    /** The polgicy ID currently being configured */
+    policyID: string;
 };
 
-function WorkspaceInvoicesVBAView(props) {
+function WorkspaceInvoicesVBAView({policyID}: WorkspaceInvoicesVBAViewProps) {
+    const {translate} = useLocalize();
     const styles = useThemeStyles();
-    const viewUnpaidInvoicesUrl = `reports?policyID=${props.policyID}&from=all&type=invoice&showStates=Processing&isAdvancedFilterMode=true`;
+    const viewUnpaidInvoicesUrl = `reports?policyID=${policyID}&from=all&type=invoice&showStates=Processing&isAdvancedFilterMode=true`;
 
     return (
         <>
-            <WorkspaceInvoicesFirstSection policyID={props.policyID} />
+            <WorkspaceInvoicesFirstSection policyID={policyID} />
 
             <Section
-                title={props.translate('workspace.invoices.moneyBackInAFlash')}
+                title={translate('workspace.invoices.moneyBackInAFlash')}
                 icon={Illustrations.MoneyBadge}
                 menuItems={[
                     {
-                        title: props.translate('workspace.invoices.viewUnpaidInvoices'),
+                        title: translate('workspace.invoices.viewUnpaidInvoices'),
                         onPress: () => Link.openOldDotLink(viewUnpaidInvoicesUrl),
                         icon: Expensicons.Hourglass,
                         shouldShowRightIcon: true,
@@ -41,14 +39,13 @@ function WorkspaceInvoicesVBAView(props) {
                 ]}
             >
                 <View style={[styles.mv3]}>
-                    <Text>{props.translate('workspace.invoices.unlockVBACopy')}</Text>
+                    <Text>{translate('workspace.invoices.unlockVBACopy')}</Text>
                 </View>
             </Section>
         </>
     );
 }
 
-WorkspaceInvoicesVBAView.propTypes = propTypes;
 WorkspaceInvoicesVBAView.displayName = 'WorkspaceInvoicesVBAView';
 
-export default withLocalize(WorkspaceInvoicesVBAView);
+export default WorkspaceInvoicesVBAView;