Advertising A4A: Add touchpoint to sites dashboard

[jeyip]

Related to https://github.com/Automattic/martech/issues/3002

Proposed Changes

• Add a dismissable a4a banner to the sites dashboard if a user has 5 or more sites

Why are these changes being made?

As part of the release of the Automattic for Agencies initiative ( A4A ), the A4A team is implementing the ability for users to purchase plans in bulk for a discount pfunGA-1a8-p2. A4A, however, is a relatively new platform, meaning that folks will be otherwise unaware of its existence, let alone the bulk plans purchasing feature A4A offers.

Because of this, we’d like to promote the bulk purchasing feature and drive traffic to the site through different logged-out and logged-in touchpoints on WordPress.com.

Testing Instructions

• Check out branch
• Navigate to /sites as a user with 5 or more sites
• Verify that the banner is rendered
• Verify that the banner can be dismissed permanently

Pre-merge Checklist

• Has the general commit checklist been followed? (PCYsg-hS-p2)
• Have you written new tests for your changes?
• Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
• Have you checked for TypeScript, React or other console errors?
• Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
• Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
• For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-110124

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-110124&env=jetpack

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-110124&env=a8c-for-agencies

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

App Entrypoints (~51 bytes removed 📉 [gzipped])

name                   parsed_size           gzip_size
entry-stepper               +128 B  (+0.0%)      -51 B  (-0.0%)
entry-main                  +128 B  (+0.0%)      -51 B  (-0.0%)
entry-subscriptions         +127 B  (+0.0%)       -7 B  (-0.0%)
entry-login                 +127 B  (+0.0%)       -7 B  (-0.0%)
entry-domains-landing       +127 B  (+0.0%)       -7 B  (-0.0%)
entry-browsehappy           +127 B  (+0.1%)       -7 B  (-0.0%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Sections (~4533 bytes removed 📉 [gzipped])

name                parsed_size           gzip_size
sites-dashboard        +30891 B  (+3.3%)   +10657 B  (+3.7%)
github-deployments     +30175 B  (+2.8%)   +10722 B  (+3.3%)
site-monitoring        +30104 B  (+2.8%)   +10217 B  (+3.0%)
site-logs              +30104 B  (+2.8%)   +10217 B  (+3.0%)
dev-tools              +30082 B  (+3.1%)   +10321 B  (+3.4%)
staging-site             +703 B  (+0.1%)     +488 B  (+0.1%)
hosting                  +703 B  (+0.1%)     +488 B  (+0.1%)
themes                    +30 B  (+0.0%)     +126 B  (+0.0%)
theme                     +30 B  (+0.0%)     +186 B  (+0.1%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[jeyip]

Hi @taipeicoder. We talked about adding a banner to this dashboard a little while ago p1715217336449049/1715217104.318879-slack-C06DN6QQVAQ, and you had mentioned a potentially broken layout if we did so. From what I can tell things look good, but lemme know if there are any issues :D

Dave Martin had also mentioned a command + k promo at the top of the screen, but I'm having a bit of a hard time finding it in the sites-dashboard-v2 codebase. Wondering if you'd mind pointing me in the right direction 🙏

[lucasmendes-design]

LGTM!

Dave Martin had also mentioned a command + k promo at the top of the screen, but I'm having a bit of a hard time finding it in the sites-dashboard-v2 codebase. Wondering if you'd mind pointing me in the right direction 🙏

We need to make sure that we don't place two notices at the same time.

[jeyip]

LGTM!

Thanks @lucasmendes-design!

We need to make sure that we don't place two notices at the same time.

It sounds like it may have been removed, but I'll spend a bit more time searching for it just in case p1716323212763989/1715217104.318879-slack-C06DN6QQVAQ

[aneeshd16]

I tested this with the calypso.live link, the banner is not aligned with the sites table:

Also, dismissing the banner is not permanent, it comes back after a page reload:

Kapture.2024-05-28.at.15.01.32.mp4

I think this must be because the dismissTemporary prop is passed to the <Banner /> component.

[lucasmendes-design]

I tested this with the calypso.live link, the banner is not aligned with the sites table:

The problem here is that we have the maximum width of the table. I believe this is the problem. Ccing @davemart-in for thoughts. I'm not sure who developed this so we can have the same width for both.

[davemart-in]

@lucasmendes-design this is related to this message I shared in Slack this morning: p1716888347135899/1716814114.968029-slack-C06DN6QQVAQ Once we have consensus on that (one way or the other) we can move this forward.

[jeyip]

For folks following along in this PR, I went ahead and aligned the banner with the max-width of the table for now. It's something that's easily changed if we end up removing the max-width boundary 🙂

[davemart-in]

Update: We are keeping the max-width on the tables.

For folks following along in this PR, I went ahead and aligned the banner with the max-width of the table for now. It's something that's easily changed if we end up removing the max-width boundary 🙂

@jeyip awesome. Thanks!

[matticbot]

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

• notifications
• wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug add/a4a-touchpoint-to-sites-dashboard on your sandbox.