On-/offboarding copy updates

packages/js/customer-effort-score/changelog/enhancement-38960

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fixing the onsubmit_label prop from SHOW_CES_MODAL action incorreclty named as onSubmitLabel

packages/js/customer-effort-score/src/store/reducer.js

@@ -28,7 +28,7 @@ const reducer = ( state = DEFAULT_STATE, action ) => {
 				action: action.surveyProps.action,
 				showDescription: action.surveyProps.showDescription,
 				title: action.surveyProps.title,
-				onSubmitLabel: action.onSubmitLabel,
+				onSubmitLabel: action.onsubmit_label,
 				firstQuestion: action.surveyProps.firstQuestion,
 				secondQuestion: action.surveyProps.secondQuestion,
 				onSubmitNoticeProps: action.onSubmitNoticeProps || {},

packages/js/product-editor/changelog/enhancement-38960

@@ -0,0 +1,4 @@
+Significance: minor
+Type: enhancement
+
+New product block editor modal text enhancements

packages/js/product-editor/src/components/feedback-bar/feedback-bar.tsx

@@ -53,7 +53,7 @@ export function FeedbackBar( { product }: FeedbackBarProps ) {
 				action: PRODUCT_EDITOR_FEEDBACK_CES_ACTION,
 				showDescription: false,
 				title: __(
-					"How's your experience with the new product form?",
+					'What do you think of the new product form?',
 					'woocommerce'
 				),
 				firstQuestion: __(
@@ -65,7 +65,7 @@ export function FeedbackBar( { product }: FeedbackBarProps ) {
 					'woocommerce'
 				),
 				onsubmitLabel: __(
-					"Thanks for the feedback. We'll put it to good use!",
+					"Thanks for the feedback — we'll put it to good use!",
 					'woocommerce'
 				),
 				shouldShowComments: () => false,
@@ -174,7 +174,6 @@ export function FeedbackBar( { product }: FeedbackBarProps ) {
 			{},
 			{
 				type: 'snackbar',
-				icon: <span>🌟</span>,
 			}
 		);
 	};
@@ -201,38 +200,40 @@ export function FeedbackBar( { product }: FeedbackBarProps ) {
 		<>
 			{ shouldShowFeedbackBar && (
 				<div className="woocommerce-product-mvp-ces-footer">
-					<Pill>Beta</Pill>
-					<div className="woocommerce-product-mvp-ces-footer__message">
-						{ createInterpolateElement(
-							__(
-								'How is your experience with the new product form? <span><shareButton>Share feedback</shareButton> or <turnOffButton>turn it off</turnOffButton></span>',
-								'woocommerce'
-							),
-							{
-								span: (
-									<span className="woocommerce-product-mvp-ces-footer__message-buttons" />
-								),
-								shareButton: (
-									<Button
-										variant="link"
-										onClick={ onShareFeedbackClick }
-									/>
-								),
-								turnOffButton: (
-									<Button
-										onClick={ onTurnOffEditorClick }
-										variant="link"
-									/>
+					<div className="woocommerce-product-mvp-ces-footer__body">
+						<Pill>Beta</Pill>
+						<div className="woocommerce-product-mvp-ces-footer__message">
+							{ createInterpolateElement(
+								__(
+									'How is your experience with the new product form? <span><shareButton>Share feedback</shareButton> or <turnOffButton>turn it off</turnOffButton></span>',
+									'woocommerce'
 								),
-							}
-						) }
+								{
+									span: (
+										<span className="woocommerce-product-mvp-ces-footer__message-buttons" />
+									),
+									shareButton: (
+										<Button
+											variant="link"
+											onClick={ onShareFeedbackClick }
+										/>
+									),
+									turnOffButton: (
+										<Button
+											onClick={ onTurnOffEditorClick }
+											variant="link"
+										/>
+									),
+								}
+							) }
+						</div>
+						<Button
+							className="woocommerce-product-mvp-ces-footer__close-button"
+							icon={ closeSmall }
+							label={ __( 'Hide this message', 'woocommerce' ) }
+							onClick={ onHideFeedbackBarClick }
+						></Button>
 					</div>
-					<Button
-						className="woocommerce-product-mvp-ces-footer__close-button"
-						icon={ closeSmall }
-						label={ __( 'Hide this message', 'woocommerce' ) }
-						onClick={ onHideFeedbackBarClick }
-					></Button>
 				</div>
 			) }
 		</>

packages/js/product-editor/src/components/feedback-bar/style.scss

@@ -1,20 +1,38 @@
 $gutenberg-blue: var(--wp-admin-theme-color);
 
+@keyframes slide-up {
+	0% {
+		bottom: -60px;
+	}
+	100% {
+		bottom: 0;
+	}
+}
+
 .woocommerce-product-mvp-ces-footer {
-	display: flex;
-	flex-direction: row;
-	justify-content: center;
-	align-items: center;
-	// the left/right padding is set to this to match the padding of
-	// .block-editor-block-list__layout.is-root-container and
-	// .editor-styles-wrapper combined
-	padding: $gap calc(2 * $gap + $gap-small);
-	gap: $gap;
+	position: fixed;
+	animation: slide-up 0.5s forwards;
+	width: 100%;
+	border-top: 1px solid var(--gutenberg-gray-100, #f0f0f0);
+	background: rgba(255, 255, 255, 0.5);
+	backdrop-filter: blur(6px);
 
-	@include breakpoint(">782px") {
-		padding: $gap 0;
-		max-width: 650px;
-		margin: 0 auto;
+	&__body {
+		display: flex;
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+		// the left/right padding is set to this to match the padding of
+		// .block-editor-block-list__layout.is-root-container and
+		// .editor-styles-wrapper combined
+		padding: $gap calc(2 * $gap + $gap-small);
+		gap: $gap;
+
+		@include breakpoint(">782px") {
+			padding: $gap 0;
+			max-width: 650px;
+			margin: 0 auto;
+		}
 	}
 
 	.woocommerce-pill {

packages/js/product-editor/src/components/product-mvp-feedback-modal/product-mvp-feedback-modal.tsx

@@ -16,6 +16,7 @@ import {
 import { FeedbackModal } from '@woocommerce/customer-effort-score';
 import { Text } from '@woocommerce/experimental';
 import { __ } from '@wordpress/i18n';
+import { useDispatch } from '@wordpress/data';
 
 /**
  * Provides a modal requesting customer feedback.
@@ -56,13 +57,13 @@ function ProductMVPFeedbackModal( {
 		},
 		{
 			key: 'difficult-to-use',
-			label: __( 'It is difficult to use', 'woocommerce' ),
+			label: __( "It's difficult to use", 'woocommerce' ),
 			checked: difficultToUse,
 			onChange: setDifficultToUse,
 		},
 		{
 			key: 'slow-buggy-or-broken',
-			label: __( 'It is slow, buggy, or broken', 'woocommerce' ),
+			label: __( "It's slow, buggy, or broken", 'woocommerce' ),
 			checked: slowBuggyOrBroken,
 			onChange: setSlowBuggyOrBroken,
 		},
@@ -79,8 +80,16 @@ function ProductMVPFeedbackModal( {
 		.filter( ( checkbox ) => checkbox.checked )
 		.map( ( checkbox ) => checkbox.key );
 
+	const { createSuccessNotice } = useDispatch( 'core/notices' );
+
 	const onSendFeedback = () => {
 		recordScoreCallback( checked, comments, email );
+		createSuccessNotice(
+			__(
+				"Thanks for the feedback — we'll put it to good use!",
+				'woocommerce'
+			)
+		);
 	};
 
 	const optionalElement = (
@@ -98,7 +107,7 @@ function ProductMVPFeedbackModal( {
 			onSubmit={ onSendFeedback }
 			onModalClose={ onCloseModal }
 			isSubmitButtonDisabled={ ! checked.length }
-			submitButtonLabel={ __( 'Send feedback', 'woocommerce' ) }
+			submitButtonLabel={ __( 'Send', 'woocommerce' ) }
 			cancelButtonLabel={ __( 'Skip', 'woocommerce' ) }
 			className="woocommerce-product-mvp-feedback-modal"
 		>

packages/js/product-editor/src/components/product-mvp-feedback-modal/test/index.tsx

@@ -1,8 +1,9 @@
 /**
  * External dependencies
  */
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen, fireEvent, act } from '@testing-library/react';
 import { createElement } from '@wordpress/element';
+import { useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -11,7 +12,22 @@ import { ProductMVPFeedbackModal } from '../index';
 
 const mockRecordScoreCallback = jest.fn();
 
+jest.mock( '@wordpress/data', () => ( {
+	...jest.requireActual( '@wordpress/data' ),
+	useDispatch: jest.fn(),
+} ) );
+
 describe( 'ProductMVPFeedbackModal', () => {
+	const createSuccessNotice = jest.fn();
+
+	beforeEach( () => {
+		( useDispatch as jest.Mock ).mockReturnValue( { createSuccessNotice } );
+	} );
+
+	afterEach( () => {
+		jest.resetAllMocks();
+	} );
+
 	it( 'should close the ProductMVPFeedback modal when skip button pressed', async () => {
 		render(
 			<ProductMVPFeedbackModal
@@ -33,9 +49,7 @@ describe( 'ProductMVPFeedbackModal', () => {
 		// Wait for the modal to render.
 		await screen.findByRole( 'dialog' );
 		fireEvent.click( screen.getByRole( 'checkbox', { name: /other/i } ) );
-		fireEvent.click(
-			screen.getByRole( 'button', { name: /Send feedback/i } )
-		);
+		fireEvent.click( screen.getByRole( 'button', { name: /Send/i } ) );
 	} );
 	it( 'should call the function sent as recordScoreCallback with the checked options', async () => {
 		render(
@@ -45,7 +59,15 @@ describe( 'ProductMVPFeedbackModal', () => {
 		);
 		// Wait for the modal to render.
 		await screen.findByRole( 'dialog' );
-		fireEvent.click( screen.getByRole( 'checkbox', { name: /other/i } ) );
+		act( () => {
+			fireEvent.click(
+				screen.getByRole( 'checkbox', { name: /other/i } )
+			);
+		} );
+		act( () => {
+			fireEvent.click( screen.getByRole( 'button', { name: /Send/i } ) );
+		} );
+
 		expect( mockRecordScoreCallback ).toHaveBeenCalledWith(
 			[ 'other' ],
 			'',

plugins/woocommerce-admin/client/products/fills/more-menu-items/about-the-editor-menu-item.tsx

@@ -31,7 +31,7 @@ export const AboutTheEditorMenuItem = ( {
 				icon={ <Icon icon={ info } /> }
 				iconPosition="right"
 			>
-				{ __( 'About the editor…', 'woocommerce' ) }
+				{ __( 'About the form…', 'woocommerce' ) }
 			</MenuItem>
 			{ isGuideOpen && (
 				<BlockEditorGuide

plugins/woocommerce-admin/client/products/fills/more-menu-items/feedback-menu-item.tsx

@@ -35,7 +35,7 @@ export const FeedbackMenuItem = ( { onClick }: { onClick: () => void } ) => {
 						action: 'new_product',
 						showDescription: false,
 						title: __(
-							"How's your experience with the new product form?",
+							'What do you think of the new product form?',
 							'woocommerce'
 						),
 						firstQuestion: __(
@@ -46,6 +46,10 @@ export const FeedbackMenuItem = ( { onClick }: { onClick: () => void } ) => {
 							"The product editing screen's functionality meets my needs",
 							'woocommerce'
 						),
+						onsubmitLabel: __(
+							"Thanks for the feedback — we'll put it to good use!",
+							'woocommerce'
+						),
 						getExtraFieldsToBeShown: (
 							values: {
 								email?: string;
@@ -161,7 +165,6 @@ export const FeedbackMenuItem = ( { onClick }: { onClick: () => void } ) => {
 					},
 					{
 						type: 'snackbar',
-						icon: <span>🌟</span>,
 					},
 					{
 						block_editor: isDescendantOf( 'product-block-editor' ),

plugins/woocommerce-admin/client/products/fills/product-block-editor-fills.tsx

@@ -1,6 +1,8 @@
 /**
  * External dependencies
  */
+import { MenuGroup } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
 import {
 	__experimentalProductMVPFeedbackModalContainer as ProductMVPFeedbackModalContainer,
 	__experimentalWooProductMoreMenuItem as WooProductMoreMenuItem,
@@ -46,27 +48,31 @@ const MoreMenuFill = ( { onClose }: { onClose: () => void } ) => {
 
 	return (
 		<>
-			<FeedbackMenuItem
-				onClick={ () => {
-					recordClick( 'feedback' );
-					onClose();
-				} }
-			/>
-			<ClassicEditorMenuItem
-				productId={ id }
-				onClick={ () => {
-					recordClick( 'classic_editor' );
-					onClose();
-				} }
-			/>
-			<AboutTheEditorMenuItem
-				onClick={ () => {
-					recordClick( 'about' );
-				} }
-				onCloseGuide={ () => {
-					onClose();
-				} }
-			/>
+			<MenuGroup label={ __( 'New product form (Beta)', 'woocommerce' ) }>
+				<AboutTheEditorMenuItem
+					onClick={ () => {
+						recordClick( 'about' );
+					} }
+					onCloseGuide={ () => {
+						onClose();
+					} }
+				/>
+				<FeedbackMenuItem
+					onClick={ () => {
+						recordClick( 'feedback' );
+						onClose();
+					} }
+				/>
+			</MenuGroup>
+			<MenuGroup>
+				<ClassicEditorMenuItem
+					productId={ id }
+					onClick={ () => {
+						recordClick( 'classic_editor' );
+						onClose();
+					} }
+				/>
+			</MenuGroup>
 		</>
 	);
 };