diff --git a/js/src/components/google-combo-account-card/claim-ads-account/claim-ads-account.js b/js/src/components/google-combo-account-card/claim-ads-account/claim-ads-account.js
index f6616727c7..c06d7b4587 100644
--- a/js/src/components/google-combo-account-card/claim-ads-account/claim-ads-account.js
+++ b/js/src/components/google-combo-account-card/claim-ads-account/claim-ads-account.js
@@ -24,9 +24,10 @@ import './claim-ads-account.scss';
const ClaimAdsAccount = () => {
const [ updating, setUpdating ] = useState( false );
const { googleAdsAccount } = useGoogleAdsAccount();
- const { fetchGoogleAdsAccountStatus } = useAppDispatch();
const { hasAccess, step } = useGoogleAdsAccountStatus();
const [ upsertAdsAccount ] = useUpsertAdsAccount();
+ const { fetchGoogleAdsAccountStatus, invalidateResolution } =
+ useAppDispatch();
const shouldClaimGoogleAdsAccount = Boolean(
googleAdsAccount?.id && hasAccess === false
@@ -43,10 +44,17 @@ const ClaimAdsAccount = () => {
useWindowFocusCallbackIntervalEffect( checkUpdatedAdsAccountStatus, 30 );
useEffect( () => {
- if ( hasAccess === true && step === 'conversion_action' ) {
- upsertAdsAccount();
- }
- }, [ hasAccess, step, upsertAdsAccount ] );
+ const upsertAccount = async () => {
+ if ( hasAccess === true && step === 'conversion_action' ) {
+ await upsertAdsAccount();
+ invalidateResolution( 'getExistingGoogleAdsAccounts', [] );
+ invalidateResolution( 'getGoogleAdsAccount', [] );
+ invalidateResolution( 'getGoogleAdsAccountStatus', [] );
+ }
+ };
+
+ upsertAccount();
+ }, [ hasAccess, step, upsertAdsAccount, invalidateResolution ] );
const handleOnClick = () => {
setUpdating( true );
diff --git a/js/src/components/google-combo-account-card/connect-ads/connect-ads-body.js b/js/src/components/google-combo-account-card/connect-ads/connect-ads-body.js
index b3c2379902..10c601b831 100644
--- a/js/src/components/google-combo-account-card/connect-ads/connect-ads-body.js
+++ b/js/src/components/google-combo-account-card/connect-ads/connect-ads-body.js
@@ -21,6 +21,7 @@ import ConnectedIconLabel from '.~/components/connected-icon-label';
* @param {boolean} props.isLoading Whether the card is in a loading state.
* @param {Function} props.setValue Callback to set the value.
* @param {string} props.accountID Google Ads account ID.
+ * @param {boolean} props.hasResolvedAccounts Whether the existing Ads accounts and current Ads account have resolved.
* @return {JSX.Element} Body component.
*/
const ConnectAdsBody = ( {
@@ -29,6 +30,7 @@ const ConnectAdsBody = ( {
isLoading,
setValue,
accountID,
+ hasResolvedAccounts,
} ) => {
const getAction = () => {
if ( isLoading ) {
@@ -47,7 +49,13 @@ const ConnectAdsBody = ( {
return ;
}
- return ;
+ return (
+
+ );
};
return (
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 dde089a442..61758a906a 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
@@ -31,14 +31,24 @@ import { useAppDispatch } from '.~/data';
*/
const ConnectAds = ( { isEditing } ) => {
const [ showCreateNewModal, setShowCreateNewModal ] = useState( false );
- const { existingAccounts: accounts } = useExistingGoogleAdsAccounts();
- const { googleAdsAccount, refetchGoogleAdsAccount } = useGoogleAdsAccount();
const [ value, setValue ] = useState();
const [ isLoading, setLoading ] = useState( false );
const { createNotice } = useDispatchCoreNotices();
const { fetchGoogleAdsAccountStatus } = useAppDispatch();
- const { hasAccess } = useGoogleAdsAccountStatus();
const isConnected = useGoogleAdsAccountReady();
+ const {
+ hasAccess,
+ hasFinishedResolution: hasFinishedResolutionForAccountStatus,
+ } = useGoogleAdsAccountStatus();
+ const {
+ existingAccounts: accounts,
+ hasFinishedResolution: hasFinishedResolutionForExistingAdsAccount,
+ } = useExistingGoogleAdsAccounts();
+ const {
+ googleAdsAccount,
+ refetchGoogleAdsAccount,
+ hasFinishedResolution: hasFinishedResolutionForCurrentAccount,
+ } = useGoogleAdsAccount();
const [ connectGoogleAdsAccount ] = useApiFetchCallback( {
path: '/wc/gla/ads/accounts',
method: 'POST',
@@ -140,6 +150,12 @@ const ConnectAds = ( { isEditing } ) => {
) }
body={
{
// If not, it means we are creating a new account.
const { googleAdsAccount } = useGoogleAdsAccount();
const { createNotice } = useDispatchCoreNotices();
- const {
- fetchGoogleAdsAccount,
- fetchGoogleAdsAccountStatus,
- fetchExistingGoogleAdsAccounts,
- } = useAppDispatch();
+ const { fetchGoogleAdsAccount, fetchGoogleAdsAccountStatus } =
+ useAppDispatch();
const [ currentAction, setCurrentAction ] = useState( null );
const isCreation = ! googleAdsAccount?.id;
@@ -73,7 +70,6 @@ const useUpsertAdsAccount = () => {
await Promise.all( [
fetchGoogleAdsAccount(),
fetchGoogleAdsAccountStatus(),
- fetchExistingGoogleAdsAccounts(),
] );
setCurrentAction( null );
@@ -83,7 +79,6 @@ const useUpsertAdsAccount = () => {
fetchCreateAccount,
fetchGoogleAdsAccount,
fetchGoogleAdsAccountStatus,
- fetchExistingGoogleAdsAccounts,
] );
return [