Proposed Changes
Users in the treatment cohort of the calypso_hosting_configuration_upsell_list_features experiment see an updated upsell nudge on the /hosting-config page.
- Uses
<Experiment> component to switch between the two banner variations (read more pbxNRc-2f8-p2)
- Displays spinner if experiment cohort is still being loaded/assigned
- Custom icon for each feature we’re listing: pdKhl6-1th-p2#comment-1839
- Columns resize and wrap as the screen width changes
- CTA links to the checkout, just like the previous nudge
- Banner uses the same tracks events so that the experiment tools can make the comparison
Implementation Discussion
The <UpsellBanner> and <Banner> components feel like god-classes. They have a lot of properties to toggle between all their different modes. Ideally these components would be more composable rather than have lots of modes e.g rather than exposing a primaryButton prop it would allow users to provide their own button.
Rather than adding yet more flags to the shared components I’ve been able to achieve most of the re-styling in CSS. However the CSS selectors need to be very specific (especially overloading specific media queries) which is not ideal. I suppose it’s arguable which is better for long-term maintainability: god-components vs. fragile CSS overrides. I’d be interested in your thoughts.
Out of scope for this PR
This PR doesn’t:
- represent the final copy. We’ll have time to adjust that.
- include the price as scene in the figma design. I’ll do that in a follow up PR.
Testing Instructions
- Go to experiment page 20995-explat-experiment
- Add the
treatment bookmarklet to your bookmark bar
- Click bookmarklet and add your user to the
treatment cohort (tutorial video p1673249013170409/1673241333.083479-slack-C04H4NY6STW)
calypso.localhost:3000/hosting-config in a site with no business plan- You should see the new nudge
- Test being in the other cohort too to confirm nothing has changed.
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-ajp-p2)?
Related to #71598
Unfortunately, no screenshots were provided by the developer.
