import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
import { HistoryEntryType, } from '@ishop/admin-ui/core';
export class OrderHistoryComponent {
    constructor() {
        this.addNote = new EventEmitter();
        this.updateNote = new EventEmitter();
        this.deleteNote = new EventEmitter();
        this.note = '';
        this.noteIsPrivate = true;
        this.expanded = false;
        this.type = HistoryEntryType;
    }
    getDisplayType(entry) {
        if (entry.type === HistoryEntryType.ORDER_STATE_TRANSITION) {
            if (entry.data.to === 'Delivered') {
                return 'success';
            }
            if (entry.data.to === 'Cancelled') {
                return 'error';
            }
        }
        if (entry.type === HistoryEntryType.ORDER_FULFILLMENT_TRANSITION) {
            if (entry.data.to === 'Delivered') {
                return 'success';
            }
        }
        if (entry.type === HistoryEntryType.ORDER_PAYMENT_TRANSITION) {
            if (entry.data.to === 'Declined' || entry.data.to === 'Cancelled') {
                return 'error';
            }
        }
        if (entry.type === HistoryEntryType.ORDER_CANCELLATION) {
            return 'error';
        }
        if (entry.type === HistoryEntryType.ORDER_REFUND_TRANSITION) {
            return 'warning';
        }
        return 'default';
    }
    getTimelineIcon(entry) {
        if (entry.type === HistoryEntryType.ORDER_STATE_TRANSITION) {
            if (entry.data.to === 'Delivered') {
                return ['success-standard', 'is-solid'];
            }
            if (entry.data.to === 'Cancelled') {
                return 'ban';
            }
        }
        if (entry.type === HistoryEntryType.ORDER_PAYMENT_TRANSITION) {
            if (entry.data.to === 'Settled') {
                return 'credit-card';
            }
        }
        if (entry.type === HistoryEntryType.ORDER_NOTE) {
            return 'note';
        }
        if (entry.type === HistoryEntryType.ORDER_MODIFIED) {
            return 'pencil';
        }
        if (entry.type === HistoryEntryType.ORDER_FULFILLMENT_TRANSITION) {
            if (entry.data.to === 'Shipped') {
                return 'truck';
            }
            if (entry.data.to === 'Delivered') {
                return 'truck';
            }
        }
    }
    isFeatured(entry) {
        switch (entry.type) {
            case HistoryEntryType.ORDER_STATE_TRANSITION: {
                return (entry.data.to === 'Delivered' ||
                    entry.data.to === 'Cancelled' ||
                    entry.data.to === 'Settled');
            }
            case HistoryEntryType.ORDER_PAYMENT_TRANSITION:
                return entry.data.to === 'Settled' || entry.data.to === 'Cancelled';
            case HistoryEntryType.ORDER_FULFILLMENT_TRANSITION:
                return entry.data.to === 'Delivered' || entry.data.to === 'Shipped';
            case HistoryEntryType.ORDER_NOTE:
            case HistoryEntryType.ORDER_MODIFIED:
                return true;
            default:
                return false;
        }
    }
    getFulfillment(entry) {
        if ((entry.type === HistoryEntryType.ORDER_FULFILLMENT ||
            entry.type === HistoryEntryType.ORDER_FULFILLMENT_TRANSITION) &&
            this.order.fulfillments) {
            return this.order.fulfillments.find(f => f.id === entry.data.fulfillmentId);
        }
    }
    getPayment(entry) {
        if (entry.type === HistoryEntryType.ORDER_PAYMENT_TRANSITION && this.order.payments) {
            return this.order.payments.find(p => p.id === entry.data.paymentId);
        }
    }
    getCancelledItems(entry) {
        const itemMap = new Map();
        const cancelledItemIds = entry.data.orderItemIds;
        for (const line of this.order.lines) {
            for (const item of line.items) {
                if (cancelledItemIds.includes(item.id)) {
                    const count = itemMap.get(line.productVariant.name);
                    if (count != null) {
                        itemMap.set(line.productVariant.name, count + 1);
                    }
                    else {
                        itemMap.set(line.productVariant.name, 1);
                    }
                }
            }
        }
        return Array.from(itemMap.entries()).map(([name, quantity]) => ({ name, quantity }));
    }
    getModification(id) {
        return this.order.modifications.find(m => m.id === id);
    }
    getName(entry) {
        const { administrator } = entry;
        if (administrator) {
            return `${administrator.firstName} ${administrator.lastName}`;
        }
        else {
            const customer = this.order.customer;
            if (customer) {
                return `${customer.firstName} ${customer.lastName}`;
            }
        }
        return '';
    }
    addNoteToOrder() {
        this.addNote.emit({ note: this.note, isPublic: !this.noteIsPrivate });
        this.note = '';
        this.noteIsPrivate = true;
    }
}
OrderHistoryComponent.decorators = [
    { type: Component, args: [{
                selector: 'vdr-order-history',
                template: "<h4>{{ 'order.order-history' | translate }}</h4>\r\n<div class=\"entry-list\" [class.expanded]=\"expanded\">\r\n    <vdr-timeline-entry iconShape=\"note\" displayType=\"muted\" [featured]=\"true\">\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)=\"addNoteToOrder()\">\r\n                {{ 'common.add-note' | translate }}\r\n            </button>\r\n        </div>\r\n        <div class=\"visibility-select\">\r\n            <clr-checkbox-wrapper>\r\n                <input type=\"checkbox\" clrCheckbox [(ngModel)]=\"noteIsPrivate\" />\r\n                <label>{{ 'order.note-is-private' | translate }}</label>\r\n            </clr-checkbox-wrapper>\r\n            <span *ngIf=\"noteIsPrivate\" class=\"private\">\r\n                {{ 'order.note-only-visible-to-administrators' | translate }}\r\n            </span>\r\n            <span *ngIf=\"!noteIsPrivate\" class=\"public\">\r\n                {{ 'order.note-visible-to-customer' | translate }}\r\n            </span>\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        [collapsed]=\"!expanded && !isFeatured(entry)\"\r\n        (expandClick)=\"expanded = !expanded\"\r\n    >\r\n        <ng-container [ngSwitch]=\"entry.type\">\r\n            <ng-container *ngSwitchCase=\"type.ORDER_STATE_TRANSITION\">\r\n                <div class=\"title\" *ngIf=\"entry.data.to === 'Delivered'\">\r\n                    {{ 'order.history-order-fulfilled' | translate }}\r\n                </div>\r\n                <div class=\"title\" *ngIf=\"entry.data.to === 'Cancelled'\">\r\n                    {{ 'order.history-order-cancelled' | translate }}\r\n                </div>\r\n                <ng-template [ngIf]=\"entry.data.to !== 'Cancelled' && entry.data.to !== 'Delivered'\">\r\n                    {{\r\n                        'order.history-order-transition'\r\n                            | translate: { from: entry.data.from, to: entry.data.to }\r\n                    }}\r\n                </ng-template>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"type.ORDER_MODIFIED\">\r\n                <div class=\"title\">\r\n                    {{ 'order.history-order-modified' | translate }}\r\n                </div>\r\n                <ng-container *ngIf=\"getModification(entry.data.modificationId) as modification\">\r\n                    {{ 'order.modify-order-price-difference' | translate }}:\r\n                    <strong>{{ modification.priceChange | localeCurrency: order.currencyCode }}</strong>\r\n                    <vdr-chip colorType=\"success\" *ngIf=\"modification.isSettled\">{{\r\n                        'order.modification-settled' | translate\r\n                    }}</vdr-chip>\r\n                    <vdr-chip colorType=\"error\" *ngIf=\"!modification.isSettled\">{{\r\n                        'order.modification-not-settled' | translate\r\n                    }}</vdr-chip>\r\n                    <vdr-history-entry-detail>\r\n                        <vdr-modification-detail\r\n                            [order]=\"order\"\r\n                            [modification]=\"modification\"\r\n                        ></vdr-modification-detail>\r\n                    </vdr-history-entry-detail>\r\n                </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"type.ORDER_PAYMENT_TRANSITION\">\r\n                <ng-container *ngIf=\"entry.data.to === 'Settled'; else regularPaymentTransition\">\r\n                    <div class=\"title\">\r\n                        {{ 'order.history-payment-settled' | translate }}\r\n                    </div>\r\n                    {{ 'order.transaction-id' | translate }}: {{ getPayment(entry)?.transactionId }}\r\n                    <vdr-history-entry-detail *ngIf=\"getPayment(entry) as payment\">\r\n                        <vdr-payment-detail\r\n                            [payment]=\"payment\"\r\n                            [currencyCode]=\"order.currencyCode\"\r\n                        ></vdr-payment-detail>\r\n                    </vdr-history-entry-detail>\r\n                </ng-container>\r\n                <ng-template #regularPaymentTransition>\r\n                    {{\r\n                        'order.history-payment-transition'\r\n                            | translate\r\n                                : {\r\n                                      from: entry.data.from,\r\n                                      to: entry.data.to,\r\n                                      id: getPayment(entry)?.transactionId\r\n                                  }\r\n                    }}\r\n                </ng-template>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"type.ORDER_REFUND_TRANSITION\">\r\n                {{\r\n                    'order.history-refund-transition'\r\n                        | translate: { from: entry.data.from, to: entry.data.to, id: entry.data.refundId }\r\n                }}\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"type.ORDER_CANCELLATION\">\r\n                {{ 'order.history-items-cancelled' | translate: { count: entry.data.orderItemIds.length } }}\r\n                <vdr-history-entry-detail *ngIf=\"getCancelledItems(entry) as items\">\r\n                    <vdr-labeled-data [label]=\"'order.cancellation-reason' | translate\">\r\n                        {{ entry.data.reason }}\r\n                    </vdr-labeled-data>\r\n                    <vdr-labeled-data [label]=\"'order.contents' | translate\">\r\n                        <vdr-simple-item-list [items]=\"items\"></vdr-simple-item-list>\r\n                    </vdr-labeled-data>\r\n                </vdr-history-entry-detail>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"type.ORDER_FULFILLMENT\">\r\n                {{ 'order.history-fulfillment-created' | translate }}\r\n                <vdr-history-entry-detail *ngIf=\"getFulfillment(entry) as fulfillment\">\r\n                    <vdr-fulfillment-detail\r\n                        [fulfillmentId]=\"fulfillment.id\"\r\n                        [order]=\"order\"\r\n                    ></vdr-fulfillment-detail>\r\n                </vdr-history-entry-detail>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"type.ORDER_FULFILLMENT_TRANSITION\">\r\n                <ng-container *ngIf=\"entry.data.to === 'Delivered'\">\r\n                    <div class=\"title\">\r\n                        {{ 'order.history-fulfillment-delivered' | translate }}\r\n                    </div>\r\n                    {{ 'order.tracking-code' | translate }}: {{ getFulfillment(entry)?.trackingCode }}\r\n                </ng-container>\r\n                <ng-container *ngIf=\"entry.data.to === 'Shipped'\">\r\n                    <div class=\"title\">\r\n                        {{ 'order.history-fulfillment-shipped' | translate }}\r\n                    </div>\r\n                    {{ 'order.tracking-code' | translate }}: {{ getFulfillment(entry)?.trackingCode }}\r\n                </ng-container>\r\n                <ng-container *ngIf=\"entry.data.to !== 'Delivered' && entry.data.to !== 'Shipped'\">\r\n                    {{\r\n                        'order.history-fulfillment-transition'\r\n                            | translate: { from: entry.data.from, to: entry.data.to }\r\n                    }}\r\n                </ng-container>\r\n                <vdr-history-entry-detail *ngIf=\"getFulfillment(entry) as fulfillment\">\r\n                    <vdr-fulfillment-detail\r\n                        [fulfillmentId]=\"fulfillment.id\"\r\n                        [order]=\"order\"\r\n                    ></vdr-fulfillment-detail>\r\n                </vdr-history-entry-detail>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"type.ORDER_NOTE\">\r\n                <div class=\"flex\">\r\n                    <div class=\"note-text\">\r\n                        <span *ngIf=\"entry.isPublic\" class=\"note-visibility public\">{{\r\n                            'common.public' | translate\r\n                        }}</span>\r\n                        <span *ngIf=\"!entry.isPublic\" class=\"note-visibility private\">{{\r\n                            'common.private' | translate\r\n                        }}</span>\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]=\"!('UpdateOrder' | 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]=\"!('UpdateOrder' | 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 *ngSwitchCase=\"type.ORDER_COUPON_APPLIED\">\r\n                {{ 'order.history-coupon-code-applied' | translate }}:\r\n                <vdr-chip>\r\n                    <a [routerLink]=\"['/marketing', 'promotions', entry.data.promotionId]\">{{\r\n                        entry.data.couponCode\r\n                    }}</a>\r\n                </vdr-chip>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"type.ORDER_COUPON_REMOVED\">\r\n                {{ 'order.history-coupon-code-removed' | translate }}:\r\n                <vdr-chip\r\n                    ><span class=\"cancelled-coupon-code\">{{ entry.data.couponCode }}</span></vdr-chip\r\n                >\r\n            </ng-container>\r\n        </ng-container>\r\n    </vdr-timeline-entry>\r\n    <vdr-timeline-entry [isLast]=\"true\" [createdAt]=\"order.createdAt\" [featured]=\"true\">\r\n        <div class=\"title\">\r\n            {{ 'order.history-order-created' | translate }}\r\n        </div>\r\n    </vdr-timeline-entry>\r\n</div>\r\n",
                changeDetection: ChangeDetectionStrategy.OnPush,
                styles: [":host{margin-top:48px;display:block}.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}.visibility-select{display:flex;justify-content:space-between;align-items:baseline}.visibility-select .public{color:var(--color-warning-500)}.visibility-select .private{color:var(--color-success-500)}textarea.note{flex:1;height:36px;border-radius:3px;margin-right:6px}.note-text{color:var(--color-grey-800);white-space:pre-wrap}.cancelled-coupon-code{text-decoration:line-through}.note-visibility{text-transform:lowercase}.note-visibility.public{color:var(--color-warning-500)}.note-visibility.private{color:var(--color-success-500)}"]
            },] }
];
OrderHistoryComponent.propDecorators = {
    order: [{ type: Input }],
    history: [{ type: Input }],
    addNote: [{ type: Output }],
    updateNote: [{ type: Output }],
    deleteNote: [{ type: Output }]
};
//# sourceMappingURL=data:application/json;base64, 