User story

Part of #2824

As a merchant, I want to be able to review individual price benchmark data for any qualified products in my store and (eventually) take action to make price adjustments from the same UI.

Figma link

https://www.figma.com/design/fqR0EHi63lWahRcVTKCcba/Google-Listings-%26-Ads-v2.x?node-id=10866-63040&t=UAZY05dsxzVwJuu2-0

Acceptance criteria

• The PriceBenchmarkSuggestionsTable component should list products that are priced more expensive/cheaper than competitors, and price suggestions
• The table should show 10 products per page.
• Clicking the "Change Price" button should not do anything for now.

Implementation brief

• Create the PriceBenchmarkSuggestionsTable component.
  • Add js/src/pages/price-benchmark/price-benchmark-suggestions-table/index.js to house the PriceBenchmarkSuggestionsTable component.
• Update the data store
  • Add the getPriceBenchmarkSuggestions selector and resolver to fetch the suggestions data.
    • Consider adding a parameter to the selector/resolver to fetch per paged data with a string as index.
• The data should be formatted to be used with WordPress' DataViews component.
  • Update webpack.config.js to not externalize the @wordpress/dataviews/wp package via the requestToExternal function of the WooCommerceDependencyExtractionWebpackPlugin plugin.
  • For monetary values, they should be formatted using the formatAmount function from the useAdsCurrency hook.
  • For table headers with tooltips, the AppTooltip component should be used.
    • Table headers markup can be altered via the render function of the field.
  • Any further calculations TBD (will all the data come from the API as is or the calculation will be on the FE?)
  • The titleField, descriptionField and mediaField should be mapped to the appropriate fields from the datastore/API to render the "card" within the first column.
  • On small screens, only the product and actions fields are visible.
    • The fields property should be modified to exclude fields that are not meant to be displayed on mobile.
• The following sub components should be added, which will be used when rendering the data
  • EffectivenessIndicator
    • Accepts the following props:
      • effectiveness which can be the following values:
        • low
        • medium
        • high
    • It should use the WordPress Badge component.
  • ChangePrice
    • Accepts the following props:
      • productID
      • label with default value set to Change Price
    • The implementation about displaying the modal will be done in another ticket.
• Update PriceBenchmarkSuggestions to include the PriceBenchmarkSuggestionsTable component for the "Price Benchmark & Suggestions" tab.

Out of bounds/rabbit holes

• The REST API endpoint that will return the price benchmarks suggestion data will be implemented in Add support for getting price benchmarks & suggestions from the Content API #2825. Unless already available when this issue is worked on, displaying modeled data should be fine and integration with the API can be handled in a follow-up issue.
• Pagination and sorting will be handled in Add Pagination component for price benchmark #2840 .

Test coverage

• Appropriate E2E tests should be added for the following features:
  • not all fields are rendered on small screens