call 'setShowPromotionalBanner' on mount

woocommerce · Nov 5, 2024 · e5a72d0 · e5a72d0
1 parent 1add408
commit e5a72d0
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 4 deletions.
diff --git a/client/settings/payment-settings/index.js b/client/settings/payment-settings/index.js
@@ -106,6 +106,7 @@ const PaymentSettingsPanel = () => {
 								setShowPromotionalBanner={
 									setShowPromotionalBanner
 								}
+								setPromotionalBannerType={ () => {} }
 								isUpeEnabled={ isUpeEnabled }
 								setIsUpeEnabled={ setIsUpeEnabled }
 								isConnectedViaOAuth={ oauthConnected }

diff --git a/client/settings/payment-settings/promotional-banner-section.js b/client/settings/payment-settings/promotional-banner-section.js
@@ -1,7 +1,7 @@
 /* global wc_stripe_settings_params */
 import { __ } from '@wordpress/i18n';
 import { useDispatch } from '@wordpress/data';
-import { React } from 'react';
+import { React, useEffect } from 'react';
 import { Card, Button, ExternalLink } from '@wordpress/components';
 import styled from '@emotion/styled';
 import interpolateComponents from 'interpolate-components';
@@ -74,6 +74,14 @@ const PromotionalBannerSection = ( {
 	const hasAPMEnabled =
 		enabledPaymentMethodIds.filter( ( e ) => e !== 'card' ).length > 0;
 
+	useEffect( () => {
+		if ( isConnectedViaOAuth === false ) {
+			setPromotionalBannerType( RECONNECT_BANNER );
+		} else if ( ! isUpeEnabled ) {
+			setPromotionalBannerType( NEW_CHECKOUT_EXPERIENCE_BANNER );
+		}
+	}, [ isUpeEnabled, isConnectedViaOAuth, setPromotionalBannerType ] );
+
 	const handleButtonClick = () => {
 		const callback = async () => {
 			try {
@@ -290,14 +298,11 @@ const PromotionalBannerSection = ( {
 
 	let BannerContent = null;
 	if ( isConnectedViaOAuth === false ) {
-		setPromotionalBannerType?.( RECONNECT_BANNER );
 		BannerContent = <ReConnectAccountBanner />;
 	} else if ( ! isUpeEnabled ) {
 		if ( hasAPMEnabled ) {
-			setPromotionalBannerType?.( NEW_CHECKOUT_EXPERIENCE_BANNER );
 			BannerContent = <NewCheckoutExperienceAPMsBanner />;
 		} else {
-			setPromotionalBannerType?.( NEW_CHECKOUT_EXPERIENCE_BANNER );
 			BannerContent = <NewCheckoutExperienceBanner />;
 		}
 	}