Merge pull request #81223 from ishpaul777/migrate-nextstep-updates-to-auth

Add messageKey handling as fallback

Author: chuckdries

src/components/MoneyReportHeader.tsx

@@ -1746,7 +1746,7 @@ function MoneyReportHeader({
             betas,
         });
 
-    const showNextStepBar = shouldShowNextStep && !!optimisticNextStep?.message?.length;
+    const showNextStepBar = shouldShowNextStep && !!(optimisticNextStep?.message?.length ?? (optimisticNextStep && 'messageKey' in optimisticNextStep));
     const showNextStepSkeleton = shouldShowNextStep && !optimisticNextStep && !!isLoadingInitialReportActions && !isOffline;
     const shouldShowMoreContent = showNextStepBar || showNextStepSkeleton || !!statusBarProps || isReportInSearch;
 

src/components/MoneyReportHeaderStatusBar.tsx

@@ -3,27 +3,41 @@ import {View} from 'react-native';
 import type {ValueOf} from 'type-fest';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
+import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import {parseMessage} from '@libs/NextStepUtils';
+import {buildNextStepMessage, parseMessage} from '@libs/NextStepUtils';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
+import type {ReportNextStep} from '@src/types/onyx/Report';
 import type ReportNextStepDeprecated from '@src/types/onyx/ReportNextStepDeprecated';
 import type IconAsset from '@src/types/utils/IconAsset';
 import Icon from './Icon';
 import RenderHTML from './RenderHTML';
 
+/** Combined type that accepts either the new format or the deprecated format */
+type NextStepData = ReportNextStep | ReportNextStepDeprecated;
+
 type MoneyReportHeaderStatusBarProps = {
-    /** The next step for the report (deprecated old format) */
-    nextStep: ReportNextStepDeprecated | undefined;
+    /** The next step for the report (supports both new and deprecated formats) */
+    nextStep: NextStepData | undefined;
 };
 
 type IconName = ValueOf<typeof CONST.NEXT_STEP.ICONS>;
 type IconMap = Record<IconName, IconAsset>;
 
+/**
+ * Type guard to check if the next step is in the deprecated format (has message array)
+ * We prioritize the old format first for backwards compatibility during migration.
+ */
+function isDeprecatedFormatNextStep(step: NextStepData): step is ReportNextStepDeprecated {
+    return 'message' in step && Array.isArray(step.message) && step.message.length > 0;
+}
+
 function MoneyReportHeaderStatusBar({nextStep}: MoneyReportHeaderStatusBarProps) {
     const styles = useThemeStyles();
     const theme = useTheme();
+    const {translate} = useLocalize();
     const icons = useMemoizedLazyExpensifyIcons(['Hourglass', 'Checkmark', 'Stopwatch', 'DotIndicator']);
     const iconMap: IconMap = useMemo(
         () => ({
@@ -35,11 +49,28 @@ function MoneyReportHeaderStatusBar({nextStep}: MoneyReportHeaderStatusBarProps)
         [icons],
     );
     const currentUserPersonalDetails = useCurrentUserPersonalDetails();
+    const currentUserAccountID = currentUserPersonalDetails.accountID;
     const currentUserEmail = currentUserPersonalDetails.login ?? '';
+
     const messageContent = useMemo(() => {
-        const messageArray = nextStep?.message;
-        return parseMessage(messageArray, currentUserEmail);
-    }, [nextStep?.message, currentUserEmail]);
+        if (!nextStep) {
+            return '';
+        }
+
+        // Handle old/deprecated format first (with message array) for backwards compatibility
+        if (isDeprecatedFormatNextStep(nextStep)) {
+            return parseMessage(nextStep.message, currentUserEmail);
+        }
+
+        // Fall back to new format (with messageKey)
+        if ('messageKey' in nextStep && nextStep.messageKey) {
+            return buildNextStepMessage(nextStep, translate, currentUserAccountID);
+        }
+
+        return '';
+    }, [nextStep, translate, currentUserAccountID, currentUserEmail]);
+
+    const iconFill = nextStep?.iconFill ?? theme.icon;
 
     return (
         <View style={[styles.dFlex, styles.flexRow, styles.alignItemsCenter, styles.overflowHidden, styles.w100, styles.headerStatusBarContainer]}>
@@ -48,7 +79,7 @@ function MoneyReportHeaderStatusBar({nextStep}: MoneyReportHeaderStatusBarProps)
                     src={(nextStep?.icon && iconMap?.[nextStep.icon]) ?? icons.Hourglass}
                     height={variables.iconSizeSmall}
                     width={variables.iconSizeSmall}
-                    fill={nextStep?.iconFill ?? theme.icon}
+                    fill={iconFill}
                 />
             </View>
             <View style={[styles.dFlex, styles.flexRow, styles.flexShrink1]}>

src/libs/DebugUtils.ts

@@ -544,6 +544,7 @@ function validateReportDraftProperty(key: keyof Report | keyof ReportNameValuePa
                 icon: 'string',
                 actorAccountID: 'number',
                 eta: 'object',
+                iconFill: 'string',
             });
         case 'tripData':
             return validateObject<ObjectElement<Report, 'tripData'>>(value, {

src/types/onyx/Report.ts

@@ -78,6 +78,9 @@ type ReportNextStep = {
         /** The ETA date time */
         dateTime?: string;
     };
+
+    /** The fill color of the icon */
+    iconFill?: string;
 };
 
 /** Model of report data */