Streamlined Free Listings + Paid Ads and Ads Billing Pop-up for the onboarding flow

.eslintrc.js

@@ -10,12 +10,6 @@ const webpackResolver = {
 			 * Ref: https://webpack.js.org/configuration/resolve/#resolveextensions
 			 */
 			extensions: [ '.js' ],
-			/**
-			 * Make eslint be able to resolve the exports config of `use-debounce`.
-			 * The `exports` config of package.json doesn't work before the current eslint support it.
-			 * Ref: https://github.com/xnimorz/use-debounce/blob/5.2.0/package.json#L8-L14
-			 */
-			conditionNames: [ 'import', 'require' ],
 		},
 	},
 };
@@ -34,6 +28,7 @@ module.exports = {
 			'stylelint',
 			'@wordpress/stylelint-config',
 			'@pmmmwh/react-refresh-webpack-plugin',
+			'react-transition-group',
 		],
 		'import/resolver': { webpack: webpackResolver },
 	},

jest.config.js

@@ -7,6 +7,7 @@ module.exports = {
 	testEnvironment: 'jsdom',
 	setupFiles: [ 'core-js' ],
 	moduleNameMapper: {
+		'\\.png$': '<rootDir>/tests/mocks/assets/imageMock.js',
 		'\\.svg$': '<rootDir>/tests/mocks/assets/svgrMock.js',
 		'\\.scss$': '<rootDir>/tests/mocks/assets/styleMock.js',
 		// Transform our `.~/` alias.

js/src/components/account-card/index.js

@@ -13,6 +13,8 @@ import { Icon, store as storeIcon } from '@wordpress/icons';
 import Section from '.~/wcdl/section';
 import Subsection from '.~/wcdl/subsection';
 import googleLogoURL from './gogole-g-logo.svg';
+import googleMCLogoURL from './google-merchant-center-logo.svg';
+import googleAdsLogoURL from './google-ads-logo.svg';
 import wpLogoURL from './wp-logo.svg';
 import './index.scss';
 
@@ -40,6 +42,24 @@ const googleLogo = (
 	/>
 );
 
+const googleMCLogo = (
+	<img
+		src={ googleMCLogoURL }
+		alt={ __( 'Google Merchant Center Logo', 'google-listings-and-ads' ) }
+		width="40"
+		height="40"
+	/>
+);
+
+const googleAdsLogo = (
+	<img
+		src={ googleAdsLogoURL }
+		alt={ __( 'Google Ads Logo', 'google-listings-and-ads' ) }
+		width="40"
+		height="40"
+	/>
+);
+
 const wpLogo = (
 	<img
 		src={ wpLogoURL }
@@ -60,18 +80,18 @@ const appearanceDict = {
 		title: __( 'Google', 'google-listings-and-ads' ),
 	},
 	[ APPEARANCE.GOOGLE_MERCHANT_CENTER ]: {
-		icon: googleLogo,
+		icon: googleMCLogo,
 		title: __( 'Google Merchant Center', 'google-listings-and-ads' ),
 		description: __(
-			'Required to sync products and list on Google Shopping',
+			'Required to sync products and list on Google',
 			'google-listings-and-ads'
 		),
 	},
 	[ APPEARANCE.GOOGLE_ADS ]: {
-		icon: googleLogo,
+		icon: googleAdsLogo,
 		title: __( 'Google Ads', 'google-listings-and-ads' ),
 		description: __(
-			'Required to create paid campaigns with your product listings',
+			'Connect with millions of shoppers who are searching for products like yours and drive sales with Google.',
 			'google-listings-and-ads'
 		),
 	},

js/src/components/account-card/index.scss

@@ -23,6 +23,7 @@
 	&__description {
 		display: flex;
 		flex-direction: column;
+		align-items: flex-start;
 		gap: 1em;
 		color: $gray-900;
 

js/src/components/app-button/index.js

@@ -49,6 +49,7 @@ const AppButton = ( props ) => {
 		onClick( ...args );
 	};
 
+	const disabledButton = disabled || loading;
 	const classes = [ 'app-button', className ];
 	let text;
 
@@ -75,7 +76,8 @@ const AppButton = ( props ) => {
 	return (
 		<Button
 			className={ classnames( ...classes ) }
-			disabled={ disabled || loading }
+			disabled={ disabledButton }
+			aria-disabled={ disabledButton }
 			text={ text }
 			onClick={ handleClick }
 			{ ...rest }

js/src/components/contact-information/index.js

@@ -21,12 +21,24 @@ const learnMoreLinkId = 'contact-information-read-more';
 const learnMoreUrl =
 	'https://docs.woocommerce.com/document/google-listings-and-ads/#contact-information';
 
-const description = __(
-	'Your contact information is required by Google for verification purposes. It will be shared with the Google Merchant Center and will not be displayed to customers.',
-	'google-listings-and-ads'
+const description = (
+	<>
+		<p>
+			{ __(
+				'Your contact information is required for verification by Google.',
+				'google-listings-and-ads'
+			) }
+		</p>
+		<p>
+			{ __(
+				'It would be shared with Google Merchant Center for store verification and would not be displayed to customers.',
+				'google-listings-and-ads'
+			) }
+		</p>
+	</>
 );
 
-const mcTitle = __( 'Enter contact information', 'google-listings-and-ads' );
+const mcTitle = __( 'Verify contact information', 'google-listings-and-ads' );
 const settingsTitle = __( 'Contact information', 'google-listings-and-ads' );
 
 /**
@@ -70,24 +82,13 @@ export function ContactInformationPreview() {
  * Renders a contact information section with specified initial state and texts.
  *
  * @param {Object} props React props.
- * @param {Function} [props.onPhoneNumberVerified] Called when the phone number is verified.
+ * @param {Function} [props.onPhoneNumberVerified] Called when the phone number is verified or has been verified.
  * @fires gla_documentation_link_click with `{ context: 'setup-mc-contact-information', link_id: 'contact-information-read-more', href: 'https://docs.woocommerce.com/document/google-listings-and-ads/#contact-information' }`
  * @fires gla_documentation_link_click with `{ context: 'settings-no-phone-number-notice', link_id: 'contact-information-read-more', href: 'https://docs.woocommerce.com/document/google-listings-and-ads/#contact-information' }`
  * @fires gla_documentation_link_click with `{ context: 'settings-no-store-address-notice', link_id: 'contact-information-read-more', href: 'https://docs.woocommerce.com/document/google-listings-and-ads/#contact-information' }`
  */
 const ContactInformation = ( { onPhoneNumberVerified } ) => {
 	const phone = useGoogleMCPhoneNumber();
-
-	/**
-	 * Since it is still lacking the phone verification state,
-	 * all onboarding accounts are considered unverified phone numbers.
-	 *
-	 * TODO: replace the code at next line back to the original logic with
-	 * `const initEditing = null;`
-	 * after the phone verification state can be detected.
-	 */
-	const initEditing = true;
-
 	const title = mcTitle;
 	const trackContext = 'setup-mc-contact-information';
 
@@ -98,7 +99,7 @@ const ContactInformation = ( { onPhoneNumberVerified } ) => {
 			title={ title }
 			description={
 				<div>
-					<p>{ description }</p>
+					{ description }
 					<p>
 						<AppDocumentationLink
 							context={ trackContext }
@@ -115,7 +116,7 @@ const ContactInformation = ( { onPhoneNumberVerified } ) => {
 				<PhoneNumberCard
 					view="setup-mc"
 					phoneNumber={ phone }
-					initEditing={ initEditing }
+					initEditing={ null }
 					onPhoneNumberVerified={ onPhoneNumberVerified }
 				/>
 				<StoreAddressCard />

js/src/components/contact-information/phone-number-card/phone-number-card-preview.js

@@ -9,6 +9,7 @@ import { __ } from '@wordpress/i18n';
 import { APPEARANCE } from '.~/components/account-card';
 import useGoogleMCPhoneNumber from '.~/hooks/useGoogleMCPhoneNumber';
 import ContactInformationPreviewCard from '../contact-information-preview-card';
+import './phone-number-card-preview.scss';
 
 /**
  * Triggered when phone number edit button is clicked.
@@ -35,7 +36,21 @@ export function PhoneNumberCardPreview( { editHref, learnMore } ) {
 
 	if ( loaded ) {
 		if ( data.isValid ) {
-			content = data.display;
+			const verificationStatus = data.isVerified ? (
+				<div className="gla-phone-number-card-preview__verified-status">
+					{ __( 'Verified', 'google-listings-and-ads' ) }
+				</div>
+			) : (
+				<div className="gla-phone-number-card-preview__unverified-status">
+					{ __( 'Unverified', 'google-listings-and-ads' ) }
+				</div>
+			);
+			content = (
+				<>
+					{ data.display }
+					{ verificationStatus }
+				</>
+			);
 		} else {
 			warning = __(
 				'Please add your phone number',

js/src/components/contact-information/phone-number-card/phone-number-card-preview.scss

@@ -0,0 +1,15 @@
+.gla-contact-info-preview-card {
+	.gla-account-card__description {
+		gap: $grid-unit-05;
+	}
+}
+
+.gla-phone-number-card-preview {
+	&__verified-status {
+		color: $alert-green;
+	}
+
+	&__unverified-status {
+		color: $alert-red;
+	}
+}

js/src/components/contact-information/phone-number-card/phone-number-card.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useState, useEffect } from '@wordpress/element';
+import { useState, useEffect, useRef } from '@wordpress/element';
 import { CardDivider } from '@wordpress/components';
 import { Spinner } from '@woocommerce/components';
 
@@ -101,10 +101,10 @@ function EditPhoneNumberCard( { phoneNumber, onPhoneNumberVerified } ) {
  * @param {boolean|null} [props.initEditing=null] Specify the inital UI state.
  *     `true`: initialize with the editing UI.
  *     `false`: initialize with the viewing UI.
- *     `null`: determine the initial UI state according to the `data.isValid` after the `phoneNumber` loaded.
+ *     `null`: determine the initial UI state according to the `data.isVerified` after the `phoneNumber` loaded.
  * @param {Function} [props.onEditClick] Called when clicking on "Edit" button.
  *     If this callback is omitted, it will enter edit mode when clicking on "Edit" button.
- * @param {Function} [props.onPhoneNumberVerified] Called when the phone number is verified in edit mode.
+ * @param {Function} [props.onPhoneNumberVerified] Called when the phone number is verified or has been verified.
  *
  * @fires gla_mc_phone_number_edit_button_click
  */
@@ -117,14 +117,27 @@ const PhoneNumberCard = ( {
 } ) => {
 	const { loaded, data } = phoneNumber;
 	const [ isEditing, setEditing ] = useState( initEditing );
+	const onPhoneNumberVerifiedRef = useRef();
+	onPhoneNumberVerifiedRef.current = onPhoneNumberVerified;
+
+	const { isVerified } = data;
 
 	// Handle the initial UI state of `initEditing = null`.
 	// The `isEditing` state is on hold. Determine it after the `phoneNumber` loaded.
 	useEffect( () => {
 		if ( loaded && isEditing === null ) {
-			setEditing( ! data.isValid );
+			setEditing( ! isVerified );
+		}
+	}, [ loaded, isVerified, isEditing ] );
+
+	// If `initEditing` is true, EditPhoneNumberCard takes care of the call of `onPhoneNumberVerified`
+	// after the phone number is verified. If `initEditing` is false or null, this useEffect handles
+	// the call of `onPhoneNumberVerified` when the loaded phone number has already been verified.
+	useEffect( () => {
+		if ( loaded && initEditing !== true && isVerified ) {
+			onPhoneNumberVerifiedRef.current();
 		}
-	}, [ loaded, data.isValid, isEditing ] );
+	}, [ loaded, isVerified, initEditing ] );
 
 	// Return a simple loading AccountCard since the initial edit state is unknown before loaded.
 	if ( isEditing === null ) {

js/src/components/contact-information/phone-number-card/phone-number-card.scss

@@ -1,4 +1,8 @@
 .gla-phone-number-card {
+	.gla-account-card__description {
+		color: $gray-700;
+	}
+
 	// Country code selector
 	.wcdl-select-control {
 		.wcdl-select-control__input {

js/src/components/contact-information/phone-number-card/verify-phone-number-content.js

@@ -16,7 +16,7 @@ import { Notice, Flex } from '@wordpress/components';
  */
 import { useAppDispatch } from '.~/data';
 import useIsMounted from '.~/hooks/useIsMounted';
-import useCountdown from './useCountdown';
+import useCountdown from '.~/hooks/useCountdown';
 import Section from '.~/wcdl/section';
 import Subsection from '.~/wcdl/subsection';
 import AppButton from '.~/components/app-button';

js/src/components/contact-information/store-address-card.scss

@@ -4,4 +4,8 @@
 			margin-left: $grid-unit-05;
 		}
 	}
+
+	.gla-account-card__description {
+		color: $gray-700;
+	}
 }

js/src/components/different-currency-notice.js

@@ -11,6 +11,7 @@ import { createInterpolateElement } from '@wordpress/element';
 import useGoogleAdsAccount from '.~/hooks/useGoogleAdsAccount';
 import useStoreCurrency from '.~/hooks/useStoreCurrency';
 import AppDocumentationLink from '.~/components/app-documentation-link';
+import { GOOGLE_ADS_ACCOUNT_STATUS } from '.~/constants';
 
 /**
  * Shows warning {@link Notice}
@@ -31,7 +32,7 @@ const DifferentCurrencyNotice = ( { context } ) => {
 	// Do not render if data is not available, account not connected, or the same currencies are used.
 	if (
 		! googleAdsAccount ||
-		googleAdsAccount.status !== 'connected' ||
+		googleAdsAccount.status !== GOOGLE_ADS_ACCOUNT_STATUS.CONNECTED ||
 		googleAdsAccount.currency === storeCurrency
 	) {
 		return null;

js/src/components/faqs-panel/index.scss

@@ -1,6 +1,7 @@
 .gla-faqs-panel {
 	.components-panel__row {
-		display: block;
+		flex-direction: column;
+		gap: 1.5em;
 	}
 
 	.components-panel__body-title {