Merge pull request #32655 from pasyukevich/feature/migrate-MoneyRepor…

…tHeaderStatusBar

[TS migration] Migrate 'MoneyReportHeaderStatusBar.js' component to TypeScript

src/ONYXKEYS.ts

@@ -460,6 +460,7 @@ type OnyxValues = {
     [ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_TAGS]: OnyxTypes.RecentlyUsedTags;
     [ONYXKEYS.COLLECTION.SELECTED_TAB]: string;
     [ONYXKEYS.COLLECTION.PRIVATE_NOTES_DRAFT]: string;
+    [ONYXKEYS.COLLECTION.NEXT_STEP]: OnyxTypes.ReportNextStep;
 
     // Forms
     [ONYXKEYS.FORMS.ADD_DEBIT_CARD_FORM]: OnyxTypes.AddDebitCardForm;

src/components/MoneyReportHeaderStatusBar.js → src/components/MoneyReportHeaderStatusBar.tsx

@@ -3,20 +3,16 @@ import {Text, View} from 'react-native';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as NextStepUtils from '@libs/NextStepUtils';
-import nextStepPropTypes from '@pages/nextStepPropTypes';
 import CONST from '@src/CONST';
+import ReportNextStep from '@src/types/onyx/ReportNextStep';
 import RenderHTML from './RenderHTML';
 
-const propTypes = {
+type MoneyReportHeaderStatusBarProps = {
     /** The next step for the report */
-    nextStep: nextStepPropTypes,
+    nextStep: ReportNextStep;
 };
 
-const defaultProps = {
-    nextStep: {},
-};
-
-function MoneyReportHeaderStatusBar({nextStep}) {
+function MoneyReportHeaderStatusBar({nextStep}: MoneyReportHeaderStatusBarProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
 
@@ -38,7 +34,5 @@ function MoneyReportHeaderStatusBar({nextStep}) {
 }
 
 MoneyReportHeaderStatusBar.displayName = 'MoneyReportHeaderStatusBar';
-MoneyReportHeaderStatusBar.propTypes = propTypes;
-MoneyReportHeaderStatusBar.defaultProps = defaultProps;
 
 export default MoneyReportHeaderStatusBar;

src/libs/NextStepUtils.ts

@@ -1,11 +1,7 @@
 import Str from 'expensify-common/lib/str';
+import type {Message} from '@src/types/onyx/ReportNextStep';
 import EmailUtils from './EmailUtils';
 
-type Message = {
-    text: string;
-    type?: string;
-};
-
 function parseMessage(messages: Message[] | undefined) {
     let nextStepHTML = '';
 

src/types/onyx/ReportNextStep.ts

@@ -0,0 +1,56 @@
+type Message = {
+    text: string;
+    type?: string;
+    action?: string;
+};
+
+type DataOptions = {
+    canSeeACHOption?: boolean;
+    isManualReimbursementEnabled?: boolean;
+    maskedLockedAccountNumber?: string;
+    preferredWithdrawalDeleted?: boolean;
+};
+
+type Button = {
+    text?: string;
+    tooltip?: string;
+    disabled?: boolean;
+    hidden?: boolean;
+    data?: DataOptions;
+};
+
+type ReportNextStep = {
+    /** The message parts of the next step */
+    message?: Message[];
+
+    /** The title for the next step */
+    title?: string;
+
+    /** Whether the user should take some sort of action in order to unblock the report */
+    requiresUserAction?: boolean;
+
+    /** The type of next step */
+    type: 'alert' | 'neutral' | null;
+
+    /** If the "Undo submit" button should be visible */
+    showUndoSubmit?: boolean;
+
+    /** Deprecated - If the next step should be displayed on mobile, related to OldApp */
+    showForMobile?: boolean;
+
+    /** If the next step should be displayed at the expense level */
+    showForExpense?: boolean;
+
+    /** An optional alternate message to display on expenses instead of what is provided in the "message" field */
+    expenseMessage?: Message[];
+
+    /** The next person in the approval chain of the report */
+    nextReceiver?: string;
+
+    /** An array of buttons to be displayed next to the next step */
+    buttons?: Record<string, Button>;
+};
+
+export default ReportNextStep;
+
+export type {Message};

src/types/onyx/index.ts

@@ -37,6 +37,7 @@ import ReportAction, {ReportActions} from './ReportAction';
 import ReportActionReactions from './ReportActionReactions';
 import ReportActionsDrafts from './ReportActionsDrafts';
 import ReportMetadata from './ReportMetadata';
+import ReportNextStep from './ReportNextStep';
 import ReportUserIsTyping from './ReportUserIsTyping';
 import Request from './Request';
 import Response from './Response';
@@ -106,6 +107,7 @@ export type {
     ReportActions,
     ReportActionsDrafts,
     ReportMetadata,
+    ReportNextStep,
     Request,
     Response,
     ScreenShareRequest,