Free Listings + Paid Ads: Update learn more links, FAQs, CSS disclaimer, submission success modal, and title of free listings settings

[eason9487]

Changes proposed in this Pull Request:

This PR implements the rest parts of 📌 Update other UI changes in #1610.

• Change the URLs of the learn more links to the formal ones in the ads setup of onboarding flow.
• Update the FAQs in the ads setup.
• Add the disclaimer of Comparison Shopping Service to the accounts setup of onboarding flow.
• Implement the submission success modal on the product feed page after the onboarding is completed along with paid ads.
• Set different titles for the free listings setup of the onboarding and editing pages.

Screenshots:

📷 Disclaimer of Comparison Shopping Service

📷 FAQs in the ads setup

📷 Submission success modal when the onboarding is completed along with paid ads

📷 Different title on the edit free listings page

Detailed test instructions:

1. Go to the first step of onboarding flow.
2. Check if the copywriting of CSS disclaimer is the same as it is on Figma and if the UI is similar to the visual design.
   • Locally changing the isPreconditionReady here to false would be easier to check the UI state in the disabled style.
3. Go to the last step of onboarding flow.
4. Click on the two "Learn more" links on the left side to see if the formal pages are opened.
5. View the FAQs to check if the copywriting is the same as it is on Figma.
6. Complete the onboarding flow with sklp ads setup. (This revision doesn't include the implementation of completing with ads setup)
7. Go to the Product Feed page with the opening submission success modal: /wp-admin/admin.php?page=wc-admin&guide=submission-success&path=%2Fgoogle%2Fproduct-feed.
   • Without setting up ads, the content on the modal should have two pages.
   • Locally change the adsSetupComplete value to true and refresh page to simulate the finished ads setup. Check if the modal has the same copywriting as it is on Figma.

Changelog entry

Add - The disclaimer of Comparison Shopping Service of the accounts setup of onboarding flow.
Add - The submission success modal on the Product Feed page after the onboarding is completed along with paid ads setup.
Update - The FAQs in the paid ads setup and the campaign setup page.
Tweak - Use different titles for the free listings setup of the onboarding and editing pages.

[puntope]

💅 In Figma the CSS Disclaimer texts is 11px and in implementation it's 12px

[puntope]

💅 In disclaimer CSS --- I can still click on the elements (for example the links of the disclaimer) when it's disabled

[puntope]

💅 This glaData could be in UPPERCASE because it's a constant. I'm not sure if this is coming from the past.

[eason9487]

The glaData references to window.glaData, and its declaration and its lower-case properties are created by PHP side. In addition, it's more like preloading data rather than a collection of constants. Considering this seems to be out of the scope of this PR/project, I'm not leaning towards adjusting it in this PR.

[puntope]

✅ LGTM

💅 Check if the copywriting and UI of CSS disclaimer --> Left some minor comments. Not really a blocker
✅ two "Learn more" links on the left side.
✅ Checked the FAQs
✅ Checked the Guide Modal with and without Ads Completed

💅 Would be cool to add a test at least for the Success Guide Modal behaviour with and without Ads Completed. But could be done in future PRs

[eason9487]

Thanks for the code review, @puntope

In Figma the CSS Disclaimer texts is 11px and in implementation it's 12px

Browsers may have a limitation to force the font size smaller than n to a minimum size when rendering, for example, Chrome uses 12px as the minimum size, so I didn't style it with 11px. Although the ScaledText component can still work around the limitation, I assumed the workaround only be used within the ad preview scope.

In disclaimer CSS --- I can still click on the elements (for example the links of the disclaimer) when it's disabled

I think it should be ok that those links are clickable in CSS disclaimer when it's rendered in disabled style. The prop names disabled and disabledLeft might bring confusion. We could create a follow-up to rename all uses to a proper one.