feat(admin-ui): Allow selection of payment to be refunded

packages/admin-ui/src/app/order/components/refund-order-dialog/refund-order-dialog.component.html

@@ -56,11 +56,26 @@
             [items]="reasons"
             bindLabel="name"
             autofocus
+            [placeholder]="'order.refund-reason-required' | translate"
             bindValue="id"
             [addTag]="true"
             [(ngModel)]="reason"
         ></ng-select>
 
+        <clr-select-container>
+            <label>{{ 'order.payment-to-refund' | translate }}</label>
+            <select clrSelect name="options" [(ngModel)]="selectedPayment">
+                <option
+                    *ngFor="let payment of settledPayments"
+                    [ngValue]="payment"
+                    [disabled]="payment.state !== 'Settled'"
+                >
+                    #{{ payment.id }} {{ payment.method }}:
+                    {{ payment.amount / 100 | currency: order.currencyCode }}
+                </option>
+            </select>
+        </clr-select-container>
+
         <clr-checkbox-wrapper>
             <input type="checkbox" clrCheckbox [(ngModel)]="refundShipping" />
             <label>
@@ -79,18 +94,19 @@
         </clr-input-container>
         <div class="totals">
             <div class="order-total">
-                {{ 'order.order-total' | translate }}: {{ order.total / 100 | currency: order.currencyCode }}
+                {{ 'order.payment-amount' | translate }}:
+                {{ selectedPayment.amount / 100 | currency: order.currencyCode }}
             </div>
             <div class="refund-total">
                 {{ 'order.refund-total' | translate }}: {{ refundTotal / 100 | currency: order.currencyCode }}
             </div>
-            <div class="refund-total-error" *ngIf="refundTotal < 0 || order.total < refundTotal">
+            <div class="refund-total-error" *ngIf="refundTotal < 0 || selectedPayment.amount < refundTotal">
                 {{
                     'order.refund-total-error'
                         | translate
                             : {
                                   min: 0 | currency: order.currencyCode,
-                                  max: order.total / 100 | currency: order.currencyCode
+                                  max: selectedPayment.amount / 100 | currency: order.currencyCode
                               }
                 }}
             </div>
@@ -103,7 +119,7 @@
     <button
         type="submit"
         (click)="select()"
-        [disabled]="!reason || refundTotal === 0 || refundTotal > order.total"
+        [disabled]="!selectedPayment || !reason || refundTotal === 0 || refundTotal > selectedPayment.amount"
         class="btn btn-primary"
     >
         {{

packages/admin-ui/src/app/order/components/refund-order-dialog/refund-order-dialog.component.scss

@@ -18,6 +18,9 @@
             margin-left: 24px;
             width: 250px;
         }
+        clr-select-container {
+            margin: 12px 0;
+        }
     }
     .order-lines {
         flex: 1;

packages/admin-ui/src/app/order/components/refund-order-dialog/refund-order-dialog.component.ts

@@ -21,6 +21,8 @@ export class RefundOrderDialogComponent
     order: OrderDetailFragment;
     resolveWith: (result?: RefundOrderInput & { cancel: OrderLineInput[] }) => void;
     reason: string;
+    settledPayments: OrderDetail.Payments[];
+    selectedPayment: OrderDetail.Payments;
     lineQuantities: { [lineId: string]: { quantity: number; cancel: boolean } } = {};
     refundShipping = false;
     adjustment = 0;
@@ -51,10 +53,14 @@ export class RefundOrderDialogComponent
                 },
             };
         }, {});
+        this.settledPayments = (this.order.payments || []).filter(p => p.state === 'Settled');
+        if (this.settledPayments.length) {
+            this.selectedPayment = this.settledPayments[0];
+        }
     }
 
     select() {
-        const payment = this.order.payments && this.order.payments[0];
+        const payment = this.selectedPayment;
         if (payment) {
             const lines = Object.entries(this.lineQuantities)
                 .map(([orderLineId, data]) => ({

packages/admin-ui/src/i18n-messages/en.json

@@ -441,11 +441,12 @@
     "line-fulfillment-none": "No items fulfilled",
     "line-fulfillment-partial": "{ count } of { total } items fulfilled",
     "order-history": "Order history",
-    "order-total": "Order total",
     "payment": "Payment",
+    "payment-amount": "Payment amount",
     "payment-metadata": "Payment metadata",
     "payment-method": "Payment method",
     "payment-state": "State",
+    "payment-to-refund": "Payment to refund",
     "product-name": "Product name",
     "product-sku": "SKU",
     "quantity": "Quantity",
@@ -458,6 +459,7 @@
     "refund-reason": "Refund reason",
     "refund-reason-customer-request": "Customer request",
     "refund-reason-not-available": "Not available",
+    "refund-reason-required": "Refund reason is required",
     "refund-shipping": "Refund shipping",
     "refund-total": "Refund total",
     "refund-total-error": "Refund total must be between {min} and {max}",
@@ -545,4 +547,4 @@
     "update": "Update",
     "zone": "Zone"
   }
-}
+}