diff --git a/projects/plugins/jetpack/_inc/client/components/jetpack-notices/index.jsx b/projects/plugins/jetpack/_inc/client/components/jetpack-notices/index.jsx
index 1b4adff27c778..9d1614ad0ffce 100644
--- a/projects/plugins/jetpack/_inc/client/components/jetpack-notices/index.jsx
+++ b/projects/plugins/jetpack/_inc/client/components/jetpack-notices/index.jsx
@@ -280,7 +280,7 @@ class JetpackNotices extends React.Component {
/>
) }
{ ! isUserLicenseActivationScreen && ! this.props.isAtomicSite && (
-
+
) }
);
diff --git a/projects/plugins/jetpack/_inc/client/components/jetpack-notices/style.scss b/projects/plugins/jetpack/_inc/client/components/jetpack-notices/style.scss
index 2f9c4b75b6371..7455932b66633 100644
--- a/projects/plugins/jetpack/_inc/client/components/jetpack-notices/style.scss
+++ b/projects/plugins/jetpack/_inc/client/components/jetpack-notices/style.scss
@@ -5,3 +5,9 @@
}
}
}
+
+.jp-license-activation-notice__external-link {
+ svg.gridicons-external {
+ margin-left: 0.25rem;
+ }
+}
diff --git a/projects/plugins/jetpack/_inc/client/components/jetpack-notices/user-license-activation.jsx b/projects/plugins/jetpack/_inc/client/components/jetpack-notices/user-license-activation.jsx
index 684530ab65d5b..fd02f70e6680b 100644
--- a/projects/plugins/jetpack/_inc/client/components/jetpack-notices/user-license-activation.jsx
+++ b/projects/plugins/jetpack/_inc/client/components/jetpack-notices/user-license-activation.jsx
@@ -6,10 +6,12 @@ import React, { createElement, useCallback, useEffect } from 'react';
import { connect } from 'react-redux';
import { createInterpolateElement } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
+import { getRedirectUrl } from '@automattic/jetpack-components';
/**
* Internal dependencies
*/
+import ExternalLink from 'components/external-link';
import analytics from 'lib/analytics';
import { getSiteAdminUrl } from 'state/initial-state';
import {
@@ -23,6 +25,7 @@ import SimpleNotice from 'components/notice';
* Jetpack "user"-licenses activation notice. (a license key is available for activation)
*
* @param {object} props - The properties.
+ * @param {number} props.pathname - The path of a URL.
* @param {number} props.detachedLicensesCount - The user's number of "detached" licenses.
* @param {object} props.activationNoticeDismissInfo - Object containing `last_detached_count` and `last_dismissed_time`.
* @param {Function} props.updateLicensingActivationNoticeDismiss - Function to update the notification dismiss info.
@@ -36,6 +39,7 @@ const UserLicenseActivationNotice = props => {
detachedLicensesCount,
activationNoticeDismissInfo,
updateLicensingActivationNoticeDismiss,
+ pathname,
siteAdminUrl,
} = props;
@@ -44,7 +48,6 @@ const UserLicenseActivationNotice = props => {
last_dismissed_time: lastDismissedDateTime,
} = activationNoticeDismissInfo;
- // TODO: Update this link to point to the user-license activation route.
const USER_LICENSE_ACTIVATION_ROUTE = `${ siteAdminUrl }admin.php?page=jetpack#/license/activation`;
const userHasDetachedLicenses = !! detachedLicensesCount;
@@ -65,12 +68,20 @@ const UserLicenseActivationNotice = props => {
}
}, [] ); // eslint-disable-line react-hooks/exhaustive-deps
- const trackClick = useCallback( () => {
+ const trackLicenseActivationClick = useCallback( () => {
analytics.tracks.recordJetpackClick( {
target: 'licensing_activation_notice',
+ page: pathname,
path: 'licensing/activation',
} );
- }, [] );
+ }, [ pathname ] );
+
+ const trackUserPurchasesClick = useCallback( () => {
+ analytics.tracks.recordJetpackClick( {
+ target: 'calypso_purchases_link',
+ page: pathname,
+ } );
+ }, [ pathname ] );
const onNoticeDismiss = useCallback( () => {
analytics.tracks.recordEvent( 'jetpack_wpa_licensing_activation_notice_dismiss' );
@@ -89,11 +100,18 @@ const UserLicenseActivationNotice = props => {
showDismiss={ true }
onDismissClick={ onNoticeDismiss }
text={ createInterpolateElement(
- __( 'You have an inactive product. Activate now', 'jetpack' ),
+ __( 'You have an available product license key. Activate it now or view all your purchases', 'jetpack' ),
{
- a: createElement( 'a', {
+ activateLink: createElement( 'a', {
href: USER_LICENSE_ACTIVATION_ROUTE,
- onClick: trackClick,
+ onClick: trackLicenseActivationClick,
+ } ),
+ purchasesLink: createElement( ExternalLink, {
+ className: 'jp-license-activation-notice__external-link',
+ href: getRedirectUrl( 'calypso-purchases' ),
+ onClick: trackUserPurchasesClick,
+ target: '_blank',
+ icon: true,
} ),
}
) }
@@ -109,6 +127,7 @@ UserLicenseActivationNotice.propTypes = {
last_detached_count: PropTypes.number.isRequired,
last_dismiss_time: PropTypes.string.isRequired,
} ),
+ pathname: PropTypes.string.isRequired,
siteAdminUrl: PropTypes.string.isRequired,
};
diff --git a/projects/plugins/jetpack/changelog/update-jetpack-license-activation-banner-copy b/projects/plugins/jetpack/changelog/update-jetpack-license-activation-banner-copy
new file mode 100644
index 0000000000000..e3f068838b956
--- /dev/null
+++ b/projects/plugins/jetpack/changelog/update-jetpack-license-activation-banner-copy
@@ -0,0 +1,4 @@
+Significance: minor
+Type: enhancement
+
+Update the copy of the license activation banner to make it clear that the user has an available license that can be activated on the site.