Added logic & UI for creating zones, updating zones and deleting zones. #15722

DanReyLop · 2017-06-30T13:58:17Z

I've followed (i.e. shamelessly copied) @coderkevin code for products. This PR includes:

UI tweaks (mainly in the Header action bar).
Creating a new shipping zone in the server.
Updating a shipping zone on the server.
Deleting a shipping zone from the server.
Success notice on success, error notice on error.
After the zone is deleted, the user is taken back to the Shipping Settings page.

This PR does NOT include:

Saving the shipping methods inside a shipping zone.
Saving the locations inside a shipping zone.
Auto-ordering.

I found a weird behaviour of the action-list. If you don't change anything on the zone, and click the Save button, nothing happens, because an actionList with an empty list of nextSteps is created, and that doesn't trigger the successAction. In my mind, I would expect that the successAction would trigger immediately for those cases. What do you think Kevin?

matticbot · 2017-06-30T13:58:18Z

Test live: https://calypso.live/?branch=add/14268-save-zone-changes

kellychoffman · 2017-06-30T19:14:55Z

Looks great! Just one thing:

If a zone has no locations, can the button say Add locations instead of Edit?

kellychoffman · 2017-06-30T19:22:22Z

Another thing: I add a zone, save it, and then stay on that page. When press the trash icon in the header, nothing happens.

Console errors:

If I leave the page, and go back, it will delete just fine.

DanReyLop · 2017-06-30T19:26:40Z

Console errors:

The console errors are fixed in a Marcin's PR, so just ignore them for now :)
The trash thing is definitely a bug, let me take a look.

…w shipping zone

…ocations in the zone

DanReyLop · 2017-06-30T20:00:15Z

The trash thing is definitely a bug, let me take a look.

Yeah, that was easy (i.e. stupid mistake). Fixed :)

If a zone has no locations, can the button say Add locations instead of Edit?

Done :)

kellychoffman · 2017-06-30T20:18:26Z

Works now!

marcinbot

Looks good. Just one comment and otherwise it's ready to 🚢

marcinbot · 2017-07-03T10:11:29Z

client/extensions/woocommerce/app/settings/shipping/shipping-zone/shipping-zone-header.js


-const ShippingZoneHeader = ( { zone, site, onSave, translate } ) => {
+const ShippingZoneHeader = ( { zone, site, onSave, onDelete, translate, isBusy, canSave, isSaving } ) => {


isBusy is not passed to this component and is only used in one place. Is it still needed?

Nope, I renamed it to isSaving and I messed that up in rebases/merges, good catch!

a8ci18n · 2017-07-03T11:10:36Z

...nt/extensions/woocommerce/app/settings/shipping/shipping-zone/shipping-zone-location-list.js

@@ -106,7 +107,9 @@ const ShippingZoneLocationList = ( { siteId, loaded, translate, locations, actio
 			<ExtendedHeader
 				label={ translate( 'Zone locations' ) }
 				description={ translate( 'Define the places that are included in this zone.' ) } >
-				<Button onClick={ onAddLocation } disabled={ ! loaded } >{ translate( 'Edit locations' ) }</Button>
+				<Button onClick={ onAddLocation } disabled={ ! loaded } >
+					{ isEmpty( locations ) ? translate( 'Add locations' ) : translate( 'Edit locations' ) }


Hi! I've found a possible matching string that has already been translated 46 times:
translate( 'Add Location' ) ES Score: 8

Help me improve these suggestions: react with 👎 if the suggestion doesn't make any sense, or with 👍 if it's a particularly good one (even if not implemented).

* Changed the shipping-zone-locations reducer code structure so it's easier to extend * Added saving the zone's locations when saving a zone * Refactored the actionList code a bit. * Update the state when the locations are finished saving. * Automatically orders all the shipping zones on save. (#15771)

jameskoster · 2017-07-03T19:04:25Z

Everything worked as expected! :)

Couple of points;

When adding a zone, the trash icon shouldn't be in the header bar.

Shipping zone deleted correctly

"Correctly" should probably be "successfully" but tbh, I think "Shipping zone deleted" is adequate.

Seeing it live, I don't think the zone name card is working very well. When creating a zone this shouldn't be the first thing you see, it's distracting/confusing. Instead how about we put the name card beneath locations / methods as a regular input, pre-populated based on the locations they choose. I think it needs a description as well. Something like this:

kellychoffman · 2017-07-03T19:09:01Z

👍 Agree with @jameskoster.

marcinbot · 2017-07-03T19:16:37Z

The zone name should be in a new PR. I opened #15799

kellychoffman · 2017-07-03T19:18:01Z

Thanks, Marcin.

DanReyLop · 2017-07-03T19:35:21Z

When adding a zone, the trash icon shouldn't be in the header bar.

Done.

"Correctly" should probably be "successfully" but tbh, I think "Shipping zone deleted" is adequate.

Done.

Also, a small UX question: What should happen when you haven't modified anything and you click the Save button?

a) Instant success message.
b) The Save button is disabled until there's actually something to be saved.
c) Nothing happens when you press the button.
d) All of the above (?)

kellychoffman · 2017-07-03T19:47:06Z

Also, a small UX question: What should happen when you haven't modified anything and you click the Save button?

a) Instant success message only. We shouldn't ever disable Save buttons. This is inline with the rest of Calypso settings as well. Mainly because: people want the piece of mind that a Save button gives them even if they didn't make any change. I blame Microsoft Word :)

DanReyLop · 2017-07-04T10:54:16Z

@jameskoster I've pushed the changes you suggested.
@kellychoffman I've implemented the "instant placebo success message" when you save a zone without changes.

This is ready for a final review :)

When creating a new shipping zone, the URL is `/store/:site/zone/new`. After the user hits "Save" and the server replies with the created zone, now the URL is updated to `/store/:site/zone/27` (or whatever ID the zone has). This is just a cosmetic change in the URL, without triggering any route-related code or re-rendering the page or anything.

kellychoffman · 2017-07-04T16:42:26Z

👍 Looks good.

kellychoffman · 2017-07-04T16:46:15Z

Can we fix this: #15722 (comment)

DanReyLop · 2017-07-04T16:51:43Z

@kellychoffman I'd already fixed that in 5843047 . Are you still seeing Edit locations in an empty zone?

jameskoster · 2017-07-04T17:18:14Z

Looks good. One minor language nitpick (sorry). When adding a zone could the success message be "Shipping zone added"?

"Shipping zone saved" is fine for other occasions.

DanReyLop · 2017-07-04T18:42:57Z

When adding a zone could the success message be "Shipping zone added"?

Done! :)

Now that Calypso is 💚 , I'm gonna merge this, if there's more stuff to do I'll open separate PRs.

Added logic & UI for creating zones, updating zones and deleting zones.

ed6c0db

DanReyLop added Store [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels Jun 30, 2017

DanReyLop self-assigned this Jun 30, 2017

DanReyLop requested review from marcinbot and coderkevin June 30, 2017 13:58

matticbot added the [Size] XL Probably needs to be broken down into multiple smaller issues label Jun 30, 2017

zone name: copy change

ff4fef1

Daniel Rey Lopez added 2 commits June 30, 2017 20:54

Fixed bug that left the UI in an inconsistent state after saving a ne…

2c93f3f

…w shipping zone

Change "Edit locations" button to "Add locations" when there are no l…

5843047

…ocations in the zone

Automattic deleted a comment from a8ci18n Jun 30, 2017

DanReyLop mentioned this pull request Jul 3, 2017

Added saving the zone's locations when saving a zone #15770

Merged

marcinbot approved these changes Jul 3, 2017

View reviewed changes

Remove unused "isBusy" prop

c1bce40

a8ci18n reviewed Jul 3, 2017

View reviewed changes

DanReyLop mentioned this pull request Jul 3, 2017

Added shipping zone method additions, updates and deletions. #15791

Merged

Added shipping zone method additions, updates and deletions. (#15791)

9b73821

Daniel Rey Lopez added 4 commits July 4, 2017 11:41

Changed wording of the success / failure notices.

12169c4

Don't show the Trash icon when creating a new zone

68d3b6d

Show an instant success notice when there's nothing to save #blameMSWord

0455e95

Fixed the "don't show the trash icon on new zones" logic.

27c4e64

Changed the success message when the zone is created instead of updated.

537fd8b

DanReyLop merged commit 6905109 into master Jul 4, 2017

matticbot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Jul 4, 2017

alisterscott deleted the add/14268-save-zone-changes branch October 24, 2017 04:44

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Added logic & UI for creating zones, updating zones and deleting zones. #15722

Added logic & UI for creating zones, updating zones and deleting zones. #15722

DanReyLop commented Jun 30, 2017 •

edited

Loading

matticbot commented Jun 30, 2017

kellychoffman commented Jun 30, 2017 •

edited

Loading

kellychoffman commented Jun 30, 2017 •

edited

Loading

DanReyLop commented Jun 30, 2017 •

edited

Loading

DanReyLop commented Jun 30, 2017 •

edited

Loading

kellychoffman commented Jun 30, 2017

marcinbot left a comment

marcinbot Jul 3, 2017

DanReyLop Jul 3, 2017

a8ci18n Jul 3, 2017

jameskoster commented Jul 3, 2017 •

edited

Loading

kellychoffman commented Jul 3, 2017

marcinbot commented Jul 3, 2017

kellychoffman commented Jul 3, 2017

DanReyLop commented Jul 3, 2017

kellychoffman commented Jul 3, 2017 •

edited

Loading

DanReyLop commented Jul 4, 2017 •

edited

Loading

kellychoffman commented Jul 4, 2017

kellychoffman commented Jul 4, 2017

DanReyLop commented Jul 4, 2017

jameskoster commented Jul 4, 2017

DanReyLop commented Jul 4, 2017


		const ShippingZoneHeader = ( { zone, site, onSave, translate } ) => {
		const ShippingZoneHeader = ( { zone, site, onSave, onDelete, translate, isBusy, canSave, isSaving } ) => {

Added logic & UI for creating zones, updating zones and deleting zones. #15722

Added logic & UI for creating zones, updating zones and deleting zones. #15722

Conversation

DanReyLop commented Jun 30, 2017 • edited Loading

matticbot commented Jun 30, 2017

kellychoffman commented Jun 30, 2017 • edited Loading

kellychoffman commented Jun 30, 2017 • edited Loading

DanReyLop commented Jun 30, 2017 • edited Loading

DanReyLop commented Jun 30, 2017 • edited Loading

kellychoffman commented Jun 30, 2017

marcinbot left a comment

Choose a reason for hiding this comment

marcinbot Jul 3, 2017

Choose a reason for hiding this comment

DanReyLop Jul 3, 2017

Choose a reason for hiding this comment

a8ci18n Jul 3, 2017

Choose a reason for hiding this comment

jameskoster commented Jul 3, 2017 • edited Loading

kellychoffman commented Jul 3, 2017

marcinbot commented Jul 3, 2017

kellychoffman commented Jul 3, 2017

DanReyLop commented Jul 3, 2017

kellychoffman commented Jul 3, 2017 • edited Loading

DanReyLop commented Jul 4, 2017 • edited Loading

kellychoffman commented Jul 4, 2017

kellychoffman commented Jul 4, 2017

DanReyLop commented Jul 4, 2017

jameskoster commented Jul 4, 2017

DanReyLop commented Jul 4, 2017

DanReyLop commented Jun 30, 2017 •

edited

Loading

kellychoffman commented Jun 30, 2017 •

edited

Loading

kellychoffman commented Jun 30, 2017 •

edited

Loading

DanReyLop commented Jun 30, 2017 •

edited

Loading

DanReyLop commented Jun 30, 2017 •

edited

Loading

jameskoster commented Jul 3, 2017 •

edited

Loading

kellychoffman commented Jul 3, 2017 •

edited

Loading

DanReyLop commented Jul 4, 2017 •

edited

Loading