Feature Description

This issue will implement the rendering of the new Introductory Modal CTA if conversion events are detected on a site. (Design Doc section).

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

Acceptance criteria

• A "New Feature Modal CTA" should be displayed on the Site Kit Dashboard the first time conversion reporting events are detected (and when the Goals chip + new Widget Area are rendered on the dashboard).
• The correct version should be rendered based on:
  • If only e-commerce events (purchase and / or add_to_cart) are detected: Figma mock
  • If only lead generation events are detected: Figma mock
  • If both e-commerce and lead events are detected: Figma mock
• Clicking on the “Show Me” CTA should auto scroll the dashboard to the new Site Goals widget area, highlighting the “Goals” tab chip in the dashboard navigation should do nothing (this will trigger a new Feature tour that will auto scroll in another issue).
• Clicking on Learn more link will open an external tab but link to the plugin again (this will be changed in a future issue).
• Clicking on the "X" upper right corner icon or the "Maybe later" button or anywhere outside the modal should dismiss the modal (while still keeping the new Goals chip and Site Goals widget area on the dashboard).
• Once dismissed, the modal should not appear on page reload, unless no clicks were made on the page.

Implementation Brief

• Extract a reusable/UI-only component from the existing WelcomeModal component named IntroModal and rename the stylesheet file and classes appropriately. This component should expect the header SVG, title, description, newBadge, CloseButton, CTAButton and DismissButton props that allow this component to be reused.
• Refactor the WelcomeModal to use the extracted IntroModal component above passing the correct props.
• The existing WelcomeModal component and the new IntroModal component should be rewritten in TypeScript.
• In assets/js/modules/analytics-4/components/site-goals: create a new FeatureIntroModal component that reuses the IntroModal component.
  • Reuse the new selectors created in Implement Site Goals widget area + navigation chip #12423 to determine which SVG, title and description to render in the modal.
  • The onView and onDismiss logic should be the same as the WelcomeModal (using the "dismissed items" API to dismiss the modal once it is viewed or dismissed.
  • Use the scrolling logic in the AnalyticsAndAdSenseAccountsDetectedAsLinkedOverlayNotification linked component to scroll to the new Goals section.
• Add a new Storybook Story for the modal and its 3 variations.

Test Coverage

• Add JSUnit tests to test the conditional rendering of the correct modal version.

QA Brief

• With the siteGoals feature flag enabled, go to Analytics → Conversion Reporting in the tester plugin and use the Force detected events menu to select only e-commerce events (purchase and/or add_to_cart). Navigate to the Site Kit dashboard and verify that the New Feature Modal CTA appears with the correct e-commerce variation as per the Figma mock. Click anywhere on the page and verify the modal does not appear again.
• Reset the dismissed state (go to the wp_googlesitekitpersistent_dismissed_items meta key row within wp_user_meta and set the last number after thesite_goals_intro_modal_banner from 0 to 1. Repeat with only lead generation events selected (submit_lead_form, contact and/or generate_lead). Verify the lead generation variation of the modal appears. Repeat once more with a combination of both e-commerce and lead events selected, and verify the combined variation of the modal appears.
• Verify that clicking either the "X" icon or the "Maybe later" button dismisses the modal while leaving the Goals chip and Site Goals widget area visible on the dashboard.
• With the siteGoals feature flag disabled, verify the modal does not appear even if conversion events are detected via the tester plugin.
• Verify the new Banner Modal storybook story as well as the three new stories within Modules -> Analytics -> Site Goals -> IntroModal
• Re-test the Setup Flow Refresh Modal by enabling its feature flag. Verify that there are no visible changes to design or behaviour. Verify the existing storybook story for the Welcome Modal.

Changelog entry

• Implement Site Goals new feature modal CTA.