Merge branch 'develop' into feature/1610-streamlined-onboarding

changelog.txt

@@ -1,5 +1,18 @@
 *** WooCommerce Google Listings and Ads Changelog ***
 
+= 2.1.4 - 2022-10-04 =
+* Add - Policy Compliance Checks in the onboarding flow.
+* Tweak - WC 7.0 compatibility.
+
+= 2.1.3 - 2022-09-27 =
+* Fix - Avoid truncate for issues with more than 100 characters length.
+* Fix - Update Size Type Attribute available values.
+* Tweak - Update Website not Claimed issue information.
+
+= 2.1.2 - 2022-09-15 =
+* Fix - WooCommerce 6.7 compatibility issues.
+* Tweak - WC 6.9 compatibility.
+
 = 2.1.1 - 2022-09-06 =
 * Dev - Run PHPCS checks for unit tests.
 * Fix - A compatibility issue with WooCommerce 6.9 which prevents interaction with the input field of the paid campaign budget.

google-listings-and-ads.php

@@ -3,7 +3,7 @@
  * Plugin Name: Google Listings and Ads
  * Plugin URL: https://wordpress.org/plugins/google-listings-and-ads/
  * Description: Native integration with Google that allows merchants to easily display their products across Google’s network.
- * Version: 2.1.1
+ * Version: 2.1.4
  * Author: WooCommerce
  * Author URI: https://woocommerce.com/
  * Text Domain: google-listings-and-ads
@@ -12,7 +12,7 @@
  * Requires PHP: 7.4
  *
  * WC requires at least: 6.0
- * WC tested up to: 6.8
+ * WC tested up to: 7.0
  * Woo:
  *
  * @package WooCommerce\Admin
@@ -28,7 +28,7 @@
 
 defined( 'ABSPATH' ) || exit;
 
-define( 'WC_GLA_VERSION', '2.1.1' ); // WRCS: DEFINED_VERSION.
+define( 'WC_GLA_VERSION', '2.1.4' ); // WRCS: DEFINED_VERSION.
 define( 'WC_GLA_MIN_PHP_VER', '7.4' );
 define( 'WC_GLA_MIN_WC_VER', '6.0' );
 

js/src/components/pre-launch-check-item/index.js

@@ -0,0 +1,74 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	Button,
+	CheckboxControl,
+	Panel,
+	PanelBody,
+	PanelRow,
+} from '@wordpress/components';
+import { recordEvent } from '@woocommerce/tracks';
+import { useRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import './index.scss';
+
+const getPanelToggleHandler = ( id ) => ( isOpened ) => {
+	recordEvent( 'pre-launch-checklist', {
+		id,
+		action: isOpened ? 'expand' : 'collapse',
+	} );
+};
+
+export default function PreLaunchCheckItem( {
+	formProps,
+	fieldName,
+	firstPersonTitle,
+	secondPersonTitle,
+	children,
+} ) {
+	const { getInputProps, setValue, values } = formProps;
+	const checked = values[ fieldName ];
+	const initialCheckedRef = useRef( checked );
+
+	if ( checked ) {
+		return (
+			<CheckboxControl
+				label={
+					initialCheckedRef.current
+						? firstPersonTitle
+						: secondPersonTitle
+				}
+				{ ...getInputProps( fieldName ) }
+				disabled
+			/>
+		);
+	}
+
+	return (
+		<div className="gla-pre-launch-checklist__checkbox">
+			<CheckboxControl { ...getInputProps( fieldName ) } />
+			<Panel>
+				<PanelBody
+					title={ secondPersonTitle }
+					initialOpen={ false }
+					onToggle={ getPanelToggleHandler( fieldName ) }
+				>
+					<PanelRow>
+						{ children }
+						<Button
+							isPrimary
+							onClick={ () => setValue( fieldName, true ) }
+						>
+							{ __( 'Confirm', 'google-listings-and-ads' ) }
+						</Button>
+					</PanelRow>
+				</PanelBody>
+			</Panel>
+		</div>
+	);
+}

js/src/components/pre-launch-check-item/index.scss

@@ -0,0 +1,22 @@
+.gla-pre-launch-checklist {
+	.components-panel {
+		flex: 1 1;
+
+		&__row {
+			display: flex;
+			flex-direction: column;
+			align-items: flex-start;
+			gap: 1em;
+		}
+
+		.components-panel__body-title {
+			.components-panel__body-toggle.components-button {
+				color: #007cba;
+			}
+		}
+	}
+	.gla-pre-launch-checklist__checkbox {
+		display: flex;
+		justify-content: stretch;
+	}
+}

js/src/css/shared/_gutenberg-components.scss

@@ -30,6 +30,11 @@
 	&.is-link {
 		text-decoration: none;
 	}
+
+	// Fix that the panel title is rendered under the button with dropdown arrow.
+	&.components-panel__body-toggle {
+		padding-right: $grid-unit-60;
+	}
 }
 
 // hack to fix radio button selected style bug caused by woocommerce-admin.

js/src/data/action-types.js

@@ -23,6 +23,7 @@ const TYPES = {
 	RECEIVE_MC_CONTACT_INFORMATION: 'RECEIVE_MC_CONTACT_INFORMATION',
 	VERIFIED_MC_PHONE_NUMBER: 'VERIFIED_MC_PHONE_NUMBER',
 	RECEIVE_MC_COUNTRIES_AND_CONTINENTS: 'RECEIVE_MC_COUNTRIES_AND_CONTINENTS',
+	POLICY_CHECK: 'POLICY_CHECK',
 	RECEIVE_TARGET_AUDIENCE: 'RECEIVE_TARGET_AUDIENCE',
 	SAVE_TARGET_AUDIENCE: 'SAVE_TARGET_AUDIENCE',
 	RECEIVE_ADS_CAMPAIGNS: 'RECEIVE_ADS_CAMPAIGNS',

js/src/data/reducer.js

@@ -12,6 +12,7 @@ const DEFAULT_STATE = {
 	mc: {
 		target_audience: null,
 		countries: null,
+		policy_check: null,
 		continents: null,
 		shipping: {
 			rates: [],
@@ -369,6 +370,11 @@ const reducer = ( state = DEFAULT_STATE, action ) => {
 			return setIn( state, [ 'report', reportKey ], data );
 		}
 
+		case TYPES.POLICY_CHECK: {
+			const { data } = action;
+			return setIn( state, 'mc.policy_check', data );
+		}
+
 		// Page will be reloaded after all accounts have been disconnected, so no need to mutate state.
 		case TYPES.DISCONNECT_ACCOUNTS_ALL:
 		default:

js/src/data/resolvers.js

@@ -163,6 +163,30 @@ export function* getMCCountriesAndContinents() {
 	}
 }
 
+/**
+ * Fetch policy info for checking merchant onboarding policy setting.
+ */
+export function* getPolicyCheck() {
+	try {
+		const response = yield apiFetch( {
+			path: `${ API_NAMESPACE }/mc/policy_check`,
+		} );
+
+		return {
+			type: TYPES.POLICY_CHECK,
+			data: response,
+		};
+	} catch ( error ) {
+		yield handleFetchError(
+			error,
+			__(
+				'There was an error loading policy check details.',
+				'google-listings-and-ads'
+			)
+		);
+	}
+}
+
 export function* getTargetAudience() {
 	yield fetchTargetAudience();
 }

js/src/data/selectors.js

@@ -154,6 +154,10 @@ export const getMCReviewRequest = ( state ) => {
 	return state.mc_review_request;
 };
 
+export const getPolicyCheck = ( state ) => {
+	return state.mc.policy_check;
+};
+
 // note: we use rememo createSelector here to cache the sliced issues array,
 // to prevent returning new array to the consumer every time,
 // which might cause rendering performance problem.

js/src/data/test/reducer.test.js

@@ -20,6 +20,7 @@ describe( 'reducer', () => {
 				target_audience: null,
 				countries: null,
 				continents: null,
+				policy_check: null,
 				shipping: {
 					rates: [],
 					times: [],
@@ -757,6 +758,7 @@ describe( 'reducer', () => {
 			[ TYPES.SAVE_TARGET_AUDIENCE, 'target_audience', 'mc.target_audience' ],
 			[ TYPES.RECEIVE_MC_SETUP, 'mcSetup', 'mc_setup' ],
 			[ TYPES.RECEIVE_MC_PRODUCT_STATISTICS, 'mcProductStatistics', 'mc_product_statistics' ],
+			[ TYPES.POLICY_CHECK, 'data', 'mc.policy_check' ],
 		];
 		/* eslint-enable prettier/prettier */
 

js/src/hooks/usePolicyCheck.js

@@ -0,0 +1,28 @@
+/**
+ * Internal dependencies
+ */
+import useAppSelectDispatch from './useAppSelectDispatch';
+
+/**
+ * Get policy detail info from calling `useAppSelectDispatch` with `getPolicyCheck`.
+ * Returns `{ hasFinishedResolution, data, invalidateResolution }`.
+ *
+ * `data` is an object of policy check mapping. e.g.:
+ *
+ * ```json
+ * {
+ *   "allowed_countries": true,
+ *   "robots_restriction": false,
+ *   "page_not_found_error": false,
+ *   "page_redirects": false,
+ *   "store_ssl": true,
+ *   "payment_gateways": true,
+ *   "refund_returns": true
+ * }
+ * ```
+ */
+const usePolicyCheck = () => {
+	return useAppSelectDispatch( 'getPolicyCheck' );
+};
+
+export default usePolicyCheck;

js/src/setup-mc/setup-stepper/store-requirements/index.js

@@ -2,8 +2,9 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useState } from '@wordpress/element';
+import { useState, useEffect } from '@wordpress/element';
 import { Form } from '@woocommerce/components';
+import { isEqual } from 'lodash';
 
 /**
  * Internal dependencies
@@ -19,6 +20,7 @@ import ContactInformation from '.~/components/contact-information';
 import AppButton from '.~/components/app-button';
 import AppSpinner from '.~/components/app-spinner';
 import PreLaunchChecklist from './pre-launch-checklist';
+import usePolicyCheck from '.~/hooks/usePolicyCheck';
 import checkErrors from './pre-launch-checklist/checkErrors';
 
 /**
@@ -32,13 +34,15 @@ export default function StoreRequirements( { onContinue } ) {
 	const { createNotice } = useDispatchCoreNotices();
 	const { data: address } = useStoreAddress();
 	const { settings } = useSettings();
+	const { data: policyCheckData } = usePolicyCheck();
 
 	/**
 	 * Since it still lacking the phone verification state,
 	 * all onboarding accounts are considered unverified phone numbers.
 	 */
 	const [ isPhoneNumberReady, setPhoneNumberReady ] = useState( false );
 	const [ settingsSaved, setSettingsSaved ] = useState( true );
+	const [ preprocessed, setPreprocessed ] = useState( false );
 	const [ completing, setCompleting ] = useState( false );
 
 	const handleChangeCallback = async ( _, values ) => {
@@ -79,7 +83,48 @@ export default function StoreRequirements( { onContinue } ) {
 		}
 	};
 
-	if ( ! settings ) {
+	// Preprocess the auto-checked state and data saving.
+	useEffect( () => {
+		if ( preprocessed || ! settings || ! policyCheckData ) {
+			return;
+		}
+
+		const newSettings = { ...settings };
+
+		const websiteLive =
+			policyCheckData.allowed_countries &&
+			! policyCheckData.robots_restriction &&
+			! policyCheckData.page_not_found_error &&
+			! policyCheckData.page_redirects;
+
+		if ( websiteLive !== settings.website_live ) {
+			newSettings.website_live = websiteLive;
+		}
+
+		if ( policyCheckData.store_ssl !== settings.checkout_process_secure ) {
+			newSettings.checkout_process_secure = policyCheckData.store_ssl;
+		}
+
+		if ( policyCheckData.refund_returns !== settings.refund_tos_visible ) {
+			newSettings.refund_tos_visible = policyCheckData.refund_returns;
+		}
+
+		if (
+			policyCheckData.payment_gateways !==
+			newSettings.payment_methods_visible
+		) {
+			newSettings.payment_methods_visible =
+				policyCheckData.payment_gateways;
+		}
+
+		const promise = isEqual( newSettings, settings )
+			? Promise.resolve()
+			: saveSettings( newSettings );
+
+		promise.finally( () => setPreprocessed( true ) );
+	}, [ preprocessed, policyCheckData, settings, saveSettings ] );
+
+	if ( ! preprocessed ) {
 		return <AppSpinner />;
 	}