Edit Proceed to Checkout button (https://github.com/woocommerce/woocommerce-blocks/pull/7733)

* Edit Proceed to Checkout button

* Don't allow empty button and remove console log

* extract default button label into a variable

* Feedback from Nadir & Niels

Co-authored-by: Niels Lange <info@nielslange.de>

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,
+	},
 };

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 }
 		</Button>
 	);
 

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'
+);

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 = ( {
 				) && (
 					<PageSelector
 						pageId={ checkoutPageId }
-						setPageId={ ( id ) =>
+						setPageId={ ( id: number ) =>
 							setAttributes( { checkoutPageId: id } )
 						}
 						labels={ {
@@ -60,12 +68,19 @@ export const Edit = ( {
 					/>
 				) }
 			</InspectorControls>
-			<Noninteractive>
-				<Block
-					checkoutPageId={ checkoutPageId }
-					className={ className }
+			<Button className="wc-block-cart__submit-button">
+				<RichText
+					multiline={ false }
+					allowedFormats={ [] }
+					value={ buttonLabel }
+					placeholder={ defaultButtonLabel }
+					onChange={ ( content ) => {
+						setAttributes( {
+							buttonLabel: content,
+						} );
+					} }
 				/>
-			</Noninteractive>
+			</Button>
 		</div>
 	);
 };