From beca44c12b03f6b83de11b7ab504f2d41551d9ee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dami=C3=A1n=20Su=C3=A1rez?= <rdsuarez@gmail.com>
Date: Fri, 1 Dec 2023 16:02:29 -0300
Subject: [PATCH] react -> extract full editor toolbar button cpm

---
 .../components/full-editor-toolbar-button.tsx | 32 +++++++++++++++++++
 .../with-full-editor-toolbar-button.tsx       | 23 ++-----------
 2 files changed, 34 insertions(+), 21 deletions(-)
 create mode 100644 packages/js/product-editor/src/blocks/product-fields/description/components/full-editor-toolbar-button.tsx

diff --git a/packages/js/product-editor/src/blocks/product-fields/description/components/full-editor-toolbar-button.tsx b/packages/js/product-editor/src/blocks/product-fields/description/components/full-editor-toolbar-button.tsx
new file mode 100644
index 00000000000..583931d253d
--- /dev/null
+++ b/packages/js/product-editor/src/blocks/product-fields/description/components/full-editor-toolbar-button.tsx
@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import { createElement } from '@wordpress/element';
+import { ToolbarButton } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { recordEvent } from '@woocommerce/tracks';
+import { dispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store } from '../../../../store/product-editor-ui';
+
+export default function FullEditorToolbarButton( {
+	label = __( 'Edit Product description', 'woocommerce' ),
+	text = __( 'Full editor', 'woocommerce' ),
+} ) {
+	const { openModalEditor } = dispatch( store );
+
+	return (
+		<ToolbarButton
+			label={ label }
+			onClick={ () => {
+				recordEvent( 'product_add_description_click' );
+				openModalEditor();
+			} }
+		>
+			{ text }
+		</ToolbarButton>
+	);
+}
diff --git a/packages/js/product-editor/src/blocks/product-fields/description/components/with-full-editor-toolbar-button.tsx b/packages/js/product-editor/src/blocks/product-fields/description/components/with-full-editor-toolbar-button.tsx
index 5f5df3c8993..4385e9d0842 100644
--- a/packages/js/product-editor/src/blocks/product-fields/description/components/with-full-editor-toolbar-button.tsx
+++ b/packages/js/product-editor/src/blocks/product-fields/description/components/with-full-editor-toolbar-button.tsx
@@ -4,26 +4,20 @@
 import { createElement, Fragment } from '@wordpress/element';
 import { createHigherOrderComponent } from '@wordpress/compose';
 import { BlockControls } from '@wordpress/block-editor';
-import { ToolbarButton } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { recordEvent } from '@woocommerce/tracks';
-import { useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
-import { store } from '../../../../store/product-editor-ai';
 import type {
 	DescriptionBlockEditComponent,
 	DescriptionBlockEditProps,
 } from '../types';
+import FullEditorToolbarButton from './full-editor-toolbar-button';
 
 const wooBlockwithFullEditorToolbarButton =
 	createHigherOrderComponent< DescriptionBlockEditComponent >(
 		( BlockEdit: DescriptionBlockEditComponent ) => {
 			return ( props: DescriptionBlockEditProps ) => {
-				const { openModalEditor } = useDispatch( store );
-
 				// Only extend summary field block instances
 				if ( props?.name !== 'woocommerce/product-summary-field' ) {
 					return <BlockEdit { ...props } />;
@@ -50,20 +44,7 @@ const wooBlockwithFullEditorToolbarButton =
 				return (
 					<>
 						<BlockControls { ...blockControlProps }>
-							<ToolbarButton
-								label={ __(
-									'Edit Product description',
-									'woocommerce'
-								) }
-								onClick={ () => {
-									recordEvent(
-										'product_add_description_click'
-									);
-									openModalEditor();
-								} }
-							>
-								{ __( 'Full editor', 'woocommerce' ) }
-							</ToolbarButton>
+							<FullEditorToolbarButton />
 						</BlockControls>
 						<BlockEdit { ...props } />
 					</>