From 4feb09259b4501462807da3bb197aa705e3c1d4f Mon Sep 17 00:00:00 2001
From: ruben-rebelo <ruben.rato96@gmail.com>
Date: Tue, 23 Jan 2024 13:44:07 +0000
Subject: [PATCH] [TS Migration] Migrate WorkspaceCard to Typescript

---
 .../workspace/card/WorkspaceCardNoVBAView.js  | 49 -------------------
 .../workspace/card/WorkspaceCardNoVBAView.tsx | 40 +++++++++++++++
 src/pages/workspace/card/WorkspaceCardPage.js | 47 ------------------
 .../workspace/card/WorkspaceCardPage.tsx      | 39 +++++++++++++++
 ...iew.js => WorkspaceCardVBANoECardView.tsx} | 48 +++++++-----------
 ...w.js => WorkspaceCardVBAWithECardView.tsx} | 39 ++++++++-------
 6 files changed, 117 insertions(+), 145 deletions(-)
 delete mode 100644 src/pages/workspace/card/WorkspaceCardNoVBAView.js
 create mode 100644 src/pages/workspace/card/WorkspaceCardNoVBAView.tsx
 delete mode 100644 src/pages/workspace/card/WorkspaceCardPage.js
 create mode 100644 src/pages/workspace/card/WorkspaceCardPage.tsx
 rename src/pages/workspace/card/{WorkspaceCardVBANoECardView.js => WorkspaceCardVBANoECardView.tsx} (53%)
 rename src/pages/workspace/card/{WorkspaceCardVBAWithECardView.js => WorkspaceCardVBAWithECardView.tsx} (67%)

diff --git a/src/pages/workspace/card/WorkspaceCardNoVBAView.js b/src/pages/workspace/card/WorkspaceCardNoVBAView.js
deleted file mode 100644
index 3233f8ea7e23..000000000000
--- a/src/pages/workspace/card/WorkspaceCardNoVBAView.js
+++ /dev/null
@@ -1,49 +0,0 @@
-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 UnorderedList from '@components/UnorderedList';
-import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import useThemeStyles from '@hooks/useThemeStyles';
-
-const propTypes = {
-    /** The policy ID currently being configured */
-    policyID: PropTypes.string.isRequired,
-
-    ...withLocalizePropTypes,
-};
-
-function WorkspaceCardNoVBAView(props) {
-    const styles = useThemeStyles();
-    return (
-        <Section
-            title={props.translate('workspace.card.header')}
-            icon={Illustrations.CreditCardsNew}
-        >
-            <View style={[styles.mv4]}>
-                <Text>{props.translate('workspace.card.noVBACopy')}</Text>
-            </View>
-
-            <UnorderedList
-                items={[
-                    props.translate('workspace.card.benefit1'),
-                    props.translate('workspace.card.benefit2'),
-                    props.translate('workspace.card.benefit3'),
-                    props.translate('workspace.card.benefit4'),
-                ]}
-            />
-            <ConnectBankAccountButton
-                policyID={props.policyID}
-                style={[styles.mt6]}
-            />
-        </Section>
-    );
-}
-
-WorkspaceCardNoVBAView.propTypes = propTypes;
-WorkspaceCardNoVBAView.displayName = 'WorkspaceCardNoVBAView';
-
-export default withLocalize(WorkspaceCardNoVBAView);
diff --git a/src/pages/workspace/card/WorkspaceCardNoVBAView.tsx b/src/pages/workspace/card/WorkspaceCardNoVBAView.tsx
new file mode 100644
index 000000000000..322d433a8e62
--- /dev/null
+++ b/src/pages/workspace/card/WorkspaceCardNoVBAView.tsx
@@ -0,0 +1,40 @@
+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();
+
+    return (
+        <Section
+            title={translate('workspace.card.header')}
+            icon={Illustrations.CreditCardsNew}
+        >
+            <View style={[styles.mv4]}>
+                <Text>{translate('workspace.card.noVBACopy')}</Text>
+            </View>
+
+            <UnorderedList items={[translate('workspace.card.benefit1'), translate('workspace.card.benefit2'), translate('workspace.card.benefit3'), translate('workspace.card.benefit4')]} />
+            <ConnectBankAccountButton
+                policyID={policyID}
+                style={[styles.mt6]}
+            />
+        </Section>
+    );
+}
+
+WorkspaceCardNoVBAView.displayName = 'WorkspaceCardNoVBAView';
+
+export default WorkspaceCardNoVBAView;
diff --git a/src/pages/workspace/card/WorkspaceCardPage.js b/src/pages/workspace/card/WorkspaceCardPage.js
deleted file mode 100644
index 55220b85ce63..000000000000
--- a/src/pages/workspace/card/WorkspaceCardPage.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import WorkspacePageWithSections from '@pages/workspace/WorkspacePageWithSections';
-import CONST from '@src/CONST';
-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,
-
-    ...withLocalizePropTypes,
-};
-
-function WorkspaceCardPage(props) {
-    return (
-        <WorkspacePageWithSections
-            shouldUseScrollView
-            headerText={props.translate('workspace.common.card')}
-            route={props.route}
-            guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_CARD}
-        >
-            {(hasVBA, policyID, isUsingECard) => (
-                <>
-                    {!hasVBA && <WorkspaceCardNoVBAView policyID={policyID} />}
-
-                    {hasVBA && !isUsingECard && <WorkspaceCardVBANoECardView />}
-
-                    {hasVBA && isUsingECard && <WorkspaceCardVBAWithECardView />}
-                </>
-            )}
-        </WorkspacePageWithSections>
-    );
-}
-
-WorkspaceCardPage.propTypes = propTypes;
-WorkspaceCardPage.displayName = 'WorkspaceCardPage';
-
-export default withLocalize(WorkspaceCardPage);
diff --git a/src/pages/workspace/card/WorkspaceCardPage.tsx b/src/pages/workspace/card/WorkspaceCardPage.tsx
new file mode 100644
index 000000000000..f6e368db84ea
--- /dev/null
+++ b/src/pages/workspace/card/WorkspaceCardPage.tsx
@@ -0,0 +1,39 @@
+import type {StackScreenProps} from '@react-navigation/stack';
+import React from 'react';
+import useLocalize from '@hooks/useLocalize';
+import type {SettingsNavigatorParamList} 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';
+
+type WorkspaceCardPageProps = StackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.CARD>;
+
+function WorkspaceCardPage({route}: WorkspaceCardPageProps) {
+    const {translate} = useLocalize();
+    
+    return (
+        <WorkspacePageWithSections
+            shouldUseScrollView
+            headerText={translate('workspace.common.card')}
+            route={route}
+            guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_CARD}
+        >
+            {(hasVBA: boolean, policyID: string, isUsingECard: boolean) => (
+                <>
+                    {false && <WorkspaceCardNoVBAView policyID={policyID} />}
+
+                    {false && <WorkspaceCardVBANoECardView />}
+
+                    {true && <WorkspaceCardVBAWithECardView />}
+                </>
+            )}
+        </WorkspacePageWithSections>
+    );
+}
+
+WorkspaceCardPage.displayName = 'WorkspaceCardPage';
+
+export default WorkspaceCardPage;
diff --git a/src/pages/workspace/card/WorkspaceCardVBANoECardView.js b/src/pages/workspace/card/WorkspaceCardVBANoECardView.tsx
similarity index 53%
rename from src/pages/workspace/card/WorkspaceCardVBANoECardView.js
rename to src/pages/workspace/card/WorkspaceCardVBANoECardView.tsx
index 970cd9105368..3c9b773d6994 100644
--- a/src/pages/workspace/card/WorkspaceCardVBANoECardView.js
+++ b/src/pages/workspace/card/WorkspaceCardVBANoECardView.tsx
@@ -1,5 +1,6 @@
 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';
@@ -7,45 +8,37 @@ 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();
+
     return (
         <>
             <Section
-                title={props.translate('workspace.card.header')}
+                title={translate('workspace.card.header')}
                 icon={Illustrations.CreditCardsNew}
             >
                 <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'),
-                        ]}
+                        items={[translate('workspace.card.benefit1'), translate('workspace.card.benefit2'), translate('workspace.card.benefit3'), translate('workspace.card.benefit4')]}
                     />
                 </View>
                 <Button
-                    text={props.translate('workspace.card.addWorkEmail')}
+                    text={translate('workspace.card.addWorkEmail')}
                     onPress={() => {
                         Link.openOldDotLink(CONST.ADD_SECONDARY_LOGIN_URL);
                     }}
@@ -57,20 +50,15 @@ function WorkspaceCardVBANoECardView(props) {
                     success
                 />
             </Section>
-            {Boolean(props.user.isCheckingDomain) && <Text style={[styles.m5, styles.formError]}>{props.translate('workspace.card.checkingDomain')}</Text>}
+            {Boolean(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);
diff --git a/src/pages/workspace/card/WorkspaceCardVBAWithECardView.js b/src/pages/workspace/card/WorkspaceCardVBAWithECardView.tsx
similarity index 67%
rename from src/pages/workspace/card/WorkspaceCardVBAWithECardView.js
rename to src/pages/workspace/card/WorkspaceCardVBAWithECardView.tsx
index 40ecd80b8e6e..a53a44fa52cf 100644
--- a/src/pages/workspace/card/WorkspaceCardVBAWithECardView.js
+++ b/src/pages/workspace/card/WorkspaceCardVBAWithECardView.tsx
@@ -2,28 +2,35 @@ 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,
+type MenuLinks = {
+    ISSUE_AND_MANAGE_CARDS: string;
+    RECONCILE_CARDS: string;
+    SETTLEMENT_FREQUENCY: string;
 };
 
-const MENU_LINKS = {
+type MenuItems = MenuItemWithLink[];
+
+const MENU_LINKS: MenuLinks = {
     ISSUE_AND_MANAGE_CARDS: 'domain_companycards',
     RECONCILE_CARDS: encodeURI('domain_companycards?param={"section":"cardReconciliation"}'),
     SETTLEMENT_FREQUENCY: encodeURI('domain_companycards?param={"section":"configureSettings"}'),
 };
 
-function WorkspaceCardVBAWithECardView(props) {
+function WorkspaceCardVBAWithECardView() {
     const styles = useThemeStyles();
-    const menuItems = [
+    const {translate} = useLocalize();
+
+    const menuItems: MenuItems = [
         {
-            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 +39,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 +48,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,29 +60,23 @@ function WorkspaceCardVBAWithECardView(props) {
 
     return (
         <Section
-            title={props.translate('workspace.card.headerWithEcard')}
+            title={translate('workspace.card.headerWithEcard')}
             icon={Illustrations.CreditCardsNew}
             menuItems={menuItems}
         >
             <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'),
-                    ]}
+                    items={[translate('workspace.card.benefit1'), translate('workspace.card.benefit2'), translate('workspace.card.benefit3'), translate('workspace.card.benefit4')]}
                 />
             </View>
         </Section>
     );
 }
 
-WorkspaceCardVBAWithECardView.propTypes = propTypes;
 WorkspaceCardVBAWithECardView.displayName = 'WorkspaceCardVBAWithECardView';
 
-export default withLocalize(WorkspaceCardVBAWithECardView);
+export default WorkspaceCardVBAWithECardView;