fix: improve formatting of donation amount options

Author: dkoo

includes/class-newspack-blocks.php

@@ -213,6 +213,7 @@ public static function enqueue_block_editor_assets() {
 				'custom_taxonomies'          => self::get_custom_taxonomies(),
 				'can_use_name_your_price'    => self::can_use_name_your_price(),
 				'tier_amounts_template'      => self::get_formatted_amount(),
+				'currency'                   => function_exists( 'get_woocommerce_currency' ) ? \get_woocommerce_currency() : 'USD',
 			];
 
 			if ( class_exists( 'WP_REST_Newspack_Author_List_Controller' ) ) {
@@ -1414,13 +1415,13 @@ public static function get_article_meta_footer( $post = null ) {
 	/**
 	 * Get a formatted HTML string containing amount and frequency of a donation.
 	 *
-	 * @param float  $amount Amount.
-	 * @param string $frequency Frequency.
-	 * @param bool   $hide_once_label Whether to hide the "once" label.
+	 * @param float|string $amount Amount.
+	 * @param string       $frequency Frequency.
+	 * @param bool         $hide_once_label Whether to hide the "once" label.
 	 *
 	 * @return string
 	 */
-	public static function get_formatted_amount( $amount = 0, $frequency = 'day', $hide_once_label = false ) {
+	public static function get_formatted_amount( $amount = 'AMOUNT_PLACEHOLDER', $frequency = 'day', $hide_once_label = false ) {
 		if ( ! function_exists( 'wc_price' ) || ( method_exists( 'Newspack\Donations', 'is_platform_wc' ) && ! \Newspack\Donations::is_platform_wc() ) ) {
 			if ( 0 === $amount ) {
 				return false;
@@ -1432,23 +1433,22 @@ public static function get_formatted_amount( $amount = 0, $frequency = 'day', $h
 			$formatted_price  = '<span class="price-amount">' . $formatter->formatCurrency( $amount, 'USD' ) . '</span> <span class="tier-frequency">' . $frequency_string . '</span>';
 			return str_replace( '.00', '', $formatted_price );
 		}
+
+		// Format the amount with currency symbol and separators.
+		$amount_string = \wc_price(
+			$amount,
+			[ 'decimals' => is_int( $amount ) ? 0 : 2 ]
+		);
+
 		if ( ! function_exists( 'wcs_price_string' ) ) {
-			return \wc_price( $amount );
+			return $amount_string;
 		}
 		$price_args          = [
-			'recurring_amount'    => $amount,
+			'recurring_amount'    => $amount_string,
 			'subscription_period' => 'once' === $frequency ? 'day' : $frequency,
 		];
 		$wc_formatted_amount = \wcs_price_string( $price_args );
 
-		// A '0' value means we want a placeholder string to replace in the editor.
-		if ( 0 === $amount ) {
-			preg_match( '/<\/span>(.*)<\/bdi>/', $wc_formatted_amount, $matches );
-			if ( ! empty( $matches[1] ) ) {
-				$wc_formatted_amount = str_replace( $matches[1], 'AMOUNT_PLACEHOLDER', $wc_formatted_amount );
-			}
-		}
-
 		// A 'day' frequency means we want a placeholder string to replace in the editor.
 		if ( 'day' === $frequency ) {
 			$wc_formatted_amount = preg_replace( '/ \/ ?.*/', 'FREQUENCY_PLACEHOLDER', $wc_formatted_amount );

src/blocks/donate/edit/FrequencyBasedLayout.tsx

@@ -14,7 +14,7 @@ import { RichText } from '@wordpress/block-editor';
  * Internal dependencies
  */
 import { AmountValueInput } from './components';
-import { getColorForContrast, getFrequencyLabel, getFrequencyLabelWithAmount } from '../utils';
+import { getColorForContrast, getFrequencyLabel, getFormattedAmount, getFrequencyLabelWithAmount } from '../utils';
 import { FREQUENCIES } from '../consts';
 import type { ComponentProps, DonationFrequencySlug } from '../types';
 import { updateBlockClassName, getFormData } from '../view'
@@ -105,9 +105,6 @@ const FrequencyBasedLayout = ( props: { isTiered: boolean } & ComponentProps ) =
 		</button>
 	);
 
-	// This code is fired on tab select and updates aria elements, tabindex states, and radio buttons
-	const displayAmount = ( amount: number ) => amount.toFixed( 2 ).replace( /\.?0*$/, '' );
-
 	const renderFormHeader = () => {
 		return ! rendersSingleFrequency && (
 			<div className="tab-container">{ availableFrequencies.map( renderTab ) }</div>
@@ -197,7 +194,7 @@ const FrequencyBasedLayout = ( props: { isTiered: boolean } & ComponentProps ) =
 								}`;
 								const tierLabel = isOtherTier
 									? __( 'Other', 'newspack-blocks' )
-									: `${settings.currencySymbol}${displayAmount( suggestedAmount )}` 
+									: getFormattedAmount( suggestedAmount, true );
 								return (
 									<div
 										className={ classNames(

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

@@ -264,6 +264,12 @@ class='wp-block-newspack-blocks-donate__frequency frequency'
 													'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' ) ?
+												wp_strip_all_tags( \wc_price( (float) $amount, $format_options ) ) :
+												$configuration['currencySymbol'] . number_format( $amount, $decimals );
 										?>
 										<div
 											class='wp-block-newspack-blocks-donate__tier donation-tier__<?php echo esc_attr( $frequency_slug ); ?>'
@@ -315,7 +321,7 @@ class='odl'
 													class='tier-select-label tier-label'
 													for='newspack-tier-<?php echo esc_attr( $frequency_slug . '-' . $uid ); ?>-<?php echo (int) $index; ?>'
 												>
-													<?php echo esc_html( $configuration['currencySymbol'] . $amount ); ?>
+													<?php echo wp_kses_post( $formatted_amount ); ?>
 												</label>
 											<?php endif; ?>
 										</div>

src/blocks/donate/utils.ts

@@ -66,6 +66,24 @@ export const getFrequencyLabel = (
 		);
 }
 
+export const getFormattedAmount = ( amount: number, withCurrency = false ) => {
+	type NumberFormatOptions = {
+		minimumFractionDigits: number;
+		style?: string;
+		currency?: string;
+	}
+	const options = <NumberFormatOptions>{
+		minimumFractionDigits: 0 === amount % 1 ? 0 : 2,
+	};
+	if ( withCurrency ) {
+		options.style = 'currency';
+		options.currency = window.newspack_blocks_data?.currency || 'USD';
+	}
+	const formatter = new Intl.NumberFormat( navigator?.language || 'en-US', options as object );
+
+	return formatter.format( amount );
+}
+
 export const getFrequencyLabelWithAmount = (
 	amount: number,
 	frequencySlug: DonationFrequencySlug,
@@ -75,11 +93,6 @@ export const getFrequencyLabelWithAmount = (
 
 	if ( ! template ) {
 		try {
-			const formatter = new Intl.NumberFormat( navigator?.language || 'en-US', {
-				style: 'currency',
-				currency: 'USD',
-			} );
-
 			const frequencyString =
 				frequencySlug === 'once'
 					? frequencySlug
@@ -91,7 +104,7 @@ export const getFrequencyLabelWithAmount = (
 
 			const formattedPrice =
 				'<span class="price-amount">' +
-				formatter.format( amount ) +
+				getFormattedAmount( amount, true ) +
 				'</span> <span class="tier-frequency">' +
 				frequencyString +
 				'</span>';
@@ -102,11 +115,9 @@ export const getFrequencyLabelWithAmount = (
 		}
 	}
 
-	const formattedAmount = ( amount || 0 ).toFixed( 2 ).replace( /\.?0*$/, '' );
-
-	const frequency = getFrequencyLabel(frequencySlug, hideOnceLabel)
+	const frequency = getFrequencyLabel( frequencySlug, hideOnceLabel );
 
 	return template
-		.replace( 'AMOUNT_PLACEHOLDER', formattedAmount )
+		.replace( 'AMOUNT_PLACEHOLDER', getFormattedAmount( amount ) )
 		.replace( 'FREQUENCY_PLACEHOLDER', frequency );
 };

src/types/index.d.ts

@@ -11,6 +11,7 @@ declare global {
 			post_subtitle: boolean;
 			can_use_name_your_price: boolean;
 			tier_amounts_template: string;
+			currency: string;
 		};
 		grecaptcha: any;
 		newspackReaderActivation: {