From 9fa7d176fe63c440bbed55ad7185df7a683114c9 Mon Sep 17 00:00:00 2001
From: Gan Eng Chin <ecgan@users.noreply.github.com>
Date: Thu, 28 Oct 2021 02:31:11 +0800
Subject: [PATCH 1/9] Add wp-logo.svg.

---
 .../setup-accounts/wpcom-account-card/wp-logo.svg            | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 js/src/setup-mc/setup-stepper/setup-accounts/wpcom-account-card/wp-logo.svg

diff --git a/js/src/setup-mc/setup-stepper/setup-accounts/wpcom-account-card/wp-logo.svg b/js/src/setup-mc/setup-stepper/setup-accounts/wpcom-account-card/wp-logo.svg
new file mode 100644
index 0000000000..905023f000
--- /dev/null
+++ b/js/src/setup-mc/setup-stepper/setup-accounts/wpcom-account-card/wp-logo.svg
@@ -0,0 +1,5 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.16797 20.3329C3.16797 27.1241 7.11466 32.993 12.8377 35.7742L4.65341 13.3504C3.6723 15.5474 3.16612 17.9268 3.16797 20.3329ZM31.9077 19.4671C31.9077 17.3467 31.1461 15.8782 30.4928 14.7352C29.6231 13.322 28.8079 12.1251 28.8079 10.7118C28.8079 9.13466 30.0041 7.66653 31.689 7.66653C31.765 7.66653 31.8372 7.676 31.9113 7.68024C28.8588 4.8837 24.792 3.17627 20.3252 3.17627C14.3313 3.17627 9.05781 6.25161 5.98997 10.9097C6.39251 10.9218 6.77187 10.9302 7.09409 10.9302C8.88869 10.9302 11.6666 10.7125 11.6666 10.7125C12.5915 10.658 12.7006 12.0164 11.7766 12.1258C11.7766 12.1258 10.8472 12.2351 9.81293 12.2893L16.0609 30.8736L19.8156 19.6127L17.1425 12.2887C16.2186 12.2345 15.3433 12.1251 15.3433 12.1251C14.4188 12.0709 14.5271 10.6573 15.4517 10.7118C15.4517 10.7118 18.2851 10.9296 19.971 10.9296C21.7653 10.9296 24.5435 10.7118 24.5435 10.7118C25.4691 10.6573 25.5778 12.0158 24.6536 12.1251C24.6536 12.1251 23.7222 12.2345 22.6899 12.2887L28.8902 30.7322L30.6015 25.0135C31.3433 22.6404 31.9077 20.9359 31.9077 19.4671Z" fill="#21759B"/>
+<path d="M20.6263 21.8337L15.4785 36.7922C17.0524 37.2557 18.6846 37.4911 20.3253 37.4912C22.3233 37.4912 24.2393 37.1458 26.0228 36.5186C25.9752 36.4436 25.9344 36.3645 25.9007 36.2822L20.6263 21.8337ZM35.3801 12.1013C35.4539 12.6478 35.4957 13.2345 35.4957 13.8656C35.4957 15.6066 35.1705 17.5638 34.1911 20.011L28.9503 35.1634C34.051 32.189 37.4819 26.6628 37.4819 20.3332C37.4822 17.3503 36.7202 14.5453 35.3801 12.1013Z" fill="#21759B"/>
+<path d="M20.3244 0.333496C9.29658 0.333496 0.324219 9.3052 0.324219 20.333C0.324219 31.3621 9.29658 40.3335 20.3244 40.3335C31.3519 40.3335 40.3255 31.3621 40.3255 20.333C40.3252 9.3052 31.3519 0.333496 20.3244 0.333496ZM20.3244 39.4168C9.80228 39.4168 1.24127 30.8558 1.24127 20.333C1.24127 9.8109 9.80195 1.25055 20.3244 1.25055C30.8462 1.25055 39.4065 9.8109 39.4065 20.333C39.4065 30.8558 30.8462 39.4168 20.3244 39.4168Z" fill="#21759B"/>
+</svg>

From 4f82292dcaf25b61ee542c2fe099d33e3132ad2c Mon Sep 17 00:00:00 2001
From: Gan Eng Chin <ecgan@users.noreply.github.com>
Date: Thu, 28 Oct 2021 02:31:52 +0800
Subject: [PATCH 2/9] Add early test version of WPComAccountCard.

---
 .../setup-stepper/setup-accounts/index.js     |  2 +
 .../wpcom-account-card/index.js               | 70 +++++++++++++++++++
 2 files changed, 72 insertions(+)
 create mode 100644 js/src/setup-mc/setup-stepper/setup-accounts/wpcom-account-card/index.js

diff --git a/js/src/setup-mc/setup-stepper/setup-accounts/index.js b/js/src/setup-mc/setup-stepper/setup-accounts/index.js
index 0033041144..8c8e4b7319 100644
--- a/js/src/setup-mc/setup-stepper/setup-accounts/index.js
+++ b/js/src/setup-mc/setup-stepper/setup-accounts/index.js
@@ -20,6 +20,7 @@ import WordPressDotComAccount from './wordpressdotcom-account';
 import GoogleAccountCard from '.~/components/google-account-card';
 import GoogleMCAccount from './google-mc-account';
 import Faqs from './faqs';
+import WPComAccountCard from './wpcom-account-card';
 
 const SetupAccounts = ( props ) => {
 	const { onContinue = () => {} } = props;
@@ -63,6 +64,7 @@ const SetupAccounts = ( props ) => {
 			>
 				<VerticalGapLayout size="large">
 					<WordPressDotComAccount />
+					<WPComAccountCard />
 					<GoogleAccountCard disabled={ isGoogleAccountDisabled } />
 				</VerticalGapLayout>
 			</Section>
diff --git a/js/src/setup-mc/setup-stepper/setup-accounts/wpcom-account-card/index.js b/js/src/setup-mc/setup-stepper/setup-accounts/wpcom-account-card/index.js
new file mode 100644
index 0000000000..9fade8bf1b
--- /dev/null
+++ b/js/src/setup-mc/setup-stepper/setup-accounts/wpcom-account-card/index.js
@@ -0,0 +1,70 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import AccountCard from '.~/components/account-card';
+import AppButton from '.~/components/app-button';
+import useDispatchCoreNotices from '.~/hooks/useDispatchCoreNotices';
+import useApiFetchCallback from '.~/hooks/useApiFetchCallback';
+import wpLogoURL from './wp-logo.svg';
+
+const WPComAccountCard = () => {
+	const { createNotice } = useDispatchCoreNotices();
+	const [ fetchJetpackConnect, { loading, data } ] = useApiFetchCallback( {
+		path: '/wc/gla/jetpack/connect',
+	} );
+
+	const handleConnectClick = async () => {
+		try {
+			const d = await fetchJetpackConnect();
+			window.location.href = d.url;
+		} catch ( error ) {
+			createNotice(
+				'error',
+				__(
+					'Unable to connect your WordPress.com account. Please try again later.',
+					'google-listings-and-ads'
+				)
+			);
+		}
+	};
+
+	return (
+		<AccountCard
+			appearance={ {
+				icon: (
+					<img
+						src={ wpLogoURL }
+						alt={ __(
+							'WordPress.com Logo',
+							'google-listings-and-ads'
+						) }
+						width="40"
+						height="40"
+					/>
+				),
+				title: 'WordPress.com',
+			} }
+			description={ __(
+				'Required to connect with Google',
+				'google-listings-and-ads'
+			) }
+			indicator={
+				<AppButton
+					isSecondary
+					loading={ loading || data }
+					eventName="gla_wordpress_account_connect_button_click"
+					onClick={ handleConnectClick }
+				>
+					{ __( 'Connect', 'google-listings-and-ads' ) }
+				</AppButton>
+			}
+		/>
+	);
+};
+
+export default WPComAccountCard;

From 70ca60b654c51191d887ea83953d11ab5caaecd7 Mon Sep 17 00:00:00 2001
From: Gan Eng Chin <ecgan@users.noreply.github.com>
Date: Fri, 29 Oct 2021 01:26:57 +0800
Subject: [PATCH 3/9] Move WPComAccountCard.

---
 js/src/setup-mc/setup-stepper/setup-accounts/index.js           | 2 +-
 .../{ => wordpressdotcom-account}/wpcom-account-card/index.js   | 0
 .../wpcom-account-card/wp-logo.svg                              | 0
 3 files changed, 1 insertion(+), 1 deletion(-)
 rename js/src/setup-mc/setup-stepper/setup-accounts/{ => wordpressdotcom-account}/wpcom-account-card/index.js (100%)
 rename js/src/setup-mc/setup-stepper/setup-accounts/{ => wordpressdotcom-account}/wpcom-account-card/wp-logo.svg (100%)

diff --git a/js/src/setup-mc/setup-stepper/setup-accounts/index.js b/js/src/setup-mc/setup-stepper/setup-accounts/index.js
index 8c8e4b7319..88187d31c9 100644
--- a/js/src/setup-mc/setup-stepper/setup-accounts/index.js
+++ b/js/src/setup-mc/setup-stepper/setup-accounts/index.js
@@ -20,7 +20,7 @@ import WordPressDotComAccount from './wordpressdotcom-account';
 import GoogleAccountCard from '.~/components/google-account-card';
 import GoogleMCAccount from './google-mc-account';
 import Faqs from './faqs';
-import WPComAccountCard from './wpcom-account-card';
+import WPComAccountCard from './wordpressdotcom-account/wpcom-account-card';
 
 const SetupAccounts = ( props ) => {
 	const { onContinue = () => {} } = props;
diff --git a/js/src/setup-mc/setup-stepper/setup-accounts/wpcom-account-card/index.js b/js/src/setup-mc/setup-stepper/setup-accounts/wordpressdotcom-account/wpcom-account-card/index.js
similarity index 100%
rename from js/src/setup-mc/setup-stepper/setup-accounts/wpcom-account-card/index.js
rename to js/src/setup-mc/setup-stepper/setup-accounts/wordpressdotcom-account/wpcom-account-card/index.js
diff --git a/js/src/setup-mc/setup-stepper/setup-accounts/wpcom-account-card/wp-logo.svg b/js/src/setup-mc/setup-stepper/setup-accounts/wordpressdotcom-account/wpcom-account-card/wp-logo.svg
similarity index 100%
rename from js/src/setup-mc/setup-stepper/setup-accounts/wpcom-account-card/wp-logo.svg
rename to js/src/setup-mc/setup-stepper/setup-accounts/wordpressdotcom-account/wpcom-account-card/wp-logo.svg

From 86705dab9412b3cac61bd07cdb6159afe92271b5 Mon Sep 17 00:00:00 2001
From: Gan Eng Chin <ecgan@users.noreply.github.com>
Date: Fri, 29 Oct 2021 01:34:15 +0800
Subject: [PATCH 4/9] Code refactor with ConnectWPComAccountCard.

---
 .../setup-stepper/setup-accounts/index.js     |  4 +-
 .../connect-wpcom-account-card.js             | 55 +++++++++++++++++++
 .../wpcom-account-card/index.js               | 40 +-------------
 3 files changed, 59 insertions(+), 40 deletions(-)
 create mode 100644 js/src/setup-mc/setup-stepper/setup-accounts/wordpressdotcom-account/connect-wpcom-account-card.js

diff --git a/js/src/setup-mc/setup-stepper/setup-accounts/index.js b/js/src/setup-mc/setup-stepper/setup-accounts/index.js
index 88187d31c9..68ec858e97 100644
--- a/js/src/setup-mc/setup-stepper/setup-accounts/index.js
+++ b/js/src/setup-mc/setup-stepper/setup-accounts/index.js
@@ -20,7 +20,7 @@ import WordPressDotComAccount from './wordpressdotcom-account';
 import GoogleAccountCard from '.~/components/google-account-card';
 import GoogleMCAccount from './google-mc-account';
 import Faqs from './faqs';
-import WPComAccountCard from './wordpressdotcom-account/wpcom-account-card';
+import ConnectWPComAccountCard from './wordpressdotcom-account/connect-wpcom-account-card';
 
 const SetupAccounts = ( props ) => {
 	const { onContinue = () => {} } = props;
@@ -64,7 +64,7 @@ const SetupAccounts = ( props ) => {
 			>
 				<VerticalGapLayout size="large">
 					<WordPressDotComAccount />
-					<WPComAccountCard />
+					<ConnectWPComAccountCard />
 					<GoogleAccountCard disabled={ isGoogleAccountDisabled } />
 				</VerticalGapLayout>
 			</Section>
diff --git a/js/src/setup-mc/setup-stepper/setup-accounts/wordpressdotcom-account/connect-wpcom-account-card.js b/js/src/setup-mc/setup-stepper/setup-accounts/wordpressdotcom-account/connect-wpcom-account-card.js
new file mode 100644
index 0000000000..c938d08885
--- /dev/null
+++ b/js/src/setup-mc/setup-stepper/setup-accounts/wordpressdotcom-account/connect-wpcom-account-card.js
@@ -0,0 +1,55 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import AppButton from '.~/components/app-button';
+import useDispatchCoreNotices from '.~/hooks/useDispatchCoreNotices';
+import useApiFetchCallback from '.~/hooks/useApiFetchCallback';
+import WPComAccountCard from './wpcom-account-card';
+
+const ConnectWPComAccountCard = () => {
+	const { createNotice } = useDispatchCoreNotices();
+	const [ fetchJetpackConnect, { loading, data } ] = useApiFetchCallback( {
+		path: '/wc/gla/jetpack/connect',
+	} );
+
+	const handleConnectClick = async () => {
+		try {
+			const d = await fetchJetpackConnect();
+			window.location.href = d.url;
+		} catch ( error ) {
+			createNotice(
+				'error',
+				__(
+					'Unable to connect your WordPress.com account. Please try again later.',
+					'google-listings-and-ads'
+				)
+			);
+		}
+	};
+
+	return (
+		<WPComAccountCard
+			description={ __(
+				'Required to connect with Google',
+				'google-listings-and-ads'
+			) }
+			indicator={
+				<AppButton
+					isSecondary
+					loading={ loading || data }
+					eventName="gla_wordpress_account_connect_button_click"
+					onClick={ handleConnectClick }
+				>
+					{ __( 'Connect', 'google-listings-and-ads' ) }
+				</AppButton>
+			}
+		/>
+	);
+};
+
+export default ConnectWPComAccountCard;
diff --git a/js/src/setup-mc/setup-stepper/setup-accounts/wordpressdotcom-account/wpcom-account-card/index.js b/js/src/setup-mc/setup-stepper/setup-accounts/wordpressdotcom-account/wpcom-account-card/index.js
index 9fade8bf1b..11f1fc99cf 100644
--- a/js/src/setup-mc/setup-stepper/setup-accounts/wordpressdotcom-account/wpcom-account-card/index.js
+++ b/js/src/setup-mc/setup-stepper/setup-accounts/wordpressdotcom-account/wpcom-account-card/index.js
@@ -7,32 +7,9 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import AccountCard from '.~/components/account-card';
-import AppButton from '.~/components/app-button';
-import useDispatchCoreNotices from '.~/hooks/useDispatchCoreNotices';
-import useApiFetchCallback from '.~/hooks/useApiFetchCallback';
 import wpLogoURL from './wp-logo.svg';
 
-const WPComAccountCard = () => {
-	const { createNotice } = useDispatchCoreNotices();
-	const [ fetchJetpackConnect, { loading, data } ] = useApiFetchCallback( {
-		path: '/wc/gla/jetpack/connect',
-	} );
-
-	const handleConnectClick = async () => {
-		try {
-			const d = await fetchJetpackConnect();
-			window.location.href = d.url;
-		} catch ( error ) {
-			createNotice(
-				'error',
-				__(
-					'Unable to connect your WordPress.com account. Please try again later.',
-					'google-listings-and-ads'
-				)
-			);
-		}
-	};
-
+const WPComAccountCard = ( props ) => {
 	return (
 		<AccountCard
 			appearance={ {
@@ -49,20 +26,7 @@ const WPComAccountCard = () => {
 				),
 				title: 'WordPress.com',
 			} }
-			description={ __(
-				'Required to connect with Google',
-				'google-listings-and-ads'
-			) }
-			indicator={
-				<AppButton
-					isSecondary
-					loading={ loading || data }
-					eventName="gla_wordpress_account_connect_button_click"
-					onClick={ handleConnectClick }
-				>
-					{ __( 'Connect', 'google-listings-and-ads' ) }
-				</AppButton>
-			}
+			{ ...props }
 		/>
 	);
 };

From 54d043a47c6cff1721e8129821bc78cc55673379 Mon Sep 17 00:00:00 2001
From: Gan Eng Chin <ecgan@users.noreply.github.com>
Date: Fri, 29 Oct 2021 01:49:43 +0800
Subject: [PATCH 5/9] Add ConnectedWPComAccountCard.

---
 .../connected-wpcom-account-card.js           | 25 +++++++++++++++++++
 1 file changed, 25 insertions(+)
 create mode 100644 js/src/setup-mc/setup-stepper/setup-accounts/wordpressdotcom-account/connected-wpcom-account-card.js

diff --git a/js/src/setup-mc/setup-stepper/setup-accounts/wordpressdotcom-account/connected-wpcom-account-card.js b/js/src/setup-mc/setup-stepper/setup-accounts/wordpressdotcom-account/connected-wpcom-account-card.js
new file mode 100644
index 0000000000..eb9e73abe1
--- /dev/null
+++ b/js/src/setup-mc/setup-stepper/setup-accounts/wordpressdotcom-account/connected-wpcom-account-card.js
@@ -0,0 +1,25 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import getConnectedJetpackInfo from '.~/utils/getConnectedJetpackInfo';
+import WPComAccountCard from './wpcom-account-card';
+
+const ConnectedWPComAccountCard = ( { jetpack } ) => {
+	return (
+		<WPComAccountCard
+			description={ getConnectedJetpackInfo( jetpack ) }
+			indicator={
+				<div>
+					TODO: { __( 'Connected', 'google-listings-and-ads' ) }
+				</div>
+			}
+		/>
+	);
+};
+
+export default ConnectedWPComAccountCard;

From 828c3cf14020ff12ea1a052bb1a2e5428aba6ef4 Mon Sep 17 00:00:00 2001
From: Gan Eng Chin <ecgan@users.noreply.github.com>
Date: Fri, 29 Oct 2021 01:54:23 +0800
Subject: [PATCH 6/9] Code refactor with new component structure.

Remove old CardContent and ConnectAccount, and use new ConnectWPComAccountCard and ConnectedWPComAccountCard instead.

Also simplify code by passing down jetpack as props to WordPressDotComAccount, so we don't need to use useJetpackAccount hook and check for isResolving, it was never called anyway because the check has been done in SetupAccounts.
---
 .../setup-stepper/setup-accounts/index.js     |  4 +-
 .../wordpressdotcom-account/card-content.js   | 46 ----------------
 .../connect-account.js                        | 55 -------------------
 .../wordpressdotcom-account/index.js          | 18 +++---
 4 files changed, 9 insertions(+), 114 deletions(-)
 delete mode 100644 js/src/setup-mc/setup-stepper/setup-accounts/wordpressdotcom-account/card-content.js
 delete mode 100644 js/src/setup-mc/setup-stepper/setup-accounts/wordpressdotcom-account/connect-account.js

diff --git a/js/src/setup-mc/setup-stepper/setup-accounts/index.js b/js/src/setup-mc/setup-stepper/setup-accounts/index.js
index 68ec858e97..807251fccc 100644
--- a/js/src/setup-mc/setup-stepper/setup-accounts/index.js
+++ b/js/src/setup-mc/setup-stepper/setup-accounts/index.js
@@ -20,7 +20,6 @@ import WordPressDotComAccount from './wordpressdotcom-account';
 import GoogleAccountCard from '.~/components/google-account-card';
 import GoogleMCAccount from './google-mc-account';
 import Faqs from './faqs';
-import ConnectWPComAccountCard from './wordpressdotcom-account/connect-wpcom-account-card';
 
 const SetupAccounts = ( props ) => {
 	const { onContinue = () => {} } = props;
@@ -63,8 +62,7 @@ const SetupAccounts = ( props ) => {
 				) }
 			>
 				<VerticalGapLayout size="large">
-					<WordPressDotComAccount />
-					<ConnectWPComAccountCard />
+					<WordPressDotComAccount jetpack={ jetpack } />
 					<GoogleAccountCard disabled={ isGoogleAccountDisabled } />
 				</VerticalGapLayout>
 			</Section>
diff --git a/js/src/setup-mc/setup-stepper/setup-accounts/wordpressdotcom-account/card-content.js b/js/src/setup-mc/setup-stepper/setup-accounts/wordpressdotcom-account/card-content.js
deleted file mode 100644
index 392f5480d3..0000000000
--- a/js/src/setup-mc/setup-stepper/setup-accounts/wordpressdotcom-account/card-content.js
+++ /dev/null
@@ -1,46 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import getConnectedJetpackInfo from '.~/utils/getConnectedJetpackInfo';
-import AppSpinner from '.~/components/app-spinner';
-import TitleButtonLayout from '.~/components/title-button-layout';
-import ConnectAccount from './connect-account';
-import useJetpackAccount from '.~/hooks/useJetpackAccount';
-
-const CardContent = () => {
-	const { jetpack, isResolving } = useJetpackAccount();
-
-	if ( isResolving ) {
-		return <AppSpinner />;
-	}
-
-	if ( ! jetpack ) {
-		return (
-			<TitleButtonLayout
-				title={ __(
-					'Error while loading WordPress.com account info',
-					'google-listings-and-ads'
-				) }
-			/>
-		);
-	}
-
-	if ( jetpack.active === 'yes' ) {
-		return (
-			<TitleButtonLayout title={ getConnectedJetpackInfo( jetpack ) } />
-		);
-	}
-
-	if ( jetpack.active === 'no' ) {
-		return <ConnectAccount />;
-	}
-
-	return null;
-};
-
-export default CardContent;
diff --git a/js/src/setup-mc/setup-stepper/setup-accounts/wordpressdotcom-account/connect-account.js b/js/src/setup-mc/setup-stepper/setup-accounts/wordpressdotcom-account/connect-account.js
deleted file mode 100644
index db7dc9dd42..0000000000
--- a/js/src/setup-mc/setup-stepper/setup-accounts/wordpressdotcom-account/connect-account.js
+++ /dev/null
@@ -1,55 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import AppButton from '.~/components/app-button';
-import TitleButtonLayout from '.~/components/title-button-layout';
-import useDispatchCoreNotices from '.~/hooks/useDispatchCoreNotices';
-import useApiFetchCallback from '.~/hooks/useApiFetchCallback';
-
-const ConnectAccount = () => {
-	const { createNotice } = useDispatchCoreNotices();
-	const [ fetchJetpackConnect, { loading, data } ] = useApiFetchCallback( {
-		path: '/wc/gla/jetpack/connect',
-	} );
-
-	const handleConnectClick = async () => {
-		try {
-			const d = await fetchJetpackConnect();
-			window.location.href = d.url;
-		} catch ( error ) {
-			createNotice(
-				'error',
-				__(
-					'Unable to connect your WordPress.com account. Please try again later.',
-					'google-listings-and-ads'
-				)
-			);
-		}
-	};
-
-	return (
-		<TitleButtonLayout
-			title={ __(
-				'Connect your WordPress.com account',
-				'google-listings-and-ads'
-			) }
-			button={
-				<AppButton
-					isSecondary
-					loading={ loading || data }
-					eventName="gla_wordpress_account_connect_button_click"
-					onClick={ handleConnectClick }
-				>
-					{ __( 'Connect', 'google-listings-and-ads' ) }
-				</AppButton>
-			}
-		/>
-	);
-};
-
-export default ConnectAccount;
diff --git a/js/src/setup-mc/setup-stepper/setup-accounts/wordpressdotcom-account/index.js b/js/src/setup-mc/setup-stepper/setup-accounts/wordpressdotcom-account/index.js
index 76a4df974a..ea8116945c 100644
--- a/js/src/setup-mc/setup-stepper/setup-accounts/wordpressdotcom-account/index.js
+++ b/js/src/setup-mc/setup-stepper/setup-accounts/wordpressdotcom-account/index.js
@@ -1,17 +1,15 @@
 /**
  * Internal dependencies
  */
-import Section from '.~/wcdl/section';
-import CardContent from './card-content';
+import ConnectedWPComAccountCard from './connected-wpcom-account-card';
+import ConnectWPComAccountCard from './connect-wpcom-account-card';
 
-const WordPressDotComAccount = () => {
-	return (
-		<Section.Card>
-			<Section.Card.Body>
-				<CardContent />
-			</Section.Card.Body>
-		</Section.Card>
-	);
+const WordPressDotComAccount = ( { jetpack } ) => {
+	if ( jetpack.active === 'yes' ) {
+		return <ConnectedWPComAccountCard jetpack={ jetpack } />;
+	}
+
+	return <ConnectWPComAccountCard />;
 };
 
 export default WordPressDotComAccount;

From 6ffab4f9d210641337f576deb38f8781d6b20239 Mon Sep 17 00:00:00 2001
From: Gan Eng Chin <ecgan@users.noreply.github.com>
Date: Fri, 29 Oct 2021 02:39:03 +0800
Subject: [PATCH 7/9] Display ConnectedIconLabel in ConnectedWPComAccountCard.

---
 .../components/connected-icon-label/index.js  | 31 +++++++++++++++++++
 .../connected-icon-label/index.scss           |  8 +++++
 .../connected-wpcom-account-card.js           | 12 ++-----
 3 files changed, 41 insertions(+), 10 deletions(-)
 create mode 100644 js/src/components/connected-icon-label/index.js
 create mode 100644 js/src/components/connected-icon-label/index.scss

diff --git a/js/src/components/connected-icon-label/index.js b/js/src/components/connected-icon-label/index.js
new file mode 100644
index 0000000000..e355a59ef6
--- /dev/null
+++ b/js/src/components/connected-icon-label/index.js
@@ -0,0 +1,31 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import { __ } from '@wordpress/i18n';
+import { Flex, FlexItem } from '@wordpress/components';
+import GridiconCheckmarkCircle from 'gridicons/dist/checkmark-circle';
+
+/**
+ * Internal dependencies
+ */
+import './index.scss';
+
+const ConnectedIconLabel = ( props ) => {
+	const { className } = props;
+
+	return (
+		<div className={ classnames( 'gla-connected-icon-label', className ) }>
+			<Flex align="center" gap={ 1 }>
+				<FlexItem>
+					<GridiconCheckmarkCircle />
+				</FlexItem>
+				<FlexItem>
+					{ __( 'Connected', 'google-listings-and-ads' ) }
+				</FlexItem>
+			</Flex>
+		</div>
+	);
+};
+
+export default ConnectedIconLabel;
diff --git a/js/src/components/connected-icon-label/index.scss b/js/src/components/connected-icon-label/index.scss
new file mode 100644
index 0000000000..f97feb40d5
--- /dev/null
+++ b/js/src/components/connected-icon-label/index.scss
@@ -0,0 +1,8 @@
+.gla-connected-icon-label {
+	fill: currentColor;
+	color: #23A713;
+
+	svg {
+		display: block;
+	}
+}
diff --git a/js/src/setup-mc/setup-stepper/setup-accounts/wordpressdotcom-account/connected-wpcom-account-card.js b/js/src/setup-mc/setup-stepper/setup-accounts/wordpressdotcom-account/connected-wpcom-account-card.js
index eb9e73abe1..5a1afa2684 100644
--- a/js/src/setup-mc/setup-stepper/setup-accounts/wordpressdotcom-account/connected-wpcom-account-card.js
+++ b/js/src/setup-mc/setup-stepper/setup-accounts/wordpressdotcom-account/connected-wpcom-account-card.js
@@ -1,23 +1,15 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-
 /**
  * Internal dependencies
  */
 import getConnectedJetpackInfo from '.~/utils/getConnectedJetpackInfo';
 import WPComAccountCard from './wpcom-account-card';
+import ConnectedIconLabel from '.~/components/connected-icon-label';
 
 const ConnectedWPComAccountCard = ( { jetpack } ) => {
 	return (
 		<WPComAccountCard
 			description={ getConnectedJetpackInfo( jetpack ) }
-			indicator={
-				<div>
-					TODO: { __( 'Connected', 'google-listings-and-ads' ) }
-				</div>
-			}
+			indicator={ <ConnectedIconLabel /> }
 		/>
 	);
 };

From c21b63dd233e816b68b8372762959da3403342f1 Mon Sep 17 00:00:00 2001
From: Gan Eng Chin <ecgan@users.noreply.github.com>
Date: Fri, 29 Oct 2021 02:57:35 +0800
Subject: [PATCH 8/9] Fix css linting.

---
 js/src/components/connected-icon-label/index.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/src/components/connected-icon-label/index.scss b/js/src/components/connected-icon-label/index.scss
index f97feb40d5..441efedd7e 100644
--- a/js/src/components/connected-icon-label/index.scss
+++ b/js/src/components/connected-icon-label/index.scss
@@ -1,6 +1,6 @@
 .gla-connected-icon-label {
 	fill: currentColor;
-	color: #23A713;
+	color: #23a713;
 
 	svg {
 		display: block;

From c0e5b96e2026b40c760c1cecfe33ef127d571ec2 Mon Sep 17 00:00:00 2001
From: Gan Eng Chin <ecgan@users.noreply.github.com>
Date: Sat, 30 Oct 2021 02:02:37 +0800
Subject: [PATCH 9/9] Remove unnecessary div in ConnectedIconLabel.

---
 .../components/connected-icon-label/index.js  | 22 ++++++++++---------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/js/src/components/connected-icon-label/index.js b/js/src/components/connected-icon-label/index.js
index e355a59ef6..c25836ede5 100644
--- a/js/src/components/connected-icon-label/index.js
+++ b/js/src/components/connected-icon-label/index.js
@@ -15,16 +15,18 @@ const ConnectedIconLabel = ( props ) => {
 	const { className } = props;
 
 	return (
-		<div className={ classnames( 'gla-connected-icon-label', className ) }>
-			<Flex align="center" gap={ 1 }>
-				<FlexItem>
-					<GridiconCheckmarkCircle />
-				</FlexItem>
-				<FlexItem>
-					{ __( 'Connected', 'google-listings-and-ads' ) }
-				</FlexItem>
-			</Flex>
-		</div>
+		<Flex
+			className={ classnames( 'gla-connected-icon-label', className ) }
+			align="center"
+			gap={ 1 }
+		>
+			<FlexItem>
+				<GridiconCheckmarkCircle />
+			</FlexItem>
+			<FlexItem>
+				{ __( 'Connected', 'google-listings-and-ads' ) }
+			</FlexItem>
+		</Flex>
 	);
 };