diff --git a/projects/js-packages/components/changelog/add-advanced-plan-pricing-table b/projects/js-packages/components/changelog/add-advanced-plan-pricing-table new file mode 100644 index 000000000000..99fdb840e3cb --- /dev/null +++ b/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 diff --git a/projects/js-packages/components/components/pricing-table/index.tsx b/projects/js-packages/components/components/pricing-table/index.tsx index c6ea4c7aa273..918504ddf3a8 100644 --- a/projects/js-packages/components/components/pricing-table/index.tsx +++ b/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 (
{ label || defaultLabel } { 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 }
- - { ToS } - +
+ { showIntroOfferDisclaimer && ( + + { __( + 'Reduced pricing is a limited offer for the first year and renews at regular price.', + 'jetpack' + ) } + + ) } + { ToS } +
); diff --git a/projects/js-packages/components/components/pricing-table/types.ts b/projects/js-packages/components/components/pricing-table/types.ts index 02e33fe8eb8e..db92ebbae38b 100644 --- a/projects/js-packages/components/components/pricing-table/types.ts +++ b/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. */ diff --git a/projects/js-packages/components/package.json b/projects/js-packages/components/package.json index d3a4525a2aef..dc7daea1b994 100644 --- a/projects/js-packages/components/package.json +++ b/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", diff --git a/projects/plugins/social/changelog/add-advanced-plan-pricing-table b/projects/plugins/social/changelog/add-advanced-plan-pricing-table new file mode 100644 index 000000000000..99fdb840e3cb --- /dev/null +++ b/projects/plugins/social/changelog/add-advanced-plan-pricing-table @@ -0,0 +1,4 @@ +Significance: minor +Type: added + +Added Advanced Social plan to pricing table diff --git a/projects/plugins/social/composer.json b/projects/plugins/social/composer.json index dbfa2aafeeca..438a0f5441f1 100644 --- a/projects/plugins/social/composer.json +++ b/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" } } diff --git a/projects/plugins/social/jetpack-social.php b/projects/plugins/social/jetpack-social.php index 289ceb8efe1a..19bfc34fc5c3 100644 --- a/projects/plugins/social/jetpack-social.php +++ b/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 diff --git a/projects/plugins/social/src/js/components/pricing-page/index.js b/projects/plugins/social/src/js/components/pricing-page/index.js index 818568a806e4..4342438f1313 100644 --- a/projects/plugins/social/src/js/components/pricing-page/index.js +++ b/projects/plugins/social/src/js/components/pricing-page/index.js @@ -7,7 +7,6 @@ import { ProductPrice, getRedirectUrl, useBreakpointMatch, - Text, } from '@automattic/jetpack-components'; import { useSelect, useDispatch } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; @@ -15,6 +14,11 @@ 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 = ( + + { __( 'Up to 1,000', 'jetpack-social' ) }  + { isLarge ? UNLIMITED : UNLIMITED_SHARES } + + } + 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 ( + + + + - - (*) { __( 'Limited offer for the first month', 'jetpack-social' ) } - - - { __( 'Up to 1000', 'jetpack-social' ) }  - { __( 'Unlimited', 'jetpack-social' ) } - - } - 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' - ) } - /> - - - - + { UNLIMITED_SHARES_TABLE_ITEM } + + + + + + + + + @@ -94,13 +169,18 @@ const PricingPage = () => { { __( 'Up to 30', 'jetpack-social' ) } } + isIncluded + label={ { isLarge ? UP_TO_30 : UP_TO_30_SHARES } } /> - - - - + + + + + + + + + ); diff --git a/projects/plugins/social/src/js/components/pricing-page/styles.module.scss b/projects/plugins/social/src/js/components/pricing-page/styles.module.scss index 5d70f69ed170..73a900ed2bcc 100644 --- a/projects/plugins/social/src/js/components/pricing-page/styles.module.scss +++ b/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 ); -}