Merge pull request #34553 from DylanDylann/fix/25179

[Migration]: migrate GetAssistancePage to typescript
Expensify · Jan 16, 2024 · 0798ed7 · 0798ed7
2 parents d423e81 + a91e9fb
commit 0798ed7
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 46 deletions.
diff --git a/src/components/MenuItemList.tsx b/src/components/MenuItemList.tsx
@@ -10,7 +10,7 @@ type MenuItemLink = string | (() => Promise<string>);
 
 type MenuItemWithLink = MenuItemProps & {
     /** The link to open when the menu item is clicked */
-    link: MenuItemLink;
+    link?: MenuItemLink;
 };
 
 type MenuItemListProps = {
@@ -31,7 +31,7 @@ function MenuItemList({menuItems = [], shouldUseSingleExecution = false}: MenuIt
      * @param link the menu item link or function to get the link
      * @param event the interaction event
      */
-    const secondaryInteraction = (link: MenuItemLink, event: GestureResponderEvent | MouseEvent) => {
+    const secondaryInteraction = (link: MenuItemLink | undefined, event: GestureResponderEvent | MouseEvent) => {
         if (typeof link === 'function') {
             link().then((url) => ReportActionContextMenu.showContextMenu(CONST.CONTEXT_MENU_TYPES.LINK, event, url, popoverAnchor.current));
         } else if (link) {

diff --git a/src/pages/GetAssistancePage.js → src/pages/GetAssistancePage.tsx b/src/pages/GetAssistancePage.js → src/pages/GetAssistancePage.tsx
@@ -1,61 +1,50 @@
-import lodashGet from 'lodash/get';
-import PropTypes from 'prop-types';
+import type {RouteProp} from '@react-navigation/native';
 import React from 'react';
 import {ScrollView, View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
+import type {OnyxEntry} from 'react-native-onyx/lib/types';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import * as Expensicons from '@components/Icon/Expensicons';
 import * as Illustrations from '@components/Icon/Illustrations';
+import type {MenuItemWithLink} from '@components/MenuItemList';
 import ScreenWrapper from '@components/ScreenWrapper';
 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 compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import * as Link from '@userActions/Link';
 import * as Report from '@userActions/Report';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
+import type {Route} from '@src/ROUTES';
+import type {Account} from '@src/types/onyx';
 
-const propTypes = {
-    /** Route object from navigation */
-    route: PropTypes.shape({
-        params: PropTypes.shape({
-            /** The task ID to request the call for */
-            taskID: PropTypes.string,
-        }),
-    }).isRequired,
-
+type GetAssistanceOnyxProps = {
     /** The details about the account that the user is signing in with */
-    account: PropTypes.shape({
-        /** URL to the assigned guide's appointment booking calendar */
-        guideCalendarLink: PropTypes.string,
-    }),
-
-    ...withLocalizePropTypes,
+    account: OnyxEntry<Account>;
 };
 
-const defaultProps = {
-    account: {
-        guideCalendarLink: null,
-    },
+type GetAssistancePageProps = GetAssistanceOnyxProps & {
+    /** Route object from navigation */
+    route: RouteProp<{params: {backTo: Route}}>;
 };
 
-function GetAssistancePage(props) {
+function GetAssistancePage({route, account}: GetAssistancePageProps) {
     const styles = useThemeStyles();
-    const navigateBackTo = lodashGet(props.route, 'params.backTo', ROUTES.SETTINGS_CONTACT_METHODS);
-    const menuItems = [
+    const {translate} = useLocalize();
+    const navigateBackTo = route?.params.backTo || ROUTES.SETTINGS_CONTACT_METHODS.getRoute();
+    const menuItems: MenuItemWithLink[] = [
         {
-            title: props.translate('getAssistancePage.chatWithConcierge'),
+            title: translate('getAssistancePage.chatWithConcierge'),
             onPress: () => Report.navigateToConciergeChat(),
             icon: Expensicons.ChatBubble,
             shouldShowRightIcon: true,
             wrapperStyle: [styles.cardMenuItem],
         },
         {
-            title: props.translate('getAssistancePage.exploreHelpDocs'),
+            title: translate('getAssistancePage.exploreHelpDocs'),
             onPress: () => Link.openExternalLink(CONST.NEWHELP_URL),
             icon: Expensicons.QuestionMark,
             shouldShowRightIcon: true,
@@ -66,10 +55,10 @@ function GetAssistancePage(props) {
     ];
 
     // If the user is eligible for calls with their Guide, add the 'Schedule a setup call' item at the second position in the list
-    const guideCalendarLink = lodashGet(props.account, 'guideCalendarLink');
+    const guideCalendarLink = account?.guideCalendarLink;
     if (guideCalendarLink) {
         menuItems.splice(1, 0, {
-            title: props.translate('getAssistancePage.scheduleSetupCall'),
+            title: translate('getAssistancePage.scheduleSetupCall'),
             onPress: () => Link.openExternalLink(guideCalendarLink),
             icon: Expensicons.Phone,
             shouldShowRightIcon: true,
@@ -82,34 +71,29 @@ function GetAssistancePage(props) {
     return (
         <ScreenWrapper testID={GetAssistancePage.displayName}>
             <HeaderWithBackButton
-                title={props.translate('getAssistancePage.title')}
+                title={translate('getAssistancePage.title')}
                 onBackButtonPress={() => Navigation.goBack(navigateBackTo)}
             />
             <ScrollView>
                 <Section
-                    title={props.translate('getAssistancePage.subtitle')}
+                    title={translate('getAssistancePage.subtitle')}
                     icon={Illustrations.ConciergeNew}
                     menuItems={menuItems}
                 >
                     <View style={styles.mv3}>
-                        <Text>{props.translate('getAssistancePage.description')}</Text>
+                        <Text>{translate('getAssistancePage.description')}</Text>
                     </View>
                 </Section>
             </ScrollView>
         </ScreenWrapper>
     );
 }
 
-GetAssistancePage.propTypes = propTypes;
-GetAssistancePage.defaultProps = defaultProps;
 GetAssistancePage.displayName = 'GetAssistancePage';
 
-export default compose(
-    withLocalize,
-    withOnyx({
-        account: {
-            key: ONYXKEYS.ACCOUNT,
-            selector: (account) => account && {guideCalendarLink: account.guideCalendarLink},
-        },
-    }),
-)(GetAssistancePage);
+export default withOnyx<GetAssistancePageProps, GetAssistanceOnyxProps>({
+    account: {
+        key: ONYXKEYS.ACCOUNT,
+        selector: (account) => account && {guideCalendarLink: account.guideCalendarLink},
+    },
+})(GetAssistancePage);