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 ; + } + 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;