Jetpack: Jetpack Backup: refactor price display in Backup card

[jeherve]

The price display does not currently match the other prices displayed in wp-admin:

• [x] The currency isn't the same as in Calypso or the other prices displayed in wp-admin https://github.com/Automattic/jetpack/pull/14018#pullrequestreview-317747937
• [x] "/year" doesn't match the "per year" used elsewhere https://github.com/Automattic/jetpack/pull/14018#pullrequestreview-315656185 (fixed in https://github.com/Automattic/jetpack/pull/14073)
• [x] The current '%(currencySymbol)s%(dailyBackupYearlyPrice)s-%(realtimeBackupYearlyPrice)s /year' price string is going to be hard to translate for our translators.

[robertf4]

* The current `'%(currencySymbol)s%(dailyBackupYearlyPrice)s-%(realtimeBackupYearlyPrice)s /year'` price string is going to be hard to translate for our translators.

@jeherve, do you have suggestions on a better way to do this? I did it this way to give the translators maximum freedom in translating this as they can use those parameters to order the currency symbol and the prices however they need to.

[jeherve]

I'll cc @akirk whose feedback will most likely be a lot better than mine.

@akirk Could you give us your opinion / suggestions / dismissal of my concerns on this?
https://github.com/Automattic/jetpack/pull/14018/files#diff-7457a6cdabf24fa36923c20d4c9b101cR83
Thank you :)

[akirk]

Honestly this is pretty confusing in English for me already, it looks like I need to calculate 20 minus 50. Why not "from $20 to $50 per year"? The currency symbol is a can of worms, I'd suggest to not put this up for translation but just include it in the price value.

Currency formatting is dependent on language, country, and currency. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat can we just use that?

[delawski]

Note that there's a new PlanPrice UI component introduced (actually it's a simplified version of PlanPrice from Calypso) in #14089 which we may want to use not only in the product card but also in the plans grid. It standardizes the way a price, discounted price or price range is rendered. Check out the implementation.

Also, the same PR changes the way the strings are passed for translation, so right now it looks like this:

__( '{{price/}} {{timeframe}}per year{{/timeframe}}', {
    components: { price, timeframe },
    comment: 'Describes how much a product costs. {{price/}} can be a single value or a range of values',
} )

It gives freedom in how the price and time frame are arranged.

As a last note, the price in the Jetpack Backup card is now using the local currency. All we need is to get a currency code from one of the Backup variations and then pass it to the PlanPrice which takes care of the rest (picking the currency symbol and formatting the price).

[jeherve]

This should now be fixed.

[jeherve]

Reopening as item number 1 on the list is still an issue.

Also reported in p8oabR-qW-p2#comment-3617

[tyxla]

Grabbing as I'm fixing the remaining issue

[tyxla]

Addressed in https://github.com/Automattic/jetpack/pull/14149 and D36105-code