Add PriceBenchmarkSuggestions component

.externalized.json

@@ -1 +1 @@
-["@woocommerce/block-templates","@woocommerce/components","@woocommerce/currency","@woocommerce/customer-effort-score","@woocommerce/data","@woocommerce/date","@woocommerce/navigation","@woocommerce/number","@woocommerce/product-editor","@woocommerce/settings","@woocommerce/tracks","@wordpress/api-fetch","@wordpress/components","@wordpress/compose","@wordpress/data","@wordpress/data-controls","@wordpress/date","@wordpress/dom","@wordpress/element","@wordpress/hooks","@wordpress/html-entities","@wordpress/i18n","@wordpress/primitives","@wordpress/url","jquery","lodash","react","react-dom"]
+["@woocommerce/block-templates","@woocommerce/components","@woocommerce/currency","@woocommerce/customer-effort-score","@woocommerce/data","@woocommerce/date","@woocommerce/navigation","@woocommerce/number","@woocommerce/product-editor","@woocommerce/settings","@woocommerce/tracks","@wordpress/api-fetch","@wordpress/components","@wordpress/compose","@wordpress/data","@wordpress/data-controls","@wordpress/date","@wordpress/dom","@wordpress/element","@wordpress/hooks","@wordpress/html-entities","@wordpress/i18n","@wordpress/primitives","@wordpress/url","@wordpress/viewport","jquery","lodash","react","react-dom"]

js/src/components/badge/index.js

@@ -0,0 +1,40 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import './index.scss';
+
+/**
+ * Badge component.
+ *
+ * A reusable badge component that displays content with optional styling based on intent.
+ * This is a temporary port of the Badge component from the Gutenberg repository:
+ * https://github.com/WordPress/gutenberg/tree/trunk/packages/components/src/badge
+ * until that package is made public.
+ *
+ * @param {Object} props - The component props.
+ * @param {string} [props.className] - Additional CSS classes to apply to the badge.
+ * @param {string} [props.intent='default'] - The intent of the badge, which determines its styling.
+ *                                            Possible values include 'default', 'success', 'info', 'warning ,'error', etc.
+ * @param {JSX.Element} props.children - The content to display inside the badge.
+ * @param {Object} [props.props] - Additional props to spread onto the badge element.
+ * @return {JSX.Element} The rendered badge component.
+ */
+function Badge( { className, intent = 'default', children, ...props } ) {
+	return (
+		<span
+			className={ classnames( 'gla-badge', className, {
+				[ `is-${ intent }` ]: intent,
+			} ) }
+			{ ...props }
+		>
+			<span className="gla-badge__content">{ children }</span>
+		</span>
+	);
+}
+
+export default Badge;

js/src/components/badge/index.scss

@@ -0,0 +1,38 @@
+.gla-badge {
+	padding: 0 $grid-unit-10;
+	min-height: $grid-unit-30;
+	max-width: 100%;
+	border-radius: $gla-border-radius;
+	font-size: $gla-font-smaller;
+	font-weight: 400;
+	line-height: $gla-line-height-smaller;
+	display: inline-flex;
+	align-items: center;
+	gap: 2px;
+
+	&:where(.is-default) {
+		background-color: $gray-100;
+		color: $gray-800;
+	}
+
+	&:where(.is-warning) {
+		background-color: $gla-color-yellow-0;
+		color: $gla-color-yellow-70;
+	}
+
+	&:where(.is-error) {
+		background-color: $gla-color-red-0;
+		color: $gla-color-red-70;
+	}
+
+	&:where(.is-success) {
+		background-color: $gla-color-green-0;
+		color: $gla-color-green-70;
+	}
+}
+
+.gla-badge__content {
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}

js/src/css/abstracts/_colors.scss

@@ -5,3 +5,9 @@
 
 $gla-color-green: #008a20;
 $gla-color-red: #d94f4f;
+$gla-color-green-0: #edfaef;
+$gla-color-green-70: #005c12;
+$gla-color-yellow-0: #fcf9e8;
+$gla-color-yellow-70: #614200;
+$gla-color-red-0: #fcf0f1;
+$gla-color-red-70: #8a2424;

js/src/data/action-types.js

@@ -51,6 +51,7 @@ const TYPES = {
 	RECEIVE_ADS_BUDGET_RECOMMENDATIONS: 'RECEIVE_ADS_BUDGET_RECOMMENDATIONS',
 	RECEIVE_GTIN_MIGRATION_STATUS: 'RECEIVE_GTIN_MIGRATION_STATUS',
 	RECEIVE_PRICE_BENCHMARK_SUMMARY: 'RECEIVE_PRICE_BENCHMARK_SUMMARY',
+	RECEIVE_PRICE_BENCHMARK_SUGGESTIONS: 'RECEIVE_PRICE_BENCHMARK_SUGGESTIONS',
 };
 
 export default TYPES;

js/src/data/actions.js

@@ -1208,7 +1208,7 @@
 export function* fetchPriceBenchmarkSummary() {
 	try {
 		const data = yield apiFetch( {
-			path: `${ API_NAMESPACE }/mc/price-benchmark/summary`,
+			path: `${ API_NAMESPACE }/mc/price-benchmarks/summary`,
 		} );
 
 		return {
@@ -1225,3 +1225,27 @@
 		);
 	}
 }
+
+/**
+ * Action to fetch the Price Benchmark suggestions.
+ */
+export function* fetchPriceBenchmarkSuggestions() {
+	try {
+		const data = yield apiFetch( {
+			path: `${ API_NAMESPACE }/mc/price-benchmarks`,
+		} );
+
+		return {
+			type: TYPES.RECEIVE_PRICE_BENCHMARK_SUGGESTIONS,
+			data,
+		};
+	} catch ( error ) {
+		handleApiError(
+			error,
+			__(
+				'There was an error getting the price benchmark suggestions.',
+				'google-listings-and-ads'
+			)
+		);
+	}
+}

js/src/data/reducer.js

@@ -540,6 +540,11 @@
 			return setIn( state, 'price_benchmark.summary', data );
 		}
 
+		case TYPES.RECEIVE_PRICE_BENCHMARK_SUGGESTIONS: {
+			const { data } = action;
+			return setIn( state, 'price_benchmark.suggestions', data );
+		}
+
 		// Page will be reloaded after all accounts have been disconnected, so no need to mutate state.
 		case TYPES.DISCONNECT_ACCOUNTS_ALL:
 		default:

js/src/data/resolvers.js

@@ -36,6 +36,7 @@
 	fetchTargetAudience,
 	fetchMCSetup,
 	fetchPriceBenchmarkSummary,
+	fetchPriceBenchmarkSuggestions,
 	receiveGoogleAccountAccess,
 	receiveReport,
 	receiveMCProductStatistics,
@@ -591,3 +592,10 @@
 export function* getPriceBenchmarkSummary() {
 	yield fetchPriceBenchmarkSummary();
 }
+
+/**
+ * Resolver for getting the Price Benchmark suggestions.
+ */
+export function* getPriceBenchmarkSuggestions() {
+	yield fetchPriceBenchmarkSuggestions();
+}

js/src/data/selectors.js

@@ -415,3 +415,13 @@
 export const getPriceBenchmarkSummary = ( state ) => {
 	return state.price_benchmark.summary;
 };
+
+/**
+ * Retrieves the price benchmark suggestions from the state.
+ *
+ * @param {Object} state - The state object containing price benchmark data.
+ * @return {Array} The array of price benchmark suggestions.
+ */
+export const getPriceBenchmarkSuggestions = ( state ) => {
+	return state.price_benchmark.suggestions;
+};

js/src/hooks/usePriceBenchmarkSuggestions.js

@@ -0,0 +1,27 @@
+/**
+ * External dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { STORE_KEY } from '~/data/constants';
+
+const selectorName = 'getPriceBenchmarkSuggestions';
+
+const usePriceBenchmarkSuggestions = () => {
+	return useSelect( ( select ) => {
+		const selector = select( STORE_KEY );
+
+		return {
+			suggestions: selector[ selectorName ](),
+			hasFinishedResolution: selector.hasFinishedResolution(
+				selectorName,
+				[]
+			),
+		};
+	}, [] );
+};
+
+export default usePriceBenchmarkSuggestions;

js/src/pages/price-benchmark/change-price.js

@@ -0,0 +1,28 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import AppButton from '~/components/app-button';
+
+/**
+ * ChangePrice component.
+ *
+ * Placeholder component.
+ *
+ * @param {Object} props - Component properties.
+ * @param {number} props.productID - The ID of the product for which the price is being changed.
+ * @param {string} [props.label='Change price'] - The label text for the button. Defaults to 'Change price'.
+ * @return {JSX.Element} The rendered AppButton component.
+ */
+const ChangePrice = ( {
+	productID,
+	label = __( 'Change price', 'google-listings-and-ads' ),
+} ) => {
+	return <AppButton id={ productID }>{ label }</AppButton>;
+};
+
+export default ChangePrice;

js/src/pages/price-benchmark/constants.js

@@ -1,2 +1,56 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
 export const TABLE_TYPE_SUGGESTIONS = 'suggestions';
 export const TABLE_TYPE_ADJUSTMENTS = 'adjustments';
+
+export const LABEL_PRICE_CHANGE_EFFECTIVENESS =
+	'LABEL_PRICE_CHANGE_EFFECTIVENESS';
+export const LABEL_PRICE_ON_GOOGLE = 'LABEL_PRICE_ON_GOOGLE';
+export const LABEL_PRICE_GAP = 'LABEL_PRICE_GAP';
+export const LABEL_SUGGESTED_PRICE = 'LABEL_SUGGESTED_PRICE';
+export const LABEL_REGULAR_PRICE = 'LABEL_REGULAR_PRICE';
+export const LABEL_ACTION = 'LABEL_ACTION';
+export const EFFECTIVENESS_UNSPECIFIED = 0;
+export const EFFECTIVENESS_LOW = 1;
+export const EFFECTIVENESS_MEDIUM = 2;
+export const EFFECTIVENESS_HIGH = 3;
+
+export const LABELS = {
+	[ LABEL_PRICE_CHANGE_EFFECTIVENESS ]: {
+		title: __( 'Change Effectiveness', 'google-listings-and-ads' ),
+		tooltip: __(
+			'Effectiveness tells you which products would benefit most from price changes. This rating takes into consideration the performance boost predicted by adjusting the sale price and the difference between your current price and the suggested price. Price suggestions with “High” effectiveness are predicted to drive the largest increase in performance. Keep in mind that predictions do not guarantee improvements in future performance.',
+			'google-listings-and-ads'
+		),
+	},
+	[ LABEL_PRICE_ON_GOOGLE ]: {
+		title: __( 'Avg. Price on Google', 'google-listings-and-ads' ),
+		tooltip: __(
+			'The effective price for a product across all retailers selling the same product weighted by customer clicks. Products are matched based on the GTIN you provide in the product details.',
+			'google-listings-and-ads'
+		),
+	},
+	[ LABEL_PRICE_GAP ]: {
+		title: __( 'Price Gap %', 'google-listings-and-ads' ),
+		tooltip: __(
+			'The percentage difference between your price and the price on Google for this product.',
+			'google-listings-and-ads'
+		),
+	},
+	[ LABEL_SUGGESTED_PRICE ]: {
+		title: __( 'Suggested Price', 'google-listings-and-ads' ),
+		tooltip: __(
+			'Suggested sale price predicted by Google for products that benefit most from pricing adjustments. It is based on advanced simulations at different price points over the past 7 days factoring in price elasticity, current performance and the performance impact on price changes for businesses similar to you. Use suggested sale prices as valuable directional guidance to help shape your pricing strategy. Learn more about how to change the sale price of your products. Keep in mind that predictions do not guarantee future performance outcomes.',
+			'google-listings-and-ads'
+		),
+	},
+	[ LABEL_REGULAR_PRICE ]: {
+		title: __( 'Regular Price', 'google-listings-and-ads' ),
+	},
+	[ LABEL_ACTION ]: {
+		title: __( 'Action', 'google-listings-and-ads' ),
+	},
+};

js/src/pages/price-benchmark/effectiveness-indicator.js

@@ -0,0 +1,55 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import {
+	EFFECTIVENESS_UNSPECIFIED,
+	EFFECTIVENESS_LOW,
+	EFFECTIVENESS_MEDIUM,
+	EFFECTIVENESS_HIGH,
+} from './constants';
+import Badge from '~/components/badge';
+
+const EFFECTIVENESS_MAP = {
+	[ EFFECTIVENESS_UNSPECIFIED ]: {
+		intent: 'default',
+		label: __( 'Unspecified', 'google-listings-and-ads' ),
+	},
+	[ EFFECTIVENESS_LOW ]: {
+		intent: 'error',
+		label: __( 'Low', 'google-listings-and-ads' ),
+	},
+	[ EFFECTIVENESS_MEDIUM ]: {
+		intent: 'warning',
+		label: __( 'Medium', 'google-listings-and-ads' ),
+	},
+	[ EFFECTIVENESS_HIGH ]: {
+		intent: 'success',
+		label: __( 'High', 'google-listings-and-ads' ),
+	},
+};
+
+/**
+ * Component to display an effectiveness indicator badge based on the provided effectiveness level.
+ *
+ * @param {Object} props - The component props.
+ * @param {string} props.effectiveness - The effectiveness level to determine the badge's intent and label.
+ * @return {JSX.Element|null} A Badge component with the corresponding intent and label, or null if the effectiveness level is invalid.
+ */
+const EffectivenessIndicator = ( { effectiveness } ) => {
+	if ( ! EFFECTIVENESS_MAP[ effectiveness ] ) {
+		return null;
+	}
+
+	return (
+		<Badge intent={ EFFECTIVENESS_MAP[ effectiveness ].intent }>
+			{ EFFECTIVENESS_MAP[ effectiveness ].label }
+		</Badge>
+	);
+};
+
+export default EffectivenessIndicator;

js/src/pages/price-benchmark/index.scss

@@ -1,7 +1,10 @@
+@import "@wordpress/dataviews/build-style/style.css";
+
 .gla-price-benchmark__card .app-tab-nav:first-child {
 	padding: 0 $grid-unit-40;
 }
 
 .gla-price-benchmark__comparison-chart {
 	margin: $grid-unit-40 0;
 }
+