Manual expense flow UI refactor r1

src/CONST/index.ts

@@ -779,6 +779,7 @@ const CONST = {
         PERSONAL_CARD_IMPORT: 'personalCardImport',
         SUGGESTED_FOLLOWUPS: 'suggestedFollowups',
         FREEZE_CARD: 'freezeCard',
+        NEW_MANUAL_EXPENSE_FLOW: 'newManualExpenseFlow',
     },
     BUTTON_STATES: {
         DEFAULT: 'default',

src/components/AmountTextInput.tsx

@@ -46,6 +46,9 @@ type AmountTextInputProps = {
 
     /** A unique identifier for this text input for testing purposes */
     testID?: string;
+
+    /** Component to render on the right hand side of the input - only shown if clear button is not rendered */
+    rightHandSideComponent?: React.ReactNode;
 } & Pick<BaseTextInputProps, 'autoFocus' | 'autoGrowExtraSpace' | 'submitBehavior' | 'ref' | 'onFocus' | 'onBlur' | 'disabled' | 'accessibilityLabel'>;
 
 function AmountTextInput({
@@ -64,6 +67,7 @@ function AmountTextInput({
     ref,
     disabled,
     accessibilityLabel,
+    rightHandSideComponent,
     ...rest
 }: AmountTextInputProps) {
     const navigation = useNavigation();
@@ -99,6 +103,7 @@ function AmountTextInput({
             disableKeyboardShortcuts
             shouldUseFullInputHeight
             shouldApplyPaddingToContainer={shouldApplyPaddingToContainer}
+            rightHandSideComponent={rightHandSideComponent}
             navigation={navigation}
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...rest}

src/components/MoneyRequestConfirmationList.tsx

@@ -88,7 +88,7 @@ import EducationalTooltip from './Tooltip/EducationalTooltip';
 
 type MoneyRequestConfirmationListProps = {
     /** Callback to inform parent modal of success */
-    onConfirm?: (selectedParticipants: Participant[]) => void;
+    onConfirm?: (selectedParticipants: Participant[], amount?: number, currency?: string) => void;
 
     /** Callback to parent modal to pay someone */
     onSendMoney?: (paymentMethod: PaymentMethodType | undefined) => void;
@@ -290,6 +290,7 @@ function MoneyRequestConfirmationList({
     const [lastSelectedDistanceRates] = useOnyx(ONYXKEYS.NVP_LAST_SELECTED_DISTANCE_RATES);
     const {getCurrencySymbol, getCurrencyDecimals} = useCurrencyListActions();
     const {isBetaEnabled} = usePermissions();
+    const isNewManualExpenseFlowEnabled = isBetaEnabled(CONST.BETAS.NEW_MANUAL_EXPENSE_FLOW);
     const {isDelegateAccessRestricted} = useDelegateNoAccessState();
     const {showDelegateNoAccessModal} = useDelegateNoAccessActions();
 
@@ -386,10 +387,17 @@ function MoneyRequestConfirmationList({
 
     const distance = getDistanceInMeters(transaction, unit);
     const prevDistance = usePrevious(distance);
+    // For the new manual expense flow (beta), track the latest amount/currency the user has typed
+    // using refs rather than state to avoid re-rendering 20+ Onyx-watching components on every
+    // keystroke. The refs are only read once on final submission to persist the value to Onyx.
+    const pendingAmountRef = useRef<number | null>(iouAmount);
+    const pendingCurrencyRef = useRef<string>(iouCurrencyCode ?? CONST.CURRENCY.USD);
 
-    const shouldCalculateDistanceAmount = isDistanceRequest && (iouAmount === 0 || prevRate !== rate || prevDistance !== distance || prevCurrency !== currency || prevUnit !== unit);
+    const shouldCalculateDistanceAmount =
+        !pendingAmountRef.current && isDistanceRequest && (iouAmount === 0 || prevRate !== rate || prevDistance !== distance || prevCurrency !== currency || prevUnit !== unit);
 
-    const shouldCalculatePerDiemAmount = isPerDiemRequest && (iouAmount === 0 || JSON.stringify(prevSubRates) !== JSON.stringify(subRates) || prevCurrency !== currency);
+    const shouldCalculatePerDiemAmount =
+        !pendingAmountRef.current && isPerDiemRequest && (iouAmount === 0 || JSON.stringify(prevSubRates) !== JSON.stringify(subRates) || prevCurrency !== currency);
 
     const hasRoute = hasRouteUtil(transaction, isDistanceRequest);
     const isDistanceRequestWithPendingRoute = isDistanceRequest && (!hasRoute || !rate) && !isMovingTransactionFromTrackExpense;
@@ -400,9 +408,11 @@ function MoneyRequestConfirmationList({
 
     if (shouldCalculateDistanceAmount) {
         amountToBeUsed = distanceRequestAmount;
+        pendingCurrencyRef.current = currency;
     } else if (shouldCalculatePerDiemAmount) {
         const perDiemRequestAmount = computePerDiemExpenseAmount({subRates});
         amountToBeUsed = perDiemRequestAmount;
+        pendingCurrencyRef.current = currency;
     }
 
     let formattedAmount = convertToDisplayString(amountToBeUsed, isDistanceRequest ? currency : iouCurrencyCode);
@@ -422,6 +432,14 @@ function MoneyRequestConfirmationList({
     const [didConfirmSplit, setDidConfirmSplit] = useState(false);
     const [showMoreFields, setShowMoreFields] = useState(false);
 
+    // Callbacks passed to the footer to capture the user's edits without triggering re-renders
+    const handleAmountChange = useCallback((value: number | null) => {
+        pendingAmountRef.current = value;
+    }, []);
+    const handleCurrencyChange = useCallback((value: string) => {
+        pendingCurrencyRef.current = value;
+    }, []);
+
     useEffect(() => {
         setShowMoreFields(false);
     }, [transactionID]);
@@ -604,20 +622,22 @@ function MoneyRequestConfirmationList({
             }
         } else if (isTypeTrackExpense) {
             text = translate('iou.createExpense');
-            if (iouAmount !== 0) {
+            if (iouAmount !== 0 && !isNewManualExpenseFlowEnabled) {
                 text = translate('iou.createExpenseWithAmount', {amount: formattedAmount});
             }
         } else if (isTypeSplit && iouAmount === 0) {
             text = translate('iou.splitExpense');
         } else if ((receiptPath && isTypeRequest) || isDistanceRequestWithPendingRoute || isPerDiemRequest) {
             text = translate('iou.createExpense');
-            if (iouAmount !== 0) {
+            if (iouAmount !== 0 && !isNewManualExpenseFlowEnabled) {
                 text = translate('iou.createExpenseWithAmount', {amount: formattedAmount});
             }
         } else if (isTypeSplit) {
             text = translate('iou.splitAmount', formattedAmount);
         } else if (iouAmount === 0) {
             text = translate('iou.createExpense');
+        } else if (isNewManualExpenseFlowEnabled) {
+            text = translate('iou.createExpense');
         } else {
             text = translate('iou.createExpenseWithAmount', {amount: formattedAmount});
         }
@@ -641,6 +661,7 @@ function MoneyRequestConfirmationList({
         policy,
         translate,
         formattedAmount,
+        isNewManualExpenseFlowEnabled,
     ]);
 
     const onSplitShareChange = useCallback(
@@ -1000,6 +1021,15 @@ function MoneyRequestConfirmationList({
                 setFormError('iou.error.noParticipantSelected');
                 return;
             }
+
+            const amountForValidation = isNewManualExpenseFlowEnabled ? pendingAmountRef.current : iouAmount;
+            const isAmountMissingForManualFlow = amountForValidation === null || amountForValidation === undefined;
+
+            if (iouType !== CONST.IOU.TYPE.PAY && isNewManualExpenseFlowEnabled && isAmountMissingForManualFlow) {
+                setFormError('common.error.invalidAmount');
+                return;
+            }
+
             if (!isEditingSplitBill && isMerchantRequired && (isMerchantEmpty || (shouldDisplayFieldError && isMerchantMissing(transaction)))) {
                 setFormError('iou.error.invalidMerchant');
                 return;
@@ -1054,17 +1084,21 @@ function MoneyRequestConfirmationList({
             if (iouType !== CONST.IOU.TYPE.PAY) {
                 // validate the amount for distance expenses
                 const decimals = getCurrencyDecimals(iouCurrencyCode);
-                if (isDistanceRequest && !isDistanceRequestWithPendingRoute && !validateAmount(String(iouAmount), decimals, CONST.IOU.DISTANCE_REQUEST_AMOUNT_MAX_LENGTH)) {
+                if (
+                    isDistanceRequest &&
+                    !isDistanceRequestWithPendingRoute &&
+                    !validateAmount(String(isNewManualExpenseFlowEnabled ? pendingAmountRef.current : iouAmount), decimals, CONST.IOU.DISTANCE_REQUEST_AMOUNT_MAX_LENGTH)
+                ) {
                     setFormError('common.error.invalidAmount');
                     return;
                 }
 
-                if (isDistanceRequest && Math.abs(iouAmount) > CONST.IOU.MAX_SAFE_AMOUNT) {
+                if (isDistanceRequest && Math.abs(isNewManualExpenseFlowEnabled ? (pendingAmountRef.current ?? 0) : iouAmount) > CONST.IOU.MAX_SAFE_AMOUNT) {
                     setFormError('iou.error.distanceAmountTooLarge');
                     return;
                 }
 
-                if (isTimeRequest && !isValidTimeExpenseAmount(iouAmount, iouCurrencyCode, decimals)) {
+                if (isTimeRequest && !isValidTimeExpenseAmount(isNewManualExpenseFlowEnabled ? (pendingAmountRef.current ?? 0) : iouAmount, iouCurrencyCode, decimals)) {
                     setFormError('iou.timeTracking.amountTooLargeError');
                     return;
                 }
@@ -1091,7 +1125,12 @@ function MoneyRequestConfirmationList({
                     return;
                 }
 
-                onConfirm?.(selectedParticipants);
+                // For the new manual expense flow (beta) the user edits amount/currency inline.
+                // Pass the pending values directly through the callback so the caller can use
+                // them immediately — bypassing the Onyx → React state propagation delay that
+                // would otherwise cause requestMoney to read the stale draft value.
+                // Non-beta flows leave the refs as null, so the caller falls back to item.amount.
+                onConfirm?.(selectedParticipants, pendingAmountRef.current ?? undefined, pendingCurrencyRef.current ?? undefined);
             } else {
                 if (!paymentMethod) {
                     return;
@@ -1127,6 +1166,7 @@ function MoneyRequestConfirmationList({
             iouCurrencyCode,
             isDistanceRequest,
             isDistanceRequestWithPendingRoute,
+            isNewManualExpenseFlowEnabled,
             iouAmount,
             formError,
             onConfirm,
@@ -1258,7 +1298,9 @@ function MoneyRequestConfirmationList({
         confirm,
         iouCurrencyCode,
         policyID,
+        reportID,
         isConfirmed,
+        isConfirming,
         splitOrRequestOptions,
         errorMessage,
         expensesNumber,
@@ -1270,8 +1312,6 @@ function MoneyRequestConfirmationList({
         styles.productTrainingTooltipWrapper,
         shouldShowProductTrainingTooltip,
         renderProductTrainingTooltip,
-        isConfirming,
-        reportID,
     ]);
 
     const isCompactMode = useMemo(() => !showMoreFields && isScanRequest, [isScanRequest, showMoreFields]);
@@ -1291,6 +1331,7 @@ function MoneyRequestConfirmationList({
                 currency={currency}
                 didConfirm={!!didConfirm}
                 distance={distance}
+                amount={amountToBeUsed}
                 formattedAmount={formattedAmount}
                 formattedAmountPerAttendee={formattedAmountPerAttendee}
                 formError={formError}
@@ -1346,6 +1387,8 @@ function MoneyRequestConfirmationList({
                 isDescriptionRequired={isDescriptionRequired}
                 showMoreFields={showMoreFields}
                 setShowMoreFields={setShowMoreFields}
+                onAmountChange={handleAmountChange}
+                onCurrencyChange={handleCurrencyChange}
             />
         </View>
     );