Create Sign in With Google banner notification to prompt user to enable feature

[tofumatt]

Feature Description

A banner prompting users to enable Sign in with Google should be added to Site Kit. See the Figma design/screenshot below for the banner and its contents.

---

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

Acceptance criteria

• The banner should only appear when the signInWithGoogleModule feature flag is enabled.
• A new notification banner should appear for users that have not connected the Sign in with Google module.
• It should follow the Figma design
• The banner should only appear when:
  • The user can enable Sign in with Google (eg. their website supports HTTPS)
  • They have not permanently dismissed the banner
• The "Set up Sign in with Google" button should direct the user to the Sign in with Google setup flow, the same as connecting the Sign in with Google module from the "Connect more Services" modules page
• The "Maybe later" button should dismiss the notification permanently.

Implementation Brief

• [x] Add assets/js/components/notifications/SignInWithGoogleModuleSetupCTAWidget.js
  • You can check GatheringDataNotification component for an example of using this new Notifications infrastructure
  • Include 2 new props - id and Notification
  • Wrap the component with Notification component passed as the prop
  • Create a new layout - assets/js/components/notifications/NotificationWithSVG.js
  • It should render SVG next to the content on desktop and bellow the CTA's on mobile and tablet, following the Figma designs
  • Extract the layout from BannerNotification,you can re-using the logic around WinImageSVG
  • You can check assets/js/googlesitekit/notifications/components/layout/NotificationWithSmallSVG.js for example. It should contain only the needed layout including the passed SVG, title, description and actions
  • Set up Sign in with Google CTA callback should redirect to the module setup page
  • Use useActivateModuleCallback( 'sign-in-with-google' ) as the callback
  • Maybe later CTA should dismiss notification, ActionsCTALinkDismiss component should be used for both CTA's, and for dismiss it is enough to provide dismissLabel prop. dismissExpires is 0 by default, which is correct value for this case, where we are dismissing it permanently.
• [x] Update assets/js/googlesitekit/notifications/register-defaults.js
  • Register the notification, following the existing patterns already added
  • For checkRequirements:
  • If signInWithGoogleModule feature flag is not enabled return early
  • Check if site is using HTTPS, using isURLUsingHTTPS helper function, and pass it a home URL, obtained from getHomeURL selector from CORE_SITE datastore
  • Check if sign-in-with-google module is connected using isModuleConnected from CORE_MODULES datastore, and return early if it is not connected
  • For priority, bump it by 10 from the last added banner notification (not including error ones, which start from 150, the regular ones start from 300).
  • Use NOTIFICATION_AREAS.BANNERS_BELOW_NAV for areaSlug
  • Include isDismissible property with true for value

Test Coverage

• Add stories file and VRT for the banner

QA Brief

• Enable the feature flag for SiWG and test this feature on websites that are secure, i.e. HTTPS only. Also ensure that SiWG is not connected or setup in the Site Kit Settings tab. Ensure the Gathering data or Zero Data or any other Error Notification banners are dismissed.
• Now go to the dashboard and the Setup CTA Banner will appear. This does take a couple of seconds to load currently and is expected. The load time will be improved further in #9488 and #9568.
• Test the ACs along with other generic notification behaviour such as the GA events for confirm_notification, dismiss_notification, view_notification and click_learn_more_link.
• The notification should not reappear if the module is already set up and connected, or if the notification was dismissed or if the site does not use HTTPS.

Changelog entry

• Add new feature notification for Sign in with Google module.

[eugene-manuilov]

For checkRequirements:

• If signInWithGoogleModule feature flag is not enabled return early
• Check if site is using HTTPS, using isURLUsingHTTPS helper function, and pass it a home URL, obtained from getHomeURL selector from CORE_SITE datastore

@zutigrm, the following requirement is missing:

A new notification banner should appear for users that have not connected the Sign in with Google module.

[zutigrm]

@eugene-manuilov ah indeed! Thanks, IB updated

[eugene-manuilov]

• Check if clientID setting from Sign in with google module is empty, to return early

@zutigrm, we should use isModuleConnected to check whether or not the module is connected.

[zutigrm]

@eugene-manuilov Updated

[eugene-manuilov]

Thanks, IB ✔

[kelvinballoo]

QA Update ⚠

Hi @jimmymadon , I've set up a site but the banner isn't showing at all. Video is attached for reference.

• Feature flag is on, develop branch is on, the module SiWG is disconnected, site is HTTPS
• Am I missing anything else?

https://github.com/user-attachments/assets/bff972e0-b214-4fe3-bf8b-e8805b6a775b

[jimmymadon]

@kelvinballoo I should've just seen the video first! You've got the Zero Data Notification banner showing! So in this case, if you dismiss or action that banner, the Sign in with Google banner should then appear. This behaviour will change after #9568 is merged though as the Notification Banners and Setup CTA banners will have their own "queue"!

[kelvinballoo]

QA update ⚠

Thanks @jimmymadon . The banner showed up after dismissing it the Zero data banner. I had a first round of testing and I have some observations/queries below:

ITEM 1: The 'Set up Sign in with Google' button text should have been 'Google Sans Display' based on Figma. Currently, it's 'Google Sans Text'. If this is standardise with other CTAs of the plugin, that's fine and this can be ignored.

Figma:  Actual: 

---

ITEM 2: When viewed on mobile, the image layout is smaller than what is on Figma on the same breakpoint width. The 'Maybe later' button is also sitting below the 'Set up Sign in with Google' button currently. On Figma, it's next to each other. Photos attached for reference.

Figma:  Actual: 

---

ITEM 3: Similar observation on tablet. The graphic is smaller compared to figma on the same breakpoint width. Photos attached for reference.

Figma:  Actual: 

---

ITEM 4: On desktop Safari, the graphic is not showing up at all. Tested on Safari Version 17.6 (19618.3.11.11.5), MacOS Sonoma 14.6.1 It appears for Edge, Firefox and Chrome.

 Also tested on Browserstack: 

---

ITEM 5: This is a query around the AC:

The notification should not reappear if the module is already set up and connected, or if the notification was dismissed 
 or if the site does not use HTTPS.

• If let's say I have connected the module with incomplete setup and proceeded to disconnect it. I never dismissed the banner. Should the banner re-appear in that case?
• Currently all the sites that I would create on tastewp and instawp would have https. Is there an easy way to test for HTTP website?

  ---