From 5e72c9ed4eadd34ba94c5af5ca18c5588985d7fd Mon Sep 17 00:00:00 2001 From: asvinb Date: Tue, 9 Apr 2024 16:55:54 +0400 Subject: [PATCH 01/14] Add minor CR feedback. --- .../accept-terms.js | 21 +++++++------------ .../index.js | 9 ++++++-- .../pending-notice.js | 20 +++++++----------- .../toggle.js | 11 ++-------- .../useAcceptedCustomerDataTerms.test.js | 9 -------- ...useGoogleAdsEnhancedConversionTermsURL.js} | 0 .../enhanced-conversion/actions.js | 11 +--------- .../submission-success-guide/index.js | 2 +- .../e2e/specs/gtag-events/gtag-events.test.js | 2 +- 9 files changed, 27 insertions(+), 58 deletions(-) rename js/src/hooks/{useGoogleAdsTermsURL.js => useGoogleAdsEnhancedConversionTermsURL.js} (100%) diff --git a/js/src/components/enhanced-conversion-tracking-settings/accept-terms.js b/js/src/components/enhanced-conversion-tracking-settings/accept-terms.js index 832274b944..a21fcb944c 100644 --- a/js/src/components/enhanced-conversion-tracking-settings/accept-terms.js +++ b/js/src/components/enhanced-conversion-tracking-settings/accept-terms.js @@ -11,7 +11,7 @@ import { useCallback } from '@wordpress/element'; import { ENHANCED_ADS_CONVERSION_STATUS } from '.~/constants'; import { useAppDispatch } from '.~/data'; import AppButton from '.~/components/app-button'; -import useGoogleAdsEnhancedConversionTermsURL from '.~/hooks/useGoogleAdsTermsURL'; +import useGoogleAdsEnhancedConversionTermsURL from '.~/hooks/useGoogleAdsEnhancedConversionTermsURL'; const AcceptTerms = ( { acceptTermsLabel = __( @@ -23,18 +23,13 @@ const AcceptTerms = ( { 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 ] - ); + const handleAcceptTerms = useCallback( () => { + window.open( url, '_blank' ); + updateEnhancedAdsConversionStatus( + ENHANCED_ADS_CONVERSION_STATUS.PENDING + ); + onAcceptTerms(); + }, [ updateEnhancedAdsConversionStatus, url, onAcceptTerms ] ); return ( diff --git a/js/src/components/enhanced-conversion-tracking-settings/index.js b/js/src/components/enhanced-conversion-tracking-settings/index.js index f9f95bcfc6..719346956b 100644 --- a/js/src/components/enhanced-conversion-tracking-settings/index.js +++ b/js/src/components/enhanced-conversion-tracking-settings/index.js @@ -11,6 +11,7 @@ import useAcceptedCustomerDataTerms from '.~/hooks/useAcceptedCustomerDataTerms' import useGoogleAdsAccount from '.~/hooks/useGoogleAdsAccount'; import Section from '.~/wcdl/section'; import PendingNotice from '.~/components/enhanced-conversion-tracking-settings/pending-notice'; +import AppSpinner from '.~/components/app-spinner'; import useAllowEnhancedConversions from '.~/hooks/useAllowEnhancedConversions'; import Toggle from './toggle'; import AcceptTerms from './accept-terms'; @@ -31,15 +32,19 @@ const TITLE = __( 'Enhanced Conversion Tracking', 'google-listings-and-ads' ); */ const EnhancedConversionTrackingSettings = () => { const { googleAdsAccount } = useGoogleAdsAccount(); - const { acceptedCustomerDataTerms } = useAcceptedCustomerDataTerms(); + const { acceptedCustomerDataTerms, hasFinishedResolution } = + useAcceptedCustomerDataTerms(); const { allowEnhancedConversions } = useAllowEnhancedConversions(); - // @todo: Remove condition once R1 PRs are merged since there should always be a connected Ads account. if ( ! googleAdsAccount || ! googleAdsAccount.id ) { return null; } const getCardBody = () => { + if ( ! hasFinishedResolution ) { + return ; + } + if ( ! acceptedCustomerDataTerms && allowEnhancedConversions === ENHANCED_ADS_CONVERSION_STATUS.PENDING diff --git a/js/src/components/enhanced-conversion-tracking-settings/pending-notice.js b/js/src/components/enhanced-conversion-tracking-settings/pending-notice.js index 1fb49e8b8c..7b3b389ad2 100644 --- a/js/src/components/enhanced-conversion-tracking-settings/pending-notice.js +++ b/js/src/components/enhanced-conversion-tracking-settings/pending-notice.js @@ -11,24 +11,18 @@ import { ENHANCED_ADS_CONVERSION_STATUS } from '.~/constants'; import { useAppDispatch } from '.~/data'; import TrackableLink from '.~/components/trackable-link'; import useTermsPolling from './useTermsPolling'; -import useGoogleAdsEnhancedConversionTermsURL from '.~/hooks/useGoogleAdsTermsURL'; +import useGoogleAdsEnhancedConversionTermsURL from '.~/hooks/useGoogleAdsEnhancedConversionTermsURL'; const PendingNotice = () => { const { updateEnhancedAdsConversionStatus } = useAppDispatch(); const { url } = useGoogleAdsEnhancedConversionTermsURL(); useTermsPolling(); - const handleOnClick = useCallback( - ( event ) => { - event.preventDefault(); - - window.open( url, '_blank' ); - updateEnhancedAdsConversionStatus( - ENHANCED_ADS_CONVERSION_STATUS.PENDING - ); - }, - [ updateEnhancedAdsConversionStatus, url ] - ); + const handleOnClick = useCallback( () => { + updateEnhancedAdsConversionStatus( + ENHANCED_ADS_CONVERSION_STATUS.PENDING + ); + }, [ updateEnhancedAdsConversionStatus ] ); return (

@@ -43,8 +37,8 @@ const PendingNotice = () => { href={ url } target="_blank" type="external" - eventName="gla_ads_tos" // @todo: review eventName onClick={ handleOnClick } + // @todo: Review and add eventName prop /> ), } diff --git a/js/src/components/enhanced-conversion-tracking-settings/toggle.js b/js/src/components/enhanced-conversion-tracking-settings/toggle.js index dd2d6e38a4..60cc2cb6cc 100644 --- a/js/src/components/enhanced-conversion-tracking-settings/toggle.js +++ b/js/src/components/enhanced-conversion-tracking-settings/toggle.js @@ -45,17 +45,13 @@ const Toggle = () => { const handleOnChange = useCallback( ( value ) => { - if ( ! acceptedCustomerDataTerms ) { - return; - } - updateEnhancedAdsConversionStatus( value ? ENHANCED_ADS_CONVERSION_STATUS.ENABLED : ENHANCED_ADS_CONVERSION_STATUS.DISABLED ); }, - [ updateEnhancedAdsConversionStatus, acceptedCustomerDataTerms ] + [ updateEnhancedAdsConversionStatus ] ); if ( ! hasFinishedResolution ) { @@ -68,10 +64,7 @@ const Toggle = () => { allowEnhancedConversions === ENHANCED_ADS_CONVERSION_STATUS.ENABLED } - disabled={ - ! hasResolvedAcceptedCustomerDataTerms || - ! acceptedCustomerDataTerms - } + disabled={ ! hasResolvedAcceptedCustomerDataTerms } onChange={ handleOnChange } label={ TOGGLE_LABEL_MAP[ allowEnhancedConversions ] || diff --git a/js/src/hooks/useAcceptedCustomerDataTerms.test.js b/js/src/hooks/useAcceptedCustomerDataTerms.test.js index d4d2928440..9f80f8375a 100644 --- a/js/src/hooks/useAcceptedCustomerDataTerms.test.js +++ b/js/src/hooks/useAcceptedCustomerDataTerms.test.js @@ -28,15 +28,6 @@ const CONNECTED_GOOGLE_ADS_ACCOUNT = { describe( 'useAcceptedCustomerDataTerms', () => { it( 'Returns the correct status when set to true', () => { - useGoogleAccount.mockReturnValue( { - hasFinishedResolution: true, - isResolving: false, - scope: { - adsRequired: true, - }, - google: true, - } ); - useGoogleAdsAccount.mockReturnValue( { googleAdsAccount: CONNECTED_GOOGLE_ADS_ACCOUNT, hasFinishedResolution: true, diff --git a/js/src/hooks/useGoogleAdsTermsURL.js b/js/src/hooks/useGoogleAdsEnhancedConversionTermsURL.js similarity index 100% rename from js/src/hooks/useGoogleAdsTermsURL.js rename to js/src/hooks/useGoogleAdsEnhancedConversionTermsURL.js diff --git a/js/src/product-feed/submission-success-guide/enhanced-conversion/actions.js b/js/src/product-feed/submission-success-guide/enhanced-conversion/actions.js index fca858d639..30f74f8c6e 100644 --- a/js/src/product-feed/submission-success-guide/enhanced-conversion/actions.js +++ b/js/src/product-feed/submission-success-guide/enhanced-conversion/actions.js @@ -28,22 +28,13 @@ const Actions = ( { onModalClose = noop } ) => {

- + { __( 'Close', 'google-listings-and-ads' ) } diff --git a/js/src/product-feed/submission-success-guide/index.js b/js/src/product-feed/submission-success-guide/index.js index 923d053917..61642568a9 100644 --- a/js/src/product-feed/submission-success-guide/index.js +++ b/js/src/product-feed/submission-success-guide/index.js @@ -82,7 +82,7 @@ const pages = [ * Show this guide modal by visiting the path with a specific query `guide=submission-success`. * For example: `/wp-admin/admin.php?page=wc-admin&path=%2Fgoogle%2Fproduct-feed&guide=submission-success`. * - * @fires gla_modal_closed with `action: 'create-paid-campaign' | 'maybe-later' | 'view-product-feed' | 'dismiss'` + * @fires gla_modal_closed with `action: 'create-paid-campaign' | 'maybe-later' | 'close' | 'dismiss'` * @fires gla_modal_open with `context: GUIDE_NAMES.SUBMISSION_SUCCESS` */ const SubmissionSuccessGuide = () => { diff --git a/tests/e2e/specs/gtag-events/gtag-events.test.js b/tests/e2e/specs/gtag-events/gtag-events.test.js index 9e78c9434c..9c0146c13a 100644 --- a/tests/e2e/specs/gtag-events/gtag-events.test.js +++ b/tests/e2e/specs/gtag-events/gtag-events.test.js @@ -235,7 +235,7 @@ test.describe( 'GTag events', () => { key: 'user_data', } ); - expect( dataConfig.allow_enhanced_conversions ).toBeTruthy(); + expect( dataConfig.allow_enhanced_conversions ).toBe( true ); expect( dataUserData.sha256_email_address ).toBeDefined(); } ); } ); From 5033e0d66bcfeefdf6e88e252318d3b921024862 Mon Sep 17 00:00:00 2001 From: asvinb Date: Tue, 9 Apr 2024 18:56:02 +0400 Subject: [PATCH 02/14] Review enhanced conversions panel wordings and CTAs. --- js/src/constants.js | 3 + ...eGoogleAdsEnhancedConversionSettingsURL.js | 26 +++ .../useGoogleAdsEnhancedConversionTermsURL.js | 4 +- .../dynamic-screen-actions.js | 4 +- .../dynamic-screen-content.js | 4 +- .../enhanced-conversion/index.js | 67 ------- .../actions.js | 15 +- .../actions.test.js | 21 +- .../enhanced-conversions/confirm.js | 32 ++++ .../enhanced-conversions/cta.js | 52 +++++ .../enhanced-conversions/enable.js | 34 ++++ .../enhanced-conversions/index.js | 181 ++++++++++++++++++ .../index.test.js | 6 +- .../enhanced-conversions/useTermsPolling.js | 53 +++++ .../submission-success-guide/index.test.js | 4 +- 15 files changed, 395 insertions(+), 111 deletions(-) create mode 100644 js/src/hooks/useGoogleAdsEnhancedConversionSettingsURL.js delete mode 100644 js/src/product-feed/submission-success-guide/enhanced-conversion/index.js rename js/src/product-feed/submission-success-guide/{enhanced-conversion => enhanced-conversions}/actions.js (56%) rename js/src/product-feed/submission-success-guide/{enhanced-conversion => enhanced-conversions}/actions.test.js (78%) create mode 100644 js/src/product-feed/submission-success-guide/enhanced-conversions/confirm.js create mode 100644 js/src/product-feed/submission-success-guide/enhanced-conversions/cta.js create mode 100644 js/src/product-feed/submission-success-guide/enhanced-conversions/enable.js create mode 100644 js/src/product-feed/submission-success-guide/enhanced-conversions/index.js rename js/src/product-feed/submission-success-guide/{enhanced-conversion => enhanced-conversions}/index.test.js (73%) create mode 100644 js/src/product-feed/submission-success-guide/enhanced-conversions/useTermsPolling.js diff --git a/js/src/constants.js b/js/src/constants.js index 46aa330a12..67b3fef3ae 100644 --- a/js/src/constants.js +++ b/js/src/constants.js @@ -117,3 +117,6 @@ export const ENHANCED_ADS_CONVERSION_STATUS = { ENABLED: 'enabled', DISABLED: 'disabled', }; + +export const ENHANCED_CONVERSION_TERMS_BASE_URL = + 'https://ads.google.com/aw/conversions/customersettings'; diff --git a/js/src/hooks/useGoogleAdsEnhancedConversionSettingsURL.js b/js/src/hooks/useGoogleAdsEnhancedConversionSettingsURL.js new file mode 100644 index 0000000000..8edb497698 --- /dev/null +++ b/js/src/hooks/useGoogleAdsEnhancedConversionSettingsURL.js @@ -0,0 +1,26 @@ +/** + * External dependencies + */ +import { useSelect } from '@wordpress/data'; +import { addQueryArgs } from '@wordpress/url'; + +/** + * Internal dependencies + */ +import { STORE_KEY } from '.~/data/constants'; +import { ENHANCED_CONVERSION_TERMS_BASE_URL } from '.~/constants'; + +const useGoogleAdsEnhancedConversionTermsURL = () => { + return useSelect( ( select ) => { + const adsAccount = select( STORE_KEY ).getGoogleAdsAccount(); + + const url = addQueryArgs( ENHANCED_CONVERSION_TERMS_BASE_URL, { + ocid: adsAccount?.ocid || 0, + eppn: 'enhancedconversionsaccountlevelsettings', + } ); + + return { url }; + }, [] ); +}; + +export default useGoogleAdsEnhancedConversionTermsURL; diff --git a/js/src/hooks/useGoogleAdsEnhancedConversionTermsURL.js b/js/src/hooks/useGoogleAdsEnhancedConversionTermsURL.js index 408c5dc616..14cdce4da2 100644 --- a/js/src/hooks/useGoogleAdsEnhancedConversionTermsURL.js +++ b/js/src/hooks/useGoogleAdsEnhancedConversionTermsURL.js @@ -8,9 +8,7 @@ import { addQueryArgs } from '@wordpress/url'; * Internal dependencies */ import { STORE_KEY } from '.~/data/constants'; - -export const ENHANCED_CONVERSION_TERMS_BASE_URL = - 'https://ads.google.com/aw/conversions/customersettings'; +import { ENHANCED_CONVERSION_TERMS_BASE_URL } from '.~/constants'; const useGoogleAdsEnhancedConversionTermsURL = () => { return useSelect( ( select ) => { diff --git a/js/src/product-feed/submission-success-guide/dynamic-screen-actions.js b/js/src/product-feed/submission-success-guide/dynamic-screen-actions.js index 0ef61b01cb..9acd63498c 100644 --- a/js/src/product-feed/submission-success-guide/dynamic-screen-actions.js +++ b/js/src/product-feed/submission-success-guide/dynamic-screen-actions.js @@ -9,7 +9,7 @@ import { noop } from 'lodash'; */ import LoadingLabel from '.~/components/loading-label'; import useAdsCampaigns from '.~/hooks/useAdsCampaigns'; -import EnhancedConversionActions from './enhanced-conversion/actions'; +import EnhancedConversionsActions from './enhanced-conversions/actions'; import GoogleCreditsActions from './google-credits/actions'; const DynamicScreenActions = ( { onModalClose = noop } ) => { @@ -25,7 +25,7 @@ const DynamicScreenActions = ( { onModalClose = noop } ) => { } if ( pmaxCampaigns.length ) { - return ; + return ; } return ; diff --git a/js/src/product-feed/submission-success-guide/dynamic-screen-content.js b/js/src/product-feed/submission-success-guide/dynamic-screen-content.js index 25353f3f88..826e889fab 100644 --- a/js/src/product-feed/submission-success-guide/dynamic-screen-content.js +++ b/js/src/product-feed/submission-success-guide/dynamic-screen-content.js @@ -9,7 +9,7 @@ import { __ } from '@wordpress/i18n'; import LoadingLabel from '.~/components/loading-label'; import GuidePageContent from '.~/components/guide-page-content'; import useAdsCampaigns from '.~/hooks/useAdsCampaigns'; -import EnhancedConversion from './enhanced-conversion'; +import EnhancedConversions from './enhanced-conversions'; import GoogleCredits from './google-credits'; const DynamicScreenContent = () => { @@ -26,7 +26,7 @@ const DynamicScreenContent = () => { } if ( pmaxCampaigns.length ) { - return ; + return ; } return ; diff --git a/js/src/product-feed/submission-success-guide/enhanced-conversion/index.js b/js/src/product-feed/submission-success-guide/enhanced-conversion/index.js deleted file mode 100644 index b0c5c750ee..0000000000 --- a/js/src/product-feed/submission-success-guide/enhanced-conversion/index.js +++ /dev/null @@ -1,67 +0,0 @@ -/** - * External dependencies - */ -import { __ } from '@wordpress/i18n'; -import { createInterpolateElement } from '@wordpress/element'; - -/** - * Internal dependencies - */ -import { ENHANCED_ADS_CONVERSION_STATUS } from '.~/constants'; -import GuidePageContent from '.~/components/guide-page-content'; -import PendingNotice from '.~/components/enhanced-conversion-tracking-settings/pending-notice'; -import useAcceptedCustomerDataTerms from '.~/hooks/useAcceptedCustomerDataTerms'; -import useAllowEnhancedConversions from '.~/hooks/useAllowEnhancedConversions'; - -const EnhancedConversion = () => { - const { acceptedCustomerDataTerms: hasAcceptedTerms } = - useAcceptedCustomerDataTerms(); - const { allowEnhancedConversions } = useAllowEnhancedConversions(); - - return ( - -

- { createInterpolateElement( - __( - 'Enhance your conversion tracking accuracy and empower your bidding strategy with our latest feature: Enhanced Conversion Tracking. This feature seamlessly integrates with your existing conversion tags, ensuring the secure and privacy-conscious transmission of conversion data from your website to Google.', - 'google-listings-and-ads' - ), - { - strong: , - } - ) } -

- { hasAcceptedTerms && - allowEnhancedConversions !== - ENHANCED_ADS_CONVERSION_STATUS.ENABLED ? ( -

- { __( - 'Clicking confirm will enable Enhanced Conversions on your account and update your tags accordingly. This feature can also be managed from Google Listings & Ads > Settings', - 'google-listings-and-ads' - ) } -

- ) : null } - { ! hasAcceptedTerms ? ( - <> -

- { __( - 'Activating it is easy – just agree to the terms of service on Google Ads and we will make the tagging changes needed for you. This feature can also be managed from Google Listings & Ads > Settings', - 'google-listings-and-ads' - ) } -

- { allowEnhancedConversions === - ENHANCED_ADS_CONVERSION_STATUS.PENDING ? ( - - ) : null } - - ) : null } - - ); -}; - -export default EnhancedConversion; diff --git a/js/src/product-feed/submission-success-guide/enhanced-conversion/actions.js b/js/src/product-feed/submission-success-guide/enhanced-conversions/actions.js similarity index 56% rename from js/src/product-feed/submission-success-guide/enhanced-conversion/actions.js rename to js/src/product-feed/submission-success-guide/enhanced-conversions/actions.js index 30f74f8c6e..727c881857 100644 --- a/js/src/product-feed/submission-success-guide/enhanced-conversion/actions.js +++ b/js/src/product-feed/submission-success-guide/enhanced-conversions/actions.js @@ -9,13 +9,12 @@ import { noop } from 'lodash'; * Internal dependencies */ import useDispatchCoreNotices from '.~/hooks/useDispatchCoreNotices'; -import AppButton from '.~/components/app-button'; -import CTA from '.~/components/enhanced-conversion-tracking-settings/cta'; +import CTA from './cta'; const Actions = ( { onModalClose = noop } ) => { const { createNotice } = useDispatchCoreNotices(); - const handleEnableOrDisableClick = useCallback( () => { + const handleOnConfirm = useCallback( () => { createNotice( 'info', __( 'Status successfully set', 'google-listings-and-ads' ) @@ -28,15 +27,7 @@ const Actions = ( { onModalClose = noop } ) => {
- - { __( 'Close', 'google-listings-and-ads' ) } - - - + ); }; diff --git a/js/src/product-feed/submission-success-guide/enhanced-conversion/actions.test.js b/js/src/product-feed/submission-success-guide/enhanced-conversions/actions.test.js similarity index 78% rename from js/src/product-feed/submission-success-guide/enhanced-conversion/actions.test.js rename to js/src/product-feed/submission-success-guide/enhanced-conversions/actions.test.js index cca4d7e007..2d57c6d6bb 100644 --- a/js/src/product-feed/submission-success-guide/enhanced-conversion/actions.test.js +++ b/js/src/product-feed/submission-success-guide/enhanced-conversions/actions.test.js @@ -62,7 +62,7 @@ describe( 'Enhanced Conversion Footer', () => { render( ); expect( - screen.getByText( 'Accept Terms & Conditions' ) + screen.getByText( 'Enable Enhanced Conversions' ) ).toBeInTheDocument(); } ); @@ -84,23 +84,4 @@ describe( 'Enhanced Conversion Footer', () => { expect( handleOnModalClose ).toHaveBeenCalledTimes( 1 ); } ); - - test( 'Click on disable button callback', () => { - const handleOnModalClose = jest.fn().mockName( 'On button click' ); - - useAcceptedCustomerDataTerms.mockReturnValue( { - acceptedCustomerDataTerms: true, - hasFinishedResolution: true, - } ); - useAllowEnhancedConversions.mockReturnValue( { - allowEnhancedConversions: ENHANCED_ADS_CONVERSION_STATUS.ENABLED, - } ); - - render( ); - - const button = screen.getByRole( 'button', { name: 'Disable' } ); - userEvent.click( button ); - - expect( handleOnModalClose ).toHaveBeenCalledTimes( 1 ); - } ); } ); diff --git a/js/src/product-feed/submission-success-guide/enhanced-conversions/confirm.js b/js/src/product-feed/submission-success-guide/enhanced-conversions/confirm.js new file mode 100644 index 0000000000..d37f393df2 --- /dev/null +++ b/js/src/product-feed/submission-success-guide/enhanced-conversions/confirm.js @@ -0,0 +1,32 @@ +/** + * External dependencies + */ +import { noop } from 'lodash'; +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import { ENHANCED_ADS_CONVERSION_STATUS } from '.~/constants'; +import { useAppDispatch } from '.~/data'; +import AppButton from '.~/components/app-button'; + +const Confirm = ( { onConfirm = noop } ) => { + const { updateEnhancedAdsConversionStatus } = useAppDispatch(); + + const handleConfirm = () => { + updateEnhancedAdsConversionStatus( + ENHANCED_ADS_CONVERSION_STATUS.ENABLED + ); + + onConfirm(); + }; + + return ( + + { __( 'Confirm', 'google-listings-and-ads' ) } + + ); +}; + +export default Confirm; diff --git a/js/src/product-feed/submission-success-guide/enhanced-conversions/cta.js b/js/src/product-feed/submission-success-guide/enhanced-conversions/cta.js new file mode 100644 index 0000000000..1a623c4e7b --- /dev/null +++ b/js/src/product-feed/submission-success-guide/enhanced-conversions/cta.js @@ -0,0 +1,52 @@ +/** + * External dependencies + */ +import { noop } from 'lodash'; +import { useCallback, useState, useEffect } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import AppButton from '.~/components/app-button'; +import useAcceptedCustomerDataTerms from '.~/hooks/useAcceptedCustomerDataTerms'; +import useTermsPolling from './useTermsPolling'; +import Enable from './enable'; +import Confirm from './confirm'; + +const CTA = ( { onConfirm = noop } ) => { + const [ startBackgroundPoll, setStartBackgroundPoll ] = useState( false ); + const { acceptedCustomerDataTerms, hasFinishedResolution } = + useAcceptedCustomerDataTerms(); + useTermsPolling( startBackgroundPoll ); + + // Turn off polling when the user has accepted the terms. + useEffect( () => { + if ( acceptedCustomerDataTerms && startBackgroundPoll ) { + setStartBackgroundPoll( false ); + } + }, [ acceptedCustomerDataTerms, startBackgroundPoll ] ); + + const handleOnEnableEnhancedConversions = useCallback( () => { + setStartBackgroundPoll( true ); + }, [] ); + + if ( ! hasFinishedResolution ) { + return null; + } + + if ( startBackgroundPoll ) { + return ; + } + + if ( ! acceptedCustomerDataTerms ) { + return ( + + ); + } + + return ; +}; + +export default CTA; diff --git a/js/src/product-feed/submission-success-guide/enhanced-conversions/enable.js b/js/src/product-feed/submission-success-guide/enhanced-conversions/enable.js new file mode 100644 index 0000000000..a043f17529 --- /dev/null +++ b/js/src/product-feed/submission-success-guide/enhanced-conversions/enable.js @@ -0,0 +1,34 @@ +/** + * External dependencies + */ +import { noop } from 'lodash'; +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import { ENHANCED_ADS_CONVERSION_STATUS } from '.~/constants'; +import { useAppDispatch } from '.~/data'; +import AppButton from '.~/components/app-button'; +import useGoogleAdsEnhancedConversionTermsURL from '.~/hooks/useGoogleAdsEnhancedConversionTermsURL'; + +const Enable = ( { onEnableEnhancedConversions = noop } ) => { + const { updateEnhancedAdsConversionStatus } = useAppDispatch(); + const { url } = useGoogleAdsEnhancedConversionTermsURL(); + + const handleOnEnableEnhancedConversions = () => { + window.open( url, '_blank' ); + updateEnhancedAdsConversionStatus( + ENHANCED_ADS_CONVERSION_STATUS.PENDING + ); + onEnableEnhancedConversions(); + }; + + return ( + + { __( 'Enable Enhanced Conversions', 'google-listings-and-ads' ) } + + ); +}; + +export default Enable; diff --git a/js/src/product-feed/submission-success-guide/enhanced-conversions/index.js b/js/src/product-feed/submission-success-guide/enhanced-conversions/index.js new file mode 100644 index 0000000000..87abca662f --- /dev/null +++ b/js/src/product-feed/submission-success-guide/enhanced-conversions/index.js @@ -0,0 +1,181 @@ +/** + * External dependencies + */ +import { __ } from '@wordpress/i18n'; +import { Fragment, createInterpolateElement } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import GuidePageContent from '.~/components/guide-page-content'; +import TrackableLink from '.~/components/trackable-link'; +import useAcceptedCustomerDataTerms from '.~/hooks/useAcceptedCustomerDataTerms'; +import useGoogleAdsEnhancedConversionSettingsURL from '.~/hooks/useGoogleAdsEnhancedConversionSettingsURL'; +import AppSpinner from '.~/components/app-spinner'; + +const EnhancedConversions = () => { + const { acceptedCustomerDataTerms, hasFinishedResolution } = + useAcceptedCustomerDataTerms(); + const { url } = useGoogleAdsEnhancedConversionSettingsURL(); + + let title = __( + 'Optimize your conversion tracking with Enhanced Conversions', + 'google-listings-and-ads' + ); + + if ( acceptedCustomerDataTerms ) { + title = __( + 'Your Enhanced Conversions are almost ready', + 'google-listings-and-ads' + ); + } + + const getPageContentBody = () => { + if ( ! hasFinishedResolution ) { + return ; + } + + if ( ! acceptedCustomerDataTerms ) { + return ( + +

+ { createInterpolateElement( + __( + 'Enhance your conversion tracking accuracy and empower your bidding strategy with our latest feature: Enhanced Conversion Tracking. This feature seamlessly integrates with your existing conversion tags, ensuring the secure and privacy-conscious transmission of conversion data from your website to Google', + 'google-listings-and-ads' + ), + { + strong: , + } + ) } +

+

+ { __( + 'You can activate this feature in a few simple steps:', + 'google-listing-ads' + ) } +

+ +
    +
  1. + { createInterpolateElement( + __( + 'Click below to Enable Enhanced Conversions', + 'google-listings-and-ads' + ), + { + strong: , + } + ) } +
    2. +
  2. + { createInterpolateElement( + __( + 'Check the box in Google Ads to Turn on Enhanced Conversions', + 'google-listings-and-ads' + ), + { + strong: , + } + ) } +
    3. +
  3. + { createInterpolateElement( + __( + 'Confirm you Agree to the Customer Data Terms', + 'google-listings-and-ads' + ), + { + strong: , + } + ) } +
    4. +
  4. + { createInterpolateElement( + __( + 'In the drop-down, choose Google Tag as your set-up method', + 'google-listings-and-ads' + ), + { + strong: , + } + ) } +
    5. +
  5. + { createInterpolateElement( + __( + 'Click Save and return to this screen', + 'google-listings-and-ads' + ), + { + strong: , + } + ) } +
    6. +
+ +

+ { createInterpolateElement( + __( + 'For more information, feel free to consult our help center article', + 'google-listings-and-ads' + ), + { + link: ( + + ), + } + ) } +

+ + ); + } + + return ( + +

+ { createInterpolateElement( + __( + 'We noticed that you have already accepted Enhanced Conversions Customer Data Terms. In order to complete Enhanced Conversions setup on GL&A, and integrate with your Google Listings & Ads Conversions Tags, click Confirm below', + 'google-listings-and-ads' + ), + { + strong: , + } + ) } +

+ +

+ { createInterpolateElement( + __( + 'If you haven’t done so already please ensure that Enhanced Conversions is enabled in Google Ads Settings, and that the setup method chosen is Google Tag', + 'google-listings-and-ads' + ), + { + strong: , + link: ( + + ), + } + ) } +

+ + ); + }; + + return ( + + { getPageContentBody() } + + ); +}; + +export default EnhancedConversions; diff --git a/js/src/product-feed/submission-success-guide/enhanced-conversion/index.test.js b/js/src/product-feed/submission-success-guide/enhanced-conversions/index.test.js similarity index 73% rename from js/src/product-feed/submission-success-guide/enhanced-conversion/index.test.js rename to js/src/product-feed/submission-success-guide/enhanced-conversions/index.test.js index 9f52cad697..93389db0eb 100644 --- a/js/src/product-feed/submission-success-guide/enhanced-conversion/index.test.js +++ b/js/src/product-feed/submission-success-guide/enhanced-conversions/index.test.js @@ -29,7 +29,7 @@ describe( 'Enhanced Conversion', () => { render( ); expect( screen.getByText( - 'Activating it is easy – just agree to the terms of service on Google Ads and we will make the tagging changes needed for you. This feature can also be managed from Google Listings & Ads > Settings' + 'Optimize your conversion tracking with Enhanced Conversions' ) ).toBeInTheDocument(); } ); @@ -42,9 +42,7 @@ describe( 'Enhanced Conversion', () => { render( ); expect( - screen.getByText( - 'Clicking confirm will enable Enhanced Conversions on your account and update your tags accordingly. This feature can also be managed from Google Listings & Ads > Settings' - ) + screen.getByText( 'Your Enhanced Conversions are almost ready' ) ).toBeInTheDocument(); } ); } ); diff --git a/js/src/product-feed/submission-success-guide/enhanced-conversions/useTermsPolling.js b/js/src/product-feed/submission-success-guide/enhanced-conversions/useTermsPolling.js new file mode 100644 index 0000000000..268154ea26 --- /dev/null +++ b/js/src/product-feed/submission-success-guide/enhanced-conversions/useTermsPolling.js @@ -0,0 +1,53 @@ +/** + * External dependencies + */ +import { useEffect } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import { ENHANCED_ADS_CONVERSION_STATUS } from '.~/constants'; +import { useAppDispatch } from '.~/data'; +import useAcceptedCustomerDataTerms from '.~/hooks/useAcceptedCustomerDataTerms'; +import useAllowEnhancedConversions from '.~/hooks/useAllowEnhancedConversions'; +import useAutoCheckEnhancedConversionTOS from '.~/hooks/useAutoCheckEnhancedConversionTOS'; + +const useTermsPolling = ( startBackgroundPoll = false ) => { + const { invalidateResolution } = useAppDispatch(); + const { + startEnhancedConversionTOSPolling, + stopEnhancedConversionTOSPolling, + } = useAutoCheckEnhancedConversionTOS(); + const { allowEnhancedConversions } = useAllowEnhancedConversions(); + const { acceptedCustomerDataTerms } = useAcceptedCustomerDataTerms(); + + useEffect( () => { + if ( + ! acceptedCustomerDataTerms && + allowEnhancedConversions === + ENHANCED_ADS_CONVERSION_STATUS.PENDING && + startBackgroundPoll + ) { + startEnhancedConversionTOSPolling(); + return; + } + + stopEnhancedConversionTOSPolling(); + }, [ + acceptedCustomerDataTerms, + allowEnhancedConversions, + startEnhancedConversionTOSPolling, + stopEnhancedConversionTOSPolling, + startBackgroundPoll, + ] ); + + useEffect( () => { + if ( + allowEnhancedConversions === ENHANCED_ADS_CONVERSION_STATUS.PENDING + ) { + invalidateResolution( 'getAcceptedCustomerDataTerms', [] ); + } + }, [ allowEnhancedConversions, invalidateResolution ] ); +}; + +export default useTermsPolling; diff --git a/js/src/product-feed/submission-success-guide/index.test.js b/js/src/product-feed/submission-success-guide/index.test.js index dde91edb04..03fcf182d1 100644 --- a/js/src/product-feed/submission-success-guide/index.test.js +++ b/js/src/product-feed/submission-success-guide/index.test.js @@ -70,7 +70,9 @@ describe( 'SubmissionSuccessGuide', () => { userEvent.click( button ); expect( - screen.getByText( 'Enhanced Conversion Tracking' ) + screen.getByText( + 'Optimize your conversion tracking with Enhanced Conversions' + ) ).toBeInTheDocument(); } ); } ); From 2582e181d33ec706fc51a0767f90979e32e07639 Mon Sep 17 00:00:00 2001 From: asvinb Date: Tue, 9 Apr 2024 21:18:47 +0400 Subject: [PATCH 03/14] Refactor EC pannel settings. --- .../enable.js | 26 +++++++ .../index.js | 15 +--- .../pending-notice.js | 50 ------------- .../toggle.js | 70 +++++++++++-------- .../{confirm.js => confirm-button.js} | 0 .../enhanced-conversions/cta.js | 8 +-- .../{enable.js => enable-button.js} | 4 +- 7 files changed, 76 insertions(+), 97 deletions(-) create mode 100644 js/src/components/enhanced-conversion-tracking-settings/enable.js delete mode 100644 js/src/components/enhanced-conversion-tracking-settings/pending-notice.js rename js/src/product-feed/submission-success-guide/enhanced-conversions/{confirm.js => confirm-button.js} (100%) rename js/src/product-feed/submission-success-guide/enhanced-conversions/{enable.js => enable-button.js} (90%) diff --git a/js/src/components/enhanced-conversion-tracking-settings/enable.js b/js/src/components/enhanced-conversion-tracking-settings/enable.js new file mode 100644 index 0000000000..36764456ed --- /dev/null +++ b/js/src/components/enhanced-conversion-tracking-settings/enable.js @@ -0,0 +1,26 @@ +/** + * External dependencies + */ +import { Fragment } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import EnableButton from '.~/product-feed/submission-success-guide/enhanced-conversions/enable-button'; + +const Enable = () => { + return ( + +

+ { __( + 'In order to enable enhanced conversions, you will need to visit the settings in your Ads account. You will be prompted to accept terms & conditions.', + 'google-listings-and-ads' + ) } +

+ + + ); +}; + +export default Enable; diff --git a/js/src/components/enhanced-conversion-tracking-settings/index.js b/js/src/components/enhanced-conversion-tracking-settings/index.js index 719346956b..89121b6e2b 100644 --- a/js/src/components/enhanced-conversion-tracking-settings/index.js +++ b/js/src/components/enhanced-conversion-tracking-settings/index.js @@ -6,15 +6,12 @@ import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -import { ENHANCED_ADS_CONVERSION_STATUS } from '.~/constants'; import useAcceptedCustomerDataTerms from '.~/hooks/useAcceptedCustomerDataTerms'; import useGoogleAdsAccount from '.~/hooks/useGoogleAdsAccount'; import Section from '.~/wcdl/section'; -import PendingNotice from '.~/components/enhanced-conversion-tracking-settings/pending-notice'; import AppSpinner from '.~/components/app-spinner'; -import useAllowEnhancedConversions from '.~/hooks/useAllowEnhancedConversions'; import Toggle from './toggle'; -import AcceptTerms from './accept-terms'; +import Enable from './enable'; const DESCRIPTION = (

@@ -34,7 +31,6 @@ const EnhancedConversionTrackingSettings = () => { const { googleAdsAccount } = useGoogleAdsAccount(); const { acceptedCustomerDataTerms, hasFinishedResolution } = useAcceptedCustomerDataTerms(); - const { allowEnhancedConversions } = useAllowEnhancedConversions(); if ( ! googleAdsAccount || ! googleAdsAccount.id ) { return null; @@ -45,15 +41,8 @@ const EnhancedConversionTrackingSettings = () => { return ; } - if ( - ! acceptedCustomerDataTerms && - allowEnhancedConversions === ENHANCED_ADS_CONVERSION_STATUS.PENDING - ) { - return ; - } - if ( ! acceptedCustomerDataTerms ) { - return ; + return ; } return ; diff --git a/js/src/components/enhanced-conversion-tracking-settings/pending-notice.js b/js/src/components/enhanced-conversion-tracking-settings/pending-notice.js deleted file mode 100644 index 7b3b389ad2..0000000000 --- a/js/src/components/enhanced-conversion-tracking-settings/pending-notice.js +++ /dev/null @@ -1,50 +0,0 @@ -/** - * External dependencies - */ -import { __ } from '@wordpress/i18n'; -import { createInterpolateElement, useCallback } from '@wordpress/element'; - -/** - * Internal dependencies - */ -import { ENHANCED_ADS_CONVERSION_STATUS } from '.~/constants'; -import { useAppDispatch } from '.~/data'; -import TrackableLink from '.~/components/trackable-link'; -import useTermsPolling from './useTermsPolling'; -import useGoogleAdsEnhancedConversionTermsURL from '.~/hooks/useGoogleAdsEnhancedConversionTermsURL'; - -const PendingNotice = () => { - const { updateEnhancedAdsConversionStatus } = useAppDispatch(); - const { url } = useGoogleAdsEnhancedConversionTermsURL(); - useTermsPolling(); - - const handleOnClick = useCallback( () => { - updateEnhancedAdsConversionStatus( - ENHANCED_ADS_CONVERSION_STATUS.PENDING - ); - }, [ updateEnhancedAdsConversionStatus ] ); - - return ( -

- { createInterpolateElement( - __( - 'Enhanced Conversion Tracking will be enabled once you’ve agreed to the terms of service on Google Ads, which can be found in your Google Ads settings screen.', - 'google-listings-and-ads' - ), - { - link: ( - - ), - } - ) } -

- ); -}; - -export default PendingNotice; diff --git a/js/src/components/enhanced-conversion-tracking-settings/toggle.js b/js/src/components/enhanced-conversion-tracking-settings/toggle.js index 60cc2cb6cc..b430dd9eb8 100644 --- a/js/src/components/enhanced-conversion-tracking-settings/toggle.js +++ b/js/src/components/enhanced-conversion-tracking-settings/toggle.js @@ -2,7 +2,12 @@ * External dependencies */ import { __ } from '@wordpress/i18n'; -import { useCallback, useEffect } from '@wordpress/element'; +import { + useCallback, + useEffect, + Fragment, + createInterpolateElement, +} from '@wordpress/element'; import { Spinner } from '@woocommerce/components'; /** @@ -11,8 +16,9 @@ import { Spinner } from '@woocommerce/components'; import { ENHANCED_ADS_CONVERSION_STATUS } from '.~/constants'; import { useAppDispatch } from '.~/data'; import AppStandaloneToggleControl from '.~/components/app-standalone-toggle-control'; +import TrackableLink from '.~/components/trackable-link'; import useAllowEnhancedConversions from '.~/hooks/useAllowEnhancedConversions'; -import useAcceptedCustomerDataTerms from '.~/hooks/useAcceptedCustomerDataTerms'; +import useGoogleAdsEnhancedConversionSettingsURL from '.~/hooks/useGoogleAdsEnhancedConversionSettingsURL'; const TOGGLE_LABEL_MAP = { [ ENHANCED_ADS_CONVERSION_STATUS.DISABLED ]: __( @@ -26,22 +32,10 @@ const TOGGLE_LABEL_MAP = { }; const Toggle = () => { - const { updateEnhancedAdsConversionStatus, invalidateResolution } = - useAppDispatch(); + const { url } = useGoogleAdsEnhancedConversionSettingsURL(); + const { updateEnhancedAdsConversionStatus } = useAppDispatch(); const { allowEnhancedConversions, hasFinishedResolution } = useAllowEnhancedConversions(); - const { - acceptedCustomerDataTerms, - hasFinishedResolution: hasResolvedAcceptedCustomerDataTerms, - } = useAcceptedCustomerDataTerms(); - - useEffect( () => { - if ( - allowEnhancedConversions === ENHANCED_ADS_CONVERSION_STATUS.PENDING - ) { - invalidateResolution( 'getAcceptedCustomerDataTerms', [] ); - } - }, [ allowEnhancedConversions, invalidateResolution ] ); const handleOnChange = useCallback( ( value ) => { @@ -59,18 +53,38 @@ const Toggle = () => { } return ( - + +

+ { createInterpolateElement( + __( + 'To properly measure your enhanced conversions, please ensure Enhanced Conversions is enabled in Google Ads Settings, and that the setup method chosen is Google Tag', + 'google-listings-and-ads' + ), + { + link: ( + + ), + } + ) } +

+ + + ); }; diff --git a/js/src/product-feed/submission-success-guide/enhanced-conversions/confirm.js b/js/src/product-feed/submission-success-guide/enhanced-conversions/confirm-button.js similarity index 100% rename from js/src/product-feed/submission-success-guide/enhanced-conversions/confirm.js rename to js/src/product-feed/submission-success-guide/enhanced-conversions/confirm-button.js diff --git a/js/src/product-feed/submission-success-guide/enhanced-conversions/cta.js b/js/src/product-feed/submission-success-guide/enhanced-conversions/cta.js index 1a623c4e7b..f191ead6c4 100644 --- a/js/src/product-feed/submission-success-guide/enhanced-conversions/cta.js +++ b/js/src/product-feed/submission-success-guide/enhanced-conversions/cta.js @@ -10,8 +10,8 @@ import { useCallback, useState, useEffect } from '@wordpress/element'; import AppButton from '.~/components/app-button'; import useAcceptedCustomerDataTerms from '.~/hooks/useAcceptedCustomerDataTerms'; import useTermsPolling from './useTermsPolling'; -import Enable from './enable'; -import Confirm from './confirm'; +import EnableButton from './enable-button'; +import ConfirmButton from './confirm-button'; const CTA = ( { onConfirm = noop } ) => { const [ startBackgroundPoll, setStartBackgroundPoll ] = useState( false ); @@ -40,13 +40,13 @@ const CTA = ( { onConfirm = noop } ) => { if ( ! acceptedCustomerDataTerms ) { return ( - ); } - return ; + return ; }; export default CTA; diff --git a/js/src/product-feed/submission-success-guide/enhanced-conversions/enable.js b/js/src/product-feed/submission-success-guide/enhanced-conversions/enable-button.js similarity index 90% rename from js/src/product-feed/submission-success-guide/enhanced-conversions/enable.js rename to js/src/product-feed/submission-success-guide/enhanced-conversions/enable-button.js index a043f17529..51e7bd77bb 100644 --- a/js/src/product-feed/submission-success-guide/enhanced-conversions/enable.js +++ b/js/src/product-feed/submission-success-guide/enhanced-conversions/enable-button.js @@ -12,7 +12,7 @@ import { useAppDispatch } from '.~/data'; import AppButton from '.~/components/app-button'; import useGoogleAdsEnhancedConversionTermsURL from '.~/hooks/useGoogleAdsEnhancedConversionTermsURL'; -const Enable = ( { onEnableEnhancedConversions = noop } ) => { +const EnableButton = ( { onEnableEnhancedConversions = noop } ) => { const { updateEnhancedAdsConversionStatus } = useAppDispatch(); const { url } = useGoogleAdsEnhancedConversionTermsURL(); @@ -31,4 +31,4 @@ const Enable = ( { onEnableEnhancedConversions = noop } ) => { ); }; -export default Enable; +export default EnableButton; From 0a35f0cc4141e949185cc080409de68f6895d3a1 Mon Sep 17 00:00:00 2001 From: asvinb Date: Wed, 10 Apr 2024 11:26:15 +0400 Subject: [PATCH 04/14] Changes to useTermsPolling hook. --- .../accept-terms.js | 41 ---- .../cta.js | 98 -------- .../cta.test.js | 221 ------------------ .../enable.js | 5 +- .../toggle.js | 5 +- .../useTermsPolling.js | 53 ----- .../useAutoCheckEnhancedConversionTOS.js | 23 +- .../enhanced-conversions/actions.js | 2 +- .../enhanced-conversions/confirm-button.js | 4 +- .../enhanced-conversions/cta.js | 25 +- .../enhanced-conversions/enable-button.js | 4 +- .../enhanced-conversions/useTermsPolling.js | 4 - 12 files changed, 23 insertions(+), 462 deletions(-) delete mode 100644 js/src/components/enhanced-conversion-tracking-settings/accept-terms.js delete mode 100644 js/src/components/enhanced-conversion-tracking-settings/cta.js delete mode 100644 js/src/components/enhanced-conversion-tracking-settings/cta.test.js delete mode 100644 js/src/components/enhanced-conversion-tracking-settings/useTermsPolling.js diff --git a/js/src/components/enhanced-conversion-tracking-settings/accept-terms.js b/js/src/components/enhanced-conversion-tracking-settings/accept-terms.js deleted file mode 100644 index a21fcb944c..0000000000 --- a/js/src/components/enhanced-conversion-tracking-settings/accept-terms.js +++ /dev/null @@ -1,41 +0,0 @@ -/** - * 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/useGoogleAdsEnhancedConversionTermsURL'; - -const AcceptTerms = ( { - acceptTermsLabel = __( - 'Accept Terms & Conditions', - 'google-listings-and-ads' - ), - onAcceptTerms = noop, -} ) => { - const { url } = useGoogleAdsEnhancedConversionTermsURL(); - const { updateEnhancedAdsConversionStatus } = useAppDispatch(); - - const handleAcceptTerms = useCallback( () => { - window.open( url, '_blank' ); - updateEnhancedAdsConversionStatus( - ENHANCED_ADS_CONVERSION_STATUS.PENDING - ); - onAcceptTerms(); - }, [ updateEnhancedAdsConversionStatus, url, onAcceptTerms ] ); - - return ( - - { acceptTermsLabel } - - ); -}; - -export default AcceptTerms; diff --git a/js/src/components/enhanced-conversion-tracking-settings/cta.js b/js/src/components/enhanced-conversion-tracking-settings/cta.js deleted file mode 100644 index dc2ff94adf..0000000000 --- a/js/src/components/enhanced-conversion-tracking-settings/cta.js +++ /dev/null @@ -1,98 +0,0 @@ -/** - * 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 ; - } - - if ( ! acceptedCustomerDataTerms ) { - return ; - } - - if ( allowEnhancedConversions === ENHANCED_ADS_CONVERSION_STATUS.ENABLED ) { - return ( - - { disableLabel } - - ); - } - - // User has accepted TOS or tracking is disabled. - return ( - - { enableLabel } - - ); -}; - -export default CTA; diff --git a/js/src/components/enhanced-conversion-tracking-settings/cta.test.js b/js/src/components/enhanced-conversion-tracking-settings/cta.test.js deleted file mode 100644 index 614a4002a5..0000000000 --- a/js/src/components/enhanced-conversion-tracking-settings/cta.test.js +++ /dev/null @@ -1,221 +0,0 @@ -jest.mock( '@woocommerce/components', () => ( { - ...jest.requireActual( '@woocommerce/components' ), - Spinner: jest - .fn( () =>
) - .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( ); - 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( ); - 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( ); - 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( ); - - 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( ); - - 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( ); - - 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( ); - - 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( ); - - 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( ); - - expect( - screen.getByRole( 'button', { name: 'Enable' } ) - ).toBeInTheDocument(); - } ); -} ); diff --git a/js/src/components/enhanced-conversion-tracking-settings/enable.js b/js/src/components/enhanced-conversion-tracking-settings/enable.js index 36764456ed..57e545f39e 100644 --- a/js/src/components/enhanced-conversion-tracking-settings/enable.js +++ b/js/src/components/enhanced-conversion-tracking-settings/enable.js @@ -7,7 +7,7 @@ import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -import EnableButton from '.~/product-feed/submission-success-guide/enhanced-conversions/enable-button'; +import CTA from '.~/product-feed/submission-success-guide/enhanced-conversions/cta'; const Enable = () => { return ( @@ -18,7 +18,8 @@ const Enable = () => { 'google-listings-and-ads' ) }

- + + ); }; diff --git a/js/src/components/enhanced-conversion-tracking-settings/toggle.js b/js/src/components/enhanced-conversion-tracking-settings/toggle.js index b430dd9eb8..527188b050 100644 --- a/js/src/components/enhanced-conversion-tracking-settings/toggle.js +++ b/js/src/components/enhanced-conversion-tracking-settings/toggle.js @@ -4,17 +4,16 @@ import { __ } from '@wordpress/i18n'; import { useCallback, - useEffect, Fragment, createInterpolateElement, } from '@wordpress/element'; -import { Spinner } from '@woocommerce/components'; /** * Internal dependencies */ import { ENHANCED_ADS_CONVERSION_STATUS } from '.~/constants'; import { useAppDispatch } from '.~/data'; +import AppSpinner from '.~/components/app-spinner'; import AppStandaloneToggleControl from '.~/components/app-standalone-toggle-control'; import TrackableLink from '.~/components/trackable-link'; import useAllowEnhancedConversions from '.~/hooks/useAllowEnhancedConversions'; @@ -49,7 +48,7 @@ const Toggle = () => { ); if ( ! hasFinishedResolution ) { - return ; + return ; } return ( diff --git a/js/src/components/enhanced-conversion-tracking-settings/useTermsPolling.js b/js/src/components/enhanced-conversion-tracking-settings/useTermsPolling.js deleted file mode 100644 index 268154ea26..0000000000 --- a/js/src/components/enhanced-conversion-tracking-settings/useTermsPolling.js +++ /dev/null @@ -1,53 +0,0 @@ -/** - * External dependencies - */ -import { useEffect } from '@wordpress/element'; - -/** - * Internal dependencies - */ -import { ENHANCED_ADS_CONVERSION_STATUS } from '.~/constants'; -import { useAppDispatch } from '.~/data'; -import useAcceptedCustomerDataTerms from '.~/hooks/useAcceptedCustomerDataTerms'; -import useAllowEnhancedConversions from '.~/hooks/useAllowEnhancedConversions'; -import useAutoCheckEnhancedConversionTOS from '.~/hooks/useAutoCheckEnhancedConversionTOS'; - -const useTermsPolling = ( startBackgroundPoll = false ) => { - const { invalidateResolution } = useAppDispatch(); - const { - startEnhancedConversionTOSPolling, - stopEnhancedConversionTOSPolling, - } = useAutoCheckEnhancedConversionTOS(); - const { allowEnhancedConversions } = useAllowEnhancedConversions(); - const { acceptedCustomerDataTerms } = useAcceptedCustomerDataTerms(); - - useEffect( () => { - if ( - ! acceptedCustomerDataTerms && - allowEnhancedConversions === - ENHANCED_ADS_CONVERSION_STATUS.PENDING && - startBackgroundPoll - ) { - startEnhancedConversionTOSPolling(); - return; - } - - stopEnhancedConversionTOSPolling(); - }, [ - acceptedCustomerDataTerms, - allowEnhancedConversions, - startEnhancedConversionTOSPolling, - stopEnhancedConversionTOSPolling, - startBackgroundPoll, - ] ); - - useEffect( () => { - if ( - allowEnhancedConversions === ENHANCED_ADS_CONVERSION_STATUS.PENDING - ) { - invalidateResolution( 'getAcceptedCustomerDataTerms', [] ); - } - }, [ allowEnhancedConversions, invalidateResolution ] ); -}; - -export default useTermsPolling; diff --git a/js/src/hooks/useAutoCheckEnhancedConversionTOS.js b/js/src/hooks/useAutoCheckEnhancedConversionTOS.js index 1a576165c9..00d2a58812 100644 --- a/js/src/hooks/useAutoCheckEnhancedConversionTOS.js +++ b/js/src/hooks/useAutoCheckEnhancedConversionTOS.js @@ -1,25 +1,25 @@ /** * External dependencies */ -import { useCallback, useState } from '@wordpress/element'; +import { useCallback } from '@wordpress/element'; /** * Internal dependencies */ +import { ENHANCED_ADS_CONVERSION_STATUS } from '.~/constants'; import { useAppDispatch } from '.~/data'; import useWindowFocusCallbackIntervalEffect from '.~/hooks/useWindowFocusCallbackIntervalEffect'; +import useAcceptedCustomerDataTerms from '.~/hooks/useAcceptedCustomerDataTerms'; +import useAllowEnhancedConversions from '.~/hooks/useAllowEnhancedConversions'; const useAutoCheckEnhancedConversionTOS = () => { - const [ polling, setPolling ] = useState( false ); + const { acceptedCustomerDataTerms } = useAcceptedCustomerDataTerms(); + const { allowEnhancedConversions } = useAllowEnhancedConversions(); const { fetchAcceptedCustomerDataTerms } = useAppDispatch(); - const startEnhancedConversionTOSPolling = useCallback( () => { - setPolling( true ); - }, [] ); - - const stopEnhancedConversionTOSPolling = useCallback( () => { - setPolling( false ); - }, [] ); + const polling = + ! acceptedCustomerDataTerms && + allowEnhancedConversions === ENHANCED_ADS_CONVERSION_STATUS.PENDING; const checkStatus = useCallback( async () => { if ( ! polling ) { @@ -31,10 +31,7 @@ const useAutoCheckEnhancedConversionTOS = () => { useWindowFocusCallbackIntervalEffect( checkStatus, 30 ); - return { - startEnhancedConversionTOSPolling, - stopEnhancedConversionTOSPolling, - }; + return polling; }; export default useAutoCheckEnhancedConversionTOS; diff --git a/js/src/product-feed/submission-success-guide/enhanced-conversions/actions.js b/js/src/product-feed/submission-success-guide/enhanced-conversions/actions.js index 727c881857..e27d13e748 100644 --- a/js/src/product-feed/submission-success-guide/enhanced-conversions/actions.js +++ b/js/src/product-feed/submission-success-guide/enhanced-conversions/actions.js @@ -1,9 +1,9 @@ /** * External dependencies */ +import { noop } from 'lodash'; import { __ } from '@wordpress/i18n'; import { useCallback, Fragment } from '@wordpress/element'; -import { noop } from 'lodash'; /** * Internal dependencies diff --git a/js/src/product-feed/submission-success-guide/enhanced-conversions/confirm-button.js b/js/src/product-feed/submission-success-guide/enhanced-conversions/confirm-button.js index d37f393df2..c95421f5a3 100644 --- a/js/src/product-feed/submission-success-guide/enhanced-conversions/confirm-button.js +++ b/js/src/product-feed/submission-success-guide/enhanced-conversions/confirm-button.js @@ -11,7 +11,7 @@ import { ENHANCED_ADS_CONVERSION_STATUS } from '.~/constants'; import { useAppDispatch } from '.~/data'; import AppButton from '.~/components/app-button'; -const Confirm = ( { onConfirm = noop } ) => { +const ConfirmButton = ( { onConfirm = noop } ) => { const { updateEnhancedAdsConversionStatus } = useAppDispatch(); const handleConfirm = () => { @@ -29,4 +29,4 @@ const Confirm = ( { onConfirm = noop } ) => { ); }; -export default Confirm; +export default ConfirmButton; diff --git a/js/src/product-feed/submission-success-guide/enhanced-conversions/cta.js b/js/src/product-feed/submission-success-guide/enhanced-conversions/cta.js index f191ead6c4..e33f5f830d 100644 --- a/js/src/product-feed/submission-success-guide/enhanced-conversions/cta.js +++ b/js/src/product-feed/submission-success-guide/enhanced-conversions/cta.js @@ -2,48 +2,31 @@ * External dependencies */ import { noop } from 'lodash'; -import { useCallback, useState, useEffect } from '@wordpress/element'; /** * Internal dependencies */ import AppButton from '.~/components/app-button'; import useAcceptedCustomerDataTerms from '.~/hooks/useAcceptedCustomerDataTerms'; -import useTermsPolling from './useTermsPolling'; import EnableButton from './enable-button'; import ConfirmButton from './confirm-button'; +import useAutoCheckEnhancedConversionTOS from '.~/hooks/useAutoCheckEnhancedConversionTOS'; const CTA = ( { onConfirm = noop } ) => { - const [ startBackgroundPoll, setStartBackgroundPoll ] = useState( false ); const { acceptedCustomerDataTerms, hasFinishedResolution } = useAcceptedCustomerDataTerms(); - useTermsPolling( startBackgroundPoll ); - - // Turn off polling when the user has accepted the terms. - useEffect( () => { - if ( acceptedCustomerDataTerms && startBackgroundPoll ) { - setStartBackgroundPoll( false ); - } - }, [ acceptedCustomerDataTerms, startBackgroundPoll ] ); - - const handleOnEnableEnhancedConversions = useCallback( () => { - setStartBackgroundPoll( true ); - }, [] ); + const isPolling = useAutoCheckEnhancedConversionTOS(); if ( ! hasFinishedResolution ) { return null; } - if ( startBackgroundPoll ) { + if ( isPolling ) { return ; } if ( ! acceptedCustomerDataTerms ) { - return ( - - ); + return ; } return ; diff --git a/js/src/product-feed/submission-success-guide/enhanced-conversions/enable-button.js b/js/src/product-feed/submission-success-guide/enhanced-conversions/enable-button.js index 51e7bd77bb..23c3caef43 100644 --- a/js/src/product-feed/submission-success-guide/enhanced-conversions/enable-button.js +++ b/js/src/product-feed/submission-success-guide/enhanced-conversions/enable-button.js @@ -1,7 +1,6 @@ /** * External dependencies */ -import { noop } from 'lodash'; import { __ } from '@wordpress/i18n'; /** @@ -12,7 +11,7 @@ import { useAppDispatch } from '.~/data'; import AppButton from '.~/components/app-button'; import useGoogleAdsEnhancedConversionTermsURL from '.~/hooks/useGoogleAdsEnhancedConversionTermsURL'; -const EnableButton = ( { onEnableEnhancedConversions = noop } ) => { +const EnableButton = () => { const { updateEnhancedAdsConversionStatus } = useAppDispatch(); const { url } = useGoogleAdsEnhancedConversionTermsURL(); @@ -21,7 +20,6 @@ const EnableButton = ( { onEnableEnhancedConversions = noop } ) => { updateEnhancedAdsConversionStatus( ENHANCED_ADS_CONVERSION_STATUS.PENDING ); - onEnableEnhancedConversions(); }; return ( diff --git a/js/src/product-feed/submission-success-guide/enhanced-conversions/useTermsPolling.js b/js/src/product-feed/submission-success-guide/enhanced-conversions/useTermsPolling.js index 268154ea26..8f7ad82eac 100644 --- a/js/src/product-feed/submission-success-guide/enhanced-conversions/useTermsPolling.js +++ b/js/src/product-feed/submission-success-guide/enhanced-conversions/useTermsPolling.js @@ -8,7 +8,6 @@ import { useEffect } from '@wordpress/element'; */ import { ENHANCED_ADS_CONVERSION_STATUS } from '.~/constants'; import { useAppDispatch } from '.~/data'; -import useAcceptedCustomerDataTerms from '.~/hooks/useAcceptedCustomerDataTerms'; import useAllowEnhancedConversions from '.~/hooks/useAllowEnhancedConversions'; import useAutoCheckEnhancedConversionTOS from '.~/hooks/useAutoCheckEnhancedConversionTOS'; @@ -19,11 +18,9 @@ const useTermsPolling = ( startBackgroundPoll = false ) => { stopEnhancedConversionTOSPolling, } = useAutoCheckEnhancedConversionTOS(); const { allowEnhancedConversions } = useAllowEnhancedConversions(); - const { acceptedCustomerDataTerms } = useAcceptedCustomerDataTerms(); useEffect( () => { if ( - ! acceptedCustomerDataTerms && allowEnhancedConversions === ENHANCED_ADS_CONVERSION_STATUS.PENDING && startBackgroundPoll @@ -34,7 +31,6 @@ const useTermsPolling = ( startBackgroundPoll = false ) => { stopEnhancedConversionTOSPolling(); }, [ - acceptedCustomerDataTerms, allowEnhancedConversions, startEnhancedConversionTOSPolling, stopEnhancedConversionTOSPolling, From 891676a98c87199682fbe4a2d0d1baa628991467 Mon Sep 17 00:00:00 2001 From: asvinb Date: Wed, 10 Apr 2024 12:28:04 +0400 Subject: [PATCH 05/14] Delete unused useGoogleAdsEnhancedConversionTermsURL.js. --- ...eGoogleAdsEnhancedConversionSettingsURL.js | 4 +- .../useGoogleAdsEnhancedConversionTermsURL.js | 26 ---------- .../enhanced-conversions/cta.js | 21 +++++++- .../enhanced-conversions/enable-button.js | 9 ++-- .../enhanced-conversions/useTermsPolling.js | 49 ------------------- 5 files changed, 27 insertions(+), 82 deletions(-) delete mode 100644 js/src/hooks/useGoogleAdsEnhancedConversionTermsURL.js delete mode 100644 js/src/product-feed/submission-success-guide/enhanced-conversions/useTermsPolling.js diff --git a/js/src/hooks/useGoogleAdsEnhancedConversionSettingsURL.js b/js/src/hooks/useGoogleAdsEnhancedConversionSettingsURL.js index 8edb497698..642b43f7d5 100644 --- a/js/src/hooks/useGoogleAdsEnhancedConversionSettingsURL.js +++ b/js/src/hooks/useGoogleAdsEnhancedConversionSettingsURL.js @@ -10,7 +10,7 @@ import { addQueryArgs } from '@wordpress/url'; import { STORE_KEY } from '.~/data/constants'; import { ENHANCED_CONVERSION_TERMS_BASE_URL } from '.~/constants'; -const useGoogleAdsEnhancedConversionTermsURL = () => { +const useGoogleAdsEnhancedConversionSettingsURL = () => { return useSelect( ( select ) => { const adsAccount = select( STORE_KEY ).getGoogleAdsAccount(); @@ -23,4 +23,4 @@ const useGoogleAdsEnhancedConversionTermsURL = () => { }, [] ); }; -export default useGoogleAdsEnhancedConversionTermsURL; +export default useGoogleAdsEnhancedConversionSettingsURL; diff --git a/js/src/hooks/useGoogleAdsEnhancedConversionTermsURL.js b/js/src/hooks/useGoogleAdsEnhancedConversionTermsURL.js deleted file mode 100644 index 14cdce4da2..0000000000 --- a/js/src/hooks/useGoogleAdsEnhancedConversionTermsURL.js +++ /dev/null @@ -1,26 +0,0 @@ -/** - * External dependencies - */ -import { useSelect } from '@wordpress/data'; -import { addQueryArgs } from '@wordpress/url'; - -/** - * Internal dependencies - */ -import { STORE_KEY } from '.~/data/constants'; -import { ENHANCED_CONVERSION_TERMS_BASE_URL } from '.~/constants'; - -const useGoogleAdsEnhancedConversionTermsURL = () => { - return useSelect( ( select ) => { - const adsAccount = select( STORE_KEY ).getGoogleAdsAccount(); - - const url = addQueryArgs( ENHANCED_CONVERSION_TERMS_BASE_URL, { - ocid: adsAccount?.ocid || 0, - eppn: 'customerDataTerms', - } ); - - return { url }; - }, [] ); -}; - -export default useGoogleAdsEnhancedConversionTermsURL; diff --git a/js/src/product-feed/submission-success-guide/enhanced-conversions/cta.js b/js/src/product-feed/submission-success-guide/enhanced-conversions/cta.js index e33f5f830d..97e0bd580d 100644 --- a/js/src/product-feed/submission-success-guide/enhanced-conversions/cta.js +++ b/js/src/product-feed/submission-success-guide/enhanced-conversions/cta.js @@ -2,6 +2,7 @@ * External dependencies */ import { noop } from 'lodash'; +import { useState, useEffect } from '@wordpress/element'; /** * Internal dependencies @@ -13,9 +14,25 @@ import ConfirmButton from './confirm-button'; import useAutoCheckEnhancedConversionTOS from '.~/hooks/useAutoCheckEnhancedConversionTOS'; const CTA = ( { onConfirm = noop } ) => { + // We could have used the return value from useAutoCheckEnhancedConversionTOS to know + // if there's polling in progress. However from a UI point of view, it'll be confusing + // for the user when refreshing the page to see a loading spinner while polling is in progress. + // Hence we are showing the spinner only when the user clicks on the Enable button. + const [ isPolling, setIsPolling ] = useState( false ); const { acceptedCustomerDataTerms, hasFinishedResolution } = useAcceptedCustomerDataTerms(); - const isPolling = useAutoCheckEnhancedConversionTOS(); + useAutoCheckEnhancedConversionTOS(); + + useEffect( () => { + // As soon as the terms are accepted, do not show the spinner + if ( acceptedCustomerDataTerms ) { + setIsPolling( false ); + } + }, [ acceptedCustomerDataTerms ] ); + + const handleOnEnable = () => { + setIsPolling( true ); + }; if ( ! hasFinishedResolution ) { return null; @@ -26,7 +43,7 @@ const CTA = ( { onConfirm = noop } ) => { } if ( ! acceptedCustomerDataTerms ) { - return ; + return ; } return ; diff --git a/js/src/product-feed/submission-success-guide/enhanced-conversions/enable-button.js b/js/src/product-feed/submission-success-guide/enhanced-conversions/enable-button.js index 23c3caef43..646dff5278 100644 --- a/js/src/product-feed/submission-success-guide/enhanced-conversions/enable-button.js +++ b/js/src/product-feed/submission-success-guide/enhanced-conversions/enable-button.js @@ -1,6 +1,7 @@ /** * External dependencies */ +import { noop } from 'lodash'; import { __ } from '@wordpress/i18n'; /** @@ -9,17 +10,19 @@ import { __ } from '@wordpress/i18n'; import { ENHANCED_ADS_CONVERSION_STATUS } from '.~/constants'; import { useAppDispatch } from '.~/data'; import AppButton from '.~/components/app-button'; -import useGoogleAdsEnhancedConversionTermsURL from '.~/hooks/useGoogleAdsEnhancedConversionTermsURL'; +import useGoogleAdsEnhancedConversionSettingsURL from '.~/hooks/useGoogleAdsEnhancedConversionSettingsURL'; -const EnableButton = () => { +const EnableButton = ( { onEnable = noop } ) => { const { updateEnhancedAdsConversionStatus } = useAppDispatch(); - const { url } = useGoogleAdsEnhancedConversionTermsURL(); + const { url } = useGoogleAdsEnhancedConversionSettingsURL(); const handleOnEnableEnhancedConversions = () => { window.open( url, '_blank' ); updateEnhancedAdsConversionStatus( ENHANCED_ADS_CONVERSION_STATUS.PENDING ); + + onEnable(); }; return ( diff --git a/js/src/product-feed/submission-success-guide/enhanced-conversions/useTermsPolling.js b/js/src/product-feed/submission-success-guide/enhanced-conversions/useTermsPolling.js deleted file mode 100644 index 8f7ad82eac..0000000000 --- a/js/src/product-feed/submission-success-guide/enhanced-conversions/useTermsPolling.js +++ /dev/null @@ -1,49 +0,0 @@ -/** - * External dependencies - */ -import { useEffect } from '@wordpress/element'; - -/** - * Internal dependencies - */ -import { ENHANCED_ADS_CONVERSION_STATUS } from '.~/constants'; -import { useAppDispatch } from '.~/data'; -import useAllowEnhancedConversions from '.~/hooks/useAllowEnhancedConversions'; -import useAutoCheckEnhancedConversionTOS from '.~/hooks/useAutoCheckEnhancedConversionTOS'; - -const useTermsPolling = ( startBackgroundPoll = false ) => { - const { invalidateResolution } = useAppDispatch(); - const { - startEnhancedConversionTOSPolling, - stopEnhancedConversionTOSPolling, - } = useAutoCheckEnhancedConversionTOS(); - const { allowEnhancedConversions } = useAllowEnhancedConversions(); - - useEffect( () => { - if ( - allowEnhancedConversions === - ENHANCED_ADS_CONVERSION_STATUS.PENDING && - startBackgroundPoll - ) { - startEnhancedConversionTOSPolling(); - return; - } - - stopEnhancedConversionTOSPolling(); - }, [ - allowEnhancedConversions, - startEnhancedConversionTOSPolling, - stopEnhancedConversionTOSPolling, - startBackgroundPoll, - ] ); - - useEffect( () => { - if ( - allowEnhancedConversions === ENHANCED_ADS_CONVERSION_STATUS.PENDING - ) { - invalidateResolution( 'getAcceptedCustomerDataTerms', [] ); - } - }, [ allowEnhancedConversions, invalidateResolution ] ); -}; - -export default useTermsPolling; From ec33c2aad9356af3797cb7d1598923d209cb1552 Mon Sep 17 00:00:00 2001 From: asvinb Date: Wed, 10 Apr 2024 12:36:37 +0400 Subject: [PATCH 06/14] Simplify useGoogleAdsEnhancedConversionSettingsURL.js hook. --- .../enhanced-conversion-tracking-settings/toggle.js | 2 +- js/src/constants.js | 3 --- js/src/hooks/useGoogleAdsEnhancedConversionSettingsURL.js | 6 ++++-- .../enhanced-conversions/enable-button.js | 2 +- .../submission-success-guide/enhanced-conversions/index.js | 2 +- 5 files changed, 7 insertions(+), 8 deletions(-) diff --git a/js/src/components/enhanced-conversion-tracking-settings/toggle.js b/js/src/components/enhanced-conversion-tracking-settings/toggle.js index 527188b050..728a44bcd8 100644 --- a/js/src/components/enhanced-conversion-tracking-settings/toggle.js +++ b/js/src/components/enhanced-conversion-tracking-settings/toggle.js @@ -31,10 +31,10 @@ const TOGGLE_LABEL_MAP = { }; const Toggle = () => { - const { url } = useGoogleAdsEnhancedConversionSettingsURL(); const { updateEnhancedAdsConversionStatus } = useAppDispatch(); const { allowEnhancedConversions, hasFinishedResolution } = useAllowEnhancedConversions(); + const url = useGoogleAdsEnhancedConversionSettingsURL(); const handleOnChange = useCallback( ( value ) => { diff --git a/js/src/constants.js b/js/src/constants.js index 67b3fef3ae..46aa330a12 100644 --- a/js/src/constants.js +++ b/js/src/constants.js @@ -117,6 +117,3 @@ export const ENHANCED_ADS_CONVERSION_STATUS = { ENABLED: 'enabled', DISABLED: 'disabled', }; - -export const ENHANCED_CONVERSION_TERMS_BASE_URL = - 'https://ads.google.com/aw/conversions/customersettings'; diff --git a/js/src/hooks/useGoogleAdsEnhancedConversionSettingsURL.js b/js/src/hooks/useGoogleAdsEnhancedConversionSettingsURL.js index 642b43f7d5..7292f3de96 100644 --- a/js/src/hooks/useGoogleAdsEnhancedConversionSettingsURL.js +++ b/js/src/hooks/useGoogleAdsEnhancedConversionSettingsURL.js @@ -8,7 +8,9 @@ import { addQueryArgs } from '@wordpress/url'; * Internal dependencies */ import { STORE_KEY } from '.~/data/constants'; -import { ENHANCED_CONVERSION_TERMS_BASE_URL } from '.~/constants'; + +const ENHANCED_CONVERSION_TERMS_BASE_URL = + 'https://ads.google.com/aw/conversions/customersettings'; const useGoogleAdsEnhancedConversionSettingsURL = () => { return useSelect( ( select ) => { @@ -19,7 +21,7 @@ const useGoogleAdsEnhancedConversionSettingsURL = () => { eppn: 'enhancedconversionsaccountlevelsettings', } ); - return { url }; + return url; }, [] ); }; diff --git a/js/src/product-feed/submission-success-guide/enhanced-conversions/enable-button.js b/js/src/product-feed/submission-success-guide/enhanced-conversions/enable-button.js index 646dff5278..eae55de517 100644 --- a/js/src/product-feed/submission-success-guide/enhanced-conversions/enable-button.js +++ b/js/src/product-feed/submission-success-guide/enhanced-conversions/enable-button.js @@ -14,7 +14,7 @@ import useGoogleAdsEnhancedConversionSettingsURL from '.~/hooks/useGoogleAdsEnha const EnableButton = ( { onEnable = noop } ) => { const { updateEnhancedAdsConversionStatus } = useAppDispatch(); - const { url } = useGoogleAdsEnhancedConversionSettingsURL(); + const url = useGoogleAdsEnhancedConversionSettingsURL(); const handleOnEnableEnhancedConversions = () => { window.open( url, '_blank' ); diff --git a/js/src/product-feed/submission-success-guide/enhanced-conversions/index.js b/js/src/product-feed/submission-success-guide/enhanced-conversions/index.js index 87abca662f..5248785e8c 100644 --- a/js/src/product-feed/submission-success-guide/enhanced-conversions/index.js +++ b/js/src/product-feed/submission-success-guide/enhanced-conversions/index.js @@ -16,7 +16,7 @@ import AppSpinner from '.~/components/app-spinner'; const EnhancedConversions = () => { const { acceptedCustomerDataTerms, hasFinishedResolution } = useAcceptedCustomerDataTerms(); - const { url } = useGoogleAdsEnhancedConversionSettingsURL(); + const url = useGoogleAdsEnhancedConversionSettingsURL(); let title = __( 'Optimize your conversion tracking with Enhanced Conversions', From 6a95b1f8764d7554fdf39832e16faf003ba3bc61 Mon Sep 17 00:00:00 2001 From: asvinb Date: Wed, 10 Apr 2024 12:44:42 +0400 Subject: [PATCH 07/14] Removed unused imports. --- js/src/hooks/useAcceptedCustomerDataTerms.test.js | 1 - 1 file changed, 1 deletion(-) diff --git a/js/src/hooks/useAcceptedCustomerDataTerms.test.js b/js/src/hooks/useAcceptedCustomerDataTerms.test.js index 9f80f8375a..b9d6f538bf 100644 --- a/js/src/hooks/useAcceptedCustomerDataTerms.test.js +++ b/js/src/hooks/useAcceptedCustomerDataTerms.test.js @@ -8,7 +8,6 @@ import { renderHook } from '@testing-library/react-hooks'; */ import { useAppDispatch } from '.~/data'; import useAcceptedCustomerDataTerms from './useAcceptedCustomerDataTerms'; -import useGoogleAccount from '.~/hooks/useGoogleAccount'; import useGoogleAdsAccount from '.~/hooks/useGoogleAdsAccount'; jest.mock( '.~/hooks/useGoogleAdsAccount', () => From 95cc03e2dc40dc5fff35ff5b6e855004c71d9909 Mon Sep 17 00:00:00 2001 From: asvinb Date: Wed, 10 Apr 2024 13:08:35 +0400 Subject: [PATCH 08/14] Remove copy to minimize modal height. --- .../submission-success-guide/enhanced-conversions/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/src/product-feed/submission-success-guide/enhanced-conversions/index.js b/js/src/product-feed/submission-success-guide/enhanced-conversions/index.js index 5248785e8c..49e4d6be47 100644 --- a/js/src/product-feed/submission-success-guide/enhanced-conversions/index.js +++ b/js/src/product-feed/submission-success-guide/enhanced-conversions/index.js @@ -41,7 +41,7 @@ const EnhancedConversions = () => {

{ createInterpolateElement( __( - 'Enhance your conversion tracking accuracy and empower your bidding strategy with our latest feature: Enhanced Conversion Tracking. This feature seamlessly integrates with your existing conversion tags, ensuring the secure and privacy-conscious transmission of conversion data from your website to Google', + 'Enhance your conversion tracking accuracy and empower your bidding strategy with our latest feature: Enhanced Conversion Tracking', 'google-listings-and-ads' ), { From 489a3f47fcc924505e44b53e9600b3b33d93c1cd Mon Sep 17 00:00:00 2001 From: asvinb Date: Fri, 12 Apr 2024 15:16:53 +0400 Subject: [PATCH 09/14] Address CR feedback. --- .../confirm-button.js | 21 +++++++ .../cta.js | 62 +++++++++++++++++++ .../enable-button.js | 14 ++++- .../enable.js | 2 +- .../useAutoCheckEnhancedConversionTOS.js | 20 ++++-- .../enhanced-conversions/actions.js | 47 ++++++++++---- .../enhanced-conversions/actions.test.js | 12 ---- .../enhanced-conversions/confirm-button.js | 32 ---------- .../enhanced-conversions/cta.js | 52 ---------------- 9 files changed, 146 insertions(+), 116 deletions(-) create mode 100644 js/src/components/enhanced-conversion-tracking-settings/confirm-button.js create mode 100644 js/src/components/enhanced-conversion-tracking-settings/cta.js rename js/src/{product-feed/submission-success-guide/enhanced-conversions => components/enhanced-conversion-tracking-settings}/enable-button.js (74%) delete mode 100644 js/src/product-feed/submission-success-guide/enhanced-conversions/confirm-button.js delete mode 100644 js/src/product-feed/submission-success-guide/enhanced-conversions/cta.js diff --git a/js/src/components/enhanced-conversion-tracking-settings/confirm-button.js b/js/src/components/enhanced-conversion-tracking-settings/confirm-button.js new file mode 100644 index 0000000000..4f16a775d6 --- /dev/null +++ b/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 ( + + { __( 'Confirm', 'google-listings-and-ads' ) } + + ); +}; + +export default ConfirmButton; diff --git a/js/src/components/enhanced-conversion-tracking-settings/cta.js b/js/src/components/enhanced-conversion-tracking-settings/cta.js new file mode 100644 index 0000000000..7c39fc0b6f --- /dev/null +++ b/js/src/components/enhanced-conversion-tracking-settings/cta.js @@ -0,0 +1,62 @@ +/** + * 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 ) { + // We were in a polling state, so now the user has accepted the terms, we confirm that EC is enabled. + handleConfirm(); + setIsPolling( false ); + } + }, [ acceptedCustomerDataTerms, setIsPolling, isPolling, handleConfirm ] ); + + const handleOnEnable = () => { + setIsPolling( true ); + }; + + if ( ! hasFinishedResolution ) { + return null; + } + + if ( isPolling ) { + return ; + } + + if ( ! acceptedCustomerDataTerms ) { + return ; + } + + return ; +}; + +export default CTA; diff --git a/js/src/product-feed/submission-success-guide/enhanced-conversions/enable-button.js b/js/src/components/enhanced-conversion-tracking-settings/enable-button.js similarity index 74% rename from js/src/product-feed/submission-success-guide/enhanced-conversions/enable-button.js rename to js/src/components/enhanced-conversion-tracking-settings/enable-button.js index eae55de517..22afe0be9e 100644 --- a/js/src/product-feed/submission-success-guide/enhanced-conversions/enable-button.js +++ b/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 ( - - { __( 'Enable Enhanced Conversions', 'google-listings-and-ads' ) } - + ); }; diff --git a/js/src/components/enhanced-conversion-tracking-settings/enable.js b/js/src/components/enhanced-conversion-tracking-settings/enable.js index 57e545f39e..44efd349fe 100644 --- a/js/src/components/enhanced-conversion-tracking-settings/enable.js +++ b/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 ( diff --git a/js/src/hooks/useAutoCheckEnhancedConversionTOS.js b/js/src/hooks/useAutoCheckEnhancedConversionTOS.js index 00d2a58812..3b9216164a 100644 --- a/js/src/hooks/useAutoCheckEnhancedConversionTOS.js +++ b/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; diff --git a/js/src/product-feed/submission-success-guide/enhanced-conversions/actions.js b/js/src/product-feed/submission-success-guide/enhanced-conversions/actions.js index e27d13e748..6583d9cdb4 100644 --- a/js/src/product-feed/submission-success-guide/enhanced-conversions/actions.js +++ b/js/src/product-feed/submission-success-guide/enhanced-conversions/actions.js @@ -3,31 +3,54 @@ */ 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 AppButton from '.~/components/app-button'; +import CTA from '.~/components/enhanced-conversion-tracking-settings/cta'; +import useAcceptedCustomerDataTerms from '.~/hooks/useAcceptedCustomerDataTerms'; +import useAllowEnhancedConversions from '.~/hooks/useAllowEnhancedConversions'; +import { ENHANCED_ADS_CONVERSION_STATUS } from '.~/constants'; const Actions = ( { onModalClose = noop } ) => { - const { createNotice } = useDispatchCoreNotices(); + const { acceptedCustomerDataTerms, hasFinishedResolution } = + useAcceptedCustomerDataTerms(); + const { + allowEnhancedConversions, + hasFinishedResolution: hasResolvedAllowEnhancedConversions, + } = useAllowEnhancedConversions(); - const handleOnConfirm = useCallback( () => { - createNotice( - 'info', - __( 'Status successfully set', 'google-listings-and-ads' ) - ); + const getCTA = () => { + if ( + ! hasFinishedResolution || + ! hasResolvedAllowEnhancedConversions + ) { + return null; + } + + if ( + ! acceptedCustomerDataTerms || + ( acceptedCustomerDataTerms && + allowEnhancedConversions !== + ENHANCED_ADS_CONVERSION_STATUS.ENABLED ) + ) { + return ; + } - onModalClose(); - }, [ createNotice, onModalClose ] ); + return ( + + { __( 'Close', 'google-listings-and-ads' ) } + + ); + }; return (

- + { getCTA() } ); }; diff --git a/js/src/product-feed/submission-success-guide/enhanced-conversions/actions.test.js b/js/src/product-feed/submission-success-guide/enhanced-conversions/actions.test.js index 2d57c6d6bb..2faac93055 100644 --- a/js/src/product-feed/submission-success-guide/enhanced-conversions/actions.test.js +++ b/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 diff --git a/js/src/product-feed/submission-success-guide/enhanced-conversions/confirm-button.js b/js/src/product-feed/submission-success-guide/enhanced-conversions/confirm-button.js deleted file mode 100644 index c95421f5a3..0000000000 --- a/js/src/product-feed/submission-success-guide/enhanced-conversions/confirm-button.js +++ /dev/null @@ -1,32 +0,0 @@ -/** - * External dependencies - */ -import { noop } from 'lodash'; -import { __ } from '@wordpress/i18n'; - -/** - * Internal dependencies - */ -import { ENHANCED_ADS_CONVERSION_STATUS } from '.~/constants'; -import { useAppDispatch } from '.~/data'; -import AppButton from '.~/components/app-button'; - -const ConfirmButton = ( { onConfirm = noop } ) => { - const { updateEnhancedAdsConversionStatus } = useAppDispatch(); - - const handleConfirm = () => { - updateEnhancedAdsConversionStatus( - ENHANCED_ADS_CONVERSION_STATUS.ENABLED - ); - - onConfirm(); - }; - - return ( - - { __( 'Confirm', 'google-listings-and-ads' ) } - - ); -}; - -export default ConfirmButton; diff --git a/js/src/product-feed/submission-success-guide/enhanced-conversions/cta.js b/js/src/product-feed/submission-success-guide/enhanced-conversions/cta.js deleted file mode 100644 index 97e0bd580d..0000000000 --- a/js/src/product-feed/submission-success-guide/enhanced-conversions/cta.js +++ /dev/null @@ -1,52 +0,0 @@ -/** - * External dependencies - */ -import { noop } from 'lodash'; -import { useState, useEffect } from '@wordpress/element'; - -/** - * Internal dependencies - */ -import AppButton from '.~/components/app-button'; -import useAcceptedCustomerDataTerms from '.~/hooks/useAcceptedCustomerDataTerms'; -import EnableButton from './enable-button'; -import ConfirmButton from './confirm-button'; -import useAutoCheckEnhancedConversionTOS from '.~/hooks/useAutoCheckEnhancedConversionTOS'; - -const CTA = ( { onConfirm = noop } ) => { - // We could have used the return value from useAutoCheckEnhancedConversionTOS to know - // if there's polling in progress. However from a UI point of view, it'll be confusing - // for the user when refreshing the page to see a loading spinner while polling is in progress. - // Hence we are showing the spinner only when the user clicks on the Enable button. - const [ isPolling, setIsPolling ] = useState( false ); - const { acceptedCustomerDataTerms, hasFinishedResolution } = - useAcceptedCustomerDataTerms(); - useAutoCheckEnhancedConversionTOS(); - - useEffect( () => { - // As soon as the terms are accepted, do not show the spinner - if ( acceptedCustomerDataTerms ) { - setIsPolling( false ); - } - }, [ acceptedCustomerDataTerms ] ); - - const handleOnEnable = () => { - setIsPolling( true ); - }; - - if ( ! hasFinishedResolution ) { - return null; - } - - if ( isPolling ) { - return ; - } - - if ( ! acceptedCustomerDataTerms ) { - return ; - } - - return ; -}; - -export default CTA; From 9141797c35f2d3073bec3ba59b37dab167d52b5f Mon Sep 17 00:00:00 2001 From: asvinb Date: Fri, 12 Apr 2024 15:39:20 +0400 Subject: [PATCH 10/14] Address CR feedback. --- .../cta.js | 2 - .../enhanced-conversions/actions.js | 38 +------- .../enhanced-conversions/index.js | 95 +++++-------------- 3 files changed, 27 insertions(+), 108 deletions(-) diff --git a/js/src/components/enhanced-conversion-tracking-settings/cta.js b/js/src/components/enhanced-conversion-tracking-settings/cta.js index 7c39fc0b6f..493bb9becd 100644 --- a/js/src/components/enhanced-conversion-tracking-settings/cta.js +++ b/js/src/components/enhanced-conversion-tracking-settings/cta.js @@ -34,8 +34,6 @@ const CTA = ( { onConfirm = noop } ) => { useEffect( () => { // As soon as the terms are accepted, do not show the spinner if ( acceptedCustomerDataTerms && isPolling ) { - // We were in a polling state, so now the user has accepted the terms, we confirm that EC is enabled. - handleConfirm(); setIsPolling( false ); } }, [ acceptedCustomerDataTerms, setIsPolling, isPolling, handleConfirm ] ); diff --git a/js/src/product-feed/submission-success-guide/enhanced-conversions/actions.js b/js/src/product-feed/submission-success-guide/enhanced-conversions/actions.js index 6583d9cdb4..0716c8cc99 100644 --- a/js/src/product-feed/submission-success-guide/enhanced-conversions/actions.js +++ b/js/src/product-feed/submission-success-guide/enhanced-conversions/actions.js @@ -2,55 +2,19 @@ * External dependencies */ import { noop } from 'lodash'; -import { __ } from '@wordpress/i18n'; import { Fragment } from '@wordpress/element'; /** * Internal dependencies */ -import AppButton from '.~/components/app-button'; import CTA from '.~/components/enhanced-conversion-tracking-settings/cta'; -import useAcceptedCustomerDataTerms from '.~/hooks/useAcceptedCustomerDataTerms'; -import useAllowEnhancedConversions from '.~/hooks/useAllowEnhancedConversions'; -import { ENHANCED_ADS_CONVERSION_STATUS } from '.~/constants'; const Actions = ( { onModalClose = noop } ) => { - const { acceptedCustomerDataTerms, hasFinishedResolution } = - useAcceptedCustomerDataTerms(); - const { - allowEnhancedConversions, - hasFinishedResolution: hasResolvedAllowEnhancedConversions, - } = useAllowEnhancedConversions(); - - const getCTA = () => { - if ( - ! hasFinishedResolution || - ! hasResolvedAllowEnhancedConversions - ) { - return null; - } - - if ( - ! acceptedCustomerDataTerms || - ( acceptedCustomerDataTerms && - allowEnhancedConversions !== - ENHANCED_ADS_CONVERSION_STATUS.ENABLED ) - ) { - return ; - } - - return ( - - { __( 'Close', 'google-listings-and-ads' ) } - - ); - }; - return (
- { getCTA() } + ); }; diff --git a/js/src/product-feed/submission-success-guide/enhanced-conversions/index.js b/js/src/product-feed/submission-success-guide/enhanced-conversions/index.js index 49e4d6be47..d774cfe04c 100644 --- a/js/src/product-feed/submission-success-guide/enhanced-conversions/index.js +++ b/js/src/product-feed/submission-success-guide/enhanced-conversions/index.js @@ -10,49 +10,44 @@ import { Fragment, createInterpolateElement } from '@wordpress/element'; import GuidePageContent from '.~/components/guide-page-content'; import TrackableLink from '.~/components/trackable-link'; import useAcceptedCustomerDataTerms from '.~/hooks/useAcceptedCustomerDataTerms'; +import useAllowEnhancedConversions from '.~/hooks/useAllowEnhancedConversions'; import useGoogleAdsEnhancedConversionSettingsURL from '.~/hooks/useGoogleAdsEnhancedConversionSettingsURL'; import AppSpinner from '.~/components/app-spinner'; const EnhancedConversions = () => { const { acceptedCustomerDataTerms, hasFinishedResolution } = useAcceptedCustomerDataTerms(); + const { + allowEnhancedConversions, + hasFinishedResolution: hasResolvedAllowEnhancedConversions, + } = useAllowEnhancedConversions(); const url = useGoogleAdsEnhancedConversionSettingsURL(); - let title = __( - 'Optimize your conversion tracking with Enhanced Conversions', - 'google-listings-and-ads' - ); - - if ( acceptedCustomerDataTerms ) { - title = __( - 'Your Enhanced Conversions are almost ready', - 'google-listings-and-ads' - ); - } + const title = acceptedCustomerDataTerms + ? __( + 'Your Enhanced Conversions are almost ready', + 'google-listings-and-ads' + ) + : __( + 'Optimize your conversion tracking with Enhanced Conversions', + 'google-listings-and-ads' + ); const getPageContentBody = () => { - if ( ! hasFinishedResolution ) { + if ( + ! hasFinishedResolution || + ! hasResolvedAllowEnhancedConversions + ) { return ; } if ( ! acceptedCustomerDataTerms ) { return ( -

- { createInterpolateElement( - __( - 'Enhance your conversion tracking accuracy and empower your bidding strategy with our latest feature: Enhanced Conversion Tracking', - 'google-listings-and-ads' - ), - { - strong: , - } - ) } -

{ __( - 'You can activate this feature in a few simple steps:', - 'google-listing-ads' + 'Improve conversion tracking accuracy to gain deeper insights and improve campaign performance.', + 'google-listings-and-ads' ) }

@@ -60,7 +55,7 @@ const EnhancedConversions = () => {
  • { createInterpolateElement( __( - 'Click below to Enable Enhanced Conversions', + 'Click Enable Enhanced Conversions below to go to Google Ads Settings.', 'google-listings-and-ads' ), { @@ -69,52 +64,14 @@ const EnhancedConversions = () => { ) }
  • - { createInterpolateElement( - __( - 'Check the box in Google Ads to Turn on Enhanced Conversions', - 'google-listings-and-ads' - ), - { - strong: , - } - ) } -
    • -
  • - { createInterpolateElement( - __( - 'Confirm you Agree to the Customer Data Terms', - 'google-listings-and-ads' - ), - { - strong: , - } - ) } -
    • -
  • - { createInterpolateElement( - __( - 'In the drop-down, choose Google Tag as your set-up method', - 'google-listings-and-ads' - ), - { - strong: , - } - ) } -
    • -
  • - { createInterpolateElement( - __( - 'Click Save and return to this screen', - 'google-listings-and-ads' - ), - { - strong: , - } + { __( + 'Turn on Enhanced Conversions, accept Terms, and then select “Google Tag” as your setup method. Click Save.', + 'google-listings-and-ads' ) }
    • -

    + { createInterpolateElement( __( 'For more information, feel free to consult our help center article', @@ -130,7 +87,7 @@ const EnhancedConversions = () => { ), } ) } -

    +     ); } From 5f4648f49a2aa4cd84415804c49f1b0bc236c115 Mon Sep 17 00:00:00 2001 From: asvinb Date: Fri, 12 Apr 2024 15:42:45 +0400 Subject: [PATCH 11/14] Remove unused import. --- .../enhanced-conversions/index.js | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/js/src/product-feed/submission-success-guide/enhanced-conversions/index.js b/js/src/product-feed/submission-success-guide/enhanced-conversions/index.js index d774cfe04c..9db162c5d3 100644 --- a/js/src/product-feed/submission-success-guide/enhanced-conversions/index.js +++ b/js/src/product-feed/submission-success-guide/enhanced-conversions/index.js @@ -10,17 +10,12 @@ import { Fragment, createInterpolateElement } from '@wordpress/element'; import GuidePageContent from '.~/components/guide-page-content'; import TrackableLink from '.~/components/trackable-link'; import useAcceptedCustomerDataTerms from '.~/hooks/useAcceptedCustomerDataTerms'; -import useAllowEnhancedConversions from '.~/hooks/useAllowEnhancedConversions'; import useGoogleAdsEnhancedConversionSettingsURL from '.~/hooks/useGoogleAdsEnhancedConversionSettingsURL'; import AppSpinner from '.~/components/app-spinner'; const EnhancedConversions = () => { const { acceptedCustomerDataTerms, hasFinishedResolution } = useAcceptedCustomerDataTerms(); - const { - allowEnhancedConversions, - hasFinishedResolution: hasResolvedAllowEnhancedConversions, - } = useAllowEnhancedConversions(); const url = useGoogleAdsEnhancedConversionSettingsURL(); const title = acceptedCustomerDataTerms @@ -34,10 +29,7 @@ const EnhancedConversions = () => { ); const getPageContentBody = () => { - if ( - ! hasFinishedResolution || - ! hasResolvedAllowEnhancedConversions - ) { + if ( ! hasFinishedResolution ) { return ; } From e9dcd386b6626cc01d844cefed3676cf4ca366c9 Mon Sep 17 00:00:00 2001 From: asvinb Date: Tue, 16 Apr 2024 13:49:18 +0400 Subject: [PATCH 12/14] Add Success screen. --- .../cta.js | 18 ++- .../enable-button.js | 6 +- js/src/data/action-types.js | 2 + js/src/data/actions.js | 7 + js/src/data/reducer.js | 11 ++ js/src/data/selectors.js | 10 ++ .../useEnhancedConversionsSkipConfirmation.js | 27 ++++ .../enhanced-conversions/actions.js | 38 ++++- .../enhanced-conversions/index.js | 144 +++++++++++++----- .../submission-success-guide/index.js | 2 +- 10 files changed, 220 insertions(+), 45 deletions(-) create mode 100644 js/src/hooks/useEnhancedConversionsSkipConfirmation.js diff --git a/js/src/components/enhanced-conversion-tracking-settings/cta.js b/js/src/components/enhanced-conversion-tracking-settings/cta.js index 493bb9becd..27fc2daab6 100644 --- a/js/src/components/enhanced-conversion-tracking-settings/cta.js +++ b/js/src/components/enhanced-conversion-tracking-settings/cta.js @@ -13,6 +13,7 @@ import AppButton from '.~/components/app-button'; import EnableButton from './enable-button'; import ConfirmButton from './confirm-button'; import useAutoCheckEnhancedConversionTOS from '.~/hooks/useAutoCheckEnhancedConversionTOS'; +import useEnhancedConversionsSkipConfirmation from '.~/hooks/useEnhancedConversionsSkipConfirmation'; const CTA = ( { onConfirm = noop } ) => { const { updateEnhancedAdsConversionStatus } = useAppDispatch(); @@ -22,6 +23,7 @@ const CTA = ( { onConfirm = noop } ) => { isPolling, setIsPolling, } = useAutoCheckEnhancedConversionTOS(); + const { skipConfirmation } = useEnhancedConversionsSkipConfirmation(); const handleConfirm = useCallback( () => { updateEnhancedAdsConversionStatus( @@ -34,9 +36,19 @@ const CTA = ( { onConfirm = noop } ) => { useEffect( () => { // As soon as the terms are accepted, do not show the spinner if ( acceptedCustomerDataTerms && isPolling ) { + // We automatically set the status to enabled. + updateEnhancedAdsConversionStatus( + ENHANCED_ADS_CONVERSION_STATUS.ENABLED + ); + setIsPolling( false ); } - }, [ acceptedCustomerDataTerms, setIsPolling, isPolling, handleConfirm ] ); + }, [ + acceptedCustomerDataTerms, + setIsPolling, + isPolling, + updateEnhancedAdsConversionStatus, + ] ); const handleOnEnable = () => { setIsPolling( true ); @@ -54,6 +66,10 @@ const CTA = ( { onConfirm = noop } ) => { return ; } + if ( skipConfirmation ) { + return null; + } + return ; }; diff --git a/js/src/components/enhanced-conversion-tracking-settings/enable-button.js b/js/src/components/enhanced-conversion-tracking-settings/enable-button.js index 22afe0be9e..d8cc8a2535 100644 --- a/js/src/components/enhanced-conversion-tracking-settings/enable-button.js +++ b/js/src/components/enhanced-conversion-tracking-settings/enable-button.js @@ -14,7 +14,10 @@ import AppButton from '.~/components/app-button'; import useGoogleAdsEnhancedConversionSettingsURL from '.~/hooks/useGoogleAdsEnhancedConversionSettingsURL'; const EnableButton = ( { onEnable = noop } ) => { - const { updateEnhancedAdsConversionStatus } = useAppDispatch(); + const { + updateEnhancedAdsConversionStatus, + updateEnhancedConversionsSkipConfirmation, + } = useAppDispatch(); const url = useGoogleAdsEnhancedConversionSettingsURL(); const handleOnEnableEnhancedConversions = () => { @@ -22,6 +25,7 @@ const EnableButton = ( { onEnable = noop } ) => { updateEnhancedAdsConversionStatus( ENHANCED_ADS_CONVERSION_STATUS.PENDING ); + updateEnhancedConversionsSkipConfirmation( true ); onEnable(); }; diff --git a/js/src/data/action-types.js b/js/src/data/action-types.js index 408b8d91ef..0c43760f9f 100644 --- a/js/src/data/action-types.js +++ b/js/src/data/action-types.js @@ -52,6 +52,8 @@ const TYPES = { RECEIVE_ACCEPTED_CUSTOMER_DATA_TERMS: 'RECEIVE_ACCEPTED_CUSTOMER_DATA_TERMS', RECEIVE_ALLOW_ENHANCED_CONVERSIONS: 'RECEIVE_ALLOW_ENHANCED_CONVERSIONS', + UPDATE_ENHANCED_CONVERSIONS_SKIP_CONFIRMATION: + 'UPDATE_ENHANCED_CONVERSIONS_SKIP_CONFIRMATION', }; export default TYPES; diff --git a/js/src/data/actions.js b/js/src/data/actions.js index 3c23d168e7..e19cb0585a 100644 --- a/js/src/data/actions.js +++ b/js/src/data/actions.js @@ -1307,3 +1307,10 @@ export function* fetchAcceptedCustomerDataTerms() { ); } } + +export function updateEnhancedConversionsSkipConfirmation( enabled ) { + return { + type: TYPES.UPDATE_ENHANCED_CONVERSIONS_SKIP_CONFIRMATION, + enabled, + }; +} diff --git a/js/src/data/reducer.js b/js/src/data/reducer.js index 3660047c9e..c6a4f5b094 100644 --- a/js/src/data/reducer.js +++ b/js/src/data/reducer.js @@ -68,6 +68,7 @@ const DEFAULT_STATE = { conversion_tracking_setting: { accepted_customer_data_terms: null, allow_enhanced_conversions: null, + skip_confirmation: false, }, }, }; @@ -525,6 +526,16 @@ const reducer = ( state = DEFAULT_STATE, action ) => { ); } + case TYPES.UPDATE_ENHANCED_CONVERSIONS_SKIP_CONFIRMATION: { + const { enabled } = action; + + return setIn( + state, + 'ads.conversion_tracking_setting.skip_confirmation', + enabled + ); + } + // Page will be reloaded after all accounts have been disconnected, so no need to mutate state. case TYPES.DISCONNECT_ACCOUNTS_ALL: default: diff --git a/js/src/data/selectors.js b/js/src/data/selectors.js index ed17eb5d72..5b98479fb6 100644 --- a/js/src/data/selectors.js +++ b/js/src/data/selectors.js @@ -420,3 +420,13 @@ export const getAcceptedCustomerDataTerms = ( state ) => { export const getAllowEnhancedConversions = ( state ) => { return state.ads.conversion_tracking_setting.allow_enhanced_conversions; }; + +/** + * Return whether the confirmation screen should be skipped when enabling enhance conversions. + * + * @param {Object} state The state + * @return {string|null} Possible values are 'true' | 'false' + */ +export const getEnhancedConversionsSkipConfirmation = ( state ) => { + return state.ads.conversion_tracking_setting.skip_confirmation; +}; diff --git a/js/src/hooks/useEnhancedConversionsSkipConfirmation.js b/js/src/hooks/useEnhancedConversionsSkipConfirmation.js new file mode 100644 index 0000000000..182637bf07 --- /dev/null +++ b/js/src/hooks/useEnhancedConversionsSkipConfirmation.js @@ -0,0 +1,27 @@ +/** + * External dependencies + */ +import { useSelect } from '@wordpress/data'; + +/** + * Internal dependencies + */ +import { STORE_KEY } from '.~/data/constants'; + +const selectorName = 'getEnhancedConversionsSkipConfirmation'; + +const useEnhancedConversionsSkipConfirmation = () => { + return useSelect( ( select ) => { + const selector = select( STORE_KEY ); + + return { + skipConfirmation: selector[ selectorName ](), + hasFinishedResolution: selector.hasFinishedResolution( + selectorName, + [] + ), + }; + }, [] ); +}; + +export default useEnhancedConversionsSkipConfirmation; diff --git a/js/src/product-feed/submission-success-guide/enhanced-conversions/actions.js b/js/src/product-feed/submission-success-guide/enhanced-conversions/actions.js index 0716c8cc99..4d9dd2cf6a 100644 --- a/js/src/product-feed/submission-success-guide/enhanced-conversions/actions.js +++ b/js/src/product-feed/submission-success-guide/enhanced-conversions/actions.js @@ -3,18 +3,54 @@ */ import { noop } from 'lodash'; import { Fragment } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ +import { ENHANCED_ADS_CONVERSION_STATUS } from '.~/constants'; +import AppButton from '.~/components/app-button'; import CTA from '.~/components/enhanced-conversion-tracking-settings/cta'; +import useAcceptedCustomerDataTerms from '.~/hooks/useAcceptedCustomerDataTerms'; +import useAllowEnhancedConversions from '.~/hooks/useAllowEnhancedConversions'; const Actions = ( { onModalClose = noop } ) => { + const { acceptedCustomerDataTerms, hasFinishedResolution } = + useAcceptedCustomerDataTerms(); + const { + allowEnhancedConversions, + hasFinishedResolution: hasResolvedAllowEnhancedConversions, + } = useAllowEnhancedConversions(); + + const getCTA = () => { + if ( + ! hasFinishedResolution || + ! hasResolvedAllowEnhancedConversions + ) { + return null; + } + + if ( + ! acceptedCustomerDataTerms || + ( acceptedCustomerDataTerms && + allowEnhancedConversions !== + ENHANCED_ADS_CONVERSION_STATUS.ENABLED ) + ) { + return ; + } + + return ( + + { __( 'Close', 'google-listings-and-ads' ) } + + ); + }; + return (
    - + { getCTA() } ); }; diff --git a/js/src/product-feed/submission-success-guide/enhanced-conversions/index.js b/js/src/product-feed/submission-success-guide/enhanced-conversions/index.js index 9db162c5d3..70f781c2f8 100644 --- a/js/src/product-feed/submission-success-guide/enhanced-conversions/index.js +++ b/js/src/product-feed/submission-success-guide/enhanced-conversions/index.js @@ -3,38 +3,44 @@ */ import { __ } from '@wordpress/i18n'; import { Fragment, createInterpolateElement } from '@wordpress/element'; +import { Link } from '@woocommerce/components'; /** * Internal dependencies */ +import { ENHANCED_ADS_CONVERSION_STATUS } from '.~/constants'; import GuidePageContent from '.~/components/guide-page-content'; import TrackableLink from '.~/components/trackable-link'; import useAcceptedCustomerDataTerms from '.~/hooks/useAcceptedCustomerDataTerms'; import useGoogleAdsEnhancedConversionSettingsURL from '.~/hooks/useGoogleAdsEnhancedConversionSettingsURL'; +import useAllowEnhancedConversions from '.~/hooks/useAllowEnhancedConversions'; import AppSpinner from '.~/components/app-spinner'; +import useEnhancedConversionsSkipConfirmation from '.~/hooks/useEnhancedConversionsSkipConfirmation'; const EnhancedConversions = () => { const { acceptedCustomerDataTerms, hasFinishedResolution } = useAcceptedCustomerDataTerms(); + const { + allowEnhancedConversions, + hasFinishedResolution: hasResolvedAllowEnhancedConversions, + } = useAllowEnhancedConversions(); const url = useGoogleAdsEnhancedConversionSettingsURL(); + const { skipConfirmation } = useEnhancedConversionsSkipConfirmation(); - const title = acceptedCustomerDataTerms - ? __( - 'Your Enhanced Conversions are almost ready', + const PAGE_CONTENT = { + loading: { + title: __( + 'Optimize your conversion tracking with Enhanced Conversions', 'google-listings-and-ads' - ) - : __( + ), + content: , + }, + 'accept-terms': { + title: __( 'Optimize your conversion tracking with Enhanced Conversions', 'google-listings-and-ads' - ); - - const getPageContentBody = () => { - if ( ! hasFinishedResolution ) { - return ; - } - - if ( ! acceptedCustomerDataTerms ) { - return ( + ), + content: (

    { __( @@ -81,48 +87,104 @@ const EnhancedConversions = () => { ) } - ); - } - - return ( - -

    - { createInterpolateElement( - __( - 'We noticed that you have already accepted Enhanced Conversions Customer Data Terms. In order to complete Enhanced Conversions setup on GL&A, and integrate with your Google Listings & Ads Conversions Tags, click Confirm below', - 'google-listings-and-ads' - ), - { - strong: , - } - ) } -

    - + ), + }, + confirm: { + title: __( + 'Your Enhanced Conversions are almost ready', + 'google-listings-and-ads' + ), + content: ( + +

    + { createInterpolateElement( + __( + 'We noticed that you have already accepted Enhanced Conversions Customer Data Terms. In order to complete Enhanced Conversions setup on GL&A, and integrate with your Google Listings & Ads Conversions Tags, click Confirm below', + 'google-listings-and-ads' + ), + { + strong: , + } + ) } +

    +

    + { createInterpolateElement( + __( + 'If you haven’t done so already please ensure that Enhanced Conversions is enabled in Google Ads Settings, and that the setup method chosen is Google Tag', + 'google-listings-and-ads' + ), + { + link: ( + + ), + } + ) } +

    +     + ), + }, + success: { + title: __( + 'We’ve successfully set up Enhanced Conversions for your store!', + 'google-listings-and-ads' + ), + content: (

    { createInterpolateElement( __( - 'If you haven’t done so already please ensure that Enhanced Conversions is enabled in Google Ads Settings, and that the setup method chosen is Google Tag', + 'We updated your conversion tracking tags. You can manage this feature from your store’s marketing settings.', 'google-listings-and-ads' ), { - strong: , link: ( - ), } ) }

    -     - ); + ), + }, }; + const getCurrentPage = () => { + if ( + ! hasFinishedResolution || + ! hasResolvedAllowEnhancedConversions + ) { + return 'loading'; + } + + if ( + acceptedCustomerDataTerms && + allowEnhancedConversions === ENHANCED_ADS_CONVERSION_STATUS.ENABLED + ) { + return 'success'; + } + + if ( + acceptedCustomerDataTerms && + allowEnhancedConversions !== + ENHANCED_ADS_CONVERSION_STATUS.ENABLED && + ! skipConfirmation + ) { + return 'confirm'; + } + + return 'accept-terms'; + }; + + const currentPage = getCurrentPage(); + return ( - - { getPageContentBody() } + + { PAGE_CONTENT[ currentPage ].content } ); }; diff --git a/js/src/product-feed/submission-success-guide/index.js b/js/src/product-feed/submission-success-guide/index.js index 61642568a9..74c18c0397 100644 --- a/js/src/product-feed/submission-success-guide/index.js +++ b/js/src/product-feed/submission-success-guide/index.js @@ -50,7 +50,7 @@ const handleGuideFinish = ( e ) => { getHistory().replace( getProductFeedUrl() ); // Since there is no built-in way to distinguish the modal/guide is closed by what action, - // here is a workaround by identifying the close button's data-aciton attribute. + // here is a workaround by identifying the close button's data-action attribute. let action = 'dismiss'; if ( e ) { From 1671f7cb681608544a1f577a9cffa99eb9eed489 Mon Sep 17 00:00:00 2001 From: asvinb Date: Tue, 16 Apr 2024 14:09:40 +0400 Subject: [PATCH 13/14] Fix failing tests. --- .../cta.js | 18 ++++----------- js/src/data/test/reducer.test.js | 1 + .../enhanced-conversions/actions.test.js | 22 +------------------ .../enhanced-conversions/index.test.js | 14 ++++++++++++ 4 files changed, 20 insertions(+), 35 deletions(-) diff --git a/js/src/components/enhanced-conversion-tracking-settings/cta.js b/js/src/components/enhanced-conversion-tracking-settings/cta.js index 27fc2daab6..e828ecd65a 100644 --- a/js/src/components/enhanced-conversion-tracking-settings/cta.js +++ b/js/src/components/enhanced-conversion-tracking-settings/cta.js @@ -1,7 +1,6 @@ /** * External dependencies */ -import { noop } from 'lodash'; import { useEffect, useCallback } from '@wordpress/element'; /** @@ -15,7 +14,7 @@ import ConfirmButton from './confirm-button'; import useAutoCheckEnhancedConversionTOS from '.~/hooks/useAutoCheckEnhancedConversionTOS'; import useEnhancedConversionsSkipConfirmation from '.~/hooks/useEnhancedConversionsSkipConfirmation'; -const CTA = ( { onConfirm = noop } ) => { +const CTA = () => { const { updateEnhancedAdsConversionStatus } = useAppDispatch(); const { acceptedCustomerDataTerms, @@ -29,26 +28,17 @@ const CTA = ( { onConfirm = noop } ) => { updateEnhancedAdsConversionStatus( ENHANCED_ADS_CONVERSION_STATUS.ENABLED ); - - onConfirm(); - }, [ onConfirm, updateEnhancedAdsConversionStatus ] ); + }, [ updateEnhancedAdsConversionStatus ] ); useEffect( () => { // As soon as the terms are accepted, do not show the spinner if ( acceptedCustomerDataTerms && isPolling ) { // We automatically set the status to enabled. - updateEnhancedAdsConversionStatus( - ENHANCED_ADS_CONVERSION_STATUS.ENABLED - ); + handleConfirm(); setIsPolling( false ); } - }, [ - acceptedCustomerDataTerms, - setIsPolling, - isPolling, - updateEnhancedAdsConversionStatus, - ] ); + }, [ acceptedCustomerDataTerms, setIsPolling, isPolling, handleConfirm ] ); const handleOnEnable = () => { setIsPolling( true ); diff --git a/js/src/data/test/reducer.test.js b/js/src/data/test/reducer.test.js index aad87910cd..5b21c9ea2c 100644 --- a/js/src/data/test/reducer.test.js +++ b/js/src/data/test/reducer.test.js @@ -71,6 +71,7 @@ describe( 'reducer', () => { conversion_tracking_setting: { accepted_customer_data_terms: null, allow_enhanced_conversions: null, + skip_confirmation: false, }, }, } ); diff --git a/js/src/product-feed/submission-success-guide/enhanced-conversions/actions.test.js b/js/src/product-feed/submission-success-guide/enhanced-conversions/actions.test.js index 2faac93055..f6282256f8 100644 --- a/js/src/product-feed/submission-success-guide/enhanced-conversions/actions.test.js +++ b/js/src/product-feed/submission-success-guide/enhanced-conversions/actions.test.js @@ -22,13 +22,11 @@ jest.mock( '.~/data/actions', () => ( { * External dependencies */ import { render, screen } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; import '@testing-library/jest-dom'; /** * Internal dependencies */ -import { ENHANCED_ADS_CONVERSION_STATUS } from '.~/constants'; import useAcceptedCustomerDataTerms from '.~/hooks/useAcceptedCustomerDataTerms'; import useAllowEnhancedConversions from '.~/hooks/useAllowEnhancedConversions'; import Actions from './actions'; @@ -45,6 +43,7 @@ describe( 'Enhanced Conversion Footer', () => { } ); useAllowEnhancedConversions.mockReturnValue( { allowEnhancedConversions: null, + hasFinishedResolution: true, } ); render( ); @@ -53,23 +52,4 @@ describe( 'Enhanced Conversion Footer', () => { screen.getByText( 'Enable Enhanced Conversions' ) ).toBeInTheDocument(); } ); - - test( 'Click on enable button callback', () => { - const handleOnModalClose = jest.fn().mockName( 'On button click' ); - - useAcceptedCustomerDataTerms.mockReturnValue( { - acceptedCustomerDataTerms: true, - hasFinishedResolution: true, - } ); - useAllowEnhancedConversions.mockReturnValue( { - allowEnhancedConversions: ENHANCED_ADS_CONVERSION_STATUS.DISABLED, - } ); - - render( ); - - const button = screen.getByRole( 'button', { name: 'Confirm' } ); - userEvent.click( button ); - - expect( handleOnModalClose ).toHaveBeenCalledTimes( 1 ); - } ); } ); diff --git a/js/src/product-feed/submission-success-guide/enhanced-conversions/index.test.js b/js/src/product-feed/submission-success-guide/enhanced-conversions/index.test.js index 93389db0eb..7f46ffe332 100644 --- a/js/src/product-feed/submission-success-guide/enhanced-conversions/index.test.js +++ b/js/src/product-feed/submission-success-guide/enhanced-conversions/index.test.js @@ -2,6 +2,10 @@ jest.mock( '.~/hooks/useAcceptedCustomerDataTerms', () => ( { __esModule: true, default: jest.fn().mockName( 'useAcceptedCustomerDataTerms' ), } ) ); +jest.mock( '.~/hooks/useAllowEnhancedConversions', () => ( { + __esModule: true, + default: jest.fn().mockName( 'useAllowEnhancedConversions' ), +} ) ); /** * External dependencies @@ -12,8 +16,10 @@ import '@testing-library/jest-dom'; /** * Internal dependencies */ +import useAllowEnhancedConversions from '.~/hooks/useAllowEnhancedConversions'; import useAcceptedCustomerDataTerms from '.~/hooks/useAcceptedCustomerDataTerms'; import EnhancedConversion from './index'; +import { ENHANCED_ADS_CONVERSION_STATUS } from '.~/constants'; describe( 'Enhanced Conversion', () => { beforeEach( () => { @@ -25,6 +31,10 @@ describe( 'Enhanced Conversion', () => { acceptedCustomerDataTerms: false, hasFinishedResolution: true, } ); + useAllowEnhancedConversions.mockReturnValue( { + allowEnhancedConversions: null, + hasFinishedResolution: true, + } ); render( ); expect( @@ -39,6 +49,10 @@ describe( 'Enhanced Conversion', () => { acceptedCustomerDataTerms: true, hasFinishedResolution: true, } ); + useAllowEnhancedConversions.mockReturnValue( { + allowEnhancedConversions: ENHANCED_ADS_CONVERSION_STATUS.PENDING, + hasFinishedResolution: true, + } ); render( ); expect( From 62b19a214ecd349513be6bcc0a498c1e095d5ff5 Mon Sep 17 00:00:00 2001 From: asvinb Date: Wed, 17 Apr 2024 15:51:52 +0400 Subject: [PATCH 14/14] Address CR feedback. --- .../enhanced-conversion-tracking-settings/cta.js | 4 +++- .../enable-button.js | 7 +------ .../enhanced-conversions/actions.js | 11 +++++++++-- .../enhanced-conversions/index.js | 9 +++------ 4 files changed, 16 insertions(+), 15 deletions(-) diff --git a/js/src/components/enhanced-conversion-tracking-settings/cta.js b/js/src/components/enhanced-conversion-tracking-settings/cta.js index e828ecd65a..0719030190 100644 --- a/js/src/components/enhanced-conversion-tracking-settings/cta.js +++ b/js/src/components/enhanced-conversion-tracking-settings/cta.js @@ -1,6 +1,7 @@ /** * External dependencies */ +import { noop } from 'lodash'; import { useEffect, useCallback } from '@wordpress/element'; /** @@ -14,7 +15,7 @@ import ConfirmButton from './confirm-button'; import useAutoCheckEnhancedConversionTOS from '.~/hooks/useAutoCheckEnhancedConversionTOS'; import useEnhancedConversionsSkipConfirmation from '.~/hooks/useEnhancedConversionsSkipConfirmation'; -const CTA = () => { +const CTA = ( { onEnable = noop } ) => { const { updateEnhancedAdsConversionStatus } = useAppDispatch(); const { acceptedCustomerDataTerms, @@ -42,6 +43,7 @@ const CTA = () => { const handleOnEnable = () => { setIsPolling( true ); + onEnable(); }; if ( ! hasFinishedResolution ) { diff --git a/js/src/components/enhanced-conversion-tracking-settings/enable-button.js b/js/src/components/enhanced-conversion-tracking-settings/enable-button.js index d8cc8a2535..519c62bf48 100644 --- a/js/src/components/enhanced-conversion-tracking-settings/enable-button.js +++ b/js/src/components/enhanced-conversion-tracking-settings/enable-button.js @@ -14,19 +14,14 @@ import AppButton from '.~/components/app-button'; import useGoogleAdsEnhancedConversionSettingsURL from '.~/hooks/useGoogleAdsEnhancedConversionSettingsURL'; const EnableButton = ( { onEnable = noop } ) => { - const { - updateEnhancedAdsConversionStatus, - updateEnhancedConversionsSkipConfirmation, - } = useAppDispatch(); const url = useGoogleAdsEnhancedConversionSettingsURL(); + const { updateEnhancedAdsConversionStatus } = useAppDispatch(); const handleOnEnableEnhancedConversions = () => { window.open( url, '_blank' ); updateEnhancedAdsConversionStatus( ENHANCED_ADS_CONVERSION_STATUS.PENDING ); - updateEnhancedConversionsSkipConfirmation( true ); - onEnable(); }; diff --git a/js/src/product-feed/submission-success-guide/enhanced-conversions/actions.js b/js/src/product-feed/submission-success-guide/enhanced-conversions/actions.js index 4d9dd2cf6a..d3c74a7f9e 100644 --- a/js/src/product-feed/submission-success-guide/enhanced-conversions/actions.js +++ b/js/src/product-feed/submission-success-guide/enhanced-conversions/actions.js @@ -2,13 +2,14 @@ * External dependencies */ import { noop } from 'lodash'; -import { Fragment } from '@wordpress/element'; +import { Fragment, useCallback } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ import { ENHANCED_ADS_CONVERSION_STATUS } from '.~/constants'; +import { useAppDispatch } from '.~/data'; import AppButton from '.~/components/app-button'; import CTA from '.~/components/enhanced-conversion-tracking-settings/cta'; import useAcceptedCustomerDataTerms from '.~/hooks/useAcceptedCustomerDataTerms'; @@ -21,6 +22,12 @@ const Actions = ( { onModalClose = noop } ) => { allowEnhancedConversions, hasFinishedResolution: hasResolvedAllowEnhancedConversions, } = useAllowEnhancedConversions(); + const { updateEnhancedConversionsSkipConfirmation } = useAppDispatch(); + + const handleOnEnable = useCallback( () => { + // Skipping the confirmation screen applies to the modal only. + updateEnhancedConversionsSkipConfirmation( true ); + }, [ updateEnhancedConversionsSkipConfirmation ] ); const getCTA = () => { if ( @@ -36,7 +43,7 @@ const Actions = ( { onModalClose = noop } ) => { allowEnhancedConversions !== ENHANCED_ADS_CONVERSION_STATUS.ENABLED ) ) { - return ; + return ; } return ( diff --git a/js/src/product-feed/submission-success-guide/enhanced-conversions/index.js b/js/src/product-feed/submission-success-guide/enhanced-conversions/index.js index 70f781c2f8..e81a312ccf 100644 --- a/js/src/product-feed/submission-success-guide/enhanced-conversions/index.js +++ b/js/src/product-feed/submission-success-guide/enhanced-conversions/index.js @@ -161,11 +161,8 @@ const EnhancedConversions = () => { return 'loading'; } - if ( - acceptedCustomerDataTerms && - allowEnhancedConversions === ENHANCED_ADS_CONVERSION_STATUS.ENABLED - ) { - return 'success'; + if ( ! acceptedCustomerDataTerms ) { + return 'accept-terms'; } if ( @@ -177,7 +174,7 @@ const EnhancedConversions = () => { return 'confirm'; } - return 'accept-terms'; + return 'success'; }; const currentPage = getCurrentPage();