Update Licensing JS Package to make it support all Jetpack products

projects/js-packages/licensing/changelog/add-licensing-support-for-all-jetpack-products

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Add support for all Jetpack products

projects/js-packages/licensing/components/activation-screen-success-info/index.jsx

@@ -10,43 +10,31 @@ import React from 'react';
 /**
  * Internal dependencies
  */
-import {
-	JetpackBackupDailyProductDetails,
-	JetpackSecurityDailyProductDetails,
-} from './product-details';
+import { getJetpackProductDashboardUrl } from '../activation-screen/utils';
+import JetpackProductDetails from './product-details';
 
 /**
  * Style dependencies
  */
 import './style.scss';
 
-const productIdToDetails = ( productId, dashboardUrl ) => {
-	switch ( productId ) {
-		case 2100:
-			return <JetpackBackupDailyProductDetails dashboardUrl={ dashboardUrl } />;
-		case 2010:
-			return <JetpackSecurityDailyProductDetails dashboardUrl={ dashboardUrl } />;
-		default:
-			return null;
-	}
-};
-
 /**
  * The Activation Screen Illustration component.
  *
  * @param {object} props -- The properties.
  * @param {number} props.productId -- The id of the product activated
- * @param {number} props.dashboardUrl -- The url that links to the site dashboard
+ * @param {string} props.siteRawUrl -- The url of the site
  * @returns {React.Component} The `ActivationSuccessInfo` component.
  */
 const ActivationSuccessInfo = props => {
-	const { dashboardUrl, productId } = props;
+	const { productId, siteRawUrl } = props;
+	const dashboardUrl = getJetpackProductDashboardUrl( productId, siteRawUrl );
 	return (
 		<div className="jp-license-activation-screen-success-info">
 			<div className="jp-license-activation-screen-success-info--content">
 				<JetpackLogo showText={ false } height={ 48 } />
 			</div>
-			{ productIdToDetails( productId, dashboardUrl ) }
+			<JetpackProductDetails siteRawUrl={ siteRawUrl } productId={ productId } />
 			<div>
 				<Button className="jp-license-activation-screen-success-info--button" href={ dashboardUrl }>
 					{ __( 'Go to Dashboard', 'jetpack' ) }
@@ -57,8 +45,8 @@ const ActivationSuccessInfo = props => {
 };
 
 ActivationSuccessInfo.propTypes = {
+	siteRawUrl: PropTypes.string,
 	productId: PropTypes.number,
-	dashboardUrl: PropTypes.string,
 };
 
 export default ActivationSuccessInfo;

projects/js-packages/licensing/components/activation-screen-success-info/product-details/index.js

@@ -1,2 +1,118 @@
-export { default as JetpackBackupDailyProductDetails } from './jetpack-backup-daily';
-export { default as JetpackSecurityDailyProductDetails } from './jetpack-security-daily';
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { createInterpolateElement } from '@wordpress/element';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+/**
+ * Internal dependencies
+ */
+import { getProductGroup } from '../../activation-screen/utils';
+
+/**
+ * The Jetpack Product Details component.
+ *
+ * @param {object} props -- The properties.
+ * @param {number} props.productId -- The id of the product
+ * @param {string} props.siteRawUrl -- The url of the site
+ * @returns {React.Component} The `JetpackProductDetails` component.
+ */
+const JetpackProductDetails = props => {
+	const { productId, siteRawUrl } = props;
+
+	const cloudDashboardBaseUrl = `https://cloud.jetpack.com/landing/${ siteRawUrl }`;
+
+	const productGroup = getProductGroup( productId );
+
+	const productInfoMap = {
+		jetpack_anti_spam: {
+			title: __( 'Your Jetpack Anti-spam is active!', 'jetpack' ),
+			text: __(
+				"We'll take care of everything from here. Now you can enjoy a spam-free site!",
+				'jetpack'
+			),
+		},
+		jetpack_backup: {
+			title: __( 'Your Jetpack Backup is active!', 'jetpack' ),
+			text: createInterpolateElement(
+				__(
+					'You can see your backups and restore your site on <a>cloud.jetpack.com</a>. If you ever lose access to your site, you can restore it there.',
+					'jetpack'
+				),
+				{
+					a: <a href={ cloudDashboardBaseUrl } />,
+				}
+			),
+		},
+		jetpack_complete: {
+			title: __( 'Your Jetpack Complete is active!', 'jetpack' ),
+			text: createInterpolateElement(
+				__(
+					'You can see your backups, security scans, and restore your site on <a>cloud.jetpack.com</a>. If you ever lose access to your site, you can restore it there.',
+					'jetpack'
+				),
+				{
+					a: <a href={ cloudDashboardBaseUrl } />,
+				}
+			),
+		},
+		jetpack_scan: {
+			title: __( 'Your Jetpack Scan is active!', 'jetpack' ),
+			text: createInterpolateElement(
+				__( 'You can see your security scans on <a>cloud.jetpack.com</a>.', 'jetpack' ),
+				{
+					a: <a href={ cloudDashboardBaseUrl } />,
+				}
+			),
+		},
+		jetpack_search: {
+			title: __( 'Your Jetpack Search is active!', 'jetpack' ),
+			text: __(
+				"Next, we'll help you customize your Search experience for your visitors.",
+				'jetpack'
+			),
+		},
+		jetpack_security: {
+			title: __( 'Your Jetpack Security is active!', 'jetpack' ),
+			text: createInterpolateElement(
+				__(
+					'You can see your backups, security scans, and restore your site on <a>cloud.jetpack.com</a>. If you ever lose access to your site, you can restore it there.',
+					'jetpack'
+				),
+				{
+					a: <a href={ cloudDashboardBaseUrl } />,
+				}
+			),
+		},
+		jetpack_videopress: {
+			title: __( 'Your Jetpack Videopress is active!', 'jetpack' ),
+			text: __(
+				'Experience high-quality, ad-free video built specifically for WordPress.',
+				'jetpack'
+			),
+		},
+		default: {
+			title: __( 'Your product is active!', 'jetpack' ),
+			text: __( "You're all set!", 'jetpack' ),
+		},
+	};
+
+	return (
+		<div>
+			<h1>
+				{ productInfoMap[ productGroup ].title }{ ' ' }
+				{ String.fromCodePoint( 0x1f389 ) /* Celebration emoji 🎉 */ }
+			</h1>
+			<p>{ productInfoMap[ productGroup ].text }</p>
+		</div>
+	);
+};
+
+JetpackProductDetails.propTypes = {
+	dashboardUrl: PropTypes.string,
+	productId: PropTypes.number,
+};
+
+export default JetpackProductDetails;

projects/js-packages/licensing/components/activation-screen-success-info/test/component.jsx

@@ -3,25 +3,33 @@
  */
 import React from 'react';
 import { expect } from 'chai';
-import { shallow } from 'enzyme';
+import { mount } from 'enzyme';
 
 /**
  * Internal dependencies
  */
 import ActivationSuccessInfo from '..';
-import { JetpackBackupDailyProductDetails } from '../product-details';
+import JetpackProductDetails from '../product-details';
 
 describe( 'ActivationSuccessInfo', () => {
 	const testProps = {
 		productId: 2100,
-		dashboardUrl: 'jetpack.com',
+		siteRawUrl: 'http://test-site.jurassic.ninja',
 	};
 
 	describe( 'Render the ActivationSuccessInfo component', () => {
-		const wrapper = shallow( <ActivationSuccessInfo { ...testProps } /> );
+		const wrapper = mount( <ActivationSuccessInfo { ...testProps } /> );
+
+		const jetpackProductDetailsComponent = wrapper.find( JetpackProductDetails );
 
 		it( 'correct product class is used', () => {
-			expect( wrapper.find( JetpackBackupDailyProductDetails ) ).to.have.lengthOf( 1 );
+			expect( jetpackProductDetailsComponent ).to.have.lengthOf( 1 );
+		} );
+
+		it( 'shows the correct product name', () => {
+			expect( jetpackProductDetailsComponent.text() ).to.contain(
+				'Your Jetpack Backup is active!'
+			);
 		} );
 	} );
 } );

projects/js-packages/licensing/components/activation-screen/index.jsx

@@ -46,15 +46,12 @@ const ActivationScreen = props => {
 			setIsSaving( false );
 			setLicenseError( null );
 			setActivatedProduct( 2100 );
-		}, 5000 );
+		}, 1000 );
 	}, [ isSaving, license ] );
 
 	const renderActivationSuccess = () => (
 		<div className="jp-license-activation-screen">
-			<ActivationScreenSuccessInfo
-				dashboardUrl={ 'https://cloud.jetpack.com/landing/' + siteRawUrl }
-				productId={ activatedProduct }
-			/>
+			<ActivationScreenSuccessInfo siteRawUrl={ siteRawUrl } productId={ activatedProduct } />
 			<ActivationScreenIllustration
 				imageUrl={ assetBaseUrl + successImage }
 				showSupportLink={ false }