refactor(admin-ui): Extract PaymentForRefundSelectorComponent

packages/admin-ui/src/lib/order/src/common/get-refundable-payments.ts

@@ -0,0 +1,31 @@
+import { FormControl, Validators } from '@angular/forms';
+import { OrderDetailFragment } from '@vendure/admin-ui/core';
+import { summate } from '@vendure/common/lib/shared-utils';
+
+export type Payment = NonNullable<OrderDetailFragment['payments']>[number];
+export type RefundablePayment = Payment & {
+    refundableAmount: number;
+    amountToRefundControl: FormControl<number>;
+    selected: boolean;
+};
+
+export function getRefundablePayments(payments: OrderDetailFragment['payments']): RefundablePayment[] {
+    const settledPayments = (payments || []).filter(p => p.state === 'Settled');
+    return settledPayments.map((payment, index) => {
+        const refundableAmount =
+            payment.amount -
+            summate(
+                payment.refunds.filter(r => r.state !== 'Failed'),
+                'total',
+            );
+        return {
+            ...payment,
+            refundableAmount,
+            amountToRefundControl: new FormControl(0, {
+                nonNullable: true,
+                validators: [Validators.min(0), Validators.max(refundableAmount)],
+            }),
+            selected: index === 0,
+        };
+    });
+}

packages/admin-ui/src/lib/order/src/components/payment-for-refund-selector/payment-for-refund-selector.component.html

@@ -0,0 +1,38 @@
+<vdr-card
+        [title]="'order.payment' | translate"
+        [class.selected]="payment.selected"
+        [class.unselected]="!payment.selected"
+        *ngFor="let payment of refundablePayments"
+>
+    <ng-template vdrCardControls>
+        <vdr-select-toggle
+                size="small"
+                [title]="'order.refund-this-payment' | translate"
+                [label]="'order.refund-this-payment' | translate"
+                [disabled]="refundablePayments.length === 1"
+                [(selected)]="payment.selected"
+                (selectedChange)="paymentSelected.emit({ payment: payment, selected: $event })"
+        ></vdr-select-toggle>
+    </ng-template>
+    <div class="form-grid">
+        <vdr-labeled-data [label]="'order.payment-method' | translate">
+            {{ payment.method }}
+        </vdr-labeled-data>
+        <vdr-labeled-data [label]="'order.transaction-id' | translate">
+            {{ payment.transactionId }}
+        </vdr-labeled-data>
+        <vdr-labeled-data [label]="'order.payment-amount' | translate">
+            {{ payment.amount | localeCurrency : order.currencyCode }}
+        </vdr-labeled-data>
+        <vdr-labeled-data [label]="'order.refundable-amount' | translate">
+            {{ payment.refundableAmount | localeCurrency : order.currencyCode }}
+        </vdr-labeled-data>
+    </div>
+    <vdr-form-field [label]="'order.refund-amount' | translate">
+        <vdr-currency-input
+                [readonly]="!payment.selected"
+                [currencyCode]="order.currencyCode"
+                [formControl]="payment.amountToRefundControl"
+        ></vdr-currency-input>
+    </vdr-form-field>
+</vdr-card>

packages/admin-ui/src/lib/order/src/components/payment-for-refund-selector/payment-for-refund-selector.component.ts

@@ -0,0 +1,15 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import { OrderDetailFragment } from '@vendure/admin-ui/core';
+import { RefundablePayment } from '../../common/get-refundable-payments';
+
+@Component({
+    selector: 'vdr-payment-for-refund-selector',
+    templateUrl: './payment-for-refund-selector.component.html',
+    styleUrls: ['./payment-for-refund-selector.component.css'],
+    changeDetection: ChangeDetectionStrategy.Default,
+})
+export class PaymentForRefundSelectorComponent {
+    @Input() refundablePayments: RefundablePayment[];
+    @Input() order: OrderDetailFragment;
+    @Output() paymentSelected = new EventEmitter<{ payment: RefundablePayment; selected: boolean }>();
+}

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

@@ -147,44 +147,11 @@
             </vdr-card>
         </div>
         <div class="">
-            <vdr-card
-                [title]="'order.payment' | translate"
-                [class.selected]="payment.selected"
-                [class.unselected]="!payment.selected"
-                *ngFor="let payment of refundablePayments"
-            >
-                <ng-template vdrCardControls>
-                    <vdr-select-toggle
-                        size="small"
-                        [title]="'order.refund-this-payment' | translate"
-                        [label]="'order.refund-this-payment' | translate"
-                        [disabled]="refundablePayments.length === 1"
-                        [(selected)]="payment.selected"
-                        (selectedChange)="onPaymentSelected(payment, $event)"
-                    ></vdr-select-toggle>
-                </ng-template>
-                <div class="form-grid">
-                    <vdr-labeled-data [label]="'order.payment-method' | translate">
-                        {{ payment.method }}
-                    </vdr-labeled-data>
-                    <vdr-labeled-data [label]="'order.transaction-id' | translate">
-                        {{ payment.transactionId }}
-                    </vdr-labeled-data>
-                    <vdr-labeled-data [label]="'order.payment-amount' | translate">
-                        {{ payment.amount | localeCurrency : order.currencyCode }}
-                    </vdr-labeled-data>
-                    <vdr-labeled-data [label]="'order.refundable-amount' | translate">
-                        {{ payment.refundableAmount | localeCurrency : order.currencyCode }}
-                    </vdr-labeled-data>
-                </div>
-                <vdr-form-field [label]="'order.refund-amount' | translate">
-                    <vdr-currency-input
-                        [readonly]="!payment.selected"
-                        [currencyCode]="order.currencyCode"
-                        [formControl]="payment.amountToRefundControl"
-                    ></vdr-currency-input>
-                </vdr-form-field>
-            </vdr-card>
+            <vdr-payment-for-refund-selector
+                [refundablePayments]="refundablePayments"
+                (paymentSelected)="onPaymentSelected($event.payment, $event.selected)"
+                [order]="order"
+            ></vdr-payment-for-refund-selector>
         </div>
     </div>
 </div>

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

@@ -12,14 +12,9 @@ import {
     RefundOrderInput,
 } from '@vendure/admin-ui/core';
 import { summate } from '@vendure/common/lib/shared-utils';
+import { getRefundablePayments, RefundablePayment } from '../../common/get-refundable-payments';
 
 type SelectionLine = { quantity: number; cancel: boolean };
-type Payment = NonNullable<OrderDetailFragment['payments']>[number];
-type RefundablePayment = Payment & {
-    refundableAmount: number;
-    amountToRefundControl: FormControl<number>;
-    selected: boolean;
-};
 
 @Component({
     selector: 'vdr-refund-order-dialog',
@@ -88,24 +83,7 @@ export class RefundOrderDialogComponent
             }),
             {},
         );
-        const settledPayments = (this.order.payments || []).filter(p => p.state === 'Settled');
-        this.refundablePayments = settledPayments.map((payment, index) => {
-            const refundableAmount =
-                payment.amount -
-                summate(
-                    payment.refunds.filter(r => r.state !== 'Failed'),
-                    'total',
-                );
-            return {
-                ...payment,
-                refundableAmount,
-                amountToRefundControl: new FormControl(0, {
-                    nonNullable: true,
-                    validators: [Validators.min(0), Validators.max(refundableAmount)],
-                }),
-                selected: index === 0,
-            };
-        });
+        this.refundablePayments = getRefundablePayments(this.order.payments);
     }
 
     updateRefundTotal() {

packages/admin-ui/src/lib/order/src/order.module.ts

@@ -48,6 +48,7 @@ import { SettleRefundDialogComponent } from './components/settle-refund-dialog/s
 import { SimpleItemListComponent } from './components/simple-item-list/simple-item-list.component';
 import { createRoutes } from './order.routes';
 import { OrderDataTableComponent } from './components/order-data-table/order-data-table.component';
+import { PaymentForRefundSelectorComponent } from './components/payment-for-refund-selector/payment-for-refund-selector.component';
 
 @NgModule({
     imports: [SharedModule, RouterModule.forChild([])],
@@ -98,6 +99,7 @@ import { OrderDataTableComponent } from './components/order-data-table/order-dat
         SellerOrdersCardComponent,
         OrderDataTableComponent,
         OrderTotalColumnComponent,
+        PaymentForRefundSelectorComponent,
     ],
     exports: [OrderCustomFieldsCardComponent],
 })