@vendure/admin-ui 1.8.4 → 1.9.0

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

@@ -1381,14 +1381,59 @@
         fetchParamsChange: [{ type: i0.Output }]
     };
 
+    var CustomerHistoryEntryHostComponent = /** @class */ (function () {
+        function CustomerHistoryEntryHostComponent(componentFactoryResolver, historyEntryComponentService) {
+            this.componentFactoryResolver = componentFactoryResolver;
+            this.historyEntryComponentService = historyEntryComponentService;
+            this.expandClick = new i0.EventEmitter();
+        }
+        CustomerHistoryEntryHostComponent.prototype.ngOnInit = function () {
+            var componentType = this.historyEntryComponentService.getComponent(this.entry.type);
+            var factory = this.componentFactoryResolver.resolveComponentFactory(componentType);
+            var componentRef = this.portalRef.createComponent(factory);
+            componentRef.instance.entry = this.entry;
+            componentRef.instance.customer = this.customer;
+            this.instance = componentRef.instance;
+            this.componentRef = componentRef;
+        };
+        CustomerHistoryEntryHostComponent.prototype.ngOnDestroy = function () {
+            var _a;
+            (_a = this.componentRef) === null || _a === void 0 ? void 0 : _a.destroy();
+        };
+        return CustomerHistoryEntryHostComponent;
+    }());
+    CustomerHistoryEntryHostComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'vdr-customer-history-entry-host',
+                    template: " <vdr-timeline-entry\n        [displayType]=\"instance.getDisplayType(entry)\"\n        [iconShape]=\"instance.getIconShape && instance.getIconShape(entry)\"\n        [createdAt]=\"entry.createdAt\"\n        [name]=\"instance.getName && instance.getName(entry)\"\n        [featured]=\"instance.isFeatured(entry)\"\n        [collapsed]=\"!expanded && !instance.isFeatured(entry)\"\n        (expandClick)=\"expandClick.emit()\"\n    >\n        <div #portal></div>\n    </vdr-timeline-entry>",
+                    exportAs: 'historyEntry'
+                },] }
+    ];
+    CustomerHistoryEntryHostComponent.ctorParameters = function () { return [
+        { type: i0.ComponentFactoryResolver },
+        { type: i2.HistoryEntryComponentService }
+    ]; };
+    CustomerHistoryEntryHostComponent.propDecorators = {
+        entry: [{ type: i0.Input }],
+        customer: [{ type: i0.Input }],
+        expanded: [{ type: i0.Input }],
+        expandClick: [{ type: i0.Output }],
+        portalRef: [{ type: i0.ViewChild, args: ['portal', { static: true, read: i0.ViewContainerRef },] }]
+    };
+
     var CustomerHistoryComponent = /** @class */ (function () {
-        function CustomerHistoryComponent() {
+        function CustomerHistoryComponent(historyEntryComponentService) {
+            this.historyEntryComponentService = historyEntryComponentService;
             this.addNote = new i0.EventEmitter();
             this.updateNote = new i0.EventEmitter();
             this.deleteNote = new i0.EventEmitter();
             this.note = '';
+            this.expanded = false;
             this.type = i2.HistoryEntryType;
         }
+        CustomerHistoryComponent.prototype.hasCustomComponent = function (type) {
+            return !!this.historyEntryComponentService.getComponent(type);
+        };
         CustomerHistoryComponent.prototype.getDisplayType = function (entry) {
             switch (entry.type) {
                 case i2.HistoryEntryType.CUSTOMER_VERIFIED:
@@ -1443,11 +1488,14 @@
     CustomerHistoryComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'vdr-customer-history',
-                    template: "<h4>{{ 'customer.customer-history' | translate }}</h4>\r\n<div class=\"entry-list\">\r\n    <vdr-timeline-entry iconShape=\"note\" displayType=\"muted\" *vdrIfPermissions=\"'UpdateCustomer'\">\r\n        <div class=\"note-entry\">\r\n            <textarea [(ngModel)]=\"note\" name=\"note\" class=\"note\"></textarea>\r\n            <button class=\"btn btn-secondary\" [disabled]=\"!note\" (click)=\"addNoteToCustomer()\">\r\n                {{ 'order.add-note' | translate }}\r\n            </button>\r\n        </div>\r\n    </vdr-timeline-entry>\r\n    <vdr-timeline-entry\r\n        *ngFor=\"let entry of history\"\r\n        [displayType]=\"getDisplayType(entry)\"\r\n        [iconShape]=\"getTimelineIcon(entry)\"\r\n        [createdAt]=\"entry.createdAt\"\r\n        [name]=\"getName(entry)\"\r\n        [featured]=\"isFeatured(entry)\"\r\n    >\r\n        <ng-container [ngSwitch]=\"entry.type\">\r\n            <ng-container *ngSwitchCase=\"type.CUSTOMER_REGISTERED\">\r\n                <div class=\"title\">\r\n                    {{ 'customer.history-customer-registered' | translate }}\r\n                </div>\r\n                <ng-container *ngIf=\"entry.data.strategy === 'native'; else namedStrategy\">\r\n                    {{ 'customer.history-using-native-auth-strategy' | translate }}\r\n                </ng-container>\r\n                <ng-template #namedStrategy>\r\n                    {{\r\n                    'customer.history-using-external-auth-strategy'\r\n                        | translate: { strategy: entry.data.strategy }\r\n                    }}\r\n                </ng-template>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"type.CUSTOMER_VERIFIED\">\r\n                <div class=\"title\">\r\n                    {{ 'customer.history-customer-verified' | translate }}\r\n                </div>\r\n                <ng-container *ngIf=\"entry.data.strategy === 'native'; else namedStrategy\">\r\n                    {{ 'customer.history-using-native-auth-strategy' | translate }}\r\n                </ng-container>\r\n                <ng-template #namedStrategy>\r\n                    {{\r\n                        'customer.history-using-external-auth-strategy'\r\n                            | translate: { strategy: entry.data.strategy }\r\n                    }}\r\n                </ng-template>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"type.CUSTOMER_DETAIL_UPDATED\">\r\n                <div class=\"flex\">\r\n                    {{ 'customer.history-customer-detail-updated' | translate }}\r\n                    <vdr-history-entry-detail>\r\n                        <vdr-object-tree [value]=\"entry.data.input\"></vdr-object-tree>\r\n                    </vdr-history-entry-detail>\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"type.CUSTOMER_ADDED_TO_GROUP\">\r\n                {{\r\n                    'customer.history-customer-added-to-group'\r\n                        | translate: { groupName: entry.data.groupName }\r\n                }}\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"type.CUSTOMER_REMOVED_FROM_GROUP\">\r\n                {{\r\n                    'customer.history-customer-removed-from-group'\r\n                        | translate: { groupName: entry.data.groupName }\r\n                }}\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"type.CUSTOMER_ADDRESS_CREATED\">\r\n                {{ 'customer.history-customer-address-created' | translate }}\r\n                <div class=\"flex\">\r\n                    <div class=\"address-string\">{{ entry.data.address }}</div>\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"type.CUSTOMER_ADDRESS_UPDATED\">\r\n                {{ 'customer.history-customer-address-updated' | translate }}\r\n                <div class=\"flex\">\r\n                    <div class=\"address-string\">{{ entry.data.address }}</div>\r\n                    <vdr-history-entry-detail>\r\n                        <vdr-object-tree [value]=\"entry.data.input\"></vdr-object-tree>\r\n                    </vdr-history-entry-detail>\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"type.CUSTOMER_ADDRESS_DELETED\">\r\n                {{ 'customer.history-customer-address-deleted' | translate }}\r\n                <div class=\"address-string\">{{ entry.data.address }}</div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"type.CUSTOMER_PASSWORD_UPDATED\">\r\n                {{ 'customer.history-customer-password-updated' | translate }}\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"type.CUSTOMER_PASSWORD_RESET_REQUESTED\">\r\n                {{ 'customer.history-customer-password-reset-requested' | translate }}\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"type.CUSTOMER_PASSWORD_RESET_VERIFIED\">\r\n                {{ 'customer.history-customer-password-reset-verified' | translate }}\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"type.CUSTOMER_EMAIL_UPDATE_REQUESTED\">\r\n                <div class=\"flex\">\r\n                    {{ 'customer.history-customer-email-update-requested' | translate }}\r\n                    <vdr-history-entry-detail>\r\n                        <vdr-labeled-data [label]=\"'customer.old-email-address' | translate\">{{\r\n                            entry.data.oldEmailAddress\r\n                        }}</vdr-labeled-data>\r\n                        <vdr-labeled-data [label]=\"'customer.new-email-address' | translate\">{{\r\n                            entry.data.newEmailAddress\r\n                        }}</vdr-labeled-data>\r\n                    </vdr-history-entry-detail>\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"type.CUSTOMER_EMAIL_UPDATE_VERIFIED\">\r\n                <div class=\"flex\">\r\n                    {{ 'customer.history-customer-email-update-verified' | translate }}\r\n                    <vdr-history-entry-detail>\r\n                        <vdr-labeled-data [label]=\"'customer.old-email-address' | translate\">{{\r\n                            entry.data.oldEmailAddress\r\n                        }}</vdr-labeled-data>\r\n                        <vdr-labeled-data [label]=\"'customer.new-email-address' | translate\">{{\r\n                            entry.data.newEmailAddress\r\n                        }}</vdr-labeled-data>\r\n                    </vdr-history-entry-detail>\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"type.CUSTOMER_NOTE\">\r\n                <div class=\"flex\">\r\n                    <div class=\"note-text\">\r\n                        {{ entry.data.note }}\r\n                    </div>\r\n                    <div class=\"flex-spacer\"></div>\r\n                    <vdr-dropdown>\r\n                        <button class=\"icon-button\" vdrDropdownTrigger>\r\n                            <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n                        </button>\r\n                        <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                            <button\r\n                                class=\"button\"\r\n                                vdrDropdownItem\r\n                                (click)=\"updateNote.emit(entry)\"\r\n                                [disabled]=\"!('UpdateCustomer' | hasPermission)\"\r\n                            >\r\n                                <clr-icon shape=\"edit\"></clr-icon>\r\n                                {{ 'common.edit' | translate }}\r\n                            </button>\r\n                            <div class=\"dropdown-divider\"></div>\r\n                            <button\r\n                                class=\"button\"\r\n                                vdrDropdownItem\r\n                                (click)=\"deleteNote.emit(entry)\"\r\n                                [disabled]=\"!('UpdateCustomer' | hasPermission)\"\r\n                            >\r\n                                <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                                {{ 'common.delete' | translate }}\r\n                            </button>\r\n                        </vdr-dropdown-menu>\r\n                    </vdr-dropdown>\r\n                </div>\r\n            </ng-container>\r\n        </ng-container>\r\n    </vdr-timeline-entry>\r\n    <vdr-timeline-entry [isLast]=\"true\"></vdr-timeline-entry>\r\n</div>\r\n",
+                    template: "<h4>{{ 'customer.customer-history' | translate }}</h4>\r\n<div class=\"entry-list\">\r\n    <vdr-timeline-entry iconShape=\"note\" displayType=\"muted\" *vdrIfPermissions=\"'UpdateCustomer'\">\r\n        <div class=\"note-entry\">\r\n            <textarea [(ngModel)]=\"note\" name=\"note\" class=\"note\"></textarea>\r\n            <button class=\"btn btn-secondary\" [disabled]=\"!note\" (click)=\"addNoteToCustomer()\">\r\n                {{ 'order.add-note' | translate }}\r\n            </button>\r\n        </div>\r\n    </vdr-timeline-entry>\r\n    <ng-container *ngFor=\"let entry of history\">\r\n        <vdr-customer-history-entry-host\r\n            *ngIf=\"hasCustomComponent(entry.type); else defaultComponents\"\r\n            [customer]=\"customer\"\r\n            [entry]=\"entry\"\r\n            [expanded]=\"expanded\"\r\n            (expandClick)=\"expanded = !expanded\"\r\n        ></vdr-customer-history-entry-host>\r\n        <ng-template #defaultComponents>\r\n            <vdr-timeline-entry\r\n                [displayType]=\"getDisplayType(entry)\"\r\n                [iconShape]=\"getTimelineIcon(entry)\"\r\n                [createdAt]=\"entry.createdAt\"\r\n                [name]=\"getName(entry)\"\r\n                [featured]=\"isFeatured(entry)\"\r\n            >\r\n                <ng-container [ngSwitch]=\"entry.type\">\r\n                    <ng-container *ngSwitchCase=\"type.CUSTOMER_REGISTERED\">\r\n                        <div class=\"title\">\r\n                            {{ 'customer.history-customer-registered' | translate }}\r\n                        </div>\r\n                        <ng-container *ngIf=\"entry.data.strategy === 'native'; else namedStrategy\">\r\n                            {{ 'customer.history-using-native-auth-strategy' | translate }}\r\n                        </ng-container>\r\n                        <ng-template #namedStrategy>\r\n                            {{\r\n                                'customer.history-using-external-auth-strategy'\r\n                                    | translate: { strategy: entry.data.strategy }\r\n                            }}\r\n                        </ng-template>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.CUSTOMER_VERIFIED\">\r\n                        <div class=\"title\">\r\n                            {{ 'customer.history-customer-verified' | translate }}\r\n                        </div>\r\n                        <ng-container *ngIf=\"entry.data.strategy === 'native'; else namedStrategy\">\r\n                            {{ 'customer.history-using-native-auth-strategy' | translate }}\r\n                        </ng-container>\r\n                        <ng-template #namedStrategy>\r\n                            {{\r\n                                'customer.history-using-external-auth-strategy'\r\n                                    | translate: { strategy: entry.data.strategy }\r\n                            }}\r\n                        </ng-template>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.CUSTOMER_DETAIL_UPDATED\">\r\n                        <div class=\"flex\">\r\n                            {{ 'customer.history-customer-detail-updated' | translate }}\r\n                            <vdr-history-entry-detail>\r\n                                <vdr-object-tree [value]=\"entry.data.input\"></vdr-object-tree>\r\n                            </vdr-history-entry-detail>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.CUSTOMER_ADDED_TO_GROUP\">\r\n                        {{\r\n                            'customer.history-customer-added-to-group'\r\n                                | translate: { groupName: entry.data.groupName }\r\n                        }}\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.CUSTOMER_REMOVED_FROM_GROUP\">\r\n                        {{\r\n                            'customer.history-customer-removed-from-group'\r\n                                | translate: { groupName: entry.data.groupName }\r\n                        }}\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.CUSTOMER_ADDRESS_CREATED\">\r\n                        {{ 'customer.history-customer-address-created' | translate }}\r\n                        <div class=\"flex\">\r\n                            <div class=\"address-string\">{{ entry.data.address }}</div>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.CUSTOMER_ADDRESS_UPDATED\">\r\n                        {{ 'customer.history-customer-address-updated' | translate }}\r\n                        <div class=\"flex\">\r\n                            <div class=\"address-string\">{{ entry.data.address }}</div>\r\n                            <vdr-history-entry-detail>\r\n                                <vdr-object-tree [value]=\"entry.data.input\"></vdr-object-tree>\r\n                            </vdr-history-entry-detail>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.CUSTOMER_ADDRESS_DELETED\">\r\n                        {{ 'customer.history-customer-address-deleted' | translate }}\r\n                        <div class=\"address-string\">{{ entry.data.address }}</div>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.CUSTOMER_PASSWORD_UPDATED\">\r\n                        {{ 'customer.history-customer-password-updated' | translate }}\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.CUSTOMER_PASSWORD_RESET_REQUESTED\">\r\n                        {{ 'customer.history-customer-password-reset-requested' | translate }}\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.CUSTOMER_PASSWORD_RESET_VERIFIED\">\r\n                        {{ 'customer.history-customer-password-reset-verified' | translate }}\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.CUSTOMER_EMAIL_UPDATE_REQUESTED\">\r\n                        <div class=\"flex\">\r\n                            {{ 'customer.history-customer-email-update-requested' | translate }}\r\n                            <vdr-history-entry-detail>\r\n                                <vdr-labeled-data [label]=\"'customer.old-email-address' | translate\">{{\r\n                                    entry.data.oldEmailAddress\r\n                                }}</vdr-labeled-data>\r\n                                <vdr-labeled-data [label]=\"'customer.new-email-address' | translate\">{{\r\n                                    entry.data.newEmailAddress\r\n                                }}</vdr-labeled-data>\r\n                            </vdr-history-entry-detail>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.CUSTOMER_EMAIL_UPDATE_VERIFIED\">\r\n                        <div class=\"flex\">\r\n                            {{ 'customer.history-customer-email-update-verified' | translate }}\r\n                            <vdr-history-entry-detail>\r\n                                <vdr-labeled-data [label]=\"'customer.old-email-address' | translate\">{{\r\n                                    entry.data.oldEmailAddress\r\n                                }}</vdr-labeled-data>\r\n                                <vdr-labeled-data [label]=\"'customer.new-email-address' | translate\">{{\r\n                                    entry.data.newEmailAddress\r\n                                }}</vdr-labeled-data>\r\n                            </vdr-history-entry-detail>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"type.CUSTOMER_NOTE\">\r\n                        <div class=\"flex\">\r\n                            <div class=\"note-text\">\r\n                                {{ entry.data.note }}\r\n                            </div>\r\n                            <div class=\"flex-spacer\"></div>\r\n                            <vdr-dropdown>\r\n                                <button class=\"icon-button\" vdrDropdownTrigger>\r\n                                    <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n                                </button>\r\n                                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                                    <button\r\n                                        class=\"button\"\r\n                                        vdrDropdownItem\r\n                                        (click)=\"updateNote.emit(entry)\"\r\n                                        [disabled]=\"!('UpdateCustomer' | hasPermission)\"\r\n                                    >\r\n                                        <clr-icon shape=\"edit\"></clr-icon>\r\n                                        {{ 'common.edit' | translate }}\r\n                                    </button>\r\n                                    <div class=\"dropdown-divider\"></div>\r\n                                    <button\r\n                                        class=\"button\"\r\n                                        vdrDropdownItem\r\n                                        (click)=\"deleteNote.emit(entry)\"\r\n                                        [disabled]=\"!('UpdateCustomer' | hasPermission)\"\r\n                                    >\r\n                                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                                        {{ 'common.delete' | translate }}\r\n                                    </button>\r\n                                </vdr-dropdown-menu>\r\n                            </vdr-dropdown>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchDefault>\r\n                        <div class=\"title\">\r\n                            {{ entry.type | translate }}\r\n                        </div>\r\n                        <vdr-history-entry-detail *ngIf=\"entry.data\">\r\n                            <vdr-object-tree [value]=\"entry.data\"></vdr-object-tree>\r\n                        </vdr-history-entry-detail>\r\n                    </ng-container>\r\n                </ng-container>\r\n            </vdr-timeline-entry>\r\n        </ng-template>\r\n    </ng-container>\r\n    <vdr-timeline-entry [isLast]=\"true\"></vdr-timeline-entry>\r\n</div>\r\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     styles: [".entry-list{margin-top:24px;margin-left:24px;margin-right:12px}.note-entry{display:flex;align-items:center}.note-entry .note{flex:1}.note-entry button{margin:0}textarea.note{flex:1;height:36px;border-radius:3px;margin-right:6px}.note-text{color:var(--color-text-100);white-space:pre-wrap}.address-string{font-size:smaller;color:var(--color-text-200)}\n"]
                 },] }
     ];
+    CustomerHistoryComponent.ctorParameters = function () { return [
+        { type: i2.HistoryEntryComponentService }
+    ]; };
     CustomerHistoryComponent.propDecorators = {
         customer: [{ type: i0.Input }],
         history: [{ type: i0.Input }],
@@ -1647,6 +1695,7 @@
                         SelectCustomerGroupDialogComponent,
                         CustomerHistoryComponent,
                         AddressDetailDialogComponent,
+                        CustomerHistoryEntryHostComponent,
                     ],
                     exports: [AddressCardComponent],
                 },] }
@@ -1666,6 +1715,7 @@
     exports.CustomerGroupListComponent = CustomerGroupListComponent;
     exports.CustomerGroupMemberListComponent = CustomerGroupMemberListComponent;
     exports.CustomerHistoryComponent = CustomerHistoryComponent;
+    exports.CustomerHistoryEntryHostComponent = CustomerHistoryEntryHostComponent;
     exports.CustomerListComponent = CustomerListComponent;
     exports.CustomerModule = CustomerModule;
     exports.CustomerResolver = CustomerResolver;