Store Orders: Add order status checks to editable sections (#19707)

* Store Orders: Prevent editing of products/fees on orders that have already been paid for * Add ProtectFormGuard to prevent users leaving while edits are pending * Only allow editing of addresses before the order is “finished” (shipped, or there was a problem/refund)
Automattic · Nov 15, 2017 · 42cf868 · 42cf868
1 parent 54f7fc5
commit 42cf868
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 5 deletions.
diff --git a/client/extensions/woocommerce/app/order/index.js b/client/extensions/woocommerce/app/order/index.js
@@ -16,7 +16,7 @@ import ActionHeader from 'woocommerce/components/action-header';
 import Button from 'components/button';
 import { clearOrderEdits, editOrder } from 'woocommerce/state/ui/orders/actions';
 import { fetchNotes } from 'woocommerce/state/sites/orders/notes/actions';
-import { fetchOrder } from 'woocommerce/state/sites/orders/actions';
+import { fetchOrder, updateOrder } from 'woocommerce/state/sites/orders/actions';
 import { getSelectedSiteWithFallback } from 'woocommerce/state/sites/selectors';
 import { getLink } from 'woocommerce/lib/nav-utils';
 import {
@@ -30,7 +30,7 @@ import Main from 'components/main';
 import OrderCustomer from './order-customer';
 import OrderDetails from './order-details';
 import OrderActivityLog from './order-activity-log';
-import { updateOrder } from 'woocommerce/state/sites/orders/actions';
+import { ProtectFormGuard } from 'lib/protect-form';
 
 class Order extends Component {
 	componentDidMount() {
@@ -136,6 +136,7 @@ class Order extends Component {
 
 				<div className="order__container">
 					<LabelsSetupNotice />
+					{ isEditing && <ProtectFormGuard isChanged={ hasOrderEdits } /> }
 					<OrderDetails orderId={ orderId } />
 					<OrderActivityLog orderId={ orderId } siteId={ site.ID } />
 					<OrderCustomer orderId={ orderId } />

diff --git a/client/extensions/woocommerce/app/order/order-customer/index.js b/client/extensions/woocommerce/app/order/order-customer/index.js
@@ -17,6 +17,7 @@ import Card from 'components/card';
 import CustomerAddressDialog from './dialog';
 import { editOrder } from 'woocommerce/state/ui/orders/actions';
 import { isCurrentlyEditingOrder, getOrderWithEdits } from 'woocommerce/state/ui/orders/selectors';
+import { isOrderFinished } from 'woocommerce/lib/order-status';
 import getAddressViewFormat from 'woocommerce/lib/get-address-view-format';
 import { getOrder } from 'woocommerce/state/sites/orders/selectors';
 import { getSelectedSiteId } from 'state/ui/selectors';
@@ -85,6 +86,7 @@ class OrderCustomerInfo extends Component {
 		}
 
 		const { billing, shipping } = order;
+		const isEditable = isEditing && ! isOrderFinished( order.status );
 
 		return (
 			<div className="order-customer">
@@ -94,7 +96,7 @@ class OrderCustomerInfo extends Component {
 						<div className="order-customer__billing">
 							<h3 className="order-customer__billing-details">
 								{ translate( 'Billing Details' ) }
-								{ isEditing ? (
+								{ isEditable ? (
 									<Button
 										compact
 										className="order-customer__edit-link"
@@ -121,7 +123,7 @@ class OrderCustomerInfo extends Component {
 						<div className="order-customer__shipping">
 							<h3 className="order-customer__shipping-details">
 								{ translate( 'Shipping Details' ) }
-								{ isEditing ? (
+								{ isEditable ? (
 									<Button
 										compact
 										className="order-customer__edit-link"

diff --git a/client/extensions/woocommerce/app/order/order-details/index.js b/client/extensions/woocommerce/app/order/order-details/index.js
@@ -14,6 +14,7 @@ import { localize } from 'i18n-calypso';
 import Card from 'components/card';
 import { editOrder } from 'woocommerce/state/ui/orders/actions';
 import { isCurrentlyEditingOrder, getOrderWithEdits } from 'woocommerce/state/ui/orders/selectors';
+import { isOrderEditable } from 'woocommerce/lib/order-status';
 import { getSelectedSiteWithFallback } from 'woocommerce/state/sites/selectors';
 import { getOrder } from 'woocommerce/state/sites/orders/selectors';
 import OrderCreated from '../order-created';
@@ -64,7 +65,12 @@ class OrderDetails extends Component {
 		const { isEditing, order, site } = this.props;
 		if ( isEditing ) {
 			return (
-				<OrderDetailsTable order={ order } site={ site } isEditing onChange={ this.updateOrder } />
+				<OrderDetailsTable
+					order={ order }
+					site={ site }
+					isEditing={ isOrderEditable( order.status ) }
+					onChange={ this.updateOrder }
+				/>
 			);
 		}