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>
This commit is contained in:
parent
c464afc7ad
commit
99bed6d7ba
|
@ -11,6 +11,9 @@ import { useCheckoutSubmit } from '@woocommerce/base-context/hooks';
|
||||||
import { noticeContexts } from '@woocommerce/base-context';
|
import { noticeContexts } from '@woocommerce/base-context';
|
||||||
import { StoreNoticesContainer } from '@woocommerce/blocks-components';
|
import { StoreNoticesContainer } from '@woocommerce/blocks-components';
|
||||||
import { applyCheckoutFilter } from '@woocommerce/blocks-checkout';
|
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
|
* Internal dependencies
|
||||||
|
@ -30,7 +33,15 @@ const Block = ( {
|
||||||
placeOrderButtonLabel: string;
|
placeOrderButtonLabel: string;
|
||||||
} ): JSX.Element => {
|
} ): JSX.Element => {
|
||||||
const { paymentMethodButtonLabel } = useCheckoutSubmit();
|
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',
|
filterName: 'placeOrderButtonLabel',
|
||||||
defaultValue:
|
defaultValue:
|
||||||
paymentMethodButtonLabel ||
|
paymentMethodButtonLabel ||
|
||||||
|
@ -38,6 +49,15 @@ const Block = ( {
|
||||||
defaultPlaceOrderButtonLabel,
|
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 (
|
return (
|
||||||
<div
|
<div
|
||||||
className={ classnames( 'wc-block-checkout__actions', className ) }
|
className={ classnames( 'wc-block-checkout__actions', className ) }
|
||||||
|
|
|
@ -1,6 +1,10 @@
|
||||||
/**
|
/**
|
||||||
* External dependencies
|
* 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/>'
|
||||||
|
);
|
||||||
|
|
|
@ -26,6 +26,13 @@ const EditableButton = ( {
|
||||||
value,
|
value,
|
||||||
...props
|
...props
|
||||||
}: EditableButtonProps ) => {
|
}: EditableButtonProps ) => {
|
||||||
|
/**
|
||||||
|
* If the value contains a placeholder, e.g. "Place Order · <price/>", 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 "<price/>" directly into it.
|
||||||
|
*/
|
||||||
|
value = value.replace( /</g, '<' );
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Button { ...props }>
|
<Button { ...props }>
|
||||||
<RichText
|
<RichText
|
||||||
|
|
|
@ -102,9 +102,13 @@ test.describe( 'Shopper → Translations', () => {
|
||||||
page.getByRole( 'link', { name: 'Terug naar winkelwagen' } )
|
page.getByRole( 'link', { name: 'Terug naar winkelwagen' } )
|
||||||
).toBeVisible();
|
).toBeVisible();
|
||||||
|
|
||||||
await expect(
|
/**
|
||||||
page.getByRole( 'button', { name: 'Bestel en betaal' } )
|
* @todo Uncomment and update when WooCommerce 9.0.0 is released and a translation for the new string is available.
|
||||||
).toBeVisible();
|
* @see https://github.com/woocommerce/woocommerce/issues/47260
|
||||||
|
*/
|
||||||
|
// await expect(
|
||||||
|
// page.getByRole( 'button', { name: 'Bestel en betaal' } )
|
||||||
|
// ).toBeVisible();
|
||||||
|
|
||||||
await expect(
|
await expect(
|
||||||
page.getByRole( 'button', {
|
page.getByRole( 'button', {
|
||||||
|
|
|
@ -196,7 +196,7 @@ export class CheckoutPage {
|
||||||
// your road?" field.
|
// your road?" field.
|
||||||
} );
|
} );
|
||||||
await this.waitForCheckoutToFinishUpdating();
|
await this.waitForCheckoutToFinishUpdating();
|
||||||
await this.page.getByText( 'Place Order', { exact: true } ).click();
|
await this.page.getByText( 'Place Order' ).click();
|
||||||
if ( waitForRedirect ) {
|
if ( waitForRedirect ) {
|
||||||
await this.page.waitForURL( /order-received/ );
|
await this.page.waitForURL( /order-received/ );
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,4 @@
|
||||||
|
Significance: minor
|
||||||
|
Type: update
|
||||||
|
|
||||||
|
Display the total price in the place order button.
|
Loading…
Reference in New Issue