Add Campaigns card in Multichannel Marketing page

plugins/woocommerce-admin/client/marketing/data-multichannel/action-types.ts

@@ -7,4 +7,5 @@ export const TYPES = {
 		'RECEIVE_RECOMMENDED_CHANNELS_SUCCESS' as const,
 	RECEIVE_RECOMMENDED_CHANNELS_ERROR:
 		'RECEIVE_RECOMMENDED_CHANNELS_ERROR' as const,
+	RECEIVE_CAMPAIGNS: 'RECEIVE_CAMPAIGNS' as const,
 };

plugins/woocommerce-admin/client/marketing/data-multichannel/actions.ts

@@ -2,7 +2,12 @@
  * Internal dependencies
  */
 import { TYPES } from './action-types';
-import { ApiFetchError, RegisteredChannel, RecommendedChannel } from './types';
+import {
+	ApiFetchError,
+	RegisteredChannel,
+	RecommendedChannel,
+	Campaign,
+} from './types';
 
 export const receiveRegisteredChannelsSuccess = (
 	channels: Array< RegisteredChannel >
@@ -38,9 +43,42 @@ export const receiveRecommendedChannelsError = ( error: ApiFetchError ) => {
 	};
 };
 
+type CampaignsSuccessResponse = {
+	payload: Array< Campaign >;
+	error: false;
+	meta: {
+		page: number;
+		perPage: number;
+		total?: number;
+	};
+};
+
+type CampaignsFailResponse = {
+	payload: ApiFetchError;
+	error: true;
+	meta: {
+		page: number;
+		perPage: number;
+		total?: number;
+	};
+};
+
+type CampaignsResponse = CampaignsSuccessResponse | CampaignsFailResponse;
+
+/**
+ * Create a "RECEIVE_CAMPAIGNS" action object.
+ */
+export const receiveCampaigns = ( response: CampaignsResponse ) => {
+	return {
+		type: TYPES.RECEIVE_CAMPAIGNS,
+		...response,
+	};
+};
+
 export type Action = ReturnType<
 	| typeof receiveRegisteredChannelsSuccess
 	| typeof receiveRegisteredChannelsError
 	| typeof receiveRecommendedChannelsSuccess
 	| typeof receiveRecommendedChannelsError
+	| typeof receiveCampaigns
 >;

plugins/woocommerce-admin/client/marketing/data-multichannel/controls.ts

@@ -0,0 +1,23 @@
+/**
+ * External dependencies
+ */
+import { controls as dataControls } from '@wordpress/data-controls';
+import { AnyAction } from 'redux';
+
+export const awaitResponseJson = (
+	response: Response
+): AnyAction & { response: Response } => {
+	return {
+		type: 'AWAIT_RESPONSE_JSON',
+		response,
+	};
+};
+
+const controls = {
+	...dataControls,
+	AWAIT_RESPONSE_JSON( action: AnyAction ) {
+		return action.response.json();
+	},
+};
+
+export default controls;

plugins/woocommerce-admin/client/marketing/data-multichannel/index.ts

@@ -3,14 +3,14 @@
  */
 import { createReduxStore, register } from '@wordpress/data';
 import { Reducer, AnyAction } from 'redux';
-import { controls } from '@wordpress/data-controls';
 
 /**
  * Internal dependencies
  */
 import { State } from './types';
 import { STORE_KEY } from './constants';
 import { reducer } from './reducer';
+import controls from './controls';
 import * as actions from './actions';
 import * as selectors from './selectors';
 import * as resolvers from './resolvers';

plugins/woocommerce-admin/client/marketing/data-multichannel/reducer.ts

@@ -20,6 +20,11 @@ const initialState = {
 		data: undefined,
 		error: undefined,
 	},
+	campaigns: {
+		perPage: undefined,
+		pages: undefined,
+		total: undefined,
+	},
 };
 
 export const reducer: Reducer< State, Action > = (
@@ -55,6 +60,26 @@ export const reducer: Reducer< State, Action > = (
 					error: action.payload,
 				},
 			};
+
+		case TYPES.RECEIVE_CAMPAIGNS:
+			return {
+				...state,
+				campaigns: {
+					perPage: action.meta.perPage,
+					pages: {
+						...state.campaigns.pages,
+						[ action.meta.page ]: action.error
+							? {
+									error: action.payload,
+							  }
+							: {
+									data: action.payload,
+							  },
+					},
+					total: action.meta.total,
+				},
+			};
+
 		default:
 			return state;
 	}

plugins/woocommerce-admin/client/marketing/data-multichannel/resolvers.ts

@@ -11,8 +11,15 @@ import {
 	receiveRegisteredChannelsError,
 	receiveRecommendedChannelsSuccess,
 	receiveRecommendedChannelsError,
+	receiveCampaigns,
 } from './actions';
-import { RegisteredChannel, RecommendedChannel } from './types';
+import { awaitResponseJson } from './controls';
+import {
+	RegisteredChannel,
+	RecommendedChannel,
+	Campaign,
+	ApiFetchError,
+} from './types';
 import { API_NAMESPACE } from './constants';
 import { isApiFetchError } from './guards';
 
@@ -47,3 +54,63 @@ export function* getRecommendedChannels() {
 		throw error;
 	}
 }
+
+/**
+ * Get total number of records from the HTTP response header "x-wp-total".
+ *
+ * If the header is not present, then the function will return `undefined`.
+ */
+const getTotalFromResponse = ( response: Response ) => {
+	const total = response.headers.get( 'x-wp-total' );
+
+	if ( total === null ) {
+		return undefined;
+	}
+
+	return parseInt( total, 10 );
+};
+
+/**
+ * Get campaigns from API backend.
+ *
+ * @param  page    Page number. First page is `1`.
+ * @param  perPage Page size, i.e. number of records in one page.
+ */
+export function* getCampaigns( page: number, perPage: number ) {
+	try {
+		const response: Response = yield apiFetch( {
+			path: `${ API_NAMESPACE }/campaigns?page=${ page }&per_page=${ perPage }`,
+			parse: false,
+		} );
+
+		const total = getTotalFromResponse( response );
+		const payload: Campaign[] = yield awaitResponseJson( response );
+
+		yield receiveCampaigns( {
+			payload,
+			error: false,
+			meta: {
+				page,
+				perPage,
+				total,
+			},
+		} );
+	} catch ( error ) {
+		if ( error instanceof Response ) {
+			const total = getTotalFromResponse( error );
+			const payload: ApiFetchError = yield awaitResponseJson( error );
+
+			yield receiveCampaigns( {
+				payload,
+				error: true,
+				meta: {
+					page,
+					perPage,
+					total,
+				},
+			} );
+		}
+
+		throw error;
+	}
+}

plugins/woocommerce-admin/client/marketing/data-multichannel/selectors.ts

@@ -10,3 +10,10 @@ export const getRegisteredChannels = ( state: State ) => {
 export const getRecommendedChannels = ( state: State ) => {
 	return state.recommendedChannels;
 };
+
+/**
+ * Get campaigns from state.
+ */
+export const getCampaigns = ( state: State ) => {
+	return state.campaigns;
+};

plugins/woocommerce-admin/client/marketing/data-multichannel/types.ts

@@ -50,7 +50,30 @@ export type RecommendedChannelsState = {
 	error?: ApiFetchError;
 };
 
+export type Campaign = {
+	id: string;
+	channel: string;
+	title: string;
+	manage_url: string;
+	cost: {
+		value: string;
+		currency: string;
+	};
+};
+
+export type CampaignsPage = {
+	data?: Array< Campaign >;
+	error?: ApiFetchError;
+};
+
+export type CampaignsState = {
+	perPage?: number;
+	pages?: Record< number, CampaignsPage >;
+	total?: number;
+};
+
 export type State = {
 	registeredChannels: RegisteredChannelsState;
 	recommendedChannels: RecommendedChannelsState;
+	campaigns: CampaignsState;
 };

plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/Campaigns.scss

@@ -0,0 +1,59 @@
+.woocommerce-marketing-campaigns-card {
+	&__content {
+		width: 50%;
+		margin: auto;
+		text-align: center;
+	}
+
+	&__content-icon {
+		background-color: $studio-gray-0;
+		border-radius: 28px;
+		margin-bottom: $gap-smallest;
+
+		&--error {
+			fill: $alert-red;
+		}
+
+		&--empty {
+			fill: $studio-woocommerce-purple-50;
+		}
+	}
+
+	&__content-title {
+		@include font-size( 13 );
+		font-weight: 600;
+		line-height: 16px;
+		color: $gray-900;
+		margin-bottom: $gap-smallest;
+	}
+
+	&__content-description {
+		color: $gray-700;
+		margin-bottom: $gap-smallest;
+	}
+
+	&__campaign-logo {
+		img {
+			display: block;
+		}
+	}
+
+	&__campaign-title {
+		a {
+			color: #007cba;
+			font-weight: 600;
+			text-decoration: none;
+		}
+	}
+
+	&__campaign-description {
+		color: $gray-700;
+	}
+
+	&__footer {
+		justify-content: center;
+
+		// Remove the border-top because the table cells already has a border-bottom.
+		border-top: none;
+	}
+}