Newsletter Tasks: Complete 'Start building your audience' upon browsing the page

[zaguiini]

Closes #98775.

Registrazione.schermo.2025-01-24.alle.12.04.57.AM.mov

Testing Instructions

1. Apply Launchpad: add URL hash to "build audience" task jetpack#41299 to your sandbox (it's merged, but might not have been deployed)
2. Turn the feature flag on and create a Newsletter through /setup/onboarding flow.
3. Click the "Start building your audience" task in Launchpad.
4. Observe the notice at the top-right corner and click "Next steps".

You'll end up in /home/%s and the checklist task should be ticked.

[github-actions]

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

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

[matticbot]

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

Sections (~317 bytes added 📈 [gzipped])

name         parsed_size           gzip_size
subscribers       +737 B  (+0.1%)     +317 B  (+0.1%)

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

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.

[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 newsletter-goal/start-building-your-audience on your sandbox.

[p-jackson]

Really like the hook approach 👍 I'll make a couple tweaks

[p-jackson]

This is a nice wee hook, I like this approach 👍

Since the completion logic is unique for each task, I sort of wanted to have a different hook name, that made it clear that this hook was appropriate when the task is completed on navigation.

Suggested change

	export const useTaskCompletedNotice = ( {
	export const useTaskCompletedOnNavigationNotice = ( {

But this seems too clunky. So I think just leave it for now until something better becomes obvious.

[p-jackson]

I've made a change so that the client users a URL hash for determining whether the task should completed (rather than a feature flag). Depends on Automattic/jetpack#41299

[paulopmt1]

It's working as expected, nice work!

I raised a concern about the UX here: p1737727052353399-slack-C057AH42XQD

[vykes-mac]

Nice work here! Did a similar thing here #98865, I'll work with your hook instead! Nice ✨

[a8ci18n]

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

Some locales (Hebrew, Japanese) have been temporarily machine-translated due to translator availability. All other translations are usually ready within a few days. Untranslated and machine-translated strings will be sent for translation next Monday and are expected to be completed by the following Friday.

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

[a8ci18n]

Translation for this Pull Request has now been finished.