Plans overhaul Phase 1: apply new design changes

client/components/formatted-header/index.jsx

@@ -1,5 +1,6 @@
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
+import InfoPopover from 'calypso/components/info-popover';
 import { preventWidows } from 'calypso/lib/formatting';
 
 import './style.scss';
@@ -9,6 +10,7 @@ function FormattedHeader( {
 	id,
 	headerText,
 	subHeaderText,
+	tooltipText,
 	className,
 	compactOnMobile,
 	align,
@@ -24,11 +26,24 @@ function FormattedHeader( {
 	} );
 
 	const headerClasses = classNames( 'formatted-header__title', { 'wp-brand-font': brandFont } );
+	const tooltip = tooltipText && (
+		<InfoPopover icon="help-outline" position="right" iconSize={ 18 } showOnHover={ true }>
+			{ tooltipText }
+		</InfoPopover>
+	);
 
 	return (
 		<header id={ id } className={ classes }>
-			{ ! isSecondary && <h1 className={ headerClasses }>{ preventWidows( headerText, 2 ) }</h1> }
-			{ isSecondary && <h2 className={ headerClasses }>{ preventWidows( headerText, 2 ) }</h2> }
+			{ ! isSecondary && (
+				<h1 className={ headerClasses }>
+					{ preventWidows( headerText, 2 ) } { tooltip }
+				</h1>
+			) }
+			{ isSecondary && (
+				<h2 className={ headerClasses }>
+					{ preventWidows( headerText, 2 ) } { tooltip }
+				</h2>
+			) }
 			{ subHeaderText && (
 				<p className="formatted-header__subtitle">{ preventWidows( subHeaderText, 2 ) }</p>
 			) }
@@ -42,6 +57,7 @@ FormattedHeader.propTypes = {
 	brandFont: PropTypes.bool,
 	headerText: PropTypes.node,
 	subHeaderText: PropTypes.node,
+	tooltipText: PropTypes.node,
 	compactOnMobile: PropTypes.bool,
 	isSecondary: PropTypes.bool,
 	align: PropTypes.oneOf( [ 'center', 'left', 'right' ] ),
@@ -53,6 +69,7 @@ FormattedHeader.defaultProps = {
 	className: '',
 	brandFont: false,
 	subHeaderText: '',
+	tooltipText: '',
 	compactOnMobile: false,
 	isSecondary: false,
 	align: 'center',

client/jetpack-connect/test/__snapshots__/auth-form-header.js.snap

@@ -11,6 +11,7 @@ exports[`AuthFormHeader renders as expected 1`] = `
     id=""
     isSecondary={false}
     subHeaderText="You are moments away from a better WordPress."
+    tooltipText=""
   />
   <CompactCard
     className="jetpack-connect__site"

client/my-sites/plan-price/index.jsx

@@ -1,7 +1,6 @@
 import { getCurrencyObject } from '@automattic/format-currency';
 import classNames from 'classnames';
 import { localize } from 'i18n-calypso';
-import { isNumber } from 'lodash';
 import PropTypes from 'prop-types';
 import { Component } from 'react';
 import Badge from 'calypso/components/badge';
@@ -23,7 +22,7 @@ export class PlanPrice extends Component {
 			translate,
 		} = this.props;
 
-		if ( ! currencyCode || ! isNumber( rawPrice ) ) {
+		if ( ! currencyCode || ! ( typeof rawPrice === 'number' ) ) {
 			return null;
 		}
 

client/my-sites/plans-comparison/constant.ts

@@ -1 +1,2 @@
-export const SCREEN_BREAKPOINT = 768; // in pixels
+export const SCREEN_BREAKPOINT_SIGNUP = 768; // in pixels
+export const SCREEN_BREAKPOINT_PLANS = 990;

client/my-sites/plans-comparison/index.tsx

@@ -1,2 +1,2 @@
-export { PlansComparison as default } from './plans-comparison';
+export { PlansComparison as default, globalOverrides } from './plans-comparison';
 export { isEligibleForManagedPlan } from './is-eligible-for-managed-plan';

client/my-sites/plans-comparison/plans-comparison-col-header.tsx

@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
 import PlanPrice from 'calypso/my-sites/plan-price';
+import { SCREEN_BREAKPOINT_SIGNUP, SCREEN_BREAKPOINT_PLANS } from './constant';
 import type { Plan } from '@automattic/calypso-products';
 import type { translate } from 'i18n-calypso';
 
@@ -13,26 +14,61 @@ interface Props {
 }
 
 const PlanTitle = styled.h2`
-	font-size: 1.25rem;
+	font-size: 1.125rem;
+	margin-bottom: 10px;
+	font-weight: 500;
+
+	@media screen and ( min-width: ${ SCREEN_BREAKPOINT_SIGNUP + 1 }px ) {
+		.is-section-signup & {
+			font-size: 2rem;
+			font-family: Recoleta;
+		}
+	}
+
+	@media screen and ( min-width: ${ SCREEN_BREAKPOINT_PLANS + 1 }px ) {
+		.is-section-plans & {
+			font-size: 2rem;
+			font-family: Recoleta;
+		}
+	}
 `;
 
 const PlanDescription = styled.p`
 	color: var( --studio-gray-50 );
 	font-size: 0.875rem;
-	font-weight: 500;
-	margin: 0 0 1rem;
+	font-weight: 400;
+	margin: 0 0 1.5rem;
+
+	@media screen and ( max-width: ${ SCREEN_BREAKPOINT_SIGNUP }px ) {
+		.is-section-signup & {
+			display: none;
+		}
+	}
+
+	@media screen and ( max-width: ${ SCREEN_BREAKPOINT_PLANS }px ) {
+		.is-section-plans & {
+			display: none;
+		}
+	}
 `;
 
 const PriceContainer = styled.div`
 	display: flex;
 	flex-direction: row;
+	font-family: Recoleta;
+	font-weight: 500;
+
+	.plan-price {
+		font-size: 2.75rem;
+		line-height: 1;
+	}
 `;
 
 const BillingTimeFrame = styled.div`
 	color: var( --studio-gray-40 );
 	font-size: 0.75rem;
 	font-weight: 500;
-	margin: 0.5rem 0;
+	margin: 0.5rem 0 1rem;
 `;
 
 export const PlansComparisonColHeader: React.FunctionComponent< Props > = ( {

client/my-sites/plans-comparison/plans-comparison-features.tsx

@@ -3,22 +3,21 @@ import {
 	FEATURE_100K_VISITS,
 	FEATURE_500MB_STORAGE,
 	FEATURE_50GB_STORAGE,
-	FEATURE_ADDITIONAL_SITES,
 	FEATURE_UNLIMITED_POSTS_PAGES,
 	FEATURE_UNLIMITED_ADMINS,
 	FEATURE_INSTALL_PLUGINS,
-	FEATURE_COMMUNITY_SUPPORT,
 	FEATURE_EMAIL_LIVE_CHAT_SUPPORT_ALL_DAYS,
 	FEATURE_PAYMENT_BLOCKS,
 	FEATURE_WOOCOMMERCE,
 	FEATURE_JETPACK_ADVANCED,
 	FEATURE_NO_ADS,
 	FEATURE_SFTP_DATABASE,
 	FEATURE_SITE_BACKUPS_AND_RESTORE,
+	FEATURE_CUSTOM_DOMAIN,
+	FEATURE_PREMIUM_THEMES,
 } from '@automattic/calypso-products';
 import { Gridicon } from '@automattic/components';
 import { translate, numberFormat } from 'i18n-calypso';
-import { getFeatureByKey } from 'calypso/lib/plans/features-list';
 import type { TranslateResult, TranslateOptionsPlural } from 'i18n-calypso';
 
 export interface PlanComparisonFeature {
@@ -89,25 +88,111 @@ function defaultGetCellText(
 
 export const planComparisonFeatures: PlanComparisonFeature[] = [
 	{
-		title: translate( 'Sites' ),
-		description: translate( 'Popup text placeholder' ),
-		features: [ FEATURE_ADDITIONAL_SITES ],
-		getCellText: ( feature ) => {
-			const siteCount = 1;
-			const title = translate( '%(siteCount)s site', '%(siteCount)s sites', {
-				count: siteCount,
-				args: { siteCount },
-			} );
-			const desc = feature
-				? translate( 'You can purchase more sites.' )
-				: translate( 'You can’t purchase more sites.' );
+		title: translate( 'Custom Domain Name' ),
+		description: translate(
+			'Get a personalized online address that’s easy to remember and easy to share.'
+		),
+		features: [ FEATURE_CUSTOM_DOMAIN ],
+		getCellText: ( feature, isMobile = false ) => {
+			if ( ! isMobile ) {
+				if ( feature ) {
+					return (
+						<>
+							<Gridicon icon="checkmark" />
+							{ translate( 'Free for one year!' ) }
+						</>
+					);
+				}
 
-			return [ title, desc ];
+				return (
+					<>
+						<Gridicon icon="cross" />
+						{ translate( 'Not included' ) }
+					</>
+				);
+			}
+
+			return feature
+				? translate( 'Custom Domain Name is free for one year!' )
+				: translate( 'Custom Domain Name is not included' );
 		},
 	},
 	{
-		title: translate( 'Visits' ),
-		description: translate( 'Popup text placeholder' ),
+		title: translate( 'Premium themes' ),
+		description: translate(
+			'Gain access to advanced, professional & beautiful premium design templates including themes specifically tailored for businesses.'
+		),
+		features: [ FEATURE_PREMIUM_THEMES ],
+		getCellText: defaultGetCellText( translate( 'Premium themes' ) ),
+	},
+	{
+		title: translate( 'Unlimited Email and Live Chat Support' ),
+		description: translate(
+			'Customer service isn’t just something we offer. It’s who we are. Over 30% of WordPress.com is dedicated to service. We call it Happiness—real support delivered by real human beings who specialize in launching and fine-tuning WordPress sites. '
+		),
+		features: [ FEATURE_EMAIL_LIVE_CHAT_SUPPORT_ALL_DAYS ],
+		getCellText: defaultGetCellText( translate( 'Unlimited Email and Live Chat Support' ) ),
+	},
+	{
+		title: translate( 'WordPress Plugins' ),
+		subtitle: translate( 'Use any WordPress plugins on your site' ),
+		description: translate(
+			'Install WordPress plugins and extend functionality for your site with access to more than 50,000 WordPress plugins'
+		),
+		features: [ FEATURE_INSTALL_PLUGINS ],
+		getCellText: ( feature, isMobile = false ) => {
+			const pluginCount = 0;
+
+			if ( ! isMobile ) {
+				return feature ? translate( 'Unlimited' ) : String( pluginCount );
+			}
+
+			return feature
+				? translate( 'Unlimited WordPress Plugins' )
+				: translate( '%(pluginCount)s WordPress Plugin', '%(pluginCount)s WordPress Plugins', {
+						count: pluginCount,
+						args: { pluginCount: numberFormat( pluginCount, 0 ) },
+				  } );
+		},
+	},
+	{
+		title: translate( 'Storage space' ),
+		description: translate(
+			'The free plan allows a maximum storage of 500MB, which equals to approximately 100 high quality images, whilst with Managed WordPress you may go all the way up to 50GB, enough space for 10,000 high quality images of the same size.'
+		),
+		features: [ FEATURE_500MB_STORAGE, FEATURE_50GB_STORAGE ],
+		getCellText: ( feature, isMobile = false ) => {
+			let storageSize = '0.5';
+
+			if ( feature === FEATURE_50GB_STORAGE ) {
+				storageSize = '50';
+			}
+
+			if ( isMobile ) {
+				return translate( '%sGB of storage', {
+					args: [ storageSize ],
+				} );
+			}
+
+			return translate( '%sGB', {
+				args: [ storageSize ],
+				comment: '%s is a number of gigabytes.',
+			} );
+		},
+	},
+	{
+		title: translate( 'Sell products with WooCommerce' ),
+		description: translate(
+			'Includes one-click payments, premium store designs and personalized expert support.'
+		),
+		features: [ FEATURE_WOOCOMMERCE ],
+		getCellText: defaultGetCellText( translate( 'Sell products with WooCommerce' ) ),
+	},
+	{
+		title: translate( 'Visits per month' ),
+		description: translate(
+			"WordPress Managed bundles up to 100,000 visits a month to help you rest assured traffic won't be a concern."
+		),
 		features: [ FEATURE_10K_VISITS, FEATURE_100K_VISITS ],
 		getCellText: ( feature, isMobile = false ) => {
 			let visitCount = 0;
@@ -159,80 +244,12 @@ export const planComparisonFeatures: PlanComparisonFeature[] = [
 				  } );
 		},
 	},
-	{
-		title: translate( 'WordPress plugins' ),
-		subtitle: translate( 'Be able to add forms, calendar, etc.' ),
-		features: [ FEATURE_INSTALL_PLUGINS ],
-		getCellText: ( feature, isMobile = false ) => {
-			const pluginCount = 0;
-
-			if ( ! isMobile ) {
-				return feature ? translate( 'Unlimited' ) : String( pluginCount );
-			}
-
-			return feature
-				? translate( 'Unlimited WordPress plugins' )
-				: translate( '%(pluginCount)s WordPress plugin', '%(pluginCount)s WordPress plugins', {
-						count: pluginCount,
-						args: { pluginCount: numberFormat( pluginCount, 0 ) },
-				  } );
-		},
-	},
-	{
-		title: translate( 'Storage' ),
-		description: translate( 'Upload more images, videos, audio, and documents to your website.' ),
-		features: [ FEATURE_500MB_STORAGE, FEATURE_50GB_STORAGE ],
-		getCellText: ( feature, isMobile = false ) => {
-			let storageSize = '0.5';
-
-			if ( feature === FEATURE_50GB_STORAGE ) {
-				storageSize = '50';
-			}
-
-			if ( isMobile ) {
-				return translate( '%sGB of storage', {
-					args: [ storageSize ],
-				} );
-			}
-
-			return translate( '%sGB', {
-				args: [ storageSize ],
-				comment: '%s is a number of gigabytes.',
-			} );
-		},
-	},
-	{
-		title: translate( 'Support' ),
-		description: translate( 'Popup text placeholder' ),
-		features: [ FEATURE_COMMUNITY_SUPPORT, FEATURE_EMAIL_LIVE_CHAT_SUPPORT_ALL_DAYS ],
-		getCellText: ( feature ) => {
-			if ( feature === FEATURE_COMMUNITY_SUPPORT ) {
-				return [
-					getFeatureByKey( FEATURE_COMMUNITY_SUPPORT ).getTitle(),
-					getFeatureByKey( FEATURE_COMMUNITY_SUPPORT ).getDescription(),
-				];
-			}
-
-			return [
-				getFeatureByKey( FEATURE_EMAIL_LIVE_CHAT_SUPPORT_ALL_DAYS ).getTitle(),
-				getFeatureByKey( FEATURE_EMAIL_LIVE_CHAT_SUPPORT_ALL_DAYS ).getDescription(),
-			];
-		},
-	},
 	{
 		title: translate( 'Payment blocks' ),
 		description: translate( 'Popup text placeholder' ),
 		features: [ FEATURE_PAYMENT_BLOCKS ],
 		getCellText: defaultGetCellText( translate( 'Payment blocks' ) ),
 	},
-	{
-		title: translate( 'WooCommerce' ),
-		description: translate(
-			'WooCommerce is a customizable, open-source eCommerce platform built on WordPress.'
-		),
-		features: [ FEATURE_WOOCOMMERCE ],
-		getCellText: defaultGetCellText( translate( 'WooCommerce' ) ),
-	},
 	{
 		title: translate( 'Jetpack' ),
 		description: translate(