From 480bdfa77836f5072068b50e4078f9e722187192 Mon Sep 17 00:00:00 2001
From: Yauheni Pasiukevich <pasyukevich@live.com>
Date: Thu, 7 Dec 2023 13:37:25 +0100
Subject: [PATCH] Migrate 'MoneyReportHeaderStatusBar.js' component to
 TypeScript

---
 src/ONYXKEYS.ts                               |  1 +
 ...sBar.js => MoneyReportHeaderStatusBar.tsx} | 14 ++---
 src/libs/NextStepUtils.ts                     |  6 +-
 src/types/onyx/ReportNextStep.ts              | 56 +++++++++++++++++++
 src/types/onyx/index.ts                       |  2 +
 5 files changed, 64 insertions(+), 15 deletions(-)
 rename src/components/{MoneyReportHeaderStatusBar.js => MoneyReportHeaderStatusBar.tsx} (80%)
 create mode 100644 src/types/onyx/ReportNextStep.ts

diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts
index 0cc7934ad007..f8d43748b0ae 100755
--- a/src/ONYXKEYS.ts
+++ b/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;
diff --git a/src/components/MoneyReportHeaderStatusBar.js b/src/components/MoneyReportHeaderStatusBar.tsx
similarity index 80%
rename from src/components/MoneyReportHeaderStatusBar.js
rename to src/components/MoneyReportHeaderStatusBar.tsx
index 687bc92ffbcd..8eaf67e3c96a 100644
--- a/src/components/MoneyReportHeaderStatusBar.js
+++ b/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;
diff --git a/src/libs/NextStepUtils.ts b/src/libs/NextStepUtils.ts
index b58f2af1eeac..f5031d476f20 100644
--- a/src/libs/NextStepUtils.ts
+++ b/src/libs/NextStepUtils.ts
@@ -1,9 +1,5 @@
 import Str from 'expensify-common/lib/str';
-
-type Message = {
-    text: string;
-    type?: string;
-};
+import type {Message} from '@src/types/onyx/ReportNextStep';
 
 function parseMessage(messages: Message[] | undefined) {
     let nextStepHTML = '';
diff --git a/src/types/onyx/ReportNextStep.ts b/src/types/onyx/ReportNextStep.ts
new file mode 100644
index 000000000000..b619319d8f91
--- /dev/null
+++ b/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};
diff --git a/src/types/onyx/index.ts b/src/types/onyx/index.ts
index 110bdb024a8c..62e474753745 100644
--- a/src/types/onyx/index.ts
+++ b/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';
@@ -107,6 +108,7 @@ export type {
     ReportActions,
     ReportActionsDrafts,
     ReportMetadata,
+    ReportNextStep,
     Request,
     Response,
     ScreenShareRequest,