@vendure/admin-ui 1.3.3 → 1.4.1

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

@@ -555,8 +555,8 @@
                     emailAddress: ['', [forms.Validators.required, forms.Validators.email]],
                     password: '',
                     customFields: _this.formBuilder.group(_this.customFields.reduce(function (hash, field) {
-                        var _d;
-                        return (Object.assign(Object.assign({}, hash), (_d = {}, _d[field.name] = '', _d)));
+                        var _c;
+                        return (Object.assign(Object.assign({}, hash), (_c = {}, _c[field.name] = '', _c)));
                     }, {})),
                 }),
                 addresses: new forms.FormArray([]),
@@ -587,9 +587,6 @@
             this.destroy();
             this.orderListUpdates$.complete();
         };
-        CustomerDetailComponent.prototype.customFieldIsSet = function (name) {
-            return !!this.detailForm.get(['customer', 'customFields', name]);
-        };
         CustomerDetailComponent.prototype.getAddressFormControls = function () {
             var formArray = this.detailForm.get(['addresses']);
             return formArray.controls;
@@ -603,7 +600,7 @@
             this.addressDefaultsUpdated = true;
         };
         CustomerDetailComponent.prototype.addAddress = function () {
-            var e_1, _d;
+            var e_1, _c;
             var addressFormArray = this.detailForm.get('addresses');
             var newAddress = this.formBuilder.group({
                 fullName: '',
@@ -621,15 +618,15 @@
             if (this.addressCustomFields.length) {
                 var customFieldsGroup = this.formBuilder.group({});
                 try {
-                    for (var _e = __values(this.addressCustomFields), _f = _e.next(); !_f.done; _f = _e.next()) {
-                        var fieldDef = _f.value;
+                    for (var _d = __values(this.addressCustomFields), _e = _d.next(); !_e.done; _e = _d.next()) {
+                        var fieldDef = _e.value;
                         customFieldsGroup.addControl(fieldDef.name, new forms.FormControl(''));
                     }
                 }
                 catch (e_1_1) { e_1 = { error: e_1_1 }; }
                 finally {
                     try {
-                        if (_f && !_f.done && (_d = _e.return)) _d.call(_e);
+                        if (_e && !_e.done && (_c = _d.return)) _c.call(_d);
                     }
                     finally { if (e_1) throw e_1.error; }
                 }
@@ -664,8 +661,8 @@
             };
             this.dataService.customer
                 .createCustomer(customer, formValue.password)
-                .subscribe(function (_d) {
-                var createCustomer = _d.createCustomer;
+                .subscribe(function (_c) {
+                var createCustomer = _c.createCustomer;
                 switch (createCustomer.__typename) {
                     case 'Customer':
                         _this.notificationService.success(ngxTranslateExtractMarker.marker('common.notify-create-success'), {
@@ -692,9 +689,9 @@
         CustomerDetailComponent.prototype.save = function () {
             var _this = this;
             this.entity$
-                .pipe(operators.take(1), operators.mergeMap(function (_d) {
-                var e_2, _e;
-                var id = _d.id;
+                .pipe(operators.take(1), operators.mergeMap(function (_c) {
+                var e_2, _d;
+                var id = _c.id;
                 var _a;
                 var saveOperations = [];
                 var customerForm = _this.detailForm.get('customer');
@@ -717,8 +714,8 @@
                 var addressFormArray = _this.detailForm.get('addresses');
                 if ((addressFormArray && addressFormArray.dirty) || _this.addressDefaultsUpdated) {
                     try {
-                        for (var _f = __values(addressFormArray.controls), _g = _f.next(); !_g.done; _g = _f.next()) {
-                            var addressControl = _g.value;
+                        for (var _e = __values(addressFormArray.controls), _f = _e.next(); !_f.done; _f = _e.next()) {
+                            var addressControl = _f.value;
                             if (addressControl.dirty || _this.addressDefaultsUpdated) {
                                 var address = addressControl.value;
                                 var input = {
@@ -751,7 +748,7 @@
                     catch (e_2_1) { e_2 = { error: e_2_1 }; }
                     finally {
                         try {
-                            if (_g && !_g.done && (_e = _f.return)) _e.call(_f);
+                            if (_f && !_f.done && (_d = _e.return)) _d.call(_e);
                         }
                         finally { if (e_2) throw e_2.error; }
                     }
@@ -759,7 +756,7 @@
                 return rxjs.forkJoin(saveOperations);
             }))
                 .subscribe(function (data) {
-                var e_3, _d;
+                var e_3, _c;
                 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;
@@ -783,7 +780,7 @@
                 catch (e_3_1) { e_3 = { error: e_3_1 }; }
                 finally {
                     try {
-                        if (data_1_1 && !data_1_1.done && (_d = data_1.return)) _d.call(data_1);
+                        if (data_1_1 && !data_1_1.done && (_c = data_1.return)) _c.call(data_1);
                     }
                     finally { if (e_3) throw e_3.error; }
                 }
@@ -834,9 +831,9 @@
                 _this.fetchHistory.next();
             });
         };
-        CustomerDetailComponent.prototype.addNoteToCustomer = function (_d) {
+        CustomerDetailComponent.prototype.addNoteToCustomer = function (_c) {
             var _this = this;
-            var note = _d.note;
+            var note = _c.note;
             this.dataService.customer.addNoteToCustomer(this.id, note).subscribe(function () {
                 _this.fetchHistory.next();
                 _this.notificationService.success(ngxTranslateExtractMarker.marker('common.notify-create-success'), {
@@ -892,8 +889,8 @@
             });
         };
         CustomerDetailComponent.prototype.setFormValues = function (entity) {
-            var e_4, _d, e_5, _e, e_6, _f;
-            var _a, _b;
+            var e_4, _c, e_5, _d;
+            var _a;
             var customerGroup = this.detailForm.get('customer');
             if (customerGroup) {
                 customerGroup.patchValue({
@@ -907,9 +904,9 @@
             if (entity.addresses) {
                 var addressesArray = new forms.FormArray([]);
                 try {
-                    for (var _g = __values(entity.addresses), _h = _g.next(); !_h.done; _h = _g.next()) {
-                        var address = _h.value;
-                        var _c = address, customFields = _c.customFields, rest = __rest(_c, ["customFields"]);
+                    for (var _e = __values(entity.addresses), _f = _e.next(); !_f.done; _f = _e.next()) {
+                        var address = _f.value;
+                        var _b = address, customFields = _b.customFields, rest = __rest(_b, ["customFields"]);
                         var addressGroup = this.formBuilder.group(Object.assign(Object.assign({}, rest), { countryCode: address.country.code }));
                         addressesArray.push(addressGroup);
                         if (address.defaultShippingAddress) {
@@ -921,8 +918,8 @@
                         if (this.addressCustomFields.length) {
                             var customFieldsGroup = this.formBuilder.group({});
                             try {
-                                for (var _j = (e_5 = void 0, __values(this.addressCustomFields)), _k = _j.next(); !_k.done; _k = _j.next()) {
-                                    var fieldDef = _k.value;
+                                for (var _g = (e_5 = void 0, __values(this.addressCustomFields)), _h = _g.next(); !_h.done; _h = _g.next()) {
+                                    var fieldDef = _h.value;
                                     var key = fieldDef.name;
                                     var value = (_a = address.customFields) === null || _a === void 0 ? void 0 : _a[key];
                                     var control = new forms.FormControl(value);
@@ -932,7 +929,7 @@
                             catch (e_5_1) { e_5 = { error: e_5_1 }; }
                             finally {
                                 try {
-                                    if (_k && !_k.done && (_e = _j.return)) _e.call(_j);
+                                    if (_h && !_h.done && (_d = _g.return)) _d.call(_g);
                                 }
                                 finally { if (e_5) throw e_5.error; }
                             }
@@ -943,32 +940,14 @@
                 catch (e_4_1) { e_4 = { error: e_4_1 }; }
                 finally {
                     try {
-                        if (_h && !_h.done && (_d = _g.return)) _d.call(_g);
+                        if (_f && !_f.done && (_c = _e.return)) _c.call(_e);
                     }
                     finally { if (e_4) throw e_4.error; }
                 }
                 this.detailForm.setControl('addresses', addressesArray);
             }
             if (this.customFields.length) {
-                var customFieldsGroup = this.detailForm.get(['customer', 'customFields']);
-                try {
-                    for (var _l = __values(this.customFields), _m = _l.next(); !_m.done; _m = _l.next()) {
-                        var fieldDef = _m.value;
-                        var key = fieldDef.name;
-                        var value = (_b = entity.customFields) === null || _b === void 0 ? void 0 : _b[key];
-                        var control = customFieldsGroup.get(key);
-                        if (control) {
-                            control.patchValue(value);
-                        }
-                    }
-                }
-                catch (e_6_1) { e_6 = { error: e_6_1 }; }
-                finally {
-                    try {
-                        if (_m && !_m.done && (_f = _l.return)) _f.call(_l);
-                    }
-                    finally { if (e_6) throw e_6.error; }
-                }
+                this.setCustomFieldFormValues(this.customFields, this.detailForm.get(['customer', 'customFields']), entity);
             }
             this.changeDetector.markForCheck();
         };
@@ -990,7 +969,7 @@
     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 class=\"last-login\" *ngIf=\"(entity$ | async)?.user?.lastLogin as lastLogin\" [title]=\"lastLogin | localeDate:'medium'\">\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        <ng-container *ngFor=\"let customField of customFields\">\r\n            <vdr-custom-field-control\r\n                *ngIf=\"customFieldIsSet(customField.name)\"\r\n                entityName=\"Customer\"\r\n                [customFieldsFormGroup]=\"detailForm.get(['customer', 'customFields'])\"\r\n                [customField]=\"customField\"\r\n            ></vdr-custom-field-control>\r\n        </ng-container>\r\n    </section>\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 class=\"btn btn-sm btn-secondary\" (click)=\"addToGroup()\" *vdrIfPermissions=\"'UpdateCustomerGroup'\">\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            [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",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     styles: [".last-login{margin-left:6px;color:var(--color-grey-500)}\n"]
                 },] }
@@ -1007,24 +986,63 @@
     ]; };
 
     var CustomerGroupDetailDialogComponent = /** @class */ (function () {
-        function CustomerGroupDetailDialogComponent() {
+        function CustomerGroupDetailDialogComponent(serverConfigService, formBuilder) {
+            this.serverConfigService = serverConfigService;
+            this.formBuilder = formBuilder;
+            this.customFields = this.serverConfigService.getCustomFieldsFor('CustomerGroup');
         }
+        CustomerGroupDetailDialogComponent.prototype.ngOnInit = function () {
+            var e_1, _b;
+            var _a;
+            this.form = this.formBuilder.group({
+                name: [this.group.name, forms.Validators.required],
+                customFields: this.formBuilder.group(this.customFields.reduce(function (hash, field) {
+                    var _b;
+                    return (Object.assign(Object.assign({}, hash), (_b = {}, _b[field.name] = '', _b)));
+                }, {})),
+            });
+            if (this.customFields.length) {
+                var customFieldsGroup = this.form.get('customFields');
+                try {
+                    for (var _c = __values(this.customFields), _d = _c.next(); !_d.done; _d = _c.next()) {
+                        var fieldDef = _d.value;
+                        var key = fieldDef.name;
+                        var value = (_a = this.group.customFields) === null || _a === void 0 ? void 0 : _a[key];
+                        var control = customFieldsGroup.get(key);
+                        if (control) {
+                            control.patchValue(value);
+                        }
+                    }
+                }
+                catch (e_1_1) { e_1 = { error: e_1_1 }; }
+                finally {
+                    try {
+                        if (_d && !_d.done && (_b = _c.return)) _b.call(_c);
+                    }
+                    finally { if (e_1) throw e_1.error; }
+                }
+            }
+        };
         CustomerGroupDetailDialogComponent.prototype.cancel = function () {
             this.resolveWith();
         };
         CustomerGroupDetailDialogComponent.prototype.save = function () {
-            this.resolveWith(this.group.name);
+            this.resolveWith(this.form.value);
         };
         return CustomerGroupDetailDialogComponent;
     }());
     CustomerGroupDetailDialogComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'vdr-customer-group-detail-dialog',
-                    template: "<ng-template vdrDialogTitle>\r\n    <span *ngIf=\"group.id\">{{ 'customer.update-customer-group' | translate }}</span>\r\n    <span *ngIf=\"!group.id\">{{ 'customer.create-customer-group' | translate }}</span>\r\n</ng-template>\r\n\r\n<vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\r\n    <input id=\"name\" type=\"text\" [(ngModel)]=\"group.name\" [readonly]=\"!(['CreateCustomerGroup', 'UpdateCustomerGroup'] | hasPermission)\" />\r\n</vdr-form-field>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"save()\" [disabled]=\"!group.name\" class=\"btn btn-primary\">\r\n        <span *ngIf=\"group.id\">{{ 'customer.update-customer-group' | translate }}</span>\r\n        <span *ngIf=\"!group.id\">{{ 'customer.create-customer-group' | translate }}</span>\r\n    </button>\r\n</ng-template>\r\n",
+                    template: "<ng-template vdrDialogTitle>\r\n    <span *ngIf=\"group.id\">{{ 'customer.update-customer-group' | translate }}</span>\r\n    <span *ngIf=\"!group.id\">{{ 'customer.create-customer-group' | translate }}</span>\r\n</ng-template>\r\n<form [formGroup]=\"form\">\r\n    <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\r\n        <input\r\n            id=\"name\"\r\n            type=\"text\"\r\n            formControlName=\"name\"\r\n            [readonly]=\"!(['CreateCustomerGroup', 'UpdateCustomerGroup'] | hasPermission)\"\r\n        />\r\n    </vdr-form-field>\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=\"CustomerGroup\"\r\n            [customFields]=\"customFields\"\r\n            [customFieldsFormGroup]=\"form.get('customFields')\"\r\n        ></vdr-tabbed-custom-fields>\r\n    </section>\r\n</form>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"save()\" [disabled]=\"!group.name\" class=\"btn btn-primary\">\r\n        <span *ngIf=\"group.id\">{{ 'customer.update-customer-group' | translate }}</span>\r\n        <span *ngIf=\"!group.id\">{{ 'customer.create-customer-group' | translate }}</span>\r\n    </button>\r\n</ng-template>\r\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     styles: [""]
                 },] }
-    ];
+    ];
+    CustomerGroupDetailDialogComponent.ctorParameters = function () { return [
+        { type: i2.ServerConfigService },
+        { type: forms.FormBuilder }
+    ]; };
 
     var CustomerGroupListComponent = /** @class */ (function () {
         function CustomerGroupListComponent(dataService, notificationService, modalService, route, router) {
@@ -1080,7 +1098,9 @@
             var _this = this;
             this.modalService
                 .fromComponent(CustomerGroupDetailDialogComponent, { locals: { group: { name: '' } } })
-                .pipe(operators.switchMap(function (name) { return name ? _this.dataService.customer.createCustomerGroup({ name: name, customerIds: [] }) : rxjs.EMPTY; }), 
+                .pipe(operators.switchMap(function (result) { return result
+                ? _this.dataService.customer.createCustomerGroup(Object.assign(Object.assign({}, result), { customerIds: [] }))
+                : rxjs.EMPTY; }), 
             // refresh list
             operators.switchMap(function () { return _this.dataService.customer.getCustomerGroupList().single$; }))
                 .subscribe(function () {
@@ -1133,7 +1153,9 @@
             var _this = this;
             this.modalService
                 .fromComponent(CustomerGroupDetailDialogComponent, { locals: { group: group } })
-                .pipe(operators.switchMap(function (name) { return name ? _this.dataService.customer.updateCustomerGroup({ id: group.id, name: name }) : rxjs.EMPTY; }))
+                .pipe(operators.switchMap(function (result) { return result
+                ? _this.dataService.customer.updateCustomerGroup(Object.assign({ id: group.id }, result))
+                : rxjs.EMPTY; }))
                 .subscribe(function () {
                 _this.notificationService.success(ngxTranslateExtractMarker.marker('common.notify-update-success'), {
                     entity: 'CustomerGroup',
@@ -1194,7 +1216,7 @@
     CustomerGroupListComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'vdr-customer-group-list',
-                    template: "<vdr-action-bar>\r\n    <vdr-ab-left> </vdr-ab-left>\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"customer-group-list\"></vdr-action-bar-items>\r\n        <button class=\"btn btn-primary\" *vdrIfPermissions=\"'CreateCustomerGroup'\" (click)=\"create()\">\r\n            <clr-icon shape=\"plus\"></clr-icon>\r\n            {{ 'customer.create-new-customer-group' | translate }}\r\n        </button>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n<div class=\"group-wrapper\">\r\n    <table class=\"table group-list\" [class.expanded]=\"activeGroup$ | async\" *ngIf=\"!(listIsEmpty$ | async); else emptyPlaceholder\">\r\n        <tbody>\r\n            <tr *ngFor=\"let group of groups$ | async\" [class.active]=\"group.id === (activeGroup$ | async)?.id\">\r\n                <td class=\"left align-middle\"><vdr-entity-info [entity]=\"group\"></vdr-entity-info></td>\r\n                <td class=\"left align-middle\"><vdr-chip [colorFrom]=\"group.id\">{{ group.name }}</vdr-chip></td>\r\n                <td class=\"text-right align-middle\">\r\n                    <a\r\n                        class=\"btn btn-link btn-sm\"\r\n                        [routerLink]=\"['./', { contents: group.id }]\"\r\n                        queryParamsHandling=\"preserve\"\r\n                    >\r\n                        <clr-icon shape=\"view-list\"></clr-icon>\r\n                        {{ 'customer.view-group-members' | translate }}\r\n                    </a>\r\n                </td>\r\n                <td class=\"align-middle\">\r\n                    <button class=\"btn btn-link btn-sm\" (click)=\"update(group)\">\r\n                        <clr-icon shape=\"edit\"></clr-icon>\r\n                        {{ 'common.edit' | translate }}\r\n                    </button>\r\n                </td>\r\n                <td class=\"align-middle\">\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                                class=\"button\"\r\n                                vdrDropdownItem\r\n                                (click)=\"delete(group.id)\"\r\n                                [disabled]=\"!('DeleteCustomerGroup' | hasPermission)\"\r\n                            >\r\n                                <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                                {{ 'common.delete' | translate }}\r\n                            </button>\r\n                        </vdr-dropdown-menu>\r\n                    </vdr-dropdown>\r\n                </td>\r\n            </tr>\r\n        </tbody>\r\n    </table>\r\n    <ng-template #emptyPlaceholder>\r\n        <vdr-empty-placeholder></vdr-empty-placeholder>\r\n    </ng-template>\r\n    <div class=\"group-members\" [class.expanded]=\"activeGroup$ | async\">\r\n        <ng-container *ngIf=\"activeGroup$ | async as activeGroup\">\r\n            <div class=\"flex\">\r\n                <div class=\"header-title-row\">\r\n                    {{ activeGroup.name }} ({{ membersTotal$ | async }})\r\n                </div>\r\n                <div class=\"flex-spacer\"></div>\r\n                <button type=\"button\" class=\"close-button\" (click)=\"closeMembers()\">\r\n                    <clr-icon shape=\"close\"></clr-icon>\r\n                </button>\r\n            </div>\r\n            <div class=\"controls\">\r\n                <vdr-dropdown>\r\n                    <button\r\n                        type=\"button\"\r\n                        class=\"btn btn-secondary btn-sm\"\r\n                        vdrDropdownTrigger\r\n                        [disabled]=\"selectedCustomerIds.length === 0\"\r\n                    >\r\n                        {{ 'common.with-selected' | 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)=\"removeFromGroup(activeGroup, selectedCustomerIds)\"\r\n                            vdrDropdownItem\r\n                            [disabled]=\"!('UpdateCustomerGroup' | hasPermission)\"\r\n                        >\r\n                            <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                            {{ 'customer.remove-from-group' | translate }}\r\n                        </button>\r\n                    </vdr-dropdown-menu>\r\n                </vdr-dropdown>\r\n                <button class=\"btn btn-secondary btn-sm\" (click)=\"addToGroup(activeGroup)\">\r\n                    {{ 'customer.add-customers-to-group' | translate: { groupName: activeGroup.name } }}\r\n                </button>\r\n            </div>\r\n            <vdr-customer-group-member-list\r\n                [members]=\"members$ | async\"\r\n                [route]=\"route\"\r\n                [totalItems]=\"membersTotal$ | async\"\r\n                [selectedMemberIds]=\"selectedCustomerIds\"\r\n                (selectionChange)=\"selectedCustomerIds = $event\"\r\n                (fetchParamsChange)=\"fetchGroupMembers$.next($event)\"\r\n            ></vdr-customer-group-member-list>\r\n        </ng-container>\r\n    </div>\r\n</div>\r\n\r\n",
+                    template: "<vdr-action-bar>\r\n    <vdr-ab-left> </vdr-ab-left>\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"customer-group-list\"></vdr-action-bar-items>\r\n        <button class=\"btn btn-primary\" *vdrIfPermissions=\"'CreateCustomerGroup'\" (click)=\"create()\">\r\n            <clr-icon shape=\"plus\"></clr-icon>\r\n            {{ 'customer.create-new-customer-group' | translate }}\r\n        </button>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n<div class=\"group-wrapper\">\r\n    <div class=\"group-list\">\r\n        <table\r\n            class=\"table mt0\"\r\n            [class.expanded]=\"activeGroup$ | async\"\r\n            *ngIf=\"!(listIsEmpty$ | async); else emptyPlaceholder\"\r\n        >\r\n            <tbody>\r\n                <tr\r\n                    *ngFor=\"let group of groups$ | async\"\r\n                    [class.active]=\"group.id === (activeGroup$ | async)?.id\"\r\n                >\r\n                    <td class=\"left align-middle\"><vdr-entity-info [entity]=\"group\"></vdr-entity-info></td>\r\n                    <td class=\"left align-middle\">\r\n                        <vdr-chip [colorFrom]=\"group.id\">{{ group.name }}</vdr-chip>\r\n                    </td>\r\n                    <td class=\"text-right align-middle\">\r\n                        <a\r\n                            class=\"btn btn-link btn-sm\"\r\n                            [routerLink]=\"['./', { contents: group.id }]\"\r\n                            queryParamsHandling=\"preserve\"\r\n                        >\r\n                            <clr-icon shape=\"view-list\"></clr-icon>\r\n                            {{ 'customer.view-group-members' | translate }}\r\n                        </a>\r\n                    </td>\r\n                    <td class=\"align-middle\">\r\n                        <button class=\"btn btn-link btn-sm\" (click)=\"update(group)\">\r\n                            <clr-icon shape=\"edit\"></clr-icon>\r\n                            {{ 'common.edit' | translate }}\r\n                        </button>\r\n                    </td>\r\n                    <td class=\"align-middle\">\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                                    class=\"button\"\r\n                                    vdrDropdownItem\r\n                                    (click)=\"delete(group.id)\"\r\n                                    [disabled]=\"!('DeleteCustomerGroup' | hasPermission)\"\r\n                                >\r\n                                    <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                                    {{ 'common.delete' | translate }}\r\n                                </button>\r\n                            </vdr-dropdown-menu>\r\n                        </vdr-dropdown>\r\n                    </td>\r\n                </tr>\r\n            </tbody>\r\n        </table>\r\n    </div>\r\n    <ng-template #emptyPlaceholder>\r\n        <vdr-empty-placeholder></vdr-empty-placeholder>\r\n    </ng-template>\r\n    <div class=\"group-members\" [class.expanded]=\"activeGroup$ | async\">\r\n        <ng-container *ngIf=\"activeGroup$ | async as activeGroup\">\r\n            <div class=\"flex\">\r\n                <div class=\"header-title-row\">{{ activeGroup.name }} ({{ membersTotal$ | async }})</div>\r\n                <div class=\"flex-spacer\"></div>\r\n                <button type=\"button\" class=\"close-button\" (click)=\"closeMembers()\">\r\n                    <clr-icon shape=\"close\"></clr-icon>\r\n                </button>\r\n            </div>\r\n            <div class=\"controls\">\r\n                <vdr-dropdown>\r\n                    <button\r\n                        type=\"button\"\r\n                        class=\"btn btn-secondary btn-sm\"\r\n                        vdrDropdownTrigger\r\n                        [disabled]=\"selectedCustomerIds.length === 0\"\r\n                    >\r\n                        {{ 'common.with-selected' | 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)=\"removeFromGroup(activeGroup, selectedCustomerIds)\"\r\n                            vdrDropdownItem\r\n                            [disabled]=\"!('UpdateCustomerGroup' | hasPermission)\"\r\n                        >\r\n                            <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                            {{ 'customer.remove-from-group' | translate }}\r\n                        </button>\r\n                    </vdr-dropdown-menu>\r\n                </vdr-dropdown>\r\n                <button class=\"btn btn-secondary btn-sm\" (click)=\"addToGroup(activeGroup)\">\r\n                    {{ 'customer.add-customers-to-group' | translate: { groupName: activeGroup.name } }}\r\n                </button>\r\n            </div>\r\n            <vdr-customer-group-member-list\r\n                [members]=\"members$ | async\"\r\n                [route]=\"route\"\r\n                [totalItems]=\"membersTotal$ | async\"\r\n                [selectedMemberIds]=\"selectedCustomerIds\"\r\n                (selectionChange)=\"selectedCustomerIds = $event\"\r\n                (fetchParamsChange)=\"fetchGroupMembers$.next($event)\"\r\n            ></vdr-customer-group-member-list>\r\n        </ng-container>\r\n    </div>\r\n</div>\r\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     styles: [".group-wrapper{display:flex;height:calc(100% - 50px)}.group-wrapper .group-list{flex:1;overflow:auto;margin-top:0}.group-wrapper .group-list tr.active{background-color:var(--color-component-bg-200)}.group-wrapper .group-list.expanded{width:calc(100% - 40vw)}.group-members{height:100%;width:0;opacity:0;visibility:hidden;overflow:auto;transition:width .3s,opacity .2s .3s,visibility 0s .3s}.group-members.expanded{width:40vw;visibility:visible;opacity:1;padding-left:12px}.group-members .close-button{margin:0;background:none;border:none;cursor:pointer}.group-members ::ng-deep table.table{margin-top:0}.group-members ::ng-deep table.table th{top:0}.group-members .controls{display:flex;justify-content:space-between}vdr-empty-placeholder{flex:1}\n"]
                 },] }