2021-07-22 11:03:00 +00:00
|
|
|
/**
|
|
|
|
* External dependencies
|
|
|
|
*/
|
2024-05-31 03:49:36 +00:00
|
|
|
import clsx from 'clsx';
|
2021-07-22 11:03:00 +00:00
|
|
|
import { getSetting } from '@woocommerce/settings';
|
|
|
|
import {
|
|
|
|
PlaceOrderButton,
|
|
|
|
ReturnToCartButton,
|
|
|
|
} from '@woocommerce/base-components/cart-checkout';
|
2022-12-15 10:28:23 +00:00
|
|
|
import { useCheckoutSubmit } from '@woocommerce/base-context/hooks';
|
2022-12-19 15:30:13 +00:00
|
|
|
import { noticeContexts } from '@woocommerce/base-context';
|
2023-11-14 16:32:53 +00:00
|
|
|
import { StoreNoticesContainer } from '@woocommerce/blocks-components';
|
|
|
|
import { applyCheckoutFilter } from '@woocommerce/blocks-checkout';
|
2024-05-08 09:18:48 +00:00
|
|
|
import { CART_STORE_KEY } from '@woocommerce/block-data';
|
|
|
|
import { useSelect } from '@wordpress/data';
|
|
|
|
import { formatPrice } from '@woocommerce/price-format';
|
2021-07-22 11:03:00 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Internal dependencies
|
|
|
|
*/
|
2022-12-15 10:28:23 +00:00
|
|
|
import { defaultPlaceOrderButtonLabel } from './constants';
|
2023-07-04 11:06:48 +00:00
|
|
|
import './style.scss';
|
2021-07-22 11:03:00 +00:00
|
|
|
|
|
|
|
const Block = ( {
|
|
|
|
cartPageId,
|
|
|
|
showReturnToCart,
|
2021-10-20 16:18:13 +00:00
|
|
|
className,
|
2022-12-15 10:28:23 +00:00
|
|
|
placeOrderButtonLabel,
|
2021-07-22 11:03:00 +00:00
|
|
|
}: {
|
|
|
|
cartPageId: number;
|
|
|
|
showReturnToCart: boolean;
|
2021-10-20 16:18:13 +00:00
|
|
|
className?: string;
|
2022-12-15 10:28:23 +00:00
|
|
|
placeOrderButtonLabel: string;
|
2021-07-22 11:03:00 +00:00
|
|
|
} ): JSX.Element => {
|
2022-12-15 10:28:23 +00:00
|
|
|
const { paymentMethodButtonLabel } = useCheckoutSubmit();
|
2024-05-08 09:18:48 +00:00
|
|
|
|
|
|
|
const cartTotals = useSelect( ( select ) => {
|
|
|
|
const store = select( CART_STORE_KEY );
|
|
|
|
return store.getCartTotals();
|
|
|
|
}, [] );
|
|
|
|
|
|
|
|
const totalPrice = formatPrice( cartTotals.total_price );
|
|
|
|
|
|
|
|
let label = applyCheckoutFilter( {
|
2022-12-15 10:28:23 +00:00
|
|
|
filterName: 'placeOrderButtonLabel',
|
|
|
|
defaultValue:
|
|
|
|
paymentMethodButtonLabel ||
|
|
|
|
placeOrderButtonLabel ||
|
|
|
|
defaultPlaceOrderButtonLabel,
|
|
|
|
} );
|
|
|
|
|
2024-05-08 09:18:48 +00:00
|
|
|
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 );
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-07-22 11:03:00 +00:00
|
|
|
return (
|
2024-05-31 03:49:36 +00:00
|
|
|
<div className={ clsx( 'wc-block-checkout__actions', className ) }>
|
2022-12-19 15:30:13 +00:00
|
|
|
<StoreNoticesContainer
|
|
|
|
context={ noticeContexts.CHECKOUT_ACTIONS }
|
|
|
|
/>
|
|
|
|
<div className="wc-block-checkout__actions_row">
|
|
|
|
{ showReturnToCart && (
|
|
|
|
<ReturnToCartButton
|
|
|
|
link={ getSetting( 'page-' + cartPageId, false ) }
|
|
|
|
/>
|
|
|
|
) }
|
2023-06-05 14:31:32 +00:00
|
|
|
<PlaceOrderButton
|
|
|
|
label={ label }
|
|
|
|
fullWidth={ ! showReturnToCart }
|
|
|
|
/>
|
2022-12-19 15:30:13 +00:00
|
|
|
</div>
|
2021-07-22 11:03:00 +00:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default Block;
|