Merge pull request #34360 from JKobrynski/migrateReferralDetailsPageT…

…oTypeScript [TS migration] Migrate 'ReferralDetails' page to TypeScript
Expensify · Jan 22, 2024 · 9f74d1e · 9f74d1e
2 parents de3ad34 + 876e228
commit 9f74d1e
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 25 deletions.
diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts
@@ -323,7 +323,9 @@ type SignInNavigatorParamList = {
 };
 
 type ReferralDetailsNavigatorParamList = {
- [SCREENS.REFERRAL_DETAILS]: undefined;
+ [SCREENS.REFERRAL_DETAILS]: {
+ contentType: ValueOf<typeof CONST.REFERRAL_PROGRAM.CONTENT_TYPES>;
+ };
 };
 
 type ProcessMoneyRequestHoldNavigatorParamList = {

diff --git a/src/pages/ReferralDetailsPage.js → src/pages/ReferralDetailsPage.tsx b/src/pages/ReferralDetailsPage.js → src/pages/ReferralDetailsPage.tsx
@@ -1,7 +1,7 @@
-import PropTypes from 'prop-types';
+import type {StackScreenProps} from '@react-navigation/stack';
 import React, {useRef} from 'react';
+import type {OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
-import _ from 'underscore';
 import ContextMenuItem from '@components/ContextMenuItem';
 import HeaderPageLayout from '@components/HeaderPageLayout';
 import Icon from '@components/Icon';
@@ -14,49 +14,38 @@ import useSingleExecution from '@hooks/useSingleExecution';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Clipboard from '@libs/Clipboard';
+import type {ReferralDetailsNavigatorParamList} from '@libs/Navigation/types';
 import * as Link from '@userActions/Link';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import SCREENS from '@src/SCREENS';
+import type {Account} from '@src/types/onyx';
 import * as ReportActionContextMenu from './home/report/ContextMenu/ReportActionContextMenu';
 
-const propTypes = {
- /** Navigation route context info provided by react navigation */
- route: PropTypes.shape({
- params: PropTypes.shape({
- /** The type of the content from where CTA was called */
- contentType: PropTypes.string,
- }),
- }).isRequired,
-
+type ReferralDetailsPageOnyxProps = {
  /** The details about the account that the user is signing in with */
- account: PropTypes.shape({
- /** The primaryLogin associated with the account */
- primaryLogin: PropTypes.string,
- }),
+ account: OnyxEntry<Account>;
 };
 
-const defaultProps = {
- account: null,
-};
+type ReferralDetailsPageProps = ReferralDetailsPageOnyxProps & StackScreenProps<ReferralDetailsNavigatorParamList, typeof SCREENS.REFERRAL_DETAILS>;
 
-function ReferralDetailsPage({route, account}) {
+function ReferralDetailsPage({route, account}: ReferralDetailsPageProps) {
  const theme = useTheme();
  const styles = useThemeStyles();
  const {translate} = useLocalize();
  const popoverAnchor = useRef(null);
  const {isExecuting, singleExecution} = useSingleExecution();
  let {contentType} = route.params;
 
- if (!_.includes(_.values(CONST.REFERRAL_PROGRAM.CONTENT_TYPES), contentType)) {
+ if (!Object.values(CONST.REFERRAL_PROGRAM.CONTENT_TYPES).includes(contentType)) {
  contentType = CONST.REFERRAL_PROGRAM.CONTENT_TYPES.REFER_FRIEND;
  }
 
  const contentHeader = translate(`referralProgram.${contentType}.header`);
  const contentBody = translate(`referralProgram.${contentType}.body`);
  const isShareCode = contentType === CONST.REFERRAL_PROGRAM.CONTENT_TYPES.SHARE_CODE;
  const shouldShowClipboard = contentType === CONST.REFERRAL_PROGRAM.CONTENT_TYPES.REFER_FRIEND || isShareCode;
- const referralLink = `${CONST.REFERRAL_PROGRAM.LINK}/?thanks=${encodeURIComponent(account.primaryLogin)}`;
+ const referralLink = `${CONST.REFERRAL_PROGRAM.LINK}${account?.primaryLogin ? `/?thanks=${account.primaryLogin}` : ''}`;
 
  return (
  <HeaderPageLayout
@@ -102,9 +91,7 @@ function ReferralDetailsPage({route, account}) {
 }
 
 ReferralDetailsPage.displayName = 'ReferralDetailsPage';
-ReferralDetailsPage.propTypes = propTypes;
-ReferralDetailsPage.defaultProps = defaultProps;
 
-export default withOnyx({
+export default withOnyx<ReferralDetailsPageProps, ReferralDetailsPageOnyxProps>({
  account: {key: ONYXKEYS.ACCOUNT},
 })(ReferralDetailsPage);