display the total clicks and total impressions in advertising pages

client/data/promote-post/types.ts

@@ -105,5 +105,9 @@ export type CampaignQueryResult = {
 	total_pages: number;
 	page: number;
 	has_more_pages: boolean;
+	campaigns_stats: {
+		total_impressions: number;
+		total_clicks: number;
+	};
 	warnings?: PromotePostWarning[];
 };

client/data/promote-post/use-promote-post-campaigns-query-paged.ts

@@ -42,14 +42,15 @@ const useCampaignsQueryPaged = (
 				searchCampaignsUrl
 			);
 
-			const { campaigns, page, total_items, total_pages } = resultQuery;
+			const { campaigns, page, total_items, total_pages, campaigns_stats } = resultQuery;
 			const has_more_pages = page < total_pages;
 
 			return {
 				campaigns,
 				has_more_pages,
 				total_items,
 				total_pages,
+				campaigns_stats,
 				page,
 			};
 		},

client/my-sites/promote-post-i2/components/campaigns-total-stats/index.tsx

@@ -0,0 +1,34 @@
+import { translate } from 'i18n-calypso';
+import { formatNumber } from '../../utils';
+import './style.scss';
+
+type Props = {
+	totalImpressions?: number;
+	totalClicks?: number;
+	outerContainerClass?: string;
+};
+
+export default function CampaignsTotalStats( {
+	totalImpressions,
+	totalClicks,
+	outerContainerClass,
+}: Props ) {
+	return (
+		<div className={ outerContainerClass }>
+			<div className="campaigns-total-stats__container">
+				<div className="campaigns-total-stats__item">
+					<div className="campaigns-total-stats__label">
+						{ translate( 'Total people reached' ) }
+					</div>
+					<div className="campaigns-total-stats__result">
+						{ formatNumber( totalImpressions || 0 ) }
+					</div>
+				</div>
+				<div className="campaigns-total-stats__item">
+					<div className="campaigns-total-stats__label">{ translate( 'Total clicks' ) }</div>
+					<div className="campaigns-total-stats__result">{ formatNumber( totalClicks || 0 ) }</div>
+				</div>
+			</div>
+		</div>
+	);
+}

client/my-sites/promote-post-i2/components/campaigns-total-stats/style.scss

@@ -0,0 +1,57 @@
+@import "@automattic/components/src/styles/typography";
+@import "@automattic/color-studio/dist/color-variables";
+@import "@wordpress/base-styles/breakpoints";
+
+@mixin blazepress-animated-skeleton {
+	background-color: hsl(200, 20%, 90%);
+	animation: skeleton-loading 1s linear infinite alternate;
+
+	@keyframes skeleton-loading {
+		0% {
+			background-color: #eceded;
+		}
+		100% {
+			background-color: #e6e7e7;
+		}
+	}
+}
+
+.campaigns-total-stats {
+	&__container {
+		display: flex;
+		gap: 50px;
+
+	}
+
+	&__label {
+		font-size: 0.875rem;
+		color: $studio-gray-100;
+		font-family: $font-sf-pro-text;
+		font-weight: 500;
+		margin-top: 34px;
+	}
+	&__item {
+		font-size: 1.75rem;
+		color: $studio-gray-100;
+		font-family: $font-recoleta;
+		font-weight: 400;
+		margin-top: 8px;
+		margin-bottom: 42px;
+	}
+
+	&__flexible-skeleton {
+		border-radius: 4px;
+		display: inline-block;
+		overflow: hidden;
+		position: relative;
+		max-width: 250px;
+		height: 16px;
+		width: 100%;
+
+		@include blazepress-animated-skeleton;
+	}
+
+
+}
+
+

client/my-sites/promote-post-i2/main.tsx

@@ -38,6 +38,7 @@ import { useSelector } from 'calypso/state';
 import { getSelectedSite } from 'calypso/state/ui/selectors';
 import BlazePageViewTracker from './components/blaze-page-view-tracker';
 import BlazePluginBanner from './components/blaze-plugin-banner';
+import CampaignsTotalStats from './components/campaigns-total-stats';
 import CreditBalance from './components/credit-balance';
 import MainWrapper from './components/main-wrapper';
 import PostsListBanner from './components/posts-list-banner';
@@ -69,6 +70,10 @@ export type PagedBlazeContentData = {
 	total_items?: number;
 	items?: BlazePagedItem[];
 	warnings?: PromotePostWarning[];
+	campaigns_stats?: {
+		total_impressions: number;
+		total_clicks: number;
+	};
 };
 
 export type PagedBlazeSearchResponse = {
@@ -119,10 +124,11 @@ export default function PromotedPosts( { tab }: Props ) {
 	const { data, isLoading: isLoadingBillingSummary } = useBillingSummaryQuery();
 	const paymentBlocked = data?.paymentsBlocked ?? false;
 
-	const { has_more_pages: campaignsHasMorePages, items: pagedCampaigns } = getPagedBlazeSearchData(
-		'campaigns',
-		campaignsData
-	);
+	const {
+		has_more_pages: campaignsHasMorePages,
+		items: pagedCampaigns,
+		campaigns_stats: campaignsStats,
+	} = getPagedBlazeSearchData( 'campaigns', campaignsData );
 
 	const { total_items: totalCampaignsUnfiltered } = getPagedBlazeSearchData(
 		'campaigns',
@@ -299,6 +305,11 @@ export default function PromotedPosts( { tab }: Props ) {
 				// TODO: Uncomment when DebtNotifier is implemented
 				/* <DebtNotifier /> */
 			 }
+			<CampaignsTotalStats
+				totalImpressions={ campaignsStats?.total_impressions }
+				totalClicks={ campaignsStats?.total_clicks }
+				outerContainerClass={ ! showBanner ? 'promote-post-i2__divider' : '' }
+			/>
 
 			<PromotePostTabBar tabs={ tabs } selectedTab={ selectedTab } />
 

client/my-sites/promote-post-i2/style.scss

@@ -177,12 +177,18 @@ body.is-section-promote-post-i2 {
 					}
 				}
 
+				.promote-post-i2__divider {
+					width: 100%;
+					border-top: 1px solid rgba(0, 0, 0, 0.05);
+					margin-top: 32px;
+				}
 				.promote-post-i2__header-subtitle_mobile,
 				.promote-post-i2__search-bar-wrapper,
 				.promote-post-i2__aux-wrapper,
 				.posts-list__table,
 				.campaigns-list__table,
 				.posts-list__loading-container,
+				.campaigns-total-stats__container,
 				.promote-post-i2__table,
 				.campaigns-list__loading-container {
 					margin: 0 64px;
@@ -499,6 +505,7 @@ body.is-section-promote-post-i2 {
 				.promote-post-i2__debt-notifier,
 				.posts-list__table,
 				.posts-list__loading-container,
+				.campaigns-total-stats__container,
 				.promote-post-i2__table,
 				.campaigns-list__loading-container {
 					margin: 0 16px !important;
@@ -610,6 +617,7 @@ $break-medium-expanded-menu: $break-medium + 272px;
 	.promote-post-i2__table,
 	.promote-post-i2__aux-wrapper,
 	.promote-post-i2__debt-notifier,
+	.campaigns-total-stats__container,
 	.posts-list-banner__container .posts-list-banner__content,
 	.posts-list-woo-banner__container .posts-list-banner__content {
 		margin-left: auto;

client/my-sites/promote-post-i2/utils/index.ts

@@ -262,6 +262,15 @@ export const getPagedBlazeSearchData = (
 	pagedData?: InfiniteData< CampaignQueryResult | PostQueryResult >
 ): PagedBlazeContentData => {
 	const lastPage = pagedData?.pages?.[ pagedData?.pages?.length - 1 ];
+
+	const campaigns_stats =
+		lastPage && 'campaigns_stats' in lastPage
+			? lastPage.campaigns_stats
+			: {
+					total_impressions: 0,
+					total_clicks: 0,
+			  };
+
 	if ( lastPage ) {
 		const { has_more_pages, total_items, warnings } = lastPage;
 
@@ -281,6 +290,7 @@ export const getPagedBlazeSearchData = (
 
 		return {
 			has_more_pages,
+			campaigns_stats,
 			total_items,
 			items: foundContent,
 			warnings,