import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@clr/angular";
import * as i2 from "@angular/common";
import * as i3 from "@angular/cdk/bidi";
import * as i4 from "@vendure/admin-ui/core";
import * as i5 from "../payment-state-label/payment-state-label.component";
import * as i6 from "../refund-state-label/refund-state-label.component";
import * as i7 from "../payment-detail/payment-detail.component";
import * as i8 from "@ngx-translate/core";
export class OrderPaymentCardComponent {
    constructor() {
        this.settlePayment = new EventEmitter();
        this.transitionPaymentState = new EventEmitter();
        this.settleRefund = new EventEmitter();
    }
    refundHasMetadata(refund) {
        return !!refund && Object.keys(refund.metadata).length > 0;
    }
    nextOtherStates() {
        if (!this.payment) {
            return [];
        }
        return this.payment.nextStates.filter(s => s !== 'Settled' && s !== 'Error');
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: OrderPaymentCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: OrderPaymentCardComponent, selector: "vdr-order-payment-card", inputs: { payment: "payment", currencyCode: "currencyCode" }, outputs: { settlePayment: "settlePayment", transitionPaymentState: "transitionPaymentState", settleRefund: "settleRefund" }, ngImport: i0, template: "<div class=\"card\">\n    <div class=\"card-header payment-header\">\n        <div>\n            {{ 'order.payment' | translate }}\n            <ng-container *ngIf=\"payment.transactionId\">#{{ payment.transactionId }}</ng-container>\n        </div>\n        <div class=\"payment-state\">\n            <vdr-payment-state-label [state]=\"payment.state\"></vdr-payment-state-label>\n        </div>\n    </div>\n    <div class=\"card-block\">\n        <vdr-payment-detail [payment]=\"payment\" [currencyCode]=\"currencyCode\"></vdr-payment-detail>\n    </div>\n    <ng-container *ngFor=\"let refund of payment.refunds\">\n        <div class=\"card-header payment-header\">\n            <clr-icon shape=\"redo\" class=\"refund-icon\" dir=\"down\"></clr-icon>\n            {{ 'order.refund' | translate }} #{{ refund.id }}\n            <div class=\"clr-flex-fill\"></div>\n            <vdr-refund-state-label [state]=\"refund.state\"></vdr-refund-state-label>\n        </div>\n        <div class=\"card-block\">\n            <vdr-labeled-data [label]=\"'common.created-at' | translate\">\n                {{ refund.createdAt | localeDate: 'medium' }}\n            </vdr-labeled-data>\n            <vdr-labeled-data [label]=\"'order.refund-total' | translate\">\n                {{ refund.total | localeCurrency: currencyCode }}\n            </vdr-labeled-data>\n            <vdr-labeled-data [label]=\"'order.transaction-id' | translate\" *ngIf=\"refund.transactionId\">\n                {{ refund.transactionId }}\n            </vdr-labeled-data>\n            <vdr-labeled-data [label]=\"'order.refund-reason' | translate\" *ngIf=\"refund.reason\">\n                {{ refund.reason }}\n            </vdr-labeled-data>\n            <vdr-labeled-data [label]=\"'order.refund-metadata' | translate\" *ngIf=\"refundHasMetadata(refund)\">\n                <vdr-object-tree [value]=\"refund.metadata\"></vdr-object-tree>\n            </vdr-labeled-data>\n        </div>\n        <div class=\"card-footer\" *ngIf=\"refund.state === 'Pending'\">\n            <button class=\"btn btn-sm btn-primary\" (click)=\"settleRefund.emit(refund)\">\n                {{ 'order.settle-refund' | translate }}\n            </button>\n        </div>\n    </ng-container>\n    <div class=\"card-footer\" *ngIf=\"payment.nextStates.length\">\n        <button\n            class=\"btn btn-sm btn-primary\"\n            *ngIf=\"payment.nextStates.includes('Settled')\"\n            (click)=\"settlePayment.emit(payment)\"\n        >\n            {{ 'order.settle-payment' | translate }}\n        </button>\n        <vdr-dropdown>\n            <button class=\"icon-button\" vdrDropdownTrigger>\n                <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\n            </button>\n            <vdr-dropdown-menu vdrPosition=\"bottom-right\">\n                <ng-container *ngFor=\"let nextState of nextOtherStates()\">\n                    <button\n                        type=\"button\"\n                        vdrDropdownItem\n                        (click)=\"transitionPaymentState.emit({ payment: payment, state: nextState })\"\n                    >\n                        <ng-container *ngIf=\"nextState !== 'Cancelled'; else cancel\">\n                            <clr-icon shape=\"step-forward-2\"></clr-icon>\n                            {{\n                                'order.transition-to-state'\n                                    | translate: { state: (nextState | stateI18nToken | translate) }\n                            }}\n                        </ng-container>\n                        <ng-template #cancel>\n                            <clr-icon shape=\"error-standard\" class=\"is-error\"></clr-icon>\n                            {{ 'order.cancel-payment' | translate }}\n                        </ng-template>\n                    </button>\n                </ng-container>\n            </vdr-dropdown-menu>\n        </vdr-dropdown>\n    </div>\n</div>\n", styles: [".payment-header{display:flex;justify-content:space-between;align-items:center}.refund-icon{margin-inline-end:6px;color:var(--color-grey-400)}.card-footer{display:flex;align-items:center;justify-content:flex-end}\n"], dependencies: [{ kind: "directive", type: i1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: i4.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i4.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i4.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: i4.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "component", type: i4.LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "component", type: i4.ObjectTreeComponent, selector: "vdr-object-tree", inputs: ["value", "isArrayItem"] }, { kind: "component", type: i5.PaymentStateLabelComponent, selector: "vdr-payment-state-label", inputs: ["state"] }, { kind: "component", type: i6.RefundStateLabelComponent, selector: "vdr-refund-state-label", inputs: ["state"] }, { kind: "component", type: i7.PaymentDetailComponent, selector: "vdr-payment-detail", inputs: ["payment", "currencyCode"] }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }, { kind: "pipe", type: i4.StateI18nTokenPipe, name: "stateI18nToken" }, { kind: "pipe", type: i4.LocaleDatePipe, name: "localeDate" }, { kind: "pipe", type: i4.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: OrderPaymentCardComponent, decorators: [{
            type: Component,
            args: [{ selector: 'vdr-order-payment-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"card\">\n    <div class=\"card-header payment-header\">\n        <div>\n            {{ 'order.payment' | translate }}\n            <ng-container *ngIf=\"payment.transactionId\">#{{ payment.transactionId }}</ng-container>\n        </div>\n        <div class=\"payment-state\">\n            <vdr-payment-state-label [state]=\"payment.state\"></vdr-payment-state-label>\n        </div>\n    </div>\n    <div class=\"card-block\">\n        <vdr-payment-detail [payment]=\"payment\" [currencyCode]=\"currencyCode\"></vdr-payment-detail>\n    </div>\n    <ng-container *ngFor=\"let refund of payment.refunds\">\n        <div class=\"card-header payment-header\">\n            <clr-icon shape=\"redo\" class=\"refund-icon\" dir=\"down\"></clr-icon>\n            {{ 'order.refund' | translate }} #{{ refund.id }}\n            <div class=\"clr-flex-fill\"></div>\n            <vdr-refund-state-label [state]=\"refund.state\"></vdr-refund-state-label>\n        </div>\n        <div class=\"card-block\">\n            <vdr-labeled-data [label]=\"'common.created-at' | translate\">\n                {{ refund.createdAt | localeDate: 'medium' }}\n            </vdr-labeled-data>\n            <vdr-labeled-data [label]=\"'order.refund-total' | translate\">\n                {{ refund.total | localeCurrency: currencyCode }}\n            </vdr-labeled-data>\n            <vdr-labeled-data [label]=\"'order.transaction-id' | translate\" *ngIf=\"refund.transactionId\">\n                {{ refund.transactionId }}\n            </vdr-labeled-data>\n            <vdr-labeled-data [label]=\"'order.refund-reason' | translate\" *ngIf=\"refund.reason\">\n                {{ refund.reason }}\n            </vdr-labeled-data>\n            <vdr-labeled-data [label]=\"'order.refund-metadata' | translate\" *ngIf=\"refundHasMetadata(refund)\">\n                <vdr-object-tree [value]=\"refund.metadata\"></vdr-object-tree>\n            </vdr-labeled-data>\n        </div>\n        <div class=\"card-footer\" *ngIf=\"refund.state === 'Pending'\">\n            <button class=\"btn btn-sm btn-primary\" (click)=\"settleRefund.emit(refund)\">\n                {{ 'order.settle-refund' | translate }}\n            </button>\n        </div>\n    </ng-container>\n    <div class=\"card-footer\" *ngIf=\"payment.nextStates.length\">\n        <button\n            class=\"btn btn-sm btn-primary\"\n            *ngIf=\"payment.nextStates.includes('Settled')\"\n            (click)=\"settlePayment.emit(payment)\"\n        >\n            {{ 'order.settle-payment' | translate }}\n        </button>\n        <vdr-dropdown>\n            <button class=\"icon-button\" vdrDropdownTrigger>\n                <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\n            </button>\n            <vdr-dropdown-menu vdrPosition=\"bottom-right\">\n                <ng-container *ngFor=\"let nextState of nextOtherStates()\">\n                    <button\n                        type=\"button\"\n                        vdrDropdownItem\n                        (click)=\"transitionPaymentState.emit({ payment: payment, state: nextState })\"\n                    >\n                        <ng-container *ngIf=\"nextState !== 'Cancelled'; else cancel\">\n                            <clr-icon shape=\"step-forward-2\"></clr-icon>\n                            {{\n                                'order.transition-to-state'\n                                    | translate: { state: (nextState | stateI18nToken | translate) }\n                            }}\n                        </ng-container>\n                        <ng-template #cancel>\n                            <clr-icon shape=\"error-standard\" class=\"is-error\"></clr-icon>\n                            {{ 'order.cancel-payment' | translate }}\n                        </ng-template>\n                    </button>\n                </ng-container>\n            </vdr-dropdown-menu>\n        </vdr-dropdown>\n    </div>\n</div>\n", styles: [".payment-header{display:flex;justify-content:space-between;align-items:center}.refund-icon{margin-inline-end:6px;color:var(--color-grey-400)}.card-footer{display:flex;align-items:center;justify-content:flex-end}\n"] }]
        }], propDecorators: { payment: [{
                type: Input
            }], currencyCode: [{
                type: Input
            }], settlePayment: [{
                type: Output
            }], transitionPaymentState: [{
                type: Output
            }], settleRefund: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 