Merge pull request #50133 from daledah/fix/49793

fix: resolve dupe button on one-expense report
Expensify · Oct 17, 2024 · 7317bd6 · 7317bd6
2 parents 62302d5 + 729c6df
commit 7317bd6
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 45 deletions.
diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx
@@ -90,6 +90,7 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
     const {reimbursableSpend} = ReportUtils.getMoneyRequestSpendBreakdown(moneyRequestReport);
     const isOnHold = TransactionUtils.isOnHold(transaction);
     const isDeletedParentAction = !!requestParentReportAction && ReportActionsUtils.isDeletedAction(requestParentReportAction);
+    const isDuplicate = TransactionUtils.isDuplicate(transaction?.transactionID ?? '');
 
     // Only the requestor can delete the request, admins can only edit it.
     const isActionOwner =
@@ -147,7 +148,13 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
         hasAllPendingRTERViolations || shouldShowBrokenConnectionViolation || hasOnlyHeldExpenses || hasScanningReceipt || isPayAtEndExpense || hasOnlyPendingTransactions;
     const shouldShowNextStep = !ReportUtils.isClosedExpenseReportWithNoExpenses(moneyRequestReport) && isFromPaidPolicy && !!nextStep?.message?.length && !shouldShowStatusBar;
     const shouldShowAnyButton =
-        shouldShowSettlementButton || shouldShowApproveButton || shouldShowSubmitButton || shouldShowNextStep || shouldShowMarkAsCashButton || shouldShowExportIntegrationButton;
+        isDuplicate ||
+        shouldShowSettlementButton ||
+        shouldShowApproveButton ||
+        shouldShowSubmitButton ||
+        shouldShowNextStep ||
+        shouldShowMarkAsCashButton ||
+        shouldShowExportIntegrationButton;
     const bankAccountRoute = ReportUtils.getBankAccountRoute(chatReport);
     const formattedAmount = CurrencyUtils.convertToDisplayString(reimbursableSpend, moneyRequestReport?.currency);
     const [nonHeldAmount, fullAmount] = ReportUtils.getNonHeldAndFullAmount(moneyRequestReport, policy);
@@ -260,13 +267,22 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
     };
 
     const statusBarProps = getStatusBarProps();
+    const shouldAddGapToContents =
+        shouldUseNarrowLayout &&
+        (isDuplicate || shouldShowSettlementButton || !!shouldShowExportIntegrationButton || shouldShowSubmitButton || shouldShowMarkAsCashButton) &&
+        (!!statusBarProps || shouldShowNextStep);
 
     // The submit button should be success green colour only if the user is submitter and the policy does not have Scheduled Submit turned on
     const isWaitingForSubmissionFromCurrentUser = useMemo(
         () => chatReport?.isOwnPolicyExpenseChat && !policy?.harvesting?.enabled,
         [chatReport?.isOwnPolicyExpenseChat, policy?.harvesting?.enabled],
     );
 
+    const shouldDuplicateButtonBeSuccess = useMemo(
+        () => isDuplicate && !shouldShowSettlementButton && !shouldShowExportIntegrationButton && !shouldShowSubmitButton && !shouldShowMarkAsCashButton,
+        [isDuplicate, shouldShowSettlementButton, shouldShowExportIntegrationButton, shouldShowSubmitButton, shouldShowMarkAsCashButton],
+    );
+
     useEffect(() => {
         if (isLoadingHoldUseExplained) {
             return;
@@ -314,6 +330,18 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
                 // Shows border if no buttons or banners are showing below the header
                 shouldShowBorderBottom={!isMoreContentShown}
             >
+                {isDuplicate && !shouldUseNarrowLayout && (
+                    <View style={[shouldDuplicateButtonBeSuccess ? styles.ml2 : styles.mh2]}>
+                        <Button
+                            success={shouldDuplicateButtonBeSuccess}
+                            text={translate('iou.reviewDuplicates')}
+                            style={styles.p0}
+                            onPress={() => {
+                                Navigation.navigate(ROUTES.TRANSACTION_DUPLICATE_REVIEW_PAGE.getRoute(transactionThreadReportID ?? '', Navigation.getReportRHPActiveRoute()));
+                            }}
+                        />
+                    </View>
+                )}
                 {shouldShowSettlementButton && !shouldUseNarrowLayout && (
                     <View style={styles.pv2}>
                         <SettlementButton
@@ -368,50 +396,63 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
                 )}
             </HeaderWithBackButton>
             {isMoreContentShown && (
-                <View style={[styles.dFlex, styles.flexColumn, styles.gap3, styles.pb3, styles.ph5, styles.borderBottom]}>
-                    {shouldShowSettlementButton && shouldUseNarrowLayout && (
-                        <SettlementButton
-                            onlyShowPayElsewhere={onlyShowPayElsewhere}
-                            currency={moneyRequestReport?.currency}
-                            confirmApproval={confirmApproval}
-                            policyID={moneyRequestReport?.policyID}
-                            chatReportID={moneyRequestReport?.chatReportID}
-                            iouReport={moneyRequestReport}
-                            onPress={confirmPayment}
-                            enablePaymentsRoute={ROUTES.ENABLE_PAYMENTS}
-                            addBankAccountRoute={bankAccountRoute}
-                            shouldHidePaymentOptions={!shouldShowPayButton}
-                            shouldShowApproveButton={shouldShowApproveButton}
-                            formattedAmount={!hasOnlyHeldExpenses ? displayedAmount : ''}
-                            shouldDisableApproveButton={shouldDisableApproveButton}
-                            isDisabled={isOffline && !canAllowSettlement}
-                            isLoading={!isOffline && !canAllowSettlement}
-                        />
-                    )}
-                    {shouldShowExportIntegrationButton && shouldUseNarrowLayout && (
-                        <ExportWithDropdownMenu
-                            policy={policy}
-                            report={moneyRequestReport}
-                            connectionName={connectedIntegration}
-                        />
-                    )}
-                    {shouldShowSubmitButton && shouldUseNarrowLayout && (
-                        <Button
-                            success={isWaitingForSubmissionFromCurrentUser}
-                            text={translate('common.submit')}
-                            style={[styles.w100, styles.pr0]}
-                            onPress={() => IOU.submitReport(moneyRequestReport)}
-                            isDisabled={shouldDisableSubmitButton}
-                        />
-                    )}
-                    {shouldShowMarkAsCashButton && shouldUseNarrowLayout && (
-                        <Button
-                            success
-                            text={translate('iou.markAsCash')}
-                            style={[styles.w100, styles.pr0]}
-                            onPress={markAsCash}
-                        />
-                    )}
+                <View style={[styles.dFlex, styles.flexColumn, shouldAddGapToContents && styles.gap3, styles.pb3, styles.ph5, styles.borderBottom]}>
+                    <View style={[styles.dFlex, styles.w100, styles.flexRow, styles.gap3]}>
+                        {isDuplicate && shouldUseNarrowLayout && (
+                            <Button
+                                success={shouldDuplicateButtonBeSuccess}
+                                text={translate('iou.reviewDuplicates')}
+                                style={[styles.flex1, styles.pr0]}
+                                onPress={() => {
+                                    Navigation.navigate(ROUTES.TRANSACTION_DUPLICATE_REVIEW_PAGE.getRoute(transactionThreadReportID ?? '', Navigation.getReportRHPActiveRoute()));
+                                }}
+                            />
+                        )}
+                        {shouldShowSettlementButton && shouldUseNarrowLayout && (
+                            <SettlementButton
+                                wrapperStyle={[styles.flex1]}
+                                onlyShowPayElsewhere={onlyShowPayElsewhere}
+                                currency={moneyRequestReport?.currency}
+                                confirmApproval={confirmApproval}
+                                policyID={moneyRequestReport?.policyID}
+                                chatReportID={moneyRequestReport?.chatReportID}
+                                iouReport={moneyRequestReport}
+                                onPress={confirmPayment}
+                                enablePaymentsRoute={ROUTES.ENABLE_PAYMENTS}
+                                addBankAccountRoute={bankAccountRoute}
+                                shouldHidePaymentOptions={!shouldShowPayButton}
+                                shouldShowApproveButton={shouldShowApproveButton}
+                                formattedAmount={!hasOnlyHeldExpenses ? displayedAmount : ''}
+                                shouldDisableApproveButton={shouldDisableApproveButton}
+                                isDisabled={isOffline && !canAllowSettlement}
+                                isLoading={!isOffline && !canAllowSettlement}
+                            />
+                        )}
+                        {shouldShowExportIntegrationButton && shouldUseNarrowLayout && (
+                            <ExportWithDropdownMenu
+                                policy={policy}
+                                report={moneyRequestReport}
+                                connectionName={connectedIntegration}
+                            />
+                        )}
+                        {shouldShowSubmitButton && shouldUseNarrowLayout && (
+                            <Button
+                                success={isWaitingForSubmissionFromCurrentUser}
+                                text={translate('common.submit')}
+                                style={[styles.flex1, styles.pr0]}
+                                onPress={() => IOU.submitReport(moneyRequestReport)}
+                                isDisabled={shouldDisableSubmitButton}
+                            />
+                        )}
+                        {shouldShowMarkAsCashButton && shouldUseNarrowLayout && (
+                            <Button
+                                success
+                                text={translate('iou.markAsCash')}
+                                style={[styles.flex1, styles.pr0]}
+                                onPress={markAsCash}
+                            />
+                        )}
+                    </View>
                     {shouldShowNextStep && <MoneyReportHeaderStatusBar nextStep={nextStep} />}
                     {statusBarProps && (
                         <MoneyRequestHeaderStatusBar

diff --git a/src/components/ReportActionItem/ExportWithDropdownMenu.tsx b/src/components/ReportActionItem/ExportWithDropdownMenu.tsx
@@ -120,6 +120,7 @@ function ExportWithDropdownMenu({
                 onOptionSelected={({value}) => savePreferredExportMethod(value)}
                 options={dropdownOptions}
                 style={[shouldUseNarrowLayout && styles.flexGrow1]}
+                wrapperStyle={styles.flex1}
                 buttonSize={CONST.DROPDOWN_BUTTON_SIZE.MEDIUM}
             />
             <ConfirmModal

diff --git a/src/components/SettlementButton/index.tsx b/src/components/SettlementButton/index.tsx
@@ -59,6 +59,7 @@ function SettlementButton({
     onPaymentOptionsShow,
     onPaymentOptionsHide,
     onlyShowPayElsewhere,
+    wrapperStyle,
 }: SettlementButtonProps) {
     const {translate} = useLocalize();
     const {isOffline} = useNetwork();
@@ -250,6 +251,7 @@ function SettlementButton({
                         savePreferredPaymentMethod(policyID, option.value);
                     }}
                     style={style}
+                    wrapperStyle={wrapperStyle}
                     disabledStyle={disabledStyle}
                     buttonSize={buttonSize}
                     anchorAlignment={paymentMethodDropdownAnchorAlignment}

diff --git a/src/components/SettlementButton/types.ts b/src/components/SettlementButton/types.ts
@@ -49,6 +49,9 @@ type SettlementButtonProps = {
     /** Additional styles to add to the component */
     style?: StyleProp<ViewStyle>;
 
+    /** Additional styles to add to the component wrapper */
+    wrapperStyle?: StyleProp<ViewStyle>;
+
     /** Additional styles to add to the component when it's disabled */
     disabledStyle?: StyleProp<ViewStyle>;