From fea64c6e9a35c4948e81374dc5f09e2402b6561f Mon Sep 17 00:00:00 2001
From: asvinb <asvin.balloo@gmail.com>
Date: Wed, 6 Nov 2024 16:22:29 +0400
Subject: [PATCH] Address CR feedback.

---
 .../connect-ads/connect-ads.js                | 24 ++++++++++---------
 .../connected-google-combo-account-card.js    |  6 +++--
 2 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/js/src/components/google-combo-account-card/connect-ads/connect-ads.js b/js/src/components/google-combo-account-card/connect-ads/connect-ads.js
index f0ec7731af..0800d4d3eb 100644
--- a/js/src/components/google-combo-account-card/connect-ads/connect-ads.js
+++ b/js/src/components/google-combo-account-card/connect-ads/connect-ads.js
@@ -12,7 +12,6 @@ import ConnectAdsFooter from './connect-ads-footer';
 import ConfirmCreateModal from './confirm-create-modal';
 import LoadingLabel from '.~/components/loading-label';
 import useApiFetchCallback from '.~/hooks/useApiFetchCallback';
-import useUpsertAdsAccount from '.~/hooks/useUpsertAdsAccount';
 import useDispatchCoreNotices from '.~/hooks/useDispatchCoreNotices';
 import useExistingGoogleAdsAccounts from '.~/hooks/useExistingGoogleAdsAccounts';
 import useGoogleAdsAccount from '.~/hooks/useGoogleAdsAccount';
@@ -26,10 +25,12 @@ import ConnectButton from '.~/components/google-ads-account-card/connect-ads/con
  * ConnectAds component renders an account card to connect to an existing Google Ads account.
  *
  * @param {Object} props Component props.
- * @param {boolean} props.finalizeAdsAccountCreation Whether the user is in the process of finalizing the Ads account creation, i.e after the user has claimed the account and the step is conversion_action.
+ * @param {boolean} props.isConnecting Whether the user is in the process of finalizing the Ads account creation, i.e after the user has claimed the account and the step is conversion_action.
+ * @param {boolean} props.isCreating Whether the user is in the process of creating a new Ads account.
+ * @param {Function} props.onCreate A callback to fire when creating a new account.
  * @return {JSX.Element} {@link AccountCard} filled with content.
  */
-const ConnectAds = ( { finalizeAdsAccountCreation } ) => {
+const ConnectAds = ( { isConnecting, isCreating, onCreate } ) => {
 	const [ value, setValue ] = useState();
 	const [ isLoading, setLoading ] = useState( false );
 	const { createNotice } = useDispatchCoreNotices();
@@ -38,14 +39,16 @@ const ConnectAds = ( { finalizeAdsAccountCreation } ) => {
 	const [ showCreateNewModal, setShowCreateNewModal ] = useState( false );
 	const { existingAccounts: accounts, hasFinishedResolution } =
 		useExistingGoogleAdsAccounts();
-	const { googleAdsAccount, refetchGoogleAdsAccount } = useGoogleAdsAccount();
+	const {
+		googleAdsAccount,
+		refetchGoogleAdsAccount,
+		hasFinishedResolution: hasResolvedGoogleAdsAccount,
+	} = useGoogleAdsAccount();
 	const [ connectGoogleAdsAccount ] = useApiFetchCallback( {
 		path: '/wc/gla/ads/accounts',
 		method: 'POST',
 		data: { id: value },
 	} );
-	const [ upsertAdsAccount, { loading: creatingNewAccount } ] =
-		useUpsertAdsAccount();
 
 	const onCreateNew = () => {
 		setShowCreateNewModal( true );
@@ -57,7 +60,7 @@ const ConnectAds = ( { finalizeAdsAccountCreation } ) => {
 
 	const handleOnContinue = async () => {
 		setShowCreateNewModal( false );
-		await upsertAdsAccount();
+		await onCreate();
 	};
 
 	useEffect( () => {
@@ -94,7 +97,7 @@ const ConnectAds = ( { finalizeAdsAccountCreation } ) => {
 	}
 
 	const getIndicator = () => {
-		if ( ! hasFinishedResolution ) {
+		if ( ! hasFinishedResolution || ! hasResolvedGoogleAdsAccount ) {
 			return <LoadingLabel />;
 		}
 
@@ -116,15 +119,14 @@ const ConnectAds = ( { finalizeAdsAccountCreation } ) => {
 	};
 
 	// Show a loading state if the Ads account is being updated or if a new Ads account is being created.
-	// If finalizeAdsAccountCreation is true, the processing is done in `ConnectedGoogleComboAccountCard`.
-	if ( creatingNewAccount || finalizeAdsAccountCreation ) {
+	if ( isConnecting || isCreating ) {
 		let title = __(
 			'Creating a new Google Ads account',
 			'google-listings-and-ads'
 		);
 		let indicatorLabel = __( 'Creating…', 'google-listings-and-ads' );
 
-		if ( finalizeAdsAccountCreation ) {
+		if ( isConnecting ) {
 			title = __(
 				'Connecting your Google Ads account',
 				'google-listings-and-ads'
diff --git a/js/src/components/google-combo-account-card/connected-google-combo-account-card.js b/js/src/components/google-combo-account-card/connected-google-combo-account-card.js
index c2866ba68f..dc4165a94c 100644
--- a/js/src/components/google-combo-account-card/connected-google-combo-account-card.js
+++ b/js/src/components/google-combo-account-card/connected-google-combo-account-card.js
@@ -40,7 +40,7 @@ const ConnectedGoogleComboAccountCard = () => {
 	const { invalidateResolution } = useAppDispatch();
 	const { googleAdsAccount } = useGoogleAdsAccount();
 	const { hasAccess, step } = useGoogleAdsAccountStatus();
-	const [ upsertAdsAccount ] = useUpsertAdsAccount();
+	const [ upsertAdsAccount, { action } ] = useUpsertAdsAccount();
 
 	const finalizeAdsAccountCreation =
 		hasAccess === true && step === 'conversion_action';
@@ -116,7 +116,9 @@ const ConnectedGoogleComboAccountCard = () => {
 
 			{ showConnectAds && (
 				<ConnectAds
-					finalizeAdsAccountCreation={ finalizeAdsAccountCreation }
+					isConnecting={ action === 'update' }
+					isCreating={ action === 'create' }
+					onCreate={ upsertAdsAccount }
 				/>
 			) }
 		</div>