Premium Content Block: Move to Jetpack

.eslintrc.js

@@ -8,7 +8,7 @@ module.exports = {
 		mocha: true,
 		node: true,
 		jquery: true,
-		jest: true
+		jest: true,
 	},
 	parserOptions: {
 		ecmaVersion: 2019,

projects/plugins/jetpack/_inc/client/.eslintrc.js

@@ -8,8 +8,8 @@ module.exports = {
 		'@wordpress/i18n-text-domain': [
 			'error',
 			{
-				'allowedTextDomain': 'jetpack',
-			}
+				allowedTextDomain: 'jetpack',
+			},
 		],
 	},
 };

projects/plugins/jetpack/_inc/client/traffic/site-stats.jsx

@@ -211,7 +211,8 @@ class SiteStatsComponent extends React.Component {
 							>
 								<span className="jp-form-toggle-explanation">
 									{ __(
-										'Include a small chart in your admin bar with a 48-hour traffic snapshot', 'jetpack'
+										'Include a small chart in your admin bar with a 48-hour traffic snapshot',
+										'jetpack'
 									) }
 								</span>
 							</CompactFormToggle>

projects/plugins/jetpack/babel.config.js

@@ -7,7 +7,12 @@ const config = {
 		},
 		{
 			// Transpile ES Modules syntax (`import`) in config files (but not elsewhere)
-			test: [ './dangerfile.js', './gulpfile.babel.js', './tools/webpack.config.js', './tools/builder/' ],
+			test: [
+				'./dangerfile.js',
+				'./gulpfile.babel.js',
+				'./tools/webpack.config.js',
+				'./tools/builder/',
+			],
 			presets: [
 				[ require.resolve( '@automattic/calypso-build/babel/default' ), { modules: 'commonjs' } ],
 			],

projects/plugins/jetpack/class.jetpack-plan.php

@@ -62,6 +62,7 @@ class Jetpack_Plan {
 			'supports' => array(
 				'akismet',
 				'recurring-payments',
+				'premium-content/container',
 			),
 		),
 		'premium'  => array(

projects/plugins/jetpack/extensions/.eslintrc.js

@@ -1,9 +1,5 @@
 module.exports = {
-	extends: [
-		'../.eslintrc.js',
-		'plugin:@wordpress/eslint-plugin/i18n',
-		'plugin:jest/recommended',
-	],
+	extends: [ '../.eslintrc.js', 'plugin:@wordpress/eslint-plugin/i18n', 'plugin:jest/recommended' ],
 	env: { jest: true },
 	rules: {
 		'react/forbid-elements': [
@@ -39,8 +35,8 @@ module.exports = {
 		'@wordpress/i18n-text-domain': [
 			'error',
 			{
-				'allowedTextDomain': 'jetpack',
-			}
+				allowedTextDomain: 'jetpack',
+			},
 		],
 		'jsdoc/check-tag-names': [
 			1, // Recommended

projects/plugins/jetpack/extensions/blocks/conversation/example.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 
- import { __ } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 
 const participants = [
 	{
@@ -42,32 +42,23 @@ const template = [
 		name: 'jetpack/dialogue',
 		attributes: {
 			...participants[ 1 ],
-			content: __(
-				'It is my arm.',
-				'jetpack'
-			),
+			content: __( 'It is my arm.', 'jetpack' ),
 			timestamp: '00:15',
 		},
 	},
 	{
 		name: 'jetpack/dialogue',
 		attributes: {
 			...participants[ 0 ],
-			content: __(
-				'I thought thy heart had been wounded with the claws of a lion.',
-				'jetpack'
-			),
+			content: __( 'I thought thy heart had been wounded with the claws of a lion.', 'jetpack' ),
 			timestamp: '00:32',
 		},
 	},
 	{
 		name: 'jetpack/dialogue',
 		attributes: {
 			...participants[ 1 ],
-			content: __(
-				'Wounded it is, but with the eyes of a lady.',
-				'jetpack'
-			),
+			content: __( 'Wounded it is, but with the eyes of a lady.', 'jetpack' ),
 			timestamp: '00:37',
 		},
 	},

projects/plugins/jetpack/extensions/blocks/dialogue/components/timestamp-control.js

@@ -1,10 +1,7 @@
 /**
  * WordPress dependencies
  */
-import {
-	Dropdown,
-	Button,
-} from '@wordpress/components';
+import { Dropdown, Button } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
 
 /**

projects/plugins/jetpack/extensions/blocks/opentable/edit.js

@@ -18,7 +18,11 @@ import {
 	withNotices,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
-import { getBlockDefaultClassName, registerBlockStyle, unregisterBlockStyle } from '@wordpress/blocks';
+import {
+	getBlockDefaultClassName,
+	registerBlockStyle,
+	unregisterBlockStyle,
+} from '@wordpress/blocks';
 import { useEffect } from '@wordpress/element';
 
 /**
@@ -249,7 +253,8 @@ function OpenTableEdit( {
 	);
 
 	const editClasses = classnames( className, {
-		[ `is-style-${ style }` ]: ! isPlaceholder && styleValues.includes( style ) && className.indexOf( 'is-style' ) === -1,
+		[ `is-style-${ style }` ]:
+			! isPlaceholder && styleValues.includes( style ) && className.indexOf( 'is-style' ) === -1,
 		'is-placeholder': isPlaceholder,
 		'is-multi': 'multi' === getTypeAndTheme( style )[ 0 ],
 		[ `align${ align }` ]: align,

projects/plugins/jetpack/extensions/blocks/podcast-player/components/podcast-player.js

@@ -15,11 +15,7 @@ import { withDispatch, withSelect } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import {
-	STATE_ERROR,
-	STATE_PAUSED,
-	STORE_ID,
-} from '../../../store/media-source/constants';
+import { STATE_ERROR, STATE_PAUSED, STORE_ID } from '../../../store/media-source/constants';
 import AudioPlayer from '../../../shared/components/audio-player';
 import Playlist from './playlist';
 import Header from './header';
@@ -171,17 +167,11 @@ export class PodcastPlayer extends Component {
 	};
 
 	handleJump = () => {
-		this.props.setMediaSourceCurrentTime(
-			this.props.playerId,
-			this.props.currentTime - 5
-		);
+		this.props.setMediaSourceCurrentTime( this.props.playerId, this.props.currentTime - 5 );
 	};
 
 	handleSkip = () => {
-		this.props.setMediaSourceCurrentTime(
-			this.props.playerId,
-			this.props.currentTime + 30
-		);
+		this.props.setMediaSourceCurrentTime( this.props.playerId, this.props.currentTime + 30 );
 	};
 
 	componentDidMount() {
@@ -212,7 +202,16 @@ export class PodcastPlayer extends Component {
 	}
 
 	render() {
-		const { playerId, title, link, cover, tracks, attributes, currentTime, playerState } = this.props;
+		const {
+			playerId,
+			title,
+			link,
+			cover,
+			tracks,
+			attributes,
+			currentTime,
+			playerState,
+		} = this.props;
 		const {
 			itemsToShow,
 			primaryColor,
@@ -294,7 +293,7 @@ export class PodcastPlayer extends Component {
 						onPause={ this.handlePause }
 						onError={ this.handleError }
 						playStatus={ playerState }
-						currentTime	={ currentTime }
+						currentTime={ currentTime }
 						onTimeChange={ this.handleTimeChange }
 					/>
 				</Header>
@@ -354,14 +353,11 @@ export default compose( [
 	withErrorBoundary,
 	withSelect( ( select, props ) => {
 		const { playerId } = props;
-		const {
-			getMediaSourceCurrentTime,
-			getMediaPlayerState,
-		} = select( STORE_ID );
+		const { getMediaSourceCurrentTime, getMediaPlayerState } = select( STORE_ID );
 
 		return {
 			currentTime: getMediaSourceCurrentTime( playerId ),
-			playerState: getMediaPlayerState( playerId )
+			playerState: getMediaPlayerState( playerId ),
 		};
 	} ),
 	withDispatch( dispatch => {

projects/plugins/jetpack/extensions/blocks/podcast-player/view.js

@@ -1,4 +1,3 @@
-
 /**
  * External dependencies
  */

projects/plugins/jetpack/extensions/blocks/premium-content/_inc/access-check.php

@@ -0,0 +1,75 @@
+<?php
+/**
+ * Determine access to premium content.
+ *
+ * @package Automattic\Jetpack\Extensions\Premium_Content
+ */
+
+namespace Automattic\Jetpack\Extensions\Premium_Content;
+
+require __DIR__ . '/subscription-service/include.php';
+
+/**
+ * Determines if the memberships module is set up.
+ *
+ * @return bool Whether the memberships module is set up.
+ */
+function pre_render_checks() {
+	// If Jetpack is not yet configured, don't show anything ...
+	if ( ! class_exists( '\Jetpack_Memberships' ) ) {
+		return false;
+	}
+	// if stripe not connected don't show anything...
+	if ( empty( \Jetpack_Memberships::get_connected_account_id() ) ) {
+		return false;
+	}
+	return true;
+}
+
+/**
+ * Determines if the current user can view the protected content of the given block.
+ *
+ * @param array  $attributes Block attributes.
+ * @param object $block Block to check.
+ *
+ * @return bool Whether the use can view the content.
+ */
+function current_visitor_can_access( $attributes, $block ) {
+	$user = wp_get_current_user();
+
+	/**
+	 * If the current WordPress install has as signed in user
+	 * they can see the content.
+	 */
+	if ( 0 !== $user->ID && current_user_can( 'edit_post', get_the_ID() ) ) {
+		return true;
+	}
+
+	$selected_plan_id = null;
+
+	if ( isset( $attributes['selectedPlanId'] ) ) {
+		$selected_plan_id = (int) $attributes['selectedPlanId'];
+	}
+
+	if ( isset( $block ) && isset( $block->context['premium-content/planId'] ) ) {
+		$selected_plan_id = (int) $block->context['premium-content/planId'];
+	}
+
+	if ( empty( $selected_plan_id ) ) {
+		return false;
+	}
+
+	$paywall  = subscription_service();
+	$can_view = $paywall->visitor_can_view_content( array( $selected_plan_id ) );
+
+	if ( $can_view ) {
+		/**
+		 * Fires when a visitor can view protected content on a site.
+		 *
+		 * @since 9.4.0
+		 */
+		do_action( 'jetpack_earn_remove_cache_headers' );
+	}
+
+	return $can_view;
+}

projects/plugins/jetpack/extensions/blocks/premium-content/_inc/blocks.js

@@ -0,0 +1,21 @@
+/**
+ * WordPress dependencies
+ */
+import { InnerBlocks } from '@wordpress/block-editor';
+
+export default function Blocks() {
+	return (
+		<div className="premium-content-wrapper">
+			<InnerBlocks
+				allowedBlocks={ [ 'premium-content/subscriber-view', 'premium-content/logged-out-view' ] }
+				templateLock={ 'all' }
+				template={ [
+					[ 'premium-content/subscriber-view' ],
+					[ 'premium-content/logged-out-view' ],
+				] }
+				__experimentalCaptureToolbars={ true }
+				templateInsertUpdatesSelection={ false }
+			/>
+		</div>
+	);
+}

projects/plugins/jetpack/extensions/blocks/premium-content/_inc/context.js

@@ -0,0 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext } from '@wordpress/element';
+
+/**
+ * @typedef { import('react').ReactElement } ReactElement
+ * @typedef { import('./tab').Tab } Tab
+ * @typedef { (isSelected: boolean) => void } Callback
+ * @typedef { {selectedTab: Tab, stripeNudge: ?ReactElement } } TabbedInterface
+ */
+
+/**
+ * @type { TabbedInterface }
+ */
+const defaultContext = {
+	selectedTab: { id: '', className: '', label: <></> },
+	stripeNudge: null,
+};
+
+/**
+ * @typedef { import('react').Context<TabbedInterface> } TabContext
+ * @type { TabContext }
+ */
+const Context = createContext( defaultContext );
+
+export default Context;