Update copy for plans product cards

[monsieur-z]

Changes proposed in this Pull Request

This PR includes the final copy for the Jetpack Security, Security Daily, and Security Real-time product cards.

Jetpack Complete was handled in #45009.

Implementation notes

I did some refactoring in client/my-sites/plans-v2/utils.ts to handle Jetpack Security that's not a plan, codewise. The diff is hard to read, check the file instead.

Note: Missing icons will be added in a separate PR.

Testing instructions

• Visit the Plans page with the offer reset flow enabled
• Check the copy of the Jetpack Security product card against the copydeck
• Don't forget to check the descriptions and links in the tooltips
• Click on "Get Jetpack Security"
• Check the copy of the Security Daily and Real-time cards against the copydeck

Screenshots

Security

Security options

[matticbot]

Test live: https://calypso.live/?branch=update/plan-card-copy

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

App Entrypoints (~80 bytes added 📈 [gzipped])

name        parsed_size           gzip_size
entry-main       +453 B  (+0.0%)      +80 B  (+0.0%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Sections (~911 bytes added 📈 [gzipped])

name             parsed_size           gzip_size
purchases            +2513 B  (+0.2%)     +234 B  (+0.1%)
plans                +2513 B  (+0.4%)     +255 B  (+0.2%)
jetpack-connect      +2513 B  (+0.3%)     +255 B  (+0.1%)
checkout             +2234 B  (+0.1%)     +167 B  (+0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Async-loaded Components (~370 bytes added 📈 [gzipped])

name                                        parsed_size           gzip_size
async-load-signup-steps-plans-atomic-store      +2234 B  (+1.7%)     +146 B  (+0.4%)
async-load-signup-steps-plans                   +2234 B  (+1.2%)     +150 B  (+0.3%)
async-load-blocks-inline-help                    +453 B  (+0.3%)      +74 B  (+0.2%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[monsieur-z]

Fix layout issue in Details page.

[ChaosExAnima]

Left one non-blocking comment, otherwise looks great! 🎉

[a8ci18n]

This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/4246417

Thank you @monsieur-z for including a screenshot in the description! This is really helpful for our translators.

[a8ci18n]

Translation for this Pull Request has now been finished.