Update verified product owner view for a review (https://github.com/woocommerce/woocommerce-admin/pull/5877)
* Add checkmark svg and update verified owner view * Add changelog * Fix lint errors, add tooltip, and add test
This commit is contained in:
louwie17
GitHub
parent
57cfae76e7
commit
9055d3831e
|
|
@ -0,0 +1,27 @@
|
|||
export default () => (
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<mask
|
||||
id="mask0"
|
||||
mask-type="alpha"
|
||||
maskUnits="userSpaceOnUse"
|
||||
x="1"
|
||||
y="1"
|
||||
width="14"
|
||||
height="14"
|
||||
>
|
||||
<path
|
||||
d="M7.99992 1.33301C4.31992 1.33301 1.33325 4.31967 1.33325 7.99967C1.33325 11.6797 4.31992 14.6663 7.99992 14.6663C11.6799 14.6663 14.6666 11.6797 14.6666 7.99967C14.6666 4.31967 11.6799 1.33301 7.99992 1.33301ZM7.99992 13.333C5.05992 13.333 2.66659 10.9397 2.66659 7.99967C2.66659 5.05967 5.05992 2.66634 7.99992 2.66634C10.9399 2.66634 13.3333 5.05967 13.3333 7.99967C13.3333 10.9397 10.9399 13.333 7.99992 13.333ZM6.66658 9.44634L11.0599 5.05301L11.9999 5.99967L6.66658 11.333L3.99992 8.66634L4.93992 7.72634L6.66658 9.44634Z"
|
||||
fill="white"
|
||||
/>
|
||||
</mask>
|
||||
<g mask="url(#mask0)">
|
||||
<rect width="16" height="16" fill="#4AB866" />
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
|
|
@ -4,11 +4,10 @@
|
|||
import { __, sprintf } from '@wordpress/i18n';
|
||||
import classnames from 'classnames';
|
||||
import { Component, Fragment } from '@wordpress/element';
|
||||
import { Button } from '@wordpress/components';
|
||||
import { Button, Tooltip } from '@wordpress/components';
|
||||
import { compose } from '@wordpress/compose';
|
||||
import { withSelect, withDispatch } from '@wordpress/data';
|
||||
import PropTypes from 'prop-types';
|
||||
import CheckmarkIcon from 'gridicons/dist/checkmark';
|
||||
import StarIcon from 'gridicons/dist/star';
|
||||
import StarOutlineIcon from 'gridicons/dist/star-outline';
|
||||
import interpolateComponents from 'interpolate-components';
|
||||
|
|
@ -32,6 +31,7 @@ import {
|
|||
ActivityCard,
|
||||
ActivityCardPlaceholder,
|
||||
} from '../../../header/activity-panel/activity-card';
|
||||
import CheckmarkCircleIcon from './checkmark-circle-icon';
|
||||
import { CurrencyContext } from '../../../lib/currency-context';
|
||||
import sanitizeHTML from '../../../lib/sanitize-html';
|
||||
import { REVIEW_PAGE_LIMIT, unapprovedReviewsQuery } from './utils';
|
||||
|
|
@ -167,7 +167,7 @@ class ReviewsPanel extends Component {
|
|||
const title = interpolateComponents( {
|
||||
mixedString: sprintf(
|
||||
__(
|
||||
'{{authorLink}}%s{{/authorLink}} reviewed {{productLink}}%s{{/productLink}}',
|
||||
'{{authorLink}}%s{{/authorLink}}{{verifiedCustomerIcon/}} reviewed {{productLink}}%s{{/productLink}}',
|
||||
'woocommerce-admin'
|
||||
),
|
||||
review.reviewer,
|
||||
|
|
@ -191,6 +191,17 @@ class ReviewsPanel extends Component {
|
|||
type="external"
|
||||
/>
|
||||
),
|
||||
verifiedCustomerIcon: review.verified ? (
|
||||
<span className="woocommerce-review-activity-card__verified">
|
||||
<Tooltip
|
||||
text={ __( 'Verified owner', 'woocommerce-admin' ) }
|
||||
>
|
||||
<span>
|
||||
<CheckmarkCircleIcon />
|
||||
</span>
|
||||
</Tooltip>
|
||||
</span>
|
||||
) : null,
|
||||
},
|
||||
} );
|
||||
|
||||
|
|
@ -202,12 +213,6 @@ class ReviewsPanel extends Component {
|
|||
outlineIcon={ StarIcon }
|
||||
size={ 13 }
|
||||
/>
|
||||
{ review.verified && (
|
||||
<span className="woocommerce-review-activity-card__verified">
|
||||
<CheckmarkIcon size={ 18 } />
|
||||
{ __( 'Verified customer', 'woocommerce-admin' ) }
|
||||
</span>
|
||||
) }
|
||||
</Fragment>
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -16,16 +16,18 @@
|
|||
}
|
||||
}
|
||||
|
||||
$icon-size: 18px;
|
||||
.woocommerce-review-activity-card__verified {
|
||||
margin-left: $gap-small;
|
||||
display: inline-flex;
|
||||
margin-left: $gap-smallest;
|
||||
position: relative;
|
||||
top: $gap-smallest;
|
||||
color: $valid-green;
|
||||
@include font-size( 12 );
|
||||
|
||||
.gridicon {
|
||||
margin-right: $gap-smallest;
|
||||
svg {
|
||||
width: $icon-size;
|
||||
height: $icon-size;
|
||||
fill: $valid-green;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -54,6 +54,10 @@ jest.mock( '@woocommerce/components', () => ( {
|
|||
},
|
||||
} ) );
|
||||
|
||||
jest.mock( '../checkmark-circle-icon', () =>
|
||||
jest.fn().mockImplementation( () => '[checkmark-circle-icon]' )
|
||||
);
|
||||
|
||||
describe( 'ReviewsPanel', () => {
|
||||
it( 'should render an empty review card', () => {
|
||||
render(
|
||||
|
|
@ -79,6 +83,19 @@ describe( 'ReviewsPanel', () => {
|
|||
expect( screen.getByText( 'Reviewer reviewed Cap' ) ).not.toBeNull();
|
||||
} );
|
||||
|
||||
it( 'should render checkmark circle icon in the review title, if review is verfied owner', () => {
|
||||
render(
|
||||
<ReviewsPanel
|
||||
hasUnapprovedReviews={ true }
|
||||
isError={ false }
|
||||
isRequesting={ false }
|
||||
reviews={ [ { ...REVIEW, verified: true } ] }
|
||||
/>
|
||||
);
|
||||
const header = screen.getByRole( 'heading', { level: 3 } );
|
||||
expect( header.innerHTML ).toMatch( /\[checkmark-circle-icon\]/ );
|
||||
} );
|
||||
|
||||
describe( 'review actions', () => {
|
||||
it( 'should render a review card with approve, mark as spam, and delete buttons', () => {
|
||||
render(
|
||||
|
|
|
|||
|
|
@ -73,6 +73,7 @@ Release and roadmap notes are available on the [WooCommerce Developers Blog](htt
|
|||
|
||||
== Unreleased ==
|
||||
|
||||
- Fix: Moved certified owner label for review to title. ##5877
|
||||
- Fix: Move collapsible config to panels object, to allow for more control. #5855
|
||||
- Tweak: Fix inconsistent REST API paramater name for customer type filtering.
|
||||
- Enhancement: Tasks extensibility in Home Screen. #5794
|
||||
|
|
|
|||
Loading…
Reference in New Issue