@vendure/admin-ui 1.6.3 → 1.7.0

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

@@ -2,12 +2,12 @@ import * as i0 from '@angular/core';
 import { Component, ChangeDetectionStrategy, ChangeDetectorRef, EventEmitter, Input, Output, Injectable, ElementRef, ViewChildren, HostBinding, NgModule } from '@angular/core';
 import { FormGroup, FormControl, Validators, FormBuilder, FormArray } from '@angular/forms';
 import * as i1 from '@vendure/admin-ui/core';
-import { DataService, getAppConfig, I18nService, configurableDefinitionToInstance, GlobalFlag, configurableOperationValueIsValid, toConfigurableOperationInput, ServerConfigService, HistoryEntryType, SortOrder, ModalService, NotificationService, BaseDetailComponent, EditNoteDialogComponent, BaseListComponent, LocalStorageService, AdjustmentType, BaseEntityResolver, createResolveData, CanDeactivateDetailGuard, detailBreadcrumb, SharedModule } from '@vendure/admin-ui/core';
+import { DataService, getAppConfig, I18nService, configurableDefinitionToInstance, GlobalFlag, configurableOperationValueIsValid, toConfigurableOperationInput, ServerConfigService, ModalService, HistoryEntryType, SortOrder, NotificationService, BaseDetailComponent, EditNoteDialogComponent, BaseListComponent, LogicalOperator, LocalStorageService, AdjustmentType, BaseEntityResolver, createResolveData, CanDeactivateDetailGuard, detailBreadcrumb, SharedModule } from '@vendure/admin-ui/core';
 import { marker } from '@biesbjerg/ngx-translate-extract-marker';
 import { isObject, summate, assertNever, notNullOrUndefined } from '@vendure/common/lib/shared-utils';
 import * as i1$1 from '@angular/router';
 import { Router, ActivatedRoute, RouterModule } from '@angular/router';
-import { EMPTY, Subject, of, merge, concat, BehaviorSubject } from 'rxjs';
+import { EMPTY, Subject, of, concat, merge, BehaviorSubject } from 'rxjs';
 import { switchMap, catchError, retryWhen, delay, take, map, startWith, mapTo, takeUntil, distinctUntilChanged, shareReplay, filter, debounceTime, tap } from 'rxjs/operators';
 
 class AddManualPaymentDialogComponent {
@@ -158,7 +158,8 @@ class FulfillOrderDialogComponent {
         return effectiveTracInventory ? Math.min(unfulfilledCount, stockOnHand) : unfulfilledCount;
     }
     getUnfulfilledCount(line) {
-        const fulfilled = line.items.reduce((sum, item) => sum + (item.fulfillment ? 1 : 0), 0);
+        var _a, _b;
+        const fulfilled = (_b = (_a = line.fulfillments) === null || _a === void 0 ? void 0 : _a.map(f => f.summary).flat().filter(row => row.orderLine.id === line.id).reduce((sum, row) => sum + row.quantity, 0)) !== null && _b !== void 0 ? _b : 0;
         return line.quantity - fulfilled;
     }
     canSubmit() {
@@ -251,23 +252,14 @@ class FulfillmentDetailComponent {
         return this.order.fulfillments && this.order.fulfillments.find(f => f.id === this.fulfillmentId);
     }
     get items() {
-        var _a;
-        const itemMap = new Map();
-        const fulfillmentItemIds = (_a = this.fulfillment) === null || _a === void 0 ? void 0 : _a.orderItems.map(i => i.id);
-        for (const line of this.order.lines) {
-            for (const item of line.items) {
-                if (fulfillmentItemIds === null || fulfillmentItemIds === void 0 ? void 0 : fulfillmentItemIds.includes(item.id)) {
-                    const count = itemMap.get(line.productVariant.name);
-                    if (count != null) {
-                        itemMap.set(line.productVariant.name, count + 1);
-                    }
-                    else {
-                        itemMap.set(line.productVariant.name, 1);
-                    }
-                }
-            }
-        }
-        return Array.from(itemMap.entries()).map(([name, quantity]) => ({ name, quantity }));
+        var _a, _b;
+        return ((_b = (_a = this.fulfillment) === null || _a === void 0 ? void 0 : _a.summary.map(row => {
+            var _a, _b;
+            return {
+                name: (_b = (_a = this.order.lines.find(line => line.id === row.orderLine.id)) === null || _a === void 0 ? void 0 : _a.productVariant.name) !== null && _b !== void 0 ? _b : '',
+                quantity: row.quantity,
+            };
+        })) !== null && _b !== void 0 ? _b : []);
     }
     buildCustomFieldsFormGroup() {
         const customFields = this.fulfillment.customFields;
@@ -336,7 +328,8 @@ class LineFulfillmentComponent {
      * Returns the number of items in an OrderLine which are fulfilled.
      */
     getDeliveredCount(line) {
-        return line.items.reduce((sum, item) => sum + (item.fulfillment ? 1 : 0), 0);
+        var _a, _b;
+        return ((_b = (_a = line.fulfillments) === null || _a === void 0 ? void 0 : _a.reduce((sum, fulfillment) => { var _a, _b; return sum + ((_b = (_a = fulfillment.summary.find(s => s.orderLine.id === line.id)) === null || _a === void 0 ? void 0 : _a.quantity) !== null && _b !== void 0 ? _b : 0); }, 0)) !== null && _b !== void 0 ? _b : 0);
     }
     getFulfillmentStatus(fulfilledCount, lineQuantity) {
         if (fulfilledCount === lineQuantity) {
@@ -348,27 +341,15 @@ class LineFulfillmentComponent {
         return 'none';
     }
     getFulfillments(line) {
-        const counts = {};
-        for (const item of line.items) {
-            if (item.fulfillment) {
-                if (counts[item.fulfillment.id] === undefined) {
-                    counts[item.fulfillment.id] = 1;
-                }
-                else {
-                    counts[item.fulfillment.id]++;
-                }
-            }
-        }
-        const all = line.items.reduce((fulfillments, item) => {
-            return item.fulfillment ? [...fulfillments, item.fulfillment] : fulfillments;
-        }, []);
-        return Object.entries(counts).map(([id, count]) => {
+        var _a, _b;
+        return ((_b = (_a = line.fulfillments) === null || _a === void 0 ? void 0 : _a.map(fulfillment => {
+            var _a;
+            const summaryLine = fulfillment.summary.find(s => s.orderLine.id === line.id);
             return {
-                count,
-                // tslint:disable-next-line:no-non-null-assertion
-                fulfillment: all.find(f => f.id === id),
+                count: (_a = summaryLine === null || summaryLine === void 0 ? void 0 : summaryLine.quantity) !== null && _a !== void 0 ? _a : 0,
+                fulfillment,
             };
-        });
+        })) !== null && _b !== void 0 ? _b : []);
     }
 }
 LineFulfillmentComponent.decorators = [
@@ -484,8 +465,9 @@ ModificationDetailComponent.propDecorators = {
 };
 
 class OrderCustomFieldsCardComponent {
-    constructor(formBuilder) {
+    constructor(formBuilder, modalService) {
         this.formBuilder = formBuilder;
+        this.modalService = modalService;
         this.customFieldsConfig = [];
         this.customFieldValues = {};
         this.updateClick = new EventEmitter();
@@ -502,17 +484,40 @@ class OrderCustomFieldsCardComponent {
         this.customFieldForm.markAsPristine();
         this.editable = false;
     }
+    onCancelClick() {
+        if (this.customFieldForm.dirty) {
+            this.modalService
+                .dialog({
+                title: marker('catalog.confirm-cancel'),
+                buttons: [
+                    { type: 'secondary', label: marker('common.keep-editing') },
+                    { type: 'danger', label: marker('common.discard-changes'), returnValue: true },
+                ],
+            })
+                .subscribe(result => {
+                if (result) {
+                    this.customFieldForm.reset();
+                    this.customFieldForm.markAsPristine();
+                    this.editable = false;
+                }
+            });
+        }
+        else {
+            this.editable = false;
+        }
+    }
 }
 OrderCustomFieldsCardComponent.decorators = [
     { type: Component, args: [{
                 selector: 'vdr-order-custom-fields-card',
-                template: "<div class=\"card\" *ngIf=\"customFieldsConfig.length\">\r\n    <div class=\"card-header\">\r\n        {{ 'common.custom-fields' | translate }}\r\n    </div>\r\n    <div class=\"card-block\">\r\n        <div class=\"card-text custom-field-form\" [class.editable]=\"editable\">\r\n            <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: ChangeDetectionStrategy.OnPush,
                 styles: ["vdr-custom-field-control{margin-bottom:6px;display:block}.custom-field-form ::ng-deep .clr-control-label{color:var(--color-grey-400)}.custom-field-form.editable ::ng-deep .clr-control-label{color:inherit}\n"]
             },] }
 ];
 OrderCustomFieldsCardComponent.ctorParameters = () => [
-    { type: FormBuilder }
+    { type: FormBuilder },
+    { type: ModalService }
 ];
 OrderCustomFieldsCardComponent.propDecorators = {
     customFieldsConfig: [{ type: Input }],
@@ -964,27 +969,56 @@ class OrderDetailComponent extends BaseDetailComponent {
         });
     }
     transitionPaymentState({ payment, state }) {
-        this.dataService.order
-            .transitionPaymentToState(payment.id, state)
-            .subscribe(({ transitionPaymentToState }) => {
-            switch (transitionPaymentToState.__typename) {
-                case 'Payment':
-                    this.notificationService.success(marker('order.transitioned-payment-to-state-success'), {
-                        state,
-                    });
-                    this.dataService.order.getOrder(this.id).single$.subscribe();
-                    this.fetchHistory.next();
-                    break;
-                case 'PaymentStateTransitionError':
-                    this.notificationService.error(transitionPaymentToState.message);
-                    break;
-            }
-        });
+        if (state === 'Cancelled') {
+            this.dataService.order.cancelPayment(payment.id).subscribe(({ cancelPayment }) => {
+                switch (cancelPayment.__typename) {
+                    case 'Payment':
+                        this.notificationService.success(marker('order.transitioned-payment-to-state-success'), {
+                            state,
+                        });
+                        this.dataService.order.getOrder(this.id).single$.subscribe();
+                        this.fetchHistory.next();
+                        break;
+                    case 'PaymentStateTransitionError':
+                        this.notificationService.error(cancelPayment.transitionError);
+                        break;
+                    case 'CancelPaymentError':
+                        this.notificationService.error(cancelPayment.paymentErrorMessage);
+                        break;
+                }
+            });
+        }
+        else {
+            this.dataService.order
+                .transitionPaymentToState(payment.id, state)
+                .subscribe(({ transitionPaymentToState }) => {
+                switch (transitionPaymentToState.__typename) {
+                    case 'Payment':
+                        this.notificationService.success(marker('order.transitioned-payment-to-state-success'), {
+                            state,
+                        });
+                        this.dataService.order.getOrder(this.id).single$.subscribe();
+                        this.fetchHistory.next();
+                        break;
+                    case 'PaymentStateTransitionError':
+                        this.notificationService.error(transitionPaymentToState.message);
+                        break;
+                }
+            });
+        }
     }
     canAddFulfillment(order) {
-        const allItemsFulfilled = order.lines
-            .reduce((items, line) => [...items, ...line.items], [])
-            .every(item => !!item.fulfillment || item.cancelled);
+        var _a;
+        const allFulfillmentSummaryRows = ((_a = order.fulfillments) !== null && _a !== void 0 ? _a : []).reduce((all, fulfillment) => [...all, ...fulfillment.summary], []);
+        let allItemsFulfilled = true;
+        for (const line of order.lines) {
+            const totalFulfilledCount = allFulfillmentSummaryRows
+                .filter(row => row.orderLine.id === line.id)
+                .reduce((sum, row) => sum + row.quantity, 0);
+            if (totalFulfilledCount < line.quantity) {
+                allItemsFulfilled = false;
+            }
+        }
         return (!allItemsFulfilled &&
             !this.hasUnsettledModifications(order) &&
             this.outstandingPaymentAmount(order) === 0 &&
@@ -1244,26 +1278,43 @@ class OrderDetailComponent extends BaseDetailComponent {
             if (!input) {
                 return of(undefined);
             }
-            const operations = [];
+            if ((_a = input.cancel.lines) === null || _a === void 0 ? void 0 : _a.length) {
+                return this.dataService.order.cancelOrder(input.cancel).pipe(map(res => {
+                    const result = res.cancelOrder;
+                    switch (result.__typename) {
+                        case 'Order':
+                            this.refetchOrder(result).subscribe();
+                            this.notificationService.success(marker('order.cancelled-order-success'));
+                            return input;
+                        case 'CancelActiveOrderError':
+                        case 'QuantityTooGreatError':
+                        case 'MultipleOrderError':
+                        case 'OrderStateTransitionError':
+                        case 'EmptyOrderLineSelectionError':
+                            this.notificationService.error(result.message);
+                            return undefined;
+                    }
+                }));
+            }
+            else {
+                return [input];
+            }
+        }), switchMap(input => {
+            if (!input) {
+                return of(undefined);
+            }
             if (input.refund.lines.length) {
-                operations.push(this.dataService.order
+                return this.dataService.order
                     .refundOrder(input.refund)
-                    .pipe(map(res => res.refundOrder)));
+                    .pipe(map(res => res.refundOrder));
             }
-            if ((_a = input.cancel.lines) === null || _a === void 0 ? void 0 : _a.length) {
-                operations.push(this.dataService.order
-                    .cancelOrder(input.cancel)
-                    .pipe(map(res => res.cancelOrder)));
+            else {
+                return [undefined];
             }
-            return merge(...operations);
         }))
             .subscribe(result => {
             if (result) {
                 switch (result.__typename) {
-                    case 'Order':
-                        this.refetchOrder(result).subscribe();
-                        this.notificationService.success(marker('order.cancelled-order-success'));
-                        break;
                     case 'Refund':
                         this.refetchOrder(result).subscribe();
                         if (result.state === 'Failed') {
@@ -1273,11 +1324,6 @@ class OrderDetailComponent extends BaseDetailComponent {
                             this.notificationService.success(marker('order.refund-order-success'));
                         }
                         break;
-                    case 'QuantityTooGreatError':
-                    case 'MultipleOrderError':
-                    case 'OrderStateTransitionError':
-                    case 'CancelActiveOrderError':
-                    case 'EmptyOrderLineSelectionError':
                     case 'AlreadyRefundedError':
                     case 'NothingToRefundError':
                     case 'PaymentOrderMismatchError':
@@ -1896,6 +1942,7 @@ class OrderListComponent extends BaseListComponent {
         this.serverConfigService = serverConfigService;
         this.dataService = dataService;
         this.localStorageService = localStorageService;
+        this.searchControl = new FormControl('');
         this.searchOrderCodeControl = new FormControl('');
         this.searchLastNameControl = new FormControl('');
         this.orderStates = this.serverConfigService.getOrderProcessStates().map(item => item.name);
@@ -1936,7 +1983,7 @@ class OrderListComponent extends BaseListComponent {
         // tslint:disable-next-line:no-shadowed-variable
         (take, skip) => this.dataService.order.getOrders({ take, skip }).refetchOnChannelChange(), data => data.orders, 
         // tslint:disable-next-line:no-shadowed-variable
-        (skip, take) => this.createQueryOptions(skip, take, this.searchOrderCodeControl.value, this.searchLastNameControl.value, this.route.snapshot.queryParamMap.get('filter') || 'open'));
+        (skip, take) => this.createQueryOptions(skip, take, this.searchControl.value, this.route.snapshot.queryParamMap.get('filter') || 'open'));
         const lastFilters = this.localStorageService.get('orderListLastCustomFilters');
         if (lastFilters) {
             this.setQueryParam(lastFilters, { replaceUrl: true });
@@ -1946,7 +1993,7 @@ class OrderListComponent extends BaseListComponent {
         var _a;
         super.ngOnInit();
         this.activePreset$ = this.route.queryParamMap.pipe(map(qpm => qpm.get('filter') || 'open'), distinctUntilChanged());
-        const searchTerms$ = merge(this.searchOrderCodeControl.valueChanges, this.searchLastNameControl.valueChanges).pipe(filter(value => 2 < value.length || value.length === 0), debounceTime(250));
+        const searchTerms$ = merge(this.searchControl.valueChanges).pipe(filter(value => 2 < value.length || value.length === 0), debounceTime(250));
         merge(searchTerms$, this.route.queryParamMap)
             .pipe(takeUntil(this.destroy$))
             .subscribe(val => {
@@ -1979,11 +2026,12 @@ class OrderListComponent extends BaseListComponent {
     }
     createQueryOptions(
     // tslint:disable-next-line:no-shadowed-variable
-    skip, take, orderCodeSearchTerm, customerNameSearchTerm, activeFilterPreset) {
+    skip, take, searchTerm, activeFilterPreset) {
         var _a;
         const filterConfig = this.filterPresets.find(p => p.name === activeFilterPreset);
         // tslint:disable-next-line:no-shadowed-variable
-        const filter = {};
+        let filter = {};
+        let filterOperator = LogicalOperator.AND;
         if (filterConfig) {
             if (filterConfig.config.active != null) {
                 filter.active = {
@@ -2025,15 +2073,19 @@ class OrderListComponent extends BaseListComponent {
                 };
             }
         }
-        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 = LogicalOperator.OR;
         }
         return {
             options: {
@@ -2043,6 +2095,7 @@ class OrderListComponent extends BaseListComponent {
                 sort: {
                     updatedAt: SortOrder.DESC,
                 },
+                filterOperator,
             },
         };
     }
@@ -2058,7 +2111,7 @@ class OrderListComponent extends BaseListComponent {
 OrderListComponent.decorators = [
     { type: Component, args: [{
                 selector: 'vdr-order-list',
-                template: "<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <div class=\"search-form\">\r\n            <div class=\"btn-group btn-outline-primary\" *ngIf=\"activePreset$ | async as activePreset\">\r\n                <button\r\n                    class=\"btn\"\r\n                    *ngFor=\"let preset of filterPresets\"\r\n                    [class.btn-primary]=\"activePreset === preset.name\"\r\n                    (click)=\"selectFilterPreset(preset.name)\"\r\n                >\r\n                    {{ preset.label | translate }}\r\n                </button>\r\n                <button\r\n                    class=\"btn\"\r\n                    [class.btn-primary]=\"activePreset === 'custom'\"\r\n                    (click)=\"selectFilterPreset('custom')\"\r\n                >\r\n                    {{ 'order.filter-custom' | translate }}\r\n                    <clr-icon shape=\"angle down\"></clr-icon>\r\n                </button>\r\n            </div>\r\n\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: 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"]
             },] }
@@ -2084,7 +2137,7 @@ class OrderPaymentCardComponent {
         if (!this.payment) {
             return [];
         }
-        return this.payment.nextStates.filter(s => s !== 'Settled');
+        return this.payment.nextStates.filter(s => s !== 'Settled' && s !== 'Error');
     }
 }
 OrderPaymentCardComponent.decorators = [
@@ -2330,11 +2383,19 @@ class OrderTableComponent {
             return promotion.couponCode || undefined;
         }
     }
+    getShippingNames(order) {
+        if (order.shippingLines.length) {
+            return order.shippingLines.map(shippingLine => shippingLine.shippingMethod.name).join(', ');
+        }
+        else {
+            return '';
+        }
+    }
 }
 OrderTableComponent.decorators = [
     { type: Component, args: [{
                 selector: 'vdr-order-table',
-                template: "<table class=\"order-table table\">\r\n    <thead>\r\n        <tr>\r\n            <th></th>\r\n            <th>{{ 'order.product-name' | translate }}</th>\r\n            <th>{{ 'order.product-sku' | translate }}</th>\r\n            <th>{{ 'order.unit-price' | translate }}</th>\r\n            <th>{{ 'order.quantity' | translate }}</th>\r\n            <th>{{ 'order.total' | translate }}</th>\r\n        </tr>\r\n    </thead>\r\n    <tbody>\r\n        <ng-container *ngFor=\"let line of order.lines\">\r\n            <tr class=\"order-line\" [class.is-cancelled]=\"line.quantity === 0\">\r\n                <td class=\"align-middle thumb\">\r\n                    <img *ngIf=\"line.featuredAsset\" [src]=\"line.featuredAsset | assetPreview: 'tiny'\" />\r\n                </td>\r\n                <td class=\"align-middle name\">{{ line.productVariant.name }}</td>\r\n                <td class=\"align-middle sku\">{{ line.productVariant.sku }}</td>\r\n                <td class=\"align-middle unit-price\">\r\n                    {{ line.unitPriceWithTax | localeCurrency: order.currencyCode }}\r\n                    <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                        {{ line.unitPrice | localeCurrency: order.currencyCode }}\r\n                    </div>\r\n                </td>\r\n                <td class=\"align-middle quantity\">\r\n                    {{ 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: 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"]
             },] }