Remove API summaries in favour of client side code (#2387)

* Remove summary from API

* Add wordCountType to assets

* Update packages

* Remove summary from test data

* Featured product uses short desc

* Pass description instead of summary

* Use new Summary Component

* Component and tests

* Increased versititilty of methods

* Update assets/js/base/components/cart-checkout/product-summary/index.js

Co-authored-by: Darren Ethier <[email protected]>

* Extra tests for html tags

Co-authored-by: Darren Ethier <[email protected]>

Author: mikejolley

assets/js/atomic/components/product/summary/index.js

@@ -4,22 +4,30 @@
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { useProductLayoutContext } from '@woocommerce/base-context';
+import Summary from '@woocommerce/base-components/summary';
+import { getSetting } from '@woocommerce/settings';
 
 const ProductSummary = ( { className, product } ) => {
 	const { layoutStyleClassPrefix } = useProductLayoutContext();
-	if ( ! product.summary ) {
+	const source = product.short_description
+		? product.short_description
+		: product.description;
+
+	if ( ! source ) {
 		return null;
 	}
 
+	const countType = getSetting( 'wordCountType', 'words' );
+
 	return (
-		<div
+		<Summary
 			className={ classnames(
 				className,
 				`${ layoutStyleClassPrefix }__product-summary`
 			) }
-			dangerouslySetInnerHTML={ {
-				__html: product.summary,
-			} }
+			source={ source }
+			maxLength={ 150 }
+			countType={ countType }
 		/>
 	);
 };

assets/js/base/components/cart-checkout/index.js

@@ -6,6 +6,7 @@ export { default as PlaceOrderButton } from './place-order-button';
 export { default as Policies } from './policies';
 export { default as ProductImage } from './product-image';
 export { default as ProductLowStockBadge } from './product-low-stock-badge';
+export { default as ProductSummary } from './product-summary';
 export { default as ProductMetadata } from './product-metadata';
 export { default as ProductName } from './product-name';
 export { default as ProductPrice } from './product-price';

assets/js/base/components/cart-checkout/product-metadata/index.js

@@ -1,26 +1,34 @@
 /**
  * External dependencies
  */
-import { RawHTML } from '@wordpress/element';
 import PropTypes from 'prop-types';
 
 /**
  * Internal dependencies
  */
 import ProductVariationData from '../product-variation-data';
+import ProductSummary from '../product-summary';
 import './style.scss';
 
-const ProductMetadata = ( { summary, variation } ) => {
+const ProductMetadata = ( {
+	shortDescription = '',
+	fullDescription = '',
+	variation = [],
+} ) => {
 	return (
 		<div className="wc-block-product-metadata">
-			{ summary && <RawHTML>{ summary }</RawHTML> }
-			{ variation && <ProductVariationData variation={ variation } /> }
+			<ProductSummary
+				shortDescription={ shortDescription }
+				fullDescription={ fullDescription }
+			/>
+			<ProductVariationData variation={ variation } />
 		</div>
 	);
 };
 
 ProductMetadata.propTypes = {
-	summary: PropTypes.string,
+	shortDescription: PropTypes.string,
+	fullDescription: PropTypes.string,
 	variation: PropTypes.array,
 };
 

assets/js/base/components/cart-checkout/product-summary/index.js

@@ -0,0 +1,28 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+import Summary from '@woocommerce/base-components/summary';
+import { getSetting } from '@woocommerce/settings';
+
+/**
+ * Returns an element containing a summary of the product.
+ */
+const ProductSummary = ( { shortDescription = '', fullDescription = '' } ) => {
+	const source = shortDescription ? shortDescription : fullDescription;
+
+	if ( ! source ) {
+		return null;
+	}
+
+	return (
+		<Summary source={ source } maxLength={ 15 } countType={ getSetting( 'wordCountType', 'words' ) } />
+	);
+};
+
+ProductSummary.propTypes = {
+	shortDescription: PropTypes.string,
+	fullDescription: PropTypes.string,
+};
+
+export default ProductSummary;

assets/js/base/components/cart-checkout/product-variation-data/index.js

@@ -7,7 +7,11 @@ import PropTypes from 'prop-types';
 /**
  * Returns a formatted element containing variation details.
  */
-const ProductVariationData = ( { variation } ) => {
+const ProductVariationData = ( { variation = [] } ) => {
+	if ( ! variation ) {
+		return null;
+	}
+
 	const variationsText = variation
 		.map( ( v ) => {
 			if ( v.attribute ) {

assets/js/base/components/summary/index.js

@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+import { RawHTML, useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { generateSummary } from './utils';
+
+/**
+ * Summary component.
+ *
+ * @param {Object} props Component props.
+ * @param {string} props.source Source text.
+ * @param {number} props.maxLength Max length of the summary, using countType.
+ * @param {string} props.countType One of words, characters_excluding_spaces, or characters_including_spaces.
+ * @param {string} props.className Class name for rendered component.
+ */
+export const Summary = ( {
+	source,
+	maxLength = 15,
+	countType = 'words',
+	className = '',
+} ) => {
+	const summaryText = useMemo( () => {
+		return generateSummary( source, maxLength, countType );
+	}, [ source, maxLength, countType ] );
+
+	return <RawHTML className={ className }>{ summaryText }</RawHTML>;
+};
+
+export default Summary;

assets/js/base/components/summary/test/index.js

@@ -0,0 +1,109 @@
+/**
+ * Internal dependencies
+ */
+import { generateSummary } from '../utils';
+
+describe( 'Summary Component', () => {
+	describe( 'Test the generateSummary utility', () => {
+		const testContent =
+			'<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><p>Ut enim ad minim veniam, quis <strong>nostrud</strong> exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p><p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p><p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>';
+
+		it( 'Default', async () => {
+			const result = generateSummary( testContent );
+
+			expect( result.trim() ).toEqual(
+				'<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore&hellip;</p>'
+			);
+		} );
+		it( 'No max words - return full description', async () => {
+			const result = generateSummary( testContent, 100000 );
+
+			expect( result.trim() ).toEqual(
+				'<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>\n<p>Ut enim ad minim veniam, quis <strong>nostrud</strong> exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>\n<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>\n<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>'
+			);
+		} );
+		it( 'Limit to 3 words', async () => {
+			const result = generateSummary( testContent, 3 );
+
+			expect( result.trim() ).toEqual(
+				'<p>Lorem ipsum dolor&hellip;</p>'
+			);
+		} );
+		it( 'Limit to 1 word', async () => {
+			const result = generateSummary( testContent, 1 );
+
+			expect( result.trim() ).toEqual( '<p>Lorem&hellip;</p>' );
+		} );
+		it( 'Limit to 15 characters, including spaces.', async () => {
+			const result = generateSummary(
+				testContent,
+				15,
+				'characters_including_spaces'
+			);
+
+			expect( result.trim() ).toEqual( '<p>Lorem ipsum dol&hellip;</p>' );
+		} );
+		it( 'Limit to 15 characters, excluding spaces.', async () => {
+			const result = generateSummary(
+				testContent,
+				15,
+				'characters_excluding_spaces'
+			);
+
+			expect( result.trim() ).toEqual(
+				'<p>Lorem ipsum dolor&hellip;</p>'
+			);
+		} );
+	} );
+	describe( 'Test the generateSummary utility with HTML tags in strings', () => {
+		const testContent =
+			'<p>Lorem <strong class="classname">ipsum</strong> dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>';
+
+		it( 'Limit string to 10 characters', async () => {
+			const result = generateSummary(
+				testContent,
+				10,
+				'characters_excluding_spaces'
+			);
+
+			expect( result.trim() ).toEqual( '<p>Lorem ipsum&hellip;</p>' );
+		} );
+		it( 'Limit string to 5 words', async () => {
+			const result = generateSummary( testContent, 5, 'words' );
+
+			expect( result.trim() ).toEqual(
+				'<p>Lorem ipsum dolor sit amet&hellip;</p>'
+			);
+		} );
+		it( 'First paragraph only - tags are not stripped.', async () => {
+			const result = generateSummary( testContent, 9999, 'words' );
+
+			expect( result.trim() ).toEqual(
+				'<p>Lorem <strong class="classname">ipsum</strong> dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>'
+			);
+		} );
+	} );
+	describe( 'Test the generateSummary utility with special chars', () => {
+		const testContent =
+			'<p>我不知道这是否行得通。</p><p>我是用中文写的说明，因此我们可以测试如何修剪产品摘要中的单词。</p>';
+
+		it( 'Default', async () => {
+			const result = generateSummary(
+				testContent,
+				15,
+				'characters_excluding_spaces'
+			);
+
+			expect( result.trim() ).toEqual( '<p>我不知道这是否行得通。</p>' );
+		} );
+		it( 'Limit to 3 words', async () => {
+			const result = generateSummary(
+				testContent,
+				3,
+				'characters_excluding_spaces'
+			);
+
+			expect( result.trim() ).toEqual( '<p>我不知&hellip;</p>' );
+		} );
+	} );
+} );