Use DataViews component to render Billing History list

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

@@ -0,0 +1,70 @@
+import { Gridicon } from '@automattic/components';
+import { DataViews, View } from '@wordpress/dataviews';
+import { useTranslate } from 'i18n-calypso';
+import { useSelector } from 'react-redux';
+import getPastBillingTransactions from 'calypso/state/selectors/get-past-billing-transactions';
+import isRequestingBillingTransactions from 'calypso/state/selectors/is-requesting-billing-transactions';
+import { useFieldDefinitions } from './hooks/use-field-definitions';
+import { usePagination } from './hooks/use-pagination';
+import { useReceiptActions } from './hooks/use-receipt-actions';
+import { useTransactionsFiltering } from './hooks/use-transactions-filtering';
+import { useTransactionsSorting } from './hooks/use-transactions-sorting';
+import { useViewStateUpdate } from './hooks/use-view-state-update';
+import type { ViewStateUpdate } from './data-views-types';
+
+import 'calypso/components/dataviews/style.scss';
+import './style-data-view.scss';
+
+const DEFAULT_LAYOUT = { table: {} };
+
+export interface BillingHistoryListProps {
+	getReceiptUrlFor: ( receiptId: string ) => string;
+}
+
+export default function BillingHistoryListDataView( {
+	getReceiptUrlFor,
+}: BillingHistoryListProps ) {
+	const transactions = useSelector( getPastBillingTransactions );
+	const isLoading = useSelector( isRequestingBillingTransactions );
+	const viewState = useViewStateUpdate();
+	const receiptActions = useReceiptActions( getReceiptUrlFor );
+
+	const actions = receiptActions.map( ( action ) => ( {
+		...action,
+		icon: <Gridicon icon={ action.iconName } />,
+	} ) );
+
+	const filteredTransactions = useTransactionsFiltering( transactions, viewState.view );
+	const sortedTransactions = useTransactionsSorting( filteredTransactions, viewState.view );
+	const { paginatedItems, totalPages, totalItems } = usePagination(
+		sortedTransactions,
+		viewState.view.page,
+		viewState.view.perPage
+	);
+	const translate = useTranslate();
+	const fields = useFieldDefinitions( transactions );
+
+	const handleViewChange = ( view: View ) => viewState.updateView( view as ViewStateUpdate );
+
+	return (
+		<div className="billing-history">
+			<div className="dataviews-wrapper">
+				<DataViews
+					data={ paginatedItems }
+					paginationInfo={ {
+						totalItems,
+						totalPages,
+					} }
+					fields={ fields }
+					view={ viewState.view }
+					search
+					searchLabel={ translate( 'Search receipts' ) }
+					onChangeView={ handleViewChange }
+					defaultLayouts={ DEFAULT_LAYOUT }
+					actions={ actions }
+					isLoading={ isLoading }
+				/>
+			</div>
+		</div>
+	);
+}

client/me/purchases/billing-history/constants.ts

@@ -0,0 +1,34 @@
+import type { ViewState } from './data-views-types';
+
+export const DEFAULT_PAGE = 1;
+export const DEFAULT_PER_PAGE = 10;
+
+export const defaultDataViewsState: ViewState = {
+	type: 'table',
+	search: '',
+	filters: [],
+	page: DEFAULT_PAGE,
+	perPage: DEFAULT_PER_PAGE,
+	sort: {
+		field: 'date',
+		direction: 'desc',
+	},
+	fields: [ 'date', 'service', 'type', 'amount' ],
+	hiddenFields: [],
+	layout: {
+		styles: {
+			date: {
+				width: '15%',
+			},
+			service: {
+				width: '45%',
+			},
+			type: {
+				width: '20%',
+			},
+			amount: {
+				width: '20%',
+			},
+		},
+	},
+};

client/me/purchases/billing-history/data-views-types.ts

@@ -0,0 +1,39 @@
+import { Operator } from '@wordpress/dataviews';
+
+export type SortableField = 'date' | 'service' | 'type' | 'amount';
+export type ViewType = 'table';
+export type SortDirection = 'asc' | 'desc';
+
+export interface Sort {
+	field: SortableField;
+	direction: SortDirection;
+}
+
+export interface Filter {
+	field: string;
+	operator: Operator;
+	value: string | string[];
+}
+
+export interface ViewStateUpdate {
+	page?: number;
+	perPage?: number;
+	sort?: Sort;
+	filters?: Filter[];
+	search?: string;
+	fields?: string[];
+}
+
+export interface ViewState {
+	type: ViewType;
+	search: string;
+	filters: Filter[];
+	page: number;
+	perPage: number;
+	sort: Sort;
+	fields: string[];
+	hiddenFields: string[];
+	layout?: {
+		styles?: Record< string, { width: string } >;
+	};
+}

client/me/purchases/billing-history/field-definitions.tsx

@@ -0,0 +1,196 @@
+import { type Operator } from '@wordpress/dataviews';
+import { useTranslate } from 'i18n-calypso';
+import { capitalPDangit } from 'calypso/lib/formatting';
+import {
+	getTransactionTermLabel,
+	groupDomainProducts,
+	TransactionAmount,
+	renderTransactionQuantitySummary,
+	formatDisplayDate,
+	formatMonthYear,
+	formatMonthYearLabel,
+} from './utils';
+import type {
+	BillingTransaction,
+	BillingTransactionItem,
+} from 'calypso/state/billing-transactions/types';
+
+function renderServiceNameDescription(
+	transaction: BillingTransactionItem,
+	translate: ReturnType< typeof useTranslate >
+) {
+	const plan = capitalPDangit( transaction.variation );
+	const termLabel = getTransactionTermLabel( transaction, translate );
+	return (
+		<div>
+			<strong>{ plan }</strong>
+			{ transaction.domain && <small>{ transaction.domain }</small> }
+			{ termLabel && <small>{ termLabel }</small> }
+			{ transaction.licensed_quantity && (
+				<small>{ renderTransactionQuantitySummary( transaction, translate ) }</small>
+			) }
+		</div>
+	);
+}
+
+function renderServiceName(
+	transaction: BillingTransaction,
+	translate: ReturnType< typeof useTranslate >
+) {
+	const [ transactionItem, ...moreTransactionItems ] = groupDomainProducts(
+		transaction.items,
+		translate
+	);
+
+	if ( moreTransactionItems.length > 0 ) {
+		return <strong>{ translate( 'Multiple items' ) }</strong>;
+	}
+
+	if ( transactionItem.product === transactionItem.variation ) {
+		return transactionItem.product;
+	}
+
+	return renderServiceNameDescription( transactionItem, translate );
+}
+
+function getUniqueMonths(
+	transactions: BillingTransaction[]
+): Array< { value: string; label: string } > {
+	const monthsMap = new Map< string, Date >();
+
+	transactions.forEach( ( transaction ) => {
+		const date = new Date( transaction.date );
+		const formatted = formatMonthYear( date );
+		monthsMap.set( formatted, date );
+	} );
+
+	return Array.from( monthsMap.entries() )
+		.sort( ( [ , dateA ], [ , dateB ] ) => dateB.getTime() - dateA.getTime() )
+		.map( ( [ value, date ] ) => ( {
+			value,
+			label: formatMonthYearLabel( date ),
+		} ) );
+}
+
+function getUniqueServices(
+	transactions: BillingTransaction[]
+): Array< { value: string; label: string } > {
+	const uniqueServices = new Set( transactions.map( ( transaction ) => transaction.service ) );
+
+	return Array.from( uniqueServices )
+		.sort()
+		.map( ( service ) => ( {
+			value: service,
+			label: service,
+		} ) );
+}
+
+function getUniqueTransactionTypes(
+	transactions: BillingTransaction[]
+): Array< { value: string; label: string } > {
+	const typeMap = new Map< string, string >();
+
+	transactions
+		.flatMap( ( transaction ) => transaction.items )
+		.forEach( ( item ) => {
+			if ( item.type && ! typeMap.has( item.type ) ) {
+				typeMap.set( item.type, item.type_localized || item.type );
+			}
+		} );
+
+	return Array.from( typeMap.entries() )
+		.sort( ( [ a ], [ b ] ) => a.localeCompare( b ) )
+		.map( ( [ value, label ] ) => ( {
+			value,
+			label,
+		} ) );
+}
+
+export function getFieldDefinitions(
+	transactions: BillingTransaction[] | null,
+	translate: ReturnType< typeof useTranslate >
+) {
+	return {
+		date: {
+			id: 'date',
+			label: translate( 'Date' ),
+			type: 'text' as const,
+			width: '15%',
+			elements: getUniqueMonths( transactions ?? [] ),
+			enableGlobalSearch: true,
+			enableSorting: true,
+			enableHiding: false,
+			filterBy: {
+				operators: [ 'is' as Operator ],
+			},
+			getValue: ( { item }: { item: BillingTransaction } ) => {
+				return formatMonthYear( new Date( item.date ) );
+			},
+			render: ( { item }: { item: BillingTransaction } ) => {
+				return <time>{ formatDisplayDate( new Date( item.date ) ) }</time>;
+			},
+		},
+		service: {
+			id: 'service',
+			label: translate( 'App' ),
+			type: 'text' as const,
+			width: '45%',
+			elements: getUniqueServices( transactions ?? [] ),
+			enableGlobalSearch: true,
+			enableSorting: true,
+			enableHiding: false,
+			filterBy: {
+				operators: [ 'is' as Operator ],
+			},
+			render: ( { item }: { item: BillingTransaction } ) => {
+				return <div>{ renderServiceName( item, translate ) }</div>;
+			},
+			getValue: ( { item }: { item: BillingTransaction } ) => {
+				const [ transactionItem ] = groupDomainProducts( item.items, translate );
+				if ( transactionItem.product === transactionItem.variation ) {
+					return transactionItem.product;
+				}
+				return capitalPDangit( transactionItem.variation );
+			},
+		},
+		type: {
+			id: 'type',
+			label: translate( 'Type' ),
+			type: 'text' as const,
+			width: '20%',
+			elements: getUniqueTransactionTypes( transactions ?? [] ),
+			enableGlobalSearch: true,
+			enableSorting: true,
+			enableHiding: false,
+			filterBy: {
+				operators: [ 'is' as Operator ],
+			},
+			render: ( { item }: { item: BillingTransaction } ) => {
+				const [ transactionItem ] = groupDomainProducts( item.items, translate );
+				return <div>{ transactionItem.type_localized || transactionItem.type }</div>;
+			},
+			getValue: ( { item }: { item: BillingTransaction } ) => {
+				const [ transactionItem ] = groupDomainProducts( item.items, translate );
+				return transactionItem.type;
+			},
+		},
+		amount: {
+			id: 'amount',
+			label: translate( 'Amount' ),
+			type: 'text' as const,
+			width: '20%',
+			enableGlobalSearch: true,
+			enableSorting: true,
+			enableHiding: false,
+			filterBy: {
+				operators: [ 'is' as Operator ],
+			},
+			getValue: ( { item }: { item: BillingTransaction } ) => {
+				return item.amount_integer;
+			},
+			render: ( { item }: { item: BillingTransaction } ) => {
+				return <TransactionAmount transaction={ item } />;
+			},
+		},
+	};
+}

client/me/purchases/billing-history/hooks/use-field-definitions.ts

@@ -0,0 +1,13 @@
+import { useTranslate } from 'i18n-calypso';
+import { useMemo } from 'react';
+import { getFieldDefinitions } from '../field-definitions';
+import type { BillingTransaction } from 'calypso/state/billing-transactions/types';
+
+export function useFieldDefinitions( transactions: BillingTransaction[] | null ) {
+	const translate = useTranslate();
+
+	return useMemo( () => {
+		const fieldDefinitions = getFieldDefinitions( transactions, translate );
+		return Object.values( fieldDefinitions );
+	}, [ transactions, translate ] );
+}

client/me/purchases/billing-history/hooks/use-pagination.ts

@@ -0,0 +1,39 @@
+import { useMemo } from 'react';
+import type { BillingTransaction } from 'calypso/state/billing-transactions/types';
+
+interface PaginationResult {
+	paginatedItems: BillingTransaction[];
+	totalPages: number;
+	totalItems: number;
+	currentPage: number;
+	hasNextPage: boolean;
+	hasPreviousPage: boolean;
+}
+
+function calculatePagination(
+	items: BillingTransaction[],
+	page: number,
+	perPage: number
+): PaginationResult {
+	const startIndex = ( page - 1 ) * perPage;
+	const paginatedItems = items.slice( startIndex, startIndex + perPage );
+	const totalItems = items.length;
+	const totalPages = Math.ceil( totalItems / perPage );
+
+	return {
+		paginatedItems,
+		totalPages,
+		totalItems,
+		currentPage: page,
+		hasNextPage: page < totalPages,
+		hasPreviousPage: page > 1,
+	};
+}
+
+export function usePagination(
+	items: BillingTransaction[],
+	page: number,
+	perPage: number
+): PaginationResult {
+	return useMemo( () => calculatePagination( items, page, perPage ), [ items, page, perPage ] );
+}