Merge pull request Expensify#87849 from software-mansion-labs/perf/raise-billing-grace-period-use-onyx-followup

[No QA] perf: Raise BillingGracePeriodEnds subscriptions out of list items v2

Author: luacmartins

src/components/Search/SearchList/ListItem/ReportListItemHeader.tsx

@@ -1,7 +1,6 @@
 import React, {useMemo} from 'react';
 import type {ColorValue} from 'react-native';
 import {View} from 'react-native';
-import type {OnyxEntry} from 'react-native-onyx';
 import Checkbox from '@components/Checkbox';
 import {useDelegateNoAccessActions, useDelegateNoAccessState} from '@components/DelegateNoAccessModalProvider';
 import Icon from '@components/Icon';
@@ -19,13 +18,13 @@ import {handleActionButtonPress} from '@userActions/Search';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import {isActionLoadingSelector} from '@src/selectors/ReportMetaData';
-import type {LastPaymentMethod, Policy, Report} from '@src/types/onyx';
+import type {Policy, Report} from '@src/types/onyx';
 import ActionCell from './ActionCell';
 import TotalCell from './TotalCell';
-import type {TransactionReportGroupListItemType} from './types';
+import type {SearchListActionProps, TransactionReportGroupListItemType} from './types';
 import UserInfoAndActionButtonRow from './UserInfoAndActionButtonRow';
 
-type ReportListItemHeaderProps<TItem extends ListItem> = {
+type ReportListItemHeaderProps<TItem extends ListItem> = SearchListActionProps & {
     /** The report currently being looked at */
     report: TransactionReportGroupListItemType;
 
@@ -58,12 +57,6 @@ type ReportListItemHeaderProps<TItem extends ListItem> = {
 
     /** Whether the item is hovered */
     isHovered?: boolean;
-
-    /** The last payment method used per policy */
-    lastPaymentMethod?: OnyxEntry<LastPaymentMethod>;
-
-    /** The user's personal policy ID */
-    personalPolicyID?: string;
 };
 
 type FirstRowReportHeaderProps<TItem extends ListItem> = {
@@ -210,13 +203,14 @@ function ReportListItemHeader<TItem extends ListItem>({
     isHovered,
     lastPaymentMethod,
     personalPolicyID,
+    userBillingGracePeriodEnds,
+    ownerBillingGracePeriodEnd,
 }: ReportListItemHeaderProps<TItem>) {
     const StyleUtils = useStyleUtils();
     const styles = useThemeStyles();
     const theme = useTheme();
     const {currentSearchHash, currentSearchKey, currentSearchResults: snapshot} = useSearchStateContext();
     const {isLargeScreenWidth, shouldUseNarrowLayout} = useResponsiveLayout();
-    const [userBillingGracePeriodEnds] = useOnyx(ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_USER_BILLING_GRACE_PERIOD_END);
     const thereIsFromAndTo = !!reportItem?.from && !!reportItem?.to;
     const showUserInfo = (reportItem.type === CONST.REPORT.TYPE.IOU && thereIsFromAndTo) || (reportItem.type === CONST.REPORT.TYPE.EXPENSE && !!reportItem?.from);
     const snapshotReport = useMemo(() => {
@@ -227,7 +221,6 @@ function ReportListItemHeader<TItem extends ListItem>({
     }, [snapshot, reportItem.policyID]);
     const {isDelegateAccessRestricted} = useDelegateNoAccessState();
     const {showDelegateNoAccessModal} = useDelegateNoAccessActions();
-    const [ownerBillingGracePeriodEnd] = useOnyx(ONYXKEYS.NVP_PRIVATE_OWNER_BILLING_GRACE_PERIOD_END);
     const avatarBorderColor =
         StyleUtils.getItemBackgroundColorStyle(!!reportItem.isSelected, !!isFocused || !!isHovered, !!isDisabled, theme.activeComponentBG, theme.hoverComponentBG)?.backgroundColor ??
         theme.highlightBG;

src/components/Search/SearchList/ListItem/TransactionGroupListItem.tsx

@@ -80,6 +80,8 @@ function TransactionGroupListItem<TItem extends ListItem>({
     personalPolicyID,
     isFirstItem,
     isLastItem,
+    userBillingGracePeriodEnds,
+    ownerBillingGracePeriodEnd,
 }: TransactionGroupListItemProps<TItem>) {
     const groupItem = item as unknown as TransactionGroupListItemType;
 
@@ -452,6 +454,8 @@ function TransactionGroupListItem<TItem extends ListItem>({
                     personalPolicyID={personalPolicyID}
                     onDownArrowClick={onExpandIconPress}
                     isExpanded={isExpanded}
+                    userBillingGracePeriodEnds={userBillingGracePeriodEnds}
+                    ownerBillingGracePeriodEnd={ownerBillingGracePeriodEnd}
                 />
             );
         }

src/components/Search/SearchList/ListItem/TransactionListItem.tsx

@@ -56,6 +56,8 @@ function TransactionListItem<TItem extends ListItem>({
     lastPaymentMethod,
     personalPolicyID,
     isLastItem,
+    userBillingGracePeriodEnds,
+    ownerBillingGracePeriodEnd,
 }: TransactionListItemProps<TItem>) {
     const transactionItem = item as unknown as TransactionListItemType;
     const styles = useThemeStyles();
@@ -66,13 +68,11 @@ function TransactionListItem<TItem extends ListItem>({
     const {currentSearchHash, currentSearchKey, currentSearchResults} = useSearchStateContext();
     const snapshotReport = (currentSearchResults?.data?.[`${ONYXKEYS.COLLECTION.REPORT}${transactionItem.reportID}`] ?? {}) as Report;
 
-    const [userBillingGracePeriodEnds] = useOnyx(ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_USER_BILLING_GRACE_PERIOD_END);
     const [isActionLoading] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_METADATA}${transactionItem.reportID}`, {selector: isActionLoadingSelector});
 
     // Use active policy (user's current workspace) as fallback for self DM tracking expenses
     // This matches MoneyRequestView's approach via usePolicyForMovingExpenses()
     const [activePolicyID] = useOnyx(ONYXKEYS.NVP_ACTIVE_POLICY_ID);
-    const [ownerBillingGracePeriodEnd] = useOnyx(ONYXKEYS.NVP_PRIVATE_OWNER_BILLING_GRACE_PERIOD_END);
 
     // Use report's policyID as fallback when transaction doesn't have policyID directly
     // Use active policy as final fallback for SelfDM (tracking expenses)

src/components/Search/SearchList/ListItem/types.ts

@@ -35,6 +35,17 @@ import type {
 } from '@src/types/onyx/SearchResults';
 import type Transaction from '@src/types/onyx/Transaction';
 
+type SearchListActionProps = {
+    /** The last payment method used per policy */
+    lastPaymentMethod?: OnyxEntry<LastPaymentMethod>;
+    /** The user's personal policy ID */
+    personalPolicyID?: string;
+    /** Billing grace period end dates for workspace owners (shared across all list items) */
+    userBillingGracePeriodEnds?: OnyxCollection<BillingGraceEndPeriod>;
+    /** The workspace owner's billing grace period end date */
+    ownerBillingGracePeriodEnd?: OnyxEntry<number>;
+};
+
 type ChatListItemProps<TItem extends ListItem> = ListItemProps<TItem> & {
     queryJSONHash?: number;
 
@@ -54,25 +65,14 @@ type ChatListItemProps<TItem extends ListItem> = ListItemProps<TItem> & {
     userBillingFundID: number | undefined;
 };
 
-type ExpenseReportListItemProps<TItem extends ListItem> = ListItemProps<TItem> & {
-    /** The visible columns for the report */
-    columns?: SearchColumnType[];
-
-    /** Whether the item's action is loading */
-    isLoading?: boolean;
-
-    /** The last payment method used per policy */
-    lastPaymentMethod?: OnyxEntry<LastPaymentMethod>;
-
-    /** The user's personal policy ID */
-    personalPolicyID?: string;
-
-    /** Billing grace period end dates for workspace owners (shared across all list items) */
-    userBillingGracePeriodEnds?: OnyxCollection<BillingGraceEndPeriod>;
+type ExpenseReportListItemProps<TItem extends ListItem> = ListItemProps<TItem> &
+    SearchListActionProps & {
+        /** The visible columns for the report */
+        columns?: SearchColumnType[];
 
-    /** The workspace owner's billing grace period end date */
-    ownerBillingGracePeriodEnd?: OnyxEntry<number>;
-};
+        /** Whether the item's action is loading */
+        isLoading?: boolean;
+    };
 
 type TransactionListItemType = ListItem &
     Transaction & {
@@ -417,31 +417,25 @@ type TransactionQuarterGroupListItemType = TransactionGroupListItemType & {group
         sortKey: number;
     };
 
-type TransactionListItemProps<TItem extends ListItem> = ListItemProps<TItem> & {
-    /** Whether the item's action is loading */
-    isLoading?: boolean;
-    columns?: SearchColumnType[];
-    violations?: Record<string, TransactionViolations | undefined> | undefined;
-    customCardNames?: Record<number, string>;
-    /** The last payment method used per policy */
-    lastPaymentMethod?: OnyxEntry<LastPaymentMethod>;
-    /** The user's personal policy ID */
-    personalPolicyID?: string;
-};
+type TransactionListItemProps<TItem extends ListItem> = ListItemProps<TItem> &
+    SearchListActionProps & {
+        /** Whether the item's action is loading */
+        isLoading?: boolean;
+        columns?: SearchColumnType[];
+        violations?: Record<string, TransactionViolations | undefined> | undefined;
+        customCardNames?: Record<number, string>;
+    };
 
-type TransactionGroupListItemProps<TItem extends ListItem> = ListItemProps<TItem> & {
-    groupBy?: SearchGroupBy;
-    searchType?: SearchDataTypes;
-    policies?: OnyxCollection<Policy>;
-    accountID?: number;
-    columns?: SearchColumnType[];
-    newTransactionID?: string;
-    violations?: Record<string, TransactionViolations | undefined> | undefined;
-    /** The last payment method used per policy */
-    lastPaymentMethod?: OnyxEntry<LastPaymentMethod>;
-    /** The user's personal policy ID */
-    personalPolicyID?: string;
-};
+type TransactionGroupListItemProps<TItem extends ListItem> = ListItemProps<TItem> &
+    SearchListActionProps & {
+        groupBy?: SearchGroupBy;
+        searchType?: SearchDataTypes;
+        policies?: OnyxCollection<Policy>;
+        accountID?: number;
+        columns?: SearchColumnType[];
+        newTransactionID?: string;
+        violations?: Record<string, TransactionViolations | undefined> | undefined;
+    };
 
 type TransactionGroupListExpandedProps<TItem extends ListItem> = Pick<
     TransactionGroupListItemProps<TItem>,
@@ -467,6 +461,7 @@ type UnreportedExpenseListItemType = Transaction & {
 };
 
 export type {
+    SearchListActionProps,
     ChatListItemProps,
     ExpenseReportListItemProps,
     TransactionReportGroupListItemType,