@vendure/admin-ui 1.7.4 → 1.8.1

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

@@ -1,14 +1,16 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, ChangeDetectorRef, EventEmitter, Input, Output, Injectable, ElementRef, ViewChildren, HostBinding, NgModule } from '@angular/core';
+import { Component, ChangeDetectionStrategy, EventEmitter, Input, Output, Injectable, ChangeDetectorRef, ElementRef, ViewChildren, HostBinding, NgModule } from '@angular/core';
 import { FormGroup, FormControl, Validators, FormBuilder, FormArray } from '@angular/forms';
 import * as i1 from '@vendure/admin-ui/core';
-import { DataService, getAppConfig, I18nService, configurableDefinitionToInstance, GlobalFlag, configurableOperationValueIsValid, toConfigurableOperationInput, ServerConfigService, ModalService, HistoryEntryType, SortOrder, NotificationService, BaseDetailComponent, EditNoteDialogComponent, transformRelationCustomFieldInputs, BaseListComponent, LogicalOperator, LocalStorageService, AdjustmentType, BaseEntityResolver, createResolveData, CanDeactivateDetailGuard, detailBreadcrumb, SharedModule } from '@vendure/admin-ui/core';
+import { DataService, getAppConfig, I18nService, HistoryEntryType, SortOrder, ModalService, NotificationService, ADDRESS_FRAGMENT, BaseDetailComponent, DeletionResult, ServerConfigService, configurableDefinitionToInstance, GlobalFlag, configurableOperationValueIsValid, toConfigurableOperationInput, EditNoteDialogComponent, transformRelationCustomFieldInputs, BaseListComponent, LogicalOperator, LocalStorageService, AdjustmentType, CanDeactivateDetailGuard, detailBreadcrumb, SharedModule } from '@vendure/admin-ui/core';
 import { marker } from '@biesbjerg/ngx-translate-extract-marker';
-import { isObject, summate, assertNever, notNullOrUndefined } from '@vendure/common/lib/shared-utils';
+import { Subject, concat, EMPTY, of, combineLatest, merge, BehaviorSubject } from 'rxjs';
+import { distinctUntilChanged, switchMap, map, startWith, catchError, retryWhen, delay, take, tap, debounceTime, mapTo, takeUntil, shareReplay, filter } from 'rxjs/operators';
 import * as i1$1 from '@angular/router';
-import { Router, ActivatedRoute, RouterModule } from '@angular/router';
-import { EMPTY, Subject, of, concat, merge, BehaviorSubject } from 'rxjs';
-import { switchMap, catchError, retryWhen, delay, take, map, startWith, mapTo, takeUntil, distinctUntilChanged, shareReplay, filter, debounceTime, tap } from 'rxjs/operators';
+import { Router, ActivatedRoute, ActivationStart, RouterModule } from '@angular/router';
+import { pick } from '@vendure/common/lib/pick';
+import { gql } from 'apollo-angular';
+import { isObject, summate, assertNever, notNullOrUndefined } from '@vendure/common/lib/shared-utils';
 import { simpleDeepClone } from '@vendure/common/lib/simple-deep-clone';
 
 class AddManualPaymentDialogComponent {
@@ -47,84 +49,670 @@ AddManualPaymentDialogComponent.ctorParameters = () => [
     { type: DataService }
 ];
 
-class CancelOrderDialogComponent {
-    constructor(i18nService) {
-        var _a;
-        this.i18nService = i18nService;
-        this.cancelAll = true;
-        this.lineQuantities = {};
-        this.reasons = (_a = getAppConfig().cancellationReasons) !== null && _a !== void 0 ? _a : [
-            marker('order.cancel-reason-customer-request'),
-            marker('order.cancel-reason-not-available'),
-        ];
-        this.reasons = this.reasons.map(r => this.i18nService.translate(r));
-    }
-    get selectionCount() {
-        return Object.values(this.lineQuantities).reduce((sum, n) => sum + n, 0);
+class CancelOrderDialogComponent {
+    constructor(i18nService) {
+        var _a;
+        this.i18nService = i18nService;
+        this.cancelAll = true;
+        this.lineQuantities = {};
+        this.reasons = (_a = getAppConfig().cancellationReasons) !== null && _a !== void 0 ? _a : [
+            marker('order.cancel-reason-customer-request'),
+            marker('order.cancel-reason-not-available'),
+        ];
+        this.reasons = this.reasons.map(r => this.i18nService.translate(r));
+    }
+    get selectionCount() {
+        return Object.values(this.lineQuantities).reduce((sum, n) => sum + n, 0);
+    }
+    ngOnInit() {
+        this.lineQuantities = this.order.lines.reduce((result, line) => {
+            return Object.assign(Object.assign({}, result), { [line.id]: line.quantity });
+        }, {});
+    }
+    radioChanged() {
+        if (this.cancelAll) {
+            for (const line of this.order.lines) {
+                this.lineQuantities[line.id] = line.quantity;
+            }
+        }
+        else {
+            for (const line of this.order.lines) {
+                this.lineQuantities[line.id] = 0;
+            }
+        }
+    }
+    checkIfAllSelected() {
+        var _a;
+        for (const [lineId, quantity] of Object.entries(this.lineQuantities)) {
+            const quantityInOrder = (_a = this.order.lines.find(line => line.id === lineId)) === null || _a === void 0 ? void 0 : _a.quantity;
+            if (quantityInOrder && quantity < quantityInOrder) {
+                return;
+            }
+        }
+        // If we got here, all of the selected quantities are equal to the order
+        // line quantities, i.e. everything is selected.
+        this.cancelAll = true;
+    }
+    select() {
+        this.resolveWith({
+            orderId: this.order.id,
+            lines: this.getLineInputs(),
+            reason: this.reason,
+            cancelShipping: this.cancelAll,
+        });
+    }
+    cancel() {
+        this.resolveWith();
+    }
+    getLineInputs() {
+        if (this.order.active) {
+            return;
+        }
+        return Object.entries(this.lineQuantities)
+            .map(([orderLineId, quantity]) => ({
+            orderLineId,
+            quantity,
+        }))
+            .filter(l => 0 < l.quantity);
+    }
+}
+CancelOrderDialogComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'vdr-cancel-order-dialog',
+                template: "<ng-template vdrDialogTitle>{{ 'order.cancel-order' | translate }}</ng-template>\r\n\r\n<div class=\"fulfillment-wrapper\">\r\n    <div class=\"order-lines\">\r\n        <table class=\"table\">\r\n            <thead>\r\n                <tr>\r\n                    <th></th>\r\n                    <th>{{ 'order.product-name' | translate }}</th>\r\n                    <th>{{ 'order.product-sku' | translate }}</th>\r\n                    <th>{{ 'order.quantity' | translate }}</th>\r\n                    <th>{{ 'order.unit-price' | translate }}</th>\r\n                    <th>{{ 'order.cancel' | translate }}</th>\r\n                </tr>\r\n            </thead>\r\n            <tr\r\n                *ngFor=\"let line of order.lines\"\r\n                class=\"order-line\"\r\n                [class.is-disabled]=\"cancelAll\"\r\n                [class.is-cancelled]=\"line.quantity === 0\"\r\n            >\r\n                <td class=\"align-middle thumb\">\r\n                    <img [src]=\"line.featuredAsset | assetPreview: 'tiny'\" />\r\n                </td>\r\n                <td class=\"align-middle name\">{{ line.productVariant.name }}</td>\r\n                <td class=\"align-middle sku\">{{ line.productVariant.sku }}</td>\r\n                <td class=\"align-middle quantity\">{{ line.quantity }}</td>\r\n                <td class=\"align-middle quantity\">\r\n                    {{ line.unitPriceWithTax | localeCurrency: order.currencyCode }}\r\n                </td>\r\n                <td class=\"align-middle fulfil\">\r\n                    <input\r\n                        *ngIf=\"line.quantity > 0 && !order.active; else nonEditable\"\r\n                        [(ngModel)]=\"lineQuantities[line.id]\"\r\n                        (input)=\"checkIfAllSelected()\"\r\n                        [disabled]=\"cancelAll\"\r\n                        type=\"number\"\r\n                        [max]=\"line.quantity\"\r\n                        min=\"0\"\r\n                    />\r\n                    <ng-template #nonEditable>{{ line.quantity }}</ng-template>\r\n                </td>\r\n            </tr>\r\n        </table>\r\n    </div>\r\n    <div class=\"cancellation-details\">\r\n        <ng-container *ngIf=\"order.active !== true\">\r\n            <clr-radio-wrapper>\r\n                <input\r\n                    type=\"radio\"\r\n                    clrRadio\r\n                    [value]=\"true\"\r\n                    [(ngModel)]=\"cancelAll\"\r\n                    name=\"options\"\r\n                    (ngModelChange)=\"radioChanged()\"\r\n                />\r\n                <label>{{ 'order.cancel-entire-order' | translate }}</label>\r\n            </clr-radio-wrapper>\r\n            <clr-radio-wrapper>\r\n                <input\r\n                    type=\"radio\"\r\n                    clrRadio\r\n                    [value]=\"false\"\r\n                    [(ngModel)]=\"cancelAll\"\r\n                    name=\"options\"\r\n                    (ngModelChange)=\"radioChanged()\"\r\n                />\r\n                <label>{{ 'order.cancel-specified-items' | translate }}</label>\r\n            </clr-radio-wrapper>\r\n        </ng-container>\r\n        <label class=\"clr-control-label\">{{ 'order.cancellation-reason' | translate }}</label>\r\n        <ng-select\r\n            [items]=\"reasons\"\r\n            bindLabel=\"name\"\r\n            autofocus\r\n            bindValue=\"id\"\r\n            [addTag]=\"true\"\r\n            [(ngModel)]=\"reason\"\r\n        ></ng-select>\r\n    </div>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button\r\n        type=\"submit\"\r\n        (click)=\"select()\"\r\n        [disabled]=\"!reason || (!order.active && selectionCount === 0)\"\r\n        class=\"btn btn-primary\"\r\n    >\r\n        <ng-container *ngIf=\"!order.active\">\r\n            {{ 'order.cancel-selected-items' | translate }}\r\n        </ng-container>\r\n        <ng-container *ngIf=\"order.active\">\r\n            {{ 'order.cancel-order' | translate }}\r\n        </ng-container>\r\n    </button>\r\n</ng-template>\r\n",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [":host{height:100%;display:flex;min-height:64vh}.fulfillment-wrapper{flex:1}@media screen and (min-width: 768px){.fulfillment-wrapper{display:flex;flex-direction:row}}@media screen and (min-width: 768px){.fulfillment-wrapper .cancellation-details{margin-top:0;margin-left:24px;width:250px}}.fulfillment-wrapper .order-lines{flex:1;overflow-y:auto}.fulfillment-wrapper .order-lines table{margin-top:0}.fulfillment-wrapper tr.ignore{color:var(--color-grey-300)}.fulfillment-wrapper .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}.fulfillment-wrapper .is-disabled td,.fulfillment-wrapper .is-disabled td input{background-color:var(--color-component-bg-200)}\n"]
+            },] }
+];
+CancelOrderDialogComponent.ctorParameters = () => [
+    { type: I18nService }
+];
+
+class CouponCodeSelectorComponent {
+    constructor(dataService) {
+        this.dataService = dataService;
+        this.addCouponCode = new EventEmitter();
+        this.removeCouponCode = new EventEmitter();
+        this.couponCodeInput$ = new Subject();
+    }
+    ngOnInit() {
+        var _a;
+        this.availableCouponCodes$ = concat(this.couponCodeInput$.pipe(distinctUntilChanged(), switchMap(term => this.dataService.promotion.getPromotions(10, 0, {
+            couponCode: { contains: term },
+        }).single$), map(({ promotions }) => 
+        // tslint:disable-next-line:no-non-null-assertion
+        promotions.items.map(p => ({ code: p.couponCode, promotionName: p.name }))), startWith([])));
+        if (!this.control) {
+            this.control = new FormControl((_a = this.couponCodes) !== null && _a !== void 0 ? _a : []);
+        }
+    }
+}
+CouponCodeSelectorComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'vdr-coupon-code-selector',
+                template: "<ng-select\r\n    [items]=\"availableCouponCodes$ | async\"\r\n    appendTo=\"body\"\r\n    bindLabel=\"code\"\r\n    bindValue=\"code\"\r\n    [addTag]=\"false\"\r\n    [multiple]=\"true\"\r\n    [hideSelected]=\"true\"\r\n    [minTermLength]=\"2\"\r\n    typeToSearchText=\"\"\r\n    [typeahead]=\"couponCodeInput$\"\r\n    [formControl]=\"control\"\r\n    (add)=\"addCouponCode.emit($event.code)\"\r\n    (remove)=\"removeCouponCode.emit($event.value?.code)\"\r\n>\r\n    <ng-template ng-option-tmp let-item=\"item\">\r\n        <vdr-chip>{{ item.code }}</vdr-chip>\r\n        {{ item.promotionName }}\r\n    </ng-template>\r\n</ng-select>\r\n",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [""]
+            },] }
+];
+CouponCodeSelectorComponent.ctorParameters = () => [
+    { type: DataService }
+];
+CouponCodeSelectorComponent.propDecorators = {
+    couponCodes: [{ type: Input }],
+    control: [{ type: Input }],
+    addCouponCode: [{ type: Output }],
+    removeCouponCode: [{ type: Output }]
+};
+
+class OrderStateSelectDialogComponent {
+    constructor() {
+        this.nextStates = [];
+        this.message = '';
+        this.selectedState = '';
+    }
+    select() {
+        if (this.selectedState) {
+            this.resolveWith(this.selectedState);
+        }
+    }
+    cancel() {
+        this.resolveWith();
+    }
+}
+OrderStateSelectDialogComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'vdr-order-state-select-dialog',
+                template: "<ng-template vdrDialogTitle>{{ 'order.select-state' | translate }}</ng-template>\r\n<p>{{ message | translate }}</p>\r\n<clr-select-container>\r\n    <select clrSelect name=\"state\" [(ngModel)]=\"selectedState\">\r\n        <option *ngFor=\"let state of nextStates\" [value]=\"state\">\r\n            {{ state | stateI18nToken | translate }}\r\n        </option>\r\n    </select>\r\n</clr-select-container>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"submit\" *ngIf=\"cancellable\" (click)=\"cancel()\" class=\"btn btn-secondary\">\r\n        {{ 'common.cancel' | translate }}\r\n    </button>\r\n    <button type=\"submit\" (click)=\"select()\" class=\"btn btn-primary\" [disabled]=\"!selectedState\">\r\n        {{ 'order.transition-to-state' | translate: { state: (selectedState | stateI18nToken | translate) } }}\r\n    </button>\r\n</ng-template>\r\n",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [""]
+            },] }
+];
+
+class OrderTransitionService {
+    constructor(dataService, modalService, notificationService, i18nService) {
+        this.dataService = dataService;
+        this.modalService = modalService;
+        this.notificationService = notificationService;
+        this.i18nService = i18nService;
+    }
+    /**
+     * Attempts to transition the Order to the last state it was in before it was transitioned
+     * to the "Modifying" state. If this fails, a manual prompt is used.
+     */
+    transitionToPreModifyingState(orderId, nextStates) {
+        return this.getPreModifyingState(orderId).pipe(switchMap(state => {
+            const manualTransitionOptions = {
+                orderId,
+                nextStates,
+                message: this.i18nService.translate(marker('order.unable-to-transition-to-state-try-another'), { state }),
+                cancellable: false,
+                retry: 10,
+            };
+            if (state) {
+                return this.transitionToStateOrThrow(orderId, state).pipe(catchError(err => this.manuallyTransitionToState(manualTransitionOptions)));
+            }
+            else {
+                return this.manuallyTransitionToState(manualTransitionOptions);
+            }
+        }));
+    }
+    /**
+     * Displays a modal for manually selecting the next state.
+     */
+    manuallyTransitionToState(options) {
+        return this.modalService
+            .fromComponent(OrderStateSelectDialogComponent, {
+            locals: {
+                nextStates: options.nextStates,
+                cancellable: options.cancellable,
+                message: options.message,
+            },
+            closable: false,
+            size: 'md',
+        })
+            .pipe(switchMap(result => {
+            if (result) {
+                return this.transitionToStateOrThrow(options.orderId, result);
+            }
+            else {
+                if (!options.cancellable) {
+                    throw new Error(`An order state must be selected`);
+                }
+                else {
+                    return EMPTY;
+                }
+            }
+        }), retryWhen(errors => errors.pipe(delay(2000), take(options.retry))));
+    }
+    /**
+     * Attempts to get the last state the Order was in before it was transitioned
+     * to the "Modifying" state.
+     */
+    getPreModifyingState(orderId) {
+        return this.dataService.order
+            .getOrderHistory(orderId, {
+            filter: {
+                type: {
+                    eq: HistoryEntryType.ORDER_STATE_TRANSITION,
+                },
+            },
+            sort: {
+                createdAt: SortOrder.DESC,
+            },
+        })
+            .mapSingle(result => result.order)
+            .pipe(map(result => {
+            const item = result === null || result === void 0 ? void 0 : result.history.items.find(i => i.data.to === 'Modifying');
+            if (item) {
+                return item.data.from;
+            }
+            else {
+                return;
+            }
+        }));
+    }
+    transitionToStateOrThrow(orderId, state) {
+        return this.dataService.order.transitionToState(orderId, state).pipe(map(({ transitionOrderToState }) => {
+            switch (transitionOrderToState === null || transitionOrderToState === void 0 ? void 0 : transitionOrderToState.__typename) {
+                case 'Order':
+                    return transitionOrderToState === null || transitionOrderToState === void 0 ? void 0 : transitionOrderToState.state;
+                case 'OrderStateTransitionError':
+                    this.notificationService.error(transitionOrderToState === null || transitionOrderToState === void 0 ? void 0 : transitionOrderToState.transitionError);
+                    throw new Error(transitionOrderToState === null || transitionOrderToState === void 0 ? void 0 : transitionOrderToState.transitionError);
+            }
+        }));
+    }
+}
+OrderTransitionService.ɵprov = i0.ɵɵdefineInjectable({ factory: function OrderTransitionService_Factory() { return new OrderTransitionService(i0.ɵɵinject(i1.DataService), i0.ɵɵinject(i1.ModalService), i0.ɵɵinject(i1.NotificationService), i0.ɵɵinject(i1.I18nService)); }, token: OrderTransitionService, providedIn: "root" });
+OrderTransitionService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root',
+            },] }
+];
+OrderTransitionService.ctorParameters = () => [
+    { type: DataService },
+    { type: ModalService },
+    { type: NotificationService },
+    { type: I18nService }
+];
+
+const GET_CUSTOMER_ADDRESSES = gql `
+    query GetCustomerAddresses($customerId: ID!) {
+        customer(id: $customerId) {
+            id
+            addresses {
+                ...Address
+            }
+        }
+    }
+    ${ADDRESS_FRAGMENT}
+`;
+
+class SelectAddressDialogComponent {
+    constructor(dataService, formBuilder) {
+        this.dataService = dataService;
+        this.formBuilder = formBuilder;
+        this.useExisting = true;
+        this.createNew = false;
+    }
+    ngOnInit() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+        this.addressForm = this.formBuilder.group({
+            fullName: [(_b = (_a = this.currentAddress) === null || _a === void 0 ? void 0 : _a.fullName) !== null && _b !== void 0 ? _b : ''],
+            company: [(_d = (_c = this.currentAddress) === null || _c === void 0 ? void 0 : _c.company) !== null && _d !== void 0 ? _d : ''],
+            streetLine1: [(_f = (_e = this.currentAddress) === null || _e === void 0 ? void 0 : _e.streetLine1) !== null && _f !== void 0 ? _f : '', Validators.required],
+            streetLine2: [(_h = (_g = this.currentAddress) === null || _g === void 0 ? void 0 : _g.streetLine2) !== null && _h !== void 0 ? _h : ''],
+            city: [(_k = (_j = this.currentAddress) === null || _j === void 0 ? void 0 : _j.city) !== null && _k !== void 0 ? _k : '', Validators.required],
+            province: [(_m = (_l = this.currentAddress) === null || _l === void 0 ? void 0 : _l.province) !== null && _m !== void 0 ? _m : ''],
+            postalCode: [(_p = (_o = this.currentAddress) === null || _o === void 0 ? void 0 : _o.postalCode) !== null && _p !== void 0 ? _p : '', Validators.required],
+            countryCode: [(_r = (_q = this.currentAddress) === null || _q === void 0 ? void 0 : _q.countryCode) !== null && _r !== void 0 ? _r : '', Validators.required],
+            phoneNumber: [(_t = (_s = this.currentAddress) === null || _s === void 0 ? void 0 : _s.phoneNumber) !== null && _t !== void 0 ? _t : ''],
+        });
+        this.useExisting = !!this.customerId;
+        this.addresses$ = this.customerId
+            ? this.dataService
+                .query(GET_CUSTOMER_ADDRESSES, { customerId: this.customerId })
+                .mapSingle(({ customer }) => { var _a; return (_a = customer === null || customer === void 0 ? void 0 : customer.addresses) !== null && _a !== void 0 ? _a : []; })
+                .pipe(tap(addresses => {
+                if (this.currentAddress) {
+                    this.selectedAddress = addresses.find(a => {
+                        var _a, _b;
+                        return a.streetLine1 === ((_a = this.currentAddress) === null || _a === void 0 ? void 0 : _a.streetLine1) &&
+                            a.postalCode === ((_b = this.currentAddress) === null || _b === void 0 ? void 0 : _b.postalCode);
+                    });
+                }
+                if (addresses.length === 0) {
+                    this.createNew = true;
+                    this.useExisting = false;
+                }
+            }))
+            : of([]);
+        this.availableCountries$ = this.dataService.settings
+            .getAvailableCountries()
+            .mapSingle(({ countries }) => countries.items);
+    }
+    trackByFn(item) {
+        return item.id;
+    }
+    addressIdFn(item) {
+        return item.streetLine1 + item.postalCode;
+    }
+    cancel() {
+        this.resolveWith();
+    }
+    select() {
+        if (this.useExisting && this.selectedAddress) {
+            this.resolveWith(Object.assign(Object.assign({}, pick(this.selectedAddress, [
+                'fullName',
+                'company',
+                'streetLine1',
+                'streetLine2',
+                'city',
+                'province',
+                'phoneNumber',
+                'postalCode',
+            ])), { countryCode: this.selectedAddress.country.code }));
+        }
+        if (this.createNew && this.addressForm.valid) {
+            const formValue = this.addressForm.value;
+            this.resolveWith(formValue);
+        }
+    }
+}
+SelectAddressDialogComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'vdr-select-address-dialog',
+                template: "<ng-template vdrDialogTitle>{{ 'order.select-address' | translate }}</ng-template>\r\n\r\n<clr-tabs *ngIf=\"addresses$ | async as addresses\">\r\n    <clr-tab *ngIf=\"customerId && addresses.length\">\r\n        <button clrTabLink>{{ 'order.existing-address' | translate }}</button>\r\n        <ng-template [(clrIfActive)]=\"useExisting\">\r\n            <clr-tab-content>\r\n                <vdr-radio-card-fieldset\r\n                    class=\"block mt4\"\r\n                    [idFn]=\"addressIdFn\"\r\n                    [selectedItemId]=\"selectedAddress && addressIdFn(selectedAddress)\"\r\n                    (selectItem)=\"selectedAddress = $event\"\r\n                >\r\n                    <vdr-radio-card *ngFor=\"let address of addresses\" [item]=\"address\">\r\n                        <vdr-formatted-address [address]=\"address\"></vdr-formatted-address>\r\n                    </vdr-radio-card>\r\n                </vdr-radio-card-fieldset>\r\n            </clr-tab-content>\r\n        </ng-template>\r\n    </clr-tab>\r\n    <clr-tab>\r\n        <button clrTabLink>{{ 'customer.create-new-address' | translate }}</button>\r\n\r\n        <ng-template [(clrIfActive)]=\"createNew\">\r\n            <clr-tab-content>\r\n                <vdr-address-form\r\n                    [formGroup]=\"addressForm\"\r\n                    [availableCountries]=\"availableCountries$ | async\"\r\n                ></vdr-address-form>\r\n            </clr-tab-content>\r\n        </ng-template>\r\n    </clr-tab>\r\n</clr-tabs>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button\r\n        type=\"submit\"\r\n        (click)=\"select()\"\r\n        [disabled]=\"(useExisting && !selectedAddress) || (createNew && addressForm.invalid)\"\r\n        class=\"btn btn-primary\"\r\n    >\r\n        {{ 'common.okay' | translate }}\r\n    </button>\r\n</ng-template>\r\n",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [""]
+            },] }
+];
+SelectAddressDialogComponent.ctorParameters = () => [
+    { type: DataService },
+    { type: FormBuilder }
+];
+
+class SelectCustomerDialogComponent {
+    constructor(dataService, formBuilder) {
+        this.dataService = dataService;
+        this.formBuilder = formBuilder;
+        this.isLoading = false;
+        this.input$ = new Subject();
+        this.selectedCustomer = [];
+        this.useExisting = true;
+        this.createNew = false;
+        this.customerForm = this.formBuilder.group({
+            title: '',
+            firstName: ['', Validators.required],
+            lastName: ['', Validators.required],
+            phoneNumber: '',
+            emailAddress: ['', [Validators.required, Validators.email]],
+        });
+    }
+    ngOnInit() {
+        this.customers$ = concat(of([]), // default items
+        this.input$.pipe(debounceTime(200), distinctUntilChanged(), tap(() => (this.isLoading = true)), switchMap(term => this.dataService.customer
+            .getCustomerList(10, 0, term)
+            .mapStream(({ customers }) => customers.items)
+            .pipe(catchError(() => of([])), // empty list on error
+        tap(() => (this.isLoading = false))))));
+    }
+    trackByFn(item) {
+        return item.id;
+    }
+    cancel() {
+        this.resolveWith();
+    }
+    select() {
+        if (this.useExisting && this.selectedCustomer.length === 1) {
+            this.resolveWith(this.selectedCustomer[0]);
+        }
+        if (this.createNew && this.customerForm.valid) {
+            const formValue = this.customerForm.value;
+            this.resolveWith(formValue);
+        }
+    }
+}
+SelectCustomerDialogComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'vdr-select-customer-dialog',
+                template: "<ng-template vdrDialogTitle>{{ 'order.set-customer-for-order' | translate }}</ng-template>\r\n\r\n<clr-tabs>\r\n    <clr-tab>\r\n        <button clrTabLink>{{ 'order.existing-customer' | translate }}</button>\r\n\r\n        <ng-template [(clrIfActive)]=\"useExisting\">\r\n            <clr-tab-content>\r\n                <ng-select\r\n                    [items]=\"customers$ | async\"\r\n                    appendTo=\"body\"\r\n                    bindLabel=\"name\"\r\n                    [addTag]=\"false\"\r\n                    [multiple]=\"true\"\r\n                    [hideSelected]=\"true\"\r\n                    [trackByFn]=\"trackByFn\"\r\n                    [minTermLength]=\"2\"\r\n                    [loading]=\"isLoading\"\r\n                    [typeahead]=\"input$\"\r\n                    [(ngModel)]=\"selectedCustomer\"\r\n                    class=\"mt4\"\r\n                >\r\n                    <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n                        <clr-icon shape=\"user\" class=\"is-solid\"></clr-icon\r\n                        ><span class=\"ml2 mr2\">{{ item.firstName }} {{ item.lastName }}</span>\r\n                        <vdr-chip>{{ item.emailAddress }}</vdr-chip>\r\n                    </ng-template>\r\n                    <ng-template ng-option-tmp let-item=\"item\">\r\n                        <clr-icon shape=\"user\" class=\"is-solid\"></clr-icon\r\n                        ><span class=\"ml2 mr2\">{{ item.firstName }} {{ item.lastName }}</span>\r\n                        <vdr-chip>{{ item.emailAddress }}</vdr-chip>\r\n                    </ng-template>\r\n                </ng-select>\r\n            </clr-tab-content>\r\n        </ng-template>\r\n    </clr-tab>\r\n    <clr-tab>\r\n        <button clrTabLink>{{ 'customer.create-new-customer' | translate }}</button>\r\n\r\n        <ng-template [(clrIfActive)]=\"createNew\">\r\n            <clr-tab-content>\r\n                <form [formGroup]=\"customerForm\">\r\n                <vdr-form-field [label]=\"'customer.title' | translate\" for=\"title\">\r\n                    <input id=\"title\" type=\"text\" formControlName=\"title\" />\r\n                </vdr-form-field>\r\n                <vdr-form-field [label]=\"'customer.first-name' | translate\" for=\"firstName\">\r\n                    <input id=\"firstName\" type=\"text\" formControlName=\"firstName\" />\r\n                </vdr-form-field>\r\n                <vdr-form-field [label]=\"'customer.last-name' | translate\" for=\"lastName\">\r\n                    <input id=\"lastName\" type=\"text\" formControlName=\"lastName\" />\r\n                </vdr-form-field>\r\n                <vdr-form-field [label]=\"'customer.email-address' | translate\" for=\"emailAddress\">\r\n                    <input id=\"emailAddress\" type=\"text\" formControlName=\"emailAddress\" />\r\n                </vdr-form-field>\r\n                <vdr-form-field [label]=\"'customer.phone-number' | translate\" for=\"phoneNumber\">\r\n                    <input id=\"phoneNumber\" type=\"text\" formControlName=\"phoneNumber\" />\r\n                </vdr-form-field>\r\n                </form>\r\n            </clr-tab-content>\r\n        </ng-template>\r\n    </clr-tab>\r\n</clr-tabs>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button\r\n        type=\"submit\"\r\n        (click)=\"select()\"\r\n        [disabled]=\"(useExisting && selectedCustomer.length === 0) || (createNew && customerForm.invalid)\"\r\n        class=\"btn btn-primary\"\r\n    >\r\n        {{ 'common.okay' | translate }}\r\n    </button>\r\n</ng-template>\r\n",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [""]
+            },] }
+];
+SelectCustomerDialogComponent.ctorParameters = () => [
+    { type: DataService },
+    { type: FormBuilder }
+];
+
+class SelectShippingMethodDialogComponent {
+    constructor() { }
+    ngOnInit() {
+        if (this.currentSelectionId) {
+            this.selectedMethod = this.eligibleShippingMethods.find(m => m.id === this.currentSelectionId);
+        }
+    }
+    methodIdFn(item) {
+        return item.id;
+    }
+    cancel() {
+        this.resolveWith();
+    }
+    select() {
+        if (this.selectedMethod) {
+            this.resolveWith(this.selectedMethod.id);
+        }
+    }
+}
+SelectShippingMethodDialogComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'vdr-select-shipping-method-dialog',
+                template: "<ng-template vdrDialogTitle>{{ 'order.select-shipping-method' | translate }}</ng-template>\r\n<vdr-radio-card-fieldset\r\n    [idFn]=\"methodIdFn\"\r\n    [selectedItemId]=\"selectedMethod?.id\"\r\n    (selectItem)=\"selectedMethod = $event\"\r\n>\r\n    <vdr-radio-card *ngFor=\"let quote of eligibleShippingMethods\" [item]=\"quote\">\r\n        <div class=\"result-details\">\r\n            <vdr-labeled-data [label]=\"'settings.shipping-method' | translate\">\r\n                {{ quote.name }}\r\n            </vdr-labeled-data>\r\n            <div class=\"price-row\">\r\n                <vdr-labeled-data [label]=\"'common.price' | translate\">\r\n                    {{ quote.price | localeCurrency: currencyCode }}\r\n                </vdr-labeled-data>\r\n                <vdr-labeled-data [label]=\"'common.price-with-tax' | translate\">\r\n                    {{ quote.priceWithTax | localeCurrency: currencyCode }}\r\n                </vdr-labeled-data>\r\n            </div>\r\n            <vdr-object-tree *ngIf=\"quote.metadata\" [value]=\"quote.metadata\"></vdr-object-tree>\r\n        </div>\r\n    </vdr-radio-card>\r\n</vdr-radio-card-fieldset>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button\r\n        type=\"submit\"\r\n        (click)=\"select()\"\r\n        [disabled]=\"!selectedMethod\"\r\n        class=\"btn btn-primary\"\r\n    >\r\n        {{ 'common.okay' | translate }}\r\n    </button>\r\n</ng-template>\r\n",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [""]
+            },] }
+];
+SelectShippingMethodDialogComponent.ctorParameters = () => [];
+
+class DraftOrderDetailComponent extends BaseDetailComponent {
+    constructor(router, route, serverConfigService, changeDetector, dataService, notificationService, modalService, orderTransitionService) {
+        super(route, router, serverConfigService, dataService);
+        this.changeDetector = changeDetector;
+        this.dataService = dataService;
+        this.notificationService = notificationService;
+        this.modalService = modalService;
+        this.orderTransitionService = orderTransitionService;
+        this.detailForm = new FormGroup({});
+        this.fetchHistory = new Subject();
+        this.displayCouponCodeInput = false;
+    }
+    ngOnInit() {
+        this.init();
+        this.orderLineCustomFields = this.getCustomFieldConfig('OrderLine');
+        this.eligibleShippingMethods$ = this.entity$.pipe(switchMap(order => this.dataService.order
+            .getDraftOrderEligibleShippingMethods(order.id)
+            .mapSingle(({ eligibleShippingMethodsForDraftOrder }) => eligibleShippingMethodsForDraftOrder)));
+        this.customFields = this.getCustomFieldConfig('Order');
+        this.orderLineCustomFields = this.getCustomFieldConfig('OrderLine');
+    }
+    ngOnDestroy() {
+        this.destroy();
+    }
+    addItemToOrder(event) {
+        this.dataService.order.addItemToDraftOrder(this.id, event).subscribe(result => {
+            if (result.addItemToDraftOrder.__typename !== 'Order') {
+                this.notificationService.error(result.addItemToDraftOrder.message);
+            }
+        });
+    }
+    adjustOrderLine(event) {
+        this.dataService.order
+            .adjustDraftOrderLine(this.id, { orderLineId: event.lineId, quantity: event.quantity })
+            .subscribe(result => {
+            if (result.adjustDraftOrderLine.__typename !== 'Order') {
+                this.notificationService.error(result.adjustDraftOrderLine.message);
+            }
+        });
+    }
+    removeOrderLine(event) {
+        this.dataService.order.removeDraftOrderLine(this.id, event.lineId).subscribe(result => {
+            if (result.removeDraftOrderLine.__typename !== 'Order') {
+                this.notificationService.error(result.removeDraftOrderLine.message);
+            }
+        });
+    }
+    getOrderAddressLines(orderAddress) {
+        if (!orderAddress) {
+            return [];
+        }
+        return Object.values(orderAddress)
+            .filter(val => val !== 'OrderAddress')
+            .filter(line => !!line);
+    }
+    setCustomer() {
+        this.modalService.fromComponent(SelectCustomerDialogComponent).subscribe(result => {
+            if (this.hasId(result)) {
+                this.dataService.order
+                    .setCustomerForDraftOrder(this.id, { customerId: result.id })
+                    .subscribe();
+            }
+            else if (result) {
+                this.dataService.order.setCustomerForDraftOrder(this.id, { input: result }).subscribe();
+            }
+        });
+    }
+    setShippingAddress() {
+        this.entity$
+            .pipe(take(1), switchMap(order => {
+            var _a, _b;
+            return this.modalService.fromComponent(SelectAddressDialogComponent, {
+                locals: {
+                    customerId: (_a = order.customer) === null || _a === void 0 ? void 0 : _a.id,
+                    currentAddress: (_b = order.shippingAddress) !== null && _b !== void 0 ? _b : undefined,
+                },
+            });
+        }))
+            .subscribe(result => {
+            if (result) {
+                this.dataService.order.setDraftOrderShippingAddress(this.id, result).subscribe();
+            }
+        });
+    }
+    setBillingAddress() {
+        this.entity$
+            .pipe(take(1), switchMap(order => {
+            var _a, _b;
+            return this.modalService.fromComponent(SelectAddressDialogComponent, {
+                locals: {
+                    customerId: (_a = order.customer) === null || _a === void 0 ? void 0 : _a.id,
+                    currentAddress: (_b = order.billingAddress) !== null && _b !== void 0 ? _b : undefined,
+                },
+            });
+        }))
+            .subscribe(result => {
+            if (result) {
+                this.dataService.order.setDraftOrderBillingAddress(this.id, result).subscribe();
+            }
+        });
+    }
+    applyCouponCode(couponCode) {
+        this.dataService.order.applyCouponCodeToDraftOrder(this.id, couponCode).subscribe();
+    }
+    removeCouponCode(couponCode) {
+        this.dataService.order.removeCouponCodeFromDraftOrder(this.id, couponCode).subscribe();
+    }
+    setShippingMethod() {
+        combineLatest(this.entity$, this.eligibleShippingMethods$)
+            .pipe(take(1), switchMap(([order, methods]) => {
+            var _a, _b;
+            return this.modalService.fromComponent(SelectShippingMethodDialogComponent, {
+                locals: {
+                    eligibleShippingMethods: methods,
+                    currencyCode: order.currencyCode,
+                    currentSelectionId: (_b = (_a = order.shippingLines) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.shippingMethod.id,
+                },
+            });
+        }))
+            .subscribe(result => {
+            if (result) {
+                this.dataService.order.setDraftOrderShippingMethod(this.id, result).subscribe();
+            }
+        });
+    }
+    updateCustomFields(customFieldsValue) {
+        this.dataService.order
+            .updateOrderCustomFields({
+            id: this.id,
+            customFields: customFieldsValue,
+        })
+            .subscribe();
+    }
+    deleteOrder() {
+        this.dataService.order.deleteDraftOrder(this.id).subscribe(({ deleteDraftOrder }) => {
+            if (deleteDraftOrder.result === DeletionResult.DELETED) {
+                this.notificationService.success(marker('common.notify-delete-success'), {
+                    entity: 'Order',
+                });
+                this.router.navigate(['/orders']);
+            }
+            else if (deleteDraftOrder.message) {
+                this.notificationService.error(deleteDraftOrder.message);
+            }
+        });
+    }
+    completeOrder() {
+        this.dataService.order
+            .transitionToState(this.id, 'ArrangingPayment')
+            .subscribe(({ transitionOrderToState }) => {
+            if ((transitionOrderToState === null || transitionOrderToState === void 0 ? void 0 : transitionOrderToState.__typename) === 'Order') {
+                this.router.navigate(['/orders', this.id]);
+            }
+            else if ((transitionOrderToState === null || transitionOrderToState === void 0 ? void 0 : transitionOrderToState.__typename) === 'OrderStateTransitionError') {
+                this.notificationService.error(transitionOrderToState.transitionError);
+            }
+        });
+    }
+    hasId(input) {
+        return typeof input === 'object' && !!input.id;
+    }
+    setFormValues(entity) {
+        // empty
+    }
+}
+DraftOrderDetailComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'vdr-draft-order-detail',
+                template: "<vdr-action-bar *ngIf=\"entity$ | async as order\">\r\n    <vdr-ab-left>\r\n        <div class=\"flex clr-align-items-center\">\r\n            <vdr-entity-info [entity]=\"entity$ | async\"></vdr-entity-info>\r\n            <vdr-order-state-label [state]=\"order.state\"></vdr-order-state-label>\r\n        </div>\r\n    </vdr-ab-left>\r\n\r\n    <vdr-ab-right>\r\n        <button\r\n            class=\"btn btn-primary\"\r\n            (click)=\"completeOrder()\"\r\n            [disabled]=\"!order.customer || !order.lines.length || !order.shippingLines.length\"\r\n        >\r\n            <clr-icon shape=\"check\"></clr-icon>\r\n            {{ 'order.complete-draft-order' | translate }}\r\n        </button>\r\n        <vdr-dropdown>\r\n            <button class=\"icon-button\" vdrDropdownTrigger>\r\n                <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n            </button>\r\n            <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                <button type=\"button\" class=\"btn\" vdrDropdownItem (click)=\"deleteOrder()\">\r\n                    <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                    {{ 'order.delete-draft-order' | translate }}\r\n                </button>\r\n            </vdr-dropdown-menu>\r\n        </vdr-dropdown>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<div *ngIf=\"entity$ | async as order\">\r\n    <div class=\"clr-row\">\r\n        <div class=\"clr-col-lg-8\">\r\n            <vdr-draft-order-variant-selector\r\n                [orderLineCustomFields]=\"orderLineCustomFields\"\r\n                [currencyCode]=\"order.currencyCode\"\r\n                (addItem)=\"addItemToOrder($event)\"\r\n            ></vdr-draft-order-variant-selector>\r\n            <vdr-order-table\r\n                [order]=\"order\"\r\n                [orderLineCustomFields]=\"orderLineCustomFields\"\r\n                [isDraft]=\"true\"\r\n                (adjust)=\"adjustOrderLine($event)\"\r\n                (remove)=\"removeOrderLine($event)\"\r\n            ></vdr-order-table>\r\n            <div class=\"flex\">\r\n                <button\r\n                    *ngIf=\"order.couponCodes.length === 0 && !displayCouponCodeInput\"\r\n                    class=\"btn btn-link btn-sm mr2\"\r\n                    (click)=\"displayCouponCodeInput = !displayCouponCodeInput\"\r\n                >\r\n                    {{ 'order.set-coupon-codes' | translate }}\r\n                </button>\r\n                <div *ngIf=\"order.couponCodes.length || displayCouponCodeInput\">\r\n                    <label>{{ 'order.set-coupon-codes' | translate }}</label>\r\n                    <vdr-coupon-code-selector\r\n                        [couponCodes]=\"order.couponCodes\"\r\n                        (addCouponCode)=\"applyCouponCode($event)\"\r\n                        (removeCouponCode)=\"removeCouponCode($event)\"\r\n                    ></vdr-coupon-code-selector>\r\n                </div>\r\n            </div>\r\n            <ng-container *ngIf=\"order.taxSummary.length\">\r\n                <h4>{{ 'order.tax-summary' | translate }}</h4>\r\n                <table class=\"table\">\r\n                    <thead>\r\n                        <tr>\r\n                            <th>{{ 'common.description' | translate }}</th>\r\n                            <th>{{ 'order.tax-rate' | translate }}</th>\r\n                            <th>{{ 'order.tax-base' | translate }}</th>\r\n                            <th>{{ 'order.tax-total' | translate }}</th>\r\n                        </tr>\r\n                    </thead>\r\n                    <tbody>\r\n                        <tr *ngFor=\"let row of order.taxSummary\">\r\n                            <td>{{ row.description }}</td>\r\n                            <td>{{ row.taxRate / 100 | percent }}</td>\r\n                            <td>{{ row.taxBase | localeCurrency: order.currencyCode }}</td>\r\n                            <td>{{ row.taxTotal | localeCurrency: order.currencyCode }}</td>\r\n                        </tr>\r\n                    </tbody>\r\n                </table>\r\n            </ng-container>\r\n        </div>\r\n        <div class=\"clr-col-lg-4 order-cards\">\r\n            <div class=\"card\">\r\n                <div class=\"card-header\">\r\n                    <clr-icon *ngIf=\"!order.customer\" shape=\"unknown-status\" class=\"is-warning\"></clr-icon>\r\n                    <clr-icon *ngIf=\"order.customer\" shape=\"check\" class=\"is-success\"></clr-icon>\r\n                    {{ 'order.customer' | translate }}\r\n                </div>\r\n                <div class=\"card-block\">\r\n                    <div class=\"card-text\">\r\n                        <vdr-customer-label\r\n                            class=\"block mb2\"\r\n                            *ngIf=\"order.customer\"\r\n                            [customer]=\"order.customer\"\r\n                        ></vdr-customer-label>\r\n                        <button class=\"btn btn-link btn-sm\" (click)=\"setCustomer()\">\r\n                            {{ 'order.set-customer-for-order' | translate }}\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n                <div class=\"card-block\">\r\n                    <h4 class=\"card-title\">\r\n                        <clr-icon\r\n                            *ngIf=\"!order.billingAddress.streetLine1\"\r\n                            shape=\"unknown-status\"\r\n                            class=\"is-warning\"\r\n                        ></clr-icon>\r\n                        <clr-icon\r\n                            *ngIf=\"order.billingAddress.streetLine1\"\r\n                            shape=\"check\"\r\n                            class=\"is-success\"\r\n                        ></clr-icon>\r\n                        {{ 'order.billing-address' | translate }}\r\n                    </h4>\r\n                    <div class=\"card-text\">\r\n                        <vdr-formatted-address\r\n                            class=\"block mb2\"\r\n                            *ngIf=\"order.billingAddress\"\r\n                            [address]=\"order.billingAddress\"\r\n                        ></vdr-formatted-address>\r\n                        <button class=\"btn btn-link btn-sm\" (click)=\"setBillingAddress()\">\r\n                            {{ 'order.set-billing-address' | translate }}\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"card\">\r\n                <div class=\"card-header\">\r\n                    <clr-icon\r\n                        *ngIf=\"!order.shippingAddress.streetLine1 || !order.shippingLines.length\"\r\n                        shape=\"unknown-status\"\r\n                        class=\"is-warning\"\r\n                    ></clr-icon>\r\n                    <clr-icon\r\n                        *ngIf=\"order.shippingAddress.streetLine1 && order.shippingLines.length\"\r\n                        shape=\"check\"\r\n                        class=\"is-success\"\r\n                    ></clr-icon>\r\n                    {{ 'order.shipping' | translate }}\r\n                </div>\r\n                <div class=\"card-block\">\r\n                    <div class=\"card-text\">\r\n                        <vdr-formatted-address\r\n                            class=\"block mb2\"\r\n                            *ngIf=\"order.shippingAddress\"\r\n                            [address]=\"order.shippingAddress\"\r\n                        ></vdr-formatted-address>\r\n                        <button class=\"btn btn-link btn-sm\" (click)=\"setShippingAddress()\">\r\n                            {{ 'order.set-shipping-address' | translate }}\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n                <div class=\"card-block\">\r\n                    <div class=\"card-text\">\r\n                        <div *ngFor=\"let shippingLine of order.shippingLines\">\r\n                            {{ shippingLine.shippingMethod.name }}\r\n                        </div>\r\n                        <button class=\"btn btn-link btn-sm\" (click)=\"setShippingMethod()\">\r\n                            {{ 'order.set-shipping-method' | translate }}\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <vdr-order-custom-fields-card\r\n                [customFieldsConfig]=\"customFields\"\r\n                [customFieldValues]=\"order.customFields\"\r\n                (updateClick)=\"updateCustomFields($event)\"\r\n            ></vdr-order-custom-fields-card>\r\n        </div>\r\n    </div>\r\n</div>\r\n",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [""]
+            },] }
+];
+DraftOrderDetailComponent.ctorParameters = () => [
+    { type: Router },
+    { type: ActivatedRoute },
+    { type: ServerConfigService },
+    { type: ChangeDetectorRef },
+    { type: DataService },
+    { type: NotificationService },
+    { type: ModalService },
+    { type: OrderTransitionService }
+];
+
+class DraftOrderVariantSelectorComponent {
+    constructor(dataService) {
+        this.dataService = dataService;
+        this.addItem = new EventEmitter();
+        this.customFieldsFormGroup = new FormGroup({});
+        this.selectedVariantId$ = new Subject();
+        this.quantity = 1;
     }
     ngOnInit() {
-        this.lineQuantities = this.order.lines.reduce((result, line) => {
-            return Object.assign(Object.assign({}, result), { [line.id]: line.quantity });
-        }, {});
-    }
-    radioChanged() {
-        if (this.cancelAll) {
-            for (const line of this.order.lines) {
-                this.lineQuantities[line.id] = line.quantity;
+        this.selectedVariant$ = this.selectedVariantId$.pipe(switchMap(id => {
+            if (id) {
+                return this.dataService.product
+                    .getProductVariant(id)
+                    .mapSingle(({ productVariant }) => productVariant);
             }
-        }
-        else {
-            for (const line of this.order.lines) {
-                this.lineQuantities[line.id] = 0;
-            }
-        }
-    }
-    checkIfAllSelected() {
-        var _a;
-        for (const [lineId, quantity] of Object.entries(this.lineQuantities)) {
-            const quantityInOrder = (_a = this.order.lines.find(line => line.id === lineId)) === null || _a === void 0 ? void 0 : _a.quantity;
-            if (quantityInOrder && quantity < quantityInOrder) {
-                return;
+            else {
+                return [undefined];
             }
+        }));
+        for (const customField of this.orderLineCustomFields) {
+            this.customFieldsFormGroup.addControl(customField.name, new FormControl(''));
         }
-        // If we got here, all of the selected quantities are equal to the order
-        // line quantities, i.e. everything is selected.
-        this.cancelAll = true;
-    }
-    select() {
-        this.resolveWith({
-            orderId: this.order.id,
-            lines: this.getLineInputs(),
-            reason: this.reason,
-            cancelShipping: this.cancelAll,
-        });
     }
-    cancel() {
-        this.resolveWith();
-    }
-    getLineInputs() {
-        if (this.order.active) {
-            return;
+    addItemClick(selectedVariant) {
+        if (selectedVariant) {
+            this.addItem.emit({
+                productVariantId: selectedVariant.id,
+                quantity: this.quantity,
+                customFields: this.orderLineCustomFields.length
+                    ? this.customFieldsFormGroup.value
+                    : undefined,
+            });
+            this.selectedVariantId$.next(undefined);
+            this.customFieldsFormGroup.reset();
         }
-        return Object.entries(this.lineQuantities)
-            .map(([orderLineId, quantity]) => ({
-            orderLineId,
-            quantity,
-        }))
-            .filter(l => 0 < l.quantity);
     }
 }
-CancelOrderDialogComponent.decorators = [
+DraftOrderVariantSelectorComponent.decorators = [
     { type: Component, args: [{
-                selector: 'vdr-cancel-order-dialog',
-                template: "<ng-template vdrDialogTitle>{{ 'order.cancel-order' | translate }}</ng-template>\r\n\r\n<div class=\"fulfillment-wrapper\">\r\n    <div class=\"order-lines\">\r\n        <table class=\"table\">\r\n            <thead>\r\n                <tr>\r\n                    <th></th>\r\n                    <th>{{ 'order.product-name' | translate }}</th>\r\n                    <th>{{ 'order.product-sku' | translate }}</th>\r\n                    <th>{{ 'order.quantity' | translate }}</th>\r\n                    <th>{{ 'order.unit-price' | translate }}</th>\r\n                    <th>{{ 'order.cancel' | translate }}</th>\r\n                </tr>\r\n            </thead>\r\n            <tr\r\n                *ngFor=\"let line of order.lines\"\r\n                class=\"order-line\"\r\n                [class.is-disabled]=\"cancelAll\"\r\n                [class.is-cancelled]=\"line.quantity === 0\"\r\n            >\r\n                <td class=\"align-middle thumb\">\r\n                    <img [src]=\"line.featuredAsset | assetPreview: 'tiny'\" />\r\n                </td>\r\n                <td class=\"align-middle name\">{{ line.productVariant.name }}</td>\r\n                <td class=\"align-middle sku\">{{ line.productVariant.sku }}</td>\r\n                <td class=\"align-middle quantity\">{{ line.quantity }}</td>\r\n                <td class=\"align-middle quantity\">\r\n                    {{ line.unitPriceWithTax | localeCurrency: order.currencyCode }}\r\n                </td>\r\n                <td class=\"align-middle fulfil\">\r\n                    <input\r\n                        *ngIf=\"line.quantity > 0 && !order.active; else nonEditable\"\r\n                        [(ngModel)]=\"lineQuantities[line.id]\"\r\n                        (input)=\"checkIfAllSelected()\"\r\n                        [disabled]=\"cancelAll\"\r\n                        type=\"number\"\r\n                        [max]=\"line.quantity\"\r\n                        min=\"0\"\r\n                    />\r\n                    <ng-template #nonEditable>{{ line.quantity }}</ng-template>\r\n                </td>\r\n            </tr>\r\n        </table>\r\n    </div>\r\n    <div class=\"cancellation-details\">\r\n        <ng-container *ngIf=\"order.active !== true\">\r\n            <clr-radio-wrapper>\r\n                <input\r\n                    type=\"radio\"\r\n                    clrRadio\r\n                    [value]=\"true\"\r\n                    [(ngModel)]=\"cancelAll\"\r\n                    name=\"options\"\r\n                    (ngModelChange)=\"radioChanged()\"\r\n                />\r\n                <label>{{ 'order.cancel-entire-order' | translate }}</label>\r\n            </clr-radio-wrapper>\r\n            <clr-radio-wrapper>\r\n                <input\r\n                    type=\"radio\"\r\n                    clrRadio\r\n                    [value]=\"false\"\r\n                    [(ngModel)]=\"cancelAll\"\r\n                    name=\"options\"\r\n                    (ngModelChange)=\"radioChanged()\"\r\n                />\r\n                <label>{{ 'order.cancel-specified-items' | translate }}</label>\r\n            </clr-radio-wrapper>\r\n        </ng-container>\r\n        <label class=\"clr-control-label\">{{ 'order.cancellation-reason' | translate }}</label>\r\n        <ng-select\r\n            [items]=\"reasons\"\r\n            bindLabel=\"name\"\r\n            autofocus\r\n            bindValue=\"id\"\r\n            [addTag]=\"true\"\r\n            [(ngModel)]=\"reason\"\r\n        ></ng-select>\r\n    </div>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button\r\n        type=\"submit\"\r\n        (click)=\"select()\"\r\n        [disabled]=\"!reason || (!order.active && selectionCount === 0)\"\r\n        class=\"btn btn-primary\"\r\n    >\r\n        <ng-container *ngIf=\"!order.active\">\r\n            {{ 'order.cancel-selected-items' | translate }}\r\n        </ng-container>\r\n        <ng-container *ngIf=\"order.active\">\r\n            {{ 'order.cancel-order' | translate }}\r\n        </ng-container>\r\n    </button>\r\n</ng-template>\r\n",
+                selector: 'vdr-draft-order-variant-selector',
+                template: "<div class=\"card\">\r\n    <div class=\"card-block\">\r\n        <h4 class=\"card-title\">{{ 'order.add-item-to-order' | translate }}</h4>\r\n        <vdr-product-selector\r\n            (productSelected)=\"selectedVariantId$.next($event.productVariantId)\"\r\n        ></vdr-product-selector>\r\n    </div>\r\n    <div class=\"card-block\" *ngIf=\"selectedVariant$ | async as selectedVariant\">\r\n        <div class=\"variant-details\">\r\n            <img class=\"mr2\" [src]=\"selectedVariant.featuredAsset || selectedVariant.product.featuredAsset | assetPreview: 32\">\r\n            <div class=\"details\">\r\n                <div>{{ selectedVariant?.name }}</div>\r\n                <div class=\"small\">{{ selectedVariant?.sku }}</div>\r\n            </div>\r\n            <div class=\"details ml4\">\r\n                <div class=\"small\">\r\n                    {{ 'catalog.stock-on-hand' | translate }}: {{ selectedVariant.stockOnHand }}\r\n                </div>\r\n                <div class=\"small\">\r\n                    {{ 'catalog.stock-allocated' | translate }}: {{ selectedVariant.stockAllocated }}\r\n                </div>\r\n            </div>\r\n            <div class=\"flex-spacer\"></div>\r\n            <div class=\"details\">\r\n                <div>{{ selectedVariant?.priceWithTax | localeCurrency: currencyCode }}</div>\r\n                <div class=\"small\" [title]=\"'order.net-price' | translate\">\r\n                    {{ selectedVariant?.price | localeCurrency: currencyCode }}\r\n                </div>\r\n            </div>\r\n            <div>\r\n                <input [disabled]=\"!selectedVariant\" type=\"number\" min=\"0\" [(ngModel)]=\"quantity\" />\r\n            </div>\r\n            <button\r\n                [disabled]=\"!selectedVariant\"\r\n                class=\"btn btn-small btn-primary\"\r\n                (click)=\"addItemClick(selectedVariant)\"\r\n            >\r\n                {{ 'order.add-item-to-order' | translate }}\r\n            </button>\r\n        </div>\r\n        <ng-container *ngIf=\"orderLineCustomFields.length\">\r\n            <div class=\"custom-field\" *ngFor=\"let field of orderLineCustomFields\">\r\n                <vdr-custom-field-control\r\n                    [compact]=\"true\"\r\n                    [readonly]=\"false\"\r\n                    [customField]=\"field\"\r\n                    [customFieldsFormGroup]=\"customFieldsFormGroup\"\r\n                ></vdr-custom-field-control>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n</div>\r\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [":host{height:100%;display:flex;min-height:64vh}.fulfillment-wrapper{flex:1}@media screen and (min-width: 768px){.fulfillment-wrapper{display:flex;flex-direction:row}}@media screen and (min-width: 768px){.fulfillment-wrapper .cancellation-details{margin-top:0;margin-left:24px;width:250px}}.fulfillment-wrapper .order-lines{flex:1;overflow-y:auto}.fulfillment-wrapper .order-lines table{margin-top:0}.fulfillment-wrapper tr.ignore{color:var(--color-grey-300)}.fulfillment-wrapper .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}.fulfillment-wrapper .is-disabled td,.fulfillment-wrapper .is-disabled td input{background-color:var(--color-component-bg-200)}\n"]
+                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"]
             },] }
 ];
-CancelOrderDialogComponent.ctorParameters = () => [
-    { type: I18nService }
-];
+DraftOrderVariantSelectorComponent.ctorParameters = () => [
+    { type: DataService }
+];
+DraftOrderVariantSelectorComponent.propDecorators = {
+    currencyCode: [{ type: Input }],
+    orderLineCustomFields: [{ type: Input }],
+    addItem: [{ type: Output }]
+};
 
 class FulfillOrderDialogComponent {
     constructor(dataService, changeDetector) {
@@ -526,138 +1114,6 @@ OrderCustomFieldsCardComponent.propDecorators = {
     updateClick: [{ type: Output }]
 };
 
-class OrderStateSelectDialogComponent {
-    constructor() {
-        this.nextStates = [];
-        this.message = '';
-        this.selectedState = '';
-    }
-    select() {
-        if (this.selectedState) {
-            this.resolveWith(this.selectedState);
-        }
-    }
-    cancel() {
-        this.resolveWith();
-    }
-}
-OrderStateSelectDialogComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'vdr-order-state-select-dialog',
-                template: "<ng-template vdrDialogTitle>{{ 'order.select-state' | translate }}</ng-template>\r\n<p>{{ message | translate }}</p>\r\n<clr-select-container>\r\n    <select clrSelect name=\"state\" [(ngModel)]=\"selectedState\">\r\n        <option *ngFor=\"let state of nextStates\" [value]=\"state\">\r\n            {{ state | stateI18nToken | translate }}\r\n        </option>\r\n    </select>\r\n</clr-select-container>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"submit\" *ngIf=\"cancellable\" (click)=\"cancel()\" class=\"btn btn-secondary\">\r\n        {{ 'common.cancel' | translate }}\r\n    </button>\r\n    <button type=\"submit\" (click)=\"select()\" class=\"btn btn-primary\" [disabled]=\"!selectedState\">\r\n        {{ 'order.transition-to-state' | translate: { state: (selectedState | stateI18nToken | translate) } }}\r\n    </button>\r\n</ng-template>\r\n",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [""]
-            },] }
-];
-
-class OrderTransitionService {
-    constructor(dataService, modalService, notificationService, i18nService) {
-        this.dataService = dataService;
-        this.modalService = modalService;
-        this.notificationService = notificationService;
-        this.i18nService = i18nService;
-    }
-    /**
-     * Attempts to transition the Order to the last state it was in before it was transitioned
-     * to the "Modifying" state. If this fails, a manual prompt is used.
-     */
-    transitionToPreModifyingState(orderId, nextStates) {
-        return this.getPreModifyingState(orderId).pipe(switchMap(state => {
-            const manualTransitionOptions = {
-                orderId,
-                nextStates,
-                message: this.i18nService.translate(marker('order.unable-to-transition-to-state-try-another'), { state }),
-                cancellable: false,
-                retry: 10,
-            };
-            if (state) {
-                return this.transitionToStateOrThrow(orderId, state).pipe(catchError(err => this.manuallyTransitionToState(manualTransitionOptions)));
-            }
-            else {
-                return this.manuallyTransitionToState(manualTransitionOptions);
-            }
-        }));
-    }
-    /**
-     * Displays a modal for manually selecting the next state.
-     */
-    manuallyTransitionToState(options) {
-        return this.modalService
-            .fromComponent(OrderStateSelectDialogComponent, {
-            locals: {
-                nextStates: options.nextStates,
-                cancellable: options.cancellable,
-                message: options.message,
-            },
-            closable: false,
-            size: 'md',
-        })
-            .pipe(switchMap(result => {
-            if (result) {
-                return this.transitionToStateOrThrow(options.orderId, result);
-            }
-            else {
-                if (!options.cancellable) {
-                    throw new Error(`An order state must be selected`);
-                }
-                else {
-                    return EMPTY;
-                }
-            }
-        }), retryWhen(errors => errors.pipe(delay(2000), take(options.retry))));
-    }
-    /**
-     * Attempts to get the last state the Order was in before it was transitioned
-     * to the "Modifying" state.
-     */
-    getPreModifyingState(orderId) {
-        return this.dataService.order
-            .getOrderHistory(orderId, {
-            filter: {
-                type: {
-                    eq: HistoryEntryType.ORDER_STATE_TRANSITION,
-                },
-            },
-            sort: {
-                createdAt: SortOrder.DESC,
-            },
-        })
-            .mapSingle(result => result.order)
-            .pipe(map(result => {
-            const item = result === null || result === void 0 ? void 0 : result.history.items.find(i => i.data.to === 'Modifying');
-            if (item) {
-                return item.data.from;
-            }
-            else {
-                return;
-            }
-        }));
-    }
-    transitionToStateOrThrow(orderId, state) {
-        return this.dataService.order.transitionToState(orderId, state).pipe(map(({ transitionOrderToState }) => {
-            switch (transitionOrderToState === null || transitionOrderToState === void 0 ? void 0 : transitionOrderToState.__typename) {
-                case 'Order':
-                    return transitionOrderToState === null || transitionOrderToState === void 0 ? void 0 : transitionOrderToState.state;
-                case 'OrderStateTransitionError':
-                    this.notificationService.error(transitionOrderToState === null || transitionOrderToState === void 0 ? void 0 : transitionOrderToState.transitionError);
-                    throw new Error(transitionOrderToState === null || transitionOrderToState === void 0 ? void 0 : transitionOrderToState.transitionError);
-            }
-        }));
-    }
-}
-OrderTransitionService.ɵprov = i0.ɵɵdefineInjectable({ factory: function OrderTransitionService_Factory() { return new OrderTransitionService(i0.ɵɵinject(i1.DataService), i0.ɵɵinject(i1.ModalService), i0.ɵɵinject(i1.NotificationService), i0.ɵɵinject(i1.I18nService)); }, token: OrderTransitionService, providedIn: "root" });
-OrderTransitionService.decorators = [
-    { type: Injectable, args: [{
-                providedIn: 'root',
-            },] }
-];
-OrderTransitionService.ctorParameters = () => [
-    { type: DataService },
-    { type: ModalService },
-    { type: NotificationService },
-    { type: I18nService }
-];
-
 class OrderProcessGraphDialogComponent {
     constructor(serverConfigService) {
         this.serverConfigService = serverConfigService;
@@ -1352,7 +1808,7 @@ class OrderDetailComponent extends BaseDetailComponent {
 OrderDetailComponent.decorators = [
     { type: Component, args: [{
                 selector: 'vdr-order-detail',
-                template: "<vdr-action-bar *ngIf=\"entity$ | async as order\">\r\n    <vdr-ab-left>\r\n        <div class=\"flex clr-align-items-center\">\r\n            <vdr-entity-info [entity]=\"entity$ | async\"></vdr-entity-info>\r\n            <vdr-order-state-label [state]=\"order.state\">\r\n                <button\r\n                    class=\"icon-button\"\r\n                    (click)=\"openStateDiagram()\"\r\n                    [title]=\"'order.order-state-diagram' | translate\"\r\n                >\r\n                    <clr-icon shape=\"list\"></clr-icon>\r\n                </button>\r\n            </vdr-order-state-label>\r\n        </div>\r\n    </vdr-ab-left>\r\n\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"order-detail\"></vdr-action-bar-items>\r\n        <button\r\n            class=\"btn btn-primary\"\r\n            *ngIf=\"\r\n                (order.state === 'ArrangingPayment' || order.state === 'ArrangingAdditionalPayment') &&\r\n                (hasUnsettledModifications(order) || 0 < outstandingPaymentAmount(order))\r\n            \"\r\n            (click)=\"addManualPayment(order)\"\r\n        >\r\n            {{ 'order.add-payment-to-order' | translate }}\r\n            ({{ outstandingPaymentAmount(order) | localeCurrency: order.currencyCode }})\r\n        </button>\r\n        <button\r\n            class=\"btn btn-primary\"\r\n            *ngIf=\"\r\n                order.active === false &&\r\n                order.state !== 'ArrangingAdditionalPayment' &&\r\n                0 < outstandingPaymentAmount(order)\r\n            \"\r\n            (click)=\"transitionToState('ArrangingAdditionalPayment')\"\r\n        >\r\n            {{ 'order.arrange-additional-payment' | translate }}\r\n        </button>\r\n        <button class=\"btn btn-primary\" (click)=\"fulfillOrder()\" [disabled]=\"!canAddFulfillment(order)\">\r\n            {{ 'order.fulfill-order' | translate }}\r\n        </button>\r\n        <vdr-dropdown>\r\n            <button class=\"icon-button\" vdrDropdownTrigger>\r\n                <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n            </button>\r\n            <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                <ng-container *ngIf=\"order.nextStates.includes('Modifying')\">\r\n                    <button type=\"button\" class=\"btn\" vdrDropdownItem (click)=\"transitionToModifying()\">\r\n                        <clr-icon shape=\"pencil\"></clr-icon>\r\n                        {{ 'order.modify-order' | translate }}\r\n                    </button>\r\n                    <div class=\"dropdown-divider\"></div>\r\n                </ng-container>\r\n                <button\r\n                    type=\"button\"\r\n                    class=\"btn\"\r\n                    vdrDropdownItem\r\n                    *ngIf=\"order.nextStates.includes('Cancelled')\"\r\n                    (click)=\"cancelOrRefund(order)\"\r\n                >\r\n                    <clr-icon shape=\"error-standard\" class=\"is-error\"></clr-icon>\r\n                    <ng-container *ngIf=\"orderHasSettledPayments(order); else cancelOnly\">\r\n                        {{ 'order.refund-and-cancel-order' | translate }}\r\n                    </ng-container>\r\n                    <ng-template #cancelOnly>\r\n                        {{ 'order.cancel-order' | translate }}\r\n                    </ng-template>\r\n                </button>\r\n\r\n                <ng-container *ngIf=\"(nextStates$ | async)?.length\">\r\n                    <div class=\"dropdown-divider\"></div>\r\n                    <button\r\n                        *ngFor=\"let nextState of nextStates$ | async\"\r\n                        type=\"button\"\r\n                        class=\"btn\"\r\n                        vdrDropdownItem\r\n                        (click)=\"transitionToState(nextState)\"\r\n                    >\r\n                        <clr-icon shape=\"step-forward-2\"></clr-icon>\r\n                        {{\r\n                            'order.transition-to-state'\r\n                                | translate: { state: (nextState | stateI18nToken | translate) }\r\n                        }}\r\n                    </button>\r\n                </ng-container>\r\n                <div class=\"dropdown-divider\"></div>\r\n                <button type=\"button\" class=\"btn\" vdrDropdownItem (click)=\"manuallyTransitionToState(order)\">\r\n                    <clr-icon shape=\"step-forward-2\" class=\"is-warning\"></clr-icon>\r\n                    {{ 'order.manually-transition-to-state' | translate }}\r\n                </button>\r\n            </vdr-dropdown-menu>\r\n        </vdr-dropdown>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<div *ngIf=\"entity$ | async as order\">\r\n    <div class=\"clr-row\">\r\n        <div class=\"clr-col-lg-8\">\r\n            <vdr-order-table\r\n                [order]=\"order\"\r\n                [orderLineCustomFields]=\"orderLineCustomFields\"\r\n            ></vdr-order-table>\r\n            <h4>{{ 'order.tax-summary' | translate }}</h4>\r\n            <table class=\"table\">\r\n                <thead>\r\n                    <tr>\r\n                        <th>{{ 'common.description' | translate }}</th>\r\n                        <th>{{ 'order.tax-rate' | translate }}</th>\r\n                        <th>{{ 'order.tax-base' | translate }}</th>\r\n                        <th>{{ 'order.tax-total' | translate }}</th>\r\n                    </tr>\r\n                </thead>\r\n                <tbody>\r\n                    <tr *ngFor=\"let row of order.taxSummary\">\r\n                        <td>{{ row.description }}</td>\r\n                        <td>{{ row.taxRate / 100 | percent }}</td>\r\n                        <td>{{ row.taxBase | localeCurrency: order.currencyCode }}</td>\r\n                        <td>{{ row.taxTotal | localeCurrency: order.currencyCode }}</td>\r\n                    </tr>\r\n                </tbody>\r\n            </table>\r\n\r\n            <vdr-custom-detail-component-host\r\n                locationId=\"order-detail\"\r\n                [entity$]=\"entity$\"\r\n                [detailForm]=\"detailForm\"\r\n            ></vdr-custom-detail-component-host>\r\n\r\n            <vdr-order-history\r\n                [order]=\"order\"\r\n                [history]=\"history$ | async\"\r\n                (addNote)=\"addNote($event)\"\r\n                (updateNote)=\"updateNote($event)\"\r\n                (deleteNote)=\"deleteNote($event)\"\r\n            ></vdr-order-history>\r\n        </div>\r\n        <div class=\"clr-col-lg-4 order-cards\">\r\n            <vdr-order-custom-fields-card\r\n                [customFieldsConfig]=\"customFields\"\r\n                [customFieldValues]=\"order.customFields\"\r\n                (updateClick)=\"updateCustomFields($event)\"\r\n            ></vdr-order-custom-fields-card>\r\n            <div class=\"card\">\r\n                <div class=\"card-header\">\r\n                    {{ 'order.customer' | translate }}\r\n                </div>\r\n                <div class=\"card-block\">\r\n                    <div class=\"card-text\">\r\n                        <vdr-customer-label [customer]=\"order.customer\"></vdr-customer-label>\r\n                        <h6 *ngIf=\"getOrderAddressLines(order.shippingAddress).length\">\r\n                            {{ 'order.shipping-address' | translate }}\r\n                        </h6>\r\n                        <vdr-formatted-address [address]=\"order.shippingAddress\"></vdr-formatted-address>\r\n                        <h6 *ngIf=\"getOrderAddressLines(order.billingAddress).length\">\r\n                            {{ 'order.billing-address' | translate }}\r\n                        </h6>\r\n                        <vdr-formatted-address [address]=\"order.billingAddress\"></vdr-formatted-address>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <ng-container *ngIf=\"order.payments && order.payments.length\">\r\n                <vdr-order-payment-card\r\n                    *ngFor=\"let payment of order.payments\"\r\n                    [currencyCode]=\"order.currencyCode\"\r\n                    [payment]=\"payment\"\r\n                    (settlePayment)=\"settlePayment($event)\"\r\n                    (transitionPaymentState)=\"transitionPaymentState($event)\"\r\n                    (settleRefund)=\"settleRefund($event)\"\r\n                ></vdr-order-payment-card>\r\n            </ng-container>\r\n            <ng-container *ngFor=\"let fulfillment of order.fulfillments\">\r\n                <vdr-fulfillment-card\r\n                    [fulfillment]=\"fulfillment\"\r\n                    [order]=\"order\"\r\n                    (transitionState)=\"transitionFulfillment(fulfillment.id, $event)\"\r\n                ></vdr-fulfillment-card>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n</div>\r\n",
+                template: "<vdr-action-bar *ngIf=\"entity$ | async as order\">\r\n    <vdr-ab-left>\r\n        <div class=\"flex clr-align-items-center\">\r\n            <vdr-entity-info [entity]=\"entity$ | async\"></vdr-entity-info>\r\n            <vdr-order-state-label [state]=\"order.state\">\r\n                <button\r\n                    class=\"icon-button\"\r\n                    (click)=\"openStateDiagram()\"\r\n                    [title]=\"'order.order-state-diagram' | translate\"\r\n                >\r\n                    <clr-icon shape=\"list\"></clr-icon>\r\n                </button>\r\n            </vdr-order-state-label>\r\n        </div>\r\n    </vdr-ab-left>\r\n\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"order-detail\"></vdr-action-bar-items>\r\n        <button\r\n            class=\"btn btn-primary\"\r\n            *ngIf=\"\r\n                (order.state === 'ArrangingPayment' || order.state === 'ArrangingAdditionalPayment') &&\r\n                (hasUnsettledModifications(order) || 0 < outstandingPaymentAmount(order))\r\n            \"\r\n            (click)=\"addManualPayment(order)\"\r\n        >\r\n            {{ 'order.add-payment-to-order' | translate }}\r\n            ({{ outstandingPaymentAmount(order) | localeCurrency: order.currencyCode }})\r\n        </button>\r\n        <button\r\n            class=\"btn btn-primary\"\r\n            *ngIf=\"\r\n                order.active === false &&\r\n                order.state !== 'ArrangingAdditionalPayment' &&\r\n                order.state !== 'ArrangingPayment' &&\r\n                0 < outstandingPaymentAmount(order)\r\n            \"\r\n            (click)=\"transitionToState('ArrangingAdditionalPayment')\"\r\n        >\r\n            {{ 'order.arrange-additional-payment' | translate }}\r\n        </button>\r\n        <button class=\"btn btn-primary\" (click)=\"fulfillOrder()\" [disabled]=\"!canAddFulfillment(order)\">\r\n            {{ 'order.fulfill-order' | translate }}\r\n        </button>\r\n        <vdr-dropdown>\r\n            <button class=\"icon-button\" vdrDropdownTrigger>\r\n                <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n            </button>\r\n            <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                <ng-container *ngIf=\"order.nextStates.includes('Modifying')\">\r\n                    <button type=\"button\" class=\"btn\" vdrDropdownItem (click)=\"transitionToModifying()\">\r\n                        <clr-icon shape=\"pencil\"></clr-icon>\r\n                        {{ 'order.modify-order' | translate }}\r\n                    </button>\r\n                    <div class=\"dropdown-divider\"></div>\r\n                </ng-container>\r\n                <button\r\n                    type=\"button\"\r\n                    class=\"btn\"\r\n                    vdrDropdownItem\r\n                    *ngIf=\"order.nextStates.includes('Cancelled')\"\r\n                    (click)=\"cancelOrRefund(order)\"\r\n                >\r\n                    <clr-icon shape=\"error-standard\" class=\"is-error\"></clr-icon>\r\n                    <ng-container *ngIf=\"orderHasSettledPayments(order); else cancelOnly\">\r\n                        {{ 'order.refund-and-cancel-order' | translate }}\r\n                    </ng-container>\r\n                    <ng-template #cancelOnly>\r\n                        {{ 'order.cancel-order' | translate }}\r\n                    </ng-template>\r\n                </button>\r\n\r\n                <ng-container *ngIf=\"(nextStates$ | async)?.length\">\r\n                    <div class=\"dropdown-divider\"></div>\r\n                    <button\r\n                        *ngFor=\"let nextState of nextStates$ | async\"\r\n                        type=\"button\"\r\n                        class=\"btn\"\r\n                        vdrDropdownItem\r\n                        (click)=\"transitionToState(nextState)\"\r\n                    >\r\n                        <clr-icon shape=\"step-forward-2\"></clr-icon>\r\n                        {{\r\n                            'order.transition-to-state'\r\n                                | translate: { state: (nextState | stateI18nToken | translate) }\r\n                        }}\r\n                    </button>\r\n                </ng-container>\r\n                <div class=\"dropdown-divider\"></div>\r\n                <button type=\"button\" class=\"btn\" vdrDropdownItem (click)=\"manuallyTransitionToState(order)\">\r\n                    <clr-icon shape=\"step-forward-2\" class=\"is-warning\"></clr-icon>\r\n                    {{ 'order.manually-transition-to-state' | translate }}\r\n                </button>\r\n            </vdr-dropdown-menu>\r\n        </vdr-dropdown>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<div *ngIf=\"entity$ | async as order\">\r\n    <div class=\"clr-row\">\r\n        <div class=\"clr-col-lg-8\">\r\n            <vdr-order-table\r\n                [order]=\"order\"\r\n                [orderLineCustomFields]=\"orderLineCustomFields\"\r\n            ></vdr-order-table>\r\n            <h4>{{ 'order.tax-summary' | translate }}</h4>\r\n            <table class=\"table\">\r\n                <thead>\r\n                    <tr>\r\n                        <th>{{ 'common.description' | translate }}</th>\r\n                        <th>{{ 'order.tax-rate' | translate }}</th>\r\n                        <th>{{ 'order.tax-base' | translate }}</th>\r\n                        <th>{{ 'order.tax-total' | translate }}</th>\r\n                    </tr>\r\n                </thead>\r\n                <tbody>\r\n                    <tr *ngFor=\"let row of order.taxSummary\">\r\n                        <td>{{ row.description }}</td>\r\n                        <td>{{ row.taxRate / 100 | percent }}</td>\r\n                        <td>{{ row.taxBase | localeCurrency: order.currencyCode }}</td>\r\n                        <td>{{ row.taxTotal | localeCurrency: order.currencyCode }}</td>\r\n                    </tr>\r\n                </tbody>\r\n            </table>\r\n\r\n            <vdr-custom-detail-component-host\r\n                locationId=\"order-detail\"\r\n                [entity$]=\"entity$\"\r\n                [detailForm]=\"detailForm\"\r\n            ></vdr-custom-detail-component-host>\r\n\r\n            <vdr-order-history\r\n                [order]=\"order\"\r\n                [history]=\"history$ | async\"\r\n                (addNote)=\"addNote($event)\"\r\n                (updateNote)=\"updateNote($event)\"\r\n                (deleteNote)=\"deleteNote($event)\"\r\n            ></vdr-order-history>\r\n        </div>\r\n        <div class=\"clr-col-lg-4 order-cards\">\r\n            <vdr-order-custom-fields-card\r\n                [customFieldsConfig]=\"customFields\"\r\n                [customFieldValues]=\"order.customFields\"\r\n                (updateClick)=\"updateCustomFields($event)\"\r\n            ></vdr-order-custom-fields-card>\r\n            <div class=\"card\">\r\n                <div class=\"card-header\">\r\n                    {{ 'order.customer' | translate }}\r\n                </div>\r\n                <div class=\"card-block\">\r\n                    <div class=\"card-text\">\r\n                        <vdr-customer-label [customer]=\"order.customer\"></vdr-customer-label>\r\n                        <h6 *ngIf=\"getOrderAddressLines(order.shippingAddress).length\">\r\n                            {{ 'order.shipping-address' | translate }}\r\n                        </h6>\r\n                        <vdr-formatted-address [address]=\"order.shippingAddress\"></vdr-formatted-address>\r\n                        <h6 *ngIf=\"getOrderAddressLines(order.billingAddress).length\">\r\n                            {{ 'order.billing-address' | translate }}\r\n                        </h6>\r\n                        <vdr-formatted-address [address]=\"order.billingAddress\"></vdr-formatted-address>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <ng-container *ngIf=\"order.payments && order.payments.length\">\r\n                <vdr-order-payment-card\r\n                    *ngFor=\"let payment of order.payments\"\r\n                    [currencyCode]=\"order.currencyCode\"\r\n                    [payment]=\"payment\"\r\n                    (settlePayment)=\"settlePayment($event)\"\r\n                    (transitionPaymentState)=\"transitionPaymentState($event)\"\r\n                    (settleRefund)=\"settleRefund($event)\"\r\n                ></vdr-order-payment-card>\r\n            </ng-container>\r\n            <ng-container *ngFor=\"let fulfillment of order.fulfillments\">\r\n                <vdr-fulfillment-card\r\n                    [fulfillment]=\"fulfillment\"\r\n                    [order]=\"order\"\r\n                    (transitionState)=\"transitionFulfillment(fulfillment.id, $event)\"\r\n                ></vdr-fulfillment-card>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n</div>\r\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: [".shipping-address{list-style-type:none;line-height:1.3em}.order-cards h6{margin-top:6px;color:var(--color-text-200)}\n"]
             },] }
@@ -1425,7 +1881,6 @@ class OrderEditorComponent extends BaseDetailComponent {
         this.notificationService = notificationService;
         this.modalService = modalService;
         this.orderTransitionService = orderTransitionService;
-        this.couponCodeInput$ = new Subject();
         this.detailForm = new FormGroup({});
         this.couponCodesControl = new FormControl();
         this.modifyOrderInput = {
@@ -1522,11 +1977,6 @@ class OrderEditorComponent extends BaseDetailComponent {
                 this.orderLineCustomFieldsFormArray.push(formGroup);
             }
         });
-        this.availableCouponCodes$ = concat(this.couponCodeInput$.pipe(distinctUntilChanged(), switchMap(term => this.dataService.promotion.getPromotions(10, 0, {
-            couponCode: { contains: term },
-        }).single$), map(({ promotions }) => 
-        // tslint:disable-next-line:no-non-null-assertion
-        promotions.items.map(p => ({ code: p.couponCode, promotionName: p.name }))), startWith([])));
         this.addItemCustomFieldsFormArray = new FormArray([]);
         this.addItemCustomFieldsForm = new FormGroup({});
         for (const customField of this.orderLineCustomFields) {
@@ -1772,9 +2222,9 @@ class OrderEditorComponent extends BaseDetailComponent {
 OrderEditorComponent.decorators = [
     { type: Component, args: [{
                 selector: 'vdr-order-editor',
-                template: "<vdr-action-bar *ngIf=\"entity$ | async as order\">\r\n    <vdr-ab-left>\r\n        <div class=\"flex clr-align-items-center\">\r\n            <vdr-entity-info [entity]=\"entity$ | async\"></vdr-entity-info>\r\n            <vdr-order-state-label [state]=\"order.state\"></vdr-order-state-label>\r\n        </div>\r\n    </vdr-ab-left>\r\n\r\n    <vdr-ab-right>\r\n        <button class=\"btn btn-secondary\" (click)=\"transitionToPriorState(order)\">\r\n            {{ 'order.cancel-modification' | translate }}\r\n        </button>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<div *ngIf=\"entity$ | async as order\">\r\n    <div class=\"clr-row\">\r\n        <div class=\"clr-col-lg-8\">\r\n            <table class=\"order-table table\">\r\n                <thead>\r\n                    <tr>\r\n                        <th></th>\r\n                        <th>{{ 'order.product-name' | translate }}</th>\r\n                        <th>{{ 'order.product-sku' | translate }}</th>\r\n                        <th>{{ 'order.unit-price' | translate }}</th>\r\n                        <th>{{ 'order.quantity' | translate }}</th>\r\n                        <th *ngIf=\"orderLineCustomFields.length\">{{ 'common.custom-fields' | translate }}</th>\r\n                        <th>{{ 'order.total' | translate }}</th>\r\n                    </tr>\r\n                </thead>\r\n                <tbody>\r\n                    <tr\r\n                        *ngFor=\"let line of order.lines; let i = index\"\r\n                        class=\"order-line\"\r\n                        [class.is-cancelled]=\"line.quantity === 0\"\r\n                        [class.modified]=\"isLineModified(line)\"\r\n                    >\r\n                        <td class=\"align-middle thumb\">\r\n                            <img\r\n                                *ngIf=\"line.featuredAsset\"\r\n                                [src]=\"line.featuredAsset | assetPreview: 'tiny'\"\r\n                            />\r\n                        </td>\r\n                        <td class=\"align-middle name\">{{ line.productVariant.name }}</td>\r\n                        <td class=\"align-middle sku\">{{ line.productVariant.sku }}</td>\r\n                        <td class=\"align-middle unit-price\">\r\n                            {{ line.unitPriceWithTax | localeCurrency: order.currencyCode }}\r\n                            <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                {{ line.unitPrice | localeCurrency: order.currencyCode }}\r\n                            </div>\r\n                        </td>\r\n                        <td class=\"align-middle quantity\">\r\n                            <input\r\n                                type=\"number\"\r\n                                min=\"0\"\r\n                                [value]=\"line.quantity\"\r\n                                (input)=\"updateLineQuantity(line, $event.target.value)\"\r\n                            />\r\n                            <vdr-line-refunds [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\r\n                            <vdr-line-fulfillment\r\n                                [line]=\"line\"\r\n                                [orderState]=\"order.state\"\r\n                            ></vdr-line-fulfillment>\r\n                        </td>\r\n                        <td *ngIf=\"orderLineCustomFields.length\" class=\"order-line-custom-field align-middle\">\r\n                            <vdr-tabbed-custom-fields\r\n                                entityName=\"OrderLine\"\r\n                                [customFields]=\"orderLineCustomFields\"\r\n                                [customFieldsFormGroup]=\"orderLineCustomFieldsFormArray.get([i])\"\r\n                                [compact]=\"true\"\r\n                            ></vdr-tabbed-custom-fields>\r\n                        </td>\r\n                        <td class=\"align-middle total\">\r\n                            {{ line.linePriceWithTax | localeCurrency: order.currencyCode }}\r\n                            <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                {{ line.linePrice | localeCurrency: order.currencyCode }}\r\n                            </div>\r\n                        </td>\r\n                    </tr>\r\n                    <tr\r\n                        *ngFor=\"let addedLine of addedLines; trackBy: trackByProductVariantId; let i = index\"\r\n                        class=\"modified\"\r\n                    >\r\n                        <td class=\"align-middle thumb\">\r\n                            <img\r\n                                *ngIf=\"addedLine.productAsset\"\r\n                                [src]=\"addedLine.productAsset | assetPreview: 'tiny'\"\r\n                            />\r\n                        </td>\r\n                        <td class=\"align-middle name\">{{ addedLine.productVariantName }}</td>\r\n                        <td class=\"align-middle sku\">{{ addedLine.sku }}</td>\r\n                        <td class=\"align-middle unit-price\">\r\n                            {{ addedLine.priceWithTax | localeCurrency: order.currencyCode }}\r\n                            <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                {{ addedLine.price | localeCurrency: order.currencyCode }}\r\n                            </div>\r\n                        </td>\r\n                        <td class=\"align-middle quantity\">\r\n                            <input\r\n                                type=\"number\"\r\n                                min=\"0\"\r\n                                [value]=\"addedLine.quantity\"\r\n                                (input)=\"updateAddedItemQuantity(addedLine, $event.target.value)\"\r\n                            />\r\n                            <button class=\"icon-button\" (click)=\"removeAddedItem(i)\">\r\n                                <clr-icon shape=\"trash\"></clr-icon>\r\n                            </button>\r\n                        </td>\r\n                        <td *ngIf=\"orderLineCustomFields.length\" class=\"order-line-custom-field align-middle\">\r\n                            <ng-container *ngFor=\"let customField of orderLineCustomFields\">\r\n                                <vdr-custom-field-control\r\n                                    [customField]=\"customField\"\r\n                                    [customFieldsFormGroup]=\"addItemCustomFieldsFormArray.get([i])\"\r\n                                    entityName=\"OrderLine\"\r\n                                    [compact]=\"true\"\r\n                                ></vdr-custom-field-control>\r\n                            </ng-container>\r\n                        </td>\r\n                        <td class=\"align-middle total\">\r\n                            {{\r\n                                (addedLine.priceWithTax * addedLine.quantity) / 100\r\n                                    | currency: order.currencyCode\r\n                            }}\r\n                            <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                {{\r\n                                    (addedLine.price * addedLine.quantity) / 100\r\n                                        | currency: order.currencyCode\r\n                                }}\r\n                            </div>\r\n                        </td>\r\n                    </tr>\r\n                    <tr class=\"surcharge\" *ngFor=\"let surcharge of order.surcharges\">\r\n                        <td class=\"align-middle name left\" colspan=\"2\">{{ surcharge.description }}</td>\r\n                        <td class=\"align-middle sku\">{{ surcharge.sku }}</td>\r\n                        <td class=\"align-middle\"></td>\r\n                        <td></td>\r\n                        <td *ngIf=\"orderLineCustomFields.length\"></td>\r\n                        <td class=\"align-middle total\">\r\n                            {{ surcharge.priceWithTax | localeCurrency: order.currencyCode }}\r\n                            <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                {{ surcharge.price | localeCurrency: order.currencyCode }}\r\n                            </div>\r\n                        </td>\r\n                    </tr>\r\n                    <tr\r\n                        class=\"surcharge modified\"\r\n                        *ngFor=\"let surcharge of modifyOrderInput.surcharges; let i = index\"\r\n                    >\r\n                        <td class=\"align-middle name left\" colspan=\"2\">\r\n                            {{ surcharge.description }}\r\n                            <button class=\"icon-button\" (click)=\"removeSurcharge(i)\">\r\n                                <clr-icon shape=\"trash\"></clr-icon>\r\n                            </button>\r\n                        </td>\r\n                        <td class=\"align-middle sku\">{{ surcharge.sku }}</td>\r\n                        <td class=\"align-middle\"></td>\r\n                        <td></td>\r\n                        <td *ngIf=\"orderLineCustomFields.length\"></td>\r\n                        <td class=\"align-middle total\">\r\n                            <ng-container *ngIf=\"getSurchargePrices(surcharge) as surchargePrice\">\r\n                                {{ surchargePrice.priceWithTax | localeCurrency: order.currencyCode }}\r\n                                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                    {{ surchargePrice.price | localeCurrency: order.currencyCode }}\r\n                                </div>\r\n                            </ng-container>\r\n                        </td>\r\n                    </tr>\r\n                    <tr class=\"shipping\">\r\n                        <td class=\"left clr-align-middle\">{{ 'order.shipping' | translate }}</td>\r\n                        <td class=\"clr-align-middle\">{{ order.shippingLines[0]?.shippingMethod?.name }}</td>\r\n                        <td colspan=\"3\"></td>\r\n                        <td *ngIf=\"orderLineCustomFields.length\"></td>\r\n                        <td class=\"clr-align-middle\">\r\n                            {{ order.shippingWithTax | localeCurrency: order.currencyCode }}\r\n                            <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                {{ order.shipping | localeCurrency: order.currencyCode }}\r\n                            </div>\r\n                        </td>\r\n                    </tr>\r\n                </tbody>\r\n            </table>\r\n\r\n            <h4 class=\"mb2\">{{ 'order.modifications' | translate }}</h4>\r\n            <clr-accordion>\r\n                <clr-accordion-panel>\r\n                    <clr-accordion-title>{{ 'order.add-item-to-order' | translate }}</clr-accordion-title>\r\n                    <clr-accordion-content *clrIfExpanded>\r\n                        <vdr-product-selector class=\"mb4\" (productSelected)=\"addItemSelectedVariant = $event\">\r\n                        </vdr-product-selector>\r\n                        <div *ngIf=\"addItemSelectedVariant\" class=\"flex mb4\">\r\n                            <img\r\n                                *ngIf=\"addItemSelectedVariant.productAsset as asset\"\r\n                                [src]=\"asset | assetPreview: 'tiny'\"\r\n                                class=\"mr4\"\r\n                            />\r\n                            <div>\r\n                                <strong class=\"mr4\">{{ addItemSelectedVariant.productVariantName }}</strong>\r\n                                <small>{{ addItemSelectedVariant.sku }}</small>\r\n                                <div>\r\n                                    {{\r\n                                        getSelectedItemPrice(addItemSelectedVariant)\r\n                                            | localeCurrency: order.currencyCode\r\n                                    }}\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <ng-container *ngFor=\"let customField of orderLineCustomFields\">\r\n                            <vdr-custom-field-control\r\n                                [readonly]=\"!addItemSelectedVariant\"\r\n                                [customField]=\"customField\"\r\n                                [customFieldsFormGroup]=\"addItemCustomFieldsForm\"\r\n                                entityName=\"OrderLine\"\r\n                                [compact]=\"true\"\r\n                            ></vdr-custom-field-control>\r\n                        </ng-container>\r\n                        <button\r\n                            class=\"btn btn-secondary\"\r\n                            [disabled]=\"!addItemSelectedVariant || addItemCustomFieldsForm.invalid\"\r\n                            (click)=\"addItemToOrder(addItemSelectedVariant)\"\r\n                        >\r\n                            {{ 'order.add-item-to-order' | translate }}\r\n                        </button>\r\n                    </clr-accordion-content>\r\n                </clr-accordion-panel>\r\n                <clr-accordion-panel>\r\n                    <clr-accordion-title>{{ 'order.set-coupon-codes' | translate }}</clr-accordion-title>\r\n                    <clr-accordion-content *clrIfExpanded>\r\n                        <ng-select\r\n                            [items]=\"availableCouponCodes$ | async\"\r\n                            appendTo=\"body\"\r\n                            bindLabel=\"code\"\r\n                            bindValue=\"code\"\r\n                            [addTag]=\"false\"\r\n                            [multiple]=\"true\"\r\n                            [hideSelected]=\"true\"\r\n                            [minTermLength]=\"2\"\r\n                            typeToSearchText=\"\"\r\n                            [typeahead]=\"couponCodeInput$\"\r\n                            [formControl]=\"couponCodesControl\"\r\n                        >\r\n                            <ng-template ng-option-tmp let-item=\"item\">\r\n                                <vdr-chip>{{ item.code }}</vdr-chip>\r\n                                {{ item.promotionName }}\r\n                            </ng-template>\r\n                        </ng-select>\r\n                    </clr-accordion-content>\r\n                </clr-accordion-panel>\r\n\r\n                <clr-accordion-panel>\r\n                    <clr-accordion-title>{{ 'order.add-surcharge' | translate }}</clr-accordion-title>\r\n                    <clr-accordion-content *clrIfExpanded>\r\n                        <form [formGroup]=\"surchargeForm\" (submit)=\"addSurcharge(surchargeForm.value)\">\r\n                            <vdr-form-field [label]=\"'common.description' | translate\" for=\"description\"\r\n                                ><input id=\"description\" type=\"text\" formControlName=\"description\"\r\n                            /></vdr-form-field>\r\n                            <vdr-form-field [label]=\"'order.product-sku' | translate\" for=\"sku\"\r\n                                ><input id=\"sku\" type=\"text\" formControlName=\"sku\"\r\n                            /></vdr-form-field>\r\n                            <vdr-form-field [label]=\"'common.price' | translate\" for=\"price\">\r\n                                <vdr-currency-input\r\n                                    [currencyCode]=\"order.currencyCode\"\r\n                                    id=\"price\"\r\n                                    formControlName=\"price\"\r\n                                ></vdr-currency-input>\r\n                            </vdr-form-field>\r\n                            <vdr-form-field\r\n                                [label]=\"\r\n                                    'catalog.price-includes-tax-at'\r\n                                        | translate: { rate: surchargeForm.get('taxRate')?.value }\r\n                                \"\r\n                                for=\"priceIncludesTax\"\r\n                                ><input\r\n                                    id=\"priceIncludesTax\"\r\n                                    type=\"checkbox\"\r\n                                    clrCheckbox\r\n                                    formControlName=\"priceIncludesTax\"\r\n                            /></vdr-form-field>\r\n                            <vdr-form-field [label]=\"'order.tax-rate' | translate\" for=\"taxRate\">\r\n                                <vdr-affixed-input suffix=\"%\"\r\n                                    ><input\r\n                                        id=\"taxRate\"\r\n                                        type=\"number\"\r\n                                        min=\"0\"\r\n                                        max=\"100\"\r\n                                        formControlName=\"taxRate\"\r\n                                /></vdr-affixed-input>\r\n                            </vdr-form-field>\r\n                            <vdr-form-field [label]=\"'order.tax-description' | translate\" for=\"taxDescription\"\r\n                                ><input id=\"taxDescription\" type=\"text\" formControlName=\"taxDescription\"\r\n                            /></vdr-form-field>\r\n                            <button\r\n                                class=\"btn btn-secondary\"\r\n                                [disabled]=\"\r\n                                    surchargeForm.invalid ||\r\n                                    surchargeForm.pristine ||\r\n                                    surchargeForm.get('price')?.value === 0\r\n                                \"\r\n                            >\r\n                                {{ 'order.add-surcharge' | translate }}\r\n                            </button>\r\n                        </form>\r\n                    </clr-accordion-content>\r\n                </clr-accordion-panel>\r\n                <clr-accordion-panel>\r\n                    <clr-accordion-title>{{ 'order.edit-shipping-address' | translate }}</clr-accordion-title>\r\n                    <clr-accordion-content *clrIfExpanded>\r\n                        <vdr-address-form\r\n                            [formGroup]=\"shippingAddressForm\"\r\n                            [availableCountries]=\"availableCountries$ | async\"\r\n                            [customFields]=\"addressCustomFields\"\r\n                        ></vdr-address-form>\r\n                    </clr-accordion-content>\r\n                </clr-accordion-panel>\r\n                <clr-accordion-panel>\r\n                    <clr-accordion-title>{{ 'order.edit-billing-address' | translate }}</clr-accordion-title>\r\n                    <clr-accordion-content *clrIfExpanded>\r\n                        <vdr-address-form\r\n                            [formGroup]=\"billingAddressForm\"\r\n                            [availableCountries]=\"availableCountries$ | async\"\r\n                            [customFields]=\"addressCustomFields\"\r\n                        ></vdr-address-form>\r\n                    </clr-accordion-content>\r\n                </clr-accordion-panel>\r\n            </clr-accordion>\r\n        </div>\r\n        <div class=\"clr-col-lg-4 order-cards\">\r\n            <div class=\"card\">\r\n                <div class=\"card-header\">\r\n                    {{ 'order.modification-summary' | translate }}\r\n                </div>\r\n                <div class=\"card-block\">\r\n                    <ul>\r\n                        <li *ngIf=\"modifyOrderInput.addItems?.length\">\r\n                            {{\r\n                                'order.modification-adding-items'\r\n                                    | translate: { count: modifyOrderInput.addItems?.length }\r\n                            }}\r\n                        </li>\r\n                        <li *ngIf=\"modifyOrderInput.adjustOrderLines?.length\">\r\n                            {{\r\n                                'order.modification-adjusting-lines'\r\n                                    | translate: { count: modifyOrderInput.adjustOrderLines?.length }\r\n                            }}\r\n                        </li>\r\n                        <li *ngIf=\"modifyOrderInput.surcharges?.length\">\r\n                            {{\r\n                                'order.modification-adding-surcharges'\r\n                                    | translate: { count: modifyOrderInput.surcharges?.length }\r\n                            }}\r\n                        </li>\r\n                        <li *ngIf=\"shippingAddressForm.dirty\">\r\n                            {{ 'order.modification-updating-shipping-address' | translate }}\r\n                        </li>\r\n                        <li *ngIf=\"billingAddressForm.dirty\">\r\n                            {{ 'order.modification-updating-billing-address' | translate }}\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n                <div class=\"card-block\">\r\n                    <label class=\"clr-control-label\">{{ 'order.note' | translate }}</label>\r\n                    <textarea [(ngModel)]=\"note\" name=\"note\" clrTextarea required></textarea>\r\n                    <clr-checkbox-wrapper class=\"\">\r\n                        <input type=\"checkbox\" clrCheckbox [(ngModel)]=\"recalculateShipping\" />\r\n                        <label>{{ 'order.modification-recalculate-shipping' | translate }}</label>\r\n                    </clr-checkbox-wrapper>\r\n                </div>\r\n                <div class=\"card-footer\">\r\n                    <button\r\n                        class=\"btn btn-primary\"\r\n                        [disabled]=\"!canPreviewChanges()\"\r\n                        (click)=\"previewAndModify(order)\"\r\n                    >\r\n                        {{ 'order.preview-changes' | translate }}\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n",
+                template: "<vdr-action-bar *ngIf=\"entity$ | async as order\">\r\n    <vdr-ab-left>\r\n        <div class=\"flex clr-align-items-center\">\r\n            <vdr-entity-info [entity]=\"entity$ | async\"></vdr-entity-info>\r\n            <vdr-order-state-label [state]=\"order.state\"></vdr-order-state-label>\r\n        </div>\r\n    </vdr-ab-left>\r\n\r\n    <vdr-ab-right>\r\n        <button class=\"btn btn-secondary\" (click)=\"transitionToPriorState(order)\">\r\n            {{ 'order.cancel-modification' | translate }}\r\n        </button>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<div *ngIf=\"entity$ | async as order\">\r\n    <div class=\"clr-row\">\r\n        <div class=\"clr-col-lg-8\">\r\n            <table class=\"order-table table\">\r\n                <thead>\r\n                    <tr>\r\n                        <th></th>\r\n                        <th>{{ 'order.product-name' | translate }}</th>\r\n                        <th>{{ 'order.product-sku' | translate }}</th>\r\n                        <th>{{ 'order.unit-price' | translate }}</th>\r\n                        <th>{{ 'order.quantity' | translate }}</th>\r\n                        <th *ngIf=\"orderLineCustomFields.length\">{{ 'common.custom-fields' | translate }}</th>\r\n                        <th>{{ 'order.total' | translate }}</th>\r\n                    </tr>\r\n                </thead>\r\n                <tbody>\r\n                    <tr\r\n                        *ngFor=\"let line of order.lines; let i = index\"\r\n                        class=\"order-line\"\r\n                        [class.is-cancelled]=\"line.quantity === 0\"\r\n                        [class.modified]=\"isLineModified(line)\"\r\n                    >\r\n                        <td class=\"align-middle thumb\">\r\n                            <img\r\n                                *ngIf=\"line.featuredAsset\"\r\n                                [src]=\"line.featuredAsset | assetPreview: 'tiny'\"\r\n                            />\r\n                        </td>\r\n                        <td class=\"align-middle name\">{{ line.productVariant.name }}</td>\r\n                        <td class=\"align-middle sku\">{{ line.productVariant.sku }}</td>\r\n                        <td class=\"align-middle unit-price\">\r\n                            {{ line.unitPriceWithTax | localeCurrency: order.currencyCode }}\r\n                            <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                {{ line.unitPrice | localeCurrency: order.currencyCode }}\r\n                            </div>\r\n                        </td>\r\n                        <td class=\"align-middle quantity\">\r\n                            <input\r\n                                type=\"number\"\r\n                                min=\"0\"\r\n                                [value]=\"line.quantity\"\r\n                                (input)=\"updateLineQuantity(line, $event.target.value)\"\r\n                            />\r\n                            <vdr-line-refunds [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\r\n                            <vdr-line-fulfillment\r\n                                [line]=\"line\"\r\n                                [orderState]=\"order.state\"\r\n                            ></vdr-line-fulfillment>\r\n                        </td>\r\n                        <td *ngIf=\"orderLineCustomFields.length\" class=\"order-line-custom-field align-middle\">\r\n                            <vdr-tabbed-custom-fields\r\n                                entityName=\"OrderLine\"\r\n                                [customFields]=\"orderLineCustomFields\"\r\n                                [customFieldsFormGroup]=\"orderLineCustomFieldsFormArray.get([i])\"\r\n                                [compact]=\"true\"\r\n                            ></vdr-tabbed-custom-fields>\r\n                        </td>\r\n                        <td class=\"align-middle total\">\r\n                            {{ line.linePriceWithTax | localeCurrency: order.currencyCode }}\r\n                            <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                {{ line.linePrice | localeCurrency: order.currencyCode }}\r\n                            </div>\r\n                        </td>\r\n                    </tr>\r\n                    <tr\r\n                        *ngFor=\"let addedLine of addedLines; trackBy: trackByProductVariantId; let i = index\"\r\n                        class=\"modified\"\r\n                    >\r\n                        <td class=\"align-middle thumb\">\r\n                            <img\r\n                                *ngIf=\"addedLine.productAsset\"\r\n                                [src]=\"addedLine.productAsset | assetPreview: 'tiny'\"\r\n                            />\r\n                        </td>\r\n                        <td class=\"align-middle name\">{{ addedLine.productVariantName }}</td>\r\n                        <td class=\"align-middle sku\">{{ addedLine.sku }}</td>\r\n                        <td class=\"align-middle unit-price\">\r\n                            {{ addedLine.priceWithTax | localeCurrency: order.currencyCode }}\r\n                            <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                {{ addedLine.price | localeCurrency: order.currencyCode }}\r\n                            </div>\r\n                        </td>\r\n                        <td class=\"align-middle quantity\">\r\n                            <input\r\n                                type=\"number\"\r\n                                min=\"0\"\r\n                                [value]=\"addedLine.quantity\"\r\n                                (input)=\"updateAddedItemQuantity(addedLine, $event.target.value)\"\r\n                            />\r\n                            <button class=\"icon-button\" (click)=\"removeAddedItem(i)\">\r\n                                <clr-icon shape=\"trash\"></clr-icon>\r\n                            </button>\r\n                        </td>\r\n                        <td *ngIf=\"orderLineCustomFields.length\" class=\"order-line-custom-field align-middle\">\r\n                            <ng-container *ngFor=\"let customField of orderLineCustomFields\">\r\n                                <vdr-custom-field-control\r\n                                    [customField]=\"customField\"\r\n                                    [customFieldsFormGroup]=\"addItemCustomFieldsFormArray.get([i])\"\r\n                                    entityName=\"OrderLine\"\r\n                                    [compact]=\"true\"\r\n                                ></vdr-custom-field-control>\r\n                            </ng-container>\r\n                        </td>\r\n                        <td class=\"align-middle total\">\r\n                            {{\r\n                                (addedLine.priceWithTax * addedLine.quantity) / 100\r\n                                    | currency: order.currencyCode\r\n                            }}\r\n                            <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                {{\r\n                                    (addedLine.price * addedLine.quantity) / 100\r\n                                        | currency: order.currencyCode\r\n                                }}\r\n                            </div>\r\n                        </td>\r\n                    </tr>\r\n                    <tr class=\"surcharge\" *ngFor=\"let surcharge of order.surcharges\">\r\n                        <td class=\"align-middle name left\" colspan=\"2\">{{ surcharge.description }}</td>\r\n                        <td class=\"align-middle sku\">{{ surcharge.sku }}</td>\r\n                        <td class=\"align-middle\"></td>\r\n                        <td></td>\r\n                        <td *ngIf=\"orderLineCustomFields.length\"></td>\r\n                        <td class=\"align-middle total\">\r\n                            {{ surcharge.priceWithTax | localeCurrency: order.currencyCode }}\r\n                            <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                {{ surcharge.price | localeCurrency: order.currencyCode }}\r\n                            </div>\r\n                        </td>\r\n                    </tr>\r\n                    <tr\r\n                        class=\"surcharge modified\"\r\n                        *ngFor=\"let surcharge of modifyOrderInput.surcharges; let i = index\"\r\n                    >\r\n                        <td class=\"align-middle name left\" colspan=\"2\">\r\n                            {{ surcharge.description }}\r\n                            <button class=\"icon-button\" (click)=\"removeSurcharge(i)\">\r\n                                <clr-icon shape=\"trash\"></clr-icon>\r\n                            </button>\r\n                        </td>\r\n                        <td class=\"align-middle sku\">{{ surcharge.sku }}</td>\r\n                        <td class=\"align-middle\"></td>\r\n                        <td></td>\r\n                        <td *ngIf=\"orderLineCustomFields.length\"></td>\r\n                        <td class=\"align-middle total\">\r\n                            <ng-container *ngIf=\"getSurchargePrices(surcharge) as surchargePrice\">\r\n                                {{ surchargePrice.priceWithTax | localeCurrency: order.currencyCode }}\r\n                                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                    {{ surchargePrice.price | localeCurrency: order.currencyCode }}\r\n                                </div>\r\n                            </ng-container>\r\n                        </td>\r\n                    </tr>\r\n                    <tr class=\"shipping\">\r\n                        <td class=\"left clr-align-middle\">{{ 'order.shipping' | translate }}</td>\r\n                        <td class=\"clr-align-middle\">{{ order.shippingLines[0]?.shippingMethod?.name }}</td>\r\n                        <td colspan=\"3\"></td>\r\n                        <td *ngIf=\"orderLineCustomFields.length\"></td>\r\n                        <td class=\"clr-align-middle\">\r\n                            {{ order.shippingWithTax | localeCurrency: order.currencyCode }}\r\n                            <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                {{ order.shipping | localeCurrency: order.currencyCode }}\r\n                            </div>\r\n                        </td>\r\n                    </tr>\r\n                </tbody>\r\n            </table>\r\n\r\n            <h4 class=\"mb2\">{{ 'order.modifications' | translate }}</h4>\r\n            <clr-accordion>\r\n                <clr-accordion-panel>\r\n                    <clr-accordion-title>{{ 'order.add-item-to-order' | translate }}</clr-accordion-title>\r\n                    <clr-accordion-content *clrIfExpanded>\r\n                        <vdr-product-selector class=\"mb4\" (productSelected)=\"addItemSelectedVariant = $event\">\r\n                        </vdr-product-selector>\r\n                        <div *ngIf=\"addItemSelectedVariant\" class=\"flex mb4\">\r\n                            <img\r\n                                *ngIf=\"addItemSelectedVariant.productAsset as asset\"\r\n                                [src]=\"asset | assetPreview: 'tiny'\"\r\n                                class=\"mr4\"\r\n                            />\r\n                            <div>\r\n                                <strong class=\"mr4\">{{ addItemSelectedVariant.productVariantName }}</strong>\r\n                                <small>{{ addItemSelectedVariant.sku }}</small>\r\n                                <div>\r\n                                    {{\r\n                                        getSelectedItemPrice(addItemSelectedVariant)\r\n                                            | localeCurrency: order.currencyCode\r\n                                    }}\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <ng-container *ngFor=\"let customField of orderLineCustomFields\">\r\n                            <vdr-custom-field-control\r\n                                [readonly]=\"!addItemSelectedVariant\"\r\n                                [customField]=\"customField\"\r\n                                [customFieldsFormGroup]=\"addItemCustomFieldsForm\"\r\n                                entityName=\"OrderLine\"\r\n                                [compact]=\"true\"\r\n                            ></vdr-custom-field-control>\r\n                        </ng-container>\r\n                        <button\r\n                            class=\"btn btn-secondary\"\r\n                            [disabled]=\"!addItemSelectedVariant || addItemCustomFieldsForm.invalid\"\r\n                            (click)=\"addItemToOrder(addItemSelectedVariant)\"\r\n                        >\r\n                            {{ 'order.add-item-to-order' | translate }}\r\n                        </button>\r\n                    </clr-accordion-content>\r\n                </clr-accordion-panel>\r\n                <clr-accordion-panel>\r\n                    <clr-accordion-title>{{ 'order.set-coupon-codes' | translate }}</clr-accordion-title>\r\n                    <clr-accordion-content *clrIfExpanded>\r\n                        <vdr-coupon-code-selector\r\n                            [control]=\"couponCodesControl\"\r\n                        ></vdr-coupon-code-selector>\r\n                    </clr-accordion-content>\r\n                </clr-accordion-panel>\r\n\r\n                <clr-accordion-panel>\r\n                    <clr-accordion-title>{{ 'order.add-surcharge' | translate }}</clr-accordion-title>\r\n                    <clr-accordion-content *clrIfExpanded>\r\n                        <form [formGroup]=\"surchargeForm\" (submit)=\"addSurcharge(surchargeForm.value)\">\r\n                            <vdr-form-field [label]=\"'common.description' | translate\" for=\"description\"\r\n                                ><input id=\"description\" type=\"text\" formControlName=\"description\"\r\n                            /></vdr-form-field>\r\n                            <vdr-form-field [label]=\"'order.product-sku' | translate\" for=\"sku\"\r\n                                ><input id=\"sku\" type=\"text\" formControlName=\"sku\"\r\n                            /></vdr-form-field>\r\n                            <vdr-form-field [label]=\"'common.price' | translate\" for=\"price\">\r\n                                <vdr-currency-input\r\n                                    [currencyCode]=\"order.currencyCode\"\r\n                                    id=\"price\"\r\n                                    formControlName=\"price\"\r\n                                ></vdr-currency-input>\r\n                            </vdr-form-field>\r\n                            <vdr-form-field\r\n                                [label]=\"\r\n                                    'catalog.price-includes-tax-at'\r\n                                        | translate: { rate: surchargeForm.get('taxRate')?.value }\r\n                                \"\r\n                                for=\"priceIncludesTax\"\r\n                                ><input\r\n                                    id=\"priceIncludesTax\"\r\n                                    type=\"checkbox\"\r\n                                    clrCheckbox\r\n                                    formControlName=\"priceIncludesTax\"\r\n                            /></vdr-form-field>\r\n                            <vdr-form-field [label]=\"'order.tax-rate' | translate\" for=\"taxRate\">\r\n                                <vdr-affixed-input suffix=\"%\"\r\n                                    ><input\r\n                                        id=\"taxRate\"\r\n                                        type=\"number\"\r\n                                        min=\"0\"\r\n                                        max=\"100\"\r\n                                        formControlName=\"taxRate\"\r\n                                /></vdr-affixed-input>\r\n                            </vdr-form-field>\r\n                            <vdr-form-field [label]=\"'order.tax-description' | translate\" for=\"taxDescription\"\r\n                                ><input id=\"taxDescription\" type=\"text\" formControlName=\"taxDescription\"\r\n                            /></vdr-form-field>\r\n                            <button\r\n                                class=\"btn btn-secondary\"\r\n                                [disabled]=\"\r\n                                    surchargeForm.invalid ||\r\n                                    surchargeForm.pristine ||\r\n                                    surchargeForm.get('price')?.value === 0\r\n                                \"\r\n                            >\r\n                                {{ 'order.add-surcharge' | translate }}\r\n                            </button>\r\n                        </form>\r\n                    </clr-accordion-content>\r\n                </clr-accordion-panel>\r\n                <clr-accordion-panel>\r\n                    <clr-accordion-title>{{ 'order.edit-shipping-address' | translate }}</clr-accordion-title>\r\n                    <clr-accordion-content *clrIfExpanded>\r\n                        <vdr-address-form\r\n                            [formGroup]=\"shippingAddressForm\"\r\n                            [availableCountries]=\"availableCountries$ | async\"\r\n                            [customFields]=\"addressCustomFields\"\r\n                        ></vdr-address-form>\r\n                    </clr-accordion-content>\r\n                </clr-accordion-panel>\r\n                <clr-accordion-panel>\r\n                    <clr-accordion-title>{{ 'order.edit-billing-address' | translate }}</clr-accordion-title>\r\n                    <clr-accordion-content *clrIfExpanded>\r\n                        <vdr-address-form\r\n                            [formGroup]=\"billingAddressForm\"\r\n                            [availableCountries]=\"availableCountries$ | async\"\r\n                            [customFields]=\"addressCustomFields\"\r\n                        ></vdr-address-form>\r\n                    </clr-accordion-content>\r\n                </clr-accordion-panel>\r\n            </clr-accordion>\r\n        </div>\r\n        <div class=\"clr-col-lg-4 order-cards\">\r\n            <div class=\"card\">\r\n                <div class=\"card-header\">\r\n                    {{ 'order.modification-summary' | translate }}\r\n                </div>\r\n                <div class=\"card-block\">\r\n                    <ul>\r\n                        <li *ngIf=\"modifyOrderInput.addItems?.length\">\r\n                            {{\r\n                                'order.modification-adding-items'\r\n                                    | translate: { count: modifyOrderInput.addItems?.length }\r\n                            }}\r\n                        </li>\r\n                        <li *ngIf=\"modifyOrderInput.adjustOrderLines?.length\">\r\n                            {{\r\n                                'order.modification-adjusting-lines'\r\n                                    | translate: { count: modifyOrderInput.adjustOrderLines?.length }\r\n                            }}\r\n                        </li>\r\n                        <li *ngIf=\"modifyOrderInput.surcharges?.length\">\r\n                            {{\r\n                                'order.modification-adding-surcharges'\r\n                                    | translate: { count: modifyOrderInput.surcharges?.length }\r\n                            }}\r\n                        </li>\r\n                        <li *ngIf=\"shippingAddressForm.dirty\">\r\n                            {{ 'order.modification-updating-shipping-address' | translate }}\r\n                        </li>\r\n                        <li *ngIf=\"billingAddressForm.dirty\">\r\n                            {{ 'order.modification-updating-billing-address' | translate }}\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n                <div class=\"card-block\">\r\n                    <label class=\"clr-control-label\">{{ 'order.note' | translate }}</label>\r\n                    <textarea [(ngModel)]=\"note\" name=\"note\" clrTextarea required></textarea>\r\n                    <clr-checkbox-wrapper class=\"\">\r\n                        <input type=\"checkbox\" clrCheckbox [(ngModel)]=\"recalculateShipping\" />\r\n                        <label>{{ 'order.modification-recalculate-shipping' | translate }}</label>\r\n                    </clr-checkbox-wrapper>\r\n                </div>\r\n                <div class=\"card-footer\">\r\n                    <button\r\n                        class=\"btn btn-primary\"\r\n                        [disabled]=\"!canPreviewChanges()\"\r\n                        (click)=\"previewAndModify(order)\"\r\n                    >\r\n                        {{ 'order.preview-changes' | translate }}\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [".order-table .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}.order-table .sub-total td{border-top:1px dashed var(--color-component-border-200)}.order-table .total td{font-weight:bold;border-top:1px dashed var(--color-component-border-200)}.order-table td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}.order-table .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 = () => [
@@ -1942,6 +2392,7 @@ OrderHistoryComponent.propDecorators = {
 
 class OrderListComponent extends BaseListComponent {
     constructor(serverConfigService, dataService, localStorageService, router, route) {
+        var _a;
         super(router, route);
         this.serverConfigService = serverConfigService;
         this.dataService = dataService;
@@ -1956,7 +2407,7 @@ class OrderListComponent extends BaseListComponent {
                 label: marker('order.filter-preset-open'),
                 config: {
                     active: false,
-                    states: this.orderStates.filter(s => s !== 'Delivered' && s !== 'Cancelled' && s !== 'Shipped'),
+                    states: this.orderStates.filter(s => s !== 'Delivered' && s !== 'Cancelled' && s !== 'Shipped' && s !== 'Draft'),
                 },
             },
             {
@@ -1982,7 +2433,16 @@ class OrderListComponent extends BaseListComponent {
                     active: true,
                 },
             },
+            {
+                name: 'draft',
+                label: marker('order.filter-preset-draft'),
+                config: {
+                    active: false,
+                    states: ['Draft'],
+                },
+            },
         ];
+        this.canCreateDraftOrder = false;
         super.setQueryFn(
         // tslint:disable-next-line:no-shadowed-variable
         (take, skip) => this.dataService.order.getOrders({ take, skip }).refetchOnChannelChange(), data => data.orders, 
@@ -1992,6 +2452,12 @@ class OrderListComponent extends BaseListComponent {
         if (lastFilters) {
             this.setQueryParam(lastFilters, { replaceUrl: true });
         }
+        this.canCreateDraftOrder = !!((_a = this.serverConfigService
+            .getOrderProcessStates()
+            .find(state => state.name === 'Created')) === null || _a === void 0 ? void 0 : _a.to.includes('Draft'));
+        if (!this.canCreateDraftOrder) {
+            this.filterPresets = this.filterPresets.filter(p => p.name !== 'draft');
+        }
     }
     ngOnInit() {
         var _a;
@@ -2115,9 +2581,9 @@ class OrderListComponent extends BaseListComponent {
 OrderListComponent.decorators = [
     { type: Component, args: [{
                 selector: 'vdr-order-list',
-                template: "<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <div class=\"search-form\">\r\n            <div class=\"btn-group btn-outline-primary\" *ngIf=\"activePreset$ | async as activePreset\">\r\n                <button\r\n                    class=\"btn\"\r\n                    *ngFor=\"let preset of filterPresets\"\r\n                    [class.btn-primary]=\"activePreset === preset.name\"\r\n                    (click)=\"selectFilterPreset(preset.name)\"\r\n                >\r\n                    {{ preset.label | translate }}\r\n                </button>\r\n                <button\r\n                    class=\"btn\"\r\n                    [class.btn-primary]=\"activePreset === 'custom'\"\r\n                    (click)=\"selectFilterPreset('custom')\"\r\n                >\r\n                    {{ 'order.filter-custom' | translate }}\r\n                    <clr-icon shape=\"angle down\"></clr-icon>\r\n                </button>\r\n            </div>\r\n            <input\r\n                type=\"text\"\r\n                name=\"searchTerm\"\r\n                [formControl]=\"searchControl\"\r\n                [placeholder]=\"'order.search-by-order-filters' | translate\"\r\n                class=\"search-input\"\r\n            />\r\n        </div>\r\n        <div class=\"custom-filters\" [class.expanded]=\"(activePreset$ | async) === 'custom'\">\r\n            <form [formGroup]=\"customFilterForm\">\r\n                <div class=\"flex align-center\">\r\n                    <ng-select\r\n                        [items]=\"orderStates\"\r\n                        appendTo=\"body\"\r\n                        [addTag]=\"false\"\r\n                        [multiple]=\"true\"\r\n                        formControlName=\"states\"\r\n                        [placeholder]=\"'state.all-orders' | translate\"\r\n                        [clearable]=\"true\"\r\n                        [searchable]=\"false\"\r\n                    >\r\n                        <ng-template ng-option-tmp let-item=\"item\">{{ item | stateI18nToken | translate }}</ng-template>\r\n                        <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n                            <span class=\"ng-value-label\"> {{ item | stateI18nToken | translate }}</span>\r\n                            <span class=\"ng-value-icon right\" (click)=\"clear(item)\" aria-hidden=\"true\">\u00D7</span>\r\n                        </ng-template>\r\n                    </ng-select>\r\n                    <button\r\n                        class=\"btn btn-secondary\"\r\n                        [disabled]=\"customFilterForm.pristine\"\r\n                        (click)=\"applyCustomFilters()\"\r\n                    >\r\n                        {{ 'order.apply-filters' | translate }}\r\n                        <clr-icon shape=\"filter\"></clr-icon>\r\n                    </button>\r\n                </div>\r\n                <div class=\"flex\">\r\n                    <div>\r\n                        <label>{{ 'order.placed-at-start' | translate }}</label>\r\n                        <vdr-datetime-picker formControlName=\"placedAtStart\"></vdr-datetime-picker>\r\n                    </div>\r\n                    <div>\r\n                        <label>{{ 'order.placed-at-end' | translate }}</label>\r\n                        <vdr-datetime-picker formControlName=\"placedAtEnd\"></vdr-datetime-picker>\r\n                    </div>\r\n                </div>\r\n            </form>\r\n        </div>\r\n    </vdr-ab-left>\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"order-list\"></vdr-action-bar-items>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<vdr-data-table\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n>\r\n    <vdr-dt-column>{{ 'common.code' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'order.customer' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'order.state' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'order.total' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'common.updated-at' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'order.placed-at' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'order.shipping' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column></vdr-dt-column>\r\n    <ng-template let-order=\"item\">\r\n        <td class=\"left align-middle\">{{ order.code }}</td>\r\n        <td class=\"left align-middle\">\r\n            <vdr-customer-label [customer]=\"order.customer\"></vdr-customer-label>\r\n        </td>\r\n        <td class=\"left align-middle\">\r\n            <vdr-order-state-label [state]=\"order.state\"></vdr-order-state-label>\r\n        </td>\r\n        <td class=\"left align-middle\">{{ order.totalWithTax | localeCurrency: order.currencyCode }}</td>\r\n        <td class=\"left align-middle\">{{ order.updatedAt | timeAgo }}</td>\r\n        <td class=\"left align-middle\">{{ order.orderPlacedAt | localeDate: 'medium' }}</td>\r\n        <td class=\"left align-middle\">{{ getShippingNames(order) }}</td>\r\n        <td class=\"right align-middle\">\r\n            <vdr-table-row-action\r\n                iconShape=\"shopping-cart\"\r\n                [label]=\"'common.open' | translate\"\r\n                [linkTo]=\"order.state === 'Modifying' ? ['./', order.id, 'modify'] : ['./', order.id]\"\r\n            ></vdr-table-row-action>\r\n        </td>\r\n    </ng-template>\r\n</vdr-data-table>\r\n",
+                template: "<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <div class=\"search-form\">\r\n            <div class=\"filter-presets btn-group btn-outline-primary\" *ngIf=\"activePreset$ | async as activePreset\">\r\n                <button\r\n                    class=\"btn\"\r\n                    *ngFor=\"let preset of filterPresets\"\r\n                    [class.btn-primary]=\"activePreset === preset.name\"\r\n                    (click)=\"selectFilterPreset(preset.name)\"\r\n                >\r\n                    {{ preset.label | translate }}\r\n                </button>\r\n                <button\r\n                    class=\"btn\"\r\n                    [class.btn-primary]=\"activePreset === 'custom'\"\r\n                    (click)=\"selectFilterPreset('custom')\"\r\n                >\r\n                    {{ 'order.filter-custom' | translate }}\r\n                    <clr-icon shape=\"angle down\"></clr-icon>\r\n                </button>\r\n            </div>\r\n            <input\r\n                type=\"text\"\r\n                name=\"searchTerm\"\r\n                [formControl]=\"searchControl\"\r\n                [placeholder]=\"'order.search-by-order-filters' | translate\"\r\n                class=\"search-input\"\r\n            />\r\n        </div>\r\n        <div class=\"custom-filters\" [class.expanded]=\"(activePreset$ | async) === 'custom'\">\r\n            <form [formGroup]=\"customFilterForm\">\r\n                <div class=\"flex align-center\">\r\n                    <ng-select\r\n                        [items]=\"orderStates\"\r\n                        appendTo=\"body\"\r\n                        [addTag]=\"false\"\r\n                        [multiple]=\"true\"\r\n                        formControlName=\"states\"\r\n                        [placeholder]=\"'state.all-orders' | translate\"\r\n                        [clearable]=\"true\"\r\n                        [searchable]=\"false\"\r\n                    >\r\n                        <ng-template ng-option-tmp let-item=\"item\">{{\r\n                            item | stateI18nToken | translate\r\n                        }}</ng-template>\r\n                        <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n                            <span class=\"ng-value-label\"> {{ item | stateI18nToken | translate }}</span>\r\n                            <span class=\"ng-value-icon right\" (click)=\"clear(item)\" aria-hidden=\"true\"\r\n                                >\u00D7</span\r\n                            >\r\n                        </ng-template>\r\n                    </ng-select>\r\n                    <button\r\n                        class=\"btn btn-secondary\"\r\n                        [disabled]=\"customFilterForm.pristine\"\r\n                        (click)=\"applyCustomFilters()\"\r\n                    >\r\n                        {{ 'order.apply-filters' | translate }}\r\n                        <clr-icon shape=\"filter\"></clr-icon>\r\n                    </button>\r\n                </div>\r\n                <div class=\"flex\">\r\n                    <div>\r\n                        <label>{{ 'order.placed-at-start' | translate }}</label>\r\n                        <vdr-datetime-picker formControlName=\"placedAtStart\"></vdr-datetime-picker>\r\n                    </div>\r\n                    <div>\r\n                        <label>{{ 'order.placed-at-end' | translate }}</label>\r\n                        <vdr-datetime-picker formControlName=\"placedAtEnd\"></vdr-datetime-picker>\r\n                    </div>\r\n                </div>\r\n            </form>\r\n        </div>\r\n    </vdr-ab-left>\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"order-list\"></vdr-action-bar-items>\r\n        <ng-container *ngIf=\"canCreateDraftOrder\">\r\n            <a class=\"btn btn-primary mt1\" *vdrIfPermissions=\"['CreateOrder']\" [routerLink]=\"['./draft/create']\">\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'catalog.create-draft-order' | translate }}\r\n            </a>\r\n        </ng-container>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<vdr-data-table\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n>\r\n    <vdr-dt-column>{{ 'common.code' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'order.customer' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'order.state' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'order.total' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'common.updated-at' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'order.placed-at' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'order.shipping' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column></vdr-dt-column>\r\n    <ng-template let-order=\"item\">\r\n        <td class=\"left align-middle\">{{ order.code }}</td>\r\n        <td class=\"left align-middle\">\r\n            <vdr-customer-label [customer]=\"order.customer\"></vdr-customer-label>\r\n        </td>\r\n        <td class=\"left align-middle\">\r\n            <vdr-order-state-label [state]=\"order.state\"></vdr-order-state-label>\r\n        </td>\r\n        <td class=\"left align-middle\">{{ order.totalWithTax | localeCurrency: order.currencyCode }}</td>\r\n        <td class=\"left align-middle\">{{ order.updatedAt | timeAgo }}</td>\r\n        <td class=\"left align-middle\">{{ order.orderPlacedAt | localeDate: 'medium' }}</td>\r\n        <td class=\"left align-middle\">{{ getShippingNames(order) }}</td>\r\n        <td class=\"right align-middle\">\r\n            <vdr-table-row-action\r\n                iconShape=\"shopping-cart\"\r\n                [label]=\"'common.open' | translate\"\r\n                [linkTo]=\"\r\n                    order.state === 'Modifying'\r\n                        ? ['./', order.id, 'modify']\r\n                        : order.state === 'Draft'\r\n                        ? ['./draft', order.id]\r\n                        : ['./', order.id]\r\n                \"\r\n            ></vdr-table-row-action>\r\n        </td>\r\n    </ng-template>\r\n</vdr-data-table>\r\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [".search-form{display:flex;flex-direction:column;align-items:baseline;width:100%;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 = () => [
@@ -2338,6 +2804,9 @@ OrderProcessGraphComponent.propDecorators = {
 
 class OrderTableComponent {
     constructor() {
+        this.isDraft = false;
+        this.adjust = new EventEmitter();
+        this.remove = new EventEmitter();
         this.orderLineCustomFieldsVisible = false;
         this.customFieldsForLine = {};
     }
@@ -2351,6 +2820,11 @@ class OrderTableComponent {
         this.orderLineCustomFieldsVisible = this.orderLineCustomFields.length < 2;
         this.getLineCustomFields();
     }
+    draftInputBlur(line, quantity) {
+        if (line.quantity !== quantity) {
+            this.adjust.emit({ lineId: line.id, quantity });
+        }
+    }
     toggleOrderLineCustomFields() {
         this.orderLineCustomFieldsVisible = !this.orderLineCustomFieldsVisible;
     }
@@ -2399,14 +2873,17 @@ class OrderTableComponent {
 OrderTableComponent.decorators = [
     { type: Component, args: [{
                 selector: 'vdr-order-table',
-                template: "<table class=\"order-table table\">\r\n    <thead>\r\n        <tr>\r\n            <th></th>\r\n            <th>{{ 'order.product-name' | translate }}</th>\r\n            <th>{{ 'order.product-sku' | translate }}</th>\r\n            <th>{{ 'order.unit-price' | translate }}</th>\r\n            <th>{{ 'order.quantity' | translate }}</th>\r\n            <th>{{ 'order.total' | translate }}</th>\r\n        </tr>\r\n    </thead>\r\n    <tbody>\r\n        <ng-container *ngFor=\"let line of order.lines\">\r\n            <tr class=\"order-line\" [class.is-cancelled]=\"line.quantity === 0\">\r\n                <td class=\"align-middle thumb\">\r\n                    <img *ngIf=\"line.featuredAsset\" [src]=\"line.featuredAsset | assetPreview: 'tiny'\" />\r\n                </td>\r\n                <td class=\"align-middle name\">{{ line.productVariant.name }}</td>\r\n                <td class=\"align-middle sku\">{{ line.productVariant.sku }}</td>\r\n                <td class=\"align-middle unit-price\">\r\n                    {{ line.unitPriceWithTax | localeCurrency: order.currencyCode }}\r\n                    <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                        {{ line.unitPrice | localeCurrency: order.currencyCode }}\r\n                    </div>\r\n                </td>\r\n                <td class=\"align-middle quantity\">\r\n                    {{ line.quantity }}\r\n                    <vdr-line-refunds [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\r\n                    <vdr-line-fulfillment [line]=\"line\" [orderState]=\"order.state\"></vdr-line-fulfillment>\r\n                </td>\r\n                <td class=\"align-middle total\">\r\n                    {{ line.linePriceWithTax | localeCurrency: order.currencyCode }}\r\n                    <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                        {{ line.linePrice | localeCurrency: order.currencyCode }}\r\n                    </div>\r\n\r\n                    <ng-container *ngIf=\"getLineDiscounts(line) as discounts\">\r\n                        <vdr-dropdown *ngIf=\"discounts.length\">\r\n                            <div class=\"promotions-label\" vdrDropdownTrigger>\r\n                                {{ 'order.promotions-applied' | translate }}\r\n                            </div>\r\n                            <vdr-dropdown-menu>\r\n                                <div class=\"line-promotion\" *ngFor=\"let discount of discounts\">\r\n                                    <a class=\"promotion-name\" [routerLink]=\"getPromotionLink(discount)\">{{\r\n                                        discount.description\r\n                                    }}</a>\r\n                                    <div class=\"promotion-amount\">\r\n                                        {{ discount.amountWithTax | localeCurrency: order.currencyCode }}\r\n                                        <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                            {{ discount.amount | localeCurrency: order.currencyCode }}\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </vdr-dropdown-menu>\r\n                        </vdr-dropdown>\r\n                    </ng-container>\r\n                </td>\r\n            </tr>\r\n            <ng-container *ngIf=\"customFieldsForLine[line.id] as customFields\">\r\n                <tr *ngIf=\"customFields.length\">\r\n                    <td colspan=\"6\" class=\"custom-fields-row\">\r\n                        <div class=\"order-line-custom-fields\">\r\n                            <div class=\"custom-field\" *ngFor=\"let field of customFields\">\r\n                                <vdr-custom-field-control\r\n                                    [compact]=\"true\"\r\n                                    [readonly]=\"true\"\r\n                                    [customField]=\"field.config\"\r\n                                    [customFieldsFormGroup]=\"field.formGroup\"\r\n                                ></vdr-custom-field-control>\r\n                            </div>\r\n                        </div>\r\n                    </td>\r\n                </tr>\r\n            </ng-container>\r\n        </ng-container>\r\n        <tr class=\"surcharge\" *ngFor=\"let surcharge of order.surcharges\">\r\n            <td class=\"align-middle name left\" colspan=\"2\">{{ surcharge.description }}</td>\r\n            <td class=\"align-middle sku\">{{ surcharge.sku }}</td>\r\n            <td class=\"align-middle\" colspan=\"2\"></td>\r\n            <td class=\"align-middle total\">\r\n                {{ surcharge.priceWithTax | localeCurrency: order.currencyCode }}\r\n                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                    {{ surcharge.price | localeCurrency: order.currencyCode }}\r\n                </div>\r\n            </td>\r\n        </tr>\r\n        <ng-container *ngFor=\"let discount of order.discounts\">\r\n            <tr class=\"order-adjustment\" *ngIf=\"discount.type !== 'OTHER'\">\r\n            <td colspan=\"5\" class=\"left clr-align-middle\">\r\n                <a [routerLink]=\"getPromotionLink(discount)\">{{ discount.description }}</a>\r\n                <vdr-chip *ngIf=\"getCouponCodeForAdjustment(order, discount) as couponCode\">{{\r\n                    couponCode\r\n                }}</vdr-chip>\r\n            </td>\r\n            <td class=\"clr-align-middle\">\r\n                {{ discount.amountWithTax | localeCurrency: order.currencyCode }}\r\n                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                    {{ discount.amount | localeCurrency: order.currencyCode }}\r\n                </div>\r\n            </td>\r\n            </tr>\r\n        </ng-container>\r\n        <tr class=\"sub-total\">\r\n            <td class=\"left clr-align-middle\">{{ 'order.sub-total' | translate }}</td>\r\n            <td colspan=\"4\"></td>\r\n            <td class=\"clr-align-middle\">\r\n                {{ order.subTotalWithTax | localeCurrency: order.currencyCode }}\r\n                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                    {{ order.subTotal | localeCurrency: order.currencyCode }}\r\n                </div>\r\n            </td>\r\n        </tr>\r\n        <tr class=\"shipping\">\r\n            <td class=\"left clr-align-middle\">{{ 'order.shipping' | translate }}</td>\r\n            <td class=\"clr-align-middle\">{{ getShippingNames(order) }}</td>\r\n            <td colspan=\"3\"></td>\r\n            <td class=\"clr-align-middle\">\r\n                {{ order.shippingWithTax | localeCurrency: order.currencyCode }}\r\n                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                    {{ order.shipping | localeCurrency: order.currencyCode }}\r\n                </div>\r\n            </td>\r\n        </tr>\r\n        <tr class=\"total\">\r\n            <td class=\"left clr-align-middle\">{{ 'order.total' | translate }}</td>\r\n            <td colspan=\"4\"></td>\r\n            <td class=\"clr-align-middle\">\r\n                {{ order.totalWithTax | localeCurrency: order.currencyCode }}\r\n                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                    {{ order.total | localeCurrency: order.currencyCode }}\r\n                </div>\r\n            </td>\r\n        </tr>\r\n    </tbody>\r\n</table>\r\n",
+                template: "<table class=\"order-table table\">\r\n    <thead>\r\n        <tr>\r\n            <th></th>\r\n            <th>{{ 'order.product-name' | translate }}</th>\r\n            <th>{{ 'order.product-sku' | translate }}</th>\r\n            <th>{{ 'order.unit-price' | translate }}</th>\r\n            <th>{{ 'order.quantity' | translate }}</th>\r\n            <th>{{ 'order.total' | translate }}</th>\r\n        </tr>\r\n    </thead>\r\n    <tbody>\r\n        <ng-container *ngFor=\"let line of order.lines\">\r\n            <tr class=\"order-line\" [class.is-cancelled]=\"line.quantity === 0\">\r\n                <td class=\"align-middle thumb\">\r\n                    <img *ngIf=\"line.featuredAsset\" [src]=\"line.featuredAsset | assetPreview: 'tiny'\" />\r\n                </td>\r\n                <td class=\"align-middle name\">{{ line.productVariant.name }}</td>\r\n                <td class=\"align-middle sku\">{{ line.productVariant.sku }}</td>\r\n                <td class=\"align-middle unit-price\">\r\n                    {{ line.unitPriceWithTax | localeCurrency: order.currencyCode }}\r\n                    <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                        {{ line.unitPrice | localeCurrency: order.currencyCode }}\r\n                    </div>\r\n                </td>\r\n                <td class=\"align-middle quantity\">\r\n                    <ng-container *ngIf=\"!isDraft; else draft\">\r\n                        {{ line.quantity }}\r\n                    </ng-container>\r\n                    <ng-template #draft>\r\n                        <div class=\"flex\">\r\n                            <input\r\n                                class=\"draft-qty\"\r\n                                type=\"number\"\r\n                                min=\"0\"\r\n                                #qtyInput\r\n                                [value]=\"line.quantity\"\r\n                                (blur)=\"draftInputBlur(line, qtyInput.valueAsNumber)\"\r\n                            />\r\n                            <button class=\"icon-button\" (click)=\"remove.emit({ lineId: line.id })\">\r\n                                <clr-icon shape=\"trash\"></clr-icon>\r\n                            </button>\r\n                        </div>\r\n                    </ng-template>\r\n                    <vdr-line-refunds [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\r\n                    <vdr-line-fulfillment [line]=\"line\" [orderState]=\"order.state\"></vdr-line-fulfillment>\r\n                </td>\r\n                <td class=\"align-middle total\">\r\n                    {{ line.linePriceWithTax | localeCurrency: order.currencyCode }}\r\n                    <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                        {{ line.linePrice | localeCurrency: order.currencyCode }}\r\n                    </div>\r\n\r\n                    <ng-container *ngIf=\"getLineDiscounts(line) as discounts\">\r\n                        <vdr-dropdown *ngIf=\"discounts.length\">\r\n                            <div class=\"promotions-label\" vdrDropdownTrigger>\r\n                                {{ 'order.promotions-applied' | translate }}\r\n                            </div>\r\n                            <vdr-dropdown-menu>\r\n                                <div class=\"line-promotion\" *ngFor=\"let discount of discounts\">\r\n                                    <a class=\"promotion-name\" [routerLink]=\"getPromotionLink(discount)\">{{\r\n                                        discount.description\r\n                                    }}</a>\r\n                                    <div class=\"promotion-amount\">\r\n                                        {{ discount.amountWithTax | localeCurrency: order.currencyCode }}\r\n                                        <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                            {{ discount.amount | localeCurrency: order.currencyCode }}\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </vdr-dropdown-menu>\r\n                        </vdr-dropdown>\r\n                    </ng-container>\r\n                </td>\r\n            </tr>\r\n            <ng-container *ngIf=\"customFieldsForLine[line.id] as customFields\">\r\n                <tr *ngIf=\"customFields.length\">\r\n                    <td colspan=\"6\" class=\"custom-fields-row\">\r\n                        <div class=\"order-line-custom-fields\">\r\n                            <div class=\"custom-field\" *ngFor=\"let field of customFields\">\r\n                                <vdr-custom-field-control\r\n                                    [compact]=\"true\"\r\n                                    [readonly]=\"true\"\r\n                                    [customField]=\"field.config\"\r\n                                    [customFieldsFormGroup]=\"field.formGroup\"\r\n                                ></vdr-custom-field-control>\r\n                            </div>\r\n                        </div>\r\n                    </td>\r\n                </tr>\r\n            </ng-container>\r\n        </ng-container>\r\n        <tr class=\"surcharge\" *ngFor=\"let surcharge of order.surcharges\">\r\n            <td class=\"align-middle name left\" colspan=\"2\">{{ surcharge.description }}</td>\r\n            <td class=\"align-middle sku\">{{ surcharge.sku }}</td>\r\n            <td class=\"align-middle\" colspan=\"2\"></td>\r\n            <td class=\"align-middle total\">\r\n                {{ surcharge.priceWithTax | localeCurrency: order.currencyCode }}\r\n                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                    {{ surcharge.price | localeCurrency: order.currencyCode }}\r\n                </div>\r\n            </td>\r\n        </tr>\r\n        <ng-container *ngFor=\"let discount of order.discounts\">\r\n            <tr class=\"order-adjustment\" *ngIf=\"discount.type !== 'OTHER'\">\r\n                <td colspan=\"5\" class=\"left clr-align-middle\">\r\n                    <a [routerLink]=\"getPromotionLink(discount)\">{{ discount.description }}</a>\r\n                    <vdr-chip *ngIf=\"getCouponCodeForAdjustment(order, discount) as couponCode\">{{\r\n                        couponCode\r\n                    }}</vdr-chip>\r\n                </td>\r\n                <td class=\"clr-align-middle\">\r\n                    {{ discount.amountWithTax | localeCurrency: order.currencyCode }}\r\n                    <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                        {{ discount.amount | localeCurrency: order.currencyCode }}\r\n                    </div>\r\n                </td>\r\n            </tr>\r\n        </ng-container>\r\n        <tr class=\"sub-total\">\r\n            <td class=\"left clr-align-middle\">{{ 'order.sub-total' | translate }}</td>\r\n            <td colspan=\"4\"></td>\r\n            <td class=\"clr-align-middle\">\r\n                {{ order.subTotalWithTax | localeCurrency: order.currencyCode }}\r\n                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                    {{ order.subTotal | localeCurrency: order.currencyCode }}\r\n                </div>\r\n            </td>\r\n        </tr>\r\n        <tr class=\"shipping\">\r\n            <td class=\"left clr-align-middle\">{{ 'order.shipping' | translate }}</td>\r\n            <td class=\"clr-align-middle\">{{ getShippingNames(order) }}</td>\r\n            <td colspan=\"3\"></td>\r\n            <td class=\"clr-align-middle\">\r\n                {{ order.shippingWithTax | localeCurrency: order.currencyCode }}\r\n                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                    {{ order.shipping | localeCurrency: order.currencyCode }}\r\n                </div>\r\n            </td>\r\n        </tr>\r\n        <tr class=\"total\">\r\n            <td class=\"left clr-align-middle\">{{ 'order.total' | translate }}</td>\r\n            <td colspan=\"4\"></td>\r\n            <td class=\"clr-align-middle\">\r\n                {{ order.totalWithTax | localeCurrency: order.currencyCode }}\r\n                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                    {{ order.total | localeCurrency: order.currencyCode }}\r\n                </div>\r\n            </td>\r\n        </tr>\r\n    </tbody>\r\n</table>\r\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [".order-table .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}.order-table .sub-total td{border-top:1px dashed var(--color-component-border-200)}.order-table .total td{font-weight:bold;border-top:1px dashed var(--color-component-border-200)}.order-table td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}.order-table .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: Input }],
-    orderLineCustomFields: [{ type: Input }]
+    orderLineCustomFields: [{ type: Input }],
+    isDraft: [{ type: Input }],
+    adjust: [{ type: Output }],
+    remove: [{ type: Output }]
 };
 
 class PaymentDetailComponent {
@@ -2490,16 +2967,30 @@ SimpleItemListComponent.propDecorators = {
 /**
  * Resolves the id from the path into a Customer entity.
  */
-class OrderResolver extends BaseEntityResolver {
+class OrderResolver {
     constructor(router, dataService) {
-        super(router, {
-            __typename: 'Order',
-            id: '',
-            code: '',
-            createdAt: '',
-            updatedAt: '',
-            total: 0,
-        }, id => dataService.order.getOrder(id).mapStream(data => data.order));
+        this.router = router;
+        this.dataService = dataService;
+    }
+    /** @internal */
+    resolve(route, state) {
+        const id = route.paramMap.get('id');
+        // Complete the entity stream upon navigating away
+        const navigateAway$ = this.router.events.pipe(filter(event => event instanceof ActivationStart));
+        const stream = this.dataService.order
+            .getOrder(id)
+            .mapStream(data => data.order)
+            .pipe(switchMap(order => {
+            if ((order === null || order === void 0 ? void 0 : order.state) === 'Draft' && route.component !== DraftOrderDetailComponent) {
+                // Make sure Draft orders only get displayed with the DraftOrderDetailComponent
+                this.router.navigate(['/orders/draft', id]);
+                return EMPTY;
+            }
+            else {
+                return [order];
+            }
+        }), takeUntil(navigateAway$), filter(notNullOrUndefined), shareReplay(1));
+        return stream.pipe(take(1), map(() => stream));
     }
 }
 OrderResolver.ɵprov = i0.ɵɵdefineInjectable({ factory: function OrderResolver_Factory() { return new OrderResolver(i0.ɵɵinject(i1$1.Router), i0.ɵɵinject(i1.DataService)); }, token: OrderResolver, providedIn: "root" });
@@ -2513,11 +3004,47 @@ OrderResolver.ctorParameters = () => [
     { type: DataService }
 ];
 
+class OrderGuard {
+    constructor(dataService, router) {
+        this.dataService = dataService;
+        this.router = router;
+    }
+    canActivate(route, state) {
+        const isDraft = state.url.includes('orders/draft');
+        const id = route.paramMap.get('id');
+        if (isDraft) {
+            if (id === 'create') {
+                return this.dataService.order
+                    .createDraftOrder()
+                    .pipe(map(({ createDraftOrder }) => this.router.parseUrl(`/orders/draft/${createDraftOrder.id}`)));
+            }
+            else {
+                return true;
+            }
+        }
+        else {
+            return true;
+        }
+    }
+}
+OrderGuard.ɵprov = i0.ɵɵdefineInjectable({ factory: function OrderGuard_Factory() { return new OrderGuard(i0.ɵɵinject(i1.DataService), i0.ɵɵinject(i1$1.Router)); }, token: OrderGuard, providedIn: "root" });
+OrderGuard.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root',
+            },] }
+];
+OrderGuard.ctorParameters = () => [
+    { type: DataService },
+    { type: Router }
+];
+
 const ɵ0 = {
     breadcrumb: marker('breadcrumb.orders'),
 }, ɵ1 = {
     breadcrumb: orderBreadcrumb,
 }, ɵ2 = {
+    breadcrumb: orderBreadcrumb,
+}, ɵ3 = {
     breadcrumb: modifyingOrderBreadcrumb,
 };
 const orderRoutes = [
@@ -2526,19 +3053,34 @@ const orderRoutes = [
         component: OrderListComponent,
         data: ɵ0,
     },
+    {
+        path: 'draft/:id',
+        component: DraftOrderDetailComponent,
+        resolve: {
+            entity: OrderResolver,
+        },
+        canActivate: [OrderGuard],
+        canDeactivate: [CanDeactivateDetailGuard],
+        data: ɵ1,
+    },
     {
         path: ':id',
         component: OrderDetailComponent,
-        resolve: createResolveData(OrderResolver),
+        resolve: {
+            entity: OrderResolver,
+        },
+        canActivate: [OrderGuard],
         canDeactivate: [CanDeactivateDetailGuard],
-        data: ɵ1,
+        data: ɵ2,
     },
     {
         path: ':id/modify',
         component: OrderEditorComponent,
-        resolve: createResolveData(OrderResolver),
+        resolve: {
+            entity: OrderResolver,
+        },
         // canDeactivate: [CanDeactivateDetailGuard],
-        data: ɵ2,
+        data: ɵ3,
     },
 ];
 function orderBreadcrumb(data, params) {
@@ -2593,6 +3135,12 @@ OrderModule.decorators = [
                     ModificationDetailComponent,
                     AddManualPaymentDialogComponent,
                     OrderStateSelectDialogComponent,
+                    DraftOrderDetailComponent,
+                    DraftOrderVariantSelectorComponent,
+                    SelectCustomerDialogComponent,
+                    SelectAddressDialogComponent,
+                    CouponCodeSelectorComponent,
+                    SelectShippingMethodDialogComponent,
                 ],
             },] }
 ];
@@ -2603,5 +3151,5 @@ OrderModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { AddManualPaymentDialogComponent, CancelOrderDialogComponent, FulfillOrderDialogComponent, FulfillmentCardComponent, FulfillmentDetailComponent, FulfillmentStateLabelComponent, LineFulfillmentComponent, LineRefundsComponent, ModificationDetailComponent, NODE_HEIGHT, OrderCustomFieldsCardComponent, OrderDetailComponent, OrderEditResultType, OrderEditorComponent, OrderEditsPreviewDialogComponent, OrderHistoryComponent, OrderListComponent, OrderModule, OrderPaymentCardComponent, OrderProcessEdgeComponent, OrderProcessGraphComponent, OrderProcessGraphDialogComponent, OrderProcessNodeComponent, OrderResolver, OrderStateSelectDialogComponent, OrderTableComponent, OrderTransitionService, PaymentDetailComponent, PaymentStateLabelComponent, RefundOrderDialogComponent, RefundStateLabelComponent, SettleRefundDialogComponent, SimpleItemListComponent, modifyingOrderBreadcrumb, orderBreadcrumb, orderRoutes, ɵ0, ɵ1, ɵ2 };
+export { AddManualPaymentDialogComponent, CancelOrderDialogComponent, CouponCodeSelectorComponent, DraftOrderDetailComponent, DraftOrderVariantSelectorComponent, FulfillOrderDialogComponent, FulfillmentCardComponent, FulfillmentDetailComponent, FulfillmentStateLabelComponent, GET_CUSTOMER_ADDRESSES, LineFulfillmentComponent, LineRefundsComponent, ModificationDetailComponent, NODE_HEIGHT, OrderCustomFieldsCardComponent, OrderDetailComponent, OrderEditResultType, OrderEditorComponent, OrderEditsPreviewDialogComponent, OrderGuard, OrderHistoryComponent, OrderListComponent, OrderModule, OrderPaymentCardComponent, OrderProcessEdgeComponent, OrderProcessGraphComponent, OrderProcessGraphDialogComponent, OrderProcessNodeComponent, OrderResolver, OrderStateSelectDialogComponent, OrderTableComponent, OrderTransitionService, PaymentDetailComponent, PaymentStateLabelComponent, RefundOrderDialogComponent, RefundStateLabelComponent, SelectAddressDialogComponent, SelectCustomerDialogComponent, SelectShippingMethodDialogComponent, SettleRefundDialogComponent, SimpleItemListComponent, modifyingOrderBreadcrumb, orderBreadcrumb, orderRoutes, ɵ0, ɵ1, ɵ2, ɵ3 };
 //# sourceMappingURL=vendure-admin-ui-order.js.map