Skip to content

#6 - Get the billing grace end period collection with useOnyx #83149

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

Open
bernhardoj wants to merge 5 commits into
base: main
Choose a base branch
from
+84 −28
Open

#6 - Get the billing grace end period collection with useOnyx #83149

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
56387ab
pass billing grace end period data from useOnyx
bernhardoj Feb 22, 2026
1c58163
prettier & missing param
bernhardoj Feb 22, 2026
809164e
missing param
bernhardoj Feb 22, 2026
f35f9f5
prettier
bernhardoj Feb 22, 2026
9c0b2ec
lint
bernhardoj Feb 22, 2026
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: 7 additions & 4 deletions src/components/MoneyReportHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -615,6 +615,7 @@ function MoneyReportHeader({
activePolicy,
policy,
betas,
userBillingGraceEndPeriodCollection,
});
if (currentSearchQueryJSON && !isOffline) {
search({
Expand Down Expand Up @@ -649,6 +650,7 @@ function MoneyReportHeader({
shouldCalculateTotals,
currentSearchResults?.search?.isLoading,
betas,
userBillingGraceEndPeriodCollection,
],
);

Expand All @@ -674,7 +676,7 @@ function MoneyReportHeader({
showDelegateNoAccessModal();
} else if (!isAnyTransactionOnHold) {
startApprovedAnimation();
approveMoneyRequest(moneyRequestReport, policy, accountID, email ?? '', hasViolations, isASAPSubmitBetaEnabled, nextStep, betas, true);
approveMoneyRequest(moneyRequestReport, policy, accountID, email ?? '', hasViolations, isASAPSubmitBetaEnabled, nextStep, betas, userBillingGraceEndPeriodCollection, true);
}
};

Expand Down Expand Up @@ -1024,7 +1026,7 @@ function MoneyReportHeader({
return;
}
startApprovedAnimation();
approveMoneyRequest(moneyRequestReport, policy, accountID, email ?? '', hasViolations, isASAPSubmitBetaEnabled, nextStep, betas, isFullApproval);
approveMoneyRequest(moneyRequestReport, policy, accountID, email ?? '', hasViolations, isASAPSubmitBetaEnabled, nextStep, betas, userBillingGraceEndPeriodCollection, isFullApproval);
if (currentSearchQueryJSON) {
search({
searchKey: currentSearchKey,
Expand All @@ -1050,7 +1052,7 @@ function MoneyReportHeader({
return;
}
startSubmittingAnimation();
submitReport(moneyRequestReport, policy, accountID, email ?? '', hasViolations, isASAPSubmitBetaEnabled, nextStep);
submitReport(moneyRequestReport, policy, accountID, email ?? '', hasViolations, isASAPSubmitBetaEnabled, nextStep, userBillingGraceEndPeriodCollection);
if (currentSearchQueryJSON && !isOffline) {
search({
searchKey: currentSearchKey,
Expand Down Expand Up @@ -1322,7 +1324,7 @@ function MoneyReportHeader({
showDWEModal();
return;
}
submitReport(moneyRequestReport, policy, accountID, email ?? '', hasViolations, isASAPSubmitBetaEnabled, nextStep);
submitReport(moneyRequestReport, policy, accountID, email ?? '', hasViolations, isASAPSubmitBetaEnabled, nextStep, userBillingGraceEndPeriodCollection);
},
},
[CONST.REPORT.SECONDARY_ACTIONS.APPROVE]: {
Expand Down Expand Up @@ -1823,6 +1825,7 @@ function MoneyReportHeader({
iouReport: moneyRequestReport,
iouReportNextStep: nextStep,
betas,
userBillingGraceEndPeriodCollection,
});

const showNextStepBar = shouldShowNextStep && !!(optimisticNextStep?.message?.length ?? (optimisticNextStep && 'messageKey' in optimisticNextStep));
Expand Down
2 changes: 2 additions & 0 deletions src/components/ProcessMoneyReportHoldMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ function ProcessMoneyReportHoldMenu({
// We need to use isSmallScreenWidth instead of shouldUseNarrowLayout to apply the correct modal type
// eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
const {isSmallScreenWidth} = useResponsiveLayout();
const [userBillingGraceEndPeriodCollection] = useOnyx(ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_USER_BILLING_GRACE_PERIOD_END, {canBeMissing: true});
const [activePolicyID] = useOnyx(ONYXKEYS.NVP_ACTIVE_POLICY_ID, {canBeMissing: true});
const activePolicy = usePolicy(activePolicyID);
const policy = usePolicy(moneyRequestReport?.policyID);
Expand Down Expand Up @@ -94,6 +95,7 @@ function ProcessMoneyReportHoldMenu({
activePolicy,
policy,
betas,
userBillingGraceEndPeriodCollection,
});
}
onClose();
Expand Down
18 changes: 16 additions & 2 deletions ...omponents/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -283,6 +283,7 @@ function MoneyRequestReportPreviewContent({
activePolicy,
policy,
betas,
userBillingGraceEndPeriodCollection,
Copy link

@chatgpt-codex-connector chatgpt-codex-connector bot Feb 22, 2026

Choose a reason for hiding this comment

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

P1 Badge Include billing grace data in confirmPayment memo deps

confirmPayment now reads userBillingGraceEndPeriodCollection when calling payMoneyRequest, but the useCallback dependency list was not updated. If this Onyx collection is undefined on first render and arrives later, the memoized handler keeps the stale value and can continue using the fallback path in shouldRestrictUserBillableActions, allowing restricted users to initiate pay actions from this preview until another dependency changes and recreates the callback.

Useful? React with 👍 / 👎.

});
}
}
Expand All @@ -301,6 +302,7 @@ function MoneyRequestReportPreviewContent({
activePolicy,
policy,
betas,
userBillingGraceEndPeriodCollection,
],
);

Expand All @@ -327,7 +329,18 @@ function MoneyRequestReportPreviewContent({
showDelegateNoAccessModal();
} else if (!hasHeldExpensesReportUtils(iouReport?.reportID)) {
startApprovedAnimation();
approveMoneyRequest(iouReport, activePolicy, currentUserAccountID, currentUserEmail, hasViolations, isASAPSubmitBetaEnabled, iouReportNextStep, betas, true);
approveMoneyRequest(
iouReport,
activePolicy,
currentUserAccountID,
currentUserEmail,
hasViolations,
isASAPSubmitBetaEnabled,
iouReportNextStep,
betas,
userBillingGraceEndPeriodCollection,
true,
);
}
};

Expand Down Expand Up @@ -628,7 +641,7 @@ function MoneyRequestReportPreviewContent({
return;
}
startSubmittingAnimation();
submitReport(iouReport, policy, currentUserAccountID, currentUserEmail, hasViolations, isASAPSubmitBetaEnabled, iouReportNextStep);
submitReport(iouReport, policy, currentUserAccountID, currentUserEmail, hasViolations, isASAPSubmitBetaEnabled, iouReportNextStep, userBillingGraceEndPeriodCollection);
}}
isSubmittingAnimationRunning={isSubmittingAnimationRunning}
onAnimationFinish={stopAnimation}
Expand Down Expand Up @@ -658,6 +671,7 @@ function MoneyRequestReportPreviewContent({
isASAPSubmitBetaEnabled,
iouReportNextStep,
betas,
userBillingGraceEndPeriodCollection,
isFullApproval,
);
}}
Expand Down
4 changes: 2 additions & 2 deletions src/components/SettlementButton/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ function SettlementButton({
const [chatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${chatReportID || CONST.DEFAULT_NUMBER_ID}`, {canBeMissing: true});
const [conciergeReportID = ''] = useOnyx(ONYXKEYS.CONCIERGE_REPORT_ID, {canBeMissing: true});
const [iouReportNextStep] = useOnyx(`${ONYXKEYS.COLLECTION.NEXT_STEP}${iouReport?.reportID}`, {canBeMissing: true});

const [userBillingGraceEndPeriodCollection] = useOnyx(ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_USER_BILLING_GRACE_PERIOD_END, {canBeMissing: true});
const [isUserValidated] = useOnyx(ONYXKEYS.ACCOUNT, {selector: isUserValidatedSelector, canBeMissing: true});
const policyEmployeeAccountIDs = getPolicyEmployeeAccountIDs(policy, accountID);
const reportBelongsToWorkspace = policyID ? doesReportBelongToWorkspace(chatReport, policyEmployeeAccountIDs, policyID, conciergeReportID) : false;
Expand Down Expand Up @@ -464,7 +464,7 @@ function SettlementButton({
if (confirmApproval) {
confirmApproval();
} else {
approveMoneyRequest(iouReport, policy, accountID, email ?? '', hasViolations, isASAPSubmitBetaEnabled, iouReportNextStep, betas, false);
approveMoneyRequest(iouReport, policy, accountID, email ?? '', hasViolations, isASAPSubmitBetaEnabled, iouReportNextStep, betas, userBillingGraceEndPeriodCollection, false);
}
return;
}
Expand Down
21 changes: 17 additions & 4 deletions src/libs/PaymentUtils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import isEmpty from 'lodash/isEmpty';
import type {GestureResponderEvent} from 'react-native';
import type {OnyxEntry} from 'react-native-onyx';
import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
import type {Merge, ValueOf} from 'type-fest';
import type {DropdownOption} from '@components/ButtonWithDropdownMenu/types';
import getBankIcon from '@components/Icon/BankIcons';
Expand All @@ -11,7 +11,7 @@ import type {BankAccountMenuItem} from '@components/Search/types';
import type {ThemeStyles} from '@styles/index';
import CONST from '@src/CONST';
import ROUTES from '@src/ROUTES';
import type {Beta, Policy, Report, ReportNextStepDeprecated} from '@src/types/onyx';
import type {Beta, BillingGraceEndPeriod, Policy, Report, ReportNextStepDeprecated} from '@src/types/onyx';
import type BankAccount from '@src/types/onyx/BankAccount';
import type Fund from '@src/types/onyx/Fund';
import type {PaymentMethodType} from '@src/types/onyx/OriginalMessage';
Expand Down Expand Up @@ -42,6 +42,7 @@ type SelectPaymentTypeParams = {
iouReport?: OnyxEntry<Report>;
iouReportNextStep: OnyxEntry<ReportNextStepDeprecated>;
betas: OnyxEntry<Beta[]>;
userBillingGraceEndPeriodCollection: OnyxCollection<BillingGraceEndPeriod>;
};

/**
Expand Down Expand Up @@ -178,8 +179,9 @@ const selectPaymentType = (params: SelectPaymentTypeParams) => {
iouReport,
iouReportNextStep,
betas,
userBillingGraceEndPeriodCollection,
} = params;
if (policy && shouldRestrictUserBillableActions(policy.id)) {
if (policy && shouldRestrictUserBillableActions(policy.id, userBillingGraceEndPeriodCollection)) {
Navigation.navigate(ROUTES.RESTRICTED_ACTION.getRoute(policy.id));
return;
}
Expand All @@ -197,7 +199,18 @@ const selectPaymentType = (params: SelectPaymentTypeParams) => {
if (confirmApproval) {
confirmApproval();
} else {
approveMoneyRequest(iouReport, policy, currentAccountID, currentEmail, hasViolations, isASAPSubmitBetaEnabled, iouReportNextStep, betas, true);
approveMoneyRequest(
iouReport,
policy,
currentAccountID,
currentEmail,
hasViolations,
isASAPSubmitBetaEnabled,
iouReportNextStep,
betas,
userBillingGraceEndPeriodCollection,
true,
);
}
return;
}
Expand Down
24 changes: 20 additions & 4 deletions src/libs/actions/IOU/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -801,7 +801,7 @@
};

let allPersonalDetails: OnyxTypes.PersonalDetailsList = {};
Onyx.connect({

Check warning on line 804 in src/libs/actions/IOU/index.ts

View workflow job for this annotation

GitHub Actions / Changed files ESLint check 

Onyx.connect() is deprecated. Use useOnyx() hook instead and pass the data as parameters to a pure function
key: ONYXKEYS.PERSONAL_DETAILS_LIST,
callback: (value) => {
allPersonalDetails = value ?? {};
Expand Down Expand Up @@ -886,6 +886,7 @@
introSelected: OnyxEntry<OnyxTypes.IntroSelected>;
iouReportCurrentNextStepDeprecated: OnyxEntry<OnyxTypes.ReportNextStepDeprecated>;
currentUserAccountID: number;
userBillingGraceEndPeriodCollection: OnyxCollection<OnyxTypes.BillingGraceEndPeriod>;
paymentPolicyID?: string;
full?: boolean;
activePolicy?: OnyxEntry<OnyxTypes.Policy>;
Expand All @@ -894,7 +895,7 @@
};

let allTransactions: NonNullable<OnyxCollection<OnyxTypes.Transaction>> = {};
Onyx.connect({

Check warning on line 898 in src/libs/actions/IOU/index.ts

View workflow job for this annotation

GitHub Actions / Changed files ESLint check 

Onyx.connect() is deprecated. Use useOnyx() hook instead and pass the data as parameters to a pure function
key: ONYXKEYS.COLLECTION.TRANSACTION,
waitForCollectionCallback: true,
callback: (value) => {
Expand All @@ -908,7 +909,7 @@
});

let allTransactionDrafts: NonNullable<OnyxCollection<OnyxTypes.Transaction>> = {};
Onyx.connect({

Check warning on line 912 in src/libs/actions/IOU/index.ts

View workflow job for this annotation

GitHub Actions / Changed files ESLint check 

Onyx.connect() is deprecated. Use useOnyx() hook instead and pass the data as parameters to a pure function
key: ONYXKEYS.COLLECTION.TRANSACTION_DRAFT,
waitForCollectionCallback: true,
callback: (value) => {
Expand All @@ -917,7 +918,7 @@
});

let allTransactionViolations: NonNullable<OnyxCollection<OnyxTypes.TransactionViolations>> = {};
Onyx.connect({

Check warning on line 921 in src/libs/actions/IOU/index.ts

View workflow job for this annotation

GitHub Actions / Changed files ESLint check 

Onyx.connect() is deprecated. Use useOnyx() hook instead and pass the data as parameters to a pure function
key: ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS,
waitForCollectionCallback: true,
callback: (value) => {
Expand All @@ -931,7 +932,7 @@
});

let allPolicyTags: OnyxCollection<OnyxTypes.PolicyTagLists> = {};
Onyx.connect({

Check warning on line 935 in src/libs/actions/IOU/index.ts

View workflow job for this annotation

GitHub Actions / Changed files ESLint check 

Onyx.connect() is deprecated. Use useOnyx() hook instead and pass the data as parameters to a pure function
key: ONYXKEYS.COLLECTION.POLICY_TAGS,
waitForCollectionCallback: true,
callback: (value) => {
Expand All @@ -944,7 +945,7 @@
});

let allReports: OnyxCollection<OnyxTypes.Report>;
Onyx.connect({

Check warning on line 948 in src/libs/actions/IOU/index.ts

View workflow job for this annotation

GitHub Actions / Changed files ESLint check 

Onyx.connect() is deprecated. Use useOnyx() hook instead and pass the data as parameters to a pure function
key: ONYXKEYS.COLLECTION.REPORT,
waitForCollectionCallback: true,
callback: (value) => {
Expand All @@ -953,7 +954,7 @@
});

let allReportNameValuePairs: OnyxCollection<OnyxTypes.ReportNameValuePairs>;
Onyx.connect({

Check warning on line 957 in src/libs/actions/IOU/index.ts

View workflow job for this annotation

GitHub Actions / Changed files ESLint check 

Onyx.connect() is deprecated. Use useOnyx() hook instead and pass the data as parameters to a pure function
key: ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS,
waitForCollectionCallback: true,
callback: (value) => {
Expand All @@ -963,7 +964,7 @@

let userAccountID = -1;
let currentUserEmail = '';
Onyx.connect({

Check warning on line 967 in src/libs/actions/IOU/index.ts

View workflow job for this annotation

GitHub Actions / Changed files ESLint check 

Onyx.connect() is deprecated. Use useOnyx() hook instead and pass the data as parameters to a pure function
key: ONYXKEYS.SESSION,
callback: (value) => {
currentUserEmail = value?.email ?? '';
Expand All @@ -972,7 +973,7 @@
});

let deprecatedCurrentUserPersonalDetails: OnyxEntry<OnyxTypes.PersonalDetails>;
Onyx.connect({

Check warning on line 976 in src/libs/actions/IOU/index.ts

View workflow job for this annotation

GitHub Actions / Changed files ESLint check 

Onyx.connect() is deprecated. Use useOnyx() hook instead and pass the data as parameters to a pure function
key: ONYXKEYS.PERSONAL_DETAILS_LIST,
callback: (value) => {
deprecatedCurrentUserPersonalDetails = value?.[userAccountID] ?? undefined;
Expand All @@ -980,7 +981,7 @@
});

let allReportActions: OnyxCollection<OnyxTypes.ReportActions>;
Onyx.connect({

Check warning on line 984 in src/libs/actions/IOU/index.ts

View workflow job for this annotation

GitHub Actions / Changed files ESLint check 

Onyx.connect() is deprecated. Use useOnyx() hook instead and pass the data as parameters to a pure function
key: ONYXKEYS.COLLECTION.REPORT_ACTIONS,
waitForCollectionCallback: true,
callback: (actions) => {
Expand Down Expand Up @@ -10527,13 +10528,14 @@
isASAPSubmitBetaEnabled: boolean,
expenseReportCurrentNextStepDeprecated: OnyxEntry<OnyxTypes.ReportNextStepDeprecated>,
betas: OnyxEntry<OnyxTypes.Beta[]>,
userBillingGraceEndPeriodCollection: OnyxCollection<OnyxTypes.BillingGraceEndPeriod>,
Copy link

@chatgpt-codex-connector chatgpt-codex-connector bot Feb 22, 2026

Choose a reason for hiding this comment

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

P1 Badge Preserve full argument semantics in approve flow

Adding userBillingGraceEndPeriodCollection before full changes the meaning of existing 9-argument calls, so callers still using the old signature (for example src/components/SettlementButton/index.tsx:467 and src/libs/PaymentUtils.ts:200) now pass a boolean as the billing collection and leave full undefined. In this state shouldRestrictUserBillableActions() receives true/false instead of the collection and skips non-owner grace-period checks, allowing restricted users to proceed with billable approval actions in those paths.

Useful? React with 👍 / 👎.

full?: boolean,
) {
if (!expenseReport) {
return;
}

if (expenseReport.policyID && shouldRestrictUserBillableActions(expenseReport.policyID)) {
if (expenseReport.policyID && shouldRestrictUserBillableActions(expenseReport.policyID, userBillingGraceEndPeriodCollection)) {
Navigation.navigate(ROUTES.RESTRICTED_ACTION.getRoute(expenseReport.policyID));
return;
}
Expand Down Expand Up @@ -11413,11 +11415,12 @@
hasViolations: boolean,
isASAPSubmitBetaEnabled: boolean,
expenseReportCurrentNextStepDeprecated: OnyxEntry<OnyxTypes.ReportNextStepDeprecated>,
userBillingGraceEndPeriodCollection: OnyxCollection<OnyxTypes.BillingGraceEndPeriod>,
) {
if (!expenseReport) {
return;
}
if (expenseReport.policyID && shouldRestrictUserBillableActions(expenseReport.policyID)) {
if (expenseReport.policyID && shouldRestrictUserBillableActions(expenseReport.policyID, userBillingGraceEndPeriodCollection)) {
Navigation.navigate(ROUTES.RESTRICTED_ACTION.getRoute(expenseReport.policyID));
return;
}
Expand Down Expand Up @@ -11931,8 +11934,21 @@
}

function payMoneyRequest(params: PayMoneyRequestFunctionParams) {
const {paymentType, chatReport, iouReport, introSelected, iouReportCurrentNextStepDeprecated, currentUserAccountID, paymentPolicyID, full = true, activePolicy, policy, betas} = params;
if (chatReport.policyID && shouldRestrictUserBillableActions(chatReport.policyID)) {
const {
paymentType,
chatReport,
iouReport,
introSelected,
iouReportCurrentNextStepDeprecated,
currentUserAccountID,
paymentPolicyID,
userBillingGraceEndPeriodCollection,
full = true,
activePolicy,
policy,
betas,
} = params;
if (chatReport.policyID && shouldRestrictUserBillableActions(chatReport.policyID, userBillingGraceEndPeriodCollection)) {
Navigation.navigate(ROUTES.RESTRICTED_ACTION.getRoute(chatReport.policyID));
return;
}
Expand Down
Loading
Loading