@vendure/admin-ui 3.0.4 → 3.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/core/common/version.d.ts +1 -1
- package/core/shared/components/product-variant-selector/product-variant-selector.component.d.ts +1 -1
- package/esm2022/catalog/components/product-variant-quick-jump/product-variant-quick-jump.component.mjs +2 -2
- package/esm2022/core/common/version.mjs +2 -2
- package/esm2022/core/components/theme-switcher/theme-switcher.component.mjs +1 -1
- package/esm2022/core/data/data.module.mjs +1 -1
- package/esm2022/core/data/query-result.mjs +5 -3
- package/esm2022/core/providers/alerts/alerts.service.mjs +1 -1
- package/esm2022/core/providers/auth/auth.service.mjs +1 -1
- package/esm2022/core/shared/components/product-multi-selector-dialog/product-multi-selector-dialog.component.mjs +2 -2
- package/esm2022/core/shared/components/product-variant-selector/product-variant-selector.component.mjs +2 -2
- package/esm2022/core/shared/dynamic-form-inputs/dynamic-form-input/dynamic-form-input.component.mjs +7 -1
- package/esm2022/order/components/refund-order-dialog/refund-order-dialog.component.mjs +3 -3
- package/esm2022/order/order.routes.mjs +1 -2
- package/fesm2022/vendure-admin-ui-catalog.mjs +1 -1
- package/fesm2022/vendure-admin-ui-catalog.mjs.map +1 -1
- package/fesm2022/vendure-admin-ui-core.mjs +14 -6
- package/fesm2022/vendure-admin-ui-core.mjs.map +1 -1
- package/fesm2022/vendure-admin-ui-order.mjs +2 -3
- package/fesm2022/vendure-admin-ui-order.mjs.map +1 -1
- package/package.json +14 -14
- package/static/i18n-messages/sv.json +12 -12
|
@@ -1588,11 +1588,11 @@ class RefundOrderDialogComponent {
|
|
|
1588
1588
|
}));
|
|
1589
1589
|
}
|
|
1590
1590
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RefundOrderDialogComponent, deps: [{ token: i1.I18nService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1591
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: RefundOrderDialogComponent, selector: "vdr-refund-order-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ 'order.refund-and-cancel-order' | translate }}</ng-template>\r\n\r\n<div class=\"refund-wrapper\">\r\n <vdr-data-table-2 id=\"refund-order\" [items]=\"order.lines\">\r\n <!-- Here we define all the available columns -->\r\n <vdr-dt2-column id=\"id\" [heading]=\"'common.id' | translate\" [hiddenByDefault]=\"true\">\r\n <ng-template let-line=\"item\">\r\n {{ line.id }}\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column id=\"created-at\" [heading]=\"'common.created-at' | translate\" [hiddenByDefault]=\"true\">\r\n <ng-template let-line=\"item\">\r\n {{ line.createdAt | localeDate : 'short' }}\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column id=\"updated-at\" [heading]=\"'common.updated-at' | translate\" [hiddenByDefault]=\"true\">\r\n <ng-template let-line=\"item\">\r\n {{ line.updatedAt | localeDate : 'short' }}\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column [heading]=\"'common.image' | translate\" id=\"image\">\r\n <ng-template let-line=\"item\">\r\n <div class=\"image-placeholder\">\r\n <img\r\n *ngIf=\"line.featuredAsset as asset; else imagePlaceholder\"\r\n [src]=\"asset | assetPreview : 'tiny'\"\r\n />\r\n <ng-template #imagePlaceholder>\r\n <div class=\"placeholder\">\r\n <clr-icon shape=\"image\" size=\"48\"></clr-icon>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column id=\"product-name\" [heading]=\"'order.product-name' | translate\" [optional]=\"false\">\r\n <ng-template let-line=\"item\">\r\n {{ line.productVariant.name }}\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column id=\"product-sku\" [heading]=\"'order.product-sku' | translate\">\r\n <ng-template let-line=\"item\">\r\n {{ line.productVariant.sku }}\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column id=\"unit-price\" [heading]=\"'order.unit-price' | translate\" [hiddenByDefault]=\"true\">\r\n <ng-template let-line=\"item\">\r\n {{ line.unitPriceWithTax | localeCurrency : order.currencyCode }}\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column id=\"prorated-unit-price\" [heading]=\"'order.prorated-unit-price' | translate\">\r\n <ng-template let-line=\"item\">\r\n {{ line.unitPriceWithTax | localeCurrency : order.currencyCode }}\r\n <ng-container *ngIf=\"line.discounts as discounts\">\r\n <vdr-dropdown *ngIf=\"discounts.length\">\r\n <div class=\"promotions-label\" vdrDropdownTrigger>\r\n <button class=\"icon-button\"><clr-icon shape=\"info\"></clr-icon></button>\r\n </div>\r\n <vdr-dropdown-menu>\r\n <div class=\"line-promotion\" *ngFor=\"let discount of discounts\">\r\n {{ discount.description }}\r\n <div class=\"promotion-amount\">\r\n {{\r\n discount.amount / 100 / line.quantity\r\n | number : '1.0-2'\r\n | currency : order.currencyCode\r\n }}\r\n </div>\r\n </div>\r\n </vdr-dropdown-menu>\r\n </vdr-dropdown>\r\n </ng-container>\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column id=\"quantity\" [heading]=\"'order.quantity' | translate\">\r\n <ng-template let-line=\"item\">\r\n {{ line.quantity }}\r\n <vdr-line-refunds [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column id=\"refund-quantity\" [heading]=\"'order.refund' | translate\" [optional]=\"false\">\r\n <ng-template let-line=\"item\">\r\n <input\r\n *ngIf=\"lineCanBeRefundedOrCancelled(line)\"\r\n [ngModel]=\"lineQuantities[line.id].quantity\"\r\n type=\"number\"\r\n [max]=\"line.quantity\"\r\n min=\"0\"\r\n (ngModelChange)=\"onRefundQuantityChange(line.id, $event)\"\r\n />\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column id=\"cancel\" [heading]=\"'order.return-to-stock' | translate\" [optional]=\"false\">\r\n <ng-template let-line=\"item\">\r\n <div class=\"cancel-checkbox-wrapper\">\r\n <label class=\"flex center\">\r\n <input\r\n type=\"checkbox\"\r\n *ngIf=\"lineCanBeRefundedOrCancelled(line)\"\r\n clrCheckbox\r\n [disabled]=\"0 === lineQuantities[line.id].quantity\"\r\n [(ngModel)]=\"lineQuantities[line.id].cancel\"\r\n />\r\n <span class=\"ml-1\">{{ 'order.return-to-stock' | translate }}</span></label\r\n >\r\n </div>\r\n </ng-template>\r\n </vdr-dt2-column>\r\n </vdr-data-table-2>\r\n\r\n <div class=\"refund-details mt-4\">\r\n <div>\r\n <vdr-card>\r\n <label class=\"flex mb-2\" *ngFor=\"let shippingLine of order.shippingLines\">\r\n <input type=\"checkbox\" clrCheckbox (change)=\"toggleShippingRefund(shippingLine.id)\" />\r\n <div class=\"ml-1\">\r\n {{ 'order.refund-shipping' | translate }}\r\n <span>{{ shippingLine.shippingMethod.name }}:</span>\r\n <span class=\"ml-1\"\r\n >{{ shippingLine.discountedPriceWithTax | localeCurrency : order.currencyCode }}\r\n </span>\r\n </div></label\r\n >\r\n <vdr-form-field [label]=\"'order.refund-cancellation-reason' | translate\" class=\"mb-2\">\r\n <ng-select\r\n [items]=\"reasons\"\r\n bindLabel=\"name\"\r\n autofocus\r\n [placeholder]=\"'order.refund-cancellation-reason-required' | translate\"\r\n bindValue=\"id\"\r\n [addTag]=\"true\"\r\n [(ngModel)]=\"reason\"\r\n ></ng-select>\r\n </vdr-form-field>\r\n <vdr-form-field\r\n [label]=\"'order.refund-total' | translate\"\r\n [readOnlyToggle]=\"true\"\r\n (readOnlyToggleChange)=\"manuallySetRefundTotal = !$event\"\r\n >\r\n <vdr-currency-input\r\n [readonly]=\"!manuallySetRefundTotal\"\r\n [currencyCode]=\"order.currencyCode\"\r\n [(ngModel)]=\"refundTotal\"\r\n (ngModelChange)=\"updateRefundTotal()\"\r\n ></vdr-currency-input>\r\n </vdr-form-field>\r\n </vdr-card>\r\n </div>\r\n <div class=\"\">\r\n <vdr-payment-for-refund-selector\r\n [refundablePayments]=\"refundablePayments\"\r\n (paymentSelected)=\"onPaymentSelected($event.payment, $event.selected)\"\r\n [order]=\"order\"\r\n ></vdr-payment-for-refund-selector>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n <div>\r\n <div class=\"errors\">\r\n <clr-alert\r\n *ngIf=\"refundTotal < 0 || totalRefundableAmount < refundTotal\"\r\n [clrAlertType]=\"'danger'\"\r\n [clrAlertClosable]=\"false\"\r\n >\r\n <clr-alert-item>\r\n {{\r\n 'order.refund-total-error'\r\n | translate\r\n : {\r\n min: 0 | currency : order.currencyCode,\r\n max: totalRefundableAmount | localeCurrency : order.currencyCode\r\n }\r\n }}\r\n </clr-alert-item>\r\n </clr-alert>\r\n <clr-alert\r\n *ngIf=\"amountToRefundTotal < refundTotal || refundTotal < amountToRefundTotal\"\r\n [clrAlertType]=\"'danger'\"\r\n [clrAlertClosable]=\"false\"\r\n >\r\n <clr-alert-item>\r\n {{ 'order.refund-total-warning' | translate }}\r\n </clr-alert-item>\r\n </clr-alert>\r\n <clr-alert\r\n *ngIf=\"amountToRefundTotal && !reason\"\r\n [clrAlertType]=\"'danger'\"\r\n [clrAlertClosable]=\"false\"\r\n >\r\n <clr-alert-item>\r\n {{ 'order.refund-cancellation-reason-required' | translate }}\r\n </clr-alert-item>\r\n </clr-alert>\r\n </div>\r\n <div class=\"modal-buttons\">\r\n <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n <button type=\"submit\" (click)=\"select()\" [disabled]=\"!canSubmit()\" class=\"btn btn-primary\">\r\n {{\r\n 'order.refund-with-amount'\r\n | translate : { amount: amountToRefundTotal | localeCurrency : order.currencyCode }\r\n }}\r\n </button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n", styles: [":host{height:100%;display:flex;flex-direction:column;min-height:64vh}.refund-wrapper{flex:1;flex-direction:column}.refund-wrapper .order-table{flex:1;overflow-y:auto}.refund-wrapper .order-table table{margin-top:0}.refund-wrapper tr.ignore{color:var(--color-grey-300)}::ng-deep .refund-wrapper .table-wrapper{max-width:initial!important}.quantity-col{background-color:var(--color-warning-100)}.cancel-checkbox-wrapper{display:flex;align-items:center;justify-content:center}clr-checkbox-wrapper{margin-top:12px;margin-bottom:12px;display:block}.refund-details{display:flex;flex-direction:column;padding-bottom:var(--space-unit);gap:calc(var(--space-unit) * 2);justify-content:space-between}@media screen and (min-width: 992px){.refund-details{flex-direction:row}}.refund-details vdr-card.unselected{opacity:.8}.refund-details>*{flex:1}.errors{display:flex;justify-content:flex-end;gap:calc(var(--space-unit) * 2);margin:calc(var(--space-unit) * 2) 0}.prorated-wrapper{display:flex;justify-content:center}.line-promotion{display:flex;justify-content:space-between;font-size:12px;padding:3px 6px}.line-promotion .promotion-amount{margin-inline-start:12px}vdr-card.faded{opacity:.8}.modal-buttons{display:flex;justify-content:flex-end;gap:.6rem;gap:var(--clr-modal-footer-gap, .6rem)}\n"], dependencies: [{ kind: "component", type: i3.ClrAlert, selector: "clr-alert", inputs: ["clrAlertSizeSmall", "clrAlertClosable", "clrAlertAppLevel", "clrCloseButtonAriaLabel", "clrAlertLightweight", "clrAlertType", "clrAlertIcon", "clrAlertClosed"], outputs: ["clrAlertClosedChange"] }, { kind: "component", type: i3.ClrAlertItem, selector: "clr-alert-item" }, { kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "component", type: i1.CurrencyInputComponent, selector: "vdr-currency-input", inputs: ["disabled", "readonly", "value", "currencyCode"], outputs: ["valueChange"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "directive", type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "component", type: i1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "component", type: i1.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex"], outputs: ["pageChange", "itemsPerPageChange", "visibleColumnsChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "component", type: LineRefundsComponent, selector: "vdr-line-refunds", inputs: ["line", "payments"] }, { kind: "component", type: PaymentForRefundSelectorComponent, selector: "vdr-payment-for-refund-selector", inputs: ["refundablePayments", "order"], outputs: ["paymentSelected"] }, { kind: "pipe", type: i2$1.DecimalPipe, name: "number" }, { kind: "pipe", type: i2$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.AssetPreviewPipe, name: "assetPreview" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1591
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: RefundOrderDialogComponent, selector: "vdr-refund-order-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ 'order.refund-and-cancel-order' | translate }}</ng-template>\r\n\r\n<div class=\"refund-wrapper\">\r\n <vdr-data-table-2 id=\"refund-order\" [items]=\"order.lines\">\r\n <!-- Here we define all the available columns -->\r\n <vdr-dt2-column id=\"id\" [heading]=\"'common.id' | translate\" [hiddenByDefault]=\"true\">\r\n <ng-template let-line=\"item\">\r\n {{ line.id }}\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column id=\"created-at\" [heading]=\"'common.created-at' | translate\" [hiddenByDefault]=\"true\">\r\n <ng-template let-line=\"item\">\r\n {{ line.createdAt | localeDate : 'short' }}\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column id=\"updated-at\" [heading]=\"'common.updated-at' | translate\" [hiddenByDefault]=\"true\">\r\n <ng-template let-line=\"item\">\r\n {{ line.updatedAt | localeDate : 'short' }}\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column [heading]=\"'common.image' | translate\" id=\"image\">\r\n <ng-template let-line=\"item\">\r\n <div class=\"image-placeholder\">\r\n <img\r\n *ngIf=\"line.featuredAsset as asset; else imagePlaceholder\"\r\n [src]=\"asset | assetPreview : 'tiny'\"\r\n />\r\n <ng-template #imagePlaceholder>\r\n <div class=\"placeholder\">\r\n <clr-icon shape=\"image\" size=\"48\"></clr-icon>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column id=\"product-name\" [heading]=\"'order.product-name' | translate\" [optional]=\"false\">\r\n <ng-template let-line=\"item\">\r\n {{ line.productVariant.name }}\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column id=\"product-sku\" [heading]=\"'order.product-sku' | translate\">\r\n <ng-template let-line=\"item\">\r\n {{ line.productVariant.sku }}\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column id=\"unit-price\" [heading]=\"'order.unit-price' | translate\" [hiddenByDefault]=\"true\">\r\n <ng-template let-line=\"item\">\r\n {{ line.unitPriceWithTax | localeCurrency : order.currencyCode }}\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column id=\"prorated-unit-price\" [heading]=\"'order.prorated-unit-price' | translate\">\r\n <ng-template let-line=\"item\">\r\n {{ line.proratedUnitPriceWithTax | localeCurrency : order.currencyCode }}\r\n <ng-container *ngIf=\"line.discounts as discounts\">\r\n <vdr-dropdown *ngIf=\"discounts.length\">\r\n <div class=\"promotions-label\" vdrDropdownTrigger>\r\n <button class=\"icon-button\"><clr-icon shape=\"info\"></clr-icon></button>\r\n </div>\r\n <vdr-dropdown-menu>\r\n <div class=\"line-promotion\" *ngFor=\"let discount of discounts\">\r\n {{ discount.description }}\r\n <div class=\"promotion-amount\">\r\n {{\r\n discount.amount / 100 / line.quantity\r\n | number : '1.0-2'\r\n | currency : order.currencyCode\r\n }}\r\n </div>\r\n </div>\r\n </vdr-dropdown-menu>\r\n </vdr-dropdown>\r\n </ng-container>\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column id=\"quantity\" [heading]=\"'order.quantity' | translate\">\r\n <ng-template let-line=\"item\">\r\n {{ line.quantity }}\r\n <vdr-line-refunds [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column id=\"refund-quantity\" [heading]=\"'order.refund' | translate\" [optional]=\"false\">\r\n <ng-template let-line=\"item\">\r\n <input\r\n *ngIf=\"lineCanBeRefundedOrCancelled(line)\"\r\n [ngModel]=\"lineQuantities[line.id].quantity\"\r\n type=\"number\"\r\n [max]=\"line.quantity\"\r\n min=\"0\"\r\n (ngModelChange)=\"onRefundQuantityChange(line.id, $event)\"\r\n />\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column id=\"cancel\" [heading]=\"'order.return-to-stock' | translate\" [optional]=\"false\">\r\n <ng-template let-line=\"item\">\r\n <div class=\"cancel-checkbox-wrapper\">\r\n <label class=\"flex center\">\r\n <input\r\n type=\"checkbox\"\r\n *ngIf=\"lineCanBeRefundedOrCancelled(line)\"\r\n clrCheckbox\r\n [disabled]=\"0 === lineQuantities[line.id].quantity\"\r\n [(ngModel)]=\"lineQuantities[line.id].cancel\"\r\n />\r\n <span class=\"ml-1\">{{ 'order.return-to-stock' | translate }}</span></label\r\n >\r\n </div>\r\n </ng-template>\r\n </vdr-dt2-column>\r\n </vdr-data-table-2>\r\n\r\n <div class=\"refund-details mt-4\">\r\n <div>\r\n <vdr-card>\r\n <label class=\"flex mb-2\" *ngFor=\"let shippingLine of order.shippingLines\">\r\n <input type=\"checkbox\" clrCheckbox (change)=\"toggleShippingRefund(shippingLine.id)\" />\r\n <div class=\"ml-1\">\r\n {{ 'order.refund-shipping' | translate }}\r\n <span>{{ shippingLine.shippingMethod.name }}:</span>\r\n <span class=\"ml-1\"\r\n >{{ shippingLine.discountedPriceWithTax | localeCurrency : order.currencyCode }}\r\n </span>\r\n </div></label\r\n >\r\n <vdr-form-field [label]=\"'order.refund-cancellation-reason' | translate\" class=\"mb-2\">\r\n <ng-select\r\n [items]=\"reasons\"\r\n bindLabel=\"name\"\r\n autofocus\r\n [placeholder]=\"'order.refund-cancellation-reason-required' | translate\"\r\n bindValue=\"id\"\r\n [addTag]=\"true\"\r\n [(ngModel)]=\"reason\"\r\n ></ng-select>\r\n </vdr-form-field>\r\n <vdr-form-field\r\n [label]=\"'order.refund-total' | translate\"\r\n [readOnlyToggle]=\"true\"\r\n (readOnlyToggleChange)=\"manuallySetRefundTotal = !$event\"\r\n >\r\n <vdr-currency-input\r\n [readonly]=\"!manuallySetRefundTotal\"\r\n [currencyCode]=\"order.currencyCode\"\r\n [(ngModel)]=\"refundTotal\"\r\n (ngModelChange)=\"updateRefundTotal()\"\r\n ></vdr-currency-input>\r\n </vdr-form-field>\r\n </vdr-card>\r\n </div>\r\n <div class=\"\">\r\n <vdr-payment-for-refund-selector\r\n [refundablePayments]=\"refundablePayments\"\r\n (paymentSelected)=\"onPaymentSelected($event.payment, $event.selected)\"\r\n [order]=\"order\"\r\n ></vdr-payment-for-refund-selector>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n <div>\r\n <div class=\"errors\">\r\n <clr-alert\r\n *ngIf=\"refundTotal < 0 || totalRefundableAmount < refundTotal\"\r\n [clrAlertType]=\"'danger'\"\r\n [clrAlertClosable]=\"false\"\r\n >\r\n <clr-alert-item>\r\n {{\r\n 'order.refund-total-error'\r\n | translate\r\n : {\r\n min: 0 | currency : order.currencyCode,\r\n max: totalRefundableAmount | localeCurrency : order.currencyCode\r\n }\r\n }}\r\n </clr-alert-item>\r\n </clr-alert>\r\n <clr-alert\r\n *ngIf=\"amountToRefundTotal < refundTotal || refundTotal < amountToRefundTotal\"\r\n [clrAlertType]=\"'danger'\"\r\n [clrAlertClosable]=\"false\"\r\n >\r\n <clr-alert-item>\r\n {{ 'order.refund-total-warning' | translate }}\r\n </clr-alert-item>\r\n </clr-alert>\r\n <clr-alert\r\n *ngIf=\"amountToRefundTotal && !reason\"\r\n [clrAlertType]=\"'danger'\"\r\n [clrAlertClosable]=\"false\"\r\n >\r\n <clr-alert-item>\r\n {{ 'order.refund-cancellation-reason-required' | translate }}\r\n </clr-alert-item>\r\n </clr-alert>\r\n </div>\r\n <div class=\"modal-buttons\">\r\n <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n <button type=\"submit\" (click)=\"select()\" [disabled]=\"!canSubmit()\" class=\"btn btn-primary\">\r\n {{\r\n 'order.refund-with-amount'\r\n | translate : { amount: amountToRefundTotal | localeCurrency : order.currencyCode }\r\n }}\r\n </button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n", styles: [":host{height:100%;display:flex;flex-direction:column;min-height:64vh}.refund-wrapper{flex:1;flex-direction:column}.refund-wrapper .order-table{flex:1;overflow-y:auto}.refund-wrapper .order-table table{margin-top:0}.refund-wrapper tr.ignore{color:var(--color-grey-300)}::ng-deep .refund-wrapper .table-wrapper{max-width:initial!important}.quantity-col{background-color:var(--color-warning-100)}.cancel-checkbox-wrapper{display:flex;align-items:center;justify-content:center}clr-checkbox-wrapper{margin-top:12px;margin-bottom:12px;display:block}.refund-details{display:flex;flex-direction:column;padding-bottom:var(--space-unit);gap:calc(var(--space-unit) * 2);justify-content:space-between}@media screen and (min-width: 992px){.refund-details{flex-direction:row}}.refund-details vdr-card.unselected{opacity:.8}.refund-details>*{flex:1}.errors{display:flex;justify-content:flex-end;gap:calc(var(--space-unit) * 2);margin:calc(var(--space-unit) * 2) 0}.prorated-wrapper{display:flex;justify-content:center}.line-promotion{display:flex;justify-content:space-between;font-size:12px;padding:3px 6px}.line-promotion .promotion-amount{margin-inline-start:12px}vdr-card.faded{opacity:.8}.modal-buttons{display:flex;justify-content:flex-end;gap:.6rem;gap:var(--clr-modal-footer-gap, .6rem)}\n"], dependencies: [{ kind: "component", type: i3.ClrAlert, selector: "clr-alert", inputs: ["clrAlertSizeSmall", "clrAlertClosable", "clrAlertAppLevel", "clrCloseButtonAriaLabel", "clrAlertLightweight", "clrAlertType", "clrAlertIcon", "clrAlertClosed"], outputs: ["clrAlertClosedChange"] }, { kind: "component", type: i3.ClrAlertItem, selector: "clr-alert-item" }, { kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "component", type: i1.CurrencyInputComponent, selector: "vdr-currency-input", inputs: ["disabled", "readonly", "value", "currencyCode"], outputs: ["valueChange"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "directive", type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "component", type: i1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "component", type: i1.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex"], outputs: ["pageChange", "itemsPerPageChange", "visibleColumnsChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "component", type: LineRefundsComponent, selector: "vdr-line-refunds", inputs: ["line", "payments"] }, { kind: "component", type: PaymentForRefundSelectorComponent, selector: "vdr-payment-for-refund-selector", inputs: ["refundablePayments", "order"], outputs: ["paymentSelected"] }, { kind: "pipe", type: i2$1.DecimalPipe, name: "number" }, { kind: "pipe", type: i2$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.AssetPreviewPipe, name: "assetPreview" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1592
1592
|
}
|
|
1593
1593
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RefundOrderDialogComponent, decorators: [{
|
|
1594
1594
|
type: Component,
|
|
1595
|
-
args: [{ selector: 'vdr-refund-order-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>{{ 'order.refund-and-cancel-order' | translate }}</ng-template>\r\n\r\n<div class=\"refund-wrapper\">\r\n <vdr-data-table-2 id=\"refund-order\" [items]=\"order.lines\">\r\n <!-- Here we define all the available columns -->\r\n <vdr-dt2-column id=\"id\" [heading]=\"'common.id' | translate\" [hiddenByDefault]=\"true\">\r\n <ng-template let-line=\"item\">\r\n {{ line.id }}\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column id=\"created-at\" [heading]=\"'common.created-at' | translate\" [hiddenByDefault]=\"true\">\r\n <ng-template let-line=\"item\">\r\n {{ line.createdAt | localeDate : 'short' }}\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column id=\"updated-at\" [heading]=\"'common.updated-at' | translate\" [hiddenByDefault]=\"true\">\r\n <ng-template let-line=\"item\">\r\n {{ line.updatedAt | localeDate : 'short' }}\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column [heading]=\"'common.image' | translate\" id=\"image\">\r\n <ng-template let-line=\"item\">\r\n <div class=\"image-placeholder\">\r\n <img\r\n *ngIf=\"line.featuredAsset as asset; else imagePlaceholder\"\r\n [src]=\"asset | assetPreview : 'tiny'\"\r\n />\r\n <ng-template #imagePlaceholder>\r\n <div class=\"placeholder\">\r\n <clr-icon shape=\"image\" size=\"48\"></clr-icon>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column id=\"product-name\" [heading]=\"'order.product-name' | translate\" [optional]=\"false\">\r\n <ng-template let-line=\"item\">\r\n {{ line.productVariant.name }}\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column id=\"product-sku\" [heading]=\"'order.product-sku' | translate\">\r\n <ng-template let-line=\"item\">\r\n {{ line.productVariant.sku }}\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column id=\"unit-price\" [heading]=\"'order.unit-price' | translate\" [hiddenByDefault]=\"true\">\r\n <ng-template let-line=\"item\">\r\n {{ line.unitPriceWithTax | localeCurrency : order.currencyCode }}\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column id=\"prorated-unit-price\" [heading]=\"'order.prorated-unit-price' | translate\">\r\n <ng-template let-line=\"item\">\r\n {{ line.unitPriceWithTax | localeCurrency : order.currencyCode }}\r\n <ng-container *ngIf=\"line.discounts as discounts\">\r\n <vdr-dropdown *ngIf=\"discounts.length\">\r\n <div class=\"promotions-label\" vdrDropdownTrigger>\r\n <button class=\"icon-button\"><clr-icon shape=\"info\"></clr-icon></button>\r\n </div>\r\n <vdr-dropdown-menu>\r\n <div class=\"line-promotion\" *ngFor=\"let discount of discounts\">\r\n {{ discount.description }}\r\n <div class=\"promotion-amount\">\r\n {{\r\n discount.amount / 100 / line.quantity\r\n | number : '1.0-2'\r\n | currency : order.currencyCode\r\n }}\r\n </div>\r\n </div>\r\n </vdr-dropdown-menu>\r\n </vdr-dropdown>\r\n </ng-container>\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column id=\"quantity\" [heading]=\"'order.quantity' | translate\">\r\n <ng-template let-line=\"item\">\r\n {{ line.quantity }}\r\n <vdr-line-refunds [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column id=\"refund-quantity\" [heading]=\"'order.refund' | translate\" [optional]=\"false\">\r\n <ng-template let-line=\"item\">\r\n <input\r\n *ngIf=\"lineCanBeRefundedOrCancelled(line)\"\r\n [ngModel]=\"lineQuantities[line.id].quantity\"\r\n type=\"number\"\r\n [max]=\"line.quantity\"\r\n min=\"0\"\r\n (ngModelChange)=\"onRefundQuantityChange(line.id, $event)\"\r\n />\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column id=\"cancel\" [heading]=\"'order.return-to-stock' | translate\" [optional]=\"false\">\r\n <ng-template let-line=\"item\">\r\n <div class=\"cancel-checkbox-wrapper\">\r\n <label class=\"flex center\">\r\n <input\r\n type=\"checkbox\"\r\n *ngIf=\"lineCanBeRefundedOrCancelled(line)\"\r\n clrCheckbox\r\n [disabled]=\"0 === lineQuantities[line.id].quantity\"\r\n [(ngModel)]=\"lineQuantities[line.id].cancel\"\r\n />\r\n <span class=\"ml-1\">{{ 'order.return-to-stock' | translate }}</span></label\r\n >\r\n </div>\r\n </ng-template>\r\n </vdr-dt2-column>\r\n </vdr-data-table-2>\r\n\r\n <div class=\"refund-details mt-4\">\r\n <div>\r\n <vdr-card>\r\n <label class=\"flex mb-2\" *ngFor=\"let shippingLine of order.shippingLines\">\r\n <input type=\"checkbox\" clrCheckbox (change)=\"toggleShippingRefund(shippingLine.id)\" />\r\n <div class=\"ml-1\">\r\n {{ 'order.refund-shipping' | translate }}\r\n <span>{{ shippingLine.shippingMethod.name }}:</span>\r\n <span class=\"ml-1\"\r\n >{{ shippingLine.discountedPriceWithTax | localeCurrency : order.currencyCode }}\r\n </span>\r\n </div></label\r\n >\r\n <vdr-form-field [label]=\"'order.refund-cancellation-reason' | translate\" class=\"mb-2\">\r\n <ng-select\r\n [items]=\"reasons\"\r\n bindLabel=\"name\"\r\n autofocus\r\n [placeholder]=\"'order.refund-cancellation-reason-required' | translate\"\r\n bindValue=\"id\"\r\n [addTag]=\"true\"\r\n [(ngModel)]=\"reason\"\r\n ></ng-select>\r\n </vdr-form-field>\r\n <vdr-form-field\r\n [label]=\"'order.refund-total' | translate\"\r\n [readOnlyToggle]=\"true\"\r\n (readOnlyToggleChange)=\"manuallySetRefundTotal = !$event\"\r\n >\r\n <vdr-currency-input\r\n [readonly]=\"!manuallySetRefundTotal\"\r\n [currencyCode]=\"order.currencyCode\"\r\n [(ngModel)]=\"refundTotal\"\r\n (ngModelChange)=\"updateRefundTotal()\"\r\n ></vdr-currency-input>\r\n </vdr-form-field>\r\n </vdr-card>\r\n </div>\r\n <div class=\"\">\r\n <vdr-payment-for-refund-selector\r\n [refundablePayments]=\"refundablePayments\"\r\n (paymentSelected)=\"onPaymentSelected($event.payment, $event.selected)\"\r\n [order]=\"order\"\r\n ></vdr-payment-for-refund-selector>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n <div>\r\n <div class=\"errors\">\r\n <clr-alert\r\n *ngIf=\"refundTotal < 0 || totalRefundableAmount < refundTotal\"\r\n [clrAlertType]=\"'danger'\"\r\n [clrAlertClosable]=\"false\"\r\n >\r\n <clr-alert-item>\r\n {{\r\n 'order.refund-total-error'\r\n | translate\r\n : {\r\n min: 0 | currency : order.currencyCode,\r\n max: totalRefundableAmount | localeCurrency : order.currencyCode\r\n }\r\n }}\r\n </clr-alert-item>\r\n </clr-alert>\r\n <clr-alert\r\n *ngIf=\"amountToRefundTotal < refundTotal || refundTotal < amountToRefundTotal\"\r\n [clrAlertType]=\"'danger'\"\r\n [clrAlertClosable]=\"false\"\r\n >\r\n <clr-alert-item>\r\n {{ 'order.refund-total-warning' | translate }}\r\n </clr-alert-item>\r\n </clr-alert>\r\n <clr-alert\r\n *ngIf=\"amountToRefundTotal && !reason\"\r\n [clrAlertType]=\"'danger'\"\r\n [clrAlertClosable]=\"false\"\r\n >\r\n <clr-alert-item>\r\n {{ 'order.refund-cancellation-reason-required' | translate }}\r\n </clr-alert-item>\r\n </clr-alert>\r\n </div>\r\n <div class=\"modal-buttons\">\r\n <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n <button type=\"submit\" (click)=\"select()\" [disabled]=\"!canSubmit()\" class=\"btn btn-primary\">\r\n {{\r\n 'order.refund-with-amount'\r\n | translate : { amount: amountToRefundTotal | localeCurrency : order.currencyCode }\r\n }}\r\n </button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n", styles: [":host{height:100%;display:flex;flex-direction:column;min-height:64vh}.refund-wrapper{flex:1;flex-direction:column}.refund-wrapper .order-table{flex:1;overflow-y:auto}.refund-wrapper .order-table table{margin-top:0}.refund-wrapper tr.ignore{color:var(--color-grey-300)}::ng-deep .refund-wrapper .table-wrapper{max-width:initial!important}.quantity-col{background-color:var(--color-warning-100)}.cancel-checkbox-wrapper{display:flex;align-items:center;justify-content:center}clr-checkbox-wrapper{margin-top:12px;margin-bottom:12px;display:block}.refund-details{display:flex;flex-direction:column;padding-bottom:var(--space-unit);gap:calc(var(--space-unit) * 2);justify-content:space-between}@media screen and (min-width: 992px){.refund-details{flex-direction:row}}.refund-details vdr-card.unselected{opacity:.8}.refund-details>*{flex:1}.errors{display:flex;justify-content:flex-end;gap:calc(var(--space-unit) * 2);margin:calc(var(--space-unit) * 2) 0}.prorated-wrapper{display:flex;justify-content:center}.line-promotion{display:flex;justify-content:space-between;font-size:12px;padding:3px 6px}.line-promotion .promotion-amount{margin-inline-start:12px}vdr-card.faded{opacity:.8}.modal-buttons{display:flex;justify-content:flex-end;gap:.6rem;gap:var(--clr-modal-footer-gap, .6rem)}\n"] }]
|
|
1595
|
+
args: [{ selector: 'vdr-refund-order-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>{{ 'order.refund-and-cancel-order' | translate }}</ng-template>\r\n\r\n<div class=\"refund-wrapper\">\r\n <vdr-data-table-2 id=\"refund-order\" [items]=\"order.lines\">\r\n <!-- Here we define all the available columns -->\r\n <vdr-dt2-column id=\"id\" [heading]=\"'common.id' | translate\" [hiddenByDefault]=\"true\">\r\n <ng-template let-line=\"item\">\r\n {{ line.id }}\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column id=\"created-at\" [heading]=\"'common.created-at' | translate\" [hiddenByDefault]=\"true\">\r\n <ng-template let-line=\"item\">\r\n {{ line.createdAt | localeDate : 'short' }}\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column id=\"updated-at\" [heading]=\"'common.updated-at' | translate\" [hiddenByDefault]=\"true\">\r\n <ng-template let-line=\"item\">\r\n {{ line.updatedAt | localeDate : 'short' }}\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column [heading]=\"'common.image' | translate\" id=\"image\">\r\n <ng-template let-line=\"item\">\r\n <div class=\"image-placeholder\">\r\n <img\r\n *ngIf=\"line.featuredAsset as asset; else imagePlaceholder\"\r\n [src]=\"asset | assetPreview : 'tiny'\"\r\n />\r\n <ng-template #imagePlaceholder>\r\n <div class=\"placeholder\">\r\n <clr-icon shape=\"image\" size=\"48\"></clr-icon>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column id=\"product-name\" [heading]=\"'order.product-name' | translate\" [optional]=\"false\">\r\n <ng-template let-line=\"item\">\r\n {{ line.productVariant.name }}\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column id=\"product-sku\" [heading]=\"'order.product-sku' | translate\">\r\n <ng-template let-line=\"item\">\r\n {{ line.productVariant.sku }}\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column id=\"unit-price\" [heading]=\"'order.unit-price' | translate\" [hiddenByDefault]=\"true\">\r\n <ng-template let-line=\"item\">\r\n {{ line.unitPriceWithTax | localeCurrency : order.currencyCode }}\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column id=\"prorated-unit-price\" [heading]=\"'order.prorated-unit-price' | translate\">\r\n <ng-template let-line=\"item\">\r\n {{ line.proratedUnitPriceWithTax | localeCurrency : order.currencyCode }}\r\n <ng-container *ngIf=\"line.discounts as discounts\">\r\n <vdr-dropdown *ngIf=\"discounts.length\">\r\n <div class=\"promotions-label\" vdrDropdownTrigger>\r\n <button class=\"icon-button\"><clr-icon shape=\"info\"></clr-icon></button>\r\n </div>\r\n <vdr-dropdown-menu>\r\n <div class=\"line-promotion\" *ngFor=\"let discount of discounts\">\r\n {{ discount.description }}\r\n <div class=\"promotion-amount\">\r\n {{\r\n discount.amount / 100 / line.quantity\r\n | number : '1.0-2'\r\n | currency : order.currencyCode\r\n }}\r\n </div>\r\n </div>\r\n </vdr-dropdown-menu>\r\n </vdr-dropdown>\r\n </ng-container>\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column id=\"quantity\" [heading]=\"'order.quantity' | translate\">\r\n <ng-template let-line=\"item\">\r\n {{ line.quantity }}\r\n <vdr-line-refunds [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column id=\"refund-quantity\" [heading]=\"'order.refund' | translate\" [optional]=\"false\">\r\n <ng-template let-line=\"item\">\r\n <input\r\n *ngIf=\"lineCanBeRefundedOrCancelled(line)\"\r\n [ngModel]=\"lineQuantities[line.id].quantity\"\r\n type=\"number\"\r\n [max]=\"line.quantity\"\r\n min=\"0\"\r\n (ngModelChange)=\"onRefundQuantityChange(line.id, $event)\"\r\n />\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column id=\"cancel\" [heading]=\"'order.return-to-stock' | translate\" [optional]=\"false\">\r\n <ng-template let-line=\"item\">\r\n <div class=\"cancel-checkbox-wrapper\">\r\n <label class=\"flex center\">\r\n <input\r\n type=\"checkbox\"\r\n *ngIf=\"lineCanBeRefundedOrCancelled(line)\"\r\n clrCheckbox\r\n [disabled]=\"0 === lineQuantities[line.id].quantity\"\r\n [(ngModel)]=\"lineQuantities[line.id].cancel\"\r\n />\r\n <span class=\"ml-1\">{{ 'order.return-to-stock' | translate }}</span></label\r\n >\r\n </div>\r\n </ng-template>\r\n </vdr-dt2-column>\r\n </vdr-data-table-2>\r\n\r\n <div class=\"refund-details mt-4\">\r\n <div>\r\n <vdr-card>\r\n <label class=\"flex mb-2\" *ngFor=\"let shippingLine of order.shippingLines\">\r\n <input type=\"checkbox\" clrCheckbox (change)=\"toggleShippingRefund(shippingLine.id)\" />\r\n <div class=\"ml-1\">\r\n {{ 'order.refund-shipping' | translate }}\r\n <span>{{ shippingLine.shippingMethod.name }}:</span>\r\n <span class=\"ml-1\"\r\n >{{ shippingLine.discountedPriceWithTax | localeCurrency : order.currencyCode }}\r\n </span>\r\n </div></label\r\n >\r\n <vdr-form-field [label]=\"'order.refund-cancellation-reason' | translate\" class=\"mb-2\">\r\n <ng-select\r\n [items]=\"reasons\"\r\n bindLabel=\"name\"\r\n autofocus\r\n [placeholder]=\"'order.refund-cancellation-reason-required' | translate\"\r\n bindValue=\"id\"\r\n [addTag]=\"true\"\r\n [(ngModel)]=\"reason\"\r\n ></ng-select>\r\n </vdr-form-field>\r\n <vdr-form-field\r\n [label]=\"'order.refund-total' | translate\"\r\n [readOnlyToggle]=\"true\"\r\n (readOnlyToggleChange)=\"manuallySetRefundTotal = !$event\"\r\n >\r\n <vdr-currency-input\r\n [readonly]=\"!manuallySetRefundTotal\"\r\n [currencyCode]=\"order.currencyCode\"\r\n [(ngModel)]=\"refundTotal\"\r\n (ngModelChange)=\"updateRefundTotal()\"\r\n ></vdr-currency-input>\r\n </vdr-form-field>\r\n </vdr-card>\r\n </div>\r\n <div class=\"\">\r\n <vdr-payment-for-refund-selector\r\n [refundablePayments]=\"refundablePayments\"\r\n (paymentSelected)=\"onPaymentSelected($event.payment, $event.selected)\"\r\n [order]=\"order\"\r\n ></vdr-payment-for-refund-selector>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n <div>\r\n <div class=\"errors\">\r\n <clr-alert\r\n *ngIf=\"refundTotal < 0 || totalRefundableAmount < refundTotal\"\r\n [clrAlertType]=\"'danger'\"\r\n [clrAlertClosable]=\"false\"\r\n >\r\n <clr-alert-item>\r\n {{\r\n 'order.refund-total-error'\r\n | translate\r\n : {\r\n min: 0 | currency : order.currencyCode,\r\n max: totalRefundableAmount | localeCurrency : order.currencyCode\r\n }\r\n }}\r\n </clr-alert-item>\r\n </clr-alert>\r\n <clr-alert\r\n *ngIf=\"amountToRefundTotal < refundTotal || refundTotal < amountToRefundTotal\"\r\n [clrAlertType]=\"'danger'\"\r\n [clrAlertClosable]=\"false\"\r\n >\r\n <clr-alert-item>\r\n {{ 'order.refund-total-warning' | translate }}\r\n </clr-alert-item>\r\n </clr-alert>\r\n <clr-alert\r\n *ngIf=\"amountToRefundTotal && !reason\"\r\n [clrAlertType]=\"'danger'\"\r\n [clrAlertClosable]=\"false\"\r\n >\r\n <clr-alert-item>\r\n {{ 'order.refund-cancellation-reason-required' | translate }}\r\n </clr-alert-item>\r\n </clr-alert>\r\n </div>\r\n <div class=\"modal-buttons\">\r\n <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n <button type=\"submit\" (click)=\"select()\" [disabled]=\"!canSubmit()\" class=\"btn btn-primary\">\r\n {{\r\n 'order.refund-with-amount'\r\n | translate : { amount: amountToRefundTotal | localeCurrency : order.currencyCode }\r\n }}\r\n </button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n", styles: [":host{height:100%;display:flex;flex-direction:column;min-height:64vh}.refund-wrapper{flex:1;flex-direction:column}.refund-wrapper .order-table{flex:1;overflow-y:auto}.refund-wrapper .order-table table{margin-top:0}.refund-wrapper tr.ignore{color:var(--color-grey-300)}::ng-deep .refund-wrapper .table-wrapper{max-width:initial!important}.quantity-col{background-color:var(--color-warning-100)}.cancel-checkbox-wrapper{display:flex;align-items:center;justify-content:center}clr-checkbox-wrapper{margin-top:12px;margin-bottom:12px;display:block}.refund-details{display:flex;flex-direction:column;padding-bottom:var(--space-unit);gap:calc(var(--space-unit) * 2);justify-content:space-between}@media screen and (min-width: 992px){.refund-details{flex-direction:row}}.refund-details vdr-card.unselected{opacity:.8}.refund-details>*{flex:1}.errors{display:flex;justify-content:flex-end;gap:calc(var(--space-unit) * 2);margin:calc(var(--space-unit) * 2) 0}.prorated-wrapper{display:flex;justify-content:center}.line-promotion{display:flex;justify-content:space-between;font-size:12px;padding:3px 6px}.line-promotion .promotion-amount{margin-inline-start:12px}vdr-card.faded{opacity:.8}.modal-buttons{display:flex;justify-content:flex-end;gap:.6rem;gap:var(--clr-modal-footer-gap, .6rem)}\n"] }]
|
|
1596
1596
|
}], ctorParameters: () => [{ type: i1.I18nService }] });
|
|
1597
1597
|
|
|
1598
1598
|
class SettleRefundDialogComponent {
|
|
@@ -3401,7 +3401,6 @@ const createRoutes = (pageService) => [
|
|
|
3401
3401
|
{
|
|
3402
3402
|
path: '',
|
|
3403
3403
|
component: PageComponent,
|
|
3404
|
-
pathMatch: 'full',
|
|
3405
3404
|
data: {
|
|
3406
3405
|
locationId: 'order-list',
|
|
3407
3406
|
breadcrumb: marker('breadcrumb.orders'),
|