Woocommerce-services: Payments and Packages settings - migrate the changes from Calypso to plugin

[marcinbot]

Make the UI look similar to this:

The main change is just the paper size dropdown, but there are also some UI changes.

The idea is to try and keep those in sync between WCS and Calypso UI or ideally to reuse the components from one library in another.

CC @DanReyLop @jeffstieler @olaolusoga

Let me know if this conflicts with the NUX work

[DanReyLop]

I have some concrete details to point out (differences between the Calypso designs and our current plugin):

In the Packages section, what happened with the USPS predefined packages? I guess it was just an oversight when doing the Calypso design.

The ADD ANOTHER CREDIT CARD button, what should it do (in both cases)? Should it just open wordpress.com/me/billing in a new tab? In the same tab? Should it open a form in a modal to add a credit card right there?

[marcinbot]

Thanks, that's some good questions that I just assumed the simplest answers to, but it's still worth asking them.

I have some concrete details to point out (differences between the Calypso designs and our current plugin):

In the Packages section, what happened with the USPS predefined packages? I guess it was just an oversight when doing the Calypso design.

It shouldn't be a big UI change to just add another table below the custom boxes. But we might need some designer input.

The ADD ANOTHER CREDIT CARD button, what should it do (in both cases)? Should it just open wordpress.com/me/billing in a new tab? In the same tab? Should it open a form in a modal to add a credit card right there?

I assumed it would open the .com billing page in a new tab.

☝️ CC @kellychoffman @jameskoster

[jeffstieler]

The ADD ANOTHER CREDIT CARD button, what should it do (in both cases)? Should it just open wordpress.com/me/billing in a new tab? In the same tab? Should it open a form in a modal to add a credit card right there?

I assumed it would open the .com billing page in a new tab.

Given that this was designed inside of Calypso, my assumption is that it's meant to open a modal (or similar) with a credit card form.

That might be a point where we have to deviate inside of our plugin, but let's let the designers weigh in first.

EDIT: A point where we deviate, or even make the decision that we don't try to reuse the component.

[kellychoffman]

Given that this was designed inside of Calypso, my assumption is that it's meant to open a modal (or similar) with a credit card form.

This is correct. Thanks for asking, I'll design up the modal.

[olaolusoga]

Let me know if this conflicts with the NUX work

Doesn't conflict.

The idea is to try and keep those in sync between WCS and Calypso UI or ideally to reuse the components from one library in another.

Great idea.

Though we will be using the same UI library, there will be points were we deviate with interaction + taxonomy due to the landscape being slightly different, but should keep the nomenclature + aesthetics uniform.

Once the Q2 NUX goal is in a good place, will circle back to handle WCS details

[kellychoffman]

This is correct. Thanks for asking, I'll design up the modal.

Circling back to this. We should add a modal that uses the same exact info that is on the wordpress.com/me/purchases/add-credit-card page:

The only thing I would add to the above is a title 'Add credit card'.

[jeffstieler]

Circling back to this.

@kellychoffman should this be on the wp-calypso repo? I don't think we can (or want to) send CC details over an API to WP.com..

[kellychoffman]

🤦‍♀️

I forgot what repo I was in again. Ignore https://github.com/Automattic/woocommerce-services/issues/1014#issuecomment-307267560.

Instead, we should just add 'external' icon to the Add another credit card button and take the user to wordpress.com/me/purchases/add-credit-card page in a new tab.

[v18]

Being worked in #1216

[jeffstieler]

I assume this can be closed, right @marcinbot ?

[marcinbot]

Yes