Connect MC Account within combo card

bin/install-wp-tests.sh

@@ -196,14 +196,14 @@ install_wc() {
   if [ ! -f "$WC_VERSION_FILE" ]; then
     # set up testing suite
     rm -rf "$WC_DIR"
-    mkdir -p "$WC_DIR"
     echo "Installing WooCommerce ($WC_VERSION)."
     # Grab the necessary plugins.
     WC_TMPDIR="${TMPDIR}/woocommerce-${WC_VERSION}"
     rm -rf "${WC_TMPDIR}"
     git clone --quiet --depth=1 --branch="${WC_VERSION}" https://github.com/woocommerce/woocommerce.git "${WC_TMPDIR}"
-    mv "${WC_TMPDIR}"/plugins/woocommerce/* "$WC_DIR"
-	touch "$WC_VERSION_FILE"
+
+    ln -s "${WC_TMPDIR}"/plugins/woocommerce "$WC_DIR"
+    touch "$WC_VERSION_FILE"
 
     # Install composer for WooCommerce
     cd "${WC_DIR}"

js/src/components/ads-account-select-control/index.js

@@ -0,0 +1,28 @@
+/**
+ * Internal dependencies
+ */
+import AppSelectControl from '.~/components/app-select-control';
+import useExistingGoogleAdsAccounts from '.~/hooks/useExistingGoogleAdsAccounts';
+
+/**
+ * @param {Object} props The component props
+ * @return {JSX.Element} An enhanced AppSelectControl component.
+ */
+const AdsAccountSelectControl = ( props ) => {
+	const { existingAccounts } = useExistingGoogleAdsAccounts();
+
+	const options = existingAccounts?.map( ( acc ) => ( {
+		value: acc.id,
+		label: `${ acc.name } (${ acc.id })`,
+	} ) );
+
+	return (
+		<AppSelectControl
+			options={ options }
+			autoSelectFirstOption
+			{ ...props }
+		/>
+	);
+};
+
+export default AdsAccountSelectControl;

js/src/components/app-select-control/index.js

@@ -2,7 +2,9 @@
  * External dependencies
  */
 import { SelectControl } from '@wordpress/components';
+import { useEffect, useRef } from '@wordpress/element';
 import classNames from 'classnames';
+import { noop } from 'lodash';
 
 /**
  * Internal dependencies
@@ -12,18 +14,60 @@ import './index.scss';
 /**
  * Renders a `@wordpress/components`'s `SelectControl` with margin-bottom removed.
  *
- * If you provide `className` via props,
- * it will be added to the container div's `className`,
- * so that you can further control its style.
- *
- * @param {*} props
+ * @param {*} props The component props.
+ * @param {Array} [props.options=[]] Array of options for the select dropdown. Each option should be an object containing `label` and `value` properties.
+ * @param {string} [props.className] Additional classname to further control the style of the component.
+ * @param {Function} [props.onChange=noop] Callback function triggered when the selected value changes. Receives the new value as an argument.
+ * @param {string} [props.value] The currently selected value. This component should be used as a controlled component. A special case is that after mounting, when `autoSelectFirstOption` is true and `value` is undefined, it tries to call back `onChange` once to select the first option so that the `value` can be consistent with the `<select>` element's own value.
+ * @param {boolean} [props.autoSelectFirstOption=false] If true, automatically triggers the onChange callback with the first option as value when no value is provided. If only one option is available, the select control is also changed to non-interactive.
+ * @param {*} [props.rest] Additional props passed to the `SelectControl` component.
  */
 const AppSelectControl = ( props ) => {
-	const { className, ...rest } = props;
+	const {
+		options = [],
+		className,
+		onChange = noop,
+		value,
+		autoSelectFirstOption = false,
+		...rest
+	} = props;
+	const shouldAutoSelectOnceRef = useRef( autoSelectFirstOption === true );
+
+	useEffect( () => {
+		if ( ! shouldAutoSelectOnceRef.current ) {
+			return;
+		}
+
+		if ( value === undefined && options.length ) {
+			shouldAutoSelectOnceRef.current = false;
+			onChange( options[ 0 ].value );
+		}
+	}, [ value, options, onChange ] );
+
+	let selectProps = {
+		options,
+		value,
+		onChange,
+		...rest,
+	};
+
+	const hasSingleValueStyle = autoSelectFirstOption && options?.length === 1;
+	if ( hasSingleValueStyle ) {
+		selectProps = {
+			...selectProps,
+			suffix: ' ',
+			tabIndex: '-1',
+			readOnly: true,
+		};
+	}
 
 	return (
-		<div className={ classNames( 'app-select-control', className ) }>
-			<SelectControl { ...rest } />
+		<div
+			className={ classNames( 'app-select-control', className, {
+				'app-select-control--has-single-value': hasSingleValueStyle,
+			} ) }
+		>
+			<SelectControl { ...selectProps } />
 		</div>
 	);
 };

js/src/components/app-select-control/index.scss

@@ -3,3 +3,7 @@
 		margin-bottom: 0;
 	}
 }
+
+.app-select-control--has-single-value {
+	pointer-events: none;
+}

js/src/components/free-listings/configure-product-listings/checkErrors.js

@@ -17,7 +17,8 @@ const checkErrors = (
 	values,
 	shippingTimes,
 	finalCountryCodes,
-	storeCountryCode
+	storeCountryCode,
+	hideTaxRates = false
 ) => {
 	const errors = {};
 
@@ -110,6 +111,7 @@ const checkErrors = (
 	 * Check tax rate (required for U.S. only).
 	 */
 	if (
+		! hideTaxRates &&
 		( storeCountryCode === 'US' || finalCountryCodes.includes( 'US' ) ) &&
 		! validTaxRateSet.has( values.tax_rate )
 	) {

js/src/components/free-listings/setup-free-listings/form-content.js

@@ -23,13 +23,16 @@ import ConditionalSection from '.~/components/conditional-section';
  *
  * @param {Object} props React props.
  * @param {string} [props.submitLabel="Complete setup"] Submit button label.
+ * @param {boolean} [props.hideTaxRates] Whether to hide tax rate section.
  */
 const FormContent = ( {
 	submitLabel = __( 'Complete setup', 'google-listings-and-ads' ),
+	hideTaxRates,
 } ) => {
 	const { values, isValidForm, handleSubmit, adapter } =
 		useAdaptiveFormContext();
-	const shouldDisplayTaxRate = useDisplayTaxRate( adapter.audienceCountries );
+	const displayTaxRate = useDisplayTaxRate( adapter.audienceCountries );
+	const shouldDisplayTaxRate = ! hideTaxRates && displayTaxRate;
 	const shouldDisplayShippingTime = values.shipping_time === 'flat';
 
 	const handleSubmitClick = ( event ) => {

js/src/components/free-listings/setup-free-listings/index.js

@@ -69,6 +69,7 @@ const getSettings = ( values ) => {
  * @param {() => void} [props.onContinue] Callback called once continue button is clicked. Could be async. While it's being resolved the form would turn into a saving state.
  * @param {string} [props.submitLabel] Submit button label, to be forwarded to `FormContent`.
  * @param {JSX.Element} props.headerTitle Title in the header block of this setup.
+ * @param {boolean} [props.hideTaxRates=false] Whether to hide tax rate section, to be forwarded to `FormContent`.
  */
 const SetupFreeListings = ( {
 	targetAudience,
@@ -83,6 +84,7 @@ const SetupFreeListings = ( {
 	onContinue = noop,
 	submitLabel,
 	headerTitle,
+	hideTaxRates = false,
 } ) => {
 	const formRef = useRef();
 	const { code: storeCountryCode } = useStoreCountry();
@@ -99,7 +101,8 @@ const SetupFreeListings = ( {
 			values,
 			shippingTimesData,
 			countries,
-			storeCountryCode
+			storeCountryCode,
+			hideTaxRates
 		);
 	};
 
@@ -218,7 +221,10 @@ const SetupFreeListings = ( {
 				validate={ handleValidate }
 				onSubmit={ onContinue }
 			>
-				<FormContent submitLabel={ submitLabel } />
+				<FormContent
+					submitLabel={ submitLabel }
+					hideTaxRates={ hideTaxRates }
+				/>
 			</AdaptiveForm>
 		</div>
 	);

js/src/components/google-ads-account-card/connect-ads/index.js

@@ -19,7 +19,7 @@ import useApiFetchCallback from '.~/hooks/useApiFetchCallback';
 import useDispatchCoreNotices from '.~/hooks/useDispatchCoreNotices';
 import useGoogleAdsAccount from '.~/hooks/useGoogleAdsAccount';
 import useEventPropertiesFilter from '.~/hooks/useEventPropertiesFilter';
-import AdsAccountSelectControl from './ads-account-select-control';
+import AdsAccountSelectControl from '.~/components/ads-account-select-control';
 import { useAppDispatch } from '.~/data';
 import { FILTER_ONBOARDING } from '.~/utils/tracks';
 import './index.scss';
@@ -95,7 +95,7 @@ const ConnectAds = ( props ) => {
 			<Section.Card.Body>
 				<Subsection.Title>
 					{ __(
-						'Select an existing account',
+						'Connect to an existing account',
 						'google-listings-and-ads'
 					) }
 				</Subsection.Title>
@@ -120,7 +120,6 @@ const ConnectAds = ( props ) => {
 				) }
 				<ContentButtonLayout>
 					<AdsAccountSelectControl
-						accounts={ accounts }
 						value={ value }
 						onChange={ setValue }
 					/>

js/src/components/google-ads-account-card/connect-ads/index.test.js

@@ -15,6 +15,7 @@ import useGoogleAdsAccount from '.~/hooks/useGoogleAdsAccount';
 import { useAppDispatch } from '.~/data';
 import { FILTER_ONBOARDING } from '.~/utils/tracks';
 import expectComponentToRecordEventWithFilteredProperties from '.~/tests/expectComponentToRecordEventWithFilteredProperties';
+import useExistingGoogleAdsAccounts from '.~/hooks/useExistingGoogleAdsAccounts';
 
 jest.mock( '.~/hooks/useApiFetchCallback', () =>
 	jest.fn().mockName( 'useApiFetchCallback' )
@@ -24,6 +25,10 @@ jest.mock( '.~/hooks/useGoogleAdsAccount', () =>
 	jest.fn().mockName( 'useGoogleAdsAccount' )
 );
 
+jest.mock( '.~/hooks/useExistingGoogleAdsAccounts', () =>
+	jest.fn().mockName( 'useExistingGoogleAdsAccounts' )
+);
+
 jest.mock( '.~/data', () => ( {
 	...jest.requireActual( '.~/data' ),
 	useAppDispatch: jest.fn(),
@@ -64,6 +69,10 @@ describe( 'ConnectAds', () => {
 				.mockName( 'refetchGoogleAdsAccount' ),
 		} );
 
+		useExistingGoogleAdsAccounts.mockReturnValue( {
+			existingAccounts: accounts,
+		} );
+
 		fetchGoogleAdsAccountStatus = jest
 			.fn()
 			.mockName( 'fetchGoogleAdsAccountStatus' );
@@ -76,11 +85,7 @@ describe( 'ConnectAds', () => {
 
 	it( 'should render the given accounts in a selection', () => {
 		render( <ConnectAds accounts={ accounts } /> );
-
 		expect( screen.getByRole( 'combobox' ) ).toBeInTheDocument();
-		expect(
-			screen.getByRole( 'option', { name: 'Select one' } )
-		).toBeInTheDocument();
 		expect(
 			screen.getByRole( 'option', { name: 'Account A (1)' } )
 		).toBeInTheDocument();
@@ -115,22 +120,15 @@ describe( 'ConnectAds', () => {
 		expect( onCreateNew ).toHaveBeenCalledTimes( 1 );
 	} );
 
-	it( 'should disable the "Connect" button when no account is selected', async () => {
-		const user = userEvent.setup();
+	it( 'should disable the "Connect" button when there are no accounts', async () => {
+		useExistingGoogleAdsAccounts.mockReturnValue( {
+			existingAccounts: [],
+		} );
 
-		render( <ConnectAds accounts={ accounts } /> );
-		const combobox = screen.getByRole( 'combobox' );
+		render( <ConnectAds accounts={ [] } /> );
 		const button = getConnectButton();
 
 		expect( button ).toBeDisabled();
-
-		await user.selectOptions( combobox, '1' );
-
-		expect( button ).toBeEnabled();
-
-		await user.selectOptions( combobox, '' );
-
-		expect( button ).toBeDisabled();
 	} );
 
 	it( 'should render a connecting state and disable the button to switch to account creation after clicking the "Connect" button', async () => {

js/src/components/google-combo-account-card/connect-account-card.js

@@ -0,0 +1,52 @@
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import Section from '.~/wcdl/section';
+import AccountCard from '.~/components/account-card';
+import './connect-account-card.scss';
+
+/**
+ * ConnectAccountCard component renders an account card with a title, helper text, body, and footer sections.
+ *
+ * @param {Object} props The component properties.
+ * @param {string} props.title The title of the account card.
+ * @param {string} props.helperText The helper text for the account card.
+ * @param {JSX.Element} props.body The content for the body of the account card.
+ * @param {JSX.Element} props.footer The content for the footer of the account card.
+ * @param {boolean} [props.disabled=false] Whether display the Card in disabled style.
+ * @param {string} [props.className] Additional class names to apply to the card.
+ */
+const ConnectAccountCard = ( {
+	title,
+	helperText,
+	body,
+	footer,
+	disabled = false,
+	className,
+} ) => {
+	return (
+		<AccountCard
+			className={ classNames(
+				'gla-google-combo-connect-account-card',
+				className
+			) }
+			title={ title }
+			helper={ helperText }
+			disabled={ disabled }
+		>
+			<Section.Card.Body className="gla-google-combo-connect-account-card__body">
+				{ body }
+			</Section.Card.Body>
+			<Section.Card.Footer className="gla-google-combo-connect-account-card__footer">
+				{ footer }
+			</Section.Card.Footer>
+		</AccountCard>
+	);
+};
+
+export default ConnectAccountCard;