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

@@ -2,97 +2,67 @@
  * External dependencies
  */
 import { noop } from 'lodash';
-import { __ } from '@wordpress/i18n';
-import { useCallback, useState, useEffect } from '@wordpress/element';
+import { useEffect, useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import { ENHANCED_ADS_CONVERSION_STATUS } from '.~/constants';
 import { useAppDispatch } from '.~/data';
+import { ENHANCED_ADS_CONVERSION_STATUS } from '.~/constants';
 import AppButton from '.~/components/app-button';
-import AcceptTerms from './accept-terms';
-import useAcceptedCustomerDataTerms from '.~/hooks/useAcceptedCustomerDataTerms';
-import useAllowEnhancedConversions from '.~/hooks/useAllowEnhancedConversions';
-import useTermsPolling from './useTermsPolling';
+import EnableButton from './enable-button';
+import ConfirmButton from './confirm-button';
+import useAutoCheckEnhancedConversionTOS from '.~/hooks/useAutoCheckEnhancedConversionTOS';
+import useEnhancedConversionsSkipConfirmation from '.~/hooks/useEnhancedConversionsSkipConfirmation';
 
-const CTA = ( {
-	disableLabel = __( 'Disable', 'google-listings-and-ads' ),
-	enableLabel = __( 'Enable', 'google-listings-and-ads' ),
-	onEnableClick = noop,
-	onDisableClick = noop,
-} ) => {
-	const [ startBackgroundPoll, setStartBackgroundPoll ] = useState( false );
+const CTA = ( { onEnable = noop } ) => {
 	const { updateEnhancedAdsConversionStatus } = useAppDispatch();
-	const { acceptedCustomerDataTerms } = useAcceptedCustomerDataTerms();
-	const { allowEnhancedConversions } = useAllowEnhancedConversions();
-	useTermsPolling( startBackgroundPoll );
-
-	const handleDisable = useCallback( () => {
-		if ( ! acceptedCustomerDataTerms ) {
-			return;
-		}
+	const {
+		acceptedCustomerDataTerms,
+		hasFinishedResolution,
+		isPolling,
+		setIsPolling,
+	} = useAutoCheckEnhancedConversionTOS();
+	const { skipConfirmation } = useEnhancedConversionsSkipConfirmation();
 
+	const handleConfirm = useCallback( () => {
 		updateEnhancedAdsConversionStatus(
-			ENHANCED_ADS_CONVERSION_STATUS.DISABLED
+			ENHANCED_ADS_CONVERSION_STATUS.ENABLED
 		);
+	}, [ updateEnhancedAdsConversionStatus ] );
 
-		onDisableClick();
-	}, [
-		updateEnhancedAdsConversionStatus,
-		acceptedCustomerDataTerms,
-		onDisableClick,
-	] );
-
-	// Turn off polling when the user has accepted the terms.
 	useEffect( () => {
-		if ( acceptedCustomerDataTerms && startBackgroundPoll ) {
-			setStartBackgroundPoll( false );
-		}
-	}, [ acceptedCustomerDataTerms, startBackgroundPoll ] );
+		// As soon as the terms are accepted, do not show the spinner
+		if ( acceptedCustomerDataTerms && isPolling ) {
+			// We automatically set the status to enabled.
+			handleConfirm();
 
-	const handleEnable = useCallback( () => {
-		if ( ! acceptedCustomerDataTerms ) {
-			return;
+			setIsPolling( false );
 		}
+	}, [ acceptedCustomerDataTerms, setIsPolling, isPolling, handleConfirm ] );
 
-		updateEnhancedAdsConversionStatus(
-			ENHANCED_ADS_CONVERSION_STATUS.ENABLED
-		);
-
-		onEnableClick();
-	}, [
-		updateEnhancedAdsConversionStatus,
-		acceptedCustomerDataTerms,
-		onEnableClick,
-	] );
-
-	const handleOnAcceptTerms = () => {
-		setStartBackgroundPoll( true );
+	const handleOnEnable = () => {
+		setIsPolling( true );
+		onEnable();
 	};
 
-	if ( startBackgroundPoll ) {
+	if ( ! hasFinishedResolution ) {
+		return null;
+	}
+
+	if ( isPolling ) {
 		return <AppButton isSecondary disabled loading />;
 	}
 
 	if ( ! acceptedCustomerDataTerms ) {
-		return <AcceptTerms onAcceptTerms={ handleOnAcceptTerms } />;
+		return <EnableButton onEnable={ handleOnEnable } />;
 	}
 
-	if ( allowEnhancedConversions === ENHANCED_ADS_CONVERSION_STATUS.ENABLED ) {
-		return (
-			<AppButton isPrimary isDestructive onClick={ handleDisable }>
-				{ disableLabel }
-			</AppButton>
-		);
+	if ( skipConfirmation ) {
+		return null;
 	}
 
-	// User has accepted TOS or tracking is disabled.
-	return (
-		<AppButton isPrimary onClick={ handleEnable }>
-			{ enableLabel }
-		</AppButton>
-	);
+	return <ConfirmButton onConfirm={ handleConfirm } />;
 };
 
 export default CTA;