Save WIP.

woocommerce · Oct 31, 2024 · d3dae92 · d3dae92
1 parent b93f3aa
commit d3dae92
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 16 deletions.
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
@@ -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
@@ -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 <ConnectButton loading />;
 		}
 
-		return <ConnectButton accountID={ accountID } onClick={ onClick } />;
+		return (
+			<ConnectButton
+				accountID={ accountID }
+				onClick={ onClick }
+				loading={ ! hasResolvedAccounts }
+			/>
+		);
 	};
 
 	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
@@ -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={
 					<ConnectAdsBody
+						hasResolvedAccounts={
+							hasFinishedResolutionForExistingAdsAccount &&
+							hasFinishedResolutionForCurrentAccount &&
+							hasFinishedResolutionForAccountStatus &&
+							isConnected !== null
+						}
 						isConnected={ isConnected }
 						onClick={ handleConnectClick }
 						isLoading={ isLoading }

diff --git a/js/src/components/google-combo-account-card/connected-google-combo-account-card.scss b/js/src/components/google-combo-account-card/connected-google-combo-account-card.scss
@@ -5,6 +5,10 @@
 	}
 
 	.gla-connected-accounts-actions {
+		&:empty {
+			display: none;
+		}
+
 		padding-bottom: calc((var(--large-gap)) / 2);
 
 		@media (min-width: $break-small) {

diff --git a/js/src/hooks/useUpsertAdsAccount.js b/js/src/hooks/useUpsertAdsAccount.js
@@ -27,11 +27,8 @@ const useUpsertAdsAccount = () => {
 	// 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 [