Purchases: Implement payments mockup and new features

[ryelle]

This issue is a checklist for the next iteration of Purchases, focused on Jetpack plans. See p6TEKc-17s-p2

Related: #205, #10494

Design for a Jetpack plan:

• Implement new styles on existing components
  • [x] List view #12826
  • [x] Add a notice to disconnected sites #12923, #13354
  • [x] Add icon to theme purchases #13877
  • [x] Single purchase view #13533
  • [x] Break out header #13003
  • [x] Break out notices #13009
  • [x] Break out PurchaseMeta #13093
• ~Add ability to change subscription owner~ Out of scope for now
• ~Add ability to change billing cycle~ Out of scope for now
• [x] Add keys to purchase page: #12247
  • [x] Fix banner issue by adding a new selector #12377
  • [x] Make sure there are placeholders for new components #13951
  • [x] Open feature flag to all envs

@johnHackworth @rickybanister This issue is basically my todo list, but we can also discuss functionality here, and cross-list any other relevant issues/PRs.

[rickybanister]

This is great @ryelle.

A few pre-mortem notes from my end—we will be updating the look of this screen for both .com and jetpack sites. And we should see if it's possible to reuse the 'plan header' from the plans page or create a better shared component there if possible.

I also used the idea of the 'author selector' here, but put it inside of a dropdown to make it more visibly a form element (the read-only display of the owner uses the same thing, but is not editable). So let's see if we can modify the existing component there as well.

[ryelle]

we will be updating the look of this screen for both .com and jetpack sites

Yeah, it was just easier to only screenshot the jetpack view, but I should have made that more clear in the (very sparse) intro :)

So let's see if we can modify the existing component there as well.

I'm not sure what you mean here. My interpretation of your mockup was that the main card will get a 4th cell with Owner, which is read-only, and the details card then has the dropdown for site owner, which is editable.

Since we're on this subject, what is the owner dropdown? That's not users on the .org site, I'm assuming it's wp.com users who are also connected to the site? If no one else has connected the site, should it not display?

[rickybanister]

I'm not sure what you mean here.

I think we can use the authorSelector component for both the 'read-only' view and the dropdown with some modifications to it:

https://wpcalypso.wordpress.com/devdocs/blocks/author-selector

The owner dropdown would display if a site has more than one connected user. If there is no one else to transfer ownership to we can just remove that field from the form card entirely. Good catch.

[ryelle]

@rickybanister On the purchases list page, you have the plan icon next to each purchase item — what should be there when the purchase item isn't a plan, like domain mapping?

[rickybanister]

The only other purchases are related to domains, correct?

We could either do a new image for domains, or we can use the domains gridicon and do something like this:

[rickybanister]

We can also just 'out-dent' the domain upgrade and avoid an icon in the meantime.

I know this is still very in-progress, but I think we can go with standard font-weight for the plan name.

[davewhitley]

Looking good! I missed this originally. Love a lot of the improvements.

• The plan icon looks a tad too big in the list view.
• Perhaps move the edit payment and cancel sub cards up right below the first card. Those seem important and a primary reason why someone would use this UI. It would also make more sense to attach it to the plan card instead of the details card. Just a suggestion.

I am getting the legacy a la carte purchases on this screen, which should be out dented or have an icon. (custom design, no ads)

The domain icon seems like a good fit for domain mapping and domain purchases.

[rickybanister]

Thanks for the feedback @drw158!

I did try the plan icon being a reduced size in the list view. I think that probably makes sense.

The large icon size is 56px x 56px and for the list view we could try 24px (that's what the plan icons shrink to in the plans page when there isn't enough horizontal room).

If we shrink to that size we could use the domain icon at 18px inside a 24px $blue-medium circle

And I agree, let's outdent the legacy products.

[ryelle]

@rickybanister I've started a PR for the list view in #12826, can you post there if the icon size should change? it's also probably good to generally review, the only thing missing is the site icon in the header.

[rickybanister]

Will do @ryelle

@drw158— regarding this comment that I missed with my previous reply:

Perhaps move the edit payment and cancel sub cards up right below the first card. Those seem important and a primary reason why someone would use this UI. It would also make more sense to attach it to the plan card instead of the details card. Just a suggestion.

I think that makes sense. I probably approached this too Jetpack-centric. Here's the design for a .com site that has more than one admin (and also assuming we implement monthly billing for .com sites, so a lot of assumptions):

I think it likely does make sense to move the payment info and cancellation links above the 'details' card, I would just rather folks edit their plan than cancel of course.

[davewhitley]

Yea, perhaps the Edit and Cancel cards could be separated from the details card, so they look "separate". But, then... yea I feel like Edit payment should be higher up, attached to the top plan card.

[rickybanister]

@drw158 Once we get into building this page I'll give the various layouts a go and let you know what feels right.

[sirreal]

I just noticed that on the "list" there's no icon for themes:

But #13533 does include a theme icon in the "detail" view:

Displaying the theme icon in the list view would be more consistent.

[ryelle]

@sirreal ~you're right - we decided to add the icon here after those had been done already. I'll add the icon to the list in another PR~ totally thought this was the manage detail PR, not the parent issue 🤦‍♀️

[ryelle]

At this point, everything is merged & the only thing left is to open the feature flag on the product keys. @rickybanister @johnHackworth I've created a PR #14044 to remove the flag, I'll let you merge assuming everything looks good :)

[ryelle]

@johnHackworth I'm going to close this issue since it's been wrapped up. The two things that were considered out of scope were:

• Add ability to change billing cycle (which I see has been continued in #6499)
• Add ability to change subscription owner (afaik there isn't a separate issue for this)