@vendure/admin-ui 1.7.4 → 1.8.1

package/bundles/vendure-admin-ui-order.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/forms'), require('@vendure/admin-ui/core'), require('@biesbjerg/ngx-translate-extract-marker'), require('@vendure/common/lib/shared-utils'), require('@angular/router'), require('rxjs'), require('rxjs/operators'), require('@vendure/common/lib/simple-deep-clone')) :
-    typeof define === 'function' && define.amd ? define('@vendure/admin-ui/order', ['exports', '@angular/core', '@angular/forms', '@vendure/admin-ui/core', '@biesbjerg/ngx-translate-extract-marker', '@vendure/common/lib/shared-utils', '@angular/router', 'rxjs', 'rxjs/operators', '@vendure/common/lib/simple-deep-clone'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.vendure = global.vendure || {}, global.vendure['admin-ui'] = global.vendure['admin-ui'] || {}, global.vendure['admin-ui'].order = {}), global.ng.core, global.ng.forms, global.vendure['admin-ui'].core, global.ngxTranslateExtractMarker, global.sharedUtils, global.ng.router, global.rxjs, global.rxjs.operators, global.simpleDeepClone));
-}(this, (function (exports, i0, forms, i1, ngxTranslateExtractMarker, sharedUtils, i1$1, rxjs, operators, simpleDeepClone) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/forms'), require('@vendure/admin-ui/core'), require('@biesbjerg/ngx-translate-extract-marker'), require('rxjs'), require('rxjs/operators'), require('@angular/router'), require('@vendure/common/lib/pick'), require('apollo-angular'), require('@vendure/common/lib/shared-utils'), require('@vendure/common/lib/simple-deep-clone')) :
+    typeof define === 'function' && define.amd ? define('@vendure/admin-ui/order', ['exports', '@angular/core', '@angular/forms', '@vendure/admin-ui/core', '@biesbjerg/ngx-translate-extract-marker', 'rxjs', 'rxjs/operators', '@angular/router', '@vendure/common/lib/pick', 'apollo-angular', '@vendure/common/lib/shared-utils', '@vendure/common/lib/simple-deep-clone'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.vendure = global.vendure || {}, global.vendure['admin-ui'] = global.vendure['admin-ui'] || {}, global.vendure['admin-ui'].order = {}), global.ng.core, global.ng.forms, global.vendure['admin-ui'].core, global.ngxTranslateExtractMarker, global.rxjs, global.rxjs.operators, global.ng.router, global.pick, global.apolloAngular, global.sharedUtils, global.simpleDeepClone));
+}(this, (function (exports, i0, forms, i1, ngxTranslateExtractMarker, rxjs, operators, i1$1, pick, apolloAngular, sharedUtils, simpleDeepClone) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -510,6 +510,645 @@
         { type: i1.I18nService }
     ]; };
 
+    var CouponCodeSelectorComponent = /** @class */ (function () {
+        function CouponCodeSelectorComponent(dataService) {
+            this.dataService = dataService;
+            this.addCouponCode = new i0.EventEmitter();
+            this.removeCouponCode = new i0.EventEmitter();
+            this.couponCodeInput$ = new rxjs.Subject();
+        }
+        CouponCodeSelectorComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            var _a;
+            this.availableCouponCodes$ = rxjs.concat(this.couponCodeInput$.pipe(operators.distinctUntilChanged(), operators.switchMap(function (term) { return _this.dataService.promotion.getPromotions(10, 0, {
+                couponCode: { contains: term },
+            }).single$; }), operators.map(function (_b) {
+                var promotions = _b.promotions;
+                // tslint:disable-next-line:no-non-null-assertion
+                return promotions.items.map(function (p) { return ({ code: p.couponCode, promotionName: p.name }); });
+            }), operators.startWith([])));
+            if (!this.control) {
+                this.control = new forms.FormControl((_a = this.couponCodes) !== null && _a !== void 0 ? _a : []);
+            }
+        };
+        return CouponCodeSelectorComponent;
+    }());
+    CouponCodeSelectorComponent.decorators = [
+        { type: i0.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: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [""]
+                },] }
+    ];
+    CouponCodeSelectorComponent.ctorParameters = function () { return [
+        { type: i1.DataService }
+    ]; };
+    CouponCodeSelectorComponent.propDecorators = {
+        couponCodes: [{ type: i0.Input }],
+        control: [{ type: i0.Input }],
+        addCouponCode: [{ type: i0.Output }],
+        removeCouponCode: [{ type: i0.Output }]
+    };
+
+    var OrderStateSelectDialogComponent = /** @class */ (function () {
+        function OrderStateSelectDialogComponent() {
+            this.nextStates = [];
+            this.message = '';
+            this.selectedState = '';
+        }
+        OrderStateSelectDialogComponent.prototype.select = function () {
+            if (this.selectedState) {
+                this.resolveWith(this.selectedState);
+            }
+        };
+        OrderStateSelectDialogComponent.prototype.cancel = function () {
+            this.resolveWith();
+        };
+        return OrderStateSelectDialogComponent;
+    }());
+    OrderStateSelectDialogComponent.decorators = [
+        { type: i0.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: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [""]
+                },] }
+    ];
+
+    var OrderTransitionService = /** @class */ (function () {
+        function OrderTransitionService(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.
+         */
+        OrderTransitionService.prototype.transitionToPreModifyingState = function (orderId, nextStates) {
+            var _this = this;
+            return this.getPreModifyingState(orderId).pipe(operators.switchMap(function (state) {
+                var manualTransitionOptions = {
+                    orderId: orderId,
+                    nextStates: nextStates,
+                    message: _this.i18nService.translate(ngxTranslateExtractMarker.marker('order.unable-to-transition-to-state-try-another'), { state: state }),
+                    cancellable: false,
+                    retry: 10,
+                };
+                if (state) {
+                    return _this.transitionToStateOrThrow(orderId, state).pipe(operators.catchError(function (err) { return _this.manuallyTransitionToState(manualTransitionOptions); }));
+                }
+                else {
+                    return _this.manuallyTransitionToState(manualTransitionOptions);
+                }
+            }));
+        };
+        /**
+         * Displays a modal for manually selecting the next state.
+         */
+        OrderTransitionService.prototype.manuallyTransitionToState = function (options) {
+            var _this = this;
+            return this.modalService
+                .fromComponent(OrderStateSelectDialogComponent, {
+                locals: {
+                    nextStates: options.nextStates,
+                    cancellable: options.cancellable,
+                    message: options.message,
+                },
+                closable: false,
+                size: 'md',
+            })
+                .pipe(operators.switchMap(function (result) {
+                if (result) {
+                    return _this.transitionToStateOrThrow(options.orderId, result);
+                }
+                else {
+                    if (!options.cancellable) {
+                        throw new Error("An order state must be selected");
+                    }
+                    else {
+                        return rxjs.EMPTY;
+                    }
+                }
+            }), operators.retryWhen(function (errors) { return errors.pipe(operators.delay(2000), operators.take(options.retry)); }));
+        };
+        /**
+         * Attempts to get the last state the Order was in before it was transitioned
+         * to the "Modifying" state.
+         */
+        OrderTransitionService.prototype.getPreModifyingState = function (orderId) {
+            return this.dataService.order
+                .getOrderHistory(orderId, {
+                filter: {
+                    type: {
+                        eq: i1.HistoryEntryType.ORDER_STATE_TRANSITION,
+                    },
+                },
+                sort: {
+                    createdAt: i1.SortOrder.DESC,
+                },
+            })
+                .mapSingle(function (result) { return result.order; })
+                .pipe(operators.map(function (result) {
+                var item = result === null || result === void 0 ? void 0 : result.history.items.find(function (i) { return i.data.to === 'Modifying'; });
+                if (item) {
+                    return item.data.from;
+                }
+                else {
+                    return;
+                }
+            }));
+        };
+        OrderTransitionService.prototype.transitionToStateOrThrow = function (orderId, state) {
+            var _this = this;
+            return this.dataService.order.transitionToState(orderId, state).pipe(operators.map(function (_a) {
+                var transitionOrderToState = _a.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);
+                }
+            }));
+        };
+        return OrderTransitionService;
+    }());
+    OrderTransitionService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function OrderTransitionService_Factory() { return new OrderTransitionService(i0__namespace.ɵɵinject(i1__namespace.DataService), i0__namespace.ɵɵinject(i1__namespace.ModalService), i0__namespace.ɵɵinject(i1__namespace.NotificationService), i0__namespace.ɵɵinject(i1__namespace.I18nService)); }, token: OrderTransitionService, providedIn: "root" });
+    OrderTransitionService.decorators = [
+        { type: i0.Injectable, args: [{
+                    providedIn: 'root',
+                },] }
+    ];
+    OrderTransitionService.ctorParameters = function () { return [
+        { type: i1.DataService },
+        { type: i1.ModalService },
+        { type: i1.NotificationService },
+        { type: i1.I18nService }
+    ]; };
+
+    var GET_CUSTOMER_ADDRESSES = apolloAngular.gql(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    query GetCustomerAddresses($customerId: ID!) {\n        customer(id: $customerId) {\n            id\n            addresses {\n                ...Address\n            }\n        }\n    }\n    ", "\n"], ["\n    query GetCustomerAddresses($customerId: ID!) {\n        customer(id: $customerId) {\n            id\n            addresses {\n                ...Address\n            }\n        }\n    }\n    ", "\n"])), i1.ADDRESS_FRAGMENT);
+    var templateObject_1;
+
+    var SelectAddressDialogComponent = /** @class */ (function () {
+        function SelectAddressDialogComponent(dataService, formBuilder) {
+            this.dataService = dataService;
+            this.formBuilder = formBuilder;
+            this.useExisting = true;
+            this.createNew = false;
+        }
+        SelectAddressDialogComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            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 : '', forms.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 : '', forms.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 : '', forms.Validators.required],
+                countryCode: [(_r = (_q = this.currentAddress) === null || _q === void 0 ? void 0 : _q.countryCode) !== null && _r !== void 0 ? _r : '', forms.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(function (_u) {
+                    var customer = _u.customer;
+                    var _a;
+                    return (_a = customer === null || customer === void 0 ? void 0 : customer.addresses) !== null && _a !== void 0 ? _a : [];
+                })
+                    .pipe(operators.tap(function (addresses) {
+                    if (_this.currentAddress) {
+                        _this.selectedAddress = addresses.find(function (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;
+                    }
+                }))
+                : rxjs.of([]);
+            this.availableCountries$ = this.dataService.settings
+                .getAvailableCountries()
+                .mapSingle(function (_u) {
+                var countries = _u.countries;
+                return countries.items;
+            });
+        };
+        SelectAddressDialogComponent.prototype.trackByFn = function (item) {
+            return item.id;
+        };
+        SelectAddressDialogComponent.prototype.addressIdFn = function (item) {
+            return item.streetLine1 + item.postalCode;
+        };
+        SelectAddressDialogComponent.prototype.cancel = function () {
+            this.resolveWith();
+        };
+        SelectAddressDialogComponent.prototype.select = function () {
+            if (this.useExisting && this.selectedAddress) {
+                this.resolveWith(Object.assign(Object.assign({}, pick.pick(this.selectedAddress, [
+                    'fullName',
+                    'company',
+                    'streetLine1',
+                    'streetLine2',
+                    'city',
+                    'province',
+                    'phoneNumber',
+                    'postalCode',
+                ])), { countryCode: this.selectedAddress.country.code }));
+            }
+            if (this.createNew && this.addressForm.valid) {
+                var formValue = this.addressForm.value;
+                this.resolveWith(formValue);
+            }
+        };
+        return SelectAddressDialogComponent;
+    }());
+    SelectAddressDialogComponent.decorators = [
+        { type: i0.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: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [""]
+                },] }
+    ];
+    SelectAddressDialogComponent.ctorParameters = function () { return [
+        { type: i1.DataService },
+        { type: forms.FormBuilder }
+    ]; };
+
+    var SelectCustomerDialogComponent = /** @class */ (function () {
+        function SelectCustomerDialogComponent(dataService, formBuilder) {
+            this.dataService = dataService;
+            this.formBuilder = formBuilder;
+            this.isLoading = false;
+            this.input$ = new rxjs.Subject();
+            this.selectedCustomer = [];
+            this.useExisting = true;
+            this.createNew = false;
+            this.customerForm = this.formBuilder.group({
+                title: '',
+                firstName: ['', forms.Validators.required],
+                lastName: ['', forms.Validators.required],
+                phoneNumber: '',
+                emailAddress: ['', [forms.Validators.required, forms.Validators.email]],
+            });
+        }
+        SelectCustomerDialogComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.customers$ = rxjs.concat(rxjs.of([]), // default items
+            this.input$.pipe(operators.debounceTime(200), operators.distinctUntilChanged(), operators.tap(function () { return (_this.isLoading = true); }), operators.switchMap(function (term) { return _this.dataService.customer
+                .getCustomerList(10, 0, term)
+                .mapStream(function (_a) {
+                var customers = _a.customers;
+                return customers.items;
+            })
+                .pipe(operators.catchError(function () { return rxjs.of([]); }), // empty list on error
+            operators.tap(function () { return (_this.isLoading = false); })); })));
+        };
+        SelectCustomerDialogComponent.prototype.trackByFn = function (item) {
+            return item.id;
+        };
+        SelectCustomerDialogComponent.prototype.cancel = function () {
+            this.resolveWith();
+        };
+        SelectCustomerDialogComponent.prototype.select = function () {
+            if (this.useExisting && this.selectedCustomer.length === 1) {
+                this.resolveWith(this.selectedCustomer[0]);
+            }
+            if (this.createNew && this.customerForm.valid) {
+                var formValue = this.customerForm.value;
+                this.resolveWith(formValue);
+            }
+        };
+        return SelectCustomerDialogComponent;
+    }());
+    SelectCustomerDialogComponent.decorators = [
+        { type: i0.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: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [""]
+                },] }
+    ];
+    SelectCustomerDialogComponent.ctorParameters = function () { return [
+        { type: i1.DataService },
+        { type: forms.FormBuilder }
+    ]; };
+
+    var SelectShippingMethodDialogComponent = /** @class */ (function () {
+        function SelectShippingMethodDialogComponent() {
+        }
+        SelectShippingMethodDialogComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            if (this.currentSelectionId) {
+                this.selectedMethod = this.eligibleShippingMethods.find(function (m) { return m.id === _this.currentSelectionId; });
+            }
+        };
+        SelectShippingMethodDialogComponent.prototype.methodIdFn = function (item) {
+            return item.id;
+        };
+        SelectShippingMethodDialogComponent.prototype.cancel = function () {
+            this.resolveWith();
+        };
+        SelectShippingMethodDialogComponent.prototype.select = function () {
+            if (this.selectedMethod) {
+                this.resolveWith(this.selectedMethod.id);
+            }
+        };
+        return SelectShippingMethodDialogComponent;
+    }());
+    SelectShippingMethodDialogComponent.decorators = [
+        { type: i0.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: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [""]
+                },] }
+    ];
+    SelectShippingMethodDialogComponent.ctorParameters = function () { return []; };
+
+    var DraftOrderDetailComponent = /** @class */ (function (_super) {
+        __extends(DraftOrderDetailComponent, _super);
+        function DraftOrderDetailComponent(router, route, serverConfigService, changeDetector, dataService, notificationService, modalService, orderTransitionService) {
+            var _this = _super.call(this, route, router, serverConfigService, dataService) || this;
+            _this.changeDetector = changeDetector;
+            _this.dataService = dataService;
+            _this.notificationService = notificationService;
+            _this.modalService = modalService;
+            _this.orderTransitionService = orderTransitionService;
+            _this.detailForm = new forms.FormGroup({});
+            _this.fetchHistory = new rxjs.Subject();
+            _this.displayCouponCodeInput = false;
+            return _this;
+        }
+        DraftOrderDetailComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.init();
+            this.orderLineCustomFields = this.getCustomFieldConfig('OrderLine');
+            this.eligibleShippingMethods$ = this.entity$.pipe(operators.switchMap(function (order) { return _this.dataService.order
+                .getDraftOrderEligibleShippingMethods(order.id)
+                .mapSingle(function (_c) {
+                var eligibleShippingMethodsForDraftOrder = _c.eligibleShippingMethodsForDraftOrder;
+                return eligibleShippingMethodsForDraftOrder;
+            }); }));
+            this.customFields = this.getCustomFieldConfig('Order');
+            this.orderLineCustomFields = this.getCustomFieldConfig('OrderLine');
+        };
+        DraftOrderDetailComponent.prototype.ngOnDestroy = function () {
+            this.destroy();
+        };
+        DraftOrderDetailComponent.prototype.addItemToOrder = function (event) {
+            var _this = this;
+            this.dataService.order.addItemToDraftOrder(this.id, event).subscribe(function (result) {
+                if (result.addItemToDraftOrder.__typename !== 'Order') {
+                    _this.notificationService.error(result.addItemToDraftOrder.message);
+                }
+            });
+        };
+        DraftOrderDetailComponent.prototype.adjustOrderLine = function (event) {
+            var _this = this;
+            this.dataService.order
+                .adjustDraftOrderLine(this.id, { orderLineId: event.lineId, quantity: event.quantity })
+                .subscribe(function (result) {
+                if (result.adjustDraftOrderLine.__typename !== 'Order') {
+                    _this.notificationService.error(result.adjustDraftOrderLine.message);
+                }
+            });
+        };
+        DraftOrderDetailComponent.prototype.removeOrderLine = function (event) {
+            var _this = this;
+            this.dataService.order.removeDraftOrderLine(this.id, event.lineId).subscribe(function (result) {
+                if (result.removeDraftOrderLine.__typename !== 'Order') {
+                    _this.notificationService.error(result.removeDraftOrderLine.message);
+                }
+            });
+        };
+        DraftOrderDetailComponent.prototype.getOrderAddressLines = function (orderAddress) {
+            if (!orderAddress) {
+                return [];
+            }
+            return Object.values(orderAddress)
+                .filter(function (val) { return val !== 'OrderAddress'; })
+                .filter(function (line) { return !!line; });
+        };
+        DraftOrderDetailComponent.prototype.setCustomer = function () {
+            var _this = this;
+            this.modalService.fromComponent(SelectCustomerDialogComponent).subscribe(function (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();
+                }
+            });
+        };
+        DraftOrderDetailComponent.prototype.setShippingAddress = function () {
+            var _this = this;
+            this.entity$
+                .pipe(operators.take(1), operators.switchMap(function (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(function (result) {
+                if (result) {
+                    _this.dataService.order.setDraftOrderShippingAddress(_this.id, result).subscribe();
+                }
+            });
+        };
+        DraftOrderDetailComponent.prototype.setBillingAddress = function () {
+            var _this = this;
+            this.entity$
+                .pipe(operators.take(1), operators.switchMap(function (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(function (result) {
+                if (result) {
+                    _this.dataService.order.setDraftOrderBillingAddress(_this.id, result).subscribe();
+                }
+            });
+        };
+        DraftOrderDetailComponent.prototype.applyCouponCode = function (couponCode) {
+            this.dataService.order.applyCouponCodeToDraftOrder(this.id, couponCode).subscribe();
+        };
+        DraftOrderDetailComponent.prototype.removeCouponCode = function (couponCode) {
+            this.dataService.order.removeCouponCodeFromDraftOrder(this.id, couponCode).subscribe();
+        };
+        DraftOrderDetailComponent.prototype.setShippingMethod = function () {
+            var _this = this;
+            rxjs.combineLatest(this.entity$, this.eligibleShippingMethods$)
+                .pipe(operators.take(1), operators.switchMap(function (_c) {
+                var _d = __read(_c, 2), order = _d[0], methods = _d[1];
+                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(function (result) {
+                if (result) {
+                    _this.dataService.order.setDraftOrderShippingMethod(_this.id, result).subscribe();
+                }
+            });
+        };
+        DraftOrderDetailComponent.prototype.updateCustomFields = function (customFieldsValue) {
+            this.dataService.order
+                .updateOrderCustomFields({
+                id: this.id,
+                customFields: customFieldsValue,
+            })
+                .subscribe();
+        };
+        DraftOrderDetailComponent.prototype.deleteOrder = function () {
+            var _this = this;
+            this.dataService.order.deleteDraftOrder(this.id).subscribe(function (_c) {
+                var deleteDraftOrder = _c.deleteDraftOrder;
+                if (deleteDraftOrder.result === i1.DeletionResult.DELETED) {
+                    _this.notificationService.success(ngxTranslateExtractMarker.marker('common.notify-delete-success'), {
+                        entity: 'Order',
+                    });
+                    _this.router.navigate(['/orders']);
+                }
+                else if (deleteDraftOrder.message) {
+                    _this.notificationService.error(deleteDraftOrder.message);
+                }
+            });
+        };
+        DraftOrderDetailComponent.prototype.completeOrder = function () {
+            var _this = this;
+            this.dataService.order
+                .transitionToState(this.id, 'ArrangingPayment')
+                .subscribe(function (_c) {
+                var transitionOrderToState = _c.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);
+                }
+            });
+        };
+        DraftOrderDetailComponent.prototype.hasId = function (input) {
+            return typeof input === 'object' && !!input.id;
+        };
+        DraftOrderDetailComponent.prototype.setFormValues = function (entity) {
+            // empty
+        };
+        return DraftOrderDetailComponent;
+    }(i1.BaseDetailComponent));
+    DraftOrderDetailComponent.decorators = [
+        { type: i0.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: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [""]
+                },] }
+    ];
+    DraftOrderDetailComponent.ctorParameters = function () { return [
+        { type: i1$1.Router },
+        { type: i1$1.ActivatedRoute },
+        { type: i1.ServerConfigService },
+        { type: i0.ChangeDetectorRef },
+        { type: i1.DataService },
+        { type: i1.NotificationService },
+        { type: i1.ModalService },
+        { type: OrderTransitionService }
+    ]; };
+
+    var DraftOrderVariantSelectorComponent = /** @class */ (function () {
+        function DraftOrderVariantSelectorComponent(dataService) {
+            this.dataService = dataService;
+            this.addItem = new i0.EventEmitter();
+            this.customFieldsFormGroup = new forms.FormGroup({});
+            this.selectedVariantId$ = new rxjs.Subject();
+            this.quantity = 1;
+        }
+        DraftOrderVariantSelectorComponent.prototype.ngOnInit = function () {
+            var e_1, _a;
+            var _this = this;
+            this.selectedVariant$ = this.selectedVariantId$.pipe(operators.switchMap(function (id) {
+                if (id) {
+                    return _this.dataService.product
+                        .getProductVariant(id)
+                        .mapSingle(function (_a) {
+                        var productVariant = _a.productVariant;
+                        return productVariant;
+                    });
+                }
+                else {
+                    return [undefined];
+                }
+            }));
+            try {
+                for (var _b = __values(this.orderLineCustomFields), _c = _b.next(); !_c.done; _c = _b.next()) {
+                    var customField = _c.value;
+                    this.customFieldsFormGroup.addControl(customField.name, new forms.FormControl(''));
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+        };
+        DraftOrderVariantSelectorComponent.prototype.addItemClick = function (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();
+            }
+        };
+        return DraftOrderVariantSelectorComponent;
+    }());
+    DraftOrderVariantSelectorComponent.decorators = [
+        { type: i0.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: i0.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 = function () { return [
+        { type: i1.DataService }
+    ]; };
+    DraftOrderVariantSelectorComponent.propDecorators = {
+        currencyCode: [{ type: i0.Input }],
+        orderLineCustomFields: [{ type: i0.Input }],
+        addItem: [{ type: i0.Output }]
+    };
+
     var FulfillOrderDialogComponent = /** @class */ (function () {
         function FulfillOrderDialogComponent(dataService, changeDetector) {
             this.dataService = dataService;
@@ -992,144 +1631,6 @@
         updateClick: [{ type: i0.Output }]
     };
 
-    var OrderStateSelectDialogComponent = /** @class */ (function () {
-        function OrderStateSelectDialogComponent() {
-            this.nextStates = [];
-            this.message = '';
-            this.selectedState = '';
-        }
-        OrderStateSelectDialogComponent.prototype.select = function () {
-            if (this.selectedState) {
-                this.resolveWith(this.selectedState);
-            }
-        };
-        OrderStateSelectDialogComponent.prototype.cancel = function () {
-            this.resolveWith();
-        };
-        return OrderStateSelectDialogComponent;
-    }());
-    OrderStateSelectDialogComponent.decorators = [
-        { type: i0.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: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [""]
-                },] }
-    ];
-
-    var OrderTransitionService = /** @class */ (function () {
-        function OrderTransitionService(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.
-         */
-        OrderTransitionService.prototype.transitionToPreModifyingState = function (orderId, nextStates) {
-            var _this = this;
-            return this.getPreModifyingState(orderId).pipe(operators.switchMap(function (state) {
-                var manualTransitionOptions = {
-                    orderId: orderId,
-                    nextStates: nextStates,
-                    message: _this.i18nService.translate(ngxTranslateExtractMarker.marker('order.unable-to-transition-to-state-try-another'), { state: state }),
-                    cancellable: false,
-                    retry: 10,
-                };
-                if (state) {
-                    return _this.transitionToStateOrThrow(orderId, state).pipe(operators.catchError(function (err) { return _this.manuallyTransitionToState(manualTransitionOptions); }));
-                }
-                else {
-                    return _this.manuallyTransitionToState(manualTransitionOptions);
-                }
-            }));
-        };
-        /**
-         * Displays a modal for manually selecting the next state.
-         */
-        OrderTransitionService.prototype.manuallyTransitionToState = function (options) {
-            var _this = this;
-            return this.modalService
-                .fromComponent(OrderStateSelectDialogComponent, {
-                locals: {
-                    nextStates: options.nextStates,
-                    cancellable: options.cancellable,
-                    message: options.message,
-                },
-                closable: false,
-                size: 'md',
-            })
-                .pipe(operators.switchMap(function (result) {
-                if (result) {
-                    return _this.transitionToStateOrThrow(options.orderId, result);
-                }
-                else {
-                    if (!options.cancellable) {
-                        throw new Error("An order state must be selected");
-                    }
-                    else {
-                        return rxjs.EMPTY;
-                    }
-                }
-            }), operators.retryWhen(function (errors) { return errors.pipe(operators.delay(2000), operators.take(options.retry)); }));
-        };
-        /**
-         * Attempts to get the last state the Order was in before it was transitioned
-         * to the "Modifying" state.
-         */
-        OrderTransitionService.prototype.getPreModifyingState = function (orderId) {
-            return this.dataService.order
-                .getOrderHistory(orderId, {
-                filter: {
-                    type: {
-                        eq: i1.HistoryEntryType.ORDER_STATE_TRANSITION,
-                    },
-                },
-                sort: {
-                    createdAt: i1.SortOrder.DESC,
-                },
-            })
-                .mapSingle(function (result) { return result.order; })
-                .pipe(operators.map(function (result) {
-                var item = result === null || result === void 0 ? void 0 : result.history.items.find(function (i) { return i.data.to === 'Modifying'; });
-                if (item) {
-                    return item.data.from;
-                }
-                else {
-                    return;
-                }
-            }));
-        };
-        OrderTransitionService.prototype.transitionToStateOrThrow = function (orderId, state) {
-            var _this = this;
-            return this.dataService.order.transitionToState(orderId, state).pipe(operators.map(function (_a) {
-                var transitionOrderToState = _a.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);
-                }
-            }));
-        };
-        return OrderTransitionService;
-    }());
-    OrderTransitionService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function OrderTransitionService_Factory() { return new OrderTransitionService(i0__namespace.ɵɵinject(i1__namespace.DataService), i0__namespace.ɵɵinject(i1__namespace.ModalService), i0__namespace.ɵɵinject(i1__namespace.NotificationService), i0__namespace.ɵɵinject(i1__namespace.I18nService)); }, token: OrderTransitionService, providedIn: "root" });
-    OrderTransitionService.decorators = [
-        { type: i0.Injectable, args: [{
-                    providedIn: 'root',
-                },] }
-    ];
-    OrderTransitionService.ctorParameters = function () { return [
-        { type: i1.DataService },
-        { type: i1.ModalService },
-        { type: i1.NotificationService },
-        { type: i1.I18nService }
-    ]; };
-
     var OrderProcessGraphDialogComponent = /** @class */ (function () {
         function OrderProcessGraphDialogComponent(serverConfigService) {
             this.serverConfigService = serverConfigService;
@@ -1895,7 +2396,7 @@
     OrderDetailComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'vdr-order-detail',
-                    template: "<vdr-action-bar *ngIf=\"entity$ | async as order\">\r\n    <vdr-ab-left>\r\n        <div class=\"flex clr-align-items-center\">\r\n            <vdr-entity-info [entity]=\"entity$ | async\"></vdr-entity-info>\r\n            <vdr-order-state-label [state]=\"order.state\">\r\n                <button\r\n                    class=\"icon-button\"\r\n                    (click)=\"openStateDiagram()\"\r\n                    [title]=\"'order.order-state-diagram' | translate\"\r\n                >\r\n                    <clr-icon shape=\"list\"></clr-icon>\r\n                </button>\r\n            </vdr-order-state-label>\r\n        </div>\r\n    </vdr-ab-left>\r\n\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"order-detail\"></vdr-action-bar-items>\r\n        <button\r\n            class=\"btn btn-primary\"\r\n            *ngIf=\"\r\n                (order.state === 'ArrangingPayment' || order.state === 'ArrangingAdditionalPayment') &&\r\n                (hasUnsettledModifications(order) || 0 < outstandingPaymentAmount(order))\r\n            \"\r\n            (click)=\"addManualPayment(order)\"\r\n        >\r\n            {{ 'order.add-payment-to-order' | translate }}\r\n            ({{ outstandingPaymentAmount(order) | localeCurrency: order.currencyCode }})\r\n        </button>\r\n        <button\r\n            class=\"btn btn-primary\"\r\n            *ngIf=\"\r\n                order.active === false &&\r\n                order.state !== 'ArrangingAdditionalPayment' &&\r\n                0 < outstandingPaymentAmount(order)\r\n            \"\r\n            (click)=\"transitionToState('ArrangingAdditionalPayment')\"\r\n        >\r\n            {{ 'order.arrange-additional-payment' | translate }}\r\n        </button>\r\n        <button class=\"btn btn-primary\" (click)=\"fulfillOrder()\" [disabled]=\"!canAddFulfillment(order)\">\r\n            {{ 'order.fulfill-order' | translate }}\r\n        </button>\r\n        <vdr-dropdown>\r\n            <button class=\"icon-button\" vdrDropdownTrigger>\r\n                <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n            </button>\r\n            <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                <ng-container *ngIf=\"order.nextStates.includes('Modifying')\">\r\n                    <button type=\"button\" class=\"btn\" vdrDropdownItem (click)=\"transitionToModifying()\">\r\n                        <clr-icon shape=\"pencil\"></clr-icon>\r\n                        {{ 'order.modify-order' | translate }}\r\n                    </button>\r\n                    <div class=\"dropdown-divider\"></div>\r\n                </ng-container>\r\n                <button\r\n                    type=\"button\"\r\n                    class=\"btn\"\r\n                    vdrDropdownItem\r\n                    *ngIf=\"order.nextStates.includes('Cancelled')\"\r\n                    (click)=\"cancelOrRefund(order)\"\r\n                >\r\n                    <clr-icon shape=\"error-standard\" class=\"is-error\"></clr-icon>\r\n                    <ng-container *ngIf=\"orderHasSettledPayments(order); else cancelOnly\">\r\n                        {{ 'order.refund-and-cancel-order' | translate }}\r\n                    </ng-container>\r\n                    <ng-template #cancelOnly>\r\n                        {{ 'order.cancel-order' | translate }}\r\n                    </ng-template>\r\n                </button>\r\n\r\n                <ng-container *ngIf=\"(nextStates$ | async)?.length\">\r\n                    <div class=\"dropdown-divider\"></div>\r\n                    <button\r\n                        *ngFor=\"let nextState of nextStates$ | async\"\r\n                        type=\"button\"\r\n                        class=\"btn\"\r\n                        vdrDropdownItem\r\n                        (click)=\"transitionToState(nextState)\"\r\n                    >\r\n                        <clr-icon shape=\"step-forward-2\"></clr-icon>\r\n                        {{\r\n                            'order.transition-to-state'\r\n                                | translate: { state: (nextState | stateI18nToken | translate) }\r\n                        }}\r\n                    </button>\r\n                </ng-container>\r\n                <div class=\"dropdown-divider\"></div>\r\n                <button type=\"button\" class=\"btn\" vdrDropdownItem (click)=\"manuallyTransitionToState(order)\">\r\n                    <clr-icon shape=\"step-forward-2\" class=\"is-warning\"></clr-icon>\r\n                    {{ 'order.manually-transition-to-state' | translate }}\r\n                </button>\r\n            </vdr-dropdown-menu>\r\n        </vdr-dropdown>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<div *ngIf=\"entity$ | async as order\">\r\n    <div class=\"clr-row\">\r\n        <div class=\"clr-col-lg-8\">\r\n            <vdr-order-table\r\n                [order]=\"order\"\r\n                [orderLineCustomFields]=\"orderLineCustomFields\"\r\n            ></vdr-order-table>\r\n            <h4>{{ 'order.tax-summary' | translate }}</h4>\r\n            <table class=\"table\">\r\n                <thead>\r\n                    <tr>\r\n                        <th>{{ 'common.description' | translate }}</th>\r\n                        <th>{{ 'order.tax-rate' | translate }}</th>\r\n                        <th>{{ 'order.tax-base' | translate }}</th>\r\n                        <th>{{ 'order.tax-total' | translate }}</th>\r\n                    </tr>\r\n                </thead>\r\n                <tbody>\r\n                    <tr *ngFor=\"let row of order.taxSummary\">\r\n                        <td>{{ row.description }}</td>\r\n                        <td>{{ row.taxRate / 100 | percent }}</td>\r\n                        <td>{{ row.taxBase | localeCurrency: order.currencyCode }}</td>\r\n                        <td>{{ row.taxTotal | localeCurrency: order.currencyCode }}</td>\r\n                    </tr>\r\n                </tbody>\r\n            </table>\r\n\r\n            <vdr-custom-detail-component-host\r\n                locationId=\"order-detail\"\r\n                [entity$]=\"entity$\"\r\n                [detailForm]=\"detailForm\"\r\n            ></vdr-custom-detail-component-host>\r\n\r\n            <vdr-order-history\r\n                [order]=\"order\"\r\n                [history]=\"history$ | async\"\r\n                (addNote)=\"addNote($event)\"\r\n                (updateNote)=\"updateNote($event)\"\r\n                (deleteNote)=\"deleteNote($event)\"\r\n            ></vdr-order-history>\r\n        </div>\r\n        <div class=\"clr-col-lg-4 order-cards\">\r\n            <vdr-order-custom-fields-card\r\n                [customFieldsConfig]=\"customFields\"\r\n                [customFieldValues]=\"order.customFields\"\r\n                (updateClick)=\"updateCustomFields($event)\"\r\n            ></vdr-order-custom-fields-card>\r\n            <div class=\"card\">\r\n                <div class=\"card-header\">\r\n                    {{ 'order.customer' | translate }}\r\n                </div>\r\n                <div class=\"card-block\">\r\n                    <div class=\"card-text\">\r\n                        <vdr-customer-label [customer]=\"order.customer\"></vdr-customer-label>\r\n                        <h6 *ngIf=\"getOrderAddressLines(order.shippingAddress).length\">\r\n                            {{ 'order.shipping-address' | translate }}\r\n                        </h6>\r\n                        <vdr-formatted-address [address]=\"order.shippingAddress\"></vdr-formatted-address>\r\n                        <h6 *ngIf=\"getOrderAddressLines(order.billingAddress).length\">\r\n                            {{ 'order.billing-address' | translate }}\r\n                        </h6>\r\n                        <vdr-formatted-address [address]=\"order.billingAddress\"></vdr-formatted-address>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <ng-container *ngIf=\"order.payments && order.payments.length\">\r\n                <vdr-order-payment-card\r\n                    *ngFor=\"let payment of order.payments\"\r\n                    [currencyCode]=\"order.currencyCode\"\r\n                    [payment]=\"payment\"\r\n                    (settlePayment)=\"settlePayment($event)\"\r\n                    (transitionPaymentState)=\"transitionPaymentState($event)\"\r\n                    (settleRefund)=\"settleRefund($event)\"\r\n                ></vdr-order-payment-card>\r\n            </ng-container>\r\n            <ng-container *ngFor=\"let fulfillment of order.fulfillments\">\r\n                <vdr-fulfillment-card\r\n                    [fulfillment]=\"fulfillment\"\r\n                    [order]=\"order\"\r\n                    (transitionState)=\"transitionFulfillment(fulfillment.id, $event)\"\r\n                ></vdr-fulfillment-card>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n</div>\r\n",
+                    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: i0.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"]
                 },] }
@@ -1976,7 +2477,6 @@
             _this.notificationService = notificationService;
             _this.modalService = modalService;
             _this.orderTransitionService = orderTransitionService;
-            _this.couponCodeInput$ = new rxjs.Subject();
             _this.detailForm = new forms.FormGroup({});
             _this.couponCodesControl = new forms.FormControl();
             _this.modifyOrderInput = {
@@ -2106,13 +2606,6 @@
                     finally { if (e_2) throw e_2.error; }
                 }
             });
-            this.availableCouponCodes$ = rxjs.concat(this.couponCodeInput$.pipe(operators.distinctUntilChanged(), operators.switchMap(function (term) { return _this.dataService.promotion.getPromotions(10, 0, {
-                couponCode: { contains: term },
-            }).single$; }), operators.map(function (_u) {
-                var promotions = _u.promotions;
-                // tslint:disable-next-line:no-non-null-assertion
-                return promotions.items.map(function (p) { return ({ code: p.couponCode, promotionName: p.name }); });
-            }), operators.startWith([])));
             this.addItemCustomFieldsFormArray = new forms.FormArray([]);
             this.addItemCustomFieldsForm = new forms.FormGroup({});
             try {
@@ -2397,9 +2890,9 @@
     OrderEditorComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'vdr-order-editor',
-                    template: "<vdr-action-bar *ngIf=\"entity$ | async as order\">\r\n    <vdr-ab-left>\r\n        <div class=\"flex clr-align-items-center\">\r\n            <vdr-entity-info [entity]=\"entity$ | async\"></vdr-entity-info>\r\n            <vdr-order-state-label [state]=\"order.state\"></vdr-order-state-label>\r\n        </div>\r\n    </vdr-ab-left>\r\n\r\n    <vdr-ab-right>\r\n        <button class=\"btn btn-secondary\" (click)=\"transitionToPriorState(order)\">\r\n            {{ 'order.cancel-modification' | translate }}\r\n        </button>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<div *ngIf=\"entity$ | async as order\">\r\n    <div class=\"clr-row\">\r\n        <div class=\"clr-col-lg-8\">\r\n            <table class=\"order-table table\">\r\n                <thead>\r\n                    <tr>\r\n                        <th></th>\r\n                        <th>{{ 'order.product-name' | translate }}</th>\r\n                        <th>{{ 'order.product-sku' | translate }}</th>\r\n                        <th>{{ 'order.unit-price' | translate }}</th>\r\n                        <th>{{ 'order.quantity' | translate }}</th>\r\n                        <th *ngIf=\"orderLineCustomFields.length\">{{ 'common.custom-fields' | translate }}</th>\r\n                        <th>{{ 'order.total' | translate }}</th>\r\n                    </tr>\r\n                </thead>\r\n                <tbody>\r\n                    <tr\r\n                        *ngFor=\"let line of order.lines; let i = index\"\r\n                        class=\"order-line\"\r\n                        [class.is-cancelled]=\"line.quantity === 0\"\r\n                        [class.modified]=\"isLineModified(line)\"\r\n                    >\r\n                        <td class=\"align-middle thumb\">\r\n                            <img\r\n                                *ngIf=\"line.featuredAsset\"\r\n                                [src]=\"line.featuredAsset | assetPreview: 'tiny'\"\r\n                            />\r\n                        </td>\r\n                        <td class=\"align-middle name\">{{ line.productVariant.name }}</td>\r\n                        <td class=\"align-middle sku\">{{ line.productVariant.sku }}</td>\r\n                        <td class=\"align-middle unit-price\">\r\n                            {{ line.unitPriceWithTax | localeCurrency: order.currencyCode }}\r\n                            <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                {{ line.unitPrice | localeCurrency: order.currencyCode }}\r\n                            </div>\r\n                        </td>\r\n                        <td class=\"align-middle quantity\">\r\n                            <input\r\n                                type=\"number\"\r\n                                min=\"0\"\r\n                                [value]=\"line.quantity\"\r\n                                (input)=\"updateLineQuantity(line, $event.target.value)\"\r\n                            />\r\n                            <vdr-line-refunds [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\r\n                            <vdr-line-fulfillment\r\n                                [line]=\"line\"\r\n                                [orderState]=\"order.state\"\r\n                            ></vdr-line-fulfillment>\r\n                        </td>\r\n                        <td *ngIf=\"orderLineCustomFields.length\" class=\"order-line-custom-field align-middle\">\r\n                            <vdr-tabbed-custom-fields\r\n                                entityName=\"OrderLine\"\r\n                                [customFields]=\"orderLineCustomFields\"\r\n                                [customFieldsFormGroup]=\"orderLineCustomFieldsFormArray.get([i])\"\r\n                                [compact]=\"true\"\r\n                            ></vdr-tabbed-custom-fields>\r\n                        </td>\r\n                        <td class=\"align-middle total\">\r\n                            {{ line.linePriceWithTax | localeCurrency: order.currencyCode }}\r\n                            <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                {{ line.linePrice | localeCurrency: order.currencyCode }}\r\n                            </div>\r\n                        </td>\r\n                    </tr>\r\n                    <tr\r\n                        *ngFor=\"let addedLine of addedLines; trackBy: trackByProductVariantId; let i = index\"\r\n                        class=\"modified\"\r\n                    >\r\n                        <td class=\"align-middle thumb\">\r\n                            <img\r\n                                *ngIf=\"addedLine.productAsset\"\r\n                                [src]=\"addedLine.productAsset | assetPreview: 'tiny'\"\r\n                            />\r\n                        </td>\r\n                        <td class=\"align-middle name\">{{ addedLine.productVariantName }}</td>\r\n                        <td class=\"align-middle sku\">{{ addedLine.sku }}</td>\r\n                        <td class=\"align-middle unit-price\">\r\n                            {{ addedLine.priceWithTax | localeCurrency: order.currencyCode }}\r\n                            <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                {{ addedLine.price | localeCurrency: order.currencyCode }}\r\n                            </div>\r\n                        </td>\r\n                        <td class=\"align-middle quantity\">\r\n                            <input\r\n                                type=\"number\"\r\n                                min=\"0\"\r\n                                [value]=\"addedLine.quantity\"\r\n                                (input)=\"updateAddedItemQuantity(addedLine, $event.target.value)\"\r\n                            />\r\n                            <button class=\"icon-button\" (click)=\"removeAddedItem(i)\">\r\n                                <clr-icon shape=\"trash\"></clr-icon>\r\n                            </button>\r\n                        </td>\r\n                        <td *ngIf=\"orderLineCustomFields.length\" class=\"order-line-custom-field align-middle\">\r\n                            <ng-container *ngFor=\"let customField of orderLineCustomFields\">\r\n                                <vdr-custom-field-control\r\n                                    [customField]=\"customField\"\r\n                                    [customFieldsFormGroup]=\"addItemCustomFieldsFormArray.get([i])\"\r\n                                    entityName=\"OrderLine\"\r\n                                    [compact]=\"true\"\r\n                                ></vdr-custom-field-control>\r\n                            </ng-container>\r\n                        </td>\r\n                        <td class=\"align-middle total\">\r\n                            {{\r\n                                (addedLine.priceWithTax * addedLine.quantity) / 100\r\n                                    | currency: order.currencyCode\r\n                            }}\r\n                            <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                {{\r\n                                    (addedLine.price * addedLine.quantity) / 100\r\n                                        | currency: order.currencyCode\r\n                                }}\r\n                            </div>\r\n                        </td>\r\n                    </tr>\r\n                    <tr class=\"surcharge\" *ngFor=\"let surcharge of order.surcharges\">\r\n                        <td class=\"align-middle name left\" colspan=\"2\">{{ surcharge.description }}</td>\r\n                        <td class=\"align-middle sku\">{{ surcharge.sku }}</td>\r\n                        <td class=\"align-middle\"></td>\r\n                        <td></td>\r\n                        <td *ngIf=\"orderLineCustomFields.length\"></td>\r\n                        <td class=\"align-middle total\">\r\n                            {{ surcharge.priceWithTax | localeCurrency: order.currencyCode }}\r\n                            <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                {{ surcharge.price | localeCurrency: order.currencyCode }}\r\n                            </div>\r\n                        </td>\r\n                    </tr>\r\n                    <tr\r\n                        class=\"surcharge modified\"\r\n                        *ngFor=\"let surcharge of modifyOrderInput.surcharges; let i = index\"\r\n                    >\r\n                        <td class=\"align-middle name left\" colspan=\"2\">\r\n                            {{ surcharge.description }}\r\n                            <button class=\"icon-button\" (click)=\"removeSurcharge(i)\">\r\n                                <clr-icon shape=\"trash\"></clr-icon>\r\n                            </button>\r\n                        </td>\r\n                        <td class=\"align-middle sku\">{{ surcharge.sku }}</td>\r\n                        <td class=\"align-middle\"></td>\r\n                        <td></td>\r\n                        <td *ngIf=\"orderLineCustomFields.length\"></td>\r\n                        <td class=\"align-middle total\">\r\n                            <ng-container *ngIf=\"getSurchargePrices(surcharge) as surchargePrice\">\r\n                                {{ surchargePrice.priceWithTax | localeCurrency: order.currencyCode }}\r\n                                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                    {{ surchargePrice.price | localeCurrency: order.currencyCode }}\r\n                                </div>\r\n                            </ng-container>\r\n                        </td>\r\n                    </tr>\r\n                    <tr class=\"shipping\">\r\n                        <td class=\"left clr-align-middle\">{{ 'order.shipping' | translate }}</td>\r\n                        <td class=\"clr-align-middle\">{{ order.shippingLines[0]?.shippingMethod?.name }}</td>\r\n                        <td colspan=\"3\"></td>\r\n                        <td *ngIf=\"orderLineCustomFields.length\"></td>\r\n                        <td class=\"clr-align-middle\">\r\n                            {{ order.shippingWithTax | localeCurrency: order.currencyCode }}\r\n                            <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                {{ order.shipping | localeCurrency: order.currencyCode }}\r\n                            </div>\r\n                        </td>\r\n                    </tr>\r\n                </tbody>\r\n            </table>\r\n\r\n            <h4 class=\"mb2\">{{ 'order.modifications' | translate }}</h4>\r\n            <clr-accordion>\r\n                <clr-accordion-panel>\r\n                    <clr-accordion-title>{{ 'order.add-item-to-order' | translate }}</clr-accordion-title>\r\n                    <clr-accordion-content *clrIfExpanded>\r\n                        <vdr-product-selector class=\"mb4\" (productSelected)=\"addItemSelectedVariant = $event\">\r\n                        </vdr-product-selector>\r\n                        <div *ngIf=\"addItemSelectedVariant\" class=\"flex mb4\">\r\n                            <img\r\n                                *ngIf=\"addItemSelectedVariant.productAsset as asset\"\r\n                                [src]=\"asset | assetPreview: 'tiny'\"\r\n                                class=\"mr4\"\r\n                            />\r\n                            <div>\r\n                                <strong class=\"mr4\">{{ addItemSelectedVariant.productVariantName }}</strong>\r\n                                <small>{{ addItemSelectedVariant.sku }}</small>\r\n                                <div>\r\n                                    {{\r\n                                        getSelectedItemPrice(addItemSelectedVariant)\r\n                                            | localeCurrency: order.currencyCode\r\n                                    }}\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <ng-container *ngFor=\"let customField of orderLineCustomFields\">\r\n                            <vdr-custom-field-control\r\n                                [readonly]=\"!addItemSelectedVariant\"\r\n                                [customField]=\"customField\"\r\n                                [customFieldsFormGroup]=\"addItemCustomFieldsForm\"\r\n                                entityName=\"OrderLine\"\r\n                                [compact]=\"true\"\r\n                            ></vdr-custom-field-control>\r\n                        </ng-container>\r\n                        <button\r\n                            class=\"btn btn-secondary\"\r\n                            [disabled]=\"!addItemSelectedVariant || addItemCustomFieldsForm.invalid\"\r\n                            (click)=\"addItemToOrder(addItemSelectedVariant)\"\r\n                        >\r\n                            {{ 'order.add-item-to-order' | translate }}\r\n                        </button>\r\n                    </clr-accordion-content>\r\n                </clr-accordion-panel>\r\n                <clr-accordion-panel>\r\n                    <clr-accordion-title>{{ 'order.set-coupon-codes' | translate }}</clr-accordion-title>\r\n                    <clr-accordion-content *clrIfExpanded>\r\n                        <ng-select\r\n                            [items]=\"availableCouponCodes$ | async\"\r\n                            appendTo=\"body\"\r\n                            bindLabel=\"code\"\r\n                            bindValue=\"code\"\r\n                            [addTag]=\"false\"\r\n                            [multiple]=\"true\"\r\n                            [hideSelected]=\"true\"\r\n                            [minTermLength]=\"2\"\r\n                            typeToSearchText=\"\"\r\n                            [typeahead]=\"couponCodeInput$\"\r\n                            [formControl]=\"couponCodesControl\"\r\n                        >\r\n                            <ng-template ng-option-tmp let-item=\"item\">\r\n                                <vdr-chip>{{ item.code }}</vdr-chip>\r\n                                {{ item.promotionName }}\r\n                            </ng-template>\r\n                        </ng-select>\r\n                    </clr-accordion-content>\r\n                </clr-accordion-panel>\r\n\r\n                <clr-accordion-panel>\r\n                    <clr-accordion-title>{{ 'order.add-surcharge' | translate }}</clr-accordion-title>\r\n                    <clr-accordion-content *clrIfExpanded>\r\n                        <form [formGroup]=\"surchargeForm\" (submit)=\"addSurcharge(surchargeForm.value)\">\r\n                            <vdr-form-field [label]=\"'common.description' | translate\" for=\"description\"\r\n                                ><input id=\"description\" type=\"text\" formControlName=\"description\"\r\n                            /></vdr-form-field>\r\n                            <vdr-form-field [label]=\"'order.product-sku' | translate\" for=\"sku\"\r\n                                ><input id=\"sku\" type=\"text\" formControlName=\"sku\"\r\n                            /></vdr-form-field>\r\n                            <vdr-form-field [label]=\"'common.price' | translate\" for=\"price\">\r\n                                <vdr-currency-input\r\n                                    [currencyCode]=\"order.currencyCode\"\r\n                                    id=\"price\"\r\n                                    formControlName=\"price\"\r\n                                ></vdr-currency-input>\r\n                            </vdr-form-field>\r\n                            <vdr-form-field\r\n                                [label]=\"\r\n                                    'catalog.price-includes-tax-at'\r\n                                        | translate: { rate: surchargeForm.get('taxRate')?.value }\r\n                                \"\r\n                                for=\"priceIncludesTax\"\r\n                                ><input\r\n                                    id=\"priceIncludesTax\"\r\n                                    type=\"checkbox\"\r\n                                    clrCheckbox\r\n                                    formControlName=\"priceIncludesTax\"\r\n                            /></vdr-form-field>\r\n                            <vdr-form-field [label]=\"'order.tax-rate' | translate\" for=\"taxRate\">\r\n                                <vdr-affixed-input suffix=\"%\"\r\n                                    ><input\r\n                                        id=\"taxRate\"\r\n                                        type=\"number\"\r\n                                        min=\"0\"\r\n                                        max=\"100\"\r\n                                        formControlName=\"taxRate\"\r\n                                /></vdr-affixed-input>\r\n                            </vdr-form-field>\r\n                            <vdr-form-field [label]=\"'order.tax-description' | translate\" for=\"taxDescription\"\r\n                                ><input id=\"taxDescription\" type=\"text\" formControlName=\"taxDescription\"\r\n                            /></vdr-form-field>\r\n                            <button\r\n                                class=\"btn btn-secondary\"\r\n                                [disabled]=\"\r\n                                    surchargeForm.invalid ||\r\n                                    surchargeForm.pristine ||\r\n                                    surchargeForm.get('price')?.value === 0\r\n                                \"\r\n                            >\r\n                                {{ 'order.add-surcharge' | translate }}\r\n                            </button>\r\n                        </form>\r\n                    </clr-accordion-content>\r\n                </clr-accordion-panel>\r\n                <clr-accordion-panel>\r\n                    <clr-accordion-title>{{ 'order.edit-shipping-address' | translate }}</clr-accordion-title>\r\n                    <clr-accordion-content *clrIfExpanded>\r\n                        <vdr-address-form\r\n                            [formGroup]=\"shippingAddressForm\"\r\n                            [availableCountries]=\"availableCountries$ | async\"\r\n                            [customFields]=\"addressCustomFields\"\r\n                        ></vdr-address-form>\r\n                    </clr-accordion-content>\r\n                </clr-accordion-panel>\r\n                <clr-accordion-panel>\r\n                    <clr-accordion-title>{{ 'order.edit-billing-address' | translate }}</clr-accordion-title>\r\n                    <clr-accordion-content *clrIfExpanded>\r\n                        <vdr-address-form\r\n                            [formGroup]=\"billingAddressForm\"\r\n                            [availableCountries]=\"availableCountries$ | async\"\r\n                            [customFields]=\"addressCustomFields\"\r\n                        ></vdr-address-form>\r\n                    </clr-accordion-content>\r\n                </clr-accordion-panel>\r\n            </clr-accordion>\r\n        </div>\r\n        <div class=\"clr-col-lg-4 order-cards\">\r\n            <div class=\"card\">\r\n                <div class=\"card-header\">\r\n                    {{ 'order.modification-summary' | translate }}\r\n                </div>\r\n                <div class=\"card-block\">\r\n                    <ul>\r\n                        <li *ngIf=\"modifyOrderInput.addItems?.length\">\r\n                            {{\r\n                                'order.modification-adding-items'\r\n                                    | translate: { count: modifyOrderInput.addItems?.length }\r\n                            }}\r\n                        </li>\r\n                        <li *ngIf=\"modifyOrderInput.adjustOrderLines?.length\">\r\n                            {{\r\n                                'order.modification-adjusting-lines'\r\n                                    | translate: { count: modifyOrderInput.adjustOrderLines?.length }\r\n                            }}\r\n                        </li>\r\n                        <li *ngIf=\"modifyOrderInput.surcharges?.length\">\r\n                            {{\r\n                                'order.modification-adding-surcharges'\r\n                                    | translate: { count: modifyOrderInput.surcharges?.length }\r\n                            }}\r\n                        </li>\r\n                        <li *ngIf=\"shippingAddressForm.dirty\">\r\n                            {{ 'order.modification-updating-shipping-address' | translate }}\r\n                        </li>\r\n                        <li *ngIf=\"billingAddressForm.dirty\">\r\n                            {{ 'order.modification-updating-billing-address' | translate }}\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n                <div class=\"card-block\">\r\n                    <label class=\"clr-control-label\">{{ 'order.note' | translate }}</label>\r\n                    <textarea [(ngModel)]=\"note\" name=\"note\" clrTextarea required></textarea>\r\n                    <clr-checkbox-wrapper class=\"\">\r\n                        <input type=\"checkbox\" clrCheckbox [(ngModel)]=\"recalculateShipping\" />\r\n                        <label>{{ 'order.modification-recalculate-shipping' | translate }}</label>\r\n                    </clr-checkbox-wrapper>\r\n                </div>\r\n                <div class=\"card-footer\">\r\n                    <button\r\n                        class=\"btn btn-primary\"\r\n                        [disabled]=\"!canPreviewChanges()\"\r\n                        (click)=\"previewAndModify(order)\"\r\n                    >\r\n                        {{ 'order.preview-changes' | translate }}\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n",
+                    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: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [".order-table .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}.order-table .sub-total td{border-top:1px dashed var(--color-component-border-200)}.order-table .total td{font-weight:bold;border-top:1px dashed var(--color-component-border-200)}.order-table td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}.order-table .order-line-custom-fields{display:flex;flex-wrap:wrap}.order-table .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-right:18px}.order-table .order-line-custom-field{background-color:var(--color-component-bg-100)}.order-table .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}.order-table .net-price{font-size:11px;color:var(--color-text-300)}.order-table .promotions-label{-webkit-text-decoration:underline dotted var(--color-text-200);text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}.order-table .thumb img{width:50px;height:50px}.order-table tr.modified td{background-color:var(--color-warning-100)}.order-table .order-line-custom-field{text-align:start}\n"]
+                    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 = function () { return [
@@ -2593,7 +3086,9 @@
     var OrderListComponent = /** @class */ (function (_super) {
         __extends(OrderListComponent, _super);
         function OrderListComponent(serverConfigService, dataService, localStorageService, router, route) {
-            var _this = _super.call(this, router, route) || this;
+            var _this = this;
+            var _a;
+            _this = _super.call(this, router, route) || this;
             _this.serverConfigService = serverConfigService;
             _this.dataService = dataService;
             _this.localStorageService = localStorageService;
@@ -2607,7 +3102,7 @@
                     label: ngxTranslateExtractMarker.marker('order.filter-preset-open'),
                     config: {
                         active: false,
-                        states: _this.orderStates.filter(function (s) { return s !== 'Delivered' && s !== 'Cancelled' && s !== 'Shipped'; }),
+                        states: _this.orderStates.filter(function (s) { return s !== 'Delivered' && s !== 'Cancelled' && s !== 'Shipped' && s !== 'Draft'; }),
                     },
                 },
                 {
@@ -2633,7 +3128,16 @@
                         active: true,
                     },
                 },
+                {
+                    name: 'draft',
+                    label: ngxTranslateExtractMarker.marker('order.filter-preset-draft'),
+                    config: {
+                        active: false,
+                        states: ['Draft'],
+                    },
+                },
             ];
+            _this.canCreateDraftOrder = false;
             _super.prototype.setQueryFn.call(_this, 
             // tslint:disable-next-line:no-shadowed-variable
             function (take, skip) { return _this.dataService.order.getOrders({ take: take, skip: skip }).refetchOnChannelChange(); }, function (data) { return data.orders; }, 
@@ -2643,6 +3147,12 @@
             if (lastFilters) {
                 _this.setQueryParam(lastFilters, { replaceUrl: true });
             }
+            _this.canCreateDraftOrder = !!((_a = _this.serverConfigService
+                .getOrderProcessStates()
+                .find(function (state) { return state.name === 'Created'; })) === null || _a === void 0 ? void 0 : _a.to.includes('Draft'));
+            if (!_this.canCreateDraftOrder) {
+                _this.filterPresets = _this.filterPresets.filter(function (p) { return p.name !== 'draft'; });
+            }
             return _this;
         }
         OrderListComponent.prototype.ngOnInit = function () {
@@ -2769,9 +3279,9 @@
     OrderListComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'vdr-order-list',
-                    template: "<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <div class=\"search-form\">\r\n            <div class=\"btn-group btn-outline-primary\" *ngIf=\"activePreset$ | async as activePreset\">\r\n                <button\r\n                    class=\"btn\"\r\n                    *ngFor=\"let preset of filterPresets\"\r\n                    [class.btn-primary]=\"activePreset === preset.name\"\r\n                    (click)=\"selectFilterPreset(preset.name)\"\r\n                >\r\n                    {{ preset.label | translate }}\r\n                </button>\r\n                <button\r\n                    class=\"btn\"\r\n                    [class.btn-primary]=\"activePreset === 'custom'\"\r\n                    (click)=\"selectFilterPreset('custom')\"\r\n                >\r\n                    {{ 'order.filter-custom' | translate }}\r\n                    <clr-icon shape=\"angle down\"></clr-icon>\r\n                </button>\r\n            </div>\r\n            <input\r\n                type=\"text\"\r\n                name=\"searchTerm\"\r\n                [formControl]=\"searchControl\"\r\n                [placeholder]=\"'order.search-by-order-filters' | translate\"\r\n                class=\"search-input\"\r\n            />\r\n        </div>\r\n        <div class=\"custom-filters\" [class.expanded]=\"(activePreset$ | async) === 'custom'\">\r\n            <form [formGroup]=\"customFilterForm\">\r\n                <div class=\"flex align-center\">\r\n                    <ng-select\r\n                        [items]=\"orderStates\"\r\n                        appendTo=\"body\"\r\n                        [addTag]=\"false\"\r\n                        [multiple]=\"true\"\r\n                        formControlName=\"states\"\r\n                        [placeholder]=\"'state.all-orders' | translate\"\r\n                        [clearable]=\"true\"\r\n                        [searchable]=\"false\"\r\n                    >\r\n                        <ng-template ng-option-tmp let-item=\"item\">{{ item | stateI18nToken | translate }}</ng-template>\r\n                        <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n                            <span class=\"ng-value-label\"> {{ item | stateI18nToken | translate }}</span>\r\n                            <span class=\"ng-value-icon right\" (click)=\"clear(item)\" aria-hidden=\"true\">\u00D7</span>\r\n                        </ng-template>\r\n                    </ng-select>\r\n                    <button\r\n                        class=\"btn btn-secondary\"\r\n                        [disabled]=\"customFilterForm.pristine\"\r\n                        (click)=\"applyCustomFilters()\"\r\n                    >\r\n                        {{ 'order.apply-filters' | translate }}\r\n                        <clr-icon shape=\"filter\"></clr-icon>\r\n                    </button>\r\n                </div>\r\n                <div class=\"flex\">\r\n                    <div>\r\n                        <label>{{ 'order.placed-at-start' | translate }}</label>\r\n                        <vdr-datetime-picker formControlName=\"placedAtStart\"></vdr-datetime-picker>\r\n                    </div>\r\n                    <div>\r\n                        <label>{{ 'order.placed-at-end' | translate }}</label>\r\n                        <vdr-datetime-picker formControlName=\"placedAtEnd\"></vdr-datetime-picker>\r\n                    </div>\r\n                </div>\r\n            </form>\r\n        </div>\r\n    </vdr-ab-left>\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"order-list\"></vdr-action-bar-items>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<vdr-data-table\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n>\r\n    <vdr-dt-column>{{ 'common.code' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'order.customer' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'order.state' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'order.total' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'common.updated-at' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'order.placed-at' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'order.shipping' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column></vdr-dt-column>\r\n    <ng-template let-order=\"item\">\r\n        <td class=\"left align-middle\">{{ order.code }}</td>\r\n        <td class=\"left align-middle\">\r\n            <vdr-customer-label [customer]=\"order.customer\"></vdr-customer-label>\r\n        </td>\r\n        <td class=\"left align-middle\">\r\n            <vdr-order-state-label [state]=\"order.state\"></vdr-order-state-label>\r\n        </td>\r\n        <td class=\"left align-middle\">{{ order.totalWithTax | localeCurrency: order.currencyCode }}</td>\r\n        <td class=\"left align-middle\">{{ order.updatedAt | timeAgo }}</td>\r\n        <td class=\"left align-middle\">{{ order.orderPlacedAt | localeDate: 'medium' }}</td>\r\n        <td class=\"left align-middle\">{{ getShippingNames(order) }}</td>\r\n        <td class=\"right align-middle\">\r\n            <vdr-table-row-action\r\n                iconShape=\"shopping-cart\"\r\n                [label]=\"'common.open' | translate\"\r\n                [linkTo]=\"order.state === 'Modifying' ? ['./', order.id, 'modify'] : ['./', order.id]\"\r\n            ></vdr-table-row-action>\r\n        </td>\r\n    </ng-template>\r\n</vdr-data-table>\r\n",
+                    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: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [".search-form{display:flex;flex-direction:column;align-items:baseline;width:100%;margin-bottom:6px}@media screen and (min-width: 768px){.search-form{flex-direction:row}}.search-input{margin-left:6px;margin-top:6px;min-width:300px}.custom-filters{overflow:hidden;max-height:0;padding-bottom:6px}.custom-filters.expanded{max-height:initial}.custom-filters>form{display:flex;flex-direction:column;align-items:center}.custom-filters>form>div{width:100%}ng-select{flex:1;min-width:200px;height:36px}ng-select ::ng-deep .ng-select-container{height:36px}\n"]
+                    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 = function () { return [
@@ -3062,6 +3572,9 @@
 
     var OrderTableComponent = /** @class */ (function () {
         function OrderTableComponent() {
+            this.isDraft = false;
+            this.adjust = new i0.EventEmitter();
+            this.remove = new i0.EventEmitter();
             this.orderLineCustomFieldsVisible = false;
             this.customFieldsForLine = {};
         }
@@ -3083,6 +3596,11 @@
             this.orderLineCustomFieldsVisible = this.orderLineCustomFields.length < 2;
             this.getLineCustomFields();
         };
+        OrderTableComponent.prototype.draftInputBlur = function (line, quantity) {
+            if (line.quantity !== quantity) {
+                this.adjust.emit({ lineId: line.id, quantity: quantity });
+            }
+        };
         OrderTableComponent.prototype.toggleOrderLineCustomFields = function () {
             this.orderLineCustomFieldsVisible = !this.orderLineCustomFieldsVisible;
         };
@@ -3148,14 +3666,17 @@
     OrderTableComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'vdr-order-table',
-                    template: "<table class=\"order-table table\">\r\n    <thead>\r\n        <tr>\r\n            <th></th>\r\n            <th>{{ 'order.product-name' | translate }}</th>\r\n            <th>{{ 'order.product-sku' | translate }}</th>\r\n            <th>{{ 'order.unit-price' | translate }}</th>\r\n            <th>{{ 'order.quantity' | translate }}</th>\r\n            <th>{{ 'order.total' | translate }}</th>\r\n        </tr>\r\n    </thead>\r\n    <tbody>\r\n        <ng-container *ngFor=\"let line of order.lines\">\r\n            <tr class=\"order-line\" [class.is-cancelled]=\"line.quantity === 0\">\r\n                <td class=\"align-middle thumb\">\r\n                    <img *ngIf=\"line.featuredAsset\" [src]=\"line.featuredAsset | assetPreview: 'tiny'\" />\r\n                </td>\r\n                <td class=\"align-middle name\">{{ line.productVariant.name }}</td>\r\n                <td class=\"align-middle sku\">{{ line.productVariant.sku }}</td>\r\n                <td class=\"align-middle unit-price\">\r\n                    {{ line.unitPriceWithTax | localeCurrency: order.currencyCode }}\r\n                    <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                        {{ line.unitPrice | localeCurrency: order.currencyCode }}\r\n                    </div>\r\n                </td>\r\n                <td class=\"align-middle quantity\">\r\n                    {{ line.quantity }}\r\n                    <vdr-line-refunds [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\r\n                    <vdr-line-fulfillment [line]=\"line\" [orderState]=\"order.state\"></vdr-line-fulfillment>\r\n                </td>\r\n                <td class=\"align-middle total\">\r\n                    {{ line.linePriceWithTax | localeCurrency: order.currencyCode }}\r\n                    <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                        {{ line.linePrice | localeCurrency: order.currencyCode }}\r\n                    </div>\r\n\r\n                    <ng-container *ngIf=\"getLineDiscounts(line) as discounts\">\r\n                        <vdr-dropdown *ngIf=\"discounts.length\">\r\n                            <div class=\"promotions-label\" vdrDropdownTrigger>\r\n                                {{ 'order.promotions-applied' | translate }}\r\n                            </div>\r\n                            <vdr-dropdown-menu>\r\n                                <div class=\"line-promotion\" *ngFor=\"let discount of discounts\">\r\n                                    <a class=\"promotion-name\" [routerLink]=\"getPromotionLink(discount)\">{{\r\n                                        discount.description\r\n                                    }}</a>\r\n                                    <div class=\"promotion-amount\">\r\n                                        {{ discount.amountWithTax | localeCurrency: order.currencyCode }}\r\n                                        <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                            {{ discount.amount | localeCurrency: order.currencyCode }}\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </vdr-dropdown-menu>\r\n                        </vdr-dropdown>\r\n                    </ng-container>\r\n                </td>\r\n            </tr>\r\n            <ng-container *ngIf=\"customFieldsForLine[line.id] as customFields\">\r\n                <tr *ngIf=\"customFields.length\">\r\n                    <td colspan=\"6\" class=\"custom-fields-row\">\r\n                        <div class=\"order-line-custom-fields\">\r\n                            <div class=\"custom-field\" *ngFor=\"let field of customFields\">\r\n                                <vdr-custom-field-control\r\n                                    [compact]=\"true\"\r\n                                    [readonly]=\"true\"\r\n                                    [customField]=\"field.config\"\r\n                                    [customFieldsFormGroup]=\"field.formGroup\"\r\n                                ></vdr-custom-field-control>\r\n                            </div>\r\n                        </div>\r\n                    </td>\r\n                </tr>\r\n            </ng-container>\r\n        </ng-container>\r\n        <tr class=\"surcharge\" *ngFor=\"let surcharge of order.surcharges\">\r\n            <td class=\"align-middle name left\" colspan=\"2\">{{ surcharge.description }}</td>\r\n            <td class=\"align-middle sku\">{{ surcharge.sku }}</td>\r\n            <td class=\"align-middle\" colspan=\"2\"></td>\r\n            <td class=\"align-middle total\">\r\n                {{ surcharge.priceWithTax | localeCurrency: order.currencyCode }}\r\n                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                    {{ surcharge.price | localeCurrency: order.currencyCode }}\r\n                </div>\r\n            </td>\r\n        </tr>\r\n        <ng-container *ngFor=\"let discount of order.discounts\">\r\n            <tr class=\"order-adjustment\" *ngIf=\"discount.type !== 'OTHER'\">\r\n            <td colspan=\"5\" class=\"left clr-align-middle\">\r\n                <a [routerLink]=\"getPromotionLink(discount)\">{{ discount.description }}</a>\r\n                <vdr-chip *ngIf=\"getCouponCodeForAdjustment(order, discount) as couponCode\">{{\r\n                    couponCode\r\n                }}</vdr-chip>\r\n            </td>\r\n            <td class=\"clr-align-middle\">\r\n                {{ discount.amountWithTax | localeCurrency: order.currencyCode }}\r\n                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                    {{ discount.amount | localeCurrency: order.currencyCode }}\r\n                </div>\r\n            </td>\r\n            </tr>\r\n        </ng-container>\r\n        <tr class=\"sub-total\">\r\n            <td class=\"left clr-align-middle\">{{ 'order.sub-total' | translate }}</td>\r\n            <td colspan=\"4\"></td>\r\n            <td class=\"clr-align-middle\">\r\n                {{ order.subTotalWithTax | localeCurrency: order.currencyCode }}\r\n                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                    {{ order.subTotal | localeCurrency: order.currencyCode }}\r\n                </div>\r\n            </td>\r\n        </tr>\r\n        <tr class=\"shipping\">\r\n            <td class=\"left clr-align-middle\">{{ 'order.shipping' | translate }}</td>\r\n            <td class=\"clr-align-middle\">{{ getShippingNames(order) }}</td>\r\n            <td colspan=\"3\"></td>\r\n            <td class=\"clr-align-middle\">\r\n                {{ order.shippingWithTax | localeCurrency: order.currencyCode }}\r\n                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                    {{ order.shipping | localeCurrency: order.currencyCode }}\r\n                </div>\r\n            </td>\r\n        </tr>\r\n        <tr class=\"total\">\r\n            <td class=\"left clr-align-middle\">{{ 'order.total' | translate }}</td>\r\n            <td colspan=\"4\"></td>\r\n            <td class=\"clr-align-middle\">\r\n                {{ order.totalWithTax | localeCurrency: order.currencyCode }}\r\n                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                    {{ order.total | localeCurrency: order.currencyCode }}\r\n                </div>\r\n            </td>\r\n        </tr>\r\n    </tbody>\r\n</table>\r\n",
+                    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: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [".order-table .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}.order-table .sub-total td{border-top:1px dashed var(--color-component-border-200)}.order-table .total td{font-weight:bold;border-top:1px dashed var(--color-component-border-200)}.order-table td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}.order-table .order-line-custom-fields{display:flex;flex-wrap:wrap}.order-table .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-right:18px}.order-table .order-line-custom-field{background-color:var(--color-component-bg-100)}.order-table .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}.order-table .net-price{font-size:11px;color:var(--color-text-300)}.order-table .promotions-label{-webkit-text-decoration:underline dotted var(--color-text-200);text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}.order-table .thumb img{width:50px;height:50px}::ng-deep .line-promotion{display:flex;justify-content:space-between;padding:6px 12px}::ng-deep .line-promotion .promotion-amount{margin-left:12px}::ng-deep .line-promotion .net-price{font-size:11px;color:var(--color-text-300)}\n"]
+                    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: i0.Input }],
-        orderLineCustomFields: [{ type: i0.Input }]
+        orderLineCustomFields: [{ type: i0.Input }],
+        isDraft: [{ type: i0.Input }],
+        adjust: [{ type: i0.Output }],
+        remove: [{ type: i0.Output }]
     };
 
     var PaymentDetailComponent = /** @class */ (function () {
@@ -3259,20 +3780,34 @@
     /**
      * Resolves the id from the path into a Customer entity.
      */
-    var OrderResolver = /** @class */ (function (_super) {
-        __extends(OrderResolver, _super);
+    var OrderResolver = /** @class */ (function () {
         function OrderResolver(router, dataService) {
-            return _super.call(this, router, {
-                __typename: 'Order',
-                id: '',
-                code: '',
-                createdAt: '',
-                updatedAt: '',
-                total: 0,
-            }, function (id) { return dataService.order.getOrder(id).mapStream(function (data) { return data.order; }); }) || this;
+            this.router = router;
+            this.dataService = dataService;
         }
+        /** @internal */
+        OrderResolver.prototype.resolve = function (route, state) {
+            var _this = this;
+            var id = route.paramMap.get('id');
+            // Complete the entity stream upon navigating away
+            var navigateAway$ = this.router.events.pipe(operators.filter(function (event) { return event instanceof i1$1.ActivationStart; }));
+            var stream = this.dataService.order
+                .getOrder(id)
+                .mapStream(function (data) { return data.order; })
+                .pipe(operators.switchMap(function (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 rxjs.EMPTY;
+                }
+                else {
+                    return [order];
+                }
+            }), operators.takeUntil(navigateAway$), operators.filter(sharedUtils.notNullOrUndefined), operators.shareReplay(1));
+            return stream.pipe(operators.take(1), operators.map(function () { return stream; }));
+        };
         return OrderResolver;
-    }(i1.BaseEntityResolver));
+    }());
     OrderResolver.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function OrderResolver_Factory() { return new OrderResolver(i0__namespace.ɵɵinject(i1__namespace$1.Router), i0__namespace.ɵɵinject(i1__namespace.DataService)); }, token: OrderResolver, providedIn: "root" });
     OrderResolver.decorators = [
         { type: i0.Injectable, args: [{
@@ -3284,11 +3819,52 @@
         { type: i1.DataService }
     ]; };
 
+    var OrderGuard = /** @class */ (function () {
+        function OrderGuard(dataService, router) {
+            this.dataService = dataService;
+            this.router = router;
+        }
+        OrderGuard.prototype.canActivate = function (route, state) {
+            var _this = this;
+            var isDraft = state.url.includes('orders/draft');
+            var id = route.paramMap.get('id');
+            if (isDraft) {
+                if (id === 'create') {
+                    return this.dataService.order
+                        .createDraftOrder()
+                        .pipe(operators.map(function (_a) {
+                        var createDraftOrder = _a.createDraftOrder;
+                        return _this.router.parseUrl("/orders/draft/" + createDraftOrder.id);
+                    }));
+                }
+                else {
+                    return true;
+                }
+            }
+            else {
+                return true;
+            }
+        };
+        return OrderGuard;
+    }());
+    OrderGuard.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function OrderGuard_Factory() { return new OrderGuard(i0__namespace.ɵɵinject(i1__namespace.DataService), i0__namespace.ɵɵinject(i1__namespace$1.Router)); }, token: OrderGuard, providedIn: "root" });
+    OrderGuard.decorators = [
+        { type: i0.Injectable, args: [{
+                    providedIn: 'root',
+                },] }
+    ];
+    OrderGuard.ctorParameters = function () { return [
+        { type: i1.DataService },
+        { type: i1$1.Router }
+    ]; };
+
     var ɵ0 = {
         breadcrumb: ngxTranslateExtractMarker.marker('breadcrumb.orders'),
     }, ɵ1 = {
         breadcrumb: orderBreadcrumb,
     }, ɵ2 = {
+        breadcrumb: orderBreadcrumb,
+    }, ɵ3 = {
         breadcrumb: modifyingOrderBreadcrumb,
     };
     var orderRoutes = [
@@ -3297,19 +3873,34 @@
             component: OrderListComponent,
             data: ɵ0,
         },
+        {
+            path: 'draft/:id',
+            component: DraftOrderDetailComponent,
+            resolve: {
+                entity: OrderResolver,
+            },
+            canActivate: [OrderGuard],
+            canDeactivate: [i1.CanDeactivateDetailGuard],
+            data: ɵ1,
+        },
         {
             path: ':id',
             component: OrderDetailComponent,
-            resolve: i1.createResolveData(OrderResolver),
+            resolve: {
+                entity: OrderResolver,
+            },
+            canActivate: [OrderGuard],
             canDeactivate: [i1.CanDeactivateDetailGuard],
-            data: ɵ1,
+            data: ɵ2,
         },
         {
             path: ':id/modify',
             component: OrderEditorComponent,
-            resolve: i1.createResolveData(OrderResolver),
+            resolve: {
+                entity: OrderResolver,
+            },
             // canDeactivate: [CanDeactivateDetailGuard],
-            data: ɵ2,
+            data: ɵ3,
         },
     ];
     function orderBreadcrumb(data, params) {
@@ -3367,6 +3958,12 @@
                         ModificationDetailComponent,
                         AddManualPaymentDialogComponent,
                         OrderStateSelectDialogComponent,
+                        DraftOrderDetailComponent,
+                        DraftOrderVariantSelectorComponent,
+                        SelectCustomerDialogComponent,
+                        SelectAddressDialogComponent,
+                        CouponCodeSelectorComponent,
+                        SelectShippingMethodDialogComponent,
                     ],
                 },] }
     ];
@@ -3379,10 +3976,14 @@
 
     exports.AddManualPaymentDialogComponent = AddManualPaymentDialogComponent;
     exports.CancelOrderDialogComponent = CancelOrderDialogComponent;
+    exports.CouponCodeSelectorComponent = CouponCodeSelectorComponent;
+    exports.DraftOrderDetailComponent = DraftOrderDetailComponent;
+    exports.DraftOrderVariantSelectorComponent = DraftOrderVariantSelectorComponent;
     exports.FulfillOrderDialogComponent = FulfillOrderDialogComponent;
     exports.FulfillmentCardComponent = FulfillmentCardComponent;
     exports.FulfillmentDetailComponent = FulfillmentDetailComponent;
     exports.FulfillmentStateLabelComponent = FulfillmentStateLabelComponent;
+    exports.GET_CUSTOMER_ADDRESSES = GET_CUSTOMER_ADDRESSES;
     exports.LineFulfillmentComponent = LineFulfillmentComponent;
     exports.LineRefundsComponent = LineRefundsComponent;
     exports.ModificationDetailComponent = ModificationDetailComponent;
@@ -3391,6 +3992,7 @@
     exports.OrderDetailComponent = OrderDetailComponent;
     exports.OrderEditorComponent = OrderEditorComponent;
     exports.OrderEditsPreviewDialogComponent = OrderEditsPreviewDialogComponent;
+    exports.OrderGuard = OrderGuard;
     exports.OrderHistoryComponent = OrderHistoryComponent;
     exports.OrderListComponent = OrderListComponent;
     exports.OrderModule = OrderModule;
@@ -3407,6 +4009,9 @@
     exports.PaymentStateLabelComponent = PaymentStateLabelComponent;
     exports.RefundOrderDialogComponent = RefundOrderDialogComponent;
     exports.RefundStateLabelComponent = RefundStateLabelComponent;
+    exports.SelectAddressDialogComponent = SelectAddressDialogComponent;
+    exports.SelectCustomerDialogComponent = SelectCustomerDialogComponent;
+    exports.SelectShippingMethodDialogComponent = SelectShippingMethodDialogComponent;
     exports.SettleRefundDialogComponent = SettleRefundDialogComponent;
     exports.SimpleItemListComponent = SimpleItemListComponent;
     exports.modifyingOrderBreadcrumb = modifyingOrderBreadcrumb;
@@ -3415,6 +4020,7 @@
     exports.ɵ0 = ɵ0;
     exports.ɵ1 = ɵ1;
     exports.ɵ2 = ɵ2;
+    exports.ɵ3 = ɵ3;
 
     Object.defineProperty(exports, '__esModule', { value: true });