R2 – Enable Enhanced Conversions

js/src/components/enhanced-conversion-tracking-settings/accept-terms.js

@@ -0,0 +1,46 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { noop } from 'lodash';
+import { useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { ENHANCED_ADS_CONVERSION_STATUS } from '.~/constants';
+import { useAppDispatch } from '.~/data';
+import AppButton from '.~/components/app-button';
+import useGoogleAdsEnhancedConversionTermsURL from '.~/hooks/useGoogleAdsTermsURL';
+
+const AcceptTerms = ( {
+	acceptTermsLabel = __(
+		'Accept Terms & Conditions',
+		'google-listings-and-ads'
+	),
+	onAcceptTerms = noop,
+} ) => {
+	const { url } = useGoogleAdsEnhancedConversionTermsURL();
+	const { updateEnhancedAdsConversionStatus } = useAppDispatch();
+
+	const handleAcceptTerms = useCallback(
+		( event ) => {
+			event.preventDefault();
+
+			window.open( url, '_blank' );
+			updateEnhancedAdsConversionStatus(
+				ENHANCED_ADS_CONVERSION_STATUS.PENDING
+			);
+			onAcceptTerms();
+		},
+		[ updateEnhancedAdsConversionStatus, url, onAcceptTerms ]
+	);
+
+	return (
+		<AppButton isPrimary onClick={ handleAcceptTerms }>
+			{ acceptTermsLabel }
+		</AppButton>
+	);
+};
+
+export default AcceptTerms;

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

@@ -0,0 +1,98 @@
+/**
+ * External dependencies
+ */
+import { noop } from 'lodash';
+import { __ } from '@wordpress/i18n';
+import { useCallback, useState, useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { ENHANCED_ADS_CONVERSION_STATUS } from '.~/constants';
+import { useAppDispatch } from '.~/data';
+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';
+
+const CTA = ( {
+	disableLabel = __( 'Disable', 'google-listings-and-ads' ),
+	enableLabel = __( 'Enable', 'google-listings-and-ads' ),
+	onEnableClick = noop,
+	onDisableClick = noop,
+} ) => {
+	const [ startBackgroundPoll, setStartBackgroundPoll ] = useState( false );
+	const { updateEnhancedAdsConversionStatus } = useAppDispatch();
+	const { acceptedCustomerDataTerms } = useAcceptedCustomerDataTerms();
+	const { allowEnhancedConversions } = useAllowEnhancedConversions();
+	useTermsPolling( startBackgroundPoll );
+
+	const handleDisable = useCallback( () => {
+		if ( ! acceptedCustomerDataTerms ) {
+			return;
+		}
+
+		updateEnhancedAdsConversionStatus(
+			ENHANCED_ADS_CONVERSION_STATUS.DISABLED
+		);
+
+		onDisableClick();
+	}, [
+		updateEnhancedAdsConversionStatus,
+		acceptedCustomerDataTerms,
+		onDisableClick,
+	] );
+
+	// Turn off polling when the user has accepted the terms.
+	useEffect( () => {
+		if ( acceptedCustomerDataTerms && startBackgroundPoll ) {
+			setStartBackgroundPoll( false );
+		}
+	}, [ acceptedCustomerDataTerms, startBackgroundPoll ] );
+
+	const handleEnable = useCallback( () => {
+		if ( ! acceptedCustomerDataTerms ) {
+			return;
+		}
+
+		updateEnhancedAdsConversionStatus(
+			ENHANCED_ADS_CONVERSION_STATUS.ENABLED
+		);
+
+		onEnableClick();
+	}, [
+		updateEnhancedAdsConversionStatus,
+		acceptedCustomerDataTerms,
+		onEnableClick,
+	] );
+
+	const handleOnAcceptTerms = () => {
+		setStartBackgroundPoll( true );
+	};
+
+	if ( startBackgroundPoll ) {
+		return <AppButton isSecondary disabled loading />;
+	}
+
+	if ( ! acceptedCustomerDataTerms ) {
+		return <AcceptTerms onAcceptTerms={ handleOnAcceptTerms } />;
+	}
+
+	if ( allowEnhancedConversions === ENHANCED_ADS_CONVERSION_STATUS.ENABLED ) {
+		return (
+			<AppButton isPrimary isDestructive onClick={ handleDisable }>
+				{ disableLabel }
+			</AppButton>
+		);
+	}
+
+	// User has accepted TOS or tracking is disabled.
+	return (
+		<AppButton isPrimary onClick={ handleEnable }>
+			{ enableLabel }
+		</AppButton>
+	);
+};
+
+export default CTA;

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

@@ -0,0 +1,221 @@
+jest.mock( '@woocommerce/components', () => ( {
+	...jest.requireActual( '@woocommerce/components' ),
+	Spinner: jest
+		.fn( () => <div role="status" aria-label="spinner" /> )
+		.mockName( 'Spinner' ),
+} ) );
+
+jest.mock( '.~/hooks/useAcceptedCustomerDataTerms', () => ( {
+	__esModule: true,
+	default: jest.fn().mockName( 'useAcceptedCustomerDataTerms' ),
+} ) );
+
+jest.mock( '.~/hooks/useAllowEnhancedConversions', () => ( {
+	__esModule: true,
+	default: jest.fn().mockName( 'useAllowEnhancedConversions' ),
+} ) );
+
+jest.mock( '.~/hooks/useAutoCheckEnhancedConversionTOS', () => ( {
+	__esModule: true,
+	default: jest
+		.fn()
+		.mockName( 'useAutoCheckEnhancedConversionTOS' )
+		.mockImplementation( () => {
+			return {
+				startEnhancedConversionTOSPolling: jest.fn(),
+				stopEnhancedConversionTOSPolling: jest.fn(),
+			};
+		} ),
+} ) );
+
+jest.mock( '.~/data/actions', () => ( {
+	...jest.requireActual( '.~/data/actions' ),
+	updateEnhancedAdsConversionStatus: jest
+		.fn()
+		.mockName( 'updateEnhancedAdsConversionStatus' )
+		.mockImplementation( () => {
+			return { type: 'test', response: 'enabled' };
+		} ),
+} ) );
+
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+
+/**
+ * Internal dependencies
+ */
+import useAcceptedCustomerDataTerms from '.~/hooks/useAcceptedCustomerDataTerms';
+import useAllowEnhancedConversions from '.~/hooks/useAllowEnhancedConversions';
+import { ENHANCED_ADS_CONVERSION_STATUS } from '.~/constants';
+import CTA from './cta';
+
+describe( 'Enhanced Conversion CTA', () => {
+	beforeEach( () => {
+		jest.clearAllMocks();
+	} );
+
+	test( 'Prompt the user to sign the TOS', () => {
+		useAcceptedCustomerDataTerms.mockReturnValue( {
+			acceptedCustomerDataTerms: false,
+			hasFinishedResolution: true,
+		} );
+
+		useAllowEnhancedConversions.mockReturnValue( {
+			allowEnhancedConversions: null,
+		} );
+
+		render( <CTA /> );
+		expect(
+			screen.getByText( 'Accept Terms & Conditions' )
+		).toBeInTheDocument();
+	} );
+
+	test( 'Prompt the user to enable enhanced conversion tracking if the TOS has been accepted', () => {
+		useAcceptedCustomerDataTerms.mockReturnValue( {
+			acceptedCustomerDataTerms: true,
+			hasFinishedResolution: true,
+		} );
+
+		useAllowEnhancedConversions.mockReturnValue( {
+			allowEnhancedConversions: ENHANCED_ADS_CONVERSION_STATUS.DISABLED,
+		} );
+
+		render( <CTA enableLabel="Confirm" /> );
+		expect( screen.getByText( 'Confirm' ) ).toBeInTheDocument();
+	} );
+
+	test( 'Prompt the user to disable enhanced conversion tracking if enabled', () => {
+		useAcceptedCustomerDataTerms.mockReturnValue( {
+			acceptedCustomerDataTerms: true,
+			hasFinishedResolution: true,
+		} );
+
+		useAllowEnhancedConversions.mockReturnValue( {
+			allowEnhancedConversions: ENHANCED_ADS_CONVERSION_STATUS.ENABLED,
+		} );
+
+		render( <CTA disableLabel="Disable tracking" /> );
+		expect( screen.getByText( 'Disable tracking' ) ).toBeInTheDocument();
+	} );
+
+	test( 'Click on accept TOS button callback', () => {
+		window.open = jest.fn();
+
+		useAcceptedCustomerDataTerms.mockReturnValue( {
+			acceptedCustomerDataTerms: false,
+			hasFinishedResolution: true,
+		} );
+
+		useAllowEnhancedConversions.mockReturnValue( {
+			allowEnhancedConversions: null,
+		} );
+
+		render( <CTA /> );
+
+		const button = screen.getByRole( 'button' );
+		userEvent.click( button );
+
+		expect( window.open ).toHaveBeenCalledTimes( 1 );
+	} );
+
+	test( 'Click on enable/confirm button callback', () => {
+		const handleOnEnable = jest.fn().mockName( 'On Enable click' );
+
+		useAcceptedCustomerDataTerms.mockReturnValue( {
+			acceptedCustomerDataTerms: true,
+			hasFinishedResolution: true,
+		} );
+
+		useAllowEnhancedConversions.mockReturnValue( {
+			allowEnhancedConversions: null,
+		} );
+
+		render( <CTA onEnableClick={ handleOnEnable } /> );
+
+		const button = screen.getByRole( 'button' );
+		userEvent.click( button );
+
+		expect( handleOnEnable ).toHaveBeenCalledTimes( 1 );
+	} );
+
+	test( 'Confirm/enable button callback should not be called if TOS has not been accepted', () => {
+		const handleOnEnable = jest.fn().mockName( 'On Enable click' );
+
+		useAcceptedCustomerDataTerms.mockReturnValue( {
+			acceptedCustomerDataTerms: false,
+			hasFinishedResolution: true,
+		} );
+
+		useAllowEnhancedConversions.mockReturnValue( {
+			allowEnhancedConversions: ENHANCED_ADS_CONVERSION_STATUS.ENABLED,
+		} );
+
+		render( <CTA onEnableClick={ handleOnEnable } /> );
+
+		const button = screen.getByRole( 'button' );
+		userEvent.click( button );
+
+		expect( handleOnEnable ).not.toHaveBeenCalled();
+	} );
+
+	test( 'Click on disable button callback', () => {
+		const handleOnDisable = jest.fn().mockName( 'On Disable click' );
+
+		useAcceptedCustomerDataTerms.mockReturnValue( {
+			acceptedCustomerDataTerms: true,
+			hasFinishedResolution: true,
+		} );
+
+		useAllowEnhancedConversions.mockReturnValue( {
+			allowEnhancedConversions: ENHANCED_ADS_CONVERSION_STATUS.ENABLED,
+		} );
+
+		render( <CTA onDisableClick={ handleOnDisable } /> );
+
+		const button = screen.getByRole( 'button' );
+		userEvent.click( button );
+
+		expect( handleOnDisable ).toHaveBeenCalledTimes( 1 );
+	} );
+
+	test( 'Disable button callback should not be called if TOS has not been accepted', () => {
+		const handleOnDisable = jest.fn().mockName( 'On Disable click' );
+
+		useAcceptedCustomerDataTerms.mockReturnValue( {
+			acceptedCustomerDataTerms: false,
+			hasFinishedResolution: true,
+		} );
+
+		useAllowEnhancedConversions.mockReturnValue( {
+			allowEnhancedConversions: ENHANCED_ADS_CONVERSION_STATUS.ENABLED,
+		} );
+
+		render( <CTA onDisableClick={ handleOnDisable } /> );
+
+		const button = screen.getByRole( 'button' );
+		userEvent.click( button );
+
+		expect( handleOnDisable ).not.toHaveBeenCalled();
+	} );
+
+	test( 'Should render the enable button if TOS has been accepted and the status is not enabled', () => {
+		useAcceptedCustomerDataTerms.mockReturnValue( {
+			acceptedCustomerDataTerms: true,
+			hasFinishedResolution: true,
+		} );
+
+		useAllowEnhancedConversions.mockReturnValue( {
+			allowEnhancedConversions: null,
+		} );
+
+		render( <CTA /> );
+
+		expect(
+			screen.getByRole( 'button', { name: 'Enable' } )
+		).toBeInTheDocument();
+	} );
+} );