R2: Updated Enhanced Conversion flow

js/src/components/enhanced-conversion-tracking-settings/confirm-button.js

@@ -0,0 +1,21 @@
+/**
+ * External dependencies
+ */
+import { noop } from 'lodash';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+
+import AppButton from '.~/components/app-button';
+
+const ConfirmButton = ( { onConfirm = noop } ) => {
+	return (
+		<AppButton isPrimary onClick={ onConfirm }>
+			{ __( 'Confirm', 'google-listings-and-ads' ) }
+		</AppButton>
+	);
+};
+
+export default ConfirmButton;

js/src/components/enhanced-conversion-tracking-settings/cta.js

@@ -0,0 +1,60 @@
+/**
+ * External dependencies
+ */
+import { noop } from 'lodash';
+import { useEffect, useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { useAppDispatch } from '.~/data';
+import { ENHANCED_ADS_CONVERSION_STATUS } from '.~/constants';
+import AppButton from '.~/components/app-button';
+import EnableButton from './enable-button';
+import ConfirmButton from './confirm-button';
+import useAutoCheckEnhancedConversionTOS from '.~/hooks/useAutoCheckEnhancedConversionTOS';
+
+const CTA = ( { onConfirm = noop } ) => {
+	const { updateEnhancedAdsConversionStatus } = useAppDispatch();
+	const {
+		acceptedCustomerDataTerms,
+		hasFinishedResolution,
+		isPolling,
+		setIsPolling,
+	} = useAutoCheckEnhancedConversionTOS();
+
+	const handleConfirm = useCallback( () => {
+		updateEnhancedAdsConversionStatus(
+			ENHANCED_ADS_CONVERSION_STATUS.ENABLED
+		);
+
+		onConfirm();
+	}, [ onConfirm, updateEnhancedAdsConversionStatus ] );
+
+	useEffect( () => {
+		// As soon as the terms are accepted, do not show the spinner
+		if ( acceptedCustomerDataTerms && isPolling ) {
+			setIsPolling( false );
+		}
+	}, [ acceptedCustomerDataTerms, setIsPolling, isPolling, handleConfirm ] );
+
+	const handleOnEnable = () => {
+		setIsPolling( true );
+	};
+
+	if ( ! hasFinishedResolution ) {
+		return null;
+	}
+
+	if ( isPolling ) {
+		return <AppButton isSecondary disabled loading />;
+	}
+
+	if ( ! acceptedCustomerDataTerms ) {
+		return <EnableButton onEnable={ handleOnEnable } />;
+	}
+
+	return <ConfirmButton onConfirm={ handleConfirm } />;
+};
+
+export default CTA;

js/src/product-feed/submission-success-guide/enhanced-conversions/enable-button.js → js/src/components/enhanced-conversion-tracking-settings/enable-button.js

@@ -3,6 +3,7 @@
  */
 import { noop } from 'lodash';
 import { __ } from '@wordpress/i18n';
+import { external as externalIcon } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -26,9 +27,16 @@ const EnableButton = ( { onEnable = noop } ) => {
 	};
 
 	return (
-		<AppButton isPrimary onClick={ handleOnEnableEnhancedConversions }>
-			{ __( 'Enable Enhanced Conversions', 'google-listings-and-ads' ) }
-		</AppButton>
+		<AppButton
+			icon={ externalIcon }
+			iconPosition="right"
+			isPrimary
+			onClick={ handleOnEnableEnhancedConversions }
+			text={ __(
+				'Enable Enhanced Conversions',
+				'google-listings-and-ads'
+			) }
+		/>
 	);
 };
 

js/src/components/enhanced-conversion-tracking-settings/enable.js

@@ -7,7 +7,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import CTA from '.~/product-feed/submission-success-guide/enhanced-conversions/cta';
+import CTA from './cta';
 
 const Enable = () => {
 	return (

js/src/hooks/useAutoCheckEnhancedConversionTOS.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { useCallback } from '@wordpress/element';
+import { useCallback, useState, useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -12,12 +12,15 @@ import useWindowFocusCallbackIntervalEffect from '.~/hooks/useWindowFocusCallbac
 import useAcceptedCustomerDataTerms from '.~/hooks/useAcceptedCustomerDataTerms';
 import useAllowEnhancedConversions from '.~/hooks/useAllowEnhancedConversions';
 
-const useAutoCheckEnhancedConversionTOS = () => {
-	const { acceptedCustomerDataTerms } = useAcceptedCustomerDataTerms();
+const useAutoCheckEnhancedConversionTOS = ( shouldPoll = false ) => {
+	const [ isPolling, setIsPolling ] = useState( false );
+	const { acceptedCustomerDataTerms, hasFinishedResolution } =
+		useAcceptedCustomerDataTerms();
 	const { allowEnhancedConversions } = useAllowEnhancedConversions();
 	const { fetchAcceptedCustomerDataTerms } = useAppDispatch();
 
 	const polling =
+		isPolling &&
 		! acceptedCustomerDataTerms &&
 		allowEnhancedConversions === ENHANCED_ADS_CONVERSION_STATUS.PENDING;
 
@@ -29,9 +32,18 @@ const useAutoCheckEnhancedConversionTOS = () => {
 		fetchAcceptedCustomerDataTerms();
 	}, [ fetchAcceptedCustomerDataTerms, polling ] );
 
+	useEffect( () => {
+		setIsPolling( shouldPoll );
+	}, [ shouldPoll ] );
+
 	useWindowFocusCallbackIntervalEffect( checkStatus, 30 );
 
-	return polling;
+	return {
+		isPolling,
+		setIsPolling,
+		acceptedCustomerDataTerms,
+		hasFinishedResolution,
+	};
 };
 
 export default useAutoCheckEnhancedConversionTOS;

js/src/product-feed/submission-success-guide/enhanced-conversions/actions.js

@@ -2,32 +2,19 @@
  * External dependencies
  */
 import { noop } from 'lodash';
-import { __ } from '@wordpress/i18n';
-import { useCallback, Fragment } from '@wordpress/element';
+import { Fragment } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import useDispatchCoreNotices from '.~/hooks/useDispatchCoreNotices';
-import CTA from './cta';
+import CTA from '.~/components/enhanced-conversion-tracking-settings/cta';
 
 const Actions = ( { onModalClose = noop } ) => {
-	const { createNotice } = useDispatchCoreNotices();
-
-	const handleOnConfirm = useCallback( () => {
-		createNotice(
-			'info',
-			__( 'Status successfully set', 'google-listings-and-ads' )
-		);
-
-		onModalClose();
-	}, [ createNotice, onModalClose ] );
-
 	return (
 		<Fragment>
 			<div className="gla-submission-success-guide__space_holder" />
 
-			<CTA onConfirm={ handleOnConfirm } />
+			<CTA onConfirm={ onModalClose } />
 		</Fragment>
 	);
 };

js/src/product-feed/submission-success-guide/enhanced-conversions/actions.test.js

@@ -8,18 +8,6 @@ jest.mock( '.~/hooks/useAllowEnhancedConversions', () => ( {
 	default: jest.fn().mockName( 'useAllowEnhancedConversions' ),
 } ) );
 
-jest.mock( '.~/hooks/useDispatchCoreNotices', () => ( {
-	__esModule: true,
-	default: jest
-		.fn()
-		.mockName( 'useDispatchCoreNotices' )
-		.mockImplementation( () => {
-			return {
-				createNotice: jest.fn(),
-			};
-		} ),
-} ) );
-
 jest.mock( '.~/data/actions', () => ( {
 	...jest.requireActual( '.~/data/actions' ),
 	updateEnhancedAdsConversionStatus: jest