A4A: Add Timeframe column with per site estimated commissions

client/a8c-for-agencies/sections/referrals/hooks/use-get-payout-data.ts

@@ -4,6 +4,7 @@ import {
 	getCurrentCycleActivityWindow,
 	getNextPayoutDate,
 	getNextPayoutDateActivityWindow,
+	areNextAndCurrentPayoutDatesEqual,
 } from '../lib/get-next-payout-date';
 
 const formatDateWithYear = ( date: Date ) =>
@@ -37,8 +38,7 @@ export default function useGetPayoutData() {
 				currentCycleWindow.start,
 				currentCycleWindow.finish
 			),
-			areNextAndCurrentPayoutDatesEqual:
-				nextPayoutDateRaw.getTime() === currentCyclePayoutDateRaw.getTime(),
+			areNextAndCurrentPayoutDatesEqual: areNextAndCurrentPayoutDatesEqual( now ),
 			isFullQuarter:
 				new Date().toLocaleDateString() === currentCycleWindow.finish.toLocaleDateString(),
 		};

client/a8c-for-agencies/sections/referrals/lib/get-next-payout-date.ts

@@ -88,3 +88,9 @@ export const getCurrentCycleActivityWindow = ( currentDate: Date ) => {
 		finish: new Date( currentYear, activityEnd.month - 1, activityEnd.day ),
 	};
 };
+
+export const areNextAndCurrentPayoutDatesEqual = ( currentDate: Date ): boolean => {
+	const nextPayoutDate = getNextPayoutDate( currentDate );
+	const currentCyclePayoutDate = getCurrentCyclePayoutDate( currentDate );
+	return nextPayoutDate.getTime() === currentCyclePayoutDate.getTime();
+};

client/a8c-for-agencies/sections/woopayments/dashboard-content/mobile-view.tsx

@@ -9,7 +9,12 @@ import {
 import TextPlaceholder from 'calypso/a8c-for-agencies/components/text-placeholder';
 import { useWooPaymentsContext } from '../context';
 import { getSiteData } from '../lib/site-data';
-import { SiteColumn, WooPaymentsStatusColumn, CommissionsPaidColumn } from './site-columns';
+import {
+	SiteColumn,
+	WooPaymentsStatusColumn,
+	CommissionsPaidColumn,
+	TimeframeCommissionsColumn,
+} from './site-columns';
 import type { SitesWithWooPaymentsState } from '../types';
 
 export default function SitesWithWooPaymentsMobileView( {
@@ -44,6 +49,17 @@ export default function SitesWithWooPaymentsMobileView( {
 								) }
 							</div>
 						</ListItemCardContent>
+						<ListItemCardContent title={ translate( 'Timeframe Commissions' ) }>
+							<div className="sites-with-woopayments-list-mobile-view__column">
+								{ isLoadingWooPaymentsData ? (
+									<TextPlaceholder />
+								) : (
+									<TimeframeCommissionsColumn
+										estimatedPayout={ getSiteData( woopaymentsData, item.blogId ).estimatedPayout }
+									/>
+								) }
+							</div>
+						</ListItemCardContent>
 						<ListItemCardContent title={ translate( 'Review status' ) }>
 							<WooPaymentsStatusColumn state={ item.state } siteId={ item.blogId } />
 						</ListItemCardContent>

client/a8c-for-agencies/sections/woopayments/dashboard-content/site-columns.tsx

@@ -16,6 +16,18 @@ export const SiteColumn = ( { site }: { site: string } ) => {
 export const CommissionsPaidColumn = memo( ( { payout }: { payout: number | null } ) => {
 	return payout ? formatCurrency( payout, 'USD', { stripZeros: true } ) : <Gridicon icon="minus" />;
 } );
+CommissionsPaidColumn.displayName = 'CommissionsPaidColumn';
+
+export const TimeframeCommissionsColumn = memo(
+	( { estimatedPayout }: { estimatedPayout: number | null } ) => {
+		return estimatedPayout ? (
+			formatCurrency( estimatedPayout, 'USD', { stripZeros: true } )
+		) : (
+			<Gridicon icon="minus" />
+		);
+	}
+);
+TimeframeCommissionsColumn.displayName = 'TimeframeCommissionsColumn';
 
 CommissionsPaidColumn.displayName = 'CommissionsPaidColumn';
 

client/a8c-for-agencies/sections/woopayments/dashboard-content/sites-with-woopayments.tsx

@@ -14,7 +14,12 @@ import { useWooPaymentsContext } from '../context';
 import { useDownloadCommissionsReport } from '../hooks/use-download-commissions-report';
 import { getSiteData } from '../lib/site-data';
 import SitesWithWooPaymentsMobileView from './mobile-view';
-import { SiteColumn, CommissionsPaidColumn, WooPaymentsStatusColumn } from './site-columns';
+import {
+	SiteColumn,
+	CommissionsPaidColumn,
+	TimeframeCommissionsColumn,
+	WooPaymentsStatusColumn,
+} from './site-columns';
 import type { SitesWithWooPaymentsState } from '../types';
 
 export default function SitesWithWooPayments() {
@@ -41,7 +46,7 @@ export default function SitesWithWooPayments() {
 
 	const [ dataViewsState, setDataViewsState ] = useState< DataViewsState >( {
 		...initialDataViewsState,
-		fields: [ 'site', 'commissionsPaid', 'woopaymentsStatus' ],
+		fields: [ 'site', 'commissionsPaid', 'timeframeCommissions', 'woopaymentsStatus' ],
 	} );
 
 	const fields = useMemo(
@@ -70,6 +75,20 @@ export default function SitesWithWooPayments() {
 				enableHiding: false,
 				enableSorting: false,
 			},
+			{
+				id: 'timeframeCommissions',
+				label: translate( 'Timeframe Commissions' ).toUpperCase(),
+				getValue: () => '-',
+				render: ( { item } ) => {
+					if ( isLoadingWooPaymentsData ) {
+						return <TextPlaceholder />;
+					}
+					const { estimatedPayout } = getSiteData( woopaymentsData, item.blogId );
+					return <TimeframeCommissionsColumn estimatedPayout={ estimatedPayout } />;
+				},
+				enableHiding: false,
+				enableSorting: false,
+			},
 			{
 				id: 'woopaymentsStatus',
 				label: translate( 'WooPayments Status' ).toUpperCase(),

client/a8c-for-agencies/sections/woopayments/lib/site-data.ts

@@ -1,14 +1,37 @@
+import { areNextAndCurrentPayoutDatesEqual } from '../../referrals/lib/get-next-payout-date';
 import { WooPaymentsData } from '../types';
 
 interface WooPaymentsSiteData {
 	transactions: number | null;
 	payout: number | null;
+	estimatedPayout: number | null;
 }
 
 export const getSiteData = (
 	woopaymentsData: WooPaymentsData,
 	siteId: number
-): WooPaymentsSiteData => ( {
-	transactions: woopaymentsData?.data?.total?.sites?.[ siteId ]?.transactions ?? 0,
-	payout: woopaymentsData?.data?.total?.sites?.[ siteId ]?.payout ?? 0,
-} );
+): WooPaymentsSiteData => {
+	const siteData = woopaymentsData?.data?.total?.sites?.[ siteId ];
+	const sitePayout = siteData?.payout ?? 0;
+	const siteTransactions = siteData?.transactions ?? 0;
+
+	// Get estimated payout from current quarter
+	const currentQuarterEstimate =
+		woopaymentsData?.data?.estimated?.current_quarter?.sites?.[ siteId ]?.payout ?? 0;
+
+	// Get estimated payout from previous quarter
+	const previousQuarterEstimate =
+		woopaymentsData?.data?.estimated?.previous_quarter?.sites?.[ siteId ]?.payout ?? 0;
+
+	// If next and current payout dates are not equal, add previous quarter estimate
+	const now = new Date();
+	const estimatedPayout = areNextAndCurrentPayoutDatesEqual( now )
+		? currentQuarterEstimate
+		: currentQuarterEstimate + previousQuarterEstimate;
+
+	return {
+		transactions: siteTransactions,
+		payout: sitePayout,
+		estimatedPayout,
+	};
+};

client/a8c-for-agencies/sections/woopayments/types.ts

@@ -35,8 +35,27 @@ export interface WooPaymentsData {
 			};
 		};
 		estimated?: WooPaymentsDataObject & {
-			current_quarter: WooPaymentsDataObject;
-			previous_quarter: WooPaymentsDataObject;
+			sites?: {
+				[ key: number ]: WooPaymentsDataObject;
+			};
+			current_quarter: WooPaymentsDataObject & {
+				sites?: {
+					[ key: number ]: {
+						tpv?: number;
+						payout?: number;
+						transactions?: number;
+					};
+				};
+			};
+			previous_quarter: WooPaymentsDataObject & {
+				sites?: {
+					[ key: number ]: {
+						tpv?: number;
+						payout?: number;
+						transactions?: number;
+					};
+				};
+			};
 		};
 	};
 	status: string;