UI changes to prepare to make Social Previews a gated feature on WPCom (

#16724)

* Add basic scaffold for premium nudge

* Add documentation to code.

* Remove testing check and use check for avaiabiliity

* Update extensions/blocks/social-previews/editor.js

Co-authored-by: Damián Suárez <rdsuarez@gmail.com>

* Update extensions/blocks/social-previews/editor.js

Co-authored-by: Damián Suárez <rdsuarez@gmail.com>

* Remove testing comment

* Normalize to a single button and onClick action

Co-authored-by: Damián Suárez <rdsuarez@gmail.com>

extensions/blocks/social-previews/editor.js

@@ -1,7 +1,32 @@
 /**
  * Internal dependencies
  */
-import { name, settings } from '.';
+import { name, settings, SocialPreviews } from '.';
 import registerJetpackPlugin from '../../shared/register-jetpack-plugin';
+import { registerPlugin } from '@wordpress/plugins';
+import getJetpackExtensionAvailability from '../../shared/get-jetpack-extension-availability';
 
+/*
+ * Register the main "social-previews" extension if the feature is available
+ * on the current plan.
+ */
 registerJetpackPlugin( name, settings );
+
+/*
+ * If the social previews extension is **not** available on this plan (WP.com only)
+ * then manually register a near identical Plugin which shows the upgrade nudge.
+ * Note this is necessary because the official `registerJetpackPlugin` checks the
+ * extension availability so will not render the Plugin if the extension is not
+ * availabile.
+ */
+const extensionAvailableOnPlan = getJetpackExtensionAvailability( 'social-previews' );
+
+if ( ! extensionAvailableOnPlan ) {
+    registerPlugin( `jetpack-${name}-upgrade-nudge`, {
+        render: () => {
+            return (
+                <SocialPreviews showUpgradeNudge={ true } />
+            );
+        }
+    } );
+}

extensions/blocks/social-previews/index.js

@@ -17,11 +17,11 @@ export const settings = {
 	render: () => <SocialPreviews />,
 };
 
-const SocialPreviews = function SocialPreviews() {
+export const SocialPreviews = function SocialPreviews( { showUpgradeNudge } ) {
 	return (
 		<JetpackPluginSidebar>
 			<PanelBody title={ __( 'Social Previews', 'jetpack' ) }>
-				<SocialPreviewsPanel />
+				<SocialPreviewsPanel showUpgradeNudge={ showUpgradeNudge } />
 			</PanelBody>
 		</JetpackPluginSidebar>
 	);

extensions/blocks/social-previews/panel.js

@@ -16,7 +16,10 @@ import { Button } from '@wordpress/components';
 import { AVAILABLE_SERVICES } from './constants';
 import { SocialServiceIcon } from '../../shared/icons';
 
-const SocialPreviewsPanel = function SocialPreviewsPanel( { openModal } ) {
+const SocialPreviewsPanel = function SocialPreviewsPanel( { openModal, showUpgradeNudge } ) {
+	const buttonText = showUpgradeNudge ? __( 'Learn more', 'jetpack' ) : __( 'Preview', 'jetpack' );
+	const buttonLabel = showUpgradeNudge ? __( 'Learn more about paid plans', 'jetpack' ) : __( 'Open Social Previews', 'jetpack' );
+
 	return (
 		<div className="jetpack-social-previews__panel">
 			<p>
@@ -25,6 +28,11 @@ const SocialPreviewsPanel = function SocialPreviewsPanel( { openModal } ) {
 					'jetpack'
 				) }
 			</p>
+
+			{ showUpgradeNudge && (
+				<p>{ __( 'Business or eCommerce plan required.', 'jetpack' ) }</p>
+			)}
+
 			<div className="jetpack-gutenberg-social-icons">
 				{ AVAILABLE_SERVICES.map( service => (
 					<SocialServiceIcon
@@ -34,8 +42,9 @@ const SocialPreviewsPanel = function SocialPreviewsPanel( { openModal } ) {
 					/>
 				) ) }
 			</div>
-			<Button isSecondary onClick={ openModal } label={ __( 'Open Social Previews', 'jetpack' ) }>
-				{ __( 'Preview', 'jetpack' ) }
+
+			<Button isSecondary onClick={ openModal } label={ buttonLabel }>
+				{ buttonText }
 			</Button>
 		</div>
 	);