diff --git a/assets/components/src/tabbed-navigation/index.js b/assets/components/src/tabbed-navigation/index.js index 5facf75c05..c6f08d85e6 100644 --- a/assets/components/src/tabbed-navigation/index.js +++ b/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; } } diff --git a/assets/wizards/advertising/index.js b/assets/wizards/advertising/index.js index ef86f8bf76..9e9de3b218 100644 --- a/assets/wizards/advertising/index.js +++ b/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 } /> ) } /> diff --git a/assets/wizards/advertising/views/marketplace/index.js b/assets/wizards/advertising/views/marketplace/index.js index 678311c248..1b334a1c75 100644 --- a/assets/wizards/advertising/views/marketplace/index.js +++ b/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'; @@ -24,9 +25,9 @@ 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 } ) => { ) } /> - } /> + } + /> } /> - null } /> + } + /> ); -}; +} export default withWizardScreen( Marketplace ); diff --git a/assets/wizards/advertising/views/marketplace/products/index.js b/assets/wizards/advertising/views/marketplace/products/index.js index f2bc3d5109..276ee2a3f4 100644 --- a/assets/wizards/advertising/views/marketplace/products/index.js +++ b/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 ); diff --git a/assets/wizards/advertising/views/marketplace/settings/index.js b/assets/wizards/advertising/views/marketplace/settings/index.js new file mode 100644 index 0000000000..5fa51a7f4a --- /dev/null +++ b/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 ; + } + return ( + <> +

{ __( 'Marketplace Settings', 'newspack' ) }

+ + { error && } + { + setSettings( { ...settings, enable_email_notification } ); + } } + /> +

+ { __( + 'Make sure you also have email notifications enabled for new orders on WooCommerce settings:', + 'newspack' + ) }{ ' ' } + + { __( 'WooCommerce > Settings > Emails', 'newspack' ) } + +

+ { + setSettings( { ...settings, notification_email_address } ); + } } + /> +
+ + + + + ); +} diff --git a/assets/wizards/engagement/index.js b/assets/wizards/engagement/index.js index 00ae389047..1c6c553c7b 100644 --- a/assets/wizards/engagement/index.js +++ b/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' ), diff --git a/assets/wizards/popups/index.js b/assets/wizards/popups/index.js index cb303f6e6f..efae8ee720 100644 --- a/assets/wizards/popups/index.js +++ b/assets/wizards/popups/index.js @@ -42,6 +42,7 @@ const tabbedNavigation = [ label: __( 'Segments', 'newpack' ), path: '/segments', exact: true, + activeTabPaths: [ '/segments/*' ], }, { label: __( 'Analytics', 'newpack' ), diff --git a/includes/wizards/class-advertising-wizard.php b/includes/wizards/class-advertising-wizard.php index 0f196d2e95..5b3548751f 100644 --- a/includes/wizards/class-advertising-wizard.php +++ b/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' ), ) ); }