Nav Unification: Notices and Nudges

[marekhrabe]

All nudges and notices are concentrated in the CurrentSite component. This component controls everything that shows above the standard nav links in Calypso sidebar.

✅ Implemented — The Site Switcher link

• ONLY the link itself; the switching logic and UI lives elsewhere
• on click, it calls an internal Calypso function setLayoutFocus( 'sites' ) which controls the "sidebar routing" and makes it show and focus the site list

✅ Implemented simplified version — Site card

• shows the name and icon of the site)
• clicking it will open the "View Site" route — /view/:slug

✅ implemented Domain Credit

• says "Free domain available" via the UpsellNudge component
• eligibility determined from the redux store state/sites/plans

✅ implemented Domain Upsell

• different formulations and recommended tld and price based on different redux state checks
• UpsellNudge component

✅ implemented JITM (Just In Time Messages) for wp-admin

• This is a newer and different way to show notices in Calypso and wp-admin (https://github.com/Automattic/wp-calypso/tree/master/client/blocks/jitm)
• Uses redux state connected to /jetpack/v4/jitm API that returns messages and determines when to show them
• Renders using UpsellNudge
• I haven't checked the wp-admin side of this (likely in Jetpack). If it works, it will be the first and only notice that has an existing wp-admin representation

💡 Needs plan & implmentation — Nudges and Notices of different kinds

Domain Warnings

• 11 different warnings
• List of possible types: https://github.com/Automattic/wp-calypso/blob/master/client/my-sites/current-site/domain-warnings.jsx#L21-L33
• Visual representation and visibility conditions: https://github.com/Automattic/wp-calypso/blob/master/client/my-sites/domains/components/domain-warnings/index.jsx
• Uses redux data store and the wpcom.js lib to fetch info about domains of the current site and uses that data to run conditions that figure out which notices to show.

Stale Cart

• Uses the Flux store (https://github.com/Automattic/wp-calypso/blob/master/client/lib/cart/store/index.js) and shows the notice when there are items in the cart.
• Additional display conditions apply, like showing the notice every 10 minutes when dismissed etc…
• The cart state is synchronized with the API and it also uses the localStorage polling method to sync the state across all opened browser tabs with Calypso
• Doesn't render any notice directly but uses Redux state/notices to add a notice to a list of those to display

Other Notices

• This it a kitchen sink component of many other types of notices, queries a ton of state — user data (currency code, capabilities), current site, its domains, store discounts, checks for site being "wp for teams" or Jetpack, site plan ownership…

Site Redirect Notice

• says that the site is fully redirected to a different URL and displays the target URL
• Notice component

Active Discount Notice

• checks eligibility of site/user for one of https://github.com/Automattic/wp-calypso/blob/master/client/lib/discounts/active-discounts.js
• Shows UpsellNudge with data from the discount definition

Conclusion

This was just a first pass over the existing nudges and it turns out this is a pretty complicated chunk of code which uses different store types (Redux, Flux) and several different API types for feeding the data

It relies on entities like user, site, domain, store, cart, plan and has no central logic that does all the checks. The eligibility logic is scattered across many different components and their methods. Should we want to achieve 1:1 copy in wp-admin, it will require a huge rewrite of the code. Copying the full logic in wp-admin will be an extreme project too.

[getdave]

Thanks for the solid overview Marek.

Other Notices

Are you able to share the location for these components?

[cpapazoglou]

Can we maybe think of iframing this section and injecting it in wp-admin?

[cpapazoglou]

In an attempt to address this I have drafted https://github.com/Automattic/wp-calypso/pull/45780. Let's discuss whether it is feasible or we should go another way.

[marekhrabe]

Other Notices

Are you able to share the location for these components?

@getdave It branches from here. https://github.com/Automattic/wp-calypso/blob/master/client/my-sites/current-site/notice.jsx

I have edited the main post to include more links to code, including this one

[marekhrabe]

A little update on this one — we have implemented a "Switch Site" link into wp-admin (which opens https://wordpress.com/home), as well as a simplified "Site Card" (for now without any error/warning states it can have).

Everything else needs a better plan before proceeding. Some discussions in paYJgx-10T-p2

[obenland]

@marekhrabe What are the next steps on this one (if any)?

[marekhrabe]

For the first release, remaining nudges and notices were put out of scope for the wp-admin implementation

[obenland]

Re-opening now that v1 has shipped and porting notices and nudges might become more relevant again