feat(admin-ui-plugin): Make refund/cancellation reasons configurable

Closes #893

packages/admin-ui-plugin/src/plugin.ts

@@ -246,6 +246,7 @@ export class AdminUiPlugin implements NestModule {
                 'hideVersion',
                 AdminUiPlugin.options.adminUiConfig?.hideVersion || false,
             ),
+            cancellationReasons: propOrDefault('cancellationReasons', undefined),
         };
     }
 

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

@@ -20,7 +20,7 @@
                 [class.is-cancelled]="line.quantity === 0"
             >
                 <td class="align-middle thumb">
-                    <img [src]="line.featuredAsset | assetPreview:'tiny'" />
+                    <img [src]="line.featuredAsset | assetPreview: 'tiny'" />
                 </td>
                 <td class="align-middle name">{{ line.productVariant.name }}</td>
                 <td class="align-middle sku">{{ line.productVariant.sku }}</td>
@@ -44,14 +44,30 @@
         </table>
     </div>
     <div class="cancellation-details">
-        <clr-radio-wrapper>
-          <input type="radio" clrRadio [value]="true" [(ngModel)]="cancelAll" name="options" (ngModelChange)="radioChanged()" />
-          <label>{{ 'order.cancel-entire-order' | translate }}</label>
-        </clr-radio-wrapper>
-        <clr-radio-wrapper>
-          <input type="radio" clrRadio [value]="false" [(ngModel)]="cancelAll" name="options" (ngModelChange)="radioChanged()" />
-          <label>{{ 'order.cancel-specified-items' | translate }}</label>
-        </clr-radio-wrapper>
+        <ng-container *ngIf="order.active !== true">
+            <clr-radio-wrapper>
+                <input
+                    type="radio"
+                    clrRadio
+                    [value]="true"
+                    [(ngModel)]="cancelAll"
+                    name="options"
+                    (ngModelChange)="radioChanged()"
+                />
+                <label>{{ 'order.cancel-entire-order' | translate }}</label>
+            </clr-radio-wrapper>
+            <clr-radio-wrapper>
+                <input
+                    type="radio"
+                    clrRadio
+                    [value]="false"
+                    [(ngModel)]="cancelAll"
+                    name="options"
+                    (ngModelChange)="radioChanged()"
+                />
+                <label>{{ 'order.cancel-specified-items' | translate }}</label>
+            </clr-radio-wrapper>
+        </ng-container>
         <label class="clr-control-label">{{ 'order.cancellation-reason' | translate }}</label>
         <ng-select
             [items]="reasons"

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

@@ -3,6 +3,7 @@ import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import {
     CancelOrderInput,
     Dialog,
+    getAppConfig,
     I18nService,
     OrderDetailFragment,
     OrderLineInput,
@@ -20,7 +21,10 @@ export class CancelOrderDialogComponent implements OnInit, Dialog<CancelOrderInp
     resolveWith: (result?: CancelOrderInput) => void;
     reason: string;
     lineQuantities: { [lineId: string]: number } = {};
-    reasons: string[] = [_('order.cancel-reason-customer-request'), _('order.cancel-reason-not-available')];
+    reasons: string[] = getAppConfig().cancellationReasons ?? [
+        _('order.cancel-reason-customer-request'),
+        _('order.cancel-reason-not-available'),
+    ];
 
     get selectionCount(): number {
         return Object.values(this.lineQuantities).reduce((sum, n) => sum + n, 0);

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

@@ -53,7 +53,7 @@
                         </ng-container>
                     </div>
                 </td>
-                <td class="align-middle fulfil">
+                <td class="align-middle quantity-col">
                     <input
                         *ngIf="lineCanBeRefundedOrCancelled(line)"
                         [(ngModel)]="lineQuantities[line.id].quantity"
@@ -88,7 +88,7 @@
             </tr>
         </table>
     </div>
-    <div class="refund-details mt4">
+    <div class="refund-details mt4" [class.faded]="!isRefunding() && !isCancelling()">
         <div>
             <label class="clr-control-label">{{ 'order.refund-cancellation-reason' | translate }}</label>
             <ng-select

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

@@ -18,6 +18,9 @@
         color: var(--color-grey-300);
     }
 }
+.quantity-col {
+    background-color: var(--color-warning-100);
+}
 .cancel-checkbox-wrapper {
     display: flex;
     align-items: center;
@@ -31,6 +34,9 @@ clr-checkbox-wrapper {
 .refund-details {
     display: flex;
     justify-content: space-between;
+    &.faded {
+        opacity: 0.5;
+    }
 }
 .totals {
     margin-top: 48px;

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

@@ -3,6 +3,7 @@ import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import {
     CancelOrderInput,
     Dialog,
+    getAppConfig,
     I18nService,
     OrderDetail,
     OrderDetailFragment,
@@ -30,7 +31,10 @@ export class RefundOrderDialogComponent
     lineQuantities: { [lineId: string]: SelectionLine } = {};
     refundShipping = false;
     adjustment = 0;
-    reasons: string[] = [_('order.refund-reason-customer-request'), _('order.refund-reason-not-available')];
+    reasons = getAppConfig().cancellationReasons ?? [
+        _('order.refund-reason-customer-request'),
+        _('order.refund-reason-not-available'),
+    ];
 
     constructor(private i18nService: I18nService) {
         this.reasons = this.reasons.map(r => this.i18nService.translate(r));

packages/admin-ui/src/lib/static/vendure-ui-config.json

@@ -1,12 +1,27 @@
 {
-  "apiHost": "http://localhost",
-  "apiPort": "3000",
-  "adminApiPath": "admin-api",
-  "tokenMethod": "bearer",
-  "authTokenHeaderKey": "vendure-auth-token",
-  "defaultLanguage": "en",
-  "availableLanguages": ["en", "es", "zh_Hant", "zh_Hans", "pl", "de", "pt_BR", "pt_PT", "cs", "fr", "ru", "uk", "it"],
-  "brand": "",
-  "hideVendureBranding": false,
-  "hideVersion": false
+    "apiHost": "http://localhost",
+    "apiPort": "3000",
+    "adminApiPath": "admin-api",
+    "tokenMethod": "bearer",
+    "authTokenHeaderKey": "vendure-auth-token",
+    "defaultLanguage": "en",
+    "availableLanguages": [
+        "en",
+        "es",
+        "zh_Hant",
+        "zh_Hans",
+        "pl",
+        "de",
+        "pt_BR",
+        "pt_PT",
+        "cs",
+        "fr",
+        "ru",
+        "uk",
+        "it"
+    ],
+    "brand": "",
+    "hideVendureBranding": false,
+    "hideVersion": false,
+    "cancellationReasons": ["order.cancel-reason-customer-request", "order.cancel-reason-not-available"]
 }

packages/common/src/shared-types.ts

@@ -293,6 +293,16 @@ export interface AdminUiConfig {
      * @default false
      */
     hideVersion?: boolean;
+    /**
+     * @description
+     * Allows you to provide default reasons for a refund or cancellation. This will be used in the
+     * refund/cancel dialog. The values can be literal strings (e.g. "Not in stock") or translation
+     * tokens (see [Adding Admin UI Translations](/docs/plugins/extending-the-admin-ui/adding-ui-translations/)).
+     *
+     * @since 1.5.0
+     * @default ['order.cancel-reason-customer-request', 'order.cancel-reason-not-available']
+     */
+    cancellationReasons?: string[];
 }
 
 /**