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

84 lines
2.1 KiB
TypeScript

/**
* External dependencies
*/
import classnames from 'classnames';
import { getSetting } from '@woocommerce/settings';
import {
PlaceOrderButton,
ReturnToCartButton,
} from '@woocommerce/base-components/cart-checkout';
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
*/
import { defaultPlaceOrderButtonLabel } from './constants';
import './style.scss';
const Block = ( {
cartPageId,
showReturnToCart,
className,
placeOrderButtonLabel,
}: {
cartPageId: number;
showReturnToCart: boolean;
className?: string;
placeOrderButtonLabel: string;
} ): JSX.Element => {
const { paymentMethodButtonLabel } = useCheckoutSubmit();
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 ||
placeOrderButtonLabel ||
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 ) }
>
<StoreNoticesContainer
context={ noticeContexts.CHECKOUT_ACTIONS }
/>
<div className="wc-block-checkout__actions_row">
{ showReturnToCart && (
<ReturnToCartButton
link={ getSetting( 'page-' + cartPageId, false ) }
/>
) }
<PlaceOrderButton
label={ label }
fullWidth={ ! showReturnToCart }
/>
</div>
</div>
);
};
export default Block;