WooCommerce: Enable refunds on orders #15589

ryelle · 2017-06-28T00:47:18Z

This PR splits the OrderDetails component into OrderDetailsTable and OrderRefundCard. In OrderRefundCard, I've added a refund modal so that store owners can refund customers.

Screenshot of the modal, where a user can refund based on items quantities, shipping cost, or enter a custom refund amount:

If they try to refund more than the cost of the order, they see an error:

If the refund is successful, there's a global notice after the modal closes (if the refund fails on the server side, it's an error notice), and the order details update with the new refund amount.

Left to do:

~~Entering in a custom refund amount is broken right now, either I'll fix this or convert it to read only.~~ Custom amount has been switched to read-only, formatting the price breaks the input
~~The credit card display needs to be hooked up.~~ See WooCommerce: Enable refunds on orders #15589 (comment), this will be coming out and replaced with payment method info
~~A complete refund should toggle the order status to refunded.~~ Does this automatically 🎉

To test

Make sure you have the latest master API plugin on your site
Visit your orders list /store/orders/:site
Click into an order
Click the "Submit Refund" button
Create a refund, try with various refund amounts (0, higher than total, partial refund, exact...)

Run npm test to test the new action/reducer/selector (for tracking refund requests).

Fixes #15672

matticbot · 2017-06-28T00:47:24Z

Test live: https://calypso.live/?branch=update/woo-orders-refund

a8ci18n · 2017-06-28T00:53:25Z

client/extensions/woocommerce/app/order/order-details-table.js

+
+		return (
+			<div className="order__details-total-refund">
+				<div className="order__details-totals-label">{ translate( 'Refunded' ) }</div>


Hi! I've found a possible matching string that has already been translated 37 times:
translate( 'Refunded To' ) ES Score: 12
See 1 additional suggestion in the PR translation status page

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).

ryelle · 2017-06-28T20:32:30Z

So, it turns out we don't know just from the API whether a payment method supports automated refunds. For example, check payments don't support automated refunds, but PayPal does. Right now if a store owner tries to refund an order paid by check, it will error. It's fine if the customer paid with paypal, though.

The credit card display here also doesn't work, the automated refund should happen from the payment gateway - so orders paid via PayPal would refund from paypal, stripe from stripe, etc. This could be "Refunding payment from PayPal" or "Refunding payment from Stripe" instead.

- Split the details table into a separate component - Split the refund card into a separate component - Add a modal when the refund button is clicked

…r zero

ryelle · 2017-06-29T14:45:05Z

client/extensions/woocommerce/app/order/order-refund-card.js

+		const refundObj = {
+			amount: this.state.refundTotal + '', // API expects a string
+			reason: this.state.refundNote,
+			// api_refund


This line will turn on/off automated refunds, depending on whether this payment method supports it

This has been handled in #15702 (which builds on this PR)

ryelle · 2017-06-29T20:45:59Z

I've just realized I want to change my approach here for the state, so I'm putting this back into in-progress.

justinshreve

LGTM. My only required change is using PriceInput. Other comments are minor. Pre-approving.

Tested with Stripe and it worked.

justinshreve · 2017-06-30T20:16:09Z

client/extensions/woocommerce/app/order/order-details-table.js

+
+	onChange = ( event ) => {
+		if ( 'shipping_total' === event.target.name ) {
+			const shippingValue = event.target.value.replace( /[^0-9,.]/g, '' );


Minor: Just call this shippingTotal, so you can save some characters in the line below.

justinshreve · 2017-06-30T20:20:44Z

client/extensions/woocommerce/app/order/order-details-table.js

+			const shippingValue = event.target.value.replace( /[^0-9,.]/g, '' );
+			this.setState( { shippingTotal: shippingValue }, this.recalculateRefund );
+		} else {
+			const i = event.target.name.split( '-' )[ 1 ];


Maybe add a small comment above this block explaining that it's splitting thequantity-Xfields. I know that it becomes clearer the further down you get (since it is setting quantity a few lines below), but it still took me a a second to figure it out.

justinshreve · 2017-06-30T20:24:13Z

client/extensions/woocommerce/app/order/order-details-table.js

+						<div className="order__details-totals-label">{ translate( 'Shipping' ) }</div>
+						<div className="order__details-totals-value">
+							{ isEditable
+								? <FormTextInputWithAffixes


Use PriceInput here, and you can get the correct currency pulled in: https://github.com/Automattic/wp-calypso/blob/82524bf32455d4340bda9d9cdd258dbc8e0e4d35/client/extensions/woocommerce/components/price-input/index.js

<PriceInput currency={ order.currency } value={ this.state.shippingTotal } .... />

justinshreve · 2017-06-30T20:28:32Z

client/extensions/woocommerce/app/order/order-refund-card.js

+						<FormFieldset className="order__refund-details">
+							<FormLabel className="order__refund-amount">
+								<span className="order__refund-amount-label">{ translate( 'Total refund amount' ) }</span>
+								<div className="order__refund-amount-value">


PriceInput.

justinshreve · 2017-06-30T20:34:46Z

client/extensions/woocommerce/state/sites/orders/refunds/reducer.js

+
+/**
+ * Returns the updated order requests state after an action has been
+ * dispatched. The state reflects a mapping of query (page number) to a


page number should be order id

justinshreve · 2017-06-30T20:35:10Z

client/extensions/woocommerce/state/sites/orders/refunds/reducer.js

+/**
+ * Returns the updated order requests state after an action has been
+ * dispatched. The state reflects a mapping of query (page number) to a
+ * boolean reflecting whether a request for that page is in progress.


page = order

justinshreve · 2017-06-30T20:37:37Z

client/extensions/woocommerce/state/sites/orders/refunds/test/actions.js

+					data: {
+						message: 'No route was found matching the URL and request method',
+						error: 'rest_no_route',
+						status: 400,


A second status wouldn't be returned unless using _envelope

- Switch to PriceInput - Fix up docs & variable names - Fix failing request action test

ryelle added Store [Status] In Progress labels Jun 28, 2017

ryelle self-assigned this Jun 28, 2017

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

a8ci18n reviewed Jun 28, 2017

View reviewed changes

ryelle mentioned this pull request Jun 28, 2017

Payment Gateways: Add supports data to each payment method woocommerce/wc-api-dev#17

Closed

ryelle and others added 14 commits June 29, 2017 10:31

WooCommerce: Add a refund dialog

268d971

- Split the details table into a separate component - Split the refund card into a separate component - Add a modal when the refund button is clicked

Create the refund form, and make quantity & shipping total editable

16d452e

Style refund dialog

1fba07b

Pass site through to orders table for the product link

313d8ea

Hook up fields to calculate the refund total

d0142ac

Add buttons & style

d9646ed

Connect the card to enable notices

19797af

Create a sendRefund action

d532e24

Show an error message if the refund is higher than the order total, o…

cd65935

…r zero

refund modal: style

ee6740c

Shrink the quantity input width

317a243

Change the refund total to readonly, disabling a custom refund amount

b2a1663

Used StoredCard to display a credit card

918dd6a

Clean up refund card component & proptypes

f703daa

ryelle force-pushed the update/woo-orders-refund branch from 4329bec to f703daa Compare June 29, 2017 14:42

ryelle commented Jun 29, 2017

View reviewed changes

ryelle requested review from justinshreve, coderkevin and belcherj June 29, 2017 14:45

ryelle added [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. and removed [Status] In Progress labels Jun 29, 2017

ryelle added [Status] In Progress and removed [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels Jun 29, 2017

ryelle added 2 commits June 29, 2017 20:05

Move refunds to a new folder, to keep orders files neater

1ece068

Add refresh to fetchOrder, to force-refresh an order

a4fa3c7

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

ryelle mentioned this pull request Jun 30, 2017

WooCommerce Orders: Detect & enable manual refunds #15702

Merged

justinshreve approved these changes Jun 30, 2017

View reviewed changes

PR feedback:

b269c52

- Switch to PriceInput - Fix up docs & variable names - Fix failing request action test

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

ryelle merged commit 91e4d9a into master Jun 30, 2017

matticbot removed the [Status] Ready to Merge label Jun 30, 2017

ryelle deleted the update/woo-orders-refund branch October 3, 2017 18:50

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

WooCommerce: Enable refunds on orders #15589

WooCommerce: Enable refunds on orders #15589

ryelle commented Jun 28, 2017 •

edited

matticbot commented Jun 28, 2017

a8ci18n Jun 28, 2017

ryelle commented Jun 28, 2017

ryelle Jun 29, 2017

ryelle Jun 30, 2017

ryelle commented Jun 29, 2017

justinshreve left a comment

justinshreve Jun 30, 2017

justinshreve Jun 30, 2017

justinshreve Jun 30, 2017

justinshreve Jun 30, 2017

justinshreve Jun 30, 2017

justinshreve Jun 30, 2017

justinshreve Jun 30, 2017

WooCommerce: Enable refunds on orders #15589

WooCommerce: Enable refunds on orders #15589

Conversation

ryelle commented Jun 28, 2017 • edited

matticbot commented Jun 28, 2017

Choose a reason for hiding this comment

ryelle commented Jun 28, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ryelle commented Jun 29, 2017

justinshreve left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ryelle commented Jun 28, 2017 •

edited