Consolidate accounts onboarding: Connect to existing Google Ads account via the combo card

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

@@ -3,7 +3,6 @@
  */
 import { __ } from '@wordpress/i18n';
 import classnames from 'classnames';
-import { Flex, FlexItem, FlexBlock } from '@wordpress/components';
 import GridiconPhone from 'gridicons/dist/phone';
 import { Icon, store as storeIcon } from '@wordpress/icons';
 
@@ -125,6 +124,11 @@
 	top: `gla-account-card__styled--align-top`,
 };
 
+const indicatorAlignStyleName = {
+	...alignStyleName,
+	toDetail: 'gla-account-card__indicator--align-to-detail',
+};
+
 /**
  * Renders a Card component with account info and status.
  *
@@ -142,6 +146,9 @@
  * @param {JSX.Element} [props.indicator] Indicator of actions or status on the right side of the card.
  * @param {'center'|'top'} [props.alignIcon='center'] Specify the vertical alignment of leading icon.
  * @param {'center'|'top'} [props.alignIndicator='center'] Specify the vertical alignment of `indicator`.
+ * @param {JSX.Element} [props.detail] Detail content below the card description.
+ * @param {boolean} [props.expandedDetail=false] Whether to expand the detail content.
+ * @param {JSX.Element} [props.actions] Actions content below the card detail.
  * @param {Array<JSX.Element>} [props.children] Children to be rendered if needs more content within the card.
  * @param {Object} [props.restProps] Props to be forwarded to Section.Card.
  */
@@ -156,12 +163,16 @@
 	alignIcon = 'center',
 	indicator,
 	alignIndicator = 'center',
+	detail,
+	expandedDetail = false,
+	actions,
 	children,
 	...restProps
 } ) {
 	const cardClassName = classnames(
 		'gla-account-card',
 		disabled ? 'gla-account-card--is-disabled' : false,
+		expandedDetail ? 'gla-account-card--is-expanded-detail' : false,
 		className
 	);
 
@@ -172,19 +183,15 @@
 
 	const indicatorClassName = classnames(
 		'gla-account-card__indicator',
-		alignStyleName[ alignIndicator ]
+		indicatorAlignStyleName[ alignIndicator ]
 	);
 
 	return (
 		<Section.Card className={ cardClassName } { ...restProps }>
 			<Section.Card.Body>
-				<Flex gap={ 4 }>
-					{ icon && (
-						<FlexItem className={ iconClassName }>
-							{ icon }
-						</FlexItem>
-					) }
-					<FlexBlock>
+				<div className="gla-account-card__body-layout">
+					{ icon && <div className={ iconClassName }>{ icon }</div> }
+					<div className="gla-account-card__subject">
 						{ title && (
 							<Subsection.Title className="gla-account-card__title">
 								{ title }
@@ -200,13 +207,23 @@
 								{ helper }
 							</div>
 						) }
-					</FlexBlock>
+					</div>
+					{ detail && (
+						<div className="gla-account-card__detail">
+							{ detail }
+						</div>
+					) }
 					{ indicator && (
-						<FlexItem className={ indicatorClassName }>
+						<div className={ indicatorClassName }>
 							{ indicator }
-						</FlexItem>
+						</div>
+					) }
+					{ actions && (
+						<div className="gla-account-card__actions">
+							{ actions }
+						</div>
 					) }
-				</Flex>
+				</div>
 			</Section.Card.Body>
 			{ children }
 		</Section.Card>

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

@@ -5,18 +5,60 @@
 		opacity: 0.5;
 	}
 
+	&--is-expanded-detail {
+		.gla-account-card__indicator {
+			grid-area: 1/3;
+		}
+
+		.gla-account-card__detail {
+			grid-area: 2/2/auto/span 2;
+		}
+	}
+
 	&__styled {
 		&--align-top {
 			align-self: flex-start;
 		}
 	}
 
+	&__body-layout {
+		display: grid;
+		grid-template-columns: auto 1fr auto;
+		align-items: center;
+	}
+
 	&__icon {
+		grid-area: 1/1/span 2;
+		margin-right: $grid-unit-20;
 		line-height: 0;
 	}
 
+	&__subject {
+		grid-area: 1/2;
+	}
+
+	&__indicator {
+		grid-area: 1/3/span 2;
+		margin-left: $grid-unit-20;
+
+		&--align-to-detail {
+			grid-area: 2/3;
+			margin-top: $grid-unit-15;
+		}
+	}
+
+	&__detail {
+		grid-area: 2/2;
+		margin-top: $grid-unit-15;
+	}
+
+	&__actions {
+		grid-area: 3/2/auto/span 2;
+		margin-top: $grid-unit-15;
+	}
+
 	&__title {
-		margin-bottom: $grid-unit-05;
+		margin: 0;
 		color: $black;
 	}
 
@@ -25,6 +67,7 @@
 		flex-direction: column;
 		align-items: flex-start;
 		gap: 1em;
+		margin-top: $grid-unit-05;
 		color: $gray-900;
 
 		> p {
@@ -65,11 +108,12 @@
 	}
 
 	@media (max-width: $break-small) {
-		.components-card__body > .components-flex {
+		&__body-layout {
+			display: flex;
 			flex-direction: column;
 			align-items: flex-start;
-			> .components-flex-block,
-			> .components-flex-item {
+
+			> div {
 				margin: $grid-unit-10;
 			}
 		}

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

@@ -20,6 +20,7 @@ import './index.scss';
  * @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 {boolean} [props.nonInteractive=false] If true, the select control is changed to non-interactive.
  * @param {*} [props.rest] Additional props passed to the `SelectControl` component.
  */
 const AppSelectControl = ( props ) => {
@@ -29,6 +30,7 @@ const AppSelectControl = ( props ) => {
 		onChange = noop,
 		value,
 		autoSelectFirstOption = false,
+		nonInteractive = false,
 		...rest
 	} = props;
 	const shouldAutoSelectOnceRef = useRef( autoSelectFirstOption === true );
@@ -51,22 +53,22 @@ const AppSelectControl = ( props ) => {
 		...rest,
 	};
 
-	const hasSingleValueStyle = autoSelectFirstOption && options?.length === 1;
-	if ( hasSingleValueStyle ) {
+	const isNonInteractive =
+		( autoSelectFirstOption && options?.length === 1 ) || nonInteractive;
+	if ( isNonInteractive ) {
 		selectProps = {
 			...selectProps,
+			readOnly: true,
+			style: {
+				pointerEvents: 'none',
+			},
 			suffix: ' ',
 			tabIndex: '-1',
-			readOnly: true,
 		};
 	}
 
 	return (
-		<div
-			className={ classNames( 'app-select-control', className, {
-				'app-select-control--has-single-value': hasSingleValueStyle,
-			} ) }
-		>
+		<div className={ classNames( 'app-select-control', className ) }>
 			<SelectControl { ...selectProps } />
 		</div>
 	);

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

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

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

@@ -0,0 +1,49 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import AppButton from '.~/components/app-button';
+import useEventPropertiesFilter from '.~/hooks/useEventPropertiesFilter';
+import { FILTER_ONBOARDING } from '.~/utils/tracks';
+
+/**
+ * Clicking on the button to connect an existing Google Ads account.
+ *
+ * @event gla_ads_account_connect_button_click
+ * @property {number} id The account ID to be connected.
+ * @property {string} [context] Indicates the place where the button is located.
+ * @property {string} [step] Indicates the step in the onboarding process.
+ */
+
+/**
+ * Google Ads account connection button.
+ *
+ * @param {Object} props Props.
+ * @param {number} props.accountID The Google Ads account ID to be connected.
+ * @param {Object} props.restProps Rest props. Forwarded to AppButton.
+ * @fires gla_ads_account_connect_button_click when "Connect" button is clicked.
+ * @return {JSX.Element} Google Ads connect button component.
+ */
+const ConnectButton = ( { accountID, ...restProps } ) => {
+	const getEventProps = useEventPropertiesFilter( FILTER_ONBOARDING );
+
+	return (
+		<AppButton
+			isSecondary
+			disabled={ ! accountID }
+			eventName="gla_ads_account_connect_button_click"
+			eventProps={ getEventProps( {
+				id: Number( accountID ),
+			} ) }
+			{ ...restProps }
+		>
+			{ __( 'Connect', 'google-listings-and-ads' ) }
+		</AppButton>
+	);
+};
+
+export default ConnectButton;

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

@@ -11,30 +11,20 @@ import { CardDivider } from '@wordpress/components';
 import AccountCard, { APPEARANCE } from '.~/components/account-card';
 import AppButton from '.~/components/app-button';
 import AppDocumentationLink from '.~/components/app-documentation-link';
+import ConnectButton from './connect-button';
 import ContentButtonLayout from '.~/components/content-button-layout';
 import LoadingLabel from '.~/components/loading-label';
 import Section from '.~/wcdl/section';
 import Subsection from '.~/wcdl/subsection';
 import useApiFetchCallback from '.~/hooks/useApiFetchCallback';
 import useDispatchCoreNotices from '.~/hooks/useDispatchCoreNotices';
 import useGoogleAdsAccount from '.~/hooks/useGoogleAdsAccount';
-import useEventPropertiesFilter from '.~/hooks/useEventPropertiesFilter';
 import AdsAccountSelectControl from '.~/components/ads-account-select-control';
 import { useAppDispatch } from '.~/data';
-import { FILTER_ONBOARDING } from '.~/utils/tracks';
 import './index.scss';
 
 /**
- * Clicking on the button to connect an existing Google Ads account.
- *
- * @event gla_ads_account_connect_button_click
- * @property {number} id The account ID to be connected.
- * @property {string} [context] Indicates the place where the button is located.
- * @property {string} [step] Indicates the step in the onboarding process.
- */
-
-/**
- * @fires gla_ads_account_connect_button_click when "Connect" button is clicked.
+ * Connect to an existing Google Ads account.
  * @fires gla_documentation_link_click with `{ context: 'setup-ads-connect-account', link_id: 'connect-sub-account', href: 'https://support.google.com/google-ads/answer/6139186' }`
  * @param {Object} props React props
  * @return {JSX.Element} {@link AccountCard} filled with content.
@@ -49,7 +39,6 @@ const ConnectAds = ( props ) => {
 		data: { id: value },
 	} );
 	const { refetchGoogleAdsAccount } = useGoogleAdsAccount();
-	const getEventProps = useEventPropertiesFilter( FILTER_ONBOARDING );
 	const { createNotice } = useDispatchCoreNotices();
 	const { fetchGoogleAdsAccountStatus } = useAppDispatch();
 
@@ -131,17 +120,10 @@ const ConnectAds = ( props ) => {
 							) }
 						/>
 					) : (
-						<AppButton
-							isSecondary
-							disabled={ ! value }
-							eventName="gla_ads_account_connect_button_click"
-							eventProps={ getEventProps( {
-								id: Number( value ),
-							} ) }
+						<ConnectButton
+							accountID={ value }
 							onClick={ handleConnectClick }
-						>
-							{ __( 'Connect', 'google-listings-and-ads' ) }
-						</AppButton>
+						/>
 					) }
 				</ContentButtonLayout>
 			</Section.Card.Body>

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

@@ -23,7 +23,7 @@ const AccountDetails = () => {
 		<>
 			<p>{ google.email }</p>
 			<p>
-				{ googleMCAccount.id > 0 &&
+				{ googleMCAccount?.id > 0 &&
 					sprintf(
 						// Translators: %s is the Merchant Center ID
 						__(
@@ -34,7 +34,7 @@ const AccountDetails = () => {
 					) }
 			</p>
 			<p>
-				{ googleAdsAccount.id > 0 &&
+				{ googleAdsAccount?.id > 0 &&
 					sprintf(
 						// Translators: %s is the Google Ads ID
 						__( 'Google Ads ID: %s', 'google-listings-and-ads' ),