@vendure/admin-ui 1.7.3 → 1.8.0

package/fesm2015/vendure-admin-ui-order.js

@@ -1,2607 +0,0 @@
-import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, ChangeDetectorRef, EventEmitter, Input, Output, Injectable, ElementRef, ViewChildren, HostBinding, NgModule } from '@angular/core';
-import { FormGroup, FormControl, Validators, FormBuilder, FormArray } from '@angular/forms';
-import * as i1 from '@vendure/admin-ui/core';
-import { DataService, getAppConfig, I18nService, configurableDefinitionToInstance, GlobalFlag, configurableOperationValueIsValid, toConfigurableOperationInput, ServerConfigService, ModalService, HistoryEntryType, SortOrder, NotificationService, BaseDetailComponent, EditNoteDialogComponent, transformRelationCustomFieldInputs, BaseListComponent, LogicalOperator, LocalStorageService, AdjustmentType, BaseEntityResolver, createResolveData, CanDeactivateDetailGuard, detailBreadcrumb, SharedModule } from '@vendure/admin-ui/core';
-import { marker } from '@biesbjerg/ngx-translate-extract-marker';
-import { isObject, summate, assertNever, notNullOrUndefined } from '@vendure/common/lib/shared-utils';
-import * as i1$1 from '@angular/router';
-import { Router, ActivatedRoute, RouterModule } from '@angular/router';
-import { EMPTY, Subject, of, concat, merge, BehaviorSubject } from 'rxjs';
-import { switchMap, catchError, retryWhen, delay, take, map, startWith, mapTo, takeUntil, distinctUntilChanged, shareReplay, filter, debounceTime, tap } from 'rxjs/operators';
-import { simpleDeepClone } from '@vendure/common/lib/simple-deep-clone';
-
-class AddManualPaymentDialogComponent {
-    constructor(dataService) {
-        this.dataService = dataService;
-        this.form = new FormGroup({
-            method: new FormControl('', Validators.required),
-            transactionId: new FormControl('', Validators.required),
-        });
-    }
-    ngOnInit() {
-        this.paymentMethods$ = this.dataService.settings
-            .getPaymentMethods(999)
-            .mapSingle(data => data.paymentMethods.items);
-    }
-    submit() {
-        const formValue = this.form.value;
-        this.resolveWith({
-            method: formValue.method,
-            transactionId: formValue.transactionId,
-        });
-    }
-    cancel() {
-        this.resolveWith();
-    }
-}
-AddManualPaymentDialogComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'vdr-add-manual-payment-dialog',
-                template: "<ng-template vdrDialogTitle>{{ 'order.add-payment-to-order' | translate }}</ng-template>\r\n<form [formGroup]=\"form\">\r\n    <vdr-form-field [label]=\"'order.payment-method' | translate\" for=\"method\">\r\n        <ng-select\r\n            [items]=\"paymentMethods$ | async\"\r\n            bindLabel=\"code\"\r\n            autofocus\r\n            bindValue=\"code\"\r\n            [addTag]=\"true\"\r\n            formControlName=\"method\"\r\n        ></ng-select>\r\n    </vdr-form-field>\r\n    <vdr-form-field [label]=\"'order.transaction-id' | translate\" for=\"transactionId\">\r\n        <input id=\"transactionId\" type=\"text\" formControlName=\"transactionId\" />\r\n    </vdr-form-field>\r\n</form>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"submit()\" class=\"btn btn-primary\" [disabled]=\"form.invalid || form.pristine\">\r\n        {{ 'order.add-payment' | translate }}  ({{ outstandingAmount | localeCurrency: currencyCode }})\r\n    </button>\r\n</ng-template>\r\n",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [".ng-select{min-width:100%}\n"]
-            },] }
-];
-AddManualPaymentDialogComponent.ctorParameters = () => [
-    { type: DataService }
-];
-
-class CancelOrderDialogComponent {
-    constructor(i18nService) {
-        var _a;
-        this.i18nService = i18nService;
-        this.cancelAll = true;
-        this.lineQuantities = {};
-        this.reasons = (_a = getAppConfig().cancellationReasons) !== null && _a !== void 0 ? _a : [
-            marker('order.cancel-reason-customer-request'),
-            marker('order.cancel-reason-not-available'),
-        ];
-        this.reasons = this.reasons.map(r => this.i18nService.translate(r));
-    }
-    get selectionCount() {
-        return Object.values(this.lineQuantities).reduce((sum, n) => sum + n, 0);
-    }
-    ngOnInit() {
-        this.lineQuantities = this.order.lines.reduce((result, line) => {
-            return Object.assign(Object.assign({}, result), { [line.id]: line.quantity });
-        }, {});
-    }
-    radioChanged() {
-        if (this.cancelAll) {
-            for (const line of this.order.lines) {
-                this.lineQuantities[line.id] = line.quantity;
-            }
-        }
-        else {
-            for (const line of this.order.lines) {
-                this.lineQuantities[line.id] = 0;
-            }
-        }
-    }
-    checkIfAllSelected() {
-        var _a;
-        for (const [lineId, quantity] of Object.entries(this.lineQuantities)) {
-            const quantityInOrder = (_a = this.order.lines.find(line => line.id === lineId)) === null || _a === void 0 ? void 0 : _a.quantity;
-            if (quantityInOrder && quantity < quantityInOrder) {
-                return;
-            }
-        }
-        // If we got here, all of the selected quantities are equal to the order
-        // line quantities, i.e. everything is selected.
-        this.cancelAll = true;
-    }
-    select() {
-        this.resolveWith({
-            orderId: this.order.id,
-            lines: this.getLineInputs(),
-            reason: this.reason,
-            cancelShipping: this.cancelAll,
-        });
-    }
-    cancel() {
-        this.resolveWith();
-    }
-    getLineInputs() {
-        if (this.order.active) {
-            return;
-        }
-        return Object.entries(this.lineQuantities)
-            .map(([orderLineId, quantity]) => ({
-            orderLineId,
-            quantity,
-        }))
-            .filter(l => 0 < l.quantity);
-    }
-}
-CancelOrderDialogComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'vdr-cancel-order-dialog',
-                template: "<ng-template vdrDialogTitle>{{ 'order.cancel-order' | translate }}</ng-template>\r\n\r\n<div class=\"fulfillment-wrapper\">\r\n    <div class=\"order-lines\">\r\n        <table class=\"table\">\r\n            <thead>\r\n                <tr>\r\n                    <th></th>\r\n                    <th>{{ 'order.product-name' | translate }}</th>\r\n                    <th>{{ 'order.product-sku' | translate }}</th>\r\n                    <th>{{ 'order.quantity' | translate }}</th>\r\n                    <th>{{ 'order.unit-price' | translate }}</th>\r\n                    <th>{{ 'order.cancel' | translate }}</th>\r\n                </tr>\r\n            </thead>\r\n            <tr\r\n                *ngFor=\"let line of order.lines\"\r\n                class=\"order-line\"\r\n                [class.is-disabled]=\"cancelAll\"\r\n                [class.is-cancelled]=\"line.quantity === 0\"\r\n            >\r\n                <td class=\"align-middle thumb\">\r\n                    <img [src]=\"line.featuredAsset | assetPreview: 'tiny'\" />\r\n                </td>\r\n                <td class=\"align-middle name\">{{ line.productVariant.name }}</td>\r\n                <td class=\"align-middle sku\">{{ line.productVariant.sku }}</td>\r\n                <td class=\"align-middle quantity\">{{ line.quantity }}</td>\r\n                <td class=\"align-middle quantity\">\r\n                    {{ line.unitPriceWithTax | localeCurrency: order.currencyCode }}\r\n                </td>\r\n                <td class=\"align-middle fulfil\">\r\n                    <input\r\n                        *ngIf=\"line.quantity > 0 && !order.active; else nonEditable\"\r\n                        [(ngModel)]=\"lineQuantities[line.id]\"\r\n                        (input)=\"checkIfAllSelected()\"\r\n                        [disabled]=\"cancelAll\"\r\n                        type=\"number\"\r\n                        [max]=\"line.quantity\"\r\n                        min=\"0\"\r\n                    />\r\n                    <ng-template #nonEditable>{{ line.quantity }}</ng-template>\r\n                </td>\r\n            </tr>\r\n        </table>\r\n    </div>\r\n    <div class=\"cancellation-details\">\r\n        <ng-container *ngIf=\"order.active !== true\">\r\n            <clr-radio-wrapper>\r\n                <input\r\n                    type=\"radio\"\r\n                    clrRadio\r\n                    [value]=\"true\"\r\n                    [(ngModel)]=\"cancelAll\"\r\n                    name=\"options\"\r\n                    (ngModelChange)=\"radioChanged()\"\r\n                />\r\n                <label>{{ 'order.cancel-entire-order' | translate }}</label>\r\n            </clr-radio-wrapper>\r\n            <clr-radio-wrapper>\r\n                <input\r\n                    type=\"radio\"\r\n                    clrRadio\r\n                    [value]=\"false\"\r\n                    [(ngModel)]=\"cancelAll\"\r\n                    name=\"options\"\r\n                    (ngModelChange)=\"radioChanged()\"\r\n                />\r\n                <label>{{ 'order.cancel-specified-items' | translate }}</label>\r\n            </clr-radio-wrapper>\r\n        </ng-container>\r\n        <label class=\"clr-control-label\">{{ 'order.cancellation-reason' | translate }}</label>\r\n        <ng-select\r\n            [items]=\"reasons\"\r\n            bindLabel=\"name\"\r\n            autofocus\r\n            bindValue=\"id\"\r\n            [addTag]=\"true\"\r\n            [(ngModel)]=\"reason\"\r\n        ></ng-select>\r\n    </div>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button\r\n        type=\"submit\"\r\n        (click)=\"select()\"\r\n        [disabled]=\"!reason || (!order.active && selectionCount === 0)\"\r\n        class=\"btn btn-primary\"\r\n    >\r\n        <ng-container *ngIf=\"!order.active\">\r\n            {{ 'order.cancel-selected-items' | translate }}\r\n        </ng-container>\r\n        <ng-container *ngIf=\"order.active\">\r\n            {{ 'order.cancel-order' | translate }}\r\n        </ng-container>\r\n    </button>\r\n</ng-template>\r\n",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [":host{height:100%;display:flex;min-height:64vh}.fulfillment-wrapper{flex:1}@media screen and (min-width: 768px){.fulfillment-wrapper{display:flex;flex-direction:row}}@media screen and (min-width: 768px){.fulfillment-wrapper .cancellation-details{margin-top:0;margin-left:24px;width:250px}}.fulfillment-wrapper .order-lines{flex:1;overflow-y:auto}.fulfillment-wrapper .order-lines table{margin-top:0}.fulfillment-wrapper tr.ignore{color:var(--color-grey-300)}.fulfillment-wrapper .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}.fulfillment-wrapper .is-disabled td,.fulfillment-wrapper .is-disabled td input{background-color:var(--color-component-bg-200)}\n"]
-            },] }
-];
-CancelOrderDialogComponent.ctorParameters = () => [
-    { type: I18nService }
-];
-
-class FulfillOrderDialogComponent {
-    constructor(dataService, changeDetector) {
-        this.dataService = dataService;
-        this.changeDetector = changeDetector;
-        this.fulfillmentHandlerControl = new FormControl();
-        this.fulfillmentQuantities = {};
-    }
-    ngOnInit() {
-        this.dataService.settings.getGlobalSettings().single$.subscribe(({ globalSettings }) => {
-            this.fulfillmentQuantities = this.order.lines.reduce((result, line) => {
-                const fulfillCount = this.getFulfillableCount(line, globalSettings.trackInventory);
-                return Object.assign(Object.assign({}, result), { [line.id]: { fulfillCount, max: fulfillCount } });
-            }, {});
-            this.changeDetector.markForCheck();
-        });
-        this.dataService.shippingMethod
-            .getShippingMethodOperations()
-            .mapSingle(data => data.fulfillmentHandlers)
-            .subscribe(handlers => {
-            this.fulfillmentHandlerDef =
-                handlers.find(h => { var _a, _b; return h.code === ((_b = (_a = this.order.shippingLines[0]) === null || _a === void 0 ? void 0 : _a.shippingMethod) === null || _b === void 0 ? void 0 : _b.fulfillmentHandlerCode); }) || handlers[0];
-            this.fulfillmentHandler = configurableDefinitionToInstance(this.fulfillmentHandlerDef);
-            this.fulfillmentHandlerControl.patchValue(this.fulfillmentHandler);
-            this.changeDetector.markForCheck();
-        });
-    }
-    getFulfillableCount(line, globalTrackInventory) {
-        const { trackInventory, stockOnHand } = line.productVariant;
-        const effectiveTracInventory = trackInventory === GlobalFlag.INHERIT ? globalTrackInventory : trackInventory === GlobalFlag.TRUE;
-        const unfulfilledCount = this.getUnfulfilledCount(line);
-        return effectiveTracInventory ? Math.min(unfulfilledCount, stockOnHand) : unfulfilledCount;
-    }
-    getUnfulfilledCount(line) {
-        var _a, _b;
-        const fulfilled = (_b = (_a = line.fulfillments) === null || _a === void 0 ? void 0 : _a.map(f => f.summary).flat().filter(row => row.orderLine.id === line.id).reduce((sum, row) => sum + row.quantity, 0)) !== null && _b !== void 0 ? _b : 0;
-        return line.quantity - fulfilled;
-    }
-    canSubmit() {
-        const totalCount = Object.values(this.fulfillmentQuantities).reduce((total, { fulfillCount }) => total + fulfillCount, 0);
-        const formIsValid = configurableOperationValueIsValid(this.fulfillmentHandlerDef, this.fulfillmentHandlerControl.value) && this.fulfillmentHandlerControl.valid;
-        return formIsValid && 0 < totalCount;
-    }
-    select() {
-        const lines = Object.entries(this.fulfillmentQuantities).map(([orderLineId, { fulfillCount }]) => ({
-            orderLineId,
-            quantity: fulfillCount,
-        }));
-        this.resolveWith({
-            lines,
-            handler: toConfigurableOperationInput(this.fulfillmentHandler, this.fulfillmentHandlerControl.value),
-        });
-    }
-    cancel() {
-        this.resolveWith();
-    }
-}
-FulfillOrderDialogComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'vdr-fulfill-order-dialog',
-                template: "<ng-template vdrDialogTitle>{{ 'order.fulfill-order' | translate }}</ng-template>\r\n\r\n<div class=\"fulfillment-wrapper\">\r\n    <div class=\"order-table\">\r\n        <table class=\"table\">\r\n            <thead>\r\n                <tr>\r\n                    <th></th>\r\n                    <th>{{ 'order.product-name' | translate }}</th>\r\n                    <th>{{ 'order.product-sku' | translate }}</th>\r\n                    <th>{{ 'order.unfulfilled' | translate }}</th>\r\n                    <th>{{ 'catalog.stock-on-hand' | translate }}</th>\r\n                    <th>{{ 'order.fulfill' | translate }}</th>\r\n                </tr>\r\n            </thead>\r\n            <tr\r\n                *ngFor=\"let line of order.lines\"\r\n                class=\"order-line\"\r\n                [class.ignore]=\"getUnfulfilledCount(line) === 0\"\r\n            >\r\n                <td class=\"align-middle thumb\">\r\n                    <img *ngIf=\"line.featuredAsset\" [src]=\"line.featuredAsset | assetPreview: 'tiny'\" />\r\n                </td>\r\n                <td class=\"align-middle name\">{{ line.productVariant.name }}</td>\r\n                <td class=\"align-middle sku\">{{ line.productVariant.sku }}</td>\r\n                <td class=\"align-middle quantity\">{{ getUnfulfilledCount(line) }}</td>\r\n                <td class=\"align-middle quantity\">{{ line.productVariant.stockOnHand }}</td>\r\n                <td class=\"align-middle fulfil\">\r\n                    <input\r\n                        *ngIf=\"fulfillmentQuantities[line.id]\"\r\n                        [disabled]=\"getUnfulfilledCount(line) === 0\"\r\n                        [(ngModel)]=\"fulfillmentQuantities[line.id].fulfillCount\"\r\n                        type=\"number\"\r\n                        [max]=\"fulfillmentQuantities[line.id].max\"\r\n                        min=\"0\"\r\n                    />\r\n                </td>\r\n            </tr>\r\n        </table>\r\n    </div>\r\n    <div class=\"shipping-details\">\r\n        <vdr-formatted-address [address]=\"order.shippingAddress\"></vdr-formatted-address>\r\n        <h6>{{ 'order.shipping-method' | translate }}</h6>\r\n        {{ order.shippingLines[0]?.shippingMethod?.name }}\r\n        <strong>{{ order.shipping | localeCurrency: order.currencyCode }}</strong>\r\n        <vdr-configurable-input\r\n            [operationDefinition]=\"fulfillmentHandlerDef\"\r\n            [operation]=\"fulfillmentHandler\"\r\n            [formControl]=\"fulfillmentHandlerControl\"\r\n            [removable]=\"false\"\r\n        ></vdr-configurable-input>\r\n    </div>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"select()\" [disabled]=\"!canSubmit()\" class=\"btn btn-primary\">\r\n        {{ 'order.create-fulfillment' | translate }}\r\n    </button>\r\n</ng-template>\r\n",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [":host{height:100%;display:flex;min-height:64vh}.fulfillment-wrapper{flex:1}@media screen and (min-width: 768px){.fulfillment-wrapper{display:flex;flex-direction:row}}.fulfillment-wrapper .shipping-details{margin-top:24px}@media screen and (min-width: 768px){.fulfillment-wrapper .shipping-details{margin-top:0;margin-left:24px;width:250px}}.fulfillment-wrapper .shipping-details clr-input-container{margin-top:24px}.fulfillment-wrapper .order-table{flex:1;overflow-y:auto}.fulfillment-wrapper .order-table table{margin-top:0}.fulfillment-wrapper tr.ignore{color:var(--color-grey-300)}\n"]
-            },] }
-];
-FulfillOrderDialogComponent.ctorParameters = () => [
-    { type: DataService },
-    { type: ChangeDetectorRef }
-];
-
-class FulfillmentCardComponent {
-    constructor() {
-        this.transitionState = new EventEmitter();
-    }
-    nextSuggestedState() {
-        var _a;
-        if (!this.fulfillment) {
-            return;
-        }
-        const { nextStates } = this.fulfillment;
-        const namedStateOrDefault = (targetState) => nextStates.includes(targetState) ? targetState : nextStates[0];
-        switch ((_a = this.fulfillment) === null || _a === void 0 ? void 0 : _a.state) {
-            case 'Pending':
-                return namedStateOrDefault('Shipped');
-            case 'Shipped':
-                return namedStateOrDefault('Delivered');
-            default:
-                return nextStates.find(s => s !== 'Cancelled');
-        }
-    }
-    nextOtherStates() {
-        if (!this.fulfillment) {
-            return [];
-        }
-        const suggested = this.nextSuggestedState();
-        return this.fulfillment.nextStates.filter(s => s !== suggested);
-    }
-}
-FulfillmentCardComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'vdr-fulfillment-card',
-                template: "<div class=\"card\">\r\n    <div class=\"card-header fulfillment-header\">\r\n        <div>{{ 'order.fulfillment' | translate }}</div>\r\n        <div class=\"fulfillment-state\">\r\n            <vdr-fulfillment-state-label [state]=\"fulfillment?.state\"></vdr-fulfillment-state-label>\r\n        </div>\r\n    </div>\r\n    <div class=\"card-block\">\r\n        <vdr-fulfillment-detail\r\n            *ngIf=\"!!fulfillment\"\r\n            [fulfillmentId]=\"fulfillment?.id\"\r\n            [order]=\"order\"\r\n        ></vdr-fulfillment-detail>\r\n    </div>\r\n    <div class=\"card-footer\" *ngIf=\"fulfillment?.nextStates.length\">\r\n        <ng-container *ngIf=\"nextSuggestedState() as suggestedState\">\r\n            <button class=\"btn btn-sm btn-primary\" (click)=\"transitionState.emit(suggestedState)\">\r\n                {{ 'order.set-fulfillment-state' | translate: { state: (suggestedState | stateI18nToken | translate) } }}\r\n            </button>\r\n        </ng-container>\r\n        <vdr-dropdown>\r\n            <button class=\"icon-button\" vdrDropdownTrigger>\r\n                <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n            </button>\r\n            <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                <ng-container *ngFor=\"let nextState of nextOtherStates()\">\r\n                    <button\r\n                        type=\"button\"\r\n                        class=\"btn\"\r\n                        vdrDropdownItem\r\n                        (click)=\"transitionState.emit(nextState)\"\r\n                    >\r\n                        <ng-container *ngIf=\"nextState !== 'Cancelled'; else cancel\">\r\n                            <clr-icon shape=\"step-forward-2\"></clr-icon>\r\n                            {{ 'order.transition-to-state' | translate: { state: (nextState | stateI18nToken | translate) } }}\r\n                        </ng-container>\r\n                        <ng-template #cancel>\r\n                            <clr-icon shape=\"error-standard\" class=\"is-error\"></clr-icon>\r\n                            {{ 'order.cancel-fulfillment' | translate }}\r\n                        </ng-template>\r\n                    </button>\r\n                </ng-container>\r\n            </vdr-dropdown-menu>\r\n        </vdr-dropdown>\r\n    </div>\r\n</div>\r\n",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [".fulfillment-header{display:flex;justify-content:space-between;align-items:center}.card-footer{display:flex;align-items:center;justify-content:flex-end}\n"]
-            },] }
-];
-FulfillmentCardComponent.propDecorators = {
-    fulfillment: [{ type: Input }],
-    order: [{ type: Input }],
-    transitionState: [{ type: Output }]
-};
-
-class FulfillmentDetailComponent {
-    constructor(serverConfigService) {
-        this.serverConfigService = serverConfigService;
-        this.customFieldConfig = [];
-        this.customFieldFormGroup = new FormGroup({});
-    }
-    ngOnInit() {
-        this.customFieldConfig = this.serverConfigService.getCustomFieldsFor('Fulfillment');
-    }
-    ngOnChanges(changes) {
-        this.buildCustomFieldsFormGroup();
-    }
-    get fulfillment() {
-        return this.order.fulfillments && this.order.fulfillments.find(f => f.id === this.fulfillmentId);
-    }
-    get items() {
-        var _a, _b;
-        return ((_b = (_a = this.fulfillment) === null || _a === void 0 ? void 0 : _a.summary.map(row => {
-            var _a, _b;
-            return {
-                name: (_b = (_a = this.order.lines.find(line => line.id === row.orderLine.id)) === null || _a === void 0 ? void 0 : _a.productVariant.name) !== null && _b !== void 0 ? _b : '',
-                quantity: row.quantity,
-            };
-        })) !== null && _b !== void 0 ? _b : []);
-    }
-    buildCustomFieldsFormGroup() {
-        const customFields = this.fulfillment.customFields;
-        for (const fieldDef of this.serverConfigService.getCustomFieldsFor('Fulfillment')) {
-            this.customFieldFormGroup.addControl(fieldDef.name, new FormControl(customFields[fieldDef.name]));
-        }
-    }
-    customFieldIsObject(customField) {
-        return Array.isArray(customField) || isObject(customField);
-    }
-}
-FulfillmentDetailComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'vdr-fulfillment-detail',
-                template: "<vdr-labeled-data [label]=\"'common.created-at' | translate\">\r\n    {{ fulfillment?.createdAt | localeDate: 'medium' }}\r\n</vdr-labeled-data>\r\n<vdr-labeled-data [label]=\"'order.fulfillment-method' | translate\">\r\n    {{ fulfillment?.method }}\r\n</vdr-labeled-data>\r\n<vdr-labeled-data *ngIf=\"fulfillment?.trackingCode\" [label]=\"'order.tracking-code' | translate\">\r\n    {{ fulfillment?.trackingCode }}\r\n</vdr-labeled-data>\r\n<vdr-labeled-data [label]=\"'order.contents' | translate\">\r\n    <vdr-simple-item-list [items]=\"items\"></vdr-simple-item-list>\r\n</vdr-labeled-data>\r\n<ng-container *ngFor=\"let customField of customFieldConfig\">\r\n    <vdr-custom-field-control\r\n        *ngIf=\"customFieldFormGroup.get(customField.name)\"\r\n        [readonly]=\"true\"\r\n        [compact]=\"true\"\r\n        [customField]=\"customField\"\r\n        [customFieldsFormGroup]=\"customFieldFormGroup\"\r\n    ></vdr-custom-field-control>\r\n</ng-container>\r\n",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [""]
-            },] }
-];
-FulfillmentDetailComponent.ctorParameters = () => [
-    { type: ServerConfigService }
-];
-FulfillmentDetailComponent.propDecorators = {
-    fulfillmentId: [{ type: Input }],
-    order: [{ type: Input }]
-};
-
-class FulfillmentStateLabelComponent {
-    get chipColorType() {
-        switch (this.state) {
-            case 'Pending':
-            case 'Shipped':
-                return 'warning';
-            case 'Delivered':
-                return 'success';
-            case 'Cancelled':
-                return 'error';
-        }
-    }
-}
-FulfillmentStateLabelComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'vdr-fulfillment-state-label',
-                template: "<vdr-chip [title]=\"'order.payment-state' | translate\" [colorType]=\"chipColorType\">\r\n    <clr-icon shape=\"check-circle\" *ngIf=\"state === 'Delivered'\"></clr-icon>\r\n    {{ state | stateI18nToken | translate }}\r\n</vdr-chip>\r\n",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [":host{font-size:14px}\n"]
-            },] }
-];
-FulfillmentStateLabelComponent.propDecorators = {
-    state: [{ type: Input }]
-};
-
-class LineFulfillmentComponent {
-    constructor() {
-        this.fulfilledCount = 0;
-        this.fulfillments = [];
-    }
-    ngOnChanges(changes) {
-        if (this.line) {
-            this.fulfilledCount = this.getDeliveredCount(this.line);
-            this.fulfillmentStatus = this.getFulfillmentStatus(this.fulfilledCount, this.line.items.length);
-            this.fulfillments = this.getFulfillments(this.line);
-        }
-    }
-    /**
-     * Returns the number of items in an OrderLine which are fulfilled.
-     */
-    getDeliveredCount(line) {
-        var _a, _b;
-        return ((_b = (_a = line.fulfillments) === null || _a === void 0 ? void 0 : _a.reduce((sum, fulfillment) => { var _a, _b; return sum + ((_b = (_a = fulfillment.summary.find(s => s.orderLine.id === line.id)) === null || _a === void 0 ? void 0 : _a.quantity) !== null && _b !== void 0 ? _b : 0); }, 0)) !== null && _b !== void 0 ? _b : 0);
-    }
-    getFulfillmentStatus(fulfilledCount, lineQuantity) {
-        if (fulfilledCount === lineQuantity) {
-            return 'full';
-        }
-        if (0 < fulfilledCount && fulfilledCount < lineQuantity) {
-            return 'partial';
-        }
-        return 'none';
-    }
-    getFulfillments(line) {
-        var _a, _b;
-        return ((_b = (_a = line.fulfillments) === null || _a === void 0 ? void 0 : _a.map(fulfillment => {
-            var _a;
-            const summaryLine = fulfillment.summary.find(s => s.orderLine.id === line.id);
-            return {
-                count: (_a = summaryLine === null || summaryLine === void 0 ? void 0 : summaryLine.quantity) !== null && _a !== void 0 ? _a : 0,
-                fulfillment,
-            };
-        })) !== null && _b !== void 0 ? _b : []);
-    }
-}
-LineFulfillmentComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'vdr-line-fulfillment',
-                template: "<vdr-dropdown class=\"search-settings-menu\" *ngIf=\"fulfilledCount || orderState === 'PartiallyDelivered'\">\r\n    <button type=\"button\" class=\"icon-button\" vdrDropdownTrigger>\r\n        <clr-icon *ngIf=\"fulfillmentStatus === 'full'\" class=\"item-fulfilled\" shape=\"check-circle\"></clr-icon>\r\n        <clr-icon\r\n            *ngIf=\"fulfillmentStatus === 'partial'\"\r\n            class=\"item-partially-fulfilled\"\r\n            shape=\"check-circle\"\r\n        ></clr-icon>\r\n        <clr-icon\r\n            *ngIf=\"fulfillmentStatus === 'none'\"\r\n            class=\"item-not-fulfilled\"\r\n            shape=\"exclamation-circle\"\r\n        ></clr-icon>\r\n    </button>\r\n    <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n        <label class=\"dropdown-header\" *ngIf=\"fulfillmentStatus === 'full'\">\r\n            {{ 'order.line-fulfillment-all' | translate }}\r\n        </label>\r\n        <label class=\"dropdown-header\" *ngIf=\"fulfillmentStatus === 'partial'\">\r\n            {{\r\n                'order.line-fulfillment-partial' | translate: { total: line.quantity, count: fulfilledCount }\r\n            }}\r\n        </label>\r\n        <label class=\"dropdown-header\" *ngIf=\"fulfillmentStatus === 'none'\">\r\n            {{ 'order.line-fulfillment-none' | translate }}\r\n        </label>\r\n        <div class=\"fulfillment-detail\" *ngFor=\"let item of fulfillments\">\r\n            <div class=\"fulfillment-title\">\r\n                {{ 'order.fulfillment' | translate }} #{{ item.fulfillment.id }} ({{\r\n                    'order.item-count' | translate: { count: item.count }\r\n                }})\r\n            </div>\r\n            <vdr-labeled-data [label]=\"'common.created-at' | translate\">\r\n                {{ item.fulfillment.createdAt | localeDate: 'medium' }}\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data [label]=\"'order.fulfillment-method' | translate\">\r\n                {{ item.fulfillment.method }}\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data\r\n                *ngIf=\"item.fulfillment.trackingCode\"\r\n                [label]=\"'order.tracking-code' | translate\"\r\n            >\r\n                {{ item.fulfillment.trackingCode }}\r\n            </vdr-labeled-data>\r\n        </div>\r\n    </vdr-dropdown-menu>\r\n</vdr-dropdown>\r\n",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [".item-fulfilled{color:var(--color-success-500)}.item-partially-fulfilled{color:var(--color-warning-500)}.item-not-fulfilled{color:var(--color-error-500)}.fulfillment-detail{margin:6px 12px}.fulfillment-detail:not(:last-of-type){border-bottom:1px dashed var(--color-component-border-200)}\n"]
-            },] }
-];
-LineFulfillmentComponent.propDecorators = {
-    line: [{ type: Input }],
-    orderState: [{ type: Input }]
-};
-
-class LineRefundsComponent {
-    getRefundedCount() {
-        var _a, _b;
-        const refunds = (_b = (_a = this.payments) === null || _a === void 0 ? void 0 : _a.reduce((all, payment) => [...all, ...payment.refunds], [])) !== null && _b !== void 0 ? _b : [];
-        return this.line.items.filter(i => {
-            if (i.refundId === null && !i.cancelled) {
-                return false;
-            }
-            if (i.refundId) {
-                const refund = refunds.find(r => r.id === i.refundId);
-                if ((refund === null || refund === void 0 ? void 0 : refund.state) === 'Failed') {
-                    return false;
-                }
-                else {
-                    return true;
-                }
-            }
-            return false;
-        }).length;
-    }
-}
-LineRefundsComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'vdr-line-refunds',
-                template: "<span *ngIf=\"getRefundedCount()\" [title]=\"'order.refunded-count' | translate: { count: getRefundedCount() }\">\r\n    <clr-icon shape=\"redo\" class=\"is-solid\" dir=\"down\"></clr-icon>\r\n</span>\r\n",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [":host{color:var(--color-error-500)}\n"]
-            },] }
-];
-LineRefundsComponent.propDecorators = {
-    line: [{ type: Input }],
-    payments: [{ type: Input }]
-};
-
-class ModificationDetailComponent {
-    constructor() {
-        this.addedItems = new Map();
-        this.removedItems = new Map();
-    }
-    ngOnChanges() {
-        const { added, removed } = this.getModifiedLines();
-        this.addedItems = added;
-        this.removedItems = removed;
-    }
-    getSurcharge(id) {
-        return this.order.surcharges.find(m => m.id === id);
-    }
-    getAddedItems() {
-        return [...this.addedItems.entries()].map(([line, count]) => {
-            return { name: line.productVariant.name, quantity: count };
-        });
-    }
-    getRemovedItems() {
-        return [...this.removedItems.entries()].map(([line, count]) => {
-            return { name: line.productVariant.name, quantity: count };
-        });
-    }
-    getModifiedLines() {
-        var _a, _b;
-        const added = new Map();
-        const removed = new Map();
-        for (const _item of this.modification.orderItems || []) {
-            const result = this.getOrderLineAndItem(_item.id);
-            if (result) {
-                const { line, item } = result;
-                if (item.cancelled) {
-                    const count = (_a = removed.get(line)) !== null && _a !== void 0 ? _a : 0;
-                    removed.set(line, count + 1);
-                }
-                else {
-                    const count = (_b = added.get(line)) !== null && _b !== void 0 ? _b : 0;
-                    added.set(line, count + 1);
-                }
-            }
-        }
-        return { added, removed };
-    }
-    getOrderLineAndItem(itemId) {
-        for (const line of this.order.lines) {
-            const item = line.items.find(i => i.id === itemId);
-            if (item) {
-                return { line, item };
-            }
-        }
-    }
-}
-ModificationDetailComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'vdr-modification-detail',
-                template: "<vdr-labeled-data [label]=\"'common.ID' | translate\">{{ modification.id }}</vdr-labeled-data>\r\n<vdr-labeled-data *ngIf=\"modification.note\" [label]=\"'order.note' | translate\">{{\r\n    modification.note\r\n}}</vdr-labeled-data>\r\n<vdr-labeled-data *ngFor=\"let surcharge of modification.surcharges\" [label]=\"'order.surcharges' | translate\">\r\n    {{ getSurcharge(surcharge.id)?.description }}\r\n    {{ getSurcharge(surcharge.id)?.priceWithTax | localeCurrency: order.currencyCode }}</vdr-labeled-data\r\n>\r\n<vdr-labeled-data *ngIf=\"getAddedItems().length\" [label]=\"'order.added-items' | translate\">\r\n    <vdr-simple-item-list [items]=\"getAddedItems()\"></vdr-simple-item-list>\r\n</vdr-labeled-data>\r\n<vdr-labeled-data *ngIf=\"getRemovedItems().length\" [label]=\"'order.removed-items' | translate\">\r\n    <vdr-simple-item-list [items]=\"getRemovedItems()\"></vdr-simple-item-list>\r\n</vdr-labeled-data>\r\n",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [""]
-            },] }
-];
-ModificationDetailComponent.propDecorators = {
-    order: [{ type: Input }],
-    modification: [{ type: Input }]
-};
-
-class OrderCustomFieldsCardComponent {
-    constructor(formBuilder, modalService) {
-        this.formBuilder = formBuilder;
-        this.modalService = modalService;
-        this.customFieldsConfig = [];
-        this.customFieldValues = {};
-        this.updateClick = new EventEmitter();
-        this.editable = false;
-    }
-    ngOnInit() {
-        this.customFieldForm = this.formBuilder.group({});
-        for (const field of this.customFieldsConfig) {
-            this.customFieldForm.addControl(field.name, this.formBuilder.control(this.customFieldValues[field.name]));
-        }
-    }
-    onUpdateClick() {
-        this.updateClick.emit(this.customFieldForm.value);
-        this.customFieldForm.markAsPristine();
-        this.editable = false;
-    }
-    onCancelClick() {
-        if (this.customFieldForm.dirty) {
-            this.modalService
-                .dialog({
-                title: marker('catalog.confirm-cancel'),
-                buttons: [
-                    { type: 'secondary', label: marker('common.keep-editing') },
-                    { type: 'danger', label: marker('common.discard-changes'), returnValue: true },
-                ],
-            })
-                .subscribe(result => {
-                if (result) {
-                    this.customFieldForm.reset();
-                    this.customFieldForm.markAsPristine();
-                    this.editable = false;
-                }
-            });
-        }
-        else {
-            this.editable = false;
-        }
-    }
-}
-OrderCustomFieldsCardComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'vdr-order-custom-fields-card',
-                template: "<div class=\"card\" *ngIf=\"customFieldsConfig.length\">\r\n    <div class=\"card-header\">\r\n        {{ 'common.custom-fields' | translate }}\r\n    </div>\r\n    <div class=\"card-block\">\r\n        <div class=\"card-text custom-field-form\" [class.editable]=\"editable\">\r\n            <vdr-tabbed-custom-fields\r\n                entityName=\"Order\"\r\n                [customFields]=\"customFieldsConfig\"\r\n                [customFieldsFormGroup]=\"customFieldForm\"\r\n                [readonly]=\"!editable\"\r\n                [compact]=\"true\"\r\n            ></vdr-tabbed-custom-fields>\r\n        </div>\r\n    </div>\r\n    <div class=\"card-footer\">\r\n        <button class=\"btn btn-sm btn-secondary\" (click)=\"editable = true\" *ngIf=\"!editable\">\r\n            <clr-icon shape=\"pencil\"></clr-icon>\r\n            {{ 'common.edit' | translate }}\r\n        </button>\r\n        <button\r\n            class=\"btn btn-sm btn-primary\"\r\n            (click)=\"onUpdateClick()\"\r\n            *ngIf=\"editable\"\r\n            [disabled]=\"customFieldForm.pristine || customFieldForm.invalid\"\r\n        >\r\n            <clr-icon shape=\"check\"></clr-icon>\r\n            {{ 'common.update' | translate }}\r\n        </button>\r\n        <button\r\n            class=\"btn btn-sm btn-secondary\"\r\n            (click)=\"onCancelClick()\"\r\n            *ngIf=\"editable\"\r\n        >\r\n            <clr-icon shape=\"times\"></clr-icon>\r\n            {{ 'common.cancel' | translate }}\r\n        </button>\r\n    </div>\r\n</div>\r\n",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: ["vdr-custom-field-control{margin-bottom:6px;display:block}.custom-field-form ::ng-deep .clr-control-label{color:var(--color-grey-400)}.custom-field-form.editable ::ng-deep .clr-control-label{color:inherit}\n"]
-            },] }
-];
-OrderCustomFieldsCardComponent.ctorParameters = () => [
-    { type: FormBuilder },
-    { type: ModalService }
-];
-OrderCustomFieldsCardComponent.propDecorators = {
-    customFieldsConfig: [{ type: Input }],
-    customFieldValues: [{ type: Input }],
-    updateClick: [{ type: Output }]
-};
-
-class OrderStateSelectDialogComponent {
-    constructor() {
-        this.nextStates = [];
-        this.message = '';
-        this.selectedState = '';
-    }
-    select() {
-        if (this.selectedState) {
-            this.resolveWith(this.selectedState);
-        }
-    }
-    cancel() {
-        this.resolveWith();
-    }
-}
-OrderStateSelectDialogComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'vdr-order-state-select-dialog',
-                template: "<ng-template vdrDialogTitle>{{ 'order.select-state' | translate }}</ng-template>\r\n<p>{{ message | translate }}</p>\r\n<clr-select-container>\r\n    <select clrSelect name=\"state\" [(ngModel)]=\"selectedState\">\r\n        <option *ngFor=\"let state of nextStates\" [value]=\"state\">\r\n            {{ state | stateI18nToken | translate }}\r\n        </option>\r\n    </select>\r\n</clr-select-container>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"submit\" *ngIf=\"cancellable\" (click)=\"cancel()\" class=\"btn btn-secondary\">\r\n        {{ 'common.cancel' | translate }}\r\n    </button>\r\n    <button type=\"submit\" (click)=\"select()\" class=\"btn btn-primary\" [disabled]=\"!selectedState\">\r\n        {{ 'order.transition-to-state' | translate: { state: (selectedState | stateI18nToken | translate) } }}\r\n    </button>\r\n</ng-template>\r\n",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [""]
-            },] }
-];
-
-class OrderTransitionService {
-    constructor(dataService, modalService, notificationService, i18nService) {
-        this.dataService = dataService;
-        this.modalService = modalService;
-        this.notificationService = notificationService;
-        this.i18nService = i18nService;
-    }
-    /**
-     * Attempts to transition the Order to the last state it was in before it was transitioned
-     * to the "Modifying" state. If this fails, a manual prompt is used.
-     */
-    transitionToPreModifyingState(orderId, nextStates) {
-        return this.getPreModifyingState(orderId).pipe(switchMap(state => {
-            const manualTransitionOptions = {
-                orderId,
-                nextStates,
-                message: this.i18nService.translate(marker('order.unable-to-transition-to-state-try-another'), { state }),
-                cancellable: false,
-                retry: 10,
-            };
-            if (state) {
-                return this.transitionToStateOrThrow(orderId, state).pipe(catchError(err => this.manuallyTransitionToState(manualTransitionOptions)));
-            }
-            else {
-                return this.manuallyTransitionToState(manualTransitionOptions);
-            }
-        }));
-    }
-    /**
-     * Displays a modal for manually selecting the next state.
-     */
-    manuallyTransitionToState(options) {
-        return this.modalService
-            .fromComponent(OrderStateSelectDialogComponent, {
-            locals: {
-                nextStates: options.nextStates,
-                cancellable: options.cancellable,
-                message: options.message,
-            },
-            closable: false,
-            size: 'md',
-        })
-            .pipe(switchMap(result => {
-            if (result) {
-                return this.transitionToStateOrThrow(options.orderId, result);
-            }
-            else {
-                if (!options.cancellable) {
-                    throw new Error(`An order state must be selected`);
-                }
-                else {
-                    return EMPTY;
-                }
-            }
-        }), retryWhen(errors => errors.pipe(delay(2000), take(options.retry))));
-    }
-    /**
-     * Attempts to get the last state the Order was in before it was transitioned
-     * to the "Modifying" state.
-     */
-    getPreModifyingState(orderId) {
-        return this.dataService.order
-            .getOrderHistory(orderId, {
-            filter: {
-                type: {
-                    eq: HistoryEntryType.ORDER_STATE_TRANSITION,
-                },
-            },
-            sort: {
-                createdAt: SortOrder.DESC,
-            },
-        })
-            .mapSingle(result => result.order)
-            .pipe(map(result => {
-            const item = result === null || result === void 0 ? void 0 : result.history.items.find(i => i.data.to === 'Modifying');
-            if (item) {
-                return item.data.from;
-            }
-            else {
-                return;
-            }
-        }));
-    }
-    transitionToStateOrThrow(orderId, state) {
-        return this.dataService.order.transitionToState(orderId, state).pipe(map(({ transitionOrderToState }) => {
-            switch (transitionOrderToState === null || transitionOrderToState === void 0 ? void 0 : transitionOrderToState.__typename) {
-                case 'Order':
-                    return transitionOrderToState === null || transitionOrderToState === void 0 ? void 0 : transitionOrderToState.state;
-                case 'OrderStateTransitionError':
-                    this.notificationService.error(transitionOrderToState === null || transitionOrderToState === void 0 ? void 0 : transitionOrderToState.transitionError);
-                    throw new Error(transitionOrderToState === null || transitionOrderToState === void 0 ? void 0 : transitionOrderToState.transitionError);
-            }
-        }));
-    }
-}
-OrderTransitionService.ɵprov = i0.ɵɵdefineInjectable({ factory: function OrderTransitionService_Factory() { return new OrderTransitionService(i0.ɵɵinject(i1.DataService), i0.ɵɵinject(i1.ModalService), i0.ɵɵinject(i1.NotificationService), i0.ɵɵinject(i1.I18nService)); }, token: OrderTransitionService, providedIn: "root" });
-OrderTransitionService.decorators = [
-    { type: Injectable, args: [{
-                providedIn: 'root',
-            },] }
-];
-OrderTransitionService.ctorParameters = () => [
-    { type: DataService },
-    { type: ModalService },
-    { type: NotificationService },
-    { type: I18nService }
-];
-
-class OrderProcessGraphDialogComponent {
-    constructor(serverConfigService) {
-        this.serverConfigService = serverConfigService;
-        this.states = [];
-    }
-    ngOnInit() {
-        this.states = this.serverConfigService.getOrderProcessStates();
-    }
-}
-OrderProcessGraphDialogComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'vdr-order-process-graph-dialog',
-                template: "<ng-template vdrDialogTitle>{{ 'order.order-state-diagram' | translate }}</ng-template>\r\n\r\n<vdr-order-process-graph [states]=\"states\" [initialState]=\"activeState\"></vdr-order-process-graph>\r\n",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [""]
-            },] }
-];
-OrderProcessGraphDialogComponent.ctorParameters = () => [
-    { type: ServerConfigService }
-];
-
-class RefundOrderDialogComponent {
-    constructor(i18nService) {
-        var _a;
-        this.i18nService = i18nService;
-        this.lineQuantities = {};
-        this.refundShipping = false;
-        this.adjustment = 0;
-        this.reasons = (_a = getAppConfig().cancellationReasons) !== null && _a !== void 0 ? _a : [
-            marker('order.refund-reason-customer-request'),
-            marker('order.refund-reason-not-available'),
-        ];
-        this.reasons = this.reasons.map(r => this.i18nService.translate(r));
-    }
-    get refundTotal() {
-        const itemTotal = this.order.lines.reduce((total, line) => {
-            const lineRef = this.lineQuantities[line.id];
-            const refundCount = (lineRef.refund && lineRef.quantity) || 0;
-            return total + line.proratedUnitPriceWithTax * refundCount;
-        }, 0);
-        return itemTotal + (this.refundShipping ? this.order.shippingWithTax : 0) + this.adjustment;
-    }
-    get settledPaymentsTotal() {
-        return this.settledPayments
-            .map(payment => {
-            const paymentTotal = payment.amount;
-            const alreadyRefundedTotal = summate(payment.refunds.filter(r => r.state !== 'Failed'), 'total');
-            return paymentTotal - alreadyRefundedTotal;
-        })
-            .reduce((sum, amount) => sum + amount, 0);
-    }
-    lineCanBeRefundedOrCancelled(line) {
-        var _a, _b;
-        const refunds = (_b = (_a = this.order.payments) === null || _a === void 0 ? void 0 : _a.reduce((all, payment) => [...all, ...payment.refunds], [])) !== null && _b !== void 0 ? _b : [];
-        const refundable = line.items.filter(i => {
-            if (i.cancelled) {
-                return false;
-            }
-            if (i.refundId == null) {
-                return true;
-            }
-            const refund = refunds.find(r => r.id === i.refundId);
-            return (refund === null || refund === void 0 ? void 0 : refund.state) === 'Failed';
-        });
-        return 0 < refundable.length;
-    }
-    ngOnInit() {
-        this.lineQuantities = this.order.lines.reduce((result, line) => {
-            return Object.assign(Object.assign({}, result), { [line.id]: {
-                    quantity: 0,
-                    refund: false,
-                    cancel: false,
-                } });
-        }, {});
-        this.settledPayments = (this.order.payments || []).filter(p => p.state === 'Settled');
-        if (this.settledPayments.length) {
-            this.selectedPayment = this.settledPayments[0];
-        }
-    }
-    handleZeroQuantity(line) {
-        if ((line === null || line === void 0 ? void 0 : line.quantity) === 0) {
-            line.cancel = false;
-            line.refund = false;
-        }
-    }
-    isRefunding() {
-        const result = Object.values(this.lineQuantities).reduce((isRefunding, line) => {
-            return isRefunding || (0 < line.quantity && line.refund);
-        }, false);
-        return result;
-    }
-    isCancelling() {
-        const result = Object.values(this.lineQuantities).reduce((isCancelling, line) => {
-            return isCancelling || (0 < line.quantity && line.cancel);
-        }, false);
-        return result;
-    }
-    canSubmit() {
-        if (this.isRefunding()) {
-            return !!(this.selectedPayment &&
-                this.reason &&
-                0 < this.refundTotal &&
-                this.refundTotal <= this.settledPaymentsTotal);
-        }
-        else if (this.isCancelling()) {
-            return !!this.reason;
-        }
-        return false;
-    }
-    select() {
-        const payment = this.selectedPayment;
-        if (payment) {
-            const refundLines = this.getOrderLineInput(line => line.refund);
-            const cancelLines = this.getOrderLineInput(line => line.cancel);
-            this.resolveWith({
-                refund: {
-                    lines: refundLines,
-                    reason: this.reason,
-                    shipping: this.refundShipping ? this.order.shippingWithTax : 0,
-                    adjustment: this.adjustment,
-                    paymentId: payment.id,
-                },
-                cancel: {
-                    lines: cancelLines,
-                    orderId: this.order.id,
-                    reason: this.reason,
-                    cancelShipping: this.refundShipping,
-                },
-            });
-        }
-    }
-    cancel() {
-        this.resolveWith();
-    }
-    getOrderLineInput(filterFn) {
-        return Object.entries(this.lineQuantities)
-            .filter(([orderLineId, line]) => 0 < line.quantity && filterFn(line))
-            .map(([orderLineId, line]) => ({
-            orderLineId,
-            quantity: line.quantity,
-        }));
-    }
-}
-RefundOrderDialogComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'vdr-refund-order-dialog',
-                template: "<ng-template vdrDialogTitle>{{ 'order.refund-and-cancel-order' | translate }}</ng-template>\r\n\r\n<div class=\"refund-wrapper\">\r\n    <div class=\"order-table\">\r\n        <table class=\"table\">\r\n            <thead>\r\n                <tr>\r\n                    <th></th>\r\n                    <th>{{ 'order.product-name' | translate }}</th>\r\n                    <th>{{ 'order.product-sku' | translate }}</th>\r\n                    <th>{{ 'order.quantity' | translate }}</th>\r\n                    <th>{{ 'order.unit-price' | translate }}</th>\r\n                    <th>{{ 'order.prorated-unit-price' | translate }}</th>\r\n                    <th>{{ 'order.quantity' | translate }}</th>\r\n                    <th>{{ 'order.refund' | translate }}</th>\r\n                    <th>{{ 'order.cancel' | translate }}</th>\r\n                </tr>\r\n            </thead>\r\n            <tr *ngFor=\"let line of order.lines\" class=\"order-line\">\r\n                <td class=\"align-middle thumb\">\r\n                    <img [src]=\"line.featuredAsset | assetPreview: 'tiny'\" />\r\n                </td>\r\n                <td class=\"align-middle name\">{{ line.productVariant.name }}</td>\r\n                <td class=\"align-middle sku\">{{ line.productVariant.sku }}</td>\r\n                <td class=\"align-middle quantity\">\r\n                    {{ line.quantity }}\r\n                    <vdr-line-refunds [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\r\n                </td>\r\n                <td class=\"align-middle quantity\">\r\n                    {{ line.unitPriceWithTax | localeCurrency: order.currencyCode }}\r\n                </td>\r\n                <td class=\"align-middle quantity\">\r\n                    <div class=\"prorated-wrapper\">\r\n                        {{ line.proratedUnitPriceWithTax | localeCurrency: order.currencyCode }}\r\n                        <ng-container *ngIf=\"line.discounts as discounts\">\r\n                            <vdr-dropdown *ngIf=\"discounts.length\">\r\n                                <div class=\"promotions-label\" vdrDropdownTrigger>\r\n                                    <button class=\"icon-button\"><clr-icon shape=\"info\"></clr-icon></button>\r\n                                </div>\r\n                                <vdr-dropdown-menu>\r\n                                    <div class=\"line-promotion\" *ngFor=\"let discount of discounts\">\r\n                                        {{ discount.description }}\r\n                                        <div class=\"promotion-amount\">\r\n                                            {{\r\n                                                discount.amount / 100 / line.quantity\r\n                                                    | number: '1.0-2'\r\n                                                    | currency: order.currencyCode\r\n                                            }}\r\n                                        </div>\r\n                                    </div>\r\n                                </vdr-dropdown-menu>\r\n                            </vdr-dropdown>\r\n                        </ng-container>\r\n                    </div>\r\n                </td>\r\n                <td class=\"align-middle quantity-col\">\r\n                    <input\r\n                        *ngIf=\"lineCanBeRefundedOrCancelled(line)\"\r\n                        [(ngModel)]=\"lineQuantities[line.id].quantity\"\r\n                        type=\"number\"\r\n                        [max]=\"line.quantity\"\r\n                        min=\"0\"\r\n                        (input)=\"handleZeroQuantity(lineQuantities[line.id])\"\r\n                    />\r\n                </td>\r\n                <td class=\"align-middle\">\r\n                    <div class=\"cancel-checkbox-wrapper\">\r\n                        <input\r\n                            type=\"checkbox\"\r\n                            *ngIf=\"lineCanBeRefundedOrCancelled(line)\"\r\n                            clrCheckbox\r\n                            [disabled]=\"0 === lineQuantities[line.id].quantity\"\r\n                            [(ngModel)]=\"lineQuantities[line.id].refund\"\r\n                        />\r\n                    </div>\r\n                </td>\r\n                <td class=\"align-middle\">\r\n                    <div class=\"cancel-checkbox-wrapper\">\r\n                        <input\r\n                            type=\"checkbox\"\r\n                            *ngIf=\"lineCanBeRefundedOrCancelled(line)\"\r\n                            clrCheckbox\r\n                            [disabled]=\"0 === lineQuantities[line.id].quantity\"\r\n                            [(ngModel)]=\"lineQuantities[line.id].cancel\"\r\n                        />\r\n                    </div>\r\n                </td>\r\n            </tr>\r\n        </table>\r\n    </div>\r\n    <div class=\"refund-details mt4\" [class.faded]=\"!isRefunding() && !isCancelling()\">\r\n        <div>\r\n            <label class=\"clr-control-label\">{{ 'order.refund-cancellation-reason' | translate }}</label>\r\n            <ng-select\r\n                [disabled]=\"!isRefunding() && !isCancelling()\"\r\n                [items]=\"reasons\"\r\n                bindLabel=\"name\"\r\n                autofocus\r\n                [placeholder]=\"'order.refund-cancellation-reason-required' | translate\"\r\n                bindValue=\"id\"\r\n                [addTag]=\"true\"\r\n                [(ngModel)]=\"reason\"\r\n            ></ng-select>\r\n        </div>\r\n\r\n        <div>\r\n            <clr-select-container>\r\n                <label>{{ 'order.payment-to-refund' | translate }}</label>\r\n                <select clrSelect name=\"options\" [(ngModel)]=\"selectedPayment\" [disabled]=\"!isRefunding()\">\r\n                    <option\r\n                        *ngFor=\"let payment of settledPayments\"\r\n                        [ngValue]=\"payment\"\r\n                        [disabled]=\"payment.state !== 'Settled'\"\r\n                    >\r\n                        #{{ payment.id }} {{ payment.method }}:\r\n                        {{ payment.amount | localeCurrency: order.currencyCode }}\r\n                    </option>\r\n                </select>\r\n            </clr-select-container>\r\n\r\n            <clr-checkbox-wrapper>\r\n                <input type=\"checkbox\" clrCheckbox [(ngModel)]=\"refundShipping\" [disabled]=\"!isRefunding()\" />\r\n                <label>\r\n                    {{ 'order.refund-shipping' | translate }} ({{\r\n                        order.shippingWithTax | localeCurrency: order.currencyCode\r\n                    }})\r\n                </label>\r\n            </clr-checkbox-wrapper>\r\n            <clr-input-container>\r\n                <label>{{ 'order.refund-adjustment' | translate }}</label>\r\n                <vdr-currency-input\r\n                    clrInput\r\n                    [disabled]=\"!isRefunding()\"\r\n                    [currencyCode]=\"order.currencyCode\"\r\n                    [(ngModel)]=\"adjustment\"\r\n                ></vdr-currency-input>\r\n            </clr-input-container>\r\n            <div class=\"totals\" [class.disabled]=\"!isRefunding()\">\r\n                <div class=\"order-total\">\r\n                    {{ 'order.payment-amount' | translate }}:\r\n                    {{ selectedPayment.amount | localeCurrency: order.currencyCode }}\r\n                </div>\r\n                <div class=\"refund-total\">\r\n                    {{ 'order.refund-total' | translate }}:\r\n                    {{ refundTotal | localeCurrency: order.currencyCode }}\r\n                </div>\r\n                <div class=\"refund-total-error\" *ngIf=\"refundTotal < 0 || settledPaymentsTotal < refundTotal\">\r\n                    {{\r\n                        'order.refund-total-error'\r\n                            | translate\r\n                                : {\r\n                                      min: 0 | currency: order.currencyCode,\r\n                                      max: settledPaymentsTotal | localeCurrency: order.currencyCode\r\n                                  }\r\n                    }}\r\n                </div>\r\n                <div class=\"refund-total-warning\" *ngIf=\"selectedPayment.amount < refundTotal\">\r\n                    {{ 'order.refund-total-warning' | translate }}\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"select()\" [disabled]=\"!canSubmit()\" class=\"btn btn-primary\">\r\n        <ng-container *ngIf=\"isRefunding(); else cancelling\">\r\n            {{\r\n                'order.refund-with-amount'\r\n                    | translate: { amount: refundTotal | localeCurrency: order.currencyCode }\r\n            }}\r\n        </ng-container>\r\n        <ng-template #cancelling>\r\n            {{ 'order.cancel-selected-items' | translate }}\r\n        </ng-template>\r\n    </button>\r\n</ng-template>\r\n",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [":host{height:100%;display:flex;min-height:64vh}.refund-wrapper{flex:1;flex-direction:column}.refund-wrapper .order-table{flex:1;overflow-y:auto}.refund-wrapper .order-table table{margin-top:0}.refund-wrapper tr.ignore{color:var(--color-grey-300)}.quantity-col{background-color:var(--color-warning-100)}.cancel-checkbox-wrapper{display:flex;align-items:center;justify-content:center}clr-checkbox-wrapper{margin-top:12px;margin-bottom:12px;display:block}.refund-details{display:flex;justify-content:space-between}.refund-details.faded{opacity:.5}.totals{margin-top:48px}.totals .refund-total{font-size:18px}.totals .refund-total-error{color:var(--color-error-500)}.totals .refund-total-warning{color:var(--color-warning-600);max-width:250px}.totals.disabled{color:var(--color-grey-300)}.prorated-wrapper{display:flex;justify-content:center}.line-promotion{display:flex;justify-content:space-between;font-size:12px;padding:3px 6px}.line-promotion .promotion-amount{margin-left:12px}\n"]
-            },] }
-];
-RefundOrderDialogComponent.ctorParameters = () => [
-    { type: I18nService }
-];
-
-class SettleRefundDialogComponent {
-    constructor() {
-        this.transactionId = '';
-    }
-    submit() {
-        this.resolveWith(this.transactionId);
-    }
-    cancel() {
-        this.resolveWith();
-    }
-}
-SettleRefundDialogComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'vdr-settle-refund-dialog',
-                template: "<ng-template vdrDialogTitle>{{ 'order.settle-refund' | translate }}</ng-template>\r\n<p class=\"instruction\">\r\n    {{ 'order.settle-refund-manual-instructions' | translate: { method: refund.method } }}\r\n</p>\r\n<clr-input-container>\r\n    <label>{{ 'order.transaction-id' | translate }}</label>\r\n    <input clrInput name=\"transactionId\" [(ngModel)]=\"transactionId\" />\r\n</clr-input-container>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"submit()\" [disabled]=\"!transactionId\" class=\"btn btn-primary\">\r\n        {{ 'order.settle-refund' | translate }}\r\n    </button>\r\n</ng-template>\r\n",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [":host{padding-bottom:32px}.instruction{margin-top:0;margin-bottom:24px}\n"]
-            },] }
-];
-
-class OrderDetailComponent extends BaseDetailComponent {
-    constructor(router, route, serverConfigService, changeDetector, dataService, notificationService, modalService, orderTransitionService) {
-        super(route, router, serverConfigService, dataService);
-        this.changeDetector = changeDetector;
-        this.dataService = dataService;
-        this.notificationService = notificationService;
-        this.modalService = modalService;
-        this.orderTransitionService = orderTransitionService;
-        this.detailForm = new FormGroup({});
-        this.fetchHistory = new Subject();
-        this.defaultStates = [
-            'AddingItems',
-            'ArrangingPayment',
-            'PaymentAuthorized',
-            'PaymentSettled',
-            'PartiallyShipped',
-            'Shipped',
-            'PartiallyDelivered',
-            'Delivered',
-            'Cancelled',
-            'Modifying',
-            'ArrangingAdditionalPayment',
-        ];
-    }
-    ngOnInit() {
-        this.init();
-        this.entity$.pipe(take(1)).subscribe(order => {
-            if (order.state === 'Modifying') {
-                this.router.navigate(['./', 'modify'], { relativeTo: this.route });
-            }
-        });
-        this.customFields = this.getCustomFieldConfig('Order');
-        this.orderLineCustomFields = this.getCustomFieldConfig('OrderLine');
-        this.history$ = this.fetchHistory.pipe(startWith(null), switchMap(() => {
-            return this.dataService.order
-                .getOrderHistory(this.id, {
-                sort: {
-                    createdAt: SortOrder.DESC,
-                },
-            })
-                .mapStream(data => { var _a; return (_a = data.order) === null || _a === void 0 ? void 0 : _a.history.items; });
-        }));
-        this.nextStates$ = this.entity$.pipe(map(order => {
-            const isInCustomState = !this.defaultStates.includes(order.state);
-            return isInCustomState
-                ? order.nextStates
-                : order.nextStates.filter(s => !this.defaultStates.includes(s));
-        }));
-    }
-    ngOnDestroy() {
-        this.destroy();
-    }
-    openStateDiagram() {
-        this.entity$
-            .pipe(take(1), switchMap(order => this.modalService.fromComponent(OrderProcessGraphDialogComponent, {
-            closable: true,
-            locals: {
-                activeState: order.state,
-            },
-        })))
-            .subscribe();
-    }
-    transitionToState(state) {
-        this.dataService.order.transitionToState(this.id, state).subscribe(({ transitionOrderToState }) => {
-            switch (transitionOrderToState === null || transitionOrderToState === void 0 ? void 0 : transitionOrderToState.__typename) {
-                case 'Order':
-                    this.notificationService.success(marker('order.transitioned-to-state-success'), { state });
-                    this.fetchHistory.next();
-                    break;
-                case 'OrderStateTransitionError':
-                    this.notificationService.error(transitionOrderToState.transitionError);
-            }
-        });
-    }
-    manuallyTransitionToState(order) {
-        this.orderTransitionService
-            .manuallyTransitionToState({
-            orderId: order.id,
-            nextStates: order.nextStates,
-            cancellable: true,
-            message: marker('order.manually-transition-to-state-message'),
-            retry: 0,
-        })
-            .subscribe();
-    }
-    transitionToModifying() {
-        this.dataService.order
-            .transitionToState(this.id, 'Modifying')
-            .subscribe(({ transitionOrderToState }) => {
-            switch (transitionOrderToState === null || transitionOrderToState === void 0 ? void 0 : transitionOrderToState.__typename) {
-                case 'Order':
-                    this.router.navigate(['./modify'], { relativeTo: this.route });
-                    break;
-                case 'OrderStateTransitionError':
-                    this.notificationService.error(transitionOrderToState.transitionError);
-            }
-        });
-    }
-    updateCustomFields(customFieldsValue) {
-        this.dataService.order
-            .updateOrderCustomFields({
-            id: this.id,
-            customFields: customFieldsValue,
-        })
-            .subscribe(() => {
-            this.notificationService.success(marker('common.notify-update-success'), { entity: 'Order' });
-        });
-    }
-    getOrderAddressLines(orderAddress) {
-        if (!orderAddress) {
-            return [];
-        }
-        return Object.values(orderAddress)
-            .filter(val => val !== 'OrderAddress')
-            .filter(line => !!line);
-    }
-    settlePayment(payment) {
-        this.dataService.order.settlePayment(payment.id).subscribe(({ settlePayment }) => {
-            switch (settlePayment.__typename) {
-                case 'Payment':
-                    if (settlePayment.state === 'Settled') {
-                        this.notificationService.success(marker('order.settle-payment-success'));
-                    }
-                    else {
-                        this.notificationService.error(marker('order.settle-payment-error'));
-                    }
-                    this.dataService.order.getOrder(this.id).single$.subscribe();
-                    this.fetchHistory.next();
-                    break;
-                case 'OrderStateTransitionError':
-                case 'PaymentStateTransitionError':
-                case 'SettlePaymentError':
-                    this.notificationService.error(settlePayment.message);
-            }
-        });
-    }
-    transitionPaymentState({ payment, state }) {
-        if (state === 'Cancelled') {
-            this.dataService.order.cancelPayment(payment.id).subscribe(({ cancelPayment }) => {
-                switch (cancelPayment.__typename) {
-                    case 'Payment':
-                        this.notificationService.success(marker('order.transitioned-payment-to-state-success'), {
-                            state,
-                        });
-                        this.dataService.order.getOrder(this.id).single$.subscribe();
-                        this.fetchHistory.next();
-                        break;
-                    case 'PaymentStateTransitionError':
-                        this.notificationService.error(cancelPayment.transitionError);
-                        break;
-                    case 'CancelPaymentError':
-                        this.notificationService.error(cancelPayment.paymentErrorMessage);
-                        break;
-                }
-            });
-        }
-        else {
-            this.dataService.order
-                .transitionPaymentToState(payment.id, state)
-                .subscribe(({ transitionPaymentToState }) => {
-                switch (transitionPaymentToState.__typename) {
-                    case 'Payment':
-                        this.notificationService.success(marker('order.transitioned-payment-to-state-success'), {
-                            state,
-                        });
-                        this.dataService.order.getOrder(this.id).single$.subscribe();
-                        this.fetchHistory.next();
-                        break;
-                    case 'PaymentStateTransitionError':
-                        this.notificationService.error(transitionPaymentToState.message);
-                        break;
-                }
-            });
-        }
-    }
-    canAddFulfillment(order) {
-        var _a;
-        const allFulfillmentSummaryRows = ((_a = order.fulfillments) !== null && _a !== void 0 ? _a : []).reduce((all, fulfillment) => [...all, ...fulfillment.summary], []);
-        let allItemsFulfilled = true;
-        for (const line of order.lines) {
-            const totalFulfilledCount = allFulfillmentSummaryRows
-                .filter(row => row.orderLine.id === line.id)
-                .reduce((sum, row) => sum + row.quantity, 0);
-            if (totalFulfilledCount < line.quantity) {
-                allItemsFulfilled = false;
-            }
-        }
-        return (!allItemsFulfilled &&
-            !this.hasUnsettledModifications(order) &&
-            this.outstandingPaymentAmount(order) === 0 &&
-            (order.nextStates.includes('Shipped') ||
-                order.nextStates.includes('PartiallyShipped') ||
-                order.nextStates.includes('Delivered')));
-    }
-    hasUnsettledModifications(order) {
-        return 0 < order.modifications.filter(m => !m.isSettled).length;
-    }
-    getOutstandingModificationAmount(order) {
-        return summate(order.modifications.filter(m => !m.isSettled), 'priceChange');
-    }
-    outstandingPaymentAmount(order) {
-        var _a, _b, _c;
-        const paymentIsValid = (p) => p.state !== 'Cancelled' && p.state !== 'Declined' && p.state !== 'Error';
-        let amountCovered = 0;
-        for (const payment of (_b = (_a = order.payments) === null || _a === void 0 ? void 0 : _a.filter(paymentIsValid)) !== null && _b !== void 0 ? _b : []) {
-            const refunds = (_c = payment.refunds.filter(r => r.state !== 'Failed')) !== null && _c !== void 0 ? _c : [];
-            const refundsTotal = summate(refunds, 'total');
-            amountCovered += payment.amount - refundsTotal;
-        }
-        return order.totalWithTax - amountCovered;
-    }
-    addManualPayment(order) {
-        const priorState = order.state;
-        this.modalService
-            .fromComponent(AddManualPaymentDialogComponent, {
-            closable: true,
-            locals: {
-                outstandingAmount: this.outstandingPaymentAmount(order),
-                currencyCode: order.currencyCode,
-            },
-        })
-            .pipe(switchMap(result => {
-            if (result) {
-                return this.dataService.order.addManualPaymentToOrder({
-                    orderId: this.id,
-                    transactionId: result.transactionId,
-                    method: result.method,
-                    metadata: result.metadata || {},
-                });
-            }
-            else {
-                return EMPTY;
-            }
-        }), switchMap(({ addManualPaymentToOrder }) => {
-            switch (addManualPaymentToOrder.__typename) {
-                case 'Order':
-                    this.notificationService.success(marker('order.add-payment-to-order-success'));
-                    if (priorState === 'ArrangingAdditionalPayment') {
-                        return this.orderTransitionService.transitionToPreModifyingState(order.id, order.nextStates);
-                    }
-                    else {
-                        return this.dataService.order
-                            .transitionToState(this.id, 'PaymentSettled')
-                            .pipe(mapTo('PaymentSettled'));
-                    }
-                case 'ManualPaymentStateError':
-                    this.notificationService.error(addManualPaymentToOrder.message);
-                    return EMPTY;
-                default:
-                    return EMPTY;
-            }
-        }))
-            .subscribe(result => {
-            if (result) {
-                this.refetchOrder({ result });
-            }
-        });
-    }
-    fulfillOrder() {
-        this.entity$
-            .pipe(take(1), switchMap(order => {
-            return this.modalService.fromComponent(FulfillOrderDialogComponent, {
-                size: 'xl',
-                locals: {
-                    order,
-                },
-            });
-        }), switchMap(input => {
-            if (input) {
-                return this.dataService.order.createFulfillment(input);
-            }
-            else {
-                return of(undefined);
-            }
-        }), switchMap(result => this.refetchOrder(result).pipe(mapTo(result))))
-            .subscribe(result => {
-            if (result) {
-                const { addFulfillmentToOrder } = result;
-                switch (addFulfillmentToOrder.__typename) {
-                    case 'Fulfillment':
-                        this.notificationService.success(marker('order.create-fulfillment-success'));
-                        break;
-                    case 'EmptyOrderLineSelectionError':
-                    case 'InsufficientStockOnHandError':
-                    case 'ItemsAlreadyFulfilledError':
-                    case 'InvalidFulfillmentHandlerError':
-                        this.notificationService.error(addFulfillmentToOrder.message);
-                        break;
-                    case 'FulfillmentStateTransitionError':
-                        this.notificationService.error(addFulfillmentToOrder.transitionError);
-                        break;
-                    case 'CreateFulfillmentError':
-                        this.notificationService.error(addFulfillmentToOrder.fulfillmentHandlerError);
-                        break;
-                    case undefined:
-                        this.notificationService.error(JSON.stringify(addFulfillmentToOrder));
-                        break;
-                    default:
-                        assertNever(addFulfillmentToOrder);
-                }
-            }
-        });
-    }
-    transitionFulfillment(id, state) {
-        this.dataService.order
-            .transitionFulfillmentToState(id, state)
-            .pipe(switchMap(result => this.refetchOrder(result)))
-            .subscribe(() => {
-            this.notificationService.success(marker('order.successfully-updated-fulfillment'));
-        });
-    }
-    cancelOrRefund(order) {
-        const isRefundable = this.orderHasSettledPayments(order);
-        if (order.state === 'PaymentAuthorized' || order.active === true || !isRefundable) {
-            this.cancelOrder(order);
-        }
-        else {
-            this.refundOrder(order);
-        }
-    }
-    settleRefund(refund) {
-        this.modalService
-            .fromComponent(SettleRefundDialogComponent, {
-            size: 'md',
-            locals: {
-                refund,
-            },
-        })
-            .pipe(switchMap(transactionId => {
-            if (transactionId) {
-                return this.dataService.order.settleRefund({
-                    transactionId,
-                    id: refund.id,
-                }, this.id);
-            }
-            else {
-                return of(undefined);
-            }
-        }))
-            .subscribe(result => {
-            if (result) {
-                this.notificationService.success(marker('order.settle-refund-success'));
-            }
-        });
-    }
-    addNote(event) {
-        const { note, isPublic } = event;
-        this.dataService.order
-            .addNoteToOrder({
-            id: this.id,
-            note,
-            isPublic,
-        })
-            .pipe(switchMap(result => this.refetchOrder(result)))
-            .subscribe(result => {
-            this.notificationService.success(marker('common.notify-create-success'), {
-                entity: 'Note',
-            });
-        });
-    }
-    updateNote(entry) {
-        this.modalService
-            .fromComponent(EditNoteDialogComponent, {
-            closable: true,
-            locals: {
-                displayPrivacyControls: true,
-                note: entry.data.note,
-                noteIsPrivate: !entry.isPublic,
-            },
-        })
-            .pipe(switchMap(result => {
-            if (result) {
-                return this.dataService.order.updateOrderNote({
-                    noteId: entry.id,
-                    isPublic: !result.isPrivate,
-                    note: result.note,
-                });
-            }
-            else {
-                return EMPTY;
-            }
-        }))
-            .subscribe(result => {
-            this.fetchHistory.next();
-            this.notificationService.success(marker('common.notify-update-success'), {
-                entity: 'Note',
-            });
-        });
-    }
-    deleteNote(entry) {
-        return this.modalService
-            .dialog({
-            title: marker('common.confirm-delete-note'),
-            body: entry.data.note,
-            buttons: [
-                { type: 'secondary', label: marker('common.cancel') },
-                { type: 'danger', label: marker('common.delete'), returnValue: true },
-            ],
-        })
-            .pipe(switchMap(res => (res ? this.dataService.order.deleteOrderNote(entry.id) : EMPTY)))
-            .subscribe(() => {
-            this.fetchHistory.next();
-            this.notificationService.success(marker('common.notify-delete-success'), {
-                entity: 'Note',
-            });
-        });
-    }
-    orderHasSettledPayments(order) {
-        var _a;
-        return !!((_a = order.payments) === null || _a === void 0 ? void 0 : _a.find(p => p.state === 'Settled'));
-    }
-    cancelOrder(order) {
-        this.modalService
-            .fromComponent(CancelOrderDialogComponent, {
-            size: 'xl',
-            locals: {
-                order,
-            },
-        })
-            .pipe(switchMap(input => {
-            if (input) {
-                return this.dataService.order.cancelOrder(input);
-            }
-            else {
-                return of(undefined);
-            }
-        }), switchMap(result => this.refetchOrder(result)))
-            .subscribe(result => {
-            if (result) {
-                this.notificationService.success(marker('order.cancelled-order-success'));
-            }
-        });
-    }
-    refundOrder(order) {
-        this.modalService
-            .fromComponent(RefundOrderDialogComponent, {
-            size: 'xl',
-            locals: {
-                order,
-            },
-        })
-            .pipe(switchMap(input => {
-            var _a;
-            if (!input) {
-                return of(undefined);
-            }
-            if ((_a = input.cancel.lines) === null || _a === void 0 ? void 0 : _a.length) {
-                return this.dataService.order.cancelOrder(input.cancel).pipe(map(res => {
-                    const result = res.cancelOrder;
-                    switch (result.__typename) {
-                        case 'Order':
-                            this.refetchOrder(result).subscribe();
-                            this.notificationService.success(marker('order.cancelled-order-success'));
-                            return input;
-                        case 'CancelActiveOrderError':
-                        case 'QuantityTooGreatError':
-                        case 'MultipleOrderError':
-                        case 'OrderStateTransitionError':
-                        case 'EmptyOrderLineSelectionError':
-                            this.notificationService.error(result.message);
-                            return undefined;
-                    }
-                }));
-            }
-            else {
-                return [input];
-            }
-        }), switchMap(input => {
-            if (!input) {
-                return of(undefined);
-            }
-            if (input.refund.lines.length) {
-                return this.dataService.order
-                    .refundOrder(input.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(marker('order.refund-order-failed'));
-                        }
-                        else {
-                            this.notificationService.success(marker('order.refund-order-success'));
-                        }
-                        break;
-                    case 'AlreadyRefundedError':
-                    case 'NothingToRefundError':
-                    case 'PaymentOrderMismatchError':
-                    case 'RefundOrderStateError':
-                    case 'RefundStateTransitionError':
-                        this.notificationService.error(result.message);
-                        break;
-                }
-            }
-        });
-    }
-    refetchOrder(result) {
-        this.fetchHistory.next();
-        if (result) {
-            return this.dataService.order.getOrder(this.id).single$;
-        }
-        else {
-            return of(undefined);
-        }
-    }
-    setFormValues(entity) {
-        // empty
-    }
-}
-OrderDetailComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'vdr-order-detail',
-                template: "<vdr-action-bar *ngIf=\"entity$ | async as order\">\r\n    <vdr-ab-left>\r\n        <div class=\"flex clr-align-items-center\">\r\n            <vdr-entity-info [entity]=\"entity$ | async\"></vdr-entity-info>\r\n            <vdr-order-state-label [state]=\"order.state\">\r\n                <button\r\n                    class=\"icon-button\"\r\n                    (click)=\"openStateDiagram()\"\r\n                    [title]=\"'order.order-state-diagram' | translate\"\r\n                >\r\n                    <clr-icon shape=\"list\"></clr-icon>\r\n                </button>\r\n            </vdr-order-state-label>\r\n        </div>\r\n    </vdr-ab-left>\r\n\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"order-detail\"></vdr-action-bar-items>\r\n        <button\r\n            class=\"btn btn-primary\"\r\n            *ngIf=\"\r\n                (order.state === 'ArrangingPayment' || order.state === 'ArrangingAdditionalPayment') &&\r\n                (hasUnsettledModifications(order) || 0 < outstandingPaymentAmount(order))\r\n            \"\r\n            (click)=\"addManualPayment(order)\"\r\n        >\r\n            {{ 'order.add-payment-to-order' | translate }}\r\n            ({{ outstandingPaymentAmount(order) | localeCurrency: order.currencyCode }})\r\n        </button>\r\n        <button\r\n            class=\"btn btn-primary\"\r\n            *ngIf=\"\r\n                order.active === false &&\r\n                order.state !== 'ArrangingAdditionalPayment' &&\r\n                0 < outstandingPaymentAmount(order)\r\n            \"\r\n            (click)=\"transitionToState('ArrangingAdditionalPayment')\"\r\n        >\r\n            {{ 'order.arrange-additional-payment' | translate }}\r\n        </button>\r\n        <button class=\"btn btn-primary\" (click)=\"fulfillOrder()\" [disabled]=\"!canAddFulfillment(order)\">\r\n            {{ 'order.fulfill-order' | translate }}\r\n        </button>\r\n        <vdr-dropdown>\r\n            <button class=\"icon-button\" vdrDropdownTrigger>\r\n                <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n            </button>\r\n            <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                <ng-container *ngIf=\"order.nextStates.includes('Modifying')\">\r\n                    <button type=\"button\" class=\"btn\" vdrDropdownItem (click)=\"transitionToModifying()\">\r\n                        <clr-icon shape=\"pencil\"></clr-icon>\r\n                        {{ 'order.modify-order' | translate }}\r\n                    </button>\r\n                    <div class=\"dropdown-divider\"></div>\r\n                </ng-container>\r\n                <button\r\n                    type=\"button\"\r\n                    class=\"btn\"\r\n                    vdrDropdownItem\r\n                    *ngIf=\"order.nextStates.includes('Cancelled')\"\r\n                    (click)=\"cancelOrRefund(order)\"\r\n                >\r\n                    <clr-icon shape=\"error-standard\" class=\"is-error\"></clr-icon>\r\n                    <ng-container *ngIf=\"orderHasSettledPayments(order); else cancelOnly\">\r\n                        {{ 'order.refund-and-cancel-order' | translate }}\r\n                    </ng-container>\r\n                    <ng-template #cancelOnly>\r\n                        {{ 'order.cancel-order' | translate }}\r\n                    </ng-template>\r\n                </button>\r\n\r\n                <ng-container *ngIf=\"(nextStates$ | async)?.length\">\r\n                    <div class=\"dropdown-divider\"></div>\r\n                    <button\r\n                        *ngFor=\"let nextState of nextStates$ | async\"\r\n                        type=\"button\"\r\n                        class=\"btn\"\r\n                        vdrDropdownItem\r\n                        (click)=\"transitionToState(nextState)\"\r\n                    >\r\n                        <clr-icon shape=\"step-forward-2\"></clr-icon>\r\n                        {{\r\n                            'order.transition-to-state'\r\n                                | translate: { state: (nextState | stateI18nToken | translate) }\r\n                        }}\r\n                    </button>\r\n                </ng-container>\r\n                <div class=\"dropdown-divider\"></div>\r\n                <button type=\"button\" class=\"btn\" vdrDropdownItem (click)=\"manuallyTransitionToState(order)\">\r\n                    <clr-icon shape=\"step-forward-2\" class=\"is-warning\"></clr-icon>\r\n                    {{ 'order.manually-transition-to-state' | translate }}\r\n                </button>\r\n            </vdr-dropdown-menu>\r\n        </vdr-dropdown>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<div *ngIf=\"entity$ | async as order\">\r\n    <div class=\"clr-row\">\r\n        <div class=\"clr-col-lg-8\">\r\n            <vdr-order-table\r\n                [order]=\"order\"\r\n                [orderLineCustomFields]=\"orderLineCustomFields\"\r\n            ></vdr-order-table>\r\n            <h4>{{ 'order.tax-summary' | translate }}</h4>\r\n            <table class=\"table\">\r\n                <thead>\r\n                    <tr>\r\n                        <th>{{ 'common.description' | translate }}</th>\r\n                        <th>{{ 'order.tax-rate' | translate }}</th>\r\n                        <th>{{ 'order.tax-base' | translate }}</th>\r\n                        <th>{{ 'order.tax-total' | translate }}</th>\r\n                    </tr>\r\n                </thead>\r\n                <tbody>\r\n                    <tr *ngFor=\"let row of order.taxSummary\">\r\n                        <td>{{ row.description }}</td>\r\n                        <td>{{ row.taxRate / 100 | percent }}</td>\r\n                        <td>{{ row.taxBase | localeCurrency: order.currencyCode }}</td>\r\n                        <td>{{ row.taxTotal | localeCurrency: order.currencyCode }}</td>\r\n                    </tr>\r\n                </tbody>\r\n            </table>\r\n\r\n            <vdr-custom-detail-component-host\r\n                locationId=\"order-detail\"\r\n                [entity$]=\"entity$\"\r\n                [detailForm]=\"detailForm\"\r\n            ></vdr-custom-detail-component-host>\r\n\r\n            <vdr-order-history\r\n                [order]=\"order\"\r\n                [history]=\"history$ | async\"\r\n                (addNote)=\"addNote($event)\"\r\n                (updateNote)=\"updateNote($event)\"\r\n                (deleteNote)=\"deleteNote($event)\"\r\n            ></vdr-order-history>\r\n        </div>\r\n        <div class=\"clr-col-lg-4 order-cards\">\r\n            <vdr-order-custom-fields-card\r\n                [customFieldsConfig]=\"customFields\"\r\n                [customFieldValues]=\"order.customFields\"\r\n                (updateClick)=\"updateCustomFields($event)\"\r\n            ></vdr-order-custom-fields-card>\r\n            <div class=\"card\">\r\n                <div class=\"card-header\">\r\n                    {{ 'order.customer' | translate }}\r\n                </div>\r\n                <div class=\"card-block\">\r\n                    <div class=\"card-text\">\r\n                        <vdr-customer-label [customer]=\"order.customer\"></vdr-customer-label>\r\n                        <h6 *ngIf=\"getOrderAddressLines(order.shippingAddress).length\">\r\n                            {{ 'order.shipping-address' | translate }}\r\n                        </h6>\r\n                        <vdr-formatted-address [address]=\"order.shippingAddress\"></vdr-formatted-address>\r\n                        <h6 *ngIf=\"getOrderAddressLines(order.billingAddress).length\">\r\n                            {{ 'order.billing-address' | translate }}\r\n                        </h6>\r\n                        <vdr-formatted-address [address]=\"order.billingAddress\"></vdr-formatted-address>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <ng-container *ngIf=\"order.payments && order.payments.length\">\r\n                <vdr-order-payment-card\r\n                    *ngFor=\"let payment of order.payments\"\r\n                    [currencyCode]=\"order.currencyCode\"\r\n                    [payment]=\"payment\"\r\n                    (settlePayment)=\"settlePayment($event)\"\r\n                    (transitionPaymentState)=\"transitionPaymentState($event)\"\r\n                    (settleRefund)=\"settleRefund($event)\"\r\n                ></vdr-order-payment-card>\r\n            </ng-container>\r\n            <ng-container *ngFor=\"let fulfillment of order.fulfillments\">\r\n                <vdr-fulfillment-card\r\n                    [fulfillment]=\"fulfillment\"\r\n                    [order]=\"order\"\r\n                    (transitionState)=\"transitionFulfillment(fulfillment.id, $event)\"\r\n                ></vdr-fulfillment-card>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n</div>\r\n",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [".shipping-address{list-style-type:none;line-height:1.3em}.order-cards h6{margin-top:6px;color:var(--color-text-200)}\n"]
-            },] }
-];
-OrderDetailComponent.ctorParameters = () => [
-    { type: Router },
-    { type: ActivatedRoute },
-    { type: ServerConfigService },
-    { type: ChangeDetectorRef },
-    { type: DataService },
-    { type: NotificationService },
-    { type: ModalService },
-    { type: OrderTransitionService }
-];
-
-var OrderEditResultType;
-(function (OrderEditResultType) {
-    OrderEditResultType[OrderEditResultType["Refund"] = 0] = "Refund";
-    OrderEditResultType[OrderEditResultType["Payment"] = 1] = "Payment";
-    OrderEditResultType[OrderEditResultType["PriceUnchanged"] = 2] = "PriceUnchanged";
-    OrderEditResultType[OrderEditResultType["Cancel"] = 3] = "Cancel";
-})(OrderEditResultType || (OrderEditResultType = {}));
-class OrderEditsPreviewDialogComponent {
-    get priceDifference() {
-        return this.order.totalWithTax - this.originalTotalWithTax;
-    }
-    ngOnInit() {
-        this.refundNote = this.modifyOrderInput.note || '';
-    }
-    cancel() {
-        this.resolveWith({
-            result: OrderEditResultType.Cancel,
-        });
-    }
-    submit() {
-        if (0 < this.priceDifference) {
-            this.resolveWith({
-                result: OrderEditResultType.Payment,
-            });
-        }
-        else if (this.priceDifference < 0) {
-            this.resolveWith({
-                result: OrderEditResultType.Refund,
-                // tslint:disable-next-line:no-non-null-assertion
-                refundPaymentId: this.selectedPayment.id,
-                refundNote: this.refundNote,
-            });
-        }
-        else {
-            this.resolveWith({
-                result: OrderEditResultType.PriceUnchanged,
-            });
-        }
-    }
-}
-OrderEditsPreviewDialogComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'vdr-order-edits-preview-dialog',
-                template: "<ng-template vdrDialogTitle>{{ 'order.confirm-modifications' | translate }}</ng-template>\r\n<vdr-order-table [order]=\"order\" [orderLineCustomFields]=\"orderLineCustomFields\"></vdr-order-table>\r\n\r\n<h4 class=\"h4\">\r\n    {{ 'order.modify-order-price-difference' | translate }}:\r\n    <strong>{{ priceDifference | localeCurrency: order.currencyCode }}</strong>\r\n</h4>\r\n<div *ngIf=\"priceDifference < 0\">\r\n<clr-select-container>\r\n    <label>{{ 'order.payment-to-refund' | translate }}</label>\r\n    <select clrSelect name=\"options\" [(ngModel)]=\"selectedPayment\">\r\n        <option\r\n            *ngFor=\"let payment of order.payments\"\r\n            [ngValue]=\"payment\"\r\n        >\r\n            #{{ payment.id }} {{ payment.method }}:\r\n            {{ payment.amount | localeCurrency: order.currencyCode }}\r\n        </option>\r\n    </select>\r\n</clr-select-container>\r\n    <label class=\"clr-control-label\">{{ 'order.refund-cancellation-reason' | translate }}</label>\r\n    <textarea [(ngModel)]=\"refundNote\" name=\"refundNote\" clrTextarea required></textarea>\r\n</div>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"submit()\" [disabled]=\"priceDifference < 0 && !selectedPayment\" class=\"btn btn-primary\">\r\n        {{ 'common.confirm' | translate }}\r\n    </button>\r\n</ng-template>\r\n",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [""]
-            },] }
-];
-
-class OrderEditorComponent extends BaseDetailComponent {
-    constructor(router, route, serverConfigService, changeDetector, dataService, notificationService, modalService, orderTransitionService) {
-        super(route, router, serverConfigService, dataService);
-        this.changeDetector = changeDetector;
-        this.dataService = dataService;
-        this.notificationService = notificationService;
-        this.modalService = modalService;
-        this.orderTransitionService = orderTransitionService;
-        this.couponCodeInput$ = new Subject();
-        this.detailForm = new FormGroup({});
-        this.couponCodesControl = new FormControl();
-        this.modifyOrderInput = {
-            dryRun: true,
-            orderId: '',
-            addItems: [],
-            adjustOrderLines: [],
-            surcharges: [],
-            note: '',
-            updateShippingAddress: {},
-            updateBillingAddress: {},
-        };
-        this.note = '';
-        this.recalculateShipping = true;
-        this.addedVariants = new Map();
-    }
-    get addedLines() {
-        const getSinglePriceValue = (price) => price.__typename === 'SinglePrice' ? price.value : 0;
-        return (this.modifyOrderInput.addItems || [])
-            .map(row => {
-            const variantInfo = this.addedVariants.get(row.productVariantId);
-            if (variantInfo) {
-                return Object.assign(Object.assign({}, variantInfo), { price: getSinglePriceValue(variantInfo.price), priceWithTax: getSinglePriceValue(variantInfo.priceWithTax), quantity: row.quantity });
-            }
-        })
-            .filter(notNullOrUndefined);
-    }
-    ngOnInit() {
-        this.init();
-        this.dataService.promotion.getPromotions();
-        this.addressCustomFields = this.getCustomFieldConfig('Address');
-        this.modifyOrderInput.orderId = this.route.snapshot.paramMap.get('id');
-        this.orderLineCustomFields = this.getCustomFieldConfig('OrderLine');
-        this.entity$.pipe(takeUntil(this.destroy$)).subscribe(order => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
-            if (order.couponCodes.length) {
-                this.couponCodesControl.setValue(order.couponCodes);
-            }
-            this.surchargeForm = new FormGroup({
-                description: new FormControl('', Validators.required),
-                sku: new FormControl(''),
-                price: new FormControl(0, Validators.required),
-                priceIncludesTax: new FormControl(true),
-                taxRate: new FormControl(0),
-                taxDescription: new FormControl(''),
-            });
-            if (!this.shippingAddressForm) {
-                this.shippingAddressForm = new FormGroup({
-                    fullName: new FormControl((_a = order.shippingAddress) === null || _a === void 0 ? void 0 : _a.fullName),
-                    company: new FormControl((_b = order.shippingAddress) === null || _b === void 0 ? void 0 : _b.company),
-                    streetLine1: new FormControl((_c = order.shippingAddress) === null || _c === void 0 ? void 0 : _c.streetLine1),
-                    streetLine2: new FormControl((_d = order.shippingAddress) === null || _d === void 0 ? void 0 : _d.streetLine2),
-                    city: new FormControl((_e = order.shippingAddress) === null || _e === void 0 ? void 0 : _e.city),
-                    province: new FormControl((_f = order.shippingAddress) === null || _f === void 0 ? void 0 : _f.province),
-                    postalCode: new FormControl((_g = order.shippingAddress) === null || _g === void 0 ? void 0 : _g.postalCode),
-                    countryCode: new FormControl((_h = order.shippingAddress) === null || _h === void 0 ? void 0 : _h.countryCode),
-                    phoneNumber: new FormControl((_j = order.shippingAddress) === null || _j === void 0 ? void 0 : _j.phoneNumber),
-                });
-                this.addAddressCustomFieldsFormGroup(this.shippingAddressForm, order.shippingAddress);
-            }
-            if (!this.billingAddressForm) {
-                this.billingAddressForm = new FormGroup({
-                    fullName: new FormControl((_k = order.billingAddress) === null || _k === void 0 ? void 0 : _k.fullName),
-                    company: new FormControl((_l = order.billingAddress) === null || _l === void 0 ? void 0 : _l.company),
-                    streetLine1: new FormControl((_m = order.billingAddress) === null || _m === void 0 ? void 0 : _m.streetLine1),
-                    streetLine2: new FormControl((_o = order.billingAddress) === null || _o === void 0 ? void 0 : _o.streetLine2),
-                    city: new FormControl((_p = order.billingAddress) === null || _p === void 0 ? void 0 : _p.city),
-                    province: new FormControl((_q = order.billingAddress) === null || _q === void 0 ? void 0 : _q.province),
-                    postalCode: new FormControl((_r = order.billingAddress) === null || _r === void 0 ? void 0 : _r.postalCode),
-                    countryCode: new FormControl((_s = order.billingAddress) === null || _s === void 0 ? void 0 : _s.countryCode),
-                    phoneNumber: new FormControl((_t = order.billingAddress) === null || _t === void 0 ? void 0 : _t.phoneNumber),
-                });
-                this.addAddressCustomFieldsFormGroup(this.billingAddressForm, order.billingAddress);
-            }
-            this.orderLineCustomFieldsFormArray = new FormArray([]);
-            for (const line of order.lines) {
-                const formGroup = new FormGroup({});
-                for (const { name } of this.orderLineCustomFields) {
-                    formGroup.addControl(name, new FormControl(line.customFields[name]));
-                }
-                formGroup.valueChanges.pipe(takeUntil(this.destroy$)).subscribe(value => {
-                    let modifyRow = this.modifyOrderInput.adjustOrderLines.find(l => l.orderLineId === line.id);
-                    if (!modifyRow) {
-                        modifyRow = {
-                            orderLineId: line.id,
-                            quantity: line.quantity,
-                        };
-                        this.modifyOrderInput.adjustOrderLines.push(modifyRow);
-                    }
-                    if (this.orderLineCustomFields.length) {
-                        modifyRow.customFields = value;
-                    }
-                });
-                this.orderLineCustomFieldsFormArray.push(formGroup);
-            }
-        });
-        this.availableCouponCodes$ = concat(this.couponCodeInput$.pipe(distinctUntilChanged(), switchMap(term => this.dataService.promotion.getPromotions(10, 0, {
-            couponCode: { contains: term },
-        }).single$), map(({ promotions }) => 
-        // tslint:disable-next-line:no-non-null-assertion
-        promotions.items.map(p => ({ code: p.couponCode, promotionName: p.name }))), startWith([])));
-        this.addItemCustomFieldsFormArray = new FormArray([]);
-        this.addItemCustomFieldsForm = new FormGroup({});
-        for (const customField of this.orderLineCustomFields) {
-            this.addItemCustomFieldsForm.addControl(customField.name, new FormControl());
-        }
-        this.availableCountries$ = this.dataService.settings
-            .getAvailableCountries()
-            .mapSingle(result => result.countries.items)
-            .pipe(shareReplay(1));
-        this.dataService.order
-            .getOrderHistory(this.id, {
-            take: 1,
-            sort: {
-                createdAt: SortOrder.DESC,
-            },
-            filter: { type: { eq: HistoryEntryType.ORDER_STATE_TRANSITION } },
-        })
-            .single$.subscribe(({ order }) => {
-            this.previousState = order === null || order === void 0 ? void 0 : order.history.items[0].data.from;
-        });
-    }
-    ngOnDestroy() {
-        this.destroy();
-    }
-    transitionToPriorState(order) {
-        this.orderTransitionService
-            .transitionToPreModifyingState(order.id, order.nextStates)
-            .subscribe(result => {
-            this.router.navigate(['..'], { relativeTo: this.route });
-        });
-    }
-    canPreviewChanges() {
-        const { addItems, adjustOrderLines, surcharges } = this.modifyOrderInput;
-        return (!!(addItems === null || addItems === void 0 ? void 0 : addItems.length) ||
-            !!(surcharges === null || surcharges === void 0 ? void 0 : surcharges.length) ||
-            !!(adjustOrderLines === null || adjustOrderLines === void 0 ? void 0 : adjustOrderLines.length) ||
-            (this.shippingAddressForm.dirty && this.shippingAddressForm.valid) ||
-            (this.billingAddressForm.dirty && this.billingAddressForm.valid) ||
-            this.couponCodesControl.dirty);
-    }
-    isLineModified(line) {
-        var _a;
-        return !!((_a = this.modifyOrderInput.adjustOrderLines) === null || _a === void 0 ? void 0 : _a.find(l => l.orderLineId === line.id && l.quantity !== line.quantity));
-    }
-    updateLineQuantity(line, quantity) {
-        const { adjustOrderLines } = this.modifyOrderInput;
-        let row = adjustOrderLines === null || adjustOrderLines === void 0 ? void 0 : adjustOrderLines.find(l => l.orderLineId === line.id);
-        if (row && +quantity === line.quantity) {
-            // Remove the modification if the quantity is the same as
-            // the original order
-            adjustOrderLines === null || adjustOrderLines === void 0 ? void 0 : adjustOrderLines.splice(adjustOrderLines === null || adjustOrderLines === void 0 ? void 0 : adjustOrderLines.indexOf(row), 1);
-        }
-        if (!row) {
-            row = { orderLineId: line.id, quantity: +quantity };
-            adjustOrderLines === null || adjustOrderLines === void 0 ? void 0 : adjustOrderLines.push(row);
-        }
-        row.quantity = +quantity;
-    }
-    updateAddedItemQuantity(item, quantity) {
-        var _a;
-        const row = (_a = this.modifyOrderInput.addItems) === null || _a === void 0 ? void 0 : _a.find(l => l.productVariantId === item.productVariantId);
-        if (row) {
-            row.quantity = +quantity;
-        }
-    }
-    trackByProductVariantId(index, item) {
-        return item.productVariantId;
-    }
-    getSelectedItemPrice(result) {
-        switch (result === null || result === void 0 ? void 0 : result.priceWithTax.__typename) {
-            case 'SinglePrice':
-                return result.priceWithTax.value;
-            default:
-                return 0;
-        }
-    }
-    addItemToOrder(result) {
-        var _a, _b;
-        if (!result) {
-            return;
-        }
-        const customFields = this.orderLineCustomFields.length
-            ? this.addItemCustomFieldsForm.value
-            : undefined;
-        let row = (_a = this.modifyOrderInput.addItems) === null || _a === void 0 ? void 0 : _a.find(l => this.isMatchingAddItemRow(l, result, customFields));
-        if (!row) {
-            row = { productVariantId: result.productVariantId, quantity: 1 };
-            if (customFields) {
-                row.customFields = customFields;
-            }
-            (_b = this.modifyOrderInput.addItems) === null || _b === void 0 ? void 0 : _b.push(row);
-        }
-        else {
-            row.quantity++;
-        }
-        if (customFields) {
-            const formGroup = new FormGroup({});
-            for (const [key, value] of Object.entries(customFields)) {
-                formGroup.addControl(key, new FormControl(value));
-            }
-            this.addItemCustomFieldsFormArray.push(formGroup);
-            formGroup.valueChanges.pipe(takeUntil(this.destroy$)).subscribe(value => {
-                if (row) {
-                    row.customFields = value;
-                }
-            });
-        }
-        this.addItemCustomFieldsForm.reset({});
-        this.addItemSelectedVariant = undefined;
-        this.addedVariants.set(result.productVariantId, result);
-    }
-    isMatchingAddItemRow(row, result, customFields) {
-        return (row.productVariantId === result.productVariantId &&
-            JSON.stringify(row.customFields) === JSON.stringify(customFields));
-    }
-    removeAddedItem(index) {
-        this.modifyOrderInput.addItems.splice(index, 1);
-        if (-1 < index) {
-            this.addItemCustomFieldsFormArray.removeAt(index);
-        }
-    }
-    getSurchargePrices(surcharge) {
-        const priceWithTax = surcharge.priceIncludesTax
-            ? surcharge.price
-            : Math.round(surcharge.price * ((100 + (surcharge.taxRate || 0)) / 100));
-        const price = surcharge.priceIncludesTax
-            ? Math.round(surcharge.price / ((100 + (surcharge.taxRate || 0)) / 100))
-            : surcharge.price;
-        return {
-            price,
-            priceWithTax,
-        };
-    }
-    addSurcharge(value) {
-        var _a;
-        (_a = this.modifyOrderInput.surcharges) === null || _a === void 0 ? void 0 : _a.push(value);
-        this.surchargeForm.reset({
-            price: 0,
-            priceIncludesTax: true,
-            taxRate: 0,
-        });
-    }
-    removeSurcharge(index) {
-        var _a;
-        (_a = this.modifyOrderInput.surcharges) === null || _a === void 0 ? void 0 : _a.splice(index, 1);
-    }
-    previewAndModify(order) {
-        var _a;
-        const modifyOrderInput = Object.assign(Object.assign({}, this.modifyOrderInput), { adjustOrderLines: this.modifyOrderInput.adjustOrderLines.map(line => {
-                return transformRelationCustomFieldInputs(simpleDeepClone(line), this.orderLineCustomFields);
-            }) });
-        const input = Object.assign(Object.assign(Object.assign(Object.assign({}, modifyOrderInput), (this.billingAddressForm.dirty ? { updateBillingAddress: this.billingAddressForm.value } : {})), (this.shippingAddressForm.dirty
-            ? { updateShippingAddress: this.shippingAddressForm.value }
-            : {})), { dryRun: true, couponCodes: this.couponCodesControl.dirty ? this.couponCodesControl.value : undefined, note: (_a = this.note) !== null && _a !== void 0 ? _a : '', options: {
-                recalculateShipping: this.recalculateShipping,
-            } });
-        const originalTotalWithTax = order.totalWithTax;
-        this.dataService.order
-            .modifyOrder(input)
-            .pipe(switchMap(({ modifyOrder }) => {
-            switch (modifyOrder.__typename) {
-                case 'Order':
-                    return this.modalService.fromComponent(OrderEditsPreviewDialogComponent, {
-                        size: 'xl',
-                        closable: false,
-                        locals: {
-                            originalTotalWithTax,
-                            order: modifyOrder,
-                            orderLineCustomFields: this.orderLineCustomFields,
-                            modifyOrderInput: input,
-                        },
-                    });
-                case 'InsufficientStockError':
-                case 'NegativeQuantityError':
-                case 'NoChangesSpecifiedError':
-                case 'OrderLimitError':
-                case 'OrderModificationStateError':
-                case 'PaymentMethodMissingError':
-                case 'RefundPaymentIdMissingError':
-                case 'CouponCodeLimitError':
-                case 'CouponCodeExpiredError':
-                case 'CouponCodeInvalidError': {
-                    this.notificationService.error(modifyOrder.message);
-                    return of(false);
-                }
-                case null:
-                case undefined:
-                    return of(false);
-                default:
-                    assertNever(modifyOrder);
-            }
-        }), switchMap(result => {
-            if (!result || result.result === OrderEditResultType.Cancel) {
-                // re-fetch so that the preview values get overwritten in the cache.
-                return this.dataService.order.getOrder(this.id).mapSingle(() => false);
-            }
-            else {
-                // Do the modification
-                const wetRunInput = Object.assign(Object.assign({}, input), { dryRun: false });
-                if (result.result === OrderEditResultType.Refund) {
-                    wetRunInput.refund = {
-                        paymentId: result.refundPaymentId,
-                        reason: result.refundNote,
-                    };
-                }
-                return this.dataService.order.modifyOrder(wetRunInput).pipe(switchMap(({ modifyOrder }) => {
-                    if (modifyOrder.__typename === 'Order') {
-                        const priceDelta = modifyOrder.totalWithTax - originalTotalWithTax;
-                        const nextState = 0 < priceDelta ? 'ArrangingAdditionalPayment' : this.previousState;
-                        return this.dataService.order
-                            .transitionToState(order.id, nextState)
-                            .pipe(mapTo(true));
-                    }
-                    else {
-                        this.notificationService.error(modifyOrder.message);
-                        return EMPTY;
-                    }
-                }));
-            }
-        }))
-            .subscribe(result => {
-            if (result) {
-                this.router.navigate(['../'], { relativeTo: this.route });
-            }
-        });
-    }
-    addAddressCustomFieldsFormGroup(parentFormGroup, address) {
-        var _a;
-        if (address && this.addressCustomFields.length) {
-            const addressCustomFieldsFormGroup = new FormGroup({});
-            for (const customFieldDef of this.addressCustomFields) {
-                const name = customFieldDef.name;
-                const value = (_a = address.customFields) === null || _a === void 0 ? void 0 : _a[name];
-                addressCustomFieldsFormGroup.addControl(name, new FormControl(value));
-            }
-            parentFormGroup.addControl('customFields', addressCustomFieldsFormGroup);
-        }
-    }
-    setFormValues(entity, languageCode) {
-        /* not used */
-    }
-}
-OrderEditorComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'vdr-order-editor',
-                template: "<vdr-action-bar *ngIf=\"entity$ | async as order\">\r\n    <vdr-ab-left>\r\n        <div class=\"flex clr-align-items-center\">\r\n            <vdr-entity-info [entity]=\"entity$ | async\"></vdr-entity-info>\r\n            <vdr-order-state-label [state]=\"order.state\"></vdr-order-state-label>\r\n        </div>\r\n    </vdr-ab-left>\r\n\r\n    <vdr-ab-right>\r\n        <button class=\"btn btn-secondary\" (click)=\"transitionToPriorState(order)\">\r\n            {{ 'order.cancel-modification' | translate }}\r\n        </button>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<div *ngIf=\"entity$ | async as order\">\r\n    <div class=\"clr-row\">\r\n        <div class=\"clr-col-lg-8\">\r\n            <table class=\"order-table table\">\r\n                <thead>\r\n                    <tr>\r\n                        <th></th>\r\n                        <th>{{ 'order.product-name' | translate }}</th>\r\n                        <th>{{ 'order.product-sku' | translate }}</th>\r\n                        <th>{{ 'order.unit-price' | translate }}</th>\r\n                        <th>{{ 'order.quantity' | translate }}</th>\r\n                        <th *ngIf=\"orderLineCustomFields.length\">{{ 'common.custom-fields' | translate }}</th>\r\n                        <th>{{ 'order.total' | translate }}</th>\r\n                    </tr>\r\n                </thead>\r\n                <tbody>\r\n                    <tr\r\n                        *ngFor=\"let line of order.lines; let i = index\"\r\n                        class=\"order-line\"\r\n                        [class.is-cancelled]=\"line.quantity === 0\"\r\n                        [class.modified]=\"isLineModified(line)\"\r\n                    >\r\n                        <td class=\"align-middle thumb\">\r\n                            <img\r\n                                *ngIf=\"line.featuredAsset\"\r\n                                [src]=\"line.featuredAsset | assetPreview: 'tiny'\"\r\n                            />\r\n                        </td>\r\n                        <td class=\"align-middle name\">{{ line.productVariant.name }}</td>\r\n                        <td class=\"align-middle sku\">{{ line.productVariant.sku }}</td>\r\n                        <td class=\"align-middle unit-price\">\r\n                            {{ line.unitPriceWithTax | localeCurrency: order.currencyCode }}\r\n                            <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                {{ line.unitPrice | localeCurrency: order.currencyCode }}\r\n                            </div>\r\n                        </td>\r\n                        <td class=\"align-middle quantity\">\r\n                            <input\r\n                                type=\"number\"\r\n                                min=\"0\"\r\n                                [value]=\"line.quantity\"\r\n                                (input)=\"updateLineQuantity(line, $event.target.value)\"\r\n                            />\r\n                            <vdr-line-refunds [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\r\n                            <vdr-line-fulfillment\r\n                                [line]=\"line\"\r\n                                [orderState]=\"order.state\"\r\n                            ></vdr-line-fulfillment>\r\n                        </td>\r\n                        <td *ngIf=\"orderLineCustomFields.length\" class=\"order-line-custom-field align-middle\">\r\n                            <vdr-tabbed-custom-fields\r\n                                entityName=\"OrderLine\"\r\n                                [customFields]=\"orderLineCustomFields\"\r\n                                [customFieldsFormGroup]=\"orderLineCustomFieldsFormArray.get([i])\"\r\n                                [compact]=\"true\"\r\n                            ></vdr-tabbed-custom-fields>\r\n                        </td>\r\n                        <td class=\"align-middle total\">\r\n                            {{ line.linePriceWithTax | localeCurrency: order.currencyCode }}\r\n                            <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                {{ line.linePrice | localeCurrency: order.currencyCode }}\r\n                            </div>\r\n                        </td>\r\n                    </tr>\r\n                    <tr\r\n                        *ngFor=\"let addedLine of addedLines; trackBy: trackByProductVariantId; let i = index\"\r\n                        class=\"modified\"\r\n                    >\r\n                        <td class=\"align-middle thumb\">\r\n                            <img\r\n                                *ngIf=\"addedLine.productAsset\"\r\n                                [src]=\"addedLine.productAsset | assetPreview: 'tiny'\"\r\n                            />\r\n                        </td>\r\n                        <td class=\"align-middle name\">{{ addedLine.productVariantName }}</td>\r\n                        <td class=\"align-middle sku\">{{ addedLine.sku }}</td>\r\n                        <td class=\"align-middle unit-price\">\r\n                            {{ addedLine.priceWithTax | localeCurrency: order.currencyCode }}\r\n                            <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                {{ addedLine.price | localeCurrency: order.currencyCode }}\r\n                            </div>\r\n                        </td>\r\n                        <td class=\"align-middle quantity\">\r\n                            <input\r\n                                type=\"number\"\r\n                                min=\"0\"\r\n                                [value]=\"addedLine.quantity\"\r\n                                (input)=\"updateAddedItemQuantity(addedLine, $event.target.value)\"\r\n                            />\r\n                            <button class=\"icon-button\" (click)=\"removeAddedItem(i)\">\r\n                                <clr-icon shape=\"trash\"></clr-icon>\r\n                            </button>\r\n                        </td>\r\n                        <td *ngIf=\"orderLineCustomFields.length\" class=\"order-line-custom-field align-middle\">\r\n                            <ng-container *ngFor=\"let customField of orderLineCustomFields\">\r\n                                <vdr-custom-field-control\r\n                                    [customField]=\"customField\"\r\n                                    [customFieldsFormGroup]=\"addItemCustomFieldsFormArray.get([i])\"\r\n                                    entityName=\"OrderLine\"\r\n                                    [compact]=\"true\"\r\n                                ></vdr-custom-field-control>\r\n                            </ng-container>\r\n                        </td>\r\n                        <td class=\"align-middle total\">\r\n                            {{\r\n                                (addedLine.priceWithTax * addedLine.quantity) / 100\r\n                                    | currency: order.currencyCode\r\n                            }}\r\n                            <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                {{\r\n                                    (addedLine.price * addedLine.quantity) / 100\r\n                                        | currency: order.currencyCode\r\n                                }}\r\n                            </div>\r\n                        </td>\r\n                    </tr>\r\n                    <tr class=\"surcharge\" *ngFor=\"let surcharge of order.surcharges\">\r\n                        <td class=\"align-middle name left\" colspan=\"2\">{{ surcharge.description }}</td>\r\n                        <td class=\"align-middle sku\">{{ surcharge.sku }}</td>\r\n                        <td class=\"align-middle\"></td>\r\n                        <td></td>\r\n                        <td *ngIf=\"orderLineCustomFields.length\"></td>\r\n                        <td class=\"align-middle total\">\r\n                            {{ surcharge.priceWithTax | localeCurrency: order.currencyCode }}\r\n                            <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                {{ surcharge.price | localeCurrency: order.currencyCode }}\r\n                            </div>\r\n                        </td>\r\n                    </tr>\r\n                    <tr\r\n                        class=\"surcharge modified\"\r\n                        *ngFor=\"let surcharge of modifyOrderInput.surcharges; let i = index\"\r\n                    >\r\n                        <td class=\"align-middle name left\" colspan=\"2\">\r\n                            {{ surcharge.description }}\r\n                            <button class=\"icon-button\" (click)=\"removeSurcharge(i)\">\r\n                                <clr-icon shape=\"trash\"></clr-icon>\r\n                            </button>\r\n                        </td>\r\n                        <td class=\"align-middle sku\">{{ surcharge.sku }}</td>\r\n                        <td class=\"align-middle\"></td>\r\n                        <td></td>\r\n                        <td *ngIf=\"orderLineCustomFields.length\"></td>\r\n                        <td class=\"align-middle total\">\r\n                            <ng-container *ngIf=\"getSurchargePrices(surcharge) as surchargePrice\">\r\n                                {{ surchargePrice.priceWithTax | localeCurrency: order.currencyCode }}\r\n                                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                    {{ surchargePrice.price | localeCurrency: order.currencyCode }}\r\n                                </div>\r\n                            </ng-container>\r\n                        </td>\r\n                    </tr>\r\n                    <tr class=\"shipping\">\r\n                        <td class=\"left clr-align-middle\">{{ 'order.shipping' | translate }}</td>\r\n                        <td class=\"clr-align-middle\">{{ order.shippingLines[0]?.shippingMethod?.name }}</td>\r\n                        <td colspan=\"3\"></td>\r\n                        <td *ngIf=\"orderLineCustomFields.length\"></td>\r\n                        <td class=\"clr-align-middle\">\r\n                            {{ order.shippingWithTax | localeCurrency: order.currencyCode }}\r\n                            <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                {{ order.shipping | localeCurrency: order.currencyCode }}\r\n                            </div>\r\n                        </td>\r\n                    </tr>\r\n                </tbody>\r\n            </table>\r\n\r\n            <h4 class=\"mb2\">{{ 'order.modifications' | translate }}</h4>\r\n            <clr-accordion>\r\n                <clr-accordion-panel>\r\n                    <clr-accordion-title>{{ 'order.add-item-to-order' | translate }}</clr-accordion-title>\r\n                    <clr-accordion-content *clrIfExpanded>\r\n                        <vdr-product-selector class=\"mb4\" (productSelected)=\"addItemSelectedVariant = $event\">\r\n                        </vdr-product-selector>\r\n                        <div *ngIf=\"addItemSelectedVariant\" class=\"flex mb4\">\r\n                            <img\r\n                                *ngIf=\"addItemSelectedVariant.productAsset as asset\"\r\n                                [src]=\"asset | assetPreview: 'tiny'\"\r\n                                class=\"mr4\"\r\n                            />\r\n                            <div>\r\n                                <strong class=\"mr4\">{{ addItemSelectedVariant.productVariantName }}</strong>\r\n                                <small>{{ addItemSelectedVariant.sku }}</small>\r\n                                <div>\r\n                                    {{\r\n                                        getSelectedItemPrice(addItemSelectedVariant)\r\n                                            | localeCurrency: order.currencyCode\r\n                                    }}\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <ng-container *ngFor=\"let customField of orderLineCustomFields\">\r\n                            <vdr-custom-field-control\r\n                                [readonly]=\"!addItemSelectedVariant\"\r\n                                [customField]=\"customField\"\r\n                                [customFieldsFormGroup]=\"addItemCustomFieldsForm\"\r\n                                entityName=\"OrderLine\"\r\n                                [compact]=\"true\"\r\n                            ></vdr-custom-field-control>\r\n                        </ng-container>\r\n                        <button\r\n                            class=\"btn btn-secondary\"\r\n                            [disabled]=\"!addItemSelectedVariant || addItemCustomFieldsForm.invalid\"\r\n                            (click)=\"addItemToOrder(addItemSelectedVariant)\"\r\n                        >\r\n                            {{ 'order.add-item-to-order' | translate }}\r\n                        </button>\r\n                    </clr-accordion-content>\r\n                </clr-accordion-panel>\r\n                <clr-accordion-panel>\r\n                    <clr-accordion-title>{{ 'order.set-coupon-codes' | translate }}</clr-accordion-title>\r\n                    <clr-accordion-content *clrIfExpanded>\r\n                        <ng-select\r\n                            [items]=\"availableCouponCodes$ | async\"\r\n                            appendTo=\"body\"\r\n                            bindLabel=\"code\"\r\n                            bindValue=\"code\"\r\n                            [addTag]=\"false\"\r\n                            [multiple]=\"true\"\r\n                            [hideSelected]=\"true\"\r\n                            [minTermLength]=\"2\"\r\n                            typeToSearchText=\"\"\r\n                            [typeahead]=\"couponCodeInput$\"\r\n                            [formControl]=\"couponCodesControl\"\r\n                        >\r\n                            <ng-template ng-option-tmp let-item=\"item\">\r\n                                <vdr-chip>{{ item.code }}</vdr-chip>\r\n                                {{ item.promotionName }}\r\n                            </ng-template>\r\n                        </ng-select>\r\n                    </clr-accordion-content>\r\n                </clr-accordion-panel>\r\n\r\n                <clr-accordion-panel>\r\n                    <clr-accordion-title>{{ 'order.add-surcharge' | translate }}</clr-accordion-title>\r\n                    <clr-accordion-content *clrIfExpanded>\r\n                        <form [formGroup]=\"surchargeForm\" (submit)=\"addSurcharge(surchargeForm.value)\">\r\n                            <vdr-form-field [label]=\"'common.description' | translate\" for=\"description\"\r\n                                ><input id=\"description\" type=\"text\" formControlName=\"description\"\r\n                            /></vdr-form-field>\r\n                            <vdr-form-field [label]=\"'order.product-sku' | translate\" for=\"sku\"\r\n                                ><input id=\"sku\" type=\"text\" formControlName=\"sku\"\r\n                            /></vdr-form-field>\r\n                            <vdr-form-field [label]=\"'common.price' | translate\" for=\"price\">\r\n                                <vdr-currency-input\r\n                                    [currencyCode]=\"order.currencyCode\"\r\n                                    id=\"price\"\r\n                                    formControlName=\"price\"\r\n                                ></vdr-currency-input>\r\n                            </vdr-form-field>\r\n                            <vdr-form-field\r\n                                [label]=\"\r\n                                    'catalog.price-includes-tax-at'\r\n                                        | translate: { rate: surchargeForm.get('taxRate')?.value }\r\n                                \"\r\n                                for=\"priceIncludesTax\"\r\n                                ><input\r\n                                    id=\"priceIncludesTax\"\r\n                                    type=\"checkbox\"\r\n                                    clrCheckbox\r\n                                    formControlName=\"priceIncludesTax\"\r\n                            /></vdr-form-field>\r\n                            <vdr-form-field [label]=\"'order.tax-rate' | translate\" for=\"taxRate\">\r\n                                <vdr-affixed-input suffix=\"%\"\r\n                                    ><input\r\n                                        id=\"taxRate\"\r\n                                        type=\"number\"\r\n                                        min=\"0\"\r\n                                        max=\"100\"\r\n                                        formControlName=\"taxRate\"\r\n                                /></vdr-affixed-input>\r\n                            </vdr-form-field>\r\n                            <vdr-form-field [label]=\"'order.tax-description' | translate\" for=\"taxDescription\"\r\n                                ><input id=\"taxDescription\" type=\"text\" formControlName=\"taxDescription\"\r\n                            /></vdr-form-field>\r\n                            <button\r\n                                class=\"btn btn-secondary\"\r\n                                [disabled]=\"\r\n                                    surchargeForm.invalid ||\r\n                                    surchargeForm.pristine ||\r\n                                    surchargeForm.get('price')?.value === 0\r\n                                \"\r\n                            >\r\n                                {{ 'order.add-surcharge' | translate }}\r\n                            </button>\r\n                        </form>\r\n                    </clr-accordion-content>\r\n                </clr-accordion-panel>\r\n                <clr-accordion-panel>\r\n                    <clr-accordion-title>{{ 'order.edit-shipping-address' | translate }}</clr-accordion-title>\r\n                    <clr-accordion-content *clrIfExpanded>\r\n                        <vdr-address-form\r\n                            [formGroup]=\"shippingAddressForm\"\r\n                            [availableCountries]=\"availableCountries$ | async\"\r\n                            [customFields]=\"addressCustomFields\"\r\n                        ></vdr-address-form>\r\n                    </clr-accordion-content>\r\n                </clr-accordion-panel>\r\n                <clr-accordion-panel>\r\n                    <clr-accordion-title>{{ 'order.edit-billing-address' | translate }}</clr-accordion-title>\r\n                    <clr-accordion-content *clrIfExpanded>\r\n                        <vdr-address-form\r\n                            [formGroup]=\"billingAddressForm\"\r\n                            [availableCountries]=\"availableCountries$ | async\"\r\n                            [customFields]=\"addressCustomFields\"\r\n                        ></vdr-address-form>\r\n                    </clr-accordion-content>\r\n                </clr-accordion-panel>\r\n            </clr-accordion>\r\n        </div>\r\n        <div class=\"clr-col-lg-4 order-cards\">\r\n            <div class=\"card\">\r\n                <div class=\"card-header\">\r\n                    {{ 'order.modification-summary' | translate }}\r\n                </div>\r\n                <div class=\"card-block\">\r\n                    <ul>\r\n                        <li *ngIf=\"modifyOrderInput.addItems?.length\">\r\n                            {{\r\n                                'order.modification-adding-items'\r\n                                    | translate: { count: modifyOrderInput.addItems?.length }\r\n                            }}\r\n                        </li>\r\n                        <li *ngIf=\"modifyOrderInput.adjustOrderLines?.length\">\r\n                            {{\r\n                                'order.modification-adjusting-lines'\r\n                                    | translate: { count: modifyOrderInput.adjustOrderLines?.length }\r\n                            }}\r\n                        </li>\r\n                        <li *ngIf=\"modifyOrderInput.surcharges?.length\">\r\n                            {{\r\n                                'order.modification-adding-surcharges'\r\n                                    | translate: { count: modifyOrderInput.surcharges?.length }\r\n                            }}\r\n                        </li>\r\n                        <li *ngIf=\"shippingAddressForm.dirty\">\r\n                            {{ 'order.modification-updating-shipping-address' | translate }}\r\n                        </li>\r\n                        <li *ngIf=\"billingAddressForm.dirty\">\r\n                            {{ 'order.modification-updating-billing-address' | translate }}\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n                <div class=\"card-block\">\r\n                    <label class=\"clr-control-label\">{{ 'order.note' | translate }}</label>\r\n                    <textarea [(ngModel)]=\"note\" name=\"note\" clrTextarea required></textarea>\r\n                    <clr-checkbox-wrapper class=\"\">\r\n                        <input type=\"checkbox\" clrCheckbox [(ngModel)]=\"recalculateShipping\" />\r\n                        <label>{{ 'order.modification-recalculate-shipping' | translate }}</label>\r\n                    </clr-checkbox-wrapper>\r\n                </div>\r\n                <div class=\"card-footer\">\r\n                    <button\r\n                        class=\"btn btn-primary\"\r\n                        [disabled]=\"!canPreviewChanges()\"\r\n                        (click)=\"previewAndModify(order)\"\r\n                    >\r\n                        {{ 'order.preview-changes' | translate }}\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [".order-table .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}.order-table .sub-total td{border-top:1px dashed var(--color-component-border-200)}.order-table .total td{font-weight:bold;border-top:1px dashed var(--color-component-border-200)}.order-table td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}.order-table .order-line-custom-fields{display:flex;flex-wrap:wrap}.order-table .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-right:18px}.order-table .order-line-custom-field{background-color:var(--color-component-bg-100)}.order-table .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}.order-table .net-price{font-size:11px;color:var(--color-text-300)}.order-table .promotions-label{-webkit-text-decoration:underline dotted var(--color-text-200);text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}.order-table .thumb img{width:50px;height:50px}.order-table tr.modified td{background-color:var(--color-warning-100)}.order-table .order-line-custom-field{text-align:start}\n"]
-            },] }
-];
-OrderEditorComponent.ctorParameters = () => [
-    { type: Router },
-    { type: ActivatedRoute },
-    { type: ServerConfigService },
-    { type: ChangeDetectorRef },
-    { type: DataService },
-    { type: NotificationService },
-    { type: ModalService },
-    { type: OrderTransitionService }
-];
-
-class OrderHistoryComponent {
-    constructor() {
-        this.addNote = new EventEmitter();
-        this.updateNote = new EventEmitter();
-        this.deleteNote = new EventEmitter();
-        this.note = '';
-        this.noteIsPrivate = true;
-        this.expanded = false;
-        this.type = HistoryEntryType;
-    }
-    getDisplayType(entry) {
-        if (entry.type === HistoryEntryType.ORDER_STATE_TRANSITION) {
-            if (entry.data.to === 'Delivered') {
-                return 'success';
-            }
-            if (entry.data.to === 'Cancelled') {
-                return 'error';
-            }
-        }
-        if (entry.type === HistoryEntryType.ORDER_FULFILLMENT_TRANSITION) {
-            if (entry.data.to === 'Delivered') {
-                return 'success';
-            }
-        }
-        if (entry.type === HistoryEntryType.ORDER_PAYMENT_TRANSITION) {
-            if (entry.data.to === 'Declined' || entry.data.to === 'Cancelled') {
-                return 'error';
-            }
-        }
-        if (entry.type === HistoryEntryType.ORDER_CANCELLATION) {
-            return 'error';
-        }
-        if (entry.type === HistoryEntryType.ORDER_REFUND_TRANSITION) {
-            return 'warning';
-        }
-        return 'default';
-    }
-    getTimelineIcon(entry) {
-        if (entry.type === HistoryEntryType.ORDER_STATE_TRANSITION) {
-            if (entry.data.to === 'Delivered') {
-                return ['success-standard', 'is-solid'];
-            }
-            if (entry.data.to === 'Cancelled') {
-                return 'ban';
-            }
-        }
-        if (entry.type === HistoryEntryType.ORDER_PAYMENT_TRANSITION) {
-            if (entry.data.to === 'Settled') {
-                return 'credit-card';
-            }
-        }
-        if (entry.type === HistoryEntryType.ORDER_NOTE) {
-            return 'note';
-        }
-        if (entry.type === HistoryEntryType.ORDER_MODIFIED) {
-            return 'pencil';
-        }
-        if (entry.type === HistoryEntryType.ORDER_FULFILLMENT_TRANSITION) {
-            if (entry.data.to === 'Shipped') {
-                return 'truck';
-            }
-            if (entry.data.to === 'Delivered') {
-                return 'truck';
-            }
-        }
-    }
-    isFeatured(entry) {
-        switch (entry.type) {
-            case HistoryEntryType.ORDER_STATE_TRANSITION: {
-                return (entry.data.to === 'Delivered' ||
-                    entry.data.to === 'Cancelled' ||
-                    entry.data.to === 'Settled');
-            }
-            case HistoryEntryType.ORDER_PAYMENT_TRANSITION:
-                return entry.data.to === 'Settled' || entry.data.to === 'Cancelled';
-            case HistoryEntryType.ORDER_FULFILLMENT_TRANSITION:
-                return entry.data.to === 'Delivered' || entry.data.to === 'Shipped';
-            case HistoryEntryType.ORDER_NOTE:
-            case HistoryEntryType.ORDER_MODIFIED:
-                return true;
-            default:
-                return false;
-        }
-    }
-    getFulfillment(entry) {
-        if ((entry.type === HistoryEntryType.ORDER_FULFILLMENT ||
-            entry.type === HistoryEntryType.ORDER_FULFILLMENT_TRANSITION) &&
-            this.order.fulfillments) {
-            return this.order.fulfillments.find(f => f.id === entry.data.fulfillmentId);
-        }
-    }
-    getPayment(entry) {
-        if (entry.type === HistoryEntryType.ORDER_PAYMENT_TRANSITION && this.order.payments) {
-            return this.order.payments.find(p => p.id === entry.data.paymentId);
-        }
-    }
-    getCancelledItems(entry) {
-        const itemMap = new Map();
-        const cancelledItemIds = entry.data.orderItemIds;
-        for (const line of this.order.lines) {
-            for (const item of line.items) {
-                if (cancelledItemIds.includes(item.id)) {
-                    const count = itemMap.get(line.productVariant.name);
-                    if (count != null) {
-                        itemMap.set(line.productVariant.name, count + 1);
-                    }
-                    else {
-                        itemMap.set(line.productVariant.name, 1);
-                    }
-                }
-            }
-        }
-        return Array.from(itemMap.entries()).map(([name, quantity]) => ({ name, quantity }));
-    }
-    getModification(id) {
-        return this.order.modifications.find(m => m.id === id);
-    }
-    getName(entry) {
-        const { administrator } = entry;
-        if (administrator) {
-            return `${administrator.firstName} ${administrator.lastName}`;
-        }
-        else {
-            const customer = this.order.customer;
-            if (customer) {
-                return `${customer.firstName} ${customer.lastName}`;
-            }
-        }
-        return '';
-    }
-    addNoteToOrder() {
-        this.addNote.emit({ note: this.note, isPublic: !this.noteIsPrivate });
-        this.note = '';
-        this.noteIsPrivate = true;
-    }
-}
-OrderHistoryComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'vdr-order-history',
-                template: "<h4>{{ 'order.order-history' | translate }}</h4>\r\n<div class=\"entry-list\" [class.expanded]=\"expanded\">\r\n    <vdr-timeline-entry iconShape=\"note\" displayType=\"muted\" [featured]=\"true\">\r\n        <div class=\"note-entry\">\r\n            <textarea [(ngModel)]=\"note\" name=\"note\" class=\"note\"></textarea>\r\n            <button class=\"btn btn-secondary\" [disabled]=\"!note\" (click)=\"addNoteToOrder()\">\r\n                {{ 'common.add-note' | translate }}\r\n            </button>\r\n        </div>\r\n        <div class=\"visibility-select\">\r\n            <clr-checkbox-wrapper>\r\n                <input type=\"checkbox\" clrCheckbox [(ngModel)]=\"noteIsPrivate\" />\r\n                <label>{{ 'order.note-is-private' | translate }}</label>\r\n            </clr-checkbox-wrapper>\r\n            <span *ngIf=\"noteIsPrivate\" class=\"private\">\r\n                {{ 'order.note-only-visible-to-administrators' | translate }}\r\n            </span>\r\n            <span *ngIf=\"!noteIsPrivate\" class=\"public\">\r\n                {{ 'order.note-visible-to-customer' | translate }}\r\n            </span>\r\n        </div>\r\n    </vdr-timeline-entry>\r\n    <vdr-timeline-entry\r\n        *ngFor=\"let entry of history\"\r\n        [displayType]=\"getDisplayType(entry)\"\r\n        [iconShape]=\"getTimelineIcon(entry)\"\r\n        [createdAt]=\"entry.createdAt\"\r\n        [name]=\"getName(entry)\"\r\n        [featured]=\"isFeatured(entry)\"\r\n        [collapsed]=\"!expanded && !isFeatured(entry)\"\r\n        (expandClick)=\"expanded = !expanded\"\r\n    >\r\n        <ng-container [ngSwitch]=\"entry.type\">\r\n            <ng-container *ngSwitchCase=\"type.ORDER_STATE_TRANSITION\">\r\n                <div class=\"title\" *ngIf=\"entry.data.to === 'Delivered'\">\r\n                    {{ 'order.history-order-fulfilled' | translate }}\r\n                </div>\r\n                <div class=\"title\" *ngIf=\"entry.data.to === 'Cancelled'\">\r\n                    {{ 'order.history-order-cancelled' | translate }}\r\n                </div>\r\n                <ng-template [ngIf]=\"entry.data.to !== 'Cancelled' && entry.data.to !== 'Delivered'\">\r\n                    {{\r\n                        'order.history-order-transition'\r\n                            | translate: { from: entry.data.from, to: entry.data.to }\r\n                    }}\r\n                </ng-template>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"type.ORDER_MODIFIED\">\r\n                <div class=\"title\">\r\n                    {{ 'order.history-order-modified' | translate }}\r\n                </div>\r\n                <ng-container *ngIf=\"getModification(entry.data.modificationId) as modification\">\r\n                    {{ 'order.modify-order-price-difference' | translate }}:\r\n                    <strong>{{ modification.priceChange | localeCurrency: order.currencyCode }}</strong>\r\n                    <vdr-chip colorType=\"success\" *ngIf=\"modification.isSettled\">{{\r\n                        'order.modification-settled' | translate\r\n                    }}</vdr-chip>\r\n                    <vdr-chip colorType=\"error\" *ngIf=\"!modification.isSettled\">{{\r\n                        'order.modification-not-settled' | translate\r\n                    }}</vdr-chip>\r\n                    <vdr-history-entry-detail>\r\n                        <vdr-modification-detail\r\n                            [order]=\"order\"\r\n                            [modification]=\"modification\"\r\n                        ></vdr-modification-detail>\r\n                    </vdr-history-entry-detail>\r\n                </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"type.ORDER_PAYMENT_TRANSITION\">\r\n                <ng-container *ngIf=\"entry.data.to === 'Settled'; else regularPaymentTransition\">\r\n                    <div class=\"title\">\r\n                        {{ 'order.history-payment-settled' | translate }}\r\n                    </div>\r\n                    {{ 'order.transaction-id' | translate }}: {{ getPayment(entry)?.transactionId }}\r\n                    <vdr-history-entry-detail *ngIf=\"getPayment(entry) as payment\">\r\n                        <vdr-payment-detail\r\n                            [payment]=\"payment\"\r\n                            [currencyCode]=\"order.currencyCode\"\r\n                        ></vdr-payment-detail>\r\n                    </vdr-history-entry-detail>\r\n                </ng-container>\r\n                <ng-template #regularPaymentTransition>\r\n                    {{\r\n                        'order.history-payment-transition'\r\n                            | translate\r\n                                : {\r\n                                      from: entry.data.from,\r\n                                      to: entry.data.to,\r\n                                      id: getPayment(entry)?.transactionId\r\n                                  }\r\n                    }}\r\n                </ng-template>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"type.ORDER_REFUND_TRANSITION\">\r\n                {{\r\n                    'order.history-refund-transition'\r\n                        | translate: { from: entry.data.from, to: entry.data.to, id: entry.data.refundId }\r\n                }}\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"type.ORDER_CANCELLATION\">\r\n                {{ 'order.history-items-cancelled' | translate: { count: entry.data.orderItemIds.length } }}\r\n                <vdr-history-entry-detail *ngIf=\"getCancelledItems(entry) as items\">\r\n                    <vdr-labeled-data [label]=\"'order.cancellation-reason' | translate\">\r\n                        {{ entry.data.reason }}\r\n                    </vdr-labeled-data>\r\n                    <vdr-labeled-data [label]=\"'order.contents' | translate\">\r\n                        <vdr-simple-item-list [items]=\"items\"></vdr-simple-item-list>\r\n                    </vdr-labeled-data>\r\n                    <vdr-labeled-data [label]=\"'order.shipping-cancelled' | translate\">\r\n                        {{ entry.data.shippingCancelled }}\r\n                    </vdr-labeled-data>\r\n                </vdr-history-entry-detail>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"type.ORDER_FULFILLMENT\">\r\n                {{ 'order.history-fulfillment-created' | translate }}\r\n                <vdr-history-entry-detail *ngIf=\"getFulfillment(entry) as fulfillment\">\r\n                    <vdr-fulfillment-detail\r\n                        [fulfillmentId]=\"fulfillment.id\"\r\n                        [order]=\"order\"\r\n                    ></vdr-fulfillment-detail>\r\n                </vdr-history-entry-detail>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"type.ORDER_FULFILLMENT_TRANSITION\">\r\n                <ng-container *ngIf=\"entry.data.to === 'Delivered'\">\r\n                    <div class=\"title\">\r\n                        {{ 'order.history-fulfillment-delivered' | translate }}\r\n                    </div>\r\n                    {{ 'order.tracking-code' | translate }}: {{ getFulfillment(entry)?.trackingCode }}\r\n                </ng-container>\r\n                <ng-container *ngIf=\"entry.data.to === 'Shipped'\">\r\n                    <div class=\"title\">\r\n                        {{ 'order.history-fulfillment-shipped' | translate }}\r\n                    </div>\r\n                    {{ 'order.tracking-code' | translate }}: {{ getFulfillment(entry)?.trackingCode }}\r\n                </ng-container>\r\n                <ng-container *ngIf=\"entry.data.to !== 'Delivered' && entry.data.to !== 'Shipped'\">\r\n                    {{\r\n                        'order.history-fulfillment-transition'\r\n                            | translate: { from: entry.data.from, to: entry.data.to }\r\n                    }}\r\n                </ng-container>\r\n                <vdr-history-entry-detail *ngIf=\"getFulfillment(entry) as fulfillment\">\r\n                    <vdr-fulfillment-detail\r\n                        [fulfillmentId]=\"fulfillment.id\"\r\n                        [order]=\"order\"\r\n                    ></vdr-fulfillment-detail>\r\n                </vdr-history-entry-detail>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"type.ORDER_NOTE\">\r\n                <div class=\"flex\">\r\n                    <div class=\"note-text\">\r\n                        <span *ngIf=\"entry.isPublic\" class=\"note-visibility public\">{{\r\n                            'common.public' | translate\r\n                        }}</span>\r\n                        <span *ngIf=\"!entry.isPublic\" class=\"note-visibility private\">{{\r\n                            'common.private' | translate\r\n                        }}</span>\r\n                        {{ entry.data.note }}\r\n                    </div>\r\n                    <div class=\"flex-spacer\"></div>\r\n                    <vdr-dropdown>\r\n                        <button class=\"icon-button\" vdrDropdownTrigger>\r\n                            <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n                        </button>\r\n                        <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                            <button\r\n                                class=\"button\"\r\n                                vdrDropdownItem\r\n                                (click)=\"updateNote.emit(entry)\"\r\n                                [disabled]=\"!('UpdateOrder' | hasPermission)\"\r\n                            >\r\n                                <clr-icon shape=\"edit\"></clr-icon>\r\n                                {{ 'common.edit' | translate }}\r\n                            </button>\r\n                            <div class=\"dropdown-divider\"></div>\r\n                            <button\r\n                                class=\"button\"\r\n                                vdrDropdownItem\r\n                                (click)=\"deleteNote.emit(entry)\"\r\n                                [disabled]=\"!('UpdateOrder' | hasPermission)\"\r\n                            >\r\n                                <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                                {{ 'common.delete' | translate }}\r\n                            </button>\r\n                        </vdr-dropdown-menu>\r\n                    </vdr-dropdown>\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"type.ORDER_COUPON_APPLIED\">\r\n                {{ 'order.history-coupon-code-applied' | translate }}:\r\n                <vdr-chip>\r\n                    <a [routerLink]=\"['/marketing', 'promotions', entry.data.promotionId]\">{{\r\n                        entry.data.couponCode\r\n                    }}</a>\r\n                </vdr-chip>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"type.ORDER_COUPON_REMOVED\">\r\n                {{ 'order.history-coupon-code-removed' | translate }}:\r\n                <vdr-chip\r\n                    ><span class=\"cancelled-coupon-code\">{{ entry.data.couponCode }}</span></vdr-chip\r\n                >\r\n            </ng-container>\r\n        </ng-container>\r\n    </vdr-timeline-entry>\r\n    <vdr-timeline-entry [isLast]=\"true\" [createdAt]=\"order.createdAt\" [featured]=\"true\">\r\n        <div class=\"title\">\r\n            {{ 'order.history-order-created' | translate }}\r\n        </div>\r\n    </vdr-timeline-entry>\r\n</div>\r\n",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [":host{margin-top:48px;display:block}.entry-list{margin-top:24px;margin-left:24px;margin-right:12px}.note-entry{display:flex;align-items:center}.note-entry .note{flex:1}.note-entry button{margin:0}.visibility-select{display:flex;justify-content:space-between;align-items:baseline}.visibility-select .public{color:var(--color-warning-500)}.visibility-select .private{color:var(--color-success-500)}textarea.note{flex:1;height:36px;border-radius:3px;margin-right:6px}.note-text{color:var(--color-grey-800);white-space:pre-wrap}.cancelled-coupon-code{text-decoration:line-through}.note-visibility{text-transform:lowercase}.note-visibility.public{color:var(--color-warning-500)}.note-visibility.private{color:var(--color-success-500)}\n"]
-            },] }
-];
-OrderHistoryComponent.propDecorators = {
-    order: [{ type: Input }],
-    history: [{ type: Input }],
-    addNote: [{ type: Output }],
-    updateNote: [{ type: Output }],
-    deleteNote: [{ type: Output }]
-};
-
-class OrderListComponent extends BaseListComponent {
-    constructor(serverConfigService, dataService, localStorageService, router, route) {
-        super(router, route);
-        this.serverConfigService = serverConfigService;
-        this.dataService = dataService;
-        this.localStorageService = localStorageService;
-        this.searchControl = new FormControl('');
-        this.searchOrderCodeControl = new FormControl('');
-        this.searchLastNameControl = new FormControl('');
-        this.orderStates = this.serverConfigService.getOrderProcessStates().map(item => item.name);
-        this.filterPresets = [
-            {
-                name: 'open',
-                label: marker('order.filter-preset-open'),
-                config: {
-                    active: false,
-                    states: this.orderStates.filter(s => s !== 'Delivered' && s !== 'Cancelled' && s !== 'Shipped'),
-                },
-            },
-            {
-                name: 'shipped',
-                label: marker('order.filter-preset-shipped'),
-                config: {
-                    active: false,
-                    states: ['Shipped'],
-                },
-            },
-            {
-                name: 'completed',
-                label: marker('order.filter-preset-completed'),
-                config: {
-                    active: false,
-                    states: ['Delivered', 'Cancelled'],
-                },
-            },
-            {
-                name: 'active',
-                label: marker('order.filter-preset-active'),
-                config: {
-                    active: true,
-                },
-            },
-        ];
-        super.setQueryFn(
-        // tslint:disable-next-line:no-shadowed-variable
-        (take, skip) => this.dataService.order.getOrders({ take, skip }).refetchOnChannelChange(), data => data.orders, 
-        // tslint:disable-next-line:no-shadowed-variable
-        (skip, take) => this.createQueryOptions(skip, take, this.searchControl.value, this.route.snapshot.queryParamMap.get('filter') || 'open'));
-        const lastFilters = this.localStorageService.get('orderListLastCustomFilters');
-        if (lastFilters) {
-            this.setQueryParam(lastFilters, { replaceUrl: true });
-        }
-    }
-    ngOnInit() {
-        var _a;
-        super.ngOnInit();
-        this.activePreset$ = this.route.queryParamMap.pipe(map(qpm => qpm.get('filter') || 'open'), distinctUntilChanged());
-        const searchTerms$ = merge(this.searchControl.valueChanges).pipe(filter(value => 2 < value.length || value.length === 0), debounceTime(250));
-        merge(searchTerms$, this.route.queryParamMap)
-            .pipe(takeUntil(this.destroy$))
-            .subscribe(val => {
-            this.refresh();
-        });
-        const queryParamMap = this.route.snapshot.queryParamMap;
-        this.customFilterForm = new FormGroup({
-            states: new FormControl((_a = queryParamMap.getAll('states')) !== null && _a !== void 0 ? _a : []),
-            placedAtStart: new FormControl(queryParamMap.get('placedAtStart')),
-            placedAtEnd: new FormControl(queryParamMap.get('placedAtEnd')),
-        });
-    }
-    selectFilterPreset(presetName) {
-        var _a;
-        const lastCustomFilters = (_a = this.localStorageService.get('orderListLastCustomFilters')) !== null && _a !== void 0 ? _a : {};
-        const emptyCustomFilters = { states: undefined, placedAtStart: undefined, placedAtEnd: undefined };
-        const filters = presetName === 'custom' ? lastCustomFilters : emptyCustomFilters;
-        this.setQueryParam(Object.assign({ filter: presetName, page: 1 }, filters), { replaceUrl: true });
-    }
-    applyCustomFilters() {
-        const formValue = this.customFilterForm.value;
-        const customFilters = {
-            states: formValue.states,
-            placedAtStart: formValue.placedAtStart,
-            placedAtEnd: formValue.placedAtEnd,
-        };
-        this.setQueryParam(Object.assign({ filter: 'custom' }, customFilters));
-        this.customFilterForm.markAsPristine();
-        this.localStorageService.set('orderListLastCustomFilters', customFilters);
-    }
-    createQueryOptions(
-    // tslint:disable-next-line:no-shadowed-variable
-    skip, take, searchTerm, activeFilterPreset) {
-        var _a;
-        const filterConfig = this.filterPresets.find(p => p.name === activeFilterPreset);
-        // tslint:disable-next-line:no-shadowed-variable
-        let filter = {};
-        let filterOperator = LogicalOperator.AND;
-        if (filterConfig) {
-            if (filterConfig.config.active != null) {
-                filter.active = {
-                    eq: filterConfig.config.active,
-                };
-            }
-            if (filterConfig.config.states) {
-                filter.state = {
-                    in: filterConfig.config.states,
-                };
-            }
-        }
-        else if (activeFilterPreset === 'custom') {
-            const queryParams = this.route.snapshot.queryParamMap;
-            const states = (_a = queryParams.getAll('states')) !== null && _a !== void 0 ? _a : [];
-            const placedAtStart = queryParams.get('placedAtStart');
-            const placedAtEnd = queryParams.get('placedAtEnd');
-            if (states.length) {
-                filter.state = {
-                    in: states,
-                };
-            }
-            if (placedAtStart && placedAtEnd) {
-                filter.orderPlacedAt = {
-                    between: {
-                        start: placedAtStart,
-                        end: placedAtEnd,
-                    },
-                };
-            }
-            else if (placedAtStart) {
-                filter.orderPlacedAt = {
-                    after: placedAtStart,
-                };
-            }
-            else if (placedAtEnd) {
-                filter.orderPlacedAt = {
-                    before: placedAtEnd,
-                };
-            }
-        }
-        if (searchTerm) {
-            filter = {
-                customerLastName: {
-                    contains: searchTerm,
-                },
-                transactionId: {
-                    contains: searchTerm,
-                },
-                code: {
-                    contains: searchTerm,
-                },
-            };
-            filterOperator = LogicalOperator.OR;
-        }
-        return {
-            options: {
-                skip,
-                take,
-                filter: Object.assign({}, (filter !== null && filter !== void 0 ? filter : {})),
-                sort: {
-                    updatedAt: SortOrder.DESC,
-                },
-                filterOperator,
-            },
-        };
-    }
-    getShippingNames(order) {
-        if (order.shippingLines.length) {
-            return order.shippingLines.map(shippingLine => shippingLine.shippingMethod.name).join(', ');
-        }
-        else {
-            return '';
-        }
-    }
-}
-OrderListComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'vdr-order-list',
-                template: "<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <div class=\"search-form\">\r\n            <div class=\"btn-group btn-outline-primary\" *ngIf=\"activePreset$ | async as activePreset\">\r\n                <button\r\n                    class=\"btn\"\r\n                    *ngFor=\"let preset of filterPresets\"\r\n                    [class.btn-primary]=\"activePreset === preset.name\"\r\n                    (click)=\"selectFilterPreset(preset.name)\"\r\n                >\r\n                    {{ preset.label | translate }}\r\n                </button>\r\n                <button\r\n                    class=\"btn\"\r\n                    [class.btn-primary]=\"activePreset === 'custom'\"\r\n                    (click)=\"selectFilterPreset('custom')\"\r\n                >\r\n                    {{ 'order.filter-custom' | translate }}\r\n                    <clr-icon shape=\"angle down\"></clr-icon>\r\n                </button>\r\n            </div>\r\n            <input\r\n                type=\"text\"\r\n                name=\"searchTerm\"\r\n                [formControl]=\"searchControl\"\r\n                [placeholder]=\"'order.search-by-order-filters' | translate\"\r\n                class=\"search-input\"\r\n            />\r\n        </div>\r\n        <div class=\"custom-filters\" [class.expanded]=\"(activePreset$ | async) === 'custom'\">\r\n            <form [formGroup]=\"customFilterForm\">\r\n                <div class=\"flex align-center\">\r\n                    <ng-select\r\n                        [items]=\"orderStates\"\r\n                        appendTo=\"body\"\r\n                        [addTag]=\"false\"\r\n                        [multiple]=\"true\"\r\n                        formControlName=\"states\"\r\n                        [placeholder]=\"'state.all-orders' | translate\"\r\n                        [clearable]=\"true\"\r\n                        [searchable]=\"false\"\r\n                    >\r\n                        <ng-template ng-option-tmp let-item=\"item\">{{ item | stateI18nToken | translate }}</ng-template>\r\n                        <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n                            <span class=\"ng-value-label\"> {{ item | stateI18nToken | translate }}</span>\r\n                            <span class=\"ng-value-icon right\" (click)=\"clear(item)\" aria-hidden=\"true\">\u00D7</span>\r\n                        </ng-template>\r\n                    </ng-select>\r\n                    <button\r\n                        class=\"btn btn-secondary\"\r\n                        [disabled]=\"customFilterForm.pristine\"\r\n                        (click)=\"applyCustomFilters()\"\r\n                    >\r\n                        {{ 'order.apply-filters' | translate }}\r\n                        <clr-icon shape=\"filter\"></clr-icon>\r\n                    </button>\r\n                </div>\r\n                <div class=\"flex\">\r\n                    <div>\r\n                        <label>{{ 'order.placed-at-start' | translate }}</label>\r\n                        <vdr-datetime-picker formControlName=\"placedAtStart\"></vdr-datetime-picker>\r\n                    </div>\r\n                    <div>\r\n                        <label>{{ 'order.placed-at-end' | translate }}</label>\r\n                        <vdr-datetime-picker formControlName=\"placedAtEnd\"></vdr-datetime-picker>\r\n                    </div>\r\n                </div>\r\n            </form>\r\n        </div>\r\n    </vdr-ab-left>\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"order-list\"></vdr-action-bar-items>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<vdr-data-table\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n>\r\n    <vdr-dt-column>{{ 'common.code' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'order.customer' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'order.state' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'order.total' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'common.updated-at' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'order.placed-at' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'order.shipping' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column></vdr-dt-column>\r\n    <ng-template let-order=\"item\">\r\n        <td class=\"left align-middle\">{{ order.code }}</td>\r\n        <td class=\"left align-middle\">\r\n            <vdr-customer-label [customer]=\"order.customer\"></vdr-customer-label>\r\n        </td>\r\n        <td class=\"left align-middle\">\r\n            <vdr-order-state-label [state]=\"order.state\"></vdr-order-state-label>\r\n        </td>\r\n        <td class=\"left align-middle\">{{ order.totalWithTax | localeCurrency: order.currencyCode }}</td>\r\n        <td class=\"left align-middle\">{{ order.updatedAt | timeAgo }}</td>\r\n        <td class=\"left align-middle\">{{ order.orderPlacedAt | localeDate: 'medium' }}</td>\r\n        <td class=\"left align-middle\">{{ getShippingNames(order) }}</td>\r\n        <td class=\"right align-middle\">\r\n            <vdr-table-row-action\r\n                iconShape=\"shopping-cart\"\r\n                [label]=\"'common.open' | translate\"\r\n                [linkTo]=\"order.state === 'Modifying' ? ['./', order.id, 'modify'] : ['./', order.id]\"\r\n            ></vdr-table-row-action>\r\n        </td>\r\n    </ng-template>\r\n</vdr-data-table>\r\n",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [".search-form{display:flex;flex-direction:column;align-items:baseline;width:100%;margin-bottom:6px}@media screen and (min-width: 768px){.search-form{flex-direction:row}}.search-input{margin-left:6px;margin-top:6px;min-width:300px}.custom-filters{overflow:hidden;max-height:0;padding-bottom:6px}.custom-filters.expanded{max-height:initial}.custom-filters>form{display:flex;flex-direction:column;align-items:center}.custom-filters>form>div{width:100%}ng-select{flex:1;min-width:200px;height:36px}ng-select ::ng-deep .ng-select-container{height:36px}\n"]
-            },] }
-];
-OrderListComponent.ctorParameters = () => [
-    { type: ServerConfigService },
-    { type: DataService },
-    { type: LocalStorageService },
-    { type: Router },
-    { type: ActivatedRoute }
-];
-
-class OrderPaymentCardComponent {
-    constructor() {
-        this.settlePayment = new EventEmitter();
-        this.transitionPaymentState = new EventEmitter();
-        this.settleRefund = new EventEmitter();
-    }
-    refundHasMetadata(refund) {
-        return !!refund && Object.keys(refund.metadata).length > 0;
-    }
-    nextOtherStates() {
-        if (!this.payment) {
-            return [];
-        }
-        return this.payment.nextStates.filter(s => s !== 'Settled' && s !== 'Error');
-    }
-}
-OrderPaymentCardComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'vdr-order-payment-card',
-                template: "<div class=\"card\">\r\n    <div class=\"card-header payment-header\">\r\n        <div>\r\n            {{ 'order.payment' | translate }}\r\n            <ng-container *ngIf=\"payment.transactionId\">#{{ payment.transactionId }}</ng-container>\r\n        </div>\r\n        <div class=\"payment-state\">\r\n            <vdr-payment-state-label [state]=\"payment.state\"></vdr-payment-state-label>\r\n        </div>\r\n    </div>\r\n    <div class=\"card-block\">\r\n        <vdr-payment-detail [payment]=\"payment\" [currencyCode]=\"currencyCode\"></vdr-payment-detail>\r\n    </div>\r\n    <ng-container *ngFor=\"let refund of payment.refunds\">\r\n        <div class=\"card-header payment-header\">\r\n            <clr-icon shape=\"redo\" class=\"refund-icon\" dir=\"down\"></clr-icon>\r\n            {{ 'order.refund' | translate }} #{{ refund.id }}\r\n            <div class=\"clr-flex-fill\"></div>\r\n            <vdr-refund-state-label [state]=\"refund.state\"></vdr-refund-state-label>\r\n        </div>\r\n        <div class=\"card-block\">\r\n            <vdr-labeled-data [label]=\"'common.created-at' | translate\">\r\n                {{ refund.createdAt | localeDate: 'medium' }}\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data [label]=\"'order.refund-total' | translate\">\r\n                {{ refund.total | localeCurrency: currencyCode }}\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data [label]=\"'order.transaction-id' | translate\" *ngIf=\"refund.transactionId\">\r\n                {{ refund.transactionId }}\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data [label]=\"'order.refund-reason' | translate\" *ngIf=\"refund.reason\">\r\n                {{ refund.reason }}\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data [label]=\"'order.refund-metadata' | translate\" *ngIf=\"refundHasMetadata(refund)\">\r\n                <vdr-object-tree [value]=\"refund.metadata\"></vdr-object-tree>\r\n            </vdr-labeled-data>\r\n        </div>\r\n        <div class=\"card-footer\" *ngIf=\"refund.state === 'Pending'\">\r\n            <button class=\"btn btn-sm btn-primary\" (click)=\"settleRefund.emit(refund)\">\r\n                {{ 'order.settle-refund' | translate }}\r\n            </button>\r\n        </div>\r\n    </ng-container>\r\n    <div class=\"card-footer\" *ngIf=\"payment.nextStates.length\">\r\n        <button\r\n            class=\"btn btn-sm btn-primary\"\r\n            *ngIf=\"payment.nextStates.includes('Settled')\"\r\n            (click)=\"settlePayment.emit(payment)\"\r\n        >\r\n            {{ 'order.settle-payment' | translate }}\r\n        </button>\r\n        <vdr-dropdown>\r\n            <button class=\"icon-button\" vdrDropdownTrigger>\r\n                <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n            </button>\r\n            <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                <ng-container *ngFor=\"let nextState of nextOtherStates()\">\r\n                    <button\r\n                        type=\"button\"\r\n                        class=\"btn\"\r\n                        vdrDropdownItem\r\n                        (click)=\"transitionPaymentState.emit({ payment: payment, state: nextState })\"\r\n                    >\r\n                        <ng-container *ngIf=\"nextState !== 'Cancelled'; else cancel\">\r\n                            <clr-icon shape=\"step-forward-2\"></clr-icon>\r\n                            {{\r\n                                'order.transition-to-state'\r\n                                    | translate: { state: (nextState | stateI18nToken | translate) }\r\n                            }}\r\n                        </ng-container>\r\n                        <ng-template #cancel>\r\n                            <clr-icon shape=\"error-standard\" class=\"is-error\"></clr-icon>\r\n                            {{ 'order.cancel-payment' | translate }}\r\n                        </ng-template>\r\n                    </button>\r\n                </ng-container>\r\n            </vdr-dropdown-menu>\r\n        </vdr-dropdown>\r\n    </div>\r\n</div>\r\n",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [".payment-header{display:flex;justify-content:space-between;align-items:center}.refund-icon{margin-right:6px;color:var(--color-grey-400)}.card-footer{display:flex;align-items:center;justify-content:flex-end}\n"]
-            },] }
-];
-OrderPaymentCardComponent.propDecorators = {
-    payment: [{ type: Input }],
-    currencyCode: [{ type: Input }],
-    settlePayment: [{ type: Output }],
-    transitionPaymentState: [{ type: Output }],
-    settleRefund: [{ type: Output }]
-};
-
-const NODE_HEIGHT = 72;
-
-class OrderProcessEdgeComponent {
-    ngOnInit() {
-        this.active$ = this.from.active$
-            .asObservable()
-            .pipe(tap((active) => this.to.activeTarget$.next(active)));
-    }
-    getStyle() {
-        const direction = this.from.index < this.to.index ? 'down' : 'up';
-        const startPos = this.from.getPos(direction === 'down' ? 'bottom' : 'top');
-        const endPos = this.to.getPos(direction === 'down' ? 'top' : 'bottom');
-        const dX = Math.abs(startPos.x - endPos.x);
-        const dY = Math.abs(startPos.y - endPos.y);
-        const length = Math.sqrt(Math.pow(dX, 2) + Math.pow(dY, 2));
-        return Object.assign({ 'top.px': startPos.y, 'left.px': startPos.x + (direction === 'down' ? 10 : 40) + this.index * 12, 'height.px': length, 'width.px': 1 }, (direction === 'up'
-            ? {
-                transform: 'rotateZ(180deg)',
-                'transform-origin': 'top',
-            }
-            : {}));
-    }
-}
-OrderProcessEdgeComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'vdr-order-process-edge',
-                template: "<div\r\n    [attr.data-from]=\"from.node.name\"\r\n    [attr.data-to]=\"to.node.name\"\r\n    [ngStyle]=\"getStyle()\"\r\n    [class.active]=\"active$ | async\"\r\n    class=\"edge\">\r\n    <clr-icon shape=\"arrow\" flip=\"vertical\" class=\"arrow\"></clr-icon>\r\n</div>\r\n",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [".edge{position:absolute;border:1px solid var(--color-component-border-200);background-color:var(--color-component-bg-300);opacity:.3;transition:border .2s,opacity .2s,background-color .2s}.edge.active{border-color:var(--color-primary-500);background-color:var(--color-primary-500);opacity:1}.edge.active .arrow{color:var(--color-primary-500)}.edge .arrow{position:absolute;bottom:-4px;left:-8px;color:var(--color-grey-300)}\n"]
-            },] }
-];
-OrderProcessEdgeComponent.propDecorators = {
-    from: [{ type: Input }],
-    to: [{ type: Input }],
-    index: [{ type: Input }]
-};
-
-class OrderProcessNodeComponent {
-    constructor(elementRef) {
-        this.elementRef = elementRef;
-        this.active$ = new BehaviorSubject(false);
-        this.activeTarget$ = new BehaviorSubject(false);
-        this.isCancellable = false;
-        // We use a class field here to prevent the
-        // i18n extractor from extracting a "Cancelled" key
-        this.cancelledState = 'Cancelled';
-    }
-    ngOnChanges(changes) {
-        this.isCancellable = !!this.node.to.find((s) => s.name === 'Cancelled');
-        if (changes.active) {
-            this.active$.next(this.active);
-        }
-    }
-    getPos(origin = 'top') {
-        var _a, _b;
-        const rect = this.elementRef.nativeElement.getBoundingClientRect();
-        const nodeHeight = (_b = (_a = this.elementRef.nativeElement.querySelector('.node')) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().height) !== null && _b !== void 0 ? _b : 0;
-        return {
-            x: 10,
-            y: this.index * NODE_HEIGHT + (origin === 'bottom' ? nodeHeight : 0),
-        };
-    }
-    getStyle() {
-        const pos = this.getPos();
-        return {
-            'top.px': pos.y,
-            'left.px': pos.x,
-        };
-    }
-}
-OrderProcessNodeComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'vdr-order-process-node',
-                template: "<div class=\"node-wrapper\" [ngStyle]=\"getStyle()\" [class.active]=\"active$ | async\">\r\n    <div\r\n        class=\"node\"\r\n        [class.active-target]=\"activeTarget$ | async\"\r\n    >\r\n        {{ node.name | stateI18nToken | translate }}\r\n    </div>\r\n    <div class=\"cancelled-wrapper\" *ngIf=\"isCancellable\">\r\n        <div class=\"cancelled-edge\">\r\n        </div>\r\n        <clr-icon shape=\"dot-circle\"></clr-icon>\r\n        <div class=\"cancelled-node\">\r\n            {{ cancelledState | stateI18nToken | translate }}\r\n        </div>\r\n    </div>\r\n</div>\r\n",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [":host{display:block}.node-wrapper{position:absolute;z-index:1;display:flex;align-items:center}.node{display:inline-block;border:2px solid var(--color-component-border-200);border-radius:3px;padding:3px 6px;z-index:1;background-color:var(--color-component-bg-100);opacity:.7;transition:opacity .2s,background-color .2s,color .2s;cursor:default}.node.active-target{border-color:var(--color-primary-500);opacity:.9}.cancelled-wrapper{display:flex;align-items:center;color:var(--color-grey-300);transition:color .2s,opacity .2s;opacity:.7}.cancelled-edge{width:48px;height:2px;background-color:var(--color-component-bg-300);transition:background-color .2s}clr-icon{margin-left:-1px}.cancelled-node{margin-left:6px}.active .cancelled-wrapper{opacity:1}.active .node{opacity:1;background-color:var(--color-primary-600);border-color:var(--color-primary-600);color:var(--color-primary-100)}.active .cancelled-wrapper{color:var(--color-error-500)}.active .cancelled-edge{background-color:var(--color-error-500)}\n"]
-            },] }
-];
-OrderProcessNodeComponent.ctorParameters = () => [
-    { type: ElementRef }
-];
-OrderProcessNodeComponent.propDecorators = {
-    node: [{ type: Input }],
-    index: [{ type: Input }],
-    active: [{ type: Input }]
-};
-
-class OrderProcessGraphComponent {
-    constructor(changeDetector) {
-        this.changeDetector = changeDetector;
-        this.setActiveState$ = new BehaviorSubject(undefined);
-        this.nodes = [];
-        this.edges = [];
-    }
-    get outerHeight() {
-        return this.nodes.length * NODE_HEIGHT;
-    }
-    ngOnInit() {
-        this.setActiveState$.next(this.initialState);
-        this.activeState$ = this.setActiveState$.pipe(debounceTime(150));
-    }
-    ngOnChanges(changes) {
-        this.populateNodes();
-    }
-    ngAfterViewInit() {
-        setTimeout(() => this.populateEdges());
-    }
-    onMouseOver(stateName) {
-        this.setActiveState$.next(stateName);
-    }
-    onMouseOut() {
-        this.setActiveState$.next(this.initialState);
-    }
-    getNodeFor(state) {
-        if (this.nodeComponents) {
-            return this.nodeComponents.find((n) => n.node.name === state);
-        }
-    }
-    populateNodes() {
-        var _a, _b;
-        const stateNodeMap = new Map();
-        for (const state of this.states) {
-            stateNodeMap.set(state.name, {
-                name: state.name,
-                to: [],
-            });
-        }
-        for (const [name, stateNode] of stateNodeMap.entries()) {
-            const targets = (_b = (_a = this.states.find((s) => s.name === name)) === null || _a === void 0 ? void 0 : _a.to) !== null && _b !== void 0 ? _b : [];
-            for (const target of targets) {
-                const targetNode = stateNodeMap.get(target);
-                if (targetNode) {
-                    stateNode.to.push(targetNode);
-                }
-            }
-        }
-        this.nodes = [...stateNodeMap.values()].filter((n) => n.name !== 'Cancelled');
-    }
-    populateEdges() {
-        for (const node of this.nodes) {
-            const nodeCmp = this.getNodeFor(node.name);
-            let index = 0;
-            for (const to of node.to) {
-                const toCmp = this.getNodeFor(to.name);
-                if (nodeCmp && toCmp && nodeCmp !== toCmp) {
-                    this.edges.push({
-                        to: toCmp,
-                        from: nodeCmp,
-                        index,
-                    });
-                    index++;
-                }
-            }
-        }
-        this.edges = [...this.edges];
-        this.changeDetector.markForCheck();
-    }
-}
-OrderProcessGraphComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'vdr-order-process-graph',
-                template: "<ng-container *ngFor=\"let state of nodes; let i = index\">\r\n    <vdr-order-process-node\r\n        [node]=\"state\"\r\n        [index]=\"i\"\r\n        [active]=\"(activeState$ | async) === state.name\"\r\n        (mouseenter)=\"onMouseOver(state.name)\"\r\n        (mouseleave)=\"onMouseOut()\"\r\n    ></vdr-order-process-node>\r\n</ng-container>\r\n<ng-container *ngFor=\"let edge of edges\">\r\n    <vdr-order-process-edge [from]=\"edge.from\" [to]=\"edge.to\" [index]=\"edge.index\"></vdr-order-process-edge>\r\n</ng-container>\r\n",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [":host{display:block;border:1px hotpink;margin:20px;padding:12px;position:relative}.state-row{display:flex}\n"]
-            },] }
-];
-OrderProcessGraphComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef }
-];
-OrderProcessGraphComponent.propDecorators = {
-    states: [{ type: Input }],
-    initialState: [{ type: Input }],
-    nodeComponents: [{ type: ViewChildren, args: [OrderProcessNodeComponent,] }],
-    outerHeight: [{ type: HostBinding, args: ['style.height.px',] }]
-};
-
-class OrderTableComponent {
-    constructor() {
-        this.orderLineCustomFieldsVisible = false;
-        this.customFieldsForLine = {};
-    }
-    get visibleOrderLineCustomFields() {
-        return this.orderLineCustomFieldsVisible ? this.orderLineCustomFields : [];
-    }
-    get showElided() {
-        return !this.orderLineCustomFieldsVisible && 0 < this.orderLineCustomFields.length;
-    }
-    ngOnInit() {
-        this.orderLineCustomFieldsVisible = this.orderLineCustomFields.length < 2;
-        this.getLineCustomFields();
-    }
-    toggleOrderLineCustomFields() {
-        this.orderLineCustomFieldsVisible = !this.orderLineCustomFieldsVisible;
-    }
-    getLineDiscounts(line) {
-        return line.discounts.filter(a => a.type === AdjustmentType.PROMOTION);
-    }
-    getLineCustomFields() {
-        for (const line of this.order.lines) {
-            const formGroup = new FormGroup({});
-            const result = this.orderLineCustomFields
-                .map(config => {
-                const value = line.customFields[config.name];
-                formGroup.addControl(config.name, new FormControl(value));
-                return {
-                    config,
-                    formGroup,
-                    value,
-                };
-            })
-                .filter(field => {
-                return this.orderLineCustomFieldsVisible ? true : field.value != null;
-            });
-            this.customFieldsForLine[line.id] = result;
-        }
-    }
-    getPromotionLink(promotion) {
-        const id = promotion.adjustmentSource.split(':')[1];
-        return ['/marketing', 'promotions', id];
-    }
-    getCouponCodeForAdjustment(order, promotionAdjustment) {
-        const id = promotionAdjustment.adjustmentSource.split(':')[1];
-        const promotion = order.promotions.find(p => p.id === id);
-        if (promotion) {
-            return promotion.couponCode || undefined;
-        }
-    }
-    getShippingNames(order) {
-        if (order.shippingLines.length) {
-            return order.shippingLines.map(shippingLine => shippingLine.shippingMethod.name).join(', ');
-        }
-        else {
-            return '';
-        }
-    }
-}
-OrderTableComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'vdr-order-table',
-                template: "<table class=\"order-table table\">\r\n    <thead>\r\n        <tr>\r\n            <th></th>\r\n            <th>{{ 'order.product-name' | translate }}</th>\r\n            <th>{{ 'order.product-sku' | translate }}</th>\r\n            <th>{{ 'order.unit-price' | translate }}</th>\r\n            <th>{{ 'order.quantity' | translate }}</th>\r\n            <th>{{ 'order.total' | translate }}</th>\r\n        </tr>\r\n    </thead>\r\n    <tbody>\r\n        <ng-container *ngFor=\"let line of order.lines\">\r\n            <tr class=\"order-line\" [class.is-cancelled]=\"line.quantity === 0\">\r\n                <td class=\"align-middle thumb\">\r\n                    <img *ngIf=\"line.featuredAsset\" [src]=\"line.featuredAsset | assetPreview: 'tiny'\" />\r\n                </td>\r\n                <td class=\"align-middle name\">{{ line.productVariant.name }}</td>\r\n                <td class=\"align-middle sku\">{{ line.productVariant.sku }}</td>\r\n                <td class=\"align-middle unit-price\">\r\n                    {{ line.unitPriceWithTax | localeCurrency: order.currencyCode }}\r\n                    <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                        {{ line.unitPrice | localeCurrency: order.currencyCode }}\r\n                    </div>\r\n                </td>\r\n                <td class=\"align-middle quantity\">\r\n                    {{ line.quantity }}\r\n                    <vdr-line-refunds [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\r\n                    <vdr-line-fulfillment [line]=\"line\" [orderState]=\"order.state\"></vdr-line-fulfillment>\r\n                </td>\r\n                <td class=\"align-middle total\">\r\n                    {{ line.linePriceWithTax | localeCurrency: order.currencyCode }}\r\n                    <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                        {{ line.linePrice | localeCurrency: order.currencyCode }}\r\n                    </div>\r\n\r\n                    <ng-container *ngIf=\"getLineDiscounts(line) as discounts\">\r\n                        <vdr-dropdown *ngIf=\"discounts.length\">\r\n                            <div class=\"promotions-label\" vdrDropdownTrigger>\r\n                                {{ 'order.promotions-applied' | translate }}\r\n                            </div>\r\n                            <vdr-dropdown-menu>\r\n                                <div class=\"line-promotion\" *ngFor=\"let discount of discounts\">\r\n                                    <a class=\"promotion-name\" [routerLink]=\"getPromotionLink(discount)\">{{\r\n                                        discount.description\r\n                                    }}</a>\r\n                                    <div class=\"promotion-amount\">\r\n                                        {{ discount.amountWithTax | localeCurrency: order.currencyCode }}\r\n                                        <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                            {{ discount.amount | localeCurrency: order.currencyCode }}\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </vdr-dropdown-menu>\r\n                        </vdr-dropdown>\r\n                    </ng-container>\r\n                </td>\r\n            </tr>\r\n            <ng-container *ngIf=\"customFieldsForLine[line.id] as customFields\">\r\n                <tr *ngIf=\"customFields.length\">\r\n                    <td colspan=\"6\" class=\"custom-fields-row\">\r\n                        <div class=\"order-line-custom-fields\">\r\n                            <div class=\"custom-field\" *ngFor=\"let field of customFields\">\r\n                                <vdr-custom-field-control\r\n                                    [compact]=\"true\"\r\n                                    [readonly]=\"true\"\r\n                                    [customField]=\"field.config\"\r\n                                    [customFieldsFormGroup]=\"field.formGroup\"\r\n                                ></vdr-custom-field-control>\r\n                            </div>\r\n                        </div>\r\n                    </td>\r\n                </tr>\r\n            </ng-container>\r\n        </ng-container>\r\n        <tr class=\"surcharge\" *ngFor=\"let surcharge of order.surcharges\">\r\n            <td class=\"align-middle name left\" colspan=\"2\">{{ surcharge.description }}</td>\r\n            <td class=\"align-middle sku\">{{ surcharge.sku }}</td>\r\n            <td class=\"align-middle\" colspan=\"2\"></td>\r\n            <td class=\"align-middle total\">\r\n                {{ surcharge.priceWithTax | localeCurrency: order.currencyCode }}\r\n                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                    {{ surcharge.price | localeCurrency: order.currencyCode }}\r\n                </div>\r\n            </td>\r\n        </tr>\r\n        <ng-container *ngFor=\"let discount of order.discounts\">\r\n            <tr class=\"order-adjustment\" *ngIf=\"discount.type !== 'OTHER'\">\r\n            <td colspan=\"5\" class=\"left clr-align-middle\">\r\n                <a [routerLink]=\"getPromotionLink(discount)\">{{ discount.description }}</a>\r\n                <vdr-chip *ngIf=\"getCouponCodeForAdjustment(order, discount) as couponCode\">{{\r\n                    couponCode\r\n                }}</vdr-chip>\r\n            </td>\r\n            <td class=\"clr-align-middle\">\r\n                {{ discount.amountWithTax | localeCurrency: order.currencyCode }}\r\n                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                    {{ discount.amount | localeCurrency: order.currencyCode }}\r\n                </div>\r\n            </td>\r\n            </tr>\r\n        </ng-container>\r\n        <tr class=\"sub-total\">\r\n            <td class=\"left clr-align-middle\">{{ 'order.sub-total' | translate }}</td>\r\n            <td colspan=\"4\"></td>\r\n            <td class=\"clr-align-middle\">\r\n                {{ order.subTotalWithTax | localeCurrency: order.currencyCode }}\r\n                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                    {{ order.subTotal | localeCurrency: order.currencyCode }}\r\n                </div>\r\n            </td>\r\n        </tr>\r\n        <tr class=\"shipping\">\r\n            <td class=\"left clr-align-middle\">{{ 'order.shipping' | translate }}</td>\r\n            <td class=\"clr-align-middle\">{{ getShippingNames(order) }}</td>\r\n            <td colspan=\"3\"></td>\r\n            <td class=\"clr-align-middle\">\r\n                {{ order.shippingWithTax | localeCurrency: order.currencyCode }}\r\n                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                    {{ order.shipping | localeCurrency: order.currencyCode }}\r\n                </div>\r\n            </td>\r\n        </tr>\r\n        <tr class=\"total\">\r\n            <td class=\"left clr-align-middle\">{{ 'order.total' | translate }}</td>\r\n            <td colspan=\"4\"></td>\r\n            <td class=\"clr-align-middle\">\r\n                {{ order.totalWithTax | localeCurrency: order.currencyCode }}\r\n                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                    {{ order.total | localeCurrency: order.currencyCode }}\r\n                </div>\r\n            </td>\r\n        </tr>\r\n    </tbody>\r\n</table>\r\n",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [".order-table .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}.order-table .sub-total td{border-top:1px dashed var(--color-component-border-200)}.order-table .total td{font-weight:bold;border-top:1px dashed var(--color-component-border-200)}.order-table td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}.order-table .order-line-custom-fields{display:flex;flex-wrap:wrap}.order-table .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-right:18px}.order-table .order-line-custom-field{background-color:var(--color-component-bg-100)}.order-table .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}.order-table .net-price{font-size:11px;color:var(--color-text-300)}.order-table .promotions-label{-webkit-text-decoration:underline dotted var(--color-text-200);text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}.order-table .thumb img{width:50px;height:50px}::ng-deep .line-promotion{display:flex;justify-content:space-between;padding:6px 12px}::ng-deep .line-promotion .promotion-amount{margin-left:12px}::ng-deep .line-promotion .net-price{font-size:11px;color:var(--color-text-300)}\n"]
-            },] }
-];
-OrderTableComponent.propDecorators = {
-    order: [{ type: Input }],
-    orderLineCustomFields: [{ type: Input }]
-};
-
-class PaymentDetailComponent {
-}
-PaymentDetailComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'vdr-payment-detail',
-                template: "<vdr-labeled-data [label]=\"'order.payment-method' | translate\">\r\n    {{ payment.method }}\r\n</vdr-labeled-data>\r\n<vdr-labeled-data [label]=\"'order.amount' | translate\">\r\n    {{ payment.amount | localeCurrency: currencyCode }}\r\n</vdr-labeled-data>\r\n<vdr-labeled-data *ngIf=\"payment.errorMessage\" [label]=\"'order.error-message' | translate\">\r\n    {{ payment.errorMessage }}\r\n</vdr-labeled-data>\r\n<vdr-labeled-data *ngIf=\"payment.transactionId\" [label]=\"'order.transaction-id' | translate\">\r\n    {{ payment.transactionId }}\r\n</vdr-labeled-data>\r\n<vdr-labeled-data [label]=\"'order.payment-metadata' | translate\">\r\n    <vdr-object-tree [value]=\"payment.metadata\"></vdr-object-tree>\r\n</vdr-labeled-data>\r\n",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [""]
-            },] }
-];
-PaymentDetailComponent.propDecorators = {
-    payment: [{ type: Input }],
-    currencyCode: [{ type: Input }]
-};
-
-class PaymentStateLabelComponent {
-    get chipColorType() {
-        switch (this.state) {
-            case 'Authorized':
-                return 'warning';
-            case 'Settled':
-                return 'success';
-            case 'Declined':
-            case 'Cancelled':
-                return 'error';
-        }
-    }
-}
-PaymentStateLabelComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'vdr-payment-state-label',
-                template: "<vdr-chip [title]=\"'order.payment-state' | translate\" [colorType]=\"chipColorType\">\r\n    <clr-icon shape=\"check-circle\" *ngIf=\"state === 'Settled'\"></clr-icon>\r\n    {{ state | stateI18nToken | translate }}\r\n</vdr-chip>\r\n",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [":host{font-size:14px}\n"]
-            },] }
-];
-PaymentStateLabelComponent.propDecorators = {
-    state: [{ type: Input }]
-};
-
-class RefundStateLabelComponent {
-    get chipColorType() {
-        switch (this.state) {
-            case 'Pending':
-                return 'warning';
-            case 'Settled':
-                return 'success';
-            case 'Failed':
-                return 'error';
-        }
-    }
-}
-RefundStateLabelComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'vdr-refund-state-label',
-                template: "<vdr-chip [title]=\"'order.payment-state' | translate\" [colorType]=\"chipColorType\">\r\n    <clr-icon shape=\"check-circle\" *ngIf=\"state === 'Settled'\"></clr-icon>\r\n    {{ state | stateI18nToken | translate }}\r\n</vdr-chip>\r\n",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [":host{font-size:14px}\n"]
-            },] }
-];
-RefundStateLabelComponent.propDecorators = {
-    state: [{ type: Input }]
-};
-
-class SimpleItemListComponent {
-}
-SimpleItemListComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'vdr-simple-item-list',
-                template: "<div class=\"items-list\">\r\n    <ul>\r\n        <li *ngFor=\"let item of items\" [title]=\"item.name\">\r\n            <div class=\"quantity\">{{ item.quantity }}</div>\r\n            <clr-icon shape=\"times\" size=\"12\"></clr-icon>\r\n            {{ item.name }}\r\n        </li>\r\n    </ul>\r\n</div>\r\n",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [".items-list{font-size:12px}.items-list ul{margin-top:6px;list-style-type:none;margin-left:2px}.items-list ul li{line-height:14px;text-overflow:ellipsis;overflow:hidden}.items-list .quantity{min-width:16px;display:inline-block}\n"]
-            },] }
-];
-SimpleItemListComponent.propDecorators = {
-    items: [{ type: Input }]
-};
-
-/**
- * Resolves the id from the path into a Customer entity.
- */
-class OrderResolver extends BaseEntityResolver {
-    constructor(router, dataService) {
-        super(router, {
-            __typename: 'Order',
-            id: '',
-            code: '',
-            createdAt: '',
-            updatedAt: '',
-            total: 0,
-        }, id => dataService.order.getOrder(id).mapStream(data => data.order));
-    }
-}
-OrderResolver.ɵprov = i0.ɵɵdefineInjectable({ factory: function OrderResolver_Factory() { return new OrderResolver(i0.ɵɵinject(i1$1.Router), i0.ɵɵinject(i1.DataService)); }, token: OrderResolver, providedIn: "root" });
-OrderResolver.decorators = [
-    { type: Injectable, args: [{
-                providedIn: 'root',
-            },] }
-];
-OrderResolver.ctorParameters = () => [
-    { type: Router },
-    { type: DataService }
-];
-
-const ɵ0 = {
-    breadcrumb: marker('breadcrumb.orders'),
-}, ɵ1 = {
-    breadcrumb: orderBreadcrumb,
-}, ɵ2 = {
-    breadcrumb: modifyingOrderBreadcrumb,
-};
-const orderRoutes = [
-    {
-        path: '',
-        component: OrderListComponent,
-        data: ɵ0,
-    },
-    {
-        path: ':id',
-        component: OrderDetailComponent,
-        resolve: createResolveData(OrderResolver),
-        canDeactivate: [CanDeactivateDetailGuard],
-        data: ɵ1,
-    },
-    {
-        path: ':id/modify',
-        component: OrderEditorComponent,
-        resolve: createResolveData(OrderResolver),
-        // canDeactivate: [CanDeactivateDetailGuard],
-        data: ɵ2,
-    },
-];
-function orderBreadcrumb(data, params) {
-    return detailBreadcrumb({
-        entity: data.entity,
-        id: params.id,
-        breadcrumbKey: 'breadcrumb.orders',
-        getName: order => order.code,
-        route: '',
-    });
-}
-function modifyingOrderBreadcrumb(data, params) {
-    return orderBreadcrumb(data, params).pipe(map((breadcrumbs) => {
-        const modifiedBreadcrumbs = breadcrumbs.slice();
-        modifiedBreadcrumbs[0].link[0] = '../';
-        modifiedBreadcrumbs[1].link[0] = '../orders';
-        return modifiedBreadcrumbs.concat({ label: marker('breadcrumb.modifying'), link: [''] });
-    }));
-}
-
-class OrderModule {
-}
-OrderModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [SharedModule, RouterModule.forChild(orderRoutes)],
-                declarations: [
-                    OrderListComponent,
-                    OrderDetailComponent,
-                    FulfillOrderDialogComponent,
-                    LineFulfillmentComponent,
-                    RefundOrderDialogComponent,
-                    CancelOrderDialogComponent,
-                    PaymentStateLabelComponent,
-                    LineRefundsComponent,
-                    OrderPaymentCardComponent,
-                    RefundStateLabelComponent,
-                    SettleRefundDialogComponent,
-                    OrderHistoryComponent,
-                    FulfillmentDetailComponent,
-                    PaymentDetailComponent,
-                    SimpleItemListComponent,
-                    OrderCustomFieldsCardComponent,
-                    OrderProcessGraphComponent,
-                    OrderProcessNodeComponent,
-                    OrderProcessEdgeComponent,
-                    OrderProcessGraphDialogComponent,
-                    FulfillmentStateLabelComponent,
-                    FulfillmentCardComponent,
-                    OrderEditorComponent,
-                    OrderTableComponent,
-                    OrderEditsPreviewDialogComponent,
-                    ModificationDetailComponent,
-                    AddManualPaymentDialogComponent,
-                    OrderStateSelectDialogComponent,
-                ],
-            },] }
-];
-
-// This file was generated by the build-public-api.ts script
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { AddManualPaymentDialogComponent, CancelOrderDialogComponent, FulfillOrderDialogComponent, FulfillmentCardComponent, FulfillmentDetailComponent, FulfillmentStateLabelComponent, LineFulfillmentComponent, LineRefundsComponent, ModificationDetailComponent, NODE_HEIGHT, OrderCustomFieldsCardComponent, OrderDetailComponent, OrderEditResultType, OrderEditorComponent, OrderEditsPreviewDialogComponent, OrderHistoryComponent, OrderListComponent, OrderModule, OrderPaymentCardComponent, OrderProcessEdgeComponent, OrderProcessGraphComponent, OrderProcessGraphDialogComponent, OrderProcessNodeComponent, OrderResolver, OrderStateSelectDialogComponent, OrderTableComponent, OrderTransitionService, PaymentDetailComponent, PaymentStateLabelComponent, RefundOrderDialogComponent, RefundStateLabelComponent, SettleRefundDialogComponent, SimpleItemListComponent, modifyingOrderBreadcrumb, orderBreadcrumb, orderRoutes, ɵ0, ɵ1, ɵ2 };
-//# sourceMappingURL=vendure-admin-ui-order.js.map