Add the Settings Section setup CTA variant including happy path setup behavior

[techanvil]

Feature Description

Add the Settings Section setup CTA variant including happy path setup behavior.

This includes the setup logic (which may be extracted for reuse from the Setup CTA Banner if not already reusable) including OAuth redirection, the in progress state and the success state.

Note that the success state can reuse the component introduced in #8238.

See Settings section > setup CTA in the design doc.

---

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

Acceptance criteria

• If the Audience Segmentation feature has not been set up (i.e. the Setup CTA Banner has not been actioned), the Settings section should display a setup CTA instead of the switch to toggle the audiences widget area.
• The setup CTA should follow the Figma design.
• It should have a description with the following copy: To set up new visitor groups for your site, Site Kit needs to update your Google Analytics property.
• It should have an Enable groups link button.
• Upon clicking Enable groups, the feature will be set up following the setup logic described for the Setup CTA Banner (including the OAuth flow, if the edit scope is not granted. See Implement the happy path for creating audiences and the custom dimension via the Setup CTA Banner #8131 and Implement the OAuth flow for the Setup CTA Banner #8132), while showing a progress bar for the in progress state (see Figma).
• Upon success, a dismissible notice will be displayed alongside the switch for toggling the audiences widget area (see Figma).
  • It should have the following copy: We've added the audiences section to your dashboard!
  • It should have Show me and Got it primary and secondary CTAs.
  • Clicking Show me should navigate to the dashboard and scroll down to the newly added widget area.
  • Clicking Got it should dismiss the notice.
• Note that all copy should be verified with Figma as the source of truth.

Implementation Brief

This should be implemented once #8132 is implemented and merged.

• Create a hook useAudienceSegmentationSetup inside assets/js/modules/analytics-4/hooks/.

  • useAudienceSegmentationSetup should return an object consisting of the following properties.
    • isSaving - This is a boolean flag indicating whether the setup operation is in progress. This can be constructed using the useState hook and will be set inside onEnableGroups callback as it is currently in AudienceSegmentationSetupCTAWidget component.
    • onEnableGroups - Callback for Enable groups CTA. This should be taken as is from AudienceSegmentationSetupCTAWidget component from here with all the dependecies for the useCallback.
    • canRender - Return null from the component if this is false, else render the component. Refer this condition under which this can be evaluated.
      • Hook should also call this useEffect as this will be applicable to both the components and any other similar component.

• Create a new component SettingsVisitorGroupsCTA inside assets/js/modules/analytics-4/components/audience-segmentation/settings/.

  • We can take a reference of SettingsCardVisitorGroups component to create the UI for SettingsVisitorGroupsCTA component, its similar.
  • Component should use useAudienceSegmentationSetup hoook which will
    return the object as mentioned above.
    • If isSaving is false render the Enable groups CTA, else render the ProgressBar component. We may need to add a fix height when displaying the ProgressBar to avoid the layout shift (~142px).
    • onClick callback of CTA should be onEnableGroups callback returned by the hook.

• Create a new component AudienceSetupSuccessSettingsNotice inside /assets/js/modules/analytics-4/components/audience-segmentation/settings/ which should be responsible for displaying the success notice within SettingsCardVisitorGroups component.

  • Item key for component to display the notice can be audience_segmentation_setup_settings_notification.

• Update SettingsCardVisitorGroups component to display the success message as per following.

  • Check if the success banner has already been dismissed. Refer AudienceSegmentationSetupSuccessSubtleNotification component for the item key and how it handles the banner here. Note that the item key needs to be different as mentioned above so that relevant notice is being displayed.
  • Use dismiss item infra from core/user data store to check if the item is dismissed and to also dismiss the item.
  • Success banner should be displayed in SettingsCardVisitorGroups component if it has not been dismissed earlier.
  • Clicking the Got it should dismiss the notice.
  • Clicking show me should do the following.
    • Dismiss the notice.
    • Use navigateTo function to navigate to the audience widget area.

• Update the AudienceSegmentationSetupCTAWidget to use useAudienceSegmentationSetup hook and remove the code which has been ported to hook.

Test coverage

1. Add the stories for SettingsVisitorGroupsCTA component with all the states.
2. Add the test for the SettingsVisitorGroupsCTA component with different states and props.
3. Fix the story for AudienceSegmentationSetupCTAWidget component to accommodate changes.
4. Fix any failing tests and VRTs.
5. Add tests for the useAudienceSegmentationSetup hook.
   6 . Update the SettingsCardVisitorGroups component tests to add tests for the success notice behaviour.
6. Add tests for AudienceSetupSuccessSettingsNotice component.

QA Brief

• Set up Site Kit with the Analytics module, preferably with a property that doesn't have any audiences created.
• Turn on the audienceSegmentation feature flag.
• Go to Site Kit Settings -> Admin Settings and observe the Visitor groups area.
• Since Audience Segmentation has not been set up yet, verify that you see the setup CTA according to the ACs and Figma designs.
  • Note: Some aspects of the designs (e.g. border and spacing between the section title and text) may not exactly adhere to the Figma designs in order to maintain consistency with other sections in this screen.
• Click on the "Enable groups" CTA link. Verify that the "in progress state" appears according to the ACs and Figma designs.
• Verify that you're taken to the OAuth flow to grant necessary scopes.
• Once you return, the "in progress state" should persist until Audience Segmentation is set up, after which, you should see the success notification according to the ACs and Figma designs, followed by the pre-existing switch.
• Verify the actions of the success notification according to the ACs.
• This issue also touches on the behaviour of activating Audience Segmentation from the main dashboard set up CTA banner, so please do a smoke test there to ensure that is functioning as expected, with a special focus on the unhappy paths introduced in #8134.

Changelog entry

• Provide the ability to set up the Audience Segmentation feature from the Settings screen.

[kuasha420]

Thanks @ankitrox for drafting the IB. I've given an initial pass over the IB and the approach looks solid. A few questions and suggestions:

• The useAudienceSegmentationSetup should probably reside in assets/js/modules/analytics-4/hooks as the feature is analytics module specific and it will be used here.
• The hook also should have basic test coverage if possible.
• It would be good to detail a little bit more about the hook and what it should do, or how the suggested values should be obtained before being returned.

Let me know what you think, cheers!

[ankitrox]

Thank you so much @kuasha420 for reviewing the IB.

I have made some amendments in IB as per your suggestions. Assigning this to you for re-review.

Thanks again!

[kuasha420]

Thanks @ankitrox, Looking good now. However, I have missed a point in my previous review. The second to last point of the AC states "Upon success, a dismissible notice will be displayed alongside the switch for toggling the audiences widget area", this is not covered in current IB. Can you add that,

Besides that, it would be nice to add a pointer/note about trying to avoid layout shift while the progressbar is showing by using a appropriate height for the Visitor Group area and other relevant component. What do you think?

Cheers!

[ankitrox]

@kuasha420 Thanks for the spotting the missing point about the success notice.

I have addressed the feedback. assigning this to you for re-review.

Thanks

[kuasha420]

Thanks @ankitrox for the additions to the IB.

It is worth pointing out that the success notice for settings should use a different dismiss item key, Otherwise, if someone activates the Audience Group in Dashboard, and visits settings without dismissing the success notification, they'll see it above the toggle here as well which may not be desirable behavior.

Also, this should be a new component that renders inside the SettingsCardVisitorGroups, ie. AudienceSetupSuccessSettingsNotice which is similar in looks to the AudienceSegmentationSetupSuccessSubtleNotification.

Cheers.

[ankitrox]

Thank you @kuasha420 .

Updated the IB to include new component AudienceSetupSuccessSettingsNotice to display success notice and also included mention about the different item key.

[kelvinballoo]

QA Update ⚠️

I only 2 feedback:

ITEM 1:
First item is regarding the fonts size and weight used.
While it's reflecting as per figma, it's not consistent with other text on the page.

• The 'Enable groups' is at font weight 500 but other similar CTA on the page are at 400.
• The text 'To set up new visitor groups for your site, Site Kit needs to update your Google Analytics property.' is currently at 12px, similar to Figma but other similar text on the page are at 14px.

Refer to the video for more details.

https://github.com/user-attachments/assets/22a406ad-0c3c-4fb0-b0a3-0fd65c1a91db

ITEM 2:
I can still see the tiles on the SK dashboard even if I turn them off in settings.
Is that going to be fixed in a different ticket?

Tiles.persistent.mov

____________________________________________

Other than that, the following were tested good.

• The setup CTA follows the Figma design. ✅
• The setup CTA has a description with the following copy: To set up new visitor groups for your site, Site Kit needs to update your Google Analytics property. It has an Enable groups link button.✅
• It should have an
• Clicking on the "Enable groups" CTA link, the "in progress state" appears according to the ACs and Figma designs. We are then taken to the OAuth flow to grant necessary scopes. ✅
• Once OAuth granted, the "in progress state" persists until Audience Segmentation is set up, after which, the success notification appears with a switch. Copy and figma are good. ✅
• Upon success, a dismissible notice is displayed alongside the switch for toggling the audiences widget area.
  • It has the following copy: We've added the audiences section to your dashboard!
  • It has Show me and Got it primary and secondary CTAs.
  • Clicking Show me navigates to the dashboard and scroll sdown to the newly added widget area.
  • Clicking Got it dismisses the notice.
• Verified on mobile and tablet breakpoints and while there are no figma for those, there is no broken experience.

Enabling.groups.mov

[hussain-t]

@kelvinballoo, regarding your observations:

ITEM 1:
First item is regarding the fonts size and weight used.
While it's reflecting as per figma, it's not consistent with other text on the page.

We should keep the CTA and text consistent with other admin settings. Please send it back to execution and assign it to @benbowler, as he agreed to work on it during the AS sync.

ITEM 2:
I can still see the tiles on the SK dashboard even if I turn them off in settings.
Is that going to be fixed in a different ticket?

That has not been implemented yet. @techanvil, could you create a new issue for that?

[techanvil]

Thanks @hussain-t! As mentioned on Slack, I've created #9065.

[techanvil]

Back to you for another pass, @kelvinballoo.

[kelvinballoo]

QA Update ✅

Tested ITEM 1 and it's looking much better.

• The text 'To set up new visitor groups for your site, Site Kit needs to update your Google Analytics property.' is now at 14px, similar to other text on the page.
• The 'Enable groups' is now at font weight 400

ITEM 2 will be tackled under #9065

Other than that, the following were tested good.

• The setup CTA follows the Figma design. ✅
• The setup CTA has a description with the following copy: To set up new visitor groups for your site, Site Kit needs to update your Google Analytics property. It has an Enable groups link button.✅
• It should have an
• Clicking on the "Enable groups" CTA link, the "in progress state" appears according to the ACs and Figma designs. We are then taken to the OAuth flow to grant necessary scopes. ✅
• Once OAuth granted, the "in progress state" persists until Audience Segmentation is set up, after which, the success notification appears with a switch. Copy and figma are good. ✅
• Upon success, a dismissible notice is displayed alongside the switch for toggling the audiences widget area. ✅
  • It has the following copy: We've added the audiences section to your dashboard!
  • It has Show me and Got it primary and secondary CTAs.
  • Clicking Show me navigates to the dashboard and scroll sdown to the newly added widget area.
  • Clicking Got it dismisses the notice.
• Verified on mobile and tablet breakpoints and while there are no figma for those, there is no broken experience.
• Did a smoke test on the main dashboard for enabling groups and it is functioning as expected. Also tested the unhappy paths introduced in Implement the unhappy paths for the Setup CTA Banner #8134. ✅
  https://github.com/user-attachments/assets/eb5a1b09-3fa3-430a-847f-5e4f2d2320b9

Enabling.groups.mov

Moving ticket to Approval.