Add Advanced Plan to Social pricing table

projects/js-packages/components/changelog/add-advanced-plan-pricing-table

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Added Advanced Social plan to pricing table

projects/js-packages/components/components/pricing-table/index.tsx

@@ -1,5 +1,5 @@
 import { createInterpolateElement } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { Icon, check, closeSmall } from '@wordpress/icons';
 import classnames from 'classnames';
 import {
@@ -40,40 +40,64 @@ const ToS = createInterpolateElement(
 	}
 );
 
+const INCLUDED_TEXT = __( 'Included', 'jetpack' );
+const NOT_INCLUDED_TEXT = __( 'Not included', 'jetpack' );
+const COMING_SOON_TEXT = __( 'Coming soon', 'jetpack' );
+
 const PricingTableContext = createContext( undefined );
 
+const getItemLabels = ( isComingSoon, isIncluded, featureNameLabel ) => {
+	if ( isComingSoon ) {
+		return {
+			lg: COMING_SOON_TEXT,
+			// translators: Name of the current feature
+			default: sprintf( __( '%s coming soon', 'jetpack' ), featureNameLabel ),
+		};
+	}
+
+	return {
+		lg: isIncluded ? INCLUDED_TEXT : NOT_INCLUDED_TEXT,
+		default: isIncluded
+			? featureNameLabel
+			: sprintf(
+					/* translators: Name of the current feature */
+					__( '%s not included', 'jetpack' ),
+					featureNameLabel
+			  ),
+	};
+};
+
 export const PricingTableItem: React.FC< PricingTableItemProps > = ( {
-	isIncluded,
+	isIncluded = false,
+	isComingSoon = false,
 	index = 0,
 	label = null,
 	tooltipInfo,
 	tooltipTitle,
 } ) => {
 	const [ isLg ] = useBreakpointMatch( 'lg' );
-	const items = useContext( PricingTableContext );
-	const rowLabel = items[ index ].name;
-	const defaultTooltipInfo = items[ index ].tooltipInfo;
-	const defaultTooltipTitle = items[ index ].tooltipTitle;
-	const includedLabel = __( 'Included', 'jetpack' );
-	const notIncludedLabel = __( 'Not included', 'jetpack' );
+	const item = useContext( PricingTableContext )[ index ];
+	const showTick = isComingSoon || isIncluded;
+
+	const featureNameLabel = item.name;
+
+	const defaultTooltipInfo = item.tooltipInfo;
+	const defaultTooltipTitle = item.tooltipTitle;
 	const showTooltip = tooltipInfo || ( ! isLg && defaultTooltipInfo );
 
-	let defaultLabel = isIncluded ? includedLabel : notIncludedLabel;
-	defaultLabel = isLg ? defaultLabel : rowLabel;
+	const labels = getItemLabels( isComingSoon, isIncluded, featureNameLabel );
 
-	if ( ! isLg && ! isIncluded && label === null ) {
-		return null;
-	}
+	const defaultLabel = isLg ? labels.lg : labels.default;
 
 	return (
 		<div className={ classnames( styles.item, styles.value ) }>
 			<Icon
 				className={ classnames(
 					styles.icon,
-					isIncluded ? styles[ 'icon-check' ] : styles[ 'icon-cross' ]
+					showTick ? styles[ 'icon-check' ] : styles[ 'icon-cross' ]
 				) }
 				size={ 32 }
-				icon={ isIncluded ? check : closeSmall }
+				icon={ showTick ? check : closeSmall }
 			/>
 			<Text variant="body-small">{ label || defaultLabel }</Text>
 			{ showTooltip && (
@@ -120,7 +144,12 @@ export const PricingTableColumn: React.FC< PricingTableColumnProps > = ( {
 	);
 };
 
-const PricingTable: React.FC< PricingTableProps > = ( { title, items, children } ) => {
+const PricingTable: React.FC< PricingTableProps > = ( {
+	title,
+	items,
+	children,
+	showIntroOfferDisclaimer = false,
+} ) => {
 	const [ isLg ] = useBreakpointMatch( 'lg' );
 
 	return (
@@ -165,9 +194,17 @@ const PricingTable: React.FC< PricingTableProps > = ( { title, items, children }
 				</div>
 			</div>
 			<div className={ styles[ 'tos-container' ] }>
-				<Text className={ styles.tos } variant="body-small">
-					{ ToS }
-				</Text>
+				<div className={ styles.tos }>
+					{ showIntroOfferDisclaimer && (
+						<Text variant="body-small">
+							{ __(
+								'Reduced pricing is a limited offer for the first year and renews at regular price.',
+								'jetpack'
+							) }
+						</Text>
+					) }
+					<Text variant="body-small">{ ToS }</Text>
+				</div>
 			</div>
 		</PricingTableContext.Provider>
 	);

projects/js-packages/components/components/pricing-table/types.ts

@@ -17,6 +17,11 @@ export type PricingTableProps = {
 	 * The columns to add to the table.
 	 */
 	children: React.ReactNode;
+
+	/**
+	 * Whether to show the intro offer disclaimer text with the ToS.
+	 */
+	showIntroOfferDisclaimer?: boolean;
 };
 
 export type PricingTableColumnProps = {
@@ -44,6 +49,11 @@ export type PricingTableItemProps = {
 	 */
 	isIncluded: boolean;
 
+	/**
+	 * Whether the feature is coming soon. Takes precedence over isIncluded.
+	 */
+	isComingSoon?: boolean;
+
 	/**
 	 * A custom label to display instead of the default one.
 	 */

projects/js-packages/components/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "0.26.5",
+	"version": "0.27.0-alpha",
 	"description": "Jetpack Components Package",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",

projects/plugins/social/changelog/add-advanced-plan-pricing-table

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Added Advanced Social plan to pricing table

projects/plugins/social/composer.json

@@ -81,6 +81,6 @@
 			"automattic/jetpack-autoloader": true,
 			"automattic/jetpack-composer-plugin": true
 		},
-		"autoloader-suffix": "c4802e05bbcf59fd3b6350e8d3e5482c_socialⓥ1_6_1_alpha"
+		"autoloader-suffix": "c4802e05bbcf59fd3b6350e8d3e5482c_socialⓥ1_7_0_alpha"
 	}
 }

projects/plugins/social/jetpack-social.php

@@ -4,7 +4,7 @@
  * Plugin Name: Jetpack Social
  * Plugin URI: https://wordpress.org/plugins/jetpack-social
  * Description: Share your site’s posts on several social media networks automatically when you publish a new post.
- * Version: 1.6.1-alpha
+ * Version: 1.7.0-alpha
  * Author: Automattic - Jetpack Social team
  * Author URI: https://jetpack.com/social/
  * License: GPLv2 or later

projects/plugins/social/src/js/components/pricing-page/index.js

@@ -7,14 +7,18 @@ import {
 	ProductPrice,
 	getRedirectUrl,
 	useBreakpointMatch,
-	Text,
 } from '@automattic/jetpack-components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { useCallback } from 'react';
 import { STORE_ID } from '../../store';
 import styles from './styles.module.scss';
 
+const UNLIMITED = __( 'Unlimited', 'jetpack-social' );
+const UNLIMITED_SHARES = __( 'Unlimited shares', 'jetpack-social' );
+const UP_TO_30 = __( 'Up to 30', 'jetpack-social' );
+const UP_TO_30_SHARES = __( 'Up to 30 shares in 30 days', 'jetpack-social' );
+
 const PricingPage = () => {
 	const siteSuffix = useSelect( select => select( STORE_ID ).getSiteSuffix() );
 	const updateOptions = useDispatch( STORE_ID ).updateJetpackSettings;
@@ -28,26 +32,108 @@ const PricingPage = () => {
 		updateOptions( newOption );
 	}, [ updateOptions ] );
 
+	const UNLIMITED_SHARES_TABLE_ITEM = (
+		<PricingTableItem
+			isIncluded
+			label={
+				<>
+					<del>{ __( 'Up to 1,000', 'jetpack-social' ) }</del>&nbsp;
+					<strong>{ isLarge ? UNLIMITED : UNLIMITED_SHARES }</strong>
+				</>
+			}
+			tooltipTitle={ UNLIMITED_SHARES }
+			tooltipInfo={ __(
+				'We are working on exciting new features for Jetpack Social. In the meantime, enjoy unlimited shares for a limited time!',
+				'jetpack-social'
+			) }
+		/>
+	);
+
 	return (
 		<PricingTable
+			showIntroOfferDisclaimer
 			title={ __( 'Write once, post everywhere', 'jetpack-social' ) }
 			items={ [
-				{ name: __( 'Number of shares', 'jetpack-social' ) },
+				{ name: __( 'Number of shares in 30 days', 'jetpack-social' ) },
 				{ name: __( 'Priority support', 'jetpack-social' ) },
 				{ name: __( 'Schedule posting', 'jetpack-social' ) },
 				{ name: __( 'Twitter, Facebook, LinkedIn & Tumblr', 'jetpack-social' ) },
 				{ name: __( 'Customize publications', 'jetpack-social' ) },
+				{
+					name: __( 'Engagement optimizer', 'jetpack-social' ),
+					tooltipInfo: __(
+						'Enhance social media engagement with personalized posts.',
+						'jetpack-social'
+					),
+				},
+				{
+					name: __( 'Recycle content', 'jetpack-social' ),
+					tooltipInfo: __(
+						'Repurpose, reuse or republish already published content.',
+						'jetpack-social'
+					),
+				},
+				{
+					name: __( 'Video sharing', 'jetpack-social' ),
+					tooltipTitle: __( 'Coming soon', 'jetpack-social' ),
+					tooltipInfo: __( 'Upload and share videos to your social platforms.', 'jetpack-social' ),
+				},
+				{
+					name: __( 'Multi-image sharing', 'jetpack-social' ),
+					tooltipTitle: __( 'Coming soon', 'jetpack-social' ),
+					tooltipInfo: __(
+						'Share multiple images at once on social media platforms.',
+						'jetpack-social'
+					),
+				},
+				{
+					name: __( 'Image generator', 'jetpack-social' ),
+					tooltipTitle: __( 'Coming soon', 'jetpack-social' ),
+					tooltipInfo: __(
+						'Automatically create custom images, saving you hours of tedious work.',
+						'jetpack-social'
+					),
+				},
 			] }
 		>
+			<PricingTableColumn primary>
+				<PricingTableHeader>
+					<ProductPrice
+						price={ 30 }
+						offPrice={ 1 }
+						legend={ __( '/month, billed yearly', 'jetpack-social' ) }
+						currency="USD"
+						hidePriceFraction
+					/>
+					<Button
+						href={ getRedirectUrl( 'jetpack-social-advanced-plan-plugin-admin-page', {
+							site: siteSuffix,
+							query: 'redirect_to=' + window.location.href,
+						} ) }
+						fullWidth
+					>
+						{ __( 'Get Advanced plan', 'jetpack-social' ) }
+					</Button>
+				</PricingTableHeader>
+				{ UNLIMITED_SHARES_TABLE_ITEM }
+				<PricingTableItem isIncluded />
+				<PricingTableItem isIncluded />
+				<PricingTableItem isIncluded />
+				<PricingTableItem isIncluded />
+				<PricingTableItem isIncluded />
+				<PricingTableItem isIncluded />
+				<PricingTableItem isComingSoon />
+				<PricingTableItem isComingSoon />
+				<PricingTableItem isComingSoon />
+			</PricingTableColumn>
 			<PricingTableColumn primary>
 				<PricingTableHeader>
 					<ProductPrice
 						price={ 10 }
 						offPrice={ 1 }
-						promoLabel={ __( '90% off*', 'jetpack-social' ) }
 						legend={ __( '/month, billed yearly', 'jetpack-social' ) }
 						currency="USD"
-						hidePriceFraction={ true }
+						hidePriceFraction
 					/>
 					<Button
 						href={ getRedirectUrl( 'jetpack-social-basic-plan-plugin-admin-page', {
@@ -56,30 +142,19 @@ const PricingPage = () => {
 						} ) }
 						fullWidth
 					>
-						{ __( 'Get Social', 'jetpack-social' ) }
+						{ __( 'Get Basic plan', 'jetpack-social' ) }
 					</Button>
-					<Text variant="body-extra-small" className={ styles.notice }>
-						(*) { __( 'Limited offer for the first month', 'jetpack-social' ) }
-					</Text>
 				</PricingTableHeader>
-				<PricingTableItem
-					isIncluded={ true }
-					label={
-						<>
-							<del>{ __( 'Up to 1000', 'jetpack-social' ) }</del>&nbsp;
-							<strong>{ __( 'Unlimited', 'jetpack-social' ) }</strong>
-						</>
-					}
-					tooltipTitle={ __( 'Unlimited shares', 'jetpack-social' ) }
-					tooltipInfo={ __(
-						'We are working on exciting new features for Jetpack Social. In the meantime, enjoy unlimited shares for a limited time!',
-						'jetpack-social'
-					) }
-				/>
-				<PricingTableItem isIncluded={ true } />
-				<PricingTableItem isIncluded={ true } />
-				<PricingTableItem isIncluded={ true } />
-				<PricingTableItem isIncluded={ true } />
+				{ UNLIMITED_SHARES_TABLE_ITEM }
+				<PricingTableItem isIncluded />
+				<PricingTableItem isIncluded />
+				<PricingTableItem isIncluded />
+				<PricingTableItem isIncluded />
+				<PricingTableItem />
+				<PricingTableItem />
+				<PricingTableItem />
+				<PricingTableItem />
+				<PricingTableItem />
 			</PricingTableColumn>
 			<PricingTableColumn>
 				<PricingTableHeader>
@@ -94,13 +169,18 @@ const PricingPage = () => {
 					</Button>
 				</PricingTableHeader>
 				<PricingTableItem
-					isIncluded={ true }
-					label={ <strong>{ __( 'Up to 30', 'jetpack-social' ) }</strong> }
+					isIncluded
+					label={ <strong>{ isLarge ? UP_TO_30 : UP_TO_30_SHARES }</strong> }
 				/>
-				<PricingTableItem isIncluded={ false } />
-				<PricingTableItem isIncluded={ true } />
-				<PricingTableItem isIncluded={ true } />
-				<PricingTableItem isIncluded={ true } />
+				<PricingTableItem />
+				<PricingTableItem isIncluded />
+				<PricingTableItem isIncluded />
+				<PricingTableItem isIncluded />
+				<PricingTableItem />
+				<PricingTableItem />
+				<PricingTableItem />
+				<PricingTableItem />
+				<PricingTableItem />
 			</PricingTableColumn>
 		</PricingTable>
 	);

projects/plugins/social/src/js/components/pricing-page/styles.module.scss

@@ -4,8 +4,3 @@
 	margin-top: calc( var( --spacing-base ) * 2 );
 	white-space: nowrap;
 }
-
-// Temporary (!) fix to align both buttons
-.button {
-	margin-bottom: calc( 20px + var( --spacing-base ) * 2 );
-}