@automattic/newspack-blocks 4.12.3 → 4.13.0

package/newspack-blocks.php

@@ -7,7 +7,7 @@
  * Author URI:      https://newspack.com/
  * Text Domain:     newspack-blocks
  * Domain Path:     /languages
- * Version:         4.12.3
+ * Version:         4.13.0
  *
  * @package         Newspack_Blocks
  */
@@ -15,12 +15,13 @@
 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', '4.12.3' );
+define( 'NEWSPACK_BLOCKS__VERSION', '4.13.0' );
 
 require_once NEWSPACK_BLOCKS__PLUGIN_DIR . 'includes/class-newspack-blocks.php';
 require_once NEWSPACK_BLOCKS__PLUGIN_DIR . 'includes/class-newspack-blocks-api.php';
 require_once NEWSPACK_BLOCKS__PLUGIN_DIR . 'includes/class-newspack-blocks-patterns.php';
 require_once NEWSPACK_BLOCKS__PLUGIN_DIR . 'includes/class-newspack-blocks-caching.php';
+require_once NEWSPACK_BLOCKS__PLUGIN_DIR . 'includes/modal-checkout/class-checkout-data.php';
 require_once NEWSPACK_BLOCKS__PLUGIN_DIR . 'includes/class-modal-checkout.php';
 
 require_once NEWSPACK_BLOCKS__PLUGIN_DIR . 'includes/plugins/class-the-events-calendar.php';

package/package.json

@@ -1,18 +1,18 @@
 {
 	"name": "@automattic/newspack-blocks",
-	"version": "4.12.3",
+	"version": "4.13.0",
 	"author": "Automattic",
 	"devDependencies": {
 		"@rushstack/eslint-patch": "^1.11.0",
 		"@testing-library/dom": "^10.4.0",
 		"@testing-library/user-event": "^14.6.1",
-		"@types/lodash": "^4.17.16",
-		"@wordpress/browserslist-config": "^6.23.0",
+		"@types/lodash": "^4.17.17",
+		"@wordpress/browserslist-config": "^6.24.0",
 		"eslint": "^8.57.0",
 		"fetch-mock-jest": "^1.5.1",
 		"html-entities": "^2.6.0",
 		"identity-obj-proxy": "^3.0.0",
-		"lint-staged": "^15.5.1",
+		"lint-staged": "^16.1.0",
 		"newspack-components": "^3.1.0",
 		"newspack-scripts": "^5.5.2",
 		"postcss-scss": "^4.0.9"
@@ -23,7 +23,7 @@
 		"redux": "^5.0.0",
 		"redux-saga": "^1.3.0",
 		"regenerator-runtime": "^0.14.1",
-		"swiper": "11.2.6"
+		"swiper": "11.2.8"
 	},
 	"scripts": {
 		"cm": "newspack-scripts commit",

package/src/blocks/checkout-button/view.php

@@ -9,6 +9,7 @@ namespace Newspack_Blocks\Checkout_Button;
 
 use Newspack_Blocks;
 use Newspack_Blocks\Modal_Checkout;
+use Newspack_Blocks\Modal_Checkout\Checkout_Data;
 
 /**
  * Register the block.
@@ -124,15 +125,6 @@ function render_callback( $attributes ) {
 			return '';
 		}
 
-		$frequency = '';
-		if ( class_exists( '\WC_Subscriptions_Product' ) && \WC_Subscriptions_Product::is_subscription( $product ) ) {
-			$frequency = \WC_Subscriptions_Product::get_period( $product );
-		}
-
-		// Get the product type.
-		$product_type = \Newspack_Blocks\Tracking\Data_Events::get_product_type( $product_id );
-
-		$name      = $product->get_name();
 		$price     = $product->get_price();
 		$min_price = '';
 		if ( ! empty( $attributes['price'] ) ) {
@@ -144,37 +136,8 @@ function render_callback( $attributes ) {
 			$min_price = \WC_Name_Your_Price_Helpers::get_minimum_price( $product_id );
 		}
 
-		$is_variable           = $attributes['is_variable'];
-		$variation_id          = $attributes['variation'];
-		$product_price_summary = Modal_Checkout::get_summary_card_price_string( $name, $price, $frequency );
-
-		// If this is a variable product without a variation picked, we're not sure about the frequency.
-		$recurrence = ! empty( $frequency ) ? $frequency : 'once';
-		if ( $is_variable && empty( $variation_id ) ) {
-			$recurrence = '';
-		}
-
-		$product_data = [
-			'action_type'  => 'checkout_button',
-			'currency'     => function_exists( 'get_woocommerce_currency' ) ? \get_woocommerce_currency() : 'USD',
-			'is_variable'  => $is_variable,
-			'product_id'   => $product_id,
-			'product_type' => $product_type,
-			'recurrence'   => $recurrence,
-			'referrer'     => substr( \get_permalink(), strlen( home_url() ) ),
-		];
-
-		if ( ! $is_variable || $variation_id ) {
-			$product_data['price']                 = $price;
-			$product_data['product_price_summary'] = $product_price_summary;
-		}
-
-		if ( $variation_id ) {
-			// We're doing a lot of shuffling around to get the "right" product ID, variation ID, and product type for GA4.
-			$product_data['product_id']   = $product->get_parent_id(); // Reset Product ID as parent ID.
-			$product_data['product_type'] = \Newspack_Blocks\Tracking\Data_Events::get_product_type( $product->get_parent_id() );
-			$product_data['variation_id'] = $product_id; // Overwrite us setting the product ID as the variation ID.
-		}
+		$is_variable  = $attributes['is_variable'];
+		$variation_id = $attributes['variation'];
 
 		// Check if the button should be output: it needs a price, or needs to be a product with variations to pick.
 		if ( $min_price && ! $price ) {
@@ -184,9 +147,12 @@ function render_callback( $attributes ) {
 			return '';
 		}
 
+		$checkout_data = Checkout_Data::get_checkout_data( $product );
+		$checkout_data['is_variable'] = $is_variable;
+
 		$form = sprintf(
-			'<form data-product="%1$s">%2$s %3$s</form>',
-			esc_attr( wp_json_encode( $product_data ) ),
+			'<form data-checkout="%1$s">%2$s %3$s</form>',
+			esc_attr( wp_json_encode( $checkout_data ) ),
 			$button,
 			$hidden_fields
 		);

package/src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-base.php

@@ -40,7 +40,7 @@ abstract class Newspack_Blocks_Donate_Renderer_Base {
 	 *
 	 * @param array $attributes Block attributes.
 	 */
-	public static function get_configuration( $attributes ) {
+	public static function get_configuration( $attributes = [] ) {
 		$attributes_hash = md5( wp_json_encode( $attributes ) );
 		if ( isset( self::$configurations_cache[ $attributes_hash ] ) ) {
 			return self::$configurations_cache[ $attributes_hash ];
@@ -148,7 +148,7 @@ abstract class Newspack_Blocks_Donate_Renderer_Base {
 		if ( isset( $configuration['minimumDonation'] ) ) {
 			foreach ( $configuration['amounts'] as $frequency => $amounts ) {
 				foreach ( $amounts as $index => $amount ) {
-					$configuration['amounts'][ $frequency ][ $index ] = max( $configuration['minimumDonation'], $amount );
+					$configuration['amounts'][ $frequency ][ $index ] = max( (float) $configuration['minimumDonation'], $amount );
 				}
 			}
 		}

package/src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-frequency-based.php

@@ -9,7 +9,7 @@ defined( 'ABSPATH' ) || exit;
 
 require_once NEWSPACK_BLOCKS__PLUGIN_DIR . 'src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-base.php';
 
-use Newspack_Blocks\Modal_Checkout;
+use Newspack_Blocks\Modal_Checkout\Checkout_Data;
 
 /**
  * Renders the frequency-based Donate block.
@@ -171,25 +171,13 @@ class Newspack_Blocks_Donate_Renderer_Frequency_Based extends Newspack_Blocks_Do
 					<div class='wp-block-newspack-blocks-donate__frequencies frequencies'>
 						<?php echo self::render_form_header( $configuration, $uid ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
 						<?php foreach ( $configuration['frequencies'] as $frequency_slug => $frequency_name ) : ?>
-							<?php
-								$amount                = $configuration['amounts'][ $frequency_slug ][3];
-								$product_price_summary = Modal_Checkout::get_summary_card_price_string(
-									__( 'Donate', 'newspack-blocks' ),
-									'',
-									$frequency_slug
-								);
-								$product_data = wp_json_encode(
-									[
-										'donation_price_summary_' . $frequency_slug => $product_price_summary,
-									]
-								);
-							?>
+							<?php $amount = $configuration['amounts'][ $frequency_slug ][3]; ?>
 							<div
 								class="wp-block-newspack-blocks-donate__frequency donation-frequency__<?php echo esc_attr( $frequency_slug ); ?> frequency"
 								id='tab-panel-<?php echo esc_attr( $frequency_slug . '-' . $uid ); ?>'
 								role='tabpanel'
 								aria-labelledby='tab-newspack-donate-<?php echo esc_attr( $frequency_slug . '-' . $uid ); ?>'
-								data-product='<?php echo esc_attr( $product_data ); ?>'
+								data-checkout='<?php echo esc_attr( wp_json_encode( Checkout_Data::get_donation_checkout_data( $frequency_slug, $amount ) ) ); ?>'
 								<?php ( $frequency_slug === $configuration['defaultFrequency'] ? 'tabindex="0"' : '' ); ?>
 							>
 								<?php echo self::render_frequency_selection( $frequency_slug, $frequency_name, $uid, $configuration ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
@@ -266,18 +254,6 @@ class Newspack_Blocks_Donate_Renderer_Frequency_Based extends Newspack_Blocks_Do
 								<div class='wp-block-newspack-blocks-donate__tiers tiers'>
 									<?php foreach ( $suggested_amounts[ $frequency_slug ] as $index => $amount ) : ?>
 										<?php
-											$product_price_summary = Modal_Checkout::get_summary_card_price_string(
-												__( 'Donate', 'newspack-blocks' ),
-												// Don't show the amount for the "other" tier.
-												3 === $index ? '' : $amount,
-												$frequency_slug
-											);
-											$product_data = wp_json_encode(
-												[
-													'donation_price_summary_' . $frequency_slug => $product_price_summary,
-												]
-											);
-
 											$decimals         = intval( $amount ) == floatval( $amount ) ? 0 : 2;
 											$format_options   = [ 'decimals' => $decimals ];
 											$formatted_amount = function_exists( 'wc_price' ) ?
@@ -286,7 +262,7 @@ class Newspack_Blocks_Donate_Renderer_Frequency_Based extends Newspack_Blocks_Do
 										?>
 										<div
 											class='wp-block-newspack-blocks-donate__tier donation-tier__<?php echo esc_attr( $frequency_slug ); ?>'
-											data-product='<?php echo esc_attr( $product_data ); ?>'
+											data-checkout='<?php echo esc_attr( wp_json_encode( Checkout_Data::get_donation_checkout_data( $frequency_slug, $amount ) ) ); ?>'
 										>
 											<?php if ( 3 === $index ) : // The "other" tier. ?>
 												<input

package/src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-tiers-based.php

@@ -9,7 +9,7 @@ defined( 'ABSPATH' ) || exit;
 
 require_once NEWSPACK_BLOCKS__PLUGIN_DIR . 'src/blocks/donate/frontend/class-newspack-blocks-donate-renderer-base.php';
 
-use Newspack_Blocks\Modal_Checkout;
+use Newspack_Blocks\Modal_Checkout\Checkout_Data;
 
 /**
  * Renders the tiers-based Donate block.
@@ -57,28 +57,16 @@ class Newspack_Blocks_Donate_Renderer_Tiers_Based extends Newspack_Blocks_Donate
 			<div class="wpbnbd__tiers__amount">
 				<span>
 					<?php foreach ( $configuration['frequencies'] as $frequency_slug => $frequency_name ) : ?>
-						<?php
-							$amount                = $configuration['amounts'][ $frequency_slug ][ $index ];
-							$product_price_summary = Modal_Checkout::get_summary_card_price_string(
-								__( 'Donate', 'newspack-blocks' ),
-								$amount,
-								$frequency_slug
-							);
-							$product_data = wp_json_encode(
-								[
-									'donation_price_summary_' . $frequency_slug => $product_price_summary,
-								]
-							);
-						?>
+						<?php $amount = $configuration['amounts'][ $frequency_slug ][ $index ]; ?>
 						<span
 							style="<?php echo $frequency_slug === $selected_frequency ? '' : 'display:none;'; ?>"
 							class="donation-tier__<?php echo esc_attr( $frequency_slug ); ?>"
 							data-frequency-slug="<?php echo esc_attr( $frequency_slug ); ?>"
-							data-amount="<?php echo esc_attr( $configuration['amounts'][ $frequency_slug ][ $index ] ); ?>"
+							data-amount="<?php echo esc_attr( $amount ); ?>"
 							data-tier-index="<?php echo esc_attr( $index ); ?>"
-							data-product="<?php echo esc_attr( $product_data ); ?>"
+							data-checkout="<?php echo esc_attr( wp_json_encode( Checkout_Data::get_donation_checkout_data( $frequency_slug, $amount ) ) ); ?>"
 						>
-							<?php echo wp_kses_post( Newspack_Blocks::get_formatted_amount( $configuration['amounts'][ $frequency_slug ][ $index ], $frequency_slug ) ); ?>
+							<?php echo wp_kses_post( Newspack_Blocks::get_formatted_amount( $amount, $frequency_slug ) ); ?>
 						</span>
 					<?php endforeach; ?>
 				</span>

package/src/modal-checkout/analytics/ga4/checkout-attempt.js

@@ -1,4 +1,5 @@
-import { getEventPayload, getProductDetails, sendEvent } from './utils';
+import { getEventPayload, sendEvent } from './utils';
+import { getCheckoutData } from '../../utils';
 
 /**
  * Event fired when switching between steps of the multi-step checkout flow.
@@ -11,7 +12,7 @@ export const manageCheckoutAttempt = () => {
 		return;
 	}
 
-	const params = getProductDetails( 'modal-checkout-product-details' );
+	const params = getCheckoutData( 'modal-checkout-product-details' );
 	const payload = getEventPayload( 'form_submission', params );
 	sendEvent( payload );
 };

package/src/modal-checkout/analytics/ga4/checkout-success.js

@@ -1,5 +1,5 @@
-import { getEventPayload, getProductDetails, sendEvent } from './utils';
-
+import { getEventPayload, sendEvent } from './utils';
+import { getCheckoutData } from '../../utils';
 /**
  * Event fired when switching between steps of the multi-step checkout flow.
  *
@@ -11,7 +11,7 @@ export const manageCheckoutSuccess = () => {
 		return;
 	}
 
-	const params = getProductDetails( 'modal-checkout-product-details' );
+	const params = getCheckoutData( 'modal-checkout-product-details' );
 	const payload = getEventPayload( 'form_submission_success', params );
 	sendEvent( payload );
 };

package/src/modal-checkout/analytics/ga4/dismissed.js

@@ -1,5 +1,5 @@
-import { getEventPayload, getProductDetails, sendEvent } from './utils';
-
+import { getEventPayload, sendEvent } from './utils';
+import { getCheckoutData } from '../../utils';
 /**
  * Event fired when a checkout modal is dismissed (not when closed automatically due to a completed checkout).
  *
@@ -10,7 +10,7 @@ export const manageDismissed = ( data ) => {
 		return;
 	}
 
-	data = data || getProductDetails( 'newspack_modal_checkout' );
+	data = data || getCheckoutData( 'newspack_modal_checkout' );
 
 	const payload = getEventPayload( 'dismissed', data );
 	sendEvent( payload );

package/src/modal-checkout/analytics/ga4/loaded.js

@@ -1,5 +1,5 @@
-import { getEventPayload, getProductDetails, sendEvent } from './utils';
-import { domReady } from '../../utils';
+import { getEventPayload, sendEvent } from './utils';
+import { domReady, getCheckoutData } from '../../utils';
 
 /**
  * Event fired when the modal checkout content is loaded.
@@ -9,7 +9,7 @@ export const manageLoaded = () => {
 		if ( 'function' !== typeof window.gtag ) {
 			return;
 		}
-		const params = getProductDetails( 'modal-checkout-product-details' );
+		const params = getCheckoutData( 'modal-checkout-product-details' );
 		const payload = getEventPayload( 'loaded', params );
 
 		sendEvent( payload );

package/src/modal-checkout/analytics/ga4/pagination.js

@@ -1,4 +1,5 @@
-import { getEventPayload, getProductDetails, sendEvent } from './utils';
+import { getEventPayload, sendEvent } from './utils';
+import { getCheckoutData } from '../../utils';
 
 /**
  * Event fired when switching between steps of the multi-step checkout flow.
@@ -22,7 +23,7 @@ export const managePagination = ( action = 'continue' ) => {
 		variation_id = '',
 		gate_post_id = '',
 		newspack_popup_id = '',
-	} = getProductDetails( 'modal-checkout-product-details' );
+	} = getCheckoutData( 'modal-checkout-product-details' );
 
 	const params = {
 		action_type,

package/src/modal-checkout/analytics/ga4/utils/index.js

@@ -12,29 +12,43 @@ export const getEventPayload = ( action, extraParams = {} ) => {
 	return { ...extraParams, action };
 };
 
+/**
+ * Checkout data keys that can be included in the event payload.
+ *
+ * @type {string[]}
+ */
+const eventKeys = [
+	'action',
+	'action_type',
+	'amount',
+	'currency',
+	'product_id',
+	'product_type',
+	'variation_id',
+	'price_summary',
+	'newspack_popup_id',
+	'gate_post_id',
+	'recurrence',
+	'referrer',
+];
+
 /**
  * Send an event to GA4.
  *
  * @param {Object} payload   Event payload.
  * @param {string} eventName Name of the event. Defaults to `np_modal_checkout_interaction` but can be overriden if necessary.
  */
-
-export const sendEvent = ( payload, eventName = 'np_modal_checkout_interaction' ) => {
+export const sendEvent = (
+	payload,
+	eventName = 'np_modal_checkout_interaction'
+) => {
 	if ( 'function' === typeof window.gtag && payload ) {
-		window.gtag( 'event', eventName, payload );
+		const filteredPayload = {};
+		for ( const key of eventKeys ) {
+			if ( payload[ key ] ) {
+				filteredPayload[ key ] = payload[ key ].toString();
+			}
+		}
+		window.gtag( 'event', eventName, filteredPayload );
 	}
 };
-
-/**
- * Get product details from the data-order-details attribute, for inside the iframe.
- *
- * @return {Object} Product details.
- *
- * @param {string} detailsElement ID of HTML element to get product details from.
- */
-export const getProductDetails = ( detailsElement ) => {
-	const productDetailsContainer = document.getElementById( detailsElement );
-	const productDetailsJSON = productDetailsContainer ? productDetailsContainer.getAttribute( 'data-order-details' ) : false;
-	const productDetails = productDetailsJSON ? JSON.parse( productDetailsJSON ) : false;
-	return productDetails || {};
-}

package/src/modal-checkout/analytics/index.js

@@ -3,4 +3,4 @@ export { manageCheckoutSuccess } from './ga4/checkout-success';
 export { manageDismissed } from './ga4/dismissed';
 export { manageLoaded } from './ga4/loaded';
 export { manageOpened } from './ga4/opened';
-export { managePagination } from './ga4/pagination';
+export { managePagination } from './ga4/pagination';

package/src/modal-checkout/checkout.scss

@@ -857,7 +857,8 @@
 	// Express checkout dividers.
 	// This is being replaced with JavaScript so it can be styled correctly.
 	#wcpay-express-checkout-button-separator,
-	#wc-stripe-payment-request-button-separator {
+	#wc-stripe-payment-request-button-separator,
+	#wc-stripe-express-checkout-button-separator {
 		display: none !important; // !important needed to override inline styles.
 
 		&[style*="display:none"] + .newspack-ui__word-divider {

package/src/modal-checkout/index.js

@@ -63,7 +63,7 @@ import { domReady } from './utils';
 		} else {
 			function init() {
 				// If present, update the markup used for the WooPayments express checkout divider.
-				$( '#wcpay-express-checkout-button-separator, #wc-stripe-payment-request-button-separator' ).after(
+				$( '#wcpay-express-checkout-button-separator, #wc-stripe-payment-request-button-separator, #wc-stripe-express-checkout-button-separator' ).after(
 					'<div class="newspack-ui__word-divider">' + newspackBlocksModalCheckout.divider_text + '</div>'
 				);