Enable site specific purchases billing with DataViews (#98764)

* Initial commit

* Move siteId filtering to useTransactionsFiltering

---------

Co-authored-by: Bill Robbins <[email protected]>

client/me/purchases/billing-history/billing-history-list-data-view.tsx

@@ -19,10 +19,12 @@ const DEFAULT_LAYOUT = { table: {} };
 
 export interface BillingHistoryListProps {
 	getReceiptUrlFor: ( receiptId: string ) => string;
+	siteId: number | null;
 }
 
 export default function BillingHistoryListDataView( {
 	getReceiptUrlFor,
+	siteId,
 }: BillingHistoryListProps ) {
 	const transactions = useSelector( getPastBillingTransactions );
 	const isLoading = useSelector( isRequestingBillingTransactions );
@@ -34,7 +36,8 @@ export default function BillingHistoryListDataView( {
 		icon: <Gridicon icon={ action.iconName } />,
 	} ) );
 
-	const filteredTransactions = useTransactionsFiltering( transactions, viewState.view );
+	const filteredTransactions = useTransactionsFiltering( transactions, viewState.view, siteId );
+
 	const sortedTransactions = useTransactionsSorting( filteredTransactions, viewState.view );
 	const { paginatedItems, totalPages, totalItems } = usePagination(
 		sortedTransactions,

client/me/purchases/billing-history/hooks/use-transactions-filtering.ts

@@ -44,14 +44,26 @@ function matchesFilter(
 	return true;
 }
 
+function matchesSiteId( transaction: BillingTransaction, siteId: number | null | undefined ) {
+	if ( ! siteId ) {
+		return true;
+	}
+	return transaction.items.some( ( item ) => String( item.site_id ) === String( siteId ) );
+}
+
 export function useTransactionsFiltering(
 	transactions: BillingTransaction[] | null,
-	view: ViewState
+	view: ViewState,
+	siteId: number | null
 ) {
 	const translate = useTranslate();
 
 	return useMemo( () => {
 		return ( transactions ?? [] ).filter( ( transaction ) => {
+			if ( ! matchesSiteId( transaction, siteId ) ) {
+				return false;
+			}
+
 			if ( view.search && ! matchesSearch( transaction, view.search, translate ) ) {
 				return false;
 			}
@@ -62,5 +74,5 @@ export function useTransactionsFiltering(
 
 			return view.filters.every( ( filter ) => matchesFilter( transaction, filter, translate ) );
 		} );
-	}, [ transactions, view.search, view.filters, translate ] );
+	}, [ transactions, view.search, view.filters, translate, siteId ] );
 }

client/me/purchases/billing-history/main.tsx

@@ -30,7 +30,7 @@ export function BillingHistoryContent( {
 	return (
 		<Card id="billing-history" className="section-content" tagName="section">
 			{ useDataViewBillingHistoryList ? (
-				<BillingHistoryListDataView getReceiptUrlFor={ getReceiptUrlFor } />
+				<BillingHistoryListDataView siteId={ siteId } getReceiptUrlFor={ getReceiptUrlFor } />
 			) : (
 				<BillingHistoryList header siteId={ siteId } getReceiptUrlFor={ getReceiptUrlFor } />
 			) }