Jetpack Licenses: Dynamic primary button label and link after product…

… activation (#22207) Co-authored-by: Jeremy Herve <jeremy@jeremy.hu> Co-authored-by: Renzo Canepa <rcanepag@gmail.com>
Automattic · Jan 4, 2022 · 99bfbc8 · 99bfbc8
1 parent 6199c76
commit 99bfbc8
Show file tree

Hide file tree

Showing 9 changed files with 122 additions and 57 deletions.
diff --git a/projects/js-packages/licensing/changelog/update-activation-complete-primary-button-link b/projects/js-packages/licensing/changelog/update-activation-complete-primary-button-link
@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Link primary button after activation to Recommendations section if not seen before.
diff --git a/projects/js-packages/licensing/components/activation-screen-controls/style.scss b/projects/js-packages/licensing/components/activation-screen-controls/style.scss
@@ -8,7 +8,8 @@
 	justify-content: space-between;
 
 	h1 {
-		font-size: var(--font-title-large);
+		//typography-exception
+		font-size: 44px;
 		font-weight: 700;
 	}
 

diff --git a/projects/js-packages/licensing/components/activation-screen-success-info/index.jsx b/projects/js-packages/licensing/components/activation-screen-success-info/index.jsx
@@ -1,8 +1,6 @@
 /**
  * External dependencies
  */
-import { __ } from '@wordpress/i18n';
-import { Button } from '@wordpress/components';
 import { JetpackLogo } from '@automattic/jetpack-components';
 import PropTypes from 'prop-types';
 import React from 'react';
@@ -12,6 +10,7 @@ import React from 'react';
  */
 import JetpackProductDetails from './product-details';
 import { ProductLink } from './product-link';
+import { PrimaryLink } from './primary-link';
 
 /**
  * Style dependencies
@@ -24,23 +23,23 @@ import './style.scss';
  * @param {object} props -- The properties.
  * @param {number} props.productId -- The id of the product activated
  * @param {string} props.siteRawUrl -- The url of the site
+ * @param {string} props.siteAdminUrl -- URL of the Jetpack Site Admin
+ * @param {string} props.currentRecommendationsStep -- The current recommendation step
  * @returns {React.Component} The `ActivationSuccessInfo` component.
  */
 const ActivationSuccessInfo = props => {
-	const { productId, siteRawUrl } = props;
+	const { productId, siteRawUrl, siteAdminUrl, currentRecommendationsStep } = props;
 	return (
 		<div className="jp-license-activation-screen-success-info">
 			<div className="jp-license-activation-screen-success-info--content">
 				<JetpackLogo showText={ false } height={ 48 } />
 			</div>
 			<JetpackProductDetails siteRawUrl={ siteRawUrl } productId={ productId } />
 			<div className="jp-license-activation-screen-success-info--buttons">
-				<Button
-					className="jp-license-activation-screen-success-info--button"
-					href={ '/wp-admin/admin.php?page=jetpack#/my-plan' }
-				>
-					{ __( 'View my plans', 'jetpack' ) }
-				</Button>
+				<PrimaryLink
+					currentRecommendationsStep={ currentRecommendationsStep }
+					siteAdminUrl={ siteAdminUrl }
+				/>
 				<ProductLink siteRawUrl={ siteRawUrl } productId={ productId } />
 			</div>
 		</div>
@@ -50,6 +49,8 @@ const ActivationSuccessInfo = props => {
 ActivationSuccessInfo.propTypes = {
 	siteRawUrl: PropTypes.string,
 	productId: PropTypes.number,
+	siteAdminUrl: PropTypes.string,
+	currentRecommendationsStep: PropTypes.string,
 };
 
 export default ActivationSuccessInfo;
diff --git a/...ts/js-packages/licensing/components/activation-screen-success-info/primary-link/index.jsx b/...ts/js-packages/licensing/components/activation-screen-success-info/primary-link/index.jsx
@@ -0,0 +1,38 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Button } from '@wordpress/components';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+/**
+ * Style dependencies
+ */
+import './style.scss';
+
+const PrimaryLink = props => {
+	const { currentRecommendationsStep, siteAdminUrl } = props;
+
+    // If the user has not completed the first step of the Assistant, make the primary button link to it.
+	if ( currentRecommendationsStep === 'not-started' ) {
+		return (
+			<Button className="jp-license-activation-screen-success-info--button" href={ siteAdminUrl + 'admin.php?page=jetpack#/recommendations' }>
+				{ __( 'Configure my site', 'jetpack' ) }
+			</Button>
+		);
+    }
+
+	return (
+		<Button className="jp-license-activation-screen-success-info--button" href={ siteAdminUrl + 'admin.php?page=jetpack#/my-plan' }>
+			{ __( 'View my plans', 'jetpack' ) }
+		</Button>
+	);
+};
+
+PrimaryLink.propTypes = {
+	siteAdminUrl: PropTypes.string.isRequired,
+	currentRecommendationsStep: PropTypes.string,
+};
+
+export { PrimaryLink };
diff --git a/...s/js-packages/licensing/components/activation-screen-success-info/primary-link/style.scss b/...s/js-packages/licensing/components/activation-screen-success-info/primary-link/style.scss
@@ -0,0 +1,46 @@
+@import '~@automattic/jetpack-base-styles/style';
+
+.jp-license-activation-screen-success-info--button,
+.jp-license-activation-screen-success-info--button:active,
+.jp-license-activation-screen-success-info--button:visited {
+	background-color: var( --jp-black );
+	border-radius: 4px;
+	color: var( --jp-white );
+	font-size: 16px;
+	font-size: var(--font-body);
+	font-style: normal;
+	font-weight: 600;
+	justify-content: center;
+	line-height: 24px;
+	margin-top: 24px;
+	min-height: 48px;
+	min-width: 158px;
+	padding: 13.5px 45px 13.5px 45px;
+	width: 100%;
+	margin: 0 40px 20px 0;
+
+	@media screen and (min-width: 480px) {
+		width: auto;
+	}
+
+	&:hover {
+		background-color: var( --jp-black-80 );
+		color: var( --jp-white );
+	}
+
+	&:focus {
+		background-color: var( --jp-black-80 );
+		border: 1px solid var( --jp-white );
+		color: var( --jp-white );
+	}
+
+	&[disabled],
+	&:disabled {
+		background-color: var( --jp-gray );
+		color: var( --jp-gray-20 );;
+	}
+
+	.jp-components-spinner {
+		width: 100%;
+	}
+}
diff --git a/projects/js-packages/licensing/components/activation-screen-success-info/style.scss b/projects/js-packages/licensing/components/activation-screen-success-info/style.scss
@@ -8,7 +8,8 @@
 	justify-content: space-between;
 
 	h1 {
-		font-size: var( --font-title-large );
+		//typography-exception
+		font-size: 44px;
 		font-weight: 700;
 	}
 
@@ -30,49 +31,4 @@
 			text-align: center;
 		}
 	}
-
-	.jp-license-activation-screen-success-info--button,
-	.jp-license-activation-screen-success-info--button:active,
-	.jp-license-activation-screen-success-info--button:visited {
-		background-color: var( --jp-black );
-		border-radius: 4px;
-		color: var( --jp-white );
-		font-size: 16px;
-		font-size: var(--font-body);
-		font-style: normal;
-		font-weight: 600;
-		justify-content: center;
-		line-height: 24px;
-		margin-top: 24px;
-		min-height: 48px;
-		min-width: 158px;
-		padding: 13.5px 45px 13.5px 45px;
-		width: 100%;
-		margin: 0 40px 20px 0;
-
-		@media screen and (min-width: 480px) {
-			width: auto;
-		}
-
-		&:hover {
-			background-color: var( --jp-black-80 );
-			color: var( --jp-white );
-		}
-
-		&:focus {
-			background-color: var( --jp-black-80 );
-			border: 1px solid var( --jp-white );
-			color: var( --jp-white );
-		}
-
-		&[disabled],
-		&:disabled {
-			background-color: var( --jp-gray );
-			color: var( --jp-gray-20 );;
-		}
-
-		.jp-components-spinner {
-			width: 100%;
-		}
-	}
 }
diff --git a/projects/js-packages/licensing/components/activation-screen/index.jsx b/projects/js-packages/licensing/components/activation-screen/index.jsx
@@ -57,6 +57,8 @@ const parseAttachLicensesResult = result => {
  * @param {string} props.siteRawUrl -- url of the Jetpack Site
  * @param {string?} props.startingLicense -- pre-fill the license value
  * @param {string} props.successImage -- Image to display within the illustration.
+ * @param {string} props.siteAdminUrl -- URL of the Jetpack Site Admin
+ * @param {string} props.currentRecommendationsStep -- The current recommendation step.
  * @returns {React.Component} The `ActivationScreen` component.
  */
 const ActivationScreen = props => {
@@ -67,6 +69,8 @@ const ActivationScreen = props => {
 		siteRawUrl,
 		startingLicense,
 		successImage,
+		siteAdminUrl,
+		currentRecommendationsStep,
 	} = props;
 
 	const [ license, setLicense ] = useState( startingLicense ?? '' );
@@ -103,7 +107,12 @@ const ActivationScreen = props => {
 
 	const renderActivationSuccess = () => (
 		<div className="jp-license-activation-screen">
-			<ActivationScreenSuccessInfo siteRawUrl={ siteRawUrl } productId={ activatedProduct } />
+			<ActivationScreenSuccessInfo
+				siteRawUrl={ siteRawUrl }
+				productId={ activatedProduct }
+				siteAdminUrl={ siteAdminUrl }
+				currentRecommendationsStep={ currentRecommendationsStep }
+			/>
 			<ActivationScreenIllustration
 				imageUrl={ assetBaseUrl + successImage }
 				showSupportLink={ false }
@@ -135,6 +144,8 @@ ActivationScreen.propTypes = {
 	siteRawUrl: PropTypes.string.isRequired,
 	startingLicense: PropTypes.string,
 	successImage: PropTypes.string.isRequired,
+	siteAdminUrl: PropTypes.string.isRequired,
+	currentRecommendationsStep: PropTypes.string,
 };
 
 export default ActivationScreen;
diff --git a/projects/plugins/jetpack/_inc/client/main.jsx b/projects/plugins/jetpack/_inc/client/main.jsx
@@ -51,6 +51,7 @@ import {
 	getCurrentVersion,
 	getTracksUserData,
 	showRecommendations,
+	getInitialRecommendationsStep,
 	getPluginBaseUrl,
 	getPartnerCoupon,
 	isWoASite,
@@ -477,6 +478,8 @@ class Main extends React.Component {
 							siteRawUrl={ this.props.siteRawUrl }
 							successImage="/images/jetpack-license-activation-with-success.png"
 							onActivationSuccess={ this.onLicenseActivationSuccess }
+							siteAdminUrl={ this.props.siteAdminUrl }
+							currentRecommendationsStep={ this.props.currentRecommendationsStep }
 						/>
 					);
 				} else {
@@ -741,6 +744,7 @@ export default connect(
 			isWooCommerceActive: isWooCommerceActive( state ),
 			hasSeenWCConnectionModal: getHasSeenWCConnectionModal( state ),
 			partnerCoupon: getPartnerCoupon( state ),
+			currentRecommendationsStep: getInitialRecommendationsStep( state ),
 		};
 	},
 	dispatch => ( {

diff --git a/projects/plugins/jetpack/changelog/update-activation-complete-primary-button-link b/projects/plugins/jetpack/changelog/update-activation-complete-primary-button-link
@@ -0,0 +1,4 @@
+Significance: minor
+Type: enhancement
+
+Provide recommendation step parameter to external package and also update package dependencies.