+ { 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 (
+
+
+
+
+
+ { UNLIMITED_SHARES_TABLE_ITEM }
+
+
+
+
+
+
+
+
+
+
-
- (*) { __( '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 );
-}