Merge pull request #34963 from ruben-rebelo/ts-migration/WorkspaceCard

[TS Migration] Migrate WorkspaceCard 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/card/WorkspaceCardNoVBAView.tsx

@@ -0,0 +1,42 @@
+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 UnorderedList from '@components/UnorderedList';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+
+type WorkspaceCardNoVBAViewProps = {
+    /** The policy ID currently being configured */
+    policyID: string;
+};
+
+function WorkspaceCardNoVBAView({policyID}: WorkspaceCardNoVBAViewProps) {
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+    const unorderedListItems = [translate('workspace.card.benefit1'), translate('workspace.card.benefit2'), translate('workspace.card.benefit3'), translate('workspace.card.benefit4')];
+
+    return (
+        <Section
+            title={translate('workspace.card.header')}
+            icon={Illustrations.CreditCardsNew}
+            isCentralPane
+        >
+            <View style={[styles.mv4]}>
+                <Text>{translate('workspace.card.noVBACopy')}</Text>
+            </View>
+
+            <UnorderedList items={unorderedListItems} />
+            <ConnectBankAccountButton
+                policyID={policyID}
+                style={[styles.mt6]}
+            />
+        </Section>
+    );
+}
+
+WorkspaceCardNoVBAView.displayName = 'WorkspaceCardNoVBAView';
+
+export default WorkspaceCardNoVBAView;

src/pages/workspace/card/WorkspaceCardPage.js → src/pages/workspace/card/WorkspaceCardPage.tsx

@@ -1,43 +1,35 @@
-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 WorkspaceCardNoVBAView from './WorkspaceCardNoVBAView';
 import WorkspaceCardVBANoECardView from './WorkspaceCardVBANoECardView';
 import WorkspaceCardVBAWithECardView from './WorkspaceCardVBAWithECardView';
 
-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 WorkspaceCardPageProps = StackScreenProps<CentralPaneNavigatorParamList, typeof SCREENS.WORKSPACE.CARD>;
 
-    ...withLocalizePropTypes,
-};
-
-function WorkspaceCardPage(props) {
+function WorkspaceCardPage({route}: WorkspaceCardPageProps) {
+    const {translate} = useLocalize();
     const styles = useThemeStyles();
     const {isSmallScreenWidth} = useWindowDimensions();
 
     return (
         <WorkspacePageWithSections
             shouldUseScrollView
-            headerText={props.translate('workspace.common.card')}
-            route={props.route}
+            headerText={translate('workspace.common.card')}
+            route={route}
             guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_CARD}
             shouldShowOfflineIndicatorInWideScreen
         >
-            {(hasVBA, policyID, isUsingECard) => (
+            {(hasVBA?: boolean, policyID?: string, isUsingECard?: boolean) => (
                 <View style={[styles.mt3, isSmallScreenWidth ? styles.workspaceSectionMobile : styles.workspaceSection]}>
-                    {!hasVBA && <WorkspaceCardNoVBAView policyID={policyID} />}
+                    {!hasVBA && <WorkspaceCardNoVBAView policyID={policyID ?? ''} />}
 
                     {hasVBA && !isUsingECard && <WorkspaceCardVBANoECardView />}
 
@@ -48,7 +40,6 @@ function WorkspaceCardPage(props) {
     );
 }
 
-WorkspaceCardPage.propTypes = propTypes;
 WorkspaceCardPage.displayName = 'WorkspaceCardPage';
 
-export default withLocalize(WorkspaceCardPage);
+export default WorkspaceCardPage;

src/pages/workspace/card/WorkspaceCardVBANoECardView.js → src/pages/workspace/card/WorkspaceCardVBANoECardView.tsx

@@ -1,52 +1,44 @@
 import React from 'react';
 import {View} from 'react-native';
+import type {OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
 import Button from '@components/Button';
 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 UnorderedList from '@components/UnorderedList';
-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 CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
+import type {User} from '@src/types/onyx';
 
-const propTypes = {
+type WorkspaceCardVBANoECardViewOnyxProps = {
     /** Information about the logged in user's account */
-    user: userPropTypes,
-
-    ...withLocalizePropTypes,
+    user: OnyxEntry<User>;
 };
 
-const defaultProps = {
-    user: {},
-};
+type WorkspaceCardVBANoECardViewProps = WorkspaceCardVBANoECardViewOnyxProps;
 
-function WorkspaceCardVBANoECardView(props) {
+function WorkspaceCardVBANoECardView({user}: WorkspaceCardVBANoECardViewProps) {
     const styles = useThemeStyles();
+    const {translate} = useLocalize();
+    const unorderedListItems = [translate('workspace.card.benefit1'), translate('workspace.card.benefit2'), translate('workspace.card.benefit3'), translate('workspace.card.benefit4')];
+
     return (
         <>
             <Section
-                title={props.translate('workspace.card.header')}
+                title={translate('workspace.card.header')}
                 icon={Illustrations.CreditCardsNew}
                 isCentralPane
             >
                 <View style={[styles.mv3]}>
-                    <UnorderedList
-                        items={[
-                            props.translate('workspace.card.benefit1'),
-                            props.translate('workspace.card.benefit2'),
-                            props.translate('workspace.card.benefit3'),
-                            props.translate('workspace.card.benefit4'),
-                        ]}
-                    />
+                    <UnorderedList items={unorderedListItems} />
                 </View>
                 <Button
-                    text={props.translate('workspace.card.addWorkEmail')}
+                    text={translate('workspace.card.addWorkEmail')}
                     onPress={() => {
                         Link.openOldDotLink(CONST.ADD_SECONDARY_LOGIN_URL);
                     }}
@@ -58,20 +50,15 @@ function WorkspaceCardVBANoECardView(props) {
                     success
                 />
             </Section>
-            {Boolean(props.user.isCheckingDomain) && <Text style={[styles.m5, styles.formError]}>{props.translate('workspace.card.checkingDomain')}</Text>}
+            {!!user?.isCheckingDomain && <Text style={[styles.m5, styles.formError]}>{translate('workspace.card.checkingDomain')}</Text>}
         </>
     );
 }
 
-WorkspaceCardVBANoECardView.propTypes = propTypes;
-WorkspaceCardVBANoECardView.defaultProps = defaultProps;
 WorkspaceCardVBANoECardView.displayName = 'WorkspaceCardVBANoECardView';
 
-export default compose(
-    withLocalize,
-    withOnyx({
-        user: {
-            key: ONYXKEYS.USER,
-        },
-    }),
-)(WorkspaceCardVBANoECardView);
+export default withOnyx<WorkspaceCardVBANoECardViewProps, WorkspaceCardVBANoECardViewOnyxProps>({
+    user: {
+        key: ONYXKEYS.USER,
+    },
+})(WorkspaceCardVBANoECardView);

src/pages/workspace/card/WorkspaceCardVBAWithECardView.js → src/pages/workspace/card/WorkspaceCardVBAWithECardView.tsx

@@ -2,28 +2,29 @@ import React from 'react';
 import {View} from 'react-native';
 import * as Expensicons from '@components/Icon/Expensicons';
 import * as Illustrations from '@components/Icon/Illustrations';
+import type {MenuItemWithLink} from '@components/MenuItemList';
 import Section from '@components/Section';
 import Text from '@components/Text';
 import UnorderedList from '@components/UnorderedList';
-import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as Link from '@userActions/Link';
 
-const propTypes = {
-    ...withLocalizePropTypes,
-};
-
 const MENU_LINKS = {
     ISSUE_AND_MANAGE_CARDS: 'domain_companycards',
     RECONCILE_CARDS: encodeURI('domain_companycards?param={"section":"cardReconciliation"}'),
     SETTLEMENT_FREQUENCY: encodeURI('domain_companycards?param={"section":"configureSettings"}'),
-};
+} as const;
 
-function WorkspaceCardVBAWithECardView(props) {
+function WorkspaceCardVBAWithECardView() {
     const styles = useThemeStyles();
-    const menuItems = [
+    const {translate} = useLocalize();
+
+    const unorderedListItems = [translate('workspace.card.benefit1'), translate('workspace.card.benefit2'), translate('workspace.card.benefit3'), translate('workspace.card.benefit4')];
+
+    const menuItems: MenuItemWithLink[] = [
         {
-            title: props.translate('workspace.common.issueAndManageCards'),
+            title: translate('workspace.common.issueAndManageCards'),
             onPress: () => Link.openOldDotLink(MENU_LINKS.ISSUE_AND_MANAGE_CARDS),
             icon: Expensicons.ExpensifyCard,
             shouldShowRightIcon: true,
@@ -32,7 +33,7 @@ function WorkspaceCardVBAWithECardView(props) {
             link: () => Link.buildOldDotURL(MENU_LINKS.ISSUE_AND_MANAGE_CARDS),
         },
         {
-            title: props.translate('workspace.common.reconcileCards'),
+            title: translate('workspace.common.reconcileCards'),
             onPress: () => Link.openOldDotLink(MENU_LINKS.RECONCILE_CARDS),
             icon: Expensicons.ReceiptSearch,
             shouldShowRightIcon: true,
@@ -41,7 +42,7 @@ function WorkspaceCardVBAWithECardView(props) {
             link: () => Link.buildOldDotURL(MENU_LINKS.RECONCILE_CARDS),
         },
         {
-            title: props.translate('workspace.common.settlementFrequency'),
+            title: translate('workspace.common.settlementFrequency'),
             onPress: () => Link.openOldDotLink(MENU_LINKS.SETTLEMENT_FREQUENCY),
             icon: Expensicons.Gear,
             shouldShowRightIcon: true,
@@ -53,30 +54,22 @@ function WorkspaceCardVBAWithECardView(props) {
 
     return (
         <Section
-            title={props.translate('workspace.card.headerWithEcard')}
+            title={translate('workspace.card.headerWithEcard')}
             icon={Illustrations.CreditCardsNew}
             menuItems={menuItems}
             isCentralPane
         >
             <View style={[styles.mv3]}>
-                <Text>{props.translate('workspace.card.VBAWithECardCopy')}</Text>
+                <Text>{translate('workspace.card.VBAWithECardCopy')}</Text>
             </View>
 
             <View style={[styles.mv3]}>
-                <UnorderedList
-                    items={[
-                        props.translate('workspace.card.benefit1'),
-                        props.translate('workspace.card.benefit2'),
-                        props.translate('workspace.card.benefit3'),
-                        props.translate('workspace.card.benefit4'),
-                    ]}
-                />
+                <UnorderedList items={unorderedListItems} />
             </View>
         </Section>
     );
 }
 
-WorkspaceCardVBAWithECardView.propTypes = propTypes;
 WorkspaceCardVBAWithECardView.displayName = 'WorkspaceCardVBAWithECardView';
 
-export default withLocalize(WorkspaceCardVBAWithECardView);
+export default WorkspaceCardVBAWithECardView;