Skip to content

Feat: Retain the option to Pay elsewhere on processing/submitted reports when payments get disabled #49967

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
blimpich merged 10 commits into from
Oct 2, 2024
Merged

Feat: Retain the option to Pay elsewhere on processing/submitted reports when payments get disabled #49967

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
8a93cdb
display pay elsewhere button if reimburseNo
truph01 Sep 28, 2024
ef5459a
fix: remove console log
truph01 Sep 28, 2024
ae195a1
merge main
truph01 Oct 1, 2024
76d5c54
fix: lint
truph01 Oct 1, 2024
628ab74
fix: apply fix in money report header
truph01 Oct 1, 2024
8aabc67
fix: lint
truph01 Oct 1, 2024
c9ac504
merge main
truph01 Oct 2, 2024
397a206
fix: remove useMemo
truph01 Oct 2, 2024
75748a5
fix: remove useMemo
truph01 Oct 2, 2024
5b38516
fix: create getCanIOUBePaid
truph01 Oct 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 9 additions & 2 deletions src/components/MoneyReportHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,10 +113,15 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
const isArchivedReport = ReportUtils.isArchivedRoomWithID(moneyRequestReport?.reportID);
const [archiveReason] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${moneyRequestReport?.reportID ?? '-1'}`, {selector: ReportUtils.getArchiveReason});

const shouldShowPayButton = useMemo(
() => IOU.canIOUBePaid(moneyRequestReport, chatReport, policy, transaction ? [transaction] : undefined),
const getCanIOUBePaid = useCallback(
(onlyShowPayElsewhere = false) => IOU.canIOUBePaid(moneyRequestReport, chatReport, policy, transaction ? [transaction] : undefined, onlyShowPayElsewhere),
[moneyRequestReport, chatReport, policy, transaction],
);
const canIOUBePaid = useMemo(() => getCanIOUBePaid(), [getCanIOUBePaid]);

const onlyShowPayElsewhere = useMemo(() => !canIOUBePaid && getCanIOUBePaid(true), [canIOUBePaid, getCanIOUBePaid]);

const shouldShowPayButton = canIOUBePaid || onlyShowPayElsewhere;

const shouldShowApproveButton = useMemo(() => IOU.canApproveIOU(moneyRequestReport, policy), [moneyRequestReport, policy]);

Expand Down Expand Up @@ -292,6 +297,7 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
{shouldShowSettlementButton && !shouldUseNarrowLayout && (
<View style={styles.pv2}>
<SettlementButton
onlyShowPayElsewhere={onlyShowPayElsewhere}
currency={moneyRequestReport?.currency}
confirmApproval={confirmApproval}
policyID={moneyRequestReport?.policyID}
Expand Down Expand Up @@ -345,6 +351,7 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
<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}
Expand Down
11 changes: 7 additions & 4 deletions src/components/ReportActionItem/ReportPreview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -319,12 +319,14 @@ function ReportPreview({
]);

const bankAccountRoute = ReportUtils.getBankAccountRoute(chatReport);

const shouldShowPayButton = useMemo(
() => isPaidAnimationRunning || IOU.canIOUBePaid(iouReport, chatReport, policy, allTransactions),
[isPaidAnimationRunning, iouReport, chatReport, policy, allTransactions],
const getCanIOUBePaid = useCallback(
(onlyShowPayElsewhere = false) => IOU.canIOUBePaid(iouReport, chatReport, policy, allTransactions, onlyShowPayElsewhere),
[iouReport, chatReport, policy, allTransactions],
);

const canIOUBePaid = useMemo(() => getCanIOUBePaid(), [getCanIOUBePaid]);
const onlyShowPayElsewhere = useMemo(() => !canIOUBePaid && getCanIOUBePaid(true), [canIOUBePaid, getCanIOUBePaid]);
const shouldShowPayButton = isPaidAnimationRunning || canIOUBePaid || onlyShowPayElsewhere;
const shouldShowApproveButton = useMemo(() => IOU.canApproveIOU(iouReport, policy), [iouReport, policy]);

const shouldDisableApproveButton = shouldShowApproveButton && !ReportUtils.isAllowedToApproveExpenseReport(iouReport);
Expand Down Expand Up @@ -518,6 +520,7 @@ function ReportPreview({
</View>
{shouldShowSettlementButton && (
<AnimatedSettlementButton
onlyShowPayElsewhere={onlyShowPayElsewhere}
isPaidAnimationRunning={isPaidAnimationRunning}
onAnimationFinish={stopAnimation}
formattedAmount={getSettlementAmount() ?? ''}
Expand Down
6 changes: 6 additions & 0 deletions src/components/SettlementButton/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ function SettlementButton({
useKeyboardShortcuts = false,
onPaymentOptionsShow,
onPaymentOptionsHide,
onlyShowPayElsewhere,
}: SettlementButtonProps) {
const {translate} = useLocalize();
const {isOffline} = useNetwork();
Expand Down Expand Up @@ -102,6 +103,10 @@ function SettlementButton({
return [approveButtonOption];
}

if (onlyShowPayElsewhere) {
Copy link
Copy Markdown
Contributor

@rojiphil rojiphil Jun 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not implementing onSelected callback for Pay elsewhere option resulted in #62228. We fixed this by not showing the drop down menu and showed a button instead as that was the only one for invoice reports.

return [paymentMethods[CONST.IOU.PAYMENT_TYPE.ELSEWHERE]];
}

// To achieve the one tap pay experience we need to choose the correct payment type as default.
if (canUseWallet) {
buttonOptions.push(paymentMethods[CONST.IOU.PAYMENT_TYPE.EXPENSIFY]);
Expand Down Expand Up @@ -173,6 +178,7 @@ function SettlementButton({
shouldShowPayElsewhereOption,
chatReport,
onPress,
onlyShowPayElsewhere,
]);

const selectPaymentType = (event: KYCFlowEvent, iouPaymentType: PaymentMethodType, triggerKYCFlow: TriggerKYCFlow) => {
Expand Down
3 changes: 3 additions & 0 deletions src/components/SettlementButton/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,9 @@ type SettlementButtonProps = {

/** Whether to use keyboard shortcuts for confirmation or not */
useKeyboardShortcuts?: boolean;

/** Whether we only show pay elsewhere button */
onlyShowPayElsewhere?: boolean;
};

export default SettlementButtonProps;
4 changes: 2 additions & 2 deletions src/libs/ReportUtils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1683,7 +1683,7 @@ function isOneOnOneChat(report: OnyxEntry<Report>): boolean {
* Checks if the current user is a payer of the expense
*/

function isPayer(session: OnyxEntry<Session>, iouReport: OnyxEntry<Report>) {
function isPayer(session: OnyxEntry<Session>, iouReport: OnyxEntry<Report>, onlyShowPayElsewhere = false) {
const isApproved = isReportApproved(iouReport);
const policy = allPolicies?.[`${ONYXKEYS.COLLECTION.POLICY}${iouReport?.policyID}`] ?? null;
const policyType = policy?.type;
Expand All @@ -1694,7 +1694,7 @@ function isPayer(session: OnyxEntry<Session>, iouReport: OnyxEntry<Report>) {
const isReimburser = session?.email === policy?.achAccount?.reimburser;
return (!policy?.achAccount?.reimburser || isReimburser) && (isApproved || isManager);
}
if (policy?.reimbursementChoice === CONST.POLICY.REIMBURSEMENT_CHOICES.REIMBURSEMENT_MANUAL) {
if (policy?.reimbursementChoice === CONST.POLICY.REIMBURSEMENT_CHOICES.REIMBURSEMENT_MANUAL || onlyShowPayElsewhere) {
return isAdmin && (isApproved || isManager);
}
return false;
Expand Down
10 changes: 8 additions & 2 deletions src/libs/actions/IOU.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6930,6 +6930,7 @@ function canIOUBePaid(
chatReport: OnyxTypes.OnyxInputOrEntry<OnyxTypes.Report>,
policy: OnyxTypes.OnyxInputOrEntry<OnyxTypes.Policy>,
transactions?: OnyxTypes.Transaction[],
onlyShowPayElsewhere = false,
) {
const isPolicyExpenseChat = ReportUtils.isPolicyExpenseChat(chatReport);
const reportNameValuePairs = ReportUtils.getReportNameValuePairs(chatReport?.reportID);
Expand All @@ -6941,7 +6942,12 @@ function canIOUBePaid(
}

if (policy?.reimbursementChoice === CONST.POLICY.REIMBURSEMENT_CHOICES.REIMBURSEMENT_NO) {
return false;
if (!onlyShowPayElsewhere) {
return false;
}
if (iouReport?.statusNum !== CONST.REPORT.STATUS_NUM.SUBMITTED) {
return false;
}
}

if (ReportUtils.isInvoiceReport(iouReport)) {
Expand All @@ -6960,6 +6966,7 @@ function canIOUBePaid(
accountID: userAccountID,
},
iouReport,
onlyShowPayElsewhere,
);

const isOpenExpenseReport = isPolicyExpenseChat && ReportUtils.isOpenExpenseReport(iouReport);
Expand All @@ -6969,7 +6976,6 @@ function canIOUBePaid(
const shouldBeApproved = canApproveIOU(iouReport, policy);

const isPayAtEndExpenseReport = ReportUtils.isPayAtEndExpenseReport(iouReport?.reportID, transactions);

return (
isPayer &&
!isOpenExpenseReport &&
Expand Down