Redesign upgrades page

[igorschoester]

Context

Note

I'm not sure why the JS lint is failing. Does not seem related to this PR?

Summary

This PR can be summarized in the following changelog entry:

• Changes the Upgrades page to a Plans page.
• [@yoast/ui-library 0.1.0 enhancement] Adds success and error variants to the Badge component.

Relevant technical choices:

• Replace the old implementation, but reuse the slug (wpseo_licenses) due to it being linked to in Premium and News.
• Remove the wpseo_licenses registration from the menu classes themselves. In favor of using filters to control it from the plans page integration. Added wpseo_network_submenu_pages, marked as internal.
• Did not remove the view PHP files right away (for safety), there is a cleanup task in a few sprints from now.

Test instructions

Test instructions for the acceptance test before the PR gets merged

This PR can be acceptance tested by following these steps:

• Verify you can go to the new plans page
• Verify it looks like the design
• Verify the URL still has the page=wpseo_licenses part
• Verify Plans is present in the WP admin bar menu (under SEO Settings)
• Verify Plans is present in the WP admin bar menu (under SEO Settings) while on the frontend
• Activate Premium & WooCommerce SEO
• Have a valid license for both
  • You could fake it with the script data, by adding the following in the Premium / Woo add-on classes. And then adjust the return values as needed

	public function is_active(): bool {
		return false;
	}

	public function has_license(): bool {
		return false;
	}

• Verify the Yoast WooCommerce SEO plan:
  • has the Current active plan highlight
  • has a Manage in MyYoast button
• Verify the Premium plan has a Manage in MyYoast button
• Verify the Manage in MyYoast links:
  • Premium links to http://yoa.st/plans-premium-manage
  • Woo links to http://yoa.st/plans-woocommerce-manage
• Invalidate the WooCommerce SEO license
• Verify the Woo plan now:
  • has the Plan not activated highlight
  • has a Buy button instead of Manage
• Deactivate the WooCommerce SEO plugin
• Verify the Woo plan no longer has the highlight
• Verify the Premium plan now has the Current active plan highlight (and still the Manage button)
• Invalidate the Premium license
• Verify the Premium plan now:
  • has the Plan not activated highlight
  • has a Buy button instead of Manage
• Deactivate the Premium plugin
• Verify the Premium plan no longer has a highlight
• Verify the Buy links:
  • Premium:
    • links to http://yoa.st/plans-premium-buy
    • The anchor tag includes the HTML attributes:
      • data-action with the value load-nfd-ctb
      • data-ctb-id with the value f6a84663-465f-4cb5-8ba5-f7a6d72224b2
  • Woo:
    • links to http://yoa.st/plans-woocommerce-buy
    • The anchor tag includes the HTML attributes:
      • data-action with the value load-nfd-woo-ctb
      • data-ctb-id with the value 5b32250e-e6f0-44ae-ad74-3cefc8e427f9
• Verify the learn more links:
  • Premium links to http://yoa.st/plans-premium-learn-more
  • Woo links to http://yoa.st/plans-woocommerce-learn-more

Multisite

• Go to the network admin
• Repeat the same steps as above (you can skip the links and design)

Other

• Change the browser window with to check the responsiveness: the Woo card should go under the Premium card if there is not enough room
• The general page also no longer registers for the PHP footer... which was not being used. You could verify the "Upgrade to Yoast SEO Premium" footer is still there without Premium

UI library

• Run the UI library storybook: yarn workspace @yoast/ui-library storybook
• Check out the Badge element page
• Verify the new variants are present and looking good

Relevant test scenarios

• Changes should be tested with the browser console open
• Changes should be tested on different posts/pages/taxonomies/custom post types/custom taxonomies
• Changes should be tested on different editors (Default Block/Gutenberg/Classic/Elementor/other)
• Changes should be tested on different browsers
• Changes should be tested on multisite

Test instructions for QA when the code is in the RC

• QA should use the same steps as above.

QA can test this PR by following these steps:

Impact check

This PR affects the following parts of the plugin, which may require extra testing:

UI changes

• This PR changes the UI in the plugin. I have added the 'UI change' label to this PR.

Other environments

• This PR also affects Shopify. I have added a changelog entry starting with [shopify-seo], added test instructions for Shopify and attached the Shopify label to this PR.

Documentation

• I have written documentation for this change. For example, comments in the Relevant technical choices, comments in the code, documentation on Confluence / shared Google Drive / Yoast developer portal, or other.

Quality assurance

• I have tested this code to the best of my abilities.
• During testing, I had activated all plugins that Yoast SEO provides integrations for.
• I have added unit tests to verify the code works as intended.
• If any part of the code is behind a feature flag, my test instructions also cover cases where the feature flag is switched off.
• I have written this PR in accordance with my team's definition of done.
• I have checked that the base branch is correctly set.

Innovation

• No innovation project is applicable for this PR.
• This PR falls under an innovation project. I have attached the innovation label.
• I have added my hours to the WBSO document.

Fixes https://github.com/Yoast/reserved-tasks/issues/636

[coveralls]

Pull Request Test Coverage Report for Build 89f09bc7b2695bb4a44e8b7bbbbb6c572f0092fb

Details

• 128 of 180 (71.11%) changed or added relevant lines in 26 files are covered.
• 2 unchanged lines in 1 file lost coverage.
• Overall coverage increased (+0.2%) to 53.893%

---

Changes Missing Coverage	Covered Lines	Changed/Added Lines	%
admin/menu/class-network-admin-menu.php	0	1	0.0%
admin/pages/licenses.php	0	1	0.0%
src/conditionals/admin/licenses-page-conditional.php	0	1	0.0%
admin/views/licenses.php	0	2	0.0%
packages/js/src/plans/app.js	0	2	0.0%
packages/js/src/plans/components/images/premium-svg.js	0	2	0.0%
packages/js/src/plans/components/images/woo-svg.js	0	2	0.0%
src/integrations/admin/addon-installation/installation-integration.php	0	2	0.0%
packages/js/src/plans/store/index.js	0	4	0.0%
src/plans/infrastructure/add-ons/managed-add-on.php	4	8	50.0%

Files with Coverage Reduction	New Missed Lines	%
admin/views/licenses.php	2	0.0%

Totals
Change from base Build fac5f602afd0ac4dc8df120d0c9420263a42705a:	0.2%
Covered Lines:	30472
Relevant Lines:	57509

---

💛 - Coveralls

[vraja-pro]

AC ✅