-
Notifications
You must be signed in to change notification settings - Fork 286
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Create SetupComponent
in Ads
Module
#8346
Comments
ACs here look good, I added a link to the relevant Figma design in the ACs and a screenshot for context, but otherwise good. 👍🏻 |
Added IB and set as blocking #8251. In the interest of speed, I created a draft PR here, that can be used as the basis of this work once the IB is approved. |
IB ✅ |
QA Update ❌
ISSUE 1: ISSUE 2: ISSUE 3: ISSUE 4: VideoEnable.confirm.setup.movISSUE 5: |
These should use sentence case as they do now for consistency with other modules. (Figma should be updated here)
The warning icon used is the same we use in a few other places so it is correct for now. We should update Figma and/or open a separate issue to update this in all places for consistency.
This should be fixed 👍 @benbowler I found there is a
This is not specific to the Ads module and is handled in a centralized way across all modules. Okay to be leave as-is.
I believe this is related to the settings not being cleared on deactivation. It should be addressed now via #8449.
I didn't see this in my testing and your videos aren't working for me unfortunately. One other thing I noticed is that the setup loads in an invalid input/warning state which shouldn't happen until someone enters something invalid. I think we also want to revise the helper text but I'll ask @sigal-teller about this. |
Thanks for your responses @aaemnnosttv, the setup flow has been created in collaboration with @sigal-teller and Maria on Slack. Based on your comments I believe there are no additional changes to make. RE this comment:
This label does exist in Figma here for eg., we discussed that it should exist to be consistent with other MUI inputs across the app and for accessibility. |
(Moving to QA as this was meant to be moved there but placed in Code Review by mistake, see Slack thread here: https://10up.slack.com/archives/CBKKQEBR9/p1712068179227499) |
QA Update ❌Thanks all. Did a deeper check on the following:
New Issue
(Note: If it's documented elsewhere, we can move this to approved) ________________________________________________________________________________ |
Thanks @kelvinballoo, I've addressed this issue in a new PR and will put this to code review. |
@kelvinballoo Issue 6 should now be fixed. Also, in Ads setup, the "Complete Setup" button will be disabled until a valid id has been put in. Initially, when the Setup screen is opened, the field will be empty but in normal non error state. But once user interact with it, the validation will kick in. You can test this by putting something in the field and then clearing it up, the field should go into error state and the "Complete setup" button will be disabled. Back to you for another pass. |
QA Update ✅Thanks @kuasha420 @benbowler Retested issue 6 as follows and all are as expected:
Moving this ticket over to 'Approval'. |
Feature Description
As part of the work carried out in the new Ads Module is the need to create a
SetupComponent
that will facilitate initial setup of the Ads module for both new and existing users of Site Kit. This setup module is required in order to connect the module and make available theSettingsView
andSettingsEdit
component(s).This
SetupComponent
should contain the necessary mainSetupMain
container component as well as theSetupForm
component and applicable form with fields. At present, the only field required is theAds Conversion ID
field, as it appears in theSettingsView
andSettings Edit
components, see #8251See the applicable design doc here:
https://docs.google.com/document/d/1APuSv95bf62uhzlaFlW6jPrzPKy1avpRYd9W1MSAAJo/edit?resourcekey=0-UuynlcUz9CoubgldR6Z5sg#heading=h.lzbos67ly9f6
See the applicable setup view Figma design here:
https://www.figma.com/file/THG1FJw5SaUxmiq38Mkf1x/Ads?type=design&node-id=121-1080&mode=design&t=sbmhawdoXe4KNC0S-0
See the applicable post-setup Figma design here:
https://www.figma.com/file/THG1FJw5SaUxmiq38Mkf1x/Ads?type=design&node-id=60-788&mode=design&t=sbmhawdoXe4KNC0S-0
Do not alter or remove anything below. The following sections will be managed by moderators only.
Acceptance criteria
SetupComponent
object during module registrationSetupMain
component should be created to reference above, see the existing GA4 component atassets/js/modules/analytics-4/components/setup/SetupMain.js
for an idea of how this is configured. Note that the Ads Module component would be far simpler in nature, however.SetupForm
component to render within theSetupMain
component above (see Figma design)form
component with CTA to render and save a singleAds Conversion ID
field.Ads
ModuleSettingsView
andSettingsEdit
Components #8251 for an exampleAds
ModuleSettingsView
andSettingsEdit
Components #8251, the input component therein should be reusedImplementation Brief
Set
requiresSetup: true
inassets/js/modules/ads/datastore/base.js
.Create a new component
assets/js/modules/ads/components/setup/SetupMain.js
:SetupForm
component with icon and header as in the Figma designs.As in Add the Ads module settings screens #8344, migrate the
assets/js/modules/ads/components/common/AdsConversionIDTextField.js
component from analytics-4 and move theisValidAdsConversionID
validation into a new file:assets/js/modules/ads/utils/validation.js
Create a new component
assets/js/modules/ads/components/setup/SetupForm.js
:AdsConversionIDTextField
component wrapped in adiv.googlesitekit-setup-module__inputs
.assets/js/modules/analytics/components/setup/SetupForm.js
to save changes before calling thefinishSetup
prop function.Import and pass the new
SetupMain
component to theSetupComponent
key in the module registration inassets/js/modules/ads/index.js
.Show the new style connection banner when the connection is complete.
Test Coverage
isValidAdsConversionID
validation function into a new test file:assets/js/modules/ads/utils/validation.test.js
.SetupForm
component.QA Brief
adsModule
feature flag.Changelog entry
The text was updated successfully, but these errors were encountered: