@vendure/admin-ui 1.7.3 → 1.8.0

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

@@ -0,0 +1,3155 @@
+import * as i0 from '@angular/core';
+import { Component, ChangeDetectionStrategy, EventEmitter, Input, Output, Injectable, ChangeDetectorRef, 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, HistoryEntryType, SortOrder, ModalService, NotificationService, ADDRESS_FRAGMENT, BaseDetailComponent, DeletionResult, ServerConfigService, configurableDefinitionToInstance, GlobalFlag, configurableOperationValueIsValid, toConfigurableOperationInput, EditNoteDialogComponent, transformRelationCustomFieldInputs, BaseListComponent, LogicalOperator, LocalStorageService, AdjustmentType, CanDeactivateDetailGuard, detailBreadcrumb, SharedModule } from '@vendure/admin-ui/core';
+import { marker } from '@biesbjerg/ngx-translate-extract-marker';
+import { Subject, concat, EMPTY, of, combineLatest, merge, BehaviorSubject } from 'rxjs';
+import { distinctUntilChanged, switchMap, map, startWith, catchError, retryWhen, delay, take, tap, debounceTime, mapTo, takeUntil, shareReplay, filter } from 'rxjs/operators';
+import * as i1$1 from '@angular/router';
+import { Router, ActivatedRoute, ActivationStart, RouterModule } from '@angular/router';
+import { pick } from '@vendure/common/lib/pick';
+import { gql } from 'apollo-angular';
+import { isObject, summate, assertNever, notNullOrUndefined } from '@vendure/common/lib/shared-utils';
+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 CouponCodeSelectorComponent {
+    constructor(dataService) {
+        this.dataService = dataService;
+        this.addCouponCode = new EventEmitter();
+        this.removeCouponCode = new EventEmitter();
+        this.couponCodeInput$ = new Subject();
+    }
+    ngOnInit() {
+        var _a;
+        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([])));
+        if (!this.control) {
+            this.control = new FormControl((_a = this.couponCodes) !== null && _a !== void 0 ? _a : []);
+        }
+    }
+}
+CouponCodeSelectorComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'vdr-coupon-code-selector',
+                template: "<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]=\"control\"\r\n    (add)=\"addCouponCode.emit($event.code)\"\r\n    (remove)=\"removeCouponCode.emit($event.value?.code)\"\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",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [""]
+            },] }
+];
+CouponCodeSelectorComponent.ctorParameters = () => [
+    { type: DataService }
+];
+CouponCodeSelectorComponent.propDecorators = {
+    couponCodes: [{ type: Input }],
+    control: [{ type: Input }],
+    addCouponCode: [{ type: Output }],
+    removeCouponCode: [{ 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 }
+];
+
+const GET_CUSTOMER_ADDRESSES = gql `
+    query GetCustomerAddresses($customerId: ID!) {
+        customer(id: $customerId) {
+            id
+            addresses {
+                ...Address
+            }
+        }
+    }
+    ${ADDRESS_FRAGMENT}
+`;
+
+class SelectAddressDialogComponent {
+    constructor(dataService, formBuilder) {
+        this.dataService = dataService;
+        this.formBuilder = formBuilder;
+        this.useExisting = true;
+        this.createNew = false;
+    }
+    ngOnInit() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+        this.addressForm = this.formBuilder.group({
+            fullName: [(_b = (_a = this.currentAddress) === null || _a === void 0 ? void 0 : _a.fullName) !== null && _b !== void 0 ? _b : ''],
+            company: [(_d = (_c = this.currentAddress) === null || _c === void 0 ? void 0 : _c.company) !== null && _d !== void 0 ? _d : ''],
+            streetLine1: [(_f = (_e = this.currentAddress) === null || _e === void 0 ? void 0 : _e.streetLine1) !== null && _f !== void 0 ? _f : '', Validators.required],
+            streetLine2: [(_h = (_g = this.currentAddress) === null || _g === void 0 ? void 0 : _g.streetLine2) !== null && _h !== void 0 ? _h : ''],
+            city: [(_k = (_j = this.currentAddress) === null || _j === void 0 ? void 0 : _j.city) !== null && _k !== void 0 ? _k : '', Validators.required],
+            province: [(_m = (_l = this.currentAddress) === null || _l === void 0 ? void 0 : _l.province) !== null && _m !== void 0 ? _m : ''],
+            postalCode: [(_p = (_o = this.currentAddress) === null || _o === void 0 ? void 0 : _o.postalCode) !== null && _p !== void 0 ? _p : '', Validators.required],
+            countryCode: [(_r = (_q = this.currentAddress) === null || _q === void 0 ? void 0 : _q.countryCode) !== null && _r !== void 0 ? _r : '', Validators.required],
+            phoneNumber: [(_t = (_s = this.currentAddress) === null || _s === void 0 ? void 0 : _s.phoneNumber) !== null && _t !== void 0 ? _t : ''],
+        });
+        this.useExisting = !!this.customerId;
+        this.addresses$ = this.customerId
+            ? this.dataService
+                .query(GET_CUSTOMER_ADDRESSES, { customerId: this.customerId })
+                .mapSingle(({ customer }) => { var _a; return (_a = customer === null || customer === void 0 ? void 0 : customer.addresses) !== null && _a !== void 0 ? _a : []; })
+                .pipe(tap(addresses => {
+                if (this.currentAddress) {
+                    this.selectedAddress = addresses.find(a => {
+                        var _a, _b;
+                        return a.streetLine1 === ((_a = this.currentAddress) === null || _a === void 0 ? void 0 : _a.streetLine1) &&
+                            a.postalCode === ((_b = this.currentAddress) === null || _b === void 0 ? void 0 : _b.postalCode);
+                    });
+                }
+                if (addresses.length === 0) {
+                    this.createNew = true;
+                    this.useExisting = false;
+                }
+            }))
+            : of([]);
+        this.availableCountries$ = this.dataService.settings
+            .getAvailableCountries()
+            .mapSingle(({ countries }) => countries.items);
+    }
+    trackByFn(item) {
+        return item.id;
+    }
+    addressIdFn(item) {
+        return item.streetLine1 + item.postalCode;
+    }
+    cancel() {
+        this.resolveWith();
+    }
+    select() {
+        if (this.useExisting && this.selectedAddress) {
+            this.resolveWith(Object.assign(Object.assign({}, pick(this.selectedAddress, [
+                'fullName',
+                'company',
+                'streetLine1',
+                'streetLine2',
+                'city',
+                'province',
+                'phoneNumber',
+                'postalCode',
+            ])), { countryCode: this.selectedAddress.country.code }));
+        }
+        if (this.createNew && this.addressForm.valid) {
+            const formValue = this.addressForm.value;
+            this.resolveWith(formValue);
+        }
+    }
+}
+SelectAddressDialogComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'vdr-select-address-dialog',
+                template: "<ng-template vdrDialogTitle>{{ 'order.select-address' | translate }}</ng-template>\r\n\r\n<clr-tabs *ngIf=\"addresses$ | async as addresses\">\r\n    <clr-tab *ngIf=\"customerId && addresses.length\">\r\n        <button clrTabLink>{{ 'order.existing-address' | translate }}</button>\r\n        <ng-template [(clrIfActive)]=\"useExisting\">\r\n            <clr-tab-content>\r\n                <vdr-radio-card-fieldset\r\n                    class=\"block mt4\"\r\n                    [idFn]=\"addressIdFn\"\r\n                    [selectedItemId]=\"selectedAddress && addressIdFn(selectedAddress)\"\r\n                    (selectItem)=\"selectedAddress = $event\"\r\n                >\r\n                    <vdr-radio-card *ngFor=\"let address of addresses\" [item]=\"address\">\r\n                        <vdr-formatted-address [address]=\"address\"></vdr-formatted-address>\r\n                    </vdr-radio-card>\r\n                </vdr-radio-card-fieldset>\r\n            </clr-tab-content>\r\n        </ng-template>\r\n    </clr-tab>\r\n    <clr-tab>\r\n        <button clrTabLink>{{ 'customer.create-new-address' | translate }}</button>\r\n\r\n        <ng-template [(clrIfActive)]=\"createNew\">\r\n            <clr-tab-content>\r\n                <vdr-address-form\r\n                    [formGroup]=\"addressForm\"\r\n                    [availableCountries]=\"availableCountries$ | async\"\r\n                ></vdr-address-form>\r\n            </clr-tab-content>\r\n        </ng-template>\r\n    </clr-tab>\r\n</clr-tabs>\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]=\"(useExisting && !selectedAddress) || (createNew && addressForm.invalid)\"\r\n        class=\"btn btn-primary\"\r\n    >\r\n        {{ 'common.okay' | translate }}\r\n    </button>\r\n</ng-template>\r\n",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [""]
+            },] }
+];
+SelectAddressDialogComponent.ctorParameters = () => [
+    { type: DataService },
+    { type: FormBuilder }
+];
+
+class SelectCustomerDialogComponent {
+    constructor(dataService, formBuilder) {
+        this.dataService = dataService;
+        this.formBuilder = formBuilder;
+        this.isLoading = false;
+        this.input$ = new Subject();
+        this.selectedCustomer = [];
+        this.useExisting = true;
+        this.createNew = false;
+        this.customerForm = this.formBuilder.group({
+            title: '',
+            firstName: ['', Validators.required],
+            lastName: ['', Validators.required],
+            phoneNumber: '',
+            emailAddress: ['', [Validators.required, Validators.email]],
+        });
+    }
+    ngOnInit() {
+        this.customers$ = concat(of([]), // default items
+        this.input$.pipe(debounceTime(200), distinctUntilChanged(), tap(() => (this.isLoading = true)), switchMap(term => this.dataService.customer
+            .getCustomerList(10, 0, term)
+            .mapStream(({ customers }) => customers.items)
+            .pipe(catchError(() => of([])), // empty list on error
+        tap(() => (this.isLoading = false))))));
+    }
+    trackByFn(item) {
+        return item.id;
+    }
+    cancel() {
+        this.resolveWith();
+    }
+    select() {
+        if (this.useExisting && this.selectedCustomer.length === 1) {
+            this.resolveWith(this.selectedCustomer[0]);
+        }
+        if (this.createNew && this.customerForm.valid) {
+            const formValue = this.customerForm.value;
+            this.resolveWith(formValue);
+        }
+    }
+}
+SelectCustomerDialogComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'vdr-select-customer-dialog',
+                template: "<ng-template vdrDialogTitle>{{ 'order.set-customer-for-order' | translate }}</ng-template>\r\n\r\n<clr-tabs>\r\n    <clr-tab>\r\n        <button clrTabLink>{{ 'order.existing-customer' | translate }}</button>\r\n\r\n        <ng-template [(clrIfActive)]=\"useExisting\">\r\n            <clr-tab-content>\r\n                <ng-select\r\n                    [items]=\"customers$ | async\"\r\n                    appendTo=\"body\"\r\n                    bindLabel=\"name\"\r\n                    [addTag]=\"false\"\r\n                    [multiple]=\"true\"\r\n                    [hideSelected]=\"true\"\r\n                    [trackByFn]=\"trackByFn\"\r\n                    [minTermLength]=\"2\"\r\n                    [loading]=\"isLoading\"\r\n                    [typeahead]=\"input$\"\r\n                    [(ngModel)]=\"selectedCustomer\"\r\n                    class=\"mt4\"\r\n                >\r\n                    <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n                        <clr-icon shape=\"user\" class=\"is-solid\"></clr-icon\r\n                        ><span class=\"ml2 mr2\">{{ item.firstName }} {{ item.lastName }}</span>\r\n                        <vdr-chip>{{ item.emailAddress }}</vdr-chip>\r\n                    </ng-template>\r\n                    <ng-template ng-option-tmp let-item=\"item\">\r\n                        <clr-icon shape=\"user\" class=\"is-solid\"></clr-icon\r\n                        ><span class=\"ml2 mr2\">{{ item.firstName }} {{ item.lastName }}</span>\r\n                        <vdr-chip>{{ item.emailAddress }}</vdr-chip>\r\n                    </ng-template>\r\n                </ng-select>\r\n            </clr-tab-content>\r\n        </ng-template>\r\n    </clr-tab>\r\n    <clr-tab>\r\n        <button clrTabLink>{{ 'customer.create-new-customer' | translate }}</button>\r\n\r\n        <ng-template [(clrIfActive)]=\"createNew\">\r\n            <clr-tab-content>\r\n                <form [formGroup]=\"customerForm\">\r\n                <vdr-form-field [label]=\"'customer.title' | translate\" for=\"title\">\r\n                    <input id=\"title\" type=\"text\" formControlName=\"title\" />\r\n                </vdr-form-field>\r\n                <vdr-form-field [label]=\"'customer.first-name' | translate\" for=\"firstName\">\r\n                    <input id=\"firstName\" type=\"text\" formControlName=\"firstName\" />\r\n                </vdr-form-field>\r\n                <vdr-form-field [label]=\"'customer.last-name' | translate\" for=\"lastName\">\r\n                    <input id=\"lastName\" type=\"text\" formControlName=\"lastName\" />\r\n                </vdr-form-field>\r\n                <vdr-form-field [label]=\"'customer.email-address' | translate\" for=\"emailAddress\">\r\n                    <input id=\"emailAddress\" type=\"text\" formControlName=\"emailAddress\" />\r\n                </vdr-form-field>\r\n                <vdr-form-field [label]=\"'customer.phone-number' | translate\" for=\"phoneNumber\">\r\n                    <input id=\"phoneNumber\" type=\"text\" formControlName=\"phoneNumber\" />\r\n                </vdr-form-field>\r\n                </form>\r\n            </clr-tab-content>\r\n        </ng-template>\r\n    </clr-tab>\r\n</clr-tabs>\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]=\"(useExisting && selectedCustomer.length === 0) || (createNew && customerForm.invalid)\"\r\n        class=\"btn btn-primary\"\r\n    >\r\n        {{ 'common.okay' | translate }}\r\n    </button>\r\n</ng-template>\r\n",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [""]
+            },] }
+];
+SelectCustomerDialogComponent.ctorParameters = () => [
+    { type: DataService },
+    { type: FormBuilder }
+];
+
+class SelectShippingMethodDialogComponent {
+    constructor() { }
+    ngOnInit() {
+        if (this.currentSelectionId) {
+            this.selectedMethod = this.eligibleShippingMethods.find(m => m.id === this.currentSelectionId);
+        }
+    }
+    methodIdFn(item) {
+        return item.id;
+    }
+    cancel() {
+        this.resolveWith();
+    }
+    select() {
+        if (this.selectedMethod) {
+            this.resolveWith(this.selectedMethod.id);
+        }
+    }
+}
+SelectShippingMethodDialogComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'vdr-select-shipping-method-dialog',
+                template: "<ng-template vdrDialogTitle>{{ 'order.select-shipping-method' | translate }}</ng-template>\r\n<vdr-radio-card-fieldset\r\n    [idFn]=\"methodIdFn\"\r\n    [selectedItemId]=\"selectedMethod?.id\"\r\n    (selectItem)=\"selectedMethod = $event\"\r\n>\r\n    <vdr-radio-card *ngFor=\"let quote of eligibleShippingMethods\" [item]=\"quote\">\r\n        <div class=\"result-details\">\r\n            <vdr-labeled-data [label]=\"'settings.shipping-method' | translate\">\r\n                {{ quote.name }}\r\n            </vdr-labeled-data>\r\n            <div class=\"price-row\">\r\n                <vdr-labeled-data [label]=\"'common.price' | translate\">\r\n                    {{ quote.price | localeCurrency: currencyCode }}\r\n                </vdr-labeled-data>\r\n                <vdr-labeled-data [label]=\"'common.price-with-tax' | translate\">\r\n                    {{ quote.priceWithTax | localeCurrency: currencyCode }}\r\n                </vdr-labeled-data>\r\n            </div>\r\n            <vdr-object-tree *ngIf=\"quote.metadata\" [value]=\"quote.metadata\"></vdr-object-tree>\r\n        </div>\r\n    </vdr-radio-card>\r\n</vdr-radio-card-fieldset>\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]=\"!selectedMethod\"\r\n        class=\"btn btn-primary\"\r\n    >\r\n        {{ 'common.okay' | translate }}\r\n    </button>\r\n</ng-template>\r\n",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [""]
+            },] }
+];
+SelectShippingMethodDialogComponent.ctorParameters = () => [];
+
+class DraftOrderDetailComponent 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.displayCouponCodeInput = false;
+    }
+    ngOnInit() {
+        this.init();
+        this.orderLineCustomFields = this.getCustomFieldConfig('OrderLine');
+        this.eligibleShippingMethods$ = this.entity$.pipe(switchMap(order => this.dataService.order
+            .getDraftOrderEligibleShippingMethods(order.id)
+            .mapSingle(({ eligibleShippingMethodsForDraftOrder }) => eligibleShippingMethodsForDraftOrder)));
+        this.customFields = this.getCustomFieldConfig('Order');
+        this.orderLineCustomFields = this.getCustomFieldConfig('OrderLine');
+    }
+    ngOnDestroy() {
+        this.destroy();
+    }
+    addItemToOrder(event) {
+        this.dataService.order.addItemToDraftOrder(this.id, event).subscribe(result => {
+            if (result.addItemToDraftOrder.__typename !== 'Order') {
+                this.notificationService.error(result.addItemToDraftOrder.message);
+            }
+        });
+    }
+    adjustOrderLine(event) {
+        this.dataService.order
+            .adjustDraftOrderLine(this.id, { orderLineId: event.lineId, quantity: event.quantity })
+            .subscribe(result => {
+            if (result.adjustDraftOrderLine.__typename !== 'Order') {
+                this.notificationService.error(result.adjustDraftOrderLine.message);
+            }
+        });
+    }
+    removeOrderLine(event) {
+        this.dataService.order.removeDraftOrderLine(this.id, event.lineId).subscribe(result => {
+            if (result.removeDraftOrderLine.__typename !== 'Order') {
+                this.notificationService.error(result.removeDraftOrderLine.message);
+            }
+        });
+    }
+    getOrderAddressLines(orderAddress) {
+        if (!orderAddress) {
+            return [];
+        }
+        return Object.values(orderAddress)
+            .filter(val => val !== 'OrderAddress')
+            .filter(line => !!line);
+    }
+    setCustomer() {
+        this.modalService.fromComponent(SelectCustomerDialogComponent).subscribe(result => {
+            if (this.hasId(result)) {
+                this.dataService.order
+                    .setCustomerForDraftOrder(this.id, { customerId: result.id })
+                    .subscribe();
+            }
+            else if (result) {
+                this.dataService.order.setCustomerForDraftOrder(this.id, { input: result }).subscribe();
+            }
+        });
+    }
+    setShippingAddress() {
+        this.entity$
+            .pipe(take(1), switchMap(order => {
+            var _a, _b;
+            return this.modalService.fromComponent(SelectAddressDialogComponent, {
+                locals: {
+                    customerId: (_a = order.customer) === null || _a === void 0 ? void 0 : _a.id,
+                    currentAddress: (_b = order.shippingAddress) !== null && _b !== void 0 ? _b : undefined,
+                },
+            });
+        }))
+            .subscribe(result => {
+            if (result) {
+                this.dataService.order.setDraftOrderShippingAddress(this.id, result).subscribe();
+            }
+        });
+    }
+    setBillingAddress() {
+        this.entity$
+            .pipe(take(1), switchMap(order => {
+            var _a, _b;
+            return this.modalService.fromComponent(SelectAddressDialogComponent, {
+                locals: {
+                    customerId: (_a = order.customer) === null || _a === void 0 ? void 0 : _a.id,
+                    currentAddress: (_b = order.billingAddress) !== null && _b !== void 0 ? _b : undefined,
+                },
+            });
+        }))
+            .subscribe(result => {
+            if (result) {
+                this.dataService.order.setDraftOrderBillingAddress(this.id, result).subscribe();
+            }
+        });
+    }
+    applyCouponCode(couponCode) {
+        this.dataService.order.applyCouponCodeToDraftOrder(this.id, couponCode).subscribe();
+    }
+    removeCouponCode(couponCode) {
+        this.dataService.order.removeCouponCodeFromDraftOrder(this.id, couponCode).subscribe();
+    }
+    setShippingMethod() {
+        combineLatest(this.entity$, this.eligibleShippingMethods$)
+            .pipe(take(1), switchMap(([order, methods]) => {
+            var _a, _b;
+            return this.modalService.fromComponent(SelectShippingMethodDialogComponent, {
+                locals: {
+                    eligibleShippingMethods: methods,
+                    currencyCode: order.currencyCode,
+                    currentSelectionId: (_b = (_a = order.shippingLines) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.shippingMethod.id,
+                },
+            });
+        }))
+            .subscribe(result => {
+            if (result) {
+                this.dataService.order.setDraftOrderShippingMethod(this.id, result).subscribe();
+            }
+        });
+    }
+    updateCustomFields(customFieldsValue) {
+        this.dataService.order
+            .updateOrderCustomFields({
+            id: this.id,
+            customFields: customFieldsValue,
+        })
+            .subscribe();
+    }
+    deleteOrder() {
+        this.dataService.order.deleteDraftOrder(this.id).subscribe(({ deleteDraftOrder }) => {
+            if (deleteDraftOrder.result === DeletionResult.DELETED) {
+                this.notificationService.success(marker('common.notify-delete-success'), {
+                    entity: 'Order',
+                });
+                this.router.navigate(['/orders']);
+            }
+            else if (deleteDraftOrder.message) {
+                this.notificationService.error(deleteDraftOrder.message);
+            }
+        });
+    }
+    completeOrder() {
+        this.dataService.order
+            .transitionToState(this.id, 'ArrangingPayment')
+            .subscribe(({ transitionOrderToState }) => {
+            if ((transitionOrderToState === null || transitionOrderToState === void 0 ? void 0 : transitionOrderToState.__typename) === 'Order') {
+                this.router.navigate(['/orders', this.id]);
+            }
+            else if ((transitionOrderToState === null || transitionOrderToState === void 0 ? void 0 : transitionOrderToState.__typename) === 'OrderStateTransitionError') {
+                this.notificationService.error(transitionOrderToState.transitionError);
+            }
+        });
+    }
+    hasId(input) {
+        return typeof input === 'object' && !!input.id;
+    }
+    setFormValues(entity) {
+        // empty
+    }
+}
+DraftOrderDetailComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'vdr-draft-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\"></vdr-order-state-label>\r\n        </div>\r\n    </vdr-ab-left>\r\n\r\n    <vdr-ab-right>\r\n        <button\r\n            class=\"btn btn-primary\"\r\n            (click)=\"completeOrder()\"\r\n            [disabled]=\"!order.customer || !order.lines.length || !order.shippingLines.length\"\r\n        >\r\n            <clr-icon shape=\"check\"></clr-icon>\r\n            {{ 'order.complete-draft-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                <button type=\"button\" class=\"btn\" vdrDropdownItem (click)=\"deleteOrder()\">\r\n                    <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                    {{ 'order.delete-draft-order' | 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-draft-order-variant-selector\r\n                [orderLineCustomFields]=\"orderLineCustomFields\"\r\n                [currencyCode]=\"order.currencyCode\"\r\n                (addItem)=\"addItemToOrder($event)\"\r\n            ></vdr-draft-order-variant-selector>\r\n            <vdr-order-table\r\n                [order]=\"order\"\r\n                [orderLineCustomFields]=\"orderLineCustomFields\"\r\n                [isDraft]=\"true\"\r\n                (adjust)=\"adjustOrderLine($event)\"\r\n                (remove)=\"removeOrderLine($event)\"\r\n            ></vdr-order-table>\r\n            <div class=\"flex\">\r\n                <button\r\n                    *ngIf=\"order.couponCodes.length === 0 && !displayCouponCodeInput\"\r\n                    class=\"btn btn-link btn-sm mr2\"\r\n                    (click)=\"displayCouponCodeInput = !displayCouponCodeInput\"\r\n                >\r\n                    {{ 'order.set-coupon-codes' | translate }}\r\n                </button>\r\n                <div *ngIf=\"order.couponCodes.length || displayCouponCodeInput\">\r\n                    <label>{{ 'order.set-coupon-codes' | translate }}</label>\r\n                    <vdr-coupon-code-selector\r\n                        [couponCodes]=\"order.couponCodes\"\r\n                        (addCouponCode)=\"applyCouponCode($event)\"\r\n                        (removeCouponCode)=\"removeCouponCode($event)\"\r\n                    ></vdr-coupon-code-selector>\r\n                </div>\r\n            </div>\r\n            <ng-container *ngIf=\"order.taxSummary.length\">\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            </ng-container>\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                    <clr-icon *ngIf=\"!order.customer\" shape=\"unknown-status\" class=\"is-warning\"></clr-icon>\r\n                    <clr-icon *ngIf=\"order.customer\" shape=\"check\" class=\"is-success\"></clr-icon>\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\r\n                            class=\"block mb2\"\r\n                            *ngIf=\"order.customer\"\r\n                            [customer]=\"order.customer\"\r\n                        ></vdr-customer-label>\r\n                        <button class=\"btn btn-link btn-sm\" (click)=\"setCustomer()\">\r\n                            {{ 'order.set-customer-for-order' | translate }}\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n                <div class=\"card-block\">\r\n                    <h4 class=\"card-title\">\r\n                        <clr-icon\r\n                            *ngIf=\"!order.billingAddress.streetLine1\"\r\n                            shape=\"unknown-status\"\r\n                            class=\"is-warning\"\r\n                        ></clr-icon>\r\n                        <clr-icon\r\n                            *ngIf=\"order.billingAddress.streetLine1\"\r\n                            shape=\"check\"\r\n                            class=\"is-success\"\r\n                        ></clr-icon>\r\n                        {{ 'order.billing-address' | translate }}\r\n                    </h4>\r\n                    <div class=\"card-text\">\r\n                        <vdr-formatted-address\r\n                            class=\"block mb2\"\r\n                            *ngIf=\"order.billingAddress\"\r\n                            [address]=\"order.billingAddress\"\r\n                        ></vdr-formatted-address>\r\n                        <button class=\"btn btn-link btn-sm\" (click)=\"setBillingAddress()\">\r\n                            {{ 'order.set-billing-address' | translate }}\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"card\">\r\n                <div class=\"card-header\">\r\n                    <clr-icon\r\n                        *ngIf=\"!order.shippingAddress.streetLine1 || !order.shippingLines.length\"\r\n                        shape=\"unknown-status\"\r\n                        class=\"is-warning\"\r\n                    ></clr-icon>\r\n                    <clr-icon\r\n                        *ngIf=\"order.shippingAddress.streetLine1 && order.shippingLines.length\"\r\n                        shape=\"check\"\r\n                        class=\"is-success\"\r\n                    ></clr-icon>\r\n                    {{ 'order.shipping' | translate }}\r\n                </div>\r\n                <div class=\"card-block\">\r\n                    <div class=\"card-text\">\r\n                        <vdr-formatted-address\r\n                            class=\"block mb2\"\r\n                            *ngIf=\"order.shippingAddress\"\r\n                            [address]=\"order.shippingAddress\"\r\n                        ></vdr-formatted-address>\r\n                        <button class=\"btn btn-link btn-sm\" (click)=\"setShippingAddress()\">\r\n                            {{ 'order.set-shipping-address' | translate }}\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n                <div class=\"card-block\">\r\n                    <div class=\"card-text\">\r\n                        <div *ngFor=\"let shippingLine of order.shippingLines\">\r\n                            {{ shippingLine.shippingMethod.name }}\r\n                        </div>\r\n                        <button class=\"btn btn-link btn-sm\" (click)=\"setShippingMethod()\">\r\n                            {{ 'order.set-shipping-method' | translate }}\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </div>\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>\r\n    </div>\r\n</div>\r\n",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [""]
+            },] }
+];
+DraftOrderDetailComponent.ctorParameters = () => [
+    { type: Router },
+    { type: ActivatedRoute },
+    { type: ServerConfigService },
+    { type: ChangeDetectorRef },
+    { type: DataService },
+    { type: NotificationService },
+    { type: ModalService },
+    { type: OrderTransitionService }
+];
+
+class DraftOrderVariantSelectorComponent {
+    constructor(dataService) {
+        this.dataService = dataService;
+        this.addItem = new EventEmitter();
+        this.customFieldsFormGroup = new FormGroup({});
+        this.selectedVariantId$ = new Subject();
+        this.quantity = 1;
+    }
+    ngOnInit() {
+        this.selectedVariant$ = this.selectedVariantId$.pipe(switchMap(id => {
+            if (id) {
+                return this.dataService.product
+                    .getProductVariant(id)
+                    .mapSingle(({ productVariant }) => productVariant);
+            }
+            else {
+                return [undefined];
+            }
+        }));
+        for (const customField of this.orderLineCustomFields) {
+            this.customFieldsFormGroup.addControl(customField.name, new FormControl(''));
+        }
+    }
+    addItemClick(selectedVariant) {
+        if (selectedVariant) {
+            this.addItem.emit({
+                productVariantId: selectedVariant.id,
+                quantity: this.quantity,
+                customFields: this.orderLineCustomFields.length
+                    ? this.customFieldsFormGroup.value
+                    : undefined,
+            });
+            this.selectedVariantId$.next(undefined);
+            this.customFieldsFormGroup.reset();
+        }
+    }
+}
+DraftOrderVariantSelectorComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'vdr-draft-order-variant-selector',
+                template: "<div class=\"card\">\r\n    <div class=\"card-block\">\r\n        <h4 class=\"card-title\">{{ 'order.add-item-to-order' | translate }}</h4>\r\n        <vdr-product-selector\r\n            (productSelected)=\"selectedVariantId$.next($event.productVariantId)\"\r\n        ></vdr-product-selector>\r\n    </div>\r\n    <div class=\"card-block\" *ngIf=\"selectedVariant$ | async as selectedVariant\">\r\n        <div class=\"variant-details\">\r\n            <img class=\"mr2\" [src]=\"selectedVariant.featuredAsset || selectedVariant.product.featuredAsset | assetPreview: 32\">\r\n            <div class=\"details\">\r\n                <div>{{ selectedVariant?.name }}</div>\r\n                <div class=\"small\">{{ selectedVariant?.sku }}</div>\r\n            </div>\r\n            <div class=\"details ml4\">\r\n                <div class=\"small\">\r\n                    {{ 'catalog.stock-on-hand' | translate }}: {{ selectedVariant.stockOnHand }}\r\n                </div>\r\n                <div class=\"small\">\r\n                    {{ 'catalog.stock-allocated' | translate }}: {{ selectedVariant.stockAllocated }}\r\n                </div>\r\n            </div>\r\n            <div class=\"flex-spacer\"></div>\r\n            <div class=\"details\">\r\n                <div>{{ selectedVariant?.priceWithTax | localeCurrency: currencyCode }}</div>\r\n                <div class=\"small\" [title]=\"'order.net-price' | translate\">\r\n                    {{ selectedVariant?.price | localeCurrency: currencyCode }}\r\n                </div>\r\n            </div>\r\n            <div>\r\n                <input [disabled]=\"!selectedVariant\" type=\"number\" min=\"0\" [(ngModel)]=\"quantity\" />\r\n            </div>\r\n            <button\r\n                [disabled]=\"!selectedVariant\"\r\n                class=\"btn btn-small btn-primary\"\r\n                (click)=\"addItemClick(selectedVariant)\"\r\n            >\r\n                {{ 'order.add-item-to-order' | translate }}\r\n            </button>\r\n        </div>\r\n        <ng-container *ngIf=\"orderLineCustomFields.length\">\r\n            <div class=\"custom-field\" *ngFor=\"let field of orderLineCustomFields\">\r\n                <vdr-custom-field-control\r\n                    [compact]=\"true\"\r\n                    [readonly]=\"false\"\r\n                    [customField]=\"field\"\r\n                    [customFieldsFormGroup]=\"customFieldsFormGroup\"\r\n                ></vdr-custom-field-control>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n</div>\r\n",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [".variant-details{display:flex;align-items:center}.variant-details img{border-radius:var(--border-radius-img);width:32px;height:32px}.variant-details .details{font-size:.65rem;line-height:.7rem}.variant-details input{width:48px;margin:0 6px}.variant-details .small{font-size:11px;color:var(--color-text-300)}\n"]
+            },] }
+];
+DraftOrderVariantSelectorComponent.ctorParameters = () => [
+    { type: DataService }
+];
+DraftOrderVariantSelectorComponent.propDecorators = {
+    currencyCode: [{ type: Input }],
+    orderLineCustomFields: [{ type: Input }],
+    addItem: [{ type: Output }]
+};
+
+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 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                order.state !== 'ArrangingPayment' &&\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.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.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                        <vdr-coupon-code-selector\r\n                            [control]=\"couponCodesControl\"\r\n                        ></vdr-coupon-code-selector>\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 img{border-radius:var(--border-radius-img)}.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 .draft-qty{max-width:48px}.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) {
+        var _a;
+        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' && s !== 'Draft'),
+                },
+            },
+            {
+                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,
+                },
+            },
+            {
+                name: 'draft',
+                label: marker('order.filter-preset-draft'),
+                config: {
+                    active: false,
+                    states: ['Draft'],
+                },
+            },
+        ];
+        this.canCreateDraftOrder = false;
+        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 });
+        }
+        this.canCreateDraftOrder = !!((_a = this.serverConfigService
+            .getOrderProcessStates()
+            .find(state => state.name === 'Created')) === null || _a === void 0 ? void 0 : _a.to.includes('Draft'));
+        if (!this.canCreateDraftOrder) {
+            this.filterPresets = this.filterPresets.filter(p => p.name !== 'draft');
+        }
+    }
+    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=\"filter-presets 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\">{{\r\n                            item | stateI18nToken | translate\r\n                        }}</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\"\r\n                                >\u00D7</span\r\n                            >\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        <ng-container *ngIf=\"canCreateDraftOrder\">\r\n            <a class=\"btn btn-primary mt1\" *vdrIfPermissions=\"['CreateOrder']\" [routerLink]=\"['./draft/create']\">\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'catalog.create-draft-order' | translate }}\r\n            </a>\r\n        </ng-container>\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]=\"\r\n                    order.state === 'Modifying'\r\n                        ? ['./', order.id, 'modify']\r\n                        : order.state === 'Draft'\r\n                        ? ['./draft', order.id]\r\n                        : ['./', order.id]\r\n                \"\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%;max-width:100vw;margin-bottom:6px}.filter-presets{max-width:90vw;overflow-x:auto}.search-input{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.isDraft = false;
+        this.adjust = new EventEmitter();
+        this.remove = new EventEmitter();
+        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();
+    }
+    draftInputBlur(line, quantity) {
+        if (line.quantity !== quantity) {
+            this.adjust.emit({ lineId: line.id, quantity });
+        }
+    }
+    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                    <ng-container *ngIf=\"!isDraft; else draft\">\r\n                        {{ line.quantity }}\r\n                    </ng-container>\r\n                    <ng-template #draft>\r\n                        <div class=\"flex\">\r\n                            <input\r\n                                class=\"draft-qty\"\r\n                                type=\"number\"\r\n                                min=\"0\"\r\n                                #qtyInput\r\n                                [value]=\"line.quantity\"\r\n                                (blur)=\"draftInputBlur(line, qtyInput.valueAsNumber)\"\r\n                            />\r\n                            <button class=\"icon-button\" (click)=\"remove.emit({ lineId: line.id })\">\r\n                                <clr-icon shape=\"trash\"></clr-icon>\r\n                            </button>\r\n                        </div>\r\n                    </ng-template>\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 img{border-radius:var(--border-radius-img)}.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 .draft-qty{max-width:48px}.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 }],
+    isDraft: [{ type: Input }],
+    adjust: [{ type: Output }],
+    remove: [{ type: Output }]
+};
+
+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 {
+    constructor(router, dataService) {
+        this.router = router;
+        this.dataService = dataService;
+    }
+    /** @internal */
+    resolve(route, state) {
+        const id = route.paramMap.get('id');
+        // Complete the entity stream upon navigating away
+        const navigateAway$ = this.router.events.pipe(filter(event => event instanceof ActivationStart));
+        const stream = this.dataService.order
+            .getOrder(id)
+            .mapStream(data => data.order)
+            .pipe(switchMap(order => {
+            if ((order === null || order === void 0 ? void 0 : order.state) === 'Draft' && route.component !== DraftOrderDetailComponent) {
+                // Make sure Draft orders only get displayed with the DraftOrderDetailComponent
+                this.router.navigate(['/orders/draft', id]);
+                return EMPTY;
+            }
+            else {
+                return [order];
+            }
+        }), takeUntil(navigateAway$), filter(notNullOrUndefined), shareReplay(1));
+        return stream.pipe(take(1), map(() => stream));
+    }
+}
+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 }
+];
+
+class OrderGuard {
+    constructor(dataService, router) {
+        this.dataService = dataService;
+        this.router = router;
+    }
+    canActivate(route, state) {
+        const isDraft = state.url.includes('orders/draft');
+        const id = route.paramMap.get('id');
+        if (isDraft) {
+            if (id === 'create') {
+                return this.dataService.order
+                    .createDraftOrder()
+                    .pipe(map(({ createDraftOrder }) => this.router.parseUrl(`/orders/draft/${createDraftOrder.id}`)));
+            }
+            else {
+                return true;
+            }
+        }
+        else {
+            return true;
+        }
+    }
+}
+OrderGuard.ɵprov = i0.ɵɵdefineInjectable({ factory: function OrderGuard_Factory() { return new OrderGuard(i0.ɵɵinject(i1.DataService), i0.ɵɵinject(i1$1.Router)); }, token: OrderGuard, providedIn: "root" });
+OrderGuard.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root',
+            },] }
+];
+OrderGuard.ctorParameters = () => [
+    { type: DataService },
+    { type: Router }
+];
+
+const ɵ0 = {
+    breadcrumb: marker('breadcrumb.orders'),
+}, ɵ1 = {
+    breadcrumb: orderBreadcrumb,
+}, ɵ2 = {
+    breadcrumb: orderBreadcrumb,
+}, ɵ3 = {
+    breadcrumb: modifyingOrderBreadcrumb,
+};
+const orderRoutes = [
+    {
+        path: '',
+        component: OrderListComponent,
+        data: ɵ0,
+    },
+    {
+        path: 'draft/:id',
+        component: DraftOrderDetailComponent,
+        resolve: {
+            entity: OrderResolver,
+        },
+        canActivate: [OrderGuard],
+        canDeactivate: [CanDeactivateDetailGuard],
+        data: ɵ1,
+    },
+    {
+        path: ':id',
+        component: OrderDetailComponent,
+        resolve: {
+            entity: OrderResolver,
+        },
+        canActivate: [OrderGuard],
+        canDeactivate: [CanDeactivateDetailGuard],
+        data: ɵ2,
+    },
+    {
+        path: ':id/modify',
+        component: OrderEditorComponent,
+        resolve: {
+            entity: OrderResolver,
+        },
+        // canDeactivate: [CanDeactivateDetailGuard],
+        data: ɵ3,
+    },
+];
+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,
+                    DraftOrderDetailComponent,
+                    DraftOrderVariantSelectorComponent,
+                    SelectCustomerDialogComponent,
+                    SelectAddressDialogComponent,
+                    CouponCodeSelectorComponent,
+                    SelectShippingMethodDialogComponent,
+                ],
+            },] }
+];
+
+// This file was generated by the build-public-api.ts script
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AddManualPaymentDialogComponent, CancelOrderDialogComponent, CouponCodeSelectorComponent, DraftOrderDetailComponent, DraftOrderVariantSelectorComponent, FulfillOrderDialogComponent, FulfillmentCardComponent, FulfillmentDetailComponent, FulfillmentStateLabelComponent, GET_CUSTOMER_ADDRESSES, LineFulfillmentComponent, LineRefundsComponent, ModificationDetailComponent, NODE_HEIGHT, OrderCustomFieldsCardComponent, OrderDetailComponent, OrderEditResultType, OrderEditorComponent, OrderEditsPreviewDialogComponent, OrderGuard, OrderHistoryComponent, OrderListComponent, OrderModule, OrderPaymentCardComponent, OrderProcessEdgeComponent, OrderProcessGraphComponent, OrderProcessGraphDialogComponent, OrderProcessNodeComponent, OrderResolver, OrderStateSelectDialogComponent, OrderTableComponent, OrderTransitionService, PaymentDetailComponent, PaymentStateLabelComponent, RefundOrderDialogComponent, RefundStateLabelComponent, SelectAddressDialogComponent, SelectCustomerDialogComponent, SelectShippingMethodDialogComponent, SettleRefundDialogComponent, SimpleItemListComponent, modifyingOrderBreadcrumb, orderBreadcrumb, orderRoutes, ɵ0, ɵ1, ɵ2, ɵ3 };
+//# sourceMappingURL=vendure-admin-ui-order.js.map