Keep consistent punctuation (or lack thereof) in onboarding modals

[autumnfjeld]

Keep consistent punctuation (or lack thereof) in onboarding modals: no periods at end of feature snippets

Fixes this:
pdtkmj-3es-p2#comment-6090

Related to #

Proposed Changes

BEFORE (English)	AFTER (English)

Check that a non-English locale uses the old translation (has the periods at the end of the sentance):

Why are these changes being made?

To have consistent punctuation in plan snippets (the microcopy for plan details)

Testing Instructions

• Go to /setup/onboarding
• Go through flow, selecting a paid domain
• On the plans page click "start with a free plan"
• See the modal with:
  • updated copy for English
  • old copy for other languages

Pre-merge Checklist

• Has the general commit checklist been followed? (PCYsg-hS-p2)
• Have you written new tests for your changes?
• Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
• Have you checked for TypeScript, React or other console errors?
• Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
• Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
  • For UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages.
  • NO because code handles waiting for translations
• For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-129003

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-129003&env=jetpack

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-129003&env=a8c-for-agencies

[matticbot]

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

• notifications
• wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug update/onboarding-modal-punctuation on your sandbox.

[matticbot]

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

Sections (~29 bytes added 📈 [gzipped])

name                  parsed_size           gzip_size
update-design-flow         +122 B  (+0.0%)      +29 B  (+0.0%)
plugins                    +122 B  (+0.0%)      +29 B  (+0.0%)
plans                      +122 B  (+0.0%)      +29 B  (+0.0%)
link-in-bio-tld-flow       +122 B  (+0.0%)      +29 B  (+0.0%)
jetpack-app                +122 B  (+0.0%)      +29 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 (~29 bytes added 📈 [gzipped])

name                                             parsed_size           gzip_size
async-load-signup-steps-plans-theme-preselected       +122 B  (+0.0%)      +29 B  (+0.0%)
async-load-signup-steps-plans                         +122 B  (+0.0%)      +29 B  (+0.0%)

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.

[p-jackson]

Tested, lgtm 👍

[p-jackson]

This works fine, but I did give it a double take because it's not really idiomatic React. At least not in our code base. We'd usually call the hook near the top of the function (like useTranslate) even in this special case where it's only used once.

I'm not sure why we do it this way. Maybe because React has all these special rules for how hooks get called, and so sometimes doing it this way actually doesn't work, even when there's only one call to the function.

I searched the code the code and found there are actually other components doing it this way too, but we mostly don't.

You should just merge it as is, not worth another CI round trip.

[autumnfjeld]

I was using this as an example, a starting point: https://github.com/Automattic/wp-calypso/blob/5855897201ecc35fa25f6a21f72346ea386559f0/client/me/account/toggle-sites-as-landing-page.tsx.

[autumnfjeld]

Updated, now with idiomatic React. 😄
Thanks for the input!

[a8ci18n]

Translation for this Pull Request has now been finished.

[simison]

BTW pretty sure this would get marked as "fuzzy" in translation tools and keep using old translations since it's simple punctuation change, and thus not need the "has translation" check. Thanks for thinking about non-English experience tho!

[p-jackson]

TIL!