Merge pull request #11184 from google/9300-adsense-followup

Fix issue with AdSense notifications delivered from API.

Author: hussain-t

assets/js/components/NotificationFromServer.js

@@ -47,7 +47,7 @@ import Link from './Link';
  * @param {Object}     props                Component props.
  * @param {string}     props.id             Notification ID/slug.
  * @param {string}     props.title          Notification title/heading.
- * @param {?ReactNode} props.content        Decsription for notification.
+ * @param {?ReactNode} props.content        Description for notification.
  * @param {string}     props.ctaLabel       Label for the call-to-action button.
  * @param {?string}    props.ctaTarget      `target` for the call-to-action link, e.g. `_blank`. Optional.
  * @param {?string}    props.ctaURL         URL for the call-to-action link.
@@ -79,9 +79,11 @@ function NotificationFromServer( {
 				description={
 					<Description
 						learnMoreLink={
-							<Link href={ learnMoreURL } external>
-								{ learnMoreLabel }
-							</Link>
+							!! learnMoreURL && !! learnMoreLabel ? (
+								<Link href={ learnMoreURL } external>
+									{ learnMoreLabel }
+								</Link>
+							) : undefined
 						}
 						text={ content }
 					/>

assets/js/hooks/useAdSenseNotifications.js

@@ -20,6 +20,7 @@
  * WordPress dependencies
  */
 import { useEffect, useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -65,9 +66,33 @@ export default function useAdSenseNotifications() {
 				return;
 			}
 
+			/**
+			 * Adjust the notification props to match the expected
+			 * `NotificationFromServer` component props, which vary
+			 * slightly from the attributes returned from the REST API.
+			 */
+			const notificationProps = { ...notification };
+
+			// Some notifications do not include a `title` property, so supply
+			// a default.
+			if ( ! notificationProps.title ) {
+				notificationProps.title = __(
+					'Notice about your AdSense account',
+					'google-site-kit'
+				);
+			}
+
+			if (
+				! notificationProps.content?.length &&
+				!! notificationProps.description?.length
+			) {
+				notificationProps.content = notificationProps.description;
+				delete notificationProps.description;
+			}
+
 			registerNotification( notification.id, {
 				Component() {
-					return <NotificationFromServer { ...notification } />;
+					return <NotificationFromServer { ...notificationProps } />;
 				},
 				priority: notification.priority,
 				areaSlug: NOTIFICATION_AREAS.HEADER,