Add styling to marketplace to identify sponsored products

[Dan-Q]

Changes proposed in this Pull Request:

Closes WCCOM#19612. Where a product on the Marketplace "Discover" page has the label: 'promoted' from the WooCom API, adds the word "Sponsored" to the product card and shows a colored spot alongside/overlapping it. If it also has a primary_color: ... set, adds a "stripe" of that primary color to the top of the product card.

How to test the changes in this Pull Request:

1. Check out this branch to your local environment and build the assets, e.g. cd plugins/woocommerce-admin; pnpm watch:build; visit the site in your local server e.g. cd plugins/woocommerce; pnpm -- wp-env start
2. If you haven't done it in a while, consider clearing your wc_addons_featured transient e.g. cd plugins/woocommerce; pnpm -- wp-env run cli wp transient delete wc_addons_featured; this transient stores featured product data
3. Visit WooCommerce > Extensions > Discover
4. If any shown products are marked "promoted" in WooCom, they should appear here in accordance with the Figma design.
5. If you'd like to test around or if the data you're seeing shows no sponsored products, you can use your React debugger to modify the product associated with each <ProductCard>
6. Please test around

Screenshot

Changelog entry

• Automatically create a changelog entry from the details below.

Significance

• Patch
• Minor
• Major

Type

• Fix - Fixes an existing bug
• Add - Adds functionality
• Update - Update existing functionality
• Dev - Development related task
• Tweak - A minor adjustment to the codebase
• Performance - Address performance issues
• Enhancement - Improvement to existing functionality

Message

Made sponsored product listings in the Extensions marketplace easier to identify.

Comment

[github-actions]

Hi @andfinally, @corsonr,

Apart from reviewing the code changes, please make sure to review the testing instructions as well.

You can follow this guide to find out what good testing instructions should look like:
https://github.com/woocommerce/woocommerce/wiki/Writing-high-quality-testing-instructions

[github-actions]

Test Results Summary

Commit SHA: 197fafd

Test 🧪	Passed ✅	Failed 🚨	Broken 🚧	Skipped ⏭️	Unknown ❔	Total 📊	Duration ⏱️
API Tests	259	0	0	2	0	261	0m 38s
E2E Tests	336	0	0	21	0	357	7m 40s

---

To view the full API test report, click here.
To view the full E2E test report, click here.
To view all test reports, visit the WooCommerce Test Reports Dashboard.

[poligilad-auto]

Hey @Dan-Q, thanks for the ping.

I didn't get a chance to test the branch, but from the screenshot I can see a few things:

• The spacing between the product title and vendor name is too big vs. how it is now.
• Can you check that the top stripe is 5px? It currently looks a bit higher.
• This is probably not related and maybe a DEV environment bug, but I see the "Didn't find the theme you like? ..." sentence repeated twice and it should only be shown at the end of all the Themes in Extensions > Themes and not shown at all in Discover.

[corsonr]

One last thing, I'm not getting the sponsored card to show even when manipulating the props via the label prop set to promoted and by setting a background color.

[Dan-Q]

I didn't get a chance to test the branch, but from the screenshot I can see a few things:

It's funny: you stare at something long enough, you stop seeing the problems!

• The spacing between the product title and vendor name is too big vs. how it is now.

Fixed in 3b61fcc.

• Can you check that the top stripe is 5px? It currently looks a bit higher.

Fixed in 3121d30.

• This is probably not related and maybe a DEV environment bug, but I see the "Didn't find the theme you like? ..." sentence repeated twice and it should only be shown at the end of all the Themes in Extensions > Themes and not shown at all in Discover.

Huh; I see that too, but I don't think it's new to this PR... investigating.

[Dan-Q]

Huh; I see that too, but I don't think it's new to this PR... investigating.

This is a regression introduced a week ago; @nefeline is handling.

[Dan-Q]

Revised version screenshot:

[Dan-Q]

One last thing, I'm not getting the sponsored card to show even when manipulating the props via the label prop set to promoted and by setting a background color.

Here's me doing so - see if doing this works for you:

Screen.Recording.2024-03-19.at.11.36.52.mov

[corsonr]

Thanks for all the changes, that works beautifully!

[Dan-Q]

Turns out the green blobs aren't part of the design, whoops! Fixed in 0b11add.

[andfinally]

Looks great, thanks Dan.

[andfinally]

This could maybe have been woocommerce-marketplace__product-card__label, as we may show labels with a different text at some point. Not a big deal I guess.