Store - Coupon lookup & selection component

[jameskoster]

For manual order creation (and editing orders to an extent) we need a flow for adding coupons to an order. For stores with lots of promotions remembering the names isn't feasible, so we need a coupon lookup - similar to our product lookup. Here's the design:

Note that for now this is only a coupon lookup - not a promo lookup. Whether we'll need that functionality in the future I'm not sure.

Although some coupons can be combined, I feel that is less common behaviour. So for now let's use radios so that coupons can only be selected one at a time. We can revisit the UX later if many people need to lookup and select multiple coupons.

[ryelle]

So for now let's use radios so that coupons can only be selected one at a time.

The user can always open the dialog again if they want to add a second coupon, I think it makes sense to leave it at the simpler case, since i think this is a smaller use-case than people adding multiple products (but we can also add tracks to these buttons and see what people are doing).

[jameskoster]

The user can always open the dialog again if they want to add a second coupon

Totally.

I suppose we need to think about the UX in the following cases though;

1. User applies a coupon which cannot be used in conjunction with other coupons
2. User applies a coupon, then tries to apply another coupon which cannot be used in conjunction with other coupons
3. User applies a coupon that can only be applied when specific products are in the cart, then removes the product which qualifies that coupon.

For 1. I suppose we should just disable the "Apply coupon" button and reveal a tooltip on hover which explains that they'll need to remove the current coupon if they want to add another.

For 2, I don't think we should hide incompatible coupons - that would be confusing. Let's list them but add a notice explaining that they can't be selected. Like so;

(Notice I updated the copy so it no longer states that incompatible coupons are hidden).

For 3 it would be best to automate this. IE when they remove the product remove the coupon as well and display a notice.

[ryelle]

What should the order screen look like once a coupon is added? Is it another line item, or a list of tags like wp-admin? It doesn't have a price on its own, though. We're overlapping into #16662 a bit, but here I'm mostly wondering how the applied coupon(s) would be listed on the order screen, and how a store owner would remove a coupon.

[jameskoster]

I think the wp-admin approach is fine. Let's reveal the "Coupons" section when a coupon has been added to an order.

When viewing an order you see a comma separated list of coupons which link to the edit coupon screen. When editing an order you can delete the coupons. Like so;

Coupons can only be applied to (or removed from) orders pending payment, right?

[ryelle]

@jameskoster Can we move the coupons above or below the totals table? Discount/Shipping/Total etc are full-width table rows so that the contents line up with the contents above, so there isn't actually space where you've put it on the mockup.

Coupons can only be applied to (or removed from) orders pending payment, right?

That will be the case, yes.

[ryelle]

I've tried an approach for listing out the coupons, see #20929

[stale]

This issue has been marked as stale and will be closed in seven days. This happened because:

• It has been inactive in the past 9 months.
• It isn't a project or a milestone, and hasn’t been labeled `[Pri] Blocker`, `[Pri] High`, `[Status] Keep Open`, or `OSS Citizen`.

You can keep the issue open by adding a comment. If you do, please provide additional context and explain why you’d like it to remain open. You can also close the issue yourself — if you do, please add a brief explanation.