@vendure/admin-ui 1.7.0 → 1.7.2

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.
Files changed (40) hide show
  1. package/bundles/vendure-admin-ui-catalog.umd.js +8 -1
  2. package/bundles/vendure-admin-ui-catalog.umd.js.map +1 -1
  3. package/bundles/vendure-admin-ui-core.umd.js +28 -11
  4. package/bundles/vendure-admin-ui-core.umd.js.map +1 -1
  5. package/bundles/vendure-admin-ui-customer.umd.js +5 -4
  6. package/bundles/vendure-admin-ui-customer.umd.js.map +1 -1
  7. package/bundles/vendure-admin-ui-order.umd.js +10 -7
  8. package/bundles/vendure-admin-ui-order.umd.js.map +1 -1
  9. package/core/common/generated-types.d.ts +2 -1
  10. package/core/common/utilities/configurable-operation-utils.d.ts +4 -1
  11. package/core/common/version.d.ts +1 -1
  12. package/core/vendure-admin-ui-core.metadata.json +1 -1
  13. package/customer/vendure-admin-ui-customer.metadata.json +1 -1
  14. package/esm2015/catalog/components/generate-product-variants/generate-product-variants.component.js +1 -1
  15. package/esm2015/catalog/components/option-value-input/option-value-input.component.js +8 -2
  16. package/esm2015/core/common/generated-types.js +2 -2
  17. package/esm2015/core/common/introspection-result.js +1 -1
  18. package/esm2015/core/common/utilities/configurable-operation-utils.js +8 -2
  19. package/esm2015/core/common/version.js +2 -2
  20. package/esm2015/core/components/app-shell/app-shell.component.js +1 -1
  21. package/esm2015/core/data/definitions/order-definitions.js +443 -443
  22. package/esm2015/core/data/definitions/product-definitions.js +743 -743
  23. package/esm2015/core/data/utils/remove-readonly-custom-fields.js +4 -1
  24. package/esm2015/core/shared/components/dropdown/dropdown-menu.component.js +11 -11
  25. package/esm2015/core/shared/components/dropdown/dropdown-trigger.directive.js +1 -1
  26. package/esm2015/core/shared/pipes/locale-currency.pipe.js +10 -2
  27. package/esm2015/customer/components/customer-group-list/customer-group-list.component.js +6 -5
  28. package/esm2015/order/components/order-editor/order-editor.component.js +9 -5
  29. package/fesm2015/vendure-admin-ui-catalog.js +7 -1
  30. package/fesm2015/vendure-admin-ui-catalog.js.map +1 -1
  31. package/fesm2015/vendure-admin-ui-core.js +1260 -1243
  32. package/fesm2015/vendure-admin-ui-core.js.map +1 -1
  33. package/fesm2015/vendure-admin-ui-customer.js +5 -4
  34. package/fesm2015/vendure-admin-ui-customer.js.map +1 -1
  35. package/fesm2015/vendure-admin-ui-order.js +8 -4
  36. package/fesm2015/vendure-admin-ui-order.js.map +1 -1
  37. package/order/vendure-admin-ui-order.metadata.json +1 -1
  38. package/package.json +2 -2
  39. package/static/styles/_variables.scss +1 -0
  40. package/static/styles/global/_sass-overrides.scss +1 -1
@@ -2,13 +2,14 @@ import * as i0 from '@angular/core';
2
2
  import { Component, ChangeDetectionStrategy, ChangeDetectorRef, EventEmitter, Input, Output, Injectable, ElementRef, ViewChildren, HostBinding, NgModule } from '@angular/core';
3
3
  import { FormGroup, FormControl, Validators, FormBuilder, FormArray } from '@angular/forms';
4
4
  import * as i1 from '@vendure/admin-ui/core';
5
- import { DataService, getAppConfig, I18nService, configurableDefinitionToInstance, GlobalFlag, configurableOperationValueIsValid, toConfigurableOperationInput, ServerConfigService, ModalService, HistoryEntryType, SortOrder, NotificationService, BaseDetailComponent, EditNoteDialogComponent, BaseListComponent, LogicalOperator, LocalStorageService, AdjustmentType, BaseEntityResolver, createResolveData, CanDeactivateDetailGuard, detailBreadcrumb, SharedModule } from '@vendure/admin-ui/core';
5
+ import { DataService, getAppConfig, I18nService, configurableDefinitionToInstance, GlobalFlag, configurableOperationValueIsValid, toConfigurableOperationInput, ServerConfigService, ModalService, HistoryEntryType, SortOrder, NotificationService, BaseDetailComponent, EditNoteDialogComponent, transformRelationCustomFieldInputs, BaseListComponent, LogicalOperator, LocalStorageService, AdjustmentType, BaseEntityResolver, createResolveData, CanDeactivateDetailGuard, detailBreadcrumb, SharedModule } from '@vendure/admin-ui/core';
6
6
  import { marker } from '@biesbjerg/ngx-translate-extract-marker';
7
7
  import { isObject, summate, assertNever, notNullOrUndefined } from '@vendure/common/lib/shared-utils';
8
8
  import * as i1$1 from '@angular/router';
9
9
  import { Router, ActivatedRoute, RouterModule } from '@angular/router';
10
10
  import { EMPTY, Subject, of, concat, merge, BehaviorSubject } from 'rxjs';
11
11
  import { switchMap, catchError, retryWhen, delay, take, map, startWith, mapTo, takeUntil, distinctUntilChanged, shareReplay, filter, debounceTime, tap } from 'rxjs/operators';
12
+ import { simpleDeepClone } from '@vendure/common/lib/simple-deep-clone';
12
13
 
13
14
  class AddManualPaymentDialogComponent {
14
15
  constructor(dataService) {
@@ -1674,7 +1675,10 @@ class OrderEditorComponent extends BaseDetailComponent {
1674
1675
  }
1675
1676
  previewAndModify(order) {
1676
1677
  var _a;
1677
- const input = Object.assign(Object.assign(Object.assign(Object.assign({}, this.modifyOrderInput), (this.billingAddressForm.dirty ? { updateBillingAddress: this.billingAddressForm.value } : {})), (this.shippingAddressForm.dirty
1678
+ const modifyOrderInput = Object.assign(Object.assign({}, this.modifyOrderInput), { adjustOrderLines: this.modifyOrderInput.adjustOrderLines.map(line => {
1679
+ return transformRelationCustomFieldInputs(simpleDeepClone(line), this.orderLineCustomFields);
1680
+ }) });
1681
+ const input = Object.assign(Object.assign(Object.assign(Object.assign({}, modifyOrderInput), (this.billingAddressForm.dirty ? { updateBillingAddress: this.billingAddressForm.value } : {})), (this.shippingAddressForm.dirty
1678
1682
  ? { updateShippingAddress: this.shippingAddressForm.value }
1679
1683
  : {})), { dryRun: true, couponCodes: this.couponCodesControl.dirty ? this.couponCodesControl.value : undefined, note: (_a = this.note) !== null && _a !== void 0 ? _a : '', options: {
1680
1684
  recalculateShipping: this.recalculateShipping,
@@ -1768,9 +1772,9 @@ class OrderEditorComponent extends BaseDetailComponent {
1768
1772
  OrderEditorComponent.decorators = [
1769
1773
  { type: Component, args: [{
1770
1774
  selector: 'vdr-order-editor',
1771
- 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-selector class=\"mb4\" (productSelected)=\"addItemSelectedVariant = $event\">\r\n </vdr-product-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",
1775
+ 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-selector class=\"mb4\" (productSelected)=\"addItemSelectedVariant = $event\">\r\n </vdr-product-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",
1772
1776
  changeDetection: ChangeDetectionStrategy.OnPush,
1773
- 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:bold;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"]
1777
+ 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:bold;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"]
1774
1778
  },] }
1775
1779
  ];
1776
1780
  OrderEditorComponent.ctorParameters = () => [