feat(admin-ui): Improved refund dialog

Relates to #2393
vendure-ecommerce · Jan 17, 2024 · ccbf9ec · ccbf9ec
1 parent 5263c2d
commit ccbf9ec
Show file tree

Hide file tree

Showing 29 changed files with 651 additions and 398 deletions.
diff --git a/packages/admin-ui/i18n-coverage.json b/packages/admin-ui/i18n-coverage.json
@@ -1,101 +1,101 @@
 {
-  "generatedOn": "2024-01-02T15:08:18.987Z",
-  "lastCommit": "ea8c1798376626a904b61bdb1a4bf4fe1de953ee",
+  "generatedOn": "2024-01-17T15:22:24.662Z",
+  "lastCommit": "5263c2d4e66ca1a87a9f1d36c53f6f8fc2ae48dc",
   "translationStatus": {
     "ar": {
-      "tokenCount": 761,
-      "translatedCount": 761,
-      "percentage": 100
+      "tokenCount": 764,
+      "translatedCount": 759,
+      "percentage": 99
     },
     "cs": {
-      "tokenCount": 761,
-      "translatedCount": 571,
+      "tokenCount": 764,
+      "translatedCount": 570,
       "percentage": 75
     },
     "de": {
-      "tokenCount": 761,
-      "translatedCount": 761,
-      "percentage": 100
+      "tokenCount": 764,
+      "translatedCount": 759,
+      "percentage": 99
     },
     "en": {
-      "tokenCount": 761,
-      "translatedCount": 761,
+      "tokenCount": 764,
+      "translatedCount": 763,
       "percentage": 100
     },
     "es": {
-      "tokenCount": 761,
-      "translatedCount": 761,
-      "percentage": 100
+      "tokenCount": 764,
+      "translatedCount": 759,
+      "percentage": 99
     },
     "fa": {
-      "tokenCount": 761,
-      "translatedCount": 761,
-      "percentage": 100
+      "tokenCount": 764,
+      "translatedCount": 759,
+      "percentage": 99
     },
     "fr": {
-      "tokenCount": 761,
-      "translatedCount": 758,
-      "percentage": 100
+      "tokenCount": 764,
+      "translatedCount": 756,
+      "percentage": 99
     },
     "he": {
-      "tokenCount": 761,
-      "translatedCount": 761,
-      "percentage": 100
+      "tokenCount": 764,
+      "translatedCount": 759,
+      "percentage": 99
     },
     "hr": {
-      "tokenCount": 761,
-      "translatedCount": 760,
-      "percentage": 100
+      "tokenCount": 764,
+      "translatedCount": 758,
+      "percentage": 99
     },
     "it": {
-      "tokenCount": 761,
-      "translatedCount": 761,
-      "percentage": 100
+      "tokenCount": 764,
+      "translatedCount": 759,
+      "percentage": 99
     },
     "nb": {
-      "tokenCount": 761,
-      "translatedCount": 759,
-      "percentage": 100
+      "tokenCount": 764,
+      "translatedCount": 756,
+      "percentage": 99
     },
     "ne": {
-      "tokenCount": 761,
-      "translatedCount": 750,
-      "percentage": 99
+      "tokenCount": 764,
+      "translatedCount": 748,
+      "percentage": 98
     },
     "pl": {
-      "tokenCount": 761,
-      "translatedCount": 400,
-      "percentage": 53
+      "tokenCount": 764,
+      "translatedCount": 398,
+      "percentage": 52
     },
     "pt_BR": {
-      "tokenCount": 761,
-      "translatedCount": 760,
-      "percentage": 100
+      "tokenCount": 764,
+      "translatedCount": 758,
+      "percentage": 99
     },
     "pt_PT": {
-      "tokenCount": 761,
-      "translatedCount": 609,
-      "percentage": 80
+      "tokenCount": 764,
+      "translatedCount": 606,
+      "percentage": 79
     },
     "ru": {
-      "tokenCount": 761,
-      "translatedCount": 761,
-      "percentage": 100
+      "tokenCount": 764,
+      "translatedCount": 759,
+      "percentage": 99
     },
     "uk": {
-      "tokenCount": 761,
-      "translatedCount": 596,
+      "tokenCount": 764,
+      "translatedCount": 594,
       "percentage": 78
     },
     "zh_Hans": {
-      "tokenCount": 761,
-      "translatedCount": 541,
+      "tokenCount": 764,
+      "translatedCount": 539,
       "percentage": 71
     },
     "zh_Hant": {
-      "tokenCount": 761,
-      "translatedCount": 387,
-      "percentage": 51
+      "tokenCount": 764,
+      "translatedCount": 385,
+      "percentage": 50
     }
   }
 }
diff --git a/packages/admin-ui/src/lib/core/src/common/generated-types.ts b/packages/admin-ui/src/lib/core/src/common/generated-types.ts
diff --git a/packages/admin-ui/src/lib/core/src/data/definitions/order-definitions.ts b/packages/admin-ui/src/lib/core/src/data/definitions/order-definitions.ts
@@ -126,6 +126,8 @@ export const PAYMENT_WITH_REFUNDS_FRAGMENT = gql`
 export const ORDER_LINE_FRAGMENT = gql`
     fragment OrderLine on OrderLine {
         id
+        createdAt
+        updatedAt
         featuredAsset {
             preview
         }
@@ -211,6 +213,8 @@ export const ORDER_DETAIL_FRAGMENT = gql`
         shipping
         shippingWithTax
         shippingLines {
+            id
+            discountedPriceWithTax
             shippingMethod {
                 id
                 code

diff --git a/.../admin-ui/src/lib/core/src/shared/components/currency-input/currency-input.component.scss b/.../admin-ui/src/lib/core/src/shared/components/currency-input/currency-input.component.scss
@@ -1,6 +1,10 @@
 :host {
     padding: 0;
     border: none;
+    &.ng-invalid input[type='number'] {
+        color: var(--color-error-700);
+        border-color: var(--color-error-300);
+    }
 }
 
 input {

diff --git a/packages/admin-ui/src/lib/order/src/components/order-detail/order-detail.component.ts b/packages/admin-ui/src/lib/order/src/components/order-detail/order-detail.component.ts
@@ -20,7 +20,7 @@ import {
 } from '@vendure/admin-ui/core';
 import { assertNever, summate } from '@vendure/common/lib/shared-utils';
 import { gql } from 'apollo-angular';
-import { EMPTY, Observable, of, Subject } from 'rxjs';
+import { EMPTY, forkJoin, Observable, of, Subject } from 'rxjs';
 import { map, mapTo, startWith, switchMap, take } from 'rxjs/operators';
 
 import { OrderTransitionService } from '../../providers/order-transition.service';
@@ -567,7 +567,12 @@ export class OrderDetailComponent
                                 switch (result.__typename) {
                                     case 'Order':
                                         this.refetchOrder(result).subscribe();
-                                        this.notificationService.success(_('order.cancelled-order-success'));
+                                        this.notificationService.success(
+                                            _('order.cancelled-order-items-success'),
+                                            {
+                                                count: summate(input.cancel.lines, 'quantity'),
+                                            },
+                                        );
                                         return input;
                                     case 'CancelActiveOrderError':
                                     case 'QuantityTooGreatError':
@@ -587,35 +592,39 @@ export class OrderDetailComponent
                     if (!input) {
                         return of(undefined);
                     }
-                    if (input.refund.lines.length) {
-                        return this.dataService.order
-                            .refundOrder(input.refund)
-                            .pipe(map(res => res.refundOrder));
+                    if (input.refunds.length) {
+                        return forkJoin(
+                            input.refunds.map(refund =>
+                                this.dataService.order.refundOrder(refund).pipe(map(res => res.refundOrder)),
+                            ),
+                        );
                     } else {
                         return [undefined];
                     }
                 }),
             )
-            .subscribe(result => {
-                if (result) {
-                    switch (result.__typename) {
-                        case 'Refund':
-                            this.refetchOrder(result).subscribe();
-                            if (result.state === 'Failed') {
-                                this.notificationService.error(_('order.refund-order-failed'));
-                            } else {
-                                this.notificationService.success(_('order.refund-order-success'));
-                            }
-                            break;
-                        case 'AlreadyRefundedError':
-                        case 'NothingToRefundError':
-                        case 'PaymentOrderMismatchError':
-                        case 'RefundOrderStateError':
-                        case 'RefundStateTransitionError':
-                            this.notificationService.error(result.message);
-                            break;
+            .subscribe(results => {
+                for (const result of results ?? []) {
+                    if (result) {
+                        switch (result.__typename) {
+                            case 'Refund':
+                                if (result.state === 'Failed') {
+                                    this.notificationService.error(_('order.refund-order-failed'));
+                                } else {
+                                    this.notificationService.success(_('order.refund-order-success'));
+                                }
+                                break;
+                            case 'AlreadyRefundedError':
+                            case 'NothingToRefundError':
+                            case 'PaymentOrderMismatchError':
+                            case 'RefundOrderStateError':
+                            case 'RefundStateTransitionError':
+                                this.notificationService.error(result.message);
+                                break;
+                        }
                     }
                 }
+                this.refetchOrder(results?.[0]).subscribe();
             });
     }
 

diff --git a/packages/admin-ui/src/lib/order/src/components/order-table/order-table.component.html b/packages/admin-ui/src/lib/order/src/components/order-table/order-table.component.html
@@ -1,4 +1,27 @@
 <vdr-order-data-table id="order-detail-list" [items]="order.lines" [order]="order">
+    <vdr-dt2-column id="id" [heading]="'common.id' | translate" [hiddenByDefault]="true">
+        <ng-template let-line="item">
+            {{ line.id }}
+        </ng-template>
+    </vdr-dt2-column>
+    <vdr-dt2-column
+            id="created-at"
+            [heading]="'common.created-at' | translate"
+            [hiddenByDefault]="true"
+    >
+        <ng-template let-line="item">
+            {{ line.createdAt | localeDate : 'short' }}
+        </ng-template>
+    </vdr-dt2-column>
+    <vdr-dt2-column
+            id="updated-at"
+            [heading]="'common.updated-at' | translate"
+            [hiddenByDefault]="true"
+    >
+        <ng-template let-line="item">
+            {{ line.updatedAt | localeDate : 'short' }}
+        </ng-template>
+    </vdr-dt2-column>
     <vdr-dt2-column [heading]="'common.image' | translate" id="image">
         <ng-template let-line="item">
             <div class="image-placeholder">