@vendure/admin-ui 1.7.4 → 1.8.0

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

@@ -0,0 +1,4028 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/forms'), require('@vendure/admin-ui/core'), require('@biesbjerg/ngx-translate-extract-marker'), require('rxjs'), require('rxjs/operators'), require('@angular/router'), require('@vendure/common/lib/pick'), require('apollo-angular'), require('@vendure/common/lib/shared-utils'), require('@vendure/common/lib/simple-deep-clone')) :
+    typeof define === 'function' && define.amd ? define('@vendure/admin-ui/order', ['exports', '@angular/core', '@angular/forms', '@vendure/admin-ui/core', '@biesbjerg/ngx-translate-extract-marker', 'rxjs', 'rxjs/operators', '@angular/router', '@vendure/common/lib/pick', 'apollo-angular', '@vendure/common/lib/shared-utils', '@vendure/common/lib/simple-deep-clone'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.vendure = global.vendure || {}, global.vendure['admin-ui'] = global.vendure['admin-ui'] || {}, global.vendure['admin-ui'].order = {}), global.ng.core, global.ng.forms, global.vendure['admin-ui'].core, global.ngxTranslateExtractMarker, global.rxjs, global.rxjs.operators, global.ng.router, global.pick, global.apolloAngular, global.sharedUtils, global.simpleDeepClone));
+}(this, (function (exports, i0, forms, i1, ngxTranslateExtractMarker, rxjs, operators, i1$1, pick, apolloAngular, sharedUtils, simpleDeepClone) { 'use strict';
+
+    function _interopNamespace(e) {
+        if (e && e.__esModule) return e;
+        var n = Object.create(null);
+        if (e) {
+            Object.keys(e).forEach(function (k) {
+                if (k !== 'default') {
+                    var d = Object.getOwnPropertyDescriptor(e, k);
+                    Object.defineProperty(n, k, d.get ? d : {
+                        enumerable: true,
+                        get: function () {
+                            return e[k];
+                        }
+                    });
+                }
+            });
+        }
+        n['default'] = e;
+        return Object.freeze(n);
+    }
+
+    var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
+    var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
+    var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1$1);
+
+    var AddManualPaymentDialogComponent = /** @class */ (function () {
+        function AddManualPaymentDialogComponent(dataService) {
+            this.dataService = dataService;
+            this.form = new forms.FormGroup({
+                method: new forms.FormControl('', forms.Validators.required),
+                transactionId: new forms.FormControl('', forms.Validators.required),
+            });
+        }
+        AddManualPaymentDialogComponent.prototype.ngOnInit = function () {
+            this.paymentMethods$ = this.dataService.settings
+                .getPaymentMethods(999)
+                .mapSingle(function (data) { return data.paymentMethods.items; });
+        };
+        AddManualPaymentDialogComponent.prototype.submit = function () {
+            var formValue = this.form.value;
+            this.resolveWith({
+                method: formValue.method,
+                transactionId: formValue.transactionId,
+            });
+        };
+        AddManualPaymentDialogComponent.prototype.cancel = function () {
+            this.resolveWith();
+        };
+        return AddManualPaymentDialogComponent;
+    }());
+    AddManualPaymentDialogComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'vdr-add-manual-payment-dialog',
+                    template: "<ng-template vdrDialogTitle>{{ 'order.add-payment-to-order' | translate }}</ng-template>\r\n<form [formGroup]=\"form\">\r\n    <vdr-form-field [label]=\"'order.payment-method' | translate\" for=\"method\">\r\n        <ng-select\r\n            [items]=\"paymentMethods$ | async\"\r\n            bindLabel=\"code\"\r\n            autofocus\r\n            bindValue=\"code\"\r\n            [addTag]=\"true\"\r\n            formControlName=\"method\"\r\n        ></ng-select>\r\n    </vdr-form-field>\r\n    <vdr-form-field [label]=\"'order.transaction-id' | translate\" for=\"transactionId\">\r\n        <input id=\"transactionId\" type=\"text\" formControlName=\"transactionId\" />\r\n    </vdr-form-field>\r\n</form>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"submit()\" class=\"btn btn-primary\" [disabled]=\"form.invalid || form.pristine\">\r\n        {{ 'order.add-payment' | translate }}  ({{ outstandingAmount | localeCurrency: currencyCode }})\r\n    </button>\r\n</ng-template>\r\n",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [".ng-select{min-width:100%}\n"]
+                },] }
+    ];
+    AddManualPaymentDialogComponent.ctorParameters = function () { return [
+        { type: i1.DataService }
+    ]; };
+
+    /*! *****************************************************************************
+    Copyright (c) Microsoft Corporation.
+
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
+
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */
+    /* global Reflect, Promise */
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b)
+                if (Object.prototype.hasOwnProperty.call(b, p))
+                    d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    function __extends(d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    }
+    var __assign = function () {
+        __assign = Object.assign || function __assign(t) {
+            for (var s, i = 1, n = arguments.length; i < n; i++) {
+                s = arguments[i];
+                for (var p in s)
+                    if (Object.prototype.hasOwnProperty.call(s, p))
+                        t[p] = s[p];
+            }
+            return t;
+        };
+        return __assign.apply(this, arguments);
+    };
+    function __rest(s, e) {
+        var t = {};
+        for (var p in s)
+            if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+                t[p] = s[p];
+        if (s != null && typeof Object.getOwnPropertySymbols === "function")
+            for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+                if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                    t[p[i]] = s[p[i]];
+            }
+        return t;
+    }
+    function __decorate(decorators, target, key, desc) {
+        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+        if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+            r = Reflect.decorate(decorators, target, key, desc);
+        else
+            for (var i = decorators.length - 1; i >= 0; i--)
+                if (d = decorators[i])
+                    r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+        return c > 3 && r && Object.defineProperty(target, key, r), r;
+    }
+    function __param(paramIndex, decorator) {
+        return function (target, key) { decorator(target, key, paramIndex); };
+    }
+    function __metadata(metadataKey, metadataValue) {
+        if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+            return Reflect.metadata(metadataKey, metadataValue);
+    }
+    function __awaiter(thisArg, _arguments, P, generator) {
+        function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+        return new (P || (P = Promise))(function (resolve, reject) {
+            function fulfilled(value) { try {
+                step(generator.next(value));
+            }
+            catch (e) {
+                reject(e);
+            } }
+            function rejected(value) { try {
+                step(generator["throw"](value));
+            }
+            catch (e) {
+                reject(e);
+            } }
+            function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+            step((generator = generator.apply(thisArg, _arguments || [])).next());
+        });
+    }
+    function __generator(thisArg, body) {
+        var _ = { label: 0, sent: function () { if (t[0] & 1)
+                throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+        return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function () { return this; }), g;
+        function verb(n) { return function (v) { return step([n, v]); }; }
+        function step(op) {
+            if (f)
+                throw new TypeError("Generator is already executing.");
+            while (_)
+                try {
+                    if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)
+                        return t;
+                    if (y = 0, t)
+                        op = [op[0] & 2, t.value];
+                    switch (op[0]) {
+                        case 0:
+                        case 1:
+                            t = op;
+                            break;
+                        case 4:
+                            _.label++;
+                            return { value: op[1], done: false };
+                        case 5:
+                            _.label++;
+                            y = op[1];
+                            op = [0];
+                            continue;
+                        case 7:
+                            op = _.ops.pop();
+                            _.trys.pop();
+                            continue;
+                        default:
+                            if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
+                                _ = 0;
+                                continue;
+                            }
+                            if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) {
+                                _.label = op[1];
+                                break;
+                            }
+                            if (op[0] === 6 && _.label < t[1]) {
+                                _.label = t[1];
+                                t = op;
+                                break;
+                            }
+                            if (t && _.label < t[2]) {
+                                _.label = t[2];
+                                _.ops.push(op);
+                                break;
+                            }
+                            if (t[2])
+                                _.ops.pop();
+                            _.trys.pop();
+                            continue;
+                    }
+                    op = body.call(thisArg, _);
+                }
+                catch (e) {
+                    op = [6, e];
+                    y = 0;
+                }
+                finally {
+                    f = t = 0;
+                }
+            if (op[0] & 5)
+                throw op[1];
+            return { value: op[0] ? op[1] : void 0, done: true };
+        }
+    }
+    var __createBinding = Object.create ? (function (o, m, k, k2) {
+        if (k2 === undefined)
+            k2 = k;
+        Object.defineProperty(o, k2, { enumerable: true, get: function () { return m[k]; } });
+    }) : (function (o, m, k, k2) {
+        if (k2 === undefined)
+            k2 = k;
+        o[k2] = m[k];
+    });
+    function __exportStar(m, o) {
+        for (var p in m)
+            if (p !== "default" && !Object.prototype.hasOwnProperty.call(o, p))
+                __createBinding(o, m, p);
+    }
+    function __values(o) {
+        var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+        if (m)
+            return m.call(o);
+        if (o && typeof o.length === "number")
+            return {
+                next: function () {
+                    if (o && i >= o.length)
+                        o = void 0;
+                    return { value: o && o[i++], done: !o };
+                }
+            };
+        throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+    }
+    function __read(o, n) {
+        var m = typeof Symbol === "function" && o[Symbol.iterator];
+        if (!m)
+            return o;
+        var i = m.call(o), r, ar = [], e;
+        try {
+            while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
+                ar.push(r.value);
+        }
+        catch (error) {
+            e = { error: error };
+        }
+        finally {
+            try {
+                if (r && !r.done && (m = i["return"]))
+                    m.call(i);
+            }
+            finally {
+                if (e)
+                    throw e.error;
+            }
+        }
+        return ar;
+    }
+    /** @deprecated */
+    function __spread() {
+        for (var ar = [], i = 0; i < arguments.length; i++)
+            ar = ar.concat(__read(arguments[i]));
+        return ar;
+    }
+    /** @deprecated */
+    function __spreadArrays() {
+        for (var s = 0, i = 0, il = arguments.length; i < il; i++)
+            s += arguments[i].length;
+        for (var r = Array(s), k = 0, i = 0; i < il; i++)
+            for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+                r[k] = a[j];
+        return r;
+    }
+    function __spreadArray(to, from, pack) {
+        if (pack || arguments.length === 2)
+            for (var i = 0, l = from.length, ar; i < l; i++) {
+                if (ar || !(i in from)) {
+                    if (!ar)
+                        ar = Array.prototype.slice.call(from, 0, i);
+                    ar[i] = from[i];
+                }
+            }
+        return to.concat(ar || Array.prototype.slice.call(from));
+    }
+    function __await(v) {
+        return this instanceof __await ? (this.v = v, this) : new __await(v);
+    }
+    function __asyncGenerator(thisArg, _arguments, generator) {
+        if (!Symbol.asyncIterator)
+            throw new TypeError("Symbol.asyncIterator is not defined.");
+        var g = generator.apply(thisArg, _arguments || []), i, q = [];
+        return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
+        function verb(n) { if (g[n])
+            i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
+        function resume(n, v) { try {
+            step(g[n](v));
+        }
+        catch (e) {
+            settle(q[0][3], e);
+        } }
+        function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
+        function fulfill(value) { resume("next", value); }
+        function reject(value) { resume("throw", value); }
+        function settle(f, v) { if (f(v), q.shift(), q.length)
+            resume(q[0][0], q[0][1]); }
+    }
+    function __asyncDelegator(o) {
+        var i, p;
+        return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
+        function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
+    }
+    function __asyncValues(o) {
+        if (!Symbol.asyncIterator)
+            throw new TypeError("Symbol.asyncIterator is not defined.");
+        var m = o[Symbol.asyncIterator], i;
+        return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
+        function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
+        function settle(resolve, reject, d, v) { Promise.resolve(v).then(function (v) { resolve({ value: v, done: d }); }, reject); }
+    }
+    function __makeTemplateObject(cooked, raw) {
+        if (Object.defineProperty) {
+            Object.defineProperty(cooked, "raw", { value: raw });
+        }
+        else {
+            cooked.raw = raw;
+        }
+        return cooked;
+    }
+    ;
+    var __setModuleDefault = Object.create ? (function (o, v) {
+        Object.defineProperty(o, "default", { enumerable: true, value: v });
+    }) : function (o, v) {
+        o["default"] = v;
+    };
+    function __importStar(mod) {
+        if (mod && mod.__esModule)
+            return mod;
+        var result = {};
+        if (mod != null)
+            for (var k in mod)
+                if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k))
+                    __createBinding(result, mod, k);
+        __setModuleDefault(result, mod);
+        return result;
+    }
+    function __importDefault(mod) {
+        return (mod && mod.__esModule) ? mod : { default: mod };
+    }
+    function __classPrivateFieldGet(receiver, state, kind, f) {
+        if (kind === "a" && !f)
+            throw new TypeError("Private accessor was defined without a getter");
+        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+            throw new TypeError("Cannot read private member from an object whose class did not declare it");
+        return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+    }
+    function __classPrivateFieldSet(receiver, state, value, kind, f) {
+        if (kind === "m")
+            throw new TypeError("Private method is not writable");
+        if (kind === "a" && !f)
+            throw new TypeError("Private accessor was defined without a setter");
+        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+            throw new TypeError("Cannot write private member to an object whose class did not declare it");
+        return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+    }
+
+    var CancelOrderDialogComponent = /** @class */ (function () {
+        function CancelOrderDialogComponent(i18nService) {
+            var _this = this;
+            var _a;
+            this.i18nService = i18nService;
+            this.cancelAll = true;
+            this.lineQuantities = {};
+            this.reasons = (_a = i1.getAppConfig().cancellationReasons) !== null && _a !== void 0 ? _a : [
+                ngxTranslateExtractMarker.marker('order.cancel-reason-customer-request'),
+                ngxTranslateExtractMarker.marker('order.cancel-reason-not-available'),
+            ];
+            this.reasons = this.reasons.map(function (r) { return _this.i18nService.translate(r); });
+        }
+        Object.defineProperty(CancelOrderDialogComponent.prototype, "selectionCount", {
+            get: function () {
+                return Object.values(this.lineQuantities).reduce(function (sum, n) { return sum + n; }, 0);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        CancelOrderDialogComponent.prototype.ngOnInit = function () {
+            this.lineQuantities = this.order.lines.reduce(function (result, line) {
+                var _b;
+                return Object.assign(Object.assign({}, result), (_b = {}, _b[line.id] = line.quantity, _b));
+            }, {});
+        };
+        CancelOrderDialogComponent.prototype.radioChanged = function () {
+            var e_1, _b, e_2, _c;
+            if (this.cancelAll) {
+                try {
+                    for (var _d = __values(this.order.lines), _e = _d.next(); !_e.done; _e = _d.next()) {
+                        var line = _e.value;
+                        this.lineQuantities[line.id] = line.quantity;
+                    }
+                }
+                catch (e_1_1) { e_1 = { error: e_1_1 }; }
+                finally {
+                    try {
+                        if (_e && !_e.done && (_b = _d.return)) _b.call(_d);
+                    }
+                    finally { if (e_1) throw e_1.error; }
+                }
+            }
+            else {
+                try {
+                    for (var _f = __values(this.order.lines), _g = _f.next(); !_g.done; _g = _f.next()) {
+                        var line = _g.value;
+                        this.lineQuantities[line.id] = 0;
+                    }
+                }
+                catch (e_2_1) { e_2 = { error: e_2_1 }; }
+                finally {
+                    try {
+                        if (_g && !_g.done && (_c = _f.return)) _c.call(_f);
+                    }
+                    finally { if (e_2) throw e_2.error; }
+                }
+            }
+        };
+        CancelOrderDialogComponent.prototype.checkIfAllSelected = function () {
+            var e_3, _b;
+            var _a;
+            var _loop_1 = function (lineId, quantity) {
+                var quantityInOrder = (_a = this_1.order.lines.find(function (line) { return line.id === lineId; })) === null || _a === void 0 ? void 0 : _a.quantity;
+                if (quantityInOrder && quantity < quantityInOrder) {
+                    return { value: void 0 };
+                }
+            };
+            var this_1 = this;
+            try {
+                for (var _c = __values(Object.entries(this.lineQuantities)), _d = _c.next(); !_d.done; _d = _c.next()) {
+                    var _e = __read(_d.value, 2), lineId = _e[0], quantity = _e[1];
+                    var state_1 = _loop_1(lineId, quantity);
+                    if (typeof state_1 === "object")
+                        return state_1.value;
+                }
+            }
+            catch (e_3_1) { e_3 = { error: e_3_1 }; }
+            finally {
+                try {
+                    if (_d && !_d.done && (_b = _c.return)) _b.call(_c);
+                }
+                finally { if (e_3) throw e_3.error; }
+            }
+            // If we got here, all of the selected quantities are equal to the order
+            // line quantities, i.e. everything is selected.
+            this.cancelAll = true;
+        };
+        CancelOrderDialogComponent.prototype.select = function () {
+            this.resolveWith({
+                orderId: this.order.id,
+                lines: this.getLineInputs(),
+                reason: this.reason,
+                cancelShipping: this.cancelAll,
+            });
+        };
+        CancelOrderDialogComponent.prototype.cancel = function () {
+            this.resolveWith();
+        };
+        CancelOrderDialogComponent.prototype.getLineInputs = function () {
+            if (this.order.active) {
+                return;
+            }
+            return Object.entries(this.lineQuantities)
+                .map(function (_b) {
+                var _c = __read(_b, 2), orderLineId = _c[0], quantity = _c[1];
+                return ({
+                    orderLineId: orderLineId,
+                    quantity: quantity,
+                });
+            })
+                .filter(function (l) { return 0 < l.quantity; });
+        };
+        return CancelOrderDialogComponent;
+    }());
+    CancelOrderDialogComponent.decorators = [
+        { type: i0.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: i0.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 = function () { return [
+        { type: i1.I18nService }
+    ]; };
+
+    var CouponCodeSelectorComponent = /** @class */ (function () {
+        function CouponCodeSelectorComponent(dataService) {
+            this.dataService = dataService;
+            this.addCouponCode = new i0.EventEmitter();
+            this.removeCouponCode = new i0.EventEmitter();
+            this.couponCodeInput$ = new rxjs.Subject();
+        }
+        CouponCodeSelectorComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            var _a;
+            this.availableCouponCodes$ = rxjs.concat(this.couponCodeInput$.pipe(operators.distinctUntilChanged(), operators.switchMap(function (term) { return _this.dataService.promotion.getPromotions(10, 0, {
+                couponCode: { contains: term },
+            }).single$; }), operators.map(function (_b) {
+                var promotions = _b.promotions;
+                // tslint:disable-next-line:no-non-null-assertion
+                return promotions.items.map(function (p) { return ({ code: p.couponCode, promotionName: p.name }); });
+            }), operators.startWith([])));
+            if (!this.control) {
+                this.control = new forms.FormControl((_a = this.couponCodes) !== null && _a !== void 0 ? _a : []);
+            }
+        };
+        return CouponCodeSelectorComponent;
+    }());
+    CouponCodeSelectorComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'vdr-coupon-code-selector',
+                    template: "<ng-select\r\n    [items]=\"availableCouponCodes$ | async\"\r\n    appendTo=\"body\"\r\n    bindLabel=\"code\"\r\n    bindValue=\"code\"\r\n    [addTag]=\"false\"\r\n    [multiple]=\"true\"\r\n    [hideSelected]=\"true\"\r\n    [minTermLength]=\"2\"\r\n    typeToSearchText=\"\"\r\n    [typeahead]=\"couponCodeInput$\"\r\n    [formControl]=\"control\"\r\n    (add)=\"addCouponCode.emit($event.code)\"\r\n    (remove)=\"removeCouponCode.emit($event.value?.code)\"\r\n>\r\n    <ng-template ng-option-tmp let-item=\"item\">\r\n        <vdr-chip>{{ item.code }}</vdr-chip>\r\n        {{ item.promotionName }}\r\n    </ng-template>\r\n</ng-select>\r\n",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [""]
+                },] }
+    ];
+    CouponCodeSelectorComponent.ctorParameters = function () { return [
+        { type: i1.DataService }
+    ]; };
+    CouponCodeSelectorComponent.propDecorators = {
+        couponCodes: [{ type: i0.Input }],
+        control: [{ type: i0.Input }],
+        addCouponCode: [{ type: i0.Output }],
+        removeCouponCode: [{ type: i0.Output }]
+    };
+
+    var OrderStateSelectDialogComponent = /** @class */ (function () {
+        function OrderStateSelectDialogComponent() {
+            this.nextStates = [];
+            this.message = '';
+            this.selectedState = '';
+        }
+        OrderStateSelectDialogComponent.prototype.select = function () {
+            if (this.selectedState) {
+                this.resolveWith(this.selectedState);
+            }
+        };
+        OrderStateSelectDialogComponent.prototype.cancel = function () {
+            this.resolveWith();
+        };
+        return OrderStateSelectDialogComponent;
+    }());
+    OrderStateSelectDialogComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'vdr-order-state-select-dialog',
+                    template: "<ng-template vdrDialogTitle>{{ 'order.select-state' | translate }}</ng-template>\r\n<p>{{ message | translate }}</p>\r\n<clr-select-container>\r\n    <select clrSelect name=\"state\" [(ngModel)]=\"selectedState\">\r\n        <option *ngFor=\"let state of nextStates\" [value]=\"state\">\r\n            {{ state | stateI18nToken | translate }}\r\n        </option>\r\n    </select>\r\n</clr-select-container>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"submit\" *ngIf=\"cancellable\" (click)=\"cancel()\" class=\"btn btn-secondary\">\r\n        {{ 'common.cancel' | translate }}\r\n    </button>\r\n    <button type=\"submit\" (click)=\"select()\" class=\"btn btn-primary\" [disabled]=\"!selectedState\">\r\n        {{ 'order.transition-to-state' | translate: { state: (selectedState | stateI18nToken | translate) } }}\r\n    </button>\r\n</ng-template>\r\n",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [""]
+                },] }
+    ];
+
+    var OrderTransitionService = /** @class */ (function () {
+        function OrderTransitionService(dataService, modalService, notificationService, i18nService) {
+            this.dataService = dataService;
+            this.modalService = modalService;
+            this.notificationService = notificationService;
+            this.i18nService = i18nService;
+        }
+        /**
+         * Attempts to transition the Order to the last state it was in before it was transitioned
+         * to the "Modifying" state. If this fails, a manual prompt is used.
+         */
+        OrderTransitionService.prototype.transitionToPreModifyingState = function (orderId, nextStates) {
+            var _this = this;
+            return this.getPreModifyingState(orderId).pipe(operators.switchMap(function (state) {
+                var manualTransitionOptions = {
+                    orderId: orderId,
+                    nextStates: nextStates,
+                    message: _this.i18nService.translate(ngxTranslateExtractMarker.marker('order.unable-to-transition-to-state-try-another'), { state: state }),
+                    cancellable: false,
+                    retry: 10,
+                };
+                if (state) {
+                    return _this.transitionToStateOrThrow(orderId, state).pipe(operators.catchError(function (err) { return _this.manuallyTransitionToState(manualTransitionOptions); }));
+                }
+                else {
+                    return _this.manuallyTransitionToState(manualTransitionOptions);
+                }
+            }));
+        };
+        /**
+         * Displays a modal for manually selecting the next state.
+         */
+        OrderTransitionService.prototype.manuallyTransitionToState = function (options) {
+            var _this = this;
+            return this.modalService
+                .fromComponent(OrderStateSelectDialogComponent, {
+                locals: {
+                    nextStates: options.nextStates,
+                    cancellable: options.cancellable,
+                    message: options.message,
+                },
+                closable: false,
+                size: 'md',
+            })
+                .pipe(operators.switchMap(function (result) {
+                if (result) {
+                    return _this.transitionToStateOrThrow(options.orderId, result);
+                }
+                else {
+                    if (!options.cancellable) {
+                        throw new Error("An order state must be selected");
+                    }
+                    else {
+                        return rxjs.EMPTY;
+                    }
+                }
+            }), operators.retryWhen(function (errors) { return errors.pipe(operators.delay(2000), operators.take(options.retry)); }));
+        };
+        /**
+         * Attempts to get the last state the Order was in before it was transitioned
+         * to the "Modifying" state.
+         */
+        OrderTransitionService.prototype.getPreModifyingState = function (orderId) {
+            return this.dataService.order
+                .getOrderHistory(orderId, {
+                filter: {
+                    type: {
+                        eq: i1.HistoryEntryType.ORDER_STATE_TRANSITION,
+                    },
+                },
+                sort: {
+                    createdAt: i1.SortOrder.DESC,
+                },
+            })
+                .mapSingle(function (result) { return result.order; })
+                .pipe(operators.map(function (result) {
+                var item = result === null || result === void 0 ? void 0 : result.history.items.find(function (i) { return i.data.to === 'Modifying'; });
+                if (item) {
+                    return item.data.from;
+                }
+                else {
+                    return;
+                }
+            }));
+        };
+        OrderTransitionService.prototype.transitionToStateOrThrow = function (orderId, state) {
+            var _this = this;
+            return this.dataService.order.transitionToState(orderId, state).pipe(operators.map(function (_a) {
+                var transitionOrderToState = _a.transitionOrderToState;
+                switch (transitionOrderToState === null || transitionOrderToState === void 0 ? void 0 : transitionOrderToState.__typename) {
+                    case 'Order':
+                        return transitionOrderToState === null || transitionOrderToState === void 0 ? void 0 : transitionOrderToState.state;
+                    case 'OrderStateTransitionError':
+                        _this.notificationService.error(transitionOrderToState === null || transitionOrderToState === void 0 ? void 0 : transitionOrderToState.transitionError);
+                        throw new Error(transitionOrderToState === null || transitionOrderToState === void 0 ? void 0 : transitionOrderToState.transitionError);
+                }
+            }));
+        };
+        return OrderTransitionService;
+    }());
+    OrderTransitionService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function OrderTransitionService_Factory() { return new OrderTransitionService(i0__namespace.ɵɵinject(i1__namespace.DataService), i0__namespace.ɵɵinject(i1__namespace.ModalService), i0__namespace.ɵɵinject(i1__namespace.NotificationService), i0__namespace.ɵɵinject(i1__namespace.I18nService)); }, token: OrderTransitionService, providedIn: "root" });
+    OrderTransitionService.decorators = [
+        { type: i0.Injectable, args: [{
+                    providedIn: 'root',
+                },] }
+    ];
+    OrderTransitionService.ctorParameters = function () { return [
+        { type: i1.DataService },
+        { type: i1.ModalService },
+        { type: i1.NotificationService },
+        { type: i1.I18nService }
+    ]; };
+
+    var GET_CUSTOMER_ADDRESSES = apolloAngular.gql(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    query GetCustomerAddresses($customerId: ID!) {\n        customer(id: $customerId) {\n            id\n            addresses {\n                ...Address\n            }\n        }\n    }\n    ", "\n"], ["\n    query GetCustomerAddresses($customerId: ID!) {\n        customer(id: $customerId) {\n            id\n            addresses {\n                ...Address\n            }\n        }\n    }\n    ", "\n"])), i1.ADDRESS_FRAGMENT);
+    var templateObject_1;
+
+    var SelectAddressDialogComponent = /** @class */ (function () {
+        function SelectAddressDialogComponent(dataService, formBuilder) {
+            this.dataService = dataService;
+            this.formBuilder = formBuilder;
+            this.useExisting = true;
+            this.createNew = false;
+        }
+        SelectAddressDialogComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+            this.addressForm = this.formBuilder.group({
+                fullName: [(_b = (_a = this.currentAddress) === null || _a === void 0 ? void 0 : _a.fullName) !== null && _b !== void 0 ? _b : ''],
+                company: [(_d = (_c = this.currentAddress) === null || _c === void 0 ? void 0 : _c.company) !== null && _d !== void 0 ? _d : ''],
+                streetLine1: [(_f = (_e = this.currentAddress) === null || _e === void 0 ? void 0 : _e.streetLine1) !== null && _f !== void 0 ? _f : '', forms.Validators.required],
+                streetLine2: [(_h = (_g = this.currentAddress) === null || _g === void 0 ? void 0 : _g.streetLine2) !== null && _h !== void 0 ? _h : ''],
+                city: [(_k = (_j = this.currentAddress) === null || _j === void 0 ? void 0 : _j.city) !== null && _k !== void 0 ? _k : '', forms.Validators.required],
+                province: [(_m = (_l = this.currentAddress) === null || _l === void 0 ? void 0 : _l.province) !== null && _m !== void 0 ? _m : ''],
+                postalCode: [(_p = (_o = this.currentAddress) === null || _o === void 0 ? void 0 : _o.postalCode) !== null && _p !== void 0 ? _p : '', forms.Validators.required],
+                countryCode: [(_r = (_q = this.currentAddress) === null || _q === void 0 ? void 0 : _q.countryCode) !== null && _r !== void 0 ? _r : '', forms.Validators.required],
+                phoneNumber: [(_t = (_s = this.currentAddress) === null || _s === void 0 ? void 0 : _s.phoneNumber) !== null && _t !== void 0 ? _t : ''],
+            });
+            this.useExisting = !!this.customerId;
+            this.addresses$ = this.customerId
+                ? this.dataService
+                    .query(GET_CUSTOMER_ADDRESSES, { customerId: this.customerId })
+                    .mapSingle(function (_u) {
+                    var customer = _u.customer;
+                    var _a;
+                    return (_a = customer === null || customer === void 0 ? void 0 : customer.addresses) !== null && _a !== void 0 ? _a : [];
+                })
+                    .pipe(operators.tap(function (addresses) {
+                    if (_this.currentAddress) {
+                        _this.selectedAddress = addresses.find(function (a) {
+                            var _a, _b;
+                            return a.streetLine1 === ((_a = _this.currentAddress) === null || _a === void 0 ? void 0 : _a.streetLine1) &&
+                                a.postalCode === ((_b = _this.currentAddress) === null || _b === void 0 ? void 0 : _b.postalCode);
+                        });
+                    }
+                    if (addresses.length === 0) {
+                        _this.createNew = true;
+                        _this.useExisting = false;
+                    }
+                }))
+                : rxjs.of([]);
+            this.availableCountries$ = this.dataService.settings
+                .getAvailableCountries()
+                .mapSingle(function (_u) {
+                var countries = _u.countries;
+                return countries.items;
+            });
+        };
+        SelectAddressDialogComponent.prototype.trackByFn = function (item) {
+            return item.id;
+        };
+        SelectAddressDialogComponent.prototype.addressIdFn = function (item) {
+            return item.streetLine1 + item.postalCode;
+        };
+        SelectAddressDialogComponent.prototype.cancel = function () {
+            this.resolveWith();
+        };
+        SelectAddressDialogComponent.prototype.select = function () {
+            if (this.useExisting && this.selectedAddress) {
+                this.resolveWith(Object.assign(Object.assign({}, pick.pick(this.selectedAddress, [
+                    'fullName',
+                    'company',
+                    'streetLine1',
+                    'streetLine2',
+                    'city',
+                    'province',
+                    'phoneNumber',
+                    'postalCode',
+                ])), { countryCode: this.selectedAddress.country.code }));
+            }
+            if (this.createNew && this.addressForm.valid) {
+                var formValue = this.addressForm.value;
+                this.resolveWith(formValue);
+            }
+        };
+        return SelectAddressDialogComponent;
+    }());
+    SelectAddressDialogComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'vdr-select-address-dialog',
+                    template: "<ng-template vdrDialogTitle>{{ 'order.select-address' | translate }}</ng-template>\r\n\r\n<clr-tabs *ngIf=\"addresses$ | async as addresses\">\r\n    <clr-tab *ngIf=\"customerId && addresses.length\">\r\n        <button clrTabLink>{{ 'order.existing-address' | translate }}</button>\r\n        <ng-template [(clrIfActive)]=\"useExisting\">\r\n            <clr-tab-content>\r\n                <vdr-radio-card-fieldset\r\n                    class=\"block mt4\"\r\n                    [idFn]=\"addressIdFn\"\r\n                    [selectedItemId]=\"selectedAddress && addressIdFn(selectedAddress)\"\r\n                    (selectItem)=\"selectedAddress = $event\"\r\n                >\r\n                    <vdr-radio-card *ngFor=\"let address of addresses\" [item]=\"address\">\r\n                        <vdr-formatted-address [address]=\"address\"></vdr-formatted-address>\r\n                    </vdr-radio-card>\r\n                </vdr-radio-card-fieldset>\r\n            </clr-tab-content>\r\n        </ng-template>\r\n    </clr-tab>\r\n    <clr-tab>\r\n        <button clrTabLink>{{ 'customer.create-new-address' | translate }}</button>\r\n\r\n        <ng-template [(clrIfActive)]=\"createNew\">\r\n            <clr-tab-content>\r\n                <vdr-address-form\r\n                    [formGroup]=\"addressForm\"\r\n                    [availableCountries]=\"availableCountries$ | async\"\r\n                ></vdr-address-form>\r\n            </clr-tab-content>\r\n        </ng-template>\r\n    </clr-tab>\r\n</clr-tabs>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button\r\n        type=\"submit\"\r\n        (click)=\"select()\"\r\n        [disabled]=\"(useExisting && !selectedAddress) || (createNew && addressForm.invalid)\"\r\n        class=\"btn btn-primary\"\r\n    >\r\n        {{ 'common.okay' | translate }}\r\n    </button>\r\n</ng-template>\r\n",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [""]
+                },] }
+    ];
+    SelectAddressDialogComponent.ctorParameters = function () { return [
+        { type: i1.DataService },
+        { type: forms.FormBuilder }
+    ]; };
+
+    var SelectCustomerDialogComponent = /** @class */ (function () {
+        function SelectCustomerDialogComponent(dataService, formBuilder) {
+            this.dataService = dataService;
+            this.formBuilder = formBuilder;
+            this.isLoading = false;
+            this.input$ = new rxjs.Subject();
+            this.selectedCustomer = [];
+            this.useExisting = true;
+            this.createNew = false;
+            this.customerForm = this.formBuilder.group({
+                title: '',
+                firstName: ['', forms.Validators.required],
+                lastName: ['', forms.Validators.required],
+                phoneNumber: '',
+                emailAddress: ['', [forms.Validators.required, forms.Validators.email]],
+            });
+        }
+        SelectCustomerDialogComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.customers$ = rxjs.concat(rxjs.of([]), // default items
+            this.input$.pipe(operators.debounceTime(200), operators.distinctUntilChanged(), operators.tap(function () { return (_this.isLoading = true); }), operators.switchMap(function (term) { return _this.dataService.customer
+                .getCustomerList(10, 0, term)
+                .mapStream(function (_a) {
+                var customers = _a.customers;
+                return customers.items;
+            })
+                .pipe(operators.catchError(function () { return rxjs.of([]); }), // empty list on error
+            operators.tap(function () { return (_this.isLoading = false); })); })));
+        };
+        SelectCustomerDialogComponent.prototype.trackByFn = function (item) {
+            return item.id;
+        };
+        SelectCustomerDialogComponent.prototype.cancel = function () {
+            this.resolveWith();
+        };
+        SelectCustomerDialogComponent.prototype.select = function () {
+            if (this.useExisting && this.selectedCustomer.length === 1) {
+                this.resolveWith(this.selectedCustomer[0]);
+            }
+            if (this.createNew && this.customerForm.valid) {
+                var formValue = this.customerForm.value;
+                this.resolveWith(formValue);
+            }
+        };
+        return SelectCustomerDialogComponent;
+    }());
+    SelectCustomerDialogComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'vdr-select-customer-dialog',
+                    template: "<ng-template vdrDialogTitle>{{ 'order.set-customer-for-order' | translate }}</ng-template>\r\n\r\n<clr-tabs>\r\n    <clr-tab>\r\n        <button clrTabLink>{{ 'order.existing-customer' | translate }}</button>\r\n\r\n        <ng-template [(clrIfActive)]=\"useExisting\">\r\n            <clr-tab-content>\r\n                <ng-select\r\n                    [items]=\"customers$ | async\"\r\n                    appendTo=\"body\"\r\n                    bindLabel=\"name\"\r\n                    [addTag]=\"false\"\r\n                    [multiple]=\"true\"\r\n                    [hideSelected]=\"true\"\r\n                    [trackByFn]=\"trackByFn\"\r\n                    [minTermLength]=\"2\"\r\n                    [loading]=\"isLoading\"\r\n                    [typeahead]=\"input$\"\r\n                    [(ngModel)]=\"selectedCustomer\"\r\n                    class=\"mt4\"\r\n                >\r\n                    <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n                        <clr-icon shape=\"user\" class=\"is-solid\"></clr-icon\r\n                        ><span class=\"ml2 mr2\">{{ item.firstName }} {{ item.lastName }}</span>\r\n                        <vdr-chip>{{ item.emailAddress }}</vdr-chip>\r\n                    </ng-template>\r\n                    <ng-template ng-option-tmp let-item=\"item\">\r\n                        <clr-icon shape=\"user\" class=\"is-solid\"></clr-icon\r\n                        ><span class=\"ml2 mr2\">{{ item.firstName }} {{ item.lastName }}</span>\r\n                        <vdr-chip>{{ item.emailAddress }}</vdr-chip>\r\n                    </ng-template>\r\n                </ng-select>\r\n            </clr-tab-content>\r\n        </ng-template>\r\n    </clr-tab>\r\n    <clr-tab>\r\n        <button clrTabLink>{{ 'customer.create-new-customer' | translate }}</button>\r\n\r\n        <ng-template [(clrIfActive)]=\"createNew\">\r\n            <clr-tab-content>\r\n                <form [formGroup]=\"customerForm\">\r\n                <vdr-form-field [label]=\"'customer.title' | translate\" for=\"title\">\r\n                    <input id=\"title\" type=\"text\" formControlName=\"title\" />\r\n                </vdr-form-field>\r\n                <vdr-form-field [label]=\"'customer.first-name' | translate\" for=\"firstName\">\r\n                    <input id=\"firstName\" type=\"text\" formControlName=\"firstName\" />\r\n                </vdr-form-field>\r\n                <vdr-form-field [label]=\"'customer.last-name' | translate\" for=\"lastName\">\r\n                    <input id=\"lastName\" type=\"text\" formControlName=\"lastName\" />\r\n                </vdr-form-field>\r\n                <vdr-form-field [label]=\"'customer.email-address' | translate\" for=\"emailAddress\">\r\n                    <input id=\"emailAddress\" type=\"text\" formControlName=\"emailAddress\" />\r\n                </vdr-form-field>\r\n                <vdr-form-field [label]=\"'customer.phone-number' | translate\" for=\"phoneNumber\">\r\n                    <input id=\"phoneNumber\" type=\"text\" formControlName=\"phoneNumber\" />\r\n                </vdr-form-field>\r\n                </form>\r\n            </clr-tab-content>\r\n        </ng-template>\r\n    </clr-tab>\r\n</clr-tabs>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button\r\n        type=\"submit\"\r\n        (click)=\"select()\"\r\n        [disabled]=\"(useExisting && selectedCustomer.length === 0) || (createNew && customerForm.invalid)\"\r\n        class=\"btn btn-primary\"\r\n    >\r\n        {{ 'common.okay' | translate }}\r\n    </button>\r\n</ng-template>\r\n",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [""]
+                },] }
+    ];
+    SelectCustomerDialogComponent.ctorParameters = function () { return [
+        { type: i1.DataService },
+        { type: forms.FormBuilder }
+    ]; };
+
+    var SelectShippingMethodDialogComponent = /** @class */ (function () {
+        function SelectShippingMethodDialogComponent() {
+        }
+        SelectShippingMethodDialogComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            if (this.currentSelectionId) {
+                this.selectedMethod = this.eligibleShippingMethods.find(function (m) { return m.id === _this.currentSelectionId; });
+            }
+        };
+        SelectShippingMethodDialogComponent.prototype.methodIdFn = function (item) {
+            return item.id;
+        };
+        SelectShippingMethodDialogComponent.prototype.cancel = function () {
+            this.resolveWith();
+        };
+        SelectShippingMethodDialogComponent.prototype.select = function () {
+            if (this.selectedMethod) {
+                this.resolveWith(this.selectedMethod.id);
+            }
+        };
+        return SelectShippingMethodDialogComponent;
+    }());
+    SelectShippingMethodDialogComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'vdr-select-shipping-method-dialog',
+                    template: "<ng-template vdrDialogTitle>{{ 'order.select-shipping-method' | translate }}</ng-template>\r\n<vdr-radio-card-fieldset\r\n    [idFn]=\"methodIdFn\"\r\n    [selectedItemId]=\"selectedMethod?.id\"\r\n    (selectItem)=\"selectedMethod = $event\"\r\n>\r\n    <vdr-radio-card *ngFor=\"let quote of eligibleShippingMethods\" [item]=\"quote\">\r\n        <div class=\"result-details\">\r\n            <vdr-labeled-data [label]=\"'settings.shipping-method' | translate\">\r\n                {{ quote.name }}\r\n            </vdr-labeled-data>\r\n            <div class=\"price-row\">\r\n                <vdr-labeled-data [label]=\"'common.price' | translate\">\r\n                    {{ quote.price | localeCurrency: currencyCode }}\r\n                </vdr-labeled-data>\r\n                <vdr-labeled-data [label]=\"'common.price-with-tax' | translate\">\r\n                    {{ quote.priceWithTax | localeCurrency: currencyCode }}\r\n                </vdr-labeled-data>\r\n            </div>\r\n            <vdr-object-tree *ngIf=\"quote.metadata\" [value]=\"quote.metadata\"></vdr-object-tree>\r\n        </div>\r\n    </vdr-radio-card>\r\n</vdr-radio-card-fieldset>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button\r\n        type=\"submit\"\r\n        (click)=\"select()\"\r\n        [disabled]=\"!selectedMethod\"\r\n        class=\"btn btn-primary\"\r\n    >\r\n        {{ 'common.okay' | translate }}\r\n    </button>\r\n</ng-template>\r\n",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [""]
+                },] }
+    ];
+    SelectShippingMethodDialogComponent.ctorParameters = function () { return []; };
+
+    var DraftOrderDetailComponent = /** @class */ (function (_super) {
+        __extends(DraftOrderDetailComponent, _super);
+        function DraftOrderDetailComponent(router, route, serverConfigService, changeDetector, dataService, notificationService, modalService, orderTransitionService) {
+            var _this = _super.call(this, route, router, serverConfigService, dataService) || this;
+            _this.changeDetector = changeDetector;
+            _this.dataService = dataService;
+            _this.notificationService = notificationService;
+            _this.modalService = modalService;
+            _this.orderTransitionService = orderTransitionService;
+            _this.detailForm = new forms.FormGroup({});
+            _this.fetchHistory = new rxjs.Subject();
+            _this.displayCouponCodeInput = false;
+            return _this;
+        }
+        DraftOrderDetailComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.init();
+            this.orderLineCustomFields = this.getCustomFieldConfig('OrderLine');
+            this.eligibleShippingMethods$ = this.entity$.pipe(operators.switchMap(function (order) { return _this.dataService.order
+                .getDraftOrderEligibleShippingMethods(order.id)
+                .mapSingle(function (_c) {
+                var eligibleShippingMethodsForDraftOrder = _c.eligibleShippingMethodsForDraftOrder;
+                return eligibleShippingMethodsForDraftOrder;
+            }); }));
+            this.customFields = this.getCustomFieldConfig('Order');
+            this.orderLineCustomFields = this.getCustomFieldConfig('OrderLine');
+        };
+        DraftOrderDetailComponent.prototype.ngOnDestroy = function () {
+            this.destroy();
+        };
+        DraftOrderDetailComponent.prototype.addItemToOrder = function (event) {
+            var _this = this;
+            this.dataService.order.addItemToDraftOrder(this.id, event).subscribe(function (result) {
+                if (result.addItemToDraftOrder.__typename !== 'Order') {
+                    _this.notificationService.error(result.addItemToDraftOrder.message);
+                }
+            });
+        };
+        DraftOrderDetailComponent.prototype.adjustOrderLine = function (event) {
+            var _this = this;
+            this.dataService.order
+                .adjustDraftOrderLine(this.id, { orderLineId: event.lineId, quantity: event.quantity })
+                .subscribe(function (result) {
+                if (result.adjustDraftOrderLine.__typename !== 'Order') {
+                    _this.notificationService.error(result.adjustDraftOrderLine.message);
+                }
+            });
+        };
+        DraftOrderDetailComponent.prototype.removeOrderLine = function (event) {
+            var _this = this;
+            this.dataService.order.removeDraftOrderLine(this.id, event.lineId).subscribe(function (result) {
+                if (result.removeDraftOrderLine.__typename !== 'Order') {
+                    _this.notificationService.error(result.removeDraftOrderLine.message);
+                }
+            });
+        };
+        DraftOrderDetailComponent.prototype.getOrderAddressLines = function (orderAddress) {
+            if (!orderAddress) {
+                return [];
+            }
+            return Object.values(orderAddress)
+                .filter(function (val) { return val !== 'OrderAddress'; })
+                .filter(function (line) { return !!line; });
+        };
+        DraftOrderDetailComponent.prototype.setCustomer = function () {
+            var _this = this;
+            this.modalService.fromComponent(SelectCustomerDialogComponent).subscribe(function (result) {
+                if (_this.hasId(result)) {
+                    _this.dataService.order
+                        .setCustomerForDraftOrder(_this.id, { customerId: result.id })
+                        .subscribe();
+                }
+                else if (result) {
+                    _this.dataService.order.setCustomerForDraftOrder(_this.id, { input: result }).subscribe();
+                }
+            });
+        };
+        DraftOrderDetailComponent.prototype.setShippingAddress = function () {
+            var _this = this;
+            this.entity$
+                .pipe(operators.take(1), operators.switchMap(function (order) {
+                var _a, _b;
+                return _this.modalService.fromComponent(SelectAddressDialogComponent, {
+                    locals: {
+                        customerId: (_a = order.customer) === null || _a === void 0 ? void 0 : _a.id,
+                        currentAddress: (_b = order.shippingAddress) !== null && _b !== void 0 ? _b : undefined,
+                    },
+                });
+            }))
+                .subscribe(function (result) {
+                if (result) {
+                    _this.dataService.order.setDraftOrderShippingAddress(_this.id, result).subscribe();
+                }
+            });
+        };
+        DraftOrderDetailComponent.prototype.setBillingAddress = function () {
+            var _this = this;
+            this.entity$
+                .pipe(operators.take(1), operators.switchMap(function (order) {
+                var _a, _b;
+                return _this.modalService.fromComponent(SelectAddressDialogComponent, {
+                    locals: {
+                        customerId: (_a = order.customer) === null || _a === void 0 ? void 0 : _a.id,
+                        currentAddress: (_b = order.billingAddress) !== null && _b !== void 0 ? _b : undefined,
+                    },
+                });
+            }))
+                .subscribe(function (result) {
+                if (result) {
+                    _this.dataService.order.setDraftOrderBillingAddress(_this.id, result).subscribe();
+                }
+            });
+        };
+        DraftOrderDetailComponent.prototype.applyCouponCode = function (couponCode) {
+            this.dataService.order.applyCouponCodeToDraftOrder(this.id, couponCode).subscribe();
+        };
+        DraftOrderDetailComponent.prototype.removeCouponCode = function (couponCode) {
+            this.dataService.order.removeCouponCodeFromDraftOrder(this.id, couponCode).subscribe();
+        };
+        DraftOrderDetailComponent.prototype.setShippingMethod = function () {
+            var _this = this;
+            rxjs.combineLatest(this.entity$, this.eligibleShippingMethods$)
+                .pipe(operators.take(1), operators.switchMap(function (_c) {
+                var _d = __read(_c, 2), order = _d[0], methods = _d[1];
+                var _a, _b;
+                return _this.modalService.fromComponent(SelectShippingMethodDialogComponent, {
+                    locals: {
+                        eligibleShippingMethods: methods,
+                        currencyCode: order.currencyCode,
+                        currentSelectionId: (_b = (_a = order.shippingLines) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.shippingMethod.id,
+                    },
+                });
+            }))
+                .subscribe(function (result) {
+                if (result) {
+                    _this.dataService.order.setDraftOrderShippingMethod(_this.id, result).subscribe();
+                }
+            });
+        };
+        DraftOrderDetailComponent.prototype.updateCustomFields = function (customFieldsValue) {
+            this.dataService.order
+                .updateOrderCustomFields({
+                id: this.id,
+                customFields: customFieldsValue,
+            })
+                .subscribe();
+        };
+        DraftOrderDetailComponent.prototype.deleteOrder = function () {
+            var _this = this;
+            this.dataService.order.deleteDraftOrder(this.id).subscribe(function (_c) {
+                var deleteDraftOrder = _c.deleteDraftOrder;
+                if (deleteDraftOrder.result === i1.DeletionResult.DELETED) {
+                    _this.notificationService.success(ngxTranslateExtractMarker.marker('common.notify-delete-success'), {
+                        entity: 'Order',
+                    });
+                    _this.router.navigate(['/orders']);
+                }
+                else if (deleteDraftOrder.message) {
+                    _this.notificationService.error(deleteDraftOrder.message);
+                }
+            });
+        };
+        DraftOrderDetailComponent.prototype.completeOrder = function () {
+            var _this = this;
+            this.dataService.order
+                .transitionToState(this.id, 'ArrangingPayment')
+                .subscribe(function (_c) {
+                var transitionOrderToState = _c.transitionOrderToState;
+                if ((transitionOrderToState === null || transitionOrderToState === void 0 ? void 0 : transitionOrderToState.__typename) === 'Order') {
+                    _this.router.navigate(['/orders', _this.id]);
+                }
+                else if ((transitionOrderToState === null || transitionOrderToState === void 0 ? void 0 : transitionOrderToState.__typename) === 'OrderStateTransitionError') {
+                    _this.notificationService.error(transitionOrderToState.transitionError);
+                }
+            });
+        };
+        DraftOrderDetailComponent.prototype.hasId = function (input) {
+            return typeof input === 'object' && !!input.id;
+        };
+        DraftOrderDetailComponent.prototype.setFormValues = function (entity) {
+            // empty
+        };
+        return DraftOrderDetailComponent;
+    }(i1.BaseDetailComponent));
+    DraftOrderDetailComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'vdr-draft-order-detail',
+                    template: "<vdr-action-bar *ngIf=\"entity$ | async as order\">\r\n    <vdr-ab-left>\r\n        <div class=\"flex clr-align-items-center\">\r\n            <vdr-entity-info [entity]=\"entity$ | async\"></vdr-entity-info>\r\n            <vdr-order-state-label [state]=\"order.state\"></vdr-order-state-label>\r\n        </div>\r\n    </vdr-ab-left>\r\n\r\n    <vdr-ab-right>\r\n        <button\r\n            class=\"btn btn-primary\"\r\n            (click)=\"completeOrder()\"\r\n            [disabled]=\"!order.customer || !order.lines.length || !order.shippingLines.length\"\r\n        >\r\n            <clr-icon shape=\"check\"></clr-icon>\r\n            {{ 'order.complete-draft-order' | translate }}\r\n        </button>\r\n        <vdr-dropdown>\r\n            <button class=\"icon-button\" vdrDropdownTrigger>\r\n                <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n            </button>\r\n            <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                <button type=\"button\" class=\"btn\" vdrDropdownItem (click)=\"deleteOrder()\">\r\n                    <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                    {{ 'order.delete-draft-order' | translate }}\r\n                </button>\r\n            </vdr-dropdown-menu>\r\n        </vdr-dropdown>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<div *ngIf=\"entity$ | async as order\">\r\n    <div class=\"clr-row\">\r\n        <div class=\"clr-col-lg-8\">\r\n            <vdr-draft-order-variant-selector\r\n                [orderLineCustomFields]=\"orderLineCustomFields\"\r\n                [currencyCode]=\"order.currencyCode\"\r\n                (addItem)=\"addItemToOrder($event)\"\r\n            ></vdr-draft-order-variant-selector>\r\n            <vdr-order-table\r\n                [order]=\"order\"\r\n                [orderLineCustomFields]=\"orderLineCustomFields\"\r\n                [isDraft]=\"true\"\r\n                (adjust)=\"adjustOrderLine($event)\"\r\n                (remove)=\"removeOrderLine($event)\"\r\n            ></vdr-order-table>\r\n            <div class=\"flex\">\r\n                <button\r\n                    *ngIf=\"order.couponCodes.length === 0 && !displayCouponCodeInput\"\r\n                    class=\"btn btn-link btn-sm mr2\"\r\n                    (click)=\"displayCouponCodeInput = !displayCouponCodeInput\"\r\n                >\r\n                    {{ 'order.set-coupon-codes' | translate }}\r\n                </button>\r\n                <div *ngIf=\"order.couponCodes.length || displayCouponCodeInput\">\r\n                    <label>{{ 'order.set-coupon-codes' | translate }}</label>\r\n                    <vdr-coupon-code-selector\r\n                        [couponCodes]=\"order.couponCodes\"\r\n                        (addCouponCode)=\"applyCouponCode($event)\"\r\n                        (removeCouponCode)=\"removeCouponCode($event)\"\r\n                    ></vdr-coupon-code-selector>\r\n                </div>\r\n            </div>\r\n            <ng-container *ngIf=\"order.taxSummary.length\">\r\n                <h4>{{ 'order.tax-summary' | translate }}</h4>\r\n                <table class=\"table\">\r\n                    <thead>\r\n                        <tr>\r\n                            <th>{{ 'common.description' | translate }}</th>\r\n                            <th>{{ 'order.tax-rate' | translate }}</th>\r\n                            <th>{{ 'order.tax-base' | translate }}</th>\r\n                            <th>{{ 'order.tax-total' | translate }}</th>\r\n                        </tr>\r\n                    </thead>\r\n                    <tbody>\r\n                        <tr *ngFor=\"let row of order.taxSummary\">\r\n                            <td>{{ row.description }}</td>\r\n                            <td>{{ row.taxRate / 100 | percent }}</td>\r\n                            <td>{{ row.taxBase | localeCurrency: order.currencyCode }}</td>\r\n                            <td>{{ row.taxTotal | localeCurrency: order.currencyCode }}</td>\r\n                        </tr>\r\n                    </tbody>\r\n                </table>\r\n            </ng-container>\r\n        </div>\r\n        <div class=\"clr-col-lg-4 order-cards\">\r\n            <div class=\"card\">\r\n                <div class=\"card-header\">\r\n                    <clr-icon *ngIf=\"!order.customer\" shape=\"unknown-status\" class=\"is-warning\"></clr-icon>\r\n                    <clr-icon *ngIf=\"order.customer\" shape=\"check\" class=\"is-success\"></clr-icon>\r\n                    {{ 'order.customer' | translate }}\r\n                </div>\r\n                <div class=\"card-block\">\r\n                    <div class=\"card-text\">\r\n                        <vdr-customer-label\r\n                            class=\"block mb2\"\r\n                            *ngIf=\"order.customer\"\r\n                            [customer]=\"order.customer\"\r\n                        ></vdr-customer-label>\r\n                        <button class=\"btn btn-link btn-sm\" (click)=\"setCustomer()\">\r\n                            {{ 'order.set-customer-for-order' | translate }}\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n                <div class=\"card-block\">\r\n                    <h4 class=\"card-title\">\r\n                        <clr-icon\r\n                            *ngIf=\"!order.billingAddress.streetLine1\"\r\n                            shape=\"unknown-status\"\r\n                            class=\"is-warning\"\r\n                        ></clr-icon>\r\n                        <clr-icon\r\n                            *ngIf=\"order.billingAddress.streetLine1\"\r\n                            shape=\"check\"\r\n                            class=\"is-success\"\r\n                        ></clr-icon>\r\n                        {{ 'order.billing-address' | translate }}\r\n                    </h4>\r\n                    <div class=\"card-text\">\r\n                        <vdr-formatted-address\r\n                            class=\"block mb2\"\r\n                            *ngIf=\"order.billingAddress\"\r\n                            [address]=\"order.billingAddress\"\r\n                        ></vdr-formatted-address>\r\n                        <button class=\"btn btn-link btn-sm\" (click)=\"setBillingAddress()\">\r\n                            {{ 'order.set-billing-address' | translate }}\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"card\">\r\n                <div class=\"card-header\">\r\n                    <clr-icon\r\n                        *ngIf=\"!order.shippingAddress.streetLine1 || !order.shippingLines.length\"\r\n                        shape=\"unknown-status\"\r\n                        class=\"is-warning\"\r\n                    ></clr-icon>\r\n                    <clr-icon\r\n                        *ngIf=\"order.shippingAddress.streetLine1 && order.shippingLines.length\"\r\n                        shape=\"check\"\r\n                        class=\"is-success\"\r\n                    ></clr-icon>\r\n                    {{ 'order.shipping' | translate }}\r\n                </div>\r\n                <div class=\"card-block\">\r\n                    <div class=\"card-text\">\r\n                        <vdr-formatted-address\r\n                            class=\"block mb2\"\r\n                            *ngIf=\"order.shippingAddress\"\r\n                            [address]=\"order.shippingAddress\"\r\n                        ></vdr-formatted-address>\r\n                        <button class=\"btn btn-link btn-sm\" (click)=\"setShippingAddress()\">\r\n                            {{ 'order.set-shipping-address' | translate }}\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n                <div class=\"card-block\">\r\n                    <div class=\"card-text\">\r\n                        <div *ngFor=\"let shippingLine of order.shippingLines\">\r\n                            {{ shippingLine.shippingMethod.name }}\r\n                        </div>\r\n                        <button class=\"btn btn-link btn-sm\" (click)=\"setShippingMethod()\">\r\n                            {{ 'order.set-shipping-method' | translate }}\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <vdr-order-custom-fields-card\r\n                [customFieldsConfig]=\"customFields\"\r\n                [customFieldValues]=\"order.customFields\"\r\n                (updateClick)=\"updateCustomFields($event)\"\r\n            ></vdr-order-custom-fields-card>\r\n        </div>\r\n    </div>\r\n</div>\r\n",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [""]
+                },] }
+    ];
+    DraftOrderDetailComponent.ctorParameters = function () { return [
+        { type: i1$1.Router },
+        { type: i1$1.ActivatedRoute },
+        { type: i1.ServerConfigService },
+        { type: i0.ChangeDetectorRef },
+        { type: i1.DataService },
+        { type: i1.NotificationService },
+        { type: i1.ModalService },
+        { type: OrderTransitionService }
+    ]; };
+
+    var DraftOrderVariantSelectorComponent = /** @class */ (function () {
+        function DraftOrderVariantSelectorComponent(dataService) {
+            this.dataService = dataService;
+            this.addItem = new i0.EventEmitter();
+            this.customFieldsFormGroup = new forms.FormGroup({});
+            this.selectedVariantId$ = new rxjs.Subject();
+            this.quantity = 1;
+        }
+        DraftOrderVariantSelectorComponent.prototype.ngOnInit = function () {
+            var e_1, _a;
+            var _this = this;
+            this.selectedVariant$ = this.selectedVariantId$.pipe(operators.switchMap(function (id) {
+                if (id) {
+                    return _this.dataService.product
+                        .getProductVariant(id)
+                        .mapSingle(function (_a) {
+                        var productVariant = _a.productVariant;
+                        return productVariant;
+                    });
+                }
+                else {
+                    return [undefined];
+                }
+            }));
+            try {
+                for (var _b = __values(this.orderLineCustomFields), _c = _b.next(); !_c.done; _c = _b.next()) {
+                    var customField = _c.value;
+                    this.customFieldsFormGroup.addControl(customField.name, new forms.FormControl(''));
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+        };
+        DraftOrderVariantSelectorComponent.prototype.addItemClick = function (selectedVariant) {
+            if (selectedVariant) {
+                this.addItem.emit({
+                    productVariantId: selectedVariant.id,
+                    quantity: this.quantity,
+                    customFields: this.orderLineCustomFields.length
+                        ? this.customFieldsFormGroup.value
+                        : undefined,
+                });
+                this.selectedVariantId$.next(undefined);
+                this.customFieldsFormGroup.reset();
+            }
+        };
+        return DraftOrderVariantSelectorComponent;
+    }());
+    DraftOrderVariantSelectorComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'vdr-draft-order-variant-selector',
+                    template: "<div class=\"card\">\r\n    <div class=\"card-block\">\r\n        <h4 class=\"card-title\">{{ 'order.add-item-to-order' | translate }}</h4>\r\n        <vdr-product-selector\r\n            (productSelected)=\"selectedVariantId$.next($event.productVariantId)\"\r\n        ></vdr-product-selector>\r\n    </div>\r\n    <div class=\"card-block\" *ngIf=\"selectedVariant$ | async as selectedVariant\">\r\n        <div class=\"variant-details\">\r\n            <img class=\"mr2\" [src]=\"selectedVariant.featuredAsset || selectedVariant.product.featuredAsset | assetPreview: 32\">\r\n            <div class=\"details\">\r\n                <div>{{ selectedVariant?.name }}</div>\r\n                <div class=\"small\">{{ selectedVariant?.sku }}</div>\r\n            </div>\r\n            <div class=\"details ml4\">\r\n                <div class=\"small\">\r\n                    {{ 'catalog.stock-on-hand' | translate }}: {{ selectedVariant.stockOnHand }}\r\n                </div>\r\n                <div class=\"small\">\r\n                    {{ 'catalog.stock-allocated' | translate }}: {{ selectedVariant.stockAllocated }}\r\n                </div>\r\n            </div>\r\n            <div class=\"flex-spacer\"></div>\r\n            <div class=\"details\">\r\n                <div>{{ selectedVariant?.priceWithTax | localeCurrency: currencyCode }}</div>\r\n                <div class=\"small\" [title]=\"'order.net-price' | translate\">\r\n                    {{ selectedVariant?.price | localeCurrency: currencyCode }}\r\n                </div>\r\n            </div>\r\n            <div>\r\n                <input [disabled]=\"!selectedVariant\" type=\"number\" min=\"0\" [(ngModel)]=\"quantity\" />\r\n            </div>\r\n            <button\r\n                [disabled]=\"!selectedVariant\"\r\n                class=\"btn btn-small btn-primary\"\r\n                (click)=\"addItemClick(selectedVariant)\"\r\n            >\r\n                {{ 'order.add-item-to-order' | translate }}\r\n            </button>\r\n        </div>\r\n        <ng-container *ngIf=\"orderLineCustomFields.length\">\r\n            <div class=\"custom-field\" *ngFor=\"let field of orderLineCustomFields\">\r\n                <vdr-custom-field-control\r\n                    [compact]=\"true\"\r\n                    [readonly]=\"false\"\r\n                    [customField]=\"field\"\r\n                    [customFieldsFormGroup]=\"customFieldsFormGroup\"\r\n                ></vdr-custom-field-control>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n</div>\r\n",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [".variant-details{display:flex;align-items:center}.variant-details img{border-radius:var(--border-radius-img);width:32px;height:32px}.variant-details .details{font-size:.65rem;line-height:.7rem}.variant-details input{width:48px;margin:0 6px}.variant-details .small{font-size:11px;color:var(--color-text-300)}\n"]
+                },] }
+    ];
+    DraftOrderVariantSelectorComponent.ctorParameters = function () { return [
+        { type: i1.DataService }
+    ]; };
+    DraftOrderVariantSelectorComponent.propDecorators = {
+        currencyCode: [{ type: i0.Input }],
+        orderLineCustomFields: [{ type: i0.Input }],
+        addItem: [{ type: i0.Output }]
+    };
+
+    var FulfillOrderDialogComponent = /** @class */ (function () {
+        function FulfillOrderDialogComponent(dataService, changeDetector) {
+            this.dataService = dataService;
+            this.changeDetector = changeDetector;
+            this.fulfillmentHandlerControl = new forms.FormControl();
+            this.fulfillmentQuantities = {};
+        }
+        FulfillOrderDialogComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.dataService.settings.getGlobalSettings().single$.subscribe(function (_c) {
+                var globalSettings = _c.globalSettings;
+                _this.fulfillmentQuantities = _this.order.lines.reduce(function (result, line) {
+                    var _c;
+                    var fulfillCount = _this.getFulfillableCount(line, globalSettings.trackInventory);
+                    return Object.assign(Object.assign({}, result), (_c = {}, _c[line.id] = { fulfillCount: fulfillCount, max: fulfillCount }, _c));
+                }, {});
+                _this.changeDetector.markForCheck();
+            });
+            this.dataService.shippingMethod
+                .getShippingMethodOperations()
+                .mapSingle(function (data) { return data.fulfillmentHandlers; })
+                .subscribe(function (handlers) {
+                _this.fulfillmentHandlerDef =
+                    handlers.find(function (h) { var _a, _b; return h.code === ((_b = (_a = _this.order.shippingLines[0]) === null || _a === void 0 ? void 0 : _a.shippingMethod) === null || _b === void 0 ? void 0 : _b.fulfillmentHandlerCode); }) || handlers[0];
+                _this.fulfillmentHandler = i1.configurableDefinitionToInstance(_this.fulfillmentHandlerDef);
+                _this.fulfillmentHandlerControl.patchValue(_this.fulfillmentHandler);
+                _this.changeDetector.markForCheck();
+            });
+        };
+        FulfillOrderDialogComponent.prototype.getFulfillableCount = function (line, globalTrackInventory) {
+            var _c = line.productVariant, trackInventory = _c.trackInventory, stockOnHand = _c.stockOnHand;
+            var effectiveTracInventory = trackInventory === i1.GlobalFlag.INHERIT ? globalTrackInventory : trackInventory === i1.GlobalFlag.TRUE;
+            var unfulfilledCount = this.getUnfulfilledCount(line);
+            return effectiveTracInventory ? Math.min(unfulfilledCount, stockOnHand) : unfulfilledCount;
+        };
+        FulfillOrderDialogComponent.prototype.getUnfulfilledCount = function (line) {
+            var _a, _b;
+            var fulfilled = (_b = (_a = line.fulfillments) === null || _a === void 0 ? void 0 : _a.map(function (f) { return f.summary; }).flat().filter(function (row) { return row.orderLine.id === line.id; }).reduce(function (sum, row) { return sum + row.quantity; }, 0)) !== null && _b !== void 0 ? _b : 0;
+            return line.quantity - fulfilled;
+        };
+        FulfillOrderDialogComponent.prototype.canSubmit = function () {
+            var totalCount = Object.values(this.fulfillmentQuantities).reduce(function (total, _c) {
+                var fulfillCount = _c.fulfillCount;
+                return total + fulfillCount;
+            }, 0);
+            var formIsValid = i1.configurableOperationValueIsValid(this.fulfillmentHandlerDef, this.fulfillmentHandlerControl.value) && this.fulfillmentHandlerControl.valid;
+            return formIsValid && 0 < totalCount;
+        };
+        FulfillOrderDialogComponent.prototype.select = function () {
+            var lines = Object.entries(this.fulfillmentQuantities).map(function (_c) {
+                var _d = __read(_c, 2), orderLineId = _d[0], fulfillCount = _d[1].fulfillCount;
+                return ({
+                    orderLineId: orderLineId,
+                    quantity: fulfillCount,
+                });
+            });
+            this.resolveWith({
+                lines: lines,
+                handler: i1.toConfigurableOperationInput(this.fulfillmentHandler, this.fulfillmentHandlerControl.value),
+            });
+        };
+        FulfillOrderDialogComponent.prototype.cancel = function () {
+            this.resolveWith();
+        };
+        return FulfillOrderDialogComponent;
+    }());
+    FulfillOrderDialogComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'vdr-fulfill-order-dialog',
+                    template: "<ng-template vdrDialogTitle>{{ 'order.fulfill-order' | translate }}</ng-template>\r\n\r\n<div class=\"fulfillment-wrapper\">\r\n    <div class=\"order-table\">\r\n        <table class=\"table\">\r\n            <thead>\r\n                <tr>\r\n                    <th></th>\r\n                    <th>{{ 'order.product-name' | translate }}</th>\r\n                    <th>{{ 'order.product-sku' | translate }}</th>\r\n                    <th>{{ 'order.unfulfilled' | translate }}</th>\r\n                    <th>{{ 'catalog.stock-on-hand' | translate }}</th>\r\n                    <th>{{ 'order.fulfill' | translate }}</th>\r\n                </tr>\r\n            </thead>\r\n            <tr\r\n                *ngFor=\"let line of order.lines\"\r\n                class=\"order-line\"\r\n                [class.ignore]=\"getUnfulfilledCount(line) === 0\"\r\n            >\r\n                <td class=\"align-middle thumb\">\r\n                    <img *ngIf=\"line.featuredAsset\" [src]=\"line.featuredAsset | assetPreview: 'tiny'\" />\r\n                </td>\r\n                <td class=\"align-middle name\">{{ line.productVariant.name }}</td>\r\n                <td class=\"align-middle sku\">{{ line.productVariant.sku }}</td>\r\n                <td class=\"align-middle quantity\">{{ getUnfulfilledCount(line) }}</td>\r\n                <td class=\"align-middle quantity\">{{ line.productVariant.stockOnHand }}</td>\r\n                <td class=\"align-middle fulfil\">\r\n                    <input\r\n                        *ngIf=\"fulfillmentQuantities[line.id]\"\r\n                        [disabled]=\"getUnfulfilledCount(line) === 0\"\r\n                        [(ngModel)]=\"fulfillmentQuantities[line.id].fulfillCount\"\r\n                        type=\"number\"\r\n                        [max]=\"fulfillmentQuantities[line.id].max\"\r\n                        min=\"0\"\r\n                    />\r\n                </td>\r\n            </tr>\r\n        </table>\r\n    </div>\r\n    <div class=\"shipping-details\">\r\n        <vdr-formatted-address [address]=\"order.shippingAddress\"></vdr-formatted-address>\r\n        <h6>{{ 'order.shipping-method' | translate }}</h6>\r\n        {{ order.shippingLines[0]?.shippingMethod?.name }}\r\n        <strong>{{ order.shipping | localeCurrency: order.currencyCode }}</strong>\r\n        <vdr-configurable-input\r\n            [operationDefinition]=\"fulfillmentHandlerDef\"\r\n            [operation]=\"fulfillmentHandler\"\r\n            [formControl]=\"fulfillmentHandlerControl\"\r\n            [removable]=\"false\"\r\n        ></vdr-configurable-input>\r\n    </div>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"select()\" [disabled]=\"!canSubmit()\" class=\"btn btn-primary\">\r\n        {{ 'order.create-fulfillment' | translate }}\r\n    </button>\r\n</ng-template>\r\n",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [":host{height:100%;display:flex;min-height:64vh}.fulfillment-wrapper{flex:1}@media screen and (min-width: 768px){.fulfillment-wrapper{display:flex;flex-direction:row}}.fulfillment-wrapper .shipping-details{margin-top:24px}@media screen and (min-width: 768px){.fulfillment-wrapper .shipping-details{margin-top:0;margin-left:24px;width:250px}}.fulfillment-wrapper .shipping-details clr-input-container{margin-top:24px}.fulfillment-wrapper .order-table{flex:1;overflow-y:auto}.fulfillment-wrapper .order-table table{margin-top:0}.fulfillment-wrapper tr.ignore{color:var(--color-grey-300)}\n"]
+                },] }
+    ];
+    FulfillOrderDialogComponent.ctorParameters = function () { return [
+        { type: i1.DataService },
+        { type: i0.ChangeDetectorRef }
+    ]; };
+
+    var FulfillmentCardComponent = /** @class */ (function () {
+        function FulfillmentCardComponent() {
+            this.transitionState = new i0.EventEmitter();
+        }
+        FulfillmentCardComponent.prototype.nextSuggestedState = function () {
+            var _a;
+            if (!this.fulfillment) {
+                return;
+            }
+            var nextStates = this.fulfillment.nextStates;
+            var namedStateOrDefault = function (targetState) { return nextStates.includes(targetState) ? targetState : nextStates[0]; };
+            switch ((_a = this.fulfillment) === null || _a === void 0 ? void 0 : _a.state) {
+                case 'Pending':
+                    return namedStateOrDefault('Shipped');
+                case 'Shipped':
+                    return namedStateOrDefault('Delivered');
+                default:
+                    return nextStates.find(function (s) { return s !== 'Cancelled'; });
+            }
+        };
+        FulfillmentCardComponent.prototype.nextOtherStates = function () {
+            if (!this.fulfillment) {
+                return [];
+            }
+            var suggested = this.nextSuggestedState();
+            return this.fulfillment.nextStates.filter(function (s) { return s !== suggested; });
+        };
+        return FulfillmentCardComponent;
+    }());
+    FulfillmentCardComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'vdr-fulfillment-card',
+                    template: "<div class=\"card\">\r\n    <div class=\"card-header fulfillment-header\">\r\n        <div>{{ 'order.fulfillment' | translate }}</div>\r\n        <div class=\"fulfillment-state\">\r\n            <vdr-fulfillment-state-label [state]=\"fulfillment?.state\"></vdr-fulfillment-state-label>\r\n        </div>\r\n    </div>\r\n    <div class=\"card-block\">\r\n        <vdr-fulfillment-detail\r\n            *ngIf=\"!!fulfillment\"\r\n            [fulfillmentId]=\"fulfillment?.id\"\r\n            [order]=\"order\"\r\n        ></vdr-fulfillment-detail>\r\n    </div>\r\n    <div class=\"card-footer\" *ngIf=\"fulfillment?.nextStates.length\">\r\n        <ng-container *ngIf=\"nextSuggestedState() as suggestedState\">\r\n            <button class=\"btn btn-sm btn-primary\" (click)=\"transitionState.emit(suggestedState)\">\r\n                {{ 'order.set-fulfillment-state' | translate: { state: (suggestedState | stateI18nToken | translate) } }}\r\n            </button>\r\n        </ng-container>\r\n        <vdr-dropdown>\r\n            <button class=\"icon-button\" vdrDropdownTrigger>\r\n                <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n            </button>\r\n            <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                <ng-container *ngFor=\"let nextState of nextOtherStates()\">\r\n                    <button\r\n                        type=\"button\"\r\n                        class=\"btn\"\r\n                        vdrDropdownItem\r\n                        (click)=\"transitionState.emit(nextState)\"\r\n                    >\r\n                        <ng-container *ngIf=\"nextState !== 'Cancelled'; else cancel\">\r\n                            <clr-icon shape=\"step-forward-2\"></clr-icon>\r\n                            {{ 'order.transition-to-state' | translate: { state: (nextState | stateI18nToken | translate) } }}\r\n                        </ng-container>\r\n                        <ng-template #cancel>\r\n                            <clr-icon shape=\"error-standard\" class=\"is-error\"></clr-icon>\r\n                            {{ 'order.cancel-fulfillment' | translate }}\r\n                        </ng-template>\r\n                    </button>\r\n                </ng-container>\r\n            </vdr-dropdown-menu>\r\n        </vdr-dropdown>\r\n    </div>\r\n</div>\r\n",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [".fulfillment-header{display:flex;justify-content:space-between;align-items:center}.card-footer{display:flex;align-items:center;justify-content:flex-end}\n"]
+                },] }
+    ];
+    FulfillmentCardComponent.propDecorators = {
+        fulfillment: [{ type: i0.Input }],
+        order: [{ type: i0.Input }],
+        transitionState: [{ type: i0.Output }]
+    };
+
+    var FulfillmentDetailComponent = /** @class */ (function () {
+        function FulfillmentDetailComponent(serverConfigService) {
+            this.serverConfigService = serverConfigService;
+            this.customFieldConfig = [];
+            this.customFieldFormGroup = new forms.FormGroup({});
+        }
+        FulfillmentDetailComponent.prototype.ngOnInit = function () {
+            this.customFieldConfig = this.serverConfigService.getCustomFieldsFor('Fulfillment');
+        };
+        FulfillmentDetailComponent.prototype.ngOnChanges = function (changes) {
+            this.buildCustomFieldsFormGroup();
+        };
+        Object.defineProperty(FulfillmentDetailComponent.prototype, "fulfillment", {
+            get: function () {
+                var _this = this;
+                return this.order.fulfillments && this.order.fulfillments.find(function (f) { return f.id === _this.fulfillmentId; });
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(FulfillmentDetailComponent.prototype, "items", {
+            get: function () {
+                var _this = this;
+                var _a, _b;
+                return ((_b = (_a = this.fulfillment) === null || _a === void 0 ? void 0 : _a.summary.map(function (row) {
+                    var _a, _b;
+                    return {
+                        name: (_b = (_a = _this.order.lines.find(function (line) { return line.id === row.orderLine.id; })) === null || _a === void 0 ? void 0 : _a.productVariant.name) !== null && _b !== void 0 ? _b : '',
+                        quantity: row.quantity,
+                    };
+                })) !== null && _b !== void 0 ? _b : []);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        FulfillmentDetailComponent.prototype.buildCustomFieldsFormGroup = function () {
+            var e_1, _c;
+            var customFields = this.fulfillment.customFields;
+            try {
+                for (var _d = __values(this.serverConfigService.getCustomFieldsFor('Fulfillment')), _e = _d.next(); !_e.done; _e = _d.next()) {
+                    var fieldDef = _e.value;
+                    this.customFieldFormGroup.addControl(fieldDef.name, new forms.FormControl(customFields[fieldDef.name]));
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (_e && !_e.done && (_c = _d.return)) _c.call(_d);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+        };
+        FulfillmentDetailComponent.prototype.customFieldIsObject = function (customField) {
+            return Array.isArray(customField) || sharedUtils.isObject(customField);
+        };
+        return FulfillmentDetailComponent;
+    }());
+    FulfillmentDetailComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'vdr-fulfillment-detail',
+                    template: "<vdr-labeled-data [label]=\"'common.created-at' | translate\">\r\n    {{ fulfillment?.createdAt | localeDate: 'medium' }}\r\n</vdr-labeled-data>\r\n<vdr-labeled-data [label]=\"'order.fulfillment-method' | translate\">\r\n    {{ fulfillment?.method }}\r\n</vdr-labeled-data>\r\n<vdr-labeled-data *ngIf=\"fulfillment?.trackingCode\" [label]=\"'order.tracking-code' | translate\">\r\n    {{ fulfillment?.trackingCode }}\r\n</vdr-labeled-data>\r\n<vdr-labeled-data [label]=\"'order.contents' | translate\">\r\n    <vdr-simple-item-list [items]=\"items\"></vdr-simple-item-list>\r\n</vdr-labeled-data>\r\n<ng-container *ngFor=\"let customField of customFieldConfig\">\r\n    <vdr-custom-field-control\r\n        *ngIf=\"customFieldFormGroup.get(customField.name)\"\r\n        [readonly]=\"true\"\r\n        [compact]=\"true\"\r\n        [customField]=\"customField\"\r\n        [customFieldsFormGroup]=\"customFieldFormGroup\"\r\n    ></vdr-custom-field-control>\r\n</ng-container>\r\n",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [""]
+                },] }
+    ];
+    FulfillmentDetailComponent.ctorParameters = function () { return [
+        { type: i1.ServerConfigService }
+    ]; };
+    FulfillmentDetailComponent.propDecorators = {
+        fulfillmentId: [{ type: i0.Input }],
+        order: [{ type: i0.Input }]
+    };
+
+    var FulfillmentStateLabelComponent = /** @class */ (function () {
+        function FulfillmentStateLabelComponent() {
+        }
+        Object.defineProperty(FulfillmentStateLabelComponent.prototype, "chipColorType", {
+            get: function () {
+                switch (this.state) {
+                    case 'Pending':
+                    case 'Shipped':
+                        return 'warning';
+                    case 'Delivered':
+                        return 'success';
+                    case 'Cancelled':
+                        return 'error';
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return FulfillmentStateLabelComponent;
+    }());
+    FulfillmentStateLabelComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'vdr-fulfillment-state-label',
+                    template: "<vdr-chip [title]=\"'order.payment-state' | translate\" [colorType]=\"chipColorType\">\r\n    <clr-icon shape=\"check-circle\" *ngIf=\"state === 'Delivered'\"></clr-icon>\r\n    {{ state | stateI18nToken | translate }}\r\n</vdr-chip>\r\n",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [":host{font-size:14px}\n"]
+                },] }
+    ];
+    FulfillmentStateLabelComponent.propDecorators = {
+        state: [{ type: i0.Input }]
+    };
+
+    var LineFulfillmentComponent = /** @class */ (function () {
+        function LineFulfillmentComponent() {
+            this.fulfilledCount = 0;
+            this.fulfillments = [];
+        }
+        LineFulfillmentComponent.prototype.ngOnChanges = function (changes) {
+            if (this.line) {
+                this.fulfilledCount = this.getDeliveredCount(this.line);
+                this.fulfillmentStatus = this.getFulfillmentStatus(this.fulfilledCount, this.line.items.length);
+                this.fulfillments = this.getFulfillments(this.line);
+            }
+        };
+        /**
+         * Returns the number of items in an OrderLine which are fulfilled.
+         */
+        LineFulfillmentComponent.prototype.getDeliveredCount = function (line) {
+            var _a, _b;
+            return ((_b = (_a = line.fulfillments) === null || _a === void 0 ? void 0 : _a.reduce(function (sum, fulfillment) { var _a, _b; return sum + ((_b = (_a = fulfillment.summary.find(function (s) { return s.orderLine.id === line.id; })) === null || _a === void 0 ? void 0 : _a.quantity) !== null && _b !== void 0 ? _b : 0); }, 0)) !== null && _b !== void 0 ? _b : 0);
+        };
+        LineFulfillmentComponent.prototype.getFulfillmentStatus = function (fulfilledCount, lineQuantity) {
+            if (fulfilledCount === lineQuantity) {
+                return 'full';
+            }
+            if (0 < fulfilledCount && fulfilledCount < lineQuantity) {
+                return 'partial';
+            }
+            return 'none';
+        };
+        LineFulfillmentComponent.prototype.getFulfillments = function (line) {
+            var _a, _b;
+            return ((_b = (_a = line.fulfillments) === null || _a === void 0 ? void 0 : _a.map(function (fulfillment) {
+                var _a;
+                var summaryLine = fulfillment.summary.find(function (s) { return s.orderLine.id === line.id; });
+                return {
+                    count: (_a = summaryLine === null || summaryLine === void 0 ? void 0 : summaryLine.quantity) !== null && _a !== void 0 ? _a : 0,
+                    fulfillment: fulfillment,
+                };
+            })) !== null && _b !== void 0 ? _b : []);
+        };
+        return LineFulfillmentComponent;
+    }());
+    LineFulfillmentComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'vdr-line-fulfillment',
+                    template: "<vdr-dropdown class=\"search-settings-menu\" *ngIf=\"fulfilledCount || orderState === 'PartiallyDelivered'\">\r\n    <button type=\"button\" class=\"icon-button\" vdrDropdownTrigger>\r\n        <clr-icon *ngIf=\"fulfillmentStatus === 'full'\" class=\"item-fulfilled\" shape=\"check-circle\"></clr-icon>\r\n        <clr-icon\r\n            *ngIf=\"fulfillmentStatus === 'partial'\"\r\n            class=\"item-partially-fulfilled\"\r\n            shape=\"check-circle\"\r\n        ></clr-icon>\r\n        <clr-icon\r\n            *ngIf=\"fulfillmentStatus === 'none'\"\r\n            class=\"item-not-fulfilled\"\r\n            shape=\"exclamation-circle\"\r\n        ></clr-icon>\r\n    </button>\r\n    <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n        <label class=\"dropdown-header\" *ngIf=\"fulfillmentStatus === 'full'\">\r\n            {{ 'order.line-fulfillment-all' | translate }}\r\n        </label>\r\n        <label class=\"dropdown-header\" *ngIf=\"fulfillmentStatus === 'partial'\">\r\n            {{\r\n                'order.line-fulfillment-partial' | translate: { total: line.quantity, count: fulfilledCount }\r\n            }}\r\n        </label>\r\n        <label class=\"dropdown-header\" *ngIf=\"fulfillmentStatus === 'none'\">\r\n            {{ 'order.line-fulfillment-none' | translate }}\r\n        </label>\r\n        <div class=\"fulfillment-detail\" *ngFor=\"let item of fulfillments\">\r\n            <div class=\"fulfillment-title\">\r\n                {{ 'order.fulfillment' | translate }} #{{ item.fulfillment.id }} ({{\r\n                    'order.item-count' | translate: { count: item.count }\r\n                }})\r\n            </div>\r\n            <vdr-labeled-data [label]=\"'common.created-at' | translate\">\r\n                {{ item.fulfillment.createdAt | localeDate: 'medium' }}\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data [label]=\"'order.fulfillment-method' | translate\">\r\n                {{ item.fulfillment.method }}\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data\r\n                *ngIf=\"item.fulfillment.trackingCode\"\r\n                [label]=\"'order.tracking-code' | translate\"\r\n            >\r\n                {{ item.fulfillment.trackingCode }}\r\n            </vdr-labeled-data>\r\n        </div>\r\n    </vdr-dropdown-menu>\r\n</vdr-dropdown>\r\n",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [".item-fulfilled{color:var(--color-success-500)}.item-partially-fulfilled{color:var(--color-warning-500)}.item-not-fulfilled{color:var(--color-error-500)}.fulfillment-detail{margin:6px 12px}.fulfillment-detail:not(:last-of-type){border-bottom:1px dashed var(--color-component-border-200)}\n"]
+                },] }
+    ];
+    LineFulfillmentComponent.propDecorators = {
+        line: [{ type: i0.Input }],
+        orderState: [{ type: i0.Input }]
+    };
+
+    var LineRefundsComponent = /** @class */ (function () {
+        function LineRefundsComponent() {
+        }
+        LineRefundsComponent.prototype.getRefundedCount = function () {
+            var _a, _b;
+            var refunds = (_b = (_a = this.payments) === null || _a === void 0 ? void 0 : _a.reduce(function (all, payment) { return __spreadArray(__spreadArray([], __read(all)), __read(payment.refunds)); }, [])) !== null && _b !== void 0 ? _b : [];
+            return this.line.items.filter(function (i) {
+                if (i.refundId === null && !i.cancelled) {
+                    return false;
+                }
+                if (i.refundId) {
+                    var refund = refunds.find(function (r) { return r.id === i.refundId; });
+                    if ((refund === null || refund === void 0 ? void 0 : refund.state) === 'Failed') {
+                        return false;
+                    }
+                    else {
+                        return true;
+                    }
+                }
+                return false;
+            }).length;
+        };
+        return LineRefundsComponent;
+    }());
+    LineRefundsComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'vdr-line-refunds',
+                    template: "<span *ngIf=\"getRefundedCount()\" [title]=\"'order.refunded-count' | translate: { count: getRefundedCount() }\">\r\n    <clr-icon shape=\"redo\" class=\"is-solid\" dir=\"down\"></clr-icon>\r\n</span>\r\n",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [":host{color:var(--color-error-500)}\n"]
+                },] }
+    ];
+    LineRefundsComponent.propDecorators = {
+        line: [{ type: i0.Input }],
+        payments: [{ type: i0.Input }]
+    };
+
+    var ModificationDetailComponent = /** @class */ (function () {
+        function ModificationDetailComponent() {
+            this.addedItems = new Map();
+            this.removedItems = new Map();
+        }
+        ModificationDetailComponent.prototype.ngOnChanges = function () {
+            var _c = this.getModifiedLines(), added = _c.added, removed = _c.removed;
+            this.addedItems = added;
+            this.removedItems = removed;
+        };
+        ModificationDetailComponent.prototype.getSurcharge = function (id) {
+            return this.order.surcharges.find(function (m) { return m.id === id; });
+        };
+        ModificationDetailComponent.prototype.getAddedItems = function () {
+            return __spreadArray([], __read(this.addedItems.entries())).map(function (_c) {
+                var _d = __read(_c, 2), line = _d[0], count = _d[1];
+                return { name: line.productVariant.name, quantity: count };
+            });
+        };
+        ModificationDetailComponent.prototype.getRemovedItems = function () {
+            return __spreadArray([], __read(this.removedItems.entries())).map(function (_c) {
+                var _d = __read(_c, 2), line = _d[0], count = _d[1];
+                return { name: line.productVariant.name, quantity: count };
+            });
+        };
+        ModificationDetailComponent.prototype.getModifiedLines = function () {
+            var e_1, _c;
+            var _a, _b;
+            var added = new Map();
+            var removed = new Map();
+            try {
+                for (var _d = __values(this.modification.orderItems || []), _e = _d.next(); !_e.done; _e = _d.next()) {
+                    var _item = _e.value;
+                    var result = this.getOrderLineAndItem(_item.id);
+                    if (result) {
+                        var line = result.line, item = result.item;
+                        if (item.cancelled) {
+                            var count = (_a = removed.get(line)) !== null && _a !== void 0 ? _a : 0;
+                            removed.set(line, count + 1);
+                        }
+                        else {
+                            var count = (_b = added.get(line)) !== null && _b !== void 0 ? _b : 0;
+                            added.set(line, count + 1);
+                        }
+                    }
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (_e && !_e.done && (_c = _d.return)) _c.call(_d);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+            return { added: added, removed: removed };
+        };
+        ModificationDetailComponent.prototype.getOrderLineAndItem = function (itemId) {
+            var e_2, _c;
+            try {
+                for (var _d = __values(this.order.lines), _e = _d.next(); !_e.done; _e = _d.next()) {
+                    var line = _e.value;
+                    var item = line.items.find(function (i) { return i.id === itemId; });
+                    if (item) {
+                        return { line: line, item: item };
+                    }
+                }
+            }
+            catch (e_2_1) { e_2 = { error: e_2_1 }; }
+            finally {
+                try {
+                    if (_e && !_e.done && (_c = _d.return)) _c.call(_d);
+                }
+                finally { if (e_2) throw e_2.error; }
+            }
+        };
+        return ModificationDetailComponent;
+    }());
+    ModificationDetailComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'vdr-modification-detail',
+                    template: "<vdr-labeled-data [label]=\"'common.ID' | translate\">{{ modification.id }}</vdr-labeled-data>\r\n<vdr-labeled-data *ngIf=\"modification.note\" [label]=\"'order.note' | translate\">{{\r\n    modification.note\r\n}}</vdr-labeled-data>\r\n<vdr-labeled-data *ngFor=\"let surcharge of modification.surcharges\" [label]=\"'order.surcharges' | translate\">\r\n    {{ getSurcharge(surcharge.id)?.description }}\r\n    {{ getSurcharge(surcharge.id)?.priceWithTax | localeCurrency: order.currencyCode }}</vdr-labeled-data\r\n>\r\n<vdr-labeled-data *ngIf=\"getAddedItems().length\" [label]=\"'order.added-items' | translate\">\r\n    <vdr-simple-item-list [items]=\"getAddedItems()\"></vdr-simple-item-list>\r\n</vdr-labeled-data>\r\n<vdr-labeled-data *ngIf=\"getRemovedItems().length\" [label]=\"'order.removed-items' | translate\">\r\n    <vdr-simple-item-list [items]=\"getRemovedItems()\"></vdr-simple-item-list>\r\n</vdr-labeled-data>\r\n",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [""]
+                },] }
+    ];
+    ModificationDetailComponent.propDecorators = {
+        order: [{ type: i0.Input }],
+        modification: [{ type: i0.Input }]
+    };
+
+    var OrderCustomFieldsCardComponent = /** @class */ (function () {
+        function OrderCustomFieldsCardComponent(formBuilder, modalService) {
+            this.formBuilder = formBuilder;
+            this.modalService = modalService;
+            this.customFieldsConfig = [];
+            this.customFieldValues = {};
+            this.updateClick = new i0.EventEmitter();
+            this.editable = false;
+        }
+        OrderCustomFieldsCardComponent.prototype.ngOnInit = function () {
+            var e_1, _a;
+            this.customFieldForm = this.formBuilder.group({});
+            try {
+                for (var _b = __values(this.customFieldsConfig), _c = _b.next(); !_c.done; _c = _b.next()) {
+                    var field = _c.value;
+                    this.customFieldForm.addControl(field.name, this.formBuilder.control(this.customFieldValues[field.name]));
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+        };
+        OrderCustomFieldsCardComponent.prototype.onUpdateClick = function () {
+            this.updateClick.emit(this.customFieldForm.value);
+            this.customFieldForm.markAsPristine();
+            this.editable = false;
+        };
+        OrderCustomFieldsCardComponent.prototype.onCancelClick = function () {
+            var _this = this;
+            if (this.customFieldForm.dirty) {
+                this.modalService
+                    .dialog({
+                    title: ngxTranslateExtractMarker.marker('catalog.confirm-cancel'),
+                    buttons: [
+                        { type: 'secondary', label: ngxTranslateExtractMarker.marker('common.keep-editing') },
+                        { type: 'danger', label: ngxTranslateExtractMarker.marker('common.discard-changes'), returnValue: true },
+                    ],
+                })
+                    .subscribe(function (result) {
+                    if (result) {
+                        _this.customFieldForm.reset();
+                        _this.customFieldForm.markAsPristine();
+                        _this.editable = false;
+                    }
+                });
+            }
+            else {
+                this.editable = false;
+            }
+        };
+        return OrderCustomFieldsCardComponent;
+    }());
+    OrderCustomFieldsCardComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'vdr-order-custom-fields-card',
+                    template: "<div class=\"card\" *ngIf=\"customFieldsConfig.length\">\r\n    <div class=\"card-header\">\r\n        {{ 'common.custom-fields' | translate }}\r\n    </div>\r\n    <div class=\"card-block\">\r\n        <div class=\"card-text custom-field-form\" [class.editable]=\"editable\">\r\n            <vdr-tabbed-custom-fields\r\n                entityName=\"Order\"\r\n                [customFields]=\"customFieldsConfig\"\r\n                [customFieldsFormGroup]=\"customFieldForm\"\r\n                [readonly]=\"!editable\"\r\n                [compact]=\"true\"\r\n            ></vdr-tabbed-custom-fields>\r\n        </div>\r\n    </div>\r\n    <div class=\"card-footer\">\r\n        <button class=\"btn btn-sm btn-secondary\" (click)=\"editable = true\" *ngIf=\"!editable\">\r\n            <clr-icon shape=\"pencil\"></clr-icon>\r\n            {{ 'common.edit' | translate }}\r\n        </button>\r\n        <button\r\n            class=\"btn btn-sm btn-primary\"\r\n            (click)=\"onUpdateClick()\"\r\n            *ngIf=\"editable\"\r\n            [disabled]=\"customFieldForm.pristine || customFieldForm.invalid\"\r\n        >\r\n            <clr-icon shape=\"check\"></clr-icon>\r\n            {{ 'common.update' | translate }}\r\n        </button>\r\n        <button\r\n            class=\"btn btn-sm btn-secondary\"\r\n            (click)=\"onCancelClick()\"\r\n            *ngIf=\"editable\"\r\n        >\r\n            <clr-icon shape=\"times\"></clr-icon>\r\n            {{ 'common.cancel' | translate }}\r\n        </button>\r\n    </div>\r\n</div>\r\n",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: ["vdr-custom-field-control{margin-bottom:6px;display:block}.custom-field-form ::ng-deep .clr-control-label{color:var(--color-grey-400)}.custom-field-form.editable ::ng-deep .clr-control-label{color:inherit}\n"]
+                },] }
+    ];
+    OrderCustomFieldsCardComponent.ctorParameters = function () { return [
+        { type: forms.FormBuilder },
+        { type: i1.ModalService }
+    ]; };
+    OrderCustomFieldsCardComponent.propDecorators = {
+        customFieldsConfig: [{ type: i0.Input }],
+        customFieldValues: [{ type: i0.Input }],
+        updateClick: [{ type: i0.Output }]
+    };
+
+    var OrderProcessGraphDialogComponent = /** @class */ (function () {
+        function OrderProcessGraphDialogComponent(serverConfigService) {
+            this.serverConfigService = serverConfigService;
+            this.states = [];
+        }
+        OrderProcessGraphDialogComponent.prototype.ngOnInit = function () {
+            this.states = this.serverConfigService.getOrderProcessStates();
+        };
+        return OrderProcessGraphDialogComponent;
+    }());
+    OrderProcessGraphDialogComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'vdr-order-process-graph-dialog',
+                    template: "<ng-template vdrDialogTitle>{{ 'order.order-state-diagram' | translate }}</ng-template>\r\n\r\n<vdr-order-process-graph [states]=\"states\" [initialState]=\"activeState\"></vdr-order-process-graph>\r\n",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [""]
+                },] }
+    ];
+    OrderProcessGraphDialogComponent.ctorParameters = function () { return [
+        { type: i1.ServerConfigService }
+    ]; };
+
+    var RefundOrderDialogComponent = /** @class */ (function () {
+        function RefundOrderDialogComponent(i18nService) {
+            var _this = this;
+            var _a;
+            this.i18nService = i18nService;
+            this.lineQuantities = {};
+            this.refundShipping = false;
+            this.adjustment = 0;
+            this.reasons = (_a = i1.getAppConfig().cancellationReasons) !== null && _a !== void 0 ? _a : [
+                ngxTranslateExtractMarker.marker('order.refund-reason-customer-request'),
+                ngxTranslateExtractMarker.marker('order.refund-reason-not-available'),
+            ];
+            this.reasons = this.reasons.map(function (r) { return _this.i18nService.translate(r); });
+        }
+        Object.defineProperty(RefundOrderDialogComponent.prototype, "refundTotal", {
+            get: function () {
+                var _this = this;
+                var itemTotal = this.order.lines.reduce(function (total, line) {
+                    var lineRef = _this.lineQuantities[line.id];
+                    var refundCount = (lineRef.refund && lineRef.quantity) || 0;
+                    return total + line.proratedUnitPriceWithTax * refundCount;
+                }, 0);
+                return itemTotal + (this.refundShipping ? this.order.shippingWithTax : 0) + this.adjustment;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(RefundOrderDialogComponent.prototype, "settledPaymentsTotal", {
+            get: function () {
+                return this.settledPayments
+                    .map(function (payment) {
+                    var paymentTotal = payment.amount;
+                    var alreadyRefundedTotal = sharedUtils.summate(payment.refunds.filter(function (r) { return r.state !== 'Failed'; }), 'total');
+                    return paymentTotal - alreadyRefundedTotal;
+                })
+                    .reduce(function (sum, amount) { return sum + amount; }, 0);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        RefundOrderDialogComponent.prototype.lineCanBeRefundedOrCancelled = function (line) {
+            var _a, _b;
+            var refunds = (_b = (_a = this.order.payments) === null || _a === void 0 ? void 0 : _a.reduce(function (all, payment) { return __spreadArray(__spreadArray([], __read(all)), __read(payment.refunds)); }, [])) !== null && _b !== void 0 ? _b : [];
+            var refundable = line.items.filter(function (i) {
+                if (i.cancelled) {
+                    return false;
+                }
+                if (i.refundId == null) {
+                    return true;
+                }
+                var refund = refunds.find(function (r) { return r.id === i.refundId; });
+                return (refund === null || refund === void 0 ? void 0 : refund.state) === 'Failed';
+            });
+            return 0 < refundable.length;
+        };
+        RefundOrderDialogComponent.prototype.ngOnInit = function () {
+            this.lineQuantities = this.order.lines.reduce(function (result, line) {
+                var _c;
+                return Object.assign(Object.assign({}, result), (_c = {}, _c[line.id] = {
+                    quantity: 0,
+                    refund: false,
+                    cancel: false,
+                }, _c));
+            }, {});
+            this.settledPayments = (this.order.payments || []).filter(function (p) { return p.state === 'Settled'; });
+            if (this.settledPayments.length) {
+                this.selectedPayment = this.settledPayments[0];
+            }
+        };
+        RefundOrderDialogComponent.prototype.handleZeroQuantity = function (line) {
+            if ((line === null || line === void 0 ? void 0 : line.quantity) === 0) {
+                line.cancel = false;
+                line.refund = false;
+            }
+        };
+        RefundOrderDialogComponent.prototype.isRefunding = function () {
+            var result = Object.values(this.lineQuantities).reduce(function (isRefunding, line) {
+                return isRefunding || (0 < line.quantity && line.refund);
+            }, false);
+            return result;
+        };
+        RefundOrderDialogComponent.prototype.isCancelling = function () {
+            var result = Object.values(this.lineQuantities).reduce(function (isCancelling, line) {
+                return isCancelling || (0 < line.quantity && line.cancel);
+            }, false);
+            return result;
+        };
+        RefundOrderDialogComponent.prototype.canSubmit = function () {
+            if (this.isRefunding()) {
+                return !!(this.selectedPayment &&
+                    this.reason &&
+                    0 < this.refundTotal &&
+                    this.refundTotal <= this.settledPaymentsTotal);
+            }
+            else if (this.isCancelling()) {
+                return !!this.reason;
+            }
+            return false;
+        };
+        RefundOrderDialogComponent.prototype.select = function () {
+            var payment = this.selectedPayment;
+            if (payment) {
+                var refundLines = this.getOrderLineInput(function (line) { return line.refund; });
+                var cancelLines = this.getOrderLineInput(function (line) { return line.cancel; });
+                this.resolveWith({
+                    refund: {
+                        lines: refundLines,
+                        reason: this.reason,
+                        shipping: this.refundShipping ? this.order.shippingWithTax : 0,
+                        adjustment: this.adjustment,
+                        paymentId: payment.id,
+                    },
+                    cancel: {
+                        lines: cancelLines,
+                        orderId: this.order.id,
+                        reason: this.reason,
+                        cancelShipping: this.refundShipping,
+                    },
+                });
+            }
+        };
+        RefundOrderDialogComponent.prototype.cancel = function () {
+            this.resolveWith();
+        };
+        RefundOrderDialogComponent.prototype.getOrderLineInput = function (filterFn) {
+            return Object.entries(this.lineQuantities)
+                .filter(function (_c) {
+                var _d = __read(_c, 2), orderLineId = _d[0], line = _d[1];
+                return 0 < line.quantity && filterFn(line);
+            })
+                .map(function (_c) {
+                var _d = __read(_c, 2), orderLineId = _d[0], line = _d[1];
+                return ({
+                    orderLineId: orderLineId,
+                    quantity: line.quantity,
+                });
+            });
+        };
+        return RefundOrderDialogComponent;
+    }());
+    RefundOrderDialogComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'vdr-refund-order-dialog',
+                    template: "<ng-template vdrDialogTitle>{{ 'order.refund-and-cancel-order' | translate }}</ng-template>\r\n\r\n<div class=\"refund-wrapper\">\r\n    <div class=\"order-table\">\r\n        <table class=\"table\">\r\n            <thead>\r\n                <tr>\r\n                    <th></th>\r\n                    <th>{{ 'order.product-name' | translate }}</th>\r\n                    <th>{{ 'order.product-sku' | translate }}</th>\r\n                    <th>{{ 'order.quantity' | translate }}</th>\r\n                    <th>{{ 'order.unit-price' | translate }}</th>\r\n                    <th>{{ 'order.prorated-unit-price' | translate }}</th>\r\n                    <th>{{ 'order.quantity' | translate }}</th>\r\n                    <th>{{ 'order.refund' | translate }}</th>\r\n                    <th>{{ 'order.cancel' | translate }}</th>\r\n                </tr>\r\n            </thead>\r\n            <tr *ngFor=\"let line of order.lines\" class=\"order-line\">\r\n                <td class=\"align-middle thumb\">\r\n                    <img [src]=\"line.featuredAsset | assetPreview: 'tiny'\" />\r\n                </td>\r\n                <td class=\"align-middle name\">{{ line.productVariant.name }}</td>\r\n                <td class=\"align-middle sku\">{{ line.productVariant.sku }}</td>\r\n                <td class=\"align-middle quantity\">\r\n                    {{ line.quantity }}\r\n                    <vdr-line-refunds [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\r\n                </td>\r\n                <td class=\"align-middle quantity\">\r\n                    {{ line.unitPriceWithTax | localeCurrency: order.currencyCode }}\r\n                </td>\r\n                <td class=\"align-middle quantity\">\r\n                    <div class=\"prorated-wrapper\">\r\n                        {{ line.proratedUnitPriceWithTax | localeCurrency: order.currencyCode }}\r\n                        <ng-container *ngIf=\"line.discounts as discounts\">\r\n                            <vdr-dropdown *ngIf=\"discounts.length\">\r\n                                <div class=\"promotions-label\" vdrDropdownTrigger>\r\n                                    <button class=\"icon-button\"><clr-icon shape=\"info\"></clr-icon></button>\r\n                                </div>\r\n                                <vdr-dropdown-menu>\r\n                                    <div class=\"line-promotion\" *ngFor=\"let discount of discounts\">\r\n                                        {{ discount.description }}\r\n                                        <div class=\"promotion-amount\">\r\n                                            {{\r\n                                                discount.amount / 100 / line.quantity\r\n                                                    | number: '1.0-2'\r\n                                                    | currency: order.currencyCode\r\n                                            }}\r\n                                        </div>\r\n                                    </div>\r\n                                </vdr-dropdown-menu>\r\n                            </vdr-dropdown>\r\n                        </ng-container>\r\n                    </div>\r\n                </td>\r\n                <td class=\"align-middle quantity-col\">\r\n                    <input\r\n                        *ngIf=\"lineCanBeRefundedOrCancelled(line)\"\r\n                        [(ngModel)]=\"lineQuantities[line.id].quantity\"\r\n                        type=\"number\"\r\n                        [max]=\"line.quantity\"\r\n                        min=\"0\"\r\n                        (input)=\"handleZeroQuantity(lineQuantities[line.id])\"\r\n                    />\r\n                </td>\r\n                <td class=\"align-middle\">\r\n                    <div class=\"cancel-checkbox-wrapper\">\r\n                        <input\r\n                            type=\"checkbox\"\r\n                            *ngIf=\"lineCanBeRefundedOrCancelled(line)\"\r\n                            clrCheckbox\r\n                            [disabled]=\"0 === lineQuantities[line.id].quantity\"\r\n                            [(ngModel)]=\"lineQuantities[line.id].refund\"\r\n                        />\r\n                    </div>\r\n                </td>\r\n                <td class=\"align-middle\">\r\n                    <div class=\"cancel-checkbox-wrapper\">\r\n                        <input\r\n                            type=\"checkbox\"\r\n                            *ngIf=\"lineCanBeRefundedOrCancelled(line)\"\r\n                            clrCheckbox\r\n                            [disabled]=\"0 === lineQuantities[line.id].quantity\"\r\n                            [(ngModel)]=\"lineQuantities[line.id].cancel\"\r\n                        />\r\n                    </div>\r\n                </td>\r\n            </tr>\r\n        </table>\r\n    </div>\r\n    <div class=\"refund-details mt4\" [class.faded]=\"!isRefunding() && !isCancelling()\">\r\n        <div>\r\n            <label class=\"clr-control-label\">{{ 'order.refund-cancellation-reason' | translate }}</label>\r\n            <ng-select\r\n                [disabled]=\"!isRefunding() && !isCancelling()\"\r\n                [items]=\"reasons\"\r\n                bindLabel=\"name\"\r\n                autofocus\r\n                [placeholder]=\"'order.refund-cancellation-reason-required' | translate\"\r\n                bindValue=\"id\"\r\n                [addTag]=\"true\"\r\n                [(ngModel)]=\"reason\"\r\n            ></ng-select>\r\n        </div>\r\n\r\n        <div>\r\n            <clr-select-container>\r\n                <label>{{ 'order.payment-to-refund' | translate }}</label>\r\n                <select clrSelect name=\"options\" [(ngModel)]=\"selectedPayment\" [disabled]=\"!isRefunding()\">\r\n                    <option\r\n                        *ngFor=\"let payment of settledPayments\"\r\n                        [ngValue]=\"payment\"\r\n                        [disabled]=\"payment.state !== 'Settled'\"\r\n                    >\r\n                        #{{ payment.id }} {{ payment.method }}:\r\n                        {{ payment.amount | localeCurrency: order.currencyCode }}\r\n                    </option>\r\n                </select>\r\n            </clr-select-container>\r\n\r\n            <clr-checkbox-wrapper>\r\n                <input type=\"checkbox\" clrCheckbox [(ngModel)]=\"refundShipping\" [disabled]=\"!isRefunding()\" />\r\n                <label>\r\n                    {{ 'order.refund-shipping' | translate }} ({{\r\n                        order.shippingWithTax | localeCurrency: order.currencyCode\r\n                    }})\r\n                </label>\r\n            </clr-checkbox-wrapper>\r\n            <clr-input-container>\r\n                <label>{{ 'order.refund-adjustment' | translate }}</label>\r\n                <vdr-currency-input\r\n                    clrInput\r\n                    [disabled]=\"!isRefunding()\"\r\n                    [currencyCode]=\"order.currencyCode\"\r\n                    [(ngModel)]=\"adjustment\"\r\n                ></vdr-currency-input>\r\n            </clr-input-container>\r\n            <div class=\"totals\" [class.disabled]=\"!isRefunding()\">\r\n                <div class=\"order-total\">\r\n                    {{ 'order.payment-amount' | translate }}:\r\n                    {{ selectedPayment.amount | localeCurrency: order.currencyCode }}\r\n                </div>\r\n                <div class=\"refund-total\">\r\n                    {{ 'order.refund-total' | translate }}:\r\n                    {{ refundTotal | localeCurrency: order.currencyCode }}\r\n                </div>\r\n                <div class=\"refund-total-error\" *ngIf=\"refundTotal < 0 || settledPaymentsTotal < refundTotal\">\r\n                    {{\r\n                        'order.refund-total-error'\r\n                            | translate\r\n                                : {\r\n                                      min: 0 | currency: order.currencyCode,\r\n                                      max: settledPaymentsTotal | localeCurrency: order.currencyCode\r\n                                  }\r\n                    }}\r\n                </div>\r\n                <div class=\"refund-total-warning\" *ngIf=\"selectedPayment.amount < refundTotal\">\r\n                    {{ 'order.refund-total-warning' | translate }}\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"select()\" [disabled]=\"!canSubmit()\" class=\"btn btn-primary\">\r\n        <ng-container *ngIf=\"isRefunding(); else cancelling\">\r\n            {{\r\n                'order.refund-with-amount'\r\n                    | translate: { amount: refundTotal | localeCurrency: order.currencyCode }\r\n            }}\r\n        </ng-container>\r\n        <ng-template #cancelling>\r\n            {{ 'order.cancel-selected-items' | translate }}\r\n        </ng-template>\r\n    </button>\r\n</ng-template>\r\n",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [":host{height:100%;display:flex;min-height:64vh}.refund-wrapper{flex:1;flex-direction:column}.refund-wrapper .order-table{flex:1;overflow-y:auto}.refund-wrapper .order-table table{margin-top:0}.refund-wrapper tr.ignore{color:var(--color-grey-300)}.quantity-col{background-color:var(--color-warning-100)}.cancel-checkbox-wrapper{display:flex;align-items:center;justify-content:center}clr-checkbox-wrapper{margin-top:12px;margin-bottom:12px;display:block}.refund-details{display:flex;justify-content:space-between}.refund-details.faded{opacity:.5}.totals{margin-top:48px}.totals .refund-total{font-size:18px}.totals .refund-total-error{color:var(--color-error-500)}.totals .refund-total-warning{color:var(--color-warning-600);max-width:250px}.totals.disabled{color:var(--color-grey-300)}.prorated-wrapper{display:flex;justify-content:center}.line-promotion{display:flex;justify-content:space-between;font-size:12px;padding:3px 6px}.line-promotion .promotion-amount{margin-left:12px}\n"]
+                },] }
+    ];
+    RefundOrderDialogComponent.ctorParameters = function () { return [
+        { type: i1.I18nService }
+    ]; };
+
+    var SettleRefundDialogComponent = /** @class */ (function () {
+        function SettleRefundDialogComponent() {
+            this.transactionId = '';
+        }
+        SettleRefundDialogComponent.prototype.submit = function () {
+            this.resolveWith(this.transactionId);
+        };
+        SettleRefundDialogComponent.prototype.cancel = function () {
+            this.resolveWith();
+        };
+        return SettleRefundDialogComponent;
+    }());
+    SettleRefundDialogComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'vdr-settle-refund-dialog',
+                    template: "<ng-template vdrDialogTitle>{{ 'order.settle-refund' | translate }}</ng-template>\r\n<p class=\"instruction\">\r\n    {{ 'order.settle-refund-manual-instructions' | translate: { method: refund.method } }}\r\n</p>\r\n<clr-input-container>\r\n    <label>{{ 'order.transaction-id' | translate }}</label>\r\n    <input clrInput name=\"transactionId\" [(ngModel)]=\"transactionId\" />\r\n</clr-input-container>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"submit()\" [disabled]=\"!transactionId\" class=\"btn btn-primary\">\r\n        {{ 'order.settle-refund' | translate }}\r\n    </button>\r\n</ng-template>\r\n",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [":host{padding-bottom:32px}.instruction{margin-top:0;margin-bottom:24px}\n"]
+                },] }
+    ];
+
+    var OrderDetailComponent = /** @class */ (function (_super) {
+        __extends(OrderDetailComponent, _super);
+        function OrderDetailComponent(router, route, serverConfigService, changeDetector, dataService, notificationService, modalService, orderTransitionService) {
+            var _this = _super.call(this, route, router, serverConfigService, dataService) || this;
+            _this.changeDetector = changeDetector;
+            _this.dataService = dataService;
+            _this.notificationService = notificationService;
+            _this.modalService = modalService;
+            _this.orderTransitionService = orderTransitionService;
+            _this.detailForm = new forms.FormGroup({});
+            _this.fetchHistory = new rxjs.Subject();
+            _this.defaultStates = [
+                'AddingItems',
+                'ArrangingPayment',
+                'PaymentAuthorized',
+                'PaymentSettled',
+                'PartiallyShipped',
+                'Shipped',
+                'PartiallyDelivered',
+                'Delivered',
+                'Cancelled',
+                'Modifying',
+                'ArrangingAdditionalPayment',
+            ];
+            return _this;
+        }
+        OrderDetailComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.init();
+            this.entity$.pipe(operators.take(1)).subscribe(function (order) {
+                if (order.state === 'Modifying') {
+                    _this.router.navigate(['./', 'modify'], { relativeTo: _this.route });
+                }
+            });
+            this.customFields = this.getCustomFieldConfig('Order');
+            this.orderLineCustomFields = this.getCustomFieldConfig('OrderLine');
+            this.history$ = this.fetchHistory.pipe(operators.startWith(null), operators.switchMap(function () {
+                return _this.dataService.order
+                    .getOrderHistory(_this.id, {
+                    sort: {
+                        createdAt: i1.SortOrder.DESC,
+                    },
+                })
+                    .mapStream(function (data) { var _a; return (_a = data.order) === null || _a === void 0 ? void 0 : _a.history.items; });
+            }));
+            this.nextStates$ = this.entity$.pipe(operators.map(function (order) {
+                var isInCustomState = !_this.defaultStates.includes(order.state);
+                return isInCustomState
+                    ? order.nextStates
+                    : order.nextStates.filter(function (s) { return !_this.defaultStates.includes(s); });
+            }));
+        };
+        OrderDetailComponent.prototype.ngOnDestroy = function () {
+            this.destroy();
+        };
+        OrderDetailComponent.prototype.openStateDiagram = function () {
+            var _this = this;
+            this.entity$
+                .pipe(operators.take(1), operators.switchMap(function (order) { return _this.modalService.fromComponent(OrderProcessGraphDialogComponent, {
+                closable: true,
+                locals: {
+                    activeState: order.state,
+                },
+            }); }))
+                .subscribe();
+        };
+        OrderDetailComponent.prototype.transitionToState = function (state) {
+            var _this = this;
+            this.dataService.order.transitionToState(this.id, state).subscribe(function (_d) {
+                var transitionOrderToState = _d.transitionOrderToState;
+                switch (transitionOrderToState === null || transitionOrderToState === void 0 ? void 0 : transitionOrderToState.__typename) {
+                    case 'Order':
+                        _this.notificationService.success(ngxTranslateExtractMarker.marker('order.transitioned-to-state-success'), { state: state });
+                        _this.fetchHistory.next();
+                        break;
+                    case 'OrderStateTransitionError':
+                        _this.notificationService.error(transitionOrderToState.transitionError);
+                }
+            });
+        };
+        OrderDetailComponent.prototype.manuallyTransitionToState = function (order) {
+            this.orderTransitionService
+                .manuallyTransitionToState({
+                orderId: order.id,
+                nextStates: order.nextStates,
+                cancellable: true,
+                message: ngxTranslateExtractMarker.marker('order.manually-transition-to-state-message'),
+                retry: 0,
+            })
+                .subscribe();
+        };
+        OrderDetailComponent.prototype.transitionToModifying = function () {
+            var _this = this;
+            this.dataService.order
+                .transitionToState(this.id, 'Modifying')
+                .subscribe(function (_d) {
+                var transitionOrderToState = _d.transitionOrderToState;
+                switch (transitionOrderToState === null || transitionOrderToState === void 0 ? void 0 : transitionOrderToState.__typename) {
+                    case 'Order':
+                        _this.router.navigate(['./modify'], { relativeTo: _this.route });
+                        break;
+                    case 'OrderStateTransitionError':
+                        _this.notificationService.error(transitionOrderToState.transitionError);
+                }
+            });
+        };
+        OrderDetailComponent.prototype.updateCustomFields = function (customFieldsValue) {
+            var _this = this;
+            this.dataService.order
+                .updateOrderCustomFields({
+                id: this.id,
+                customFields: customFieldsValue,
+            })
+                .subscribe(function () {
+                _this.notificationService.success(ngxTranslateExtractMarker.marker('common.notify-update-success'), { entity: 'Order' });
+            });
+        };
+        OrderDetailComponent.prototype.getOrderAddressLines = function (orderAddress) {
+            if (!orderAddress) {
+                return [];
+            }
+            return Object.values(orderAddress)
+                .filter(function (val) { return val !== 'OrderAddress'; })
+                .filter(function (line) { return !!line; });
+        };
+        OrderDetailComponent.prototype.settlePayment = function (payment) {
+            var _this = this;
+            this.dataService.order.settlePayment(payment.id).subscribe(function (_d) {
+                var settlePayment = _d.settlePayment;
+                switch (settlePayment.__typename) {
+                    case 'Payment':
+                        if (settlePayment.state === 'Settled') {
+                            _this.notificationService.success(ngxTranslateExtractMarker.marker('order.settle-payment-success'));
+                        }
+                        else {
+                            _this.notificationService.error(ngxTranslateExtractMarker.marker('order.settle-payment-error'));
+                        }
+                        _this.dataService.order.getOrder(_this.id).single$.subscribe();
+                        _this.fetchHistory.next();
+                        break;
+                    case 'OrderStateTransitionError':
+                    case 'PaymentStateTransitionError':
+                    case 'SettlePaymentError':
+                        _this.notificationService.error(settlePayment.message);
+                }
+            });
+        };
+        OrderDetailComponent.prototype.transitionPaymentState = function (_d) {
+            var _this = this;
+            var payment = _d.payment, state = _d.state;
+            if (state === 'Cancelled') {
+                this.dataService.order.cancelPayment(payment.id).subscribe(function (_d) {
+                    var cancelPayment = _d.cancelPayment;
+                    switch (cancelPayment.__typename) {
+                        case 'Payment':
+                            _this.notificationService.success(ngxTranslateExtractMarker.marker('order.transitioned-payment-to-state-success'), {
+                                state: state,
+                            });
+                            _this.dataService.order.getOrder(_this.id).single$.subscribe();
+                            _this.fetchHistory.next();
+                            break;
+                        case 'PaymentStateTransitionError':
+                            _this.notificationService.error(cancelPayment.transitionError);
+                            break;
+                        case 'CancelPaymentError':
+                            _this.notificationService.error(cancelPayment.paymentErrorMessage);
+                            break;
+                    }
+                });
+            }
+            else {
+                this.dataService.order
+                    .transitionPaymentToState(payment.id, state)
+                    .subscribe(function (_d) {
+                    var transitionPaymentToState = _d.transitionPaymentToState;
+                    switch (transitionPaymentToState.__typename) {
+                        case 'Payment':
+                            _this.notificationService.success(ngxTranslateExtractMarker.marker('order.transitioned-payment-to-state-success'), {
+                                state: state,
+                            });
+                            _this.dataService.order.getOrder(_this.id).single$.subscribe();
+                            _this.fetchHistory.next();
+                            break;
+                        case 'PaymentStateTransitionError':
+                            _this.notificationService.error(transitionPaymentToState.message);
+                            break;
+                    }
+                });
+            }
+        };
+        OrderDetailComponent.prototype.canAddFulfillment = function (order) {
+            var e_1, _d;
+            var _a;
+            var allFulfillmentSummaryRows = ((_a = order.fulfillments) !== null && _a !== void 0 ? _a : []).reduce(function (all, fulfillment) { return __spreadArray(__spreadArray([], __read(all)), __read(fulfillment.summary)); }, []);
+            var allItemsFulfilled = true;
+            var _loop_1 = function (line) {
+                var totalFulfilledCount = allFulfillmentSummaryRows
+                    .filter(function (row) { return row.orderLine.id === line.id; })
+                    .reduce(function (sum, row) { return sum + row.quantity; }, 0);
+                if (totalFulfilledCount < line.quantity) {
+                    allItemsFulfilled = false;
+                }
+            };
+            try {
+                for (var _e = __values(order.lines), _f = _e.next(); !_f.done; _f = _e.next()) {
+                    var line = _f.value;
+                    _loop_1(line);
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (_f && !_f.done && (_d = _e.return)) _d.call(_e);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+            return (!allItemsFulfilled &&
+                !this.hasUnsettledModifications(order) &&
+                this.outstandingPaymentAmount(order) === 0 &&
+                (order.nextStates.includes('Shipped') ||
+                    order.nextStates.includes('PartiallyShipped') ||
+                    order.nextStates.includes('Delivered')));
+        };
+        OrderDetailComponent.prototype.hasUnsettledModifications = function (order) {
+            return 0 < order.modifications.filter(function (m) { return !m.isSettled; }).length;
+        };
+        OrderDetailComponent.prototype.getOutstandingModificationAmount = function (order) {
+            return sharedUtils.summate(order.modifications.filter(function (m) { return !m.isSettled; }), 'priceChange');
+        };
+        OrderDetailComponent.prototype.outstandingPaymentAmount = function (order) {
+            var e_2, _d;
+            var _a, _b, _c;
+            var paymentIsValid = function (p) { return p.state !== 'Cancelled' && p.state !== 'Declined' && p.state !== 'Error'; };
+            var amountCovered = 0;
+            try {
+                for (var _e = __values((_b = (_a = order.payments) === null || _a === void 0 ? void 0 : _a.filter(paymentIsValid)) !== null && _b !== void 0 ? _b : []), _f = _e.next(); !_f.done; _f = _e.next()) {
+                    var payment = _f.value;
+                    var refunds = (_c = payment.refunds.filter(function (r) { return r.state !== 'Failed'; })) !== null && _c !== void 0 ? _c : [];
+                    var refundsTotal = sharedUtils.summate(refunds, 'total');
+                    amountCovered += payment.amount - refundsTotal;
+                }
+            }
+            catch (e_2_1) { e_2 = { error: e_2_1 }; }
+            finally {
+                try {
+                    if (_f && !_f.done && (_d = _e.return)) _d.call(_e);
+                }
+                finally { if (e_2) throw e_2.error; }
+            }
+            return order.totalWithTax - amountCovered;
+        };
+        OrderDetailComponent.prototype.addManualPayment = function (order) {
+            var _this = this;
+            var priorState = order.state;
+            this.modalService
+                .fromComponent(AddManualPaymentDialogComponent, {
+                closable: true,
+                locals: {
+                    outstandingAmount: this.outstandingPaymentAmount(order),
+                    currencyCode: order.currencyCode,
+                },
+            })
+                .pipe(operators.switchMap(function (result) {
+                if (result) {
+                    return _this.dataService.order.addManualPaymentToOrder({
+                        orderId: _this.id,
+                        transactionId: result.transactionId,
+                        method: result.method,
+                        metadata: result.metadata || {},
+                    });
+                }
+                else {
+                    return rxjs.EMPTY;
+                }
+            }), operators.switchMap(function (_d) {
+                var addManualPaymentToOrder = _d.addManualPaymentToOrder;
+                switch (addManualPaymentToOrder.__typename) {
+                    case 'Order':
+                        _this.notificationService.success(ngxTranslateExtractMarker.marker('order.add-payment-to-order-success'));
+                        if (priorState === 'ArrangingAdditionalPayment') {
+                            return _this.orderTransitionService.transitionToPreModifyingState(order.id, order.nextStates);
+                        }
+                        else {
+                            return _this.dataService.order
+                                .transitionToState(_this.id, 'PaymentSettled')
+                                .pipe(operators.mapTo('PaymentSettled'));
+                        }
+                    case 'ManualPaymentStateError':
+                        _this.notificationService.error(addManualPaymentToOrder.message);
+                        return rxjs.EMPTY;
+                    default:
+                        return rxjs.EMPTY;
+                }
+            }))
+                .subscribe(function (result) {
+                if (result) {
+                    _this.refetchOrder({ result: result });
+                }
+            });
+        };
+        OrderDetailComponent.prototype.fulfillOrder = function () {
+            var _this = this;
+            this.entity$
+                .pipe(operators.take(1), operators.switchMap(function (order) {
+                return _this.modalService.fromComponent(FulfillOrderDialogComponent, {
+                    size: 'xl',
+                    locals: {
+                        order: order,
+                    },
+                });
+            }), operators.switchMap(function (input) {
+                if (input) {
+                    return _this.dataService.order.createFulfillment(input);
+                }
+                else {
+                    return rxjs.of(undefined);
+                }
+            }), operators.switchMap(function (result) { return _this.refetchOrder(result).pipe(operators.mapTo(result)); }))
+                .subscribe(function (result) {
+                if (result) {
+                    var addFulfillmentToOrder = result.addFulfillmentToOrder;
+                    switch (addFulfillmentToOrder.__typename) {
+                        case 'Fulfillment':
+                            _this.notificationService.success(ngxTranslateExtractMarker.marker('order.create-fulfillment-success'));
+                            break;
+                        case 'EmptyOrderLineSelectionError':
+                        case 'InsufficientStockOnHandError':
+                        case 'ItemsAlreadyFulfilledError':
+                        case 'InvalidFulfillmentHandlerError':
+                            _this.notificationService.error(addFulfillmentToOrder.message);
+                            break;
+                        case 'FulfillmentStateTransitionError':
+                            _this.notificationService.error(addFulfillmentToOrder.transitionError);
+                            break;
+                        case 'CreateFulfillmentError':
+                            _this.notificationService.error(addFulfillmentToOrder.fulfillmentHandlerError);
+                            break;
+                        case undefined:
+                            _this.notificationService.error(JSON.stringify(addFulfillmentToOrder));
+                            break;
+                        default:
+                            sharedUtils.assertNever(addFulfillmentToOrder);
+                    }
+                }
+            });
+        };
+        OrderDetailComponent.prototype.transitionFulfillment = function (id, state) {
+            var _this = this;
+            this.dataService.order
+                .transitionFulfillmentToState(id, state)
+                .pipe(operators.switchMap(function (result) { return _this.refetchOrder(result); }))
+                .subscribe(function () {
+                _this.notificationService.success(ngxTranslateExtractMarker.marker('order.successfully-updated-fulfillment'));
+            });
+        };
+        OrderDetailComponent.prototype.cancelOrRefund = function (order) {
+            var isRefundable = this.orderHasSettledPayments(order);
+            if (order.state === 'PaymentAuthorized' || order.active === true || !isRefundable) {
+                this.cancelOrder(order);
+            }
+            else {
+                this.refundOrder(order);
+            }
+        };
+        OrderDetailComponent.prototype.settleRefund = function (refund) {
+            var _this = this;
+            this.modalService
+                .fromComponent(SettleRefundDialogComponent, {
+                size: 'md',
+                locals: {
+                    refund: refund,
+                },
+            })
+                .pipe(operators.switchMap(function (transactionId) {
+                if (transactionId) {
+                    return _this.dataService.order.settleRefund({
+                        transactionId: transactionId,
+                        id: refund.id,
+                    }, _this.id);
+                }
+                else {
+                    return rxjs.of(undefined);
+                }
+            }))
+                .subscribe(function (result) {
+                if (result) {
+                    _this.notificationService.success(ngxTranslateExtractMarker.marker('order.settle-refund-success'));
+                }
+            });
+        };
+        OrderDetailComponent.prototype.addNote = function (event) {
+            var _this = this;
+            var note = event.note, isPublic = event.isPublic;
+            this.dataService.order
+                .addNoteToOrder({
+                id: this.id,
+                note: note,
+                isPublic: isPublic,
+            })
+                .pipe(operators.switchMap(function (result) { return _this.refetchOrder(result); }))
+                .subscribe(function (result) {
+                _this.notificationService.success(ngxTranslateExtractMarker.marker('common.notify-create-success'), {
+                    entity: 'Note',
+                });
+            });
+        };
+        OrderDetailComponent.prototype.updateNote = function (entry) {
+            var _this = this;
+            this.modalService
+                .fromComponent(i1.EditNoteDialogComponent, {
+                closable: true,
+                locals: {
+                    displayPrivacyControls: true,
+                    note: entry.data.note,
+                    noteIsPrivate: !entry.isPublic,
+                },
+            })
+                .pipe(operators.switchMap(function (result) {
+                if (result) {
+                    return _this.dataService.order.updateOrderNote({
+                        noteId: entry.id,
+                        isPublic: !result.isPrivate,
+                        note: result.note,
+                    });
+                }
+                else {
+                    return rxjs.EMPTY;
+                }
+            }))
+                .subscribe(function (result) {
+                _this.fetchHistory.next();
+                _this.notificationService.success(ngxTranslateExtractMarker.marker('common.notify-update-success'), {
+                    entity: 'Note',
+                });
+            });
+        };
+        OrderDetailComponent.prototype.deleteNote = function (entry) {
+            var _this = this;
+            return this.modalService
+                .dialog({
+                title: ngxTranslateExtractMarker.marker('common.confirm-delete-note'),
+                body: entry.data.note,
+                buttons: [
+                    { type: 'secondary', label: ngxTranslateExtractMarker.marker('common.cancel') },
+                    { type: 'danger', label: ngxTranslateExtractMarker.marker('common.delete'), returnValue: true },
+                ],
+            })
+                .pipe(operators.switchMap(function (res) { return (res ? _this.dataService.order.deleteOrderNote(entry.id) : rxjs.EMPTY); }))
+                .subscribe(function () {
+                _this.fetchHistory.next();
+                _this.notificationService.success(ngxTranslateExtractMarker.marker('common.notify-delete-success'), {
+                    entity: 'Note',
+                });
+            });
+        };
+        OrderDetailComponent.prototype.orderHasSettledPayments = function (order) {
+            var _a;
+            return !!((_a = order.payments) === null || _a === void 0 ? void 0 : _a.find(function (p) { return p.state === 'Settled'; }));
+        };
+        OrderDetailComponent.prototype.cancelOrder = function (order) {
+            var _this = this;
+            this.modalService
+                .fromComponent(CancelOrderDialogComponent, {
+                size: 'xl',
+                locals: {
+                    order: order,
+                },
+            })
+                .pipe(operators.switchMap(function (input) {
+                if (input) {
+                    return _this.dataService.order.cancelOrder(input);
+                }
+                else {
+                    return rxjs.of(undefined);
+                }
+            }), operators.switchMap(function (result) { return _this.refetchOrder(result); }))
+                .subscribe(function (result) {
+                if (result) {
+                    _this.notificationService.success(ngxTranslateExtractMarker.marker('order.cancelled-order-success'));
+                }
+            });
+        };
+        OrderDetailComponent.prototype.refundOrder = function (order) {
+            var _this = this;
+            this.modalService
+                .fromComponent(RefundOrderDialogComponent, {
+                size: 'xl',
+                locals: {
+                    order: order,
+                },
+            })
+                .pipe(operators.switchMap(function (input) {
+                var _a;
+                if (!input) {
+                    return rxjs.of(undefined);
+                }
+                if ((_a = input.cancel.lines) === null || _a === void 0 ? void 0 : _a.length) {
+                    return _this.dataService.order.cancelOrder(input.cancel).pipe(operators.map(function (res) {
+                        var result = res.cancelOrder;
+                        switch (result.__typename) {
+                            case 'Order':
+                                _this.refetchOrder(result).subscribe();
+                                _this.notificationService.success(ngxTranslateExtractMarker.marker('order.cancelled-order-success'));
+                                return input;
+                            case 'CancelActiveOrderError':
+                            case 'QuantityTooGreatError':
+                            case 'MultipleOrderError':
+                            case 'OrderStateTransitionError':
+                            case 'EmptyOrderLineSelectionError':
+                                _this.notificationService.error(result.message);
+                                return undefined;
+                        }
+                    }));
+                }
+                else {
+                    return [input];
+                }
+            }), operators.switchMap(function (input) {
+                if (!input) {
+                    return rxjs.of(undefined);
+                }
+                if (input.refund.lines.length) {
+                    return _this.dataService.order
+                        .refundOrder(input.refund)
+                        .pipe(operators.map(function (res) { return res.refundOrder; }));
+                }
+                else {
+                    return [undefined];
+                }
+            }))
+                .subscribe(function (result) {
+                if (result) {
+                    switch (result.__typename) {
+                        case 'Refund':
+                            _this.refetchOrder(result).subscribe();
+                            if (result.state === 'Failed') {
+                                _this.notificationService.error(ngxTranslateExtractMarker.marker('order.refund-order-failed'));
+                            }
+                            else {
+                                _this.notificationService.success(ngxTranslateExtractMarker.marker('order.refund-order-success'));
+                            }
+                            break;
+                        case 'AlreadyRefundedError':
+                        case 'NothingToRefundError':
+                        case 'PaymentOrderMismatchError':
+                        case 'RefundOrderStateError':
+                        case 'RefundStateTransitionError':
+                            _this.notificationService.error(result.message);
+                            break;
+                    }
+                }
+            });
+        };
+        OrderDetailComponent.prototype.refetchOrder = function (result) {
+            this.fetchHistory.next();
+            if (result) {
+                return this.dataService.order.getOrder(this.id).single$;
+            }
+            else {
+                return rxjs.of(undefined);
+            }
+        };
+        OrderDetailComponent.prototype.setFormValues = function (entity) {
+            // empty
+        };
+        return OrderDetailComponent;
+    }(i1.BaseDetailComponent));
+    OrderDetailComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'vdr-order-detail',
+                    template: "<vdr-action-bar *ngIf=\"entity$ | async as order\">\r\n    <vdr-ab-left>\r\n        <div class=\"flex clr-align-items-center\">\r\n            <vdr-entity-info [entity]=\"entity$ | async\"></vdr-entity-info>\r\n            <vdr-order-state-label [state]=\"order.state\">\r\n                <button\r\n                    class=\"icon-button\"\r\n                    (click)=\"openStateDiagram()\"\r\n                    [title]=\"'order.order-state-diagram' | translate\"\r\n                >\r\n                    <clr-icon shape=\"list\"></clr-icon>\r\n                </button>\r\n            </vdr-order-state-label>\r\n        </div>\r\n    </vdr-ab-left>\r\n\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"order-detail\"></vdr-action-bar-items>\r\n        <button\r\n            class=\"btn btn-primary\"\r\n            *ngIf=\"\r\n                (order.state === 'ArrangingPayment' || order.state === 'ArrangingAdditionalPayment') &&\r\n                (hasUnsettledModifications(order) || 0 < outstandingPaymentAmount(order))\r\n            \"\r\n            (click)=\"addManualPayment(order)\"\r\n        >\r\n            {{ 'order.add-payment-to-order' | translate }}\r\n            ({{ outstandingPaymentAmount(order) | localeCurrency: order.currencyCode }})\r\n        </button>\r\n        <button\r\n            class=\"btn btn-primary\"\r\n            *ngIf=\"\r\n                order.active === false &&\r\n                order.state !== 'ArrangingAdditionalPayment' &&\r\n                order.state !== 'ArrangingPayment' &&\r\n                0 < outstandingPaymentAmount(order)\r\n            \"\r\n            (click)=\"transitionToState('ArrangingAdditionalPayment')\"\r\n        >\r\n            {{ 'order.arrange-additional-payment' | translate }}\r\n        </button>\r\n        <button class=\"btn btn-primary\" (click)=\"fulfillOrder()\" [disabled]=\"!canAddFulfillment(order)\">\r\n            {{ 'order.fulfill-order' | translate }}\r\n        </button>\r\n        <vdr-dropdown>\r\n            <button class=\"icon-button\" vdrDropdownTrigger>\r\n                <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n            </button>\r\n            <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                <ng-container *ngIf=\"order.nextStates.includes('Modifying')\">\r\n                    <button type=\"button\" class=\"btn\" vdrDropdownItem (click)=\"transitionToModifying()\">\r\n                        <clr-icon shape=\"pencil\"></clr-icon>\r\n                        {{ 'order.modify-order' | translate }}\r\n                    </button>\r\n                    <div class=\"dropdown-divider\"></div>\r\n                </ng-container>\r\n                <button\r\n                    type=\"button\"\r\n                    class=\"btn\"\r\n                    vdrDropdownItem\r\n                    *ngIf=\"order.nextStates.includes('Cancelled')\"\r\n                    (click)=\"cancelOrRefund(order)\"\r\n                >\r\n                    <clr-icon shape=\"error-standard\" class=\"is-error\"></clr-icon>\r\n                    <ng-container *ngIf=\"orderHasSettledPayments(order); else cancelOnly\">\r\n                        {{ 'order.refund-and-cancel-order' | translate }}\r\n                    </ng-container>\r\n                    <ng-template #cancelOnly>\r\n                        {{ 'order.cancel-order' | translate }}\r\n                    </ng-template>\r\n                </button>\r\n\r\n                <ng-container *ngIf=\"(nextStates$ | async)?.length\">\r\n                    <div class=\"dropdown-divider\"></div>\r\n                    <button\r\n                        *ngFor=\"let nextState of nextStates$ | async\"\r\n                        type=\"button\"\r\n                        class=\"btn\"\r\n                        vdrDropdownItem\r\n                        (click)=\"transitionToState(nextState)\"\r\n                    >\r\n                        <clr-icon shape=\"step-forward-2\"></clr-icon>\r\n                        {{\r\n                            'order.transition-to-state'\r\n                                | translate: { state: (nextState | stateI18nToken | translate) }\r\n                        }}\r\n                    </button>\r\n                </ng-container>\r\n                <div class=\"dropdown-divider\"></div>\r\n                <button type=\"button\" class=\"btn\" vdrDropdownItem (click)=\"manuallyTransitionToState(order)\">\r\n                    <clr-icon shape=\"step-forward-2\" class=\"is-warning\"></clr-icon>\r\n                    {{ 'order.manually-transition-to-state' | translate }}\r\n                </button>\r\n            </vdr-dropdown-menu>\r\n        </vdr-dropdown>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<div *ngIf=\"entity$ | async as order\">\r\n    <div class=\"clr-row\">\r\n        <div class=\"clr-col-lg-8\">\r\n            <vdr-order-table\r\n                [order]=\"order\"\r\n                [orderLineCustomFields]=\"orderLineCustomFields\"\r\n            ></vdr-order-table>\r\n            <h4>{{ 'order.tax-summary' | translate }}</h4>\r\n            <table class=\"table\">\r\n                <thead>\r\n                    <tr>\r\n                        <th>{{ 'common.description' | translate }}</th>\r\n                        <th>{{ 'order.tax-rate' | translate }}</th>\r\n                        <th>{{ 'order.tax-base' | translate }}</th>\r\n                        <th>{{ 'order.tax-total' | translate }}</th>\r\n                    </tr>\r\n                </thead>\r\n                <tbody>\r\n                    <tr *ngFor=\"let row of order.taxSummary\">\r\n                        <td>{{ row.description }}</td>\r\n                        <td>{{ row.taxRate / 100 | percent }}</td>\r\n                        <td>{{ row.taxBase | localeCurrency: order.currencyCode }}</td>\r\n                        <td>{{ row.taxTotal | localeCurrency: order.currencyCode }}</td>\r\n                    </tr>\r\n                </tbody>\r\n            </table>\r\n\r\n            <vdr-custom-detail-component-host\r\n                locationId=\"order-detail\"\r\n                [entity$]=\"entity$\"\r\n                [detailForm]=\"detailForm\"\r\n            ></vdr-custom-detail-component-host>\r\n\r\n            <vdr-order-history\r\n                [order]=\"order\"\r\n                [history]=\"history$ | async\"\r\n                (addNote)=\"addNote($event)\"\r\n                (updateNote)=\"updateNote($event)\"\r\n                (deleteNote)=\"deleteNote($event)\"\r\n            ></vdr-order-history>\r\n        </div>\r\n        <div class=\"clr-col-lg-4 order-cards\">\r\n            <vdr-order-custom-fields-card\r\n                [customFieldsConfig]=\"customFields\"\r\n                [customFieldValues]=\"order.customFields\"\r\n                (updateClick)=\"updateCustomFields($event)\"\r\n            ></vdr-order-custom-fields-card>\r\n            <div class=\"card\">\r\n                <div class=\"card-header\">\r\n                    {{ 'order.customer' | translate }}\r\n                </div>\r\n                <div class=\"card-block\">\r\n                    <div class=\"card-text\">\r\n                        <vdr-customer-label [customer]=\"order.customer\"></vdr-customer-label>\r\n                        <h6 *ngIf=\"getOrderAddressLines(order.shippingAddress).length\">\r\n                            {{ 'order.shipping-address' | translate }}\r\n                        </h6>\r\n                        <vdr-formatted-address [address]=\"order.shippingAddress\"></vdr-formatted-address>\r\n                        <h6 *ngIf=\"getOrderAddressLines(order.billingAddress).length\">\r\n                            {{ 'order.billing-address' | translate }}\r\n                        </h6>\r\n                        <vdr-formatted-address [address]=\"order.billingAddress\"></vdr-formatted-address>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <ng-container *ngIf=\"order.payments && order.payments.length\">\r\n                <vdr-order-payment-card\r\n                    *ngFor=\"let payment of order.payments\"\r\n                    [currencyCode]=\"order.currencyCode\"\r\n                    [payment]=\"payment\"\r\n                    (settlePayment)=\"settlePayment($event)\"\r\n                    (transitionPaymentState)=\"transitionPaymentState($event)\"\r\n                    (settleRefund)=\"settleRefund($event)\"\r\n                ></vdr-order-payment-card>\r\n            </ng-container>\r\n            <ng-container *ngFor=\"let fulfillment of order.fulfillments\">\r\n                <vdr-fulfillment-card\r\n                    [fulfillment]=\"fulfillment\"\r\n                    [order]=\"order\"\r\n                    (transitionState)=\"transitionFulfillment(fulfillment.id, $event)\"\r\n                ></vdr-fulfillment-card>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n</div>\r\n",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [".shipping-address{list-style-type:none;line-height:1.3em}.order-cards h6{margin-top:6px;color:var(--color-text-200)}\n"]
+                },] }
+    ];
+    OrderDetailComponent.ctorParameters = function () { return [
+        { type: i1$1.Router },
+        { type: i1$1.ActivatedRoute },
+        { type: i1.ServerConfigService },
+        { type: i0.ChangeDetectorRef },
+        { type: i1.DataService },
+        { type: i1.NotificationService },
+        { type: i1.ModalService },
+        { type: OrderTransitionService }
+    ]; };
+
+    exports.OrderEditResultType = void 0;
+    (function (OrderEditResultType) {
+        OrderEditResultType[OrderEditResultType["Refund"] = 0] = "Refund";
+        OrderEditResultType[OrderEditResultType["Payment"] = 1] = "Payment";
+        OrderEditResultType[OrderEditResultType["PriceUnchanged"] = 2] = "PriceUnchanged";
+        OrderEditResultType[OrderEditResultType["Cancel"] = 3] = "Cancel";
+    })(exports.OrderEditResultType || (exports.OrderEditResultType = {}));
+    var OrderEditsPreviewDialogComponent = /** @class */ (function () {
+        function OrderEditsPreviewDialogComponent() {
+        }
+        Object.defineProperty(OrderEditsPreviewDialogComponent.prototype, "priceDifference", {
+            get: function () {
+                return this.order.totalWithTax - this.originalTotalWithTax;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        OrderEditsPreviewDialogComponent.prototype.ngOnInit = function () {
+            this.refundNote = this.modifyOrderInput.note || '';
+        };
+        OrderEditsPreviewDialogComponent.prototype.cancel = function () {
+            this.resolveWith({
+                result: exports.OrderEditResultType.Cancel,
+            });
+        };
+        OrderEditsPreviewDialogComponent.prototype.submit = function () {
+            if (0 < this.priceDifference) {
+                this.resolveWith({
+                    result: exports.OrderEditResultType.Payment,
+                });
+            }
+            else if (this.priceDifference < 0) {
+                this.resolveWith({
+                    result: exports.OrderEditResultType.Refund,
+                    // tslint:disable-next-line:no-non-null-assertion
+                    refundPaymentId: this.selectedPayment.id,
+                    refundNote: this.refundNote,
+                });
+            }
+            else {
+                this.resolveWith({
+                    result: exports.OrderEditResultType.PriceUnchanged,
+                });
+            }
+        };
+        return OrderEditsPreviewDialogComponent;
+    }());
+    OrderEditsPreviewDialogComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'vdr-order-edits-preview-dialog',
+                    template: "<ng-template vdrDialogTitle>{{ 'order.confirm-modifications' | translate }}</ng-template>\r\n<vdr-order-table [order]=\"order\" [orderLineCustomFields]=\"orderLineCustomFields\"></vdr-order-table>\r\n\r\n<h4 class=\"h4\">\r\n    {{ 'order.modify-order-price-difference' | translate }}:\r\n    <strong>{{ priceDifference | localeCurrency: order.currencyCode }}</strong>\r\n</h4>\r\n<div *ngIf=\"priceDifference < 0\">\r\n<clr-select-container>\r\n    <label>{{ 'order.payment-to-refund' | translate }}</label>\r\n    <select clrSelect name=\"options\" [(ngModel)]=\"selectedPayment\">\r\n        <option\r\n            *ngFor=\"let payment of order.payments\"\r\n            [ngValue]=\"payment\"\r\n        >\r\n            #{{ payment.id }} {{ payment.method }}:\r\n            {{ payment.amount | localeCurrency: order.currencyCode }}\r\n        </option>\r\n    </select>\r\n</clr-select-container>\r\n    <label class=\"clr-control-label\">{{ 'order.refund-cancellation-reason' | translate }}</label>\r\n    <textarea [(ngModel)]=\"refundNote\" name=\"refundNote\" clrTextarea required></textarea>\r\n</div>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"submit()\" [disabled]=\"priceDifference < 0 && !selectedPayment\" class=\"btn btn-primary\">\r\n        {{ 'common.confirm' | translate }}\r\n    </button>\r\n</ng-template>\r\n",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [""]
+                },] }
+    ];
+
+    var OrderEditorComponent = /** @class */ (function (_super) {
+        __extends(OrderEditorComponent, _super);
+        function OrderEditorComponent(router, route, serverConfigService, changeDetector, dataService, notificationService, modalService, orderTransitionService) {
+            var _this = _super.call(this, route, router, serverConfigService, dataService) || this;
+            _this.changeDetector = changeDetector;
+            _this.dataService = dataService;
+            _this.notificationService = notificationService;
+            _this.modalService = modalService;
+            _this.orderTransitionService = orderTransitionService;
+            _this.detailForm = new forms.FormGroup({});
+            _this.couponCodesControl = new forms.FormControl();
+            _this.modifyOrderInput = {
+                dryRun: true,
+                orderId: '',
+                addItems: [],
+                adjustOrderLines: [],
+                surcharges: [],
+                note: '',
+                updateShippingAddress: {},
+                updateBillingAddress: {},
+            };
+            _this.note = '';
+            _this.recalculateShipping = true;
+            _this.addedVariants = new Map();
+            return _this;
+        }
+        Object.defineProperty(OrderEditorComponent.prototype, "addedLines", {
+            get: function () {
+                var _this = this;
+                var getSinglePriceValue = function (price) { return price.__typename === 'SinglePrice' ? price.value : 0; };
+                return (this.modifyOrderInput.addItems || [])
+                    .map(function (row) {
+                    var variantInfo = _this.addedVariants.get(row.productVariantId);
+                    if (variantInfo) {
+                        return Object.assign(Object.assign({}, variantInfo), { price: getSinglePriceValue(variantInfo.price), priceWithTax: getSinglePriceValue(variantInfo.priceWithTax), quantity: row.quantity });
+                    }
+                })
+                    .filter(sharedUtils.notNullOrUndefined);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        OrderEditorComponent.prototype.ngOnInit = function () {
+            var e_1, _u;
+            var _this = this;
+            this.init();
+            this.dataService.promotion.getPromotions();
+            this.addressCustomFields = this.getCustomFieldConfig('Address');
+            this.modifyOrderInput.orderId = this.route.snapshot.paramMap.get('id');
+            this.orderLineCustomFields = this.getCustomFieldConfig('OrderLine');
+            this.entity$.pipe(operators.takeUntil(this.destroy$)).subscribe(function (order) {
+                var e_2, _u;
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+                if (order.couponCodes.length) {
+                    _this.couponCodesControl.setValue(order.couponCodes);
+                }
+                _this.surchargeForm = new forms.FormGroup({
+                    description: new forms.FormControl('', forms.Validators.required),
+                    sku: new forms.FormControl(''),
+                    price: new forms.FormControl(0, forms.Validators.required),
+                    priceIncludesTax: new forms.FormControl(true),
+                    taxRate: new forms.FormControl(0),
+                    taxDescription: new forms.FormControl(''),
+                });
+                if (!_this.shippingAddressForm) {
+                    _this.shippingAddressForm = new forms.FormGroup({
+                        fullName: new forms.FormControl((_a = order.shippingAddress) === null || _a === void 0 ? void 0 : _a.fullName),
+                        company: new forms.FormControl((_b = order.shippingAddress) === null || _b === void 0 ? void 0 : _b.company),
+                        streetLine1: new forms.FormControl((_c = order.shippingAddress) === null || _c === void 0 ? void 0 : _c.streetLine1),
+                        streetLine2: new forms.FormControl((_d = order.shippingAddress) === null || _d === void 0 ? void 0 : _d.streetLine2),
+                        city: new forms.FormControl((_e = order.shippingAddress) === null || _e === void 0 ? void 0 : _e.city),
+                        province: new forms.FormControl((_f = order.shippingAddress) === null || _f === void 0 ? void 0 : _f.province),
+                        postalCode: new forms.FormControl((_g = order.shippingAddress) === null || _g === void 0 ? void 0 : _g.postalCode),
+                        countryCode: new forms.FormControl((_h = order.shippingAddress) === null || _h === void 0 ? void 0 : _h.countryCode),
+                        phoneNumber: new forms.FormControl((_j = order.shippingAddress) === null || _j === void 0 ? void 0 : _j.phoneNumber),
+                    });
+                    _this.addAddressCustomFieldsFormGroup(_this.shippingAddressForm, order.shippingAddress);
+                }
+                if (!_this.billingAddressForm) {
+                    _this.billingAddressForm = new forms.FormGroup({
+                        fullName: new forms.FormControl((_k = order.billingAddress) === null || _k === void 0 ? void 0 : _k.fullName),
+                        company: new forms.FormControl((_l = order.billingAddress) === null || _l === void 0 ? void 0 : _l.company),
+                        streetLine1: new forms.FormControl((_m = order.billingAddress) === null || _m === void 0 ? void 0 : _m.streetLine1),
+                        streetLine2: new forms.FormControl((_o = order.billingAddress) === null || _o === void 0 ? void 0 : _o.streetLine2),
+                        city: new forms.FormControl((_p = order.billingAddress) === null || _p === void 0 ? void 0 : _p.city),
+                        province: new forms.FormControl((_q = order.billingAddress) === null || _q === void 0 ? void 0 : _q.province),
+                        postalCode: new forms.FormControl((_r = order.billingAddress) === null || _r === void 0 ? void 0 : _r.postalCode),
+                        countryCode: new forms.FormControl((_s = order.billingAddress) === null || _s === void 0 ? void 0 : _s.countryCode),
+                        phoneNumber: new forms.FormControl((_t = order.billingAddress) === null || _t === void 0 ? void 0 : _t.phoneNumber),
+                    });
+                    _this.addAddressCustomFieldsFormGroup(_this.billingAddressForm, order.billingAddress);
+                }
+                _this.orderLineCustomFieldsFormArray = new forms.FormArray([]);
+                var _loop_1 = function (line) {
+                    var e_3, _x;
+                    var formGroup = new forms.FormGroup({});
+                    try {
+                        for (var _y = (e_3 = void 0, __values(_this.orderLineCustomFields)), _z = _y.next(); !_z.done; _z = _y.next()) {
+                            var name = _z.value.name;
+                            formGroup.addControl(name, new forms.FormControl(line.customFields[name]));
+                        }
+                    }
+                    catch (e_3_1) { e_3 = { error: e_3_1 }; }
+                    finally {
+                        try {
+                            if (_z && !_z.done && (_x = _y.return)) _x.call(_y);
+                        }
+                        finally { if (e_3) throw e_3.error; }
+                    }
+                    formGroup.valueChanges.pipe(operators.takeUntil(_this.destroy$)).subscribe(function (value) {
+                        var modifyRow = _this.modifyOrderInput.adjustOrderLines.find(function (l) { return l.orderLineId === line.id; });
+                        if (!modifyRow) {
+                            modifyRow = {
+                                orderLineId: line.id,
+                                quantity: line.quantity,
+                            };
+                            _this.modifyOrderInput.adjustOrderLines.push(modifyRow);
+                        }
+                        if (_this.orderLineCustomFields.length) {
+                            modifyRow.customFields = value;
+                        }
+                    });
+                    _this.orderLineCustomFieldsFormArray.push(formGroup);
+                };
+                try {
+                    for (var _v = __values(order.lines), _w = _v.next(); !_w.done; _w = _v.next()) {
+                        var line = _w.value;
+                        _loop_1(line);
+                    }
+                }
+                catch (e_2_1) { e_2 = { error: e_2_1 }; }
+                finally {
+                    try {
+                        if (_w && !_w.done && (_u = _v.return)) _u.call(_v);
+                    }
+                    finally { if (e_2) throw e_2.error; }
+                }
+            });
+            this.addItemCustomFieldsFormArray = new forms.FormArray([]);
+            this.addItemCustomFieldsForm = new forms.FormGroup({});
+            try {
+                for (var _v = __values(this.orderLineCustomFields), _w = _v.next(); !_w.done; _w = _v.next()) {
+                    var customField = _w.value;
+                    this.addItemCustomFieldsForm.addControl(customField.name, new forms.FormControl());
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (_w && !_w.done && (_u = _v.return)) _u.call(_v);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+            this.availableCountries$ = this.dataService.settings
+                .getAvailableCountries()
+                .mapSingle(function (result) { return result.countries.items; })
+                .pipe(operators.shareReplay(1));
+            this.dataService.order
+                .getOrderHistory(this.id, {
+                take: 1,
+                sort: {
+                    createdAt: i1.SortOrder.DESC,
+                },
+                filter: { type: { eq: i1.HistoryEntryType.ORDER_STATE_TRANSITION } },
+            })
+                .single$.subscribe(function (_u) {
+                var order = _u.order;
+                _this.previousState = order === null || order === void 0 ? void 0 : order.history.items[0].data.from;
+            });
+        };
+        OrderEditorComponent.prototype.ngOnDestroy = function () {
+            this.destroy();
+        };
+        OrderEditorComponent.prototype.transitionToPriorState = function (order) {
+            var _this = this;
+            this.orderTransitionService
+                .transitionToPreModifyingState(order.id, order.nextStates)
+                .subscribe(function (result) {
+                _this.router.navigate(['..'], { relativeTo: _this.route });
+            });
+        };
+        OrderEditorComponent.prototype.canPreviewChanges = function () {
+            var _u = this.modifyOrderInput, addItems = _u.addItems, adjustOrderLines = _u.adjustOrderLines, surcharges = _u.surcharges;
+            return (!!(addItems === null || addItems === void 0 ? void 0 : addItems.length) ||
+                !!(surcharges === null || surcharges === void 0 ? void 0 : surcharges.length) ||
+                !!(adjustOrderLines === null || adjustOrderLines === void 0 ? void 0 : adjustOrderLines.length) ||
+                (this.shippingAddressForm.dirty && this.shippingAddressForm.valid) ||
+                (this.billingAddressForm.dirty && this.billingAddressForm.valid) ||
+                this.couponCodesControl.dirty);
+        };
+        OrderEditorComponent.prototype.isLineModified = function (line) {
+            var _a;
+            return !!((_a = this.modifyOrderInput.adjustOrderLines) === null || _a === void 0 ? void 0 : _a.find(function (l) { return l.orderLineId === line.id && l.quantity !== line.quantity; }));
+        };
+        OrderEditorComponent.prototype.updateLineQuantity = function (line, quantity) {
+            var adjustOrderLines = this.modifyOrderInput.adjustOrderLines;
+            var row = adjustOrderLines === null || adjustOrderLines === void 0 ? void 0 : adjustOrderLines.find(function (l) { return l.orderLineId === line.id; });
+            if (row && +quantity === line.quantity) {
+                // Remove the modification if the quantity is the same as
+                // the original order
+                adjustOrderLines === null || adjustOrderLines === void 0 ? void 0 : adjustOrderLines.splice(adjustOrderLines === null || adjustOrderLines === void 0 ? void 0 : adjustOrderLines.indexOf(row), 1);
+            }
+            if (!row) {
+                row = { orderLineId: line.id, quantity: +quantity };
+                adjustOrderLines === null || adjustOrderLines === void 0 ? void 0 : adjustOrderLines.push(row);
+            }
+            row.quantity = +quantity;
+        };
+        OrderEditorComponent.prototype.updateAddedItemQuantity = function (item, quantity) {
+            var _a;
+            var row = (_a = this.modifyOrderInput.addItems) === null || _a === void 0 ? void 0 : _a.find(function (l) { return l.productVariantId === item.productVariantId; });
+            if (row) {
+                row.quantity = +quantity;
+            }
+        };
+        OrderEditorComponent.prototype.trackByProductVariantId = function (index, item) {
+            return item.productVariantId;
+        };
+        OrderEditorComponent.prototype.getSelectedItemPrice = function (result) {
+            switch (result === null || result === void 0 ? void 0 : result.priceWithTax.__typename) {
+                case 'SinglePrice':
+                    return result.priceWithTax.value;
+                default:
+                    return 0;
+            }
+        };
+        OrderEditorComponent.prototype.addItemToOrder = function (result) {
+            var e_4, _u;
+            var _this = this;
+            var _a, _b;
+            if (!result) {
+                return;
+            }
+            var customFields = this.orderLineCustomFields.length
+                ? this.addItemCustomFieldsForm.value
+                : undefined;
+            var row = (_a = this.modifyOrderInput.addItems) === null || _a === void 0 ? void 0 : _a.find(function (l) { return _this.isMatchingAddItemRow(l, result, customFields); });
+            if (!row) {
+                row = { productVariantId: result.productVariantId, quantity: 1 };
+                if (customFields) {
+                    row.customFields = customFields;
+                }
+                (_b = this.modifyOrderInput.addItems) === null || _b === void 0 ? void 0 : _b.push(row);
+            }
+            else {
+                row.quantity++;
+            }
+            if (customFields) {
+                var formGroup = new forms.FormGroup({});
+                try {
+                    for (var _v = __values(Object.entries(customFields)), _w = _v.next(); !_w.done; _w = _v.next()) {
+                        var _x = __read(_w.value, 2), key = _x[0], value = _x[1];
+                        formGroup.addControl(key, new forms.FormControl(value));
+                    }
+                }
+                catch (e_4_1) { e_4 = { error: e_4_1 }; }
+                finally {
+                    try {
+                        if (_w && !_w.done && (_u = _v.return)) _u.call(_v);
+                    }
+                    finally { if (e_4) throw e_4.error; }
+                }
+                this.addItemCustomFieldsFormArray.push(formGroup);
+                formGroup.valueChanges.pipe(operators.takeUntil(this.destroy$)).subscribe(function (value) {
+                    if (row) {
+                        row.customFields = value;
+                    }
+                });
+            }
+            this.addItemCustomFieldsForm.reset({});
+            this.addItemSelectedVariant = undefined;
+            this.addedVariants.set(result.productVariantId, result);
+        };
+        OrderEditorComponent.prototype.isMatchingAddItemRow = function (row, result, customFields) {
+            return (row.productVariantId === result.productVariantId &&
+                JSON.stringify(row.customFields) === JSON.stringify(customFields));
+        };
+        OrderEditorComponent.prototype.removeAddedItem = function (index) {
+            this.modifyOrderInput.addItems.splice(index, 1);
+            if (-1 < index) {
+                this.addItemCustomFieldsFormArray.removeAt(index);
+            }
+        };
+        OrderEditorComponent.prototype.getSurchargePrices = function (surcharge) {
+            var priceWithTax = surcharge.priceIncludesTax
+                ? surcharge.price
+                : Math.round(surcharge.price * ((100 + (surcharge.taxRate || 0)) / 100));
+            var price = surcharge.priceIncludesTax
+                ? Math.round(surcharge.price / ((100 + (surcharge.taxRate || 0)) / 100))
+                : surcharge.price;
+            return {
+                price: price,
+                priceWithTax: priceWithTax,
+            };
+        };
+        OrderEditorComponent.prototype.addSurcharge = function (value) {
+            var _a;
+            (_a = this.modifyOrderInput.surcharges) === null || _a === void 0 ? void 0 : _a.push(value);
+            this.surchargeForm.reset({
+                price: 0,
+                priceIncludesTax: true,
+                taxRate: 0,
+            });
+        };
+        OrderEditorComponent.prototype.removeSurcharge = function (index) {
+            var _a;
+            (_a = this.modifyOrderInput.surcharges) === null || _a === void 0 ? void 0 : _a.splice(index, 1);
+        };
+        OrderEditorComponent.prototype.previewAndModify = function (order) {
+            var _this = this;
+            var _a;
+            var modifyOrderInput = Object.assign(Object.assign({}, this.modifyOrderInput), { adjustOrderLines: this.modifyOrderInput.adjustOrderLines.map(function (line) {
+                    return i1.transformRelationCustomFieldInputs(simpleDeepClone.simpleDeepClone(line), _this.orderLineCustomFields);
+                }) });
+            var input = Object.assign(Object.assign(Object.assign(Object.assign({}, modifyOrderInput), (this.billingAddressForm.dirty ? { updateBillingAddress: this.billingAddressForm.value } : {})), (this.shippingAddressForm.dirty
+                ? { updateShippingAddress: this.shippingAddressForm.value }
+                : {})), { dryRun: true, couponCodes: this.couponCodesControl.dirty ? this.couponCodesControl.value : undefined, note: (_a = this.note) !== null && _a !== void 0 ? _a : '', options: {
+                    recalculateShipping: this.recalculateShipping,
+                } });
+            var originalTotalWithTax = order.totalWithTax;
+            this.dataService.order
+                .modifyOrder(input)
+                .pipe(operators.switchMap(function (_u) {
+                var modifyOrder = _u.modifyOrder;
+                switch (modifyOrder.__typename) {
+                    case 'Order':
+                        return _this.modalService.fromComponent(OrderEditsPreviewDialogComponent, {
+                            size: 'xl',
+                            closable: false,
+                            locals: {
+                                originalTotalWithTax: originalTotalWithTax,
+                                order: modifyOrder,
+                                orderLineCustomFields: _this.orderLineCustomFields,
+                                modifyOrderInput: input,
+                            },
+                        });
+                    case 'InsufficientStockError':
+                    case 'NegativeQuantityError':
+                    case 'NoChangesSpecifiedError':
+                    case 'OrderLimitError':
+                    case 'OrderModificationStateError':
+                    case 'PaymentMethodMissingError':
+                    case 'RefundPaymentIdMissingError':
+                    case 'CouponCodeLimitError':
+                    case 'CouponCodeExpiredError':
+                    case 'CouponCodeInvalidError': {
+                        _this.notificationService.error(modifyOrder.message);
+                        return rxjs.of(false);
+                    }
+                    case null:
+                    case undefined:
+                        return rxjs.of(false);
+                    default:
+                        sharedUtils.assertNever(modifyOrder);
+                }
+            }), operators.switchMap(function (result) {
+                if (!result || result.result === exports.OrderEditResultType.Cancel) {
+                    // re-fetch so that the preview values get overwritten in the cache.
+                    return _this.dataService.order.getOrder(_this.id).mapSingle(function () { return false; });
+                }
+                else {
+                    // Do the modification
+                    var wetRunInput = Object.assign(Object.assign({}, input), { dryRun: false });
+                    if (result.result === exports.OrderEditResultType.Refund) {
+                        wetRunInput.refund = {
+                            paymentId: result.refundPaymentId,
+                            reason: result.refundNote,
+                        };
+                    }
+                    return _this.dataService.order.modifyOrder(wetRunInput).pipe(operators.switchMap(function (_u) {
+                        var modifyOrder = _u.modifyOrder;
+                        if (modifyOrder.__typename === 'Order') {
+                            var priceDelta = modifyOrder.totalWithTax - originalTotalWithTax;
+                            var nextState = 0 < priceDelta ? 'ArrangingAdditionalPayment' : _this.previousState;
+                            return _this.dataService.order
+                                .transitionToState(order.id, nextState)
+                                .pipe(operators.mapTo(true));
+                        }
+                        else {
+                            _this.notificationService.error(modifyOrder.message);
+                            return rxjs.EMPTY;
+                        }
+                    }));
+                }
+            }))
+                .subscribe(function (result) {
+                if (result) {
+                    _this.router.navigate(['../'], { relativeTo: _this.route });
+                }
+            });
+        };
+        OrderEditorComponent.prototype.addAddressCustomFieldsFormGroup = function (parentFormGroup, address) {
+            var e_5, _u;
+            var _a;
+            if (address && this.addressCustomFields.length) {
+                var addressCustomFieldsFormGroup = new forms.FormGroup({});
+                try {
+                    for (var _v = __values(this.addressCustomFields), _w = _v.next(); !_w.done; _w = _v.next()) {
+                        var customFieldDef = _w.value;
+                        var name = customFieldDef.name;
+                        var value = (_a = address.customFields) === null || _a === void 0 ? void 0 : _a[name];
+                        addressCustomFieldsFormGroup.addControl(name, new forms.FormControl(value));
+                    }
+                }
+                catch (e_5_1) { e_5 = { error: e_5_1 }; }
+                finally {
+                    try {
+                        if (_w && !_w.done && (_u = _v.return)) _u.call(_v);
+                    }
+                    finally { if (e_5) throw e_5.error; }
+                }
+                parentFormGroup.addControl('customFields', addressCustomFieldsFormGroup);
+            }
+        };
+        OrderEditorComponent.prototype.setFormValues = function (entity, languageCode) {
+            /* not used */
+        };
+        return OrderEditorComponent;
+    }(i1.BaseDetailComponent));
+    OrderEditorComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'vdr-order-editor',
+                    template: "<vdr-action-bar *ngIf=\"entity$ | async as order\">\r\n    <vdr-ab-left>\r\n        <div class=\"flex clr-align-items-center\">\r\n            <vdr-entity-info [entity]=\"entity$ | async\"></vdr-entity-info>\r\n            <vdr-order-state-label [state]=\"order.state\"></vdr-order-state-label>\r\n        </div>\r\n    </vdr-ab-left>\r\n\r\n    <vdr-ab-right>\r\n        <button class=\"btn btn-secondary\" (click)=\"transitionToPriorState(order)\">\r\n            {{ 'order.cancel-modification' | translate }}\r\n        </button>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<div *ngIf=\"entity$ | async as order\">\r\n    <div class=\"clr-row\">\r\n        <div class=\"clr-col-lg-8\">\r\n            <table class=\"order-table table\">\r\n                <thead>\r\n                    <tr>\r\n                        <th></th>\r\n                        <th>{{ 'order.product-name' | translate }}</th>\r\n                        <th>{{ 'order.product-sku' | translate }}</th>\r\n                        <th>{{ 'order.unit-price' | translate }}</th>\r\n                        <th>{{ 'order.quantity' | translate }}</th>\r\n                        <th *ngIf=\"orderLineCustomFields.length\">{{ 'common.custom-fields' | translate }}</th>\r\n                        <th>{{ 'order.total' | translate }}</th>\r\n                    </tr>\r\n                </thead>\r\n                <tbody>\r\n                    <tr\r\n                        *ngFor=\"let line of order.lines; let i = index\"\r\n                        class=\"order-line\"\r\n                        [class.is-cancelled]=\"line.quantity === 0\"\r\n                        [class.modified]=\"isLineModified(line)\"\r\n                    >\r\n                        <td class=\"align-middle thumb\">\r\n                            <img\r\n                                *ngIf=\"line.featuredAsset\"\r\n                                [src]=\"line.featuredAsset | assetPreview: 'tiny'\"\r\n                            />\r\n                        </td>\r\n                        <td class=\"align-middle name\">{{ line.productVariant.name }}</td>\r\n                        <td class=\"align-middle sku\">{{ line.productVariant.sku }}</td>\r\n                        <td class=\"align-middle unit-price\">\r\n                            {{ line.unitPriceWithTax | localeCurrency: order.currencyCode }}\r\n                            <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                {{ line.unitPrice | localeCurrency: order.currencyCode }}\r\n                            </div>\r\n                        </td>\r\n                        <td class=\"align-middle quantity\">\r\n                            <input\r\n                                type=\"number\"\r\n                                min=\"0\"\r\n                                [value]=\"line.quantity\"\r\n                                (input)=\"updateLineQuantity(line, $event.target.value)\"\r\n                            />\r\n                            <vdr-line-refunds [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\r\n                            <vdr-line-fulfillment\r\n                                [line]=\"line\"\r\n                                [orderState]=\"order.state\"\r\n                            ></vdr-line-fulfillment>\r\n                        </td>\r\n                        <td *ngIf=\"orderLineCustomFields.length\" class=\"order-line-custom-field align-middle\">\r\n                            <vdr-tabbed-custom-fields\r\n                                entityName=\"OrderLine\"\r\n                                [customFields]=\"orderLineCustomFields\"\r\n                                [customFieldsFormGroup]=\"orderLineCustomFieldsFormArray.get([i])\"\r\n                                [compact]=\"true\"\r\n                            ></vdr-tabbed-custom-fields>\r\n                        </td>\r\n                        <td class=\"align-middle total\">\r\n                            {{ line.linePriceWithTax | localeCurrency: order.currencyCode }}\r\n                            <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                {{ line.linePrice | localeCurrency: order.currencyCode }}\r\n                            </div>\r\n                        </td>\r\n                    </tr>\r\n                    <tr\r\n                        *ngFor=\"let addedLine of addedLines; trackBy: trackByProductVariantId; let i = index\"\r\n                        class=\"modified\"\r\n                    >\r\n                        <td class=\"align-middle thumb\">\r\n                            <img\r\n                                *ngIf=\"addedLine.productAsset\"\r\n                                [src]=\"addedLine.productAsset | assetPreview: 'tiny'\"\r\n                            />\r\n                        </td>\r\n                        <td class=\"align-middle name\">{{ addedLine.productVariantName }}</td>\r\n                        <td class=\"align-middle sku\">{{ addedLine.sku }}</td>\r\n                        <td class=\"align-middle unit-price\">\r\n                            {{ addedLine.priceWithTax | localeCurrency: order.currencyCode }}\r\n                            <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                {{ addedLine.price | localeCurrency: order.currencyCode }}\r\n                            </div>\r\n                        </td>\r\n                        <td class=\"align-middle quantity\">\r\n                            <input\r\n                                type=\"number\"\r\n                                min=\"0\"\r\n                                [value]=\"addedLine.quantity\"\r\n                                (input)=\"updateAddedItemQuantity(addedLine, $event.target.value)\"\r\n                            />\r\n                            <button class=\"icon-button\" (click)=\"removeAddedItem(i)\">\r\n                                <clr-icon shape=\"trash\"></clr-icon>\r\n                            </button>\r\n                        </td>\r\n                        <td *ngIf=\"orderLineCustomFields.length\" class=\"order-line-custom-field align-middle\">\r\n                            <ng-container *ngFor=\"let customField of orderLineCustomFields\">\r\n                                <vdr-custom-field-control\r\n                                    [customField]=\"customField\"\r\n                                    [customFieldsFormGroup]=\"addItemCustomFieldsFormArray.get([i])\"\r\n                                    entityName=\"OrderLine\"\r\n                                    [compact]=\"true\"\r\n                                ></vdr-custom-field-control>\r\n                            </ng-container>\r\n                        </td>\r\n                        <td class=\"align-middle total\">\r\n                            {{\r\n                                (addedLine.priceWithTax * addedLine.quantity) / 100\r\n                                    | currency: order.currencyCode\r\n                            }}\r\n                            <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                {{\r\n                                    (addedLine.price * addedLine.quantity) / 100\r\n                                        | currency: order.currencyCode\r\n                                }}\r\n                            </div>\r\n                        </td>\r\n                    </tr>\r\n                    <tr class=\"surcharge\" *ngFor=\"let surcharge of order.surcharges\">\r\n                        <td class=\"align-middle name left\" colspan=\"2\">{{ surcharge.description }}</td>\r\n                        <td class=\"align-middle sku\">{{ surcharge.sku }}</td>\r\n                        <td class=\"align-middle\"></td>\r\n                        <td></td>\r\n                        <td *ngIf=\"orderLineCustomFields.length\"></td>\r\n                        <td class=\"align-middle total\">\r\n                            {{ surcharge.priceWithTax | localeCurrency: order.currencyCode }}\r\n                            <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                {{ surcharge.price | localeCurrency: order.currencyCode }}\r\n                            </div>\r\n                        </td>\r\n                    </tr>\r\n                    <tr\r\n                        class=\"surcharge modified\"\r\n                        *ngFor=\"let surcharge of modifyOrderInput.surcharges; let i = index\"\r\n                    >\r\n                        <td class=\"align-middle name left\" colspan=\"2\">\r\n                            {{ surcharge.description }}\r\n                            <button class=\"icon-button\" (click)=\"removeSurcharge(i)\">\r\n                                <clr-icon shape=\"trash\"></clr-icon>\r\n                            </button>\r\n                        </td>\r\n                        <td class=\"align-middle sku\">{{ surcharge.sku }}</td>\r\n                        <td class=\"align-middle\"></td>\r\n                        <td></td>\r\n                        <td *ngIf=\"orderLineCustomFields.length\"></td>\r\n                        <td class=\"align-middle total\">\r\n                            <ng-container *ngIf=\"getSurchargePrices(surcharge) as surchargePrice\">\r\n                                {{ surchargePrice.priceWithTax | localeCurrency: order.currencyCode }}\r\n                                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                    {{ surchargePrice.price | localeCurrency: order.currencyCode }}\r\n                                </div>\r\n                            </ng-container>\r\n                        </td>\r\n                    </tr>\r\n                    <tr class=\"shipping\">\r\n                        <td class=\"left clr-align-middle\">{{ 'order.shipping' | translate }}</td>\r\n                        <td class=\"clr-align-middle\">{{ order.shippingLines[0]?.shippingMethod?.name }}</td>\r\n                        <td colspan=\"3\"></td>\r\n                        <td *ngIf=\"orderLineCustomFields.length\"></td>\r\n                        <td class=\"clr-align-middle\">\r\n                            {{ order.shippingWithTax | localeCurrency: order.currencyCode }}\r\n                            <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                {{ order.shipping | localeCurrency: order.currencyCode }}\r\n                            </div>\r\n                        </td>\r\n                    </tr>\r\n                </tbody>\r\n            </table>\r\n\r\n            <h4 class=\"mb2\">{{ 'order.modifications' | translate }}</h4>\r\n            <clr-accordion>\r\n                <clr-accordion-panel>\r\n                    <clr-accordion-title>{{ 'order.add-item-to-order' | translate }}</clr-accordion-title>\r\n                    <clr-accordion-content *clrIfExpanded>\r\n                        <vdr-product-selector class=\"mb4\" (productSelected)=\"addItemSelectedVariant = $event\">\r\n                        </vdr-product-selector>\r\n                        <div *ngIf=\"addItemSelectedVariant\" class=\"flex mb4\">\r\n                            <img\r\n                                *ngIf=\"addItemSelectedVariant.productAsset as asset\"\r\n                                [src]=\"asset | assetPreview: 'tiny'\"\r\n                                class=\"mr4\"\r\n                            />\r\n                            <div>\r\n                                <strong class=\"mr4\">{{ addItemSelectedVariant.productVariantName }}</strong>\r\n                                <small>{{ addItemSelectedVariant.sku }}</small>\r\n                                <div>\r\n                                    {{\r\n                                        getSelectedItemPrice(addItemSelectedVariant)\r\n                                            | localeCurrency: order.currencyCode\r\n                                    }}\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <ng-container *ngFor=\"let customField of orderLineCustomFields\">\r\n                            <vdr-custom-field-control\r\n                                [readonly]=\"!addItemSelectedVariant\"\r\n                                [customField]=\"customField\"\r\n                                [customFieldsFormGroup]=\"addItemCustomFieldsForm\"\r\n                                entityName=\"OrderLine\"\r\n                                [compact]=\"true\"\r\n                            ></vdr-custom-field-control>\r\n                        </ng-container>\r\n                        <button\r\n                            class=\"btn btn-secondary\"\r\n                            [disabled]=\"!addItemSelectedVariant || addItemCustomFieldsForm.invalid\"\r\n                            (click)=\"addItemToOrder(addItemSelectedVariant)\"\r\n                        >\r\n                            {{ 'order.add-item-to-order' | translate }}\r\n                        </button>\r\n                    </clr-accordion-content>\r\n                </clr-accordion-panel>\r\n                <clr-accordion-panel>\r\n                    <clr-accordion-title>{{ 'order.set-coupon-codes' | translate }}</clr-accordion-title>\r\n                    <clr-accordion-content *clrIfExpanded>\r\n                        <vdr-coupon-code-selector\r\n                            [control]=\"couponCodesControl\"\r\n                        ></vdr-coupon-code-selector>\r\n                    </clr-accordion-content>\r\n                </clr-accordion-panel>\r\n\r\n                <clr-accordion-panel>\r\n                    <clr-accordion-title>{{ 'order.add-surcharge' | translate }}</clr-accordion-title>\r\n                    <clr-accordion-content *clrIfExpanded>\r\n                        <form [formGroup]=\"surchargeForm\" (submit)=\"addSurcharge(surchargeForm.value)\">\r\n                            <vdr-form-field [label]=\"'common.description' | translate\" for=\"description\"\r\n                                ><input id=\"description\" type=\"text\" formControlName=\"description\"\r\n                            /></vdr-form-field>\r\n                            <vdr-form-field [label]=\"'order.product-sku' | translate\" for=\"sku\"\r\n                                ><input id=\"sku\" type=\"text\" formControlName=\"sku\"\r\n                            /></vdr-form-field>\r\n                            <vdr-form-field [label]=\"'common.price' | translate\" for=\"price\">\r\n                                <vdr-currency-input\r\n                                    [currencyCode]=\"order.currencyCode\"\r\n                                    id=\"price\"\r\n                                    formControlName=\"price\"\r\n                                ></vdr-currency-input>\r\n                            </vdr-form-field>\r\n                            <vdr-form-field\r\n                                [label]=\"\r\n                                    'catalog.price-includes-tax-at'\r\n                                        | translate: { rate: surchargeForm.get('taxRate')?.value }\r\n                                \"\r\n                                for=\"priceIncludesTax\"\r\n                                ><input\r\n                                    id=\"priceIncludesTax\"\r\n                                    type=\"checkbox\"\r\n                                    clrCheckbox\r\n                                    formControlName=\"priceIncludesTax\"\r\n                            /></vdr-form-field>\r\n                            <vdr-form-field [label]=\"'order.tax-rate' | translate\" for=\"taxRate\">\r\n                                <vdr-affixed-input suffix=\"%\"\r\n                                    ><input\r\n                                        id=\"taxRate\"\r\n                                        type=\"number\"\r\n                                        min=\"0\"\r\n                                        max=\"100\"\r\n                                        formControlName=\"taxRate\"\r\n                                /></vdr-affixed-input>\r\n                            </vdr-form-field>\r\n                            <vdr-form-field [label]=\"'order.tax-description' | translate\" for=\"taxDescription\"\r\n                                ><input id=\"taxDescription\" type=\"text\" formControlName=\"taxDescription\"\r\n                            /></vdr-form-field>\r\n                            <button\r\n                                class=\"btn btn-secondary\"\r\n                                [disabled]=\"\r\n                                    surchargeForm.invalid ||\r\n                                    surchargeForm.pristine ||\r\n                                    surchargeForm.get('price')?.value === 0\r\n                                \"\r\n                            >\r\n                                {{ 'order.add-surcharge' | translate }}\r\n                            </button>\r\n                        </form>\r\n                    </clr-accordion-content>\r\n                </clr-accordion-panel>\r\n                <clr-accordion-panel>\r\n                    <clr-accordion-title>{{ 'order.edit-shipping-address' | translate }}</clr-accordion-title>\r\n                    <clr-accordion-content *clrIfExpanded>\r\n                        <vdr-address-form\r\n                            [formGroup]=\"shippingAddressForm\"\r\n                            [availableCountries]=\"availableCountries$ | async\"\r\n                            [customFields]=\"addressCustomFields\"\r\n                        ></vdr-address-form>\r\n                    </clr-accordion-content>\r\n                </clr-accordion-panel>\r\n                <clr-accordion-panel>\r\n                    <clr-accordion-title>{{ 'order.edit-billing-address' | translate }}</clr-accordion-title>\r\n                    <clr-accordion-content *clrIfExpanded>\r\n                        <vdr-address-form\r\n                            [formGroup]=\"billingAddressForm\"\r\n                            [availableCountries]=\"availableCountries$ | async\"\r\n                            [customFields]=\"addressCustomFields\"\r\n                        ></vdr-address-form>\r\n                    </clr-accordion-content>\r\n                </clr-accordion-panel>\r\n            </clr-accordion>\r\n        </div>\r\n        <div class=\"clr-col-lg-4 order-cards\">\r\n            <div class=\"card\">\r\n                <div class=\"card-header\">\r\n                    {{ 'order.modification-summary' | translate }}\r\n                </div>\r\n                <div class=\"card-block\">\r\n                    <ul>\r\n                        <li *ngIf=\"modifyOrderInput.addItems?.length\">\r\n                            {{\r\n                                'order.modification-adding-items'\r\n                                    | translate: { count: modifyOrderInput.addItems?.length }\r\n                            }}\r\n                        </li>\r\n                        <li *ngIf=\"modifyOrderInput.adjustOrderLines?.length\">\r\n                            {{\r\n                                'order.modification-adjusting-lines'\r\n                                    | translate: { count: modifyOrderInput.adjustOrderLines?.length }\r\n                            }}\r\n                        </li>\r\n                        <li *ngIf=\"modifyOrderInput.surcharges?.length\">\r\n                            {{\r\n                                'order.modification-adding-surcharges'\r\n                                    | translate: { count: modifyOrderInput.surcharges?.length }\r\n                            }}\r\n                        </li>\r\n                        <li *ngIf=\"shippingAddressForm.dirty\">\r\n                            {{ 'order.modification-updating-shipping-address' | translate }}\r\n                        </li>\r\n                        <li *ngIf=\"billingAddressForm.dirty\">\r\n                            {{ 'order.modification-updating-billing-address' | translate }}\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n                <div class=\"card-block\">\r\n                    <label class=\"clr-control-label\">{{ 'order.note' | translate }}</label>\r\n                    <textarea [(ngModel)]=\"note\" name=\"note\" clrTextarea required></textarea>\r\n                    <clr-checkbox-wrapper class=\"\">\r\n                        <input type=\"checkbox\" clrCheckbox [(ngModel)]=\"recalculateShipping\" />\r\n                        <label>{{ 'order.modification-recalculate-shipping' | translate }}</label>\r\n                    </clr-checkbox-wrapper>\r\n                </div>\r\n                <div class=\"card-footer\">\r\n                    <button\r\n                        class=\"btn btn-primary\"\r\n                        [disabled]=\"!canPreviewChanges()\"\r\n                        (click)=\"previewAndModify(order)\"\r\n                    >\r\n                        {{ 'order.preview-changes' | translate }}\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [".order-table .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}.order-table .sub-total td{border-top:1px dashed var(--color-component-border-200)}.order-table .total td{font-weight:bold;border-top:1px dashed var(--color-component-border-200)}.order-table td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}.order-table img{border-radius:var(--border-radius-img)}.order-table .order-line-custom-fields{display:flex;flex-wrap:wrap}.order-table .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-right:18px}.order-table .draft-qty{max-width:48px}.order-table .order-line-custom-field{background-color:var(--color-component-bg-100)}.order-table .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}.order-table .net-price{font-size:11px;color:var(--color-text-300)}.order-table .promotions-label{-webkit-text-decoration:underline dotted var(--color-text-200);text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}.order-table .thumb img{width:50px;height:50px}.order-table tr.modified td{background-color:var(--color-warning-100)}.order-table .order-line-custom-field{text-align:start}\n"]
+                },] }
+    ];
+    OrderEditorComponent.ctorParameters = function () { return [
+        { type: i1$1.Router },
+        { type: i1$1.ActivatedRoute },
+        { type: i1.ServerConfigService },
+        { type: i0.ChangeDetectorRef },
+        { type: i1.DataService },
+        { type: i1.NotificationService },
+        { type: i1.ModalService },
+        { type: OrderTransitionService }
+    ]; };
+
+    var OrderHistoryComponent = /** @class */ (function () {
+        function OrderHistoryComponent() {
+            this.addNote = new i0.EventEmitter();
+            this.updateNote = new i0.EventEmitter();
+            this.deleteNote = new i0.EventEmitter();
+            this.note = '';
+            this.noteIsPrivate = true;
+            this.expanded = false;
+            this.type = i1.HistoryEntryType;
+        }
+        OrderHistoryComponent.prototype.getDisplayType = function (entry) {
+            if (entry.type === i1.HistoryEntryType.ORDER_STATE_TRANSITION) {
+                if (entry.data.to === 'Delivered') {
+                    return 'success';
+                }
+                if (entry.data.to === 'Cancelled') {
+                    return 'error';
+                }
+            }
+            if (entry.type === i1.HistoryEntryType.ORDER_FULFILLMENT_TRANSITION) {
+                if (entry.data.to === 'Delivered') {
+                    return 'success';
+                }
+            }
+            if (entry.type === i1.HistoryEntryType.ORDER_PAYMENT_TRANSITION) {
+                if (entry.data.to === 'Declined' || entry.data.to === 'Cancelled') {
+                    return 'error';
+                }
+            }
+            if (entry.type === i1.HistoryEntryType.ORDER_CANCELLATION) {
+                return 'error';
+            }
+            if (entry.type === i1.HistoryEntryType.ORDER_REFUND_TRANSITION) {
+                return 'warning';
+            }
+            return 'default';
+        };
+        OrderHistoryComponent.prototype.getTimelineIcon = function (entry) {
+            if (entry.type === i1.HistoryEntryType.ORDER_STATE_TRANSITION) {
+                if (entry.data.to === 'Delivered') {
+                    return ['success-standard', 'is-solid'];
+                }
+                if (entry.data.to === 'Cancelled') {
+                    return 'ban';
+                }
+            }
+            if (entry.type === i1.HistoryEntryType.ORDER_PAYMENT_TRANSITION) {
+                if (entry.data.to === 'Settled') {
+                    return 'credit-card';
+                }
+            }
+            if (entry.type === i1.HistoryEntryType.ORDER_NOTE) {
+                return 'note';
+            }
+            if (entry.type === i1.HistoryEntryType.ORDER_MODIFIED) {
+                return 'pencil';
+            }
+            if (entry.type === i1.HistoryEntryType.ORDER_FULFILLMENT_TRANSITION) {
+                if (entry.data.to === 'Shipped') {
+                    return 'truck';
+                }
+                if (entry.data.to === 'Delivered') {
+                    return 'truck';
+                }
+            }
+        };
+        OrderHistoryComponent.prototype.isFeatured = function (entry) {
+            switch (entry.type) {
+                case i1.HistoryEntryType.ORDER_STATE_TRANSITION: {
+                    return (entry.data.to === 'Delivered' ||
+                        entry.data.to === 'Cancelled' ||
+                        entry.data.to === 'Settled');
+                }
+                case i1.HistoryEntryType.ORDER_PAYMENT_TRANSITION:
+                    return entry.data.to === 'Settled' || entry.data.to === 'Cancelled';
+                case i1.HistoryEntryType.ORDER_FULFILLMENT_TRANSITION:
+                    return entry.data.to === 'Delivered' || entry.data.to === 'Shipped';
+                case i1.HistoryEntryType.ORDER_NOTE:
+                case i1.HistoryEntryType.ORDER_MODIFIED:
+                    return true;
+                default:
+                    return false;
+            }
+        };
+        OrderHistoryComponent.prototype.getFulfillment = function (entry) {
+            if ((entry.type === i1.HistoryEntryType.ORDER_FULFILLMENT ||
+                entry.type === i1.HistoryEntryType.ORDER_FULFILLMENT_TRANSITION) &&
+                this.order.fulfillments) {
+                return this.order.fulfillments.find(function (f) { return f.id === entry.data.fulfillmentId; });
+            }
+        };
+        OrderHistoryComponent.prototype.getPayment = function (entry) {
+            if (entry.type === i1.HistoryEntryType.ORDER_PAYMENT_TRANSITION && this.order.payments) {
+                return this.order.payments.find(function (p) { return p.id === entry.data.paymentId; });
+            }
+        };
+        OrderHistoryComponent.prototype.getCancelledItems = function (entry) {
+            var e_1, _a, e_2, _b;
+            var itemMap = new Map();
+            var cancelledItemIds = entry.data.orderItemIds;
+            try {
+                for (var _c = __values(this.order.lines), _d = _c.next(); !_d.done; _d = _c.next()) {
+                    var line = _d.value;
+                    try {
+                        for (var _e = (e_2 = void 0, __values(line.items)), _f = _e.next(); !_f.done; _f = _e.next()) {
+                            var item = _f.value;
+                            if (cancelledItemIds.includes(item.id)) {
+                                var count = itemMap.get(line.productVariant.name);
+                                if (count != null) {
+                                    itemMap.set(line.productVariant.name, count + 1);
+                                }
+                                else {
+                                    itemMap.set(line.productVariant.name, 1);
+                                }
+                            }
+                        }
+                    }
+                    catch (e_2_1) { e_2 = { error: e_2_1 }; }
+                    finally {
+                        try {
+                            if (_f && !_f.done && (_b = _e.return)) _b.call(_e);
+                        }
+                        finally { if (e_2) throw e_2.error; }
+                    }
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+            return Array.from(itemMap.entries()).map(function (_a) {
+                var _b = __read(_a, 2), name = _b[0], quantity = _b[1];
+                return ({ name: name, quantity: quantity });
+            });
+        };
+        OrderHistoryComponent.prototype.getModification = function (id) {
+            return this.order.modifications.find(function (m) { return m.id === id; });
+        };
+        OrderHistoryComponent.prototype.getName = function (entry) {
+            var administrator = entry.administrator;
+            if (administrator) {
+                return administrator.firstName + " " + administrator.lastName;
+            }
+            else {
+                var customer = this.order.customer;
+                if (customer) {
+                    return customer.firstName + " " + customer.lastName;
+                }
+            }
+            return '';
+        };
+        OrderHistoryComponent.prototype.addNoteToOrder = function () {
+            this.addNote.emit({ note: this.note, isPublic: !this.noteIsPrivate });
+            this.note = '';
+            this.noteIsPrivate = true;
+        };
+        return OrderHistoryComponent;
+    }());
+    OrderHistoryComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'vdr-order-history',
+                    template: "<h4>{{ 'order.order-history' | translate }}</h4>\r\n<div class=\"entry-list\" [class.expanded]=\"expanded\">\r\n    <vdr-timeline-entry iconShape=\"note\" displayType=\"muted\" [featured]=\"true\">\r\n        <div class=\"note-entry\">\r\n            <textarea [(ngModel)]=\"note\" name=\"note\" class=\"note\"></textarea>\r\n            <button class=\"btn btn-secondary\" [disabled]=\"!note\" (click)=\"addNoteToOrder()\">\r\n                {{ 'common.add-note' | translate }}\r\n            </button>\r\n        </div>\r\n        <div class=\"visibility-select\">\r\n            <clr-checkbox-wrapper>\r\n                <input type=\"checkbox\" clrCheckbox [(ngModel)]=\"noteIsPrivate\" />\r\n                <label>{{ 'order.note-is-private' | translate }}</label>\r\n            </clr-checkbox-wrapper>\r\n            <span *ngIf=\"noteIsPrivate\" class=\"private\">\r\n                {{ 'order.note-only-visible-to-administrators' | translate }}\r\n            </span>\r\n            <span *ngIf=\"!noteIsPrivate\" class=\"public\">\r\n                {{ 'order.note-visible-to-customer' | translate }}\r\n            </span>\r\n        </div>\r\n    </vdr-timeline-entry>\r\n    <vdr-timeline-entry\r\n        *ngFor=\"let entry of history\"\r\n        [displayType]=\"getDisplayType(entry)\"\r\n        [iconShape]=\"getTimelineIcon(entry)\"\r\n        [createdAt]=\"entry.createdAt\"\r\n        [name]=\"getName(entry)\"\r\n        [featured]=\"isFeatured(entry)\"\r\n        [collapsed]=\"!expanded && !isFeatured(entry)\"\r\n        (expandClick)=\"expanded = !expanded\"\r\n    >\r\n        <ng-container [ngSwitch]=\"entry.type\">\r\n            <ng-container *ngSwitchCase=\"type.ORDER_STATE_TRANSITION\">\r\n                <div class=\"title\" *ngIf=\"entry.data.to === 'Delivered'\">\r\n                    {{ 'order.history-order-fulfilled' | translate }}\r\n                </div>\r\n                <div class=\"title\" *ngIf=\"entry.data.to === 'Cancelled'\">\r\n                    {{ 'order.history-order-cancelled' | translate }}\r\n                </div>\r\n                <ng-template [ngIf]=\"entry.data.to !== 'Cancelled' && entry.data.to !== 'Delivered'\">\r\n                    {{\r\n                        'order.history-order-transition'\r\n                            | translate: { from: entry.data.from, to: entry.data.to }\r\n                    }}\r\n                </ng-template>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"type.ORDER_MODIFIED\">\r\n                <div class=\"title\">\r\n                    {{ 'order.history-order-modified' | translate }}\r\n                </div>\r\n                <ng-container *ngIf=\"getModification(entry.data.modificationId) as modification\">\r\n                    {{ 'order.modify-order-price-difference' | translate }}:\r\n                    <strong>{{ modification.priceChange | localeCurrency: order.currencyCode }}</strong>\r\n                    <vdr-chip colorType=\"success\" *ngIf=\"modification.isSettled\">{{\r\n                        'order.modification-settled' | translate\r\n                    }}</vdr-chip>\r\n                    <vdr-chip colorType=\"error\" *ngIf=\"!modification.isSettled\">{{\r\n                        'order.modification-not-settled' | translate\r\n                    }}</vdr-chip>\r\n                    <vdr-history-entry-detail>\r\n                        <vdr-modification-detail\r\n                            [order]=\"order\"\r\n                            [modification]=\"modification\"\r\n                        ></vdr-modification-detail>\r\n                    </vdr-history-entry-detail>\r\n                </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"type.ORDER_PAYMENT_TRANSITION\">\r\n                <ng-container *ngIf=\"entry.data.to === 'Settled'; else regularPaymentTransition\">\r\n                    <div class=\"title\">\r\n                        {{ 'order.history-payment-settled' | translate }}\r\n                    </div>\r\n                    {{ 'order.transaction-id' | translate }}: {{ getPayment(entry)?.transactionId }}\r\n                    <vdr-history-entry-detail *ngIf=\"getPayment(entry) as payment\">\r\n                        <vdr-payment-detail\r\n                            [payment]=\"payment\"\r\n                            [currencyCode]=\"order.currencyCode\"\r\n                        ></vdr-payment-detail>\r\n                    </vdr-history-entry-detail>\r\n                </ng-container>\r\n                <ng-template #regularPaymentTransition>\r\n                    {{\r\n                        'order.history-payment-transition'\r\n                            | translate\r\n                                : {\r\n                                      from: entry.data.from,\r\n                                      to: entry.data.to,\r\n                                      id: getPayment(entry)?.transactionId\r\n                                  }\r\n                    }}\r\n                </ng-template>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"type.ORDER_REFUND_TRANSITION\">\r\n                {{\r\n                    'order.history-refund-transition'\r\n                        | translate: { from: entry.data.from, to: entry.data.to, id: entry.data.refundId }\r\n                }}\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"type.ORDER_CANCELLATION\">\r\n                {{ 'order.history-items-cancelled' | translate: { count: entry.data.orderItemIds.length } }}\r\n                <vdr-history-entry-detail *ngIf=\"getCancelledItems(entry) as items\">\r\n                    <vdr-labeled-data [label]=\"'order.cancellation-reason' | translate\">\r\n                        {{ entry.data.reason }}\r\n                    </vdr-labeled-data>\r\n                    <vdr-labeled-data [label]=\"'order.contents' | translate\">\r\n                        <vdr-simple-item-list [items]=\"items\"></vdr-simple-item-list>\r\n                    </vdr-labeled-data>\r\n                    <vdr-labeled-data [label]=\"'order.shipping-cancelled' | translate\">\r\n                        {{ entry.data.shippingCancelled }}\r\n                    </vdr-labeled-data>\r\n                </vdr-history-entry-detail>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"type.ORDER_FULFILLMENT\">\r\n                {{ 'order.history-fulfillment-created' | translate }}\r\n                <vdr-history-entry-detail *ngIf=\"getFulfillment(entry) as fulfillment\">\r\n                    <vdr-fulfillment-detail\r\n                        [fulfillmentId]=\"fulfillment.id\"\r\n                        [order]=\"order\"\r\n                    ></vdr-fulfillment-detail>\r\n                </vdr-history-entry-detail>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"type.ORDER_FULFILLMENT_TRANSITION\">\r\n                <ng-container *ngIf=\"entry.data.to === 'Delivered'\">\r\n                    <div class=\"title\">\r\n                        {{ 'order.history-fulfillment-delivered' | translate }}\r\n                    </div>\r\n                    {{ 'order.tracking-code' | translate }}: {{ getFulfillment(entry)?.trackingCode }}\r\n                </ng-container>\r\n                <ng-container *ngIf=\"entry.data.to === 'Shipped'\">\r\n                    <div class=\"title\">\r\n                        {{ 'order.history-fulfillment-shipped' | translate }}\r\n                    </div>\r\n                    {{ 'order.tracking-code' | translate }}: {{ getFulfillment(entry)?.trackingCode }}\r\n                </ng-container>\r\n                <ng-container *ngIf=\"entry.data.to !== 'Delivered' && entry.data.to !== 'Shipped'\">\r\n                    {{\r\n                        'order.history-fulfillment-transition'\r\n                            | translate: { from: entry.data.from, to: entry.data.to }\r\n                    }}\r\n                </ng-container>\r\n                <vdr-history-entry-detail *ngIf=\"getFulfillment(entry) as fulfillment\">\r\n                    <vdr-fulfillment-detail\r\n                        [fulfillmentId]=\"fulfillment.id\"\r\n                        [order]=\"order\"\r\n                    ></vdr-fulfillment-detail>\r\n                </vdr-history-entry-detail>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"type.ORDER_NOTE\">\r\n                <div class=\"flex\">\r\n                    <div class=\"note-text\">\r\n                        <span *ngIf=\"entry.isPublic\" class=\"note-visibility public\">{{\r\n                            'common.public' | translate\r\n                        }}</span>\r\n                        <span *ngIf=\"!entry.isPublic\" class=\"note-visibility private\">{{\r\n                            'common.private' | translate\r\n                        }}</span>\r\n                        {{ entry.data.note }}\r\n                    </div>\r\n                    <div class=\"flex-spacer\"></div>\r\n                    <vdr-dropdown>\r\n                        <button class=\"icon-button\" vdrDropdownTrigger>\r\n                            <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n                        </button>\r\n                        <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                            <button\r\n                                class=\"button\"\r\n                                vdrDropdownItem\r\n                                (click)=\"updateNote.emit(entry)\"\r\n                                [disabled]=\"!('UpdateOrder' | hasPermission)\"\r\n                            >\r\n                                <clr-icon shape=\"edit\"></clr-icon>\r\n                                {{ 'common.edit' | translate }}\r\n                            </button>\r\n                            <div class=\"dropdown-divider\"></div>\r\n                            <button\r\n                                class=\"button\"\r\n                                vdrDropdownItem\r\n                                (click)=\"deleteNote.emit(entry)\"\r\n                                [disabled]=\"!('UpdateOrder' | hasPermission)\"\r\n                            >\r\n                                <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                                {{ 'common.delete' | translate }}\r\n                            </button>\r\n                        </vdr-dropdown-menu>\r\n                    </vdr-dropdown>\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"type.ORDER_COUPON_APPLIED\">\r\n                {{ 'order.history-coupon-code-applied' | translate }}:\r\n                <vdr-chip>\r\n                    <a [routerLink]=\"['/marketing', 'promotions', entry.data.promotionId]\">{{\r\n                        entry.data.couponCode\r\n                    }}</a>\r\n                </vdr-chip>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"type.ORDER_COUPON_REMOVED\">\r\n                {{ 'order.history-coupon-code-removed' | translate }}:\r\n                <vdr-chip\r\n                    ><span class=\"cancelled-coupon-code\">{{ entry.data.couponCode }}</span></vdr-chip\r\n                >\r\n            </ng-container>\r\n        </ng-container>\r\n    </vdr-timeline-entry>\r\n    <vdr-timeline-entry [isLast]=\"true\" [createdAt]=\"order.createdAt\" [featured]=\"true\">\r\n        <div class=\"title\">\r\n            {{ 'order.history-order-created' | translate }}\r\n        </div>\r\n    </vdr-timeline-entry>\r\n</div>\r\n",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [":host{margin-top:48px;display:block}.entry-list{margin-top:24px;margin-left:24px;margin-right:12px}.note-entry{display:flex;align-items:center}.note-entry .note{flex:1}.note-entry button{margin:0}.visibility-select{display:flex;justify-content:space-between;align-items:baseline}.visibility-select .public{color:var(--color-warning-500)}.visibility-select .private{color:var(--color-success-500)}textarea.note{flex:1;height:36px;border-radius:3px;margin-right:6px}.note-text{color:var(--color-grey-800);white-space:pre-wrap}.cancelled-coupon-code{text-decoration:line-through}.note-visibility{text-transform:lowercase}.note-visibility.public{color:var(--color-warning-500)}.note-visibility.private{color:var(--color-success-500)}\n"]
+                },] }
+    ];
+    OrderHistoryComponent.propDecorators = {
+        order: [{ type: i0.Input }],
+        history: [{ type: i0.Input }],
+        addNote: [{ type: i0.Output }],
+        updateNote: [{ type: i0.Output }],
+        deleteNote: [{ type: i0.Output }]
+    };
+
+    var OrderListComponent = /** @class */ (function (_super) {
+        __extends(OrderListComponent, _super);
+        function OrderListComponent(serverConfigService, dataService, localStorageService, router, route) {
+            var _this = this;
+            var _a;
+            _this = _super.call(this, router, route) || this;
+            _this.serverConfigService = serverConfigService;
+            _this.dataService = dataService;
+            _this.localStorageService = localStorageService;
+            _this.searchControl = new forms.FormControl('');
+            _this.searchOrderCodeControl = new forms.FormControl('');
+            _this.searchLastNameControl = new forms.FormControl('');
+            _this.orderStates = _this.serverConfigService.getOrderProcessStates().map(function (item) { return item.name; });
+            _this.filterPresets = [
+                {
+                    name: 'open',
+                    label: ngxTranslateExtractMarker.marker('order.filter-preset-open'),
+                    config: {
+                        active: false,
+                        states: _this.orderStates.filter(function (s) { return s !== 'Delivered' && s !== 'Cancelled' && s !== 'Shipped' && s !== 'Draft'; }),
+                    },
+                },
+                {
+                    name: 'shipped',
+                    label: ngxTranslateExtractMarker.marker('order.filter-preset-shipped'),
+                    config: {
+                        active: false,
+                        states: ['Shipped'],
+                    },
+                },
+                {
+                    name: 'completed',
+                    label: ngxTranslateExtractMarker.marker('order.filter-preset-completed'),
+                    config: {
+                        active: false,
+                        states: ['Delivered', 'Cancelled'],
+                    },
+                },
+                {
+                    name: 'active',
+                    label: ngxTranslateExtractMarker.marker('order.filter-preset-active'),
+                    config: {
+                        active: true,
+                    },
+                },
+                {
+                    name: 'draft',
+                    label: ngxTranslateExtractMarker.marker('order.filter-preset-draft'),
+                    config: {
+                        active: false,
+                        states: ['Draft'],
+                    },
+                },
+            ];
+            _this.canCreateDraftOrder = false;
+            _super.prototype.setQueryFn.call(_this, 
+            // tslint:disable-next-line:no-shadowed-variable
+            function (take, skip) { return _this.dataService.order.getOrders({ take: take, skip: skip }).refetchOnChannelChange(); }, function (data) { return data.orders; }, 
+            // tslint:disable-next-line:no-shadowed-variable
+            function (skip, take) { return _this.createQueryOptions(skip, take, _this.searchControl.value, _this.route.snapshot.queryParamMap.get('filter') || 'open'); });
+            var lastFilters = _this.localStorageService.get('orderListLastCustomFilters');
+            if (lastFilters) {
+                _this.setQueryParam(lastFilters, { replaceUrl: true });
+            }
+            _this.canCreateDraftOrder = !!((_a = _this.serverConfigService
+                .getOrderProcessStates()
+                .find(function (state) { return state.name === 'Created'; })) === null || _a === void 0 ? void 0 : _a.to.includes('Draft'));
+            if (!_this.canCreateDraftOrder) {
+                _this.filterPresets = _this.filterPresets.filter(function (p) { return p.name !== 'draft'; });
+            }
+            return _this;
+        }
+        OrderListComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            var _a;
+            _super.prototype.ngOnInit.call(this);
+            this.activePreset$ = this.route.queryParamMap.pipe(operators.map(function (qpm) { return qpm.get('filter') || 'open'; }), operators.distinctUntilChanged());
+            var searchTerms$ = rxjs.merge(this.searchControl.valueChanges).pipe(operators.filter(function (value) { return 2 < value.length || value.length === 0; }), operators.debounceTime(250));
+            rxjs.merge(searchTerms$, this.route.queryParamMap)
+                .pipe(operators.takeUntil(this.destroy$))
+                .subscribe(function (val) {
+                _this.refresh();
+            });
+            var queryParamMap = this.route.snapshot.queryParamMap;
+            this.customFilterForm = new forms.FormGroup({
+                states: new forms.FormControl((_a = queryParamMap.getAll('states')) !== null && _a !== void 0 ? _a : []),
+                placedAtStart: new forms.FormControl(queryParamMap.get('placedAtStart')),
+                placedAtEnd: new forms.FormControl(queryParamMap.get('placedAtEnd')),
+            });
+        };
+        OrderListComponent.prototype.selectFilterPreset = function (presetName) {
+            var _a;
+            var lastCustomFilters = (_a = this.localStorageService.get('orderListLastCustomFilters')) !== null && _a !== void 0 ? _a : {};
+            var emptyCustomFilters = { states: undefined, placedAtStart: undefined, placedAtEnd: undefined };
+            var filters = presetName === 'custom' ? lastCustomFilters : emptyCustomFilters;
+            this.setQueryParam(Object.assign({ filter: presetName, page: 1 }, filters), { replaceUrl: true });
+        };
+        OrderListComponent.prototype.applyCustomFilters = function () {
+            var formValue = this.customFilterForm.value;
+            var customFilters = {
+                states: formValue.states,
+                placedAtStart: formValue.placedAtStart,
+                placedAtEnd: formValue.placedAtEnd,
+            };
+            this.setQueryParam(Object.assign({ filter: 'custom' }, customFilters));
+            this.customFilterForm.markAsPristine();
+            this.localStorageService.set('orderListLastCustomFilters', customFilters);
+        };
+        OrderListComponent.prototype.createQueryOptions = function (
+        // tslint:disable-next-line:no-shadowed-variable
+        skip, take, searchTerm, activeFilterPreset) {
+            var _a;
+            var filterConfig = this.filterPresets.find(function (p) { return p.name === activeFilterPreset; });
+            // tslint:disable-next-line:no-shadowed-variable
+            var filter = {};
+            var filterOperator = i1.LogicalOperator.AND;
+            if (filterConfig) {
+                if (filterConfig.config.active != null) {
+                    filter.active = {
+                        eq: filterConfig.config.active,
+                    };
+                }
+                if (filterConfig.config.states) {
+                    filter.state = {
+                        in: filterConfig.config.states,
+                    };
+                }
+            }
+            else if (activeFilterPreset === 'custom') {
+                var queryParams = this.route.snapshot.queryParamMap;
+                var states = (_a = queryParams.getAll('states')) !== null && _a !== void 0 ? _a : [];
+                var placedAtStart = queryParams.get('placedAtStart');
+                var placedAtEnd = queryParams.get('placedAtEnd');
+                if (states.length) {
+                    filter.state = {
+                        in: states,
+                    };
+                }
+                if (placedAtStart && placedAtEnd) {
+                    filter.orderPlacedAt = {
+                        between: {
+                            start: placedAtStart,
+                            end: placedAtEnd,
+                        },
+                    };
+                }
+                else if (placedAtStart) {
+                    filter.orderPlacedAt = {
+                        after: placedAtStart,
+                    };
+                }
+                else if (placedAtEnd) {
+                    filter.orderPlacedAt = {
+                        before: placedAtEnd,
+                    };
+                }
+            }
+            if (searchTerm) {
+                filter = {
+                    customerLastName: {
+                        contains: searchTerm,
+                    },
+                    transactionId: {
+                        contains: searchTerm,
+                    },
+                    code: {
+                        contains: searchTerm,
+                    },
+                };
+                filterOperator = i1.LogicalOperator.OR;
+            }
+            return {
+                options: {
+                    skip: skip,
+                    take: take,
+                    filter: Object.assign({}, (filter !== null && filter !== void 0 ? filter : {})),
+                    sort: {
+                        updatedAt: i1.SortOrder.DESC,
+                    },
+                    filterOperator: filterOperator,
+                },
+            };
+        };
+        OrderListComponent.prototype.getShippingNames = function (order) {
+            if (order.shippingLines.length) {
+                return order.shippingLines.map(function (shippingLine) { return shippingLine.shippingMethod.name; }).join(', ');
+            }
+            else {
+                return '';
+            }
+        };
+        return OrderListComponent;
+    }(i1.BaseListComponent));
+    OrderListComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'vdr-order-list',
+                    template: "<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <div class=\"search-form\">\r\n            <div class=\"filter-presets btn-group btn-outline-primary\" *ngIf=\"activePreset$ | async as activePreset\">\r\n                <button\r\n                    class=\"btn\"\r\n                    *ngFor=\"let preset of filterPresets\"\r\n                    [class.btn-primary]=\"activePreset === preset.name\"\r\n                    (click)=\"selectFilterPreset(preset.name)\"\r\n                >\r\n                    {{ preset.label | translate }}\r\n                </button>\r\n                <button\r\n                    class=\"btn\"\r\n                    [class.btn-primary]=\"activePreset === 'custom'\"\r\n                    (click)=\"selectFilterPreset('custom')\"\r\n                >\r\n                    {{ 'order.filter-custom' | translate }}\r\n                    <clr-icon shape=\"angle down\"></clr-icon>\r\n                </button>\r\n            </div>\r\n            <input\r\n                type=\"text\"\r\n                name=\"searchTerm\"\r\n                [formControl]=\"searchControl\"\r\n                [placeholder]=\"'order.search-by-order-filters' | translate\"\r\n                class=\"search-input\"\r\n            />\r\n        </div>\r\n        <div class=\"custom-filters\" [class.expanded]=\"(activePreset$ | async) === 'custom'\">\r\n            <form [formGroup]=\"customFilterForm\">\r\n                <div class=\"flex align-center\">\r\n                    <ng-select\r\n                        [items]=\"orderStates\"\r\n                        appendTo=\"body\"\r\n                        [addTag]=\"false\"\r\n                        [multiple]=\"true\"\r\n                        formControlName=\"states\"\r\n                        [placeholder]=\"'state.all-orders' | translate\"\r\n                        [clearable]=\"true\"\r\n                        [searchable]=\"false\"\r\n                    >\r\n                        <ng-template ng-option-tmp let-item=\"item\">{{\r\n                            item | stateI18nToken | translate\r\n                        }}</ng-template>\r\n                        <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n                            <span class=\"ng-value-label\"> {{ item | stateI18nToken | translate }}</span>\r\n                            <span class=\"ng-value-icon right\" (click)=\"clear(item)\" aria-hidden=\"true\"\r\n                                >\u00D7</span\r\n                            >\r\n                        </ng-template>\r\n                    </ng-select>\r\n                    <button\r\n                        class=\"btn btn-secondary\"\r\n                        [disabled]=\"customFilterForm.pristine\"\r\n                        (click)=\"applyCustomFilters()\"\r\n                    >\r\n                        {{ 'order.apply-filters' | translate }}\r\n                        <clr-icon shape=\"filter\"></clr-icon>\r\n                    </button>\r\n                </div>\r\n                <div class=\"flex\">\r\n                    <div>\r\n                        <label>{{ 'order.placed-at-start' | translate }}</label>\r\n                        <vdr-datetime-picker formControlName=\"placedAtStart\"></vdr-datetime-picker>\r\n                    </div>\r\n                    <div>\r\n                        <label>{{ 'order.placed-at-end' | translate }}</label>\r\n                        <vdr-datetime-picker formControlName=\"placedAtEnd\"></vdr-datetime-picker>\r\n                    </div>\r\n                </div>\r\n            </form>\r\n        </div>\r\n    </vdr-ab-left>\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"order-list\"></vdr-action-bar-items>\r\n        <ng-container *ngIf=\"canCreateDraftOrder\">\r\n            <a class=\"btn btn-primary mt1\" *vdrIfPermissions=\"['CreateOrder']\" [routerLink]=\"['./draft/create']\">\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'catalog.create-draft-order' | translate }}\r\n            </a>\r\n        </ng-container>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<vdr-data-table\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n>\r\n    <vdr-dt-column>{{ 'common.code' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'order.customer' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'order.state' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'order.total' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'common.updated-at' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'order.placed-at' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'order.shipping' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column></vdr-dt-column>\r\n    <ng-template let-order=\"item\">\r\n        <td class=\"left align-middle\">{{ order.code }}</td>\r\n        <td class=\"left align-middle\">\r\n            <vdr-customer-label [customer]=\"order.customer\"></vdr-customer-label>\r\n        </td>\r\n        <td class=\"left align-middle\">\r\n            <vdr-order-state-label [state]=\"order.state\"></vdr-order-state-label>\r\n        </td>\r\n        <td class=\"left align-middle\">{{ order.totalWithTax | localeCurrency: order.currencyCode }}</td>\r\n        <td class=\"left align-middle\">{{ order.updatedAt | timeAgo }}</td>\r\n        <td class=\"left align-middle\">{{ order.orderPlacedAt | localeDate: 'medium' }}</td>\r\n        <td class=\"left align-middle\">{{ getShippingNames(order) }}</td>\r\n        <td class=\"right align-middle\">\r\n            <vdr-table-row-action\r\n                iconShape=\"shopping-cart\"\r\n                [label]=\"'common.open' | translate\"\r\n                [linkTo]=\"\r\n                    order.state === 'Modifying'\r\n                        ? ['./', order.id, 'modify']\r\n                        : order.state === 'Draft'\r\n                        ? ['./draft', order.id]\r\n                        : ['./', order.id]\r\n                \"\r\n            ></vdr-table-row-action>\r\n        </td>\r\n    </ng-template>\r\n</vdr-data-table>\r\n",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [".search-form{display:flex;flex-direction:column;align-items:baseline;width:100%;max-width:100vw;margin-bottom:6px}.filter-presets{max-width:90vw;overflow-x:auto}.search-input{margin-top:6px;min-width:300px}.custom-filters{overflow:hidden;max-height:0;padding-bottom:6px}.custom-filters.expanded{max-height:initial}.custom-filters>form{display:flex;flex-direction:column;align-items:center}.custom-filters>form>div{width:100%}ng-select{flex:1;min-width:200px;height:36px}ng-select ::ng-deep .ng-select-container{height:36px}\n"]
+                },] }
+    ];
+    OrderListComponent.ctorParameters = function () { return [
+        { type: i1.ServerConfigService },
+        { type: i1.DataService },
+        { type: i1.LocalStorageService },
+        { type: i1$1.Router },
+        { type: i1$1.ActivatedRoute }
+    ]; };
+
+    var OrderPaymentCardComponent = /** @class */ (function () {
+        function OrderPaymentCardComponent() {
+            this.settlePayment = new i0.EventEmitter();
+            this.transitionPaymentState = new i0.EventEmitter();
+            this.settleRefund = new i0.EventEmitter();
+        }
+        OrderPaymentCardComponent.prototype.refundHasMetadata = function (refund) {
+            return !!refund && Object.keys(refund.metadata).length > 0;
+        };
+        OrderPaymentCardComponent.prototype.nextOtherStates = function () {
+            if (!this.payment) {
+                return [];
+            }
+            return this.payment.nextStates.filter(function (s) { return s !== 'Settled' && s !== 'Error'; });
+        };
+        return OrderPaymentCardComponent;
+    }());
+    OrderPaymentCardComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'vdr-order-payment-card',
+                    template: "<div class=\"card\">\r\n    <div class=\"card-header payment-header\">\r\n        <div>\r\n            {{ 'order.payment' | translate }}\r\n            <ng-container *ngIf=\"payment.transactionId\">#{{ payment.transactionId }}</ng-container>\r\n        </div>\r\n        <div class=\"payment-state\">\r\n            <vdr-payment-state-label [state]=\"payment.state\"></vdr-payment-state-label>\r\n        </div>\r\n    </div>\r\n    <div class=\"card-block\">\r\n        <vdr-payment-detail [payment]=\"payment\" [currencyCode]=\"currencyCode\"></vdr-payment-detail>\r\n    </div>\r\n    <ng-container *ngFor=\"let refund of payment.refunds\">\r\n        <div class=\"card-header payment-header\">\r\n            <clr-icon shape=\"redo\" class=\"refund-icon\" dir=\"down\"></clr-icon>\r\n            {{ 'order.refund' | translate }} #{{ refund.id }}\r\n            <div class=\"clr-flex-fill\"></div>\r\n            <vdr-refund-state-label [state]=\"refund.state\"></vdr-refund-state-label>\r\n        </div>\r\n        <div class=\"card-block\">\r\n            <vdr-labeled-data [label]=\"'common.created-at' | translate\">\r\n                {{ refund.createdAt | localeDate: 'medium' }}\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data [label]=\"'order.refund-total' | translate\">\r\n                {{ refund.total | localeCurrency: currencyCode }}\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data [label]=\"'order.transaction-id' | translate\" *ngIf=\"refund.transactionId\">\r\n                {{ refund.transactionId }}\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data [label]=\"'order.refund-reason' | translate\" *ngIf=\"refund.reason\">\r\n                {{ refund.reason }}\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data [label]=\"'order.refund-metadata' | translate\" *ngIf=\"refundHasMetadata(refund)\">\r\n                <vdr-object-tree [value]=\"refund.metadata\"></vdr-object-tree>\r\n            </vdr-labeled-data>\r\n        </div>\r\n        <div class=\"card-footer\" *ngIf=\"refund.state === 'Pending'\">\r\n            <button class=\"btn btn-sm btn-primary\" (click)=\"settleRefund.emit(refund)\">\r\n                {{ 'order.settle-refund' | translate }}\r\n            </button>\r\n        </div>\r\n    </ng-container>\r\n    <div class=\"card-footer\" *ngIf=\"payment.nextStates.length\">\r\n        <button\r\n            class=\"btn btn-sm btn-primary\"\r\n            *ngIf=\"payment.nextStates.includes('Settled')\"\r\n            (click)=\"settlePayment.emit(payment)\"\r\n        >\r\n            {{ 'order.settle-payment' | translate }}\r\n        </button>\r\n        <vdr-dropdown>\r\n            <button class=\"icon-button\" vdrDropdownTrigger>\r\n                <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n            </button>\r\n            <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                <ng-container *ngFor=\"let nextState of nextOtherStates()\">\r\n                    <button\r\n                        type=\"button\"\r\n                        class=\"btn\"\r\n                        vdrDropdownItem\r\n                        (click)=\"transitionPaymentState.emit({ payment: payment, state: nextState })\"\r\n                    >\r\n                        <ng-container *ngIf=\"nextState !== 'Cancelled'; else cancel\">\r\n                            <clr-icon shape=\"step-forward-2\"></clr-icon>\r\n                            {{\r\n                                'order.transition-to-state'\r\n                                    | translate: { state: (nextState | stateI18nToken | translate) }\r\n                            }}\r\n                        </ng-container>\r\n                        <ng-template #cancel>\r\n                            <clr-icon shape=\"error-standard\" class=\"is-error\"></clr-icon>\r\n                            {{ 'order.cancel-payment' | translate }}\r\n                        </ng-template>\r\n                    </button>\r\n                </ng-container>\r\n            </vdr-dropdown-menu>\r\n        </vdr-dropdown>\r\n    </div>\r\n</div>\r\n",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [".payment-header{display:flex;justify-content:space-between;align-items:center}.refund-icon{margin-right:6px;color:var(--color-grey-400)}.card-footer{display:flex;align-items:center;justify-content:flex-end}\n"]
+                },] }
+    ];
+    OrderPaymentCardComponent.propDecorators = {
+        payment: [{ type: i0.Input }],
+        currencyCode: [{ type: i0.Input }],
+        settlePayment: [{ type: i0.Output }],
+        transitionPaymentState: [{ type: i0.Output }],
+        settleRefund: [{ type: i0.Output }]
+    };
+
+    var NODE_HEIGHT = 72;
+
+    var OrderProcessEdgeComponent = /** @class */ (function () {
+        function OrderProcessEdgeComponent() {
+        }
+        OrderProcessEdgeComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.active$ = this.from.active$
+                .asObservable()
+                .pipe(operators.tap(function (active) { return _this.to.activeTarget$.next(active); }));
+        };
+        OrderProcessEdgeComponent.prototype.getStyle = function () {
+            var direction = this.from.index < this.to.index ? 'down' : 'up';
+            var startPos = this.from.getPos(direction === 'down' ? 'bottom' : 'top');
+            var endPos = this.to.getPos(direction === 'down' ? 'top' : 'bottom');
+            var dX = Math.abs(startPos.x - endPos.x);
+            var dY = Math.abs(startPos.y - endPos.y);
+            var length = Math.sqrt(Math.pow(dX, 2) + Math.pow(dY, 2));
+            return Object.assign({ 'top.px': startPos.y, 'left.px': startPos.x + (direction === 'down' ? 10 : 40) + this.index * 12, 'height.px': length, 'width.px': 1 }, (direction === 'up'
+                ? {
+                    transform: 'rotateZ(180deg)',
+                    'transform-origin': 'top',
+                }
+                : {}));
+        };
+        return OrderProcessEdgeComponent;
+    }());
+    OrderProcessEdgeComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'vdr-order-process-edge',
+                    template: "<div\r\n    [attr.data-from]=\"from.node.name\"\r\n    [attr.data-to]=\"to.node.name\"\r\n    [ngStyle]=\"getStyle()\"\r\n    [class.active]=\"active$ | async\"\r\n    class=\"edge\">\r\n    <clr-icon shape=\"arrow\" flip=\"vertical\" class=\"arrow\"></clr-icon>\r\n</div>\r\n",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [".edge{position:absolute;border:1px solid var(--color-component-border-200);background-color:var(--color-component-bg-300);opacity:.3;transition:border .2s,opacity .2s,background-color .2s}.edge.active{border-color:var(--color-primary-500);background-color:var(--color-primary-500);opacity:1}.edge.active .arrow{color:var(--color-primary-500)}.edge .arrow{position:absolute;bottom:-4px;left:-8px;color:var(--color-grey-300)}\n"]
+                },] }
+    ];
+    OrderProcessEdgeComponent.propDecorators = {
+        from: [{ type: i0.Input }],
+        to: [{ type: i0.Input }],
+        index: [{ type: i0.Input }]
+    };
+
+    var OrderProcessNodeComponent = /** @class */ (function () {
+        function OrderProcessNodeComponent(elementRef) {
+            this.elementRef = elementRef;
+            this.active$ = new rxjs.BehaviorSubject(false);
+            this.activeTarget$ = new rxjs.BehaviorSubject(false);
+            this.isCancellable = false;
+            // We use a class field here to prevent the
+            // i18n extractor from extracting a "Cancelled" key
+            this.cancelledState = 'Cancelled';
+        }
+        OrderProcessNodeComponent.prototype.ngOnChanges = function (changes) {
+            this.isCancellable = !!this.node.to.find(function (s) { return s.name === 'Cancelled'; });
+            if (changes.active) {
+                this.active$.next(this.active);
+            }
+        };
+        OrderProcessNodeComponent.prototype.getPos = function (origin) {
+            if (origin === void 0) { origin = 'top'; }
+            var _a, _b;
+            var rect = this.elementRef.nativeElement.getBoundingClientRect();
+            var nodeHeight = (_b = (_a = this.elementRef.nativeElement.querySelector('.node')) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().height) !== null && _b !== void 0 ? _b : 0;
+            return {
+                x: 10,
+                y: this.index * NODE_HEIGHT + (origin === 'bottom' ? nodeHeight : 0),
+            };
+        };
+        OrderProcessNodeComponent.prototype.getStyle = function () {
+            var pos = this.getPos();
+            return {
+                'top.px': pos.y,
+                'left.px': pos.x,
+            };
+        };
+        return OrderProcessNodeComponent;
+    }());
+    OrderProcessNodeComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'vdr-order-process-node',
+                    template: "<div class=\"node-wrapper\" [ngStyle]=\"getStyle()\" [class.active]=\"active$ | async\">\r\n    <div\r\n        class=\"node\"\r\n        [class.active-target]=\"activeTarget$ | async\"\r\n    >\r\n        {{ node.name | stateI18nToken | translate }}\r\n    </div>\r\n    <div class=\"cancelled-wrapper\" *ngIf=\"isCancellable\">\r\n        <div class=\"cancelled-edge\">\r\n        </div>\r\n        <clr-icon shape=\"dot-circle\"></clr-icon>\r\n        <div class=\"cancelled-node\">\r\n            {{ cancelledState | stateI18nToken | translate }}\r\n        </div>\r\n    </div>\r\n</div>\r\n",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [":host{display:block}.node-wrapper{position:absolute;z-index:1;display:flex;align-items:center}.node{display:inline-block;border:2px solid var(--color-component-border-200);border-radius:3px;padding:3px 6px;z-index:1;background-color:var(--color-component-bg-100);opacity:.7;transition:opacity .2s,background-color .2s,color .2s;cursor:default}.node.active-target{border-color:var(--color-primary-500);opacity:.9}.cancelled-wrapper{display:flex;align-items:center;color:var(--color-grey-300);transition:color .2s,opacity .2s;opacity:.7}.cancelled-edge{width:48px;height:2px;background-color:var(--color-component-bg-300);transition:background-color .2s}clr-icon{margin-left:-1px}.cancelled-node{margin-left:6px}.active .cancelled-wrapper{opacity:1}.active .node{opacity:1;background-color:var(--color-primary-600);border-color:var(--color-primary-600);color:var(--color-primary-100)}.active .cancelled-wrapper{color:var(--color-error-500)}.active .cancelled-edge{background-color:var(--color-error-500)}\n"]
+                },] }
+    ];
+    OrderProcessNodeComponent.ctorParameters = function () { return [
+        { type: i0.ElementRef }
+    ]; };
+    OrderProcessNodeComponent.propDecorators = {
+        node: [{ type: i0.Input }],
+        index: [{ type: i0.Input }],
+        active: [{ type: i0.Input }]
+    };
+
+    var OrderProcessGraphComponent = /** @class */ (function () {
+        function OrderProcessGraphComponent(changeDetector) {
+            this.changeDetector = changeDetector;
+            this.setActiveState$ = new rxjs.BehaviorSubject(undefined);
+            this.nodes = [];
+            this.edges = [];
+        }
+        Object.defineProperty(OrderProcessGraphComponent.prototype, "outerHeight", {
+            get: function () {
+                return this.nodes.length * NODE_HEIGHT;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        OrderProcessGraphComponent.prototype.ngOnInit = function () {
+            this.setActiveState$.next(this.initialState);
+            this.activeState$ = this.setActiveState$.pipe(operators.debounceTime(150));
+        };
+        OrderProcessGraphComponent.prototype.ngOnChanges = function (changes) {
+            this.populateNodes();
+        };
+        OrderProcessGraphComponent.prototype.ngAfterViewInit = function () {
+            var _this = this;
+            setTimeout(function () { return _this.populateEdges(); });
+        };
+        OrderProcessGraphComponent.prototype.onMouseOver = function (stateName) {
+            this.setActiveState$.next(stateName);
+        };
+        OrderProcessGraphComponent.prototype.onMouseOut = function () {
+            this.setActiveState$.next(this.initialState);
+        };
+        OrderProcessGraphComponent.prototype.getNodeFor = function (state) {
+            if (this.nodeComponents) {
+                return this.nodeComponents.find(function (n) { return n.node.name === state; });
+            }
+        };
+        OrderProcessGraphComponent.prototype.populateNodes = function () {
+            var e_1, _c, e_2, _d;
+            var _a, _b;
+            var stateNodeMap = new Map();
+            try {
+                for (var _e = __values(this.states), _f = _e.next(); !_f.done; _f = _e.next()) {
+                    var state = _f.value;
+                    stateNodeMap.set(state.name, {
+                        name: state.name,
+                        to: [],
+                    });
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (_f && !_f.done && (_c = _e.return)) _c.call(_e);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+            var _loop_1 = function (name, stateNode) {
+                var e_3, _k;
+                var targets = (_b = (_a = this_1.states.find(function (s) { return s.name === name; })) === null || _a === void 0 ? void 0 : _a.to) !== null && _b !== void 0 ? _b : [];
+                try {
+                    for (var targets_1 = (e_3 = void 0, __values(targets)), targets_1_1 = targets_1.next(); !targets_1_1.done; targets_1_1 = targets_1.next()) {
+                        var target = targets_1_1.value;
+                        var targetNode = stateNodeMap.get(target);
+                        if (targetNode) {
+                            stateNode.to.push(targetNode);
+                        }
+                    }
+                }
+                catch (e_3_1) { e_3 = { error: e_3_1 }; }
+                finally {
+                    try {
+                        if (targets_1_1 && !targets_1_1.done && (_k = targets_1.return)) _k.call(targets_1);
+                    }
+                    finally { if (e_3) throw e_3.error; }
+                }
+            };
+            var this_1 = this;
+            try {
+                for (var _g = __values(stateNodeMap.entries()), _h = _g.next(); !_h.done; _h = _g.next()) {
+                    var _j = __read(_h.value, 2), name = _j[0], stateNode = _j[1];
+                    _loop_1(name, stateNode);
+                }
+            }
+            catch (e_2_1) { e_2 = { error: e_2_1 }; }
+            finally {
+                try {
+                    if (_h && !_h.done && (_d = _g.return)) _d.call(_g);
+                }
+                finally { if (e_2) throw e_2.error; }
+            }
+            this.nodes = __spreadArray([], __read(stateNodeMap.values())).filter(function (n) { return n.name !== 'Cancelled'; });
+        };
+        OrderProcessGraphComponent.prototype.populateEdges = function () {
+            var e_4, _c, e_5, _d;
+            try {
+                for (var _e = __values(this.nodes), _f = _e.next(); !_f.done; _f = _e.next()) {
+                    var node = _f.value;
+                    var nodeCmp = this.getNodeFor(node.name);
+                    var index = 0;
+                    try {
+                        for (var _g = (e_5 = void 0, __values(node.to)), _h = _g.next(); !_h.done; _h = _g.next()) {
+                            var to = _h.value;
+                            var toCmp = this.getNodeFor(to.name);
+                            if (nodeCmp && toCmp && nodeCmp !== toCmp) {
+                                this.edges.push({
+                                    to: toCmp,
+                                    from: nodeCmp,
+                                    index: index,
+                                });
+                                index++;
+                            }
+                        }
+                    }
+                    catch (e_5_1) { e_5 = { error: e_5_1 }; }
+                    finally {
+                        try {
+                            if (_h && !_h.done && (_d = _g.return)) _d.call(_g);
+                        }
+                        finally { if (e_5) throw e_5.error; }
+                    }
+                }
+            }
+            catch (e_4_1) { e_4 = { error: e_4_1 }; }
+            finally {
+                try {
+                    if (_f && !_f.done && (_c = _e.return)) _c.call(_e);
+                }
+                finally { if (e_4) throw e_4.error; }
+            }
+            this.edges = __spreadArray([], __read(this.edges));
+            this.changeDetector.markForCheck();
+        };
+        return OrderProcessGraphComponent;
+    }());
+    OrderProcessGraphComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'vdr-order-process-graph',
+                    template: "<ng-container *ngFor=\"let state of nodes; let i = index\">\r\n    <vdr-order-process-node\r\n        [node]=\"state\"\r\n        [index]=\"i\"\r\n        [active]=\"(activeState$ | async) === state.name\"\r\n        (mouseenter)=\"onMouseOver(state.name)\"\r\n        (mouseleave)=\"onMouseOut()\"\r\n    ></vdr-order-process-node>\r\n</ng-container>\r\n<ng-container *ngFor=\"let edge of edges\">\r\n    <vdr-order-process-edge [from]=\"edge.from\" [to]=\"edge.to\" [index]=\"edge.index\"></vdr-order-process-edge>\r\n</ng-container>\r\n",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [":host{display:block;border:1px hotpink;margin:20px;padding:12px;position:relative}.state-row{display:flex}\n"]
+                },] }
+    ];
+    OrderProcessGraphComponent.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef }
+    ]; };
+    OrderProcessGraphComponent.propDecorators = {
+        states: [{ type: i0.Input }],
+        initialState: [{ type: i0.Input }],
+        nodeComponents: [{ type: i0.ViewChildren, args: [OrderProcessNodeComponent,] }],
+        outerHeight: [{ type: i0.HostBinding, args: ['style.height.px',] }]
+    };
+
+    var OrderTableComponent = /** @class */ (function () {
+        function OrderTableComponent() {
+            this.isDraft = false;
+            this.adjust = new i0.EventEmitter();
+            this.remove = new i0.EventEmitter();
+            this.orderLineCustomFieldsVisible = false;
+            this.customFieldsForLine = {};
+        }
+        Object.defineProperty(OrderTableComponent.prototype, "visibleOrderLineCustomFields", {
+            get: function () {
+                return this.orderLineCustomFieldsVisible ? this.orderLineCustomFields : [];
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(OrderTableComponent.prototype, "showElided", {
+            get: function () {
+                return !this.orderLineCustomFieldsVisible && 0 < this.orderLineCustomFields.length;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        OrderTableComponent.prototype.ngOnInit = function () {
+            this.orderLineCustomFieldsVisible = this.orderLineCustomFields.length < 2;
+            this.getLineCustomFields();
+        };
+        OrderTableComponent.prototype.draftInputBlur = function (line, quantity) {
+            if (line.quantity !== quantity) {
+                this.adjust.emit({ lineId: line.id, quantity: quantity });
+            }
+        };
+        OrderTableComponent.prototype.toggleOrderLineCustomFields = function () {
+            this.orderLineCustomFieldsVisible = !this.orderLineCustomFieldsVisible;
+        };
+        OrderTableComponent.prototype.getLineDiscounts = function (line) {
+            return line.discounts.filter(function (a) { return a.type === i1.AdjustmentType.PROMOTION; });
+        };
+        OrderTableComponent.prototype.getLineCustomFields = function () {
+            var e_1, _a;
+            var _this = this;
+            var _loop_1 = function (line) {
+                var formGroup = new forms.FormGroup({});
+                var result = this_1.orderLineCustomFields
+                    .map(function (config) {
+                    var value = line.customFields[config.name];
+                    formGroup.addControl(config.name, new forms.FormControl(value));
+                    return {
+                        config: config,
+                        formGroup: formGroup,
+                        value: value,
+                    };
+                })
+                    .filter(function (field) {
+                    return _this.orderLineCustomFieldsVisible ? true : field.value != null;
+                });
+                this_1.customFieldsForLine[line.id] = result;
+            };
+            var this_1 = this;
+            try {
+                for (var _b = __values(this.order.lines), _c = _b.next(); !_c.done; _c = _b.next()) {
+                    var line = _c.value;
+                    _loop_1(line);
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+        };
+        OrderTableComponent.prototype.getPromotionLink = function (promotion) {
+            var id = promotion.adjustmentSource.split(':')[1];
+            return ['/marketing', 'promotions', id];
+        };
+        OrderTableComponent.prototype.getCouponCodeForAdjustment = function (order, promotionAdjustment) {
+            var id = promotionAdjustment.adjustmentSource.split(':')[1];
+            var promotion = order.promotions.find(function (p) { return p.id === id; });
+            if (promotion) {
+                return promotion.couponCode || undefined;
+            }
+        };
+        OrderTableComponent.prototype.getShippingNames = function (order) {
+            if (order.shippingLines.length) {
+                return order.shippingLines.map(function (shippingLine) { return shippingLine.shippingMethod.name; }).join(', ');
+            }
+            else {
+                return '';
+            }
+        };
+        return OrderTableComponent;
+    }());
+    OrderTableComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'vdr-order-table',
+                    template: "<table class=\"order-table table\">\r\n    <thead>\r\n        <tr>\r\n            <th></th>\r\n            <th>{{ 'order.product-name' | translate }}</th>\r\n            <th>{{ 'order.product-sku' | translate }}</th>\r\n            <th>{{ 'order.unit-price' | translate }}</th>\r\n            <th>{{ 'order.quantity' | translate }}</th>\r\n            <th>{{ 'order.total' | translate }}</th>\r\n        </tr>\r\n    </thead>\r\n    <tbody>\r\n        <ng-container *ngFor=\"let line of order.lines\">\r\n            <tr class=\"order-line\" [class.is-cancelled]=\"line.quantity === 0\">\r\n                <td class=\"align-middle thumb\">\r\n                    <img *ngIf=\"line.featuredAsset\" [src]=\"line.featuredAsset | assetPreview: 'tiny'\" />\r\n                </td>\r\n                <td class=\"align-middle name\">{{ line.productVariant.name }}</td>\r\n                <td class=\"align-middle sku\">{{ line.productVariant.sku }}</td>\r\n                <td class=\"align-middle unit-price\">\r\n                    {{ line.unitPriceWithTax | localeCurrency: order.currencyCode }}\r\n                    <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                        {{ line.unitPrice | localeCurrency: order.currencyCode }}\r\n                    </div>\r\n                </td>\r\n                <td class=\"align-middle quantity\">\r\n                    <ng-container *ngIf=\"!isDraft; else draft\">\r\n                        {{ line.quantity }}\r\n                    </ng-container>\r\n                    <ng-template #draft>\r\n                        <div class=\"flex\">\r\n                            <input\r\n                                class=\"draft-qty\"\r\n                                type=\"number\"\r\n                                min=\"0\"\r\n                                #qtyInput\r\n                                [value]=\"line.quantity\"\r\n                                (blur)=\"draftInputBlur(line, qtyInput.valueAsNumber)\"\r\n                            />\r\n                            <button class=\"icon-button\" (click)=\"remove.emit({ lineId: line.id })\">\r\n                                <clr-icon shape=\"trash\"></clr-icon>\r\n                            </button>\r\n                        </div>\r\n                    </ng-template>\r\n                    <vdr-line-refunds [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\r\n                    <vdr-line-fulfillment [line]=\"line\" [orderState]=\"order.state\"></vdr-line-fulfillment>\r\n                </td>\r\n                <td class=\"align-middle total\">\r\n                    {{ line.linePriceWithTax | localeCurrency: order.currencyCode }}\r\n                    <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                        {{ line.linePrice | localeCurrency: order.currencyCode }}\r\n                    </div>\r\n\r\n                    <ng-container *ngIf=\"getLineDiscounts(line) as discounts\">\r\n                        <vdr-dropdown *ngIf=\"discounts.length\">\r\n                            <div class=\"promotions-label\" vdrDropdownTrigger>\r\n                                {{ 'order.promotions-applied' | translate }}\r\n                            </div>\r\n                            <vdr-dropdown-menu>\r\n                                <div class=\"line-promotion\" *ngFor=\"let discount of discounts\">\r\n                                    <a class=\"promotion-name\" [routerLink]=\"getPromotionLink(discount)\">{{\r\n                                        discount.description\r\n                                    }}</a>\r\n                                    <div class=\"promotion-amount\">\r\n                                        {{ discount.amountWithTax | localeCurrency: order.currencyCode }}\r\n                                        <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                            {{ discount.amount | localeCurrency: order.currencyCode }}\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </vdr-dropdown-menu>\r\n                        </vdr-dropdown>\r\n                    </ng-container>\r\n                </td>\r\n            </tr>\r\n            <ng-container *ngIf=\"customFieldsForLine[line.id] as customFields\">\r\n                <tr *ngIf=\"customFields.length\">\r\n                    <td colspan=\"6\" class=\"custom-fields-row\">\r\n                        <div class=\"order-line-custom-fields\">\r\n                            <div class=\"custom-field\" *ngFor=\"let field of customFields\">\r\n                                <vdr-custom-field-control\r\n                                    [compact]=\"true\"\r\n                                    [readonly]=\"true\"\r\n                                    [customField]=\"field.config\"\r\n                                    [customFieldsFormGroup]=\"field.formGroup\"\r\n                                ></vdr-custom-field-control>\r\n                            </div>\r\n                        </div>\r\n                    </td>\r\n                </tr>\r\n            </ng-container>\r\n        </ng-container>\r\n        <tr class=\"surcharge\" *ngFor=\"let surcharge of order.surcharges\">\r\n            <td class=\"align-middle name left\" colspan=\"2\">{{ surcharge.description }}</td>\r\n            <td class=\"align-middle sku\">{{ surcharge.sku }}</td>\r\n            <td class=\"align-middle\" colspan=\"2\"></td>\r\n            <td class=\"align-middle total\">\r\n                {{ surcharge.priceWithTax | localeCurrency: order.currencyCode }}\r\n                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                    {{ surcharge.price | localeCurrency: order.currencyCode }}\r\n                </div>\r\n            </td>\r\n        </tr>\r\n        <ng-container *ngFor=\"let discount of order.discounts\">\r\n            <tr class=\"order-adjustment\" *ngIf=\"discount.type !== 'OTHER'\">\r\n                <td colspan=\"5\" class=\"left clr-align-middle\">\r\n                    <a [routerLink]=\"getPromotionLink(discount)\">{{ discount.description }}</a>\r\n                    <vdr-chip *ngIf=\"getCouponCodeForAdjustment(order, discount) as couponCode\">{{\r\n                        couponCode\r\n                    }}</vdr-chip>\r\n                </td>\r\n                <td class=\"clr-align-middle\">\r\n                    {{ discount.amountWithTax | localeCurrency: order.currencyCode }}\r\n                    <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                        {{ discount.amount | localeCurrency: order.currencyCode }}\r\n                    </div>\r\n                </td>\r\n            </tr>\r\n        </ng-container>\r\n        <tr class=\"sub-total\">\r\n            <td class=\"left clr-align-middle\">{{ 'order.sub-total' | translate }}</td>\r\n            <td colspan=\"4\"></td>\r\n            <td class=\"clr-align-middle\">\r\n                {{ order.subTotalWithTax | localeCurrency: order.currencyCode }}\r\n                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                    {{ order.subTotal | localeCurrency: order.currencyCode }}\r\n                </div>\r\n            </td>\r\n        </tr>\r\n        <tr class=\"shipping\">\r\n            <td class=\"left clr-align-middle\">{{ 'order.shipping' | translate }}</td>\r\n            <td class=\"clr-align-middle\">{{ getShippingNames(order) }}</td>\r\n            <td colspan=\"3\"></td>\r\n            <td class=\"clr-align-middle\">\r\n                {{ order.shippingWithTax | localeCurrency: order.currencyCode }}\r\n                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                    {{ order.shipping | localeCurrency: order.currencyCode }}\r\n                </div>\r\n            </td>\r\n        </tr>\r\n        <tr class=\"total\">\r\n            <td class=\"left clr-align-middle\">{{ 'order.total' | translate }}</td>\r\n            <td colspan=\"4\"></td>\r\n            <td class=\"clr-align-middle\">\r\n                {{ order.totalWithTax | localeCurrency: order.currencyCode }}\r\n                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                    {{ order.total | localeCurrency: order.currencyCode }}\r\n                </div>\r\n            </td>\r\n        </tr>\r\n    </tbody>\r\n</table>\r\n",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [".order-table .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}.order-table .sub-total td{border-top:1px dashed var(--color-component-border-200)}.order-table .total td{font-weight:bold;border-top:1px dashed var(--color-component-border-200)}.order-table td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}.order-table img{border-radius:var(--border-radius-img)}.order-table .order-line-custom-fields{display:flex;flex-wrap:wrap}.order-table .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-right:18px}.order-table .draft-qty{max-width:48px}.order-table .order-line-custom-field{background-color:var(--color-component-bg-100)}.order-table .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}.order-table .net-price{font-size:11px;color:var(--color-text-300)}.order-table .promotions-label{-webkit-text-decoration:underline dotted var(--color-text-200);text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}.order-table .thumb img{width:50px;height:50px}::ng-deep .line-promotion{display:flex;justify-content:space-between;padding:6px 12px}::ng-deep .line-promotion .promotion-amount{margin-left:12px}::ng-deep .line-promotion .net-price{font-size:11px;color:var(--color-text-300)}\n"]
+                },] }
+    ];
+    OrderTableComponent.propDecorators = {
+        order: [{ type: i0.Input }],
+        orderLineCustomFields: [{ type: i0.Input }],
+        isDraft: [{ type: i0.Input }],
+        adjust: [{ type: i0.Output }],
+        remove: [{ type: i0.Output }]
+    };
+
+    var PaymentDetailComponent = /** @class */ (function () {
+        function PaymentDetailComponent() {
+        }
+        return PaymentDetailComponent;
+    }());
+    PaymentDetailComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'vdr-payment-detail',
+                    template: "<vdr-labeled-data [label]=\"'order.payment-method' | translate\">\r\n    {{ payment.method }}\r\n</vdr-labeled-data>\r\n<vdr-labeled-data [label]=\"'order.amount' | translate\">\r\n    {{ payment.amount | localeCurrency: currencyCode }}\r\n</vdr-labeled-data>\r\n<vdr-labeled-data *ngIf=\"payment.errorMessage\" [label]=\"'order.error-message' | translate\">\r\n    {{ payment.errorMessage }}\r\n</vdr-labeled-data>\r\n<vdr-labeled-data *ngIf=\"payment.transactionId\" [label]=\"'order.transaction-id' | translate\">\r\n    {{ payment.transactionId }}\r\n</vdr-labeled-data>\r\n<vdr-labeled-data [label]=\"'order.payment-metadata' | translate\">\r\n    <vdr-object-tree [value]=\"payment.metadata\"></vdr-object-tree>\r\n</vdr-labeled-data>\r\n",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [""]
+                },] }
+    ];
+    PaymentDetailComponent.propDecorators = {
+        payment: [{ type: i0.Input }],
+        currencyCode: [{ type: i0.Input }]
+    };
+
+    var PaymentStateLabelComponent = /** @class */ (function () {
+        function PaymentStateLabelComponent() {
+        }
+        Object.defineProperty(PaymentStateLabelComponent.prototype, "chipColorType", {
+            get: function () {
+                switch (this.state) {
+                    case 'Authorized':
+                        return 'warning';
+                    case 'Settled':
+                        return 'success';
+                    case 'Declined':
+                    case 'Cancelled':
+                        return 'error';
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return PaymentStateLabelComponent;
+    }());
+    PaymentStateLabelComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'vdr-payment-state-label',
+                    template: "<vdr-chip [title]=\"'order.payment-state' | translate\" [colorType]=\"chipColorType\">\r\n    <clr-icon shape=\"check-circle\" *ngIf=\"state === 'Settled'\"></clr-icon>\r\n    {{ state | stateI18nToken | translate }}\r\n</vdr-chip>\r\n",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [":host{font-size:14px}\n"]
+                },] }
+    ];
+    PaymentStateLabelComponent.propDecorators = {
+        state: [{ type: i0.Input }]
+    };
+
+    var RefundStateLabelComponent = /** @class */ (function () {
+        function RefundStateLabelComponent() {
+        }
+        Object.defineProperty(RefundStateLabelComponent.prototype, "chipColorType", {
+            get: function () {
+                switch (this.state) {
+                    case 'Pending':
+                        return 'warning';
+                    case 'Settled':
+                        return 'success';
+                    case 'Failed':
+                        return 'error';
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return RefundStateLabelComponent;
+    }());
+    RefundStateLabelComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'vdr-refund-state-label',
+                    template: "<vdr-chip [title]=\"'order.payment-state' | translate\" [colorType]=\"chipColorType\">\r\n    <clr-icon shape=\"check-circle\" *ngIf=\"state === 'Settled'\"></clr-icon>\r\n    {{ state | stateI18nToken | translate }}\r\n</vdr-chip>\r\n",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [":host{font-size:14px}\n"]
+                },] }
+    ];
+    RefundStateLabelComponent.propDecorators = {
+        state: [{ type: i0.Input }]
+    };
+
+    var SimpleItemListComponent = /** @class */ (function () {
+        function SimpleItemListComponent() {
+        }
+        return SimpleItemListComponent;
+    }());
+    SimpleItemListComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'vdr-simple-item-list',
+                    template: "<div class=\"items-list\">\r\n    <ul>\r\n        <li *ngFor=\"let item of items\" [title]=\"item.name\">\r\n            <div class=\"quantity\">{{ item.quantity }}</div>\r\n            <clr-icon shape=\"times\" size=\"12\"></clr-icon>\r\n            {{ item.name }}\r\n        </li>\r\n    </ul>\r\n</div>\r\n",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [".items-list{font-size:12px}.items-list ul{margin-top:6px;list-style-type:none;margin-left:2px}.items-list ul li{line-height:14px;text-overflow:ellipsis;overflow:hidden}.items-list .quantity{min-width:16px;display:inline-block}\n"]
+                },] }
+    ];
+    SimpleItemListComponent.propDecorators = {
+        items: [{ type: i0.Input }]
+    };
+
+    /**
+     * Resolves the id from the path into a Customer entity.
+     */
+    var OrderResolver = /** @class */ (function () {
+        function OrderResolver(router, dataService) {
+            this.router = router;
+            this.dataService = dataService;
+        }
+        /** @internal */
+        OrderResolver.prototype.resolve = function (route, state) {
+            var _this = this;
+            var id = route.paramMap.get('id');
+            // Complete the entity stream upon navigating away
+            var navigateAway$ = this.router.events.pipe(operators.filter(function (event) { return event instanceof i1$1.ActivationStart; }));
+            var stream = this.dataService.order
+                .getOrder(id)
+                .mapStream(function (data) { return data.order; })
+                .pipe(operators.switchMap(function (order) {
+                if ((order === null || order === void 0 ? void 0 : order.state) === 'Draft' && route.component !== DraftOrderDetailComponent) {
+                    // Make sure Draft orders only get displayed with the DraftOrderDetailComponent
+                    _this.router.navigate(['/orders/draft', id]);
+                    return rxjs.EMPTY;
+                }
+                else {
+                    return [order];
+                }
+            }), operators.takeUntil(navigateAway$), operators.filter(sharedUtils.notNullOrUndefined), operators.shareReplay(1));
+            return stream.pipe(operators.take(1), operators.map(function () { return stream; }));
+        };
+        return OrderResolver;
+    }());
+    OrderResolver.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function OrderResolver_Factory() { return new OrderResolver(i0__namespace.ɵɵinject(i1__namespace$1.Router), i0__namespace.ɵɵinject(i1__namespace.DataService)); }, token: OrderResolver, providedIn: "root" });
+    OrderResolver.decorators = [
+        { type: i0.Injectable, args: [{
+                    providedIn: 'root',
+                },] }
+    ];
+    OrderResolver.ctorParameters = function () { return [
+        { type: i1$1.Router },
+        { type: i1.DataService }
+    ]; };
+
+    var OrderGuard = /** @class */ (function () {
+        function OrderGuard(dataService, router) {
+            this.dataService = dataService;
+            this.router = router;
+        }
+        OrderGuard.prototype.canActivate = function (route, state) {
+            var _this = this;
+            var isDraft = state.url.includes('orders/draft');
+            var id = route.paramMap.get('id');
+            if (isDraft) {
+                if (id === 'create') {
+                    return this.dataService.order
+                        .createDraftOrder()
+                        .pipe(operators.map(function (_a) {
+                        var createDraftOrder = _a.createDraftOrder;
+                        return _this.router.parseUrl("/orders/draft/" + createDraftOrder.id);
+                    }));
+                }
+                else {
+                    return true;
+                }
+            }
+            else {
+                return true;
+            }
+        };
+        return OrderGuard;
+    }());
+    OrderGuard.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function OrderGuard_Factory() { return new OrderGuard(i0__namespace.ɵɵinject(i1__namespace.DataService), i0__namespace.ɵɵinject(i1__namespace$1.Router)); }, token: OrderGuard, providedIn: "root" });
+    OrderGuard.decorators = [
+        { type: i0.Injectable, args: [{
+                    providedIn: 'root',
+                },] }
+    ];
+    OrderGuard.ctorParameters = function () { return [
+        { type: i1.DataService },
+        { type: i1$1.Router }
+    ]; };
+
+    var ɵ0 = {
+        breadcrumb: ngxTranslateExtractMarker.marker('breadcrumb.orders'),
+    }, ɵ1 = {
+        breadcrumb: orderBreadcrumb,
+    }, ɵ2 = {
+        breadcrumb: orderBreadcrumb,
+    }, ɵ3 = {
+        breadcrumb: modifyingOrderBreadcrumb,
+    };
+    var orderRoutes = [
+        {
+            path: '',
+            component: OrderListComponent,
+            data: ɵ0,
+        },
+        {
+            path: 'draft/:id',
+            component: DraftOrderDetailComponent,
+            resolve: {
+                entity: OrderResolver,
+            },
+            canActivate: [OrderGuard],
+            canDeactivate: [i1.CanDeactivateDetailGuard],
+            data: ɵ1,
+        },
+        {
+            path: ':id',
+            component: OrderDetailComponent,
+            resolve: {
+                entity: OrderResolver,
+            },
+            canActivate: [OrderGuard],
+            canDeactivate: [i1.CanDeactivateDetailGuard],
+            data: ɵ2,
+        },
+        {
+            path: ':id/modify',
+            component: OrderEditorComponent,
+            resolve: {
+                entity: OrderResolver,
+            },
+            // canDeactivate: [CanDeactivateDetailGuard],
+            data: ɵ3,
+        },
+    ];
+    function orderBreadcrumb(data, params) {
+        return i1.detailBreadcrumb({
+            entity: data.entity,
+            id: params.id,
+            breadcrumbKey: 'breadcrumb.orders',
+            getName: function (order) { return order.code; },
+            route: '',
+        });
+    }
+    function modifyingOrderBreadcrumb(data, params) {
+        return orderBreadcrumb(data, params).pipe(operators.map(function (breadcrumbs) {
+            var modifiedBreadcrumbs = breadcrumbs.slice();
+            modifiedBreadcrumbs[0].link[0] = '../';
+            modifiedBreadcrumbs[1].link[0] = '../orders';
+            return modifiedBreadcrumbs.concat({ label: ngxTranslateExtractMarker.marker('breadcrumb.modifying'), link: [''] });
+        }));
+    }
+
+    var OrderModule = /** @class */ (function () {
+        function OrderModule() {
+        }
+        return OrderModule;
+    }());
+    OrderModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [i1.SharedModule, i1$1.RouterModule.forChild(orderRoutes)],
+                    declarations: [
+                        OrderListComponent,
+                        OrderDetailComponent,
+                        FulfillOrderDialogComponent,
+                        LineFulfillmentComponent,
+                        RefundOrderDialogComponent,
+                        CancelOrderDialogComponent,
+                        PaymentStateLabelComponent,
+                        LineRefundsComponent,
+                        OrderPaymentCardComponent,
+                        RefundStateLabelComponent,
+                        SettleRefundDialogComponent,
+                        OrderHistoryComponent,
+                        FulfillmentDetailComponent,
+                        PaymentDetailComponent,
+                        SimpleItemListComponent,
+                        OrderCustomFieldsCardComponent,
+                        OrderProcessGraphComponent,
+                        OrderProcessNodeComponent,
+                        OrderProcessEdgeComponent,
+                        OrderProcessGraphDialogComponent,
+                        FulfillmentStateLabelComponent,
+                        FulfillmentCardComponent,
+                        OrderEditorComponent,
+                        OrderTableComponent,
+                        OrderEditsPreviewDialogComponent,
+                        ModificationDetailComponent,
+                        AddManualPaymentDialogComponent,
+                        OrderStateSelectDialogComponent,
+                        DraftOrderDetailComponent,
+                        DraftOrderVariantSelectorComponent,
+                        SelectCustomerDialogComponent,
+                        SelectAddressDialogComponent,
+                        CouponCodeSelectorComponent,
+                        SelectShippingMethodDialogComponent,
+                    ],
+                },] }
+    ];
+
+    // This file was generated by the build-public-api.ts script
+
+    /**
+     * Generated bundle index. Do not edit.
+     */
+
+    exports.AddManualPaymentDialogComponent = AddManualPaymentDialogComponent;
+    exports.CancelOrderDialogComponent = CancelOrderDialogComponent;
+    exports.CouponCodeSelectorComponent = CouponCodeSelectorComponent;
+    exports.DraftOrderDetailComponent = DraftOrderDetailComponent;
+    exports.DraftOrderVariantSelectorComponent = DraftOrderVariantSelectorComponent;
+    exports.FulfillOrderDialogComponent = FulfillOrderDialogComponent;
+    exports.FulfillmentCardComponent = FulfillmentCardComponent;
+    exports.FulfillmentDetailComponent = FulfillmentDetailComponent;
+    exports.FulfillmentStateLabelComponent = FulfillmentStateLabelComponent;
+    exports.GET_CUSTOMER_ADDRESSES = GET_CUSTOMER_ADDRESSES;
+    exports.LineFulfillmentComponent = LineFulfillmentComponent;
+    exports.LineRefundsComponent = LineRefundsComponent;
+    exports.ModificationDetailComponent = ModificationDetailComponent;
+    exports.NODE_HEIGHT = NODE_HEIGHT;
+    exports.OrderCustomFieldsCardComponent = OrderCustomFieldsCardComponent;
+    exports.OrderDetailComponent = OrderDetailComponent;
+    exports.OrderEditorComponent = OrderEditorComponent;
+    exports.OrderEditsPreviewDialogComponent = OrderEditsPreviewDialogComponent;
+    exports.OrderGuard = OrderGuard;
+    exports.OrderHistoryComponent = OrderHistoryComponent;
+    exports.OrderListComponent = OrderListComponent;
+    exports.OrderModule = OrderModule;
+    exports.OrderPaymentCardComponent = OrderPaymentCardComponent;
+    exports.OrderProcessEdgeComponent = OrderProcessEdgeComponent;
+    exports.OrderProcessGraphComponent = OrderProcessGraphComponent;
+    exports.OrderProcessGraphDialogComponent = OrderProcessGraphDialogComponent;
+    exports.OrderProcessNodeComponent = OrderProcessNodeComponent;
+    exports.OrderResolver = OrderResolver;
+    exports.OrderStateSelectDialogComponent = OrderStateSelectDialogComponent;
+    exports.OrderTableComponent = OrderTableComponent;
+    exports.OrderTransitionService = OrderTransitionService;
+    exports.PaymentDetailComponent = PaymentDetailComponent;
+    exports.PaymentStateLabelComponent = PaymentStateLabelComponent;
+    exports.RefundOrderDialogComponent = RefundOrderDialogComponent;
+    exports.RefundStateLabelComponent = RefundStateLabelComponent;
+    exports.SelectAddressDialogComponent = SelectAddressDialogComponent;
+    exports.SelectCustomerDialogComponent = SelectCustomerDialogComponent;
+    exports.SelectShippingMethodDialogComponent = SelectShippingMethodDialogComponent;
+    exports.SettleRefundDialogComponent = SettleRefundDialogComponent;
+    exports.SimpleItemListComponent = SimpleItemListComponent;
+    exports.modifyingOrderBreadcrumb = modifyingOrderBreadcrumb;
+    exports.orderBreadcrumb = orderBreadcrumb;
+    exports.orderRoutes = orderRoutes;
+    exports.ɵ0 = ɵ0;
+    exports.ɵ1 = ɵ1;
+    exports.ɵ2 = ɵ2;
+    exports.ɵ3 = ɵ3;
+
+    Object.defineProperty(exports, '__esModule', { value: true });
+
+})));
+//# sourceMappingURL=vendure-admin-ui-order.umd.js.map