[TS Migration] Migrate WorkspaceCard to Typescript

Expensify · Feb 1, 2024 · 4feb092 · 4feb092
1 parent c675857
commit 4feb092
Show file tree

Hide file tree

Showing 6 changed files with 117 additions and 145 deletions.
diff --git a/src/pages/workspace/card/WorkspaceCardNoVBAView.js b/src/pages/workspace/card/WorkspaceCardNoVBAView.js
diff --git a/src/pages/workspace/card/WorkspaceCardNoVBAView.tsx 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
diff --git a/src/pages/workspace/card/WorkspaceCardPage.tsx 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/...space/card/WorkspaceCardVBANoECardView.js → ...pace/card/WorkspaceCardVBANoECardView.tsx b/...space/card/WorkspaceCardVBANoECardView.js → ...pace/card/WorkspaceCardVBANoECardView.tsx
@@ -1,51 +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();
+
     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/...ace/card/WorkspaceCardVBAWithECardView.js → ...ce/card/WorkspaceCardVBAWithECardView.tsx b/...ace/card/WorkspaceCardVBAWithECardView.js → ...ce/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;