diff --git a/assets/js/components/notifications/BannerNotification/index.js b/assets/js/components/notifications/BannerNotification/index.js index 21382151285..6c1cecb0f79 100644 --- a/assets/js/components/notifications/BannerNotification/index.js +++ b/assets/js/components/notifications/BannerNotification/index.js @@ -99,6 +99,7 @@ function BannerNotification( { WinImageSVG, rounded = false, footer, + ctaComponent, } ) { // Closed notifications are invisible, but still occupy space. const [ isClosed, setIsClosed ] = useState( false ); @@ -334,7 +335,7 @@ function BannerNotification( { // ctaLink links are always buttons, in which case the dismiss should be a Link. // If there is only a dismiss however, it should be the primary action with a Button. - const DismissComponent = ctaLink ? Link : Button; + const DismissComponent = ctaLink || ctaComponent ? Link : Button; return (
) } - { ( ctaLink || isDismissible || dismiss ) && ( + { ( ctaLink || + isDismissible || + dismiss || + ctaComponent ) && (
+ { ctaComponent } + { ctaLink && (
); - } else if ( existingTag ) { - title = __( - 'No existing Google Analytics 4 property found, Site Kit will help you create a new one and insert it on your site', - 'google-site-kit' - ); - ctaLabel = __( 'Create property', 'google-site-kit' ); - footer = sprintf( - /* translators: %s: The existing tag ID. */ - __( - 'A GA4 tag %s is found on this site but this property is not associated with your Google Analytics account. You can always add/edit this in the Site Kit Settings.', - 'google-site-kit' - ), - existingTag - ); } else { + selectProperty( PROPERTY_CREATE ); + title = __( 'No existing Google Analytics 4 property found, Site Kit will help you create a new one and insert it on your site', 'google-site-kit' ); ctaLabel = __( 'Create property', 'google-site-kit' ); - footer = __( - 'You can always add/edit this in the Site Kit Settings.', - 'google-site-kit' - ); + + if ( existingTag ) { + footer = sprintf( + /* translators: %s: The existing tag ID. */ + __( + 'A GA4 tag %s is found on this site but this property is not associated with your Google Analytics account. You can always add/edit this in the Site Kit Settings.', + 'google-site-kit' + ), + existingTag + ); + } else { + footer = __( + 'You can always add/edit this in the Site Kit Settings.', + 'google-site-kit' + ); + } } return ( @@ -168,9 +191,11 @@ export default function SetupBanner( { onCTAClick } ) { id="ga4-activation-banner" className="googlesitekit-ga4-setup-banner" title={ title } - ctaLabel={ ctaLabel } - ctaLink={ onCTAClick ? '#' : null } - onCTAClick={ onCTAClick } + ctaComponent={ + + { ctaLabel } + + } footer={

{ footer }

} dismiss={ __( 'Cancel', 'google-site-kit' ) } dismissExpires={ getBannerDismissalExpiryTime( @@ -178,6 +203,7 @@ export default function SetupBanner( { onCTAClick } ) { ) } onDismiss={ showTooltip } > + { errorNotice && } { children } ); diff --git a/assets/js/modules/analytics-4/components/dashboard/ActivationBanner/SetupBanner.stories.js b/assets/js/modules/analytics-4/components/dashboard/ActivationBanner/SetupBanner.stories.js index 9bd0ff47004..2580c8b4d18 100644 --- a/assets/js/modules/analytics-4/components/dashboard/ActivationBanner/SetupBanner.stories.js +++ b/assets/js/modules/analytics-4/components/dashboard/ActivationBanner/SetupBanner.stories.js @@ -138,7 +138,7 @@ NoPropertyWithTag.decorators = [ export default { title: 'Modules/Analytics4/SetupBanner', args: { - onCTAClick: () => {}, + onSubmitSuccess: () => {}, }, decorators: [ ( Story ) => { diff --git a/assets/js/modules/analytics-4/components/dashboard/ActivationBanner/index.js b/assets/js/modules/analytics-4/components/dashboard/ActivationBanner/index.js index 97dfa5436b7..e54294d18f0 100644 --- a/assets/js/modules/analytics-4/components/dashboard/ActivationBanner/index.js +++ b/assets/js/modules/analytics-4/components/dashboard/ActivationBanner/index.js @@ -47,7 +47,7 @@ export default function ActivationBanner() { select( CORE_MODULES ).isModuleConnected( 'analytics-4' ) ); - const handleCTAClick = () => { + const handleSubmit = () => { if ( step === ACTIVATION_STEP_REMINDER ) { setStep( ACTIVATION_STEP_SETUP ); } @@ -65,9 +65,9 @@ export default function ActivationBanner() { switch ( step ) { case ACTIVATION_STEP_REMINDER: - return ; + return ; case ACTIVATION_STEP_SETUP: - return ; + return ; case ACTIVATION_STEP_SUCCESS: return ; default: