@automattic/newspack-blocks 2.6.2 → 3.0.0-alpha.1

package/languages/newspack-blocks-pt_PT.po

@@ -743,30 +743,6 @@ msgstr ""
 msgid "Paused"
 msgstr ""
 
-#: dist/donateStreamlined.js:1
-#: release/newspack-blocks/dist/donateStreamlined.js:72
-msgid "Email address is invalid."
-msgstr ""
-
-#. Translators: %d is minimum donation amount set in Reader Revenue wizard or block attributes.
-#: dist/donateStreamlined.js:1
-#: release/newspack-blocks/dist/donateStreamlined.js:72
-msgid "Amount must be at least %d."
-msgstr ""
-
-#: dist/donateStreamlined.js:1
-#: release/newspack-blocks/dist/donateStreamlined.js:72
-msgid "Full name should be provided."
-msgstr ""
-
-#. Translators: %s is the email address of the current user.
-#: dist/donateStreamlined.js:1
-#: release/newspack-blocks/dist/donateStreamlined.js:72
-msgid ""
-"Your payment has been processed. Thank you for your contribution! You will "
-"receive a confirmation email at %s."
-msgstr ""
-
 #: dist/editor.js:41 release/newspack-blocks/dist/editor.js:2541
 #: release/newspack-blocks/src/blocks/author-list/edit.js:105
 #: release/newspack-blocks/src/blocks/author-list/edit.js:109
@@ -1885,22 +1861,6 @@ msgstr ""
 msgid "Remove Block"
 msgstr ""
 
-#: release/newspack-blocks/dist/donateStreamlined.js:61
-msgid "Error loading the reCaptcha library."
-msgstr ""
-
-#: release/newspack-blocks/dist/donateStreamlined.js:61
-msgid "Error processing captcha request."
-msgstr ""
-
-#: release/newspack-blocks/dist/donateStreamlined.js:61
-msgid "Something went wrong with the payment. Please try again later."
-msgstr ""
-
-#: release/newspack-blocks/dist/donateStreamlined.js:61
-msgid "Processing payment…"
-msgstr ""
-
 #: release/newspack-blocks/dist/editor.js:2541
 #: release/newspack-blocks/src/blocks/author-list/edit.js:224
 #: src/blocks/author-list/edit.js:224

package/languages/newspack-blocks.pot

@@ -759,28 +759,6 @@ msgstr ""
 msgid "Paused"
 msgstr ""
 
-#: dist/donateStreamlined.js:1
-#: release/newspack-blocks/dist/donateStreamlined.js:72
-msgid "Email address is invalid."
-msgstr ""
-
-#. Translators: %d is minimum donation amount set in Reader Revenue wizard or block attributes.
-#: dist/donateStreamlined.js:1
-#: release/newspack-blocks/dist/donateStreamlined.js:72
-msgid "Amount must be at least %d."
-msgstr ""
-
-#: dist/donateStreamlined.js:1
-#: release/newspack-blocks/dist/donateStreamlined.js:72
-msgid "Full name should be provided."
-msgstr ""
-
-#. Translators: %s is the email address of the current user.
-#: dist/donateStreamlined.js:1
-#: release/newspack-blocks/dist/donateStreamlined.js:72
-msgid "Your payment has been processed. Thank you for your contribution! You will receive a confirmation email at %s."
-msgstr ""
-
 #: dist/editor.js:41
 #: release/newspack-blocks/dist/editor.js:2541
 #: release/newspack-blocks/src/blocks/author-list/edit.js:105
@@ -2085,22 +2063,6 @@ msgstr ""
 msgid "Remove Block"
 msgstr ""
 
-#: release/newspack-blocks/dist/donateStreamlined.js:61
-msgid "Error loading the reCaptcha library."
-msgstr ""
-
-#: release/newspack-blocks/dist/donateStreamlined.js:61
-msgid "Error processing captcha request."
-msgstr ""
-
-#: release/newspack-blocks/dist/donateStreamlined.js:61
-msgid "Something went wrong with the payment. Please try again later."
-msgstr ""
-
-#: release/newspack-blocks/dist/donateStreamlined.js:61
-msgid "Processing payment…"
-msgstr ""
-
 #: release/newspack-blocks/dist/editor.js:2541
 #: release/newspack-blocks/src/blocks/author-list/edit.js:224
 #: src/blocks/author-list/edit.js:224

package/newspack-blocks.php

@@ -7,7 +7,7 @@
  * Author URI:      https://newspack.com/
  * Text Domain:     newspack-blocks
  * Domain Path:     /languages
- * Version:         2.6.2
+ * Version:         3.0.0-alpha.1
  *
  * @package         Newspack_Blocks
  */
@@ -15,7 +15,7 @@
 define( 'NEWSPACK_BLOCKS__PLUGIN_FILE', __FILE__ );
 define( 'NEWSPACK_BLOCKS__BLOCKS_DIRECTORY', 'dist/' );
 define( 'NEWSPACK_BLOCKS__PLUGIN_DIR', plugin_dir_path( NEWSPACK_BLOCKS__PLUGIN_FILE ) );
-define( 'NEWSPACK_BLOCKS__VERSION', '2.6.2' );
+define( 'NEWSPACK_BLOCKS__VERSION', '3.0.0-alpha.1' );
 
 require_once NEWSPACK_BLOCKS__PLUGIN_DIR . 'includes/class-newspack-blocks.php';
 require_once NEWSPACK_BLOCKS__PLUGIN_DIR . 'includes/class-newspack-blocks-api.php';
@@ -31,9 +31,6 @@ require_once NEWSPACK_BLOCKS__PLUGIN_DIR . 'src/blocks/author-profile/class-wp-r
 // REST Controller for Author List Block.
 require_once NEWSPACK_BLOCKS__PLUGIN_DIR . 'src/blocks/author-list/class-wp-rest-newspack-author-list-controller.php';
 
-// REST Controller for Donate Block.
-require_once NEWSPACK_BLOCKS__PLUGIN_DIR . 'src/blocks/donate/class-wp-rest-newspack-donate-controller.php';
-
 // REST Controller for Iframe Block.
 require_once NEWSPACK_BLOCKS__PLUGIN_DIR . 'src/blocks/iframe/class-wp-rest-newspack-iframe-controller.php';
 
@@ -64,15 +61,6 @@ function newspack_author_list_block_register_rest_routes() { // phpcs:ignore Wor
 }
 add_action( 'rest_api_init', 'newspack_author_list_block_register_rest_routes' );
 
-/**
- * Registers Donate block routes.
- */
-function newspack_donate_block_register_rest_routes() { // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedFunctionFound
-	$donate_controller = new WP_REST_Newspack_Donate_Controller();
-	$donate_controller->register_routes();
-}
-add_action( 'rest_api_init', 'newspack_donate_block_register_rest_routes' );
-
 /**
  * Registers Iframe block routes.
  */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/newspack-blocks",
-	"version": "2.6.2",
+	"version": "3.0.0-alpha.1",
 	"author": "Automattic",
 	"devDependencies": {
 		"@rushstack/eslint-patch": "^1.5.1",
@@ -12,22 +12,21 @@
 		"fetch-mock-jest": "^1.5.1",
 		"html-entities": "^2.4.0",
 		"identity-obj-proxy": "^3.0.0",
-		"lint-staged": "^13.2.3",
-		"newspack-scripts": "^5.1.0",
+		"lint-staged": "^15.2.2",
+		"newspack-scripts": "^5.3.0",
 		"postcss-scss": "^4.0.9",
 		"prettier": "npm:wp-prettier@^2.6.2-beta-1",
 		"stylelint": "^15.11.0"
 	},
 	"description": "=== Newspack Blocks === Contributors: (this should be a list of wordpress.org userid's) Donate link: https://example.com/ Tags: comments, spam Requires at least: 4.5 Tested up to: 5.1.1 Stable tag: 0.1.0 License: GPLv2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html",
 	"dependencies": {
-		"@stripe/stripe-js": "^2.2.0",
-		"classnames": "^2.3.2",
+		"classnames": "^2.5.1",
 		"lodash": "^4.17.21",
-		"newspack-components": "^2.1.0",
+		"newspack-components": "^2.2.1",
 		"react": "^17.0.2",
 		"redux": "^4.2.1",
-		"redux-saga": "^1.2.3",
-		"regenerator-runtime": "^0.14.0",
+		"redux-saga": "^1.3.0",
+		"regenerator-runtime": "^0.14.1",
 		"swiper": "10.3.1"
 	},
 	"scripts": {

package/src/blocks/checkout-button/edit.js

@@ -1,4 +1,6 @@
 /* eslint-disable @wordpress/no-unsafe-wp-apis */
+/* globals newspack_blocks_data */
+
 /**
  * External dependencies
  */
@@ -47,7 +49,9 @@ function getVariationName( variation ) {
 
 function getNYP( product ) {
 	return {
-		isNYP: product?.meta_data?.some( meta => meta.key === '_nyp' && meta.value === 'yes' ),
+		isNYP:
+			newspack_blocks_data?.can_use_name_your_price &&
+			product?.meta_data?.some( meta => meta.key === '_nyp' && meta.value === 'yes' ),
 		suggestedPrice: product?.meta_data?.find( meta => meta.key === '_suggested_price' )?.value,
 		minPrice: product?.meta_data?.find( meta => meta.key === '_min_price' )?.value,
 		maxPrice: product?.meta_data?.find( meta => meta.key === '_maximum_price' )?.value,

package/src/blocks/donate/block.json

@@ -28,14 +28,6 @@
 			"type": "string",
 			"default": "Donate Now"
 		},
-		"buttonWithCCText": {
-			"type": "string",
-			"default": "Donate with card"
-		},
-		"paymentRequestType": {
-			"type": "string",
-			"default": "donate"
-		},
 		"defaultFrequency": {
 			"type": "string",
 			"default": "month"
@@ -87,10 +79,6 @@
 				}
 			]
 		},
-		"additionalFields": {
-			"type": "array",
-			"default": []
-		},
 		"afterSuccessBehavior": {
 			"type": "string"
 		},

package/src/blocks/donate/edit/FrequencyBasedLayout.tsx

@@ -8,26 +8,15 @@ import classNames from 'classnames';
  */
 import { __ } from '@wordpress/i18n';
 import { useMemo, useEffect, useRef, useState } from '@wordpress/element';
-import { SelectControl } from '@wordpress/components';
 import { RichText } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import { AmountValueInput } from './components';
-import { getColorForContrast } from '../utils';
+import { getColorForContrast, getFrequencyLabel } from '../utils';
 import { FREQUENCIES } from '../consts';
-import type { DonateBlockAttributes, ComponentProps, DonationFrequencySlug } from '../types';
-
-const PAYMENT_REQUEST_BUTTON_TYPE_OPTIONS: {
-	label: string;
-	value: DonateBlockAttributes[ 'paymentRequestType' ];
-}[] = [
-	{ label: __( 'Donate', 'newspack-blocks' ), value: 'donate' },
-	{ label: __( 'Pay', 'newspack-blocks' ), value: 'default' },
-	{ label: __( 'Book', 'newspack-blocks' ), value: 'book' },
-	{ label: __( 'Buy', 'newspack-blocks' ), value: 'buy' },
-];
+import type { ComponentProps, DonationFrequencySlug } from '../types';
 
 const FrequencyBasedLayout = ( props: { isTiered: boolean } & ComponentProps ) => {
 	// Unique identifier to prevent collisions with other Donate blocks' labels.
@@ -65,11 +54,8 @@ const FrequencyBasedLayout = ( props: { isTiered: boolean } & ComponentProps ) =
 		}
 	}, [ attributes.defaultFrequency ] );
 
-	const isRenderingStripePaymentForm =
-		window.newspack_blocks_data?.is_rendering_stripe_payment_form;
-
 	const [ selectedFrequency, setSelectedFrequency ] = useState( attributes.defaultFrequency );
-
+	const canUseNameYourPrice = window.newspack_blocks_data?.can_use_name_your_price;
 	const renderFrequencySelect = ( frequencySlug: DonationFrequencySlug ) => (
 		<>
 			<input
@@ -110,31 +96,59 @@ const FrequencyBasedLayout = ( props: { isTiered: boolean } & ComponentProps ) =
 		<div className="wp-block-newspack-blocks-donate__options">
 			<div className="wp-block-newspack-blocks-donate__frequencies frequencies">
 				<div className="tab-container">{ availableFrequencies.map( renderTab ) }</div>
-				{ availableFrequencies.map( frequencySlug => (
-					<div
-						className="wp-block-newspack-blocks-donate__frequency frequency"
-						key={ frequencySlug }
-					>
-						{ renderFrequencySelect( frequencySlug ) }
-						<div className="input-container">
-							<label
-								className="donate-label"
-								htmlFor={ 'newspack-' + frequencySlug + '-' + uid + '-untiered-input' }
-							>
-								{ __( 'Donation amount', 'newspack-blocks' ) }
-							</label>
-							<div className="wp-block-newspack-blocks-donate__money-input money-input">
-								<span className="currency">{ settings.currencySymbol }</span>
-								<AmountValueInput
-									{ ...props }
-									frequencySlug={ frequencySlug }
-									tierIndex={ 3 }
-									id={ `newspack-${ frequencySlug }-${ uid }-untiered-input` }
-								/>
+				{ availableFrequencies.map( frequencySlug => {
+					const untieredAmount = amounts[ frequencySlug ][ 3 ];
+					return (
+						<div
+							className="wp-block-newspack-blocks-donate__frequency frequency"
+							key={ frequencySlug }
+						>
+							{ renderFrequencySelect( frequencySlug ) }
+							<div className="input-container">
+								{ canUseNameYourPrice ? (
+									<>
+										<label
+											className="donate-label"
+											htmlFor={ 'newspack-' + frequencySlug + '-' + uid + '-untiered-input' }
+										>
+											{ __( 'Donation amount', 'newspack-blocks' ) }
+										</label>
+										<div className="wp-block-newspack-blocks-donate__money-input money-input">
+											<span className="currency">{ settings.currencySymbol }</span>
+											<AmountValueInput
+												{ ...props }
+												frequencySlug={ frequencySlug }
+												tierIndex={ 3 }
+												id={ `newspack-${ frequencySlug }-${ uid }-untiered-input` }
+											/>
+										</div>
+									</>
+								) : (
+									<>
+										<input
+											type="radio"
+											value={ untieredAmount }
+											className={ 'frequency-input' }
+											id={ `newspack-${ frequencySlug }-${ uid }-untiered-input` }
+											name={ `donation_value_${ frequencySlug }` }
+											defaultChecked={ true }
+										/>
+										<label
+											className="tier-select-label tier-label"
+											htmlFor={ `newspack-${ frequencySlug }-${ uid }-untiered-input` }
+										>
+											<div
+												dangerouslySetInnerHTML={ {
+													__html: getFrequencyLabel( untieredAmount, frequencySlug ),
+												} }
+											/>
+										</label>
+									</>
+								) }
 							</div>
 						</div>
-					</div>
-				) ) }
+					);
+				} ) }
 			</div>
 		</div>
 	);
@@ -208,31 +222,15 @@ const FrequencyBasedLayout = ( props: { isTiered: boolean } & ComponentProps ) =
 				color: getColorForContrast( attributes.buttonColor ),
 			} }
 		>
-			{ isRenderingStripePaymentForm ? (
-				<RichText
-					onChange={ ( value: string ) => setAttributes( { buttonWithCCText: value } ) }
-					placeholder={ __( 'Button text…', 'newspack-blocks' ) }
-					value={ attributes.buttonWithCCText }
-					tagName="span"
-				/>
-			) : (
-				<RichText
-					onChange={ ( value: string ) => setAttributes( { buttonText: value } ) }
-					placeholder={ __( 'Button text…', 'newspack-blocks' ) }
-					value={ attributes.buttonText }
-					tagName="span"
-				/>
-			) }
+			<RichText
+				onChange={ ( value: string ) => setAttributes( { buttonText: value } ) }
+				placeholder={ __( 'Button text…', 'newspack-blocks' ) }
+				value={ attributes.buttonText }
+				tagName="span"
+			/>
 		</div>
 	);
 
-	const selectedPaymentRequestTypeOption = PAYMENT_REQUEST_BUTTON_TYPE_OPTIONS.find(
-		option => option.value === attributes.paymentRequestType
-	);
-	const selectedPaymentRequestType = selectedPaymentRequestTypeOption
-		? selectedPaymentRequestTypeOption.value
-		: 'donate';
-
 	const renderFooter = () => (
 		<>
 			<p className="wp-block-newspack-blocks-donate__thanks thanks">
@@ -243,50 +241,7 @@ const FrequencyBasedLayout = ( props: { isTiered: boolean } & ComponentProps ) =
 					tagName="span"
 				/>
 			</p>
-			{ isRenderingStripePaymentForm ? (
-				<div className="wp-block-newspack-blocks-donate__stripe stripe-payment">
-					<div className="stripe-payment__inputs">
-						<input
-							className="stripe-payment__element stripe-payment__card"
-							type="text"
-							placeholder={ __( 'Card number', 'newspack-blocks' ) }
-						/>
-						<div className="stripe-payment__row stripe-payment__row--flex">
-							<input required placeholder="Email" type="email" name="email" />
-							<input required placeholder="Full Name" type="text" name="full_name" />
-						</div>
-						<div className="stripe-payment__row stripe-payment__row--additional-fields">
-							{ attributes.additionalFields.map( ( field, index ) => (
-								<input
-									key={ index }
-									type="text"
-									name={ field.name }
-									placeholder={ field.label }
-									style={ { width: `calc(${ field.width }% - 0.5rem)` } }
-								/>
-							) ) }
-						</div>
-					</div>
-
-					<div className="stripe-payment__row stripe-payment__row--flex stripe-payment__footer">
-						<div className="stripe-payment__methods">
-							<div className="stripe-payment__request-button">
-								<SelectControl
-									options={ PAYMENT_REQUEST_BUTTON_TYPE_OPTIONS }
-									value={ selectedPaymentRequestType }
-									onChange={ (
-										paymentRequestType: DonateBlockAttributes[ 'paymentRequestType' ]
-									) => setAttributes( { paymentRequestType } ) }
-								/>
-								{ __( 'with Apple/Google Pay', 'newspack-blocks' ) }
-							</div>
-							{ renderButton() }
-						</div>
-					</div>
-				</div>
-			) : (
-				renderButton()
-			) }
+			{ renderButton() }
 		</>
 	);
 

package/src/blocks/donate/edit/TierBasedLayout.tsx

@@ -9,26 +9,10 @@ import classNames from 'classnames';
 /**
  * Internal dependencies
  */
-import type {
-	ComponentProps,
-	DonationFrequencySlug,
-	DonateBlockAttributes,
-	TierBasedOptionValue,
-} from '../types';
-import { getColorForContrast } from '../utils';
+import type { ComponentProps, DonateBlockAttributes, TierBasedOptionValue } from '../types';
+import { getColorForContrast, getFrequencyLabel } from '../utils';
 import { FREQUENCIES, DISABLED_IN_TIERS_BASED_LAYOUT_TIER_INDEX } from '../consts';
 
-const getFrequencyLabel = ( frequencySlug: DonationFrequencySlug ) => {
-	switch ( frequencySlug ) {
-		case 'once':
-			return __( 'once', 'newspack-blocks' );
-		case 'month':
-			return __( 'per month', 'newspack-blocks' );
-		case 'year':
-			return __( 'per year', 'newspack-blocks' );
-	}
-};
-
 const TierBasedLayout = ( props: ComponentProps ) => {
 	const { amounts, availableFrequencies, attributes } = props;
 	const [ currentFrequency, setCurrencyFrequency ] = useState( availableFrequencies[ 0 ] );
@@ -108,14 +92,11 @@ const TierBasedLayout = ( props: ComponentProps ) => {
 								</h3>
 							</div>
 							<div className="wpbnbd__tiers__amount">
-								<h3 className="wpbnbd__tiers__amount__number">
-									{ props.settings.currencySymbol }
-									<span>{ amount }</span>
-								</h3>
-								<span className="wpbnbd__tiers__amount__frequency">
-									{ ' ' }
-									{ getFrequencyLabel( currentFrequency ) }
-								</span>
+								<div
+									dangerouslySetInnerHTML={ {
+										__html: getFrequencyLabel( amount, currentFrequency ),
+									} }
+								/>
 							</div>
 							<div
 								className="submit-button"

package/src/blocks/donate/edit/components/index.tsx

@@ -1,2 +1 @@
 export { default as AmountValueInput } from './AmountValueInput';
-export { default as AdditionalFields } from './AdditionalFields';