Payments: Add visual clues for donation products

[Copons]

Users now have the ability to manually create products of type donations both in the editor and in the Calypso Earn section.

Donation products don't have any visual clue to distinguish them from regular products.

We should add some visual indications (label, icon, etc.) in the Product Management selector component in the editor, and in the Calypso Earn section.

Editor	Calypso

[BogdanUngureanu]

In Calypso I think adding a label after the name of the subscription would be similar to what we do in Calypso Pages with the "homepage" tag.

We could also add an icon with a heart, since we already use one for the Donations block, so the label would look like ":heart: Donation"

As for the Editor, not sure. We don't have enough real estate in that menu, so an icon would be ideal. However, not sure if it has enough context, since users might assume it's some kind of bookmarking button if we opt for the ❤️ icon.

What do you think?

[Copons]

cc @SaxonF

[SaxonF]

I wonder if we need to differentiate as whether something is a donation or could we just rely on the name added by the customer? If a payment plan is marked as a donation, could we update the name of the plan to be something like "Monthly donation" if the plan name wasn't already changed? The same could be done for one-off payments.

This might be a silly question but can you mark a plan as a donation if added from Earn?

[Copons]

This might be a silly question but can you mark a plan as a donation if added from Earn?

@SaxonF Not yet!
We have a PR ready to go, but were waiting for a JP release — which has happened now (cc @BogdanUngureanu): Automattic/wp-calypso#62208

I wonder if we need to differentiate as whether something is a donation or could we just rely on the name added by the customer? If a payment plan is marked as a donation, could we update the name of the plan to be something like "Monthly donation" if the plan name wasn't already changed? The same could be done for one-off payments.

Ah, something like this?
Normally the default product name is "Monthly subscription", but if the user flips some toggles, it could automatically be updated to something else, provided it hasn't been manually updated already.

E.g.

Frequency	Type	Default Name
one-time	default	Payment
one-time	donation	Donation
monthly	default	Monthly Subscription
monthly	donation	Monthly Donation
yearly	default	Yearly Subscription
yearly	donation	Yearly Donation

In the editor, we have used a fairly custom approach for the strings, which are controlled by the block, but it should be doable. 🤔

[SaxonF]

@Copons yep exactly!

[dsas]

#25397 fixes this for Jetpack, but the same change needs making in Calypso :)

[dsas]

Calypso change is at Automattic/wp-calypso#66338