Show "Data gathering complete" Welcome modal variant.

[techanvil]

Feature Description

When viewing the dashboard, having previously completed the initial setup and viewed the gathering data variant of the Welcome modal, if Analytics is connected and gathering data, the "Data gathering complete" Welcome modal variant should be shown.

For reference, see the design in Figma.

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

Given that a user has previously completed the initial setup, viewed the gathering data variant of the Welcome modal and dismissed it:

• When viewing the dashboard, if data gathering is complete (see the AC for showing the dashboard tour variant of the modal in Add the WelcomeModal component. #11808):
  • The "Data gathering complete" Welcome modal variant is shown with the following content (please refer to Figma as the source of truth for the copy):
    • Title: Data gathering complete
    • Description: Take this quick tour to see the most important parts of your dashboard. It will show you where to look to track your site's success as you get more visitors.
    • Primary CTA: Start tour
    • Secondary CTA: Maybe later
  • The modal matches the design in Figma.

Implementation Brief

• Export the modal's graphic from Figma as an SVG and add it to the assets/svg/graphics directory.
• In assets/js/components/WelcomeModal.tsx:
  • If showGatheringDataModal is false and the dismissed item with key welcome-modal-gathering-data has been dismissed:
    • Show the modal with the title and description as specified in the AC.
    • Use the exported SVG as the graphic in the modal.

Test Coverage

• Add a story and JS tests for the "Data gathering complete" modal variant.

QA Brief

• Start setting up Site Kit with the staging proxy plugin activated, the setupFlowRefresh feature flag enabled, and "Force Search Console report data" set to gathering for Search Console in the Tester plugin.
• When landing on the dashboard, click Get started to dismiss the gathering data variant of the Welcome modal.
• Set "Force Search Console report data" to No data enforced for Search Console in the Tester plugin, clear session storage (open devtools and run sessionStorage.clear() in the console), and reload the dashboard.
• Confirm that the data available variant of the Welcome modal is visible as per the AC.
• Verify that closing the modal results in a request to the core/user/data/dismiss-item endpoint, with a payload containing the welcome-modal-with-tour slug.
• Note that when the modal appears, the close button will be focused, so will appear in its focused state and won't match the design. Clicking somewhere in the body of the modal will unfocus it, allowing the design to be matched.
  • The close button's active/hover/focus states will be implemented in issue Update the Welcome modal's close button to match the Figma design. #12045.

Changelog entry

• Add "Data gathering complete" Welcome modal variant to notify users when Analytics data gathering is finished.

[nfmohit]

IB ✅