Add/growth to comparison page (#96689)

* Add Growth to comparison page * remove upgrade path changes * Remove lightbox link until Growth lightbox is added * Add lightbox back to comparison page growth column * Remove unintentional changes
Automattic · Dec 4, 2024 · c784935 · c784935
1 parent 0fce49b
commit c784935
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 9 deletions.
diff --git a/client/jetpack-cloud/sections/comparison/table/index.tsx b/client/jetpack-cloud/sections/comparison/table/index.tsx
@@ -73,6 +73,7 @@ export const Table: React.FC = () => {
 							{ isFree ? (
 								<span className="more-info-link">{ translate( 'Basic Jetpack features' ) }</span>
 							) : (
+								/* removing until the PR to add the lightbox for Growth is merged */
 								<MoreInfoLink onClick={ onClickMoreInfoFactory( item ) } item={ item } />
 							) }
 						</div>

diff --git a/client/jetpack-cloud/sections/comparison/table/style.scss b/client/jetpack-cloud/sections/comparison/table/style.scss
@@ -43,7 +43,6 @@
 					.display-price__details,
 					.display-price__billing-time-frame {
 						display: block;
-						line-height: 0.5;
 						white-space: normal;
 					}
 
@@ -322,7 +321,7 @@
 		width: 200px;
 	}
 
-	col.product-jetpack-starter {
+	col.product-jetpack-growth {
 		background-color: rgba(157, 217, 119, 0.1);
 	}
 

diff --git a/client/jetpack-cloud/sections/comparison/table/useComparisonData.tsx b/client/jetpack-cloud/sections/comparison/table/useComparisonData.tsx
@@ -25,6 +25,7 @@ const CheckIcon = () => <img className="checkmark-icon" src={ Checkmark } alt=""
 
 const allChecked: ComparisonDataItem[ 'features' ][ number ][ 'info' ] = {
 	FREE: { content: <CheckIcon /> },
+	GROWTH: { content: <CheckIcon /> },
 	SECURITY: { content: <CheckIcon /> },
 	COMPLETE: { content: <CheckIcon /> },
 };
@@ -115,6 +116,9 @@ export const useComparisonData = () => {
 							FREE: {
 								content: translate( 'Last 20 events' ),
 							},
+							GROWTH: {
+								content: translate( 'Last 20 events' ),
+							},
 							SECURITY: {
 								highlight: true,
 								content: translate( '30-day archive' ),
@@ -177,6 +181,9 @@ export const useComparisonData = () => {
 							FREE: {
 								content: translate( 'Manual Critical CSS' ),
 							},
+							GROWTH: {
+								content: translate( 'Manual Critical CSS' ),
+							},
 							SECURITY: {
 								content: translate( 'Manual Critical CSS' ),
 							},
@@ -195,6 +202,9 @@ export const useComparisonData = () => {
 							FREE: {
 								content: translate( '1 video (Up to 1GB)' ),
 							},
+							GROWTH: {
+								content: translate( '1 video (Up to 1GB)' ),
+							},
 							SECURITY: {
 								content: translate( '1 video (Up to 1GB)' ),
 							},
@@ -238,6 +248,18 @@ export const useComparisonData = () => {
 									</>
 								),
 							},
+							GROWTH: {
+								highlight: true,
+								content: (
+									<>
+										{ translate( 'Advanced stats' ) }
+										<br data-screen="desktop" />
+										{ /* Space between description and parenthesis on mobile */ }
+										<span data-screen="mobile"> </span>
+										{ translate( '(10k page views)' ) }
+									</>
+								),
+							},
 							SECURITY: {
 								content: (
 									<>
@@ -272,6 +294,10 @@ export const useComparisonData = () => {
 							FREE: {
 								content: translate( 'Social Free' ),
 							},
+							GROWTH: {
+								highlight: true,
+								content: translate( 'Social Advanced' ),
+							},
 							SECURITY: {
 								content: translate( 'Social Free' ),
 							},
@@ -294,6 +320,9 @@ export const useComparisonData = () => {
 							FREE: {
 								content: translate( 'Free' ),
 							},
+							GROWTH: {
+								content: translate( 'Free' ),
+							},
 							SECURITY: {
 								content: translate( 'Free' ),
 							},
@@ -312,6 +341,9 @@ export const useComparisonData = () => {
 							FREE: {
 								content: translate( '20 free requests' ),
 							},
+							GROWTH: {
+								content: translate( '20 free requests' ),
+							},
 							SECURITY: {
 								content: translate( '20 free requests' ),
 							},
@@ -354,6 +386,7 @@ export const useComparisonData = () => {
 						name: translate( 'Ad network' ),
 						url: links.ad_network,
 						info: {
+							GROWTH: { content: <CheckIcon /> },
 							SECURITY: { content: <CheckIcon /> },
 							COMPLETE: { content: <CheckIcon /> },
 						},
@@ -370,6 +403,7 @@ export const useComparisonData = () => {
 						url: links.transaction_fees,
 						info: {
 							FREE: { content: translate( '10%' ) },
+							GROWTH: { content: translate( '2%' ) },
 							SECURITY: { content: translate( '4%' ) },
 							COMPLETE: { content: translate( '2%' ) },
 						},
@@ -411,6 +445,7 @@ export const useComparisonData = () => {
 						name: translate( 'Priority support' ),
 						url: links.priority_support,
 						info: {
+							GROWTH: { content: <CheckIcon /> },
 							SECURITY: { content: <CheckIcon /> },
 							COMPLETE: { content: <CheckIcon /> },
 						},

diff --git a/client/jetpack-cloud/sections/comparison/table/useProductsToCompare.ts b/client/jetpack-cloud/sections/comparison/table/useProductsToCompare.ts
@@ -2,7 +2,7 @@ import {
 	PLAN_JETPACK_SECURITY_T1_YEARLY,
 	PLAN_JETPACK_COMPLETE,
 	PLAN_JETPACK_FREE,
-	//PLAN_JETPACK_GROWTH_YEARLY,
+	PLAN_JETPACK_GROWTH_YEARLY,
 } from '@automattic/calypso-products';
 import { useTranslate } from 'i18n-calypso';
 import { useMemo } from 'react';
@@ -18,6 +18,11 @@ export const useProductsToCompare = () => {
 				name: translate( 'Free' ),
 				productSlug: PLAN_JETPACK_FREE,
 			},
+			{
+				id: 'GROWTH',
+				name: translate( 'Growth', { context: 'Jetpack plan name' } ),
+				productSlug: PLAN_JETPACK_GROWTH_YEARLY,
+			},
 			{
 				id: 'SECURITY',
 				name: translate( 'Security', { context: 'Jetpack product name' } ),
@@ -28,12 +33,6 @@ export const useProductsToCompare = () => {
 				name: translate( 'Complete', { context: 'Jetpack plan name' } ),
 				productSlug: PLAN_JETPACK_COMPLETE,
 			},
-			// This will be added with features once Growth is launched
-			// {
-			// 	id: 'GROWTH',
-			// 	name: translate( 'Growth', { context: 'Jetpack plan name' } ),
-			// 	productSlug: PLAN_JETPACK_GROWTH_YEARLY,
-			// },
 		],
 		[ translate ]
 	);