From 357f5042149e30c4e163aaf50fe8412d8941b64b Mon Sep 17 00:00:00 2001 From: Renzo Canepa Date: Thu, 25 Nov 2021 15:30:16 -0300 Subject: [PATCH] Improve the copy of the license activation banner (#21876) --- .../components/jetpack-notices/index.jsx | 2 +- .../components/jetpack-notices/style.scss | 6 ++++ .../user-license-activation.jsx | 31 +++++++++++++++---- ...ate-jetpack-license-activation-banner-copy | 4 +++ 4 files changed, 36 insertions(+), 7 deletions(-) create mode 100644 projects/plugins/jetpack/changelog/update-jetpack-license-activation-banner-copy 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.