Addressing review comments

Expensify · May 8, 2024 · c4cdb4b · c4cdb4b
1 parent 8463360
commit c4cdb4b
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 26 deletions.
diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx
@@ -105,7 +105,7 @@ function MoneyReportHeader({
     const [isConfirmModalVisible, setIsConfirmModalVisible] = useState(false);
 
     const transactionIDs = TransactionUtils.getAllReportTransactions(moneyRequestReport?.reportID).map((transaction) => transaction.transactionID);
-    const haveAllPendingRTERViolation = TransactionUtils.haveAllPendingRTERViolation(transactionIDs);
+    const hasAllPendingRTERViolation = TransactionUtils.hasAllPendingRTERViolation(transactionIDs);
 
     const cancelPayment = useCallback(() => {
         if (!chatReport) {
@@ -121,9 +121,9 @@ function MoneyReportHeader({
 
     const shouldDisableApproveButton = shouldShowApproveButton && !ReportUtils.isAllowedToApproveExpenseReport(moneyRequestReport);
 
-    const shouldShowSettlementButton = !ReportUtils.isInvoiceReport(moneyRequestReport) && (shouldShowPayButton || shouldShowApproveButton) && !haveAllPendingRTERViolation;
+    const shouldShowSettlementButton = !ReportUtils.isInvoiceReport(moneyRequestReport) && (shouldShowPayButton || shouldShowApproveButton) && !hasAllPendingRTERViolation;
 
-    const shouldShowSubmitButton = isDraft && reimbursableSpend !== 0 && !haveAllPendingRTERViolation;
+    const shouldShowSubmitButton = isDraft && reimbursableSpend !== 0 && !hasAllPendingRTERViolation;
     const shouldDisableSubmitButton = shouldShowSubmitButton && !ReportUtils.isAllowedToSubmitDraftExpenseReport(moneyRequestReport);
     const isFromPaidPolicy = policyType === CONST.POLICY.TYPE.TEAM || policyType === CONST.POLICY.TYPE.CORPORATE;
     const shouldShowNextStep = !ReportUtils.isClosedExpenseReportWithNoExpenses(moneyRequestReport) && isFromPaidPolicy && !!nextStep?.message?.length;
@@ -212,7 +212,7 @@ function MoneyReportHeader({
                 shouldShowBackButton={shouldUseNarrowLayout}
                 onBackButtonPress={onBackButtonPress}
                 // Shows border if no buttons or next steps are showing below the header
-                shouldShowBorderBottom={!(shouldShowAnyButton && shouldUseNarrowLayout) && !(shouldShowNextStep && !shouldUseNarrowLayout) && !haveAllPendingRTERViolation}
+                shouldShowBorderBottom={!(shouldShowAnyButton && shouldUseNarrowLayout) && !(shouldShowNextStep && !shouldUseNarrowLayout) && !hasAllPendingRTERViolation}
                 shouldShowThreeDotsButton
                 threeDotsMenuItems={threeDotsMenuItems}
                 threeDotsAnchorPosition={styles.threeDotsPopoverOffsetNoCloseButton(windowWidth)}
@@ -250,7 +250,7 @@ function MoneyReportHeader({
                     </View>
                 )}
             </HeaderWithBackButton>
-            {haveAllPendingRTERViolation && (
+            {hasAllPendingRTERViolation && (
                 <MoneyRequestHeaderStatusBar
                     title={
                         <Icon

diff --git a/src/components/MoneyRequestHeader.tsx b/src/components/MoneyRequestHeader.tsx
@@ -125,18 +125,17 @@ function MoneyRequestHeader({
 
     const getPendingType = () => {
         if (TransactionUtils.isExpensifyCardTransaction(transaction) && TransactionUtils.isPending(transaction)) {
-            return {pendingType: 'PENDING', pendingTitle: translate('iou.pending'), pendingDescription: translate('iou.transactionPendingText')};
+            return 'PENDING';
         }
         if (isScanning) {
-            return {pendingType: 'SCANNING', pendingTitle: ReceiptScan, pendingDescription: translate('iou.receiptScanInProgressDescription')};
+            return 'SCANNING';
         }
         if (TransactionUtils.hasPendingRTERViolation(TransactionUtils.getTransactionViolations(transaction?.transactionID ?? '', transactionViolations))) {
-            return {pendingType: 'RTER', pendingTitle: Expensicons.Hourglass, pendingDescription: translate('iou.pendingMatchWithCreditCardDescription')};
+            return 'RTER';
         }
-        return {};
     };
 
-    const {pendingType, pendingTitle, pendingDescription} = getPendingType();
+    const pendingType = getPendingType();
 
     useEffect(() => {
         if (canDeleteRequest) {
@@ -217,21 +216,38 @@ function MoneyRequestHeader({
                     shouldShowBackButton={shouldUseNarrowLayout}
                     onBackButtonPress={onBackButtonPress}
                 />
-                {pendingType && (
+                {pendingType === 'PENDING' && (
+                    <MoneyRequestHeaderStatusBar
+                        title={translate('iou.pending')}
+                        description={translate('iou.transactionPendingText')}
+                        shouldShowBorderBottom={!isOnHold}
+                    />
+                )}
+                {pendingType === 'SCANNING' && (
+                    <MoneyRequestHeaderStatusBar
+                        title={
+                            <Icon
+                                src={ReceiptScan}
+                                height={variables.iconSizeSmall}
+                                width={variables.iconSizeSmall}
+                                fill={theme.textSupporting}
+                            />
+                        }
+                        description={translate('iou.receiptScanInProgressDescription')}
+                        shouldShowBorderBottom={!isOnHold}
+                    />
+                )}
+                {pendingType === 'RTER' && (
                     <MoneyRequestHeaderStatusBar
                         title={
-                            typeof pendingTitle === 'string' ? (
-                                pendingTitle
-                            ) : (
-                                <Icon
-                                    src={pendingTitle}
-                                    height={variables.iconSizeSmall}
-                                    width={variables.iconSizeSmall}
-                                    fill={theme.textSupporting}
-                                />
-                            )
+                            <Icon
+                                src={Expensicons.Hourglass}
+                                height={variables.iconSizeSmall}
+                                width={variables.iconSizeSmall}
+                                fill={theme.textSupporting}
+                            />
                         }
-                        description={pendingDescription}
+                        description={translate('iou.pendingMatchWithCreditCardDescription')}
                         shouldShowBorderBottom={!isOnHold}
                         additionalViewStyle={[styles.mr2]}
                     />

diff --git a/src/libs/TransactionUtils.ts b/src/libs/TransactionUtils.ts
@@ -508,6 +508,9 @@ function hasMissingSmartscanFields(transaction: OnyxEntry<Transaction>): boolean
     return Boolean(transaction && !isDistanceRequest(transaction) && !isReceiptBeingScanned(transaction) && areRequiredFieldsEmpty(transaction));
 }
 
+/**
+ * Get all transaction violations of the transaction with given tranactionID.
+ */
 function getTransactionViolations(transactionID: string, transactionViolations: OnyxCollection<TransactionViolations> | null): TransactionViolations | null {
     return transactionViolations?.[ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS + transactionID] ?? null;
 }
@@ -522,10 +525,13 @@ function hasPendingRTERViolation(transactionViolations?: TransactionViolations |
 }
 
 /**
- * Check if there is pending rter violation in transactionViolations.
+ * Check if there is pending rter violation in all transactionViolations with given transactionIDs.
  */
-function haveAllPendingRTERViolation(transactionIds: string[]): boolean {
-    const transactionsWithRTERViolations = transactionIds.map((transactionId) => hasPendingRTERViolation(getTransactionViolations(transactionId, allTransactionViolations)));
+function hasAllPendingRTERViolation(transactionIds: string[]): boolean {
+    const transactionsWithRTERViolations = transactionIds.map((transactionId) => {
+        const transactionViolations = getTransactionViolations(transactionId, allTransactionViolations);
+        return hasPendingRTERViolation(transactionViolations);
+    });
     return transactionsWithRTERViolations.length !== 0 && transactionsWithRTERViolations.every((value) => value === true);
 }
 
@@ -750,7 +756,7 @@ export {
     areRequiredFieldsEmpty,
     hasMissingSmartscanFields,
     hasPendingRTERViolation,
-    haveAllPendingRTERViolation,
+    hasAllPendingRTERViolation,
     hasPendingUI,
     getWaypointIndex,
     waypointHasValidAddress,