User story

Part of #2824

As a merchant visiting the Product Benchmark tab for the first time, I would like some way-finding that gives me a brief intro into the feature so I can better understand what the feature is and how I should interact with it.

Figma link

https://www.figma.com/design/fqR0EHi63lWahRcVTKCcba/Google-Listings-%26-Ads-v2.x?node-id=10774-58071&t=HlrGSdvyJKQi4omQ-4

Acceptance criteria

• The PriceBenchmarkTour component should be rendered once, when the user initially visits the Price Benchmark page.
• Upon closing the modal, the appropriate setting should be updated in the database so that it's not rendered again.

Implementation brief

• Create the PriceBenchmarkTour component.
  • Add js/src/pages/price-benchmark/PriceBenchmarkTour.js to house the PriceBenchmarkTour component.
  • It should use the Tourkit component from @woocommerce/components and use follow the same implementation logic for other tours.
    • For e.g js/src/components/tours/rebranding-tour.js
    • The tour ID can be price-benchmark-tour.
    • Copy and layout should be as per the Figma designs.
• Update PriceBenchmark to include the PriceBenchmarkTour component which should be rendered when the user first visits the Price Benchmark page.
  • Clicking the "X" icon or outside of the popover should close the modal

Out of bounds/rabbit holes

Test coverage

• JS tests to be added to ensure the tour is shown only once.