Merge branch 'develop' into feature/mcm-integration

TRACKING.md

@@ -74,18 +74,21 @@ Clicking on an external documentation link.
 #### Emitters
 - [`documentationLinkProps`](assets/source/setup-guide/app/helpers/documentation-link-props.js#L49) on click, with given `linkId` and `context`.
 - [`ClaimWebsite`](assets/source/setup-guide/app/steps/ClaimWebsite.js#L99) with `{ link_id: 'claim-website', context: props.view }`
-- [`SetupAccount`](assets/source/setup-guide/app/steps/SetupAccount.js#L54)
+- [`SetupAccount`](assets/source/setup-guide/app/steps/SetupAccount.js#L56)
 	- with `{ link_id: 'ad-guidelines', context: props.view }`
 	- with `{ link_id: 'merchant-guidelines', context: props.view }`
-- [`SetupTracking`](assets/source/setup-guide/app/steps/SetupTracking.js#L54)
+- [`SetupTracking`](assets/source/setup-guide/app/steps/SetupTracking.js#L57)
 	- with `{ link_id: 'ad-guidelines', context: 'wizard'|'settings' }`
 	- with `{ link_id: 'ad-data-terms', context: 'wizard'|'settings' }`
 	- with `{ link_id: 'ad-terms-of-service', context: 'wizard'|'settings' }`
 	- with `{ link_id: 'install-tag', context: 'wizard'|'settings' }`
-- [`SetupPins`](assets/source/setup-guide/app/steps/SetupPins.js#L45) with `{ link_id: 'enhanced-match', context: 'settings' }`
+	- with `{ link_id: 'automatic-enhanced-match', context: 'wizard'|'settings' }`
+- [`SetupPins`](assets/source/setup-guide/app/steps/SetupPins.js#L48)
+	- with `{ link_id: 'ads-manager', context: 'settings' }`
+	- with `{ link_id: 'enhanced-match', context: 'settings' }`
 - [`WelcomeSection`](assets/source/setup-guide/app/views/LandingPageApp.js#L48) with `{ link_id: 'terms-of-service', context: 'welcome-section' }`
 - [TermsAndConditionsModal]( assets/source/setup-guide/app/components/TermsAndConditionsModal.js#L24)
-    - with `{ link_id: 'terms-of-service', context: 'ads-credits-terms-and-conditions' }`
+  - with `{ link_id: 'terms-of-service', context: 'ads-credits-terms-and-conditions' }`
 	- with `{ link_id: 'privacy-policy', context: 'ads-credits-terms-and-conditions' }`
 	- with `{ link_id: 'advertising-services-agreement', context: 'ads-credits-terms-and-conditions' }`
 - [FormattedReasons]( assets/source/setup-guide/app/components/HealthCheck/index.js#L29)
@@ -160,6 +163,7 @@ Clicking on "… Save changes" button.
 | ---- | ---- | ----------- |
 `enable_debug_logging` | `boolean` | Indicates if Enable debug logging option is checked
 `enhanced_match_support` | `boolean` | Indicates if Enhanced Match Support option is checked
+`automatic_enhanced_match_support` | `boolean` | Indicates if Automatic Enhanced Match Support option is checked
 `erase_plugin_data` | `boolean` | Indicates if Erase Plugin Data option is checked
 `product_sync_enabled` | `boolean` | Indicates if Enable Product Sync option is checked
 `rich_pins_on_posts` | `boolean` | Indicates if Add Rich Pins for Posts option is checked

assets/source/setup-guide/app/components/SaveSettingsButton.js

@@ -25,6 +25,7 @@ import { useResetUserInteractions } from '../../../catalog-sync/helpers/effects'
  *
  * @property {boolean} enable_debug_logging Indicates if Enable debug logging option is checked
  * @property {boolean} enhanced_match_support Indicates if Enhanced Match Support option is checked
+ * @property {boolean} automatic_enhanced_match_support Indicates if Automatic Enhanced Match Support option is checked
  * @property {boolean} erase_plugin_data Indicates if Erase Plugin Data option is checked
  * @property {boolean} product_sync_enabled Indicates if Enable Product Sync option is checked
  * @property {boolean} rich_pins_on_posts Indicates if Add Rich Pins for Posts option is checked

assets/source/setup-guide/app/components/SyncSettings/index.js

@@ -0,0 +1,121 @@
+/**
+ * External dependencies
+ */
+import { sprintf, __ } from '@wordpress/i18n';
+import { Spinner } from '@woocommerce/components';
+import { useDispatch } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import {
+	Button,
+	Flex,
+	__experimentalText as Text, // eslint-disable-line @wordpress/no-unsafe-wp-apis --- _experimentalText unlikely to change/disappear and also used by WC Core
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import {
+	useSettingsSelect,
+	useSyncSettingsDispatch,
+	useCreateNotice,
+} from '../../helpers/effects';
+import './style.scss';
+
+/**
+ * Sync settings button.
+ */
+const SyncSettings = () => {
+	const appSettings = useSettingsSelect();
+	const isSyncing = useSettingsSelect( 'isSettingsSyncing' );
+	const syncAppSettings = useSyncSettingsDispatch();
+	const createNotice = useCreateNotice();
+	const { removeNotice } = useDispatch( 'core/notices' );
+	const [ triggeredSyncSettings, setTriggeredSyncSettings ] = useState(
+		false
+	);
+
+	const syncSettings = async () => {
+		try {
+			await syncAppSettings();
+
+			createNotice(
+				'success',
+				__(
+					'Settings successfully synced with Pinterest Ads Manager.',
+					'pinterest-for-woocommerce'
+				),
+				{
+					id: 'pinterest-for-woocommerce-settings-synced',
+				}
+			);
+		} catch ( error ) {
+			createNotice(
+				'error',
+				__(
+					'Failed to sync settings with Pinterest Ads Manager.',
+					'pinterest-for-woocommerce'
+				),
+				{
+					actions: [
+						{
+							label: 'Retry.',
+							onClick: syncSettings,
+						},
+					],
+				},
+				{
+					id: 'pinterest-for-woocommerce-settings-synced',
+				}
+			);
+		}
+	};
+
+	if ( ! triggeredSyncSettings ) {
+		syncSettings();
+		setTriggeredSyncSettings( true );
+	}
+
+	removeNotice( 'pinterest-for-woocommerce-settings-synced' );
+
+	const lastSyncedTime = appSettings.last_synced_settings
+		? appSettings.last_synced_settings
+		: '-';
+
+	const syncInfo = sprintf(
+		'%1$s: %2$s •',
+		__( 'Settings last updated' ),
+		lastSyncedTime
+	);
+
+	const syncButton = isSyncing ? (
+		<>
+			{ __( 'Syncing settings', 'pinterest-for-woocommerce' ) }
+			<Spinner />
+		</>
+	) : (
+		<Button
+			isLink
+			target="_blank"
+			onClick={ syncSettings }
+			label={ __(
+				'Sync to get latest settings from Pinterest Ads Manager',
+				'pinterest-for-woocommerce'
+			) }
+			showTooltip={ true }
+			tooltipPosition="top center"
+		>
+			{ __( 'Sync', 'pinterest-for-woocommerce' ) }
+		</Button>
+	);
+
+	return (
+		<Flex justify="end" className="pinterest-for-woocommerce-sync-settings">
+			<Text className="pinterest-for-woocommerce-sync-settings__info">
+				{ syncInfo }
+				{ syncButton }
+			</Text>
+		</Flex>
+	);
+};
+
+export default SyncSettings;

assets/source/setup-guide/app/components/SyncSettings/style.scss

@@ -0,0 +1,9 @@
+.pinterest-for-woocommerce-sync-settings {
+
+	&__info {
+		color: #757575;
+		display: flex;
+		gap: 0.2rem;
+		align-items: baseline;
+	}
+}

assets/source/setup-guide/app/components/TransientNotices/style.scss

@@ -46,4 +46,8 @@
 		margin-left: 32px;
 		cursor: pointer;
 	}
+
+	.components-snackbar__action {
+		margin-left: 0.2rem;
+	}
 }

assets/source/setup-guide/app/data/settings/action-types.js

@@ -2,6 +2,7 @@ const TYPES = {
 	RECEIVE_SETTINGS: 'RECEIVE_SETTINGS',
 	SET_IS_REQUESTING: 'SET_IS_REQUESTING',
 	SET_IS_UPDATING: 'SET_IS_UPDATING',
+	SET_IS_SYNCING: 'SET_IS_SYNCING',
 	SET_REQUESTING_ERROR: 'SET_REQUESTING_ERROR',
 	SET_UPDATING_ERROR: 'SET_UPDATING_ERROR',
 };

assets/source/setup-guide/app/data/settings/actions.js

@@ -40,6 +40,13 @@ export function setIsUpdating( isUpdating ) {
 	};
 }
 
+export function setIsSyncing( isSyncing ) {
+	return {
+		type: TYPES.SET_IS_SYNCING,
+		isSyncing,
+	};
+}
+
 /**
  * Update the settings in the store or in DB
  *
@@ -76,3 +83,26 @@ export function* updateSettings( data, saveToDb = false ) {
 		throw error;
 	}
 }
+
+export function* syncSettings() {
+	yield setIsSyncing( true );
+
+	try {
+		const results = yield apiFetch( {
+			path:
+				wcSettings.pinterest_for_woocommerce.apiRoute +
+				'/sync_settings/',
+			method: 'GET',
+		} );
+
+		if ( results.success ) {
+			yield receiveSettings( results.synced_settings );
+		}
+
+		yield setIsSyncing( false );
+		return { success: results.success };
+	} catch ( error ) {
+		yield setIsSyncing( false );
+		throw error;
+	}
+}

assets/source/setup-guide/app/data/settings/constants.js

@@ -2,3 +2,5 @@ export const STORE_NAME = 'pinterest_for_woocommerce/admin/settings';
 export const API_ENDPOINT =
 	wcSettings.pinterest_for_woocommerce.apiRoute + '/settings';
 export const OPTIONS_NAME = wcSettings.pinterest_for_woocommerce.optionsName;
+export const SYNCED_SETTINGS =
+	wcSettings.pinterest_for_woocommerce.syncedSettings;

assets/source/setup-guide/app/data/settings/reducer.js

@@ -7,6 +7,7 @@ const settingsReducer = (
 	state = {
 		settings: {},
 		isUpdating: false,
+		isSyncing: false,
 		requestingErrors: {},
 	},
 	action
@@ -27,6 +28,12 @@ const settingsReducer = (
 				isUpdating: action.isUpdating,
 			};
 			break;
+		case TYPES.SET_IS_SYNCING:
+			state = {
+				...state,
+				isSyncing: action.isSyncing,
+			};
+			break;
 		case TYPES.SET_REQUESTING_ERROR:
 			state = {
 				...state,

assets/source/setup-guide/app/data/settings/selectors.js

@@ -45,6 +45,15 @@ export const getSettingsUpdatingError = ( state ) => {
 	return state.updatingError || false;
 };
 
+/**
+ * Determine if settings are being synced.
+ *
+ * @param {Object} state - Reducer state
+ */
+export const isSettingsSyncing = ( state ) => {
+	return state.isSyncing || false;
+};
+
 /**
  * Determine if the current domain was verified.
  *

assets/source/setup-guide/app/helpers/connect-advertiser.js

@@ -3,13 +3,18 @@
  */
 import apiFetch from '@wordpress/api-fetch';
 
-const connectAdvertiser = async ( trackingAdvertiser, trackingTag ) => {
+const connectAdvertiser = async (
+	trackingAdvertiser,
+	trackingTag,
+	enableAem = false
+) => {
 	try {
 		const results = await apiFetch( {
 			path: `${ wcSettings.pinterest_for_woocommerce.apiRoute }/tagowner`,
 			data: {
 				advrtsr_id: trackingAdvertiser,
 				tag_id: trackingTag,
+				enable_aem: enableAem,
 			},
 			method: 'POST',
 		} );

assets/source/setup-guide/app/helpers/effects.js

@@ -21,11 +21,18 @@ export const useSettingsDispatch = ( saveToDb = false ) => {
 	return ( data ) => updateSettings( data, saveToDb );
 };
 
+export const useSyncSettingsDispatch = () => {
+	const { syncSettings } = useDispatch( SETTINGS_STORE_NAME );
+
+	return () => syncSettings();
+};
+
 export const useCreateNotice = () => {
 	const { createNotice } = useDispatch( 'core/notices' );
 
 	return useCallback(
-		( type, message ) => message && createNotice( type, message ),
+		( type, message, options = {} ) =>
+			message && createNotice( type, message, options ),
 		[ createNotice ]
 	);
 };

assets/source/setup-guide/app/helpers/prepare-for-tracking.js

@@ -1,6 +1,7 @@
 const TRACKABLE_SETTINGS = [
 	'enable_debug_logging',
 	'enhanced_match_support',
+	'automatic_enhanced_match_support',
 	'erase_plugin_data',
 	'product_sync_enabled',
 	'rich_pins_on_posts',

assets/source/setup-guide/app/helpers/prepare-for-tracking.test.js

@@ -7,6 +7,7 @@ describe( 'Prepare for Tracking function', () => {
 	const trackableData = {
 		enable_debug_logging: true,
 		enhanced_match_support: true,
+		automatic_enhanced_match_support: true,
 		erase_plugin_data: true,
 		product_sync_enabled: true,
 		rich_pins_on_posts: true,