diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/attributes.tsx b/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/attributes.tsx index 845d3af9f5f..af502dd51c4 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/attributes.tsx +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/attributes.tsx @@ -1,3 +1,8 @@ +/** + * Internal dependencies + */ +import { defaultButtonLabel } from './constants'; + export default { checkoutPageId: { type: 'number', @@ -10,4 +15,8 @@ export default { remove: true, }, }, + buttonLabel: { + type: 'string', + default: defaultButtonLabel, + }, }; diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/block.tsx b/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/block.tsx index 86ffa47fc25..7b217647ebf 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/block.tsx +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/block.tsx @@ -1,7 +1,6 @@ /** * External dependencies */ -import { __ } from '@wordpress/i18n'; import classnames from 'classnames'; import { useState, useEffect } from '@wordpress/element'; import Button from '@woocommerce/base-components/button'; @@ -15,6 +14,7 @@ import { CHECKOUT_STORE_KEY } from '@woocommerce/block-data'; * Internal dependencies */ import './style.scss'; +import { defaultButtonLabel } from './constants'; /** * Checkout button rendered in the full cart page. @@ -22,9 +22,11 @@ import './style.scss'; const Block = ( { checkoutPageId, className, + buttonLabel, }: { checkoutPageId: number; className: string; + buttonLabel: string; } ): JSX.Element => { const link = getSetting( 'page-' + checkoutPageId, false ); const isCalculating = useSelect( ( select ) => @@ -64,7 +66,7 @@ const Block = ( { onClick={ () => setShowSpinner( true ) } showSpinner={ showSpinner } > - { __( 'Proceed to Checkout', 'woo-gutenberg-products-block' ) } + { buttonLabel || defaultButtonLabel } ); diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/constants.tsx b/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/constants.tsx new file mode 100644 index 00000000000..f538e9d5c35 --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/constants.tsx @@ -0,0 +1,9 @@ +/** + * External dependencies + */ +import { __ } from '@wordpress/i18n'; + +export const defaultButtonLabel = __( + 'Proceed to Checkout', + 'woo-gutenberg-products-block' +); diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/edit.tsx b/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/edit.tsx index 8e247fbbb49..62e9d5376d3 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/edit.tsx +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/edit.tsx @@ -4,14 +4,20 @@ import { useRef } from '@wordpress/element'; import { useSelect } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; -import { InspectorControls, useBlockProps } from '@wordpress/block-editor'; +import Button from '@woocommerce/base-components/button'; +import { + InspectorControls, + RichText, + useBlockProps, +} from '@wordpress/block-editor'; import PageSelector from '@woocommerce/editor-components/page-selector'; import { CART_PAGE_ID } from '@woocommerce/block-settings'; -import Noninteractive from '@woocommerce/base-components/noninteractive'; + /** * Internal dependencies */ -import Block from './block'; +import { defaultButtonLabel } from './constants'; + export const Edit = ( { attributes, setAttributes, @@ -19,12 +25,14 @@ export const Edit = ( { attributes: { checkoutPageId: number; className: string; + buttonLabel: string; }; setAttributes: ( attributes: Record< string, unknown > ) => void; } ): JSX.Element => { const blockProps = useBlockProps(); - const { checkoutPageId = 0, className } = attributes; + const { checkoutPageId = 0, buttonLabel } = attributes; const { current: savedCheckoutPageId } = useRef( checkoutPageId ); + const currentPostId = useSelect( ( select ) => { if ( ! savedCheckoutPageId ) { @@ -44,7 +52,7 @@ export const Edit = ( { ) && ( + setPageId={ ( id: number ) => setAttributes( { checkoutPageId: id } ) } labels={ { @@ -60,12 +68,19 @@ export const Edit = ( { /> ) } - - + { + setAttributes( { + buttonLabel: content, + } ); + } } /> - + ); };