Display price in place order button (#47083)

* WIP: Display price in place order button

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

* Fix JS lint error

* Update e2e tests

* Display default place order button including placeholder in page editor

* Update plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-actions-block/constants.tsx

Co-authored-by: Seghir Nadir <nadir.seghir@gmail.com>

* Optimise i18n using sprintf

* Wrap cart totals in “useSelect”

* Temporary skip failing e2e test

---------

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Seghir Nadir <nadir.seghir@gmail.com>

plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-actions-block/block.tsx

@@ -11,6 +11,9 @@ import { useCheckoutSubmit } from '@woocommerce/base-context/hooks';
 import { noticeContexts } from '@woocommerce/base-context';
 import { StoreNoticesContainer } from '@woocommerce/blocks-components';
 import { applyCheckoutFilter } from '@woocommerce/blocks-checkout';
+import { CART_STORE_KEY } from '@woocommerce/block-data';
+import { useSelect } from '@wordpress/data';
+import { formatPrice } from '@woocommerce/price-format';
 
 /**
  * Internal dependencies
@@ -30,7 +33,15 @@ const Block = ( {
 	placeOrderButtonLabel: string;
 } ): JSX.Element => {
 	const { paymentMethodButtonLabel } = useCheckoutSubmit();
-	const label = applyCheckoutFilter( {
+
+	const cartTotals = useSelect( ( select ) => {
+		const store = select( CART_STORE_KEY );
+		return store.getCartTotals();
+	}, [] );
+
+	const totalPrice = formatPrice( cartTotals.total_price );
+
+	let label = applyCheckoutFilter( {
 		filterName: 'placeOrderButtonLabel',
 		defaultValue:
 			paymentMethodButtonLabel ||
@@ -38,6 +49,15 @@ const Block = ( {
 			defaultPlaceOrderButtonLabel,
 	} );
 
+	if ( label.includes( '<price/>' ) ) {
+		if ( cartTotals.total_price === '0' ) {
+			label = label.replace( '<price/>', '' );
+			label = label.replace( /[^a-zA-Z\s]/g, '' );
+		} else {
+			label = label.replace( '<price/>', totalPrice );
+		}
+	}
+
 	return (
 		<div
 			className={ classnames( 'wc-block-checkout__actions', className ) }

plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-actions-block/constants.tsx

@@ -1,6 +1,10 @@
 /**
  * External dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 
-export const defaultPlaceOrderButtonLabel = __( 'Place Order', 'woocommerce' );
+export const defaultPlaceOrderButtonLabel = sprintf(
+	// translators: %s: is the price.
+	__( 'Place Order · %s', 'woocommerce' ),
+	'<price/>'
+);

plugins/woocommerce-blocks/assets/js/editor-components/editable-button/index.tsx

@@ -26,6 +26,13 @@ const EditableButton = ( {
 	value,
 	...props
 }: EditableButtonProps ) => {
+	/**
+	 * If the value contains a placeholder, e.g. "Place Order · <price/>", we need to change it,
+	 * e.g. to "Place Order · &lt;price/>", to ensure it is displayed correctly. This reflects the
+	 * default behaviour of the `RichText` component if we would type "<price/>" directly into it.
+	 */
+	value = value.replace( /</g, '&lt;' );
+
 	return (
 		<Button { ...props }>
 			<RichText

plugins/woocommerce-blocks/tests/e2e/tests/cart/cart-checkout-block-translations.shopper.block_theme.side_effects.spec.ts

@@ -102,9 +102,13 @@ test.describe( 'Shopper → Translations', () => {
 			page.getByRole( 'link', { name: 'Terug naar winkelwagen' } )
 		).toBeVisible();
 
-		await expect(
-			page.getByRole( 'button', { name: 'Bestel en betaal' } )
-		).toBeVisible();
+		/**
+		 * @todo Uncomment and update when WooCommerce 9.0.0 is released and a translation for the new string is available.
+		 * @see https://github.com/woocommerce/woocommerce/issues/47260
+		 */
+		// await expect(
+		// 	page.getByRole( 'button', { name: 'Bestel en betaal' } )
+		// ).toBeVisible();
 
 		await expect(
 			page.getByRole( 'button', {

plugins/woocommerce-blocks/tests/e2e/tests/checkout/checkout.page.ts

@@ -196,7 +196,7 @@ export class CheckoutPage {
 				// your road?" field.
 			} );
 		await this.waitForCheckoutToFinishUpdating();
-		await this.page.getByText( 'Place Order', { exact: true } ).click();
+		await this.page.getByText( 'Place Order' ).click();
 		if ( waitForRedirect ) {
 			await this.page.waitForURL( /order-received/ );
 		}

plugins/woocommerce/changelog/47083-update-46010-place-order-button-with-price

@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Display the total price in the place order button.