feat(ads): marketplace settings wizard

assets/wizards/advertising/views/marketplace/index.js

@@ -17,6 +17,7 @@ import { archive, payment, cog, arrowLeft } from '@wordpress/icons';
 import Router from '../../../../components/src/proxied-imports/router';
 import { Grid, Card, ButtonCard, withWizardScreen } from '../../../../components/src';
 
+import Settings from './settings';
 import Products from './products';
 import Orders from './orders';
 import Order from './components/order';
@@ -153,7 +154,7 @@ const Marketplace = ( { adUnits, gam } ) => {
 						path="/marketplace/orders"
 						render={ () => <Orders orders={ orders } onOrderUpdate={ handleOrderUpdate } /> }
 					/>
-					<Route path="/marketplace/settings" render={ () => null } />
+					<Route path="/marketplace/settings" render={ () => <Settings /> } />
 					<Redirect to="/marketplace" />
 				</Switch>
 			</HashRouter>

assets/wizards/advertising/views/marketplace/settings/index.js

@@ -0,0 +1,98 @@
+/* globals newspack_ads_wizard */
+/**
+ * Ad Unit Management Screens.
+ */
+
+/**
+ * WordPress dependencies
+ */
+import apiFetch from '@wordpress/api-fetch';
+import { useEffect, useState } from '@wordpress/element';
+import { TextControl, CheckboxControl, Spinner, Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { Grid, Card } from '../../../../../components/src';
+
+/**
+ * Advertising Marketplace Products Screen.
+ */
+export default function MarketplaceSettings() {
+	const [ settings, setSettings ] = useState( {} );
+	const [ inFlight, setInFlight ] = useState( false );
+	useEffect( () => {
+		setInFlight( true );
+		apiFetch( {
+			path: `/newspack-ads/v1/marketplace/settings`,
+		} )
+			.then( data => {
+				setSettings( data );
+			} )
+			.catch( err => {
+				console.log( err );
+			} )
+			.finally( () => setInFlight( false ) );
+	}, [] );
+	const save = () => {
+		setInFlight( true );
+		apiFetch( {
+			path: `/newspack-ads/v1/marketplace/settings`,
+			method: 'POST',
+			data: settings,
+		} )
+			.then( data => {
+				setSettings( data );
+			} )
+			.catch( err => {
+				console.log( err );
+			} )
+			.finally( () => setInFlight( false ) );
+	};
+	if ( inFlight && ! Object.keys( settings ).length ) {
+		return <Spinner />;
+	}
+	return (
+		<>
+			<h2>{ __( 'Marketplace Settings', 'newspack' ) }</h2>
+			<Grid columns={ 1 } gutter={ 32 }>
+				<CheckboxControl
+					label={ __( 'Send email notification', 'newspack' ) }
+					help={ __(
+						'Whether to send an email notification on every new marketplace order placed.',
+						'newspack'
+					) }
+					disabled={ inFlight }
+					checked={ settings.enable_email_notification }
+					onChange={ enable_email_notification => {
+						setSettings( { ...settings, enable_email_notification } );
+					} }
+				/>
+				<p>
+					{ __(
+						'Make sure you also have email notifications enabled for new orders on WooCommerce settings:',
+						'newspack'
+					) }{ ' ' }
+					<a href={ newspack_ads_wizard.wc_email_settings_url } target="_blank" rel="noreferrer">
+						{ __( 'WooCommerce > Settings > Emails', 'newspack' ) }
+					</a>
+				</p>
+				<TextControl
+					label={ __( 'Email address for notifications', 'newspack' ) }
+					help={ __( 'Email address to send notifications to.', 'newspack' ) }
+					disabled={ inFlight }
+					value={ settings.notification_email_address }
+					onChange={ notification_email_address => {
+						setSettings( { ...settings, notification_email_address } );
+					} }
+				/>
+			</Grid>
+			<Card buttonsCard noBorder className="justify-end">
+				<Button isPrimary onClick={ save } disabled={ inFlight }>
+					{ __( 'Save Changes', 'newspack' ) }
+				</Button>
+			</Card>
+		</>
+	);
+}

includes/wizards/class-advertising-wizard.php

@@ -508,8 +508,9 @@ public function enqueue_scripts_and_styles() {
 			'newspack-advertising-wizard',
 			'newspack_ads_wizard',
 			array(
-				'iab_sizes'         => function_exists( '\Newspack_Ads\get_iab_sizes' ) ? \Newspack_Ads\get_iab_sizes() : [],
-				'mediakit_edit_url' => get_option( 'pmk-page' ) ? get_edit_post_link( get_option( 'pmk-page' ) ) : '',
+				'iab_sizes'             => function_exists( '\Newspack_Ads\get_iab_sizes' ) ? \Newspack_Ads\get_iab_sizes() : [],
+				'mediakit_edit_url'     => get_option( 'pmk-page' ) ? get_edit_post_link( get_option( 'pmk-page' ) ) : '',
+				'wc_email_settings_url' => admin_url( 'admin.php?page=wc-settings&tab=email' ),
 			)
 		);
 	}