@vendure/admin-ui 3.1.2 → 3.1.3
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/catalog/components/product-variant-list/product-variant-list.component.d.ts +1 -1
- package/core/common/version.d.ts +1 -1
- package/core/extension/register-route-component.d.ts +1 -1
- package/core/shared/components/order-state-label/order-state-label.component.d.ts +1 -1
- package/core/shared/dynamic-form-inputs/default-form-inputs.d.ts +1 -1
- package/esm2022/core/common/version.mjs +2 -2
- package/esm2022/order/components/draft-order-variant-selector/draft-order-variant-selector.component.mjs +3 -3
- package/esm2022/order/components/order-editor/order-editor.component.mjs +3 -3
- package/fesm2022/vendure-admin-ui-core.mjs +1 -1
- package/fesm2022/vendure-admin-ui-core.mjs.map +1 -1
- package/fesm2022/vendure-admin-ui-order.mjs +4 -4
- package/fesm2022/vendure-admin-ui-order.mjs.map +1 -1
- package/package.json +2 -2
|
@@ -800,11 +800,11 @@ class DraftOrderVariantSelectorComponent {
|
|
|
800
800
|
}
|
|
801
801
|
}
|
|
802
802
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DraftOrderVariantSelectorComponent, deps: [{ token: i1.DataService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
803
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: DraftOrderVariantSelectorComponent, selector: "vdr-draft-order-variant-selector", inputs: { currencyCode: "currencyCode", orderLineCustomFields: "orderLineCustomFields" }, outputs: { addItem: "addItem" }, ngImport: i0, template: "<div class=\"card\">\r\n <div class=\"card-block\">\r\n <h4 class=\"card-title\">{{ 'order.add-item-to-order' | translate }}</h4>\r\n <vdr-product-variant-selector\r\n (productSelected)=\"selectedVariantId$.next($event.productVariantId)\"\r\n ></vdr-product-variant-selector>\r\n </div>\r\n <div class=\"card-block\" *ngIf=\"selectedVariant$ | async as selectedVariant\">\r\n <div class=\"variant-details\">\r\n <img class=\"mr-2\" [src]=\"selectedVariant.featuredAsset || selectedVariant.product.featuredAsset | assetPreview: 32\">\r\n <div class=\"details\">\r\n <div>{{ selectedVariant?.name }}</div>\r\n <div class=\"small\">{{ selectedVariant?.sku }}</div>\r\n </div>\r\n <div class=\"details ml-4\">\r\n <div class=\"small\">\r\n {{ 'catalog.stock-on-hand' | translate }}: {{ selectedVariant.stockOnHand }}\r\n </div>\r\n <div class=\"small\">\r\n {{ 'catalog.stock-allocated' | translate }}: {{ selectedVariant.stockAllocated }}\r\n </div>\r\n </div>\r\n <div class=\"flex-spacer\"></div>\r\n <div class=\"details\">\r\n <div>{{ selectedVariant?.priceWithTax | localeCurrency: currencyCode }}</div>\r\n <div class=\"small\" [title]=\"'order.net-price' | translate\">\r\n {{ selectedVariant?.price | localeCurrency: currencyCode }}\r\n </div>\r\n </div>\r\n <div>\r\n <input [disabled]=\"!selectedVariant\" type=\"number\" min=\"0\" [(ngModel)]=\"quantity\" />\r\n </div>\r\n <button\r\n [disabled]=\"!selectedVariant\"\r\n class=\"btn btn-small btn-primary\"\r\n (click)=\"addItemClick(selectedVariant)\"\r\n >\r\n {{ 'order.add-item-to-order' | translate }}\r\n </button>\r\n </div>\r\n <ng-container *ngIf=\"orderLineCustomFields.length\">\r\n <
|
|
803
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: DraftOrderVariantSelectorComponent, selector: "vdr-draft-order-variant-selector", inputs: { currencyCode: "currencyCode", orderLineCustomFields: "orderLineCustomFields" }, outputs: { addItem: "addItem" }, ngImport: i0, template: "<div class=\"card\">\r\n <div class=\"card-block\">\r\n <h4 class=\"card-title\">{{ 'order.add-item-to-order' | translate }}</h4>\r\n <vdr-product-variant-selector\r\n (productSelected)=\"selectedVariantId$.next($event.productVariantId)\"\r\n ></vdr-product-variant-selector>\r\n </div>\r\n <div class=\"card-block\" *ngIf=\"selectedVariant$ | async as selectedVariant\">\r\n <div class=\"variant-details\">\r\n <img class=\"mr-2\" [src]=\"selectedVariant.featuredAsset || selectedVariant.product.featuredAsset | assetPreview: 32\">\r\n <div class=\"details\">\r\n <div>{{ selectedVariant?.name }}</div>\r\n <div class=\"small\">{{ selectedVariant?.sku }}</div>\r\n </div>\r\n <div class=\"details ml-4\">\r\n <div class=\"small\">\r\n {{ 'catalog.stock-on-hand' | translate }}: {{ selectedVariant.stockOnHand }}\r\n </div>\r\n <div class=\"small\">\r\n {{ 'catalog.stock-allocated' | translate }}: {{ selectedVariant.stockAllocated }}\r\n </div>\r\n </div>\r\n <div class=\"flex-spacer\"></div>\r\n <div class=\"details\">\r\n <div>{{ selectedVariant?.priceWithTax | localeCurrency: currencyCode }}</div>\r\n <div class=\"small\" [title]=\"'order.net-price' | translate\">\r\n {{ selectedVariant?.price | localeCurrency: currencyCode }}\r\n </div>\r\n </div>\r\n <div>\r\n <input [disabled]=\"!selectedVariant\" type=\"number\" min=\"0\" [(ngModel)]=\"quantity\" />\r\n </div>\r\n <button\r\n [disabled]=\"!selectedVariant\"\r\n class=\"btn btn-small btn-primary\"\r\n (click)=\"addItemClick(selectedVariant)\"\r\n >\r\n {{ 'order.add-item-to-order' | translate }}\r\n </button>\r\n </div>\r\n <ng-container *ngIf=\"orderLineCustomFields.length\">\r\n <vdr-tabbed-custom-fields\r\n entityName=\"Order\"\r\n [customFields]=\"orderLineCustomFields\"\r\n [customFieldsFormGroup]=\"customFieldsFormGroup\"\r\n ></vdr-tabbed-custom-fields>\r\n </ng-container>\r\n </div>\r\n</div>\r\n", styles: [".variant-details{display:flex;align-items:center}.variant-details img{border-radius:var(--border-radius-img);width:32px;height:32px}.variant-details .details{font-size:.65rem;line-height:.7rem}.variant-details input{width:48px;margin:0 6px}.variant-details .small{font-size:11px;color:var(--color-text-300)}\n"], dependencies: [{ 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.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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "component", type: i1.ProductVariantSelectorComponent, selector: "vdr-product-variant-selector", outputs: ["productSelected"] }, { kind: "component", type: i1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.AssetPreviewPipe, name: "assetPreview" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
804
804
|
}
|
|
805
805
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DraftOrderVariantSelectorComponent, decorators: [{
|
|
806
806
|
type: Component,
|
|
807
|
-
args: [{ selector: 'vdr-draft-order-variant-selector', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"card\">\r\n <div class=\"card-block\">\r\n <h4 class=\"card-title\">{{ 'order.add-item-to-order' | translate }}</h4>\r\n <vdr-product-variant-selector\r\n (productSelected)=\"selectedVariantId$.next($event.productVariantId)\"\r\n ></vdr-product-variant-selector>\r\n </div>\r\n <div class=\"card-block\" *ngIf=\"selectedVariant$ | async as selectedVariant\">\r\n <div class=\"variant-details\">\r\n <img class=\"mr-2\" [src]=\"selectedVariant.featuredAsset || selectedVariant.product.featuredAsset | assetPreview: 32\">\r\n <div class=\"details\">\r\n <div>{{ selectedVariant?.name }}</div>\r\n <div class=\"small\">{{ selectedVariant?.sku }}</div>\r\n </div>\r\n <div class=\"details ml-4\">\r\n <div class=\"small\">\r\n {{ 'catalog.stock-on-hand' | translate }}: {{ selectedVariant.stockOnHand }}\r\n </div>\r\n <div class=\"small\">\r\n {{ 'catalog.stock-allocated' | translate }}: {{ selectedVariant.stockAllocated }}\r\n </div>\r\n </div>\r\n <div class=\"flex-spacer\"></div>\r\n <div class=\"details\">\r\n <div>{{ selectedVariant?.priceWithTax | localeCurrency: currencyCode }}</div>\r\n <div class=\"small\" [title]=\"'order.net-price' | translate\">\r\n {{ selectedVariant?.price | localeCurrency: currencyCode }}\r\n </div>\r\n </div>\r\n <div>\r\n <input [disabled]=\"!selectedVariant\" type=\"number\" min=\"0\" [(ngModel)]=\"quantity\" />\r\n </div>\r\n <button\r\n [disabled]=\"!selectedVariant\"\r\n class=\"btn btn-small btn-primary\"\r\n (click)=\"addItemClick(selectedVariant)\"\r\n >\r\n {{ 'order.add-item-to-order' | translate }}\r\n </button>\r\n </div>\r\n <ng-container *ngIf=\"orderLineCustomFields.length\">\r\n <
|
|
807
|
+
args: [{ selector: 'vdr-draft-order-variant-selector', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"card\">\r\n <div class=\"card-block\">\r\n <h4 class=\"card-title\">{{ 'order.add-item-to-order' | translate }}</h4>\r\n <vdr-product-variant-selector\r\n (productSelected)=\"selectedVariantId$.next($event.productVariantId)\"\r\n ></vdr-product-variant-selector>\r\n </div>\r\n <div class=\"card-block\" *ngIf=\"selectedVariant$ | async as selectedVariant\">\r\n <div class=\"variant-details\">\r\n <img class=\"mr-2\" [src]=\"selectedVariant.featuredAsset || selectedVariant.product.featuredAsset | assetPreview: 32\">\r\n <div class=\"details\">\r\n <div>{{ selectedVariant?.name }}</div>\r\n <div class=\"small\">{{ selectedVariant?.sku }}</div>\r\n </div>\r\n <div class=\"details ml-4\">\r\n <div class=\"small\">\r\n {{ 'catalog.stock-on-hand' | translate }}: {{ selectedVariant.stockOnHand }}\r\n </div>\r\n <div class=\"small\">\r\n {{ 'catalog.stock-allocated' | translate }}: {{ selectedVariant.stockAllocated }}\r\n </div>\r\n </div>\r\n <div class=\"flex-spacer\"></div>\r\n <div class=\"details\">\r\n <div>{{ selectedVariant?.priceWithTax | localeCurrency: currencyCode }}</div>\r\n <div class=\"small\" [title]=\"'order.net-price' | translate\">\r\n {{ selectedVariant?.price | localeCurrency: currencyCode }}\r\n </div>\r\n </div>\r\n <div>\r\n <input [disabled]=\"!selectedVariant\" type=\"number\" min=\"0\" [(ngModel)]=\"quantity\" />\r\n </div>\r\n <button\r\n [disabled]=\"!selectedVariant\"\r\n class=\"btn btn-small btn-primary\"\r\n (click)=\"addItemClick(selectedVariant)\"\r\n >\r\n {{ 'order.add-item-to-order' | translate }}\r\n </button>\r\n </div>\r\n <ng-container *ngIf=\"orderLineCustomFields.length\">\r\n <vdr-tabbed-custom-fields\r\n entityName=\"Order\"\r\n [customFields]=\"orderLineCustomFields\"\r\n [customFieldsFormGroup]=\"customFieldsFormGroup\"\r\n ></vdr-tabbed-custom-fields>\r\n </ng-container>\r\n </div>\r\n</div>\r\n", styles: [".variant-details{display:flex;align-items:center}.variant-details img{border-radius:var(--border-radius-img);width:32px;height:32px}.variant-details .details{font-size:.65rem;line-height:.7rem}.variant-details input{width:48px;margin:0 6px}.variant-details .small{font-size:11px;color:var(--color-text-300)}\n"] }]
|
|
808
808
|
}], ctorParameters: () => [{ type: i1.DataService }], propDecorators: { currencyCode: [{
|
|
809
809
|
type: Input
|
|
810
810
|
}], orderLineCustomFields: [{
|
|
@@ -3200,11 +3200,11 @@ class OrderEditorComponent extends TypedBaseDetailComponent {
|
|
|
3200
3200
|
/* not used */
|
|
3201
3201
|
}
|
|
3202
3202
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: OrderEditorComponent, deps: [{ token: i1.DataService }, { token: i1.NotificationService }, { token: i1.ModalService }, { token: OrderTransitionService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3203
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: OrderEditorComponent, selector: "vdr-order-editor", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n <vdr-action-bar *ngIf=\"entity$ | async as order\">\r\n <vdr-ab-left>\r\n <div class=\"flex clr-align-items-center\"></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</vdr-page-block>\r\n\r\n<vdr-page-detail-layout *ngIf=\"entity as order\">\r\n <vdr-page-detail-sidebar>\r\n <vdr-card [title]=\"'order.modification-summary' | translate\">\r\n <vdr-order-modification-summary\r\n [orderSnapshot]=\"orderSnapshot\"\r\n [modifyOrderInput]=\"modifyOrderInput\"\r\n [addedLines]=\"addedLines\"\r\n [shippingAddressForm]=\"shippingAddressForm\"\r\n [billingAddressForm]=\"billingAddressForm\"\r\n [couponCodesControl]=\"couponCodesControl\"\r\n [updatedShippingMethods]=\"updatedShippingMethods\"\r\n ></vdr-order-modification-summary>\r\n\r\n <div *ngIf=\"!hasModifications()\" class=\"no-modifications\">\r\n {{ 'order.no-modifications-made' | translate }}\r\n </div>\r\n\r\n <div class=\"summary-controls\">\r\n <vdr-form-field [label]=\"'order.note' | translate\">\r\n <textarea\r\n [(ngModel)]=\"note\"\r\n name=\"note\"\r\n required\r\n [disabled]=\"!hasModifications()\"\r\n ></textarea>\r\n </vdr-form-field>\r\n <label class=\"flex items-center\">\r\n <input\r\n type=\"checkbox\"\r\n [(ngModel)]=\"recalculateShipping\"\r\n [disabled]=\"!hasModifications()\"\r\n />\r\n <div class=\"ml-1\">{{ 'order.modification-recalculate-shipping' | translate }}</div>\r\n </label>\r\n <button\r\n class=\"btn btn-primary mt-2\"\r\n [disabled]=\"!hasModifications()\"\r\n (click)=\"previewAndModify(order)\"\r\n >\r\n {{ 'order.preview-changes' | translate }}\r\n </button>\r\n </div>\r\n </vdr-card>\r\n <vdr-card [title]=\"'order.set-coupon-codes' | translate\">\r\n <vdr-coupon-code-selector [control]=\"couponCodesControl\"></vdr-coupon-code-selector>\r\n </vdr-card>\r\n <vdr-card [title]=\"'order.shipping-address' | translate\">\r\n <ng-template vdrCardControls>\r\n <button\r\n class=\"button-small\"\r\n [title]=\"'order.edit-shipping-address' | translate\"\r\n (click)=\"editingShippingAddress = !editingShippingAddress\"\r\n >\r\n <clr-icon shape=\"edit\"></clr-icon>\r\n </button>\r\n </ng-template>\r\n <vdr-formatted-address\r\n *ngIf=\"!editingShippingAddress\"\r\n [address]=\"shippingAddressForm.value\"\r\n ></vdr-formatted-address>\r\n <vdr-address-form\r\n *ngIf=\"editingShippingAddress\"\r\n [formGroup]=\"shippingAddressForm\"\r\n [availableCountries]=\"availableCountries$ | async\"\r\n [customFields]=\"addressCustomFields\"\r\n ></vdr-address-form>\r\n </vdr-card>\r\n <vdr-card [title]=\"'order.billing-address' | translate\">\r\n <ng-template vdrCardControls>\r\n <button\r\n class=\"button-small\"\r\n [title]=\"'order.edit-billing-address' | translate\"\r\n (click)=\"editingBillingAddress = !editingBillingAddress\"\r\n >\r\n <clr-icon shape=\"edit\"></clr-icon>\r\n </button>\r\n </ng-template>\r\n <vdr-formatted-address\r\n *ngIf=\"!editingBillingAddress\"\r\n [address]=\"billingAddressForm.value\"\r\n ></vdr-formatted-address>\r\n <vdr-address-form\r\n *ngIf=\"editingBillingAddress\"\r\n [formGroup]=\"billingAddressForm\"\r\n [availableCountries]=\"availableCountries$ | async\"\r\n [customFields]=\"addressCustomFields\"\r\n ></vdr-address-form>\r\n </vdr-card>\r\n </vdr-page-detail-sidebar>\r\n\r\n <vdr-page-block>\r\n <vdr-card [paddingX]=\"false\">\r\n <vdr-data-table-2 id=\"modify-order\" class=\"order-table\" [items]=\"order.lines.concat(addedLines)\">\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\r\n id=\"created-at\"\r\n [heading]=\"'common.created-at' | translate\"\r\n [hiddenByDefault]=\"true\"\r\n >\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\r\n id=\"updated-at\"\r\n [heading]=\"'common.updated-at' | translate\"\r\n [hiddenByDefault]=\"true\"\r\n >\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\r\n id=\"product-name\"\r\n [heading]=\"'order.product-name' | translate\"\r\n [optional]=\"false\"\r\n >\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\">\r\n <ng-template let-line=\"item\">\r\n <div class=\"text-center\">\r\n <div>{{ line.unitPriceWithTax | localeCurrency : order.currencyCode }}</div>\r\n <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n {{ line.unitPrice | localeCurrency : order.currencyCode }}\r\n </div>\r\n </div>\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column id=\"quantity\" [heading]=\"'order.quantity' | translate\" [optional]=\"false\">\r\n <ng-template let-line=\"item\">\r\n <input\r\n type=\"number\"\r\n class=\"draft-qty mr-1\"\r\n min=\"0\"\r\n [value]=\"getInitialLineQuantity(line.id)\"\r\n (input)=\"updateLineQuantity(line, $event.target.value)\"\r\n />\r\n <button\r\n class=\"button-small\"\r\n *ngIf=\"isAddedLine(line)\"\r\n (click)=\"removeAddedItem(line.id)\"\r\n >\r\n <clr-icon shape=\"trash\"></clr-icon>\r\n </button>\r\n <vdr-line-refunds [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\r\n <vdr-line-fulfillment\r\n [line]=\"line\"\r\n [allOrderFulfillments]=\"order.fulfillments\"\r\n [orderState]=\"order.state\"\r\n ></vdr-line-fulfillment>\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column\r\n *ngFor=\"let customField of orderLineCustomFields\"\r\n [id]=\"customField.name\"\r\n [heading]=\"customField | customFieldLabel : (uiLanguage$ | async)\"\r\n [hiddenByDefault]=\"true\"\r\n >\r\n <ng-template let-line=\"item\" let-index=\"index\">\r\n <vdr-custom-field-control\r\n [compact]=\"true\"\r\n [entityName]=\"'OrderLine'\"\r\n [customField]=\"customField\"\r\n [customFieldsFormGroup]=\"orderLineCustomFieldsFormArray.at(index)\"\r\n />\r\n </ng-template>\r\n </vdr-dt2-column>\r\n </vdr-data-table-2>\r\n </vdr-card>\r\n <vdr-card [title]=\"'order.add-item-to-order' | translate\">\r\n <vdr-product-variant-selector class=\"mb-4\" (productSelected)=\"addItemSelectedVariant = $event\">\r\n </vdr-product-variant-selector>\r\n <div class=\"flex\">\r\n <div>\r\n <div *ngIf=\"addItemSelectedVariant\" class=\"flex mb-4\">\r\n <img\r\n *ngIf=\"addItemSelectedVariant.productAsset as asset\"\r\n [src]=\"asset | assetPreview : 'tiny'\"\r\n class=\"mr-4 add-item-thumb\"\r\n />\r\n <div>\r\n <strong class=\"mr-4\">{{ 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 <div class=\"form-grid\" *ngIf=\"addItemSelectedVariant\">\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 </div>\r\n </div>\r\n <div class=\"flex-spacer\"></div>\r\n <div>\r\n <button\r\n *ngIf=\"addItemSelectedVariant\"\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 </div>\r\n </div>\r\n </vdr-card>\r\n <vdr-card [title]=\"'order.shipping' | translate\">\r\n <div *ngFor=\"let shippingLine of order.shippingLines\" class=\"flex items-center\">\r\n <ng-container *ngIf=\"getShippingLineDetails(shippingLine) as details\">\r\n <div>{{ details.name }}:</div>\r\n <div class=\"mx-1\">\r\n {{ details.price | localeCurrency : order.currencyCode }}\r\n </div>\r\n <button class=\"button-small\" (click)=\"setShippingMethod(shippingLine.id)\">\r\n {{ 'order.set-shipping-method' | translate }}\r\n </button>\r\n </ng-container>\r\n </div>\r\n </vdr-card>\r\n <vdr-card [title]=\"'order.add-surcharge' | translate\">\r\n <form [formGroup]=\"surchargeForm\" (submit)=\"addSurcharge(surchargeForm.value)\">\r\n <div class=\"form-grid\">\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 ?? 0 }\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 id=\"taxRate\" type=\"number\" min=\"0\" max=\"100\" 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 </div>\r\n <button\r\n class=\"btn btn-secondary mt-2\"\r\n [disabled]=\"\r\n surchargeForm.invalid ||\r\n surchargeForm.pristine ||\r\n surchargeForm.get('price')?.value === 0 ||\r\n !surchargeForm.get('description')?.value\r\n \"\r\n >\r\n {{ 'order.add-surcharge' | translate }}\r\n </button>\r\n </form>\r\n </vdr-card>\r\n </vdr-page-block>\r\n</vdr-page-detail-layout>\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 img{border-radius:var(--border-radius-img)}.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-inline-end:18px}.order-table .draft-qty{max-width:48px}.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);line-height:14px}.order-table .promotions-label{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 .shipping-method-name{font-size:var(--font-size-xs);margin-inline-end:2px}.order-table .order-placed-quantity{text-decoration:line-through;color:var(--color-text-300);margin-inline-end:2px}.order-table tr.modified td{background-color:var(--color-warning-100)}.order-table .order-line-custom-field{text-align:start}.add-item-thumb{max-width:50px}.no-modifications{color:var(--color-grey-400)}.summary-controls{border-top:1px solid var(--color-weight-200);margin-top:calc(var(--space-unit) * 2);padding-top:calc(var(--space-unit) * 1)}\n"], dependencies: [{ 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.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.AffixedInputComponent, selector: "vdr-affixed-input", inputs: ["prefix", "suffix"] }, { kind: "component", type: i1.CurrencyInputComponent, selector: "vdr-currency-input", inputs: ["disabled", "readonly", "value", "currencyCode"], outputs: ["valueChange"] }, { kind: "component", type: i1.CustomFieldControlComponent, selector: "vdr-custom-field-control", inputs: ["entityName", "customFieldsFormGroup", "customField", "compact", "showLabel", "readonly"] }, { 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: "component", type: i1.FormattedAddressComponent, selector: "vdr-formatted-address", inputs: ["address"] }, { kind: "component", type: i1.ProductVariantSelectorComponent, selector: "vdr-product-variant-selector", outputs: ["productSelected"] }, { kind: "component", type: i1.AddressFormComponent, selector: "vdr-address-form", inputs: ["customFields", "formGroup", "availableCountries"] }, { 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.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i1.PageDetailLayoutComponent, selector: "vdr-page-detail-layout" }, { kind: "component", type: i1.PageDetailSidebarComponent, selector: "vdr-page-detail-sidebar" }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "directive", type: i1.CardControlsDirective, selector: "[vdrCardControls]" }, { kind: "component", type: LineFulfillmentComponent, selector: "vdr-line-fulfillment", inputs: ["line", "allOrderFulfillments", "orderState"] }, { kind: "component", type: LineRefundsComponent, selector: "vdr-line-refunds", inputs: ["line", "payments"] }, { kind: "component", type: CouponCodeSelectorComponent, selector: "vdr-coupon-code-selector", inputs: ["couponCodes", "control"], outputs: ["addCouponCode", "removeCouponCode"] }, { kind: "component", type: OrderModificationSummaryComponent, selector: "vdr-order-modification-summary", inputs: ["orderSnapshot", "modifyOrderInput", "addedLines", "shippingAddressForm", "billingAddressForm", "updatedShippingMethods", "couponCodesControl"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.CustomFieldLabelPipe, name: "customFieldLabel" }, { 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 }); }
|
|
3203
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: OrderEditorComponent, selector: "vdr-order-editor", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n <vdr-action-bar *ngIf=\"entity$ | async as order\">\r\n <vdr-ab-left>\r\n <div class=\"flex clr-align-items-center\"></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</vdr-page-block>\r\n\r\n<vdr-page-detail-layout *ngIf=\"entity as order\">\r\n <vdr-page-detail-sidebar>\r\n <vdr-card [title]=\"'order.modification-summary' | translate\">\r\n <vdr-order-modification-summary\r\n [orderSnapshot]=\"orderSnapshot\"\r\n [modifyOrderInput]=\"modifyOrderInput\"\r\n [addedLines]=\"addedLines\"\r\n [shippingAddressForm]=\"shippingAddressForm\"\r\n [billingAddressForm]=\"billingAddressForm\"\r\n [couponCodesControl]=\"couponCodesControl\"\r\n [updatedShippingMethods]=\"updatedShippingMethods\"\r\n ></vdr-order-modification-summary>\r\n\r\n <div *ngIf=\"!hasModifications()\" class=\"no-modifications\">\r\n {{ 'order.no-modifications-made' | translate }}\r\n </div>\r\n\r\n <div class=\"summary-controls\">\r\n <vdr-form-field [label]=\"'order.note' | translate\">\r\n <textarea\r\n [(ngModel)]=\"note\"\r\n name=\"note\"\r\n required\r\n [disabled]=\"!hasModifications()\"\r\n ></textarea>\r\n </vdr-form-field>\r\n <label class=\"flex items-center\">\r\n <input\r\n type=\"checkbox\"\r\n [(ngModel)]=\"recalculateShipping\"\r\n [disabled]=\"!hasModifications()\"\r\n />\r\n <div class=\"ml-1\">{{ 'order.modification-recalculate-shipping' | translate }}</div>\r\n </label>\r\n <button\r\n class=\"btn btn-primary mt-2\"\r\n [disabled]=\"!hasModifications()\"\r\n (click)=\"previewAndModify(order)\"\r\n >\r\n {{ 'order.preview-changes' | translate }}\r\n </button>\r\n </div>\r\n </vdr-card>\r\n <vdr-card [title]=\"'order.set-coupon-codes' | translate\">\r\n <vdr-coupon-code-selector [control]=\"couponCodesControl\"></vdr-coupon-code-selector>\r\n </vdr-card>\r\n <vdr-card [title]=\"'order.shipping-address' | translate\">\r\n <ng-template vdrCardControls>\r\n <button\r\n class=\"button-small\"\r\n [title]=\"'order.edit-shipping-address' | translate\"\r\n (click)=\"editingShippingAddress = !editingShippingAddress\"\r\n >\r\n <clr-icon shape=\"edit\"></clr-icon>\r\n </button>\r\n </ng-template>\r\n <vdr-formatted-address\r\n *ngIf=\"!editingShippingAddress\"\r\n [address]=\"shippingAddressForm.value\"\r\n ></vdr-formatted-address>\r\n <vdr-address-form\r\n *ngIf=\"editingShippingAddress\"\r\n [formGroup]=\"shippingAddressForm\"\r\n [availableCountries]=\"availableCountries$ | async\"\r\n [customFields]=\"addressCustomFields\"\r\n ></vdr-address-form>\r\n </vdr-card>\r\n <vdr-card [title]=\"'order.billing-address' | translate\">\r\n <ng-template vdrCardControls>\r\n <button\r\n class=\"button-small\"\r\n [title]=\"'order.edit-billing-address' | translate\"\r\n (click)=\"editingBillingAddress = !editingBillingAddress\"\r\n >\r\n <clr-icon shape=\"edit\"></clr-icon>\r\n </button>\r\n </ng-template>\r\n <vdr-formatted-address\r\n *ngIf=\"!editingBillingAddress\"\r\n [address]=\"billingAddressForm.value\"\r\n ></vdr-formatted-address>\r\n <vdr-address-form\r\n *ngIf=\"editingBillingAddress\"\r\n [formGroup]=\"billingAddressForm\"\r\n [availableCountries]=\"availableCountries$ | async\"\r\n [customFields]=\"addressCustomFields\"\r\n ></vdr-address-form>\r\n </vdr-card>\r\n </vdr-page-detail-sidebar>\r\n\r\n <vdr-page-block>\r\n <vdr-card [paddingX]=\"false\">\r\n <vdr-data-table-2 id=\"modify-order\" class=\"order-table\" [items]=\"order.lines.concat(addedLines)\">\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\r\n id=\"created-at\"\r\n [heading]=\"'common.created-at' | translate\"\r\n [hiddenByDefault]=\"true\"\r\n >\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\r\n id=\"updated-at\"\r\n [heading]=\"'common.updated-at' | translate\"\r\n [hiddenByDefault]=\"true\"\r\n >\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\r\n id=\"product-name\"\r\n [heading]=\"'order.product-name' | translate\"\r\n [optional]=\"false\"\r\n >\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\">\r\n <ng-template let-line=\"item\">\r\n <div class=\"text-center\">\r\n <div>{{ line.unitPriceWithTax | localeCurrency : order.currencyCode }}</div>\r\n <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n {{ line.unitPrice | localeCurrency : order.currencyCode }}\r\n </div>\r\n </div>\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column id=\"quantity\" [heading]=\"'order.quantity' | translate\" [optional]=\"false\">\r\n <ng-template let-line=\"item\">\r\n <input\r\n type=\"number\"\r\n class=\"draft-qty mr-1\"\r\n min=\"0\"\r\n [value]=\"getInitialLineQuantity(line.id)\"\r\n (input)=\"updateLineQuantity(line, $event.target.value)\"\r\n />\r\n <button\r\n class=\"button-small\"\r\n *ngIf=\"isAddedLine(line)\"\r\n (click)=\"removeAddedItem(line.id)\"\r\n >\r\n <clr-icon shape=\"trash\"></clr-icon>\r\n </button>\r\n <vdr-line-refunds [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\r\n <vdr-line-fulfillment\r\n [line]=\"line\"\r\n [allOrderFulfillments]=\"order.fulfillments\"\r\n [orderState]=\"order.state\"\r\n ></vdr-line-fulfillment>\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column\r\n *ngFor=\"let customField of orderLineCustomFields\"\r\n [id]=\"customField.name\"\r\n [heading]=\"customField | customFieldLabel : (uiLanguage$ | async)\"\r\n [hiddenByDefault]=\"true\"\r\n >\r\n <ng-template let-line=\"item\" let-index=\"index\">\r\n <vdr-custom-field-control\r\n [compact]=\"true\"\r\n [entityName]=\"'OrderLine'\"\r\n [customField]=\"customField\"\r\n [customFieldsFormGroup]=\"orderLineCustomFieldsFormArray.at(index)\"\r\n />\r\n </ng-template>\r\n </vdr-dt2-column>\r\n </vdr-data-table-2>\r\n </vdr-card>\r\n <vdr-card [title]=\"'order.add-item-to-order' | translate\">\r\n <vdr-product-variant-selector class=\"mb-4\" (productSelected)=\"addItemSelectedVariant = $event\">\r\n </vdr-product-variant-selector>\r\n <div class=\"flex\">\r\n <div>\r\n <div *ngIf=\"addItemSelectedVariant\" class=\"flex mb-4\">\r\n <img\r\n *ngIf=\"addItemSelectedVariant.productAsset as asset\"\r\n [src]=\"asset | assetPreview : 'tiny'\"\r\n class=\"mr-4 add-item-thumb\"\r\n />\r\n <div>\r\n <strong class=\"mr-4\">{{ 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 <div *ngIf=\"addItemSelectedVariant\">\r\n <vdr-tabbed-custom-fields\r\n entityName=\"Order\"\r\n [customFields]=\"orderLineCustomFields\"\r\n [customFieldsFormGroup]=\"addItemCustomFieldsForm\"\r\n ></vdr-tabbed-custom-fields>\r\n </div>\r\n </div>\r\n <div class=\"flex-spacer\"></div>\r\n <div>\r\n <button\r\n *ngIf=\"addItemSelectedVariant\"\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 </div>\r\n </div>\r\n </vdr-card>\r\n <vdr-card [title]=\"'order.shipping' | translate\">\r\n <div *ngFor=\"let shippingLine of order.shippingLines\" class=\"flex items-center\">\r\n <ng-container *ngIf=\"getShippingLineDetails(shippingLine) as details\">\r\n <div>{{ details.name }}:</div>\r\n <div class=\"mx-1\">\r\n {{ details.price | localeCurrency : order.currencyCode }}\r\n </div>\r\n <button class=\"button-small\" (click)=\"setShippingMethod(shippingLine.id)\">\r\n {{ 'order.set-shipping-method' | translate }}\r\n </button>\r\n </ng-container>\r\n </div>\r\n </vdr-card>\r\n <vdr-card [title]=\"'order.add-surcharge' | translate\">\r\n <form [formGroup]=\"surchargeForm\" (submit)=\"addSurcharge(surchargeForm.value)\">\r\n <div class=\"form-grid\">\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 ?? 0 }\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 id=\"taxRate\" type=\"number\" min=\"0\" max=\"100\" 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 </div>\r\n <button\r\n class=\"btn btn-secondary mt-2\"\r\n [disabled]=\"\r\n surchargeForm.invalid ||\r\n surchargeForm.pristine ||\r\n surchargeForm.get('price')?.value === 0 ||\r\n !surchargeForm.get('description')?.value\r\n \"\r\n >\r\n {{ 'order.add-surcharge' | translate }}\r\n </button>\r\n </form>\r\n </vdr-card>\r\n </vdr-page-block>\r\n</vdr-page-detail-layout>\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 img{border-radius:var(--border-radius-img)}.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-inline-end:18px}.order-table .draft-qty{max-width:48px}.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);line-height:14px}.order-table .promotions-label{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 .shipping-method-name{font-size:var(--font-size-xs);margin-inline-end:2px}.order-table .order-placed-quantity{text-decoration:line-through;color:var(--color-text-300);margin-inline-end:2px}.order-table tr.modified td{background-color:var(--color-warning-100)}.order-table .order-line-custom-field{text-align:start}.add-item-thumb{max-width:50px}.no-modifications{color:var(--color-grey-400)}.summary-controls{border-top:1px solid var(--color-weight-200);margin-top:calc(var(--space-unit) * 2);padding-top:calc(var(--space-unit) * 1)}\n"], dependencies: [{ 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.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.AffixedInputComponent, selector: "vdr-affixed-input", inputs: ["prefix", "suffix"] }, { kind: "component", type: i1.CurrencyInputComponent, selector: "vdr-currency-input", inputs: ["disabled", "readonly", "value", "currencyCode"], outputs: ["valueChange"] }, { kind: "component", type: i1.CustomFieldControlComponent, selector: "vdr-custom-field-control", inputs: ["entityName", "customFieldsFormGroup", "customField", "compact", "showLabel", "readonly"] }, { 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: "component", type: i1.FormattedAddressComponent, selector: "vdr-formatted-address", inputs: ["address"] }, { kind: "component", type: i1.ProductVariantSelectorComponent, selector: "vdr-product-variant-selector", outputs: ["productSelected"] }, { kind: "component", type: i1.AddressFormComponent, selector: "vdr-address-form", inputs: ["customFields", "formGroup", "availableCountries"] }, { kind: "component", type: i1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { 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.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i1.PageDetailLayoutComponent, selector: "vdr-page-detail-layout" }, { kind: "component", type: i1.PageDetailSidebarComponent, selector: "vdr-page-detail-sidebar" }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "directive", type: i1.CardControlsDirective, selector: "[vdrCardControls]" }, { kind: "component", type: LineFulfillmentComponent, selector: "vdr-line-fulfillment", inputs: ["line", "allOrderFulfillments", "orderState"] }, { kind: "component", type: LineRefundsComponent, selector: "vdr-line-refunds", inputs: ["line", "payments"] }, { kind: "component", type: CouponCodeSelectorComponent, selector: "vdr-coupon-code-selector", inputs: ["couponCodes", "control"], outputs: ["addCouponCode", "removeCouponCode"] }, { kind: "component", type: OrderModificationSummaryComponent, selector: "vdr-order-modification-summary", inputs: ["orderSnapshot", "modifyOrderInput", "addedLines", "shippingAddressForm", "billingAddressForm", "updatedShippingMethods", "couponCodesControl"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.CustomFieldLabelPipe, name: "customFieldLabel" }, { 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 }); }
|
|
3204
3204
|
}
|
|
3205
3205
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: OrderEditorComponent, decorators: [{
|
|
3206
3206
|
type: Component,
|
|
3207
|
-
args: [{ selector: 'vdr-order-editor', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-block>\r\n <vdr-action-bar *ngIf=\"entity$ | async as order\">\r\n <vdr-ab-left>\r\n <div class=\"flex clr-align-items-center\"></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</vdr-page-block>\r\n\r\n<vdr-page-detail-layout *ngIf=\"entity as order\">\r\n <vdr-page-detail-sidebar>\r\n <vdr-card [title]=\"'order.modification-summary' | translate\">\r\n <vdr-order-modification-summary\r\n [orderSnapshot]=\"orderSnapshot\"\r\n [modifyOrderInput]=\"modifyOrderInput\"\r\n [addedLines]=\"addedLines\"\r\n [shippingAddressForm]=\"shippingAddressForm\"\r\n [billingAddressForm]=\"billingAddressForm\"\r\n [couponCodesControl]=\"couponCodesControl\"\r\n [updatedShippingMethods]=\"updatedShippingMethods\"\r\n ></vdr-order-modification-summary>\r\n\r\n <div *ngIf=\"!hasModifications()\" class=\"no-modifications\">\r\n {{ 'order.no-modifications-made' | translate }}\r\n </div>\r\n\r\n <div class=\"summary-controls\">\r\n <vdr-form-field [label]=\"'order.note' | translate\">\r\n <textarea\r\n [(ngModel)]=\"note\"\r\n name=\"note\"\r\n required\r\n [disabled]=\"!hasModifications()\"\r\n ></textarea>\r\n </vdr-form-field>\r\n <label class=\"flex items-center\">\r\n <input\r\n type=\"checkbox\"\r\n [(ngModel)]=\"recalculateShipping\"\r\n [disabled]=\"!hasModifications()\"\r\n />\r\n <div class=\"ml-1\">{{ 'order.modification-recalculate-shipping' | translate }}</div>\r\n </label>\r\n <button\r\n class=\"btn btn-primary mt-2\"\r\n [disabled]=\"!hasModifications()\"\r\n (click)=\"previewAndModify(order)\"\r\n >\r\n {{ 'order.preview-changes' | translate }}\r\n </button>\r\n </div>\r\n </vdr-card>\r\n <vdr-card [title]=\"'order.set-coupon-codes' | translate\">\r\n <vdr-coupon-code-selector [control]=\"couponCodesControl\"></vdr-coupon-code-selector>\r\n </vdr-card>\r\n <vdr-card [title]=\"'order.shipping-address' | translate\">\r\n <ng-template vdrCardControls>\r\n <button\r\n class=\"button-small\"\r\n [title]=\"'order.edit-shipping-address' | translate\"\r\n (click)=\"editingShippingAddress = !editingShippingAddress\"\r\n >\r\n <clr-icon shape=\"edit\"></clr-icon>\r\n </button>\r\n </ng-template>\r\n <vdr-formatted-address\r\n *ngIf=\"!editingShippingAddress\"\r\n [address]=\"shippingAddressForm.value\"\r\n ></vdr-formatted-address>\r\n <vdr-address-form\r\n *ngIf=\"editingShippingAddress\"\r\n [formGroup]=\"shippingAddressForm\"\r\n [availableCountries]=\"availableCountries$ | async\"\r\n [customFields]=\"addressCustomFields\"\r\n ></vdr-address-form>\r\n </vdr-card>\r\n <vdr-card [title]=\"'order.billing-address' | translate\">\r\n <ng-template vdrCardControls>\r\n <button\r\n class=\"button-small\"\r\n [title]=\"'order.edit-billing-address' | translate\"\r\n (click)=\"editingBillingAddress = !editingBillingAddress\"\r\n >\r\n <clr-icon shape=\"edit\"></clr-icon>\r\n </button>\r\n </ng-template>\r\n <vdr-formatted-address\r\n *ngIf=\"!editingBillingAddress\"\r\n [address]=\"billingAddressForm.value\"\r\n ></vdr-formatted-address>\r\n <vdr-address-form\r\n *ngIf=\"editingBillingAddress\"\r\n [formGroup]=\"billingAddressForm\"\r\n [availableCountries]=\"availableCountries$ | async\"\r\n [customFields]=\"addressCustomFields\"\r\n ></vdr-address-form>\r\n </vdr-card>\r\n </vdr-page-detail-sidebar>\r\n\r\n <vdr-page-block>\r\n <vdr-card [paddingX]=\"false\">\r\n <vdr-data-table-2 id=\"modify-order\" class=\"order-table\" [items]=\"order.lines.concat(addedLines)\">\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\r\n id=\"created-at\"\r\n [heading]=\"'common.created-at' | translate\"\r\n [hiddenByDefault]=\"true\"\r\n >\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\r\n id=\"updated-at\"\r\n [heading]=\"'common.updated-at' | translate\"\r\n [hiddenByDefault]=\"true\"\r\n >\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\r\n id=\"product-name\"\r\n [heading]=\"'order.product-name' | translate\"\r\n [optional]=\"false\"\r\n >\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\">\r\n <ng-template let-line=\"item\">\r\n <div class=\"text-center\">\r\n <div>{{ line.unitPriceWithTax | localeCurrency : order.currencyCode }}</div>\r\n <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n {{ line.unitPrice | localeCurrency : order.currencyCode }}\r\n </div>\r\n </div>\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column id=\"quantity\" [heading]=\"'order.quantity' | translate\" [optional]=\"false\">\r\n <ng-template let-line=\"item\">\r\n <input\r\n type=\"number\"\r\n class=\"draft-qty mr-1\"\r\n min=\"0\"\r\n [value]=\"getInitialLineQuantity(line.id)\"\r\n (input)=\"updateLineQuantity(line, $event.target.value)\"\r\n />\r\n <button\r\n class=\"button-small\"\r\n *ngIf=\"isAddedLine(line)\"\r\n (click)=\"removeAddedItem(line.id)\"\r\n >\r\n <clr-icon shape=\"trash\"></clr-icon>\r\n </button>\r\n <vdr-line-refunds [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\r\n <vdr-line-fulfillment\r\n [line]=\"line\"\r\n [allOrderFulfillments]=\"order.fulfillments\"\r\n [orderState]=\"order.state\"\r\n ></vdr-line-fulfillment>\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column\r\n *ngFor=\"let customField of orderLineCustomFields\"\r\n [id]=\"customField.name\"\r\n [heading]=\"customField | customFieldLabel : (uiLanguage$ | async)\"\r\n [hiddenByDefault]=\"true\"\r\n >\r\n <ng-template let-line=\"item\" let-index=\"index\">\r\n <vdr-custom-field-control\r\n [compact]=\"true\"\r\n [entityName]=\"'OrderLine'\"\r\n [customField]=\"customField\"\r\n [customFieldsFormGroup]=\"orderLineCustomFieldsFormArray.at(index)\"\r\n />\r\n </ng-template>\r\n </vdr-dt2-column>\r\n </vdr-data-table-2>\r\n </vdr-card>\r\n <vdr-card [title]=\"'order.add-item-to-order' | translate\">\r\n <vdr-product-variant-selector class=\"mb-4\" (productSelected)=\"addItemSelectedVariant = $event\">\r\n </vdr-product-variant-selector>\r\n <div class=\"flex\">\r\n <div>\r\n <div *ngIf=\"addItemSelectedVariant\" class=\"flex mb-4\">\r\n <img\r\n *ngIf=\"addItemSelectedVariant.productAsset as asset\"\r\n [src]=\"asset | assetPreview : 'tiny'\"\r\n class=\"mr-4 add-item-thumb\"\r\n />\r\n <div>\r\n <strong class=\"mr-4\">{{ 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 <div class=\"form-grid\" *ngIf=\"addItemSelectedVariant\">\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 </div>\r\n </div>\r\n <div class=\"flex-spacer\"></div>\r\n <div>\r\n <button\r\n *ngIf=\"addItemSelectedVariant\"\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 </div>\r\n </div>\r\n </vdr-card>\r\n <vdr-card [title]=\"'order.shipping' | translate\">\r\n <div *ngFor=\"let shippingLine of order.shippingLines\" class=\"flex items-center\">\r\n <ng-container *ngIf=\"getShippingLineDetails(shippingLine) as details\">\r\n <div>{{ details.name }}:</div>\r\n <div class=\"mx-1\">\r\n {{ details.price | localeCurrency : order.currencyCode }}\r\n </div>\r\n <button class=\"button-small\" (click)=\"setShippingMethod(shippingLine.id)\">\r\n {{ 'order.set-shipping-method' | translate }}\r\n </button>\r\n </ng-container>\r\n </div>\r\n </vdr-card>\r\n <vdr-card [title]=\"'order.add-surcharge' | translate\">\r\n <form [formGroup]=\"surchargeForm\" (submit)=\"addSurcharge(surchargeForm.value)\">\r\n <div class=\"form-grid\">\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 ?? 0 }\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 id=\"taxRate\" type=\"number\" min=\"0\" max=\"100\" 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 </div>\r\n <button\r\n class=\"btn btn-secondary mt-2\"\r\n [disabled]=\"\r\n surchargeForm.invalid ||\r\n surchargeForm.pristine ||\r\n surchargeForm.get('price')?.value === 0 ||\r\n !surchargeForm.get('description')?.value\r\n \"\r\n >\r\n {{ 'order.add-surcharge' | translate }}\r\n </button>\r\n </form>\r\n </vdr-card>\r\n </vdr-page-block>\r\n</vdr-page-detail-layout>\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 img{border-radius:var(--border-radius-img)}.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-inline-end:18px}.order-table .draft-qty{max-width:48px}.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);line-height:14px}.order-table .promotions-label{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 .shipping-method-name{font-size:var(--font-size-xs);margin-inline-end:2px}.order-table .order-placed-quantity{text-decoration:line-through;color:var(--color-text-300);margin-inline-end:2px}.order-table tr.modified td{background-color:var(--color-warning-100)}.order-table .order-line-custom-field{text-align:start}.add-item-thumb{max-width:50px}.no-modifications{color:var(--color-grey-400)}.summary-controls{border-top:1px solid var(--color-weight-200);margin-top:calc(var(--space-unit) * 2);padding-top:calc(var(--space-unit) * 1)}\n"] }]
|
|
3207
|
+
args: [{ selector: 'vdr-order-editor', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-block>\r\n <vdr-action-bar *ngIf=\"entity$ | async as order\">\r\n <vdr-ab-left>\r\n <div class=\"flex clr-align-items-center\"></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</vdr-page-block>\r\n\r\n<vdr-page-detail-layout *ngIf=\"entity as order\">\r\n <vdr-page-detail-sidebar>\r\n <vdr-card [title]=\"'order.modification-summary' | translate\">\r\n <vdr-order-modification-summary\r\n [orderSnapshot]=\"orderSnapshot\"\r\n [modifyOrderInput]=\"modifyOrderInput\"\r\n [addedLines]=\"addedLines\"\r\n [shippingAddressForm]=\"shippingAddressForm\"\r\n [billingAddressForm]=\"billingAddressForm\"\r\n [couponCodesControl]=\"couponCodesControl\"\r\n [updatedShippingMethods]=\"updatedShippingMethods\"\r\n ></vdr-order-modification-summary>\r\n\r\n <div *ngIf=\"!hasModifications()\" class=\"no-modifications\">\r\n {{ 'order.no-modifications-made' | translate }}\r\n </div>\r\n\r\n <div class=\"summary-controls\">\r\n <vdr-form-field [label]=\"'order.note' | translate\">\r\n <textarea\r\n [(ngModel)]=\"note\"\r\n name=\"note\"\r\n required\r\n [disabled]=\"!hasModifications()\"\r\n ></textarea>\r\n </vdr-form-field>\r\n <label class=\"flex items-center\">\r\n <input\r\n type=\"checkbox\"\r\n [(ngModel)]=\"recalculateShipping\"\r\n [disabled]=\"!hasModifications()\"\r\n />\r\n <div class=\"ml-1\">{{ 'order.modification-recalculate-shipping' | translate }}</div>\r\n </label>\r\n <button\r\n class=\"btn btn-primary mt-2\"\r\n [disabled]=\"!hasModifications()\"\r\n (click)=\"previewAndModify(order)\"\r\n >\r\n {{ 'order.preview-changes' | translate }}\r\n </button>\r\n </div>\r\n </vdr-card>\r\n <vdr-card [title]=\"'order.set-coupon-codes' | translate\">\r\n <vdr-coupon-code-selector [control]=\"couponCodesControl\"></vdr-coupon-code-selector>\r\n </vdr-card>\r\n <vdr-card [title]=\"'order.shipping-address' | translate\">\r\n <ng-template vdrCardControls>\r\n <button\r\n class=\"button-small\"\r\n [title]=\"'order.edit-shipping-address' | translate\"\r\n (click)=\"editingShippingAddress = !editingShippingAddress\"\r\n >\r\n <clr-icon shape=\"edit\"></clr-icon>\r\n </button>\r\n </ng-template>\r\n <vdr-formatted-address\r\n *ngIf=\"!editingShippingAddress\"\r\n [address]=\"shippingAddressForm.value\"\r\n ></vdr-formatted-address>\r\n <vdr-address-form\r\n *ngIf=\"editingShippingAddress\"\r\n [formGroup]=\"shippingAddressForm\"\r\n [availableCountries]=\"availableCountries$ | async\"\r\n [customFields]=\"addressCustomFields\"\r\n ></vdr-address-form>\r\n </vdr-card>\r\n <vdr-card [title]=\"'order.billing-address' | translate\">\r\n <ng-template vdrCardControls>\r\n <button\r\n class=\"button-small\"\r\n [title]=\"'order.edit-billing-address' | translate\"\r\n (click)=\"editingBillingAddress = !editingBillingAddress\"\r\n >\r\n <clr-icon shape=\"edit\"></clr-icon>\r\n </button>\r\n </ng-template>\r\n <vdr-formatted-address\r\n *ngIf=\"!editingBillingAddress\"\r\n [address]=\"billingAddressForm.value\"\r\n ></vdr-formatted-address>\r\n <vdr-address-form\r\n *ngIf=\"editingBillingAddress\"\r\n [formGroup]=\"billingAddressForm\"\r\n [availableCountries]=\"availableCountries$ | async\"\r\n [customFields]=\"addressCustomFields\"\r\n ></vdr-address-form>\r\n </vdr-card>\r\n </vdr-page-detail-sidebar>\r\n\r\n <vdr-page-block>\r\n <vdr-card [paddingX]=\"false\">\r\n <vdr-data-table-2 id=\"modify-order\" class=\"order-table\" [items]=\"order.lines.concat(addedLines)\">\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\r\n id=\"created-at\"\r\n [heading]=\"'common.created-at' | translate\"\r\n [hiddenByDefault]=\"true\"\r\n >\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\r\n id=\"updated-at\"\r\n [heading]=\"'common.updated-at' | translate\"\r\n [hiddenByDefault]=\"true\"\r\n >\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\r\n id=\"product-name\"\r\n [heading]=\"'order.product-name' | translate\"\r\n [optional]=\"false\"\r\n >\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\">\r\n <ng-template let-line=\"item\">\r\n <div class=\"text-center\">\r\n <div>{{ line.unitPriceWithTax | localeCurrency : order.currencyCode }}</div>\r\n <div class=\"net-price\" [title]=\"'order.net-price' | translate\">\r\n {{ line.unitPrice | localeCurrency : order.currencyCode }}\r\n </div>\r\n </div>\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column id=\"quantity\" [heading]=\"'order.quantity' | translate\" [optional]=\"false\">\r\n <ng-template let-line=\"item\">\r\n <input\r\n type=\"number\"\r\n class=\"draft-qty mr-1\"\r\n min=\"0\"\r\n [value]=\"getInitialLineQuantity(line.id)\"\r\n (input)=\"updateLineQuantity(line, $event.target.value)\"\r\n />\r\n <button\r\n class=\"button-small\"\r\n *ngIf=\"isAddedLine(line)\"\r\n (click)=\"removeAddedItem(line.id)\"\r\n >\r\n <clr-icon shape=\"trash\"></clr-icon>\r\n </button>\r\n <vdr-line-refunds [line]=\"line\" [payments]=\"order.payments\"></vdr-line-refunds>\r\n <vdr-line-fulfillment\r\n [line]=\"line\"\r\n [allOrderFulfillments]=\"order.fulfillments\"\r\n [orderState]=\"order.state\"\r\n ></vdr-line-fulfillment>\r\n </ng-template>\r\n </vdr-dt2-column>\r\n <vdr-dt2-column\r\n *ngFor=\"let customField of orderLineCustomFields\"\r\n [id]=\"customField.name\"\r\n [heading]=\"customField | customFieldLabel : (uiLanguage$ | async)\"\r\n [hiddenByDefault]=\"true\"\r\n >\r\n <ng-template let-line=\"item\" let-index=\"index\">\r\n <vdr-custom-field-control\r\n [compact]=\"true\"\r\n [entityName]=\"'OrderLine'\"\r\n [customField]=\"customField\"\r\n [customFieldsFormGroup]=\"orderLineCustomFieldsFormArray.at(index)\"\r\n />\r\n </ng-template>\r\n </vdr-dt2-column>\r\n </vdr-data-table-2>\r\n </vdr-card>\r\n <vdr-card [title]=\"'order.add-item-to-order' | translate\">\r\n <vdr-product-variant-selector class=\"mb-4\" (productSelected)=\"addItemSelectedVariant = $event\">\r\n </vdr-product-variant-selector>\r\n <div class=\"flex\">\r\n <div>\r\n <div *ngIf=\"addItemSelectedVariant\" class=\"flex mb-4\">\r\n <img\r\n *ngIf=\"addItemSelectedVariant.productAsset as asset\"\r\n [src]=\"asset | assetPreview : 'tiny'\"\r\n class=\"mr-4 add-item-thumb\"\r\n />\r\n <div>\r\n <strong class=\"mr-4\">{{ 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 <div *ngIf=\"addItemSelectedVariant\">\r\n <vdr-tabbed-custom-fields\r\n entityName=\"Order\"\r\n [customFields]=\"orderLineCustomFields\"\r\n [customFieldsFormGroup]=\"addItemCustomFieldsForm\"\r\n ></vdr-tabbed-custom-fields>\r\n </div>\r\n </div>\r\n <div class=\"flex-spacer\"></div>\r\n <div>\r\n <button\r\n *ngIf=\"addItemSelectedVariant\"\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 </div>\r\n </div>\r\n </vdr-card>\r\n <vdr-card [title]=\"'order.shipping' | translate\">\r\n <div *ngFor=\"let shippingLine of order.shippingLines\" class=\"flex items-center\">\r\n <ng-container *ngIf=\"getShippingLineDetails(shippingLine) as details\">\r\n <div>{{ details.name }}:</div>\r\n <div class=\"mx-1\">\r\n {{ details.price | localeCurrency : order.currencyCode }}\r\n </div>\r\n <button class=\"button-small\" (click)=\"setShippingMethod(shippingLine.id)\">\r\n {{ 'order.set-shipping-method' | translate }}\r\n </button>\r\n </ng-container>\r\n </div>\r\n </vdr-card>\r\n <vdr-card [title]=\"'order.add-surcharge' | translate\">\r\n <form [formGroup]=\"surchargeForm\" (submit)=\"addSurcharge(surchargeForm.value)\">\r\n <div class=\"form-grid\">\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 ?? 0 }\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 id=\"taxRate\" type=\"number\" min=\"0\" max=\"100\" 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 </div>\r\n <button\r\n class=\"btn btn-secondary mt-2\"\r\n [disabled]=\"\r\n surchargeForm.invalid ||\r\n surchargeForm.pristine ||\r\n surchargeForm.get('price')?.value === 0 ||\r\n !surchargeForm.get('description')?.value\r\n \"\r\n >\r\n {{ 'order.add-surcharge' | translate }}\r\n </button>\r\n </form>\r\n </vdr-card>\r\n </vdr-page-block>\r\n</vdr-page-detail-layout>\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 img{border-radius:var(--border-radius-img)}.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-inline-end:18px}.order-table .draft-qty{max-width:48px}.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);line-height:14px}.order-table .promotions-label{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 .shipping-method-name{font-size:var(--font-size-xs);margin-inline-end:2px}.order-table .order-placed-quantity{text-decoration:line-through;color:var(--color-text-300);margin-inline-end:2px}.order-table tr.modified td{background-color:var(--color-warning-100)}.order-table .order-line-custom-field{text-align:start}.add-item-thumb{max-width:50px}.no-modifications{color:var(--color-grey-400)}.summary-controls{border-top:1px solid var(--color-weight-200);margin-top:calc(var(--space-unit) * 2);padding-top:calc(var(--space-unit) * 1)}\n"] }]
|
|
3208
3208
|
}], ctorParameters: () => [{ type: i1.DataService }, { type: i1.NotificationService }, { type: i1.ModalService }, { type: OrderTransitionService }, { type: i0.ChangeDetectorRef }] });
|
|
3209
3209
|
|
|
3210
3210
|
class OrderListComponent extends TypedBaseListComponent {
|