import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { AdjustmentType } from '@ishop/admin-ui/core';
export class OrderTableComponent {
    constructor() {
        this.orderLineCustomFieldsVisible = false;
        this.customFieldsForLine = {};
    }
    get visibleOrderLineCustomFields() {
        return this.orderLineCustomFieldsVisible ? this.orderLineCustomFields : [];
    }
    get showElided() {
        return !this.orderLineCustomFieldsVisible && 0 < this.orderLineCustomFields.length;
    }
    ngOnInit() {
        this.orderLineCustomFieldsVisible = this.orderLineCustomFields.length < 2;
        this.getLineCustomFields();
    }
    toggleOrderLineCustomFields() {
        this.orderLineCustomFieldsVisible = !this.orderLineCustomFieldsVisible;
    }
    getLineDiscounts(line) {
        return line.discounts.filter(a => a.type === AdjustmentType.PROMOTION);
    }
    getLineCustomFields() {
        const formGroup = new FormGroup({});
        for (const line of this.order.lines) {
            const result = this.orderLineCustomFields
                .map(config => {
                const value = line.customFields[config.name];
                formGroup.addControl(config.name, new FormControl(value));
                return {
                    config,
                    formGroup,
                    value,
                };
            })
                .filter(field => {
                return this.orderLineCustomFieldsVisible ? true : field.value != null;
            });
            this.customFieldsForLine[line.id] = result;
        }
    }
    getPromotionLink(promotion) {
        const id = promotion.adjustmentSource.split(':')[1];
        return ['/marketing', 'promotions', id];
    }
    getCouponCodeForAdjustment(order, promotionAdjustment) {
        const id = promotionAdjustment.adjustmentSource.split(':')[1];
        const promotion = order.promotions.find(p => p.id === id);
        if (promotion) {
            return promotion.couponCode || undefined;
        }
    }
}
OrderTableComponent.decorators = [
    { type: Component, args: [{
                selector: 'vdr-order-table',
                template: "<table class=\"order-table table\">\r\n    <thead>\r\n        <tr>\r\n            <th></th>\r\n            <th>{{ 'order.product-name' | translate }}</th>\r\n            <th>{{ 'order.product-sku' | translate }}</th>\r\n            <th>{{ 'order.unit-price' | translate }}</th>\r\n            <th>{{ 'order.quantity' | translate }}</th>\r\n            <th>{{ 'order.total' | translate }}</th>\r\n        </tr>\r\n    </thead>\r\n    <tbody>\r\n        <ng-container *ngFor=\"let line of order.lines\">\r\n            <tr class=\"order-line\" [class.is-cancelled]=\"line.quantity === 0\">\r\n                <td class=\"align-middle thumb\">\r\n                    <img *ngIf=\"line.featuredAsset\" [src]=\"line.featuredAsset | assetPreview: 'tiny'\" />\r\n                </td>\r\n                <td class=\"align-middle name\">{{ line.productVariant.name }}</td>\r\n                <td class=\"align-middle sku\">{{ line.productVariant.sku }}</td>\r\n                <td class=\"align-middle unit-price\">\r\n                    {{ line.unitPriceWithTax | localeCurrency: order.currencyCode }}\r\n                    <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                        {{ line.unitPrice | localeCurrency: order.currencyCode }}\r\n                    </div>\r\n                </td>\r\n                <td class=\"align-middle quantity\">\r\n                    {{ line.quantity }}\r\n                    <vdr-line-refunds [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\r\n                    <vdr-line-fulfillment [line]=\"line\" [orderState]=\"order.state\"></vdr-line-fulfillment>\r\n                </td>\r\n                <td class=\"align-middle total\">\r\n                    {{ line.linePriceWithTax | localeCurrency: order.currencyCode }}\r\n                    <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                        {{ line.linePrice | localeCurrency: order.currencyCode }}\r\n                    </div>\r\n\r\n                    <ng-container *ngIf=\"getLineDiscounts(line) as discounts\">\r\n                        <vdr-dropdown *ngIf=\"discounts.length\">\r\n                            <div class=\"promotions-label\" vdrDropdownTrigger>\r\n                                {{ 'order.promotions-applied' | translate }}\r\n                            </div>\r\n                            <vdr-dropdown-menu>\r\n                                <div class=\"line-promotion\" *ngFor=\"let discount of discounts\">\r\n                                    <a class=\"promotion-name\" [routerLink]=\"getPromotionLink(discount)\">{{\r\n                                        discount.description\r\n                                    }}</a>\r\n                                    <div class=\"promotion-amount\">\r\n                                        {{ discount.amountWithTax | localeCurrency: order.currencyCode }}\r\n                                        <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                                            {{ discount.amount | localeCurrency: order.currencyCode }}\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </vdr-dropdown-menu>\r\n                        </vdr-dropdown>\r\n                    </ng-container>\r\n                </td>\r\n            </tr>\r\n            <ng-container *ngIf=\"customFieldsForLine[line.id] as customFields\">\r\n                <tr *ngIf=\"customFields.length\">\r\n                    <td colspan=\"6\" class=\"custom-fields-row\">\r\n                        <div class=\"order-line-custom-fields\">\r\n                            <div class=\"custom-field\" *ngFor=\"let field of customFields\">\r\n                                <vdr-custom-field-control\r\n                                    [compact]=\"true\"\r\n                                    [readonly]=\"true\"\r\n                                    [customField]=\"field.config\"\r\n                                    [customFieldsFormGroup]=\"field.formGroup\"\r\n                                ></vdr-custom-field-control>\r\n                            </div>\r\n                        </div>\r\n                    </td>\r\n                </tr>\r\n            </ng-container>\r\n        </ng-container>\r\n        <tr class=\"surcharge\" *ngFor=\"let surcharge of order.surcharges\">\r\n            <td class=\"align-middle name left\" colspan=\"2\">{{ surcharge.description }}</td>\r\n            <td class=\"align-middle sku\">{{ surcharge.sku }}</td>\r\n            <td class=\"align-middle\" colspan=\"2\"></td>\r\n            <td class=\"align-middle total\">\r\n                {{ surcharge.priceWithTax | localeCurrency: order.currencyCode }}\r\n                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                    {{ surcharge.price | localeCurrency: order.currencyCode }}\r\n                </div>\r\n            </td>\r\n        </tr>\r\n        <tr class=\"order-adjustment\" *ngFor=\"let discount of order.discounts\">\r\n            <td colspan=\"5\" class=\"left clr-align-middle\">\r\n                <a [routerLink]=\"getPromotionLink(discount)\">{{ discount.description }}</a>\r\n                <vdr-chip *ngIf=\"getCouponCodeForAdjustment(order, discount) as couponCode\">{{\r\n                    couponCode\r\n                }}</vdr-chip>\r\n            </td>\r\n            <td class=\"clr-align-middle\">\r\n                {{ discount.amountWithTax | localeCurrency: order.currencyCode }}\r\n                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                    {{ discount.amount | localeCurrency: order.currencyCode }}\r\n                </div>\r\n            </td>\r\n        </tr>\r\n        <tr class=\"sub-total\">\r\n            <td class=\"left clr-align-middle\">{{ 'order.sub-total' | translate }}</td>\r\n            <td colspan=\"4\"></td>\r\n            <td class=\"clr-align-middle\">\r\n                {{ order.subTotalWithTax | localeCurrency: order.currencyCode }}\r\n                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                    {{ order.subTotal | localeCurrency: order.currencyCode }}\r\n                </div>\r\n            </td>\r\n        </tr>\r\n        <tr class=\"shipping\">\r\n            <td class=\"left clr-align-middle\">{{ 'order.shipping' | translate }}</td>\r\n            <td class=\"clr-align-middle\">{{ order.shippingLines[0]?.shippingMethod?.name }}</td>\r\n            <td colspan=\"3\"></td>\r\n            <td class=\"clr-align-middle\">\r\n                {{ order.shippingWithTax | localeCurrency: order.currencyCode }}\r\n                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                    {{ order.shipping | localeCurrency: order.currencyCode }}\r\n                </div>\r\n            </td>\r\n        </tr>\r\n        <tr class=\"total\">\r\n            <td class=\"left clr-align-middle\">{{ 'order.total' | translate }}</td>\r\n            <td colspan=\"4\"></td>\r\n            <td class=\"clr-align-middle\">\r\n                {{ order.totalWithTax | localeCurrency: order.currencyCode }}\r\n                <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n                    {{ order.total | localeCurrency: order.currencyCode }}\r\n                </div>\r\n            </td>\r\n        </tr>\r\n    </tbody>\r\n</table>\r\n",
                changeDetection: ChangeDetectionStrategy.OnPush,
                styles: [".order-table .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}.order-table .sub-total td,.order-table .total td{border-top:1px dashed var(--color-component-border-200)}.order-table .total td{font-weight:700}.order-table td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}.order-table .order-line-custom-fields{display:flex;flex-wrap:wrap}.order-table .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-right:18px}.order-table .order-line-custom-field{background-color:var(--color-component-bg-100)}.order-table .net-price,.order-table .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}.order-table .net-price{font-size:11px}.order-table .promotions-label{-webkit-text-decoration:underline dotted var(--color-text-200);text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}::ng-deep .line-promotion{display:flex;justify-content:space-between;padding:6px 12px}::ng-deep .line-promotion .promotion-amount{margin-left:12px}::ng-deep .line-promotion .net-price{font-size:11px;color:var(--color-text-300)}"]
            },] }
];
OrderTableComponent.propDecorators = {
    order: [{ type: Input }],
    orderLineCustomFields: [{ type: Input }]
};
//# sourceMappingURL=data:application/json;base64, 