Storage Add-Ons: Track spotlight plan card add-on upgrade CTA

[jeyip]

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

Proposed Changes

• Records tracks event for storage add-on upgrade button click in the spotlight plan card

Testing Instructions

• Check out this PR or use Calypso Live
• Visit a site on a business or WooCommerce plan. Alternatively, create new site and upgrade to the business or WooCommerce plan /start/plans
• Choose a storage add-on dropdown in the spotlight plan card. Click on the "Upgrade" button. Ensure that a tracks event is dispatched using either the tracks vigilante chrome dev tool or or searching for .gif storage in the dev tools network tab calypso_signup_storage_add_on_upgrade_click

Pre-merge Checklist

• Has the general commit checklist been followed? (PCYsg-hS-p2)
• https://wpcalypso.wordpress.com/devdocs/docs/testing/index.md 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-ajp-p2)?

[github-actions]

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

[matticbot]

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

Sections (~32 bytes added 📈 [gzipped])

name                  parsed_size           gzip_size
update-design-flow          +99 B  (+0.0%)      +32 B  (+0.0%)
plugins                     +99 B  (+0.0%)      +32 B  (+0.0%)
plans                       +99 B  (+0.0%)      +32 B  (+0.0%)
link-in-bio-tld-flow        +99 B  (+0.0%)      +32 B  (+0.0%)
jetpack-app                 +99 B  (+0.0%)      +32 B  (+0.0%)

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

Async-loaded Components (~32 bytes added 📈 [gzipped])

name                                             parsed_size           gzip_size
async-load-signup-steps-plans-theme-preselected        +99 B  (+0.0%)      +32 B  (+0.0%)
async-load-signup-steps-plans                          +99 B  (+0.0%)      +32 B  (+0.0%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

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]

@chriskmnds I see that you're trying to refactor calls to tracks events to use recordTracksEvent in client/my-sites/plans-grid/components/actions.tsx here

I wanted to check in and see how you feel about this PR -- it adds a new recordTracksEvent to the same file.

I know, however, that we ultimately wanted to extract recordTracksEvent calls in the actions file ( context ). If we prefer, I could started working on #79006 instead and add this new tracks events after we land on an implementation

[chriskmnds]

Thanks for the ping @jeyip :-) This tests out partially for me on the live image.

I notice a slightly odd behavior with the CTA. Choosing 50GB on Business shows the "Upgrade" button, but I think that's incorrect? Clicking on it doesn't lead to any redirect and still records the same calypso_signup_storage_add_on_upgrade_click event. I'm guessing that's not intended. Not sure if you see the same:

Screen.Recording.2023-11-07.at.2.24.38.PM.mov

Concerning:

I know, however, that we ultimately wanted to extract recordTracksEvent calls in the actions file ( #79006 ). If we prefer, I could started working on #79006 instead and add this new tracks events after we land on an implementation

I don't really see much benefit from doing the layer of abstraction mentioned in the linked issue. I think just passing along recordTracksEvent to the grid would be enough to keep things simple. So continuing to use it like you have here sounds good to me - we will just grab it from helpers in context instead of importing.

[jeyip]

I notice a slightly odd behavior with the CTA. Choosing 50GB on Business shows the "Upgrade" button, but I think that's incorrect? Clicking on it doesn't lead to any redirect and still records the same

Definitely incorrect -- I haven't seen that issue yet, so I'll try and replicate it 🤔

[southp]

I think this is blocked by some of #85773, so I'm moving this to Blocked for now.