Fix google docs introduction react warnings & adjust modals titles + copies

[JorPV]

Context

• We want to fix the React warnings from the dev console that where introduced by the Google Docs Add-On introduction, and adjust the title in the modals as per indicated in this issue (indicated right under the images).

Summary

This PR can be summarized in the following changelog entry:

• [wordpress-seo-premium] Fixes an unreleased bug where the Google Docs Add-on would introduce React render warnings.
• Adjusts the text and title of the Google Docs Add-on introduction modal.
• [wordpress-seo-premium] Adjusts the text and title of the Google Docs Add-on introduction modal.

Relevant technical choices:

• We have decided to make the text copies in both, Free and Premium, translatable as one string.
• We have also removed the replacement variable for the title of the modal, making it also translatable.
• The label of the button in Free, remains untouched (leaving the replacement variable).
• See this 🧵 for more context.

Test instructions

Test instructions for the acceptance test before the PR gets merged

This PR can be acceptance tested by following these steps:

React warnings + modal title and texts copies

In trunk

• Have Free and Premium activated.
• go to the wp-config.php file of your test site (as explained in the DoD) and add the following PHP constant to the file:
  if ( ! defined( 'SCRIPT_DEBUG' ) ) { define( 'SCRIPT_DEBUG', true ); }
• Open the database for your test site in any sql editor or use wp db query wp-cli command and remove _yoast_wpseo_introductions meta_key from wp_usermeta table:

DELETE FROM wp_usermeta WHERE meta_key = '_yoast_wpseo_introductions'

• In the WP backend, go to the Yoast SEO admin tab. with the dev. tools console open.
• Confirm that you see the Google Docs add-on introduction modal.
• Check the console and confirm that there are several React warning errors from that refer to calling Hooks inside a useEffect().

• Confirm also that the modal title is still Yoast SEO Google Docs Add-On - incl. in Premium and the text says: Optimize as you draft for SEO, inclusivity, and readability. The Yoast SEO Google Docs add-on lets you export content ready for WordPress, no reformatting required.

In this PR branch

• For devs: Check out to this branch rebase-583-fix-google-docs-introduction-react-warnings-adjust-urls-modals-title in the terminal and build the plugin.
• Have Free and Premium activated.
• Remove _yoast_wpseo_introductions meta_key row from the wp_usermeta table once more.
• Refresh the Yoast SEO admin page in WP
• Confirm that the React warnings about the calling Hooks inside the useEffect() are gone.

• Confirm also that the title of the modal now says Get one seat for the new Google Docs Add-On and the text says: Access all your favorite Yoast content analysis tools for SEO, readability, and inclusivity, right inside Google Docs. You can draft, collaborate, edit and export content perfectly formatted for WordPress.

• Make sure that the text of the button says Activate your free seat
• Hover over the button and confirm the link is this shortlink: https://yoa.st/google-docs-add-on-introduction-get-started
• Click the button and confirm that it opens a new tab to this blog post.
• Deactivate the Premium plugin.
• Remove _yoast_wpseo_introductions meta_key row from the wp_usermeta table once again.
• Go to the Yoast SEO admin page.
• Confirm that the title of the upsell modal in Free is also Get one seat for the new Google Docs Add-On and the text says: Optimize as you draft for SEO, inclusivity, and readability. The Yoast SEO Google Docs add-on lets you export content ready for WordPress, no reformatting required. Purchase separately or with Yoast SEO Premium.

• Make sure that the text of the button says Unlock with Yoast SEO Premium
• Hover over the button and confirm the link is this shortlink: https://yoa.st/google-docs-add-on-introduction-upsell
• Click the button and confirm that it opens a new tab to this blog post.

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 #583

[coveralls]

Pull Request Test Coverage Report for Build f231665edf0df11ae350eabd2e158b146bbb15ed

Details

• 0 of 3 (0.0%) changed or added relevant lines in 1 file are covered.
• 1 unchanged line in 1 file lost coverage.
• Overall coverage decreased (-0.001%) to 53.884%

---

Changes Missing Coverage	Covered Lines	Changed/Added Lines	%
packages/js/src/introductions/components/content.js	0	3	0.0%

Files with Coverage Reduction	New Missed Lines	%
packages/js/src/introductions/components/google-docs-addon-upsell.js	1	0.0%

Totals
Change from base Build 80e816e215a6bb49a6e309c9dd4e7b0ae29b5008:	-0.001%
Covered Lines:	30487
Relevant Lines:	57541

---

💛 - Coveralls

[marinakoleva]

CR & AT pass 🎉