feat(ads): marketplace settings wizard (#2628)

Co-authored-by: dkoo <[email protected]>
Co-authored-by: Derrick Koo <[email protected]>

assets/components/src/tabbed-navigation/index.js

@@ -25,7 +25,14 @@ const TabbedNavigation = ( { items, className, disableUpcoming, children = null
 							to={ item.path }
 							isActive={ ( match, { pathname } ) => {
 								if ( item.activeTabPaths ) {
-									return item.activeTabPaths.includes( pathname );
+									return item.activeTabPaths.some( path => {
+										if ( path.includes( '/*' ) ) {
+											return path
+												.split( '/*' )
+												.every( part => '' === part || pathname.includes( part ) );
+										}
+										return path === pathname;
+									}, false );
 								}
 								return match;
 							} }

assets/wizards/advertising/index.js

@@ -156,6 +156,7 @@ class AdvertisingWizard extends Component {
 				label: __( 'Providers', 'newspack' ),
 				path: '/',
 				exact: true,
+				activeTabPaths: [ '/', '/google_ad_manager/*' ],
 			},
 			{
 				label: __( 'Placements', 'newspack' ),
@@ -176,6 +177,7 @@ class AdvertisingWizard extends Component {
 			{
 				label: __( 'Marketplace', 'newspack' ),
 				path: '/marketplace',
+				activeTabPaths: [ '/marketplace/*' ],
 			},
 		];
 		return (
@@ -331,6 +333,7 @@ class AdvertisingWizard extends Component {
 									tabbedNavigation={ tabs }
 									adUnits={ adUnits }
 									gam={ services.google_ad_manager }
+									wizardApiFetch={ wizardApiFetch }
 								/>
 							) }
 						/>

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

@@ -17,16 +17,17 @@ 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';
 
 const { HashRouter, Redirect, Route, Switch, useLocation } = Router;
 
 /**
- * Advertising Markplace screen.
+ * Advertising Marketplace screen.
  */
-const Marketplace = ( { adUnits, gam } ) => {
+function Marketplace( { adUnits, gam, wizardApiFetch } ) {
 	const location = useLocation();
 	const [ orders, setOrders ] = useState( [] );
 	const [ inFlight, setInFlight ] = useState( false );
@@ -148,17 +149,23 @@ const Marketplace = ( { adUnits, gam } ) => {
 							</Fragment>
 						) }
 					/>
-					<Route path="/marketplace/products" render={ () => <Products adUnits={ adUnits } /> } />
+					<Route
+						path="/marketplace/products"
+						render={ () => <Products adUnits={ adUnits } wizardApiFetch={ wizardApiFetch } /> }
+					/>
 					<Route
 						path="/marketplace/orders"
 						render={ () => <Orders orders={ orders } onOrderUpdate={ handleOrderUpdate } /> }
 					/>
-					<Route path="/marketplace/settings" render={ () => null } />
+					<Route
+						path="/marketplace/settings"
+						render={ () => <Settings wizardApiFetch={ wizardApiFetch } /> }
+					/>
 					<Redirect to="/marketplace" />
 				</Switch>
 			</HashRouter>
 		</div>
 	);
-};
+}
 
 export default withWizardScreen( Marketplace );

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

@@ -110,15 +110,16 @@ const AdProductEditor = ( {
 /**
  * Advertising Marketplace Products Screen.
  */
-export default function MarketplaceProducts( { adUnits } ) {
+export default function MarketplaceProducts( { adUnits, wizardApiFetch } ) {
 	const [ isEditing, setIsEditing ] = useState( false );
 	const [ placements, setPlacements ] = useState( {} );
 	const [ products, setProducts ] = useState( [] );
 	const [ product, setProduct ] = useState( {} );
 	const [ inFlight, setInFlight ] = useState( false );
 	const fetchPlacements = () => {
-		apiFetch( {
+		wizardApiFetch( {
 			path: `/newspack-ads/v1/placements`,
+			quiet: true,
 		} ).then( data => {
 			for ( const key in data ) {
 				if ( ! data[ key ].data?.ad_unit ) {
@@ -130,8 +131,9 @@ export default function MarketplaceProducts( { adUnits } ) {
 	};
 	const fetchProducts = () => {
 		setInFlight( true );
-		apiFetch( {
+		wizardApiFetch( {
 			path: `/newspack-ads/v1/marketplace/products`,
+			quiet: true,
 		} )
 			.then( data => {
 				setProducts( data );

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

@@ -0,0 +1,104 @@
+/* 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, Notice } from '../../../../../components/src';
+
+/**
+ * Advertising Marketplace Products Screen.
+ */
+export default function MarketplaceSettings( { wizardApiFetch } ) {
+	const [ settings, setSettings ] = useState( {} );
+	const [ inFlight, setInFlight ] = useState( false );
+	const [ error, setError ] = useState( null );
+	useEffect( () => {
+		setInFlight( true );
+		setError( null );
+		if ( ! wizardApiFetch ) return;
+		wizardApiFetch( {
+			path: `/newspack-ads/v1/marketplace/settings`,
+			quiet: true,
+		} )
+			.then( data => {
+				setSettings( data );
+			} )
+			.catch( err => {
+				setError( err );
+			} )
+			.finally( () => setInFlight( false ) );
+	}, [] );
+	const save = () => {
+		setInFlight( true );
+		setError( null );
+		apiFetch( {
+			path: `/newspack-ads/v1/marketplace/settings`,
+			method: 'POST',
+			data: settings,
+		} )
+			.then( data => {
+				setSettings( data );
+			} )
+			.catch( err => {
+				setError( err );
+			} )
+			.finally( () => setInFlight( false ) );
+	};
+	if ( inFlight && ! Object.keys( settings ).length ) {
+		return <Spinner />;
+	}
+	return (
+		<>
+			<h2>{ __( 'Marketplace Settings', 'newspack' ) }</h2>
+			<Grid columns={ 1 } gutter={ 32 }>
+				{ error && <Notice isError noticeText={ error.message } /> }
+				<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>
+		</>
+	);
+}

assets/wizards/engagement/index.js

@@ -86,11 +86,7 @@ class EngagementWizard extends Component {
 				label: __( 'Reader Activation', 'newspack' ),
 				path: '/reader-activation',
 				exact: true,
-				activeTabPaths: [
-					'/reader-activation',
-					'/reader-activation/campaign',
-					'/reader-activation/complete',
-				],
+				activeTabPaths: [ '/reader-activation/*' ],
 			},
 			{
 				label: __( 'Newsletters', 'newspack' ),

assets/wizards/popups/index.js

@@ -42,6 +42,7 @@ const tabbedNavigation = [
 		label: __( 'Segments', 'newpack' ),
 		path: '/segments',
 		exact: true,
+		activeTabPaths: [ '/segments/*' ],
 	},
 	{
 		label: __( 'Analytics', 'newpack' ),

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' ),
 			)
 		);
 	}