Merge pull request #39175 from software-mansion-labs/brtqkr/ts-migrat…

…ion/38913

[TS migration] Migrate StepScreenWrapper, StepScreenDragAndDropWrapper, IOURequestStepConfirmation and IOURequestStepCategory pages to TypeScript

src/ROUTES.ts

@@ -1,5 +1,6 @@
 import type {IsEqual, ValueOf} from 'type-fest';
 import type CONST from './CONST';
+import type {IOURequestType} from './libs/actions/IOU';
 
 // This is a file containing constants for all the routes we want to be able to go to
 
@@ -396,7 +397,7 @@ const ROUTES = {
  // straight to those flows without needing to have optimistic transaction and report IDs.
  MONEY_REQUEST_START: {
  route: 'start/:iouType/:iouRequestType',
- getRoute: (iouType: ValueOf<typeof CONST.IOU.TYPE>, iouRequestType: ValueOf<typeof CONST.IOU.REQUEST_TYPE>) => `start/${iouType}/${iouRequestType}` as const,
+ getRoute: (iouType: ValueOf<typeof CONST.IOU.TYPE>, iouRequestType: IOURequestType) => `start/${iouType}/${iouRequestType}` as const,
  },
  MONEY_REQUEST_CREATE_TAB_DISTANCE: {
  route: ':action/:iouType/start/:transactionID/:reportID/distance',

src/components/CategoryPicker.tsx

@@ -21,7 +21,7 @@ type CategoryPickerProps = CategoryPickerOnyxProps & {
  /** It's used by withOnyx HOC */
  // eslint-disable-next-line react/no-unused-prop-types
  policyID: string;
- selectedCategory: string;
+ selectedCategory?: string;
  onSubmit: (item: ListItem) => void;
 };
 
@@ -38,7 +38,7 @@ function CategoryPicker({selectedCategory, policyCategories, policyRecentlyUsedC
  {
  name: selectedCategory,
  enabled: true,
- accountID: null,
+ accountID: undefined,
  isSelected: true,
  },
  ];

src/components/TagPicker/index.tsx

@@ -14,7 +14,7 @@ import type {PolicyTag, PolicyTagList, PolicyTags, RecentlyUsedTags} from '@src/
 type SelectedTagOption = {
  name: string;
  enabled: boolean;
- accountID: number | null;
+ accountID: number | undefined;
 };
 
 type TagPickerOnyxProps = {
@@ -68,7 +68,7 @@ function TagPicker({selectedTag, tagListName, policyTags, tagListIndex, policyRe
  {
  name: selectedTag,
  enabled: true,
- accountID: null,
+ accountID: undefined,
  },
  ];
  }, [selectedTag]);

src/libs/API/parameters/RequestMoneyParams.ts

@@ -17,7 +17,7 @@ type RequestMoneyParams = {
  createdChatReportActionID: string;
  createdIOUReportActionID: string;
  reportPreviewReportActionID: string;
- receipt: Receipt;
+ receipt?: Receipt;
  receiptState?: ValueOf<typeof CONST.IOU.RECEIPT_STATE>;
  category?: string;
  tag?: string;

src/libs/API/parameters/TrackExpenseParams.ts

@@ -15,7 +15,7 @@ type TrackExpenseParams = {
  createdChatReportActionID: string;
  createdIOUReportActionID?: string;
  reportPreviewReportActionID?: string;
- receipt: Receipt;
+ receipt?: Receipt;
  receiptState?: ValueOf<typeof CONST.IOU.RECEIPT_STATE>;
  category?: string;
  tag?: string;

src/libs/IOUUtils.ts

@@ -3,11 +3,12 @@ import type {ValueOf} from 'type-fest';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
 import type {Report, Transaction} from '@src/types/onyx';
+import type {IOURequestType} from './actions/IOU';
 import * as CurrencyUtils from './CurrencyUtils';
 import Navigation from './Navigation/Navigation';
 import * as TransactionUtils from './TransactionUtils';
 
-function navigateToStartMoneyRequestStep(requestType: ValueOf<typeof CONST.IOU.REQUEST_TYPE>, iouType: ValueOf<typeof CONST.IOU.TYPE>, transactionID: string, reportID: string) {
+function navigateToStartMoneyRequestStep(requestType: IOURequestType, iouType: ValueOf<typeof CONST.IOU.TYPE>, transactionID: string, reportID: string) {
  // If the participants were automatically added to the transaction, then the user needs taken back to the starting step
  switch (requestType) {
  case CONST.IOU.REQUEST_TYPE.DISTANCE:

src/libs/Navigation/types.ts

@@ -360,12 +360,6 @@ type MoneyRequestNavigatorParamList = {
  iouType: string;
  reportID: string;
  };
- [SCREENS.MONEY_REQUEST.STEP_CONFIRMATION]: {
- action: ValueOf<typeof CONST.IOU.ACTION>;
- iouType: string;
- transactionID: string;
- reportID: string;
- };
  [SCREENS.MONEY_REQUEST.CURRENCY]: {
  iouType: string;
  reportID: string;
@@ -391,6 +385,7 @@ type MoneyRequestNavigatorParamList = {
  action: ValueOf<typeof CONST.IOU.ACTION>;
  iouType: ValueOf<typeof CONST.IOU.TYPE>;
  transactionID: string;
+ reportActionID: string;
  reportID: string;
  backTo: Routes;
  };
@@ -450,6 +445,14 @@ type MoneyRequestNavigatorParamList = {
  iouType: string;
  reportID: string;
  };
+ [SCREENS.MONEY_REQUEST.STEP_CONFIRMATION]: {
+ action: ValueOf<typeof CONST.IOU.ACTION>;
+ iouType: ValueOf<typeof CONST.IOU.TYPE>;
+ transactionID: string;
+ reportID: string;
+ pageIndex?: string;
+ backTo?: string;
+ };
 };
 
 type NewTaskNavigatorParamList = {

src/libs/OptionsListUtils.ts

@@ -169,7 +169,7 @@ type MemberForList = {
  keyForList: string;
  isSelected: boolean;
  isDisabled: boolean;
- accountID?: number | null;
+ accountID?: number;
  login: string;
  icons?: OnyxCommon.Icon[];
  pendingAction?: OnyxCommon.PendingAction;
@@ -357,7 +357,7 @@ function isPersonalDetailsReady(personalDetails: OnyxEntry<PersonalDetailsList>)
 /**
  * Get the participant option for a report.
  */
-function getParticipantsOption(participant: ReportUtils.OptionData, personalDetails: OnyxEntry<PersonalDetailsList>): Participant {
+function getParticipantsOption(participant: ReportUtils.OptionData | Participant, personalDetails: OnyxEntry<PersonalDetailsList>): Participant {
  const detail = getPersonalDetailsForAccountIDs([participant.accountID ?? -1], personalDetails)[participant.accountID ?? -1];
  // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
  const login = detail?.login || participant.login || '';
@@ -644,21 +644,22 @@ function createOption(
  const {showChatPreviewLine = false, forcePolicyNamePreview = false, showPersonalDetails = false} = config ?? {};
  const result: ReportUtils.OptionData = {
  text: undefined,
- alternateText: null,
+ alternateText: undefined,
  pendingAction: undefined,
  allReportErrors: undefined,
  brickRoadIndicator: null,
  icons: undefined,
  tooltipText: null,
  ownerAccountID: undefined,
- subtitle: null,
+ subtitle: undefined,
  participantsList: undefined,
  accountID: 0,
- login: null,
+ login: undefined,
  reportID: '',
- phoneNumber: null,
- keyForList: null,
- searchText: null,
+ phoneNumber: undefined,
+ hasDraftComment: false,
+ keyForList: undefined,
+ searchText: undefined,
  isDefaultRoom: false,
  isPinned: false,
  isWaitingOnBankAccount: false,

src/libs/ReportUtils.ts

@@ -379,23 +379,24 @@ type CustomIcon = {
 
 type OptionData = {
  text?: string;
- alternateText?: string | null;
+ alternateText?: string;
  allReportErrors?: Errors;
  brickRoadIndicator?: ValueOf<typeof CONST.BRICK_ROAD_INDICATOR_STATUS> | '' | null;
  tooltipText?: string | null;
  alternateTextMaxLines?: number;
  boldStyle?: boolean;
  customIcon?: CustomIcon;
- subtitle?: string | null;
- login?: string | null;
- accountID?: number | null;
+ subtitle?: string;
+ login?: string;
+ accountID?: number;
  pronouns?: string;
  status?: Status | null;
- phoneNumber?: string | null;
+ phoneNumber?: string;
  isUnread?: boolean | null;
  isUnreadWithMention?: boolean | null;
- keyForList?: string | null;
- searchText?: string | null;
+ hasDraftComment?: boolean | null;
+ keyForList?: string;
+ searchText?: string;
  isIOUReportOwner?: boolean | null;
  isArchivedRoom?: boolean | null;
  shouldShowSubscript?: boolean | null;

src/libs/SidebarUtils.ts

@@ -209,19 +209,20 @@ function getOptionData({
 
  const result: ReportUtils.OptionData = {
  text: '',
- alternateText: null,
+ alternateText: undefined,
  allReportErrors: OptionsListUtils.getAllReportErrors(report, reportActions),
  brickRoadIndicator: null,
  tooltipText: null,
- subtitle: null,
- login: null,
- accountID: null,
+ subtitle: undefined,
+ login: undefined,
+ accountID: undefined,
  reportID: '',
- phoneNumber: null,
+ phoneNumber: undefined,
  isUnread: null,
  isUnreadWithMention: null,
- keyForList: null,
- searchText: null,
+ hasDraftComment: false,
+ keyForList: undefined,
+ searchText: undefined,
  isPinned: false,
  hasOutstandingChildRequest: false,
  isIOUReportOwner: null,

src/libs/TransactionUtils.ts

@@ -3,10 +3,12 @@ import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
 import Onyx from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
 import CONST from '@src/CONST';
+import type {TranslationPaths} from '@src/languages/types';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {RecentWaypoint, Report, TaxRate, TaxRates, TaxRatesWithDefault, Transaction, TransactionViolation} from '@src/types/onyx';
 import type {Comment, Receipt, TransactionChanges, TransactionPendingFieldsKey, Waypoint, WaypointCollection} from '@src/types/onyx/Transaction';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
+import type {IOURequestType} from './actions/IOU';
 import {isCorporateCard, isExpensifyCard} from './CardUtils';
 import DateUtils from './DateUtils';
 import * as Localize from './Localize';
@@ -45,22 +47,23 @@ function isDistanceRequest(transaction: OnyxEntry<Transaction>): boolean {
  return type === CONST.TRANSACTION.TYPE.CUSTOM_UNIT && customUnitName === CONST.CUSTOM_UNITS.NAME_DISTANCE;
 }
 
-function isScanRequest(transaction: Transaction): boolean {
+function isScanRequest(transaction: OnyxEntry<Transaction>): boolean {
  // This is used during the request creation flow before the transaction has been saved to the server
  if (lodashHas(transaction, 'iouRequestType')) {
- return transaction.iouRequestType === CONST.IOU.REQUEST_TYPE.SCAN;
+ return transaction?.iouRequestType === CONST.IOU.REQUEST_TYPE.SCAN;
  }
 
  return Boolean(transaction?.receipt?.source);
 }
 
-function getRequestType(transaction: Transaction): ValueOf<typeof CONST.IOU.REQUEST_TYPE> {
+function getRequestType(transaction: OnyxEntry<Transaction>): IOURequestType {
  if (isDistanceRequest(transaction)) {
  return CONST.IOU.REQUEST_TYPE.DISTANCE;
  }
  if (isScanRequest(transaction)) {
  return CONST.IOU.REQUEST_TYPE.SCAN;
  }
+
  return CONST.IOU.REQUEST_TYPE.MANUAL;
 }
 
@@ -452,12 +455,13 @@ function getCreated(transaction: OnyxEntry<Transaction>, dateFormat: string = CO
 /**
  * Returns the translation key to use for the header title
  */
-function getHeaderTitleTranslationKey(transaction: Transaction): string {
- const headerTitles = {
+function getHeaderTitleTranslationKey(transaction: OnyxEntry<Transaction>): TranslationPaths {
+ const headerTitles: Record<IOURequestType, TranslationPaths> = {
  [CONST.IOU.REQUEST_TYPE.DISTANCE]: 'tabSelector.distance',
  [CONST.IOU.REQUEST_TYPE.MANUAL]: 'tabSelector.manual',
  [CONST.IOU.REQUEST_TYPE.SCAN]: 'tabSelector.scan',
  };
+
  return headerTitles[getRequestType(transaction)];
 }
 
@@ -539,7 +543,11 @@ function getWaypointIndex(key: string): number {
 /**
  * Filters the waypoints which are valid and returns those
  */
-function getValidWaypoints(waypoints: WaypointCollection, reArrangeIndexes = false): WaypointCollection {
+function getValidWaypoints(waypoints: WaypointCollection | undefined, reArrangeIndexes = false): WaypointCollection {
+ if (!waypoints) {
+ return {};
+ }
+
  const sortedIndexes = Object.keys(waypoints)
  .map(getWaypointIndex)
  .sort((a, b) => a - b);