From bc4520c98c2666f467beacbb49e6d019f45bef56 Mon Sep 17 00:00:00 2001
From: Asvin Balloo <asvin.balloo@gmail.com>
Date: Tue, 30 Jan 2024 13:49:17 +0400
Subject: [PATCH] Move useGoogleAccountCheck to its own file.

---
 .../google-ads-account-card/non-connected.js  | 22 +++----
 js/src/hooks/useGoogleAccountCheck.js         | 64 +++++++++++++++++++
 2 files changed, 72 insertions(+), 14 deletions(-)
 create mode 100644 js/src/hooks/useGoogleAccountCheck.js

diff --git a/js/src/components/google-ads-account-card/non-connected.js b/js/src/components/google-ads-account-card/non-connected.js
index 649b66364b..f5d32d6992 100644
--- a/js/src/components/google-ads-account-card/non-connected.js
+++ b/js/src/components/google-ads-account-card/non-connected.js
@@ -6,30 +6,24 @@ import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
+import SpinnerCard from '.~/components/spinner-card';
 import CreateAccount from './create-account';
-import useExistingGoogleAdsAccounts from '.~/hooks/useExistingGoogleAdsAccounts';
-import useGoogleAccount from '.~/hooks/useGoogleAccount';
+import useGoogleAccountCheck from '.~/hooks/useGoogleAccountCheck';
 import ConnectAds from './connect-ads';
 
-const useGoogleAccountCheck = () => {
-	const { google } = useGoogleAccount();
-	const { existingAccounts } =
-		google && google.active !== 'no'
-			? // eslint-disable-next-line react-hooks/rules-of-hooks
-			  useExistingGoogleAdsAccounts()
-			: { existingAccounts: null };
-
-	return { google, existingAccounts };
-};
-
 const NonConnected = () => {
-	const { google, existingAccounts } = useGoogleAccountCheck();
+	const { google, existingAccounts, hasFinishedResolution } =
+		useGoogleAccountCheck();
 	const [ ignoreExisting, setIgnoreExisting ] = useState( false );
 
 	const handleShowExisting = () => {
 		setIgnoreExisting( false );
 	};
 
+	if ( ! hasFinishedResolution ) {
+		return <SpinnerCard />;
+	}
+
 	if (
 		! existingAccounts ||
 		existingAccounts.length === 0 ||
diff --git a/js/src/hooks/useGoogleAccountCheck.js b/js/src/hooks/useGoogleAccountCheck.js
new file mode 100644
index 0000000000..1db034831b
--- /dev/null
+++ b/js/src/hooks/useGoogleAccountCheck.js
@@ -0,0 +1,64 @@
+/**
+ * External dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { glaData } from '.~/constants';
+import { STORE_KEY } from '.~/data/constants';
+import toScopeState from '.~/utils/toScopeState';
+import useJetpackAccount from './useJetpackAccount';
+
+const useGoogleAccountCheck = () => {
+	const {
+		jetpack,
+		isResolving: isResolvingJetpack,
+		hasFinishedResolution: hasFinishedResolutionJetpack,
+	} = useJetpackAccount();
+
+	return useSelect(
+		( select ) => {
+			if ( ! jetpack || jetpack.active === 'no' ) {
+				return {
+					google: undefined,
+					scope: toScopeState( glaData.adsSetupComplete ),
+					isResolving: isResolvingJetpack,
+					hasFinishedResolution: hasFinishedResolutionJetpack,
+				};
+			}
+
+			const {
+				getGoogleAccount,
+				getExistingGoogleAdsAccounts,
+				isResolving,
+				hasFinishedResolution,
+			} = select( STORE_KEY );
+			const google = getGoogleAccount();
+
+			if ( google?.active === 'no' ) {
+				return {
+					google,
+					existingAccounts: null,
+					isResolving: isResolving( 'getGoogleAccount' ),
+					hasFinishedResolution:
+						hasFinishedResolution( 'getGoogleAccount' ),
+				};
+			}
+
+			const existingAccounts = getExistingGoogleAdsAccounts();
+			return {
+				google,
+				existingAccounts,
+				isResolving: isResolving( 'getExistingGoogleAdsAccounts' ),
+				hasFinishedResolution: hasFinishedResolution(
+					'getExistingGoogleAdsAccounts'
+				),
+			};
+		},
+		[ jetpack, isResolvingJetpack, hasFinishedResolutionJetpack ]
+	);
+};
+
+export default useGoogleAccountCheck;