Decompose ReportActionCompose into compound Composer component

cspell.json

@@ -902,7 +902,9 @@
         "Synovus",
         "Wallester",
         "Wintrust",
-        "Zürcher"
+        "Zürcher",
+        "CARDFROZEN",
+        "CARDUNFROZEN"
     ],
     "ignorePaths": [
         "src/languages/de.ts",

package.json

@@ -179,7 +179,7 @@
     "react-native-localize": "^3.5.4",
     "react-native-nitro-modules": "0.29.4",
     "react-native-nitro-sqlite": "9.2.0",
-    "react-native-onyx": "3.0.54",
+    "react-native-onyx": "3.0.57",
     "react-native-pager-view": "8.0.0",
     "react-native-pdf": "7.0.2",
     "react-native-permissions": "^5.4.0",

src/CONST/index.ts

@@ -1394,6 +1394,8 @@ const CONST = {
                 CARD_REPLACED_VIRTUAL: 'CARDREPLACEDVIRTUAL',
                 CARD_REPLACED: 'CARDREPLACED',
                 CARD_ASSIGNED: 'CARDASSIGNED',
+                CARD_FROZEN: 'CARDFROZEN',
+                CARD_UNFROZEN: 'CARDUNFROZEN',
                 PERSONAL_CARD_CONNECTION_BROKEN: 'PERSONALCARDCONNECTIONBROKEN',
                 CHANGE_FIELD: 'CHANGEFIELD', // OldDot Action
                 CHANGE_POLICY: 'CHANGEPOLICY',

src/components/EmojiPicker/EmojiPicker.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react';
+import React, {Activity, useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react';
 import type {ForwardedRef, RefObject} from 'react';
 import {Dimensions, View} from 'react-native';
 import type {Emoji} from '@assets/emojis/types';
@@ -236,45 +236,47 @@ function EmojiPicker({viewportOffsetTop, ref}: EmojiPickerProps) {
     }, [isEmojiPickerVisible, shouldUseNarrowLayout, emojiPopoverAnchorOrigin, getEmojiPopoverAnchor, hideEmojiPicker]);
 
     return (
-        <PopoverWithMeasuredContent
-            shouldHandleNavigationBack={isMobileChrome()}
-            isVisible={isEmojiPickerVisible}
-            onClose={hideEmojiPicker}
-            onModalShow={focusEmojiSearchInput}
-            onModalHide={handleModalHide}
-            shouldSetModalVisibility={false}
-            anchorPosition={{
-                vertical: emojiPopoverAnchorPosition.vertical,
-                horizontal: emojiPopoverAnchorPosition.horizontal,
-            }}
-            anchorRef={getEmojiPopoverAnchor() as RefObject<View | HTMLDivElement>}
-            withoutOverlay={isWithoutOverlay}
-            popoverDimensions={{
-                width: CONST.EMOJI_PICKER_SIZE.WIDTH,
-                height: CONST.EMOJI_PICKER_SIZE.HEIGHT,
-            }}
-            anchorAlignment={emojiPopoverAnchorOrigin}
-            outerStyle={StyleUtils.getOuterModalStyle(windowHeight, viewportOffsetTop)}
-            innerContainerStyle={styles.popoverInnerContainer}
-            anchorDimensions={emojiAnchorDimension.current}
-            avoidKeyboard
-            shouldSwitchPositionIfOverflow
-            shouldEnableNewFocusManagement
-            restoreFocusType={CONST.MODAL.RESTORE_FOCUS_TYPE.DELETE}
-            shouldSkipRemeasurement
-        >
-            <FocusTrapForModal active={isEmojiPickerVisible}>
-                <View>
-                    <EmojiPickerMenu
-                        onEmojiSelected={selectEmoji}
-                        activeEmoji={activeEmoji.current}
-                        ref={(el) => {
-                            emojiSearchInput.current = el;
-                        }}
-                    />
-                </View>
-            </FocusTrapForModal>
-        </PopoverWithMeasuredContent>
+        <Activity mode={isEmojiPickerVisible ? 'visible' : 'hidden'}>
+            <PopoverWithMeasuredContent
+                shouldHandleNavigationBack={isMobileChrome()}
+                isVisible={isEmojiPickerVisible}
+                onClose={hideEmojiPicker}
+                onModalShow={focusEmojiSearchInput}
+                onModalHide={handleModalHide}
+                shouldSetModalVisibility={false}
+                anchorPosition={{
+                    vertical: emojiPopoverAnchorPosition.vertical,
+                    horizontal: emojiPopoverAnchorPosition.horizontal,
+                }}
+                anchorRef={getEmojiPopoverAnchor() as RefObject<View | HTMLDivElement>}
+                withoutOverlay={isWithoutOverlay}
+                popoverDimensions={{
+                    width: CONST.EMOJI_PICKER_SIZE.WIDTH,
+                    height: CONST.EMOJI_PICKER_SIZE.HEIGHT,
+                }}
+                anchorAlignment={emojiPopoverAnchorOrigin}
+                outerStyle={StyleUtils.getOuterModalStyle(windowHeight, viewportOffsetTop)}
+                innerContainerStyle={styles.popoverInnerContainer}
+                anchorDimensions={emojiAnchorDimension.current}
+                avoidKeyboard
+                shouldSwitchPositionIfOverflow
+                shouldEnableNewFocusManagement
+                restoreFocusType={CONST.MODAL.RESTORE_FOCUS_TYPE.DELETE}
+                shouldSkipRemeasurement
+            >
+                <FocusTrapForModal active={isEmojiPickerVisible}>
+                    <View>
+                        <EmojiPickerMenu
+                            onEmojiSelected={selectEmoji}
+                            activeEmoji={activeEmoji.current}
+                            ref={(el) => {
+                                emojiSearchInput.current = el;
+                            }}
+                        />
+                    </View>
+                </FocusTrapForModal>
+            </PopoverWithMeasuredContent>
+        </Activity>
     );
 }
 

src/components/MoneyReportHeaderPrimaryAction/PayPrimaryAction.tsx

@@ -6,6 +6,7 @@ import AnimatedSettlementButton from '@components/SettlementButton/AnimatedSettl
 import type {PaymentActionParams} from '@components/SettlementButton/types';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
 import useNetwork from '@hooks/useNetwork';
+import useNonReimbursablePaymentModal from '@hooks/useNonReimbursablePaymentModal';
 import useOnyx from '@hooks/useOnyx';
 import useParticipantsInvoiceReport from '@hooks/useParticipantsInvoiceReport';
 import usePolicy from '@hooks/usePolicy';
@@ -14,7 +15,13 @@ import useTransactionsAndViolationsForReport from '@hooks/useTransactionsAndViol
 import {search} from '@libs/actions/Search';
 import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
 import {getTotalAmountForIOUReportPreviewButton} from '@libs/MoneyRequestReportUtils';
-import {hasHeldExpenses as hasHeldExpensesReportUtils, hasUpdatedTotal, isAllowedToApproveExpenseReport, isInvoiceReport as isInvoiceReportUtil} from '@libs/ReportUtils';
+import {
+    hasHeldExpenses as hasHeldExpensesReportUtils,
+    hasOnlyNonReimbursableTransactions,
+    hasUpdatedTotal,
+    isAllowedToApproveExpenseReport,
+    isInvoiceReport as isInvoiceReportUtil,
+} from '@libs/ReportUtils';
 import {isExpensifyCardTransaction, isPending} from '@libs/TransactionUtils';
 import {canApproveIOU, canIOUBePaid as canIOUBePaidAction, payInvoice, payMoneyRequest} from '@userActions/IOU';
 import CONST from '@src/CONST';
@@ -76,9 +83,12 @@ function PayPrimaryAction({
     const hasOnlyPendingTransactions = transactions.length > 0 && transactions.every((t) => isExpensifyCardTransaction(t) && isPending(t));
 
     const canIOUBePaid = canIOUBePaidAction(moneyRequestReport, chatReport, policy, bankAccountList, transaction ? [transaction] : undefined, false, undefined, invoiceReceiverPolicy);
-    const onlyShowPayElsewhere =
-        !canIOUBePaid && canIOUBePaidAction(moneyRequestReport, chatReport, policy, bankAccountList, transaction ? [transaction] : undefined, true, undefined, invoiceReceiverPolicy);
-    const shouldShowPayButton = isPaidAnimationRunning || canIOUBePaid || onlyShowPayElsewhere;
+    const reportHasOnlyNonReimbursableTransactions = hasOnlyNonReimbursableTransactions(moneyRequestReport?.reportID, transactions);
+    const {showNonReimbursablePaymentErrorModal, shouldBlockDirectPayment, nonReimbursablePaymentErrorDecisionModal} = useNonReimbursablePaymentModal(moneyRequestReport, transactions);
+    const onlyShowPayElsewhere = reportHasOnlyNonReimbursableTransactions
+        ? false
+        : !canIOUBePaid && canIOUBePaidAction(moneyRequestReport, chatReport, policy, bankAccountList, transaction ? [transaction] : undefined, true, undefined, invoiceReceiverPolicy);
+    const shouldShowPayButton = isPaidAnimationRunning || canIOUBePaid || onlyShowPayElsewhere || reportHasOnlyNonReimbursableTransactions;
     const shouldShowApproveButton = (canApproveIOU(moneyRequestReport, policy, reportMetadata, transactions) && !hasOnlyPendingTransactions) || isApprovedAnimationRunning;
     const shouldDisableApproveButton = shouldShowApproveButton && !isAllowedToApproveExpenseReport(moneyRequestReport);
     const canAllowSettlement = hasUpdatedTotal(moneyRequestReport, policy);
@@ -94,6 +104,10 @@ function PayPrimaryAction({
         if (!type || !chatReport) {
             return;
         }
+        if (shouldBlockDirectPayment(type)) {
+            showNonReimbursablePaymentErrorModal();
+            return;
+        }
         if (isDelegateAccessRestricted) {
             showDelegateNoAccessModal();
         } else if (isAnyTransactionOnHold) {
@@ -149,26 +163,29 @@ function PayPrimaryAction({
     };
 
     return (
-        <AnimatedSettlementButton
-            isPaidAnimationRunning={isPaidAnimationRunning}
-            isApprovedAnimationRunning={isApprovedAnimationRunning}
-            onAnimationFinish={stopAnimation}
-            formattedAmount={totalAmount}
-            canIOUBePaid
-            onlyShowPayElsewhere={onlyShowPayElsewhere}
-            currency={moneyRequestReport?.currency}
-            confirmApproval={confirmApproval}
-            policyID={moneyRequestReport?.policyID}
-            chatReportID={chatReport?.reportID}
-            iouReport={moneyRequestReport}
-            onPress={confirmPayment}
-            enablePaymentsRoute={ROUTES.ENABLE_PAYMENTS}
-            shouldHidePaymentOptions={!shouldShowPayButton}
-            shouldShowApproveButton={shouldShowApproveButton}
-            shouldDisableApproveButton={shouldDisableApproveButton}
-            isDisabled={isOffline && !canAllowSettlement}
-            isLoading={!isOffline && !canAllowSettlement}
-        />
+        <>
+            <AnimatedSettlementButton
+                isPaidAnimationRunning={isPaidAnimationRunning}
+                isApprovedAnimationRunning={isApprovedAnimationRunning}
+                onAnimationFinish={stopAnimation}
+                formattedAmount={totalAmount}
+                canIOUBePaid
+                onlyShowPayElsewhere={onlyShowPayElsewhere}
+                currency={moneyRequestReport?.currency}
+                confirmApproval={confirmApproval}
+                policyID={moneyRequestReport?.policyID}
+                chatReportID={chatReport?.reportID}
+                iouReport={moneyRequestReport}
+                onPress={confirmPayment}
+                enablePaymentsRoute={ROUTES.ENABLE_PAYMENTS}
+                shouldHidePaymentOptions={!shouldShowPayButton}
+                shouldShowApproveButton={shouldShowApproveButton}
+                shouldDisableApproveButton={shouldDisableApproveButton}
+                isDisabled={isOffline && !canAllowSettlement}
+                isLoading={!isOffline && !canAllowSettlement}
+            />
+            {nonReimbursablePaymentErrorDecisionModal}
+        </>
     );
 }
 

src/components/TransactionItemRow/index.tsx

@@ -280,14 +280,14 @@ function TransactionItemRow({
 
     const totalPerAttendee = useMemo(() => {
         const attendeesCount = transactionAttendees.length ?? 0;
-        const totalAmount = getAmount(transactionItem);
+        const totalAmount = getAmount(transactionItem, isExpenseReport(report));
 
         if (!attendeesCount || totalAmount === undefined) {
             return undefined;
         }
 
         return totalAmount / attendeesCount;
-    }, [transactionAttendees.length, transactionItem]);
+    }, [report, transactionAttendees.length, transactionItem]);
 
     const renderColumn = (column: SearchColumnType): React.ReactNode => {
         switch (column) {

src/hooks/useDeleteTransactions.ts

@@ -200,6 +200,7 @@ function useDeleteTransactions({report, reportActions, policy}: UseDeleteTransac
                     selectedTransactionIDs: transactionIDs,
                     allTransactionViolationsParam: transactionViolations,
                     currentUserAccountID: currentUserPersonalDetails.accountID,
+                    currentUserEmail: currentUserPersonalDetails.email ?? '',
                 });
                 deletedTransactionIDs.push(transactionID);
                 if (action.childReportID) {

src/libs/actions/IOU/index.ts

@@ -872,6 +872,7 @@
     selectedTransactionIDs?: string[];
     allTransactionViolationsParam: OnyxCollection<OnyxTypes.TransactionViolations>;
     currentUserAccountID: number;
+    currentUserEmail: string;
 };
 
 type PayMoneyRequestFunctionParams = {
@@ -8608,6 +8609,7 @@
     selectedTransactionIDs,
     allTransactionViolationsParam,
     currentUserAccountID,
+    currentUserEmail,
 }: DeleteMoneyRequestFunctionParams) {
     if (!transactionID) {
         return;
@@ -8691,14 +8693,7 @@
             onyxMethod: Onyx.METHOD.MERGE,
             key: `${ONYXKEYS.COLLECTION.REPORT}${chatReport?.reportID}`,
             value: {
-                hasOutstandingChildRequest: hasOutstandingChildRequest(
-                    chatReport,
-                    updatedIOUReport,
-                    deprecatedCurrentUserEmail,
-                    currentUserAccountID,
-                    allTransactionViolationsParam,
-                    undefined,
-                ),
+                hasOutstandingChildRequest: hasOutstandingChildRequest(chatReport, updatedIOUReport, currentUserEmail, currentUserAccountID, allTransactionViolationsParam, undefined),
             },
         });
     }
@@ -8717,14 +8712,7 @@
                 onyxMethod: Onyx.METHOD.MERGE,
                 key: `${ONYXKEYS.COLLECTION.REPORT}${chatReport?.reportID}`,
                 value: {
-                    hasOutstandingChildRequest: hasOutstandingChildRequest(
-                        chatReport,
-                        iouReport?.reportID,
-                        deprecatedCurrentUserEmail,
-                        currentUserAccountID,
-                        allTransactionViolationsParam,
-                        undefined,
-                    ),
+                    hasOutstandingChildRequest: hasOutstandingChildRequest(chatReport, iouReport?.reportID, currentUserEmail, currentUserAccountID, allTransactionViolationsParam, undefined),
                     iouReportID: null,
                     ...optimisticLastReportData,
                 },
@@ -8936,6 +8924,7 @@
             isSingleTransactionView,
             allTransactionViolationsParam,
             currentUserAccountID,
+            currentUserEmail: deprecatedCurrentUserEmail,
         });
         return urlToNavigateBack;
     }

src/libs/actions/Search.ts

@@ -948,6 +948,7 @@ function bulkDeleteReports({
             selectedTransactionIDs: batchTransactionIDsForReport.length > 0 ? batchTransactionIDsForReport : undefined,
             allTransactionViolationsParam: transactionsViolations,
             currentUserAccountID: currentUserAccountIDParam,
+            currentUserEmail: currentUserEmailParam,
         });
     }
 

src/pages/inbox/report/PureReportActionItem.tsx

@@ -123,6 +123,7 @@ import {
     getRemovedFromApprovalChainMessage,
     getRenamedAction,
     getRenamedCardFeedMessage,
+    getReportActionHtml,
     getReportActionMessage,
     getReportActionText,
     getSetAutoJoinMessage,
@@ -1523,6 +1524,12 @@ function PureReportActionItem({
             children = <UnreportedTransactionAction action={action as OnyxTypes.ReportAction<typeof CONST.REPORT.ACTIONS.TYPE.UNREPORTED_TRANSACTION>} />;
         } else if (action.actionName === CONST.REPORT.ACTIONS.TYPE.MERGED_WITH_CASH_TRANSACTION) {
             children = <ReportActionItemBasicMessage message={translate('systemMessage.mergedWithCashTransaction')} />;
+        } else if (action.actionName === CONST.REPORT.ACTIONS.TYPE.CARD_FROZEN || action.actionName === CONST.REPORT.ACTIONS.TYPE.CARD_UNFROZEN) {
+            children = (
+                <ReportActionItemBasicMessage message="">
+                    <RenderHTML html={`<comment><muted-text>${getReportActionHtml(action)}</muted-text></comment>`} />
+                </ReportActionItemBasicMessage>
+            );
         } else if (isActionOfType(action, CONST.REPORT.ACTIONS.TYPE.DISMISSED_VIOLATION)) {
             children = <ReportActionItemBasicMessage message={getDismissedViolationMessageText(translate, getOriginalMessage(action))} />;
         } else if (isActionOfType(action, CONST.REPORT.ACTIONS.TYPE.RESOLVED_DUPLICATES)) {
@@ -1871,7 +1878,6 @@ function PureReportActionItem({
                                         draftMessage={draftMessage}
                                         reportID={reportID}
                                         originalReportID={originalReportID}
-                                        policyID={report?.policyID}
                                         index={index}
                                         ref={composerTextInputRef}
                                         shouldDisableEmojiPicker={

src/pages/inbox/report/ReportActionCompose/AgentZeroAwareTypingIndicator.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import useShouldSuppressConciergeIndicators from '@hooks/useShouldSuppressConciergeIndicators';
+import ReportTypingIndicator from '@pages/inbox/report/ReportTypingIndicator';
+
+function AgentZeroAwareTypingIndicator({reportID}: {reportID: string}) {
+    const shouldSuppress = useShouldSuppressConciergeIndicators(reportID);
+    if (shouldSuppress) {
+        return null;
+    }
+    return <ReportTypingIndicator reportID={reportID} />;
+}
+
+export default AgentZeroAwareTypingIndicator;