Onboarding: Connect to existing Ads account in Google Accounts Card

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 );
@@ -52,12 +54,15 @@ const AppSelectControl = ( props ) => {
 	};
 
 	const hasSingleValueStyle = autoSelectFirstOption && options?.length === 1;
-	if ( hasSingleValueStyle ) {
+	if ( hasSingleValueStyle || nonInteractive ) {
 		selectProps = {
 			...selectProps,
 			suffix: ' ',
-			tabIndex: '-1',
+			style: {
+				pointerEvents: 'none',
+			},
 			readOnly: true,
+			tabIndex: -1,
 		};
 	}
 

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.
+ */
+
+/**
+ * Connect CTA component.
+ *
+ * @param {Object} props Props.
+ * @param {Function} props.handleConnectClick Callback to handle the connect click.
+ * @param {string} props.value Connected account ID.
+ * @fires gla_ads_account_connect_button_click when "Connect" button is clicked.
+ * @return {JSX.Element} Connect CTA component.
+ */
+const ConnectButton = ( { handleConnectClick, value } ) => {
+	const getEventProps = useEventPropertiesFilter( FILTER_ONBOARDING );
+
+	return (
+		<AppButton
+			isSecondary
+			disabled={ ! value }
+			eventName="gla_ads_account_connect_button_click"
+			eventProps={ getEventProps( {
+				id: Number( value ),
+			} ) }
+			onClick={ handleConnectClick }
+		>
+			{ __( 'Connect', 'google-listings-and-ads' ) }
+		</AppButton>
+	);
+};
+
+export default ConnectButton;

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

@@ -11,17 +11,16 @@ 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';
 
 /**
@@ -49,7 +48,6 @@ const ConnectAds = ( props ) => {
 		data: { id: value },
 	} );
 	const { refetchGoogleAdsAccount } = useGoogleAdsAccount();
-	const getEventProps = useEventPropertiesFilter( FILTER_ONBOARDING );
 	const { createNotice } = useDispatchCoreNotices();
 	const { fetchGoogleAdsAccountStatus } = useAppDispatch();
 
@@ -131,17 +129,10 @@ const ConnectAds = ( props ) => {
 							) }
 						/>
 					) : (
-						<AppButton
-							isSecondary
-							disabled={ ! value }
-							eventName="gla_ads_account_connect_button_click"
-							eventProps={ getEventProps( {
-								id: Number( value ),
-							} ) }
-							onClick={ handleConnectClick }
-						>
-							{ __( 'Connect', 'google-listings-and-ads' ) }
-						</AppButton>
+						<ConnectButton
+							handleConnectClick={ handleConnectClick }
+							value={ value }
+						/>
 					) }
 				</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' ),

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

@@ -0,0 +1,50 @@
+/**
+ * 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 Props.
+ * @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 {string} [props.className] Additional class names for the account card.
+ * @return {JSX.Element} ConnectAccountCard component.
+ */
+const ConnectAccountCard = ( {
+	title,
+	helperText,
+	body,
+	footer,
+	className,
+} ) => {
+	return (
+		<AccountCard
+			className={ classNames(
+				'gla-google-combo-service-account-card',
+				className
+			) }
+			title={ title }
+			helper={ helperText }
+		>
+			<Section.Card.Body className="gla-google-combo-service-account-card__body">
+				{ body }
+			</Section.Card.Body>
+			<Section.Card.Footer className="gla-google-combo-service-account-card__footer">
+				{ footer }
+			</Section.Card.Footer>
+		</AccountCard>
+	);
+};
+
+export default ConnectAccountCard;

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

@@ -0,0 +1,33 @@
+.gla-google-combo-service-account-card {
+	padding: var(--large-gap);
+
+	> div {
+		display: flex;
+		flex-direction: column;
+		gap: calc(var(--main-gap) / 2);
+	}
+
+	.wcdl-section-card-body,
+	.gla-google-combo-service-account-card__body {
+		padding: 0;
+
+		.app-select-control {
+			flex-grow: 1;
+		}
+	}
+
+	.gla-google-combo-service-account-card__footer {
+		border: 0;
+		padding: 0;
+
+		.app-button,
+		.components-button.is-tertiary:hover:not(:disabled,[aria-disabled="true"]) {
+			background: none;
+			padding-left: 0;
+		}
+	}
+
+	.gla-connected-icon-label {
+		flex-basis: content;
+	}
+}

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

@@ -0,0 +1,61 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import AdsAccountSelectControl from '.~/components/ads-account-select-control';
+import ContentButtonLayout from '.~/components/content-button-layout';
+import ConnectButton from '.~/components/google-ads-account-card/connect-ads/connect-button';
+import LoadingLabel from '.~/components/loading-label/loading-label';
+import ConnectedIconLabel from '.~/components/connected-icon-label';
+
+/**
+ * ConnectAdsBody component.
+ *
+ * @param {Object} props Props.
+ * @param {boolean} props.isConnected Whether the account is connected.
+ * @param {Function} props.handleConnectClick Callback to handle the connect click.
+ * @param {boolean} props.isLoading Whether the card is in a loading state.
+ * @param {Function} props.setValue Callback to set the value.
+ * @param {string} props.value Ads account ID.
+ * @return {JSX.Element} Body component.
+ */
+const ConnectAdsBody = ( {
+	isConnected,
+	handleConnectClick,
+	isLoading,
+	setValue,
+	value,
+} ) => {
+	return (
+		<ContentButtonLayout>
+			<AdsAccountSelectControl
+				value={ value }
+				onChange={ setValue }
+				autoSelectFirstOption={ true }
+				nonInteractive={ isConnected }
+			/>
+			{ isLoading ? (
+				<LoadingLabel
+					text={ __( 'Connecting…', 'google-listings-and-ads' ) }
+				/>
+			) : (
+				<>
+					{ isConnected ? (
+						<ConnectedIconLabel />
+					) : (
+						<ConnectButton
+							handleConnectClick={ handleConnectClick }
+							value={ value }
+						/>
+					) }
+				</>
+			) }
+		</ContentButtonLayout>
+	);
+};
+
+export default ConnectAdsBody;

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

@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import AppButton from '.~/components/app-button';
+import DisconnectAccount from '.~/components/google-ads-account-card/disconnect-account';
+
+/**
+ * Footer component.
+ *
+ * @return {JSX.Element} Footer component.
+ */
+const ConnectAdsFooter = ( { isConnected } ) => {
+	// If the account is connected, show the disconnect button.
+	if ( isConnected ) {
+		return <DisconnectAccount />;
+	}
+
+	return (
+		<AppButton isTertiary>
+			{ __(
+				'Or, create a new Google Ads account',
+				'google-listings-and-ads'
+			) }
+		</AppButton>
+	);
+};
+
+export default ConnectAdsFooter;