Implement cosmetic changes to recommendations

[robertsreberski]

This PR adds cosmetic improvements to the recommendations flow, especially after introducing post-purchase onboarding.

Fixes #

Changes proposed in this Pull Request:

• Adjust the unviewed recommendation count to include the post-purchase onboarding process
• Adds progress text into the progress indicator of the post-purchase onboarding process

Other information:

• Have you written new tests for your changes, if applicable?
• Have you checked the E2E test CI results, and verified that your changes do not break them?

Jetpack product discussion

Related PR: #26484

Does this pull request change what data or activity we track or use?

No.

Testing instructions:

• Go to WP Admin and https://jetpack.com/redirect/?source=jetpack-plans&site=<your_test_site>
• Purchase any of the supported plans (see below), or if already having one, go to <your_test_site>/wp-admin/admin.php?page=jetpack#/recommendations, "Reset Options (dev only)" and reload the page.
• While landing in the post-purchase onboarding flow, notice that there is the text displayed on the right of progress bar

• Do not proceed with onboarding, go to other tab on jetpack dashboard
• Notice that the recommendation has a badge count with unviewed steps of currently active onboarding

• Reload the page, and see that recommendation badge will appear without a necessity of going to "Recommendations" tab

---

Supported plans:

1. Jetpack Scan
2. Jetpack Search
3. Jetpack VideoPress
4. Jetpack AntiSpam
5. Jetpack Backup
6. Jetpack Security
7. Jetpack Complete

[github-actions]

Are you an Automattician? You can now test your Pull Request on WordPress.com. On your sandbox, run bin/jetpack-downloader test jetpack update/recommendations-cosmetic-changes to get started. More details: p9dueE-5Nn-p2

[github-actions]

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

• ✅ Include a description of your PR changes.
  
• ✅ All commits were linted before commit.
  
• ✅ Add a "[Status]" label (In Progress, Needs Team Review, ...).
  
• ✅ Add testing instructions.
  
• ✅ Specify whether this PR includes any changes to data or privacy.
  
• 🔴 Add changelog entries to affected projects
  

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

---

The e2e test report can be found here. Please note that it can take a few minutes after the e2e tests checks are complete for the report to be available.

---

🔴 Action required: Please add missing changelog entries for the following projects: projects/plugins/jetpack

Use the Jetpack CLI tool to generate changelog entries by running the following command: jetpack changelog add.
Guidelines: /docs/writing-a-good-changelog-entry.md

---

Once your PR is ready for review, check one last time that all required checks (other than "Required review") appearing at the bottom of this PR are passing or skipped.
Then, add the "[Status] Needs Team review" label and ask someone from your team review the code.
Once you’ve done so, switch to the "[Status] Needs Review" label; someone from Jetpack Crew will then review this PR and merge it to be included in the next Jetpack release.

---

Jetpack plugin:

• Next scheduled release: November 1, 2022.
• Scheduled code freeze: October 25, 2022.

[CodeyGuyDylan]

Reload the page, and see that recommendation badge will appear without a necessity of going to "Recommendations" tab
Did it not do this before? I went and triggered a recommendation on my Ephemeral site and this is what I saw. Am I misunderstanding the change?

Other than this note, everything tests well and LGTM

[robertsreberski]

@CodeyGuyDylan

It worked like this, but only for the "newRecommendations". Now, we need to fetch onboarding data which are stored as part of recommendations data, thus we needed to introduce additional query in other tabs.

In the nutshell, all cosmetic changes introduced in this PR are related to new onboarding changes.

[CodeyGuyDylan]

@robertsreberski Ah I see, thank you for clarifying