@vendure/admin-ui 1.6.3 → 1.7.0

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

@@ -546,7 +546,8 @@
             return effectiveTracInventory ? Math.min(unfulfilledCount, stockOnHand) : unfulfilledCount;
         };
         FulfillOrderDialogComponent.prototype.getUnfulfilledCount = function (line) {
-            var fulfilled = line.items.reduce(function (sum, item) { return sum + (item.fulfillment ? 1 : 0); }, 0);
+            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 () {
@@ -653,66 +654,34 @@
         });
         Object.defineProperty(FulfillmentDetailComponent.prototype, "items", {
             get: function () {
-                var e_1, _b, e_2, _c;
-                var _a;
-                var itemMap = new Map();
-                var fulfillmentItemIds = (_a = this.fulfillment) === null || _a === void 0 ? void 0 : _a.orderItems.map(function (i) { return i.id; });
-                try {
-                    for (var _d = __values(this.order.lines), _e = _d.next(); !_e.done; _e = _d.next()) {
-                        var line = _e.value;
-                        try {
-                            for (var _f = (e_2 = void 0, __values(line.items)), _g = _f.next(); !_g.done; _g = _f.next()) {
-                                var item = _g.value;
-                                if (fulfillmentItemIds === null || fulfillmentItemIds === void 0 ? void 0 : fulfillmentItemIds.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 (_g && !_g.done && (_c = _f.return)) _c.call(_f);
-                            }
-                            finally { if (e_2) throw e_2.error; }
-                        }
-                    }
-                }
-                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; }
-                }
-                return Array.from(itemMap.entries()).map(function (_b) {
-                    var _c = __read(_b, 2), name = _c[0], quantity = _c[1];
-                    return ({ name: name, quantity: quantity });
-                });
+                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_3, _b;
+            var e_1, _c;
             var customFields = this.fulfillment.customFields;
             try {
-                for (var _c = __values(this.serverConfigService.getCustomFieldsFor('Fulfillment')), _d = _c.next(); !_d.done; _d = _c.next()) {
-                    var fieldDef = _d.value;
+                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_3_1) { e_3 = { error: e_3_1 }; }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
             finally {
                 try {
-                    if (_d && !_d.done && (_b = _c.return)) _b.call(_c);
+                    if (_e && !_e.done && (_c = _d.return)) _c.call(_d);
                 }
-                finally { if (e_3) throw e_3.error; }
+                finally { if (e_1) throw e_1.error; }
             }
         };
         FulfillmentDetailComponent.prototype.customFieldIsObject = function (customField) {
@@ -784,7 +753,8 @@
          * Returns the number of items in an OrderLine which are fulfilled.
          */
         LineFulfillmentComponent.prototype.getDeliveredCount = function (line) {
-            return line.items.reduce(function (sum, item) { return sum + (item.fulfillment ? 1 : 0); }, 0);
+            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) {
@@ -796,39 +766,15 @@
             return 'none';
         };
         LineFulfillmentComponent.prototype.getFulfillments = function (line) {
-            var e_1, _a;
-            var counts = {};
-            try {
-                for (var _b = __values(line.items), _c = _b.next(); !_c.done; _c = _b.next()) {
-                    var item = _c.value;
-                    if (item.fulfillment) {
-                        if (counts[item.fulfillment.id] === undefined) {
-                            counts[item.fulfillment.id] = 1;
-                        }
-                        else {
-                            counts[item.fulfillment.id]++;
-                        }
-                    }
-                }
-            }
-            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; }
-            }
-            var all = line.items.reduce(function (fulfillments, item) {
-                return item.fulfillment ? __spreadArray(__spreadArray([], __read(fulfillments)), [item.fulfillment]) : fulfillments;
-            }, []);
-            return Object.entries(counts).map(function (_a) {
-                var _b = __read(_a, 2), id = _b[0], count = _b[1];
+            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: count,
-                    // tslint:disable-next-line:no-non-null-assertion
-                    fulfillment: all.find(function (f) { return f.id === id; }),
+                    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;
     }());
@@ -973,8 +919,9 @@
     };
 
     var OrderCustomFieldsCardComponent = /** @class */ (function () {
-        function OrderCustomFieldsCardComponent(formBuilder) {
+        function OrderCustomFieldsCardComponent(formBuilder, modalService) {
             this.formBuilder = formBuilder;
+            this.modalService = modalService;
             this.customFieldsConfig = [];
             this.customFieldValues = {};
             this.updateClick = new i0.EventEmitter();
@@ -1002,18 +949,42 @@
             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            <ng-container *ngFor=\"let customField of customFieldsConfig\">\r\n                <vdr-custom-field-control\r\n                    entityName=\"Order\"\r\n                    [customFieldsFormGroup]=\"customFieldForm\"\r\n                    [compact]=\"true\"\r\n                    [readonly]=\"customField.readonly || !editable\"\r\n                    [customField]=\"customField\"\r\n                ></vdr-custom-field-control>\r\n            </ng-container>\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    </div>\r\n</div>\r\n",
+                    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: forms.FormBuilder },
+        { type: i1.ModalService }
     ]; };
     OrderCustomFieldsCardComponent.propDecorators = {
         customFieldsConfig: [{ type: i0.Input }],
@@ -1504,28 +1475,72 @@
         OrderDetailComponent.prototype.transitionPaymentState = function (_d) {
             var _this = this;
             var payment = _d.payment, state = _d.state;
-            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;
-                }
-            });
+            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 allItemsFulfilled = order.lines
-                .reduce(function (items, line) { return __spreadArray(__spreadArray([], __read(items)), __read(line.items)); }, [])
-                .every(function (item) { return !!item.fulfillment || item.cancelled; });
+            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 &&
@@ -1540,7 +1555,7 @@
             return sharedUtils.summate(order.modifications.filter(function (m) { return !m.isSettled; }), 'priceChange');
         };
         OrderDetailComponent.prototype.outstandingPaymentAmount = function (order) {
-            var e_1, _d;
+            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;
@@ -1552,12 +1567,12 @@
                     amountCovered += payment.amount - refundsTotal;
                 }
             }
-            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            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_1) throw e_1.error; }
+                finally { if (e_2) throw e_2.error; }
             }
             return order.totalWithTax - amountCovered;
         };
@@ -1806,26 +1821,43 @@
                 if (!input) {
                     return rxjs.of(undefined);
                 }
-                var operations = [];
+                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) {
-                    operations.push(_this.dataService.order
+                    return _this.dataService.order
                         .refundOrder(input.refund)
-                        .pipe(operators.map(function (res) { return res.refundOrder; })));
+                        .pipe(operators.map(function (res) { return res.refundOrder; }));
                 }
-                if ((_a = input.cancel.lines) === null || _a === void 0 ? void 0 : _a.length) {
-                    operations.push(_this.dataService.order
-                        .cancelOrder(input.cancel)
-                        .pipe(operators.map(function (res) { return res.cancelOrder; })));
+                else {
+                    return [undefined];
                 }
-                return rxjs.merge.apply(void 0, __spreadArray([], __read(operations)));
             }))
                 .subscribe(function (result) {
                 if (result) {
                     switch (result.__typename) {
-                        case 'Order':
-                            _this.refetchOrder(result).subscribe();
-                            _this.notificationService.success(ngxTranslateExtractMarker.marker('order.cancelled-order-success'));
-                            break;
                         case 'Refund':
                             _this.refetchOrder(result).subscribe();
                             if (result.state === 'Failed') {
@@ -1835,11 +1867,6 @@
                                 _this.notificationService.success(ngxTranslateExtractMarker.marker('order.refund-order-success'));
                             }
                             break;
-                        case 'QuantityTooGreatError':
-                        case 'MultipleOrderError':
-                        case 'OrderStateTransitionError':
-                        case 'CancelActiveOrderError':
-                        case 'EmptyOrderLineSelectionError':
                         case 'AlreadyRefundedError':
                         case 'NothingToRefundError':
                         case 'PaymentOrderMismatchError':
@@ -2567,6 +2594,7 @@
             _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; });
@@ -2607,7 +2635,7 @@
             // 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.searchOrderCodeControl.value, _this.searchLastNameControl.value, _this.route.snapshot.queryParamMap.get('filter') || 'open'); });
+            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 });
@@ -2619,7 +2647,7 @@
             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.searchOrderCodeControl.valueChanges, this.searchLastNameControl.valueChanges).pipe(operators.filter(function (value) { return 2 < value.length || value.length === 0; }), operators.debounceTime(250));
+            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) {
@@ -2652,11 +2680,12 @@
         };
         OrderListComponent.prototype.createQueryOptions = function (
         // tslint:disable-next-line:no-shadowed-variable
-        skip, take, orderCodeSearchTerm, customerNameSearchTerm, activeFilterPreset) {
+        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 = {
@@ -2698,15 +2727,19 @@
                     };
                 }
             }
-            if (customerNameSearchTerm) {
-                filter.customerLastName = {
-                    contains: customerNameSearchTerm,
-                };
-            }
-            if (orderCodeSearchTerm) {
-                filter.code = {
-                    contains: orderCodeSearchTerm,
+            if (searchTerm) {
+                filter = {
+                    customerLastName: {
+                        contains: searchTerm,
+                    },
+                    transactionId: {
+                        contains: searchTerm,
+                    },
+                    code: {
+                        contains: searchTerm,
+                    },
                 };
+                filterOperator = i1.LogicalOperator.OR;
             }
             return {
                 options: {
@@ -2716,6 +2749,7 @@
                     sort: {
                         updatedAt: i1.SortOrder.DESC,
                     },
+                    filterOperator: filterOperator,
                 },
             };
         };
@@ -2732,7 +2766,7 @@
     OrderListComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'vdr-order-list',
-                    template: "<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <div class=\"search-form\">\r\n            <div class=\"btn-group btn-outline-primary\" *ngIf=\"activePreset$ | async as activePreset\">\r\n                <button\r\n                    class=\"btn\"\r\n                    *ngFor=\"let preset of filterPresets\"\r\n                    [class.btn-primary]=\"activePreset === preset.name\"\r\n                    (click)=\"selectFilterPreset(preset.name)\"\r\n                >\r\n                    {{ preset.label | translate }}\r\n                </button>\r\n                <button\r\n                    class=\"btn\"\r\n                    [class.btn-primary]=\"activePreset === 'custom'\"\r\n                    (click)=\"selectFilterPreset('custom')\"\r\n                >\r\n                    {{ 'order.filter-custom' | translate }}\r\n                    <clr-icon shape=\"angle down\"></clr-icon>\r\n                </button>\r\n            </div>\r\n\r\n            <input\r\n                type=\"text\"\r\n                name=\"searchTerm\"\r\n                [formControl]=\"searchOrderCodeControl\"\r\n                [placeholder]=\"'order.search-by-order-code' | translate\"\r\n                class=\"search-input\"\r\n            />\r\n            <input\r\n                type=\"text\"\r\n                name=\"searchTerm\"\r\n                [formControl]=\"searchLastNameControl\"\r\n                [placeholder]=\"'order.search-by-customer-last-name' | translate\"\r\n                class=\"search-input\"\r\n            />\r\n        </div>\r\n        <div class=\"custom-filters\" [class.expanded]=\"(activePreset$ | async) === 'custom'\">\r\n            <form [formGroup]=\"customFilterForm\">\r\n                <div class=\"flex align-center\">\r\n                    <ng-select\r\n                        [items]=\"orderStates\"\r\n                        appendTo=\"body\"\r\n                        [addTag]=\"false\"\r\n                        [multiple]=\"true\"\r\n                        formControlName=\"states\"\r\n                        [placeholder]=\"'state.all-orders' | translate\"\r\n                        [clearable]=\"true\"\r\n                        [searchable]=\"false\"\r\n                    >\r\n                        <ng-template ng-option-tmp let-item=\"item\">{{ item | stateI18nToken | translate }}</ng-template>\r\n                        <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n                            <span class=\"ng-value-label\"> {{ item | stateI18nToken | translate }}</span>\r\n                            <span class=\"ng-value-icon right\" (click)=\"clear(item)\" aria-hidden=\"true\">\u00D7</span>\r\n                        </ng-template>\r\n                    </ng-select>\r\n                    <button\r\n                        class=\"btn btn-secondary\"\r\n                        [disabled]=\"customFilterForm.pristine\"\r\n                        (click)=\"applyCustomFilters()\"\r\n                    >\r\n                        {{ 'order.apply-filters' | translate }}\r\n                        <clr-icon shape=\"filter\"></clr-icon>\r\n                    </button>\r\n                </div>\r\n                <div class=\"flex\">\r\n                    <div>\r\n                        <label>{{ 'order.placed-at-start' | translate }}</label>\r\n                        <vdr-datetime-picker formControlName=\"placedAtStart\"></vdr-datetime-picker>\r\n                    </div>\r\n                    <div>\r\n                        <label>{{ 'order.placed-at-end' | translate }}</label>\r\n                        <vdr-datetime-picker formControlName=\"placedAtEnd\"></vdr-datetime-picker>\r\n                    </div>\r\n                </div>\r\n            </form>\r\n        </div>\r\n    </vdr-ab-left>\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"order-list\"></vdr-action-bar-items>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<vdr-data-table\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n>\r\n    <vdr-dt-column>{{ 'common.code' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'order.customer' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'order.state' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'order.total' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'common.updated-at' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'order.placed-at' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'order.shipping' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column></vdr-dt-column>\r\n    <ng-template let-order=\"item\">\r\n        <td class=\"left align-middle\">{{ order.code }}</td>\r\n        <td class=\"left align-middle\">\r\n            <vdr-customer-label [customer]=\"order.customer\"></vdr-customer-label>\r\n        </td>\r\n        <td class=\"left align-middle\">\r\n            <vdr-order-state-label [state]=\"order.state\"></vdr-order-state-label>\r\n        </td>\r\n        <td class=\"left align-middle\">{{ order.totalWithTax | localeCurrency: order.currencyCode }}</td>\r\n        <td class=\"left align-middle\">{{ order.updatedAt | timeAgo }}</td>\r\n        <td class=\"left align-middle\">{{ order.orderPlacedAt | localeDate: 'medium' }}</td>\r\n        <td class=\"left align-middle\">{{ getShippingNames(order) }}</td>\r\n        <td class=\"right align-middle\">\r\n            <vdr-table-row-action\r\n                iconShape=\"shopping-cart\"\r\n                [label]=\"'common.open' | translate\"\r\n                [linkTo]=\"order.state === 'Modifying' ? ['./', order.id, 'modify'] : ['./', order.id]\"\r\n            ></vdr-table-row-action>\r\n        </td>\r\n    </ng-template>\r\n</vdr-data-table>\r\n",
+                    template: "<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <div class=\"search-form\">\r\n            <div class=\"btn-group btn-outline-primary\" *ngIf=\"activePreset$ | async as activePreset\">\r\n                <button\r\n                    class=\"btn\"\r\n                    *ngFor=\"let preset of filterPresets\"\r\n                    [class.btn-primary]=\"activePreset === preset.name\"\r\n                    (click)=\"selectFilterPreset(preset.name)\"\r\n                >\r\n                    {{ preset.label | translate }}\r\n                </button>\r\n                <button\r\n                    class=\"btn\"\r\n                    [class.btn-primary]=\"activePreset === 'custom'\"\r\n                    (click)=\"selectFilterPreset('custom')\"\r\n                >\r\n                    {{ 'order.filter-custom' | translate }}\r\n                    <clr-icon shape=\"angle down\"></clr-icon>\r\n                </button>\r\n            </div>\r\n            <input\r\n                type=\"text\"\r\n                name=\"searchTerm\"\r\n                [formControl]=\"searchControl\"\r\n                [placeholder]=\"'order.search-by-order-filters' | translate\"\r\n                class=\"search-input\"\r\n            />\r\n        </div>\r\n        <div class=\"custom-filters\" [class.expanded]=\"(activePreset$ | async) === 'custom'\">\r\n            <form [formGroup]=\"customFilterForm\">\r\n                <div class=\"flex align-center\">\r\n                    <ng-select\r\n                        [items]=\"orderStates\"\r\n                        appendTo=\"body\"\r\n                        [addTag]=\"false\"\r\n                        [multiple]=\"true\"\r\n                        formControlName=\"states\"\r\n                        [placeholder]=\"'state.all-orders' | translate\"\r\n                        [clearable]=\"true\"\r\n                        [searchable]=\"false\"\r\n                    >\r\n                        <ng-template ng-option-tmp let-item=\"item\">{{ item | stateI18nToken | translate }}</ng-template>\r\n                        <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n                            <span class=\"ng-value-label\"> {{ item | stateI18nToken | translate }}</span>\r\n                            <span class=\"ng-value-icon right\" (click)=\"clear(item)\" aria-hidden=\"true\">\u00D7</span>\r\n                        </ng-template>\r\n                    </ng-select>\r\n                    <button\r\n                        class=\"btn btn-secondary\"\r\n                        [disabled]=\"customFilterForm.pristine\"\r\n                        (click)=\"applyCustomFilters()\"\r\n                    >\r\n                        {{ 'order.apply-filters' | translate }}\r\n                        <clr-icon shape=\"filter\"></clr-icon>\r\n                    </button>\r\n                </div>\r\n                <div class=\"flex\">\r\n                    <div>\r\n                        <label>{{ 'order.placed-at-start' | translate }}</label>\r\n                        <vdr-datetime-picker formControlName=\"placedAtStart\"></vdr-datetime-picker>\r\n                    </div>\r\n                    <div>\r\n                        <label>{{ 'order.placed-at-end' | translate }}</label>\r\n                        <vdr-datetime-picker formControlName=\"placedAtEnd\"></vdr-datetime-picker>\r\n                    </div>\r\n                </div>\r\n            </form>\r\n        </div>\r\n    </vdr-ab-left>\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"order-list\"></vdr-action-bar-items>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<vdr-data-table\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n>\r\n    <vdr-dt-column>{{ 'common.code' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'order.customer' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'order.state' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'order.total' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'common.updated-at' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'order.placed-at' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'order.shipping' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column></vdr-dt-column>\r\n    <ng-template let-order=\"item\">\r\n        <td class=\"left align-middle\">{{ order.code }}</td>\r\n        <td class=\"left align-middle\">\r\n            <vdr-customer-label [customer]=\"order.customer\"></vdr-customer-label>\r\n        </td>\r\n        <td class=\"left align-middle\">\r\n            <vdr-order-state-label [state]=\"order.state\"></vdr-order-state-label>\r\n        </td>\r\n        <td class=\"left align-middle\">{{ order.totalWithTax | localeCurrency: order.currencyCode }}</td>\r\n        <td class=\"left align-middle\">{{ order.updatedAt | timeAgo }}</td>\r\n        <td class=\"left align-middle\">{{ order.orderPlacedAt | localeDate: 'medium' }}</td>\r\n        <td class=\"left align-middle\">{{ getShippingNames(order) }}</td>\r\n        <td class=\"right align-middle\">\r\n            <vdr-table-row-action\r\n                iconShape=\"shopping-cart\"\r\n                [label]=\"'common.open' | translate\"\r\n                [linkTo]=\"order.state === 'Modifying' ? ['./', order.id, 'modify'] : ['./', order.id]\"\r\n            ></vdr-table-row-action>\r\n        </td>\r\n    </ng-template>\r\n</vdr-data-table>\r\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     styles: [".search-form{display:flex;flex-direction:column;align-items:baseline;width:100%;margin-bottom:6px}@media screen and (min-width: 768px){.search-form{flex-direction:row}}.search-input{margin-left:6px;margin-top:6px;min-width:300px}.custom-filters{overflow:hidden;max-height:0;padding-bottom:6px}.custom-filters.expanded{max-height:initial}.custom-filters>form{display:flex;flex-direction:column;align-items:center}.custom-filters>form>div{width:100%}ng-select{flex:1;min-width:200px;height:36px}ng-select ::ng-deep .ng-select-container{height:36px}\n"]
                 },] }
@@ -2758,7 +2792,7 @@
             if (!this.payment) {
                 return [];
             }
-            return this.payment.nextStates.filter(function (s) { return s !== 'Settled'; });
+            return this.payment.nextStates.filter(function (s) { return s !== 'Settled' && s !== 'Error'; });
         };
         return OrderPaymentCardComponent;
     }());
@@ -3098,12 +3132,20 @@
                 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                    {{ line.quantity }}\r\n                    <vdr-line-refunds [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\r\n                    <vdr-line-fulfillment [line]=\"line\" [orderState]=\"order.state\"></vdr-line-fulfillment>\r\n                </td>\r\n                <td class=\"align-middle total\">\r\n                    {{ line.linePriceWithTax | localeCurrency: order.currencyCode }}\r\n                    <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                        {{ line.linePrice | localeCurrency: order.currencyCode }}\r\n                    </div>\r\n\r\n                    <ng-container *ngIf=\"getLineDiscounts(line) as discounts\">\r\n                        <vdr-dropdown *ngIf=\"discounts.length\">\r\n                            <div class=\"promotions-label\" vdrDropdownTrigger>\r\n                                {{ 'order.promotions-applied' | translate }}\r\n                            </div>\r\n                            <vdr-dropdown-menu>\r\n                                <div class=\"line-promotion\" *ngFor=\"let discount of discounts\">\r\n                                    <a class=\"promotion-name\" [routerLink]=\"getPromotionLink(discount)\">{{\r\n                                        discount.description\r\n                                    }}</a>\r\n                                    <div class=\"promotion-amount\">\r\n                                        {{ discount.amountWithTax | localeCurrency: order.currencyCode }}\r\n                                        <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                            {{ discount.amount | localeCurrency: order.currencyCode }}\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </vdr-dropdown-menu>\r\n                        </vdr-dropdown>\r\n                    </ng-container>\r\n                </td>\r\n            </tr>\r\n            <ng-container *ngIf=\"customFieldsForLine[line.id] as customFields\">\r\n                <tr *ngIf=\"customFields.length\">\r\n                    <td colspan=\"6\" class=\"custom-fields-row\">\r\n                        <div class=\"order-line-custom-fields\">\r\n                            <div class=\"custom-field\" *ngFor=\"let field of customFields\">\r\n                                <vdr-custom-field-control\r\n                                    [compact]=\"true\"\r\n                                    [readonly]=\"true\"\r\n                                    [customField]=\"field.config\"\r\n                                    [customFieldsFormGroup]=\"field.formGroup\"\r\n                                ></vdr-custom-field-control>\r\n                            </div>\r\n                        </div>\r\n                    </td>\r\n                </tr>\r\n            </ng-container>\r\n        </ng-container>\r\n        <tr class=\"surcharge\" *ngFor=\"let surcharge of order.surcharges\">\r\n            <td class=\"align-middle name left\" colspan=\"2\">{{ surcharge.description }}</td>\r\n            <td class=\"align-middle sku\">{{ surcharge.sku }}</td>\r\n            <td class=\"align-middle\" colspan=\"2\"></td>\r\n            <td class=\"align-middle total\">\r\n                {{ surcharge.priceWithTax | localeCurrency: order.currencyCode }}\r\n                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                    {{ surcharge.price | localeCurrency: order.currencyCode }}\r\n                </div>\r\n            </td>\r\n        </tr>\r\n        <ng-container *ngFor=\"let discount of order.discounts\">\r\n            <tr class=\"order-adjustment\" *ngIf=\"discount.type !== 'OTHER'\">\r\n            <td colspan=\"5\" class=\"left clr-align-middle\">\r\n                <a [routerLink]=\"getPromotionLink(discount)\">{{ discount.description }}</a>\r\n                <vdr-chip *ngIf=\"getCouponCodeForAdjustment(order, discount) as couponCode\">{{\r\n                    couponCode\r\n                }}</vdr-chip>\r\n            </td>\r\n            <td class=\"clr-align-middle\">\r\n                {{ discount.amountWithTax | localeCurrency: order.currencyCode }}\r\n                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                    {{ discount.amount | localeCurrency: order.currencyCode }}\r\n                </div>\r\n            </td>\r\n            </tr>\r\n        </ng-container>\r\n        <tr class=\"sub-total\">\r\n            <td class=\"left clr-align-middle\">{{ 'order.sub-total' | translate }}</td>\r\n            <td colspan=\"4\"></td>\r\n            <td class=\"clr-align-middle\">\r\n                {{ order.subTotalWithTax | localeCurrency: order.currencyCode }}\r\n                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                    {{ order.subTotal | localeCurrency: order.currencyCode }}\r\n                </div>\r\n            </td>\r\n        </tr>\r\n        <tr class=\"shipping\">\r\n            <td class=\"left clr-align-middle\">{{ 'order.shipping' | translate }}</td>\r\n            <td class=\"clr-align-middle\">{{ order.shippingLines[0]?.shippingMethod?.name }}</td>\r\n            <td colspan=\"3\"></td>\r\n            <td class=\"clr-align-middle\">\r\n                {{ order.shippingWithTax | localeCurrency: order.currencyCode }}\r\n                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                    {{ order.shipping | localeCurrency: order.currencyCode }}\r\n                </div>\r\n            </td>\r\n        </tr>\r\n        <tr class=\"total\">\r\n            <td class=\"left clr-align-middle\">{{ 'order.total' | translate }}</td>\r\n            <td colspan=\"4\"></td>\r\n            <td class=\"clr-align-middle\">\r\n                {{ order.totalWithTax | localeCurrency: order.currencyCode }}\r\n                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                    {{ order.total | localeCurrency: order.currencyCode }}\r\n                </div>\r\n            </td>\r\n        </tr>\r\n    </tbody>\r\n</table>\r\n",
+                    template: "<table class=\"order-table table\">\r\n    <thead>\r\n        <tr>\r\n            <th></th>\r\n            <th>{{ 'order.product-name' | translate }}</th>\r\n            <th>{{ 'order.product-sku' | translate }}</th>\r\n            <th>{{ 'order.unit-price' | translate }}</th>\r\n            <th>{{ 'order.quantity' | translate }}</th>\r\n            <th>{{ 'order.total' | translate }}</th>\r\n        </tr>\r\n    </thead>\r\n    <tbody>\r\n        <ng-container *ngFor=\"let line of order.lines\">\r\n            <tr class=\"order-line\" [class.is-cancelled]=\"line.quantity === 0\">\r\n                <td class=\"align-middle thumb\">\r\n                    <img *ngIf=\"line.featuredAsset\" [src]=\"line.featuredAsset | assetPreview: 'tiny'\" />\r\n                </td>\r\n                <td class=\"align-middle name\">{{ line.productVariant.name }}</td>\r\n                <td class=\"align-middle sku\">{{ line.productVariant.sku }}</td>\r\n                <td class=\"align-middle unit-price\">\r\n                    {{ line.unitPriceWithTax | localeCurrency: order.currencyCode }}\r\n                    <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                        {{ line.unitPrice | localeCurrency: order.currencyCode }}\r\n                    </div>\r\n                </td>\r\n                <td class=\"align-middle quantity\">\r\n                    {{ line.quantity }}\r\n                    <vdr-line-refunds [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\r\n                    <vdr-line-fulfillment [line]=\"line\" [orderState]=\"order.state\"></vdr-line-fulfillment>\r\n                </td>\r\n                <td class=\"align-middle total\">\r\n                    {{ line.linePriceWithTax | localeCurrency: order.currencyCode }}\r\n                    <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                        {{ line.linePrice | localeCurrency: order.currencyCode }}\r\n                    </div>\r\n\r\n                    <ng-container *ngIf=\"getLineDiscounts(line) as discounts\">\r\n                        <vdr-dropdown *ngIf=\"discounts.length\">\r\n                            <div class=\"promotions-label\" vdrDropdownTrigger>\r\n                                {{ 'order.promotions-applied' | translate }}\r\n                            </div>\r\n                            <vdr-dropdown-menu>\r\n                                <div class=\"line-promotion\" *ngFor=\"let discount of discounts\">\r\n                                    <a class=\"promotion-name\" [routerLink]=\"getPromotionLink(discount)\">{{\r\n                                        discount.description\r\n                                    }}</a>\r\n                                    <div class=\"promotion-amount\">\r\n                                        {{ discount.amountWithTax | localeCurrency: order.currencyCode }}\r\n                                        <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                            {{ discount.amount | localeCurrency: order.currencyCode }}\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </vdr-dropdown-menu>\r\n                        </vdr-dropdown>\r\n                    </ng-container>\r\n                </td>\r\n            </tr>\r\n            <ng-container *ngIf=\"customFieldsForLine[line.id] as customFields\">\r\n                <tr *ngIf=\"customFields.length\">\r\n                    <td colspan=\"6\" class=\"custom-fields-row\">\r\n                        <div class=\"order-line-custom-fields\">\r\n                            <div class=\"custom-field\" *ngFor=\"let field of customFields\">\r\n                                <vdr-custom-field-control\r\n                                    [compact]=\"true\"\r\n                                    [readonly]=\"true\"\r\n                                    [customField]=\"field.config\"\r\n                                    [customFieldsFormGroup]=\"field.formGroup\"\r\n                                ></vdr-custom-field-control>\r\n                            </div>\r\n                        </div>\r\n                    </td>\r\n                </tr>\r\n            </ng-container>\r\n        </ng-container>\r\n        <tr class=\"surcharge\" *ngFor=\"let surcharge of order.surcharges\">\r\n            <td class=\"align-middle name left\" colspan=\"2\">{{ surcharge.description }}</td>\r\n            <td class=\"align-middle sku\">{{ surcharge.sku }}</td>\r\n            <td class=\"align-middle\" colspan=\"2\"></td>\r\n            <td class=\"align-middle total\">\r\n                {{ surcharge.priceWithTax | localeCurrency: order.currencyCode }}\r\n                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                    {{ surcharge.price | localeCurrency: order.currencyCode }}\r\n                </div>\r\n            </td>\r\n        </tr>\r\n        <ng-container *ngFor=\"let discount of order.discounts\">\r\n            <tr class=\"order-adjustment\" *ngIf=\"discount.type !== 'OTHER'\">\r\n            <td colspan=\"5\" class=\"left clr-align-middle\">\r\n                <a [routerLink]=\"getPromotionLink(discount)\">{{ discount.description }}</a>\r\n                <vdr-chip *ngIf=\"getCouponCodeForAdjustment(order, discount) as couponCode\">{{\r\n                    couponCode\r\n                }}</vdr-chip>\r\n            </td>\r\n            <td class=\"clr-align-middle\">\r\n                {{ discount.amountWithTax | localeCurrency: order.currencyCode }}\r\n                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                    {{ discount.amount | localeCurrency: order.currencyCode }}\r\n                </div>\r\n            </td>\r\n            </tr>\r\n        </ng-container>\r\n        <tr class=\"sub-total\">\r\n            <td class=\"left clr-align-middle\">{{ 'order.sub-total' | translate }}</td>\r\n            <td colspan=\"4\"></td>\r\n            <td class=\"clr-align-middle\">\r\n                {{ order.subTotalWithTax | localeCurrency: order.currencyCode }}\r\n                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                    {{ order.subTotal | localeCurrency: order.currencyCode }}\r\n                </div>\r\n            </td>\r\n        </tr>\r\n        <tr class=\"shipping\">\r\n            <td class=\"left clr-align-middle\">{{ 'order.shipping' | translate }}</td>\r\n            <td class=\"clr-align-middle\">{{ getShippingNames(order) }}</td>\r\n            <td colspan=\"3\"></td>\r\n            <td class=\"clr-align-middle\">\r\n                {{ order.shippingWithTax | localeCurrency: order.currencyCode }}\r\n                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                    {{ order.shipping | localeCurrency: order.currencyCode }}\r\n                </div>\r\n            </td>\r\n        </tr>\r\n        <tr class=\"total\">\r\n            <td class=\"left clr-align-middle\">{{ 'order.total' | translate }}</td>\r\n            <td colspan=\"4\"></td>\r\n            <td class=\"clr-align-middle\">\r\n                {{ order.totalWithTax | localeCurrency: order.currencyCode }}\r\n                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                    {{ order.total | localeCurrency: order.currencyCode }}\r\n                </div>\r\n            </td>\r\n        </tr>\r\n    </tbody>\r\n</table>\r\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     styles: [".order-table .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}.order-table .sub-total td{border-top:1px dashed var(--color-component-border-200)}.order-table .total td{font-weight:bold;border-top:1px dashed var(--color-component-border-200)}.order-table td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}.order-table .order-line-custom-fields{display:flex;flex-wrap:wrap}.order-table .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-right:18px}.order-table .order-line-custom-field{background-color:var(--color-component-bg-100)}.order-table .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}.order-table .net-price{font-size:11px;color:var(--color-text-300)}.order-table .promotions-label{-webkit-text-decoration:underline dotted var(--color-text-200);text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}.order-table .thumb img{width:50px;height:50px}::ng-deep .line-promotion{display:flex;justify-content:space-between;padding:6px 12px}::ng-deep .line-promotion .promotion-amount{margin-left:12px}::ng-deep .line-promotion .net-price{font-size:11px;color:var(--color-text-300)}\n"]
                 },] }