Merge pull request #8636 from google/issue/8564-pax-extend-ads-settin…

…gs-edit-view

Issue / 8564 PAX Extend Ads Settings Edit View

assets/js/modules/ads/components/settings/SettingsEdit.js

@@ -24,10 +24,14 @@ import { ProgressBar } from 'googlesitekit-components';
 import { MODULES_ADS } from '../../datastore/constants';
 import { CORE_USER } from '../../../../googlesitekit/datastore/user/constants';
 import SettingsForm from './SettingsForm';
+import SettingsView from './SettingsView';
 import AdBlockerWarning from '../common/AdBlockerWarning';
+import { useFeature } from './../../../../hooks/useFeature';
 const { useSelect } = Data;
 
 export default function SettingsEdit() {
+	const paxEnabled = useFeature( 'adsPax' );
+
 	const isDoingSubmitChanges = useSelect( ( select ) =>
 		select( MODULES_ADS ).isDoingSubmitChanges()
 	);
@@ -36,9 +40,19 @@ export default function SettingsEdit() {
 		select( CORE_USER ).isAdBlockerActive()
 	);
 
+	const paxConversionID = useSelect( ( select ) =>
+		select( MODULES_ADS ).getPaxConversionID()
+	);
+
+	const extCustomerID = useSelect( ( select ) =>
+		select( MODULES_ADS ).getExtCustomerID()
+	);
+
 	let viewComponent;
 	if ( isAdBlockerActive ) {
 		viewComponent = <AdBlockerWarning />;
+	} else if ( paxEnabled && ( paxConversionID || extCustomerID ) ) {
+		viewComponent = <SettingsView />;
 	} else if ( isDoingSubmitChanges ) {
 		viewComponent = <ProgressBar />;
 	} else {

assets/js/modules/ads/components/settings/SettingsEdit.stories.js

@@ -0,0 +1,124 @@
+/**
+ * Ads SettingsEdit component stories.
+ *
+ * Site Kit by Google, Copyright 2024 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Internal dependencies
+ */
+import SettingsEdit from './SettingsEdit';
+import { Cell, Grid, Row } from '../../../../material-components';
+import { MODULES_ADS } from '../../datastore/constants';
+import { provideModules } from '../../../../../../tests/js/utils';
+import WithRegistrySetup from '../../../../../../tests/js/WithRegistrySetup';
+
+function Template( args ) {
+	return (
+		<div className="googlesitekit-layout">
+			<div className="googlesitekit-settings-module googlesitekit-settings-module--active googlesitekit-settings-module--ads">
+				<div className="googlesitekit-setup-module">
+					<div className="googlesitekit-settings-module__content googlesitekit-settings-module__content--open">
+						<Grid>
+							<Row>
+								<Cell size={ 12 }>
+									<SettingsEdit { ...args } />
+								</Cell>
+							</Row>
+						</Grid>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export const Default = Template.bind( null );
+Default.storyName = 'Default';
+Default.scenario = {
+	label: 'Modules/Ads/Settings/SettingsEdit/Default',
+	delay: 250,
+};
+Default.decorators = [
+	( Story ) => {
+		const setupRegistry = ( registry ) => {
+			registry.dispatch( MODULES_ADS ).receiveGetSettings( {
+				conversionID: 'AW-123456789',
+			} );
+		};
+
+		return (
+			<WithRegistrySetup func={ setupRegistry }>
+				<Story />
+			</WithRegistrySetup>
+		);
+	},
+];
+
+export default {
+	title: 'Modules/Ads/Settings/SettingsEdit',
+	decorators: [
+		( Story ) => {
+			const setupRegistry = ( registry ) => {
+				provideModules( registry, [
+					{
+						slug: 'ads',
+						active: true,
+						connected: true,
+					},
+				] );
+			};
+
+			return (
+				<WithRegistrySetup func={ setupRegistry }>
+					<Story />
+				</WithRegistrySetup>
+			);
+		},
+	],
+	features: [ 'adsModule' ],
+};
+
+export const PaxConnected = Template.bind( null );
+PaxConnected.storyName = 'With PAX onboarding';
+PaxConnected.scenario = {
+	label: 'Modules/Ads/Settings/SettingsEdit/PAX',
+	delay: 250,
+};
+PaxConnected.parameters = {
+	features: [ 'adsPax' ],
+};
+PaxConnected.decorators = [
+	( Story, { parameters } ) => {
+		const setupRegistry = ( registry ) => {
+			// Unset the value set in the prrevious scenario.
+			registry.dispatch( MODULES_ADS ).setConversionID( null );
+
+			registry.dispatch( MODULES_ADS ).receiveGetSettings( {
+				paxConversionID: 'AW-54321',
+				extCustomerID: 'C-872756827HGFSD',
+			} );
+		};
+
+		return (
+			<WithRegistrySetup
+				func={ setupRegistry }
+				features={ parameters.features || [] }
+			>
+				<Story />
+			</WithRegistrySetup>
+		);
+	},
+];

includes/Modules/Ads.php

@@ -225,7 +225,7 @@ protected function setup_settings() {
 	public function is_connected() {
 		$options = $this->get_settings()->get();
 
-		return parent::is_connected() && ! empty( $options['conversionID'] );
+		return parent::is_connected() && ( ! empty( $options['conversionID'] ) || ! empty( $options['paxConversionID'] ) || ! empty( $options['extCustomerID'] ) );
 	}
 
 	/**