Task: i2 Design Picker badge improvements

[candy02058912]

Context

• Update theme badge labels #97655 (review)
• https://github.com/Automattic/wp-calypso/pull/97655/files#r1893283266

Items to be discussed:

• Badge styles to accommodate for long strings
• Copy improvements? Showing a lower price (when paid annually) or keeping the current monthly price?

Acceptance criteria:

Add this section after the discussion has concluded

[github-actions]

OpenAI suggested the following labels for this issue:

• [Feature Group] Plans & Upgrades: The issue discusses improvements related to pricing options for annual and monthly subscriptions.
• [Feature] Pricing: The issue raises questions about potential improvements to how pricing is displayed, indicating a need for focus on pricing aspects.
• [Feature] Design Picker: The title specifies that this is about improvements to the Design Picker, which involves the visual design aspects of user onboarding.

[candy02058912]

Assigning @fditrapani as this task might start with some design feedback.

[fditrapani]

Thanks for creating this @candy02058912!

Badge styles to accommodate for long strings

This one is tricky. I was wondering whether we can display custom strings for certain locals where this behaviour is happening? I'm curious if anyone else has any other ideas? cc @p-jackson

Copy improvements? Showing a lower price (when paid annually) or keeping the current monthly price?

At this stage, we want to show the lowest price which is the current monthly price (but still billed annually). Space is limited so we can leave the extra details to checkout for the annual payments.

[candy02058912]

This will also happen for the following locales:

es

de

pt-br

it

nl

tr

[candy02058912]

I was wondering whether we can display custom strings for certain locals where this behaviour is happening? I'm curious if anyone else has any other ideas?

We can display custom strings for certain locales as well. I also think we can use the shorter copy for strings that are over 45 characters (which will cause the overflow).

How about shortening the text to '%(planName)s + %(price)s/mo'?

[candy02058912]

Took a stab on addressing the issue in this PR commit: 64804be

[candy02058912]

In #97734

This is a temporary fix, feel free to iterate on it 🙏

[zaguiini]

At this stage, we want to show the lowest price which is the current monthly price (but still billed annually). Space is limited so we can leave the extra details to checkout for the annual payments.

I don't think this is true. When I get the annual price coming from the BE and divide it by 12 I get a much lower price compared to the monthly price. Could you please confirm, @candy02058912?