@automattic/newspack-blocks 1.37.0 → 1.48.0

package/src/blocks/donate/streamlined/style.scss

@@ -0,0 +1,324 @@
+@import '../../../shared/sass/colors';
+@import '../../../shared/sass/mixins';
+@import '../../../shared/sass/variables';
+
+@keyframes loader {
+	0% {
+		background-position: 0% 50%;
+	}
+	50% {
+		background-position: 100% 50%;
+	}
+	100% {
+		background-position: 0% 50%;
+	}
+}
+
+.wp-block-newspack-blocks-donate {
+	.stripe-payment {
+		// For the initial unravelling animation.
+		position: relative;
+		&,
+		&--transition,
+		&::after {
+			transition: all 300ms ease-out;
+		}
+		&::after {
+			content: '';
+			opacity: 0;
+			pointer-events: none;
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			background: linear-gradient( 318deg, #d5d5d5, #fff );
+			background-size: 400% 400%;
+			animation: loader 3s ease infinite;
+			border-radius: 5px;
+		}
+
+		&__card {
+			border: 1px solid $color__border;
+			border-radius: 3px;
+			padding: 0.34rem 0.66rem;
+			min-height: 32px;
+		}
+		input[type='text'],
+		input[type='email'],
+		&__checkbox,
+		button {
+			font-size: 0.7em;
+		}
+		input[type='text'],
+		input[type='email'],
+		&__messages {
+			width: 100%;
+		}
+		input[type='text'],
+		input[type='email'] {
+			border-radius: 3px;
+			font-family: sans-serif;
+
+			@include media( tablet ) {
+				font-size: 14px;
+				line-height: 1.2;
+			}
+		}
+
+		&--invisible {
+			> * {
+				opacity: 0;
+			}
+			&::after {
+				opacity: 1;
+			}
+		}
+		&--hidden {
+			display: none;
+		}
+
+		&__checkbox {
+			align-items: center;
+			display: inline-flex;
+			cursor: pointer;
+
+			input {
+				height: 1em;
+				width: 1em;
+				margin-right: 0.5em;
+			}
+		}
+
+		&__messages {
+			> div {
+				border: 0 solid $color__info;
+				border-left-width: 4px;
+				font-size: $font__size-sm;
+				margin-top: 0.76rem;
+				padding: 0.38rem 0.76rem;
+				&:empty {
+					border: 0;
+					margin: 0;
+					padding: 0;
+				}
+				&.type-error {
+					background-color: rgba( $color__error, 0.075 );
+					border-color: $color__error;
+				}
+				&.type-success {
+					background-color: rgba( $color__success, 0.075 );
+					border-color: $color__success;
+				}
+			}
+		}
+
+		&--disabled {
+			button,
+			input {
+				pointer-events: none;
+				opacity: 0.4;
+			}
+		}
+
+		&__element {
+			margin-bottom: 0.4rem;
+		}
+
+		&__row {
+			margin-bottom: 0.5rem;
+			&--small {
+				margin-bottom: 5px;
+				line-height: 1.2;
+			}
+			&--flex {
+				display: flex;
+				align-items: flex-end;
+				justify-content: space-between;
+				flex-wrap: wrap;
+				@include media( tablet ) {
+					flex-wrap: nowrap;
+				}
+				input {
+					margin-bottom: 0.5rem;
+					@include media( tablet ) {
+						margin-bottom: 0;
+						width: 50%;
+						&:last-child {
+							margin-left: 0.5rem;
+						}
+					}
+				}
+			}
+		}
+
+		&__info {
+			color: $color__text-light;
+			font-size: 0.7em;
+			font-style: italic;
+			padding-left: 1.5em;
+		}
+
+		&__footer {
+			align-items: flex-end;
+			margin-bottom: 1.32rem;
+			margin-left: -10px;
+			margin-right: -10px;
+			> * {
+				padding-left: 10px;
+				padding-right: 10px;
+			}
+		}
+		&__branding {
+			margin-top: 1em;
+			height: 26px;
+			display: block;
+			text-decoration: none;
+
+			img {
+				display: block;
+			}
+		}
+
+		&__methods {
+			display: flex;
+			flex-wrap: wrap;
+			button {
+				margin-left: 0;
+				margin-right: 0;
+				margin-bottom: 0;
+				height: 46px;
+			}
+			> * {
+				margin-top: 10px;
+				width: 100%;
+				@include media( mobile ) {
+					width: auto;
+				}
+			}
+		}
+
+		&__request-button {
+			min-width: 190px;
+			@include media( mobile ) {
+				margin-right: 1em;
+			}
+			&--invisible {
+				opacity: 0;
+			}
+		}
+	}
+
+	&__stripe {
+		margin: 0.38rem 0.76rem 0.76rem;
+
+		@include media( tablet ) {
+			margin-left: 1.5rem;
+			margin-right: 1.5rem;
+		}
+		&--editor {
+			input:first-child {
+				margin-top: 0;
+			}
+		}
+	}
+}
+
+#stripe-fees-amount {
+	padding-left: 3px;
+}
+
+/* Alternate Style */
+
+.wpbnbd.is-style-alternate {
+	.wp-block-newspack-blocks-donate__stripe {
+		margin: 1.12rem 1.12rem 0;
+	}
+
+	.stripe-payment {
+		&__row {
+			margin-bottom: 0.56rem;
+		}
+
+		&__methods {
+			display: grid;
+			grid-gap: 0.56rem;
+
+			> * {
+				margin-top: 0;
+			}
+		}
+
+		&__footer {
+			margin: 1.12rem 0;
+
+			> * {
+				padding: 0;
+			}
+
+			button {
+				border-top-left-radius: 5px;
+				border-top-right-radius: 5px;
+				margin: 0;
+				width: auto;
+			}
+		}
+
+		&__request-button {
+			margin: 0;
+		}
+
+		&__branding {
+			margin-top: 1.12rem;
+		}
+	}
+}
+
+/* Minimal Style */
+
+.wpbnbd.is-style-minimal {
+	.wp-block-newspack-blocks-donate__stripe {
+		margin: 0;
+		text-align: left;
+	}
+
+	.stripe-payment {
+		&__row {
+			margin-bottom: 0.56rem;
+		}
+
+		&__inputs {
+			margin-bottom: 1.12rem;
+		}
+
+		&__methods {
+			display: grid;
+			grid-gap: 0.28rem;
+
+			> * {
+				margin-top: 0;
+			}
+		}
+
+		&__footer {
+			margin: 1.12rem 0 0;
+
+			> * {
+				padding: 0;
+			}
+
+			button {
+				margin: 0;
+				min-width: auto;
+			}
+		}
+
+		&__request-button {
+			margin: 0;
+		}
+
+		&__branding {
+			margin-top: 1.12rem;
+		}
+	}
+}

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

@@ -0,0 +1,174 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+
+const isValidEmail = string => /\S+@\S+/.test( string );
+export const validateFormData = values => {
+	const errors = {};
+	if ( ! isValidEmail( values.email ) ) {
+		errors.email = __( 'Email address is invalid.', 'newspack-blocks' );
+	}
+	if ( values.amount <= 0 ) {
+		errors.amount = __( 'Amount must be greater than zero.', 'newspack-blocks' );
+	}
+	if ( values.full_name.length === 0 ) {
+		errors.amount = __( 'Full name should be provided.', 'newspack-blocks' );
+	}
+	return errors;
+};
+
+/**
+ * Renders UI messages in a given DOM element.
+ */
+export const renderMessages = ( messages, el, type = 'error' ) => {
+	el.innerHTML = '';
+	messages.forEach( message => {
+		const messageEl = document.createElement( 'div' );
+		messageEl.classList.add( `type-${ type }` );
+		messageEl.innerHTML = message;
+		el.appendChild( messageEl );
+	} );
+};
+
+const getCookies = () =>
+	document.cookie.split( '; ' ).reduce( ( acc, cookieStr ) => {
+		const cookie = cookieStr.split( '=' );
+		acc[ cookie[ 0 ] ] = cookie[ 1 ];
+		return acc;
+	}, {} );
+
+/**
+ * Retrieves donation settings passed via a `data-settings` HTML attribute
+ * on a `form` element.
+ */
+export const getSettings = formElement => {
+	const [
+		currency,
+		currencySymbol,
+		siteName,
+		isCurrencyZeroDecimal,
+		countryCode,
+		frequencies,
+		feeMultiplier,
+		feeStatic,
+		stripePublishableKey,
+	] = JSON.parse( formElement.getAttribute( 'data-settings' ) );
+	return {
+		currency: currency.toLowerCase(),
+		currencySymbol,
+		siteName,
+		isCurrencyZeroDecimal,
+		countryCode,
+		frequencies,
+		feeMultiplier: parseFloat( feeMultiplier ),
+		feeStatic: parseFloat( feeStatic ),
+		stripePublishableKey,
+	};
+};
+
+/**
+ * Retrieves form values from the donation form HTML element.
+ */
+export const getFormValues = formElement => {
+	const formValues = Object.fromEntries( new FormData( formElement ) );
+	const valueKey = `donation_value_${ formValues.donation_frequency }`;
+	formValues.amount = formValues[ valueKey ];
+	if ( formValues.amount === 'other' ) {
+		formValues.amount = formValues[ `${ valueKey }_other` ];
+	}
+	if ( ! formValues.amount ) {
+		formValues.amount = formValues[ `${ valueKey }_untiered` ];
+	}
+	if ( formValues.cid && formValues.cid.indexOf( 'CLIENT_ID' ) === 0 ) {
+		// In non-AMP environment, the value will not be dynamically substituted by AMP runtime.
+		formValues.cid = getCookies()[ 'newspack-cid' ];
+	}
+	return formValues;
+};
+
+/**
+ * Computes the total amount of the donation, taking into account if the
+ * donor has opted to cover the processing fee.
+ */
+export const getTotalAmount = (
+	formElement,
+	// For the payment request button (Apple/Google Pay), the amount has to be
+	// delivered in subunits.
+	{ convertToSubunit } = { convertToSubunit: false }
+) => {
+	const settings = getSettings( formElement );
+	let { amount, agree_to_pay_fees: paysFees } = getFormValues( formElement );
+
+	const processAmount = amountToProcess =>
+		parseFloat(
+			convertToSubunit
+				? amountToProcess * ( settings.isCurrencyZeroDecimal ? 1 : 100 )
+				: amountToProcess
+		);
+
+	amount = processAmount( amount );
+	if ( paysFees ) {
+		const feesAmount = processAmount( getFeeAmount( formElement ) );
+		amount = amount + feesAmount;
+	}
+	return amount;
+};
+
+/**
+ * Creates a `total` value for Stripe's `paymentRequest` creation and updating.
+ */
+export const getPaymentRequestTotal = formElement => {
+	const settings = getSettings( formElement );
+	const { donation_frequency: frequency } = getFormValues( formElement );
+	const frequencyLabel = settings.frequencies[ frequency ];
+	return {
+		label: `${ settings.siteName } (${ frequencyLabel })`,
+		amount: getTotalAmount( formElement, { convertToSubunit: true } ),
+	};
+};
+
+/**
+ * Computes the fee amount.
+ */
+export const computeFeeAmount = ( amount, feeMultiplier, feeStatic ) => {
+	return parseFloat(
+		( ( ( amount + feeStatic ) / ( 100 - feeMultiplier ) ) * 100 - amount ).toFixed( 2 )
+	);
+};
+
+/**
+ * Given the donation form HTML element, computes the fee amount.
+ */
+export const getFeeAmount = formElement => {
+	const { amount } = getFormValues( formElement );
+	const { feeMultiplier, feeStatic } = getSettings( formElement );
+	return computeFeeAmount( parseFloat( amount ), feeMultiplier, feeStatic );
+};
+
+export const sendAPIRequest = async ( endpoint, data, method = 'POST' ) =>
+	fetch( `/wp-json/newspack-blocks/v1${ endpoint }`, {
+		method,
+		headers: {
+			'Content-Type': 'application/json',
+		},
+		body: JSON.stringify( data ),
+	} ).then( async res => {
+		const responseData = await res.json();
+		if ( res.ok ) {
+			return responseData;
+		}
+		return { error: responseData };
+	} );
+
+export const renderSuccessMessageWithEmail = ( emailAddress, messagesEl ) => {
+	const successMessge = sprintf(
+		/* Translators: %s is the email address of the current user. */
+		__(
+			'Your payment has been processed. Thank you for your contribution! You will receive a confirmation email at %s.',
+			'newspack-blocks'
+		),
+		emailAddress
+	);
+	renderMessages( [ successMessge ], messagesEl, 'success' );
+};

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

@@ -0,0 +1,18 @@
+import 'regenerator-runtime';
+
+import { computeFeeAmount } from './utils';
+
+describe( 'Fee computation', () => {
+	it( 'computes fee with default values', () => {
+		expect( computeFeeAmount( 1, 2.9, 0.3 ) ).toBe( 0.34 );
+		expect( computeFeeAmount( 15, 2.9, 0.3 ) ).toBe( 0.76 );
+		expect( computeFeeAmount( 100, 2.9, 0.3 ) ).toBe( 3.3 );
+	} );
+	it( 'computes fee with other values', () => {
+		expect( computeFeeAmount( 15, 0, 0 ) ).toBe( 0 );
+		expect( computeFeeAmount( 15, 2.3, 0.3 ) ).toBe( 0.66 );
+		expect( computeFeeAmount( 15, 2.3, 0 ) ).toBe( 0.35 );
+		expect( computeFeeAmount( 15, 50, 0 ) ).toBe( 15 );
+		expect( computeFeeAmount( 15, 50, 10 ) ).toBe( 35 );
+	} );
+} );

package/src/blocks/donate/view.php

@@ -15,16 +15,18 @@
 function newspack_blocks_render_block_donate_footer( $attributes ) {
 	$is_streamlined                      = Newspack_Blocks::is_rendering_streamlined_block();
 	$is_rendering_newsletter_list_opt_in = false;
+	$is_rendering_fee_checkbox           = false;
+
 	if ( $is_streamlined ) {
-		$payment_data = WP_REST_Newspack_Donate_Controller::get_payment_data();
+		$stripe_data               = \Newspack\Stripe_Connection::get_stripe_data();
+		$is_rendering_fee_checkbox = 0 < (float) $stripe_data['fee_multiplier'] + (float) $stripe_data['fee_static'];
 		if ( class_exists( 'Newspack_Newsletters' ) ) {
-			$is_rendering_newsletter_list_opt_in = isset( $payment_data['newsletter_list_id'] ) && ! empty( $payment_data['newsletter_list_id'] );
+			$is_rendering_newsletter_list_opt_in = isset( $stripe_data['newsletter_list_id'] ) && ! empty( $stripe_data['newsletter_list_id'] );
 		}
 	}
-	$thanks_text = $attributes['thanksText'];
-	$button_text = $attributes['buttonText'];
-	$campaign    = $attributes['campaign'] ?? false;
-	$client_id   = '';
+
+	$campaign  = $attributes['campaign'] ?? false;
+	$client_id = '';
 	if ( class_exists( 'Newspack_Popups_Segmentation' ) ) {
 		$client_id = Newspack_Popups_Segmentation::NEWSPACK_SEGMENTATION_CID_NAME;
 	}
@@ -33,36 +35,48 @@ function newspack_blocks_render_block_donate_footer( $attributes ) {
 
 	?>
 		<p class='wp-block-newspack-blocks-donate__thanks thanks'>
-			<?php echo wp_kses_post( $thanks_text ); ?>
+			<?php echo wp_kses_post( $attributes['thanksText'] ); ?>
 		</p>
 
 		<?php if ( $is_streamlined ) : ?>
-			<div class="wp-block-newspack-blocks-donate__stripe stripe-payment stripe-payment--disabled" data-stripe-pub-key="<?php echo esc_attr( $payment_data['usedPublishableKey'] ); ?>">
-				<div class="stripe-payment__inputs stripe-payment__inputs--hidden">
+			<div class="wp-block-newspack-blocks-donate__stripe stripe-payment stripe-payment--invisible stripe-payment--disabled">
+				<div class="stripe-payment__inputs stripe-payment--hidden">
 					<div class="stripe-payment__row">
-						<div class="stripe-payment__card"></div>
+						<div class="stripe-payment__element stripe-payment__card"></div>
 					</div>
 					<div class="stripe-payment__row stripe-payment__row--flex">
 						<input required placeholder="<?php echo esc_html__( 'Email', 'newspack-blocks' ); ?>" type="email" name="email" value="">
 						<input required placeholder="<?php echo esc_html__( 'Full Name', 'newspack-blocks' ); ?>" type="text" name="full_name" value="">
 					</div>
-					<?php if ( $is_rendering_newsletter_list_opt_in ) : ?>
-						<div class="stripe-payment__row">
-							<label class="stripe-payment__checkbox">
-								<input type="checkbox" name="newsletter_opt_in" checked value="true"><?php echo esc_html__( 'Sign up for our newsletter', 'newspack-blocks' ); ?>
-							</label>
-						</div>
-					<?php endif; ?>
-					<div class="stripe-payment__messages">
-						<div class="type-error"></div>
-						<div class="type-success"></div>
-						<div class="type-info"></div>
+				</div>
+				<?php if ( $is_rendering_fee_checkbox ) : ?>
+					<div class="stripe-payment__row stripe-payment__row--small">
+						<label class="stripe-payment__checkbox">
+							<input type="checkbox" name="agree_to_pay_fees" checked value="true"><?php echo esc_html__( 'Agree to pay fees?', 'newspack-blocks' ); ?>
+							<span id="stripe-fees-amount">($0)</span>
+						</label>
+						<div class="stripe-payment__info"><?php echo esc_html__( 'Paying the transaction fee is not required, but it directs more money in support of our mission.', 'newspack-blocks' ); ?></div>
+					</div>
+				<?php endif; ?>
+				<?php if ( $is_rendering_newsletter_list_opt_in ) : ?>
+					<div class="stripe-payment__row stripe-payment__row--small">
+						<label class="stripe-payment__checkbox">
+							<input type="checkbox" name="newsletter_opt_in" checked value="true"><?php echo esc_html__( 'Sign up for our newsletter', 'newspack-blocks' ); ?>
+						</label>
 					</div>
+				<?php endif; ?>
+				<div class="stripe-payment__messages">
+					<div class="type-error"></div>
+					<div class="type-success"></div>
+					<div class="type-info"></div>
 				</div>
 				<div class="stripe-payment__row stripe-payment__row--flex stripe-payment__footer">
-					<button type='submit' style="margin-left: 0; margin-top: 1em;">
-						<?php echo wp_kses_post( $button_text ); ?>
-					</button>
+					<div class="stripe-payment__methods">
+						<div class="stripe-payment__request-button stripe-payment--hidden stripe-payment__request-button--invisible stripe-payment--transition"></div>
+						<button type='submit'>
+							<?php echo esc_html__( 'Donate with card', 'newspack-blocks' ); ?>
+						</button>
+					</div>
 					<a target="_blank" rel="noreferrer" class="stripe-payment__branding" href="https://stripe.com">
 						<img width="111" height="26" src="<?php echo esc_attr( Newspack_Blocks::streamlined_block_stripe_badge() ); ?>" alt="Stripe">
 					</a>
@@ -70,18 +84,20 @@ function newspack_blocks_render_block_donate_footer( $attributes ) {
 			</div>
 		<?php else : ?>
 			<button type='submit'>
-				<?php echo wp_kses_post( $button_text ); ?>
+				<?php echo wp_kses_post( $attributes['buttonText'] ); ?>
 			</button>
 		<?php endif; ?>
 		<?php if ( $campaign ) : ?>
 			<input type='hidden' name='campaign' value='<?php echo esc_attr( $campaign ); ?>' />
 		<?php endif; ?>
-		<input
-			name="cid"
-			type="hidden"
-			value="CLIENT_ID(<?php echo esc_attr( $client_id ); ?>)"
-			data-amp-replace="CLIENT_ID"
-		/>
+		<?php if ( $client_id ) : ?>
+			<input
+				name="cid"
+				type="hidden"
+				value="CLIENT_ID(<?php echo esc_attr( $client_id ); ?>)"
+				data-amp-replace="CLIENT_ID"
+			/>
+		<?php endif; ?>
 	<?php
 
 	return ob_get_clean();
@@ -133,6 +149,13 @@ function newspack_blocks_render_block_donate( $attributes ) {
 		return '';
 	}
 
+	/* If block has additional CSS class(es)  */
+	if ( isset( $attributes['className'] ) ) {
+		$classname = $attributes['className'];
+	} else {
+		$classname = 'is-style-default';
+	}
+
 	/* If block is in "manual" mode, override certain state properties with values stored in attributes */
 	if ( $attributes['manual'] ?? false ) {
 		$settings = array_merge( $settings, $attributes );
@@ -151,6 +174,24 @@ function newspack_blocks_render_block_donate( $attributes ) {
 
 	$form_footer = newspack_blocks_render_block_donate_footer( $attributes );
 
+	if ( Newspack_Blocks::is_rendering_streamlined_block() ) {
+		$stripe_data           = \Newspack\Stripe_Connection::get_stripe_data();
+		$currency              = $stripe_data['currency'];
+		$settings_for_frontend = [
+			$currency,
+			$settings['currencySymbol'],
+			get_bloginfo( 'name' ),
+			Newspack\Stripe_Connection::is_currency_zero_decimal( $currency ),
+			$stripe_data['location_code'],
+			$frequencies,
+			$stripe_data['fee_multiplier'],
+			$stripe_data['fee_static'],
+			$stripe_data['usedPublishableKey'],
+		];
+	} else {
+		$settings_for_frontend = [];
+	}
+
 	ob_start();
 
 	/**
@@ -161,8 +202,8 @@ function newspack_blocks_render_block_donate( $attributes ) {
 	if ( ! $settings['tiered'] ) :
 
 		?>
-		<div class='wp-block-newspack-blocks-donate wpbnbd untiered'>
-			<form>
+		<div class="wp-block-newspack-blocks-donate wpbnbd untiered <?php echo esc_html( $classname ); ?>">
+			<form data-settings="<?php echo esc_html( htmlspecialchars( wp_json_encode( $settings_for_frontend ), ENT_QUOTES, 'UTF-8' ) ); ?>">
 				<input type='hidden' name='newspack_donate' value='1' />
 				<div class='wp-block-newspack-blocks-donate__options'>
 					<?php foreach ( $frequencies as $frequency_slug => $frequency_name ) : ?>
@@ -214,8 +255,8 @@ function newspack_blocks_render_block_donate( $attributes ) {
 	else :
 
 		?>
-		<div class='wp-block-newspack-blocks-donate wpbnbd tiered'>
-			<form>
+		<div class="wp-block-newspack-blocks-donate wpbnbd tiered <?php echo esc_html( $classname ); ?>">
+			<form data-settings="<?php echo esc_html( htmlspecialchars( wp_json_encode( $settings_for_frontend ), ENT_QUOTES, 'UTF-8' ) ); ?>">
 				<input type='hidden' name='newspack_donate' value='1' />
 				<div class='wp-block-newspack-blocks-donate__options'>
 					<div class='wp-block-newspack-blocks-donate__frequencies frequencies'>
@@ -344,7 +385,7 @@ function newspack_blocks_register_donate() {
 				],
 				'buttonText'              => [
 					'type'    => 'string',
-					'default' => __( 'Donate now!', 'newspack-blocks' ),
+					'default' => __( 'Donate Now', 'newspack-blocks' ),
 				],
 				'defaultFrequency'        => [
 					'type'    => 'string',