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 [