@vendure/admin-ui 2.0.0-next.15 → 2.0.0-next.17
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/utilities/configurable-operation-utils.d.ts +4 -1
- package/core/common/version.d.ts +1 -1
- package/esm2020/catalog/components/option-value-input/option-value-input.component.mjs +7 -2
- package/esm2020/core/common/utilities/configurable-operation-utils.mjs +7 -2
- package/esm2020/core/common/version.mjs +2 -2
- package/esm2020/core/components/app-shell/app-shell.component.mjs +2 -2
- package/esm2020/core/data/utils/remove-readonly-custom-fields.mjs +4 -1
- package/esm2020/core/shared/components/rich-text-editor/prosemirror/context-menu/context-menu.component.mjs +1 -1
- package/esm2020/core/shared/components/rich-text-editor/prosemirror/context-menu/context-menu.service.mjs +2 -2
- package/esm2020/core/shared/pipes/locale-currency.pipe.mjs +10 -2
- package/esm2020/customer/components/customer-group-list/customer-group-list.component.mjs +7 -6
- package/esm2020/order/components/order-editor/order-editor.component.mjs +12 -5
- package/fesm2015/vendure-admin-ui-catalog.mjs +7 -1
- package/fesm2015/vendure-admin-ui-catalog.mjs.map +1 -1
- package/fesm2015/vendure-admin-ui-core.mjs +23 -6
- package/fesm2015/vendure-admin-ui-core.mjs.map +1 -1
- package/fesm2015/vendure-admin-ui-customer.mjs +6 -5
- package/fesm2015/vendure-admin-ui-customer.mjs.map +1 -1
- package/fesm2015/vendure-admin-ui-order.mjs +8 -4
- package/fesm2015/vendure-admin-ui-order.mjs.map +1 -1
- package/fesm2020/vendure-admin-ui-catalog.mjs +6 -1
- package/fesm2020/vendure-admin-ui-catalog.mjs.map +1 -1
- package/fesm2020/vendure-admin-ui-core.mjs +22 -6
- package/fesm2020/vendure-admin-ui-core.mjs.map +1 -1
- package/fesm2020/vendure-admin-ui-customer.mjs +6 -5
- package/fesm2020/vendure-admin-ui-customer.mjs.map +1 -1
- package/fesm2020/vendure-admin-ui-order.mjs +11 -4
- package/fesm2020/vendure-admin-ui-order.mjs.map +1 -1
- package/package.json +2 -2
- package/static/styles/_variables.scss +1 -0
- package/static/styles/global/_sass-overrides.scss +1 -1
|
@@ -3,7 +3,7 @@ import { Component, ChangeDetectionStrategy, Input, EventEmitter, Output, ViewCh
|
|
|
3
3
|
import * as i3$1 from '@angular/forms';
|
|
4
4
|
import { FormGroup, FormControl, Validators, FormArray } from '@angular/forms';
|
|
5
5
|
import * as i1 from '@vendure/admin-ui/core';
|
|
6
|
-
import { getAppConfig, configurableDefinitionToInstance, GlobalFlag, configurableOperationValueIsValid, toConfigurableOperationInput, HistoryEntryType, SortOrder, AdjustmentType, BaseDetailComponent, EditNoteDialogComponent, BaseListComponent, LogicalOperator, BaseEntityResolver, createResolveData, CanDeactivateDetailGuard, detailBreadcrumb, SharedModule } from '@vendure/admin-ui/core';
|
|
6
|
+
import { getAppConfig, configurableDefinitionToInstance, GlobalFlag, configurableOperationValueIsValid, toConfigurableOperationInput, HistoryEntryType, SortOrder, AdjustmentType, BaseDetailComponent, EditNoteDialogComponent, transformRelationCustomFieldInputs, BaseListComponent, LogicalOperator, BaseEntityResolver, createResolveData, CanDeactivateDetailGuard, detailBreadcrumb, SharedModule } from '@vendure/admin-ui/core';
|
|
7
7
|
import * as i3 from '@ng-select/ng-select';
|
|
8
8
|
import * as i4 from '@ngx-translate/core';
|
|
9
9
|
import * as i4$1 from '@angular/common';
|
|
@@ -15,6 +15,7 @@ import { BehaviorSubject, EMPTY, Subject, of, concat, merge } from 'rxjs';
|
|
|
15
15
|
import { tap, debounceTime, switchMap, catchError, retryWhen, delay, take, map, startWith, mapTo, takeUntil, distinctUntilChanged, shareReplay, filter } from 'rxjs/operators';
|
|
16
16
|
import * as i1$1 from '@angular/router';
|
|
17
17
|
import { RouterModule } from '@angular/router';
|
|
18
|
+
import { simpleDeepClone } from '@vendure/common/lib/simple-deep-clone';
|
|
18
19
|
|
|
19
20
|
class AddManualPaymentDialogComponent {
|
|
20
21
|
constructor(dataService) {
|
|
@@ -2105,7 +2106,10 @@ class OrderEditorComponent extends BaseDetailComponent {
|
|
|
2105
2106
|
}
|
|
2106
2107
|
previewAndModify(order) {
|
|
2107
2108
|
var _a;
|
|
2108
|
-
const
|
|
2109
|
+
const modifyOrderInput = Object.assign(Object.assign({}, this.modifyOrderInput), { adjustOrderLines: this.modifyOrderInput.adjustOrderLines.map(line => {
|
|
2110
|
+
return transformRelationCustomFieldInputs(simpleDeepClone(line), this.orderLineCustomFields);
|
|
2111
|
+
}) });
|
|
2112
|
+
const input = Object.assign(Object.assign(Object.assign(Object.assign({}, modifyOrderInput), (this.billingAddressForm.dirty ? { updateBillingAddress: this.billingAddressForm.value } : {})), (this.shippingAddressForm.dirty
|
|
2109
2113
|
? { updateShippingAddress: this.shippingAddressForm.value }
|
|
2110
2114
|
: {})), { dryRun: true, couponCodes: this.couponCodesControl.dirty ? this.couponCodesControl.value : undefined, note: (_a = this.note) !== null && _a !== void 0 ? _a : '', options: {
|
|
2111
2115
|
recalculateShipping: this.recalculateShipping,
|
|
@@ -2197,10 +2201,10 @@ class OrderEditorComponent extends BaseDetailComponent {
|
|
|
2197
2201
|
}
|
|
2198
2202
|
}
|
|
2199
2203
|
OrderEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: OrderEditorComponent, deps: [{ token: i1$1.Router }, { token: i1$1.ActivatedRoute }, { token: i1.ServerConfigService }, { token: i0.ChangeDetectorRef }, { token: i1.DataService }, { token: i1.NotificationService }, { token: i1.ModalService }, { token: OrderTransitionService }], target: i0.ɵɵFactoryTarget.Component });
|
|
2200
|
-
OrderEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: OrderEditorComponent, selector: "vdr-order-editor", usesInheritance: true, ngImport: i0, template: "<vdr-action-bar *ngIf=\"entity$ | async as order\">\r\n <vdr-ab-left>\r\n <div class=\"flex clr-align-items-center\">\r\n <vdr-entity-info [entity]=\"entity$ | async\"></vdr-entity-info>\r\n <vdr-order-state-label [state]=\"order.state\"></vdr-order-state-label>\r\n </div>\r\n </vdr-ab-left>\r\n\r\n <vdr-ab-right>\r\n <button class=\"btn btn-secondary\" (click)=\"transitionToPriorState(order)\">\r\n {{ 'order.cancel-modification' | translate }}\r\n </button>\r\n </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<div *ngIf=\"entity$ | async as order\">\r\n <div class=\"clr-row\">\r\n <div class=\"clr-col-lg-8\">\r\n <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 *ngIf=\"orderLineCustomFields.length\">{{ 'common.custom-fields' | translate }}</th>\r\n <th>{{ 'order.total' | translate }}</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr\r\n *ngFor=\"let line of order.lines; let i = index\"\r\n class=\"order-line\"\r\n [class.is-cancelled]=\"line.quantity === 0\"\r\n [class.modified]=\"isLineModified(line)\"\r\n >\r\n <td class=\"align-middle thumb\">\r\n <img\r\n *ngIf=\"line.featuredAsset\"\r\n [src]=\"line.featuredAsset | assetPreview: 'tiny'\"\r\n />\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 <input\r\n type=\"number\"\r\n min=\"0\"\r\n [value]=\"line.quantity\"\r\n (input)=\"updateLineQuantity(line, $event.target.value)\"\r\n />\r\n <vdr-line-refunds [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\r\n <vdr-line-fulfillment\r\n [line]=\"line\"\r\n [orderState]=\"order.state\"\r\n ></vdr-line-fulfillment>\r\n </td>\r\n <td *ngIf=\"orderLineCustomFields.length\" class=\"order-line-custom-field align-middle\">\r\n <ng-container *ngFor=\"let customField of orderLineCustomFields\">\r\n <vdr-custom-field-control\r\n [customField]=\"customField\"\r\n [customFieldsFormGroup]=\"orderLineCustomFieldsFormArray.get([i])\"\r\n entityName=\"OrderLine\"\r\n [compact]=\"true\"\r\n ></vdr-custom-field-control>\r\n </ng-container>\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 </td>\r\n </tr>\r\n <tr\r\n *ngFor=\"let addedLine of addedLines; trackBy: trackByProductVariantId; let i = index\"\r\n class=\"modified\"\r\n >\r\n <td class=\"align-middle thumb\">\r\n <img\r\n *ngIf=\"addedLine.productAsset\"\r\n [src]=\"addedLine.productAsset | assetPreview: 'tiny'\"\r\n />\r\n </td>\r\n <td class=\"align-middle name\">{{ addedLine.productVariantName }}</td>\r\n <td class=\"align-middle sku\">{{ addedLine.sku }}</td>\r\n <td class=\"align-middle unit-price\">\r\n {{ addedLine.priceWithTax | localeCurrency: order.currencyCode }}\r\n <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n {{ addedLine.price | localeCurrency: order.currencyCode }}\r\n </div>\r\n </td>\r\n <td class=\"align-middle quantity\">\r\n <input\r\n type=\"number\"\r\n min=\"0\"\r\n [value]=\"addedLine.quantity\"\r\n (input)=\"updateAddedItemQuantity(addedLine, $event.target.value)\"\r\n />\r\n <button class=\"icon-button\" (click)=\"removeAddedItem(i)\">\r\n <clr-icon shape=\"trash\"></clr-icon>\r\n </button>\r\n </td>\r\n <td *ngIf=\"orderLineCustomFields.length\" class=\"order-line-custom-field align-middle\">\r\n <ng-container *ngFor=\"let customField of orderLineCustomFields\">\r\n <vdr-custom-field-control\r\n [customField]=\"customField\"\r\n [customFieldsFormGroup]=\"addItemCustomFieldsFormArray.get([i])\"\r\n entityName=\"OrderLine\"\r\n [compact]=\"true\"\r\n ></vdr-custom-field-control>\r\n </ng-container>\r\n </td>\r\n <td class=\"align-middle total\">\r\n {{\r\n (addedLine.priceWithTax * addedLine.quantity) / 100\r\n | currency: order.currencyCode\r\n }}\r\n <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n {{\r\n (addedLine.price * addedLine.quantity) / 100\r\n | currency: order.currencyCode\r\n }}\r\n </div>\r\n </td>\r\n </tr>\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\"></td>\r\n <td></td>\r\n <td *ngIf=\"orderLineCustomFields.length\"></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\r\n class=\"surcharge modified\"\r\n *ngFor=\"let surcharge of modifyOrderInput.surcharges; let i = index\"\r\n >\r\n <td class=\"align-middle name left\" colspan=\"2\">\r\n {{ surcharge.description }}\r\n <button class=\"icon-button\" (click)=\"removeSurcharge(i)\">\r\n <clr-icon shape=\"trash\"></clr-icon>\r\n </button>\r\n </td>\r\n <td class=\"align-middle sku\">{{ surcharge.sku }}</td>\r\n <td class=\"align-middle\"></td>\r\n <td></td>\r\n <td *ngIf=\"orderLineCustomFields.length\"></td>\r\n <td class=\"align-middle total\">\r\n <ng-container *ngIf=\"getSurchargePrices(surcharge) as surchargePrice\">\r\n {{ surchargePrice.priceWithTax | localeCurrency: order.currencyCode }}\r\n <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n {{ surchargePrice.price | localeCurrency: order.currencyCode }}\r\n </div>\r\n </ng-container>\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 *ngIf=\"orderLineCustomFields.length\"></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 </tbody>\r\n </table>\r\n\r\n <h4 class=\"mb2\">{{ 'order.modifications' | translate }}</h4>\r\n <clr-accordion>\r\n <clr-accordion-panel>\r\n <clr-accordion-title>{{ 'order.add-item-to-order' | translate }}</clr-accordion-title>\r\n <clr-accordion-content *clrIfExpanded>\r\n <vdr-product-variant-selector class=\"mb4\" (productSelected)=\"addItemSelectedVariant = $event\">\r\n </vdr-product-variant-selector>\r\n <div *ngIf=\"addItemSelectedVariant\" class=\"flex mb4\">\r\n <img\r\n *ngIf=\"addItemSelectedVariant.productAsset as asset\"\r\n [src]=\"asset | assetPreview: 'tiny'\"\r\n class=\"mr4\"\r\n />\r\n <div>\r\n <strong class=\"mr4\">{{ addItemSelectedVariant.productVariantName }}</strong>\r\n <small>{{ addItemSelectedVariant.sku }}</small>\r\n <div>\r\n {{\r\n getSelectedItemPrice(addItemSelectedVariant)\r\n | localeCurrency: order.currencyCode\r\n }}\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngFor=\"let customField of orderLineCustomFields\">\r\n <vdr-custom-field-control\r\n [readonly]=\"!addItemSelectedVariant\"\r\n [customField]=\"customField\"\r\n [customFieldsFormGroup]=\"addItemCustomFieldsForm\"\r\n entityName=\"OrderLine\"\r\n [compact]=\"true\"\r\n ></vdr-custom-field-control>\r\n </ng-container>\r\n <button\r\n class=\"btn btn-secondary\"\r\n [disabled]=\"!addItemSelectedVariant || addItemCustomFieldsForm.invalid\"\r\n (click)=\"addItemToOrder(addItemSelectedVariant)\"\r\n >\r\n {{ 'order.add-item-to-order' | translate }}\r\n </button>\r\n </clr-accordion-content>\r\n </clr-accordion-panel>\r\n <clr-accordion-panel>\r\n <clr-accordion-title>{{ 'order.set-coupon-codes' | translate }}</clr-accordion-title>\r\n <clr-accordion-content *clrIfExpanded>\r\n <ng-select\r\n [items]=\"availableCouponCodes$ | async\"\r\n appendTo=\"body\"\r\n bindLabel=\"code\"\r\n bindValue=\"code\"\r\n [addTag]=\"false\"\r\n [multiple]=\"true\"\r\n [hideSelected]=\"true\"\r\n [minTermLength]=\"2\"\r\n typeToSearchText=\"\"\r\n [typeahead]=\"couponCodeInput$\"\r\n [formControl]=\"couponCodesControl\"\r\n >\r\n <ng-template ng-option-tmp let-item=\"item\">\r\n <vdr-chip>{{ item.code }}</vdr-chip> {{ item.promotionName }}\r\n </ng-template>\r\n </ng-select>\r\n </clr-accordion-content>\r\n </clr-accordion-panel>\r\n\r\n <clr-accordion-panel>\r\n <clr-accordion-title>{{ 'order.add-surcharge' | translate }}</clr-accordion-title>\r\n <clr-accordion-content *clrIfExpanded>\r\n <form [formGroup]=\"surchargeForm\" (submit)=\"addSurcharge(surchargeForm.value)\">\r\n <vdr-form-field [label]=\"'common.description' | translate\" for=\"description\"\r\n ><input id=\"description\" type=\"text\" formControlName=\"description\"\r\n /></vdr-form-field>\r\n <vdr-form-field [label]=\"'order.product-sku' | translate\" for=\"sku\"\r\n ><input id=\"sku\" type=\"text\" formControlName=\"sku\"\r\n /></vdr-form-field>\r\n <vdr-form-field [label]=\"'common.price' | translate\" for=\"price\"\r\n ><vdr-currency-input\r\n [currencyCode]=\"order.currencyCode\"\r\n id=\"price\"\r\n formControlName=\"price\"\r\n ></vdr-currency-input\r\n ></vdr-form-field>\r\n <vdr-form-field\r\n [label]=\"\r\n 'catalog.price-includes-tax-at'\r\n | translate: { rate: surchargeForm.get('taxRate')?.value }\r\n \"\r\n for=\"priceIncludesTax\"\r\n ><input\r\n id=\"priceIncludesTax\"\r\n type=\"checkbox\"\r\n clrCheckbox\r\n formControlName=\"priceIncludesTax\"\r\n /></vdr-form-field>\r\n <vdr-form-field [label]=\"'order.tax-rate' | translate\" for=\"taxRate\"\r\n ><vdr-affixed-input suffix=\"%\"\r\n ><input\r\n id=\"taxRate\"\r\n type=\"number\"\r\n min=\"0\"\r\n max=\"100\"\r\n formControlName=\"taxRate\" /></vdr-affixed-input\r\n ></vdr-form-field>\r\n <vdr-form-field [label]=\"'order.tax-description' | translate\" for=\"taxDescription\"\r\n ><input id=\"taxDescription\" type=\"text\" formControlName=\"taxDescription\"\r\n /></vdr-form-field>\r\n <button\r\n class=\"btn btn-secondary\"\r\n [disabled]=\"\r\n surchargeForm.invalid ||\r\n surchargeForm.pristine ||\r\n surchargeForm.get('price')?.value === 0\r\n \"\r\n >\r\n {{ 'order.add-surcharge' | translate }}\r\n </button>\r\n </form>\r\n </clr-accordion-content>\r\n </clr-accordion-panel>\r\n <clr-accordion-panel>\r\n <clr-accordion-title>{{ 'order.edit-shipping-address' | translate }}</clr-accordion-title>\r\n <clr-accordion-content *clrIfExpanded>\r\n <vdr-address-form\r\n [formGroup]=\"shippingAddressForm\"\r\n [availableCountries]=\"availableCountries$ | async\"\r\n [customFields]=\"addressCustomFields\"\r\n ></vdr-address-form>\r\n </clr-accordion-content>\r\n </clr-accordion-panel>\r\n <clr-accordion-panel>\r\n <clr-accordion-title>{{ 'order.edit-billing-address' | translate }}</clr-accordion-title>\r\n <clr-accordion-content *clrIfExpanded>\r\n <vdr-address-form\r\n [formGroup]=\"billingAddressForm\"\r\n [availableCountries]=\"availableCountries$ | async\"\r\n [customFields]=\"addressCustomFields\"\r\n ></vdr-address-form>\r\n </clr-accordion-content>\r\n </clr-accordion-panel>\r\n </clr-accordion>\r\n </div>\r\n <div class=\"clr-col-lg-4 order-cards\">\r\n <div class=\"card\">\r\n <div class=\"card-header\">\r\n {{ 'order.modification-summary' | translate }}\r\n </div>\r\n <div class=\"card-block\">\r\n <ul>\r\n <li *ngIf=\"modifyOrderInput.addItems?.length\">\r\n {{\r\n 'order.modification-adding-items'\r\n | translate: { count: modifyOrderInput.addItems?.length }\r\n }}\r\n </li>\r\n <li *ngIf=\"modifyOrderInput.adjustOrderLines?.length\">\r\n {{\r\n 'order.modification-adjusting-lines'\r\n | translate: { count: modifyOrderInput.adjustOrderLines?.length }\r\n }}\r\n </li>\r\n <li *ngIf=\"modifyOrderInput.surcharges?.length\">\r\n {{\r\n 'order.modification-adding-surcharges'\r\n | translate: { count: modifyOrderInput.surcharges?.length }\r\n }}\r\n </li>\r\n <li *ngIf=\"shippingAddressForm.dirty\">\r\n {{ 'order.modification-updating-shipping-address' | translate }}\r\n </li>\r\n <li *ngIf=\"billingAddressForm.dirty\">\r\n {{ 'order.modification-updating-billing-address' | translate }}\r\n </li>\r\n </ul>\r\n </div>\r\n <div class=\"card-block\">\r\n <label class=\"clr-control-label\">{{ 'order.note' | translate }}</label>\r\n <textarea [(ngModel)]=\"note\" name=\"note\" clrTextarea required></textarea>\r\n <clr-checkbox-wrapper class=\"\">\r\n <input type=\"checkbox\" clrCheckbox [(ngModel)]=\"recalculateShipping\" />\r\n <label>{{ 'order.modification-recalculate-shipping' | translate }}</label>\r\n </clr-checkbox-wrapper>\r\n </div>\r\n <div class=\"card-footer\">\r\n <button\r\n class=\"btn btn-primary\"\r\n [disabled]=\"!canPreviewChanges()\"\r\n (click)=\"previewAndModify(order)\"\r\n >\r\n {{ 'order.preview-changes' | translate }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".order-table .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}.order-table .sub-total td{border-top:1px dashed var(--color-component-border-200)}.order-table .total td{font-weight:700;border-top:1px dashed var(--color-component-border-200)}.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 .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}.order-table .net-price{font-size:11px;color:var(--color-text-300)}.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}.order-table .thumb img{width:50px;height:50px}.order-table tr.modified td{background-color:var(--color-warning-100)}\n"], components: [{ type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { type: i1.EntityInfoComponent, selector: "vdr-entity-info", inputs: ["small", "entity"] }, { type: i1.OrderStateLabelComponent, selector: "vdr-order-state-label", inputs: ["state"] }, { type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { type: LineRefundsComponent, selector: "vdr-line-refunds", inputs: ["line", "payments"] }, { type: LineFulfillmentComponent, selector: "vdr-line-fulfillment", inputs: ["line", "orderState"] }, { type: i1.CustomFieldControlComponent, selector: "vdr-custom-field-control", inputs: ["entityName", "customFieldsFormGroup", "customField", "compact", "showLabel", "readonly"] }, { type: i2.ClrAccordion, selector: "clr-accordion", inputs: ["clrAccordionMultiPanel"] }, { type: i2.ClrAccordionPanel, selector: "clr-accordion-panel", inputs: ["clrAccordionPanelDisabled", "clrAccordionPanelOpen"], outputs: ["clrAccordionPanelOpenChange"] }, { type: i2.ClrAccordionTitle, selector: "clr-accordion-title, clr-step-title" }, { type: i2.ClrAccordionContent, selector: "clr-accordion-content, clr-step-content" }, { type: i1.ProductVariantSelectorComponent, selector: "vdr-product-variant-selector", outputs: ["productSelected"] }, { type: i3.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"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"] }, { type: i1.CurrencyInputComponent, selector: "vdr-currency-input", inputs: ["disabled", "readonly", "value", "currencyCode"], outputs: ["valueChange"] }, { type: i1.AffixedInputComponent, selector: "vdr-affixed-input", inputs: ["prefix", "suffix"] }, { type: i1.AddressFormComponent, selector: "vdr-address-form", inputs: ["customFields", "formGroup", "availableCountries"] }, { type: i2.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { type: i2.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { type: i2.ClrIconCustomTag, selector: "clr-icon" }, { type: i2.ÇlrAccordionWillyWonka, selector: "clr-accordion" }, { type: i2.ÇlrAccordionOompaLoompa, selector: "clr-accordion-panel" }, { type: i2.ÇlrDatagridDetailRegisterer, selector: "[clrIfExpanded]" }, { type: i2.ClrIfExpanded, selector: "[clrIfExpanded]", inputs: ["clrIfExpanded"], outputs: ["clrIfExpandedChange"] }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i3$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { type: i3$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i3$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { type: i3$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i2.ClrLabel, selector: "label", inputs: ["for"] }, { type: i2.ClrTextarea, selector: "[clrTextarea]" }, { type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "async": i4$1.AsyncPipe, "translate": i4.TranslatePipe, "assetPreview": i1.AssetPreviewPipe, "localeCurrency": i1.LocaleCurrencyPipe, "currency": i4$1.CurrencyPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2204
|
+
OrderEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: OrderEditorComponent, selector: "vdr-order-editor", usesInheritance: true, ngImport: i0, template: "<vdr-action-bar *ngIf=\"entity$ | async as order\">\r\n <vdr-ab-left>\r\n <div class=\"flex clr-align-items-center\">\r\n <vdr-entity-info [entity]=\"entity$ | async\"></vdr-entity-info>\r\n <vdr-order-state-label [state]=\"order.state\"></vdr-order-state-label>\r\n </div>\r\n </vdr-ab-left>\r\n\r\n <vdr-ab-right>\r\n <button class=\"btn btn-secondary\" (click)=\"transitionToPriorState(order)\">\r\n {{ 'order.cancel-modification' | translate }}\r\n </button>\r\n </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<div *ngIf=\"entity$ | async as order\">\r\n <div class=\"clr-row\">\r\n <div class=\"clr-col-lg-8\">\r\n <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 *ngIf=\"orderLineCustomFields.length\">{{ 'common.custom-fields' | translate }}</th>\r\n <th>{{ 'order.total' | translate }}</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr\r\n *ngFor=\"let line of order.lines; let i = index\"\r\n class=\"order-line\"\r\n [class.is-cancelled]=\"line.quantity === 0\"\r\n [class.modified]=\"isLineModified(line)\"\r\n >\r\n <td class=\"align-middle thumb\">\r\n <img\r\n *ngIf=\"line.featuredAsset\"\r\n [src]=\"line.featuredAsset | assetPreview: 'tiny'\"\r\n />\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 <input\r\n type=\"number\"\r\n min=\"0\"\r\n [value]=\"line.quantity\"\r\n (input)=\"updateLineQuantity(line, $event.target.value)\"\r\n />\r\n <vdr-line-refunds [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\r\n <vdr-line-fulfillment\r\n [line]=\"line\"\r\n [orderState]=\"order.state\"\r\n ></vdr-line-fulfillment>\r\n </td>\r\n <td *ngIf=\"orderLineCustomFields.length\" class=\"order-line-custom-field align-middle\">\r\n <vdr-tabbed-custom-fields\r\n entityName=\"OrderLine\"\r\n [customFields]=\"orderLineCustomFields\"\r\n [customFieldsFormGroup]=\"orderLineCustomFieldsFormArray.get([i])\"\r\n [compact]=\"true\"\r\n ></vdr-tabbed-custom-fields>\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 </td>\r\n </tr>\r\n <tr\r\n *ngFor=\"let addedLine of addedLines; trackBy: trackByProductVariantId; let i = index\"\r\n class=\"modified\"\r\n >\r\n <td class=\"align-middle thumb\">\r\n <img\r\n *ngIf=\"addedLine.productAsset\"\r\n [src]=\"addedLine.productAsset | assetPreview: 'tiny'\"\r\n />\r\n </td>\r\n <td class=\"align-middle name\">{{ addedLine.productVariantName }}</td>\r\n <td class=\"align-middle sku\">{{ addedLine.sku }}</td>\r\n <td class=\"align-middle unit-price\">\r\n {{ addedLine.priceWithTax | localeCurrency: order.currencyCode }}\r\n <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n {{ addedLine.price | localeCurrency: order.currencyCode }}\r\n </div>\r\n </td>\r\n <td class=\"align-middle quantity\">\r\n <input\r\n type=\"number\"\r\n min=\"0\"\r\n [value]=\"addedLine.quantity\"\r\n (input)=\"updateAddedItemQuantity(addedLine, $event.target.value)\"\r\n />\r\n <button class=\"icon-button\" (click)=\"removeAddedItem(i)\">\r\n <clr-icon shape=\"trash\"></clr-icon>\r\n </button>\r\n </td>\r\n <td *ngIf=\"orderLineCustomFields.length\" class=\"order-line-custom-field align-middle\">\r\n <ng-container *ngFor=\"let customField of orderLineCustomFields\">\r\n <vdr-custom-field-control\r\n [customField]=\"customField\"\r\n [customFieldsFormGroup]=\"addItemCustomFieldsFormArray.get([i])\"\r\n entityName=\"OrderLine\"\r\n [compact]=\"true\"\r\n ></vdr-custom-field-control>\r\n </ng-container>\r\n </td>\r\n <td class=\"align-middle total\">\r\n {{\r\n (addedLine.priceWithTax * addedLine.quantity) / 100\r\n | currency: order.currencyCode\r\n }}\r\n <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n {{\r\n (addedLine.price * addedLine.quantity) / 100\r\n | currency: order.currencyCode\r\n }}\r\n </div>\r\n </td>\r\n </tr>\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\"></td>\r\n <td></td>\r\n <td *ngIf=\"orderLineCustomFields.length\"></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\r\n class=\"surcharge modified\"\r\n *ngFor=\"let surcharge of modifyOrderInput.surcharges; let i = index\"\r\n >\r\n <td class=\"align-middle name left\" colspan=\"2\">\r\n {{ surcharge.description }}\r\n <button class=\"icon-button\" (click)=\"removeSurcharge(i)\">\r\n <clr-icon shape=\"trash\"></clr-icon>\r\n </button>\r\n </td>\r\n <td class=\"align-middle sku\">{{ surcharge.sku }}</td>\r\n <td class=\"align-middle\"></td>\r\n <td></td>\r\n <td *ngIf=\"orderLineCustomFields.length\"></td>\r\n <td class=\"align-middle total\">\r\n <ng-container *ngIf=\"getSurchargePrices(surcharge) as surchargePrice\">\r\n {{ surchargePrice.priceWithTax | localeCurrency: order.currencyCode }}\r\n <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n {{ surchargePrice.price | localeCurrency: order.currencyCode }}\r\n </div>\r\n </ng-container>\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 *ngIf=\"orderLineCustomFields.length\"></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 </tbody>\r\n </table>\r\n\r\n <h4 class=\"mb2\">{{ 'order.modifications' | translate }}</h4>\r\n <clr-accordion>\r\n <clr-accordion-panel>\r\n <clr-accordion-title>{{ 'order.add-item-to-order' | translate }}</clr-accordion-title>\r\n <clr-accordion-content *clrIfExpanded>\r\n <vdr-product-variant-selector class=\"mb4\" (productSelected)=\"addItemSelectedVariant = $event\">\r\n </vdr-product-variant-selector>\r\n <div *ngIf=\"addItemSelectedVariant\" class=\"flex mb4\">\r\n <img\r\n *ngIf=\"addItemSelectedVariant.productAsset as asset\"\r\n [src]=\"asset | assetPreview: 'tiny'\"\r\n class=\"mr4\"\r\n />\r\n <div>\r\n <strong class=\"mr4\">{{ addItemSelectedVariant.productVariantName }}</strong>\r\n <small>{{ addItemSelectedVariant.sku }}</small>\r\n <div>\r\n {{\r\n getSelectedItemPrice(addItemSelectedVariant)\r\n | localeCurrency: order.currencyCode\r\n }}\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngFor=\"let customField of orderLineCustomFields\">\r\n <vdr-custom-field-control\r\n [readonly]=\"!addItemSelectedVariant\"\r\n [customField]=\"customField\"\r\n [customFieldsFormGroup]=\"addItemCustomFieldsForm\"\r\n entityName=\"OrderLine\"\r\n [compact]=\"true\"\r\n ></vdr-custom-field-control>\r\n </ng-container>\r\n <button\r\n class=\"btn btn-secondary\"\r\n [disabled]=\"!addItemSelectedVariant || addItemCustomFieldsForm.invalid\"\r\n (click)=\"addItemToOrder(addItemSelectedVariant)\"\r\n >\r\n {{ 'order.add-item-to-order' | translate }}\r\n </button>\r\n </clr-accordion-content>\r\n </clr-accordion-panel>\r\n <clr-accordion-panel>\r\n <clr-accordion-title>{{ 'order.set-coupon-codes' | translate }}</clr-accordion-title>\r\n <clr-accordion-content *clrIfExpanded>\r\n <ng-select\r\n [items]=\"availableCouponCodes$ | async\"\r\n appendTo=\"body\"\r\n bindLabel=\"code\"\r\n bindValue=\"code\"\r\n [addTag]=\"false\"\r\n [multiple]=\"true\"\r\n [hideSelected]=\"true\"\r\n [minTermLength]=\"2\"\r\n typeToSearchText=\"\"\r\n [typeahead]=\"couponCodeInput$\"\r\n [formControl]=\"couponCodesControl\"\r\n >\r\n <ng-template ng-option-tmp let-item=\"item\">\r\n <vdr-chip>{{ item.code }}</vdr-chip>\r\n {{ item.promotionName }}\r\n </ng-template>\r\n </ng-select>\r\n </clr-accordion-content>\r\n </clr-accordion-panel>\r\n\r\n <clr-accordion-panel>\r\n <clr-accordion-title>{{ 'order.add-surcharge' | translate }}</clr-accordion-title>\r\n <clr-accordion-content *clrIfExpanded>\r\n <form [formGroup]=\"surchargeForm\" (submit)=\"addSurcharge(surchargeForm.value)\">\r\n <vdr-form-field [label]=\"'common.description' | translate\" for=\"description\"\r\n ><input id=\"description\" type=\"text\" formControlName=\"description\"\r\n /></vdr-form-field>\r\n <vdr-form-field [label]=\"'order.product-sku' | translate\" for=\"sku\"\r\n ><input id=\"sku\" type=\"text\" formControlName=\"sku\"\r\n /></vdr-form-field>\r\n <vdr-form-field [label]=\"'common.price' | translate\" for=\"price\">\r\n <vdr-currency-input\r\n [currencyCode]=\"order.currencyCode\"\r\n id=\"price\"\r\n formControlName=\"price\"\r\n ></vdr-currency-input>\r\n </vdr-form-field>\r\n <vdr-form-field\r\n [label]=\"\r\n 'catalog.price-includes-tax-at'\r\n | translate: { rate: surchargeForm.get('taxRate')?.value }\r\n \"\r\n for=\"priceIncludesTax\"\r\n ><input\r\n id=\"priceIncludesTax\"\r\n type=\"checkbox\"\r\n clrCheckbox\r\n formControlName=\"priceIncludesTax\"\r\n /></vdr-form-field>\r\n <vdr-form-field [label]=\"'order.tax-rate' | translate\" for=\"taxRate\">\r\n <vdr-affixed-input suffix=\"%\"\r\n ><input\r\n id=\"taxRate\"\r\n type=\"number\"\r\n min=\"0\"\r\n max=\"100\"\r\n formControlName=\"taxRate\"\r\n /></vdr-affixed-input>\r\n </vdr-form-field>\r\n <vdr-form-field [label]=\"'order.tax-description' | translate\" for=\"taxDescription\"\r\n ><input id=\"taxDescription\" type=\"text\" formControlName=\"taxDescription\"\r\n /></vdr-form-field>\r\n <button\r\n class=\"btn btn-secondary\"\r\n [disabled]=\"\r\n surchargeForm.invalid ||\r\n surchargeForm.pristine ||\r\n surchargeForm.get('price')?.value === 0\r\n \"\r\n >\r\n {{ 'order.add-surcharge' | translate }}\r\n </button>\r\n </form>\r\n </clr-accordion-content>\r\n </clr-accordion-panel>\r\n <clr-accordion-panel>\r\n <clr-accordion-title>{{ 'order.edit-shipping-address' | translate }}</clr-accordion-title>\r\n <clr-accordion-content *clrIfExpanded>\r\n <vdr-address-form\r\n [formGroup]=\"shippingAddressForm\"\r\n [availableCountries]=\"availableCountries$ | async\"\r\n [customFields]=\"addressCustomFields\"\r\n ></vdr-address-form>\r\n </clr-accordion-content>\r\n </clr-accordion-panel>\r\n <clr-accordion-panel>\r\n <clr-accordion-title>{{ 'order.edit-billing-address' | translate }}</clr-accordion-title>\r\n <clr-accordion-content *clrIfExpanded>\r\n <vdr-address-form\r\n [formGroup]=\"billingAddressForm\"\r\n [availableCountries]=\"availableCountries$ | async\"\r\n [customFields]=\"addressCustomFields\"\r\n ></vdr-address-form>\r\n </clr-accordion-content>\r\n </clr-accordion-panel>\r\n </clr-accordion>\r\n </div>\r\n <div class=\"clr-col-lg-4 order-cards\">\r\n <div class=\"card\">\r\n <div class=\"card-header\">\r\n {{ 'order.modification-summary' | translate }}\r\n </div>\r\n <div class=\"card-block\">\r\n <ul>\r\n <li *ngIf=\"modifyOrderInput.addItems?.length\">\r\n {{\r\n 'order.modification-adding-items'\r\n | translate: { count: modifyOrderInput.addItems?.length }\r\n }}\r\n </li>\r\n <li *ngIf=\"modifyOrderInput.adjustOrderLines?.length\">\r\n {{\r\n 'order.modification-adjusting-lines'\r\n | translate: { count: modifyOrderInput.adjustOrderLines?.length }\r\n }}\r\n </li>\r\n <li *ngIf=\"modifyOrderInput.surcharges?.length\">\r\n {{\r\n 'order.modification-adding-surcharges'\r\n | translate: { count: modifyOrderInput.surcharges?.length }\r\n }}\r\n </li>\r\n <li *ngIf=\"shippingAddressForm.dirty\">\r\n {{ 'order.modification-updating-shipping-address' | translate }}\r\n </li>\r\n <li *ngIf=\"billingAddressForm.dirty\">\r\n {{ 'order.modification-updating-billing-address' | translate }}\r\n </li>\r\n </ul>\r\n </div>\r\n <div class=\"card-block\">\r\n <label class=\"clr-control-label\">{{ 'order.note' | translate }}</label>\r\n <textarea [(ngModel)]=\"note\" name=\"note\" clrTextarea required></textarea>\r\n <clr-checkbox-wrapper class=\"\">\r\n <input type=\"checkbox\" clrCheckbox [(ngModel)]=\"recalculateShipping\" />\r\n <label>{{ 'order.modification-recalculate-shipping' | translate }}</label>\r\n </clr-checkbox-wrapper>\r\n </div>\r\n <div class=\"card-footer\">\r\n <button\r\n class=\"btn btn-primary\"\r\n [disabled]=\"!canPreviewChanges()\"\r\n (click)=\"previewAndModify(order)\"\r\n >\r\n {{ 'order.preview-changes' | translate }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".order-table .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}.order-table .sub-total td{border-top:1px dashed var(--color-component-border-200)}.order-table .total td{font-weight:700;border-top:1px dashed var(--color-component-border-200)}.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 .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}.order-table .net-price{font-size:11px;color:var(--color-text-300)}.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}.order-table .thumb img{width:50px;height:50px}.order-table tr.modified td{background-color:var(--color-warning-100)}.order-table .order-line-custom-field{text-align:start}\n"], components: [{ type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { type: i1.EntityInfoComponent, selector: "vdr-entity-info", inputs: ["small", "entity"] }, { type: i1.OrderStateLabelComponent, selector: "vdr-order-state-label", inputs: ["state"] }, { type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { type: LineRefundsComponent, selector: "vdr-line-refunds", inputs: ["line", "payments"] }, { type: LineFulfillmentComponent, selector: "vdr-line-fulfillment", inputs: ["line", "orderState"] }, { type: i1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { type: i1.CustomFieldControlComponent, selector: "vdr-custom-field-control", inputs: ["entityName", "customFieldsFormGroup", "customField", "compact", "showLabel", "readonly"] }, { type: i2.ClrAccordion, selector: "clr-accordion", inputs: ["clrAccordionMultiPanel"] }, { type: i2.ClrAccordionPanel, selector: "clr-accordion-panel", inputs: ["clrAccordionPanelDisabled", "clrAccordionPanelOpen"], outputs: ["clrAccordionPanelOpenChange"] }, { type: i2.ClrAccordionTitle, selector: "clr-accordion-title, clr-step-title" }, { type: i2.ClrAccordionContent, selector: "clr-accordion-content, clr-step-content" }, { type: i1.ProductVariantSelectorComponent, selector: "vdr-product-variant-selector", outputs: ["productSelected"] }, { type: i3.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"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"] }, { type: i1.CurrencyInputComponent, selector: "vdr-currency-input", inputs: ["disabled", "readonly", "value", "currencyCode"], outputs: ["valueChange"] }, { type: i1.AffixedInputComponent, selector: "vdr-affixed-input", inputs: ["prefix", "suffix"] }, { type: i1.AddressFormComponent, selector: "vdr-address-form", inputs: ["customFields", "formGroup", "availableCountries"] }, { type: i2.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { type: i2.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { type: i2.ClrIconCustomTag, selector: "clr-icon" }, { type: i2.ÇlrAccordionWillyWonka, selector: "clr-accordion" }, { type: i2.ÇlrAccordionOompaLoompa, selector: "clr-accordion-panel" }, { type: i2.ÇlrDatagridDetailRegisterer, selector: "[clrIfExpanded]" }, { type: i2.ClrIfExpanded, selector: "[clrIfExpanded]", inputs: ["clrIfExpanded"], outputs: ["clrIfExpandedChange"] }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i3$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { type: i3$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i3$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { type: i3$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i2.ClrLabel, selector: "label", inputs: ["for"] }, { type: i2.ClrTextarea, selector: "[clrTextarea]" }, { type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "async": i4$1.AsyncPipe, "translate": i4.TranslatePipe, "assetPreview": i1.AssetPreviewPipe, "localeCurrency": i1.LocaleCurrencyPipe, "currency": i4$1.CurrencyPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2201
2205
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: OrderEditorComponent, decorators: [{
|
|
2202
2206
|
type: Component,
|
|
2203
|
-
args: [{ selector: 'vdr-order-editor', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-action-bar *ngIf=\"entity$ | async as order\">\r\n <vdr-ab-left>\r\n <div class=\"flex clr-align-items-center\">\r\n <vdr-entity-info [entity]=\"entity$ | async\"></vdr-entity-info>\r\n <vdr-order-state-label [state]=\"order.state\"></vdr-order-state-label>\r\n </div>\r\n </vdr-ab-left>\r\n\r\n <vdr-ab-right>\r\n <button class=\"btn btn-secondary\" (click)=\"transitionToPriorState(order)\">\r\n {{ 'order.cancel-modification' | translate }}\r\n </button>\r\n </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<div *ngIf=\"entity$ | async as order\">\r\n <div class=\"clr-row\">\r\n <div class=\"clr-col-lg-8\">\r\n <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 *ngIf=\"orderLineCustomFields.length\">{{ 'common.custom-fields' | translate }}</th>\r\n <th>{{ 'order.total' | translate }}</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr\r\n *ngFor=\"let line of order.lines; let i = index\"\r\n class=\"order-line\"\r\n [class.is-cancelled]=\"line.quantity === 0\"\r\n [class.modified]=\"isLineModified(line)\"\r\n >\r\n <td class=\"align-middle thumb\">\r\n <img\r\n *ngIf=\"line.featuredAsset\"\r\n [src]=\"line.featuredAsset | assetPreview: 'tiny'\"\r\n />\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 <input\r\n type=\"number\"\r\n min=\"0\"\r\n [value]=\"line.quantity\"\r\n (input)=\"updateLineQuantity(line, $event.target.value)\"\r\n />\r\n <vdr-line-refunds [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\r\n <vdr-line-fulfillment\r\n [line]=\"line\"\r\n [orderState]=\"order.state\"\r\n ></vdr-line-fulfillment>\r\n </td>\r\n <td *ngIf=\"orderLineCustomFields.length\" class=\"order-line-custom-field align-middle\">\r\n <ng-container *ngFor=\"let customField of orderLineCustomFields\">\r\n <vdr-custom-field-control\r\n [customField]=\"customField\"\r\n [customFieldsFormGroup]=\"orderLineCustomFieldsFormArray.get([i])\"\r\n entityName=\"OrderLine\"\r\n [compact]=\"true\"\r\n ></vdr-custom-field-control>\r\n </ng-container>\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 </td>\r\n </tr>\r\n <tr\r\n *ngFor=\"let addedLine of addedLines; trackBy: trackByProductVariantId; let i = index\"\r\n class=\"modified\"\r\n >\r\n <td class=\"align-middle thumb\">\r\n <img\r\n *ngIf=\"addedLine.productAsset\"\r\n [src]=\"addedLine.productAsset | assetPreview: 'tiny'\"\r\n />\r\n </td>\r\n <td class=\"align-middle name\">{{ addedLine.productVariantName }}</td>\r\n <td class=\"align-middle sku\">{{ addedLine.sku }}</td>\r\n <td class=\"align-middle unit-price\">\r\n {{ addedLine.priceWithTax | localeCurrency: order.currencyCode }}\r\n <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n {{ addedLine.price | localeCurrency: order.currencyCode }}\r\n </div>\r\n </td>\r\n <td class=\"align-middle quantity\">\r\n <input\r\n type=\"number\"\r\n min=\"0\"\r\n [value]=\"addedLine.quantity\"\r\n (input)=\"updateAddedItemQuantity(addedLine, $event.target.value)\"\r\n />\r\n <button class=\"icon-button\" (click)=\"removeAddedItem(i)\">\r\n <clr-icon shape=\"trash\"></clr-icon>\r\n </button>\r\n </td>\r\n <td *ngIf=\"orderLineCustomFields.length\" class=\"order-line-custom-field align-middle\">\r\n <ng-container *ngFor=\"let customField of orderLineCustomFields\">\r\n <vdr-custom-field-control\r\n [customField]=\"customField\"\r\n [customFieldsFormGroup]=\"addItemCustomFieldsFormArray.get([i])\"\r\n entityName=\"OrderLine\"\r\n [compact]=\"true\"\r\n ></vdr-custom-field-control>\r\n </ng-container>\r\n </td>\r\n <td class=\"align-middle total\">\r\n {{\r\n (addedLine.priceWithTax * addedLine.quantity) / 100\r\n | currency: order.currencyCode\r\n }}\r\n <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n {{\r\n (addedLine.price * addedLine.quantity) / 100\r\n | currency: order.currencyCode\r\n }}\r\n </div>\r\n </td>\r\n </tr>\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\"></td>\r\n <td></td>\r\n <td *ngIf=\"orderLineCustomFields.length\"></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\r\n class=\"surcharge modified\"\r\n *ngFor=\"let surcharge of modifyOrderInput.surcharges; let i = index\"\r\n >\r\n <td class=\"align-middle name left\" colspan=\"2\">\r\n {{ surcharge.description }}\r\n <button class=\"icon-button\" (click)=\"removeSurcharge(i)\">\r\n <clr-icon shape=\"trash\"></clr-icon>\r\n </button>\r\n </td>\r\n <td class=\"align-middle sku\">{{ surcharge.sku }}</td>\r\n <td class=\"align-middle\"></td>\r\n <td></td>\r\n <td *ngIf=\"orderLineCustomFields.length\"></td>\r\n <td class=\"align-middle total\">\r\n <ng-container *ngIf=\"getSurchargePrices(surcharge) as surchargePrice\">\r\n {{ surchargePrice.priceWithTax | localeCurrency: order.currencyCode }}\r\n <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n {{ surchargePrice.price | localeCurrency: order.currencyCode }}\r\n </div>\r\n </ng-container>\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 *ngIf=\"orderLineCustomFields.length\"></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 </tbody>\r\n </table>\r\n\r\n <h4 class=\"mb2\">{{ 'order.modifications' | translate }}</h4>\r\n <clr-accordion>\r\n <clr-accordion-panel>\r\n <clr-accordion-title>{{ 'order.add-item-to-order' | translate }}</clr-accordion-title>\r\n <clr-accordion-content *clrIfExpanded>\r\n <vdr-product-variant-selector class=\"mb4\" (productSelected)=\"addItemSelectedVariant = $event\">\r\n </vdr-product-variant-selector>\r\n <div *ngIf=\"addItemSelectedVariant\" class=\"flex mb4\">\r\n <img\r\n *ngIf=\"addItemSelectedVariant.productAsset as asset\"\r\n [src]=\"asset | assetPreview: 'tiny'\"\r\n class=\"mr4\"\r\n />\r\n <div>\r\n <strong class=\"mr4\">{{ addItemSelectedVariant.productVariantName }}</strong>\r\n <small>{{ addItemSelectedVariant.sku }}</small>\r\n <div>\r\n {{\r\n getSelectedItemPrice(addItemSelectedVariant)\r\n | localeCurrency: order.currencyCode\r\n }}\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngFor=\"let customField of orderLineCustomFields\">\r\n <vdr-custom-field-control\r\n [readonly]=\"!addItemSelectedVariant\"\r\n [customField]=\"customField\"\r\n [customFieldsFormGroup]=\"addItemCustomFieldsForm\"\r\n entityName=\"OrderLine\"\r\n [compact]=\"true\"\r\n ></vdr-custom-field-control>\r\n </ng-container>\r\n <button\r\n class=\"btn btn-secondary\"\r\n [disabled]=\"!addItemSelectedVariant || addItemCustomFieldsForm.invalid\"\r\n (click)=\"addItemToOrder(addItemSelectedVariant)\"\r\n >\r\n {{ 'order.add-item-to-order' | translate }}\r\n </button>\r\n </clr-accordion-content>\r\n </clr-accordion-panel>\r\n <clr-accordion-panel>\r\n <clr-accordion-title>{{ 'order.set-coupon-codes' | translate }}</clr-accordion-title>\r\n <clr-accordion-content *clrIfExpanded>\r\n <ng-select\r\n [items]=\"availableCouponCodes$ | async\"\r\n appendTo=\"body\"\r\n bindLabel=\"code\"\r\n bindValue=\"code\"\r\n [addTag]=\"false\"\r\n [multiple]=\"true\"\r\n [hideSelected]=\"true\"\r\n [minTermLength]=\"2\"\r\n typeToSearchText=\"\"\r\n [typeahead]=\"couponCodeInput$\"\r\n [formControl]=\"couponCodesControl\"\r\n >\r\n <ng-template ng-option-tmp let-item=\"item\">\r\n <vdr-chip>{{ item.code }}</vdr-chip> {{ item.promotionName }}\r\n </ng-template>\r\n </ng-select>\r\n </clr-accordion-content>\r\n </clr-accordion-panel>\r\n\r\n <clr-accordion-panel>\r\n <clr-accordion-title>{{ 'order.add-surcharge' | translate }}</clr-accordion-title>\r\n <clr-accordion-content *clrIfExpanded>\r\n <form [formGroup]=\"surchargeForm\" (submit)=\"addSurcharge(surchargeForm.value)\">\r\n <vdr-form-field [label]=\"'common.description' | translate\" for=\"description\"\r\n ><input id=\"description\" type=\"text\" formControlName=\"description\"\r\n /></vdr-form-field>\r\n <vdr-form-field [label]=\"'order.product-sku' | translate\" for=\"sku\"\r\n ><input id=\"sku\" type=\"text\" formControlName=\"sku\"\r\n /></vdr-form-field>\r\n <vdr-form-field [label]=\"'common.price' | translate\" for=\"price\"\r\n ><vdr-currency-input\r\n [currencyCode]=\"order.currencyCode\"\r\n id=\"price\"\r\n formControlName=\"price\"\r\n ></vdr-currency-input\r\n ></vdr-form-field>\r\n <vdr-form-field\r\n [label]=\"\r\n 'catalog.price-includes-tax-at'\r\n | translate: { rate: surchargeForm.get('taxRate')?.value }\r\n \"\r\n for=\"priceIncludesTax\"\r\n ><input\r\n id=\"priceIncludesTax\"\r\n type=\"checkbox\"\r\n clrCheckbox\r\n formControlName=\"priceIncludesTax\"\r\n /></vdr-form-field>\r\n <vdr-form-field [label]=\"'order.tax-rate' | translate\" for=\"taxRate\"\r\n ><vdr-affixed-input suffix=\"%\"\r\n ><input\r\n id=\"taxRate\"\r\n type=\"number\"\r\n min=\"0\"\r\n max=\"100\"\r\n formControlName=\"taxRate\" /></vdr-affixed-input\r\n ></vdr-form-field>\r\n <vdr-form-field [label]=\"'order.tax-description' | translate\" for=\"taxDescription\"\r\n ><input id=\"taxDescription\" type=\"text\" formControlName=\"taxDescription\"\r\n /></vdr-form-field>\r\n <button\r\n class=\"btn btn-secondary\"\r\n [disabled]=\"\r\n surchargeForm.invalid ||\r\n surchargeForm.pristine ||\r\n surchargeForm.get('price')?.value === 0\r\n \"\r\n >\r\n {{ 'order.add-surcharge' | translate }}\r\n </button>\r\n </form>\r\n </clr-accordion-content>\r\n </clr-accordion-panel>\r\n <clr-accordion-panel>\r\n <clr-accordion-title>{{ 'order.edit-shipping-address' | translate }}</clr-accordion-title>\r\n <clr-accordion-content *clrIfExpanded>\r\n <vdr-address-form\r\n [formGroup]=\"shippingAddressForm\"\r\n [availableCountries]=\"availableCountries$ | async\"\r\n [customFields]=\"addressCustomFields\"\r\n ></vdr-address-form>\r\n </clr-accordion-content>\r\n </clr-accordion-panel>\r\n <clr-accordion-panel>\r\n <clr-accordion-title>{{ 'order.edit-billing-address' | translate }}</clr-accordion-title>\r\n <clr-accordion-content *clrIfExpanded>\r\n <vdr-address-form\r\n [formGroup]=\"billingAddressForm\"\r\n [availableCountries]=\"availableCountries$ | async\"\r\n [customFields]=\"addressCustomFields\"\r\n ></vdr-address-form>\r\n </clr-accordion-content>\r\n </clr-accordion-panel>\r\n </clr-accordion>\r\n </div>\r\n <div class=\"clr-col-lg-4 order-cards\">\r\n <div class=\"card\">\r\n <div class=\"card-header\">\r\n {{ 'order.modification-summary' | translate }}\r\n </div>\r\n <div class=\"card-block\">\r\n <ul>\r\n <li *ngIf=\"modifyOrderInput.addItems?.length\">\r\n {{\r\n 'order.modification-adding-items'\r\n | translate: { count: modifyOrderInput.addItems?.length }\r\n }}\r\n </li>\r\n <li *ngIf=\"modifyOrderInput.adjustOrderLines?.length\">\r\n {{\r\n 'order.modification-adjusting-lines'\r\n | translate: { count: modifyOrderInput.adjustOrderLines?.length }\r\n }}\r\n </li>\r\n <li *ngIf=\"modifyOrderInput.surcharges?.length\">\r\n {{\r\n 'order.modification-adding-surcharges'\r\n | translate: { count: modifyOrderInput.surcharges?.length }\r\n }}\r\n </li>\r\n <li *ngIf=\"shippingAddressForm.dirty\">\r\n {{ 'order.modification-updating-shipping-address' | translate }}\r\n </li>\r\n <li *ngIf=\"billingAddressForm.dirty\">\r\n {{ 'order.modification-updating-billing-address' | translate }}\r\n </li>\r\n </ul>\r\n </div>\r\n <div class=\"card-block\">\r\n <label class=\"clr-control-label\">{{ 'order.note' | translate }}</label>\r\n <textarea [(ngModel)]=\"note\" name=\"note\" clrTextarea required></textarea>\r\n <clr-checkbox-wrapper class=\"\">\r\n <input type=\"checkbox\" clrCheckbox [(ngModel)]=\"recalculateShipping\" />\r\n <label>{{ 'order.modification-recalculate-shipping' | translate }}</label>\r\n </clr-checkbox-wrapper>\r\n </div>\r\n <div class=\"card-footer\">\r\n <button\r\n class=\"btn btn-primary\"\r\n [disabled]=\"!canPreviewChanges()\"\r\n (click)=\"previewAndModify(order)\"\r\n >\r\n {{ 'order.preview-changes' | translate }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".order-table .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}.order-table .sub-total td{border-top:1px dashed var(--color-component-border-200)}.order-table .total td{font-weight:700;border-top:1px dashed var(--color-component-border-200)}.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 .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}.order-table .net-price{font-size:11px;color:var(--color-text-300)}.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}.order-table .thumb img{width:50px;height:50px}.order-table tr.modified td{background-color:var(--color-warning-100)}\n"] }]
|
|
2207
|
+
args: [{ selector: 'vdr-order-editor', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-action-bar *ngIf=\"entity$ | async as order\">\r\n <vdr-ab-left>\r\n <div class=\"flex clr-align-items-center\">\r\n <vdr-entity-info [entity]=\"entity$ | async\"></vdr-entity-info>\r\n <vdr-order-state-label [state]=\"order.state\"></vdr-order-state-label>\r\n </div>\r\n </vdr-ab-left>\r\n\r\n <vdr-ab-right>\r\n <button class=\"btn btn-secondary\" (click)=\"transitionToPriorState(order)\">\r\n {{ 'order.cancel-modification' | translate }}\r\n </button>\r\n </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<div *ngIf=\"entity$ | async as order\">\r\n <div class=\"clr-row\">\r\n <div class=\"clr-col-lg-8\">\r\n <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 *ngIf=\"orderLineCustomFields.length\">{{ 'common.custom-fields' | translate }}</th>\r\n <th>{{ 'order.total' | translate }}</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr\r\n *ngFor=\"let line of order.lines; let i = index\"\r\n class=\"order-line\"\r\n [class.is-cancelled]=\"line.quantity === 0\"\r\n [class.modified]=\"isLineModified(line)\"\r\n >\r\n <td class=\"align-middle thumb\">\r\n <img\r\n *ngIf=\"line.featuredAsset\"\r\n [src]=\"line.featuredAsset | assetPreview: 'tiny'\"\r\n />\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 <input\r\n type=\"number\"\r\n min=\"0\"\r\n [value]=\"line.quantity\"\r\n (input)=\"updateLineQuantity(line, $event.target.value)\"\r\n />\r\n <vdr-line-refunds [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\r\n <vdr-line-fulfillment\r\n [line]=\"line\"\r\n [orderState]=\"order.state\"\r\n ></vdr-line-fulfillment>\r\n </td>\r\n <td *ngIf=\"orderLineCustomFields.length\" class=\"order-line-custom-field align-middle\">\r\n <vdr-tabbed-custom-fields\r\n entityName=\"OrderLine\"\r\n [customFields]=\"orderLineCustomFields\"\r\n [customFieldsFormGroup]=\"orderLineCustomFieldsFormArray.get([i])\"\r\n [compact]=\"true\"\r\n ></vdr-tabbed-custom-fields>\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 </td>\r\n </tr>\r\n <tr\r\n *ngFor=\"let addedLine of addedLines; trackBy: trackByProductVariantId; let i = index\"\r\n class=\"modified\"\r\n >\r\n <td class=\"align-middle thumb\">\r\n <img\r\n *ngIf=\"addedLine.productAsset\"\r\n [src]=\"addedLine.productAsset | assetPreview: 'tiny'\"\r\n />\r\n </td>\r\n <td class=\"align-middle name\">{{ addedLine.productVariantName }}</td>\r\n <td class=\"align-middle sku\">{{ addedLine.sku }}</td>\r\n <td class=\"align-middle unit-price\">\r\n {{ addedLine.priceWithTax | localeCurrency: order.currencyCode }}\r\n <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n {{ addedLine.price | localeCurrency: order.currencyCode }}\r\n </div>\r\n </td>\r\n <td class=\"align-middle quantity\">\r\n <input\r\n type=\"number\"\r\n min=\"0\"\r\n [value]=\"addedLine.quantity\"\r\n (input)=\"updateAddedItemQuantity(addedLine, $event.target.value)\"\r\n />\r\n <button class=\"icon-button\" (click)=\"removeAddedItem(i)\">\r\n <clr-icon shape=\"trash\"></clr-icon>\r\n </button>\r\n </td>\r\n <td *ngIf=\"orderLineCustomFields.length\" class=\"order-line-custom-field align-middle\">\r\n <ng-container *ngFor=\"let customField of orderLineCustomFields\">\r\n <vdr-custom-field-control\r\n [customField]=\"customField\"\r\n [customFieldsFormGroup]=\"addItemCustomFieldsFormArray.get([i])\"\r\n entityName=\"OrderLine\"\r\n [compact]=\"true\"\r\n ></vdr-custom-field-control>\r\n </ng-container>\r\n </td>\r\n <td class=\"align-middle total\">\r\n {{\r\n (addedLine.priceWithTax * addedLine.quantity) / 100\r\n | currency: order.currencyCode\r\n }}\r\n <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n {{\r\n (addedLine.price * addedLine.quantity) / 100\r\n | currency: order.currencyCode\r\n }}\r\n </div>\r\n </td>\r\n </tr>\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\"></td>\r\n <td></td>\r\n <td *ngIf=\"orderLineCustomFields.length\"></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\r\n class=\"surcharge modified\"\r\n *ngFor=\"let surcharge of modifyOrderInput.surcharges; let i = index\"\r\n >\r\n <td class=\"align-middle name left\" colspan=\"2\">\r\n {{ surcharge.description }}\r\n <button class=\"icon-button\" (click)=\"removeSurcharge(i)\">\r\n <clr-icon shape=\"trash\"></clr-icon>\r\n </button>\r\n </td>\r\n <td class=\"align-middle sku\">{{ surcharge.sku }}</td>\r\n <td class=\"align-middle\"></td>\r\n <td></td>\r\n <td *ngIf=\"orderLineCustomFields.length\"></td>\r\n <td class=\"align-middle total\">\r\n <ng-container *ngIf=\"getSurchargePrices(surcharge) as surchargePrice\">\r\n {{ surchargePrice.priceWithTax | localeCurrency: order.currencyCode }}\r\n <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n {{ surchargePrice.price | localeCurrency: order.currencyCode }}\r\n </div>\r\n </ng-container>\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 *ngIf=\"orderLineCustomFields.length\"></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 </tbody>\r\n </table>\r\n\r\n <h4 class=\"mb2\">{{ 'order.modifications' | translate }}</h4>\r\n <clr-accordion>\r\n <clr-accordion-panel>\r\n <clr-accordion-title>{{ 'order.add-item-to-order' | translate }}</clr-accordion-title>\r\n <clr-accordion-content *clrIfExpanded>\r\n <vdr-product-variant-selector class=\"mb4\" (productSelected)=\"addItemSelectedVariant = $event\">\r\n </vdr-product-variant-selector>\r\n <div *ngIf=\"addItemSelectedVariant\" class=\"flex mb4\">\r\n <img\r\n *ngIf=\"addItemSelectedVariant.productAsset as asset\"\r\n [src]=\"asset | assetPreview: 'tiny'\"\r\n class=\"mr4\"\r\n />\r\n <div>\r\n <strong class=\"mr4\">{{ addItemSelectedVariant.productVariantName }}</strong>\r\n <small>{{ addItemSelectedVariant.sku }}</small>\r\n <div>\r\n {{\r\n getSelectedItemPrice(addItemSelectedVariant)\r\n | localeCurrency: order.currencyCode\r\n }}\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngFor=\"let customField of orderLineCustomFields\">\r\n <vdr-custom-field-control\r\n [readonly]=\"!addItemSelectedVariant\"\r\n [customField]=\"customField\"\r\n [customFieldsFormGroup]=\"addItemCustomFieldsForm\"\r\n entityName=\"OrderLine\"\r\n [compact]=\"true\"\r\n ></vdr-custom-field-control>\r\n </ng-container>\r\n <button\r\n class=\"btn btn-secondary\"\r\n [disabled]=\"!addItemSelectedVariant || addItemCustomFieldsForm.invalid\"\r\n (click)=\"addItemToOrder(addItemSelectedVariant)\"\r\n >\r\n {{ 'order.add-item-to-order' | translate }}\r\n </button>\r\n </clr-accordion-content>\r\n </clr-accordion-panel>\r\n <clr-accordion-panel>\r\n <clr-accordion-title>{{ 'order.set-coupon-codes' | translate }}</clr-accordion-title>\r\n <clr-accordion-content *clrIfExpanded>\r\n <ng-select\r\n [items]=\"availableCouponCodes$ | async\"\r\n appendTo=\"body\"\r\n bindLabel=\"code\"\r\n bindValue=\"code\"\r\n [addTag]=\"false\"\r\n [multiple]=\"true\"\r\n [hideSelected]=\"true\"\r\n [minTermLength]=\"2\"\r\n typeToSearchText=\"\"\r\n [typeahead]=\"couponCodeInput$\"\r\n [formControl]=\"couponCodesControl\"\r\n >\r\n <ng-template ng-option-tmp let-item=\"item\">\r\n <vdr-chip>{{ item.code }}</vdr-chip>\r\n {{ item.promotionName }}\r\n </ng-template>\r\n </ng-select>\r\n </clr-accordion-content>\r\n </clr-accordion-panel>\r\n\r\n <clr-accordion-panel>\r\n <clr-accordion-title>{{ 'order.add-surcharge' | translate }}</clr-accordion-title>\r\n <clr-accordion-content *clrIfExpanded>\r\n <form [formGroup]=\"surchargeForm\" (submit)=\"addSurcharge(surchargeForm.value)\">\r\n <vdr-form-field [label]=\"'common.description' | translate\" for=\"description\"\r\n ><input id=\"description\" type=\"text\" formControlName=\"description\"\r\n /></vdr-form-field>\r\n <vdr-form-field [label]=\"'order.product-sku' | translate\" for=\"sku\"\r\n ><input id=\"sku\" type=\"text\" formControlName=\"sku\"\r\n /></vdr-form-field>\r\n <vdr-form-field [label]=\"'common.price' | translate\" for=\"price\">\r\n <vdr-currency-input\r\n [currencyCode]=\"order.currencyCode\"\r\n id=\"price\"\r\n formControlName=\"price\"\r\n ></vdr-currency-input>\r\n </vdr-form-field>\r\n <vdr-form-field\r\n [label]=\"\r\n 'catalog.price-includes-tax-at'\r\n | translate: { rate: surchargeForm.get('taxRate')?.value }\r\n \"\r\n for=\"priceIncludesTax\"\r\n ><input\r\n id=\"priceIncludesTax\"\r\n type=\"checkbox\"\r\n clrCheckbox\r\n formControlName=\"priceIncludesTax\"\r\n /></vdr-form-field>\r\n <vdr-form-field [label]=\"'order.tax-rate' | translate\" for=\"taxRate\">\r\n <vdr-affixed-input suffix=\"%\"\r\n ><input\r\n id=\"taxRate\"\r\n type=\"number\"\r\n min=\"0\"\r\n max=\"100\"\r\n formControlName=\"taxRate\"\r\n /></vdr-affixed-input>\r\n </vdr-form-field>\r\n <vdr-form-field [label]=\"'order.tax-description' | translate\" for=\"taxDescription\"\r\n ><input id=\"taxDescription\" type=\"text\" formControlName=\"taxDescription\"\r\n /></vdr-form-field>\r\n <button\r\n class=\"btn btn-secondary\"\r\n [disabled]=\"\r\n surchargeForm.invalid ||\r\n surchargeForm.pristine ||\r\n surchargeForm.get('price')?.value === 0\r\n \"\r\n >\r\n {{ 'order.add-surcharge' | translate }}\r\n </button>\r\n </form>\r\n </clr-accordion-content>\r\n </clr-accordion-panel>\r\n <clr-accordion-panel>\r\n <clr-accordion-title>{{ 'order.edit-shipping-address' | translate }}</clr-accordion-title>\r\n <clr-accordion-content *clrIfExpanded>\r\n <vdr-address-form\r\n [formGroup]=\"shippingAddressForm\"\r\n [availableCountries]=\"availableCountries$ | async\"\r\n [customFields]=\"addressCustomFields\"\r\n ></vdr-address-form>\r\n </clr-accordion-content>\r\n </clr-accordion-panel>\r\n <clr-accordion-panel>\r\n <clr-accordion-title>{{ 'order.edit-billing-address' | translate }}</clr-accordion-title>\r\n <clr-accordion-content *clrIfExpanded>\r\n <vdr-address-form\r\n [formGroup]=\"billingAddressForm\"\r\n [availableCountries]=\"availableCountries$ | async\"\r\n [customFields]=\"addressCustomFields\"\r\n ></vdr-address-form>\r\n </clr-accordion-content>\r\n </clr-accordion-panel>\r\n </clr-accordion>\r\n </div>\r\n <div class=\"clr-col-lg-4 order-cards\">\r\n <div class=\"card\">\r\n <div class=\"card-header\">\r\n {{ 'order.modification-summary' | translate }}\r\n </div>\r\n <div class=\"card-block\">\r\n <ul>\r\n <li *ngIf=\"modifyOrderInput.addItems?.length\">\r\n {{\r\n 'order.modification-adding-items'\r\n | translate: { count: modifyOrderInput.addItems?.length }\r\n }}\r\n </li>\r\n <li *ngIf=\"modifyOrderInput.adjustOrderLines?.length\">\r\n {{\r\n 'order.modification-adjusting-lines'\r\n | translate: { count: modifyOrderInput.adjustOrderLines?.length }\r\n }}\r\n </li>\r\n <li *ngIf=\"modifyOrderInput.surcharges?.length\">\r\n {{\r\n 'order.modification-adding-surcharges'\r\n | translate: { count: modifyOrderInput.surcharges?.length }\r\n }}\r\n </li>\r\n <li *ngIf=\"shippingAddressForm.dirty\">\r\n {{ 'order.modification-updating-shipping-address' | translate }}\r\n </li>\r\n <li *ngIf=\"billingAddressForm.dirty\">\r\n {{ 'order.modification-updating-billing-address' | translate }}\r\n </li>\r\n </ul>\r\n </div>\r\n <div class=\"card-block\">\r\n <label class=\"clr-control-label\">{{ 'order.note' | translate }}</label>\r\n <textarea [(ngModel)]=\"note\" name=\"note\" clrTextarea required></textarea>\r\n <clr-checkbox-wrapper class=\"\">\r\n <input type=\"checkbox\" clrCheckbox [(ngModel)]=\"recalculateShipping\" />\r\n <label>{{ 'order.modification-recalculate-shipping' | translate }}</label>\r\n </clr-checkbox-wrapper>\r\n </div>\r\n <div class=\"card-footer\">\r\n <button\r\n class=\"btn btn-primary\"\r\n [disabled]=\"!canPreviewChanges()\"\r\n (click)=\"previewAndModify(order)\"\r\n >\r\n {{ 'order.preview-changes' | translate }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".order-table .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}.order-table .sub-total td{border-top:1px dashed var(--color-component-border-200)}.order-table .total td{font-weight:700;border-top:1px dashed var(--color-component-border-200)}.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 .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}.order-table .net-price{font-size:11px;color:var(--color-text-300)}.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}.order-table .thumb img{width:50px;height:50px}.order-table tr.modified td{background-color:var(--color-warning-100)}.order-table .order-line-custom-field{text-align:start}\n"] }]
|
|
2204
2208
|
}], ctorParameters: function () { return [{ type: i1$1.Router }, { type: i1$1.ActivatedRoute }, { type: i1.ServerConfigService }, { type: i0.ChangeDetectorRef }, { type: i1.DataService }, { type: i1.NotificationService }, { type: i1.ModalService }, { type: OrderTransitionService }]; } });
|
|
2205
2209
|
|
|
2206
2210
|
class OrderListComponent extends BaseListComponent {
|