Automattic for Agencies: Redesign hosting marketplace page

[yashwin]

Resolves https://github.com/Automattic/jetpack-roadmap/issues/1563

Proposed Changes

This PR redesigns the hosting marketplace page

Testing Instructions

1. Open the A4A live link.
2. Visit the Marketplace > Hosting page and verify the UI is redesigned as shown below and matches with the latest design (link on the ticket). Also, verify it works well on the screen sizes.

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-108226

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

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

[matticbot]

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

Sections (~1478 bytes added 📈 [gzipped])

name                          parsed_size           gzip_size
a8c-for-agencies-marketplace      +3938 B  (+0.7%)    +1431 B  (+0.8%)
settings-performance                +13 B  (+0.0%)      +47 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.

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.

[keoshi]

Looks and works great, except for mobile. It doesn't seem to show the tooltip on tap.

Would it be possible to add that?

Thank you!

[yashwin]

Thanks for the review, @keoshi!

Looks and works great, except for mobile. It doesn't seem to show the tooltip on tap.
Would it be possible to add that?

Yes, I added an onTouchStart event that should handle this.

Screen.Recording.2024-05-17.at.2.51.50.PM.mov

[jkguidaven]

The Migration offer card seems way too close to the hosting cards.

From Design

[jkguidaven]

I also noticed that the border-radius on the new design uses 8px. @keoshi is this correct?

https://www.figma.com/design/sX0uNGAgDUceP3nKu7iQ4z/Purchase-flows?node-id=5694-25942&t=gQmtAgaueRhrl3oA-0

[jkguidaven]

Thanks for working on this. Works great. I left few comments though.

[yashwin]

Thanks for the review, @jkguidaven!

I have addressed your comments: 27fb2ce

[jkguidaven]

Code wise this LGTM. Changes also works great as per test instructions. 👍

[keoshi]

Looks great to me, Yashwin! Have two small comments that are non-blocking, so I'm approving the PR.

Doesn't respond to simple tap

On mobile, it seems like the tooltip is only shown when tap + moving the tap point is involved. In other others, it doesn't seem to respond to a simple tap on the same spot.

I'm testing this in the laptop, simulating a touch device, so it might be that causing the issue. If we can't fix it on mobile, it might be worth to always display the tooltip on touch devices.

Shared benefit should be full-width

According to the latest designs by @jeffgolenski — https://www.figma.com/design/sX0uNGAgDUceP3nKu7iQ4z/Purchase-flows?node-id=8346-138635&t=X10Un6R2s1Trcn6F-11 — the bottom section that groups shared benefits should be full-width.

Also notice the title should be "Included with Standard & Premier hosting".

---

Thanks for all your hard work on this, @yashwin !

[matticbot]

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

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

• wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug update/a4a/hosting-page-redesign on your sandbox.

[yashwin]

Thanks for the review, @keoshi!

Doesn't respond to simple tap

I think this should work on mobile devices. I'll do a round of testing on mobile once this PR is shipped and fix it if needed in another PR.

Shared benefit should be full-width

According to the latest designs by @jeffgolenski — https://www.figma.com/design/sX0uNGAgDUceP3nKu7iQ4z/Purchase-flows?node-id=8346-138635&t=X10Un6R2s1Trcn6F-11 — the bottom section that groups shared benefits should be full-width.

Thanks for linking the latest design.

Also notice the title should be "Included with Standard & Premier hosting".

I have updated it now, including some text changes: 34f430d

[keoshi]

Perrrfect — ship it! 🚢

[simonktnga8c]

Can we pause on shipping this one @yashwin please, sorry if it's a pain.

[simonktnga8c]

Want to get the final go-ahead from leadership before we do.

[simonktnga8c]

Thanks for reverting 👍 seeking clarity from leadership now. I'll let you know as soon as I do.

[yashwin]

@simonktnga8c: Sure, I have shipped the revert PR and created a new one now: #90890