Create `<ConversionTrackingToggle />` Component

[10upsimon]

Feature Description

With completion and integration of Conversion Tracking settings and the appropriate datastore in place (see #8612, #8613, #8614, #8615), the application is ready to accept a UI toggle control that will interface with the settings and control the enabled/disabled state of Conversion Tracking.

This component should not be module specific, and should take on the form of a new <ConversionTrackingToggle /> component. Said component will make use of actions and selectors from the newly defined conversion-tracking.js datastore in order to set initial state, and update settings accordingly when toggled. Specifically, this toggle will be setting the enabled/disabled state of Conversion Tracking.

This toggle will be integrated into both the Ads and GA4 module settings, but will be bidirectional in nature, i.e toggling it on or off in one module will have the same effect in the other module given that this component and its settings are not specific to a single module.

---

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

Acceptance criteria

• New ConversionTrackingToggle component should be created
  • It should be module agnostic
• It should source the toggle value from Conversion Tracking datastore
• Switching the toggle should update the value in Conversion Tracking datastore
• Disabling the tracking should trigger the disconnect modal per figma
• Toggle label should be Enable conversion tracking and description Conversion tracking is used for tracking how users interact with your site (if not provided by the component itself) matching the figma designs
• It should be guarded behind conversionInfra feature flag

Implementation Brief

• [ ] Add assets/js/components/conversion-tracking/ConversionTrackingToggle.js
  • You can use assets/js/components/consent-mode/ConsentModeSwitch.js switch as a starting point
  • If conversionInfra feature flag is not enabled, return early/do not render the markup
  • Apply labels added in AC (unless at the time of execution it changed in referenced figma design)
  • Apply styling from figma design referenced in AC. You can add assets/sass/components/settings/_googlesitekit-settings-conversion-tracking.scss for that purpose
  • Pull the value from Conversion Tracking settings datastore, using the enabled specific selector implemented in #8615
  • [ ] On Toggle switch
    • update the state using setConversionTrackingEnabled action implemented in above referenced issue
    • Trigger ConfirmDisableConversionTrackingDialog component if conversion tracking is about to be turned off
• [ ] Add assets/js/components/conversion-tracking/ConfirmDisableConversionTrackingDialog.js
  • You can use assets/js/components/consent-mode/ConfirmDisableConsentModeDialog.js as a starting point
  • Adapt the text to match the one provided in figma
    • You can pretty much keep most of the logic from consent mode modal and just adapt the content

Test Coverage

• Add stories for ConversionTrackingToggle component - perhaps showing toggle in on and off state
• Add stories for ConfirmDisableConsentModeDialog

QA Brief

Changelog entry

[10upsimon]

@zutigrm lets rather update the AC here to also indicate that updates to the conversion-tracking settings should also take place within the component, not just retrieving of values.

[zutigrm]

@10upsimon Makes sense, thanks. AC updated

[tofumatt]

@zutigrm Please make sure to reassign the original reviewer in cases like this, as it's best to have them re-review for efficiency 😄

@10upsimon Assigning this one to you since you already looked at it. 👍🏻

[zutigrm]

@tofumatt Oh I was sure I assigned it back to Simon, either missed it or for some reason it didn't go through

[10upsimon]

AC ✅ moving to IB

[10upsimon]

@zutigrm we need to mention the disconnect modals as defined in the Figma designs for GA and Ads modules.

[10upsimon]

@zutigrm as per internal discussions, this dialogue context will be different for ads and ga4, but it is essentially the same thing. I'd propose perhaps we add the ability to pass dialogue body content as part of the toggle component props, as the dialogue title and sub title (before the points) are the same, so maybe we can even just pass an array of items we want to show in the bullet points of the dialogue.

[10upsimon]

@zutigrm looking at the designs again, they are actually identical across both modules, so we do not need to do anything here other than mentioned in the IB that the dialogue should be created as per the Figma designs.

[10upsimon]

@zutigrm this LGTM, moving to EB

[tofumatt]

QA done as part of code review here, so moving this right to Approval 🙂