@vendure/admin-ui 1.0.2 → 1.0.3

package/bundles/vendure-admin-ui-order.umd.min.js

@@ -13,5 +13,5 @@
     OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
     PERFORMANCE OF THIS SOFTWARE.
     ***************************************************************************** */
-var c=function(e,r){return(c=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,r){e.__proto__=r}||function(e,r){for(var t in r)Object.prototype.hasOwnProperty.call(r,t)&&(e[t]=r[t])})(e,r)};function u(e,r){if("function"!=typeof r&&null!==r)throw new TypeError("Class extends value "+String(r)+" is not a constructor or null");function t(){this.constructor=e}c(e,r),e.prototype=null===r?Object.create(r):(t.prototype=r.prototype,new t)}Object.create;function p(e){var r="function"==typeof Symbol&&Symbol.iterator,t=r&&e[r],n=0;if(t)return t.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&n>=e.length&&(e=void 0),{value:e&&e[n++],done:!e}}};throw new TypeError(r?"Object is not iterable.":"Symbol.iterator is not defined.")}function m(e,r){var t="function"==typeof Symbol&&e[Symbol.iterator];if(!t)return e;var n,i,o=t.call(e),a=[];try{for(;(void 0===r||r-- >0)&&!(n=o.next()).done;)a.push(n.value)}catch(e){i={error:e}}finally{try{n&&!n.done&&(t=o.return)&&t.call(o)}finally{if(i)throw i.error}}return a}function f(){for(var e=[],r=0;r<arguments.length;r++)e=e.concat(m(arguments[r]));return e}Object.create;var y=function(){function e(e){var r=this;this.i18nService=e,this.lineQuantities={},this.reasons=[i.marker("order.cancel-reason-customer-request"),i.marker("order.cancel-reason-not-available")],this.reasons=this.reasons.map((function(e){return r.i18nService.translate(e)}))}return Object.defineProperty(e.prototype,"selectionCount",{get:function(){return Object.values(this.lineQuantities).reduce((function(e,r){return e+r}),0)},enumerable:!1,configurable:!0}),e.prototype.ngOnInit=function(){this.lineQuantities=this.order.lines.reduce((function(e,r){var t;return Object.assign(Object.assign({},e),((t={})[r.id]=0,t))}),{})},e.prototype.select=function(){this.resolveWith({orderId:this.order.id,lines:this.getLineInputs(),reason:this.reason})},e.prototype.cancel=function(){this.resolveWith()},e.prototype.getLineInputs=function(){if(!this.order.active)return Object.entries(this.lineQuantities).map((function(e){var r=m(e,2);return{orderLineId:r[0],quantity:r[1]}})).filter((function(e){return 0<e.quantity}))},e}();y.decorators=[{type:r.Component,args:[{selector:"vdr-cancel-order-dialog",template:'<ng-template vdrDialogTitle>{{ \'order.cancel-order\' | translate }}</ng-template>\r\n\r\n<div class="fulfillment-wrapper">\r\n    <div class="order-lines">\r\n        <table class="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.quantity\' | translate }}</th>\r\n                    <th>{{ \'order.unit-price\' | translate }}</th>\r\n                    <th>{{ \'order.cancel\' | translate }}</th>\r\n                </tr>\r\n            </thead>\r\n            <tr\r\n                *ngFor="let line of order.lines"\r\n                class="order-line"\r\n                [class.is-cancelled]="line.quantity === 0"\r\n            >\r\n                <td class="align-middle thumb">\r\n                    <img [src]="line.featuredAsset | assetPreview:\'tiny\'" />\r\n                </td>\r\n                <td class="align-middle name">{{ line.productVariant.name }}</td>\r\n                <td class="align-middle sku">{{ line.productVariant.sku }}</td>\r\n                <td class="align-middle quantity">{{ line.quantity }}</td>\r\n                <td class="align-middle quantity">\r\n                    {{ line.unitPriceWithTax | localeCurrency: order.currencyCode }}\r\n                </td>\r\n                <td class="align-middle fulfil">\r\n                    <input\r\n                        *ngIf="line.quantity > 0 && !order.active; else nonEditable"\r\n                        [(ngModel)]="lineQuantities[line.id]"\r\n                        type="number"\r\n                        [max]="line.quantity"\r\n                        min="0"\r\n                    />\r\n                    <ng-template #nonEditable>{{ line.quantity }}</ng-template>\r\n                </td>\r\n            </tr>\r\n        </table>\r\n    </div>\r\n    <div class="cancellation-details">\r\n        <label class="clr-control-label">{{ \'order.cancellation-reason\' | translate }}</label>\r\n        <ng-select\r\n            [items]="reasons"\r\n            bindLabel="name"\r\n            autofocus\r\n            bindValue="id"\r\n            [addTag]="true"\r\n            [(ngModel)]="reason"\r\n        ></ng-select>\r\n    </div>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type="button" class="btn" (click)="cancel()">{{ \'common.cancel\' | translate }}</button>\r\n    <button\r\n        type="submit"\r\n        (click)="select()"\r\n        [disabled]="!reason || (!order.active && selectionCount === 0)"\r\n        class="btn btn-primary"\r\n    >\r\n        <ng-container *ngIf="!order.active">\r\n            {{ \'order.cancel-selected-items\' | translate }}\r\n        </ng-container>\r\n        <ng-container *ngIf="order.active">\r\n            {{ \'order.cancel-order\' | translate }}\r\n        </ng-container>\r\n    </button>\r\n</ng-template>\r\n',changeDetection:r.ChangeDetectionStrategy.OnPush,styles:[":host{height:100%;display:flex;min-height:64vh}.fulfillment-wrapper{flex:1}@media screen and (min-width:768px){.fulfillment-wrapper{display:flex;flex-direction:row}}@media screen and (min-width:768px){.fulfillment-wrapper .cancellation-details{margin-top:0;margin-left:24px;width:250px}}.fulfillment-wrapper .order-lines{flex:1;overflow-y:auto}.fulfillment-wrapper .order-lines table{margin-top:0}.fulfillment-wrapper tr.ignore{color:var(--color-grey-300)}.fulfillment-wrapper .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}"]}]}],y.ctorParameters=function(){return[{type:n.I18nService}]};var g=function(){function e(e,r){this.dataService=e,this.changeDetector=r,this.fulfillmentHandlerControl=new t.FormControl,this.fulfillmentQuantities={}}return e.prototype.ngOnInit=function(){var e=this;this.dataService.settings.getGlobalSettings().single$.subscribe((function(r){var t=r.globalSettings;e.fulfillmentQuantities=e.order.lines.reduce((function(r,n){var i,o=e.getFulfillableCount(n,t.trackInventory);return Object.assign(Object.assign({},r),((i={})[n.id]={fulfillCount:o,max:o},i))}),{}),e.changeDetector.markForCheck()})),this.dataService.shippingMethod.getShippingMethodOperations().mapSingle((function(e){return e.fulfillmentHandlers})).subscribe((function(r){e.fulfillmentHandlerDef=r.find((function(r){var t,n;return r.code===(null===(n=null===(t=e.order.shippingLines[0])||void 0===t?void 0:t.shippingMethod)||void 0===n?void 0:n.fulfillmentHandlerCode)}))||r[0],e.fulfillmentHandler=n.configurableDefinitionToInstance(e.fulfillmentHandlerDef),e.fulfillmentHandlerControl.patchValue(e.fulfillmentHandler),e.changeDetector.markForCheck()}))},e.prototype.getFulfillableCount=function(e,r){var t=e.productVariant,i=t.trackInventory,o=t.stockOnHand,a=i===n.GlobalFlag.INHERIT?r:i===n.GlobalFlag.TRUE,l=this.getUnfulfilledCount(e);return a?Math.min(l,o):l},e.prototype.getUnfulfilledCount=function(e){var r=e.items.reduce((function(e,r){return e+(r.fulfillment?1:0)}),0);return e.quantity-r},e.prototype.canSubmit=function(){var e=Object.values(this.fulfillmentQuantities).reduce((function(e,r){return e+r.fulfillCount}),0);return n.configurableOperationValueIsValid(this.fulfillmentHandlerDef,this.fulfillmentHandlerControl.value)&&this.fulfillmentHandlerControl.valid&&0<e},e.prototype.select=function(){var e=Object.entries(this.fulfillmentQuantities).map((function(e){var r=m(e,2);return{orderLineId:r[0],quantity:r[1].fulfillCount}}));this.resolveWith({lines:e,handler:n.toConfigurableOperationInput(this.fulfillmentHandler,this.fulfillmentHandlerControl.value)})},e.prototype.cancel=function(){this.resolveWith()},e}();g.decorators=[{type:r.Component,args:[{selector:"vdr-fulfill-order-dialog",template:'<ng-template vdrDialogTitle>{{ \'order.fulfill-order\' | translate }}</ng-template>\r\n\r\n<div class="fulfillment-wrapper">\r\n    <div class="order-table">\r\n        <table class="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.unfulfilled\' | translate }}</th>\r\n                    <th>{{ \'catalog.stock-on-hand\' | translate }}</th>\r\n                    <th>{{ \'order.fulfill\' | translate }}</th>\r\n                </tr>\r\n            </thead>\r\n            <tr\r\n                *ngFor="let line of order.lines"\r\n                class="order-line"\r\n                [class.ignore]="getUnfulfilledCount(line) === 0"\r\n            >\r\n                <td class="align-middle thumb">\r\n                    <img *ngIf="line.featuredAsset" [src]="line.featuredAsset | assetPreview: \'tiny\'" />\r\n                </td>\r\n                <td class="align-middle name">{{ line.productVariant.name }}</td>\r\n                <td class="align-middle sku">{{ line.productVariant.sku }}</td>\r\n                <td class="align-middle quantity">{{ getUnfulfilledCount(line) }}</td>\r\n                <td class="align-middle quantity">{{ line.productVariant.stockOnHand }}</td>\r\n                <td class="align-middle fulfil">\r\n                    <input\r\n                        *ngIf="fulfillmentQuantities[line.id]"\r\n                        [disabled]="getUnfulfilledCount(line) === 0"\r\n                        [(ngModel)]="fulfillmentQuantities[line.id].fulfillCount"\r\n                        type="number"\r\n                        [max]="fulfillmentQuantities[line.id].max"\r\n                        min="0"\r\n                    />\r\n                </td>\r\n            </tr>\r\n        </table>\r\n    </div>\r\n    <div class="shipping-details">\r\n        <vdr-formatted-address [address]="order.shippingAddress"></vdr-formatted-address>\r\n        <h6>{{ \'order.shipping-method\' | translate }}</h6>\r\n        {{ order.shippingLines[0]?.shippingMethod?.name }}\r\n        <strong>{{ order.shipping | localeCurrency: order.currencyCode }}</strong>\r\n        <vdr-configurable-input\r\n            [operationDefinition]="fulfillmentHandlerDef"\r\n            [operation]="fulfillmentHandler"\r\n            [formControl]="fulfillmentHandlerControl"\r\n            [removable]="false"\r\n        ></vdr-configurable-input>\r\n    </div>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type="button" class="btn" (click)="cancel()">{{ \'common.cancel\' | translate }}</button>\r\n    <button type="submit" (click)="select()" [disabled]="!canSubmit()" class="btn btn-primary">\r\n        {{ \'order.create-fulfillment\' | translate }}\r\n    </button>\r\n</ng-template>\r\n',changeDetection:r.ChangeDetectionStrategy.OnPush,styles:[":host{height:100%;display:flex;min-height:64vh}.fulfillment-wrapper{flex:1}@media screen and (min-width:768px){.fulfillment-wrapper{display:flex;flex-direction:row}}.fulfillment-wrapper .shipping-details{margin-top:24px}@media screen and (min-width:768px){.fulfillment-wrapper .shipping-details{margin-top:0;margin-left:24px;width:250px}}.fulfillment-wrapper .shipping-details clr-input-container{margin-top:24px}.fulfillment-wrapper .order-table{flex:1;overflow-y:auto}.fulfillment-wrapper .order-table table{margin-top:0}.fulfillment-wrapper tr.ignore{color:var(--color-grey-300)}"]}]}],g.ctorParameters=function(){return[{type:n.DataService},{type:r.ChangeDetectorRef}]};var v=function(){function e(){this.transitionState=new r.EventEmitter}return e.prototype.nextSuggestedState=function(){var e;if(this.fulfillment){var r=this.fulfillment.nextStates,t=function(e){return r.includes(e)?e:r[0]};switch(null===(e=this.fulfillment)||void 0===e?void 0:e.state){case"Pending":return t("Shipped");case"Shipped":return t("Delivered");default:return r.find((function(e){return"Cancelled"!==e}))}}},e.prototype.nextOtherStates=function(){if(!this.fulfillment)return[];var e=this.nextSuggestedState();return this.fulfillment.nextStates.filter((function(r){return r!==e}))},e}();v.decorators=[{type:r.Component,args:[{selector:"vdr-fulfillment-card",template:'<div class="card">\r\n    <div class="card-header fulfillment-header">\r\n        <div>{{ \'order.fulfillment\' | translate }}</div>\r\n        <div class="fulfillment-state">\r\n            <vdr-fulfillment-state-label [state]="fulfillment?.state"></vdr-fulfillment-state-label>\r\n        </div>\r\n    </div>\r\n    <div class="card-block">\r\n        <vdr-fulfillment-detail\r\n            *ngIf="!!fulfillment"\r\n            [fulfillmentId]="fulfillment?.id"\r\n            [order]="order"\r\n        ></vdr-fulfillment-detail>\r\n    </div>\r\n    <div class="card-footer" *ngIf="fulfillment?.nextStates.length">\r\n        <ng-container *ngIf="nextSuggestedState() as suggestedState">\r\n            <button class="btn btn-sm btn-primary" (click)="transitionState.emit(suggestedState)">\r\n                {{ \'order.set-fulfillment-state\' | translate: { state: (suggestedState | stateI18nToken | translate) } }}\r\n            </button>\r\n        </ng-container>\r\n        <vdr-dropdown>\r\n            <button class="icon-button" vdrDropdownTrigger>\r\n                <clr-icon shape="ellipsis-vertical"></clr-icon>\r\n            </button>\r\n            <vdr-dropdown-menu vdrPosition="bottom-right">\r\n                <ng-container *ngFor="let nextState of nextOtherStates()">\r\n                    <button\r\n                        type="button"\r\n                        class="btn"\r\n                        vdrDropdownItem\r\n                        (click)="transitionState.emit(nextState)"\r\n                    >\r\n                        <ng-container *ngIf="nextState !== \'Cancelled\'; else cancel">\r\n                            <clr-icon shape="step-forward-2"></clr-icon>\r\n                            {{ \'order.transition-to-state\' | translate: { state: (nextState | stateI18nToken | translate) } }}\r\n                        </ng-container>\r\n                        <ng-template #cancel>\r\n                            <clr-icon shape="error-standard" class="is-error"></clr-icon>\r\n                            {{ \'order.cancel-fulfillment\' | translate }}\r\n                        </ng-template>\r\n                    </button>\r\n                </ng-container>\r\n            </vdr-dropdown-menu>\r\n        </vdr-dropdown>\r\n    </div>\r\n</div>\r\n',changeDetection:r.ChangeDetectionStrategy.OnPush,styles:[".fulfillment-header{display:flex;justify-content:space-between;align-items:center}.card-footer{display:flex;align-items:center;justify-content:flex-end}"]}]}],v.propDecorators={fulfillment:[{type:r.Input}],order:[{type:r.Input}],transitionState:[{type:r.Output}]};var h=function(){function e(){this.customFields=[]}return e.prototype.ngOnChanges=function(e){this.customFields=this.getCustomFields()},Object.defineProperty(e.prototype,"fulfillment",{get:function(){var e=this;return this.order.fulfillments&&this.order.fulfillments.find((function(r){return r.id===e.fulfillmentId}))},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"items",{get:function(){var e,r,t,n,i,o=new Map,a=null===(i=this.fulfillment)||void 0===i?void 0:i.orderItems.map((function(e){return e.id}));try{for(var l=p(this.order.lines),d=l.next();!d.done;d=l.next()){var s=d.value;try{for(var c=(t=void 0,p(s.items)),u=c.next();!u.done;u=c.next()){var f=u.value;if(null==a?void 0:a.includes(f.id)){var y=o.get(s.productVariant.name);null!=y?o.set(s.productVariant.name,y+1):o.set(s.productVariant.name,1)}}}catch(e){t={error:e}}finally{try{u&&!u.done&&(n=c.return)&&n.call(c)}finally{if(t)throw t.error}}}}catch(r){e={error:r}}finally{try{d&&!d.done&&(r=l.return)&&r.call(l)}finally{if(e)throw e.error}}return Array.from(o.entries()).map((function(e){var r=m(e,2);return{name:r[0],quantity:r[1]}}))},enumerable:!1,configurable:!0}),e.prototype.getCustomFields=function(){var e=this.fulfillment.customFields;return e?Object.entries(e).filter((function(e){return"__typename"!==m(e,1)[0]})).map((function(e){var r=m(e,2),t=r[0],n=r[1];return{key:t,value:Array.isArray(n)||o.isObject(n)?n:n.toString()}})):[]},e.prototype.customFieldIsObject=function(e){return Array.isArray(e)||o.isObject(e)},e}();h.decorators=[{type:r.Component,args:[{selector:"vdr-fulfillment-detail",template:'<vdr-labeled-data [label]="\'common.created-at\' | translate">\r\n    {{ fulfillment?.createdAt | localeDate: \'medium\' }}\r\n</vdr-labeled-data>\r\n<vdr-labeled-data [label]="\'order.fulfillment-method\' | translate">\r\n    {{ fulfillment?.method }}\r\n</vdr-labeled-data>\r\n<vdr-labeled-data *ngIf="fulfillment?.trackingCode" [label]="\'order.tracking-code\' | translate">\r\n    {{ fulfillment?.trackingCode }}\r\n</vdr-labeled-data>\r\n<vdr-labeled-data [label]="\'order.contents\' | translate">\r\n    <vdr-simple-item-list [items]="items"></vdr-simple-item-list>\r\n</vdr-labeled-data>\r\n<ng-container *ngFor="let customField of customFields">\r\n    <vdr-labeled-data [label]="customField.key">\r\n        <vdr-object-tree\r\n            *ngIf="customFieldIsObject(customField.value); else primitive"\r\n            [value]="{ object: customField.value }"\r\n        ></vdr-object-tree>\r\n        <ng-template #primitive>\r\n            {{ customField.value }}\r\n        </ng-template>\r\n    </vdr-labeled-data>\r\n</ng-container>\r\n',changeDetection:r.ChangeDetectionStrategy.OnPush,styles:[""]}]}],h.propDecorators={fulfillmentId:[{type:r.Input}],order:[{type:r.Input}]};var b=function(){function e(){}return Object.defineProperty(e.prototype,"chipColorType",{get:function(){switch(this.state){case"Pending":case"Shipped":return"warning";case"Delivered":return"success";case"Cancelled":return"error"}},enumerable:!1,configurable:!0}),e}();b.decorators=[{type:r.Component,args:[{selector:"vdr-fulfillment-state-label",template:'<vdr-chip [title]="\'order.payment-state\' | translate" [colorType]="chipColorType">\r\n    <clr-icon shape="check-circle" *ngIf="state === \'Delivered\'"></clr-icon>\r\n    {{ state | stateI18nToken | translate }}\r\n</vdr-chip>\r\n',changeDetection:r.ChangeDetectionStrategy.OnPush,styles:[":host{font-size:14px}"]}]}],b.propDecorators={state:[{type:r.Input}]};var C=function(){function e(){this.fulfilledCount=0,this.fulfillments=[]}return e.prototype.ngOnChanges=function(e){this.line&&(this.fulfilledCount=this.getDeliveredCount(this.line),this.fulfillmentStatus=this.getFulfillmentStatus(this.fulfilledCount,this.line.items.length),this.fulfillments=this.getFulfillments(this.line))},e.prototype.getDeliveredCount=function(e){return e.items.reduce((function(e,r){return e+(r.fulfillment?1:0)}),0)},e.prototype.getFulfillmentStatus=function(e,r){return e===r?"full":0<e&&e<r?"partial":"none"},e.prototype.getFulfillments=function(e){var r,t,n={};try{for(var i=p(e.items),o=i.next();!o.done;o=i.next()){var a=o.value;a.fulfillment&&(void 0===n[a.fulfillment.id]?n[a.fulfillment.id]=1:n[a.fulfillment.id]++)}}catch(e){r={error:e}}finally{try{o&&!o.done&&(t=i.return)&&t.call(i)}finally{if(r)throw r.error}}var l=e.items.reduce((function(e,r){return r.fulfillment?f(e,[r.fulfillment]):e}),[]);return Object.entries(n).map((function(e){var r=m(e,2),t=r[0];return{count:r[1],fulfillment:l.find((function(e){return e.id===t}))}}))},e}();C.decorators=[{type:r.Component,args:[{selector:"vdr-line-fulfillment",template:'<vdr-dropdown class="search-settings-menu" *ngIf="fulfilledCount || orderState === \'PartiallyDelivered\'">\r\n    <button type="button" class="icon-button" vdrDropdownTrigger>\r\n        <clr-icon *ngIf="fulfillmentStatus === \'full\'" class="item-fulfilled" shape="check-circle"></clr-icon>\r\n        <clr-icon\r\n            *ngIf="fulfillmentStatus === \'partial\'"\r\n            class="item-partially-fulfilled"\r\n            shape="check-circle"\r\n        ></clr-icon>\r\n        <clr-icon\r\n            *ngIf="fulfillmentStatus === \'none\'"\r\n            class="item-not-fulfilled"\r\n            shape="exclamation-circle"\r\n        ></clr-icon>\r\n    </button>\r\n    <vdr-dropdown-menu vdrPosition="bottom-right">\r\n        <label class="dropdown-header" *ngIf="fulfillmentStatus === \'full\'">\r\n            {{ \'order.line-fulfillment-all\' | translate }}\r\n        </label>\r\n        <label class="dropdown-header" *ngIf="fulfillmentStatus === \'partial\'">\r\n            {{\r\n                \'order.line-fulfillment-partial\' | translate: { total: line.quantity, count: fulfilledCount }\r\n            }}\r\n        </label>\r\n        <label class="dropdown-header" *ngIf="fulfillmentStatus === \'none\'">\r\n            {{ \'order.line-fulfillment-none\' | translate }}\r\n        </label>\r\n        <div class="fulfillment-detail" *ngFor="let item of fulfillments">\r\n            <div class="fulfillment-title">\r\n                {{ \'order.fulfillment\' | translate }} #{{ item.fulfillment.id }} ({{\r\n                    \'order.item-count\' | translate: { count: item.count }\r\n                }})\r\n            </div>\r\n            <vdr-labeled-data [label]="\'common.created-at\' | translate">\r\n                {{ item.fulfillment.createdAt | localeDate: \'medium\' }}\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data [label]="\'order.fulfillment-method\' | translate">\r\n                {{ item.fulfillment.method }}\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data\r\n                *ngIf="item.fulfillment.trackingCode"\r\n                [label]="\'order.tracking-code\' | translate"\r\n            >\r\n                {{ item.fulfillment.trackingCode }}\r\n            </vdr-labeled-data>\r\n        </div>\r\n    </vdr-dropdown-menu>\r\n</vdr-dropdown>\r\n',changeDetection:r.ChangeDetectionStrategy.OnPush,styles:[".item-fulfilled{color:var(--color-success-500)}.item-partially-fulfilled{color:var(--color-warning-500)}.item-not-fulfilled{color:var(--color-error-500)}.fulfillment-detail{margin:6px 12px}.fulfillment-detail:not(:last-of-type){border-bottom:1px dashed var(--color-component-border-200)}"]}]}],C.propDecorators={line:[{type:r.Input}],orderState:[{type:r.Input}]};var S=function(){function e(){}return e.prototype.getRefundedCount=function(){var e,r,t=null!==(r=null===(e=this.payments)||void 0===e?void 0:e.reduce((function(e,r){return f(e,r.refunds)}),[]))&&void 0!==r?r:[];return this.line.items.filter((function(e){if(null===e.refundId&&!e.cancelled)return!1;if(e.refundId){var r=t.find((function(r){return r.id===e.refundId}));return"Failed"!==(null==r?void 0:r.state)}return!1})).length},e}();S.decorators=[{type:r.Component,args:[{selector:"vdr-line-refunds",template:'<span *ngIf="getRefundedCount()" [title]="\'order.refunded-count\' | translate: { count: getRefundedCount() }">\r\n    <clr-icon shape="redo" class="is-solid" dir="down"></clr-icon>\r\n</span>\r\n',changeDetection:r.ChangeDetectionStrategy.OnPush,styles:[":host{color:var(--color-error-500)}"]}]}],S.propDecorators={line:[{type:r.Input}],payments:[{type:r.Input}]};var I=function(){function e(){this.addedItems=new Map,this.removedItems=new Map}return e.prototype.ngOnChanges=function(){var e=this.getModifiedLines(),r=e.added,t=e.removed;this.addedItems=r,this.removedItems=t},e.prototype.getSurcharge=function(e){return this.order.surcharges.find((function(r){return r.id===e}))},e.prototype.getAddedItems=function(){return f(this.addedItems.entries()).map((function(e){var r=m(e,2),t=r[0],n=r[1];return{name:t.productVariant.name,quantity:n}}))},e.prototype.getRemovedItems=function(){return f(this.removedItems.entries()).map((function(e){var r=m(e,2),t=r[0],n=r[1];return{name:t.productVariant.name,quantity:n}}))},e.prototype.getModifiedLines=function(){var e,r,t,n,i=new Map,o=new Map;try{for(var a=p(this.modification.orderItems||[]),l=a.next();!l.done;l=a.next()){var d=l.value,s=this.getOrderLineAndItem(d.id);if(s){var c=s.line;if(s.item.cancelled){var u=null!==(t=o.get(c))&&void 0!==t?t:0;o.set(c,u+1)}else{u=null!==(n=i.get(c))&&void 0!==n?n:0;i.set(c,u+1)}}}}catch(r){e={error:r}}finally{try{l&&!l.done&&(r=a.return)&&r.call(a)}finally{if(e)throw e.error}}return{added:i,removed:o}},e.prototype.getOrderLineAndItem=function(e){var r,t;try{for(var n=p(this.order.lines),i=n.next();!i.done;i=n.next()){var o=i.value,a=o.items.find((function(r){return r.id===e}));if(a)return{line:o,item:a}}}catch(e){r={error:e}}finally{try{i&&!i.done&&(t=n.return)&&t.call(n)}finally{if(r)throw r.error}}},e}();I.decorators=[{type:r.Component,args:[{selector:"vdr-modification-detail",template:'<vdr-labeled-data [label]="\'common.ID\' | translate">{{ modification.id }}</vdr-labeled-data>\r\n<vdr-labeled-data *ngIf="modification.note" [label]="\'order.note\' | translate">{{\r\n    modification.note\r\n}}</vdr-labeled-data>\r\n<vdr-labeled-data *ngFor="let surcharge of modification.surcharges" [label]="\'order.surcharges\' | translate">\r\n    {{ getSurcharge(surcharge.id)?.description }}\r\n    {{ getSurcharge(surcharge.id)?.priceWithTax | localeCurrency: order.currencyCode }}</vdr-labeled-data\r\n>\r\n<vdr-labeled-data *ngIf="getAddedItems().length" [label]="\'order.added-items\' | translate">\r\n    <vdr-simple-item-list [items]="getAddedItems()"></vdr-simple-item-list>\r\n</vdr-labeled-data>\r\n<vdr-labeled-data *ngIf="getRemovedItems().length" [label]="\'order.removed-items\' | translate">\r\n    <vdr-simple-item-list [items]="getRemovedItems()"></vdr-simple-item-list>\r\n</vdr-labeled-data>\r\n',changeDetection:r.ChangeDetectionStrategy.OnPush,styles:[""]}]}],I.propDecorators={order:[{type:r.Input}],modification:[{type:r.Input}]};var x=function(){function e(e){this.formBuilder=e,this.customFieldsConfig=[],this.customFieldValues={},this.updateClick=new r.EventEmitter,this.editable=!1}return e.prototype.ngOnInit=function(){var e,r;this.customFieldForm=this.formBuilder.group({});try{for(var t=p(this.customFieldsConfig),n=t.next();!n.done;n=t.next()){var i=n.value;this.customFieldForm.addControl(i.name,this.formBuilder.control(this.customFieldValues[i.name]))}}catch(r){e={error:r}}finally{try{n&&!n.done&&(r=t.return)&&r.call(t)}finally{if(e)throw e.error}}},e.prototype.onUpdateClick=function(){this.updateClick.emit(this.customFieldForm.value),this.customFieldForm.markAsPristine(),this.editable=!1},e}();x.decorators=[{type:r.Component,args:[{selector:"vdr-order-custom-fields-card",template:'<div class="card" *ngIf="customFieldsConfig.length">\r\n    <div class="card-header">\r\n        {{ \'common.custom-fields\' | translate }}\r\n    </div>\r\n    <div class="card-block">\r\n        <div class="card-text custom-field-form" [class.editable]="editable">\r\n            <ng-container *ngFor="let customField of customFieldsConfig">\r\n                <vdr-custom-field-control\r\n                    entityName="Order"\r\n                    [customFieldsFormGroup]="customFieldForm"\r\n                    [compact]="true"\r\n                    [readonly]="customField.readonly || !editable"\r\n                    [customField]="customField"\r\n                ></vdr-custom-field-control>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n    <div class="card-footer">\r\n        <button class="btn btn-sm btn-secondary" (click)="editable = true" *ngIf="!editable">\r\n            <clr-icon shape="pencil"></clr-icon>\r\n            {{ \'common.edit\' | translate }}\r\n        </button>\r\n        <button\r\n            class="btn btn-sm btn-primary"\r\n            (click)="onUpdateClick()"\r\n            *ngIf="editable"\r\n            [disabled]="customFieldForm.pristine || customFieldForm.invalid"\r\n        >\r\n            <clr-icon shape="check"></clr-icon>\r\n            {{ \'common.update\' | translate }}\r\n        </button>\r\n    </div>\r\n</div>\r\n',changeDetection:r.ChangeDetectionStrategy.OnPush,styles:["vdr-custom-field-control{margin-bottom:6px;display:block}.custom-field-form ::ng-deep .clr-control-label{color:var(--color-grey-400)}.custom-field-form.editable ::ng-deep .clr-control-label{color:inherit}"]}]}],x.ctorParameters=function(){return[{type:t.FormBuilder}]},x.propDecorators={customFieldsConfig:[{type:r.Input}],customFieldValues:[{type:r.Input}],updateClick:[{type:r.Output}]};var O=function(){function e(){this.nextStates=[],this.message="",this.selectedState=""}return e.prototype.select=function(){this.selectedState&&this.resolveWith(this.selectedState)},e.prototype.cancel=function(){this.resolveWith()},e}();O.decorators=[{type:r.Component,args:[{selector:"vdr-order-state-select-dialog",template:'<ng-template vdrDialogTitle>{{ \'order.select-state\' | translate }}</ng-template>\r\n<p>{{ message | translate }}</p>\r\n<clr-select-container>\r\n    <select clrSelect name="state" [(ngModel)]="selectedState">\r\n        <option *ngFor="let state of nextStates" [value]="state">\r\n            {{ state | stateI18nToken | translate }}\r\n        </option>\r\n    </select>\r\n</clr-select-container>\r\n<ng-template vdrDialogButtons>\r\n    <button type="submit" *ngIf="cancellable" (click)="cancel()" class="btn btn-secondary">\r\n        {{ \'common.cancel\' | translate }}\r\n    </button>\r\n    <button type="submit" (click)="select()" class="btn btn-primary" [disabled]="!selectedState">\r\n        {{ \'order.transition-to-state\' | translate: { state: (selectedState | stateI18nToken | translate) } }}\r\n    </button>\r\n</ng-template>\r\n',changeDetection:r.ChangeDetectionStrategy.OnPush,styles:[""]}]}];var w=function(){function e(e,r,t,n){this.dataService=e,this.modalService=r,this.notificationService=t,this.i18nService=n}return e.prototype.transitionToPreModifyingState=function(e,r){var t=this;return this.getPreModifyingState(e).pipe(d.switchMap((function(n){var o={orderId:e,nextStates:r,message:t.i18nService.translate(i.marker("order.unable-to-transition-to-state-try-another"),{state:n}),cancellable:!1,retry:10};return n?t.transitionToStateOrThrow(e,n).pipe(d.catchError((function(e){return t.manuallyTransitionToState(o)}))):t.manuallyTransitionToState(o)})))},e.prototype.manuallyTransitionToState=function(e){var r=this;return this.modalService.fromComponent(O,{locals:{nextStates:e.nextStates,cancellable:e.cancellable,message:e.message},closable:!1,size:"md"}).pipe(d.switchMap((function(t){if(t)return r.transitionToStateOrThrow(e.orderId,t);if(e.cancellable)return l.EMPTY;throw new Error("An order state must be selected")})),d.retryWhen((function(r){return r.pipe(d.delay(2e3),d.take(e.retry))})))},e.prototype.getPreModifyingState=function(e){return this.dataService.order.getOrderHistory(e,{filter:{type:{eq:n.HistoryEntryType.ORDER_STATE_TRANSITION}},sort:{createdAt:n.SortOrder.DESC}}).mapSingle((function(e){return e.order})).pipe(d.map((function(e){var r=null==e?void 0:e.history.items.find((function(e){return"Modifying"===e.data.to}));return r?r.data.from:void 0})))},e.prototype.transitionToStateOrThrow=function(e,r){var t=this;return this.dataService.order.transitionToState(e,r).pipe(d.map((function(e){var r=e.transitionOrderToState;switch(null==r?void 0:r.__typename){case"Order":return null==r?void 0:r.state;case"OrderStateTransitionError":throw t.notificationService.error(null==r?void 0:r.transitionError),new Error(null==r?void 0:r.transitionError)}})))},e}();w.ɵprov=r.ɵɵdefineInjectable({factory:function(){return new w(r.ɵɵinject(n.DataService),r.ɵɵinject(n.ModalService),r.ɵɵinject(n.NotificationService),r.ɵɵinject(n.I18nService))},token:w,providedIn:"root"}),w.decorators=[{type:r.Injectable,args:[{providedIn:"root"}]}],w.ctorParameters=function(){return[{type:n.DataService},{type:n.ModalService},{type:n.NotificationService},{type:n.I18nService}]};var F=function(){function e(e){this.serverConfigService=e,this.states=[]}return e.prototype.ngOnInit=function(){this.states=this.serverConfigService.getOrderProcessStates()},e}();F.decorators=[{type:r.Component,args:[{selector:"vdr-order-process-graph-dialog",template:'<ng-template vdrDialogTitle>{{ \'order.order-state-diagram\' | translate }}</ng-template>\r\n\r\n<vdr-order-process-graph [states]="states" [initialState]="activeState"></vdr-order-process-graph>\r\n',changeDetection:r.ChangeDetectionStrategy.OnPush,styles:[""]}]}],F.ctorParameters=function(){return[{type:n.ServerConfigService}]};var T=function(){function e(e){var r=this;this.i18nService=e,this.lineQuantities={},this.refundShipping=!1,this.adjustment=0,this.reasons=[i.marker("order.refund-reason-customer-request"),i.marker("order.refund-reason-not-available")],this.reasons=this.reasons.map((function(e){return r.i18nService.translate(e)}))}return Object.defineProperty(e.prototype,"refundTotal",{get:function(){var e=this;return this.order.lines.reduce((function(r,t){var n=e.lineQuantities[t.id],i=n.refund&&n.quantity||0;return r+t.proratedUnitPriceWithTax*i}),0)+(this.refundShipping?this.order.shippingWithTax:0)+this.adjustment},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"settledPaymentsTotal",{get:function(){return this.settledPayments.map((function(e){return e.amount-o.summate(e.refunds.filter((function(e){return"Failed"!==e.state})),"total")})).reduce((function(e,r){return e+r}),0)},enumerable:!1,configurable:!0}),e.prototype.lineCanBeRefundedOrCancelled=function(e){var r,t,n=null!==(t=null===(r=this.order.payments)||void 0===r?void 0:r.reduce((function(e,r){return f(e,r.refunds)}),[]))&&void 0!==t?t:[];return 0<e.items.filter((function(e){if(e.cancelled)return!1;if(null==e.refundId)return!0;var r=n.find((function(r){return r.id===e.refundId}));return"Failed"===(null==r?void 0:r.state)})).length},e.prototype.ngOnInit=function(){this.lineQuantities=this.order.lines.reduce((function(e,r){var t;return Object.assign(Object.assign({},e),((t={})[r.id]={quantity:0,refund:!1,cancel:!1},t))}),{}),this.settledPayments=(this.order.payments||[]).filter((function(e){return"Settled"===e.state})),this.settledPayments.length&&(this.selectedPayment=this.settledPayments[0])},e.prototype.handleZeroQuantity=function(e){0===(null==e?void 0:e.quantity)&&(e.cancel=!1,e.refund=!1)},e.prototype.isRefunding=function(){return Object.values(this.lineQuantities).reduce((function(e,r){return e||0<r.quantity&&r.refund}),!1)},e.prototype.isCancelling=function(){return Object.values(this.lineQuantities).reduce((function(e,r){return e||0<r.quantity&&r.cancel}),!1)},e.prototype.canSubmit=function(){return this.isRefunding()?!!(this.selectedPayment&&this.reason&&0<this.refundTotal&&this.refundTotal<=this.settledPaymentsTotal):!!this.isCancelling()&&!!this.reason},e.prototype.select=function(){var e=this.selectedPayment;if(e){var r=this.getOrderLineInput((function(e){return e.refund})),t=this.getOrderLineInput((function(e){return e.cancel}));this.resolveWith({refund:{lines:r,reason:this.reason,shipping:this.refundShipping?this.order.shipping:0,adjustment:this.adjustment,paymentId:e.id},cancel:{lines:t,orderId:this.order.id,reason:this.reason}})}},e.prototype.cancel=function(){this.resolveWith()},e.prototype.getOrderLineInput=function(e){return Object.entries(this.lineQuantities).filter((function(r){var t=m(r,2),n=(t[0],t[1]);return 0<n.quantity&&e(n)})).map((function(e){var r=m(e,2);return{orderLineId:r[0],quantity:r[1].quantity}}))},e}();T.decorators=[{type:r.Component,args:[{selector:"vdr-refund-order-dialog",template:'<ng-template vdrDialogTitle>{{ \'order.refund-and-cancel-order\' | translate }}</ng-template>\n\n<div class="refund-wrapper">\n    <div class="order-table">\n        <table class="table">\n            <thead>\n                <tr>\n                    <th></th>\n                    <th>{{ \'order.product-name\' | translate }}</th>\n                    <th>{{ \'order.product-sku\' | translate }}</th>\n                    <th>{{ \'order.quantity\' | translate }}</th>\n                    <th>{{ \'order.unit-price\' | translate }}</th>\n                    <th>{{ \'order.prorated-unit-price\' | translate }}</th>\n                    <th>{{ \'order.quantity\' | translate }}</th>\n                    <th>{{ \'order.refund\' | translate }}</th>\n                    <th>{{ \'order.cancel\' | translate }}</th>\n                </tr>\n            </thead>\n            <tr *ngFor="let line of order.lines" class="order-line">\n                <td class="align-middle thumb">\n                    <img [src]="line.featuredAsset | assetPreview: \'tiny\'" />\n                </td>\n                <td class="align-middle name">{{ line.productVariant.name }}</td>\n                <td class="align-middle sku">{{ line.productVariant.sku }}</td>\n                <td class="align-middle quantity">\n                    {{ line.quantity }}\n                    <vdr-line-refunds [line]="line" [payments]="order.payments"></vdr-line-refunds>\n                </td>\n                <td class="align-middle quantity">\n                    {{ line.unitPriceWithTax | localeCurrency: order.currencyCode }}\n                </td>\n                <td class="align-middle quantity">\n                    <div class="prorated-wrapper">\n                        {{ line.proratedUnitPriceWithTax | localeCurrency: order.currencyCode }}\n                        <ng-container *ngIf="line.discounts as discounts">\n                            <vdr-dropdown *ngIf="discounts.length">\n                                <div class="promotions-label" vdrDropdownTrigger>\n                                    <button class="icon-button"><clr-icon shape="info"></clr-icon></button>\n                                </div>\n                                <vdr-dropdown-menu>\n                                    <div class="line-promotion" *ngFor="let discount of discounts">\n                                        {{ discount.description }}\n                                        <div class="promotion-amount">\n                                            {{\n                                                discount.amount / 100 / line.quantity\n                                                    | number: \'1.0-2\'\n                                                    | currency: order.currencyCode\n                                            }}\n                                        </div>\n                                    </div>\n                                </vdr-dropdown-menu>\n                            </vdr-dropdown>\n                        </ng-container>\n                    </div>\n                </td>\n                <td class="align-middle fulfil">\n                    <input\n                        *ngIf="lineCanBeRefundedOrCancelled(line)"\n                        [(ngModel)]="lineQuantities[line.id].quantity"\n                        type="number"\n                        [max]="line.quantity"\n                        min="0"\n                        (input)="handleZeroQuantity(lineQuantities[line.id])"\n                    />\n                </td>\n                <td class="align-middle">\n                    <div class="cancel-checkbox-wrapper">\n                        <input\n                            type="checkbox"\n                            *ngIf="lineCanBeRefundedOrCancelled(line)"\n                            clrCheckbox\n                            [disabled]="0 === lineQuantities[line.id].quantity"\n                            [(ngModel)]="lineQuantities[line.id].refund"\n                        />\n                    </div>\n                </td>\n                <td class="align-middle">\n                    <div class="cancel-checkbox-wrapper">\n                        <input\n                            type="checkbox"\n                            *ngIf="lineCanBeRefundedOrCancelled(line)"\n                            clrCheckbox\n                            [disabled]="0 === lineQuantities[line.id].quantity"\n                            [(ngModel)]="lineQuantities[line.id].cancel"\n                        />\n                    </div>\n                </td>\n            </tr>\n        </table>\n    </div>\n    <div class="refund-details mt4">\n        <div>\n            <label class="clr-control-label">{{ \'order.refund-cancellation-reason\' | translate }}</label>\n            <ng-select\n                [disabled]="!isRefunding() && !isCancelling()"\n                [items]="reasons"\n                bindLabel="name"\n                autofocus\n                [placeholder]="\'order.refund-cancellation-reason-required\' | translate"\n                bindValue="id"\n                [addTag]="true"\n                [(ngModel)]="reason"\n            ></ng-select>\n        </div>\n\n        <div>\n            <clr-select-container>\n                <label>{{ \'order.payment-to-refund\' | translate }}</label>\n                <select clrSelect name="options" [(ngModel)]="selectedPayment" [disabled]="!isRefunding()">\n                    <option\n                        *ngFor="let payment of settledPayments"\n                        [ngValue]="payment"\n                        [disabled]="payment.state !== \'Settled\'"\n                    >\n                        #{{ payment.id }} {{ payment.method }}:\n                        {{ payment.amount | localeCurrency: order.currencyCode }}\n                    </option>\n                </select>\n            </clr-select-container>\n\n            <clr-checkbox-wrapper>\n                <input type="checkbox" clrCheckbox [(ngModel)]="refundShipping" [disabled]="!isRefunding()" />\n                <label>\n                    {{ \'order.refund-shipping\' | translate }} ({{\n                        order.shipping | localeCurrency: order.currencyCode\n                    }})\n                </label>\n            </clr-checkbox-wrapper>\n            <clr-input-container>\n                <label>{{ \'order.refund-adjustment\' | translate }}</label>\n                <vdr-currency-input\n                    clrInput\n                    [disabled]="!isRefunding()"\n                    [currencyCode]="order.currencyCode"\n                    [(ngModel)]="adjustment"\n                ></vdr-currency-input>\n            </clr-input-container>\n            <div class="totals" [class.disabled]="!isRefunding()">\n                <div class="order-total">\n                    {{ \'order.payment-amount\' | translate }}:\n                    {{ selectedPayment.amount | localeCurrency: order.currencyCode }}\n                </div>\n                <div class="refund-total">\n                    {{ \'order.refund-total\' | translate }}:\n                    {{ refundTotal | localeCurrency: order.currencyCode }}\n                </div>\n                <div class="refund-total-error" *ngIf="refundTotal < 0 || settledPaymentsTotal < refundTotal">\n                    {{\n                        \'order.refund-total-error\'\n                            | translate\n                                : {\n                                      min: 0 | currency: order.currencyCode,\n                                      max: settledPaymentsTotal | localeCurrency: order.currencyCode\n                                  }\n                    }}\n                </div>\n                <div class="refund-total-warning" *ngIf="selectedPayment.amount < refundTotal">\n                    {{ \'order.refund-total-warning\' | translate }}\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n\n<ng-template vdrDialogButtons>\n    <button type="button" class="btn" (click)="cancel()">{{ \'common.cancel\' | translate }}</button>\n    <button type="submit" (click)="select()" [disabled]="!canSubmit()" class="btn btn-primary">\n        <ng-container *ngIf="isRefunding(); else cancelling">\n            {{\n                \'order.refund-with-amount\'\n                    | translate: { amount: refundTotal | localeCurrency: order.currencyCode }\n            }}\n        </ng-container>\n        <ng-template #cancelling>\n            {{ \'order.cancel-selected-items\' | translate }}\n        </ng-template>\n    </button>\n</ng-template>\n',changeDetection:r.ChangeDetectionStrategy.OnPush,styles:[":host{height:100%;display:flex;min-height:64vh}.refund-wrapper{flex:1;flex-direction:column}.refund-wrapper .order-table{flex:1;overflow-y:auto}.refund-wrapper .order-table table{margin-top:0}.refund-wrapper tr.ignore{color:var(--color-grey-300)}.cancel-checkbox-wrapper{display:flex;align-items:center;justify-content:center}clr-checkbox-wrapper{margin-top:12px;margin-bottom:12px;display:block}.refund-details{display:flex;justify-content:space-between}.totals{margin-top:48px}.totals .refund-total{font-size:18px}.totals .refund-total-error{color:var(--color-error-500)}.totals .refund-total-warning{color:var(--color-warning-600);max-width:250px}.totals.disabled{color:var(--color-grey-300)}.prorated-wrapper{display:flex;justify-content:center}.line-promotion{display:flex;justify-content:space-between;font-size:12px;padding:3px 6px}.line-promotion .promotion-amount{margin-left:12px}"]}]}],T.ctorParameters=function(){return[{type:n.I18nService}]};var P=function(){function e(){this.transactionId=""}return e.prototype.submit=function(){this.resolveWith(this.transactionId)},e.prototype.cancel=function(){this.resolveWith()},e}();P.decorators=[{type:r.Component,args:[{selector:"vdr-settle-refund-dialog",template:'<ng-template vdrDialogTitle>{{ \'order.settle-refund\' | translate }}</ng-template>\r\n<p class="instruction">\r\n    {{ \'order.settle-refund-manual-instructions\' | translate: { method: refund.method } }}\r\n</p>\r\n<clr-input-container>\r\n    <label>{{ \'order.transaction-id\' | translate }}</label>\r\n    <input clrInput name="transactionId" [(ngModel)]="transactionId" />\r\n</clr-input-container>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type="button" class="btn" (click)="cancel()">{{ \'common.cancel\' | translate }}</button>\r\n    <button type="submit" (click)="submit()" [disabled]="!transactionId" class="btn btn-primary">\r\n        {{ \'order.settle-refund\' | translate }}\r\n    </button>\r\n</ng-template>\r\n',changeDetection:r.ChangeDetectionStrategy.OnPush,styles:[":host{padding-bottom:32px}.instruction{margin-top:0;margin-bottom:24px}"]}]}];var k,D=function(e){function r(r,n,i,o,a,d,s,c){var u=e.call(this,n,r,i,a)||this;return u.changeDetector=o,u.dataService=a,u.notificationService=d,u.modalService=s,u.orderTransitionService=c,u.detailForm=new t.FormGroup({}),u.fetchHistory=new l.Subject,u.defaultStates=["AddingItems","ArrangingPayment","PaymentAuthorized","PaymentSettled","PartiallyShipped","Shipped","PartiallyDelivered","Delivered","Cancelled","Modifying","ArrangingAdditionalPayment"],u}return u(r,e),r.prototype.ngOnInit=function(){var e=this;this.init(),this.entity$.pipe(d.take(1)).subscribe((function(r){"Modifying"===r.state&&e.router.navigate(["./","modify"],{relativeTo:e.route})})),this.customFields=this.getCustomFieldConfig("Order"),this.orderLineCustomFields=this.getCustomFieldConfig("OrderLine"),this.history$=this.fetchHistory.pipe(d.startWith(null),d.switchMap((function(){return e.dataService.order.getOrderHistory(e.id,{sort:{createdAt:n.SortOrder.DESC}}).mapStream((function(e){var r;return null===(r=e.order)||void 0===r?void 0:r.history.items}))}))),this.nextStates$=this.entity$.pipe(d.map((function(r){return!e.defaultStates.includes(r.state)?r.nextStates:r.nextStates.filter((function(r){return!e.defaultStates.includes(r)}))})))},r.prototype.ngOnDestroy=function(){this.destroy()},r.prototype.openStateDiagram=function(){var e=this;this.entity$.pipe(d.take(1),d.switchMap((function(r){return e.modalService.fromComponent(F,{closable:!0,locals:{activeState:r.state}})}))).subscribe()},r.prototype.transitionToState=function(e){var r=this;this.dataService.order.transitionToState(this.id,e).subscribe((function(t){var n=t.transitionOrderToState;switch(null==n?void 0:n.__typename){case"Order":r.notificationService.success(i.marker("order.transitioned-to-state-success"),{state:e}),r.fetchHistory.next();break;case"OrderStateTransitionError":r.notificationService.error(n.transitionError)}}))},r.prototype.manuallyTransitionToState=function(e){this.orderTransitionService.manuallyTransitionToState({orderId:e.id,nextStates:e.nextStates,cancellable:!0,message:i.marker("order.manually-transition-to-state-message"),retry:0}).subscribe()},r.prototype.transitionToModifying=function(){var e=this;this.dataService.order.transitionToState(this.id,"Modifying").subscribe((function(r){var t=r.transitionOrderToState;switch(null==t?void 0:t.__typename){case"Order":e.router.navigate(["./modify"],{relativeTo:e.route});break;case"OrderStateTransitionError":e.notificationService.error(t.transitionError)}}))},r.prototype.updateCustomFields=function(e){var r=this;this.dataService.order.updateOrderCustomFields({id:this.id,customFields:e}).subscribe((function(){r.notificationService.success(i.marker("common.notify-update-success"),{entity:"Order"})}))},r.prototype.getOrderAddressLines=function(e){return e?Object.values(e).filter((function(e){return"OrderAddress"!==e})).filter((function(e){return!!e})):[]},r.prototype.settlePayment=function(e){var r=this;this.dataService.order.settlePayment(e.id).subscribe((function(e){var t=e.settlePayment;switch(t.__typename){case"Payment":"Settled"===t.state?r.notificationService.success(i.marker("order.settle-payment-success")):r.notificationService.error(i.marker("order.settle-payment-error")),r.dataService.order.getOrder(r.id).single$.subscribe(),r.fetchHistory.next();break;case"OrderStateTransitionError":case"PaymentStateTransitionError":case"SettlePaymentError":r.notificationService.error(t.message)}}))},r.prototype.transitionPaymentState=function(e){var r=this,t=e.payment,n=e.state;this.dataService.order.transitionPaymentToState(t.id,n).subscribe((function(e){var t=e.transitionPaymentToState;switch(t.__typename){case"Payment":r.notificationService.success(i.marker("order.transitioned-payment-to-state-success"),{state:n}),r.dataService.order.getOrder(r.id).single$.subscribe(),r.fetchHistory.next();break;case"PaymentStateTransitionError":r.notificationService.error(t.message)}}))},r.prototype.canAddFulfillment=function(e){return!e.lines.reduce((function(e,r){return f(e,r.items)}),[]).every((function(e){return!!e.fulfillment}))&&!this.hasUnsettledModifications(e)&&0===this.outstandingPaymentAmount(e)&&(e.nextStates.includes("Shipped")||e.nextStates.includes("PartiallyShipped")||e.nextStates.includes("Delivered"))},r.prototype.hasUnsettledModifications=function(e){return 0<e.modifications.filter((function(e){return!e.isSettled})).length},r.prototype.getOutstandingModificationAmount=function(e){return o.summate(e.modifications.filter((function(e){return!e.isSettled})),"priceChange")},r.prototype.outstandingPaymentAmount=function(e){var r,t,n,i,a,l=0;try{for(var d=p(null!==(i=null===(n=e.payments)||void 0===n?void 0:n.filter((function(e){return"Cancelled"!==e.state&&"Declined"!==e.state&&"Error"!==e.state})))&&void 0!==i?i:[]),s=d.next();!s.done;s=d.next()){var c=s.value,u=null!==(a=c.refunds.filter((function(e){return"Failed"!==e.state})))&&void 0!==a?a:[],m=o.summate(u,"total");l+=c.amount-m}}catch(e){r={error:e}}finally{try{s&&!s.done&&(t=d.return)&&t.call(d)}finally{if(r)throw r.error}}return e.totalWithTax-l},r.prototype.addManualPayment=function(e){var r=this;this.modalService.fromComponent(s,{closable:!0,locals:{outstandingAmount:this.outstandingPaymentAmount(e),currencyCode:e.currencyCode}}).pipe(d.switchMap((function(e){return e?r.dataService.order.addManualPaymentToOrder({orderId:r.id,transactionId:e.transactionId,method:e.method,metadata:e.metadata||{}}):l.EMPTY})),d.switchMap((function(t){var n=t.addManualPaymentToOrder;switch(n.__typename){case"Order":return r.notificationService.success(i.marker("order.add-payment-to-order-success")),r.orderTransitionService.transitionToPreModifyingState(e.id,e.nextStates);case"ManualPaymentStateError":return r.notificationService.error(n.message),l.EMPTY;default:return l.EMPTY}}))).subscribe((function(e){e&&r.refetchOrder({result:e})}))},r.prototype.fulfillOrder=function(){var e=this;this.entity$.pipe(d.take(1),d.switchMap((function(r){return e.modalService.fromComponent(g,{size:"xl",locals:{order:r}})})),d.switchMap((function(r){return r?e.dataService.order.createFulfillment(r):l.of(void 0)})),d.switchMap((function(r){return e.refetchOrder(r).pipe(d.mapTo(r))}))).subscribe((function(r){if(r)switch(r.addFulfillmentToOrder.__typename){case"Fulfillment":e.notificationService.success(i.marker("order.create-fulfillment-success"));break;case"EmptyOrderLineSelectionError":case"InsufficientStockOnHandError":case"ItemsAlreadyFulfilledError":e.notificationService.error(r.addFulfillmentToOrder.message)}}))},r.prototype.transitionFulfillment=function(e,r){var t=this;this.dataService.order.transitionFulfillmentToState(e,r).pipe(d.switchMap((function(e){return t.refetchOrder(e)}))).subscribe((function(){t.notificationService.success(i.marker("order.successfully-updated-fulfillment"))}))},r.prototype.cancelOrRefund=function(e){var r=this.orderHasSettledPayments(e);"PaymentAuthorized"!==e.state&&!0!==e.active&&r?this.refundOrder(e):this.cancelOrder(e)},r.prototype.settleRefund=function(e){var r=this;this.modalService.fromComponent(P,{size:"md",locals:{refund:e}}).pipe(d.switchMap((function(t){return t?r.dataService.order.settleRefund({transactionId:t,id:e.id},r.id):l.of(void 0)}))).subscribe((function(e){e&&r.notificationService.success(i.marker("order.settle-refund-success"))}))},r.prototype.addNote=function(e){var r=this,t=e.note,n=e.isPublic;this.dataService.order.addNoteToOrder({id:this.id,note:t,isPublic:n}).pipe(d.switchMap((function(e){return r.refetchOrder(e)}))).subscribe((function(e){r.notificationService.success(i.marker("common.notify-create-success"),{entity:"Note"})}))},r.prototype.updateNote=function(e){var r=this;this.modalService.fromComponent(n.EditNoteDialogComponent,{closable:!0,locals:{displayPrivacyControls:!0,note:e.data.note,noteIsPrivate:!e.isPublic}}).pipe(d.switchMap((function(t){return t?r.dataService.order.updateOrderNote({noteId:e.id,isPublic:!t.isPrivate,note:t.note}):l.EMPTY}))).subscribe((function(e){r.fetchHistory.next(),r.notificationService.success(i.marker("common.notify-update-success"),{entity:"Note"})}))},r.prototype.deleteNote=function(e){var r=this;return this.modalService.dialog({title:i.marker("common.confirm-delete-note"),body:e.data.note,buttons:[{type:"secondary",label:i.marker("common.cancel")},{type:"danger",label:i.marker("common.delete"),returnValue:!0}]}).pipe(d.switchMap((function(t){return t?r.dataService.order.deleteOrderNote(e.id):l.EMPTY}))).subscribe((function(){r.fetchHistory.next(),r.notificationService.success(i.marker("common.notify-delete-success"),{entity:"Note"})}))},r.prototype.orderHasSettledPayments=function(e){var r;return!!(null===(r=e.payments)||void 0===r?void 0:r.find((function(e){return"Settled"===e.state})))},r.prototype.cancelOrder=function(e){var r=this;this.modalService.fromComponent(y,{size:"xl",locals:{order:e}}).pipe(d.switchMap((function(e){return e?r.dataService.order.cancelOrder(e):l.of(void 0)})),d.switchMap((function(e){return r.refetchOrder(e)}))).subscribe((function(e){e&&r.notificationService.success(i.marker("order.cancelled-order-success"))}))},r.prototype.refundOrder=function(e){var r=this;this.modalService.fromComponent(T,{size:"xl",locals:{order:e}}).pipe(d.switchMap((function(e){var t;if(!e)return l.of(void 0);var n=[];return e.refund.lines.length&&n.push(r.dataService.order.refundOrder(e.refund).pipe(d.map((function(e){return e.refundOrder})))),(null===(t=e.cancel.lines)||void 0===t?void 0:t.length)&&n.push(r.dataService.order.cancelOrder(e.cancel).pipe(d.map((function(e){return e.cancelOrder})))),l.merge.apply(void 0,f(n))}))).subscribe((function(e){if(e)switch(e.__typename){case"Order":r.refetchOrder(e).subscribe(),r.notificationService.success(i.marker("order.cancelled-order-success"));break;case"Refund":r.refetchOrder(e).subscribe(),"Failed"===e.state?r.notificationService.error(i.marker("order.refund-order-failed")):r.notificationService.success(i.marker("order.refund-order-success"));break;case"QuantityTooGreatError":case"MultipleOrderError":case"OrderStateTransitionError":case"CancelActiveOrderError":case"EmptyOrderLineSelectionError":case"AlreadyRefundedError":case"NothingToRefundError":case"PaymentOrderMismatchError":case"RefundOrderStateError":case"RefundStateTransitionError":r.notificationService.error(e.message)}}))},r.prototype.refetchOrder=function(e){return this.fetchHistory.next(),e?this.dataService.order.getOrder(this.id).single$:l.of(void 0)},r.prototype.setFormValues=function(e){},r}(n.BaseDetailComponent);D.decorators=[{type:r.Component,args:[{selector:"vdr-order-detail",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">\r\n                <button\r\n                    class="icon-button"\r\n                    (click)="openStateDiagram()"\r\n                    [title]="\'order.order-state-diagram\' | translate"\r\n                >\r\n                    <clr-icon shape="list"></clr-icon>\r\n                </button>\r\n            </vdr-order-state-label>\r\n        </div>\r\n    </vdr-ab-left>\r\n\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId="order-detail"></vdr-action-bar-items>\r\n        <button\r\n            class="btn btn-primary"\r\n            *ngIf="\r\n                order.state === \'ArrangingAdditionalPayment\' &&\r\n                (hasUnsettledModifications(order) || 0 < outstandingPaymentAmount(order))\r\n            "\r\n            (click)="addManualPayment(order)"\r\n        >\r\n            {{ \'order.add-payment-to-order\' | translate }}\r\n            ({{ outstandingPaymentAmount(order) | localeCurrency: order.currencyCode }})\r\n        </button>\r\n        <button\r\n            class="btn btn-primary"\r\n            *ngIf="order.state !== \'ArrangingAdditionalPayment\' && 0 < outstandingPaymentAmount(order)"\r\n            (click)="transitionToState(\'ArrangingAdditionalPayment\')"\r\n        >\r\n            {{ \'order.arrange-additional-payment\' | translate }}\r\n        </button>\r\n        <button class="btn btn-primary" (click)="fulfillOrder()" [disabled]="!canAddFulfillment(order)">\r\n            {{ \'order.fulfill-order\' | translate }}\r\n        </button>\r\n        <vdr-dropdown>\r\n            <button class="icon-button" vdrDropdownTrigger>\r\n                <clr-icon shape="ellipsis-vertical"></clr-icon>\r\n            </button>\r\n            <vdr-dropdown-menu vdrPosition="bottom-right">\r\n                <ng-container *ngIf="order.nextStates.includes(\'Modifying\')">\r\n                    <button type="button" class="btn" vdrDropdownItem (click)="transitionToModifying()">\r\n                        <clr-icon shape="pencil"></clr-icon>\r\n                        {{ \'order.modify-order\' | translate }}\r\n                    </button>\r\n                    <div class="dropdown-divider"></div>\r\n                </ng-container>\r\n                <button\r\n                    type="button"\r\n                    class="btn"\r\n                    vdrDropdownItem\r\n                    *ngIf="order.nextStates.includes(\'Cancelled\')"\r\n                    (click)="cancelOrRefund(order)"\r\n                >\r\n                    <clr-icon shape="error-standard" class="is-error"></clr-icon>\r\n                    <ng-container *ngIf="orderHasSettledPayments(order); else cancelOnly">\r\n                        {{ \'order.refund-and-cancel-order\' | translate }}\r\n                    </ng-container>\r\n                    <ng-template #cancelOnly>\r\n                        {{ \'order.cancel-order\' | translate }}\r\n                    </ng-template>\r\n                </button>\r\n\r\n                <ng-container *ngIf="(nextStates$ | async)?.length">\r\n                    <div class="dropdown-divider"></div>\r\n                    <button\r\n                        *ngFor="let nextState of nextStates$ | async"\r\n                        type="button"\r\n                        class="btn"\r\n                        vdrDropdownItem\r\n                        (click)="transitionToState(nextState)"\r\n                    >\r\n                        <clr-icon shape="step-forward-2"></clr-icon>\r\n                        {{\r\n                            \'order.transition-to-state\'\r\n                                | translate: { state: (nextState | stateI18nToken | translate) }\r\n                        }}\r\n                    </button>\r\n                </ng-container>\r\n                <div class="dropdown-divider"></div>\r\n                <button type="button" class="btn" vdrDropdownItem (click)="manuallyTransitionToState(order)">\r\n                    <clr-icon shape="step-forward-2" class="is-warning"></clr-icon>\r\n                    {{ \'order.manually-transition-to-state\' | translate }}\r\n                </button>\r\n            </vdr-dropdown-menu>\r\n        </vdr-dropdown>\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            <vdr-order-table\r\n                [order]="order"\r\n                [orderLineCustomFields]="orderLineCustomFields"\r\n            ></vdr-order-table>\r\n            <h4>{{ \'order.tax-summary\' | translate }}</h4>\r\n            <table class="table">\r\n                <thead>\r\n                    <tr>\r\n                        <th>{{ \'common.description\' | translate }}</th>\r\n                        <th>{{ \'order.tax-rate\' | translate }}</th>\r\n                        <th>{{ \'order.tax-base\' | translate }}</th>\r\n                        <th>{{ \'order.tax-total\' | translate }}</th>\r\n                    </tr>\r\n                </thead>\r\n                <tbody>\r\n                    <tr *ngFor="let row of order.taxSummary">\r\n                        <td>{{ row.description }}</td>\r\n                        <td>{{ row.taxRate / 100 | percent }}</td>\r\n                        <td>{{ row.taxBase | localeCurrency: order.currencyCode }}</td>\r\n                        <td>{{ row.taxTotal | localeCurrency: order.currencyCode }}</td>\r\n                    </tr>\r\n                </tbody>\r\n            </table>\r\n\r\n            <vdr-order-history\r\n                [order]="order"\r\n                [history]="history$ | async"\r\n                (addNote)="addNote($event)"\r\n                (updateNote)="updateNote($event)"\r\n                (deleteNote)="deleteNote($event)"\r\n            ></vdr-order-history>\r\n        </div>\r\n        <div class="clr-col-lg-4 order-cards">\r\n            <vdr-order-custom-fields-card\r\n                [customFieldsConfig]="customFields"\r\n                [customFieldValues]="order.customFields"\r\n                (updateClick)="updateCustomFields($event)"\r\n            ></vdr-order-custom-fields-card>\r\n            <div class="card">\r\n                <div class="card-header">\r\n                    {{ \'order.customer\' | translate }}\r\n                </div>\r\n                <div class="card-block">\r\n                    <div class="card-text">\r\n                        <vdr-customer-label [customer]="order.customer"></vdr-customer-label>\r\n                        <h6 *ngIf="getOrderAddressLines(order.shippingAddress).length">\r\n                            {{ \'order.shipping-address\' | translate }}\r\n                        </h6>\r\n                        <vdr-formatted-address [address]="order.shippingAddress"></vdr-formatted-address>\r\n                        <h6 *ngIf="getOrderAddressLines(order.billingAddress).length">\r\n                            {{ \'order.billing-address\' | translate }}\r\n                        </h6>\r\n                        <vdr-formatted-address [address]="order.billingAddress"></vdr-formatted-address>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <ng-container *ngIf="order.payments && order.payments.length">\r\n                <vdr-order-payment-card\r\n                    *ngFor="let payment of order.payments"\r\n                    [currencyCode]="order.currencyCode"\r\n                    [payment]="payment"\r\n                    (settlePayment)="settlePayment($event)"\r\n                    (transitionPaymentState)="transitionPaymentState($event)"\r\n                    (settleRefund)="settleRefund($event)"\r\n                ></vdr-order-payment-card>\r\n            </ng-container>\r\n            <ng-container *ngFor="let fulfillment of order.fulfillments">\r\n                <vdr-fulfillment-card\r\n                    [fulfillment]="fulfillment"\r\n                    [order]="order"\r\n                    (transitionState)="transitionFulfillment(fulfillment.id, $event)"\r\n                ></vdr-fulfillment-card>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n</div>\r\n',changeDetection:r.ChangeDetectionStrategy.OnPush,styles:[".shipping-address{list-style-type:none;line-height:1.3em}.order-cards h6{margin-top:6px;color:var(--color-text-200)}"]}]}],D.ctorParameters=function(){return[{type:a.Router},{type:a.ActivatedRoute},{type:n.ServerConfigService},{type:r.ChangeDetectorRef},{type:n.DataService},{type:n.NotificationService},{type:n.ModalService},{type:w}]},e.OrderEditResultType=void 0,(k=e.OrderEditResultType||(e.OrderEditResultType={}))[k.Refund=0]="Refund",k[k.Payment=1]="Payment",k[k.PriceUnchanged=2]="PriceUnchanged",k[k.Cancel=3]="Cancel";var A=function(){function r(){}return Object.defineProperty(r.prototype,"priceDifference",{get:function(){return this.order.totalWithTax-this.originalTotalWithTax},enumerable:!1,configurable:!0}),r.prototype.ngOnInit=function(){this.refundNote=this.modifyOrderInput.note||""},r.prototype.cancel=function(){this.resolveWith({result:e.OrderEditResultType.Cancel})},r.prototype.submit=function(){0<this.priceDifference?this.resolveWith({result:e.OrderEditResultType.Payment}):this.priceDifference<0?this.resolveWith({result:e.OrderEditResultType.Refund,refundPaymentId:this.selectedPayment.id,refundNote:this.refundNote}):this.resolveWith({result:e.OrderEditResultType.PriceUnchanged})},r}();A.decorators=[{type:r.Component,args:[{selector:"vdr-order-edits-preview-dialog",template:'<ng-template vdrDialogTitle>{{ \'order.confirm-modifications\' | translate }}</ng-template>\r\n<vdr-order-table [order]="order" [orderLineCustomFields]="orderLineCustomFields"></vdr-order-table>\r\n\r\n<h4 class="h4">\r\n    {{ \'order.modify-order-price-difference\' | translate }}:\r\n    <strong>{{ priceDifference | localeCurrency: order.currencyCode }}</strong>\r\n</h4>\r\n<div *ngIf="priceDifference < 0">\r\n<clr-select-container>\r\n    <label>{{ \'order.payment-to-refund\' | translate }}</label>\r\n    <select clrSelect name="options" [(ngModel)]="selectedPayment">\r\n        <option\r\n            *ngFor="let payment of order.payments"\r\n            [ngValue]="payment"\r\n        >\r\n            #{{ payment.id }} {{ payment.method }}:\r\n            {{ payment.amount | localeCurrency: order.currencyCode }}\r\n        </option>\r\n    </select>\r\n</clr-select-container>\r\n    <label class="clr-control-label">{{ \'order.refund-cancellation-reason\' | translate }}</label>\r\n    <textarea [(ngModel)]="refundNote" name="refundNote" clrTextarea required></textarea>\r\n</div>\r\n<ng-template vdrDialogButtons>\r\n    <button type="button" class="btn" (click)="cancel()">{{ \'common.cancel\' | translate }}</button>\r\n    <button type="submit" (click)="submit()" [disabled]="priceDifference < 0 && !selectedPayment" class="btn btn-primary">\r\n        {{ \'common.confirm\' | translate }}\r\n    </button>\r\n</ng-template>\r\n',changeDetection:r.ChangeDetectionStrategy.OnPush,styles:[""]}]}];var E=function(r){function i(e,n,i,o,a,l,d,s){var c=r.call(this,n,e,i,a)||this;return c.changeDetector=o,c.dataService=a,c.notificationService=l,c.modalService=d,c.orderTransitionService=s,c.detailForm=new t.FormGroup({}),c.modifyOrderInput={dryRun:!0,orderId:"",addItems:[],adjustOrderLines:[],surcharges:[],note:"",updateShippingAddress:{},updateBillingAddress:{}},c.note="",c.recalculateShipping=!0,c.addedVariants=new Map,c}return u(i,r),Object.defineProperty(i.prototype,"addedLines",{get:function(){var e=this,r=function(e){return"SinglePrice"===e.__typename?e.value:0};return(this.modifyOrderInput.addItems||[]).map((function(t){var n=e.addedVariants.get(t.productVariantId);if(n)return Object.assign(Object.assign({},n),{price:r(n.price),priceWithTax:r(n.priceWithTax),quantity:t.quantity})})).filter(o.notNullOrUndefined)},enumerable:!1,configurable:!0}),i.prototype.ngOnInit=function(){var e,r,i=this;this.init(),this.addressCustomFields=this.getCustomFieldConfig("Address"),this.modifyOrderInput.orderId=this.route.snapshot.paramMap.get("id"),this.orderLineCustomFields=this.getCustomFieldConfig("OrderLine"),this.entity$.pipe(d.takeUntil(this.destroy$)).subscribe((function(e){var r,n,o,a,l,s,c,u,m,f,y,g,v,h,b,C,S,I,x,O;i.surchargeForm=new t.FormGroup({description:new t.FormControl("",t.Validators.required),sku:new t.FormControl(""),price:new t.FormControl(0,t.Validators.required),priceIncludesTax:new t.FormControl(!0),taxRate:new t.FormControl(0),taxDescription:new t.FormControl("")}),i.shippingAddressForm||(i.shippingAddressForm=new t.FormGroup({fullName:new t.FormControl(null===(o=e.shippingAddress)||void 0===o?void 0:o.fullName),company:new t.FormControl(null===(a=e.shippingAddress)||void 0===a?void 0:a.company),streetLine1:new t.FormControl(null===(l=e.shippingAddress)||void 0===l?void 0:l.streetLine1),streetLine2:new t.FormControl(null===(s=e.shippingAddress)||void 0===s?void 0:s.streetLine2),city:new t.FormControl(null===(c=e.shippingAddress)||void 0===c?void 0:c.city),province:new t.FormControl(null===(u=e.shippingAddress)||void 0===u?void 0:u.province),postalCode:new t.FormControl(null===(m=e.shippingAddress)||void 0===m?void 0:m.postalCode),countryCode:new t.FormControl(null===(f=e.shippingAddress)||void 0===f?void 0:f.countryCode),phoneNumber:new t.FormControl(null===(y=e.shippingAddress)||void 0===y?void 0:y.phoneNumber)})),i.billingAddressForm||(i.billingAddressForm=new t.FormGroup({fullName:new t.FormControl(null===(g=e.billingAddress)||void 0===g?void 0:g.fullName),company:new t.FormControl(null===(v=e.billingAddress)||void 0===v?void 0:v.company),streetLine1:new t.FormControl(null===(h=e.billingAddress)||void 0===h?void 0:h.streetLine1),streetLine2:new t.FormControl(null===(b=e.billingAddress)||void 0===b?void 0:b.streetLine2),city:new t.FormControl(null===(C=e.billingAddress)||void 0===C?void 0:C.city),province:new t.FormControl(null===(S=e.billingAddress)||void 0===S?void 0:S.province),postalCode:new t.FormControl(null===(I=e.billingAddress)||void 0===I?void 0:I.postalCode),countryCode:new t.FormControl(null===(x=e.billingAddress)||void 0===x?void 0:x.countryCode),phoneNumber:new t.FormControl(null===(O=e.billingAddress)||void 0===O?void 0:O.phoneNumber)})),i.orderLineCustomFieldsFormArray=new t.FormArray([]);var w=function(e){var r,n,o=new t.FormGroup({});try{for(var a=(r=void 0,p(i.orderLineCustomFields)),l=a.next();!l.done;l=a.next()){var s=l.value.name;o.addControl(s,new t.FormControl(e.customFields[s]))}}catch(e){r={error:e}}finally{try{l&&!l.done&&(n=a.return)&&n.call(a)}finally{if(r)throw r.error}}o.valueChanges.pipe(d.takeUntil(i.destroy$)).subscribe((function(r){var t=i.modifyOrderInput.adjustOrderLines.find((function(r){return r.orderLineId===e.id}));t||(t={orderLineId:e.id,quantity:e.quantity},i.modifyOrderInput.adjustOrderLines.push(t)),i.orderLineCustomFields.length&&(t.customFields=r)})),i.orderLineCustomFieldsFormArray.push(o)};try{for(var F=p(e.lines),T=F.next();!T.done;T=F.next()){w(T.value)}}catch(e){r={error:e}}finally{try{T&&!T.done&&(n=F.return)&&n.call(F)}finally{if(r)throw r.error}}})),this.addItemCustomFieldsFormArray=new t.FormArray([]),this.addItemCustomFieldsForm=new t.FormGroup({});try{for(var o=p(this.orderLineCustomFields),a=o.next();!a.done;a=o.next()){var l=a.value;this.addItemCustomFieldsForm.addControl(l.name,new t.FormControl)}}catch(r){e={error:r}}finally{try{a&&!a.done&&(r=o.return)&&r.call(o)}finally{if(e)throw e.error}}this.availableCountries$=this.dataService.settings.getAvailableCountries().mapSingle((function(e){return e.countries.items})).pipe(d.shareReplay(1)),this.dataService.order.getOrderHistory(this.id,{take:1,sort:{createdAt:n.SortOrder.DESC},filter:{type:{eq:n.HistoryEntryType.ORDER_STATE_TRANSITION}}}).single$.subscribe((function(e){var r=e.order;i.previousState=null==r?void 0:r.history.items[0].data.from}))},i.prototype.ngOnDestroy=function(){this.destroy()},i.prototype.transitionToPriorState=function(e){var r=this;this.orderTransitionService.transitionToPreModifyingState(e.id,e.nextStates).subscribe((function(e){r.router.navigate([".."],{relativeTo:r.route})}))},i.prototype.canPreviewChanges=function(){var e=this.modifyOrderInput,r=e.addItems,t=e.adjustOrderLines,n=e.surcharges;return!!(null==r?void 0:r.length)||!!(null==n?void 0:n.length)||!!(null==t?void 0:t.length)||this.shippingAddressForm.dirty&&this.shippingAddressForm.valid||this.billingAddressForm.dirty&&this.billingAddressForm.valid},i.prototype.isLineModified=function(e){var r;return!!(null===(r=this.modifyOrderInput.adjustOrderLines)||void 0===r?void 0:r.find((function(r){return r.orderLineId===e.id&&r.quantity!==e.quantity})))},i.prototype.updateLineQuantity=function(e,r){var t=this.modifyOrderInput.adjustOrderLines,n=null==t?void 0:t.find((function(r){return r.orderLineId===e.id}));n&&+r===e.quantity&&(null==t||t.splice(null==t?void 0:t.indexOf(n),1)),n||(n={orderLineId:e.id,quantity:+r},null==t||t.push(n)),n.quantity=+r},i.prototype.updateAddedItemQuantity=function(e,r){var t,n=null===(t=this.modifyOrderInput.addItems)||void 0===t?void 0:t.find((function(r){return r.productVariantId===e.productVariantId}));n&&(n.quantity=+r)},i.prototype.trackByProductVariantId=function(e,r){return r.productVariantId},i.prototype.getSelectedItemPrice=function(e){switch(null==e?void 0:e.priceWithTax.__typename){case"SinglePrice":return e.priceWithTax.value;default:return 0}},i.prototype.addItemToOrder=function(e){var r,n,i,o,a=this;if(e){var l=this.orderLineCustomFields.length?this.addItemCustomFieldsForm.value:void 0,s=null===(i=this.modifyOrderInput.addItems)||void 0===i?void 0:i.find((function(r){return a.isMatchingAddItemRow(r,e,l)}));if(s?s.quantity++:(s={productVariantId:e.productVariantId,quantity:1},l&&(s.customFields=l),null===(o=this.modifyOrderInput.addItems)||void 0===o||o.push(s)),l){var c=new t.FormGroup({});try{for(var u=p(Object.entries(l)),f=u.next();!f.done;f=u.next()){var y=m(f.value,2),g=y[0],v=y[1];c.addControl(g,new t.FormControl(v))}}catch(e){r={error:e}}finally{try{f&&!f.done&&(n=u.return)&&n.call(u)}finally{if(r)throw r.error}}this.addItemCustomFieldsFormArray.push(c),c.valueChanges.pipe(d.takeUntil(this.destroy$)).subscribe((function(e){s&&(s.customFields=e)}))}this.addItemCustomFieldsForm.reset({}),this.addItemSelectedVariant=void 0,this.addedVariants.set(e.productVariantId,e)}},i.prototype.isMatchingAddItemRow=function(e,r,t){return e.productVariantId===r.productVariantId&&JSON.stringify(e.customFields)===JSON.stringify(t)},i.prototype.removeAddedItem=function(e){this.modifyOrderInput.addItems.splice(e,1),-1<e&&this.addItemCustomFieldsFormArray.removeAt(e)},i.prototype.getSurchargePrices=function(e){var r=e.priceIncludesTax?e.price:Math.round(e.price*((100+(e.taxRate||0))/100));return{price:e.priceIncludesTax?Math.round(e.price/((100+(e.taxRate||0))/100)):e.price,priceWithTax:r}},i.prototype.addSurcharge=function(e){var r;null===(r=this.modifyOrderInput.surcharges)||void 0===r||r.push(e),this.surchargeForm.reset({price:0,priceIncludesTax:!0,taxRate:0})},i.prototype.removeSurcharge=function(e){var r;null===(r=this.modifyOrderInput.surcharges)||void 0===r||r.splice(e,1)},i.prototype.previewAndModify=function(r){var t,n=this,i=Object.assign(Object.assign(Object.assign(Object.assign({},this.modifyOrderInput),this.billingAddressForm.dirty?{updateBillingAddress:this.billingAddressForm.value}:{}),this.shippingAddressForm.dirty?{updateShippingAddress:this.shippingAddressForm.value}:{}),{dryRun:!0,note:null!==(t=this.note)&&void 0!==t?t:"",options:{recalculateShipping:this.recalculateShipping}}),a=r.totalWithTax;this.dataService.order.modifyOrder(i).pipe(d.switchMap((function(e){var r=e.modifyOrder;switch(r.__typename){case"Order":return n.modalService.fromComponent(A,{size:"xl",closable:!1,locals:{originalTotalWithTax:a,order:r,orderLineCustomFields:n.orderLineCustomFields,modifyOrderInput:i}});case"InsufficientStockError":case"NegativeQuantityError":case"NoChangesSpecifiedError":case"OrderLimitError":case"OrderModificationStateError":case"PaymentMethodMissingError":case"RefundPaymentIdMissingError":return n.notificationService.error(r.message),l.of(!1);case null:case void 0:return l.of(!1);default:o.assertNever(r)}})),d.switchMap((function(t){if(t&&t.result!==e.OrderEditResultType.Cancel){var o=Object.assign(Object.assign({},i),{dryRun:!1});return t.result===e.OrderEditResultType.Refund&&(o.refund={paymentId:t.refundPaymentId,reason:t.refundNote}),n.dataService.order.modifyOrder(o).pipe(d.switchMap((function(e){var t=e.modifyOrder;if("Order"===t.__typename){var i=0<t.totalWithTax-a?"ArrangingAdditionalPayment":n.previousState;return n.dataService.order.transitionToState(r.id,i).pipe(d.mapTo(!0))}return n.notificationService.error(t.message),l.EMPTY})))}return n.dataService.order.getOrder(n.id).mapSingle((function(){return!1}))}))).subscribe((function(e){e&&n.router.navigate(["../"],{relativeTo:n.route})}))},i.prototype.setFormValues=function(e,r){},i}(n.BaseDetailComponent);E.decorators=[{type:r.Component,args:[{selector:"vdr-order-editor",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\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',changeDetection:r.ChangeDetectionStrategy.OnPush,styles:[".order-table .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}.order-table .sub-total td,.order-table .total td{border-top:1px dashed var(--color-component-border-200)}.order-table .total td{font-weight:700}.order-table td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}.order-table .order-line-custom-fields{display:flex;flex-wrap:wrap}.order-table .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-right:18px}.order-table .order-line-custom-field{background-color:var(--color-component-bg-100)}.order-table .net-price,.order-table .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}.order-table .net-price{font-size:11px}.order-table .promotions-label{-webkit-text-decoration:underline dotted var(--color-text-200);text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}.order-table tr.modified td{background-color:var(--color-warning-100)}"]}]}],E.ctorParameters=function(){return[{type:a.Router},{type:a.ActivatedRoute},{type:n.ServerConfigService},{type:r.ChangeDetectorRef},{type:n.DataService},{type:n.NotificationService},{type:n.ModalService},{type:w}]};var R=function(){function e(){this.addNote=new r.EventEmitter,this.updateNote=new r.EventEmitter,this.deleteNote=new r.EventEmitter,this.note="",this.noteIsPrivate=!0,this.expanded=!1,this.type=n.HistoryEntryType}return e.prototype.getDisplayType=function(e){if(e.type===n.HistoryEntryType.ORDER_STATE_TRANSITION){if("Delivered"===e.data.to)return"success";if("Cancelled"===e.data.to)return"error"}return e.type===n.HistoryEntryType.ORDER_FULFILLMENT_TRANSITION&&"Delivered"===e.data.to?"success":e.type!==n.HistoryEntryType.ORDER_PAYMENT_TRANSITION||"Declined"!==e.data.to&&"Cancelled"!==e.data.to?e.type===n.HistoryEntryType.ORDER_CANCELLATION?"error":e.type===n.HistoryEntryType.ORDER_REFUND_TRANSITION?"warning":"default":"error"},e.prototype.getTimelineIcon=function(e){if(e.type===n.HistoryEntryType.ORDER_STATE_TRANSITION){if("Delivered"===e.data.to)return["success-standard","is-solid"];if("Cancelled"===e.data.to)return"ban"}if(e.type===n.HistoryEntryType.ORDER_PAYMENT_TRANSITION&&"Settled"===e.data.to)return"credit-card";if(e.type===n.HistoryEntryType.ORDER_NOTE)return"note";if(e.type===n.HistoryEntryType.ORDER_MODIFIED)return"pencil";if(e.type===n.HistoryEntryType.ORDER_FULFILLMENT_TRANSITION){if("Shipped"===e.data.to)return"truck";if("Delivered"===e.data.to)return"truck"}},e.prototype.isFeatured=function(e){switch(e.type){case n.HistoryEntryType.ORDER_STATE_TRANSITION:return"Delivered"===e.data.to||"Cancelled"===e.data.to||"Settled"===e.data.to;case n.HistoryEntryType.ORDER_PAYMENT_TRANSITION:return"Settled"===e.data.to||"Cancelled"===e.data.to;case n.HistoryEntryType.ORDER_FULFILLMENT_TRANSITION:return"Delivered"===e.data.to||"Shipped"===e.data.to;case n.HistoryEntryType.ORDER_NOTE:case n.HistoryEntryType.ORDER_MODIFIED:return!0;default:return!1}},e.prototype.getFulfillment=function(e){if((e.type===n.HistoryEntryType.ORDER_FULFILLMENT||e.type===n.HistoryEntryType.ORDER_FULFILLMENT_TRANSITION)&&this.order.fulfillments)return this.order.fulfillments.find((function(r){return r.id===e.data.fulfillmentId}))},e.prototype.getPayment=function(e){if(e.type===n.HistoryEntryType.ORDER_PAYMENT_TRANSITION&&this.order.payments)return this.order.payments.find((function(r){return r.id===e.data.paymentId}))},e.prototype.getCancelledItems=function(e){var r,t,n,i,o=new Map,a=e.data.orderItemIds;try{for(var l=p(this.order.lines),d=l.next();!d.done;d=l.next()){var s=d.value;try{for(var c=(n=void 0,p(s.items)),u=c.next();!u.done;u=c.next()){var f=u.value;if(a.includes(f.id)){var y=o.get(s.productVariant.name);null!=y?o.set(s.productVariant.name,y+1):o.set(s.productVariant.name,1)}}}catch(e){n={error:e}}finally{try{u&&!u.done&&(i=c.return)&&i.call(c)}finally{if(n)throw n.error}}}}catch(e){r={error:e}}finally{try{d&&!d.done&&(t=l.return)&&t.call(l)}finally{if(r)throw r.error}}return Array.from(o.entries()).map((function(e){var r=m(e,2);return{name:r[0],quantity:r[1]}}))},e.prototype.getModification=function(e){return this.order.modifications.find((function(r){return r.id===e}))},e.prototype.getName=function(e){var r=e.administrator;if(r)return r.firstName+" "+r.lastName;var t=this.order.customer;return t?t.firstName+" "+t.lastName:""},e.prototype.addNoteToOrder=function(){this.addNote.emit({note:this.note,isPublic:!this.noteIsPrivate}),this.note="",this.noteIsPrivate=!0},e}();R.decorators=[{type:r.Component,args:[{selector:"vdr-order-history",template:'<h4>{{ \'order.order-history\' | translate }}</h4>\r\n<div class="entry-list" [class.expanded]="expanded">\r\n    <vdr-timeline-entry iconShape="note" displayType="muted" [featured]="true">\r\n        <div class="note-entry">\r\n            <textarea [(ngModel)]="note" name="note" class="note"></textarea>\r\n            <button class="btn btn-secondary" [disabled]="!note" (click)="addNoteToOrder()">\r\n                {{ \'common.add-note\' | translate }}\r\n            </button>\r\n        </div>\r\n        <div class="visibility-select">\r\n            <clr-checkbox-wrapper>\r\n                <input type="checkbox" clrCheckbox [(ngModel)]="noteIsPrivate" />\r\n                <label>{{ \'order.note-is-private\' | translate }}</label>\r\n            </clr-checkbox-wrapper>\r\n            <span *ngIf="noteIsPrivate" class="private">\r\n                {{ \'order.note-only-visible-to-administrators\' | translate }}\r\n            </span>\r\n            <span *ngIf="!noteIsPrivate" class="public">\r\n                {{ \'order.note-visible-to-customer\' | translate }}\r\n            </span>\r\n        </div>\r\n    </vdr-timeline-entry>\r\n    <vdr-timeline-entry\r\n        *ngFor="let entry of history"\r\n        [displayType]="getDisplayType(entry)"\r\n        [iconShape]="getTimelineIcon(entry)"\r\n        [createdAt]="entry.createdAt"\r\n        [name]="getName(entry)"\r\n        [featured]="isFeatured(entry)"\r\n        [collapsed]="!expanded && !isFeatured(entry)"\r\n        (expandClick)="expanded = !expanded"\r\n    >\r\n        <ng-container [ngSwitch]="entry.type">\r\n            <ng-container *ngSwitchCase="type.ORDER_STATE_TRANSITION">\r\n                <div class="title" *ngIf="entry.data.to === \'Delivered\'">\r\n                    {{ \'order.history-order-fulfilled\' | translate }}\r\n                </div>\r\n                <div class="title" *ngIf="entry.data.to === \'Cancelled\'">\r\n                    {{ \'order.history-order-cancelled\' | translate }}\r\n                </div>\r\n                <ng-template [ngIf]="entry.data.to !== \'Cancelled\' && entry.data.to !== \'Delivered\'">\r\n                    {{\r\n                        \'order.history-order-transition\'\r\n                            | translate: { from: entry.data.from, to: entry.data.to }\r\n                    }}\r\n                </ng-template>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase="type.ORDER_MODIFIED">\r\n                <div class="title">\r\n                    {{ \'order.history-order-modified\' | translate }}\r\n                </div>\r\n                <ng-container *ngIf="getModification(entry.data.modificationId) as modification">\r\n                    {{ \'order.modify-order-price-difference\' | translate }}:\r\n                    <strong>{{ modification.priceChange | localeCurrency: order.currencyCode }}</strong>\r\n                    <vdr-chip colorType="success" *ngIf="modification.isSettled">{{\r\n                        \'order.modification-settled\' | translate\r\n                    }}</vdr-chip>\r\n                    <vdr-chip colorType="error" *ngIf="!modification.isSettled">{{\r\n                        \'order.modification-not-settled\' | translate\r\n                    }}</vdr-chip>\r\n                    <vdr-history-entry-detail>\r\n                        <vdr-modification-detail\r\n                            [order]="order"\r\n                            [modification]="modification"\r\n                        ></vdr-modification-detail>\r\n                    </vdr-history-entry-detail>\r\n                </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase="type.ORDER_PAYMENT_TRANSITION">\r\n                <ng-container *ngIf="entry.data.to === \'Settled\'; else regularPaymentTransition">\r\n                    <div class="title">\r\n                        {{ \'order.history-payment-settled\' | translate }}\r\n                    </div>\r\n                    {{ \'order.transaction-id\' | translate }}: {{ getPayment(entry)?.transactionId }}\r\n                    <vdr-history-entry-detail *ngIf="getPayment(entry) as payment">\r\n                        <vdr-payment-detail\r\n                            [payment]="payment"\r\n                            [currencyCode]="order.currencyCode"\r\n                        ></vdr-payment-detail>\r\n                    </vdr-history-entry-detail>\r\n                </ng-container>\r\n                <ng-template #regularPaymentTransition>\r\n                    {{\r\n                        \'order.history-payment-transition\'\r\n                            | translate\r\n                                : {\r\n                                      from: entry.data.from,\r\n                                      to: entry.data.to,\r\n                                      id: getPayment(entry)?.transactionId\r\n                                  }\r\n                    }}\r\n                </ng-template>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase="type.ORDER_REFUND_TRANSITION">\r\n                {{\r\n                    \'order.history-refund-transition\'\r\n                        | translate: { from: entry.data.from, to: entry.data.to, id: entry.data.refundId }\r\n                }}\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase="type.ORDER_CANCELLATION">\r\n                {{ \'order.history-items-cancelled\' | translate: { count: entry.data.orderItemIds.length } }}\r\n                <vdr-history-entry-detail *ngIf="getCancelledItems(entry) as items">\r\n                    <vdr-labeled-data [label]="\'order.cancellation-reason\' | translate">\r\n                        {{ entry.data.reason }}\r\n                    </vdr-labeled-data>\r\n                    <vdr-labeled-data [label]="\'order.contents\' | translate">\r\n                        <vdr-simple-item-list [items]="items"></vdr-simple-item-list>\r\n                    </vdr-labeled-data>\r\n                </vdr-history-entry-detail>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase="type.ORDER_FULFILLMENT">\r\n                {{ \'order.history-fulfillment-created\' | translate }}\r\n                <vdr-history-entry-detail *ngIf="getFulfillment(entry) as fulfillment">\r\n                    <vdr-fulfillment-detail\r\n                        [fulfillmentId]="fulfillment.id"\r\n                        [order]="order"\r\n                    ></vdr-fulfillment-detail>\r\n                </vdr-history-entry-detail>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase="type.ORDER_FULFILLMENT_TRANSITION">\r\n                <ng-container *ngIf="entry.data.to === \'Delivered\'">\r\n                    <div class="title">\r\n                        {{ \'order.history-fulfillment-delivered\' | translate }}\r\n                    </div>\r\n                    {{ \'order.tracking-code\' | translate }}: {{ getFulfillment(entry)?.trackingCode }}\r\n                </ng-container>\r\n                <ng-container *ngIf="entry.data.to === \'Shipped\'">\r\n                    <div class="title">\r\n                        {{ \'order.history-fulfillment-shipped\' | translate }}\r\n                    </div>\r\n                    {{ \'order.tracking-code\' | translate }}: {{ getFulfillment(entry)?.trackingCode }}\r\n                </ng-container>\r\n                <ng-container *ngIf="entry.data.to !== \'Delivered\' && entry.data.to !== \'Shipped\'">\r\n                    {{\r\n                        \'order.history-fulfillment-transition\'\r\n                            | translate: { from: entry.data.from, to: entry.data.to }\r\n                    }}\r\n                </ng-container>\r\n                <vdr-history-entry-detail *ngIf="getFulfillment(entry) as fulfillment">\r\n                    <vdr-fulfillment-detail\r\n                        [fulfillmentId]="fulfillment.id"\r\n                        [order]="order"\r\n                    ></vdr-fulfillment-detail>\r\n                </vdr-history-entry-detail>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase="type.ORDER_NOTE">\r\n                <div class="flex">\r\n                    <div class="note-text">\r\n                        <span *ngIf="entry.isPublic" class="note-visibility public">{{\r\n                            \'common.public\' | translate\r\n                        }}</span>\r\n                        <span *ngIf="!entry.isPublic" class="note-visibility private">{{\r\n                            \'common.private\' | translate\r\n                        }}</span>\r\n                        {{ entry.data.note }}\r\n                    </div>\r\n                    <div class="flex-spacer"></div>\r\n                    <vdr-dropdown>\r\n                        <button class="icon-button" vdrDropdownTrigger>\r\n                            <clr-icon shape="ellipsis-vertical"></clr-icon>\r\n                        </button>\r\n                        <vdr-dropdown-menu vdrPosition="bottom-right">\r\n                            <button\r\n                                class="button"\r\n                                vdrDropdownItem\r\n                                (click)="updateNote.emit(entry)"\r\n                                [disabled]="!(\'UpdateOrder\' | hasPermission)"\r\n                            >\r\n                                <clr-icon shape="edit"></clr-icon>\r\n                                {{ \'common.edit\' | translate }}\r\n                            </button>\r\n                            <div class="dropdown-divider"></div>\r\n                            <button\r\n                                class="button"\r\n                                vdrDropdownItem\r\n                                (click)="deleteNote.emit(entry)"\r\n                                [disabled]="!(\'UpdateOrder\' | hasPermission)"\r\n                            >\r\n                                <clr-icon shape="trash" class="is-danger"></clr-icon>\r\n                                {{ \'common.delete\' | translate }}\r\n                            </button>\r\n                        </vdr-dropdown-menu>\r\n                    </vdr-dropdown>\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase="type.ORDER_COUPON_APPLIED">\r\n                {{ \'order.history-coupon-code-applied\' | translate }}:\r\n                <vdr-chip>\r\n                    <a [routerLink]="[\'/marketing\', \'promotions\', entry.data.promotionId]">{{\r\n                        entry.data.couponCode\r\n                    }}</a>\r\n                </vdr-chip>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase="type.ORDER_COUPON_REMOVED">\r\n                {{ \'order.history-coupon-code-removed\' | translate }}:\r\n                <vdr-chip\r\n                    ><span class="cancelled-coupon-code">{{ entry.data.couponCode }}</span></vdr-chip\r\n                >\r\n            </ng-container>\r\n        </ng-container>\r\n    </vdr-timeline-entry>\r\n    <vdr-timeline-entry [isLast]="true" [createdAt]="order.createdAt" [featured]="true">\r\n        <div class="title">\r\n            {{ \'order.history-order-created\' | translate }}\r\n        </div>\r\n    </vdr-timeline-entry>\r\n</div>\r\n',changeDetection:r.ChangeDetectionStrategy.OnPush,styles:[":host{margin-top:48px;display:block}.entry-list{margin-top:24px;margin-left:24px;margin-right:12px}.note-entry{display:flex;align-items:center}.note-entry .note{flex:1}.note-entry button{margin:0}.visibility-select{display:flex;justify-content:space-between;align-items:baseline}.visibility-select .public{color:var(--color-warning-500)}.visibility-select .private{color:var(--color-success-500)}textarea.note{flex:1;height:36px;border-radius:3px;margin-right:6px}.note-text{color:var(--color-grey-800);white-space:pre-wrap}.cancelled-coupon-code{text-decoration:line-through}.note-visibility{text-transform:lowercase}.note-visibility.public{color:var(--color-warning-500)}.note-visibility.private{color:var(--color-success-500)}"]}]}],R.propDecorators={order:[{type:r.Input}],history:[{type:r.Input}],addNote:[{type:r.Output}],updateNote:[{type:r.Output}],deleteNote:[{type:r.Output}]};var L=function(e){function r(r,n,o,a,l){var d=e.call(this,a,l)||this;d.serverConfigService=r,d.dataService=n,d.localStorageService=o,d.searchOrderCodeControl=new t.FormControl(""),d.searchLastNameControl=new t.FormControl(""),d.orderStates=d.serverConfigService.getOrderProcessStates().map((function(e){return e.name})),d.filterPresets=[{name:"open",label:i.marker("order.filter-preset-open"),config:{active:!1,states:d.orderStates.filter((function(e){return"Delivered"!==e&&"Cancelled"!==e&&"Shipped"!==e}))}},{name:"shipped",label:i.marker("order.filter-preset-shipped"),config:{active:!1,states:["Shipped"]}},{name:"completed",label:i.marker("order.filter-preset-completed"),config:{active:!1,states:["Delivered","Cancelled"]}},{name:"active",label:i.marker("order.filter-preset-active"),config:{active:!0}}],e.prototype.setQueryFn.call(d,(function(e,r){return d.dataService.order.getOrders({take:e,skip:r}).refetchOnChannelChange()}),(function(e){return e.orders}),(function(e,r){return d.createQueryOptions(e,r,d.searchOrderCodeControl.value,d.searchLastNameControl.value,d.route.snapshot.queryParamMap.get("filter")||"open")}));var s=d.localStorageService.get("orderListLastCustomFilters");return s&&d.setQueryParam(s,{replaceUrl:!0}),d}return u(r,e),r.prototype.ngOnInit=function(){var r,n=this;e.prototype.ngOnInit.call(this),this.activePreset$=this.route.queryParamMap.pipe(d.map((function(e){return e.get("filter")||"open"})),d.distinctUntilChanged());var i=l.merge(this.searchOrderCodeControl.valueChanges,this.searchLastNameControl.valueChanges).pipe(d.filter((function(e){return 2<e.length||0===e.length})),d.debounceTime(250));l.merge(i,this.route.queryParamMap).pipe(d.takeUntil(this.destroy$)).subscribe((function(e){n.refresh()}));var o=this.route.snapshot.queryParamMap;this.customFilterForm=new t.FormGroup({states:new t.FormControl(null!==(r=o.getAll("states"))&&void 0!==r?r:[]),placedAtStart:new t.FormControl(o.get("placedAtStart")),placedAtEnd:new t.FormControl(o.get("placedAtEnd"))})},r.prototype.selectFilterPreset=function(e){var r,t=null!==(r=this.localStorageService.get("orderListLastCustomFilters"))&&void 0!==r?r:{},n="custom"===e?t:{states:void 0,placedAtStart:void 0,placedAtEnd:void 0};this.setQueryParam(Object.assign({filter:e,page:1},n),{replaceUrl:!0})},r.prototype.applyCustomFilters=function(){var e=this.customFilterForm.value,r={states:e.states,placedAtStart:e.placedAtStart,placedAtEnd:e.placedAtEnd};this.setQueryParam(Object.assign({filter:"custom"},r)),this.customFilterForm.markAsPristine(),this.localStorageService.set("orderListLastCustomFilters",r)},r.prototype.createQueryOptions=function(e,r,t,i,o){var a,l=this.filterPresets.find((function(e){return e.name===o})),d={};if(l)null!=l.config.active&&(d.active={eq:l.config.active}),l.config.states&&(d.state={in:l.config.states});else if("custom"===o){var s=this.route.snapshot.queryParamMap,c=null!==(a=s.getAll("states"))&&void 0!==a?a:[],u=s.get("placedAtStart"),p=s.get("placedAtEnd");c.length&&(d.state={in:c}),u&&p?d.orderPlacedAt={between:{start:u,end:p}}:u?d.orderPlacedAt={after:u}:p&&(d.orderPlacedAt={before:p})}return i&&(d.customerLastName={contains:i}),t&&(d.code={contains:t}),{options:{skip:e,take:r,filter:Object.assign({},null!=d?d:{}),sort:{updatedAt:n.SortOrder.DESC}}}},r.prototype.getShippingNames=function(e){return e.shippingLines.length?e.shippingLines.map((function(e){return e.shippingMethod.name})).join(", "):""},r}(n.BaseListComponent);L.decorators=[{type:r.Component,args:[{selector:"vdr-order-list",template:'<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <div class="search-form">\r\n            <div class="btn-group btn-outline-primary" *ngIf="activePreset$ | async as activePreset">\r\n                <button\r\n                    class="btn"\r\n                    *ngFor="let preset of filterPresets"\r\n                    [class.btn-primary]="activePreset === preset.name"\r\n                    (click)="selectFilterPreset(preset.name)"\r\n                >\r\n                    {{ preset.label | translate }}\r\n                </button>\r\n                <button\r\n                    class="btn"\r\n                    [class.btn-primary]="activePreset === \'custom\'"\r\n                    (click)="selectFilterPreset(\'custom\')"\r\n                >\r\n                    {{ \'order.filter-custom\' | translate }}\r\n                    <clr-icon shape="angle down"></clr-icon>\r\n                </button>\r\n            </div>\r\n\r\n            <input\r\n                type="text"\r\n                name="searchTerm"\r\n                [formControl]="searchOrderCodeControl"\r\n                [placeholder]="\'order.search-by-order-code\' | translate"\r\n                class="search-input"\r\n            />\r\n            <input\r\n                type="text"\r\n                name="searchTerm"\r\n                [formControl]="searchLastNameControl"\r\n                [placeholder]="\'order.search-by-customer-last-name\' | translate"\r\n                class="search-input"\r\n            />\r\n        </div>\r\n        <div class="custom-filters" [class.expanded]="(activePreset$ | async) === \'custom\'">\r\n            <form [formGroup]="customFilterForm">\r\n                <div class="flex align-center">\r\n                    <ng-select\r\n                        [items]="orderStates"\r\n                        appendTo="body"\r\n                        [addTag]="false"\r\n                        [multiple]="true"\r\n                        formControlName="states"\r\n                        [placeholder]="\'state.all-orders\' | translate"\r\n                        [clearable]="true"\r\n                        [searchable]="false"\r\n                    >\r\n                        <ng-template ng-option-tmp let-item="item">{{ item | stateI18nToken | translate }}</ng-template>\r\n                        <ng-template ng-label-tmp let-item="item" let-clear="clear">\r\n                            <span class="ng-value-label"> {{ item | stateI18nToken | translate }}</span>\r\n                            <span class="ng-value-icon right" (click)="clear(item)" aria-hidden="true">×</span>\r\n                        </ng-template>\r\n                    </ng-select>\r\n                    <button\r\n                        class="btn btn-secondary"\r\n                        [disabled]="customFilterForm.pristine"\r\n                        (click)="applyCustomFilters()"\r\n                    >\r\n                        {{ \'order.apply-filters\' | translate }}\r\n                        <clr-icon shape="filter"></clr-icon>\r\n                    </button>\r\n                </div>\r\n                <div class="flex">\r\n                    <div>\r\n                        <label>{{ \'order.placed-at-start\' | translate }}</label>\r\n                        <vdr-datetime-picker formControlName="placedAtStart"></vdr-datetime-picker>\r\n                    </div>\r\n                    <div>\r\n                        <label>{{ \'order.placed-at-end\' | translate }}</label>\r\n                        <vdr-datetime-picker formControlName="placedAtEnd"></vdr-datetime-picker>\r\n                    </div>\r\n                </div>\r\n            </form>\r\n        </div>\r\n    </vdr-ab-left>\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId="order-list"></vdr-action-bar-items>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<vdr-data-table\r\n    [items]="items$ | async"\r\n    [itemsPerPage]="itemsPerPage$ | async"\r\n    [totalItems]="totalItems$ | async"\r\n    [currentPage]="currentPage$ | async"\r\n    (pageChange)="setPageNumber($event)"\r\n    (itemsPerPageChange)="setItemsPerPage($event)"\r\n>\r\n    <vdr-dt-column>{{ \'common.code\' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ \'order.customer\' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ \'order.state\' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ \'order.total\' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ \'common.updated-at\' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ \'order.placed-at\' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ \'order.shipping\' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column></vdr-dt-column>\r\n    <ng-template let-order="item">\r\n        <td class="left align-middle">{{ order.code }}</td>\r\n        <td class="left align-middle">\r\n            <vdr-customer-label [customer]="order.customer"></vdr-customer-label>\r\n        </td>\r\n        <td class="left align-middle">\r\n            <vdr-order-state-label [state]="order.state"></vdr-order-state-label>\r\n        </td>\r\n        <td class="left align-middle">{{ order.total | localeCurrency: order.currencyCode }}</td>\r\n        <td class="left align-middle">{{ order.updatedAt | timeAgo }}</td>\r\n        <td class="left align-middle">{{ order.orderPlacedAt | localeDate: \'medium\' }}</td>\r\n        <td class="left align-middle">{{ getShippingNames(order) }}</td>\r\n        <td class="right align-middle">\r\n            <vdr-table-row-action\r\n                iconShape="shopping-cart"\r\n                [label]="\'common.open\' | translate"\r\n                [linkTo]="order.state === \'Modifying\' ? [\'./\', order.id, \'modify\'] : [\'./\', order.id]"\r\n            ></vdr-table-row-action>\r\n        </td>\r\n    </ng-template>\r\n</vdr-data-table>\r\n',changeDetection:r.ChangeDetectionStrategy.OnPush,styles:[".search-form{display:flex;flex-direction:column;align-items:baseline;width:100%;margin-bottom:6px}@media screen and (min-width:768px){.search-form{flex-direction:row}}.search-input{margin-left:6px;margin-top:6px;min-width:300px}.custom-filters{overflow:hidden;max-height:0;padding-bottom:6px}.custom-filters.expanded{max-height:none}.custom-filters>form{display:flex;flex-direction:column;align-items:center}.custom-filters>form>div{width:100%}ng-select{flex:1;min-width:200px}ng-select,ng-select ::ng-deep .ng-select-container{height:36px}"]}]}],L.ctorParameters=function(){return[{type:n.ServerConfigService},{type:n.DataService},{type:n.LocalStorageService},{type:a.Router},{type:a.ActivatedRoute}]};var M=function(){function e(){this.settlePayment=new r.EventEmitter,this.transitionPaymentState=new r.EventEmitter,this.settleRefund=new r.EventEmitter}return e.prototype.refundHasMetadata=function(e){return!!e&&Object.keys(e.metadata).length>0},e.prototype.nextOtherStates=function(){return this.payment?this.payment.nextStates.filter((function(e){return"Settled"!==e})):[]},e}();M.decorators=[{type:r.Component,args:[{selector:"vdr-order-payment-card",template:'<div class="card">\r\n    <div class="card-header payment-header">\r\n        <div>\r\n            {{ \'order.payment\' | translate }}\r\n            <ng-container *ngIf="payment.transactionId">#{{ payment.transactionId }}</ng-container>\r\n        </div>\r\n        <div class="payment-state">\r\n            <vdr-payment-state-label [state]="payment.state"></vdr-payment-state-label>\r\n        </div>\r\n    </div>\r\n    <div class="card-block">\r\n        <vdr-payment-detail [payment]="payment" [currencyCode]="currencyCode"></vdr-payment-detail>\r\n    </div>\r\n    <ng-container *ngFor="let refund of payment.refunds">\r\n        <div class="card-header payment-header">\r\n            <clr-icon shape="redo" class="refund-icon" dir="down"></clr-icon>\r\n            {{ \'order.refund\' | translate }} #{{ refund.id }}\r\n            <div class="clr-flex-fill"></div>\r\n            <vdr-refund-state-label [state]="refund.state"></vdr-refund-state-label>\r\n        </div>\r\n        <div class="card-block">\r\n            <vdr-labeled-data [label]="\'common.created-at\' | translate">\r\n                {{ refund.createdAt | localeDate: \'medium\' }}\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data [label]="\'order.refund-total\' | translate">\r\n                {{ refund.total | localeCurrency: currencyCode }}\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data [label]="\'order.transaction-id\' | translate" *ngIf="refund.transactionId">\r\n                {{ refund.transactionId }}\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data [label]="\'order.refund-reason\' | translate" *ngIf="refund.reason">\r\n                {{ refund.reason }}\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data [label]="\'order.refund-metadata\' | translate" *ngIf="refundHasMetadata(refund)">\r\n                <vdr-object-tree [value]="refund.metadata"></vdr-object-tree>\r\n            </vdr-labeled-data>\r\n        </div>\r\n        <div class="card-footer" *ngIf="refund.state === \'Pending\'">\r\n            <button class="btn btn-sm btn-primary" (click)="settleRefund.emit(refund)">\r\n                {{ \'order.settle-refund\' | translate }}\r\n            </button>\r\n        </div>\r\n    </ng-container>\r\n    <div class="card-footer" *ngIf="payment.nextStates.length">\r\n        <button\r\n            class="btn btn-sm btn-primary"\r\n            *ngIf="payment.nextStates.includes(\'Settled\')"\r\n            (click)="settlePayment.emit(payment)"\r\n        >\r\n            {{ \'order.settle-payment\' | translate }}\r\n        </button>\r\n        <vdr-dropdown>\r\n            <button class="icon-button" vdrDropdownTrigger>\r\n                <clr-icon shape="ellipsis-vertical"></clr-icon>\r\n            </button>\r\n            <vdr-dropdown-menu vdrPosition="bottom-right">\r\n                <ng-container *ngFor="let nextState of nextOtherStates()">\r\n                    <button\r\n                        type="button"\r\n                        class="btn"\r\n                        vdrDropdownItem\r\n                        (click)="transitionPaymentState.emit({ payment: payment, state: nextState })"\r\n                    >\r\n                        <ng-container *ngIf="nextState !== \'Cancelled\'; else cancel">\r\n                            <clr-icon shape="step-forward-2"></clr-icon>\r\n                            {{\r\n                                \'order.transition-to-state\'\r\n                                    | translate: { state: (nextState | stateI18nToken | translate) }\r\n                            }}\r\n                        </ng-container>\r\n                        <ng-template #cancel>\r\n                            <clr-icon shape="error-standard" class="is-error"></clr-icon>\r\n                            {{ \'order.cancel-payment\' | translate }}\r\n                        </ng-template>\r\n                    </button>\r\n                </ng-container>\r\n            </vdr-dropdown-menu>\r\n        </vdr-dropdown>\r\n    </div>\r\n</div>\r\n',changeDetection:r.ChangeDetectionStrategy.OnPush,styles:[".payment-header{display:flex;justify-content:space-between;align-items:center}.refund-icon{margin-right:6px;color:var(--color-grey-400)}.card-footer{display:flex;align-items:center;justify-content:flex-end}"]}]}],M.propDecorators={payment:[{type:r.Input}],currencyCode:[{type:r.Input}],settlePayment:[{type:r.Output}],transitionPaymentState:[{type:r.Output}],settleRefund:[{type:r.Output}]};var N=function(){function e(){}return e.prototype.ngOnInit=function(){var e=this;this.active$=this.from.active$.asObservable().pipe(d.tap((function(r){return e.to.activeTarget$.next(r)})))},e.prototype.getStyle=function(){var e=this.from.index<this.to.index?"down":"up",r=this.from.getPos("down"===e?"bottom":"top"),t=this.to.getPos("down"===e?"top":"bottom"),n=Math.abs(r.x-t.x),i=Math.abs(r.y-t.y),o=Math.sqrt(Math.pow(n,2)+Math.pow(i,2));return Object.assign({"top.px":r.y,"left.px":r.x+("down"===e?10:40)+12*this.index,"height.px":o,"width.px":1},"up"===e?{transform:"rotateZ(180deg)","transform-origin":"top"}:{})},e}();N.decorators=[{type:r.Component,args:[{selector:"vdr-order-process-edge",template:'<div\r\n    [attr.data-from]="from.node.name"\r\n    [attr.data-to]="to.node.name"\r\n    [ngStyle]="getStyle()"\r\n    [class.active]="active$ | async"\r\n    class="edge">\r\n    <clr-icon shape="arrow" flip="vertical" class="arrow"></clr-icon>\r\n</div>\r\n',changeDetection:r.ChangeDetectionStrategy.OnPush,styles:[".edge{position:absolute;border:1px solid var(--color-component-border-200);background-color:var(--color-component-bg-300);opacity:.3;transition:border .2s,opacity .2s,background-color .2s}.edge.active{border-color:var(--color-primary-500);background-color:var(--color-primary-500);opacity:1}.edge.active .arrow{color:var(--color-primary-500)}.edge .arrow{position:absolute;bottom:-4px;left:-8px;color:var(--color-grey-300)}"]}]}],N.propDecorators={from:[{type:r.Input}],to:[{type:r.Input}],index:[{type:r.Input}]};var j=function(){function e(e){this.elementRef=e,this.active$=new l.BehaviorSubject(!1),this.activeTarget$=new l.BehaviorSubject(!1),this.isCancellable=!1,this.cancelledState="Cancelled"}return e.prototype.ngOnChanges=function(e){this.isCancellable=!!this.node.to.find((function(e){return"Cancelled"===e.name})),e.active&&this.active$.next(this.active)},e.prototype.getPos=function(e){var r,t;void 0===e&&(e="top");this.elementRef.nativeElement.getBoundingClientRect();var n=null!==(t=null===(r=this.elementRef.nativeElement.querySelector(".node"))||void 0===r?void 0:r.getBoundingClientRect().height)&&void 0!==t?t:0;return{x:10,y:72*this.index+("bottom"===e?n:0)}},e.prototype.getStyle=function(){var e=this.getPos();return{"top.px":e.y,"left.px":e.x}},e}();j.decorators=[{type:r.Component,args:[{selector:"vdr-order-process-node",template:'<div class="node-wrapper" [ngStyle]="getStyle()" [class.active]="active$ | async">\r\n    <div\r\n        class="node"\r\n        [class.active-target]="activeTarget$ | async"\r\n    >\r\n        {{ node.name | stateI18nToken | translate }}\r\n    </div>\r\n    <div class="cancelled-wrapper" *ngIf="isCancellable">\r\n        <div class="cancelled-edge">\r\n        </div>\r\n        <clr-icon shape="dot-circle"></clr-icon>\r\n        <div class="cancelled-node">\r\n            {{ cancelledState | stateI18nToken | translate }}\r\n        </div>\r\n    </div>\r\n</div>\r\n',changeDetection:r.ChangeDetectionStrategy.OnPush,styles:[":host{display:block}.node-wrapper{position:absolute;z-index:1;display:flex;align-items:center}.node{display:inline-block;border:2px solid var(--color-component-border-200);border-radius:3px;padding:3px 6px;z-index:1;background-color:var(--color-component-bg-100);opacity:.7;transition:opacity .2s,background-color .2s,color .2s;cursor:default}.node.active-target{border-color:var(--color-primary-500);opacity:.9}.cancelled-wrapper{display:flex;align-items:center;color:var(--color-grey-300);transition:color .2s,opacity .2s;opacity:.7}.cancelled-edge{width:48px;height:2px;background-color:var(--color-component-bg-300);transition:background-color .2s}clr-icon{margin-left:-1px}.cancelled-node{margin-left:6px}.active .cancelled-wrapper{opacity:1}.active .node{opacity:1;background-color:var(--color-primary-600);border-color:var(--color-primary-600);color:var(--color-primary-100)}.active .cancelled-wrapper{color:var(--color-error-500)}.active .cancelled-edge{background-color:var(--color-error-500)}"]}]}],j.ctorParameters=function(){return[{type:r.ElementRef}]},j.propDecorators={node:[{type:r.Input}],index:[{type:r.Input}],active:[{type:r.Input}]};var q=function(){function e(e){this.changeDetector=e,this.setActiveState$=new l.BehaviorSubject(void 0),this.nodes=[],this.edges=[]}return Object.defineProperty(e.prototype,"outerHeight",{get:function(){return 72*this.nodes.length},enumerable:!1,configurable:!0}),e.prototype.ngOnInit=function(){this.setActiveState$.next(this.initialState),this.activeState$=this.setActiveState$.pipe(d.debounceTime(150))},e.prototype.ngOnChanges=function(e){this.populateNodes()},e.prototype.ngAfterViewInit=function(){var e=this;setTimeout((function(){return e.populateEdges()}))},e.prototype.onMouseOver=function(e){this.setActiveState$.next(e)},e.prototype.onMouseOut=function(){this.setActiveState$.next(this.initialState)},e.prototype.getNodeFor=function(e){if(this.nodeComponents)return this.nodeComponents.find((function(r){return r.node.name===e}))},e.prototype.populateNodes=function(){var e,r,t,n,i,o,a=new Map;try{for(var l=p(this.states),d=l.next();!d.done;d=l.next()){var s=d.value;a.set(s.name,{name:s.name,to:[]})}}catch(r){e={error:r}}finally{try{d&&!d.done&&(r=l.return)&&r.call(l)}finally{if(e)throw e.error}}var c=function(e,r){var t,n,l=null!==(o=null===(i=u.states.find((function(r){return r.name===e})))||void 0===i?void 0:i.to)&&void 0!==o?o:[];try{for(var d=(t=void 0,p(l)),s=d.next();!s.done;s=d.next()){var c=s.value,m=a.get(c);m&&r.to.push(m)}}catch(e){t={error:e}}finally{try{s&&!s.done&&(n=d.return)&&n.call(d)}finally{if(t)throw t.error}}},u=this;try{for(var y=p(a.entries()),g=y.next();!g.done;g=y.next()){var v=m(g.value,2);c(v[0],v[1])}}catch(e){t={error:e}}finally{try{g&&!g.done&&(n=y.return)&&n.call(y)}finally{if(t)throw t.error}}this.nodes=f(a.values()).filter((function(e){return"Cancelled"!==e.name}))},e.prototype.populateEdges=function(){var e,r,t,n;try{for(var i=p(this.nodes),o=i.next();!o.done;o=i.next()){var a=o.value,l=this.getNodeFor(a.name),d=0;try{for(var s=(t=void 0,p(a.to)),c=s.next();!c.done;c=s.next()){var u=c.value,m=this.getNodeFor(u.name);l&&m&&l!==m&&(this.edges.push({to:m,from:l,index:d}),d++)}}catch(e){t={error:e}}finally{try{c&&!c.done&&(n=s.return)&&n.call(s)}finally{if(t)throw t.error}}}}catch(r){e={error:r}}finally{try{o&&!o.done&&(r=i.return)&&r.call(i)}finally{if(e)throw e.error}}this.edges=f(this.edges),this.changeDetector.markForCheck()},e}();q.decorators=[{type:r.Component,args:[{selector:"vdr-order-process-graph",template:'<ng-container *ngFor="let state of nodes; let i = index">\r\n    <vdr-order-process-node\r\n        [node]="state"\r\n        [index]="i"\r\n        [active]="(activeState$ | async) === state.name"\r\n        (mouseenter)="onMouseOver(state.name)"\r\n        (mouseleave)="onMouseOut()"\r\n    ></vdr-order-process-node>\r\n</ng-container>\r\n<ng-container *ngFor="let edge of edges">\r\n    <vdr-order-process-edge [from]="edge.from" [to]="edge.to" [index]="edge.index"></vdr-order-process-edge>\r\n</ng-container>\r\n',changeDetection:r.ChangeDetectionStrategy.OnPush,styles:[":host{display:block;border:1px #ff69b4;margin:20px;padding:12px;position:relative}.state-row{display:flex}"]}]}],q.ctorParameters=function(){return[{type:r.ChangeDetectorRef}]},q.propDecorators={states:[{type:r.Input}],initialState:[{type:r.Input}],nodeComponents:[{type:r.ViewChildren,args:[j]}],outerHeight:[{type:r.HostBinding,args:["style.height.px"]}]};var _=function(){function e(){this.orderLineCustomFieldsVisible=!1}return Object.defineProperty(e.prototype,"visibleOrderLineCustomFields",{get:function(){return this.orderLineCustomFieldsVisible?this.orderLineCustomFields:[]},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"showElided",{get:function(){return!this.orderLineCustomFieldsVisible&&0<this.orderLineCustomFields.length},enumerable:!1,configurable:!0}),e.prototype.ngOnInit=function(){this.orderLineCustomFieldsVisible=this.orderLineCustomFields.length<2},e.prototype.toggleOrderLineCustomFields=function(){this.orderLineCustomFieldsVisible=!this.orderLineCustomFieldsVisible},e.prototype.getLineDiscounts=function(e){return e.discounts.filter((function(e){return e.type===n.AdjustmentType.PROMOTION}))},e.prototype.getLineCustomFields=function(e){var r=this;return this.orderLineCustomFields.map((function(r){return{config:r,value:e.customFields[r.name]}})).filter((function(e){return!!r.orderLineCustomFieldsVisible||null!=e.value}))},e.prototype.getPromotionLink=function(e){return["/marketing","promotions",e.adjustmentSource.split(":")[1]]},e.prototype.getCouponCodeForAdjustment=function(e,r){var t=r.adjustmentSource.split(":")[1],n=e.promotions.find((function(e){return e.id===t}));if(n)return n.couponCode||void 0},e}();_.decorators=[{type:r.Component,args:[{selector:"vdr-order-table",template:'<table class="order-table table">\r\n    <thead>\r\n        <tr>\r\n            <th></th>\r\n            <th>{{ \'order.product-name\' | translate }}</th>\r\n            <th>{{ \'order.product-sku\' | translate }}</th>\r\n            <th>{{ \'order.unit-price\' | translate }}</th>\r\n            <th>{{ \'order.quantity\' | translate }}</th>\r\n            <th>{{ \'order.total\' | translate }}</th>\r\n        </tr>\r\n    </thead>\r\n    <tbody>\r\n        <ng-container *ngFor="let line of order.lines">\r\n            <tr class="order-line" [class.is-cancelled]="line.quantity === 0">\r\n                <td class="align-middle thumb">\r\n                    <img *ngIf="line.featuredAsset" [src]="line.featuredAsset | assetPreview: \'tiny\'" />\r\n                </td>\r\n                <td class="align-middle name">{{ line.productVariant.name }}</td>\r\n                <td class="align-middle sku">{{ line.productVariant.sku }}</td>\r\n                <td class="align-middle unit-price">\r\n                    {{ line.unitPriceWithTax | localeCurrency: order.currencyCode }}\r\n                    <div class="net-price" [title]="\'order.net-price\' | translate">\r\n                        {{ line.unitPrice | localeCurrency: order.currencyCode }}\r\n                    </div>\r\n                </td>\r\n                <td class="align-middle quantity">\r\n                    {{ line.quantity }}\r\n                    <vdr-line-refunds [line]="line" [payments]="order.payments"></vdr-line-refunds>\r\n                    <vdr-line-fulfillment [line]="line" [orderState]="order.state"></vdr-line-fulfillment>\r\n                </td>\r\n                <td class="align-middle total">\r\n                    {{ line.linePriceWithTax | localeCurrency: order.currencyCode }}\r\n                    <div class="net-price" [title]="\'order.net-price\' | translate">\r\n                        {{ line.linePrice | localeCurrency: order.currencyCode }}\r\n                    </div>\r\n\r\n                    <ng-container *ngIf="getLineDiscounts(line) as discounts">\r\n                        <vdr-dropdown *ngIf="discounts.length">\r\n                            <div class="promotions-label" vdrDropdownTrigger>\r\n                                {{ \'order.promotions-applied\' | translate }}\r\n                            </div>\r\n                            <vdr-dropdown-menu>\r\n                                <div class="line-promotion" *ngFor="let discount of discounts">\r\n                                    <a class="promotion-name" [routerLink]="getPromotionLink(discount)">{{\r\n                                        discount.description\r\n                                    }}</a>\r\n                                    <div class="promotion-amount">\r\n                                        {{ discount.amountWithTax | localeCurrency: order.currencyCode }}\r\n                                        <div class="net-price" [title]="\'order.net-price\' | translate">\r\n                                            {{ discount.amount | localeCurrency: order.currencyCode }}\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </vdr-dropdown-menu>\r\n                        </vdr-dropdown>\r\n                    </ng-container>\r\n                </td>\r\n            </tr>\r\n            <ng-container *ngIf="getLineCustomFields(line) as customFields">\r\n                <tr *ngIf="customFields.length">\r\n                    <td colspan="6" class="custom-fields-row">\r\n                        <div class="order-line-custom-fields">\r\n                            <div class="custom-field" *ngFor="let field of customFields">\r\n                                <vdr-labeled-data [label]="field.config | customFieldLabel">\r\n                                    <div class="mt2" [ngSwitch]="field.config.type">\r\n                                        <ng-template [ngSwitchCase]="\'datetime\'">\r\n                                            <span [title]="field.value">{{ field.value }}</span>\r\n                                        </ng-template>\r\n                                        <ng-template [ngSwitchCase]="\'boolean\'">\r\n                                            <ng-template [ngIf]="field.value === true">\r\n                                                <clr-icon shape="check"></clr-icon>\r\n                                            </ng-template>\r\n                                            <ng-template [ngIf]="field.value === false">\r\n                                                <clr-icon shape="times"></clr-icon>\r\n                                            </ng-template>\r\n                                        </ng-template>\r\n                                        <ng-template ngSwitchDefault>\r\n                                            {{ field.value }}\r\n                                        </ng-template>\r\n                                    </div>\r\n                                </vdr-labeled-data>\r\n                            </div>\r\n                        </div>\r\n                    </td>\r\n                </tr>\r\n            </ng-container>\r\n        </ng-container>\r\n        <tr class="surcharge" *ngFor="let surcharge of order.surcharges">\r\n            <td class="align-middle name left" colspan="2">{{ surcharge.description }}</td>\r\n            <td class="align-middle sku">{{ surcharge.sku }}</td>\r\n            <td class="align-middle" colspan="2"></td>\r\n            <td class="align-middle total">\r\n                {{ surcharge.priceWithTax | localeCurrency: order.currencyCode }}\r\n                <div class="net-price" [title]="\'order.net-price\' | translate">\r\n                    {{ surcharge.price | localeCurrency: order.currencyCode }}\r\n                </div>\r\n            </td>\r\n        </tr>\r\n        <tr class="order-adjustment" *ngFor="let discount of order.discounts">\r\n            <td colspan="5" class="left clr-align-middle">\r\n                <a [routerLink]="getPromotionLink(discount)">{{ discount.description }}</a>\r\n                <vdr-chip *ngIf="getCouponCodeForAdjustment(order, discount) as couponCode">{{\r\n                    couponCode\r\n                }}</vdr-chip>\r\n            </td>\r\n            <td class="clr-align-middle">\r\n                {{ discount.amountWithTax | localeCurrency: order.currencyCode }}\r\n                <div class="net-price" [title]="\'order.net-price\' | translate">\r\n                    {{ discount.amount | localeCurrency: order.currencyCode }}\r\n                </div>\r\n            </td>\r\n        </tr>\r\n        <tr class="sub-total">\r\n            <td class="left clr-align-middle">{{ \'order.sub-total\' | translate }}</td>\r\n            <td colspan="4"></td>\r\n            <td class="clr-align-middle">\r\n                {{ order.subTotalWithTax | localeCurrency: order.currencyCode }}\r\n                <div class="net-price" [title]="\'order.net-price\' | translate">\r\n                    {{ order.subTotal | localeCurrency: order.currencyCode }}\r\n                </div>\r\n            </td>\r\n        </tr>\r\n        <tr class="shipping">\r\n            <td class="left clr-align-middle">{{ \'order.shipping\' | translate }}</td>\r\n            <td class="clr-align-middle">{{ order.shippingLines[0]?.shippingMethod?.name }}</td>\r\n            <td colspan="3"></td>\r\n            <td class="clr-align-middle">\r\n                {{ order.shippingWithTax | localeCurrency: order.currencyCode }}\r\n                <div class="net-price" [title]="\'order.net-price\' | translate">\r\n                    {{ order.shipping | localeCurrency: order.currencyCode }}\r\n                </div>\r\n            </td>\r\n        </tr>\r\n        <tr class="total">\r\n            <td class="left clr-align-middle">{{ \'order.total\' | translate }}</td>\r\n            <td colspan="4"></td>\r\n            <td class="clr-align-middle">\r\n                {{ order.totalWithTax | localeCurrency: order.currencyCode }}\r\n                <div class="net-price" [title]="\'order.net-price\' | translate">\r\n                    {{ order.total | localeCurrency: order.currencyCode }}\r\n                </div>\r\n            </td>\r\n        </tr>\r\n    </tbody>\r\n</table>\r\n',changeDetection:r.ChangeDetectionStrategy.OnPush,styles:[".order-table .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}.order-table .sub-total td,.order-table .total td{border-top:1px dashed var(--color-component-border-200)}.order-table .total td{font-weight:700}.order-table td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}.order-table .order-line-custom-fields{display:flex;flex-wrap:wrap}.order-table .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-right:18px}.order-table .order-line-custom-field{background-color:var(--color-component-bg-100)}.order-table .net-price,.order-table .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}.order-table .net-price{font-size:11px}.order-table .promotions-label{-webkit-text-decoration:underline dotted var(--color-text-200);text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}::ng-deep .line-promotion{display:flex;justify-content:space-between;padding:6px 12px}::ng-deep .line-promotion .promotion-amount{margin-left:12px}::ng-deep .line-promotion .net-price{font-size:11px;color:var(--color-text-300)}"]}]}],_.propDecorators={order:[{type:r.Input}],orderLineCustomFields:[{type:r.Input}]};var V=function(){};V.decorators=[{type:r.Component,args:[{selector:"vdr-payment-detail",template:'<vdr-labeled-data [label]="\'order.payment-method\' | translate">\r\n    {{ payment.method }}\r\n</vdr-labeled-data>\r\n<vdr-labeled-data [label]="\'order.amount\' | translate">\r\n    {{ payment.amount | localeCurrency: currencyCode }}\r\n</vdr-labeled-data>\r\n<vdr-labeled-data *ngIf="payment.errorMessage" [label]="\'order.error-message\' | translate">\r\n    {{ payment.errorMessage }}\r\n</vdr-labeled-data>\r\n<vdr-labeled-data *ngIf="payment.transactionId" [label]="\'order.transaction-id\' | translate">\r\n    {{ payment.transactionId }}\r\n</vdr-labeled-data>\r\n<vdr-labeled-data [label]="\'order.payment-metadata\' | translate">\r\n    <vdr-object-tree [value]="payment.metadata"></vdr-object-tree>\r\n</vdr-labeled-data>\r\n',changeDetection:r.ChangeDetectionStrategy.OnPush,styles:[""]}]}],V.propDecorators={payment:[{type:r.Input}],currencyCode:[{type:r.Input}]};var $=function(){function e(){}return Object.defineProperty(e.prototype,"chipColorType",{get:function(){switch(this.state){case"Authorized":return"warning";case"Settled":return"success";case"Declined":case"Cancelled":return"error"}},enumerable:!1,configurable:!0}),e}();$.decorators=[{type:r.Component,args:[{selector:"vdr-payment-state-label",template:'<vdr-chip [title]="\'order.payment-state\' | translate" [colorType]="chipColorType">\r\n    <clr-icon shape="check-circle" *ngIf="state === \'Settled\'"></clr-icon>\r\n    {{ state | stateI18nToken | translate }}\r\n</vdr-chip>\r\n',changeDetection:r.ChangeDetectionStrategy.OnPush,styles:[":host{font-size:14px}"]}]}],$.propDecorators={state:[{type:r.Input}]};var H=function(){function e(){}return Object.defineProperty(e.prototype,"chipColorType",{get:function(){switch(this.state){case"Pending":return"warning";case"Settled":return"success";case"Failed":return"error"}},enumerable:!1,configurable:!0}),e}();H.decorators=[{type:r.Component,args:[{selector:"vdr-refund-state-label",template:'<vdr-chip [title]="\'order.payment-state\' | translate" [colorType]="chipColorType">\r\n    <clr-icon shape="check-circle" *ngIf="state === \'Settled\'"></clr-icon>\r\n    {{ state | stateI18nToken | translate }}\r\n</vdr-chip>\r\n',changeDetection:r.ChangeDetectionStrategy.OnPush,styles:[":host{font-size:14px}"]}]}],H.propDecorators={state:[{type:r.Input}]};var W=function(){};W.decorators=[{type:r.Component,args:[{selector:"vdr-simple-item-list",template:'<div class="items-list">\r\n    <ul>\r\n        <li *ngFor="let item of items" [title]="item.name">\r\n            <div class="quantity">{{ item.quantity }}</div>\r\n            <clr-icon shape="times" size="12"></clr-icon>\r\n            {{ item.name }}\r\n        </li>\r\n    </ul>\r\n</div>\r\n',changeDetection:r.ChangeDetectionStrategy.OnPush,styles:[".items-list{font-size:12px}.items-list ul{margin-top:6px;list-style-type:none;margin-left:2px}.items-list ul li{line-height:14px;text-overflow:ellipsis;overflow:hidden}.items-list .quantity{min-width:16px;display:inline-block}"]}]}],W.propDecorators={items:[{type:r.Input}]};var Q=function(e){function r(r,t){return e.call(this,r,{__typename:"Order",id:"",code:"",createdAt:"",updatedAt:"",total:0},(function(e){return t.order.getOrder(e).mapStream((function(e){return e.order}))}))||this}return u(r,e),r}(n.BaseEntityResolver);Q.ɵprov=r.ɵɵdefineInjectable({factory:function(){return new Q(r.ɵɵinject(a.Router),r.ɵɵinject(n.DataService))},token:Q,providedIn:"root"}),Q.decorators=[{type:r.Injectable,args:[{providedIn:"root"}]}],Q.ctorParameters=function(){return[{type:a.Router},{type:n.DataService}]};var U={breadcrumb:i.marker("breadcrumb.orders")},B={breadcrumb:Y},G={breadcrumb:Z},z=[{path:"",component:L,data:U},{path:":id",component:D,resolve:n.createResolveData(Q),canDeactivate:[n.CanDeactivateDetailGuard],data:B},{path:":id/modify",component:E,resolve:n.createResolveData(Q),data:G}];function Y(e,r){return n.detailBreadcrumb({entity:e.entity,id:r.id,breadcrumbKey:"breadcrumb.orders",getName:function(e){return e.code},route:""})}function Z(e,r){return Y(e,r).pipe(d.map((function(e){var r=e.slice();return r[0].link[0]="../",r[1].link[0]="../orders",r.concat({label:i.marker("breadcrumb.modifying"),link:[""]})})))}var J=function(){};J.decorators=[{type:r.NgModule,args:[{imports:[n.SharedModule,a.RouterModule.forChild(z)],declarations:[L,D,g,C,T,y,$,S,M,H,P,R,h,V,W,x,q,j,N,F,b,v,E,_,A,I,s,O]}]}],e.AddManualPaymentDialogComponent=s,e.CancelOrderDialogComponent=y,e.FulfillOrderDialogComponent=g,e.FulfillmentCardComponent=v,e.FulfillmentDetailComponent=h,e.FulfillmentStateLabelComponent=b,e.LineFulfillmentComponent=C,e.LineRefundsComponent=S,e.ModificationDetailComponent=I,e.NODE_HEIGHT=72,e.OrderCustomFieldsCardComponent=x,e.OrderDetailComponent=D,e.OrderEditorComponent=E,e.OrderEditsPreviewDialogComponent=A,e.OrderHistoryComponent=R,e.OrderListComponent=L,e.OrderModule=J,e.OrderPaymentCardComponent=M,e.OrderProcessEdgeComponent=N,e.OrderProcessGraphComponent=q,e.OrderProcessGraphDialogComponent=F,e.OrderProcessNodeComponent=j,e.OrderResolver=Q,e.OrderStateSelectDialogComponent=O,e.OrderTableComponent=_,e.OrderTransitionService=w,e.PaymentDetailComponent=V,e.PaymentStateLabelComponent=$,e.RefundOrderDialogComponent=T,e.RefundStateLabelComponent=H,e.SettleRefundDialogComponent=P,e.SimpleItemListComponent=W,e.modifyingOrderBreadcrumb=Z,e.orderBreadcrumb=Y,e.orderRoutes=z,e.ɵ0=U,e.ɵ1=B,e.ɵ2=G,Object.defineProperty(e,"__esModule",{value:!0})}));
+var c=function(e,r){return(c=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,r){e.__proto__=r}||function(e,r){for(var t in r)Object.prototype.hasOwnProperty.call(r,t)&&(e[t]=r[t])})(e,r)};function u(e,r){if("function"!=typeof r&&null!==r)throw new TypeError("Class extends value "+String(r)+" is not a constructor or null");function t(){this.constructor=e}c(e,r),e.prototype=null===r?Object.create(r):(t.prototype=r.prototype,new t)}Object.create;function p(e){var r="function"==typeof Symbol&&Symbol.iterator,t=r&&e[r],n=0;if(t)return t.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&n>=e.length&&(e=void 0),{value:e&&e[n++],done:!e}}};throw new TypeError(r?"Object is not iterable.":"Symbol.iterator is not defined.")}function m(e,r){var t="function"==typeof Symbol&&e[Symbol.iterator];if(!t)return e;var n,i,o=t.call(e),a=[];try{for(;(void 0===r||r-- >0)&&!(n=o.next()).done;)a.push(n.value)}catch(e){i={error:e}}finally{try{n&&!n.done&&(t=o.return)&&t.call(o)}finally{if(i)throw i.error}}return a}function f(){for(var e=[],r=0;r<arguments.length;r++)e=e.concat(m(arguments[r]));return e}Object.create;var y=function(){function e(e){var r=this;this.i18nService=e,this.lineQuantities={},this.reasons=[i.marker("order.cancel-reason-customer-request"),i.marker("order.cancel-reason-not-available")],this.reasons=this.reasons.map((function(e){return r.i18nService.translate(e)}))}return Object.defineProperty(e.prototype,"selectionCount",{get:function(){return Object.values(this.lineQuantities).reduce((function(e,r){return e+r}),0)},enumerable:!1,configurable:!0}),e.prototype.ngOnInit=function(){this.lineQuantities=this.order.lines.reduce((function(e,r){var t;return Object.assign(Object.assign({},e),((t={})[r.id]=0,t))}),{})},e.prototype.select=function(){this.resolveWith({orderId:this.order.id,lines:this.getLineInputs(),reason:this.reason})},e.prototype.cancel=function(){this.resolveWith()},e.prototype.getLineInputs=function(){if(!this.order.active)return Object.entries(this.lineQuantities).map((function(e){var r=m(e,2);return{orderLineId:r[0],quantity:r[1]}})).filter((function(e){return 0<e.quantity}))},e}();y.decorators=[{type:r.Component,args:[{selector:"vdr-cancel-order-dialog",template:'<ng-template vdrDialogTitle>{{ \'order.cancel-order\' | translate }}</ng-template>\r\n\r\n<div class="fulfillment-wrapper">\r\n    <div class="order-lines">\r\n        <table class="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.quantity\' | translate }}</th>\r\n                    <th>{{ \'order.unit-price\' | translate }}</th>\r\n                    <th>{{ \'order.cancel\' | translate }}</th>\r\n                </tr>\r\n            </thead>\r\n            <tr\r\n                *ngFor="let line of order.lines"\r\n                class="order-line"\r\n                [class.is-cancelled]="line.quantity === 0"\r\n            >\r\n                <td class="align-middle thumb">\r\n                    <img [src]="line.featuredAsset | assetPreview:\'tiny\'" />\r\n                </td>\r\n                <td class="align-middle name">{{ line.productVariant.name }}</td>\r\n                <td class="align-middle sku">{{ line.productVariant.sku }}</td>\r\n                <td class="align-middle quantity">{{ line.quantity }}</td>\r\n                <td class="align-middle quantity">\r\n                    {{ line.unitPriceWithTax | localeCurrency: order.currencyCode }}\r\n                </td>\r\n                <td class="align-middle fulfil">\r\n                    <input\r\n                        *ngIf="line.quantity > 0 && !order.active; else nonEditable"\r\n                        [(ngModel)]="lineQuantities[line.id]"\r\n                        type="number"\r\n                        [max]="line.quantity"\r\n                        min="0"\r\n                    />\r\n                    <ng-template #nonEditable>{{ line.quantity }}</ng-template>\r\n                </td>\r\n            </tr>\r\n        </table>\r\n    </div>\r\n    <div class="cancellation-details">\r\n        <label class="clr-control-label">{{ \'order.cancellation-reason\' | translate }}</label>\r\n        <ng-select\r\n            [items]="reasons"\r\n            bindLabel="name"\r\n            autofocus\r\n            bindValue="id"\r\n            [addTag]="true"\r\n            [(ngModel)]="reason"\r\n        ></ng-select>\r\n    </div>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type="button" class="btn" (click)="cancel()">{{ \'common.cancel\' | translate }}</button>\r\n    <button\r\n        type="submit"\r\n        (click)="select()"\r\n        [disabled]="!reason || (!order.active && selectionCount === 0)"\r\n        class="btn btn-primary"\r\n    >\r\n        <ng-container *ngIf="!order.active">\r\n            {{ \'order.cancel-selected-items\' | translate }}\r\n        </ng-container>\r\n        <ng-container *ngIf="order.active">\r\n            {{ \'order.cancel-order\' | translate }}\r\n        </ng-container>\r\n    </button>\r\n</ng-template>\r\n',changeDetection:r.ChangeDetectionStrategy.OnPush,styles:[":host{height:100%;display:flex;min-height:64vh}.fulfillment-wrapper{flex:1}@media screen and (min-width:768px){.fulfillment-wrapper{display:flex;flex-direction:row}}@media screen and (min-width:768px){.fulfillment-wrapper .cancellation-details{margin-top:0;margin-left:24px;width:250px}}.fulfillment-wrapper .order-lines{flex:1;overflow-y:auto}.fulfillment-wrapper .order-lines table{margin-top:0}.fulfillment-wrapper tr.ignore{color:var(--color-grey-300)}.fulfillment-wrapper .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}"]}]}],y.ctorParameters=function(){return[{type:n.I18nService}]};var g=function(){function e(e,r){this.dataService=e,this.changeDetector=r,this.fulfillmentHandlerControl=new t.FormControl,this.fulfillmentQuantities={}}return e.prototype.ngOnInit=function(){var e=this;this.dataService.settings.getGlobalSettings().single$.subscribe((function(r){var t=r.globalSettings;e.fulfillmentQuantities=e.order.lines.reduce((function(r,n){var i,o=e.getFulfillableCount(n,t.trackInventory);return Object.assign(Object.assign({},r),((i={})[n.id]={fulfillCount:o,max:o},i))}),{}),e.changeDetector.markForCheck()})),this.dataService.shippingMethod.getShippingMethodOperations().mapSingle((function(e){return e.fulfillmentHandlers})).subscribe((function(r){e.fulfillmentHandlerDef=r.find((function(r){var t,n;return r.code===(null===(n=null===(t=e.order.shippingLines[0])||void 0===t?void 0:t.shippingMethod)||void 0===n?void 0:n.fulfillmentHandlerCode)}))||r[0],e.fulfillmentHandler=n.configurableDefinitionToInstance(e.fulfillmentHandlerDef),e.fulfillmentHandlerControl.patchValue(e.fulfillmentHandler),e.changeDetector.markForCheck()}))},e.prototype.getFulfillableCount=function(e,r){var t=e.productVariant,i=t.trackInventory,o=t.stockOnHand,a=i===n.GlobalFlag.INHERIT?r:i===n.GlobalFlag.TRUE,l=this.getUnfulfilledCount(e);return a?Math.min(l,o):l},e.prototype.getUnfulfilledCount=function(e){var r=e.items.reduce((function(e,r){return e+(r.fulfillment?1:0)}),0);return e.quantity-r},e.prototype.canSubmit=function(){var e=Object.values(this.fulfillmentQuantities).reduce((function(e,r){return e+r.fulfillCount}),0);return n.configurableOperationValueIsValid(this.fulfillmentHandlerDef,this.fulfillmentHandlerControl.value)&&this.fulfillmentHandlerControl.valid&&0<e},e.prototype.select=function(){var e=Object.entries(this.fulfillmentQuantities).map((function(e){var r=m(e,2);return{orderLineId:r[0],quantity:r[1].fulfillCount}}));this.resolveWith({lines:e,handler:n.toConfigurableOperationInput(this.fulfillmentHandler,this.fulfillmentHandlerControl.value)})},e.prototype.cancel=function(){this.resolveWith()},e}();g.decorators=[{type:r.Component,args:[{selector:"vdr-fulfill-order-dialog",template:'<ng-template vdrDialogTitle>{{ \'order.fulfill-order\' | translate }}</ng-template>\r\n\r\n<div class="fulfillment-wrapper">\r\n    <div class="order-table">\r\n        <table class="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.unfulfilled\' | translate }}</th>\r\n                    <th>{{ \'catalog.stock-on-hand\' | translate }}</th>\r\n                    <th>{{ \'order.fulfill\' | translate }}</th>\r\n                </tr>\r\n            </thead>\r\n            <tr\r\n                *ngFor="let line of order.lines"\r\n                class="order-line"\r\n                [class.ignore]="getUnfulfilledCount(line) === 0"\r\n            >\r\n                <td class="align-middle thumb">\r\n                    <img *ngIf="line.featuredAsset" [src]="line.featuredAsset | assetPreview: \'tiny\'" />\r\n                </td>\r\n                <td class="align-middle name">{{ line.productVariant.name }}</td>\r\n                <td class="align-middle sku">{{ line.productVariant.sku }}</td>\r\n                <td class="align-middle quantity">{{ getUnfulfilledCount(line) }}</td>\r\n                <td class="align-middle quantity">{{ line.productVariant.stockOnHand }}</td>\r\n                <td class="align-middle fulfil">\r\n                    <input\r\n                        *ngIf="fulfillmentQuantities[line.id]"\r\n                        [disabled]="getUnfulfilledCount(line) === 0"\r\n                        [(ngModel)]="fulfillmentQuantities[line.id].fulfillCount"\r\n                        type="number"\r\n                        [max]="fulfillmentQuantities[line.id].max"\r\n                        min="0"\r\n                    />\r\n                </td>\r\n            </tr>\r\n        </table>\r\n    </div>\r\n    <div class="shipping-details">\r\n        <vdr-formatted-address [address]="order.shippingAddress"></vdr-formatted-address>\r\n        <h6>{{ \'order.shipping-method\' | translate }}</h6>\r\n        {{ order.shippingLines[0]?.shippingMethod?.name }}\r\n        <strong>{{ order.shipping | localeCurrency: order.currencyCode }}</strong>\r\n        <vdr-configurable-input\r\n            [operationDefinition]="fulfillmentHandlerDef"\r\n            [operation]="fulfillmentHandler"\r\n            [formControl]="fulfillmentHandlerControl"\r\n            [removable]="false"\r\n        ></vdr-configurable-input>\r\n    </div>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type="button" class="btn" (click)="cancel()">{{ \'common.cancel\' | translate }}</button>\r\n    <button type="submit" (click)="select()" [disabled]="!canSubmit()" class="btn btn-primary">\r\n        {{ \'order.create-fulfillment\' | translate }}\r\n    </button>\r\n</ng-template>\r\n',changeDetection:r.ChangeDetectionStrategy.OnPush,styles:[":host{height:100%;display:flex;min-height:64vh}.fulfillment-wrapper{flex:1}@media screen and (min-width:768px){.fulfillment-wrapper{display:flex;flex-direction:row}}.fulfillment-wrapper .shipping-details{margin-top:24px}@media screen and (min-width:768px){.fulfillment-wrapper .shipping-details{margin-top:0;margin-left:24px;width:250px}}.fulfillment-wrapper .shipping-details clr-input-container{margin-top:24px}.fulfillment-wrapper .order-table{flex:1;overflow-y:auto}.fulfillment-wrapper .order-table table{margin-top:0}.fulfillment-wrapper tr.ignore{color:var(--color-grey-300)}"]}]}],g.ctorParameters=function(){return[{type:n.DataService},{type:r.ChangeDetectorRef}]};var v=function(){function e(){this.transitionState=new r.EventEmitter}return e.prototype.nextSuggestedState=function(){var e;if(this.fulfillment){var r=this.fulfillment.nextStates,t=function(e){return r.includes(e)?e:r[0]};switch(null===(e=this.fulfillment)||void 0===e?void 0:e.state){case"Pending":return t("Shipped");case"Shipped":return t("Delivered");default:return r.find((function(e){return"Cancelled"!==e}))}}},e.prototype.nextOtherStates=function(){if(!this.fulfillment)return[];var e=this.nextSuggestedState();return this.fulfillment.nextStates.filter((function(r){return r!==e}))},e}();v.decorators=[{type:r.Component,args:[{selector:"vdr-fulfillment-card",template:'<div class="card">\r\n    <div class="card-header fulfillment-header">\r\n        <div>{{ \'order.fulfillment\' | translate }}</div>\r\n        <div class="fulfillment-state">\r\n            <vdr-fulfillment-state-label [state]="fulfillment?.state"></vdr-fulfillment-state-label>\r\n        </div>\r\n    </div>\r\n    <div class="card-block">\r\n        <vdr-fulfillment-detail\r\n            *ngIf="!!fulfillment"\r\n            [fulfillmentId]="fulfillment?.id"\r\n            [order]="order"\r\n        ></vdr-fulfillment-detail>\r\n    </div>\r\n    <div class="card-footer" *ngIf="fulfillment?.nextStates.length">\r\n        <ng-container *ngIf="nextSuggestedState() as suggestedState">\r\n            <button class="btn btn-sm btn-primary" (click)="transitionState.emit(suggestedState)">\r\n                {{ \'order.set-fulfillment-state\' | translate: { state: (suggestedState | stateI18nToken | translate) } }}\r\n            </button>\r\n        </ng-container>\r\n        <vdr-dropdown>\r\n            <button class="icon-button" vdrDropdownTrigger>\r\n                <clr-icon shape="ellipsis-vertical"></clr-icon>\r\n            </button>\r\n            <vdr-dropdown-menu vdrPosition="bottom-right">\r\n                <ng-container *ngFor="let nextState of nextOtherStates()">\r\n                    <button\r\n                        type="button"\r\n                        class="btn"\r\n                        vdrDropdownItem\r\n                        (click)="transitionState.emit(nextState)"\r\n                    >\r\n                        <ng-container *ngIf="nextState !== \'Cancelled\'; else cancel">\r\n                            <clr-icon shape="step-forward-2"></clr-icon>\r\n                            {{ \'order.transition-to-state\' | translate: { state: (nextState | stateI18nToken | translate) } }}\r\n                        </ng-container>\r\n                        <ng-template #cancel>\r\n                            <clr-icon shape="error-standard" class="is-error"></clr-icon>\r\n                            {{ \'order.cancel-fulfillment\' | translate }}\r\n                        </ng-template>\r\n                    </button>\r\n                </ng-container>\r\n            </vdr-dropdown-menu>\r\n        </vdr-dropdown>\r\n    </div>\r\n</div>\r\n',changeDetection:r.ChangeDetectionStrategy.OnPush,styles:[".fulfillment-header{display:flex;justify-content:space-between;align-items:center}.card-footer{display:flex;align-items:center;justify-content:flex-end}"]}]}],v.propDecorators={fulfillment:[{type:r.Input}],order:[{type:r.Input}],transitionState:[{type:r.Output}]};var h=function(){function e(){this.customFields=[]}return e.prototype.ngOnChanges=function(e){this.customFields=this.getCustomFields()},Object.defineProperty(e.prototype,"fulfillment",{get:function(){var e=this;return this.order.fulfillments&&this.order.fulfillments.find((function(r){return r.id===e.fulfillmentId}))},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"items",{get:function(){var e,r,t,n,i,o=new Map,a=null===(i=this.fulfillment)||void 0===i?void 0:i.orderItems.map((function(e){return e.id}));try{for(var l=p(this.order.lines),d=l.next();!d.done;d=l.next()){var s=d.value;try{for(var c=(t=void 0,p(s.items)),u=c.next();!u.done;u=c.next()){var f=u.value;if(null==a?void 0:a.includes(f.id)){var y=o.get(s.productVariant.name);null!=y?o.set(s.productVariant.name,y+1):o.set(s.productVariant.name,1)}}}catch(e){t={error:e}}finally{try{u&&!u.done&&(n=c.return)&&n.call(c)}finally{if(t)throw t.error}}}}catch(r){e={error:r}}finally{try{d&&!d.done&&(r=l.return)&&r.call(l)}finally{if(e)throw e.error}}return Array.from(o.entries()).map((function(e){var r=m(e,2);return{name:r[0],quantity:r[1]}}))},enumerable:!1,configurable:!0}),e.prototype.getCustomFields=function(){var e=this.fulfillment.customFields;return e?Object.entries(e).filter((function(e){return"__typename"!==m(e,1)[0]})).map((function(e){var r=m(e,2),t=r[0],n=r[1];return{key:t,value:Array.isArray(n)||o.isObject(n)?n:n.toString()}})):[]},e.prototype.customFieldIsObject=function(e){return Array.isArray(e)||o.isObject(e)},e}();h.decorators=[{type:r.Component,args:[{selector:"vdr-fulfillment-detail",template:'<vdr-labeled-data [label]="\'common.created-at\' | translate">\r\n    {{ fulfillment?.createdAt | localeDate: \'medium\' }}\r\n</vdr-labeled-data>\r\n<vdr-labeled-data [label]="\'order.fulfillment-method\' | translate">\r\n    {{ fulfillment?.method }}\r\n</vdr-labeled-data>\r\n<vdr-labeled-data *ngIf="fulfillment?.trackingCode" [label]="\'order.tracking-code\' | translate">\r\n    {{ fulfillment?.trackingCode }}\r\n</vdr-labeled-data>\r\n<vdr-labeled-data [label]="\'order.contents\' | translate">\r\n    <vdr-simple-item-list [items]="items"></vdr-simple-item-list>\r\n</vdr-labeled-data>\r\n<ng-container *ngFor="let customField of customFields">\r\n    <vdr-labeled-data [label]="customField.key">\r\n        <vdr-object-tree\r\n            *ngIf="customFieldIsObject(customField.value); else primitive"\r\n            [value]="{ object: customField.value }"\r\n        ></vdr-object-tree>\r\n        <ng-template #primitive>\r\n            {{ customField.value }}\r\n        </ng-template>\r\n    </vdr-labeled-data>\r\n</ng-container>\r\n',changeDetection:r.ChangeDetectionStrategy.OnPush,styles:[""]}]}],h.propDecorators={fulfillmentId:[{type:r.Input}],order:[{type:r.Input}]};var b=function(){function e(){}return Object.defineProperty(e.prototype,"chipColorType",{get:function(){switch(this.state){case"Pending":case"Shipped":return"warning";case"Delivered":return"success";case"Cancelled":return"error"}},enumerable:!1,configurable:!0}),e}();b.decorators=[{type:r.Component,args:[{selector:"vdr-fulfillment-state-label",template:'<vdr-chip [title]="\'order.payment-state\' | translate" [colorType]="chipColorType">\r\n    <clr-icon shape="check-circle" *ngIf="state === \'Delivered\'"></clr-icon>\r\n    {{ state | stateI18nToken | translate }}\r\n</vdr-chip>\r\n',changeDetection:r.ChangeDetectionStrategy.OnPush,styles:[":host{font-size:14px}"]}]}],b.propDecorators={state:[{type:r.Input}]};var C=function(){function e(){this.fulfilledCount=0,this.fulfillments=[]}return e.prototype.ngOnChanges=function(e){this.line&&(this.fulfilledCount=this.getDeliveredCount(this.line),this.fulfillmentStatus=this.getFulfillmentStatus(this.fulfilledCount,this.line.items.length),this.fulfillments=this.getFulfillments(this.line))},e.prototype.getDeliveredCount=function(e){return e.items.reduce((function(e,r){return e+(r.fulfillment?1:0)}),0)},e.prototype.getFulfillmentStatus=function(e,r){return e===r?"full":0<e&&e<r?"partial":"none"},e.prototype.getFulfillments=function(e){var r,t,n={};try{for(var i=p(e.items),o=i.next();!o.done;o=i.next()){var a=o.value;a.fulfillment&&(void 0===n[a.fulfillment.id]?n[a.fulfillment.id]=1:n[a.fulfillment.id]++)}}catch(e){r={error:e}}finally{try{o&&!o.done&&(t=i.return)&&t.call(i)}finally{if(r)throw r.error}}var l=e.items.reduce((function(e,r){return r.fulfillment?f(e,[r.fulfillment]):e}),[]);return Object.entries(n).map((function(e){var r=m(e,2),t=r[0];return{count:r[1],fulfillment:l.find((function(e){return e.id===t}))}}))},e}();C.decorators=[{type:r.Component,args:[{selector:"vdr-line-fulfillment",template:'<vdr-dropdown class="search-settings-menu" *ngIf="fulfilledCount || orderState === \'PartiallyDelivered\'">\r\n    <button type="button" class="icon-button" vdrDropdownTrigger>\r\n        <clr-icon *ngIf="fulfillmentStatus === \'full\'" class="item-fulfilled" shape="check-circle"></clr-icon>\r\n        <clr-icon\r\n            *ngIf="fulfillmentStatus === \'partial\'"\r\n            class="item-partially-fulfilled"\r\n            shape="check-circle"\r\n        ></clr-icon>\r\n        <clr-icon\r\n            *ngIf="fulfillmentStatus === \'none\'"\r\n            class="item-not-fulfilled"\r\n            shape="exclamation-circle"\r\n        ></clr-icon>\r\n    </button>\r\n    <vdr-dropdown-menu vdrPosition="bottom-right">\r\n        <label class="dropdown-header" *ngIf="fulfillmentStatus === \'full\'">\r\n            {{ \'order.line-fulfillment-all\' | translate }}\r\n        </label>\r\n        <label class="dropdown-header" *ngIf="fulfillmentStatus === \'partial\'">\r\n            {{\r\n                \'order.line-fulfillment-partial\' | translate: { total: line.quantity, count: fulfilledCount }\r\n            }}\r\n        </label>\r\n        <label class="dropdown-header" *ngIf="fulfillmentStatus === \'none\'">\r\n            {{ \'order.line-fulfillment-none\' | translate }}\r\n        </label>\r\n        <div class="fulfillment-detail" *ngFor="let item of fulfillments">\r\n            <div class="fulfillment-title">\r\n                {{ \'order.fulfillment\' | translate }} #{{ item.fulfillment.id }} ({{\r\n                    \'order.item-count\' | translate: { count: item.count }\r\n                }})\r\n            </div>\r\n            <vdr-labeled-data [label]="\'common.created-at\' | translate">\r\n                {{ item.fulfillment.createdAt | localeDate: \'medium\' }}\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data [label]="\'order.fulfillment-method\' | translate">\r\n                {{ item.fulfillment.method }}\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data\r\n                *ngIf="item.fulfillment.trackingCode"\r\n                [label]="\'order.tracking-code\' | translate"\r\n            >\r\n                {{ item.fulfillment.trackingCode }}\r\n            </vdr-labeled-data>\r\n        </div>\r\n    </vdr-dropdown-menu>\r\n</vdr-dropdown>\r\n',changeDetection:r.ChangeDetectionStrategy.OnPush,styles:[".item-fulfilled{color:var(--color-success-500)}.item-partially-fulfilled{color:var(--color-warning-500)}.item-not-fulfilled{color:var(--color-error-500)}.fulfillment-detail{margin:6px 12px}.fulfillment-detail:not(:last-of-type){border-bottom:1px dashed var(--color-component-border-200)}"]}]}],C.propDecorators={line:[{type:r.Input}],orderState:[{type:r.Input}]};var S=function(){function e(){}return e.prototype.getRefundedCount=function(){var e,r,t=null!==(r=null===(e=this.payments)||void 0===e?void 0:e.reduce((function(e,r){return f(e,r.refunds)}),[]))&&void 0!==r?r:[];return this.line.items.filter((function(e){if(null===e.refundId&&!e.cancelled)return!1;if(e.refundId){var r=t.find((function(r){return r.id===e.refundId}));return"Failed"!==(null==r?void 0:r.state)}return!1})).length},e}();S.decorators=[{type:r.Component,args:[{selector:"vdr-line-refunds",template:'<span *ngIf="getRefundedCount()" [title]="\'order.refunded-count\' | translate: { count: getRefundedCount() }">\r\n    <clr-icon shape="redo" class="is-solid" dir="down"></clr-icon>\r\n</span>\r\n',changeDetection:r.ChangeDetectionStrategy.OnPush,styles:[":host{color:var(--color-error-500)}"]}]}],S.propDecorators={line:[{type:r.Input}],payments:[{type:r.Input}]};var I=function(){function e(){this.addedItems=new Map,this.removedItems=new Map}return e.prototype.ngOnChanges=function(){var e=this.getModifiedLines(),r=e.added,t=e.removed;this.addedItems=r,this.removedItems=t},e.prototype.getSurcharge=function(e){return this.order.surcharges.find((function(r){return r.id===e}))},e.prototype.getAddedItems=function(){return f(this.addedItems.entries()).map((function(e){var r=m(e,2),t=r[0],n=r[1];return{name:t.productVariant.name,quantity:n}}))},e.prototype.getRemovedItems=function(){return f(this.removedItems.entries()).map((function(e){var r=m(e,2),t=r[0],n=r[1];return{name:t.productVariant.name,quantity:n}}))},e.prototype.getModifiedLines=function(){var e,r,t,n,i=new Map,o=new Map;try{for(var a=p(this.modification.orderItems||[]),l=a.next();!l.done;l=a.next()){var d=l.value,s=this.getOrderLineAndItem(d.id);if(s){var c=s.line;if(s.item.cancelled){var u=null!==(t=o.get(c))&&void 0!==t?t:0;o.set(c,u+1)}else{u=null!==(n=i.get(c))&&void 0!==n?n:0;i.set(c,u+1)}}}}catch(r){e={error:r}}finally{try{l&&!l.done&&(r=a.return)&&r.call(a)}finally{if(e)throw e.error}}return{added:i,removed:o}},e.prototype.getOrderLineAndItem=function(e){var r,t;try{for(var n=p(this.order.lines),i=n.next();!i.done;i=n.next()){var o=i.value,a=o.items.find((function(r){return r.id===e}));if(a)return{line:o,item:a}}}catch(e){r={error:e}}finally{try{i&&!i.done&&(t=n.return)&&t.call(n)}finally{if(r)throw r.error}}},e}();I.decorators=[{type:r.Component,args:[{selector:"vdr-modification-detail",template:'<vdr-labeled-data [label]="\'common.ID\' | translate">{{ modification.id }}</vdr-labeled-data>\r\n<vdr-labeled-data *ngIf="modification.note" [label]="\'order.note\' | translate">{{\r\n    modification.note\r\n}}</vdr-labeled-data>\r\n<vdr-labeled-data *ngFor="let surcharge of modification.surcharges" [label]="\'order.surcharges\' | translate">\r\n    {{ getSurcharge(surcharge.id)?.description }}\r\n    {{ getSurcharge(surcharge.id)?.priceWithTax | localeCurrency: order.currencyCode }}</vdr-labeled-data\r\n>\r\n<vdr-labeled-data *ngIf="getAddedItems().length" [label]="\'order.added-items\' | translate">\r\n    <vdr-simple-item-list [items]="getAddedItems()"></vdr-simple-item-list>\r\n</vdr-labeled-data>\r\n<vdr-labeled-data *ngIf="getRemovedItems().length" [label]="\'order.removed-items\' | translate">\r\n    <vdr-simple-item-list [items]="getRemovedItems()"></vdr-simple-item-list>\r\n</vdr-labeled-data>\r\n',changeDetection:r.ChangeDetectionStrategy.OnPush,styles:[""]}]}],I.propDecorators={order:[{type:r.Input}],modification:[{type:r.Input}]};var x=function(){function e(e){this.formBuilder=e,this.customFieldsConfig=[],this.customFieldValues={},this.updateClick=new r.EventEmitter,this.editable=!1}return e.prototype.ngOnInit=function(){var e,r;this.customFieldForm=this.formBuilder.group({});try{for(var t=p(this.customFieldsConfig),n=t.next();!n.done;n=t.next()){var i=n.value;this.customFieldForm.addControl(i.name,this.formBuilder.control(this.customFieldValues[i.name]))}}catch(r){e={error:r}}finally{try{n&&!n.done&&(r=t.return)&&r.call(t)}finally{if(e)throw e.error}}},e.prototype.onUpdateClick=function(){this.updateClick.emit(this.customFieldForm.value),this.customFieldForm.markAsPristine(),this.editable=!1},e}();x.decorators=[{type:r.Component,args:[{selector:"vdr-order-custom-fields-card",template:'<div class="card" *ngIf="customFieldsConfig.length">\r\n    <div class="card-header">\r\n        {{ \'common.custom-fields\' | translate }}\r\n    </div>\r\n    <div class="card-block">\r\n        <div class="card-text custom-field-form" [class.editable]="editable">\r\n            <ng-container *ngFor="let customField of customFieldsConfig">\r\n                <vdr-custom-field-control\r\n                    entityName="Order"\r\n                    [customFieldsFormGroup]="customFieldForm"\r\n                    [compact]="true"\r\n                    [readonly]="customField.readonly || !editable"\r\n                    [customField]="customField"\r\n                ></vdr-custom-field-control>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n    <div class="card-footer">\r\n        <button class="btn btn-sm btn-secondary" (click)="editable = true" *ngIf="!editable">\r\n            <clr-icon shape="pencil"></clr-icon>\r\n            {{ \'common.edit\' | translate }}\r\n        </button>\r\n        <button\r\n            class="btn btn-sm btn-primary"\r\n            (click)="onUpdateClick()"\r\n            *ngIf="editable"\r\n            [disabled]="customFieldForm.pristine || customFieldForm.invalid"\r\n        >\r\n            <clr-icon shape="check"></clr-icon>\r\n            {{ \'common.update\' | translate }}\r\n        </button>\r\n    </div>\r\n</div>\r\n',changeDetection:r.ChangeDetectionStrategy.OnPush,styles:["vdr-custom-field-control{margin-bottom:6px;display:block}.custom-field-form ::ng-deep .clr-control-label{color:var(--color-grey-400)}.custom-field-form.editable ::ng-deep .clr-control-label{color:inherit}"]}]}],x.ctorParameters=function(){return[{type:t.FormBuilder}]},x.propDecorators={customFieldsConfig:[{type:r.Input}],customFieldValues:[{type:r.Input}],updateClick:[{type:r.Output}]};var O=function(){function e(){this.nextStates=[],this.message="",this.selectedState=""}return e.prototype.select=function(){this.selectedState&&this.resolveWith(this.selectedState)},e.prototype.cancel=function(){this.resolveWith()},e}();O.decorators=[{type:r.Component,args:[{selector:"vdr-order-state-select-dialog",template:'<ng-template vdrDialogTitle>{{ \'order.select-state\' | translate }}</ng-template>\r\n<p>{{ message | translate }}</p>\r\n<clr-select-container>\r\n    <select clrSelect name="state" [(ngModel)]="selectedState">\r\n        <option *ngFor="let state of nextStates" [value]="state">\r\n            {{ state | stateI18nToken | translate }}\r\n        </option>\r\n    </select>\r\n</clr-select-container>\r\n<ng-template vdrDialogButtons>\r\n    <button type="submit" *ngIf="cancellable" (click)="cancel()" class="btn btn-secondary">\r\n        {{ \'common.cancel\' | translate }}\r\n    </button>\r\n    <button type="submit" (click)="select()" class="btn btn-primary" [disabled]="!selectedState">\r\n        {{ \'order.transition-to-state\' | translate: { state: (selectedState | stateI18nToken | translate) } }}\r\n    </button>\r\n</ng-template>\r\n',changeDetection:r.ChangeDetectionStrategy.OnPush,styles:[""]}]}];var w=function(){function e(e,r,t,n){this.dataService=e,this.modalService=r,this.notificationService=t,this.i18nService=n}return e.prototype.transitionToPreModifyingState=function(e,r){var t=this;return this.getPreModifyingState(e).pipe(d.switchMap((function(n){var o={orderId:e,nextStates:r,message:t.i18nService.translate(i.marker("order.unable-to-transition-to-state-try-another"),{state:n}),cancellable:!1,retry:10};return n?t.transitionToStateOrThrow(e,n).pipe(d.catchError((function(e){return t.manuallyTransitionToState(o)}))):t.manuallyTransitionToState(o)})))},e.prototype.manuallyTransitionToState=function(e){var r=this;return this.modalService.fromComponent(O,{locals:{nextStates:e.nextStates,cancellable:e.cancellable,message:e.message},closable:!1,size:"md"}).pipe(d.switchMap((function(t){if(t)return r.transitionToStateOrThrow(e.orderId,t);if(e.cancellable)return l.EMPTY;throw new Error("An order state must be selected")})),d.retryWhen((function(r){return r.pipe(d.delay(2e3),d.take(e.retry))})))},e.prototype.getPreModifyingState=function(e){return this.dataService.order.getOrderHistory(e,{filter:{type:{eq:n.HistoryEntryType.ORDER_STATE_TRANSITION}},sort:{createdAt:n.SortOrder.DESC}}).mapSingle((function(e){return e.order})).pipe(d.map((function(e){var r=null==e?void 0:e.history.items.find((function(e){return"Modifying"===e.data.to}));return r?r.data.from:void 0})))},e.prototype.transitionToStateOrThrow=function(e,r){var t=this;return this.dataService.order.transitionToState(e,r).pipe(d.map((function(e){var r=e.transitionOrderToState;switch(null==r?void 0:r.__typename){case"Order":return null==r?void 0:r.state;case"OrderStateTransitionError":throw t.notificationService.error(null==r?void 0:r.transitionError),new Error(null==r?void 0:r.transitionError)}})))},e}();w.ɵprov=r.ɵɵdefineInjectable({factory:function(){return new w(r.ɵɵinject(n.DataService),r.ɵɵinject(n.ModalService),r.ɵɵinject(n.NotificationService),r.ɵɵinject(n.I18nService))},token:w,providedIn:"root"}),w.decorators=[{type:r.Injectable,args:[{providedIn:"root"}]}],w.ctorParameters=function(){return[{type:n.DataService},{type:n.ModalService},{type:n.NotificationService},{type:n.I18nService}]};var F=function(){function e(e){this.serverConfigService=e,this.states=[]}return e.prototype.ngOnInit=function(){this.states=this.serverConfigService.getOrderProcessStates()},e}();F.decorators=[{type:r.Component,args:[{selector:"vdr-order-process-graph-dialog",template:'<ng-template vdrDialogTitle>{{ \'order.order-state-diagram\' | translate }}</ng-template>\r\n\r\n<vdr-order-process-graph [states]="states" [initialState]="activeState"></vdr-order-process-graph>\r\n',changeDetection:r.ChangeDetectionStrategy.OnPush,styles:[""]}]}],F.ctorParameters=function(){return[{type:n.ServerConfigService}]};var T=function(){function e(e){var r=this;this.i18nService=e,this.lineQuantities={},this.refundShipping=!1,this.adjustment=0,this.reasons=[i.marker("order.refund-reason-customer-request"),i.marker("order.refund-reason-not-available")],this.reasons=this.reasons.map((function(e){return r.i18nService.translate(e)}))}return Object.defineProperty(e.prototype,"refundTotal",{get:function(){var e=this;return this.order.lines.reduce((function(r,t){var n=e.lineQuantities[t.id],i=n.refund&&n.quantity||0;return r+t.proratedUnitPriceWithTax*i}),0)+(this.refundShipping?this.order.shippingWithTax:0)+this.adjustment},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"settledPaymentsTotal",{get:function(){return this.settledPayments.map((function(e){return e.amount-o.summate(e.refunds.filter((function(e){return"Failed"!==e.state})),"total")})).reduce((function(e,r){return e+r}),0)},enumerable:!1,configurable:!0}),e.prototype.lineCanBeRefundedOrCancelled=function(e){var r,t,n=null!==(t=null===(r=this.order.payments)||void 0===r?void 0:r.reduce((function(e,r){return f(e,r.refunds)}),[]))&&void 0!==t?t:[];return 0<e.items.filter((function(e){if(e.cancelled)return!1;if(null==e.refundId)return!0;var r=n.find((function(r){return r.id===e.refundId}));return"Failed"===(null==r?void 0:r.state)})).length},e.prototype.ngOnInit=function(){this.lineQuantities=this.order.lines.reduce((function(e,r){var t;return Object.assign(Object.assign({},e),((t={})[r.id]={quantity:0,refund:!1,cancel:!1},t))}),{}),this.settledPayments=(this.order.payments||[]).filter((function(e){return"Settled"===e.state})),this.settledPayments.length&&(this.selectedPayment=this.settledPayments[0])},e.prototype.handleZeroQuantity=function(e){0===(null==e?void 0:e.quantity)&&(e.cancel=!1,e.refund=!1)},e.prototype.isRefunding=function(){return Object.values(this.lineQuantities).reduce((function(e,r){return e||0<r.quantity&&r.refund}),!1)},e.prototype.isCancelling=function(){return Object.values(this.lineQuantities).reduce((function(e,r){return e||0<r.quantity&&r.cancel}),!1)},e.prototype.canSubmit=function(){return this.isRefunding()?!!(this.selectedPayment&&this.reason&&0<this.refundTotal&&this.refundTotal<=this.settledPaymentsTotal):!!this.isCancelling()&&!!this.reason},e.prototype.select=function(){var e=this.selectedPayment;if(e){var r=this.getOrderLineInput((function(e){return e.refund})),t=this.getOrderLineInput((function(e){return e.cancel}));this.resolveWith({refund:{lines:r,reason:this.reason,shipping:this.refundShipping?this.order.shipping:0,adjustment:this.adjustment,paymentId:e.id},cancel:{lines:t,orderId:this.order.id,reason:this.reason}})}},e.prototype.cancel=function(){this.resolveWith()},e.prototype.getOrderLineInput=function(e){return Object.entries(this.lineQuantities).filter((function(r){var t=m(r,2),n=(t[0],t[1]);return 0<n.quantity&&e(n)})).map((function(e){var r=m(e,2);return{orderLineId:r[0],quantity:r[1].quantity}}))},e}();T.decorators=[{type:r.Component,args:[{selector:"vdr-refund-order-dialog",template:'<ng-template vdrDialogTitle>{{ \'order.refund-and-cancel-order\' | translate }}</ng-template>\n\n<div class="refund-wrapper">\n    <div class="order-table">\n        <table class="table">\n            <thead>\n                <tr>\n                    <th></th>\n                    <th>{{ \'order.product-name\' | translate }}</th>\n                    <th>{{ \'order.product-sku\' | translate }}</th>\n                    <th>{{ \'order.quantity\' | translate }}</th>\n                    <th>{{ \'order.unit-price\' | translate }}</th>\n                    <th>{{ \'order.prorated-unit-price\' | translate }}</th>\n                    <th>{{ \'order.quantity\' | translate }}</th>\n                    <th>{{ \'order.refund\' | translate }}</th>\n                    <th>{{ \'order.cancel\' | translate }}</th>\n                </tr>\n            </thead>\n            <tr *ngFor="let line of order.lines" class="order-line">\n                <td class="align-middle thumb">\n                    <img [src]="line.featuredAsset | assetPreview: \'tiny\'" />\n                </td>\n                <td class="align-middle name">{{ line.productVariant.name }}</td>\n                <td class="align-middle sku">{{ line.productVariant.sku }}</td>\n                <td class="align-middle quantity">\n                    {{ line.quantity }}\n                    <vdr-line-refunds [line]="line" [payments]="order.payments"></vdr-line-refunds>\n                </td>\n                <td class="align-middle quantity">\n                    {{ line.unitPriceWithTax | localeCurrency: order.currencyCode }}\n                </td>\n                <td class="align-middle quantity">\n                    <div class="prorated-wrapper">\n                        {{ line.proratedUnitPriceWithTax | localeCurrency: order.currencyCode }}\n                        <ng-container *ngIf="line.discounts as discounts">\n                            <vdr-dropdown *ngIf="discounts.length">\n                                <div class="promotions-label" vdrDropdownTrigger>\n                                    <button class="icon-button"><clr-icon shape="info"></clr-icon></button>\n                                </div>\n                                <vdr-dropdown-menu>\n                                    <div class="line-promotion" *ngFor="let discount of discounts">\n                                        {{ discount.description }}\n                                        <div class="promotion-amount">\n                                            {{\n                                                discount.amount / 100 / line.quantity\n                                                    | number: \'1.0-2\'\n                                                    | currency: order.currencyCode\n                                            }}\n                                        </div>\n                                    </div>\n                                </vdr-dropdown-menu>\n                            </vdr-dropdown>\n                        </ng-container>\n                    </div>\n                </td>\n                <td class="align-middle fulfil">\n                    <input\n                        *ngIf="lineCanBeRefundedOrCancelled(line)"\n                        [(ngModel)]="lineQuantities[line.id].quantity"\n                        type="number"\n                        [max]="line.quantity"\n                        min="0"\n                        (input)="handleZeroQuantity(lineQuantities[line.id])"\n                    />\n                </td>\n                <td class="align-middle">\n                    <div class="cancel-checkbox-wrapper">\n                        <input\n                            type="checkbox"\n                            *ngIf="lineCanBeRefundedOrCancelled(line)"\n                            clrCheckbox\n                            [disabled]="0 === lineQuantities[line.id].quantity"\n                            [(ngModel)]="lineQuantities[line.id].refund"\n                        />\n                    </div>\n                </td>\n                <td class="align-middle">\n                    <div class="cancel-checkbox-wrapper">\n                        <input\n                            type="checkbox"\n                            *ngIf="lineCanBeRefundedOrCancelled(line)"\n                            clrCheckbox\n                            [disabled]="0 === lineQuantities[line.id].quantity"\n                            [(ngModel)]="lineQuantities[line.id].cancel"\n                        />\n                    </div>\n                </td>\n            </tr>\n        </table>\n    </div>\n    <div class="refund-details mt4">\n        <div>\n            <label class="clr-control-label">{{ \'order.refund-cancellation-reason\' | translate }}</label>\n            <ng-select\n                [disabled]="!isRefunding() && !isCancelling()"\n                [items]="reasons"\n                bindLabel="name"\n                autofocus\n                [placeholder]="\'order.refund-cancellation-reason-required\' | translate"\n                bindValue="id"\n                [addTag]="true"\n                [(ngModel)]="reason"\n            ></ng-select>\n        </div>\n\n        <div>\n            <clr-select-container>\n                <label>{{ \'order.payment-to-refund\' | translate }}</label>\n                <select clrSelect name="options" [(ngModel)]="selectedPayment" [disabled]="!isRefunding()">\n                    <option\n                        *ngFor="let payment of settledPayments"\n                        [ngValue]="payment"\n                        [disabled]="payment.state !== \'Settled\'"\n                    >\n                        #{{ payment.id }} {{ payment.method }}:\n                        {{ payment.amount | localeCurrency: order.currencyCode }}\n                    </option>\n                </select>\n            </clr-select-container>\n\n            <clr-checkbox-wrapper>\n                <input type="checkbox" clrCheckbox [(ngModel)]="refundShipping" [disabled]="!isRefunding()" />\n                <label>\n                    {{ \'order.refund-shipping\' | translate }} ({{\n                        order.shipping | localeCurrency: order.currencyCode\n                    }})\n                </label>\n            </clr-checkbox-wrapper>\n            <clr-input-container>\n                <label>{{ \'order.refund-adjustment\' | translate }}</label>\n                <vdr-currency-input\n                    clrInput\n                    [disabled]="!isRefunding()"\n                    [currencyCode]="order.currencyCode"\n                    [(ngModel)]="adjustment"\n                ></vdr-currency-input>\n            </clr-input-container>\n            <div class="totals" [class.disabled]="!isRefunding()">\n                <div class="order-total">\n                    {{ \'order.payment-amount\' | translate }}:\n                    {{ selectedPayment.amount | localeCurrency: order.currencyCode }}\n                </div>\n                <div class="refund-total">\n                    {{ \'order.refund-total\' | translate }}:\n                    {{ refundTotal | localeCurrency: order.currencyCode }}\n                </div>\n                <div class="refund-total-error" *ngIf="refundTotal < 0 || settledPaymentsTotal < refundTotal">\n                    {{\n                        \'order.refund-total-error\'\n                            | translate\n                                : {\n                                      min: 0 | currency: order.currencyCode,\n                                      max: settledPaymentsTotal | localeCurrency: order.currencyCode\n                                  }\n                    }}\n                </div>\n                <div class="refund-total-warning" *ngIf="selectedPayment.amount < refundTotal">\n                    {{ \'order.refund-total-warning\' | translate }}\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n\n<ng-template vdrDialogButtons>\n    <button type="button" class="btn" (click)="cancel()">{{ \'common.cancel\' | translate }}</button>\n    <button type="submit" (click)="select()" [disabled]="!canSubmit()" class="btn btn-primary">\n        <ng-container *ngIf="isRefunding(); else cancelling">\n            {{\n                \'order.refund-with-amount\'\n                    | translate: { amount: refundTotal | localeCurrency: order.currencyCode }\n            }}\n        </ng-container>\n        <ng-template #cancelling>\n            {{ \'order.cancel-selected-items\' | translate }}\n        </ng-template>\n    </button>\n</ng-template>\n',changeDetection:r.ChangeDetectionStrategy.OnPush,styles:[":host{height:100%;display:flex;min-height:64vh}.refund-wrapper{flex:1;flex-direction:column}.refund-wrapper .order-table{flex:1;overflow-y:auto}.refund-wrapper .order-table table{margin-top:0}.refund-wrapper tr.ignore{color:var(--color-grey-300)}.cancel-checkbox-wrapper{display:flex;align-items:center;justify-content:center}clr-checkbox-wrapper{margin-top:12px;margin-bottom:12px;display:block}.refund-details{display:flex;justify-content:space-between}.totals{margin-top:48px}.totals .refund-total{font-size:18px}.totals .refund-total-error{color:var(--color-error-500)}.totals .refund-total-warning{color:var(--color-warning-600);max-width:250px}.totals.disabled{color:var(--color-grey-300)}.prorated-wrapper{display:flex;justify-content:center}.line-promotion{display:flex;justify-content:space-between;font-size:12px;padding:3px 6px}.line-promotion .promotion-amount{margin-left:12px}"]}]}],T.ctorParameters=function(){return[{type:n.I18nService}]};var P=function(){function e(){this.transactionId=""}return e.prototype.submit=function(){this.resolveWith(this.transactionId)},e.prototype.cancel=function(){this.resolveWith()},e}();P.decorators=[{type:r.Component,args:[{selector:"vdr-settle-refund-dialog",template:'<ng-template vdrDialogTitle>{{ \'order.settle-refund\' | translate }}</ng-template>\r\n<p class="instruction">\r\n    {{ \'order.settle-refund-manual-instructions\' | translate: { method: refund.method } }}\r\n</p>\r\n<clr-input-container>\r\n    <label>{{ \'order.transaction-id\' | translate }}</label>\r\n    <input clrInput name="transactionId" [(ngModel)]="transactionId" />\r\n</clr-input-container>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type="button" class="btn" (click)="cancel()">{{ \'common.cancel\' | translate }}</button>\r\n    <button type="submit" (click)="submit()" [disabled]="!transactionId" class="btn btn-primary">\r\n        {{ \'order.settle-refund\' | translate }}\r\n    </button>\r\n</ng-template>\r\n',changeDetection:r.ChangeDetectionStrategy.OnPush,styles:[":host{padding-bottom:32px}.instruction{margin-top:0;margin-bottom:24px}"]}]}];var k,D=function(e){function r(r,n,i,o,a,d,s,c){var u=e.call(this,n,r,i,a)||this;return u.changeDetector=o,u.dataService=a,u.notificationService=d,u.modalService=s,u.orderTransitionService=c,u.detailForm=new t.FormGroup({}),u.fetchHistory=new l.Subject,u.defaultStates=["AddingItems","ArrangingPayment","PaymentAuthorized","PaymentSettled","PartiallyShipped","Shipped","PartiallyDelivered","Delivered","Cancelled","Modifying","ArrangingAdditionalPayment"],u}return u(r,e),r.prototype.ngOnInit=function(){var e=this;this.init(),this.entity$.pipe(d.take(1)).subscribe((function(r){"Modifying"===r.state&&e.router.navigate(["./","modify"],{relativeTo:e.route})})),this.customFields=this.getCustomFieldConfig("Order"),this.orderLineCustomFields=this.getCustomFieldConfig("OrderLine"),this.history$=this.fetchHistory.pipe(d.startWith(null),d.switchMap((function(){return e.dataService.order.getOrderHistory(e.id,{sort:{createdAt:n.SortOrder.DESC}}).mapStream((function(e){var r;return null===(r=e.order)||void 0===r?void 0:r.history.items}))}))),this.nextStates$=this.entity$.pipe(d.map((function(r){return!e.defaultStates.includes(r.state)?r.nextStates:r.nextStates.filter((function(r){return!e.defaultStates.includes(r)}))})))},r.prototype.ngOnDestroy=function(){this.destroy()},r.prototype.openStateDiagram=function(){var e=this;this.entity$.pipe(d.take(1),d.switchMap((function(r){return e.modalService.fromComponent(F,{closable:!0,locals:{activeState:r.state}})}))).subscribe()},r.prototype.transitionToState=function(e){var r=this;this.dataService.order.transitionToState(this.id,e).subscribe((function(t){var n=t.transitionOrderToState;switch(null==n?void 0:n.__typename){case"Order":r.notificationService.success(i.marker("order.transitioned-to-state-success"),{state:e}),r.fetchHistory.next();break;case"OrderStateTransitionError":r.notificationService.error(n.transitionError)}}))},r.prototype.manuallyTransitionToState=function(e){this.orderTransitionService.manuallyTransitionToState({orderId:e.id,nextStates:e.nextStates,cancellable:!0,message:i.marker("order.manually-transition-to-state-message"),retry:0}).subscribe()},r.prototype.transitionToModifying=function(){var e=this;this.dataService.order.transitionToState(this.id,"Modifying").subscribe((function(r){var t=r.transitionOrderToState;switch(null==t?void 0:t.__typename){case"Order":e.router.navigate(["./modify"],{relativeTo:e.route});break;case"OrderStateTransitionError":e.notificationService.error(t.transitionError)}}))},r.prototype.updateCustomFields=function(e){var r=this;this.dataService.order.updateOrderCustomFields({id:this.id,customFields:e}).subscribe((function(){r.notificationService.success(i.marker("common.notify-update-success"),{entity:"Order"})}))},r.prototype.getOrderAddressLines=function(e){return e?Object.values(e).filter((function(e){return"OrderAddress"!==e})).filter((function(e){return!!e})):[]},r.prototype.settlePayment=function(e){var r=this;this.dataService.order.settlePayment(e.id).subscribe((function(e){var t=e.settlePayment;switch(t.__typename){case"Payment":"Settled"===t.state?r.notificationService.success(i.marker("order.settle-payment-success")):r.notificationService.error(i.marker("order.settle-payment-error")),r.dataService.order.getOrder(r.id).single$.subscribe(),r.fetchHistory.next();break;case"OrderStateTransitionError":case"PaymentStateTransitionError":case"SettlePaymentError":r.notificationService.error(t.message)}}))},r.prototype.transitionPaymentState=function(e){var r=this,t=e.payment,n=e.state;this.dataService.order.transitionPaymentToState(t.id,n).subscribe((function(e){var t=e.transitionPaymentToState;switch(t.__typename){case"Payment":r.notificationService.success(i.marker("order.transitioned-payment-to-state-success"),{state:n}),r.dataService.order.getOrder(r.id).single$.subscribe(),r.fetchHistory.next();break;case"PaymentStateTransitionError":r.notificationService.error(t.message)}}))},r.prototype.canAddFulfillment=function(e){return!e.lines.reduce((function(e,r){return f(e,r.items)}),[]).every((function(e){return!!e.fulfillment}))&&!this.hasUnsettledModifications(e)&&0===this.outstandingPaymentAmount(e)&&(e.nextStates.includes("Shipped")||e.nextStates.includes("PartiallyShipped")||e.nextStates.includes("Delivered"))},r.prototype.hasUnsettledModifications=function(e){return 0<e.modifications.filter((function(e){return!e.isSettled})).length},r.prototype.getOutstandingModificationAmount=function(e){return o.summate(e.modifications.filter((function(e){return!e.isSettled})),"priceChange")},r.prototype.outstandingPaymentAmount=function(e){var r,t,n,i,a,l=0;try{for(var d=p(null!==(i=null===(n=e.payments)||void 0===n?void 0:n.filter((function(e){return"Cancelled"!==e.state&&"Declined"!==e.state&&"Error"!==e.state})))&&void 0!==i?i:[]),s=d.next();!s.done;s=d.next()){var c=s.value,u=null!==(a=c.refunds.filter((function(e){return"Failed"!==e.state})))&&void 0!==a?a:[],m=o.summate(u,"total");l+=c.amount-m}}catch(e){r={error:e}}finally{try{s&&!s.done&&(t=d.return)&&t.call(d)}finally{if(r)throw r.error}}return e.totalWithTax-l},r.prototype.addManualPayment=function(e){var r=this;this.modalService.fromComponent(s,{closable:!0,locals:{outstandingAmount:this.outstandingPaymentAmount(e),currencyCode:e.currencyCode}}).pipe(d.switchMap((function(e){return e?r.dataService.order.addManualPaymentToOrder({orderId:r.id,transactionId:e.transactionId,method:e.method,metadata:e.metadata||{}}):l.EMPTY})),d.switchMap((function(t){var n=t.addManualPaymentToOrder;switch(n.__typename){case"Order":return r.notificationService.success(i.marker("order.add-payment-to-order-success")),r.orderTransitionService.transitionToPreModifyingState(e.id,e.nextStates);case"ManualPaymentStateError":return r.notificationService.error(n.message),l.EMPTY;default:return l.EMPTY}}))).subscribe((function(e){e&&r.refetchOrder({result:e})}))},r.prototype.fulfillOrder=function(){var e=this;this.entity$.pipe(d.take(1),d.switchMap((function(r){return e.modalService.fromComponent(g,{size:"xl",locals:{order:r}})})),d.switchMap((function(r){return r?e.dataService.order.createFulfillment(r):l.of(void 0)})),d.switchMap((function(r){return e.refetchOrder(r).pipe(d.mapTo(r))}))).subscribe((function(r){if(r){var t=r.addFulfillmentToOrder;switch(t.__typename){case"Fulfillment":e.notificationService.success(i.marker("order.create-fulfillment-success"));break;case"EmptyOrderLineSelectionError":case"InsufficientStockOnHandError":case"ItemsAlreadyFulfilledError":case"InvalidFulfillmentHandlerError":e.notificationService.error(t.message);break;case"FulfillmentStateTransitionError":e.notificationService.error(t.transitionError);break;case"CreateFulfillmentError":e.notificationService.error(t.fulfillmentHandlerError);break;case void 0:e.notificationService.error(JSON.stringify(t));break;default:o.assertNever(t)}}}))},r.prototype.transitionFulfillment=function(e,r){var t=this;this.dataService.order.transitionFulfillmentToState(e,r).pipe(d.switchMap((function(e){return t.refetchOrder(e)}))).subscribe((function(){t.notificationService.success(i.marker("order.successfully-updated-fulfillment"))}))},r.prototype.cancelOrRefund=function(e){var r=this.orderHasSettledPayments(e);"PaymentAuthorized"!==e.state&&!0!==e.active&&r?this.refundOrder(e):this.cancelOrder(e)},r.prototype.settleRefund=function(e){var r=this;this.modalService.fromComponent(P,{size:"md",locals:{refund:e}}).pipe(d.switchMap((function(t){return t?r.dataService.order.settleRefund({transactionId:t,id:e.id},r.id):l.of(void 0)}))).subscribe((function(e){e&&r.notificationService.success(i.marker("order.settle-refund-success"))}))},r.prototype.addNote=function(e){var r=this,t=e.note,n=e.isPublic;this.dataService.order.addNoteToOrder({id:this.id,note:t,isPublic:n}).pipe(d.switchMap((function(e){return r.refetchOrder(e)}))).subscribe((function(e){r.notificationService.success(i.marker("common.notify-create-success"),{entity:"Note"})}))},r.prototype.updateNote=function(e){var r=this;this.modalService.fromComponent(n.EditNoteDialogComponent,{closable:!0,locals:{displayPrivacyControls:!0,note:e.data.note,noteIsPrivate:!e.isPublic}}).pipe(d.switchMap((function(t){return t?r.dataService.order.updateOrderNote({noteId:e.id,isPublic:!t.isPrivate,note:t.note}):l.EMPTY}))).subscribe((function(e){r.fetchHistory.next(),r.notificationService.success(i.marker("common.notify-update-success"),{entity:"Note"})}))},r.prototype.deleteNote=function(e){var r=this;return this.modalService.dialog({title:i.marker("common.confirm-delete-note"),body:e.data.note,buttons:[{type:"secondary",label:i.marker("common.cancel")},{type:"danger",label:i.marker("common.delete"),returnValue:!0}]}).pipe(d.switchMap((function(t){return t?r.dataService.order.deleteOrderNote(e.id):l.EMPTY}))).subscribe((function(){r.fetchHistory.next(),r.notificationService.success(i.marker("common.notify-delete-success"),{entity:"Note"})}))},r.prototype.orderHasSettledPayments=function(e){var r;return!!(null===(r=e.payments)||void 0===r?void 0:r.find((function(e){return"Settled"===e.state})))},r.prototype.cancelOrder=function(e){var r=this;this.modalService.fromComponent(y,{size:"xl",locals:{order:e}}).pipe(d.switchMap((function(e){return e?r.dataService.order.cancelOrder(e):l.of(void 0)})),d.switchMap((function(e){return r.refetchOrder(e)}))).subscribe((function(e){e&&r.notificationService.success(i.marker("order.cancelled-order-success"))}))},r.prototype.refundOrder=function(e){var r=this;this.modalService.fromComponent(T,{size:"xl",locals:{order:e}}).pipe(d.switchMap((function(e){var t;if(!e)return l.of(void 0);var n=[];return e.refund.lines.length&&n.push(r.dataService.order.refundOrder(e.refund).pipe(d.map((function(e){return e.refundOrder})))),(null===(t=e.cancel.lines)||void 0===t?void 0:t.length)&&n.push(r.dataService.order.cancelOrder(e.cancel).pipe(d.map((function(e){return e.cancelOrder})))),l.merge.apply(void 0,f(n))}))).subscribe((function(e){if(e)switch(e.__typename){case"Order":r.refetchOrder(e).subscribe(),r.notificationService.success(i.marker("order.cancelled-order-success"));break;case"Refund":r.refetchOrder(e).subscribe(),"Failed"===e.state?r.notificationService.error(i.marker("order.refund-order-failed")):r.notificationService.success(i.marker("order.refund-order-success"));break;case"QuantityTooGreatError":case"MultipleOrderError":case"OrderStateTransitionError":case"CancelActiveOrderError":case"EmptyOrderLineSelectionError":case"AlreadyRefundedError":case"NothingToRefundError":case"PaymentOrderMismatchError":case"RefundOrderStateError":case"RefundStateTransitionError":r.notificationService.error(e.message)}}))},r.prototype.refetchOrder=function(e){return this.fetchHistory.next(),e?this.dataService.order.getOrder(this.id).single$:l.of(void 0)},r.prototype.setFormValues=function(e){},r}(n.BaseDetailComponent);D.decorators=[{type:r.Component,args:[{selector:"vdr-order-detail",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">\r\n                <button\r\n                    class="icon-button"\r\n                    (click)="openStateDiagram()"\r\n                    [title]="\'order.order-state-diagram\' | translate"\r\n                >\r\n                    <clr-icon shape="list"></clr-icon>\r\n                </button>\r\n            </vdr-order-state-label>\r\n        </div>\r\n    </vdr-ab-left>\r\n\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId="order-detail"></vdr-action-bar-items>\r\n        <button\r\n            class="btn btn-primary"\r\n            *ngIf="\r\n                order.state === \'ArrangingAdditionalPayment\' &&\r\n                (hasUnsettledModifications(order) || 0 < outstandingPaymentAmount(order))\r\n            "\r\n            (click)="addManualPayment(order)"\r\n        >\r\n            {{ \'order.add-payment-to-order\' | translate }}\r\n            ({{ outstandingPaymentAmount(order) | localeCurrency: order.currencyCode }})\r\n        </button>\r\n        <button\r\n            class="btn btn-primary"\r\n            *ngIf="order.state !== \'ArrangingAdditionalPayment\' && 0 < outstandingPaymentAmount(order)"\r\n            (click)="transitionToState(\'ArrangingAdditionalPayment\')"\r\n        >\r\n            {{ \'order.arrange-additional-payment\' | translate }}\r\n        </button>\r\n        <button class="btn btn-primary" (click)="fulfillOrder()" [disabled]="!canAddFulfillment(order)">\r\n            {{ \'order.fulfill-order\' | translate }}\r\n        </button>\r\n        <vdr-dropdown>\r\n            <button class="icon-button" vdrDropdownTrigger>\r\n                <clr-icon shape="ellipsis-vertical"></clr-icon>\r\n            </button>\r\n            <vdr-dropdown-menu vdrPosition="bottom-right">\r\n                <ng-container *ngIf="order.nextStates.includes(\'Modifying\')">\r\n                    <button type="button" class="btn" vdrDropdownItem (click)="transitionToModifying()">\r\n                        <clr-icon shape="pencil"></clr-icon>\r\n                        {{ \'order.modify-order\' | translate }}\r\n                    </button>\r\n                    <div class="dropdown-divider"></div>\r\n                </ng-container>\r\n                <button\r\n                    type="button"\r\n                    class="btn"\r\n                    vdrDropdownItem\r\n                    *ngIf="order.nextStates.includes(\'Cancelled\')"\r\n                    (click)="cancelOrRefund(order)"\r\n                >\r\n                    <clr-icon shape="error-standard" class="is-error"></clr-icon>\r\n                    <ng-container *ngIf="orderHasSettledPayments(order); else cancelOnly">\r\n                        {{ \'order.refund-and-cancel-order\' | translate }}\r\n                    </ng-container>\r\n                    <ng-template #cancelOnly>\r\n                        {{ \'order.cancel-order\' | translate }}\r\n                    </ng-template>\r\n                </button>\r\n\r\n                <ng-container *ngIf="(nextStates$ | async)?.length">\r\n                    <div class="dropdown-divider"></div>\r\n                    <button\r\n                        *ngFor="let nextState of nextStates$ | async"\r\n                        type="button"\r\n                        class="btn"\r\n                        vdrDropdownItem\r\n                        (click)="transitionToState(nextState)"\r\n                    >\r\n                        <clr-icon shape="step-forward-2"></clr-icon>\r\n                        {{\r\n                            \'order.transition-to-state\'\r\n                                | translate: { state: (nextState | stateI18nToken | translate) }\r\n                        }}\r\n                    </button>\r\n                </ng-container>\r\n                <div class="dropdown-divider"></div>\r\n                <button type="button" class="btn" vdrDropdownItem (click)="manuallyTransitionToState(order)">\r\n                    <clr-icon shape="step-forward-2" class="is-warning"></clr-icon>\r\n                    {{ \'order.manually-transition-to-state\' | translate }}\r\n                </button>\r\n            </vdr-dropdown-menu>\r\n        </vdr-dropdown>\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            <vdr-order-table\r\n                [order]="order"\r\n                [orderLineCustomFields]="orderLineCustomFields"\r\n            ></vdr-order-table>\r\n            <h4>{{ \'order.tax-summary\' | translate }}</h4>\r\n            <table class="table">\r\n                <thead>\r\n                    <tr>\r\n                        <th>{{ \'common.description\' | translate }}</th>\r\n                        <th>{{ \'order.tax-rate\' | translate }}</th>\r\n                        <th>{{ \'order.tax-base\' | translate }}</th>\r\n                        <th>{{ \'order.tax-total\' | translate }}</th>\r\n                    </tr>\r\n                </thead>\r\n                <tbody>\r\n                    <tr *ngFor="let row of order.taxSummary">\r\n                        <td>{{ row.description }}</td>\r\n                        <td>{{ row.taxRate / 100 | percent }}</td>\r\n                        <td>{{ row.taxBase | localeCurrency: order.currencyCode }}</td>\r\n                        <td>{{ row.taxTotal | localeCurrency: order.currencyCode }}</td>\r\n                    </tr>\r\n                </tbody>\r\n            </table>\r\n\r\n            <vdr-order-history\r\n                [order]="order"\r\n                [history]="history$ | async"\r\n                (addNote)="addNote($event)"\r\n                (updateNote)="updateNote($event)"\r\n                (deleteNote)="deleteNote($event)"\r\n            ></vdr-order-history>\r\n        </div>\r\n        <div class="clr-col-lg-4 order-cards">\r\n            <vdr-order-custom-fields-card\r\n                [customFieldsConfig]="customFields"\r\n                [customFieldValues]="order.customFields"\r\n                (updateClick)="updateCustomFields($event)"\r\n            ></vdr-order-custom-fields-card>\r\n            <div class="card">\r\n                <div class="card-header">\r\n                    {{ \'order.customer\' | translate }}\r\n                </div>\r\n                <div class="card-block">\r\n                    <div class="card-text">\r\n                        <vdr-customer-label [customer]="order.customer"></vdr-customer-label>\r\n                        <h6 *ngIf="getOrderAddressLines(order.shippingAddress).length">\r\n                            {{ \'order.shipping-address\' | translate }}\r\n                        </h6>\r\n                        <vdr-formatted-address [address]="order.shippingAddress"></vdr-formatted-address>\r\n                        <h6 *ngIf="getOrderAddressLines(order.billingAddress).length">\r\n                            {{ \'order.billing-address\' | translate }}\r\n                        </h6>\r\n                        <vdr-formatted-address [address]="order.billingAddress"></vdr-formatted-address>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <ng-container *ngIf="order.payments && order.payments.length">\r\n                <vdr-order-payment-card\r\n                    *ngFor="let payment of order.payments"\r\n                    [currencyCode]="order.currencyCode"\r\n                    [payment]="payment"\r\n                    (settlePayment)="settlePayment($event)"\r\n                    (transitionPaymentState)="transitionPaymentState($event)"\r\n                    (settleRefund)="settleRefund($event)"\r\n                ></vdr-order-payment-card>\r\n            </ng-container>\r\n            <ng-container *ngFor="let fulfillment of order.fulfillments">\r\n                <vdr-fulfillment-card\r\n                    [fulfillment]="fulfillment"\r\n                    [order]="order"\r\n                    (transitionState)="transitionFulfillment(fulfillment.id, $event)"\r\n                ></vdr-fulfillment-card>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n</div>\r\n',changeDetection:r.ChangeDetectionStrategy.OnPush,styles:[".shipping-address{list-style-type:none;line-height:1.3em}.order-cards h6{margin-top:6px;color:var(--color-text-200)}"]}]}],D.ctorParameters=function(){return[{type:a.Router},{type:a.ActivatedRoute},{type:n.ServerConfigService},{type:r.ChangeDetectorRef},{type:n.DataService},{type:n.NotificationService},{type:n.ModalService},{type:w}]},e.OrderEditResultType=void 0,(k=e.OrderEditResultType||(e.OrderEditResultType={}))[k.Refund=0]="Refund",k[k.Payment=1]="Payment",k[k.PriceUnchanged=2]="PriceUnchanged",k[k.Cancel=3]="Cancel";var A=function(){function r(){}return Object.defineProperty(r.prototype,"priceDifference",{get:function(){return this.order.totalWithTax-this.originalTotalWithTax},enumerable:!1,configurable:!0}),r.prototype.ngOnInit=function(){this.refundNote=this.modifyOrderInput.note||""},r.prototype.cancel=function(){this.resolveWith({result:e.OrderEditResultType.Cancel})},r.prototype.submit=function(){0<this.priceDifference?this.resolveWith({result:e.OrderEditResultType.Payment}):this.priceDifference<0?this.resolveWith({result:e.OrderEditResultType.Refund,refundPaymentId:this.selectedPayment.id,refundNote:this.refundNote}):this.resolveWith({result:e.OrderEditResultType.PriceUnchanged})},r}();A.decorators=[{type:r.Component,args:[{selector:"vdr-order-edits-preview-dialog",template:'<ng-template vdrDialogTitle>{{ \'order.confirm-modifications\' | translate }}</ng-template>\r\n<vdr-order-table [order]="order" [orderLineCustomFields]="orderLineCustomFields"></vdr-order-table>\r\n\r\n<h4 class="h4">\r\n    {{ \'order.modify-order-price-difference\' | translate }}:\r\n    <strong>{{ priceDifference | localeCurrency: order.currencyCode }}</strong>\r\n</h4>\r\n<div *ngIf="priceDifference < 0">\r\n<clr-select-container>\r\n    <label>{{ \'order.payment-to-refund\' | translate }}</label>\r\n    <select clrSelect name="options" [(ngModel)]="selectedPayment">\r\n        <option\r\n            *ngFor="let payment of order.payments"\r\n            [ngValue]="payment"\r\n        >\r\n            #{{ payment.id }} {{ payment.method }}:\r\n            {{ payment.amount | localeCurrency: order.currencyCode }}\r\n        </option>\r\n    </select>\r\n</clr-select-container>\r\n    <label class="clr-control-label">{{ \'order.refund-cancellation-reason\' | translate }}</label>\r\n    <textarea [(ngModel)]="refundNote" name="refundNote" clrTextarea required></textarea>\r\n</div>\r\n<ng-template vdrDialogButtons>\r\n    <button type="button" class="btn" (click)="cancel()">{{ \'common.cancel\' | translate }}</button>\r\n    <button type="submit" (click)="submit()" [disabled]="priceDifference < 0 && !selectedPayment" class="btn btn-primary">\r\n        {{ \'common.confirm\' | translate }}\r\n    </button>\r\n</ng-template>\r\n',changeDetection:r.ChangeDetectionStrategy.OnPush,styles:[""]}]}];var E=function(r){function i(e,n,i,o,a,l,d,s){var c=r.call(this,n,e,i,a)||this;return c.changeDetector=o,c.dataService=a,c.notificationService=l,c.modalService=d,c.orderTransitionService=s,c.detailForm=new t.FormGroup({}),c.modifyOrderInput={dryRun:!0,orderId:"",addItems:[],adjustOrderLines:[],surcharges:[],note:"",updateShippingAddress:{},updateBillingAddress:{}},c.note="",c.recalculateShipping=!0,c.addedVariants=new Map,c}return u(i,r),Object.defineProperty(i.prototype,"addedLines",{get:function(){var e=this,r=function(e){return"SinglePrice"===e.__typename?e.value:0};return(this.modifyOrderInput.addItems||[]).map((function(t){var n=e.addedVariants.get(t.productVariantId);if(n)return Object.assign(Object.assign({},n),{price:r(n.price),priceWithTax:r(n.priceWithTax),quantity:t.quantity})})).filter(o.notNullOrUndefined)},enumerable:!1,configurable:!0}),i.prototype.ngOnInit=function(){var e,r,i=this;this.init(),this.addressCustomFields=this.getCustomFieldConfig("Address"),this.modifyOrderInput.orderId=this.route.snapshot.paramMap.get("id"),this.orderLineCustomFields=this.getCustomFieldConfig("OrderLine"),this.entity$.pipe(d.takeUntil(this.destroy$)).subscribe((function(e){var r,n,o,a,l,s,c,u,m,f,y,g,v,h,b,C,S,I,x,O;i.surchargeForm=new t.FormGroup({description:new t.FormControl("",t.Validators.required),sku:new t.FormControl(""),price:new t.FormControl(0,t.Validators.required),priceIncludesTax:new t.FormControl(!0),taxRate:new t.FormControl(0),taxDescription:new t.FormControl("")}),i.shippingAddressForm||(i.shippingAddressForm=new t.FormGroup({fullName:new t.FormControl(null===(o=e.shippingAddress)||void 0===o?void 0:o.fullName),company:new t.FormControl(null===(a=e.shippingAddress)||void 0===a?void 0:a.company),streetLine1:new t.FormControl(null===(l=e.shippingAddress)||void 0===l?void 0:l.streetLine1),streetLine2:new t.FormControl(null===(s=e.shippingAddress)||void 0===s?void 0:s.streetLine2),city:new t.FormControl(null===(c=e.shippingAddress)||void 0===c?void 0:c.city),province:new t.FormControl(null===(u=e.shippingAddress)||void 0===u?void 0:u.province),postalCode:new t.FormControl(null===(m=e.shippingAddress)||void 0===m?void 0:m.postalCode),countryCode:new t.FormControl(null===(f=e.shippingAddress)||void 0===f?void 0:f.countryCode),phoneNumber:new t.FormControl(null===(y=e.shippingAddress)||void 0===y?void 0:y.phoneNumber)})),i.billingAddressForm||(i.billingAddressForm=new t.FormGroup({fullName:new t.FormControl(null===(g=e.billingAddress)||void 0===g?void 0:g.fullName),company:new t.FormControl(null===(v=e.billingAddress)||void 0===v?void 0:v.company),streetLine1:new t.FormControl(null===(h=e.billingAddress)||void 0===h?void 0:h.streetLine1),streetLine2:new t.FormControl(null===(b=e.billingAddress)||void 0===b?void 0:b.streetLine2),city:new t.FormControl(null===(C=e.billingAddress)||void 0===C?void 0:C.city),province:new t.FormControl(null===(S=e.billingAddress)||void 0===S?void 0:S.province),postalCode:new t.FormControl(null===(I=e.billingAddress)||void 0===I?void 0:I.postalCode),countryCode:new t.FormControl(null===(x=e.billingAddress)||void 0===x?void 0:x.countryCode),phoneNumber:new t.FormControl(null===(O=e.billingAddress)||void 0===O?void 0:O.phoneNumber)})),i.orderLineCustomFieldsFormArray=new t.FormArray([]);var w=function(e){var r,n,o=new t.FormGroup({});try{for(var a=(r=void 0,p(i.orderLineCustomFields)),l=a.next();!l.done;l=a.next()){var s=l.value.name;o.addControl(s,new t.FormControl(e.customFields[s]))}}catch(e){r={error:e}}finally{try{l&&!l.done&&(n=a.return)&&n.call(a)}finally{if(r)throw r.error}}o.valueChanges.pipe(d.takeUntil(i.destroy$)).subscribe((function(r){var t=i.modifyOrderInput.adjustOrderLines.find((function(r){return r.orderLineId===e.id}));t||(t={orderLineId:e.id,quantity:e.quantity},i.modifyOrderInput.adjustOrderLines.push(t)),i.orderLineCustomFields.length&&(t.customFields=r)})),i.orderLineCustomFieldsFormArray.push(o)};try{for(var F=p(e.lines),T=F.next();!T.done;T=F.next()){w(T.value)}}catch(e){r={error:e}}finally{try{T&&!T.done&&(n=F.return)&&n.call(F)}finally{if(r)throw r.error}}})),this.addItemCustomFieldsFormArray=new t.FormArray([]),this.addItemCustomFieldsForm=new t.FormGroup({});try{for(var o=p(this.orderLineCustomFields),a=o.next();!a.done;a=o.next()){var l=a.value;this.addItemCustomFieldsForm.addControl(l.name,new t.FormControl)}}catch(r){e={error:r}}finally{try{a&&!a.done&&(r=o.return)&&r.call(o)}finally{if(e)throw e.error}}this.availableCountries$=this.dataService.settings.getAvailableCountries().mapSingle((function(e){return e.countries.items})).pipe(d.shareReplay(1)),this.dataService.order.getOrderHistory(this.id,{take:1,sort:{createdAt:n.SortOrder.DESC},filter:{type:{eq:n.HistoryEntryType.ORDER_STATE_TRANSITION}}}).single$.subscribe((function(e){var r=e.order;i.previousState=null==r?void 0:r.history.items[0].data.from}))},i.prototype.ngOnDestroy=function(){this.destroy()},i.prototype.transitionToPriorState=function(e){var r=this;this.orderTransitionService.transitionToPreModifyingState(e.id,e.nextStates).subscribe((function(e){r.router.navigate([".."],{relativeTo:r.route})}))},i.prototype.canPreviewChanges=function(){var e=this.modifyOrderInput,r=e.addItems,t=e.adjustOrderLines,n=e.surcharges;return!!(null==r?void 0:r.length)||!!(null==n?void 0:n.length)||!!(null==t?void 0:t.length)||this.shippingAddressForm.dirty&&this.shippingAddressForm.valid||this.billingAddressForm.dirty&&this.billingAddressForm.valid},i.prototype.isLineModified=function(e){var r;return!!(null===(r=this.modifyOrderInput.adjustOrderLines)||void 0===r?void 0:r.find((function(r){return r.orderLineId===e.id&&r.quantity!==e.quantity})))},i.prototype.updateLineQuantity=function(e,r){var t=this.modifyOrderInput.adjustOrderLines,n=null==t?void 0:t.find((function(r){return r.orderLineId===e.id}));n&&+r===e.quantity&&(null==t||t.splice(null==t?void 0:t.indexOf(n),1)),n||(n={orderLineId:e.id,quantity:+r},null==t||t.push(n)),n.quantity=+r},i.prototype.updateAddedItemQuantity=function(e,r){var t,n=null===(t=this.modifyOrderInput.addItems)||void 0===t?void 0:t.find((function(r){return r.productVariantId===e.productVariantId}));n&&(n.quantity=+r)},i.prototype.trackByProductVariantId=function(e,r){return r.productVariantId},i.prototype.getSelectedItemPrice=function(e){switch(null==e?void 0:e.priceWithTax.__typename){case"SinglePrice":return e.priceWithTax.value;default:return 0}},i.prototype.addItemToOrder=function(e){var r,n,i,o,a=this;if(e){var l=this.orderLineCustomFields.length?this.addItemCustomFieldsForm.value:void 0,s=null===(i=this.modifyOrderInput.addItems)||void 0===i?void 0:i.find((function(r){return a.isMatchingAddItemRow(r,e,l)}));if(s?s.quantity++:(s={productVariantId:e.productVariantId,quantity:1},l&&(s.customFields=l),null===(o=this.modifyOrderInput.addItems)||void 0===o||o.push(s)),l){var c=new t.FormGroup({});try{for(var u=p(Object.entries(l)),f=u.next();!f.done;f=u.next()){var y=m(f.value,2),g=y[0],v=y[1];c.addControl(g,new t.FormControl(v))}}catch(e){r={error:e}}finally{try{f&&!f.done&&(n=u.return)&&n.call(u)}finally{if(r)throw r.error}}this.addItemCustomFieldsFormArray.push(c),c.valueChanges.pipe(d.takeUntil(this.destroy$)).subscribe((function(e){s&&(s.customFields=e)}))}this.addItemCustomFieldsForm.reset({}),this.addItemSelectedVariant=void 0,this.addedVariants.set(e.productVariantId,e)}},i.prototype.isMatchingAddItemRow=function(e,r,t){return e.productVariantId===r.productVariantId&&JSON.stringify(e.customFields)===JSON.stringify(t)},i.prototype.removeAddedItem=function(e){this.modifyOrderInput.addItems.splice(e,1),-1<e&&this.addItemCustomFieldsFormArray.removeAt(e)},i.prototype.getSurchargePrices=function(e){var r=e.priceIncludesTax?e.price:Math.round(e.price*((100+(e.taxRate||0))/100));return{price:e.priceIncludesTax?Math.round(e.price/((100+(e.taxRate||0))/100)):e.price,priceWithTax:r}},i.prototype.addSurcharge=function(e){var r;null===(r=this.modifyOrderInput.surcharges)||void 0===r||r.push(e),this.surchargeForm.reset({price:0,priceIncludesTax:!0,taxRate:0})},i.prototype.removeSurcharge=function(e){var r;null===(r=this.modifyOrderInput.surcharges)||void 0===r||r.splice(e,1)},i.prototype.previewAndModify=function(r){var t,n=this,i=Object.assign(Object.assign(Object.assign(Object.assign({},this.modifyOrderInput),this.billingAddressForm.dirty?{updateBillingAddress:this.billingAddressForm.value}:{}),this.shippingAddressForm.dirty?{updateShippingAddress:this.shippingAddressForm.value}:{}),{dryRun:!0,note:null!==(t=this.note)&&void 0!==t?t:"",options:{recalculateShipping:this.recalculateShipping}}),a=r.totalWithTax;this.dataService.order.modifyOrder(i).pipe(d.switchMap((function(e){var r=e.modifyOrder;switch(r.__typename){case"Order":return n.modalService.fromComponent(A,{size:"xl",closable:!1,locals:{originalTotalWithTax:a,order:r,orderLineCustomFields:n.orderLineCustomFields,modifyOrderInput:i}});case"InsufficientStockError":case"NegativeQuantityError":case"NoChangesSpecifiedError":case"OrderLimitError":case"OrderModificationStateError":case"PaymentMethodMissingError":case"RefundPaymentIdMissingError":return n.notificationService.error(r.message),l.of(!1);case null:case void 0:return l.of(!1);default:o.assertNever(r)}})),d.switchMap((function(t){if(t&&t.result!==e.OrderEditResultType.Cancel){var o=Object.assign(Object.assign({},i),{dryRun:!1});return t.result===e.OrderEditResultType.Refund&&(o.refund={paymentId:t.refundPaymentId,reason:t.refundNote}),n.dataService.order.modifyOrder(o).pipe(d.switchMap((function(e){var t=e.modifyOrder;if("Order"===t.__typename){var i=0<t.totalWithTax-a?"ArrangingAdditionalPayment":n.previousState;return n.dataService.order.transitionToState(r.id,i).pipe(d.mapTo(!0))}return n.notificationService.error(t.message),l.EMPTY})))}return n.dataService.order.getOrder(n.id).mapSingle((function(){return!1}))}))).subscribe((function(e){e&&n.router.navigate(["../"],{relativeTo:n.route})}))},i.prototype.setFormValues=function(e,r){},i}(n.BaseDetailComponent);E.decorators=[{type:r.Component,args:[{selector:"vdr-order-editor",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\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',changeDetection:r.ChangeDetectionStrategy.OnPush,styles:[".order-table .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}.order-table .sub-total td,.order-table .total td{border-top:1px dashed var(--color-component-border-200)}.order-table .total td{font-weight:700}.order-table td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}.order-table .order-line-custom-fields{display:flex;flex-wrap:wrap}.order-table .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-right:18px}.order-table .order-line-custom-field{background-color:var(--color-component-bg-100)}.order-table .net-price,.order-table .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}.order-table .net-price{font-size:11px}.order-table .promotions-label{-webkit-text-decoration:underline dotted var(--color-text-200);text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}.order-table tr.modified td{background-color:var(--color-warning-100)}"]}]}],E.ctorParameters=function(){return[{type:a.Router},{type:a.ActivatedRoute},{type:n.ServerConfigService},{type:r.ChangeDetectorRef},{type:n.DataService},{type:n.NotificationService},{type:n.ModalService},{type:w}]};var R=function(){function e(){this.addNote=new r.EventEmitter,this.updateNote=new r.EventEmitter,this.deleteNote=new r.EventEmitter,this.note="",this.noteIsPrivate=!0,this.expanded=!1,this.type=n.HistoryEntryType}return e.prototype.getDisplayType=function(e){if(e.type===n.HistoryEntryType.ORDER_STATE_TRANSITION){if("Delivered"===e.data.to)return"success";if("Cancelled"===e.data.to)return"error"}return e.type===n.HistoryEntryType.ORDER_FULFILLMENT_TRANSITION&&"Delivered"===e.data.to?"success":e.type!==n.HistoryEntryType.ORDER_PAYMENT_TRANSITION||"Declined"!==e.data.to&&"Cancelled"!==e.data.to?e.type===n.HistoryEntryType.ORDER_CANCELLATION?"error":e.type===n.HistoryEntryType.ORDER_REFUND_TRANSITION?"warning":"default":"error"},e.prototype.getTimelineIcon=function(e){if(e.type===n.HistoryEntryType.ORDER_STATE_TRANSITION){if("Delivered"===e.data.to)return["success-standard","is-solid"];if("Cancelled"===e.data.to)return"ban"}if(e.type===n.HistoryEntryType.ORDER_PAYMENT_TRANSITION&&"Settled"===e.data.to)return"credit-card";if(e.type===n.HistoryEntryType.ORDER_NOTE)return"note";if(e.type===n.HistoryEntryType.ORDER_MODIFIED)return"pencil";if(e.type===n.HistoryEntryType.ORDER_FULFILLMENT_TRANSITION){if("Shipped"===e.data.to)return"truck";if("Delivered"===e.data.to)return"truck"}},e.prototype.isFeatured=function(e){switch(e.type){case n.HistoryEntryType.ORDER_STATE_TRANSITION:return"Delivered"===e.data.to||"Cancelled"===e.data.to||"Settled"===e.data.to;case n.HistoryEntryType.ORDER_PAYMENT_TRANSITION:return"Settled"===e.data.to||"Cancelled"===e.data.to;case n.HistoryEntryType.ORDER_FULFILLMENT_TRANSITION:return"Delivered"===e.data.to||"Shipped"===e.data.to;case n.HistoryEntryType.ORDER_NOTE:case n.HistoryEntryType.ORDER_MODIFIED:return!0;default:return!1}},e.prototype.getFulfillment=function(e){if((e.type===n.HistoryEntryType.ORDER_FULFILLMENT||e.type===n.HistoryEntryType.ORDER_FULFILLMENT_TRANSITION)&&this.order.fulfillments)return this.order.fulfillments.find((function(r){return r.id===e.data.fulfillmentId}))},e.prototype.getPayment=function(e){if(e.type===n.HistoryEntryType.ORDER_PAYMENT_TRANSITION&&this.order.payments)return this.order.payments.find((function(r){return r.id===e.data.paymentId}))},e.prototype.getCancelledItems=function(e){var r,t,n,i,o=new Map,a=e.data.orderItemIds;try{for(var l=p(this.order.lines),d=l.next();!d.done;d=l.next()){var s=d.value;try{for(var c=(n=void 0,p(s.items)),u=c.next();!u.done;u=c.next()){var f=u.value;if(a.includes(f.id)){var y=o.get(s.productVariant.name);null!=y?o.set(s.productVariant.name,y+1):o.set(s.productVariant.name,1)}}}catch(e){n={error:e}}finally{try{u&&!u.done&&(i=c.return)&&i.call(c)}finally{if(n)throw n.error}}}}catch(e){r={error:e}}finally{try{d&&!d.done&&(t=l.return)&&t.call(l)}finally{if(r)throw r.error}}return Array.from(o.entries()).map((function(e){var r=m(e,2);return{name:r[0],quantity:r[1]}}))},e.prototype.getModification=function(e){return this.order.modifications.find((function(r){return r.id===e}))},e.prototype.getName=function(e){var r=e.administrator;if(r)return r.firstName+" "+r.lastName;var t=this.order.customer;return t?t.firstName+" "+t.lastName:""},e.prototype.addNoteToOrder=function(){this.addNote.emit({note:this.note,isPublic:!this.noteIsPrivate}),this.note="",this.noteIsPrivate=!0},e}();R.decorators=[{type:r.Component,args:[{selector:"vdr-order-history",template:'<h4>{{ \'order.order-history\' | translate }}</h4>\r\n<div class="entry-list" [class.expanded]="expanded">\r\n    <vdr-timeline-entry iconShape="note" displayType="muted" [featured]="true">\r\n        <div class="note-entry">\r\n            <textarea [(ngModel)]="note" name="note" class="note"></textarea>\r\n            <button class="btn btn-secondary" [disabled]="!note" (click)="addNoteToOrder()">\r\n                {{ \'common.add-note\' | translate }}\r\n            </button>\r\n        </div>\r\n        <div class="visibility-select">\r\n            <clr-checkbox-wrapper>\r\n                <input type="checkbox" clrCheckbox [(ngModel)]="noteIsPrivate" />\r\n                <label>{{ \'order.note-is-private\' | translate }}</label>\r\n            </clr-checkbox-wrapper>\r\n            <span *ngIf="noteIsPrivate" class="private">\r\n                {{ \'order.note-only-visible-to-administrators\' | translate }}\r\n            </span>\r\n            <span *ngIf="!noteIsPrivate" class="public">\r\n                {{ \'order.note-visible-to-customer\' | translate }}\r\n            </span>\r\n        </div>\r\n    </vdr-timeline-entry>\r\n    <vdr-timeline-entry\r\n        *ngFor="let entry of history"\r\n        [displayType]="getDisplayType(entry)"\r\n        [iconShape]="getTimelineIcon(entry)"\r\n        [createdAt]="entry.createdAt"\r\n        [name]="getName(entry)"\r\n        [featured]="isFeatured(entry)"\r\n        [collapsed]="!expanded && !isFeatured(entry)"\r\n        (expandClick)="expanded = !expanded"\r\n    >\r\n        <ng-container [ngSwitch]="entry.type">\r\n            <ng-container *ngSwitchCase="type.ORDER_STATE_TRANSITION">\r\n                <div class="title" *ngIf="entry.data.to === \'Delivered\'">\r\n                    {{ \'order.history-order-fulfilled\' | translate }}\r\n                </div>\r\n                <div class="title" *ngIf="entry.data.to === \'Cancelled\'">\r\n                    {{ \'order.history-order-cancelled\' | translate }}\r\n                </div>\r\n                <ng-template [ngIf]="entry.data.to !== \'Cancelled\' && entry.data.to !== \'Delivered\'">\r\n                    {{\r\n                        \'order.history-order-transition\'\r\n                            | translate: { from: entry.data.from, to: entry.data.to }\r\n                    }}\r\n                </ng-template>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase="type.ORDER_MODIFIED">\r\n                <div class="title">\r\n                    {{ \'order.history-order-modified\' | translate }}\r\n                </div>\r\n                <ng-container *ngIf="getModification(entry.data.modificationId) as modification">\r\n                    {{ \'order.modify-order-price-difference\' | translate }}:\r\n                    <strong>{{ modification.priceChange | localeCurrency: order.currencyCode }}</strong>\r\n                    <vdr-chip colorType="success" *ngIf="modification.isSettled">{{\r\n                        \'order.modification-settled\' | translate\r\n                    }}</vdr-chip>\r\n                    <vdr-chip colorType="error" *ngIf="!modification.isSettled">{{\r\n                        \'order.modification-not-settled\' | translate\r\n                    }}</vdr-chip>\r\n                    <vdr-history-entry-detail>\r\n                        <vdr-modification-detail\r\n                            [order]="order"\r\n                            [modification]="modification"\r\n                        ></vdr-modification-detail>\r\n                    </vdr-history-entry-detail>\r\n                </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase="type.ORDER_PAYMENT_TRANSITION">\r\n                <ng-container *ngIf="entry.data.to === \'Settled\'; else regularPaymentTransition">\r\n                    <div class="title">\r\n                        {{ \'order.history-payment-settled\' | translate }}\r\n                    </div>\r\n                    {{ \'order.transaction-id\' | translate }}: {{ getPayment(entry)?.transactionId }}\r\n                    <vdr-history-entry-detail *ngIf="getPayment(entry) as payment">\r\n                        <vdr-payment-detail\r\n                            [payment]="payment"\r\n                            [currencyCode]="order.currencyCode"\r\n                        ></vdr-payment-detail>\r\n                    </vdr-history-entry-detail>\r\n                </ng-container>\r\n                <ng-template #regularPaymentTransition>\r\n                    {{\r\n                        \'order.history-payment-transition\'\r\n                            | translate\r\n                                : {\r\n                                      from: entry.data.from,\r\n                                      to: entry.data.to,\r\n                                      id: getPayment(entry)?.transactionId\r\n                                  }\r\n                    }}\r\n                </ng-template>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase="type.ORDER_REFUND_TRANSITION">\r\n                {{\r\n                    \'order.history-refund-transition\'\r\n                        | translate: { from: entry.data.from, to: entry.data.to, id: entry.data.refundId }\r\n                }}\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase="type.ORDER_CANCELLATION">\r\n                {{ \'order.history-items-cancelled\' | translate: { count: entry.data.orderItemIds.length } }}\r\n                <vdr-history-entry-detail *ngIf="getCancelledItems(entry) as items">\r\n                    <vdr-labeled-data [label]="\'order.cancellation-reason\' | translate">\r\n                        {{ entry.data.reason }}\r\n                    </vdr-labeled-data>\r\n                    <vdr-labeled-data [label]="\'order.contents\' | translate">\r\n                        <vdr-simple-item-list [items]="items"></vdr-simple-item-list>\r\n                    </vdr-labeled-data>\r\n                </vdr-history-entry-detail>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase="type.ORDER_FULFILLMENT">\r\n                {{ \'order.history-fulfillment-created\' | translate }}\r\n                <vdr-history-entry-detail *ngIf="getFulfillment(entry) as fulfillment">\r\n                    <vdr-fulfillment-detail\r\n                        [fulfillmentId]="fulfillment.id"\r\n                        [order]="order"\r\n                    ></vdr-fulfillment-detail>\r\n                </vdr-history-entry-detail>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase="type.ORDER_FULFILLMENT_TRANSITION">\r\n                <ng-container *ngIf="entry.data.to === \'Delivered\'">\r\n                    <div class="title">\r\n                        {{ \'order.history-fulfillment-delivered\' | translate }}\r\n                    </div>\r\n                    {{ \'order.tracking-code\' | translate }}: {{ getFulfillment(entry)?.trackingCode }}\r\n                </ng-container>\r\n                <ng-container *ngIf="entry.data.to === \'Shipped\'">\r\n                    <div class="title">\r\n                        {{ \'order.history-fulfillment-shipped\' | translate }}\r\n                    </div>\r\n                    {{ \'order.tracking-code\' | translate }}: {{ getFulfillment(entry)?.trackingCode }}\r\n                </ng-container>\r\n                <ng-container *ngIf="entry.data.to !== \'Delivered\' && entry.data.to !== \'Shipped\'">\r\n                    {{\r\n                        \'order.history-fulfillment-transition\'\r\n                            | translate: { from: entry.data.from, to: entry.data.to }\r\n                    }}\r\n                </ng-container>\r\n                <vdr-history-entry-detail *ngIf="getFulfillment(entry) as fulfillment">\r\n                    <vdr-fulfillment-detail\r\n                        [fulfillmentId]="fulfillment.id"\r\n                        [order]="order"\r\n                    ></vdr-fulfillment-detail>\r\n                </vdr-history-entry-detail>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase="type.ORDER_NOTE">\r\n                <div class="flex">\r\n                    <div class="note-text">\r\n                        <span *ngIf="entry.isPublic" class="note-visibility public">{{\r\n                            \'common.public\' | translate\r\n                        }}</span>\r\n                        <span *ngIf="!entry.isPublic" class="note-visibility private">{{\r\n                            \'common.private\' | translate\r\n                        }}</span>\r\n                        {{ entry.data.note }}\r\n                    </div>\r\n                    <div class="flex-spacer"></div>\r\n                    <vdr-dropdown>\r\n                        <button class="icon-button" vdrDropdownTrigger>\r\n                            <clr-icon shape="ellipsis-vertical"></clr-icon>\r\n                        </button>\r\n                        <vdr-dropdown-menu vdrPosition="bottom-right">\r\n                            <button\r\n                                class="button"\r\n                                vdrDropdownItem\r\n                                (click)="updateNote.emit(entry)"\r\n                                [disabled]="!(\'UpdateOrder\' | hasPermission)"\r\n                            >\r\n                                <clr-icon shape="edit"></clr-icon>\r\n                                {{ \'common.edit\' | translate }}\r\n                            </button>\r\n                            <div class="dropdown-divider"></div>\r\n                            <button\r\n                                class="button"\r\n                                vdrDropdownItem\r\n                                (click)="deleteNote.emit(entry)"\r\n                                [disabled]="!(\'UpdateOrder\' | hasPermission)"\r\n                            >\r\n                                <clr-icon shape="trash" class="is-danger"></clr-icon>\r\n                                {{ \'common.delete\' | translate }}\r\n                            </button>\r\n                        </vdr-dropdown-menu>\r\n                    </vdr-dropdown>\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase="type.ORDER_COUPON_APPLIED">\r\n                {{ \'order.history-coupon-code-applied\' | translate }}:\r\n                <vdr-chip>\r\n                    <a [routerLink]="[\'/marketing\', \'promotions\', entry.data.promotionId]">{{\r\n                        entry.data.couponCode\r\n                    }}</a>\r\n                </vdr-chip>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase="type.ORDER_COUPON_REMOVED">\r\n                {{ \'order.history-coupon-code-removed\' | translate }}:\r\n                <vdr-chip\r\n                    ><span class="cancelled-coupon-code">{{ entry.data.couponCode }}</span></vdr-chip\r\n                >\r\n            </ng-container>\r\n        </ng-container>\r\n    </vdr-timeline-entry>\r\n    <vdr-timeline-entry [isLast]="true" [createdAt]="order.createdAt" [featured]="true">\r\n        <div class="title">\r\n            {{ \'order.history-order-created\' | translate }}\r\n        </div>\r\n    </vdr-timeline-entry>\r\n</div>\r\n',changeDetection:r.ChangeDetectionStrategy.OnPush,styles:[":host{margin-top:48px;display:block}.entry-list{margin-top:24px;margin-left:24px;margin-right:12px}.note-entry{display:flex;align-items:center}.note-entry .note{flex:1}.note-entry button{margin:0}.visibility-select{display:flex;justify-content:space-between;align-items:baseline}.visibility-select .public{color:var(--color-warning-500)}.visibility-select .private{color:var(--color-success-500)}textarea.note{flex:1;height:36px;border-radius:3px;margin-right:6px}.note-text{color:var(--color-grey-800);white-space:pre-wrap}.cancelled-coupon-code{text-decoration:line-through}.note-visibility{text-transform:lowercase}.note-visibility.public{color:var(--color-warning-500)}.note-visibility.private{color:var(--color-success-500)}"]}]}],R.propDecorators={order:[{type:r.Input}],history:[{type:r.Input}],addNote:[{type:r.Output}],updateNote:[{type:r.Output}],deleteNote:[{type:r.Output}]};var L=function(e){function r(r,n,o,a,l){var d=e.call(this,a,l)||this;d.serverConfigService=r,d.dataService=n,d.localStorageService=o,d.searchOrderCodeControl=new t.FormControl(""),d.searchLastNameControl=new t.FormControl(""),d.orderStates=d.serverConfigService.getOrderProcessStates().map((function(e){return e.name})),d.filterPresets=[{name:"open",label:i.marker("order.filter-preset-open"),config:{active:!1,states:d.orderStates.filter((function(e){return"Delivered"!==e&&"Cancelled"!==e&&"Shipped"!==e}))}},{name:"shipped",label:i.marker("order.filter-preset-shipped"),config:{active:!1,states:["Shipped"]}},{name:"completed",label:i.marker("order.filter-preset-completed"),config:{active:!1,states:["Delivered","Cancelled"]}},{name:"active",label:i.marker("order.filter-preset-active"),config:{active:!0}}],e.prototype.setQueryFn.call(d,(function(e,r){return d.dataService.order.getOrders({take:e,skip:r}).refetchOnChannelChange()}),(function(e){return e.orders}),(function(e,r){return d.createQueryOptions(e,r,d.searchOrderCodeControl.value,d.searchLastNameControl.value,d.route.snapshot.queryParamMap.get("filter")||"open")}));var s=d.localStorageService.get("orderListLastCustomFilters");return s&&d.setQueryParam(s,{replaceUrl:!0}),d}return u(r,e),r.prototype.ngOnInit=function(){var r,n=this;e.prototype.ngOnInit.call(this),this.activePreset$=this.route.queryParamMap.pipe(d.map((function(e){return e.get("filter")||"open"})),d.distinctUntilChanged());var i=l.merge(this.searchOrderCodeControl.valueChanges,this.searchLastNameControl.valueChanges).pipe(d.filter((function(e){return 2<e.length||0===e.length})),d.debounceTime(250));l.merge(i,this.route.queryParamMap).pipe(d.takeUntil(this.destroy$)).subscribe((function(e){n.refresh()}));var o=this.route.snapshot.queryParamMap;this.customFilterForm=new t.FormGroup({states:new t.FormControl(null!==(r=o.getAll("states"))&&void 0!==r?r:[]),placedAtStart:new t.FormControl(o.get("placedAtStart")),placedAtEnd:new t.FormControl(o.get("placedAtEnd"))})},r.prototype.selectFilterPreset=function(e){var r,t=null!==(r=this.localStorageService.get("orderListLastCustomFilters"))&&void 0!==r?r:{},n="custom"===e?t:{states:void 0,placedAtStart:void 0,placedAtEnd:void 0};this.setQueryParam(Object.assign({filter:e,page:1},n),{replaceUrl:!0})},r.prototype.applyCustomFilters=function(){var e=this.customFilterForm.value,r={states:e.states,placedAtStart:e.placedAtStart,placedAtEnd:e.placedAtEnd};this.setQueryParam(Object.assign({filter:"custom"},r)),this.customFilterForm.markAsPristine(),this.localStorageService.set("orderListLastCustomFilters",r)},r.prototype.createQueryOptions=function(e,r,t,i,o){var a,l=this.filterPresets.find((function(e){return e.name===o})),d={};if(l)null!=l.config.active&&(d.active={eq:l.config.active}),l.config.states&&(d.state={in:l.config.states});else if("custom"===o){var s=this.route.snapshot.queryParamMap,c=null!==(a=s.getAll("states"))&&void 0!==a?a:[],u=s.get("placedAtStart"),p=s.get("placedAtEnd");c.length&&(d.state={in:c}),u&&p?d.orderPlacedAt={between:{start:u,end:p}}:u?d.orderPlacedAt={after:u}:p&&(d.orderPlacedAt={before:p})}return i&&(d.customerLastName={contains:i}),t&&(d.code={contains:t}),{options:{skip:e,take:r,filter:Object.assign({},null!=d?d:{}),sort:{updatedAt:n.SortOrder.DESC}}}},r.prototype.getShippingNames=function(e){return e.shippingLines.length?e.shippingLines.map((function(e){return e.shippingMethod.name})).join(", "):""},r}(n.BaseListComponent);L.decorators=[{type:r.Component,args:[{selector:"vdr-order-list",template:'<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <div class="search-form">\r\n            <div class="btn-group btn-outline-primary" *ngIf="activePreset$ | async as activePreset">\r\n                <button\r\n                    class="btn"\r\n                    *ngFor="let preset of filterPresets"\r\n                    [class.btn-primary]="activePreset === preset.name"\r\n                    (click)="selectFilterPreset(preset.name)"\r\n                >\r\n                    {{ preset.label | translate }}\r\n                </button>\r\n                <button\r\n                    class="btn"\r\n                    [class.btn-primary]="activePreset === \'custom\'"\r\n                    (click)="selectFilterPreset(\'custom\')"\r\n                >\r\n                    {{ \'order.filter-custom\' | translate }}\r\n                    <clr-icon shape="angle down"></clr-icon>\r\n                </button>\r\n            </div>\r\n\r\n            <input\r\n                type="text"\r\n                name="searchTerm"\r\n                [formControl]="searchOrderCodeControl"\r\n                [placeholder]="\'order.search-by-order-code\' | translate"\r\n                class="search-input"\r\n            />\r\n            <input\r\n                type="text"\r\n                name="searchTerm"\r\n                [formControl]="searchLastNameControl"\r\n                [placeholder]="\'order.search-by-customer-last-name\' | translate"\r\n                class="search-input"\r\n            />\r\n        </div>\r\n        <div class="custom-filters" [class.expanded]="(activePreset$ | async) === \'custom\'">\r\n            <form [formGroup]="customFilterForm">\r\n                <div class="flex align-center">\r\n                    <ng-select\r\n                        [items]="orderStates"\r\n                        appendTo="body"\r\n                        [addTag]="false"\r\n                        [multiple]="true"\r\n                        formControlName="states"\r\n                        [placeholder]="\'state.all-orders\' | translate"\r\n                        [clearable]="true"\r\n                        [searchable]="false"\r\n                    >\r\n                        <ng-template ng-option-tmp let-item="item">{{ item | stateI18nToken | translate }}</ng-template>\r\n                        <ng-template ng-label-tmp let-item="item" let-clear="clear">\r\n                            <span class="ng-value-label"> {{ item | stateI18nToken | translate }}</span>\r\n                            <span class="ng-value-icon right" (click)="clear(item)" aria-hidden="true">×</span>\r\n                        </ng-template>\r\n                    </ng-select>\r\n                    <button\r\n                        class="btn btn-secondary"\r\n                        [disabled]="customFilterForm.pristine"\r\n                        (click)="applyCustomFilters()"\r\n                    >\r\n                        {{ \'order.apply-filters\' | translate }}\r\n                        <clr-icon shape="filter"></clr-icon>\r\n                    </button>\r\n                </div>\r\n                <div class="flex">\r\n                    <div>\r\n                        <label>{{ \'order.placed-at-start\' | translate }}</label>\r\n                        <vdr-datetime-picker formControlName="placedAtStart"></vdr-datetime-picker>\r\n                    </div>\r\n                    <div>\r\n                        <label>{{ \'order.placed-at-end\' | translate }}</label>\r\n                        <vdr-datetime-picker formControlName="placedAtEnd"></vdr-datetime-picker>\r\n                    </div>\r\n                </div>\r\n            </form>\r\n        </div>\r\n    </vdr-ab-left>\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId="order-list"></vdr-action-bar-items>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<vdr-data-table\r\n    [items]="items$ | async"\r\n    [itemsPerPage]="itemsPerPage$ | async"\r\n    [totalItems]="totalItems$ | async"\r\n    [currentPage]="currentPage$ | async"\r\n    (pageChange)="setPageNumber($event)"\r\n    (itemsPerPageChange)="setItemsPerPage($event)"\r\n>\r\n    <vdr-dt-column>{{ \'common.code\' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ \'order.customer\' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ \'order.state\' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ \'order.total\' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ \'common.updated-at\' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ \'order.placed-at\' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ \'order.shipping\' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column></vdr-dt-column>\r\n    <ng-template let-order="item">\r\n        <td class="left align-middle">{{ order.code }}</td>\r\n        <td class="left align-middle">\r\n            <vdr-customer-label [customer]="order.customer"></vdr-customer-label>\r\n        </td>\r\n        <td class="left align-middle">\r\n            <vdr-order-state-label [state]="order.state"></vdr-order-state-label>\r\n        </td>\r\n        <td class="left align-middle">{{ order.total | localeCurrency: order.currencyCode }}</td>\r\n        <td class="left align-middle">{{ order.updatedAt | timeAgo }}</td>\r\n        <td class="left align-middle">{{ order.orderPlacedAt | localeDate: \'medium\' }}</td>\r\n        <td class="left align-middle">{{ getShippingNames(order) }}</td>\r\n        <td class="right align-middle">\r\n            <vdr-table-row-action\r\n                iconShape="shopping-cart"\r\n                [label]="\'common.open\' | translate"\r\n                [linkTo]="order.state === \'Modifying\' ? [\'./\', order.id, \'modify\'] : [\'./\', order.id]"\r\n            ></vdr-table-row-action>\r\n        </td>\r\n    </ng-template>\r\n</vdr-data-table>\r\n',changeDetection:r.ChangeDetectionStrategy.OnPush,styles:[".search-form{display:flex;flex-direction:column;align-items:baseline;width:100%;margin-bottom:6px}@media screen and (min-width:768px){.search-form{flex-direction:row}}.search-input{margin-left:6px;margin-top:6px;min-width:300px}.custom-filters{overflow:hidden;max-height:0;padding-bottom:6px}.custom-filters.expanded{max-height:none}.custom-filters>form{display:flex;flex-direction:column;align-items:center}.custom-filters>form>div{width:100%}ng-select{flex:1;min-width:200px}ng-select,ng-select ::ng-deep .ng-select-container{height:36px}"]}]}],L.ctorParameters=function(){return[{type:n.ServerConfigService},{type:n.DataService},{type:n.LocalStorageService},{type:a.Router},{type:a.ActivatedRoute}]};var N=function(){function e(){this.settlePayment=new r.EventEmitter,this.transitionPaymentState=new r.EventEmitter,this.settleRefund=new r.EventEmitter}return e.prototype.refundHasMetadata=function(e){return!!e&&Object.keys(e.metadata).length>0},e.prototype.nextOtherStates=function(){return this.payment?this.payment.nextStates.filter((function(e){return"Settled"!==e})):[]},e}();N.decorators=[{type:r.Component,args:[{selector:"vdr-order-payment-card",template:'<div class="card">\r\n    <div class="card-header payment-header">\r\n        <div>\r\n            {{ \'order.payment\' | translate }}\r\n            <ng-container *ngIf="payment.transactionId">#{{ payment.transactionId }}</ng-container>\r\n        </div>\r\n        <div class="payment-state">\r\n            <vdr-payment-state-label [state]="payment.state"></vdr-payment-state-label>\r\n        </div>\r\n    </div>\r\n    <div class="card-block">\r\n        <vdr-payment-detail [payment]="payment" [currencyCode]="currencyCode"></vdr-payment-detail>\r\n    </div>\r\n    <ng-container *ngFor="let refund of payment.refunds">\r\n        <div class="card-header payment-header">\r\n            <clr-icon shape="redo" class="refund-icon" dir="down"></clr-icon>\r\n            {{ \'order.refund\' | translate }} #{{ refund.id }}\r\n            <div class="clr-flex-fill"></div>\r\n            <vdr-refund-state-label [state]="refund.state"></vdr-refund-state-label>\r\n        </div>\r\n        <div class="card-block">\r\n            <vdr-labeled-data [label]="\'common.created-at\' | translate">\r\n                {{ refund.createdAt | localeDate: \'medium\' }}\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data [label]="\'order.refund-total\' | translate">\r\n                {{ refund.total | localeCurrency: currencyCode }}\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data [label]="\'order.transaction-id\' | translate" *ngIf="refund.transactionId">\r\n                {{ refund.transactionId }}\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data [label]="\'order.refund-reason\' | translate" *ngIf="refund.reason">\r\n                {{ refund.reason }}\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data [label]="\'order.refund-metadata\' | translate" *ngIf="refundHasMetadata(refund)">\r\n                <vdr-object-tree [value]="refund.metadata"></vdr-object-tree>\r\n            </vdr-labeled-data>\r\n        </div>\r\n        <div class="card-footer" *ngIf="refund.state === \'Pending\'">\r\n            <button class="btn btn-sm btn-primary" (click)="settleRefund.emit(refund)">\r\n                {{ \'order.settle-refund\' | translate }}\r\n            </button>\r\n        </div>\r\n    </ng-container>\r\n    <div class="card-footer" *ngIf="payment.nextStates.length">\r\n        <button\r\n            class="btn btn-sm btn-primary"\r\n            *ngIf="payment.nextStates.includes(\'Settled\')"\r\n            (click)="settlePayment.emit(payment)"\r\n        >\r\n            {{ \'order.settle-payment\' | translate }}\r\n        </button>\r\n        <vdr-dropdown>\r\n            <button class="icon-button" vdrDropdownTrigger>\r\n                <clr-icon shape="ellipsis-vertical"></clr-icon>\r\n            </button>\r\n            <vdr-dropdown-menu vdrPosition="bottom-right">\r\n                <ng-container *ngFor="let nextState of nextOtherStates()">\r\n                    <button\r\n                        type="button"\r\n                        class="btn"\r\n                        vdrDropdownItem\r\n                        (click)="transitionPaymentState.emit({ payment: payment, state: nextState })"\r\n                    >\r\n                        <ng-container *ngIf="nextState !== \'Cancelled\'; else cancel">\r\n                            <clr-icon shape="step-forward-2"></clr-icon>\r\n                            {{\r\n                                \'order.transition-to-state\'\r\n                                    | translate: { state: (nextState | stateI18nToken | translate) }\r\n                            }}\r\n                        </ng-container>\r\n                        <ng-template #cancel>\r\n                            <clr-icon shape="error-standard" class="is-error"></clr-icon>\r\n                            {{ \'order.cancel-payment\' | translate }}\r\n                        </ng-template>\r\n                    </button>\r\n                </ng-container>\r\n            </vdr-dropdown-menu>\r\n        </vdr-dropdown>\r\n    </div>\r\n</div>\r\n',changeDetection:r.ChangeDetectionStrategy.OnPush,styles:[".payment-header{display:flex;justify-content:space-between;align-items:center}.refund-icon{margin-right:6px;color:var(--color-grey-400)}.card-footer{display:flex;align-items:center;justify-content:flex-end}"]}]}],N.propDecorators={payment:[{type:r.Input}],currencyCode:[{type:r.Input}],settlePayment:[{type:r.Output}],transitionPaymentState:[{type:r.Output}],settleRefund:[{type:r.Output}]};var M=function(){function e(){}return e.prototype.ngOnInit=function(){var e=this;this.active$=this.from.active$.asObservable().pipe(d.tap((function(r){return e.to.activeTarget$.next(r)})))},e.prototype.getStyle=function(){var e=this.from.index<this.to.index?"down":"up",r=this.from.getPos("down"===e?"bottom":"top"),t=this.to.getPos("down"===e?"top":"bottom"),n=Math.abs(r.x-t.x),i=Math.abs(r.y-t.y),o=Math.sqrt(Math.pow(n,2)+Math.pow(i,2));return Object.assign({"top.px":r.y,"left.px":r.x+("down"===e?10:40)+12*this.index,"height.px":o,"width.px":1},"up"===e?{transform:"rotateZ(180deg)","transform-origin":"top"}:{})},e}();M.decorators=[{type:r.Component,args:[{selector:"vdr-order-process-edge",template:'<div\r\n    [attr.data-from]="from.node.name"\r\n    [attr.data-to]="to.node.name"\r\n    [ngStyle]="getStyle()"\r\n    [class.active]="active$ | async"\r\n    class="edge">\r\n    <clr-icon shape="arrow" flip="vertical" class="arrow"></clr-icon>\r\n</div>\r\n',changeDetection:r.ChangeDetectionStrategy.OnPush,styles:[".edge{position:absolute;border:1px solid var(--color-component-border-200);background-color:var(--color-component-bg-300);opacity:.3;transition:border .2s,opacity .2s,background-color .2s}.edge.active{border-color:var(--color-primary-500);background-color:var(--color-primary-500);opacity:1}.edge.active .arrow{color:var(--color-primary-500)}.edge .arrow{position:absolute;bottom:-4px;left:-8px;color:var(--color-grey-300)}"]}]}],M.propDecorators={from:[{type:r.Input}],to:[{type:r.Input}],index:[{type:r.Input}]};var j=function(){function e(e){this.elementRef=e,this.active$=new l.BehaviorSubject(!1),this.activeTarget$=new l.BehaviorSubject(!1),this.isCancellable=!1,this.cancelledState="Cancelled"}return e.prototype.ngOnChanges=function(e){this.isCancellable=!!this.node.to.find((function(e){return"Cancelled"===e.name})),e.active&&this.active$.next(this.active)},e.prototype.getPos=function(e){var r,t;void 0===e&&(e="top");this.elementRef.nativeElement.getBoundingClientRect();var n=null!==(t=null===(r=this.elementRef.nativeElement.querySelector(".node"))||void 0===r?void 0:r.getBoundingClientRect().height)&&void 0!==t?t:0;return{x:10,y:72*this.index+("bottom"===e?n:0)}},e.prototype.getStyle=function(){var e=this.getPos();return{"top.px":e.y,"left.px":e.x}},e}();j.decorators=[{type:r.Component,args:[{selector:"vdr-order-process-node",template:'<div class="node-wrapper" [ngStyle]="getStyle()" [class.active]="active$ | async">\r\n    <div\r\n        class="node"\r\n        [class.active-target]="activeTarget$ | async"\r\n    >\r\n        {{ node.name | stateI18nToken | translate }}\r\n    </div>\r\n    <div class="cancelled-wrapper" *ngIf="isCancellable">\r\n        <div class="cancelled-edge">\r\n        </div>\r\n        <clr-icon shape="dot-circle"></clr-icon>\r\n        <div class="cancelled-node">\r\n            {{ cancelledState | stateI18nToken | translate }}\r\n        </div>\r\n    </div>\r\n</div>\r\n',changeDetection:r.ChangeDetectionStrategy.OnPush,styles:[":host{display:block}.node-wrapper{position:absolute;z-index:1;display:flex;align-items:center}.node{display:inline-block;border:2px solid var(--color-component-border-200);border-radius:3px;padding:3px 6px;z-index:1;background-color:var(--color-component-bg-100);opacity:.7;transition:opacity .2s,background-color .2s,color .2s;cursor:default}.node.active-target{border-color:var(--color-primary-500);opacity:.9}.cancelled-wrapper{display:flex;align-items:center;color:var(--color-grey-300);transition:color .2s,opacity .2s;opacity:.7}.cancelled-edge{width:48px;height:2px;background-color:var(--color-component-bg-300);transition:background-color .2s}clr-icon{margin-left:-1px}.cancelled-node{margin-left:6px}.active .cancelled-wrapper{opacity:1}.active .node{opacity:1;background-color:var(--color-primary-600);border-color:var(--color-primary-600);color:var(--color-primary-100)}.active .cancelled-wrapper{color:var(--color-error-500)}.active .cancelled-edge{background-color:var(--color-error-500)}"]}]}],j.ctorParameters=function(){return[{type:r.ElementRef}]},j.propDecorators={node:[{type:r.Input}],index:[{type:r.Input}],active:[{type:r.Input}]};var q=function(){function e(e){this.changeDetector=e,this.setActiveState$=new l.BehaviorSubject(void 0),this.nodes=[],this.edges=[]}return Object.defineProperty(e.prototype,"outerHeight",{get:function(){return 72*this.nodes.length},enumerable:!1,configurable:!0}),e.prototype.ngOnInit=function(){this.setActiveState$.next(this.initialState),this.activeState$=this.setActiveState$.pipe(d.debounceTime(150))},e.prototype.ngOnChanges=function(e){this.populateNodes()},e.prototype.ngAfterViewInit=function(){var e=this;setTimeout((function(){return e.populateEdges()}))},e.prototype.onMouseOver=function(e){this.setActiveState$.next(e)},e.prototype.onMouseOut=function(){this.setActiveState$.next(this.initialState)},e.prototype.getNodeFor=function(e){if(this.nodeComponents)return this.nodeComponents.find((function(r){return r.node.name===e}))},e.prototype.populateNodes=function(){var e,r,t,n,i,o,a=new Map;try{for(var l=p(this.states),d=l.next();!d.done;d=l.next()){var s=d.value;a.set(s.name,{name:s.name,to:[]})}}catch(r){e={error:r}}finally{try{d&&!d.done&&(r=l.return)&&r.call(l)}finally{if(e)throw e.error}}var c=function(e,r){var t,n,l=null!==(o=null===(i=u.states.find((function(r){return r.name===e})))||void 0===i?void 0:i.to)&&void 0!==o?o:[];try{for(var d=(t=void 0,p(l)),s=d.next();!s.done;s=d.next()){var c=s.value,m=a.get(c);m&&r.to.push(m)}}catch(e){t={error:e}}finally{try{s&&!s.done&&(n=d.return)&&n.call(d)}finally{if(t)throw t.error}}},u=this;try{for(var y=p(a.entries()),g=y.next();!g.done;g=y.next()){var v=m(g.value,2);c(v[0],v[1])}}catch(e){t={error:e}}finally{try{g&&!g.done&&(n=y.return)&&n.call(y)}finally{if(t)throw t.error}}this.nodes=f(a.values()).filter((function(e){return"Cancelled"!==e.name}))},e.prototype.populateEdges=function(){var e,r,t,n;try{for(var i=p(this.nodes),o=i.next();!o.done;o=i.next()){var a=o.value,l=this.getNodeFor(a.name),d=0;try{for(var s=(t=void 0,p(a.to)),c=s.next();!c.done;c=s.next()){var u=c.value,m=this.getNodeFor(u.name);l&&m&&l!==m&&(this.edges.push({to:m,from:l,index:d}),d++)}}catch(e){t={error:e}}finally{try{c&&!c.done&&(n=s.return)&&n.call(s)}finally{if(t)throw t.error}}}}catch(r){e={error:r}}finally{try{o&&!o.done&&(r=i.return)&&r.call(i)}finally{if(e)throw e.error}}this.edges=f(this.edges),this.changeDetector.markForCheck()},e}();q.decorators=[{type:r.Component,args:[{selector:"vdr-order-process-graph",template:'<ng-container *ngFor="let state of nodes; let i = index">\r\n    <vdr-order-process-node\r\n        [node]="state"\r\n        [index]="i"\r\n        [active]="(activeState$ | async) === state.name"\r\n        (mouseenter)="onMouseOver(state.name)"\r\n        (mouseleave)="onMouseOut()"\r\n    ></vdr-order-process-node>\r\n</ng-container>\r\n<ng-container *ngFor="let edge of edges">\r\n    <vdr-order-process-edge [from]="edge.from" [to]="edge.to" [index]="edge.index"></vdr-order-process-edge>\r\n</ng-container>\r\n',changeDetection:r.ChangeDetectionStrategy.OnPush,styles:[":host{display:block;border:1px #ff69b4;margin:20px;padding:12px;position:relative}.state-row{display:flex}"]}]}],q.ctorParameters=function(){return[{type:r.ChangeDetectorRef}]},q.propDecorators={states:[{type:r.Input}],initialState:[{type:r.Input}],nodeComponents:[{type:r.ViewChildren,args:[j]}],outerHeight:[{type:r.HostBinding,args:["style.height.px"]}]};var _=function(){function e(){this.orderLineCustomFieldsVisible=!1}return Object.defineProperty(e.prototype,"visibleOrderLineCustomFields",{get:function(){return this.orderLineCustomFieldsVisible?this.orderLineCustomFields:[]},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"showElided",{get:function(){return!this.orderLineCustomFieldsVisible&&0<this.orderLineCustomFields.length},enumerable:!1,configurable:!0}),e.prototype.ngOnInit=function(){this.orderLineCustomFieldsVisible=this.orderLineCustomFields.length<2},e.prototype.toggleOrderLineCustomFields=function(){this.orderLineCustomFieldsVisible=!this.orderLineCustomFieldsVisible},e.prototype.getLineDiscounts=function(e){return e.discounts.filter((function(e){return e.type===n.AdjustmentType.PROMOTION}))},e.prototype.getLineCustomFields=function(e){var r=this;return this.orderLineCustomFields.map((function(r){return{config:r,value:e.customFields[r.name]}})).filter((function(e){return!!r.orderLineCustomFieldsVisible||null!=e.value}))},e.prototype.getPromotionLink=function(e){return["/marketing","promotions",e.adjustmentSource.split(":")[1]]},e.prototype.getCouponCodeForAdjustment=function(e,r){var t=r.adjustmentSource.split(":")[1],n=e.promotions.find((function(e){return e.id===t}));if(n)return n.couponCode||void 0},e}();_.decorators=[{type:r.Component,args:[{selector:"vdr-order-table",template:'<table class="order-table table">\r\n    <thead>\r\n        <tr>\r\n            <th></th>\r\n            <th>{{ \'order.product-name\' | translate }}</th>\r\n            <th>{{ \'order.product-sku\' | translate }}</th>\r\n            <th>{{ \'order.unit-price\' | translate }}</th>\r\n            <th>{{ \'order.quantity\' | translate }}</th>\r\n            <th>{{ \'order.total\' | translate }}</th>\r\n        </tr>\r\n    </thead>\r\n    <tbody>\r\n        <ng-container *ngFor="let line of order.lines">\r\n            <tr class="order-line" [class.is-cancelled]="line.quantity === 0">\r\n                <td class="align-middle thumb">\r\n                    <img *ngIf="line.featuredAsset" [src]="line.featuredAsset | assetPreview: \'tiny\'" />\r\n                </td>\r\n                <td class="align-middle name">{{ line.productVariant.name }}</td>\r\n                <td class="align-middle sku">{{ line.productVariant.sku }}</td>\r\n                <td class="align-middle unit-price">\r\n                    {{ line.unitPriceWithTax | localeCurrency: order.currencyCode }}\r\n                    <div class="net-price" [title]="\'order.net-price\' | translate">\r\n                        {{ line.unitPrice | localeCurrency: order.currencyCode }}\r\n                    </div>\r\n                </td>\r\n                <td class="align-middle quantity">\r\n                    {{ line.quantity }}\r\n                    <vdr-line-refunds [line]="line" [payments]="order.payments"></vdr-line-refunds>\r\n                    <vdr-line-fulfillment [line]="line" [orderState]="order.state"></vdr-line-fulfillment>\r\n                </td>\r\n                <td class="align-middle total">\r\n                    {{ line.linePriceWithTax | localeCurrency: order.currencyCode }}\r\n                    <div class="net-price" [title]="\'order.net-price\' | translate">\r\n                        {{ line.linePrice | localeCurrency: order.currencyCode }}\r\n                    </div>\r\n\r\n                    <ng-container *ngIf="getLineDiscounts(line) as discounts">\r\n                        <vdr-dropdown *ngIf="discounts.length">\r\n                            <div class="promotions-label" vdrDropdownTrigger>\r\n                                {{ \'order.promotions-applied\' | translate }}\r\n                            </div>\r\n                            <vdr-dropdown-menu>\r\n                                <div class="line-promotion" *ngFor="let discount of discounts">\r\n                                    <a class="promotion-name" [routerLink]="getPromotionLink(discount)">{{\r\n                                        discount.description\r\n                                    }}</a>\r\n                                    <div class="promotion-amount">\r\n                                        {{ discount.amountWithTax | localeCurrency: order.currencyCode }}\r\n                                        <div class="net-price" [title]="\'order.net-price\' | translate">\r\n                                            {{ discount.amount | localeCurrency: order.currencyCode }}\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </vdr-dropdown-menu>\r\n                        </vdr-dropdown>\r\n                    </ng-container>\r\n                </td>\r\n            </tr>\r\n            <ng-container *ngIf="getLineCustomFields(line) as customFields">\r\n                <tr *ngIf="customFields.length">\r\n                    <td colspan="6" class="custom-fields-row">\r\n                        <div class="order-line-custom-fields">\r\n                            <div class="custom-field" *ngFor="let field of customFields">\r\n                                <vdr-labeled-data [label]="field.config | customFieldLabel">\r\n                                    <div class="mt2" [ngSwitch]="field.config.type">\r\n                                        <ng-template [ngSwitchCase]="\'datetime\'">\r\n                                            <span [title]="field.value">{{ field.value }}</span>\r\n                                        </ng-template>\r\n                                        <ng-template [ngSwitchCase]="\'boolean\'">\r\n                                            <ng-template [ngIf]="field.value === true">\r\n                                                <clr-icon shape="check"></clr-icon>\r\n                                            </ng-template>\r\n                                            <ng-template [ngIf]="field.value === false">\r\n                                                <clr-icon shape="times"></clr-icon>\r\n                                            </ng-template>\r\n                                        </ng-template>\r\n                                        <ng-template ngSwitchDefault>\r\n                                            {{ field.value }}\r\n                                        </ng-template>\r\n                                    </div>\r\n                                </vdr-labeled-data>\r\n                            </div>\r\n                        </div>\r\n                    </td>\r\n                </tr>\r\n            </ng-container>\r\n        </ng-container>\r\n        <tr class="surcharge" *ngFor="let surcharge of order.surcharges">\r\n            <td class="align-middle name left" colspan="2">{{ surcharge.description }}</td>\r\n            <td class="align-middle sku">{{ surcharge.sku }}</td>\r\n            <td class="align-middle" colspan="2"></td>\r\n            <td class="align-middle total">\r\n                {{ surcharge.priceWithTax | localeCurrency: order.currencyCode }}\r\n                <div class="net-price" [title]="\'order.net-price\' | translate">\r\n                    {{ surcharge.price | localeCurrency: order.currencyCode }}\r\n                </div>\r\n            </td>\r\n        </tr>\r\n        <tr class="order-adjustment" *ngFor="let discount of order.discounts">\r\n            <td colspan="5" class="left clr-align-middle">\r\n                <a [routerLink]="getPromotionLink(discount)">{{ discount.description }}</a>\r\n                <vdr-chip *ngIf="getCouponCodeForAdjustment(order, discount) as couponCode">{{\r\n                    couponCode\r\n                }}</vdr-chip>\r\n            </td>\r\n            <td class="clr-align-middle">\r\n                {{ discount.amountWithTax | localeCurrency: order.currencyCode }}\r\n                <div class="net-price" [title]="\'order.net-price\' | translate">\r\n                    {{ discount.amount | localeCurrency: order.currencyCode }}\r\n                </div>\r\n            </td>\r\n        </tr>\r\n        <tr class="sub-total">\r\n            <td class="left clr-align-middle">{{ \'order.sub-total\' | translate }}</td>\r\n            <td colspan="4"></td>\r\n            <td class="clr-align-middle">\r\n                {{ order.subTotalWithTax | localeCurrency: order.currencyCode }}\r\n                <div class="net-price" [title]="\'order.net-price\' | translate">\r\n                    {{ order.subTotal | localeCurrency: order.currencyCode }}\r\n                </div>\r\n            </td>\r\n        </tr>\r\n        <tr class="shipping">\r\n            <td class="left clr-align-middle">{{ \'order.shipping\' | translate }}</td>\r\n            <td class="clr-align-middle">{{ order.shippingLines[0]?.shippingMethod?.name }}</td>\r\n            <td colspan="3"></td>\r\n            <td class="clr-align-middle">\r\n                {{ order.shippingWithTax | localeCurrency: order.currencyCode }}\r\n                <div class="net-price" [title]="\'order.net-price\' | translate">\r\n                    {{ order.shipping | localeCurrency: order.currencyCode }}\r\n                </div>\r\n            </td>\r\n        </tr>\r\n        <tr class="total">\r\n            <td class="left clr-align-middle">{{ \'order.total\' | translate }}</td>\r\n            <td colspan="4"></td>\r\n            <td class="clr-align-middle">\r\n                {{ order.totalWithTax | localeCurrency: order.currencyCode }}\r\n                <div class="net-price" [title]="\'order.net-price\' | translate">\r\n                    {{ order.total | localeCurrency: order.currencyCode }}\r\n                </div>\r\n            </td>\r\n        </tr>\r\n    </tbody>\r\n</table>\r\n',changeDetection:r.ChangeDetectionStrategy.OnPush,styles:[".order-table .is-cancelled td{text-decoration:line-through;background-color:var(--color-component-bg-200)}.order-table .sub-total td,.order-table .total td{border-top:1px dashed var(--color-component-border-200)}.order-table .total td{font-weight:700}.order-table td.custom-fields-row{border-top-style:dashed;border-top-color:var(--color-grey-200)}.order-table .order-line-custom-fields{display:flex;flex-wrap:wrap}.order-table .order-line-custom-fields .custom-field{text-align:start;max-width:200px;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px;margin-right:18px}.order-table .order-line-custom-field{background-color:var(--color-component-bg-100)}.order-table .net-price,.order-table .order-line-custom-field .custom-field-ellipsis{color:var(--color-text-300)}.order-table .net-price{font-size:11px}.order-table .promotions-label{-webkit-text-decoration:underline dotted var(--color-text-200);text-decoration:underline dotted var(--color-text-200);font-size:11px;margin-top:6px;cursor:pointer;text-transform:lowercase}::ng-deep .line-promotion{display:flex;justify-content:space-between;padding:6px 12px}::ng-deep .line-promotion .promotion-amount{margin-left:12px}::ng-deep .line-promotion .net-price{font-size:11px;color:var(--color-text-300)}"]}]}],_.propDecorators={order:[{type:r.Input}],orderLineCustomFields:[{type:r.Input}]};var V=function(){};V.decorators=[{type:r.Component,args:[{selector:"vdr-payment-detail",template:'<vdr-labeled-data [label]="\'order.payment-method\' | translate">\r\n    {{ payment.method }}\r\n</vdr-labeled-data>\r\n<vdr-labeled-data [label]="\'order.amount\' | translate">\r\n    {{ payment.amount | localeCurrency: currencyCode }}\r\n</vdr-labeled-data>\r\n<vdr-labeled-data *ngIf="payment.errorMessage" [label]="\'order.error-message\' | translate">\r\n    {{ payment.errorMessage }}\r\n</vdr-labeled-data>\r\n<vdr-labeled-data *ngIf="payment.transactionId" [label]="\'order.transaction-id\' | translate">\r\n    {{ payment.transactionId }}\r\n</vdr-labeled-data>\r\n<vdr-labeled-data [label]="\'order.payment-metadata\' | translate">\r\n    <vdr-object-tree [value]="payment.metadata"></vdr-object-tree>\r\n</vdr-labeled-data>\r\n',changeDetection:r.ChangeDetectionStrategy.OnPush,styles:[""]}]}],V.propDecorators={payment:[{type:r.Input}],currencyCode:[{type:r.Input}]};var $=function(){function e(){}return Object.defineProperty(e.prototype,"chipColorType",{get:function(){switch(this.state){case"Authorized":return"warning";case"Settled":return"success";case"Declined":case"Cancelled":return"error"}},enumerable:!1,configurable:!0}),e}();$.decorators=[{type:r.Component,args:[{selector:"vdr-payment-state-label",template:'<vdr-chip [title]="\'order.payment-state\' | translate" [colorType]="chipColorType">\r\n    <clr-icon shape="check-circle" *ngIf="state === \'Settled\'"></clr-icon>\r\n    {{ state | stateI18nToken | translate }}\r\n</vdr-chip>\r\n',changeDetection:r.ChangeDetectionStrategy.OnPush,styles:[":host{font-size:14px}"]}]}],$.propDecorators={state:[{type:r.Input}]};var H=function(){function e(){}return Object.defineProperty(e.prototype,"chipColorType",{get:function(){switch(this.state){case"Pending":return"warning";case"Settled":return"success";case"Failed":return"error"}},enumerable:!1,configurable:!0}),e}();H.decorators=[{type:r.Component,args:[{selector:"vdr-refund-state-label",template:'<vdr-chip [title]="\'order.payment-state\' | translate" [colorType]="chipColorType">\r\n    <clr-icon shape="check-circle" *ngIf="state === \'Settled\'"></clr-icon>\r\n    {{ state | stateI18nToken | translate }}\r\n</vdr-chip>\r\n',changeDetection:r.ChangeDetectionStrategy.OnPush,styles:[":host{font-size:14px}"]}]}],H.propDecorators={state:[{type:r.Input}]};var W=function(){};W.decorators=[{type:r.Component,args:[{selector:"vdr-simple-item-list",template:'<div class="items-list">\r\n    <ul>\r\n        <li *ngFor="let item of items" [title]="item.name">\r\n            <div class="quantity">{{ item.quantity }}</div>\r\n            <clr-icon shape="times" size="12"></clr-icon>\r\n            {{ item.name }}\r\n        </li>\r\n    </ul>\r\n</div>\r\n',changeDetection:r.ChangeDetectionStrategy.OnPush,styles:[".items-list{font-size:12px}.items-list ul{margin-top:6px;list-style-type:none;margin-left:2px}.items-list ul li{line-height:14px;text-overflow:ellipsis;overflow:hidden}.items-list .quantity{min-width:16px;display:inline-block}"]}]}],W.propDecorators={items:[{type:r.Input}]};var Q=function(e){function r(r,t){return e.call(this,r,{__typename:"Order",id:"",code:"",createdAt:"",updatedAt:"",total:0},(function(e){return t.order.getOrder(e).mapStream((function(e){return e.order}))}))||this}return u(r,e),r}(n.BaseEntityResolver);Q.ɵprov=r.ɵɵdefineInjectable({factory:function(){return new Q(r.ɵɵinject(a.Router),r.ɵɵinject(n.DataService))},token:Q,providedIn:"root"}),Q.decorators=[{type:r.Injectable,args:[{providedIn:"root"}]}],Q.ctorParameters=function(){return[{type:a.Router},{type:n.DataService}]};var U={breadcrumb:i.marker("breadcrumb.orders")},B={breadcrumb:Y},G={breadcrumb:J},z=[{path:"",component:L,data:U},{path:":id",component:D,resolve:n.createResolveData(Q),canDeactivate:[n.CanDeactivateDetailGuard],data:B},{path:":id/modify",component:E,resolve:n.createResolveData(Q),data:G}];function Y(e,r){return n.detailBreadcrumb({entity:e.entity,id:r.id,breadcrumbKey:"breadcrumb.orders",getName:function(e){return e.code},route:""})}function J(e,r){return Y(e,r).pipe(d.map((function(e){var r=e.slice();return r[0].link[0]="../",r[1].link[0]="../orders",r.concat({label:i.marker("breadcrumb.modifying"),link:[""]})})))}var Z=function(){};Z.decorators=[{type:r.NgModule,args:[{imports:[n.SharedModule,a.RouterModule.forChild(z)],declarations:[L,D,g,C,T,y,$,S,N,H,P,R,h,V,W,x,q,j,M,F,b,v,E,_,A,I,s,O]}]}],e.AddManualPaymentDialogComponent=s,e.CancelOrderDialogComponent=y,e.FulfillOrderDialogComponent=g,e.FulfillmentCardComponent=v,e.FulfillmentDetailComponent=h,e.FulfillmentStateLabelComponent=b,e.LineFulfillmentComponent=C,e.LineRefundsComponent=S,e.ModificationDetailComponent=I,e.NODE_HEIGHT=72,e.OrderCustomFieldsCardComponent=x,e.OrderDetailComponent=D,e.OrderEditorComponent=E,e.OrderEditsPreviewDialogComponent=A,e.OrderHistoryComponent=R,e.OrderListComponent=L,e.OrderModule=Z,e.OrderPaymentCardComponent=N,e.OrderProcessEdgeComponent=M,e.OrderProcessGraphComponent=q,e.OrderProcessGraphDialogComponent=F,e.OrderProcessNodeComponent=j,e.OrderResolver=Q,e.OrderStateSelectDialogComponent=O,e.OrderTableComponent=_,e.OrderTransitionService=w,e.PaymentDetailComponent=V,e.PaymentStateLabelComponent=$,e.RefundOrderDialogComponent=T,e.RefundStateLabelComponent=H,e.SettleRefundDialogComponent=P,e.SimpleItemListComponent=W,e.modifyingOrderBreadcrumb=J,e.orderBreadcrumb=Y,e.orderRoutes=z,e.ɵ0=U,e.ɵ1=B,e.ɵ2=G,Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=vendure-admin-ui-order.umd.min.js.map