#29 Add order cancellation confirmation:

 - change assertions

src/app.jsx

@@ -87,7 +87,7 @@ export default function (appElement, selectors) {
 			<MarketPage
 				siteHeader={p.siteHeader}
 				selectedOutcome={p.selectedOutcome}
-				cancelOrder={p.cancelOrder}
+				orderCancellation={p.orderCancellation}
 				market={p.market}
 				numPendingReports={p.marketsTotals.numPendingReports}
 			/>

src/assertions.js

@@ -21,7 +21,7 @@ import transactions from '../test/assertions/transactions';
 import transactionsTotals from '../test/assertions/transactions-totals';
 import url from '../test/assertions/url';
 import selectedUserOpenOrdersGroup from '../test/assertions/selected-user-open-orders-group';
-import cancelOrder from '../test/assertions/cancel-order';
+import orderCancellation from '../test/assertions/order-cancellation';
 
 export default {
 	activePage,
@@ -47,5 +47,5 @@ export default {
 	transactionsTotals,
 	url,
 	selectedUserOpenOrdersGroup,
-	cancelOrder
+	orderCancellation
 };

src/modules/common/less/buttons.less

@@ -1,4 +1,4 @@
-.button, .button:visited, {
+.button, .button:visited {
     display: inline-block;
     height: 2.8em;
     line-height: 2.8em;
@@ -101,7 +101,7 @@
         color: #aaaabb;
         background: transparent;
     }
-    &:hover,  {
+    &:hover {
         color: #ffda00;
         background: transparent;
         text-shadow: 0 0 1px #dddd00;
@@ -192,4 +192,4 @@
         color: white;
         background: @color-dark-normal;
     }
-}
+}

src/modules/market/components/market-open-orders.jsx

@@ -17,7 +17,7 @@ const OpenOrders = (p) => (
 						id={outcome.id}
 						name={outcome.name}
 						userOpenOrders={outcome.userOpenOrders}
-						cancelOrder={p.cancelOrder}
+						orderCancellation={p.orderCancellation}
 					/>
 				))
 			}
@@ -28,7 +28,7 @@ const OpenOrders = (p) => (
 OpenOrders.propTypes = {
 	userOpenOrdersSummary: React.PropTypes.object,
 	outcomes: React.PropTypes.array,
-	cancelOrder: React.PropTypes.func.isRequired
+	orderCancellation: React.PropTypes.object.isRequired
 };
 
 export default OpenOrders;

src/modules/market/components/market-page.jsx

@@ -17,7 +17,7 @@ export default class MarketPage extends Component {
 		selectedOutcome: PropTypes.object,
 		priceTimeSeries: PropTypes.array,
 		numPendingReports: PropTypes.number,
-		cancelOrder: PropTypes.func.isRequired
+		orderCancellation: PropTypes.object.isRequired
 	};
 	constructor(props) {
 		super(props);
@@ -68,7 +68,7 @@ export default class MarketPage extends Component {
 							key="market-open-orders"
 							userOpenOrdersSummary={p.market.userOpenOrdersSummary}
 							outcomes={p.market.outcomes}
-							cancelOrder={p.cancelOrder}
+							orderCancellation={p.orderCancellation}
 						/>
 					);
 				}

src/modules/open-orders/components/open-order.jsx

@@ -8,7 +8,7 @@ import classnames from 'classnames';
 import ValueDenomination from '../../common/components/value-denomination';
 
 const OpenOrder = (p) => (
-	<tr className={classnames('open-order', { 'is-disabled': p.isCancelling || p.isCancelled })}>
+	<tr className={classnames('open-order', { 'is-disabled': [p.cancellationStatuses.CANCELLING, p.cancellationStatuses.CANCELLED].includes(p.status) })}>
 		<td className="outcome-name">
 			{p.outcomeName}
 		</td>
@@ -22,13 +22,9 @@ const OpenOrder = (p) => (
 			<ValueDenomination {...p.avgPrice} />
 		</td>
 		<td className="cancel">
-			<button
-				className="button cancel-order-action"
-				disabled={p.isCancelling || p.isCancelled}
-				title="Cancel order"
-				onClick={(event) => { p.cancelOrder(p.id, p.marketID, p.type); }}
-			>Cancel</button>
-
+			{
+				renderCancelNode(p.id, p.marketID, p.type, p.status, p.cancellationStatuses, p.cancelOrder, p.abortCancelOrderConfirmation, p.showCancelOrderConfirmation)
+			}
 		</td>
 	</tr>
 );
@@ -40,9 +36,52 @@ OpenOrder.propTypes = {
 	type: React.PropTypes.string.isRequired,
 	avgPrice: React.PropTypes.object.isRequired,
 	unmatchedShares: React.PropTypes.object.isRequired,
-	isCancelling: React.PropTypes.bool.isRequired,
-	isCancelled: React.PropTypes.bool.isRequired,
+	cancellationStatuses: React.PropTypes.object.isRequired,
+	status: React.PropTypes.string,
+	abortCancelOrderConfirmation: React.PropTypes.func.isRequired,
+	showCancelOrderConfirmation: React.PropTypes.func.isRequired,
 	cancelOrder: React.PropTypes.func.isRequired
 };
 
+function renderCancelNode(orderID, marketID, type, status, cancellationStatuses, cancelOrder, abortCancelOrderConfirmation, showCancelOrderConfirmation) {
+	switch (status) {
+	case cancellationStatuses.CANCELLATION_CONFIRMATION:
+		return (
+			<span>
+				<button
+					className="button cancel-order-abort-confirmation"
+					title="No, don't cancel order"
+					onClick={(event) => {
+						abortCancelOrderConfirmation(orderID, marketID, type);
+					}}
+				>No</button>
+				<button
+					className="button cancel-order-action"
+					title="Yes, cancel order"
+					onClick={(event) => {
+						cancelOrder(orderID, marketID, type);
+					}}
+				>Yes</button>
+			</span>
+		);
+	case cancellationStatuses.CANCELLING:
+		return 'Cancelling';
+	case cancellationStatuses.CANCELLED:
+		return null;
+	default:
+		return (
+			<button
+				className="button cancel-order-action"
+				title="Cancel order"
+				onClick={(event) => {
+					showCancelOrderConfirmation(orderID, marketID, type);
+				}}
+			>
+				Cancel
+			</button>
+		);
+	}
+
+}
+
 export default OpenOrder;

src/modules/open-orders/components/open-orders-group.jsx

@@ -26,7 +26,11 @@ const OpenOrdersGroup = (p) => {
 						key={openOrder.id}
 						outcomeName={p.name}
 						{...openOrder}
-						cancelOrder={p.cancelOrder}
+						status={p.orderCancellation[openOrder.id]}
+						cancellationStatuses={p.orderCancellation.cancellationStatuses}
+						cancelOrder={p.orderCancellation.cancelOrder}
+						abortCancelOrderConfirmation={p.orderCancellation.abortCancelOrderConfirmation}
+						showCancelOrderConfirmation={p.orderCancellation.showCancelOrderConfirmation}
 					/>
 				))}
 			</tbody>
@@ -37,7 +41,7 @@ const OpenOrdersGroup = (p) => {
 OpenOrdersGroup.propTypes = {
 	userOpenOrders: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
 	name: React.PropTypes.string.isRequired,
-	cancelOrder: React.PropTypes.func.isRequired
+	orderCancellation: React.PropTypes.object.isRequired
 };
 
 export default OpenOrdersGroup;

src/modules/open-orders/less/open-order.less

@@ -28,8 +28,10 @@
 				text-align: right;
 			}
 			.cancel {
-				padding: 0.1em 0em;
+				padding: 0.1em 0;
 				text-align: left;
+				min-width: 4.6em;
+				font-size: 0.6em;
 
 				.cancel-order-action {
 					padding: 0;
@@ -38,7 +40,6 @@
 					text-align: left;
 					color: @color-danger-active;
 					background: transparent;
-					font-size: 0.6em;
 
 					&:before {
 						content: '\f00d';
@@ -58,6 +59,20 @@
 						background: transparent !important;
 					}
 				}
+
+				.cancel-order-abort-confirmation {
+					padding: 0;
+					height: unset;
+					line-height: unset;
+					text-align: left;
+					background-color: transparent;
+					color: inherit;
+					margin-right: 1.4em;
+
+					&:hover {
+						font-weight: 700;
+					}
+				}
 			}
 
 			.open-order {

src/selectors.js

@@ -1,6 +1,6 @@
 import activePage from './selectors/active-page';
 import authForm from './selectors/auth-form';
-import { cancelOrder } from './selectors/cancel-order';
+import orderCancellation from './selectors/order-cancellation';
 import createMarketForm from './selectors/create-market-form';
 import filters from './selectors/filters';
 import keywords from './selectors/keywords';
@@ -19,7 +19,7 @@ import url from './selectors/url';
 const selectors = {
 	activePage,
 	authForm,
-	cancelOrder,
+	orderCancellation,
 	createMarketForm,
 	filters,
 	keywords,

src/selectors/markets.js

@@ -322,8 +322,6 @@ function makeMarkets(numMarkets = 50) {
 						id: `${m.id}${outcome.id}order${index}`,
 						type: parseInt(index, 10) % 2 === 1 ? 'buy' : 'sell',
 						marketID: m.id,
-						isCancelling: false,
-						isCancelled: false,
 						avgPrice: makeNumber(parseFloat(Math.random().toFixed(2)), 'eth'),
 						unmatchedShares: makeNumber(parseInt(Math.random() * 10, 10), 'shares'),
 						outcome: outcomeID,

src/selectors/order-cancellation.js

@@ -0,0 +1,39 @@
+/*
+ * Author: priecint
+ */
+
+export default {
+	cancellationStatuses: {
+		CANCELLATION_CONFIRMATION: 'CANCELLATION_CONFIRMATION',
+		CANCELLING: 'CANCELLING',
+		CANCELLED: 'CANCELLED',
+		CANCELLATION_FAILED: 'CANCELLATION_FAILED'
+	},
+	cancelOrder: orderID => {
+		require('../selectors').orderCancellation[orderID] = require('../selectors').orderCancellation.cancellationStatuses.CANCELLING;
+		require('../selectors').update({});
+
+		setTimeout(() => {
+			require('../selectors').markets.forEach((market) => {
+				market.outcomes.forEach(outcome => {
+					const order = outcome.userOpenOrders.find(openOrder => openOrder.id === orderID);
+					if (order != null) {
+						const index = outcome.userOpenOrders.findIndex(openOrder => openOrder.id === orderID);
+						outcome.userOpenOrders.splice(index, 1);
+						require('../selectors').update({});
+					}
+				});
+			});
+		}, 2000);
+	},
+	showCancelOrderConfirmation: orderID => {
+		setTimeout(() => {
+			require('../selectors').orderCancellation[orderID] = require('../selectors').orderCancellation.cancellationStatuses.CANCELLATION_CONFIRMATION;
+			require('../selectors').update({});
+		}, 300);
+	},
+	abortCancelOrderConfirmation: orderID => {
+		delete require('../selectors').orderCancellation[orderID];
+		require('../selectors').update({});
+	}
+};

test/assertions/market.js

@@ -230,16 +230,6 @@ export default function (market) {
 						assert.isObject(openOrder.unmatchedShares);
 						assertFormattedNumber(openOrder.unmatchedShares);
 					});
-
-					it(`market.outcomes[${i}].userOpenOrders[${j}].isCancelling`, () => {
-						assert.isDefined(openOrder.isCancelling);
-						assert.isBoolean(openOrder.isCancelling);
-					});
-
-					it(`market.outcomes[${i}].userOpenOrders[${j}].isCancelled`, () => {
-						assert.isDefined(openOrder.isCancelled);
-						assert.isBoolean(openOrder.isCancelled);
-					});
 				});
 			});
 		});

test/assertions/order-cancellation.js

@@ -0,0 +1,31 @@
+import { assert } from 'chai';
+
+export default function (orderCancellation) {
+	describe('augur-ui-react-components orderCancellation', () => {
+		it('orderCancellation', () => {
+			assert.isObject(orderCancellation);
+		});
+
+		it('orderCancellation.cancelOrder', () => {
+			assert.isFunction(orderCancellation.cancelOrder);
+		});
+
+		it('orderCancellation.abortCancelOrderConfirmation', () => {
+			assert.isFunction(orderCancellation.abortCancelOrderConfirmation);
+		});
+
+		it('orderCancellation.showCancelOrderConfirmation', () => {
+			assert.isFunction(orderCancellation.showCancelOrderConfirmation);
+		});
+
+		it('orderCancellation.cancellationStatuses', () => {
+			assert.isObject(orderCancellation.cancellationStatuses);
+			assert.deepEqual(orderCancellation.cancellationStatuses, {
+				CANCELLATION_CONFIRMATION: 'CANCELLATION_CONFIRMATION',
+				CANCELLING: 'CANCELLING',
+				CANCELLED: 'CANCELLED',
+				CANCELLATION_FAILED: 'CANCELLATION_FAILED'
+			});
+		});
+	});
+};