@automattic/newspack-blocks 1.37.0 → 1.48.0

package/src/blocks/donate/edit.js

@@ -8,7 +8,7 @@ import classNames from 'classnames';
  */
 import { __, sprintf } from '@wordpress/i18n';
 import apiFetch from '@wordpress/api-fetch';
-import { Component, Fragment } from '@wordpress/element';
+import { Component } from '@wordpress/element';
 import {
 	PanelBody,
 	ExternalLink,
@@ -320,12 +320,16 @@ class Edit extends Component {
 		const { buttonText } = attributes;
 		return (
 			<button type="submit" onClick={ evt => evt.preventDefault() }>
-				<RichText
-					onChange={ value => setAttributes( { buttonText: value } ) }
-					placeholder={ __( 'Button text…', 'newspack-blocks' ) }
-					value={ buttonText }
-					tagName="span"
-				/>
+				{ this.isRenderingStreamlinedBlock() ? (
+					__( 'Donate with card', 'newspack-blocks' )
+				) : (
+					<RichText
+						onChange={ value => setAttributes( { buttonText: value } ) }
+						placeholder={ __( 'Button text…', 'newspack-blocks' ) }
+						value={ buttonText }
+						tagName="span"
+					/>
+				) }
 			</button>
 		);
 	}
@@ -346,7 +350,12 @@ class Edit extends Component {
 				{ this.isRenderingStreamlinedBlock() ? (
 					<div className="wp-block-newspack-blocks-donate__stripe stripe-payment">
 						<div className="stripe-payment__row stripe-payment__row--flex stripe-payment__footer">
-							{ this.renderButton() }
+							<div className="stripe-payment__methods">
+								<div className="stripe-payment__request-button">
+									{ __( 'Apple/Google Pay Button', 'newspack-blocks' ) }
+								</div>
+								{ this.renderButton() }
+							</div>
 							<a
 								target="_blank"
 								rel="noreferrer"
@@ -421,7 +430,7 @@ class Edit extends Component {
 		const { setAttributes } = this.props;
 		const { currencySymbol, suggestedAmounts, suggestedAmountUntiered, tiered } = this.blockData();
 		return (
-			<Fragment>
+			<>
 				<ToggleControl
 					key="tiered"
 					checked={ tiered }
@@ -429,7 +438,7 @@ class Edit extends Component {
 					label={ __( 'Tiered', 'newspack-blocks' ) }
 				/>
 				{ tiered && (
-					<Fragment>
+					<>
 						<TextControl
 							key="low-tier"
 							/* Translators: %s: the symbol for the current currency */
@@ -480,7 +489,7 @@ class Edit extends Component {
 								} )
 							}
 						/>
-					</Fragment>
+					</>
 				) }
 				{ ! tiered && (
 					<TextControl
@@ -496,7 +505,7 @@ class Edit extends Component {
 						}
 					/>
 				) }
-			</Fragment>
+			</>
 		);
 	}
 
@@ -504,38 +513,11 @@ class Edit extends Component {
 		const { setAttributes } = this.props;
 		const { manual, campaign, defaultFrequency } = this.blockData();
 		return (
-			<Fragment>
+			<>
 				{ this.renderPlaceholder() }
 				{ this.renderForm() }
 				<InspectorControls>
-					<PanelBody>
-						<ToggleControl
-							key="manual"
-							checked={ manual }
-							onChange={ this.manualChanged }
-							label={ __( 'Configure manually', 'newspack-blocks' ) }
-						/>
-						{ ! manual && (
-							<Fragment>
-								<p>
-									{ __(
-										'The Donate Block allows you to collect donations from readers. The fields are automatically defined based on your donation settings.',
-										'newspack-blocks'
-									) }
-								</p>
-
-								<ExternalLink href="/wp-admin/admin.php?page=newspack-reader-revenue-wizard#/donations">
-									{ __( 'Edit donation settings.', 'newspack-blocks' ) }
-								</ExternalLink>
-							</Fragment>
-						) }
-					</PanelBody>
-					{ manual && (
-						<PanelBody title={ __( 'Manual Settings', 'newspack-blocks' ) }>
-							{ this.renderManualControls() }
-						</PanelBody>
-					) }
-					<PanelBody>
+					<PanelBody title={ __( 'Donate Settings', 'newspack-blocks' ) }>
 						<SelectControl
 							label={ __( 'Default Tab', 'newspack' ) }
 							value={ defaultFrequency }
@@ -559,7 +541,32 @@ class Edit extends Component {
 								} );
 							} }
 						/>
+						<ToggleControl
+							key="manual"
+							checked={ manual }
+							onChange={ this.manualChanged }
+							label={ __( 'Configure manually', 'newspack-blocks' ) }
+						/>
+						{ ! manual && (
+							<>
+								<p>
+									{ __(
+										'The Donate Block allows you to collect donations from readers. The fields are automatically defined based on your donation settings.',
+										'newspack-blocks'
+									) }
+								</p>
+
+								<ExternalLink href="/wp-admin/admin.php?page=newspack-reader-revenue-wizard#/donations">
+									{ __( 'Edit donation setting', 'newspack-blocks' ) }
+								</ExternalLink>
+							</>
+						) }
 					</PanelBody>
+					{ manual && (
+						<PanelBody title={ __( 'Donation Amount', 'newspack-blocks' ) }>
+							{ this.renderManualControls() }
+						</PanelBody>
+					) }
 					<PanelBody title={ __( 'Campaign', 'newspack-blocks' ) } initialOpen={ false }>
 						<TextControl
 							label={ __( 'Campaign ID', 'newspack-blocks' ) }
@@ -572,7 +579,7 @@ class Edit extends Component {
 						/>
 					</PanelBody>
 				</InspectorControls>
-			</Fragment>
+			</>
 		);
 	}
 }

package/src/blocks/donate/editor.scss

@@ -1,11 +1,10 @@
 @import '../../shared/sass/colors';
 @import '../../shared/sass/variables';
 
-@import './streamlined.scss';
+@import './streamlined/style.scss';
 
 .wp-block-newspack-blocks-donate {
 	button[type='submit'] {
-		background: $color__secondary;
 		border: none;
 		border-radius: 5px;
 		box-sizing: border-box;
@@ -13,8 +12,33 @@
 		font-size: $font__size-sm;
 		font-weight: bold;
 		outline: none;
-		line-height: 3em;
+		line-height: 3;
 		padding-left: 20px;
 		padding-right: 20px;
 	}
+	.stripe-payment {
+		&__methods {
+			> * {
+				line-height: 46px !important;
+			}
+		}
+		&__request-button {
+			font-size: 0.8em;
+			border-radius: 5px;
+			color: $color__secondary;
+			border: $color__secondary 1px dashed;
+			padding: 0 20px;
+			opacity: 0.5;
+		}
+	}
+}
+
+.block-editor-block-list__layout
+	.block-editor-block-list__block
+	.wp-block-newspack-blocks-donate.tiered.is-style-minimal
+	.wp-block-newspack-blocks-donate__tiers
+	input[type='radio']:checked
+	+ .tier-select-label {
+	background: transparent;
+	color: $color__text-main;
 }

package/src/blocks/donate/index.js

@@ -1,8 +1,10 @@
 /**
  * WordPress dependencies
  */
+import { ExternalLink } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { Icon, payment } from '@wordpress/icons';
+import { registerBlockStyle } from '@wordpress/blocks';
+import { payment } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -21,7 +23,7 @@ export const title = __( 'Donate', 'newspack-blocks' );
 export const settings = {
 	title,
 	icon: {
-		src: <Icon icon={ payment } />,
+		src: payment,
 		foreground: '#36f',
 	},
 	category: 'newspack',
@@ -30,7 +32,19 @@ export const settings = {
 		__( 'memberships', 'newspack-blocks' ),
 		__( 'subscriptions', 'newspack-blocks' ),
 	],
-	description: __( 'Enable donations.', 'newspack-blocks' ),
+	description: (
+		<>
+			<p>
+				{ __(
+					'Manually place a donation block on any post or page on your site.',
+					'newspack-blocks'
+				) }
+			</p>
+			<ExternalLink href={ __( 'https://newspack.pub/support/blocks/donate-block/' ) }>
+				{ __( 'Support reference', 'newspack-blocks' ) }
+			</ExternalLink>
+		</>
+	),
 	attributes: {
 		className: {
 			type: 'string',
@@ -59,7 +73,7 @@ export const settings = {
 		},
 		buttonText: {
 			type: 'string',
-			default: __( 'Donate now!', 'newspack-blocks' ),
+			default: __( 'Donate Now', 'newspack-blocks' ),
 		},
 		defaultFrequency: {
 			type: 'string',
@@ -73,3 +87,16 @@ export const settings = {
 	edit,
 	save: () => null, // to use view.php
 };
+
+/**
+ * Block Styles
+ */
+registerBlockStyle( 'newspack-blocks/donate', {
+	name: 'alternate',
+	label: __( 'Alternate', 'newapack-blocks' ),
+} );
+
+registerBlockStyle( 'newspack-blocks/donate', {
+	name: 'minimal',
+	label: __( 'Minimal', 'newapack-blocks' ),
+} );

package/src/blocks/donate/streamlined/index.js

@@ -0,0 +1,248 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * External dependencies
+ */
+import { loadStripe } from '@stripe/stripe-js/pure';
+import 'regenerator-runtime'; // Required in WP >=5.8.
+
+/**
+ * Internal dependencies
+ */
+import * as utils from './utils';
+import './style.scss';
+
+export const processStreamlinedElements = ( parentElement = document ) =>
+	[ ...parentElement.querySelectorAll( '.stripe-payment' ) ].forEach( async el => {
+		let stripe, cardElement, paymentRequest, paymentMethod, paymentRequestToken;
+
+		const formElement = el.closest( 'form' );
+		const messagesEl = el.querySelector( '.stripe-payment__messages' );
+
+		const settings = utils.getSettings( formElement );
+
+		const disableForm = () => el.classList.add( 'stripe-payment--disabled' );
+		const enableForm = () => el.classList.remove( 'stripe-payment--disabled' );
+		enableForm();
+
+		// Universal payment handling, for both card and payment request button flows.
+		// In card flow, this will happen after user submits their card data in the HTML form.
+		// In payment request flow, this will happen after the user validates the payment in
+		// the browser/OS UI.
+		const payWithToken = async (
+			token,
+			/**
+			 * Overrides for sent donation data. In a card flow the data is
+			 * provided explicitly by the user (via the form), but in payment request flow
+			 * the data is from the payment request event.
+			 */
+			requestPayloadOverrides = {}
+		) => {
+			const formValues = utils.getFormValues( formElement );
+			const apiRequestPayload = {
+				tokenData: token,
+				amount: utils.getTotalAmount( formElement ),
+				email: formValues.email,
+				full_name: formValues.full_name,
+				frequency: formValues.donation_frequency,
+				newsletter_opt_in: Boolean( formValues.newsletter_opt_in ),
+				clientId: formValues.cid,
+				...requestPayloadOverrides,
+			};
+			const chargeResultData = await utils.sendAPIRequest( '/donate', apiRequestPayload );
+
+			// Error handling.
+			if ( chargeResultData.data?.status !== 200 && chargeResultData.message ) {
+				utils.renderMessages( [ chargeResultData.message ], messagesEl );
+				return { error: true };
+			}
+			if ( chargeResultData.error ) {
+				utils.renderMessages( [ chargeResultData.error ], messagesEl );
+				return { error: true };
+			}
+
+			const exitWithError = errorMessage => {
+				utils.renderMessages( [ errorMessage ], messagesEl );
+				enableForm();
+				return { error: true };
+			};
+
+			// Additional steps handling.
+			if ( chargeResultData.client_secret && paymentMethod ) {
+				const confirmationResult = await stripe.confirmCardPayment(
+					chargeResultData.client_secret,
+					{
+						payment_method: paymentMethod,
+					}
+				);
+
+				if ( confirmationResult.error ) {
+					return exitWithError( confirmationResult.error.message );
+				} else if ( confirmationResult.paymentIntent.status === 'succeeded' ) {
+					utils.renderSuccessMessageWithEmail( apiRequestPayload.email, messagesEl );
+				} else if ( confirmationResult.paymentIntent.status === 'requires_action' ) {
+					// Could not test this flow (with 3D Secure test cards), but it's listed in the docs:
+					// https://stripe.com/docs/stripe-js/elements/payment-request-button#html-js-complete-payment
+					const { error: confirmationError } = await stripe.confirmCardPayment(
+						chargeResultData.client_secret
+					);
+					if ( confirmationError ) {
+						return exitWithError( confirmationError.message );
+					}
+					utils.renderSuccessMessageWithEmail( apiRequestPayload.email, messagesEl );
+				} else {
+					return exitWithError(
+						__(
+							'Something went wrong with the payment. Please try again later.',
+							'newspack-blocks'
+						)
+					);
+				}
+			}
+
+			if ( chargeResultData.status === 'success' ) {
+				utils.renderSuccessMessageWithEmail( apiRequestPayload.email, messagesEl );
+			}
+			return {};
+		};
+
+		const initStripe = async () => {
+			stripe = await loadStripe( settings.stripePublishableKey );
+
+			const elements = stripe.elements();
+
+			// Handle card element.
+			cardElement = elements.create( 'card' );
+			cardElement.mount( el.querySelector( '.stripe-payment__card' ) );
+
+			// Handle payment request button (Apple/Google Pay). This has to be initialised to see if
+			// such payments are available in the browser (canMakePayment method).
+			paymentRequest = stripe.paymentRequest( {
+				country: settings.countryCode,
+				currency: settings.currency,
+				total: utils.getPaymentRequestTotal( formElement ),
+				// Docs: Use the requestPayerName parameter to collect the payer’s billing address for Apple Pay.
+				requestPayerName: true,
+				requestPayerEmail: true,
+			} );
+
+			const rendersPaymentRequestButton = await paymentRequest.canMakePayment();
+			if ( rendersPaymentRequestButton ) {
+				paymentRequest.on( 'token', async event => {
+					paymentRequestToken = event.token;
+				} );
+				paymentRequest.on( 'paymentmethod', async event => {
+					// Save payment method ID to use it in payWithToken if a client secret is returned.
+					paymentMethod = event.paymentMethod.id;
+					const result = await payWithToken( paymentRequestToken, {
+						email: event.payerEmail,
+						full_name: event.payerName,
+						payment_method_id: paymentMethod,
+					} );
+					// The UI messages are handled in payWithToken, this event listener only
+					// has to notify the browser that the payment is done.
+					event.complete( result.error ? 'fail' : 'success' );
+				} );
+				// Update payment request when the form values are updated.
+				formElement.addEventListener( 'change', () => {
+					paymentRequest.update( {
+						total: utils.getPaymentRequestTotal( formElement ),
+					} );
+				} );
+				// Create and mount the payment request button.
+				const prButton = elements.create( 'paymentRequestButton', {
+					paymentRequest,
+					style: {
+						paymentRequestButton: {
+							type: 'donate',
+							height: '46px',
+						},
+					},
+				} );
+				const prButtonElement = el.querySelector( '.stripe-payment__request-button' );
+				prButton.mount( prButtonElement );
+				prButtonElement.classList.remove( 'stripe-payment--hidden' );
+				setTimeout( () => {
+					prButtonElement.classList.remove( 'stripe-payment__request-button--invisible' );
+				}, 0 );
+			}
+
+			el.classList.remove( 'stripe-payment--invisible' );
+		};
+
+		initStripe();
+
+		// Card form unravelling.
+		const submitButtonEl = el.querySelector( 'button[type="submit"]' );
+		submitButtonEl.onclick = e => {
+			const inputsHiddenEl = el.querySelector( '.stripe-payment__inputs.stripe-payment--hidden' );
+			if ( inputsHiddenEl ) {
+				e.preventDefault();
+				inputsHiddenEl.classList.remove( 'stripe-payment--hidden' );
+			}
+		};
+
+		const updateFeesAmount = () => {
+			const feesAmountEl = el.querySelector( '#stripe-fees-amount' );
+			if ( feesAmountEl ) {
+				const formValues = Object.fromEntries( new FormData( formElement ) );
+				const feeAmount = utils.getFeeAmount( formElement );
+				feesAmountEl.innerHTML = `(${ settings.currencySymbol }${ feeAmount.toFixed(
+					2
+				) } ${ settings.frequencies[ formValues.donation_frequency ].toLowerCase() })`;
+			}
+		};
+
+		updateFeesAmount();
+		formElement.addEventListener( 'change', updateFeesAmount );
+
+		// Card payment flow – on form submission.
+		formElement.addEventListener( 'submit', async e => {
+			e.preventDefault();
+			disableForm();
+			utils.renderMessages(
+				[ __( 'Processing payment…', 'newspack-blocks' ) ],
+				messagesEl,
+				'info'
+			);
+
+			const formValues = utils.getFormValues( formElement );
+			const validationErrors = Object.values( utils.validateFormData( formValues ) );
+			if ( validationErrors.length > 0 ) {
+				utils.renderMessages( validationErrors, messagesEl );
+				enableForm();
+				return;
+			}
+
+			const handleStripeSDKError = error => {
+				validationErrors.push( error.message );
+				utils.renderMessages( validationErrors, messagesEl );
+				enableForm();
+			};
+
+			const stripeTokenCreationResult = await stripe.createToken( cardElement );
+			if ( stripeTokenCreationResult.error ) {
+				handleStripeSDKError( stripeTokenCreationResult.error );
+				return;
+			}
+			const paymentMethodCreationResult = await stripe.createPaymentMethod( {
+				type: 'card',
+				card: cardElement,
+				billing_details: { name: formValues.full_name, email: formValues.email },
+			} );
+			if ( paymentMethodCreationResult.error ) {
+				handleStripeSDKError( paymentMethodCreationResult.error );
+				return;
+			}
+			// Save payment method ID to use it in payWithToken if a client secret is returned.
+			paymentMethod = { card: cardElement };
+			await payWithToken( stripeTokenCreationResult.token, {
+				payment_method_id: paymentMethodCreationResult.paymentMethod.id,
+			} );
+		} );
+	} );
+
+processStreamlinedElements();

package/src/blocks/donate/streamlined/index.test.js

@@ -0,0 +1,125 @@
+import * as testingLibrary from '@testing-library/dom';
+import userEvent from '@testing-library/user-event';
+import fetchMock from 'fetch-mock-jest';
+import { encode } from 'html-entities';
+
+import { processStreamlinedElements } from '.';
+
+const MONTHLY_AMOUNT = 7;
+
+const createDOM = settings => {
+	const parentElement = document.createElement( 'div' );
+	parentElement.innerHTML = `
+		<style>.stripe-payment--hidden {display:none;}</style>
+		<form data-settings="${ encode( JSON.stringify( settings ) ) }">
+			<div class='frequencies'>
+				<div class='frequency'>
+					<input type="radio" value="once" id="once" name="donation_frequency">
+					<label for="once">Once</label>
+					<input type="number" name="donation_value_once" value="${ MONTHLY_AMOUNT * 12 }" />
+				</div>
+				<div class='frequency'>
+					<input type="radio" value="month" id="month" name="donation_frequency" checked>
+					<label for="month">Monthly</label>
+					<input type="number" name="donation_value_month" value="${ MONTHLY_AMOUNT }" />
+				</div>
+			</div>
+			<div class="stripe-payment">
+				<div class="stripe-payment__inputs stripe-payment--hidden">
+					<input required="" placeholder="Email" type="email" name="email" value="">
+					<input required="" placeholder="Full Name" type="text" name="full_name" value="">
+				</div>
+				<label>
+					<input type="checkbox" name="agree_to_pay_fees" checked value="true">Agree to pay fees?
+					<span id="stripe-fees-amount">($0)</span>
+				</label>
+				<div class="stripe-payment__messages"></div>
+				<button type="submit">Donate</button>
+			</div>
+			<input name="cid" type="hidden" value="amp-123" />
+		</form>
+	`;
+	document.body.appendChild( parentElement );
+	return document.body;
+};
+
+fetchMock.post( '/wp-json/newspack-blocks/v1/donate', () => {
+	return { status: 'success', client_secret: 'sec_123' };
+} );
+
+const frequencies = { once: 'Once', month: 'Monthly', year: 'Annually' };
+const feeMultiplier = '2.9';
+const feeStatic = '0.3';
+const settings = [ 'USD', '$', 'Testing Site', false, 'US', frequencies, feeMultiplier, feeStatic ];
+
+describe( 'Streamlined Donate block processing', () => {
+	const container = createDOM( settings );
+	processStreamlinedElements( container );
+
+	const button = testingLibrary.getByText( container, 'Donate' );
+	const emailInput = testingLibrary.getByPlaceholderText( container, 'Email' );
+	const nameInput = testingLibrary.getByPlaceholderText( container, 'Full Name' );
+
+	it( 'additional inputs are initially hidden and displayed after user clicks the button', async () => {
+		expect( emailInput ).not.toBeVisible();
+		await userEvent.click( button );
+		expect( emailInput ).toBeVisible();
+	} );
+
+	it( 'form submission with invalid values triggers validation errors', async () => {
+		await userEvent.click( button );
+		expect(
+			testingLibrary.getByText( container, 'Email address is invalid.' )
+		).toBeInTheDocument();
+		expect(
+			testingLibrary.getByText( container, 'Full name should be provided.' )
+		).toBeInTheDocument();
+
+		await userEvent.type( emailInput, 'foo@bar.com' );
+		await userEvent.click( button );
+		expect(
+			testingLibrary.queryByText( container, 'Email address is invalid.' )
+		).not.toBeInTheDocument();
+	} );
+
+	it( 'the fee amount is updated', () => {
+		expect( testingLibrary.getByText( container, '($0.52 monthly)' ) ).toBeInTheDocument();
+	} );
+
+	it( 'form can be submitted after validation passes', async () => {
+		await userEvent.type( nameInput, 'Bax' );
+		await userEvent.click( button );
+		expect(
+			testingLibrary.queryByText( container, 'Full name should be provided.' )
+		).not.toBeInTheDocument();
+		expect( testingLibrary.getByText( container, 'Processing payment…' ) ).toBeInTheDocument();
+	} );
+
+	it( 'final success message is displayed', () => {
+		expect(
+			testingLibrary.getByText(
+				container,
+				'Your payment has been processed. Thank you for your contribution! You will receive a confirmation email at foo@bar.com.'
+			)
+		).toBeInTheDocument();
+	} );
+
+	it( 'correct payload was sent to the API', () => {
+		expect( fetchMock ).toHaveLastFetched(
+			'/wp-json/newspack-blocks/v1/donate',
+			{
+				body: {
+					tokenData: 'abc',
+					amount: 7.52,
+					email: 'foo@bar.com',
+					full_name: 'Bax',
+					frequency: 'month',
+					newsletter_opt_in: false,
+					clientId: 'amp-123',
+					payment_method_id: 'pm_123',
+				},
+			},
+			'post'
+		);
+	} );
+} );