Billing history pagination - UI (#23800)

* Billing history pagination - UI

* Code cleanup

Author: marcinbot

client/me/billing-history/billing-history-table.jsx

@@ -78,8 +78,7 @@ class BillingHistoryTable extends React.Component {
 
 		return (
 			<TransactionsTable
-				{ ...this.props }
-				initialFilter={ { date: { newest: 5 } } }
+				transactionType="past"
 				header
 				emptyTableText={ emptyTableText }
 				noFilterResultsText={ noFilterResultsText }

client/me/billing-history/main.jsx

@@ -21,27 +21,23 @@ import Main from 'components/main';
 import DocumentHead from 'components/data/document-head';
 import PageViewTracker from 'lib/analytics/page-view-tracker';
 import QueryBillingTransactions from 'components/data/query-billing-transactions';
-import { purchasesRoot } from 'me/purchases/paths';
-import { getPastBillingTransactions, getUpcomingBillingTransactions } from 'state/selectors';
+import { getPastBillingTransactions } from 'state/selectors';
 
-const BillingHistory = ( { pastTransactions, upcomingTransactions, translate } ) => (
+const BillingHistory = ( { pastTransactions, translate } ) => (
 	<Main className="billing-history">
 		<DocumentHead title={ translate( 'Billing History' ) } />
 		<PageViewTracker path="/me/purchases/billing" title="Me > Billing History" />
 		<MeSidebarNavigation />
 		<QueryBillingTransactions />
 		<PurchasesHeader section={ 'billing' } />
 		<Card className="billing-history__receipts">
-			<BillingHistoryTable transactions={ pastTransactions } />
-		</Card>
-		<Card href={ purchasesRoot }>
-			{ translate( 'Go to "Purchases" to add or cancel a plan.' ) }
+			<BillingHistoryTable />
 		</Card>
 		{ pastTransactions && (
 			<div>
 				<SectionHeader label={ translate( 'Upcoming Charges' ) } />
 				<Card className="billing-history__upcoming-charges">
-					<UpcomingChargesTable transactions={ upcomingTransactions } />
+					<UpcomingChargesTable />
 				</Card>
 			</div>
 		) }
@@ -51,5 +47,4 @@ const BillingHistory = ( { pastTransactions, upcomingTransactions, translate } )
 
 export default connect( state => ( {
 	pastTransactions: getPastBillingTransactions( state ),
-	upcomingTransactions: getUpcomingBillingTransactions( state ),
 } ) )( localize( BillingHistory ) );

client/me/billing-history/receipt.jsx

@@ -18,7 +18,6 @@ import Main from 'components/main';
 import PageViewTracker from 'lib/analytics/page-view-tracker';
 import { billingHistory } from 'me/purchases/paths';
 import QueryBillingTransaction from 'components/data/query-billing-transaction';
-import tableRows from './table-rows';
 import { groupDomainProducts } from './utils';
 import { getPastBillingTransaction, isPastBillingTransactionError } from 'state/selectors';
 import {
@@ -203,7 +202,7 @@ class BillingReceipt extends React.Component {
 	}
 
 	renderBillingHistory() {
-		const { transaction, translate } = this.props;
+		const { transaction, translate, moment } = this.props;
 		const title = translate( 'Visit %(url)s', { args: { url: transaction.url } } );
 		const serviceLink = <a href={ transaction.url } title={ title } />;
 
@@ -233,7 +232,7 @@ class BillingReceipt extends React.Component {
 									'Screenshot: https://cloudup.com/isX-WEFYlOs',
 							} ) }
 							<div className="billing-history__transaction-date">
-								{ tableRows.formatDate( transaction.date ) }
+								{ moment( transaction.date ).format( 'll' ) }
 							</div>
 						</h2>
 					</div>

client/me/billing-history/style.scss

@@ -388,4 +388,4 @@
 .billing-history__transactions-header-select-dropdown {
 	padding: 8px 12px;
 	position: absolute;
-}
+}

client/me/billing-history/table-rows.js

@@ -4,10 +4,11 @@
  * External dependencies
  */
 import React from 'react';
+import PropTypes from 'prop-types';
 import closest from 'component-closest';
 import { connect } from 'react-redux';
-import { last, map, range, uniq } from 'lodash';
 import { localize } from 'i18n-calypso';
+import { find, isEqual } from 'lodash';
 
 /**
  * Internal dependencies
@@ -16,8 +17,13 @@ import SelectDropdown from 'components/select-dropdown';
 import DropdownItem from 'components/select-dropdown/item';
 import DropdownLabel from 'components/select-dropdown/label';
 import DropdownSeparator from 'components/select-dropdown/separator';
-import tableRows from './table-rows';
 import { recordGoogleEvent } from 'state/analytics/actions';
+import { setApp, setDate } from 'state/ui/billing-transactions/actions';
+import {
+	getBillingTransactionAppFilterValues,
+	getBillingTransactionDateFilterValues,
+	getBillingTransactionFilters,
+} from 'state/selectors';
 
 class TransactionsHeader extends React.Component {
 	state = {
@@ -41,17 +47,20 @@ class TransactionsHeader extends React.Component {
 		this.props.recordGoogleEvent( 'Me', 'Clicked on ' + action );
 	};
 
-	getDatePopoverItemClickHandler( analyticsEvent, filter ) {
+	getDatePopoverItemClickHandler( analyticsEvent, date ) {
 		return () => {
+			const { transactionType } = this.props;
 			this.recordClickEvent( 'Date Popover Item: ' + analyticsEvent );
-			this.handlePickerSelection( filter );
+			this.props.setDate( transactionType, date.month, date.operator );
+			this.setState( { activePopover: '' } );
 		};
 	}
 
-	getAppPopoverItemClickHandler( analyticsEvent, filter ) {
+	getAppPopoverItemClickHandler( analyticsEvent, app ) {
 		return () => {
 			this.recordClickEvent( 'App Popover Item: ' + analyticsEvent );
-			this.handlePickerSelection( filter );
+			this.props.setApp( this.props.transactionType, app );
+			this.setState( { activePopover: '' } );
 		};
 	}
 
@@ -89,32 +98,30 @@ class TransactionsHeader extends React.Component {
 		);
 	}
 
-	setFilter( filter ) {
-		this.setState( { activePopover: '' } );
-		this.props.onNewFilter( filter );
-	}
-
 	renderDatePopover() {
-		const previousMonths = range( 6 ).map( function( n ) {
-			return this.props.moment().subtract( n, 'months' );
-		}, this );
+		const { dateFilters, filter, translate } = this.props;
+		const selectedFilter = find( dateFilters, { value: filter.date } );
+		const selectedText = selectedFilter ? selectedFilter.title : translate( 'Date' );
 
 		return (
 			<SelectDropdown
-				selectedText={ this.props.translate( 'Date' ) }
+				selectedText={ selectedText }
 				onClick={ this.handleAppsPopoverLinkClick }
 				className="billing-history__transactions-header-select-dropdown"
 			>
-				<DropdownLabel>{ this.props.translate( 'Recent Transactions' ) }</DropdownLabel>
-				{ this.renderDatePicker( '5 Newest', this.props.translate( '5 Newest' ), {
-					newest: 5,
-				} ) }
-				{ this.renderDatePicker( '10 Newest', this.props.translate( '10 Newest' ), {
-					newest: 10,
-				} ) }
+				<DropdownLabel>{ translate( 'Recent Transactions' ) }</DropdownLabel>
+				{ this.renderDatePicker(
+					'Newest',
+					translate( 'Newest' ),
+					{
+						month: null,
+						operator: null,
+					},
+					null
+				) }
 				<DropdownSeparator />
-				<DropdownLabel>{ this.props.translate( 'By Month' ) }</DropdownLabel>
-				{ previousMonths.map( function( month, index ) {
+				<DropdownLabel>{ translate( 'By Month' ) }</DropdownLabel>
+				{ dateFilters.map( function( { count, title, value }, index ) {
 					let analyticsEvent = 'Current Month';
 
 					if ( 1 === index ) {
@@ -123,17 +130,8 @@ class TransactionsHeader extends React.Component {
 						analyticsEvent = index + ' Months Before';
 					}
 
-					return this.renderDatePicker(
-						month.format( 'MMM YYYY' ),
-						month.format( 'MMM YYYY' ),
-						{ month: month },
-						analyticsEvent
-					);
+					return this.renderDatePicker( index, title, value, count, analyticsEvent );
 				}, this ) }
-
-				{ this.renderDatePicker( 'Older', this.props.translate( 'Older' ), {
-					before: last( previousMonths ),
-				} ) }
 			</SelectDropdown>
 		);
 	}
@@ -149,85 +147,77 @@ class TransactionsHeader extends React.Component {
 		this.setState( { activePopover: activePopover } );
 	}
 
-	renderDatePicker( titleKey, titleTranslated, date, analyticsEvent ) {
-		const filter = { date };
-		const currentDate = this.props.filter.date || {};
-		let isSelected;
-
-		if ( date.newest ) {
-			isSelected = date.newest === currentDate.newest;
-		} else if ( date.month && currentDate.month ) {
-			isSelected = date.month.isSame( currentDate.month, 'month' );
-		} else if ( date.before ) {
-			isSelected = Boolean( currentDate.before );
-		} else {
-			isSelected = false;
-		}
-
+	renderDatePicker( titleKey, titleTranslated, value, count, analyticsEvent ) {
+		const currentDate = this.props.filter.date;
+		const isSelected = isEqual( currentDate, value );
 		analyticsEvent = 'undefined' === typeof analyticsEvent ? titleKey : analyticsEvent;
 
 		return (
 			<DropdownItem
 				key={ titleKey }
 				selected={ isSelected }
-				onClick={ this.getDatePopoverItemClickHandler( analyticsEvent, filter ) }
-				count={ date.newest ? null : this.getFilterCount( filter ) }
+				onClick={ this.getDatePopoverItemClickHandler( analyticsEvent, value ) }
+				count={ count }
 			>
 				{ titleTranslated }
 			</DropdownItem>
 		);
 	}
 
-	handlePickerSelection( filter ) {
-		this.setFilter( filter );
-		this.setState( { searchValue: '' } );
-	}
-
-	getFilterCount( filter ) {
-		if ( ! this.props.transactions ) {
-			return;
-		}
-
-		return tableRows.filter( this.props.transactions, filter ).length;
-	}
-
 	renderAppsPopover() {
+		const { appFilters, filter, translate } = this.props;
+		const selectedFilter = find( appFilters, { value: filter.app } );
+		const selectedText = selectedFilter ? selectedFilter.title : translate( 'All Apps' );
+
 		return (
 			<SelectDropdown
-				selectedText={ this.props.translate( 'All Apps' ) }
+				selectedText={ selectedText }
 				onClick={ this.handleAppsPopoverLinkClick }
 				className="billing-history__transactions-header-select-dropdown"
 			>
-				<DropdownLabel>{ this.props.translate( 'App Name' ) }</DropdownLabel>
-				{ this.renderAppPicker( this.props.translate( 'All Apps' ), 'all' ) }
-				{ this.getApps().map( function( app ) {
-					return this.renderAppPicker( app, app, 'Specific App' );
+				<DropdownLabel>{ translate( 'App Name' ) }</DropdownLabel>
+				{ this.renderAppPicker( translate( 'All Apps' ), 'all' ) }
+				{ appFilters.map( function( { title, value, count } ) {
+					return this.renderAppPicker( title, value, count, 'Specific App' );
 				}, this ) }
 			</SelectDropdown>
 		);
 	}
 
-	getApps() {
-		return uniq( map( this.props.transactions, 'service' ) );
-	}
-
-	renderAppPicker( title, app, analyticsEvent ) {
-		const filter = { app };
+	renderAppPicker( title, app, count, analyticsEvent ) {
 		const selected = app === this.props.filter.app;
 
 		return (
 			<DropdownItem
 				key={ app }
 				selected={ selected }
-				onClick={ this.getAppPopoverItemClickHandler( analyticsEvent, filter ) }
-				count={ this.getFilterCount( filter ) }
+				onClick={ this.getAppPopoverItemClickHandler( analyticsEvent, app ) }
+				count={ count }
 			>
 				{ title }
 			</DropdownItem>
 		);
 	}
 }
 
-export default connect( null, {
-	recordGoogleEvent,
-} )( localize( TransactionsHeader ) );
+TransactionsHeader.propTypes = {
+	//connected props
+	appFilters: PropTypes.array.isRequired,
+	dateFilters: PropTypes.array.isRequired,
+	filter: PropTypes.object.isRequired,
+	//own props
+	transactionType: PropTypes.string.isRequired,
+};
+
+export default connect(
+	( state, { transactionType } ) => ( {
+		appFilters: getBillingTransactionAppFilterValues( state, transactionType ),
+		dateFilters: getBillingTransactionDateFilterValues( state, transactionType ),
+		filter: getBillingTransactionFilters( state, transactionType ),
+	} ),
+	{
+		recordGoogleEvent,
+		setApp,
+		setDate,
+	}
+)( localize( TransactionsHeader ) );