From 99bed6d7ba54f2f603062d646679bd8903bef8cd Mon Sep 17 00:00:00 2001 From: Niels Lange Date: Wed, 8 May 2024 16:18:48 +0700 Subject: [PATCH] Display price in place order button (#47083) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 * Optimise i18n using sprintf * Wrap cart totals in “useSelect” * Temporary skip failing e2e test --------- Co-authored-by: github-actions Co-authored-by: Seghir Nadir --- .../checkout-actions-block/block.tsx | 22 ++++++++++++++++++- .../checkout-actions-block/constants.tsx | 8 +++++-- .../editable-button/index.tsx | 7 ++++++ ...s.shopper.block_theme.side_effects.spec.ts | 10 ++++++--- .../tests/e2e/tests/checkout/checkout.page.ts | 2 +- ...update-46010-place-order-button-with-price | 4 ++++ 6 files changed, 46 insertions(+), 7 deletions(-) create mode 100644 plugins/woocommerce/changelog/47083-update-46010-place-order-button-with-price diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-actions-block/block.tsx b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-actions-block/block.tsx index da01127aee5..c21fb6dabec 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-actions-block/block.tsx +++ b/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( '' ) ) { + if ( cartTotals.total_price === '0' ) { + label = label.replace( '', '' ); + label = label.replace( /[^a-zA-Z\s]/g, '' ); + } else { + label = label.replace( '', totalPrice ); + } + } + return (
' +); diff --git a/plugins/woocommerce-blocks/assets/js/editor-components/editable-button/index.tsx b/plugins/woocommerce-blocks/assets/js/editor-components/editable-button/index.tsx index b87fbe25731..595ec58dfb4 100644 --- a/plugins/woocommerce-blocks/assets/js/editor-components/editable-button/index.tsx +++ b/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 · ", we need to change it, + * e.g. to "Place Order · <price/>", to ensure it is displayed correctly. This reflects the + * default behaviour of the `RichText` component if we would type "" directly into it. + */ + value = value.replace( / { 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', { diff --git a/plugins/woocommerce-blocks/tests/e2e/tests/checkout/checkout.page.ts b/plugins/woocommerce-blocks/tests/e2e/tests/checkout/checkout.page.ts index 31716c4f1fe..4c55c0479d8 100644 --- a/plugins/woocommerce-blocks/tests/e2e/tests/checkout/checkout.page.ts +++ b/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/ ); } diff --git a/plugins/woocommerce/changelog/47083-update-46010-place-order-button-with-price b/plugins/woocommerce/changelog/47083-update-46010-place-order-button-with-price new file mode 100644 index 00000000000..c9243cc6cb3 --- /dev/null +++ b/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. \ No newline at end of file