Narrow confirmation leaves with selectors

src/components/MoneyRequestConfirmationList/sections/AmountField.tsx

@@ -15,7 +15,6 @@ import {convertToBackendAmount, convertToFrontendAmountAsString, getLocalizedCur
 import {calculateAmount} from '@libs/IOUUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import {shouldEnableNegative} from '@libs/ReportUtils';
-import {isAmountMissing} from '@libs/TransactionUtils';
 import {isParticipantP2P} from '@pages/iou/request/step/IOURequestStepAmount';
 import IOURequestStepCurrencyModal from '@pages/iou/request/step/IOURequestStepCurrencyModal';
 import {resetSplitShares, setDraftSplitTransaction, setSplitShares} from '@userActions/IOU/Split';
@@ -25,6 +24,8 @@ import type {TranslationPaths} from '@src/languages/types';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type * as OnyxTypes from '@src/types/onyx';
+import {amountSliceSelector} from './selectors';
+import useTransactionSelector from './useTransactionSelector';
 
 type AmountFieldProps = {
     action: IOUAction;
@@ -39,7 +40,6 @@ type AmountFieldProps = {
     shouldShowTimeRequestFields: boolean;
     shouldDisplayFieldError: boolean;
     formError: string;
-    transaction: OnyxEntry<OnyxTypes.Transaction>;
     transactionID: string | undefined;
     iouType: Exclude<IOUType, typeof CONST.IOU.TYPE.REQUEST | typeof CONST.IOU.TYPE.SEND>;
     reportID: string;
@@ -64,7 +64,6 @@ function AmountField({
     shouldShowTimeRequestFields,
     shouldDisplayFieldError,
     formError,
-    transaction,
     transactionID,
     iouType,
     reportID,
@@ -84,10 +83,15 @@ function AmountField({
     const amountInputRef = useRef<BaseTextInputRef | null>(null);
     const {didScreenTransitionEnd} = useScreenWrapperTransitionStatus();
 
+    const transactionSlice = useTransactionSelector(transactionID, amountSliceSelector, isEditingSplitBill);
+
+    const transactionForHandlers = transactionSlice as OnyxEntry<OnyxTypes.Transaction>;
+    const amountIsMissing = transactionSlice?.isAmountMissing ?? false;
+
     const [isCurrencyPickerVisible, setIsCurrencyPickerVisible] = useState(false);
 
     const isAmountFieldDisabled = didConfirm || isReadOnly || shouldShowTimeRequestFields || isDistanceRequest;
-    const firstParticipant = transaction?.participants?.at(0);
+    const firstParticipant = transactionSlice?.participants?.at(0);
     const isP2P = isNewManualExpenseFlowEnabled
         ? isParticipantP2P(getMoneyRequestParticipantsFromReport(report, currentUserPersonalDetails.accountID).at(0))
         : !!(firstParticipant?.accountID && !firstParticipant?.isPolicyExpenseChat);
@@ -106,8 +110,8 @@ function AmountField({
     // In the new manual expense flow the amount field starts empty (transaction.amount defaults to 0 before the user
     // touches it). Once the user explicitly sets an amount – including 0 – isAmountSet becomes true and we show the
     // real value. This avoids showing "$0.00" as a pre-filled default.
-    const transactionAmount = isNewManualExpenseFlowEnabled && !transaction?.isAmountSet ? '' : convertToFrontendAmountAsString(amount, decimals);
-    const allowNegative = shouldEnableNegative(report, policy, iouType, transaction?.participants);
+    const transactionAmount = isNewManualExpenseFlowEnabled && !transactionSlice?.isAmountSet ? '' : convertToFrontendAmountAsString(amount, decimals);
+    const allowNegative = shouldEnableNegative(report, policy, iouType, transactionSlice?.participants);
 
     // `autoFocus` on our TextInput only runs on mount. Closing and reopening the RHP often keeps the same mounted
     // instance, so autofocus does not run again. After `ScreenWrapper` finishes its entry transition the field is
@@ -156,10 +160,10 @@ function AmountField({
             if (!transactionID) {
                 return;
             }
-            const splitShares = splitDraftTransaction?.splitShares ?? transaction?.splitShares;
+            const splitShares = splitDraftTransaction?.splitShares ?? transactionSlice?.splitShares;
             const accountID = currentUserPersonalDetails.accountID ?? CONST.DEFAULT_NUMBER_ID;
             const newAccountIDs = Object.keys(splitShares ?? {}).map((key) => Number(key));
-            const oldAccountIDs = Object.keys(transaction?.splitShares ?? {}).map((key) => Number(key));
+            const oldAccountIDs = Object.keys(transactionSlice?.splitShares ?? {}).map((key) => Number(key));
             const accountIDs = [...new Set<number>([accountID, ...newAccountIDs, ...oldAccountIDs])];
 
             const participantsLength = newAccountIDs.includes(accountID) ? newAccountIDs.length - 1 : newAccountIDs.length;
@@ -186,18 +190,18 @@ function AmountField({
             return;
         }
 
-        if (iouType === CONST.IOU.TYPE.SPLIT && transaction) {
-            const shareAccountIDs = Object.keys(transaction.splitShares ?? {}).map(Number);
+        if (iouType === CONST.IOU.TYPE.SPLIT && transactionSlice) {
+            const shareAccountIDs = Object.keys(transactionSlice.splitShares ?? {}).map(Number);
             const participantAccountIDs =
-                shareAccountIDs.length > 0 ? shareAccountIDs : (transaction.participants ?? []).map((p) => p.accountID).filter((id): id is number => id !== undefined);
+                shareAccountIDs.length > 0 ? shareAccountIDs : (transactionSlice.participants ?? []).map((p) => p.accountID).filter((id): id is number => id !== undefined);
             if (participantAccountIDs.length > 0) {
-                setSplitShares(transaction, updatedAmount, updatedCurrency, participantAccountIDs, currentUserPersonalDetails.accountID);
+                setSplitShares(transactionForHandlers, updatedAmount, updatedCurrency, participantAccountIDs, currentUserPersonalDetails.accountID);
             }
             return;
         }
 
-        if (transaction?.splitShares) {
-            resetSplitShares(transaction, updatedAmount, updatedCurrency, currentUserPersonalDetails.accountID);
+        if (transactionSlice?.splitShares) {
+            resetSplitShares(transactionForHandlers, updatedAmount, updatedCurrency, currentUserPersonalDetails.accountID);
         }
     };
 
@@ -296,8 +300,8 @@ function AmountField({
                     style={[styles.moneyRequestMenuItem, styles.mt2]}
                     titleStyle={styles.moneyRequestConfirmationAmount}
                     disabled={didConfirm}
-                    brickRoadIndicator={shouldDisplayFieldError && isAmountMissing(transaction) ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined}
-                    errorText={shouldDisplayFieldError && isAmountMissing(transaction) ? translate('common.error.enterAmount') : ''}
+                    brickRoadIndicator={shouldDisplayFieldError && amountIsMissing ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined}
+                    errorText={shouldDisplayFieldError && amountIsMissing ? translate('common.error.enterAmount') : ''}
                     sentryLabel={CONST.SENTRY_LABEL.REQUEST_CONFIRMATION_LIST.AMOUNT_FIELD}
                 />
             )}

src/components/MoneyRequestConfirmationList/sections/AttendeeField.tsx

@@ -14,6 +14,8 @@ import type {IOUAction, IOUType} from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
 import ROUTES from '@src/ROUTES';
 import type * as OnyxTypes from '@src/types/onyx';
+import {attendeeSliceSelector} from './selectors';
+import useTransactionSelector from './useTransactionSelector';
 
 type AttendeeFieldProps = {
     formattedAmountPerAttendee: string;
@@ -23,17 +25,18 @@ type AttendeeFieldProps = {
     iouType: Exclude<IOUType, typeof CONST.IOU.TYPE.REQUEST | typeof CONST.IOU.TYPE.SEND>;
     reportID: string;
     formError: string;
-    transaction: OnyxEntry<OnyxTypes.Transaction>;
 };
 
-function AttendeeField({formattedAmountPerAttendee, isReadOnly, transactionID, action, iouType, reportID, formError, transaction}: AttendeeFieldProps) {
+function AttendeeField({formattedAmountPerAttendee, isReadOnly, transactionID, action, iouType, reportID, formError}: AttendeeFieldProps) {
     const styles = useThemeStyles();
     const {translate, localeCompare} = useLocalize();
     const currentUserPersonalDetails = useCurrentUserPersonalDetails();
     const personalDetailsList = usePersonalDetails();
     const shouldDisplayAttendeesError = formError === 'violations.missingAttendees';
 
-    const rawIouAttendees = getAttendees(transaction, currentUserPersonalDetails);
+    const attendeeSlice = useTransactionSelector(transactionID, attendeeSliceSelector);
+
+    const rawIouAttendees = getAttendees(attendeeSlice as OnyxEntry<OnyxTypes.Transaction>, currentUserPersonalDetails);
     const iouAttendees = enrichAndSortAttendees(rawIouAttendees, personalDetailsList, localeCompare);
 
     return (
@@ -42,7 +45,7 @@ function AttendeeField({formattedAmountPerAttendee, isReadOnly, transactionID, a
             shouldShowRightIcon={!isReadOnly}
             accessibilityLabel={`${translate('iou.attendees')}, ${Array.isArray(iouAttendees) ? getAttendeesListDisplayString(iouAttendees) : ''}`}
             description={`${translate('iou.attendees')} ${
-                iouAttendees?.length && iouAttendees.length > 1 && formattedAmountPerAttendee ? `\u00B7 ${formattedAmountPerAttendee} ${translate('common.perPerson')}` : ''
+                iouAttendees?.length && iouAttendees.length > 1 && formattedAmountPerAttendee ? `· ${formattedAmountPerAttendee} ${translate('common.perPerson')}` : ''
             }`}
             descriptionTextStyle={styles.textLabelSupportingNormal}
             titleComponent={

src/components/MoneyRequestConfirmationList/sections/CategoryField.tsx

@@ -6,12 +6,13 @@ import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {getDecodedLeafCategoryName} from '@libs/CategoryUtils';
 import Navigation from '@libs/Navigation/Navigation';
-import {getCategory, willFieldBeAutomaticallyFilled} from '@libs/TransactionUtils';
 import CONST from '@src/CONST';
 import type {IOUAction, IOUType} from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
 import ROUTES from '@src/ROUTES';
 import type * as OnyxTypes from '@src/types/onyx';
+import {categoryStateSelector} from './selectors';
+import useTransactionSelector from './useTransactionSelector';
 
 type CategoryFieldProps = {
     isCategoryRequired: boolean;
@@ -23,10 +24,10 @@ type CategoryFieldProps = {
     reportID: string;
     reportActionID: string | undefined;
     policy: OnyxEntry<OnyxTypes.Policy>;
-    transaction: OnyxEntry<OnyxTypes.Transaction>;
     formError: string;
     shouldNavigateToUpgradePath: boolean;
     shouldSelectPolicy: boolean;
+    isEditingSplitBill: boolean;
 };
 
 function CategoryField({
@@ -39,22 +40,25 @@ function CategoryField({
     reportID,
     reportActionID,
     policy,
-    transaction,
     formError,
     shouldNavigateToUpgradePath,
     shouldSelectPolicy,
+    isEditingSplitBill,
 }: CategoryFieldProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const icons = useMemoizedLazyExpensifyIcons(['Sparkles']);
 
+    const categoryState = useTransactionSelector(transactionID, categoryStateSelector, isEditingSplitBill);
+
     const shouldDisplayCategoryError = formError === 'violations.categoryOutOfPolicy';
-    const iouCategory = getCategory(transaction);
+    const iouCategory = categoryState?.category ?? '';
+    const willAutoFill = categoryState?.willAutoFill ?? false;
     const decodedCategoryName = getDecodedLeafCategoryName(iouCategory);
 
-    const getCategoryRightLabelIcon = () => (willFieldBeAutomaticallyFilled(transaction, 'category') ? icons.Sparkles : undefined);
+    const getCategoryRightLabelIcon = () => (willAutoFill ? icons.Sparkles : undefined);
     const getCategoryRightLabel = () => {
-        if (willFieldBeAutomaticallyFilled(transaction, 'category')) {
+        if (willAutoFill) {
             return translate('common.automatic');
         }
         if (isCategoryRequired) {

src/components/MoneyRequestConfirmationList/sections/DateField.tsx

@@ -1,15 +1,14 @@
 import {format} from 'date-fns';
 import React from 'react';
-import type {OnyxEntry} from 'react-native-onyx';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
-import {getCreated, isCreatedMissing} from '@libs/TransactionUtils';
 import CONST from '@src/CONST';
 import type {IOUAction, IOUType} from '@src/CONST';
 import ROUTES from '@src/ROUTES';
-import type * as OnyxTypes from '@src/types/onyx';
+import {dateStateSelector} from './selectors';
+import useTransactionSelector from './useTransactionSelector';
 
 type DateFieldProps = {
     shouldDisplayFieldError: boolean;
@@ -20,14 +19,17 @@ type DateFieldProps = {
     iouType: Exclude<IOUType, typeof CONST.IOU.TYPE.REQUEST | typeof CONST.IOU.TYPE.SEND>;
     reportID: string;
     reportActionID: string | undefined;
-    transaction: OnyxEntry<OnyxTypes.Transaction>;
+    isEditingSplitBill: boolean;
 };
 
-function DateField({shouldDisplayFieldError, didConfirm, isReadOnly, transactionID, action, iouType, reportID, reportActionID, transaction}: DateFieldProps) {
+function DateField({shouldDisplayFieldError, didConfirm, isReadOnly, transactionID, action, iouType, reportID, reportActionID, isEditingSplitBill}: DateFieldProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
 
-    const iouCreated = getCreated(transaction);
+    const dateState = useTransactionSelector(transactionID, dateStateSelector, isEditingSplitBill);
+
+    const iouCreated = dateState?.iouCreated ?? '';
+    const createdMissing = dateState?.isMissing ?? true;
 
     return (
         <MenuItemWithTopDescription
@@ -45,8 +47,8 @@ function DateField({shouldDisplayFieldError, didConfirm, isReadOnly, transaction
             }}
             disabled={didConfirm}
             interactive={!isReadOnly}
-            brickRoadIndicator={shouldDisplayFieldError && isCreatedMissing(transaction) ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined}
-            errorText={shouldDisplayFieldError && isCreatedMissing(transaction) ? translate('common.error.enterDate') : ''}
+            brickRoadIndicator={shouldDisplayFieldError && createdMissing ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined}
+            errorText={shouldDisplayFieldError && createdMissing ? translate('common.error.enterDate') : ''}
             sentryLabel={CONST.SENTRY_LABEL.REQUEST_CONFIRMATION_LIST.DATE_FIELD}
         />
     );

src/components/MoneyRequestConfirmationList/sections/DescriptionField.tsx

@@ -11,14 +11,15 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import {setMoneyRequestDescription} from '@libs/actions/IOU/MoneyRequest';
 import Navigation from '@libs/Navigation/Navigation';
 import Parser from '@libs/Parser';
-import {getDescription, hasReceipt} from '@libs/TransactionUtils';
 import variables from '@styles/variables';
 import {setDraftSplitTransaction} from '@userActions/IOU/Split';
 import CONST from '@src/CONST';
 import type {IOUAction, IOUType} from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type * as OnyxTypes from '@src/types/onyx';
+import {descriptionStateSelector} from './selectors';
+import useTransactionSelector from './useTransactionSelector';
 
 type DescriptionFieldProps = {
     isNewManualExpenseFlowEnabled: boolean;
@@ -31,7 +32,6 @@ type DescriptionFieldProps = {
     reportID: string;
     reportActionID: string | undefined;
     policy: OnyxEntry<OnyxTypes.Policy>;
-    transaction: OnyxEntry<OnyxTypes.Transaction>;
     isEditingSplitBill: boolean;
     onSubmitForm?: () => void;
 };
@@ -47,7 +47,6 @@ function DescriptionField({
     reportID,
     reportActionID,
     policy,
-    transaction,
     isEditingSplitBill,
     onSubmitForm,
 }: DescriptionFieldProps) {
@@ -56,9 +55,12 @@ function DescriptionField({
 
     const [splitDraftTransaction] = useOnyx(`${ONYXKEYS.COLLECTION.SPLIT_TRANSACTION_DRAFT}${transactionID}`);
 
+    const descriptionState = useTransactionSelector(transactionID, descriptionStateSelector, isEditingSplitBill);
+
     // `getDescription` returns raw `transaction.comment.comment`, which can be HTML for saved transactions.
     // We normalize to markdown so both the read-only and editable inputs receive a consistent format.
-    const iouComment = Parser.htmlToMarkdown(getDescription(transaction));
+    const iouComment = Parser.htmlToMarkdown(descriptionState?.description ?? '');
+    const transactionHasReceipt = descriptionState?.hasReceipt ?? false;
 
     const contextMenuStateValue = {
         anchor: null,
@@ -89,7 +91,7 @@ function DescriptionField({
             return;
         }
 
-        setMoneyRequestDescription(transactionID, newDescription, true, hasReceipt(transaction));
+        setMoneyRequestDescription(transactionID, newDescription, true, transactionHasReceipt);
     };
 
     return (

src/components/MoneyRequestConfirmationList/sections/MerchantField.tsx

@@ -1,21 +1,20 @@
 import React from 'react';
 import {View} from 'react-native';
-import type {OnyxEntry} from 'react-native-onyx';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import TextInput from '@components/TextInput';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {clearMoneyRequestMerchant, setMoneyRequestMerchant} from '@libs/actions/IOU/MoneyRequest';
 import Navigation from '@libs/Navigation/Navigation';
-import {getMerchant, hasReceipt} from '@libs/TransactionUtils';
 import {isInvalidMerchantValue, isValidInputLength} from '@libs/ValidationUtils';
 import {setDraftSplitTransaction} from '@userActions/IOU/Split';
 import CONST from '@src/CONST';
 import type {IOUAction, IOUType} from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import type * as OnyxTypes from '@src/types/onyx';
+import {merchantStateSelector} from './selectors';
+import useTransactionSelector from './useTransactionSelector';
 
 type MerchantFieldProps = {
     isMerchantRequired: boolean | undefined;
@@ -29,7 +28,6 @@ type MerchantFieldProps = {
     iouType: Exclude<IOUType, typeof CONST.IOU.TYPE.REQUEST | typeof CONST.IOU.TYPE.SEND>;
     reportID: string;
     reportActionID: string | undefined;
-    transaction: OnyxEntry<OnyxTypes.Transaction>;
     isEditingSplitBill: boolean;
 };
 
@@ -45,17 +43,19 @@ function MerchantField({
     iouType,
     reportID,
     reportActionID,
-    transaction,
     isEditingSplitBill,
 }: MerchantFieldProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
 
     const [splitDraftTransaction] = useOnyx(`${ONYXKEYS.COLLECTION.SPLIT_TRANSACTION_DRAFT}${transactionID}`);
 
-    const merchantValue = getMerchant(transaction);
+    const merchantState = useTransactionSelector(transactionID, merchantStateSelector, isEditingSplitBill);
+
+    const merchantValue = merchantState?.merchant ?? '';
     const displayMerchantValue = isInvalidMerchantValue(merchantValue) ? '' : merchantValue;
     const isMerchantEmpty = !displayMerchantValue;
+    const transactionHasReceipt = merchantState?.hasReceipt ?? false;
 
     // Determine if the merchant error should be displayed
     const merchantErrorText = (() => {
@@ -99,7 +99,7 @@ function MerchantField({
             return;
         }
 
-        setMoneyRequestMerchant(transactionID, newMerchant, true, hasReceipt(transaction));
+        setMoneyRequestMerchant(transactionID, newMerchant, true, transactionHasReceipt);
     };
 
     if (isNewManualExpenseFlowEnabled && !isReadOnly) {