Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update product editor CES modal to match new designs #38592

Merged
merged 14 commits into from
Jun 12, 2023
4 changes: 4 additions & 0 deletions packages/js/customer-effort-score/changelog/update-38576
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: minor
Type: add

Add props to allow passing a classname to the feedback modal
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { createElement, useState } from '@wordpress/element';
import PropTypes from 'prop-types';
import { Button, Modal } from '@wordpress/components';
import { Text } from '@woocommerce/experimental';
import classnames from 'classnames';

/**
* Provides a modal requesting customer feedback.
Expand All @@ -30,6 +31,7 @@ function FeedbackModal( {
isSubmitButtonDisabled,
submitButtonLabel,
cancelButtonLabel,
className,
}: {
onSubmit: () => void;
title: string;
Expand All @@ -39,6 +41,7 @@ function FeedbackModal( {
isSubmitButtonDisabled?: boolean;
submitButtonLabel?: string;
cancelButtonLabel?: string;
className: string;
} ): JSX.Element | null {
const [ isOpen, setOpen ] = useState( true );

Expand All @@ -55,21 +58,23 @@ function FeedbackModal( {

return (
<Modal
className="woocommerce-feedback-modal"
className={ classnames( 'woocommerce-feedback-modal', className ) }
title={ title }
onRequestClose={ closeModal }
shouldCloseOnClickOutside={ false }
>
<Text
variant="body"
as="p"
className="woocommerce-feedback-modal__description"
size={ 14 }
lineHeight="20px"
marginBottom="1.5em"
>
{ description }
</Text>
{ description && (
<Text
variant="body"
as="p"
className="woocommerce-feedback-modal__description"
size={ 14 }
lineHeight="20px"
marginBottom="1.5em"
>
{ description }
</Text>
) }
{ children }
<div className="woocommerce-feedback-modal__buttons">
<Button isTertiary onClick={ closeModal } name="cancel">
Expand Down
4 changes: 4 additions & 0 deletions packages/js/product-editor/changelog/update-38576
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: minor
Type: update

Update product CES modal design and fields
Original file line number Diff line number Diff line change
Expand Up @@ -32,11 +32,16 @@ export const ProductMVPFeedbackModalContainer: React.FC< {
? getAdminLink( `post.php?post=${ productId }&action=edit` )
: getAdminLink( 'post-new.php?post_type=product' );

const recordScore = ( checked: string[], comments: string ) => {
const recordScore = (
checked: string[],
comments: string,
email: string
) => {
recordEvent( 'product_mvp_feedback', {
action: 'disable',
checked,
comments: comments || '',
email,
} );
hideProductMVPFeedbackModal();
window.location.href = `${ classicEditorUrl }&new-product-experience-disabled=true`;
Expand Down
Original file line number Diff line number Diff line change
@@ -1,9 +1,18 @@
/**
* External dependencies
*/
import { createElement, Fragment, useState } from '@wordpress/element';
import {
createElement,
createInterpolateElement,
Fragment,
useState,
} from '@wordpress/element';
import PropTypes from 'prop-types';
import { CheckboxControl, TextareaControl } from '@wordpress/components';
import {
CheckboxControl,
TextareaControl,
TextControl,
} from '@wordpress/components';
import { FeedbackModal } from '@woocommerce/customer-effort-score';
import { Text } from '@woocommerce/experimental';
import { __ } from '@wordpress/i18n';
Expand All @@ -20,7 +29,11 @@ function ProductMVPFeedbackModal( {
recordScoreCallback,
onCloseModal,
}: {
recordScoreCallback: ( checked: string[], comments: string ) => void;
recordScoreCallback: (
checked: string[],
comments: string,
email: string
) => void;
onCloseModal?: () => void;
} ): JSX.Element | null {
const [ missingFeatures, setMissingFeatures ] = useState( false );
Expand Down Expand Up @@ -61,37 +74,33 @@ function ProductMVPFeedbackModal( {
},
];
const [ comments, setComments ] = useState( '' );
const [ email, setEmail ] = useState( '' );
const checked = checkboxes
.filter( ( checkbox ) => checkbox.checked )
.map( ( checkbox ) => checkbox.key );

const onSendFeedback = () => {
const checked = checkboxes
.filter( ( checkbox ) => checkbox.checked )
.map( ( checkbox ) => checkbox.key );
recordScoreCallback( checked, comments );
recordScoreCallback( checked, comments, email );
};

const isSendButtonDisabled =
! comments &&
! missingFeatures &&
! missingPlugins &&
! difficultToUse &&
! slowBuggyOrBroken &&
! other;
const optionalElement = (
<span className="woocommerce-product-mvp-feedback-modal__optional">
{ __( '(optional)', 'woocommerce' ) }
</span>
);

return (
<FeedbackModal
title={ __(
'Thanks for trying out the new product editor!',
'woocommerce'
) }
description={ __(
'We’re working on making it better, and your feedback will help improve the experience for thousands of merchants like you.',
'Thanks for trying out the new product form!',
'woocommerce'
) }
onSubmit={ onSendFeedback }
onModalClose={ onCloseModal }
isSubmitButtonDisabled={ isSendButtonDisabled }
isSubmitButtonDisabled={ ! checked.length }
submitButtonLabel={ __( 'Send feedback', 'woocommerce' ) }
cancelButtonLabel={ __( 'Skip', 'woocommerce' ) }
className="woocommerce-product-mvp-feedback-modal"
>
<>
<Text
Expand All @@ -100,45 +109,63 @@ function ProductMVPFeedbackModal( {
weight="600"
size="14"
lineHeight="20px"
>
{ __(
'What made you switch back to the classic product editor?',
'woocommerce'
) }
</Text>
<Text
weight="400"
size="12"
as="p"
lineHeight="16px"
color="#757575"
className="woocommerce-product-mvp-feedback-modal__subtitle"
>
{ __( '(Check all that apply)', 'woocommerce' ) }
</Text>
<div className="woocommerce-product-mvp-feedback-modal__checkboxes">
{ checkboxes.map( ( checkbox, index ) => (
<CheckboxControl
key={ index }
label={ checkbox.label }
name={ checkbox.key }
checked={ checkbox.checked }
onChange={ checkbox.onChange }
/>
) ) }
</div>
></Text>
<fieldset className="woocommerce-product-mvp-feedback-modal__reason">
<legend>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you increase the margin bottom here? It is very close to the checkboxes and the margin is bigger in the design

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice catch! Updated from $gap-smaller to $gap-small.

{ __(
'What made you turn off the new product form?',
'woocommerce'
) }
</legend>
<div className="woocommerce-product-mvp-feedback-modal__checkboxes">
{ checkboxes.map( ( checkbox, index ) => (
<CheckboxControl
key={ index }
label={ checkbox.label }
name={ checkbox.key }
checked={ checkbox.checked }
onChange={ checkbox.onChange }
/>
) ) }
</div>
</fieldset>

<div className="woocommerce-product-mvp-feedback-modal__comments">
<TextareaControl
label={ __( 'Additional comments', 'woocommerce' ) }
value={ comments }
placeholder={ __(
'Optional, but much apprecated. We love reading your feedback!',
'woocommerce'
label={ createInterpolateElement(
__(
'Additional thoughts <optional/>',
'woocommerce'
),
{
optional: optionalElement,
}
) }
value={ comments }
onChange={ ( value: string ) => setComments( value ) }
rows={ 5 }
/>
</div>
<div className="woocommerce-product-mvp-feedback-modal__email">
<TextControl
label={ createInterpolateElement(
__(
'Your email address <optional/>',
'woocommerce'
),
{
optional: optionalElement,
}
) }
value={ email }
onChange={ ( value: string ) => setEmail( value ) }
rows={ 5 }
help={ __(
'In case you want to participate in further discussion and future user research.',
'woocommerce'
) }
/>
</div>
</>
</FeedbackModal>
);
Expand Down
Original file line number Diff line number Diff line change
@@ -1,23 +1,62 @@
$modal-header-height: 84px;

.woocommerce-product-mvp-feedback-modal {
width: 600px;

.components-modal__header {
height: $modal-header-height;

&-heading {
font-weight: 500;
font-size: 20px;
}
}

.components-modal__content {
margin-top: $modal-header-height;
padding-bottom: 32px;
}

legend,
label {
color: $gray-900;
}

.woocommerce-product-mvp-feedback-modal__optional {
color: $gray-700;
}

legend {
font-size: 11px;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess it's a question instead of a suggestion: do we have any standards for font-sizes? 11px seems odd (literally). I see it's the same size of the design.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We've used it in a lot of places, but I'm not sure if there is a style guide somewhere for this. It would be really nice to create variables around this (e.g., $font-size-label, $font-size-help, etc). Not sure if something like this already exists on the design side. cc @jarekmorawski

font-weight: 500;
line-height: 1.4;
text-transform: uppercase;
display: inline-block;
margin-bottom: $gap-smaller;
padding: 0;
}

&__subtitle {
margin-top: $gap-smaller !important;
}

&__checkboxes {
margin: $gap-small 0;
display: grid;
grid-template-columns: 1fr 1fr;
}

&__comments {
margin-top: 2em;
margin-bottom: 1.5em;

label {
display: block;
font-weight: bold;
text-transform: none;
font-size: 14px;
}

textarea {
width: 100%;
}
}

&__reason,
&__comments,
&__email {
margin-bottom: $gap-large;
}
}