diff --git a/src/wizards/advertising/components/placement-control/index.js b/src/wizards/advertising/components/placement-control/index.js index e31879aa31..b07f33f641 100644 --- a/src/wizards/advertising/components/placement-control/index.js +++ b/src/wizards/advertising/components/placement-control/index.js @@ -5,7 +5,7 @@ /** * WordPress dependencies */ -import { Fragment, useState, useEffect } from '@wordpress/element'; +import { Fragment, useState, useEffect, useMemo } from '@wordpress/element'; import { __, sprintf } from '@wordpress/i18n'; /** @@ -87,17 +87,24 @@ const PlacementControl = ( { } ) => { const [ biddersErrors, setBiddersErrors ] = useState( {} ); - // Default provider is GAM or first index if GAM is not active. - const placementProvider = providers.find( provider => provider?.id === ( value.provider || 'gam' ) ) || providers[ 0 ]; + // Ensure incoming value is available otherwise reset to empty values. + const placementProvider = useMemo( + () => ( value.provider ? providers.find( provider => provider?.id === value.provider ) : null ), + [ providers, value.provider ] + ); + const placementAdUnit = useMemo( + () => ( value.ad_unit ? ( placementProvider?.units || [] ).find( u => u.value === value.ad_unit ) : null ), + [ placementProvider, value.ad_unit ] + ); useEffect( () => { const errors = {}; Object.keys( bidders ).forEach( bidderKey => { const bidder = bidders[ bidderKey ]; - const unit = placementProvider?.units.find( u => u.value === value.ad_unit ); - const supported = value.ad_unit && unit && hasAnySize( bidder.ad_sizes, unit.sizes ); + const unit = placementAdUnit; + const supported = placementAdUnit && unit && hasAnySize( bidder.ad_sizes, unit.sizes ); errors[ bidderKey ] = - ! value.ad_unit || ! unit || supported + ! placementAdUnit || ! unit || supported ? null : sprintf( // translators: %s: ad bidder name. @@ -107,7 +114,7 @@ const PlacementControl = ( { ); } ); setBiddersErrors( errors ); - }, [ providers, value.ad_unit ] ); + }, [ placementProvider, placementAdUnit ] ); if ( ! providers.length ) { return ; @@ -118,14 +125,14 @@ const PlacementControl = ( { onChange( { ...value, provider } ) } disabled={ disabled } /> { onChange( {