From 1ea3470fa1e89cdc8531211d3bb6354333f8f2d3 Mon Sep 17 00:00:00 2001
From: Alex Florisca <alex.florisca@automattic.com>
Date: Tue, 13 Dec 2022 14:54:27 +0000
Subject: [PATCH] Edit Proceed to Checkout button (#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>
---
 .../proceed-to-checkout-block/attributes.tsx  |  9 +++++
 .../proceed-to-checkout-block/block.tsx       |  6 ++--
 .../proceed-to-checkout-block/constants.tsx   |  9 +++++
 .../proceed-to-checkout-block/edit.tsx        | 35 +++++++++++++------
 4 files changed, 47 insertions(+), 12 deletions(-)
 create mode 100644 assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/constants.tsx

diff --git a/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/attributes.tsx b/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/attributes.tsx
index 845d3af9f5f..af502dd51c4 100644
--- a/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/attributes.tsx
+++ b/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/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/block.tsx b/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/block.tsx
index 86ffa47fc25..7b217647ebf 100644
--- a/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/block.tsx
+++ b/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>
 	);
 
diff --git a/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/constants.tsx b/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/constants.tsx
new file mode 100644
index 00000000000..f538e9d5c35
--- /dev/null
+++ b/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/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/edit.tsx b/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/edit.tsx
index 8e247fbbb49..62e9d5376d3 100644
--- a/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/edit.tsx
+++ b/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>
 	);
 };