-
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
Implement RRM setup CTA widget #8846
Comments
Thank you for the IB, @ankitrox . Please take a look at my comments below:
I don't see an instruction on where to use this local state. Also, I don't think this local state is necessary for this setup CTA widget.
Since this component isn't technically a Site Kit widget that is rendered in a widget area, I'd suggest adding the point that this component should be exported with the
Mentioning the reusable class names is crucial here, e.g.
The button component should call the
The
Since there is no
There is only one dismissal scenario, as far as I can see. Just basic test coverage for this component should be sufficient. I've added an additional AC regarding rendering the setup CTA widget. Please add instructions to render the component in the main dashboard, and only when the feature flag is on. Please let me know if you have any questions, thank you! |
Thank you @nfmohit for reviewing the IB. I have made the changes as per suggestions. Assigning back to you for re-review. Thanks |
Thank you for updating the IB, @ankitrox ! I'd suggest adding the reference to We also don't need to specify the specific CSS styles in different breakpoints. Simply mentioning that the layout should follow the Figma designs should be sufficient. The IB doesn't need to be such verbose. Please let me know what you think, thank you! |
Thank you @nfmohit. I have updated IB. Moved the component reference to the first point and removed unnecessary styling instructions as those can be referred from the |
Much better now, thank you @ankitrox ! IB LGTM 👍 ✅ |
Note: Added a point in the AC and IB to not display the banner for a view-only user. |
Hi @ankitrox, as discussed on a call, I'm moving this issue back to execution to move the |
Apologies, it should be https://readerrevenue.withgoogle.com/. |
QA Update
|
This is expected behaviour and it is same for all other CTA widget components. I believe, the banner was not dismissed previously in this case.
Banner should only appear if ALL of the following conditions are met.
Please let me know if you have any other queries. Thanks |
QA Update ✅Thanks for the clarifications @ankitrox . Noted that it's as expected for item 1 and understood item 2 as well. This has been verified good as follows. Moving ticket to approval.
|
Feature Description
A setup CTA widget should be added to the Site Kit main dashboard with an intention to raise awareness regarding Reader Revenue Manager. This widget will include a CTA to initiate the Reader Revenue Manager module setup and a dismissal to dismiss it persistently. This should only be shown if the site is on HTTPS.
Screenshot for reference
Do not alter or remove anything below. The following sections will be managed by moderators only.
Acceptance criteria
rrmModule
feature flag is enabled, it is not a view-only user, and the Reader Revenue Manager module is not active.Implementation Brief
Create a new component in
assets/js/module/reader-revenue-manager/components/SetupCTABanner.js
. This component should be exported with thewithWidgetComponentProps
utility that let's this component use theWidget
andWidgetNull
props. Referassets/js/components/notifications/AdsModuleSetupCTAWidget.js
as this component is pretty much similar.Button
component for the primary CTA withhref
attribute. We can make use ofuseActivateModuleCallback
hook for the CTA by passing slug to it.tertiary
Button for the secondary CTA.dismissItem
fromCORE_USER
should be called and it should be dismissed permanently i.e.expiresInSeconds
should be zero.null
from component. That means, do not render it.Styles and Responsiveness
assets/sass/reader-revenue-manager/components/_googlesitekit-rrm-setup-cta.scss
and use consistent class names for each styled Cell. Referassets/js/components/notifications/AdsModuleSetupCTAWidget.js
for all the necessary class names that have been used. This banner is similar in styling.Ensure that the UI adheres to the figma designs for desktop, mobile and tablet devices.
Storybook
assets/js/reader-revenue-manager/components/SetupCTABanner.stories.js
using the base story boilerplate loading the newSetupCTABanner
component in it's default.Displaying CTA Widget
assets/js/components/DashboardMainApp.js
, check if feature is enabled (useFeature
hook), if RRM module is not active (isModuleActive
selector), and it is not a view-only user, then display the CTA widget.Test Coverage
QA Brief
Deactivate the module. Make sure that feature is enabled.
Go to
Site Kit > Dashboard
, banner must be visible.Ensure that design matches with the Figma design.
Clicking on
Set up Reader Revenue Manager
should activate the module and redirect to setup module screen.Clicking on
Maybe later
should dismiss the banner permanently.Ensure that banner renders properly on tablet view and mobile view
Also ensure that banner and graphic does not break when transitioning from tablet to desktop size.
Ensure the banner is visible only on HTTPS-enabled sites.
Changelog entry
The text was updated successfully, but these errors were encountered: