@vendure/admin-ui 1.4.7 → 1.5.2

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

@@ -106,6 +106,7 @@
             this.editable = true;
             this.setAsDefaultShipping = new i0.EventEmitter();
             this.setAsDefaultBilling = new i0.EventEmitter();
+            this.deleteAddress = new i0.EventEmitter();
             this.dataDependenciesPopulated = new rxjs.BehaviorSubject(false);
         }
         AddressCardComponent.prototype.ngOnInit = function () {
@@ -141,6 +142,10 @@
             this.setAsDefaultShipping.emit(this.addressForm.value.id);
             this.addressForm.markAsDirty();
         };
+        AddressCardComponent.prototype.delete = function () {
+            this.deleteAddress.emit(this.addressForm.value.id);
+            this.addressForm.markAsDirty();
+        };
         AddressCardComponent.prototype.editAddress = function () {
             var _this = this;
             this.modalService
@@ -162,7 +167,7 @@
     AddressCardComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'vdr-address-card',
-                    template: "<div class=\"card\" *ngIf=\"addressForm.value as address\">\r\n    <div class=\"card-header\">\r\n        <div class=\"address-title\">\r\n            <span class=\"street-line\" *ngIf=\"address.streetLine1\">{{ address.streetLine1 }},</span>\r\n            {{ address.countryCode }}\r\n        </div>\r\n        <div class=\"default-controls\">\r\n            <vdr-chip class=\"is-default p8\" *ngIf=\"isDefaultShipping\">\r\n                <clr-icon shape=\"truck\"></clr-icon>\r\n                {{ 'customer.default-shipping-address' | translate }}\r\n            </vdr-chip>\r\n            <vdr-chip class=\"is-default p8\" *ngIf=\"isDefaultBilling\">\r\n                <clr-icon shape=\"credit-card\"></clr-icon>\r\n                {{ 'customer.default-billing-address' | translate }}\r\n            </vdr-chip>\r\n        </div>\r\n    </div>\r\n    <div class=\"card-block\">\r\n        <div class=\"card-text\">\r\n            <vdr-formatted-address [address]=\"address\"></vdr-formatted-address>\r\n        </div>\r\n    </div>\r\n    <div class=\"card-footer\">\r\n        <vdr-entity-info [entity]=\"address\"></vdr-entity-info>\r\n        <ng-container *ngIf=\"editable\">\r\n            <button class=\"btn btn-sm btn-link\" (click)=\"editAddress()\">\r\n                {{ 'common.edit' | translate }}\r\n            </button>\r\n            <vdr-dropdown>\r\n                <button type=\"button\" class=\"btn btn-sm btn-link\" vdrDropdownTrigger>\r\n                    {{ 'common.more' | translate }}\r\n                    <clr-icon shape=\"caret down\"></clr-icon>\r\n                </button>\r\n                <vdr-dropdown-menu>\r\n                    <button\r\n                        vdrDropdownItem\r\n                        class=\"button\"\r\n                        [disabled]=\"isDefaultShipping\"\r\n                        (click)=\"setAsDefaultShippingAddress()\"\r\n                    >\r\n                        {{ 'customer.set-as-default-shipping-address' | translate }}\r\n                    </button>\r\n                    <button\r\n                        vdrDropdownItem\r\n                        class=\"button\"\r\n                        [disabled]=\"isDefaultBilling\"\r\n                        (click)=\"setAsDefaultBillingAddress()\"\r\n                    >\r\n                        {{ 'customer.set-as-default-billing-address' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </ng-container>\r\n    </div>\r\n</div>\r\n",
+                    template: "<div class=\"card\" *ngIf=\"addressForm.value as address\">\r\n    <div class=\"card-header\">\r\n        <div class=\"address-title\">\r\n            <span class=\"street-line\" *ngIf=\"address.streetLine1\">{{ address.streetLine1 }},</span>\r\n            {{ address.countryCode }}\r\n        </div>\r\n        <div class=\"default-controls\">\r\n            <vdr-chip class=\"is-default p8\" *ngIf=\"isDefaultShipping\">\r\n                <clr-icon shape=\"truck\"></clr-icon>\r\n                {{ 'customer.default-shipping-address' | translate }}\r\n            </vdr-chip>\r\n            <vdr-chip class=\"is-default p8\" *ngIf=\"isDefaultBilling\">\r\n                <clr-icon shape=\"credit-card\"></clr-icon>\r\n                {{ 'customer.default-billing-address' | translate }}\r\n            </vdr-chip>\r\n        </div>\r\n    </div>\r\n    <div class=\"card-block\">\r\n        <div class=\"card-text\">\r\n            <vdr-formatted-address [address]=\"address\"></vdr-formatted-address>\r\n        </div>\r\n    </div>\r\n    <div class=\"card-footer\">\r\n        <vdr-entity-info [entity]=\"address\"></vdr-entity-info>\r\n        <ng-container *ngIf=\"editable\">\r\n            <button class=\"btn btn-sm btn-link\" (click)=\"editAddress()\">\r\n                {{ 'common.edit' | translate }}\r\n            </button>\r\n            <vdr-dropdown>\r\n                <button type=\"button\" class=\"btn btn-sm btn-link\" vdrDropdownTrigger>\r\n                    {{ 'common.more' | translate }}\r\n                    <clr-icon shape=\"caret down\"></clr-icon>\r\n                </button>\r\n                <vdr-dropdown-menu>\r\n                    <button\r\n                        vdrDropdownItem\r\n                        class=\"button\"\r\n                        [disabled]=\"isDefaultShipping\"\r\n                        (click)=\"setAsDefaultShippingAddress()\"\r\n                    >\r\n                        {{ 'customer.set-as-default-shipping-address' | translate }}\r\n                    </button>\r\n                    <button\r\n                        vdrDropdownItem\r\n                        class=\"button\"\r\n                        [disabled]=\"isDefaultBilling\"\r\n                        (click)=\"setAsDefaultBillingAddress()\"\r\n                    >\r\n                        {{ 'customer.set-as-default-billing-address' | translate }}\r\n                    </button>\r\n                    <div class=\"dropdown-divider\"></div>\r\n                    <button\r\n                        type=\"button\"\r\n                        class=\"delete-button\"\r\n                        (click)=\"delete()\"\r\n                        vdrDropdownItem\r\n                    >\r\n                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                        {{ 'common.delete' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </ng-container>\r\n    </div>\r\n</div>\r\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     styles: [":host{display:block;max-width:360px}clr-input-container{margin-bottom:12px}.defaul-controls{display:flex}.is-default{margin:0;color:var(--color-success-500)}\n"]
                 },] }
@@ -179,7 +184,8 @@
         isDefaultShipping: [{ type: i0.Input }],
         editable: [{ type: i0.Input }],
         setAsDefaultShipping: [{ type: i0.Output }],
-        setAsDefaultBilling: [{ type: i0.Output }]
+        setAsDefaultBilling: [{ type: i0.Output }],
+        deleteAddress: [{ type: i0.Output }]
     };
 
     /*! *****************************************************************************
@@ -540,6 +546,7 @@
             _this.modalService = modalService;
             _this.notificationService = notificationService;
             _this.fetchHistory = new rxjs.Subject();
+            _this.addressesToDeleteIds = new Set();
             _this.addressDefaultsUpdated = false;
             _this.ordersPerPage = 10;
             _this.currentOrdersPage = 1;
@@ -599,6 +606,14 @@
             this.defaultShippingAddressId = id;
             this.addressDefaultsUpdated = true;
         };
+        CustomerDetailComponent.prototype.toggleDeleteAddress = function (id) {
+            if (this.addressesToDeleteIds.has(id)) {
+                this.addressesToDeleteIds.delete(id);
+            }
+            else {
+                this.addressesToDeleteIds.add(id);
+            }
+        };
         CustomerDetailComponent.prototype.addAddress = function () {
             var e_1, _c;
             var addressFormArray = this.detailForm.get('addresses');
@@ -738,9 +753,16 @@
                                         .pipe(operators.map(function (res) { return res.createCustomerAddress; })));
                                 }
                                 else {
-                                    saveOperations.push(_this.dataService.customer
-                                        .updateCustomerAddress(Object.assign(Object.assign({}, input), { id: address.id }))
-                                        .pipe(operators.map(function (res) { return res.updateCustomerAddress; })));
+                                    if (_this.addressesToDeleteIds.has(address.id)) {
+                                        saveOperations.push(_this.dataService.customer
+                                            .deleteCustomerAddress(address.id)
+                                            .pipe(operators.map(function (res) { return res.deleteCustomerAddress; })));
+                                    }
+                                    else {
+                                        saveOperations.push(_this.dataService.customer
+                                            .updateCustomerAddress(Object.assign(Object.assign({}, input), { id: address.id }))
+                                            .pipe(operators.map(function (res) { return res.updateCustomerAddress; })));
+                                    }
                                 }
                             }
                         }
@@ -757,19 +779,25 @@
             }))
                 .subscribe(function (data) {
                 var e_3, _c;
+                var notified = false;
                 try {
                     for (var data_1 = __values(data), data_1_1 = data_1.next(); !data_1_1.done; data_1_1 = data_1.next()) {
                         var result = data_1_1.value;
                         switch (result.__typename) {
                             case 'Customer':
                             case 'Address':
-                                _this.notificationService.success(ngxTranslateExtractMarker.marker('common.notify-update-success'), {
-                                    entity: 'Customer',
-                                });
-                                _this.detailForm.markAsPristine();
-                                _this.addressDefaultsUpdated = false;
-                                _this.changeDetector.markForCheck();
-                                _this.fetchHistory.next();
+                            case 'Success':
+                                if (!notified) {
+                                    _this.notificationService.success(ngxTranslateExtractMarker.marker('common.notify-update-success'), {
+                                        entity: 'Customer',
+                                    });
+                                    notified = true;
+                                    _this.detailForm.markAsPristine();
+                                    _this.addressDefaultsUpdated = false;
+                                    _this.changeDetector.markForCheck();
+                                    _this.fetchHistory.next();
+                                    _this.dataService.customer.getCustomer(_this.id).single$.subscribe();
+                                }
                                 break;
                             case 'EmailAddressConflictError':
                                 _this.notificationService.error(result.message);
@@ -969,9 +997,9 @@
     CustomerDetailComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'vdr-customer-detail',
-                    template: "<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <div class=\"flex clr-align-items-center\">\r\n            <vdr-entity-info [entity]=\"entity$ | async\"></vdr-entity-info>\r\n            <vdr-customer-status-label [customer]=\"entity$ | async\"></vdr-customer-status-label>\r\n            <div\r\n                class=\"last-login\"\r\n                *ngIf=\"(entity$ | async)?.user?.lastLogin as lastLogin\"\r\n                [title]=\"lastLogin | localeDate: 'medium'\"\r\n            >\r\n                {{ 'customer.last-login' | translate }}: {{ lastLogin | timeAgo }}\r\n            </div>\r\n        </div>\r\n    </vdr-ab-left>\r\n\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"customer-detail\"></vdr-action-bar-items>\r\n        <button\r\n            class=\"btn btn-primary\"\r\n            *ngIf=\"isNew$ | async; else updateButton\"\r\n            (click)=\"create()\"\r\n            [disabled]=\"!(addressDefaultsUpdated || (detailForm.valid && detailForm.dirty))\"\r\n        >\r\n            {{ 'common.create' | translate }}\r\n        </button>\r\n        <ng-template #updateButton>\r\n            <button\r\n                *vdrIfPermissions=\"'UpdateCustomer'\"\r\n                class=\"btn btn-primary\"\r\n                (click)=\"save()\"\r\n                [disabled]=\"!(addressDefaultsUpdated || (detailForm.valid && detailForm.dirty))\"\r\n            >\r\n                {{ 'common.update' | translate }}\r\n            </button>\r\n        </ng-template>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm.get('customer')\">\r\n    <vdr-form-field [label]=\"'customer.title' | translate\" for=\"title\" [readOnlyToggle]=\"!(isNew$ | async)\">\r\n        <input id=\"title\" type=\"text\" formControlName=\"title\" />\r\n    </vdr-form-field>\r\n    <vdr-form-field\r\n        [label]=\"'customer.first-name' | translate\"\r\n        for=\"firstName\"\r\n        [readOnlyToggle]=\"!(isNew$ | async)\"\r\n    >\r\n        <input id=\"firstName\" type=\"text\" formControlName=\"firstName\" />\r\n    </vdr-form-field>\r\n    <vdr-form-field\r\n        [label]=\"'customer.last-name' | translate\"\r\n        for=\"lastName\"\r\n        [readOnlyToggle]=\"!(isNew$ | async)\"\r\n    >\r\n        <input id=\"lastName\" type=\"text\" formControlName=\"lastName\" />\r\n    </vdr-form-field>\r\n    <vdr-form-field\r\n        [label]=\"'customer.email-address' | translate\"\r\n        for=\"emailAddress\"\r\n        [readOnlyToggle]=\"!(isNew$ | async)\"\r\n    >\r\n        <input id=\"emailAddress\" type=\"text\" formControlName=\"emailAddress\" />\r\n    </vdr-form-field>\r\n    <vdr-form-field\r\n        [label]=\"'customer.phone-number' | translate\"\r\n        for=\"phoneNumber\"\r\n        [readOnlyToggle]=\"!(isNew$ | async)\"\r\n    >\r\n        <input id=\"phoneNumber\" type=\"text\" formControlName=\"phoneNumber\" />\r\n    </vdr-form-field>\r\n    <vdr-form-field [label]=\"'customer.password' | translate\" for=\"password\" *ngIf=\"isNew$ | async\">\r\n        <input id=\"password\" type=\"password\" formControlName=\"password\" />\r\n    </vdr-form-field>\r\n\r\n    <section formGroupName=\"customFields\" *ngIf=\"customFields.length\">\r\n        <label>{{ 'common.custom-fields' | translate }}</label>\r\n        <vdr-tabbed-custom-fields\r\n            entityName=\"Customer\"\r\n            [customFields]=\"customFields\"\r\n            [customFieldsFormGroup]=\"detailForm.get(['customer', 'customFields'])\"\r\n        ></vdr-tabbed-custom-fields>\r\n    </section>\r\n    <vdr-custom-detail-component-host\r\n        locationId=\"customer-detail\"\r\n        [entity$]=\"entity$\"\r\n        [detailForm]=\"detailForm\"\r\n    ></vdr-custom-detail-component-host>\r\n</form>\r\n\r\n<div class=\"groups\" *ngIf=\"(entity$ | async)?.groups as groups\">\r\n    <label class=\"clr-control-label\">{{ 'customer.customer-groups' | translate }}</label>\r\n    <ng-container *ngIf=\"groups.length; else noGroups\">\r\n        <vdr-chip\r\n            *ngFor=\"let group of groups\"\r\n            [colorFrom]=\"group.id\"\r\n            icon=\"times\"\r\n            (iconClick)=\"removeFromGroup(group)\"\r\n            >{{ group.name }}</vdr-chip\r\n        >\r\n    </ng-container>\r\n    <ng-template #noGroups>\r\n        {{ 'customer.not-a-member-of-any-groups' | translate }}\r\n    </ng-template>\r\n    <div>\r\n        <button\r\n            class=\"btn btn-sm btn-secondary\"\r\n            (click)=\"addToGroup()\"\r\n            *vdrIfPermissions=\"'UpdateCustomerGroup'\"\r\n        >\r\n            <clr-icon shape=\"plus\"></clr-icon>\r\n            {{ 'customer.add-customer-to-group' | translate }}\r\n        </button>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"clr-row\" *ngIf=\"!(isNew$ | async)\">\r\n    <div class=\"clr-col-md-4\">\r\n        <h3>{{ 'customer.addresses' | translate }}</h3>\r\n        <vdr-address-card\r\n            *ngFor=\"let addressForm of getAddressFormControls()\"\r\n            [availableCountries]=\"availableCountries$ | async\"\r\n            [isDefaultBilling]=\"defaultBillingAddressId === addressForm.value.id\"\r\n            [isDefaultShipping]=\"defaultShippingAddressId === addressForm.value.id\"\r\n            [addressForm]=\"addressForm\"\r\n            [customFields]=\"addressCustomFields\"\r\n            [editable]=\"['UpdateCustomer'] | hasPermission\"\r\n            (setAsDefaultBilling)=\"setDefaultBillingAddressId($event)\"\r\n            (setAsDefaultShipping)=\"setDefaultShippingAddressId($event)\"\r\n        ></vdr-address-card>\r\n        <button class=\"btn btn-secondary\" (click)=\"addAddress()\" *vdrIfPermissions=\"'UpdateCustomer'\">\r\n            <clr-icon shape=\"plus\"></clr-icon>\r\n            {{ 'customer.create-new-address' | translate }}\r\n        </button>\r\n    </div>\r\n    <div class=\"clr-col-md-8\">\r\n        <h3>{{ 'customer.orders' | translate }}</h3>\r\n        <vdr-data-table\r\n            [items]=\"orders$ | async\"\r\n            [itemsPerPage]=\"ordersPerPage\"\r\n            [totalItems]=\"ordersCount$ | async\"\r\n            [currentPage]=\"currentOrdersPage\"\r\n            [emptyStateLabel]=\"'customer.no-orders-placed' | translate\"\r\n            (itemsPerPageChange)=\"setOrderItemsPerPage($event)\"\r\n            (pageChange)=\"setOrderCurrentPage($event)\"\r\n        >\r\n            <vdr-dt-column>{{ 'common.code' | 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></vdr-dt-column>\r\n            <ng-template let-order=\"item\">\r\n                <td class=\"left\">{{ order.code }}</td>\r\n                <td class=\"left\">{{ order.state }}</td>\r\n                <td class=\"left\">{{ order.totalWithTax | localeCurrency: order.currencyCode }}</td>\r\n                <td class=\"left\">{{ order.updatedAt | localeDate: 'medium' }}</td>\r\n                <td class=\"right\">\r\n                    <vdr-table-row-action\r\n                        iconShape=\"shopping-cart\"\r\n                        [label]=\"'common.open' | translate\"\r\n                        [linkTo]=\"['/orders/', order.id]\"\r\n                    ></vdr-table-row-action>\r\n                </td>\r\n            </ng-template>\r\n        </vdr-data-table>\r\n    </div>\r\n</div>\r\n<div class=\"clr-row\" *ngIf=\"!(isNew$ | async)\">\r\n    <div class=\"clr-col-md-6\">\r\n        <vdr-customer-history\r\n            [customer]=\"entity$ | async\"\r\n            [history]=\"history$ | async\"\r\n            (addNote)=\"addNoteToCustomer($event)\"\r\n            (updateNote)=\"updateNote($event)\"\r\n            (deleteNote)=\"deleteNote($event)\"\r\n        ></vdr-customer-history>\r\n    </div>\r\n</div>\r\n",
+                    template: "<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <div class=\"flex clr-align-items-center\">\r\n            <vdr-entity-info [entity]=\"entity$ | async\"></vdr-entity-info>\r\n            <vdr-customer-status-label [customer]=\"entity$ | async\"></vdr-customer-status-label>\r\n            <div\r\n                class=\"last-login\"\r\n                *ngIf=\"(entity$ | async)?.user?.lastLogin as lastLogin\"\r\n                [title]=\"lastLogin | localeDate: 'medium'\"\r\n            >\r\n                {{ 'customer.last-login' | translate }}: {{ lastLogin | timeAgo }}\r\n            </div>\r\n        </div>\r\n    </vdr-ab-left>\r\n\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"customer-detail\"></vdr-action-bar-items>\r\n        <button\r\n            class=\"btn btn-primary\"\r\n            *ngIf=\"isNew$ | async; else updateButton\"\r\n            (click)=\"create()\"\r\n            [disabled]=\"!(addressDefaultsUpdated || (detailForm.valid && detailForm.dirty))\"\r\n        >\r\n            {{ 'common.create' | translate }}\r\n        </button>\r\n        <ng-template #updateButton>\r\n            <button\r\n                *vdrIfPermissions=\"'UpdateCustomer'\"\r\n                class=\"btn btn-primary\"\r\n                (click)=\"save()\"\r\n                [disabled]=\"!(addressDefaultsUpdated || (detailForm.valid && detailForm.dirty))\"\r\n            >\r\n                {{ 'common.update' | translate }}\r\n            </button>\r\n        </ng-template>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm.get('customer')\">\r\n    <vdr-form-field [label]=\"'customer.title' | translate\" for=\"title\" [readOnlyToggle]=\"!(isNew$ | async)\">\r\n        <input id=\"title\" type=\"text\" formControlName=\"title\" />\r\n    </vdr-form-field>\r\n    <vdr-form-field\r\n        [label]=\"'customer.first-name' | translate\"\r\n        for=\"firstName\"\r\n        [readOnlyToggle]=\"!(isNew$ | async)\"\r\n    >\r\n        <input id=\"firstName\" type=\"text\" formControlName=\"firstName\" />\r\n    </vdr-form-field>\r\n    <vdr-form-field\r\n        [label]=\"'customer.last-name' | translate\"\r\n        for=\"lastName\"\r\n        [readOnlyToggle]=\"!(isNew$ | async)\"\r\n    >\r\n        <input id=\"lastName\" type=\"text\" formControlName=\"lastName\" />\r\n    </vdr-form-field>\r\n    <vdr-form-field\r\n        [label]=\"'customer.email-address' | translate\"\r\n        for=\"emailAddress\"\r\n        [readOnlyToggle]=\"!(isNew$ | async)\"\r\n    >\r\n        <input id=\"emailAddress\" type=\"text\" formControlName=\"emailAddress\" />\r\n    </vdr-form-field>\r\n    <vdr-form-field\r\n        [label]=\"'customer.phone-number' | translate\"\r\n        for=\"phoneNumber\"\r\n        [readOnlyToggle]=\"!(isNew$ | async)\"\r\n    >\r\n        <input id=\"phoneNumber\" type=\"text\" formControlName=\"phoneNumber\" />\r\n    </vdr-form-field>\r\n    <vdr-form-field [label]=\"'customer.password' | translate\" for=\"password\" *ngIf=\"isNew$ | async\">\r\n        <input id=\"password\" type=\"password\" formControlName=\"password\" />\r\n    </vdr-form-field>\r\n\r\n    <section formGroupName=\"customFields\" *ngIf=\"customFields.length\">\r\n        <label>{{ 'common.custom-fields' | translate }}</label>\r\n        <vdr-tabbed-custom-fields\r\n            entityName=\"Customer\"\r\n            [customFields]=\"customFields\"\r\n            [customFieldsFormGroup]=\"detailForm.get(['customer', 'customFields'])\"\r\n        ></vdr-tabbed-custom-fields>\r\n    </section>\r\n    <vdr-custom-detail-component-host\r\n        locationId=\"customer-detail\"\r\n        [entity$]=\"entity$\"\r\n        [detailForm]=\"detailForm\"\r\n    ></vdr-custom-detail-component-host>\r\n</form>\r\n\r\n<div class=\"groups\" *ngIf=\"(entity$ | async)?.groups as groups\">\r\n    <label class=\"clr-control-label\">{{ 'customer.customer-groups' | translate }}</label>\r\n    <ng-container *ngIf=\"groups.length; else noGroups\">\r\n        <vdr-chip\r\n            *ngFor=\"let group of groups\"\r\n            [colorFrom]=\"group.id\"\r\n            icon=\"times\"\r\n            (iconClick)=\"removeFromGroup(group)\"\r\n            >{{ group.name }}</vdr-chip\r\n        >\r\n    </ng-container>\r\n    <ng-template #noGroups>\r\n        {{ 'customer.not-a-member-of-any-groups' | translate }}\r\n    </ng-template>\r\n    <div>\r\n        <button\r\n            class=\"btn btn-sm btn-secondary\"\r\n            (click)=\"addToGroup()\"\r\n            *vdrIfPermissions=\"'UpdateCustomerGroup'\"\r\n        >\r\n            <clr-icon shape=\"plus\"></clr-icon>\r\n            {{ 'customer.add-customer-to-group' | translate }}\r\n        </button>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"clr-row\" *ngIf=\"!(isNew$ | async)\">\r\n    <div class=\"clr-col-md-4\">\r\n        <h3>{{ 'customer.addresses' | translate }}</h3>\r\n        <vdr-address-card\r\n            *ngFor=\"let addressForm of getAddressFormControls()\"\r\n            [class.to-delete]=\"addressesToDeleteIds.has(addressForm.value.id)\"\r\n            [availableCountries]=\"availableCountries$ | async\"\r\n            [isDefaultBilling]=\"defaultBillingAddressId === addressForm.value.id\"\r\n            [isDefaultShipping]=\"defaultShippingAddressId === addressForm.value.id\"\r\n            [addressForm]=\"addressForm\"\r\n            [customFields]=\"addressCustomFields\"\r\n            [editable]=\"(['UpdateCustomer'] | hasPermission) && !addressesToDeleteIds.has(addressForm.value.id)\"\r\n            (setAsDefaultBilling)=\"setDefaultBillingAddressId($event)\"\r\n            (setAsDefaultShipping)=\"setDefaultShippingAddressId($event)\"\r\n            (deleteAddress)=\"toggleDeleteAddress($event)\"\r\n        ></vdr-address-card>\r\n        <button class=\"btn btn-secondary\" (click)=\"addAddress()\" *vdrIfPermissions=\"'UpdateCustomer'\">\r\n            <clr-icon shape=\"plus\"></clr-icon>\r\n            {{ 'customer.create-new-address' | translate }}\r\n        </button>\r\n    </div>\r\n    <div class=\"clr-col-md-8\">\r\n        <h3>{{ 'customer.orders' | translate }}</h3>\r\n        <vdr-data-table\r\n            [items]=\"orders$ | async\"\r\n            [itemsPerPage]=\"ordersPerPage\"\r\n            [totalItems]=\"ordersCount$ | async\"\r\n            [currentPage]=\"currentOrdersPage\"\r\n            [emptyStateLabel]=\"'customer.no-orders-placed' | translate\"\r\n            (itemsPerPageChange)=\"setOrderItemsPerPage($event)\"\r\n            (pageChange)=\"setOrderCurrentPage($event)\"\r\n        >\r\n            <vdr-dt-column>{{ 'common.code' | 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></vdr-dt-column>\r\n            <ng-template let-order=\"item\">\r\n                <td class=\"left\">{{ order.code }}</td>\r\n                <td class=\"left\">{{ order.state }}</td>\r\n                <td class=\"left\">{{ order.totalWithTax | localeCurrency: order.currencyCode }}</td>\r\n                <td class=\"left\">{{ order.updatedAt | localeDate: 'medium' }}</td>\r\n                <td class=\"right\">\r\n                    <vdr-table-row-action\r\n                        iconShape=\"shopping-cart\"\r\n                        [label]=\"'common.open' | translate\"\r\n                        [linkTo]=\"['/orders/', order.id]\"\r\n                    ></vdr-table-row-action>\r\n                </td>\r\n            </ng-template>\r\n        </vdr-data-table>\r\n    </div>\r\n</div>\r\n<div class=\"clr-row\" *ngIf=\"!(isNew$ | async)\">\r\n    <div class=\"clr-col-md-6\">\r\n        <vdr-customer-history\r\n            [customer]=\"entity$ | async\"\r\n            [history]=\"history$ | async\"\r\n            (addNote)=\"addNoteToCustomer($event)\"\r\n            (updateNote)=\"updateNote($event)\"\r\n            (deleteNote)=\"deleteNote($event)\"\r\n        ></vdr-customer-history>\r\n    </div>\r\n</div>\r\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [".last-login{margin-left:6px;color:var(--color-grey-500)}\n"]
+                    styles: [".last-login{margin-left:6px;color:var(--color-grey-500)}.to-delete{opacity:.5}\n"]
                 },] }
     ];
     CustomerDetailComponent.ctorParameters = function () { return [
@@ -1411,8 +1439,7 @@
             _this.dataService = dataService;
             _this.modalService = modalService;
             _this.notificationService = notificationService;
-            _this.emailSearchTerm = new forms.FormControl('');
-            _this.lastNameSearchTerm = new forms.FormControl('');
+            _this.searchTerm = new forms.FormControl('');
             _super.prototype.setQueryFn.call(_this, function () {
                 var _a;
                 var args = [];
@@ -1426,12 +1453,16 @@
                     take: take,
                     filter: {
                         emailAddress: {
-                            contains: _this.emailSearchTerm.value,
+                            contains: _this.searchTerm.value,
                         },
                         lastName: {
-                            contains: _this.lastNameSearchTerm.value,
+                            contains: _this.searchTerm.value,
+                        },
+                        postalCode: {
+                            contains: _this.searchTerm.value,
                         },
                     },
+                    filterOperator: i2.LogicalOperator.OR,
                     sort: {
                         createdAt: generatedShopTypes.SortOrder.DESC,
                     },
@@ -1442,7 +1473,7 @@
         CustomerListComponent.prototype.ngOnInit = function () {
             var _this = this;
             _super.prototype.ngOnInit.call(this);
-            rxjs.merge(this.emailSearchTerm.valueChanges, this.lastNameSearchTerm.valueChanges)
+            this.searchTerm.valueChanges
                 .pipe(operators.filter(function (value) { return 2 < value.length || value.length === 0; }), operators.debounceTime(250), operators.takeUntil(this.destroy$))
                 .subscribe(function () { return _this.refresh(); });
         };
@@ -1474,7 +1505,7 @@
     CustomerListComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'vdr-customer-list',
-                    template: "<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <input\r\n            type=\"text\"\r\n            name=\"emailSearchTerm\"\r\n            [formControl]=\"emailSearchTerm\"\r\n            [placeholder]=\"'customer.search-customers-by-email' | translate\"\r\n            class=\"search-input ml3\"\r\n        />\r\n        <input\r\n            type=\"text\"\r\n            name=\"lastNameSearchTerm\"\r\n            [formControl]=\"lastNameSearchTerm\"\r\n            [placeholder]=\"'customer.search-customers-by-last-name' | translate\"\r\n            class=\"search-input ml3\"\r\n        />\r\n    </vdr-ab-left>\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"customer-list\"></vdr-action-bar-items>\r\n        <a class=\"btn btn-primary\" [routerLink]=\"['./create']\" *vdrIfPermissions=\"'CreateCustomer'\">\r\n            <clr-icon shape=\"plus\"></clr-icon>\r\n            {{ 'customer.create-new-customer' | translate }}\r\n        </a>\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 [expand]=\"true\">{{ 'customer.name' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column [expand]=\"true\">{{ 'customer.email-address' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'customer.customer-type' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column></vdr-dt-column>\r\n    <vdr-dt-column></vdr-dt-column>\r\n    <ng-template let-customer=\"item\">\r\n        <td class=\"left align-middle\">\r\n            {{ customer.title }} {{ customer.firstName }} {{ customer.lastName }}\r\n        </td>\r\n        <td class=\"left align-middle\">{{ customer.emailAddress }}</td>\r\n        <td class=\"left align-middle\">\r\n            <vdr-customer-status-label [customer]=\"customer\"></vdr-customer-status-label>\r\n        </td>\r\n        <td class=\"right align-middle\">\r\n            <vdr-table-row-action\r\n                iconShape=\"edit\"\r\n                [label]=\"'common.edit' | translate\"\r\n                [linkTo]=\"['./', customer.id]\"\r\n            ></vdr-table-row-action>\r\n        </td>\r\n        <td>\r\n            <vdr-dropdown>\r\n                <button type=\"button\" class=\"btn btn-link btn-sm\" vdrDropdownTrigger>\r\n                    {{ 'common.actions' | translate }}\r\n                    <clr-icon shape=\"caret down\"></clr-icon>\r\n                </button>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <button\r\n                        type=\"button\"\r\n                        class=\"delete-button\"\r\n                        (click)=\"deleteCustomer(customer)\"\r\n                        [disabled]=\"!('DeleteCustomer' | hasPermission)\"\r\n                        vdrDropdownItem\r\n                    >\r\n                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                        {{ 'common.delete' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </td>\r\n    </ng-template>\r\n</vdr-data-table>\r\n",
+                    template: "<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <input\r\n            type=\"text\"\r\n            name=\"emailSearchTerm\"\r\n            [formControl]=\"searchTerm\"\r\n            [placeholder]=\"'customer.search-customers-by-email-last-name-postal-code' | translate\"\r\n            class=\"search-input ml3\"\r\n        />\r\n    </vdr-ab-left>\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"customer-list\"></vdr-action-bar-items>\r\n        <a class=\"btn btn-primary\" [routerLink]=\"['./create']\" *vdrIfPermissions=\"'CreateCustomer'\">\r\n            <clr-icon shape=\"plus\"></clr-icon>\r\n            {{ 'customer.create-new-customer' | translate }}\r\n        </a>\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 [expand]=\"true\">{{ 'customer.name' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column [expand]=\"true\">{{ 'customer.email-address' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'customer.customer-type' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column></vdr-dt-column>\r\n    <vdr-dt-column></vdr-dt-column>\r\n    <ng-template let-customer=\"item\">\r\n        <td class=\"left align-middle\">\r\n            {{ customer.title }} {{ customer.firstName }} {{ customer.lastName }}\r\n        </td>\r\n        <td class=\"left align-middle\">{{ customer.emailAddress }}</td>\r\n        <td class=\"left align-middle\">\r\n            <vdr-customer-status-label [customer]=\"customer\"></vdr-customer-status-label>\r\n        </td>\r\n        <td class=\"right align-middle\">\r\n            <vdr-table-row-action\r\n                iconShape=\"edit\"\r\n                [label]=\"'common.edit' | translate\"\r\n                [linkTo]=\"['./', customer.id]\"\r\n            ></vdr-table-row-action>\r\n        </td>\r\n        <td>\r\n            <vdr-dropdown>\r\n                <button type=\"button\" class=\"btn btn-link btn-sm\" vdrDropdownTrigger>\r\n                    {{ 'common.actions' | translate }}\r\n                    <clr-icon shape=\"caret down\"></clr-icon>\r\n                </button>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <button\r\n                        type=\"button\"\r\n                        class=\"delete-button\"\r\n                        (click)=\"deleteCustomer(customer)\"\r\n                        [disabled]=\"!('DeleteCustomer' | hasPermission)\"\r\n                        vdrDropdownItem\r\n                    >\r\n                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                        {{ 'common.delete' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </td>\r\n    </ng-template>\r\n</vdr-data-table>\r\n",
                     styles: [".search-input{margin-top:6px;min-width:300px}\n"]
                 },] }
     ];