Enhancement/10172 add woo commerce redirect modal

assets/js/modules/ads/components/common/WooCommerceRedirectModal.js

@@ -0,0 +1,137 @@
+/**
+ * WooCommerce Redirect Modal component.
+ *
+ * Site Kit by Google, Copyright 2025 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.
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useCallback, useMemo } from '@wordpress/element';
+import { addQueryArgs } from '@wordpress/url';
+
+/**
+ * Internal dependencies
+ */
+import { useDispatch, useSelect } from 'googlesitekit-data';
+import {
+	Button,
+	Dialog,
+	DialogContent,
+	DialogFooter,
+	DialogTitle,
+} from 'googlesitekit-components';
+import { ADS_WOOCOMMERCE_REDIRECT_MODAL_DISMISS_KEY } from '../../datastore/constants';
+import { CORE_SITE } from '../../../../googlesitekit/datastore/site/constants';
+import { CORE_USER } from '../../../../googlesitekit/datastore/user/constants';
+import { CORE_LOCATION } from '../../../../googlesitekit/datastore/location/constants';
+import WooLogoIcon from '../../../../../svg/graphics/woo-logo.svg';
+import ExternalIcon from '../../../../../svg/icons/external.svg';
+import useActivateModuleCallback from '../../../../hooks/useActivateModuleCallback';
+
+export default function WooCommerceRedirectModal( {
+	dialogActive,
+	onDismiss = null,
+} ) {
+	const adminURL = useSelect( ( select ) =>
+		select( CORE_SITE ).getAdminURL()
+	);
+	const isWooCommerceActive = useSelect( ( select ) =>
+		select( CORE_SITE ).isWooCommerceActivated()
+	);
+	const isGoogleForWooCommerceActive = useSelect( ( select ) =>
+		select( CORE_SITE ).isGoogleForWooCommerceActivated()
+	);
+
+	const googleForWooCommerceRedirectURI = useMemo( () => {
+		if ( ! adminURL || ! isWooCommerceActive ) {
+			return undefined;
+		}
+
+		if ( isGoogleForWooCommerceActive === false ) {
+			return addQueryArgs( `${ adminURL }/plugin-install.php`, {
+				s: 'google-listings-and-ads',
+				tab: 'search',
+				type: 'term',
+			} );
+		}
+
+		const googleDashboardPath = encodeURIComponent( '/google/dashboard' );
+		return `${ adminURL }/admin.php?page=wc-admin&path=${ googleDashboardPath }`;
+	}, [ adminURL, isWooCommerceActive, isGoogleForWooCommerceActive ] );
+
+	const { dismissItem } = useDispatch( CORE_USER );
+
+	const markModalDismissed = useCallback( () => {
+		onDismiss();
+		dismissItem( ADS_WOOCOMMERCE_REDIRECT_MODAL_DISMISS_KEY );
+	}, [ onDismiss, dismissItem ] );
+
+	const { navigateTo } = useDispatch( CORE_LOCATION );
+
+	const getGoogleForWooCommerceRedirectURI = useCallback( () => {
+		markModalDismissed();
+
+		navigateTo( googleForWooCommerceRedirectURI );
+	}, [ markModalDismissed, navigateTo, googleForWooCommerceRedirectURI ] );
+
+	const onSetupCallback = useActivateModuleCallback( 'ads' );
+
+	const onContinueWithSiteKit = useCallback( () => {
+		markModalDismissed();
+		onSetupCallback();
+	}, [ markModalDismissed, onSetupCallback ] );
+
+	return (
+		<Dialog
+			open={ dialogActive }
+			aria-describedby={ undefined }
+			tabIndex="-1"
+			className="googlesitekit-dialog-woocommerce-redirect"
+			onClose={ markModalDismissed }
+		>
+			<div className="googlesitekit-dialog-woocommerce-redirect__svg-wrapper">
+				<WooLogoIcon width={ 110 } height={ 46 } />
+			</div>
+			<DialogTitle>
+				{ __( 'Using the WooCommerce plugin?', 'google-site-kit' ) }
+			</DialogTitle>
+			<DialogContent>
+				<p>
+					{ __(
+						'The Google for WooCommerce plugin can utilize your provided business information for advertising on Google and may be more suitable for your business.',
+						'google-site-kit'
+					) }
+				</p>
+			</DialogContent>
+			<DialogFooter>
+				<Button
+					className="mdc-dialog__cancel-button"
+					tertiary
+					onClick={ onContinueWithSiteKit }
+				>
+					{ __( 'Continue with Site Kit', 'google-site-kit' ) }
+				</Button>
+				<Button
+					trailingIcon={ <ExternalIcon width={ 13 } height={ 13 } /> }
+					onClick={ getGoogleForWooCommerceRedirectURI }
+				>
+					{ __( 'Use Google for WooCommerce', 'google-site-kit' ) }
+				</Button>
+			</DialogFooter>
+		</Dialog>
+	);
+}

assets/js/modules/ads/components/common/WooCommerceRedirectModal.stories.js

@@ -0,0 +1,37 @@
+/**
+ * Ads WooCommerceRedirectModal component stories.
+ *
+ * Site Kit by Google, Copyright 2025 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 WooCommerceRedirectModal from './WooCommerceRedirectModal';
+
+function Template() {
+	return <WooCommerceRedirectModal dialogActive />;
+}
+
+export const Default = Template.bind( null );
+Default.storyName = 'Default';
+Default.scenario = {};
+Default.parameters = {
+	features: [ 'adsPax' ],
+};
+
+export default {
+	title: 'Modules/Ads/WooCommerceRedirectModal',
+};

assets/js/modules/ads/components/common/WooCommerceRedirectModal.test.js

@@ -0,0 +1,180 @@
+/**
+ * WooCommerceRedirectModal tests.
+ *
+ * Site Kit by Google, Copyright 2025 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 { mockLocation } from '../../../../../../tests/js/mock-browser-utils';
+import {
+	render,
+	createTestRegistry,
+	fireEvent,
+	provideSiteInfo,
+	provideModules,
+	provideUserCapabilities,
+	provideModuleRegistrations,
+} from '../../../../../../tests/js/test-utils';
+import { CORE_MODULES } from '../../../../googlesitekit/modules/datastore/constants';
+import { ADS_WOOCOMMERCE_REDIRECT_MODAL_DISMISS_KEY } from '../../datastore/constants';
+import WooCommerceRedirectModal from './WooCommerceRedirectModal';
+
+describe( 'WooCommerceRedirectModal', () => {
+	mockLocation();
+	let registry;
+
+	const dismissItemEndpoint = RegExp(
+		'^/google-site-kit/v1/core/user/data/dismiss-item'
+	);
+	const moduleActivationEndpoint = RegExp(
+		'google-site-kit/v1/core/modules/data/activation'
+	);
+	const userAuthenticationEndpoint = RegExp(
+		'^/google-site-kit/v1/core/user/data/authentication'
+	);
+
+	beforeEach( () => {
+		registry = createTestRegistry();
+
+		provideSiteInfo( registry );
+		provideModules( registry );
+		provideModuleRegistrations( registry );
+		provideUserCapabilities( registry );
+	} );
+
+	it( 'clicking "Continue with Site Kit" should trigger ads module activation and dismiss the modal', async () => {
+		fetchMock.postOnce( moduleActivationEndpoint, {
+			body: { success: true },
+		} );
+		fetchMock.getOnce( userAuthenticationEndpoint, {
+			body: { needsReauthentication: false },
+		} );
+		fetchMock.postOnce( dismissItemEndpoint, {
+			body: JSON.stringify( [
+				ADS_WOOCOMMERCE_REDIRECT_MODAL_DISMISS_KEY,
+			] ),
+		} );
+
+		const { getByText, waitForRegistry } = render(
+			<WooCommerceRedirectModal dialogActive onDismiss={ () => null } />,
+			{ registry }
+		);
+		await waitForRegistry();
+
+		const continueWithSiteKitButton = getByText(
+			/continue with site kit/i
+		);
+		fireEvent.click( continueWithSiteKitButton );
+
+		await waitForRegistry();
+
+		expect(
+			registry.select( CORE_MODULES ).isDoingSetModuleActivation( 'ads' )
+		).toBe( true );
+
+		// Modal should be dismissed.
+		expect( fetchMock ).toHaveFetched( dismissItemEndpoint );
+	} );
+
+	it( 'clicking "Use Google for WooCommerce" should link to the install plugin page with Google for WooCommerce search term when Google for WooCommerce is not active', async () => {
+		fetchMock.postOnce( dismissItemEndpoint, {
+			body: JSON.stringify( [
+				ADS_WOOCOMMERCE_REDIRECT_MODAL_DISMISS_KEY,
+			] ),
+		} );
+
+		provideSiteInfo( registry, {
+			plugins: {
+				wooCommerce: {
+					active: true,
+					installed: true,
+				},
+				googleForWooCommerce: {
+					active: false,
+					installed: false,
+				},
+			},
+		} );
+		const { getByText, waitForRegistry } = render(
+			<WooCommerceRedirectModal dialogActive onDismiss={ () => null } />,
+			{ registry }
+		);
+		await waitForRegistry();
+
+		const useGoogleForWooCommerceButton = getByText(
+			/use google for woocommerce/i
+		);
+		fireEvent.click( useGoogleForWooCommerceButton );
+
+		await waitForRegistry();
+
+		expect( global.location.assign ).toHaveBeenCalledWith(
+			expect.stringMatching( /plugin-install\.php/ )
+		);
+		expect( global.location.assign ).toHaveBeenCalledWith(
+			expect.stringMatching( /s=google-listings-and-ads/ )
+		);
+		expect( global.location.assign ).toHaveBeenCalledWith(
+			expect.stringMatching( /tab=search/ )
+		);
+
+		// Modal should be dismissed.
+		expect( fetchMock ).toHaveFetched( dismissItemEndpoint );
+	} );
+
+	it( 'clicking "Use Google for WooCommerce" should link to the google dashboard of the Google for WooCommerce when Google for WooCommerce is active', async () => {
+		fetchMock.postOnce( dismissItemEndpoint, {
+			body: JSON.stringify( [
+				ADS_WOOCOMMERCE_REDIRECT_MODAL_DISMISS_KEY,
+			] ),
+		} );
+
+		provideSiteInfo( registry, {
+			plugins: {
+				wooCommerce: {
+					active: true,
+					installed: true,
+				},
+				googleForWooCommerce: {
+					active: true,
+					installed: true,
+				},
+			},
+		} );
+		const { getByText, waitForRegistry } = render(
+			<WooCommerceRedirectModal dialogActive onDismiss={ () => null } />,
+			{ registry }
+		);
+		await waitForRegistry();
+
+		const useGoogleForWooCommerceButton = getByText(
+			/use google for woocommerce/i
+		);
+		fireEvent.click( useGoogleForWooCommerceButton );
+
+		await waitForRegistry();
+
+		expect( global.location.assign ).toHaveBeenCalledWith(
+			expect.stringMatching( /page=wc-admin/ )
+		);
+		expect( global.location.assign ).toHaveBeenCalledWith(
+			expect.stringMatching( /path=%2Fgoogle%2Fdashboard/ )
+		);
+
+		expect( fetchMock ).toHaveFetched( dismissItemEndpoint );
+	} );
+} );

assets/js/modules/ads/components/common/index.js

@@ -18,3 +18,4 @@
 
 export { default as ConversionIDTextField } from './ConversionIDTextField';
 export { default as PAXEmbeddedApp } from './PAXEmbeddedApp';
+export { default as WooCommerceRedirectModal } from './WooCommerceRedirectModal';

assets/js/modules/ads/datastore/constants.js

@@ -27,3 +27,5 @@ export const DATE_RANGE_OFFSET = 1;
 
 export const ADS_MODULE_SETUP_BANNER_PROMPT_DISMISSED_KEY =
 	'ads_module_setup_banner_prompt_dismissed_key';
+
+export const ADS_WOOCOMMERCE_REDIRECT_MODAL_DISMISS_KEY = 'wc-redirect-modal';