From 82ef299208efb6da1f28fcf2e4ebee279c7e3e1f Mon Sep 17 00:00:00 2001
From: nfmohit <nahid.mohit@10up.com>
Date: Fri, 11 Oct 2024 02:36:54 +0600
Subject: [PATCH] Make notification GA tracking prop stricter.

---
 .../components/Notification/index.js          | 12 ++++--
 .../components/common/CTALinkSubtle.js        | 12 ++++--
 .../components/common/Dismiss.js              | 12 ++++--
 .../RRMSetupSuccessSubtleNotification.js      | 40 ++++++-------------
 4 files changed, 40 insertions(+), 36 deletions(-)

diff --git a/assets/js/googlesitekit/notifications/components/Notification/index.js b/assets/js/googlesitekit/notifications/components/Notification/index.js
index db0da927099..210210c7985 100644
--- a/assets/js/googlesitekit/notifications/components/Notification/index.js
+++ b/assets/js/googlesitekit/notifications/components/Notification/index.js
@@ -34,7 +34,7 @@ import useNotificationEvents from '../../hooks/useNotificationEvents';
 export default function Notification( {
 	id,
 	className,
-	gaTrackingEventArgs = [],
+	gaTrackingEventArgs,
 	children,
 } ) {
 	const ref = useRef();
@@ -46,7 +46,10 @@ export default function Notification( {
 	// Track view once.
 	useEffect( () => {
 		if ( ! isViewedOnce && viewed ) {
-			trackEvents.view( ...gaTrackingEventArgs );
+			trackEvents.view(
+				gaTrackingEventArgs?.label,
+				gaTrackingEventArgs?.value
+			);
 			setIsViewedOnce( true );
 		}
 	}, [ viewed, trackEvents, isViewedOnce, gaTrackingEventArgs ] );
@@ -70,6 +73,9 @@ export default function Notification( {
 Notification.propTypes = {
 	id: PropTypes.string,
 	className: PropTypes.string,
-	gaTrackingEventArgs: PropTypes.array,
+	gaTrackingEventArgs: PropTypes.shape( {
+		label: PropTypes.string,
+		value: PropTypes.string,
+	} ),
 	children: PropTypes.node,
 };
diff --git a/assets/js/googlesitekit/notifications/components/common/CTALinkSubtle.js b/assets/js/googlesitekit/notifications/components/common/CTALinkSubtle.js
index 2a07a572cae..5e785f866e0 100644
--- a/assets/js/googlesitekit/notifications/components/common/CTALinkSubtle.js
+++ b/assets/js/googlesitekit/notifications/components/common/CTALinkSubtle.js
@@ -32,14 +32,17 @@ export default function CTALinkSubtle( {
 	ctaLabel,
 	onCTAClick,
 	isCTALinkExternal = false,
-	gaTrackingEventArgs = [],
+	gaTrackingEventArgs,
 } ) {
 	const trackEvents = useNotificationEvents( id );
 
 	const handleCTAClick = async ( event ) => {
 		await onCTAClick?.( event );
 
-		trackEvents.confirm( ...gaTrackingEventArgs );
+		trackEvents.confirm(
+			gaTrackingEventArgs?.label,
+			gaTrackingEventArgs?.value
+		);
 	};
 
 	return (
@@ -66,5 +69,8 @@ CTALinkSubtle.propTypes = {
 	ctaLabel: PropTypes.string,
 	onCTAClick: PropTypes.func,
 	isCTALinkExternal: PropTypes.bool,
-	gaTrackingEventArgs: PropTypes.array,
+	gaTrackingEventArgs: PropTypes.shape( {
+		label: PropTypes.string,
+		value: PropTypes.string,
+	} ),
 };
diff --git a/assets/js/googlesitekit/notifications/components/common/Dismiss.js b/assets/js/googlesitekit/notifications/components/common/Dismiss.js
index 35d8e11c8d2..b125f448ba3 100644
--- a/assets/js/googlesitekit/notifications/components/common/Dismiss.js
+++ b/assets/js/googlesitekit/notifications/components/common/Dismiss.js
@@ -39,7 +39,7 @@ export default function Dismiss( {
 	dismissExpires = 0,
 	disabled,
 	onDismiss = () => {},
-	gaTrackingEventArgs = [],
+	gaTrackingEventArgs,
 } ) {
 	const trackEvents = useNotificationEvents( id );
 
@@ -47,7 +47,10 @@ export default function Dismiss( {
 
 	const handleDismiss = async ( event ) => {
 		await onDismiss?.( event );
-		trackEvents.dismiss( ...gaTrackingEventArgs );
+		trackEvents.dismiss(
+			gaTrackingEventArgs?.label,
+			gaTrackingEventArgs?.value
+		);
 		dismissNotification( id, { expiresInSeconds: dismissExpires } );
 	};
 
@@ -69,5 +72,8 @@ Dismiss.propTypes = {
 	dismissExpires: PropTypes.number,
 	disabled: PropTypes.bool,
 	onDismiss: PropTypes.func,
-	gaTrackingEventArgs: PropTypes.array,
+	gaTrackingEventArgs: PropTypes.shape( {
+		label: PropTypes.string,
+		value: PropTypes.string,
+	} ),
 };
diff --git a/assets/js/modules/reader-revenue-manager/components/dashboard/RRMSetupSuccessSubtleNotification.js b/assets/js/modules/reader-revenue-manager/components/dashboard/RRMSetupSuccessSubtleNotification.js
index 8f844f5881d..e34dcf92a98 100644
--- a/assets/js/modules/reader-revenue-manager/components/dashboard/RRMSetupSuccessSubtleNotification.js
+++ b/assets/js/modules/reader-revenue-manager/components/dashboard/RRMSetupSuccessSubtleNotification.js
@@ -119,11 +119,13 @@ export default function RRMSetupSuccessSubtleNotification( {
 	// Sync publication data when user re-focuses window.
 	useRefocus( syncPublication, 15000 );
 
+	const gaTrackingProps = {
+		gaTrackingEventArgs: { label: publicationOnboardingState },
+	};
+
 	if ( publicationOnboardingState === ONBOARDING_COMPLETE ) {
 		return (
-			<Notification
-				gaTrackingEventArgs={ [ publicationOnboardingState ] }
-			>
+			<Notification { ...gaTrackingProps }>
 				<SubtleNotification
 					title={ __(
 						'Your Reader Revenue Manager account was successfully set up!',
@@ -139,9 +141,7 @@ export default function RRMSetupSuccessSubtleNotification( {
 							primary={ false }
 							dismissLabel={ __( 'Got it', 'google-site-kit' ) }
 							onDismiss={ dismissNotice }
-							gaTrackingEventArgs={ [
-								publicationOnboardingState,
-							] }
+							{ ...gaTrackingProps }
 						/>
 					}
 					additionalCTA={
@@ -154,9 +154,7 @@ export default function RRMSetupSuccessSubtleNotification( {
 							ctaLink={ serviceURL }
 							onCTAClick={ onCTAClick }
 							isCTALinkExternal
-							gaTrackingEventArgs={ [
-								publicationOnboardingState,
-							] }
+							{ ...gaTrackingProps }
 						/>
 					}
 				/>
@@ -166,9 +164,7 @@ export default function RRMSetupSuccessSubtleNotification( {
 
 	if ( publicationOnboardingState === PENDING_VERIFICATION ) {
 		return (
-			<Notification
-				gaTrackingEventArgs={ [ publicationOnboardingState ] }
-			>
+			<Notification { ...gaTrackingProps }>
 				<SubtleNotification
 					title={ __(
 						'Your Reader Revenue Manager account was successfully set up!',
@@ -184,9 +180,7 @@ export default function RRMSetupSuccessSubtleNotification( {
 							primary={ false }
 							dismissLabel={ __( 'Got it', 'google-site-kit' ) }
 							onDismiss={ dismissNotice }
-							gaTrackingEventArgs={ [
-								publicationOnboardingState,
-							] }
+							{ ...gaTrackingProps }
 						/>
 					}
 					additionalCTA={
@@ -199,9 +193,7 @@ export default function RRMSetupSuccessSubtleNotification( {
 							ctaLink={ serviceURL }
 							onCTAClick={ onCTAClick }
 							isCTALinkExternal
-							gaTrackingEventArgs={ [
-								publicationOnboardingState,
-							] }
+							{ ...gaTrackingProps }
 						/>
 					}
 				/>
@@ -211,9 +203,7 @@ export default function RRMSetupSuccessSubtleNotification( {
 
 	if ( publicationOnboardingState === ONBOARDING_ACTION_REQUIRED ) {
 		return (
-			<Notification
-				gaTrackingEventArgs={ [ publicationOnboardingState ] }
-			>
+			<Notification { ...gaTrackingProps }>
 				<SubtleNotification
 					title={ __(
 						'Your Reader Revenue Manager account was successfully set up, but your publication still requires further setup in Reader Revenue Manager.',
@@ -225,9 +215,7 @@ export default function RRMSetupSuccessSubtleNotification( {
 							primary={ false }
 							dismissLabel={ __( 'Got it', 'google-site-kit' ) }
 							onDismiss={ dismissNotice }
-							gaTrackingEventArgs={ [
-								publicationOnboardingState,
-							] }
+							{ ...gaTrackingProps }
 						/>
 					}
 					additionalCTA={
@@ -240,9 +228,7 @@ export default function RRMSetupSuccessSubtleNotification( {
 							ctaLink={ serviceURL }
 							onCTAClick={ onCTAClick }
 							isCTALinkExternal
-							gaTrackingEventArgs={ [
-								publicationOnboardingState,
-							] }
+							{ ...gaTrackingProps }
 						/>
 					}
 					type="warning"